@mage-ui/components 1.0.174 → 1.0.176

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.
Files changed (28) hide show
  1. package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts +1 -0
  2. package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts.map +1 -1
  3. package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs +1 -1
  4. package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs.map +1 -1
  5. package/dist/components/controls/dropdown/combobox/Combobox.d.mts +2 -0
  6. package/dist/components/controls/dropdown/combobox/Combobox.d.mts.map +1 -1
  7. package/dist/components/controls/dropdown/combobox/Combobox.mjs +1 -1
  8. package/dist/components/controls/dropdown/combobox/Combobox.mjs.map +1 -1
  9. package/dist/components/controls/dropdown/select/Select.d.mts +2 -0
  10. package/dist/components/controls/dropdown/select/Select.d.mts.map +1 -1
  11. package/dist/components/controls/dropdown/select/Select.mjs +1 -1
  12. package/dist/components/controls/dropdown/select/Select.mjs.map +1 -1
  13. package/dist/components/controls/dropzone/Dropzone.d.mts +3 -0
  14. package/dist/components/controls/dropzone/Dropzone.d.mts.map +1 -1
  15. package/dist/components/controls/dropzone/Dropzone.mjs +1 -1
  16. package/dist/components/controls/dropzone/Dropzone.mjs.map +1 -1
  17. package/dist/components/controls/dropzone/DropzoneBase.d.mts +1 -0
  18. package/dist/components/controls/dropzone/DropzoneBase.d.mts.map +1 -1
  19. package/dist/components/controls/dropzone/DropzoneBase.mjs +1 -1
  20. package/dist/components/controls/dropzone/DropzoneBase.mjs.map +1 -1
  21. package/dist/components/forms/multi-step/MultiForm.d.mts +1 -0
  22. package/dist/components/forms/multi-step/MultiForm.d.mts.map +1 -1
  23. package/dist/components/forms/multi-step/MultiForm.mjs.map +1 -1
  24. package/dist/components/forms/multi-step/Step.d.mts +1 -0
  25. package/dist/components/forms/multi-step/Step.d.mts.map +1 -1
  26. package/dist/components/forms/multi-step/Step.mjs +1 -1
  27. package/dist/components/forms/multi-step/Step.mjs.map +1 -1
  28. package/package.json +2 -2
@@ -28,6 +28,7 @@ declare const Autocomplete: ({
28
28
  label,
29
29
  required,
30
30
  autoComplete,
31
+ disabled,
31
32
  description,
32
33
  error,
33
34
  placeholder,
@@ -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,WAAA,GAAc,SAAA;EACd,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,QAAA;EAAA,YAAA;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,GAmB1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
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,GAAc,SAAA;EACd,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,QAAA;EAAA,YAAA;EAAA,QAAA;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,GAoB1B,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 ee,autocompleteClearButtonRoot as s,autocompleteEmpty as c,autocompleteOption as l,autocompleteOptions as u,autocompleteRoot as d,autocompleteScrollAreaAutosize as te,autocompleteTextInput as ne,autocompleteTextInputDescription as re,autocompleteTextInputError as f,autocompleteTextInputInput as p,autocompleteTextInputLabel as m,autocompleteTextInputRequired as h,autocompleteTextInputRoot as g,autocompleteTextInputSection as _,autocompleteTextInputWrapper as v}from"@mage-ui/styled-system/recipes";import{jsx as y}from"react/jsx-runtime";import{useState as b}from"react";import{useDebouncedCallback as x}from"@mantine/hooks";import{useQuery as S}from"@tanstack/react-query";const C=({name:C,label:w,required:T,autoComplete:E,description:D,error:O,placeholder:k,creatable:A,url:j,fetcher:M,query:N=``,debounce:P=500,threshold:F=3,clearButtonText:I,createText:L,emptyText:R=`No hay resultados`,classNames:z,...B})=>{let[V,H]=b(N),[U,W]=b(!1),{data:G,isFetching:K}=S({queryKey:[C,j,V],queryFn:()=>M({url:j,query:V}),initialData:[],enabled:V.length>=F}),q=x(e=>{H(e),W(!1)},P),J=e=>{W(!0),q(e)},{creatable:Y,empty:X,target:ie,scrollArea:ae,...Z}=z||{},{clearButton:Q,...$}=ie||{},oe={placeholder:k,label:w,required:T,autoComplete:E,description:D,error:O,classNames:{dropdownTextInput:$?.dropdownTextInput??ne(),root:$?.root??g(),label:$?.label??m(),description:$?.description??re(),error:$?.error??f(),wrapper:$?.wrapper??v(),input:$?.input??p(),section:$?.section??_(),required:$?.required??h()},clearButtonProps:{label:I,classNames:{clearButton:Q?.clearButton??i(),root:Q?.root??s(),icon:Q?.icon??a(),iconRaw:{iconRaw:Q?.iconRaw?.iconRaw??o(),root:Q?.iconRaw?.root??ee()}}}},se={emptyText:R,classNames:{empty:X?.empty??c()}},ce={creatable:A??!1,createText:L,classNames:Y};return y(e,{shouldFilter:!1,classNames:{dropdown:Z?.dropdown??r(),root:Z?.root??d(),options:Z?.options??u(),option:Z?.option??l(),empty:X?.empty??c(),search:Z?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:ae?.dropdownScrollAreaAutosize??te()}},target:y(n,{debounced:J,isLoading:K||U,threshold:F,showEmpty:R!==void 0,...oe}),options:G,...B,children:y(t,{emptyProps:se,creatableProps:ce})})};export{C as Autocomplete};
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 ee,autocompleteClearButtonRoot as s,autocompleteEmpty as c,autocompleteOption as l,autocompleteOptions as u,autocompleteRoot as te,autocompleteScrollAreaAutosize as ne,autocompleteTextInput as re,autocompleteTextInputDescription as ie,autocompleteTextInputError as d,autocompleteTextInputInput as f,autocompleteTextInputLabel as p,autocompleteTextInputRequired as m,autocompleteTextInputRoot as h,autocompleteTextInputSection as g,autocompleteTextInputWrapper as _}from"@mage-ui/styled-system/recipes";import{jsx as v}from"react/jsx-runtime";import{useState as y}from"react";import{useDebouncedCallback as b}from"@mantine/hooks";import{useQuery as x}from"@tanstack/react-query";const S=({name:S,label:C,required:w,autoComplete:T,disabled:E,description:D,error:O,placeholder:k,creatable:A,url:j,fetcher:M,query:N=``,debounce:P=500,threshold:F=3,clearButtonText:I,createText:L,emptyText:R=`No hay resultados`,classNames:z,...B})=>{let[V,H]=y(N),[U,W]=y(!1),{data:G,isFetching:K}=x({queryKey:[S,j,V],queryFn:()=>M({url:j,query:V}),initialData:[],enabled:V.length>=F}),q=b(e=>{H(e),W(!1)},P),J=e=>{W(!0),q(e)},{creatable:Y,empty:X,target:ae,scrollArea:oe,...Z}=z||{},{clearButton:Q,...$}=ae||{},se={placeholder:k,label:C,required:w,autoComplete:T,disabled:E,description:D,error:O,classNames:{dropdownTextInput:$?.dropdownTextInput??re(),root:$?.root??h(),label:$?.label??p(),description:$?.description??ie(),error:$?.error??d(),wrapper:$?.wrapper??_(),input:$?.input??f(),section:$?.section??g(),required:$?.required??m()},clearButtonProps:{label:I,classNames:{clearButton:Q?.clearButton??i(),root:Q?.root??s(),icon:Q?.icon??a(),iconRaw:{iconRaw:Q?.iconRaw?.iconRaw??o(),root:Q?.iconRaw?.root??ee()}}}},ce={emptyText:R,classNames:{empty:X?.empty??c()}},le={creatable:A??!1,createText:L,classNames:Y};return v(e,{shouldFilter:!1,classNames:{dropdown:Z?.dropdown??r(),root:Z?.root??te(),options:Z?.options??u(),option:Z?.option??l(),empty:X?.empty??c(),search:Z?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:oe?.dropdownScrollAreaAutosize??ne()}},target:v(n,{debounced:J,isLoading:K||U,threshold:F,showEmpty:R!==void 0,...se}),options:G,...B,children:v(t,{emptyProps:ce,creatableProps:le})})};export{S 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 { type ReactNode, 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?: ReactNode;\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 required,\n autoComplete,\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 required,\n autoComplete,\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":"i/BA0DA,MAAa,GAAgB,CAC3B,OACA,QACA,WACA,eACA,cACA,QACA,cACA,YACA,MACA,UACA,QAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,EAAM,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,GACR,WAAY,GACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,IAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,WACA,eACA,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,IAAoC,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,IAAsB,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
+ {"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { type ReactNode, 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?: ReactNode;\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 required,\n autoComplete,\n disabled,\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 required,\n autoComplete,\n disabled,\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":"k/BA0DA,MAAa,GAAgB,CAC3B,OACA,QACA,WACA,eACA,WACA,cACA,QACA,cACA,YACA,MACA,UACA,QAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,EAAM,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,GACR,WAAY,GACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,IAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,WACA,eACA,WACA,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,IAAoC,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,IAAkB,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,IAAsB,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"}
@@ -18,6 +18,7 @@ type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> &
18
18
  error?: string;
19
19
  required?: boolean;
20
20
  autoComplete?: string;
21
+ disabled?: boolean;
21
22
  classNames?: DropdownProps['classNames'] & {
22
23
  creatable?: ComboboxCreatableOptionProps['classNames'];
23
24
  empty?: ComboboxEmptyOptionProps['classNames'];
@@ -34,6 +35,7 @@ declare const Combobox: ({
34
35
  placeholder,
35
36
  required,
36
37
  autoComplete,
38
+ disabled,
37
39
  creatable,
38
40
  createText,
39
41
  clearButtonText,
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"mappings":";;;;;;;;KAuCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EAGA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,WAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,UAAA,GAAa,aAAA;IACX,SAAA,GAAY,4BAAA;IACZ,KAAA,GAAQ,wBAAA;IACR,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,QAAA;EAAY,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GActB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"mappings":";;;;;;;;KAuCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EAGA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,WAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,QAAA;EACA,UAAA,GAAa,aAAA;IACX,SAAA,GAAY,4BAAA;IACZ,KAAA,GAAQ,wBAAA;IACR,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,QAAA;EAAY,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAetB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -1,2 +1,2 @@
1
- import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"./ComboboxOptions.mjs";import{ComboboxTarget as n}from"./ComboboxTarget.mjs";import{combobox as r,comboboxChevron as i,comboboxChevronIcon as a,comboboxChevronIconRoot as o,comboboxChevronRoot as s,comboboxClearButton as c,comboboxClearButtonIcon as l,comboboxClearButtonIconRaw as u,comboboxClearButtonIconRawRoot as d,comboboxClearButtonRoot as ee,comboboxEmpty as f,comboboxOption as p,comboboxOptionCreateIcon as m,comboboxOptionCreateIconIconRaw as h,comboboxOptionCreateIconIconRawRoot as g,comboboxOptionCreateIconRoot as _,comboboxOptions as v,comboboxRoot as y,comboboxScrollAreaAutosize as b,comboboxTextInput as x,comboboxTextInputDescription as S,comboboxTextInputError as C,comboboxTextInputInput as w,comboboxTextInputLabel as T,comboboxTextInputRequired as E,comboboxTextInputRoot as D,comboboxTextInputSection as O,comboboxTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,description:M,placeholder:N,required:P,autoComplete:te,creatable:F,createText:I,clearButtonText:L,emptyText:R=`No results`,startSlot:z,error:B,classNames:V,...H})=>{let{creatable:U,empty:W,target:G,scrollArea:K,...q}=V||{},{clearButton:J,chevron:Y,...X}=G||{},Z={placeholder:N,label:j,description:M,required:P,autoComplete:te,error:B,startSlot:z,classNames:{dropdownTextInput:X?.dropdownTextInput??x(),root:X?.root??D(),label:X?.label??T(),description:X?.description??S(),error:X?.error??C(),wrapper:X?.wrapper??k(),input:X?.input??w(),section:X?.section??O(),required:X?.required??E()},clearButtonProps:{label:L,classNames:{clearButton:J?.clearButton??c(),root:J?.root??ee(),icon:J?.icon??l(),iconRaw:{iconRaw:J?.iconRaw?.iconRaw??u(),root:J?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:Y?.chevron??i(),root:Y?.root??s(),open:{iconRaw:Y?.open?.iconRaw??a(),root:Y?.open?.root??o()},close:{iconRaw:Y?.close?.iconRaw??a(),root:Y?.close?.root??o()}}}},Q=q?.dropdown??r(),ne=q?.root??y(),re=q?.options??v(),ie=q?.option??p(),$=W?.empty??f(),ae=q?.search,oe={emptyText:R,classNames:{empty:W?.empty??$}},se={creatable:F??!1,createText:I,classNames:{create:U?.create,createIcon:{createIcon:U?.createIcon?.createIcon??m(),root:U?.createIcon?.root??_(),iconRaw:{iconRaw:U?.createIcon?.iconRaw?.iconRaw??h(),root:U?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:Q,root:ne,options:re,option:ie,empty:$,search:ae},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:K?.dropdownScrollAreaAutosize??b()}},target:A(n,{...Z}),...H,children:A(t,{emptyProps:oe,creatableProps:se})})};export{j as Combobox};
1
+ import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"./ComboboxOptions.mjs";import{ComboboxTarget as n}from"./ComboboxTarget.mjs";import{combobox as r,comboboxChevron as i,comboboxChevronIcon as a,comboboxChevronIconRoot as o,comboboxChevronRoot as s,comboboxClearButton as c,comboboxClearButtonIcon as l,comboboxClearButtonIconRaw as u,comboboxClearButtonIconRawRoot as d,comboboxClearButtonRoot as ee,comboboxEmpty as f,comboboxOption as p,comboboxOptionCreateIcon as m,comboboxOptionCreateIconIconRaw as h,comboboxOptionCreateIconIconRawRoot as g,comboboxOptionCreateIconRoot as _,comboboxOptions as v,comboboxRoot as y,comboboxScrollAreaAutosize as b,comboboxTextInput as x,comboboxTextInputDescription as S,comboboxTextInputError as C,comboboxTextInputInput as w,comboboxTextInputLabel as T,comboboxTextInputRequired as E,comboboxTextInputRoot as D,comboboxTextInputSection as O,comboboxTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,description:M,placeholder:N,required:P,autoComplete:te,disabled:F,creatable:I,createText:L,clearButtonText:R,emptyText:z=`No results`,startSlot:B,error:V,classNames:H,...U})=>{let{creatable:W,empty:G,target:K,scrollArea:q,...J}=H||{},{clearButton:Y,chevron:X,...Z}=K||{},Q={placeholder:N,label:j,description:M,required:P,autoComplete:te,disabled:F,error:V,startSlot:B,classNames:{dropdownTextInput:Z?.dropdownTextInput??x(),root:Z?.root??D(),label:Z?.label??T(),description:Z?.description??S(),error:Z?.error??C(),wrapper:Z?.wrapper??k(),input:Z?.input??w(),section:Z?.section??O(),required:Z?.required??E()},clearButtonProps:{label:R,classNames:{clearButton:Y?.clearButton??c(),root:Y?.root??ee(),icon:Y?.icon??l(),iconRaw:{iconRaw:Y?.iconRaw?.iconRaw??u(),root:Y?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:X?.chevron??i(),root:X?.root??s(),open:{iconRaw:X?.open?.iconRaw??a(),root:X?.open?.root??o()},close:{iconRaw:X?.close?.iconRaw??a(),root:X?.close?.root??o()}}}},ne=J?.dropdown??r(),re=J?.root??y(),ie=J?.options??v(),ae=J?.option??p(),$=G?.empty??f(),oe=J?.search,se={emptyText:z,classNames:{empty:G?.empty??$}},ce={creatable:I??!1,createText:L,classNames:{create:W?.create,createIcon:{createIcon:W?.createIcon?.createIcon??m(),root:W?.createIcon?.root??_(),iconRaw:{iconRaw:W?.createIcon?.iconRaw?.iconRaw??h(),root:W?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:ne,root:re,options:ie,option:ae,empty:$,search:oe},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:q?.dropdownScrollAreaAutosize??b()}},target:A(n,{...Q}),...U,children:A(t,{emptyProps:se,creatableProps:ce})})};export{j as Combobox};
2
2
  //# sourceMappingURL=Combobox.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n combobox,\n comboboxChevron,\n comboboxChevronIcon,\n comboboxChevronIconRoot,\n comboboxChevronRoot,\n comboboxClearButton,\n comboboxClearButtonIcon,\n comboboxClearButtonIconRaw,\n comboboxClearButtonIconRawRoot,\n comboboxClearButtonRoot,\n comboboxEmpty,\n comboboxOption,\n comboboxOptionCreateIcon,\n comboboxOptionCreateIconIconRaw,\n comboboxOptionCreateIconIconRawRoot,\n comboboxOptionCreateIconRoot,\n comboboxOptions,\n comboboxRoot,\n comboboxScrollAreaAutosize,\n comboboxTextInput,\n comboboxTextInputDescription,\n comboboxTextInputError,\n comboboxTextInputInput,\n comboboxTextInputLabel,\n comboboxTextInputRequired,\n comboboxTextInputRoot,\n comboboxTextInputSection,\n comboboxTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport type { ComboboxCreatableOptionProps } from './ComboboxCreatableOption';\nimport type { ComboboxEmptyOptionProps } from './ComboboxEmptyOption';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { ComboboxTarget, type ComboboxTargetProps } from './ComboboxTarget';\n\nexport type ComboboxProps = Omit<\n DropdownProps,\n 'classNames' | 'target' | 'children'\n> & {\n label?: ReactNode;\n description?: ReactNode;\n placeholder?: string;\n creatable?: boolean;\n createText?: string;\n emptyText?: string;\n clearButtonText?: string;\n startSlot?: ReactNode;\n error?: string;\n required?: boolean;\n autoComplete?: string;\n classNames?: DropdownProps['classNames'] & {\n creatable?: ComboboxCreatableOptionProps['classNames'];\n empty?: ComboboxEmptyOptionProps['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 Combobox = ({\n label,\n description,\n placeholder,\n required,\n autoComplete,\n creatable,\n createText,\n clearButtonText,\n emptyText = 'No results',\n startSlot,\n error,\n classNames,\n ...props\n}: ComboboxProps) => {\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n description,\n required,\n autoComplete,\n error,\n startSlot,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? comboboxTextInput(),\n root: restTargetClassNames?.root ?? comboboxTextInputRoot(),\n label: restTargetClassNames?.label ?? comboboxTextInputLabel(),\n description:\n restTargetClassNames?.description ?? comboboxTextInputDescription(),\n error: restTargetClassNames?.error ?? comboboxTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? comboboxTextInputWrapper(),\n input: restTargetClassNames?.input ?? comboboxTextInputInput(),\n section: restTargetClassNames?.section ?? comboboxTextInputSection(),\n required: restTargetClassNames?.required ?? comboboxTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? comboboxClearButton(),\n root: clearButtonClassNames?.root ?? comboboxClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? comboboxClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n comboboxClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n comboboxClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? comboboxChevron(),\n root: chevronClassNames?.root ?? comboboxChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.open?.root ?? comboboxChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.close?.root ?? comboboxChevronIconRoot(),\n },\n },\n },\n };\n\n const dropdownClassName = dropdownClassNames?.dropdown ?? combobox();\n const rootClassName = dropdownClassNames?.root ?? comboboxRoot();\n const optionsClassName = dropdownClassNames?.options ?? comboboxOptions();\n const optionClassName = dropdownClassNames?.option ?? comboboxOption();\n const emptyClassName = emptyClassNames?.empty ?? comboboxEmpty();\n const searchClassName = dropdownClassNames?.search;\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? emptyClassName,\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n createText,\n classNames: {\n create: creatableClassNames?.create,\n createIcon: {\n createIcon:\n creatableClassNames?.createIcon?.createIcon ??\n comboboxOptionCreateIcon(),\n root:\n creatableClassNames?.createIcon?.root ??\n comboboxOptionCreateIconRoot(),\n iconRaw: {\n iconRaw:\n creatableClassNames?.createIcon?.iconRaw?.iconRaw ??\n comboboxOptionCreateIconIconRaw(),\n root:\n creatableClassNames?.createIcon?.iconRaw?.root ??\n comboboxOptionCreateIconIconRawRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n classNames={{\n dropdown: dropdownClassName,\n root: rootClassName,\n options: optionsClassName,\n option: optionClassName,\n empty: emptyClassName,\n search: searchClassName,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n comboboxScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s/BAmEA,MAAa,GAAY,CACvB,QACA,cACA,cACA,WACA,gBACA,YACA,aACA,kBACA,YAAY,aACZ,YACA,QACA,aACA,GAAG,KACgB,CACnB,GAAM,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CAEpB,EAAc,CAClB,cACA,QACA,cACA,WACA,gBACA,QACA,YACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAmB,CAChE,KAAM,GAAsB,MAAQ,GAAuB,CAC3D,MAAO,GAAsB,OAAS,GAAwB,CAC9D,YACE,GAAsB,aAAe,GAA8B,CACrE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,SAAU,GAAsB,UAAY,GAA2B,CACxE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAqB,CAC7D,KAAM,GAAuB,MAAQ,IAAyB,CAC9D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA4B,CAC9B,KACE,GAAuB,SAAS,MAChC,GAAgC,CACnC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAiB,CACxD,KAAM,GAAmB,MAAQ,GAAqB,CACtD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAqB,CAClE,KAAM,GAAmB,MAAM,MAAQ,GAAyB,CACjE,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAqB,CACnE,KAAM,GAAmB,OAAO,MAAQ,GAAyB,CAClE,CACF,CACF,CACF,CAEK,EAAoB,GAAoB,UAAY,GAAU,CAC9D,GAAgB,GAAoB,MAAQ,GAAc,CAC1D,GAAmB,GAAoB,SAAW,GAAiB,CACnE,GAAkB,GAAoB,QAAU,GAAgB,CAChE,EAAiB,GAAiB,OAAS,GAAe,CAC1D,GAAkB,GAAoB,OAEtC,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,EAClC,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,CACV,OAAQ,GAAqB,OAC7B,WAAY,CACV,WACE,GAAqB,YAAY,YACjC,GAA0B,CAC5B,KACE,GAAqB,YAAY,MACjC,GAA8B,CAChC,QAAS,CACP,QACE,GAAqB,YAAY,SAAS,SAC1C,GAAiC,CACnC,KACE,GAAqB,YAAY,SAAS,MAC1C,GAAqC,CACxC,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,WAAY,CACV,SAAU,EACV,KAAM,GACN,QAAS,GACT,OAAQ,GACR,MAAO,EACP,OAAQ,GACT,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA4B,CAC/B,CACF,CACD,OAAQ,EAAC,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}
1
+ {"version":3,"file":"Combobox.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n combobox,\n comboboxChevron,\n comboboxChevronIcon,\n comboboxChevronIconRoot,\n comboboxChevronRoot,\n comboboxClearButton,\n comboboxClearButtonIcon,\n comboboxClearButtonIconRaw,\n comboboxClearButtonIconRawRoot,\n comboboxClearButtonRoot,\n comboboxEmpty,\n comboboxOption,\n comboboxOptionCreateIcon,\n comboboxOptionCreateIconIconRaw,\n comboboxOptionCreateIconIconRawRoot,\n comboboxOptionCreateIconRoot,\n comboboxOptions,\n comboboxRoot,\n comboboxScrollAreaAutosize,\n comboboxTextInput,\n comboboxTextInputDescription,\n comboboxTextInputError,\n comboboxTextInputInput,\n comboboxTextInputLabel,\n comboboxTextInputRequired,\n comboboxTextInputRoot,\n comboboxTextInputSection,\n comboboxTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport type { ComboboxCreatableOptionProps } from './ComboboxCreatableOption';\nimport type { ComboboxEmptyOptionProps } from './ComboboxEmptyOption';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { ComboboxTarget, type ComboboxTargetProps } from './ComboboxTarget';\n\nexport type ComboboxProps = Omit<\n DropdownProps,\n 'classNames' | 'target' | 'children'\n> & {\n label?: ReactNode;\n description?: ReactNode;\n placeholder?: string;\n creatable?: boolean;\n createText?: string;\n emptyText?: string;\n clearButtonText?: string;\n startSlot?: ReactNode;\n error?: string;\n required?: boolean;\n autoComplete?: string;\n disabled?: boolean;\n classNames?: DropdownProps['classNames'] & {\n creatable?: ComboboxCreatableOptionProps['classNames'];\n empty?: ComboboxEmptyOptionProps['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 Combobox = ({\n label,\n description,\n placeholder,\n required,\n autoComplete,\n disabled,\n creatable,\n createText,\n clearButtonText,\n emptyText = 'No results',\n startSlot,\n error,\n classNames,\n ...props\n}: ComboboxProps) => {\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n description,\n required,\n autoComplete,\n disabled,\n error,\n startSlot,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? comboboxTextInput(),\n root: restTargetClassNames?.root ?? comboboxTextInputRoot(),\n label: restTargetClassNames?.label ?? comboboxTextInputLabel(),\n description:\n restTargetClassNames?.description ?? comboboxTextInputDescription(),\n error: restTargetClassNames?.error ?? comboboxTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? comboboxTextInputWrapper(),\n input: restTargetClassNames?.input ?? comboboxTextInputInput(),\n section: restTargetClassNames?.section ?? comboboxTextInputSection(),\n required: restTargetClassNames?.required ?? comboboxTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? comboboxClearButton(),\n root: clearButtonClassNames?.root ?? comboboxClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? comboboxClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n comboboxClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n comboboxClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? comboboxChevron(),\n root: chevronClassNames?.root ?? comboboxChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.open?.root ?? comboboxChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.close?.root ?? comboboxChevronIconRoot(),\n },\n },\n },\n };\n\n const dropdownClassName = dropdownClassNames?.dropdown ?? combobox();\n const rootClassName = dropdownClassNames?.root ?? comboboxRoot();\n const optionsClassName = dropdownClassNames?.options ?? comboboxOptions();\n const optionClassName = dropdownClassNames?.option ?? comboboxOption();\n const emptyClassName = emptyClassNames?.empty ?? comboboxEmpty();\n const searchClassName = dropdownClassNames?.search;\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? emptyClassName,\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n createText,\n classNames: {\n create: creatableClassNames?.create,\n createIcon: {\n createIcon:\n creatableClassNames?.createIcon?.createIcon ??\n comboboxOptionCreateIcon(),\n root:\n creatableClassNames?.createIcon?.root ??\n comboboxOptionCreateIconRoot(),\n iconRaw: {\n iconRaw:\n creatableClassNames?.createIcon?.iconRaw?.iconRaw ??\n comboboxOptionCreateIconIconRaw(),\n root:\n creatableClassNames?.createIcon?.iconRaw?.root ??\n comboboxOptionCreateIconIconRawRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n classNames={{\n dropdown: dropdownClassName,\n root: rootClassName,\n options: optionsClassName,\n option: optionClassName,\n empty: emptyClassName,\n search: searchClassName,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n comboboxScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s/BAoEA,MAAa,GAAY,CACvB,QACA,cACA,cACA,WACA,gBACA,WACA,YACA,aACA,kBACA,YAAY,aACZ,YACA,QACA,aACA,GAAG,KACgB,CACnB,GAAM,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CAEpB,EAAc,CAClB,cACA,QACA,cACA,WACA,gBACA,WACA,QACA,YACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAmB,CAChE,KAAM,GAAsB,MAAQ,GAAuB,CAC3D,MAAO,GAAsB,OAAS,GAAwB,CAC9D,YACE,GAAsB,aAAe,GAA8B,CACrE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,SAAU,GAAsB,UAAY,GAA2B,CACxE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAqB,CAC7D,KAAM,GAAuB,MAAQ,IAAyB,CAC9D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA4B,CAC9B,KACE,GAAuB,SAAS,MAChC,GAAgC,CACnC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAiB,CACxD,KAAM,GAAmB,MAAQ,GAAqB,CACtD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAqB,CAClE,KAAM,GAAmB,MAAM,MAAQ,GAAyB,CACjE,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAqB,CACnE,KAAM,GAAmB,OAAO,MAAQ,GAAyB,CAClE,CACF,CACF,CACF,CAEK,GAAoB,GAAoB,UAAY,GAAU,CAC9D,GAAgB,GAAoB,MAAQ,GAAc,CAC1D,GAAmB,GAAoB,SAAW,GAAiB,CACnE,GAAkB,GAAoB,QAAU,GAAgB,CAChE,EAAiB,GAAiB,OAAS,GAAe,CAC1D,GAAkB,GAAoB,OAEtC,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,EAClC,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,CACV,OAAQ,GAAqB,OAC7B,WAAY,CACV,WACE,GAAqB,YAAY,YACjC,GAA0B,CAC5B,KACE,GAAqB,YAAY,MACjC,GAA8B,CAChC,QAAS,CACP,QACE,GAAqB,YAAY,SAAS,SAC1C,GAAiC,CACnC,KACE,GAAqB,YAAY,SAAS,MAC1C,GAAqC,CACxC,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,WAAY,CACV,SAAU,GACV,KAAM,GACN,QAAS,GACT,OAAQ,GACR,MAAO,EACP,OAAQ,GACT,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA4B,CAC/B,CACF,CACD,OAAQ,EAAC,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}
@@ -20,6 +20,7 @@ type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
20
20
  error?: string;
21
21
  required?: boolean;
22
22
  autoComplete?: string;
23
+ disabled?: boolean;
23
24
  classNames?: DropdownProps['classNames'] & {
24
25
  target?: ComboboxTargetProps['classNames'] & {
25
26
  clearButton?: NonNullable<ComboboxTargetProps['clearButtonProps']>['classNames'];
@@ -34,6 +35,7 @@ declare const Select: ({
34
35
  placeholder,
35
36
  required,
36
37
  autoComplete,
38
+ disabled,
37
39
  clearable,
38
40
  clearButtonText,
39
41
  emptyText,
@@ -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,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,WAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,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,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAiBpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
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,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,WAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,QAAA;EACA,YAAA;EACA,QAAA;EACA,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,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAkBpB,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 ee}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as n}from"./SelectSearch.mjs";import{select as r,selectChevron as i,selectChevronIcon as a,selectChevronIconRoot as o,selectChevronRoot as s,selectClearButton as c,selectClearButtonIcon as l,selectClearButtonIconRaw as u,selectClearButtonIconRawRoot as d,selectClearButtonRoot as f,selectEmpty as p,selectOption as m,selectOptions as h,selectRoot as g,selectScrollAreaAutosize as _,selectSearchInput as v,selectSearchSection as y,selectSearchWrapper as b,selectTextInput as x,selectTextInputDescription as S,selectTextInputError as C,selectTextInputInput as w,selectTextInputLabel as T,selectTextInputRequired as E,selectTextInputRoot as D,selectTextInputSection as O,selectTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,description:M,placeholder:N,required:P,autoComplete:F,clearable:I=!1,clearButtonText:L,emptyText:R,searchable:z,searchPlaceholder:B,searchStartSlot:V,searchClassNames:H,startSlot:U,error:W,classNames:G,...K})=>{let{target:q,scrollArea:J,...Y}=G||{},{clearButton:X,chevron:Z,...Q}=q||{},$=R??(z?`No results`:void 0),te={placeholder:N,label:j,description:M,required:P,autoComplete:F,error:W,clearable:I,readOnly:!0,closeOnBlur:!z,startSlot:U,displayQuery:!1,classNames:{dropdownTextInput:Q?.dropdownTextInput??x(),root:Q?.root??D(),label:Q?.label??T(),description:Q?.description??S(),error:Q?.error??C(),wrapper:Q?.wrapper??k(),input:Q?.input??w(),section:Q?.section??O(),required:Q?.required??E()},clearButtonProps:{label:L,classNames:{clearButton:X?.clearButton??c(),root:X?.root??f(),icon:X?.icon??l(),iconRaw:{iconRaw:X?.iconRaw?.iconRaw??u(),root:X?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:Z?.chevron??i(),root:Z?.root??s(),open:{iconRaw:Z?.open?.iconRaw??a(),root:Z?.open?.root??o()},close:{iconRaw:Z?.close?.iconRaw??a(),root:Z?.close?.root??o()}}}};return A(e,{"data-searchable":z,classNames:{dropdown:Y?.dropdown??r(),root:Y?.root??g(),options:Y?.options??h(),option:Y?.option??m(),empty:Y?.empty??p(),search:Y?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:J?.dropdownScrollAreaAutosize??_()}},target:A(ee,{...te}),dropdownTopSlot:z&&A(n,{searchPlaceholder:B,startSlot:V,classNames:{input:H?.input??v(),wrapper:H?.wrapper??b(),section:H?.section??y()}}),...K,children:A(t,{emptyProps:{emptyText:$,classNames:{empty:Y?.empty??p()}},creatableProps:{creatable:!1}})})};export{j as Select};
1
+ import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as ee}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as n}from"./SelectSearch.mjs";import{select as r,selectChevron as i,selectChevronIcon as a,selectChevronIconRoot as o,selectChevronRoot as s,selectClearButton as c,selectClearButtonIcon as l,selectClearButtonIconRaw as u,selectClearButtonIconRawRoot as d,selectClearButtonRoot as f,selectEmpty as p,selectOption as m,selectOptions as h,selectRoot as g,selectScrollAreaAutosize as _,selectSearchInput as v,selectSearchSection as y,selectSearchWrapper as b,selectTextInput as x,selectTextInputDescription as S,selectTextInputError as C,selectTextInputInput as w,selectTextInputLabel as T,selectTextInputRequired as E,selectTextInputRoot as D,selectTextInputSection as O,selectTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,description:M,placeholder:N,required:P,autoComplete:F,disabled:I,clearable:L=!1,clearButtonText:R,emptyText:z,searchable:B,searchPlaceholder:V,searchStartSlot:H,searchClassNames:U,startSlot:W,error:G,classNames:K,...q})=>{let{target:J,scrollArea:Y,...X}=K||{},{clearButton:Z,chevron:Q,...$}=J||{},te=z??(B?`No results`:void 0),ne={placeholder:N,label:j,description:M,required:P,autoComplete:F,disabled:I,error:G,clearable:L,readOnly:!0,closeOnBlur:!B,startSlot:W,displayQuery:!1,classNames:{dropdownTextInput:$?.dropdownTextInput??x(),root:$?.root??D(),label:$?.label??T(),description:$?.description??S(),error:$?.error??C(),wrapper:$?.wrapper??k(),input:$?.input??w(),section:$?.section??O(),required:$?.required??E()},clearButtonProps:{label:R,classNames:{clearButton:Z?.clearButton??c(),root:Z?.root??f(),icon:Z?.icon??l(),iconRaw:{iconRaw:Z?.iconRaw?.iconRaw??u(),root:Z?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:Q?.chevron??i(),root:Q?.root??s(),open:{iconRaw:Q?.open?.iconRaw??a(),root:Q?.open?.root??o()},close:{iconRaw:Q?.close?.iconRaw??a(),root:Q?.close?.root??o()}}}};return A(e,{"data-searchable":B,classNames:{dropdown:X?.dropdown??r(),root:X?.root??g(),options:X?.options??h(),option:X?.option??m(),empty:X?.empty??p(),search:X?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:Y?.dropdownScrollAreaAutosize??_()}},target:A(ee,{...ne}),dropdownTopSlot:B&&A(n,{searchPlaceholder:V,startSlot:H,classNames:{input:U?.input??v(),wrapper:U?.wrapper??b(),section:U?.section??y()}}),...q,children:A(t,{emptyProps:{emptyText:te,classNames:{empty:X?.empty??p()}},creatableProps:{creatable:!1}})})};export{j 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?: ReactNode;\n description?: ReactNode;\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 required?: boolean;\n autoComplete?: 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 description,\n placeholder,\n required,\n autoComplete,\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 description,\n required,\n autoComplete,\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":"u8BAmEA,MAAa,GAAU,CACrB,QACA,cACA,cACA,WACA,eACA,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,GAAc,CAClB,cACA,QACA,cACA,WACA,eACA,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,GAAD,CAAgB,GAAI,GAAe,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
+ {"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?: ReactNode;\n description?: ReactNode;\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 required?: boolean;\n autoComplete?: string;\n disabled?: boolean;\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 description,\n placeholder,\n required,\n autoComplete,\n disabled,\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 description,\n required,\n autoComplete,\n disabled,\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":"u8BAoEA,MAAa,GAAU,CACrB,QACA,cACA,cACA,WACA,eACA,WACA,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,GACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,GAAc,CAClB,cACA,QACA,cACA,WACA,eACA,WACA,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,GAAD,CAAgB,GAAI,GAAe,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,GACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}
@@ -9,12 +9,14 @@ type DropzoneProps = Omit<DropzoneBaseProps, 'children' | 'classNames'> & {
9
9
  label?: ReactNode;
10
10
  description?: ReactNode;
11
11
  error?: ReactNode;
12
+ required?: boolean;
12
13
  fileListHeight?: number | string;
13
14
  classNames?: {
14
15
  dropzone?: string;
15
16
  root?: string;
16
17
  labelWrapper?: string;
17
18
  label?: string;
19
+ required?: string;
18
20
  description?: string;
19
21
  error?: string;
20
22
  uploadedFiles?: string;
@@ -29,6 +31,7 @@ declare const Dropzone: ({
29
31
  label,
30
32
  description,
31
33
  error,
34
+ required,
32
35
  fileListHeight: _fileListHeight,
33
36
  classNames,
34
37
  inputId,
@@ -1 +1 @@
1
- {"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA0BY,aAAA,GAAgB,IAAA,CAC1B,iBAAA;EAGA,QAAA,GAAW,SAAA,GAAY,iBAAA;EACvB,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,cAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;IACA,aAAA;IACA,iBAAA;IACA,qBAAA;IACA,YAAA,GAAe,iBAAA;IACf,gBAAA,GAAmB,iBAAA;EAAA;AAAA;AAAA,cAMV,QAAA;EAAY,QAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,cAAA,EAAA,eAAA;EAAA,UAAA;EAAA,OAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAUtB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA2BY,aAAA,GAAgB,IAAA,CAC1B,iBAAA;EAGA,QAAA,GAAW,SAAA,GAAY,iBAAA;EACvB,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,QAAA;EACA,cAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,QAAA;IACA,WAAA;IACA,KAAA;IACA,aAAA;IACA,iBAAA;IACA,qBAAA;IACA,YAAA,GAAe,iBAAA;IACf,gBAAA,GAAmB,iBAAA;EAAA;AAAA;AAAA,cAMV,QAAA;EAAY,QAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,cAAA,EAAA,eAAA;EAAA,UAAA;EAAA,OAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAWtB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -1,2 +1,2 @@
1
- import{UploadedFiles as e}from"../../data-display/uploaded-files/UploadedFiles.mjs";import{DropzoneBase as t}from"./DropzoneBase.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dropzone as r,dropzoneDescription as i,dropzoneDropzone as a,dropzoneError as o,dropzoneLabel as s,dropzoneLabelWrapper as c,dropzoneRoot as l,dropzoneUploadedFile as u,dropzoneUploadedFiles as d,dropzoneUploadedFilesListItem as f}from"@mage-ui/styled-system/recipes";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useId as h}from"react";const g=({children:g,label:_,description:v,error:y,fileListHeight:b,classNames:x,inputId:S,direction:C=`default`,...w})=>{let T=h(),E=S??T;return m(`div`,{className:n(x?.dropzone??r(),x?.root??l()),children:[(_||v)&&m(`div`,{className:x?.labelWrapper??c(),children:[_&&p(`label`,{htmlFor:E,className:x?.label??s(),children:_}),v&&p(`p`,{className:x?.description??i(),children:v})]}),p(t,{...w,inputId:E,direction:C,classNames:{...x?.dropzoneDropzone??{},dropzoneBase:x?.dropzoneDropzone?.dropzoneBase??a()},children:({files:t,isUploading:n,removeFile:r})=>g===void 0?Object.keys(t).length>0?p(e,{classNames:{uploadedFiles:x?.uploadedFiles??d(),root:x?.uploadedFilesRoot},children:Object.values(t).map(t=>p(e.Item,{fileName:t.name,fileType:t.type,fileSize:`${(t.size/1024).toFixed(1)} KB`,fileDate:t.date,url:t.url,onRemove:()=>r(t.id),classNames:{listItem:x?.uploadedFilesListItem??f(),uploadedFile:{...x?.uploadedFile,uploadedFile:x?.uploadedFile?.uploadedFile??u()}}},t.id))}):null:typeof g==`function`?g({files:t,isUploading:n,removeFile:r}):g}),y&&p(`p`,{className:x?.error??o(),children:y})]})};export{g as Dropzone};
1
+ import{UploadedFiles as e}from"../../data-display/uploaded-files/UploadedFiles.mjs";import{DropzoneBase as t}from"./DropzoneBase.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dropzone as r,dropzoneDescription as i,dropzoneDropzone as a,dropzoneError as o,dropzoneLabel as s,dropzoneLabelWrapper as c,dropzoneRequired as l,dropzoneRoot as u,dropzoneUploadedFile as d,dropzoneUploadedFiles as f,dropzoneUploadedFilesListItem as p}from"@mage-ui/styled-system/recipes";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useId as g}from"react";const _=({children:_,label:v,description:y,error:b,required:x,fileListHeight:S,classNames:C,inputId:w,direction:T=`default`,...E})=>{let D=g(),O=w??D;return h(`div`,{className:n(C?.dropzone??r(),C?.root??u()),"data-error":b?`true`:void 0,children:[(v||y)&&h(`div`,{className:C?.labelWrapper??c(),children:[v&&h(`label`,{htmlFor:O,className:C?.label??s(),children:[v,x&&m(`span`,{"aria-hidden":`true`,className:C?.required??l(),children:` *`})]}),y&&m(`p`,{className:C?.description??i(),children:y})]}),m(t,{...E,inputId:O,direction:T,classNames:{...C?.dropzoneDropzone??{},dropzoneBase:C?.dropzoneDropzone?.dropzoneBase??a()},children:({files:t,isUploading:n,removeFile:r})=>_===void 0?Object.keys(t).length>0?m(e,{classNames:{uploadedFiles:C?.uploadedFiles??f(),root:C?.uploadedFilesRoot},children:Object.values(t).map(t=>m(e.Item,{fileName:t.name,fileType:t.type,fileSize:`${(t.size/1024).toFixed(1)} KB`,fileDate:t.date,url:t.url,onRemove:()=>r(t.id),classNames:{listItem:C?.uploadedFilesListItem??p(),uploadedFile:{...C?.uploadedFile,uploadedFile:C?.uploadedFile?.uploadedFile??d()}}},t.id))}):null:typeof _==`function`?_({files:t,isUploading:n,removeFile:r}):_}),b&&m(`p`,{className:C?.error??o(),children:b})]})};export{_ as Dropzone};
2
2
  //# sourceMappingURL=Dropzone.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Dropzone.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzone,\n dropzoneDescription,\n dropzoneDropzone,\n dropzoneError,\n dropzoneLabel,\n dropzoneLabelWrapper,\n dropzoneRoot,\n dropzoneUploadedFile,\n dropzoneUploadedFiles,\n dropzoneUploadedFilesListItem,\n} from '@mage-ui/styled-system/recipes';\nimport {\n type UploadedFileProps,\n UploadedFiles,\n} from '@/components/data-display';\n\nimport {\n DropzoneBase,\n type DropzoneBaseProps,\n type FileData,\n} from './DropzoneBase';\n\nexport type DropzoneProps = Omit<\n DropzoneBaseProps,\n 'children' | 'classNames'\n> & {\n children?: ReactNode | DropzoneBaseProps['children'];\n label?: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n fileListHeight?: number | string;\n classNames?: {\n dropzone?: string;\n root?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n uploadedFiles?: string;\n uploadedFilesRoot?: string;\n uploadedFilesListItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n dropzoneDropzone?: DropzoneBaseProps['classNames'];\n };\n};\n\nexport type { FileData };\n\nexport const Dropzone = ({\n children,\n label,\n description,\n error,\n fileListHeight: _fileListHeight,\n classNames,\n inputId,\n direction = 'default',\n ...baseProps\n}: DropzoneProps) => {\n const generatedId = useId();\n const groupId = inputId ?? generatedId;\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n >\n {(label || description) && (\n <div className={classNames?.labelWrapper ?? dropzoneLabelWrapper()}>\n {label && (\n <label\n htmlFor={groupId}\n className={classNames?.label ?? dropzoneLabel()}\n >\n {label}\n </label>\n )}\n {description && (\n <p className={classNames?.description ?? dropzoneDescription()}>\n {description}\n </p>\n )}\n </div>\n )}\n <DropzoneBase\n {...baseProps}\n inputId={groupId}\n direction={direction}\n classNames={{\n ...(classNames?.dropzoneDropzone ?? {}),\n dropzoneBase:\n classNames?.dropzoneDropzone?.dropzoneBase ?? dropzoneDropzone(),\n }}\n >\n {({ files, isUploading, removeFile }) => {\n if (children !== undefined) {\n return typeof children === 'function'\n ? children({ files, isUploading, removeFile })\n : children;\n }\n return Object.keys(files).length > 0 ? (\n <UploadedFiles\n classNames={{\n uploadedFiles:\n classNames?.uploadedFiles ?? dropzoneUploadedFiles(),\n root: classNames?.uploadedFilesRoot,\n }}\n >\n {Object.values(files).map((file) => (\n <UploadedFiles.Item\n key={file.id}\n fileName={file.name}\n fileType={file.type}\n fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n fileDate={file.date}\n url={file.url}\n onRemove={() => removeFile(file.id)}\n classNames={{\n listItem:\n classNames?.uploadedFilesListItem ??\n dropzoneUploadedFilesListItem(),\n uploadedFile: {\n ...classNames?.uploadedFile,\n uploadedFile:\n classNames?.uploadedFile?.uploadedFile ??\n dropzoneUploadedFile(),\n },\n }}\n />\n ))}\n </UploadedFiles>\n ) : null;\n }}\n </DropzoneBase>\n {error && <p className={classNames?.error ?? dropzoneError()}>{error}</p>}\n </div>\n );\n};\n"],"mappings":"yhBAoDA,MAAa,GAAY,CACvB,WACA,QACA,cACA,QACA,eAAgB,EAChB,aACA,UACA,YAAY,UACZ,GAAG,KACgB,CACnB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAE3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,UAJH,EAMI,GAAS,IACT,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAAsB,UAAlE,CACG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAe,UAE9C,EACK,CAAA,CAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAAqB,UAC3D,EACC,CAAA,CAEF,GAER,EAAC,EAAD,CACE,GAAI,EACJ,QAAS,EACE,YACX,WAAY,CACV,GAAI,GAAY,kBAAoB,EAAE,CACtC,aACE,GAAY,kBAAkB,cAAgB,GAAkB,CACnE,WAEC,CAAE,QAAO,cAAa,gBAClB,IAAa,IAAA,GAKV,OAAO,KAAK,EAAM,CAAC,OAAS,EACjC,EAAC,EAAD,CACE,WAAY,CACV,cACE,GAAY,eAAiB,GAAuB,CACtD,KAAM,GAAY,kBACnB,UAEA,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,EAAc,KAAf,CAEE,SAAU,EAAK,KACf,SAAU,EAAK,KACf,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,GAAG,CACnC,WAAY,CACV,SACE,GAAY,uBACZ,GAA+B,CACjC,aAAc,CACZ,GAAG,GAAY,aACf,aACE,GAAY,cAAc,cAC1B,GAAsB,CACzB,CACF,CACD,CAlBK,EAAK,GAkBV,CACF,CACY,CAAA,CACd,KAnCK,OAAO,GAAa,WACvB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CAC5C,EAmCK,CAAA,CACd,GAAS,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAe,UAAG,EAAU,CAAA,CACrE"}
1
+ {"version":3,"file":"Dropzone.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzone,\n dropzoneDescription,\n dropzoneDropzone,\n dropzoneError,\n dropzoneLabel,\n dropzoneLabelWrapper,\n dropzoneRequired,\n dropzoneRoot,\n dropzoneUploadedFile,\n dropzoneUploadedFiles,\n dropzoneUploadedFilesListItem,\n} from '@mage-ui/styled-system/recipes';\nimport {\n type UploadedFileProps,\n UploadedFiles,\n} from '@/components/data-display';\n\nimport {\n DropzoneBase,\n type DropzoneBaseProps,\n type FileData,\n} from './DropzoneBase';\n\nexport type DropzoneProps = Omit<\n DropzoneBaseProps,\n 'children' | 'classNames'\n> & {\n children?: ReactNode | DropzoneBaseProps['children'];\n label?: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n required?: boolean;\n fileListHeight?: number | string;\n classNames?: {\n dropzone?: string;\n root?: string;\n labelWrapper?: string;\n label?: string;\n required?: string;\n description?: string;\n error?: string;\n uploadedFiles?: string;\n uploadedFilesRoot?: string;\n uploadedFilesListItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n dropzoneDropzone?: DropzoneBaseProps['classNames'];\n };\n};\n\nexport type { FileData };\n\nexport const Dropzone = ({\n children,\n label,\n description,\n error,\n required,\n fileListHeight: _fileListHeight,\n classNames,\n inputId,\n direction = 'default',\n ...baseProps\n}: DropzoneProps) => {\n const generatedId = useId();\n const groupId = inputId ?? generatedId;\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n data-error={error ? 'true' : undefined}\n >\n {(label || description) && (\n <div className={classNames?.labelWrapper ?? dropzoneLabelWrapper()}>\n {label && (\n <label\n htmlFor={groupId}\n className={classNames?.label ?? dropzoneLabel()}\n >\n {label}\n {required && (\n <span\n aria-hidden='true'\n className={classNames?.required ?? dropzoneRequired()}\n >\n {' *'}\n </span>\n )}\n </label>\n )}\n {description && (\n <p className={classNames?.description ?? dropzoneDescription()}>\n {description}\n </p>\n )}\n </div>\n )}\n <DropzoneBase\n {...baseProps}\n inputId={groupId}\n direction={direction}\n classNames={{\n ...(classNames?.dropzoneDropzone ?? {}),\n dropzoneBase:\n classNames?.dropzoneDropzone?.dropzoneBase ?? dropzoneDropzone(),\n }}\n >\n {({ files, isUploading, removeFile }) => {\n if (children !== undefined) {\n return typeof children === 'function'\n ? children({ files, isUploading, removeFile })\n : children;\n }\n return Object.keys(files).length > 0 ? (\n <UploadedFiles\n classNames={{\n uploadedFiles:\n classNames?.uploadedFiles ?? dropzoneUploadedFiles(),\n root: classNames?.uploadedFilesRoot,\n }}\n >\n {Object.values(files).map((file) => (\n <UploadedFiles.Item\n key={file.id}\n fileName={file.name}\n fileType={file.type}\n fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n fileDate={file.date}\n url={file.url}\n onRemove={() => removeFile(file.id)}\n classNames={{\n listItem:\n classNames?.uploadedFilesListItem ??\n dropzoneUploadedFilesListItem(),\n uploadedFile: {\n ...classNames?.uploadedFile,\n uploadedFile:\n classNames?.uploadedFile?.uploadedFile ??\n dropzoneUploadedFile(),\n },\n }}\n />\n ))}\n </UploadedFiles>\n ) : null;\n }}\n </DropzoneBase>\n {error && <p className={classNames?.error ?? dropzoneError()}>{error}</p>}\n </div>\n );\n};\n"],"mappings":"+iBAuDA,MAAa,GAAY,CACvB,WACA,QACA,cACA,QACA,WACA,eAAgB,EAChB,aACA,UACA,YAAY,UACZ,GAAG,KACgB,CACnB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAE3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,aAAY,EAAQ,OAAS,IAAA,YAL/B,EAOI,GAAS,IACT,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAAsB,UAAlE,CACG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAe,UAFjD,CAIG,EACA,GACC,EAAC,OAAD,CACE,cAAY,OACZ,UAAW,GAAY,UAAY,GAAkB,UAEpD,KACI,CAAA,CAEH,GAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAAqB,UAC3D,EACC,CAAA,CAEF,GAER,EAAC,EAAD,CACE,GAAI,EACJ,QAAS,EACE,YACX,WAAY,CACV,GAAI,GAAY,kBAAoB,EAAE,CACtC,aACE,GAAY,kBAAkB,cAAgB,GAAkB,CACnE,WAEC,CAAE,QAAO,cAAa,gBAClB,IAAa,IAAA,GAKV,OAAO,KAAK,EAAM,CAAC,OAAS,EACjC,EAAC,EAAD,CACE,WAAY,CACV,cACE,GAAY,eAAiB,GAAuB,CACtD,KAAM,GAAY,kBACnB,UAEA,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,EAAc,KAAf,CAEE,SAAU,EAAK,KACf,SAAU,EAAK,KACf,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,GAAG,CACnC,WAAY,CACV,SACE,GAAY,uBACZ,GAA+B,CACjC,aAAc,CACZ,GAAG,GAAY,aACf,aACE,GAAY,cAAc,cAC1B,GAAsB,CACzB,CACF,CACD,CAlBK,EAAK,GAkBV,CACF,CACY,CAAA,CACd,KAnCK,OAAO,GAAa,WACvB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CAC5C,EAmCK,CAAA,CACd,GAAS,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAe,UAAG,EAAU,CAAA,CACrE"}
@@ -67,6 +67,7 @@ type DropzoneBaseProps = {
67
67
  inputId?: string;
68
68
  onFileUploaded?: (file: FileData) => void; /** Called when a file is about to be removed. Use to trigger server-side deletion. Fire-and-forget — errors are swallowed. */
69
69
  onRemoveFile?: (file: FileData) => void | Promise<void>;
70
+ disabled?: boolean;
70
71
  hideWhenFull?: boolean;
71
72
  classNames?: {
72
73
  dropzoneBase?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"DropzoneBase.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"mappings":";;;;;;KAkCY,QAAA;EACV,EAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,iBAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,EAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EAXU;;;;;EAiBV,GAAA;EAXwB;;;;;EAiBxB,QAAA,GAAW,QAAA,EAMQ;EAJnB,QAAA,YAMU;EAJV,OAAA,WAoBQ;EAlBR,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,IAAA,GAAO,MAAA;EACP,OAAA,GAAU,MAAA;EAsBY;;;;;;;;;;;;;;EAPtB,MAAA,cAAoB,MAAA;EACpB,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA,WAzCxB;EA2CA,YAAA,IAAgB,IAAA,EAAM,QAAA,YAAoB,OAAA;EAC1C,YAAA;EACA,UAAA;IACE,YAAA;IACA,IAAA;IACA,KAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;EAEF,SAAA;AAAA"}
1
+ {"version":3,"file":"DropzoneBase.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"mappings":";;;;;;KAkCY,QAAA;EACV,EAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,iBAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,EAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EAXU;;;;;EAiBV,GAAA;EAXwB;;;;;EAiBxB,QAAA,GAAW,QAAA,EAMQ;EAJnB,QAAA,YAMU;EAJV,OAAA,WAoBQ;EAlBR,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,IAAA,GAAO,MAAA;EACP,OAAA,GAAU,MAAA;EAsBY;;;;;;;;;;;;;;EAPtB,MAAA,cAAoB,MAAA;EACpB,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA,WAzCxB;EA2CA,YAAA,IAAgB,IAAA,EAAM,QAAA,YAAoB,OAAA;EAC1C,QAAA;EACA,YAAA;EACA,UAAA;IACE,YAAA;IACA,IAAA;IACA,KAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;EAEF,SAAA;AAAA"}
@@ -1,2 +1,2 @@
1
- import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneBase as i,dropzoneBaseHint as a,dropzoneBaseIcon as o,dropzoneBaseIconSlot as s,dropzoneBaseInput as c,dropzoneBaseInputInner as l,dropzoneBaseLoader as u,dropzoneBaseLoaderRoot as d,dropzoneBaseRoot as f,dropzoneBaseSubtitle as p,dropzoneBaseTextSlot as m,dropzoneBaseTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,headers:C,children:w,initialFiles:T={},maxFiles:E,url:D,uploader:O,autoSend:k=!0,maxSize:A,onChange:j,accept:M,title:N,subtitle:P,hint:F,inputId:I,onFileUploaded:L,onRemoveFile:R,classNames:z,direction:B=`default`,hideWhenFull:V=!1})=>{let H=b(null),U=b(new Map),{files:W,isUploading:G,uploadMultipleFiles:K,addFile:q,removeFile:J}=n(D,T,L,C,O),Y=b(W);Y.current=W;let X=y(e=>{if(R){let t=Y.current[e];t&&Promise.resolve(R(t)).catch(console.error)}J(e),U.current.delete(e),!k&&j&&j(Array.from(U.current.values()))},[J,k,j,R]),Z=y(async e=>{let t=Object.keys(W).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(k)await K(r,S);else{for(let e of r){let t=q(e);U.current.set(t,e)}j?.(Array.from(U.current.values()))}},[k,K,q,S,W,E,j]),Q=E!==void 0&&Object.keys(W).length>=E;return v(`div`,{className:r(z?.dropzoneBase??i(),z?.root??f()),"data-direction":B,children:[(!V||!Q)&&v(x,{ref:H,onDrop:Z,disabled:Q,loading:G,accept:M,maxSize:A,preventDropOnDocument:!0,inputProps:{id:I},classNames:{root:z?.input?.root??r(c(),`group`),inner:z?.input?.inner??l()},children:[_(`div`,{className:z?.iconSlot??s(),children:G?_(t,{classNames:{loader:z?.loader?.loader??u(),root:z?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:z?.dropzoneIcon?.icon??o()}})})]})}),v(`div`,{className:z?.textSlot??m(),children:[_(`span`,{className:z?.title??h(),children:N||`Upload files`}),_(`span`,{className:z?.subtitle??p(),children:P||`Drag images here or click to select files`}),_(`span`,{className:z?.hint??a(),children:F||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:W,isUploading:G,removeFile:X})]})};export{S as DropzoneBase};
1
+ import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneBase as i,dropzoneBaseHint as a,dropzoneBaseIcon as o,dropzoneBaseIconSlot as s,dropzoneBaseInput as c,dropzoneBaseInputInner as l,dropzoneBaseLoader as u,dropzoneBaseLoaderRoot as d,dropzoneBaseRoot as f,dropzoneBaseSubtitle as p,dropzoneBaseTextSlot as m,dropzoneBaseTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,headers:C,children:w,initialFiles:T={},maxFiles:E,url:D,uploader:O,autoSend:k=!0,maxSize:A,onChange:j,accept:M,title:N,subtitle:P,hint:F,inputId:I,onFileUploaded:L,onRemoveFile:R,disabled:z=!1,classNames:B,direction:V=`default`,hideWhenFull:H=!1})=>{let U=b(null),W=b(new Map),{files:G,isUploading:K,uploadMultipleFiles:q,addFile:J,removeFile:Y}=n(D,T,L,C,O),X=b(G);X.current=G;let Z=y(e=>{if(R){let t=X.current[e];t&&Promise.resolve(R(t)).catch(console.error)}Y(e),W.current.delete(e),!k&&j&&j(Array.from(W.current.values()))},[Y,k,j,R]),Q=y(async e=>{let t=Object.keys(G).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(k)await q(r,S);else{for(let e of r){let t=J(e);W.current.set(t,e)}j?.(Array.from(W.current.values()))}},[k,q,J,S,G,E,j]),$=E!==void 0&&Object.keys(G).length>=E;return v(`div`,{className:r(B?.dropzoneBase??i(),B?.root??f()),"data-direction":V,children:[(!H||!$)&&v(x,{ref:U,onDrop:Q,disabled:z||$,loading:K,accept:M,maxSize:A,preventDropOnDocument:!0,inputProps:{id:I},classNames:{root:B?.input?.root??r(c(),`group`),inner:B?.input?.inner??l()},children:[_(`div`,{className:B?.iconSlot??s(),children:K?_(t,{classNames:{loader:B?.loader?.loader??u(),root:B?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:B?.dropzoneIcon?.icon??o()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:B?.dropzoneIcon?.icon??o()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:B?.dropzoneIcon?.icon??o()}})})]})}),v(`div`,{className:B?.textSlot??m(),children:[_(`span`,{className:B?.title??h(),children:N||`Upload files`}),_(`span`,{className:B?.subtitle??p(),children:P||`Drag images here or click to select files`}),_(`span`,{className:B?.hint??a(),children:F||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:G,isUploading:K,removeFile:Z})]})};export{S as DropzoneBase};
2
2
  //# sourceMappingURL=DropzoneBase.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropzoneBase.mjs","names":["MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzoneBase,\n dropzoneBaseHint,\n dropzoneBaseIcon,\n dropzoneBaseIconSlot,\n dropzoneBaseInput,\n dropzoneBaseInputInner,\n dropzoneBaseLoader,\n dropzoneBaseLoaderRoot,\n dropzoneBaseRoot,\n dropzoneBaseSubtitle,\n dropzoneBaseTextSlot,\n dropzoneBaseTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n Icon,\n type IconProps,\n LoaderOval,\n type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport type {\n Uploader,\n UploadProgress,\n UploadResponse,\n} from './upload-service';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type { Uploader, UploadProgress, UploadResponse };\n\nexport type FileData = {\n id: string;\n name: string;\n size: number;\n type: string;\n date: string;\n uploaded: boolean;\n loading: boolean;\n url: string;\n token?: string;\n error?: string;\n progress?: number; // (0-100)\n};\n\nexport type DropzoneBaseProps = {\n children: ({\n files,\n isUploading,\n removeFile,\n }: {\n files: Record<string, FileData>;\n isUploading: boolean;\n removeFile: (id: string) => void;\n }) => ReactNode;\n initialFiles?: Record<string, FileData>;\n maxFiles?: number;\n /**\n * Endpoint used by the built-in FormData uploader. Required when\n * `autoSend=true` (default) AND no custom `uploader` is provided.\n * Ignored if `uploader` is provided.\n */\n url?: string;\n /**\n * Custom upload function that replaces the built-in FormData POST.\n * Use it for multi-step flows (e.g. presigned S3) or any non-standard\n * transport. When set, the `url` prop is ignored.\n */\n uploader?: Uploader;\n /** When false, files are added to state but not uploaded automatically. Default: true. */\n autoSend?: boolean;\n /** Maximum file size in bytes. Files exceeding this will be rejected. */\n maxSize?: number;\n /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n onChange?: (files: File[]) => void;\n data?: Record<string, unknown>;\n headers?: Record<string, string>;\n /**\n * Files the dropzone accepts. Forwarded directly to Mantine's\n * `<Dropzone accept>`.\n *\n * Two formats are supported:\n * - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches\n * the native `react-dropzone` shape and produces a correct\n * `<input accept>` with MIME + extension pairs. Required when any\n * key would otherwise be a bare extension string.\n * - **Array**: `string[]` of MIME types (no `.ext` entries) — kept\n * for backward compatibility. Mixing `.ext` strings into the\n * array triggers a `Skipped \"...\" because it is not a valid MIME\n * type` warning from `react-dropzone` v15+.\n */\n accept?: string[] | Record<string, string[]>;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n inputId?: string;\n onFileUploaded?: (file: FileData) => void;\n /** Called when a file is about to be removed. Use to trigger server-side deletion. Fire-and-forget — errors are swallowed. */\n onRemoveFile?: (file: FileData) => void | Promise<void>;\n hideWhenFull?: boolean;\n classNames?: {\n dropzoneBase?: string;\n root?: string;\n input?: {\n root?: string;\n inner?: string;\n };\n iconSlot?: string;\n dropzoneIcon?: IconProps['classNames'];\n loader?: LoaderOvalProps['classNames'];\n textSlot?: string;\n title?: string;\n subtitle?: string;\n hint?: string;\n };\n direction?: 'default' | 'reverse';\n};\n\nexport const DropzoneBase = ({\n data,\n headers,\n children,\n initialFiles = {},\n maxFiles,\n url,\n uploader,\n autoSend = true,\n maxSize,\n onChange,\n accept,\n title,\n subtitle,\n hint,\n inputId,\n onFileUploaded,\n onRemoveFile,\n classNames,\n direction = 'default',\n hideWhenFull = false,\n}: DropzoneBaseProps) => {\n const dropzoneRef = useRef<HTMLDivElement>(null);\n const rawFilesRef = useRef<Map<string, File>>(new Map());\n const {\n files,\n isUploading,\n uploadMultipleFiles,\n addFile,\n removeFile: hookRemoveFile,\n } = useDropzoneState(url, initialFiles, onFileUploaded, headers, uploader);\n\n const filesRef = useRef<Record<string, FileData>>(files);\n filesRef.current = files;\n\n const removeFile = useCallback(\n (id: string) => {\n if (onRemoveFile) {\n const fileData = filesRef.current[id];\n if (fileData) {\n Promise.resolve(onRemoveFile(fileData)).catch(console.error);\n }\n }\n hookRemoveFile(id);\n rawFilesRef.current.delete(id);\n if (!autoSend && onChange) {\n onChange(Array.from(rawFilesRef.current.values()));\n }\n },\n [hookRemoveFile, autoSend, onChange, onRemoveFile],\n );\n\n const handleDrop = useCallback(\n async (acceptedFiles: File[]) => {\n const currentCount = Object.keys(files).length;\n const max = maxFiles ?? Number.POSITIVE_INFINITY;\n const remainingSlots = max - currentCount;\n if (remainingSlots <= 0) {\n return;\n }\n const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n if (autoSend) {\n await uploadMultipleFiles(filesToProcess, data);\n } else {\n for (const file of filesToProcess) {\n const id = addFile(file);\n rawFilesRef.current.set(id, file);\n }\n onChange?.(Array.from(rawFilesRef.current.values()));\n }\n },\n [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n );\n\n const isFull =\n maxFiles !== undefined && Object.keys(files).length >= maxFiles;\n\n return (\n <div\n className={cx(\n classNames?.dropzoneBase ?? dropzoneBase(),\n classNames?.root ?? dropzoneBaseRoot(),\n )}\n data-direction={direction}\n >\n {(!hideWhenFull || !isFull) && (\n <MantineDropzone\n ref={dropzoneRef}\n onDrop={handleDrop}\n disabled={isFull}\n loading={isUploading}\n accept={accept}\n maxSize={maxSize}\n preventDropOnDocument\n inputProps={{ id: inputId }}\n classNames={{\n root: classNames?.input?.root ?? cx(dropzoneBaseInput(), 'group'),\n inner: classNames?.input?.inner ?? dropzoneBaseInputInner(),\n }}\n >\n <div className={classNames?.iconSlot ?? dropzoneBaseIconSlot()}>\n {isUploading ? (\n <LoaderOval\n classNames={{\n loader: classNames?.loader?.loader ?? dropzoneBaseLoader(),\n root: classNames?.loader?.root ?? dropzoneBaseLoaderRoot(),\n }}\n />\n ) : (\n <>\n <MantineDropzone.Idle>\n <Icon\n name='mage-dropzone-upload-01'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Idle>\n <MantineDropzone.Accept>\n <Icon\n name='mage-dropzone-thumbs-up'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Accept>\n <MantineDropzone.Reject>\n <Icon\n name='mage-dropzone-thumbs-down'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Reject>\n </>\n )}\n </div>\n <div className={classNames?.textSlot ?? dropzoneBaseTextSlot()}>\n <span className={classNames?.title ?? dropzoneBaseTitle()}>\n {title || 'Upload files'}\n </span>\n <span className={classNames?.subtitle ?? dropzoneBaseSubtitle()}>\n {subtitle || 'Drag images here or click to select files'}\n </span>\n <span className={classNames?.hint ?? dropzoneBaseHint()}>\n {hint ||\n 'Attach as many files as you like, each file should not exceed 5mb'}\n </span>\n </div>\n </MantineDropzone>\n )}\n {children({ files, isUploading, removeFile })}\n </div>\n );\n};\n"],"mappings":"8tBAyHA,MAAa,GAAgB,CAC3B,OACA,UACA,WACA,eAAe,EAAE,CACjB,WACA,MACA,WACA,WAAW,GACX,UACA,WACA,SACA,QACA,WACA,OACA,UACA,iBACA,eACA,aACA,YAAY,UACZ,eAAe,MACQ,CACvB,IAAM,EAAc,EAAuB,KAAK,CAC1C,EAAc,EAA0B,IAAI,IAAM,CAClD,CACJ,QACA,cACA,sBACA,UACA,WAAY,GACV,EAAiB,EAAK,EAAc,EAAgB,EAAS,EAAS,CAEpE,EAAW,EAAiC,EAAM,CACxD,EAAS,QAAU,EAEnB,IAAM,EAAa,EAChB,GAAe,CACd,GAAI,EAAc,CAChB,IAAM,EAAW,EAAS,QAAQ,GAC9B,GACF,QAAQ,QAAQ,EAAa,EAAS,CAAC,CAAC,MAAM,QAAQ,MAAM,CAGhE,EAAe,EAAG,CAClB,EAAY,QAAQ,OAAO,EAAG,CAC1B,CAAC,GAAY,GACf,EAAS,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,EAGtD,CAAC,EAAgB,EAAU,EAAU,EAAa,CACnD,CAEK,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EAC7B,GAAI,GAAkB,EACpB,OAEF,IAAM,EAAiB,EAAc,MAAM,EAAG,EAAe,CAC7D,GAAI,EACF,MAAM,EAAoB,EAAgB,EAAK,KAC1C,CACL,IAAK,IAAM,KAAQ,EAAgB,CACjC,IAAM,EAAK,EAAQ,EAAK,CACxB,EAAY,QAAQ,IAAI,EAAI,EAAK,CAEnC,IAAW,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,GAGxD,CAAC,EAAU,EAAqB,EAAS,EAAM,EAAO,EAAU,EAAS,CAC1E,CAEK,EACJ,IAAa,IAAA,IAAa,OAAO,KAAK,EAAM,CAAC,QAAU,EAEzD,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,cAAgB,GAAc,CAC1C,GAAY,MAAQ,GAAkB,CACvC,CACD,iBAAgB,WALlB,EAOI,CAAC,GAAgB,CAAC,IAClB,EAACA,EAAD,CACE,IAAK,EACL,OAAQ,EACR,SAAU,EACV,QAAS,EACD,SACC,UACT,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KAAM,GAAY,OAAO,MAAQ,EAAG,GAAmB,CAAE,QAAQ,CACjE,MAAO,GAAY,OAAO,OAAS,GAAwB,CAC5D,UAZH,CAcE,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAsB,UAC3D,EACC,EAAC,EAAD,CACE,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAoB,CAC1D,KAAM,GAAY,QAAQ,MAAQ,GAAwB,CAC3D,CACD,CAAA,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KACE,GAAY,cAAc,MAAQ,GAAkB,CACvD,CACD,CAAA,CACmB,CAAA,CACvB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KACE,GAAY,cAAc,MAAQ,GAAkB,CACvD,CACD,CAAA,CACqB,CAAA,CACzB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KACE,GAAY,cAAc,MAAQ,GAAkB,CACvD,CACD,CAAA,CACqB,CAAA,CACxB,CAAA,CAAA,CAED,CAAA,CACN,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAsB,UAA9D,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,OAAS,GAAmB,UACtD,GAAS,eACL,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAAsB,UAC5D,GAAY,4CACR,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAkB,UACpD,GACC,oEACG,CAAA,CACH,GACU,GAEnB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CACzC"}
1
+ {"version":3,"file":"DropzoneBase.mjs","names":["MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/DropzoneBase.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzoneBase,\n dropzoneBaseHint,\n dropzoneBaseIcon,\n dropzoneBaseIconSlot,\n dropzoneBaseInput,\n dropzoneBaseInputInner,\n dropzoneBaseLoader,\n dropzoneBaseLoaderRoot,\n dropzoneBaseRoot,\n dropzoneBaseSubtitle,\n dropzoneBaseTextSlot,\n dropzoneBaseTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n Icon,\n type IconProps,\n LoaderOval,\n type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport type {\n Uploader,\n UploadProgress,\n UploadResponse,\n} from './upload-service';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type { Uploader, UploadProgress, UploadResponse };\n\nexport type FileData = {\n id: string;\n name: string;\n size: number;\n type: string;\n date: string;\n uploaded: boolean;\n loading: boolean;\n url: string;\n token?: string;\n error?: string;\n progress?: number; // (0-100)\n};\n\nexport type DropzoneBaseProps = {\n children: ({\n files,\n isUploading,\n removeFile,\n }: {\n files: Record<string, FileData>;\n isUploading: boolean;\n removeFile: (id: string) => void;\n }) => ReactNode;\n initialFiles?: Record<string, FileData>;\n maxFiles?: number;\n /**\n * Endpoint used by the built-in FormData uploader. Required when\n * `autoSend=true` (default) AND no custom `uploader` is provided.\n * Ignored if `uploader` is provided.\n */\n url?: string;\n /**\n * Custom upload function that replaces the built-in FormData POST.\n * Use it for multi-step flows (e.g. presigned S3) or any non-standard\n * transport. When set, the `url` prop is ignored.\n */\n uploader?: Uploader;\n /** When false, files are added to state but not uploaded automatically. Default: true. */\n autoSend?: boolean;\n /** Maximum file size in bytes. Files exceeding this will be rejected. */\n maxSize?: number;\n /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n onChange?: (files: File[]) => void;\n data?: Record<string, unknown>;\n headers?: Record<string, string>;\n /**\n * Files the dropzone accepts. Forwarded directly to Mantine's\n * `<Dropzone accept>`.\n *\n * Two formats are supported:\n * - **Map (preferred)**: `{ [mimeType]: ['.ext', ...] }` — matches\n * the native `react-dropzone` shape and produces a correct\n * `<input accept>` with MIME + extension pairs. Required when any\n * key would otherwise be a bare extension string.\n * - **Array**: `string[]` of MIME types (no `.ext` entries) — kept\n * for backward compatibility. Mixing `.ext` strings into the\n * array triggers a `Skipped \"...\" because it is not a valid MIME\n * type` warning from `react-dropzone` v15+.\n */\n accept?: string[] | Record<string, string[]>;\n title?: ReactNode;\n subtitle?: ReactNode;\n hint?: ReactNode;\n inputId?: string;\n onFileUploaded?: (file: FileData) => void;\n /** Called when a file is about to be removed. Use to trigger server-side deletion. Fire-and-forget — errors are swallowed. */\n onRemoveFile?: (file: FileData) => void | Promise<void>;\n disabled?: boolean;\n hideWhenFull?: boolean;\n classNames?: {\n dropzoneBase?: string;\n root?: string;\n input?: {\n root?: string;\n inner?: string;\n };\n iconSlot?: string;\n dropzoneIcon?: IconProps['classNames'];\n loader?: LoaderOvalProps['classNames'];\n textSlot?: string;\n title?: string;\n subtitle?: string;\n hint?: string;\n };\n direction?: 'default' | 'reverse';\n};\n\nexport const DropzoneBase = ({\n data,\n headers,\n children,\n initialFiles = {},\n maxFiles,\n url,\n uploader,\n autoSend = true,\n maxSize,\n onChange,\n accept,\n title,\n subtitle,\n hint,\n inputId,\n onFileUploaded,\n onRemoveFile,\n disabled = false,\n classNames,\n direction = 'default',\n hideWhenFull = false,\n}: DropzoneBaseProps) => {\n const dropzoneRef = useRef<HTMLDivElement>(null);\n const rawFilesRef = useRef<Map<string, File>>(new Map());\n const {\n files,\n isUploading,\n uploadMultipleFiles,\n addFile,\n removeFile: hookRemoveFile,\n } = useDropzoneState(url, initialFiles, onFileUploaded, headers, uploader);\n\n const filesRef = useRef<Record<string, FileData>>(files);\n filesRef.current = files;\n\n const removeFile = useCallback(\n (id: string) => {\n if (onRemoveFile) {\n const fileData = filesRef.current[id];\n if (fileData) {\n Promise.resolve(onRemoveFile(fileData)).catch(console.error);\n }\n }\n hookRemoveFile(id);\n rawFilesRef.current.delete(id);\n if (!autoSend && onChange) {\n onChange(Array.from(rawFilesRef.current.values()));\n }\n },\n [hookRemoveFile, autoSend, onChange, onRemoveFile],\n );\n\n const handleDrop = useCallback(\n async (acceptedFiles: File[]) => {\n const currentCount = Object.keys(files).length;\n const max = maxFiles ?? Number.POSITIVE_INFINITY;\n const remainingSlots = max - currentCount;\n if (remainingSlots <= 0) {\n return;\n }\n const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n if (autoSend) {\n await uploadMultipleFiles(filesToProcess, data);\n } else {\n for (const file of filesToProcess) {\n const id = addFile(file);\n rawFilesRef.current.set(id, file);\n }\n onChange?.(Array.from(rawFilesRef.current.values()));\n }\n },\n [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n );\n\n const isFull =\n maxFiles !== undefined && Object.keys(files).length >= maxFiles;\n\n return (\n <div\n className={cx(\n classNames?.dropzoneBase ?? dropzoneBase(),\n classNames?.root ?? dropzoneBaseRoot(),\n )}\n data-direction={direction}\n >\n {(!hideWhenFull || !isFull) && (\n <MantineDropzone\n ref={dropzoneRef}\n onDrop={handleDrop}\n disabled={disabled || isFull}\n loading={isUploading}\n accept={accept}\n maxSize={maxSize}\n preventDropOnDocument\n inputProps={{ id: inputId }}\n classNames={{\n root: classNames?.input?.root ?? cx(dropzoneBaseInput(), 'group'),\n inner: classNames?.input?.inner ?? dropzoneBaseInputInner(),\n }}\n >\n <div className={classNames?.iconSlot ?? dropzoneBaseIconSlot()}>\n {isUploading ? (\n <LoaderOval\n classNames={{\n loader: classNames?.loader?.loader ?? dropzoneBaseLoader(),\n root: classNames?.loader?.root ?? dropzoneBaseLoaderRoot(),\n }}\n />\n ) : (\n <>\n <MantineDropzone.Idle>\n <Icon\n name='mage-dropzone-upload-01'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Idle>\n <MantineDropzone.Accept>\n <Icon\n name='mage-dropzone-thumbs-up'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Accept>\n <MantineDropzone.Reject>\n <Icon\n name='mage-dropzone-thumbs-down'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon:\n classNames?.dropzoneIcon?.icon ?? dropzoneBaseIcon(),\n }}\n />\n </MantineDropzone.Reject>\n </>\n )}\n </div>\n <div className={classNames?.textSlot ?? dropzoneBaseTextSlot()}>\n <span className={classNames?.title ?? dropzoneBaseTitle()}>\n {title || 'Upload files'}\n </span>\n <span className={classNames?.subtitle ?? dropzoneBaseSubtitle()}>\n {subtitle || 'Drag images here or click to select files'}\n </span>\n <span className={classNames?.hint ?? dropzoneBaseHint()}>\n {hint ||\n 'Attach as many files as you like, each file should not exceed 5mb'}\n </span>\n </div>\n </MantineDropzone>\n )}\n {children({ files, isUploading, removeFile })}\n </div>\n );\n};\n"],"mappings":"8tBA0HA,MAAa,GAAgB,CAC3B,OACA,UACA,WACA,eAAe,EAAE,CACjB,WACA,MACA,WACA,WAAW,GACX,UACA,WACA,SACA,QACA,WACA,OACA,UACA,iBACA,eACA,WAAW,GACX,aACA,YAAY,UACZ,eAAe,MACQ,CACvB,IAAM,EAAc,EAAuB,KAAK,CAC1C,EAAc,EAA0B,IAAI,IAAM,CAClD,CACJ,QACA,cACA,sBACA,UACA,WAAY,GACV,EAAiB,EAAK,EAAc,EAAgB,EAAS,EAAS,CAEpE,EAAW,EAAiC,EAAM,CACxD,EAAS,QAAU,EAEnB,IAAM,EAAa,EAChB,GAAe,CACd,GAAI,EAAc,CAChB,IAAM,EAAW,EAAS,QAAQ,GAC9B,GACF,QAAQ,QAAQ,EAAa,EAAS,CAAC,CAAC,MAAM,QAAQ,MAAM,CAGhE,EAAe,EAAG,CAClB,EAAY,QAAQ,OAAO,EAAG,CAC1B,CAAC,GAAY,GACf,EAAS,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,EAGtD,CAAC,EAAgB,EAAU,EAAU,EAAa,CACnD,CAEK,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EAC7B,GAAI,GAAkB,EACpB,OAEF,IAAM,EAAiB,EAAc,MAAM,EAAG,EAAe,CAC7D,GAAI,EACF,MAAM,EAAoB,EAAgB,EAAK,KAC1C,CACL,IAAK,IAAM,KAAQ,EAAgB,CACjC,IAAM,EAAK,EAAQ,EAAK,CACxB,EAAY,QAAQ,IAAI,EAAI,EAAK,CAEnC,IAAW,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,GAGxD,CAAC,EAAU,EAAqB,EAAS,EAAM,EAAO,EAAU,EAAS,CAC1E,CAEK,EACJ,IAAa,IAAA,IAAa,OAAO,KAAK,EAAM,CAAC,QAAU,EAEzD,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,cAAgB,GAAc,CAC1C,GAAY,MAAQ,GAAkB,CACvC,CACD,iBAAgB,WALlB,EAOI,CAAC,GAAgB,CAAC,IAClB,EAACA,EAAD,CACE,IAAK,EACL,OAAQ,EACR,SAAU,GAAY,EACtB,QAAS,EACD,SACC,UACT,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KAAM,GAAY,OAAO,MAAQ,EAAG,GAAmB,CAAE,QAAQ,CACjE,MAAO,GAAY,OAAO,OAAS,GAAwB,CAC5D,UAZH,CAcE,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAsB,UAC3D,EACC,EAAC,EAAD,CACE,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAoB,CAC1D,KAAM,GAAY,QAAQ,MAAQ,GAAwB,CAC3D,CACD,CAAA,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KACE,GAAY,cAAc,MAAQ,GAAkB,CACvD,CACD,CAAA,CACmB,CAAA,CACvB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KACE,GAAY,cAAc,MAAQ,GAAkB,CACvD,CACD,CAAA,CACqB,CAAA,CACzB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KACE,GAAY,cAAc,MAAQ,GAAkB,CACvD,CACD,CAAA,CACqB,CAAA,CACxB,CAAA,CAAA,CAED,CAAA,CACN,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAsB,UAA9D,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,OAAS,GAAmB,UACtD,GAAS,eACL,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAAsB,UAC5D,GAAY,4CACR,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAkB,UACpD,GACC,oEACG,CAAA,CACH,GACU,GAEnB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CACzC"}
@@ -24,6 +24,7 @@ type MultiFormProps = {
24
24
  Loading: ComponentType;
25
25
  classNames?: {
26
26
  root?: string;
27
+ multiForm?: string;
27
28
  };
28
29
  stepperProps?: Omit<StepperProps, 'children' | 'active'>;
29
30
  };
@@ -1 +1 @@
1
- {"version":3,"file":"MultiForm.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/MultiForm.tsx"],"mappings":";;;;;;KAiBY,kBAAA;EACV,IAAA;EACA,KAAA,EAAO,WAAA;EACP,KAAA;EACA,WAAA;EACA,QAAA,EAAU,WAAA;AAAA;AAAA,cAGC,aAAA;EAAA,SAAyB,kBAAA;;;KAG1B,cAAA;EACV,IAAA;EACA,QAAA,EAAU,SAAA;EACV,OAAA,EAAS,aAAA;IAAgB,MAAA,EAAQ,OAAA;EAAA;EACjC,OAAA,EAAS,aAAA;EACT,UAAA;IAAe,IAAA;EAAA;EACf,YAAA,GAAe,IAAA,CAAK,YAAA;AAAA;AAAA,cAkET,SAAA;EAAS,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA;AAAA,GAxDnB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;;aAnBqB,kBAAA"}
1
+ {"version":3,"file":"MultiForm.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/MultiForm.tsx"],"mappings":";;;;;;KAiBY,kBAAA;EACV,IAAA;EACA,KAAA,EAAO,WAAA;EACP,KAAA;EACA,WAAA;EACA,QAAA,EAAU,WAAA;AAAA;AAAA,cAGC,aAAA;EAAA,SAAyB,kBAAA;;;KAG1B,cAAA;EACV,IAAA;EACA,QAAA,EAAU,SAAA;EACV,OAAA,EAAS,aAAA;IAAgB,MAAA,EAAQ,OAAA;EAAA;EACjC,OAAA,EAAS,aAAA;EACT,UAAA;IAAe,IAAA;IAAe,SAAA;EAAA;EAC9B,YAAA,GAAe,IAAA,CAAK,YAAA;AAAA;AAAA,cAkET,SAAA;EAAS,IAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA;AAAA,GAxDnB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;;aAnBqB,kBAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"MultiForm.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/MultiForm.tsx"],"sourcesContent":["import {\n Children,\n type ComponentType,\n isValidElement,\n type ReactNode,\n useCallback,\n useState,\n} from 'react';\n\nimport { Formity } from '@formity/react';\n\nimport { NoSsr } from '../../misc/no-ssr/NoSsr';\nimport type { StepperProps } from '../../navigations/stepper/Stepper';\nimport type { SchemaProps } from './parser/Schema';\nimport { Schemas } from './parser/Schemas';\nimport { storage } from './parser/utils/use-local-storage';\n\nexport type MultiFormStepProps = {\n name: string;\n rules: SchemaProps['rules'];\n label?: string;\n description?: string;\n children: SchemaProps['form'];\n};\n\nexport const MultiFormStep = (_props: MultiFormStepProps) => null;\nMultiFormStep.displayName = 'MultiForm.Step';\n\nexport type MultiFormProps = {\n name: string;\n children: ReactNode;\n Success: ComponentType<{ values: Partial<unknown> }>;\n Loading: ComponentType;\n classNames?: { root?: string };\n stepperProps?: Omit<StepperProps, 'children' | 'active'>;\n};\n\nconst MultiFormBase = ({\n name,\n children,\n Success,\n Loading,\n classNames,\n stepperProps,\n}: MultiFormProps) => {\n const [submitted, setSubmitted] = useState(false);\n const [fields, setFields] = useState({});\n\n const onChange = useCallback(\n (values: Partial<unknown>) => {\n setFields({ ...fields, ...values });\n },\n [fields],\n );\n\n const onSubmit = useCallback(() => {\n setSubmitted(true);\n }, []);\n\n if (submitted) {\n storage.set(name, {});\n return <Success values={fields} />;\n }\n\n const schema: SchemaProps[] = Children.toArray(children)\n .filter(isValidElement)\n .map((element) => {\n if (element.type !== MultiFormStep) {\n throw new Error('MultiForm children must be MultiForm.Step elements');\n }\n const props = element.props as MultiFormStepProps;\n return {\n name: props.name,\n rules: props.rules,\n label: props.label,\n description: props.description,\n form: props.children,\n };\n });\n\n const schemaObj = new Schemas(\n name,\n schema,\n storage.get(name, {}),\n classNames,\n stepperProps,\n );\n\n return (\n <NoSsr fallback={<Loading />}>\n <Formity\n schema={schemaObj.toRender()}\n params={{ fields, onChange, onSubmit }}\n initialState={schemaObj.currentState()}\n onReturn={onSubmit}\n />\n </NoSsr>\n );\n};\n\nexport const MultiForm = Object.assign(MultiFormBase, { Step: MultiFormStep });\n"],"mappings":"uUAyBA,MAAa,EAAiB,GAA+B,KAC7D,EAAc,YAAc,iBA0E5B,MAAa,EAAY,OAAO,QA/DT,CACrB,OACA,WACA,UACA,UACA,aACA,kBACoB,CACpB,GAAM,CAAC,EAAW,GAAgB,EAAS,GAAM,CAC3C,CAAC,EAAQ,GAAa,EAAS,EAAE,CAAC,CAElC,EAAW,EACd,GAA6B,CAC5B,EAAU,CAAE,GAAG,EAAQ,GAAG,EAAQ,CAAC,EAErC,CAAC,EAAO,CACT,CAEK,EAAW,MAAkB,CACjC,EAAa,GAAK,EACjB,EAAE,CAAC,CAEN,GAAI,EAEF,OADA,EAAQ,IAAI,EAAM,EAAE,CAAC,CACd,EAAC,EAAD,CAAS,OAAQ,EAAU,CAAA,CAmBpC,IAAM,EAAY,IAAI,EACpB,EAjB4B,EAAS,QAAQ,EAAS,CACrD,OAAO,EAAe,CACtB,IAAK,GAAY,CAChB,GAAI,EAAQ,OAAS,EACnB,MAAU,MAAM,qDAAqD,CAEvE,IAAM,EAAQ,EAAQ,MACtB,MAAO,CACL,KAAM,EAAM,KACZ,MAAO,EAAM,MACb,MAAO,EAAM,MACb,YAAa,EAAM,YACnB,KAAM,EAAM,SACb,EACD,CAKF,EAAQ,IAAI,EAAM,EAAE,CAAC,CACrB,EACA,EACD,CAED,OACE,EAAC,EAAD,CAAO,SAAU,EAAC,EAAD,EAAW,CAAA,UAC1B,EAAC,EAAD,CACE,OAAQ,EAAU,UAAU,CAC5B,OAAQ,CAAE,SAAQ,WAAU,WAAU,CACtC,aAAc,EAAU,cAAc,CACtC,SAAU,EACV,CAAA,CACI,CAAA,EAI0C,CAAE,KAAM,EAAe,CAAC"}
1
+ {"version":3,"file":"MultiForm.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/MultiForm.tsx"],"sourcesContent":["import {\n Children,\n type ComponentType,\n isValidElement,\n type ReactNode,\n useCallback,\n useState,\n} from 'react';\n\nimport { Formity } from '@formity/react';\n\nimport { NoSsr } from '../../misc/no-ssr/NoSsr';\nimport type { StepperProps } from '../../navigations/stepper/Stepper';\nimport type { SchemaProps } from './parser/Schema';\nimport { Schemas } from './parser/Schemas';\nimport { storage } from './parser/utils/use-local-storage';\n\nexport type MultiFormStepProps = {\n name: string;\n rules: SchemaProps['rules'];\n label?: string;\n description?: string;\n children: SchemaProps['form'];\n};\n\nexport const MultiFormStep = (_props: MultiFormStepProps) => null;\nMultiFormStep.displayName = 'MultiForm.Step';\n\nexport type MultiFormProps = {\n name: string;\n children: ReactNode;\n Success: ComponentType<{ values: Partial<unknown> }>;\n Loading: ComponentType;\n classNames?: { root?: string; multiForm?: string };\n stepperProps?: Omit<StepperProps, 'children' | 'active'>;\n};\n\nconst MultiFormBase = ({\n name,\n children,\n Success,\n Loading,\n classNames,\n stepperProps,\n}: MultiFormProps) => {\n const [submitted, setSubmitted] = useState(false);\n const [fields, setFields] = useState({});\n\n const onChange = useCallback(\n (values: Partial<unknown>) => {\n setFields({ ...fields, ...values });\n },\n [fields],\n );\n\n const onSubmit = useCallback(() => {\n setSubmitted(true);\n }, []);\n\n if (submitted) {\n storage.set(name, {});\n return <Success values={fields} />;\n }\n\n const schema: SchemaProps[] = Children.toArray(children)\n .filter(isValidElement)\n .map((element) => {\n if (element.type !== MultiFormStep) {\n throw new Error('MultiForm children must be MultiForm.Step elements');\n }\n const props = element.props as MultiFormStepProps;\n return {\n name: props.name,\n rules: props.rules,\n label: props.label,\n description: props.description,\n form: props.children,\n };\n });\n\n const schemaObj = new Schemas(\n name,\n schema,\n storage.get(name, {}),\n classNames,\n stepperProps,\n );\n\n return (\n <NoSsr fallback={<Loading />}>\n <Formity\n schema={schemaObj.toRender()}\n params={{ fields, onChange, onSubmit }}\n initialState={schemaObj.currentState()}\n onReturn={onSubmit}\n />\n </NoSsr>\n );\n};\n\nexport const MultiForm = Object.assign(MultiFormBase, { Step: MultiFormStep });\n"],"mappings":"uUAyBA,MAAa,EAAiB,GAA+B,KAC7D,EAAc,YAAc,iBA0E5B,MAAa,EAAY,OAAO,QA/DT,CACrB,OACA,WACA,UACA,UACA,aACA,kBACoB,CACpB,GAAM,CAAC,EAAW,GAAgB,EAAS,GAAM,CAC3C,CAAC,EAAQ,GAAa,EAAS,EAAE,CAAC,CAElC,EAAW,EACd,GAA6B,CAC5B,EAAU,CAAE,GAAG,EAAQ,GAAG,EAAQ,CAAC,EAErC,CAAC,EAAO,CACT,CAEK,EAAW,MAAkB,CACjC,EAAa,GAAK,EACjB,EAAE,CAAC,CAEN,GAAI,EAEF,OADA,EAAQ,IAAI,EAAM,EAAE,CAAC,CACd,EAAC,EAAD,CAAS,OAAQ,EAAU,CAAA,CAmBpC,IAAM,EAAY,IAAI,EACpB,EAjB4B,EAAS,QAAQ,EAAS,CACrD,OAAO,EAAe,CACtB,IAAK,GAAY,CAChB,GAAI,EAAQ,OAAS,EACnB,MAAU,MAAM,qDAAqD,CAEvE,IAAM,EAAQ,EAAQ,MACtB,MAAO,CACL,KAAM,EAAM,KACZ,MAAO,EAAM,MACb,MAAO,EAAM,MACb,YAAa,EAAM,YACnB,KAAM,EAAM,SACb,EACD,CAKF,EAAQ,IAAI,EAAM,EAAE,CAAC,CACrB,EACA,EACD,CAED,OACE,EAAC,EAAD,CAAO,SAAU,EAAC,EAAD,EAAW,CAAA,UAC1B,EAAC,EAAD,CACE,OAAQ,EAAU,UAAU,CAC5B,OAAQ,CAAE,SAAQ,WAAU,WAAU,CACtC,aAAc,EAAU,cAAc,CACtC,SAAU,EACV,CAAA,CACI,CAAA,EAI0C,CAAE,KAAM,EAAe,CAAC"}
@@ -24,6 +24,7 @@ type Props = {
24
24
  onEnter: () => void;
25
25
  classNames?: {
26
26
  root?: string;
27
+ multiForm?: string;
27
28
  };
28
29
  stepperProps?: Omit<StepperProps, 'children' | 'active'>;
29
30
  Component: ComponentType<{
@@ -1 +1 @@
1
- {"version":3,"file":"Step.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/Step.tsx"],"mappings":";;;;;;KAUY,KAAA;EACV,MAAA;EACA,KAAA,EAAO,CAAA,CAAE,OAAA;EACT,IAAA;IAAQ,OAAA;IAAiB,KAAA;EAAA;EACzB,KAAA;IAAS,KAAA;IAAe,WAAA;EAAA;EACxB,MAAA,EAAQ,MAAA;EACR,MAAA,EAAQ,MAAA;EACR,QAAA,EAAU,QAAA;EACV,QAAA,EAAU,QAAA;EACV,OAAA,GAAU,MAAA,EAAQ,MAAA;EAClB,IAAA,GAAO,IAAA;EACP,OAAA;EACA,UAAA;IAAe,IAAA;EAAA;EACf,YAAA,GAAe,IAAA,CAAK,YAAA;EACpB,SAAA,EAAW,aAAA;IACT,aAAA;IACA,KAAA,EAAO,CAAA,CAAE,OAAA;IACT,IAAA;MAAQ,OAAA;MAAiB,KAAA;IAAA;IACzB,MAAA,EAAQ,MAAA;IACR,MAAA,EAAQ,MAAA;IACR,QAAA,EAAU,QAAA;IACV,QAAA,EAAU,QAAA;IACV,OAAA,GAAU,MAAA,EAAQ,MAAA;IAClB,IAAA,GAAO,IAAA;EAAA;AAAA"}
1
+ {"version":3,"file":"Step.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/Step.tsx"],"mappings":";;;;;;KAUY,KAAA;EACV,MAAA;EACA,KAAA,EAAO,CAAA,CAAE,OAAA;EACT,IAAA;IAAQ,OAAA;IAAiB,KAAA;EAAA;EACzB,KAAA;IAAS,KAAA;IAAe,WAAA;EAAA;EACxB,MAAA,EAAQ,MAAA;EACR,MAAA,EAAQ,MAAA;EACR,QAAA,EAAU,QAAA;EACV,QAAA,EAAU,QAAA;EACV,OAAA,GAAU,MAAA,EAAQ,MAAA;EAClB,IAAA,GAAO,IAAA;EACP,OAAA;EACA,UAAA;IAAe,IAAA;IAAe,SAAA;EAAA;EAC9B,YAAA,GAAe,IAAA,CAAK,YAAA;EACpB,SAAA,EAAW,aAAA;IACT,aAAA;IACA,KAAA,EAAO,CAAA,CAAE,OAAA;IACT,IAAA;MAAQ,OAAA;MAAiB,KAAA;IAAA;IACzB,MAAA,EAAQ,MAAA;IACR,MAAA,EAAQ,MAAA;IACR,QAAA,EAAU,QAAA;IACV,QAAA,EAAU,QAAA;IACV,OAAA,GAAU,MAAA,EAAQ,MAAA;IAClB,IAAA,GAAO,IAAA;EAAA;AAAA"}
@@ -1,2 +1,2 @@
1
- import{Stepper as e}from"../../navigations/stepper/Stepper.mjs";import{MultiFormContext as t}from"./MultiFormContext.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{multiForm as r,multiFormRoot as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useMemo as s}from"react";const c=({values:c,rules:l,step:u,steps:d,onBack:f,onNext:p,getState:m,setState:h,onWatch:g,goTo:_,onEnter:v,classNames:y,stepperProps:b,Component:x,...S})=>{let C=s(()=>({onNext:p,onBack:f,getState:m,setState:h,onWatch:g,onEnter:v,goTo:_,step:u}),[p,f,m,h,g,v,_,u]);return v(),a(t.Provider,{value:C,children:o(`div`,{className:n(r(),y?.root??i()),children:[a(e,{allowNextStepsSelect:!1,...b,onStepClick:b?.onStepClick??(e=>_(e+1)),active:u.current-1,children:d.map(t=>a(e.Step,{label:t.label,description:t.description},t.label))}),a(x,{defaultValues:c,rules:l,...C,...S})]})})};export{c as Step};
1
+ import{Stepper as e}from"../../navigations/stepper/Stepper.mjs";import{MultiFormContext as t}from"./MultiFormContext.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{multiForm as r,multiFormRoot as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{useMemo as s}from"react";const c=({values:c,rules:l,step:u,steps:d,onBack:f,onNext:p,getState:m,setState:h,onWatch:g,goTo:_,onEnter:v,classNames:y,stepperProps:b,Component:x,...S})=>{let C=s(()=>({onNext:p,onBack:f,getState:m,setState:h,onWatch:g,onEnter:v,goTo:_,step:u}),[p,f,m,h,g,v,_,u]);return v(),a(t.Provider,{value:C,children:o(`div`,{className:n(y?.multiForm??r(),y?.root??i()),children:[a(e,{allowNextStepsSelect:!1,...b,onStepClick:b?.onStepClick??(e=>_(e+1)),active:u.current-1,children:d.map(t=>a(e.Step,{label:t.label,description:t.description},t.label))}),a(x,{defaultValues:c,rules:l,...C,...S})]})})};export{c as Step};
2
2
  //# sourceMappingURL=Step.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Step.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/Step.tsx"],"sourcesContent":["import { type ComponentType, useMemo } from 'react';\nimport type { z } from 'zod';\n\nimport type { GetState, OnBack, OnNext, SetState } from '@formity/react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport { multiForm, multiFormRoot } from '@mage-ui/styled-system/recipes';\n\nimport { Stepper, type StepperProps } from '../../navigations/stepper/Stepper';\nimport { MultiFormContext } from './MultiFormContext';\n\nexport type Props = {\n values: object;\n rules: z.ZodType;\n step: { current: number; total: number };\n steps: { label: string; description?: string }[];\n onBack: OnBack;\n onNext: OnNext;\n getState: GetState;\n setState: SetState;\n onWatch: (values: Record<string, unknown>) => void;\n goTo: (step: number) => void;\n onEnter: () => void;\n classNames?: { root?: string };\n stepperProps?: Omit<StepperProps, 'children' | 'active'>;\n Component: ComponentType<{\n defaultValues: object;\n rules: z.ZodType;\n step: { current: number; total: number };\n onBack: OnBack;\n onNext: OnNext;\n getState: GetState;\n setState: SetState;\n onWatch: (values: Record<string, unknown>) => void;\n goTo: (step: number) => void;\n }>;\n};\n\nexport const Step = ({\n values,\n rules,\n step,\n steps,\n onBack,\n onNext,\n getState,\n setState,\n onWatch,\n goTo,\n onEnter,\n classNames,\n stepperProps,\n Component,\n ...props\n}: Props) => {\n const value = useMemo(\n () => ({\n onNext,\n onBack,\n getState,\n setState,\n onWatch,\n onEnter,\n goTo,\n step,\n }),\n [onNext, onBack, getState, setState, onWatch, onEnter, goTo, step],\n );\n onEnter();\n return (\n <MultiFormContext.Provider value={value}>\n <div className={cx(multiForm(), classNames?.root ?? multiFormRoot())}>\n <Stepper\n allowNextStepsSelect={false}\n {...stepperProps}\n onStepClick={\n stepperProps?.onStepClick ?? ((index: number) => goTo(index + 1))\n }\n active={step.current - 1}\n >\n {steps.map((s) => (\n <Stepper.Step\n key={s.label}\n label={s.label}\n description={s.description}\n />\n ))}\n </Stepper>\n <Component defaultValues={values} rules={rules} {...value} {...props} />\n </div>\n </MultiFormContext.Provider>\n );\n};\n"],"mappings":"0UAqCA,MAAa,GAAQ,CACnB,SACA,QACA,OACA,QACA,SACA,SACA,WACA,WACA,UACA,OACA,UACA,aACA,eACA,YACA,GAAG,KACQ,CACX,IAAM,EAAQ,OACL,CACL,SACA,SACA,WACA,WACA,UACA,UACA,OACA,OACD,EACD,CAAC,EAAQ,EAAQ,EAAU,EAAU,EAAS,EAAS,EAAM,EAAK,CACnE,CAED,OADA,GAAS,CAEP,EAAC,EAAiB,SAAlB,CAAkC,iBAChC,EAAC,MAAD,CAAK,UAAW,EAAG,GAAW,CAAE,GAAY,MAAQ,GAAe,CAAC,UAApE,CACE,EAAC,EAAD,CACE,qBAAsB,GACtB,GAAI,EACJ,YACE,GAAc,cAAiB,GAAkB,EAAK,EAAQ,EAAE,EAElE,OAAQ,EAAK,QAAU,WAEtB,EAAM,IAAK,GACV,EAAC,EAAQ,KAAT,CAEE,MAAO,EAAE,MACT,YAAa,EAAE,YACf,CAHK,EAAE,MAGP,CACF,CACM,CAAA,CACV,EAAC,EAAD,CAAW,cAAe,EAAe,QAAO,GAAI,EAAO,GAAI,EAAS,CAAA,CACpE,GACoB,CAAA"}
1
+ {"version":3,"file":"Step.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/Step.tsx"],"sourcesContent":["import { type ComponentType, useMemo } from 'react';\nimport type { z } from 'zod';\n\nimport type { GetState, OnBack, OnNext, SetState } from '@formity/react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport { multiForm, multiFormRoot } from '@mage-ui/styled-system/recipes';\n\nimport { Stepper, type StepperProps } from '../../navigations/stepper/Stepper';\nimport { MultiFormContext } from './MultiFormContext';\n\nexport type Props = {\n values: object;\n rules: z.ZodType;\n step: { current: number; total: number };\n steps: { label: string; description?: string }[];\n onBack: OnBack;\n onNext: OnNext;\n getState: GetState;\n setState: SetState;\n onWatch: (values: Record<string, unknown>) => void;\n goTo: (step: number) => void;\n onEnter: () => void;\n classNames?: { root?: string; multiForm?: string };\n stepperProps?: Omit<StepperProps, 'children' | 'active'>;\n Component: ComponentType<{\n defaultValues: object;\n rules: z.ZodType;\n step: { current: number; total: number };\n onBack: OnBack;\n onNext: OnNext;\n getState: GetState;\n setState: SetState;\n onWatch: (values: Record<string, unknown>) => void;\n goTo: (step: number) => void;\n }>;\n};\n\nexport const Step = ({\n values,\n rules,\n step,\n steps,\n onBack,\n onNext,\n getState,\n setState,\n onWatch,\n goTo,\n onEnter,\n classNames,\n stepperProps,\n Component,\n ...props\n}: Props) => {\n const value = useMemo(\n () => ({\n onNext,\n onBack,\n getState,\n setState,\n onWatch,\n onEnter,\n goTo,\n step,\n }),\n [onNext, onBack, getState, setState, onWatch, onEnter, goTo, step],\n );\n onEnter();\n return (\n <MultiFormContext.Provider value={value}>\n <div\n className={cx(\n classNames?.multiForm ?? multiForm(),\n classNames?.root ?? multiFormRoot(),\n )}\n >\n <Stepper\n allowNextStepsSelect={false}\n {...stepperProps}\n onStepClick={\n stepperProps?.onStepClick ?? ((index: number) => goTo(index + 1))\n }\n active={step.current - 1}\n >\n {steps.map((s) => (\n <Stepper.Step\n key={s.label}\n label={s.label}\n description={s.description}\n />\n ))}\n </Stepper>\n <Component defaultValues={values} rules={rules} {...value} {...props} />\n </div>\n </MultiFormContext.Provider>\n );\n};\n"],"mappings":"0UAqCA,MAAa,GAAQ,CACnB,SACA,QACA,OACA,QACA,SACA,SACA,WACA,WACA,UACA,OACA,UACA,aACA,eACA,YACA,GAAG,KACQ,CACX,IAAM,EAAQ,OACL,CACL,SACA,SACA,WACA,WACA,UACA,UACA,OACA,OACD,EACD,CAAC,EAAQ,EAAQ,EAAU,EAAU,EAAS,EAAS,EAAM,EAAK,CACnE,CAED,OADA,GAAS,CAEP,EAAC,EAAiB,SAAlB,CAAkC,iBAChC,EAAC,MAAD,CACE,UAAW,EACT,GAAY,WAAa,GAAW,CACpC,GAAY,MAAQ,GAAe,CACpC,UAJH,CAME,EAAC,EAAD,CACE,qBAAsB,GACtB,GAAI,EACJ,YACE,GAAc,cAAiB,GAAkB,EAAK,EAAQ,EAAE,EAElE,OAAQ,EAAK,QAAU,WAEtB,EAAM,IAAK,GACV,EAAC,EAAQ,KAAT,CAEE,MAAO,EAAE,MACT,YAAa,EAAE,YACf,CAHK,EAAE,MAGP,CACF,CACM,CAAA,CACV,EAAC,EAAD,CAAW,cAAe,EAAe,QAAO,GAAI,EAAO,GAAI,EAAS,CAAA,CACpE,GACoB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mage-ui/components",
3
- "version": "1.0.174",
3
+ "version": "1.0.176",
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.174",
28
+ "@mage-ui/preset": "1.0.176",
29
29
  "@mage-ui/styled-system": "1.0.8"
30
30
  },
31
31
  "peerDependencies": {