@uva-glass/component-library 3.57.1 → 3.57.3

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

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","names":[],"sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n  isDirty: boolean;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [isDirty, setIsDirty] = useState(false);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n    setIsDirty(false);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue, isDefault = false) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n    setIsDirty(!isDefault);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue), true);\n  }\n\n  useEffect(() => {\n    const newLabel = getValue(value.value || defaultValue).label;\n    if (newLabel !== value.label) {\n      setSelectedValue(getValue(value.value || defaultValue));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options, defaultValue]);\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n        isDirty,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"mappings":";;;AA0BA,IAAM,IAAgB,EAAoC,CAAC,CAAyB,GAOvE,KAAkB,EAAE,YAAS,iBAAc,kBAAyC;CAC/F,IAAM,CAAC,GAAO,KAAY,EAAsB;EAAE,OAAO;EAAI,OAAO;CAAG,CAAC,GAClE,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,CAAC,GAAa,KAAkB,EAAS,EAAE,GAC3C,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAY,EAAe,EAAM,CAAC,GAElC,UAAsB;EAE1B,AADA,GAAW,MAAW,CAAC,CAAM,GAC7B,EAAW,EAAK;CAClB,GAEM,KAAY,MAEd,EAAQ,MAAM,MAAW,EAAO,UAAU,CAAK,KAAK;EAClD,OAAO;EACP,OAAO;EACP,eAAe;CACjB,GAIE,KAAoB,GAAoB,IAAY,OAAU;EAKlE,AAHA,EADsB,EAAQ,WAAW,MAAW,EAAO,UAAU,EAAM,KAC5D,CAAa,GAC5B,EAAS,CAAK,GACd,EAAU,EAAK,GACf,EAAW,CAAC,CAAS;CACvB;CAcA,OAZI,MAAiB,MAAM,CAAC,EAAM,SAChC,EAAiB,EAAS,CAAY,GAAG,EAAI,GAG/C,QAAgB;EAEd,AADiB,EAAS,EAAM,SAAS,CAAY,EAAE,UACtC,EAAM,SACrB,EAAiB,EAAS,EAAM,SAAS,CAAY,CAAC;CAG1D,GAAG,CAAC,GAAS,CAAY,CAAC,GAGxB,kBAAC,EAAc,UAAf;EACE,OAAO;GACL;GACA,eAAe;GACf;GACA;GACA;GACA;GACA;GACA;GACA;GACA,WAAW,EAAU;GACrB;EACF;EAEC;CACqB,CAAA;AAE5B,GAEa,UAAkB;CAC7B,IAAM,IAAU,EAAW,CAAa;CAExC,IAAI,MAAY,KAAA,GAAW,MAAU,MAAM,iDAAiD;CAE5F,OAAO;AACT"}
+{"version":3,"file":"SelectProvider.js","names":[],"sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef, useEffect } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n  isDirty: boolean;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [isDirty, setIsDirty] = useState(false);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n    setIsDirty(false);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue, isDefault = false) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n    setIsDirty(!isDefault);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue), true);\n  }\n\n  useEffect(() => {\n    const newLabel = getValue(value.value || defaultValue).label;\n    if (newLabel !== value.label) {\n      setSelectedValue(getValue(value.value || defaultValue));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [options, defaultValue]);\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n        isDirty,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"mappings":";;;AA0BA,IAAM,IAAgB,EAAoC,CAAC,CAAyB,GAOvE,KAAkB,EAAE,YAAS,iBAAc,kBAAyC;CAC/F,IAAM,CAAC,GAAO,KAAY,EAAsB;EAAE,OAAO;EAAI,OAAO;CAAG,CAAC,GAClE,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,CAAC,GAAa,KAAkB,EAAS,EAAE,GAC3C,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAY,EAAe,EAAM,CAAC,GAElC,UAAsB;EAE1B,AADA,GAAW,MAAW,CAAC,CAAM,GAC7B,EAAW,EAAK;CAClB,GAEM,KAAY,MAEd,EAAQ,MAAM,MAAW,EAAO,UAAU,CAAK,KAAK;EAClD,OAAO;EACP,OAAO;EACP,eAAe;CACjB,GAIE,KAAoB,GAAoB,IAAY,OAAU;EAKlE,AAHA,EADsB,EAAQ,WAAW,MAAW,EAAO,UAAU,EAAM,KAC5D,CAAa,GAC5B,EAAS,CAAK,GACd,EAAU,EAAK,GACf,EAAW,CAAC,CAAS;CACvB;CAcA,OAZI,MAAiB,MAAM,CAAC,EAAM,SAChC,EAAiB,EAAS,CAAY,GAAG,EAAI,GAG/C,QAAgB;EAEd,AADiB,EAAS,EAAM,SAAS,CAAY,CAAC,CAAC,UACtC,EAAM,SACrB,EAAiB,EAAS,EAAM,SAAS,CAAY,CAAC;CAG1D,GAAG,CAAC,GAAS,CAAY,CAAC,GAGxB,kBAAC,EAAc,UAAf;EACE,OAAO;GACL;GACA,eAAe;GACf;GACA;GACA;GACA;GACA;GACA;GACA;GACA,WAAW,EAAU;GACrB;EACF;EAEC;CACqB,CAAA;AAE5B,GAEa,UAAkB;CAC7B,IAAM,IAAU,EAAW,CAAa;CAExC,IAAI,MAAY,KAAA,GAAW,MAAU,MAAM,iDAAiD;CAE5F,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder' | 'roundedLeft' | 'roundedRight';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n  notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const {\n    variant,\n    size = 'default',\n    onChange,\n    buttonLabelProp = 'label',\n    buttonLabelBold,\n    disabled = false,\n    notValid = false,\n  } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n    useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        if (!isOpen) setIsOpen(true);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selectedValue);\n    }\n\n    isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n          [styles['select-listbox-trigger--not-valid']]: notValid,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;AAoBA,IAAa,IAAe,GAAkD,GAAO,MAAQ;CAC3F,IAAM,EACJ,YACA,UAAO,WACP,aACA,qBAAkB,SAClB,oBACA,cAAW,IACX,cAAW,OACT,GACE,IAAgB,EAAwB,IAAI,GAC5C,EAAE,cAAW,WAAQ,kBAAe,kBAAe,cAAW,mBAAgB,YAAS,eAC3F,EAAU,KAAK,CAAC,GAEZ,KAAoB,MAA4C;EACpE,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,kBAAkB,GAClC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,kBAAkB,EAAE,WAAW,CAAG,CACjF;GACA,IAAI,MAA6B,IAAI;IAGnC,AAFA,EAAe,CAAwB,GAClC,KAAQ,EAAU,EAAI,GAC3B,EAAM,eAAe;IACrB;GACF;EACF;EAEA,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,IADA,EAAM,eAAe,GACjB,CAAC,GAAQ;KACX,EAAU,EAAI;KACd;IACF;IACA;GACF,KAAK;IACH,AAAI,MACF,EAAM,gBAAgB,GACtB,EAAe,EAAQ,WAAW,MAAW,EAAO,UAAU,GAAe,KAAK,CAAC,GACnF,EAAU,EAAK;IAEjB;EACJ;CACF;CAkBA,OAhBA,QAAgB;EACd,AAAI,MACD,EAAc,SAAS,SAAS,IAAyB,KAAK;CAEnE,GAAG,CAAC,CAAM,CAAC,GAEX,QAAgB;EAKd,AAJI,KACF,EAAS,CAAa,GAGxB,MAAY,EAAc,SAAS,SAAS,IAAyB,MAAM;CAG7E,GAAG,CAAC,CAAa,CAAC,GAGhB,kBAAC,QAAD;EAAM,KAAK;YACT,kBAAC,UAAD;GACE,WAAW,EAAK,EAAO,2BAA2B,EAAO,2BAA2B,MAAS;KAC1F,EAAO,2BAA2B,OAAa;KAC/C,EAAO,kCAAkC;KACzC,EAAO,uCAAuC;GACjD,CAAC;GACD,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,iBAAc;GACd,cAAY,GAAG,EAAc;GACnB;GACV,iBAAe;GACf,GAAK,KAAO,EAAO,OAAI;aAdzB,CAgBE,kBAAC,QAAD;IAAM,WAAW,EAAO;cACrB,EAAc;GACX,CAAA,GAEN,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,gCAAgC,GACpD,EAAO,uCAAuC,EACjD,CAAC;IACD,MAAK;IACL,MAAM;GACP,CAAA,CACK;;CACJ,CAAA;AAEV,CAAC"}
+{"version":3,"file":"SelectButton.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder' | 'roundedLeft' | 'roundedRight';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n  notValid?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const {\n    variant,\n    size = 'default',\n    onChange,\n    buttonLabelProp = 'label',\n    buttonLabelBold,\n    disabled = false,\n    notValid = false,\n  } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options, isDirty } =\n    useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        if (!isOpen) setIsOpen(true);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (isOpen) {\n      (buttonWrapper.current?.children[0] as HTMLButtonElement).blur();\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (onChange) {\n      onChange(selectedValue);\n    }\n\n    isDirty && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n          [styles['select-listbox-trigger--not-valid']]: notValid,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;AAoBA,IAAa,IAAe,GAAkD,GAAO,MAAQ;CAC3F,IAAM,EACJ,YACA,UAAO,WACP,aACA,qBAAkB,SAClB,oBACA,cAAW,IACX,cAAW,OACT,GACE,IAAgB,EAAwB,IAAI,GAC5C,EAAE,cAAW,WAAQ,kBAAe,kBAAe,cAAW,mBAAgB,YAAS,eAC3F,EAAU,KAAK,CAAC,GAEZ,KAAoB,MAA4C;EACpE,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,kBAAkB,GAClC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,kBAAkB,CAAC,CAAC,WAAW,CAAG,CACjF;GACA,IAAI,MAA6B,IAAI;IAGnC,AAFA,EAAe,CAAwB,GAClC,KAAQ,EAAU,EAAI,GAC3B,EAAM,eAAe;IACrB;GACF;EACF;EAEA,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,IADA,EAAM,eAAe,GACjB,CAAC,GAAQ;KACX,EAAU,EAAI;KACd;IACF;IACA;GACF,KAAK;IACH,AAAI,MACF,EAAM,gBAAgB,GACtB,EAAe,EAAQ,WAAW,MAAW,EAAO,UAAU,GAAe,KAAK,CAAC,GACnF,EAAU,EAAK;IAEjB;EACJ;CACF;CAkBA,OAhBA,QAAgB;EACd,AAAI,MACD,EAAc,SAAS,SAAS,GAAA,CAAyB,KAAK;CAEnE,GAAG,CAAC,CAAM,CAAC,GAEX,QAAgB;EAKd,AAJI,KACF,EAAS,CAAa,GAGxB,MAAY,EAAc,SAAS,SAAS,GAAA,CAAyB,MAAM;CAG7E,GAAG,CAAC,CAAa,CAAC,GAGhB,kBAAC,QAAD;EAAM,KAAK;YACT,kBAAC,UAAD;GACE,WAAW,EAAK,EAAO,2BAA2B,EAAO,2BAA2B,MAAS;KAC1F,EAAO,2BAA2B,OAAa;KAC/C,EAAO,kCAAkC;KACzC,EAAO,uCAAuC;GACjD,CAAC;GACD,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,iBAAc;GACd,cAAY,GAAG,EAAc;GACnB;GACV,iBAAe;GACf,GAAK,KAAO,EAAO,OAAI;aAdzB,CAgBE,kBAAC,QAAD;IAAM,WAAW,EAAO;cACrB,EAAc;GACX,CAAA,GAEN,kBAAC,GAAD;IACE,WAAW,EAAK,EAAO,gCAAgC,GACpD,EAAO,uCAAuC,EACjD,CAAC;IACD,MAAK;IACL,MAAM;GACP,CAAA,CACK;;CACJ,CAAA;AAEV,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KAAgB,EAAE,WAAQ,UAAO,iBAAc,kBAAkC;CAC5F,IAAM,IAAkB,EAAsB,IAAI,GAC5C,EAAE,WAAQ,gBAAa,mBAAgB,kBAAe,qBAAkB,cAAW,eAAY,EAAU,GAEzG,KAAsB,MAAmB;EAE7C,AADA,EAAiB,EAAQ,EAAO,GAChC,EAAU,EAAK;CACjB,GAEM,KAAmB,MAAwC;EAC/D,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,kBAAkB,GAClC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,kBAAkB,EAAE,WAAW,CAAG,CACjF;GACA,IAAI,MAA6B,IAAI;IAEnC,AADA,EAAe,CAAwB,GACvC,EAAM,eAAe;IACrB;GACF;EACF;EAEA,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,eAAe,GACjB,KACF,EAAU,EAAK;IAEjB;GACF,KAAK;GACL,KAAK;IAEH,IADA,EAAM,eAAe,GACjB,CAAC,GACH;IAKF,AAHI,EAAM,QAAQ,eAAe,IAAc,EAAQ,SAAS,KAC9D,EAAe,IAAc,CAAC,GAE5B,EAAM,QAAQ,aAAa,IAAc,KAC3C,EAAe,IAAc,CAAC;IAEhC;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACjB,GAAS,UAAU,IAAc,MAAM,CAAC,EAAQ,GAAa,YAC/D,EAAmB,CAAW;IAEhC;GACF,KAAK;IACH,AAAI,MACF,EAAM,gBAAgB,GACtB,EAAU,EAAK;IAEjB;EACJ;CACF;CAcA,OAZA,QAAgB;EACd,AAAI,MAAU,MACZ,IAAS,EAAgB,SAAS,MAAM,IAAI,EAAgB,SAAS,KAAK;CAE9E,GAAG;EAAC;EAAa;EAAO;CAAM,CAAC,GAE/B,QAAgB;EACd,AAAI,EAAc,UAAU,EAAO,SACjC,EAAe,CAAK;CAExB,GAAG;EAAC;EAAO,EAAO;EAAO,EAAc;EAAO;CAAc,CAAC,GAG3D,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,0BAA0B;IAC9C,EAAO,mCAAmC,MAAU;IACpD,EAAO,oCAAoC,IAAQ,MAAM;EAC5D,CAAC;EAED,GAAK,CAAC,EAAO,YAAY;GACvB,eAAe,EAAiB,CAAM;GACtC,WAAW;GACX,UAAU;GACV,MAAM;GACN,iBAAiB,EAAc,UAAU,EAAO;EAClD;EACA,KAAK;EAEJ;CACC,GAXG,GAAG,EAAO,OAWb,GACH,IAAQ,MAAM,KAAgB,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA2B,eAAY;CAAQ,CAAA,CACrG,EAAA,CAAA;AAEN"}
+{"version":3,"file":"SelectOption.js","names":[],"sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n  option: OptionValue;\n  index: number;\n  key: string | number;\n  dividerAfter?: number;\n  children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n  const selectOptionRef = useRef<HTMLLIElement>(null);\n  const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n  const handleSelectOption = (aIndex: number) => {\n    setSelectedValue(options[aIndex]);\n    setIsOpen(false);\n  };\n\n  const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Tab':\n        event.preventDefault();\n        if (isOpen) {\n          setIsOpen(false);\n        }\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!isOpen) {\n          return;\n        }\n        if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n          setActiveIndex(activeIndex + 1);\n        }\n        if (event.key === 'ArrowUp' && activeIndex > 0) {\n          setActiveIndex(activeIndex - 1);\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n          handleSelectOption(activeIndex);\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (index === activeIndex) {\n      isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n    }\n  }, [activeIndex, index, isOpen]);\n\n  useEffect(() => {\n    if (selectedValue.value === option.value) {\n      setActiveIndex(index);\n    }\n  }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n  return (\n    <>\n      <li\n        className={clsx(styles['select-listbox-option'], {\n          [styles['select-listbox-option--active']]: index === activeIndex,\n          [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n        })}\n        key={`${option.value}`}\n        {...(!option.disabled && {\n          onClick: () => setSelectedValue(option),\n          onKeyDown: onOptionKeyDown,\n          tabIndex: 0,\n          role: 'option',\n          'aria-selected': selectedValue.value === option.value,\n        })}\n        ref={selectOptionRef}\n      >\n        {children}\n      </li>\n      {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KAAgB,EAAE,WAAQ,UAAO,iBAAc,kBAAkC;CAC5F,IAAM,IAAkB,EAAsB,IAAI,GAC5C,EAAE,WAAQ,gBAAa,mBAAgB,kBAAe,qBAAkB,cAAW,eAAY,EAAU,GAEzG,KAAsB,MAAmB;EAE7C,AADA,EAAiB,EAAQ,EAAO,GAChC,EAAU,EAAK;CACjB,GAEM,KAAmB,MAAwC;EAC/D,IAAI,EAAM,IAAI,WAAW,GAAG;GAC1B,IAAM,IAAM,EAAM,IAAI,kBAAkB,GAClC,IAA2B,EAAQ,WACtC,MAAW,CAAC,EAAO,YAAY,EAAO,MAAM,kBAAkB,CAAC,CAAC,WAAW,CAAG,CACjF;GACA,IAAI,MAA6B,IAAI;IAEnC,AADA,EAAe,CAAwB,GACvC,EAAM,eAAe;IACrB;GACF;EACF;EAEA,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,eAAe,GACjB,KACF,EAAU,EAAK;IAEjB;GACF,KAAK;GACL,KAAK;IAEH,IADA,EAAM,eAAe,GACjB,CAAC,GACH;IAKF,AAHI,EAAM,QAAQ,eAAe,IAAc,EAAQ,SAAS,KAC9D,EAAe,IAAc,CAAC,GAE5B,EAAM,QAAQ,aAAa,IAAc,KAC3C,EAAe,IAAc,CAAC;IAEhC;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACjB,GAAS,UAAU,IAAc,MAAM,CAAC,EAAQ,EAAY,CAAC,YAC/D,EAAmB,CAAW;IAEhC;GACF,KAAK;IACH,AAAI,MACF,EAAM,gBAAgB,GACtB,EAAU,EAAK;IAEjB;EACJ;CACF;CAcA,OAZA,QAAgB;EACd,AAAI,MAAU,MACZ,IAAS,EAAgB,SAAS,MAAM,IAAI,EAAgB,SAAS,KAAK;CAE9E,GAAG;EAAC;EAAa;EAAO;CAAM,CAAC,GAE/B,QAAgB;EACd,AAAI,EAAc,UAAU,EAAO,SACjC,EAAe,CAAK;CAExB,GAAG;EAAC;EAAO,EAAO;EAAO,EAAc;EAAO;CAAc,CAAC,GAG3D,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,MAAD;EACE,WAAW,EAAK,EAAO,0BAA0B;IAC9C,EAAO,mCAAmC,MAAU;IACpD,EAAO,oCAAoC,IAAQ,MAAM;EAC5D,CAAC;EAED,GAAK,CAAC,EAAO,YAAY;GACvB,eAAe,EAAiB,CAAM;GACtC,WAAW;GACX,UAAU;GACV,MAAM;GACN,iBAAiB,EAAc,UAAU,EAAO;EAClD;EACA,KAAK;EAEJ;CACC,GAXG,GAAG,EAAO,OAWb,GACH,IAAQ,MAAM,KAAgB,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA2B,eAAY;CAAQ,CAAA,CACrG,EAAA,CAAA;AAEN"}

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n  '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/Slider',\r\n  component: Slider,\r\n  argTypes: {\r\n    onChange: {\r\n      action: 'Slider value',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: Slider,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n  const handleSliderChange = (value: number) => {\r\n    if (args.onChange) {\r\n      args.onChange(value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div style={{ width: '150px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} />\r\n      </div>\r\n      <div style={{ width: '300px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={40} />\r\n      </div>\r\n      <div style={{ width: '600px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={60} />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n  min: 0,\r\n  max: 100,\r\n  step: 5,\r\n  units: '%',\r\n  value: 80,\r\n};\r\n"],"mappings":";;AASA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO,EACL,SAAS,GACX;CACF,EACF;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAwBa,MAtB2B,MAAS;CAC/C,IAAM,KAAsB,MAAkB;EAC5C,AAAI,EAAK,YACP,EAAK,SAAS,CAAK;CAEvB;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,QAAQ;aAC3B,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;GAAqB,CAAA;EAC9C,CAAA;EACL,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;GAAO;aAC9C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;GAAK,CAAA;EACzD,CAAA;EACL,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;GAAO;aAC9C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;GAAK,CAAA;EACzD,CAAA;CACL,EAAA,CAAA;AAEN,GAEsC,KAAK,CAAC,CAAC;AAC7C,EAAc,OAAO;CACnB,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;AACT"}
+{"version":3,"file":"Slider.stories.js","names":[],"sources":["../../../src/components/Slider/Slider.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { SliderProps } from './Slider';\r\n\r\nimport { Slider } from './Slider';\r\n\r\nconst codeString =\r\n  '<Slider min={number} max={number} value?={number} step?={number} units?={string} onChange?={(value: number) => void} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Atoms/Slider',\r\n  component: Slider,\r\n  argTypes: {\r\n    onChange: {\r\n      action: 'Slider value',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n  },\r\n  parameters: {\r\n    inspectComponent: Slider,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<SliderProps>;\r\n\r\nconst Template: StoryFn<SliderProps> = (args) => {\r\n  const handleSliderChange = (value: number) => {\r\n    if (args.onChange) {\r\n      args.onChange(value);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div style={{ width: '150px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} />\r\n      </div>\r\n      <div style={{ width: '300px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={40} />\r\n      </div>\r\n      <div style={{ width: '600px', marginTop: '40px' }}>\r\n        <Slider {...args} onChange={handleSliderChange} value={60} />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nexport const SliderExample = Template.bind({});\r\nSliderExample.args = {\r\n  min: 0,\r\n  max: 100,\r\n  step: 5,\r\n  units: '%',\r\n  value: 80,\r\n};\r\n"],"mappings":";;AASA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO,EACL,SAAS,GACX;CACF,EACF;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAwBa,MAtB2B,MAAS;CAC/C,IAAM,KAAsB,MAAkB;EAC5C,AAAI,EAAK,YACP,EAAK,SAAS,CAAK;CAEvB;CAEA,OACE,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,OAAO,EAAE,OAAO,QAAQ;aAC3B,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;GAAqB,CAAA;EAC9C,CAAA;EACL,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;GAAO;aAC9C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;GAAK,CAAA;EACzD,CAAA;EACL,kBAAC,OAAD;GAAK,OAAO;IAAE,OAAO;IAAS,WAAW;GAAO;aAC9C,kBAAC,GAAD;IAAQ,GAAI;IAAM,UAAU;IAAoB,OAAO;GAAK,CAAA;EACzD,CAAA;CACL,EAAA,CAAA;AAEN,EAE6B,CAAS,KAAK,CAAC,CAAC;AAC7C,EAAc,OAAO;CACnB,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO;CACP,OAAO;AACT"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.stories.js","names":[],"sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n  childrenData: [\n    { title: 'item-1', value: 1 },\n    { title: 'item-2', value: 2 },\n    { title: 'item-3', value: 3 },\n    { title: 'item-4', value: 4 },\n    { title: 'item-5', value: 5 },\n  ],\n};\n"],"mappings":";;;;;;AAgBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,UAAU,EACR,OAAO,EACL,SAAS,GACX,EACF;EACA,qBAAqB,EACnB,OAAO,EACL,SAAS,GACX,EACF;CACF;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAEM,IAAsC;CAC1C,qBAAqB;CACrB,QAAQ,EAAG;AACb,GAEM,IAAY;CAAC;CAAU;CAAU;CAAU;CAAU;AAAQ,GAE7D,KAAoC,MAAS,kBAAC,GAAD;CAAU,GAAI;WAAO;AAAoB,CAAA,GAE/E,IAAkB,EAAS,KAAK,CAAC,CAAC;AAC/C,EAAgB,OAAO,EACrB,GAAG,EACL;AAEA,IAAa,IAAkB,EAAS,KAAK,CAAC,CAAC;AAC/C,EAAgB,OAAO;CACrB,GAAG;CACH,qBAAqB;AACvB;AAiBA,IAAa,MAfoC,MAC/C,kBAAC,GAAD;CAAU,GAAI;WACX,EAAU,KAAK,MACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,OAAO,EAAE,OAAO,OAAO;YAC1B,kBAAC,GAAD;GAAuB,IAAI;GAAM,aAAa;EAAO,GAApC,CAAoC;CAClD,CAAA,GACL,kBAAC,GAAD;EAAQ,SAAQ;YACd,kBAAC,GAAD;GAAM,MAAK;GAAQ,OAAM;EAAa,CAAA;CAChC,CAAA,CACA,EAAA,GAPK,CAOL,CACX;AACO,CAAA,GAGuC,KAAK,CAAC,CAAC;AAC1D,EAAoB,OAAO;CACzB,GAAG;CACH,cAAc;EACZ;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;CAC9B;AACF"}
+{"version":3,"file":"Sortable.stories.js","names":[],"sources":["../../../src/components/Sortable/Sortable.stories.tsx"],"sourcesContent":["import { fn } from 'storybook/test';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { SortableProps } from './Sortable';\n\nimport { Sortable } from './Sortable';\n\nimport { InputField } from 'components/InputField';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Buttons';\n\nconst codeString = `<Sortable onSort={onSortFunction} ItemHandlePlacement={ItemHandlePlacement} scrollable={scrollable} \n    disabled={ disabled } hideNumbers={ hideNumbers } sortableItemColor={ sortableItemColor } > { children } </ Sortable > `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Organisms/Sortable',\n  component: Sortable,\n  argTypes: {\n    children: {\n      table: {\n        disable: true,\n      },\n    },\n    ItemHandlePlacement: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  parameters: {\n    inspectComponent: Sortable,\n    codeString: codeString,\n  },\n} as Meta<SortableProps>;\n\nconst defaultArgs: Partial<SortableProps> = {\n  ItemHandlePlacement: 'left',\n  onSort: fn(),\n};\n\nconst mockItems = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5'];\n\nconst Template: StoryFn<SortableProps> = (args) => <Sortable {...args}>{mockItems}</Sortable>;\n\nexport const SortableExample = Template.bind({});\nSortableExample.args = {\n  ...defaultArgs,\n};\n\nexport const withHandleRight = Template.bind({});\nwithHandleRight.args = {\n  ...defaultArgs,\n  ItemHandlePlacement: 'right',\n};\n\nconst TemplateComplex: StoryFn<SortableProps> = (args) => (\n  <Sortable {...args}>\n    {mockItems.map((item) => (\n      <Fragment key={item}>\n        <div style={{ width: '100%' }}>\n          <InputField key={item} id={item} placeholder={item} />\n        </div>\n        <Button variant=\"blank-icon\">\n          <Icon name=\"Trash\" color=\"#a0002aff\" />\n        </Button>\n      </Fragment>\n    ))}\n  </Sortable>\n);\n\nexport const WithComplexChildren = TemplateComplex.bind({});\nWithComplexChildren.args = {\n  ...defaultArgs,\n  childrenData: [\n    { title: 'item-1', value: 1 },\n    { title: 'item-2', value: 2 },\n    { title: 'item-3', value: 3 },\n    { title: 'item-4', value: 4 },\n    { title: 'item-5', value: 5 },\n  ],\n};\n"],"mappings":";;;;;;AAgBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,UAAU,EACR,OAAO,EACL,SAAS,GACX,EACF;EACA,qBAAqB,EACnB,OAAO,EACL,SAAS,GACX,EACF;CACF;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAEM,IAAsC;CAC1C,qBAAqB;CACrB,QAAQ,EAAG;AACb,GAEM,IAAY;CAAC;CAAU;CAAU;CAAU;CAAU;AAAQ,GAE7D,KAAoC,MAAS,kBAAC,GAAD;CAAU,GAAI;WAAO;AAAoB,CAAA,GAE/E,IAAkB,EAAS,KAAK,CAAC,CAAC;AAC/C,EAAgB,OAAO,EACrB,GAAG,EACL;AAEA,IAAa,IAAkB,EAAS,KAAK,CAAC,CAAC;AAC/C,EAAgB,OAAO;CACrB,GAAG;CACH,qBAAqB;AACvB;AAiBA,IAAa,MAfoC,MAC/C,kBAAC,GAAD;CAAU,GAAI;WACX,EAAU,KAAK,MACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,OAAO,EAAE,OAAO,OAAO;YAC1B,kBAAC,GAAD;GAAuB,IAAI;GAAM,aAAa;EAAO,GAApC,CAAoC;CAClD,CAAA,GACL,kBAAC,GAAD;EAAQ,SAAQ;YACd,kBAAC,GAAD;GAAM,MAAK;GAAQ,OAAM;EAAa,CAAA;CAChC,CAAA,CACA,EAAA,GAPK,CAOL,CACX;AACO,CAAA,EAGuB,CAAgB,KAAK,CAAC,CAAC;AAC1D,EAAoB,OAAO;CACzB,GAAG;CACH,cAAc;EACZ;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;EAC5B;GAAE,OAAO;GAAU,OAAO;EAAE;CAC9B;AACF"}

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

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

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

@@ -1,6 +1,6 @@
-import "../../dist-C6Ar8a59.js";
+import "../../dist-oLwM--0y.js";
 import { t as e } from "../../StatusBage-hJmNPqtk.js";
-import { i as t, n } from "../../react.esm-56DGmlLk.js";
+import { i as t, n } from "../../react.esm-DwWzhs9e.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/StatusBadge/StatusBadge.test.tsx
 describe("StatusBadge", () => {

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.test.js","names":[],"sources":["../../../src/components/StatusBadge/StatusBadge.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { StatusBadge } from './StatusBage';\n\ndescribe('StatusBadge', () => {\n  it('should render with message', () => {\n    render(<StatusBadge label=\"Status message\" />);\n    expect(screen.getByText('Status message')).toBeInTheDocument();\n  });\n\n  it('should render with highContract', () => {\n    render(<StatusBadge label=\"Status message\" highContrast={true} />);\n    expect(screen.getByText('Status message')).toHaveClass('statusbadge--high-contrast');\n  });\n});\n"],"mappings":";;;;;AAKA,SAAS,qBAAqB;CAM5B,AALA,GAAG,oCAAoC;EAErC,AADA,EAAO,kBAAC,GAAD,EAAa,OAAM,iBAAkB,CAAA,CAAC,GAC7C,OAAO,EAAO,UAAU,gBAAgB,CAAC,EAAE,kBAAkB;CAC/D,CAAC,GAED,GAAG,yCAAyC;EAE1C,AADA,EAAO,kBAAC,GAAD;GAAa,OAAM;GAAiB,cAAc;EAAO,CAAA,CAAC,GACjE,OAAO,EAAO,UAAU,gBAAgB,CAAC,EAAE,YAAY,4BAA4B;CACrF,CAAC;AACH,CAAC"}
+{"version":3,"file":"StatusBadge.test.js","names":[],"sources":["../../../src/components/StatusBadge/StatusBadge.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { StatusBadge } from './StatusBage';\n\ndescribe('StatusBadge', () => {\n  it('should render with message', () => {\n    render(<StatusBadge label=\"Status message\" />);\n    expect(screen.getByText('Status message')).toBeInTheDocument();\n  });\n\n  it('should render with highContract', () => {\n    render(<StatusBadge label=\"Status message\" highContrast={true} />);\n    expect(screen.getByText('Status message')).toHaveClass('statusbadge--high-contrast');\n  });\n});\n"],"mappings":";;;;;AAKA,SAAS,qBAAqB;CAM5B,AALA,GAAG,oCAAoC;EAErC,AADA,EAAO,kBAAC,GAAD,EAAa,OAAM,iBAAkB,CAAA,CAAC,GAC7C,OAAO,EAAO,UAAU,gBAAgB,CAAC,CAAC,CAAC,kBAAkB;CAC/D,CAAC,GAED,GAAG,yCAAyC;EAE1C,AADA,EAAO,kBAAC,GAAD;GAAa,OAAM;GAAiB,cAAc;EAAO,CAAA,CAAC,GACjE,OAAO,EAAO,UAAU,gBAAgB,CAAC,CAAC,CAAC,YAAY,4BAA4B;CACrF,CAAC;AACH,CAAC"}

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

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

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

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

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

@@ -1,7 +1,7 @@
-import "../../dist-C6Ar8a59.js";
+import "../../dist-oLwM--0y.js";
 import { t as e } from "../../TextArea-D_VoyGIO.js";
-import { i as t, n, t as r } from "../../react.esm-56DGmlLk.js";
-import { t as i } from "../../esm-B6Pg-v2v.js";
+import { i as t, n, t as r } from "../../react.esm-DwWzhs9e.js";
+import { t as i } from "../../esm-BXzGXYWZ.js";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/TextArea/TextArea.test.tsx
 describe("TextArea", () => {

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.test.js","names":[],"sources":["../../../src/components/TextArea/TextArea.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nimport { TextArea } from './TextArea';\n\ndescribe('TextArea', () => {\n  it('should render correctly with label', () => {\n    render(<TextArea onChange={jest.fn()} label=\"Test Label\" />);\n    expect(screen.getByText('Test Label')).toBeInTheDocument();\n  });\n\n  it('should call onChange when text is entered', () => {\n    const handleChange = jest.fn();\n    render(<TextArea onChange={handleChange} />);\n\n    const textarea = screen.getByRole('textbox');\n    fireEvent.input(textarea, { target: { value: 'Hello' } });\n    expect(handleChange).toHaveBeenCalledWith('Hello');\n  });\n\n  it('should update character count', () => {\n    render(<TextArea onChange={jest.fn()} label=\"Test\" maxCharacters={10} />);\n\n    const textarea = screen.getByRole('textbox');\n    fireEvent.input(textarea, { target: { value: 'Test' } });\n\n    expect(screen.getByText('4')).toBeInTheDocument();\n    expect(screen.getByText('/ 10')).toBeInTheDocument();\n  });\n\n  it('should not exceed max characters limit', async () => {\n    const handleChange = jest.fn();\n    render(<TextArea onChange={handleChange} maxCharacters={5} />);\n\n    const textarea = screen.getByRole('textbox');\n\n    await userEvent.type(textarea, 'ExceedsLimit');\n\n    expect(handleChange).toHaveBeenCalled();\n    // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n    expect(handleChange.mock.calls[handleChange.mock.calls.length - 1][0].length).toBe(5);\n  });\n});\n"],"mappings":";;;;;;AAMA,SAAS,kBAAkB;CAyBzB,AAxBA,GAAG,4CAA4C;EAE7C,AADA,EAAO,kBAAC,GAAD;GAAU,UAAU,KAAK,GAAG;GAAG,OAAM;EAAc,CAAA,CAAC,GAC3D,OAAO,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB;CAC3D,CAAC,GAED,GAAG,mDAAmD;EACpD,IAAM,IAAe,KAAK,GAAG;EAC7B,EAAO,kBAAC,GAAD,EAAU,UAAU,EAAe,CAAA,CAAC;EAE3C,IAAM,IAAW,EAAO,UAAU,SAAS;EAE3C,AADA,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,QAAQ,EAAE,CAAC,GACxD,OAAO,CAAY,EAAE,qBAAqB,OAAO;CACnD,CAAC,GAED,GAAG,uCAAuC;EACxC,EAAO,kBAAC,GAAD;GAAU,UAAU,KAAK,GAAG;GAAG,OAAM;GAAO,eAAe;EAAK,CAAA,CAAC;EAExE,IAAM,IAAW,EAAO,UAAU,SAAS;EAI3C,AAHA,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,OAAO,EAAE,CAAC,GAEvD,OAAO,EAAO,UAAU,GAAG,CAAC,EAAE,kBAAkB,GAChD,OAAO,EAAO,UAAU,MAAM,CAAC,EAAE,kBAAkB;CACrD,CAAC,GAED,GAAG,0CAA0C,YAAY;EACvD,IAAM,IAAe,KAAK,GAAG;EAC7B,EAAO,kBAAC,GAAD;GAAU,UAAU;GAAc,eAAe;EAAI,CAAA,CAAC;EAE7D,IAAM,IAAW,EAAO,UAAU,SAAS;EAM3C,AAJA,MAAM,EAAU,KAAK,GAAU,cAAc,GAE7C,OAAO,CAAY,EAAE,iBAAiB,GAEtC,OAAO,EAAa,KAAK,MAAM,EAAa,KAAK,MAAM,SAAS,GAAG,GAAG,MAAM,EAAE,KAAK,CAAC;CACtF,CAAC;AACH,CAAC"}
+{"version":3,"file":"TextArea.test.js","names":[],"sources":["../../../src/components/TextArea/TextArea.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nimport { TextArea } from './TextArea';\n\ndescribe('TextArea', () => {\n  it('should render correctly with label', () => {\n    render(<TextArea onChange={jest.fn()} label=\"Test Label\" />);\n    expect(screen.getByText('Test Label')).toBeInTheDocument();\n  });\n\n  it('should call onChange when text is entered', () => {\n    const handleChange = jest.fn();\n    render(<TextArea onChange={handleChange} />);\n\n    const textarea = screen.getByRole('textbox');\n    fireEvent.input(textarea, { target: { value: 'Hello' } });\n    expect(handleChange).toHaveBeenCalledWith('Hello');\n  });\n\n  it('should update character count', () => {\n    render(<TextArea onChange={jest.fn()} label=\"Test\" maxCharacters={10} />);\n\n    const textarea = screen.getByRole('textbox');\n    fireEvent.input(textarea, { target: { value: 'Test' } });\n\n    expect(screen.getByText('4')).toBeInTheDocument();\n    expect(screen.getByText('/ 10')).toBeInTheDocument();\n  });\n\n  it('should not exceed max characters limit', async () => {\n    const handleChange = jest.fn();\n    render(<TextArea onChange={handleChange} maxCharacters={5} />);\n\n    const textarea = screen.getByRole('textbox');\n\n    await userEvent.type(textarea, 'ExceedsLimit');\n\n    expect(handleChange).toHaveBeenCalled();\n    // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n    expect(handleChange.mock.calls[handleChange.mock.calls.length - 1][0].length).toBe(5);\n  });\n});\n"],"mappings":";;;;;;AAMA,SAAS,kBAAkB;CAyBzB,AAxBA,GAAG,4CAA4C;EAE7C,AADA,EAAO,kBAAC,GAAD;GAAU,UAAU,KAAK,GAAG;GAAG,OAAM;EAAc,CAAA,CAAC,GAC3D,OAAO,EAAO,UAAU,YAAY,CAAC,CAAC,CAAC,kBAAkB;CAC3D,CAAC,GAED,GAAG,mDAAmD;EACpD,IAAM,IAAe,KAAK,GAAG;EAC7B,EAAO,kBAAC,GAAD,EAAU,UAAU,EAAe,CAAA,CAAC;EAE3C,IAAM,IAAW,EAAO,UAAU,SAAS;EAE3C,AADA,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,QAAQ,EAAE,CAAC,GACxD,OAAO,CAAY,CAAC,CAAC,qBAAqB,OAAO;CACnD,CAAC,GAED,GAAG,uCAAuC;EACxC,EAAO,kBAAC,GAAD;GAAU,UAAU,KAAK,GAAG;GAAG,OAAM;GAAO,eAAe;EAAK,CAAA,CAAC;EAExE,IAAM,IAAW,EAAO,UAAU,SAAS;EAI3C,AAHA,EAAU,MAAM,GAAU,EAAE,QAAQ,EAAE,OAAO,OAAO,EAAE,CAAC,GAEvD,OAAO,EAAO,UAAU,GAAG,CAAC,CAAC,CAAC,kBAAkB,GAChD,OAAO,EAAO,UAAU,MAAM,CAAC,CAAC,CAAC,kBAAkB;CACrD,CAAC,GAED,GAAG,0CAA0C,YAAY;EACvD,IAAM,IAAe,KAAK,GAAG;EAC7B,EAAO,kBAAC,GAAD;GAAU,UAAU;GAAc,eAAe;EAAI,CAAA,CAAC;EAE7D,IAAM,IAAW,EAAO,UAAU,SAAS;EAM3C,AAJA,MAAM,EAAU,KAAK,GAAU,cAAc,GAE7C,OAAO,CAAY,CAAC,CAAC,iBAAiB,GAEtC,OAAO,EAAa,KAAK,MAAM,EAAa,KAAK,MAAM,SAAS,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;CACtF,CAAC;AACH,CAAC"}

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import "../../dist-C6Ar8a59.js";
+import "../../dist-oLwM--0y.js";
 import { t as e } from "../../VarIndicator-D0cnlcIf.js";
-import { a as t, i as n, n as r } from "../../react.esm-56DGmlLk.js";
-import { t as i } from "../../esm-B6Pg-v2v.js";
+import { a as t, i as n, n as r } from "../../react.esm-DwWzhs9e.js";
+import { t as i } from "../../esm-BXzGXYWZ.js";
 import { useState as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/components/VarIndicator/VarIndicator.test.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"VarIndicator.test.js","names":[],"sources":["../../../src/components/VarIndicator/VarIndicator.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { useState } from 'react';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n  DRAFT: 'Concept',\n  REJECTED: 'Concept',\n  SUBMITTED: 'Verificatie',\n  ACTIVE: 'Actief',\n};\n\njest.mock('components/Icon', () => ({\n  Icon: ({ name }: { name: string }) => <svg data-testid={name} />,\n}));\n\nconst TestWrapper = () => {\n  const [currentStep, setCurrentStep] = useState(1);\n  return (\n    // When clicked the onClick callback updates currentStep from 1 to 2.\n    <VarIndicator\n      label={LABELS}\n      variant=\"SUBMITTED\"\n      maxSteps={3}\n      currentStep={currentStep}\n      onClick={() => setCurrentStep(2)}\n    />\n  );\n};\n\ndescribe('VarIndicator', () => {\n  const onClickSpy = jest.fn();\n\n  beforeEach(() => {\n    onClickSpy.mockClear();\n  });\n\n  it('should render Concept (DRAFT)', () => {\n    render(<VarIndicator label={LABELS} variant=\"DRAFT\" />);\n    expect(screen.getByText('Concept')).toBeInTheDocument();\n  });\n\n  it('should render Concept (REJECTED)', () => {\n    render(<VarIndicator label={LABELS} variant=\"REJECTED\" />);\n    expect(screen.getByText('Concept')).toBeInTheDocument();\n  });\n\n  it('should render Concept (ACTIVE)', () => {\n    render(<VarIndicator label={LABELS} variant=\"ACTIVE\" />);\n    expect(screen.getByText('Actief')).toBeInTheDocument();\n  });\n\n  it('should render dots (SUBMITTED)', () => {\n    render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={0} />);\n    expect(screen.getByText('Verificatie')).toBeInTheDocument();\n    expect(screen.getAllByTestId('CircleSmall')).toHaveLength(3);\n    expect(screen.queryByTestId('CircleSmallFilled')).not.toBeInTheDocument();\n  });\n\n  it('should render filled dots when currentStep != 0 (SUBMITTED)', () => {\n    render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={1} onClick={onClickSpy} />);\n    const verificationButton = screen.getByText('Verificatie');\n    expect(verificationButton).toBeInTheDocument();\n    expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n    expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n  });\n\n  it('should render filled dots currentStep is updated (SUBMITTED)', async () => {\n    render(<TestWrapper />);\n    expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n    expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n    const verificationButton = screen.getByText('Verificatie');\n    await userEvent.click(verificationButton);\n    await waitFor(() => {\n      expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(2);\n    });\n    await waitFor(() => {\n      expect(screen.getAllByTestId('CircleSmall')).toHaveLength(1);\n    });\n  });\n});\n"],"mappings":";;;;;;;AAQA,IAAM,IAAS;CACb,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;AACV;AAEA,KAAK,KAAK,0BAA0B,EAClC,OAAO,EAAE,cAA6B,kBAAC,OAAD,EAAK,eAAa,EAAO,CAAA,EACjE,EAAE;AAEF,IAAM,UAAoB;CACxB,IAAM,CAAC,GAAa,KAAkB,EAAS,CAAC;CAChD,OAEE,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,UAAU;EACG;EACb,eAAe,EAAe,CAAC;CAChC,CAAA;AAEL;AAEA,SAAS,sBAAsB;CAC7B,IAAM,IAAa,KAAK,GAAG;CAoC3B,AAlCA,iBAAiB;EACf,EAAW,UAAU;CACvB,CAAC,GAED,GAAG,uCAAuC;EAExC,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;EAAS,CAAA,CAAC,GACtD,OAAO,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;CACxD,CAAC,GAED,GAAG,0CAA0C;EAE3C,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;EAAY,CAAA,CAAC,GACzD,OAAO,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;CACxD,CAAC,GAED,GAAG,wCAAwC;EAEzC,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;EAAU,CAAA,CAAC,GACvD,OAAO,EAAO,UAAU,QAAQ,CAAC,EAAE,kBAAkB;CACvD,CAAC,GAED,GAAG,wCAAwC;EAIzC,AAHA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;EAAI,CAAA,CAAC,GACvF,OAAO,EAAO,UAAU,aAAa,CAAC,EAAE,kBAAkB,GAC1D,OAAO,EAAO,eAAe,aAAa,CAAC,EAAE,aAAa,CAAC,GAC3D,OAAO,EAAO,cAAc,mBAAmB,CAAC,EAAE,IAAI,kBAAkB;CAC1E,CAAC,GAED,GAAG,qEAAqE;EACtE,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;GAAG,SAAS;EAAa,CAAA,CAAC;EAC5G,IAAM,IAAqB,EAAO,UAAU,aAAa;EAGzD,AAFA,OAAO,CAAkB,EAAE,kBAAkB,GAC7C,OAAO,EAAO,eAAe,mBAAmB,CAAC,EAAE,aAAa,CAAC,GACjE,OAAO,EAAO,eAAe,aAAa,CAAC,EAAE,aAAa,CAAC;CAC7D,CAAC,GAED,GAAG,gEAAgE,YAAY;EAG7E,AAFA,EAAO,kBAAC,GAAD,CAAc,CAAA,CAAC,GACtB,OAAO,EAAO,eAAe,mBAAmB,CAAC,EAAE,aAAa,CAAC,GACjE,OAAO,EAAO,eAAe,aAAa,CAAC,EAAE,aAAa,CAAC;EAC3D,IAAM,IAAqB,EAAO,UAAU,aAAa;EAKzD,AAJA,MAAM,EAAU,MAAM,CAAkB,GACxC,MAAM,QAAc;GAClB,OAAO,EAAO,eAAe,mBAAmB,CAAC,EAAE,aAAa,CAAC;EACnE,CAAC,GACD,MAAM,QAAc;GAClB,OAAO,EAAO,eAAe,aAAa,CAAC,EAAE,aAAa,CAAC;EAC7D,CAAC;CACH,CAAC;AACH,CAAC"}
+{"version":3,"file":"VarIndicator.test.js","names":[],"sources":["../../../src/components/VarIndicator/VarIndicator.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { useState } from 'react';\n\nimport { VarIndicator } from './VarIndicator';\n\nconst LABELS = {\n  DRAFT: 'Concept',\n  REJECTED: 'Concept',\n  SUBMITTED: 'Verificatie',\n  ACTIVE: 'Actief',\n};\n\njest.mock('components/Icon', () => ({\n  Icon: ({ name }: { name: string }) => <svg data-testid={name} />,\n}));\n\nconst TestWrapper = () => {\n  const [currentStep, setCurrentStep] = useState(1);\n  return (\n    // When clicked the onClick callback updates currentStep from 1 to 2.\n    <VarIndicator\n      label={LABELS}\n      variant=\"SUBMITTED\"\n      maxSteps={3}\n      currentStep={currentStep}\n      onClick={() => setCurrentStep(2)}\n    />\n  );\n};\n\ndescribe('VarIndicator', () => {\n  const onClickSpy = jest.fn();\n\n  beforeEach(() => {\n    onClickSpy.mockClear();\n  });\n\n  it('should render Concept (DRAFT)', () => {\n    render(<VarIndicator label={LABELS} variant=\"DRAFT\" />);\n    expect(screen.getByText('Concept')).toBeInTheDocument();\n  });\n\n  it('should render Concept (REJECTED)', () => {\n    render(<VarIndicator label={LABELS} variant=\"REJECTED\" />);\n    expect(screen.getByText('Concept')).toBeInTheDocument();\n  });\n\n  it('should render Concept (ACTIVE)', () => {\n    render(<VarIndicator label={LABELS} variant=\"ACTIVE\" />);\n    expect(screen.getByText('Actief')).toBeInTheDocument();\n  });\n\n  it('should render dots (SUBMITTED)', () => {\n    render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={0} />);\n    expect(screen.getByText('Verificatie')).toBeInTheDocument();\n    expect(screen.getAllByTestId('CircleSmall')).toHaveLength(3);\n    expect(screen.queryByTestId('CircleSmallFilled')).not.toBeInTheDocument();\n  });\n\n  it('should render filled dots when currentStep != 0 (SUBMITTED)', () => {\n    render(<VarIndicator label={LABELS} variant=\"SUBMITTED\" maxSteps={3} currentStep={1} onClick={onClickSpy} />);\n    const verificationButton = screen.getByText('Verificatie');\n    expect(verificationButton).toBeInTheDocument();\n    expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n    expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n  });\n\n  it('should render filled dots currentStep is updated (SUBMITTED)', async () => {\n    render(<TestWrapper />);\n    expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(1);\n    expect(screen.getAllByTestId('CircleSmall')).toHaveLength(2);\n    const verificationButton = screen.getByText('Verificatie');\n    await userEvent.click(verificationButton);\n    await waitFor(() => {\n      expect(screen.getAllByTestId('CircleSmallFilled')).toHaveLength(2);\n    });\n    await waitFor(() => {\n      expect(screen.getAllByTestId('CircleSmall')).toHaveLength(1);\n    });\n  });\n});\n"],"mappings":";;;;;;;AAQA,IAAM,IAAS;CACb,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;AACV;AAEA,KAAK,KAAK,0BAA0B,EAClC,OAAO,EAAE,cAA6B,kBAAC,OAAD,EAAK,eAAa,EAAO,CAAA,EACjE,EAAE;AAEF,IAAM,UAAoB;CACxB,IAAM,CAAC,GAAa,KAAkB,EAAS,CAAC;CAChD,OAEE,kBAAC,GAAD;EACE,OAAO;EACP,SAAQ;EACR,UAAU;EACG;EACb,eAAe,EAAe,CAAC;CAChC,CAAA;AAEL;AAEA,SAAS,sBAAsB;CAC7B,IAAM,IAAa,KAAK,GAAG;CAoC3B,AAlCA,iBAAiB;EACf,EAAW,UAAU;CACvB,CAAC,GAED,GAAG,uCAAuC;EAExC,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;EAAS,CAAA,CAAC,GACtD,OAAO,EAAO,UAAU,SAAS,CAAC,CAAC,CAAC,kBAAkB;CACxD,CAAC,GAED,GAAG,0CAA0C;EAE3C,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;EAAY,CAAA,CAAC,GACzD,OAAO,EAAO,UAAU,SAAS,CAAC,CAAC,CAAC,kBAAkB;CACxD,CAAC,GAED,GAAG,wCAAwC;EAEzC,AADA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;EAAU,CAAA,CAAC,GACvD,OAAO,EAAO,UAAU,QAAQ,CAAC,CAAC,CAAC,kBAAkB;CACvD,CAAC,GAED,GAAG,wCAAwC;EAIzC,AAHA,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;EAAI,CAAA,CAAC,GACvF,OAAO,EAAO,UAAU,aAAa,CAAC,CAAC,CAAC,kBAAkB,GAC1D,OAAO,EAAO,eAAe,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,GAC3D,OAAO,EAAO,cAAc,mBAAmB,CAAC,CAAC,CAAC,IAAI,kBAAkB;CAC1E,CAAC,GAED,GAAG,qEAAqE;EACtE,EAAO,kBAAC,GAAD;GAAc,OAAO;GAAQ,SAAQ;GAAY,UAAU;GAAG,aAAa;GAAG,SAAS;EAAa,CAAA,CAAC;EAC5G,IAAM,IAAqB,EAAO,UAAU,aAAa;EAGzD,AAFA,OAAO,CAAkB,CAAC,CAAC,kBAAkB,GAC7C,OAAO,EAAO,eAAe,mBAAmB,CAAC,CAAC,CAAC,aAAa,CAAC,GACjE,OAAO,EAAO,eAAe,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;CAC7D,CAAC,GAED,GAAG,gEAAgE,YAAY;EAG7E,AAFA,EAAO,kBAAC,GAAD,CAAc,CAAA,CAAC,GACtB,OAAO,EAAO,eAAe,mBAAmB,CAAC,CAAC,CAAC,aAAa,CAAC,GACjE,OAAO,EAAO,eAAe,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;EAC3D,IAAM,IAAqB,EAAO,UAAU,aAAa;EAKzD,AAJA,MAAM,EAAU,MAAM,CAAkB,GACxC,MAAM,QAAc;GAClB,OAAO,EAAO,eAAe,mBAAmB,CAAC,CAAC,CAAC,aAAa,CAAC;EACnE,CAAC,GACD,MAAM,QAAc;GAClB,OAAO,EAAO,eAAe,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC;EAC7D,CAAC;CACH,CAAC;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"WeekSelector.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { OverlayContainer, useOverlay, usePreventScroll } from '@react-aria/overlays';\r\nimport { FocusScope } from '@react-aria/focus';\r\n\r\nimport type { CSSProperties, RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\nimport styles from './WeekSelector.module.css';\r\n\r\nimport { Backdrop } from 'components/Backdrop';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n  academicWeekNumber: number;\r\n  calendarWeekNumber: number;\r\n  isBlocked: boolean;\r\n  period: number;\r\n  startDate: string;\r\n  endDate: string;\r\n  weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n  /** Object with periodnumbers with array of weeks in period */\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  /** Current period to disable previous periods */\r\n  currentPeriod?: number;\r\n  /** Default selected week */\r\n  defaultSelection?: number;\r\n  /** Prefix for the week button label */\r\n  weekPrefix: string;\r\n  /** Labels for each period */\r\n  periodLabels: string[];\r\n  /** Header text for the options container */\r\n  optionsHeader: string;\r\n  /** Callback function when a week is selected */\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  /** Ref for the dropdown portal target */\r\n  portalContainerRef?: RefObject<HTMLElement | null>;\r\n  /** Optional WeekSelectorOptionContainer offset values [top, bottom] */\r\n  optionContainerOffset?: number[];\r\n}\r\n\r\nexport const WeekSelector = ({\r\n  weeks,\r\n  currentPeriod = 0,\r\n  defaultSelection,\r\n  weekPrefix,\r\n  optionsHeader,\r\n  periodLabels,\r\n  onSelectWeek,\r\n  portalContainerRef,\r\n  optionContainerOffset = [],\r\n}: WeekSelectorProps) => {\r\n  const [selectedOption, setSelectedOption] = useState<number | null>(null);\r\n  const [isOpen, setIsOpen] = useState<boolean>(false);\r\n  const wrapperRef = useRef<HTMLDivElement>(null);\r\n  const optionContainerRef = useRef<HTMLDivElement>(null);\r\n  const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n  useEffect(() => {\r\n    if (defaultSelection) {\r\n      for (const period in weeks) {\r\n        if (\r\n          weeks[period].some((week) => week.calendarWeekNumber === defaultSelection && !week.isBlocked) &&\r\n          Number(period) > currentPeriod\r\n        ) {\r\n          setSelectedOption(defaultSelection);\r\n          return;\r\n        }\r\n      }\r\n    }\r\n    for (const period in weeks) {\r\n      const firstAvailableWeek = weeks[period].find((week) => !week.isBlocked);\r\n      if (firstAvailableWeek && Number(period) > currentPeriod) {\r\n        setSelectedOption(firstAvailableWeek.calendarWeekNumber);\r\n        return;\r\n      }\r\n    }\r\n  }, [weeks, currentPeriod, defaultSelection]);\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      requestAnimationFrame(() => {\r\n        const selectedButton = optionContainerRef.current?.querySelector<HTMLButtonElement>(\r\n          `.${styles['week-selector-option-week--selected']}`\r\n        );\r\n        if (selectedButton) {\r\n          selectedButton.focus();\r\n        } else {\r\n          optionContainerRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();\r\n        }\r\n      });\r\n    }\r\n  }, [isOpen, selectedOption]);\r\n\r\n  const getButtonLabel = () => {\r\n    const weekNumber = selectedOption ?? defaultSelection ?? '?';\r\n    return `${weekPrefix} ${weekNumber}`;\r\n  };\r\n\r\n  useOnClickOutside(wrapperRef as RefObject<HTMLElement>, (event) => {\r\n    if (optionContainerRef.current && optionContainerRef.current.contains(event.target as Node)) {\r\n      return;\r\n    }\r\n    setIsOpen(false);\r\n  });\r\n\r\n  const { overlayProps, underlayProps } = useOverlay(\r\n    {\r\n      isOpen,\r\n      isDismissable: true,\r\n      onClose: () => setIsOpen(false),\r\n    },\r\n    optionContainerRef\r\n  );\r\n\r\n  usePreventScroll({ isDisabled: !isOpen || !portalContainerRef?.current });\r\n\r\n  const OptionList = (\r\n    <WeekSelectorOptionContainer\r\n      header={optionsHeader}\r\n      periodLabels={periodLabels}\r\n      ref={optionContainerRef}\r\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n      {...(optionContainerOffset.length === 2\r\n        ? {\r\n            style: {\r\n              top: optionContainerOffset[0],\r\n              left: optionContainerOffset[1],\r\n            } as CSSProperties,\r\n          }\r\n        : {})}\r\n    >\r\n      {periodKeys.map((periodIndex) => (\r\n        <WeekSelectorOption\r\n          key={periodIndex}\r\n          periodIndex={periodIndex}\r\n          weeks={weeks}\r\n          disabled={Number(periodIndex) <= currentPeriod}\r\n          selectedOption={selectedOption}\r\n          setSelectedOption={setSelectedOption}\r\n          onSelectWeek={onSelectWeek}\r\n          setIsOpen={setIsOpen}\r\n        />\r\n      ))}\r\n    </WeekSelectorOptionContainer>\r\n  );\r\n\r\n  return (\r\n    <div className={styles['week-selector']} tabIndex={-1} ref={wrapperRef}>\r\n      <WeekSelectorButton label={getButtonLabel()} onClick={() => setIsOpen(!isOpen)} />\r\n\r\n      {isOpen &&\r\n        (portalContainerRef?.current\r\n          ? createPortal(\r\n              <OverlayContainer>\r\n                <Backdrop {...underlayProps}>\r\n                  <FocusScope contain restoreFocus>\r\n                    <div {...overlayProps}>{OptionList}</div>\r\n                  </FocusScope>\r\n                </Backdrop>\r\n              </OverlayContainer>,\r\n              portalContainerRef.current\r\n            )\r\n          : OptionList)}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;AA8CA,IAAa,KAAgB,EAC3B,UACA,mBAAgB,GAChB,qBACA,eACA,kBACA,iBACA,iBACA,uBACA,2BAAwB,CAAC,QACF;CACvB,IAAM,CAAC,GAAgB,KAAqB,EAAwB,IAAI,GAClE,CAAC,GAAQ,KAAa,EAAkB,EAAK,GAC7C,IAAa,EAAuB,IAAI,GACxC,IAAqB,EAAuB,IAAI,GAChD,IAAa,QAAc,OAAO,KAAK,KAAS,CAAC,CAAC,GAAG,CAAC,CAAK,CAAC;CAuBlE,AArBA,QAAgB;EACd,IAAI;QACG,IAAM,KAAU,GACnB,IACE,EAAM,GAAQ,MAAM,MAAS,EAAK,uBAAuB,KAAoB,CAAC,EAAK,SAAS,KAC5F,OAAO,CAAM,IAAI,GACjB;IACA,EAAkB,CAAgB;IAClC;GACF;;EAGJ,KAAK,IAAM,KAAU,GAAO;GAC1B,IAAM,IAAqB,EAAM,GAAQ,MAAM,MAAS,CAAC,EAAK,SAAS;GACvE,IAAI,KAAsB,OAAO,CAAM,IAAI,GAAe;IACxD,EAAkB,EAAmB,kBAAkB;IACvD;GACF;EACF;CACF,GAAG;EAAC;EAAO;EAAe;CAAgB,CAAC,GAE3C,QAAgB;EACd,AAAI,KACF,4BAA4B;GAC1B,IAAM,IAAiB,EAAmB,SAAS,cACjD,IAAI,EAAO,wCACb;GACA,AAAI,IACF,EAAe,MAAM,IAErB,EAAmB,SAAS,cAAiC,uBAAuB,GAAG,MAAM;EAEjG,CAAC;CAEL,GAAG,CAAC,GAAQ,CAAc,CAAC;CAE3B,IAAM,UAEG,GAAG,EAAW,GADF,KAAkB,KAAoB;CAI3D,EAAkB,IAAuC,MAAU;EAC7D,EAAmB,WAAW,EAAmB,QAAQ,SAAS,EAAM,MAAc,KAG1F,EAAU,EAAK;CACjB,CAAC;CAED,IAAM,EAAE,iBAAc,qBAAkB,EACtC;EACE;EACA,eAAe;EACf,eAAe,EAAU,EAAK;CAChC,GACA,CACF;CAEA,EAAiB,EAAE,YAAY,CAAC,KAAU,CAAC,GAAoB,QAAQ,CAAC;CAExE,IAAM,IACJ,kBAAC,GAAD;EACE,QAAQ;EACM;EACd,KAAK;EAEL,GAAK,EAAsB,WAAW,IAClC,EACE,OAAO;GACL,KAAK,EAAsB;GAC3B,MAAM,EAAsB;EAC9B,EACF,IACA,CAAC;YAEJ,EAAW,KAAK,MACf,kBAAC,GAAD;GAEe;GACN;GACP,UAAU,OAAO,CAAW,KAAK;GACjB;GACG;GACL;GACH;EACZ,GARM,CAQN,CACF;CAC0B,CAAA;CAG/B,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAkB,UAAU;EAAI,KAAK;YAA5D,CACE,kBAAC,GAAD;GAAoB,OAAO,EAAe;GAAG,eAAe,EAAU,CAAC,CAAM;EAAI,CAAA,GAEhF,MACE,GAAoB,UACjB,EACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAU,GAAI;aACZ,kBAAC,GAAD;IAAY,SAAA;IAAQ,cAAA;cAClB,kBAAC,OAAD;KAAK,GAAI;eAAe;IAAgB,CAAA;GAC9B,CAAA;EACJ,CAAA,EACM,CAAA,GAClB,EAAmB,OACrB,IACA,EACH;;AAET"}
+{"version":3,"file":"WeekSelector.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\r\nimport { createPortal } from 'react-dom';\r\nimport { OverlayContainer, useOverlay, usePreventScroll } from '@react-aria/overlays';\r\nimport { FocusScope } from '@react-aria/focus';\r\n\r\nimport type { RefObject } from 'react';\r\n\r\nimport { WeekSelectorButton } from './components/WeekSelectorButton';\r\nimport { WeekSelectorOptionContainer } from './components/WeekSelectorOptionContainer';\r\nimport { WeekSelectorOption } from './components/WeekSelectorOption';\r\nimport styles from './WeekSelector.module.css';\r\n\r\nimport { Backdrop } from 'components/Backdrop';\r\nimport { useOnClickOutside } from 'components/hooks/useOnClickOutside';\r\n\r\nexport type PeriodWeek = {\r\n  academicWeekNumber: number;\r\n  calendarWeekNumber: number;\r\n  isBlocked: boolean;\r\n  period: number;\r\n  startDate: string;\r\n  endDate: string;\r\n  weekNumber: number;\r\n};\r\n\r\nexport interface WeekSelectorProps {\r\n  /** Object with periodnumbers with array of weeks in period */\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  /** Current period to disable previous periods */\r\n  currentPeriod?: number;\r\n  /** Default selected week */\r\n  defaultSelection?: number;\r\n  /** Prefix for the week button label */\r\n  weekPrefix: string;\r\n  /** Labels for each period */\r\n  periodLabels: string[];\r\n  /** Header text for the options container */\r\n  optionsHeader: string;\r\n  /** Callback function when a week is selected */\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  /** Ref for the dropdown portal target */\r\n  portalContainerRef?: RefObject<HTMLElement | null>;\r\n  /** Optional WeekSelectorOptionContainer offset values [top, bottom] */\r\n  optionContainerOffset?: number[];\r\n}\r\n\r\nexport const WeekSelector = ({\r\n  weeks,\r\n  currentPeriod = 0,\r\n  defaultSelection,\r\n  weekPrefix,\r\n  optionsHeader,\r\n  periodLabels,\r\n  onSelectWeek,\r\n  portalContainerRef,\r\n  optionContainerOffset = [],\r\n}: WeekSelectorProps) => {\r\n  const [selectedOption, setSelectedOption] = useState<number | null>(null);\r\n  const [isOpen, setIsOpen] = useState<boolean>(false);\r\n  const wrapperRef = useRef<HTMLDivElement>(null);\r\n  const optionContainerRef = useRef<HTMLDivElement>(null);\r\n  const periodKeys = useMemo(() => Object.keys(weeks ?? {}), [weeks]);\r\n\r\n  useEffect(() => {\r\n    if (defaultSelection) {\r\n      for (const period in weeks) {\r\n        if (\r\n          weeks[period].some((week) => week.calendarWeekNumber === defaultSelection && !week.isBlocked) &&\r\n          Number(period) > currentPeriod\r\n        ) {\r\n          setSelectedOption(defaultSelection);\r\n          return;\r\n        }\r\n      }\r\n    }\r\n    for (const period in weeks) {\r\n      const firstAvailableWeek = weeks[period].find((week) => !week.isBlocked);\r\n      if (firstAvailableWeek && Number(period) > currentPeriod) {\r\n        setSelectedOption(firstAvailableWeek.calendarWeekNumber);\r\n        return;\r\n      }\r\n    }\r\n  }, [weeks, currentPeriod, defaultSelection]);\r\n\r\n  useEffect(() => {\r\n    if (isOpen) {\r\n      requestAnimationFrame(() => {\r\n        const selectedButton = optionContainerRef.current?.querySelector<HTMLButtonElement>(\r\n          `.${styles['week-selector-option-week--selected']}`\r\n        );\r\n        if (selectedButton) {\r\n          selectedButton.focus();\r\n        } else {\r\n          optionContainerRef.current?.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();\r\n        }\r\n      });\r\n    }\r\n  }, [isOpen, selectedOption]);\r\n\r\n  const getButtonLabel = () => {\r\n    const weekNumber = selectedOption ?? defaultSelection ?? '?';\r\n    return `${weekPrefix} ${weekNumber}`;\r\n  };\r\n\r\n  useOnClickOutside(wrapperRef as RefObject<HTMLElement>, (event) => {\r\n    if (optionContainerRef.current && optionContainerRef.current.contains(event.target as Node)) {\r\n      return;\r\n    }\r\n    setIsOpen(false);\r\n  });\r\n\r\n  const { overlayProps, underlayProps } = useOverlay(\r\n    {\r\n      isOpen,\r\n      isDismissable: true,\r\n      onClose: () => setIsOpen(false),\r\n    },\r\n    optionContainerRef\r\n  );\r\n\r\n  usePreventScroll({ isDisabled: !isOpen || !portalContainerRef?.current });\r\n\r\n  const OptionList = (\r\n    <WeekSelectorOptionContainer\r\n      header={optionsHeader}\r\n      periodLabels={periodLabels}\r\n      ref={optionContainerRef}\r\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n      {...(optionContainerOffset.length === 2\r\n        ? {\r\n            style: {\r\n              top: optionContainerOffset[0],\r\n              left: optionContainerOffset[1],\r\n            },\r\n          }\r\n        : {})}\r\n    >\r\n      {periodKeys.map((periodIndex) => (\r\n        <WeekSelectorOption\r\n          key={periodIndex}\r\n          periodIndex={periodIndex}\r\n          weeks={weeks}\r\n          disabled={Number(periodIndex) <= currentPeriod}\r\n          selectedOption={selectedOption}\r\n          setSelectedOption={setSelectedOption}\r\n          onSelectWeek={onSelectWeek}\r\n          setIsOpen={setIsOpen}\r\n        />\r\n      ))}\r\n    </WeekSelectorOptionContainer>\r\n  );\r\n\r\n  return (\r\n    <div className={styles['week-selector']} tabIndex={-1} ref={wrapperRef}>\r\n      <WeekSelectorButton label={getButtonLabel()} onClick={() => setIsOpen(!isOpen)} />\r\n\r\n      {isOpen &&\r\n        (portalContainerRef?.current\r\n          ? createPortal(\r\n              <OverlayContainer>\r\n                <Backdrop {...underlayProps}>\r\n                  <FocusScope contain restoreFocus>\r\n                    <div {...overlayProps}>{OptionList}</div>\r\n                  </FocusScope>\r\n                </Backdrop>\r\n              </OverlayContainer>,\r\n              portalContainerRef.current\r\n            )\r\n          : OptionList)}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;AA8CA,IAAa,KAAgB,EAC3B,UACA,mBAAgB,GAChB,qBACA,eACA,kBACA,iBACA,iBACA,uBACA,2BAAwB,CAAC,QACF;CACvB,IAAM,CAAC,GAAgB,KAAqB,EAAwB,IAAI,GAClE,CAAC,GAAQ,KAAa,EAAkB,EAAK,GAC7C,IAAa,EAAuB,IAAI,GACxC,IAAqB,EAAuB,IAAI,GAChD,IAAa,QAAc,OAAO,KAAK,KAAS,CAAC,CAAC,GAAG,CAAC,CAAK,CAAC;CAuBlE,AArBA,QAAgB;EACd,IAAI;QACG,IAAM,KAAU,GACnB,IACE,EAAM,EAAO,CAAC,MAAM,MAAS,EAAK,uBAAuB,KAAoB,CAAC,EAAK,SAAS,KAC5F,OAAO,CAAM,IAAI,GACjB;IACA,EAAkB,CAAgB;IAClC;GACF;;EAGJ,KAAK,IAAM,KAAU,GAAO;GAC1B,IAAM,IAAqB,EAAM,EAAO,CAAC,MAAM,MAAS,CAAC,EAAK,SAAS;GACvE,IAAI,KAAsB,OAAO,CAAM,IAAI,GAAe;IACxD,EAAkB,EAAmB,kBAAkB;IACvD;GACF;EACF;CACF,GAAG;EAAC;EAAO;EAAe;CAAgB,CAAC,GAE3C,QAAgB;EACd,AAAI,KACF,4BAA4B;GAC1B,IAAM,IAAiB,EAAmB,SAAS,cACjD,IAAI,EAAO,wCACb;GACA,AAAI,IACF,EAAe,MAAM,IAErB,EAAmB,SAAS,cAAiC,uBAAuB,CAAC,EAAE,MAAM;EAEjG,CAAC;CAEL,GAAG,CAAC,GAAQ,CAAc,CAAC;CAE3B,IAAM,UAEG,GAAG,EAAW,GADF,KAAkB,KAAoB;CAI3D,EAAkB,IAAuC,MAAU;EAC7D,EAAmB,WAAW,EAAmB,QAAQ,SAAS,EAAM,MAAc,KAG1F,EAAU,EAAK;CACjB,CAAC;CAED,IAAM,EAAE,iBAAc,qBAAkB,EACtC;EACE;EACA,eAAe;EACf,eAAe,EAAU,EAAK;CAChC,GACA,CACF;CAEA,EAAiB,EAAE,YAAY,CAAC,KAAU,CAAC,GAAoB,QAAQ,CAAC;CAExE,IAAM,IACJ,kBAAC,GAAD;EACE,QAAQ;EACM;EACd,KAAK;EAEL,GAAK,EAAsB,WAAW,IAClC,EACE,OAAO;GACL,KAAK,EAAsB;GAC3B,MAAM,EAAsB;EAC9B,EACF,IACA,CAAC;YAEJ,EAAW,KAAK,MACf,kBAAC,GAAD;GAEe;GACN;GACP,UAAU,OAAO,CAAW,KAAK;GACjB;GACG;GACL;GACH;EACZ,GARM,CAQN,CACF;CAC0B,CAAA;CAG/B,OACE,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAkB,UAAU;EAAI,KAAK;YAA5D,CACE,kBAAC,GAAD;GAAoB,OAAO,EAAe;GAAG,eAAe,EAAU,CAAC,CAAM;EAAI,CAAA,GAEhF,MACE,GAAoB,UACjB,EACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAU,GAAI;aACZ,kBAAC,GAAD;IAAY,SAAA;IAAQ,cAAA;cAClB,kBAAC,OAAD;KAAK,GAAI;eAAe;IAAgB,CAAA;GAC9B,CAAA;EACJ,CAAA,EACM,CAAA,GAClB,EAAmB,OACrB,IACA,EACH;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"WeekSelector.stories.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n  weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n  currentPeriod?={number};\r\n  defaultSelection?={number};\r\n  weekPrefix={string};\r\n  periodLabels={string[]};\r\n  optionsHeader={string};\r\n  onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/WeekSelector',\r\n  component: WeekSelector,\r\n  argTypes: {\r\n    onSelectWeek: {\r\n      action: 'selected week',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    portalContainerRef: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    optionContainerOffset: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    currentPeriod: { table: { disable: true } },\r\n    defaultSelection: { table: { disable: true } },\r\n  },\r\n  parameters: {\r\n    inspectComponent: WeekSelector,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={13}\r\n        currentPeriod={4}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 4\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={23}\r\n        currentPeriod={5}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 5\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={28}\r\n        currentPeriod={6}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 6\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={36}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Zomer\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n  weeks: mockWeeks,\r\n  weekPrefix: 'week',\r\n  periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n  optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n  ...defaultArgs,\r\n};\r\n\r\nconst TemplateWithRef: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector\r\n        {...args}\r\n        currentPeriod={1}\r\n        onSelectWeek={handleSelectWeek}\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InAPortal = TemplateWithRef.bind({});\r\n\r\nInAPortal.args = {\r\n  ...defaultArgs,\r\n};\r\n"],"mappings":";;;;AAoBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,cAAc;GACZ,QAAQ;GACR,OAAO,EACL,SAAS,GACX;EACF;EACA,oBAAoB,EAClB,OAAO,EACL,SAAS,GACX,EACF;EACA,uBAAuB,EACrB,OAAO,EACL,SAAS,GACX,EACF;EACA,eAAe,EAAE,OAAO,EAAE,SAAS,GAAK,EAAE;EAC1C,kBAAkB,EAAE,OAAO,EAAE,SAAS,GAAK,EAAE;CAC/C;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAEM,KAAwC,MAAS;CACrD,IAAM,KAAoB,MAAuB;EAC/C,EAAK,aAAa,CAAU;CAC9B;CAEA,OACE,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;EACjB;YARF;GAUE,kBAAC,GAAD;IAAc,GAAI;IAAM,eAAe;IAAG,cAAc;GAAmB,CAAA;GAC3E,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,cAAc;IACd,eAAc;GACf,CAAA;EACE;;AAET,GAEM,IAA0C;CAC9C,OAAO;CACP,YAAY;CACZ,cAAc;EAAC;EAAU;EAAU;EAAU;EAAU;EAAU;EAAU;CAAO;CAClF,eAAe;AACjB,GAEa,IAAsB,EAAS,KAAK,CAAC,CAAC;AAEnD,EAAoB,OAAO,EACzB,GAAG,EACL;AAqDA,IAAa,MAnDwC,MAAS;CAC5D,IAAM,KAAoB,MAAuB;EAC/C,EAAK,aAAa,CAAU;CAC9B,GAEM,IAAe,EAAuB,IAAI;CAEhD,OACE,kBAAC,OAAD;EACE,KAAK;EACL,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;EACjB;YATF;GAWE,kBAAC,GAAD;IACE,GAAI;IACJ,eAAe;IACf,cAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,IAAI;GACnC,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,IAAI;GACnC,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,IAAI;GACnC,CAAA;EACE;;AAET,GAEyC,KAAK,CAAC,CAAC;AAEhD,EAAU,OAAO,EACf,GAAG,EACL"}
+{"version":3,"file":"WeekSelector.stories.js","names":[],"sources":["../../../src/components/WeekSelector/WeekSelector.stories.tsx"],"sourcesContent":["import { useRef } from 'react';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { WeekSelectorProps } from 'components/WeekSelector';\r\n\r\nimport { mockWeeks } from './mockdata';\r\n\r\nimport { WeekSelector } from 'components/WeekSelector';\r\n\r\nconst codeString = `<WeekSelector \r\n  weeks={Object-with-periodnumbers-with-array-of-weeks-in-period};\r\n  currentPeriod?={number};\r\n  defaultSelection?={number};\r\n  weekPrefix={string};\r\n  periodLabels={string[]};\r\n  optionsHeader={string};\r\n  onSelectWeek={(weeknumber: {number}) => void};\r\n />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/WeekSelector',\r\n  component: WeekSelector,\r\n  argTypes: {\r\n    onSelectWeek: {\r\n      action: 'selected week',\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    portalContainerRef: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    optionContainerOffset: {\r\n      table: {\r\n        disable: true,\r\n      },\r\n    },\r\n    currentPeriod: { table: { disable: true } },\r\n    defaultSelection: { table: { disable: true } },\r\n  },\r\n  parameters: {\r\n    inspectComponent: WeekSelector,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<WeekSelectorProps>;\r\n\r\nconst Template: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector {...args} currentPeriod={1} onSelectWeek={handleSelectWeek} />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={13}\r\n        currentPeriod={4}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 4\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={23}\r\n        currentPeriod={5}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 5\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={28}\r\n        currentPeriod={6}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 6\"\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={36}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Zomer\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst defaultArgs: Partial<WeekSelectorProps> = {\r\n  weeks: mockWeeks,\r\n  weekPrefix: 'week',\r\n  periodLabels: ['Blok 1', 'Blok 2', 'Blok 3', 'Blok 4', 'Blok 5', 'Blok 6', 'Zomer'],\r\n  optionsHeader: 'Kies een planning - Blok 1',\r\n};\r\n\r\nexport const WeekSelectorExample = Template.bind({});\r\n\r\nWeekSelectorExample.args = {\r\n  ...defaultArgs,\r\n};\r\n\r\nconst TemplateWithRef: StoryFn<WeekSelectorProps> = (args) => {\r\n  const handleSelectWeek = (weekNumber: number) => {\r\n    args.onSelectWeek(weekNumber);\r\n  };\r\n\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      style={{\r\n        padding: '1rem',\r\n        backgroundColor: '#EEE',\r\n        display: 'flex',\r\n        gap: '1rem',\r\n        alignItems: 'flex-start',\r\n        flexDirection: 'column',\r\n      }}\r\n    >\r\n      <WeekSelector\r\n        {...args}\r\n        currentPeriod={1}\r\n        onSelectWeek={handleSelectWeek}\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={45}\r\n        currentPeriod={2}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 2\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n      <WeekSelector\r\n        {...args}\r\n        defaultSelection={6}\r\n        currentPeriod={3}\r\n        onSelectWeek={handleSelectWeek}\r\n        optionsHeader=\"Kies een planning - Blok 3\"\r\n        portalContainerRef={containerRef}\r\n        // eslint-disable-next-line @typescript-eslint/no-magic-numbers\r\n        optionContainerOffset={[-200, -250]}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport const InAPortal = TemplateWithRef.bind({});\r\n\r\nInAPortal.args = {\r\n  ...defaultArgs,\r\n};\r\n"],"mappings":";;;;AAoBA,IAAA,IAAe;CACb,OAAO;CACP,WAAW;CACX,UAAU;EACR,cAAc;GACZ,QAAQ;GACR,OAAO,EACL,SAAS,GACX;EACF;EACA,oBAAoB,EAClB,OAAO,EACL,SAAS,GACX,EACF;EACA,uBAAuB,EACrB,OAAO,EACL,SAAS,GACX,EACF;EACA,eAAe,EAAE,OAAO,EAAE,SAAS,GAAK,EAAE;EAC1C,kBAAkB,EAAE,OAAO,EAAE,SAAS,GAAK,EAAE;CAC/C;CACA,YAAY;EACV,kBAAkB;EACN;CACd;AACF,GAEM,KAAwC,MAAS;CACrD,IAAM,KAAoB,MAAuB;EAC/C,EAAK,aAAa,CAAU;CAC9B;CAEA,OACE,kBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;EACjB;YARF;GAUE,kBAAC,GAAD;IAAc,GAAI;IAAM,eAAe;IAAG,cAAc;GAAmB,CAAA;GAC3E,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;GACf,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,cAAc;IACd,eAAc;GACf,CAAA;EACE;;AAET,GAEM,IAA0C;CAC9C,OAAO;CACP,YAAY;CACZ,cAAc;EAAC;EAAU;EAAU;EAAU;EAAU;EAAU;EAAU;CAAO;CAClF,eAAe;AACjB,GAEa,IAAsB,EAAS,KAAK,CAAC,CAAC;AAEnD,EAAoB,OAAO,EACzB,GAAG,EACL;AAqDA,IAAa,MAnDwC,MAAS;CAC5D,IAAM,KAAoB,MAAuB;EAC/C,EAAK,aAAa,CAAU;CAC9B,GAEM,IAAe,EAAuB,IAAI;CAEhD,OACE,kBAAC,OAAD;EACE,KAAK;EACL,OAAO;GACL,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,KAAK;GACL,YAAY;GACZ,eAAe;EACjB;YATF;GAWE,kBAAC,GAAD;IACE,GAAI;IACJ,eAAe;IACf,cAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,IAAI;GACnC,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,IAAI;GACnC,CAAA;GACD,kBAAC,GAAD;IACE,GAAI;IACJ,kBAAkB;IAClB,eAAe;IACf,cAAc;IACd,eAAc;IACd,oBAAoB;IAEpB,uBAAuB,CAAC,MAAM,IAAI;GACnC,CAAA;EACE;;AAET,EAEyB,CAAgB,KAAK,CAAC,CAAC;AAEhD,EAAU,OAAO,EACf,GAAG,EACL"}

package/dist/components/WeekSelector/components/WeekSelectorOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeekSelectorOption.js","names":[],"sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n  periodIndex: string;\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  selectedOption: number | null;\r\n  disabled?: boolean;\r\n  setSelectedOption: (weekNumber: number) => void;\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n  periodIndex,\r\n  weeks,\r\n  selectedOption,\r\n  disabled,\r\n  setSelectedOption,\r\n  onSelectWeek,\r\n  setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n    const current = event.currentTarget;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight': {\r\n        event.preventDefault();\r\n        let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n        while (nextElement && nextElement.disabled) {\r\n          nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n        }\r\n        nextElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowLeft': {\r\n        event.preventDefault();\r\n        let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n        while (prevElement && prevElement.disabled) {\r\n          prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n        }\r\n        prevElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n        while (nextRow) {\r\n          const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n        while (prevRow) {\r\n          const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        setIsOpen(false);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n  return (\r\n    <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n      {weeks[periodIndex].map((week) => (\r\n        <button\r\n          key={week.weekNumber}\r\n          type=\"button\"\r\n          className={clsx(styles['week-selector-option-week'], [\r\n            selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n          ])}\r\n          disabled={week.isBlocked || disabled}\r\n          onKeyDown={handleKeyDown}\r\n          onClick={() => {\r\n            if (!week.isBlocked) {\r\n              setSelectedOption(week.calendarWeekNumber);\r\n              onSelectWeek(week.calendarWeekNumber);\r\n              setIsOpen(false);\r\n            }\r\n          }}\r\n          autoFocus={selectedOption === week.calendarWeekNumber}\r\n        >\r\n          {week.calendarWeekNumber}\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;AAgBA,IAAa,KAAsB,EACjC,gBACA,UACA,mBACA,aACA,sBACA,iBACA,mBAC6B;CAC7B,IAAM,KAAiB,MAA4C;EACjE,IAAM,IAAU,EAAM;EAEtB,QAAQ,EAAM,KAAd;GACE,KAAK,cAAc;IACjB,EAAM,eAAe;IACrB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,MAAM;IACnB;GACF;GACA,KAAK,aAAa;IAChB,EAAM,eAAe;IACrB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,MAAM;IACnB;GACF;GACA,KAAK,aAAa;IAChB,EAAM,eAAe;IACrB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAO,GAClF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,MAAM;MAChB;KACF;KACA,IAAU,EAAQ;IACpB;IACA;GACF;GACA,KAAK,WAAW;IACd,EAAM,eAAe;IACrB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAO,GAClF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,MAAM;MAChB;KACF;KACA,IAAU,EAAQ;IACpB;IACA;GACF;GACA,KAAK;IACH,EAAU,EAAK;IACf;GACF,SACE;EACJ;CACF;CACA,OACE,kBAAC,OAAD;EAAuB,WAAW,EAAO;YACtC,EAAM,GAAa,KAAK,MACvB,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CACnD,MAAmB,EAAK,sBAAsB,EAAO,sCACvD,CAAC;GACD,UAAU,EAAK,aAAa;GAC5B,WAAW;GACX,eAAe;IACb,AAAK,EAAK,cACR,EAAkB,EAAK,kBAAkB,GACzC,EAAa,EAAK,kBAAkB,GACpC,EAAU,EAAK;GAEnB;GACA,WAAW,MAAmB,EAAK;aAElC,EAAK;EACA,GAjBD,EAAK,UAiBJ,CACT;CACE,GAtBK,CAsBL;AAET"}
+{"version":3,"file":"WeekSelectorOption.js","names":[],"sources":["../../../../src/components/WeekSelector/components/WeekSelectorOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\n\r\nimport type { KeyboardEvent } from 'react';\r\nimport type { PeriodWeek } from 'components/WeekSelector/WeekSelector';\r\n\r\nimport styles from 'components/WeekSelector/WeekSelector.module.css';\r\nexport interface WeekSelectorOptionProps {\r\n  periodIndex: string;\r\n  weeks: Record<string, PeriodWeek[]>;\r\n  selectedOption: number | null;\r\n  disabled?: boolean;\r\n  setSelectedOption: (weekNumber: number) => void;\r\n  onSelectWeek: (weeknumber: number) => void;\r\n  setIsOpen: (isOpen: boolean) => void;\r\n}\r\n\r\nexport const WeekSelectorOption = ({\r\n  periodIndex,\r\n  weeks,\r\n  selectedOption,\r\n  disabled,\r\n  setSelectedOption,\r\n  onSelectWeek,\r\n  setIsOpen,\r\n}: WeekSelectorOptionProps) => {\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\r\n    const current = event.currentTarget;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight': {\r\n        event.preventDefault();\r\n        let nextElement = current.nextElementSibling as HTMLButtonElement | null;\r\n        while (nextElement && nextElement.disabled) {\r\n          nextElement = nextElement.nextElementSibling as HTMLButtonElement | null;\r\n        }\r\n        nextElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowLeft': {\r\n        event.preventDefault();\r\n        let prevElement = current.previousElementSibling as HTMLButtonElement | null;\r\n        while (prevElement && prevElement.disabled) {\r\n          prevElement = prevElement.previousElementSibling as HTMLButtonElement | null;\r\n        }\r\n        prevElement?.focus();\r\n        break;\r\n      }\r\n      case 'ArrowDown': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let nextRow = current.parentElement?.nextElementSibling as HTMLElement | null;\r\n        while (nextRow) {\r\n          const candidate = nextRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          nextRow = nextRow.nextElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        event.preventDefault();\r\n        const currentIndex = Array.from(current.parentElement?.children ?? []).indexOf(current);\r\n        let prevRow = current.parentElement?.previousElementSibling as HTMLElement | null;\r\n        while (prevRow) {\r\n          const candidate = prevRow.children[currentIndex] as HTMLButtonElement | undefined;\r\n          if (candidate && !candidate.disabled) {\r\n            candidate.focus();\r\n            break;\r\n          }\r\n          prevRow = prevRow.previousElementSibling as HTMLElement | null;\r\n        }\r\n        break;\r\n      }\r\n      case 'Tab':\r\n        setIsOpen(false);\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n  return (\r\n    <div key={periodIndex} className={styles['week-selector-option-week-row']}>\r\n      {weeks[periodIndex].map((week) => (\r\n        <button\r\n          key={week.weekNumber}\r\n          type=\"button\"\r\n          className={clsx(styles['week-selector-option-week'], [\r\n            selectedOption === week.calendarWeekNumber && styles['week-selector-option-week--selected'],\r\n          ])}\r\n          disabled={week.isBlocked || disabled}\r\n          onKeyDown={handleKeyDown}\r\n          onClick={() => {\r\n            if (!week.isBlocked) {\r\n              setSelectedOption(week.calendarWeekNumber);\r\n              onSelectWeek(week.calendarWeekNumber);\r\n              setIsOpen(false);\r\n            }\r\n          }}\r\n          autoFocus={selectedOption === week.calendarWeekNumber}\r\n        >\r\n          {week.calendarWeekNumber}\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;AAgBA,IAAa,KAAsB,EACjC,gBACA,UACA,mBACA,aACA,sBACA,iBACA,mBAC6B;CAC7B,IAAM,KAAiB,MAA4C;EACjE,IAAM,IAAU,EAAM;EAEtB,QAAQ,EAAM,KAAd;GACE,KAAK,cAAc;IACjB,EAAM,eAAe;IACrB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,MAAM;IACnB;GACF;GACA,KAAK,aAAa;IAChB,EAAM,eAAe;IACrB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,MAAM;IACnB;GACF;GACA,KAAK,aAAa;IAChB,EAAM,eAAe;IACrB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAO,GAClF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,MAAM;MAChB;KACF;KACA,IAAU,EAAQ;IACpB;IACA;GACF;GACA,KAAK,WAAW;IACd,EAAM,eAAe;IACrB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAO,GAClF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,MAAM;MAChB;KACF;KACA,IAAU,EAAQ;IACpB;IACA;GACF;GACA,KAAK;IACH,EAAU,EAAK;IACf;GACF,SACE;EACJ;CACF;CACA,OACE,kBAAC,OAAD;EAAuB,WAAW,EAAO;YACtC,EAAM,EAAY,CAAC,KAAK,MACvB,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CACnD,MAAmB,EAAK,sBAAsB,EAAO,sCACvD,CAAC;GACD,UAAU,EAAK,aAAa;GAC5B,WAAW;GACX,eAAe;IACb,AAAK,EAAK,cACR,EAAkB,EAAK,kBAAkB,GACzC,EAAa,EAAK,kBAAkB,GACpC,EAAU,EAAK;GAEnB;GACA,WAAW,MAAmB,EAAK;aAElC,EAAK;EACA,GAjBD,EAAK,UAiBJ,CACT;CACE,GAtBK,CAsBL;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"useOnClickOutside.js","names":[],"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"],"mappings":";;AAIA,IAAa,KAA0D,GAAmB,MAA2B;CACnH,QAAgB;EACd,IAAM,KACJ,MAIS;GACL,CAAC,EAAI,WAAW,EAAI,QAAQ,SAAS,EAAM,MAAc,KAG7D,EAAQ,CAAgD;EAC1D;EAGA,OAFA,SAAS,iBAAiB,aAAa,CAAyB,GAChE,SAAS,iBAAiB,cAAc,CAAyB,SACpD;GAEX,AADA,SAAS,oBAAoB,aAAa,CAAyB,GACnE,SAAS,oBAAoB,cAAc,CAAyB;EACtE;CACF,GAAG,CAAC,GAAK,CAAO,CAAC;AACnB"}
+{"version":3,"file":"useOnClickOutside.js","names":[],"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)) {\n        return;\n      }\n      handler(event);\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"],"mappings":";;AAIA,IAAa,KAA0D,GAAmB,MAA2B;CACnH,QAAgB;EACd,IAAM,KACJ,MAIS;GACL,CAAC,EAAI,WAAW,EAAI,QAAQ,SAAS,EAAM,MAAM,KAGrD,EAAQ,CAAK;EACf;EAGA,OAFA,SAAS,iBAAiB,aAAa,CAAyB,GAChE,SAAS,iBAAiB,cAAc,CAAyB,SACpD;GAEX,AADA,SAAS,oBAAoB,aAAa,CAAyB,GACnE,SAAS,oBAAoB,cAAc,CAAyB;EACtE;CACF,GAAG,CAAC,GAAK,CAAO,CAAC;AACnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"usePositionedFloaters.js","names":[],"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  updatePosition: () => void;\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  fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 90;\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    minWidth: MIN_WIDTH,\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      minWidth: options.fullWidth ? referenceRect.width : MIN_WIDTH,\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      setTimeout(() => {\n        setStyle((prevStyle) => ({\n          ...prevStyle,\n          ...calcPosition(),\n        }));\n      }, 0);\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    updatePosition,\n  };\n}\n"],"mappings":";;;AAwBA,IAAM,IAAe,IACf,IAAa,IACb,IAAY,KACZ,IAAiB,GACjB,IAAoB,KACpB,IAAO;AAEb,SAAgB,EACd,GACA,GACA,GACe;CACf,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAe;EACnB,OAAO;EACP,SAAS;EACT,WAAW;EACX,UAAU;EACV,UAAU;EACV,WAAW;EACX,WAAW;EACX,QAAQ;CACV,GAEM,CAAC,GAAO,KAAY,EAAS,CAAY,GAEzC,KAAY,MAA6C;EAC7D,IAAM,IAAe,WAAW,iBAAiB,SAAS,eAAe,EAAE,QAAQ;EACnF,OAAO,EAAK,QAAQ,KAAK,MAAM,KAAuC,WAAW,CAAI,IAAjD,WAAW,CAAI,IAAI;CACzD,GAEM,KAAa,GAAkB,MAAwB;EAC3D,IAAI,CAAC,GAAS,OAAO;EAErB,IAAM,IACJ,MAAQ,WACJ,OAAO,cAAc,EAAQ,SAAS,EAAQ,SAAS,IACvD,EAAQ,MAAM,EAAQ,SAAS;EAErC,OAAO,CAAC,EAAQ,kBAAkB,EAAS,EAAQ,cAAc,IAAI,IACjE,IACA,EAAS,EAAQ,cAAc;CACrC,GAEM,KAAY,GAAkB,MAAwB;EAC1D,IAAI,CAAC,GAAS,OAAO;EAErB,IAAM,IACJ,MAAQ,SAAS,OAAO,aAAa,EAAQ,OAAO,IAAe,EAAQ,QAAQ;EAErF,OAAO,KAAmB,IAAY,IAAY;CACpD,GAEM,KAAW,GAAkB,GAAkB,MAC/C,IACK,GAAG,EAAQ,OAAO,KAAK,IAAI,EAAQ,QAAQ,EAAQ,KAAK,IAAI,EAAK,MAEjE,GAAG,EAAQ,KAAK,KAIrB,UAA0C;EAC9C,IAAM,IAAkB,GAA0C,sBAAsB,GAClF,IAAiB,GAAyC,sBAAsB,GAClF,IAAO,UACP,IAAO,QAEL,IAAW,OAAO,WACtB,eAAe,EAAQ,mBAAmB,EAAS,EAAQ,gBAAgB,IAAI,EAAkB,IACnG,EAAE;EAiBF,OAfI,CAAC,KAAiB,CAAC,IACd,KAGL,OAAO,cAAc,EAAc,SAAS,IAAe,MAC7D,IAAO,SAIN,OAAO,aAAa,EAAc,OAAO,IAAe,KAAa,EAAQ,uBAAuB,YACrG,CAAC,MAED,IAAO,UAGF;GACL,OAAO,GAAG,MAAS,WAAW,EAAc,KAAQ,OAAO,OAAO;gBACxD,MAAS,UAAU,OAAO,aAAa,EAAc,KAAQ,OAAO,OAAO;gBAC3E,MAAS,QAAQ,OAAO,cAAc,EAAc,KAAQ,OAAO,OAAO;gBAC1E,MAAS,SAAS,EAAQ,GAAe,GAAgB,CAAQ,IAAI;GAC/E,WAAW,GAAG,EAAU,GAAe,CAAI,EAAE;GAC7C,UAAU,GAAG,EAAS,GAAe,CAAI,EAAE;GAC3C,UAAU,EAAQ,YAAY,EAAc,QAAQ;GACpD,WAAW;GACX,WAAW;GACX,SAAS;GACT,QAAQ,GAAG,EAAQ,OAAO;EAC5B;CACF,GAEM,UAA+B;EAKnC,AAJA,EAAS;GACP,GAAG;GACH,GAAG,EAAa;EAClB,CAAC,GACD,EAAU,EAAI;CAChB,GAEM,UAA6B;EACjC,AAAI,KACF,iBAAiB;GACf,GAAU,OAAe;IACvB,GAAG;IACH,GAAG,EAAa;GAClB,EAAE;EACJ,GAAG,CAAC;CAER,GAEM,KAAsB,MAAqB;EAE7C,CAAC,KACA,EAA4C,SAAS,EAAI,MAAc,KACxE,CAAC,KACA,EAA6C,SAAS,EAAI,MAAc;CAI7E,GAEM,IAA0B,EAAY,GAAgB,CAAc;CAoC1E,OAlCA,SACM,MAAqB,SACnB,EAAQ,eAAe,UAEzB,EAA6C,iBAAiB,SAAS,CAAgB,KAGvF,EAA6C,iBAAiB,cAAc,CAAgB,GAE5F,EAA6C,iBAAiB,cAAc,CAAkB,IAEhG,SAAS,iBAAiB,aAAa,CAAkB,GACzD,SAAS,iBAAiB,cAAc,CAAkB,GAC1D,OAAO,iBAAiB,UAAU,CAAuB,UAG9C;EACX,AAAI,MAAqB,SACnB,EAAQ,eAAe,UAEzB,EAA6C,oBAAoB,SAAS,CAAgB,KAG1F,EAA6C,oBAAoB,cAAc,CAAgB,GAE/F,EAA6C,oBAAoB,cAAc,CAAkB,IAEnG,SAAS,oBAAoB,aAAa,CAAkB,GAC5D,SAAS,oBAAoB,cAAc,CAAkB,GAC7D,OAAO,oBAAoB,UAAU,CAAuB;CAEhE,EACD,GAEM;EACL,OAAO,EACL,SACF;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"usePositionedFloaters.js","names":[],"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  updatePosition: () => void;\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  fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 90;\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    minWidth: MIN_WIDTH,\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      minWidth: options.fullWidth ? referenceRect.width : MIN_WIDTH,\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      setTimeout(() => {\n        setStyle((prevStyle) => ({\n          ...prevStyle,\n          ...calcPosition(),\n        }));\n      }, 0);\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    updatePosition,\n  };\n}\n"],"mappings":";;;AAwBA,IAAM,IAAe,IACf,IAAa,IACb,IAAY,KACZ,IAAiB,GACjB,IAAoB,KACpB,IAAO;AAEb,SAAgB,EACd,GACA,GACA,GACe;CACf,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAe;EACnB,OAAO;EACP,SAAS;EACT,WAAW;EACX,UAAU;EACV,UAAU;EACV,WAAW;EACX,WAAW;EACX,QAAQ;CACV,GAEM,CAAC,GAAO,KAAY,EAAS,CAAY,GAEzC,KAAY,MAA6C;EAC7D,IAAM,IAAe,WAAW,iBAAiB,SAAS,eAAe,CAAC,CAAC,QAAQ;EACnF,OAAO,EAAK,QAAQ,KAAK,MAAM,KAAuC,WAAW,CAAI,IAAjD,WAAW,CAAI,IAAI;CACzD,GAEM,KAAa,GAAkB,MAAwB;EAC3D,IAAI,CAAC,GAAS,OAAO;EAErB,IAAM,IACJ,MAAQ,WACJ,OAAO,cAAc,EAAQ,SAAS,EAAQ,SAAS,IACvD,EAAQ,MAAM,EAAQ,SAAS;EAErC,OAAO,CAAC,EAAQ,kBAAkB,EAAS,EAAQ,cAAc,IAAI,IACjE,IACA,EAAS,EAAQ,cAAc;CACrC,GAEM,KAAY,GAAkB,MAAwB;EAC1D,IAAI,CAAC,GAAS,OAAO;EAErB,IAAM,IACJ,MAAQ,SAAS,OAAO,aAAa,EAAQ,OAAO,IAAe,EAAQ,QAAQ;EAErF,OAAO,KAAmB,IAAY,IAAY;CACpD,GAEM,KAAW,GAAkB,GAAkB,MAC/C,IACK,GAAG,EAAQ,OAAO,KAAK,IAAI,EAAQ,QAAQ,EAAQ,KAAK,IAAI,EAAK,MAEjE,GAAG,EAAQ,KAAK,KAIrB,UAA0C;EAC9C,IAAM,IAAkB,GAA0C,sBAAsB,GAClF,IAAiB,GAAyC,sBAAsB,GAClF,IAAO,UACP,IAAO,QAEL,IAAW,OAAO,WACtB,eAAe,EAAQ,mBAAmB,EAAS,EAAQ,gBAAgB,IAAI,EAAkB,IACnG,CAAC,CAAC;EAiBF,OAfI,CAAC,KAAiB,CAAC,IACd,KAGL,OAAO,cAAc,EAAc,SAAS,IAAe,MAC7D,IAAO,SAIN,OAAO,aAAa,EAAc,OAAO,IAAe,KAAa,EAAQ,uBAAuB,YACrG,CAAC,MAED,IAAO,UAGF;GACL,OAAO,GAAG,MAAS,WAAW,EAAc,KAAQ,OAAO,OAAO;gBACxD,MAAS,UAAU,OAAO,aAAa,EAAc,KAAQ,OAAO,OAAO;gBAC3E,MAAS,QAAQ,OAAO,cAAc,EAAc,KAAQ,OAAO,OAAO;gBAC1E,MAAS,SAAS,EAAQ,GAAe,GAAgB,CAAQ,IAAI;GAC/E,WAAW,GAAG,EAAU,GAAe,CAAI,EAAE;GAC7C,UAAU,GAAG,EAAS,GAAe,CAAI,EAAE;GAC3C,UAAU,EAAQ,YAAY,EAAc,QAAQ;GACpD,WAAW;GACX,WAAW;GACX,SAAS;GACT,QAAQ,GAAG,EAAQ,OAAO;EAC5B;CACF,GAEM,UAA+B;EAKnC,AAJA,EAAS;GACP,GAAG;GACH,GAAG,EAAa;EAClB,CAAC,GACD,EAAU,EAAI;CAChB,GAEM,UAA6B;EACjC,AAAI,KACF,iBAAiB;GACf,GAAU,OAAe;IACvB,GAAG;IACH,GAAG,EAAa;GAClB,EAAE;EACJ,GAAG,CAAC;CAER,GAEM,KAAsB,MAAqB;EAE7C,CAAC,KACA,EAA4C,SAAS,EAAI,MAAc,KACxE,CAAC,KACA,EAA6C,SAAS,EAAI,MAAc;CAI7E,GAEM,IAA0B,EAAY,GAAgB,CAAc;CAoC1E,OAlCA,SACM,MAAqB,SACnB,EAAQ,eAAe,UAEzB,EAA6C,iBAAiB,SAAS,CAAgB,KAGvF,EAA6C,iBAAiB,cAAc,CAAgB,GAE5F,EAA6C,iBAAiB,cAAc,CAAkB,IAEhG,SAAS,iBAAiB,aAAa,CAAkB,GACzD,SAAS,iBAAiB,cAAc,CAAkB,GAC1D,OAAO,iBAAiB,UAAU,CAAuB,UAG9C;EACX,AAAI,MAAqB,SACnB,EAAQ,eAAe,UAEzB,EAA6C,oBAAoB,SAAS,CAAgB,KAG1F,EAA6C,oBAAoB,cAAc,CAAgB,GAE/F,EAA6C,oBAAoB,cAAc,CAAkB,IAEnG,SAAS,oBAAoB,aAAa,CAAkB,GAC5D,SAAS,oBAAoB,cAAc,CAAkB,GAC7D,OAAO,oBAAoB,UAAU,CAAuB;CAEhE,EACD,GAEM;EACL,OAAO,EACL,SACF;EACA;EACA;CACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"useResponsive.js","names":[],"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"],"mappings":";;AAEA,IAAM,IAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP,GAYa,UAAuC;CAClD,IAAM,KAAiB,GAAc,MAC5B,IAAU,eAAe,EAAK,OAAO,eAAe,IAAO,EAAE,MAGhE,KAAc,MACd,OAAO,SAAW,MACb,OAAO,WAAW,CAAK,EAAE,UAE3B,IAGH,UAA+B;EACnC,IAAM,IAA0C;GAC9C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;EACP,GAEM,IAAc,EAAE,GAAG,EAAuB,GAC1C,IAAW,EAAE,GAAG,EAAuB;EAgB7C,OAdA,OAAO,QAAQ,CAAW,EAAE,SAAS,CAAC,GAAK,OAAU;GAEnD,AADA,EAAY,KAAmC,EAAW,EAAc,GAAM,EAAI,CAAC,GACnF,EAAS,KAAmC,EAAW,EAAc,GAAM,EAAK,CAAC;EACnF,CAAC,GAWM;GAAE;GAAa;GAAU,aATC,EAAW,yBAAyB,IACjE,aACA,EAAW,0BAA0B,IACnC,cACA;GAKuC,WAH1B,OAAO,KAAK,CAAW,EAAE,UAAU,MAAQ,EAAY,EAAgC,KACxG;EAEqD;CACzD,GAEM,CAAC,GAAY,KAAiB,EAAS,EAAuB,CAAC;CAWrE,OATA,QAAgB;EACd,IAAM,UAAqB,EAAc,EAAuB,CAAC;EAIjE,OAFA,OAAO,iBAAiB,UAAU,CAAY,SAEjC,OAAO,oBAAoB,UAAU,CAAY;CAEhE,GAAG,CAAC,CAAC,GAEE;AACT"}
+{"version":3,"file":"useResponsive.js","names":[],"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"],"mappings":";;AAEA,IAAM,IAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP,GAYa,UAAuC;CAClD,IAAM,KAAiB,GAAc,MAC5B,IAAU,eAAe,EAAK,OAAO,eAAe,IAAO,EAAE,MAGhE,KAAc,MACd,OAAO,SAAW,MACb,OAAO,WAAW,CAAK,CAAC,CAAC,UAE3B,IAGH,UAA+B;EACnC,IAAM,IAA0C;GAC9C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;EACP,GAEM,IAAc,EAAE,GAAG,EAAuB,GAC1C,IAAW,EAAE,GAAG,EAAuB;EAgB7C,OAdA,OAAO,QAAQ,CAAW,CAAC,CAAC,SAAS,CAAC,GAAK,OAAU;GAEnD,AADA,EAAY,KAAmC,EAAW,EAAc,GAAM,EAAI,CAAC,GACnF,EAAS,KAAmC,EAAW,EAAc,GAAM,EAAK,CAAC;EACnF,CAAC,GAWM;GAAE;GAAa;GAAU,aATC,EAAW,yBAAyB,IACjE,aACA,EAAW,0BAA0B,IACnC,cACA;GAKuC,WAH1B,OAAO,KAAK,CAAW,CAAC,CAAC,UAAU,MAAQ,EAAY,EAAgC,KACxG;EAEqD;CACzD,GAEM,CAAC,GAAY,KAAiB,EAAS,EAAuB,CAAC;CAWrE,OATA,QAAgB;EACd,IAAM,UAAqB,EAAc,EAAuB,CAAC;EAIjE,OAFA,OAAO,iBAAiB,UAAU,CAAY,SAEjC,OAAO,oBAAoB,UAAU,CAAY;CAEhE,GAAG,CAAC,CAAC,GAEE;AACT"}