@uva-glass/component-library 3.55.6 → 3.55.7

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;AAEtB,UAAQ,EAAM,KAAd;GACE,KAAK,cAAc;AACjB,MAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;AAC1B,WAAO,KAAe,EAAY,UAChC,KAAc,EAAY;AAE5B,OAAa,OAAO;AACpB;;GAEF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;AAC1B,WAAO,KAAe,EAAY,UAChC,KAAc,EAAY;AAE5B,OAAa,OAAO;AACpB;;GAEF,KAAK,aAAa;AAChB,MAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;AACrC,WAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;AACnC,SAAI,KAAa,CAAC,EAAU,UAAU;AACpC,QAAU,OAAO;AACjB;;AAEF,SAAU,EAAQ;;AAEpB;;GAEF,KAAK,WAAW;AACd,MAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;AACrC,WAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;AACnC,SAAI,KAAa,CAAC,EAAU,UAAU;AACpC,QAAU,OAAO;AACjB;;AAEF,SAAU,EAAQ;;AAEpB;;GAEF,KAAK;AACH,MAAU,GAAM;AAChB;GACF,QACE;;;AAGN,QACE,kBAAC,OAAD;EAAuB,WAAW,EAAO;YACtC,EAAM,GAAa,KAAK,MACvB,kBAAC,UAAD;GAEE,MAAK;GACL,WAAW,EAAK,EAAO,8BAA8B,CACnD,MAAmB,EAAK,sBAAsB,EAAO,uCACtD,CAAC;GACF,UAAU,EAAK,aAAa;GAC5B,WAAW;GACX,eAAe;AACb,IAAK,EAAK,cACR,EAAkB,EAAK,mBAAmB,EAC1C,EAAa,EAAK,mBAAmB,EACrC,EAAU,GAAM;;GAGpB,WAAW,MAAmB,EAAK;aAElC,EAAK;GACC,EAjBF,EAAK,WAiBH,CACT;EACE,EAtBI,EAsBJ"}
+{"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,gBAAgB;IACtB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,OAAO;IACpB;;GAEF,KAAK,aAAa;IAChB,EAAM,gBAAgB;IACtB,IAAI,IAAc,EAAQ;IAC1B,OAAO,KAAe,EAAY,WAChC,IAAc,EAAY;IAE5B,GAAa,OAAO;IACpB;;GAEF,KAAK,aAAa;IAChB,EAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,OAAO;MACjB;;KAEF,IAAU,EAAQ;;IAEpB;;GAEF,KAAK,WAAW;IACd,EAAM,gBAAgB;IACtB,IAAM,IAAe,MAAM,KAAK,EAAQ,eAAe,YAAY,EAAE,CAAC,CAAC,QAAQ,EAAQ,EACnF,IAAU,EAAQ,eAAe;IACrC,OAAO,IAAS;KACd,IAAM,IAAY,EAAQ,SAAS;KACnC,IAAI,KAAa,CAAC,EAAU,UAAU;MACpC,EAAU,OAAO;MACjB;;KAEF,IAAU,EAAQ;;IAEpB;;GAEF,KAAK;IACH,EAAU,GAAM;IAChB;GACF,SACE;;;CAGN,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,uCACtD,CAAC;GACF,UAAU,EAAK,aAAa;GAC5B,WAAW;GACX,eAAe;IACb,AAAK,EAAK,cACR,EAAkB,EAAK,mBAAmB,EAC1C,EAAa,EAAK,mBAAmB,EACrC,EAAU,GAAM;;GAGpB,WAAW,MAAmB,EAAK;aAElC,EAAK;GACC,EAjBF,EAAK,WAiBH,CACT;EACE,EAtBI,EAsBJ"}

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

@@ -1 +1 @@
-{"version":3,"file":"useDebounce.js","names":[],"sources":["../../../src/components/hooks/useDebounce.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\ntype Timer = ReturnType<typeof setTimeout>;\ntype SomeFunction = (...args: unknown[]) => void;\n\nconst DELAY = 200;\n\nexport function useDebounce<Func extends SomeFunction>(callBack: Func, delay = DELAY) {\n  const timer = useRef<Timer>(undefined);\n\n  useEffect(() => {\n    return () => {\n      if (!timer.current) return;\n      clearTimeout(timer.current);\n    };\n  }, []);\n\n  const debouncedFunction = ((...args) => {\n    const newTimer = setTimeout(() => {\n      callBack(...args);\n    }, delay);\n    clearTimeout(timer.current);\n    timer.current = newTimer;\n  }) as Func;\n\n  return debouncedFunction;\n}\n"],"mappings":";;AAKA,IAAM,IAAQ;AAEd,SAAgB,EAAuC,GAAgB,IAAQ,GAAO;CACpF,IAAM,IAAQ,EAAc,KAAA,EAAU;AAiBtC,QAfA,cACe;AACN,IAAM,WACX,aAAa,EAAM,QAAQ;IAE5B,EAAE,CAAC,IAEsB,GAAG,MAAS;EACtC,IAAM,IAAW,iBAAiB;AAChC,KAAS,GAAG,EAAK;KAChB,EAAM;AAET,EADA,aAAa,EAAM,QAAQ,EAC3B,EAAM,UAAU"}
+{"version":3,"file":"useDebounce.js","names":[],"sources":["../../../src/components/hooks/useDebounce.ts"],"sourcesContent":["import { useRef, useEffect } from 'react';\n\ntype Timer = ReturnType<typeof setTimeout>;\ntype SomeFunction = (...args: unknown[]) => void;\n\nconst DELAY = 200;\n\nexport function useDebounce<Func extends SomeFunction>(callBack: Func, delay = DELAY) {\n  const timer = useRef<Timer>(undefined);\n\n  useEffect(() => {\n    return () => {\n      if (!timer.current) return;\n      clearTimeout(timer.current);\n    };\n  }, []);\n\n  const debouncedFunction = ((...args) => {\n    const newTimer = setTimeout(() => {\n      callBack(...args);\n    }, delay);\n    clearTimeout(timer.current);\n    timer.current = newTimer;\n  }) as Func;\n\n  return debouncedFunction;\n}\n"],"mappings":";;AAKA,IAAM,IAAQ;AAEd,SAAgB,EAAuC,GAAgB,IAAQ,GAAO;CACpF,IAAM,IAAQ,EAAc,KAAA,EAAU;CAiBtC,OAfA,cACe;EACN,EAAM,WACX,aAAa,EAAM,QAAQ;IAE5B,EAAE,CAAC,IAEsB,GAAG,MAAS;EACtC,IAAM,IAAW,iBAAiB;GAChC,EAAS,GAAG,EAAK;KAChB,EAAM;EAET,AADA,aAAa,EAAM,QAAQ,EAC3B,EAAM,UAAU"}

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;AACnH,SAAgB;EACd,IAAM,KACJ,MAIS;AACL,IAAC,EAAI,WAAW,EAAI,QAAQ,SAAS,EAAM,OAAe,IAG9D,EAAQ,EAAiD;;AAI3D,SAFA,SAAS,iBAAiB,aAAa,EAA0B,EACjE,SAAS,iBAAiB,cAAc,EAA0B,QACrD;AAEX,GADA,SAAS,oBAAoB,aAAa,EAA0B,EACpE,SAAS,oBAAoB,cAAc,EAA0B;;IAEtE,CAAC,GAAK,EAAQ,CAAC"}
+{"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,OAAe,IAG9D,EAAQ,EAAiD;;EAI3D,OAFA,SAAS,iBAAiB,aAAa,EAA0B,EACjE,SAAS,iBAAiB,cAAc,EAA0B,QACrD;GAEX,AADA,SAAS,oBAAoB,aAAa,EAA0B,EACpE,SAAS,oBAAoB,cAAc,EAA0B;;IAEtE,CAAC,GAAK,EAAQ,CAAC"}

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":"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"}
+{"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,GAAM,EACrC,IAAe;EACnB,OAAO;EACP,SAAS;EACT,WAAW;EACX,UAAU;EACV,UAAU;EACV,WAAW;EACX,WAAW;EACX,QAAQ;EACT,EAEK,CAAC,GAAO,KAAY,EAAS,EAAa,EAE1C,KAAY,MAA6C;EAC7D,IAAM,IAAe,WAAW,iBAAiB,SAAS,gBAAgB,CAAC,SAAS;EACpF,OAAO,EAAK,QAAQ,MAAM,KAAK,KAAuC,WAAW,EAAK,GAAlD,WAAW,EAAK,GAAG;IAGnD,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,eAAe,GAAG,IACjE,IACA,EAAS,EAAQ,eAAe;IAGhC,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;IAG9C,KAAW,GAAkB,GAAkB,MAC/C,IACK,GAAG,EAAQ,OAAO,KAAK,IAAI,EAAQ,QAAQ,EAAQ,MAAM,GAAG,EAAK,MAEjE,GAAG,EAAQ,KAAK,KAIrB,UAA0C;EAC9C,IAAM,IAAkB,GAA0C,uBAAuB,EACnF,IAAiB,GAAyC,uBAAuB,EACnF,IAAO,UACP,IAAO,QAEL,IAAW,OAAO,WACtB,eAAe,EAAQ,mBAAmB,EAAS,EAAQ,iBAAiB,GAAG,EAAkB,KAClG,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,EAAS,GAAG;GAC/E,WAAW,GAAG,EAAU,GAAe,EAAK,CAAC;GAC7C,UAAU,GAAG,EAAS,GAAe,EAAK,CAAC;GAC3C,UAAU,EAAQ,YAAY,EAAc,QAAQ;GACpD,WAAW;GACX,WAAW;GACX,SAAS;GACT,QAAQ,GAAG,EAAQ,OAAO;GAC3B;IAGG,UAA+B;EAKnC,AAJA,EAAS;GACP,GAAG;GACH,GAAG,GAAc;GAClB,CAAC,EACF,EAAU,GAAK;IAGX,UAA6B;EACjC,AAAI,KACF,iBAAiB;GACf,GAAU,OAAe;IACvB,GAAG;IACH,GAAG,GAAc;IAClB,EAAE;KACF,EAAE;IAIH,KAAsB,MAAqB;EAE7C,CAAC,KACA,EAA4C,SAAS,EAAI,OAAe,IACzE,CAAC,KACA,EAA6C,SAAS,EAAI,OAAe;IAMxE,IAA0B,EAAY,GAAgB,EAAe;CAoC3E,OAlCA,SACM,MAAqB,SACnB,EAAQ,eAAe,UAEzB,EAA6C,iBAAiB,SAAS,EAAiB,IAGxF,EAA6C,iBAAiB,cAAc,EAAiB,EAE7F,EAA6C,iBAAiB,cAAc,EAAmB,GAEjG,SAAS,iBAAiB,aAAa,EAAmB,EAC1D,SAAS,iBAAiB,cAAc,EAAmB,EAC3D,OAAO,iBAAiB,UAAU,EAAwB,SAG/C;EACX,AAAI,MAAqB,SACnB,EAAQ,eAAe,UAEzB,EAA6C,oBAAoB,SAAS,EAAiB,IAG3F,EAA6C,oBAAoB,cAAc,EAAiB,EAEhG,EAA6C,oBAAoB,cAAc,EAAmB,GAEpG,SAAS,oBAAoB,aAAa,EAAmB,EAC7D,SAAS,oBAAoB,cAAc,EAAmB,EAC9D,OAAO,oBAAoB,UAAU,EAAwB;IAGjE,EAEK;EACL,OAAO,EACL,UACD;EACD;EACA;EACD"}

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;CACN,EAYY,UAAuC;CAClD,IAAM,KAAiB,GAAc,MAC5B,IAAU,eAAe,EAAK,OAAO,eAAe,IAAO,EAAE,MAGhE,KAAc,MACd,OAAO,SAAW,MACb,OAAO,WAAW,EAAM,CAAC,UAE3B,IAGH,UAA+B;EACnC,IAAM,IAA0C;GAC9C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACN,EAEK,IAAc,EAAE,GAAG,GAAwB,EAC3C,IAAW,EAAE,GAAG,GAAwB;AAgB9C,SAdA,OAAO,QAAQ,EAAY,CAAC,SAAS,CAAC,GAAK,OAAU;AAEnD,GADA,EAAY,KAAmC,EAAW,EAAc,GAAM,GAAK,CAAC,EACpF,EAAS,KAAmC,EAAW,EAAc,GAAM,GAAM,CAAC;IAClF,EAWK;GAAE;GAAa;GAAU,aATC,EAAW,0BAA0B,GAClE,aACA,EAAW,2BAA2B,GACpC,cACA;GAKuC,WAH1B,OAAO,KAAK,EAAY,CAAC,UAAU,MAAQ,EAAY,GAAiC,IACzG;GAEsD;IAGpD,CAAC,GAAY,KAAiB,EAAS,GAAwB,CAAC;AAWtE,QATA,QAAgB;EACd,IAAM,UAAqB,EAAc,GAAwB,CAAC;AAIlE,SAFA,OAAO,iBAAiB,UAAU,EAAa,QAElC,OAAO,oBAAoB,UAAU,EAAa;IAE9D,EAAE,CAAC,EAEC"}
+{"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;CACN,EAYY,UAAuC;CAClD,IAAM,KAAiB,GAAc,MAC5B,IAAU,eAAe,EAAK,OAAO,eAAe,IAAO,EAAE,MAGhE,KAAc,MACd,OAAO,SAAW,MACb,OAAO,WAAW,EAAM,CAAC,UAE3B,IAGH,UAA+B;EACnC,IAAM,IAA0C;GAC9C,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,KAAK;GACN,EAEK,IAAc,EAAE,GAAG,GAAwB,EAC3C,IAAW,EAAE,GAAG,GAAwB;EAgB9C,OAdA,OAAO,QAAQ,EAAY,CAAC,SAAS,CAAC,GAAK,OAAU;GAEnD,AADA,EAAY,KAAmC,EAAW,EAAc,GAAM,GAAK,CAAC,EACpF,EAAS,KAAmC,EAAW,EAAc,GAAM,GAAM,CAAC;IAClF,EAWK;GAAE;GAAa;GAAU,aATC,EAAW,0BAA0B,GAClE,aACA,EAAW,2BAA2B,GACpC,cACA;GAKuC,WAH1B,OAAO,KAAK,EAAY,CAAC,UAAU,MAAQ,EAAY,GAAiC,IACzG;GAEsD;IAGpD,CAAC,GAAY,KAAiB,EAAS,GAAwB,CAAC;CAWtE,OATA,QAAgB;EACd,IAAM,UAAqB,EAAc,GAAwB,CAAC;EAIlE,OAFA,OAAO,iBAAiB,UAAU,EAAa,QAElC,OAAO,oBAAoB,UAAU,EAAa;IAE9D,EAAE,CAAC,EAEC"}