@uva-glass/component-library 2.0.2 → 2.1.1

package/dist/components/SelectListbox/SelectListbox.d.ts

@@ -14,9 +14,11 @@ export interface SelectListboxProps {
     /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */
     buttonLabelBold?: boolean;
     /** The variant of the select box. */
-    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
+    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';
+    /** If true sets the option dropdown min-width to the width of the select button. */
+    fullWidth?: boolean;
     /** The size of the select box. */
-    size?: 'small' | 'default';
+    size?: 'small' | 'medium' | 'default';
     /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */
     optionPositionRight?: boolean;
     /** The breakpoint at which to switch to the mobile view. */
@@ -26,6 +28,6 @@ export interface SelectListboxProps {
 }
 /** Represents a component to render a select list box. */
 export declare const SelectListbox: {
-    ({ options, variant, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
+    ({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
     SelectOption: ({ option, index, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/SelectListbox/SelectListbox.js

@@ -1,50 +1,52 @@
-import { jsx as e, jsxs as E } from "react/jsx-runtime";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
 import { useState as t } from "react";
-import { SelectProvider as b } from "./SelectProvider.js";
-import { SelectButton as P } from "./components/SelectButton.js";
-import { SelectContainer as B } from "./components/SelectContainer.js";
-import { SelectOptionBox as O } from "./components/SelectOptionBox.js";
-import { SelectOption as g } from "./components/SelectOption.js";
-import { usePositionedFloaters as j } from "../hooks/usePositionedFloaters.js";
-const k = ({
+import { SelectProvider as P } from "./SelectProvider.js";
+import { SelectButton as B } from "./components/SelectButton.js";
+import { SelectContainer as O } from "./components/SelectContainer.js";
+import { SelectOptionBox as g } from "./components/SelectOptionBox.js";
+import { SelectOption as j } from "./components/SelectOption.js";
+import { usePositionedFloaters as k } from "../hooks/usePositionedFloaters.js";
+const v = ({
   options: o,
   variant: i,
-  size: r = "default",
-  optionPositionRight: n,
-  defaultValue: l = -1,
-  maxOptionHeight: m,
-  disabled: s,
+  fullWidth: r = !1,
+  size: n = "default",
+  optionPositionRight: l,
+  defaultValue: m = -1,
+  maxOptionHeight: s,
+  disabled: f,
   buttonLabelProp: c = "label",
-  buttonLabelBold: f,
-  onChange: p,
+  buttonLabelBold: p,
+  onChange: a,
   children: S
 }) => {
-  const [a, u] = t(null), [x, d] = t(null), { style: h } = j(a, x, {
+  const [u, x] = t(null), [d, h] = t(null), { style: E } = k(u, d, {
     mouseEvent: "click",
     position: "bottomLeft",
     offset: 4,
-    maxFixedHeight: m,
-    horizontalPosition: n ? "right" : "left",
-    mobileBreakpoint: "28rem"
+    maxFixedHeight: s,
+    horizontalPosition: l ? "right" : "left",
+    mobileBreakpoint: "28rem",
+    fullWidth: r
   });
-  return /* @__PURE__ */ e(b, { options: o, defaultValue: l, children: /* @__PURE__ */ E(B, { children: [
+  return /* @__PURE__ */ e(P, { options: o, defaultValue: m, children: /* @__PURE__ */ b(O, { children: [
     /* @__PURE__ */ e(
-      P,
+      B,
       {
-        disabled: s,
+        disabled: f,
         buttonLabelProp: c,
-        buttonLabelBold: f,
+        buttonLabelBold: p,
         variant: i,
-        size: r,
-        onChange: p,
-        ref: d
+        size: n,
+        onChange: a,
+        ref: h
       }
     ),
-    /* @__PURE__ */ e(O, { ref: u, ...h, children: S })
+    /* @__PURE__ */ e(g, { ref: x, ...E, children: S })
   ] }) });
 };
-k.SelectOption = g;
+v.SelectOption = j;
 export {
-  k as SelectListbox
+  v as SelectListbox
 };
 //# sourceMappingURL=SelectListbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  /** The size of the select box. */\n  size?: 'small' | 'default';\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  children,\n}: PropsWithChildren<SelectListboxProps>) => {\n  const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n    mouseEvent: 'click',\n    position: 'bottomLeft',\n    offset: 4,\n    maxFixedHeight: maxOptionHeight,\n    horizontalPosition: optionPositionRight ? 'right' : 'left',\n    mobileBreakpoint: '28rem',\n  });\n\n  return (\n    <SelectProvider options={options} defaultValue={defaultValue}>\n      <SelectContainer>\n        <SelectButton\n          disabled={disabled}\n          buttonLabelProp={buttonLabelProp}\n          buttonLabelBold={buttonLabelBold}\n          variant={variant}\n          size={size}\n          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {children}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAuCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,EAAA,CACnB;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAnB,GAAkB,cAAAI,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAP;AAAA,QACA,MAAAC;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}
+{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\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}\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  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          onChange={onChange}\n          ref={setReferenceElement}\n        />\n\n        <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n          {children}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AAyCO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACG,gBAAAiB,EAAAC,GAAA,EAAe,SAAApB,GAAkB,cAAAK,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,EACH,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEAZ,EAAc,eAAeyB;"}

package/dist/components/SelectListbox/components/SelectButton.d.ts

@@ -1,7 +1,7 @@
 import { OptionValue } from 'components/SelectListbox/SelectProvider';
 export interface SelectButtonProps {
-    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
-    size?: 'small' | 'default';
+    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';
+    size?: 'small' | 'medium' | 'default';
     onChange?: (option: OptionValue) => void;
     buttonLabelProp?: string;
     buttonLabelBold?: boolean;

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

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-OuTLNxxd.js";
 import { forwardRef as E, useRef as g, useEffect as c } from "react";
-import { s as t } from "../../../SelectListbox.module-CdK9mQmJ.js";
+import { s as t } from "../../../SelectListbox.module-D-jCitTr.js";
 import { Icon as L } from "../../Icon/Icon.js";
 import { useSelect as N } from "../SelectProvider.js";
 const O = E((d, u) => {

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

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  size?: 'small' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen\n      ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n      : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAU,IAAAP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAC,GAE1GC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,KAAK,IAC/D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB,MAAM;AAAA,EAAA,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,EAAE,GAELY,EAAU,MAAM;AACV,IAAAlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"SelectButton.js","sources":["../../../../src/components/SelectListbox/components/SelectButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, forwardRef } from 'react';\n\nimport type { KeyboardEvent } from 'react';\nimport type { OptionValue, SelectValue } from 'components/SelectListbox/SelectProvider';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { Icon } from 'components/Icon';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectButtonProps {\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  size?: 'small' | 'medium' | 'default';\n  onChange?: (option: OptionValue) => void;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  disabled?: boolean;\n}\n\nexport const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>((props, ref) => {\n  const { variant, size = 'default', onChange, buttonLabelProp = 'label', buttonLabelBold, disabled = false } = props;\n  const buttonWrapper = useRef<HTMLSpanElement>(null);\n  const isFirstRender = useRef(true);\n  const { listboxId, isOpen, selectedValue, toggleListbox, setIsOpen, setActiveIndex, options } = useSelect() || {};\n\n  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    isOpen\n      ? (buttonWrapper.current?.children[0] as HTMLButtonElement).blur()\n      : !isFirstRender.current && (buttonWrapper.current?.children[0] as HTMLButtonElement).focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    isFirstRender.current = false;\n\n    return () => {\n      isFirstRender.current = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (onChange) onChange(selectedValue);\n  }, [onChange, selectedValue]);\n\n  return (\n    <span ref={buttonWrapper}>\n      <button\n        className={clsx(styles['select-listbox-trigger'], styles[`select-listbox-trigger--${size}`], {\n          [styles[`select-listbox-trigger--${variant}`]]: variant,\n          [styles['select-listbox-trigger--bold']]: buttonLabelBold,\n        })}\n        type=\"button\"\n        onClick={toggleListbox}\n        onKeyDown={onTriggerKeyDown}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-label={`${selectedValue.label}`}\n        disabled={disabled}\n        aria-controls={listboxId}\n        {...(ref && { ref: ref })}\n      >\n        <span className={styles['select-listbox-trigger-label']}>\n          {selectedValue[buttonLabelProp as keyof SelectValue]}\n        </span>\n\n        <Icon\n          className={clsx(styles['select-listbox-trigger-icon'], {\n            [styles['select-listbox-trigger-icon--open']]: isOpen,\n          })}\n          name=\"CheveronDown\"\n          size={16}\n        />\n      </button>\n    </span>\n  );\n});\n"],"names":["SelectButton","forwardRef","props","ref","variant","size","onChange","buttonLabelProp","buttonLabelBold","disabled","buttonWrapper","useRef","isFirstRender","listboxId","isOpen","selectedValue","toggleListbox","setIsOpen","setActiveIndex","options","useSelect","onTriggerKeyDown","event","option","useEffect","_a","_b","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AACrF,QAAA,EAAE,SAAAC,GAAS,MAAAC,IAAO,WAAW,UAAAC,GAAU,iBAAAC,IAAkB,SAAS,iBAAAC,GAAiB,UAAAC,IAAW,GAAU,IAAAP,GACxGQ,IAAgBC,EAAwB,IAAI,GAC5CC,IAAgBD,EAAO,EAAI,GAC3B,EAAE,WAAAE,GAAW,QAAAC,GAAQ,eAAAC,GAAe,eAAAC,GAAe,WAAAC,GAAW,gBAAAC,GAAgB,SAAAC,EAAQ,IAAIC,EAAU,KAAK,CAAC,GAE1GC,IAAmB,CAACC,MAA4C;AACpE,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAEH,YADAA,EAAM,eAAe,GACjB,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QAAA;AAEF;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAgB,GACPJ,EAAAC,EAAQ,UAAU,CAACI,MAAWA,EAAO,WAAUR,KAAA,gBAAAA,EAAe,MAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAAV,MACKW,IAAAf,EAAc,YAAd,gBAAAe,EAAuB,SAAS,IAAyB,KAAK,IAC/D,CAACb,EAAc,aAAYc,IAAAhB,EAAc,YAAd,gBAAAgB,EAAuB,SAAS,IAAyB,MAAM;AAAA,EAAA,GAC7F,CAACZ,CAAM,CAAC,GAEXU,EAAU,OACRZ,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,EAAE,GAELY,EAAU,MAAM;AACV,IAAAlB,OAAmBS,CAAa;AAAA,EAAA,GACnC,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAK,EAAA,KAAKjB,GACT,UAAA,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,wBAAwB,GAAGA,EAAO,2BAA2BzB,CAAI,EAAE,GAAG;AAAA,QAC3F,CAACyB,EAAO,2BAA2B1B,CAAO,EAAE,CAAC,GAAGA;AAAA,QAChD,CAAC0B,EAAO,8BAA8B,CAAC,GAAGtB;AAAA,MAAA,CAC3C;AAAA,MACD,MAAK;AAAA,MACL,SAASQ;AAAA,MACT,WAAWK;AAAA,MACX,iBAAeP;AAAA,MACf,iBAAc;AAAA,MACd,cAAY,GAAGC,EAAc,KAAK;AAAA,MAClC,UAAAN;AAAA,MACA,iBAAeI;AAAA,MACd,GAAIV,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA;AAAA,QAAA,gBAAAwB,EAAC,UAAK,WAAWG,EAAO,8BAA8B,GACnD,UAAAf,EAAcR,CAAoC,GACrD;AAAA,QAEA,gBAAAoB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrD,CAACA,EAAO,mCAAmC,CAAC,GAAGhB;AAAA,YAAA,CAChD;AAAA,YACD,MAAK;AAAA,YACL,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

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

@@ -1,7 +1,7 @@
 import { jsx as c } from "react/jsx-runtime";
 import { useRef as i, useCallback as u, useEffect as l } from "react";
 import { useSelect as m } from "../SelectProvider.js";
-import { s as f } from "../../../SelectListbox.module-CdK9mQmJ.js";
+import { s as f } from "../../../SelectListbox.module-D-jCitTr.js";
 const E = ({ children: o }) => {
   const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
     ({ target: s }) => {

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

@@ -2,7 +2,7 @@ import { jsx as d } from "react/jsx-runtime";
 import { c as v } from "../../../clsx-OuTLNxxd.js";
 import { useRef as D, useEffect as p } from "react";
 import { useSelect as y } from "../SelectProvider.js";
-import { s as b } from "../../../SelectListbox.module-CdK9mQmJ.js";
+import { s as b } from "../../../SelectListbox.module-D-jCitTr.js";
 const S = ({ option: t, index: l, children: m }) => {
   const o = D(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: u, setIsOpen: i, options: a } = y(), w = (e) => {
     u(a[e]), i(!1);

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

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import { forwardRef as m, useRef as x } from "react";
-import { s as i } from "../../../SelectListbox.module-CdK9mQmJ.js";
+import { s as i } from "../../../SelectListbox.module-D-jCitTr.js";
 import { useSelect as a } from "../SelectProvider.js";
 const h = m((l, e) => {
   const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);

package/dist/components/hooks/usePositionedFloaters.d.ts

@@ -13,6 +13,7 @@ interface optionProps {
     maxFixedHeight?: `${number}${'px' | 'rem'}`;
     horizontalPosition?: 'left' | 'right';
     mobileBreakpoint?: `${number}${'px' | 'rem'}`;
+    fullWidth: boolean;
 }
 export declare function usePositionedFloaters<T extends HTMLElement = HTMLElement>(positionedElement: T | null, referenceElement: T | null, options: optionProps): positionProps;
 export {};

package/dist/components/hooks/usePositionedFloaters.js

@@ -1,62 +1,64 @@
-import { useState as L, useEffect as F } from "react";
-import { useDebounce as y } from "./useDebounce.js";
-const a = 10, B = 45, l = 300, W = 0, k = 768, D = 2;
+import { useState as L, useEffect as p } from "react";
+import { useDebounce as F } from "./useDebounce.js";
+const a = 10, y = 45, r = 300, B = 0, k = 768, D = 2;
 function S(d, e, n) {
-  const [m, H] = L(!1), v = {
+  const [m, H] = L(!1), w = {
     inset: "0 auto auto 0",
     opacity: 0,
     maxHeight: "100%",
     maxWidth: "100%",
+    minWidth: r,
     overflowX: "hidden",
     overflowY: "auto",
     margin: "0rem"
-  }, [c, w] = L(v), h = (t) => {
+  }, [h, v] = L(w), l = (t) => {
     const o = parseFloat(getComputedStyle(document.documentElement).fontSize);
     return t.indexOf("rem") !== -1 ? parseFloat(t) * o : parseFloat(t);
   }, b = (t, o) => {
     if (!t) return 0;
     const i = o === "bottom" ? window.innerHeight - t.bottom - n.offset - a : t.top - n.offset - a;
-    return !n.maxFixedHeight || h(n.maxFixedHeight) > i ? i : h(n.maxFixedHeight);
-  }, p = (t, o) => {
+    return !n.maxFixedHeight || l(n.maxFixedHeight) > i ? i : l(n.maxFixedHeight);
+  }, W = (t, o) => {
     if (!t) return 0;
     const i = o === "left" ? window.innerWidth - t.left - a : t.right - a;
-    return i <= l ? l : i;
+    return i <= r ? r : i;
   }, P = (t, o, i) => i ? `${t.left - Math.abs(o.width - t.width) / D}px` : `${t.left}px`, x = () => {
     const t = d == null ? void 0 : d.getBoundingClientRect(), o = e == null ? void 0 : e.getBoundingClientRect();
     let i = "bottom", u = "left";
     const f = window.matchMedia(
-      `(max-width: ${n.mobileBreakpoint ? h(n.mobileBreakpoint) : k}px)`
+      `(max-width: ${n.mobileBreakpoint ? l(n.mobileBreakpoint) : k}px)`
     ).matches;
-    return !o || !t ? v : (window.innerHeight - o.bottom - a < B && (i = "top"), (window.innerWidth - o.left - a < l || n.horizontalPosition === "right") && !f && (u = "right"), {
+    return !o || !t ? w : (window.innerHeight - o.bottom - a < y && (i = "top"), (window.innerWidth - o.left - a < r || n.horizontalPosition === "right") && !f && (u = "right"), {
       inset: `${i === "bottom" ? o[i] + "px" : "auto"}
               ${u === "right" ? window.innerWidth - o[u] + "px" : "auto"}
               ${i === "top" ? window.innerHeight - o[i] + "px" : "auto"}
               ${u === "left" ? P(o, t, f) : "auto"}`,
       maxHeight: `${b(o, i)}px`,
-      maxWidth: `${p(o, u)}px`,
+      maxWidth: `${W(o, u)}px`,
+      minWidth: n.fullWidth ? o.width : r,
       overflowX: "hidden",
       overflowY: "auto",
       opacity: 1,
       margin: `${n.offset}px 0`
     });
-  }, r = () => {
-    w({
-      ...c,
+  }, c = () => {
+    v({
+      ...h,
       ...x()
     }), H(!0);
   }, $ = () => {
-    m && w({
-      ...c,
+    m && v({
+      ...h,
       ...x()
     });
   }, s = (t) => {
     !e || e.contains(t.target) || !d || d.contains(t.target);
-  }, g = y($, W);
-  return F(() => (e !== null && (n.mouseEvent === "click" ? e.addEventListener("click", r) : (e.addEventListener("mouseenter", r), e.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", g)), () => {
-    e !== null && (n.mouseEvent === "click" ? e.removeEventListener("click", r) : (e.removeEventListener("mouseenter", r), e.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", g));
+  }, g = F($, B);
+  return p(() => (e !== null && (n.mouseEvent === "click" ? e.addEventListener("click", c) : (e.addEventListener("mouseenter", c), e.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", g)), () => {
+    e !== null && (n.mouseEvent === "click" ? e.removeEventListener("click", c) : (e.removeEventListener("mouseenter", c), e.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", g));
   })), {
     style: {
-      style: c
+      style: h
     },
     status: m
   };

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

@@ -1 +1 @@
-{"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  status: boolean;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 45;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    margin: '0rem',\n  };\n\n  const [style, setStyle] = useState(defaultStyle);\n\n  const sizeToPx = (size: `${number}${'px' | 'rem'}`): number => {\n    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n    return size.indexOf('rem') !== -1 ? parseFloat(size) * rootFontSize : parseFloat(size);\n  };\n\n  const setHeight = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _maxHeight =\n      pos === 'bottom'\n        ? window.innerHeight - refRect.bottom - options.offset - BODY_PADDING\n        : refRect.top - options.offset - BODY_PADDING;\n\n    return !options.maxFixedHeight || sizeToPx(options.maxFixedHeight) > _maxHeight\n      ? _maxHeight\n      : sizeToPx(options.maxFixedHeight);\n  };\n\n  const setWidth = (refRect: DOMRect, pos: string): number => {\n    if (!refRect) return 0;\n\n    const _availableWidth =\n      pos === 'left' ? window.innerWidth - refRect.left - BODY_PADDING : refRect.right - BODY_PADDING;\n\n    return _availableWidth <= MIN_WIDTH ? MIN_WIDTH : _availableWidth;\n  };\n\n  const setLeft = (refRect: DOMRect, posRect: DOMRect, isMobile: boolean) => {\n    if (isMobile) {\n      return `${refRect.left - Math.abs(posRect.width - refRect.width) / HALF}px`;\n    } else {\n      return `${refRect.left}px`;\n    }\n  };\n\n  const calcPosition = (): typeof defaultStyle => {\n    const positionedRect = (positionedElement as HTMLElement | null)?.getBoundingClientRect();\n    const referenceRect = (referenceElement as HTMLElement | null)?.getBoundingClientRect();\n    let yPos = 'bottom';\n    let xPos = 'left';\n\n    const isMobile = window.matchMedia(\n      `(max-width: ${options.mobileBreakpoint ? sizeToPx(options.mobileBreakpoint) : MOBILE_BREAKPOINT}px)`\n    ).matches;\n\n    if (!referenceRect || !positionedRect) {\n      return defaultStyle;\n    }\n\n    if (window.innerHeight - referenceRect.bottom - BODY_PADDING < MIN_HEIGHT) {\n      yPos = 'top';\n    }\n\n    if (\n      (window.innerWidth - referenceRect.left - BODY_PADDING < MIN_WIDTH || options.horizontalPosition === 'right') &&\n      !isMobile\n    ) {\n      xPos = 'right';\n    }\n\n    return {\n      inset: `${yPos === 'bottom' ? referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'right' ? window.innerWidth - referenceRect[xPos] + 'px' : 'auto'}\n              ${yPos === 'top' ? window.innerHeight - referenceRect[yPos] + 'px' : 'auto'}\n              ${xPos === 'left' ? setLeft(referenceRect, positionedRect, isMobile) : 'auto'}`,\n      maxHeight: `${setHeight(referenceRect, yPos)}px`,\n      maxWidth: `${setWidth(referenceRect, xPos)}px`,\n      overflowX: 'hidden',\n      overflowY: 'auto',\n      opacity: 1,\n      margin: `${options.offset}px 0`,\n    };\n  };\n\n  const handleMouseEvent = (): void => {\n    setStyle({\n      ...style,\n      ...calcPosition(),\n    });\n    setStatus(true);\n  };\n\n  const updatePosition = (): void => {\n    if (status) {\n      setStyle({\n        ...style,\n        ...calcPosition(),\n      });\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', debouncedUpdatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', debouncedUpdatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    status,\n  };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}
+{"version":3,"file":"usePositionedFloaters.js","sources":["../../../src/components/hooks/usePositionedFloaters.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useDebounce } from './useDebounce';\n\ninterface positionProps {\n  style: {\n    style: {\n      inset: string;\n    };\n  };\n  status: boolean;\n}\n\ninterface optionProps {\n  mouseEvent: 'click' | 'hover';\n  position: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';\n  offset: number;\n  maxFixedHeight?: `${number}${'px' | 'rem'}`;\n  horizontalPosition?: 'left' | 'right';\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  fullWidth: boolean;\n}\n\nconst BODY_PADDING = 10;\nconst MIN_HEIGHT = 45;\nconst MIN_WIDTH = 300;\nconst DEBOUNCE_DELAY = 0;\nconst MOBILE_BREAKPOINT = 768;\nconst HALF = 2;\n\nexport function usePositionedFloaters<T extends HTMLElement = HTMLElement>(\n  positionedElement: T | null,\n  referenceElement: T | null,\n  options: optionProps\n): positionProps {\n  const [status, setStatus] = useState(false);\n  const defaultStyle = {\n    inset: '0 auto auto 0',\n    opacity: 0,\n    maxHeight: '100%',\n    maxWidth: '100%',\n    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      setStyle({\n        ...style,\n        ...calcPosition(),\n      });\n    }\n  };\n\n  const handleClickOutside = (evt: Event): void => {\n    if (\n      !referenceElement ||\n      (referenceElement as unknown as HTMLElement).contains(evt.target as Node) ||\n      !positionedElement ||\n      (positionedElement as unknown as HTMLElement).contains(evt.target as Node)\n    ) {\n      return;\n    }\n  };\n\n  const debouncedUpdatePosition = useDebounce(updatePosition, DEBOUNCE_DELAY);\n\n  useEffect(() => {\n    if (referenceElement !== null) {\n      if (options.mouseEvent === 'click') {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('click', handleMouseEvent);\n      } else {\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseenter', handleMouseEvent);\n        // eslint-disable-next-line no-extra-semi\n        (referenceElement as unknown as HTMLElement).addEventListener('mouseleave', handleClickOutside);\n      }\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      window.addEventListener('resize', debouncedUpdatePosition);\n    }\n\n    return () => {\n      if (referenceElement !== null) {\n        if (options.mouseEvent === 'click') {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('click', handleMouseEvent);\n        } else {\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseenter', handleMouseEvent);\n          // eslint-disable-next-line no-extra-semi\n          (referenceElement as unknown as HTMLElement).removeEventListener('mouseleave', handleClickOutside);\n        }\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n        window.removeEventListener('resize', debouncedUpdatePosition);\n      }\n    };\n  });\n\n  return {\n    style: {\n      style,\n    },\n    status,\n  };\n}\n"],"names":["BODY_PADDING","MIN_HEIGHT","MIN_WIDTH","DEBOUNCE_DELAY","MOBILE_BREAKPOINT","HALF","usePositionedFloaters","positionedElement","referenceElement","options","status","setStatus","useState","defaultStyle","style","setStyle","sizeToPx","size","rootFontSize","setHeight","refRect","pos","_maxHeight","setWidth","_availableWidth","setLeft","posRect","isMobile","calcPosition","positionedRect","referenceRect","yPos","xPos","handleMouseEvent","updatePosition","handleClickOutside","evt","debouncedUpdatePosition","useDebounce","useEffect"],"mappings":"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"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "2.0.2",
+  "version": "2.1.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,7 @@
     "@react-aria/overlays": "^3.24.0",
     "@react-types/dialog": "^3.5.14",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/gitlab": "^13.2.1",
+    "@semantic-release/gitlab": "^13.2.3",
     "@semantic-release/npm": "^12.0.1",
     "@storybook/addon-a11y": "^8.4.6",
     "@storybook/addon-essentials": "^8.4.6",
@@ -60,7 +60,7 @@
     "@storybook/test": "^8.4.6",
     "@types/node": "^22.10.1",
     "@types/react-dom": "^18.3.1",
-    "@types/react": "^18.3.12",
+    "@types/react": "^18.3.13",
     "@uva-glass/eslint-config": "^1.3.1",
     "@uva-glass/stylelint-config": "^1.1.0",
     "@vitejs/plugin-react": "^4.3.4",

package/dist/SelectListbox.module-CdK9mQmJ.js

@@ -1,23 +0,0 @@
-import './assets/SelectListbox.css';const l = {
-  "select-listbox-container": "_select-listbox-container_x5lzf_1",
-  "select-listbox__wrapper": "_select-listbox__wrapper_x5lzf_5",
-  "select-listbox-trigger": "_select-listbox-trigger_x5lzf_15",
-  "select-listbox-trigger--default": "_select-listbox-trigger--default_x5lzf_30",
-  "select-listbox-trigger--small": "_select-listbox-trigger--small_x5lzf_34",
-  "select-listbox-trigger-label": "_select-listbox-trigger-label_x5lzf_38",
-  "select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_x5lzf_46",
-  "select-listbox-trigger--bold": "_select-listbox-trigger--bold_x5lzf_50",
-  "select-listbox-trigger--pill": "_select-listbox-trigger--pill_x5lzf_54",
-  "select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_x5lzf_59",
-  "select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_x5lzf_64",
-  "select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_x5lzf_79",
-  "select-listbox-trigger-icon": "_select-listbox-trigger-icon_x5lzf_91",
-  "select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_x5lzf_96",
-  "select-listbox": "_select-listbox_x5lzf_1",
-  "select-listbox-option": "_select-listbox-option_x5lzf_110",
-  "select-listbox-option--active": "_select-listbox-option--active_x5lzf_122"
-};
-export {
-  l as s
-};
-//# sourceMappingURL=SelectListbox.module-CdK9mQmJ.js.map

package/dist/SelectListbox.module-CdK9mQmJ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectListbox.module-CdK9mQmJ.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}