@mage-ui/components 1.0.166 → 1.0.168

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 (36) hide show
  1. package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts +2 -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 +4 -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 +4 -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/forms/Form.mjs +1 -1
  14. package/dist/components/forms/Form.mjs.map +1 -1
  15. package/dist/components/forms/index.d.mts +2 -1
  16. package/dist/components/forms/multi-step/MultiForm.d.mts +22 -6
  17. package/dist/components/forms/multi-step/MultiForm.d.mts.map +1 -1
  18. package/dist/components/forms/multi-step/MultiForm.mjs +1 -1
  19. package/dist/components/forms/multi-step/MultiForm.mjs.map +1 -1
  20. package/dist/components/forms/multi-step/MultiFormContext.d.mts +22 -0
  21. package/dist/components/forms/multi-step/MultiFormContext.d.mts.map +1 -0
  22. package/dist/components/forms/multi-step/MultiFormContext.mjs +2 -0
  23. package/dist/components/forms/multi-step/MultiFormContext.mjs.map +1 -0
  24. package/dist/components/forms/multi-step/Step.d.mts.map +1 -1
  25. package/dist/components/forms/multi-step/Step.mjs +1 -1
  26. package/dist/components/forms/multi-step/Step.mjs.map +1 -1
  27. package/dist/components/index.d.mts +3 -1
  28. package/dist/components/misc/index.d.mts +1 -0
  29. package/dist/components/misc/no-ssr/NoSsr.d.mts +14 -0
  30. package/dist/components/misc/no-ssr/NoSsr.d.mts.map +1 -0
  31. package/dist/components/misc/no-ssr/NoSsr.mjs.map +1 -0
  32. package/dist/index.d.mts +4 -2
  33. package/dist/index.mjs +1 -1
  34. package/package.json +2 -2
  35. package/dist/utils/NoSsr.mjs.map +0 -1
  36. /package/dist/{utils → components/misc/no-ssr}/NoSsr.mjs +0 -0
@@ -25,6 +25,8 @@ type AutocompleteProps = Omit<ComboboxProps, 'options' | 'classNames'> & {
25
25
  declare const Autocomplete: ({
26
26
  name,
27
27
  label,
28
+ required,
29
+ autoComplete,
28
30
  description,
29
31
  error,
30
32
  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;EACA,KAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAiB1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,WAAA;EACA,KAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,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,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 s,autocompleteClearButtonRoot as c,autocompleteEmpty as l,autocompleteOption as u,autocompleteOptions as d,autocompleteRoot as f,autocompleteScrollAreaAutosize as ee,autocompleteTextInput as te,autocompleteTextInputDescription as ne,autocompleteTextInputError as p,autocompleteTextInputInput as m,autocompleteTextInputLabel as h,autocompleteTextInputRequired as g,autocompleteTextInputRoot as _,autocompleteTextInputSection as v,autocompleteTextInputWrapper as y}from"@mage-ui/styled-system/recipes";import{jsx as b}from"react/jsx-runtime";import{useState as x}from"react";import{useDebouncedCallback as S}from"@mantine/hooks";import{useQuery as C}from"@tanstack/react-query";const w=({name:w,label:T,description:E,error:D,placeholder:O,creatable:k,url:A,fetcher:j,query:re=``,debounce:M=500,threshold:N=3,clearButtonText:P,createText:F,emptyText:I=`No hay resultados`,classNames:L,...R})=>{let[z,B]=x(re),[V,H]=x(!1),{data:U,isFetching:W}=C({queryKey:[w,A,z],queryFn:()=>j({url:A,query:z}),initialData:[],enabled:z.length>=N}),G=S(e=>{B(e),H(!1)},M),K=e=>{H(!0),G(e)},{creatable:q,empty:J,target:Y,scrollArea:X,...Z}=L||{},{clearButton:Q,...$}=Y||{},ie={placeholder:O,label:T,description:E,error:D,classNames:{dropdownTextInput:$?.dropdownTextInput??te(),root:$?.root??_(),label:$?.label??h(),description:$?.description??ne(),error:$?.error??p(),wrapper:$?.wrapper??y(),input:$?.input??m(),section:$?.section??v(),required:$?.required??g()},clearButtonProps:{label:P,classNames:{clearButton:Q?.clearButton??i(),root:Q?.root??c(),icon:Q?.icon??a(),iconRaw:{iconRaw:Q?.iconRaw?.iconRaw??o(),root:Q?.iconRaw?.root??s()}}}},ae={emptyText:I,classNames:{empty:J?.empty??l()}},oe={creatable:k??!1,createText:F,classNames:q};return b(e,{shouldFilter:!1,classNames:{dropdown:Z?.dropdown??r(),root:Z?.root??f(),options:Z?.options??d(),option:Z?.option??u(),empty:J?.empty??l(),search:Z?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:X?.dropdownScrollAreaAutosize??ee()}},target:b(n,{debounced:K,isLoading:W||V,threshold:N,showEmpty:I!==void 0,...ie}),options:U,...R,children:b(t,{emptyProps:ae,creatableProps:oe})})};export{w as Autocomplete};
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};
2
2
  //# sourceMappingURL=Autocomplete.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n autocomplete,\n autocompleteClearButton,\n autocompleteClearButtonIcon,\n autocompleteClearButtonIconRaw,\n autocompleteClearButtonIconRawRoot,\n autocompleteClearButtonRoot,\n autocompleteEmpty,\n autocompleteOption,\n autocompleteOptions,\n autocompleteRoot,\n autocompleteScrollAreaAutosize,\n autocompleteTextInput,\n autocompleteTextInputDescription,\n autocompleteTextInputError,\n autocompleteTextInputInput,\n autocompleteTextInputLabel,\n autocompleteTextInputRequired,\n autocompleteTextInputRoot,\n autocompleteTextInputSection,\n autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n ComboboxProps,\n 'options' | 'classNames'\n> & {\n name: string;\n description?: string;\n error?: string;\n url?: string;\n fetcher: (params: {\n url?: string;\n query: string;\n }) => Promise<DropdownValue[]>;\n threshold?: number;\n debounce?: number;\n query?: string;\n classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n };\n };\n};\n\nexport const Autocomplete = ({\n name,\n label,\n description,\n error,\n placeholder,\n creatable,\n url,\n fetcher,\n query = '',\n debounce = 500,\n threshold = 3,\n clearButtonText,\n createText,\n emptyText = 'No hay resultados',\n classNames,\n ...props\n}: AutocompleteProps) => {\n const [searchValue, setSearchValue] = useState(query);\n const [isTyping, setIsTyping] = useState(false);\n\n const { data, isFetching } = useQuery<DropdownValue[]>({\n queryKey: [name, url, searchValue],\n queryFn: () => {\n return fetcher({\n url,\n query: searchValue,\n });\n },\n initialData: [],\n enabled: searchValue.length >= threshold,\n });\n\n const debounced = useDebouncedCallback((value: string) => {\n setSearchValue(value);\n setIsTyping(false);\n }, debounce);\n\n const handleSearch = (value: string) => {\n setIsTyping(true);\n debounced(value);\n };\n\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n description,\n error,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n description:\n restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n required:\n restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n autocompleteClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n autocompleteClearButtonIconRawRoot(),\n },\n },\n },\n };\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n createText,\n classNames: creatableClassNames,\n };\n\n return (\n <Dropdown\n shouldFilter={false}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n root: dropdownClassNames?.root ?? autocompleteRoot(),\n options: dropdownClassNames?.options ?? autocompleteOptions(),\n option: dropdownClassNames?.option ?? autocompleteOption(),\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n autocompleteScrollAreaAutosize(),\n },\n }}\n target={\n <AutocompleteTarget\n debounced={handleSearch}\n isLoading={isFetching || isTyping}\n threshold={threshold}\n showEmpty={emptyText !== undefined}\n {...targetProps}\n />\n }\n options={data}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"g/BA0DA,MAAa,GAAgB,CAC3B,OACA,QACA,cACA,QACA,cACA,YACA,MACA,UACA,SAAQ,GACR,WAAW,IACX,YAAY,EACZ,kBACA,aACA,YAAY,oBACZ,aACA,GAAG,KACoB,CACvB,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,CAAC,EAAU,GAAe,EAAS,GAAM,CAEzC,CAAE,OAAM,cAAe,EAA0B,CACrD,SAAU,CAAC,EAAM,EAAK,EAAY,CAClC,YACS,EAAQ,CACb,MACA,MAAO,EACR,CAAC,CAEJ,YAAa,EAAE,CACf,QAAS,EAAY,QAAU,EAChC,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAe,EAAM,CACrB,EAAY,GAAM,EACjB,EAAS,CAEN,EAAgB,GAAkB,CACtC,EAAY,GAAK,CACjB,EAAU,EAAM,EAGZ,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,GAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,IAAuB,CACpE,KAAM,GAAsB,MAAQ,GAA2B,CAC/D,MAAO,GAAsB,OAAS,GAA4B,CAClE,YACE,GAAsB,aAAe,IAAkC,CACzE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,MAAO,GAAsB,OAAS,GAA4B,CAClE,QAAS,GAAsB,SAAW,GAA8B,CACxE,SACE,GAAsB,UAAY,GAA+B,CACpE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAyB,CACjE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,KAAM,GAAuB,MAAQ,GAA6B,CAClE,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAAgC,CAClC,KACE,GAAuB,SAAS,MAChC,GAAoC,CACvC,CACF,CACF,CACF,CAEK,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,GAAmB,CACrD,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,aACA,WAAY,EACb,CAED,OACE,EAAC,EAAD,CACE,aAAc,GACd,WAAY,CACV,SAAU,GAAoB,UAAY,GAAc,CACxD,KAAM,GAAoB,MAAQ,GAAkB,CACpD,QAAS,GAAoB,SAAW,GAAqB,CAC7D,OAAQ,GAAoB,QAAU,GAAoB,CAC1D,MAAO,GAAiB,OAAS,GAAmB,CACpD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,IAAgC,CACnC,CACF,CACD,OACE,EAAC,EAAD,CACE,UAAW,EACX,UAAW,GAAc,EACd,YACX,UAAW,IAAc,IAAA,GACzB,GAAI,GACJ,CAAA,CAEJ,QAAS,EACT,GAAI,WAEJ,EAAC,EAAD,CACc,cACI,kBAChB,CAAA,CACO,CAAA"}
1
+ {"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n autocomplete,\n autocompleteClearButton,\n autocompleteClearButtonIcon,\n autocompleteClearButtonIconRaw,\n autocompleteClearButtonIconRawRoot,\n autocompleteClearButtonRoot,\n autocompleteEmpty,\n autocompleteOption,\n autocompleteOptions,\n autocompleteRoot,\n autocompleteScrollAreaAutosize,\n autocompleteTextInput,\n autocompleteTextInputDescription,\n autocompleteTextInputError,\n autocompleteTextInputInput,\n autocompleteTextInputLabel,\n autocompleteTextInputRequired,\n autocompleteTextInputRoot,\n autocompleteTextInputSection,\n autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n ComboboxProps,\n 'options' | 'classNames'\n> & {\n name: string;\n description?: string;\n error?: string;\n url?: string;\n fetcher: (params: {\n url?: string;\n query: string;\n }) => Promise<DropdownValue[]>;\n threshold?: number;\n debounce?: number;\n query?: string;\n classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n };\n };\n};\n\nexport const Autocomplete = ({\n name,\n label,\n 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"}
@@ -15,6 +15,8 @@ type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> &
15
15
  clearButtonText?: string;
16
16
  startSlot?: ReactNode;
17
17
  error?: string;
18
+ required?: boolean;
19
+ autoComplete?: string;
18
20
  classNames?: DropdownProps['classNames'] & {
19
21
  creatable?: ComboboxCreatableOptionProps['classNames'];
20
22
  empty?: ComboboxEmptyOptionProps['classNames'];
@@ -28,6 +30,8 @@ type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> &
28
30
  declare const Combobox: ({
29
31
  label,
30
32
  placeholder,
33
+ required,
34
+ autoComplete,
31
35
  creatable,
32
36
  createText,
33
37
  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;EACA,WAAA;EACA,SAAA;EACA,UAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;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,SAAA;EAAA,UAAA;EAAA,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAWtB,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;EACA,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,QAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAatB,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 ee}from"./ComboboxTarget.mjs";import{combobox as n,comboboxChevron as r,comboboxChevronIcon as i,comboboxChevronIconRoot as a,comboboxChevronRoot as o,comboboxClearButton as s,comboboxClearButtonIcon as c,comboboxClearButtonIconRaw as l,comboboxClearButtonIconRawRoot as u,comboboxClearButtonRoot as te,comboboxEmpty as d,comboboxOption as f,comboboxOptionCreateIcon as p,comboboxOptionCreateIconIconRaw as m,comboboxOptionCreateIconIconRawRoot as h,comboboxOptionCreateIconRoot as g,comboboxOptions as _,comboboxRoot as v,comboboxScrollAreaAutosize as y,comboboxTextInput as b,comboboxTextInputDescription as x,comboboxTextInputError as S,comboboxTextInputInput as C,comboboxTextInputLabel as w,comboboxTextInputRequired as T,comboboxTextInputRoot as E,comboboxTextInputSection as D,comboboxTextInputWrapper as O}from"@mage-ui/styled-system/recipes";import{jsx as k}from"react/jsx-runtime";const A=({label:A,placeholder:j,creatable:M,createText:N,clearButtonText:P,emptyText:F=`No results`,startSlot:I,error:L,classNames:R,...z})=>{let{creatable:B,empty:V,target:H,scrollArea:U,...W}=R||{},{clearButton:G,chevron:K,...q}=H||{},J={placeholder:j,label:A,error:L,startSlot:I,classNames:{dropdownTextInput:q?.dropdownTextInput??b(),root:q?.root??E(),label:q?.label??w(),description:q?.description??x(),error:q?.error??S(),wrapper:q?.wrapper??O(),input:q?.input??C(),section:q?.section??D(),required:q?.required??T()},clearButtonProps:{label:P,classNames:{clearButton:G?.clearButton??s(),root:G?.root??te(),icon:G?.icon??c(),iconRaw:{iconRaw:G?.iconRaw?.iconRaw??l(),root:G?.iconRaw?.root??u()}}},chevronProps:{classNames:{chevron:K?.chevron??r(),root:K?.root??o(),open:{iconRaw:K?.open?.iconRaw??i(),root:K?.open?.root??a()},close:{iconRaw:K?.close?.iconRaw??i(),root:K?.close?.root??a()}}}},Y=W?.dropdown??n(),X=W?.root??v(),Z=W?.options??_(),Q=W?.option??f(),$=V?.empty??d(),ne=W?.search,re={emptyText:F,classNames:{empty:V?.empty??$}},ie={creatable:M??!1,createText:N,classNames:{create:B?.create,createIcon:{createIcon:B?.createIcon?.createIcon??p(),root:B?.createIcon?.root??g(),iconRaw:{iconRaw:B?.createIcon?.iconRaw?.iconRaw??m(),root:B?.createIcon?.iconRaw?.root??h()}}}};return k(e,{classNames:{dropdown:Y,root:X,options:Z,option:Q,empty:$,search:ne},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:U?.dropdownScrollAreaAutosize??y()}},target:k(ee,{...J}),...z,children:k(t,{emptyProps:re,creatableProps:ie})})};export{A 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,placeholder:M,required:N,autoComplete:P,creatable:te,createText:F,clearButtonText:I,emptyText:L=`No results`,startSlot:R,error:z,classNames:B,...V})=>{let{creatable:H,empty:U,target:W,scrollArea:G,...K}=B||{},{clearButton:q,chevron:J,...Y}=W||{},X={placeholder:M,label:j,required:N,autoComplete:P,error:z,startSlot:R,classNames:{dropdownTextInput:Y?.dropdownTextInput??x(),root:Y?.root??D(),label:Y?.label??T(),description:Y?.description??S(),error:Y?.error??C(),wrapper:Y?.wrapper??k(),input:Y?.input??w(),section:Y?.section??O(),required:Y?.required??E()},clearButtonProps:{label:I,classNames:{clearButton:q?.clearButton??c(),root:q?.root??ee(),icon:q?.icon??l(),iconRaw:{iconRaw:q?.iconRaw?.iconRaw??u(),root:q?.iconRaw?.root??d()}}},chevronProps:{classNames:{chevron:J?.chevron??i(),root:J?.root??s(),open:{iconRaw:J?.open?.iconRaw??a(),root:J?.open?.root??o()},close:{iconRaw:J?.close?.iconRaw??a(),root:J?.close?.root??o()}}}},Z=K?.dropdown??r(),Q=K?.root??y(),ne=K?.options??v(),re=K?.option??p(),$=U?.empty??f(),ie=K?.search,ae={emptyText:L,classNames:{empty:U?.empty??$}},oe={creatable:te??!1,createText:F,classNames:{create:H?.create,createIcon:{createIcon:H?.createIcon?.createIcon??m(),root:H?.createIcon?.root??_(),iconRaw:{iconRaw:H?.createIcon?.iconRaw?.iconRaw??h(),root:H?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:Z,root:Q,options:ne,option:re,empty:$,search:ie},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:G?.dropdownScrollAreaAutosize??b()}},target:A(n,{...X}),...V,children:A(t,{emptyProps:ae,creatableProps:oe})})};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?: string;\n placeholder?: string;\n creatable?: boolean;\n createText?: string;\n emptyText?: string;\n clearButtonText?: string;\n startSlot?: ReactNode;\n error?: 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 placeholder,\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 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":"u/BAgEA,MAAa,GAAY,CACvB,QACA,cACA,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,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,EAAgB,GAAoB,MAAQ,GAAc,CAC1D,EAAmB,GAAoB,SAAW,GAAiB,CACnE,EAAkB,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,EACN,QAAS,EACT,OAAQ,EACR,MAAO,EACP,OAAQ,GACT,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA4B,CAC/B,CACF,CACD,OAAQ,EAAC,GAAD,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?: string;\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 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 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/BAkEA,MAAa,GAAY,CACvB,QACA,cACA,WACA,eACA,aACA,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,WACA,eACA,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,EAAgB,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,IAAa,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,EACN,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"}
@@ -17,6 +17,8 @@ type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
17
17
  searchClassNames?: SelectSearchClassNames;
18
18
  startSlot?: ReactNode;
19
19
  error?: string;
20
+ required?: boolean;
21
+ autoComplete?: string;
20
22
  classNames?: DropdownProps['classNames'] & {
21
23
  target?: ComboboxTargetProps['classNames'] & {
22
24
  clearButton?: NonNullable<ComboboxTargetProps['clearButtonProps']>['classNames'];
@@ -28,6 +30,8 @@ type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
28
30
  declare const Select: ({
29
31
  label,
30
32
  placeholder,
33
+ required,
34
+ autoComplete,
31
35
  clearable,
32
36
  clearButtonText,
33
37
  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;EACA,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,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,KAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAcpB,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;EACA,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,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,GAgBpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -1,2 +1,2 @@
1
- import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!1,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,startSlot:V,error:H,classNames:U,...W})=>{let{target:G,scrollArea:K,...q}=U||{},{clearButton:J,chevron:Y,...X}=G||{},Z=I??(L?`No results`:void 0),Q={placeholder:N,label:M,error:H,clearable:P,readOnly:!0,closeOnBlur:!L,startSlot:V,displayQuery:!1,classNames:{dropdownTextInput:X?.dropdownTextInput??S(),root:X?.root??O(),label:X?.label??E(),description:X?.description??C(),error:X?.error??w(),wrapper:X?.wrapper??A(),input:X?.input??T(),section:X?.section??k(),required:X?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:J?.clearButton??l(),root:J?.root??p(),icon:J?.icon??u(),iconRaw:{iconRaw:J?.iconRaw?.iconRaw??d(),root:J?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:Y?.chevron??a(),root:Y?.root??c(),open:{iconRaw:Y?.open?.iconRaw??o(),root:Y?.open?.root??s()},close:{iconRaw:Y?.close?.iconRaw??o(),root:Y?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:q?.dropdown??i(),root:q?.root??_(),options:q?.options??g(),option:q?.option??h(),empty:q?.empty??m(),search:q?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:K?.dropdownScrollAreaAutosize??v()}},target:j(n,{...Q}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...W,children:j(t,{emptyProps:{emptyText:Z,classNames:{empty:q?.empty??m()}},creatableProps:{creatable:!1}})})};export{M as Select};
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,placeholder:M,required:N,autoComplete:P,clearable:F=!1,clearButtonText:I,emptyText:L,searchable:R,searchPlaceholder:z,searchStartSlot:B,searchClassNames:V,startSlot:H,error:U,classNames:W,...G})=>{let{target:K,scrollArea:q,...J}=W||{},{clearButton:Y,chevron:X,...Z}=K||{},Q=L??(R?`No results`:void 0),$={placeholder:M,label:j,required:N,autoComplete:P,error:U,clearable:F,readOnly:!0,closeOnBlur:!R,startSlot:H,displayQuery:!1,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:I,classNames:{clearButton:Y?.clearButton??c(),root:Y?.root??f(),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()}}}};return A(e,{"data-searchable":R,classNames:{dropdown:J?.dropdown??r(),root:J?.root??g(),options:J?.options??h(),option:J?.option??m(),empty:J?.empty??p(),search:J?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:q?.dropdownScrollAreaAutosize??_()}},target:A(ee,{...$}),dropdownTopSlot:R&&A(n,{searchPlaceholder:z,startSlot:B,classNames:{input:V?.input??v(),wrapper:V?.wrapper??b(),section:V?.section??y()}}),...G,children:A(t,{emptyProps:{emptyText:Q,classNames:{empty:J?.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?: string;\n placeholder?: string;\n clearable?: boolean;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n startSlot?: ReactNode;\n error?: string;\n classNames?: DropdownProps['classNames'] & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Select = ({\n label,\n placeholder,\n clearable = false,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n startSlot,\n error,\n classNames,\n ...props\n}: SelectProps) => {\n const {\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n const resolvedEmptyText =\n emptyText ?? (searchable ? 'No results' : undefined);\n\n const targetProps = {\n placeholder,\n label,\n error,\n clearable,\n readOnly: true,\n closeOnBlur: !searchable,\n startSlot,\n displayQuery: false,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n root: restTargetClassNames?.root ?? selectTextInputRoot(),\n label: restTargetClassNames?.label ?? selectTextInputLabel(),\n description:\n restTargetClassNames?.description ?? selectTextInputDescription(),\n error: restTargetClassNames?.error ?? selectTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n input: restTargetClassNames?.input ?? selectTextInputInput(),\n section: restTargetClassNames?.section ?? selectTextInputSection(),\n required: restTargetClassNames?.required ?? selectTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n selectClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n selectClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? selectChevron(),\n root: chevronClassNames?.root ?? selectChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n data-searchable={searchable}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? select(),\n root: dropdownClassNames?.root ?? selectRoot(),\n options: dropdownClassNames?.options ?? selectOptions(),\n option: dropdownClassNames?.option ?? selectOption(),\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n selectScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n dropdownTopSlot={\n searchable && (\n <SelectSearch\n searchPlaceholder={searchPlaceholder}\n startSlot={searchStartSlot}\n classNames={{\n input: searchClassNames?.input ?? selectSearchInput(),\n wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n section: searchClassNames?.section ?? selectSearchSection(),\n }}\n />\n )\n }\n {...props}\n >\n <ComboboxOptions\n emptyProps={{\n emptyText: resolvedEmptyText,\n classNames: {\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n },\n }}\n creatableProps={{\n creatable: false,\n }}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s8BAgEA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,QACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,aAAc,GACd,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAD,CACE,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,EAAD,CAAgB,GAAI,EAAe,CAAA,CAC3C,gBACE,GACE,EAAC,EAAD,CACqB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,CACD,CAAA,CAGN,GAAI,WAEJ,EAAC,EAAD,CACE,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}
1
+ {"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n select,\n selectChevron,\n selectChevronIcon,\n selectChevronIconRoot,\n selectChevronRoot,\n selectClearButton,\n selectClearButtonIcon,\n selectClearButtonIconRaw,\n selectClearButtonIconRawRoot,\n selectClearButtonRoot,\n selectEmpty,\n selectOption,\n selectOptions,\n selectRoot,\n selectScrollAreaAutosize,\n selectSearchInput,\n selectSearchSection,\n selectSearchWrapper,\n selectTextInput,\n selectTextInputDescription,\n selectTextInputError,\n selectTextInputInput,\n selectTextInputLabel,\n selectTextInputRequired,\n selectTextInputRoot,\n selectTextInputSection,\n selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n DropdownProps,\n 'children' | 'classNames' | 'target'\n> & {\n label?: string;\n placeholder?: string;\n clearable?: boolean;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n startSlot?: ReactNode;\n error?: string;\n 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 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 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":"u8BAkEA,MAAa,GAAU,CACrB,QACA,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,EAAc,CAClB,cACA,QACA,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,EAAe,CAAA,CAC3C,gBACE,GACE,EAAC,EAAD,CACqB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,CACD,CAAA,CAGN,GAAI,WAEJ,EAAC,EAAD,CACE,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,CACD,CAAA,CACO,CAAA"}
@@ -1,2 +1,2 @@
1
- import{FormAutocomplete as e}from"./controls/FormAutocomplete.mjs";import{FormCheckbox as t}from"./controls/FormCheckbox.mjs";import{FormCheckboxTree as n}from"./controls/FormCheckboxTree.mjs";import{FormCombobox as r}from"./controls/FormCombobox.mjs";import{FormDatePicker as i}from"./controls/FormDatePicker.mjs";import{FormDateTimePicker as a}from"./controls/FormDateTimePicker.mjs";import{FormDropzone as o}from"./controls/FormDropzone.mjs";import{FormS3Context as s}from"./FormS3Context.mjs";import{FormDropzoneS3 as c}from"./controls/FormDropzoneS3.mjs";import{FormFileInput as l}from"./controls/FormFileInput.mjs";import{FormFileInputMultiple as u}from"./controls/FormFileInputMultiple.mjs";import{FormFileInputMultipleS3 as d}from"./controls/FormFileInputMultipleS3.mjs";import{FormFileInputS3 as f}from"./controls/FormFileInputS3.mjs";import{FormHidden as p}from"./controls/FormHidden.mjs";import{FormPassword as m}from"./controls/FormPassword.mjs";import{FormSelect as h}from"./controls/FormSelect.mjs";import{FormSubmit as g}from"./controls/FormSubmit.mjs";import{FormTextarea as _}from"./controls/FormTextarea.mjs";import{FormTextInput as v}from"./controls/FormTextInput.mjs";import{FormBase as y}from"./FormBase.mjs";import{FormErrorBox as b}from"./FormErrorBox.mjs";import{form as x,formRoot as S}from"@mage-ui/styled-system/recipes";import{jsx as C}from"react/jsx-runtime";import{useRef as w}from"react";const T=({$fetcher:e,onValidSubmit:t,onInvalidSubmit:n,invalidStatus:r=[],children:i,schema:a,t:o,s3UploadErrorMessage:c,classNames:l})=>{let u=w(new Map),d={registerS3Upload:(e,t)=>{u.current.set(e,t)},unregisterS3Upload:e=>{u.current.delete(e)}},f=async e=>{let t=Array.from(u.current.values());await Promise.all(t.map(t=>t(e)))};return C(s.Provider,{value:d,children:C(y,{onSubmit:async({data:i,setError:a})=>{await e({data:i}).then(async e=>{let n=e;if(n?.statusCode&&n.statusCode>=400)throw n;try{await f(e)}catch(e){console.error(`S3 upload error:`,e),a(`root.serverError`,{type:`s3`,message:c??`Failed to upload files`});return}t?.(e||{})}).catch(e=>{switch(e.statusCode){case 400:case 422:e.cause?.issues&&Object.keys(e.cause.issues).forEach(t=>{a(t,{type:`server`,message:e.cause?.issues?.[t]})}),a(`root.serverError`,{type:`server`,message:e?.message??`Something went wrong`});break;default:if(r.includes(e.statusCode)){n?.({message:e.message,setError:a,status:e.statusCode});break}throw e}})},schema:a,errorBox:b,t:o,classNames:{form:l?.form??x(),root:l?.root??S()},children:i})})};T.displayName=`Form`,T.TextInput=v,T.Textarea=_,T.Submit=g,T.Hidden=p,T.Checkbox=t,T.CheckboxTree=n,T.Password=m,T.Select=h,T.Combobox=r,T.Autocomplete=e,T.DatePicker=i,T.DateTimePicker=a,T.FileInput=l,T.FileInputMultiple=u,T.FileInputS3=f,T.FileInputMultipleS3=d,T.Dropzone=o,T.DropzoneS3=c;export{T as Form};
1
+ import{FormAutocomplete as e}from"./controls/FormAutocomplete.mjs";import{FormCheckbox as t}from"./controls/FormCheckbox.mjs";import{FormCheckboxTree as n}from"./controls/FormCheckboxTree.mjs";import{FormCombobox as r}from"./controls/FormCombobox.mjs";import{FormDatePicker as i}from"./controls/FormDatePicker.mjs";import{FormDateTimePicker as a}from"./controls/FormDateTimePicker.mjs";import{FormDropzone as o}from"./controls/FormDropzone.mjs";import{FormS3Context as s}from"./FormS3Context.mjs";import{FormDropzoneS3 as c}from"./controls/FormDropzoneS3.mjs";import{FormFileInput as l}from"./controls/FormFileInput.mjs";import{FormFileInputMultiple as u}from"./controls/FormFileInputMultiple.mjs";import{FormFileInputMultipleS3 as d}from"./controls/FormFileInputMultipleS3.mjs";import{FormFileInputS3 as f}from"./controls/FormFileInputS3.mjs";import{FormHidden as p}from"./controls/FormHidden.mjs";import{FormPassword as m}from"./controls/FormPassword.mjs";import{FormSelect as h}from"./controls/FormSelect.mjs";import{FormSubmit as g}from"./controls/FormSubmit.mjs";import{FormTextarea as _}from"./controls/FormTextarea.mjs";import{FormTextInput as v}from"./controls/FormTextInput.mjs";import{FormBase as y}from"./FormBase.mjs";import{FormErrorBox as b}from"./FormErrorBox.mjs";import{form as x,formRoot as S}from"@mage-ui/styled-system/recipes";import{jsx as C}from"react/jsx-runtime";import{useRef as w}from"react";const T=({$fetcher:e,onValidSubmit:t,onInvalidSubmit:n,invalidStatus:r=[],children:i,schema:a,t:o,s3UploadErrorMessage:c,classNames:l})=>{let u=w(new Map),d={registerS3Upload:(e,t)=>{u.current.set(e,t)},unregisterS3Upload:e=>{u.current.delete(e)}},f=async e=>{let t=Array.from(u.current.values());await Promise.all(t.map(t=>t(e)))};return C(s.Provider,{value:d,children:C(y,{onSubmit:async({data:i,setError:a})=>{await e({data:i}).then(async e=>{let n=e;if(n?.statusCode&&n.statusCode>=400)throw n;try{await f(e)}catch(e){console.error(`S3 upload error:`,e),a(`root.serverError`,{type:`s3`,message:c??`Failed to upload files`});return}t?.(e||{})}).catch(e=>{if((e.statusCode===400||e.statusCode===422)&&e.cause?.issues&&Object.keys(e.cause.issues).forEach(t=>{a(t,{type:`server`,message:e.cause?.issues?.[t]})}),r.includes(e.statusCode)&&n)n({message:e?.message??`Something went wrong`,setError:a,status:e.statusCode});else if(e.statusCode===400||e.statusCode===422)a(`root.serverError`,{type:`server`,message:e?.message??`Something went wrong`});else throw e})},schema:a,errorBox:b,t:o,classNames:{form:l?.form??x(),root:l?.root??S()},children:i})})};T.displayName=`Form`,T.TextInput=v,T.Textarea=_,T.Submit=g,T.Hidden=p,T.Checkbox=t,T.CheckboxTree=n,T.Password=m,T.Select=h,T.Combobox=r,T.Autocomplete=e,T.DatePicker=i,T.DateTimePicker=a,T.FileInput=l,T.FileInputMultiple=u,T.FileInputS3=f,T.FileInputMultipleS3=d,T.Dropzone=o,T.DropzoneS3=c;export{T as Form};
2
2
  //# sourceMappingURL=Form.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Form.mjs","names":[],"sources":["../../../src/components/forms/Form.tsx"],"sourcesContent":["import type React from 'react';\nimport type { ReactNode } from 'react';\nimport { useRef } from 'react';\nimport type { FieldValues, UseFormSetError } from 'react-hook-form';\nimport type { ZodObject, ZodTypeAny } from 'zod';\n\nimport { form, formRoot } from '@mage-ui/styled-system/recipes';\n\nimport { FormAutocomplete } from './controls/FormAutocomplete';\nimport { FormCheckbox } from './controls/FormCheckbox';\nimport { FormCheckboxTree } from './controls/FormCheckboxTree';\nimport { FormCombobox } from './controls/FormCombobox';\nimport { FormDatePicker } from './controls/FormDatePicker';\nimport { FormDateTimePicker } from './controls/FormDateTimePicker';\nimport { FormDropzone } from './controls/FormDropzone';\nimport { FormDropzoneS3 } from './controls/FormDropzoneS3';\nimport { FormFileInput } from './controls/FormFileInput';\nimport { FormFileInputMultiple } from './controls/FormFileInputMultiple';\nimport { FormFileInputMultipleS3 } from './controls/FormFileInputMultipleS3';\nimport { FormFileInputS3 } from './controls/FormFileInputS3';\nimport { FormHidden } from './controls/FormHidden';\nimport { FormPassword } from './controls/FormPassword';\nimport { FormSelect } from './controls/FormSelect';\nimport { FormSubmit } from './controls/FormSubmit';\nimport { FormTextarea } from './controls/FormTextarea';\nimport { FormTextInput } from './controls/FormTextInput';\nimport { FormBase } from './FormBase';\nimport { FormErrorBox } from './FormErrorBox';\nimport { FormS3Context, type S3UploadCallback } from './FormS3Context';\n\ntype FormResponse = {\n body?: object;\n details?: string;\n status?: number;\n url?: string;\n};\n\nexport type FormProps<T extends FieldValues> = {\n $fetcher: (params: { data: T }) => Promise<unknown>;\n onValidSubmit?: (response: FormResponse) => void;\n onInvalidSubmit?: (params: {\n message: string;\n setError: UseFormSetError<T>;\n status: number;\n }) => void;\n invalidStatus?: number[];\n children: ReactNode;\n schema?: ZodObject<Record<string, ZodTypeAny>>;\n t?: (\n key: string,\n bindings?: Record<string, string>,\n fallback?: string,\n ) => string | React.ReactNode;\n /** Mensaje mostrado al usuario si falla la subida de archivos a S3 tras el submit. */\n s3UploadErrorMessage?: string;\n classNames?: {\n form?: string;\n root?: string;\n };\n};\n\ntype FormError = {\n statusCode: number;\n message: string;\n cause?: {\n issues: Record<string, string>;\n };\n};\n\nexport const Form = <T extends FieldValues>({\n $fetcher,\n onValidSubmit,\n onInvalidSubmit,\n invalidStatus = [],\n children,\n schema,\n t,\n s3UploadErrorMessage,\n classNames,\n}: FormProps<T>) => {\n const s3CallbacksRef = useRef<Map<string, S3UploadCallback>>(new Map());\n\n const s3ContextValue = {\n registerS3Upload: (name: string, cb: S3UploadCallback) => {\n s3CallbacksRef.current.set(name, cb);\n },\n unregisterS3Upload: (name: string) => {\n s3CallbacksRef.current.delete(name);\n },\n };\n\n const runS3Uploads = async (response: unknown): Promise<void> => {\n const callbacks = Array.from(s3CallbacksRef.current.values());\n await Promise.all(callbacks.map((cb) => cb(response)));\n };\n\n const onSubmit = async ({\n data,\n setError,\n }: {\n data: FieldValues;\n setError: UseFormSetError<FieldValues>;\n }) => {\n await $fetcher({ data: data as T })\n .then(async (response) => {\n const res = response as FormError & FormResponse;\n if (res?.statusCode && res.statusCode >= 400) {\n throw res;\n }\n\n try {\n await runS3Uploads(response);\n } catch (e) {\n console.error('S3 upload error:', e);\n setError('root.serverError', {\n type: 's3',\n message: s3UploadErrorMessage ?? 'Failed to upload files',\n });\n return;\n }\n onValidSubmit?.((response || {}) as FormResponse);\n })\n .catch((error: FormError) => {\n switch (error.statusCode) {\n case 400:\n case 422: {\n if (error.cause?.issues) {\n Object.keys(error.cause.issues).forEach((key) => {\n setError(key, {\n type: 'server',\n message: error.cause?.issues?.[key],\n });\n });\n }\n setError('root.serverError', {\n type: 'server',\n message: error?.message ?? 'Something went wrong',\n });\n break;\n }\n default:\n if (invalidStatus.includes(error.statusCode)) {\n onInvalidSubmit?.({\n message: error.message,\n setError: setError as UseFormSetError<T>,\n status: error.statusCode,\n });\n break;\n }\n throw error;\n }\n });\n };\n\n return (\n <FormS3Context.Provider value={s3ContextValue}>\n <FormBase\n onSubmit={onSubmit}\n schema={schema}\n errorBox={FormErrorBox}\n t={t}\n classNames={{\n form: classNames?.form ?? form(),\n root: classNames?.root ?? formRoot(),\n }}\n >\n {children}\n </FormBase>\n </FormS3Context.Provider>\n );\n};\n\nForm.displayName = 'Form';\nForm.TextInput = FormTextInput;\nForm.Textarea = FormTextarea;\nForm.Submit = FormSubmit;\nForm.Hidden = FormHidden;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxTree = FormCheckboxTree;\nForm.Password = FormPassword;\nForm.Select = FormSelect;\nForm.Combobox = FormCombobox;\nForm.Autocomplete = FormAutocomplete;\nForm.DatePicker = FormDatePicker;\nForm.DateTimePicker = FormDateTimePicker;\nForm.FileInput = FormFileInput;\nForm.FileInputMultiple = FormFileInputMultiple;\nForm.FileInputS3 = FormFileInputS3;\nForm.FileInputMultipleS3 = FormFileInputMultipleS3;\nForm.Dropzone = FormDropzone;\nForm.DropzoneS3 = FormDropzoneS3;\n"],"mappings":"24CAqEA,MAAa,GAA+B,CAC1C,WACA,gBACA,kBACA,gBAAgB,EAAE,CAClB,WACA,SACA,IACA,uBACA,gBACkB,CAClB,IAAM,EAAiB,EAAsC,IAAI,IAAM,CAEjE,EAAiB,CACrB,kBAAmB,EAAc,IAAyB,CACxD,EAAe,QAAQ,IAAI,EAAM,EAAG,EAEtC,mBAAqB,GAAiB,CACpC,EAAe,QAAQ,OAAO,EAAK,EAEtC,CAEK,EAAe,KAAO,IAAqC,CAC/D,IAAM,EAAY,MAAM,KAAK,EAAe,QAAQ,QAAQ,CAAC,CAC7D,MAAM,QAAQ,IAAI,EAAU,IAAK,GAAO,EAAG,EAAS,CAAC,CAAC,EA6DxD,OACE,EAAC,EAAc,SAAf,CAAwB,MAAO,WAC7B,EAAC,EAAD,CACY,SA7DC,MAAO,CACtB,OACA,cAII,CACJ,MAAM,EAAS,CAAQ,OAAW,CAAC,CAChC,KAAK,KAAO,IAAa,CACxB,IAAM,EAAM,EACZ,GAAI,GAAK,YAAc,EAAI,YAAc,IACvC,MAAM,EAGR,GAAI,CACF,MAAM,EAAa,EAAS,OACrB,EAAG,CACV,QAAQ,MAAM,mBAAoB,EAAE,CACpC,EAAS,mBAAoB,CAC3B,KAAM,KACN,QAAS,GAAwB,yBAClC,CAAC,CACF,OAEF,IAAiB,GAAY,EAAE,CAAkB,EACjD,CACD,MAAO,GAAqB,CAC3B,OAAQ,EAAM,WAAd,CACE,IAAK,KACL,IAAK,KACC,EAAM,OAAO,QACf,OAAO,KAAK,EAAM,MAAM,OAAO,CAAC,QAAS,GAAQ,CAC/C,EAAS,EAAK,CACZ,KAAM,SACN,QAAS,EAAM,OAAO,SAAS,GAChC,CAAC,EACF,CAEJ,EAAS,mBAAoB,CAC3B,KAAM,SACN,QAAS,GAAO,SAAW,uBAC5B,CAAC,CACF,MAEF,QACE,GAAI,EAAc,SAAS,EAAM,WAAW,CAAE,CAC5C,IAAkB,CAChB,QAAS,EAAM,QACL,WACV,OAAQ,EAAM,WACf,CAAC,CACF,MAEF,MAAM,IAEV,EAOQ,SACR,SAAU,EACP,IACH,WAAY,CACV,KAAM,GAAY,MAAQ,GAAM,CAChC,KAAM,GAAY,MAAQ,GAAU,CACrC,CAEA,WACQ,CAAA,CACY,CAAA,EAI7B,EAAK,YAAc,OACnB,EAAK,UAAY,EACjB,EAAK,SAAW,EAChB,EAAK,OAAS,EACd,EAAK,OAAS,EACd,EAAK,SAAW,EAChB,EAAK,aAAe,EACpB,EAAK,SAAW,EAChB,EAAK,OAAS,EACd,EAAK,SAAW,EAChB,EAAK,aAAe,EACpB,EAAK,WAAa,EAClB,EAAK,eAAiB,EACtB,EAAK,UAAY,EACjB,EAAK,kBAAoB,EACzB,EAAK,YAAc,EACnB,EAAK,oBAAsB,EAC3B,EAAK,SAAW,EAChB,EAAK,WAAa"}
1
+ {"version":3,"file":"Form.mjs","names":[],"sources":["../../../src/components/forms/Form.tsx"],"sourcesContent":["import type React from 'react';\nimport type { ReactNode } from 'react';\nimport { useRef } from 'react';\nimport type { FieldValues, UseFormSetError } from 'react-hook-form';\nimport type { ZodObject, ZodTypeAny } from 'zod';\n\nimport { form, formRoot } from '@mage-ui/styled-system/recipes';\n\nimport { FormAutocomplete } from './controls/FormAutocomplete';\nimport { FormCheckbox } from './controls/FormCheckbox';\nimport { FormCheckboxTree } from './controls/FormCheckboxTree';\nimport { FormCombobox } from './controls/FormCombobox';\nimport { FormDatePicker } from './controls/FormDatePicker';\nimport { FormDateTimePicker } from './controls/FormDateTimePicker';\nimport { FormDropzone } from './controls/FormDropzone';\nimport { FormDropzoneS3 } from './controls/FormDropzoneS3';\nimport { FormFileInput } from './controls/FormFileInput';\nimport { FormFileInputMultiple } from './controls/FormFileInputMultiple';\nimport { FormFileInputMultipleS3 } from './controls/FormFileInputMultipleS3';\nimport { FormFileInputS3 } from './controls/FormFileInputS3';\nimport { FormHidden } from './controls/FormHidden';\nimport { FormPassword } from './controls/FormPassword';\nimport { FormSelect } from './controls/FormSelect';\nimport { FormSubmit } from './controls/FormSubmit';\nimport { FormTextarea } from './controls/FormTextarea';\nimport { FormTextInput } from './controls/FormTextInput';\nimport { FormBase } from './FormBase';\nimport { FormErrorBox } from './FormErrorBox';\nimport { FormS3Context, type S3UploadCallback } from './FormS3Context';\n\ntype FormResponse = {\n body?: object;\n details?: string;\n status?: number;\n url?: string;\n};\n\nexport type FormProps<T extends FieldValues> = {\n $fetcher: (params: { data: T }) => Promise<unknown>;\n onValidSubmit?: (response: FormResponse) => void;\n onInvalidSubmit?: (params: {\n message: string;\n setError: UseFormSetError<T>;\n status: number;\n }) => void;\n invalidStatus?: number[];\n children: ReactNode;\n schema?: ZodObject<Record<string, ZodTypeAny>>;\n t?: (\n key: string,\n bindings?: Record<string, string>,\n fallback?: string,\n ) => string | React.ReactNode;\n /** Mensaje mostrado al usuario si falla la subida de archivos a S3 tras el submit. */\n s3UploadErrorMessage?: string;\n classNames?: {\n form?: string;\n root?: string;\n };\n};\n\ntype FormError = {\n statusCode: number;\n message: string;\n cause?: {\n issues: Record<string, string>;\n };\n};\n\nexport const Form = <T extends FieldValues>({\n $fetcher,\n onValidSubmit,\n onInvalidSubmit,\n invalidStatus = [],\n children,\n schema,\n t,\n s3UploadErrorMessage,\n classNames,\n}: FormProps<T>) => {\n const s3CallbacksRef = useRef<Map<string, S3UploadCallback>>(new Map());\n\n const s3ContextValue = {\n registerS3Upload: (name: string, cb: S3UploadCallback) => {\n s3CallbacksRef.current.set(name, cb);\n },\n unregisterS3Upload: (name: string) => {\n s3CallbacksRef.current.delete(name);\n },\n };\n\n const runS3Uploads = async (response: unknown): Promise<void> => {\n const callbacks = Array.from(s3CallbacksRef.current.values());\n await Promise.all(callbacks.map((cb) => cb(response)));\n };\n\n const onSubmit = async ({\n data,\n setError,\n }: {\n data: FieldValues;\n setError: UseFormSetError<FieldValues>;\n }) => {\n await $fetcher({ data: data as T })\n .then(async (response) => {\n const res = response as FormError & FormResponse;\n if (res?.statusCode && res.statusCode >= 400) {\n throw res;\n }\n\n try {\n await runS3Uploads(response);\n } catch (e) {\n console.error('S3 upload error:', e);\n setError('root.serverError', {\n type: 's3',\n message: s3UploadErrorMessage ?? 'Failed to upload files',\n });\n return;\n }\n onValidSubmit?.((response || {}) as FormResponse);\n })\n .catch((error: FormError) => {\n if (\n (error.statusCode === 400 || error.statusCode === 422) &&\n error.cause?.issues\n ) {\n Object.keys(error.cause.issues).forEach((key) => {\n setError(key, {\n type: 'server',\n message: error.cause?.issues?.[key],\n });\n });\n }\n\n if (invalidStatus.includes(error.statusCode) && onInvalidSubmit) {\n onInvalidSubmit({\n message: error?.message ?? 'Something went wrong',\n setError: setError as UseFormSetError<T>,\n status: error.statusCode,\n });\n } else if (error.statusCode === 400 || error.statusCode === 422) {\n setError('root.serverError', {\n type: 'server',\n message: error?.message ?? 'Something went wrong',\n });\n } else {\n throw error;\n }\n });\n };\n\n return (\n <FormS3Context.Provider value={s3ContextValue}>\n <FormBase\n onSubmit={onSubmit}\n schema={schema}\n errorBox={FormErrorBox}\n t={t}\n classNames={{\n form: classNames?.form ?? form(),\n root: classNames?.root ?? formRoot(),\n }}\n >\n {children}\n </FormBase>\n </FormS3Context.Provider>\n );\n};\n\nForm.displayName = 'Form';\nForm.TextInput = FormTextInput;\nForm.Textarea = FormTextarea;\nForm.Submit = FormSubmit;\nForm.Hidden = FormHidden;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxTree = FormCheckboxTree;\nForm.Password = FormPassword;\nForm.Select = FormSelect;\nForm.Combobox = FormCombobox;\nForm.Autocomplete = FormAutocomplete;\nForm.DatePicker = FormDatePicker;\nForm.DateTimePicker = FormDateTimePicker;\nForm.FileInput = FormFileInput;\nForm.FileInputMultiple = FormFileInputMultiple;\nForm.FileInputS3 = FormFileInputS3;\nForm.FileInputMultipleS3 = FormFileInputMultipleS3;\nForm.Dropzone = FormDropzone;\nForm.DropzoneS3 = FormDropzoneS3;\n"],"mappings":"24CAqEA,MAAa,GAA+B,CAC1C,WACA,gBACA,kBACA,gBAAgB,EAAE,CAClB,WACA,SACA,IACA,uBACA,gBACkB,CAClB,IAAM,EAAiB,EAAsC,IAAI,IAAM,CAEjE,EAAiB,CACrB,kBAAmB,EAAc,IAAyB,CACxD,EAAe,QAAQ,IAAI,EAAM,EAAG,EAEtC,mBAAqB,GAAiB,CACpC,EAAe,QAAQ,OAAO,EAAK,EAEtC,CAEK,EAAe,KAAO,IAAqC,CAC/D,IAAM,EAAY,MAAM,KAAK,EAAe,QAAQ,QAAQ,CAAC,CAC7D,MAAM,QAAQ,IAAI,EAAU,IAAK,GAAO,EAAG,EAAS,CAAC,CAAC,EA2DxD,OACE,EAAC,EAAc,SAAf,CAAwB,MAAO,WAC7B,EAAC,EAAD,CACY,SA3DC,MAAO,CACtB,OACA,cAII,CACJ,MAAM,EAAS,CAAQ,OAAW,CAAC,CAChC,KAAK,KAAO,IAAa,CACxB,IAAM,EAAM,EACZ,GAAI,GAAK,YAAc,EAAI,YAAc,IACvC,MAAM,EAGR,GAAI,CACF,MAAM,EAAa,EAAS,OACrB,EAAG,CACV,QAAQ,MAAM,mBAAoB,EAAE,CACpC,EAAS,mBAAoB,CAC3B,KAAM,KACN,QAAS,GAAwB,yBAClC,CAAC,CACF,OAEF,IAAiB,GAAY,EAAE,CAAkB,EACjD,CACD,MAAO,GAAqB,CAa3B,IAXG,EAAM,aAAe,KAAO,EAAM,aAAe,MAClD,EAAM,OAAO,QAEb,OAAO,KAAK,EAAM,MAAM,OAAO,CAAC,QAAS,GAAQ,CAC/C,EAAS,EAAK,CACZ,KAAM,SACN,QAAS,EAAM,OAAO,SAAS,GAChC,CAAC,EACF,CAGA,EAAc,SAAS,EAAM,WAAW,EAAI,EAC9C,EAAgB,CACd,QAAS,GAAO,SAAW,uBACjB,WACV,OAAQ,EAAM,WACf,CAAC,SACO,EAAM,aAAe,KAAO,EAAM,aAAe,IAC1D,EAAS,mBAAoB,CAC3B,KAAM,SACN,QAAS,GAAO,SAAW,uBAC5B,CAAC,MAEF,MAAM,GAER,EAOQ,SACR,SAAU,EACP,IACH,WAAY,CACV,KAAM,GAAY,MAAQ,GAAM,CAChC,KAAM,GAAY,MAAQ,GAAU,CACrC,CAEA,WACQ,CAAA,CACY,CAAA,EAI7B,EAAK,YAAc,OACnB,EAAK,UAAY,EACjB,EAAK,SAAW,EAChB,EAAK,OAAS,EACd,EAAK,OAAS,EACd,EAAK,SAAW,EAChB,EAAK,aAAe,EACpB,EAAK,SAAW,EAChB,EAAK,OAAS,EACd,EAAK,SAAW,EAChB,EAAK,aAAe,EACpB,EAAK,WAAa,EAClB,EAAK,eAAiB,EACtB,EAAK,UAAY,EACjB,EAAK,kBAAoB,EACzB,EAAK,YAAc,EACnB,EAAK,oBAAsB,EAC3B,EAAK,SAAW,EAChB,EAAK,WAAa"}
@@ -3,6 +3,7 @@ import { Form, FormProps } from "./Form.mjs";
3
3
  import { FormS3Context, FormS3ContextValue, S3UploadCallback, useFormS3Context } from "./FormS3Context.mjs";
4
4
  import { Fieldset, FieldsetProps } from "./layout/Fieldset.mjs";
5
5
  import { MultiStepFormProps, RequestResponse, Schema, SchemaProps } from "./multi-step/parser/Schema.mjs";
6
- import { MultiForm, MultiFormProps } from "./multi-step/MultiForm.mjs";
6
+ import { MultiForm, MultiFormProps, MultiFormStep, MultiFormStepProps } from "./multi-step/MultiForm.mjs";
7
+ import { MultiFormContext, MultiFormContextValue, useMultiFormContext } from "./multi-step/MultiFormContext.mjs";
7
8
  import { PASSWORD_RULES } from "./rules/password-rules.mjs";
8
9
  import { z } from "./rules/zod.mjs";
@@ -1,12 +1,23 @@
1
1
  import { StepperProps } from "../../navigations/stepper/Stepper.mjs";
2
2
  import { SchemaProps } from "./parser/Schema.mjs";
3
3
  import * as react_jsx_runtime0 from "react/jsx-runtime";
4
- import { ComponentType } from "react";
4
+ import { ComponentType, ReactNode } from "react";
5
5
 
6
6
  //#region src/components/forms/multi-step/MultiForm.d.ts
7
+ type MultiFormStepProps = {
8
+ name: string;
9
+ rules: SchemaProps['rules'];
10
+ label?: string;
11
+ description?: string;
12
+ children: SchemaProps['form'];
13
+ };
14
+ declare const MultiFormStep: {
15
+ (_props: MultiFormStepProps): null;
16
+ displayName: string;
17
+ };
7
18
  type MultiFormProps = {
8
19
  name: string;
9
- schema: SchemaProps[];
20
+ children: ReactNode;
10
21
  Success: ComponentType<{
11
22
  values: Partial<unknown>;
12
23
  }>;
@@ -16,14 +27,19 @@ type MultiFormProps = {
16
27
  };
17
28
  stepperProps?: Omit<StepperProps, 'children' | 'active'>;
18
29
  };
19
- declare const MultiForm: ({
30
+ declare const MultiForm: (({
20
31
  name,
21
- schema,
32
+ children,
22
33
  Success,
23
34
  Loading,
24
35
  classNames,
25
36
  stepperProps
26
- }: MultiFormProps) => react_jsx_runtime0.JSX.Element;
37
+ }: MultiFormProps) => react_jsx_runtime0.JSX.Element) & {
38
+ Step: {
39
+ (_props: MultiFormStepProps): null;
40
+ displayName: string;
41
+ };
42
+ };
27
43
  //#endregion
28
- export { MultiForm, MultiFormProps };
44
+ export { MultiForm, MultiFormProps, MultiFormStep, MultiFormStepProps };
29
45
  //# sourceMappingURL=MultiForm.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MultiForm.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/MultiForm.tsx"],"mappings":";;;;;;KAUY,cAAA;EACV,IAAA;EACA,MAAA,EAAQ,WAAA;EACR,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,cAGT,SAAA;EAAa,IAAA;EAAA,MAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA;AAAA,GAOvB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}
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,2 +1,2 @@
1
- import{NoSsr as e}from"../../../utils/NoSsr.mjs";import{storage as t}from"./parser/utils/use-local-storage.mjs";import{Schemas as n}from"./parser/Schemas.mjs";import{jsx as r}from"react/jsx-runtime";import{useCallback as i,useState as a}from"react";import{Formity as o}from"@formity/react";const s=({name:s,schema:c,Success:l,Loading:u,classNames:d,stepperProps:f})=>{let[p,m]=a(!1),[h,g]=a({}),_=i(e=>{g({...h,...e})},[h]),v=i(()=>{m(!0)},[]);if(p)return t.set(s,{}),r(l,{values:h});let y=new n(s,c,t.get(s,{}),d,f);return r(e,{fallback:r(u,{}),children:r(o,{schema:y.toRender(),params:{fields:h,onChange:_,onSubmit:v},initialState:y.currentState(),onReturn:v})})};export{s as MultiForm};
1
+ import{NoSsr as e}from"../../misc/no-ssr/NoSsr.mjs";import{storage as t}from"./parser/utils/use-local-storage.mjs";import{Schemas as n}from"./parser/Schemas.mjs";import{jsx as r}from"react/jsx-runtime";import{Children as i,isValidElement as a,useCallback as o,useState as s}from"react";import{Formity as c}from"@formity/react";const l=e=>null;l.displayName=`MultiForm.Step`;const u=Object.assign(({name:u,children:d,Success:f,Loading:p,classNames:m,stepperProps:h})=>{let[g,_]=s(!1),[v,y]=s({}),b=o(e=>{y({...v,...e})},[v]),x=o(()=>{_(!0)},[]);if(g)return t.set(u,{}),r(f,{values:v});let S=new n(u,i.toArray(d).filter(a).map(e=>{if(e.type!==l)throw Error(`MultiForm children must be MultiForm.Step elements`);let t=e.props;return{name:t.name,rules:t.rules,label:t.label,description:t.description,form:t.children}}),t.get(u,{}),m,h);return r(e,{fallback:r(p,{}),children:r(c,{schema:S.toRender(),params:{fields:v,onChange:b,onSubmit:x},initialState:S.currentState(),onReturn:x})})},{Step:l});export{u as MultiForm,l as MultiFormStep};
2
2
  //# sourceMappingURL=MultiForm.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"MultiForm.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/MultiForm.tsx"],"sourcesContent":["import { type ComponentType, useCallback, useState } from 'react';\n\nimport { Formity } from '@formity/react';\n\nimport { NoSsr } from '../../../utils/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 MultiFormProps = {\n name: string;\n schema: SchemaProps[];\n Success: ComponentType<{ values: Partial<unknown> }>;\n Loading: ComponentType;\n classNames?: { root?: string };\n stepperProps?: Omit<StepperProps, 'children' | 'active'>;\n};\n\nexport const MultiForm = ({\n name,\n schema,\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 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\n// TODO: exportar component i subcomponet Multiform i dins MultiForm.Step > Form\n"],"mappings":"kSAmBA,MAAa,GAAa,CACxB,OACA,SACA,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,CAGpC,IAAM,EAAY,IAAI,EACpB,EACA,EACA,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"}
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"}
@@ -0,0 +1,22 @@
1
+ import * as react from "react";
2
+ import { GetState, OnBack, OnNext, SetState } from "@formity/react";
3
+
4
+ //#region src/components/forms/multi-step/MultiFormContext.d.ts
5
+ type MultiFormContextValue = {
6
+ onNext: OnNext;
7
+ onBack: OnBack;
8
+ getState: GetState;
9
+ setState: SetState;
10
+ onWatch: (values: Record<string, unknown>) => void;
11
+ onEnter: () => void;
12
+ goTo: (step: number) => void;
13
+ step: {
14
+ current: number;
15
+ total: number;
16
+ };
17
+ };
18
+ declare const MultiFormContext: react.Context<MultiFormContextValue | null>;
19
+ declare const useMultiFormContext: () => MultiFormContextValue;
20
+ //#endregion
21
+ export { MultiFormContext, MultiFormContextValue, useMultiFormContext };
22
+ //# sourceMappingURL=MultiFormContext.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MultiFormContext.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/MultiFormContext.tsx"],"mappings":";;;;KAIY,qBAAA;EACV,MAAA,EAAQ,MAAA;EACR,MAAA,EAAQ,MAAA;EACR,QAAA,EAAU,QAAA;EACV,QAAA,EAAU,QAAA;EACV,OAAA,GAAU,MAAA,EAAQ,MAAA;EAClB,OAAA;EACA,IAAA,GAAO,IAAA;EACP,IAAA;IAAQ,OAAA;IAAiB,KAAA;EAAA;AAAA;AAAA,cAGd,gBAAA,EAAgB,KAAA,CAAA,OAAA,CAAA,qBAAA;AAAA,cAIhB,mBAAA,QAA0B,qBAAA"}
@@ -0,0 +1,2 @@
1
+ import{createContext as e,useContext as t}from"react";const n=e(null),r=()=>{let e=t(n);if(!e)throw Error(`useMultiFormContext must be used inside a MultiForm.Step`);return e};export{n as MultiFormContext,r as useMultiFormContext};
2
+ //# sourceMappingURL=MultiFormContext.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MultiFormContext.mjs","names":[],"sources":["../../../../src/components/forms/multi-step/MultiFormContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { GetState, OnBack, OnNext, SetState } from '@formity/react';\n\nexport type MultiFormContextValue = {\n onNext: OnNext;\n onBack: OnBack;\n getState: GetState;\n setState: SetState;\n onWatch: (values: Record<string, unknown>) => void;\n onEnter: () => void;\n goTo: (step: number) => void;\n step: { current: number; total: number };\n};\n\nexport const MultiFormContext = createContext<MultiFormContextValue | null>(\n null,\n);\n\nexport const useMultiFormContext = (): MultiFormContextValue => {\n const ctx = useContext(MultiFormContext);\n if (!ctx) {\n throw new Error('useMultiFormContext must be used inside a MultiForm.Step');\n }\n return ctx;\n};\n"],"mappings":"sDAeA,MAAa,EAAmB,EAC9B,KACD,CAEY,MAAmD,CAC9D,IAAM,EAAM,EAAW,EAAiB,CACxC,GAAI,CAAC,EACH,MAAU,MAAM,2DAA2D,CAE7E,OAAO"}
@@ -1 +1 @@
1
- {"version":3,"file":"Step.d.mts","names":[],"sources":["../../../../src/components/forms/multi-step/Step.tsx"],"mappings":";;;;;;KAkBY,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;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,2 +1,2 @@
1
- import{Stepper as e}from"../../navigations/stepper/Stepper.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{multiForm as n,multiFormRoot as r}from"@mage-ui/styled-system/recipes";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{createContext as o,useMemo as s}from"react";const c=o(null),l=({values:o,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(),i(c.Provider,{value:C,children:a(`div`,{className:t(n(),y?.root??r()),children:[i(e,{allowNextStepsSelect:!1,...b,onStepClick:b?.onStepClick??(e=>_(e+1)),active:u.current-1,children:d.map(t=>i(e.Step,{label:t.label,description:t.description},t.label))}),i(x,{defaultValues:o,rules:l,...C,...S})]})})};export{l 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(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, createContext, 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';\n\ntype MultiFormValue = {\n onNext: OnNext;\n onBack: OnBack;\n getState: GetState;\n setState: SetState;\n};\n\nconst MultiFormContext = createContext<MultiFormValue | null>(null);\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":"mSAgBA,MAAM,EAAmB,EAAqC,KAAK,CA6BtD,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 };\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"}
@@ -55,6 +55,7 @@ import { CheckboxTree, CheckboxTreeItem, CheckboxTreeProps } from "./controls/ch
55
55
  import { DatePicker, DatePickerClassNames, DatePickerDate, DatePickerProps, DatePickerValue } from "./controls/date-picker/DatePicker.mjs";
56
56
  import { DateTimePicker, DateTimePickerClassNames, DateTimePickerDate, DateTimePickerProps, DateTimePickerValue } from "./controls/date-time-picker/DateTimePicker.mjs";
57
57
  import { HorizontalDivider, HorizontalDividerProps } from "./misc/horizontal-divider/HorizontalDivider.mjs";
58
+ import { NoSsr } from "./misc/no-ssr/NoSsr.mjs";
58
59
  import { ScrollAreaAutosize, ScrollAreaAutosizeProps } from "./misc/scroll-area-autosize/ScrollAreaAutosize.mjs";
59
60
  import { Virtual, VirtualItem, VirtualPadding, VirtualProps } from "./misc/virtual/Virtual.mjs";
60
61
  import { VisuallyHidden, VisuallyHiddenProps } from "./misc/visually-hidden/VisuallyHidden.mjs";
@@ -85,7 +86,8 @@ import { FormS3Context, FormS3ContextValue, S3UploadCallback, useFormS3Context }
85
86
  import { Fieldset, FieldsetProps } from "./forms/layout/Fieldset.mjs";
86
87
  import { Stepper, StepperClassNames, StepperProps, StepperStepProps } from "./navigations/stepper/Stepper.mjs";
87
88
  import { MultiStepFormProps, RequestResponse, Schema, SchemaProps } from "./forms/multi-step/parser/Schema.mjs";
88
- import { MultiForm, MultiFormProps } from "./forms/multi-step/MultiForm.mjs";
89
+ import { MultiForm, MultiFormProps, MultiFormStep, MultiFormStepProps } from "./forms/multi-step/MultiForm.mjs";
90
+ import { MultiFormContext, MultiFormContextValue, useMultiFormContext } from "./forms/multi-step/MultiFormContext.mjs";
89
91
  import { PASSWORD_RULES } from "./forms/rules/password-rules.mjs";
90
92
  import { z } from "./forms/rules/zod.mjs";
91
93
  import { Card, CardBase, CardBody, CardClassNames, CardFooter, CardHeader, CardProps, CardRoot } from "./layouts/card/Card.mjs";
@@ -1,5 +1,6 @@
1
1
  import { ScrollArea, ScrollAreaClassNames, ScrollAreaProps } from "./scroll-area/ScrollArea.mjs";
2
2
  import { HorizontalDivider, HorizontalDividerProps } from "./horizontal-divider/HorizontalDivider.mjs";
3
+ import { NoSsr } from "./no-ssr/NoSsr.mjs";
3
4
  import { ScrollAreaAutosize, ScrollAreaAutosizeProps } from "./scroll-area-autosize/ScrollAreaAutosize.mjs";
4
5
  import { Virtual, VirtualItem, VirtualPadding, VirtualProps } from "./virtual/Virtual.mjs";
5
6
  import { VisuallyHidden, VisuallyHiddenProps } from "./visually-hidden/VisuallyHidden.mjs";
@@ -0,0 +1,14 @@
1
+ import { ReactNode } from "react";
2
+
3
+ //#region src/components/misc/no-ssr/NoSsr.d.ts
4
+ type Props = {
5
+ children: ReactNode;
6
+ fallback?: ReactNode;
7
+ };
8
+ declare const NoSsr: ({
9
+ children,
10
+ fallback
11
+ }: Props) => ReactNode;
12
+ //#endregion
13
+ export { NoSsr };
14
+ //# sourceMappingURL=NoSsr.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NoSsr.d.mts","names":[],"sources":["../../../../src/components/misc/no-ssr/NoSsr.tsx"],"mappings":";;;KAIK,KAAA;EACH,QAAA,EAAU,SAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,KAAA;EAAS,QAAA;EAAA;AAAA,GAA+B,KAAA,KAAK,SAAA"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NoSsr.mjs","names":[],"sources":["../../../../src/components/misc/no-ssr/NoSsr.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\n\ntype Props = {\n children: ReactNode;\n fallback?: ReactNode;\n};\n\nexport const NoSsr = ({ children, fallback = null }: Props) => {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => setMounted(true), []);\n\n if (!mounted) {\n return fallback;\n }\n\n return children;\n};\n"],"mappings":"6DASA,MAAa,GAAS,CAAE,WAAU,WAAW,QAAkB,CAC7D,GAAM,CAAC,EAAS,GAAc,EAAS,GAAM,CAQ7C,OANA,MAAgB,EAAW,GAAK,CAAE,EAAE,CAAC,CAEhC,EAIE,EAHE"}
package/dist/index.d.mts CHANGED
@@ -55,6 +55,7 @@ import { CheckboxTree, CheckboxTreeItem, CheckboxTreeProps } from "./components/
55
55
  import { DatePicker, DatePickerClassNames, DatePickerDate, DatePickerProps, DatePickerValue } from "./components/controls/date-picker/DatePicker.mjs";
56
56
  import { DateTimePicker, DateTimePickerClassNames, DateTimePickerDate, DateTimePickerProps, DateTimePickerValue } from "./components/controls/date-time-picker/DateTimePicker.mjs";
57
57
  import { HorizontalDivider, HorizontalDividerProps } from "./components/misc/horizontal-divider/HorizontalDivider.mjs";
58
+ import { NoSsr } from "./components/misc/no-ssr/NoSsr.mjs";
58
59
  import { ScrollAreaAutosize, ScrollAreaAutosizeProps } from "./components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs";
59
60
  import { Virtual, VirtualItem, VirtualPadding, VirtualProps } from "./components/misc/virtual/Virtual.mjs";
60
61
  import { VisuallyHidden, VisuallyHiddenProps } from "./components/misc/visually-hidden/VisuallyHidden.mjs";
@@ -85,7 +86,8 @@ import { FormS3Context, FormS3ContextValue, S3UploadCallback, useFormS3Context }
85
86
  import { Fieldset, FieldsetProps } from "./components/forms/layout/Fieldset.mjs";
86
87
  import { Stepper, StepperClassNames, StepperProps, StepperStepProps } from "./components/navigations/stepper/Stepper.mjs";
87
88
  import { MultiStepFormProps, RequestResponse, Schema, SchemaProps } from "./components/forms/multi-step/parser/Schema.mjs";
88
- import { MultiForm, MultiFormProps } from "./components/forms/multi-step/MultiForm.mjs";
89
+ import { MultiForm, MultiFormProps, MultiFormStep, MultiFormStepProps } from "./components/forms/multi-step/MultiForm.mjs";
90
+ import { MultiFormContext, MultiFormContextValue, useMultiFormContext } from "./components/forms/multi-step/MultiFormContext.mjs";
89
91
  import { PASSWORD_RULES } from "./components/forms/rules/password-rules.mjs";
90
92
  import { z } from "./components/forms/rules/zod.mjs";
91
93
  import { Card, CardBase, CardBody, CardClassNames, CardFooter, CardHeader, CardProps, CardRoot } from "./components/layouts/card/Card.mjs";
@@ -103,4 +105,4 @@ import { Modals } from "./components/overlays/modal/index.mjs";
103
105
  import { Toast, ToastIntent, ToastOptions, ToastProviderProps } from "./components/overlays/toast/Toast.mjs";
104
106
  import { Tooltip, TooltipProps } from "./components/overlays/tooltip/Tooltip.mjs";
105
107
  import { MageUiProvider, MageUiProviderProps } from "./providers/MageUiProvider.mjs";
106
- export { Autocomplete, AutocompleteProps, Avatar, AvatarDropzone, AvatarDropzoneProps, AvatarDropzoneS3, AvatarDropzoneS3Props, AvatarProps, AvatarUpload, AvatarUploadProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsBarProps, BreadcrumbsProps, Button, ButtonAction, ButtonActionProps, ButtonIcon, ButtonIconProps, ButtonIconVisual, ButtonIconVisualProps, ButtonLoader, ButtonProps, ButtonVisual, ButtonVisualProps, Calendar, CalendarEvent, CalendarProps, CalendarView, Card, CardBase, CardBody, CardClassNames, CardFooter, CardHeader, CardProps, CardRoot, Checkbox, CheckboxProps, CheckboxTree, CheckboxTreeItem, CheckboxTreeProps, ColumnDef, Combobox, ComboboxProps, DEFAULT_DATA_TABLE_LABELS, DataTable, DataTableBottomSlot, DataTableBottomSlotProps, DataTableClassNames, DataTableColumnMeta, DataTableContextProvider, DataTableContextValue, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFeedback, DataTableFiltersConfig, DataTableLabels, DataTablePageSize, DataTablePageSizeProps, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig, DataTableTopSlot, DataTableTopSlotProps, DateLocalizer, DatePicker, DatePickerClassNames, DatePickerDate, DatePickerProps, DatePickerValue, DateTimePicker, DateTimePickerClassNames, DateTimePickerDate, DateTimePickerProps, DateTimePickerValue, DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps, Details, DetailsProps, DocumentItem, DocumentItemProps, Dropzone, DropzoneProps, DropzoneS3, DropzoneS3Props, DropzoneS3Texts, ExpandedState, Fieldset, FieldsetProps, FileData, FileIcon, FileIconProps, FileInput, FileInputMultiple, FileInputMultipleProps, FileInputMultipleS3, FileInputMultipleS3Handle, FileInputMultipleS3Props, FileInputProps, FileInputS3, FileInputS3Handle, FileInputS3Props, FileMetadata, FluidGrid, FluidGridProps, Form, FormDropzoneS3Props, FormProps, FormS3Context, FormS3ContextValue, Grid, GridClassNames, HorizontalDivider, HorizontalDividerProps, Icon, IconProps, IconRaw, IconRawProps, IconSvg, IconSvgProps, IconWrapped, IconWrappedProps, Indicator, IndicatorProps, LoaderDot, LoaderDotProps, LoaderOval, LoaderOvalProps, LogoImage, LogoImageProps, LogoSvg, LogoSvgProps, MageUiProvider, MageUiProviderProps, Menu, MenuProps, Modal, ModalClassNames, ModalIntent, ModalProps, ModalRegistry, ModalRegistryEntry, ModalRootProps, Modals, MultiForm, MultiFormProps, MultiStepFormProps, NavigationMenu, NavigationMenuProps, NotificationBanner, NotificationBannerIntent, NotificationBannerProps, PASSWORD_RULES, Pagination, PaginationClassNames, PaginationRootProps, PaginationState, PasswordInput, PasswordInputProps, PasswordRule, PasswordRuleDefinition, PasswordSegment, PasswordStrengthInput, PasswordStrengthInputProps, Progress, ProgressClassNames, ProgressProps, Radio, RadioProps, RemovableItem, RemovableItemProps, RequestResponse, ResourceItem, ResourceItemProps, RowSelectionState, S3FileMeta, S3InitBody, S3InitResponse, S3UploadCallback, Schema, SchemaProps, ScrollArea, ScrollAreaAutosize, ScrollAreaAutosizeProps, ScrollAreaClassNames, ScrollAreaProps, Select, SelectProps, Sidebar, SidebarClassNames, SidebarProps, SortingState, Stepper, StepperClassNames, StepperProps, StepperStepProps, Switch, SwitchGroup, SwitchGroupProps, SwitchProps, Table, TableBodyProps, TableCaptionProps, TableCellProps, TableClassNames, TableFootProps, TableHeadProps, TableHeaderCellProps, TableProps, TableRowProps, Tag, TagGroup, TagGroupProps, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, Toast, ToastIntent, ToastOptions, ToastProviderProps, Tooltip, TooltipProps, UploadTarget, UploadedFile, UploadedFileDetails, UploadedFileDetailsProps, UploadedFileProps, UploadedFiles, UploadedFilesClassNames, UploadedFilesItemClassNames, UploadedFilesItemProps, UploadedFilesProps, UploadedS3File, UploadingFiles, UploadingFilesClassNames, UploadingFilesItemClassNames, UploadingFilesItemErrorClassNames, UploadingFilesItemErrorProps, UploadingFilesItemProps, UploadingFilesProps, Virtual, VirtualItem, VirtualPadding, VirtualProps, VisuallyHidden, VisuallyHiddenProps, getFileExtension, useDataTableContext, useFormS3Context, usePasswordRules, z };
108
+ export { Autocomplete, AutocompleteProps, Avatar, AvatarDropzone, AvatarDropzoneProps, AvatarDropzoneS3, AvatarDropzoneS3Props, AvatarProps, AvatarUpload, AvatarUploadProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsBarProps, BreadcrumbsProps, Button, ButtonAction, ButtonActionProps, ButtonIcon, ButtonIconProps, ButtonIconVisual, ButtonIconVisualProps, ButtonLoader, ButtonProps, ButtonVisual, ButtonVisualProps, Calendar, CalendarEvent, CalendarProps, CalendarView, Card, CardBase, CardBody, CardClassNames, CardFooter, CardHeader, CardProps, CardRoot, Checkbox, CheckboxProps, CheckboxTree, CheckboxTreeItem, CheckboxTreeProps, ColumnDef, Combobox, ComboboxProps, DEFAULT_DATA_TABLE_LABELS, DataTable, DataTableBottomSlot, DataTableBottomSlotProps, DataTableClassNames, DataTableColumnMeta, DataTableContextProvider, DataTableContextValue, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFeedback, DataTableFiltersConfig, DataTableLabels, DataTablePageSize, DataTablePageSizeProps, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig, DataTableTopSlot, DataTableTopSlotProps, DateLocalizer, DatePicker, DatePickerClassNames, DatePickerDate, DatePickerProps, DatePickerValue, DateTimePicker, DateTimePickerClassNames, DateTimePickerDate, DateTimePickerProps, DateTimePickerValue, DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps, Details, DetailsProps, DocumentItem, DocumentItemProps, Dropzone, DropzoneProps, DropzoneS3, DropzoneS3Props, DropzoneS3Texts, ExpandedState, Fieldset, FieldsetProps, FileData, FileIcon, FileIconProps, FileInput, FileInputMultiple, FileInputMultipleProps, FileInputMultipleS3, FileInputMultipleS3Handle, FileInputMultipleS3Props, FileInputProps, FileInputS3, FileInputS3Handle, FileInputS3Props, FileMetadata, FluidGrid, FluidGridProps, Form, FormDropzoneS3Props, FormProps, FormS3Context, FormS3ContextValue, Grid, GridClassNames, HorizontalDivider, HorizontalDividerProps, Icon, IconProps, IconRaw, IconRawProps, IconSvg, IconSvgProps, IconWrapped, IconWrappedProps, Indicator, IndicatorProps, LoaderDot, LoaderDotProps, LoaderOval, LoaderOvalProps, LogoImage, LogoImageProps, LogoSvg, LogoSvgProps, MageUiProvider, MageUiProviderProps, Menu, MenuProps, Modal, ModalClassNames, ModalIntent, ModalProps, ModalRegistry, ModalRegistryEntry, ModalRootProps, Modals, MultiForm, MultiFormContext, MultiFormContextValue, MultiFormProps, MultiFormStep, MultiFormStepProps, MultiStepFormProps, NavigationMenu, NavigationMenuProps, NoSsr, NotificationBanner, NotificationBannerIntent, NotificationBannerProps, PASSWORD_RULES, Pagination, PaginationClassNames, PaginationRootProps, PaginationState, PasswordInput, PasswordInputProps, PasswordRule, PasswordRuleDefinition, PasswordSegment, PasswordStrengthInput, PasswordStrengthInputProps, Progress, ProgressClassNames, ProgressProps, Radio, RadioProps, RemovableItem, RemovableItemProps, RequestResponse, ResourceItem, ResourceItemProps, RowSelectionState, S3FileMeta, S3InitBody, S3InitResponse, S3UploadCallback, Schema, SchemaProps, ScrollArea, ScrollAreaAutosize, ScrollAreaAutosizeProps, ScrollAreaClassNames, ScrollAreaProps, Select, SelectProps, Sidebar, SidebarClassNames, SidebarProps, SortingState, Stepper, StepperClassNames, StepperProps, StepperStepProps, Switch, SwitchGroup, SwitchGroupProps, SwitchProps, Table, TableBodyProps, TableCaptionProps, TableCellProps, TableClassNames, TableFootProps, TableHeadProps, TableHeaderCellProps, TableProps, TableRowProps, Tag, TagGroup, TagGroupProps, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, Toast, ToastIntent, ToastOptions, ToastProviderProps, Tooltip, TooltipProps, UploadTarget, UploadedFile, UploadedFileDetails, UploadedFileDetailsProps, UploadedFileProps, UploadedFiles, UploadedFilesClassNames, UploadedFilesItemClassNames, UploadedFilesItemProps, UploadedFilesProps, UploadedS3File, UploadingFiles, UploadingFilesClassNames, UploadingFilesItemClassNames, UploadingFilesItemErrorClassNames, UploadingFilesItemErrorProps, UploadingFilesItemProps, UploadingFilesProps, Virtual, VirtualItem, VirtualPadding, VirtualProps, VisuallyHidden, VisuallyHiddenProps, getFileExtension, useDataTableContext, useFormS3Context, useMultiFormContext, usePasswordRules, z };
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- import{Button as e}from"./components/buttons/button/Button.mjs";import{VisuallyHidden as t}from"./components/misc/visually-hidden/VisuallyHidden.mjs";import{ButtonAction as n}from"./components/buttons/button-action/ButtonAction.mjs";import{ButtonLoader as r}from"./components/buttons/button-action/ButtonLoader.mjs";import{Avatar as i}from"./components/data-display/avatar/Avatar.mjs";import{Badge as a}from"./components/data-display/badge/Badge.mjs";import{Tooltip as o}from"./components/overlays/tooltip/Tooltip.mjs";import{Calendar as s}from"./components/data-display/calendar/Calendar.mjs";import{Virtual as c}from"./components/misc/virtual/Virtual.mjs";import{ScrollArea as l}from"./components/misc/scroll-area/ScrollArea.mjs";import{Table as u}from"./components/data-display/table/Table.mjs";import{IconRaw as d}from"./components/data-display/icons/icon-raw/IconRaw.mjs";import{Icon as f}from"./components/data-display/icons/icon/Icon.mjs";import{DEFAULT_DATA_TABLE_LABELS as p,DataTableContextProvider as m,useDataTableContext as h}from"./components/data-display/datatables/useDataTableContext.mjs";import{Checkbox as g}from"./components/controls/checkbox/Checkbox.mjs";import{DataTable as _}from"./components/data-display/datatables/DataTable.mjs";import{HorizontalDivider as v}from"./components/misc/horizontal-divider/HorizontalDivider.mjs";import{ScrollAreaAutosize as y}from"./components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{TextInput as b}from"./components/controls/text-input/TextInput.mjs";import{IconWrapped as x}from"./components/data-display/icons/icon-wrapped/IconWrapped.mjs";import{Select as S}from"./components/controls/dropdown/select/Select.mjs";import{DataTablePageSize as C}from"./components/data-display/datatables/DataTablePageSize.mjs";import{Pagination as w}from"./components/navigations/pagination/Pagination.mjs";import{DataTablePagination as T}from"./components/data-display/datatables/DataTablePagination.mjs";import{DataTableBottomSlot as E}from"./components/data-display/datatables/DataTableBottomSlot.mjs";import{DataTableFeedback as D}from"./components/data-display/datatables/DataTableFeedback.mjs";import{DataTableTopSlot as O}from"./components/data-display/datatables/DataTableTopSlot.mjs";import{DescriptionList as k}from"./components/data-display/description-list/DescriptionList.mjs";import{Details as A}from"./components/data-display/details/Details.mjs";import{FileIcon as j}from"./components/data-display/file-icon/FileIcon.mjs";import{ResourceItem as M}from"./components/data-display/resource-item/ResourceItem.mjs";import{DocumentItem as N}from"./components/data-display/document-item/DocumentItem.mjs";import{IconSvg as P}from"./components/data-display/icons/icon-svg/IconSvg.mjs";import{Indicator as F}from"./components/data-display/indicator/Indicator.mjs";import{LoaderDot as I}from"./components/data-display/loader-dot/LoaderDot.mjs";import{LoaderOval as L}from"./components/data-display/loader-oval/LoaderOval.mjs";import{LogoImage as R}from"./components/data-display/logos/logo-image/LogoImage.mjs";import{LogoSvg as z}from"./components/data-display/logos/logo-svg/LogoSvg.mjs";import{NotificationBanner as B}from"./components/data-display/notification-banner/NotificationBanner.mjs";import{Progress as V}from"./components/data-display/progress/Progress.mjs";import{RemovableItem as H}from"./components/data-display/removable-item/RemovableItem.mjs";import{TagGroup as U}from"./components/data-display/tag-group/TagGroup.mjs";import{Tag as W}from"./components/data-display/tag/Tag.mjs";import{UploadedFile as G}from"./components/data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as K}from"./components/data-display/uploaded-file/UploadedFileDetails.mjs";import{UploadedFiles as q}from"./components/data-display/uploaded-files/UploadedFiles.mjs";import{UploadingFiles as J}from"./components/data-display/uploading-files/UploadingFiles.mjs";import{ButtonIcon as Y}from"./components/buttons/button-icon/ButtonIcon.mjs";import{ButtonIconVisual as X}from"./components/buttons/button-icon-visual/ButtonIconVisual.mjs";import{ButtonVisual as Z}from"./components/buttons/button-visual/ButtonVisual.mjs";import{Modal as Q}from"./components/overlays/modal/Modal.mjs";import{Modals as $}from"./components/overlays/modal/index.mjs";import{Toast as ee}from"./components/overlays/toast/Toast.mjs";import{AvatarUpload as te}from"./components/controls/avatar-upload/AvatarUpload.mjs";import{CheckboxTree as ne}from"./components/controls/checkbox-tree/CheckboxTree.mjs";import{DatePicker as re}from"./components/controls/date-picker/DatePicker.mjs";import{DateTimePicker as ie}from"./components/controls/date-time-picker/DateTimePicker.mjs";import{Autocomplete as ae}from"./components/controls/dropdown/autocomplete/Autocomplete.mjs";import{Combobox as oe}from"./components/controls/dropdown/combobox/Combobox.mjs";import{AvatarDropzone as se}from"./components/controls/dropzone/avatar/AvatarDropzone.mjs";import{getFileExtension as ce}from"./components/controls/dropzone/use-s3-upload.mjs";import{AvatarDropzoneS3 as le}from"./components/controls/dropzone/avatar/AvatarDropzoneS3.mjs";import{Dropzone as ue}from"./components/controls/dropzone/Dropzone.mjs";import{DropzoneS3 as de}from"./components/controls/dropzone/DropzoneS3.mjs";import{FileInput as fe}from"./components/controls/file-input/FileInput.mjs";import{FileInputMultiple as pe}from"./components/controls/file-input/FileInputMultiple.mjs";import{FileInputMultipleS3 as me}from"./components/controls/file-input/FileInputMultipleS3.mjs";import{FileInputS3 as he}from"./components/controls/file-input/FileInputS3.mjs";import{PasswordInput as ge}from"./components/controls/password-input/PasswordInput.mjs";import{PasswordStrengthInput as _e}from"./components/controls/password-input/PasswordStrengthInput.mjs";import{usePasswordRules as ve}from"./components/controls/password-input/usePasswordRules.mjs";import{Radio as ye}from"./components/controls/radio/Radio.mjs";import{SwitchGroup as be}from"./components/controls/switch-group/SwitchGroup.mjs";import{Switch as xe}from"./components/controls/switch/Switch.mjs";import{Textarea as Se}from"./components/controls/textarea/Textarea.mjs";import{FormS3Context as Ce,useFormS3Context as we}from"./components/forms/FormS3Context.mjs";import{PASSWORD_RULES as Te}from"./components/forms/rules/password-rules.mjs";import{z as Ee}from"./components/forms/rules/zod.mjs";import{Form as De}from"./components/forms/Form.mjs";import{Fieldset as Oe}from"./components/forms/layout/Fieldset.mjs";import{Stepper as ke}from"./components/navigations/stepper/Stepper.mjs";import{Schema as Ae}from"./components/forms/multi-step/parser/Schema.mjs";import{MultiForm as je}from"./components/forms/multi-step/MultiForm.mjs";import{Card as Me,CardBase as Ne,CardBody as Pe,CardFooter as Fe,CardHeader as Ie,CardRoot as Le}from"./components/layouts/card/Card.mjs";import{FluidGrid as Re}from"./components/layouts/fluid-grid/FluidGrid.mjs";import{Grid as ze}from"./components/layouts/grid/Grid.mjs";import{Breadcrumbs as Be}from"./components/navigations/breadcrumbs/Breadcrumbs.mjs";import{Menu as Ve}from"./components/navigations/menu/Menu.mjs";import{NavigationMenu as He}from"./components/navigations/navigation-menu/NavigationMenu.mjs";import{Sidebar as Ue}from"./components/navigations/sidebars/sidebar/Sidebar.mjs";import{MageUiProvider as We}from"./providers/MageUiProvider.mjs";export{ae as Autocomplete,i as Avatar,se as AvatarDropzone,le as AvatarDropzoneS3,te as AvatarUpload,a as Badge,Be as Breadcrumbs,e as Button,n as ButtonAction,Y as ButtonIcon,X as ButtonIconVisual,r as ButtonLoader,Z as ButtonVisual,s as Calendar,Me as Card,Ne as CardBase,Pe as CardBody,Fe as CardFooter,Ie as CardHeader,Le as CardRoot,g as Checkbox,ne as CheckboxTree,oe as Combobox,p as DEFAULT_DATA_TABLE_LABELS,_ as DataTable,E as DataTableBottomSlot,m as DataTableContextProvider,D as DataTableFeedback,C as DataTablePageSize,T as DataTablePagination,O as DataTableTopSlot,re as DatePicker,ie as DateTimePicker,k as DescriptionList,A as Details,N as DocumentItem,ue as Dropzone,de as DropzoneS3,Oe as Fieldset,j as FileIcon,fe as FileInput,pe as FileInputMultiple,me as FileInputMultipleS3,he as FileInputS3,Re as FluidGrid,De as Form,Ce as FormS3Context,ze as Grid,v as HorizontalDivider,f as Icon,d as IconRaw,P as IconSvg,x as IconWrapped,F as Indicator,I as LoaderDot,L as LoaderOval,R as LogoImage,z as LogoSvg,We as MageUiProvider,Ve as Menu,Q as Modal,$ as Modals,je as MultiForm,He as NavigationMenu,B as NotificationBanner,Te as PASSWORD_RULES,w as Pagination,ge as PasswordInput,_e as PasswordStrengthInput,V as Progress,ye as Radio,H as RemovableItem,M as ResourceItem,Ae as Schema,l as ScrollArea,y as ScrollAreaAutosize,S as Select,Ue as Sidebar,ke as Stepper,xe as Switch,be as SwitchGroup,u as Table,W as Tag,U as TagGroup,b as TextInput,Se as Textarea,ee as Toast,o as Tooltip,G as UploadedFile,K as UploadedFileDetails,q as UploadedFiles,J as UploadingFiles,c as Virtual,t as VisuallyHidden,ce as getFileExtension,h as useDataTableContext,we as useFormS3Context,ve as usePasswordRules,Ee as z};
1
+ import{Button as e}from"./components/buttons/button/Button.mjs";import{VisuallyHidden as t}from"./components/misc/visually-hidden/VisuallyHidden.mjs";import{ButtonAction as n}from"./components/buttons/button-action/ButtonAction.mjs";import{ButtonLoader as r}from"./components/buttons/button-action/ButtonLoader.mjs";import{Avatar as i}from"./components/data-display/avatar/Avatar.mjs";import{Badge as a}from"./components/data-display/badge/Badge.mjs";import{Tooltip as o}from"./components/overlays/tooltip/Tooltip.mjs";import{Calendar as s}from"./components/data-display/calendar/Calendar.mjs";import{Virtual as c}from"./components/misc/virtual/Virtual.mjs";import{ScrollArea as l}from"./components/misc/scroll-area/ScrollArea.mjs";import{Table as u}from"./components/data-display/table/Table.mjs";import{IconRaw as d}from"./components/data-display/icons/icon-raw/IconRaw.mjs";import{Icon as f}from"./components/data-display/icons/icon/Icon.mjs";import{DEFAULT_DATA_TABLE_LABELS as p,DataTableContextProvider as m,useDataTableContext as h}from"./components/data-display/datatables/useDataTableContext.mjs";import{Checkbox as g}from"./components/controls/checkbox/Checkbox.mjs";import{DataTable as _}from"./components/data-display/datatables/DataTable.mjs";import{HorizontalDivider as v}from"./components/misc/horizontal-divider/HorizontalDivider.mjs";import{NoSsr as y}from"./components/misc/no-ssr/NoSsr.mjs";import{ScrollAreaAutosize as b}from"./components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{TextInput as x}from"./components/controls/text-input/TextInput.mjs";import{IconWrapped as S}from"./components/data-display/icons/icon-wrapped/IconWrapped.mjs";import{Select as C}from"./components/controls/dropdown/select/Select.mjs";import{DataTablePageSize as w}from"./components/data-display/datatables/DataTablePageSize.mjs";import{Pagination as T}from"./components/navigations/pagination/Pagination.mjs";import{DataTablePagination as E}from"./components/data-display/datatables/DataTablePagination.mjs";import{DataTableBottomSlot as D}from"./components/data-display/datatables/DataTableBottomSlot.mjs";import{DataTableFeedback as O}from"./components/data-display/datatables/DataTableFeedback.mjs";import{DataTableTopSlot as k}from"./components/data-display/datatables/DataTableTopSlot.mjs";import{DescriptionList as A}from"./components/data-display/description-list/DescriptionList.mjs";import{Details as j}from"./components/data-display/details/Details.mjs";import{FileIcon as M}from"./components/data-display/file-icon/FileIcon.mjs";import{ResourceItem as N}from"./components/data-display/resource-item/ResourceItem.mjs";import{DocumentItem as P}from"./components/data-display/document-item/DocumentItem.mjs";import{IconSvg as F}from"./components/data-display/icons/icon-svg/IconSvg.mjs";import{Indicator as I}from"./components/data-display/indicator/Indicator.mjs";import{LoaderDot as L}from"./components/data-display/loader-dot/LoaderDot.mjs";import{LoaderOval as R}from"./components/data-display/loader-oval/LoaderOval.mjs";import{LogoImage as z}from"./components/data-display/logos/logo-image/LogoImage.mjs";import{LogoSvg as B}from"./components/data-display/logos/logo-svg/LogoSvg.mjs";import{NotificationBanner as V}from"./components/data-display/notification-banner/NotificationBanner.mjs";import{Progress as H}from"./components/data-display/progress/Progress.mjs";import{RemovableItem as U}from"./components/data-display/removable-item/RemovableItem.mjs";import{TagGroup as W}from"./components/data-display/tag-group/TagGroup.mjs";import{Tag as G}from"./components/data-display/tag/Tag.mjs";import{UploadedFile as K}from"./components/data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as q}from"./components/data-display/uploaded-file/UploadedFileDetails.mjs";import{UploadedFiles as J}from"./components/data-display/uploaded-files/UploadedFiles.mjs";import{UploadingFiles as Y}from"./components/data-display/uploading-files/UploadingFiles.mjs";import{ButtonIcon as X}from"./components/buttons/button-icon/ButtonIcon.mjs";import{ButtonIconVisual as Z}from"./components/buttons/button-icon-visual/ButtonIconVisual.mjs";import{ButtonVisual as Q}from"./components/buttons/button-visual/ButtonVisual.mjs";import{Modal as $}from"./components/overlays/modal/Modal.mjs";import{Modals as ee}from"./components/overlays/modal/index.mjs";import{Toast as te}from"./components/overlays/toast/Toast.mjs";import{AvatarUpload as ne}from"./components/controls/avatar-upload/AvatarUpload.mjs";import{CheckboxTree as re}from"./components/controls/checkbox-tree/CheckboxTree.mjs";import{DatePicker as ie}from"./components/controls/date-picker/DatePicker.mjs";import{DateTimePicker as ae}from"./components/controls/date-time-picker/DateTimePicker.mjs";import{Autocomplete as oe}from"./components/controls/dropdown/autocomplete/Autocomplete.mjs";import{Combobox as se}from"./components/controls/dropdown/combobox/Combobox.mjs";import{AvatarDropzone as ce}from"./components/controls/dropzone/avatar/AvatarDropzone.mjs";import{getFileExtension as le}from"./components/controls/dropzone/use-s3-upload.mjs";import{AvatarDropzoneS3 as ue}from"./components/controls/dropzone/avatar/AvatarDropzoneS3.mjs";import{Dropzone as de}from"./components/controls/dropzone/Dropzone.mjs";import{DropzoneS3 as fe}from"./components/controls/dropzone/DropzoneS3.mjs";import{FileInput as pe}from"./components/controls/file-input/FileInput.mjs";import{FileInputMultiple as me}from"./components/controls/file-input/FileInputMultiple.mjs";import{FileInputMultipleS3 as he}from"./components/controls/file-input/FileInputMultipleS3.mjs";import{FileInputS3 as ge}from"./components/controls/file-input/FileInputS3.mjs";import{PasswordInput as _e}from"./components/controls/password-input/PasswordInput.mjs";import{PasswordStrengthInput as ve}from"./components/controls/password-input/PasswordStrengthInput.mjs";import{usePasswordRules as ye}from"./components/controls/password-input/usePasswordRules.mjs";import{Radio as be}from"./components/controls/radio/Radio.mjs";import{SwitchGroup as xe}from"./components/controls/switch-group/SwitchGroup.mjs";import{Switch as Se}from"./components/controls/switch/Switch.mjs";import{Textarea as Ce}from"./components/controls/textarea/Textarea.mjs";import{FormS3Context as we,useFormS3Context as Te}from"./components/forms/FormS3Context.mjs";import{PASSWORD_RULES as Ee}from"./components/forms/rules/password-rules.mjs";import{z as De}from"./components/forms/rules/zod.mjs";import{Form as Oe}from"./components/forms/Form.mjs";import{Fieldset as ke}from"./components/forms/layout/Fieldset.mjs";import{Stepper as Ae}from"./components/navigations/stepper/Stepper.mjs";import{MultiFormContext as je,useMultiFormContext as Me}from"./components/forms/multi-step/MultiFormContext.mjs";import{Schema as Ne}from"./components/forms/multi-step/parser/Schema.mjs";import{MultiForm as Pe,MultiFormStep as Fe}from"./components/forms/multi-step/MultiForm.mjs";import{Card as Ie,CardBase as Le,CardBody as Re,CardFooter as ze,CardHeader as Be,CardRoot as Ve}from"./components/layouts/card/Card.mjs";import{FluidGrid as He}from"./components/layouts/fluid-grid/FluidGrid.mjs";import{Grid as Ue}from"./components/layouts/grid/Grid.mjs";import{Breadcrumbs as We}from"./components/navigations/breadcrumbs/Breadcrumbs.mjs";import{Menu as Ge}from"./components/navigations/menu/Menu.mjs";import{NavigationMenu as Ke}from"./components/navigations/navigation-menu/NavigationMenu.mjs";import{Sidebar as qe}from"./components/navigations/sidebars/sidebar/Sidebar.mjs";import{MageUiProvider as Je}from"./providers/MageUiProvider.mjs";export{oe as Autocomplete,i as Avatar,ce as AvatarDropzone,ue as AvatarDropzoneS3,ne as AvatarUpload,a as Badge,We as Breadcrumbs,e as Button,n as ButtonAction,X as ButtonIcon,Z as ButtonIconVisual,r as ButtonLoader,Q as ButtonVisual,s as Calendar,Ie as Card,Le as CardBase,Re as CardBody,ze as CardFooter,Be as CardHeader,Ve as CardRoot,g as Checkbox,re as CheckboxTree,se as Combobox,p as DEFAULT_DATA_TABLE_LABELS,_ as DataTable,D as DataTableBottomSlot,m as DataTableContextProvider,O as DataTableFeedback,w as DataTablePageSize,E as DataTablePagination,k as DataTableTopSlot,ie as DatePicker,ae as DateTimePicker,A as DescriptionList,j as Details,P as DocumentItem,de as Dropzone,fe as DropzoneS3,ke as Fieldset,M as FileIcon,pe as FileInput,me as FileInputMultiple,he as FileInputMultipleS3,ge as FileInputS3,He as FluidGrid,Oe as Form,we as FormS3Context,Ue as Grid,v as HorizontalDivider,f as Icon,d as IconRaw,F as IconSvg,S as IconWrapped,I as Indicator,L as LoaderDot,R as LoaderOval,z as LogoImage,B as LogoSvg,Je as MageUiProvider,Ge as Menu,$ as Modal,ee as Modals,Pe as MultiForm,je as MultiFormContext,Fe as MultiFormStep,Ke as NavigationMenu,y as NoSsr,V as NotificationBanner,Ee as PASSWORD_RULES,T as Pagination,_e as PasswordInput,ve as PasswordStrengthInput,H as Progress,be as Radio,U as RemovableItem,N as ResourceItem,Ne as Schema,l as ScrollArea,b as ScrollAreaAutosize,C as Select,qe as Sidebar,Ae as Stepper,Se as Switch,xe as SwitchGroup,u as Table,G as Tag,W as TagGroup,x as TextInput,Ce as Textarea,te as Toast,o as Tooltip,K as UploadedFile,q as UploadedFileDetails,J as UploadedFiles,Y as UploadingFiles,c as Virtual,t as VisuallyHidden,le as getFileExtension,h as useDataTableContext,Te as useFormS3Context,Me as useMultiFormContext,ye as usePasswordRules,De as z};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mage-ui/components",
3
- "version": "1.0.166",
3
+ "version": "1.0.168",
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.166",
28
+ "@mage-ui/preset": "1.0.168",
29
29
  "@mage-ui/styled-system": "1.0.8"
30
30
  },
31
31
  "peerDependencies": {
@@ -1 +0,0 @@
1
- {"version":3,"file":"NoSsr.mjs","names":[],"sources":["../../src/utils/NoSsr.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\n\ntype Props = {\n children: ReactNode;\n fallback?: ReactNode;\n};\n\nexport const NoSsr = ({ children, fallback = null }: Props) => {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => setMounted(true), []);\n\n if (!mounted) {\n return fallback;\n }\n\n return children;\n};\n\n//TODO: traslladar a /misc\n"],"mappings":"6DASA,MAAa,GAAS,CAAE,WAAU,WAAW,QAAkB,CAC7D,GAAM,CAAC,EAAS,GAAc,EAAS,GAAM,CAQ7C,OANA,MAAgB,EAAW,GAAK,CAAE,EAAE,CAAC,CAEhC,EAIE,EAHE"}