@dnb/eufemia 10.7.0 → 10.8.0

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',