@uva-glass/component-library 1.3.1 → 1.3.3

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

@@ -1,11 +1,7 @@
-import { ReactNode, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { OptionValue, SelectValue } from './SelectProvider';
-import { SelectButton } from './components/SelectButton';
-import { SelectContainer } from './components/SelectContainer';
-import { SelectOptionBox } from './components/SelectOptionBox';
-import { SelectOption } from './components/SelectOption';
 
-interface ISelect {
+export interface SelectListboxProps {
     options: OptionValue[];
     defaultValue?: SelectValue;
     maxOptionHeight?: `${number}${'px' | 'rem'}`;
@@ -13,31 +9,12 @@ interface ISelect {
     buttonLabelProp?: string;
     buttonLabelBold?: boolean;
     variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';
+    size?: 'small' | 'default';
     optionPositionRight?: boolean;
+    mobileBreakpoint?: `${number}${'px' | 'rem'}`;
     onChange?: (option: OptionValue) => void;
-    children?: ReactNode;
 }
-export interface SelectListboxProps extends ISelect {
-    SelectOption?: typeof SelectOption;
-    SelectOptionBox?: typeof SelectOptionBox;
-    SelectButton: typeof SelectButton;
-    SelectContainer: typeof SelectContainer;
-}
-/**
- * SelectListbox component
- * Options can be a component or just a label, it should be wrapped in SelectListbox.SelectOption
- * NOTE: If you want to use a custom component, you should add [aria-hidden="true"]
- *       on the root element so the screen reader will ignore it
- *
- * TODO: Buttonlabel should take a component aswell zo the bold prop can be removed
- */
 export declare const SelectListbox: {
-    ({ options, variant, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
+    ({ options, variant, 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;
-    SelectButton: import('react').ForwardRefExoticComponent<import('./components/SelectButton').SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
-    SelectContainer: ({ children }: {
-        children?: ReactNode;
-    }) => import("react/jsx-runtime").JSX.Element;
-    SelectOptionBox: import('react').ForwardRefExoticComponent<import('./components/SelectOptionBox').SelectOptionBoxProps & import('react').RefAttributes<HTMLDivElement>>;
 };
-export {};

package/dist/components/SelectListbox/SelectListbox.js

@@ -1,50 +1,50 @@
-import { jsx as t, jsxs as P } from "react/jsx-runtime";
-import { useState as o } from "react";
-import { SelectButton as i } from "./components/SelectButton.js";
-import { SelectContainer as n } from "./components/SelectContainer.js";
-import { SelectOptionBox as r } from "./components/SelectOptionBox.js";
-import { SelectOption as b } from "./components/SelectOption.js";
+import { jsx as e, jsxs as E } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { SelectButton as b } from "./components/SelectButton.js";
+import { SelectContainer as P } from "./components/SelectContainer.js";
+import { SelectOptionBox as B } from "./components/SelectOptionBox.js";
+import { SelectOption as O } from "./components/SelectOption.js";
 import { SelectProvider as g } from "./SelectProvider.js";
 import { usePositionedFloaters as j } from "../hooks/usePositionedFloaters.js";
-const e = ({
-  options: l,
-  variant: m,
-  optionPositionRight: s,
-  defaultValue: c = -1,
-  maxOptionHeight: f,
-  disabled: p,
-  buttonLabelProp: S = "label",
-  buttonLabelBold: u,
-  onChange: x,
-  children: a
+const k = ({
+  options: o,
+  variant: i,
+  size: r = "default",
+  optionPositionRight: n,
+  defaultValue: l = -1,
+  maxOptionHeight: m,
+  disabled: s,
+  buttonLabelProp: c = "label",
+  buttonLabelBold: f,
+  onChange: p,
+  children: S
 }) => {
-  const [d, h] = o(null), [E, B] = o(null), { style: O } = j(d, E, {
+  const [a, u] = t(null), [x, d] = t(null), { style: h } = j(a, x, {
     mouseEvent: "click",
     position: "bottomLeft",
     offset: 4,
-    maxFixedHeight: f,
-    horizontalPosition: s ? "right" : "left"
+    maxFixedHeight: m,
+    horizontalPosition: n ? "right" : "left",
+    mobileBreakpoint: "28rem"
   });
-  return /* @__PURE__ */ t(g, { options: l, defaultValue: c, children: /* @__PURE__ */ P(n, { children: [
-    /* @__PURE__ */ t(
-      i,
+  return /* @__PURE__ */ e(g, { options: o, defaultValue: l, children: /* @__PURE__ */ E(P, { children: [
+    /* @__PURE__ */ e(
+      b,
       {
-        disabled: p,
-        buttonLabelProp: S,
-        buttonLabelBold: u,
-        variant: m,
-        onChange: x,
-        ref: B
+        disabled: s,
+        buttonLabelProp: c,
+        buttonLabelBold: f,
+        variant: i,
+        size: r,
+        onChange: p,
+        ref: d
       }
     ),
-    /* @__PURE__ */ t(r, { ref: h, ...O, children: a })
+    /* @__PURE__ */ e(B, { ref: u, ...h, children: S })
   ] }) });
 };
-e.SelectOption = b;
-e.SelectButton = i;
-e.SelectContainer = n;
-e.SelectOptionBox = r;
+k.SelectOption = O;
 export {
-  e as SelectListbox
+  k 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 { ReactNode, PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\nimport { SelectProvider } from './SelectProvider';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\ninterface ISelect {\n  options: OptionValue[];\n  defaultValue?: SelectValue;\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  disabled?: boolean;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  optionPositionRight?: boolean;\n  onChange?: (option: OptionValue) => void;\n  children?: ReactNode;\n}\n\nexport interface SelectListboxProps extends ISelect {\n  SelectOption?: typeof SelectOption;\n  SelectOptionBox?: typeof SelectOptionBox;\n  SelectButton: typeof SelectButton;\n  SelectContainer: typeof SelectContainer;\n}\n\n/**\n * SelectListbox component\n * Options can be a component or just a label, it should be wrapped in SelectListbox.SelectOption\n * NOTE: If you want to use a custom component, you should add [aria-hidden=\"true\"]\n *       on the root element so the screen reader will ignore it\n *\n * TODO: Buttonlabel should take a component aswell zo the bold prop can be removed\n */\n\nexport const SelectListbox = ({\n  options,\n  variant,\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  });\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          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;\nSelectListbox.SelectButton = SelectButton;\nSelectListbox.SelectContainer = SelectContainer;\nSelectListbox.SelectOptionBox = SelectOptionBox;\n"],"names":["SelectListbox","options","variant","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;AA0CO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,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,EAAA,CACrD;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAlB,GAAkB,cAAAG,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAN;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,GACH;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEAV,EAAc,eAAeuB;AAC7BvB,EAAc,eAAeqB;AAC7BrB,EAAc,kBAAkBoB;AAChCpB,EAAc,kBAAkBsB;"}
+{"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 { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\nimport { SelectProvider } from './SelectProvider';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  options: OptionValue[];\n  defaultValue?: SelectValue;\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  disabled?: boolean;\n  buttonLabelProp?: string;\n  buttonLabelBold?: boolean;\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight';\n  size?: 'small' | 'default';\n  optionPositionRight?: boolean;\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  onChange?: (option: OptionValue) => void;\n}\n\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":";;;;;;;;AA2BO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBT;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,EAAA,CACnB;AAED,SACG,gBAAAe,EAAAC,GAAA,EAAe,SAAAnB,GAAkB,cAAAI,GAChC,4BAACgB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAf;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAP;AAAA,QACA,MAAAC;AAAA,QACA,UAAAO;AAAA,QACA,KAAKM;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAAAN,GACH;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEAX,EAAc,eAAewB;"}

package/dist/components/SelectListbox/SelectProvider.js

@@ -1,38 +1,36 @@
-import { jsx as g } from "react/jsx-runtime";
-import { createContext as m, useState as o, useRef as p, useId as C, useEffect as P, useContext as V } from "react";
-const i = m({}), L = ({ options: e, defaultValue: c, children: v }) => {
-  const [r, x] = o({ value: "", label: "" }), [f, s] = o(!1), [n, u] = o(-1), I = p(C()), b = () => {
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as g, useState as l, useRef as p, useId as C, useContext as P } from "react";
+const d = g({}), L = ({ options: e, defaultValue: o, children: i }) => {
+  const [c, v] = l({ value: "", label: "" }), [x, s] = l(!1), [f, r] = l(-1), I = p(C()), b = () => {
     s((t) => !t);
-  }, a = (t) => e.find((l) => l.value === t) || {
+  }, u = (t) => e.find((n) => n.value === t) || {
     value: -1,
     label: "",
     selectedLabel: "-"
-  }, d = (t) => {
-    const l = e.findIndex((S) => S.value === t.value);
-    u(l), x(t), s(!1);
+  }, a = (t) => {
+    const n = e.findIndex((S) => S.value === t.value);
+    r(n), v(t), s(!1);
   };
-  return c !== -1 && !r.value && d(a(c)), P(() => {
-    console.log(n);
-  }, [n]), /* @__PURE__ */ g(
-    i.Provider,
+  return o !== -1 && !c.value && a(u(o)), /* @__PURE__ */ m(
+    d.Provider,
     {
       value: {
         options: e,
-        selectedValue: r,
-        setSelectedValue: d,
-        isOpen: f,
+        selectedValue: c,
+        setSelectedValue: a,
+        isOpen: x,
         setIsOpen: s,
         toggleListbox: b,
-        getValue: a,
-        activeIndex: n,
-        setActiveIndex: u,
+        getValue: u,
+        activeIndex: f,
+        setActiveIndex: r,
         listboxId: I.current
       },
-      children: v
+      children: i
     }
   );
 }, O = () => {
-  const e = V(i);
+  const e = P(d);
   if (e === void 0)
     throw new Error("useSelect can only be used in an SelectProvider");
   return e;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","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}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  useEffect(() => {\n    console.log(activeIndex);\n  }, [activeIndex]);\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","useEffect","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,CAAA,CAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,GAAA,CAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,EAAA,CAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAAA,GAGzBC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EAAA;AAGjB,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAGzCkB,EAAU,MAAM;AACd,YAAQ,IAAIX,CAAW;AAAA,EAAA,GACtB,CAACA,CAAW,CAAC,GAGd,gBAAAY;AAAA,IAACvB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEamB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAW1B,CAAa;AAExC,MAAIyB,MAAY;AAAiB,UAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}
+{"version":3,"file":"SelectProvider.js","sources":["../../../src/components/SelectListbox/SelectProvider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useId, useRef } from 'react';\n\nimport type { PropsWithChildren } from 'react';\n\nexport type SelectValue = string | number | null;\n\nexport type OptionValue = {\n  value: SelectValue;\n  label: string;\n  selectedLabel?: string;\n  disabled?: boolean;\n};\nexport interface SelectListboxContext {\n  options: OptionValue[];\n  selectedValue: OptionValue;\n  setSelectedValue: (v: OptionValue) => void;\n  isOpen: boolean;\n  setIsOpen: (v: boolean) => void;\n  toggleListbox: () => void;\n  getValue: (value: SelectValue) => OptionValue;\n  activeIndex: number;\n  setActiveIndex: (v: number) => void;\n  listboxId: string;\n}\n\nconst SelectContext = createContext<SelectListboxContext>({} as SelectListboxContext);\n\ninterface Props {\n  options: OptionValue[];\n  defaultValue: SelectValue;\n}\n\nexport const SelectProvider = ({ options, defaultValue, children }: PropsWithChildren<Props>) => {\n  const [value, setValue] = useState<OptionValue>({ value: '', label: '' });\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const listboxId = useRef<string>(useId());\n\n  const toggleListbox = () => {\n    setIsOpen((status) => !status);\n  };\n\n  const getValue = (value: SelectValue) => {\n    return (\n      options.find((option) => option.value === value) || {\n        value: -1,\n        label: '',\n        selectedLabel: '-',\n      }\n    );\n  };\n\n  const setSelectedValue = (value: OptionValue) => {\n    const selectedIndex = options.findIndex((option) => option.value === value.value);\n    setActiveIndex(selectedIndex);\n    setValue(value);\n    setIsOpen(false);\n  };\n\n  if (defaultValue !== -1 && !value.value) {\n    setSelectedValue(getValue(defaultValue));\n  }\n\n  return (\n    <SelectContext.Provider\n      value={{\n        options,\n        selectedValue: value,\n        setSelectedValue,\n        isOpen,\n        setIsOpen,\n        toggleListbox,\n        getValue,\n        activeIndex,\n        setActiveIndex,\n        listboxId: listboxId.current,\n      }}\n    >\n      {children}\n    </SelectContext.Provider>\n  );\n};\n\nexport const useSelect = () => {\n  const context = useContext(SelectContext);\n\n  if (context === undefined) throw new Error('useSelect can only be used in an SelectProvider');\n\n  return context;\n};\n"],"names":["SelectContext","createContext","SelectProvider","options","defaultValue","children","value","setValue","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","listboxId","useRef","useId","toggleListbox","status","getValue","option","setSelectedValue","selectedIndex","jsx","useSelect","context","useContext"],"mappings":";;AAyBA,MAAMA,IAAgBC,EAAoC,CAAA,CAA0B,GAOvEC,IAAiB,CAAC,EAAE,SAAAC,GAAS,cAAAC,GAAc,UAAAC,QAAyC;AACzF,QAAA,CAACC,GAAOC,CAAQ,IAAIC,EAAsB,EAAE,OAAO,IAAI,OAAO,GAAA,CAAI,GAClE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACG,GAAaC,CAAc,IAAIJ,EAAS,EAAE,GAC3CK,IAAYC,EAAeC,EAAA,CAAO,GAElCC,IAAgB,MAAM;AAChB,IAAAN,EAAA,CAACO,MAAW,CAACA,CAAM;AAAA,EAAA,GAGzBC,IAAW,CAACZ,MAEdH,EAAQ,KAAK,CAACgB,MAAWA,EAAO,UAAUb,CAAK,KAAK;AAAA,IAClD,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe;AAAA,EAAA,GAKfc,IAAmB,CAACd,MAAuB;AACzC,UAAAe,IAAgBlB,EAAQ,UAAU,CAACgB,MAAWA,EAAO,UAAUb,EAAM,KAAK;AAChF,IAAAM,EAAeS,CAAa,GAC5Bd,EAASD,CAAK,GACdI,EAAU,EAAK;AAAA,EAAA;AAGjB,SAAIN,MAAiB,MAAM,CAACE,EAAM,SACfc,EAAAF,EAASd,CAAY,CAAC,GAIvC,gBAAAkB;AAAA,IAACtB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,SAAAG;AAAA,QACA,eAAeG;AAAA,QACf,kBAAAc;AAAA,QACA,QAAAX;AAAA,QACA,WAAAC;AAAA,QACA,eAAAM;AAAA,QACA,UAAAE;AAAA,QACA,aAAAP;AAAA,QACA,gBAAAC;AAAA,QACA,WAAWC,EAAU;AAAA,MACvB;AAAA,MAEC,UAAAR;AAAA,IAAA;AAAA,EAAA;AAGP,GAEakB,IAAY,MAAM;AACvB,QAAAC,IAAUC,EAAWzB,CAAa;AAExC,MAAIwB,MAAY;AAAiB,UAAA,IAAI,MAAM,iDAAiD;AAErF,SAAAA;AACT;"}

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

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

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

@@ -1,53 +1,53 @@
-import { jsx as a, jsxs as D } from "react/jsx-runtime";
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
 import { c as f } from "../../../clsx-DB4S2d7J.js";
-import { forwardRef as C, useRef as g, useEffect as c } from "react";
-import { s as o } from "../../../SelectListbox.module-iJtzAajj.js";
-import { Icon as E } from "../../Icon/Icon.js";
-import { useSelect as L } from "../SelectProvider.js";
-const P = C((d, u) => {
-  const { variant: b, onChange: n, buttonLabelProp: m = "label", buttonLabelBold: x, disabled: h = !1 } = d, l = g(null), i = g(!0), { listboxId: w, isOpen: t, selectedValue: e, toggleListbox: y, setIsOpen: p, setActiveIndex: I, options: k } = L() || {}, v = (r) => {
-    switch (r.key) {
+import { forwardRef as E, useRef as g, useEffect as c } from "react";
+import { s as t } from "../../../SelectListbox.module-1nd3xIGj.js";
+import { Icon as L } from "../../Icon/Icon.js";
+import { useSelect as N } from "../SelectProvider.js";
+const O = E((d, u) => {
+  const { variant: b, size: x = "default", onChange: n, buttonLabelProp: m = "label", buttonLabelBold: h, disabled: w = !1 } = d, l = g(null), i = g(!0), { listboxId: y, isOpen: r, selectedValue: e, toggleListbox: I, setIsOpen: p, setActiveIndex: k, options: v } = N() || {}, D = (s) => {
+    switch (s.key) {
       case "Enter":
-        if (r.preventDefault(), !t) {
+        if (s.preventDefault(), !r) {
           p(!0);
           return;
         }
         break;
       case "Escape":
-        t && (r.stopPropagation(), I(k.findIndex((s) => s.value === (e == null ? void 0 : e.value))), p(!1));
+        r && (s.stopPropagation(), k(v.findIndex((o) => o.value === (e == null ? void 0 : e.value))), p(!1));
         break;
     }
   };
   return c(() => {
-    var r, s;
-    t ? ((r = l.current) == null ? void 0 : r.children[0]).blur() : !i.current && ((s = l.current) == null ? void 0 : s.children[0]).focus();
-  }, [t]), c(() => (i.current = !1, () => {
+    var s, o;
+    r ? ((s = l.current) == null ? void 0 : s.children[0]).blur() : !i.current && ((o = l.current) == null ? void 0 : o.children[0]).focus();
+  }, [r]), c(() => (i.current = !1, () => {
     i.current = !0;
   }), []), c(() => {
     n && n(e);
-  }, [n, e]), /* @__PURE__ */ a("span", { ref: l, children: /* @__PURE__ */ D(
+  }, [n, e]), /* @__PURE__ */ a("span", { ref: l, children: /* @__PURE__ */ C(
     "button",
     {
-      className: f(o["select-listbox-trigger"], {
-        [o[`select-listbox-trigger--${b}`]]: b,
-        [o["select-listbox-trigger--bold"]]: x
+      className: f(t["select-listbox-trigger"], t[`select-listbox-trigger--${x}`], {
+        [t[`select-listbox-trigger--${b}`]]: b,
+        [t["select-listbox-trigger--bold"]]: h
       }),
       type: "button",
-      onClick: y,
-      onKeyDown: v,
-      "aria-expanded": t,
+      onClick: I,
+      onKeyDown: D,
+      "aria-expanded": r,
       "aria-haspopup": "listbox",
       "aria-label": `${e.label}`,
-      disabled: h,
-      "aria-controls": w,
+      disabled: w,
+      "aria-controls": y,
       ...u && { ref: u },
       children: [
-        /* @__PURE__ */ a("span", { className: o["select-listbox-trigger-label"], children: e[m] }),
+        /* @__PURE__ */ a("span", { className: t["select-listbox-trigger-label"], children: e[m] }),
         /* @__PURE__ */ a(
-          E,
+          L,
           {
-            className: f(o["select-listbox-trigger-icon"], {
-              [o["select-listbox-trigger-icon--open"]]: t
+            className: f(t["select-listbox-trigger-icon"], {
+              [t["select-listbox-trigger-icon--open"]]: r
             }),
             name: "CheveronDown",
             size: 16
@@ -58,6 +58,6 @@ const P = C((d, u) => {
   ) });
 });
 export {
-  P as SelectButton
+  O as SelectButton
 };
 //# sourceMappingURL=SelectButton.js.map

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

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-iJtzAajj.js";
+import { s as f } from "../../../SelectListbox.module-1nd3xIGj.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-DB4S2d7J.js";
 import { useRef as D, useEffect as p } from "react";
 import { useSelect as y } from "../SelectProvider.js";
-import { s as b } from "../../../SelectListbox.module-iJtzAajj.js";
+import { s as b } from "../../../SelectListbox.module-1nd3xIGj.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,20 +1,31 @@
 import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as m, useRef as p } from "react";
-import { s as t } from "../../../SelectListbox.module-iJtzAajj.js";
-import { useSelect as d } from "../SelectProvider.js";
-const u = m((o, e) => {
-  const { style: i, children: l } = o, { listboxId: r, isOpen: c } = d(), n = p(null);
+import { forwardRef as m, useRef as x } from "react";
+import { s as i } from "../../../SelectListbox.module-1nd3xIGj.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);
   return /* @__PURE__ */ s(
     "div",
     {
-      className: t["select-listbox__wrapper"],
-      style: { ...i, visibility: c ? "visible" : "hidden" },
+      className: i["select-listbox__wrapper"],
+      style: { ...t, visibility: c ? "visible" : "hidden" },
       ...e && { ref: e },
-      children: /* @__PURE__ */ s("ul", { className: t["select-listbox"], role: "listbox", ref: n, id: r, tabIndex: -1, children: l })
+      children: /* @__PURE__ */ s(
+        "ul",
+        {
+          className: i["select-listbox"],
+          role: "listbox",
+          ref: n,
+          id: r,
+          tabIndex: -1,
+          style: { maxHeight: t.maxHeight },
+          children: o
+        }
+      )
     }
   );
 });
 export {
-  u as SelectOptionBox
+  h as SelectOptionBox
 };
 //# sourceMappingURL=SelectOptionBox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  style: CSSProperties;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n  const { style, children } = props;\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <div\n      className={styles['select-listbox__wrapper']}\n      style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n      {...(ref && { ref: ref })}\n    >\n      <ul className={styles['select-listbox']} role=\"listbox\" ref={selectOptionBoxRef} id={listboxId} tabIndex={-1}>\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AACxF,QAAA,EAAE,OAAAC,GAAO,UAAAC,EAAa,IAAAH,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAGtD,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAS;AAAA,MAC5D,GAAIJ,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAC,gBAAAQ,EAAA,MAAA,EAAG,WAAWC,EAAO,gBAAgB,GAAG,MAAK,WAAU,KAAKH,GAAoB,IAAIH,GAAW,UAAU,IACvG,UAAAD,GACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"SelectOptionBox.js","sources":["../../../../src/components/SelectListbox/components/SelectOptionBox.tsx"],"sourcesContent":["import { useRef, forwardRef } from 'react';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\n\nexport interface SelectOptionBoxProps {\n  style: CSSProperties;\n  children: ReactNode;\n}\n\nexport const SelectOptionBox = forwardRef<HTMLDivElement, SelectOptionBoxProps>((props, ref) => {\n  const { style, children } = props;\n  const { listboxId, isOpen } = useSelect();\n  const selectOptionBoxRef = useRef<HTMLUListElement>(null);\n\n  return (\n    <div\n      className={styles['select-listbox__wrapper']}\n      style={{ ...style, visibility: isOpen ? 'visible' : 'hidden' }}\n      {...(ref && { ref: ref })}\n    >\n      <ul\n        className={styles['select-listbox']}\n        role=\"listbox\"\n        ref={selectOptionBoxRef}\n        id={listboxId}\n        tabIndex={-1}\n        style={{ maxHeight: style.maxHeight }}\n      >\n        {children}\n      </ul>\n    </div>\n  );\n});\n"],"names":["SelectOptionBox","forwardRef","props","ref","style","children","listboxId","isOpen","useSelect","selectOptionBoxRef","useRef","jsx","styles"],"mappings":";;;;AAYO,MAAMA,IAAkBC,EAAiD,CAACC,GAAOC,MAAQ;AACxF,QAAA,EAAE,OAAAC,GAAO,UAAAC,EAAa,IAAAH,GACtB,EAAE,WAAAI,GAAW,QAAAC,EAAO,IAAIC,EAAU,GAClCC,IAAqBC,EAAyB,IAAI;AAGtD,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO,yBAAyB;AAAA,MAC3C,OAAO,EAAE,GAAGR,GAAO,YAAYG,IAAS,YAAY,SAAS;AAAA,MAC5D,GAAIJ,KAAO,EAAE,KAAAA,EAAS;AAAA,MAEvB,UAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWC,EAAO,gBAAgB;AAAA,UAClC,MAAK;AAAA,UACL,KAAKH;AAAA,UACL,IAAIH;AAAA,UACJ,UAAU;AAAA,UACV,OAAO,EAAE,WAAWF,EAAM,UAAU;AAAA,UAEnC,UAAAC;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,3 @@
+type SomeFunction = (...args: unknown[]) => void;
+export declare function useDebounce<Func extends SomeFunction>(callBack: Func, delay?: number): Func;
+export {};

package/dist/components/hooks/useDebounce.js

@@ -0,0 +1,17 @@
+import { useRef as c, useEffect as o } from "react";
+const i = 200;
+function f(t, n = i) {
+  const e = c();
+  return o(() => () => {
+    e.current && clearTimeout(e.current);
+  }, []), (...r) => {
+    const u = setTimeout(() => {
+      t(...r);
+    }, n);
+    clearTimeout(e.current), e.current = u;
+  };
+}
+export {
+  f as useDebounce
+};
+//# sourceMappingURL=useDebounce.js.map

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

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

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

@@ -4,11 +4,6 @@ interface positionProps {
             inset: string;
         };
     };
-    buttonStyle: {
-        buttonStyle: {
-            width: string;
-        };
-    };
     status: boolean;
 }
 interface optionProps {
@@ -17,6 +12,7 @@ interface optionProps {
     offset: number;
     maxFixedHeight?: `${number}${'px' | 'rem'}`;
     horizontalPosition?: 'left' | 'right';
+    mobileBreakpoint?: `${number}${'px' | 'rem'}`;
 }
 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,7 +1,8 @@
-import { useState as h, useEffect as F } from "react";
-const u = 10, P = 80, l = 220;
-function p(d, i, e) {
-  const [v, H] = h(!1), w = {
+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;
+function S(d, e, n) {
+  const [m, H] = L(!1), v = {
     inset: "0 auto auto 0",
     opacity: 0,
     maxHeight: "100%",
@@ -9,60 +10,60 @@ function p(d, i, e) {
     overflowX: "hidden",
     overflowY: "auto",
     margin: "0rem"
-  }, [c, g] = h(w), [L, y] = h({ width: "auto" }), x = (t) => {
+  }, [c, w] = L(v), h = (t) => {
     const o = parseFloat(getComputedStyle(document.documentElement).fontSize);
     return t.indexOf("rem") !== -1 ? parseFloat(t) * o : parseFloat(t);
-  }, S = (t, o) => {
+  }, b = (t, o) => {
     if (!t)
       return 0;
-    const n = o === "bottom" ? window.innerHeight - t.bottom - e.offset - u : t.top - e.offset - u;
-    return !e.maxFixedHeight || x(e.maxFixedHeight) > n ? n : x(e.maxFixedHeight);
-  }, b = (t, o) => {
+    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) => {
     if (!t)
       return 0;
-    const n = o === "left" ? window.innerWidth - t.left - u : t.right - u;
-    return n <= l ? l : n;
-  }, m = () => {
-    const t = d == null ? void 0 : d.getBoundingClientRect(), o = i == null ? void 0 : i.getBoundingClientRect();
-    let n = "bottom", a = "left";
-    return !o || !t ? w : (y({ width: t.width + "px" }), window.innerHeight - o.bottom - u < P && (n = "top"), (window.innerWidth - o.left - u < l || e.horizontalPosition === "right") && (a = "right"), {
-      inset: `${n === "bottom" ? o[n] + "px" : "auto"}
-              ${a === "right" ? window.innerWidth - o[a] + "px" : "auto"}
-              ${n === "top" ? window.innerHeight - o[n] + "px" : "auto"}
-              ${a === "left" ? o[a] + "px" : "auto"}`,
-      maxHeight: `${S(o, n)}px`,
-      maxWidth: `${b(o, a)}px`,
+    const i = o === "left" ? window.innerWidth - t.left - a : t.right - a;
+    return i <= l ? l : 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)`
+    ).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"), {
+      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`,
       overflowX: "hidden",
       overflowY: "auto",
       opacity: 1,
-      margin: `${e.offset}px 0`
+      margin: `${n.offset}px 0`
     });
   }, r = () => {
-    g({
+    w({
       ...c,
-      ...m()
+      ...x()
     }), H(!0);
-  }, f = () => {
-    v && g({
+  }, $ = () => {
+    m && w({
       ...c,
-      ...m()
+      ...x()
     });
   }, s = (t) => {
-    !i || i.contains(t.target) || !d || d.contains(t.target);
-  };
-  return F(() => (i !== null && (e.mouseEvent === "click" ? i.addEventListener("click", r) : (i.addEventListener("mouseenter", r), i.addEventListener("mouseleave", s)), document.addEventListener("mousedown", s), document.addEventListener("touchstart", s), window.addEventListener("resize", f)), () => {
-    i !== null && (e.mouseEvent === "click" ? i.removeEventListener("click", r) : (i.removeEventListener("mouseenter", r), i.removeEventListener("mouseleave", s)), document.removeEventListener("mousedown", s), document.removeEventListener("touchstart", s), window.removeEventListener("resize", f));
+    !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));
   })), {
     style: {
       style: c
     },
-    buttonStyle: {
-      buttonStyle: L
-    },
-    status: v
+    status: m
   };
 }
 export {
-  p as usePositionedFloaters
+  S as usePositionedFloaters
 };
 //# sourceMappingURL=usePositionedFloaters.js.map