@dnb/eufemia 10.7.0 → 10.9.0

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

@@ -0,0 +1,124 @@
+/*
+* Accordion theme
+*
+*/
+/*
+ * Utilities
+ */
+/*
+* Button mixins
+*
+*/
+.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: 1rem;
+  --accordion-header-wrapper-margin--icon-right: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+  --accordion-header-icon-gutter: 0.5rem;
+  --accordion-header-icon-margin: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+  --accordion-frame-color: transparent;
+  --accordion-frame-color--expanded: var(--sb-color-violet);
+  --accordion-frame-color--disabled: var(--sb-color-gray-dark-2);
+  --accordion-frame-width: 0.1875rem;
+  --accordion-frame-width--active: 0rem;
+  --accordion-bg: transparent;
+  --accordion-bg--expanded: var(--sb-color-violet-light-4);
+  --accordion-bg--disabled: var(--sb-color-gray-light-2);
+  --accordion-content-padding-left: calc(
+    3.5rem - var(--accordion-frame-width)
+  );
+  color: var(--sb-color-text);
+}
+.dnb-accordion__header, .dnb-accordion__content {
+  background-color: var(--accordion-bg);
+  border-left: var(--accordion-frame-width) solid var(--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[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header.focus-visible:not([disabled]) {
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  z-index: 1;
+  border-radius: 0.125rem;
+  background-color: var(--sb-color-blue-light-3);
+  color: var(--border-color);
+}
+html:not([data-whatintent=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  z-index: 1;
+  border-radius: 0.125rem;
+  background-color: var(--sb-color-blue-light-3);
+  color: var(--border-color);
+}
+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: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]) {
+  background-color: var(--sb-color-white);
+  --border-color: ;
+  --border-width: 0.0625rem;
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+  --border-color: var(--sb-color-violet);
+  border-left-width: var(--accordion-frame-width--active);
+  padding-left: calc(var(--accordion-frame-width) - var(--accordion-frame-width--active));
+}
+.dnb-accordion__header__icon, .dnb-accordion__header__container {
+  color: var(--sb-color-violet);
+}
+.dnb-accordion__header--icon-right {
+  --accordion-header-icon-margin: 1.5rem;
+}
+.dnb-accordion__header--icon-right + .dnb-accordion__content {
+  --accordion-content-padding-left: calc(
+    1.5rem - var(--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(--accordion-content-padding-left);
+}
+.dnb-accordion--expanded {
+  --accordion-bg: var(--accordion-bg--expanded);
+  --accordion-frame-color: var(--accordion-frame-color--expanded);
+  --accordion-frame-width--active: 0.125rem;
+}
+.dnb-accordion--expanded > .dnb-accordion__header {
+  font-weight: var(--sb-font-weight-bold);
+}
+.dnb-accordion--expanded > .dnb-accordion__header[disabled],
+.dnb-accordion--expanded > .dnb-accordion__header[disabled] + .dnb-accordion__content {
+  --accordion-bg: var(--accordion-bg--disabled);
+  --accordion-frame-color: var(--accordion-frame-color--disabled);
+}

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

@@ -0,0 +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:1rem;--accordion-header-wrapper-margin--icon-right:calc(1.5rem - var(--accordion-frame-width));--accordion-header-icon-gutter:0.5rem;--accordion-header-icon-margin:calc(1.5rem - var(--accordion-frame-width));--accordion-frame-color:transparent;--accordion-frame-color--expanded:var(--sb-color-violet);--accordion-frame-color--disabled:var(--sb-color-gray-dark-2);--accordion-frame-width:0.1875rem;--accordion-frame-width--active:0rem;--accordion-bg:transparent;--accordion-bg--expanded:var(--sb-color-violet-light-4);--accordion-bg--disabled:var(--sb-color-gray-light-2);--accordion-content-padding-left:calc(3.5rem - var(--accordion-frame-width));color:var(--sb-color-text)}.dnb-accordion__content,.dnb-accordion__header{background-color:var(--accordion-bg);border-left:var(--accordion-frame-width) solid var(--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[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]){--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: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(--accordion-frame-width--active);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);padding-left:calc(var(--accordion-frame-width) - var(--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{--accordion-content-padding-left:calc(1.5rem - var(--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(--accordion-content-padding-left)}.dnb-accordion--expanded{--accordion-bg:var(--accordion-bg--expanded);--accordion-frame-color:var(--accordion-frame-color--expanded);--accordion-frame-width--active:0.125rem}.dnb-accordion--expanded>.dnb-accordion__header{font-weight:var(--sb-font-weight-bold)}.dnb-accordion--expanded>.dnb-accordion__header[disabled],.dnb-accordion--expanded>.dnb-accordion__header[disabled]+.dnb-accordion__content{--accordion-bg:var(--accordion-bg--disabled);--accordion-frame-color:var(--accordion-frame-color--disabled)}

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

@@ -0,0 +1,125 @@
+/*
+* Accordion theme
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+@import '../../../button/style/themes/button-mixins.scss';
+
+.dnb-accordion {
+  --accordion-border-width: 0;
+  --accordion-border-radius: 0;
+
+  // vertical spacing
+  --accordion-header-margin-vertical: 1rem;
+  --accordion-header-margin-vertical--description: 0.5rem;
+
+  // header
+  --accordion-header-wrapper-margin: 1rem;
+  --accordion-header-wrapper-margin--icon-right: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+
+  // icon
+  --accordion-header-icon-gutter: 0.5rem;
+  --accordion-header-icon-margin: calc(
+    1.5rem - var(--accordion-frame-width)
+  );
+
+  // frame (left border on expand)
+  --accordion-frame-color: transparent;
+  --accordion-frame-color--expanded: var(--sb-color-violet);
+  --accordion-frame-color--disabled: var(--sb-color-gray-dark-2);
+  --accordion-frame-width: 0.1875rem;
+  --accordion-frame-width--active: 0rem;
+
+  // background
+  --accordion-bg: transparent;
+  --accordion-bg--expanded: var(--sb-color-violet-light-4);
+  --accordion-bg--disabled: var(--sb-color-gray-light-2);
+
+  // other
+  --accordion-content-padding-left: calc(
+    3.5rem - var(--accordion-frame-width)
+  );
+
+  color: var(--sb-color-text);
+
+  &__header,
+  &__content {
+    background-color: var(--accordion-bg);
+    border-left: var(--accordion-frame-width) solid
+      var(--accordion-frame-color);
+  }
+
+  &__header {
+    @include focus-visible() {
+      @include focusRing('always');
+      z-index: 1;
+      border-radius: 0.125rem;
+      background-color: var(--sb-color-blue-light-3);
+      color: var(--border-color);
+
+      .dnb-accordion__header__icon {
+        color: var(--border-color);
+      }
+    }
+    @include hover() {
+      background-color: var(--sb-color-violet-light-2);
+    }
+
+    @include active() {
+      background-color: var(--sb-color-white);
+      @include fakeBorder(null, null, inset);
+      // must be set after fakeBorder()
+      --border-color: var(--sb-color-violet);
+      border-left-width: var(--accordion-frame-width--active);
+      padding-left: calc(
+        var(--accordion-frame-width) - var(--accordion-frame-width--active)
+      );
+    }
+
+    &__icon,
+    &__container {
+      color: var(--sb-color-violet);
+    }
+
+    &--icon-right {
+      --accordion-header-icon-margin: 1.5rem;
+      + .dnb-accordion__content {
+        --accordion-content-padding-left: calc(
+          1.5rem - var(--accordion-frame-width)
+        );
+      }
+    }
+
+    // disabled
+    &[disabled] {
+      * {
+        color: var(--sb-color-gray-dark-2);
+      }
+    }
+  }
+
+  &__content__inner {
+    margin-top: 0;
+    padding: 0 1rem 1rem var(--accordion-content-padding-left);
+  }
+
+  &--expanded {
+    --accordion-bg: var(--accordion-bg--expanded);
+    --accordion-frame-color: var(--accordion-frame-color--expanded);
+    --accordion-frame-width--active: 0.125rem;
+
+    > .dnb-accordion__header {
+      font-weight: var(--sb-font-weight-bold);
+    }
+
+    // disabled
+    > .dnb-accordion__header[disabled],
+    > .dnb-accordion__header[disabled] + .dnb-accordion__content {
+      --accordion-bg: var(--accordion-bg--disabled);
+      --accordion-frame-color: var(--accordion-frame-color--disabled);
+    }
+  }
+}

package/components/anchor/Anchor.js

@@ -54,7 +54,7 @@ export function AnchorInstance(localProps) {
   return React.createElement(React.Fragment, null, React.createElement(E, _extends({
     as: as,
     id: id,
-    className: classnames(className, omitClass !== true && 'dnb-anchor', typeof children !== 'string' && 'dnb-anchor--has-icon', prefix && 'dnb-anchor--icon-left', suffix && 'dnb-anchor--icon-right', allProps.target === '_blank' && (typeof children !== 'string' || suffix) && 'dnb-anchor--no-icon')
+    className: classnames(className, suffix && 'dnb-anchor--icon-right' + (allProps.target === '_blank' ? " dnb-anchor--no-icon" : ""), omitClass !== true && 'dnb-anchor', typeof children !== 'string' && 'dnb-anchor--has-icon', prefix && 'dnb-anchor--icon-left')
   }, attributes, {
     innerRef: innerRef
   }), prefix, children, suffix), showTooltip && React.createElement(Tooltip, {

package/components/anchor/Anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","names":["React","classnames","E","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","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","showTooltip","target","title","as","prefix","suffix","iconNode","createElement","Fragment","_extends","showDelay","targetElement","forwardRef","props","ref","scrollToHashHandler","e","_element$pathname","currentTarget","href","getAttribute","document","includes","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","preventDefault","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll"],"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 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 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 attributes = rest as ElementProps\n\n  const internalId = id || 'id' + makeUniqueId()\n\n  // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html\n  const showTooltip =\n    tooltip || (allProps.target === '_blank' && !allProps.title)\n\n  const as = (element || 'a') as string\n\n  let prefix\n  let suffix\n  if (icon) {\n    const iconNode =\n      typeof icon === 'string' ? <IconPrimary icon={icon} /> : icon\n    if (iconPosition === 'left') {\n      prefix = <>{iconNode} </>\n    } else if (iconPosition === 'right') {\n      suffix = <> {iconNode}</>\n    }\n  }\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true && 'dnb-anchor',\n          className,\n\n          // because we then don't want to distract the link out\n          // we make sure we hide the icon\n          allProps.target === '_blank' &&\n            (typeof children !== 'string' || suffix) &&\n            'dnb-anchor--no-icon',\n          typeof children !== 'string' && 'dnb-anchor--has-icon',\n          prefix && 'dnb-anchor--icon-left',\n          suffix && 'dnb-anchor--icon-right'\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\nexport default Anchor\n\nexport function scrollToHashHandler(\n  e: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = e.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, srollts to it.\n   * We want Chromium browsers to scorll 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      e.preventDefault()\n\n      const scrollPadding = parseFloat(\n        window.getComputedStyle(document.documentElement).scrollPaddingTop\n      )\n      const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n      window.scroll({ top })\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Anchor.js","names":["React","classnames","E","Context","makeUniqueId","extendPropsWithContext","getOffsetTop","IconPrimary","Tooltip","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","showTooltip","target","title","as","prefix","suffix","iconNode","createElement","Fragment","_extends","showDelay","targetElement","forwardRef","props","ref","scrollToHashHandler","e","_element$pathname","currentTarget","href","getAttribute","document","includes","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","preventDefault","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","scroll"],"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 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 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 attributes = rest as ElementProps\n\n  const internalId = id || 'id' + makeUniqueId()\n\n  // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html\n  const showTooltip =\n    tooltip || (allProps.target === '_blank' && !allProps.title)\n\n  const as = (element || 'a') as string\n\n  let prefix\n  let suffix\n  if (icon) {\n    const iconNode =\n      typeof icon === 'string' ? <IconPrimary icon={icon} /> : icon\n    if (iconPosition === 'left') {\n      prefix = <>{iconNode} </>\n    } else if (iconPosition === 'right') {\n      suffix = <> {iconNode}</>\n    }\n  }\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true && 'dnb-anchor',\n          className,\n\n          // because we then don't want to distract the link out\n          // we make sure we hide the icon\n          allProps.target === '_blank' && suffix && 'dnb-anchor--no-icon',\n          typeof children !== 'string' && 'dnb-anchor--has-icon',\n          prefix && 'dnb-anchor--icon-left',\n          suffix && 'dnb-anchor--icon-right'\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\nexport default Anchor\n\nexport function scrollToHashHandler(\n  e: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = e.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, srollts to it.\n   * We want Chromium browsers to scorll 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      e.preventDefault()\n\n      const scrollPadding = parseFloat(\n        window.getComputedStyle(document.documentElement).scrollPaddingTop\n      )\n      const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n      window.scroll({ top })\n    }\n  }\n}\n"],"mappings":"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"}

package/components/anchor/style/anchor-mixins.scss

@@ -105,7 +105,9 @@
 
 @mixin anchorBackground($color, $overflow: 0.125em) {
   @if $overflow {
-    box-shadow: inset 100vw 100vw 0 0 $color, -$overflow 0 0 0 $color,
+    box-shadow:
+      inset 100vw 100vw 0 0 $color,
+      -$overflow 0 0 0 $color,
       $overflow 0 0 0 $color;
   } @else {
     box-shadow: inset 100vw 100vw 0 0 $color;
@@ -164,7 +166,9 @@
 
     background-image: inherit;
 
-    transition: transform 0.3s ease-out, filter 1s ease-in-out;
+    transition:
+      transform 0.3s ease-out,
+      filter 1s ease-in-out;
     transform-origin: bottom;
   }
 
@@ -200,7 +204,9 @@
     }
   }
 
-  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out,
+  transition:
+    box-shadow 200ms ease-in-out,
+    border-radius 200ms ease-in-out,
     background 200ms ease-in-out;
 
   [data-visual-test-wrapper] & {

package/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss

@@ -107,7 +107,9 @@
     }
   }
 
-  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style) {
+  &:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(
+      .anchor-hash
+    ):not(.dnb-anchor--inline):not(.dnb-anchor--no-style) {
     &:not(.dnb-anchor--icon-left) {
       &::before {
         text-decoration-color: var(--sb-color-green-dark);

package/components/autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _IconPrimary, _AlignmentHelper;
 const _excluded = ["fillDataIfEmpty"],
-  _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
+  _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "independent_width", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
@@ -1267,6 +1267,7 @@ class AutocompleteInstance extends React.PureComponent {
         triangle_position,
         icon_position,
         skip_portal,
+        independent_width,
         mode: _mode,
         data: _data,
         children: _children,
@@ -1456,7 +1457,8 @@ class AutocompleteInstance extends React.PureComponent {
       on_hide: this.onHideHandler,
       on_pre_change: this.onPreChangeHandler,
       on_key_down: this.onReserveActivityHandler,
-      onMouseDown: this.onReserveActivityHandler
+      onMouseDown: this.onReserveActivityHandler,
+      independent_width: independent_width
     })), suffix && React.createElement(Suffix, {
       className: "dnb-autocomplete__suffix",
       id: id + '-suffix',