@mage-ui/components 1.0.101 → 1.0.103
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/DropdownContextProvider.mjs +1 -1
- package/dist/components/controls/dropdown/DropdownContextProvider.mjs.map +1 -1
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts +4 -0
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts.map +1 -1
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs +1 -1
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs.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/dist/components/forms/controls/FormAutocomplete.d.mts +1 -1
- package/dist/components/forms/controls/FormAutocomplete.mjs +1 -1
- package/dist/components/forms/controls/FormAutocomplete.mjs.map +1 -1
- package/dist/components/forms/controls/FormCombobox.d.mts +1 -1
- package/dist/components/forms/controls/FormCombobox.mjs +1 -1
- package/dist/components/forms/controls/FormCombobox.mjs.map +1 -1
- package/dist/components/forms/controls/FormSelect.d.mts +1 -1
- package/dist/components/forms/controls/FormSelect.d.mts.map +1 -1
- package/dist/components/forms/controls/FormSelect.mjs +1 -1
- package/dist/components/forms/controls/FormSelect.mjs.map +1 -1
- package/dist/components/forms/controls/register-components.mjs +1 -1
- package/dist/components/forms/controls/register-components.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;EACA,eAAA,GAAkB,SAAA;EAClB,YAAA,GAAe,aAAA;EACf,QAAA,IAAY,KAAA,EAAO,aAAA;AAAA,IACjB,cAAA"}
|
|
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;EAClB,YAAA,GAAe,aAAA;EACf,KAAA,GAAQ,aAAA;EACR,QAAA,IAAY,KAAA,EAAO,aAAA;AAAA,IACjB,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,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:
|
|
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(e){let n=`value`in e,{value:r,options:i,shouldFilter:a=!0,defaultValue:o,onChange:s,...c}=e;return d(t,{options:i,shouldFilter:a,defaultValue:o,value:r,onChange:s,isControlled:n,children:d(p,{...c})})}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 dropdownTopSlot?: ReactNode;\n defaultValue?: DropdownValue;\n onChange?: (value: DropdownValue) => void;\n} & DataAttributes;\n\nconst DropdownContent = ({\n children,\n classNames,\n target,\n scrollAreaProps,\n dropdownHeight = 192,\n dropdownTopSlot,\n ...props\n}: Omit<DropdownProps, 'options' | 'defaultValue' | 'onChange'>) => {\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
|
|
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 defaultValue?: DropdownValue;\n value?: DropdownValue;\n onChange?: (value: DropdownValue) => void;\n} & DataAttributes;\n\nconst DropdownContent = ({\n children,\n classNames,\n target,\n scrollAreaProps,\n dropdownHeight = 192,\n dropdownTopSlot,\n ...props\n}: Omit<DropdownProps, 'options' | 'defaultValue' | 'value' | 'onChange'>) => {\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(dropdownProps: DropdownProps) {\n const isControlled = 'value' in dropdownProps;\n const {\n value,\n options,\n shouldFilter = true,\n defaultValue,\n onChange,\n ...props\n } = dropdownProps;\n\n return (\n <DropdownContextProvider\n options={options}\n shouldFilter={shouldFilter}\n defaultValue={defaultValue}\n value={value}\n onChange={onChange}\n isControlled={isControlled}\n >\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":"+eAwDA,MAAM,GAAmB,CACvB,WACA,aACA,SACA,kBACA,iBAAiB,IACjB,kBACA,GAAG,KACyE,CAC5E,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,EAAD,CACE,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,WAlBN,CAoBE,EAACA,EAAgB,OAAjB,CAAA,SAAyB,EAAgC,CAAA,CACzD,EAACA,EAAgB,SAAjB,CAA0B,GAAI,WAA9B,CACG,GAAmB,EACpB,EAAC,EAAD,CACE,KAAK,SACL,IAAK,EACL,WAAY,CACV,WACE,GAAiB,YAAY,4BAC7B,GAA4B,CAC/B,CACD,GAAI,EAEH,WACkB,CAAA,CACI,GACX,IAItB,SAAgB,EAAS,EAA8B,CACrD,IAAM,EAAe,UAAW,EAC1B,CACJ,QACA,UACA,eAAe,GACf,eACA,WACA,GAAG,GACD,EAEJ,OACE,EAAC,EAAD,CACW,UACK,eACA,eACP,QACG,WACI,wBAEd,EAAC,EAAD,CAAiB,GAAI,EAAS,CAAA,CACN,CAAA,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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useCombobox as e}from"@mantine/core";import{jsx as t}from"react/jsx-runtime";import{createContext as n,useContext as r,useState as i}from"react";const a=n({store:{},value:
|
|
1
|
+
import{useCombobox as e}from"@mantine/core";import{jsx as t}from"react/jsx-runtime";import{createContext as n,useContext as r,useState as i}from"react";const a={id:``,value:``},o=n({store:{},value:a,query:void 0,setValue:()=>{},setQuery:()=>{},options:[]});function s(){let e=r(o);if(!e)throw Error(`useDropdownContext must be used within DropdownContextProvider`);return e}function c({children:n,options:r,shouldFilter:s=!0,defaultValue:c,value:l,onChange:u,isControlled:d=!1}){let[f,p]=i(void 0),[m,h]=i(l??c??a),g=d?l??a:m,_=e({scrollBehavior:`smooth`,onDropdownClose:()=>_.resetSelectedOption()}),v=f&&s?r.filter(e=>e.value?.toString().toLowerCase().trim().includes(f.toLowerCase().trim())):r;return t(o.Provider,{value:{store:_,value:g,setValue:e=>{let t=r.find(t=>t.value?.toString()===e),n;n=e&&!t?{id:``,value:e}:t??a,d||h(n),u?.(n),p(void 0),_.closeDropdown()},query:f,setQuery:p,options:v},children:n})}export{c as DropdownContextProvider,s as useDropdownContext};
|
|
2
2
|
//# sourceMappingURL=DropdownContextProvider.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownContextProvider.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownContextProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\n\nimport { type ComboboxStore, useCombobox } from '@mantine/core';\n\nexport type DropdownValue = {\n id: string | number;\n value: string | number | undefined | null;\n render?: ReactNode;\n};\n\ntype DropdownContextType = {\n store: ComboboxStore;\n value: DropdownValue;\n setValue: (value: string | undefined) => void;\n query: string | undefined;\n setQuery: (query: string | undefined) => void;\n options: DropdownValue[];\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n store: {} as ComboboxStore,\n value:
|
|
1
|
+
{"version":3,"file":"DropdownContextProvider.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownContextProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\n\nimport { type ComboboxStore, useCombobox } from '@mantine/core';\n\nexport type DropdownValue = {\n id: string | number;\n value: string | number | undefined | null;\n render?: ReactNode;\n};\n\ntype DropdownContextType = {\n store: ComboboxStore;\n value: DropdownValue;\n setValue: (value: string | undefined) => void;\n query: string | undefined;\n setQuery: (query: string | undefined) => void;\n options: DropdownValue[];\n};\n\nconst EMPTY_DROPDOWN_VALUE: DropdownValue = {\n id: '',\n value: '',\n};\n\nconst DropdownContext = createContext<DropdownContextType>({\n store: {} as ComboboxStore,\n value: EMPTY_DROPDOWN_VALUE,\n query: undefined,\n setValue: () => {},\n setQuery: () => {},\n options: [],\n});\n\nexport function useDropdownContext(): DropdownContextType {\n const ctx = useContext(DropdownContext);\n if (!ctx) {\n throw new Error(\n 'useDropdownContext must be used within DropdownContextProvider',\n );\n }\n\n return ctx;\n}\n\nexport function DropdownContextProvider({\n children,\n options,\n shouldFilter = true,\n defaultValue,\n value,\n onChange,\n isControlled = false,\n}: {\n children: ReactNode;\n options: DropdownValue[];\n shouldFilter?: boolean;\n defaultValue?: DropdownValue;\n value?: DropdownValue;\n onChange?: (value: DropdownValue) => void;\n isControlled?: boolean;\n}) {\n const [query, setQuery] = useState<string | undefined>(undefined);\n const [uncontrolledValue, setUncontrolledValue] = useState<DropdownValue>(\n value ?? defaultValue ?? EMPTY_DROPDOWN_VALUE,\n );\n const selectedValue = isControlled\n ? (value ?? EMPTY_DROPDOWN_VALUE)\n : uncontrolledValue;\n\n const store = useCombobox({\n scrollBehavior: 'smooth',\n onDropdownClose: () => store.resetSelectedOption(),\n });\n\n const filteredOptions =\n query && shouldFilter\n ? options.filter((item) =>\n item.value\n ?.toString()\n .toLowerCase()\n .trim()\n .includes(query.toLowerCase().trim()),\n )\n : options;\n\n const handleValueChange = (nextValue: string | undefined) => {\n const option = options.find(\n (option) => option.value?.toString() === nextValue,\n );\n\n let resolvedValue: DropdownValue;\n if (nextValue && !option) {\n resolvedValue = { id: '', value: nextValue };\n } else {\n resolvedValue = option ?? EMPTY_DROPDOWN_VALUE;\n }\n\n if (!isControlled) {\n setUncontrolledValue(resolvedValue);\n }\n\n onChange?.(resolvedValue);\n\n setQuery(undefined);\n store.closeDropdown();\n };\n\n return (\n <DropdownContext.Provider\n value={{\n store,\n value: selectedValue,\n setValue: handleValueChange,\n query,\n setQuery,\n options: filteredOptions,\n }}\n >\n {children}\n </DropdownContext.Provider>\n );\n}\n"],"mappings":"wJAoBA,MAAM,EAAsC,CAC1C,GAAI,GACJ,MAAO,GACR,CAEK,EAAkB,EAAmC,CACzD,MAAO,EAAE,CACT,MAAO,EACP,MAAO,IAAA,GACP,aAAgB,GAChB,aAAgB,GAChB,QAAS,EAAE,CACZ,CAAC,CAEF,SAAgB,GAA0C,CACxD,IAAM,EAAM,EAAW,EAAgB,CACvC,GAAI,CAAC,EACH,MAAU,MACR,iEACD,CAGH,OAAO,EAGT,SAAgB,EAAwB,CACtC,WACA,UACA,eAAe,GACf,eACA,QACA,WACA,eAAe,IASd,CACD,GAAM,CAAC,EAAO,GAAY,EAA6B,IAAA,GAAU,CAC3D,CAAC,EAAmB,GAAwB,EAChD,GAAS,GAAgB,EAC1B,CACK,EAAgB,EACjB,GAAS,EACV,EAEE,EAAQ,EAAY,CACxB,eAAgB,SAChB,oBAAuB,EAAM,qBAAqB,CACnD,CAAC,CAEI,EACJ,GAAS,EACL,EAAQ,OAAQ,GACd,EAAK,OACD,UAAU,CACX,aAAa,CACb,MAAM,CACN,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CACxC,CACD,EAwBN,OACE,EAAC,EAAgB,SAAjB,CACE,MAAO,CACL,QACA,MAAO,EACP,SA3BqB,GAAkC,CAC3D,IAAM,EAAS,EAAQ,KACpB,GAAW,EAAO,OAAO,UAAU,GAAK,EAC1C,CAEG,EACJ,AAGE,EAHE,GAAa,CAAC,EACA,CAAE,GAAI,GAAI,MAAO,EAAW,CAE5B,GAAU,EAGvB,GACH,EAAqB,EAAc,CAGrC,IAAW,EAAc,CAEzB,EAAS,IAAA,GAAU,CACnB,EAAM,eAAe,EASjB,QACA,WACA,QAAS,EACV,CAEA,WACwB,CAAA"}
|
|
@@ -6,6 +6,8 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
|
6
6
|
//#region src/components/controls/dropdown/autocomplete/Autocomplete.d.ts
|
|
7
7
|
type AutocompleteProps = Omit<ComboboxProps, 'options' | 'classNames'> & {
|
|
8
8
|
name: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
error?: string;
|
|
9
11
|
url?: string;
|
|
10
12
|
fetcher: (params: {
|
|
11
13
|
url?: string;
|
|
@@ -23,6 +25,8 @@ type AutocompleteProps = Omit<ComboboxProps, 'options' | 'classNames'> & {
|
|
|
23
25
|
declare const Autocomplete: ({
|
|
24
26
|
name,
|
|
25
27
|
label,
|
|
28
|
+
description,
|
|
29
|
+
error,
|
|
26
30
|
placeholder,
|
|
27
31
|
creatable,
|
|
28
32
|
url,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,WAAA;EACA,KAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAiB1B,iBAAA,KAAiB,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{AutocompleteTarget as n}from"./AutocompleteTarget.mjs";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as
|
|
1
|
+
import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{AutocompleteTarget as n}from"./AutocompleteTarget.mjs";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as s,autocompleteClearButtonRoot as c,autocompleteEmpty as l,autocompleteOption as u,autocompleteOptions as d,autocompleteRoot as f,autocompleteScrollAreaAutosize as ee,autocompleteTextInput as te,autocompleteTextInputDescription as ne,autocompleteTextInputError as p,autocompleteTextInputInput as m,autocompleteTextInputLabel as h,autocompleteTextInputRequired as g,autocompleteTextInputRoot as _,autocompleteTextInputSection as v,autocompleteTextInputWrapper as y}from"@mage-ui/styled-system/recipes";import{jsx as b}from"react/jsx-runtime";import{useState as x}from"react";import{useDebouncedCallback as S}from"@mantine/hooks";import{useQuery as C}from"@tanstack/react-query";const w=({name:w,label:T,description:E,error:D,placeholder:O,creatable:k,url:A,fetcher:j,query:re=``,debounce:M=500,threshold:N=3,clearButtonText:P,createText:F,emptyText:I=`No hay resultados`,classNames:L,...R})=>{let[z,B]=x(re),[V,H]=x(!1),{data:U,isFetching:W}=C({queryKey:[w,A,z],queryFn:()=>j({url:A,query:z}),initialData:[],enabled:z.length>=N}),G=S(e=>{B(e),H(!1)},M),K=e=>{H(!0),G(e)},{creatable:q,empty:J,target:Y,scrollArea:X,...Z}=L||{},{clearButton:Q,...$}=Y||{},ie={placeholder:O,label:T,description:E,error:D,classNames:{dropdownTextInput:$?.dropdownTextInput??te(),root:$?.root??_(),label:$?.label??h(),description:$?.description??ne(),error:$?.error??p(),wrapper:$?.wrapper??y(),input:$?.input??m(),section:$?.section??v(),required:$?.required??g()},clearButtonProps:{label:P,classNames:{clearButton:Q?.clearButton??i(),root:Q?.root??c(),icon:Q?.icon??a(),iconRaw:{iconRaw:Q?.iconRaw?.iconRaw??o(),root:Q?.iconRaw?.root??s()}}}},ae={emptyText:I,classNames:{empty:J?.empty??l()}},oe={creatable:k??!1,createText:F,classNames:q};return b(e,{shouldFilter:!1,classNames:{dropdown:Z?.dropdown??r(),root:Z?.root??f(),options:Z?.options??d(),option:Z?.option??u(),empty:J?.empty??l(),search:Z?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:X?.dropdownScrollAreaAutosize??ee()}},target:b(n,{debounced:K,isLoading:W||V,threshold:N,showEmpty:I!==void 0,...ie}),options:U,...R,children:b(t,{emptyProps:ae,creatableProps:oe})})};export{w as Autocomplete};
|
|
2
2
|
//# sourceMappingURL=Autocomplete.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n autocomplete,\n autocompleteClearButton,\n autocompleteClearButtonIcon,\n autocompleteClearButtonIconRaw,\n autocompleteClearButtonIconRawRoot,\n autocompleteClearButtonRoot,\n autocompleteEmpty,\n autocompleteOption,\n autocompleteOptions,\n autocompleteRoot,\n autocompleteScrollAreaAutosize,\n autocompleteTextInput,\n autocompleteTextInputDescription,\n autocompleteTextInputError,\n autocompleteTextInputInput,\n autocompleteTextInputLabel,\n autocompleteTextInputRequired,\n autocompleteTextInputRoot,\n autocompleteTextInputSection,\n autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n ComboboxProps,\n 'options' | 'classNames'\n> & {\n name: string;\n url?: string;\n fetcher: (params: {\n url?: string;\n query: string;\n }) => Promise<DropdownValue[]>;\n threshold?: number;\n debounce?: number;\n query?: string;\n classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n };\n };\n};\n\nexport const Autocomplete = ({\n name,\n label,\n placeholder,\n creatable,\n url,\n fetcher,\n query = '',\n debounce = 500,\n threshold = 3,\n clearButtonText,\n createText,\n emptyText = 'No hay resultados',\n classNames,\n ...props\n}: AutocompleteProps) => {\n const [searchValue, setSearchValue] = useState(query);\n const [isTyping, setIsTyping] = useState(false);\n\n const { data, isFetching } = useQuery<DropdownValue[]>({\n queryKey: [name, url, searchValue],\n queryFn: () => {\n return fetcher({\n url,\n query: searchValue,\n });\n },\n initialData: [],\n enabled: searchValue.length >= threshold,\n });\n\n const debounced = useDebouncedCallback((value: string) => {\n setSearchValue(value);\n setIsTyping(false);\n }, debounce);\n\n const handleSearch = (value: string) => {\n setIsTyping(true);\n debounced(value);\n };\n\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n description:\n restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n required:\n restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n autocompleteClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n autocompleteClearButtonIconRawRoot(),\n },\n },\n },\n };\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n createText,\n classNames: creatableClassNames,\n };\n\n return (\n <Dropdown\n shouldFilter={false}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n root: dropdownClassNames?.root ?? autocompleteRoot(),\n options: dropdownClassNames?.options ?? autocompleteOptions(),\n option: dropdownClassNames?.option ?? autocompleteOption(),\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n autocompleteScrollAreaAutosize(),\n },\n }}\n target={\n <AutocompleteTarget\n debounced={handleSearch}\n isLoading={isFetching || isTyping}\n threshold={threshold}\n showEmpty={emptyText !== undefined}\n {...targetProps}\n />\n }\n options={data}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n autocomplete,\n autocompleteClearButton,\n autocompleteClearButtonIcon,\n autocompleteClearButtonIconRaw,\n autocompleteClearButtonIconRawRoot,\n autocompleteClearButtonRoot,\n autocompleteEmpty,\n autocompleteOption,\n autocompleteOptions,\n autocompleteRoot,\n autocompleteScrollAreaAutosize,\n autocompleteTextInput,\n autocompleteTextInputDescription,\n autocompleteTextInputError,\n autocompleteTextInputInput,\n autocompleteTextInputLabel,\n autocompleteTextInputRequired,\n autocompleteTextInputRoot,\n autocompleteTextInputSection,\n autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n ComboboxProps,\n 'options' | 'classNames'\n> & {\n name: string;\n description?: string;\n error?: string;\n url?: string;\n fetcher: (params: {\n url?: string;\n query: string;\n }) => Promise<DropdownValue[]>;\n threshold?: number;\n debounce?: number;\n query?: string;\n classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n };\n };\n};\n\nexport const Autocomplete = ({\n name,\n label,\n description,\n error,\n placeholder,\n creatable,\n url,\n fetcher,\n query = '',\n debounce = 500,\n threshold = 3,\n clearButtonText,\n createText,\n emptyText = 'No hay resultados',\n classNames,\n ...props\n}: AutocompleteProps) => {\n const [searchValue, setSearchValue] = useState(query);\n const [isTyping, setIsTyping] = useState(false);\n\n const { data, isFetching } = useQuery<DropdownValue[]>({\n queryKey: [name, url, searchValue],\n queryFn: () => {\n return fetcher({\n url,\n query: searchValue,\n });\n },\n initialData: [],\n enabled: searchValue.length >= threshold,\n });\n\n const debounced = useDebouncedCallback((value: string) => {\n setSearchValue(value);\n setIsTyping(false);\n }, debounce);\n\n const handleSearch = (value: string) => {\n setIsTyping(true);\n debounced(value);\n };\n\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n description,\n error,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n description:\n restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n required:\n restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n autocompleteClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n autocompleteClearButtonIconRawRoot(),\n },\n },\n },\n };\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n createText,\n classNames: creatableClassNames,\n };\n\n return (\n <Dropdown\n shouldFilter={false}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n root: dropdownClassNames?.root ?? autocompleteRoot(),\n options: dropdownClassNames?.options ?? autocompleteOptions(),\n option: dropdownClassNames?.option ?? autocompleteOption(),\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n autocompleteScrollAreaAutosize(),\n },\n }}\n target={\n <AutocompleteTarget\n debounced={handleSearch}\n isLoading={isFetching || isTyping}\n threshold={threshold}\n showEmpty={emptyText !== undefined}\n {...targetProps}\n />\n }\n options={data}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"g/BA0DA,MAAa,GAAgB,CAC3B,OACA,QACA,cACA,QACA,cACA,YACA,MACA,UACA,SAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,CAAC,EAAU,GAAe,EAAS,GAAM,CAEzC,CAAE,OAAM,cAAe,EAA0B,CACrD,SAAU,CAAC,EAAM,EAAK,EAAY,CAClC,YACS,EAAQ,CACb,MACA,MAAO,EACR,CAAC,CAEJ,YAAa,EAAE,CACf,QAAS,EAAY,QAAU,EAChC,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAe,EAAM,CACrB,EAAY,GAAM,EACjB,EAAS,CAEN,EAAgB,GAAkB,CACtC,EAAY,GAAK,CACjB,EAAU,EAAM,EAGZ,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,GAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,IAAuB,CACpE,KAAM,GAAsB,MAAQ,GAA2B,CAC/D,MAAO,GAAsB,OAAS,GAA4B,CAClE,YACE,GAAsB,aAAe,IAAkC,CACzE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,SACE,GAAsB,UAAY,GAA+B,CACpE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAyB,CACjE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAAgC,CAClC,KACE,GAAuB,SAAS,MAChC,GAAoC,CACvC,CACF,CACF,CACF,CAEK,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,GAAmB,CACrD,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,EACb,CAED,OACE,EAAC,EAAD,CACE,aAAc,GACd,WAAY,CACV,SAAU,GAAoB,UAAY,GAAc,CACxD,KAAM,GAAoB,MAAQ,GAAkB,CACpD,QAAS,GAAoB,SAAW,GAAqB,CAC7D,OAAQ,GAAoB,QAAU,GAAoB,CAC1D,MAAO,GAAiB,OAAS,GAAmB,CACpD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,IAAgC,CACnC,CACF,CACD,OACE,EAAC,EAAD,CACE,UAAW,EACX,UAAW,GAAc,EACd,YACX,UAAW,IAAc,IAAA,GACzB,GAAI,GACJ,CAAA,CAEJ,QAAS,EACT,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}
|
|
@@ -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}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!
|
|
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=!1,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,startSlot:V,error:H,classNames:U,...W})=>{let{target:G,scrollArea:K,...q}=U||{},{clearButton:J,chevron:Y,...X}=G||{},Z=I??(L?`No results`:void 0),Q={placeholder:N,label:M,error:H,clearable:P,readOnly:!0,closeOnBlur:!L,startSlot:V,displayQuery:!1,classNames:{dropdownTextInput:X?.dropdownTextInput??S(),root:X?.root??O(),label:X?.label??E(),description:X?.description??C(),error:X?.error??w(),wrapper:X?.wrapper??A(),input:X?.input??T(),section:X?.section??k(),required:X?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:J?.clearButton??l(),root:J?.root??p(),icon:J?.icon??u(),iconRaw:{iconRaw:J?.iconRaw?.iconRaw??d(),root:J?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:Y?.chevron??a(),root:Y?.root??c(),open:{iconRaw:Y?.open?.iconRaw??o(),root:Y?.open?.root??s()},close:{iconRaw:Y?.close?.iconRaw??o(),root:Y?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:q?.dropdown??i(),root:q?.root??_(),options:q?.options??g(),option:q?.option??h(),empty:q?.empty??m(),search:q?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:K?.dropdownScrollAreaAutosize??v()}},target:j(n,{...Q}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...W,children:j(t,{emptyProps:{emptyText:Z,classNames:{empty:q?.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 clearable?: boolean;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n startSlot?: ReactNode;\n error?: string;\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 =
|
|
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 startSlot?: ReactNode;\n error?: string;\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 = false,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n startSlot,\n error,\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 error,\n clearable,\n readOnly: true,\n closeOnBlur: !searchable,\n startSlot,\n displayQuery: false,\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":"s8BAgEA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,QACA,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,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,aAAc,GACd,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,EAAD,CACE,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,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,gBACE,GACE,EAAC,EAAD,CACqB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,CACD,CAAA,CAGN,GAAI,WAEJ,EAAC,EAAD,CACE,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DropdownValue } from "../../controls/dropdown/DropdownContextProvider.mjs";
|
|
2
2
|
import { AutocompleteProps } from "../../controls/dropdown/autocomplete/Autocomplete.mjs";
|
|
3
3
|
//#region src/components/forms/controls/FormAutocomplete.d.ts
|
|
4
|
-
type FormAutocompleteProps = Omit<AutocompleteProps, 'onChange' | 'defaultValue'> & {
|
|
4
|
+
type FormAutocompleteProps = Omit<AutocompleteProps, 'onChange' | 'defaultValue' | 'value'> & {
|
|
5
5
|
$rule?: string;
|
|
6
6
|
error?: string;
|
|
7
7
|
isSubmitting?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Autocomplete as e}from"../../controls/dropdown/autocomplete/Autocomplete.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,render:({field:{onChange:n,value:r}})=>t(e,{name:a,error:o,
|
|
1
|
+
import{Autocomplete as e}from"../../controls/dropdown/autocomplete/Autocomplete.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,...s===void 0?{}:{defaultValue:s},render:({field:{onChange:n,value:r}})=>t(e,{name:a,error:o,value:r,...c,onChange:n})});r.displayName=`Form.Autocomplete`;export{r as FormAutocomplete};
|
|
2
2
|
//# sourceMappingURL=FormAutocomplete.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormAutocomplete.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormAutocomplete.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n Autocomplete,\n type AutocompleteProps,\n} from '@/components/controls/dropdown/autocomplete/Autocomplete';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormAutocompleteProps = Omit<\n AutocompleteProps,\n 'onChange' | 'defaultValue'\n> & {\n $rule?: string;\n error?: string;\n isSubmitting?: boolean;\n defaultValue?: DropdownValue;\n};\n\nexport const FormAutocomplete = ({\n $rule,\n isSubmitting: _isSubmitting,\n name,\n error,\n defaultValue,\n ...props\n}: FormAutocompleteProps) => {\n return (\n <Controller\n name={name}\n render={({ field: { onChange, value } }) => (\n <Autocomplete\n name={name}\n error={error}\n
|
|
1
|
+
{"version":3,"file":"FormAutocomplete.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormAutocomplete.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n Autocomplete,\n type AutocompleteProps,\n} from '@/components/controls/dropdown/autocomplete/Autocomplete';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormAutocompleteProps = Omit<\n AutocompleteProps,\n 'onChange' | 'defaultValue' | 'value'\n> & {\n $rule?: string;\n error?: string;\n isSubmitting?: boolean;\n defaultValue?: DropdownValue;\n};\n\nexport const FormAutocomplete = ({\n $rule,\n isSubmitting: _isSubmitting,\n name,\n error,\n defaultValue,\n ...props\n}: FormAutocompleteProps) => {\n const controllerProps = defaultValue === undefined ? {} : { defaultValue };\n\n return (\n <Controller\n name={name}\n {...controllerProps}\n render={({ field: { onChange, value } }) => (\n <Autocomplete\n name={name}\n error={error}\n value={value}\n {...props}\n onChange={onChange}\n />\n )}\n />\n );\n};\n\nFormAutocomplete.displayName = 'Form.Autocomplete';\n"],"mappings":"0KAkBA,MAAa,GAAoB,CAC/B,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KAKD,EAAC,EAAD,CACQ,OACN,GALoB,IAAiB,IAAA,GAAY,EAAE,CAAG,CAAE,eAAc,CAMtE,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CACQ,OACC,QACA,QACP,GAAI,EACM,WACV,CAAA,CAEJ,CAAA,CAIN,EAAiB,YAAc"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DropdownValue } from "../../controls/dropdown/DropdownContextProvider.mjs";
|
|
2
2
|
import { ComboboxProps } from "../../controls/dropdown/combobox/Combobox.mjs";
|
|
3
3
|
//#region src/components/forms/controls/FormCombobox.d.ts
|
|
4
|
-
type FormComboboxProps = Omit<ComboboxProps, 'onChange' | 'defaultValue'> & {
|
|
4
|
+
type FormComboboxProps = Omit<ComboboxProps, 'onChange' | 'defaultValue' | 'value'> & {
|
|
5
5
|
$rule?: string;
|
|
6
6
|
error?: string;
|
|
7
7
|
isSubmitting?: boolean;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Combobox as e}from"../../controls/dropdown/combobox/Combobox.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,render:({field:{onChange:n,value:r}})=>t(e,{error:o,
|
|
1
|
+
import{Combobox as e}from"../../controls/dropdown/combobox/Combobox.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>t(n,{name:a,...s===void 0?{}:{defaultValue:s},render:({field:{onChange:n,value:r}})=>t(e,{error:o,value:r,...c,onChange:n})});r.displayName=`Form.Combobox`;export{r as FormCombobox};
|
|
2
2
|
//# sourceMappingURL=FormCombobox.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormCombobox.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormCombobox.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n Combobox,\n type ComboboxProps,\n} from '@/components/controls/dropdown/combobox/Combobox';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormComboboxProps = Omit<\n ComboboxProps,\n 'onChange' | 'defaultValue'\n> & {\n $rule?: string;\n error?: string;\n isSubmitting?: boolean;\n name: string;\n defaultValue?: DropdownValue;\n};\n\nexport const FormCombobox = ({\n $rule,\n isSubmitting: _isSubmitting,\n name,\n error,\n defaultValue,\n ...props\n}: FormComboboxProps) => {\n return (\n <Controller\n name={name}\n render={({ field: { onChange, value } }) => (\n <Combobox
|
|
1
|
+
{"version":3,"file":"FormCombobox.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormCombobox.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport {\n Combobox,\n type ComboboxProps,\n} from '@/components/controls/dropdown/combobox/Combobox';\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\n\nexport type FormComboboxProps = Omit<\n ComboboxProps,\n 'onChange' | 'defaultValue' | 'value'\n> & {\n $rule?: string;\n error?: string;\n isSubmitting?: boolean;\n name: string;\n defaultValue?: DropdownValue;\n};\n\nexport const FormCombobox = ({\n $rule,\n isSubmitting: _isSubmitting,\n name,\n error,\n defaultValue,\n ...props\n}: FormComboboxProps) => {\n const controllerProps = defaultValue === undefined ? {} : { defaultValue };\n\n return (\n <Controller\n name={name}\n {...controllerProps}\n render={({ field: { onChange, value } }) => (\n <Combobox error={error} value={value} {...props} onChange={onChange} />\n )}\n />\n );\n};\n\nFormCombobox.displayName = 'Form.Combobox';\n"],"mappings":"8JAmBA,MAAa,GAAgB,CAC3B,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KAKD,EAAC,EAAD,CACQ,OACN,GALoB,IAAiB,IAAA,GAAY,EAAE,CAAG,CAAE,eAAc,CAMtE,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CAAiB,QAAc,QAAO,GAAI,EAAiB,WAAY,CAAA,CAEzE,CAAA,CAIN,EAAa,YAAc"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DropdownValue } from "../../controls/dropdown/DropdownContextProvider.mjs";
|
|
2
2
|
import { SelectProps } from "../../controls/dropdown/select/Select.mjs";
|
|
3
3
|
//#region src/components/forms/controls/FormSelect.d.ts
|
|
4
|
-
type FormSelectProps = Omit<SelectProps, 'onChange' | 'defaultValue'> & {
|
|
4
|
+
type FormSelectProps = Omit<SelectProps, 'onChange' | 'defaultValue' | 'value'> & {
|
|
5
5
|
$rule?: string;
|
|
6
6
|
error?: string;
|
|
7
7
|
isSubmitting?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormSelect.d.mts","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"mappings":";;;KAQY,eAAA,GAAkB,IAAA,
|
|
1
|
+
{"version":3,"file":"FormSelect.d.mts","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"mappings":";;;KAQY,eAAA,GAAkB,IAAA,CAC5B,WAAA;EAGA,KAAA;EACA,KAAA;EACA,YAAA;EACA,IAAA;EACA,YAAA,GAAe,aAAA;AAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Select as e}from"../../controls/dropdown/select/Select.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>{let l=c.clearable??!1,u=s??(l?void 0:c.options[0]);return t(n,{name:a,...u===void 0?{}:{defaultValue:u},render:({field:{onChange:n,value:r}})=>t(e,{error:o,
|
|
1
|
+
import{Select as e}from"../../controls/dropdown/select/Select.mjs";import{jsx as t}from"react/jsx-runtime";import{Controller as n}from"react-hook-form";const r=({$rule:r,isSubmitting:i,name:a,error:o,defaultValue:s,...c})=>{let l=c.clearable??!1,u=s??(l?void 0:c.options[0]);return t(n,{name:a,...u===void 0?{}:{defaultValue:u},render:({field:{onChange:n,value:r}})=>t(e,{error:o,value:r,...c,onChange:n})})};r.displayName=`Form.Select`;export{r as FormSelect};
|
|
2
2
|
//# sourceMappingURL=FormSelect.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormSelect.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\nimport {\n Select,\n type SelectProps,\n} from '@/components/controls/dropdown/select/Select';\n\nexport type FormSelectProps = Omit
|
|
1
|
+
{"version":3,"file":"FormSelect.mjs","names":[],"sources":["../../../../src/components/forms/controls/FormSelect.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\n\nimport type { DropdownValue } from '@/components/controls/dropdown/DropdownContextProvider';\nimport {\n Select,\n type SelectProps,\n} from '@/components/controls/dropdown/select/Select';\n\nexport type FormSelectProps = Omit<\n SelectProps,\n 'onChange' | 'defaultValue' | 'value'\n> & {\n $rule?: string;\n error?: string;\n isSubmitting?: boolean;\n name: string;\n defaultValue?: DropdownValue;\n};\n\nexport const FormSelect = ({\n $rule,\n isSubmitting: _isSubmitting,\n name,\n error,\n defaultValue,\n ...props\n}: FormSelectProps) => {\n const isClearable = props.clearable ?? false;\n const resolvedDefaultValue =\n defaultValue ?? (!isClearable ? props.options[0] : undefined);\n const controllerProps =\n resolvedDefaultValue === undefined\n ? {}\n : { defaultValue: resolvedDefaultValue };\n\n return (\n <Controller\n name={name}\n {...controllerProps}\n render={({ field: { onChange, value } }) => (\n <Select error={error} value={value} {...props} onChange={onChange} />\n )}\n />\n );\n};\n\nFormSelect.displayName = 'Form.Select';\n"],"mappings":"wJAmBA,MAAa,GAAc,CACzB,QACA,aAAc,EACd,OACA,QACA,eACA,GAAG,KACkB,CACrB,IAAM,EAAc,EAAM,WAAa,GACjC,EACJ,IAAkB,EAAiC,IAAA,GAAnB,EAAM,QAAQ,IAMhD,OACE,EAAC,EAAD,CACQ,OACN,GAPF,IAAyB,IAAA,GACrB,EAAE,CACF,CAAE,aAAc,EAAsB,CAMxC,QAAS,CAAE,MAAO,CAAE,WAAU,YAC5B,EAAC,EAAD,CAAe,QAAc,QAAO,GAAI,EAAiB,WAAY,CAAA,CAEvE,CAAA,EAIN,EAAW,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as e,jsx as t}from"react/jsx-runtime";import{Children as n,cloneElement as r,isValidElement as i}from"react";const a=(e,t,n)=>{if(e)try{let r=JSON.parse(e),i={...r.bindings,attribute:t},a=n?n(r.key,i,r.fallback):r.fallback;return String(a).replace(/{attribute}/g,t)}catch{return e.replace(/{attribute}/g,t)}},
|
|
1
|
+
"use client";import{Fragment as e,jsx as t}from"react/jsx-runtime";import{Children as n,cloneElement as r,isValidElement as i}from"react";const a=new Set([`Form.Password`,`Form.Checkbox`,`Form.Select`,`Form.Combobox`,`Form.Autocomplete`]),o=(e,t,n)=>{if(e)try{let r=JSON.parse(e),i={...r.bindings,attribute:t},a=n?n(r.key,i,r.fallback):r.fallback;return String(a).replace(/{attribute}/g,t)}catch{return e.replace(/{attribute}/g,t)}},s=({children:s,register:c,componentTypes:l,errors:u={},t:d})=>{let f=e=>n.map(e,e=>{if(!i(e))return e;let t=e.props;if(l.some(t=>e.type===t)){let n=t.name,i=u[n??``]?.message?.toString(),s=n?o(i,n,d):void 0,l=e.type.displayName;return r(e,{...n!==void 0&&!a.has(l??``)&&n?c(n):{},error:s})}return t.children?r(e,{children:f(t.children)}):e});return t(e,{children:f(s)})};export{s as RegisteredFormChildren};
|
|
2
2
|
//# sourceMappingURL=register-components.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"register-components.mjs","names":[],"sources":["../../../../src/components/forms/controls/register-components.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport { Children, cloneElement, isValidElement } from 'react';\nimport type { FieldErrors, UseFormRegister } from 'react-hook-form';\n\ninterface TranslationMessage {\n key: string;\n bindings: Record<string, string>;\n fallback: string;\n}\n\nconst parseAndTranslate = (\n message: string | undefined,\n fieldName: string,\n t?: (\n key: string,\n bindings?: Record<string, string>,\n fallback?: string,\n ) => string | React.ReactNode,\n): string | undefined => {\n if (!message) return undefined;\n\n try {\n const parsed: TranslationMessage = JSON.parse(message);\n const bindings = { ...parsed.bindings, attribute: fieldName };\n const result = t\n ? t(parsed.key, bindings, parsed.fallback)\n : parsed.fallback;\n return String(result).replace(/{attribute}/g, fieldName);\n } catch {\n return message.replace(/{attribute}/g, fieldName);\n }\n};\n\ninterface RegisteredFormChildrenProps {\n children: React.ReactNode;\n register: UseFormRegister<Record<string, unknown>>;\n componentTypes: React.ComponentType[];\n errors?: FieldErrors<Record<string, unknown>>;\n t?: (\n key: string,\n bindings?: Record<string, string>,\n fallback?: string,\n ) => string | React.ReactNode;\n}\n\nexport const RegisteredFormChildren = ({\n children,\n register,\n componentTypes,\n errors = {},\n t,\n}: RegisteredFormChildrenProps): React.ReactNode => {\n const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n return Children.map(nodes, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const childProps = child.props as {\n name?: string;\n children?: React.ReactNode;\n };\n\n if (\n componentTypes.some((type: React.ComponentType) => child.type === type)\n ) {\n const
|
|
1
|
+
{"version":3,"file":"register-components.mjs","names":[],"sources":["../../../../src/components/forms/controls/register-components.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport { Children, cloneElement, isValidElement } from 'react';\nimport type { FieldErrors, UseFormRegister } from 'react-hook-form';\n\ninterface TranslationMessage {\n key: string;\n bindings: Record<string, string>;\n fallback: string;\n}\n\nconst controllerDisplayNames = new Set([\n 'Form.Password',\n 'Form.Checkbox',\n 'Form.Select',\n 'Form.Combobox',\n 'Form.Autocomplete',\n]);\n\nconst parseAndTranslate = (\n message: string | undefined,\n fieldName: string,\n t?: (\n key: string,\n bindings?: Record<string, string>,\n fallback?: string,\n ) => string | React.ReactNode,\n): string | undefined => {\n if (!message) return undefined;\n\n try {\n const parsed: TranslationMessage = JSON.parse(message);\n const bindings = { ...parsed.bindings, attribute: fieldName };\n const result = t\n ? t(parsed.key, bindings, parsed.fallback)\n : parsed.fallback;\n return String(result).replace(/{attribute}/g, fieldName);\n } catch {\n return message.replace(/{attribute}/g, fieldName);\n }\n};\n\ninterface RegisteredFormChildrenProps {\n children: React.ReactNode;\n register: UseFormRegister<Record<string, unknown>>;\n componentTypes: React.ComponentType[];\n errors?: FieldErrors<Record<string, unknown>>;\n t?: (\n key: string,\n bindings?: Record<string, string>,\n fallback?: string,\n ) => string | React.ReactNode;\n}\n\nexport const RegisteredFormChildren = ({\n children,\n register,\n componentTypes,\n errors = {},\n t,\n}: RegisteredFormChildrenProps): React.ReactNode => {\n const processChildren = (nodes: React.ReactNode): React.ReactNode => {\n return Children.map(nodes, (child) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const childProps = child.props as {\n name?: string;\n children?: React.ReactNode;\n };\n\n if (\n componentTypes.some((type: React.ComponentType) => child.type === type)\n ) {\n const fieldName = childProps.name;\n const errorMessage = errors[fieldName ?? '']?.message?.toString();\n const translatedError = fieldName\n ? parseAndTranslate(errorMessage, fieldName, t)\n : undefined;\n const displayName = (\n child.type as React.ComponentType & { displayName?: string }\n ).displayName;\n const shouldRegister =\n fieldName !== undefined &&\n !controllerDisplayNames.has(displayName ?? '');\n const registrationProps =\n shouldRegister && fieldName ? register(fieldName) : {};\n\n return cloneElement(child, {\n ...registrationProps,\n error: translatedError,\n } as Partial<typeof child.props>);\n }\n\n if (childProps.children) {\n return cloneElement(child, {\n children: processChildren(childProps.children),\n } as Partial<typeof child.props>);\n }\n\n return child;\n });\n };\n\n return <>{processChildren(children)}</>;\n};\n"],"mappings":"0IAYA,MAAM,EAAyB,IAAI,IAAI,CACrC,gBACA,gBACA,cACA,gBACA,oBACD,CAAC,CAEI,GACJ,EACA,EACA,IAKuB,CAClB,KAEL,GAAI,CACF,IAAM,EAA6B,KAAK,MAAM,EAAQ,CAChD,EAAW,CAAE,GAAG,EAAO,SAAU,UAAW,EAAW,CACvD,EAAS,EACX,EAAE,EAAO,IAAK,EAAU,EAAO,SAAS,CACxC,EAAO,SACX,OAAO,OAAO,EAAO,CAAC,QAAQ,eAAgB,EAAU,MAClD,CACN,OAAO,EAAQ,QAAQ,eAAgB,EAAU,GAgBxC,GAA0B,CACrC,WACA,WACA,iBACA,SAAS,EAAE,CACX,OACkD,CAClD,IAAM,EAAmB,GAChB,EAAS,IAAI,EAAQ,GAAU,CACpC,GAAI,CAAC,EAAe,EAAM,CACxB,OAAO,EAGT,IAAM,EAAa,EAAM,MAKzB,GACE,EAAe,KAAM,GAA8B,EAAM,OAAS,EAAK,CACvE,CACA,IAAM,EAAY,EAAW,KACvB,EAAe,EAAO,GAAa,KAAK,SAAS,UAAU,CAC3D,EAAkB,EACpB,EAAkB,EAAc,EAAW,EAAE,CAC7C,IAAA,GACE,EACJ,EAAM,KACN,YAOF,OAAO,EAAa,EAAO,CACzB,GANA,IAAc,IAAA,IACd,CAAC,EAAuB,IAAI,GAAe,GAAG,EAE5B,EAAY,EAAS,EAAU,CAAG,EAAE,CAItD,MAAO,EACR,CAAgC,CASnC,OANI,EAAW,SACN,EAAa,EAAO,CACzB,SAAU,EAAgB,EAAW,SAAS,CAC/C,CAAgC,CAG5B,GACP,CAGJ,OAAO,EAAA,EAAA,CAAA,SAAG,EAAgB,EAAS,CAAI,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.103",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/preset": "1.0.
|
|
28
|
+
"@mage-ui/preset": "1.0.103",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|