@solibo/solibo-ui 0.4.12 → 0.5.4

package/dist/components/_dropdown/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index22.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-C_cX1FYp.cjs"),X=require("../input/index.cjs"),Y=require("../../styles.module-Vt6mmlsz.cjs"),Z=require("../list/index.cjs"),k=require("../../index-Bh5n72jH.cjs"),M=require("../../utils-DBzf7CFq.cjs"),ee="_dropdown_ruf4w_1",te="_empty_ruf4w_4",ne="_group_ruf4w_5",re="_placeholder_ruf4w_6",se="_filter_ruf4w_14",oe="_native_ruf4w_25",le="_option_ruf4w_35",ie="_options_ruf4w_57",ce="_panel_ruf4w_81",ae="_selected_ruf4w_102",ue="_text_ruf4w_106",pe="_trigger_ruf4w_114",de="_minimal_ruf4w_130",c={dropdown:ee,empty:te,group:ne,placeholder:re,filter:se,native:oe,option:le,options:ie,panel:ce,selected:ae,text:ue,trigger:pe,minimal:de};function Q(e,r){return{"--icon-svg":U.iconSVG(e).replace("currentColor",r)}}function N(e){return typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(N).join(" "):o.isValidElement(e)?N(e.props.children):""}function fe(e){return o.isValidElement(e)&&e.type==="option"}function me(e){return o.isValidElement(e)&&e.type==="optgroup"}function he(e){return o.isValidElement(e)&&e.type===o.Fragment}function _e(e){return o.isValidElement(e)&&e.type===k.Select}function V(e,r,s=!1){const l=[];return o.Children.forEach(e,t=>{if(he(t)){l.push(...V(t.props.children,r,s));return}if(fe(t)){const p=N(t.props.children).trim(),d=t.props.value!=null?String(t.props.value):p;l.push({disabled:s||!!t.props.disabled,groupLabel:r,hidden:!!t.props.hidden,isPlaceholder:!!(t.props.hidden&&d===""),label:t.props.children,selected:!!t.props.selected,text:p,value:d});return}me(t)&&l.push(...V(t.props.children,t.props.label,s||!!t.props.disabled))}),l}function ge(e){const r=e.trim();if(!r)return null;const l=[.../[*?]/.test(r)?r:`*${r}*`].map(t=>t==="*"?".*":t==="?"?".":t.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${l}$`,"i")}function we(e,r){const s=ge(r),l=e.filter(t=>!t.hidden&&!t.isPlaceholder);return s?l.filter(t=>s.test([t.groupLabel,t.text,t.value].filter(Boolean).join(" "))):l}function ve(e,r){return e.find(s=>s.value===r)??e.find(s=>s.isPlaceholder)??e[0]}function xe(e,r,s){var t;if(r!=null)return String(r);if(s!=null)return String(s);const l=e.find(p=>p.selected);return l?l.value:((t=e[0])==null?void 0:t.value)??""}function ye(e){if(_e(e)){const{children:r,placeholder:s,...l}=e.props;return{children:i.jsxs(i.Fragment,{children:[s&&i.jsx("option",{hidden:!0,value:"",children:s}),r]}),props:l}}return{children:e.props.children,props:e.props}}const be=({children:e,className:r,emptyLabel:s="No matches found",searchPlaceholder:l="Filter",variant:t="default",...p})=>{const d=ye(e),{defaultValue:z,onChange:g,value:w,...T}=d.props,q=k.sanitizeSelectProps(T),C=o.useRef(null),R=o.useRef(null),O=o.useRef(null),P=o.useRef(null),h=V(d.children),_=w!=null,v=xe(h,w,z),[x,y]=o.useState(()=>v),[u,b]=o.useState(!1),[B,$]=o.useState(""),S=_?String(w):x,I={default:M.resolveColor("--color-icon"),white:M.resolveColor("--color-white","white")},L=t==="minimal"?I.white:I.default,f=ve(h,S),A=Q("chevron",L),G=Q("search",L),D=we(h,B);o.useEffect(()=>{!_&&!h.some(n=>n.value===x)&&y(v)},[v,x,_,h]),o.useEffect(()=>{var n;if(!u){$("");return}(n=P.current)==null||n.focus()},[u]),o.useEffect(()=>{if(!u)return;const n=a=>{var m;(m=R.current)!=null&&m.contains(a.target)||b(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[u]);const K=n=>{_||y(n.target.value),g==null||g(n)},j=()=>{var n;b(!1),(n=C.current)==null||n.focus()},H=n=>{var F;_||y(n);const a=O.current;if(!a){j();return}const m=(F=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:F.set;m==null||m.call(a,n),a.dispatchEvent(new Event("change",{bubbles:!0})),j()},J=n=>{n.key==="Escape"&&j()};return i.jsxs("div",{className:E.t(c.dropdown,t==="minimal"&&c.minimal,r),onKeyDown:J,ref:R,...p,"data-component":"dropdown",children:[i.jsx("select",{...q,"aria-hidden":"true",className:c.native,onChange:K,ref:O,tabIndex:-1,value:S,children:d.children}),i.jsx(W.Button,{"aria-expanded":u,"aria-haspopup":"dialog",className:E.t(t==="default"&&Y.inputStyles.input,c.trigger,(f==null?void 0:f.isPlaceholder)&&c.placeholder),"data-open":u?"true":void 0,disabled:q.disabled,onClick:()=>b(n=>!n),ref:C,style:A,variant:"minimal",children:i.jsx("span",{className:c.text,children:(f==null?void 0:f.label)??"Select an option"})}),u&&i.jsxs("div",{className:c.panel,children:[i.jsx(X.Input,{"aria-label":"Filter",className:c.filter,icon:"search",onChange:n=>$(n.target.value),placeholder:l,ref:P,style:G,type:"search",value:B}),i.jsx(Z.List,{"aria-label":"Dropdown",className:c.options,children:D.length>0?D.map(n=>{const a=n.value===S;return i.jsx("li",{"data-component":"dropdown",children:i.jsxs(W.Button,{"aria-label":a?`${n.text}, selected`:n.text,className:E.t(c.option,a&&c.selected),disabled:n.disabled,onClick:()=>H(n.value),variant:"minimal",children:[i.jsx("span",{className:c.text,children:n.label}),n.groupLabel&&i.jsx("small",{className:c.group,children:n.groupLabel})]})},`${n.groupLabel??"root"}-${n.value}`)}):i.jsx("li",{className:c.empty,children:s})})]})]})};exports.Dropdown=be;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index22.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-C_cX1FYp.cjs"),X=require("../input/index.cjs"),Y=require("../../styles.module-BPvMQa_x.cjs"),Z=require("../list/index.cjs"),k=require("../../index-ClrKYsAQ.cjs"),M=require("../../utils-DBzf7CFq.cjs"),ee="_dropdown_1dsxx_1",te="_empty_1dsxx_4",ne="_group_1dsxx_5",re="_placeholder_1dsxx_6",se="_filter_1dsxx_14",oe="_native_1dsxx_25",le="_option_1dsxx_35",ie="_options_1dsxx_57",ce="_panel_1dsxx_81",ae="_selected_1dsxx_104",ue="_text_1dsxx_108",de="_trigger_1dsxx_117",pe="_minimal_1dsxx_133",c={dropdown:ee,empty:te,group:ne,placeholder:re,filter:se,native:oe,option:le,options:ie,panel:ce,selected:ae,text:ue,trigger:de,minimal:pe};function Q(e,r){return{"--icon-svg":U.iconSVG(e).replace("currentColor",r)}}function N(e){return typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(N).join(" "):o.isValidElement(e)?N(e.props.children):""}function fe(e){return o.isValidElement(e)&&e.type==="option"}function me(e){return o.isValidElement(e)&&e.type==="optgroup"}function xe(e){return o.isValidElement(e)&&e.type===o.Fragment}function he(e){return o.isValidElement(e)&&e.type===k.Select}function V(e,r,s=!1){const l=[];return o.Children.forEach(e,t=>{if(xe(t)){l.push(...V(t.props.children,r,s));return}if(fe(t)){const d=N(t.props.children).trim(),p=t.props.value!=null?String(t.props.value):d;l.push({disabled:s||!!t.props.disabled,groupLabel:r,hidden:!!t.props.hidden,isPlaceholder:!!(t.props.hidden&&p===""),label:t.props.children,selected:!!t.props.selected,text:d,value:p});return}me(t)&&l.push(...V(t.props.children,t.props.label,s||!!t.props.disabled))}),l}function _e(e){const r=e.trim();if(!r)return null;const l=[.../[*?]/.test(r)?r:`*${r}*`].map(t=>t==="*"?".*":t==="?"?".":t.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${l}$`,"i")}function ge(e,r){const s=_e(r),l=e.filter(t=>!t.hidden&&!t.isPlaceholder);return s?l.filter(t=>s.test([t.groupLabel,t.text,t.value].filter(Boolean).join(" "))):l}function ve(e,r){return e.find(s=>s.value===r)??e.find(s=>s.isPlaceholder)??e[0]}function ye(e,r,s){var t;if(r!=null)return String(r);if(s!=null)return String(s);const l=e.find(d=>d.selected);return l?l.value:((t=e[0])==null?void 0:t.value)??""}function be(e){if(he(e)){const{children:r,placeholder:s,...l}=e.props;return{children:i.jsxs(i.Fragment,{children:[s&&i.jsx("option",{hidden:!0,value:"",children:s}),r]}),props:l}}return{children:e.props.children,props:e.props}}const we=({children:e,className:r,emptyLabel:s="No matches found",searchPlaceholder:l="Filter",variant:t="default",...d})=>{const p=be(e),{defaultValue:z,onChange:_,value:g,...T}=p.props,q=k.sanitizeSelectProps(T),C=o.useRef(null),R=o.useRef(null),O=o.useRef(null),P=o.useRef(null),x=V(p.children),h=g!=null,v=ye(x,g,z),[y,b]=o.useState(()=>v),[u,w]=o.useState(!1),[B,$]=o.useState(""),S=h?String(g):y,I={default:M.resolveColor("--colors-semantic-content-secondary"),white:M.resolveColor("--color-white","white")},L=t==="minimal"?I.white:I.default,f=ve(x,S),A=Q("chevron",L),G=Q("search",L),D=ge(x,B);o.useEffect(()=>{!h&&!x.some(n=>n.value===y)&&b(v)},[v,y,h,x]),o.useEffect(()=>{var n;if(!u){$("");return}(n=P.current)==null||n.focus()},[u]),o.useEffect(()=>{if(!u)return;const n=a=>{var m;(m=R.current)!=null&&m.contains(a.target)||w(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[u]);const K=n=>{h||b(n.target.value),_==null||_(n)},j=()=>{var n;w(!1),(n=C.current)==null||n.focus()},H=n=>{var F;h||b(n);const a=O.current;if(!a){j();return}const m=(F=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:F.set;m==null||m.call(a,n),a.dispatchEvent(new Event("change",{bubbles:!0})),j()},J=n=>{n.key==="Escape"&&j()};return i.jsxs("div",{className:E.t(c.dropdown,t==="minimal"&&c.minimal,r),onKeyDown:J,ref:R,...d,"data-component":"dropdown",children:[i.jsx("select",{...q,"aria-hidden":"true",className:c.native,onChange:K,ref:O,tabIndex:-1,value:S,children:p.children}),i.jsx(W.Button,{"aria-expanded":u,"aria-haspopup":"dialog",className:E.t(t==="default"&&Y.inputStyles.input,c.trigger,(f==null?void 0:f.isPlaceholder)&&c.placeholder),"data-open":u?"true":void 0,disabled:q.disabled,onClick:()=>w(n=>!n),ref:C,style:A,variant:"minimal",children:i.jsx("span",{className:c.text,children:(f==null?void 0:f.label)??"Select an option"})}),u&&i.jsxs("div",{className:c.panel,children:[i.jsx(X.Input,{"aria-label":"Filter",className:c.filter,icon:"search",onChange:n=>$(n.target.value),placeholder:l,ref:P,style:G,type:"search",value:B}),i.jsx(Z.List,{"aria-label":"Dropdown",className:c.options,children:D.length>0?D.map(n=>{const a=n.value===S;return i.jsx("li",{"data-component":"dropdown",children:i.jsxs(W.Button,{"aria-label":a?`${n.text}, selected`:n.text,className:E.t(c.option,a&&c.selected),disabled:n.disabled,onClick:()=>H(n.value),variant:"minimal",children:[i.jsx("span",{className:c.text,children:n.label}),n.groupLabel&&i.jsx("small",{className:c.group,children:n.groupLabel})]})},`${n.groupLabel??"root"}-${n.value}`)}):i.jsx("li",{className:c.empty,children:s})})]})]})};exports.Dropdown=we;
 //# sourceMappingURL=index.cjs.map

package/dist/components/_dropdown/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/_dropdown/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { Children, isValidElement, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\nimport { type IconName, iconSVG } from '@/components/icon/icons';\nimport { Input } from '@/components/input';\nimport inputStyles from '@/components/input/styles.module.css';\nimport { List } from '@/components/list';\nimport { Select, type SelectProps } from '@/components/select';\nimport { sanitizeSelectProps } from '@/components/select/sanitizeSelectProps';\nimport { resolveColor } from '@/utils';\n\nimport styles from './styles.module.css';\n\ntype NativeSelectProps = Omit<React.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {\n  children: React.ReactNode;\n  multiple?: false;\n};\n\ntype NativeSelectElement = React.ReactElement<NativeSelectProps, 'select'>;\ntype WrappedSelectElement = React.ReactElement<SelectProps, typeof Select>;\ntype DropdownSelectElement = NativeSelectElement | WrappedSelectElement;\n\ntype DropdownOption = {\n  disabled: boolean;\n  groupLabel?: string;\n  hidden: boolean;\n  isPlaceholder: boolean;\n  label: React.ReactNode;\n  selected: boolean;\n  text: string;\n  value: string;\n};\n\nexport type DropdownProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {\n  children: DropdownSelectElement;\n  emptyLabel?: string;\n  searchPlaceholder?: string;\n  variant?: 'default' | 'minimal';\n};\n\ntype withVars = React.CSSProperties & {\n  '--icon-svg'?: string;\n};\n\nfunction getIconWithVars(icon: IconName, color: string): withVars {\n  return {\n    '--icon-svg': iconSVG(icon).replace('currentColor', color),\n  };\n}\n\nfunction getNodeText(node: React.ReactNode): string {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(getNodeText).join(' ');\n  }\n\n  if (isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n\n  return '';\n}\n\nfunction isOptionElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'option'>, 'option'> {\n  return isValidElement(node) && node.type === 'option';\n}\n\nfunction isOptGroupElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'optgroup'>, 'optgroup'> {\n  return isValidElement(node) && node.type === 'optgroup';\n}\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }, typeof React.Fragment> {\n  return isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction isWrappedSelectElement(node: React.ReactNode): node is WrappedSelectElement {\n  return isValidElement(node) && node.type === Select;\n}\n\nfunction extractOptions(\n  children: React.ReactNode,\n  groupLabel?: string,\n  groupDisabled = false\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      options.push(...extractOptions(child.props.children, groupLabel, groupDisabled));\n      return;\n    }\n\n    if (isOptionElement(child)) {\n      const text = getNodeText(child.props.children).trim();\n      const value = child.props.value != null ? String(child.props.value) : text;\n\n      options.push({\n        disabled: groupDisabled || Boolean(child.props.disabled),\n        groupLabel,\n        hidden: Boolean(child.props.hidden),\n        isPlaceholder: Boolean(child.props.hidden && value === ''),\n        label: child.props.children,\n        selected: Boolean(child.props.selected),\n        text,\n        value,\n      });\n\n      return;\n    }\n\n    if (isOptGroupElement(child)) {\n      options.push(\n        ...extractOptions(\n          child.props.children,\n          child.props.label,\n          groupDisabled || Boolean(child.props.disabled)\n        )\n      );\n    }\n  });\n\n  return options;\n}\n\nfunction buildWildcardMatcher(query: string) {\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) {\n    return null;\n  }\n\n  const wildcardQuery = /[*?]/.test(trimmedQuery) ? trimmedQuery : `*${trimmedQuery}*`;\n  const expression = [...wildcardQuery]\n    .map((character) => {\n      if (character === '*') {\n        return '.*';\n      }\n\n      if (character === '?') {\n        return '.';\n      }\n\n      return character.replace(/[|\\\\{}()[\\]^$+.,]/g, '\\\\$&');\n    })\n    .join('');\n\n  return new RegExp(`^${expression}$`, 'i');\n}\n\nfunction filterOptions(options: DropdownOption[], query: string) {\n  const matcher = buildWildcardMatcher(query);\n  const selectableOptions = options.filter((option) => !option.hidden && !option.isPlaceholder);\n\n  if (!matcher) {\n    return selectableOptions;\n  }\n\n  return selectableOptions.filter((option) =>\n    matcher.test([option.groupLabel, option.text, option.value].filter(Boolean).join(' '))\n  );\n}\n\nfunction getDisplayOption(options: DropdownOption[], selectedValue: string) {\n  return (\n    options.find((option) => option.value === selectedValue) ??\n    options.find((option) => option.isPlaceholder) ??\n    options[0]\n  );\n}\n\nfunction getInitialValue(\n  options: DropdownOption[],\n  value?: NativeSelectProps['value'],\n  defaultValue?: NativeSelectProps['defaultValue']\n) {\n  if (value != null) {\n    return String(value);\n  }\n\n  if (defaultValue != null) {\n    return String(defaultValue);\n  }\n\n  const selectedOption = options.find((option) => option.selected);\n\n  if (selectedOption) {\n    return selectedOption.value;\n  }\n\n  return options[0]?.value ?? '';\n}\n\nfunction normalizeSelectElement(selectElement: DropdownSelectElement) {\n  if (isWrappedSelectElement(selectElement)) {\n    const { children, placeholder, ...props } = selectElement.props;\n\n    return {\n      children: (\n        <>\n          {placeholder && (\n            <option\n              hidden\n              value=''\n            >\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </>\n      ),\n      props,\n    };\n  }\n\n  return {\n    children: selectElement.props.children,\n    props: selectElement.props,\n  };\n}\n\nexport const Dropdown = ({\n  children: selectElement,\n  className,\n  emptyLabel = 'No matches found',\n  searchPlaceholder = 'Filter',\n  variant = 'default',\n  ...props\n}: DropdownProps) => {\n  const normalizedSelect = normalizeSelectElement(selectElement);\n  const { defaultValue, onChange, value, ...restSelectProps } = normalizedSelect.props;\n  const selectProps = sanitizeSelectProps(restSelectProps);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const nativeSelectRef = useRef<HTMLSelectElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const options = extractOptions(normalizedSelect.children);\n  const isControlled = value != null;\n  const initialValue = getInitialValue(options, value, defaultValue);\n  const [internalValue, setInternalValue] = useState(() => initialValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const selectedValue = isControlled ? String(value) : internalValue;\n  const iconColors = {\n    default: resolveColor('--color-icon'),\n    white: resolveColor('--color-white', 'white'),\n  };\n  const dropdownIconColor = variant === 'minimal' ? iconColors.white : iconColors.default;\n  const displayOption = getDisplayOption(options, selectedValue);\n  const triggerWithVars = getIconWithVars('chevron', dropdownIconColor);\n  const filterWithVars = getIconWithVars('search', dropdownIconColor);\n  const filteredOptions = filterOptions(options, query);\n\n  useEffect(() => {\n    if (!isControlled && !options.some((option) => option.value === internalValue)) {\n      setInternalValue(initialValue);\n    }\n  }, [initialValue, internalValue, isControlled, options]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setQuery('');\n      return;\n    }\n\n    searchRef.current?.focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const handleNativeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    if (!isControlled) {\n      setInternalValue(event.target.value);\n    }\n\n    onChange?.(event);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const commitValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    const nativeSelect = nativeSelectRef.current;\n\n    if (!nativeSelect) {\n      closeMenu();\n      return;\n    }\n\n    const valueSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;\n\n    valueSetter?.call(nativeSelect, nextValue);\n    nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));\n    closeMenu();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      closeMenu();\n    }\n  };\n\n  return (\n    <div\n      className={cx(styles.dropdown, variant === 'minimal' && styles.minimal, className)}\n      onKeyDown={handleKeyDown}\n      ref={containerRef}\n      {...props}\n    >\n      <select\n        {...selectProps}\n        aria-hidden='true'\n        className={styles.native}\n        onChange={handleNativeChange}\n        ref={nativeSelectRef}\n        tabIndex={-1}\n        value={selectedValue}\n      >\n        {normalizedSelect.children}\n      </select>\n      <Button\n        aria-expanded={isOpen}\n        aria-haspopup='dialog'\n        className={cx(\n          variant === 'default' && inputStyles.input,\n          styles.trigger,\n          displayOption?.isPlaceholder && styles.placeholder\n        )}\n        data-open={isOpen ? 'true' : undefined}\n        disabled={selectProps.disabled}\n        onClick={() => setIsOpen((currentValue) => !currentValue)}\n        ref={buttonRef}\n        style={triggerWithVars}\n        variant='minimal'\n      >\n        <span className={styles.text}>{displayOption?.label ?? 'Select an option'}</span>\n      </Button>\n      {isOpen && (\n        <div className={styles.panel}>\n          <Input\n            aria-label='Filter'\n            className={styles.filter}\n            icon='search'\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={searchPlaceholder}\n            ref={searchRef}\n            style={filterWithVars}\n            type='search'\n            value={query}\n          />\n          <List\n            aria-label='Dropdown'\n            className={styles.options}\n          >\n            {filteredOptions.length > 0 ? (\n              filteredOptions.map((option) => {\n                const isSelected = option.value === selectedValue;\n\n                return (\n                  <li key={`${option.groupLabel ?? 'root'}-${option.value}`}>\n                    <Button\n                      aria-label={isSelected ? `${option.text}, selected` : option.text}\n                      className={cx(styles.option, isSelected && styles.selected)}\n                      disabled={option.disabled}\n                      onClick={() => commitValue(option.value)}\n                      variant='minimal'\n                    >\n                      <span className={styles.text}>{option.label}</span>\n                      {option.groupLabel && (\n                        <small className={styles.group}>{option.groupLabel}</small>\n                      )}\n                    </Button>\n                  </li>\n                );\n              })\n            ) : (\n              <li className={styles.empty}>{emptyLabel}</li>\n            )}\n          </List>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["getIconWithVars","icon","color","iconSVG","replace","getNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","isOptionElement","type","isOptGroupElement","isFragmentElement","React","Fragment","isWrappedSelectElement","Select","extractOptions","groupLabel","groupDisabled","options","Children","forEach","child","push","text","trim","value","disabled","Boolean","hidden","isPlaceholder","label","selected","buildWildcardMatcher","query","trimmedQuery","expression","test","character","RegExp","filterOptions","matcher","selectableOptions","filter","option","getDisplayOption","selectedValue","find","getInitialValue","defaultValue","selectedOption","normalizeSelectElement","selectElement","placeholder","jsxs","Dropdown","className","emptyLabel","searchPlaceholder","variant","normalizedSelect","onChange","restSelectProps","selectProps","sanitizeSelectProps","buttonRef","useRef","containerRef","nativeSelectRef","searchRef","isControlled","initialValue","internalValue","setInternalValue","useState","isOpen","setIsOpen","setQuery","iconColors","default","resolveColor","white","dropdownIconColor","displayOption","triggerWithVars","filterWithVars","filteredOptions","useEffect","some","current","focus","handlePointerDown","event","contains","target","document","addEventListener","removeEventListener","handleNativeChange","closeMenu","commitValue","nextValue","nativeSelect","valueSetter","Object","getOwnPropertyDescriptor","HTMLSelectElement","prototype","set","call","dispatchEvent","Event","bubbles","handleKeyDown","key","cx","styles","dropdown","minimal","jsx","native","Button","inputStyles","input","trigger","undefined","currentValue","panel","Input","List","length","isSelected","group","empty"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/_dropdown/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { Children, isValidElement, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\nimport { type IconName, iconSVG } from '@/components/icon/icons';\nimport { Input } from '@/components/input';\nimport inputStyles from '@/components/input/styles.module.css';\nimport { List } from '@/components/list';\nimport { Select, type SelectProps } from '@/components/select';\nimport { sanitizeSelectProps } from '@/components/select/sanitizeSelectProps';\nimport { resolveColor } from '@/utils';\n\nimport styles from './styles.module.css';\n\ntype NativeSelectProps = Omit<React.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {\n  children: React.ReactNode;\n  multiple?: false;\n};\n\ntype NativeSelectElement = React.ReactElement<NativeSelectProps, 'select'>;\ntype WrappedSelectElement = React.ReactElement<SelectProps, typeof Select>;\ntype DropdownSelectElement = NativeSelectElement | WrappedSelectElement;\n\ntype DropdownOption = {\n  disabled: boolean;\n  groupLabel?: string;\n  hidden: boolean;\n  isPlaceholder: boolean;\n  label: React.ReactNode;\n  selected: boolean;\n  text: string;\n  value: string;\n};\n\nexport type DropdownProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {\n  children: DropdownSelectElement;\n  emptyLabel?: string;\n  searchPlaceholder?: string;\n  variant?: 'default' | 'minimal';\n};\n\ntype withVars = React.CSSProperties & {\n  '--icon-svg'?: string;\n};\n\nfunction getIconWithVars(icon: IconName, color: string): withVars {\n  return {\n    '--icon-svg': iconSVG(icon).replace('currentColor', color),\n  };\n}\n\nfunction getNodeText(node: React.ReactNode): string {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(getNodeText).join(' ');\n  }\n\n  if (isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n\n  return '';\n}\n\nfunction isOptionElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'option'>, 'option'> {\n  return isValidElement(node) && node.type === 'option';\n}\n\nfunction isOptGroupElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'optgroup'>, 'optgroup'> {\n  return isValidElement(node) && node.type === 'optgroup';\n}\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }, typeof React.Fragment> {\n  return isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction isWrappedSelectElement(node: React.ReactNode): node is WrappedSelectElement {\n  return isValidElement(node) && node.type === Select;\n}\n\nfunction extractOptions(\n  children: React.ReactNode,\n  groupLabel?: string,\n  groupDisabled = false\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      options.push(...extractOptions(child.props.children, groupLabel, groupDisabled));\n      return;\n    }\n\n    if (isOptionElement(child)) {\n      const text = getNodeText(child.props.children).trim();\n      const value = child.props.value != null ? String(child.props.value) : text;\n\n      options.push({\n        disabled: groupDisabled || Boolean(child.props.disabled),\n        groupLabel,\n        hidden: Boolean(child.props.hidden),\n        isPlaceholder: Boolean(child.props.hidden && value === ''),\n        label: child.props.children,\n        selected: Boolean(child.props.selected),\n        text,\n        value,\n      });\n\n      return;\n    }\n\n    if (isOptGroupElement(child)) {\n      options.push(\n        ...extractOptions(\n          child.props.children,\n          child.props.label,\n          groupDisabled || Boolean(child.props.disabled)\n        )\n      );\n    }\n  });\n\n  return options;\n}\n\nfunction buildWildcardMatcher(query: string) {\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) {\n    return null;\n  }\n\n  const wildcardQuery = /[*?]/.test(trimmedQuery) ? trimmedQuery : `*${trimmedQuery}*`;\n  const expression = [...wildcardQuery]\n    .map((character) => {\n      if (character === '*') {\n        return '.*';\n      }\n\n      if (character === '?') {\n        return '.';\n      }\n\n      return character.replace(/[|\\\\{}()[\\]^$+.,]/g, '\\\\$&');\n    })\n    .join('');\n\n  return new RegExp(`^${expression}$`, 'i');\n}\n\nfunction filterOptions(options: DropdownOption[], query: string) {\n  const matcher = buildWildcardMatcher(query);\n  const selectableOptions = options.filter((option) => !option.hidden && !option.isPlaceholder);\n\n  if (!matcher) {\n    return selectableOptions;\n  }\n\n  return selectableOptions.filter((option) =>\n    matcher.test([option.groupLabel, option.text, option.value].filter(Boolean).join(' '))\n  );\n}\n\nfunction getDisplayOption(options: DropdownOption[], selectedValue: string) {\n  return (\n    options.find((option) => option.value === selectedValue) ??\n    options.find((option) => option.isPlaceholder) ??\n    options[0]\n  );\n}\n\nfunction getInitialValue(\n  options: DropdownOption[],\n  value?: NativeSelectProps['value'],\n  defaultValue?: NativeSelectProps['defaultValue']\n) {\n  if (value != null) {\n    return String(value);\n  }\n\n  if (defaultValue != null) {\n    return String(defaultValue);\n  }\n\n  const selectedOption = options.find((option) => option.selected);\n\n  if (selectedOption) {\n    return selectedOption.value;\n  }\n\n  return options[0]?.value ?? '';\n}\n\nfunction normalizeSelectElement(selectElement: DropdownSelectElement) {\n  if (isWrappedSelectElement(selectElement)) {\n    const { children, placeholder, ...props } = selectElement.props;\n\n    return {\n      children: (\n        <>\n          {placeholder && (\n            <option\n              hidden\n              value=''\n            >\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </>\n      ),\n      props,\n    };\n  }\n\n  return {\n    children: selectElement.props.children,\n    props: selectElement.props,\n  };\n}\n\nexport const Dropdown = ({\n  children: selectElement,\n  className,\n  emptyLabel = 'No matches found',\n  searchPlaceholder = 'Filter',\n  variant = 'default',\n  ...props\n}: DropdownProps) => {\n  const normalizedSelect = normalizeSelectElement(selectElement);\n  const { defaultValue, onChange, value, ...restSelectProps } = normalizedSelect.props;\n  const selectProps = sanitizeSelectProps(restSelectProps);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const nativeSelectRef = useRef<HTMLSelectElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const options = extractOptions(normalizedSelect.children);\n  const isControlled = value != null;\n  const initialValue = getInitialValue(options, value, defaultValue);\n  const [internalValue, setInternalValue] = useState(() => initialValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const selectedValue = isControlled ? String(value) : internalValue;\n  const iconColors = {\n    default: resolveColor('--colors-semantic-content-secondary'),\n    white: resolveColor('--color-white', 'white'),\n  };\n  const dropdownIconColor = variant === 'minimal' ? iconColors.white : iconColors.default;\n  const displayOption = getDisplayOption(options, selectedValue);\n  const triggerWithVars = getIconWithVars('chevron', dropdownIconColor);\n  const filterWithVars = getIconWithVars('search', dropdownIconColor);\n  const filteredOptions = filterOptions(options, query);\n\n  useEffect(() => {\n    if (!isControlled && !options.some((option) => option.value === internalValue)) {\n      setInternalValue(initialValue);\n    }\n  }, [initialValue, internalValue, isControlled, options]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setQuery('');\n      return;\n    }\n\n    searchRef.current?.focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const handleNativeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    if (!isControlled) {\n      setInternalValue(event.target.value);\n    }\n\n    onChange?.(event);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const commitValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    const nativeSelect = nativeSelectRef.current;\n\n    if (!nativeSelect) {\n      closeMenu();\n      return;\n    }\n\n    const valueSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;\n\n    valueSetter?.call(nativeSelect, nextValue);\n    nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));\n    closeMenu();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      closeMenu();\n    }\n  };\n\n  return (\n    <div\n      className={cx(styles.dropdown, variant === 'minimal' && styles.minimal, className)}\n      onKeyDown={handleKeyDown}\n      ref={containerRef}\n      {...props}\n    >\n      <select\n        {...selectProps}\n        aria-hidden='true'\n        className={styles.native}\n        onChange={handleNativeChange}\n        ref={nativeSelectRef}\n        tabIndex={-1}\n        value={selectedValue}\n      >\n        {normalizedSelect.children}\n      </select>\n      <Button\n        aria-expanded={isOpen}\n        aria-haspopup='dialog'\n        className={cx(\n          variant === 'default' && inputStyles.input,\n          styles.trigger,\n          displayOption?.isPlaceholder && styles.placeholder\n        )}\n        data-open={isOpen ? 'true' : undefined}\n        disabled={selectProps.disabled}\n        onClick={() => setIsOpen((currentValue) => !currentValue)}\n        ref={buttonRef}\n        style={triggerWithVars}\n        variant='minimal'\n      >\n        <span className={styles.text}>{displayOption?.label ?? 'Select an option'}</span>\n      </Button>\n      {isOpen && (\n        <div className={styles.panel}>\n          <Input\n            aria-label='Filter'\n            className={styles.filter}\n            icon='search'\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={searchPlaceholder}\n            ref={searchRef}\n            style={filterWithVars}\n            type='search'\n            value={query}\n          />\n          <List\n            aria-label='Dropdown'\n            className={styles.options}\n          >\n            {filteredOptions.length > 0 ? (\n              filteredOptions.map((option) => {\n                const isSelected = option.value === selectedValue;\n\n                return (\n                  <li key={`${option.groupLabel ?? 'root'}-${option.value}`}>\n                    <Button\n                      aria-label={isSelected ? `${option.text}, selected` : option.text}\n                      className={cx(styles.option, isSelected && styles.selected)}\n                      disabled={option.disabled}\n                      onClick={() => commitValue(option.value)}\n                      variant='minimal'\n                    >\n                      <span className={styles.text}>{option.label}</span>\n                      {option.groupLabel && (\n                        <small className={styles.group}>{option.groupLabel}</small>\n                      )}\n                    </Button>\n                  </li>\n                );\n              })\n            ) : (\n              <li className={styles.empty}>{emptyLabel}</li>\n            )}\n          </List>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["getIconWithVars","icon","color","iconSVG","replace","getNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","isOptionElement","type","isOptGroupElement","isFragmentElement","React","Fragment","isWrappedSelectElement","Select","extractOptions","groupLabel","groupDisabled","options","Children","forEach","child","push","text","trim","value","disabled","Boolean","hidden","isPlaceholder","label","selected","buildWildcardMatcher","query","trimmedQuery","expression","test","character","RegExp","filterOptions","matcher","selectableOptions","filter","option","getDisplayOption","selectedValue","find","getInitialValue","defaultValue","selectedOption","normalizeSelectElement","selectElement","placeholder","jsxs","Dropdown","className","emptyLabel","searchPlaceholder","variant","normalizedSelect","onChange","restSelectProps","selectProps","sanitizeSelectProps","buttonRef","useRef","containerRef","nativeSelectRef","searchRef","isControlled","initialValue","internalValue","setInternalValue","useState","isOpen","setIsOpen","setQuery","iconColors","default","resolveColor","white","dropdownIconColor","displayOption","triggerWithVars","filterWithVars","filteredOptions","useEffect","some","current","focus","handlePointerDown","event","contains","target","document","addEventListener","removeEventListener","handleNativeChange","closeMenu","commitValue","nextValue","nativeSelect","valueSetter","Object","getOwnPropertyDescriptor","HTMLSelectElement","prototype","set","call","dispatchEvent","Event","bubbles","handleKeyDown","key","cx","styles","dropdown","minimal","jsx","native","Button","inputStyles","input","trigger","undefined","currentValue","panel","Input","List","length","isSelected","group","empty"],"mappings":"k2BA6CA,SAASA,EAAgBC,EAAgBC,EAAyB,CAChE,MAAO,CACL,aAAcC,EAAAA,QAAQF,CAAI,EAAEG,QAAQ,eAAgBF,CAAK,CAAA,CAE7D,CAEA,SAASG,EAAYC,EAA+B,CAClD,OAAI,OAAOA,GAAS,UAAY,OAAOA,GAAS,SACvCC,OAAOD,CAAI,EAGhBE,MAAMC,QAAQH,CAAI,EACbA,EAAKI,IAAIL,CAAW,EAAEM,KAAK,GAAG,EAGnCC,EAAAA,eAA+CN,CAAI,EAC9CD,EAAYC,EAAKO,MAAMC,QAAQ,EAGjC,EACT,CAEA,SAASC,GACPT,EACgF,CAChF,OAAOM,EAAAA,eAAeN,CAAI,GAAKA,EAAKU,OAAS,QAC/C,CAEA,SAASC,GACPX,EACoF,CACpF,OAAOM,EAAAA,eAAeN,CAAI,GAAKA,EAAKU,OAAS,UAC/C,CAEA,SAASE,GACPZ,EACmF,CACnF,OAAOM,EAAAA,eAAeN,CAAI,GAAKA,EAAKU,OAASG,EAAMC,QACrD,CAEA,SAASC,GAAuBf,EAAqD,CACnF,OAAOM,EAAAA,eAAeN,CAAI,GAAKA,EAAKU,OAASM,EAAAA,MAC/C,CAEA,SAASC,EACPT,EACAU,EACAC,EAAgB,GACE,CAClB,MAAMC,EAA4B,CAAA,EAElCC,OAAAA,EAAAA,SAASC,QAAQd,EAAWe,GAAU,CACpC,GAAIX,GAAkBW,CAAK,EAAG,CAC5BH,EAAQI,KAAK,GAAGP,EAAeM,EAAMhB,MAAMC,SAAUU,EAAYC,CAAa,CAAC,EAC/E,MACF,CAEA,GAAIV,GAAgBc,CAAK,EAAG,CAC1B,MAAME,EAAO1B,EAAYwB,EAAMhB,MAAMC,QAAQ,EAAEkB,KAAAA,EACzCC,EAAQJ,EAAMhB,MAAMoB,OAAS,KAAO1B,OAAOsB,EAAMhB,MAAMoB,KAAK,EAAIF,EAEtEL,EAAQI,KAAK,CACXI,SAAUT,GAAiBU,EAAQN,EAAMhB,MAAMqB,SAC/CV,WAAAA,EACAY,OAAQD,EAAQN,EAAMhB,MAAMuB,OAC5BC,cAAeF,GAAQN,EAAMhB,MAAMuB,QAAUH,IAAU,IACvDK,MAAOT,EAAMhB,MAAMC,SACnByB,SAAUJ,EAAQN,EAAMhB,MAAM0B,SAC9BR,KAAAA,EACAE,MAAAA,CAAAA,CACD,EAED,MACF,CAEIhB,GAAkBY,CAAK,GACzBH,EAAQI,KACN,GAAGP,EACDM,EAAMhB,MAAMC,SACZe,EAAMhB,MAAMyB,MACZb,GAAiBU,EAAQN,EAAMhB,MAAMqB,QACvC,CACF,CAEJ,CAAC,EAEMR,CACT,CAEA,SAASc,GAAqBC,EAAe,CAC3C,MAAMC,EAAeD,EAAMT,KAAAA,EAE3B,GAAI,CAACU,EACH,OAAO,KAIT,MAAMC,EAAa,CAAC,GADE,OAAOC,KAAKF,CAAY,EAAIA,EAAe,IAAIA,CAAY,GAC7C,EACjChC,IAAKmC,GACAA,IAAc,IACT,KAGLA,IAAc,IACT,IAGFA,EAAUzC,QAAQ,qBAAsB,MAAM,CACtD,EACAO,KAAK,EAAE,EAEV,OAAO,IAAImC,OAAO,IAAIH,CAAU,IAAK,GAAG,CAC1C,CAEA,SAASI,GAAcrB,EAA2Be,EAAe,CAC/D,MAAMO,EAAUR,GAAqBC,CAAK,EACpCQ,EAAoBvB,EAAQwB,OAAQC,GAAW,CAACA,EAAOf,QAAU,CAACe,EAAOd,aAAa,EAE5F,OAAKW,EAIEC,EAAkBC,OAAQC,GAC/BH,EAAQJ,KAAK,CAACO,EAAO3B,WAAY2B,EAAOpB,KAAMoB,EAAOlB,KAAK,EAAEiB,OAAOf,OAAO,EAAExB,KAAK,GAAG,CAAC,CACvF,EALSsC,CAMX,CAEA,SAASG,GAAiB1B,EAA2B2B,EAAuB,CAC1E,OACE3B,EAAQ4B,KAAMH,GAAWA,EAAOlB,QAAUoB,CAAa,GACvD3B,EAAQ4B,KAAMH,GAAWA,EAAOd,aAAa,GAC7CX,EAAQ,CAAC,CAEb,CAEA,SAAS6B,GACP7B,EACAO,EACAuB,EACA,OACA,GAAIvB,GAAS,KACX,OAAO1B,OAAO0B,CAAK,EAGrB,GAAIuB,GAAgB,KAClB,OAAOjD,OAAOiD,CAAY,EAG5B,MAAMC,EAAiB/B,EAAQ4B,KAAMH,GAAWA,EAAOZ,QAAQ,EAE/D,OAAIkB,EACKA,EAAexB,QAGjBP,EAAAA,EAAQ,CAAC,IAATA,YAAAA,EAAYO,QAAS,EAC9B,CAEA,SAASyB,GAAuBC,EAAsC,CACpE,GAAItC,GAAuBsC,CAAa,EAAG,CACzC,KAAM,CAAE7C,SAAAA,EAAU8C,YAAAA,EAAa,GAAG/C,CAAAA,EAAU8C,EAAc9C,MAE1D,MAAO,CACLC,SACE+C,EAAAA,KAAAzC,WAAA,CACGwC,SAAAA,CAAAA,SACE,SAAA,CACC,OAAM,GACN,MAAM,GAELA,SAAAA,EACH,EAED9C,CAAAA,EACH,EAEFD,MAAAA,CAAAA,CAEJ,CAEA,MAAO,CACLC,SAAU6C,EAAc9C,MAAMC,SAC9BD,MAAO8C,EAAc9C,KAAAA,CAEzB,CAEO,MAAMiD,GAAWA,CAAC,CACvBhD,SAAU6C,EACVI,UAAAA,EACAC,WAAAA,EAAa,mBACbC,kBAAAA,EAAoB,SACpBC,QAAAA,EAAU,UACV,GAAGrD,CACU,IAAM,CACnB,MAAMsD,EAAmBT,GAAuBC,CAAa,EACvD,CAAEH,aAAAA,EAAcY,SAAAA,EAAUnC,MAAAA,EAAO,GAAGoC,CAAAA,EAAoBF,EAAiBtD,MACzEyD,EAAcC,EAAAA,oBAAoBF,CAAe,EACjDG,EAAYC,EAAAA,OAA0B,IAAI,EAC1CC,EAAeD,EAAAA,OAAuB,IAAI,EAC1CE,EAAkBF,EAAAA,OAA0B,IAAI,EAChDG,EAAYH,EAAAA,OAAyB,IAAI,EACzC/C,EAAUH,EAAe4C,EAAiBrD,QAAQ,EAClD+D,EAAe5C,GAAS,KACxB6C,EAAevB,GAAgB7B,EAASO,EAAOuB,CAAY,EAC3D,CAACuB,EAAeC,CAAgB,EAAIC,EAAAA,SAAS,IAAMH,CAAY,EAC/D,CAACI,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EACpC,CAACxC,EAAO2C,CAAQ,EAAIH,EAAAA,SAAS,EAAE,EAC/B5B,EAAgBwB,EAAetE,OAAO0B,CAAK,EAAI8C,EAC/CM,EAAa,CACjBC,QAASC,EAAAA,aAAa,qCAAqC,EAC3DC,MAAOD,EAAAA,aAAa,gBAAiB,OAAO,CAAA,EAExCE,EAAoBvB,IAAY,UAAYmB,EAAWG,MAAQH,EAAWC,QAC1EI,EAAgBtC,GAAiB1B,EAAS2B,CAAa,EACvDsC,EAAkB3F,EAAgB,UAAWyF,CAAiB,EAC9DG,EAAiB5F,EAAgB,SAAUyF,CAAiB,EAC5DI,EAAkB9C,GAAcrB,EAASe,CAAK,EAEpDqD,EAAAA,UAAU,IAAM,CACV,CAACjB,GAAgB,CAACnD,EAAQqE,KAAM5C,GAAWA,EAAOlB,QAAU8C,CAAa,GAC3EC,EAAiBF,CAAY,CAEjC,EAAG,CAACA,EAAcC,EAAeF,EAAcnD,CAAO,CAAC,EAEvDoE,EAAAA,UAAU,IAAM,OACd,GAAI,CAACZ,EAAQ,CACXE,EAAS,EAAE,EACX,MACF,EAEAR,EAAAA,EAAUoB,UAAVpB,MAAAA,EAAmBqB,OACrB,EAAG,CAACf,CAAM,CAAC,EAEXY,EAAAA,UAAU,IAAM,CACd,GAAI,CAACZ,EACH,OAGF,MAAMgB,EAAqBC,GAAsB,QAC1CzB,EAAAA,EAAasB,UAAbtB,MAAAA,EAAsB0B,SAASD,EAAME,SACxClB,EAAU,EAAK,CAEnB,EAEAmB,gBAASC,iBAAiB,YAAaL,CAAiB,EAEjD,IAAM,CACXI,SAASE,oBAAoB,YAAaN,CAAiB,CAC7D,CACF,EAAG,CAAChB,CAAM,CAAC,EAEX,MAAMuB,EAAsBN,GAAgD,CACrEtB,GACHG,EAAiBmB,EAAME,OAAOpE,KAAK,EAGrCmC,GAAAA,MAAAA,EAAW+B,EACb,EAEMO,EAAYA,IAAM,OACtBvB,EAAU,EAAK,GACfX,EAAAA,EAAUwB,UAAVxB,MAAAA,EAAmByB,OACrB,EAEMU,EAAeC,GAAsB,OACpC/B,GACHG,EAAiB4B,CAAS,EAG5B,MAAMC,EAAelC,EAAgBqB,QAErC,GAAI,CAACa,EAAc,CACjBH,EAAAA,EACA,MACF,CAEA,MAAMI,GAAcC,EAAAA,OAAOC,yBAAyBC,kBAAkBC,UAAW,OAAO,IAApEH,YAAAA,EAAuEI,IAE3FL,GAAAA,MAAAA,EAAaM,KAAKP,EAAcD,GAChCC,EAAaQ,cAAc,IAAIC,MAAM,SAAU,CAAEC,QAAS,EAAA,CAAM,CAAC,EACjEb,EAAAA,CACF,EAEMc,EAAiBrB,GAA+C,CAChEA,EAAMsB,MAAQ,UAChBf,EAAAA,CAEJ,EAEA,cACG,MAAA,CACC,UAAWgB,EAAAA,EAAGC,EAAOC,SAAU1D,IAAY,WAAayD,EAAOE,QAAS9D,CAAS,EACjF,UAAWyD,EACX,IAAK9C,EACL,GAAI7D,EAAM,iBAAA,WAEV,SAAA,CAAAiH,MAAC,aACKxD,EACJ,cAAY,OACZ,UAAWqD,EAAOI,OAClB,SAAUtB,EACV,IAAK9B,EACL,SAAU,GACV,MAAOtB,EAENc,WAAiBrD,SACpB,EACAgH,EAAAA,IAACE,EAAAA,QACC,gBAAe9C,EACf,gBAAc,SACd,UAAWwC,EAAAA,EACTxD,IAAY,WAAa+D,EAAAA,YAAYC,MACrCP,EAAOQ,SACPzC,GAAAA,YAAAA,EAAerD,gBAAiBsF,EAAO/D,WACzC,EACA,YAAWsB,EAAS,OAASkD,OAC7B,SAAU9D,EAAYpC,SACtB,QAAS,IAAMiD,KAA4B,CAACkD,CAAY,EACxD,IAAK7D,EACL,MAAOmB,EACP,QAAQ,UAER,eAAC,OAAA,CAAK,UAAWgC,EAAO5F,KAAO2D,UAAAA,GAAAA,YAAAA,EAAepD,QAAS,kBAAA,CAAmB,CAAA,CAC5E,EACC4C,GACCrB,EAAAA,KAAC,MAAA,CAAI,UAAW8D,EAAOW,MACrB,SAAA,CAAAR,EAAAA,IAACS,EAAAA,MAAA,CACC,aAAW,SACX,UAAWZ,EAAOzE,OAClB,KAAK,SACL,SAAWiD,GAAUf,EAASe,EAAME,OAAOpE,KAAK,EAChD,YAAagC,EACb,IAAKW,EACL,MAAOgB,EACP,KAAK,SACL,MAAOnD,CAAAA,CAAM,EAEfqF,EAAAA,IAACU,EAAAA,KAAA,CACC,aAAW,WACX,UAAWb,EAAOjG,QAEjBmE,SAAAA,EAAgB4C,OAAS,EACxB5C,EAAgBnF,IAAKyC,GAAW,CAC9B,MAAMuF,EAAavF,EAAOlB,QAAUoB,EAEpC,OACEyE,EAAAA,IAAC,KAAA,CAAyD,iBAAA,WACxD,gBAACE,EAAAA,OAAA,CACC,aAAYU,EAAa,GAAGvF,EAAOpB,IAAI,aAAeoB,EAAOpB,KAC7D,UAAW2F,EAAAA,EAAGC,EAAOxE,OAAQuF,GAAcf,EAAOpF,QAAQ,EAC1D,SAAUY,EAAOjB,SACjB,QAAS,IAAMyE,EAAYxD,EAAOlB,KAAK,EACvC,QAAQ,UAER,SAAA,CAAA6F,MAAC,OAAA,CAAK,UAAWH,EAAO5F,KAAOoB,WAAOb,MAAM,EAC3Ca,EAAO3B,YACNsG,MAAC,QAAA,CAAM,UAAWH,EAAOgB,MAAQxF,WAAO3B,UAAAA,CAAW,CAAA,EAEvD,CAAA,EAZO,GAAG2B,EAAO3B,YAAc,MAAM,IAAI2B,EAAOlB,KAAK,EAavD,CAEJ,CAAC,EAED6F,MAAC,KAAA,CAAG,UAAWH,EAAOiB,MAAQ5E,WAAW,CAAA,CAE7C,CAAA,CAAA,CACF,CAAA,EAEJ,CAEJ"}

package/dist/components/_dropdown/index.js

@@ -1,108 +1,108 @@
-import { jsxs as w, jsx as i, Fragment as Z } from "react/jsx-runtime";
+import { jsxs as _, jsx as i, Fragment as Z } from "react/jsx-runtime";
 import { t as V } from "../../classix-DG18itHa.js";
-import ee, { useRef as _, useState as O, useEffect as P, Children as te, isValidElement as g } from "react";
+import ee, { useRef as g, useState as O, useEffect as P, Children as te, isValidElement as x } from "react";
 import { Button as A } from "../button/index.js";
-import { i as re } from "../../icons-DfmpRbxE.js";
-import { Input as ne } from "../input/index.js";
-import { i as oe } from "../../styles.module-DZXAP_eP.js";
-import { List as le } from "../list/index.js";
-import { s as se, S as ie } from "../../index-BNaQZHo6.js";
+import { i as ne } from "../../icons-DfmpRbxE.js";
+import { Input as re } from "../input/index.js";
+import { i as oe } from "../../styles.module-BOTEBJ0C.js";
+import { List as se } from "../list/index.js";
+import { s as le, S as ie } from "../../index-CiEbbnD6.js";
 import { r as G } from "../../utils--n2yqjCy.js";
-import '../../assets/index22.css';const ae = "_dropdown_ruf4w_1", ce = "_empty_ruf4w_4", ue = "_group_ruf4w_5", pe = "_placeholder_ruf4w_6", de = "_filter_ruf4w_14", fe = "_native_ruf4w_25", me = "_option_ruf4w_35", he = "_options_ruf4w_57", ge = "_panel_ruf4w_81", _e = "_selected_ruf4w_102", we = "_text_ruf4w_106", ve = "_trigger_ruf4w_114", ye = "_minimal_ruf4w_130", s = {
+import '../../assets/index22.css';const ae = "_dropdown_1dsxx_1", ce = "_empty_1dsxx_4", pe = "_group_1dsxx_5", ue = "_placeholder_1dsxx_6", de = "_filter_1dsxx_14", fe = "_native_1dsxx_25", me = "_option_1dsxx_35", he = "_options_1dsxx_57", xe = "_panel_1dsxx_81", ge = "_selected_1dsxx_104", _e = "_text_1dsxx_108", ve = "_trigger_1dsxx_117", ye = "_minimal_1dsxx_133", l = {
   dropdown: ae,
   empty: ce,
-  group: ue,
-  placeholder: pe,
+  group: pe,
+  placeholder: ue,
   filter: de,
   native: fe,
   option: me,
   options: he,
-  panel: ge,
-  selected: _e,
-  text: we,
+  panel: xe,
+  selected: ge,
+  text: _e,
   trigger: ve,
   minimal: ye
 };
-function K(e, n) {
+function K(e, r) {
   return {
-    "--icon-svg": re(e).replace("currentColor", n)
+    "--icon-svg": ne(e).replace("currentColor", r)
   };
 }
 function $(e) {
-  return typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map($).join(" ") : g(e) ? $(e.props.children) : "";
+  return typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map($).join(" ") : x(e) ? $(e.props.children) : "";
 }
 function be(e) {
-  return g(e) && e.type === "option";
+  return x(e) && e.type === "option";
 }
-function Se(e) {
-  return g(e) && e.type === "optgroup";
+function we(e) {
+  return x(e) && e.type === "optgroup";
 }
-function xe(e) {
-  return g(e) && e.type === ee.Fragment;
+function Se(e) {
+  return x(e) && e.type === ee.Fragment;
 }
 function Ne(e) {
-  return g(e) && e.type === ie;
+  return x(e) && e.type === ie;
 }
-function B(e, n, o = !1) {
-  const l = [];
+function B(e, r, o = !1) {
+  const s = [];
   return te.forEach(e, (t) => {
-    if (xe(t)) {
-      l.push(...B(t.props.children, n, o));
+    if (Se(t)) {
+      s.push(...B(t.props.children, r, o));
       return;
     }
     if (be(t)) {
-      const u = $(t.props.children).trim(), p = t.props.value != null ? String(t.props.value) : u;
-      l.push({
+      const p = $(t.props.children).trim(), u = t.props.value != null ? String(t.props.value) : p;
+      s.push({
         disabled: o || !!t.props.disabled,
-        groupLabel: n,
+        groupLabel: r,
         hidden: !!t.props.hidden,
-        isPlaceholder: !!(t.props.hidden && p === ""),
+        isPlaceholder: !!(t.props.hidden && u === ""),
         label: t.props.children,
         selected: !!t.props.selected,
-        text: u,
-        value: p
+        text: p,
+        value: u
       });
       return;
     }
-    Se(t) && l.push(...B(t.props.children, t.props.label, o || !!t.props.disabled));
-  }), l;
+    we(t) && s.push(...B(t.props.children, t.props.label, o || !!t.props.disabled));
+  }), s;
 }
 function Ee(e) {
-  const n = e.trim();
-  if (!n)
+  const r = e.trim();
+  if (!r)
     return null;
-  const l = [.../[*?]/.test(n) ? n : `*${n}*`].map((t) => t === "*" ? ".*" : t === "?" ? "." : t.replace(/[|\\{}()[\]^$+.,]/g, "\\$&")).join("");
-  return new RegExp(`^${l}$`, "i");
+  const s = [.../[*?]/.test(r) ? r : `*${r}*`].map((t) => t === "*" ? ".*" : t === "?" ? "." : t.replace(/[|\\{}()[\]^$+.,]/g, "\\$&")).join("");
+  return new RegExp(`^${s}$`, "i");
 }
-function Ce(e, n) {
-  const o = Ee(n), l = e.filter((t) => !t.hidden && !t.isPlaceholder);
-  return o ? l.filter((t) => o.test([t.groupLabel, t.text, t.value].filter(Boolean).join(" "))) : l;
+function Ce(e, r) {
+  const o = Ee(r), s = e.filter((t) => !t.hidden && !t.isPlaceholder);
+  return o ? s.filter((t) => o.test([t.groupLabel, t.text, t.value].filter(Boolean).join(" "))) : s;
 }
-function Ve(e, n) {
-  return e.find((o) => o.value === n) ?? e.find((o) => o.isPlaceholder) ?? e[0];
+function Ve(e, r) {
+  return e.find((o) => o.value === r) ?? e.find((o) => o.isPlaceholder) ?? e[0];
 }
-function Oe(e, n, o) {
+function Oe(e, r, o) {
   var t;
-  if (n != null)
-    return String(n);
+  if (r != null)
+    return String(r);
   if (o != null)
     return String(o);
-  const l = e.find((u) => u.selected);
-  return l ? l.value : ((t = e[0]) == null ? void 0 : t.value) ?? "";
+  const s = e.find((p) => p.selected);
+  return s ? s.value : ((t = e[0]) == null ? void 0 : t.value) ?? "";
 }
 function Pe(e) {
   if (Ne(e)) {
     const {
-      children: n,
+      children: r,
       placeholder: o,
-      ...l
+      ...s
     } = e.props;
     return {
-      children: /* @__PURE__ */ w(Z, { children: [
+      children: /* @__PURE__ */ _(Z, { children: [
         o && /* @__PURE__ */ i("option", { hidden: !0, value: "", children: o }),
-        n
+        r
       ] }),
-      props: l
+      props: s
     };
   }
   return {
@@ -112,73 +112,73 @@ function Pe(e) {
 }
 const ke = ({
   children: e,
-  className: n,
+  className: r,
   emptyLabel: o = "No matches found",
-  searchPlaceholder: l = "Filter",
+  searchPlaceholder: s = "Filter",
   variant: t = "default",
-  ...u
+  ...p
 }) => {
-  const p = Pe(e), {
+  const u = Pe(e), {
     defaultValue: T,
     onChange: v,
     value: y,
     ...q
-  } = p.props, I = se(q), L = _(null), R = _(null), j = _(null), D = _(null), m = B(p.children), h = y != null, b = Oe(m, y, T), [S, x] = O(() => b), [c, N] = O(!1), [F, W] = O(""), E = h ? String(y) : S, Q = {
-    default: G("--color-icon"),
+  } = u.props, I = le(q), L = g(null), R = g(null), j = g(null), D = g(null), m = B(u.children), h = y != null, b = Oe(m, y, T), [w, S] = O(() => b), [c, N] = O(!1), [F, W] = O(""), E = h ? String(y) : w, Q = {
+    default: G("--colors-semantic-content-secondary"),
     white: G("--color-white", "white")
   }, k = t === "minimal" ? Q.white : Q.default, d = Ve(m, E), H = K("chevron", k), J = K("search", k), z = Ce(m, F);
   P(() => {
-    !h && !m.some((r) => r.value === S) && x(b);
-  }, [b, S, h, m]), P(() => {
-    var r;
+    !h && !m.some((n) => n.value === w) && S(b);
+  }, [b, w, h, m]), P(() => {
+    var n;
     if (!c) {
       W("");
       return;
     }
-    (r = D.current) == null || r.focus();
+    (n = D.current) == null || n.focus();
   }, [c]), P(() => {
     if (!c)
       return;
-    const r = (a) => {
+    const n = (a) => {
       var f;
       (f = R.current) != null && f.contains(a.target) || N(!1);
     };
-    return document.addEventListener("mousedown", r), () => {
-      document.removeEventListener("mousedown", r);
+    return document.addEventListener("mousedown", n), () => {
+      document.removeEventListener("mousedown", n);
     };
   }, [c]);
-  const U = (r) => {
-    h || x(r.target.value), v == null || v(r);
+  const U = (n) => {
+    h || S(n.target.value), v == null || v(n);
   }, C = () => {
-    var r;
-    N(!1), (r = L.current) == null || r.focus();
-  }, X = (r) => {
+    var n;
+    N(!1), (n = L.current) == null || n.focus();
+  }, X = (n) => {
     var M;
-    h || x(r);
+    h || S(n);
     const a = j.current;
     if (!a) {
       C();
       return;
     }
     const f = (M = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")) == null ? void 0 : M.set;
-    f == null || f.call(a, r), a.dispatchEvent(new Event("change", {
+    f == null || f.call(a, n), a.dispatchEvent(new Event("change", {
       bubbles: !0
     })), C();
-  }, Y = (r) => {
-    r.key === "Escape" && C();
+  }, Y = (n) => {
+    n.key === "Escape" && C();
   };
-  return /* @__PURE__ */ w("div", { className: V(s.dropdown, t === "minimal" && s.minimal, n), onKeyDown: Y, ref: R, ...u, "data-component": "dropdown", children: [
-    /* @__PURE__ */ i("select", { ...I, "aria-hidden": "true", className: s.native, onChange: U, ref: j, tabIndex: -1, value: E, children: p.children }),
-    /* @__PURE__ */ i(A, { "aria-expanded": c, "aria-haspopup": "dialog", className: V(t === "default" && oe.input, s.trigger, (d == null ? void 0 : d.isPlaceholder) && s.placeholder), "data-open": c ? "true" : void 0, disabled: I.disabled, onClick: () => N((r) => !r), ref: L, style: H, variant: "minimal", children: /* @__PURE__ */ i("span", { className: s.text, children: (d == null ? void 0 : d.label) ?? "Select an option" }) }),
-    c && /* @__PURE__ */ w("div", { className: s.panel, children: [
-      /* @__PURE__ */ i(ne, { "aria-label": "Filter", className: s.filter, icon: "search", onChange: (r) => W(r.target.value), placeholder: l, ref: D, style: J, type: "search", value: F }),
-      /* @__PURE__ */ i(le, { "aria-label": "Dropdown", className: s.options, children: z.length > 0 ? z.map((r) => {
-        const a = r.value === E;
-        return /* @__PURE__ */ i("li", { "data-component": "dropdown", children: /* @__PURE__ */ w(A, { "aria-label": a ? `${r.text}, selected` : r.text, className: V(s.option, a && s.selected), disabled: r.disabled, onClick: () => X(r.value), variant: "minimal", children: [
-          /* @__PURE__ */ i("span", { className: s.text, children: r.label }),
-          r.groupLabel && /* @__PURE__ */ i("small", { className: s.group, children: r.groupLabel })
-        ] }) }, `${r.groupLabel ?? "root"}-${r.value}`);
-      }) : /* @__PURE__ */ i("li", { className: s.empty, children: o }) })
+  return /* @__PURE__ */ _("div", { className: V(l.dropdown, t === "minimal" && l.minimal, r), onKeyDown: Y, ref: R, ...p, "data-component": "dropdown", children: [
+    /* @__PURE__ */ i("select", { ...I, "aria-hidden": "true", className: l.native, onChange: U, ref: j, tabIndex: -1, value: E, children: u.children }),
+    /* @__PURE__ */ i(A, { "aria-expanded": c, "aria-haspopup": "dialog", className: V(t === "default" && oe.input, l.trigger, (d == null ? void 0 : d.isPlaceholder) && l.placeholder), "data-open": c ? "true" : void 0, disabled: I.disabled, onClick: () => N((n) => !n), ref: L, style: H, variant: "minimal", children: /* @__PURE__ */ i("span", { className: l.text, children: (d == null ? void 0 : d.label) ?? "Select an option" }) }),
+    c && /* @__PURE__ */ _("div", { className: l.panel, children: [
+      /* @__PURE__ */ i(re, { "aria-label": "Filter", className: l.filter, icon: "search", onChange: (n) => W(n.target.value), placeholder: s, ref: D, style: J, type: "search", value: F }),
+      /* @__PURE__ */ i(se, { "aria-label": "Dropdown", className: l.options, children: z.length > 0 ? z.map((n) => {
+        const a = n.value === E;
+        return /* @__PURE__ */ i("li", { "data-component": "dropdown", children: /* @__PURE__ */ _(A, { "aria-label": a ? `${n.text}, selected` : n.text, className: V(l.option, a && l.selected), disabled: n.disabled, onClick: () => X(n.value), variant: "minimal", children: [
+          /* @__PURE__ */ i("span", { className: l.text, children: n.label }),
+          n.groupLabel && /* @__PURE__ */ i("small", { className: l.group, children: n.groupLabel })
+        ] }) }, `${n.groupLabel ?? "root"}-${n.value}`);
+      }) : /* @__PURE__ */ i("li", { className: l.empty, children: o }) })
     ] })
   ] });
 };

package/dist/components/_dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/_dropdown/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { Children, isValidElement, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\nimport { type IconName, iconSVG } from '@/components/icon/icons';\nimport { Input } from '@/components/input';\nimport inputStyles from '@/components/input/styles.module.css';\nimport { List } from '@/components/list';\nimport { Select, type SelectProps } from '@/components/select';\nimport { sanitizeSelectProps } from '@/components/select/sanitizeSelectProps';\nimport { resolveColor } from '@/utils';\n\nimport styles from './styles.module.css';\n\ntype NativeSelectProps = Omit<React.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {\n  children: React.ReactNode;\n  multiple?: false;\n};\n\ntype NativeSelectElement = React.ReactElement<NativeSelectProps, 'select'>;\ntype WrappedSelectElement = React.ReactElement<SelectProps, typeof Select>;\ntype DropdownSelectElement = NativeSelectElement | WrappedSelectElement;\n\ntype DropdownOption = {\n  disabled: boolean;\n  groupLabel?: string;\n  hidden: boolean;\n  isPlaceholder: boolean;\n  label: React.ReactNode;\n  selected: boolean;\n  text: string;\n  value: string;\n};\n\nexport type DropdownProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {\n  children: DropdownSelectElement;\n  emptyLabel?: string;\n  searchPlaceholder?: string;\n  variant?: 'default' | 'minimal';\n};\n\ntype withVars = React.CSSProperties & {\n  '--icon-svg'?: string;\n};\n\nfunction getIconWithVars(icon: IconName, color: string): withVars {\n  return {\n    '--icon-svg': iconSVG(icon).replace('currentColor', color),\n  };\n}\n\nfunction getNodeText(node: React.ReactNode): string {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(getNodeText).join(' ');\n  }\n\n  if (isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n\n  return '';\n}\n\nfunction isOptionElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'option'>, 'option'> {\n  return isValidElement(node) && node.type === 'option';\n}\n\nfunction isOptGroupElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'optgroup'>, 'optgroup'> {\n  return isValidElement(node) && node.type === 'optgroup';\n}\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }, typeof React.Fragment> {\n  return isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction isWrappedSelectElement(node: React.ReactNode): node is WrappedSelectElement {\n  return isValidElement(node) && node.type === Select;\n}\n\nfunction extractOptions(\n  children: React.ReactNode,\n  groupLabel?: string,\n  groupDisabled = false\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      options.push(...extractOptions(child.props.children, groupLabel, groupDisabled));\n      return;\n    }\n\n    if (isOptionElement(child)) {\n      const text = getNodeText(child.props.children).trim();\n      const value = child.props.value != null ? String(child.props.value) : text;\n\n      options.push({\n        disabled: groupDisabled || Boolean(child.props.disabled),\n        groupLabel,\n        hidden: Boolean(child.props.hidden),\n        isPlaceholder: Boolean(child.props.hidden && value === ''),\n        label: child.props.children,\n        selected: Boolean(child.props.selected),\n        text,\n        value,\n      });\n\n      return;\n    }\n\n    if (isOptGroupElement(child)) {\n      options.push(\n        ...extractOptions(\n          child.props.children,\n          child.props.label,\n          groupDisabled || Boolean(child.props.disabled)\n        )\n      );\n    }\n  });\n\n  return options;\n}\n\nfunction buildWildcardMatcher(query: string) {\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) {\n    return null;\n  }\n\n  const wildcardQuery = /[*?]/.test(trimmedQuery) ? trimmedQuery : `*${trimmedQuery}*`;\n  const expression = [...wildcardQuery]\n    .map((character) => {\n      if (character === '*') {\n        return '.*';\n      }\n\n      if (character === '?') {\n        return '.';\n      }\n\n      return character.replace(/[|\\\\{}()[\\]^$+.,]/g, '\\\\$&');\n    })\n    .join('');\n\n  return new RegExp(`^${expression}$`, 'i');\n}\n\nfunction filterOptions(options: DropdownOption[], query: string) {\n  const matcher = buildWildcardMatcher(query);\n  const selectableOptions = options.filter((option) => !option.hidden && !option.isPlaceholder);\n\n  if (!matcher) {\n    return selectableOptions;\n  }\n\n  return selectableOptions.filter((option) =>\n    matcher.test([option.groupLabel, option.text, option.value].filter(Boolean).join(' '))\n  );\n}\n\nfunction getDisplayOption(options: DropdownOption[], selectedValue: string) {\n  return (\n    options.find((option) => option.value === selectedValue) ??\n    options.find((option) => option.isPlaceholder) ??\n    options[0]\n  );\n}\n\nfunction getInitialValue(\n  options: DropdownOption[],\n  value?: NativeSelectProps['value'],\n  defaultValue?: NativeSelectProps['defaultValue']\n) {\n  if (value != null) {\n    return String(value);\n  }\n\n  if (defaultValue != null) {\n    return String(defaultValue);\n  }\n\n  const selectedOption = options.find((option) => option.selected);\n\n  if (selectedOption) {\n    return selectedOption.value;\n  }\n\n  return options[0]?.value ?? '';\n}\n\nfunction normalizeSelectElement(selectElement: DropdownSelectElement) {\n  if (isWrappedSelectElement(selectElement)) {\n    const { children, placeholder, ...props } = selectElement.props;\n\n    return {\n      children: (\n        <>\n          {placeholder && (\n            <option\n              hidden\n              value=''\n            >\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </>\n      ),\n      props,\n    };\n  }\n\n  return {\n    children: selectElement.props.children,\n    props: selectElement.props,\n  };\n}\n\nexport const Dropdown = ({\n  children: selectElement,\n  className,\n  emptyLabel = 'No matches found',\n  searchPlaceholder = 'Filter',\n  variant = 'default',\n  ...props\n}: DropdownProps) => {\n  const normalizedSelect = normalizeSelectElement(selectElement);\n  const { defaultValue, onChange, value, ...restSelectProps } = normalizedSelect.props;\n  const selectProps = sanitizeSelectProps(restSelectProps);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const nativeSelectRef = useRef<HTMLSelectElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const options = extractOptions(normalizedSelect.children);\n  const isControlled = value != null;\n  const initialValue = getInitialValue(options, value, defaultValue);\n  const [internalValue, setInternalValue] = useState(() => initialValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const selectedValue = isControlled ? String(value) : internalValue;\n  const iconColors = {\n    default: resolveColor('--color-icon'),\n    white: resolveColor('--color-white', 'white'),\n  };\n  const dropdownIconColor = variant === 'minimal' ? iconColors.white : iconColors.default;\n  const displayOption = getDisplayOption(options, selectedValue);\n  const triggerWithVars = getIconWithVars('chevron', dropdownIconColor);\n  const filterWithVars = getIconWithVars('search', dropdownIconColor);\n  const filteredOptions = filterOptions(options, query);\n\n  useEffect(() => {\n    if (!isControlled && !options.some((option) => option.value === internalValue)) {\n      setInternalValue(initialValue);\n    }\n  }, [initialValue, internalValue, isControlled, options]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setQuery('');\n      return;\n    }\n\n    searchRef.current?.focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const handleNativeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    if (!isControlled) {\n      setInternalValue(event.target.value);\n    }\n\n    onChange?.(event);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const commitValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    const nativeSelect = nativeSelectRef.current;\n\n    if (!nativeSelect) {\n      closeMenu();\n      return;\n    }\n\n    const valueSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;\n\n    valueSetter?.call(nativeSelect, nextValue);\n    nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));\n    closeMenu();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      closeMenu();\n    }\n  };\n\n  return (\n    <div\n      className={cx(styles.dropdown, variant === 'minimal' && styles.minimal, className)}\n      onKeyDown={handleKeyDown}\n      ref={containerRef}\n      {...props}\n    >\n      <select\n        {...selectProps}\n        aria-hidden='true'\n        className={styles.native}\n        onChange={handleNativeChange}\n        ref={nativeSelectRef}\n        tabIndex={-1}\n        value={selectedValue}\n      >\n        {normalizedSelect.children}\n      </select>\n      <Button\n        aria-expanded={isOpen}\n        aria-haspopup='dialog'\n        className={cx(\n          variant === 'default' && inputStyles.input,\n          styles.trigger,\n          displayOption?.isPlaceholder && styles.placeholder\n        )}\n        data-open={isOpen ? 'true' : undefined}\n        disabled={selectProps.disabled}\n        onClick={() => setIsOpen((currentValue) => !currentValue)}\n        ref={buttonRef}\n        style={triggerWithVars}\n        variant='minimal'\n      >\n        <span className={styles.text}>{displayOption?.label ?? 'Select an option'}</span>\n      </Button>\n      {isOpen && (\n        <div className={styles.panel}>\n          <Input\n            aria-label='Filter'\n            className={styles.filter}\n            icon='search'\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={searchPlaceholder}\n            ref={searchRef}\n            style={filterWithVars}\n            type='search'\n            value={query}\n          />\n          <List\n            aria-label='Dropdown'\n            className={styles.options}\n          >\n            {filteredOptions.length > 0 ? (\n              filteredOptions.map((option) => {\n                const isSelected = option.value === selectedValue;\n\n                return (\n                  <li key={`${option.groupLabel ?? 'root'}-${option.value}`}>\n                    <Button\n                      aria-label={isSelected ? `${option.text}, selected` : option.text}\n                      className={cx(styles.option, isSelected && styles.selected)}\n                      disabled={option.disabled}\n                      onClick={() => commitValue(option.value)}\n                      variant='minimal'\n                    >\n                      <span className={styles.text}>{option.label}</span>\n                      {option.groupLabel && (\n                        <small className={styles.group}>{option.groupLabel}</small>\n                      )}\n                    </Button>\n                  </li>\n                );\n              })\n            ) : (\n              <li className={styles.empty}>{emptyLabel}</li>\n            )}\n          </List>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["getIconWithVars","icon","color","iconSVG","replace","getNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","isOptionElement","type","isOptGroupElement","isFragmentElement","React","Fragment","isWrappedSelectElement","Select","extractOptions","groupLabel","groupDisabled","options","Children","forEach","child","push","text","trim","value","disabled","Boolean","hidden","isPlaceholder","label","selected","buildWildcardMatcher","query","trimmedQuery","expression","test","character","RegExp","filterOptions","matcher","selectableOptions","filter","option","getDisplayOption","selectedValue","find","getInitialValue","defaultValue","selectedOption","normalizeSelectElement","selectElement","placeholder","jsxs","Dropdown","className","emptyLabel","searchPlaceholder","variant","normalizedSelect","onChange","restSelectProps","selectProps","sanitizeSelectProps","buttonRef","useRef","containerRef","nativeSelectRef","searchRef","isControlled","initialValue","internalValue","setInternalValue","useState","isOpen","setIsOpen","setQuery","iconColors","default","resolveColor","white","dropdownIconColor","displayOption","triggerWithVars","filterWithVars","filteredOptions","useEffect","some","current","focus","handlePointerDown","event","contains","target","document","addEventListener","removeEventListener","handleNativeChange","closeMenu","commitValue","nextValue","nativeSelect","valueSetter","Object","getOwnPropertyDescriptor","HTMLSelectElement","prototype","set","call","dispatchEvent","Event","bubbles","handleKeyDown","key","cx","styles","dropdown","minimal","jsx","native","Button","inputStyles","input","trigger","undefined","currentValue","panel","Input","List","length","isSelected","group","empty"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/_dropdown/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { Children, isValidElement, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '@/components/button';\nimport { type IconName, iconSVG } from '@/components/icon/icons';\nimport { Input } from '@/components/input';\nimport inputStyles from '@/components/input/styles.module.css';\nimport { List } from '@/components/list';\nimport { Select, type SelectProps } from '@/components/select';\nimport { sanitizeSelectProps } from '@/components/select/sanitizeSelectProps';\nimport { resolveColor } from '@/utils';\n\nimport styles from './styles.module.css';\n\ntype NativeSelectProps = Omit<React.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {\n  children: React.ReactNode;\n  multiple?: false;\n};\n\ntype NativeSelectElement = React.ReactElement<NativeSelectProps, 'select'>;\ntype WrappedSelectElement = React.ReactElement<SelectProps, typeof Select>;\ntype DropdownSelectElement = NativeSelectElement | WrappedSelectElement;\n\ntype DropdownOption = {\n  disabled: boolean;\n  groupLabel?: string;\n  hidden: boolean;\n  isPlaceholder: boolean;\n  label: React.ReactNode;\n  selected: boolean;\n  text: string;\n  value: string;\n};\n\nexport type DropdownProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {\n  children: DropdownSelectElement;\n  emptyLabel?: string;\n  searchPlaceholder?: string;\n  variant?: 'default' | 'minimal';\n};\n\ntype withVars = React.CSSProperties & {\n  '--icon-svg'?: string;\n};\n\nfunction getIconWithVars(icon: IconName, color: string): withVars {\n  return {\n    '--icon-svg': iconSVG(icon).replace('currentColor', color),\n  };\n}\n\nfunction getNodeText(node: React.ReactNode): string {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(getNodeText).join(' ');\n  }\n\n  if (isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n\n  return '';\n}\n\nfunction isOptionElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'option'>, 'option'> {\n  return isValidElement(node) && node.type === 'option';\n}\n\nfunction isOptGroupElement(\n  node: React.ReactNode\n): node is React.ReactElement<React.ComponentPropsWithoutRef<'optgroup'>, 'optgroup'> {\n  return isValidElement(node) && node.type === 'optgroup';\n}\n\nfunction isFragmentElement(\n  node: React.ReactNode\n): node is React.ReactElement<{ children?: React.ReactNode }, typeof React.Fragment> {\n  return isValidElement(node) && node.type === React.Fragment;\n}\n\nfunction isWrappedSelectElement(node: React.ReactNode): node is WrappedSelectElement {\n  return isValidElement(node) && node.type === Select;\n}\n\nfunction extractOptions(\n  children: React.ReactNode,\n  groupLabel?: string,\n  groupDisabled = false\n): DropdownOption[] {\n  const options: DropdownOption[] = [];\n\n  Children.forEach(children, (child) => {\n    if (isFragmentElement(child)) {\n      options.push(...extractOptions(child.props.children, groupLabel, groupDisabled));\n      return;\n    }\n\n    if (isOptionElement(child)) {\n      const text = getNodeText(child.props.children).trim();\n      const value = child.props.value != null ? String(child.props.value) : text;\n\n      options.push({\n        disabled: groupDisabled || Boolean(child.props.disabled),\n        groupLabel,\n        hidden: Boolean(child.props.hidden),\n        isPlaceholder: Boolean(child.props.hidden && value === ''),\n        label: child.props.children,\n        selected: Boolean(child.props.selected),\n        text,\n        value,\n      });\n\n      return;\n    }\n\n    if (isOptGroupElement(child)) {\n      options.push(\n        ...extractOptions(\n          child.props.children,\n          child.props.label,\n          groupDisabled || Boolean(child.props.disabled)\n        )\n      );\n    }\n  });\n\n  return options;\n}\n\nfunction buildWildcardMatcher(query: string) {\n  const trimmedQuery = query.trim();\n\n  if (!trimmedQuery) {\n    return null;\n  }\n\n  const wildcardQuery = /[*?]/.test(trimmedQuery) ? trimmedQuery : `*${trimmedQuery}*`;\n  const expression = [...wildcardQuery]\n    .map((character) => {\n      if (character === '*') {\n        return '.*';\n      }\n\n      if (character === '?') {\n        return '.';\n      }\n\n      return character.replace(/[|\\\\{}()[\\]^$+.,]/g, '\\\\$&');\n    })\n    .join('');\n\n  return new RegExp(`^${expression}$`, 'i');\n}\n\nfunction filterOptions(options: DropdownOption[], query: string) {\n  const matcher = buildWildcardMatcher(query);\n  const selectableOptions = options.filter((option) => !option.hidden && !option.isPlaceholder);\n\n  if (!matcher) {\n    return selectableOptions;\n  }\n\n  return selectableOptions.filter((option) =>\n    matcher.test([option.groupLabel, option.text, option.value].filter(Boolean).join(' '))\n  );\n}\n\nfunction getDisplayOption(options: DropdownOption[], selectedValue: string) {\n  return (\n    options.find((option) => option.value === selectedValue) ??\n    options.find((option) => option.isPlaceholder) ??\n    options[0]\n  );\n}\n\nfunction getInitialValue(\n  options: DropdownOption[],\n  value?: NativeSelectProps['value'],\n  defaultValue?: NativeSelectProps['defaultValue']\n) {\n  if (value != null) {\n    return String(value);\n  }\n\n  if (defaultValue != null) {\n    return String(defaultValue);\n  }\n\n  const selectedOption = options.find((option) => option.selected);\n\n  if (selectedOption) {\n    return selectedOption.value;\n  }\n\n  return options[0]?.value ?? '';\n}\n\nfunction normalizeSelectElement(selectElement: DropdownSelectElement) {\n  if (isWrappedSelectElement(selectElement)) {\n    const { children, placeholder, ...props } = selectElement.props;\n\n    return {\n      children: (\n        <>\n          {placeholder && (\n            <option\n              hidden\n              value=''\n            >\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </>\n      ),\n      props,\n    };\n  }\n\n  return {\n    children: selectElement.props.children,\n    props: selectElement.props,\n  };\n}\n\nexport const Dropdown = ({\n  children: selectElement,\n  className,\n  emptyLabel = 'No matches found',\n  searchPlaceholder = 'Filter',\n  variant = 'default',\n  ...props\n}: DropdownProps) => {\n  const normalizedSelect = normalizeSelectElement(selectElement);\n  const { defaultValue, onChange, value, ...restSelectProps } = normalizedSelect.props;\n  const selectProps = sanitizeSelectProps(restSelectProps);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const nativeSelectRef = useRef<HTMLSelectElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const options = extractOptions(normalizedSelect.children);\n  const isControlled = value != null;\n  const initialValue = getInitialValue(options, value, defaultValue);\n  const [internalValue, setInternalValue] = useState(() => initialValue);\n  const [isOpen, setIsOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const selectedValue = isControlled ? String(value) : internalValue;\n  const iconColors = {\n    default: resolveColor('--colors-semantic-content-secondary'),\n    white: resolveColor('--color-white', 'white'),\n  };\n  const dropdownIconColor = variant === 'minimal' ? iconColors.white : iconColors.default;\n  const displayOption = getDisplayOption(options, selectedValue);\n  const triggerWithVars = getIconWithVars('chevron', dropdownIconColor);\n  const filterWithVars = getIconWithVars('search', dropdownIconColor);\n  const filteredOptions = filterOptions(options, query);\n\n  useEffect(() => {\n    if (!isControlled && !options.some((option) => option.value === internalValue)) {\n      setInternalValue(initialValue);\n    }\n  }, [initialValue, internalValue, isControlled, options]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setQuery('');\n      return;\n    }\n\n    searchRef.current?.focus();\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [isOpen]);\n\n  const handleNativeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {\n    if (!isControlled) {\n      setInternalValue(event.target.value);\n    }\n\n    onChange?.(event);\n  };\n\n  const closeMenu = () => {\n    setIsOpen(false);\n    buttonRef.current?.focus();\n  };\n\n  const commitValue = (nextValue: string) => {\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    const nativeSelect = nativeSelectRef.current;\n\n    if (!nativeSelect) {\n      closeMenu();\n      return;\n    }\n\n    const valueSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value')?.set;\n\n    valueSetter?.call(nativeSelect, nextValue);\n    nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));\n    closeMenu();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      closeMenu();\n    }\n  };\n\n  return (\n    <div\n      className={cx(styles.dropdown, variant === 'minimal' && styles.minimal, className)}\n      onKeyDown={handleKeyDown}\n      ref={containerRef}\n      {...props}\n    >\n      <select\n        {...selectProps}\n        aria-hidden='true'\n        className={styles.native}\n        onChange={handleNativeChange}\n        ref={nativeSelectRef}\n        tabIndex={-1}\n        value={selectedValue}\n      >\n        {normalizedSelect.children}\n      </select>\n      <Button\n        aria-expanded={isOpen}\n        aria-haspopup='dialog'\n        className={cx(\n          variant === 'default' && inputStyles.input,\n          styles.trigger,\n          displayOption?.isPlaceholder && styles.placeholder\n        )}\n        data-open={isOpen ? 'true' : undefined}\n        disabled={selectProps.disabled}\n        onClick={() => setIsOpen((currentValue) => !currentValue)}\n        ref={buttonRef}\n        style={triggerWithVars}\n        variant='minimal'\n      >\n        <span className={styles.text}>{displayOption?.label ?? 'Select an option'}</span>\n      </Button>\n      {isOpen && (\n        <div className={styles.panel}>\n          <Input\n            aria-label='Filter'\n            className={styles.filter}\n            icon='search'\n            onChange={(event) => setQuery(event.target.value)}\n            placeholder={searchPlaceholder}\n            ref={searchRef}\n            style={filterWithVars}\n            type='search'\n            value={query}\n          />\n          <List\n            aria-label='Dropdown'\n            className={styles.options}\n          >\n            {filteredOptions.length > 0 ? (\n              filteredOptions.map((option) => {\n                const isSelected = option.value === selectedValue;\n\n                return (\n                  <li key={`${option.groupLabel ?? 'root'}-${option.value}`}>\n                    <Button\n                      aria-label={isSelected ? `${option.text}, selected` : option.text}\n                      className={cx(styles.option, isSelected && styles.selected)}\n                      disabled={option.disabled}\n                      onClick={() => commitValue(option.value)}\n                      variant='minimal'\n                    >\n                      <span className={styles.text}>{option.label}</span>\n                      {option.groupLabel && (\n                        <small className={styles.group}>{option.groupLabel}</small>\n                      )}\n                    </Button>\n                  </li>\n                );\n              })\n            ) : (\n              <li className={styles.empty}>{emptyLabel}</li>\n            )}\n          </List>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["getIconWithVars","icon","color","iconSVG","replace","getNodeText","node","String","Array","isArray","map","join","isValidElement","props","children","isOptionElement","type","isOptGroupElement","isFragmentElement","React","Fragment","isWrappedSelectElement","Select","extractOptions","groupLabel","groupDisabled","options","Children","forEach","child","push","text","trim","value","disabled","Boolean","hidden","isPlaceholder","label","selected","buildWildcardMatcher","query","trimmedQuery","expression","test","character","RegExp","filterOptions","matcher","selectableOptions","filter","option","getDisplayOption","selectedValue","find","getInitialValue","defaultValue","selectedOption","normalizeSelectElement","selectElement","placeholder","jsxs","Dropdown","className","emptyLabel","searchPlaceholder","variant","normalizedSelect","onChange","restSelectProps","selectProps","sanitizeSelectProps","buttonRef","useRef","containerRef","nativeSelectRef","searchRef","isControlled","initialValue","internalValue","setInternalValue","useState","isOpen","setIsOpen","setQuery","iconColors","default","resolveColor","white","dropdownIconColor","displayOption","triggerWithVars","filterWithVars","filteredOptions","useEffect","some","current","focus","handlePointerDown","event","contains","target","document","addEventListener","removeEventListener","handleNativeChange","closeMenu","commitValue","nextValue","nativeSelect","valueSetter","Object","getOwnPropertyDescriptor","HTMLSelectElement","prototype","set","call","dispatchEvent","Event","bubbles","handleKeyDown","key","cx","styles","dropdown","minimal","jsx","native","Button","inputStyles","input","trigger","undefined","currentValue","panel","Input","List","length","isSelected","group","empty"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,SAASA,EAAgBC,GAAgBC,GAAyB;AAChE,SAAO;AAAA,IACL,cAAcC,GAAQF,CAAI,EAAEG,QAAQ,gBAAgBF,CAAK;AAAA,EAAA;AAE7D;AAEA,SAASG,EAAYC,GAA+B;AAClD,SAAI,OAAOA,KAAS,YAAY,OAAOA,KAAS,WACvCC,OAAOD,CAAI,IAGhBE,MAAMC,QAAQH,CAAI,IACbA,EAAKI,IAAIL,CAAW,EAAEM,KAAK,GAAG,IAGnCC,EAA+CN,CAAI,IAC9CD,EAAYC,EAAKO,MAAMC,QAAQ,IAGjC;AACT;AAEA,SAASC,GACPT,GACgF;AAChF,SAAOM,EAAeN,CAAI,KAAKA,EAAKU,SAAS;AAC/C;AAEA,SAASC,GACPX,GACoF;AACpF,SAAOM,EAAeN,CAAI,KAAKA,EAAKU,SAAS;AAC/C;AAEA,SAASE,GACPZ,GACmF;AACnF,SAAOM,EAAeN,CAAI,KAAKA,EAAKU,SAASG,GAAMC;AACrD;AAEA,SAASC,GAAuBf,GAAqD;AACnF,SAAOM,EAAeN,CAAI,KAAKA,EAAKU,SAASM;AAC/C;AAEA,SAASC,EACPT,GACAU,GACAC,IAAgB,IACE;AAClB,QAAMC,IAA4B,CAAA;AAElCC,SAAAA,GAASC,QAAQd,GAAWe,CAAAA,MAAU;AACpC,QAAIX,GAAkBW,CAAK,GAAG;AAC5BH,MAAAA,EAAQI,KAAK,GAAGP,EAAeM,EAAMhB,MAAMC,UAAUU,GAAYC,CAAa,CAAC;AAC/E;AAAA,IACF;AAEA,QAAIV,GAAgBc,CAAK,GAAG;AAC1B,YAAME,IAAO1B,EAAYwB,EAAMhB,MAAMC,QAAQ,EAAEkB,KAAAA,GACzCC,IAAQJ,EAAMhB,MAAMoB,SAAS,OAAO1B,OAAOsB,EAAMhB,MAAMoB,KAAK,IAAIF;AAEtEL,MAAAA,EAAQI,KAAK;AAAA,QACXI,UAAUT,KAAiBU,EAAQN,EAAMhB,MAAMqB;AAAAA,QAC/CV,YAAAA;AAAAA,QACAY,QAAQD,EAAQN,EAAMhB,MAAMuB;AAAAA,QAC5BC,eAAeF,GAAQN,EAAMhB,MAAMuB,UAAUH,MAAU;AAAA,QACvDK,OAAOT,EAAMhB,MAAMC;AAAAA,QACnByB,UAAUJ,EAAQN,EAAMhB,MAAM0B;AAAAA,QAC9BR,MAAAA;AAAAA,QACAE,OAAAA;AAAAA,MAAAA,CACD;AAED;AAAA,IACF;AAEA,IAAIhB,GAAkBY,CAAK,KACzBH,EAAQI,KACN,GAAGP,EACDM,EAAMhB,MAAMC,UACZe,EAAMhB,MAAMyB,OACZb,KAAiBU,EAAQN,EAAMhB,MAAMqB,QACvC,CACF;AAAA,EAEJ,CAAC,GAEMR;AACT;AAEA,SAASc,GAAqBC,GAAe;AAC3C,QAAMC,IAAeD,EAAMT,KAAAA;AAE3B,MAAI,CAACU;AACH,WAAO;AAIT,QAAMC,IAAa,CAAC,GADE,OAAOC,KAAKF,CAAY,IAAIA,IAAe,IAAIA,CAAY,GAC7C,EACjChC,IAAKmC,CAAAA,MACAA,MAAc,MACT,OAGLA,MAAc,MACT,MAGFA,EAAUzC,QAAQ,sBAAsB,MAAM,CACtD,EACAO,KAAK,EAAE;AAEV,SAAO,IAAImC,OAAO,IAAIH,CAAU,KAAK,GAAG;AAC1C;AAEA,SAASI,GAAcrB,GAA2Be,GAAe;AAC/D,QAAMO,IAAUR,GAAqBC,CAAK,GACpCQ,IAAoBvB,EAAQwB,OAAQC,CAAAA,MAAW,CAACA,EAAOf,UAAU,CAACe,EAAOd,aAAa;AAE5F,SAAKW,IAIEC,EAAkBC,OAAQC,CAAAA,MAC/BH,EAAQJ,KAAK,CAACO,EAAO3B,YAAY2B,EAAOpB,MAAMoB,EAAOlB,KAAK,EAAEiB,OAAOf,OAAO,EAAExB,KAAK,GAAG,CAAC,CACvF,IALSsC;AAMX;AAEA,SAASG,GAAiB1B,GAA2B2B,GAAuB;AAC1E,SACE3B,EAAQ4B,KAAMH,CAAAA,MAAWA,EAAOlB,UAAUoB,CAAa,KACvD3B,EAAQ4B,KAAMH,CAAAA,MAAWA,EAAOd,aAAa,KAC7CX,EAAQ,CAAC;AAEb;AAEA,SAAS6B,GACP7B,GACAO,GACAuB,GACA;;AACA,MAAIvB,KAAS;AACX,WAAO1B,OAAO0B,CAAK;AAGrB,MAAIuB,KAAgB;AAClB,WAAOjD,OAAOiD,CAAY;AAG5B,QAAMC,IAAiB/B,EAAQ4B,KAAMH,CAAAA,MAAWA,EAAOZ,QAAQ;AAE/D,SAAIkB,IACKA,EAAexB,UAGjBP,IAAAA,EAAQ,CAAC,MAATA,gBAAAA,EAAYO,UAAS;AAC9B;AAEA,SAASyB,GAAuBC,GAAsC;AACpE,MAAItC,GAAuBsC,CAAa,GAAG;AACzC,UAAM;AAAA,MAAE7C,UAAAA;AAAAA,MAAU8C,aAAAA;AAAAA,MAAa,GAAG/C;AAAAA,IAAAA,IAAU8C,EAAc9C;AAE1D,WAAO;AAAA,MACLC,UACE,gBAAA+C,EAAAzC,GAAA,EACGwC,UAAAA;AAAAA,QAAAA,uBACE,UAAA,EACC,QAAM,IACN,OAAM,IAELA,UAAAA,GACH;AAAA,QAED9C;AAAAA,MAAAA,GACH;AAAA,MAEFD,OAAAA;AAAAA,IAAAA;AAAAA,EAEJ;AAEA,SAAO;AAAA,IACLC,UAAU6C,EAAc9C,MAAMC;AAAAA,IAC9BD,OAAO8C,EAAc9C;AAAAA,EAAAA;AAEzB;AAEO,MAAMiD,KAAWA,CAAC;AAAA,EACvBhD,UAAU6C;AAAAA,EACVI,WAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,mBAAAA,IAAoB;AAAA,EACpBC,SAAAA,IAAU;AAAA,EACV,GAAGrD;AACU,MAAM;AACnB,QAAMsD,IAAmBT,GAAuBC,CAAa,GACvD;AAAA,IAAEH,cAAAA;AAAAA,IAAcY,UAAAA;AAAAA,IAAUnC,OAAAA;AAAAA,IAAO,GAAGoC;AAAAA,EAAAA,IAAoBF,EAAiBtD,OACzEyD,IAAcC,GAAoBF,CAAe,GACjDG,IAAYC,EAA0B,IAAI,GAC1CC,IAAeD,EAAuB,IAAI,GAC1CE,IAAkBF,EAA0B,IAAI,GAChDG,IAAYH,EAAyB,IAAI,GACzC/C,IAAUH,EAAe4C,EAAiBrD,QAAQ,GAClD+D,IAAe5C,KAAS,MACxB6C,IAAevB,GAAgB7B,GAASO,GAAOuB,CAAY,GAC3D,CAACuB,GAAeC,CAAgB,IAAIC,EAAS,MAAMH,CAAY,GAC/D,CAACI,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpC,CAACxC,GAAO2C,CAAQ,IAAIH,EAAS,EAAE,GAC/B5B,IAAgBwB,IAAetE,OAAO0B,CAAK,IAAI8C,GAC/CM,IAAa;AAAA,IACjBC,SAASC,EAAa,qCAAqC;AAAA,IAC3DC,OAAOD,EAAa,iBAAiB,OAAO;AAAA,EAAA,GAExCE,IAAoBvB,MAAY,YAAYmB,EAAWG,QAAQH,EAAWC,SAC1EI,IAAgBtC,GAAiB1B,GAAS2B,CAAa,GACvDsC,IAAkB3F,EAAgB,WAAWyF,CAAiB,GAC9DG,IAAiB5F,EAAgB,UAAUyF,CAAiB,GAC5DI,IAAkB9C,GAAcrB,GAASe,CAAK;AAEpDqD,EAAAA,EAAU,MAAM;AACd,IAAI,CAACjB,KAAgB,CAACnD,EAAQqE,KAAM5C,CAAAA,MAAWA,EAAOlB,UAAU8C,CAAa,KAC3EC,EAAiBF,CAAY;AAAA,EAEjC,GAAG,CAACA,GAAcC,GAAeF,GAAcnD,CAAO,CAAC,GAEvDoE,EAAU,MAAM;;AACd,QAAI,CAACZ,GAAQ;AACXE,MAAAA,EAAS,EAAE;AACX;AAAA,IACF;AAEAR,KAAAA,IAAAA,EAAUoB,YAAVpB,QAAAA,EAAmBqB;AAAAA,EACrB,GAAG,CAACf,CAAM,CAAC,GAEXY,EAAU,MAAM;AACd,QAAI,CAACZ;AACH;AAGF,UAAMgB,IAAoBA,CAACC,MAAsB;;AAC/C,OAAKzB,IAAAA,EAAasB,YAAbtB,QAAAA,EAAsB0B,SAASD,EAAME,WACxClB,EAAU,EAAK;AAAA,IAEnB;AAEAmB,oBAASC,iBAAiB,aAAaL,CAAiB,GAEjD,MAAM;AACXI,eAASE,oBAAoB,aAAaN,CAAiB;AAAA,IAC7D;AAAA,EACF,GAAG,CAAChB,CAAM,CAAC;AAEX,QAAMuB,IAAqBA,CAACN,MAAgD;AAC1E,IAAKtB,KACHG,EAAiBmB,EAAME,OAAOpE,KAAK,GAGrCmC,KAAAA,QAAAA,EAAW+B;AAAAA,EACb,GAEMO,IAAYA,MAAM;;AACtBvB,IAAAA,EAAU,EAAK,IACfX,IAAAA,EAAUwB,YAAVxB,QAAAA,EAAmByB;AAAAA,EACrB,GAEMU,IAAcA,CAACC,MAAsB;;AACzC,IAAK/B,KACHG,EAAiB4B,CAAS;AAG5B,UAAMC,IAAelC,EAAgBqB;AAErC,QAAI,CAACa,GAAc;AACjBH,MAAAA,EAAAA;AACA;AAAA,IACF;AAEA,UAAMI,KAAcC,IAAAA,OAAOC,yBAAyBC,kBAAkBC,WAAW,OAAO,MAApEH,gBAAAA,EAAuEI;AAE3FL,IAAAA,KAAAA,QAAAA,EAAaM,KAAKP,GAAcD,IAChCC,EAAaQ,cAAc,IAAIC,MAAM,UAAU;AAAA,MAAEC,SAAS;AAAA,IAAA,CAAM,CAAC,GACjEb,EAAAA;AAAAA,EACF,GAEMc,IAAgBA,CAACrB,MAA+C;AACpE,IAAIA,EAAMsB,QAAQ,YAChBf,EAAAA;AAAAA,EAEJ;AAEA,2BACG,OAAA,EACC,WAAWgB,EAAGC,EAAOC,UAAU1D,MAAY,aAAayD,EAAOE,SAAS9D,CAAS,GACjF,WAAWyD,GACX,KAAK9C,GACL,GAAI7D,GAAM,kBAAA,YAEV,UAAA;AAAA,IAAA,gBAAAiH,EAAC,eACKxD,GACJ,eAAY,QACZ,WAAWqD,EAAOI,QAClB,UAAUtB,GACV,KAAK9B,GACL,UAAU,IACV,OAAOtB,GAENc,YAAiBrD,UACpB;AAAA,IACA,gBAAAgH,EAACE,KACC,iBAAe9C,GACf,iBAAc,UACd,WAAWwC,EACTxD,MAAY,aAAa+D,GAAYC,OACrCP,EAAOQ,UACPzC,KAAAA,gBAAAA,EAAerD,kBAAiBsF,EAAO/D,WACzC,GACA,aAAWsB,IAAS,SAASkD,QAC7B,UAAU9D,EAAYpC,UACtB,SAAS,MAAMiD,EAAWkD,OAAiB,CAACA,CAAY,GACxD,KAAK7D,GACL,OAAOmB,GACP,SAAQ,WAER,4BAAC,QAAA,EAAK,WAAWgC,EAAO5F,MAAO2D,WAAAA,KAAAA,gBAAAA,EAAepD,UAAS,mBAAA,CAAmB,EAAA,CAC5E;AAAA,IACC4C,KACC,gBAAArB,EAAC,OAAA,EAAI,WAAW8D,EAAOW,OACrB,UAAA;AAAA,MAAA,gBAAAR,EAACS,IAAA,EACC,cAAW,UACX,WAAWZ,EAAOzE,QAClB,MAAK,UACL,UAAWiD,CAAAA,MAAUf,EAASe,EAAME,OAAOpE,KAAK,GAChD,aAAagC,GACb,KAAKW,GACL,OAAOgB,GACP,MAAK,UACL,OAAOnD,EAAAA,CAAM;AAAA,MAEf,gBAAAqF,EAACU,IAAA,EACC,cAAW,YACX,WAAWb,EAAOjG,SAEjBmE,UAAAA,EAAgB4C,SAAS,IACxB5C,EAAgBnF,IAAKyC,CAAAA,MAAW;AAC9B,cAAMuF,IAAavF,EAAOlB,UAAUoB;AAEpC,eACE,gBAAAyE,EAAC,MAAA,EAAyD,kBAAA,YACxD,4BAACE,GAAA,EACC,cAAYU,IAAa,GAAGvF,EAAOpB,IAAI,eAAeoB,EAAOpB,MAC7D,WAAW2F,EAAGC,EAAOxE,QAAQuF,KAAcf,EAAOpF,QAAQ,GAC1D,UAAUY,EAAOjB,UACjB,SAAS,MAAMyE,EAAYxD,EAAOlB,KAAK,GACvC,SAAQ,WAER,UAAA;AAAA,UAAA,gBAAA6F,EAAC,QAAA,EAAK,WAAWH,EAAO5F,MAAOoB,YAAOb,OAAM;AAAA,UAC3Ca,EAAO3B,cACN,gBAAAsG,EAAC,SAAA,EAAM,WAAWH,EAAOgB,OAAQxF,YAAO3B,WAAAA,CAAW;AAAA,QAAA,GAEvD,EAAA,GAZO,GAAG2B,EAAO3B,cAAc,MAAM,IAAI2B,EAAOlB,KAAK,EAavD;AAAA,MAEJ,CAAC,IAED,gBAAA6F,EAAC,MAAA,EAAG,WAAWH,EAAOiB,OAAQ5E,aAAW,EAAA,CAE7C;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/_dropzone/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index23.css');const i=require("react/jsx-runtime"),h=require("../../classix-5H4IWnMA.cjs"),x=require("react"),q=require("../button/index.cjs"),I=require("../icon/index.cjs"),R="_dropzone_1xbnl_1",T="_dragging_1xbnl_18",S="_minimal_1xbnl_22",g={dropzone:R,dragging:T,minimal:S},k=({accepts:z,label:F="Select files",maxFileSize:m,multiple:d=!1,onChange:n,onValidation:a,variant:p="default",...D})=>{const f=x.useRef(null),[y,o]=x.useState(!1),c=e=>{e.preventDefault(),e.stopPropagation()},_=e=>{const t=f.current;if(!t)return;const s=new DataTransfer;for(const r of e)s.items.add(r);t.files=s.files,n==null||n({target:t,currentTarget:t})},v=e=>{const{validFiles:t,emptyFiles:s,oversizedFiles:r}=e.reduce((u,l)=>(l.size===0?u.emptyFiles.push(l):m&&l.size>m?u.oversizedFiles.push(l):u.validFiles.push(l),u),{validFiles:[],emptyFiles:[],oversizedFiles:[]});return(s.length>0||r.length>0)&&(a==null||a(s,r)),t},b=e=>{c(e),o(!1);const t=Array.from(e.dataTransfer.files??[]),s=v(t);if(s.length===0)return;const r=d?s:s.slice(0,1);_(r)},j=e=>{const t=Array.from(e.target.files??[]),s=v(t);if(s.length===t.length){n==null||n(e);return}const r=d?s:s.slice(0,1);_(r)};return i.jsx("div",{className:h.t(g.dropzone,g[p],y&&g.dragging),onDragEnter:e=>{c(e),o(!0)},onDragOver:e=>{c(e),o(!0)},onDragLeave:e=>{c(e),o(!1)},onDrop:b,...D,"data-component":"dropzone",children:i.jsxs("label",{children:[i.jsx("input",{accept:z,hidden:!0,multiple:d,onChange:j,ref:f,type:"file"}),i.jsx(I.Icon,{name:"upload",size:p==="minimal"?"medium":"large"}),i.jsx("br",{}),p!=="minimal"&&i.jsx(q.Button,{onClick:()=>{var e;return(e=f.current)==null?void 0:e.click()},type:"button",children:F})]})})};exports.Dropzone=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index23.css');const i=require("react/jsx-runtime"),b=require("../../classix-5H4IWnMA.cjs"),z=require("react"),q=require("../button/index.cjs"),I=require("../icon/index.cjs"),R="_dropzone_1rpsf_1",T="_dragging_1rpsf_19",S="_minimal_1rpsf_23",g={dropzone:R,dragging:T,minimal:S},k=({accepts:F,label:D="Select files",maxFileSize:m,multiple:d=!1,onChange:n,onValidation:a,variant:p="default",...y})=>{const f=z.useRef(null),[x,l]=z.useState(!1),c=e=>{e.preventDefault(),e.stopPropagation()},_=e=>{const t=f.current;if(!t)return;const s=new DataTransfer;for(const r of e)s.items.add(r);t.files=s.files,n==null||n({target:t,currentTarget:t})},v=e=>{const{validFiles:t,emptyFiles:s,oversizedFiles:r}=e.reduce((u,o)=>(o.size===0?u.emptyFiles.push(o):m&&o.size>m?u.oversizedFiles.push(o):u.validFiles.push(o),u),{validFiles:[],emptyFiles:[],oversizedFiles:[]});return(s.length>0||r.length>0)&&(a==null||a(s,r)),t},j=e=>{c(e),l(!1);const t=Array.from(e.dataTransfer.files??[]),s=v(t);if(s.length===0)return;const r=d?s:s.slice(0,1);_(r)},h=e=>{const t=Array.from(e.target.files??[]),s=v(t);if(s.length===t.length){n==null||n(e);return}const r=d?s:s.slice(0,1);_(r)};return i.jsx("div",{className:b.t(g.dropzone,g[p],x&&g.dragging),onDragEnter:e=>{c(e),l(!0)},onDragOver:e=>{c(e),l(!0)},onDragLeave:e=>{c(e),l(!1)},onDrop:j,...y,"data-component":"dropzone",children:i.jsxs("label",{children:[i.jsx("input",{accept:F,hidden:!0,multiple:d,onChange:h,ref:f,type:"file"}),i.jsx(I.Icon,{name:"upload",size:p==="minimal"?"medium":"large"}),i.jsx("br",{}),p!=="minimal"&&i.jsx(q.Button,{onClick:()=>{var e;return(e=f.current)==null?void 0:e.click()},type:"button",children:D})]})})};exports.Dropzone=k;
 //# sourceMappingURL=index.cjs.map