@dnb/eufemia 10.75.4 → 10.76.1

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_useId","_filterValidProps","_withSnakeCaseProps","_FormLabel","_FormStatus","_CheckIcon","_AlignmentHelper","_span","_span2","_excluded","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","indexOf","propertyIsEnumerable","defaultProps","statusState","Checkbox","localProps","context","useContext","Context","extractPropsFromContext","useCallback","extendPropsWithContext","convertSnakeCaseProps","skeleton","pickFormElementProps","FormRow","formElement","props","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","className","id","idProp","indeterminate","checked","onChange","onClick","innerRef","rest","forceUpdate","useReducer","useId","isFn","refHook","useRef","ref","useEffect","current","preventChangeRef","isCheckedRef","prevCheckedRef","callOnChange","args","handleChange","event","updatedCheck","focus","onChangeHandler","onClickHandler","preventDefault","target","onKeyDownHandler","keycode","showStatus","getStatusState","handleInputAttributes","inputParams","combineDescribedBy","validateDOMAttributes","skeletonDOMAttributes","mainParams","classnames","createSkeletonClass","createSpacingClasses","statusComp","createElement","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","name","type","onKeyDown","_default","exports"],"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","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_componentHelper","_AlignmentHelper2","_SpacingHelper","_SkeletonHelper","_Context","_Suffix","_useId","_filterValidProps","_withSnakeCaseProps","_FormLabel","_FormStatus","_CheckIcon","_AlignmentHelper","_span","_span2","_excluded","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","indexOf","propertyIsEnumerable","defaultProps","statusState","Checkbox","localProps","context","useContext","Context","extractPropsFromContext","useCallback","extendPropsWithContext","convertSnakeCaseProps","skeleton","pickFormElementProps","FormRow","formElement","props","status","statusProps","statusNoAnimation","globalStatus","suffix","size","label","labelPosition","labelSrOnly","title","element","disabled","readOnly","className","id","idProp","indeterminate","checked","onChange","onClick","innerRef","rest","forceUpdate","useReducer","useId","isFn","refHook","useRef","ref","useEffect","current","preventChangeRef","isCheckedRef","prevCheckedRef","callOnChange","args","handleChange","event","updatedCheck","focus","onChangeHandler","onClickHandler","preventDefault","target","onKeyDownHandler","keycode","showStatus","getStatusState","handleInputAttributes","inputParams","combineDescribedBy","validateDOMAttributes","skeletonDOMAttributes","mainParams","classnames","createSkeletonClass","createSpacingClasses","statusComp","createElement","show","text_id","width_selector","text","state","no_animation","Element","forId","srOnly","name","type","onKeyDown","_default","exports"],"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":"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","ignoreList":[]}

package/cjs/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/cjs/components/date-format/DateFormat.js

@@ -0,0 +1,86 @@
+"use strict";
+"use client";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.string.replace.js");
+var _react = _interopRequireWildcard(require("react"));
+var _Context = _interopRequireDefault(require("../../shared/Context"));
+var _componentHelper = require("../../shared/component-helper");
+var _DatePickerCalc = require("../date-picker/DatePickerCalc");
+var _DateFormatUtils = require("./DateFormatUtils");
+var _dateFns = require("date-fns");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _SpacingUtils = require("../space/SpacingUtils");
+var _SkeletonHelper = require("../skeleton/SkeletonHelper");
+var _shared = require("../../shared");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function DateFormat(props) {
+  const context = (0, _react.useContext)(_Context.default);
+  const {
+    invalidDate
+  } = (0, _shared.useTranslation)().DateFormat;
+  const {
+    value,
+    locale = context.locale,
+    dateStyle = 'long',
+    children,
+    skeleton
+  } = props;
+  const date = (0, _react.useMemo)(() => getDate({
+    value,
+    children
+  }), [value, children]);
+  const attributes = {};
+  (0, _SkeletonHelper.skeletonDOMAttributes)(attributes, skeleton, context);
+  if (!date) {
+    return _react.default.createElement("span", {
+      className: "dnb-date-format"
+    }, invalidDate.replace('{value}', getInvalidValue({
+      value,
+      children
+    })));
+  }
+  return _react.default.createElement("time", _extends({
+    className: (0, _classnames.default)('dnb-date-format', (0, _SpacingUtils.createSpacingClasses)(props), (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context)),
+    lang: locale,
+    dateTime: (0, _dateFns.format)(date, 'yyyy-MM-dd')
+  }, attributes), (0, _DateFormatUtils.formatDate)(date, {
+    locale,
+    options: {
+      dateStyle
+    }
+  }));
+}
+function getDate(_ref) {
+  let {
+    value,
+    children
+  } = _ref;
+  if (value) {
+    return (0, _DatePickerCalc.convertStringToDate)(value);
+  }
+  return (0, _DatePickerCalc.convertStringToDate)((0, _componentHelper.convertJsxToString)(children));
+}
+function getInvalidValue(_ref2) {
+  let {
+    value,
+    children
+  } = _ref2;
+  if (value instanceof Date) {
+    return value.toString();
+  }
+  if (children !== undefined && value === undefined) {
+    return String(children);
+  }
+  return value;
+}
+var _default = exports.default = DateFormat;
+DateFormat._supportsSpacingProps = true;
+//# sourceMappingURL=DateFormat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormat.js","names":["_react","_interopRequireWildcard","require","_Context","_interopRequireDefault","_componentHelper","_DatePickerCalc","_DateFormatUtils","_dateFns","_classnames","_SpacingUtils","_SkeletonHelper","_shared","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","DateFormat","props","context","useContext","SharedContext","invalidDate","useTranslation","value","locale","dateStyle","children","skeleton","date","useMemo","getDate","attributes","skeletonDOMAttributes","createElement","className","replace","getInvalidValue","classnames","createSpacingClasses","createSkeletonClass","lang","dateTime","format","formatDate","options","_ref","convertStringToDate","convertJsxToString","_ref2","Date","toString","undefined","String","_default","exports","_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":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateFormatProperties = void 0;
+const DateFormatProperties = exports.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/cjs/components/date-format/DateFormatDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormatDocs.js","names":["DateFormatProperties","exports","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":";;;;;;AAEO,MAAMA,oBAA0C,GAAAC,OAAA,CAAAD,oBAAA,GAAG;EACxDE,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/cjs/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/cjs/components/date-format/DateFormatUtils.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatDate = formatDate;
+exports.formatDateRange = formatDateRange;
+var _defaults = require("../../shared/defaults");
+var _DatePickerCalc = require("../date-picker/DatePickerCalc");
+function formatDate(dateValue) {
+  let {
+    locale = _defaults.LOCALE,
+    options = {
+      dateStyle: 'short'
+    }
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const date = (0, _DatePickerCalc.convertStringToDate)(dateValue);
+  return typeof Intl !== 'undefined' ? new Intl.DateTimeFormat(locale, options).format(date) : date.toLocaleString(locale, options);
+}
+function formatDateRange(dates) {
+  let {
+    locale = _defaults.LOCALE,
+    options = {
+      dateStyle: 'long'
+    }
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const startDate = (0, _DatePickerCalc.convertStringToDate)(dates.startDate);
+  const endDate = (0, _DatePickerCalc.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/cjs/components/date-format/DateFormatUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFormatUtils.js","names":["_defaults","require","_DatePickerCalc","formatDate","dateValue","locale","defaultLocale","options","dateStyle","arguments","length","undefined","date","convertStringToDate","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,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAQO,SAASE,UAAUA,CACxBC,SAAmB,EAKnB;EAAA,IAJA;IACEC,MAAM,GAAGC,gBAAa;IACtBC,OAAO,GAAG;MAAEC,SAAS,EAAE;IAAQ;EACd,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEzB,MAAMG,IAAI,GAAG,IAAAC,mCAAmB,EAACT,SAAS,CAAC;EAE3C,OAAO,OAAOU,IAAI,KAAK,WAAW,GAC9B,IAAIA,IAAI,CAACC,cAAc,CAACV,MAAM,EAAEE,OAAO,CAAC,CAACS,MAAM,CAACJ,IAAI,CAAC,GACrDA,IAAI,CAACK,cAAc,CAACZ,MAAM,EAAEE,OAAO,CAAC;AAC1C;AAEO,SAASW,eAAeA,CAC7BC,KAAiD,EAKjD;EAAA,IAJA;IACEd,MAAM,GAAGC,gBAAa;IACtBC,OAAO,GAAG;MAAEC,SAAS,EAAE;IAAO;EACb,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAEzB,MAAMW,SAAS,GAAG,IAAAP,mCAAmB,EAACM,KAAK,CAACC,SAAS,CAAC;EACtD,MAAMC,OAAO,GAAG,IAAAR,mCAAmB,EAACM,KAAK,CAACE,OAAO,CAAC;EAElD,IAAI,OAAOP,IAAI,KAAK,WAAW,EAAE;IAC/B,OAAO,IAAIA,IAAI,CAACC,cAAc,CAACV,MAAM,EAAEE,OAAO,CAAC,CAACe,WAAW,CACzDF,SAAS,EACTC,OACF,CAAC;EACH;EAEA,MAAME,eAAe,GAAGH,SAAS,CAACH,cAAc,CAACZ,MAAM,EAAEE,OAAO,CAAC;EACjE,MAAMiB,aAAa,GAAGH,OAAO,CAACJ,cAAc,CAACZ,MAAM,EAAEE,OAAO,CAAC;EAE7D,OAAO,GAAGgB,eAAe,IAAIC,aAAa,EAAE;AAC9C","ignoreList":[]}

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

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

package/cjs/components/date-format/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _DateFormat = _interopRequireWildcard(require("./DateFormat"));
+Object.keys(_DateFormat).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DateFormat[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DateFormat[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _DateFormat.default;
+//# sourceMappingURL=index.js.map

package/cjs/components/date-format/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_DateFormat","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set","_default","DateFormat"],"sources":["../../../../src/components/date-format/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport DateFormat from './DateFormat'\nexport default DateFormat\nexport * from './DateFormat'\n"],"mappings":";;;;;;;;AAKA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEAC,MAAA,CAAAC,IAAA,CAAAJ,WAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,WAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,WAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAA4B,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAL,GAAA,CAAAE,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAtB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAuB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAAnB,cAAA,CAAAC,IAAA,CAAAO,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAtB,MAAA,CAAAuB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAd,GAAA,IAAAc,CAAA,CAAAC,GAAA,IAAA1B,MAAA,CAAAS,cAAA,CAAAW,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA;AAAA,IAAAO,QAAA,GAAAnB,OAAA,CAAAU,OAAA,GADbU,mBAAU","ignoreList":[]}

package/cjs/components/date-picker/DatePicker.js

@@ -26,7 +26,7 @@ var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _shared = require("../../shared");
 var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
 var _DatePickerPortal = _interopRequireDefault(require("./DatePickerPortal"));
-var _DatePickerCalc = require("./DatePickerCalc");
+var _DateFormatUtils = require("../date-format/DateFormatUtils");
 var _AlignmentHelper;
 const _excluded = ["hidePicker"],
   _excluded2 = ["label", "title", "labelDirection", "labelSrOnly", "onlyMonth", "hideLastWeek", "disableAutofocus", "firstDay", "resetDate", "link", "sync", "inputElement", "addonElement", "shortcuts", "disabled", "stretch", "skeleton", "size", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "suffix", "maskOrder", "maskPlaceholder", "submitButtonText", "cancelButtonText", "resetButtonText", "showResetButton", "className", "tooltip", "skipPortal", "labelAlignment"];
@@ -274,17 +274,14 @@ function DatePicker(externalProps) {
     }
     const options = {
       locale: context.locale,
-      formatOptions: {
-        weekday: 'long',
-        month: 'long',
-        day: 'numeric',
-        year: 'numeric'
+      options: {
+        dateStyle: 'full'
       }
     };
-    return range && endDate ? selectedDateRange.replace(/%s/, (0, _DatePickerCalc.formatDateRange)({
+    return range && endDate ? selectedDateRange.replace(/%s/, (0, _DateFormatUtils.formatDateRange)({
       startDate,
       endDate
-    }, options)) : selectedDate.replace(/%s/, (0, _DatePickerCalc.formatDate)(startDate, options));
+    }, options)) : selectedDate.replace(/%s/, (0, _DateFormatUtils.formatDate)(startDate, options));
   }, [range, translation, dates, context.locale]);
   const mainParams = {
     className: (0, _classnames.default)("dnb-date-picker dnb-form-component", (range || showSubmitButton || showCancelButton || showResetButton) && 'dnb-date-picker--show-footer', (0, _SpacingHelper.createSpacingClasses)(props), className, status && `dnb-date-picker__status--${statusState}`, labelDirection && `dnb-date-picker--${labelDirection}`, opened && 'dnb-date-picker--opened', hidden && 'dnb-date-picker--hidden', showInput && 'dnb-date-picker--show-input', label && labelAlignment === 'right' && 'dnb-date-picker__input--label-alignment-right', alignPicker && `dnb-date-picker--${alignPicker}`, stretch && `dnb-date-picker--stretch`, size && `dnb-date-picker--${size}`),