@dnb/eufemia 10.55.0 → 10.56.0

package/es/components/help-button/style/dnb-help-button-inline.css

@@ -0,0 +1,98 @@
+/*
+ * HelpButton component
+ *
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}

package/es/components/help-button/style/dnb-help-button-inline.min.css

@@ -0,0 +1 @@
+.dnb-help-button.dnb-help-button__inline--open{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-help-button__inline svg{will-change:transform}.dnb-help-button__inline svg:nth-of-type(2){inset:0;margin:auto;opacity:0;position:absolute}.dnb-help-button__inline--open svg:first-of-type{opacity:0}.dnb-help-button__inline--open svg:nth-of-type(2){animation:rotate-icon-in .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:first-of-type{animation:animate-question .4s var(--easing-default) .2s forwards;opacity:0}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2){animation:rotate-icon-out .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg,html[data-visual-test] .dnb-help-button__inline svg{animation-duration:0ms}@keyframes rotate-icon-in{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(90deg)}}@keyframes rotate-icon-out{0%{opacity:1;transform:rotate(90deg)}30%{opacity:1}to{opacity:0;transform:rotate(0deg)}}@keyframes animate-question{0%{opacity:0;transform:rotate(10deg)}to{opacity:1;transform:rotate(0deg)}}.dnb-help-button__content{--help-button-indent-width:var(--card-outline-width)}.dnb-help-button__content .dnb-section{--background-color:var(--help-button-content-background);--rounded-corner--value:calc(var(--card-outline-width) + 0.5rem)}.dnb-help-button__content .dnb-section .dnb-p{max-width:60ch;transform:translate3d(0,-.5rem,0);transition:transform .4s var(--easing-default) 40ms}:not(.dnb-card) .dnb-help-button__content .dnb-section{border:var(--help-button-indent-width) solid var(--help-button-content-background);border-bottom:none;border-top:none;margin-left:calc(var(--help-button-indent-width)*-1);margin-right:calc(var(--help-button-indent-width)*-1)}.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p{transform:translateZ(0)}

package/es/components/help-button/style/dnb-help-button-inline.scss

@@ -0,0 +1,128 @@
+/*
+ * HelpButton component
+ *
+ */
+
+@import '../../button/style/themes/button-mixins.scss';
+
+.dnb-help-button {
+  &.dnb-help-button__inline {
+    &--open {
+      @include buttonHoverStyle(null, null, var(--color-emerald-green));
+    }
+  }
+}
+
+.dnb-help-button__inline {
+  svg {
+    // To avoid the animations from jumping in Safari
+    will-change: transform;
+  }
+
+  svg:nth-of-type(2) {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    opacity: 0;
+  }
+
+  &--open {
+    svg:nth-of-type(1) {
+      opacity: 0;
+    }
+    svg:nth-of-type(2) {
+      animation: rotate-icon-in 400ms var(--easing-default) forwards;
+    }
+  }
+
+  &:not(#{&}--open)#{&}--was-open {
+    svg:nth-of-type(1) {
+      opacity: 0;
+      animation: animate-question 400ms var(--easing-default) 200ms
+        forwards;
+    }
+    svg:nth-of-type(2) {
+      animation: rotate-icon-out 400ms var(--easing-default) forwards;
+    }
+  }
+
+  &:not(#{&}--user-intent),
+  html[data-visual-test] & {
+    svg {
+      animation-duration: 0ms;
+    }
+  }
+
+  @keyframes rotate-icon-in {
+    from {
+      opacity: 0;
+      transform: rotate(0deg);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(90deg);
+    }
+  }
+
+  @keyframes rotate-icon-out {
+    0% {
+      opacity: 1;
+      transform: rotate(90deg);
+    }
+    30% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes animate-question {
+    from {
+      opacity: 0;
+      transform: rotate(10deg);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.dnb-help-button__content {
+  .dnb-section {
+    --background-color: var(--help-button-content-background);
+
+    // Because we don't use/need an outline, we need to add to get a wider corner radius.
+    --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+
+    .dnb-p {
+      max-width: 60ch; // to enhance readability;
+
+      transition: transform 400ms var(--easing-default) 40ms;
+      transform: translate3d(0, -0.5rem, 0);
+    }
+  }
+
+  // Defines the negative margin (extra border) to align on UX design.
+  --help-button-indent-width: var(--card-outline-width);
+
+  :not(.dnb-card) & .dnb-section {
+    // Because no outline, we need to stretch the content to the left and right,
+    // so it is aligned on how the Card is displayed.
+    margin-left: calc(var(--help-button-indent-width) * -1);
+    margin-right: calc(var(--help-button-indent-width) * -1);
+
+    // Use a border instead of the original outline,
+    // because is has no animation artifacts.
+    border: var(--help-button-indent-width) solid
+      var(--help-button-content-background);
+    border-top: none;
+    border-bottom: none;
+  }
+
+  &.dnb-height-animation--parallax .dnb-section .dnb-p {
+    transform: translate3d(0, 0, 0);
+  }
+}

package/es/components/help-button/style/dnb-help-button.css

@@ -1,9 +1,112 @@
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }

package/es/components/help-button/style/dnb-help-button.min.css

@@ -1 +1 @@
-.dnb-help-button .dnb-button__bounding{transform:scale(1.5)}
+.dnb-help-button.dnb-help-button__inline--open{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-help-button__inline svg{will-change:transform}.dnb-help-button__inline svg:nth-of-type(2){inset:0;margin:auto;opacity:0;position:absolute}.dnb-help-button__inline--open svg:first-of-type{opacity:0}.dnb-help-button__inline--open svg:nth-of-type(2){animation:rotate-icon-in .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:first-of-type{animation:animate-question .4s var(--easing-default) .2s forwards;opacity:0}.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2){animation:rotate-icon-out .4s var(--easing-default) forwards}.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg,html[data-visual-test] .dnb-help-button__inline svg{animation-duration:0ms}@keyframes rotate-icon-in{0%{opacity:0;transform:rotate(0deg)}to{opacity:1;transform:rotate(90deg)}}@keyframes rotate-icon-out{0%{opacity:1;transform:rotate(90deg)}30%{opacity:1}to{opacity:0;transform:rotate(0deg)}}@keyframes animate-question{0%{opacity:0;transform:rotate(10deg)}to{opacity:1;transform:rotate(0deg)}}.dnb-help-button__content{--help-button-indent-width:var(--card-outline-width)}.dnb-help-button__content .dnb-section{--background-color:var(--help-button-content-background);--rounded-corner--value:calc(var(--card-outline-width) + 0.5rem)}.dnb-help-button__content .dnb-section .dnb-p{max-width:60ch;transform:translate3d(0,-.5rem,0);transition:transform .4s var(--easing-default) 40ms}:not(.dnb-card) .dnb-help-button__content .dnb-section{border:var(--help-button-indent-width) solid var(--help-button-content-background);border-bottom:none;border-top:none;margin-left:calc(var(--help-button-indent-width)*-1);margin-right:calc(var(--help-button-indent-width)*-1)}.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p{transform:translateZ(0)}.dnb-help-button .dnb-button__bounding{transform:scale(1.5)}

package/es/components/help-button/style/dnb-help-button.scss

@@ -1,10 +1,11 @@
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
- *
  */
 
+@import '../../button/style/themes/button-mixins.scss';
+@import './dnb-help-button-inline.scss';
+
 .dnb-help-button {
   & .dnb-button__bounding {
     transform: scale(1.5);

package/es/components/help-button/style/themes/dnb-help-button-theme-sbanken.css

@@ -0,0 +1,7 @@
+/*
+ * Help button theme for Sbanken
+ *
+ */
+.dnb-help-button__content {
+  --help-button-content-background: var(--sb-color-green);
+}

package/es/components/help-button/style/themes/dnb-help-button-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-help-button__content{--help-button-content-background:var(--sb-color-green)}

package/es/components/help-button/style/themes/dnb-help-button-theme-sbanken.scss

@@ -0,0 +1,10 @@
+/*
+ * Help button theme for Sbanken
+ *
+ */
+
+.dnb-help-button {
+  &__content {
+    --help-button-content-background: var(--sb-color-green);
+  }
+}

package/es/components/help-button/style/themes/dnb-help-button-theme-ui.css

@@ -1,4 +1,7 @@
 /*
- * Np theme is provided
+ * Help button theme for UI
  *
- */
+ */
+.dnb-help-button__content {
+  --help-button-content-background: var(--color-lavender);
+}

package/es/components/help-button/style/themes/dnb-help-button-theme-ui.min.css

@@ -0,0 +1 @@
+.dnb-help-button__content{--help-button-content-background:var(--color-lavender)}

package/es/components/help-button/style/themes/dnb-help-button-theme-ui.scss

@@ -1,4 +1,10 @@
 /*
- * Np theme is provided
+ * Help button theme for UI
  *
  */
+
+.dnb-help-button {
+  &__content {
+    --help-button-content-background: var(--color-lavender);
+  }
+}

package/es/components/list-format/ListFormat.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
 import { InternalLocale } from '../../shared/Context';
+import { UlAllProps } from '../../elements/Ul';
+import { OlAllProps } from '../../elements/Ol';
 export type ListFormatProps = {
     /**
-     * Formatting options for the value.
+     * Formatting options for the value when variant is `text`.
      * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat
      */
     format?: Intl.ListFormatOptions;
     /**
-     * Defines if the value should be displayed in list format or regular text format on one line.
+     * Defines if the value should be displayed in list format (`ol`, `ul`) or regular text format in one line.
      * Default: `text`
      */
     variant?: 'ol' | 'ul' | 'text';
@@ -29,12 +31,12 @@ export type ListFormatProps = {
      */
     children?: React.ReactNode;
 };
-declare function ListFormat(localProps: ListFormatProps): string | any[] | import("react/jsx-runtime").JSX.Element;
+declare function ListFormat(localProps: Omit<UlAllProps, 'value'> & Omit<OlAllProps, 'value'> & ListFormatProps): string | any[] | import("react/jsx-runtime").JSX.Element;
 declare namespace ListFormat {
     var _supportsSpacingProps: boolean;
 }
 export declare function listFormat(list: Array<React.ReactNode>, { locale, format, }?: {
     locale?: InternalLocale;
-    format?: Intl.ListFormatOptions;
+    format?: ListFormatProps['format'];
 }): string | any[];
 export default ListFormat;

package/es/components/list-format/ListFormat.js

@@ -1,10 +1,14 @@
 "use client";
 
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["value", "format", "variant", "listType", "children", "className"];
 import React, { Fragment, useContext, useMemo } from 'react';
 import { LOCALE } from '../../shared/defaults';
 import { extendPropsWithContext } from '../../shared/component-helper';
 import SharedContext from '../../shared/Context';
 import { Li, Ol, Ul } from '../../elements';
+import classNames from 'classnames';
 function ListFormat(localProps) {
   const {
     locale,
@@ -12,12 +16,14 @@ function ListFormat(localProps) {
   } = useContext(SharedContext);
   const allProps = extendPropsWithContext(localProps, {}, ListFormat);
   const {
-    value,
-    format,
-    variant = 'text',
-    listType,
-    children
-  } = allProps;
+      value,
+      format,
+      variant = 'text',
+      listType,
+      children,
+      className
+    } = allProps,
+    props = _objectWithoutProperties(allProps, _excluded);
   const list = useMemo(() => {
     const isListVariant = variant !== 'text';
     const valueToUse = replaceRootFragment(children) || value;
@@ -38,10 +44,10 @@ function ListFormat(localProps) {
       });
     }
     const ListElement = variant.startsWith('ol') ? Ol : Ul;
-    return React.createElement(ListElement, {
+    return React.createElement(ListElement, _extends({
       type: listType !== 'unstyled' ? listType : null,
-      className: listType === 'unstyled' && 'dnb-unstyled-list'
-    }, list);
+      className: classNames('dnb-list-format', className, listType === 'unstyled' && 'dnb-unstyled-list')
+    }, props), list);
   }, [format, list, locale]);
   return result;
 }

package/es/components/list-format/ListFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListFormat.js","names":["React","Fragment","useContext","useMemo","LOCALE","extendPropsWithContext","SharedContext","Li","Ol","Ul","ListFormat","localProps","locale","allProps","value","format","variant","listType","children","list","isListVariant","valueToUse","replaceRootFragment","Array","isArray","Children","map","child","index","createElement","key","result","listFormat","ListElement","startsWith","type","className","style","filter","item","isNan","isNaN","undefined","buffer","Map","hasJSX","some","v","shadow","i","id","set","String","formatter","Intl","formattedList","split","element","get","error","join","_children$props","toArray","props","firstChild","count","_firstChild$props","_supportsSpacingProps"],"sources":["../../../../src/components/list-format/ListFormat.tsx"],"sourcesContent":["import React, { Fragment, useContext, useMemo } from 'react'\nimport { LOCALE } from '../../shared/defaults'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport SharedContext, { InternalLocale } from '../../shared/Context'\nimport { Li, Ol, Ul } from '../../elements'\n\nexport type ListFormatProps = {\n  /**\n   * Formatting options for the value.\n   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat\n   */\n  format?: Intl.ListFormatOptions\n  /**\n   * Defines if the value should be displayed in list format or regular text format on one line.\n   * Default: `text`\n   */\n  variant?: 'ol' | 'ul' | 'text'\n  /**\n   * Defines the type of list styling used for list variants. Used together with variant `ol` and `ul`.\n   * Variant `ol`: `a`, `A`, `i`, `I` and `1`.\n   * Variant `ul`: `circle`, `disc` and `square`.\n   * Default: `undefined`\n   */\n  listType?:\n    | 'a'\n    | 'A'\n    | 'i'\n    | 'I'\n    | '1'\n    | 'circle'\n    | 'disc'\n    | 'square'\n    | 'unstyled'\n    | undefined\n\n  /**\n   * The value to format as list.\n   * Default: null\n   */\n  value?: Array<React.ReactNode>\n\n  /**\n   * The children to format as list.\n   * Default: null\n   */\n  children?: React.ReactNode\n}\n\nfunction ListFormat(localProps: ListFormatProps) {\n  const { locale, ListFormat } = useContext(SharedContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(localProps, {}, ListFormat)\n  const { value, format, variant = 'text', listType, children } = allProps\n\n  const list = useMemo(() => {\n    const isListVariant = variant !== 'text'\n\n    const valueToUse = replaceRootFragment(children) || value\n\n    if (!Array.isArray(valueToUse)) {\n      return [valueToUse]\n    }\n\n    return isListVariant\n      ? React.Children.map(valueToUse, (child: React.ReactNode, index) => {\n          return <Li key={index}>{child}</Li>\n        })\n      : valueToUse\n  }, [value, children, variant, listType])\n\n  const result = useMemo(() => {\n    if (variant === 'text') {\n      return listFormat(list, { locale, format })\n    }\n\n    const ListElement = variant.startsWith('ol') ? Ol : Ul\n\n    return (\n      <ListElement\n        type={listType !== 'unstyled' ? listType : null}\n        className={listType === 'unstyled' && 'dnb-unstyled-list'}\n      >\n        {list}\n      </ListElement>\n    )\n  }, [format, list, locale])\n\n  return result\n}\n\nexport function listFormat(\n  list: Array<React.ReactNode>,\n  {\n    locale = LOCALE,\n    format = {\n      style: 'long',\n      type: 'conjunction',\n    },\n  }: {\n    locale?: InternalLocale\n    format?: Intl.ListFormatOptions\n  } = {}\n) {\n  if (!Array.isArray(list)) {\n    return list\n  }\n\n  list = replaceRootFragment(list).filter(function (item) {\n    const isNan = typeof item === 'number' && isNaN(item)\n    return item !== undefined && item !== false && item !== null && !isNan\n  })\n\n  const buffer = new Map()\n  const hasJSX = list.some((v) => typeof v === 'object')\n  const shadow = list.map((v, i) => {\n    if (hasJSX) {\n      const id = `id-${i}`\n      buffer.set(id, v)\n      return `{${id}}`\n    }\n\n    return String(v)\n  })\n\n  try {\n    const formatter = new Intl.ListFormat(locale, format)\n    const formattedList = formatter.format(shadow)\n\n    if (hasJSX) {\n      return formattedList.split(/\\{(id-[0-9]+)\\}/).map((v, i) => {\n        if (v.startsWith('id-')) {\n          const element = buffer.get(v)\n\n          return element.key\n            ? element\n            : // Support lists without a key\n              React.createElement(React.Fragment, { key: i }, element)\n        }\n\n        return v\n      })\n    }\n\n    return formattedList\n  } catch (error) {\n    if (hasJSX) {\n      return list\n    }\n\n    return list.join(', ')\n  }\n}\n\nfunction replaceRootFragment(children) {\n  if (children?.type === Fragment) {\n    return React.Children.toArray(children?.props?.children)\n  }\n  if (Array.isArray(children)) {\n    const firstChild = children[0]\n    if (\n      React.Children.count(children) === 1 &&\n      firstChild?.type === Fragment\n    ) {\n      return React.Children.toArray(firstChild?.props?.children)\n    }\n    return children\n  }\n\n  return children\n}\n\nListFormat._supportsSpacingProps = true\n\nexport default ListFormat\n"],"mappings":"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"}
+{"version":3,"file":"ListFormat.js","names":["React","Fragment","useContext","useMemo","LOCALE","extendPropsWithContext","SharedContext","Li","Ol","Ul","classNames","ListFormat","localProps","locale","allProps","value","format","variant","listType","children","className","props","_objectWithoutProperties","_excluded","list","isListVariant","valueToUse","replaceRootFragment","Array","isArray","Children","map","child","index","createElement","key","result","listFormat","ListElement","startsWith","_extends","type","style","filter","item","isNan","isNaN","undefined","buffer","Map","hasJSX","some","v","shadow","i","id","set","String","formatter","Intl","formattedList","split","element","get","error","join","_children$props","toArray","firstChild","count","_firstChild$props","_supportsSpacingProps"],"sources":["../../../../src/components/list-format/ListFormat.tsx"],"sourcesContent":["import React, { Fragment, useContext, useMemo } from 'react'\nimport { LOCALE } from '../../shared/defaults'\nimport { extendPropsWithContext } from '../../shared/component-helper'\nimport SharedContext, { InternalLocale } from '../../shared/Context'\nimport { Li, Ol, Ul } from '../../elements'\nimport { UlAllProps } from '../../elements/Ul'\nimport { OlAllProps } from '../../elements/Ol'\nimport classNames from 'classnames'\n\nexport type ListFormatProps = {\n  /**\n   * Formatting options for the value when variant is `text`.\n   * See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat\n   */\n  format?: Intl.ListFormatOptions\n  /**\n   * Defines if the value should be displayed in list format (`ol`, `ul`) or regular text format in one line.\n   * Default: `text`\n   */\n  variant?: 'ol' | 'ul' | 'text'\n  /**\n   * Defines the type of list styling used for list variants. Used together with variant `ol` and `ul`.\n   * Variant `ol`: `a`, `A`, `i`, `I` and `1`.\n   * Variant `ul`: `circle`, `disc` and `square`.\n   * Default: `undefined`\n   */\n  listType?:\n    | 'a'\n    | 'A'\n    | 'i'\n    | 'I'\n    | '1'\n    | 'circle'\n    | 'disc'\n    | 'square'\n    | 'unstyled'\n    | undefined\n\n  /**\n   * The value to format as list.\n   * Default: null\n   */\n  value?: Array<React.ReactNode>\n\n  /**\n   * The children to format as list.\n   * Default: null\n   */\n  children?: React.ReactNode\n}\n\nfunction ListFormat(\n  localProps: Omit<UlAllProps, 'value'> &\n    Omit<OlAllProps, 'value'> &\n    ListFormatProps\n) {\n  const { locale, ListFormat } = useContext(SharedContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(localProps, {}, ListFormat)\n  const {\n    value,\n    format,\n    variant = 'text',\n    listType,\n    children,\n    className,\n    ...props\n  } = allProps\n\n  const list = useMemo(() => {\n    const isListVariant = variant !== 'text'\n\n    const valueToUse = replaceRootFragment(children) || value\n\n    if (!Array.isArray(valueToUse)) {\n      return [valueToUse]\n    }\n\n    return isListVariant\n      ? React.Children.map(valueToUse, (child: React.ReactNode, index) => {\n          return <Li key={index}>{child}</Li>\n        })\n      : valueToUse\n  }, [value, children, variant, listType])\n\n  const result = useMemo(() => {\n    if (variant === 'text') {\n      return listFormat(list, { locale, format })\n    }\n\n    const ListElement = variant.startsWith('ol') ? Ol : Ul\n\n    return (\n      <ListElement\n        type={listType !== 'unstyled' ? listType : null}\n        className={classNames(\n          'dnb-list-format',\n          listType === 'unstyled' && 'dnb-unstyled-list',\n          className\n        )}\n        {...props}\n      >\n        {list}\n      </ListElement>\n    )\n  }, [format, list, locale])\n\n  return result\n}\n\nexport function listFormat(\n  list: Array<React.ReactNode>,\n  {\n    locale = LOCALE,\n    format = {\n      style: 'long',\n      type: 'conjunction',\n    },\n  }: {\n    locale?: InternalLocale\n    format?: ListFormatProps['format']\n  } = {}\n) {\n  if (!Array.isArray(list)) {\n    return list\n  }\n\n  list = replaceRootFragment(list).filter(function (item) {\n    const isNan = typeof item === 'number' && isNaN(item)\n    return item !== undefined && item !== false && item !== null && !isNan\n  })\n\n  const buffer = new Map()\n  const hasJSX = list.some((v) => typeof v === 'object')\n  const shadow = list.map((v, i) => {\n    if (hasJSX) {\n      const id = `id-${i}`\n      buffer.set(id, v)\n      return `{${id}}`\n    }\n\n    return String(v)\n  })\n\n  try {\n    const formatter = new Intl.ListFormat(locale, format)\n    const formattedList = formatter.format(shadow)\n\n    if (hasJSX) {\n      return formattedList.split(/\\{(id-[0-9]+)\\}/).map((v, i) => {\n        if (v.startsWith('id-')) {\n          const element = buffer.get(v)\n\n          return element.key\n            ? element\n            : // Support lists without a key\n              React.createElement(React.Fragment, { key: i }, element)\n        }\n\n        return v\n      })\n    }\n\n    return formattedList\n  } catch (error) {\n    if (hasJSX) {\n      return list\n    }\n\n    return list.join(', ')\n  }\n}\n\nfunction replaceRootFragment(children) {\n  if (children?.type === Fragment) {\n    return React.Children.toArray(children?.props?.children)\n  }\n  if (Array.isArray(children)) {\n    const firstChild = children[0]\n    if (\n      React.Children.count(children) === 1 &&\n      firstChild?.type === Fragment\n    ) {\n      return React.Children.toArray(firstChild?.props?.children)\n    }\n    return children\n  }\n\n  return children\n}\n\nListFormat._supportsSpacingProps = true\n\nexport default ListFormat\n"],"mappings":"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"}

package/es/components/list-format/ListFormatDocs.js

@@ -1,4 +1,15 @@
-export const ListFormatProperties = {
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { UlProperties } from './../../elements/lists/UlDocs';
+import { OlProperties } from './../../elements/lists/OlDocs';
+const ListProperties = _objectSpread(_objectSpread({}, UlProperties), OlProperties);
+const {
+    children
+  } = ListProperties,
+  ListPropertiesWithoutChildren = _objectWithoutProperties(ListProperties, ["children"]);
+export const ListFormatProperties = _objectSpread({
   value: {
     doc: 'The value to format. Can be given as `children` instead.',
     type: ['Array<React.ReactNode>'],
@@ -10,12 +21,12 @@ export const ListFormatProperties = {
     status: 'optional'
   },
   format: {
-    doc: 'Formatting options for the value. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',
+    doc: 'Formatting options for the value when variant is `text`. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',
     type: 'Intl.ListFormatOptions',
     status: 'optional'
   },
   variant: {
-    doc: 'Defines if the value should be displayed in list format, or regular text format on one line. Defaults to `text`',
+    doc: 'Defines if the value should be displayed in list format (`ol`, `ul`) or regular text format in one line. Defaults to `text`',
     type: ['ol', 'ul', 'text'],
     status: 'optional'
   },
@@ -24,5 +35,5 @@ export const ListFormatProperties = {
     type: ['a', 'A', 'i', 'I', '1', 'circle', 'disc', 'square', 'unstyled', 'undefined'],
     status: 'optional'
   }
-};
+}, ListPropertiesWithoutChildren);
 //# sourceMappingURL=ListFormatDocs.js.map

package/es/components/list-format/ListFormatDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListFormatDocs.js","names":["ListFormatProperties","value","doc","type","status","children","format","variant","listType"],"sources":["../../../../src/components/list-format/ListFormatDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const ListFormatProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The value to format. Can be given as `children` instead.',\n    type: ['Array<React.ReactNode>'],\n    status: 'optional',\n  },\n  children: {\n    doc: 'The children to format.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  format: {\n    doc: 'Formatting options for the value. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',\n    type: 'Intl.ListFormatOptions',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines if the value should be displayed in list format, or regular text format on one line. Defaults to `text`',\n    type: ['ol', 'ul', 'text'],\n    status: 'optional',\n  },\n  listType: {\n    doc: 'Defines the type of list styling used for list variants. Used together with variant `ol` and `ul`. Variant `ol`: `a`, `A`, `i`, `I` and `1`. Variant `ul`: `circle`, `disc` and `square`. Defaults to `undefined`',\n    type: [\n      'a',\n      'A',\n      'i',\n      'I',\n      '1',\n      'circle',\n      'disc',\n      'square',\n      'unstyled',\n      'undefined',\n    ],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,KAAK,EAAE;IACLC,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,wBAAwB,CAAC;IAChCC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,yLAAyL;IAC9LC,IAAI,EAAE,wBAAwB;IAC9BC,MAAM,EAAE;EACV,CAAC;EACDG,OAAO,EAAE;IACPL,GAAG,EAAE,iHAAiH;IACtHC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDI,QAAQ,EAAE;IACRN,GAAG,EAAE,mNAAmN;IACxNC,IAAI,EAAE,CACJ,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,CACZ;IACDC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ListFormatDocs.js","names":["UlProperties","OlProperties","ListProperties","_objectSpread","children","ListPropertiesWithoutChildren","_objectWithoutProperties","ListFormatProperties","value","doc","type","status","format","variant","listType"],"sources":["../../../../src/components/list-format/ListFormatDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\nimport { UlProperties } from './../../elements/lists/UlDocs'\nimport { OlProperties } from './../../elements/lists/OlDocs'\n\nconst ListProperties = { ...UlProperties, ...OlProperties }\nconst { children, ...ListPropertiesWithoutChildren } = ListProperties\n\nexport const ListFormatProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The value to format. Can be given as `children` instead.',\n    type: ['Array<React.ReactNode>'],\n    status: 'optional',\n  },\n  children: {\n    doc: 'The children to format.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  format: {\n    doc: 'Formatting options for the value when variant is `text`. See the [Intl.ListFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat) documentation.',\n    type: 'Intl.ListFormatOptions',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'Defines if the value should be displayed in list format (`ol`, `ul`) or regular text format in one line. Defaults to `text`',\n    type: ['ol', 'ul', 'text'],\n    status: 'optional',\n  },\n  listType: {\n    doc: 'Defines the type of list styling used for list variants. Used together with variant `ol` and `ul`. Variant `ol`: `a`, `A`, `i`, `I` and `1`. Variant `ul`: `circle`, `disc` and `square`. Defaults to `undefined`',\n    type: [\n      'a',\n      'A',\n      'i',\n      'I',\n      '1',\n      'circle',\n      'disc',\n      'square',\n      'unstyled',\n      'undefined',\n    ],\n    status: 'optional',\n  },\n  ...ListPropertiesWithoutChildren,\n}\n"],"mappings":";;;;AACA,SAASA,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,YAAY,QAAQ,+BAA+B;AAE5D,MAAMC,cAAc,GAAAC,aAAA,CAAAA,aAAA,KAAQH,YAAY,GAAKC,YAAY,CAAE;AAC3D,MAAM;IAAEG;EAA2C,CAAC,GAAGF,cAAc;EAAhDG,6BAA6B,GAAAC,wBAAA,CAAKJ,cAAc;AAErE,OAAO,MAAMK,oBAA0C,GAAAJ,aAAA;EACrDK,KAAK,EAAE;IACLC,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,wBAAwB,CAAC;IAChCC,MAAM,EAAE;EACV,CAAC;EACDP,QAAQ,EAAE;IACRK,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE;EACV,CAAC;EACDC,MAAM,EAAE;IACNH,GAAG,EAAE,gNAAgN;IACrNC,IAAI,EAAE,wBAAwB;IAC9BC,MAAM,EAAE;EACV,CAAC;EACDE,OAAO,EAAE;IACPJ,GAAG,EAAE,6HAA6H;IAClIC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,mNAAmN;IACxNC,IAAI,EAAE,CACJ,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,CACZ;IACDC,MAAM,EAAE;EACV;AAAC,GACEN,6BAA6B,CACjC"}

package/es/components/modal/ModalContent.js

@@ -202,7 +202,7 @@ export default class ModalContent extends React.PureComponent {
       clearTimeout(this._focusTimeout);
       this._focusTimeout = setTimeout(() => {
         try {
-          var _focusElement, _focusElement$focus, _focusElement2, _focusElement2$select;
+          var _focusElement, _focusElement$focus, _focusElement2, _focusElement2$select, _elem$parentElement, _elem$parentElement$q, _elem$parentElement2, _elem$parentElement2$;
           let focusElement = elem;
           if (typeof focus_selector === 'string') {
             focusElement = elem.querySelector(focus_selector);
@@ -210,7 +210,9 @@ export default class ModalContent extends React.PureComponent {
           (_focusElement = focusElement) === null || _focusElement === void 0 ? void 0 : (_focusElement$focus = _focusElement.focus) === null || _focusElement$focus === void 0 ? void 0 : _focusElement$focus.call(_focusElement);
           (_focusElement2 = focusElement) === null || _focusElement2 === void 0 ? void 0 : (_focusElement2$select = _focusElement2.select) === null || _focusElement2$select === void 0 ? void 0 : _focusElement2$select.call(_focusElement2);
           const noH1Elem = elem.querySelector('h1, h2, h3');
-          if ((noH1Elem === null || noH1Elem === void 0 ? void 0 : noH1Elem.tagName) !== 'H1') {
+          const noH1ElemInDrawerHeader = (_elem$parentElement = elem.parentElement) === null || _elem$parentElement === void 0 ? void 0 : (_elem$parentElement$q = _elem$parentElement.querySelector('.dnb-drawer__header')) === null || _elem$parentElement$q === void 0 ? void 0 : _elem$parentElement$q.querySelector('h1, h2, h3');
+          const noH1ElemInDialogHeader = (_elem$parentElement2 = elem.parentElement) === null || _elem$parentElement2 === void 0 ? void 0 : (_elem$parentElement2$ = _elem$parentElement2.querySelector('.dnb-dialog__header')) === null || _elem$parentElement2$ === void 0 ? void 0 : _elem$parentElement2$.querySelector('h1, h2, h3');
+          if ((noH1Elem === null || noH1Elem === void 0 ? void 0 : noH1Elem.tagName) !== 'H1' && (noH1ElemInDrawerHeader === null || noH1ElemInDrawerHeader === void 0 ? void 0 : noH1ElemInDrawerHeader.tagName) !== 'H1' && (noH1ElemInDialogHeader === null || noH1ElemInDialogHeader === void 0 ? void 0 : noH1ElemInDialogHeader.tagName) !== 'H1') {
             warn('A Dialog or Drawer needs a h1 as its first element!');
           }
         } catch (e) {