@uva-glass/component-library 3.43.1 → 3.45.0

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

@@ -15,7 +15,7 @@ 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' | 'darkBorder';
+    variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder' | 'roundedLeft' | 'roundedRight';
     /** If true sets the option dropdown min-width to the width of the select button. */
     fullWidth?: boolean;
     /** The size of the select box. */

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

@@ -1 +1 @@
-{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\nimport type { SelectOptionProps } from './components/SelectOption';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The size of the select box. */\n  size?: 'small' | 'medium' | 'default';\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n  /** Option to add a devider after a given amout of ouptions in the select option box. */\n  dividerAfter?: number;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  fullWidth = false,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  dividerAfter,\n  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.map(children, (child, index) => {\n            if (isValidElement<SelectOptionProps>(child)) {\n              return cloneElement(child, {\n                dividerAfter,\n                key: index,\n              });\n            }\n            return child;\n          })}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","dividerAfter","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","Children","child","index","isValidElement","cloneElement","SelectOption"],"mappings":";;;;;;;;AA4CO,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,cAAAC;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,IAEZ,QAAQ;AAAA,IACR,gBAAgBV;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACE,gBAAAkB,EAACC,GAAA,EAAe,SAAArB,GAAkB,cAAAK,GAChC,4BAACiB,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAhB;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGP,gBAAAG,EAACI,GAAA,EAAgB,KAAKV,GAAqB,GAAGI,GAC3C,UAAAO,EAAS,IAAIb,GAAU,CAACc,GAAOC,MAC1BC,EAAkCF,CAAK,IAClCG,EAAaH,GAAO;AAAA,MACzB,cAAAf;AAAA,MACA,KAAKgB;AAAA,IAAA,CACN,IAEID,CACR,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA3B,EAAc,eAAe+B;"}
+{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\nimport type { SelectOptionProps } from './components/SelectOption';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n  /** The possible options to select. */\n  options: OptionValue[];\n  /** The selected value by default. */\n  defaultValue?: SelectValue;\n  /** The max height of the options. */\n  maxOptionHeight?: `${number}${'px' | 'rem'}`;\n  /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n  disabled?: boolean;\n  /** The name of the property in the options structure that contains the label of the options. */\n  buttonLabelProp?: string;\n  /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n  buttonLabelBold?: boolean;\n  /** The variant of the select box. */\n  variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder' | 'roundedLeft' | 'roundedRight';\n  /** If true sets the option dropdown min-width to the width of the select button. */\n  fullWidth?: boolean;\n  /** The size of the select box. */\n  size?: 'small' | 'medium' | 'default';\n  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n  optionPositionRight?: boolean;\n  /** The breakpoint at which to switch to the mobile view. */\n  mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n  /** The callback function that is invoked when an option is selected. */\n  onChange?: (option: OptionValue) => void;\n  /** Option to add a devider after a given amout of ouptions in the select option box. */\n  dividerAfter?: number;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n  options,\n  variant,\n  fullWidth = false,\n  size = 'default',\n  optionPositionRight,\n  defaultValue = -1,\n  maxOptionHeight,\n  disabled,\n  buttonLabelProp = 'label',\n  buttonLabelBold,\n  onChange,\n  dividerAfter,\n  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.map(children, (child, index) => {\n            if (isValidElement<SelectOptionProps>(child)) {\n              return cloneElement(child, {\n                dividerAfter,\n                key: index,\n              });\n            }\n            return child;\n          })}\n        </SelectOptionBox>\n      </SelectContainer>\n    </SelectProvider>\n  );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","dividerAfter","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","Children","child","index","isValidElement","cloneElement","SelectOption"],"mappings":";;;;;;;;AA4CO,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,cAAAC;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,IAEZ,QAAQ;AAAA,IACR,gBAAgBV;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACE,gBAAAkB,EAACC,GAAA,EAAe,SAAArB,GAAkB,cAAAK,GAChC,4BAACiB,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAhB;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGP,gBAAAG,EAACI,GAAA,EAAgB,KAAKV,GAAqB,GAAGI,GAC3C,UAAAO,EAAS,IAAIb,GAAU,CAACc,GAAOC,MAC1BC,EAAkCF,CAAK,IAClCG,EAAaH,GAAO;AAAA,MACzB,cAAAf;AAAA,MACA,KAAKgB;AAAA,IAAA,CACN,IAEID,CACR,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA3B,EAAc,eAAe+B;"}

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

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

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

@@ -1,7 +1,7 @@
 import { jsx as c, jsxs as K } from "react/jsx-runtime";
 import { c as m } from "../../../clsx-OuTLNxxd.js";
 import { forwardRef as N, useRef as h, useEffect as u } from "react";
-import { s as t } from "../../../SelectListbox.module-yzXaWwsm.js";
+import { s as t } from "../../../SelectListbox.module-CAKDuwcy.js";
 import { Icon as R } from "../../Icon/Icon.js";
 import { useSelect as S } from "../SelectProvider.js";
 const O = N((y, b) => {

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' | '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    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        if (!isOpen) setIsOpen(true);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    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","key","optionIndexStartsWithKey","option","useEffect","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AAC3F,QAAM,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,EAAA,IAAYC,EAAA,KAAe,CAAA,GAEzGC,IAAmB,CAACC,MAA4C;AACpE,QAAIA,EAAM,IAAI,WAAW,GAAG;AAC1B,YAAMC,IAAMD,EAAM,IAAI,kBAAA,GAChBE,IAA2BL,EAAQ;AAAA,QACvC,CAACM,MAAW,CAACA,EAAO,YAAYA,EAAO,MAAM,oBAAoB,WAAWF,CAAG;AAAA,MAAA;AAEjF,UAAIC,MAA6B,IAAI;AACnC,QAAAN,EAAeM,CAAwB,GAClCV,KAAQG,EAAU,EAAI,GAC3BK,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IACF;AAEA,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QACF;AACA;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAA,GACNJ,EAAeC,EAAQ,UAAU,CAACM,MAAWA,EAAO,UAAUV,GAAe,KAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAS,EAAU,MAAM;AACd,IAAAZ,KACKJ,EAAc,SAAS,SAAS,CAAC,GAAwB,KAAA,IAC1D,CAACE,EAAc,YAAYF,EAAc,SAAS,SAAS,CAAC,GAAwB,MAAA;AAAA,EAC1F,GAAG,CAACI,CAAM,CAAC,GAEXY,EAAU,OACRd,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,CAAA,CAAE,GAELc,EAAU,MAAM;AACd,IAAIpB,OAAmBS,CAAa;AAAA,EACtC,GAAG,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAA,EAAK,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,EAAA;AAAA,MAEd,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' | 'roundedLeft' | 'roundedRight';\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    if (event.key.length === 1) {\n      const key = event.key.toLocaleLowerCase();\n      const optionIndexStartsWithKey = options.findIndex(\n        (option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(key)\n      );\n      if (optionIndexStartsWithKey !== -1) {\n        setActiveIndex(optionIndexStartsWithKey);\n        if (!isOpen) setIsOpen(true);\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        if (!isOpen) {\n          setIsOpen(true);\n          return;\n        }\n        break;\n      case 'Escape':\n        if (isOpen) {\n          event.stopPropagation();\n          setActiveIndex(options.findIndex((option) => option.value === selectedValue?.value));\n          setIsOpen(false);\n        }\n        break;\n    }\n  };\n\n  useEffect(() => {\n    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","key","optionIndexStartsWithKey","option","useEffect","jsx","jsxs","clsx","styles","Icon"],"mappings":";;;;;;AAmBO,MAAMA,IAAeC,EAAiD,CAACC,GAAOC,MAAQ;AAC3F,QAAM,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,EAAA,IAAYC,EAAA,KAAe,CAAA,GAEzGC,IAAmB,CAACC,MAA4C;AACpE,QAAIA,EAAM,IAAI,WAAW,GAAG;AAC1B,YAAMC,IAAMD,EAAM,IAAI,kBAAA,GAChBE,IAA2BL,EAAQ;AAAA,QACvC,CAACM,MAAW,CAACA,EAAO,YAAYA,EAAO,MAAM,oBAAoB,WAAWF,CAAG;AAAA,MAAA;AAEjF,UAAIC,MAA6B,IAAI;AACnC,QAAAN,EAAeM,CAAwB,GAClCV,KAAQG,EAAU,EAAI,GAC3BK,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IACF;AAEA,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAEH,YADAA,EAAM,eAAA,GACF,CAACR,GAAQ;AACX,UAAAG,EAAU,EAAI;AACd;AAAA,QACF;AACA;AAAA,MACF,KAAK;AACH,QAAIH,MACFQ,EAAM,gBAAA,GACNJ,EAAeC,EAAQ,UAAU,CAACM,MAAWA,EAAO,UAAUV,GAAe,KAAK,CAAC,GACnFE,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAS,EAAU,MAAM;AACd,IAAAZ,KACKJ,EAAc,SAAS,SAAS,CAAC,GAAwB,KAAA,IAC1D,CAACE,EAAc,YAAYF,EAAc,SAAS,SAAS,CAAC,GAAwB,MAAA;AAAA,EAC1F,GAAG,CAACI,CAAM,CAAC,GAEXY,EAAU,OACRd,EAAc,UAAU,IAEjB,MAAM;AACX,IAAAA,EAAc,UAAU;AAAA,EAC1B,IACC,CAAA,CAAE,GAELc,EAAU,MAAM;AACd,IAAIpB,OAAmBS,CAAa;AAAA,EACtC,GAAG,CAACT,GAAUS,CAAa,CAAC,GAG1B,gBAAAY,EAAC,QAAA,EAAK,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,EAAA;AAAA,MAEd,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-yzXaWwsm.js";
+import { s as f } from "../../../SelectListbox.module-CAKDuwcy.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 { jsxs as v, Fragment as x, jsx as m } from "react/jsx-runtime";
 import { c as I } from "../../../clsx-OuTLNxxd.js";
 import { useRef as O, useEffect as k } from "react";
 import { useSelect as g } from "../SelectProvider.js";
-import { s as c } from "../../../SelectListbox.module-yzXaWwsm.js";
+import { s as c } from "../../../SelectListbox.module-CAKDuwcy.js";
 const K = ({ option: a, index: s, dividerAfter: u, children: w }) => {
   const i = O(null), { isOpen: l, activeIndex: t, setActiveIndex: r, selectedValue: n, setSelectedValue: p, setIsOpen: f, options: o } = g(), y = (e) => {
     p(o[e]), f(!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-yzXaWwsm.js";
+import { s as i } from "../../../SelectListbox.module-CAKDuwcy.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/Sortable/Sortable.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
-import { l as s } from "../../index-BamlKH-k.js";
+import { l as s } from "../../index-DvUwfXNb.js";
 import { Sortable as l } from "./Sortable.js";
 import { InputField as d } from "../InputField/InputField.js";
 import { Icon as c } from "../Icon/Icon.js";

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

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as a } from "../../index-BamlKH-k.js";
+import { l as a } from "../../index-DvUwfXNb.js";
 import { TextArea as e } from "./TextArea.js";
 const o = `
   <TextArea label={label} maxCharacters={maxCharacters} defaultValue={string}/> `, x = {

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

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import "../../index-B32mP_-H.js";
 import { r as o, s as t, f as r } from "../../react.esm-WLX_DeH0.js";
-import { J as c } from "../../index-BamlKH-k.js";
+import { J as c } from "../../index-DvUwfXNb.js";
 import { TextArea as n } from "./TextArea.js";
 describe("TextArea", () => {
   it("should render correctly with label", () => {

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

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { l } from "../../index-BamlKH-k.js";
+import { l } from "../../index-DvUwfXNb.js";
 import { ToggleSwitch as e } from "./ToggleSwitch.js";
 const a = `
 // Has all InputHTMLAttributes props available except "className" and "style" 

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

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { l as n } from "../../index-BamlKH-k.js";
+import { l as n } from "../../index-DvUwfXNb.js";
 import { VarIndicator as t } from "./VarIndicator.js";
 const o = {
   DRAFT: "Concept",

package/dist/components/index.d.ts

@@ -47,6 +47,7 @@ export * from './RadioGroup';
 export * from './RadioTabSelector';
 export * from './Repeater';
 export * from './RteEditor';
+export * from './SearchField';
 export * from './SectionNotification';
 export * from './SelectListbox';
 export * from './SelectListbox/SelectProvider';

package/dist/components/index.js

@@ -5,13 +5,13 @@ import { AppStatusBar as a } from "./AppStatusBar/AppStatusBar.js";
 import { Attention as n } from "./Attention/Attention.js";
 import { Backdrop as c } from "./Backdrop/Backdrop.js";
 import { ButtonGroup as u } from "./ButtonGroup/ButtonGroup.js";
-import { Button as s } from "./Buttons/Button.js";
+import { Button as S } from "./Buttons/Button.js";
 import { LinkButton as b } from "./Buttons/LinkButton.js";
-import { MenuButton as I } from "./Buttons/MenuButton.js";
-import { Card as F } from "./Card/Card.js";
+import { MenuButton as F } from "./Buttons/MenuButton.js";
+import { Card as k } from "./Card/Card.js";
 import { Checkbox as g } from "./Checkbox/Checkbox.js";
 import { CheckboxButtonBar as P } from "./CheckboxButtonBar/CheckboxButtonBar.js";
-import { CheckboxTree as A } from "./CheckboxTree/CheckboxTree.js";
+import { CheckboxTree as h } from "./CheckboxTree/CheckboxTree.js";
 import { Chip as y } from "./Chip/Chip.js";
 import { ControlsButton as T } from "./ControlsButton/ControlsButton.js";
 import { Drawer as w } from "./Drawer/Drawer.js";
@@ -32,13 +32,13 @@ import { InfoMessage as ao } from "./InfoMessage/InfoMessage.js";
 import { Input as no } from "./Input/Input.js";
 import { InputField as co } from "./InputField/InputField.js";
 import { Label as Bo } from "./Label/Label.js";
-import { MenuLink as So } from "./MenuLink/MenuLink.js";
+import { MenuLink as so } from "./MenuLink/MenuLink.js";
 import { MetaDataList as Co } from "./MetaDataList/MetaDataList.js";
-import { ModalDialog as ko } from "./ModalDialog/ModalDialog.js";
-import { M as Mo } from "../TablePlugin-DaKDRL4G.js";
+import { ModalDialog as Io } from "./ModalDialog/ModalDialog.js";
+import { M as Mo } from "../TablePlugin-4Zj0xZie.js";
 import { MultiSelectBox as Lo } from "./MultiSelectBox/MultiSelectBox.js";
 import { Notification as Ro } from "./Notification/Notification.js";
-import { OverlayCloseButton as ho } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { OverlayCloseButton as Ao } from "./OverlayCloseButton/OverlayCloseButton.js";
 import { OverlayStepBar as Do } from "./OverlayStepBar/OverlayStepBar.js";
 import { PageOverlay as vo } from "./PageOverlay/PageOverlay.js";
 import { Periods as Eo } from "./Periods/Periods.js";
@@ -49,17 +49,18 @@ import { RadioGroup as qo } from "./RadioGroup/RadioGroup.js";
 import { RadioTabSelector as Ko } from "./RadioTabSelector/RadioTabSelector.js";
 import { Repeater as Uo } from "./Repeater/Repeater.js";
 import { Rte as Xo, RteEditor as Yo } from "./RteEditor/RteEditor.js";
-import { SectionNotification as _o } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as or } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as tr, useSelect as er } from "./SelectListbox/SelectProvider.js";
-import { Sortable as xr } from "./Sortable/Sortable.js";
-import { Spinner as mr } from "./Spinner/Spinner.js";
-import { StatusBadge as ir } from "./StatusBadge/StatusBage.js";
-import { StatusPill as lr } from "./StatusPill/StatusPill.js";
-import { TextArea as dr } from "./TextArea/TextArea.js";
-import { ToggleSwitch as Br } from "./ToggleSwitch/ToggleSwitch.js";
-import { Tooltip as Sr } from "./Tooltip/Tooltip.js";
-import { VarIndicator as Cr } from "./VarIndicator/VarIndicator.js";
+import { SearchField as _o } from "./SearchField/SearchField.js";
+import { SectionNotification as or } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as tr } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as pr, useSelect as xr } from "./SelectListbox/SelectProvider.js";
+import { Sortable as mr } from "./Sortable/Sortable.js";
+import { Spinner as ir } from "./Spinner/Spinner.js";
+import { StatusBadge as lr } from "./StatusBadge/StatusBage.js";
+import { StatusPill as dr } from "./StatusPill/StatusPill.js";
+import { TextArea as Br } from "./TextArea/TextArea.js";
+import { ToggleSwitch as sr } from "./ToggleSwitch/ToggleSwitch.js";
+import { Tooltip as Cr } from "./Tooltip/Tooltip.js";
+import { VarIndicator as Ir } from "./VarIndicator/VarIndicator.js";
 export {
   t as Accordion,
   p as AccordionCard,
@@ -67,12 +68,12 @@ export {
   a as AppStatusBar,
   n as Attention,
   c as Backdrop,
-  s as Button,
+  S as Button,
   u as ButtonGroup,
-  F as Card,
+  k as Card,
   g as Checkbox,
   P as CheckboxButtonBar,
-  A as CheckboxTree,
+  h as CheckboxTree,
   y as Chip,
   T as ControlsButton,
   w as Drawer,
@@ -94,14 +95,14 @@ export {
   co as InputField,
   Bo as Label,
   b as LinkButton,
-  I as MenuButton,
-  So as MenuLink,
+  F as MenuButton,
+  so as MenuLink,
   Co as MetaDataList,
-  ko as ModalDialog,
+  Io as ModalDialog,
   Mo as MultiSelect,
   Lo as MultiSelectBox,
   Ro as Notification,
-  ho as OverlayCloseButton,
+  Ao as OverlayCloseButton,
   Do as OverlayStepBar,
   vo as PageOverlay,
   Oo as PeriodSelector,
@@ -113,17 +114,18 @@ export {
   Uo as Repeater,
   Xo as Rte,
   Yo as RteEditor,
-  _o as SectionNotification,
-  or as SelectListbox,
-  tr as SelectProvider,
-  xr as Sortable,
-  mr as Spinner,
-  ir as StatusBadge,
-  lr as StatusPill,
-  dr as TextArea,
-  Br as ToggleSwitch,
-  Sr as Tooltip,
-  Cr as VarIndicator,
-  er as useSelect
+  _o as SearchField,
+  or as SectionNotification,
+  tr as SelectListbox,
+  pr as SelectProvider,
+  mr as Sortable,
+  ir as Spinner,
+  lr as StatusBadge,
+  dr as StatusPill,
+  Br as TextArea,
+  sr as ToggleSwitch,
+  Cr as Tooltip,
+  Ir as VarIndicator,
+  xr as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/{index-BVrrnUn0.js → index-BfMTX2kB.js}

@@ -1,4 +1,4 @@
-import { s as P, i as X, U as Au, n as So, _ as xu, Q as Dn, X as ft, h as _r, B as yt, c as Su, u as Cu, d as Du, K as $u, a as Tu, b as Fu, l as Ou, e as Iu, P as $n, Z as Tn, p as Fn, z as On, f as Ru, H as Pu, g as Co, j as Bu, T as ju, L as ku, k as _u, m as Lu, Y as It, x as Nu, O as Do, o as Mu, q as qu, r as Uu, G as Gu, t as Hu, v as $o, w as Vu, y as zu, A as Wu, C as Yu, D as Ku, V as To, E as Xu, M as Ju, F as $t, I as In } from "./index-BamlKH-k.js";
+import { s as P, i as X, U as Au, n as So, _ as xu, Q as Dn, X as ft, h as _r, B as yt, c as Su, u as Cu, d as Du, K as $u, a as Tu, b as Fu, l as Ou, e as Iu, P as $n, Z as Tn, p as Fn, z as On, f as Ru, H as Pu, g as Co, j as Bu, T as ju, L as ku, k as _u, m as Lu, Y as It, x as Nu, O as Do, o as Mu, q as qu, r as Uu, G as Gu, t as Hu, v as $o, w as Vu, y as zu, A as Wu, C as Yu, D as Ku, V as To, E as Xu, M as Ju, F as $t, I as In } from "./index-DvUwfXNb.js";
 var Qu = Object.defineProperty, E = (t, e) => Qu(t, "name", { value: e, configurable: !0 });
 function _e(t) {
   for (var e = [], r = 1; r < arguments.length; r++)
@@ -4785,7 +4785,10 @@ var th = /* @__PURE__ */ f((t, e) => {
   if (e) {
     t.userEvent = Dn(
       { userEvent: Tu.setup() },
-      { intercept: !0 }
+      {
+        intercept: !0,
+        getKeys: /* @__PURE__ */ f((o) => Object.keys(o).filter((n) => n !== "eventWrapper"), "getKeys")
+      }
     ).userEvent, Object.defineProperty(globalThis.window.navigator, "clipboard", {
       get: /* @__PURE__ */ f(() => e, "get"),
       configurable: !0
@@ -11558,4 +11561,4 @@ export {
   Ih as i,
   $y as s
 };
-//# sourceMappingURL=index-BVrrnUn0.js.map
+//# sourceMappingURL=index-BfMTX2kB.js.map