npm - @dnb/eufemia - Versions diffs - 10.18.0 → 10.19.0 - Mend

@dnb/eufemia 10.18.0 → 10.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (729) hide show

package/es/components/input-masked/MultiInputMask.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","onBlur","onFocus","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","mask","masks","Set","forEach","add","String","_ref2","placeholderCharacter","attributes","_excluded2","shouldHighlight","test","markupId","Fragment","placeholderChar","guide","showMask","keepCharPositions","_ref3","target","event","_excluded3","select","_objectSpread","removePlaceholder","htmlFor","hidden","placeholder","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n /*\n Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n /\n id: T\n /\n Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n /\n label: React.ReactNode\n /\n Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n /\n mask: RegExp[]\n /\n Sets the placeholder character used for the input.\n /\n placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' \| 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n // eslint-disable-next-line no-unused-vars\n [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n /\n The label describing the group of inputs inside the components.\n /\n label?: React.ReactNode\n /\n Use to change the label layout direction. Defaults to `horizontal`.\n /\n labelDirection?: 'vertical' \| 'horizontal'\n /\n Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n /\n inputs: MultiInputMaskInput<T>[]\n /\n Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n /\n values?: MultiInputMaskValue<T>\n /\n Defines the delimiter used to separate the inputs inside the component.\n /\n delimiter?: string\n /\n Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n /\n onChange?: (values: MultiInputMaskValue<T>) => void\n /\n Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n /\n onFocus?: (values: MultiInputMaskValue<T>) => void\n /\n Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n /\n onBlur?: (values: MultiInputMaskValue<T>) => void\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 Set it to `true` in order to stretch the input to the available space. Defaults to false.\n /\n stretch?: boolean\n /\n Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n /\n suffix?: React.ReactNode\n} & Omit<\n React.HTMLProps<HTMLInputElement>,\n 'onChange' \| 'onFocus' \| 'onBlur' \| 'ref' \| 'value' \| 'label'\n> &\n SpacingProps\n\nfunction MultiInputMask<T extends string>({\n label,\n labelDirection = 'horizontal',\n inputs,\n delimiter,\n onChange: onChangeExternal,\n disabled,\n status,\n statusState,\n values: defaultValues,\n className,\n stretch,\n inputMode,\n suffix,\n onBlur,\n onFocus,\n ...props\n}: MultiInputMaskProps<T>) {\n const [values, onChange] = useMultiInputValue({\n inputs,\n defaultValues,\n callback: onChangeExternal,\n })\n\n const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n const { onKeyDown } = useHandleCursorPosition(\n inputRefs.current,\n getKeysToHandle()\n )\n\n const WrapperElement = label ? 'fieldset' : 'div'\n\n return (\n <WrapperElement\n className={classnames(\n 'dnb-multi-input-mask__fieldset',\n labelDirection === 'horizontal' &&\n 'dnb-multi-input-mask__fieldset--horizontal',\n createSpacingClasses(props)\n )}\n >\n {label && (\n <FormLabel\n className={classnames(\n 'dnb-multi-input-mask__legend',\n labelDirection === 'horizontal' &&\n 'dnb-multi-input-mask__legend--horizontal'\n )}\n element=\"legend\"\n onClick={onLegendClick}\n disabled={disabled}\n vertical={labelDirection === 'vertical'}\n >\n {/ This <span/> wrapper is needed to make hover work in Safari Desktop */}\n <span>{label}</span>\n </FormLabel>\n )}\n <Input\n {...props}\n className={classnames('dnb-multi-input-mask', className)}\n disabled={disabled}\n status={status}\n status_state={statusState}\n suffix={suffix}\n stretch={stretch}\n input_element={inputs.map((input, index) => (\n <MultiInputMaskInput\n key={input.id}\n {...input}\n inputMode={inputMode}\n value={values[input.id]}\n delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n onKeyDown={onKeyDown}\n onChange={onChange}\n onFocus={() => {\n if (onFocus) {\n onFocus(values)\n }\n }}\n onBlur={() => {\n if (onBlur) {\n onBlur(values)\n }\n }}\n disabled={disabled}\n inputRef={getInputRef}\n />\n ))}\n />\n </WrapperElement>\n )\n\n // Event handlers\n function onLegendClick() {\n if (disabled) {\n return\n }\n\n const firstInput = inputRefs.current[0].current\n\n firstInput.focus()\n firstInput.setSelectionRange(0, 0)\n }\n\n // Utilities\n function getInputRef(ref: any) {\n const inputRef = ref?.inputRef\n\n if (inputRef && !inputRefs.current.includes(inputRef)) {\n inputRefs.current.push(inputRef)\n }\n }\n\n function getKeysToHandle() {\n const uniqueMasks = getUniqueMasks()\n\n // Return the only one RegExp since all the inputs are using the same mask\n if (uniqueMasks.size === 1) {\n const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n return new RegExp(pattern)\n }\n\n // If there are multiple types of masks used, then map the maps to an object based on input ids\n // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n return inputs.reduce(\n (keys, { id, mask }) => {\n keys[id] = mask\n\n return keys\n },\n {} as Record<T, RegExp[]>\n )\n }\n\n function getUniqueMasks() {\n const masks = new Set()\n\n inputs.forEach((input) => {\n input.mask.forEach((pattern) => masks.add(String(pattern)))\n })\n\n return masks\n }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n MultiInputMaskInput<T> & {\n id: MultiInputMaskInput<T>['id']\n label: MultiInputMaskInput<T>['label']\n value: string\n mask: MultiInputMaskInput<T>['mask']\n placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n delimiter?: MultiInputMaskProps<T>['delimiter']\n disabled: boolean\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n onChange: (\n id: string,\n placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n ) => void\n inputRef: any\n }\n\nfunction MultiInputMaskInput<T extends string>({\n id,\n label,\n value,\n mask,\n placeholderCharacter,\n delimiter,\n disabled,\n inputRef,\n onKeyDown,\n onChange,\n onBlur,\n onFocus,\n ...attributes\n}: MultiInputMaskInputProps<T>) {\n const shouldHighlight = !disabled && /\\w+/.test(value)\n const markupId = `${id}-${makeUniqueId()}`\n\n return (\n <>\n <TextMask\n id={`${markupId}__input`}\n data-mask-id={id}\n className={classnames(\n 'dnb-input__input',\n 'dnb-multi-input-mask__input',\n shouldHighlight && 'dnb-multi-input-mask__input--highlight'\n )}\n disabled={disabled}\n size={mask.length}\n mask={mask}\n value={value ?? ''}\n placeholderChar={placeholderCharacter}\n guide={true}\n showMask={true}\n keepCharPositions={false} // so we can overwrite next value, if it already exists\n aria-labelledby={`${markupId}__label`}\n ref={inputRef}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n onFocus={({ target, ...event }) => {\n target.focus()\n target.select()\n\n if (onFocus) {\n onFocus({ target, ...event })\n }\n }}\n onChange={(event) => {\n onChange(\n id,\n removePlaceholder(event.target.value, placeholderCharacter)\n )\n }}\n {...attributes}\n />\n <label\n id={`${markupId}__label`}\n htmlFor={`${markupId}__input`}\n hidden\n >\n {label}\n </label>\n {delimiter && (\n <span\n aria-hidden\n className={classnames(\n 'dnb-multi-input-mask__delimiter',\n shouldHighlight && 'dnb-multi-input-mask__delimiter--highlight'\n )}\n >\n {delimiter}\n </span>\n )}\n </>\n )\n\n function removePlaceholder(value: string, placeholder: string) {\n return value.replace(RegExp(placeholder, 'gm'), '')\n }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}
1	+ {"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","id","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","onBlur","onFocus","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","_ref2","index","inputId","rest","_excluded2","MultiInputMaskInput","key","length","undefined","getInputRef","value","firstInput","focus","setSelectionRange","ref","inputRef","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","mask","masks","Set","forEach","input","add","String","_ref3","placeholderCharacter","attributes","_excluded3","shouldHighlight","test","Fragment","placeholderChar","guide","showMask","keepCharPositions","_ref4","target","event","_excluded4","select","_objectSpread","removePlaceholder","htmlFor","hidden","placeholder","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n /*\n Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n /\n id: T\n /\n Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n /\n label: React.ReactNode\n /\n Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n /\n mask: RegExp[]\n /\n Sets the placeholder character used for the input.\n /\n placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' \| 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n // eslint-disable-next-line no-unused-vars\n [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n /\n The label describing the group of inputs inside the components.\n /\n label?: React.ReactNode\n /\n Use to change the label layout direction. Defaults to `horizontal`.\n /\n labelDirection?: 'vertical' \| 'horizontal'\n /\n Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n /\n inputs: MultiInputMaskInput<T>[]\n /\n Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n /\n values?: MultiInputMaskValue<T>\n /\n Defines the delimiter used to separate the inputs inside the component.\n /\n delimiter?: string\n /\n Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n /\n onChange?: (values: MultiInputMaskValue<T>) => void\n /\n Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n /\n onFocus?: (values: MultiInputMaskValue<T>) => void\n /\n Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n /\n onBlur?: (values: MultiInputMaskValue<T>) => void\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 Set it to `true` in order to stretch the input to the available space. Defaults to false.\n /\n stretch?: boolean\n /\n Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n /\n suffix?: React.ReactNode\n} & Omit<\n React.HTMLProps<HTMLInputElement>,\n 'onChange' \| 'onFocus' \| 'onBlur' \| 'ref' \| 'value' \| 'label'\n> &\n SpacingProps\n\nfunction MultiInputMask<T extends string>({\n id = makeUniqueId(),\n label,\n labelDirection = 'horizontal',\n inputs,\n delimiter,\n onChange: onChangeExternal,\n disabled,\n status,\n statusState,\n values: defaultValues,\n className,\n stretch,\n inputMode,\n suffix,\n onBlur,\n onFocus,\n ...props\n}: MultiInputMaskProps<T>) {\n const [values, onChange] = useMultiInputValue({\n inputs,\n defaultValues,\n callback: onChangeExternal,\n })\n\n const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n const { onKeyDown } = useHandleCursorPosition(\n inputRefs.current,\n getKeysToHandle()\n )\n\n const WrapperElement = label ? 'fieldset' : 'div'\n\n return (\n <WrapperElement\n className={classnames(\n 'dnb-multi-input-mask__fieldset',\n labelDirection === 'horizontal' &&\n 'dnb-multi-input-mask__fieldset--horizontal',\n createSpacingClasses(props)\n )}\n >\n {label && (\n <FormLabel\n className={classnames(\n 'dnb-multi-input-mask__legend',\n labelDirection === 'horizontal' &&\n 'dnb-multi-input-mask__legend--horizontal'\n )}\n element=\"legend\"\n onClick={onLegendClick}\n disabled={disabled}\n vertical={labelDirection === 'vertical'}\n >\n {/ This <span/> wrapper is needed to make hover work in Safari Desktop */}\n <span>{label}</span>\n </FormLabel>\n )}\n <Input\n {...props}\n className={classnames('dnb-multi-input-mask', className)}\n disabled={disabled}\n status={status}\n status_state={statusState}\n suffix={suffix}\n stretch={stretch}\n input_element={inputs.map(({ id: inputId, ...rest }, index) => {\n return (\n <MultiInputMaskInput\n key={inputId}\n id={id}\n inputId={inputId}\n delimiter={\n index !== inputs.length - 1 ? delimiter : undefined\n }\n disabled={disabled}\n inputMode={inputMode}\n onKeyDown={onKeyDown}\n onChange={onChange}\n onFocus={() => {\n if (onFocus) {\n onFocus(values)\n }\n }}\n onBlur={() => {\n if (onBlur) {\n onBlur(values)\n }\n }}\n getInputRef={getInputRef}\n {...rest}\n value={values[inputId]}\n />\n )\n })}\n />\n </WrapperElement>\n )\n\n // Event handlers\n function onLegendClick() {\n if (disabled) {\n return\n }\n\n const firstInput = inputRefs.current[0].current\n\n firstInput.focus()\n firstInput.setSelectionRange(0, 0)\n }\n\n // Utilities\n function getInputRef(ref?: {\n inputRef?: MutableRefObject<HTMLInputElement>\n }) {\n const inputRef = ref?.inputRef\n\n if (inputRef && !inputRefs.current.includes(inputRef)) {\n inputRefs.current.push(inputRef)\n }\n\n return inputRef\n }\n\n function getKeysToHandle() {\n const uniqueMasks = getUniqueMasks()\n\n // Return the only one RegExp since all the inputs are using the same mask\n if (uniqueMasks.size === 1) {\n const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n return new RegExp(pattern)\n }\n\n // If there are multiple types of masks used, then map the maps to an object based on input ids\n // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n return inputs.reduce(\n (keys, { id, mask }) => {\n keys[id] = mask\n\n return keys\n },\n {} as Record<T, RegExp[]>\n )\n }\n\n function getUniqueMasks() {\n const masks = new Set()\n\n inputs.forEach((input) => {\n input.mask.forEach((pattern) => masks.add(String(pattern)))\n })\n\n return masks\n }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n MultiInputMaskInput<T> & {\n id: MultiInputMaskInput<T>['id']\n inputId: MultiInputMaskInput<T>['id']\n label: MultiInputMaskInput<T>['label']\n value: string\n mask: MultiInputMaskInput<T>['mask']\n placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n delimiter?: MultiInputMaskProps<T>['delimiter']\n disabled: boolean\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n onChange: (\n id: string,\n placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n ) => void\n getInputRef: () => MutableRefObject<HTMLInputElement>\n }\n\nfunction MultiInputMaskInput<T extends string>({\n id,\n inputId,\n label,\n value,\n mask,\n placeholderCharacter,\n delimiter,\n disabled,\n getInputRef,\n onKeyDown,\n onChange,\n onBlur,\n onFocus,\n ...attributes\n}: MultiInputMaskInputProps<T>) {\n const shouldHighlight = !disabled && /\\w+/.test(value)\n\n return (\n <>\n <TextMask\n id={`${id}-${inputId}`}\n data-mask-id={inputId}\n className={classnames(\n 'dnb-input__input',\n 'dnb-multi-input-mask__input',\n shouldHighlight && 'dnb-multi-input-mask__input--highlight'\n )}\n disabled={disabled}\n size={mask.length}\n mask={mask}\n value={value ?? ''}\n placeholderChar={placeholderCharacter}\n guide={true}\n showMask={true}\n keepCharPositions={false} // so we can overwrite next value, if it already exists\n aria-labelledby={`${id}-${inputId}__label`}\n ref={getInputRef}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n onFocus={({ target, ...event }) => {\n target.focus()\n target.select()\n\n if (onFocus) {\n onFocus({ target, ...event })\n }\n }}\n onChange={(event) => {\n onChange(\n inputId,\n removePlaceholder(event.target.value, placeholderCharacter)\n )\n }}\n {...attributes}\n />\n <label\n id={`${id}-${inputId}__label`}\n htmlFor={`${id}-${inputId}`}\n hidden\n >\n {label}\n </label>\n {delimiter && (\n <span\n aria-hidden\n className={classnames(\n 'dnb-multi-input-mask__delimiter',\n shouldHighlight && 'dnb-multi-input-mask__delimiter--highlight'\n )}\n >\n {delimiter}\n </span>\n )}\n </>\n )\n\n function removePlaceholder(value: string, placeholder: string) {\n return value.replace(RegExp(placeholder, 'gm'), '')\n }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/lib.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@
  */
 import Accordion from './accordion/Accordion';
 import Anchor from './anchor/Anchor';
+import AriaLive from './aria-live/AriaLive';
 import Autocomplete from './autocomplete/Autocomplete';
 import Avatar from './avatar/Avatar';
 import Badge from './badge/Badge';
@@ -59,13 +60,14 @@ import ToggleButton from './toggle-button/ToggleButton';
 import Tooltip from './tooltip/Tooltip';
 import Upload from './upload/Upload';
 import VisuallyHidden from './visually-hidden/VisuallyHidden';
-export { Accordion, Anchor, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden, };
+export { Accordion, Anchor, AriaLive, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden, };
 export declare const getComponents: () => {
     Accordion: typeof Accordion;
     Anchor: import("react").ForwardRefExoticComponent<import("./anchor/Anchor").AnchorProps & Omit<import("react").HTMLProps<HTMLAnchorElement>, "ref"> & import("./space/types").SpacingElementProps & {
         space?: import("./space/types").SpaceTypeAll;
         innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
+    AriaLive: typeof AriaLive;
     Autocomplete: typeof Autocomplete;
     Avatar: {
         (localProps: import("./avatar/Avatar").AvatarProps & import("./space/types").SpacingElementProps & {

package/es/components/lib.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import Accordion from './accordion/Accordion';
 import Anchor from './anchor/Anchor';
+import AriaLive from './aria-live/AriaLive';
 import Autocomplete from './autocomplete/Autocomplete';
 import Avatar from './avatar/Avatar';
 import Badge from './badge/Badge';
@@ -49,11 +50,12 @@ import ToggleButton from './toggle-button/ToggleButton';
 import Tooltip from './tooltip/Tooltip';
 import Upload from './upload/Upload';
 import VisuallyHidden from './visually-hidden/VisuallyHidden';
-export { Accordion, Anchor, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden };
+export { Accordion, Anchor, AriaLive, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden };
 export const getComponents = () => {
   return {
     Accordion,
     Anchor,
+    AriaLive,
     Autocomplete,
     Avatar,
     Badge,

package/es/components/lib.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lib.js","names":["Accordion","Anchor","Autocomplete","Avatar","Badge","Breadcrumb","Button","Card","Checkbox","DatePicker","Dialog","Drawer","Dropdown","Flex","FormLabel","FormRow","FormSet","FormStatus","GlobalError","GlobalStatus","Grid","Heading","HeightAnimation","HelpButton","Icon","IconPrimary","InfoCard","Input","InputMasked","Logo","Modal","NumberFormat","Pagination","ProgressIndicator","Radio","Section","Skeleton","SkipContent","Slider","Space","StepIndicator","Switch","Table","Tabs","Tag","Textarea","Timeline","ToggleButton","Tooltip","Upload","VisuallyHidden","getComponents"],"sources":["../../../src/components/lib.ts"],"sourcesContent":["/*\n ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n \n /\n\n/*\n Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport Accordion from './accordion/Accordion'\nimport Anchor from './anchor/Anchor'\nimport Autocomplete from './autocomplete/Autocomplete'\nimport Avatar from './avatar/Avatar'\nimport Badge from './badge/Badge'\nimport Breadcrumb from './breadcrumb/Breadcrumb'\nimport Button from './button/Button'\nimport Card from './card/Card'\nimport Checkbox from './checkbox/Checkbox'\nimport DatePicker from './date-picker/DatePicker'\nimport Dialog from './dialog/Dialog'\nimport Drawer from './drawer/Drawer'\nimport Dropdown from './dropdown/Dropdown'\nimport Flex from './flex/Flex'\nimport FormLabel from './form-label/FormLabel'\nimport FormRow from './form-row/FormRow'\nimport FormSet from './form-set/FormSet'\nimport FormStatus from './form-status/FormStatus'\nimport GlobalError from './global-error/GlobalError'\nimport GlobalStatus from './global-status/GlobalStatus'\nimport Grid from './grid/Grid'\nimport Heading from './heading/Heading'\nimport HeightAnimation from './height-animation/HeightAnimation'\nimport HelpButton from './help-button/HelpButton'\nimport Icon from './icon/Icon'\nimport IconPrimary from './icon-primary/IconPrimary'\nimport InfoCard from './info-card/InfoCard'\nimport Input from './input/Input'\nimport InputMasked from './input-masked/InputMasked'\nimport Logo from './logo/Logo'\nimport Modal from './modal/Modal'\nimport NumberFormat from './number-format/NumberFormat'\nimport Pagination from './pagination/Pagination'\nimport ProgressIndicator from './progress-indicator/ProgressIndicator'\nimport Radio from './radio/Radio'\nimport Section from './section/Section'\nimport Skeleton from './skeleton/Skeleton'\nimport SkipContent from './skip-content/SkipContent'\nimport Slider from './slider/Slider'\nimport Space from './space/Space'\nimport StepIndicator from './step-indicator/StepIndicator'\nimport Switch from './switch/Switch'\nimport Table from './table/Table'\nimport Tabs from './tabs/Tabs'\nimport Tag from './tag/Tag'\nimport Textarea from './textarea/Textarea'\nimport Timeline from './timeline/Timeline'\nimport ToggleButton from './toggle-button/ToggleButton'\nimport Tooltip from './tooltip/Tooltip'\nimport Upload from './upload/Upload'\nimport VisuallyHidden from './visually-hidden/VisuallyHidden'\n\n// define / export all the available components\nexport {\n Accordion,\n Anchor,\n Autocomplete,\n Avatar,\n Badge,\n Breadcrumb,\n Button,\n Card,\n Checkbox,\n DatePicker,\n Dialog,\n Drawer,\n Dropdown,\n Flex,\n FormLabel,\n FormRow,\n FormSet,\n FormStatus,\n GlobalError,\n GlobalStatus,\n Grid,\n Heading,\n HeightAnimation,\n HelpButton,\n Icon,\n IconPrimary,\n InfoCard,\n Input,\n InputMasked,\n Logo,\n Modal,\n NumberFormat,\n Pagination,\n ProgressIndicator,\n Radio,\n Section,\n Skeleton,\n SkipContent,\n Slider,\n Space,\n StepIndicator,\n Switch,\n Table,\n Tabs,\n Tag,\n Textarea,\n Timeline,\n ToggleButton,\n Tooltip,\n Upload,\n VisuallyHidden,\n}\n\nexport const getComponents = () => {\n return {\n Accordion,\n Anchor,\n Autocomplete,\n Avatar,\n Badge,\n Breadcrumb,\n Button,\n Card,\n Checkbox,\n DatePicker,\n Dialog,\n Drawer,\n Dropdown,\n Flex,\n FormLabel,\n FormRow,\n FormSet,\n FormStatus,\n GlobalError,\n GlobalStatus,\n Grid,\n Heading,\n HeightAnimation,\n HelpButton,\n Icon,\n IconPrimary,\n InfoCard,\n Input,\n InputMasked,\n Logo,\n Modal,\n NumberFormat,\n Pagination,\n ProgressIndicator,\n Radio,\n Section,\n Skeleton,\n SkipContent,\n Slider,\n Space,\n StepIndicator,\n Switch,\n Table,\n Tabs,\n Tag,\n Textarea,\n Timeline,\n ToggleButton,\n Tooltip,\n Upload,\n VisuallyHidden,\n }\n}\n"],"mappings":"AAYA,OAAOA,SAAS,MAAM,uBAAuB;AAC7C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,YAAY,MAAM,6BAA6B;AACtD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,UAAU,MAAM,yBAAyB;AAChD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,UAAU,MAAM,0BAA0B;AACjD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,OAAO,MAAM,oBAAoB;AACxC,OAAOC,OAAO,MAAM,oBAAoB;AACxC,OAAOC,UAAU,MAAM,0BAA0B;AACjD,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,eAAe,MAAM,oCAAoC;AAChE,OAAOC,UAAU,MAAM,0BAA0B;AACjD,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,QAAQ,MAAM,sBAAsB;AAC3C,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,UAAU,MAAM,yBAAyB;AAChD,OAAOC,iBAAiB,MAAM,wCAAwC;AACtE,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,GAAG,MAAM,WAAW;AAC3B,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,cAAc,MAAM,kCAAkC;AAG7D,~~SACElD~~,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZC,IAAI,EACJC,OAAO,EACPC,eAAe,EACfC,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,YAAY,EACZC,UAAU,EACVC,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,GAAG,EACHC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,OAAO,EACPC,MAAM,EACNC,cAAc;AAGhB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,OAAO;~~IACLnD~~,SAAS;IACTC,MAAM;IACNC,YAAY;IACZC,MAAM;IACNC,KAAK;IACLC,UAAU;IACVC,MAAM;IACNC,IAAI;IACJC,QAAQ;IACRC,UAAU;IACVC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,OAAO;IACPC,OAAO;IACPC,UAAU;IACVC,WAAW;IACXC,YAAY;IACZC,IAAI;IACJC,OAAO;IACPC,eAAe;IACfC,UAAU;IACVC,IAAI;IACJC,WAAW;IACXC,QAAQ;IACRC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,YAAY;IACZC,UAAU;IACVC,iBAAiB;IACjBC,KAAK;IACLC,OAAO;IACPC,QAAQ;IACRC,WAAW;IACXC,MAAM;IACNC,KAAK;IACLC,aAAa;IACbC,MAAM;IACNC,KAAK;IACLC,IAAI;IACJC,GAAG;IACHC,QAAQ;IACRC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC;EACF,CAAC;AACH,CAAC"}
1	+ {"version":3,"file":"lib.js","names":["Accordion","Anchor","AriaLive","Autocomplete","Avatar","Badge","Breadcrumb","Button","Card","Checkbox","DatePicker","Dialog","Drawer","Dropdown","Flex","FormLabel","FormRow","FormSet","FormStatus","GlobalError","GlobalStatus","Grid","Heading","HeightAnimation","HelpButton","Icon","IconPrimary","InfoCard","Input","InputMasked","Logo","Modal","NumberFormat","Pagination","ProgressIndicator","Radio","Section","Skeleton","SkipContent","Slider","Space","StepIndicator","Switch","Table","Tabs","Tag","Textarea","Timeline","ToggleButton","Tooltip","Upload","VisuallyHidden","getComponents"],"sources":["../../../src/components/lib.ts"],"sourcesContent":["/*\n ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n \n /\n\n/*\n Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport Accordion from './accordion/Accordion'\nimport Anchor from './anchor/Anchor'\nimport AriaLive from './aria-live/AriaLive'\nimport Autocomplete from './autocomplete/Autocomplete'\nimport Avatar from './avatar/Avatar'\nimport Badge from './badge/Badge'\nimport Breadcrumb from './breadcrumb/Breadcrumb'\nimport Button from './button/Button'\nimport Card from './card/Card'\nimport Checkbox from './checkbox/Checkbox'\nimport DatePicker from './date-picker/DatePicker'\nimport Dialog from './dialog/Dialog'\nimport Drawer from './drawer/Drawer'\nimport Dropdown from './dropdown/Dropdown'\nimport Flex from './flex/Flex'\nimport FormLabel from './form-label/FormLabel'\nimport FormRow from './form-row/FormRow'\nimport FormSet from './form-set/FormSet'\nimport FormStatus from './form-status/FormStatus'\nimport GlobalError from './global-error/GlobalError'\nimport GlobalStatus from './global-status/GlobalStatus'\nimport Grid from './grid/Grid'\nimport Heading from './heading/Heading'\nimport HeightAnimation from './height-animation/HeightAnimation'\nimport HelpButton from './help-button/HelpButton'\nimport Icon from './icon/Icon'\nimport IconPrimary from './icon-primary/IconPrimary'\nimport InfoCard from './info-card/InfoCard'\nimport Input from './input/Input'\nimport InputMasked from './input-masked/InputMasked'\nimport Logo from './logo/Logo'\nimport Modal from './modal/Modal'\nimport NumberFormat from './number-format/NumberFormat'\nimport Pagination from './pagination/Pagination'\nimport ProgressIndicator from './progress-indicator/ProgressIndicator'\nimport Radio from './radio/Radio'\nimport Section from './section/Section'\nimport Skeleton from './skeleton/Skeleton'\nimport SkipContent from './skip-content/SkipContent'\nimport Slider from './slider/Slider'\nimport Space from './space/Space'\nimport StepIndicator from './step-indicator/StepIndicator'\nimport Switch from './switch/Switch'\nimport Table from './table/Table'\nimport Tabs from './tabs/Tabs'\nimport Tag from './tag/Tag'\nimport Textarea from './textarea/Textarea'\nimport Timeline from './timeline/Timeline'\nimport ToggleButton from './toggle-button/ToggleButton'\nimport Tooltip from './tooltip/Tooltip'\nimport Upload from './upload/Upload'\nimport VisuallyHidden from './visually-hidden/VisuallyHidden'\n\n// define / export all the available components\nexport {\n Accordion,\n Anchor,\n AriaLive,\n Autocomplete,\n Avatar,\n Badge,\n Breadcrumb,\n Button,\n Card,\n Checkbox,\n DatePicker,\n Dialog,\n Drawer,\n Dropdown,\n Flex,\n FormLabel,\n FormRow,\n FormSet,\n FormStatus,\n GlobalError,\n GlobalStatus,\n Grid,\n Heading,\n HeightAnimation,\n HelpButton,\n Icon,\n IconPrimary,\n InfoCard,\n Input,\n InputMasked,\n Logo,\n Modal,\n NumberFormat,\n Pagination,\n ProgressIndicator,\n Radio,\n Section,\n Skeleton,\n SkipContent,\n Slider,\n Space,\n StepIndicator,\n Switch,\n Table,\n Tabs,\n Tag,\n Textarea,\n Timeline,\n ToggleButton,\n Tooltip,\n Upload,\n VisuallyHidden,\n}\n\nexport const getComponents = () => {\n return {\n Accordion,\n Anchor,\n AriaLive,\n Autocomplete,\n Avatar,\n Badge,\n Breadcrumb,\n Button,\n Card,\n Checkbox,\n DatePicker,\n Dialog,\n Drawer,\n Dropdown,\n Flex,\n FormLabel,\n FormRow,\n FormSet,\n FormStatus,\n GlobalError,\n GlobalStatus,\n Grid,\n Heading,\n HeightAnimation,\n HelpButton,\n Icon,\n IconPrimary,\n InfoCard,\n Input,\n InputMasked,\n Logo,\n Modal,\n NumberFormat,\n Pagination,\n ProgressIndicator,\n Radio,\n Section,\n Skeleton,\n SkipContent,\n Slider,\n Space,\n StepIndicator,\n Switch,\n Table,\n Tabs,\n Tag,\n Textarea,\n Timeline,\n ToggleButton,\n Tooltip,\n Upload,\n VisuallyHidden,\n }\n}\n"],"mappings":"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"}

package/es/components/number-format/NumberUtils.d.ts CHANGED Viewed

@@ -30,6 +30,7 @@ export interface formatReturnValue {
 }
 export type formatValue = string | number;
 export type formatReturnType = formatReturnValue | formatValue;
 export interface formatOptionParams {
   /** can be "auto" */
   locale?: Locale;
@@ -80,10 +81,15 @@ export interface formatOptionParams {
   /** If an object should be returned, including the "aria" property */
   returnAria?: boolean;
 }
-export const format: (
+export function format(
+  value: formatValue,
+  options: formatOptionParams & { returnAria: true }
+): formatReturnValue;
+export function format(
   value: formatValue,
   options?: formatOptionParams
-) => formatReturnType;
+): formatValue;
 type cleanNumberOptions = {
   decimalSeparator?: string;

package/es/components/number-format/useNumberFormat.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import type { formatOptionParams, formatValue } from './NumberUtils';
-declare function useNumberFormat(value: formatValue, options?: formatOptionParams): import("./NumberUtils").formatReturnType;
+declare function useNumberFormat(value: formatValue, options?: formatOptionParams): formatValue;
 export default useNumberFormat;

package/es/components/section/Section.d.ts CHANGED Viewed

@@ -69,13 +69,16 @@ export type SectionProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
     /**
-     * @deprecated in v11 use "innerSpace" prop instead */
+     * @deprecated in v11 use "innerSpace" prop instead
+     */
     spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>;
     /**
-     * @deprecated in v11 use "background" prop instead */
+     * @deprecated in v11 use "background" prop instead
+     */
     style_type?: SectionStyleTypes | string;
     /**
-     * @deprecated in v11 use "innerRef" prop instead */
+     * @deprecated in v11 use "innerRef" prop instead
+     */
     inner_ref?: React.RefObject<HTMLElement>;
 };
 export type SectionAllProps = SectionProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;

package/es/components/section/Section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/*\n Web Section Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n isTrue,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n DynamicElement,\n ResponsiveProp,\n SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' \| 'info' \| 'warning' \| 'success'\n\nexport type SectionStyleTypes =\n \| 'divider'\n \| 'white'\n \| 'transparent'\n\n /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'lavender'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'pistachio'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'emerald-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sea-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red-8'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sand-yellow'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'black-3'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green-12'\n\nexport type SectionSpacing =\n \| boolean\n \| 'x-small'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'x-large'\n \| 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string \| boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n /\n Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n /\n variant?: SectionVariants \| string\n\n /\n Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n /\n breakout?: boolean \| ResponsiveProp<boolean>\n\n /\n Define if the section should have rounded corners. Defaults to `false`.\n /\n roundedCorner?: boolean \| ResponsiveProp<boolean>\n\n /\n Define a custom border color. Use a Eufemia color.\n /\n outline?: OutlineColor \| ResponsiveProp<OutlineColor>\n\n /\n Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n /\n textColor?: TextColor \| ResponsiveProp<TextColor>\n\n /\n Define a custom background color, instead of a variant. Use a Eufemia color.\n /\n backgroundColor?: BackgroundColor \| ResponsiveProp<BackgroundColor>\n\n /\n Define a custom drop-shadow.\n /\n dropShadow?: DropShadow \| ResponsiveProp<DropShadow>\n\n /\n Define what HTML element should be used. Defaults to `<section>`.\n /\n element?: DynamicElement\n\n /\n Define a React.Ref.\n /\n innerRef?: React.RefObject<HTMLElement>\n\n /\n @deprecated in v11 use \"innerSpace\" prop instead /\n spacing?: SectionSpacing \| ResponsiveProp<SectionSpacing>\n /\n @deprecated in v11 use \"background\" prop instead /\n style_type?: SectionStyleTypes \| string\n /\n @deprecated in v11 use \"innerRef\" prop instead */\n inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n className: string\n innerRef: React.RefObject<HTMLElement>\n children: React.ReactNode\n style: React.CSSProperties\n}\n\nconst defaultProps = {\n element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n localProps: SectionAllProps\n): SectionReturnParams {\n const context = React.useContext(Context)\n\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContext(\n localProps,\n defaultProps,\n context.Section\n )\n\n const {\n variant,\n breakout = true,\n roundedCorner,\n textColor,\n backgroundColor,\n dropShadow,\n outline,\n innerRef,\n\n className,\n children,\n\n spacing,\n style_type,\n inner_ref,\n\n ...attributes\n } = props\n\n const internalRef = React.useRef<HTMLElement>()\n const elementRef = innerRef \|\| inner_ref \|\| internalRef\n\n return Object.freeze({\n ...attributes,\n className: classnames(\n 'dnb-section',\n `dnb-section--${variant ? variant : style_type \|\| 'default'}`,\n spacing &&\n `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n className\n ),\n style: {\n ...computeStyle(\n breakout,\n 'breakout',\n (value) => `var(--breakout--${value ? 'on' : 'off'})`\n ),\n ...computeStyle(\n roundedCorner,\n 'rounded-corner',\n (value) => value && 'var(--rounded-corner--value)'\n ),\n ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n ...computeStyle(backgroundColor, 'background-color', (value) =>\n getColor(value)\n ),\n ...computeStyle(\n dropShadow,\n 'drop-shadow',\n (value) => value && 'var(--shadow-default)'\n ),\n ...computeStyle(outline, 'outline-color', (value) =>\n String(value) === 'true'\n ? 'var(--outline-color--value)'\n : getColor(value)\n ),\n ...attributes?.style,\n } as React.CSSProperties,\n innerRef: elementRef,\n children,\n })\n}\n\nfunction getColor(value: string) {\n return value\n ? !/#\|var/.test(value)\n ? `var(--color-${value})`\n : value\n : undefined\n}\n\nfunction computeStyle(\n property: ResponsiveProp<unknown> \| boolean \| string,\n name: string,\n valueCallback: (value: string) => string \| undefined\n) {\n let media = property as ResponsiveProp<unknown>\n\n if (media !== null && typeof media !== 'object') {\n media = {\n small: property,\n medium: property,\n large: property,\n } as ResponsiveProp<unknown>\n }\n\n const result = {}\n\n for (const size in media as ResponsiveProp<unknown>) {\n if (typeof media?.[size] !== 'undefined') {\n const value = valueCallback(media?.[size])\n if (typeof value === 'string') {\n result[`--${name}--${size}`] = value\n }\n }\n }\n\n return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
1	+ {"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/*\n Web Section Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n isTrue,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n DynamicElement,\n ResponsiveProp,\n SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' \| 'info' \| 'warning' \| 'success'\n\nexport type SectionStyleTypes =\n \| 'divider'\n \| 'white'\n \| 'transparent'\n\n /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'lavender'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'pistachio'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'emerald-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sea-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'fire-red-8'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'sand-yellow'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'black-3'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green'\n /* @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead /\n \| 'mint-green-12'\n\nexport type SectionSpacing =\n \| boolean\n \| 'x-small'\n \| 'small'\n \| 'medium'\n \| 'large'\n \| 'x-large'\n \| 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string \| boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n /\n Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n /\n variant?: SectionVariants \| string\n\n /\n Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n /\n breakout?: boolean \| ResponsiveProp<boolean>\n\n /\n Define if the section should have rounded corners. Defaults to `false`.\n /\n roundedCorner?: boolean \| ResponsiveProp<boolean>\n\n /\n Define a custom border color. Use a Eufemia color.\n /\n outline?: OutlineColor \| ResponsiveProp<OutlineColor>\n\n /\n Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n /\n textColor?: TextColor \| ResponsiveProp<TextColor>\n\n /\n Define a custom background color, instead of a variant. Use a Eufemia color.\n /\n backgroundColor?: BackgroundColor \| ResponsiveProp<BackgroundColor>\n\n /\n Define a custom drop-shadow.\n /\n dropShadow?: DropShadow \| ResponsiveProp<DropShadow>\n\n /\n Define what HTML element should be used. Defaults to `<section>`.\n /\n element?: DynamicElement\n\n /\n Define a React.Ref.\n /\n innerRef?: React.RefObject<HTMLElement>\n\n /\n @deprecated in v11 use \"innerSpace\" prop instead\n /\n spacing?: SectionSpacing \| ResponsiveProp<SectionSpacing>\n /\n @deprecated in v11 use \"background\" prop instead\n /\n style_type?: SectionStyleTypes \| string\n /\n @deprecated in v11 use \"innerRef\" prop instead\n */\n inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n SpacingProps &\n Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n className: string\n innerRef: React.RefObject<HTMLElement>\n children: React.ReactNode\n style: React.CSSProperties\n}\n\nconst defaultProps = {\n element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n localProps: SectionAllProps\n): SectionReturnParams {\n const context = React.useContext(Context)\n\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContext(\n localProps,\n defaultProps,\n context.Section\n )\n\n const {\n variant,\n breakout = true,\n roundedCorner,\n textColor,\n backgroundColor,\n dropShadow,\n outline,\n innerRef,\n\n className,\n children,\n\n spacing,\n style_type,\n inner_ref,\n\n ...attributes\n } = props\n\n const internalRef = React.useRef<HTMLElement>()\n const elementRef = innerRef \|\| inner_ref \|\| internalRef\n\n return Object.freeze({\n ...attributes,\n className: classnames(\n 'dnb-section',\n `dnb-section--${variant ? variant : style_type \|\| 'default'}`,\n spacing &&\n `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n className\n ),\n style: {\n ...computeStyle(\n breakout,\n 'breakout',\n (value) => `var(--breakout--${value ? 'on' : 'off'})`\n ),\n ...computeStyle(\n roundedCorner,\n 'rounded-corner',\n (value) => value && 'var(--rounded-corner--value)'\n ),\n ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n ...computeStyle(backgroundColor, 'background-color', (value) =>\n getColor(value)\n ),\n ...computeStyle(\n dropShadow,\n 'drop-shadow',\n (value) => value && 'var(--shadow-default)'\n ),\n ...computeStyle(outline, 'outline-color', (value) =>\n String(value) === 'true'\n ? 'var(--outline-color--value)'\n : getColor(value)\n ),\n ...attributes?.style,\n } as React.CSSProperties,\n innerRef: elementRef,\n children,\n })\n}\n\nfunction getColor(value: string) {\n return value\n ? !/#\|var/.test(value)\n ? `var(--color-${value})`\n : value\n : undefined\n}\n\nfunction computeStyle(\n property: ResponsiveProp<unknown> \| boolean \| string,\n name: string,\n valueCallback: (value: string) => string \| undefined\n) {\n let media = property as ResponsiveProp<unknown>\n\n if (media !== null && typeof media !== 'object') {\n media = {\n small: property,\n medium: property,\n large: property,\n } as ResponsiveProp<unknown>\n }\n\n const result = {}\n\n for (const size in media as ResponsiveProp<unknown>) {\n if (typeof media?.[size] !== 'undefined') {\n const value = valueCallback(media?.[size])\n if (typeof value === 'string') {\n result[`--${name}--${size}`] = value\n }\n }\n }\n\n return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/components/section/style/dnb-section.css CHANGED Viewed

@@ -18,6 +18,7 @@
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }

package/es/components/section/style/dnb-section.min.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";inset:0;position:absolute;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
+.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";inset:0;position:absolute;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
       --rounded-corner--small,var(--rounded-corner--fallback)
     )}}@media screen and (max-width:59.9375em) and (min-width:40.0625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
       --rounded-corner--medium,var(--rounded-corner--fallback)

package/es/components/section/style/dnb-section.scss CHANGED Viewed

@@ -22,6 +22,7 @@
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);

package/es/components/space/SpacingUtils.js CHANGED Viewed

@@ -95,7 +95,11 @@ export const createSpacingClasses = (props, Element = null) => {
   const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
   if (typeof p.space !== 'undefined') {
     if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
-      p.top = p.right = p.bottom = p.left = p.space;
+      var _p$left, _p$bottom, _p$right, _p$top;
+      p.left = (_p$left = p.left) !== null && _p$left !== void 0 ? _p$left : p.space;
+      p.bottom = (_p$bottom = p.bottom) !== null && _p$bottom !== void 0 ? _p$bottom : p.space;
+      p.right = (_p$right = p.right) !== null && _p$right !== void 0 ? _p$right : p.space;
+      p.top = (_p$top = p.top) !== null && _p$top !== void 0 ? _p$top : p.space;
     }
     if (typeof p.space === 'object') {
       for (const i in p.space) {

package/es/components/space/SpacingUtils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpacingUtils.js","names":["warn","spacingDefaultProps","space","innerSpace","top","right","bottom","left","spacePatterns","small","medium","large","globalThis","CALC_CACHE","calc","types","hash","join","result","forEach","rawTypes","createTypeModifiers","type","push","length","createSpacingProperties","props","computeProperties","hasMediaSize","media","keys","Object","includes","hasSize","size","_space","value","transformToAll","key","isValidSpaceProp","cur","name","String","typeModifiers","sum","sumTypes","createSpacingClasses","Element","p","isFrozen","_objectSpread","i","entries","reduce","acc","direction","nearestTypes","findNearestTypes","map","isInline","translateSpace","test","replace","splitTypes","split","clean","t","filter","r","firstLetter","parseFloat","num","foundType","findType","found","findTypeAll","listOfSpacePatterns","find","k","v","multiply","res","near","reverse","nearNum","nearType","leftOver","foundMoreTypes","index","indexOf","propName","removeSpaceProps","restProps","_objectWithoutProperties","_excluded","elementName"],"sources":["../../../../src/components/space/SpacingUtils.ts"],"sourcesContent":["/*\n Space helper\n \n /\n\nimport { warn } from '../../shared/component-helper'\n\nimport type {\n SpaceType,\n SpacingUnknownProps,\n SpacingProps,\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType,\n SpaceStringTypes,\n SpaceTypeMedia,\n SpaceTypeAll,\n SpacingElementProps,\n} from './types'\n\ntype SpaceNumber = number\n\nexport const spacingDefaultProps: SpacingProps = {\n space: null,\n innerSpace: null,\n top: null,\n right: null,\n bottom: null,\n left: null,\n}\n// IMPORTANT: Keep the shorthand after the long type names\nexport const spacePatterns: Record<\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType\n> = {\n 'xx-small': 0.25,\n 'x-small': 0.5,\n small: 1,\n medium: 1.5,\n large: 2,\n 'x-large': 3,\n 'xx-large': 3.5,\n 'xx-large-x2': 7,\n}\n\n/*\n Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))\n \n @param types 'small', '16px', '1rem'\n * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))\n /\nglobalThis.CALC_CACHE = {}\nexport const calc = (...types: Array<SpaceType>) => {\n const hash = types.join('\|')\n if (globalThis.CALC_CACHE[hash]) {\n return globalThis.CALC_CACHE[hash]\n }\n\n const result: Array<string> = []\n\n types.forEach((rawTypes) => {\n createTypeModifiers(rawTypes as SpaceType).forEach((type) => {\n result.push(`var(--spacing-${type})`)\n })\n })\n\n return result.length\n ? (globalThis.CALC_CACHE[hash] = `calc(${result.join(' + ')})`)\n : null\n}\n\n/\n Creates a valid space CSS style out from given space types\n \n @param props\n * @returns { '--space-b-l': '2rem', '--space-t-l': '1rem' }\n /\nexport const createSpacingProperties = (\n props: SpacingProps\n): React.CSSProperties => {\n if (props?.innerSpace) {\n return computeProperties(props.innerSpace)\n }\n\n return {}\n}\n\nfunction hasMediaSize(media: SpaceTypeMedia) {\n const keys = Object.keys(media)\n return (\n keys.includes('small') \|\|\n keys.includes('medium') \|\|\n keys.includes('large')\n )\n}\n\nfunction hasSize(space: SpacingElementProps) {\n const keys = Object.keys(space)\n return (\n keys.includes('top') \|\|\n keys.includes('right') \|\|\n keys.includes('bottom') \|\|\n keys.includes('left')\n )\n}\n\nfunction computeProperties(space: SpaceTypeAll \| SpaceTypeMedia) {\n if (!hasMediaSize(space as SpaceTypeMedia)) {\n space = {\n small: space,\n medium: space,\n large: space,\n } as SpaceTypeMedia\n }\n\n const result = {}\n\n for (const size in space as SpaceTypeMedia) {\n const value = space?.[size] as SpaceType \| SpacingElementProps\n const props = transformToAll(value)\n\n for (const key in props as SpaceTypeMedia) {\n if (isValidSpaceProp(key)) {\n const cur = props[key]\n const name = `--space-${key[0]}-${size[0]}`\n\n if (String(cur) === '0' \|\| String(cur) === 'false') {\n result[name] = '0'\n } else if (cur) {\n const typeModifiers = createTypeModifiers(cur as SpaceType)\n const sum = sumTypes(typeModifiers)\n result[name] = `${sum}rem`\n }\n }\n }\n }\n\n return result as React.CSSProperties\n}\n\nfunction transformToAll(value: SpaceType \| SpacingElementProps) {\n let result = value\n\n if (!hasSize(value as SpacingElementProps)) {\n result = {\n top: value,\n right: value,\n bottom: value,\n left: value,\n } as SpacingElementProps\n }\n\n return result as SpacingElementProps\n}\n\n/\n Creates a valid space CSS class out from given space types\n \n @param props\n * @param Element to check if it should be handled as inline\n * @returns \"dnb-space__large dnb-space__small\"\n /\nexport const createSpacingClasses = (\n props:\n \| SpacingProps\n /\n To support typical not defined props form components\n /\n \| SpacingUnknownProps,\n Element = null\n) => {\n const p = Object.isFrozen(props) ? { ...props } : props\n\n if (typeof p.space !== 'undefined') {\n if (\n typeof p.space === 'string' \|\|\n typeof p.space === 'number' \|\|\n (typeof p.space === 'boolean' && p.space)\n ) {\n p.top = p.right = p.bottom = p.left = p.space\n }\n if (typeof p.space === 'object') {\n for (const i in p.space) {\n if (!p[i] && isValidSpaceProp(i)) {\n p[i] = p.space[i]\n }\n }\n }\n delete p.space\n }\n\n return Object.entries(p).reduce((acc, [direction, cur]) => {\n if (isValidSpaceProp(direction) && direction !== 'innerSpace') {\n if (String(cur) === '0' \|\| String(cur) === 'false') {\n acc.push(`dnb-space__${direction}--zero`)\n } else if (cur) {\n const typeModifiers = createTypeModifiers(cur as SpaceType)\n\n // get the total sum\n const sum = sumTypes(typeModifiers)\n if (sum > 10) {\n warn(\n `Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(\n ','\n )})`\n )\n } else {\n // auto combine classes\n const nearestTypes = findNearestTypes(sum, true)\n\n acc = [\n ...acc,\n ...nearestTypes.map(\n (type) => `dnb-space__${direction}--${type}`\n ),\n ]\n }\n }\n } else if (direction === 'no_collapse') {\n acc.push('dnb-space--no-collapse')\n if (Element && isInline(Element)) {\n acc.push('dnb-space--inline')\n }\n }\n\n return acc\n }, [])\n}\n\n// @internal splits types by given string\nexport const translateSpace = (type: SpaceType) => {\n if (/-x2$/.test(String(type))) {\n return spacePatterns[String(type).replace(/-x2$/, '')] 2\n }\n return spacePatterns[String(type)] \|\| 0\n}\n\n// @internal Splits a string of: \"large x-small\" into an array of the same\nexport const splitTypes = (types: SpaceType \| Array<SpaceType>) => {\n if (typeof types === 'string') {\n const test = (types as SpaceStringTypes).split(/ /g)\n return clean(test as Array<SpaceStringTypes>)\n } else if (typeof types === 'boolean') {\n return ['small' as SpaceTypesPositiveValuesType]\n } else if (typeof types === 'number') {\n return [types]\n }\n\n return clean(types) \|\| null\n\n function clean(t: Array<SpaceType> \| Array<SpaceStringTypes>) {\n return t?.filter((r) => r && String(r).length > 0)\n }\n}\n\n// @internal Sums e.g. \"large\" + \"x-small\" to be = 2.5rem\nexport const sumTypes = (types: SpaceType \| Array<SpaceType>) =>\n splitTypes(types)\n .map((type) => translateSpace(type))\n .reduce((acc, cur) => {\n if (cur > 0) {\n acc += cur\n } else if (cur < 0) {\n acc -= cur\n }\n return acc\n }, 0)\n\n// @internal Returns an array with modifiers e.g. [\"large\", \"x-small\"]\nexport const createTypeModifiers = (\n types: SpaceType\n): Array<SpaceType> => {\n return (splitTypes(types) \|\| []).reduce((acc, type) => {\n if (type) {\n const firstLetter = String(type)[0]\n if (parseFloat(firstLetter) > -1) {\n // can be \"2rem\" or \"32px\" - but we want only a number\n let num = parseFloat(String(type))\n\n // check if we got pixels\n if (num >= 8 && /[0-9]px/.test(String(type))) {\n num = num / 16\n }\n\n // check if the type exists in our extensions\n const foundType = findType(num)\n\n // get the type\n if (foundType) {\n type = foundType\n } else {\n findNearestTypes(num).forEach((type) => {\n if (type) {\n acc.push(type)\n }\n })\n }\n }\n\n if (!(parseFloat(String(type)) > 0)) {\n acc.push(type)\n }\n }\n return acc\n }, [])\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\"\nexport const findType = (num: SpaceNumber): SpaceType => {\n const found = findTypeAll(num)\n\n // get the type\n if (found) {\n return found[0]\n }\n\n return null\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\" and returns all results\nexport const findTypeAll = (\n num: SpaceNumber\n): Array<\n SpaceTypesPositiveValuesType \| SpaceTypesPositiveRemValuesType\n> => {\n const listOfSpacePatterns = Object.entries(spacePatterns) as [\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType,\n ][]\n const found =\n listOfSpacePatterns.find(([k, v]) => k && v === num) \|\| null\n return found\n}\n\n// @internal Finds from e.g. a value of \"2.5rem\" the nearest type = [\"large\", \"x-small\"]\nexport const findNearestTypes = (num: SpaceNumber, multiply = false) => {\n let res = []\n\n const near = Object.entries(spacePatterns)\n .reverse()\n .filter((k) => (multiply ? true : !k[0].includes('-x'))) // e.g. -x2\n .find(([k, v]) => k && num >= v)\n const nearNum = (near && near[1]) \|\| num\n const types = findTypeAll(nearNum)\n\n if (types) {\n const nearType = types[0]\n res.push(nearType)\n const leftOver = num - parseFloat(String(types[1]))\n const foundMoreTypes = findNearestTypes(leftOver, multiply)\n\n // if the value already exists, then replace it with an x2\n foundMoreTypes.forEach((type) => {\n const index = res.indexOf(type)\n if (index !== -1) {\n res[index] = multiply ? `${type}-x2` : type\n }\n })\n\n res = [...res, ...foundMoreTypes]\n }\n\n return res\n}\n\n// @internal Checks if a space prop is a valid string like \"top\"\nexport const isValidSpaceProp = (propName: string) =>\n propName &&\n ['top', 'right', 'bottom', 'left', 'space', 'innerSpace'].includes(\n propName\n )\n\nexport const removeSpaceProps = <Props extends SpacingProps>(\n props: Props\n): Omit<Props, keyof SpacingProps> => {\n const { space, innerSpace, top, bottom, left, right, ...restProps } =\n props\n return restProps\n}\n\nexport const isInline = (elementName: string) => {\n switch (elementName) {\n case 'h1':\n case 'h2':\n case 'h3':\n case 'h4':\n case 'h5':\n case 'h6':\n case 'p':\n return true\n }\n\n return false\n}\n"],"mappings":";;;;;AAKA,SAASA,IAAI,QAAQ,+BAA+B;AAgBpD,OAAO,MAAMC,mBAAiC,GAAG;EAC/CC,KAAK,EAAE,IAAI;EACXC,UAAU,EAAE,IAAI;EAChBC,GAAG,EAAE,IAAI;EACTC,KAAK,EAAE,IAAI;EACXC,MAAM,EAAE,IAAI;EACZC,IAAI,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,aAGZ,GAAG;EACF,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,GAAG;EACdC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACR,SAAS,EAAE,CAAC;EACZ,UAAU,EAAE,GAAG;EACf,aAAa,EAAE;AACjB,CAAC;AAQDC,UAAU,CAACC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,MAAMC,IAAI,GAAGA,CAAC,GAAGC,KAAuB,KAAK;EAClD,MAAMC,IAAI,GAAGD,KAAK,CAACE,IAAI,CAAC,GAAG,CAAC;EAC5B,IAAIL,UAAU,CAACC,UAAU,CAACG,IAAI,CAAC,EAAE;IAC/B,OAAOJ,UAAU,CAACC,UAAU,CAACG,IAAI,CAAC;EACpC;EAEA,MAAME,MAAqB,GAAG,EAAE;EAEhCH,KAAK,CAACI,OAAO,CAAEC,QAAQ,IAAK;IAC1BC,mBAAmB,CAACD,QAAqB,CAAC,CAACD,OAAO,CAAEG,IAAI,IAAK;MAC3DJ,MAAM,CAACK,IAAI,CAAE,iBAAgBD,IAAK,GAAE,CAAC;IACvC,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOJ,MAAM,CAACM,MAAM,GACfZ,UAAU,CAACC,UAAU,CAACG,IAAI,CAAC,GAAI,QAAOE,MAAM,CAACD,IAAI,CAAC,KAAK,CAAE,GAAE,GAC5D,IAAI;AACV,CAAC;AAQD,OAAO,MAAMQ,uBAAuB,GAClCC,KAAmB,IACK;EACxB,IAAIA,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEvB,UAAU,EAAE;IACrB,OAAOwB,iBAAiB,CAACD,KAAK,CAACvB,UAAU,CAAC;EAC5C;EAEA,OAAO,CAAC,CAAC;AACX,CAAC;AAED,SAASyB,YAAYA,CAACC,KAAqB,EAAE;EAC3C,MAAMC,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACD,KAAK,CAAC;EAC/B,OACEC,IAAI,CAACE,QAAQ,CAAC,OAAO,CAAC,IACtBF,IAAI,CAACE,QAAQ,CAAC,QAAQ,CAAC,IACvBF,IAAI,CAACE,QAAQ,CAAC,OAAO,CAAC;AAE1B;AAEA,SAASC,OAAOA,CAAC/B,KAA0B,EAAE;EAC3C,MAAM4B,IAAI,GAAGC,MAAM,CAACD,IAAI,CAAC5B,KAAK,CAAC;EAC/B,OACE4B,IAAI,CAACE,QAAQ,CAAC,KAAK,CAAC,IACpBF,IAAI,CAACE,QAAQ,CAAC,OAAO,CAAC,IACtBF,IAAI,CAACE,QAAQ,CAAC,QAAQ,CAAC,IACvBF,IAAI,CAACE,QAAQ,CAAC,MAAM,CAAC;AAEzB;AAEA,SAASL,iBAAiBA,CAACzB,KAAoC,EAAE;EAC/D,IAAI,CAAC0B,YAAY,CAAC1B,KAAuB,CAAC,EAAE;IAC1CA,KAAK,GAAG;MACNO,KAAK,EAAEP,KAAK;MACZQ,MAAM,EAAER,KAAK;MACbS,KAAK,EAAET;IACT,CAAmB;EACrB;EAEA,MAAMgB,MAAM,GAAG,CAAC,CAAC;EAEjB,KAAK,MAAMgB,IAAI,IAAIhC,KAAK,EAAoB;IAAA,IAAAiC,MAAA;IAC1C,MAAMC,KAAK,IAAAD,MAAA,GAAGjC,KAAK,cAAAiC,MAAA,uBAALA,MAAA,CAAQD,IAAI,CAAoC;IAC9D,MAAMR,KAAK,GAAGW,cAAc,CAACD,KAAK,CAAC;IAEnC,KAAK,MAAME,GAAG,IAAIZ,KAAK,EAAoB;MACzC,IAAIa,gBAAgB,CAACD,GAAG,CAAC,EAAE;QACzB,MAAME,GAAG,GAAGd,KAAK,CAACY,GAAG,CAAC;QACtB,MAAMG,IAAI,GAAI,WAAUH,GAAG,CAAC,CAAC,CAAE,IAAGJ,IAAI,CAAC,CAAC,CAAE,EAAC;QAE3C,IAAIQ,MAAM,CAACF,GAAG,CAAC,KAAK,GAAG,IAAIE,MAAM,CAACF,GAAG,CAAC,KAAK,OAAO,EAAE;UAClDtB,MAAM,CAACuB,IAAI,CAAC,GAAG,GAAG;QACpB,CAAC,MAAM,IAAID,GAAG,EAAE;UACd,MAAMG,aAAa,GAAGtB,mBAAmB,CAACmB,GAAgB,CAAC;UAC3D,MAAMI,GAAG,GAAGC,QAAQ,CAACF,aAAa,CAAC;UACnCzB,MAAM,CAACuB,IAAI,CAAC,GAAI,GAAEG,GAAI,KAAI;QAC5B;MACF;IACF;EACF;EAEA,OAAO1B,MAAM;AACf;AAEA,SAASmB,cAAcA,CAACD,KAAsC,EAAE;EAC9D,IAAIlB,MAAM,GAAGkB,KAAK;EAElB,IAAI,CAACH,OAAO,CAACG,KAA4B,CAAC,EAAE;IAC1ClB,MAAM,GAAG;MACPd,GAAG,EAAEgC,KAAK;MACV/B,KAAK,EAAE+B,KAAK;MACZ9B,MAAM,EAAE8B,KAAK;MACb7B,IAAI,EAAE6B;IACR,CAAwB;EAC1B;EAEA,OAAOlB,MAAM;AACf;AASA,OAAO,MAAM4B,oBAAoB,GAAGA,CAClCpB,KAKuB,EACvBqB,OAAO,GAAG,IAAI,KACX;EACH,MAAMC,CAAC,GAAGjB,MAAM,CAACkB,QAAQ,CAACvB,KAAK,CAAC,GAAAwB,aAAA,KAAQxB,KAAK,IAAKA,KAAK;EAEvD,IAAI,OAAOsB,CAAC,CAAC9C,KAAK,KAAK,WAAW,EAAE;IAClC,IACE,OAAO8C,CAAC,CAAC9C,KAAK,KAAK,QAAQ,IAC3B,OAAO8C,CAAC,CAAC9C,KAAK,KAAK,QAAQ,IAC1B,OAAO8C,CAAC,CAAC9C,KAAK,KAAK,SAAS,IAAI8C,CAAC,CAAC9C,KAAM,EACzC;MACA8C,CAAC,CAAC5C,GAAG,GAAG4C,CAAC,CAAC3C,KAAK,GAAG2C,CAAC,CAAC1C,MAAM,GAAG0C,CAAC,CAACzC,IAAI,GAAGyC,CAAC,CAAC9C,KAAK;IAC/C;IACA,IAAI,OAAO8C,CAAC,CAAC9C,KAAK,KAAK,QAAQ,EAAE;MAC/B,KAAK,MAAMiD,CAAC,IAAIH,CAAC,CAAC9C,KAAK,EAAE;QACvB,IAAI,CAAC8C,CAAC,CAACG,CAAC,CAAC,IAAIZ,gBAAgB,CAACY,CAAC,CAAC,EAAE;UAChCH,CAAC,CAACG,CAAC,CAAC,GAAGH,CAAC,CAAC9C,KAAK,CAACiD,CAAC,CAAC;QACnB;MACF;IACF;IACA,OAAOH,CAAC,CAAC9C,KAAK;EAChB;EAEA,OAAO6B,MAAM,CAACqB,OAAO,CAACJ,CAAC,CAAC,CAACK,MAAM,CAAC,CAACC,GAAG,EAAE,CAACC,SAAS,EAAEf,GAAG,CAAC,KAAK;IACzD,IAAID,gBAAgB,CAACgB,SAAS,CAAC,IAAIA,SAAS,KAAK,YAAY,EAAE;MAC7D,IAAIb,MAAM,CAACF,GAAG,CAAC,KAAK,GAAG,IAAIE,MAAM,CAACF,GAAG,CAAC,KAAK,OAAO,EAAE;QAClDc,GAAG,CAAC/B,IAAI,CAAE,cAAagC,SAAU,QAAO,CAAC;MAC3C,CAAC,MAAM,IAAIf,GAAG,EAAE;QACd,MAAMG,aAAa,GAAGtB,mBAAmB,CAACmB,GAAgB,CAAC;QAG3D,MAAMI,GAAG,GAAGC,QAAQ,CAACF,aAAa,CAAC;QACnC,IAAIC,GAAG,GAAG,EAAE,EAAE;UACZ5C,IAAI,CACD,yDAAwD4C,GAAI,OAAMD,aAAa,CAAC1B,IAAI,CACnF,GACF,CAAE,GACJ,CAAC;QACH,CAAC,MAAM;UAEL,MAAMuC,YAAY,GAAGC,gBAAgB,CAACb,GAAG,EAAE,IAAI,CAAC;UAEhDU,GAAG,GAAG,CACJ,GAAGA,GAAG,EACN,GAAGE,YAAY,CAACE,GAAG,CAChBpC,IAAI,IAAM,cAAaiC,SAAU,KAAIjC,IAAK,EAC7C,CAAC,CACF;QACH;MACF;IACF,CAAC,MAAM,IAAIiC,SAAS,KAAK,aAAa,EAAE;MACtCD,GAAG,CAAC/B,IAAI,CAAC,wBAAwB,CAAC;MAClC,IAAIwB,OAAO,IAAIY,QAAQ,CAACZ,OAAO,CAAC,EAAE;QAChCO,GAAG,CAAC/B,IAAI,CAAC,mBAAmB,CAAC;MAC/B;IACF;IAEA,OAAO+B,GAAG;EACZ,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAGD,OAAO,MAAMM,cAAc,GAAItC,IAAe,IAAK;EACjD,IAAI,MAAM,CAACuC,IAAI,CAACnB,MAAM,CAACpB,IAAI,CAAC,CAAC,EAAE;IAC7B,OAAOd,aAAa,CAACkC,MAAM,CAACpB,IAAI,CAAC,CAACwC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC;EAC5D;EACA,OAAOtD,aAAa,CAACkC,MAAM,CAACpB,IAAI,CAAC,CAAC,IAAI,CAAC;AACzC,CAAC;AAGD,OAAO,MAAMyC,UAAU,GAAIhD,KAAmC,IAAK;EACjE,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC7B,MAAM8C,IAAI,GAAI9C,KAAK,CAAsBiD,KAAK,CAAC,IAAI,CAAC;IACpD,OAAOC,KAAK,CAACJ,IAA+B,CAAC;EAC/C,CAAC,MAAM,IAAI,OAAO9C,KAAK,KAAK,SAAS,EAAE;IACrC,OAAO,CAAC,OAAO,CAAiC;EAClD,CAAC,MAAM,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IACpC,OAAO,CAACA,KAAK,CAAC;EAChB;EAEA,OAAOkD,KAAK,CAAClD,KAAK,CAAC,IAAI,IAAI;EAE3B,SAASkD,KAAKA,CAACC,CAA6C,EAAE;IAC5D,OAAOA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,MAAM,CAAEC,CAAC,IAAKA,CAAC,IAAI1B,MAAM,CAAC0B,CAAC,CAAC,CAAC5C,MAAM,GAAG,CAAC,CAAC;EACpD;AACF,CAAC;AAGD,OAAO,MAAMqB,QAAQ,GAAI9B,KAAmC,IAC1DgD,UAAU,CAAChD,KAAK,CAAC,CACd2C,GAAG,CAAEpC,IAAI,IAAKsC,cAAc,CAACtC,IAAI,CAAC,CAAC,CACnC+B,MAAM,CAAC,CAACC,GAAG,EAAEd,GAAG,KAAK;EACpB,IAAIA,GAAG,GAAG,CAAC,EAAE;IACXc,GAAG,IAAId,GAAG;EACZ,CAAC,MAAM,IAAIA,GAAG,GAAG,CAAC,EAAE;IAClBc,GAAG,IAAId,GAAG;EACZ;EACA,OAAOc,GAAG;AACZ,CAAC,EAAE,CAAC,CAAC;AAGT,OAAO,MAAMjC,mBAAmB,GAC9BN,KAAgB,IACK;EACrB,OAAO,CAACgD,UAAU,CAAChD,KAAK,CAAC,IAAI,EAAE,EAAEsC,MAAM,CAAC,CAACC,GAAG,EAAEhC,IAAI,KAAK;IACrD,IAAIA,IAAI,EAAE;MACR,MAAM+C,WAAW,GAAG3B,MAAM,CAACpB,IAAI,CAAC,CAAC,CAAC,CAAC;MACnC,IAAIgD,UAAU,CAACD,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE;QAEhC,IAAIE,GAAG,GAAGD,UAAU,CAAC5B,MAAM,CAACpB,IAAI,CAAC,CAAC;QAGlC,IAAIiD,GAAG,IAAI,CAAC,IAAI,SAAS,CAACV,IAAI,CAACnB,MAAM,CAACpB,IAAI,CAAC,CAAC,EAAE;UAC5CiD,GAAG,GAAGA,GAAG,GAAG,EAAE;QAChB;QAGA,MAAMC,SAAS,GAAGC,QAAQ,CAACF,GAAG,CAAC;QAG/B,IAAIC,SAAS,EAAE;UACblD,IAAI,GAAGkD,SAAS;QAClB,CAAC,MAAM;UACLf,gBAAgB,CAACc,GAAG,CAAC,CAACpD,OAAO,CAAEG,IAAI,IAAK;YACtC,IAAIA,IAAI,EAAE;cACRgC,GAAG,CAAC/B,IAAI,CAACD,IAAI,CAAC;YAChB;UACF,CAAC,CAAC;QACJ;MACF;MAEA,IAAI,EAAEgD,UAAU,CAAC5B,MAAM,CAACpB,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE;QACnCgC,GAAG,CAAC/B,IAAI,CAACD,IAAI,CAAC;MAChB;IACF;IACA,OAAOgC,GAAG;EACZ,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAGD,OAAO,MAAMmB,QAAQ,GAAIF,GAAgB,IAAgB;EACvD,MAAMG,KAAK,GAAGC,WAAW,CAACJ,GAAG,CAAC;EAG9B,IAAIG,KAAK,EAAE;IACT,OAAOA,KAAK,CAAC,CAAC,CAAC;EACjB;EAEA,OAAO,IAAI;AACb,CAAC;AAGD,OAAO,MAAMC,WAAW,GACtBJ,GAAgB,IAGb;EACH,MAAMK,mBAAmB,GAAG7C,MAAM,CAACqB,OAAO,CAAC5C,aAAa,CAGrD;EACH,MAAMkE,KAAK,GACTE,mBAAmB,CAACC,IAAI,CAAC,CAAC,CAACC,CAAC,EAAEC,CAAC,CAAC,KAAKD,CAAC,IAAIC,CAAC,KAAKR,GAAG,CAAC,IAAI,IAAI;EAC9D,OAAOG,KAAK;AACd,CAAC;AAGD,OAAO,MAAMjB,gBAAgB,GAAGA,CAACc,GAAgB,EAAES,QAAQ,GAAG,KAAK,KAAK;EACtE,IAAIC,GAAG,GAAG,EAAE;EAEZ,MAAMC,IAAI,GAAGnD,MAAM,CAACqB,OAAO,CAAC5C,aAAa,CAAC,CACvC2E,OAAO,CAAC,CAAC,CACThB,MAAM,CAAEW,CAAC,IAAME,QAAQ,GAAG,IAAI,GAAG,CAACF,CAAC,CAAC,CAAC,CAAC,CAAC9C,QAAQ,CAAC,IAAI,CAAE,CAAC,CACvD6C,IAAI,CAAC,CAAC,CAACC,CAAC,EAAEC,CAAC,CAAC,KAAKD,CAAC,IAAIP,GAAG,IAAIQ,CAAC,CAAC;EAClC,MAAMK,OAAO,GAAIF,IAAI,IAAIA,IAAI,CAAC,CAAC,CAAC,IAAKX,GAAG;EACxC,MAAMxD,KAAK,GAAG4D,WAAW,CAACS,OAAO,CAAC;EAElC,IAAIrE,KAAK,EAAE;IACT,MAAMsE,QAAQ,GAAGtE,KAAK,CAAC,CAAC,CAAC;IACzBkE,GAAG,CAAC1D,IAAI,CAAC8D,QAAQ,CAAC;IAClB,MAAMC,QAAQ,GAAGf,GAAG,GAAGD,UAAU,CAAC5B,MAAM,CAAC3B,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,MAAMwE,cAAc,GAAG9B,gBAAgB,CAAC6B,QAAQ,EAAEN,QAAQ,CAAC;IAG3DO,cAAc,CAACpE,OAAO,CAAEG,IAAI,IAAK;MAC/B,MAAMkE,KAAK,GAAGP,GAAG,CAACQ,OAAO,CAACnE,IAAI,CAAC;MAC/B,IAAIkE,KAAK,KAAK,CAAC,CAAC,EAAE;QAChBP,GAAG,CAACO,KAAK,CAAC,GAAGR,QAAQ,GAAI,GAAE1D,IAAK,KAAI,GAAGA,IAAI;MAC7C;IACF,CAAC,CAAC;IAEF2D,GAAG,GAAG,CAAC,GAAGA,GAAG,EAAE,GAAGM,cAAc,CAAC;EACnC;EAEA,OAAON,GAAG;AACZ,CAAC;AAGD,OAAO,MAAM1C,gBAAgB,GAAImD,QAAgB,IAC/CA,QAAQ,IACR,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC1D,QAAQ,CAChE0D,QACF,CAAC;AAEH,OAAO,MAAMC,gBAAgB,GAC3BjE,KAAY,IACwB;EACpC,MAAM;MAAExB,KAAK;MAAEC,UAAU;MAAEC,GAAG;MAAEE,MAAM;MAAEC,IAAI;MAAEF;IAAoB,CAAC,GACjEqB,KAAK;IADiDkE,SAAS,GAAAC,wBAAA,CAC/DnE,KAAK,EAAAoE,SAAA;EACP,OAAOF,SAAS;AAClB,CAAC;AAED,OAAO,MAAMjC,QAAQ,GAAIoC,WAAmB,IAAK;EAC/C,QAAQA,WAAW;IACjB,KAAK,IAAI;IACT,KAAK,IAAI;IACT,KAAK,IAAI;IACT,KAAK,IAAI;IACT,KAAK,IAAI;IACT,KAAK,IAAI;IACT,KAAK,GAAG;MACN,OAAO,IAAI;EACf;EAEA,OAAO,KAAK;AACd,CAAC"}
1	+ {"version":3,"file":"SpacingUtils.js","names":["warn","spacingDefaultProps","space","innerSpace","top","right","bottom","left","spacePatterns","small","medium","large","globalThis","CALC_CACHE","calc","types","hash","join","result","forEach","rawTypes","createTypeModifiers","type","push","length","createSpacingProperties","props","computeProperties","hasMediaSize","media","keys","Object","includes","hasSize","size","_space","value","transformToAll","key","isValidSpaceProp","cur","name","String","typeModifiers","sum","sumTypes","createSpacingClasses","Element","p","isFrozen","_objectSpread","_p$left","_p$bottom","_p$right","_p$top","i","entries","reduce","acc","direction","nearestTypes","findNearestTypes","map","isInline","translateSpace","test","replace","splitTypes","split","clean","t","filter","r","firstLetter","parseFloat","num","foundType","findType","found","findTypeAll","listOfSpacePatterns","find","k","v","multiply","res","near","reverse","nearNum","nearType","leftOver","foundMoreTypes","index","indexOf","propName","removeSpaceProps","restProps","_objectWithoutProperties","_excluded","elementName"],"sources":["../../../../src/components/space/SpacingUtils.ts"],"sourcesContent":["/*\n Space helper\n \n /\n\nimport { warn } from '../../shared/component-helper'\n\nimport type {\n SpaceType,\n SpacingUnknownProps,\n SpacingProps,\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType,\n SpaceStringTypes,\n SpaceTypeMedia,\n SpaceTypeAll,\n SpacingElementProps,\n} from './types'\n\ntype SpaceNumber = number\n\nexport const spacingDefaultProps: SpacingProps = {\n space: null,\n innerSpace: null,\n top: null,\n right: null,\n bottom: null,\n left: null,\n}\n// IMPORTANT: Keep the shorthand after the long type names\nexport const spacePatterns: Record<\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType\n> = {\n 'xx-small': 0.25,\n 'x-small': 0.5,\n small: 1,\n medium: 1.5,\n large: 2,\n 'x-large': 3,\n 'xx-large': 3.5,\n 'xx-large-x2': 7,\n}\n\n/*\n Helper function to generate a calc(var(--spacing-large) + var(--spacing-small))\n \n @param types 'small', '16px', '1rem'\n * @returns e.g. calc(var(--spacing-large) + var(--spacing-small))\n /\nglobalThis.CALC_CACHE = {}\nexport const calc = (...types: Array<SpaceType>) => {\n const hash = types.join('\|')\n if (globalThis.CALC_CACHE[hash]) {\n return globalThis.CALC_CACHE[hash]\n }\n\n const result: Array<string> = []\n\n types.forEach((rawTypes) => {\n createTypeModifiers(rawTypes as SpaceType).forEach((type) => {\n result.push(`var(--spacing-${type})`)\n })\n })\n\n return result.length\n ? (globalThis.CALC_CACHE[hash] = `calc(${result.join(' + ')})`)\n : null\n}\n\n/\n Creates a valid space CSS style out from given space types\n \n @param props\n * @returns { '--space-b-l': '2rem', '--space-t-l': '1rem' }\n /\nexport const createSpacingProperties = (\n props: SpacingProps\n): React.CSSProperties => {\n if (props?.innerSpace) {\n return computeProperties(props.innerSpace)\n }\n\n return {}\n}\n\nfunction hasMediaSize(media: SpaceTypeMedia) {\n const keys = Object.keys(media)\n return (\n keys.includes('small') \|\|\n keys.includes('medium') \|\|\n keys.includes('large')\n )\n}\n\nfunction hasSize(space: SpacingElementProps) {\n const keys = Object.keys(space)\n return (\n keys.includes('top') \|\|\n keys.includes('right') \|\|\n keys.includes('bottom') \|\|\n keys.includes('left')\n )\n}\n\nfunction computeProperties(space: SpaceTypeAll \| SpaceTypeMedia) {\n if (!hasMediaSize(space as SpaceTypeMedia)) {\n space = {\n small: space,\n medium: space,\n large: space,\n } as SpaceTypeMedia\n }\n\n const result = {}\n\n for (const size in space as SpaceTypeMedia) {\n const value = space?.[size] as SpaceType \| SpacingElementProps\n const props = transformToAll(value)\n\n for (const key in props as SpaceTypeMedia) {\n if (isValidSpaceProp(key)) {\n const cur = props[key]\n const name = `--space-${key[0]}-${size[0]}`\n\n if (String(cur) === '0' \|\| String(cur) === 'false') {\n result[name] = '0'\n } else if (cur) {\n const typeModifiers = createTypeModifiers(cur as SpaceType)\n const sum = sumTypes(typeModifiers)\n result[name] = `${sum}rem`\n }\n }\n }\n }\n\n return result as React.CSSProperties\n}\n\nfunction transformToAll(value: SpaceType \| SpacingElementProps) {\n let result = value\n\n if (!hasSize(value as SpacingElementProps)) {\n result = {\n top: value,\n right: value,\n bottom: value,\n left: value,\n } as SpacingElementProps\n }\n\n return result as SpacingElementProps\n}\n\n/\n Creates a valid space CSS class out from given space types\n \n @param props\n * @param Element to check if it should be handled as inline\n * @returns \"dnb-space__large dnb-space__small\"\n /\nexport const createSpacingClasses = (\n props:\n \| SpacingProps\n /\n To support typical not defined props form components\n /\n \| SpacingUnknownProps,\n Element = null\n) => {\n const p = Object.isFrozen(props) ? { ...props } : props\n\n if (typeof p.space !== 'undefined') {\n if (\n typeof p.space === 'string' \|\|\n typeof p.space === 'number' \|\|\n (typeof p.space === 'boolean' && p.space)\n ) {\n p.left = p.left ?? p.space\n p.bottom = p.bottom ?? p.space\n p.right = p.right ?? p.space\n p.top = p.top ?? p.space\n }\n if (typeof p.space === 'object') {\n for (const i in p.space) {\n if (!p[i] && isValidSpaceProp(i)) {\n p[i] = p.space[i]\n }\n }\n }\n delete p.space\n }\n\n return Object.entries(p).reduce((acc, [direction, cur]) => {\n if (isValidSpaceProp(direction) && direction !== 'innerSpace') {\n if (String(cur) === '0' \|\| String(cur) === 'false') {\n acc.push(`dnb-space__${direction}--zero`)\n } else if (cur) {\n const typeModifiers = createTypeModifiers(cur as SpaceType)\n\n // get the total sum\n const sum = sumTypes(typeModifiers)\n if (sum > 10) {\n warn(\n `Spacing of more than 10rem is not supported! You used ${sum} / (${typeModifiers.join(\n ','\n )})`\n )\n } else {\n // auto combine classes\n const nearestTypes = findNearestTypes(sum, true)\n\n acc = [\n ...acc,\n ...nearestTypes.map(\n (type) => `dnb-space__${direction}--${type}`\n ),\n ]\n }\n }\n } else if (direction === 'no_collapse') {\n acc.push('dnb-space--no-collapse')\n if (Element && isInline(Element)) {\n acc.push('dnb-space--inline')\n }\n }\n\n return acc\n }, [])\n}\n\n// @internal splits types by given string\nexport const translateSpace = (type: SpaceType) => {\n if (/-x2$/.test(String(type))) {\n return spacePatterns[String(type).replace(/-x2$/, '')] 2\n }\n return spacePatterns[String(type)] \|\| 0\n}\n\n// @internal Splits a string of: \"large x-small\" into an array of the same\nexport const splitTypes = (types: SpaceType \| Array<SpaceType>) => {\n if (typeof types === 'string') {\n const test = (types as SpaceStringTypes).split(/ /g)\n return clean(test as Array<SpaceStringTypes>)\n } else if (typeof types === 'boolean') {\n return ['small' as SpaceTypesPositiveValuesType]\n } else if (typeof types === 'number') {\n return [types]\n }\n\n return clean(types) \|\| null\n\n function clean(t: Array<SpaceType> \| Array<SpaceStringTypes>) {\n return t?.filter((r) => r && String(r).length > 0)\n }\n}\n\n// @internal Sums e.g. \"large\" + \"x-small\" to be = 2.5rem\nexport const sumTypes = (types: SpaceType \| Array<SpaceType>) =>\n splitTypes(types)\n .map((type) => translateSpace(type))\n .reduce((acc, cur) => {\n if (cur > 0) {\n acc += cur\n } else if (cur < 0) {\n acc -= cur\n }\n return acc\n }, 0)\n\n// @internal Returns an array with modifiers e.g. [\"large\", \"x-small\"]\nexport const createTypeModifiers = (\n types: SpaceType\n): Array<SpaceType> => {\n return (splitTypes(types) \|\| []).reduce((acc, type) => {\n if (type) {\n const firstLetter = String(type)[0]\n if (parseFloat(firstLetter) > -1) {\n // can be \"2rem\" or \"32px\" - but we want only a number\n let num = parseFloat(String(type))\n\n // check if we got pixels\n if (num >= 8 && /[0-9]px/.test(String(type))) {\n num = num / 16\n }\n\n // check if the type exists in our extensions\n const foundType = findType(num)\n\n // get the type\n if (foundType) {\n type = foundType\n } else {\n findNearestTypes(num).forEach((type) => {\n if (type) {\n acc.push(type)\n }\n })\n }\n }\n\n if (!(parseFloat(String(type)) > 0)) {\n acc.push(type)\n }\n }\n return acc\n }, [])\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\"\nexport const findType = (num: SpaceNumber): SpaceType => {\n const found = findTypeAll(num)\n\n // get the type\n if (found) {\n return found[0]\n }\n\n return null\n}\n\n// @internal Finds from \"2.0\" the equivalent type \"large\" and returns all results\nexport const findTypeAll = (\n num: SpaceNumber\n): Array<\n SpaceTypesPositiveValuesType \| SpaceTypesPositiveRemValuesType\n> => {\n const listOfSpacePatterns = Object.entries(spacePatterns) as [\n SpaceTypesPositiveValuesType,\n SpaceTypesPositiveRemValuesType,\n ][]\n const found =\n listOfSpacePatterns.find(([k, v]) => k && v === num) \|\| null\n return found\n}\n\n// @internal Finds from e.g. a value of \"2.5rem\" the nearest type = [\"large\", \"x-small\"]\nexport const findNearestTypes = (num: SpaceNumber, multiply = false) => {\n let res = []\n\n const near = Object.entries(spacePatterns)\n .reverse()\n .filter((k) => (multiply ? true : !k[0].includes('-x'))) // e.g. -x2\n .find(([k, v]) => k && num >= v)\n const nearNum = (near && near[1]) \|\| num\n const types = findTypeAll(nearNum)\n\n if (types) {\n const nearType = types[0]\n res.push(nearType)\n const leftOver = num - parseFloat(String(types[1]))\n const foundMoreTypes = findNearestTypes(leftOver, multiply)\n\n // if the value already exists, then replace it with an x2\n foundMoreTypes.forEach((type) => {\n const index = res.indexOf(type)\n if (index !== -1) {\n res[index] = multiply ? `${type}-x2` : type\n }\n })\n\n res = [...res, ...foundMoreTypes]\n }\n\n return res\n}\n\n// @internal Checks if a space prop is a valid string like \"top\"\nexport const isValidSpaceProp = (propName: string) =>\n propName &&\n ['top', 'right', 'bottom', 'left', 'space', 'innerSpace'].includes(\n propName\n )\n\nexport const removeSpaceProps = <Props extends SpacingProps>(\n props: Props\n): Omit<Props, keyof SpacingProps> => {\n const { space, innerSpace, top, bottom, left, right, ...restProps } =\n props\n return restProps\n}\n\nexport const isInline = (elementName: string) => {\n switch (elementName) {\n case 'h1':\n case 'h2':\n case 'h3':\n case 'h4':\n case 'h5':\n case 'h6':\n case 'p':\n return true\n }\n\n return false\n}\n"],"mappings":"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"}

package/es/components/table/TableAccordion.js CHANGED Viewed

@@ -118,7 +118,7 @@ export function useTableAccordion({
   }
   function toggleOpenTr(event) {
     const target = event.target;
-    if (document.activeElement !== target && target.tagName !== 'INPUT' && !hasSelectedText()) {
+    if (document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' && !hasSelectedText()) {
       setOpen(!trIsOpen);
       setHadClick(true);
       onClick === null || onClick === void 0 ? void 0 : onClick(event);

package/es/components/table/TableAccordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableAccordion.js","names":["React","classnames","Button","IconPrimary","Th","Td","TableContext","keycode","hasSelectedText","TableAccordionContent","TrContext","useTableAccordion","children","className","props","expanded","disabled","noAnimation","onClick","onOpened","onClosed","_tableContext$allProp","_tableContext$allProp2","tableContext","useContext","trIsOpen","setOpen","useState","location","id","hash","trIsHover","setHover","trHadClick","setHadClick","content","Children","toArray","allProps","accordion","accordionContent","find","element","type","hasAccordionContent","isValidElement","countTds","filter","length","trParams","toggleOpenTr","onMouseEnter","onMouseEnterHandler","onMouseLeave","onMouseLeaveHandler","onKeyDown","onKeydownHandler","hasContent","tdElem","_TableTdAccordionIcon","createElement","TableTdAccordionIcon","key","accordionChevronPlacement","push","unshift","isTh","some","thElem","_TableThAccordionIcon","TableThAccordionIcon","Provider","value","_extends","tabIndex","undefined","event","target","document","activeElement","tagName","preventDefault","TableAccordionToggleButton","_React$useContext","trContext","iconSize","size","icon","accordionToggleButtonSR","Boolean","on_click","_tableContext$allProp3","_Td"],"sources":["../../../../src/components/table/TableAccordion.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon/IconPrimary'\nimport Th from './TableTh'\nimport Td from './TableTd'\nimport TableContext from './TableContext'\nimport keycode from 'keycode'\nimport { hasSelectedText } from '../../shared/helpers'\nimport { TableTrProps } from './TableTr'\n\nimport TableAccordionContent, { TrContext } from './TableAccordionContent'\nimport type { TableAccordionContentProps } from './TableAccordionContent'\n\nexport function useTableAccordion({\n children,\n className,\n props,\n expanded,\n disabled,\n noAnimation,\n onClick,\n onOpened,\n onClosed,\n}) {\n const tableContext = React.useContext(TableContext)\n\n const [trIsOpen, setOpen] = React.useState(() => {\n if (typeof expanded === 'boolean') {\n return expanded\n } else if (typeof location !== 'undefined') {\n const id = props?.id\n if (id && '#' + id === location.hash) {\n return true\n }\n }\n\n return false\n })\n const [trIsHover, setHover] = React.useState(false)\n const [trHadClick, setHadClick] = React.useState(false)\n\n let content = React.Children.toArray(children)\n\n if (!tableContext?.allProps?.accordion) {\n return null\n }\n\n /*\n Handle Accordion Content\n /\n const accordionContent = content.find((element: React.ReactElement) => {\n return element.type === TableAccordionContent\n }) as React.ReactElement<TableAccordionContentProps>\n const hasAccordionContent = React.isValidElement(accordionContent)\n const countTds = hasAccordionContent\n ? children.filter((element: React.ReactElement) => {\n return element.type === Td // TODO: We may need to include this in future --> \|\| component.type === Td.MainCell\n }).length + 1 // +1 because we push the TableAccordionToggleButton\n : null\n\n const trParams =\n !disabled && hasAccordionContent\n ? {\n onClick: toggleOpenTr,\n onMouseEnter: onMouseEnterHandler,\n onMouseLeave: onMouseLeaveHandler,\n onKeyDown: onKeydownHandler,\n }\n : {}\n\n if (hasAccordionContent) {\n // Remove the AccordionContent, and use it outside of the tr\n content = content.filter((element) => {\n const hasContent =\n (element as React.ReactElement<TableTrProps>).type ===\n TableAccordionContent\n return !hasContent\n })\n\n const tdElem = <TableTdAccordionIcon key=\"td-icon\" />\n\n if (tableContext.allProps.accordionChevronPlacement === 'end') {\n content.push(tdElem)\n } else {\n content.unshift(tdElem)\n }\n } else if (tableContext?.allProps?.accordion) {\n const isTh = content.some((element) => {\n return (element as React.ReactElement<TableTrProps>).type === Th\n })\n\n if (isTh) {\n const thElem = <TableThAccordionIcon key=\"th-icon\" />\n\n if (tableContext.allProps.accordionChevronPlacement === 'end') {\n content.push(thElem)\n } else {\n content.unshift(thElem)\n }\n }\n }\n\n return (\n <TrContext.Provider\n value={{\n toggleOpenTr,\n trIsOpen,\n noAnimation,\n countTds,\n hasAccordionContent,\n onOpened,\n onClosed,\n }}\n >\n <tr\n tabIndex={accordionContent && !disabled ? 0 : undefined}\n className={classnames(\n className,\n hasAccordionContent && 'dnb-table__tr--has-accordion-content',\n trIsOpen && 'dnb-table__tr--expanded',\n disabled && 'dnb-table__tr--disabled',\n noAnimation && 'dnb-table__tr--no-animation',\n trIsHover && trHadClick && 'dnb-table__tr--hover'\n )}\n {...trParams}\n {...props}\n >\n {content}\n </tr>\n {accordionContent}\n </TrContext.Provider>\n )\n\n function onKeydownHandler(event: KeyboardEvent) {\n switch (keycode(event)) {\n case 'space':\n case 'enter':\n {\n const target = event.target as HTMLElement\n if (\n document.activeElement !== target \|\|\n target.tagName === 'TR'\n ) {\n setOpen(!trIsOpen)\n event.preventDefault()\n }\n }\n break\n }\n }\n function onMouseEnterHandler() {\n setHover(true)\n }\n function onMouseLeaveHandler() {\n setHover(false)\n setHadClick(false)\n }\n function toggleOpenTr(event: MouseEvent) {\n const target = event.target as HTMLElement\n if (\n /\n Interactive elements to set activeElement on mouseDown,\n * we we can check against it.\n /\n document.activeElement !== target &&\n /\n Safari on macOS needs this extra check:\n \n > For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement\n /\n target.tagName !== 'INPUT' &&\n /\n Let the user select text,\n * without triggering the accordion.\n */\n !hasSelectedText()\n ) {\n setOpen(!trIsOpen)\n setHadClick(true)\n\n onClick?.(event)\n }\n }\n}\n\nexport function TableAccordionToggleButton() {\n const trContext = React.useContext(TrContext)\n const allProps = React.useContext(TableContext)?.allProps\n const iconSize =\n allProps.size === 'medium' \|\| allProps.size === 'small'\n ? 'basis'\n : 'medium'\n\n return (\n <span className=\"dnb-table__toggle-button\">\n <IconPrimary icon=\"chevron_down\" size={iconSize} />\n <Button\n className=\"dnb-sr-only\"\n tabIndex={-1}\n aria-label={allProps?.accordionToggleButtonSR}\n aria-expanded={Boolean(trContext?.trIsOpen)}\n on_click={trContext?.toggleOpenTr}\n />\n </span>\n )\n}\n\nfunction TableThAccordionIcon() {\n const tableContext = React.useContext(TableContext)\n return (\n <Th aria-hidden className=\"dnb-table__th__accordion-icon\">\n <div>{tableContext?.allProps?.accordionToggleButtonSR}</div>\n </Th>\n )\n}\n\nfunction TableTdAccordionIcon() {\n return (\n <Td className=\"dnb-table__td__accordion-icon\">\n <TableAccordionToggleButton />\n </Td>\n )\n}\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,WAAW,MAAM,qBAAqB;AAC7C,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,OAAO,MAAM,SAAS;AAC7B,SAASC,eAAe,QAAQ,sBAAsB;AAGtD,OAAOC,qBAAqB,IAAIC,SAAS,QAAQ,yBAAyB;AAG1E,OAAO,SAASC,iBAAiBA,CAAC;EAChCC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,QAAQ;EACRC;AACF,CAAC,EAAE;EAAA,IAAAC,qBAAA,EAAAC,sBAAA;EACD,MAAMC,YAAY,GAAGvB,KAAK,CAACwB,UAAU,CAAClB,YAAY,CAAC;EAEnD,MAAM,CAACmB,QAAQ,EAAEC,OAAO,CAAC,GAAG1B,KAAK,CAAC2B,QAAQ,CAAC,MAAM;IAC/C,IAAI,OAAOZ,QAAQ,KAAK,SAAS,EAAE;MACjC,OAAOA,QAAQ;IACjB,CAAC,MAAM,IAAI,OAAOa,QAAQ,KAAK,WAAW,EAAE;MAC1C,MAAMC,EAAE,GAAGf,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEe,EAAE;MACpB,IAAIA,EAAE,IAAI,GAAG,GAAGA,EAAE,KAAKD,QAAQ,CAACE,IAAI,EAAE;QACpC,OAAO,IAAI;MACb;IACF;IAEA,OAAO,KAAK;EACd,CAAC,CAAC;EACF,MAAM,CAACC,SAAS,EAAEC,QAAQ,CAAC,GAAGhC,KAAK,CAAC2B,QAAQ,CAAC,KAAK,CAAC;EACnD,MAAM,CAACM,UAAU,EAAEC,WAAW,CAAC,GAAGlC,KAAK,CAAC2B,QAAQ,CAAC,KAAK,CAAC;EAEvD,IAAIQ,OAAO,GAAGnC,KAAK,CAACoC,QAAQ,CAACC,OAAO,CAACzB,QAAQ,CAAC;EAE9C,IAAI,EAACW,YAAY,aAAZA,YAAY,gBAAAF,qBAAA,GAAZE,YAAY,CAAEe,QAAQ,cAAAjB,qBAAA,eAAtBA,qBAAA,CAAwBkB,SAAS,GAAE;IACtC,OAAO,IAAI;EACb;EAKA,MAAMC,gBAAgB,GAAGL,OAAO,CAACM,IAAI,CAAEC,OAA2B,IAAK;IACrE,OAAOA,OAAO,CAACC,IAAI,KAAKlC,qBAAqB;EAC/C,CAAC,CAAmD;EACpD,MAAMmC,mBAAmB,GAAG5C,KAAK,CAAC6C,cAAc,CAACL,gBAAgB,CAAC;EAClE,MAAMM,QAAQ,GAAGF,mBAAmB,GAChChC,QAAQ,CAACmC,MAAM,CAAEL,OAA2B,IAAK;IAC/C,OAAOA,OAAO,CAACC,IAAI,KAAKtC,EAAE;EAC5B,CAAC,CAAC,CAAC2C,MAAM,GAAG,CAAC,GACb,IAAI;EAER,MAAMC,QAAQ,GACZ,CAACjC,QAAQ,IAAI4B,mBAAmB,GAC5B;IACE1B,OAAO,EAAEgC,YAAY;IACrBC,YAAY,EAAEC,mBAAmB;IACjCC,YAAY,EAAEC,mBAAmB;IACjCC,SAAS,EAAEC;EACb,CAAC,GACD,CAAC,CAAC;EAER,IAAIZ,mBAAmB,EAAE;IAEvBT,OAAO,GAAGA,OAAO,CAACY,MAAM,CAAEL,OAAO,IAAK;MACpC,MAAMe,UAAU,GACbf,OAAO,CAAsCC,IAAI,KAClDlC,qBAAqB;MACvB,OAAO,CAACgD,UAAU;IACpB,CAAC,CAAC;IAEF,MAAMC,MAAM,GAAAC,qBAAA,KAAAA,qBAAA,GAAG3D,KAAA,CAAA4D,aAAA,CAACC,oBAAoB;MAACC,GAAG,EAAC;IAAS,CAAE,CAAC;IAErD,IAAIvC,YAAY,CAACe,QAAQ,CAACyB,yBAAyB,KAAK,KAAK,EAAE;MAC7D5B,OAAO,CAAC6B,IAAI,CAACN,MAAM,CAAC;IACtB,CAAC,MAAM;MACLvB,OAAO,CAAC8B,OAAO,CAACP,MAAM,CAAC;IACzB;EACF,CAAC,MAAM,IAAInC,YAAY,aAAZA,YAAY,gBAAAD,sBAAA,GAAZC,YAAY,CAAEe,QAAQ,cAAAhB,sBAAA,eAAtBA,sBAAA,CAAwBiB,SAAS,EAAE;IAC5C,MAAM2B,IAAI,GAAG/B,OAAO,CAACgC,IAAI,CAAEzB,OAAO,IAAK;MACrC,OAAQA,OAAO,CAAsCC,IAAI,KAAKvC,EAAE;IAClE,CAAC,CAAC;IAEF,IAAI8D,IAAI,EAAE;MACR,MAAME,MAAM,GAAAC,qBAAA,KAAAA,qBAAA,GAAGrE,KAAA,CAAA4D,aAAA,CAACU,oBAAoB;QAACR,GAAG,EAAC;MAAS,CAAE,CAAC;MAErD,IAAIvC,YAAY,CAACe,QAAQ,CAACyB,yBAAyB,KAAK,KAAK,EAAE;QAC7D5B,OAAO,CAAC6B,IAAI,CAACI,MAAM,CAAC;MACtB,CAAC,MAAM;QACLjC,OAAO,CAAC8B,OAAO,CAACG,MAAM,CAAC;MACzB;IACF;EACF;EAEA,OACEpE,KAAA,CAAA4D,aAAA,CAAClD,SAAS,CAAC6D,QAAQ;IACjBC,KAAK,EAAE;MACLtB,YAAY;MACZzB,QAAQ;MACRR,WAAW;MACX6B,QAAQ;MACRF,mBAAmB;MACnBzB,QAAQ;MACRC;IACF;EAAE,GAEFpB,KAAA,CAAA4D,aAAA,OAAAa,QAAA;IACEC,QAAQ,EAAElC,gBAAgB,IAAI,CAACxB,QAAQ,GAAG,CAAC,GAAG2D,SAAU;IACxD9D,SAAS,EAAEZ,UAAU,CACnBY,SAAS,EACT+B,mBAAmB,IAAI,sCAAsC,EAC7DnB,QAAQ,IAAI,yBAAyB,EACrCT,QAAQ,IAAI,yBAAyB,EACrCC,WAAW,IAAI,6BAA6B,EAC5Cc,SAAS,IAAIE,UAAU,IAAI,sBAC7B;EAAE,GACEgB,QAAQ,EACRnC,KAAK,GAERqB,OACC,CAAC,EACJK,gBACiB,CAAC;EAGvB,SAASgB,gBAAgBA,CAACoB,KAAoB,EAAE;IAC9C,QAAQrE,OAAO,CAACqE,KAAK,CAAC;MACpB,KAAK,OAAO;MACZ,KAAK,OAAO;QACV;UACE,MAAMC,MAAM,GAAGD,KAAK,CAACC,MAAqB;UAC1C,IACEC,QAAQ,CAACC,aAAa,KAAKF,MAAM,IACjCA,MAAM,CAACG,OAAO,KAAK,IAAI,EACvB;YACAtD,OAAO,CAAC,CAACD,QAAQ,CAAC;YAClBmD,KAAK,CAACK,cAAc,CAAC,CAAC;UACxB;QACF;QACA;IACJ;EACF;EACA,SAAS7B,mBAAmBA,CAAA,EAAG;IAC7BpB,QAAQ,CAAC,IAAI,CAAC;EAChB;EACA,SAASsB,mBAAmBA,CAAA,EAAG;IAC7BtB,QAAQ,CAAC,KAAK,CAAC;IACfE,WAAW,CAAC,KAAK,CAAC;EACpB;EACA,SAASgB,YAAYA,CAAC0B,KAAiB,EAAE;IACvC,MAAMC,MAAM,GAAGD,KAAK,CAACC,MAAqB;IAC1C,IAKEC,QAAQ,CAACC,aAAa,KAAKF,MAAM,IAOjCA,MAAM,CAACG,OAAO,KAAK,OAAO,IAK1B,CAACxE,eAAe,CAAC,CAAC,EAClB;MACAkB,OAAO,CAAC,CAACD,QAAQ,CAAC;MAClBS,WAAW,CAAC,IAAI,CAAC;MAEjBhB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAG0D,KAAK,CAAC;IAClB;EACF;AACF;AAEA,OAAO,SAASM,0BAA0BA,CAAA,EAAG;EAAA,IAAAC,iBAAA;EAC3C,MAAMC,SAAS,GAAGpF,KAAK,CAACwB,UAAU,CAACd,SAAS,CAAC;EAC7C,MAAM4B,QAAQ,IAAA6C,iBAAA,GAAGnF,KAAK,CAACwB,UAAU,CAAClB,YAAY,CAAC,cAAA6E,iBAAA,uBAA9BA,iBAAA,CAAgC7C,QAAQ;EACzD,MAAM+C,QAAQ,GACZ/C,QAAQ,CAACgD,IAAI,KAAK,QAAQ,IAAIhD,QAAQ,CAACgD,IAAI,KAAK,OAAO,GACnD,OAAO,GACP,QAAQ;EAEd,OACEtF,KAAA,CAAA4D,aAAA;IAAM/C,SAAS,EAAC;EAA0B,GACxCb,KAAA,CAAA4D,aAAA,CAACzD,WAAW;IAACoF,IAAI,EAAC,cAAc;IAACD,IAAI,EAAED;EAAS,CAAE,CAAC,EACnDrF,KAAA,CAAA4D,aAAA,CAAC1D,MAAM;IACLW,SAAS,EAAC,aAAa;IACvB6D,QAAQ,EAAE,CAAC,CAAE;IACb,cAAYpC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEkD,uBAAwB;IAC9C,iBAAeC,OAAO,CAACL,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAE3D,QAAQ,CAAE;IAC5CiE,QAAQ,EAAEN,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAElC;EAAa,CACnC,CACG,CAAC;AAEX;AAEA,SAASoB,oBAAoBA,CAAA,EAAG;EAAA,IAAAqB,sBAAA;EAC9B,MAAMpE,YAAY,GAAGvB,KAAK,CAACwB,UAAU,CAAClB,YAAY,CAAC;EACnD,OACEN,KAAA,CAAA4D,aAAA,CAACxD,EAAE;IAAC,mBAAW;IAACS,SAAS,EAAC;EAA+B,GACvDb,KAAA,CAAA4D,aAAA,cAAMrC,YAAY,aAAZA,YAAY,wBAAAoE,sBAAA,GAAZpE,YAAY,CAAEe,QAAQ,cAAAqD,sBAAA,uBAAtBA,sBAAA,CAAwBH,uBAA6B,CACzD,CAAC;AAET;AAEA,SAAS3B,oBAAoBA,CAAA,EAAG;EAC9B,OAAA+B,GAAA,KAAAA,GAAA,GACE5F,KAAA,CAAA4D,aAAA,CAACvD,EAAE;IAACQ,SAAS,EAAC;EAA+B,GAC3Cb,KAAA,CAAA4D,aAAA,CAACsB,0BAA0B,MAAE,CAC3B,CAAC;AAET"}
1	+ {"version":3,"file":"TableAccordion.js","names":["React","classnames","Button","IconPrimary","Th","Td","TableContext","keycode","hasSelectedText","TableAccordionContent","TrContext","useTableAccordion","children","className","props","expanded","disabled","noAnimation","onClick","onOpened","onClosed","_tableContext$allProp","_tableContext$allProp2","tableContext","useContext","trIsOpen","setOpen","useState","location","id","hash","trIsHover","setHover","trHadClick","setHadClick","content","Children","toArray","allProps","accordion","accordionContent","find","element","type","hasAccordionContent","isValidElement","countTds","filter","length","trParams","toggleOpenTr","onMouseEnter","onMouseEnterHandler","onMouseLeave","onMouseLeaveHandler","onKeyDown","onKeydownHandler","hasContent","tdElem","_TableTdAccordionIcon","createElement","TableTdAccordionIcon","key","accordionChevronPlacement","push","unshift","isTh","some","thElem","_TableThAccordionIcon","TableThAccordionIcon","Provider","value","_extends","tabIndex","undefined","event","target","document","activeElement","tagName","preventDefault","TableAccordionToggleButton","_React$useContext","trContext","iconSize","size","icon","accordionToggleButtonSR","Boolean","on_click","_tableContext$allProp3","_Td"],"sources":["../../../../src/components/table/TableAccordion.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon/IconPrimary'\nimport Th from './TableTh'\nimport Td from './TableTd'\nimport TableContext from './TableContext'\nimport keycode from 'keycode'\nimport { hasSelectedText } from '../../shared/helpers'\nimport { TableTrProps } from './TableTr'\n\nimport TableAccordionContent, { TrContext } from './TableAccordionContent'\nimport type { TableAccordionContentProps } from './TableAccordionContent'\n\nexport function useTableAccordion({\n children,\n className,\n props,\n expanded,\n disabled,\n noAnimation,\n onClick,\n onOpened,\n onClosed,\n}) {\n const tableContext = React.useContext(TableContext)\n\n const [trIsOpen, setOpen] = React.useState(() => {\n if (typeof expanded === 'boolean') {\n return expanded\n } else if (typeof location !== 'undefined') {\n const id = props?.id\n if (id && '#' + id === location.hash) {\n return true\n }\n }\n\n return false\n })\n const [trIsHover, setHover] = React.useState(false)\n const [trHadClick, setHadClick] = React.useState(false)\n\n let content = React.Children.toArray(children)\n\n if (!tableContext?.allProps?.accordion) {\n return null\n }\n\n /*\n Handle Accordion Content\n /\n const accordionContent = content.find((element: React.ReactElement) => {\n return element.type === TableAccordionContent\n }) as React.ReactElement<TableAccordionContentProps>\n const hasAccordionContent = React.isValidElement(accordionContent)\n const countTds = hasAccordionContent\n ? children.filter((element: React.ReactElement) => {\n return element.type === Td // TODO: We may need to include this in future --> \|\| component.type === Td.MainCell\n }).length + 1 // +1 because we push the TableAccordionToggleButton\n : null\n\n const trParams =\n !disabled && hasAccordionContent\n ? {\n onClick: toggleOpenTr,\n onMouseEnter: onMouseEnterHandler,\n onMouseLeave: onMouseLeaveHandler,\n onKeyDown: onKeydownHandler,\n }\n : {}\n\n if (hasAccordionContent) {\n // Remove the AccordionContent, and use it outside of the tr\n content = content.filter((element) => {\n const hasContent =\n (element as React.ReactElement<TableTrProps>).type ===\n TableAccordionContent\n return !hasContent\n })\n\n const tdElem = <TableTdAccordionIcon key=\"td-icon\" />\n\n if (tableContext.allProps.accordionChevronPlacement === 'end') {\n content.push(tdElem)\n } else {\n content.unshift(tdElem)\n }\n } else if (tableContext?.allProps?.accordion) {\n const isTh = content.some((element) => {\n return (element as React.ReactElement<TableTrProps>).type === Th\n })\n\n if (isTh) {\n const thElem = <TableThAccordionIcon key=\"th-icon\" />\n\n if (tableContext.allProps.accordionChevronPlacement === 'end') {\n content.push(thElem)\n } else {\n content.unshift(thElem)\n }\n }\n }\n\n return (\n <TrContext.Provider\n value={{\n toggleOpenTr,\n trIsOpen,\n noAnimation,\n countTds,\n hasAccordionContent,\n onOpened,\n onClosed,\n }}\n >\n <tr\n tabIndex={accordionContent && !disabled ? 0 : undefined}\n className={classnames(\n className,\n hasAccordionContent && 'dnb-table__tr--has-accordion-content',\n trIsOpen && 'dnb-table__tr--expanded',\n disabled && 'dnb-table__tr--disabled',\n noAnimation && 'dnb-table__tr--no-animation',\n trIsHover && trHadClick && 'dnb-table__tr--hover'\n )}\n {...trParams}\n {...props}\n >\n {content}\n </tr>\n {accordionContent}\n </TrContext.Provider>\n )\n\n function onKeydownHandler(event: KeyboardEvent) {\n switch (keycode(event)) {\n case 'space':\n case 'enter':\n {\n const target = event.target as HTMLElement\n if (\n document.activeElement !== target \|\|\n target.tagName === 'TR'\n ) {\n setOpen(!trIsOpen)\n event.preventDefault()\n }\n }\n break\n }\n }\n function onMouseEnterHandler() {\n setHover(true)\n }\n function onMouseLeaveHandler() {\n setHover(false)\n setHadClick(false)\n }\n function toggleOpenTr(event: MouseEvent) {\n const target = event.target as HTMLElement\n if (\n /\n Interactive elements to set activeElement on mouseDown,\n * we we can check against it.\n /\n document.activeElement !== target &&\n /\n Safari on macOS needs this extra check:\n \n > For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement\n /\n target.tagName !== 'INPUT' &&\n target.tagName !== 'LABEL' &&\n /\n Let the user select text,\n * without triggering the accordion.\n */\n !hasSelectedText()\n ) {\n setOpen(!trIsOpen)\n setHadClick(true)\n\n onClick?.(event)\n }\n }\n}\n\nexport function TableAccordionToggleButton() {\n const trContext = React.useContext(TrContext)\n const allProps = React.useContext(TableContext)?.allProps\n const iconSize =\n allProps.size === 'medium' \|\| allProps.size === 'small'\n ? 'basis'\n : 'medium'\n\n return (\n <span className=\"dnb-table__toggle-button\">\n <IconPrimary icon=\"chevron_down\" size={iconSize} />\n <Button\n className=\"dnb-sr-only\"\n tabIndex={-1}\n aria-label={allProps?.accordionToggleButtonSR}\n aria-expanded={Boolean(trContext?.trIsOpen)}\n on_click={trContext?.toggleOpenTr}\n />\n </span>\n )\n}\n\nfunction TableThAccordionIcon() {\n const tableContext = React.useContext(TableContext)\n return (\n <Th aria-hidden className=\"dnb-table__th__accordion-icon\">\n <div>{tableContext?.allProps?.accordionToggleButtonSR}</div>\n </Th>\n )\n}\n\nfunction TableTdAccordionIcon() {\n return (\n <Td className=\"dnb-table__td__accordion-icon\">\n <TableAccordionToggleButton />\n </Td>\n )\n}\n"],"mappings":"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"}

package/es/components/textarea/Textarea.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ import type { SkeletonShow } from '../Skeleton';
 import type { SpacingProps } from '../space/types';
 import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
 import type { GlobalStatusConfigObject } from '../GlobalStatus';
+import type { TextCounterProps } from '../../fragments/TextCounter';
 export type TextareaSuffix =
   | string
   | ((...args: any[]) => any)
@@ -87,6 +88,10 @@ export interface TextareaProps
    * Use `true` to make the Textarea grow and shrink depending on how many lines the user has filled.
    */
   autoresize?: boolean;
+  /**
+   * Use a number to define the displayed max length. You can also use an object defining the <a href="uilib/components/fragments/text-counter/">TextCounter</a> `variant` or properties. Please avoid using `maxLength` for accessibility reasons.
+   */
+  characterCounter?: Omit<TextCounterProps, 'text'> | number;
   /**
    * Set a number to define how many rows the Textarea can auto grow.
    */