@mage-ui/components 1.0.66 → 1.0.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/controls/dropdown/Dropdown.d.mts +1 -0
- package/dist/components/controls/dropdown/Dropdown.d.mts.map +1 -1
- package/dist/components/controls/dropdown/Dropdown.mjs +1 -1
- package/dist/components/controls/dropdown/Dropdown.mjs.map +1 -1
- package/dist/components/controls/dropdown/select/Select.d.mts +2 -0
- package/dist/components/controls/dropdown/select/Select.d.mts.map +1 -1
- package/dist/components/controls/dropdown/select/Select.mjs +1 -1
- package/dist/components/controls/dropdown/select/Select.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"mappings":";;;;;;;;KAoBK,cAAA;EAAA,CACF,GAAA;AAAA;AAAA,KAGS,aAAA;EACV,QAAA,EAAU,SAAA;EACV,YAAA;EACA,WAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,OAAA;IACA,MAAA;IACA,KAAA;IACA,MAAA;EAAA;EAEF,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,aAAA;EACT,eAAA,GAAkB,OAAA,CAChB,IAAA,CAAK,uBAAA;IAEL,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,uBAAA;MAGZ,0BAAA;IAAA;EAAA;EAGJ,cAAA;EACA,YAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Dropdown.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"mappings":";;;;;;;;KAoBK,cAAA;EAAA,CACF,GAAA;AAAA;AAAA,KAGS,aAAA;EACV,QAAA,EAAU,SAAA;EACV,YAAA;EACA,WAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,OAAA;IACA,MAAA;IACA,KAAA;IACA,MAAA;EAAA;EAEF,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,aAAA;EACT,eAAA,GAAkB,OAAA,CAChB,IAAA,CAAK,uBAAA;IAEL,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,uBAAA;MAGZ,0BAAA;IAAA;EAAA;EAGJ,cAAA;EACA,YAAA;EACA,eAAA,GAAkB,SAAA;AAAA,IAChB,cAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ScrollAreaAutosize as e}from"../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{DropdownContextProvider as t,useDropdownContext as n}from"./DropdownContextProvider.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropdown as i,dropdownEmpty as a,dropdownOption as o,dropdownOptions as s,dropdownRoot as c,dropdownScrollAreaAutosize as l}from"@mage-ui/styled-system/recipes";import{Combobox as u}from"@mantine/core";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:t,classNames:p,target:m,scrollAreaProps:h,dropdownHeight:g=192,...
|
|
1
|
+
import{ScrollAreaAutosize as e}from"../../misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{DropdownContextProvider as t,useDropdownContext as n}from"./DropdownContextProvider.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropdown as i,dropdownEmpty as a,dropdownOption as o,dropdownOptions as s,dropdownRoot as c,dropdownScrollAreaAutosize as l}from"@mage-ui/styled-system/recipes";import{Combobox as u}from"@mantine/core";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({children:t,classNames:p,target:m,scrollAreaProps:h,dropdownHeight:g=192,dropdownTopSlot:_,...v})=>{let{store:y,setValue:b}=n(),x=Object.fromEntries(Object.entries(v).filter(([e])=>e.startsWith(`data-`))),S=Object.fromEntries(Object.entries(v).filter(([e])=>!e.startsWith(`data-`)));return f(u,{width:`target`,store:y,withinPortal:!0,keepMounted:!1,onOptionSubmit:e=>{b(e)},classNames:{dropdown:r(p?.dropdown??i(),p?.root??c()),options:p?.options??s(),option:p?.option??o(),empty:p?.empty??a(),search:p?.search},...S,children:[d(u.Target,{children:m}),f(u.Dropdown,{...x,children:[_&&_,d(e,{type:`scroll`,mah:g,classNames:{scrollArea:h?.classNames?.dropdownScrollAreaAutosize??l()},...h,children:t})]})]})};function m({options:e,shouldFilter:n=!0,...r}){return d(t,{options:e,shouldFilter:n,children:d(p,{...r})})}m.Options=u.Options,m.Options.displayName=`Dropdown.Options`,m.Option=u.Option,m.Option.displayName=`Dropdown.Option`,m.Empty=u.Empty,m.Empty.displayName=`Dropdown.Empty`,m.Search=u.Search,m.Search.displayName=`Dropdown.Search`,m.EventsTarget=u.EventsTarget,m.EventsTarget.displayName=`Dropdown.EventsTarget`;export{m as Dropdown};
|
|
2
2
|
//# sourceMappingURL=Dropdown.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.mjs","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropdown,\n dropdownEmpty,\n dropdownOption,\n dropdownOptions,\n dropdownRoot,\n dropdownScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox } from '@mantine/core';\n\nimport { ScrollAreaAutosize, type ScrollAreaAutosizeProps } from '../../misc';\nimport {\n DropdownContextProvider,\n type DropdownValue,\n useDropdownContext,\n} from './DropdownContextProvider';\n\ntype DataAttributes = {\n [key: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport type DropdownProps = {\n children: ReactNode;\n withinPortal?: boolean;\n keepMounted?: boolean;\n classNames?: {\n dropdown?: string;\n root?: string;\n options?: string;\n option?: string;\n empty?: string;\n search?: string;\n };\n target: ReactNode;\n options: DropdownValue[];\n scrollAreaProps?: Partial<\n Omit<ScrollAreaAutosizeProps, 'children' | 'classNames'>\n > & {\n classNames?: Omit<\n NonNullable<ScrollAreaAutosizeProps['classNames']>,\n 'scrollArea'\n > & {\n dropdownScrollAreaAutosize?: string;\n };\n };\n dropdownHeight?: number | string;\n shouldFilter?: boolean;\n} & DataAttributes;\n\nconst DropdownContent = ({\n children,\n classNames,\n target,\n scrollAreaProps,\n dropdownHeight = 192,\n ...props\n}: Omit<DropdownProps, 'options'>) => {\n const { store, setValue } = useDropdownContext();\n const dataAttributes = Object.fromEntries(\n Object.entries(props).filter(([key]) => key.startsWith('data-')),\n ) as DataAttributes;\n const comboboxProps = Object.fromEntries(\n Object.entries(props).filter(([key]) => !key.startsWith('data-')),\n );\n\n return (\n <MantineCombobox\n width='target'\n store={store}\n withinPortal={true}\n keepMounted={false}\n onOptionSubmit={(option) => {\n setValue(option);\n }}\n classNames={{\n dropdown: cx(\n classNames?.dropdown ?? dropdown(),\n classNames?.root ?? dropdownRoot(),\n ),\n options: classNames?.options ?? dropdownOptions(),\n option: classNames?.option ?? dropdownOption(),\n empty: classNames?.empty ?? dropdownEmpty(),\n search: classNames?.search,\n }}\n {...comboboxProps}\n >\n <MantineCombobox.Target>{target}</MantineCombobox.Target>\n <MantineCombobox.Dropdown {...dataAttributes}>\n <ScrollAreaAutosize\n type='scroll'\n mah={dropdownHeight}\n classNames={{\n scrollArea:\n scrollAreaProps?.classNames?.dropdownScrollAreaAutosize ??\n dropdownScrollAreaAutosize(),\n }}\n {...scrollAreaProps}\n >\n {children}\n </ScrollAreaAutosize>\n </MantineCombobox.Dropdown>\n </MantineCombobox>\n );\n};\n\nexport function Dropdown({\n options,\n shouldFilter = true,\n ...props\n}: DropdownProps) {\n return (\n <DropdownContextProvider options={options} shouldFilter={shouldFilter}>\n <DropdownContent {...props} />\n </DropdownContextProvider>\n );\n}\n\nDropdown.Options = MantineCombobox.Options;\nDropdown.Options.displayName = 'Dropdown.Options';\nDropdown.Option = MantineCombobox.Option;\nDropdown.Option.displayName = 'Dropdown.Option';\nDropdown.Empty = MantineCombobox.Empty;\nDropdown.Empty.displayName = 'Dropdown.Empty';\nDropdown.Search = MantineCombobox.Search;\nDropdown.Search.displayName = 'Dropdown.Search';\nDropdown.EventsTarget = MantineCombobox.EventsTarget;\nDropdown.EventsTarget.displayName = 'Dropdown.EventsTarget';\n"],"mappings":"+
|
|
1
|
+
{"version":3,"file":"Dropdown.mjs","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropdown,\n dropdownEmpty,\n dropdownOption,\n dropdownOptions,\n dropdownRoot,\n dropdownScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox } from '@mantine/core';\n\nimport { ScrollAreaAutosize, type ScrollAreaAutosizeProps } from '../../misc';\nimport {\n DropdownContextProvider,\n type DropdownValue,\n useDropdownContext,\n} from './DropdownContextProvider';\n\ntype DataAttributes = {\n [key: `data-${string}`]: string | number | boolean | undefined;\n};\n\nexport type DropdownProps = {\n children: ReactNode;\n withinPortal?: boolean;\n keepMounted?: boolean;\n classNames?: {\n dropdown?: string;\n root?: string;\n options?: string;\n option?: string;\n empty?: string;\n search?: string;\n };\n target: ReactNode;\n options: DropdownValue[];\n scrollAreaProps?: Partial<\n Omit<ScrollAreaAutosizeProps, 'children' | 'classNames'>\n > & {\n classNames?: Omit<\n NonNullable<ScrollAreaAutosizeProps['classNames']>,\n 'scrollArea'\n > & {\n dropdownScrollAreaAutosize?: string;\n };\n };\n dropdownHeight?: number | string;\n shouldFilter?: boolean;\n dropdownTopSlot?: ReactNode;\n} & DataAttributes;\n\nconst DropdownContent = ({\n children,\n classNames,\n target,\n scrollAreaProps,\n dropdownHeight = 192,\n dropdownTopSlot,\n ...props\n}: Omit<DropdownProps, 'options'>) => {\n const { store, setValue } = useDropdownContext();\n const dataAttributes = Object.fromEntries(\n Object.entries(props).filter(([key]) => key.startsWith('data-')),\n ) as DataAttributes;\n const comboboxProps = Object.fromEntries(\n Object.entries(props).filter(([key]) => !key.startsWith('data-')),\n );\n\n return (\n <MantineCombobox\n width='target'\n store={store}\n withinPortal={true}\n keepMounted={false}\n onOptionSubmit={(option) => {\n setValue(option);\n }}\n classNames={{\n dropdown: cx(\n classNames?.dropdown ?? dropdown(),\n classNames?.root ?? dropdownRoot(),\n ),\n options: classNames?.options ?? dropdownOptions(),\n option: classNames?.option ?? dropdownOption(),\n empty: classNames?.empty ?? dropdownEmpty(),\n search: classNames?.search,\n }}\n {...comboboxProps}\n >\n <MantineCombobox.Target>{target}</MantineCombobox.Target>\n <MantineCombobox.Dropdown {...dataAttributes}>\n {dropdownTopSlot && dropdownTopSlot}\n <ScrollAreaAutosize\n type='scroll'\n mah={dropdownHeight}\n classNames={{\n scrollArea:\n scrollAreaProps?.classNames?.dropdownScrollAreaAutosize ??\n dropdownScrollAreaAutosize(),\n }}\n {...scrollAreaProps}\n >\n {children}\n </ScrollAreaAutosize>\n </MantineCombobox.Dropdown>\n </MantineCombobox>\n );\n};\n\nexport function Dropdown({\n options,\n shouldFilter = true,\n ...props\n}: DropdownProps) {\n return (\n <DropdownContextProvider options={options} shouldFilter={shouldFilter}>\n <DropdownContent {...props} />\n </DropdownContextProvider>\n );\n}\n\nDropdown.Options = MantineCombobox.Options;\nDropdown.Options.displayName = 'Dropdown.Options';\nDropdown.Option = MantineCombobox.Option;\nDropdown.Option.displayName = 'Dropdown.Option';\nDropdown.Empty = MantineCombobox.Empty;\nDropdown.Empty.displayName = 'Dropdown.Empty';\nDropdown.Search = MantineCombobox.Search;\nDropdown.Search.displayName = 'Dropdown.Search';\nDropdown.EventsTarget = MantineCombobox.EventsTarget;\nDropdown.EventsTarget.displayName = 'Dropdown.EventsTarget';\n"],"mappings":"+eAqDA,MAAM,GAAmB,CACvB,WACA,aACA,SACA,kBACA,iBAAiB,IACjB,kBACA,GAAG,KACiC,CACpC,GAAM,CAAE,QAAO,YAAa,GAAoB,CAC1C,EAAiB,OAAO,YAC5B,OAAO,QAAQ,EAAM,CAAC,QAAQ,CAAC,KAAS,EAAI,WAAW,QAAQ,CAAC,CACjE,CACK,EAAgB,OAAO,YAC3B,OAAO,QAAQ,EAAM,CAAC,QAAQ,CAAC,KAAS,CAAC,EAAI,WAAW,QAAQ,CAAC,CAClE,CAED,OACE,EAACA,EAAAA,CACC,MAAM,SACC,QACP,aAAc,GACd,YAAa,GACb,eAAiB,GAAW,CAC1B,EAAS,EAAO,EAElB,WAAY,CACV,SAAU,EACR,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,QAAS,GAAY,SAAW,GAAiB,CACjD,OAAQ,GAAY,QAAU,GAAgB,CAC9C,MAAO,GAAY,OAAS,GAAe,CAC3C,OAAQ,GAAY,OACrB,CACD,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,EAAA,CAAgC,CACzD,EAACA,EAAgB,SAAA,CAAS,GAAI,YAC3B,GAAmB,EACpB,EAAC,EAAA,CACC,KAAK,SACL,IAAK,EACL,WAAY,CACV,WACE,GAAiB,YAAY,4BAC7B,GAA4B,CAC/B,CACD,GAAI,EAEH,YACkB,CAAA,EACI,CAAA,EACX,EAItB,SAAgB,EAAS,CACvB,UACA,eAAe,GACf,GAAG,GACa,CAChB,OACE,EAAC,EAAA,CAAiC,UAAuB,wBACvD,EAAC,EAAA,CAAgB,GAAI,EAAA,CAAS,EACN,CAI9B,EAAS,QAAUA,EAAgB,QACnC,EAAS,QAAQ,YAAc,mBAC/B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,MAAQA,EAAgB,MACjC,EAAS,MAAM,YAAc,iBAC7B,EAAS,OAASA,EAAgB,OAClC,EAAS,OAAO,YAAc,kBAC9B,EAAS,aAAeA,EAAgB,aACxC,EAAS,aAAa,YAAc"}
|
|
@@ -8,6 +8,7 @@ import { ReactNode } from "react";
|
|
|
8
8
|
type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
|
|
9
9
|
label?: string;
|
|
10
10
|
placeholder?: string;
|
|
11
|
+
clearable?: boolean;
|
|
11
12
|
clearButtonText?: string;
|
|
12
13
|
emptyText?: string;
|
|
13
14
|
searchable?: boolean;
|
|
@@ -25,6 +26,7 @@ type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
|
|
|
25
26
|
declare const Select: ({
|
|
26
27
|
label,
|
|
27
28
|
placeholder,
|
|
29
|
+
clearable,
|
|
28
30
|
clearButtonText,
|
|
29
31
|
emptyText,
|
|
30
32
|
searchable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"mappings":";;;;;;;KAsCY,WAAA,GAAc,IAAA,CACxB,aAAA;EAGA,KAAA;EACA,WAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,UAAA;EAAA,GAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Select.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"mappings":";;;;;;;KAsCY,WAAA,GAAc,IAAA,CACxB,aAAA;EAGA,KAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAYpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j
|
|
1
|
+
import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!0,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,classNames:V,...H})=>{let{target:U,scrollArea:W,...G}=V||{},{clearButton:K,chevron:q,...J}=U||{},Y=I??(L?`No results`:void 0),X={placeholder:N,label:M,clearable:P,readOnly:!0,closeOnBlur:!L,classNames:{dropdownTextInput:J?.dropdownTextInput??S(),root:J?.root??O(),label:J?.label??E(),description:J?.description??C(),error:J?.error??w(),wrapper:J?.wrapper??A(),input:J?.input??T(),section:J?.section??k(),required:J?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:K?.clearButton??l(),root:K?.root??p(),icon:K?.icon??u(),iconRaw:{iconRaw:K?.iconRaw?.iconRaw??d(),root:K?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:q?.chevron??a(),root:q?.root??c(),open:{iconRaw:q?.open?.iconRaw??o(),root:q?.open?.root??s()},close:{iconRaw:q?.close?.iconRaw??o(),root:q?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:G?.dropdown??i(),root:G?.root??_(),options:G?.options??g(),option:G?.option??h(),empty:G?.empty??m(),search:G?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:W?.dropdownScrollAreaAutosize??v()}},target:j(n,{...X}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...H,children:j(t,{emptyProps:{emptyText:Y,classNames:{empty:G?.empty??m()}},creatableProps:{creatable:!1}})})};export{M as Select};
|
|
2
2
|
//# sourceMappingURL=Select.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n select,\n selectChevron,\n selectChevronIcon,\n selectChevronIconRoot,\n selectChevronRoot,\n selectClearButton,\n selectClearButtonIcon,\n selectClearButtonIconRaw,\n selectClearButtonIconRawRoot,\n selectClearButtonRoot,\n selectEmpty,\n selectOption,\n selectOptions,\n selectRoot,\n selectScrollAreaAutosize,\n selectSearchInput,\n selectSearchSection,\n selectSearchWrapper,\n selectTextInput,\n selectTextInputDescription,\n selectTextInputError,\n selectTextInputInput,\n selectTextInputLabel,\n selectTextInputRequired,\n selectTextInputRoot,\n selectTextInputSection,\n selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n DropdownProps,\n 'children' | 'classNames' | 'target'\n> & {\n label?: string;\n placeholder?: string;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n classNames?: DropdownProps['classNames'] & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Select = ({\n label,\n placeholder,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n classNames,\n ...props\n}: SelectProps) => {\n const {\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n const resolvedEmptyText =\n emptyText ?? (searchable ? 'No results' : undefined);\n\n const targetProps = {\n placeholder,\n label,\n readOnly: true,\n closeOnBlur: !searchable,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n root: restTargetClassNames?.root ?? selectTextInputRoot(),\n label: restTargetClassNames?.label ?? selectTextInputLabel(),\n description:\n restTargetClassNames?.description ?? selectTextInputDescription(),\n error: restTargetClassNames?.error ?? selectTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n input: restTargetClassNames?.input ?? selectTextInputInput(),\n section: restTargetClassNames?.section ?? selectTextInputSection(),\n required: restTargetClassNames?.required ?? selectTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n selectClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n selectClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? selectChevron(),\n root: chevronClassNames?.root ?? selectChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n data-searchable={searchable}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? select(),\n root: dropdownClassNames?.root ?? selectRoot(),\n options: dropdownClassNames?.options ?? selectOptions(),\n option: dropdownClassNames?.option ?? selectOption(),\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n selectScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n {
|
|
1
|
+
{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n select,\n selectChevron,\n selectChevronIcon,\n selectChevronIconRoot,\n selectChevronRoot,\n selectClearButton,\n selectClearButtonIcon,\n selectClearButtonIconRaw,\n selectClearButtonIconRawRoot,\n selectClearButtonRoot,\n selectEmpty,\n selectOption,\n selectOptions,\n selectRoot,\n selectScrollAreaAutosize,\n selectSearchInput,\n selectSearchSection,\n selectSearchWrapper,\n selectTextInput,\n selectTextInputDescription,\n selectTextInputError,\n selectTextInputInput,\n selectTextInputLabel,\n selectTextInputRequired,\n selectTextInputRoot,\n selectTextInputSection,\n selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n DropdownProps,\n 'children' | 'classNames' | 'target'\n> & {\n label?: string;\n placeholder?: string;\n clearable?: boolean;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n classNames?: DropdownProps['classNames'] & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Select = ({\n label,\n placeholder,\n clearable = true,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n classNames,\n ...props\n}: SelectProps) => {\n const {\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n const resolvedEmptyText =\n emptyText ?? (searchable ? 'No results' : undefined);\n\n const targetProps = {\n placeholder,\n label,\n clearable,\n readOnly: true,\n closeOnBlur: !searchable,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n root: restTargetClassNames?.root ?? selectTextInputRoot(),\n label: restTargetClassNames?.label ?? selectTextInputLabel(),\n description:\n restTargetClassNames?.description ?? selectTextInputDescription(),\n error: restTargetClassNames?.error ?? selectTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n input: restTargetClassNames?.input ?? selectTextInputInput(),\n section: restTargetClassNames?.section ?? selectTextInputSection(),\n required: restTargetClassNames?.required ?? selectTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n selectClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n selectClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? selectChevron(),\n root: chevronClassNames?.root ?? selectChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n data-searchable={searchable}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? select(),\n root: dropdownClassNames?.root ?? selectRoot(),\n options: dropdownClassNames?.options ?? selectOptions(),\n option: dropdownClassNames?.option ?? selectOption(),\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n selectScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n dropdownTopSlot={\n searchable && (\n <SelectSearch\n searchPlaceholder={searchPlaceholder}\n startSlot={searchStartSlot}\n classNames={{\n input: searchClassNames?.input ?? selectSearchInput(),\n wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n section: searchClassNames?.section ?? selectSearchSection(),\n }}\n />\n )\n }\n {...props}\n >\n <ComboboxOptions\n emptyProps={{\n emptyText: resolvedEmptyText,\n classNames: {\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n },\n }}\n creatableProps={{\n creatable: false,\n }}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s8BA8DA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAA,CACC,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,EAAA,CAAe,GAAI,EAAA,CAAe,CAC3C,gBACE,GACE,EAAC,EAAA,CACoB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,EACD,CAGN,GAAI,WAEJ,EAAC,EAAA,CACC,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,EACD,EACO"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.67",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.20.3",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/preset": "1.0.
|
|
28
|
+
"@mage-ui/preset": "1.0.67",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|