npm - @uva-glass/component-library - Versions diffs - 3.55.5 → 3.55.7 - Mend

@uva-glass/component-library 3.55.5 → 3.55.7

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 (317) hide show

package/dist/components/SelectListbox/SelectListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectListbox.js","names":[],"sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\nimport type { SelectOptionProps } from './components/SelectOption';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. /\n options: OptionValue[];\n /* The selected value by default. /\n defaultValue?: SelectValue;\n /* The max height of the options. /\n maxOptionHeight?: `${number}${'px' \| 'rem'}`;\n /* `true` to disable the select box; otherwise, `false`. The default is `false`. /\n disabled?: boolean;\n /* The name of the property in the options structure that contains the label of the options. /\n buttonLabelProp?: string;\n /* `true` to render the labels in bold; otherwise, `false`. The default is `false`. /\n buttonLabelBold?: boolean;\n /* The variant of the select box. /\n variant?: 'noborder' \| 'pill' \| 'pillLeft' \| 'pillRight' \| 'darkBorder' \| 'roundedLeft' \| 'roundedRight';\n /* If true sets the option dropdown min-width to the width of the select button. /\n fullWidth?: boolean;\n /* The size of the select box. /\n size?: 'small' \| 'medium' \| 'default';\n /* `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. /\n optionPositionRight?: boolean;\n /* The breakpoint at which to switch to the mobile view. /\n mobileBreakpoint?: `${number}${'px' \| 'rem'}`;\n /* The callback function that is invoked when an option is selected. /\n onChange?: (option: OptionValue) => void;\n /* Option to add a devider after a given amout of options in the select option box. /\n dividerAfter?: number;\n /* `true` to color border red to show not valid; otherwise, `false`. /\n notValid?: boolean;\n}\n\n/* Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n fullWidth = false,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n dividerAfter,\n notValid = false,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement \| null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement \| null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n notValid={notValid}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {Children.map(children, (child, index) => {\n if (isValidElement<SelectOptionProps>(child)) {\n return cloneElement(child, {\n dividerAfter,\n key: index,\n });\n }\n return child;\n })}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"mappings":";;;;;;;;;AA8CA,IAAa,KAAiB,EAC5B,YACA,YACA,eAAY,IACZ,UAAO,WACP,wBACA,kBAAe,IACf,oBACA,aACA,qBAAkB,SAClB,oBACA,aACA,iBACA,cAAW,IACX,kBAC2C;CAC3C,IAAM,CAAC,GAAiB,KAAsB,EAA6B,KAAK,EAC1E,CAAC,GAAkB,KAAuB,EAA6B,KAAK,EAC5E,EAAE,OAAO,MAAkB,EAAsB,GAAiB,GAAkB;EACxF,YAAY;EACZ,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,oBAAoB,IAAsB,UAAU;EACpD,kBAAkB;EAClB;EACD,CAAC;~~AAEF~~,~~QACE~~,kBAAC,GAAD;EAAyB;EAAuB;YAC9C,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACY;GACO;GACA;GACR;GACH;GACI;GACA;GACV,KAAK;GACL,CAAA,EAEF,kBAAC,GAAD;GAAiB,KAAK;GAAoB,GAAI;aAC3C,EAAS,IAAI,IAAW,GAAO,MAC1B,EAAkC,EAAM,GACnC,EAAa,GAAO;IACzB;IACA,KAAK;IACN,CAAC,GAEG,EACP;GACc,CAAA,CACF,EAAA,CAAA;EACH,CAAA;;AAIrB,EAAc,eAAe"}
1	+ {"version":3,"file":"SelectListbox.js","names":[],"sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\nimport type { SelectOptionProps } from './components/SelectOption';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. /\n options: OptionValue[];\n /* The selected value by default. /\n defaultValue?: SelectValue;\n /* The max height of the options. /\n maxOptionHeight?: `${number}${'px' \| 'rem'}`;\n /* `true` to disable the select box; otherwise, `false`. The default is `false`. /\n disabled?: boolean;\n /* The name of the property in the options structure that contains the label of the options. /\n buttonLabelProp?: string;\n /* `true` to render the labels in bold; otherwise, `false`. The default is `false`. /\n buttonLabelBold?: boolean;\n /* The variant of the select box. /\n variant?: 'noborder' \| 'pill' \| 'pillLeft' \| 'pillRight' \| 'darkBorder' \| 'roundedLeft' \| 'roundedRight';\n /* If true sets the option dropdown min-width to the width of the select button. /\n fullWidth?: boolean;\n /* The size of the select box. /\n size?: 'small' \| 'medium' \| 'default';\n /* `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. /\n optionPositionRight?: boolean;\n /* The breakpoint at which to switch to the mobile view. /\n mobileBreakpoint?: `${number}${'px' \| 'rem'}`;\n /* The callback function that is invoked when an option is selected. /\n onChange?: (option: OptionValue) => void;\n /* Option to add a devider after a given amout of options in the select option box. /\n dividerAfter?: number;\n /* `true` to color border red to show not valid; otherwise, `false`. /\n notValid?: boolean;\n}\n\n/* Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n fullWidth = false,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n dividerAfter,\n notValid = false,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement \| null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement \| null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n notValid={notValid}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {Children.map(children, (child, index) => {\n if (isValidElement<SelectOptionProps>(child)) {\n return cloneElement(child, {\n dividerAfter,\n key: index,\n });\n }\n return child;\n })}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"mappings":";;;;;;;;;AA8CA,IAAa,KAAiB,EAC5B,YACA,YACA,eAAY,IACZ,UAAO,WACP,wBACA,kBAAe,IACf,oBACA,aACA,qBAAkB,SAClB,oBACA,aACA,iBACA,cAAW,IACX,kBAC2C;CAC3C,IAAM,CAAC,GAAiB,KAAsB,EAA6B,KAAK,EAC1E,CAAC,GAAkB,KAAuB,EAA6B,KAAK,EAC5E,EAAE,OAAO,MAAkB,EAAsB,GAAiB,GAAkB;EACxF,YAAY;EACZ,UAAU;EACV,QAAQ;EACR,gBAAgB;EAChB,oBAAoB,IAAsB,UAAU;EACpD,kBAAkB;EAClB;EACD,CAAC;CAEF,OACE,kBAAC,GAAD;EAAyB;EAAuB;YAC9C,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GACY;GACO;GACA;GACR;GACH;GACI;GACA;GACV,KAAK;GACL,CAAA,EAEF,kBAAC,GAAD;GAAiB,KAAK;GAAoB,GAAI;aAC3C,EAAS,IAAI,IAAW,GAAO,MAC1B,EAAkC,EAAM,GACnC,EAAa,GAAO;IACzB;IACA,KAAK;IACN,CAAC,GAEG,EACP;GACc,CAAA,CACF,EAAA,CAAA;EACH,CAAA;;AAIrB,EAAc,eAAe"}

package/dist/components/SelectListbox/SelectProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectProvider.js","names":[],"sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string \| number \| null;\n\nexport type OptionValue = {\n value: SelectValue;\n label: string;\n selectedLabel?: string;\n disabled?: boolean;\n};\nexport interface SelectListboxContext {\n options: OptionValue[];\n selectedValue: OptionValue;\n setSelectedValue: (v: OptionValue) => void;\n isOpen: boolean;\n setIsOpen: (v: boolean) => void;\n toggleListbox: () => void;\n getValue: (value: SelectValue) => OptionValue;\n activeIndex: number;\n setActiveIndex: (v: number) => void;\n listboxId: string;\n isDirty: boolean;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n options: OptionValue[];\n defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const [isDirty, setIsDirty] = useState(false);\n const listboxId = useRef<string>(useId());\n\n const toggleListbox = () => {\n setIsOpen((status) => !status);\n setIsDirty(false);\n };\n\n const getValue = (value: SelectValue) => {\n return (\n options.find((option) => option.value === value) \|\| {\n value: -1,\n label: '',\n selectedLabel: '-',\n }\n );\n };\n\n const setSelectedValue = (value: OptionValue, isDefault = false) => {\n const selectedIndex = options.findIndex((option) => option.value === value.value);\n setActiveIndex(selectedIndex);\n setValue(value);\n setIsOpen(false);\n setIsDirty(!isDefault);\n };\n\n if (defaultValue !== -1 && !value.value) {\n setSelectedValue(getValue(defaultValue), true);\n }\n\n useEffect(() => {\n const newLabel = getValue(value.value \|\| defaultValue).label;\n if (newLabel !== value.label) {\n setSelectedValue(getValue(value.value \|\| defaultValue));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [options, defaultValue]);\n\n return (\n <SelectContext.Provider\n value={{\n options,\n selectedValue: value,\n setSelectedValue,\n isOpen,\n setIsOpen,\n toggleListbox,\n getValue,\n activeIndex,\n setActiveIndex,\n listboxId: listboxId.current,\n isDirty,\n }}\n >\n {children}\n </SelectContext.Provider>\n );\n};\n\nexport const useSelect = () => {\n const context = useContext(SelectContext);\n\n if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n return context;\n};\n"],"mappings":";;;AA0BA,IAAM,IAAgB,EAAoC,EAAE,CAAyB,EAOxE,KAAkB,EAAE,YAAS,iBAAc,kBAAyC;CAC/F,IAAM,CAAC,GAAO,KAAY,EAAsB;EAAE,OAAO;EAAI,OAAO;EAAI,CAAC,EACnE,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAY,EAAe,GAAO,CAAC,EAEnC,UAAsB;~~AAE1B~~,~~EADA~~,GAAW,MAAW,CAAC,EAAO,EAC9B,EAAW,GAAM;IAGb,KAAY,MAEd,EAAQ,MAAM,MAAW,EAAO,UAAU,EAAM,IAAI;EAClD,OAAO;EACP,OAAO;EACP,eAAe;EAChB,EAIC,KAAoB,GAAoB,IAAY,OAAU;~~AAKlE~~,~~EAHA~~,EADsB,EAAQ,WAAW,MAAW,EAAO,UAAU,EAAM,~~MAAM~~,~~CACpD~~,EAC7B,EAAS,EAAM,EACf,EAAU,GAAM,EAChB,EAAW,CAAC,EAAU;;~~AAexB~~,~~QAZI~~,MAAiB,MAAM,CAAC,EAAM,SAChC,EAAiB,EAAS,EAAa,EAAE,GAAK,EAGhD,QAAgB;~~AAEd~~,~~EADiB~~,EAAS,EAAM,SAAS,EAAa,CAAC,UACtC,EAAM,SACrB,EAAiB,EAAS,EAAM,SAAS,EAAa,CAAC;IAGxD,CAAC,GAAS,EAAa,CAAC,EAGzB,kBAAC,EAAc,UAAf;EACE,OAAO;GACL;GACA,eAAe;GACf;GACA;GACA;GACA;GACA;GACA;GACA;GACA,WAAW,EAAU;GACrB;GACD;EAEA;EACsB,CAAA;GAIhB,UAAkB;CAC7B,IAAM,IAAU,EAAW,EAAc;~~AAEzC~~,~~KAAI~~,MAAY,KAAA,~~EAAW~~,~~OAAU~~,MAAM,kDAAkD;~~AAE7F~~,~~QAAO~~"}
1	+ {"version":3,"file":"SelectProvider.js","names":[],"sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string \| number \| null;\n\nexport type OptionValue = {\n value: SelectValue;\n label: string;\n selectedLabel?: string;\n disabled?: boolean;\n};\nexport interface SelectListboxContext {\n options: OptionValue[];\n selectedValue: OptionValue;\n setSelectedValue: (v: OptionValue) => void;\n isOpen: boolean;\n setIsOpen: (v: boolean) => void;\n toggleListbox: () => void;\n getValue: (value: SelectValue) => OptionValue;\n activeIndex: number;\n setActiveIndex: (v: number) => void;\n listboxId: string;\n isDirty: boolean;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n options: OptionValue[];\n defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const [isDirty, setIsDirty] = useState(false);\n const listboxId = useRef<string>(useId());\n\n const toggleListbox = () => {\n setIsOpen((status) => !status);\n setIsDirty(false);\n };\n\n const getValue = (value: SelectValue) => {\n return (\n options.find((option) => option.value === value) \|\| {\n value: -1,\n label: '',\n selectedLabel: '-',\n }\n );\n };\n\n const setSelectedValue = (value: OptionValue, isDefault = false) => {\n const selectedIndex = options.findIndex((option) => option.value === value.value);\n setActiveIndex(selectedIndex);\n setValue(value);\n setIsOpen(false);\n setIsDirty(!isDefault);\n };\n\n if (defaultValue !== -1 && !value.value) {\n setSelectedValue(getValue(defaultValue), true);\n }\n\n useEffect(() => {\n const newLabel = getValue(value.value \|\| defaultValue).label;\n if (newLabel !== value.label) {\n setSelectedValue(getValue(value.value \|\| defaultValue));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [options, defaultValue]);\n\n return (\n <SelectContext.Provider\n value={{\n options,\n selectedValue: value,\n setSelectedValue,\n isOpen,\n setIsOpen,\n toggleListbox,\n getValue,\n activeIndex,\n setActiveIndex,\n listboxId: listboxId.current,\n isDirty,\n }}\n >\n {children}\n </SelectContext.Provider>\n );\n};\n\nexport const useSelect = () => {\n const context = useContext(SelectContext);\n\n if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n return context;\n};\n"],"mappings":";;;AA0BA,IAAM,IAAgB,EAAoC,EAAE,CAAyB,EAOxE,KAAkB,EAAE,YAAS,iBAAc,kBAAyC;CAC/F,IAAM,CAAC,GAAO,KAAY,EAAsB;EAAE,OAAO;EAAI,OAAO;EAAI,CAAC,EACnE,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAY,EAAe,GAAO,CAAC,EAEnC,UAAsB;EAE1B,AADA,GAAW,MAAW,CAAC,EAAO,EAC9B,EAAW,GAAM;IAGb,KAAY,MAEd,EAAQ,MAAM,MAAW,EAAO,UAAU,EAAM,IAAI;EAClD,OAAO;EACP,OAAO;EACP,eAAe;EAChB,EAIC,KAAoB,GAAoB,IAAY,OAAU;EAKlE,AAHA,EADsB,EAAQ,WAAW,MAAW,EAAO,UAAU,EAAM,MAC5D,CAAc,EAC7B,EAAS,EAAM,EACf,EAAU,GAAM,EAChB,EAAW,CAAC,EAAU;;CAexB,OAZI,MAAiB,MAAM,CAAC,EAAM,SAChC,EAAiB,EAAS,EAAa,EAAE,GAAK,EAGhD,QAAgB;EAEd,AADiB,EAAS,EAAM,SAAS,EAAa,CAAC,UACtC,EAAM,SACrB,EAAiB,EAAS,EAAM,SAAS,EAAa,CAAC;IAGxD,CAAC,GAAS,EAAa,CAAC,EAGzB,kBAAC,EAAc,UAAf;EACE,OAAO;GACL;GACA,eAAe;GACf;GACA;GACA;GACA;GACA;GACA;GACA;GACA,WAAW,EAAU;GACrB;GACD;EAEA;EACsB,CAAA;GAIhB,UAAkB;CAC7B,IAAM,IAAU,EAAW,EAAc;CAEzC,IAAI,MAAY,KAAA,GAAW,MAAU,MAAM,kDAAkD;CAE7F,OAAO"}

package/dist/components/SelectListbox/components/SelectButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectButton.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n variant?: 'noborder' \| 'pill' \| 'pillLeft' \| 'pillRight' \| 'darkBorder' \| 'roundedLeft' \| 'roundedRight';\n size?: 'small' \| 'medium' \| 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const {\n variant,\n size = 'default',\n onChange,\n buttonLabelProp = 'label',\n buttonLabelBold,\n disabled = false,\n notValid = false,\n } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n useSelect() \|\| {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key.length === 1) {\n const key = event.key.toLocaleLowerCase();\n const optionIndexStartsWithKey = options.findIndex(\n (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n );\n if (optionIndexStartsWithKey !== -1) {\n setActiveIndex(optionIndexStartsWithKey);\n if (!isOpen) setIsOpen(true);\n event.preventDefault();\n return;\n }\n }\n\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n return;\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (isOpen) {\n (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (onChange) {\n onChange(selectedValue);\n }\n\n isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValue]);\n\n return (\n <span ref={buttonWrapper}>\n <button\n className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n [styles[`select-listbox-trigger--${variant}`]]: variant,\n [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n [styles['select-listbox-trigger--not-valid']]: notValid,\n })}\n type=\"button\"\n onClick={toggleListbox}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedValue.label}`}\n disabled={disabled}\n aria-controls={listboxId}\n {...(ref && { ref: ref })}\n >\n <span className={styles['select-listbox-trigger-label']}>\n {selectedValue[buttonLabelProp as keyof SelectValue]}\n </span>\n\n <Icon\n className={clsx(styles['select-listbox-trigger-icon'], {\n [styles['select-listbox-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n </span>\n );\n});\n"],"mappings":";;;;;;;AAoBA,IAAa,IAAe,GAAkD,GAAO,MAAQ;CAC3F,IAAM,EACJ,YACA,UAAO,WACP,aACA,qBAAkB,SAClB,oBACA,cAAW,IACX,cAAW,OACT,GACE,IAAgB,EAAwB,KAAK,EAC7C,EAAE,cAAW,WAAQ,kBAAe,kBAAe,cAAW,mBAAgB,YAAS,eAC3F,GAAW,IAAI,EAAE,EAEb,KAAoB,MAA4C;~~AACpE~~,~~MAAI~~,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,mBAAmB,EACnC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,mBAAmB,CAAC,WAAW,EAAI,CACjF;~~AACD~~,~~OAAI~~,MAA6B,IAAI;~~AAGnC~~,~~IAFA~~,EAAe,EAAyB,EACnC,KAAQ,EAAU,GAAK,EAC5B,EAAM,gBAAgB;~~AACtB~~;;;~~AAIJ~~,~~UAAQ~~,EAAM,KAAd;GACE,KAAK;~~AAEH~~,~~QADA~~,EAAM,gBAAgB,EAClB,CAAC,GAAQ;~~AACX~~,~~OAAU~~,GAAK;~~AACf~~;;~~AAEF~~;GACF,KAAK;~~AACH~~,~~IAAI~~,MACF,EAAM,iBAAiB,EACvB,EAAe,EAAQ,WAAW,MAAW,EAAO,UAAU,GAAe,MAAM,CAAC,EACpF,EAAU,GAAM;~~AAElB~~;;;~~AAoBN~~,~~QAhBA~~,QAAgB;~~AACd~~,~~EAAI~~,MACD,EAAc,SAAS,SAAS,IAAyB,MAAM;IAEjE,CAAC,EAAO,CAAC,EAEZ,QAAgB;~~AAKd~~,~~EAJI~~,KACF,EAAS,EAAc,EAGzB,MAAY,EAAc,SAAS,SAAS,IAAyB,OAAO;IAG3E,CAAC,EAAc,CAAC,EAGjB,kBAAC,QAAD;EAAM,KAAK;YACT,kBAAC,UAAD;GACE,WAAW,EAAK,EAAO,2BAA2B,EAAO,2BAA2B,MAAS;KAC1F,EAAO,2BAA2B,OAAa;KAC/C,EAAO,kCAAkC;KACzC,EAAO,uCAAuC;IAChD,CAAC;GACF,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,iBAAc;GACd,cAAY,GAAG,EAAc;GACnB;GACV,iBAAe;GACf,GAAK,KAAO,EAAO,QAAK;aAd1B,CAgBE,kBAAC,QAAD;IAAM,WAAW,EAAO;cACrB,EAAc;IACV,CAAA,EAEP,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,gCAAgC,GACpD,EAAO,uCAAuC,GAChD,CAAC;IACF,MAAK;IACL,MAAM;IACN,CAAA,CACK;;EACJ,CAAA;EAET"}
1	+ {"version":3,"file":"SelectButton.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n variant?: 'noborder' \| 'pill' \| 'pillLeft' \| 'pillRight' \| 'darkBorder' \| 'roundedLeft' \| 'roundedRight';\n size?: 'small' \| 'medium' \| 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const {\n variant,\n size = 'default',\n onChange,\n buttonLabelProp = 'label',\n buttonLabelBold,\n disabled = false,\n notValid = false,\n } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n useSelect() \|\| {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key.length === 1) {\n const key = event.key.toLocaleLowerCase();\n const optionIndexStartsWithKey = options.findIndex(\n (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n );\n if (optionIndexStartsWithKey !== -1) {\n setActiveIndex(optionIndexStartsWithKey);\n if (!isOpen) setIsOpen(true);\n event.preventDefault();\n return;\n }\n }\n\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n return;\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (isOpen) {\n (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (onChange) {\n onChange(selectedValue);\n }\n\n isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValue]);\n\n return (\n <span ref={buttonWrapper}>\n <button\n className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n [styles[`select-listbox-trigger--${variant}`]]: variant,\n [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n [styles['select-listbox-trigger--not-valid']]: notValid,\n })}\n type=\"button\"\n onClick={toggleListbox}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedValue.label}`}\n disabled={disabled}\n aria-controls={listboxId}\n {...(ref && { ref: ref })}\n >\n <span className={styles['select-listbox-trigger-label']}>\n {selectedValue[buttonLabelProp as keyof SelectValue]}\n </span>\n\n <Icon\n className={clsx(styles['select-listbox-trigger-icon'], {\n [styles['select-listbox-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n </span>\n );\n});\n"],"mappings":";;;;;;;AAoBA,IAAa,IAAe,GAAkD,GAAO,MAAQ;CAC3F,IAAM,EACJ,YACA,UAAO,WACP,aACA,qBAAkB,SAClB,oBACA,cAAW,IACX,cAAW,OACT,GACE,IAAgB,EAAwB,KAAK,EAC7C,EAAE,cAAW,WAAQ,kBAAe,kBAAe,cAAW,mBAAgB,YAAS,eAC3F,GAAW,IAAI,EAAE,EAEb,KAAoB,MAA4C;EACpE,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,mBAAmB,EACnC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,mBAAmB,CAAC,WAAW,EAAI,CACjF;GACD,IAAI,MAA6B,IAAI;IAGnC,AAFA,EAAe,EAAyB,EACnC,KAAQ,EAAU,GAAK,EAC5B,EAAM,gBAAgB;IACtB;;;EAIJ,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,IADA,EAAM,gBAAgB,EAClB,CAAC,GAAQ;KACX,EAAU,GAAK;KACf;;IAEF;GACF,KAAK;IACH,AAAI,MACF,EAAM,iBAAiB,EACvB,EAAe,EAAQ,WAAW,MAAW,EAAO,UAAU,GAAe,MAAM,CAAC,EACpF,EAAU,GAAM;IAElB;;;CAoBN,OAhBA,QAAgB;EACd,AAAI,MACD,EAAc,SAAS,SAAS,IAAyB,MAAM;IAEjE,CAAC,EAAO,CAAC,EAEZ,QAAgB;EAKd,AAJI,KACF,EAAS,EAAc,EAGzB,MAAY,EAAc,SAAS,SAAS,IAAyB,OAAO;IAG3E,CAAC,EAAc,CAAC,EAGjB,kBAAC,QAAD;EAAM,KAAK;YACT,kBAAC,UAAD;GACE,WAAW,EAAK,EAAO,2BAA2B,EAAO,2BAA2B,MAAS;KAC1F,EAAO,2BAA2B,OAAa;KAC/C,EAAO,kCAAkC;KACzC,EAAO,uCAAuC;IAChD,CAAC;GACF,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,iBAAc;GACd,cAAY,GAAG,EAAc;GACnB;GACV,iBAAe;GACf,GAAK,KAAO,EAAO,QAAK;aAd1B,CAgBE,kBAAC,QAAD;IAAM,WAAW,EAAO;cACrB,EAAc;IACV,CAAA,EAEP,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,gCAAgC,GACpD,EAAO,uCAAuC,GAChD,CAAC;IACF,MAAK;IACL,MAAM;IACN,CAAA,CACK;;EACJ,CAAA;EAET"}

package/dist/components/SelectListbox/components/SelectContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectContainer.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectContainer.tsx"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport const SelectContainer = ({ children }: PropsWithChildren) => {\n const { isOpen, setIsOpen } = useSelect();\n const listboxRef = useRef<HTMLDivElement>(null);\n\n const onMouseEventOutside = useCallback(\n ({ target }: Event \| MouseEvent) => {\n if (!target \|\| !listboxRef.current) return;\n\n if (!listboxRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['select-listbox-container']} ref={listboxRef}>\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;AAOA,IAAa,KAAmB,EAAE,kBAAkC;CAClE,IAAM,EAAE,WAAQ,iBAAc,GAAW,EACnC,IAAa,EAAuB,KAAK,EAEzC,IAAsB,GACzB,EAAE,gBAAiC;~~AAC9B~~,~~GAAC~~,KAAU,CAAC,EAAW,WAEtB,EAAW,QAAQ,SAAS,EAAe,IAC9C,EAAU,GAAM;IAGpB,CAAC,EAAU,CACZ;~~AAcD~~,~~QAZA~~,QAAgB;~~AACT~~,~~QAKL~~,~~QAHA~~,SAAS,iBAAiB,SAAS,GAAqB,GAAK,EAC7D,SAAS,iBAAiB,UAAU,GAAqB,GAAK,QAEjD;~~AAEX~~,~~GADA~~,SAAS,oBAAoB,SAAS,GAAqB,GAAK,EAChE,SAAS,oBAAoB,UAAU,GAAqB,GAAK;;IAElE,CAAC,GAAqB,EAAO,CAAC,EAG/B,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA6B,KAAK;EACtD;EACG,CAAA"}
1	+ {"version":3,"file":"SelectContainer.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectContainer.tsx"],"sourcesContent":["import { useCallback, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport const SelectContainer = ({ children }: PropsWithChildren) => {\n const { isOpen, setIsOpen } = useSelect();\n const listboxRef = useRef<HTMLDivElement>(null);\n\n const onMouseEventOutside = useCallback(\n ({ target }: Event \| MouseEvent) => {\n if (!target \|\| !listboxRef.current) return;\n\n if (!listboxRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['select-listbox-container']} ref={listboxRef}>\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;AAOA,IAAa,KAAmB,EAAE,kBAAkC;CAClE,IAAM,EAAE,WAAQ,iBAAc,GAAW,EACnC,IAAa,EAAuB,KAAK,EAEzC,IAAsB,GACzB,EAAE,gBAAiC;EAC9B,CAAC,KAAU,CAAC,EAAW,WAEtB,EAAW,QAAQ,SAAS,EAAe,IAC9C,EAAU,GAAM;IAGpB,CAAC,EAAU,CACZ;CAcD,OAZA,QAAgB;EACT,OAKL,OAHA,SAAS,iBAAiB,SAAS,GAAqB,GAAK,EAC7D,SAAS,iBAAiB,UAAU,GAAqB,GAAK,QAEjD;GAEX,AADA,SAAS,oBAAoB,SAAS,GAAqB,GAAK,EAChE,SAAS,oBAAoB,UAAU,GAAqB,GAAK;;IAElE,CAAC,GAAqB,EAAO,CAAC,EAG/B,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA6B,KAAK;EACtD;EACG,CAAA"}

package/dist/components/SelectListbox/components/SelectOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectOption.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n option: OptionValue;\n index: number;\n key: string \| number;\n dividerAfter?: number;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n const selectOptionRef = useRef<HTMLLIElement>(null);\n const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n const handleSelectOption = (aIndex: number) => {\n setSelectedValue(options[aIndex]);\n setIsOpen(false);\n };\n\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n if (event.key.length === 1) {\n const key = event.key.toLocaleLowerCase();\n const optionIndexStartsWithKey = options.findIndex(\n (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n );\n if (optionIndexStartsWithKey !== -1) {\n setActiveIndex(optionIndexStartsWithKey);\n event.preventDefault();\n return;\n }\n }\n\n switch (event.key) {\n case 'Tab':\n event.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n if (!isOpen) {\n return;\n }\n if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n setActiveIndex(activeIndex + 1);\n }\n if (event.key === 'ArrowUp' && activeIndex > 0) {\n setActiveIndex(activeIndex - 1);\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n handleSelectOption(activeIndex);\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (index === activeIndex) {\n isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n }\n }, [activeIndex, index, isOpen]);\n\n useEffect(() => {\n if (selectedValue.value === option.value) {\n setActiveIndex(index);\n }\n }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n return (\n <>\n <li\n className={clsx(styles['select-listbox-option'], {\n [styles['select-listbox-option--active']]: index === activeIndex,\n [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n })}\n key={`${option.value}`}\n {...(!option.disabled && {\n onClick: () => setSelectedValue(option),\n onKeyDown: onOptionKeyDown,\n tabIndex: 0,\n role: 'option',\n 'aria-selected': selectedValue.value === option.value,\n })}\n ref={selectOptionRef}\n >\n {children}\n </li>\n {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n </>\n );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KAAgB,EAAE,WAAQ,UAAO,iBAAc,kBAAkC;CAC5F,IAAM,IAAkB,EAAsB,KAAK,EAC7C,EAAE,WAAQ,gBAAa,mBAAgB,kBAAe,qBAAkB,cAAW,eAAY,GAAW,EAE1G,KAAsB,MAAmB;~~AAE7C~~,~~EADA~~,EAAiB,EAAQ,GAAQ,EACjC,EAAU,GAAM;IAGZ,KAAmB,MAAwC;~~AAC~~/D,~~MAAI~~,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,mBAAmB,EACnC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,mBAAmB,CAAC,WAAW,EAAI,CACjF;~~AACD~~,~~OAAI~~,MAA6B,IAAI;~~AAEnC~~,~~IADA~~,EAAe,EAAyB,EACxC,EAAM,gBAAgB;~~AACtB~~;;;~~AAIJ~~,~~UAAQ~~,EAAM,KAAd;GACE,KAAK;~~AAEH~~,~~IADA~~,EAAM,gBAAgB,EAClB,KACF,EAAU,GAAM;~~AAElB~~;GACF,KAAK;GACL,KAAK;~~AAEH~~,~~QADA~~,EAAM,gBAAgB,EAClB,CAAC,~~EACH~~;~~AAKF~~,~~IAHI~~,EAAM,QAAQ,eAAe,IAAc,EAAQ,SAAS,KAC9D,EAAe,IAAc,EAAE,EAE7B,EAAM,QAAQ,aAAa,IAAc,KAC3C,EAAe,IAAc,EAAE;~~AAEjC~~;GACF,KAAK;~~AAEH~~,~~IADA~~,EAAM,gBAAgB,EAClB,GAAS,UAAU,IAAc,MAAM,CAAC,EAAQ,GAAa,YAC/D,EAAmB,EAAY;~~AAEjC~~;GACF,KAAK;~~AACH~~,~~IAAI~~,MACF,EAAM,iBAAiB,EACvB,EAAU,GAAM;~~AAElB~~;;;~~AAgBN~~,~~QAZA~~,QAAgB;~~AACd~~,~~EAAI~~,MAAU,MACZ,IAAS,EAAgB,SAAS,OAAO,GAAG,EAAgB,SAAS,MAAM;IAE5E;EAAC;EAAa;EAAO;EAAO,CAAC,EAEhC,QAAgB;~~AACd~~,~~EAAI~~,EAAc,UAAU,EAAO,SACjC,EAAe,EAAM;IAEtB;EAAC;EAAO,EAAO;EAAO,EAAc;EAAO;EAAe,CAAC,EAG5D,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,0BAA0B;IAC9C,EAAO,mCAAmC,MAAU;IACpD,EAAO,oCAAoC,IAAQ,MAAM;GAC3D,CAAC;EAEF,GAAK,CAAC,EAAO,YAAY;GACvB,eAAe,EAAiB,EAAO;GACvC,WAAW;GACX,UAAU;GACV,MAAM;GACN,iBAAiB,EAAc,UAAU,EAAO;GACjD;EACD,KAAK;EAEJ;EACE,EAXE,GAAG,EAAO,QAWZ,EACJ,IAAQ,MAAM,KAAgB,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA2B,eAAY;EAAS,CAAA,CACrG,EAAA,CAAA"}
1	+ {"version":3,"file":"SelectOption.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n option: OptionValue;\n index: number;\n key: string \| number;\n dividerAfter?: number;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n const selectOptionRef = useRef<HTMLLIElement>(null);\n const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n const handleSelectOption = (aIndex: number) => {\n setSelectedValue(options[aIndex]);\n setIsOpen(false);\n };\n\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n if (event.key.length === 1) {\n const key = event.key.toLocaleLowerCase();\n const optionIndexStartsWithKey = options.findIndex(\n (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n );\n if (optionIndexStartsWithKey !== -1) {\n setActiveIndex(optionIndexStartsWithKey);\n event.preventDefault();\n return;\n }\n }\n\n switch (event.key) {\n case 'Tab':\n event.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n if (!isOpen) {\n return;\n }\n if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n setActiveIndex(activeIndex + 1);\n }\n if (event.key === 'ArrowUp' && activeIndex > 0) {\n setActiveIndex(activeIndex - 1);\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n handleSelectOption(activeIndex);\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (index === activeIndex) {\n isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n }\n }, [activeIndex, index, isOpen]);\n\n useEffect(() => {\n if (selectedValue.value === option.value) {\n setActiveIndex(index);\n }\n }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n return (\n <>\n <li\n className={clsx(styles['select-listbox-option'], {\n [styles['select-listbox-option--active']]: index === activeIndex,\n [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n })}\n key={`${option.value}`}\n {...(!option.disabled && {\n onClick: () => setSelectedValue(option),\n onKeyDown: onOptionKeyDown,\n tabIndex: 0,\n role: 'option',\n 'aria-selected': selectedValue.value === option.value,\n })}\n ref={selectOptionRef}\n >\n {children}\n </li>\n {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n </>\n );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KAAgB,EAAE,WAAQ,UAAO,iBAAc,kBAAkC;CAC5F,IAAM,IAAkB,EAAsB,KAAK,EAC7C,EAAE,WAAQ,gBAAa,mBAAgB,kBAAe,qBAAkB,cAAW,eAAY,GAAW,EAE1G,KAAsB,MAAmB;EAE7C,AADA,EAAiB,EAAQ,GAAQ,EACjC,EAAU,GAAM;IAGZ,KAAmB,MAAwC;EAC/D,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,mBAAmB,EACnC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,mBAAmB,CAAC,WAAW,EAAI,CACjF;GACD,IAAI,MAA6B,IAAI;IAEnC,AADA,EAAe,EAAyB,EACxC,EAAM,gBAAgB;IACtB;;;EAIJ,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,gBAAgB,EAClB,KACF,EAAU,GAAM;IAElB;GACF,KAAK;GACL,KAAK;IAEH,IADA,EAAM,gBAAgB,EAClB,CAAC,GACH;IAKF,AAHI,EAAM,QAAQ,eAAe,IAAc,EAAQ,SAAS,KAC9D,EAAe,IAAc,EAAE,EAE7B,EAAM,QAAQ,aAAa,IAAc,KAC3C,EAAe,IAAc,EAAE;IAEjC;GACF,KAAK;IAEH,AADA,EAAM,gBAAgB,EAClB,GAAS,UAAU,IAAc,MAAM,CAAC,EAAQ,GAAa,YAC/D,EAAmB,EAAY;IAEjC;GACF,KAAK;IACH,AAAI,MACF,EAAM,iBAAiB,EACvB,EAAU,GAAM;IAElB;;;CAgBN,OAZA,QAAgB;EACd,AAAI,MAAU,MACZ,IAAS,EAAgB,SAAS,OAAO,GAAG,EAAgB,SAAS,MAAM;IAE5E;EAAC;EAAa;EAAO;EAAO,CAAC,EAEhC,QAAgB;EACd,AAAI,EAAc,UAAU,EAAO,SACjC,EAAe,EAAM;IAEtB;EAAC;EAAO,EAAO;EAAO,EAAc;EAAO;EAAe,CAAC,EAG5D,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,0BAA0B;IAC9C,EAAO,mCAAmC,MAAU;IACpD,EAAO,oCAAoC,IAAQ,MAAM;GAC3D,CAAC;EAEF,GAAK,CAAC,EAAO,YAAY;GACvB,eAAe,EAAiB,EAAO;GACvC,WAAW;GACX,UAAU;GACV,MAAM;GACN,iBAAiB,EAAc,UAAU,EAAO;GACjD;EACD,KAAK;EAEJ;EACE,EAXE,GAAG,EAAO,QAWZ,EACJ,IAAQ,MAAM,KAAgB,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA2B,eAAY;EAAS,CAAA,CACrG,EAAA,CAAA"}

package/dist/components/SelectListbox/components/SelectOptionBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectOptionBox.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n style: CSSProperties;\n children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n const { style, children } = props;\n const { listboxId, isOpen } = useSelect();\n const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n return (\n <div\n className={styles['select-listbox__wrapper']}\n style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n {...(ref && { ref: ref })}\n >\n <ul\n className={styles['select-listbox']}\n role=\"listbox\"\n ref={selectOptionBoxRef}\n id={listboxId}\n tabIndex={-1}\n style={{ maxHeight: style.maxHeight }}\n >\n {children}\n </ul>\n </div>\n );\n});\n"],"mappings":";;;;;AAYA,IAAa,IAAkB,GAAkD,GAAO,MAAQ;CAC9F,IAAM,EAAE,UAAO,gBAAa,GACtB,EAAE,cAAW,cAAW,GAAW,EACnC,IAAqB,EAAyB,KAAK;~~AAEzD~~,~~QACE~~,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;GAAE,GAAG;GAAO,YAAY,IAAS,YAAY;GAAU;EAC9D,GAAK,KAAO,EAAO,QAAK;YAExB,kBAAC,MAAD;GACE,WAAW,EAAO;GAClB,MAAK;GACL,KAAK;GACL,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,WAAW,EAAM,WAAW;GAEpC;GACE,CAAA;EACD,CAAA;EAER"}
1	+ {"version":3,"file":"SelectOptionBox.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n style: CSSProperties;\n children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n const { style, children } = props;\n const { listboxId, isOpen } = useSelect();\n const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n return (\n <div\n className={styles['select-listbox__wrapper']}\n style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n {...(ref && { ref: ref })}\n >\n <ul\n className={styles['select-listbox']}\n role=\"listbox\"\n ref={selectOptionBoxRef}\n id={listboxId}\n tabIndex={-1}\n style={{ maxHeight: style.maxHeight }}\n >\n {children}\n </ul>\n </div>\n );\n});\n"],"mappings":";;;;;AAYA,IAAa,IAAkB,GAAkD,GAAO,MAAQ;CAC9F,IAAM,EAAE,UAAO,gBAAa,GACtB,EAAE,cAAW,cAAW,GAAW,EACnC,IAAqB,EAAyB,KAAK;CAEzD,OACE,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;GAAE,GAAG;GAAO,YAAY,IAAS,YAAY;GAAU;EAC9D,GAAK,KAAO,EAAO,QAAK;YAExB,kBAAC,MAAD;GACE,WAAW,EAAO;GAClB,MAAK;GACL,KAAK;GACL,IAAI;GACJ,UAAU;GACV,OAAO,EAAE,WAAW,EAAM,WAAW;GAEpC;GACE,CAAA;EACD,CAAA;EAER"}

package/dist/components/Slider/Slider.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/Slider',\r\n component: Slider,\r\n argTypes: {\r\n onChange: {\r\n action: 'Slider value',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: Slider,\r\n codeString: codeString,\r\n },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n const handleSliderChange = (value: number) => {\r\n if (args.onChange) {\r\n args.onChange(value);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div style={{ width: '150px' }}>\r\n <Slider {...args} onChange={handleSliderChange} />\r\n </div>\r\n <div style={{ width: '300px', marginTop: '40px' }}>\r\n <Slider {...args} onChange={handleSliderChange} value={40} />\r\n </div>\r\n <div style={{ width: '600px', marginTop: '40px' }}>\r\n <Slider {...args} onChange={handleSliderChange} value={60} />\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n min: 0,\r\n max: 100,\r\n step: 5,\r\n units: '%',\r\n value: 80,\r\n};\r\n"],"mappings":";;AASA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO,EACL,SAAS,IACV;EACF,EACF;CACD,YAAY;EACV,kBAAkB;EACN~~,YAhBd~~;~~EAiBC~~;CACF,EAwBY,MAtB2B,MAAS;CAC/C,IAAM,KAAsB,MAAkB;~~AAC5C~~,~~EAAI~~,EAAK,YACP,EAAK,SAAS,EAAM;;~~AAIxB~~,~~QACE~~,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,SAAS;aAC5B,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAsB,CAAA;GAC9C,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACL,EAAA,CAAA;GAI+B,KAAK,EAAE,CAAC;AAC9C,EAAc,OAAO;CACnB,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;CACR"}
1	+ {"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/Slider',\r\n component: Slider,\r\n argTypes: {\r\n onChange: {\r\n action: 'Slider value',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: Slider,\r\n codeString: codeString,\r\n },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n const handleSliderChange = (value: number) => {\r\n if (args.onChange) {\r\n args.onChange(value);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div style={{ width: '150px' }}>\r\n <Slider {...args} onChange={handleSliderChange} />\r\n </div>\r\n <div style={{ width: '300px', marginTop: '40px' }}>\r\n <Slider {...args} onChange={handleSliderChange} value={40} />\r\n </div>\r\n <div style={{ width: '600px', marginTop: '40px' }}>\r\n <Slider {...args} onChange={handleSliderChange} value={60} />\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n min: 0,\r\n max: 100,\r\n step: 5,\r\n units: '%',\r\n value: 80,\r\n};\r\n"],"mappings":";;AASA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO,EACL,SAAS,IACV;EACF,EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAwBY,MAtB2B,MAAS;CAC/C,IAAM,KAAsB,MAAkB;EAC5C,AAAI,EAAK,YACP,EAAK,SAAS,EAAM;;CAIxB,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,SAAS;aAC5B,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAsB,CAAA;GAC9C,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACN,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;IAAQ;aAC/C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;IAAM,CAAA;GACzD,CAAA;EACL,EAAA,CAAA;GAI+B,KAAK,EAAE,CAAC;AAC9C,EAAc,OAAO;CACnB,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;CACR"}

package/dist/components/Sortable/Sortable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sortable.js","names":[],"sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string \| number;\nexport type SortableItemColors = 'grey-200' \| 'white';\n\nexport interface SortableProps<T = unknown> {\n /** The elements to show inside the Sortable. /\n children: ReactElement[] \| string[];\n /* The data objects that are actually being sorted. /\n childrenData?: T[];\n /* The placement of each item Handle (6 dots 2x3). /\n ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n /* If true, a scrollable version of the list will be rendered (max height 21rem/336px). /\n scrollable?: boolean;\n /* If true, the sorting will be disabled. /\n disabled?: boolean;\n /* Hide the numbers shown next to the sortable elements. /\n hideNumbers?: boolean;\n /* Change the color of the SortableItem wrapper. /\n sortableItemColor?: SortableItemColors;\n /* The callback function that is invoked when new sorting takes place. */\n onSort?: (items: T[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = <T,>({\n children,\n childrenData,\n ItemHandlePlacement = 'left',\n scrollable,\n disabled,\n onSort,\n hideNumbers,\n sortableItemColor = 'grey-200',\n}: SortableProps<T>) => {\n const sortableData: T[] = childrenData ?? (children as unknown as T[]);\n\n const wrappedItems = children.map((child, index) => (\n <SortableItem\n handlePlacement={ItemHandlePlacement}\n disabled={disabled \|\| Children.count(children) <= 1}\n sortableItemColor={sortableItemColor}\n index={index}\n key={`sortable-item-${index}`}\n >\n {child}\n </SortableItem>\n ));\n\n return (\n <SortableProvider\n renderItems={wrappedItems}\n dataItems={sortableData}\n scrollable={scrollable}\n hideNumbers={hideNumbers}\n onSort={onSort}\n key={`sortable-with-children-${Children.count(children)}`}\n >\n {wrappedItems}\n </SortableProvider>\n );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAgB,EAC3B,aACA,iBACA,yBAAsB,QACtB,eACA,aACA,WACA,gBACA,uBAAoB,iBACE;CACtB,IAAM,IAAoB,KAAiB,GAErC,IAAe,EAAS,KAAK,GAAO,MACxC,kBAAC,GAAD;EACE,iBAAiB;EACjB,UAAU,KAAY,EAAS,MAAM,EAAS,IAAI;EAC/B;EACZ;YAGN;EACY,EAHR,iBAAiB,IAGT,CACf;~~AAEF~~,~~QACE~~,kBAAC,GAAD;EACE,aAAa;EACb,WAAW;EACC;EACC;EACL;YAGP;EACgB,EAHZ,0BAA0B,EAAS,MAAM,EAAS,GAGtC"}
1	+ {"version":3,"file":"Sortable.js","names":[],"sources":["../../../src/components/Sortable/Sortable.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport type { ReactElement } from 'react';\nimport type { SortableItemProps } from './components/SortableItem';\n\nimport { SortableItem } from './components/SortableItem';\nimport { SortableProvider } from './SortableProvider';\n\nexport type Index = string \| number;\nexport type SortableItemColors = 'grey-200' \| 'white';\n\nexport interface SortableProps<T = unknown> {\n /** The elements to show inside the Sortable. /\n children: ReactElement[] \| string[];\n /* The data objects that are actually being sorted. /\n childrenData?: T[];\n /* The placement of each item Handle (6 dots 2x3). /\n ItemHandlePlacement?: SortableItemProps['handlePlacement'];\n /* If true, a scrollable version of the list will be rendered (max height 21rem/336px). /\n scrollable?: boolean;\n /* If true, the sorting will be disabled. /\n disabled?: boolean;\n /* Hide the numbers shown next to the sortable elements. /\n hideNumbers?: boolean;\n /* Change the color of the SortableItem wrapper. /\n sortableItemColor?: SortableItemColors;\n /* The callback function that is invoked when new sorting takes place. */\n onSort?: (items: T[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = <T,>({\n children,\n childrenData,\n ItemHandlePlacement = 'left',\n scrollable,\n disabled,\n onSort,\n hideNumbers,\n sortableItemColor = 'grey-200',\n}: SortableProps<T>) => {\n const sortableData: T[] = childrenData ?? (children as unknown as T[]);\n\n const wrappedItems = children.map((child, index) => (\n <SortableItem\n handlePlacement={ItemHandlePlacement}\n disabled={disabled \|\| Children.count(children) <= 1}\n sortableItemColor={sortableItemColor}\n index={index}\n key={`sortable-item-${index}`}\n >\n {child}\n </SortableItem>\n ));\n\n return (\n <SortableProvider\n renderItems={wrappedItems}\n dataItems={sortableData}\n scrollable={scrollable}\n hideNumbers={hideNumbers}\n onSort={onSort}\n key={`sortable-with-children-${Children.count(children)}`}\n >\n {wrappedItems}\n </SortableProvider>\n );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAgB,EAC3B,aACA,iBACA,yBAAsB,QACtB,eACA,aACA,WACA,gBACA,uBAAoB,iBACE;CACtB,IAAM,IAAoB,KAAiB,GAErC,IAAe,EAAS,KAAK,GAAO,MACxC,kBAAC,GAAD;EACE,iBAAiB;EACjB,UAAU,KAAY,EAAS,MAAM,EAAS,IAAI;EAC/B;EACZ;YAGN;EACY,EAHR,iBAAiB,IAGT,CACf;CAEF,OACE,kBAAC,GAAD;EACE,aAAa;EACb,WAAW;EACC;EACC;EACL;YAGP;EACgB,EAHZ,0BAA0B,EAAS,MAAM,EAAS,GAGtC"}

package/dist/components/Sortable/Sortable.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as e } from "../../test-Cr_l59hN.js";
+import { r as e } from "../../test-Pa9Lwbsq.js";
 import { Icon as t } from "../Icon/Icon.js";
 import { Button as n } from "../Buttons/Button.js";
 import { t as r } from "../../InputField-BWAy19w9.js";

package/dist/components/Sortable/Sortable.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Sortable.stories.js","names":[],"sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/Sortable',\n component: Sortable,\n argTypes: {\n children: {\n table: {\n disable: true,\n },\n },\n ItemHandlePlacement: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Sortable,\n codeString: codeString,\n },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n ItemHandlePlacement: 'left',\n onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n ...defaultArgs,\n ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n <Sortable {...args}>\n {mockItems.map((item) => (\n <Fragment key={item}>\n <div style={{ width: '100%' }}>\n <InputField key={item} id={item} placeholder={item} />\n </div>\n <Button variant=\"blank-icon\">\n <Icon name=\"Trash\" color=\"#a0002aff\" />\n </Button>\n </Fragment>\n ))}\n </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n ...defaultArgs,\n childrenData: [\n { title: 'item-1', value: 1 },\n { title: 'item-2', value: 2 },\n { title: 'item-3', value: 3 },\n { title: 'item-4', value: 4 },\n { title: 'item-5', value: 5 },\n ],\n};\n"],"mappings":";;;;;;AAgBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,qBAAqB,EACnB,OAAO,EACL,SAAS,IACV,EACF;EACF;CACD,YAAY;EACV,kBAAkB;EACN~~,YArBG~~;~~EAsBhB~~;CACF,EAEK,IAAsC;CAC1C,qBAAqB;CACrB,QAAQ,GAAI;CACb,EAEK,IAAY;CAAC;CAAU;CAAU;CAAU;CAAU;CAAS,EAE9D,KAAoC,MAAS,kBAAC,GAAD;CAAU,GAAI;WAAO;CAAqB,CAAA,EAEhF,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO,EACrB,GAAG,GACJ;AAED,IAAa,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO;CACrB,GAAG;CACH,qBAAqB;CACtB;AAiBD,IAAa,MAfoC,MAC/C,kBAAC,GAAD;CAAU,GAAI;WACX,EAAU,KAAK,MACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,OAAO,EAAE,OAAO,QAAQ;YAC3B,kBAAC,GAAD;GAAuB,IAAI;GAAM,aAAa;GAAQ,EAArC,EAAqC;EAClD,CAAA,EACN,kBAAC,GAAD;EAAQ,SAAQ;YACd,kBAAC,GAAD;GAAM,MAAK;GAAQ,OAAM;GAAc,CAAA;EAChC,CAAA,CACA,EAAA,EAPI,EAOJ,CACX;CACO,CAAA,EAGsC,KAAK,EAAE,CAAC;AAC3D,EAAoB,OAAO;CACzB,GAAG;CACH,cAAc;EACZ;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC9B;CACF"}
1	+ {"version":3,"file":"Sortable.stories.js","names":[],"sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/Sortable',\n component: Sortable,\n argTypes: {\n children: {\n table: {\n disable: true,\n },\n },\n ItemHandlePlacement: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Sortable,\n codeString: codeString,\n },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n ItemHandlePlacement: 'left',\n onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n ...defaultArgs,\n ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n <Sortable {...args}>\n {mockItems.map((item) => (\n <Fragment key={item}>\n <div style={{ width: '100%' }}>\n <InputField key={item} id={item} placeholder={item} />\n </div>\n <Button variant=\"blank-icon\">\n <Icon name=\"Trash\" color=\"#a0002aff\" />\n </Button>\n </Fragment>\n ))}\n </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n ...defaultArgs,\n childrenData: [\n { title: 'item-1', value: 1 },\n { title: 'item-2', value: 2 },\n { title: 'item-3', value: 3 },\n { title: 'item-4', value: 4 },\n { title: 'item-5', value: 5 },\n ],\n};\n"],"mappings":";;;;;;AAgBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,UAAU,EACR,OAAO,EACL,SAAS,IACV,EACF;EACD,qBAAqB,EACnB,OAAO,EACL,SAAS,IACV,EACF;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAEK,IAAsC;CAC1C,qBAAqB;CACrB,QAAQ,GAAI;CACb,EAEK,IAAY;CAAC;CAAU;CAAU;CAAU;CAAU;CAAS,EAE9D,KAAoC,MAAS,kBAAC,GAAD;CAAU,GAAI;WAAO;CAAqB,CAAA,EAEhF,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO,EACrB,GAAG,GACJ;AAED,IAAa,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO;CACrB,GAAG;CACH,qBAAqB;CACtB;AAiBD,IAAa,MAfoC,MAC/C,kBAAC,GAAD;CAAU,GAAI;WACX,EAAU,KAAK,MACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,OAAO,EAAE,OAAO,QAAQ;YAC3B,kBAAC,GAAD;GAAuB,IAAI;GAAM,aAAa;GAAQ,EAArC,EAAqC;EAClD,CAAA,EACN,kBAAC,GAAD;EAAQ,SAAQ;YACd,kBAAC,GAAD;GAAM,MAAK;GAAQ,OAAM;GAAc,CAAA;EAChC,CAAA,CACA,EAAA,EAPI,EAOJ,CACX;CACO,CAAA,EAGsC,KAAK,EAAE,CAAC;AAC3D,EAAoB,OAAO;CACzB,GAAG;CACH,cAAc;EACZ;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC7B;GAAE,OAAO;GAAU,OAAO;GAAG;EAC9B;CACF"}

package/dist/components/Sortable/components/SortableHandle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../../src/components/Sortable/components/SortableHandle.tsx"],"sourcesContent":["import { Icon } from 'components/Icon';\nimport styles from 'components/Sortable/Sortable.module.css';\n\nexport interface SortableHandleProps {\n placement: 'left' \| 'right';\n}\n\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\n\nexport function SortableHandle({ placement }: SortableHandleProps) {\n if (noSupportTouch) return null;\n\n return (\n <div className={`${styles['sortable__handle']} ${styles[`sortable__handle--${placement}`]}`}>\n <Icon name=\"Dots\" />\n </div>\n );\n}\n"],"mappings":";;;;AAOA,IAAM,IAAiB,kBAAkB,WAAW,SAAS;AAE7D,SAAgB,EAAe,EAAE,gBAAkC;~~AAGjE~~,~~QAFI~~,IAAuB,OAGzB,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAO,iBAAoB,GAAG,EAAO,qBAAqB;YAC3E,kBAAC,GAAD,EAAM,MAAK,QAAS,CAAA;EAChB,CAAA"}
1	+ {"version":3,"file":"SortableHandle.js","names":[],"sources":["../../../../src/components/Sortable/components/SortableHandle.tsx"],"sourcesContent":["import { Icon } from 'components/Icon';\nimport styles from 'components/Sortable/Sortable.module.css';\n\nexport interface SortableHandleProps {\n placement: 'left' \| 'right';\n}\n\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\n\nexport function SortableHandle({ placement }: SortableHandleProps) {\n if (noSupportTouch) return null;\n\n return (\n <div className={`${styles['sortable__handle']} ${styles[`sortable__handle--${placement}`]}`}>\n <Icon name=\"Dots\" />\n </div>\n );\n}\n"],"mappings":";;;;AAOA,IAAM,IAAiB,kBAAkB,WAAW,SAAS;AAE7D,SAAgB,EAAe,EAAE,gBAAkC;CAGjE,OAFI,IAAuB,OAGzB,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAO,iBAAoB,GAAG,EAAO,qBAAqB;YAC3E,kBAAC,GAAD,EAAM,MAAK,QAAS,CAAA;EAChB,CAAA"}

package/dist/components/Sortable/components/SortableItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableItem.js","names":[],"sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\nimport type { SortableItemColors } from 'components/Sortable/Sortable';\n\nimport { Icon } from 'components/Icon';\nimport { SortableHandle } from 'components/Sortable/components/SortableHandle';\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport interface SortableItemProps {\n children: ReactNode;\n handlePlacement: SortableHandleProps['placement'];\n disabled?: boolean;\n sortableItemColor: SortableItemColors;\n index: number;\n}\n\nconst ACCESS_KEYS = ['Space', 'ArrowDown', 'ArrowUp'];\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\nconst dragImage = new Image(0, 0);\n\ndragImage.src =\n // 1px transparent png\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';\n\nexport function SortableItem({ children, handlePlacement, disabled, sortableItemColor, index }: SortableItemProps) {\n const {\n clone,\n dragEnd,\n draggingSource,\n draggingTarget,\n dragStart,\n drop,\n maxIndex,\n moveToPosition,\n setClone,\n setDraggingSource,\n } = useSortable();\n const [grabbing, setGrabbing] = useState(false);\n const [moving, setmoving] = useState(false);\n const itemRef = useRef<HTMLDivElement>(null);\n const hasIndex = index !== undefined && index >= 0;\n\n useEffect(() => {\n if (!itemRef.current) return;\n if (globalThis.document.activeElement === itemRef.current) return;\n\n if (index === draggingTarget && draggingTarget === draggingSource) {\n // Manually setting focus after an item has been moved with the keyboard; focus is lost after rerender\n itemRef.current.focus();\n setmoving(true);\n } else {\n setmoving(false);\n }\n }, [index, draggingTarget, draggingSource, setDraggingSource]);\n\n function handleDragStart(event: DragEvent<HTMLDivElement>) {\n event.stopPropagation();\n\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setDragImage(dragImage, 0, 0);\n\n if (itemRef.current) {\n const cloned = itemRef.current.cloneNode(true) as Element;\n\n cloned.classList.add(styles['sortable__sort-item--ghost']);\n\n setClone(cloned);\n }\n\n if (hasIndex) dragStart(index);\n setGrabbing(true);\n }\n\n function handleDragEnd() {\n if (grabbing) return;\n\n if (clone) document.body.removeChild(clone);\n\n setGrabbing(false);\n dragEnd();\n }\n\n function handleKeyUp(event: ReactKeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Tab' && draggingSource !== undefined) {\n dragEnd();\n return;\n }\n\n if (ACCESS_KEYS.includes(code) === false) return;\n\n if (!hasIndex) return;\n\n if (code === 'Space') {\n if (moving) {\n setmoving(false);\n dragEnd();\n } else {\n setmoving(true);\n dragStart(index);\n }\n\n return;\n }\n\n if (draggingSource === undefined) return;\n\n const newTarget = code === 'ArrowUp' ? index - 1 : index + 1;\n\n if (newTarget < 0 \|\| newTarget > maxIndex) return;\n\n moveToPosition(newTarget);\n }\n\n function handleMove(event: MouseEvent<HTMLButtonElement>) {\n event.preventDefault();\n\n if (!hasIndex) return;\n\n dragStart(index);\n\n const { direction } = event.currentTarget.dataset;\n const newTarget = direction === 'up' ? index - 1 : index + 1;\n\n drop(newTarget);\n }\n\n return (\n <div\n className={clsx(styles['sortable__sort-item'], styles[`sortable__sort-item--${sortableItemColor}`])}\n draggable={!disabled}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onKeyUpCapture={handleKeyUp}\n ref={itemRef}\n role=\"presentation\"\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n >\n <div\n className={`${styles['sortable__sort-item__contents']} ${styles[`sortable__sort-item__contents--handle-${handlePlacement}`]}`}\n >\n {handlePlacement === 'left' && <SortableHandle placement=\"left\" />}\n {children}\n {handlePlacement === 'right' && <SortableHandle placement=\"right\" />}\n </div>\n\n <div className={styles['sortable__sort-item__button-container']} data-touch={noSupportTouch}>\n {!disabled && hasIndex && (\n <>\n {hasIndex && (\n <>\n {index > 0 && (\n <button\n className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--up']}`}\n data-direction=\"up\"\n onClickCapture={handleMove}\n >\n <div className={styles['sortable__sort-item__handle--icon']}>\n <Icon name=\"CheveronDown\" />\n </div>\n <span className={styles['sortable__visually-hidden']}>Move up</span>\n </button>\n )}\n\n {index < maxIndex && (\n <button\n className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--down']}`}\n data-direction=\"down\"\n onClickCapture={handleMove}\n >\n <div className={styles['sortable__sort-item__handle--icon']}>\n <Icon name=\"CheveronDown\" />\n </div>\n <span className={styles['sortable__visually-hidden']}>Move down</span>\n </button>\n )}\n </>\n )}\n </>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAoBA,IAAM,IAAc;CAAC;CAAS;CAAa;CAAU,EAC/C,IAAiB,kBAAkB,WAAW,SAAS,iBACvD,IAAY,IAAI,MAAM,GAAG,EAAE;AAEjC,EAAU,MAER;AAEF,SAAgB,EAAa,EAAE,aAAU,oBAAiB,aAAU,sBAAmB,YAA4B;CACjH,IAAM,EACJ,UACA,YACA,mBACA,mBACA,cACA,SACA,aACA,mBACA,aACA,yBACE,GAAa,EACX,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAU,EAAuB,KAAK,EACtC,IAAW,MAAU,KAAA,KAAa,KAAS;~~AAEjD~~,~~SAAgB~~;~~AACT~~,~~IAAQ~~,WACT,WAAW,SAAS,kBAAkB,EAAQ,YAE9C,MAAU,KAAkB,MAAmB,KAEjD,EAAQ,QAAQ,OAAO,EACvB,EAAU,GAAK,IAEf,EAAU,GAAM;IAEjB;EAAC;EAAO;EAAgB;EAAgB;EAAkB,CAAC;CAE9D,SAAS,EAAgB,GAAkC;~~AAMzD~~,~~MALA~~,EAAM,iBAAiB,EAEvB,EAAM,aAAa,gBAAgB,QACnC,EAAM,aAAa,aAAa,GAAW,GAAG,EAAE,EAE5C,EAAQ,SAAS;GACnB,IAAM,IAAS,EAAQ,QAAQ,UAAU,GAAK;~~AAI9C~~,~~GAFA~~,EAAO,UAAU,IAAI,EAAO,8BAA8B,EAE1D,EAAS,EAAO;;~~AAIlB~~,~~EADI~~,KAAU,EAAU,EAAM,EAC9B,EAAY,GAAK;;CAGnB,SAAS,IAAgB;~~AACnB~~,~~QAEA~~,KAAO,SAAS,KAAK,YAAY,EAAM,EAE3C,EAAY,GAAM,EAClB,GAAS;;CAGX,SAAS,EAAY,GAA2C;EAC9D,IAAM,EAAE,YAAS;~~AAEjB~~,~~MAAI~~,MAAS,SAAS,MAAmB,KAAA,GAAW;~~AAClD~~,~~MAAS~~;~~AACT~~;;~~AAKF~~,~~MAFI~~,EAAY,SAAS,EAAK,KAAK,MAE/B,CAAC,~~EAAU~~;~~AAEf~~,~~MAAI~~,MAAS,SAAS;~~AACpB~~,~~GAAI~~,KACF,EAAU,GAAM,EAChB,GAAS,KAET,EAAU,GAAK,EACf,EAAU,EAAM;~~AAGlB~~;;~~AAGF~~,~~MAAI~~,MAAmB,KAAA,~~EAAW~~;EAElC,IAAM,IAAY,MAAS,YAAY,IAAQ,IAAI,IAAQ;~~AAEvD~~,~~MAAY~~,KAAK,IAAY,KAEjC,EAAe,EAAU;;CAG3B,SAAS,EAAW,GAAsC;~~AAGxD~~,~~MAFA~~,EAAM,gBAAgB,EAElB,CAAC,~~EAAU~~;~~AAEf~~,~~IAAU~~,EAAM;EAEhB,IAAM,EAAE,iBAAc,EAAM,cAAc;~~AAG1C~~,~~IAFkB~~,MAAc,OAAO,IAAQ,IAAI,IAAQ,EAE5C;;~~AAGjB~~,~~QACE~~,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,wBAAwB,EAAO,wBAAwB,KAAqB;EACnG,WAAW,CAAC;EACZ,WAAW;EACX,aAAa;EACb,gBAAgB;EAChB,KAAK;EACL,MAAK;EAEL,UAAU;YATZ,CAWE,kBAAC,OAAD;GACE,WAAW,GAAG,EAAO,iCAAiC,GAAG,EAAO,yCAAyC;aAD3G;IAGG,MAAoB,UAAU,kBAAC,GAAD,EAAgB,WAAU,QAAS,CAAA;IACjE;IACA,MAAoB,WAAW,kBAAC,GAAD,EAAgB,WAAU,SAAU,CAAA;IAChE;MAEN,kBAAC,OAAD;GAAK,WAAW,EAAO;GAA0C,cAAY;aAC1E,CAAC,KAAY,KACZ,kBAAA,GAAA,EAAA,UACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,gBAAiB,CAAA;KACxB,CAAA,EACN,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;KAAc,CAAA,CAC7D;OAGV,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,gBAAiB,CAAA;KACxB,CAAA,EACN,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;KAAgB,CAAA,CAC/D;MAEV,EAAA,CAAA,EAEJ,CAAA;GAED,CAAA,CACF"}
1	+ {"version":3,"file":"SortableItem.js","names":[],"sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\nimport type { SortableItemColors } from 'components/Sortable/Sortable';\n\nimport { Icon } from 'components/Icon';\nimport { SortableHandle } from 'components/Sortable/components/SortableHandle';\nimport styles from 'components/Sortable/Sortable.module.css';\nimport { useSortable } from 'components/Sortable/SortableProvider';\n\nexport interface SortableItemProps {\n children: ReactNode;\n handlePlacement: SortableHandleProps['placement'];\n disabled?: boolean;\n sortableItemColor: SortableItemColors;\n index: number;\n}\n\nconst ACCESS_KEYS = ['Space', 'ArrowDown', 'ArrowUp'];\nconst noSupportTouch = 'ontouchstart' in globalThis.document.documentElement;\nconst dragImage = new Image(0, 0);\n\ndragImage.src =\n // 1px transparent png\n 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';\n\nexport function SortableItem({ children, handlePlacement, disabled, sortableItemColor, index }: SortableItemProps) {\n const {\n clone,\n dragEnd,\n draggingSource,\n draggingTarget,\n dragStart,\n drop,\n maxIndex,\n moveToPosition,\n setClone,\n setDraggingSource,\n } = useSortable();\n const [grabbing, setGrabbing] = useState(false);\n const [moving, setmoving] = useState(false);\n const itemRef = useRef<HTMLDivElement>(null);\n const hasIndex = index !== undefined && index >= 0;\n\n useEffect(() => {\n if (!itemRef.current) return;\n if (globalThis.document.activeElement === itemRef.current) return;\n\n if (index === draggingTarget && draggingTarget === draggingSource) {\n // Manually setting focus after an item has been moved with the keyboard; focus is lost after rerender\n itemRef.current.focus();\n setmoving(true);\n } else {\n setmoving(false);\n }\n }, [index, draggingTarget, draggingSource, setDraggingSource]);\n\n function handleDragStart(event: DragEvent<HTMLDivElement>) {\n event.stopPropagation();\n\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setDragImage(dragImage, 0, 0);\n\n if (itemRef.current) {\n const cloned = itemRef.current.cloneNode(true) as Element;\n\n cloned.classList.add(styles['sortable__sort-item--ghost']);\n\n setClone(cloned);\n }\n\n if (hasIndex) dragStart(index);\n setGrabbing(true);\n }\n\n function handleDragEnd() {\n if (grabbing) return;\n\n if (clone) document.body.removeChild(clone);\n\n setGrabbing(false);\n dragEnd();\n }\n\n function handleKeyUp(event: ReactKeyboardEvent<HTMLDivElement>) {\n const { code } = event;\n\n if (code === 'Tab' && draggingSource !== undefined) {\n dragEnd();\n return;\n }\n\n if (ACCESS_KEYS.includes(code) === false) return;\n\n if (!hasIndex) return;\n\n if (code === 'Space') {\n if (moving) {\n setmoving(false);\n dragEnd();\n } else {\n setmoving(true);\n dragStart(index);\n }\n\n return;\n }\n\n if (draggingSource === undefined) return;\n\n const newTarget = code === 'ArrowUp' ? index - 1 : index + 1;\n\n if (newTarget < 0 \|\| newTarget > maxIndex) return;\n\n moveToPosition(newTarget);\n }\n\n function handleMove(event: MouseEvent<HTMLButtonElement>) {\n event.preventDefault();\n\n if (!hasIndex) return;\n\n dragStart(index);\n\n const { direction } = event.currentTarget.dataset;\n const newTarget = direction === 'up' ? index - 1 : index + 1;\n\n drop(newTarget);\n }\n\n return (\n <div\n className={clsx(styles['sortable__sort-item'], styles[`sortable__sort-item--${sortableItemColor}`])}\n draggable={!disabled}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onKeyUpCapture={handleKeyUp}\n ref={itemRef}\n role=\"presentation\"\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n >\n <div\n className={`${styles['sortable__sort-item__contents']} ${styles[`sortable__sort-item__contents--handle-${handlePlacement}`]}`}\n >\n {handlePlacement === 'left' && <SortableHandle placement=\"left\" />}\n {children}\n {handlePlacement === 'right' && <SortableHandle placement=\"right\" />}\n </div>\n\n <div className={styles['sortable__sort-item__button-container']} data-touch={noSupportTouch}>\n {!disabled && hasIndex && (\n <>\n {hasIndex && (\n <>\n {index > 0 && (\n <button\n className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--up']}`}\n data-direction=\"up\"\n onClickCapture={handleMove}\n >\n <div className={styles['sortable__sort-item__handle--icon']}>\n <Icon name=\"CheveronDown\" />\n </div>\n <span className={styles['sortable__visually-hidden']}>Move up</span>\n </button>\n )}\n\n {index < maxIndex && (\n <button\n className={`${styles['sortable__sort-item__handle']} ${styles['sortable__sort-item__handle--down']}`}\n data-direction=\"down\"\n onClickCapture={handleMove}\n >\n <div className={styles['sortable__sort-item__handle--icon']}>\n <Icon name=\"CheveronDown\" />\n </div>\n <span className={styles['sortable__visually-hidden']}>Move down</span>\n </button>\n )}\n </>\n )}\n </>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAoBA,IAAM,IAAc;CAAC;CAAS;CAAa;CAAU,EAC/C,IAAiB,kBAAkB,WAAW,SAAS,iBACvD,IAAY,IAAI,MAAM,GAAG,EAAE;AAEjC,EAAU,MAER;AAEF,SAAgB,EAAa,EAAE,aAAU,oBAAiB,aAAU,sBAAmB,YAA4B;CACjH,IAAM,EACJ,UACA,YACA,mBACA,mBACA,cACA,SACA,aACA,mBACA,aACA,yBACE,GAAa,EACX,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,IAAU,EAAuB,KAAK,EACtC,IAAW,MAAU,KAAA,KAAa,KAAS;CAEjD,QAAgB;EACT,EAAQ,WACT,WAAW,SAAS,kBAAkB,EAAQ,YAE9C,MAAU,KAAkB,MAAmB,KAEjD,EAAQ,QAAQ,OAAO,EACvB,EAAU,GAAK,IAEf,EAAU,GAAM;IAEjB;EAAC;EAAO;EAAgB;EAAgB;EAAkB,CAAC;CAE9D,SAAS,EAAgB,GAAkC;EAMzD,IALA,EAAM,iBAAiB,EAEvB,EAAM,aAAa,gBAAgB,QACnC,EAAM,aAAa,aAAa,GAAW,GAAG,EAAE,EAE5C,EAAQ,SAAS;GACnB,IAAM,IAAS,EAAQ,QAAQ,UAAU,GAAK;GAI9C,AAFA,EAAO,UAAU,IAAI,EAAO,8BAA8B,EAE1D,EAAS,EAAO;;EAIlB,AADI,KAAU,EAAU,EAAM,EAC9B,EAAY,GAAK;;CAGnB,SAAS,IAAgB;EACnB,MAEA,KAAO,SAAS,KAAK,YAAY,EAAM,EAE3C,EAAY,GAAM,EAClB,GAAS;;CAGX,SAAS,EAAY,GAA2C;EAC9D,IAAM,EAAE,YAAS;EAEjB,IAAI,MAAS,SAAS,MAAmB,KAAA,GAAW;GAClD,GAAS;GACT;;EAKF,IAFI,EAAY,SAAS,EAAK,KAAK,MAE/B,CAAC,GAAU;EAEf,IAAI,MAAS,SAAS;GACpB,AAAI,KACF,EAAU,GAAM,EAChB,GAAS,KAET,EAAU,GAAK,EACf,EAAU,EAAM;GAGlB;;EAGF,IAAI,MAAmB,KAAA,GAAW;EAElC,IAAM,IAAY,MAAS,YAAY,IAAQ,IAAI,IAAQ;EAEvD,IAAY,KAAK,IAAY,KAEjC,EAAe,EAAU;;CAG3B,SAAS,EAAW,GAAsC;EAGxD,IAFA,EAAM,gBAAgB,EAElB,CAAC,GAAU;EAEf,EAAU,EAAM;EAEhB,IAAM,EAAE,iBAAc,EAAM,cAAc;EAG1C,EAFkB,MAAc,OAAO,IAAQ,IAAI,IAAQ,EAE5C;;CAGjB,OACE,kBAAC,OAAD;EACE,WAAW,EAAK,EAAO,wBAAwB,EAAO,wBAAwB,KAAqB;EACnG,WAAW,CAAC;EACZ,WAAW;EACX,aAAa;EACb,gBAAgB;EAChB,KAAK;EACL,MAAK;EAEL,UAAU;YATZ,CAWE,kBAAC,OAAD;GACE,WAAW,GAAG,EAAO,iCAAiC,GAAG,EAAO,yCAAyC;aAD3G;IAGG,MAAoB,UAAU,kBAAC,GAAD,EAAgB,WAAU,QAAS,CAAA;IACjE;IACA,MAAoB,WAAW,kBAAC,GAAD,EAAgB,WAAU,SAAU,CAAA;IAChE;MAEN,kBAAC,OAAD;GAAK,WAAW,EAAO;GAA0C,cAAY;aAC1E,CAAC,KAAY,KACZ,kBAAA,GAAA,EAAA,UACG,KACC,kBAAA,GAAA,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,gBAAiB,CAAA;KACxB,CAAA,EACN,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;KAAc,CAAA,CAC7D;OAGV,IAAQ,KACP,kBAAC,UAAD;IACE,WAAW,GAAG,EAAO,+BAA+B,GAAG,EAAO;IAC9D,kBAAe;IACf,gBAAgB;cAHlB,CAKE,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD,EAAM,MAAK,gBAAiB,CAAA;KACxB,CAAA,EACN,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA8B;KAAgB,CAAA,CAC/D;MAEV,EAAA,CAAA,EAEJ,CAAA;GAED,CAAA,CACF"}

package/dist/components/Sortable/sortableReducer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sortableReducer.js","names":[],"sources":["../../../src/components/Sortable/sortableReducer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Actions } from './actions';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport {\n CLEAR_DRAGGING_SOURCE,\n CLEAR_DRAGGING_TARGET,\n DRAG_END,\n DRAG_START,\n DROP,\n MOVE_TO_POSITION,\n RESET,\n SET_CLONE,\n SET_DRAGGING_SOURCE,\n SET_DRAGGING_TARGET,\n} from './constants';\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\nexport interface SortableStateType {\n clone?: Element;\n draggingSource?: number;\n draggingTarget?: number;\n indices: number[];\n itemsBeforeDrag: SortableItems;\n maxIndex: number;\n sortableItems: SortableItems;\n}\n\n// When dragging has started, draggingSource is a number value and not undefined any more\ntype SortableStateWithSource = SortableStateType & {\n draggingSource: number;\n};\n\nexport const initialState = {\n clone: undefined,\n draggingSource: undefined,\n draggingTarget: undefined,\n indices: [],\n itemsBeforeDrag: [],\n maxIndex: 0,\n sortableItems: [],\n};\n\nconst getReorderedList = (from: number, to: number, ...arr: SortableItems) =>\n from === to ? arr : (arr.splice(to, 0, ...arr.splice(from, 1)), arr);\n\nfunction getReorderedListWithPlaceholder(from: number, to: number, ...arr: SortableItems) {\n arr.splice(from, 1);\n\n return [...arr.splice(to, 0, <span />), ...arr];\n}\n\nexport const sortableReducer = (state: SortableStateType = initialState, action: Actions): SortableStateType => {\n const stateWithSource = state as SortableStateWithSource;\n\n switch (action.type) {\n case SET_CLONE: {\n return {\n ...state,\n clone: action.payload,\n };\n }\n\n case DRAG_START: {\n return {\n ...state,\n draggingSource: action.payload,\n itemsBeforeDrag: state.sortableItems,\n };\n }\n\n case DRAG_END: {\n return {\n ...state,\n draggingSource: undefined,\n draggingTarget: undefined,\n };\n }\n\n case RESET: {\n return {\n ...state,\n draggingTarget: undefined,\n sortableItems: state.itemsBeforeDrag,\n };\n }\n\n case DROP: {\n const sortableItems = getReorderedList(stateWithSource.draggingSource, action.payload, ...state.itemsBeforeDrag);\n const indices = sortableItems.map(({ props }) => props.index);\n\n return {\n ...state,\n clone: undefined,\n draggingSource: undefined,\n draggingTarget: undefined,\n indices,\n sortableItems,\n };\n }\n\n case SET_DRAGGING_TARGET: {\n return {\n ...state,\n draggingTarget: action.payload,\n sortableItems: getReorderedListWithPlaceholder(\n stateWithSource.draggingSource,\n action.payload,\n ...state.itemsBeforeDrag\n ),\n };\n }\n\n case SET_DRAGGING_SOURCE: {\n return {\n ...state,\n draggingSource: action.payload,\n };\n }\n\n case MOVE_TO_POSITION: {\n return {\n ...state,\n draggingTarget: action.payload,\n draggingSource: action.payload,\n sortableItems: getReorderedList(stateWithSource.draggingSource, action.payload, ...state.sortableItems),\n };\n }\n\n case CLEAR_DRAGGING_TARGET:\n return {\n ...state,\n draggingTarget: undefined,\n };\n\n case CLEAR_DRAGGING_SOURCE:\n return {\n ...state,\n draggingSource: undefined,\n };\n\n default:\n return state;\n }\n};\n"],"mappings":";;;AAkCA,IAAa,IAAe;CAC1B,OAAO,KAAA;CACP,gBAAgB,KAAA;CAChB,gBAAgB,KAAA;CAChB,SAAS,EAAE;CACX,iBAAiB,EAAE;CACnB,UAAU;CACV,eAAe,EAAE;CAClB,EAEK,KAAoB,GAAc,GAAY,GAAG,OACrD,MAAS,KAAY,EAAI,OAAO,GAAI,GAAG,GAAG,EAAI,OAAO,GAAM,EAAE,CAAC,EAAhD;AAEhB,SAAS,EAAgC,GAAc,GAAY,GAAG,GAAoB;~~AAGxF~~,~~QAFA~~,EAAI,OAAO,GAAM,EAAE,EAEZ,CAAC,GAAG,EAAI,OAAO,GAAI,GAAG,kBAAC,QAAD,EAAQ,CAAA,CAAC,EAAE,GAAG,EAAI;;AAGjD,IAAa,KAAmB,IAA2B,GAAc,MAAuC;CAC9G,IAAM,IAAkB;~~AAExB~~,~~SAAQ~~,EAAO,MAAf;EACE,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,OAAO,EAAO;GACf;EAGH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,iBAAiB,EAAM;GACxB;EAGH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GACjB;EAGH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,eAAe,EAAM;GACtB;EAGH,KAAK,GAAM;GACT,IAAM,IAAgB,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,gBAAgB,EAC1G,IAAU,EAAc,KAAK,EAAE,eAAY,EAAM,MAAM;~~AAE7D~~,~~UAAO~~;IACL,GAAG;IACH,OAAO,KAAA;IACP,gBAAgB,KAAA;IAChB,gBAAgB,KAAA;IAChB;IACA;IACD;;EAGH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,eAAe,EACb,EAAgB,gBAChB,EAAO,SACP,GAAG,EAAM,gBACV;GACF;EAGH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,EAAO;GACxB;EAGH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,gBAAgB,EAAO;GACvB,eAAe,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,cAAc;GACxG;EAGH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,KAAA;GACjB;EAEH,KAAK,~~EACH~~,~~QAAO~~;GACL,GAAG;GACH,gBAAgB,KAAA;GACjB;EAEH,~~QACE~~,~~QAAO~~"}
1	+ {"version":3,"file":"sortableReducer.js","names":[],"sources":["../../../src/components/Sortable/sortableReducer.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport type { Actions } from './actions';\nimport type { SortableItem, SortableItemProps } from './components/SortableItem';\n\nimport {\n CLEAR_DRAGGING_SOURCE,\n CLEAR_DRAGGING_TARGET,\n DRAG_END,\n DRAG_START,\n DROP,\n MOVE_TO_POSITION,\n RESET,\n SET_CLONE,\n SET_DRAGGING_SOURCE,\n SET_DRAGGING_TARGET,\n} from './constants';\n\ntype SortableItems = ReactElement<SortableItemProps, typeof SortableItem>[];\n\nexport interface SortableStateType {\n clone?: Element;\n draggingSource?: number;\n draggingTarget?: number;\n indices: number[];\n itemsBeforeDrag: SortableItems;\n maxIndex: number;\n sortableItems: SortableItems;\n}\n\n// When dragging has started, draggingSource is a number value and not undefined any more\ntype SortableStateWithSource = SortableStateType & {\n draggingSource: number;\n};\n\nexport const initialState = {\n clone: undefined,\n draggingSource: undefined,\n draggingTarget: undefined,\n indices: [],\n itemsBeforeDrag: [],\n maxIndex: 0,\n sortableItems: [],\n};\n\nconst getReorderedList = (from: number, to: number, ...arr: SortableItems) =>\n from === to ? arr : (arr.splice(to, 0, ...arr.splice(from, 1)), arr);\n\nfunction getReorderedListWithPlaceholder(from: number, to: number, ...arr: SortableItems) {\n arr.splice(from, 1);\n\n return [...arr.splice(to, 0, <span />), ...arr];\n}\n\nexport const sortableReducer = (state: SortableStateType = initialState, action: Actions): SortableStateType => {\n const stateWithSource = state as SortableStateWithSource;\n\n switch (action.type) {\n case SET_CLONE: {\n return {\n ...state,\n clone: action.payload,\n };\n }\n\n case DRAG_START: {\n return {\n ...state,\n draggingSource: action.payload,\n itemsBeforeDrag: state.sortableItems,\n };\n }\n\n case DRAG_END: {\n return {\n ...state,\n draggingSource: undefined,\n draggingTarget: undefined,\n };\n }\n\n case RESET: {\n return {\n ...state,\n draggingTarget: undefined,\n sortableItems: state.itemsBeforeDrag,\n };\n }\n\n case DROP: {\n const sortableItems = getReorderedList(stateWithSource.draggingSource, action.payload, ...state.itemsBeforeDrag);\n const indices = sortableItems.map(({ props }) => props.index);\n\n return {\n ...state,\n clone: undefined,\n draggingSource: undefined,\n draggingTarget: undefined,\n indices,\n sortableItems,\n };\n }\n\n case SET_DRAGGING_TARGET: {\n return {\n ...state,\n draggingTarget: action.payload,\n sortableItems: getReorderedListWithPlaceholder(\n stateWithSource.draggingSource,\n action.payload,\n ...state.itemsBeforeDrag\n ),\n };\n }\n\n case SET_DRAGGING_SOURCE: {\n return {\n ...state,\n draggingSource: action.payload,\n };\n }\n\n case MOVE_TO_POSITION: {\n return {\n ...state,\n draggingTarget: action.payload,\n draggingSource: action.payload,\n sortableItems: getReorderedList(stateWithSource.draggingSource, action.payload, ...state.sortableItems),\n };\n }\n\n case CLEAR_DRAGGING_TARGET:\n return {\n ...state,\n draggingTarget: undefined,\n };\n\n case CLEAR_DRAGGING_SOURCE:\n return {\n ...state,\n draggingSource: undefined,\n };\n\n default:\n return state;\n }\n};\n"],"mappings":";;;AAkCA,IAAa,IAAe;CAC1B,OAAO,KAAA;CACP,gBAAgB,KAAA;CAChB,gBAAgB,KAAA;CAChB,SAAS,EAAE;CACX,iBAAiB,EAAE;CACnB,UAAU;CACV,eAAe,EAAE;CAClB,EAEK,KAAoB,GAAc,GAAY,GAAG,OACrD,MAAS,KAAY,EAAI,OAAO,GAAI,GAAG,GAAG,EAAI,OAAO,GAAM,EAAE,CAAC,EAAhD;AAEhB,SAAS,EAAgC,GAAc,GAAY,GAAG,GAAoB;CAGxF,OAFA,EAAI,OAAO,GAAM,EAAE,EAEZ,CAAC,GAAG,EAAI,OAAO,GAAI,GAAG,kBAAC,QAAD,EAAQ,CAAA,CAAC,EAAE,GAAG,EAAI;;AAGjD,IAAa,KAAmB,IAA2B,GAAc,MAAuC;CAC9G,IAAM,IAAkB;CAExB,QAAQ,EAAO,MAAf;EACE,KAAK,GACH,OAAO;GACL,GAAG;GACH,OAAO,EAAO;GACf;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,iBAAiB,EAAM;GACxB;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GACjB;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GAChB,eAAe,EAAM;GACtB;EAGH,KAAK,GAAM;GACT,IAAM,IAAgB,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,gBAAgB,EAC1G,IAAU,EAAc,KAAK,EAAE,eAAY,EAAM,MAAM;GAE7D,OAAO;IACL,GAAG;IACH,OAAO,KAAA;IACP,gBAAgB,KAAA;IAChB,gBAAgB,KAAA;IAChB;IACA;IACD;;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,eAAe,EACb,EAAgB,gBAChB,EAAO,SACP,GAAG,EAAM,gBACV;GACF;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACxB;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,EAAO;GACvB,gBAAgB,EAAO;GACvB,eAAe,EAAiB,EAAgB,gBAAgB,EAAO,SAAS,GAAG,EAAM,cAAc;GACxG;EAGH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GACjB;EAEH,KAAK,GACH,OAAO;GACL,GAAG;GACH,gBAAgB,KAAA;GACjB;EAEH,SACE,OAAO"}

package/dist/components/Spinner/Spinner.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.stories.js","names":[],"sources":["../../../src/components/Spinner/Spinner.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { SpinnerProps } from './Spinner';\n\nimport { Spinner } from './Spinner';\n\nconst codeString = '<Spinner ariaValueText={ariaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Spinner',\n component: Spinner,\n argTypes: {\n ariaValueText: {\n control: 'text',\n },\n showAfterMs: {\n control: 'number',\n },\n },\n parameters: {\n inspectComponent: Spinner,\n codeString: codeString,\n },\n} as Meta<SpinnerProps>;\n\nconst Template: StoryFn<SpinnerProps> = (args) => <Spinner {...args} />;\n\nexport const SpinnerExample = Template.bind({});\nSpinnerExample.args = {\n ariaValueText: 'Example value text',\n showAfterMs: 250,\n};\n"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,eAAe,EACb,SAAS,QACV;EACD,aAAa,EACX,SAAS,UACV;EACF;CACD,YAAY;EACV,kBAAkB;EACN~~,YAhBG~~;~~EAiBhB~~;CACF,EAIY,MAF4B,MAAS,kBAAC,GAAD,EAAS,GAAI,GAAQ,CAAA,EAEhC,KAAK,EAAE,CAAC;AAC/C,EAAe,OAAO;CACpB,eAAe;CACf,aAAa;CACd"}
1	+ {"version":3,"file":"Spinner.stories.js","names":[],"sources":["../../../src/components/Spinner/Spinner.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { SpinnerProps } from './Spinner';\n\nimport { Spinner } from './Spinner';\n\nconst codeString = '<Spinner ariaValueText={ariaValueText} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Spinner',\n component: Spinner,\n argTypes: {\n ariaValueText: {\n control: 'text',\n },\n showAfterMs: {\n control: 'number',\n },\n },\n parameters: {\n inspectComponent: Spinner,\n codeString: codeString,\n },\n} as Meta<SpinnerProps>;\n\nconst Template: StoryFn<SpinnerProps> = (args) => <Spinner {...args} />;\n\nexport const SpinnerExample = Template.bind({});\nSpinnerExample.args = {\n ariaValueText: 'Example value text',\n showAfterMs: 250,\n};\n"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,eAAe,EACb,SAAS,QACV;EACD,aAAa,EACX,SAAS,UACV;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAIY,MAF4B,MAAS,kBAAC,GAAD,EAAS,GAAI,GAAQ,CAAA,EAEhC,KAAK,EAAE,CAAC;AAC/C,EAAe,OAAO;CACpB,eAAe;CACf,aAAa;CACd"}

package/dist/components/StatusBadge/StatusBadge.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusBadge.stories.js","names":[],"sources":["../../../src/components/StatusBadge/StatusBadge.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusBadgeProps } from 'components/StatusBadge';\n\nimport { StatusBadge } from 'components/StatusBadge';\n\nconst codeString = '<InfoBadge highContrast=[boolean]>{label}</InfoBadge>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/StatusBadge',\n component: StatusBadge,\n parameters: {\n inspectComponent: StatusBadge,\n codeString: codeString,\n },\n} as Meta<StatusBadgeProps>;\n\nconst Template: StoryFn<StatusBadgeProps> = (args) => <StatusBadge {...args} />;\n\nconst defaultArgs: StatusBadgeProps = {\n label: 'This is example badge',\n highContrast: false,\n};\n\nexport const StatusBadgeExample = Template.bind({});\n\nStatusBadgeExample.args = {\n ...defaultArgs,\n};\n"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN~~,YARG~~;~~EAShB~~;CACF,EAEK,KAAuC,MAAS,kBAAC,GAAD,EAAa,GAAI,GAAQ,CAAA,EAEzE,IAAgC;CACpC,OAAO;CACP,cAAc;CACf,EAEY,IAAqB,EAAS,KAAK,EAAE,CAAC;AAEnD,EAAmB,OAAO,EACxB,GAAG,GACJ"}
1	+ {"version":3,"file":"StatusBadge.stories.js","names":[],"sources":["../../../src/components/StatusBadge/StatusBadge.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusBadgeProps } from 'components/StatusBadge';\n\nimport { StatusBadge } from 'components/StatusBadge';\n\nconst codeString = '<InfoBadge highContrast=[boolean]>{label}</InfoBadge>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/StatusBadge',\n component: StatusBadge,\n parameters: {\n inspectComponent: StatusBadge,\n codeString: codeString,\n },\n} as Meta<StatusBadgeProps>;\n\nconst Template: StoryFn<StatusBadgeProps> = (args) => <StatusBadge {...args} />;\n\nconst defaultArgs: StatusBadgeProps = {\n label: 'This is example badge',\n highContrast: false,\n};\n\nexport const StatusBadgeExample = Template.bind({});\n\nStatusBadgeExample.args = {\n ...defaultArgs,\n};\n"],"mappings":";;AAQA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAEK,KAAuC,MAAS,kBAAC,GAAD,EAAa,GAAI,GAAQ,CAAA,EAEzE,IAAgC;CACpC,OAAO;CACP,cAAc;CACf,EAEY,IAAqB,EAAS,KAAK,EAAE,CAAC;AAEnD,EAAmB,OAAO,EACxB,GAAG,GACJ"}

package/dist/components/StatusBadge/StatusBadge.test.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import "../../dist-BIkFjHck.js";
+import "../../dist-V_v3kC0L.js";
 import { t as e } from "../../StatusBage-DQDOF5-U.js";
-import { i as t, n } from "../../react.esm-R7eBXTUI.js";
+import { i as t, n } from "../../react.esm-CweFe1CK.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/StatusBadge/StatusBadge.test.tsx
 describe("StatusBadge", () => {

package/dist/components/StatusBadge/StatusBadge.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusBadge.test.js","names":[],"sources":["../../../src/components/StatusBadge/StatusBadge.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { StatusBadge } from './StatusBage';\n\ndescribe('StatusBadge', () => {\n it('should render with message', () => {\n render(<StatusBadge label=\"Status message\" />);\n expect(screen.getByText('Status message')).toBeInTheDocument();\n });\n\n it('should render with highContract', () => {\n render(<StatusBadge label=\"Status message\" highContrast={true} />);\n expect(screen.getByText('Status message')).toHaveClass('statusbadge--high-contrast');\n });\n});\n"],"mappings":";;;;;AAKA,SAAS,qBAAqB;~~AAM5B~~,~~CALA~~,GAAG,oCAAoC;~~AAErC~~,~~EADA~~,EAAO,kBAAC,GAAD,EAAa,OAAM,kBAAmB,CAAA,CAAC,EAC9C,OAAO,EAAO,UAAU,iBAAiB,CAAC,CAAC,mBAAmB;GAC9D,EAEF,GAAG,yCAAyC;~~AAE1C~~,~~EADA~~,EAAO,kBAAC,GAAD;GAAa,OAAM;GAAiB,cAAc;GAAQ,CAAA,CAAC,EAClE,OAAO,EAAO,UAAU,iBAAiB,CAAC,CAAC,YAAY,6BAA6B;GACpF;EACF"}
1	+ {"version":3,"file":"StatusBadge.test.js","names":[],"sources":["../../../src/components/StatusBadge/StatusBadge.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { StatusBadge } from './StatusBage';\n\ndescribe('StatusBadge', () => {\n it('should render with message', () => {\n render(<StatusBadge label=\"Status message\" />);\n expect(screen.getByText('Status message')).toBeInTheDocument();\n });\n\n it('should render with highContract', () => {\n render(<StatusBadge label=\"Status message\" highContrast={true} />);\n expect(screen.getByText('Status message')).toHaveClass('statusbadge--high-contrast');\n });\n});\n"],"mappings":";;;;;AAKA,SAAS,qBAAqB;CAM5B,AALA,GAAG,oCAAoC;EAErC,AADA,EAAO,kBAAC,GAAD,EAAa,OAAM,kBAAmB,CAAA,CAAC,EAC9C,OAAO,EAAO,UAAU,iBAAiB,CAAC,CAAC,mBAAmB;GAC9D,EAEF,GAAG,yCAAyC;EAE1C,AADA,EAAO,kBAAC,GAAD;GAAa,OAAM;GAAiB,cAAc;GAAQ,CAAA,CAAC,EAClE,OAAO,EAAO,UAAU,iBAAiB,CAAC,CAAC,YAAY,6BAA6B;GACpF;EACF"}

package/dist/components/StatusPill/StatusPill.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusPill.stories.js","names":[],"sources":["../../../src/components/StatusPill/StatusPill.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusPillProps } from './StatusPill';\n\nimport { StatusPill } from './StatusPill';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<StatusPill status={status} label={label} variant={variant}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/StatusPill',\n component: StatusPill,\n parameters: {\n inspectComponent: StatusPill,\n codeString: codeString,\n },\n} as Meta<StatusPillProps>;\n\nconst Template: StoryFn<StatusPillProps> = (args) => (\n <Container>\n <StatusPill {...args} />\n </Container>\n);\n\nexport const StatusPillExample = Template.bind({});\nStatusPillExample.args = {\n status: 'possible',\n variant: 'default',\n label: 'Example Status Pill',\n};\n"],"mappings":";;;;AAUA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN~~,YARG~~;~~EAShB~~;CACF,EAQY,MAN+B,MAC1C,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAY,GAAI,GAAQ,CAAA,EACd,CAAA,EAG4B,KAAK,EAAE,CAAC;AAClD,EAAkB,OAAO;CACvB,QAAQ;CACR,SAAS;CACT,OAAO;CACR"}
1	+ {"version":3,"file":"StatusPill.stories.js","names":[],"sources":["../../../src/components/StatusPill/StatusPill.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { StatusPillProps } from './StatusPill';\n\nimport { StatusPill } from './StatusPill';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<StatusPill status={status} label={label} variant={variant}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/StatusPill',\n component: StatusPill,\n parameters: {\n inspectComponent: StatusPill,\n codeString: codeString,\n },\n} as Meta<StatusPillProps>;\n\nconst Template: StoryFn<StatusPillProps> = (args) => (\n <Container>\n <StatusPill {...args} />\n </Container>\n);\n\nexport const StatusPillExample = Template.bind({});\nStatusPillExample.args = {\n status: 'possible',\n variant: 'default',\n label: 'Example Status Pill',\n};\n"],"mappings":";;;;AAUA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAQY,MAN+B,MAC1C,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAY,GAAI,GAAQ,CAAA,EACd,CAAA,EAG4B,KAAK,EAAE,CAAC;AAClD,EAAkB,OAAO;CACvB,QAAQ;CACR,SAAS;CACT,OAAO;CACR"}

package/dist/components/TextArea/TextArea.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as e } from "../../test-Cr_l59hN.js";
+import { r as e } from "../../test-Pa9Lwbsq.js";
 import { t } from "../../TextArea-CuASC9bX.js";
 import { jsx as n } from "react/jsx-runtime";
 var r = {

package/dist/components/TextArea/TextArea.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.stories.js","names":[],"sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/TextArea',\n component: TextArea,\n argTypes: { label: { control: 'text' }, maxCharacters: { control: 'number' } },\n parameters: { inspectComponent: TextArea, codeString: codeString },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n label: 'Sample label',\n maxCharacters: 140,\n defaultValue: 'Sample default value',\n onChange: fn(),\n};\n\nexport const TextAreaSubtitleExample = Template.bind({});\nTextAreaSubtitleExample.args = {\n label: 'Sample label',\n subLabel: 'Sample sub label',\n maxCharacters: 140,\n defaultValue:\n 'Sample default value \\n Sample default value \\n Sample default value \\n Sample default value \\n Sample default value',\n onChange: fn(),\n};\n"],"mappings":";;;AAWA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EAAE,OAAO,EAAE,SAAS,QAAQ;EAAE,eAAe,EAAE,SAAS,UAAU;EAAE;CAC9E,YAAY;EAAE,kBAAkB;EAAsB~~,YARrC~~;~~EAQiD~~;CACnE,EAEK,KAAoC,MAAS,kBAAC,GAAD,EAAU,GAAI,GAAQ,CAAA,EAE5D,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO;CACrB,OAAO;CACP,eAAe;CACf,cAAc;CACd,UAAU,GAAI;CACf;AAED,IAAa,IAA0B,EAAS,KAAK,EAAE,CAAC;AACxD,EAAwB,OAAO;CAC7B,OAAO;CACP,UAAU;CACV,eAAe;CACf,cACE;CACF,UAAU,GAAI;CACf"}
1	+ {"version":3,"file":"TextArea.stories.js","names":[],"sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { TextAreaProps } from './TextArea';\n\nimport { TextArea } from './TextArea';\n\nconst codeString = `\n <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/TextArea',\n component: TextArea,\n argTypes: { label: { control: 'text' }, maxCharacters: { control: 'number' } },\n parameters: { inspectComponent: TextArea, codeString: codeString },\n} as Meta<TextAreaProps>;\n\nconst Template: StoryFn<TextAreaProps> = (args) => <TextArea {...args} />;\n\nexport const TextAreaExample = Template.bind({});\nTextAreaExample.args = {\n label: 'Sample label',\n maxCharacters: 140,\n defaultValue: 'Sample default value',\n onChange: fn(),\n};\n\nexport const TextAreaSubtitleExample = Template.bind({});\nTextAreaSubtitleExample.args = {\n label: 'Sample label',\n subLabel: 'Sample sub label',\n maxCharacters: 140,\n defaultValue:\n 'Sample default value \\n Sample default value \\n Sample default value \\n Sample default value \\n Sample default value',\n onChange: fn(),\n};\n"],"mappings":";;;AAWA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EAAE,OAAO,EAAE,SAAS,QAAQ;EAAE,eAAe,EAAE,SAAS,UAAU;EAAE;CAC9E,YAAY;EAAE,kBAAkB;EAAsB;EAAY;CACnE,EAEK,KAAoC,MAAS,kBAAC,GAAD,EAAU,GAAI,GAAQ,CAAA,EAE5D,IAAkB,EAAS,KAAK,EAAE,CAAC;AAChD,EAAgB,OAAO;CACrB,OAAO;CACP,eAAe;CACf,cAAc;CACd,UAAU,GAAI;CACf;AAED,IAAa,IAA0B,EAAS,KAAK,EAAE,CAAC;AACxD,EAAwB,OAAO;CAC7B,OAAO;CACP,UAAU;CACV,eAAe;CACf,cACE;CACF,UAAU,GAAI;CACf"}

package/dist/components/TextArea/TextArea.test.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import "../../dist-BIkFjHck.js";
+import "../../dist-V_v3kC0L.js";
 import { t as e } from "../../TextArea-CuASC9bX.js";
-import { i as t, n, t as r } from "../../react.esm-R7eBXTUI.js";
-import { t as i } from "../../esm-ipAmzhQq.js";
+import { i as t, n, t as r } from "../../react.esm-CweFe1CK.js";
+import { t as i } from "../../esm-BoujHjK5.js";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/TextArea/TextArea.test.tsx
 describe("TextArea", () => {

package/dist/components/TextArea/TextArea.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.test.js","names":[],"sources":["../../../src/components/TextArea/TextArea.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nimport { TextArea } from './TextArea';\n\ndescribe('TextArea', () => {\n it('should render correctly with label', () => {\n render(<TextArea onChange={jest.fn()} label=\"Test Label\" />);\n expect(screen.getByText('Test Label')).toBeInTheDocument();\n });\n\n it('should call onChange when text is entered', () => {\n const handleChange = jest.fn();\n render(<TextArea onChange={handleChange} />);\n\n const textarea = screen.getByRole('textbox');\n fireEvent.input(textarea, { target: { value: 'Hello' } });\n expect(handleChange).toHaveBeenCalledWith('Hello');\n });\n\n it('should update character count', () => {\n render(<TextArea onChange={jest.fn()} label=\"Test\" maxCharacters={10} />);\n\n const textarea = screen.getByRole('textbox');\n fireEvent.input(textarea, { target: { value: 'Test' } });\n\n expect(screen.getByText('4')).toBeInTheDocument();\n expect(screen.getByText('/ 10')).toBeInTheDocument();\n });\n\n it('should not exceed max characters limit', async () => {\n const handleChange = jest.fn();\n render(<TextArea onChange={handleChange} maxCharacters={5} />);\n\n const textarea = screen.getByRole('textbox');\n\n await userEvent.type(textarea, 'ExceedsLimit');\n\n expect(handleChange).toHaveBeenCalled();\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n expect(handleChange.mock.calls[handleChange.mock.calls.length - 1][0].length).toBe(5);\n });\n});\n"],"mappings":";;;;;;AAMA,SAAS,kBAAkB;~~AAyBzB~~,~~CAxBA~~,GAAG,4CAA4C;~~AAE7C~~,~~EADA~~,EAAO,kBAAC,GAAD;GAAU,UAAU,KAAK,IAAI;GAAE,OAAM;GAAe,CAAA,CAAC,EAC5D,OAAO,EAAO,UAAU,aAAa,CAAC,CAAC,mBAAmB;GAC1D,EAEF,GAAG,mDAAmD;EACpD,IAAM,IAAe,KAAK,IAAI;~~AAC9B~~,~~IAAO~~,kBAAC,GAAD,EAAU,UAAU,GAAgB,CAAA,CAAC;EAE5C,IAAM,IAAW,EAAO,UAAU,UAAU;~~AAE5C~~,~~EADA~~,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,SAAS,EAAE,CAAC,EACzD,OAAO,EAAa,CAAC,qBAAqB,QAAQ;GAClD,EAEF,GAAG,uCAAuC;~~AACxC~~,~~IAAO~~,kBAAC,GAAD;GAAU,UAAU,KAAK,IAAI;GAAE,OAAM;GAAO,eAAe;GAAM,CAAA,CAAC;EAEzE,IAAM,IAAW,EAAO,UAAU,UAAU;~~AAI5C~~,~~EAHA~~,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,QAAQ,EAAE,CAAC,EAExD,OAAO,EAAO,UAAU,IAAI,CAAC,CAAC,mBAAmB,EACjD,OAAO,EAAO,UAAU,OAAO,CAAC,CAAC,mBAAmB;GACpD,EAEF,GAAG,0CAA0C,YAAY;EACvD,IAAM,IAAe,KAAK,IAAI;~~AAC9B~~,~~IAAO~~,kBAAC,GAAD;GAAU,UAAU;GAAc,eAAe;GAAK,CAAA,CAAC;EAE9D,IAAM,IAAW,EAAO,UAAU,UAAU;~~AAM5C~~,~~EAJA~~,MAAM,EAAU,KAAK,GAAU,eAAe,EAE9C,OAAO,EAAa,CAAC,kBAAkB,EAEvC,OAAO,EAAa,KAAK,MAAM,EAAa,KAAK,MAAM,SAAS,GAAG,GAAG,OAAO,CAAC,KAAK,EAAE;GACrF;EACF"}
1	+ {"version":3,"file":"TextArea.test.js","names":[],"sources":["../../../src/components/TextArea/TextArea.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nimport { TextArea } from './TextArea';\n\ndescribe('TextArea', () => {\n it('should render correctly with label', () => {\n render(<TextArea onChange={jest.fn()} label=\"Test Label\" />);\n expect(screen.getByText('Test Label')).toBeInTheDocument();\n });\n\n it('should call onChange when text is entered', () => {\n const handleChange = jest.fn();\n render(<TextArea onChange={handleChange} />);\n\n const textarea = screen.getByRole('textbox');\n fireEvent.input(textarea, { target: { value: 'Hello' } });\n expect(handleChange).toHaveBeenCalledWith('Hello');\n });\n\n it('should update character count', () => {\n render(<TextArea onChange={jest.fn()} label=\"Test\" maxCharacters={10} />);\n\n const textarea = screen.getByRole('textbox');\n fireEvent.input(textarea, { target: { value: 'Test' } });\n\n expect(screen.getByText('4')).toBeInTheDocument();\n expect(screen.getByText('/ 10')).toBeInTheDocument();\n });\n\n it('should not exceed max characters limit', async () => {\n const handleChange = jest.fn();\n render(<TextArea onChange={handleChange} maxCharacters={5} />);\n\n const textarea = screen.getByRole('textbox');\n\n await userEvent.type(textarea, 'ExceedsLimit');\n\n expect(handleChange).toHaveBeenCalled();\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n expect(handleChange.mock.calls[handleChange.mock.calls.length - 1][0].length).toBe(5);\n });\n});\n"],"mappings":";;;;;;AAMA,SAAS,kBAAkB;CAyBzB,AAxBA,GAAG,4CAA4C;EAE7C,AADA,EAAO,kBAAC,GAAD;GAAU,UAAU,KAAK,IAAI;GAAE,OAAM;GAAe,CAAA,CAAC,EAC5D,OAAO,EAAO,UAAU,aAAa,CAAC,CAAC,mBAAmB;GAC1D,EAEF,GAAG,mDAAmD;EACpD,IAAM,IAAe,KAAK,IAAI;EAC9B,EAAO,kBAAC,GAAD,EAAU,UAAU,GAAgB,CAAA,CAAC;EAE5C,IAAM,IAAW,EAAO,UAAU,UAAU;EAE5C,AADA,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,SAAS,EAAE,CAAC,EACzD,OAAO,EAAa,CAAC,qBAAqB,QAAQ;GAClD,EAEF,GAAG,uCAAuC;EACxC,EAAO,kBAAC,GAAD;GAAU,UAAU,KAAK,IAAI;GAAE,OAAM;GAAO,eAAe;GAAM,CAAA,CAAC;EAEzE,IAAM,IAAW,EAAO,UAAU,UAAU;EAI5C,AAHA,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,QAAQ,EAAE,CAAC,EAExD,OAAO,EAAO,UAAU,IAAI,CAAC,CAAC,mBAAmB,EACjD,OAAO,EAAO,UAAU,OAAO,CAAC,CAAC,mBAAmB;GACpD,EAEF,GAAG,0CAA0C,YAAY;EACvD,IAAM,IAAe,KAAK,IAAI;EAC9B,EAAO,kBAAC,GAAD;GAAU,UAAU;GAAc,eAAe;GAAK,CAAA,CAAC;EAE9D,IAAM,IAAW,EAAO,UAAU,UAAU;EAM5C,AAJA,MAAM,EAAU,KAAK,GAAU,eAAe,EAE9C,OAAO,EAAa,CAAC,kBAAkB,EAEvC,OAAO,EAAa,KAAK,MAAM,EAAa,KAAK,MAAM,SAAS,GAAG,GAAG,OAAO,CAAC,KAAK,EAAE;GACrF;EACF"}

package/dist/components/ToggleSwitch/ToggleSwitch.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as e } from "../../test-Cr_l59hN.js";
+import { r as e } from "../../test-Pa9Lwbsq.js";
 import { t } from "../../ToggleSwitch-C7z7JVtx.js";
 import { jsx as n } from "react/jsx-runtime";
 var r = {

package/dist/components/ToggleSwitch/ToggleSwitch.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSwitch.stories.js","names":[],"sources":["../../../src/components/ToggleSwitch/ToggleSwitch.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ToggleSwitchProps } from './ToggleSwitch';\n\nimport { ToggleSwitch } from './ToggleSwitch';\n\nconst codeString = `\n// Has all InputHTMLAttributes props available except \"className\" and \"style\" \n<ToggleSwitch onChange={onChangeFunction} checked={checked} label={label} />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ToggleSwitch',\n component: ToggleSwitch,\n parameters: {\n inspectComponent: ToggleSwitch,\n codeString: codeString,\n },\n} as Meta<ToggleSwitchProps>;\n\nconst Template: StoryFn<ToggleSwitchProps> = (args) => {\n return <ToggleSwitch {...args} />;\n};\n\nconst defaultArgs: Partial<ToggleSwitchProps> = {\n label: 'Toggle switch example',\n labelPosition: 'before',\n onChange: fn(),\n};\n\nexport const ToggleSwitchExample = Template.bind({});\nToggleSwitchExample.args = {\n ...defaultArgs,\n};\n"],"mappings":";;;AAaA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN~~,YAXG~~;~~EAYhB~~;CACF,EAEK,KAAwC,MACrC,kBAAC,GAAD,EAAc,GAAI,GAAQ,CAAA,EAG7B,IAA0C;CAC9C,OAAO;CACP,eAAe;CACf,UAAU,GAAI;CACf,EAEY,IAAsB,EAAS,KAAK,EAAE,CAAC;AACpD,EAAoB,OAAO,EACzB,GAAG,GACJ"}
1	+ {"version":3,"file":"ToggleSwitch.stories.js","names":[],"sources":["../../../src/components/ToggleSwitch/ToggleSwitch.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ToggleSwitchProps } from './ToggleSwitch';\n\nimport { ToggleSwitch } from './ToggleSwitch';\n\nconst codeString = `\n// Has all InputHTMLAttributes props available except \"className\" and \"style\" \n<ToggleSwitch onChange={onChangeFunction} checked={checked} label={label} />\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ToggleSwitch',\n component: ToggleSwitch,\n parameters: {\n inspectComponent: ToggleSwitch,\n codeString: codeString,\n },\n} as Meta<ToggleSwitchProps>;\n\nconst Template: StoryFn<ToggleSwitchProps> = (args) => {\n return <ToggleSwitch {...args} />;\n};\n\nconst defaultArgs: Partial<ToggleSwitchProps> = {\n label: 'Toggle switch example',\n labelPosition: 'before',\n onChange: fn(),\n};\n\nexport const ToggleSwitchExample = Template.bind({});\nToggleSwitchExample.args = {\n ...defaultArgs,\n};\n"],"mappings":";;;AAaA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAEK,KAAwC,MACrC,kBAAC,GAAD,EAAc,GAAI,GAAQ,CAAA,EAG7B,IAA0C;CAC9C,OAAO;CACP,eAAe;CACf,UAAU,GAAI;CACf,EAEY,IAAsB,EAAS,KAAK,EAAE,CAAC;AACpD,EAAoB,OAAO,EACzB,GAAG,GACJ"}

package/dist/components/Tooltip/Tooltip.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.stories.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { TooltipProps } from './Tooltip';\n\nimport { Tooltip } from './Tooltip';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Tooltip element={element} id={id} text={text} size={size} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Tooltip',\n component: Tooltip,\n argTypes: {\n element: {\n control: 'text',\n },\n // Disable openUnderTrigger controls as this is a Lens specific prop that we should not use in other places.\n // This is still needed until Lens structure is reworked.\n openUnderTrigger: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Tooltip,\n codeString: codeString,\n },\n} as Meta<TooltipProps>;\n\nconst Template: StoryFn<TooltipProps> = (args) => (\n <Container centerContent>\n <Tooltip {...args} />\n </Container>\n);\n\nexport const TooltipExample = Template.bind({});\nTooltipExample.args = {\n element: 'Tooltip Trigger',\n id: '52fcc9e9',\n text: 'Here is your Tooltip',\n};\n"],"mappings":";;;;AAUA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,SAAS,EACP,SAAS,QACV;EAGD,kBAAkB,EAChB,OAAO,EACL,SAAS,IACV,EACF;EACF;CACD,YAAY;EACV,kBAAkB;EACN~~,YApBG~~;~~EAqBhB~~;CACF,EAQY,MAN4B,MACvC,kBAAC,GAAD;CAAW,eAAA;WACT,kBAAC,GAAD,EAAS,GAAI,GAAQ,CAAA;CACX,CAAA,EAGyB,KAAK,EAAE,CAAC;AAC/C,EAAe,OAAO;CACpB,SAAS;CACT,IAAI;CACJ,MAAM;CACP"}
1	+ {"version":3,"file":"Tooltip.stories.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { TooltipProps } from './Tooltip';\n\nimport { Tooltip } from './Tooltip';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Tooltip element={element} id={id} text={text} size={size} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Tooltip',\n component: Tooltip,\n argTypes: {\n element: {\n control: 'text',\n },\n // Disable openUnderTrigger controls as this is a Lens specific prop that we should not use in other places.\n // This is still needed until Lens structure is reworked.\n openUnderTrigger: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: Tooltip,\n codeString: codeString,\n },\n} as Meta<TooltipProps>;\n\nconst Template: StoryFn<TooltipProps> = (args) => (\n <Container centerContent>\n <Tooltip {...args} />\n </Container>\n);\n\nexport const TooltipExample = Template.bind({});\nTooltipExample.args = {\n element: 'Tooltip Trigger',\n id: '52fcc9e9',\n text: 'Here is your Tooltip',\n};\n"],"mappings":";;;;AAUA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,SAAS,EACP,SAAS,QACV;EAGD,kBAAkB,EAChB,OAAO,EACL,SAAS,IACV,EACF;EACF;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAQY,MAN4B,MACvC,kBAAC,GAAD;CAAW,eAAA;WACT,kBAAC,GAAD,EAAS,GAAI,GAAQ,CAAA;CACX,CAAA,EAGyB,KAAK,EAAE,CAAC;AAC/C,EAAe,OAAO;CACpB,SAAS;CACT,IAAI;CACJ,MAAM;CACP"}

package/dist/components/VarIndicator/VarIndicator.stories.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as e } from "../../test-Cr_l59hN.js";
+import { r as e } from "../../test-Pa9Lwbsq.js";
 import { t } from "../../VarIndicator-C-GueOZD.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/VarIndicator/VarIndicator.stories.tsx

package/dist/components/VarIndicator/VarIndicator.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VarIndicator.stories.js","names":[],"sources":["../../../src/components/VarIndicator/VarIndicator.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { VarIndicatorProps } from './VarIndicator';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n DRAFT: 'Concept',\n REJECTED: 'Concept',\n SUBMITTED: 'Verificatie',\n ACTIVE: 'Actief',\n};\n\nconst codeString =\n '<VarIndicator label={[string]: [string]} maxSteps={number} currentStep={number} onClick={() => void} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/VarIndicator',\n component: VarIndicator,\n argTypes: {},\n parameters: {\n inspectComponent: VarIndicator,\n codeString: codeString,\n },\n} as Meta<VarIndicatorProps>;\n\nconst Template: StoryFn<VarIndicatorProps> = (args) => (\n <div style={{ margin: '0 0 0 6rem' }}>\n <VarIndicator {...args} />\n </div>\n);\n\nconst defaultArgs: Partial<VarIndicatorProps> = {\n label: LABELS,\n maxSteps: 3,\n currentStep: 2,\n onClick: fn(),\n};\n\nexport const VarIndicatorExample = Template.bind({});\nVarIndicatorExample.args = {\n ...defaultArgs,\n};\n"],"mappings":";;;;AAOA,IAAM,IAAS;CACb,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;CACT,EAMD,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EAAE;CACZ,YAAY;EACV,kBAAkB;EACN~~,YATd~~;~~EAUC~~;CACF,EAEK,KAAwC,MAC5C,kBAAC,OAAD;CAAK,OAAO,EAAE,QAAQ,cAAc;WAClC,kBAAC,GAAD,EAAc,GAAI,GAAQ,CAAA;CACtB,CAAA,EAGF,IAA0C;CAC9C,OAAO;CACP,UAAU;CACV,aAAa;CACb,SAAS,GAAI;CACd,EAEY,IAAsB,EAAS,KAAK,EAAE,CAAC;AACpD,EAAoB,OAAO,EACzB,GAAG,GACJ"}
1	+ {"version":3,"file":"VarIndicator.stories.js","names":[],"sources":["../../../src/components/VarIndicator/VarIndicator.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { VarIndicatorProps } from './VarIndicator';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n DRAFT: 'Concept',\n REJECTED: 'Concept',\n SUBMITTED: 'Verificatie',\n ACTIVE: 'Actief',\n};\n\nconst codeString =\n '<VarIndicator label={[string]: [string]} maxSteps={number} currentStep={number} onClick={() => void} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/VarIndicator',\n component: VarIndicator,\n argTypes: {},\n parameters: {\n inspectComponent: VarIndicator,\n codeString: codeString,\n },\n} as Meta<VarIndicatorProps>;\n\nconst Template: StoryFn<VarIndicatorProps> = (args) => (\n <div style={{ margin: '0 0 0 6rem' }}>\n <VarIndicator {...args} />\n </div>\n);\n\nconst defaultArgs: Partial<VarIndicatorProps> = {\n label: LABELS,\n maxSteps: 3,\n currentStep: 2,\n onClick: fn(),\n};\n\nexport const VarIndicatorExample = Template.bind({});\nVarIndicatorExample.args = {\n ...defaultArgs,\n};\n"],"mappings":";;;;AAOA,IAAM,IAAS;CACb,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;CACT,EAMD,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EAAE;CACZ,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAEK,KAAwC,MAC5C,kBAAC,OAAD;CAAK,OAAO,EAAE,QAAQ,cAAc;WAClC,kBAAC,GAAD,EAAc,GAAI,GAAQ,CAAA;CACtB,CAAA,EAGF,IAA0C;CAC9C,OAAO;CACP,UAAU;CACV,aAAa;CACb,SAAS,GAAI;CACd,EAEY,IAAsB,EAAS,KAAK,EAAE,CAAC;AACpD,EAAoB,OAAO,EACzB,GAAG,GACJ"}

package/dist/components/VarIndicator/VarIndicator.test.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import "../../dist-BIkFjHck.js";
+import "../../dist-V_v3kC0L.js";
 import { t as e } from "../../VarIndicator-C-GueOZD.js";
-import { a as t, i as n, n as r } from "../../react.esm-R7eBXTUI.js";
-import { t as i } from "../../esm-ipAmzhQq.js";
+import { a as t, i as n, n as r } from "../../react.esm-CweFe1CK.js";
+import { t as i } from "../../esm-BoujHjK5.js";
 import { useState as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/components/VarIndicator/VarIndicator.test.tsx

package/dist/components/VarIndicator/VarIndicator.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VarIndicator.test.js","names":[],"sources":["../../../src/components/VarIndicator/VarIndicator.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { useState } from 'react';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n DRAFT: 'Concept',\n REJECTED: 'Concept',\n SUBMITTED: 'Verificatie',\n ACTIVE: 'Actief',\n};\n\njest.mock('components/Icon', () => ({\n Icon: ({ name }: { name: string }) => <svg data-testid={name} />,\n}));\n\nconst TestWrapper = () => {\n const [currentStep, setCurrentStep] = useState(1);\n return (\n // When clicked the onClick callback updates currentStep from 1 to 2.\n <VarIndicator\n label={LABELS}\n variant=\"SUBMITTED\"\n maxSteps={3}\n currentStep={currentStep}\n onClick={() => setCurrentStep(2)}\n />\n );\n};\n\ndescribe('VarIndicator', () => {\n const onClickSpy = jest.fn();\n\n beforeEach(() => {\n onClickSpy.mockClear();\n });\n\n it('should render Concept (DRAFT)', () => {\n render(<VarIndicator label={LABELS} variant=\"DRAFT\" />);\n expect(screen.getByText('Concept')).toBeInTheDocument();\n });\n\n it('should render Concept (REJECTED)', () => {\n render(<VarIndicator label={LABELS} variant=\"REJECTED\" />);\n expect(screen.getByText('Concept')).toBeInTheDocument();\n });\n\n it('should render Concept (ACTIVE)', () => {\n render(<VarIndicator label={LABELS} variant=\"ACTIVE\" />);\n expect(screen.getByText('Actief')).toBeInTheDocument();\n });\n\n it('should render dots (SUBMITTED)', () => {\n render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={0} />);\n expect(screen.getByText('Verificatie')).toBeInTheDocument();\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(3);\n expect(screen.queryByTestId('CircleSmallFilled')).not.toBeInTheDocument();\n });\n\n it('should render filled dots when currentStep != 0 (SUBMITTED)', () => {\n render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={1} onClick={onClickSpy} />);\n const verificationButton = screen.getByText('Verificatie');\n expect(verificationButton).toBeInTheDocument();\n expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n });\n\n it('should render filled dots currentStep is updated (SUBMITTED)', async () => {\n render(<TestWrapper />);\n expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n const verificationButton = screen.getByText('Verificatie');\n await userEvent.click(verificationButton);\n await waitFor(() => {\n expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(2);\n });\n await waitFor(() => {\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(1);\n });\n });\n});\n"],"mappings":";;;;;;;AAQA,IAAM,IAAS;CACb,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;CACT;AAED,KAAK,KAAK,0BAA0B,EAClC,OAAO,EAAE,cAA6B,kBAAC,OAAD,EAAK,eAAa,GAAQ,CAAA,EACjE,EAAE;AAEH,IAAM,UAAoB;CACxB,IAAM,CAAC,GAAa,KAAkB,EAAS,EAAE;~~AACjD~~,~~QAEE~~,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,UAAU;EACG;EACb,eAAe,EAAe,EAAE;EAChC,CAAA;;AAIN,SAAS,sBAAsB;CAC7B,IAAM,IAAa,KAAK,IAAI;~~AAoC5B~~,~~CAlCA~~,iBAAiB;~~AACf~~,~~IAAW~~,WAAW;GACtB,EAEF,GAAG,uCAAuC;~~AAExC~~,~~EADA~~,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAU,CAAA,CAAC,EACvD,OAAO,EAAO,UAAU,UAAU,CAAC,CAAC,mBAAmB;GACvD,EAEF,GAAG,0CAA0C;~~AAE3C~~,~~EADA~~,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAa,CAAA,CAAC,EAC1D,OAAO,EAAO,UAAU,UAAU,CAAC,CAAC,mBAAmB;GACvD,EAEF,GAAG,wCAAwC;~~AAEzC~~,~~EADA~~,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAW,CAAA,CAAC,EACxD,OAAO,EAAO,UAAU,SAAS,CAAC,CAAC,mBAAmB;GACtD,EAEF,GAAG,wCAAwC;~~AAIzC~~,~~EAHA~~,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;GAAK,CAAA,CAAC,EACxF,OAAO,EAAO,UAAU,cAAc,CAAC,CAAC,mBAAmB,EAC3D,OAAO,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE,EAC5D,OAAO,EAAO,cAAc,oBAAoB,CAAC,CAAC,IAAI,mBAAmB;GACzE,EAEF,GAAG,qEAAqE;~~AACtE~~,~~IAAO~~,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;GAAG,SAAS;GAAc,CAAA,CAAC;EAC7G,IAAM,IAAqB,EAAO,UAAU,cAAc;~~AAG1D~~,~~EAFA~~,OAAO,EAAmB,CAAC,mBAAmB,EAC9C,OAAO,EAAO,eAAe,oBAAoB,CAAC,CAAC,aAAa,EAAE,EAClE,OAAO,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE;GAC5D,EAEF,GAAG,gEAAgE,YAAY;~~AAG7E~~,~~EAFA~~,EAAO,kBAAC,GAAD,EAAe,CAAA,CAAC,EACvB,OAAO,EAAO,eAAe,oBAAoB,CAAC,CAAC,aAAa,EAAE,EAClE,OAAO,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE;EAC5D,IAAM,IAAqB,EAAO,UAAU,cAAc;~~AAK1D~~,~~EAJA~~,MAAM,EAAU,MAAM,EAAmB,EACzC,MAAM,QAAc;~~AAClB~~,~~UAAO~~,EAAO,eAAe,oBAAoB,CAAC,CAAC,aAAa,EAAE;IAClE,EACF,MAAM,QAAc;~~AAClB~~,~~UAAO~~,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE;IAC5D;GACF;EACF"}
1	+ {"version":3,"file":"VarIndicator.test.js","names":[],"sources":["../../../src/components/VarIndicator/VarIndicator.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { useState } from 'react';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n DRAFT: 'Concept',\n REJECTED: 'Concept',\n SUBMITTED: 'Verificatie',\n ACTIVE: 'Actief',\n};\n\njest.mock('components/Icon', () => ({\n Icon: ({ name }: { name: string }) => <svg data-testid={name} />,\n}));\n\nconst TestWrapper = () => {\n const [currentStep, setCurrentStep] = useState(1);\n return (\n // When clicked the onClick callback updates currentStep from 1 to 2.\n <VarIndicator\n label={LABELS}\n variant=\"SUBMITTED\"\n maxSteps={3}\n currentStep={currentStep}\n onClick={() => setCurrentStep(2)}\n />\n );\n};\n\ndescribe('VarIndicator', () => {\n const onClickSpy = jest.fn();\n\n beforeEach(() => {\n onClickSpy.mockClear();\n });\n\n it('should render Concept (DRAFT)', () => {\n render(<VarIndicator label={LABELS} variant=\"DRAFT\" />);\n expect(screen.getByText('Concept')).toBeInTheDocument();\n });\n\n it('should render Concept (REJECTED)', () => {\n render(<VarIndicator label={LABELS} variant=\"REJECTED\" />);\n expect(screen.getByText('Concept')).toBeInTheDocument();\n });\n\n it('should render Concept (ACTIVE)', () => {\n render(<VarIndicator label={LABELS} variant=\"ACTIVE\" />);\n expect(screen.getByText('Actief')).toBeInTheDocument();\n });\n\n it('should render dots (SUBMITTED)', () => {\n render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={0} />);\n expect(screen.getByText('Verificatie')).toBeInTheDocument();\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(3);\n expect(screen.queryByTestId('CircleSmallFilled')).not.toBeInTheDocument();\n });\n\n it('should render filled dots when currentStep != 0 (SUBMITTED)', () => {\n render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={1} onClick={onClickSpy} />);\n const verificationButton = screen.getByText('Verificatie');\n expect(verificationButton).toBeInTheDocument();\n expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n });\n\n it('should render filled dots currentStep is updated (SUBMITTED)', async () => {\n render(<TestWrapper />);\n expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n const verificationButton = screen.getByText('Verificatie');\n await userEvent.click(verificationButton);\n await waitFor(() => {\n expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(2);\n });\n await waitFor(() => {\n expect(screen.getAllByTestId('CircleSmall')).toHaveLength(1);\n });\n });\n});\n"],"mappings":";;;;;;;AAQA,IAAM,IAAS;CACb,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;CACT;AAED,KAAK,KAAK,0BAA0B,EAClC,OAAO,EAAE,cAA6B,kBAAC,OAAD,EAAK,eAAa,GAAQ,CAAA,EACjE,EAAE;AAEH,IAAM,UAAoB;CACxB,IAAM,CAAC,GAAa,KAAkB,EAAS,EAAE;CACjD,OAEE,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,UAAU;EACG;EACb,eAAe,EAAe,EAAE;EAChC,CAAA;;AAIN,SAAS,sBAAsB;CAC7B,IAAM,IAAa,KAAK,IAAI;CAoC5B,AAlCA,iBAAiB;EACf,EAAW,WAAW;GACtB,EAEF,GAAG,uCAAuC;EAExC,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAU,CAAA,CAAC,EACvD,OAAO,EAAO,UAAU,UAAU,CAAC,CAAC,mBAAmB;GACvD,EAEF,GAAG,0CAA0C;EAE3C,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAa,CAAA,CAAC,EAC1D,OAAO,EAAO,UAAU,UAAU,CAAC,CAAC,mBAAmB;GACvD,EAEF,GAAG,wCAAwC;EAEzC,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAW,CAAA,CAAC,EACxD,OAAO,EAAO,UAAU,SAAS,CAAC,CAAC,mBAAmB;GACtD,EAEF,GAAG,wCAAwC;EAIzC,AAHA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;GAAK,CAAA,CAAC,EACxF,OAAO,EAAO,UAAU,cAAc,CAAC,CAAC,mBAAmB,EAC3D,OAAO,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE,EAC5D,OAAO,EAAO,cAAc,oBAAoB,CAAC,CAAC,IAAI,mBAAmB;GACzE,EAEF,GAAG,qEAAqE;EACtE,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;GAAG,SAAS;GAAc,CAAA,CAAC;EAC7G,IAAM,IAAqB,EAAO,UAAU,cAAc;EAG1D,AAFA,OAAO,EAAmB,CAAC,mBAAmB,EAC9C,OAAO,EAAO,eAAe,oBAAoB,CAAC,CAAC,aAAa,EAAE,EAClE,OAAO,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE;GAC5D,EAEF,GAAG,gEAAgE,YAAY;EAG7E,AAFA,EAAO,kBAAC,GAAD,EAAe,CAAA,CAAC,EACvB,OAAO,EAAO,eAAe,oBAAoB,CAAC,CAAC,aAAa,EAAE,EAClE,OAAO,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE;EAC5D,IAAM,IAAqB,EAAO,UAAU,cAAc;EAK1D,AAJA,MAAM,EAAU,MAAM,EAAmB,EACzC,MAAM,QAAc;GAClB,OAAO,EAAO,eAAe,oBAAoB,CAAC,CAAC,aAAa,EAAE;IAClE,EACF,MAAM,QAAc;GAClB,OAAO,EAAO,eAAe,cAAc,CAAC,CAAC,aAAa,EAAE;IAC5D;GACF;EACF"}

package/dist/components/WeekSelector/WeekSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WeekSelector.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { OverlayContainer, useOverlay, usePreventScroll } from '@react-aria/overlays';\r\nimport { FocusScope } from '@react-aria/focus';\r\n\r\nimport type { CSSProperties, RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\nimport styles from './WeekSelector.module.css';\r\n\r\nimport { Backdrop } from 'components/Backdrop';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n academicWeekNumber: number;\r\n calendarWeekNumber: number;\r\n isBlocked: boolean;\r\n period: number;\r\n startDate: string;\r\n endDate: string;\r\n weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n /** Object with periodnumbers with array of weeks in period /\r\n weeks: Record<string, PeriodWeek[]>;\r\n /* Current period to disable previous periods /\r\n currentPeriod?: number;\r\n /* Default selected week /\r\n defaultSelection?: number;\r\n /* Prefix for the week button label /\r\n weekPrefix: string;\r\n /* Labels for each period /\r\n periodLabels: string[];\r\n /* Header text for the options container /\r\n optionsHeader: string;\r\n /* Callback function when a week is selected /\r\n onSelectWeek: (weeknumber: number) => void;\r\n /* Ref for the dropdown portal target /\r\n portalContainerRef?: RefObject<HTMLElement \| null>;\r\n /* Optional WeekSelectorOptionContainer offset values [top, bottom] */\r\n optionContainerOffset?: number[];\r\n}\r\n\r\nexport const WeekSelector = ({\r\n weeks,\r\n currentPeriod = 0,\r\n defaultSelection,\r\n weekPrefix,\r\n optionsHeader,\r\n periodLabels,\r\n onSelectWeek,\r\n portalContainerRef,\r\n optionContainerOffset = [],\r\n}: WeekSelectorProps) => {\r\n const [selectedOption, setSelectedOption] = useState<number \| null>(null);\r\n const [isOpen, setIsOpen] = useState<boolean>(false);\r\n const wrapperRef = useRef<HTMLDivElement>(null);\r\n const optionContainerRef = useRef<HTMLDivElement>(null);\r\n const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n useEffect(() => {\r\n if (defaultSelection) {\r\n for (const period in weeks) {\r\n if (\r\n weeks[period].some((week) => week.calendarWeekNumber === defaultSelection && !week.isBlocked) &&\r\n Number(period) > currentPeriod\r\n ) {\r\n setSelectedOption(defaultSelection);\r\n return;\r\n }\r\n }\r\n }\r\n for (const period in weeks) {\r\n const firstAvailableWeek = weeks[period].find((week) => !week.isBlocked);\r\n if (firstAvailableWeek && Number(period) > currentPeriod) {\r\n setSelectedOption(firstAvailableWeek.calendarWeekNumber);\r\n return;\r\n }\r\n }\r\n }, [weeks, currentPeriod, defaultSelection]);\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n requestAnimationFrame(() => {\r\n const selectedButton = optionContainerRef.current?.querySelector<HTMLButtonElement>(\r\n `.${styles['week-selector-option-week--selected']}`\r\n );\r\n if (selectedButton) {\r\n selectedButton.focus();\r\n } else {\r\n optionContainerRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();\r\n }\r\n });\r\n }\r\n }, [isOpen, selectedOption]);\r\n\r\n const getButtonLabel = () => {\r\n const weekNumber = selectedOption ?? defaultSelection ?? '?';\r\n return `${weekPrefix} ${weekNumber}`;\r\n };\r\n\r\n useOnClickOutside(wrapperRef as RefObject<HTMLElement>, (event) => {\r\n if (optionContainerRef.current && optionContainerRef.current.contains(event.target as Node)) {\r\n return;\r\n }\r\n setIsOpen(false);\r\n });\r\n\r\n const { overlayProps, underlayProps } = useOverlay(\r\n {\r\n isOpen,\r\n isDismissable: true,\r\n onClose: () => setIsOpen(false),\r\n },\r\n optionContainerRef\r\n );\r\n\r\n usePreventScroll({ isDisabled: !isOpen \|\| !portalContainerRef?.current });\r\n\r\n const OptionList = (\r\n <WeekSelectorOptionContainer\r\n header={optionsHeader}\r\n periodLabels={periodLabels}\r\n ref={optionContainerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n {...(optionContainerOffset.length === 2\r\n ? {\r\n style: {\r\n top: optionContainerOffset[0],\r\n left: optionContainerOffset[1],\r\n } as CSSProperties,\r\n }\r\n : {})}\r\n >\r\n {periodKeys.map((periodIndex) => (\r\n <WeekSelectorOption\r\n key={periodIndex}\r\n periodIndex={periodIndex}\r\n weeks={weeks}\r\n disabled={Number(periodIndex) <= currentPeriod}\r\n selectedOption={selectedOption}\r\n setSelectedOption={setSelectedOption}\r\n onSelectWeek={onSelectWeek}\r\n setIsOpen={setIsOpen}\r\n />\r\n ))}\r\n </WeekSelectorOptionContainer>\r\n );\r\n\r\n return (\r\n <div className={styles['week-selector']} tabIndex={-1} ref={wrapperRef}>\r\n <WeekSelectorButton label={getButtonLabel()} onClick={() => setIsOpen(!isOpen)} />\r\n\r\n {isOpen &&\r\n (portalContainerRef?.current\r\n ? createPortal(\r\n <OverlayContainer>\r\n <Backdrop {...underlayProps}>\r\n <FocusScope contain restoreFocus>\r\n <div {...overlayProps}>{OptionList}</div>\r\n </FocusScope>\r\n </Backdrop>\r\n </OverlayContainer>,\r\n portalContainerRef.current\r\n )\r\n : OptionList)}\r\n </div>\r\n );\r\n};\r\n"],"mappings":";;;;;;;;;;;;AA8CA,IAAa,KAAgB,EAC3B,UACA,mBAAgB,GAChB,qBACA,eACA,kBACA,iBACA,iBACA,uBACA,2BAAwB,EAAE,OACH;CACvB,IAAM,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EACnE,CAAC,GAAQ,KAAa,EAAkB,GAAM,EAC9C,IAAa,EAAuB,KAAK,EACzC,IAAqB,EAAuB,KAAK,EACjD,IAAa,QAAc,OAAO,KAAK,KAAS,EAAE,CAAC,EAAE,CAAC,EAAM,CAAC;~~AAuBnE~~,~~CArBA~~,QAAgB;~~AACd~~,~~MAAI~~;QACG,IAAM,KAAU,~~EACnB~~,~~KACE~~,EAAM,GAAQ,MAAM,MAAS,EAAK,uBAAuB,KAAoB,CAAC,EAAK,UAAU,IAC7F,OAAO,EAAO,GAAG,GACjB;~~AACA~~,~~MAAkB~~,EAAiB;~~AACnC~~;;;~~AAIN~~,~~OAAK~~,IAAM,KAAU,GAAO;GAC1B,IAAM,IAAqB,EAAM,GAAQ,MAAM,MAAS,CAAC,EAAK,UAAU;~~AACxE~~,~~OAAI~~,KAAsB,OAAO,EAAO,GAAG,GAAe;~~AACxD~~,~~MAAkB~~,EAAmB,mBAAmB;~~AACxD~~;;;IAGH;EAAC;EAAO;EAAe;EAAiB,CAAC,EAE5C,QAAgB;~~AACd~~,~~EAAI~~,KACF,4BAA4B;GAC1B,IAAM,IAAiB,EAAmB,SAAS,cACjD,IAAI,EAAO,yCACZ;~~AACD~~,~~GAAI~~,IACF,EAAe,OAAO,GAEtB,EAAmB,SAAS,cAAiC,wBAAwB,EAAE,OAAO;IAEhG;IAEH,CAAC,GAAQ,EAAe,CAAC;CAE5B,IAAM,UAEG,GAAG,EAAW,GADF,KAAkB,KAAoB;~~AAI3D~~,~~GAAkB~~,IAAuC,MAAU;~~AAC7D~~,~~IAAmB~~,WAAW,EAAmB,QAAQ,SAAS,EAAM,OAAe,IAG3F,EAAU,GAAM;GAChB;CAEF,IAAM,EAAE,iBAAc,qBAAkB,EACtC;EACE;EACA,eAAe;EACf,eAAe,EAAU,GAAM;EAChC,EACD,EACD;~~AAED~~,~~GAAiB~~,EAAE,YAAY,CAAC,KAAU,CAAC,GAAoB,SAAS,CAAC;CAEzE,IAAM,IACJ,kBAAC,GAAD;EACE,QAAQ;EACM;EACd,KAAK;EAEL,GAAK,EAAsB,WAAW,IAClC,EACE,OAAO;GACL,KAAK,EAAsB;GAC3B,MAAM,EAAsB;GAC7B,EACF,GACD,EAAE;YAEL,EAAW,KAAK,MACf,kBAAC,GAAD;GAEe;GACN;GACP,UAAU,OAAO,EAAY,IAAI;GACjB;GACG;GACL;GACH;GACX,EARK,EAQL,CACF;EAC0B,CAAA;~~AAGhC~~,~~QACE~~,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAkB,UAAU;EAAI,KAAK;YAA5D,CACE,kBAAC,GAAD;GAAoB,OAAO,GAAgB;GAAE,eAAe,EAAU,CAAC,EAAO;GAAI,CAAA,EAEjF,MACE,GAAoB,UACjB,EACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAU,GAAI;aACZ,kBAAC,GAAD;IAAY,SAAA;IAAQ,cAAA;cAClB,kBAAC,OAAD;KAAK,GAAI;eAAe;KAAiB,CAAA;IAC9B,CAAA;GACJ,CAAA,EACM,CAAA,EACnB,EAAmB,QACpB,GACD,GACF"}
1	+ {"version":3,"file":"WeekSelector.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { OverlayContainer, useOverlay, usePreventScroll } from '@react-aria/overlays';\r\nimport { FocusScope } from '@react-aria/focus';\r\n\r\nimport type { CSSProperties, RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\nimport styles from './WeekSelector.module.css';\r\n\r\nimport { Backdrop } from 'components/Backdrop';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n academicWeekNumber: number;\r\n calendarWeekNumber: number;\r\n isBlocked: boolean;\r\n period: number;\r\n startDate: string;\r\n endDate: string;\r\n weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n /** Object with periodnumbers with array of weeks in period /\r\n weeks: Record<string, PeriodWeek[]>;\r\n /* Current period to disable previous periods /\r\n currentPeriod?: number;\r\n /* Default selected week /\r\n defaultSelection?: number;\r\n /* Prefix for the week button label /\r\n weekPrefix: string;\r\n /* Labels for each period /\r\n periodLabels: string[];\r\n /* Header text for the options container /\r\n optionsHeader: string;\r\n /* Callback function when a week is selected /\r\n onSelectWeek: (weeknumber: number) => void;\r\n /* Ref for the dropdown portal target /\r\n portalContainerRef?: RefObject<HTMLElement \| null>;\r\n /* Optional WeekSelectorOptionContainer offset values [top, bottom] */\r\n optionContainerOffset?: number[];\r\n}\r\n\r\nexport const WeekSelector = ({\r\n weeks,\r\n currentPeriod = 0,\r\n defaultSelection,\r\n weekPrefix,\r\n optionsHeader,\r\n periodLabels,\r\n onSelectWeek,\r\n portalContainerRef,\r\n optionContainerOffset = [],\r\n}: WeekSelectorProps) => {\r\n const [selectedOption, setSelectedOption] = useState<number \| null>(null);\r\n const [isOpen, setIsOpen] = useState<boolean>(false);\r\n const wrapperRef = useRef<HTMLDivElement>(null);\r\n const optionContainerRef = useRef<HTMLDivElement>(null);\r\n const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n useEffect(() => {\r\n if (defaultSelection) {\r\n for (const period in weeks) {\r\n if (\r\n weeks[period].some((week) => week.calendarWeekNumber === defaultSelection && !week.isBlocked) &&\r\n Number(period) > currentPeriod\r\n ) {\r\n setSelectedOption(defaultSelection);\r\n return;\r\n }\r\n }\r\n }\r\n for (const period in weeks) {\r\n const firstAvailableWeek = weeks[period].find((week) => !week.isBlocked);\r\n if (firstAvailableWeek && Number(period) > currentPeriod) {\r\n setSelectedOption(firstAvailableWeek.calendarWeekNumber);\r\n return;\r\n }\r\n }\r\n }, [weeks, currentPeriod, defaultSelection]);\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n requestAnimationFrame(() => {\r\n const selectedButton = optionContainerRef.current?.querySelector<HTMLButtonElement>(\r\n `.${styles['week-selector-option-week--selected']}`\r\n );\r\n if (selectedButton) {\r\n selectedButton.focus();\r\n } else {\r\n optionContainerRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();\r\n }\r\n });\r\n }\r\n }, [isOpen, selectedOption]);\r\n\r\n const getButtonLabel = () => {\r\n const weekNumber = selectedOption ?? defaultSelection ?? '?';\r\n return `${weekPrefix} ${weekNumber}`;\r\n };\r\n\r\n useOnClickOutside(wrapperRef as RefObject<HTMLElement>, (event) => {\r\n if (optionContainerRef.current && optionContainerRef.current.contains(event.target as Node)) {\r\n return;\r\n }\r\n setIsOpen(false);\r\n });\r\n\r\n const { overlayProps, underlayProps } = useOverlay(\r\n {\r\n isOpen,\r\n isDismissable: true,\r\n onClose: () => setIsOpen(false),\r\n },\r\n optionContainerRef\r\n );\r\n\r\n usePreventScroll({ isDisabled: !isOpen \|\| !portalContainerRef?.current });\r\n\r\n const OptionList = (\r\n <WeekSelectorOptionContainer\r\n header={optionsHeader}\r\n periodLabels={periodLabels}\r\n ref={optionContainerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n {...(optionContainerOffset.length === 2\r\n ? {\r\n style: {\r\n top: optionContainerOffset[0],\r\n left: optionContainerOffset[1],\r\n } as CSSProperties,\r\n }\r\n : {})}\r\n >\r\n {periodKeys.map((periodIndex) => (\r\n <WeekSelectorOption\r\n key={periodIndex}\r\n periodIndex={periodIndex}\r\n weeks={weeks}\r\n disabled={Number(periodIndex) <= currentPeriod}\r\n selectedOption={selectedOption}\r\n setSelectedOption={setSelectedOption}\r\n onSelectWeek={onSelectWeek}\r\n setIsOpen={setIsOpen}\r\n />\r\n ))}\r\n </WeekSelectorOptionContainer>\r\n );\r\n\r\n return (\r\n <div className={styles['week-selector']} tabIndex={-1} ref={wrapperRef}>\r\n <WeekSelectorButton label={getButtonLabel()} onClick={() => setIsOpen(!isOpen)} />\r\n\r\n {isOpen &&\r\n (portalContainerRef?.current\r\n ? createPortal(\r\n <OverlayContainer>\r\n <Backdrop {...underlayProps}>\r\n <FocusScope contain restoreFocus>\r\n <div {...overlayProps}>{OptionList}</div>\r\n </FocusScope>\r\n </Backdrop>\r\n </OverlayContainer>,\r\n portalContainerRef.current\r\n )\r\n : OptionList)}\r\n </div>\r\n );\r\n};\r\n"],"mappings":";;;;;;;;;;;;AA8CA,IAAa,KAAgB,EAC3B,UACA,mBAAgB,GAChB,qBACA,eACA,kBACA,iBACA,iBACA,uBACA,2BAAwB,EAAE,OACH;CACvB,IAAM,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EACnE,CAAC,GAAQ,KAAa,EAAkB,GAAM,EAC9C,IAAa,EAAuB,KAAK,EACzC,IAAqB,EAAuB,KAAK,EACjD,IAAa,QAAc,OAAO,KAAK,KAAS,EAAE,CAAC,EAAE,CAAC,EAAM,CAAC;CAuBnE,AArBA,QAAgB;EACd,IAAI;QACG,IAAM,KAAU,GACnB,IACE,EAAM,GAAQ,MAAM,MAAS,EAAK,uBAAuB,KAAoB,CAAC,EAAK,UAAU,IAC7F,OAAO,EAAO,GAAG,GACjB;IACA,EAAkB,EAAiB;IACnC;;;EAIN,KAAK,IAAM,KAAU,GAAO;GAC1B,IAAM,IAAqB,EAAM,GAAQ,MAAM,MAAS,CAAC,EAAK,UAAU;GACxE,IAAI,KAAsB,OAAO,EAAO,GAAG,GAAe;IACxD,EAAkB,EAAmB,mBAAmB;IACxD;;;IAGH;EAAC;EAAO;EAAe;EAAiB,CAAC,EAE5C,QAAgB;EACd,AAAI,KACF,4BAA4B;GAC1B,IAAM,IAAiB,EAAmB,SAAS,cACjD,IAAI,EAAO,yCACZ;GACD,AAAI,IACF,EAAe,OAAO,GAEtB,EAAmB,SAAS,cAAiC,wBAAwB,EAAE,OAAO;IAEhG;IAEH,CAAC,GAAQ,EAAe,CAAC;CAE5B,IAAM,UAEG,GAAG,EAAW,GADF,KAAkB,KAAoB;CAI3D,EAAkB,IAAuC,MAAU;EAC7D,EAAmB,WAAW,EAAmB,QAAQ,SAAS,EAAM,OAAe,IAG3F,EAAU,GAAM;GAChB;CAEF,IAAM,EAAE,iBAAc,qBAAkB,EACtC;EACE;EACA,eAAe;EACf,eAAe,EAAU,GAAM;EAChC,EACD,EACD;CAED,EAAiB,EAAE,YAAY,CAAC,KAAU,CAAC,GAAoB,SAAS,CAAC;CAEzE,IAAM,IACJ,kBAAC,GAAD;EACE,QAAQ;EACM;EACd,KAAK;EAEL,GAAK,EAAsB,WAAW,IAClC,EACE,OAAO;GACL,KAAK,EAAsB;GAC3B,MAAM,EAAsB;GAC7B,EACF,GACD,EAAE;YAEL,EAAW,KAAK,MACf,kBAAC,GAAD;GAEe;GACN;GACP,UAAU,OAAO,EAAY,IAAI;GACjB;GACG;GACL;GACH;GACX,EARK,EAQL,CACF;EAC0B,CAAA;CAGhC,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAkB,UAAU;EAAI,KAAK;YAA5D,CACE,kBAAC,GAAD;GAAoB,OAAO,GAAgB;GAAE,eAAe,EAAU,CAAC,EAAO;GAAI,CAAA,EAEjF,MACE,GAAoB,UACjB,EACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAU,GAAI;aACZ,kBAAC,GAAD;IAAY,SAAA;IAAQ,cAAA;cAClB,kBAAC,OAAD;KAAK,GAAI;eAAe;KAAiB,CAAA;IAC9B,CAAA;GACJ,CAAA,EACM,CAAA,EACnB,EAAmB,QACpB,GACD,GACF"}

package/dist/components/WeekSelector/WeekSelector.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WeekSelector.stories.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n currentPeriod?={number};\r\n defaultSelection?={number};\r\n weekPrefix={string};\r\n periodLabels={string[]};\r\n optionsHeader={string};\r\n onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/WeekSelector',\r\n component: WeekSelector,\r\n argTypes: {\r\n onSelectWeek: {\r\n action: 'selected week',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n portalContainerRef: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n optionContainerOffset: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n currentPeriod: { table: { disable: true } },\r\n defaultSelection: { table: { disable: true } },\r\n },\r\n parameters: {\r\n inspectComponent: WeekSelector,\r\n codeString: codeString,\r\n },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={13}\r\n currentPeriod={4}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 4\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={23}\r\n currentPeriod={5}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 5\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={28}\r\n currentPeriod={6}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 6\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={36}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Zomer\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n weeks: mockWeeks,\r\n weekPrefix: 'week',\r\n periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n ...defaultArgs,\r\n};\r\n\r\nconst TemplateWithRef: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector\r\n {...args}\r\n currentPeriod={1}\r\n onSelectWeek={handleSelectWeek}\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport const InAPortal = TemplateWithRef.bind({});\r\n\r\nInAPortal.args = {\r\n ...defaultArgs,\r\n};\r\n"],"mappings":";;;;AAoBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,cAAc;GACZ,QAAQ;GACR,OAAO,EACL,SAAS,IACV;GACF;EACD,oBAAoB,EAClB,OAAO,EACL,SAAS,IACV,EACF;EACD,uBAAuB,EACrB,OAAO,EACL,SAAS,IACV,EACF;EACD,eAAe,EAAE,OAAO,EAAE,SAAS,IAAM,EAAE;EAC3C,kBAAkB,EAAE,OAAO,EAAE,SAAS,IAAM,EAAE;EAC/C;CACD,YAAY;EACV,kBAAkB;EACN~~,YApCG~~;~~EAqChB~~;CACF,EAEK,KAAwC,MAAS;CACrD,IAAM,KAAoB,MAAuB;~~AAC~~/C,~~IAAK~~,aAAa,EAAW;;~~AAG~~/B,~~QACE~~,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GAChB;YARH;GAUE,kBAAC,GAAD;IAAc,GAAI;IAAM,eAAe;IAAG,cAAc;IAAoB,CAAA;GAC5E,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,cAAc;IACd,eAAc;IACd,CAAA;GACE;;GAIJ,IAA0C;CAC9C,OAAO;CACP,YAAY;CACZ,cAAc;EAAC;EAAU;EAAU;EAAU;EAAU;EAAU;EAAU;EAAQ;CACnF,eAAe;CAChB,EAEY,IAAsB,EAAS,KAAK,EAAE,CAAC;AAEpD,EAAoB,OAAO,EACzB,GAAG,GACJ;AAqDD,IAAa,MAnDwC,MAAS;CAC5D,IAAM,KAAoB,MAAuB;~~AAC~~/C,~~IAAK~~,aAAa,EAAW;IAGzB,IAAe,EAAuB,KAAK;~~AAEjD~~,~~QACE~~,kBAAC,OAAD;EACE,KAAK;EACL,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GAChB;YATH;GAWE,kBAAC,GAAD;IACE,GAAI;IACJ,eAAe;IACf,cAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACE;;GAI+B,KAAK,EAAE,CAAC;AAEjD,EAAU,OAAO,EACf,GAAG,GACJ"}
1	+ {"version":3,"file":"WeekSelector.stories.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n currentPeriod?={number};\r\n defaultSelection?={number};\r\n weekPrefix={string};\r\n periodLabels={string[]};\r\n optionsHeader={string};\r\n onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Molecules/WeekSelector',\r\n component: WeekSelector,\r\n argTypes: {\r\n onSelectWeek: {\r\n action: 'selected week',\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n portalContainerRef: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n optionContainerOffset: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n currentPeriod: { table: { disable: true } },\r\n defaultSelection: { table: { disable: true } },\r\n },\r\n parameters: {\r\n inspectComponent: WeekSelector,\r\n codeString: codeString,\r\n },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={13}\r\n currentPeriod={4}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 4\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={23}\r\n currentPeriod={5}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 5\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={28}\r\n currentPeriod={6}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 6\"\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={36}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Zomer\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n weeks: mockWeeks,\r\n weekPrefix: 'week',\r\n periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n ...defaultArgs,\r\n};\r\n\r\nconst TemplateWithRef: StoryFn<WeekSelectorProps> = (args) => {\r\n const handleSelectWeek = (weekNumber: number) => {\r\n args.onSelectWeek(weekNumber);\r\n };\r\n\r\n const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n return (\r\n <div\r\n ref={containerRef}\r\n style={{\r\n padding: '1rem',\r\n backgroundColor: '#EEE',\r\n display: 'flex',\r\n gap: '1rem',\r\n alignItems: 'flex-start',\r\n flexDirection: 'column',\r\n }}\r\n >\r\n <WeekSelector\r\n {...args}\r\n currentPeriod={1}\r\n onSelectWeek={handleSelectWeek}\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={45}\r\n currentPeriod={2}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 2\"\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n <WeekSelector\r\n {...args}\r\n defaultSelection={6}\r\n currentPeriod={3}\r\n onSelectWeek={handleSelectWeek}\r\n optionsHeader=\"Kies een planning - Blok 3\"\r\n portalContainerRef={containerRef}\r\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n optionContainerOffset={[-200, -250]}\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport const InAPortal = TemplateWithRef.bind({});\r\n\r\nInAPortal.args = {\r\n ...defaultArgs,\r\n};\r\n"],"mappings":";;;;AAoBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,cAAc;GACZ,QAAQ;GACR,OAAO,EACL,SAAS,IACV;GACF;EACD,oBAAoB,EAClB,OAAO,EACL,SAAS,IACV,EACF;EACD,uBAAuB,EACrB,OAAO,EACL,SAAS,IACV,EACF;EACD,eAAe,EAAE,OAAO,EAAE,SAAS,IAAM,EAAE;EAC3C,kBAAkB,EAAE,OAAO,EAAE,SAAS,IAAM,EAAE;EAC/C;CACD,YAAY;EACV,kBAAkB;EACN;EACb;CACF,EAEK,KAAwC,MAAS;CACrD,IAAM,KAAoB,MAAuB;EAC/C,EAAK,aAAa,EAAW;;CAG/B,OACE,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GAChB;YARH;GAUE,kBAAC,GAAD;IAAc,GAAI;IAAM,eAAe;IAAG,cAAc;IAAoB,CAAA;GAC5E,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,cAAc;IACd,eAAc;IACd,CAAA;GACE;;GAIJ,IAA0C;CAC9C,OAAO;CACP,YAAY;CACZ,cAAc;EAAC;EAAU;EAAU;EAAU;EAAU;EAAU;EAAU;EAAQ;CACnF,eAAe;CAChB,EAEY,IAAsB,EAAS,KAAK,EAAE,CAAC;AAEpD,EAAoB,OAAO,EACzB,GAAG,GACJ;AAqDD,IAAa,MAnDwC,MAAS;CAC5D,IAAM,KAAoB,MAAuB;EAC/C,EAAK,aAAa,EAAW;IAGzB,IAAe,EAAuB,KAAK;CAEjD,OACE,kBAAC,OAAD;EACE,KAAK;EACL,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;GAChB;YATH;GAWE,kBAAC,GAAD;IACE,GAAI;IACJ,eAAe;IACf,cAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACF,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,KAAK;IACnC,CAAA;GACE;;GAI+B,KAAK,EAAE,CAAC;AAEjD,EAAU,OAAO,EACf,GAAG,GACJ"}