npm - @dnb/eufemia - Versions diffs - 10.22.0 → 10.24.0 - Mend

@dnb/eufemia 10.22.0 → 10.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1233) hide show

package/elements/code/style/themes/dnb-code-theme-sbanken.scss CHANGED Viewed

@@ -1,8 +1,10 @@
 .dnb-code {
-  font-family: var(--sb-font-family-default);
+  padding: calc(0.25em / 0.875);
+  font-size: 0.875em;
+  line-height: calc(var(--line-height-xx-small--em) / 0.875);
   background-color: var(--sb-color-blue-light-3);
-  border-radius: 0.5rem;
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 0 0.0625rem var(--sb-color-blue-light-2);
 }
 .dnb-pre {

package/es/components/accordion/Accordion.js CHANGED Viewed

@@ -139,7 +139,7 @@ function Accordion(_ref) {
     let expandedState = expanded;
     const extendedProps = extendPropsWithContext(props, accordionDefaultProps, context, nestedContext, {
       skeleton: globalContext === null || globalContext === void 0 ? void 0 : globalContext.skeleton
-    }, globalContext.Accordion, globalContext.translation.Accordion);
+    }, globalContext.Accordion, globalContext.translation['Accordion']);
     if (expandedState === undefined && globalContext.Accordion) {
       if (globalContext.Accordion.expanded) {
         expandedState = extendedProps.expanded;

package/es/components/accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","names":["React","useContext","useState","useEffect","useRef","classnames","makeUniqueId","findElementInChildren","extendPropsWithContext","validateDOMAttributes","dispatchCustomElementEvent","createSpacingClasses","AccordionGroup","AccordionHeader","AccordionContent","AccordionContext","AccordionProviderContext","Context","AccordionStore","Store","rememberWarning","accordionDefaultProps","Accordion","_ref","variant","icon_size","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","context","group","id","current","store","previousExpanded","setPreviousExpanded","expanded","setExpanded","getInitialExpandedState","undefined","thisInstance","_id","handleDisabledClick","callOnChange","callOnChangeHandler","close","setExpandedState","state","window","addInstance","onInit","_window","_window$__dnbAccordio","removeInstance","flush_remembered_state","flush","expanded_id","expanded_ssr","remember_state","storedExpanded","getState","changeOpened","saveState","e","preventDefault","params","onChange","_window2","_window2$__dnbAccordi","event","createElement","Consumer","globalContext","nestedContext","expandedState","extendedProps","skeleton","translation","className","class","_className","prerender","prevent_rerender","prevent_rerender_conditional","single_container","disabled","no_animation","_expanded_ssr","children","_group","title","description","left_component","icon","icon_position","on_change","on_state_update","contentRef","restOfExtendedProps","_excluded2","mainParams","onClick","extendedPropsForContext","accordionContext","Provider","value","cur","type","_AccordionHeader","defaultProps","Group","expandedId","setExpandedId","instanceIDs","storedData","getData","currentIDs","includes","fallbackId","instance","push","_extends","Header","Content","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["/*\n Web Accordion Component\n \n /\n\nimport React, {\n useContext,\n useState,\n useEffect,\n useRef,\n HTMLProps,\n} from 'react'\n\nimport classnames from 'classnames'\nimport {\n makeUniqueId,\n findElementInChildren,\n extendPropsWithContext,\n validateDOMAttributes,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nimport type { ButtonIconPosition } from '../Button'\nimport type { HeadingLevel } from '../Heading'\nimport type { IconIcon, IconSize } from '../Icon'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { SpacingProps } from '../space/types'\n\nimport AccordionGroup from './AccordionGroup'\nimport AccordionHeader from './AccordionHeader'\nimport AccordionContent from './AccordionContent'\nimport AccordionContext from './AccordionContext'\nimport AccordionProviderContext from './AccordionProviderContext'\nimport Context from '../../shared/Context'\n\nimport { AccordionStore, Store, rememberWarning } from './AccordionStore'\nimport { accordionDefaultProps } from './defaultProps'\n\nexport type AccordionVariant = 'plain' \| 'default' \| 'outlined' \| 'filled'\n\nexport type AccordionHeading = boolean \| React.ReactNode\n\nexport type AccordionIcon =\n \| IconIcon\n \| {\n closed?: React.ReactNode \| ((...args: any[]) => any)\n /*\n If set to `true` the accordion will be expanded as its initial state.\n /\n expanded?: React.ReactNode \| ((...args: any[]) => any)\n }\n\nexport type AccordionAttributes = string \| Record<string, unknown>\n\nexport type AccordionIconPosition = ButtonIconPosition\n\nexport type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> &\n SpacingProps & {\n /\n A title as a string or React element. It will be used as the button text.\n /\n title?: React.ReactNode\n description?: React.ReactNode\n /\n If set to `true` the accordion will be expanded as its initial state.\n /\n expanded?: boolean\n /\n If set to `true`, the open and close animation will be omitted.\n /\n no_animation?: boolean\n /\n If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that's mainly a technical aspect to consider.\n /\n expanded_ssr?: boolean\n /\n /\n prerender?: boolean\n /*\n If set to `true` the accordion component will not re-render its content – can be useful for widgets you don't have control of storing the temporary state during an interaction.\n /\n prevent_rerender?: boolean\n /\n Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore.\n /\n prevent_rerender_conditional?: boolean\n /\n If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.\n /\n remember_state?: boolean\n /\n Send along a custom React Ref for `.dnb-accordion__content`.\n /\n contentRef?: React.MutableRefObject<unknown>\n /\n If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.\n /\n flush_remembered_state?: boolean\n /\n If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.\n /\n single_container?: boolean\n /\n Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.\n /\n variant?: AccordionVariant\n /\n Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.\n /\n left_component?: React.ReactNode\n /\n If set to `true`, the accordion button will be disabled (dimmed).\n /\n disabled?: boolean\n /\n If set to `true`, an overlaying skeleton with animation will be shown.\n /\n skeleton?: SkeletonShow\n /\n A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.\n /\n id?: string\n group?: string\n /\n Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included.\n /\n element?: React.ReactNode\n /\n If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property.\n /\n heading?: AccordionHeading\n /\n If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.\n /\n heading_level?: HeadingLevel\n /\n Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.\n /\n icon?: AccordionIcon\n /\n Will set the placement of the icon. Defaults to `left`.\n /\n icon_position?: AccordionIconPosition\n /\n Define a different icon size. Defaults to `medium` (1.5rem).\n /\n icon_size?: IconSize\n attributes?: AccordionAttributes\n class?: string\n className?: string\n children?: React.ReactNode\n /\n Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`.\n */\n on_change?: (...args: any[]) => any\n on_state_update?: (...args: any[]) => any\n }\n\nfunction Accordion({\n variant = 'outlined',\n icon_size = 'medium',\n ...restOfProps\n}: AccordionProps) {\n const props = { variant, icon_size, ...restOfProps }\n\n const context = useContext(AccordionProviderContext)\n\n const group = props.group \|\| context?.group\n const id = useRef(props.id \|\| makeUniqueId()).current\n\n const store = new Store({ id: props.id, group })\n\n // States ordered last here to make sure that the getInitialExpandedState have access to the store\n const [previousExpanded, setPreviousExpanded] = useState(props.expanded)\n const [expanded, setExpanded] = useState<boolean>(\n getInitialExpandedState()\n )\n\n // replacement for getDerivedStateFromProps\n if (props.expanded !== previousExpanded) {\n setExpanded(props.expanded !== undefined ? props.expanded : false)\n setPreviousExpanded(props.expanded)\n }\n\n const thisInstance = {\n _id: id,\n context,\n handleDisabledClick,\n callOnChange,\n callOnChangeHandler,\n close,\n setExpandedState,\n state: { expanded, group },\n props,\n store,\n }\n\n // Constructor\n useEffect(() => {\n if (group && typeof window !== 'undefined') {\n window['__dnbAccordion'] = window['__dnbAccordion'] \|\| {}\n window['__dnbAccordion'][group] =\n window['__dnbAccordion'][group] \|\| new AccordionStore(group)\n\n window['__dnbAccordion'][group].addInstance(thisInstance)\n }\n\n if (context && typeof context?.onInit === 'function') {\n context.onInit(thisInstance)\n }\n\n return () => {\n if (group && typeof window !== 'undefined') {\n window?.['__dnbAccordion'][group]?.removeInstance(thisInstance)\n }\n }\n }, [])\n\n // componentDidUpdate\n useEffect(() => {\n if (context.flush_remembered_state) {\n store.flush()\n setExpanded(props.expanded)\n }\n\n if (context?.expanded_id && context.expanded_id === props.id) {\n setExpanded(true)\n }\n }, [context.flush_remembered_state, context.expanded_id])\n\n // Gets the initial expanded sate, to prevent the opening and closing of Accordion\n // That happens when if we put this logic in a useEffect that runs after the initial expanded state is set\n // Since useEffect runs after every render\n function getInitialExpandedState() {\n if (props.expanded_ssr \|\| context?.expanded_ssr) {\n return typeof window === 'undefined'\n }\n\n if (props.remember_state \|\| context.remember_state) {\n const storedExpanded = store.getState()\n\n if (props.expanded && storedExpanded === false) {\n return false\n }\n\n if (storedExpanded) {\n return true\n }\n }\n\n return props.expanded !== undefined\n ? props.expanded\n : context?.expanded !== undefined\n ? context.expanded\n : false\n }\n\n function setExpandedState(expanded: boolean) {\n setExpanded(expanded)\n }\n\n function close() {\n changeOpened(false)\n }\n\n function changeOpened(expanded: boolean) {\n setExpanded(expanded)\n\n // check if a event exists, because, then it's a user click\n if (props.remember_state \|\| context.remember_state) {\n store.saveState(expanded)\n }\n }\n\n function handleDisabledClick(e: React.MouseEvent<HTMLElement>) {\n e.preventDefault()\n return false\n }\n\n function callOnChangeHandler(...params: any[]) {\n callOnChange(...params)\n if (context?.onChange) {\n context?.onChange(...params)\n }\n if (group && typeof window !== 'undefined') {\n window?.['__dnbAccordion'][group]?.onChange(...params)\n }\n }\n\n function callOnChange(...params: any[]) {\n const { expanded, event } = params[0]\n\n changeOpened(expanded)\n\n dispatchCustomElementEvent(thisInstance, 'on_change', {\n expanded,\n event,\n })\n }\n\n return (\n <Context.Consumer>\n {(globalContext) => (\n <AccordionContext.Consumer>\n {(nestedContext) => {\n // use only the props from context, who are available here anyway\n let expandedState = expanded\n\n const extendedProps = extendPropsWithContext(\n props,\n accordionDefaultProps,\n context, // group context\n nestedContext as Record<string, unknown>, // internal context\n { skeleton: globalContext?.skeleton },\n globalContext.Accordion, // global context\n globalContext.translation.Accordion\n )\n\n if (expandedState === undefined && globalContext.Accordion) {\n if (globalContext.Accordion.expanded) {\n expandedState = extendedProps.expanded\n }\n }\n\n const {\n variant,\n className,\n class: _className,\n prerender,\n prevent_rerender,\n prevent_rerender_conditional,\n single_container,\n remember_state,\n disabled,\n skeleton,\n no_animation,\n expanded_ssr: _expanded_ssr, // eslint-disable-line\n children,\n\n id: _id, // eslint-disable-line\n group: _group, // eslint-disable-line\n // expanded: _expanded, // eslint-disable-line\n\n title, // eslint-disable-line\n description, // eslint-disable-line\n left_component, // eslint-disable-line\n icon, // eslint-disable-line\n icon_position, // eslint-disable-line\n icon_size, // eslint-disable-line\n on_change, // eslint-disable-line\n on_state_update, // eslint-disable-line\n\n contentRef, // eslint-disable-line\n\n ...restOfExtendedProps\n } = extendedProps\n\n const mainParams = {\n id,\n className: classnames(\n 'dnb-accordion',\n expandedState && 'dnb-accordion--expanded',\n variant && `dnb-accordion__variant--${variant}`,\n prerender && 'dnb-accordion--prerender',\n createSpacingClasses(extendedProps),\n className,\n _className\n ),\n } as HTMLProps<HTMLDivElement>\n\n if (disabled) {\n mainParams.onClick = handleDisabledClick\n }\n\n // to remove spacing props\n validateDOMAttributes(props, restOfExtendedProps)\n\n const extendedPropsForContext = extendPropsWithContext(\n props,\n accordionDefaultProps,\n { expanded, group },\n context\n )\n\n const accordionContext = {\n ...extendedPropsForContext,\n id,\n expanded: expandedState,\n prerender: prerender,\n prevent_rerender: prevent_rerender,\n prevent_rerender_conditional: prevent_rerender_conditional,\n single_container: single_container,\n remember_state: remember_state,\n disabled: disabled,\n skeleton: skeleton,\n no_animation: no_animation,\n callOnChange: callOnChangeHandler,\n }\n\n return (\n <AccordionContext.Provider value={accordionContext}>\n <div {...mainParams}>\n {findElementInChildren(\n children,\n (cur) => cur.type === AccordionHeader\n ) ? null : (\n <AccordionHeader />\n )}\n {findElementInChildren(\n children,\n (cur) => cur.type === AccordionContent\n ) ? (\n children\n ) : (\n <AccordionContent>{children}</AccordionContent>\n )}\n </div>\n </AccordionContext.Provider>\n )\n }}\n </AccordionContext.Consumer>\n )}\n </Context.Consumer>\n )\n}\n// TEMPORARY SOLUTION (defaultProps will be deprecated at one point). Needs to replacement with default prop parameters for example \"({expanded: null})\"\n// Only solved this way to prevent tests from failing, for when expanded is undefined instead of null\nAccordion.defaultProps = accordionDefaultProps\n\nexport type GroupProps = AccordionProps & {\n allow_close_all?: boolean\n expanded_id?: string\n}\n\nconst Group = (props: GroupProps) => {\n if (props.remember_state && !props.id) {\n rememberWarning('accordion group')\n }\n\n const [expandedId, setExpandedId] = useState<string \| null>(null)\n\n const instanceIDs = useRef<string[]>([])\n\n const group = props?.id\n ? props.id\n : !props.group\n ? '#' + makeUniqueId()\n : undefined\n\n const store = new Store({ group })\n\n // Set stored expanded_id on mount\n useEffect(() => {\n const storedData = store.getData()\n const currentIDs = instanceIDs?.current\n\n if (!storedData?.id) {\n return\n }\n\n if (currentIDs.includes(storedData?.id)) {\n return\n }\n\n // 1. get the fallback id\n const fallbackId = currentIDs[0]\n\n if (!fallbackId) {\n return\n }\n\n // 2. set the fallback ids\n setExpandedId(fallbackId)\n }, [])\n\n // Store and reset fallback id\n useEffect(() => {\n if (!expandedId) {\n return\n }\n\n // 3. save the fallback id\n store.saveState(true, expandedId)\n\n // 4. and reset the fallback id\n setExpandedId(null)\n }, [expandedId])\n\n function onInit(instance) {\n if (\n instance.props.id &&\n !instanceIDs.current.includes(instance.props.id)\n ) {\n instanceIDs.current.push(instance.props.id)\n }\n }\n\n return (\n <AccordionGroup\n onInit={onInit}\n {...props}\n group={group}\n expanded_id={expandedId \|\| props.expanded_id}\n />\n )\n}\n\nAccordion.Provider = AccordionGroup\nAccordion.Header = AccordionHeader\nAccordion.Content = AccordionContent\n\nAccordion.Group = Group\n\nGroup.Store = (group: string, id: string = null) => {\n return new Store({ group, id })\n}\n\nAccordion.Store = (id: string) => {\n return new Store({ id })\n}\n\nAccordion._supportsSpacingProps = true\n\nexport default Accordion\n"],"mappings":"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"}
1	+ {"version":3,"file":"Accordion.js","names":["React","useContext","useState","useEffect","useRef","classnames","makeUniqueId","findElementInChildren","extendPropsWithContext","validateDOMAttributes","dispatchCustomElementEvent","createSpacingClasses","AccordionGroup","AccordionHeader","AccordionContent","AccordionContext","AccordionProviderContext","Context","AccordionStore","Store","rememberWarning","accordionDefaultProps","Accordion","_ref","variant","icon_size","restOfProps","_objectWithoutProperties","_excluded","props","_objectSpread","context","group","id","current","store","previousExpanded","setPreviousExpanded","expanded","setExpanded","getInitialExpandedState","undefined","thisInstance","_id","handleDisabledClick","callOnChange","callOnChangeHandler","close","setExpandedState","state","window","addInstance","onInit","_window","_window$__dnbAccordio","removeInstance","flush_remembered_state","flush","expanded_id","expanded_ssr","remember_state","storedExpanded","getState","changeOpened","saveState","e","preventDefault","params","onChange","_window2","_window2$__dnbAccordi","event","createElement","Consumer","globalContext","nestedContext","expandedState","extendedProps","skeleton","translation","className","class","_className","prerender","prevent_rerender","prevent_rerender_conditional","single_container","disabled","no_animation","_expanded_ssr","children","_group","title","description","left_component","icon","icon_position","on_change","on_state_update","contentRef","restOfExtendedProps","_excluded2","mainParams","onClick","extendedPropsForContext","accordionContext","Provider","value","cur","type","_AccordionHeader","defaultProps","Group","expandedId","setExpandedId","instanceIDs","storedData","getData","currentIDs","includes","fallbackId","instance","push","_extends","Header","Content","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["/*\n Web Accordion Component\n \n /\n\nimport React, {\n useContext,\n useState,\n useEffect,\n useRef,\n HTMLProps,\n} from 'react'\n\nimport classnames from 'classnames'\nimport {\n makeUniqueId,\n findElementInChildren,\n extendPropsWithContext,\n validateDOMAttributes,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nimport type { ButtonIconPosition } from '../Button'\nimport type { HeadingLevel } from '../Heading'\nimport type { IconIcon, IconSize } from '../Icon'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { SpacingProps } from '../space/types'\n\nimport AccordionGroup from './AccordionGroup'\nimport AccordionHeader from './AccordionHeader'\nimport AccordionContent from './AccordionContent'\nimport AccordionContext from './AccordionContext'\nimport AccordionProviderContext from './AccordionProviderContext'\nimport Context from '../../shared/Context'\n\nimport { AccordionStore, Store, rememberWarning } from './AccordionStore'\nimport { accordionDefaultProps } from './defaultProps'\n\nexport type AccordionVariant = 'plain' \| 'default' \| 'outlined' \| 'filled'\n\nexport type AccordionHeading = boolean \| React.ReactNode\n\nexport type AccordionIcon =\n \| IconIcon\n \| {\n closed?: React.ReactNode \| ((...args: any[]) => any)\n /*\n If set to `true` the accordion will be expanded as its initial state.\n /\n expanded?: React.ReactNode \| ((...args: any[]) => any)\n }\n\nexport type AccordionAttributes = string \| Record<string, unknown>\n\nexport type AccordionIconPosition = ButtonIconPosition\n\nexport type AccordionProps = Omit<React.HTMLProps<HTMLElement>, 'ref'> &\n SpacingProps & {\n /\n A title as a string or React element. It will be used as the button text.\n /\n title?: React.ReactNode\n description?: React.ReactNode\n /\n If set to `true` the accordion will be expanded as its initial state.\n /\n expanded?: boolean\n /\n If set to `true`, the open and close animation will be omitted.\n /\n no_animation?: boolean\n /\n If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that's mainly a technical aspect to consider.\n /\n expanded_ssr?: boolean\n /\n /\n prerender?: boolean\n /*\n If set to `true` the accordion component will not re-render its content – can be useful for widgets you don't have control of storing the temporary state during an interaction.\n /\n prevent_rerender?: boolean\n /\n Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match the previous one anymore.\n /\n prevent_rerender_conditional?: boolean\n /\n If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage.\n /\n remember_state?: boolean\n /\n Send along a custom React Ref for `.dnb-accordion__content`.\n /\n contentRef?: React.MutableRefObject<unknown>\n /\n If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set.\n /\n flush_remembered_state?: boolean\n /\n If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens.\n /\n single_container?: boolean\n /\n Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`.\n /\n variant?: AccordionVariant\n /\n Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`.\n /\n left_component?: React.ReactNode\n /\n If set to `true`, the accordion button will be disabled (dimmed).\n /\n disabled?: boolean\n /\n If set to `true`, an overlaying skeleton with animation will be shown.\n /\n skeleton?: SkeletonShow\n /\n A unique `id` that will be used on the button element. If you use `remember_state`, an id is required.\n /\n id?: string\n group?: string\n /\n Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included.\n /\n element?: React.ReactNode\n /\n If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property.\n /\n heading?: AccordionHeading\n /\n If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`.\n /\n heading_level?: HeadingLevel\n /\n Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`.\n /\n icon?: AccordionIcon\n /\n Will set the placement of the icon. Defaults to `left`.\n /\n icon_position?: AccordionIconPosition\n /\n Define a different icon size. Defaults to `medium` (1.5rem).\n /\n icon_size?: IconSize\n attributes?: AccordionAttributes\n class?: string\n className?: string\n children?: React.ReactNode\n /\n Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`.\n */\n on_change?: (...args: any[]) => any\n on_state_update?: (...args: any[]) => any\n }\n\nfunction Accordion({\n variant = 'outlined',\n icon_size = 'medium',\n ...restOfProps\n}: AccordionProps) {\n const props = { variant, icon_size, ...restOfProps }\n\n const context = useContext(AccordionProviderContext)\n\n const group = props.group \|\| context?.group\n const id = useRef(props.id \|\| makeUniqueId()).current\n\n const store = new Store({ id: props.id, group })\n\n // States ordered last here to make sure that the getInitialExpandedState have access to the store\n const [previousExpanded, setPreviousExpanded] = useState(props.expanded)\n const [expanded, setExpanded] = useState<boolean>(\n getInitialExpandedState()\n )\n\n // replacement for getDerivedStateFromProps\n if (props.expanded !== previousExpanded) {\n setExpanded(props.expanded !== undefined ? props.expanded : false)\n setPreviousExpanded(props.expanded)\n }\n\n const thisInstance = {\n _id: id,\n context,\n handleDisabledClick,\n callOnChange,\n callOnChangeHandler,\n close,\n setExpandedState,\n state: { expanded, group },\n props,\n store,\n }\n\n // Constructor\n useEffect(() => {\n if (group && typeof window !== 'undefined') {\n window['__dnbAccordion'] = window['__dnbAccordion'] \|\| {}\n window['__dnbAccordion'][group] =\n window['__dnbAccordion'][group] \|\| new AccordionStore(group)\n\n window['__dnbAccordion'][group].addInstance(thisInstance)\n }\n\n if (context && typeof context?.onInit === 'function') {\n context.onInit(thisInstance)\n }\n\n return () => {\n if (group && typeof window !== 'undefined') {\n window?.['__dnbAccordion'][group]?.removeInstance(thisInstance)\n }\n }\n }, [])\n\n // componentDidUpdate\n useEffect(() => {\n if (context.flush_remembered_state) {\n store.flush()\n setExpanded(props.expanded)\n }\n\n if (context?.expanded_id && context.expanded_id === props.id) {\n setExpanded(true)\n }\n }, [context.flush_remembered_state, context.expanded_id])\n\n // Gets the initial expanded sate, to prevent the opening and closing of Accordion\n // That happens when if we put this logic in a useEffect that runs after the initial expanded state is set\n // Since useEffect runs after every render\n function getInitialExpandedState() {\n if (props.expanded_ssr \|\| context?.expanded_ssr) {\n return typeof window === 'undefined'\n }\n\n if (props.remember_state \|\| context.remember_state) {\n const storedExpanded = store.getState()\n\n if (props.expanded && storedExpanded === false) {\n return false\n }\n\n if (storedExpanded) {\n return true\n }\n }\n\n return props.expanded !== undefined\n ? props.expanded\n : context?.expanded !== undefined\n ? context.expanded\n : false\n }\n\n function setExpandedState(expanded: boolean) {\n setExpanded(expanded)\n }\n\n function close() {\n changeOpened(false)\n }\n\n function changeOpened(expanded: boolean) {\n setExpanded(expanded)\n\n // check if a event exists, because, then it's a user click\n if (props.remember_state \|\| context.remember_state) {\n store.saveState(expanded)\n }\n }\n\n function handleDisabledClick(e: React.MouseEvent<HTMLElement>) {\n e.preventDefault()\n return false\n }\n\n function callOnChangeHandler(...params: any[]) {\n callOnChange(...params)\n if (context?.onChange) {\n context?.onChange(...params)\n }\n if (group && typeof window !== 'undefined') {\n window?.['__dnbAccordion'][group]?.onChange(...params)\n }\n }\n\n function callOnChange(...params: any[]) {\n const { expanded, event } = params[0]\n\n changeOpened(expanded)\n\n dispatchCustomElementEvent(thisInstance, 'on_change', {\n expanded,\n event,\n })\n }\n\n return (\n <Context.Consumer>\n {(globalContext) => (\n <AccordionContext.Consumer>\n {(nestedContext) => {\n // use only the props from context, who are available here anyway\n let expandedState = expanded\n\n const extendedProps = extendPropsWithContext(\n props,\n accordionDefaultProps,\n context, // group context\n nestedContext as Record<string, unknown>, // internal context\n { skeleton: globalContext?.skeleton },\n globalContext.Accordion, // global context\n globalContext.translation['Accordion']\n )\n\n if (expandedState === undefined && globalContext.Accordion) {\n if (globalContext.Accordion.expanded) {\n expandedState = extendedProps.expanded\n }\n }\n\n const {\n variant,\n className,\n class: _className,\n prerender,\n prevent_rerender,\n prevent_rerender_conditional,\n single_container,\n remember_state,\n disabled,\n skeleton,\n no_animation,\n expanded_ssr: _expanded_ssr, // eslint-disable-line\n children,\n\n id: _id, // eslint-disable-line\n group: _group, // eslint-disable-line\n // expanded: _expanded, // eslint-disable-line\n\n title, // eslint-disable-line\n description, // eslint-disable-line\n left_component, // eslint-disable-line\n icon, // eslint-disable-line\n icon_position, // eslint-disable-line\n icon_size, // eslint-disable-line\n on_change, // eslint-disable-line\n on_state_update, // eslint-disable-line\n\n contentRef, // eslint-disable-line\n\n ...restOfExtendedProps\n } = extendedProps\n\n const mainParams = {\n id,\n className: classnames(\n 'dnb-accordion',\n expandedState && 'dnb-accordion--expanded',\n variant && `dnb-accordion__variant--${variant}`,\n prerender && 'dnb-accordion--prerender',\n createSpacingClasses(extendedProps),\n className,\n _className\n ),\n } as HTMLProps<HTMLDivElement>\n\n if (disabled) {\n mainParams.onClick = handleDisabledClick\n }\n\n // to remove spacing props\n validateDOMAttributes(props, restOfExtendedProps)\n\n const extendedPropsForContext = extendPropsWithContext(\n props,\n accordionDefaultProps,\n { expanded, group },\n context\n )\n\n const accordionContext = {\n ...extendedPropsForContext,\n id,\n expanded: expandedState,\n prerender: prerender,\n prevent_rerender: prevent_rerender,\n prevent_rerender_conditional: prevent_rerender_conditional,\n single_container: single_container,\n remember_state: remember_state,\n disabled: disabled,\n skeleton: skeleton,\n no_animation: no_animation,\n callOnChange: callOnChangeHandler,\n }\n\n return (\n <AccordionContext.Provider value={accordionContext}>\n <div {...mainParams}>\n {findElementInChildren(\n children,\n (cur) => cur.type === AccordionHeader\n ) ? null : (\n <AccordionHeader />\n )}\n {findElementInChildren(\n children,\n (cur) => cur.type === AccordionContent\n ) ? (\n children\n ) : (\n <AccordionContent>{children}</AccordionContent>\n )}\n </div>\n </AccordionContext.Provider>\n )\n }}\n </AccordionContext.Consumer>\n )}\n </Context.Consumer>\n )\n}\n// TEMPORARY SOLUTION (defaultProps will be deprecated at one point). Needs to replacement with default prop parameters for example \"({expanded: null})\"\n// Only solved this way to prevent tests from failing, for when expanded is undefined instead of null\nAccordion.defaultProps = accordionDefaultProps\n\nexport type GroupProps = AccordionProps & {\n allow_close_all?: boolean\n expanded_id?: string\n}\n\nconst Group = (props: GroupProps) => {\n if (props.remember_state && !props.id) {\n rememberWarning('accordion group')\n }\n\n const [expandedId, setExpandedId] = useState<string \| null>(null)\n\n const instanceIDs = useRef<string[]>([])\n\n const group = props?.id\n ? props.id\n : !props.group\n ? '#' + makeUniqueId()\n : undefined\n\n const store = new Store({ group })\n\n // Set stored expanded_id on mount\n useEffect(() => {\n const storedData = store.getData()\n const currentIDs = instanceIDs?.current\n\n if (!storedData?.id) {\n return\n }\n\n if (currentIDs.includes(storedData?.id)) {\n return\n }\n\n // 1. get the fallback id\n const fallbackId = currentIDs[0]\n\n if (!fallbackId) {\n return\n }\n\n // 2. set the fallback ids\n setExpandedId(fallbackId)\n }, [])\n\n // Store and reset fallback id\n useEffect(() => {\n if (!expandedId) {\n return\n }\n\n // 3. save the fallback id\n store.saveState(true, expandedId)\n\n // 4. and reset the fallback id\n setExpandedId(null)\n }, [expandedId])\n\n function onInit(instance) {\n if (\n instance.props.id &&\n !instanceIDs.current.includes(instance.props.id)\n ) {\n instanceIDs.current.push(instance.props.id)\n }\n }\n\n return (\n <AccordionGroup\n onInit={onInit}\n {...props}\n group={group}\n expanded_id={expandedId \|\| props.expanded_id}\n />\n )\n}\n\nAccordion.Provider = AccordionGroup\nAccordion.Header = AccordionHeader\nAccordion.Content = AccordionContent\n\nAccordion.Group = Group\n\nGroup.Store = (group: string, id: string = null) => {\n return new Store({ group, id })\n}\n\nAccordion.Store = (id: string) => {\n return new Store({ id })\n}\n\nAccordion._supportsSpacingProps = true\n\nexport default Accordion\n"],"mappings":"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"}

package/es/components/accordion/AccordionContext.d.ts CHANGED Viewed

@@ -14,5 +14,5 @@ export type AccordionContextProps = AccordionProps & SkeletonContextProps & {
         event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
     }) => void;
 };
-declare const AccordionContext: React.Context<AccordionContextProps>;
+declare const AccordionContext: React.Context<any>;
 export default AccordionContext;

package/es/components/accordion/AccordionGroup.js CHANGED Viewed

@@ -29,7 +29,7 @@ const AccordionGroup = props => {
       event
     });
   }
-  const extendedProps = extendPropsWithContext(props, accordionDefaultProps, context.Accordion, context.getTranslation(props).Accordion);
+  const extendedProps = extendPropsWithContext(props, accordionDefaultProps, context.Accordion, context.getTranslation(props)['Accordion']);
   const {
       expanded,
       expanded_id,

package/es/components/accordion/AccordionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionGroup.js","names":["React","useContext","classnames","isTrue","makeUniqueId","extendPropsWithContext","validateDOMAttributes","dispatchCustomElementEvent","createSpacingClasses","Context","AccordionGroupContext","accordionDefaultProps","AccordionGroup","props","context","id","thisInstance","_id","onChangeHandler","event","expanded","extendedProps","Accordion","getTranslation","expanded_id","prerender","prevent_rerender","single_container","contentRef","allow_close_all","remember_state","flush_remembered_state","disabled","group","onInit","className","class","_className","children","restOfExtendedProps","_objectWithoutProperties","_excluded","classes","params","_objectSpread","contextForProvider","onChange","createElement","Provider","value","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/AccordionGroup.tsx"],"sourcesContent":["/*\n Web AccordionGroup Component\n \n /\n\nimport React, { useContext } from 'react'\n\nimport classnames from 'classnames'\nimport {\n isTrue,\n makeUniqueId,\n extendPropsWithContext,\n validateDOMAttributes,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nimport Context from '../../shared/Context'\nimport AccordionGroupContext from './AccordionProviderContext'\n\nimport type { GroupProps } from './Accordion'\nimport { accordionDefaultProps } from './defaultProps'\n\nexport type AccordionGroupProps = React.HTMLProps<HTMLElement> &\n GroupProps & {\n onInit?: (...args: any[]) => any\n }\n\nconst AccordionGroup = (props: AccordionGroupProps) => {\n const context = useContext(Context)\n const id = props.id \|\| makeUniqueId()\n\n const thisInstance = {\n _id: id,\n props,\n context,\n onChangeHandler,\n }\n\n function onChangeHandler(event) {\n dispatchCustomElementEvent(thisInstance, 'on_change', {\n id: event.id,\n expanded: event.expanded,\n event,\n })\n }\n\n // use only the props from context, who are available here anyway\n const extendedProps = extendPropsWithContext(\n props,\n accordionDefaultProps,\n context.Accordion,\n context.getTranslation(props).Accordion\n )\n\n const {\n expanded, // eslint-disable-line\n expanded_id, // eslint-disable-line\n prerender, // eslint-disable-line\n prevent_rerender, // eslint-disable-line\n single_container, // eslint-disable-line\n contentRef, // eslint-disable-line\n allow_close_all, // eslint-disable-line\n remember_state, // eslint-disable-line\n flush_remembered_state, // eslint-disable-line\n disabled, // eslint-disable-line\n group, // eslint-disable-line\n onInit, // eslint-disable-line\n className,\n class: _className,\n\n id: _id, // eslint-disable-line\n children, // eslint-disable-line\n\n ...restOfExtendedProps\n } = extendedProps\n\n const classes = classnames(\n 'dnb-accordion-group',\n isTrue(single_container) && 'dnb-accordion-group--single-container',\n createSpacingClasses(extendedProps),\n className,\n _className\n )\n\n const params = {\n ...restOfExtendedProps,\n }\n\n // also used for code markup simulation\n validateDOMAttributes(props, params)\n\n if (!extendedProps?.group && isTrue(props.single_container)) {\n extendedProps.group = makeUniqueId()\n }\n\n const contextForProvider = {\n ...extendedProps,\n id,\n onChange: onChangeHandler,\n }\n\n return (\n <AccordionGroupContext.Provider value={contextForProvider}>\n <div className={classes}>\n <span\n id={id}\n className=\"dnb-accordion-group__shell\"\n role=\"group\"\n {...params}\n >\n <span className=\"dnb-accordion-group__children\">{children}</span>\n </span>\n </div>\n </AccordionGroupContext.Provider>\n )\n}\n\nAccordionGroup._supportsSpacingProps = true\n\nexport default AccordionGroup\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,MAAM,EACNC,YAAY,EACZC,sBAAsB,EACtBC,qBAAqB,EACrBC,0BAA0B,QACrB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,qBAAqB,MAAM,4BAA4B;AAG9D,SAASC,qBAAqB,QAAQ,gBAAgB;AAOtD,MAAMC,cAAc,GAAIC,KAA0B,IAAK;EACrD,MAAMC,OAAO,GAAGb,UAAU,CAACQ,OAAO,CAAC;EACnC,MAAMM,EAAE,GAAGF,KAAK,CAACE,EAAE,IAAIX,YAAY,CAAC,CAAC;EAErC,MAAMY,YAAY,GAAG;IACnBC,GAAG,EAAEF,EAAE;IACPF,KAAK;IACLC,OAAO;IACPI;EACF,CAAC;EAED,SAASA,eAAeA,CAACC,KAAK,EAAE;IAC9BZ,0BAA0B,CAACS,YAAY,EAAE,WAAW,EAAE;MACpDD,EAAE,EAAEI,KAAK,CAACJ,EAAE;MACZK,QAAQ,EAAED,KAAK,CAACC,QAAQ;MACxBD;IACF,CAAC,CAAC;EACJ;EAGA,MAAME,aAAa,GAAGhB,sBAAsB,CAC1CQ,KAAK,EACLF,qBAAqB,EACrBG,OAAO,CAACQ,SAAS,EACjBR,OAAO,CAACS,cAAc,CAACV,KAAK,CAAC,~~CAACS~~,~~SAChC~~,CAAC;EAED,MAAM;~~MACJF~~,QAAQ;MACRI,WAAW;MACXC,SAAS;MACTC,gBAAgB;MAChBC,gBAAgB;MAChBC,UAAU;MACVC,eAAe;MACfC,cAAc;MACdC,sBAAsB;MACtBC,QAAQ;MACRC,KAAK;MACLC,MAAM;MACNC,SAAS;MACTC,KAAK,EAAEC,UAAU;MAEjBtB,EAAE,EAAEE,GAAG;MACPqB;IAGF,CAAC,GAAGjB,aAAa;IADZkB,mBAAmB,GAAAC,wBAAA,CACpBnB,aAAa,EAAAoB,SAAA;EAEjB,MAAMC,OAAO,GAAGxC,UAAU,CACxB,qBAAqB,EAErBM,oBAAoB,CAACa,aAAa,CAAC,EACnCc,SAAS,EACTE,UAAU,EAHVlC,MAAM,CAACwB,gBAAgB,CAAC,IAAI,uCAI9B,CAAC;EAED,MAAMgB,MAAM,GAAAC,aAAA,KACPL,mBAAmB,CACvB;EAGDjC,qBAAqB,CAACO,KAAK,EAAE8B,MAAM,CAAC;EAEpC,IAAI,EAACtB,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEY,KAAK,KAAI9B,MAAM,CAACU,KAAK,CAACc,gBAAgB,CAAC,EAAE;IAC3DN,aAAa,CAACY,KAAK,GAAG7B,YAAY,CAAC,CAAC;EACtC;EAEA,MAAMyC,kBAAkB,GAAAD,aAAA,CAAAA,aAAA,KACnBvB,aAAa;IAChBN,EAAE;IACF+B,QAAQ,EAAE5B;EAAe,EAC1B;EAED,OACElB,KAAA,CAAA+C,aAAA,CAACrC,qBAAqB,CAACsC,QAAQ;IAACC,KAAK,EAAEJ;EAAmB,GACxD7C,KAAA,CAAA+C,aAAA;IAAKZ,SAAS,EAAEO;EAAQ,GACtB1C,KAAA,CAAA+C,aAAA,SAAAG,QAAA;IACEnC,EAAE,EAAEA,EAAG;IACPoB,SAAS,EAAC,4BAA4B;IACtCgB,IAAI,EAAC;EAAO,GACRR,MAAM,GAEV3C,KAAA,CAAA+C,aAAA;IAAMZ,SAAS,EAAC;EAA+B,GAAEG,QAAe,CAC5D,CACH,CACyB,CAAC;AAErC,CAAC;AAED1B,cAAc,CAACwC,qBAAqB,GAAG,IAAI;AAE3C,eAAexC,cAAc"}
1	+ {"version":3,"file":"AccordionGroup.js","names":["React","useContext","classnames","isTrue","makeUniqueId","extendPropsWithContext","validateDOMAttributes","dispatchCustomElementEvent","createSpacingClasses","Context","AccordionGroupContext","accordionDefaultProps","AccordionGroup","props","context","id","thisInstance","_id","onChangeHandler","event","expanded","extendedProps","Accordion","getTranslation","expanded_id","prerender","prevent_rerender","single_container","contentRef","allow_close_all","remember_state","flush_remembered_state","disabled","group","onInit","className","class","_className","children","restOfExtendedProps","_objectWithoutProperties","_excluded","classes","params","_objectSpread","contextForProvider","onChange","createElement","Provider","value","_extends","role","_supportsSpacingProps"],"sources":["../../../../src/components/accordion/AccordionGroup.tsx"],"sourcesContent":["/*\n Web AccordionGroup Component\n \n /\n\nimport React, { useContext } from 'react'\n\nimport classnames from 'classnames'\nimport {\n isTrue,\n makeUniqueId,\n extendPropsWithContext,\n validateDOMAttributes,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nimport Context from '../../shared/Context'\nimport AccordionGroupContext from './AccordionProviderContext'\n\nimport type { GroupProps } from './Accordion'\nimport { accordionDefaultProps } from './defaultProps'\n\nexport type AccordionGroupProps = React.HTMLProps<HTMLElement> &\n GroupProps & {\n onInit?: (...args: any[]) => any\n }\n\nconst AccordionGroup = (props: AccordionGroupProps) => {\n const context = useContext(Context)\n const id = props.id \|\| makeUniqueId()\n\n const thisInstance = {\n _id: id,\n props,\n context,\n onChangeHandler,\n }\n\n function onChangeHandler(event) {\n dispatchCustomElementEvent(thisInstance, 'on_change', {\n id: event.id,\n expanded: event.expanded,\n event,\n })\n }\n\n // use only the props from context, who are available here anyway\n const extendedProps = extendPropsWithContext(\n props,\n accordionDefaultProps,\n context.Accordion,\n context.getTranslation(props)['Accordion']\n )\n\n const {\n expanded, // eslint-disable-line\n expanded_id, // eslint-disable-line\n prerender, // eslint-disable-line\n prevent_rerender, // eslint-disable-line\n single_container, // eslint-disable-line\n contentRef, // eslint-disable-line\n allow_close_all, // eslint-disable-line\n remember_state, // eslint-disable-line\n flush_remembered_state, // eslint-disable-line\n disabled, // eslint-disable-line\n group, // eslint-disable-line\n onInit, // eslint-disable-line\n className,\n class: _className,\n\n id: _id, // eslint-disable-line\n children, // eslint-disable-line\n\n ...restOfExtendedProps\n } = extendedProps\n\n const classes = classnames(\n 'dnb-accordion-group',\n isTrue(single_container) && 'dnb-accordion-group--single-container',\n createSpacingClasses(extendedProps),\n className,\n _className\n )\n\n const params = {\n ...restOfExtendedProps,\n }\n\n // also used for code markup simulation\n validateDOMAttributes(props, params)\n\n if (!extendedProps?.group && isTrue(props.single_container)) {\n extendedProps.group = makeUniqueId()\n }\n\n const contextForProvider = {\n ...extendedProps,\n id,\n onChange: onChangeHandler,\n }\n\n return (\n <AccordionGroupContext.Provider value={contextForProvider}>\n <div className={classes}>\n <span\n id={id}\n className=\"dnb-accordion-group__shell\"\n role=\"group\"\n {...params}\n >\n <span className=\"dnb-accordion-group__children\">{children}</span>\n </span>\n </div>\n </AccordionGroupContext.Provider>\n )\n}\n\nAccordionGroup._supportsSpacingProps = true\n\nexport default AccordionGroup\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,MAAM,EACNC,YAAY,EACZC,sBAAsB,EACtBC,qBAAqB,EACrBC,0BAA0B,QACrB,+BAA+B;AACtC,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,qBAAqB,MAAM,4BAA4B;AAG9D,SAASC,qBAAqB,QAAQ,gBAAgB;AAOtD,MAAMC,cAAc,GAAIC,KAA0B,IAAK;EACrD,MAAMC,OAAO,GAAGb,UAAU,CAACQ,OAAO,CAAC;EACnC,MAAMM,EAAE,GAAGF,KAAK,CAACE,EAAE,IAAIX,YAAY,CAAC,CAAC;EAErC,MAAMY,YAAY,GAAG;IACnBC,GAAG,EAAEF,EAAE;IACPF,KAAK;IACLC,OAAO;IACPI;EACF,CAAC;EAED,SAASA,eAAeA,CAACC,KAAK,EAAE;IAC9BZ,0BAA0B,CAACS,YAAY,EAAE,WAAW,EAAE;MACpDD,EAAE,EAAEI,KAAK,CAACJ,EAAE;MACZK,QAAQ,EAAED,KAAK,CAACC,QAAQ;MACxBD;IACF,CAAC,CAAC;EACJ;EAGA,MAAME,aAAa,GAAGhB,sBAAsB,CAC1CQ,KAAK,EACLF,qBAAqB,EACrBG,OAAO,CAACQ,SAAS,EACjBR,OAAO,CAACS,cAAc,CAACV,KAAK,CAAC,CAAC,WAAW,CAC3C,CAAC;EAED,MAAM;MACJO,QAAQ;MACRI,WAAW;MACXC,SAAS;MACTC,gBAAgB;MAChBC,gBAAgB;MAChBC,UAAU;MACVC,eAAe;MACfC,cAAc;MACdC,sBAAsB;MACtBC,QAAQ;MACRC,KAAK;MACLC,MAAM;MACNC,SAAS;MACTC,KAAK,EAAEC,UAAU;MAEjBtB,EAAE,EAAEE,GAAG;MACPqB;IAGF,CAAC,GAAGjB,aAAa;IADZkB,mBAAmB,GAAAC,wBAAA,CACpBnB,aAAa,EAAAoB,SAAA;EAEjB,MAAMC,OAAO,GAAGxC,UAAU,CACxB,qBAAqB,EAErBM,oBAAoB,CAACa,aAAa,CAAC,EACnCc,SAAS,EACTE,UAAU,EAHVlC,MAAM,CAACwB,gBAAgB,CAAC,IAAI,uCAI9B,CAAC;EAED,MAAMgB,MAAM,GAAAC,aAAA,KACPL,mBAAmB,CACvB;EAGDjC,qBAAqB,CAACO,KAAK,EAAE8B,MAAM,CAAC;EAEpC,IAAI,EAACtB,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEY,KAAK,KAAI9B,MAAM,CAACU,KAAK,CAACc,gBAAgB,CAAC,EAAE;IAC3DN,aAAa,CAACY,KAAK,GAAG7B,YAAY,CAAC,CAAC;EACtC;EAEA,MAAMyC,kBAAkB,GAAAD,aAAA,CAAAA,aAAA,KACnBvB,aAAa;IAChBN,EAAE;IACF+B,QAAQ,EAAE5B;EAAe,EAC1B;EAED,OACElB,KAAA,CAAA+C,aAAA,CAACrC,qBAAqB,CAACsC,QAAQ;IAACC,KAAK,EAAEJ;EAAmB,GACxD7C,KAAA,CAAA+C,aAAA;IAAKZ,SAAS,EAAEO;EAAQ,GACtB1C,KAAA,CAAA+C,aAAA,SAAAG,QAAA;IACEnC,EAAE,EAAEA,EAAG;IACPoB,SAAS,EAAC,4BAA4B;IACtCgB,IAAI,EAAC;EAAO,GACRR,MAAM,GAEV3C,KAAA,CAAA+C,aAAA;IAAMZ,SAAS,EAAC;EAA+B,GAAEG,QAAe,CAC5D,CACH,CACyB,CAAC;AAErC,CAAC;AAED1B,cAAc,CAACwC,qBAAqB,GAAG,IAAI;AAE3C,eAAexC,cAAc"}

package/es/components/accordion/style/themes/dnb-accordion-theme-sbanken.css CHANGED Viewed

@@ -13,6 +13,10 @@
   --accordion-header-wrapper-margin--icon-right: calc(
     1.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
+  --sb-accordion-header-border-radius--hover: 0.125rem;
+  --sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
+    0;
   --accordion-header-icon-gutter: 0.5rem;
   --accordion-header-icon-margin: calc(
     1.5rem - var(--sb-accordion-frame-width)
@@ -23,6 +27,7 @@
   --sb-accordion-content-padding-left: calc(
     3.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
   color: var(--sb-color-text);
 }
 .dnb-accordion__header, .dnb-accordion__content {
@@ -51,6 +56,7 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled] {
 }
 html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   background-color: var(--sb-color-violet-light-2);
+  border-radius: var(--sb-accordion-header-border-radius--hover);
 }
 .dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled] {
   cursor: not-allowed;
@@ -87,6 +93,18 @@ html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
   --sb-accordion-frame-color: var(--sb-color-violet);
   --sb-accordion-frame-width--active: 0.125rem;
 }
+html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__header:hover:not([disabled]) {
+  border-radius: var(--sb-accordion-header-border-radius--hover-expanded);
+}
+.dnb-accordion--expanded > .dnb-accordion__header--expanded {
+  border-radius: var(--sb-accordion-header-border-radius--expanded);
+}
+.dnb-accordion--expanded > .dnb-accordion__content {
+  border-radius: var(--sb-accordion-content-border-radius);
+}
 .dnb-accordion--expanded > .dnb-accordion__header[disabled],
 .dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
   --sb-accordion-background: var(--sb-color-gray-light-2);

package/es/components/accordion/style/themes/dnb-accordion-theme-sbanken.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--sb-accordion-frame-width));--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-frame-color:transparent;--sb-accordion-frame-width:0.1875rem;--sb-accordion-frame-width--active:0rem;--sb-accordion-content-padding-left:calc(3.5rem - var(--sb-accordion-frame-width));color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--sb-accordion-background,transparent);border-left:var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--sb-accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--sb-accordion-content-padding-left:calc(1.5rem - var(--sb-accordion-frame-width))}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion__content__inner{margin-top:0;padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion--expanded{--sb-accordion-background:var(--sb-color-violet-light-4);--sb-accordion-frame-color:var(--sb-color-violet);--sb-accordion-frame-width--active:0.125rem}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--sb-accordion-background:var(--sb-color-gray-light-2);--sb-accordion-frame-color:var(--sb-color-gray-dark-2)}
1	+ .dnb-accordion{--accordion-border-width:0;--accordion-border-radius:0;--accordion-header-margin-vertical:1rem;--accordion-header-margin-vertical--description:0.5rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-header-border-radius--expanded:0.125rem 0.125rem 0 0;--sb-accordion-header-border-radius--hover:0.125rem;--sb-accordion-header-border-radius--hover-expanded:0.125rem 0.125rem 0 0;--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--sb-accordion-frame-width));--sb-accordion-frame-color:transparent;--sb-accordion-frame-width:0.1875rem;--sb-accordion-frame-width--active:0rem;--sb-accordion-content-padding-left:calc(3.5rem - var(--sb-accordion-frame-width));--sb-accordion-content-border-radius:0 0 0.125rem 0.125rem;color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--sb-accordion-background,transparent);border-left:var(--sb-accordion-frame-width) solid var(--sb-accordion-frame-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.125rem;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--border-color);outline:none;z-index:1}html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) .dnb-accordion__header__icon{color:var(--border-color)}html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]){background-color:var(--sb-color-violet-light-2);border-radius:var(--sb-accordion-header-border-radius--hover)}.dnb-accordion__header:active[disabled],html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled]{cursor:not-allowed}.dnb-accordion__header:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]){--border-color: ;--border-width:0.0625rem;--border-color:var(--sb-color-violet);background-color:var(--sb-color-white);border-left-width:var(--sb-accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--sb-accordion-frame-width) - var(--sb-accordion-frame-width--active))}.dnb-accordion__header__container,.dnb-accordion__header__icon{color:var(--sb-color-violet)}.dnb-accordion__header--icon-right{--accordion-header-icon-margin:1.5rem}.dnb-accordion__header--icon-right+.dnb-accordion__content{--sb-accordion-content-padding-left:calc(1.5rem - var(--sb-accordion-frame-width))}.dnb-accordion__header[disabled] *{color:var(--sb-color-gray-dark-2)}.dnb-accordion__content__inner{margin-top:0;padding:0 1rem 1rem var(--sb-accordion-content-padding-left)}.dnb-accordion--expanded{--sb-accordion-background:var(--sb-color-violet-light-4);--sb-accordion-frame-color:var(--sb-color-violet);--sb-accordion-frame-width--active:0.125rem}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-accordion--expanded>.dnb-accordion__header:hover:not([disabled]){border-radius:var(--sb-accordion-header-border-radius--hover-expanded)}.dnb-accordion--expanded>.dnb-accordion__header--expanded{border-radius:var(--sb-accordion-header-border-radius--expanded)}.dnb-accordion--expanded>.dnb-accordion__content{border-radius:var(--sb-accordion-content-border-radius)}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--sb-accordion-background:var(--sb-color-gray-light-2);--sb-accordion-frame-color:var(--sb-color-gray-dark-2)}

package/es/components/accordion/style/themes/dnb-accordion-theme-sbanken.scss CHANGED Viewed

@@ -17,6 +17,10 @@
   --accordion-header-wrapper-margin--icon-right: calc(
     1.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-header-border-radius--expanded: 0.125rem 0.125rem 0 0;
+  --sb-accordion-header-border-radius--hover: 0.125rem;
+  --sb-accordion-header-border-radius--hover-expanded: 0.125rem 0.125rem 0
+    0;
   // icon
   --accordion-header-icon-gutter: 0.5rem;
@@ -33,6 +37,7 @@
   --sb-accordion-content-padding-left: calc(
     3.5rem - var(--sb-accordion-frame-width)
   );
+  --sb-accordion-content-border-radius: 0 0 0.125rem 0.125rem;
   color: var(--sb-color-text);
@@ -57,6 +62,7 @@
     }
     @include hover() {
       background-color: var(--sb-color-violet-light-2);
+      border-radius: var(--sb-accordion-header-border-radius--hover);
     }
     @include active() {
@@ -103,6 +109,20 @@
     --sb-accordion-background: var(--sb-color-violet-light-4);
     --sb-accordion-frame-color: var(--sb-color-violet);
     --sb-accordion-frame-width--active: 0.125rem;
+    > .dnb-accordion__header {
+      @include hover() {
+        border-radius: var(
+          --sb-accordion-header-border-radius--hover-expanded
+        );
+      }
+      &--expanded {
+        border-radius: var(--sb-accordion-header-border-radius--expanded);
+      }
+    }
+    > .dnb-accordion__content {
+      border-radius: var(--sb-accordion-content-border-radius);
+    }
     // disabled
     > .dnb-accordion__header[disabled],

package/es/components/anchor/Anchor.d.ts CHANGED Viewed

@@ -3,12 +3,11 @@
  *
  */
 import React from 'react';
-import { ElementIsType } from '../../elements/Element';
 import type { IconIcon } from '../icon/Icon';
 import type { SkeletonShow } from '../skeleton/Skeleton';
-import type { SpacingProps } from '../../shared/types';
+import type { DynamicElement, SpacingProps } from '../../shared/types';
 export type AnchorProps = {
-    element?: ElementIsType;
+    element?: DynamicElement<HTMLAnchorElement | AnchorAllProps>;
     href?: string;
     to?: string;
     targetBlankTitle?: string;
@@ -32,7 +31,7 @@ export default Anchor;
 export declare function scrollToHashHandler(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): {
     element: HTMLElement;
 };
-export declare function pickIcon(icon: any): React.DetailedReactHTMLElement<{
+export declare function pickIcon(icon: any, className?: string): React.DetailedReactHTMLElement<{
     key: string;
     className: string;
 }, HTMLElement>;

package/es/components/anchor/Anchor.js CHANGED Viewed

@@ -7,7 +7,6 @@ const _excluded = ["id", "element", "className", "children", "tooltip", "icon",
 import React from 'react';
 import classnames from 'classnames';
 import E from '../../elements/Element';
-import { useTheme } from '../../shared';
 import Context from '../../shared/Context';
 import { makeUniqueId, extendPropsWithContext } from '../../shared/component-helper';
 import { getOffsetTop } from '../../shared/helpers';
@@ -40,32 +39,19 @@ export function AnchorInstance(localProps) {
       targetBlankTitle
     } = allProps,
     rest = _objectWithoutProperties(allProps, _excluded);
-  const theme = useTheme();
-  const iconSpacer = theme !== null && theme !== void 0 && theme.isSbanken ? ' ' : '';
   const attributes = rest;
   const internalId = id || 'id' + makeUniqueId();
   const as = element || 'a';
-  let prefix;
-  let suffix;
   const href = allProps.href || allProps.to;
-  const showLaunchIcon = opensNewTab(allProps.target, href);
-  const showTooltip = (tooltip || showLaunchIcon) && !allProps.title;
-  if (showLaunchIcon && !omitClass) {
-    suffix = React.createElement(React.Fragment, null, iconSpacer, _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
-      className: "dnb-anchor__launch-icon",
-      icon: launchIcon
-    })));
-  }
-  if (icon) {
-    const iconNode = pickIcon(icon) || React.createElement(IconPrimary, {
-      icon: icon
-    });
-    if (iconPosition === 'left') {
-      prefix = React.createElement(React.Fragment, null, iconNode, iconSpacer);
-    } else if (iconPosition === 'right') {
-      suffix = React.createElement(React.Fragment, null, iconSpacer, iconNode);
-    }
-  }
+  const _opensNewTab = opensNewTab(allProps.target, href);
+  const showLaunchIcon = _opensNewTab && !(className !== null && className !== void 0 && className.includes('dnb-anchor--no-icon')) && !omitClass;
+  const showTooltip = (tooltip || _opensNewTab) && !allProps.title;
+  const iconNode = icon && getIcon(icon);
+  const suffix = iconPosition === 'right' && iconNode || showLaunchIcon && (_IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
+    className: "dnb-anchor__launch-icon",
+    icon: launchIcon
+  })));
+  const prefix = iconPosition === 'left' && iconNode;
   return React.createElement(React.Fragment, null, React.createElement(E, _extends({
     as: as,
     id: id,
@@ -113,11 +99,16 @@ export function scrollToHashHandler(event) {
     }
   }
 }
-export function pickIcon(icon) {
+function getIcon(icon) {
+  return pickIcon(icon) || React.createElement(IconPrimary, {
+    icon: icon
+  });
+}
+export function pickIcon(icon, className) {
   var _icon$props, _icon$props2, _icon$props2$classNam, _icon$props3;
   return icon !== null && icon !== void 0 && (_icon$props = icon.props) !== null && _icon$props !== void 0 && _icon$props.icon || icon !== null && icon !== void 0 && (_icon$props2 = icon.props) !== null && _icon$props2 !== void 0 && (_icon$props2$classNam = _icon$props2.className) !== null && _icon$props2$classNam !== void 0 && _icon$props2$classNam.includes('dnb-icon') ? React.cloneElement(icon, {
     key: 'button-icon-clone',
-    className: classnames((_icon$props3 = icon.props) === null || _icon$props3 === void 0 ? void 0 : _icon$props3.className, 'dnb-button__icon')
+    className: classnames((_icon$props3 = icon.props) === null || _icon$props3 === void 0 ? void 0 : _icon$props3.className, className)
   }) : null;
 }
 export const opensNewTab = (target, href) => target === '_blank' && !/^(mailto|tel|sms)/.test(href);

package/es/components/anchor/Anchor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Anchor.js","names":["React","classnames","E","useTheme","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","launch","launchIcon","defaultProps","AnchorInstance","localProps","context","useContext","allProps","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","_objectWithoutProperties","_excluded","theme","iconSpacer","isSbanken","attributes","internalId","as","prefix","suffix","href","to","showLaunchIcon","opensNewTab","target","showTooltip","title","createElement","Fragment","_IconPrimary","iconNode","pickIcon","_extends","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","includes","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll","error","console","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","key","test"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps, ElementIsType } from '../../elements/Element'\nimport { useTheme } from '../../shared'\nimport Context from '../../shared/Context'\nimport {\n makeUniqueId,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n element?: ElementIsType\n href?: string\n to?: string\n targetBlankTitle?: string\n target?: string\n tooltip?: React.ReactNode\n icon?: IconIcon\n iconPosition?: 'left' \| 'right'\n skeleton?: SkeletonShow\n omitClass?: boolean\n innerRef?: React.RefObject<HTMLAnchorElement>\n\n /** @deprecated use innerRef instead /\n inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n const context = React.useContext(Context)\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n { skeleton: context?.skeleton },\n context?.getTranslation(localProps as AnchorAllProps).Anchor,\n context?.Anchor\n )\n\n // deprecated: inner_ref is still needed to support Button's usage of Anchor\n if (typeof allProps.inner_ref !== 'undefined') {\n allProps.innerRef = allProps.inner_ref\n delete allProps.inner_ref\n }\n\n if (!allProps.innerRef) {\n allProps.innerRef = React.createRef()\n }\n\n const {\n id,\n element,\n className,\n children,\n tooltip,\n icon,\n iconPosition = 'left',\n omitClass,\n innerRef,\n targetBlankTitle,\n ...rest\n } = allProps\n\n const theme = useTheme()\n const iconSpacer = theme?.isSbanken ? ' ' : ''\n const attributes = rest as ElementProps\n const internalId = id \|\| 'id' + makeUniqueId()\n const as = (element \|\| 'a') as string\n\n let prefix: React.ReactNode\n let suffix: React.ReactNode\n\n const href = allProps.href \|\| allProps.to\n const showLaunchIcon = opensNewTab(allProps.target, href)\n const showTooltip = (tooltip \|\| showLaunchIcon) && !allProps.title\n\n // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html\n if (showLaunchIcon && !omitClass) {\n suffix = (\n <>\n {iconSpacer}\n <IconPrimary\n className=\"dnb-anchor__launch-icon\"\n icon={launchIcon}\n />\n </>\n )\n }\n\n if (icon) {\n const iconNode = pickIcon(icon) \|\| <IconPrimary icon={icon} />\n if (iconPosition === 'left') {\n prefix = (\n <>\n {iconNode}\n {iconSpacer}\n </>\n )\n } else if (iconPosition === 'right') {\n suffix = (\n <>\n {iconSpacer}\n {iconNode}\n </>\n )\n }\n }\n\n return (\n <>\n <E\n as={as}\n id={id}\n className={classnames(\n omitClass !== true &&\n classnames(\n 'dnb-anchor',\n prefix && 'dnb-anchor--icon-left',\n suffix && 'dnb-anchor--icon-right',\n typeof children !== 'string' && 'dnb-anchor--was-node'\n ),\n className\n )}\n {...attributes}\n innerRef={innerRef}\n >\n {prefix}\n {children}\n {suffix}\n </E>\n\n {showTooltip && (\n <Tooltip\n showDelay={100}\n id={internalId + '-tooltip'}\n targetElement={innerRef}\n tooltip={tooltip}\n >\n {allProps.title \|\| targetBlankTitle}\n </Tooltip>\n )}\n </>\n )\n}\n\nconst Anchor = React.forwardRef(\n (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n return <AnchorInstance innerRef={ref} {...props} />\n }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n const element = event.currentTarget as HTMLAnchorElement\n const href = element.getAttribute('href')\n\n if (typeof document === 'undefined' \|\| !href.includes('#')) {\n return // stop here\n }\n\n /\n What happens here?\n * When `scroll-behavior: smooth;` in CSS is set,\n * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n * The first click, sets the hash, the second one, scrolls to it.\n * We want Chromium browsers to scroll to the element on the first click.\n */\n const isSamePath =\n href.startsWith('#') \|\|\n window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n // Only continue, when we are sure we are on the same page,\n // because, the same ID may exists occasionally on the current page.\n if (isSamePath) {\n const id = href.split(/#/g).reverse()[0]\n const anchorElem = document.getElementById(id)\n\n if (anchorElem instanceof HTMLElement) {\n try {\n const scrollPadding = parseFloat(\n window.getComputedStyle(document.documentElement)\n .scrollPaddingTop\n )\n const top = getOffsetTop(anchorElem) - scrollPadding \|\| 0\n\n window.scroll({ top })\n\n return { element: anchorElem }\n } catch (error) {\n console.error(error)\n }\n }\n }\n}\n\nexport function pickIcon(icon) {\n return icon?.props?.icon \|\| icon?.props?.className?.includes('dnb-icon')\n ? React.cloneElement(icon, {\n key: 'button-icon-clone',\n className: classnames(icon.props?.className, 'dnb-button__icon'),\n })\n : null\n}\n\nexport const opensNewTab = (target: string, href: string): boolean =>\n target === '_blank' && !/^(mailto\|tel\|sms)/.test(href)\n"],"mappings":"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"}
1	+ {"version":3,"file":"Anchor.js","names":["React","classnames","E","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","launch","launchIcon","defaultProps","AnchorInstance","localProps","context","useContext","allProps","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","_objectWithoutProperties","_excluded","attributes","internalId","as","href","to","_opensNewTab","opensNewTab","target","showLaunchIcon","includes","showTooltip","title","iconNode","getIcon","suffix","_IconPrimary","createElement","prefix","Fragment","_extends","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll","error","console","pickIcon","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","key","test"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/*\n HTML Element\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../../elements/Element'\nimport Context from '../../shared/Context'\nimport {\n makeUniqueId,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n element?: DynamicElement<HTMLAnchorElement \| AnchorAllProps>\n href?: string\n to?: string\n targetBlankTitle?: string\n target?: string\n tooltip?: React.ReactNode\n icon?: IconIcon\n iconPosition?: 'left' \| 'right'\n skeleton?: SkeletonShow\n omitClass?: boolean\n innerRef?: React.RefObject<HTMLAnchorElement>\n\n /** @deprecated use innerRef instead /\n inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n const context = React.useContext(Context)\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n { skeleton: context?.skeleton },\n context?.getTranslation(localProps as AnchorAllProps).Anchor,\n context?.Anchor\n )\n\n // deprecated: inner_ref is still needed to support Button's usage of Anchor\n if (typeof allProps.inner_ref !== 'undefined') {\n allProps.innerRef = allProps.inner_ref\n delete allProps.inner_ref\n }\n\n if (!allProps.innerRef) {\n allProps.innerRef = React.createRef()\n }\n\n const {\n id,\n element,\n className,\n children,\n tooltip,\n icon,\n iconPosition = 'left',\n omitClass,\n innerRef,\n targetBlankTitle,\n ...rest\n } = allProps\n\n const attributes = rest as ElementProps\n const internalId = id \|\| 'id' + makeUniqueId()\n const as = element \|\| 'a'\n\n const href = allProps.href \|\| allProps.to\n const _opensNewTab = opensNewTab(allProps.target, href)\n const showLaunchIcon =\n _opensNewTab &&\n !className?.includes('dnb-anchor--no-icon') &&\n !omitClass\n const showTooltip = (tooltip \|\| _opensNewTab) && !allProps.title\n\n const iconNode = icon && getIcon(icon)\n\n const suffix =\n (iconPosition === 'right' && iconNode) \|\|\n (showLaunchIcon && (\n <IconPrimary className=\"dnb-anchor__launch-icon\" icon={launchIcon} />\n ))\n\n const prefix = iconPosition === 'left' && iconNode\n\n return (\n <>\n <E\n as={as}\n id={id}\n className={classnames(\n omitClass !== true &&\n classnames(\n 'dnb-anchor',\n prefix && 'dnb-anchor--icon-left',\n suffix && 'dnb-anchor--icon-right',\n typeof children !== 'string' && 'dnb-anchor--was-node'\n ),\n className\n )}\n {...attributes}\n innerRef={innerRef}\n >\n {prefix}\n {children}\n {suffix}\n </E>\n\n {showTooltip && (\n <Tooltip\n showDelay={100}\n id={internalId + '-tooltip'}\n targetElement={innerRef}\n tooltip={tooltip}\n >\n {allProps.title \|\| targetBlankTitle}\n </Tooltip>\n )}\n </>\n )\n}\n\nconst Anchor = React.forwardRef(\n (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n return <AnchorInstance innerRef={ref} {...props} />\n }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n const element = event.currentTarget as HTMLAnchorElement\n const href = element.getAttribute('href')\n\n if (typeof document === 'undefined' \|\| !href.includes('#')) {\n return // stop here\n }\n\n /\n What happens here?\n * When `scroll-behavior: smooth;` in CSS is set,\n * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n * The first click, sets the hash, the second one, scrolls to it.\n * We want Chromium browsers to scroll to the element on the first click.\n */\n const isSamePath =\n href.startsWith('#') \|\|\n window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n // Only continue, when we are sure we are on the same page,\n // because, the same ID may exists occasionally on the current page.\n if (isSamePath) {\n const id = href.split(/#/g).reverse()[0]\n const anchorElem = document.getElementById(id)\n\n if (anchorElem instanceof HTMLElement) {\n try {\n const scrollPadding = parseFloat(\n window.getComputedStyle(document.documentElement)\n .scrollPaddingTop\n )\n const top = getOffsetTop(anchorElem) - scrollPadding \|\| 0\n\n window.scroll({ top })\n\n return { element: anchorElem }\n } catch (error) {\n console.error(error)\n }\n }\n }\n}\n\nfunction getIcon(icon) {\n return pickIcon(icon) \|\| <IconPrimary icon={icon} />\n}\n\nexport function pickIcon(icon, className?: string) {\n return icon?.props?.icon \|\| icon?.props?.className?.includes('dnb-icon')\n ? React.cloneElement(icon, {\n key: 'button-icon-clone',\n className: classnames(icon.props?.className, className),\n })\n : null\n}\n\nexport const opensNewTab = (target: string, href: string): boolean =>\n target === '_blank' && !/^(mailto\|tel\|sms)/.test(href)\n"],"mappings":"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"}

package/es/components/anchor/style/anchor-mixins.scss CHANGED Viewed

@@ -82,16 +82,11 @@
   @content;
 }
-@mixin anchorBackground($color, $overflow: 0.125em) {
-  @if $overflow {
-    --anchor-background-gutter: #{$overflow};
-    box-shadow:
-      inset 100vw 100vw 0 0 $color,
-      calc(var(--anchor-background-gutter) * -1) 0 0 0 $color,
-      var(--anchor-background-gutter) 0 0 0 $color;
-  } @else {
-    box-shadow: inset 100vw 100vw 0 0 $color;
-  }
+@mixin anchorBackground($color) {
+  box-shadow:
+    inset 100vw 100vw 0 0 $color,
+    calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 $color,
+    var(--anchor-background-gutter-right, 0.125rem) 0 0 0 $color;
 }
 // other styles
@@ -120,6 +115,10 @@
 }
 @mixin anchorStyle() {
+  --anchor-icon-gutter: 0.25em;
+  // word-joiner character (zero-width non-breaking space) connects icon with word
+  --anchor-icon-seperator: '\2060';
+  --anchor-icon-fallback-position: translateY(-0.125em);
   @include anchorDefaultStyle();
   // have focus before :active, because of border-radius
@@ -148,15 +147,54 @@
   // other stuff, not related to the Anchor directly
   .dnb-icon {
-    display: inline-block;
+    display: inline;
+    vertical-align: baseline;
+    white-space: nowrap; // force icon to line break with word
+    font-size: inherit;
-    // -1px to center the icons against large chars
-    transform: translateY(-0.0625em);
+    svg {
+      vertical-align: middle;
+      transform: var(--anchor-icon-fallback-position);
+    }
+  }
+  @supports (height: 1lh) {
+    .dnb-icon {
+      vertical-align: top;
+      line-height: 1lh;
+      svg {
+        vertical-align: top;
+        transform: translateY(calc(0.5lh - 0.5em));
+      }
+    }
   }
   &--no-icon .dnb-icon {
     display: none;
   }
+  &--icon-left .dnb-icon:first-child {
+    &::after {
+      content: var(--anchor-icon-seperator);
+    }
+    svg {
+      margin-right: var(--anchor-icon-gutter);
+    }
+  }
+  &--icon-right .dnb-icon:last-child {
+    &::before {
+      content: var(--anchor-icon-seperator);
+    }
+    svg {
+      margin-left: var(--anchor-icon-gutter);
+    }
+  }
+  .dnb-icon--default {
+    font-size: calc(16em / 18);
+  }
 }
 @mixin anchorTag() {
@@ -187,6 +225,17 @@
   }
 }
+@mixin notInline() {
+  &:where(:not(.dnb-anchor--inline)) {
+    @content;
+  }
+  &:not(.dnb-anchor--inline) {
+    @include whereFallback() {
+      @content;
+    }
+  }
+}
 @mixin whereFallback() {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
   @supports not (selector(*:where(*))) {