release of v10.34.1 (#3646)

packages/dnb-design-system-portal/gatsby-browser.tsx

@@ -5,6 +5,7 @@
 
 import { applyPageFocus } from '@dnb/eufemia/src/shared/helpers'
 import { rootElement, pageElement } from './src/core/PortalProviders'
+import { scrollToHash } from '@dnb/eufemia/src/components/Anchor'
 import ReactDOM from 'react-dom/client'
 
 if (typeof window !== 'undefined') {
@@ -53,5 +54,8 @@ export const onRouteUpdate = ({ location, prevLocation }) => {
   //  then we apply the page content focus for accessibility
   if (prevLocation && prevLocation?.pathname !== location?.pathname) {
     applyPageFocus('content')
+    if (location.hash) {
+      scrollToHash(location.hash)
+    }
   }
 }

packages/dnb-design-system-portal/src/docs/uilib/components/anchor/info.mdx

@@ -48,6 +48,20 @@ render(
 )
 ```
 
+Or with the `scrollToHash` helper function:
+
+```jsx
+import Anchor, { scrollToHash } from '@dnb/eufemia/components/Anchor'
+
+scrollToHash('/path#hash-id')
+
+render(
+  <App>
+    <div id="hash-id">element to scroll to</div>
+  </App>,
+)
+```
+
 ## Blank target
 
 **NB:** If you only use a vanilla HTML anchor element including `target="_blank"` then you have to ensure you add a `title` attribute that includes `Opens a new Window` or as a part of the text:

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/FieldProps/Examples.tsx

@@ -10,7 +10,8 @@ export const Required = () => {
           <Field.String label="Not required" />
 
           <Form.FieldProps required>
-            <Field.String label="Required" />
+            <Field.String label="Required A" />
+            <Field.Number label="Required B" />
           </Form.FieldProps>
 
           <Form.ButtonRow>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/info.mdx

@@ -4,13 +4,14 @@ showTabs: true
 
 ## Description
 
-`Value.SummaryList` uses definition lists to semantically make content consumable for screen readers.
+The `Value.SummaryList` component ensures that the wrapped `Value.*` components are rendered as definition lists, which helps maintain semantic correctness.
 
 ```jsx
 import { Value } from '@dnb/eufemia/extensions/forms'
 render(
-  <Value.SummaryList layout="grid">
-    <Value.String label="Label" path="/myValue" />
+  <Value.SummaryList>
+    <Value.String label="First value" path="/myValue" />
+    <Value.String label="Second value" path="/mySecondValue" />
   </Value.SummaryList>,
 )
 ```

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/about-forms.mdx

@@ -10,7 +10,6 @@ import QuickStart from './quick-start.mdx'
 
 - [Philosophy](#philosophy)
 - [Features](#features)
-- [First steps](#first-steps)
 - [Quick start](#quick-start)
 - [Create your own component](#create-your-own-component)
 

packages/dnb-design-system-portal/src/shared/tags/Anchor.tsx

@@ -3,7 +3,7 @@
  *
  */
 
-import React from 'react'
+import React, { useCallback } from 'react'
 import { Anchor as EufemiaAnchor } from '@dnb/eufemia/src'
 import {
   AnchorAllProps as Props,
@@ -25,6 +25,16 @@ const PortalLink = React.forwardRef(function Link<TState>(
   { href, onClick = null, ...props }: AnchorProps,
   ref,
 ) {
+  const clickHandler = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      startPageTransition()
+      if (onClick) {
+        onClick(event)
+      }
+    },
+    [onClick],
+  )
+
   return (
     <GatsbyLink
       to={href}
@@ -33,13 +43,6 @@ const PortalLink = React.forwardRef(function Link<TState>(
       onClick={clickHandler}
     />
   )
-
-  function clickHandler(event: React.MouseEvent<HTMLAnchorElement>) {
-    startPageTransition()
-    if (onClick) {
-      onClick(event)
-    }
-  }
 })
 
 export { PortalLink as Link }
@@ -69,6 +72,25 @@ export default function Anchor({
 
   const element = (isAbsoluteUrl ? 'a' : PortalLink) as Props['element']
 
+  const clickHandler = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (onClick) {
+        onClick(event)
+      }
+      try {
+        const element = scrollToHashHandler(event)?.element?.parentElement
+
+        if (element) {
+          element.classList.add('focus')
+          setTimeout(() => element.classList.remove('focus'), 3000)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    [onClick],
+  )
+
   return (
     <EufemiaAnchor
       href={href}
@@ -77,20 +99,4 @@ export default function Anchor({
       onClick={clickHandler}
     />
   )
-
-  function clickHandler(event: React.MouseEvent<HTMLAnchorElement>) {
-    if (onClick) {
-      onClick(event)
-    }
-    try {
-      const element = scrollToHashHandler(event)?.element?.parentElement
-
-      if (element) {
-        element.classList.add('focus')
-        setTimeout(() => element.classList.remove('focus'), 3000)
-      }
-    } catch (error) {
-      console.error(error)
-    }
-  }
 }

packages/dnb-eufemia/src/components/accordion/Accordion.tsx

@@ -147,7 +147,6 @@ export type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> &
      */
     icon_size?: IconSize
     attributes?: AccordionAttributes
-    class?: string
     className?: string
     children?: React.ReactNode
     /**
@@ -326,7 +325,6 @@ function Accordion({
             const {
               variant,
               className,
-              class: _className,
               prerender,
               prevent_rerender,
               prevent_rerender_conditional,
@@ -364,8 +362,7 @@ function Accordion({
                 variant && `dnb-accordion__variant--${variant}`,
                 prerender && 'dnb-accordion--prerender',
                 createSpacingClasses(extendedProps),
-                className,
-                _className
+                className
               ),
             } as HTMLProps<HTMLDivElement>
 

packages/dnb-eufemia/src/components/accordion/AccordionGroup.tsx

@@ -67,7 +67,6 @@ const AccordionGroup = (props: AccordionGroupProps) => {
     group, // eslint-disable-line
     onInit, // eslint-disable-line
     className,
-    class: _className,
 
     id: _id, // eslint-disable-line
     children, // eslint-disable-line
@@ -79,8 +78,7 @@ const AccordionGroup = (props: AccordionGroupProps) => {
     'dnb-accordion-group',
     isTrue(single_container) && 'dnb-accordion-group--single-container',
     createSpacingClasses(extendedProps),
-    className,
-    _className
+    className
   )
 
   const params = {

packages/dnb-eufemia/src/components/anchor/Anchor.tsx

@@ -183,23 +183,32 @@ export function scrollToHashHandler(
   // Only continue, when we are sure we are on the same page,
   // because, the same ID may exists occasionally on the current page.
   if (isSamePath) {
-    const id = href.split(/#/g).reverse()[0]
-    const anchorElem = document.getElementById(id)
-
-    if (anchorElem instanceof HTMLElement) {
-      try {
-        const scrollPadding = parseFloat(
-          window.getComputedStyle(document.documentElement)
-            .scrollPaddingTop
-        )
-        const top = getOffsetTop(anchorElem) - scrollPadding || 0
-
-        window.scroll({ top })
-
-        return { element: anchorElem }
-      } catch (error) {
-        console.error(error)
-      }
+    return scrollToHash(href)
+  }
+}
+
+export function scrollToHash(hash: string) {
+  if (typeof document === 'undefined' || !hash || !hash.includes('#')) {
+    return // stop here
+  }
+
+  // Only continue, when we are sure we are on the same page,
+  // because, the same ID may exists occasionally on the current page.
+  const id = hash.split(/#/g).reverse()[0]
+  const anchorElem = document.getElementById(id)
+
+  if (anchorElem instanceof HTMLElement) {
+    try {
+      const scrollPadding = parseFloat(
+        window.getComputedStyle(document.documentElement).scrollPaddingTop
+      )
+      const top = getOffsetTop(anchorElem) - scrollPadding || 0
+
+      window.scroll({ top })
+
+      return { element: anchorElem }
+    } catch (error) {
+      console.error(error)
     }
   }
 }

packages/dnb-eufemia/src/components/anchor/__tests__/AnchorScroll.test.tsx

@@ -5,7 +5,33 @@
 
 import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import Anchor, { scrollToHashHandler } from '../Anchor'
+import Anchor, { scrollToHash, scrollToHashHandler } from '../Anchor'
+
+describe('Anchor with scrollToHash', () => {
+  it('should call window.scroll', () => {
+    const onScroll = jest.fn()
+
+    jest.spyOn(window, 'scroll').mockImplementationOnce(onScroll)
+
+    render(
+      <>
+        <Anchor onClick={() => scrollToHash('/path#hash-id')}>text</Anchor>
+        <span id="hash-id" />
+      </>
+    )
+
+    fireEvent.click(document.querySelector('a'))
+
+    expect(onScroll).toHaveBeenCalledTimes(1)
+    expect(onScroll).toHaveBeenCalledWith({ top: 0 })
+  })
+
+  it('should support undefined', () => {
+    expect(() => {
+      scrollToHash(undefined)
+    }).not.toThrow()
+  })
+})
 
 describe('Anchor with scrollToHashHandler', () => {
   let location: Location

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

@@ -326,7 +326,6 @@ export default class Autocomplete extends React.PureComponent {
     observer_element: null,
     enable_body_lock: false,
 
-    class: null,
     className: null,
     children: null,
 
@@ -1756,7 +1755,6 @@ class AutocompleteInstance extends React.PureComponent {
       drawer_class,
       input_ref, // eslint-disable-line
       className,
-      class: _className,
       disabled,
       stretch,
       skeleton,
@@ -1819,7 +1817,6 @@ class AutocompleteInstance extends React.PureComponent {
         showStatus && 'dnb-autocomplete__form-status',
         'dnb-form-component',
         createSpacingClasses(props),
-        _className,
         className
       ),
     }

packages/dnb-eufemia/src/components/button/Button.d.ts

@@ -97,10 +97,6 @@ export type ButtonProps = {
    */
   globalStatus?: GlobalStatusConfigObject;
   id?: string;
-  /**
-   * Any extra modifying class.
-   */
-  class?: string;
   /**
    * If you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button.
    */

packages/dnb-eufemia/src/components/button/Button.js

@@ -105,7 +105,6 @@ export default class Button extends React.PureComponent {
     )
 
     const {
-      class: class_name,
       className,
       variant,
       size,
@@ -208,7 +207,6 @@ export default class Button extends React.PureComponent {
         this.context
       ),
       createSpacingClasses(props),
-      class_name,
       className,
       props.href || props.to ? '' : null, // dnb-anchor--no-underline dnb-anchor--no-hover
       Element === Anchor && 'dnb-anchor--no-style'
@@ -311,7 +309,6 @@ Button.propTypes = {
     message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   }),
   id: PropTypes.string,
-  class: PropTypes.string,
   href: PropTypes.string,
   target: PropTypes.string,
   rel: PropTypes.string,
@@ -360,7 +357,6 @@ Button.defaultProps = {
   rel: null,
   to: null,
   id: null,
-  class: null,
   custom_content: null,
   wrap: null,
   bounding: null,

packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts

@@ -231,7 +231,6 @@ export interface DatePickerProps
    * Use `right` to change the calendar alignment direction. Defaults to `left`.
    */
   align_picker?: DatePickerAlignPicker;
-  class?: string;
   className?: string;
   /**
    * Will be called right before every new calendar view gets rendered. See the example above.

packages/dnb-eufemia/src/components/date-picker/DatePicker.js

@@ -174,7 +174,6 @@ export default class DatePicker extends React.PureComponent {
     no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     direction: PropTypes.oneOf(['auto', 'top', 'bottom']),
     align_picker: PropTypes.oneOf(['auto', 'left', 'right']),
-    class: PropTypes.string,
     className: PropTypes.string,
 
     ...spacingPropTypes,
@@ -247,7 +246,6 @@ export default class DatePicker extends React.PureComponent {
     no_animation: false,
     direction: 'auto',
     align_picker: null,
-    class: null,
     className: null,
 
     on_days_render: null,
@@ -540,7 +538,6 @@ export default class DatePicker extends React.PureComponent {
       direction: _direction, // eslint-disable-line
       id: _id, // eslint-disable-line
       className,
-      class: _className,
       show_submit_button, // eslint-disable-line
       show_cancel_button, // eslint-disable-line
       show_reset_button, // eslint-disable-line
@@ -596,7 +593,6 @@ export default class DatePicker extends React.PureComponent {
         'dnb-form-component',
         size && `dnb-date-picker--${size}`,
         createSpacingClasses(props),
-        _className,
         className
       ),
     }