@dnb/eufemia 10.75.3 → 10.76.0

package/es/components/breadcrumb/Breadcrumb.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "noAnimation", "data", "href"];
+const _excluded = ["className", "skeleton", "children", "variant", "onClick", "navText", "goBackText", "homeText", "backToText", "styleType", "collapsedStyleType", "isCollapsed", "spacing", "noAnimation", "data", "href", "onToggle"];
 import React, { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import classnames from 'classnames';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
@@ -47,7 +47,8 @@ const Breadcrumb = localProps => {
       spacing,
       noAnimation,
       data,
-      href
+      href,
+      onToggle
     } = allProps,
     props = _objectWithoutProperties(allProps, _excluded);
   const skeletonClasses = createSkeletonClass('font', skeleton, context);
@@ -65,14 +66,18 @@ const Breadcrumb = localProps => {
   }, [overrideIsCollapsed]);
   useEffect(() => {
     if (isLarge && overrideIsCollapsed !== false) {
+      if (isCollapsedRef.current === false) {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
+      }
       isCollapsedRef.current = true;
       forceUpdate();
     }
-  }, [isLarge, overrideIsCollapsed]);
+  }, [isLarge, overrideIsCollapsed, onToggle]);
   const onClickHandler = useCallback(() => {
     isCollapsedRef.current = !isCollapsedRef.current;
     forceUpdate();
-  }, []);
+    onToggle === null || onToggle === void 0 ? void 0 : onToggle(isCollapsedRef.current);
+  }, [onToggle]);
   const currentVariant = useMemo(() => {
     if (!variant) {
       if (items || data) {

package/es/components/breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["React","useCallback","useEffect","useMemo","useReducer","useRef","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","useTheme","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","_useTheme","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","forceUpdate","isCollapsedRef","isLarge","current","onClickHandler","currentVariant","innerSpace","overrideSbankenSectionColor","isSbanken","createElement","_extends","style_type","text","icon","icon_position","Fragment","undefined","backgroundColor","Item","_supportsSpacingProps"],"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  SectionVariants,\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, useTheme } 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 variants\n   * Default: info\n   */\n  collapsedStyleType?: SectionVariants\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  const overrideSbankenSectionColor =\n    useTheme()?.isSbanken && collapsedStyleType === 'info'\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={\n            overrideSbankenSectionColor ? undefined : collapsedStyleType\n          }\n          className=\"dnb-breadcrumb__collapse\"\n          backgroundColor={\n            overrideSbankenSectionColor\n              ? 'var(--sb-color-gray-light-2)'\n              : undefined\n          }\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":";;;;;AAAA,OAAOA,KAAK,IACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,MAAM,QACD,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AAGnC,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,OAAOC,OAAO,MAIP,oBAAoB;AAC3B,OAAOC,MAAM,MAAM,kBAAkB;AAGrC,OAAOC,OAAO,MAAM,sBAAsB;AAK1C,OAAOC,cAAc,MAA+B,kBAAkB;AACtE,SACEC,kBAAkB,EAClBC,MAAM,EACNC,qBAAqB,EACrBC,sBAAsB,QACjB,+BAA+B;AACtC,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,cAAc;AAsGjD,OAAO,MAAMC,YAAY,GAAG;EAC1BC,QAAQ,EAAE,KAAK;EACfC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,MAAM;EAClBC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,YAAY;EACxBC,WAAW,EAAE,IAAI;EACjBC,SAAS,EAAE,aAAa;EACxBC,kBAAkB,EAAE,MAAM;EAC1BC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,UAAU,GAAIC,UAA0C,IAAK;EAAA,IAAAC,oBAAA,EAAAC,SAAA;EAEjE,MAAMC,OAAO,GAAGlC,KAAK,CAACmC,UAAU,CAACxB,OAAO,CAAC;EAGzC,MAAMyB,QAAQ,GAAGpB,sBAAsB,CACrCe,UAAU,EACVX,YAAY,EACZc,OAAO,aAAPA,OAAO,wBAAAF,oBAAA,GAAPE,OAAO,CAAEG,WAAW,cAAAL,oBAAA,uBAApBA,oBAAA,CAAsBF,UAAU,EAChCI,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEJ,UAAU,EACnB;IAAET,QAAQ,EAAEa,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEb;EAAS,CAChC,CAAC;EAED,MAAM;MACJiB,SAAS;MACTjB,QAAQ;MACRkB,QAAQ,EAAEC,KAAK;MACfC,OAAO;MACPC,OAAO;MACPpB,OAAO;MACPC,UAAU;MACVC,QAAQ;MACRC,UAAU;MACVE,SAAS;MACTC,kBAAkB;MAClBF,WAAW,EAAEiB,mBAAmB;MAChCd,OAAO;MACPe,WAAW;MACXC,IAAI;MACJC;IAEF,CAAC,GAAGV,QAAQ;IADPW,KAAK,GAAAC,wBAAA,CACNZ,QAAQ,EAAAa,SAAA;EACZ,MAAMC,eAAe,GAAG3C,mBAAmB,CAAC,MAAM,EAAEc,QAAQ,EAAEa,OAAO,CAAC;EACtE,MAAMiB,cAAc,GAAG3C,oBAAoB,CAACuC,KAAK,CAAC;EAElD,MAAM,GAAGK,WAAW,CAAC,GAAGhD,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAElD,MAAMiD,cAAc,GAAGhD,MAAM,CAACsC,mBAAmB,CAAC;EAElD,MAAM;IAAEW;EAAQ,CAAC,GAAGpC,QAAQ,CAAC,CAAC;EAE9BhB,SAAS,CAAC,MAAM;IACd,IAAIyC,mBAAmB,KAAKU,cAAc,CAACE,OAAO,EAAE;MAClDF,cAAc,CAACE,OAAO,GAAGZ,mBAAmB;MAC5CS,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACT,mBAAmB,CAAC,CAAC;EAGzBzC,SAAS,CAAC,MAAM;IACd,IAAIoD,OAAO,IAAIX,mBAAmB,KAAK,KAAK,EAAE;MAC5CU,cAAc,CAACE,OAAO,GAAG,IAAI;MAC7BH,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACE,OAAO,EAAEX,mBAAmB,CAAC,CAAC;EAElC,MAAMa,cAAc,GAAGvD,WAAW,CAAC,MAAM;IACvCoD,cAAc,CAACE,OAAO,GAAG,CAACF,cAAc,CAACE,OAAO;IAChDH,WAAW,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,cAAc,GAAGtD,OAAO,CAAC,MAAM;IACnC,IAAI,CAACsC,OAAO,EAAE;MACZ,IAAID,KAAK,IAAIK,IAAI,EAAE;QACjB,OAAO,YAAY;MACrB,CAAC,MAAM;QACL,OAAO,QAAQ;MACjB;IACF;IAEA,OAAOJ,OAAO;EAChB,CAAC,EAAE,CAACI,IAAI,EAAEL,KAAK,EAAEC,OAAO,CAAC,CAAC;EAE1B1B,qBAAqB,CAACqB,QAAQ,EAAEW,KAAK,CAAC;EAEtC,MAAMW,UAAU,GAAG5C,MAAM,CAACe,OAAO,CAAC,GAAG,OAAO,GAAGA,OAAO;EAEtD,MAAM8B,2BAA2B,GAC/B,EAAA1B,SAAA,GAAAd,QAAQ,CAAC,CAAC,cAAAc,SAAA,uBAAVA,SAAA,CAAY2B,SAAS,KAAIhC,kBAAkB,KAAK,MAAM;EACxD,OACE5B,KAAA,CAAA6D,aAAA,QAAAC,QAAA;IACE,cAAYjD,kBAAkB,CAACS,OAAO,CAAE;IACxCgB,SAAS,EAAEhC,UAAU,2CAEQmD,cAAc,IACzCP,eAAe,EACfC,cAAc,EACdb,SACF;EAAE,GACES,KAAK,GAET/C,KAAA,CAAA6D,aAAA,CAACpD,OAAO;IACN6B,SAAS,EAAC,qBAAqB;IAC/ByB,UAAU,EAAEpC,SAAS,IAAI,aAAc;IACvC+B,UAAU,EAAEA;EAAW,GAEtBD,cAAc,KAAK,QAAQ,GAC1BzD,KAAA,CAAA6D,aAAA,CAACnD,MAAM;IACLsD,IAAI,EAAEzC,UAAW;IACjBkB,OAAO,EAAC,UAAU;IAClBwB,IAAI,EAAC,cAAc;IACnBC,aAAa,EAAC,MAAM;IACpBxB,OAAO,EAAEA,OAAQ;IACjBI,IAAI,EAAEA;EAAK,CACZ,CAAC,GAEF9C,KAAA,CAAA6D,aAAA,CAAA7D,KAAA,CAAAmE,QAAA,QACGV,cAAc,KAAK,UAAU,IAC5BzD,KAAA,CAAA6D,aAAA,CAACnD,MAAM;IACL4B,SAAS,EAAC,wBAAwB;IAClC0B,IAAI,EAAEvC,UAAW;IACjBgB,OAAO,EAAC,UAAU;IAClBwB,IAAI,EAAC,cAAc;IACnBC,aAAa,EAAC,MAAM;IACpBxB,OAAO,EAAEA,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIc,cAAe;IACnC,iBAAe,CAACH,cAAc,CAACE;EAAQ,CACxC,CACF,EAEAE,cAAc,KAAK,UAAU,IAC5BzD,KAAA,CAAA6D,aAAA,CAAC5C,kBAAkB;IACjB4B,IAAI,EAAEA,IAAK;IACXL,KAAK,EAAEA,KAAM;IACbd,WAAW,EAAE,KAAM;IACnBkB,WAAW,EAAEA;EAAY,CAC1B,CAEH,CAEG,CAAC,EAET,CAACa,cAAc,KAAK,UAAU,IAC7BA,cAAc,KAAK,YAAY,KAC/BzD,KAAA,CAAA6D,aAAA,CAACpD,OAAO;IACNgC,OAAO,EACLkB,2BAA2B,GAAGS,SAAS,GAAGxC,kBAC3C;IACDU,SAAS,EAAC,0BAA0B;IACpC+B,eAAe,EACbV,2BAA2B,GACvB,8BAA8B,GAC9BS;EACL,GAEDpE,KAAA,CAAA6D,aAAA,CAAC5C,kBAAkB;IACjB4B,IAAI,EAAEA,IAAK;IACXL,KAAK,EAAEA,KAAM;IACbd,WAAW,EAAE2B,cAAc,CAACE,OAAQ;IACpCX,WAAW,EAAEA;EAAY,CAC1B,CACM,CAER,CAAC;AAEV,CAAC;AAEDd,UAAU,CAACwC,IAAI,GAAG1D,cAAc;AAChCkB,UAAU,CAACyC,qBAAqB,GAAG,IAAI;AAEvC,SAAS3D,cAAc;AACvB,eAAekB,UAAU","ignoreList":[]}
+{"version":3,"file":"Breadcrumb.js","names":["React","useCallback","useEffect","useMemo","useReducer","useRef","classnames","createSkeletonClass","createSpacingClasses","Section","Button","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","useMedia","useTheme","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","_useTheme","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","onToggle","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","forceUpdate","isCollapsedRef","isLarge","current","onClickHandler","currentVariant","innerSpace","overrideSbankenSectionColor","isSbanken","createElement","_extends","style_type","text","icon","icon_position","Fragment","undefined","backgroundColor","Item","_supportsSpacingProps"],"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  SectionVariants,\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, useTheme } 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 variants\n   * Default: info\n   */\n  collapsedStyleType?: SectionVariants\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   * Will be called when breadcrumb expands or collapses.\n   */\n  onToggle?: (isCollapsed: boolean) => void\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    onToggle,\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      // Call onToggle if breadcrumbs is expanded and is going to collapse due to large screen size.\n      if (isCollapsedRef.current === false) {\n        onToggle?.(true)\n      }\n\n      isCollapsedRef.current = true\n\n      forceUpdate()\n    }\n  }, [isLarge, overrideIsCollapsed, onToggle])\n\n  const onClickHandler = useCallback(() => {\n    isCollapsedRef.current = !isCollapsedRef.current\n    forceUpdate()\n\n    onToggle?.(isCollapsedRef.current)\n  }, [onToggle])\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  const overrideSbankenSectionColor =\n    useTheme()?.isSbanken && collapsedStyleType === 'info'\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={\n            overrideSbankenSectionColor ? undefined : collapsedStyleType\n          }\n          className=\"dnb-breadcrumb__collapse\"\n          backgroundColor={\n            overrideSbankenSectionColor\n              ? 'var(--sb-color-gray-light-2)'\n              : undefined\n          }\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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","ignoreList":[]}

package/es/components/breadcrumb/BreadcrumbDocs.js

@@ -80,6 +80,11 @@ export const BreadcrumbEvents = {
     doc: 'will be called by user click interaction, to handle click event on "Back" for variant `single` and "Back to..." for variant `collapse`.',
     type: 'function',
     status: 'optional'
+  },
+  onToggle: {
+    doc: 'Will be called when breadcrumb expands or collapses.',
+    type: 'function',
+    status: 'optional'
   }
 };
 export const BreadcrumbItemProperties = {

package/es/components/breadcrumb/BreadcrumbDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbDocs.js","names":["BreadcrumbProperties","data","doc","type","status","children","variant","href","navText","goBackText","homeText","backToText","styleType","collapsedStyleType","className","isCollapsed","spacing","skeleton","BreadcrumbEvents","onClick","BreadcrumbItemProperties","text","icon","BreadcrumbItemEvents"],"sources":["../../../../src/components/breadcrumb/BreadcrumbDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const BreadcrumbProperties: PropertiesTableProps = {\n  data: {\n    doc: 'List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).',\n    type: 'Array<BreadcrumbItemProps>',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: \"Defaults to 'responsive' or 'single' depending on content. Options: `responsive` | `single` | `multiple` | `collapse` .\",\n    type: ['responsive', 'single', 'multiple', 'collapse'],\n    status: 'optional',\n  },\n  href: {\n    doc: 'For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.',\n    type: 'string',\n    status: 'optional',\n  },\n  navText: {\n    doc: 'Every `<nav>` on a page needs an unique aria-label text.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  goBackText: {\n    doc: \"Override with a custom 'Back' text for variant `single` (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  homeText: {\n    doc: \"Override with a custom 'Home' text (Not recommended)\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  backToText: {\n    doc: \"Override with a custom 'Back to...' text (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  styleType: {\n    doc: 'Use one of the Section component style types (style_type). Defaults to `transparent`.',\n    type: 'Various',\n    status: 'optional',\n  },\n  collapsedStyleType: {\n    doc: 'Use one of the Section component variants. Defaults to `info`.',\n    type: ['error', 'info', 'warning', 'success'],\n    status: 'optional',\n  },\n  className: {\n    doc: 'Custom className for the component root.',\n    type: 'string',\n    status: 'optional',\n  },\n  isCollapsed: {\n    doc: 'For variant `collapse`, override isCollapsed for the collapsed content by updating this value using the provided property `onClick`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Include spacing properties from [Section](/uilib/components/section/properties) in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.',\n    type: 'Various',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction, to handle click event on \"Back\" for variant `single` and \"Back to...\" for variant `collapse`.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbItemProperties: PropertiesTableProps = {\n  text: {\n    doc: 'Text displaying inside Breadcrumb item.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'The component variant. Options: `home` | `previous` | `current`.',\n    type: ['home', 'previous', 'current'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'Override icon displaying on the left side (Not recommended). Default: `chevron_left`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  href: {\n    doc: 'Set what happens when the user clicks on the item. Also see `onClick` event.',\n    type: 'string',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbItemEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BreadcrumbDocs.js","names":["BreadcrumbProperties","data","doc","type","status","children","variant","href","navText","goBackText","homeText","backToText","styleType","collapsedStyleType","className","isCollapsed","spacing","skeleton","BreadcrumbEvents","onClick","onToggle","BreadcrumbItemProperties","text","icon","BreadcrumbItemEvents"],"sources":["../../../../src/components/breadcrumb/BreadcrumbDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const BreadcrumbProperties: PropertiesTableProps = {\n  data: {\n    doc: 'List of pages to render as breadcrumbitems. Each object in data can include all properties from [BreadcrumbItem properties](/uilib/components/breadcrumb/properties#breadcrumbitem-properties).',\n    type: 'Array<BreadcrumbItemProps>',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Content of the component. Can be used instead of property `data`, by adding Breadcrumbitem children `<Breadcrumb.Item {...props} />`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: \"Defaults to 'responsive' or 'single' depending on content. Options: `responsive` | `single` | `multiple` | `collapse` .\",\n    type: ['responsive', 'single', 'multiple', 'collapse'],\n    status: 'optional',\n  },\n  href: {\n    doc: 'For variant `single`, set `href` for button click. Can be used instead of event/property `onClick`.',\n    type: 'string',\n    status: 'optional',\n  },\n  navText: {\n    doc: 'Every `<nav>` on a page needs an unique aria-label text.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  goBackText: {\n    doc: \"Override with a custom 'Back' text for variant `single` (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  homeText: {\n    doc: \"Override with a custom 'Home' text (Not recommended)\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  backToText: {\n    doc: \"Override with a custom 'Back to...' text (Not recommended).\",\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  styleType: {\n    doc: 'Use one of the Section component style types (style_type). Defaults to `transparent`.',\n    type: 'Various',\n    status: 'optional',\n  },\n  collapsedStyleType: {\n    doc: 'Use one of the Section component variants. Defaults to `info`.',\n    type: ['error', 'info', 'warning', 'success'],\n    status: 'optional',\n  },\n  className: {\n    doc: 'Custom className for the component root.',\n    type: 'string',\n    status: 'optional',\n  },\n  isCollapsed: {\n    doc: 'For variant `collapse`, override isCollapsed for the collapsed content by updating this value using the provided property `onClick`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  spacing: {\n    doc: 'Include spacing properties from [Section](/uilib/components/section/properties) in breadcrumb. If only `true` is given, the spacing will be `small`. Defaults to `false`.',\n    type: 'Various',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction, to handle click event on \"Back\" for variant `single` and \"Back to...\" for variant `collapse`.',\n    type: 'function',\n    status: 'optional',\n  },\n  onToggle: {\n    doc: 'Will be called when breadcrumb expands or collapses.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbItemProperties: PropertiesTableProps = {\n  text: {\n    doc: 'Text displaying inside Breadcrumb item.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  variant: {\n    doc: 'The component variant. Options: `home` | `previous` | `current`.',\n    type: ['home', 'previous', 'current'],\n    status: 'optional',\n  },\n  icon: {\n    doc: 'Override icon displaying on the left side (Not recommended). Default: `chevron_left`.',\n    type: 'React.ReactNode',\n    status: 'optional',\n  },\n  href: {\n    doc: 'Set what happens when the user clicks on the item. Also see `onClick` event.',\n    type: 'string',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n}\n\nexport const BreadcrumbItemEvents: PropertiesTableProps = {\n  onClick: {\n    doc: 'will be called by user click interaction.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"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","ignoreList":[]}

package/es/components/card/Card.d.ts

@@ -22,5 +22,9 @@ export type Props = {
 declare function Card(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Card {
     var _supportsSpacingProps: boolean;
+    var Provider: ({ disableCardBreakout, children, }: {
+        disableCardBreakout?: boolean;
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
 }
 export default Card;

package/es/components/card/Card.js

@@ -73,10 +73,8 @@ function Card(props) {
   return React.createElement(Flex.Item, _extends({
     alignSelf: alignSelf,
     element: "section"
-  }, params), React.createElement(CardContext.Provider, {
-    value: {
-      isNested: true
-    }
+  }, params), React.createElement(Card.Provider, {
+    disableCardBreakout: true
   }, React.createElement(Flex.Container, {
     direction: direction !== null && direction !== void 0 ? direction : 'vertical',
     divider: divider,
@@ -91,5 +89,15 @@ function Card(props) {
   }, title), children)));
 }
 Card._supportsSpacingProps = true;
+Card.Provider = function CardProvider({
+  disableCardBreakout,
+  children
+}) {
+  const context = useContext(CardContext) || {};
+  context.isNested = disableCardBreakout !== null && disableCardBreakout !== void 0 ? disableCardBreakout : context === null || context === void 0 ? void 0 : context.isNested;
+  return React.createElement(CardContext.Provider, {
+    value: context
+  }, children);
+};
 export default Card;
 //# sourceMappingURL=Card.js.map

package/es/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","useContext","classnames","Flex","SectionParams","combineLabelledBy","CardContext","Space","useId","Card","props","_ref","nestedContext","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","isNested","filled","outset","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Provider","value","Container","wrap","id","_supportsSpacingProps"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport CardContext from './CardContext'\nimport Space from '../Space'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  Pick<SectionProps, 'outset'> &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size' | 'title'>\n\nfunction Card(props: Props) {\n  const nestedContext = useContext(CardContext)\n\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    align,\n    divider = 'space',\n    rowGap,\n    responsive = !nestedContext?.isNested,\n    filled,\n    outset,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    outset: nestedContext?.isNested\n      ? false\n      : outset === true\n      ? falseWhenSmall\n      : outset,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: 'var(--outline-card-color)',\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <CardContext.Provider value={{ isNested: true }}>\n        <Flex.Container\n          direction={direction ?? 'vertical'}\n          divider={divider}\n          alignSelf={alignSelf}\n          align={stack ? 'stretch' : align}\n          wrap={!stack}\n          gap={gap ?? spacing ?? (stack ? 'medium' : false)}\n          rowGap={rowGap}\n        >\n          {title && (\n            <Space id={titleId} className=\"dnb-card__title\">\n              {title}\n            </Space>\n          )}\n          {children}\n        </Flex.Container>\n      </CardContext.Provider>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\nexport default Card\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["React","useContext","classnames","Flex","SectionParams","combineLabelledBy","CardContext","Space","useId","Card","props","_ref","nestedContext","className","stack","direction","gap","spacing","innerSpace","alignSelf","align","divider","rowGap","responsive","isNested","filled","outset","title","children","rest","_objectWithoutProperties","_excluded","titleId","falseWhenSmall","small","medium","large","trueWhenSmall","basisSpace","top","right","bottom","left","smallSpace","_objectSpread","params","breakout","roundedCorner","outline","createElement","Item","_extends","element","Provider","disableCardBreakout","Container","wrap","id","_supportsSpacingProps","CardProvider","context","value"],"sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport Flex from '../flex/Flex'\nimport { SectionParams, SectionProps } from '../section/Section'\nimport { combineLabelledBy } from '../../shared/component-helper'\nimport CardContext from './CardContext'\nimport Space from '../Space'\nimport useId from '../../shared/helpers/useId'\n\nimport type { BasicProps as FlexContainerProps } from '../flex/Container'\nimport type { BasicProps as FlexItemProps } from '../flex/Item'\nimport type { SpaceTypeMedia } from '../../shared/types'\nimport type { SpaceProps } from '../Space'\n\nexport type Props = {\n  /**\n   * Define a title that appears on top of the Card\n   */\n  title?: React.ReactNode\n\n  /**\n   * Define if the Card should behave responsive. Defaults to `true`\n   */\n  responsive?: boolean\n\n  /**\n   * Define if the Card should get the same background color as the outline border\n   */\n  filled?: boolean\n} & FlexContainerProps &\n  Pick<SectionProps, 'outset'> &\n  FlexItemProps & {\n    stack?: boolean\n  } & SpaceProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref' | 'wrap' | 'size' | 'title'>\n\nfunction Card(props: Props) {\n  const nestedContext = useContext(CardContext)\n\n  const {\n    className,\n    stack,\n    direction,\n    gap,\n    spacing,\n    innerSpace,\n    alignSelf = 'stretch',\n    align,\n    divider = 'space',\n    rowGap,\n    responsive = !nestedContext?.isNested,\n    filled,\n    outset,\n    title,\n    children,\n    ...rest\n  } = props\n\n  const titleId = useId()\n  const falseWhenSmall = { small: false, medium: true, large: true }\n  const trueWhenSmall = { small: true, medium: false, large: false }\n  const basisSpace = {\n    top: 'medium',\n    right: 'medium',\n    bottom: 'large',\n    left: 'medium',\n  }\n  const smallSpace = responsive\n    ? {\n        ...basisSpace,\n        right: 0,\n        left: 0,\n      }\n    : basisSpace\n\n  const params = SectionParams({\n    className: classnames(\n      'dnb-card',\n      className,\n      responsive && 'dnb-card--responsive',\n      filled && 'dnb-card--filled'\n    ),\n    breakout: responsive ? trueWhenSmall : false,\n    outset: nestedContext?.isNested\n      ? false\n      : outset === true\n      ? falseWhenSmall\n      : outset,\n    roundedCorner: responsive ? falseWhenSmall : true,\n    outline: 'var(--outline-card-color)',\n    innerSpace:\n      innerSpace ??\n      ({\n        small: smallSpace,\n        medium: basisSpace,\n        large: basisSpace,\n      } as SpaceTypeMedia),\n    ...(rest as SectionProps),\n    'aria-labelledby': combineLabelledBy(rest, title && titleId),\n  })\n\n  return (\n    <Flex.Item alignSelf={alignSelf} element=\"section\" {...params}>\n      <Card.Provider disableCardBreakout>\n        <Flex.Container\n          direction={direction ?? 'vertical'}\n          divider={divider}\n          alignSelf={alignSelf}\n          align={stack ? 'stretch' : align}\n          wrap={!stack}\n          gap={gap ?? spacing ?? (stack ? 'medium' : false)}\n          rowGap={rowGap}\n        >\n          {title && (\n            <Space id={titleId} className=\"dnb-card__title\">\n              {title}\n            </Space>\n          )}\n          {children}\n        </Flex.Container>\n      </Card.Provider>\n    </Flex.Item>\n  )\n}\n\nCard._supportsSpacingProps = true\n\n/**\n * Provides the default context for the Card component's children.\n * Can be used to tell children to act as if they are in a Card, even if they are not.\n */\nCard.Provider = function CardProvider({\n  /**\n   * Defines if Card components should act as if it is nested inside another Card.\n   * Used to control side-margins outset behaviour.\n   *\n   * Defaults to existing context value.\n   */\n  disableCardBreakout,\n  children,\n}: {\n  disableCardBreakout?: boolean\n  children: React.ReactNode\n}) {\n  const context = useContext(CardContext) || {}\n\n  context.isNested = disableCardBreakout ?? context?.isNested\n\n  return (\n    <CardContext.Provider value={context}>{children}</CardContext.Provider>\n  )\n}\n\nexport default Card\n"],"mappings":"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","ignoreList":[]}

package/es/components/card/CardDocs.js

@@ -5,7 +5,7 @@ export const CardProperties = {
     status: 'optional'
   },
   stack: {
-    doc: 'True to stack the sub components with lines between. The `spacing` will default to `medium`.',
+    doc: 'True to stack the sub components with space between. The `spacing` will default to `medium`. Defaults to `false`.',
     type: 'boolean',
     status: 'optional'
   },

package/es/components/card/CardDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardDocs.js","names":["CardProperties","outset","doc","type","status","stack","direction","alignSelf","title","responsive","filled","element","children"],"sources":["../../../../src/components/card/CardDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CardProperties: PropertiesTableProps = {\n  outset: {\n    doc: 'Whether or not to break out (using negative margins) on larger screens. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stack: {\n    doc: 'True to stack the sub components with lines between. The `spacing` will default to `medium`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  direction: {\n    doc: 'Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  alignSelf: {\n    doc: 'Defaults to `stretch`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Define a title that appears on top of the Card.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  responsive: {\n    doc: 'Define if the card should behave responsive. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  filled: {\n    doc: 'Define if the Card should get the same background color as the outline border.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `section`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Flex.Item](/uilib/layout/flex/item/properties)': {\n    doc: 'Flex.Item properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,MAAM,EAAE;IACNC,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDK,UAAU,EAAE;IACVP,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,oDAAoD;IACzDC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"CardDocs.js","names":["CardProperties","outset","doc","type","status","stack","direction","alignSelf","title","responsive","filled","element","children"],"sources":["../../../../src/components/card/CardDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const CardProperties: PropertiesTableProps = {\n  outset: {\n    doc: 'Whether or not to break out (using negative margins) on larger screens. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  stack: {\n    doc: 'True to stack the sub components with space between. The `spacing` will default to `medium`. Defaults to `false`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  direction: {\n    doc: 'Defaults to `vertical`.',\n    type: 'string',\n    status: 'optional',\n  },\n  alignSelf: {\n    doc: 'Defaults to `stretch`.',\n    type: 'string',\n    status: 'optional',\n  },\n  title: {\n    doc: 'Define a title that appears on top of the Card.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  responsive: {\n    doc: 'Define if the card should behave responsive. Defaults to `true`.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  filled: {\n    doc: 'Define if the Card should get the same background color as the outline border.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  element: {\n    doc: 'Define the type of element. Defaults to `section`.',\n    type: 'React.Element',\n    status: 'optional',\n  },\n  children: {\n    doc: 'Contents.',\n    type: 'React.Node',\n    status: 'required',\n  },\n  '[Flex.Container](/uilib/layout/flex/container/properties)': {\n    doc: 'Flex.Container properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Flex.Item](/uilib/layout/flex/item/properties)': {\n    doc: 'Flex.Item properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,cAAoC,GAAG;EAClDC,MAAM,EAAE;IACNC,GAAG,EAAE,8FAA8F;IACnGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,mHAAmH;IACxHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,yBAAyB;IAC9BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,wBAAwB;IAC7BC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,KAAK,EAAE;IACLN,GAAG,EAAE,iDAAiD;IACtDC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDK,UAAU,EAAE;IACVP,GAAG,EAAE,kEAAkE;IACvEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,MAAM,EAAE;IACNR,GAAG,EAAE,gFAAgF;IACrFC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,oDAAoD;IACzDC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV,CAAC;EACDQ,QAAQ,EAAE;IACRV,GAAG,EAAE,WAAW;IAChBC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACD,2DAA2D,EAAE;IAC3DF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,iDAAiD,EAAE;IACjDF,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","keycode","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","extractPropsFromContext","skeleton","FormRow","formElement","props","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","className","id","idProp","indeterminate","checked","onChange","onClick","innerRef","rest","_objectWithoutProperties","_excluded","forceUpdate","isFn","refHook","ref","current","preventChangeRef","isCheckedRef","prevCheckedRef","callOnChange","args","handleChange","event","updatedCheck","focus","onChangeHandler","onClickHandler","preventDefault","target","_objectSpread","onKeyDownHandler","showStatus","handleInputAttributes","inputParams","mainParams","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Web Checkbox Component\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n  keycode,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport useId from '../../shared/helpers/useId'\nimport type { SpacingProps } from '../space/types'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nimport type {\n  FormStatusProps,\n  FormStatusState,\n  FormStatusText,\n} from '../FormStatus'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\nimport CheckIcon from './CheckIcon'\n\nexport type CheckboxLabelPosition = 'left' | 'right'\nexport type CheckboxSize = 'default' | 'medium' | 'large'\nexport type CheckboxAttributes = string | Record<string, unknown>\nexport type OnChangeParams = {\n  checked: boolean\n  event: React.ChangeEvent<HTMLInputElement>\n}\nexport type OnClickParams = React.MouseEvent<HTMLInputElement> & {\n  checked: boolean\n  event: React.MouseEvent<HTMLInputElement>\n}\n\nexport type CheckboxProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * The `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the checkbox is checked or not. The default is `false`.\n   */\n  checked?: boolean | undefined | null\n  /**\n   * Determine whether to show the indeterminate checked state when checked. The default is `false`.\n   */\n  indeterminate?: boolean\n  /**\n   * The size of the checkbox. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: CheckboxSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)\n   */\n  statusProps?: FormStatusProps\n  statusNoAnimation?: boolean\n  /**\n   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)\n   */\n  globalStatus?: GlobalStatusConfigObject\n  /**\n   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  element?: React.ElementType\n  attributes?: CheckboxAttributes\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.\n   */\n  onChange?: (args: OnChangeParams) => void\n  /**\n   * Will be called on click made by the user. Returns the ClickEvent.\n   */\n  onClick?: (args: OnClickParams) => void\n  /**\n   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & SpacingProps &\n  Omit<\n    React.HTMLProps<HTMLInputElement>,\n    'ref' | 'label' | 'size' | 'onChange' | 'onClick'\n  > &\n  DeprecatedCheckboxProps\n\n// deprecated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onChange` */\n  on_change?: (args: OnChangeParams) => void\n  /**  @deprecated use `labelPosition` */\n  label_position?: CheckboxLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: FormStatusProps\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps: CheckboxProps = {\n  statusState: 'error',\n}\n\nfunction Checkbox(localProps: CheckboxProps) {\n  const context = useContext(Context)\n\n  const extractPropsFromContext = useCallback(() => {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(localProps),\n      defaultProps,\n      context.Checkbox,\n      {\n        skeleton: context?.Checkbox,\n      },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement)\n    )\n  }, [\n    context.Checkbox,\n    context?.FormRow,\n    context?.formElement,\n    localProps,\n  ])\n\n  const props = extractPropsFromContext()\n\n  const {\n    value,\n    status,\n    statusState,\n    statusProps,\n    statusNoAnimation,\n    globalStatus,\n    suffix,\n    size,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    element,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    indeterminate,\n    checked,\n    onChange,\n    onClick,\n    innerRef,\n    ...rest\n  } = props\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const id = useId(idProp)\n\n  const isFn = typeof innerRef === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const ref = (!isFn && innerRef) || refHook\n\n  useEffect(() => {\n    if (isFn) {\n      innerRef?.(ref.current)\n    }\n  }, [innerRef, isFn, ref])\n\n  const preventChangeRef = useRef(false)\n  const isCheckedRef = useRef(checked ?? false)\n  const prevCheckedRef = useRef(checked)\n\n  useEffect(() => {\n    if (checked !== prevCheckedRef.current) {\n      isCheckedRef.current = !!checked\n      prevCheckedRef.current = !!checked\n      forceUpdate()\n    }\n  }, [checked])\n\n  useEffect(() => {\n    ref.current.indeterminate = indeterminate\n  }, [indeterminate, ref])\n\n  const callOnChange: CheckboxProps['onChange'] = useCallback(\n    (args) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const handleChange = useCallback(\n    (event: OnChangeParams['event']) => {\n      if (preventChangeRef.current) {\n        return // stop here\n      }\n      preventChangeRef.current = false\n      const updatedCheck = !isCheckedRef.current\n\n      isCheckedRef.current = updatedCheck\n      forceUpdate()\n      callOnChange({ checked: updatedCheck, event })\n\n      // help firefox and safari to have an correct state after a click\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [callOnChange, ref]\n  )\n\n  const onChangeHandler = useCallback(\n    (event: OnChangeParams['event']) => {\n      handleChange(event)\n    },\n    [handleChange]\n  )\n\n  const onClickHandler: React.MouseEventHandler<HTMLInputElement> =\n    useCallback(\n      (event) => {\n        const preventDefault = () => {\n          event.preventDefault()\n\n          // if (event.target['checked'] !== isChecked) {\n          if (event.target['checked'] !== isCheckedRef.current) {\n            preventChangeRef.current = true\n            isCheckedRef.current = !isCheckedRef.current\n            forceUpdate()\n          }\n        }\n\n        if (readOnly) {\n          return preventDefault()\n        }\n\n        onClick?.({\n          checked: isCheckedRef.current,\n          preventDefault,\n          event,\n          ...event,\n        })\n      },\n      [onClick, readOnly]\n    )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent & OnChangeParams['event']) => {\n      switch (keycode(event)) {\n        case 'enter':\n          handleChange(event)\n          break\n      }\n    },\n    [handleChange]\n  )\n\n  const showStatus = getStatusState(status)\n\n  /**\n   * Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n   */\n  const handleInputAttributes = useCallback(() => {\n    const inputParams = {\n      disabled,\n      checked: isCheckedRef.current,\n      readOnly,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    // also used for code markup simulation\n    return validateDOMAttributes(\n      props,\n      skeletonDOMAttributes(inputParams, skeleton, context)\n    )\n  }, [\n    context,\n    disabled,\n    id,\n    props,\n    readOnly,\n    rest,\n    showStatus,\n    skeleton,\n    suffix,\n  ])\n\n  const mainParams = {\n    className: classnames(\n      'dnb-checkbox',\n      status && `dnb-checkbox__status--${statusState}`,\n      size && `dnb-checkbox--${size}`,\n      label && `dnb-checkbox--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const inputParams = handleInputAttributes()\n\n  const statusComp = (\n    <FormStatus\n      show={showStatus}\n      id={id + '-form-status'}\n      globalStatus={globalStatus}\n      label={label}\n      text_id={id + '-status'} // used for \"aria-describedby\"\n      width_selector={id + ', ' + id + '-label'}\n      text={status}\n      state={statusState}\n      no_animation={statusNoAnimation}\n      skeleton={skeleton}\n      {...statusProps}\n    />\n  )\n\n  const Element = element || 'input'\n\n  return (\n    <span {...mainParams}>\n      <span className=\"dnb-checkbox__order\">\n        {label && (\n          <FormLabel\n            id={id + '-label'}\n            forId={id}\n            text={label}\n            disabled={disabled}\n            skeleton={skeleton}\n            srOnly={labelSrOnly}\n          />\n        )}\n\n        <span className=\"dnb-checkbox__inner\">\n          <AlignmentHelper />\n          {labelPosition === 'left' && statusComp}\n\n          <span className=\"dnb-checkbox__shell\">\n            <Element\n              id={id}\n              name={id}\n              type=\"checkbox\"\n              title={title}\n              className=\"dnb-checkbox__input\"\n              value={isCheckedRef.current ? value || '' : ''}\n              disabled={disabled}\n              {...inputParams}\n              onChange={onChangeHandler}\n              onClick={onClickHandler}\n              onKeyDown={onKeyDownHandler}\n              ref={ref}\n            />\n\n            <span\n              className={classnames(\n                'dnb-checkbox__button',\n                createSkeletonClass('shape', skeleton, context)\n              )}\n              aria-hidden\n            >\n              <span className=\"dnb-checkbox__focus\" />\n            </span>\n\n            <span className=\"dnb-checkbox__indeterminate\" />\n\n            <CheckIcon size={size} />\n          </span>\n        </span>\n\n        {suffix && (\n          <Suffix\n            className=\"dnb-checkbox__suffix\"\n            id={id + '-suffix'} // used for \"aria-describedby\"\n            context={props}\n          >\n            {suffix}\n          </Suffix>\n        )}\n      </span>\n\n      {(labelPosition === 'right' || !labelPosition) && statusComp}\n    </span>\n  )\n}\n\nexport default Checkbox\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useContext","useEffect","useReducer","useRef","classnames","validateDOMAttributes","getStatusState","combineDescribedBy","extendPropsWithContext","keycode","AlignmentHelper","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","Context","Suffix","useId","pickFormElementProps","convertSnakeCaseProps","FormLabel","FormStatus","CheckIcon","defaultProps","statusState","Checkbox","localProps","context","extractPropsFromContext","skeleton","FormRow","formElement","props","value","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","className","id","idProp","indeterminate","checked","onChange","onClick","innerRef","rest","_objectWithoutProperties","_excluded","forceUpdate","isFn","refHook","ref","current","preventChangeRef","isCheckedRef","prevCheckedRef","callOnChange","args","handleChange","event","updatedCheck","focus","onChangeHandler","onClickHandler","preventDefault","target","_objectSpread","onKeyDownHandler","showStatus","handleInputAttributes","inputParams","mainParams","statusComp","createElement","_extends","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","_AlignmentHelper","name","type","onKeyDown","_span","_span2"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Web Checkbox Component\n */\n\nimport React, {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport {\n  validateDOMAttributes,\n  getStatusState,\n  combineDescribedBy,\n  extendPropsWithContext,\n  keycode,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n  skeletonDOMAttributes,\n  createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport useId from '../../shared/helpers/useId'\nimport type { SpacingProps } from '../space/types'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nimport type {\n  FormStatusProps,\n  FormStatusState,\n  FormStatusText,\n} from '../FormStatus'\nimport type { SkeletonShow } from '../Skeleton'\nimport type { GlobalStatusConfigObject } from '../GlobalStatus'\n\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\nimport CheckIcon from './CheckIcon'\n\nexport type CheckboxLabelPosition = 'left' | 'right'\nexport type CheckboxSize = 'default' | 'medium' | 'large'\nexport type CheckboxAttributes = string | Record<string, unknown>\nexport type OnChangeParams = {\n  checked: boolean\n  event: React.ChangeEvent<HTMLInputElement>\n}\nexport type OnClickParams = React.MouseEvent<HTMLInputElement> & {\n  checked: boolean\n  event: React.MouseEvent<HTMLInputElement>\n}\n\nexport type CheckboxProps = {\n  /**\n   * Use either the `label` property or provide a custom one.\n   */\n  label?: React.ReactNode\n  /**\n   * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`.\n   */\n  labelPosition?: CheckboxLabelPosition\n  /**\n   * Use `true` to make the label only readable by screen readers.\n   */\n  labelSrOnly?: boolean\n  /**\n   * The `title` of the input - describing it a bit further for accessibility reasons.\n   */\n  title?: string\n  /**\n   * Determine whether the checkbox is checked or not. The default is `false`.\n   */\n  checked?: boolean | undefined | null\n  /**\n   * Determine whether to show the indeterminate checked state when checked. The default is `false`.\n   */\n  indeterminate?: boolean\n  /**\n   * The size of the checkbox. For now there is \"medium\" (default) and \"large\".\n   */\n  size?: CheckboxSize\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Use an object to define additional FormStatus properties. See [FormStatus](/uilib/components/form-status/properties/)\n   */\n  statusProps?: FormStatusProps\n  statusNoAnimation?: boolean\n  /**\n   * The [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status)\n   */\n  globalStatus?: GlobalStatusConfigObject\n  /**\n   * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component.\n   */\n  suffix?: React.ReactNode\n  value?: string\n  element?: React.ElementType\n  attributes?: CheckboxAttributes\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  /**\n   * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`.\n   */\n  onChange?: (args: OnChangeParams) => void\n  /**\n   * Will be called on click made by the user. Returns the ClickEvent.\n   */\n  onClick?: (args: OnClickParams) => void\n  /**\n   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.\n   */\n  innerRef?:\n    | React.MutableRefObject<HTMLInputElement>\n    | ((elem: HTMLInputElement) => void)\n} & SpacingProps &\n  Omit<\n    React.HTMLProps<HTMLInputElement>,\n    'ref' | 'label' | 'size' | 'onChange' | 'onClick'\n  > &\n  DeprecatedCheckboxProps\n\n// deprecated, can be removed in v11\ntype DeprecatedCheckboxProps = {\n  /** @deprecated use the `label` prop instead */\n  children?: React.ReactNode\n  /**  @deprecated use `onChange` */\n  on_change?: (args: OnChangeParams) => void\n  /**  @deprecated use `labelPosition` */\n  label_position?: CheckboxLabelPosition\n  /**  @deprecated use `labelSrOnly` */\n  label_sr_only?: boolean\n  /**  @deprecated use `statusState` */\n  status_state?: FormStatusState\n  /**  @deprecated use `statusProps` */\n  status_props?: FormStatusProps\n  /**  @deprecated use `statusNoAnimation` */\n  status_no_animation?: boolean\n}\n\nconst defaultProps: CheckboxProps = {\n  statusState: 'error',\n}\n\nfunction Checkbox(localProps: CheckboxProps) {\n  const context = useContext(Context)\n\n  const extractPropsFromContext = useCallback(() => {\n    return extendPropsWithContext(\n      convertSnakeCaseProps(localProps),\n      defaultProps,\n      context.Checkbox,\n      {\n        skeleton: context?.Checkbox,\n      },\n      // Deprecated – can be removed in v11\n      pickFormElementProps(context?.FormRow),\n      pickFormElementProps(context?.formElement)\n    )\n  }, [\n    context.Checkbox,\n    context?.FormRow,\n    context?.formElement,\n    localProps,\n  ])\n\n  const props = extractPropsFromContext()\n\n  const {\n    value,\n    status,\n    statusState,\n    statusProps,\n    statusNoAnimation,\n    globalStatus,\n    suffix,\n    size,\n    label,\n    labelPosition,\n    labelSrOnly,\n    title,\n    element,\n    disabled,\n    readOnly,\n    skeleton,\n    className,\n    id: idProp,\n    indeterminate,\n    checked,\n    onChange,\n    onClick,\n    innerRef,\n    ...rest\n  } = props\n\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  const id = useId(idProp)\n\n  const isFn = typeof innerRef === 'function'\n  const refHook = useRef<HTMLInputElement>()\n  const ref = (!isFn && innerRef) || refHook\n\n  useEffect(() => {\n    if (isFn) {\n      innerRef?.(ref.current)\n    }\n  }, [innerRef, isFn, ref])\n\n  const preventChangeRef = useRef(false)\n  const isCheckedRef = useRef(checked ?? false)\n  const prevCheckedRef = useRef(checked)\n\n  useEffect(() => {\n    if (checked !== prevCheckedRef.current) {\n      isCheckedRef.current = !!checked\n      prevCheckedRef.current = !!checked\n      forceUpdate()\n    }\n  }, [checked])\n\n  useEffect(() => {\n    ref.current.indeterminate = indeterminate\n  }, [indeterminate, ref])\n\n  const callOnChange: CheckboxProps['onChange'] = useCallback(\n    (args) => {\n      onChange?.(args)\n    },\n    [onChange]\n  )\n\n  const handleChange = useCallback(\n    (event: OnChangeParams['event']) => {\n      if (preventChangeRef.current) {\n        return // stop here\n      }\n      preventChangeRef.current = false\n      const updatedCheck = !isCheckedRef.current\n\n      isCheckedRef.current = updatedCheck\n      forceUpdate()\n      callOnChange({ checked: updatedCheck, event })\n\n      // help firefox and safari to have an correct state after a click\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [callOnChange, ref]\n  )\n\n  const onChangeHandler = useCallback(\n    (event: OnChangeParams['event']) => {\n      handleChange(event)\n    },\n    [handleChange]\n  )\n\n  const onClickHandler: React.MouseEventHandler<HTMLInputElement> =\n    useCallback(\n      (event) => {\n        const preventDefault = () => {\n          event.preventDefault()\n\n          if (event.target['checked'] !== isCheckedRef.current) {\n            preventChangeRef.current = true\n            isCheckedRef.current = !isCheckedRef.current\n            forceUpdate()\n          }\n        }\n\n        if (readOnly) {\n          return preventDefault()\n        }\n\n        onClick?.({\n          checked: isCheckedRef.current,\n          preventDefault,\n          event,\n          ...event,\n        })\n      },\n      [onClick, readOnly]\n    )\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent & OnChangeParams['event']) => {\n      switch (keycode(event)) {\n        case 'enter':\n          handleChange(event)\n          break\n      }\n    },\n    [handleChange]\n  )\n\n  const showStatus = getStatusState(status)\n\n  /**\n   * Adds aria attributes, calls validateDOMAttributes and skeletonDOMAttributes and returns the result\n   */\n  const handleInputAttributes = useCallback(() => {\n    const inputParams = {\n      disabled,\n      checked: isCheckedRef.current,\n      readOnly,\n      ...rest,\n    }\n\n    if (showStatus || suffix) {\n      inputParams['aria-describedby'] = combineDescribedBy(\n        inputParams,\n        showStatus ? id + '-status' : null,\n        suffix ? id + '-suffix' : null\n      )\n    }\n    if (readOnly) {\n      inputParams['aria-readonly'] = inputParams.readOnly = true\n    }\n\n    // also used for code markup simulation\n    return validateDOMAttributes(\n      props,\n      skeletonDOMAttributes(inputParams, skeleton, context)\n    )\n  }, [\n    context,\n    disabled,\n    id,\n    props,\n    readOnly,\n    rest,\n    showStatus,\n    skeleton,\n    suffix,\n  ])\n\n  const mainParams = {\n    className: classnames(\n      'dnb-checkbox',\n      status && `dnb-checkbox__status--${statusState}`,\n      size && `dnb-checkbox--${size}`,\n      label && `dnb-checkbox--label-position-${labelPosition || 'right'}`,\n      'dnb-form-component',\n      createSkeletonClass(null, skeleton, context),\n      createSpacingClasses(props),\n      className\n    ),\n  }\n\n  const inputParams = handleInputAttributes()\n\n  const statusComp = (\n    <FormStatus\n      show={showStatus}\n      id={id + '-form-status'}\n      globalStatus={globalStatus}\n      label={label}\n      text_id={id + '-status'} // used for \"aria-describedby\"\n      width_selector={id + ', ' + id + '-label'}\n      text={status}\n      state={statusState}\n      no_animation={statusNoAnimation}\n      skeleton={skeleton}\n      {...statusProps}\n    />\n  )\n\n  const Element = element || 'input'\n\n  return (\n    <span {...mainParams}>\n      <span className=\"dnb-checkbox__order\">\n        {label && (\n          <FormLabel\n            id={id + '-label'}\n            forId={id}\n            text={label}\n            disabled={disabled}\n            skeleton={skeleton}\n            srOnly={labelSrOnly}\n          />\n        )}\n\n        <span className=\"dnb-checkbox__inner\">\n          <AlignmentHelper />\n          {labelPosition === 'left' && statusComp}\n\n          <span className=\"dnb-checkbox__shell\">\n            <Element\n              id={id}\n              name={id}\n              type=\"checkbox\"\n              title={title}\n              className=\"dnb-checkbox__input\"\n              value={isCheckedRef.current ? value || '' : ''}\n              disabled={disabled}\n              {...inputParams}\n              onChange={onChangeHandler}\n              onClick={onClickHandler}\n              onKeyDown={onKeyDownHandler}\n              ref={ref}\n            />\n\n            <span\n              className={classnames(\n                'dnb-checkbox__button',\n                createSkeletonClass('shape', skeleton, context)\n              )}\n              aria-hidden\n            >\n              <span className=\"dnb-checkbox__focus\" />\n            </span>\n\n            <span className=\"dnb-checkbox__indeterminate\" />\n\n            <CheckIcon size={size} />\n          </span>\n        </span>\n\n        {suffix && (\n          <Suffix\n            className=\"dnb-checkbox__suffix\"\n            id={id + '-suffix'} // used for \"aria-describedby\"\n            context={props}\n          >\n            {suffix}\n          </Suffix>\n        )}\n      </span>\n\n      {(labelPosition === 'right' || !labelPosition) && statusComp}\n    </span>\n  )\n}\n\nexport default Checkbox\n"],"mappings":";;;;;;;;;AAIA,OAAOA,KAAK,IACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,MAAM,QACD,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,qBAAqB,EACrBC,cAAc,EACdC,kBAAkB,EAClBC,sBAAsB,EACtBC,OAAO,QACF,+BAA+B;AACtC,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SACEC,qBAAqB,EACrBC,mBAAmB,QACd,4BAA4B;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,OAAOC,MAAM,MAAM,6BAA6B;AAChD,OAAOC,KAAK,MAAM,4BAA4B;AAE9C,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,qBAAqB,QAAQ,yCAAyC;AAU/E,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,UAAU,MAAM,2BAA2B;AAClD,OAAOC,SAAS,MAAM,aAAa;AA8GnC,MAAMC,YAA2B,GAAG;EAClCC,WAAW,EAAE;AACf,CAAC;AAED,SAASC,QAAQA,CAACC,UAAyB,EAAE;EAC3C,MAAMC,OAAO,GAAG1B,UAAU,CAACc,OAAO,CAAC;EAEnC,MAAMa,uBAAuB,GAAG5B,WAAW,CAAC,MAAM;IAChD,OAAOS,sBAAsB,CAC3BU,qBAAqB,CAACO,UAAU,CAAC,EACjCH,YAAY,EACZI,OAAO,CAACF,QAAQ,EAChB;MACEI,QAAQ,EAAEF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF;IACrB,CAAC,EAEDP,oBAAoB,CAACS,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,OAAO,CAAC,EACtCZ,oBAAoB,CAACS,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,WAAW,CAC3C,CAAC;EACH,CAAC,EAAE,CACDJ,OAAO,CAACF,QAAQ,EAChBE,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,OAAO,EAChBH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,WAAW,EACpBL,UAAU,CACX,CAAC;EAEF,MAAMM,KAAK,GAAGJ,uBAAuB,CAAC,CAAC;EAEvC,MAAM;MACJK,KAAK;MACLC,MAAM;MACNV,WAAW;MACXW,WAAW;MACXC,iBAAiB;MACjBC,YAAY;MACZC,MAAM;MACNC,IAAI;MACJC,KAAK;MACLC,aAAa;MACbC,WAAW;MACXC,KAAK;MACLC,OAAO;MACPC,QAAQ;MACRC,QAAQ;MACRjB,QAAQ;MACRkB,SAAS;MACTC,EAAE,EAAEC,MAAM;MACVC,aAAa;MACbC,OAAO;MACPC,QAAQ;MACRC,OAAO;MACPC;IAEF,CAAC,GAAGtB,KAAK;IADJuB,IAAI,GAAAC,wBAAA,CACLxB,KAAK,EAAAyB,SAAA;EAET,MAAM,GAAGC,WAAW,CAAC,GAAGvD,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAClD,MAAM6C,EAAE,GAAG/B,KAAK,CAACgC,MAAM,CAAC;EAExB,MAAMU,IAAI,GAAG,OAAOL,QAAQ,KAAK,UAAU;EAC3C,MAAMM,OAAO,GAAGxD,MAAM,CAAmB,CAAC;EAC1C,MAAMyD,GAAG,GAAI,CAACF,IAAI,IAAIL,QAAQ,IAAKM,OAAO;EAE1C1D,SAAS,CAAC,MAAM;IACd,IAAIyD,IAAI,EAAE;MACRL,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGO,GAAG,CAACC,OAAO,CAAC;IACzB;EACF,CAAC,EAAE,CAACR,QAAQ,EAAEK,IAAI,EAAEE,GAAG,CAAC,CAAC;EAEzB,MAAME,gBAAgB,GAAG3D,MAAM,CAAC,KAAK,CAAC;EACtC,MAAM4D,YAAY,GAAG5D,MAAM,CAAC+C,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,KAAK,CAAC;EAC7C,MAAMc,cAAc,GAAG7D,MAAM,CAAC+C,OAAO,CAAC;EAEtCjD,SAAS,CAAC,MAAM;IACd,IAAIiD,OAAO,KAAKc,cAAc,CAACH,OAAO,EAAE;MACtCE,YAAY,CAACF,OAAO,GAAG,CAAC,CAACX,OAAO;MAChCc,cAAc,CAACH,OAAO,GAAG,CAAC,CAACX,OAAO;MAClCO,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACP,OAAO,CAAC,CAAC;EAEbjD,SAAS,CAAC,MAAM;IACd2D,GAAG,CAACC,OAAO,CAACZ,aAAa,GAAGA,aAAa;EAC3C,CAAC,EAAE,CAACA,aAAa,EAAEW,GAAG,CAAC,CAAC;EAExB,MAAMK,YAAuC,GAAGlE,WAAW,CACxDmE,IAAI,IAAK;IACRf,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGe,IAAI,CAAC;EAClB,CAAC,EACD,CAACf,QAAQ,CACX,CAAC;EAED,MAAMgB,YAAY,GAAGpE,WAAW,CAC7BqE,KAA8B,IAAK;IAClC,IAAIN,gBAAgB,CAACD,OAAO,EAAE;MAC5B;IACF;IACAC,gBAAgB,CAACD,OAAO,GAAG,KAAK;IAChC,MAAMQ,YAAY,GAAG,CAACN,YAAY,CAACF,OAAO;IAE1CE,YAAY,CAACF,OAAO,GAAGQ,YAAY;IACnCZ,WAAW,CAAC,CAAC;IACbQ,YAAY,CAAC;MAAEf,OAAO,EAAEmB,YAAY;MAAED;IAAM,CAAC,CAAC;IAG9C,IAAIR,GAAG,CAACC,OAAO,EAAE;MACfD,GAAG,CAACC,OAAO,CAACS,KAAK,CAAC,CAAC;IACrB;EACF,CAAC,EACD,CAACL,YAAY,EAAEL,GAAG,CACpB,CAAC;EAED,MAAMW,eAAe,GAAGxE,WAAW,CAChCqE,KAA8B,IAAK;IAClCD,YAAY,CAACC,KAAK,CAAC;EACrB,CAAC,EACD,CAACD,YAAY,CACf,CAAC;EAED,MAAMK,cAAyD,GAC7DzE,WAAW,CACRqE,KAAK,IAAK;IACT,MAAMK,cAAc,GAAGA,CAAA,KAAM;MAC3BL,KAAK,CAACK,cAAc,CAAC,CAAC;MAEtB,IAAIL,KAAK,CAACM,MAAM,CAAC,SAAS,CAAC,KAAKX,YAAY,CAACF,OAAO,EAAE;QACpDC,gBAAgB,CAACD,OAAO,GAAG,IAAI;QAC/BE,YAAY,CAACF,OAAO,GAAG,CAACE,YAAY,CAACF,OAAO;QAC5CJ,WAAW,CAAC,CAAC;MACf;IACF,CAAC;IAED,IAAIZ,QAAQ,EAAE;MACZ,OAAO4B,cAAc,CAAC,CAAC;IACzB;IAEArB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAAuB,aAAA;MACLzB,OAAO,EAAEa,YAAY,CAACF,OAAO;MAC7BY,cAAc;MACdL;IAAK,GACFA,KAAK,CACT,CAAC;EACJ,CAAC,EACD,CAAChB,OAAO,EAAEP,QAAQ,CACpB,CAAC;EAEH,MAAM+B,gBAAgB,GAAG7E,WAAW,CACjCqE,KAA8C,IAAK;IAClD,QAAQ3D,OAAO,CAAC2D,KAAK,CAAC;MACpB,KAAK,OAAO;QACVD,YAAY,CAACC,KAAK,CAAC;QACnB;IACJ;EACF,CAAC,EACD,CAACD,YAAY,CACf,CAAC;EAED,MAAMU,UAAU,GAAGvE,cAAc,CAAC2B,MAAM,CAAC;EAKzC,MAAM6C,qBAAqB,GAAG/E,WAAW,CAAC,MAAM;IAC9C,MAAMgF,WAAW,GAAAJ,aAAA;MACf/B,QAAQ;MACRM,OAAO,EAAEa,YAAY,CAACF,OAAO;MAC7BhB;IAAQ,GACLS,IAAI,CACR;IAED,IAAIuB,UAAU,IAAIxC,MAAM,EAAE;MACxB0C,WAAW,CAAC,kBAAkB,CAAC,GAAGxE,kBAAkB,CAClDwE,WAAW,EACXF,UAAU,GAAG9B,EAAE,GAAG,SAAS,GAAG,IAAI,EAClCV,MAAM,GAAGU,EAAE,GAAG,SAAS,GAAG,IAC5B,CAAC;IACH;IACA,IAAIF,QAAQ,EAAE;MACZkC,WAAW,CAAC,eAAe,CAAC,GAAGA,WAAW,CAAClC,QAAQ,GAAG,IAAI;IAC5D;IAGA,OAAOxC,qBAAqB,CAC1B0B,KAAK,EACLnB,qBAAqB,CAACmE,WAAW,EAAEnD,QAAQ,EAAEF,OAAO,CACtD,CAAC;EACH,CAAC,EAAE,CACDA,OAAO,EACPkB,QAAQ,EACRG,EAAE,EACFhB,KAAK,EACLc,QAAQ,EACRS,IAAI,EACJuB,UAAU,EACVjD,QAAQ,EACRS,MAAM,CACP,CAAC;EAEF,MAAM2C,UAAU,GAAG;IACjBlC,SAAS,EAAE1C,UAAU,oCAMnBS,mBAAmB,CAAC,IAAI,EAAEe,QAAQ,EAAEF,OAAO,CAAC,EAC5Cf,oBAAoB,CAACoB,KAAK,CAAC,EAC3Be,SAAS,EANTb,MAAM,IAAI,yBAAyBV,WAAW,EAAE,EAChDe,IAAI,IAAI,iBAAiBA,IAAI,EAAE,EAC/BC,KAAK,IAAI,gCAAgCC,aAAa,IAAI,OAAO,EAKnE;EACF,CAAC;EAED,MAAMuC,WAAW,GAAGD,qBAAqB,CAAC,CAAC;EAE3C,MAAMG,UAAU,GACdnF,KAAA,CAAAoF,aAAA,CAAC9D,UAAU,EAAA+D,QAAA;IACTC,IAAI,EAAEP,UAAW;IACjB9B,EAAE,EAAEA,EAAE,GAAG,cAAe;IACxBX,YAAY,EAAEA,YAAa;IAC3BG,KAAK,EAAEA,KAAM;IACb8C,OAAO,EAAEtC,EAAE,GAAG,SAAU;IACxBuC,cAAc,EAAEvC,EAAE,GAAG,IAAI,GAAGA,EAAE,GAAG,QAAS;IAC1CwC,IAAI,EAAEtD,MAAO;IACbuD,KAAK,EAAEjE,WAAY;IACnBkE,YAAY,EAAEtD,iBAAkB;IAChCP,QAAQ,EAAEA;EAAS,GACfM,WAAW,CAChB,CACF;EAED,MAAMwD,OAAO,GAAG/C,OAAO,IAAI,OAAO;EAElC,OACE7C,KAAA,CAAAoF,aAAA,SAAUF,UAAU,EAClBlF,KAAA,CAAAoF,aAAA;IAAMpC,SAAS,EAAC;EAAqB,GAClCP,KAAK,IACJzC,KAAA,CAAAoF,aAAA,CAAC/D,SAAS;IACR4B,EAAE,EAAEA,EAAE,GAAG,QAAS;IAClB4C,KAAK,EAAE5C,EAAG;IACVwC,IAAI,EAAEhD,KAAM;IACZK,QAAQ,EAAEA,QAAS;IACnBhB,QAAQ,EAAEA,QAAS;IACnBgE,MAAM,EAAEnD;EAAY,CACrB,CACF,EAED3C,KAAA,CAAAoF,aAAA;IAAMpC,SAAS,EAAC;EAAqB,GAAA+C,gBAAA,KAAAA,gBAAA,GACnC/F,KAAA,CAAAoF,aAAA,CAACxE,eAAe,MAAE,CAAC,GAClB8B,aAAa,KAAK,MAAM,IAAIyC,UAAU,EAEvCnF,KAAA,CAAAoF,aAAA;IAAMpC,SAAS,EAAC;EAAqB,GACnChD,KAAA,CAAAoF,aAAA,CAACQ,OAAO,EAAAP,QAAA;IACNpC,EAAE,EAAEA,EAAG;IACP+C,IAAI,EAAE/C,EAAG;IACTgD,IAAI,EAAC,UAAU;IACfrD,KAAK,EAAEA,KAAM;IACbI,SAAS,EAAC,qBAAqB;IAC/Bd,KAAK,EAAE+B,YAAY,CAACF,OAAO,GAAG7B,KAAK,IAAI,EAAE,GAAG,EAAG;IAC/CY,QAAQ,EAAEA;EAAS,GACfmC,WAAW;IACf5B,QAAQ,EAAEoB,eAAgB;IAC1BnB,OAAO,EAAEoB,cAAe;IACxBwB,SAAS,EAAEpB,gBAAiB;IAC5BhB,GAAG,EAAEA;EAAI,EACV,CAAC,EAEF9D,KAAA,CAAAoF,aAAA;IACEpC,SAAS,EAAE1C,UAAU,CACnB,sBAAsB,EACtBS,mBAAmB,CAAC,OAAO,EAAEe,QAAQ,EAAEF,OAAO,CAChD,CAAE;IACF;EAAW,GAAAuE,KAAA,KAAAA,KAAA,GAEXnG,KAAA,CAAAoF,aAAA;IAAMpC,SAAS,EAAC;EAAqB,CAAE,CAAC,CACpC,CAAC,EAAAoD,MAAA,KAAAA,MAAA,GAEPpG,KAAA,CAAAoF,aAAA;IAAMpC,SAAS,EAAC;EAA6B,CAAE,CAAC,GAEhDhD,KAAA,CAAAoF,aAAA,CAAC7D,SAAS;IAACiB,IAAI,EAAEA;EAAK,CAAE,CACpB,CACF,CAAC,EAEND,MAAM,IACLvC,KAAA,CAAAoF,aAAA,CAACnE,MAAM;IACL+B,SAAS,EAAC,sBAAsB;IAChCC,EAAE,EAAEA,EAAE,GAAG,SAAU;IACnBrB,OAAO,EAAEK;EAAM,GAEdM,MACK,CAEN,CAAC,EAEN,CAACG,aAAa,KAAK,OAAO,IAAI,CAACA,aAAa,KAAKyC,UAC9C,CAAC;AAEX;AAEA,eAAezD,QAAQ","ignoreList":[]}

package/es/components/date-format/DateFormat.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { InternalLocale } from '../../shared/Context';
+import { SpacingProps } from '../space/types';
+import { SkeletonShow } from '../Skeleton';
+type DateFormatProps = SpacingProps & {
+    /**
+     * The date that will be formatted.
+     */
+    value?: Date | string;
+    /**
+     * Defines the style used to format the date. Defaults to `long`.
+     * Defaults to `long`.
+     */
+    dateStyle?: Intl.DateTimeFormatOptions['dateStyle'];
+    /**
+     * A string in {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument | Intl.DateTimeFormat locale} accepted format.
+     * Defaults to `nb-NO`
+     */
+    locale?: InternalLocale;
+    /**
+     * If set to `true`, an overlaying skeleton with animation will be shown.
+     */
+    skeleton?: SkeletonShow;
+    children?: React.ReactNode;
+};
+declare function DateFormat(props: DateFormatProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DateFormat {
+    var _supportsSpacingProps: boolean;
+}
+export default DateFormat;

package/es/components/date-format/DateFormat.js

@@ -0,0 +1,74 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext, useMemo } from 'react';
+import SharedContext from '../../shared/Context';
+import { convertJsxToString } from '../../shared/component-helper';
+import { convertStringToDate } from '../date-picker/DatePickerCalc';
+import { formatDate } from './DateFormatUtils';
+import { format } from 'date-fns';
+import classnames from 'classnames';
+import { createSpacingClasses } from '../space/SpacingUtils';
+import { createSkeletonClass, skeletonDOMAttributes } from '../skeleton/SkeletonHelper';
+import { useTranslation } from '../../shared';
+function DateFormat(props) {
+  const context = useContext(SharedContext);
+  const {
+    invalidDate
+  } = useTranslation().DateFormat;
+  const {
+    value,
+    locale = context.locale,
+    dateStyle = 'long',
+    children,
+    skeleton
+  } = props;
+  const date = useMemo(() => getDate({
+    value,
+    children
+  }), [value, children]);
+  const attributes = {};
+  skeletonDOMAttributes(attributes, skeleton, context);
+  if (!date) {
+    return React.createElement("span", {
+      className: "dnb-date-format"
+    }, invalidDate.replace('{value}', getInvalidValue({
+      value,
+      children
+    })));
+  }
+  return React.createElement("time", _extends({
+    className: classnames('dnb-date-format', createSpacingClasses(props), createSkeletonClass('font', skeleton, context)),
+    lang: locale,
+    dateTime: format(date, 'yyyy-MM-dd')
+  }, attributes), formatDate(date, {
+    locale,
+    options: {
+      dateStyle
+    }
+  }));
+}
+function getDate({
+  value,
+  children
+}) {
+  if (value) {
+    return convertStringToDate(value);
+  }
+  return convertStringToDate(convertJsxToString(children));
+}
+function getInvalidValue({
+  value,
+  children
+}) {
+  if (value instanceof Date) {
+    return value.toString();
+  }
+  if (children !== undefined && value === undefined) {
+    return String(children);
+  }
+  return value;
+}
+export default DateFormat;
+DateFormat._supportsSpacingProps = true;
+//# sourceMappingURL=DateFormat.js.map

package/es/components/date-format/DateFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormat.js","names":["React","useContext","useMemo","SharedContext","convertJsxToString","convertStringToDate","formatDate","format","classnames","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","useTranslation","DateFormat","props","context","invalidDate","value","locale","dateStyle","children","skeleton","date","getDate","attributes","createElement","className","replace","getInvalidValue","_extends","lang","dateTime","options","Date","toString","undefined","String","_supportsSpacingProps"],"sources":["../../../../src/components/date-format/DateFormat.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport SharedContext, { InternalLocale } from '../../shared/Context'\nimport { convertJsxToString } from '../../shared/component-helper'\nimport { convertStringToDate } from '../date-picker/DatePickerCalc'\nimport { formatDate } from './DateFormatUtils'\nimport { format } from 'date-fns'\nimport { SpacingProps } from '../space/types'\nimport classnames from 'classnames'\nimport { createSpacingClasses } from '../space/SpacingUtils'\nimport { SkeletonShow } from '../Skeleton'\nimport {\n  createSkeletonClass,\n  skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\nimport { useTranslation } from '../../shared'\n\ntype DateFormatProps = SpacingProps & {\n  /**\n   * The date that will be formatted.\n   */\n  value?: Date | string\n\n  /**\n   * Defines the style used to format the date. Defaults to `long`.\n   * Defaults to `long`.\n   */\n  dateStyle?: Intl.DateTimeFormatOptions['dateStyle']\n  /**\n   * A string in {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument | Intl.DateTimeFormat locale} accepted format.\n   * Defaults to `nb-NO`\n   */\n  locale?: InternalLocale\n  /**\n   * If set to `true`, an overlaying skeleton with animation will be shown.\n   */\n  skeleton?: SkeletonShow\n  children?: React.ReactNode\n}\n\nfunction DateFormat(props: DateFormatProps) {\n  const context = useContext(SharedContext)\n  const { invalidDate } = useTranslation().DateFormat\n\n  const {\n    value,\n    locale = context.locale,\n    dateStyle = 'long',\n    children,\n    skeleton,\n  } = props\n\n  const date = useMemo(\n    () => getDate({ value, children }),\n    [value, children]\n  )\n\n  const attributes = {}\n  skeletonDOMAttributes(attributes, skeleton, context)\n\n  if (!date) {\n    return (\n      <span className=\"dnb-date-format\">\n        {invalidDate.replace(\n          '{value}',\n          getInvalidValue({ value, children })\n        )}\n      </span>\n    )\n  }\n\n  return (\n    <time\n      className={classnames(\n        'dnb-date-format',\n        createSpacingClasses(props),\n        createSkeletonClass('font', skeleton, context)\n      )}\n      lang={locale}\n      // Makes sure that screen readers are reading the date correctly in the system language.\n      dateTime={format(date, 'yyyy-MM-dd')}\n      {...attributes}\n    >\n      {formatDate(date, {\n        locale,\n        options: {\n          dateStyle,\n        },\n      })}\n    </time>\n  )\n}\n\nfunction getDate({\n  value,\n  children,\n}: Pick<DateFormatProps, 'value' | 'children'>) {\n  if (value) {\n    return convertStringToDate(value)\n  }\n\n  return convertStringToDate(convertJsxToString(children))\n}\n\nfunction getInvalidValue({\n  value,\n  children,\n}: Pick<DateFormatProps, 'value' | 'children'>) {\n  if (value instanceof Date) {\n    return value.toString()\n  }\n\n  if (children !== undefined && value === undefined) {\n    return String(children)\n  }\n\n  return value\n}\n\nexport default DateFormat\n\nDateFormat._supportsSpacingProps = true\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,aAAa,MAA0B,sBAAsB;AACpE,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,mBAAmB,QAAQ,+BAA+B;AACnE,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,MAAM,QAAQ,UAAU;AAEjC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,SACEC,mBAAmB,EACnBC,qBAAqB,QAChB,4BAA4B;AACnC,SAASC,cAAc,QAAQ,cAAc;AAyB7C,SAASC,UAAUA,CAACC,KAAsB,EAAE;EAC1C,MAAMC,OAAO,GAAGd,UAAU,CAACE,aAAa,CAAC;EACzC,MAAM;IAAEa;EAAY,CAAC,GAAGJ,cAAc,CAAC,CAAC,CAACC,UAAU;EAEnD,MAAM;IACJI,KAAK;IACLC,MAAM,GAAGH,OAAO,CAACG,MAAM;IACvBC,SAAS,GAAG,MAAM;IAClBC,QAAQ;IACRC;EACF,CAAC,GAAGP,KAAK;EAET,MAAMQ,IAAI,GAAGpB,OAAO,CAClB,MAAMqB,OAAO,CAAC;IAAEN,KAAK;IAAEG;EAAS,CAAC,CAAC,EAClC,CAACH,KAAK,EAAEG,QAAQ,CAClB,CAAC;EAED,MAAMI,UAAU,GAAG,CAAC,CAAC;EACrBb,qBAAqB,CAACa,UAAU,EAAEH,QAAQ,EAAEN,OAAO,CAAC;EAEpD,IAAI,CAACO,IAAI,EAAE;IACT,OACEtB,KAAA,CAAAyB,aAAA;MAAMC,SAAS,EAAC;IAAiB,GAC9BV,WAAW,CAACW,OAAO,CAClB,SAAS,EACTC,eAAe,CAAC;MAAEX,KAAK;MAAEG;IAAS,CAAC,CACrC,CACI,CAAC;EAEX;EAEA,OACEpB,KAAA,CAAAyB,aAAA,SAAAI,QAAA;IACEH,SAAS,EAAElB,UAAU,CACnB,iBAAiB,EACjBC,oBAAoB,CAACK,KAAK,CAAC,EAC3BJ,mBAAmB,CAAC,MAAM,EAAEW,QAAQ,EAAEN,OAAO,CAC/C,CAAE;IACFe,IAAI,EAAEZ,MAAO;IAEba,QAAQ,EAAExB,MAAM,CAACe,IAAI,EAAE,YAAY;EAAE,GACjCE,UAAU,GAEblB,UAAU,CAACgB,IAAI,EAAE;IAChBJ,MAAM;IACNc,OAAO,EAAE;MACPb;IACF;EACF,CAAC,CACG,CAAC;AAEX;AAEA,SAASI,OAAOA,CAAC;EACfN,KAAK;EACLG;AAC2C,CAAC,EAAE;EAC9C,IAAIH,KAAK,EAAE;IACT,OAAOZ,mBAAmB,CAACY,KAAK,CAAC;EACnC;EAEA,OAAOZ,mBAAmB,CAACD,kBAAkB,CAACgB,QAAQ,CAAC,CAAC;AAC1D;AAEA,SAASQ,eAAeA,CAAC;EACvBX,KAAK;EACLG;AAC2C,CAAC,EAAE;EAC9C,IAAIH,KAAK,YAAYgB,IAAI,EAAE;IACzB,OAAOhB,KAAK,CAACiB,QAAQ,CAAC,CAAC;EACzB;EAEA,IAAId,QAAQ,KAAKe,SAAS,IAAIlB,KAAK,KAAKkB,SAAS,EAAE;IACjD,OAAOC,MAAM,CAAChB,QAAQ,CAAC;EACzB;EAEA,OAAOH,KAAK;AACd;AAEA,eAAeJ,UAAU;AAEzBA,UAAU,CAACwB,qBAAqB,GAAG,IAAI","ignoreList":[]}

package/es/components/date-format/DateFormatDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../shared/types';
+export declare const DateFormatProperties: PropertiesTableProps;

package/es/components/date-format/DateFormatDocs.js

@@ -0,0 +1,28 @@
+export const DateFormatProperties = {
+  value: {
+    doc: 'The date that will be formatted.',
+    type: ['Date', 'string'],
+    status: 'optional'
+  },
+  dateStyle: {
+    doc: 'Defines the style used to format the date. Defaults to `long`.',
+    type: ['long', 'medium', 'short', 'full'],
+    status: 'optional'
+  },
+  locale: {
+    doc: 'A string in [Intl.DateTimeFormat locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) format. Defaults to `nb-NO`.',
+    type: 'string',
+    status: 'optional'
+  },
+  skeleton: {
+    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=DateFormatDocs.js.map

package/es/components/date-format/DateFormatDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormatDocs.js","names":["DateFormatProperties","value","doc","type","status","dateStyle","locale","skeleton"],"sources":["../../../../src/components/date-format/DateFormatDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../shared/types'\n\nexport const DateFormatProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The date that will be formatted.',\n    type: ['Date', 'string'],\n    status: 'optional',\n  },\n  dateStyle: {\n    doc: 'Defines the style used to format the date. Defaults to `long`.',\n    type: ['long', 'medium', 'short', 'full'],\n    status: 'optional',\n  },\n  locale: {\n    doc: 'A string in [Intl.DateTimeFormat locale](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument) format. Defaults to `nb-NO`.',\n    type: 'string',\n    status: 'optional',\n  },\n  skeleton: {\n    doc: 'If set to `true`, an overlaying skeleton with animation will be shown.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,oBAA0C,GAAG;EACxDC,KAAK,EAAE;IACLC,GAAG,EAAE,kCAAkC;IACvCC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;IACxBC,MAAM,EAAE;EACV,CAAC;EACDC,SAAS,EAAE;IACTH,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACzCC,MAAM,EAAE;EACV,CAAC;EACDE,MAAM,EAAE;IACNJ,GAAG,EAAE,+KAA+K;IACpLC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,QAAQ,EAAE;IACRL,GAAG,EAAE,wEAAwE;IAC7EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/es/components/date-format/DateFormatUtils.d.ts

@@ -0,0 +1,11 @@
+import { AnyLocale } from '../../shared/Context';
+import { DateType } from '../date-picker/DatePickerContext';
+export type FormatDateOptions = {
+    locale?: AnyLocale;
+    options?: Intl.DateTimeFormatOptions;
+};
+export declare function formatDate(dateValue: DateType, { locale, options, }?: FormatDateOptions): string;
+export declare function formatDateRange(dates: {
+    startDate: DateType;
+    endDate: DateType;
+}, { locale, options, }?: FormatDateOptions): string;

package/es/components/date-format/DateFormatUtils.js

@@ -0,0 +1,27 @@
+import { LOCALE as defaultLocale } from '../../shared/defaults';
+import { convertStringToDate } from '../date-picker/DatePickerCalc';
+export function formatDate(dateValue, {
+  locale = defaultLocale,
+  options = {
+    dateStyle: 'short'
+  }
+} = {}) {
+  const date = convertStringToDate(dateValue);
+  return typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, options).format(date) : date.toLocaleString(locale, options);
+}
+export function formatDateRange(dates, {
+  locale = defaultLocale,
+  options = {
+    dateStyle: 'long'
+  }
+} = {}) {
+  const startDate = convertStringToDate(dates.startDate);
+  const endDate = convertStringToDate(dates.endDate);
+  if (typeof Intl !== 'undefined') {
+    return new Intl.DateTimeFormat(locale, options).formatRange(startDate, endDate);
+  }
+  const startDateString = startDate.toLocaleString(locale, options);
+  const endDateString = endDate.toLocaleString(locale, options);
+  return `${startDateString}-${endDateString}`;
+}
+//# sourceMappingURL=DateFormatUtils.js.map

package/es/components/date-format/DateFormatUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormatUtils.js","names":["LOCALE","defaultLocale","convertStringToDate","formatDate","dateValue","locale","options","dateStyle","date","Intl","DateTimeFormat","format","toLocaleString","formatDateRange","dates","startDate","endDate","formatRange","startDateString","endDateString"],"sources":["../../../../src/components/date-format/DateFormatUtils.ts"],"sourcesContent":["import { AnyLocale } from '../../shared/Context'\nimport { LOCALE as defaultLocale } from '../../shared/defaults'\nimport { convertStringToDate } from '../date-picker/DatePickerCalc'\nimport { DateType } from '../date-picker/DatePickerContext'\n\nexport type FormatDateOptions = {\n  locale?: AnyLocale\n  options?: Intl.DateTimeFormatOptions\n}\n\nexport function formatDate(\n  dateValue: DateType,\n  {\n    locale = defaultLocale,\n    options = { dateStyle: 'short' },\n  }: FormatDateOptions = {}\n) {\n  const date = convertStringToDate(dateValue)\n\n  return typeof Intl !== 'undefined'\n    ? new Intl.DateTimeFormat(locale, options).format(date)\n    : date.toLocaleString(locale, options)\n}\n\nexport function formatDateRange(\n  dates: { startDate: DateType; endDate: DateType },\n  {\n    locale = defaultLocale,\n    options = { dateStyle: 'long' },\n  }: FormatDateOptions = {}\n) {\n  const startDate = convertStringToDate(dates.startDate)\n  const endDate = convertStringToDate(dates.endDate)\n\n  if (typeof Intl !== 'undefined') {\n    return new Intl.DateTimeFormat(locale, options).formatRange(\n      startDate,\n      endDate\n    )\n  }\n\n  const startDateString = startDate.toLocaleString(locale, options)\n  const endDateString = endDate.toLocaleString(locale, options)\n\n  return `${startDateString}-${endDateString}`\n}\n"],"mappings":"AACA,SAASA,MAAM,IAAIC,aAAa,QAAQ,uBAAuB;AAC/D,SAASC,mBAAmB,QAAQ,+BAA+B;AAQnE,OAAO,SAASC,UAAUA,CACxBC,SAAmB,EACnB;EACEC,MAAM,GAAGJ,aAAa;EACtBK,OAAO,GAAG;IAAEC,SAAS,EAAE;EAAQ;AACd,CAAC,GAAG,CAAC,CAAC,EACzB;EACA,MAAMC,IAAI,GAAGN,mBAAmB,CAACE,SAAS,CAAC;EAE3C,OAAO,OAAOK,IAAI,KAAK,WAAW,GAC9B,IAAIA,IAAI,CAACC,cAAc,CAACL,MAAM,EAAEC,OAAO,CAAC,CAACK,MAAM,CAACH,IAAI,CAAC,GACrDA,IAAI,CAACI,cAAc,CAACP,MAAM,EAAEC,OAAO,CAAC;AAC1C;AAEA,OAAO,SAASO,eAAeA,CAC7BC,KAAiD,EACjD;EACET,MAAM,GAAGJ,aAAa;EACtBK,OAAO,GAAG;IAAEC,SAAS,EAAE;EAAO;AACb,CAAC,GAAG,CAAC,CAAC,EACzB;EACA,MAAMQ,SAAS,GAAGb,mBAAmB,CAACY,KAAK,CAACC,SAAS,CAAC;EACtD,MAAMC,OAAO,GAAGd,mBAAmB,CAACY,KAAK,CAACE,OAAO,CAAC;EAElD,IAAI,OAAOP,IAAI,KAAK,WAAW,EAAE;IAC/B,OAAO,IAAIA,IAAI,CAACC,cAAc,CAACL,MAAM,EAAEC,OAAO,CAAC,CAACW,WAAW,CACzDF,SAAS,EACTC,OACF,CAAC;EACH;EAEA,MAAME,eAAe,GAAGH,SAAS,CAACH,cAAc,CAACP,MAAM,EAAEC,OAAO,CAAC;EACjE,MAAMa,aAAa,GAAGH,OAAO,CAACJ,cAAc,CAACP,MAAM,EAAEC,OAAO,CAAC;EAE7D,OAAO,GAAGY,eAAe,IAAIC,aAAa,EAAE;AAC9C","ignoreList":[]}

package/es/components/date-format/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Component Entry
+ *
+ */
+import DateFormat from './DateFormat';
+export default DateFormat;
+export * from './DateFormat';