npm - @uva-glass/component-library - Versions diffs - 1.65.0 → 2.0.0 - Mend

@uva-glass/component-library 1.65.0 → 2.0.0

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

Files changed (174) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\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';\n /* The size of the select box. /\n size?: 'small' \| '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}\n\n/* Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\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 });\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 onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {children}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAuCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,EAAA,CACnB;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAnB,GAAkB,cAAAI,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAP;AAAA,QACA,MAAAC;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,~~GACH~~;AAAA,EAAA,~~EACF~~,~~CAAA~~,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}
1	+ {"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\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';\n /* The size of the select box. /\n size?: 'small' \| '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}\n\n/* Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\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 });\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 onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {children}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAuCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,EAAA,CACnB;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAnB,GAAkB,cAAAI,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAP;AAAA,QACA,MAAAC;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } 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}\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 listboxId = useRef<string>(useId());\n\n const toggleListbox = () => {\n setIsOpen((status) => !status);\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) => {\n const selectedIndex = options.findIndex((option) => option.value === value.value);\n setActiveIndex(selectedIndex);\n setValue(value);\n setIsOpen(false);\n };\n\n if (defaultValue !== -1 && !value.value) {\n setSelectedValue(getValue(defaultValue));\n }\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 }}\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"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,~~CAAA~~,~~CAA0B,~~GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,~~GAAA~~,~~CAAI,~~GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,~~EAAA~~,~~CAAO,~~GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,~~EAAA~~,~~GAGzBC~~,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,~~EAAA~~,~~GAKfc~~,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,~~EAAA~~;~~AAGjB~~,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGP~~,GAEakB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY,OAAiB,OAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}
1	+ {"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } 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}\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 listboxId = useRef<string>(useId());\n\n const toggleListbox = () => {\n setIsOpen((status) => !status);\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) => {\n const selectedIndex = options.findIndex((option) => option.value === value.value);\n setActiveIndex(selectedIndex);\n setValue(value);\n setIsOpen(false);\n };\n\n if (defaultValue !== -1 && !value.value) {\n setSelectedValue(getValue(defaultValue));\n }\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 }}\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"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,EAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,IAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,GAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAC/B,GAEMC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,GAIEc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EACjB;AAEA,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EACH;AAEJ,GAEakB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY,OAAiB,OAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectButton.js","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';\n size?: 'small' \| 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const isFirstRender = useRef(true);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() \|\| {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\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 isOpen\n ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n }, [isOpen]);\n\n useEffect(() => {\n isFirstRender.current = false;\n\n return () => {\n isFirstRender.current = true;\n };\n }, []);\n\n useEffect(() => {\n if (onChange) onChange(selectedValue);\n }, [onChange, 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 })}\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"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,~~GAAA~~,~~IAAUP~~,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,~~CAAA~~,~~GAEzGC~~,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,~~QACF~~;~~AACA~~;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,~~IACJ~~;AAAA,~~EAAA~~;~~AAGF~~,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,~~SAC1D~~,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB;~~EAAM~~,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,~~EAAA~~,~~IAEzB~~,~~CAAE~~,~~CAAA,~~GAELY,EAAU,MAAM;AACV,IAAAlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,~~QACR~~;AAAA,~~MAAA~~;AAAA,IAAA;AAAA,~~EAEJ,~~EAAA,~~CAAA~~;AAEJ,CAAC;"}
1	+ {"version":3,"file":"SelectButton.js","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';\n size?: 'small' \| 'default';\n onChange?: (option: OptionValue) => void;\n buttonLabelProp?: string;\n buttonLabelBold?: boolean;\n disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n const buttonWrapper = useRef<HTMLSpanElement>(null);\n const isFirstRender = useRef(true);\n const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() \|\| {};\n\n const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\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 isOpen\n ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n }, [isOpen]);\n\n useEffect(() => {\n isFirstRender.current = false;\n\n return () => {\n isFirstRender.current = true;\n };\n }, []);\n\n useEffect(() => {\n if (onChange) onChange(selectedValue);\n }, [onChange, 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 })}\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"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAU,IAAAP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAC,GAE1GC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,KAAK,IAC/D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB,MAAM;AAAA,EAAA,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,EAAE,GAELY,EAAU,MAAM;AACV,IAAAlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectContainer.js","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"],"names":["SelectContainer","children","isOpen","setIsOpen","useSelect","listboxRef","useRef","onMouseEventOutside","useCallback","target","useEffect","jsx","styles"],"mappings":";;;;AAOO,MAAMA,IAAkB,CAAC,EAAE,UAAAC,QAAkC;AAClE,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAU,IAAIC,EAAU,GAClCC,IAAaC,EAAuB,IAAI,GAExCC,IAAsBC;AAAA,IAC1B,CAAC,EAAE,QAAAC,EAAA,MAAiC;AAClC,MAAI,CAACA,KAAU,CAACJ,EAAW,WAEtBA,EAAW,QAAQ,SAASI,CAAc,KAC7CN,EAAU,EAAK;AAAA,IAEnB;AAAA,IACA,CAACA,CAAS;AAAA,~~EAAA~~;~~AAGZ~~,SAAAO,EAAU,MAAM;AACd,QAAKR;AAEI,sBAAA,iBAAiB,SAASK,GAAqB,EAAI,GACnD,SAAA,iBAAiB,UAAUA,GAAqB,EAAI,GAEtD,MAAM;AACF,iBAAA,oBAAoB,SAASA,GAAqB,EAAI,GACtD,SAAA,oBAAoB,UAAUA,GAAqB,EAAI;AAAA,~~MAAA~~;AAAA,~~EAClE~~,GACC,CAACA,GAAqBL,CAAM,CAAC,GAG9B,gBAAAS,EAAC,SAAI,WAAWC,EAAO,0BAA0B,GAAG,KAAKP,GACtD,UAAAJ,~~EACH,CAAA~~;AAEJ;"}
1	+ {"version":3,"file":"SelectContainer.js","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"],"names":["SelectContainer","children","isOpen","setIsOpen","useSelect","listboxRef","useRef","onMouseEventOutside","useCallback","target","useEffect","jsx","styles"],"mappings":";;;;AAOO,MAAMA,IAAkB,CAAC,EAAE,UAAAC,QAAkC;AAClE,QAAM,EAAE,QAAAC,GAAQ,WAAAC,EAAU,IAAIC,EAAU,GAClCC,IAAaC,EAAuB,IAAI,GAExCC,IAAsBC;AAAA,IAC1B,CAAC,EAAE,QAAAC,EAAA,MAAiC;AAClC,MAAI,CAACA,KAAU,CAACJ,EAAW,WAEtBA,EAAW,QAAQ,SAASI,CAAc,KAC7CN,EAAU,EAAK;AAAA,IAEnB;AAAA,IACA,CAACA,CAAS;AAAA,EACZ;AAEA,SAAAO,EAAU,MAAM;AACd,QAAKR;AAEI,sBAAA,iBAAiB,SAASK,GAAqB,EAAI,GACnD,SAAA,iBAAiB,UAAUA,GAAqB,EAAI,GAEtD,MAAM;AACF,iBAAA,oBAAoB,SAASA,GAAqB,EAAI,GACtD,SAAA,oBAAoB,UAAUA,GAAqB,EAAI;AAAA,MAClE;AAAA,EAAA,GACC,CAACA,GAAqBL,CAAM,CAAC,GAG9B,gBAAAS,EAAC,SAAI,WAAWC,EAAO,0BAA0B,GAAG,KAAKP,GACtD,UAAAJ,GACH;AAEJ;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectOption.js","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;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, 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 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 <li\n className={clsx(styles['select-listbox-option'], {\n [styles['select-listbox-option--active']]: index === activeIndex,\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 );\n};\n"],"names":["SelectOption","option","index","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsx","clsx","styles"],"mappings":";;;;;AAgBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAkC;AACxE,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,~~MAAYC~~,~~KAE/FC~~,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,~~EAAA~~,~~GAGXK~~,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,~~IACJ~~;AAAA,~~EAAA~~;~~AAGF~~,SAAAO,EAAU,MAAM;;AACd,IAAIhB,MAAUK,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaL,GAAOI,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUR,EAAO,SACjCO,EAAeN,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOQ,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,QAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGrB,MAAUK;AAAA,MAAA,CACtD;AAAA,MAEA,GAAI,CAACN,EAAO,YAAY;AAAA,QACvB,SAAS,MAAMS,EAAiBT,CAAM;AAAA,QACtC,WAAWe;AAAA,QACX,UAAU;AAAA,QACV,MAAM;AAAA,QACN,iBAAiBP,EAAc,UAAUR,EAAO;AAAA,MAClD;AAAA,MACA,KAAKG;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,IAVI,GAAGF,EAAO,KAAK;AAAA,~~EAAA~~;~~AAa1B~~;"}
1	+ {"version":3,"file":"SelectOption.js","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;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, 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 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 <li\n className={clsx(styles['select-listbox-option'], {\n [styles['select-listbox-option--active']]: index === activeIndex,\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 );\n};\n"],"names":["SelectOption","option","index","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsx","clsx","styles"],"mappings":";;;;;AAgBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,QAAkC;AACxE,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAQ,IAAIC,EAAU,GAEzGC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EACjB,GAEMK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAIhB,MAAUK,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaL,GAAOI,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUR,EAAO,SACjCO,EAAeN,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOQ,EAAc,OAAOD,CAAc,CAAC,GAG3D,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,QAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGrB,MAAUK;AAAA,MAAA,CACtD;AAAA,MAEA,GAAI,CAACN,EAAO,YAAY;AAAA,QACvB,SAAS,MAAMS,EAAiBT,CAAM;AAAA,QACtC,WAAWe;AAAA,QACX,UAAU;AAAA,QACV,MAAM;AAAA,QACN,iBAAiBP,EAAc,UAAUR,EAAO;AAAA,MAClD;AAAA,MACA,KAAKG;AAAA,MAEJ,UAAAD;AAAA,IAAA;AAAA,IAVI,GAAGF,EAAO,KAAK;AAAA,EAWtB;AAEJ;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectOptionBox.js","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"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AACxF,QAAA,EAAE,OAAAC,GAAO,UAAAC,~~EAAa~~,~~IAAAH~~,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAGtD,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAS;AAAA,MAC5D,GAAIJ,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKH;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,EAAM,UAAU;AAAA,UAEnC,UAAAC;AAAA,QAAA;AAAA,~~MACH~~;AAAA,~~IAAA~~;AAAA,~~EAAA~~;~~AAGN~~,CAAC;"}
1	+ {"version":3,"file":"SelectOptionBox.js","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"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AACxF,QAAA,EAAE,OAAAC,GAAO,UAAAC,EAAA,IAAaH,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAGtD,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAS;AAAA,MAC5D,GAAIJ,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKH;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,EAAM,UAAU;AAAA,UAEnC,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ,CAAC;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Sortable.js","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;\n\nexport interface SortableProps {\n /** The elements to show inside the Sortable. /\n children: ReactElement[] \| string[];\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 /* The callback function that is invoked when new sorting takes place. */\n onSort?: (items: (string \| ReactElement)[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = ({ children, ItemHandlePlacement = 'left', scrollable, disabled, onSort }: SortableProps) => {\n return (\n <SortableProvider\n items={children}\n scrollable={scrollable}\n onSort={onSort}\n key={`sortable-with-children-${Children.count(children)}`}\n >\n {children.map((child, index) => (\n <SortableItem\n handlePlacement={ItemHandlePlacement}\n disabled={disabled \|\| Children.count(children) <= 1}\n index={index}\n key={`sortable-item-${index}`}\n >\n {child}\n </SortableItem>\n ))}\n </SortableProvider>\n );\n};\n"],"names":["Sortable","children","ItemHandlePlacement","scrollable","disabled","onSort","jsx","SortableProvider","child","index","SortableItem","Children"],"mappings":";;;;AAwBa,MAAAA,IAAW,CAAC,EAAE,UAAAC,GAAU,qBAAAC,IAAsB,QAAQ,YAAAC,GAAY,UAAAC,GAAU,QAAAC,QAErF,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAON;AAAA,IACP,YAAAE;AAAA,IACA,QAAAE;AAAA,IAGC,UAASJ,EAAA,IAAI,CAACO,GAAOC,MACpB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,iBAAiBR;AAAA,QACjB,UAAUE,KAAYO,EAAS,MAAMV,CAAQ,KAAK;AAAA,QAClD,OAAAQ;AAAA,QAGC,UAAAD;AAAA,MAAA;AAAA,MAFI,iBAAiBC,CAAK;AAAA,~~IAAA~~,~~CAI9B~~;AAAA,EAAA;AAAA,EAXI,0BAA0BE,EAAS,MAAMV,CAAQ,CAAC;~~AAAA~~;"}
1	+ {"version":3,"file":"Sortable.js","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;\n\nexport interface SortableProps {\n /** The elements to show inside the Sortable. /\n children: ReactElement[] \| string[];\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 /* The callback function that is invoked when new sorting takes place. */\n onSort?: (items: (string \| ReactElement)[]) => void;\n}\n\n// A component that renders a list of children that can be sorted with drag and drop.\nexport const Sortable = ({ children, ItemHandlePlacement = 'left', scrollable, disabled, onSort }: SortableProps) => {\n return (\n <SortableProvider\n items={children}\n scrollable={scrollable}\n onSort={onSort}\n key={`sortable-with-children-${Children.count(children)}`}\n >\n {children.map((child, index) => (\n <SortableItem\n handlePlacement={ItemHandlePlacement}\n disabled={disabled \|\| Children.count(children) <= 1}\n index={index}\n key={`sortable-item-${index}`}\n >\n {child}\n </SortableItem>\n ))}\n </SortableProvider>\n );\n};\n"],"names":["Sortable","children","ItemHandlePlacement","scrollable","disabled","onSort","jsx","SortableProvider","child","index","SortableItem","Children"],"mappings":";;;;AAwBa,MAAAA,IAAW,CAAC,EAAE,UAAAC,GAAU,qBAAAC,IAAsB,QAAQ,YAAAC,GAAY,UAAAC,GAAU,QAAAC,QAErF,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAON;AAAA,IACP,YAAAE;AAAA,IACA,QAAAE;AAAA,IAGC,UAASJ,EAAA,IAAI,CAACO,GAAOC,MACpB,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,iBAAiBR;AAAA,QACjB,UAAUE,KAAYO,EAAS,MAAMV,CAAQ,KAAK;AAAA,QAClD,OAAAQ;AAAA,QAGC,UAAAD;AAAA,MAAA;AAAA,MAFI,iBAAiBC,CAAK;AAAA,IAI9B,CAAA;AAAA,EAAA;AAAA,EAXI,0BAA0BE,EAAS,MAAMV,CAAQ,CAAC;AAYzD;"}

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

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as m, Fragment as i } from "react/jsx-runtime";
-import { fn as s } from "../../index-DQyNeMuh.js";
+import { fn as s } from "../../index-DWzkl4aY.js";
 import { Sortable as o } from "./Sortable.js";
 import { InputField as c } from "../InputField/InputField.js";
 import { Icon as d } from "../Icon/Icon.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Sortable.stories.js","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 =\n '<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {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};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IACJ,oJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,~~MACX~~;AAAA,~~IACF~~;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,~~MACX~~;AAAA,~~IACF~~;AAAA,~~EACF~~;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,~~EACF~~;~~AACF~~,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAG;AACb,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAU,EAAA,GAAGK,GAAO,UAAUF,~~EAAA~~,~~CAAA,~~GAErEG,IAAkBF,EAAS,KAAK,~~EAAE~~;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,~~EAAE~~;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAU,EAAA,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAI,EAAA,OAAO,EAAE,OAAO,OAAO,GAC1B,UAAC,gBAAAA,EAAAI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAO,EAAA,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,~~YAAA~~,~~CAAY~~,EACvC,CAAA;AAAA,KANaL,CAOf,CACD,~~EACH~~,~~CAAA,~~GAGWM,IAAsBR,EAAgB,KAAK,~~EAAE~~;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}
1	+ {"version":3,"file":"Sortable.stories.js","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 =\n '<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} disabled={disabled}> {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};\n"],"names":["codeString","Sortable_stories","Sortable","defaultArgs","fn","mockItems","Template","args","SortableExample","withHandleRight","TemplateComplex","jsx","item","jsxs","Fragment","InputField","Button","Icon","WithComplexChildren"],"mappings":";;;;;;;;AAYA,MAAMA,IACJ,oJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC;AAAA,EAC1C,qBAAqB;AAAA,EACrB,QAAQC,EAAG;AACb,GAEMC,IAAY,CAAC,UAAU,UAAU,UAAU,UAAU,QAAQ,GAE7DC,IAAmC,CAACC,wBAAUL,GAAU,EAAA,GAAGK,GAAO,UAAUF,GAAA,GAErEG,IAAkBF,EAAS,KAAK,CAAE,CAAA;AAC/CE,EAAgB,OAAO;AAAA,EACrB,GAAGL;AACL;AAEO,MAAMM,IAAkBH,EAAS,KAAK,CAAE,CAAA;AAC/CG,EAAgB,OAAO;AAAA,EACrB,GAAGN;AAAA,EACH,qBAAqB;AACvB;AAEA,MAAMO,IAA0C,CAACH,MAC/C,gBAAAI,EAACT,GAAU,EAAA,GAAGK,GACX,UAAAF,EAAU,IAAI,CAACO,MACd,gBAAAC,EAACC,GACC,EAAA,UAAA;AAAA,EAAA,gBAAAH,EAAC,OAAI,EAAA,OAAO,EAAE,OAAO,OAAO,GAC1B,UAAC,gBAAAA,EAAAI,GAAA,EAAsB,IAAIH,GAAM,aAAaA,EAAA,GAA7BA,CAAmC,GACtD;AAAA,EACA,gBAAAD,EAACK,GAAO,EAAA,SAAQ,cACd,UAAA,gBAAAL,EAACM,KAAK,MAAK,SAAQ,OAAM,YAAY,CAAA,EACvC,CAAA;AAAA,KANaL,CAOf,CACD,GACH,GAGWM,IAAsBR,EAAgB,KAAK,CAAE,CAAA;AAC1DQ,EAAoB,OAAO;AAAA,EACzB,GAAGf;AACL;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"actions.js","sources":["../../../src/components/Sortable/actions.ts"],"sourcesContent":["import {\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 ClearDraggingSourceAction = {\n type: typeof CLEAR_DRAGGING_SOURCE;\n};\n\ntype ClearDraggingTargetAction = {\n type: typeof CLEAR_DRAGGING_TARGET;\n};\n\ntype DragEndAction = {\n type: typeof DRAG_END;\n};\n\ntype DragStartAction = {\n type: typeof DRAG_START;\n payload: number;\n};\n\ntype DropAction = {\n type: typeof DROP;\n payload: number;\n};\n\ntype MoveToPositionAction = {\n type: typeof MOVE_TO_POSITION;\n payload: number;\n};\n\ntype ResetAction = {\n type: typeof RESET;\n};\n\ntype SetCloneAction = {\n type: typeof SET_CLONE;\n payload: Element;\n};\n\ntype SetDraggingSourceAction = {\n type: typeof SET_DRAGGING_SOURCE;\n payload: number;\n};\n\ntype SetDraggingTargetAction = {\n type: typeof SET_DRAGGING_TARGET;\n payload: number;\n};\n\nexport type Actions =\n \| ClearDraggingSourceAction\n \| ClearDraggingTargetAction\n \| DragEndAction\n \| DragStartAction\n \| DropAction\n \| MoveToPositionAction\n \| ResetAction\n \| SetCloneAction\n \| SetDraggingSourceAction\n \| SetDraggingTargetAction;\n\nexport const setClone = (payload: SetCloneAction['payload']): SetCloneAction => ({\n type: SET_CLONE,\n payload,\n});\n\nexport const clearDraggingSource = (): ClearDraggingSourceAction => ({ type: CLEAR_DRAGGING_SOURCE });\n\nexport const clearDraggingTarget = (): ClearDraggingTargetAction => ({ type: CLEAR_DRAGGING_TARGET });\n\nexport const dragEnd = (): DragEndAction => ({ type: DRAG_END });\n\nexport const dragStart = (draggingItemIndex: DragStartAction['payload']): DragStartAction => ({\n type: DRAG_START,\n payload: draggingItemIndex,\n});\n\nexport const drop = (targetItemIndex: DropAction['payload']): DropAction => ({\n type: DROP,\n payload: targetItemIndex,\n});\n\nexport const moveToPosition = (targetItemIndex: MoveToPositionAction['payload']): MoveToPositionAction => ({\n type: MOVE_TO_POSITION,\n payload: targetItemIndex,\n});\n\nexport const reset = (): ResetAction => ({ type: RESET });\n\nexport const setDraggingSource = (sourceItemIndex: SetDraggingSourceAction['payload']): SetDraggingSourceAction => ({\n type: SET_DRAGGING_SOURCE,\n payload: sourceItemIndex,\n});\n\nexport const setDraggingTarget = (targetItemIndex: SetDraggingTargetAction['payload']): SetDraggingTargetAction => ({\n type: SET_DRAGGING_TARGET,\n payload: targetItemIndex,\n});\n"],"names":["setClone","payload","SET_CLONE","clearDraggingSource","CLEAR_DRAGGING_SOURCE","clearDraggingTarget","CLEAR_DRAGGING_TARGET","dragEnd","DRAG_END","dragStart","draggingItemIndex","DRAG_START","drop","targetItemIndex","DROP","moveToPosition","MOVE_TO_POSITION","reset","RESET","setDraggingSource","sourceItemIndex","SET_DRAGGING_SOURCE","setDraggingTarget","SET_DRAGGING_TARGET"],"mappings":";AAuEa,MAAAA,IAAW,CAACC,OAAwD;AAAA,EAC/E,MAAMC;AAAA,EACN,SAAAD;AACF,IAEaE,IAAsB,OAAkC,EAAE,MAAMC,~~MAEhEC~~,IAAsB,OAAkC,EAAE,MAAMC,~~MAEhEC~~,IAAU,OAAsB,EAAE,MAAMC,~~MAExCC~~,IAAY,CAACC,OAAoE;AAAA,EAC5F,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAO,CAACC,OAAwD;AAAA,EAC3E,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAiB,CAACF,OAA4E;AAAA,EACzG,MAAMG;AAAA,EACN,SAASH;AACX,IAEaI,IAAQ,OAAoB,EAAE,MAAMC,~~MAEpCC~~,IAAoB,CAACC,OAAkF;AAAA,EAClH,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAoB,CAACT,OAAkF;AAAA,EAClH,MAAMU;AAAA,EACN,SAASV;AACX;"}
1	+ {"version":3,"file":"actions.js","sources":["../../../src/components/Sortable/actions.ts"],"sourcesContent":["import {\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 ClearDraggingSourceAction = {\n type: typeof CLEAR_DRAGGING_SOURCE;\n};\n\ntype ClearDraggingTargetAction = {\n type: typeof CLEAR_DRAGGING_TARGET;\n};\n\ntype DragEndAction = {\n type: typeof DRAG_END;\n};\n\ntype DragStartAction = {\n type: typeof DRAG_START;\n payload: number;\n};\n\ntype DropAction = {\n type: typeof DROP;\n payload: number;\n};\n\ntype MoveToPositionAction = {\n type: typeof MOVE_TO_POSITION;\n payload: number;\n};\n\ntype ResetAction = {\n type: typeof RESET;\n};\n\ntype SetCloneAction = {\n type: typeof SET_CLONE;\n payload: Element;\n};\n\ntype SetDraggingSourceAction = {\n type: typeof SET_DRAGGING_SOURCE;\n payload: number;\n};\n\ntype SetDraggingTargetAction = {\n type: typeof SET_DRAGGING_TARGET;\n payload: number;\n};\n\nexport type Actions =\n \| ClearDraggingSourceAction\n \| ClearDraggingTargetAction\n \| DragEndAction\n \| DragStartAction\n \| DropAction\n \| MoveToPositionAction\n \| ResetAction\n \| SetCloneAction\n \| SetDraggingSourceAction\n \| SetDraggingTargetAction;\n\nexport const setClone = (payload: SetCloneAction['payload']): SetCloneAction => ({\n type: SET_CLONE,\n payload,\n});\n\nexport const clearDraggingSource = (): ClearDraggingSourceAction => ({ type: CLEAR_DRAGGING_SOURCE });\n\nexport const clearDraggingTarget = (): ClearDraggingTargetAction => ({ type: CLEAR_DRAGGING_TARGET });\n\nexport const dragEnd = (): DragEndAction => ({ type: DRAG_END });\n\nexport const dragStart = (draggingItemIndex: DragStartAction['payload']): DragStartAction => ({\n type: DRAG_START,\n payload: draggingItemIndex,\n});\n\nexport const drop = (targetItemIndex: DropAction['payload']): DropAction => ({\n type: DROP,\n payload: targetItemIndex,\n});\n\nexport const moveToPosition = (targetItemIndex: MoveToPositionAction['payload']): MoveToPositionAction => ({\n type: MOVE_TO_POSITION,\n payload: targetItemIndex,\n});\n\nexport const reset = (): ResetAction => ({ type: RESET });\n\nexport const setDraggingSource = (sourceItemIndex: SetDraggingSourceAction['payload']): SetDraggingSourceAction => ({\n type: SET_DRAGGING_SOURCE,\n payload: sourceItemIndex,\n});\n\nexport const setDraggingTarget = (targetItemIndex: SetDraggingTargetAction['payload']): SetDraggingTargetAction => ({\n type: SET_DRAGGING_TARGET,\n payload: targetItemIndex,\n});\n"],"names":["setClone","payload","SET_CLONE","clearDraggingSource","CLEAR_DRAGGING_SOURCE","clearDraggingTarget","CLEAR_DRAGGING_TARGET","dragEnd","DRAG_END","dragStart","draggingItemIndex","DRAG_START","drop","targetItemIndex","DROP","moveToPosition","MOVE_TO_POSITION","reset","RESET","setDraggingSource","sourceItemIndex","SET_DRAGGING_SOURCE","setDraggingTarget","SET_DRAGGING_TARGET"],"mappings":";AAuEa,MAAAA,IAAW,CAACC,OAAwD;AAAA,EAC/E,MAAMC;AAAA,EACN,SAAAD;AACF,IAEaE,IAAsB,OAAkC,EAAE,MAAMC,EAAsB,IAEtFC,IAAsB,OAAkC,EAAE,MAAMC,EAAsB,IAEtFC,IAAU,OAAsB,EAAE,MAAMC,EAAS,IAEjDC,IAAY,CAACC,OAAoE;AAAA,EAC5F,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAO,CAACC,OAAwD;AAAA,EAC3E,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAiB,CAACF,OAA4E;AAAA,EACzG,MAAMG;AAAA,EACN,SAASH;AACX,IAEaI,IAAQ,OAAoB,EAAE,MAAMC,EAAM,IAE1CC,IAAoB,CAACC,OAAkF;AAAA,EAClH,MAAMC;AAAA,EACN,SAASD;AACX,IAEaE,IAAoB,CAACT,OAAkF;AAAA,EAClH,MAAMU;AAAA,EACN,SAASV;AACX;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableHandle.js","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"],"names":["noSupportTouch","SortableHandle","placement","styles","Icon"],"mappings":";;;AAOA,MAAMA,IAAiB,kBAAkB,WAAW,SAAS;AAE7C,SAAAC,EAAe,EAAE,WAAAC,KAAkC;AACjE,SAAIF,IAAuB,yBAGxB,OAAI,EAAA,WAAW,GAAGG,EAAO,gBAAmB,IAAIA,EAAO,qBAAqBD,CAAS,EAAE,CAAC,IACvF,4BAACE,GAAK,EAAA,MAAK,~~QAAO~~,~~EACpB~~,~~CAAA~~;AAEJ;"}
1	+ {"version":3,"file":"SortableHandle.js","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"],"names":["noSupportTouch","SortableHandle","placement","styles","Icon"],"mappings":";;;AAOA,MAAMA,IAAiB,kBAAkB,WAAW,SAAS;AAE7C,SAAAC,EAAe,EAAE,WAAAC,KAAkC;AACjE,SAAIF,IAAuB,yBAGxB,OAAI,EAAA,WAAW,GAAGG,EAAO,gBAAmB,IAAIA,EAAO,qBAAqBD,CAAS,EAAE,CAAC,IACvF,4BAACE,GAAK,EAAA,MAAK,OAAO,CAAA,GACpB;AAEJ;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SortableItem.js","sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\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 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, 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={styles['sortable__sort-item']}\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"],"names":["ACCESS_KEYS","noSupportTouch","dragImage","SortableItem","children","handlePlacement","disabled","index","clone","dragEnd","draggingSource","draggingTarget","dragStart","drop","maxIndex","moveToPosition","setClone","setDraggingSource","useSortable","grabbing","setGrabbing","useState","moving","setmoving","itemRef","useRef","hasIndex","useEffect","handleDragStart","event","cloned","styles","handleDragEnd","handleKeyUp","code","newTarget","handleMove","direction","jsxs","jsx","SortableHandle","Fragment","Icon"],"mappings":";;;;;;AAiBA,MAAMA,IAAc,CAAC,SAAS,aAAa,SAAS,GAC9CC,IAAiB,kBAAkB,WAAW,SAAS,iBACvDC,IAAY,IAAI,MAAM,GAAG,CAAC;AAEhCA,EAAU;AAER;AAEK,SAASC,EAAa,EAAE,UAAAC,GAAU,iBAAAC,GAAiB,UAAAC,GAAU,OAAAC,KAA4B;AACxF,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA,MACEC,EAAY,GACV,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpCG,IAAUC,EAAuB,IAAI,GACrCC,IAAWnB,MAAU,UAAaA,KAAS;AAEjD,EAAAoB,EAAU,MAAM;AACV,IAACH,EAAQ,WACT,WAAW,SAAS,kBAAkBA,EAAQ,YAE9CjB,MAAUI,KAAkBA,MAAmBD,KAEjDc,EAAQ,QAAQ,~~SAChBD~~,EAAU,EAAI,KAEdA,EAAU,EAAK;AAAA,KAEhB,CAAChB,GAAOI,GAAgBD,GAAgBO,CAAiB,CAAC;AAE7D,WAASW,EAAgBC,GAAkC;AAMzD,QALAA,EAAM,gBAAgB,GAEtBA,EAAM,aAAa,gBAAgB,QACnCA,EAAM,aAAa,aAAa3B,GAAW,GAAG,CAAC,GAE3CsB,EAAQ,SAAS;AACnB,YAAMM,IAASN,EAAQ,QAAQ,UAAU,EAAI;AAE7C,MAAAM,EAAO,UAAU,IAAIC,EAAO,4BAA4B,CAAC,GAEzDf,EAASc,CAAM;AAAA,~~IACjB~~;~~AAEI~~,IAAAJ,OAAoBnB,CAAK,GAC7Ba,EAAY,EAAI;AAAA,~~EAClB~~;~~AAEA~~,WAASY,IAAgB;AACvB,IAAIb,MAEAX,KAAO,SAAS,KAAK,YAAYA,CAAK,GAE1CY,EAAY,EAAK,GACTX;~~EACV~~;~~AAEA~~,WAASwB,EAAYJ,GAA2C;AACxD,UAAA,EAAE,MAAAK,~~EAAS,IAAAL~~;AAEb,QAAAK,MAAS,SAASxB,MAAmB,QAAW;AAC1C,MAAAD;AACR;AAAA,~~IACF~~;~~AAIA~~,QAFIT,EAAY,SAASkC,CAAI,MAAM,MAE/B,CAACR,EAAU;AAEf,QAAIQ,MAAS,SAAS;AACpB,MAAIZ,KACFC,EAAU,EAAK,GACPd,~~QAERc~~,EAAU,EAAI,GACdX,EAAUL,CAAK;AAGjB;AAAA,~~IACF~~;~~AAEA~~,QAAIG,MAAmB,OAAW;AAElC,UAAMyB,IAAYD,MAAS,YAAY3B,IAAQ,IAAIA,IAAQ;AAEvD,IAAA4B,IAAY,KAAKA,IAAYrB,KAEjCC,EAAeoB,CAAS;AAAA,~~EAC1B~~;~~AAEA~~,WAASC,EAAWP,GAAsC;AAGxD,QAFAA,EAAM,eAAe,GAEjB,CAACH,EAAU;AAEf,IAAAd,EAAUL,CAAK;AAEf,UAAM,EAAE,WAAA8B,~~EAAc~~,~~IAAAR~~,EAAM,cAAc,SACpCM,IAAYE,MAAc,OAAO9B,IAAQ,IAAIA,IAAQ;AAE3D,IAAAM,EAAKsB,CAAS;AAAA,~~EAChB~~;~~AAGE~~,SAAA,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWP,EAAO,qBAAqB;AAAA,MACvC,WAAW,CAACzB;AAAA,MACZ,WAAW0B;AAAA,MACX,aAAaJ;AAAA,MACb,gBAAgBK;AAAA,MAChB,KAAKT;AAAA,MACL,MAAK;AAAA,MAEL,UAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAGP,EAAO,+BAA+B,CAAC,IAAIA,EAAO,yCAAyC1B,CAAe,EAAE,CAAC;AAAA,YAE1H,UAAA;AAAA,cAAAA,MAAoB,UAAU,gBAAAkC,EAACC,GAAe,EAAA,WAAU,QAAO;AAAA,cAC/DpC;AAAA,cACAC,MAAoB,WAAY,gBAAAkC,EAAAC,GAAA,EAAe,WAAU,~~SAAQ~~;AAAA,YAAA;AAAA,UAAA;AAAA,QACpE;AAAA,QAEC,gBAAAD,EAAA,OAAA,EAAI,WAAWR,EAAO,uCAAuC,GAAG,cAAY9B,GAC1E,UAAC,CAAAK,KAAYoB,KACZ,gBAAAa,EAAAE,GAAA,EACG,eAEI,gBAAAH,EAAAG,GAAA,EAAA,UAAA;AAAA,UAAAlC,IAAQ,KACP,gBAAA+B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAGP,EAAO,6BAA6B,CAAC,IAAIA,EAAO,iCAAiC,CAAC;AAAA,cAChG,kBAAe;AAAA,cACf,gBAAgBK;AAAA,cAEhB,UAAA;AAAA,gBAAC,gBAAAG,EAAA,OAAA,EAAI,WAAWR,EAAO,mCAAmC,GACxD,UAAC,gBAAAQ,EAAAG,GAAA,EAAK,MAAK,eAAA,CAAe,EAC5B,CAAA;AAAA,kCACC,QAAK,EAAA,WAAWX,EAAO,2BAA2B,GAAG,UAAO,~~WAAA~~;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/D;AAAA,UAGDxB,IAAQO,KACP,gBAAAwB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAGP,EAAO,6BAA6B,CAAC,IAAIA,EAAO,mCAAmC,CAAC;AAAA,cAClG,kBAAe;AAAA,cACf,gBAAgBK;AAAA,cAEhB,UAAA;AAAA,gBAAC,gBAAAG,EAAA,OAAA,EAAI,WAAWR,EAAO,mCAAmC,GACxD,UAAC,gBAAAQ,EAAAG,GAAA,EAAK,MAAK,eAAA,CAAe,EAC5B,CAAA;AAAA,kCACC,QAAK,EAAA,WAAWX,EAAO,2BAA2B,GAAG,UAAS,~~aAAA~~;AAAA,cAAA;AAAA,YAAA;AAAA,~~UACjE~~;AAAA,~~QAAA~~,EAEJ,CAAA,EAEJ,CAAA,~~GAEJ~~;AAAA,MAAA;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGN~~;"}
1	+ {"version":3,"file":"SortableItem.js","sources":["../../../../src/components/Sortable/components/SortableItem.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { DragEvent, MouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';\nimport type { SortableHandleProps } from './SortableHandle';\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 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, 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={styles['sortable__sort-item']}\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"],"names":["ACCESS_KEYS","noSupportTouch","dragImage","SortableItem","children","handlePlacement","disabled","index","clone","dragEnd","draggingSource","draggingTarget","dragStart","drop","maxIndex","moveToPosition","setClone","setDraggingSource","useSortable","grabbing","setGrabbing","useState","moving","setmoving","itemRef","useRef","hasIndex","useEffect","handleDragStart","event","cloned","styles","handleDragEnd","handleKeyUp","code","newTarget","handleMove","direction","jsxs","jsx","SortableHandle","Fragment","Icon"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sortableReducer.js","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"],"names":["initialState","getReorderedList","from","to","arr","getReorderedListWithPlaceholder","jsx","sortableReducer","state","action","stateWithSource","SET_CLONE","DRAG_START","DRAG_END","RESET","DROP","sortableItems","indices","props","SET_DRAGGING_TARGET","SET_DRAGGING_SOURCE","MOVE_TO_POSITION","CLEAR_DRAGGING_TARGET","CLEAR_DRAGGING_SOURCE"],"mappings":";;AAkCO,MAAMA,IAAe;AAAA,EAC1B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,SAAS,CAAC;AAAA,EACV,iBAAiB,CAAC;AAAA,EAClB,UAAU;AAAA,EACV,eAAe,~~CAAC~~;~~AAClB~~,GAEMC,IAAmB,CAACC,GAAcC,MAAeC,OACrDF,MAASC,KAAYC,EAAI,OAAOD,GAAI,GAAG,GAAGC,EAAI,OAAOF,GAAM,CAAC,CAAC,GAAGE;AAElE,SAASC,EAAgCH,GAAcC,MAAeC,GAAoB;AACpF,SAAAA,EAAA,OAAOF,GAAM,CAAC,GAEX,CAAC,GAAGE,EAAI,OAAOD,GAAI,GAAG,gBAAAG,EAAC,QAAK,CAAA,CAAA,CAAE,GAAG,GAAGF,CAAG;AAChD;AAEO,MAAMG,IAAkB,CAACC,IAA2BR,GAAcS,MAAuC;AAC9G,QAAMC,IAAkBF;AAExB,UAAQC,EAAO,MAAM;AAAA,IACnB,KAAKE;AACI,aAAA;AAAA,QACL,GAAGH;AAAA,QACH,OAAOC,EAAO;AAAA,~~MAAA~~;AAAA,~~IAIlB~~,KAAKG;AACI,aAAA;AAAA,QACL,GAAGJ;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,iBAAiBD,EAAM;AAAA,~~MAAA~~;AAAA,~~IAI3B~~,KAAKK;AACI,aAAA;AAAA,QACL,GAAGL;AAAA,QACH,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,~~MAAA~~;AAAA,~~IAIpB~~,KAAKM;AACI,aAAA;AAAA,QACL,GAAGN;AAAA,QACH,gBAAgB;AAAA,QAChB,eAAeA,EAAM;AAAA,~~MAAA~~;AAAA,~~IAIzB~~,KAAKO,GAAM;AACH,YAAAC,IAAgBf,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,eAAe,GACzGS,IAAUD,EAAc,IAAI,CAAC,EAAE,OAAAE,~~QAAYA~~,EAAM,KAAK;AAErD,aAAA;AAAA,QACL,GAAGV;AAAA,QACH,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,SAAAS;AAAA,QACA,eAAAD;AAAA,~~MAAA~~;AAAA,~~IAEJ~~;AAAA,~~IAEA~~,KAAKG;AACI,aAAA;AAAA,QACL,GAAGX;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,eAAeJ;AAAA,UACbK,EAAgB;AAAA,UAChBD,EAAO;AAAA,UACP,GAAGD,EAAM;AAAA,~~QACX~~;AAAA,~~MAAA~~;AAAA,~~IAIJ~~,KAAKY;AACI,aAAA;AAAA,QACL,GAAGZ;AAAA,QACH,gBAAgBC,EAAO;AAAA,~~MAAA~~;AAAA,~~IAI3B~~,KAAKY;AACI,aAAA;AAAA,QACL,GAAGb;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,gBAAgBA,EAAO;AAAA,QACvB,eAAeR,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,aAAa;AAAA,~~MAAA~~;AAAA,~~IAI1G~~,KAAKc;AACI,aAAA;AAAA,QACL,GAAGd;AAAA,QACH,gBAAgB;AAAA,~~MAAA~~;AAAA,~~IAGpB~~,KAAKe;AACI,aAAA;AAAA,QACL,GAAGf;AAAA,QACH,gBAAgB;AAAA,~~MAAA~~;AAAA,~~IAGpB~~;AACS,aAAAA;AAAA,~~EACX~~;~~AACF~~;"}
1	+ {"version":3,"file":"sortableReducer.js","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"],"names":["initialState","getReorderedList","from","to","arr","getReorderedListWithPlaceholder","jsx","sortableReducer","state","action","stateWithSource","SET_CLONE","DRAG_START","DRAG_END","RESET","DROP","sortableItems","indices","props","SET_DRAGGING_TARGET","SET_DRAGGING_SOURCE","MOVE_TO_POSITION","CLEAR_DRAGGING_TARGET","CLEAR_DRAGGING_SOURCE"],"mappings":";;AAkCO,MAAMA,IAAe;AAAA,EAC1B,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,SAAS,CAAC;AAAA,EACV,iBAAiB,CAAC;AAAA,EAClB,UAAU;AAAA,EACV,eAAe,CAAA;AACjB,GAEMC,IAAmB,CAACC,GAAcC,MAAeC,OACrDF,MAASC,KAAYC,EAAI,OAAOD,GAAI,GAAG,GAAGC,EAAI,OAAOF,GAAM,CAAC,CAAC,GAAGE;AAElE,SAASC,EAAgCH,GAAcC,MAAeC,GAAoB;AACpF,SAAAA,EAAA,OAAOF,GAAM,CAAC,GAEX,CAAC,GAAGE,EAAI,OAAOD,GAAI,GAAG,gBAAAG,EAAC,QAAK,CAAA,CAAA,CAAE,GAAG,GAAGF,CAAG;AAChD;AAEO,MAAMG,IAAkB,CAACC,IAA2BR,GAAcS,MAAuC;AAC9G,QAAMC,IAAkBF;AAExB,UAAQC,EAAO,MAAM;AAAA,IACnB,KAAKE;AACI,aAAA;AAAA,QACL,GAAGH;AAAA,QACH,OAAOC,EAAO;AAAA,MAChB;AAAA,IAGF,KAAKG;AACI,aAAA;AAAA,QACL,GAAGJ;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,iBAAiBD,EAAM;AAAA,MACzB;AAAA,IAGF,KAAKK;AACI,aAAA;AAAA,QACL,GAAGL;AAAA,QACH,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAClB;AAAA,IAGF,KAAKM;AACI,aAAA;AAAA,QACL,GAAGN;AAAA,QACH,gBAAgB;AAAA,QAChB,eAAeA,EAAM;AAAA,MACvB;AAAA,IAGF,KAAKO,GAAM;AACH,YAAAC,IAAgBf,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,eAAe,GACzGS,IAAUD,EAAc,IAAI,CAAC,EAAE,OAAAE,EAAM,MAAMA,EAAM,KAAK;AAErD,aAAA;AAAA,QACL,GAAGV;AAAA,QACH,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,SAAAS;AAAA,QACA,eAAAD;AAAA,MACF;AAAA,IAAA;AAAA,IAGF,KAAKG;AACI,aAAA;AAAA,QACL,GAAGX;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,eAAeJ;AAAA,UACbK,EAAgB;AAAA,UAChBD,EAAO;AAAA,UACP,GAAGD,EAAM;AAAA,QAAA;AAAA,MAEb;AAAA,IAGF,KAAKY;AACI,aAAA;AAAA,QACL,GAAGZ;AAAA,QACH,gBAAgBC,EAAO;AAAA,MACzB;AAAA,IAGF,KAAKY;AACI,aAAA;AAAA,QACL,GAAGb;AAAA,QACH,gBAAgBC,EAAO;AAAA,QACvB,gBAAgBA,EAAO;AAAA,QACvB,eAAeR,EAAiBS,EAAgB,gBAAgBD,EAAO,SAAS,GAAGD,EAAM,aAAa;AAAA,MACxG;AAAA,IAGF,KAAKc;AACI,aAAA;AAAA,QACL,GAAGd;AAAA,QACH,gBAAgB;AAAA,MAClB;AAAA,IAEF,KAAKe;AACI,aAAA;AAAA,QACL,GAAGf;AAAA,QACH,gBAAgB;AAAA,MAClB;AAAA,IAEF;AACS,aAAAA;AAAA,EAAA;AAEb;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n /** The `aria-valuetext` of the spinner. /\n ariaValueText: string;\n /* Delay in milliseconds after which the spinner becomes visible. The default is `250`. /\n showAfterMs?: number;\n}\n\n/* Represents a component to display a spinner. */\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n useEffect(() => {\n if (showAfterMs === 0) {\n return;\n }\n const t = window.setTimeout(() => {\n setVisible(true);\n }, showAfterMs);\n\n return () => {\n window.clearTimeout(t);\n };\n });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div className={styles['spinner-container']}>\n <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n </div>\n );\n};\n"],"names":["DEFAULT_DELAY_IN_MS","Spinner","ariaValueText","showAfterMs","visible","setVisible","useState","useEffect","t","styles"],"mappings":";;;;;;GAIMA,IAAsB,KAUfC,IAAU,CAAC,EAAE,eAAAC,GAAe,aAAAC,IAAcH,QAAwC;AACvF,QAAA,CAACI,GAASC,CAAU,IAAIC,EAAS,MAAOH,MAAgB,CAAiB;AAe/E,SAbAI,EAAU,MAAM;AACd,QAAIJ,MAAgB;AAClB;AAEI,UAAAK,IAAI,OAAO,WAAW,MAAM;AAChC,MAAAH,EAAW,EAAI;AAAA,OACdF,CAAW;AAEd,WAAO,MAAM;AACX,aAAO,aAAaK,CAAC;AAAA,~~IAAA~~;AAAA,~~EACvB~~,CACD,GAEIJ,sBAKF,OAAI,EAAA,WAAWK,EAAO,mBAAmB,GACxC,4BAAC,OAAI,EAAA,WAAWA,EAAO,SAAY,MAAK,eAAc,cAAW,WAAU,kBAAgBP,~~GAAe~~,~~EAC5G,~~CAAA,IANO;AAQX;"}
1	+ {"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n /** The `aria-valuetext` of the spinner. /\n ariaValueText: string;\n /* Delay in milliseconds after which the spinner becomes visible. The default is `250`. /\n showAfterMs?: number;\n}\n\n/* Represents a component to display a spinner. */\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n useEffect(() => {\n if (showAfterMs === 0) {\n return;\n }\n const t = window.setTimeout(() => {\n setVisible(true);\n }, showAfterMs);\n\n return () => {\n window.clearTimeout(t);\n };\n });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div className={styles['spinner-container']}>\n <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n </div>\n );\n};\n"],"names":["DEFAULT_DELAY_IN_MS","Spinner","ariaValueText","showAfterMs","visible","setVisible","useState","useEffect","t","styles"],"mappings":";;;;;;GAIMA,IAAsB,KAUfC,IAAU,CAAC,EAAE,eAAAC,GAAe,aAAAC,IAAcH,QAAwC;AACvF,QAAA,CAACI,GAASC,CAAU,IAAIC,EAAS,MAAOH,MAAgB,CAAiB;AAe/E,SAbAI,EAAU,MAAM;AACd,QAAIJ,MAAgB;AAClB;AAEI,UAAAK,IAAI,OAAO,WAAW,MAAM;AAChC,MAAAH,EAAW,EAAI;AAAA,OACdF,CAAW;AAEd,WAAO,MAAM;AACX,aAAO,aAAaK,CAAC;AAAA,IACvB;AAAA,EAAA,CACD,GAEIJ,sBAKF,OAAI,EAAA,WAAWK,EAAO,mBAAmB,GACxC,4BAAC,OAAI,EAAA,WAAWA,EAAO,SAAY,MAAK,eAAc,cAAW,WAAU,kBAAgBP,EAAe,CAAA,GAC5G,IANO;AAQX;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.stories.js","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"],"names":["codeString","Spinner_stories","Spinner","Template","args","jsx","SpinnerExample"],"mappings":";;AAKA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,~~IACX~~;AAAA,~~EACF~~;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,~~EACF~~;~~AACF~~,GAEMG,IAAkC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAS,GAAGE,~~EAAM~~,~~CAAA,~~GAExDE,IAAiBH,EAAS,KAAK,~~EAAE~~;AAC9CG,EAAe,OAAO;AAAA,EACpB,eAAe;AAAA,EACf,aAAa;AACf;"}
1	+ {"version":3,"file":"Spinner.stories.js","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"],"names":["codeString","Spinner_stories","Spinner","Template","args","jsx","SpinnerExample"],"mappings":";;AAKA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAkC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAS,GAAGE,GAAM,GAExDE,IAAiBH,EAAS,KAAK,CAAE,CAAA;AAC9CG,EAAe,OAAO;AAAA,EACpB,eAAe;AAAA,EACf,aAAa;AACf;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusPill.js","sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n /** The status to convey. /\n status: 'possible' \| 'impossible' \| 'new';\n /* The variant of the pill. /\n variant?: 'default' \| 'bar';\n /* A description of the status. /\n label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n possible: 'CheckCircleFillMini',\n impossible: 'CrossCircleFillMini',\n};\n\n/* Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n return (\n <span\n className={clsx(\n styles['status-pill'],\n styles[`status-pill__${status}`],\n variant !== 'default' && styles[`status-pill--${variant}`]\n )}\n >\n {status !== 'new' && <Icon name={iconNameMap[status]!} title={status} size={16} />}\n {label}\n </span>\n );\n}\n"],"names":["iconNameMap","StatusPill","status","variant","label","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;GAiBMA,IAA6E;AAAA,EACjF,UAAU;AAAA,EACV,YAAY;AACd;AAGO,SAASC,EAAW,EAAE,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,KAA0B;AAEhF,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,aAAa;AAAA,QACpBA,EAAO,gBAAgBL,CAAM,EAAE;AAAA,QAC/BC,MAAY,aAAaI,EAAO,gBAAgBJ,CAAO,EAAE;AAAA,MAC3D;AAAA,MAEC,UAAA;AAAA,QAAWD,MAAA,SAAU,gBAAAM,EAAAC,GAAA,EAAK,MAAMT,EAAYE,CAAM,GAAI,OAAOA,GAAQ,MAAM,GAAI,CAAA;AAAA,QAC/EE;AAAA,MAAA;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGP~~;"}
1	+ {"version":3,"file":"StatusPill.js","sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './StatusPill.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface StatusPillProps {\n /** The status to convey. /\n status: 'possible' \| 'impossible' \| 'new';\n /* The variant of the pill. /\n variant?: 'default' \| 'bar';\n /* A description of the status. /\n label: string;\n}\n\nconst iconNameMap: Partial<Record<StatusPillProps['status'], IconProps['name']>> = {\n possible: 'CheckCircleFillMini',\n impossible: 'CrossCircleFillMini',\n};\n\n/* Represents a component for a status pill. */\nexport function StatusPill({ status, variant = 'default', label }: StatusPillProps) {\n return (\n <span\n className={clsx(\n styles['status-pill'],\n styles[`status-pill__${status}`],\n variant !== 'default' && styles[`status-pill--${variant}`]\n )}\n >\n {status !== 'new' && <Icon name={iconNameMap[status]!} title={status} size={16} />}\n {label}\n </span>\n );\n}\n"],"names":["iconNameMap","StatusPill","status","variant","label","jsxs","clsx","styles","jsx","Icon"],"mappings":";;;;;;;;;GAiBMA,IAA6E;AAAA,EACjF,UAAU;AAAA,EACV,YAAY;AACd;AAGO,SAASC,EAAW,EAAE,QAAAC,GAAQ,SAAAC,IAAU,WAAW,OAAAC,KAA0B;AAEhF,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,aAAa;AAAA,QACpBA,EAAO,gBAAgBL,CAAM,EAAE;AAAA,QAC/BC,MAAY,aAAaI,EAAO,gBAAgBJ,CAAO,EAAE;AAAA,MAC3D;AAAA,MAEC,UAAA;AAAA,QAAWD,MAAA,SAAU,gBAAAM,EAAAC,GAAA,EAAK,MAAMT,EAAYE,CAAM,GAAI,OAAOA,GAAQ,MAAM,GAAI,CAAA;AAAA,QAC/EE;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusPill.stories.js","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"],"names":["codeString","StatusPill_stories","StatusPill","Template","args","jsx","Container","StatusPillExample"],"mappings":";;;AAOA,MAAMA,IAAa,kEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,~~EACF~~;~~AACF~~,GAEMG,IAAqC,CAACC,MAC1C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAY,GAAGE,~~EAAM~~,~~CAAA~~,EACxB,CAAA,GAGWG,IAAoBJ,EAAS,KAAK,~~EAAE~~;AACjDI,EAAkB,OAAO;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT;"}
1	+ {"version":3,"file":"StatusPill.stories.js","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"],"names":["codeString","StatusPill_stories","StatusPill","Template","args","jsx","Container","StatusPillExample"],"mappings":";;;AAOA,MAAMA,IAAa,kEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAqC,CAACC,MAC1C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAY,GAAGE,EAAA,CAAM,EACxB,CAAA,GAGWG,IAAoBJ,EAAS,KAAK,CAAE,CAAA;AACjDI,EAAkB,OAAO;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n /** The element which triggers the tooltip on hover. /\n element: ReactNode;\n /* The id of the tooltip element. /\n id: string;\n /* The contents of the tooltip. /\n text: string;\n /* The size of the tooltip. /\n size?: 'small' \| 'medium' \| 'large';\n /* <span style=\"color: red\">Obsolete</span>. Used by Lens only, and should be refactored /\n openUnderTrigger?: boolean;\n}\n\n/* Represents a component for a custom tooltip. /\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const tooltipRef = useRef<HTMLSpanElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n / eslint-disable @typescript-eslint/no-magic-numbers /\n const topOffset = (size === 'small' && 20) \|\| (size === 'large' && 35) \|\| 27;\n const leftOffset = (size === 'small' && 25) \|\| (size === 'large' && 70) \|\| 47;\n / eslint-enable @typescript-eslint/no-magic-numbers */\n\n const calculatePosition = useCallback(() => {\n if (containerRef.current && tooltipRef.current) {\n const triggerRect = containerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n const scrollY = window.scrollY;\n const scrollX = window.scrollX;\n let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n // Adjust top position to account for page scrolling\n top -= scrollY;\n\n // Position tooltip below if it would be above the viewport\n if (top < 0) {\n top = triggerRect.bottom + scrollY;\n }\n\n setPosition({ top, left });\n }\n }, [leftOffset, topOffset]);\n\n const onKeyUp = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n function show() {\n setIsOpen(true);\n }\n\n function hide() {\n setIsOpen(false);\n }\n\n function toggle() {\n if (isOpen) setIsOpen(false);\n else setIsOpen(true);\n }\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const tooltipContainerRef = containerRef.current;\n\n tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n return () => {\n tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n };\n }, [onKeyUp]);\n\n useEffect(() => {\n calculatePosition();\n window.addEventListener('resize', calculatePosition);\n return () => {\n window.removeEventListener('resize', calculatePosition);\n };\n }, [calculatePosition]);\n\n useEffect(() => {\n // Recalculate position when isOpen changes\n if (isOpen && !openUnderTrigger) {\n calculatePosition();\n }\n }, [isOpen, openUnderTrigger, calculatePosition]);\n\n return (\n <div\n className={styles['tooltip-container']}\n onBlur={hide}\n onFocus={show}\n onMouseEnter={show}\n onMouseLeave={hide}\n onMouseUp={toggle}\n ref={containerRef}\n role=\"button\"\n tabIndex={-1}\n >\n <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n {isOpen && (\n <span\n ref={tooltipRef}\n className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n id={id}\n role=\"tooltip\"\n style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n >\n {text}\n </span>\n )}\n </div>\n );\n}\n"],"names":["Tooltip","element","id","text","size","openUnderTrigger","containerRef","useRef","tooltipRef","isOpen","setIsOpen","useState","position","setPosition","topOffset","leftOffset","calculatePosition","useCallback","triggerRect","tooltipRect","scrollY","scrollX","top","left","onKeyUp","event","show","hide","toggle","useEffect","tooltipContainerRef","jsxs","styles","jsx"],"mappings":";;;;;;;;;AAoBgB,SAAAA,EAAQ,EAAE,SAAAC,GAAS,IAAAC,GAAI,MAAAC,GAAM,MAAAC,IAAO,UAAU,kBAAAC,IAAmB,MAAuB;AAChG,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAAaD,EAAwB,IAAI,GACzC,CAACE,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAE,KAAK,GAAG,MAAM,~~EAAA~~,~~CAAG,~~GAGtDG,IAAaV,MAAS,WAAW,MAAQA,MAAS,WAAW,MAAO,IACpEW,IAAcX,MAAS,WAAW,MAAQA,MAAS,WAAW,MAAO,IAGrEY,IAAoBC,EAAY,MAAM;AACtC,QAAAX,EAAa,WAAWE,EAAW,SAAS;AACxC,YAAAU,IAAcZ,EAAa,QAAQ,sBAAsB,GACzDa,IAAcX,EAAW,QAAQ,sBAAsB,GACvDY,IAAU,OAAO,SACjBC,IAAU,OAAO;AACvB,UAAIC,IAAMJ,EAAY,MAAME,IAAUN,IAAYK,EAAY;AAExD,YAAAI,IAAOL,EAAY,OAAOG,IAAUN,KAAcG,EAAY,QAAQC,EAAY,SAAS;AAG1F,MAAAG,KAAAF,GAGHE,IAAM,MACRA,IAAMJ,EAAY,SAASE,IAGjBP,EAAA,EAAE,KAAAS,GAAK,MAAAC,~~EAAA,CAAM~~;AAAA,~~IAC3B~~;AAAA,~~EAAA~~,GACC,CAACR,GAAYD,CAAS,CAAC,GAEpBU,IAAUP;AAAA,IACd,CAACQ,MAAyB;AACpB,MAAAA,EAAM,QAAQ,YAChBf,EAAU,EAAK;AAAA,IAEnB;AAAA,IACA,CAACA,CAAS;AAAA,~~EAAA~~;~~AAGZ~~,WAASgB,IAAO;AACd,IAAAhB,EAAU,EAAI;AAAA,~~EAChB~~;~~AAEA~~,WAASiB,IAAO;AACd,IAAAjB,EAAU,EAAK;AAAA,~~EACjB~~;~~AAEA~~,WAASkB,IAAS;AACZ,MAAA,CAAAnB,CAAuB;AAAA,~~EAE7B~~;~~AAEA~~,SAAAoB,EAAU,MAAM;AACV,QAAA,CAACvB,EAAa,QAAS;AAE3B,UAAMwB,IAAsBxB,EAAa;AAErB,WAAAwB,EAAA,iBAAiB,SAASN,GAAS,EAAI,GAEpD,MAAM;AACS,MAAAM,EAAA,oBAAoB,SAASN,GAAS,EAAI;AAAA,~~IAAA~~;AAAA,~~EAChE~~,GACC,CAACA,CAAO,CAAC,GAEZK,EAAU,OACUb,~~KACX~~,OAAA,iBAAiB,UAAUA,CAAiB,GAC5C,MAAM;AACJ,WAAA,oBAAoB,UAAUA,CAAiB;AAAA,~~EAAA~~,~~IAEvD~~,CAACA,CAAiB,CAAC,GAEtBa,EAAU,MAAM;AAEV,IAAApB,KAAU,CAACJ,KACKW;EAEnB,GAAA,CAACP,GAAQJ,GAAkBW,CAAiB,CAAC,GAG9C,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,mBAAmB;AAAA,MACrC,QAAQL;AAAA,MACR,SAASD;AAAA,MACT,cAAcA;AAAA,MACd,cAAcC;AAAA,MACd,WAAWC;AAAA,MACX,KAAKtB;AAAA,MACL,MAAK;AAAA,MACL,UAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAA2B,EAAC,OAAI,EAAA,oBAAkBxB,IAASP,IAAK,QAAY,UAAQD,GAAA;AAAA,QACxDQ,KACC,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKzB;AAAA,YACL,WAAWH,IAAmB2B,EAAO,uBAAuB,IAAIA,EAAO,WAAW5B,CAAI,EAAE;AAAA,YACxF,IAAAF;AAAA,YACA,MAAK;AAAA,YACL,OAAOG,IAAmB,CAAK,IAAA,EAAE,KAAKO,EAAS,KAAK,MAAMA,EAAS,KAAK;AAAA,YAEvE,UAAAT;AAAA,UAAA;AAAA,~~QACH~~;AAAA,~~MAAA~~;AAAA,IAAA;AAAA,~~EAAA~~;~~AAIR~~;"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n /** The element which triggers the tooltip on hover. /\n element: ReactNode;\n /* The id of the tooltip element. /\n id: string;\n /* The contents of the tooltip. /\n text: string;\n /* The size of the tooltip. /\n size?: 'small' \| 'medium' \| 'large';\n /* <span style=\"color: red\">Obsolete</span>. Used by Lens only, and should be refactored /\n openUnderTrigger?: boolean;\n}\n\n/* Represents a component for a custom tooltip. /\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n const containerRef = useRef<HTMLDivElement>(null);\n const tooltipRef = useRef<HTMLSpanElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const [position, setPosition] = useState({ top: 0, left: 0 });\n\n / eslint-disable @typescript-eslint/no-magic-numbers /\n const topOffset = (size === 'small' && 20) \|\| (size === 'large' && 35) \|\| 27;\n const leftOffset = (size === 'small' && 25) \|\| (size === 'large' && 70) \|\| 47;\n / eslint-enable @typescript-eslint/no-magic-numbers */\n\n const calculatePosition = useCallback(() => {\n if (containerRef.current && tooltipRef.current) {\n const triggerRect = containerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n const scrollY = window.scrollY;\n const scrollX = window.scrollX;\n let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n // Adjust top position to account for page scrolling\n top -= scrollY;\n\n // Position tooltip below if it would be above the viewport\n if (top < 0) {\n top = triggerRect.bottom + scrollY;\n }\n\n setPosition({ top, left });\n }\n }, [leftOffset, topOffset]);\n\n const onKeyUp = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n function show() {\n setIsOpen(true);\n }\n\n function hide() {\n setIsOpen(false);\n }\n\n function toggle() {\n if (isOpen) setIsOpen(false);\n else setIsOpen(true);\n }\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const tooltipContainerRef = containerRef.current;\n\n tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n return () => {\n tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n };\n }, [onKeyUp]);\n\n useEffect(() => {\n calculatePosition();\n window.addEventListener('resize', calculatePosition);\n return () => {\n window.removeEventListener('resize', calculatePosition);\n };\n }, [calculatePosition]);\n\n useEffect(() => {\n // Recalculate position when isOpen changes\n if (isOpen && !openUnderTrigger) {\n calculatePosition();\n }\n }, [isOpen, openUnderTrigger, calculatePosition]);\n\n return (\n <div\n className={styles['tooltip-container']}\n onBlur={hide}\n onFocus={show}\n onMouseEnter={show}\n onMouseLeave={hide}\n onMouseUp={toggle}\n ref={containerRef}\n role=\"button\"\n tabIndex={-1}\n >\n <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n {isOpen && (\n <span\n ref={tooltipRef}\n className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n id={id}\n role=\"tooltip\"\n style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n >\n {text}\n </span>\n )}\n </div>\n );\n}\n"],"names":["Tooltip","element","id","text","size","openUnderTrigger","containerRef","useRef","tooltipRef","isOpen","setIsOpen","useState","position","setPosition","topOffset","leftOffset","calculatePosition","useCallback","triggerRect","tooltipRect","scrollY","scrollX","top","left","onKeyUp","event","show","hide","toggle","useEffect","tooltipContainerRef","jsxs","styles","jsx"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.stories.js","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"],"names":["codeString","Tooltip_stories","Tooltip","Template","args","jsx","Container","TooltipExample"],"mappings":";;;AAOA,MAAMA,IAAa,iEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA;AAAA;AAAA,IAGA,kBAAkB;AAAA,MAChB,OAAO;AAAA,QACL,SAAS;AAAA,~~MACX~~;AAAA,~~IACF~~;AAAA,~~EACF~~;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,~~EACF~~;~~AACF~~,GAEMG,IAAkC,CAACC,MACtC,gBAAAC,EAAAC,GAAA,EAAU,eAAa,IACtB,UAAC,gBAAAD,EAAAH,GAAA,EAAS,GAAGE,~~EAAM~~,~~CAAA~~,EACrB,CAAA,GAGWG,IAAiBJ,EAAS,KAAK,~~EAAE~~;AAC9CI,EAAe,OAAO;AAAA,EACpB,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AACR;"}
1	+ {"version":3,"file":"Tooltip.stories.js","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"],"names":["codeString","Tooltip_stories","Tooltip","Template","args","jsx","Container","TooltipExample"],"mappings":";;;AAOA,MAAMA,IAAa,iEAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA;AAAA;AAAA,IAGA,kBAAkB;AAAA,MAChB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAkC,CAACC,MACtC,gBAAAC,EAAAC,GAAA,EAAU,eAAa,IACtB,UAAC,gBAAAD,EAAAH,GAAA,EAAS,GAAGE,EAAA,CAAM,EACrB,CAAA,GAGWG,IAAiBJ,EAAS,KAAK,CAAE,CAAA;AAC9CI,EAAe,OAAO;AAAA,EACpB,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AACR;"}

package/dist/components/hooks/useDebounce.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDebounce.js","sources":["../../../src/components/hooks/useDebounce.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\ntype Timer = ReturnType<typeof setTimeout>;\ntype SomeFunction = (...args: unknown[]) => void;\n\nconst DELAY = 200;\n\nexport function useDebounce<Func extends SomeFunction>(callBack: Func, delay = DELAY) {\n const timer = useRef<Timer>();\n\n useEffect(() => {\n return () => {\n if (!timer.current) return;\n clearTimeout(timer.current);\n };\n }, []);\n\n const debouncedFunction = ((...args) => {\n const newTimer = setTimeout(() => {\n callBack(...args);\n }, delay);\n clearTimeout(timer.current);\n timer.current = newTimer;\n }) as Func;\n\n return debouncedFunction;\n}\n"],"names":["DELAY","useDebounce","callBack","delay","timer","useRef","useEffect","args","newTimer"],"mappings":";AAKA,MAAMA,IAAQ;AAEE,SAAAC,EAAuCC,GAAgBC,IAAQH,GAAO;AACpF,QAAMI,IAAQC;~~AAEd~~,SAAAC,EAAU,MACD,MAAM;AACP,IAACF,EAAM,WACX,aAAaA,EAAM,OAAO;AAAA,~~EAAA~~,~~GAE3B~~,~~CAAE~~,~~CAAA,~~GAEsB,IAAIG,MAAS;AAChC,UAAAC,IAAW,WAAW,MAAM;AAChC,MAAAN,EAAS,GAAGK,CAAI;AAAA,OACfJ,CAAK;AACR,iBAAaC,EAAM,OAAO,GAC1BA,EAAM,UAAUI;AAAA,~~EAAA~~;~~AAIpB~~;"}
1	+ {"version":3,"file":"useDebounce.js","sources":["../../../src/components/hooks/useDebounce.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\ntype Timer = ReturnType<typeof setTimeout>;\ntype SomeFunction = (...args: unknown[]) => void;\n\nconst DELAY = 200;\n\nexport function useDebounce<Func extends SomeFunction>(callBack: Func, delay = DELAY) {\n const timer = useRef<Timer>();\n\n useEffect(() => {\n return () => {\n if (!timer.current) return;\n clearTimeout(timer.current);\n };\n }, []);\n\n const debouncedFunction = ((...args) => {\n const newTimer = setTimeout(() => {\n callBack(...args);\n }, delay);\n clearTimeout(timer.current);\n timer.current = newTimer;\n }) as Func;\n\n return debouncedFunction;\n}\n"],"names":["DELAY","useDebounce","callBack","delay","timer","useRef","useEffect","args","newTimer"],"mappings":";AAKA,MAAMA,IAAQ;AAEE,SAAAC,EAAuCC,GAAgBC,IAAQH,GAAO;AACpF,QAAMI,IAAQC,EAAc;AAE5B,SAAAC,EAAU,MACD,MAAM;AACP,IAACF,EAAM,WACX,aAAaA,EAAM,OAAO;AAAA,EAC5B,GACC,EAAE,GAEsB,IAAIG,MAAS;AAChC,UAAAC,IAAW,WAAW,MAAM;AAChC,MAAAN,EAAS,GAAGK,CAAI;AAAA,OACfJ,CAAK;AACR,iBAAaC,EAAM,OAAO,GAC1BA,EAAM,UAAUI;AAAA,EAClB;AAGF;"}

package/dist/components/hooks/useOnClickOutside.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOnClickOutside.js","sources":["../../../src/components/hooks/useOnClickOutside.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ntype Handler = (event: MouseEvent \| TouchEvent \| KeyboardEvent) => void;\n\nexport const useOnClickOutside = <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler): void => {\n useEffect(() => {\n const listener = (\n event:\n \| (MouseEvent & { target: HTMLElement \| null })\n \| (TouchEvent & { target: HTMLElement \| null })\n \| (KeyboardEvent & { target: HTMLElement \| null })\n ): void => {\n if (!ref.current \|\| ref.current.contains(event.target as Node)) {\n return;\n }\n handler(event as MouseEvent \| TouchEvent \| KeyboardEvent);\n };\n document.addEventListener('mousedown', listener as EventListener);\n document.addEventListener('touchstart', listener as EventListener);\n return () => {\n document.removeEventListener('mousedown', listener as EventListener);\n document.removeEventListener('touchstart', listener as EventListener);\n };\n }, [ref, handler]);\n};\n"],"names":["useOnClickOutside","ref","handler","useEffect","listener","event"],"mappings":";AAIa,MAAAA,IAAoB,CAAsCC,GAAmBC,MAA2B;AACnH,EAAAC,EAAU,MAAM;AACR,UAAAC,IAAW,CACfC,MAIS;AACL,MAAA,CAACJ,EAAI,WAAWA,EAAI,QAAQ,SAASI,EAAM,MAAc,KAG7DH,EAAQG,CAAgD;AAAA,~~IAAA~~;~~AAEjD~~,oBAAA,iBAAiB,aAAaD,CAAyB,GACvD,SAAA,iBAAiB,cAAcA,CAAyB,GAC1D,MAAM;AACF,eAAA,oBAAoB,aAAaA,CAAyB,GAC1D,SAAA,oBAAoB,cAAcA,CAAyB;AAAA,~~IAAA~~;AAAA,~~EACtE~~,GACC,CAACH,GAAKC,CAAO,CAAC;AACnB;"}
1	+ {"version":3,"file":"useOnClickOutside.js","sources":["../../../src/components/hooks/useOnClickOutside.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ntype Handler = (event: MouseEvent \| TouchEvent \| KeyboardEvent) => void;\n\nexport const useOnClickOutside = <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler): void => {\n useEffect(() => {\n const listener = (\n event:\n \| (MouseEvent & { target: HTMLElement \| null })\n \| (TouchEvent & { target: HTMLElement \| null })\n \| (KeyboardEvent & { target: HTMLElement \| null })\n ): void => {\n if (!ref.current \|\| ref.current.contains(event.target as Node)) {\n return;\n }\n handler(event as MouseEvent \| TouchEvent \| KeyboardEvent);\n };\n document.addEventListener('mousedown', listener as EventListener);\n document.addEventListener('touchstart', listener as EventListener);\n return () => {\n document.removeEventListener('mousedown', listener as EventListener);\n document.removeEventListener('touchstart', listener as EventListener);\n };\n }, [ref, handler]);\n};\n"],"names":["useOnClickOutside","ref","handler","useEffect","listener","event"],"mappings":";AAIa,MAAAA,IAAoB,CAAsCC,GAAmBC,MAA2B;AACnH,EAAAC,EAAU,MAAM;AACR,UAAAC,IAAW,CACfC,MAIS;AACL,MAAA,CAACJ,EAAI,WAAWA,EAAI,QAAQ,SAASI,EAAM,MAAc,KAG7DH,EAAQG,CAAgD;AAAA,IAC1D;AACS,oBAAA,iBAAiB,aAAaD,CAAyB,GACvD,SAAA,iBAAiB,cAAcA,CAAyB,GAC1D,MAAM;AACF,eAAA,oBAAoB,aAAaA,CAAyB,GAC1D,SAAA,oBAAoB,cAAcA,CAAyB;AAAA,IACtE;AAAA,EAAA,GACC,CAACH,GAAKC,CAAO,CAAC;AACnB;"}

package/dist/components/hooks/usePositionedFloaters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n style: {\n style: {\n inset: string;\n };\n };\n status: boolean;\n}\n\ninterface optionProps {\n mouseEvent: 'click' \| 'hover';\n position: 'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight';\n offset: number;\n maxFixedHeight?: `${number}${'px' \| 'rem'}`;\n horizontalPosition?: 'left' \| 'right';\n mobileBreakpoint?: `${number}${'px' \| 'rem'}`;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 45;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n positionedElement: T \| null,\n referenceElement: T \| null,\n options: optionProps\n): positionProps {\n const [status, setStatus] = useState(false);\n const defaultStyle = {\n inset: '0 auto auto 0',\n opacity: 0,\n maxHeight: '100%',\n maxWidth: '100%',\n overflowX: 'hidden',\n overflowY: 'auto',\n margin: '0rem',\n };\n\n const [style, setStyle] = useState(defaultStyle);\n\n const sizeToPx = (size: `${number}${'px' \| 'rem'}`): number => {\n const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n };\n\n const setHeight = (refRect: DOMRect, pos: string): number => {\n if (!refRect) return 0;\n\n const _maxHeight =\n pos === 'bottom'\n ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n : refRect.top - options.offset - BODY_PADDING;\n\n return !options.maxFixedHeight \|\| sizeToPx(options.maxFixedHeight) > _maxHeight\n ? _maxHeight\n : sizeToPx(options.maxFixedHeight);\n };\n\n const setWidth = (refRect: DOMRect, pos: string): number => {\n if (!refRect) return 0;\n\n const _availableWidth =\n pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n };\n\n const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n if (isMobile) {\n return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n } else {\n return `${refRect.left}px`;\n }\n };\n\n const calcPosition = (): typeof defaultStyle => {\n const positionedRect = (positionedElement as HTMLElement \| null)?.getBoundingClientRect();\n const referenceRect = (referenceElement as HTMLElement \| null)?.getBoundingClientRect();\n let yPos = 'bottom';\n let xPos = 'left';\n\n const isMobile = window.matchMedia(\n `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n ).matches;\n\n if (!referenceRect \|\| !positionedRect) {\n return defaultStyle;\n }\n\n if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n yPos = 'top';\n }\n\n if (\n (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH \|\| options.horizontalPosition === 'right') &&\n !isMobile\n ) {\n xPos = 'right';\n }\n\n return {\n inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n maxHeight: `${setHeight(referenceRect, yPos)}px`,\n maxWidth: `${setWidth(referenceRect, xPos)}px`,\n overflowX: 'hidden',\n overflowY: 'auto',\n opacity: 1,\n margin: `${options.offset}px 0`,\n };\n };\n\n const handleMouseEvent = (): void => {\n setStyle({\n ...style,\n ...calcPosition(),\n });\n setStatus(true);\n };\n\n const updatePosition = (): void => {\n if (status) {\n setStyle({\n ...style,\n ...calcPosition(),\n });\n }\n };\n\n const handleClickOutside = (evt: Event): void => {\n if (\n !referenceElement \|\|\n (referenceElement as unknown as HTMLElement).contains(evt.target as Node) \|\|\n !positionedElement \|\|\n (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n ) {\n return;\n }\n };\n\n const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n useEffect(() => {\n if (referenceElement !== null) {\n if (options.mouseEvent === 'click') {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n } else {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n }\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('touchstart', handleClickOutside);\n window.addEventListener('resize', debouncedUpdatePosition);\n }\n\n return () => {\n if (referenceElement !== null) {\n if (options.mouseEvent === 'click') {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n } else {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n }\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('touchstart', handleClickOutside);\n window.removeEventListener('resize', debouncedUpdatePosition);\n }\n };\n });\n\n return {\n style: {\n style,\n },\n status,\n };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":";;AAsBA,MAAMA,IAAe,IACfC,IAAa,IACbC,IAAY,KACZC,IAAiB,GACjBC,IAAoB,KACpBC,IAAO;AAEG,SAAAC,EACdC,GACAC,GACAC,GACe;AACf,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAe;AAAA,IACnB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,QAAQ;AAAA,~~EAAA~~,~~GAGJ~~,CAACC,GAAOC,CAAQ,IAAIH,EAASC,CAAY,GAEzCG,IAAW,CAACC,MAA6C;AAC7D,UAAMC,IAAe,WAAW,iBAAiB,SAAS,eAAe,EAAE,QAAQ;AAC5E,WAAAD,EAAK,QAAQ,KAAK,MAAM,KAAK,WAAWA,CAAI,IAAIC,IAAe,WAAWD,CAAI;AAAA,~~EAAA~~,~~GAGjFE~~,IAAY,CAACC,GAAkBC,MAAwB;AACvD,QAAA,CAACD,EAAgB,QAAA;AAErB,UAAME,IACJD,MAAQ,WACJ,OAAO,cAAcD,EAAQ,SAASX,EAAQ,SAAST,IACvDoB,EAAQ,MAAMX,EAAQ,SAAST;AAE9B,WAAA,CAACS,EAAQ,kBAAkBO,EAASP,EAAQ,cAAc,IAAIa,IACjEA,IACAN,EAASP,EAAQ,cAAc;AAAA,~~EAAA~~,~~GAG/Bc~~,IAAW,CAACH,GAAkBC,MAAwB;AACtD,QAAA,CAACD,EAAgB,QAAA;AAEf,UAAAI,IACJH,MAAQ,SAAS,OAAO,aAAaD,EAAQ,OAAOpB,IAAeoB,EAAQ,QAAQpB;AAE9E,WAAAwB,KAAmBtB,IAAYA,IAAYsB;AAAA,~~EAAA~~,~~GAG9CC~~,IAAU,CAACL,GAAkBM,GAAkBC,MAC/CA,IACK,GAAGP,EAAQ,OAAO,KAAK,IAAIM,EAAQ,QAAQN,EAAQ,KAAK,IAAIf,CAAI,OAEhE,GAAGe,EAAQ,IAAI,MAIpBQ,IAAe,MAA2B;AACxC,UAAAC,IAAkBtB,KAAA,gBAAAA,EAA0C,yBAC5DuB,IAAiBtB,KAAA,gBAAAA,EAAyC;AAChE,QAAIuB,IAAO,UACPC,IAAO;AAEX,UAAML,IAAW,OAAO;AAAA,MACtB,eAAelB,EAAQ,mBAAmBO,EAASP,EAAQ,gBAAgB,IAAIL,CAAiB;AAAA,~~IAChG~~,~~EAAA~~;AAEE,WAAA,CAAC0B,KAAiB,CAACD,IACdhB,KAGL,OAAO,cAAciB,EAAc,SAAS9B,IAAeC,MACtD8B,IAAA,SAIN,OAAO,aAAaD,EAAc,OAAO9B,IAAeE,KAAaO,EAAQ,uBAAuB,YACrG,CAACkB,MAEMK,IAAA,UAGF;AAAA,MACL,OAAO,GAAGD,MAAS,WAAWD,EAAcC,CAAI,IAAI,OAAO,MAAM;AAAA,gBACvDC,MAAS,UAAU,OAAO,aAAaF,EAAcE,CAAI,IAAI,OAAO,MAAM;AAAA,gBAC1ED,MAAS,QAAQ,OAAO,cAAcD,EAAcC,CAAI,IAAI,OAAO,MAAM;AAAA,gBACzEC,MAAS,SAASP,EAAQK,GAAeD,GAAgBF,CAAQ,IAAI,MAAM;AAAA,MACrF,WAAW,GAAGR,EAAUW,GAAeC,CAAI,CAAC;AAAA,MAC5C,UAAU,GAAGR,EAASO,GAAeE,CAAI,CAAC;AAAA,MAC1C,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ,GAAGvB,EAAQ,MAAM;AAAA,~~IAAA~~;AAAA,~~EAC3B~~,~~GAGIwB~~,IAAmB,MAAY;AAC1B,IAAAlB,EAAA;AAAA,MACP,GAAGD;AAAA,MACH,GAAGc,EAAa;AAAA,IAAA,CACjB,GACDjB,EAAU,EAAI;AAAA,~~EAAA~~,~~GAGVuB~~,IAAiB,MAAY;AACjC,IAAIxB,KACOK,EAAA;AAAA,MACP,GAAGD;AAAA,MACH,GAAGc,EAAa;AAAA,IAAA,CACjB;AAAA,~~EACH~~,~~GAGIO~~,IAAqB,CAACC,MAAqB;AAC/C,IACE,CAAC5B,KACAA,EAA4C,SAAS4B,EAAI,MAAc,KACxE,CAAC7B,KACAA,EAA6C,SAAS6B,EAAI,MAAc;AAAA,~~EAG3E~~,~~GAGIC~~,IAA0BC,EAAYJ,GAAgB/B,CAAc;AAE1E,SAAAoC,EAAU,OACJ/B,MAAqB,SACnBC,EAAQ,eAAe,UAExBD,EAA4C,iBAAiB,SAASyB,CAAgB,KAGtFzB,EAA4C,iBAAiB,cAAcyB,CAAgB,GAE3FzB,EAA4C,iBAAiB,cAAc2B,CAAkB,IAEvF,SAAA,iBAAiB,aAAaA,CAAkB,GAChD,SAAA,iBAAiB,cAAcA,CAAkB,GACnD,OAAA,iBAAiB,UAAUE,CAAuB,IAGpD,MAAM;AACX,IAAI7B,MAAqB,SACnBC,EAAQ,eAAe,UAExBD,EAA4C,oBAAoB,SAASyB,CAAgB,KAGzFzB,EAA4C,oBAAoB,cAAcyB,CAAgB,GAE9FzB,EAA4C,oBAAoB,cAAc2B,CAAkB,IAE1F,SAAA,oBAAoB,aAAaA,CAAkB,GACnD,SAAA,oBAAoB,cAAcA,CAAkB,GACtD,OAAA,oBAAoB,UAAUE,CAAuB;AAAA,~~EAC9D~~,~~EAEH~~,GAEM;AAAA,IACL,OAAO;AAAA,MACL,OAAAvB;AAAA,IACF;AAAA,IACA,QAAAJ;AAAA,~~EAAA~~;~~AAEJ~~;"}
1	+ {"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n style: {\n style: {\n inset: string;\n };\n };\n status: boolean;\n}\n\ninterface optionProps {\n mouseEvent: 'click' \| 'hover';\n position: 'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight';\n offset: number;\n maxFixedHeight?: `${number}${'px' \| 'rem'}`;\n horizontalPosition?: 'left' \| 'right';\n mobileBreakpoint?: `${number}${'px' \| 'rem'}`;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 45;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n positionedElement: T \| null,\n referenceElement: T \| null,\n options: optionProps\n): positionProps {\n const [status, setStatus] = useState(false);\n const defaultStyle = {\n inset: '0 auto auto 0',\n opacity: 0,\n maxHeight: '100%',\n maxWidth: '100%',\n overflowX: 'hidden',\n overflowY: 'auto',\n margin: '0rem',\n };\n\n const [style, setStyle] = useState(defaultStyle);\n\n const sizeToPx = (size: `${number}${'px' \| 'rem'}`): number => {\n const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n };\n\n const setHeight = (refRect: DOMRect, pos: string): number => {\n if (!refRect) return 0;\n\n const _maxHeight =\n pos === 'bottom'\n ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n : refRect.top - options.offset - BODY_PADDING;\n\n return !options.maxFixedHeight \|\| sizeToPx(options.maxFixedHeight) > _maxHeight\n ? _maxHeight\n : sizeToPx(options.maxFixedHeight);\n };\n\n const setWidth = (refRect: DOMRect, pos: string): number => {\n if (!refRect) return 0;\n\n const _availableWidth =\n pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n };\n\n const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n if (isMobile) {\n return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n } else {\n return `${refRect.left}px`;\n }\n };\n\n const calcPosition = (): typeof defaultStyle => {\n const positionedRect = (positionedElement as HTMLElement \| null)?.getBoundingClientRect();\n const referenceRect = (referenceElement as HTMLElement \| null)?.getBoundingClientRect();\n let yPos = 'bottom';\n let xPos = 'left';\n\n const isMobile = window.matchMedia(\n `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n ).matches;\n\n if (!referenceRect \|\| !positionedRect) {\n return defaultStyle;\n }\n\n if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n yPos = 'top';\n }\n\n if (\n (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH \|\| options.horizontalPosition === 'right') &&\n !isMobile\n ) {\n xPos = 'right';\n }\n\n return {\n inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n maxHeight: `${setHeight(referenceRect, yPos)}px`,\n maxWidth: `${setWidth(referenceRect, xPos)}px`,\n overflowX: 'hidden',\n overflowY: 'auto',\n opacity: 1,\n margin: `${options.offset}px 0`,\n };\n };\n\n const handleMouseEvent = (): void => {\n setStyle({\n ...style,\n ...calcPosition(),\n });\n setStatus(true);\n };\n\n const updatePosition = (): void => {\n if (status) {\n setStyle({\n ...style,\n ...calcPosition(),\n });\n }\n };\n\n const handleClickOutside = (evt: Event): void => {\n if (\n !referenceElement \|\|\n (referenceElement as unknown as HTMLElement).contains(evt.target as Node) \|\|\n !positionedElement \|\|\n (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n ) {\n return;\n }\n };\n\n const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n useEffect(() => {\n if (referenceElement !== null) {\n if (options.mouseEvent === 'click') {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n } else {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n }\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('touchstart', handleClickOutside);\n window.addEventListener('resize', debouncedUpdatePosition);\n }\n\n return () => {\n if (referenceElement !== null) {\n if (options.mouseEvent === 'click') {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n } else {\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n // eslint-disable-next-line no-extra-semi\n (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n }\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('touchstart', handleClickOutside);\n window.removeEventListener('resize', debouncedUpdatePosition);\n }\n };\n });\n\n return {\n style: {\n style,\n },\n status,\n };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}

package/dist/components/hooks/useResponsive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useResponsive.js","sources":["../../../src/components/hooks/useResponsive.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst BREAKPOINTS = {\n xs: 375,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400,\n};\n\ntype BreakpointState = Record<keyof typeof BREAKPOINTS, boolean>;\ntype InitialBreakpoints = keyof typeof BREAKPOINTS \| '_initial';\ntype Orientation = 'portrait' \| 'landscape' \| null;\ntype ResponsiveState = {\n greaterThan: BreakpointState;\n lessThan: BreakpointState;\n orientation: Orientation;\n mediaType: InitialBreakpoints;\n};\n\nexport const useResponsive = (): ResponsiveState => {\n const getMediaQuery = (size: number, greater: boolean): string => {\n return greater ? `(min-width: ${size}px)` : `(max-width: ${size - 1}px)`;\n };\n\n const getMatches = (query: string) => {\n if (typeof window !== 'undefined') {\n return window.matchMedia(query).matches;\n }\n return false;\n };\n\n const createResponsiveObject = () => {\n const initialBreakpointState: BreakpointState = {\n xs: false,\n sm: false,\n md: false,\n lg: false,\n xl: false,\n xxl: false,\n };\n\n const greaterThan = { ...initialBreakpointState };\n const lessThan = { ...initialBreakpointState };\n\n Object.entries(BREAKPOINTS).forEach(([key, size]) => {\n greaterThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, true));\n lessThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, false));\n });\n\n const orientation: Orientation = getMatches('(orientation: portrait)')\n ? 'portrait'\n : getMatches('(orientation: landscape)')\n ? 'landscape'\n : null;\n\n const mediaType = (Object.keys(greaterThan).findLast((key) => greaterThan[key as keyof typeof greaterThan]) \|\|\n '_initial') as InitialBreakpoints;\n\n return { greaterThan, lessThan, orientation, mediaType };\n };\n\n const [responsive, setResponsive] = useState(createResponsiveObject());\n\n useEffect(() => {\n const handleChange = () => setResponsive(createResponsiveObject());\n\n window.addEventListener('resize', handleChange);\n\n return () => window.removeEventListener('resize', handleChange);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return responsive;\n};\n"],"names":["BREAKPOINTS","useResponsive","getMediaQuery","size","greater","getMatches","query","createResponsiveObject","initialBreakpointState","greaterThan","lessThan","key","orientation","mediaType","responsive","setResponsive","useState","useEffect","handleChange"],"mappings":";AAEA,MAAMA,IAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP,GAYaC,IAAgB,MAAuB;AAC5C,QAAAC,IAAgB,CAACC,GAAcC,MAC5BA,IAAU,eAAeD,CAAI,QAAQ,eAAeA,IAAO,CAAC,OAG/DE,IAAa,CAACC,MACd,OAAO,SAAW,MACb,OAAO,WAAWA,CAAK,EAAE,UAE3B,IAGHC,IAAyB,MAAM;AACnC,UAAMC,IAA0C;AAAA,MAC9C,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,~~IAAA~~,~~GAGDC~~,IAAc,EAAE,GAAGD,~~KACnBE~~,IAAW,EAAE,GAAGF;~~AAEf~~,WAAA,QAAQR,CAAW,EAAE,QAAQ,CAAC,CAACW,GAAKR,CAAI,MAAM;AACnD,MAAAM,EAAYE,CAA+B,IAAIN,EAAWH,EAAcC,GAAM,EAAI,CAAC,GACnFO,EAASC,CAA+B,IAAIN,EAAWH,EAAcC,GAAM,EAAK,CAAC;AAAA,IAAA,CAClF;AAEK,UAAAS,IAA2BP,EAAW,yBAAyB,IACjE,aACAA,EAAW,0BAA0B,IACnC,cACA,MAEAQ,IAAa,OAAO,KAAKJ,CAAW,EAAE,SAAS,CAACE,MAAQF,EAAYE,CAA+B,CAAC,KACxG;AAEF,WAAO,EAAE,aAAAF,GAAa,UAAAC,GAAU,aAAAE,GAAa,WAAAC,EAAU;AAAA,~~EAAA~~,~~GAGnD~~,CAACC,GAAYC,CAAa,IAAIC,EAAST,~~EAAwB,CAAA~~;AAErE,SAAAU,EAAU,MAAM;AACd,UAAMC,IAAe,MAAMH,EAAcR,~~EAAwB,CAAA~~;AAE1D,kBAAA,iBAAiB,UAAUW,CAAY,GAEvC,MAAM,OAAO,oBAAoB,UAAUA,CAAY;AAAA,EAEhE,GAAG,~~CAAE~~,~~CAAA,~~GAEEJ;AACT;"}
1	+ {"version":3,"file":"useResponsive.js","sources":["../../../src/components/hooks/useResponsive.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst BREAKPOINTS = {\n xs: 375,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1400,\n};\n\ntype BreakpointState = Record<keyof typeof BREAKPOINTS, boolean>;\ntype InitialBreakpoints = keyof typeof BREAKPOINTS \| '_initial';\ntype Orientation = 'portrait' \| 'landscape' \| null;\ntype ResponsiveState = {\n greaterThan: BreakpointState;\n lessThan: BreakpointState;\n orientation: Orientation;\n mediaType: InitialBreakpoints;\n};\n\nexport const useResponsive = (): ResponsiveState => {\n const getMediaQuery = (size: number, greater: boolean): string => {\n return greater ? `(min-width: ${size}px)` : `(max-width: ${size - 1}px)`;\n };\n\n const getMatches = (query: string) => {\n if (typeof window !== 'undefined') {\n return window.matchMedia(query).matches;\n }\n return false;\n };\n\n const createResponsiveObject = () => {\n const initialBreakpointState: BreakpointState = {\n xs: false,\n sm: false,\n md: false,\n lg: false,\n xl: false,\n xxl: false,\n };\n\n const greaterThan = { ...initialBreakpointState };\n const lessThan = { ...initialBreakpointState };\n\n Object.entries(BREAKPOINTS).forEach(([key, size]) => {\n greaterThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, true));\n lessThan[key as keyof typeof BREAKPOINTS] = getMatches(getMediaQuery(size, false));\n });\n\n const orientation: Orientation = getMatches('(orientation: portrait)')\n ? 'portrait'\n : getMatches('(orientation: landscape)')\n ? 'landscape'\n : null;\n\n const mediaType = (Object.keys(greaterThan).findLast((key) => greaterThan[key as keyof typeof greaterThan]) \|\|\n '_initial') as InitialBreakpoints;\n\n return { greaterThan, lessThan, orientation, mediaType };\n };\n\n const [responsive, setResponsive] = useState(createResponsiveObject());\n\n useEffect(() => {\n const handleChange = () => setResponsive(createResponsiveObject());\n\n window.addEventListener('resize', handleChange);\n\n return () => window.removeEventListener('resize', handleChange);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return responsive;\n};\n"],"names":["BREAKPOINTS","useResponsive","getMediaQuery","size","greater","getMatches","query","createResponsiveObject","initialBreakpointState","greaterThan","lessThan","key","orientation","mediaType","responsive","setResponsive","useState","useEffect","handleChange"],"mappings":";AAEA,MAAMA,IAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP,GAYaC,IAAgB,MAAuB;AAC5C,QAAAC,IAAgB,CAACC,GAAcC,MAC5BA,IAAU,eAAeD,CAAI,QAAQ,eAAeA,IAAO,CAAC,OAG/DE,IAAa,CAACC,MACd,OAAO,SAAW,MACb,OAAO,WAAWA,CAAK,EAAE,UAE3B,IAGHC,IAAyB,MAAM;AACnC,UAAMC,IAA0C;AAAA,MAC9C,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,KAAK;AAAA,IACP,GAEMC,IAAc,EAAE,GAAGD,EAAuB,GAC1CE,IAAW,EAAE,GAAGF,EAAuB;AAEtC,WAAA,QAAQR,CAAW,EAAE,QAAQ,CAAC,CAACW,GAAKR,CAAI,MAAM;AACnD,MAAAM,EAAYE,CAA+B,IAAIN,EAAWH,EAAcC,GAAM,EAAI,CAAC,GACnFO,EAASC,CAA+B,IAAIN,EAAWH,EAAcC,GAAM,EAAK,CAAC;AAAA,IAAA,CAClF;AAEK,UAAAS,IAA2BP,EAAW,yBAAyB,IACjE,aACAA,EAAW,0BAA0B,IACnC,cACA,MAEAQ,IAAa,OAAO,KAAKJ,CAAW,EAAE,SAAS,CAACE,MAAQF,EAAYE,CAA+B,CAAC,KACxG;AAEF,WAAO,EAAE,aAAAF,GAAa,UAAAC,GAAU,aAAAE,GAAa,WAAAC,EAAU;AAAA,EACzD,GAEM,CAACC,GAAYC,CAAa,IAAIC,EAAST,GAAwB;AAErE,SAAAU,EAAU,MAAM;AACd,UAAMC,IAAe,MAAMH,EAAcR,GAAwB;AAE1D,kBAAA,iBAAiB,UAAUW,CAAY,GAEvC,MAAM,OAAO,oBAAoB,UAAUA,CAAY;AAAA,EAEhE,GAAG,EAAE,GAEEJ;AACT;"}

package/dist/components/index.js CHANGED Viewed

@@ -31,7 +31,7 @@ import { Label as mo } from "./Label/Label.js";
 import { MenuLink as io } from "./MenuLink/MenuLink.js";
 import { MetaDataList as no } from "./MetaDataList/MetaDataList.js";
 import { ModalDialog as co } from "./ModalDialog/ModalDialog.js";
-import { M as so } from "../TablePlugin-BbiBRjod.js";
+import { M as so } from "../TablePlugin-ByeOn0Zf.js";
 import { OverlayCloseButton as So } from "./OverlayCloseButton/OverlayCloseButton.js";
 import { PageOverlay as ko } from "./PageOverlay/PageOverlay.js";
 import { Periods as Fo } from "./Periods/Periods.js";