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

@dnb/eufemia 10.22.0 → 10.23.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 (1077) hide show

package/cjs/components/anchor/style/themes/dnb-anchor-theme-ui.css CHANGED Viewed

@@ -19,8 +19,7 @@
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -28,14 +27,12 @@
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   --anchor-color: var(--color-sea-green);
@@ -67,8 +64,7 @@
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -76,14 +72,12 @@
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
       --anchor-color: var(--color-sea-green);
-      --anchor-background-gutter: 0.125em;
-      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
     }
   }
   :not(.dnb-anchor--no-style).dnb-anchor:active {
     --anchor-color: var(--anchor-color--active);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     --anchor-color: var(--color-sea-green);
@@ -104,14 +98,12 @@
 .dnb-anchor--hover {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 .dnb-anchor--active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 .dnb-anchor--focus {

package/cjs/components/anchor/style/themes/dnb-anchor-theme-ui.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- :where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(:where())){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}@supports not (selector(:where())){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(:where())){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active)~~;--anchor-background-gutter:0.125em~~;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}
1	+ :where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}@supports not (selector(:where())){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}@supports not (selector(:where())){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}@supports not (selector(:where())){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}

package/cjs/components/aria-live/useAriaLive.d.ts CHANGED Viewed

@@ -67,7 +67,7 @@ export default function useAriaLive(props: AriaLiveAllProps): {
     'aria-description'?: string;
     'aria-details'?: string;
     'aria-disabled'?: boolean | "true" | "false";
-    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup";
+    'aria-dropeffect'?: "copy" | "link" | "none" | "execute" | "move" | "popup";
     'aria-errormessage'?: string;
     'aria-expanded'?: boolean | "true" | "false";
     'aria-flowto'?: string;

package/cjs/components/breadcrumb/Breadcrumb.js CHANGED Viewed

@@ -68,26 +68,37 @@ const Breadcrumb = localProps => {
     props = _objectWithoutProperties(allProps, _excluded);
   const skeletonClasses = (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context);
   const spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
-  const [isCollapsed, setCollapse] = (0, _react.useState)(overrideIsCollapsed);
+  const [, forceUpdate] = (0, _react.useReducer)(() => ({}), {});
+  const isCollapsedRef = (0, _react.useRef)(overrideIsCollapsed);
   const {
     isLarge
   } = (0, _shared.useMedia)();
-  let currentVariant = variant;
-  if (!variant) {
-    if (items || data) {
-      currentVariant = 'responsive';
-    } else {
-      currentVariant = 'single';
-    }
-  }
   (0, _react.useEffect)(() => {
-    setCollapse(overrideIsCollapsed);
+    if (overrideIsCollapsed !== isCollapsedRef.current) {
+      isCollapsedRef.current = overrideIsCollapsed;
+      forceUpdate();
+    }
   }, [overrideIsCollapsed]);
   (0, _react.useEffect)(() => {
     if (isLarge && overrideIsCollapsed !== false) {
-      setCollapse(true);
+      isCollapsedRef.current = true;
+      forceUpdate();
+    }
+  }, [isLarge, overrideIsCollapsed]);
+  const onClickHandler = (0, _react.useCallback)(() => {
+    isCollapsedRef.current = !isCollapsedRef.current;
+    forceUpdate();
+  }, []);
+  const currentVariant = (0, _react.useMemo)(() => {
+    if (!variant) {
+      if (items || data) {
+        return 'responsive';
+      } else {
+        return 'single';
+      }
     }
-  }, [isLarge]);
+    return variant;
+  }, [data, items, variant]);
   (0, _componentHelper.validateDOMAttributes)(allProps, props);
   const innerSpace = (0, _componentHelper.isTrue)(spacing) ? 'small' : spacing;
   return _react.default.createElement("nav", _extends({
@@ -110,10 +121,8 @@ const Breadcrumb = localProps => {
     variant: "tertiary",
     icon: "chevron_left",
     icon_position: "left",
-    onClick: onClick || (() => {
-      setCollapse(!isCollapsed);
-    }),
-    "aria-expanded": !isCollapsed
+    onClick: onClick !== null && onClick !== void 0 ? onClick : onClickHandler,
+    "aria-expanded": !isCollapsedRef.current
   }), currentVariant !== 'collapse' && _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
     data: data,
     items: items,
@@ -125,7 +134,7 @@ const Breadcrumb = localProps => {
   }, _react.default.createElement(_BreadcrumbMultiple.BreadcrumbMultiple, {
     data: data,
     items: items,
-    isCollapsed: isCollapsed,
+    isCollapsed: isCollapsedRef.current,
     noAnimation: noAnimation
   })));
 };

package/cjs/components/breadcrumb/Breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_SkeletonHelper","_SpacingHelper","_Section","_Button","_Context","_BreadcrumbItem","_componentHelper","_BreadcrumbMultiple","_shared","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","exports","Breadcrumb","localProps","_context$translation","context","React","useContext","Context","allProps","extendPropsWithContext","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","skeletonClasses","createSkeletonClass","spacingClasses","createSpacingClasses","setCollapse","useState","isLarge","useMedia","currentVariant","useEffect","validateDOMAttributes","innerSpace","isTrue","createElement","convertJsxToString","classnames","style_type","text","icon","icon_position","Fragment","BreadcrumbMultiple","Item","BreadcrumbItem","_supportsSpacingProps","_default"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n SectionSpacing,\n SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n convertJsxToString,\n isTrue,\n validateDOMAttributes,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n /*\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n * Default: null\n /\n data?: Array<BreadcrumbItemProps>\n\n /\n The content of the component. Can be used instead of prop \"data\".\n * Default: null\n /\n children?:\n \| React.ReactElement<BreadcrumbItemProps>\n \| Array<React.ReactElement<BreadcrumbItemProps>>\n\n /\n The variant of the component.\n * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n /\n variant?: 'responsive' \| 'single' \| 'multiple' \| 'collapse'\n\n /\n Handle the click event on 'single'/'collapse'\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n * Default: null\n /\n href?: string\n\n /\n Every <nav> on a page needs an unique aria-label text\n * Default: Page hierarchy\n /\n navText?: React.ReactNode\n\n /\n Add custom 'Back' text for variant 'single'\n * Default: 'Back' or defined by Context translation\n /\n goBackText?: React.ReactNode\n\n /\n Add custom 'Home' text\n * Default: 'Home' or defined by Context translation\n /\n homeText?: React.ReactNode\n\n /\n Add custom 'Back to...' text, for variant collapse\n * Default 'Back to...' or defined by Context translation\n /\n backToText?: React.ReactNode\n\n /\n If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n * Default: null\n /\n isCollapsed?: boolean\n\n /\n Use one of the Section component style types (style_type)\n * Default: transparent\n /\n styleType?: SectionStyleTypes\n\n /\n Use one of the Section component style types (style_type)\n * Default: pistachio\n /\n collapsedStyleType?: SectionStyleTypes\n\n /\n Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n * Default: false\n /\n spacing?: SectionSpacing\n\n /\n Will disable the height animation\n * Default: false\n */\n noAnimation?: boolean\n}\n\nexport const defaultProps = {\n skeleton: false,\n navText: 'Back',\n goBackText: 'Back',\n homeText: 'Home',\n backToText: 'Back to...',\n isCollapsed: true,\n styleType: 'transparent',\n collapsedStyleType: 'info',\n spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Breadcrumb,\n context?.Breadcrumb,\n { skeleton: context?.skeleton }\n )\n\n const {\n className,\n skeleton,\n children: items,\n variant,\n onClick,\n navText, // has a translation in context\n goBackText, // has a translation in context\n homeText, // eslint-disable-line\n backToText, // has a translation in context\n styleType,\n collapsedStyleType,\n isCollapsed: overrideIsCollapsed,\n spacing,\n noAnimation,\n data,\n href,\n ...props\n } = allProps\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n\n const { isLarge } = useMedia()\n\n let currentVariant = variant\n if (!variant) {\n if (items \|\| data) {\n currentVariant = 'responsive'\n } else {\n currentVariant = 'single'\n }\n }\n\n useEffect(() => {\n setCollapse(overrideIsCollapsed)\n }, [overrideIsCollapsed])\n\n // Auto-collapse breadcrumbs if going from small screen to large screen.\n useEffect(() => {\n if (isLarge && overrideIsCollapsed !== false) {\n setCollapse(true)\n }\n }, [isLarge])\n\n validateDOMAttributes(allProps, props)\n\n const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n return (\n <nav\n aria-label={convertJsxToString(navText)}\n className={classnames(\n 'dnb-breadcrumb',\n `dnb-breadcrumb--variant-${currentVariant}`,\n skeletonClasses,\n spacingClasses,\n className\n )}\n {...props}\n >\n <Section\n className=\"dnb-breadcrumb__bar\"\n style_type={styleType \|\| 'transparent'}\n innerSpace={innerSpace}\n >\n {currentVariant === 'single' ? (\n <Button\n text={goBackText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick}\n href={href}\n />\n ) : (\n <>\n {currentVariant !== 'multiple' && (\n <Button\n className=\"dnb-breadcrumb__toggle\"\n text={backToText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={\n onClick \|\|\n (() => {\n setCollapse(!isCollapsed)\n })\n }\n aria-expanded={!isCollapsed}\n />\n )}\n\n {currentVariant !== 'collapse' && (\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={false}\n noAnimation={noAnimation}\n />\n )}\n </>\n )}\n </Section>\n\n {(currentVariant === 'collapse' \|\|\n currentVariant === 'responsive') && (\n <Section\n variant={collapsedStyleType}\n className=\"dnb-breadcrumb__collapse\"\n >\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={isCollapsed}\n noAnimation={noAnimation}\n />\n </Section>\n )}\n </nav>\n )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}
1	+ {"version":3,"file":"Breadcrumb.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_SkeletonHelper","_SpacingHelper","_Section","_Button","_Context","_BreadcrumbItem","_componentHelper","_BreadcrumbMultiple","_shared","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","exports","Breadcrumb","localProps","_context$translation","context","React","useContext","Context","allProps","extendPropsWithContext","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","skeletonClasses","createSkeletonClass","spacingClasses","createSpacingClasses","forceUpdate","useReducer","isCollapsedRef","useRef","isLarge","useMedia","useEffect","current","onClickHandler","useCallback","currentVariant","useMemo","validateDOMAttributes","innerSpace","isTrue","createElement","convertJsxToString","classnames","style_type","text","icon","icon_position","Fragment","BreadcrumbMultiple","Item","BreadcrumbItem","_supportsSpacingProps","_default"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n} from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n SectionSpacing,\n SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n convertJsxToString,\n isTrue,\n validateDOMAttributes,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\nimport { useMedia } from '../../shared'\n\nexport type BreadcrumbProps = {\n /*\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n * Default: null\n /\n data?: Array<BreadcrumbItemProps>\n\n /\n The content of the component. Can be used instead of prop \"data\".\n * Default: null\n /\n children?:\n \| React.ReactElement<BreadcrumbItemProps>\n \| Array<React.ReactElement<BreadcrumbItemProps>>\n\n /\n The variant of the component.\n * Default: When children and data is not defined, it defaults to \"single\". \"responsive\" if they are defined.\n /\n variant?: 'responsive' \| 'single' \| 'multiple' \| 'collapse'\n\n /\n Handle the click event on 'single'/'collapse'\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n * Default: null\n /\n href?: string\n\n /\n Every <nav> on a page needs an unique aria-label text\n * Default: Page hierarchy\n /\n navText?: React.ReactNode\n\n /\n Add custom 'Back' text for variant 'single'\n * Default: 'Back' or defined by Context translation\n /\n goBackText?: React.ReactNode\n\n /\n Add custom 'Home' text\n * Default: 'Home' or defined by Context translation\n /\n homeText?: React.ReactNode\n\n /\n Add custom 'Back to...' text, for variant collapse\n * Default 'Back to...' or defined by Context translation\n /\n backToText?: React.ReactNode\n\n /\n If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n * Default: null\n /\n isCollapsed?: boolean\n\n /\n Use one of the Section component style types (style_type)\n * Default: transparent\n /\n styleType?: SectionStyleTypes\n\n /\n Use one of the Section component style types (style_type)\n * Default: pistachio\n /\n collapsedStyleType?: SectionStyleTypes\n\n /\n Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n * Default: false\n /\n spacing?: SectionSpacing\n\n /\n Will disable the height animation\n * Default: false\n */\n noAnimation?: boolean\n}\n\nexport const defaultProps = {\n skeleton: false,\n navText: 'Back',\n goBackText: 'Back',\n homeText: 'Home',\n backToText: 'Back to...',\n isCollapsed: true,\n styleType: 'transparent',\n collapsedStyleType: 'info',\n spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Breadcrumb,\n context?.Breadcrumb,\n { skeleton: context?.skeleton }\n )\n\n const {\n className,\n skeleton,\n children: items,\n variant,\n onClick,\n navText, // has a translation in context\n goBackText, // has a translation in context\n homeText, // eslint-disable-line\n backToText, // has a translation in context\n styleType,\n collapsedStyleType,\n isCollapsed: overrideIsCollapsed,\n spacing,\n noAnimation,\n data,\n href,\n ...props\n } = allProps\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n const [, forceUpdate] = useReducer(() => ({}), {})\n\n const isCollapsedRef = useRef(overrideIsCollapsed)\n\n const { isLarge } = useMedia()\n\n useEffect(() => {\n if (overrideIsCollapsed !== isCollapsedRef.current) {\n isCollapsedRef.current = overrideIsCollapsed\n forceUpdate()\n }\n }, [overrideIsCollapsed])\n\n // Auto-collapse breadcrumbs if going from small screen to large screen.\n useEffect(() => {\n if (isLarge && overrideIsCollapsed !== false) {\n isCollapsedRef.current = true\n forceUpdate()\n }\n }, [isLarge, overrideIsCollapsed])\n\n const onClickHandler = useCallback(() => {\n isCollapsedRef.current = !isCollapsedRef.current\n forceUpdate()\n }, [])\n\n const currentVariant = useMemo(() => {\n if (!variant) {\n if (items \|\| data) {\n return 'responsive'\n } else {\n return 'single'\n }\n }\n\n return variant\n }, [data, items, variant])\n\n validateDOMAttributes(allProps, props)\n\n const innerSpace = isTrue(spacing) ? 'small' : spacing\n\n return (\n <nav\n aria-label={convertJsxToString(navText)}\n className={classnames(\n 'dnb-breadcrumb',\n `dnb-breadcrumb--variant-${currentVariant}`,\n skeletonClasses,\n spacingClasses,\n className\n )}\n {...props}\n >\n <Section\n className=\"dnb-breadcrumb__bar\"\n style_type={styleType \|\| 'transparent'}\n innerSpace={innerSpace}\n >\n {currentVariant === 'single' ? (\n <Button\n text={goBackText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick}\n href={href}\n />\n ) : (\n <>\n {currentVariant !== 'multiple' && (\n <Button\n className=\"dnb-breadcrumb__toggle\"\n text={backToText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick ?? onClickHandler}\n aria-expanded={!isCollapsedRef.current}\n />\n )}\n\n {currentVariant !== 'collapse' && (\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={false}\n noAnimation={noAnimation}\n />\n )}\n </>\n )}\n </Section>\n\n {(currentVariant === 'collapse' \|\|\n currentVariant === 'responsive') && (\n <Section\n variant={collapsedStyleType}\n className=\"dnb-breadcrumb__collapse\"\n >\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={isCollapsedRef.current}\n noAnimation={noAnimation}\n />\n </Section>\n )}\n </nav>\n )\n}\n\nBreadcrumb.Item = BreadcrumbItem\nBreadcrumb._supportsSpacingProps = true\n\nexport { BreadcrumbItem }\nexport default Breadcrumb\n"],"mappings":"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"}

package/cjs/components/breadcrumb/BreadcrumbItem.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import React from 'react';
-import { ButtonProps } from '../button/Button';
+import { ButtonProps } from '../Button';
+import { AnchorAllProps } from '../Anchor';
+import type { DataAttributeTypes } from '../../shared/types';
 import type { IconIcon } from '../icon/Icon';
 import type { SkeletonShow } from '../skeleton/Skeleton';
 export type BreadcrumbItemProps = {
@@ -10,7 +12,7 @@ export type BreadcrumbItemProps = {
     text?: React.ReactNode;
     /**
      * Icon displaying on the left side
-     * Default: HomeIcon / chevron_left
+     * Default: HomeIcon / chevron_right
      */
     icon?: IconIcon;
     /**
@@ -22,7 +24,7 @@ export type BreadcrumbItemProps = {
      * Set a custom click event. In this case, you should not define the prop href.
      * Default: null
      */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     /**
      * The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.
      * Default: null
@@ -35,7 +37,7 @@ export type BreadcrumbItemProps = {
     skeleton?: SkeletonShow;
     /** Internal */
     itemNr?: number;
-} & Omit<ButtonProps, 'variant'>;
+} & (AnchorAllProps & Omit<ButtonProps, 'variant'>) & DataAttributeTypes;
 declare const BreadcrumbItem: {
     (localProps: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;

package/cjs/components/breadcrumb/BreadcrumbItem.js CHANGED Viewed

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Button = _interopRequireDefault(require("../button/Button"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Anchor = _interopRequireDefault(require("../Anchor"));
 var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
 var _P = _interopRequireDefault(require("../../elements/P"));
 var _home = _interopRequireDefault(require("../../icons/home"));
@@ -27,7 +28,7 @@ const defaultProps = {
   variant: null,
   skeleton: null
 };
-const determineSbankenIcon = (variant, isSmallScreen) => {
+const determineIcon = (variant, isSmallScreen) => {
   switch (variant) {
     case 'home':
       return 'home-icon';
@@ -41,6 +42,7 @@ const determineSbankenIcon = (variant, isSmallScreen) => {
 const BreadcrumbItem = localProps => {
   const context = _react.default.useContext(_Context.default);
   const {
+    theme,
     translation: {
       Breadcrumb: {
         homeText
@@ -58,7 +60,6 @@ const BreadcrumbItem = localProps => {
       itemNr
     } = _extendPropsWithConte,
     props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
-  const theme = (0, _shared.useTheme)();
   const isSmallScreen = (0, _shared.useMediaQuery)({
     matchOnSSR: true,
     when: {
@@ -67,15 +68,14 @@ const BreadcrumbItem = localProps => {
   });
   const [currentIcon, setCurrentIcon] = _react.default.useState('chevron_left');
   useLayoutEffect(() => {
-    if (!icon && (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
-      const icon = determineSbankenIcon(variant, isSmallScreen);
-      setCurrentIcon(icon);
+    if (!icon) {
+      setCurrentIcon(determineIcon(variant, isSmallScreen));
     } else {
       if (variant !== 'home') {
         setCurrentIcon(icon !== null && icon !== void 0 ? icon : 'chevron_left');
       }
     }
-  }, [icon, isSmallScreen, theme === null || theme === void 0 ? void 0 : theme.name, variant]);
+  }, [icon, isSmallScreen, variant]);
   const currentText = text || variant === 'home' && homeText || '';
   const isInteractive = (href || onClick || props.to) && variant !== 'current';
   const style = {
@@ -86,7 +86,7 @@ const BreadcrumbItem = localProps => {
     className: "dnb-breadcrumb__item",
     "aria-current": variant === 'current' ? 'page' : undefined,
     style: style
-  }, isInteractive ? _react.default.createElement(_Button.default, _extends({
+  }, isInteractive ? (theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken' ? _react.default.createElement(_Button.default, _extends({
     variant: "tertiary",
     href: href,
     icon: iconToUse,
@@ -94,7 +94,15 @@ const BreadcrumbItem = localProps => {
     on_click: onClick,
     text: currentText,
     skeleton: skeleton
-  }, props)) : _react.default.createElement("span", _extends({
+  }, props)) : _react.default.createElement(_react.default.Fragment, null, variant !== 'home' && _react.default.createElement(_IconPrimary.default, {
+    icon: iconToUse,
+    className: "dnb-breadcrumb__item__span__icon"
+  }), _react.default.createElement(_Anchor.default, _extends({
+    href: href,
+    onClick: onClick,
+    icon: variant === 'home' ? iconToUse : null,
+    skeleton: skeleton
+  }, props), currentText)) : _react.default.createElement("span", _extends({
     className: "dnb-breadcrumb__item__span"
   }, (0, _componentHelper.filterProps)(props, key => !key.includes('-'))), _react.default.createElement(_IconPrimary.default, {
     icon: iconToUse,

package/cjs/components/breadcrumb/BreadcrumbItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreadcrumbItem.js","names":["_react","_interopRequireDefault","require","_Button","_IconPrimary","_P","_home","_shared","_Context","_componentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","useLayoutEffect","window","React","useEffect","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","Context","translation","Breadcrumb","homeText","_extendPropsWithConte","extendPropsWithContext","itemNr","props","theme","useTheme","useMediaQuery","matchOnSSR","when","max","currentIcon","setCurrentIcon","useState","name","currentText","isInteractive","to","style","String","iconToUse","homeIcon","createElement","className","undefined","icon_position","on_click","filterProps","includes","space","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n extendPropsWithContext,\n filterProps,\n} from '../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type BreadcrumbItemProps = {\n /*\n Text displaying the title of the item's corresponding page\n * Default: If variant='home', default is \"Home\". Otherwise it is required.\n /\n text?: React.ReactNode\n\n /\n Icon displaying on the left side\n * Default: HomeIcon / chevron_left\n /\n icon?: IconIcon\n\n /\n Href should be the link to the item's corresponding page.\n * Default: null\n /\n href?: string\n\n /\n Set a custom click event. In this case, you should not define the prop href.\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n * Default: null\n /\n variant?: 'home' \| 'previous' \| 'current'\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /* Internal */\n itemNr?: number\n} & Omit<ButtonProps, 'variant'>\n\nconst defaultProps = {\n text: null,\n href: null,\n icon: null,\n onClick: null,\n variant: null,\n skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n variant: string,\n isSmallScreen: boolean\n) => {\n switch (variant) {\n case 'home':\n return 'home-icon'\n case 'single':\n case 'collapse':\n return 'chevron_left'\n default:\n return isSmallScreen ? 'chevron_left' : 'chevron_right'\n }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n const {\n translation: {\n Breadcrumb: { homeText },\n },\n } = context\n\n // Extract additional props from global context\n const {\n text,\n href,\n icon,\n onClick,\n variant,\n skeleton,\n itemNr,\n ...props\n } = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.BreadcrumbItem\n )\n\n const theme = useTheme()\n const isSmallScreen = useMediaQuery({\n matchOnSSR: true,\n when: { max: 'medium' },\n })\n\n const [currentIcon, setCurrentIcon] =\n React.useState<IconIcon>('chevron_left')\n\n useLayoutEffect(() => {\n if (!icon && theme?.name === 'sbanken') {\n const icon = determineSbankenIcon(variant, isSmallScreen)\n setCurrentIcon(icon)\n } else {\n if (variant !== 'home') {\n setCurrentIcon(icon ?? 'chevron_left')\n }\n }\n }, [icon, isSmallScreen, theme?.name, variant])\n\n const currentText = text \|\| (variant === 'home' && homeText) \|\| ''\n const isInteractive =\n (href \|\| onClick \|\| props.to) && variant !== 'current'\n const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n const iconToUse =\n variant === 'home' \|\| currentIcon === 'home-icon'\n ? homeIcon\n : currentIcon\n\n return (\n <li\n className=\"dnb-breadcrumb__item\"\n aria-current={variant === 'current' ? 'page' : undefined}\n style={style}\n >\n {isInteractive ? (\n <Button\n variant=\"tertiary\"\n href={href}\n icon={iconToUse}\n icon_position=\"left\"\n on_click={onClick}\n text={currentText}\n skeleton={skeleton}\n {...props}\n />\n ) : (\n <span\n className=\"dnb-breadcrumb__item__span\"\n // TODO: Consider deprecating passing down props to span in v11\n {...filterProps(props, (key) => !key.includes('-'))}\n >\n <IconPrimary\n icon={iconToUse}\n className=\"dnb-breadcrumb__item__span__icon\"\n />\n <P space=\"0\">{currentText}</P>\n </span>\n )}\n </li>\n )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}
1	+ {"version":3,"file":"BreadcrumbItem.js","names":["_react","_interopRequireDefault","require","_Button","_Anchor","_IconPrimary","_P","_home","_shared","_Context","_componentHelper","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","useLayoutEffect","window","React","useEffect","defaultProps","text","href","icon","onClick","variant","skeleton","determineIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","Context","theme","translation","Breadcrumb","homeText","_extendPropsWithConte","extendPropsWithContext","itemNr","props","useMediaQuery","matchOnSSR","when","max","currentIcon","setCurrentIcon","useState","currentText","isInteractive","to","style","String","iconToUse","homeIcon","createElement","className","undefined","name","icon_position","on_click","Fragment","filterProps","includes","space","_supportsSpacingProps","_default","exports"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button, { ButtonProps } from '../Button'\nimport Anchor, { AnchorAllProps } from '../Anchor'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { DataAttributeTypes } from '../../shared/types'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n extendPropsWithContext,\n filterProps,\n} from '../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type BreadcrumbItemProps = {\n /*\n Text displaying the title of the item's corresponding page\n * Default: If variant='home', default is \"Home\". Otherwise it is required.\n /\n text?: React.ReactNode\n\n /\n Icon displaying on the left side\n * Default: HomeIcon / chevron_right\n /\n icon?: IconIcon\n\n /\n Href should be the link to the item's corresponding page.\n * Default: null\n /\n href?: string\n\n /\n Set a custom click event. In this case, you should not define the prop href.\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLAnchorElement \| HTMLButtonElement>\n\n /\n The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n * Default: null\n /\n variant?: 'home' \| 'previous' \| 'current'\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /* Internal */\n itemNr?: number\n} & (AnchorAllProps & Omit<ButtonProps, 'variant'>) &\n DataAttributeTypes\n\nconst defaultProps = {\n text: null,\n href: null,\n icon: null,\n onClick: null,\n variant: null,\n skeleton: null,\n}\n\nconst determineIcon: IconIcon = (\n variant: string,\n isSmallScreen: boolean\n) => {\n switch (variant) {\n case 'home':\n return 'home-icon'\n case 'single':\n case 'collapse':\n return 'chevron_left'\n default:\n return isSmallScreen ? 'chevron_left' : 'chevron_right'\n }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n const {\n theme,\n translation: {\n Breadcrumb: { homeText },\n },\n } = context\n\n // Extract additional props from global context\n const {\n text,\n href,\n icon,\n onClick,\n variant,\n skeleton,\n itemNr,\n ...props\n } = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.BreadcrumbItem\n )\n\n const isSmallScreen = useMediaQuery({\n matchOnSSR: true,\n when: { max: 'medium' },\n })\n\n const [currentIcon, setCurrentIcon] =\n React.useState<IconIcon>('chevron_left')\n\n useLayoutEffect(() => {\n if (!icon) {\n setCurrentIcon(determineIcon(variant, isSmallScreen))\n } else {\n if (variant !== 'home') {\n setCurrentIcon(icon ?? 'chevron_left')\n }\n }\n }, [icon, isSmallScreen, variant])\n\n const currentText = text \|\| (variant === 'home' && homeText) \|\| ''\n const isInteractive =\n (href \|\| onClick \|\| props.to) && variant !== 'current'\n const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n const iconToUse =\n variant === 'home' \|\| currentIcon === 'home-icon'\n ? homeIcon\n : currentIcon\n\n return (\n <li\n className=\"dnb-breadcrumb__item\"\n aria-current={variant === 'current' ? 'page' : undefined}\n style={style}\n >\n {isInteractive ? (\n theme?.name === 'sbanken' ? (\n <Button\n variant=\"tertiary\"\n href={href}\n icon={iconToUse}\n icon_position=\"left\"\n on_click={onClick}\n text={currentText}\n skeleton={skeleton}\n {...props}\n />\n ) : (\n <>\n {variant !== 'home' && (\n <IconPrimary\n icon={iconToUse}\n className=\"dnb-breadcrumb__item__span__icon\"\n />\n )}\n <Anchor\n href={href}\n onClick={onClick}\n icon={variant === 'home' ? iconToUse : null}\n skeleton={skeleton}\n {...props}\n >\n {currentText}\n </Anchor>\n </>\n )\n ) : (\n <span\n className=\"dnb-breadcrumb__item__span\"\n // TODO: Consider deprecating passing down props to span in v11\n {...filterProps(props, (key) => !key.includes('-'))}\n >\n <IconPrimary\n icon={iconToUse}\n className=\"dnb-breadcrumb__item__span__icon\"\n />\n <P space=\"0\">{currentText}</P>\n </span>\n )}\n </li>\n )\n}\n\nBreadcrumbItem._supportsSpacingProps = true\n\nexport default BreadcrumbItem\n"],"mappings":"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"}

package/cjs/components/breadcrumb/style/dnb-breadcrumb.css CHANGED Viewed

@@ -23,17 +23,41 @@
   list-style: none;
   flex-flow: row wrap;
   align-items: center;
-  gap: 1.5rem;
+  row-gap: 1rem;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
 }
-.dnb-breadcrumb__item__span {
+.dnb-breadcrumb__item {
   display: flex;
   align-items: center;
-  line-height: normal;
   padding: 0.5rem 0;
 }
+.dnb-breadcrumb__item__span {
+  display: flex;
+  align-items: center;
+  line-height: var(--line-height-basis);
+}
 .dnb-breadcrumb__item__span__icon {
   margin-right: 0.5rem;
 }
+.dnb-breadcrumb__item .dnb-anchor {
+  line-height: 1rem;
+  padding: 0.25rem 0;
+  position: relative;
+}
+.dnb-breadcrumb__item .dnb-anchor::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: scale(1.25, 2);
+  border: 0.5rem solid transparent;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor {
+  border-left: none;
+}
+.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon {
+  margin-right: 0.5rem;
+}
 .dnb-breadcrumb__multiple {
   display: flex;
   flex-direction: column;
@@ -66,7 +90,8 @@ html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item {
 .dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section {
   flex-direction: column;
   align-items: flex-start;
+  row-gap: 0;
   margin: 0.5rem 0;
   margin-left: 1.5rem;
-  gap: 0;
+  padding: 0;
 }

package/cjs/components/breadcrumb/style/dnb-breadcrumb.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;display:flex;flex-flow:row wrap;~~gap:1.5rem;~~list-style:none;margin:0;padding:0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:~~normal~~;padding:.5rem 0}.dnb-~~breadcrumb__item__span__icon~~{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item{transition:none}@media screen and (max-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;~~gap:0;~~margin:.5rem 0 .5rem 1.5rem}
1	+ .dnb-breadcrumb{display:flex;flex-direction:column;margin:0;padding:0}.dnb-breadcrumb__bar.dnb-section{display:flex}.dnb-breadcrumb__list.dnb-section{align-items:center;-moz-column-gap:.5rem;column-gap:.5rem;display:flex;flex-flow:row wrap;list-style:none;margin:0;padding:0;row-gap:1rem}.dnb-breadcrumb__item{align-items:center;display:flex;padding:.5rem 0}.dnb-breadcrumb__item__span{align-items:center;display:flex;line-height:var(--line-height-basis)}.dnb-breadcrumb__item__span__icon{margin-right:.5rem}.dnb-breadcrumb__item .dnb-anchor{line-height:1rem;padding:.25rem 0;position:relative}.dnb-breadcrumb__item .dnb-anchor:after{border:.5rem solid transparent;content:"";inset:0;position:absolute;transform:scale(1.25,2)}.dnb-breadcrumb__item:first-child .dnb-anchor{border-left:none}.dnb-breadcrumb__item:first-child .dnb-anchor .dnb-icon{margin-right:.5rem}.dnb-breadcrumb__multiple{display:flex;flex-direction:column;transition:height .4s var(--easing-default)}.dnb-breadcrumb__multiple .dnb-breadcrumb__item{transform:translateX(-1rem);transition:transform .4s var(--easing-default) calc(var(--delay)*50ms)}.dnb-breadcrumb__multiple.dnb-height-animation--parallax .dnb-breadcrumb__item{transform:translateX(0)}html[data-visual-test] .dnb-breadcrumb__multiple .dnb-breadcrumb__item{transition:none}@media screen and (max-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__bar .dnb-breadcrumb__multiple{display:none}}@media screen and (min-width:60em){.dnb-breadcrumb--variant-responsive .dnb-breadcrumb__toggle{display:none}}.dnb-breadcrumb__collapse{display:flex;flex-direction:column}.dnb-breadcrumb__collapse .dnb-breadcrumb__list.dnb-section{align-items:flex-start;flex-direction:column;margin:.5rem 0 .5rem 1.5rem;padding:0;row-gap:0}

package/cjs/components/breadcrumb/style/dnb-breadcrumb.scss CHANGED Viewed

@@ -25,21 +25,48 @@
     flex-flow: row wrap;
     align-items: center;
-    gap: 1.5rem;
+    row-gap: 1rem; // For when breaking into new lines (Anchor variant)
+    column-gap: 0.5rem;
   }
   &__item {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0;
     &__span {
       display: flex;
       align-items: center;
-      line-height: normal;
-      padding: 0.5rem 0;
+      line-height: var(--line-height-basis);
       // To match the other tertiary buttons
       &__icon {
         margin-right: 0.5rem;
       }
     }
+    .dnb-anchor {
+      line-height: 1rem;
+      padding: 0.25rem 0;
+      // To make the click area bigger
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        transform: scale(1.25, 2);
+        border: 0.5rem solid transparent;
+      }
+    }
+    // Home icon spacing
+    &:first-child .dnb-anchor {
+      border-left: none;
+      .dnb-icon {
+        margin-right: 0.5rem;
+      }
+    }
   }
   &__multiple {
@@ -87,9 +114,10 @@
   &__collapse &__list.dnb-section {
     flex-direction: column;
     align-items: flex-start;
+    row-gap: 0;
     margin: 0.5rem 0;
     margin-left: 1.5rem;
-    gap: 0;
+    padding: 0;
   }
 }

package/cjs/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.css CHANGED Viewed

@@ -9,6 +9,12 @@
   font-weight: var(--font-weight-medium);
   color: var(--sb-color-text);
 }
+.dnb-breadcrumb__item {
+  padding: 0;
+}
+.dnb-breadcrumb__item__span {
+  padding: 0.5rem 0;
+}
 .dnb-breadcrumb__item__span__icon {
   color: var(--sb-color-violet);
 }
@@ -20,4 +26,7 @@
 }
 .dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text {
   color: var(--sb-color-text);
+}
+.dnb-breadcrumb__list.dnb-section {
+  row-gap: 0;
 }

package/cjs/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-breadcrumb .dnb-button__text{color:var(--sb-color-text);font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item__span__icon{color:var(--sb-color-violet)}.dnb-breadcrumb__item__span .dnb-p{color:var(--sb-color-gray-dark-3)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text{font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text{color:var(--sb-color-text)}
1	+ .dnb-breadcrumb .dnb-button__text{color:var(--sb-color-text);font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item{padding:0}.dnb-breadcrumb__item__span{padding:.5rem 0}.dnb-breadcrumb__item__span__icon{color:var(--sb-color-violet)}.dnb-breadcrumb__item__span .dnb-p{color:var(--sb-color-gray-dark-3)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text{font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text{color:var(--sb-color-text)}.dnb-breadcrumb__list.dnb-section{row-gap:0}

package/cjs/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.scss CHANGED Viewed

@@ -13,7 +13,9 @@
     }
   }
   &__item {
+    padding: 0;
     &__span {
+      padding: 0.5rem 0;
       &__icon {
         color: var(--sb-color-violet);
       }
@@ -30,4 +32,9 @@
       }
     }
   }
+  // For when breaking into new lines
+  &__list.dnb-section {
+    row-gap: 0;
+  }
 }