@mage-ui/components 1.0.85 → 1.0.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts +1 -0
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.d.mts.map +1 -1
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs +1 -1
- package/dist/components/controls/dropdown/autocomplete/Autocomplete.mjs.map +1 -1
- package/dist/components/controls/dropdown/combobox/Combobox.d.mts +2 -0
- package/dist/components/controls/dropdown/combobox/Combobox.d.mts.map +1 -1
- package/dist/components/controls/dropdown/combobox/Combobox.mjs +1 -1
- package/dist/components/controls/dropdown/combobox/Combobox.mjs.map +1 -1
- package/dist/components/data-display/datatables/DataTableSkeleton.mjs +1 -1
- package/dist/components/data-display/datatables/DataTableSkeleton.mjs.map +1 -1
- package/dist/components/data-display/index.d.mts +0 -2
- package/dist/components/index.d.mts +0 -2
- package/dist/index.d.mts +1 -3
- package/dist/index.mjs +1 -1
- package/package.json +2 -3
- package/dist/components/data-display/kanban/Kanban.d.mts +0 -65
- package/dist/components/data-display/kanban/Kanban.d.mts.map +0 -1
- package/dist/components/data-display/kanban/Kanban.mjs +0 -2
- package/dist/components/data-display/kanban/Kanban.mjs.map +0 -1
- package/dist/components/data-display/kanban/KanbanCardBase.d.mts +0 -17
- package/dist/components/data-display/kanban/KanbanCardBase.d.mts.map +0 -1
- package/dist/components/data-display/kanban/KanbanCardBase.mjs +0 -2
- package/dist/components/data-display/kanban/KanbanCardBase.mjs.map +0 -1
- package/dist/components/data-display/kanban/KanbanCardDragIndicator.mjs +0 -2
- package/dist/components/data-display/kanban/KanbanCardDragIndicator.mjs.map +0 -1
- package/dist/components/data-display/kanban/KanbanColumnHeader.mjs +0 -2
- package/dist/components/data-display/kanban/KanbanColumnHeader.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"mappings":";;;;;;KAkCY,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EAGA,IAAA;EACA,GAAA;EACA,OAAA,GAAU,MAAA;IACR,GAAA;IACA,KAAA;EAAA,MACI,OAAA,CAAQ,aAAA;EACd,SAAA;EACA,QAAA;EACA,KAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;IAAA;EAAA;AAAA;AAAA,cAMK,YAAA;EAAgB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,GAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,eAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAe1B,iBAAA,KAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{AutocompleteTarget as n}from"./AutocompleteTarget.mjs";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as
|
|
1
|
+
import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{AutocompleteTarget as n}from"./AutocompleteTarget.mjs";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as ee,autocompleteClearButtonRoot as s,autocompleteEmpty as c,autocompleteOption as l,autocompleteOptions as u,autocompleteRoot as d,autocompleteScrollAreaAutosize as f,autocompleteTextInput as p,autocompleteTextInputDescription as te,autocompleteTextInputError as m,autocompleteTextInputInput as h,autocompleteTextInputLabel as g,autocompleteTextInputRequired as _,autocompleteTextInputRoot as v,autocompleteTextInputSection as y,autocompleteTextInputWrapper as b}from"@mage-ui/styled-system/recipes";import{jsx as x}from"react/jsx-runtime";import{useState as S}from"react";import{useDebouncedCallback as C}from"@mantine/hooks";import{useQuery as w}from"@tanstack/react-query";const T=({name:T,label:E,placeholder:D,creatable:O,url:k,fetcher:A,query:j=``,debounce:M=500,threshold:N=3,clearButtonText:P,createText:F,emptyText:I=`No hay resultados`,classNames:L,...R})=>{let[z,B]=S(j),[V,H]=S(!1),{data:U,isFetching:W}=w({queryKey:[T,k,z],queryFn:()=>A({url:k,query:z}),initialData:[],enabled:z.length>=N}),G=C(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||{},ne={placeholder:D,label:E,classNames:{dropdownTextInput:$?.dropdownTextInput??p(),root:$?.root??v(),label:$?.label??g(),description:$?.description??te(),error:$?.error??m(),wrapper:$?.wrapper??b(),input:$?.input??h(),section:$?.section??y(),required:$?.required??_()},clearButtonProps:{label:P,classNames:{clearButton:Q?.clearButton??i(),root:Q?.root??s(),icon:Q?.icon??a(),iconRaw:{iconRaw:Q?.iconRaw?.iconRaw??o(),root:Q?.iconRaw?.root??ee()}}}},re={emptyText:I,classNames:{empty:J?.empty??c()}},ie={creatable:O??!1,createText:F,classNames:q};return x(e,{shouldFilter:!1,classNames:{dropdown:Z?.dropdown??r(),root:Z?.root??d(),options:Z?.options??u(),option:Z?.option??l(),empty:J?.empty??c(),search:Z?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:X?.dropdownScrollAreaAutosize??f()}},target:x(n,{debounced:K,isLoading:W||V,threshold:N,showEmpty:I!==void 0,...ne}),options:U,...R,children:x(t,{emptyProps:re,creatableProps:ie})})};export{T as Autocomplete};
|
|
2
2
|
//# sourceMappingURL=Autocomplete.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n autocomplete,\n autocompleteClearButton,\n autocompleteClearButtonIcon,\n autocompleteClearButtonIconRaw,\n autocompleteClearButtonIconRawRoot,\n autocompleteClearButtonRoot,\n autocompleteEmpty,\n autocompleteOption,\n autocompleteOptions,\n autocompleteRoot,\n autocompleteScrollAreaAutosize,\n autocompleteTextInput,\n autocompleteTextInputDescription,\n autocompleteTextInputError,\n autocompleteTextInputInput,\n autocompleteTextInputLabel,\n autocompleteTextInputRequired,\n autocompleteTextInputRoot,\n autocompleteTextInputSection,\n autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n ComboboxProps,\n 'options' | 'classNames'\n> & {\n name: string;\n url?: string;\n fetcher: (params: {\n url?: string;\n query: string;\n }) => Promise<DropdownValue[]>;\n threshold?: number;\n debounce?: number;\n query?: string;\n classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n };\n };\n};\n\nexport const Autocomplete = ({\n name,\n label,\n placeholder,\n creatable,\n url,\n fetcher,\n query = '',\n debounce = 500,\n threshold = 3,\n clearButtonText,\n emptyText = 'No hay resultados',\n classNames,\n ...props\n}: AutocompleteProps) => {\n const [searchValue, setSearchValue] = useState(query);\n const [isTyping, setIsTyping] = useState(false);\n\n const { data, isFetching } = useQuery<DropdownValue[]>({\n queryKey: [name, url, searchValue],\n queryFn: () => {\n return fetcher({\n url,\n query: searchValue,\n });\n },\n initialData: [],\n enabled: searchValue.length >= threshold,\n });\n\n const debounced = useDebouncedCallback((value: string) => {\n setSearchValue(value);\n setIsTyping(false);\n }, debounce);\n\n const handleSearch = (value: string) => {\n setIsTyping(true);\n debounced(value);\n };\n\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n description:\n restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n required:\n restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n autocompleteClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n autocompleteClearButtonIconRawRoot(),\n },\n },\n },\n };\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n classNames: creatableClassNames,\n };\n\n return (\n <Dropdown\n shouldFilter={false}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n root: dropdownClassNames?.root ?? autocompleteRoot(),\n options: dropdownClassNames?.options ?? autocompleteOptions(),\n option: dropdownClassNames?.option ?? autocompleteOption(),\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n autocompleteScrollAreaAutosize(),\n },\n }}\n target={\n <AutocompleteTarget\n debounced={handleSearch}\n isLoading={isFetching || isTyping}\n threshold={threshold}\n showEmpty={emptyText !== undefined}\n {...targetProps}\n />\n }\n options={data}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n autocomplete,\n autocompleteClearButton,\n autocompleteClearButtonIcon,\n autocompleteClearButtonIconRaw,\n autocompleteClearButtonIconRawRoot,\n autocompleteClearButtonRoot,\n autocompleteEmpty,\n autocompleteOption,\n autocompleteOptions,\n autocompleteRoot,\n autocompleteScrollAreaAutosize,\n autocompleteTextInput,\n autocompleteTextInputDescription,\n autocompleteTextInputError,\n autocompleteTextInputInput,\n autocompleteTextInputLabel,\n autocompleteTextInputRequired,\n autocompleteTextInputRoot,\n autocompleteTextInputSection,\n autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\n\nimport type { ComboboxProps } from '../combobox/Combobox';\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { AutocompleteTarget } from './AutocompleteTarget';\n\nexport type AutocompleteProps = Omit<\n ComboboxProps,\n 'options' | 'classNames'\n> & {\n name: string;\n url?: string;\n fetcher: (params: {\n url?: string;\n query: string;\n }) => Promise<DropdownValue[]>;\n threshold?: number;\n debounce?: number;\n query?: string;\n classNames?: Omit<NonNullable<ComboboxProps['classNames']>, 'target'> & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n };\n };\n};\n\nexport const Autocomplete = ({\n name,\n label,\n placeholder,\n creatable,\n url,\n fetcher,\n query = '',\n debounce = 500,\n threshold = 3,\n clearButtonText,\n createText,\n emptyText = 'No hay resultados',\n classNames,\n ...props\n}: AutocompleteProps) => {\n const [searchValue, setSearchValue] = useState(query);\n const [isTyping, setIsTyping] = useState(false);\n\n const { data, isFetching } = useQuery<DropdownValue[]>({\n queryKey: [name, url, searchValue],\n queryFn: () => {\n return fetcher({\n url,\n query: searchValue,\n });\n },\n initialData: [],\n enabled: searchValue.length >= threshold,\n });\n\n const debounced = useDebouncedCallback((value: string) => {\n setSearchValue(value);\n setIsTyping(false);\n }, debounce);\n\n const handleSearch = (value: string) => {\n setIsTyping(true);\n debounced(value);\n };\n\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const { clearButton: clearButtonClassNames, ...restTargetClassNames } =\n targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? autocompleteTextInput(),\n root: restTargetClassNames?.root ?? autocompleteTextInputRoot(),\n label: restTargetClassNames?.label ?? autocompleteTextInputLabel(),\n description:\n restTargetClassNames?.description ?? autocompleteTextInputDescription(),\n error: restTargetClassNames?.error ?? autocompleteTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? autocompleteTextInputWrapper(),\n input: restTargetClassNames?.input ?? autocompleteTextInputInput(),\n section: restTargetClassNames?.section ?? autocompleteTextInputSection(),\n required:\n restTargetClassNames?.required ?? autocompleteTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? autocompleteClearButton(),\n root: clearButtonClassNames?.root ?? autocompleteClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? autocompleteClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n autocompleteClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n autocompleteClearButtonIconRawRoot(),\n },\n },\n },\n };\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n createText,\n classNames: creatableClassNames,\n };\n\n return (\n <Dropdown\n shouldFilter={false}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? autocomplete(),\n root: dropdownClassNames?.root ?? autocompleteRoot(),\n options: dropdownClassNames?.options ?? autocompleteOptions(),\n option: dropdownClassNames?.option ?? autocompleteOption(),\n empty: emptyClassNames?.empty ?? autocompleteEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n autocompleteScrollAreaAutosize(),\n },\n }}\n target={\n <AutocompleteTarget\n debounced={handleSearch}\n isLoading={isFetching || isTyping}\n threshold={threshold}\n showEmpty={emptyText !== undefined}\n {...targetProps}\n />\n }\n options={data}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"++BAwDA,MAAa,GAAgB,CAC3B,OACA,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,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CAAE,YAAa,EAAuB,GAAG,GAC7C,GAAoB,EAAE,CAElB,GAAc,CAClB,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAuB,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,EAAA,CACC,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,GAAgC,CACnC,CACF,CACD,OACE,EAAC,EAAA,CACC,UAAW,EACX,UAAW,GAAc,EACd,YACX,UAAW,IAAc,IAAA,GACzB,GAAI,IACJ,CAEJ,QAAS,EACT,GAAI,WAEJ,EAAC,EAAA,CACa,cACI,mBAChB,EACO"}
|
|
@@ -10,6 +10,7 @@ type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> &
|
|
|
10
10
|
label?: string;
|
|
11
11
|
placeholder?: string;
|
|
12
12
|
creatable?: boolean;
|
|
13
|
+
createText?: string;
|
|
13
14
|
emptyText?: string;
|
|
14
15
|
clearButtonText?: string;
|
|
15
16
|
startSlot?: ReactNode;
|
|
@@ -27,6 +28,7 @@ declare const Combobox: ({
|
|
|
27
28
|
label,
|
|
28
29
|
placeholder,
|
|
29
30
|
creatable,
|
|
31
|
+
createText,
|
|
30
32
|
clearButtonText,
|
|
31
33
|
emptyText,
|
|
32
34
|
startSlot,
|
|
@@ -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,SAAA;EACA,eAAA;EACA,SAAA,GAAY,SAAA;EACZ,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,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,
|
|
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,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,UAAA;EAAA,GAAA;AAAA,GAUtB,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 d,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,creatable:N,
|
|
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 d,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,creatable:N,createText:P,clearButtonText:F,emptyText:I=`No results`,startSlot:L,classNames:R,...z})=>{let{creatable:B,empty:V,target:H,scrollArea:U,...W}=R||{},{clearButton:G,chevron:K,...q}=H||{},J={placeholder:M,label:j,startSlot:L,classNames:{dropdownTextInput:q?.dropdownTextInput??x(),root:q?.root??D(),label:q?.label??T(),description:q?.description??S(),error:q?.error??C(),wrapper:q?.wrapper??k(),input:q?.input??w(),section:q?.section??O(),required:q?.required??E()},clearButtonProps:{label:F,classNames:{clearButton:G?.clearButton??s(),root:G?.root??d(),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??y(),Z=W?.options??v(),Q=W?.option??p(),$=V?.empty??f(),te=W?.search,ne={emptyText:I,classNames:{empty:V?.empty??$}},re={creatable:N??!1,createText:P,classNames:{create:B?.create,createIcon:{createIcon:B?.createIcon?.createIcon??m(),root:B?.createIcon?.root??_(),iconRaw:{iconRaw:B?.createIcon?.iconRaw?.iconRaw??h(),root:B?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:Y,root:X,options:Z,option:Q,empty:$,search:te},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:U?.dropdownScrollAreaAutosize??b()}},target:A(ee,{...J}),...z,children:A(t,{emptyProps:ne,creatableProps:re})})};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 emptyText?: string;\n clearButtonText?: string;\n startSlot?: ReactNode;\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 clearButtonText,\n emptyText = 'No results',\n startSlot,\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 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 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/
|
|
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 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 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 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/BA+DA,MAAa,GAAY,CACvB,QACA,cACA,YACA,aACA,kBACA,YAAY,aACZ,YACA,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,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,GAAyB,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,EAAA,CACC,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,GAAA,CAAe,GAAI,EAAA,CAAe,CAC3C,GAAI,WAEJ,EAAC,EAAA,CACa,cACI,mBAChB,EACO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{useDataTableContext as t}from"./useDataTableContext.mjs";import{dataTableSkeleton as n,dataTableSkeletonCell as r,dataTableSkeletonRow as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=[[`
|
|
1
|
+
import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{useDataTableContext as t}from"./useDataTableContext.mjs";import{dataTableSkeleton as n,dataTableSkeletonCell as r,dataTableSkeletonRow as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=[[`20%`,`20%`,`20%`,`20%`,`20%`]],c=({rows:c,className:l})=>{let{labels:u}=t();return o(`div`,{className:l??n(),role:`status`,"aria-busy":`true`,children:[a(e,{children:u.loading}),Array.from({length:c},(e,t)=>{let n=s[t%s.length];return a(`div`,{className:i(),children:n.map((e,t)=>a(`div`,{className:r(),style:{width:e}},t))},t)})]})};export{c as DataTableSkeleton};
|
|
2
2
|
//# sourceMappingURL=DataTableSkeleton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableSkeleton.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n dataTableSkeleton,\n dataTableSkeletonCell,\n dataTableSkeletonRow,\n} from '@mage-ui/styled-system/recipes';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { useDataTableContext } from './useDataTableContext';\n\n// Cycling widths to give rows visual variety\nconst CELL_WIDTH_PATTERNS = [\n ['
|
|
1
|
+
{"version":3,"file":"DataTableSkeleton.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n dataTableSkeleton,\n dataTableSkeletonCell,\n dataTableSkeletonRow,\n} from '@mage-ui/styled-system/recipes';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { useDataTableContext } from './useDataTableContext';\n\n// Cycling widths to give rows visual variety\nconst CELL_WIDTH_PATTERNS = [\n ['20%', '20%', '20%', '20%', '20%'],\n];\n\ntype DataTableSkeletonProps = {\n rows: number;\n className?: string;\n};\n\nexport const DataTableSkeleton = ({\n rows,\n className,\n}: DataTableSkeletonProps): ReactNode => {\n const { labels } = useDataTableContext();\n\n return (\n <div\n className={className ?? dataTableSkeleton()}\n role='status'\n aria-busy='true'\n >\n <VisuallyHidden>{labels.loading}</VisuallyHidden>\n {Array.from({ length: rows }, (_, i) => {\n const widths = CELL_WIDTH_PATTERNS[i % CELL_WIDTH_PATTERNS.length];\n\n return (\n <div key={i} className={dataTableSkeletonRow()}>\n {widths.map((width, j) => (\n <div\n key={j}\n className={dataTableSkeletonCell()}\n style={{ width }}\n />\n ))}\n </div>\n );\n })}\n </div>\n );\n};\n"],"mappings":"yTAYA,MAAM,EAAsB,CAC1B,CAAC,MAAO,MAAO,MAAO,MAAO,MAAM,CACpC,CAOY,GAAqB,CAChC,OACA,eACuC,CACvC,GAAM,CAAE,UAAW,GAAqB,CAExC,OACE,EAAC,MAAA,CACC,UAAW,GAAa,GAAmB,CAC3C,KAAK,SACL,YAAU,iBAEV,EAAC,EAAA,CAAA,SAAgB,EAAO,QAAA,CAAyB,CAChD,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAG,EAAG,IAAM,CACtC,IAAM,EAAS,EAAoB,EAAI,EAAoB,QAE3D,OACE,EAAC,MAAA,CAAY,UAAW,GAAsB,UAC3C,EAAO,KAAK,EAAO,IAClB,EAAC,MAAA,CAEC,UAAW,GAAuB,CAClC,MAAO,CAAE,QAAO,EAFX,EAGL,CACF,EAPM,EAQJ,EAER,CAAA,EACE"}
|
|
@@ -25,8 +25,6 @@ import { IconRaw, IconRawProps } from "./icons/icon-raw/IconRaw.mjs";
|
|
|
25
25
|
import { IconSvg, IconSvgProps } from "./icons/icon-svg/IconSvg.mjs";
|
|
26
26
|
import { IconWrapped, IconWrappedProps } from "./icons/icon-wrapped/IconWrapped.mjs";
|
|
27
27
|
import { Indicator, IndicatorProps } from "./indicator/Indicator.mjs";
|
|
28
|
-
import { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps } from "./kanban/Kanban.mjs";
|
|
29
|
-
import { KanbanCardBase, KanbanCardBaseProps } from "./kanban/KanbanCardBase.mjs";
|
|
30
28
|
import { LoaderDot, LoaderDotProps } from "./loader-dot/LoaderDot.mjs";
|
|
31
29
|
import { LoaderOval, LoaderOvalProps } from "./loader-oval/LoaderOval.mjs";
|
|
32
30
|
import { LogoImage, LogoImageProps } from "./logos/logo-image/LogoImage.mjs";
|
|
@@ -34,8 +34,6 @@ import { IconRaw, IconRawProps } from "./data-display/icons/icon-raw/IconRaw.mjs
|
|
|
34
34
|
import { IconSvg, IconSvgProps } from "./data-display/icons/icon-svg/IconSvg.mjs";
|
|
35
35
|
import { IconWrapped, IconWrappedProps } from "./data-display/icons/icon-wrapped/IconWrapped.mjs";
|
|
36
36
|
import { Indicator, IndicatorProps } from "./data-display/indicator/Indicator.mjs";
|
|
37
|
-
import { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps } from "./data-display/kanban/Kanban.mjs";
|
|
38
|
-
import { KanbanCardBase, KanbanCardBaseProps } from "./data-display/kanban/KanbanCardBase.mjs";
|
|
39
37
|
import { LoaderDot, LoaderDotProps } from "./data-display/loader-dot/LoaderDot.mjs";
|
|
40
38
|
import { LoaderOval, LoaderOvalProps } from "./data-display/loader-oval/LoaderOval.mjs";
|
|
41
39
|
import { LogoImage, LogoImageProps } from "./data-display/logos/logo-image/LogoImage.mjs";
|
package/dist/index.d.mts
CHANGED
|
@@ -33,8 +33,6 @@ import { IconRaw, IconRawProps } from "./components/data-display/icons/icon-raw/
|
|
|
33
33
|
import { IconSvg, IconSvgProps } from "./components/data-display/icons/icon-svg/IconSvg.mjs";
|
|
34
34
|
import { IconWrapped, IconWrappedProps } from "./components/data-display/icons/icon-wrapped/IconWrapped.mjs";
|
|
35
35
|
import { Indicator, IndicatorProps } from "./components/data-display/indicator/Indicator.mjs";
|
|
36
|
-
import { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps } from "./components/data-display/kanban/Kanban.mjs";
|
|
37
|
-
import { KanbanCardBase, KanbanCardBaseProps } from "./components/data-display/kanban/KanbanCardBase.mjs";
|
|
38
36
|
import { LoaderDot, LoaderDotProps } from "./components/data-display/loader-dot/LoaderDot.mjs";
|
|
39
37
|
import { LoaderOval, LoaderOvalProps } from "./components/data-display/loader-oval/LoaderOval.mjs";
|
|
40
38
|
import { LogoImage, LogoImageProps } from "./components/data-display/logos/logo-image/LogoImage.mjs";
|
|
@@ -86,4 +84,4 @@ import { Tooltip, TooltipProps } from "./components/overlays/tooltip/Tooltip.mjs
|
|
|
86
84
|
import "./components/index.mjs";
|
|
87
85
|
import { MageUiProvider, MageUiProviderProps } from "./providers/MageUiProvider.mjs";
|
|
88
86
|
import "./providers/index.mjs";
|
|
89
|
-
export { AssignedUser, AssignedUserProps, Autocomplete, AutocompleteProps, Avatar, AvatarProps, AvatarUpload, AvatarUploadProps, Badge, BadgeProps,
|
|
87
|
+
export { AssignedUser, AssignedUserProps, Autocomplete, AutocompleteProps, Avatar, AvatarProps, AvatarUpload, AvatarUploadProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsBarProps, BreadcrumbsProps, Button, ButtonAction, ButtonActionProps, ButtonIcon, ButtonIconProps, ButtonIconVisual, ButtonIconVisualProps, ButtonLoader, ButtonProps, ButtonVisual, ButtonVisualProps, Calendar, CalendarEvent, CalendarProps, CalendarVariant, Card, CardBase, CardBody, CardClassNames, CardFooter, CardHeader, CardProps, CardRoot, Checkbox, CheckboxProps, ColumnDef, Combobox, ComboboxProps, DEFAULT_DATA_TABLE_LABELS, DataTable, DataTableBottomSlot, DataTableBottomSlotProps, DataTableClassNames, DataTableColumnMeta, DataTableContextProvider, DataTableContextValue, DataTableErrorState, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTableLabels, DataTablePageSize, DataTablePageSizeProps, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig, DataTableTopSlot, DataTableTopSlotProps, DateLocalizer, DatePicker, DatePickerProps, DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps, Dropzone, DropzoneFiles, DropzoneFilesProps, DropzoneProps, ExpandedState, FileData, FileInput, FileInputMultiple, FileInputMultipleProps, FileInputProps, FluidGrid, FluidGridProps, Form, FormProps, 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, NotificationBanner, NotificationBannerIntent, NotificationBannerProps, PASSWORD_RULES, Pagination, PaginationClassNames, PaginationRootProps, PaginationState, PasswordInput, PasswordInputProps, PasswordRule, PasswordRuleDefinition, PasswordSegment, PasswordStrengthInput, PasswordStrengthInputProps, Radio, RadioProps, RemovableItem, RemovableItemProps, RowSelectionState, ScrollArea, ScrollAreaAutosize, ScrollAreaAutosizeProps, ScrollAreaClassNames, ScrollAreaProps, Select, SelectProps, Sidebar, SidebarClassNames, SidebarProps, SortingState, Switch, SwitchGroup, SwitchGroupProps, SwitchProps, Table, TableBodyProps, TableCaptionProps, TableCellProps, TableClassNames, TableFootProps, TableHeadProps, TableHeaderCellProps, TableProps, TableRowProps, Tag, TagGroup, TagGroupProps, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, Toast, ToastOptions, ToastProviderProps, Tooltip, TooltipProps, UploadedFile, UploadedFileDetails, UploadedFileDetailsProps, UploadedFileProps, Virtual, VirtualItem, VirtualPadding, VirtualProps, VisuallyHidden, VisuallyHiddenProps, momentLocalizer, useDataTableContext, 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{AssignedUser as i}from"./components/data-display/assigned-user/AssignedUser.mjs";import{Avatar as a}from"./components/data-display/avatar/Avatar.mjs";import{Badge as o}from"./components/data-display/badge/Badge.mjs";import{Calendar as s,momentLocalizer as c}from"./components/data-display/calendar/Calendar.mjs";import{Virtual as l}from"./components/misc/virtual/Virtual.mjs";import{ScrollArea as u}from"./components/misc/scroll-area/ScrollArea.mjs";import{Table as d}from"./components/data-display/table/Table.mjs";import{IconRaw as f}from"./components/data-display/icons/icon-raw/IconRaw.mjs";import{Icon as p}from"./components/data-display/icons/icon/Icon.mjs";import{DEFAULT_DATA_TABLE_LABELS as m,DataTableContextProvider as h,useDataTableContext as g}from"./components/data-display/datatables/useDataTableContext.mjs";import{Checkbox as _}from"./components/controls/checkbox/Checkbox.mjs";import{DataTable as v}from"./components/data-display/datatables/DataTable.mjs";import{HorizontalDivider as y}from"./components/misc/horizontal-divider/HorizontalDivider.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{DataTableErrorState as O}from"./components/data-display/datatables/DataTableErrorState.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{IconSvg as j}from"./components/data-display/icons/icon-svg/IconSvg.mjs";import{Indicator as M}from"./components/data-display/indicator/Indicator.mjs";import{
|
|
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{AssignedUser as i}from"./components/data-display/assigned-user/AssignedUser.mjs";import{Avatar as a}from"./components/data-display/avatar/Avatar.mjs";import{Badge as o}from"./components/data-display/badge/Badge.mjs";import{Calendar as s,momentLocalizer as c}from"./components/data-display/calendar/Calendar.mjs";import{Virtual as l}from"./components/misc/virtual/Virtual.mjs";import{ScrollArea as u}from"./components/misc/scroll-area/ScrollArea.mjs";import{Table as d}from"./components/data-display/table/Table.mjs";import{IconRaw as f}from"./components/data-display/icons/icon-raw/IconRaw.mjs";import{Icon as p}from"./components/data-display/icons/icon/Icon.mjs";import{DEFAULT_DATA_TABLE_LABELS as m,DataTableContextProvider as h,useDataTableContext as g}from"./components/data-display/datatables/useDataTableContext.mjs";import{Checkbox as _}from"./components/controls/checkbox/Checkbox.mjs";import{DataTable as v}from"./components/data-display/datatables/DataTable.mjs";import{HorizontalDivider as y}from"./components/misc/horizontal-divider/HorizontalDivider.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{DataTableErrorState as O}from"./components/data-display/datatables/DataTableErrorState.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{IconSvg as j}from"./components/data-display/icons/icon-svg/IconSvg.mjs";import{Indicator as M}from"./components/data-display/indicator/Indicator.mjs";import{LoaderDot as N}from"./components/data-display/loader-dot/LoaderDot.mjs";import{LoaderOval as P}from"./components/data-display/loader-oval/LoaderOval.mjs";import{LogoImage as F}from"./components/data-display/logos/logo-image/LogoImage.mjs";import{LogoSvg as I}from"./components/data-display/logos/logo-svg/LogoSvg.mjs";import{NotificationBanner as L}from"./components/data-display/notification-banner/NotificationBanner.mjs";import{RemovableItem as R}from"./components/data-display/removable-item/RemovableItem.mjs";import{TagGroup as z}from"./components/data-display/tag-group/TagGroup.mjs";import{Tag as B}from"./components/data-display/tag/Tag.mjs";import{UploadedFile as V}from"./components/data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as H}from"./components/data-display/uploaded-file/UploadedFileDetails.mjs";import{ButtonIcon as U}from"./components/buttons/button-icon/ButtonIcon.mjs";import{ButtonIconVisual as W}from"./components/buttons/button-icon-visual/ButtonIconVisual.mjs";import{ButtonVisual as G}from"./components/buttons/button-visual/ButtonVisual.mjs";import{Modal as K}from"./components/overlays/modal/Modal.mjs";import{Modals as q}from"./components/overlays/modal/index.mjs";import{Toast as J}from"./components/overlays/toast/toast.mjs";import{Tooltip as Y}from"./components/overlays/tooltip/Tooltip.mjs";import{AvatarUpload as X}from"./components/controls/avatar-upload/AvatarUpload.mjs";import{DatePicker as Z}from"./components/controls/date-picker/DatePicker.mjs";import{Autocomplete as Q}from"./components/controls/dropdown/autocomplete/Autocomplete.mjs";import{Combobox as $}from"./components/controls/dropdown/combobox/Combobox.mjs";import{Dropzone as ee}from"./components/controls/dropzone/Dropzone.mjs";import{DropzoneFiles as te}from"./components/controls/dropzone-files/DropzoneFiles.mjs";import{FileInput as ne}from"./components/controls/file-input/FileInput.mjs";import{FileInputMultiple as re}from"./components/controls/file-input/FileInputMultiple.mjs";import{PasswordInput as ie}from"./components/controls/password-input/PasswordInput.mjs";import{PasswordStrengthInput as ae}from"./components/controls/password-input/PasswordStrengthInput.mjs";import{usePasswordRules as oe}from"./components/controls/password-input/usePasswordRules.mjs";import{Radio as se}from"./components/controls/radio/Radio.mjs";import{SwitchGroup as ce}from"./components/controls/switch-group/SwitchGroup.mjs";import{Switch as le}from"./components/controls/switch/Switch.mjs";import{Textarea as ue}from"./components/controls/textarea/Textarea.mjs";import{PASSWORD_RULES as de}from"./components/forms/rules/password-rules.mjs";import{z as fe}from"./components/forms/rules/zod.mjs";import{Form as pe}from"./components/forms/Form.mjs";import{Card as me,CardBase as he,CardBody as ge,CardFooter as _e,CardHeader as ve,CardRoot as ye}from"./components/layouts/card/Card.mjs";import{FluidGrid as be}from"./components/layouts/fluid-grid/FluidGrid.mjs";import{Grid as xe}from"./components/layouts/grid/Grid.mjs";import{Breadcrumbs as Se}from"./components/navigations/breadcrumbs/Breadcrumbs.mjs";import{Menu as Ce}from"./components/navigations/menu/Menu.mjs";import{Sidebar as we}from"./components/navigations/sidebars/sidebar/Sidebar.mjs";import{MageUiProvider as Te}from"./providers/MageUiProvider.mjs";export{i as AssignedUser,Q as Autocomplete,a as Avatar,X as AvatarUpload,o as Badge,Se as Breadcrumbs,e as Button,n as ButtonAction,U as ButtonIcon,W as ButtonIconVisual,r as ButtonLoader,G as ButtonVisual,s as Calendar,me as Card,he as CardBase,ge as CardBody,_e as CardFooter,ve as CardHeader,ye as CardRoot,_ as Checkbox,$ as Combobox,m as DEFAULT_DATA_TABLE_LABELS,v as DataTable,D as DataTableBottomSlot,h as DataTableContextProvider,O as DataTableErrorState,w as DataTablePageSize,E as DataTablePagination,k as DataTableTopSlot,Z as DatePicker,A as DescriptionList,ee as Dropzone,te as DropzoneFiles,ne as FileInput,re as FileInputMultiple,be as FluidGrid,pe as Form,xe as Grid,y as HorizontalDivider,p as Icon,f as IconRaw,j as IconSvg,S as IconWrapped,M as Indicator,N as LoaderDot,P as LoaderOval,F as LogoImage,I as LogoSvg,Te as MageUiProvider,Ce as Menu,K as Modal,q as Modals,L as NotificationBanner,de as PASSWORD_RULES,T as Pagination,ie as PasswordInput,ae as PasswordStrengthInput,se as Radio,R as RemovableItem,u as ScrollArea,b as ScrollAreaAutosize,C as Select,we as Sidebar,le as Switch,ce as SwitchGroup,d as Table,B as Tag,z as TagGroup,x as TextInput,ue as Textarea,J as Toast,Y as Tooltip,V as UploadedFile,H as UploadedFileDetails,l as Virtual,t as VisuallyHidden,c as momentLocalizer,g as useDataTableContext,oe as usePasswordRules,fe as z};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.87",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.20.3",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/preset": "1.0.
|
|
28
|
+
"@mage-ui/preset": "1.0.87",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
@@ -48,7 +48,6 @@
|
|
|
48
48
|
"react-big-calendar": "^1.19.4",
|
|
49
49
|
"react-dom": "^19.2.4",
|
|
50
50
|
"react-hook-form": "^7.71.2",
|
|
51
|
-
"react-kanban-kit": "^0.0.2-beta.6",
|
|
52
51
|
"zod": "^4.3.6"
|
|
53
52
|
},
|
|
54
53
|
"engines": {
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
-
import { ReactNode } from "react";
|
|
3
|
-
|
|
4
|
-
//#region src/components/data-display/kanban/Kanban.d.ts
|
|
5
|
-
interface BoardItem<T extends object = Record<string, unknown>> {
|
|
6
|
-
id: string;
|
|
7
|
-
title: string;
|
|
8
|
-
parentId: string | null;
|
|
9
|
-
children: string[];
|
|
10
|
-
content?: T;
|
|
11
|
-
type?: string | number;
|
|
12
|
-
status?: string;
|
|
13
|
-
totalChildrenCount: number;
|
|
14
|
-
totalItemsCount?: number;
|
|
15
|
-
isDraggable?: boolean;
|
|
16
|
-
}
|
|
17
|
-
interface BoardData<T extends object = Record<string, unknown>> {
|
|
18
|
-
root: BoardItem<T>;
|
|
19
|
-
[key: string]: BoardItem<T>;
|
|
20
|
-
}
|
|
21
|
-
interface CardRenderProps<T extends object = Record<string, unknown>> {
|
|
22
|
-
data: BoardItem<T>;
|
|
23
|
-
column: BoardItem<T>;
|
|
24
|
-
index: number;
|
|
25
|
-
isDraggable: boolean;
|
|
26
|
-
}
|
|
27
|
-
type ConfigMap<T extends object = Record<string, unknown>> = {
|
|
28
|
-
[type: string]: {
|
|
29
|
-
render: (props: CardRenderProps<T>) => ReactNode;
|
|
30
|
-
isDraggable?: boolean;
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
interface KanbanProps<T extends object = Record<string, unknown>> {
|
|
34
|
-
dataSource: BoardData<T>;
|
|
35
|
-
configMap: ConfigMap<T>;
|
|
36
|
-
onCardMove?: (move: CardMove) => void;
|
|
37
|
-
renderColumnFooter?: (column: BoardItem<T>) => ReactNode;
|
|
38
|
-
maxColumnHeight?: string | number;
|
|
39
|
-
classNames?: {
|
|
40
|
-
kanban?: string;
|
|
41
|
-
root?: string;
|
|
42
|
-
columnWrapper?: string;
|
|
43
|
-
column?: string;
|
|
44
|
-
cardWrapper?: string;
|
|
45
|
-
cardWrapperRoot?: string;
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
interface CardMove {
|
|
49
|
-
cardId: string;
|
|
50
|
-
fromColumnId: string;
|
|
51
|
-
toColumnId: string;
|
|
52
|
-
taskAbove: string | null;
|
|
53
|
-
taskBelow: string | null;
|
|
54
|
-
position: number;
|
|
55
|
-
}
|
|
56
|
-
declare const Kanban: <T extends object = Record<string, unknown>>({
|
|
57
|
-
dataSource,
|
|
58
|
-
configMap,
|
|
59
|
-
onCardMove,
|
|
60
|
-
renderColumnFooter,
|
|
61
|
-
classNames
|
|
62
|
-
}: KanbanProps<T>) => react_jsx_runtime0.JSX.Element;
|
|
63
|
-
//#endregion
|
|
64
|
-
export { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps };
|
|
65
|
-
//# sourceMappingURL=Kanban.d.mts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Kanban.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"mappings":";;;;UAgBiB,SAAA,oBAA6B,MAAA;EAC5C,EAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA;EACA,OAAA,GAAU,CAAA;EACV,IAAA;EACA,MAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;AAAA;AAAA,UAEe,SAAA,oBAA6B,MAAA;EAC5C,IAAA,EAAM,SAAA,CAAU,CAAA;EAAA,CACf,GAAA,WAAc,SAAA,CAAU,CAAA;AAAA;AAAA,UAEV,eAAA,oBAAmC,MAAA;EAClD,IAAA,EAAM,SAAA,CAAU,CAAA;EAChB,MAAA,EAAQ,SAAA,CAAU,CAAA;EAClB,KAAA;EACA,WAAA;AAAA;AAAA,KAGU,SAAA,oBAA6B,MAAA;EAAA,CACtC,IAAA;IACC,MAAA,GAAS,KAAA,EAAO,eAAA,CAAgB,CAAA,MAAO,SAAA;IACvC,WAAA;EAAA;AAAA;AAAA,UAIa,WAAA,oBAA+B,MAAA;EAC9C,UAAA,EAAY,SAAA,CAAU,CAAA;EACtB,SAAA,EAAW,SAAA,CAAU,CAAA;EACrB,UAAA,IAAc,IAAA,EAAM,QAAA;EACpB,kBAAA,IAAsB,MAAA,EAAQ,SAAA,CAAU,CAAA,MAAO,SAAA;EAC/C,eAAA;EACA,UAAA;IACE,MAAA;IACA,IAAA;IACA,aAAA;IACA,MAAA;IACA,WAAA;IACA,eAAA;EAAA;AAAA;AAAA,UAIa,QAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;AAAA;AAAA,cAGW,MAAA,sBAA6B,MAAA;EAAyB,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,kBAAA;EAAA;AAAA,GAMhE,WAAA,CAAY,CAAA,MAAE,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{KanbanCardDragIndicator as e}from"./KanbanCardDragIndicator.mjs";import{KanbanColumnHeader as t}from"./KanbanColumnHeader.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{kanban as r,kanbanCardWrapper as i,kanbanCardWrapperRoot as a,kanbanColumn as o,kanbanRoot as s,kanbanWrapperColumn as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";import{useState as u}from"react";import{Kanban as d,dropHandler as f}from"react-kanban-kit";const p=({dataSource:p,configMap:m,onCardMove:h,renderColumnFooter:g,classNames:_})=>{let[v,y]=u(p);return l(d,{dataSource:v,configMap:m,renderColumnHeader:e=>l(t,{column:e}),renderCardDragIndicator:()=>l(e,{}),renderColumnFooter:g,onCardMove:e=>{y(t=>f(e,structuredClone(t),()=>{},e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)+1}),e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)-1}))),h?.(e)},rootClassName:n(_?.kanban??r(),_?.root??s(),`group`),columnWrapperClassName:()=>_?.columnWrapper??c(),columnClassName:()=>_?.column??o(),cardWrapperClassName:n(_?.cardWrapper??i(),_?.cardWrapperRoot??a())})};export{p as Kanban};
|
|
2
|
-
//# sourceMappingURL=Kanban.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Kanban.mjs","names":["Kanban","KanbanKit"],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\nimport { dropHandler, Kanban as KanbanKit } from 'react-kanban-kit';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n kanban,\n kanbanCardWrapper,\n kanbanCardWrapperRoot,\n kanbanColumn,\n kanbanRoot,\n kanbanWrapperColumn,\n} from '@mage-ui/styled-system/recipes';\n\nimport { KanbanCardDragIndicator } from './KanbanCardDragIndicator';\nimport { KanbanColumnHeader } from './KanbanColumnHeader';\n\nexport interface BoardItem<T extends object = Record<string, unknown>> {\n id: string;\n title: string;\n parentId: string | null;\n children: string[];\n content?: T;\n type?: string | number;\n status?: string;\n totalChildrenCount: number;\n totalItemsCount?: number;\n isDraggable?: boolean;\n}\nexport interface BoardData<T extends object = Record<string, unknown>> {\n root: BoardItem<T>;\n [key: string]: BoardItem<T>;\n}\nexport interface CardRenderProps<T extends object = Record<string, unknown>> {\n data: BoardItem<T>;\n column: BoardItem<T>;\n index: number;\n isDraggable: boolean;\n}\n\nexport type ConfigMap<T extends object = Record<string, unknown>> = {\n [type: string]: {\n render: (props: CardRenderProps<T>) => ReactNode;\n isDraggable?: boolean;\n };\n};\n\nexport interface KanbanProps<T extends object = Record<string, unknown>> {\n dataSource: BoardData<T>;\n configMap: ConfigMap<T>;\n onCardMove?: (move: CardMove) => void;\n renderColumnFooter?: (column: BoardItem<T>) => ReactNode;\n maxColumnHeight?: string | number;\n classNames?: {\n kanban?: string;\n root?: string;\n columnWrapper?: string;\n column?: string;\n cardWrapper?: string;\n cardWrapperRoot?: string;\n };\n}\n\nexport interface CardMove {\n cardId: string;\n fromColumnId: string;\n toColumnId: string;\n taskAbove: string | null;\n taskBelow: string | null;\n position: number;\n}\n\nexport const Kanban = <T extends object = Record<string, unknown>>({\n dataSource,\n configMap,\n onCardMove,\n renderColumnFooter,\n classNames,\n}: KanbanProps<T>) => {\n const [board, setBoard] = useState<BoardData<T>>(dataSource);\n\n const handleCardMove = (move: CardMove) => {\n setBoard(\n (prev) =>\n dropHandler(\n move,\n structuredClone(prev),\n () => {},\n (newColumn) => ({\n ...newColumn,\n totalChildrenCount: (newColumn.totalChildrenCount || 0) + 1,\n }),\n (sourceColumn) => ({\n ...sourceColumn,\n totalChildrenCount: (sourceColumn.totalChildrenCount || 0) - 1,\n }),\n ) as BoardData<T>,\n );\n onCardMove?.(move);\n };\n\n return (\n <KanbanKit\n dataSource={board}\n configMap={configMap}\n renderColumnHeader={(column) => <KanbanColumnHeader column={column} />}\n renderCardDragIndicator={() => <KanbanCardDragIndicator />}\n renderColumnFooter={renderColumnFooter}\n onCardMove={handleCardMove}\n rootClassName={cx(\n classNames?.kanban ?? kanban(),\n classNames?.root ?? kanbanRoot(),\n 'group',\n )}\n columnWrapperClassName={() =>\n classNames?.columnWrapper ?? kanbanWrapperColumn()\n }\n columnClassName={() => classNames?.column ?? kanbanColumn()}\n cardWrapperClassName={cx(\n classNames?.cardWrapper ?? kanbanCardWrapper(),\n classNames?.cardWrapperRoot ?? kanbanCardWrapperRoot(),\n )}\n />\n );\n};\n"],"mappings":"+dAuEA,MAAaA,GAAsD,CACjE,aACA,YACA,aACA,qBACA,gBACoB,CACpB,GAAM,CAAC,EAAO,GAAY,EAAuB,EAAW,CAsB5D,OACE,EAACC,EAAAA,CACC,WAAY,EACD,YACX,mBAAqB,GAAW,EAAC,EAAA,CAA2B,SAAA,CAAU,CACtE,4BAA+B,EAAC,EAAA,EAAA,CAA0B,CACtC,qBACpB,WA3BoB,GAAmB,CACzC,EACG,GACC,EACE,EACA,gBAAgB,EAAK,KACf,GACL,IAAe,CACd,GAAG,EACH,oBAAqB,EAAU,oBAAsB,GAAK,EAC3D,EACA,IAAkB,CACjB,GAAG,EACH,oBAAqB,EAAa,oBAAsB,GAAK,EAC9D,EACF,CACJ,CACD,IAAa,EAAK,EAWhB,cAAe,EACb,GAAY,QAAU,GAAQ,CAC9B,GAAY,MAAQ,GAAY,CAChC,QACD,CACD,2BACE,GAAY,eAAiB,GAAqB,CAEpD,oBAAuB,GAAY,QAAU,GAAc,CAC3D,qBAAsB,EACpB,GAAY,aAAe,GAAmB,CAC9C,GAAY,iBAAmB,GAAuB,CACvD,EACD"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
//#region src/components/data-display/kanban/KanbanCardBase.d.ts
|
|
4
|
-
interface KanbanCardBaseProps {
|
|
5
|
-
children?: React.ReactNode;
|
|
6
|
-
classNames?: {
|
|
7
|
-
card?: string;
|
|
8
|
-
cardRoot?: string;
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
declare const KanbanCardBase: ({
|
|
12
|
-
children,
|
|
13
|
-
classNames
|
|
14
|
-
}: KanbanCardBaseProps) => react_jsx_runtime0.JSX.Element;
|
|
15
|
-
//#endregion
|
|
16
|
-
export { KanbanCardBase, KanbanCardBaseProps };
|
|
17
|
-
//# sourceMappingURL=KanbanCardBase.d.mts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"KanbanCardBase.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCardBase.tsx"],"mappings":";;;UAGiB,mBAAA;EACf,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,UAAA;IACE,IAAA;IACA,QAAA;EAAA;AAAA;AAAA,cAIS,cAAA;EAAkB,QAAA;EAAA;AAAA,GAG5B,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{cx as e}from"@mage-ui/styled-system/css";import{kanbanCard as t,kanbanCardRoot as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({children:i,classNames:a})=>r(`div`,{className:e(a?.card??t(),a?.cardRoot??n()),children:i});export{i as KanbanCardBase};
|
|
2
|
-
//# sourceMappingURL=KanbanCardBase.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"KanbanCardBase.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCardBase.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport { kanbanCard, kanbanCardRoot } from '@mage-ui/styled-system/recipes';\n\nexport interface KanbanCardBaseProps {\n children?: React.ReactNode;\n classNames?: {\n card?: string;\n cardRoot?: string;\n };\n}\n\nexport const KanbanCardBase = ({\n children,\n classNames,\n}: KanbanCardBaseProps) => {\n return (\n <div\n className={cx(\n classNames?.card ?? kanbanCard(),\n classNames?.cardRoot ?? kanbanCardRoot(),\n )}\n >\n {children}\n </div>\n );\n};\n"],"mappings":"wKAWA,MAAa,GAAkB,CAC7B,WACA,gBAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,MAAQ,GAAY,CAChC,GAAY,UAAY,GAAgB,CACzC,CAEA,YACG"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{cx as e}from"@mage-ui/styled-system/css";import{kanbanCardDragIndicator as t,kanbanCardDragIndicatorRoot as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({classNames:i})=>r(`span`,{className:e(i?.cardDragIndicator??t(),i?.cardDragIndicatorRoot??n())});export{i as KanbanCardDragIndicator};
|
|
2
|
-
//# sourceMappingURL=KanbanCardDragIndicator.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"KanbanCardDragIndicator.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCardDragIndicator.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n kanbanCardDragIndicator,\n kanbanCardDragIndicatorRoot,\n} from '@mage-ui/styled-system/recipes';\n\nexport interface KanbanCardDragIndicatorProps {\n classNames?: {\n cardDragIndicator?: string;\n cardDragIndicatorRoot?: string;\n };\n}\n\nexport const KanbanCardDragIndicator = ({\n classNames,\n}: KanbanCardDragIndicatorProps) => {\n return (\n <span\n className={cx(\n classNames?.cardDragIndicator ?? kanbanCardDragIndicator(),\n classNames?.cardDragIndicatorRoot ?? kanbanCardDragIndicatorRoot(),\n )}\n />\n );\n};\n"],"mappings":"kMAaA,MAAa,GAA2B,CACtC,gBAGE,EAAC,OAAA,CACC,UAAW,EACT,GAAY,mBAAqB,GAAyB,CAC1D,GAAY,uBAAyB,GAA6B,CACnE,CAAA,CACD"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{cx as e}from"@mage-ui/styled-system/css";import{kanbanColumnHeader as t,kanbanColumnHeaderCount as n,kanbanColumnHeaderRoot as r,kanbanColumnHeaderTitle as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({column:s,classNames:c})=>o(`div`,{className:e(c?.columnHeader??t(),c?.columnHeaderRoot??r()),children:[a(`p`,{className:c?.columnHeaderTitle??i(),children:s.title}),a(`span`,{className:c?.columnHeaderCount??n(),children:s.totalChildrenCount})]});export{s as KanbanColumnHeader};
|
|
2
|
-
//# sourceMappingURL=KanbanColumnHeader.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"KanbanColumnHeader.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanColumnHeader.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n kanbanColumnHeader,\n kanbanColumnHeaderCount,\n kanbanColumnHeaderRoot,\n kanbanColumnHeaderTitle,\n} from '@mage-ui/styled-system/recipes';\n\nimport type { BoardItem } from './Kanban';\n\nexport interface KanbanColumnHeaderProps {\n column: Pick<BoardItem, 'id' | 'title' | 'totalChildrenCount'>;\n classNames?: {\n columnHeader?: string;\n columnHeaderRoot?: string;\n columnHeaderTitle?: string;\n columnHeaderCount?: string;\n };\n}\n\nexport const KanbanColumnHeader = ({\n column,\n classNames,\n}: KanbanColumnHeaderProps) => {\n return (\n <div\n className={cx(\n classNames?.columnHeader ?? kanbanColumnHeader(),\n classNames?.columnHeaderRoot ?? kanbanColumnHeaderRoot(),\n )}\n >\n <p className={classNames?.columnHeaderTitle ?? kanbanColumnHeaderTitle()}>\n {column.title}\n </p>\n <span\n className={classNames?.columnHeaderCount ?? kanbanColumnHeaderCount()}\n >\n {column.totalChildrenCount}\n </span>\n </div>\n );\n};\n"],"mappings":"4PAoBA,MAAa,GAAsB,CACjC,SACA,gBAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,cAAgB,GAAoB,CAChD,GAAY,kBAAoB,GAAwB,CACzD,WAED,EAAC,IAAA,CAAE,UAAW,GAAY,mBAAqB,GAAyB,UACrE,EAAO,OACN,CACJ,EAAC,OAAA,CACC,UAAW,GAAY,mBAAqB,GAAyB,UAEpE,EAAO,oBACH,CAAA,EACH"}
|