@mage-ui/components 1.0.70 → 1.0.71
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/DropdownTargetTextInput.d.mts +2 -0
- package/dist/components/controls/dropdown/DropdownTargetTextInput.d.mts.map +1 -1
- package/dist/components/controls/dropdown/DropdownTargetTextInput.mjs +1 -1
- package/dist/components/controls/dropdown/DropdownTargetTextInput.mjs.map +1 -1
- package/dist/components/controls/dropdown/combobox/Combobox.d.mts +3 -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/controls/dropdown/select/Select.d.mts +2 -0
- package/dist/components/controls/dropdown/select/Select.d.mts.map +1 -1
- package/dist/components/controls/dropdown/select/Select.mjs +1 -1
- package/dist/components/controls/dropdown/select/Select.mjs.map +1 -1
- package/dist/components/data-display/kanban/Kanban.d.mts +2 -0
- package/dist/components/data-display/kanban/Kanban.d.mts.map +1 -1
- package/dist/components/data-display/kanban/Kanban.mjs +1 -1
- package/dist/components/data-display/kanban/Kanban.mjs.map +1 -1
- package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs +1 -1
- package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -2,6 +2,7 @@ import { TextInputProps } from "../text-input/TextInput.mjs";
|
|
|
2
2
|
import { DropdownChevronProps } from "./DropdownChevron.mjs";
|
|
3
3
|
import { DropdownClearButtonProps } from "./DropdownClearButton.mjs";
|
|
4
4
|
import "react/jsx-runtime";
|
|
5
|
+
import { ReactNode } from "react";
|
|
5
6
|
|
|
6
7
|
//#region src/components/controls/dropdown/DropdownTargetTextInput.d.ts
|
|
7
8
|
type DropdownTargetTextInputProps = Omit<TextInputProps, 'classNames'> & {
|
|
@@ -13,6 +14,7 @@ type DropdownTargetTextInputProps = Omit<TextInputProps, 'classNames'> & {
|
|
|
13
14
|
showChevron?: boolean;
|
|
14
15
|
clearable?: boolean;
|
|
15
16
|
closeOnBlur?: boolean;
|
|
17
|
+
startSlot?: ReactNode;
|
|
16
18
|
};
|
|
17
19
|
//#endregion
|
|
18
20
|
export { DropdownTargetTextInputProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownTargetTextInput.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownTargetTextInput.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"mappings":";;;;;;;KAoBY,4BAAA,GAA+B,IAAA,CACzC,cAAA;EAGA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,cAAA;IAC5B,iBAAA;EAAA;EAEF,gBAAA,GAAmB,wBAAA;EACnB,YAAA,GAAe,oBAAA;EAEf,WAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA,GAAY,SAAA;AAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{TextInput as e}from"../text-input/TextInput.mjs";import{useDropdownContext as t}from"./DropdownContextProvider.mjs";import{DropdownEndSlot as n}from"./DropdownEndSlot.mjs";import{dropdownTextInput as r,dropdownTextInputDescription as i,dropdownTextInputError as a,dropdownTextInputInput as o,dropdownTextInputLabel as s,dropdownTextInputRequired as c,dropdownTextInputRoot as l,dropdownTextInputSection as u,dropdownTextInputWrapper as d}from"@mage-ui/styled-system/recipes";import{jsx as f}from"react/jsx-runtime";const p=({classNames:p,clearable:m,showChevron:h,clearButtonProps:g,chevronProps:_,closeOnBlur:v=!0,...
|
|
1
|
+
import{TextInput as e}from"../text-input/TextInput.mjs";import{useDropdownContext as t}from"./DropdownContextProvider.mjs";import{DropdownEndSlot as n}from"./DropdownEndSlot.mjs";import{dropdownTextInput as r,dropdownTextInputDescription as i,dropdownTextInputError as a,dropdownTextInputInput as o,dropdownTextInputLabel as s,dropdownTextInputRequired as c,dropdownTextInputRoot as l,dropdownTextInputSection as u,dropdownTextInputWrapper as d}from"@mage-ui/styled-system/recipes";import{jsx as f}from"react/jsx-runtime";const p=({classNames:p,clearable:m,showChevron:h,clearButtonProps:g,chevronProps:_,closeOnBlur:v=!0,startSlot:y,...b})=>{let{store:x,value:S,query:C,setQuery:w}=t(),T=m&&(C??S?.value??``)!==``,E={"--dropdown-text-input-right-section-pointer-events":T?`auto`:`none`};return f(e,{readOnly:!1,value:C??S?.value??``,startSlot:y,endSlot:f(n,{clearable:T,showChevron:h,clearButtonProps:g,chevronProps:_}),onFocus:e=>{e.stopPropagation(),e.preventDefault(),x.openDropdown()},onBlur:e=>{e.stopPropagation(),e.preventDefault(),v&&(x.closeDropdown(),w(void 0))},classNames:{textInput:p?.dropdownTextInput??r(),root:p?.root??l(),label:p?.label??s(),description:p?.description??i(),error:p?.error??a(),wrapper:p?.wrapper??d(),input:p?.input??o(),section:p?.section??u(),required:p?.required??c()},style:E,...b})};export{p as DropdownTargetTextInput};
|
|
2
2
|
//# sourceMappingURL=DropdownTargetTextInput.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownTargetTextInput.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"sourcesContent":["import {\n dropdownTextInput,\n dropdownTextInputDescription,\n dropdownTextInputError,\n dropdownTextInputInput,\n dropdownTextInputLabel,\n dropdownTextInputRequired,\n dropdownTextInputRoot,\n dropdownTextInputSection,\n dropdownTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { TextInput, type TextInputProps } from '../text-input/TextInput';\nimport type { DropdownChevronProps } from './DropdownChevron';\nimport type { DropdownClearButtonProps } from './DropdownClearButton';\nimport { useDropdownContext } from './DropdownContextProvider';\nimport { DropdownEndSlot } from './DropdownEndSlot';\n\nexport type DropdownTargetTextInputProps = Omit<\n TextInputProps,\n 'classNames'\n> & {\n classNames?: Omit<NonNullable<TextInputProps['classNames']>, 'textInput'> & {\n dropdownTextInput?: string;\n };\n clearButtonProps?: DropdownClearButtonProps;\n chevronProps?: DropdownChevronProps;\n\n showChevron?: boolean;\n clearable?: boolean;\n closeOnBlur?: boolean;\n};\n\nexport const DropdownTargetTextInput = ({\n classNames,\n clearable,\n showChevron,\n clearButtonProps,\n chevronProps,\n closeOnBlur = true,\n ...props\n}: DropdownTargetTextInputProps) => {\n const { store, value, query, setQuery } = useDropdownContext();\n const isClearable = clearable && (query ?? value?.value ?? '') !== '';\n\n const style = {\n '--dropdown-text-input-right-section-pointer-events': isClearable\n ? 'auto'\n : 'none',\n } as React.CSSProperties;\n\n return (\n <TextInput\n readOnly={false}\n value={query ?? value?.value ?? ''}\n endSlot={\n <DropdownEndSlot\n clearable={isClearable}\n showChevron={showChevron}\n clearButtonProps={clearButtonProps}\n chevronProps={chevronProps}\n />\n }\n onFocus={(e) => {\n e.stopPropagation();\n e.preventDefault();\n store.openDropdown();\n }}\n onBlur={(e) => {\n e.stopPropagation();\n e.preventDefault();\n if (closeOnBlur) {\n store.closeDropdown();\n setQuery(undefined);\n }\n }}\n classNames={{\n textInput: classNames?.dropdownTextInput ?? dropdownTextInput(),\n root: classNames?.root ?? dropdownTextInputRoot(),\n label: classNames?.label ?? dropdownTextInputLabel(),\n description: classNames?.description ?? dropdownTextInputDescription(),\n error: classNames?.error ?? dropdownTextInputError(),\n wrapper: classNames?.wrapper ?? dropdownTextInputWrapper(),\n input: classNames?.input ?? dropdownTextInputInput(),\n section: classNames?.section ?? dropdownTextInputSection(),\n required: classNames?.required ?? dropdownTextInputRequired(),\n }}\n style={style}\n {...props}\n />\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownTargetTextInput.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n dropdownTextInput,\n dropdownTextInputDescription,\n dropdownTextInputError,\n dropdownTextInputInput,\n dropdownTextInputLabel,\n dropdownTextInputRequired,\n dropdownTextInputRoot,\n dropdownTextInputSection,\n dropdownTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { TextInput, type TextInputProps } from '../text-input/TextInput';\nimport type { DropdownChevronProps } from './DropdownChevron';\nimport type { DropdownClearButtonProps } from './DropdownClearButton';\nimport { useDropdownContext } from './DropdownContextProvider';\nimport { DropdownEndSlot } from './DropdownEndSlot';\n\nexport type DropdownTargetTextInputProps = Omit<\n TextInputProps,\n 'classNames'\n> & {\n classNames?: Omit<NonNullable<TextInputProps['classNames']>, 'textInput'> & {\n dropdownTextInput?: string;\n };\n clearButtonProps?: DropdownClearButtonProps;\n chevronProps?: DropdownChevronProps;\n\n showChevron?: boolean;\n clearable?: boolean;\n closeOnBlur?: boolean;\n startSlot?: ReactNode;\n};\n\nexport const DropdownTargetTextInput = ({\n classNames,\n clearable,\n showChevron,\n clearButtonProps,\n chevronProps,\n closeOnBlur = true,\n startSlot,\n ...props\n}: DropdownTargetTextInputProps) => {\n const { store, value, query, setQuery } = useDropdownContext();\n const isClearable = clearable && (query ?? value?.value ?? '') !== '';\n\n const style = {\n '--dropdown-text-input-right-section-pointer-events': isClearable\n ? 'auto'\n : 'none',\n } as React.CSSProperties;\n\n return (\n <TextInput\n readOnly={false}\n value={query ?? value?.value ?? ''}\n startSlot={startSlot}\n endSlot={\n <DropdownEndSlot\n clearable={isClearable}\n showChevron={showChevron}\n clearButtonProps={clearButtonProps}\n chevronProps={chevronProps}\n />\n }\n onFocus={(e) => {\n e.stopPropagation();\n e.preventDefault();\n store.openDropdown();\n }}\n onBlur={(e) => {\n e.stopPropagation();\n e.preventDefault();\n if (closeOnBlur) {\n store.closeDropdown();\n setQuery(undefined);\n }\n }}\n classNames={{\n textInput: classNames?.dropdownTextInput ?? dropdownTextInput(),\n root: classNames?.root ?? dropdownTextInputRoot(),\n label: classNames?.label ?? dropdownTextInputLabel(),\n description: classNames?.description ?? dropdownTextInputDescription(),\n error: classNames?.error ?? dropdownTextInputError(),\n wrapper: classNames?.wrapper ?? dropdownTextInputWrapper(),\n input: classNames?.input ?? dropdownTextInputInput(),\n section: classNames?.section ?? dropdownTextInputSection(),\n required: classNames?.required ?? dropdownTextInputRequired(),\n }}\n style={style}\n {...props}\n />\n );\n};\n"],"mappings":"0gBAoCA,MAAa,GAA2B,CACtC,aACA,YACA,cACA,mBACA,eACA,cAAc,GACd,YACA,GAAG,KAC+B,CAClC,GAAM,CAAE,QAAO,QAAO,QAAO,YAAa,GAAoB,CACxD,EAAc,IAAc,GAAS,GAAO,OAAS,MAAQ,GAE7D,EAAQ,CACZ,qDAAsD,EAClD,OACA,OACL,CAED,OACE,EAAC,EAAA,CACC,SAAU,GACV,MAAO,GAAS,GAAO,OAAS,GACrB,YACX,QACE,EAAC,EAAA,CACC,UAAW,EACE,cACK,mBACJ,gBACd,CAEJ,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAE,gBAAgB,CAClB,EAAM,cAAc,EAEtB,OAAS,GAAM,CACb,EAAE,iBAAiB,CACnB,EAAE,gBAAgB,CACd,IACF,EAAM,eAAe,CACrB,EAAS,IAAA,GAAU,GAGvB,WAAY,CACV,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,KAAM,GAAY,MAAQ,GAAuB,CACjD,MAAO,GAAY,OAAS,GAAwB,CACpD,YAAa,GAAY,aAAe,GAA8B,CACtE,MAAO,GAAY,OAAS,GAAwB,CACpD,QAAS,GAAY,SAAW,GAA0B,CAC1D,MAAO,GAAY,OAAS,GAAwB,CACpD,QAAS,GAAY,SAAW,GAA0B,CAC1D,SAAU,GAAY,UAAY,GAA2B,CAC9D,CACM,QACP,GAAI,GACJ"}
|
|
@@ -3,6 +3,7 @@ import { ComboboxCreatableOptionProps } from "./ComboboxCreatableOption.mjs";
|
|
|
3
3
|
import { ComboboxEmptyOptionProps } from "./ComboboxEmptyOption.mjs";
|
|
4
4
|
import { ComboboxTargetProps } from "./ComboboxTarget.mjs";
|
|
5
5
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
|
+
import { ReactNode } from "react";
|
|
6
7
|
|
|
7
8
|
//#region src/components/controls/dropdown/combobox/Combobox.d.ts
|
|
8
9
|
type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> & {
|
|
@@ -11,6 +12,7 @@ type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> &
|
|
|
11
12
|
creatable?: boolean;
|
|
12
13
|
emptyText?: string;
|
|
13
14
|
clearButtonText?: string;
|
|
15
|
+
startSlot?: ReactNode;
|
|
14
16
|
classNames?: DropdownProps['classNames'] & {
|
|
15
17
|
creatable?: ComboboxCreatableOptionProps['classNames'];
|
|
16
18
|
empty?: ComboboxEmptyOptionProps['classNames'];
|
|
@@ -27,6 +29,7 @@ declare const Combobox: ({
|
|
|
27
29
|
creatable,
|
|
28
30
|
clearButtonText,
|
|
29
31
|
emptyText,
|
|
32
|
+
startSlot,
|
|
30
33
|
classNames,
|
|
31
34
|
...props
|
|
32
35
|
}: ComboboxProps) => react_jsx_runtime0.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"mappings":"
|
|
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,GAStB,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,clearButtonText:P,emptyText:F=`No results`,classNames:
|
|
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,clearButtonText:P,emptyText:F=`No results`,startSlot:I,classNames:L,...R})=>{let{creatable:z,empty:B,target:V,scrollArea:H,...U}=L||{},{clearButton:W,chevron:G,...K}=V||{},q={placeholder:M,label:j,startSlot:I,classNames:{dropdownTextInput:K?.dropdownTextInput??x(),root:K?.root??D(),label:K?.label??T(),description:K?.description??S(),error:K?.error??C(),wrapper:K?.wrapper??k(),input:K?.input??w(),section:K?.section??O(),required:K?.required??E()},clearButtonProps:{label:P,classNames:{clearButton:W?.clearButton??s(),root:W?.root??d(),icon:W?.icon??c(),iconRaw:{iconRaw:W?.iconRaw?.iconRaw??l(),root:W?.iconRaw?.root??u()}}},chevronProps:{classNames:{chevron:G?.chevron??r(),root:G?.root??o(),open:{iconRaw:G?.open?.iconRaw??i(),root:G?.open?.root??a()},close:{iconRaw:G?.close?.iconRaw??i(),root:G?.close?.root??a()}}}},J=U?.dropdown??n(),Y=U?.root??y(),X=U?.options??v(),Z=U?.option??p(),Q=B?.empty??f(),$=U?.search,te={emptyText:F,classNames:{empty:B?.empty??Q}},ne={creatable:N??!1,classNames:{create:z?.create,createIcon:{createIcon:z?.createIcon?.createIcon??m(),root:z?.createIcon?.root??_(),iconRaw:{iconRaw:z?.createIcon?.iconRaw?.iconRaw??h(),root:z?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:J,root:Y,options:X,option:Z,empty:Q,search:$},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:H?.dropdownScrollAreaAutosize??b()}},target:A(ee,{...q}),...R,children:A(t,{emptyProps:te,creatableProps:ne})})};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 {\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 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 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 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 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/BA8DA,MAAa,GAAY,CACvB,QACA,cACA,YACA,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,EAAkB,GAAoB,OAEtC,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,EAClC,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,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,EACT,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"}
|
|
@@ -15,6 +15,7 @@ type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
|
|
|
15
15
|
searchPlaceholder?: string;
|
|
16
16
|
searchStartSlot?: ReactNode;
|
|
17
17
|
searchClassNames?: SelectSearchClassNames;
|
|
18
|
+
startSlot?: ReactNode;
|
|
18
19
|
classNames?: DropdownProps['classNames'] & {
|
|
19
20
|
target?: ComboboxTargetProps['classNames'] & {
|
|
20
21
|
clearButton?: NonNullable<ComboboxTargetProps['clearButtonProps']>['classNames'];
|
|
@@ -33,6 +34,7 @@ declare const Select: ({
|
|
|
33
34
|
searchPlaceholder,
|
|
34
35
|
searchStartSlot,
|
|
35
36
|
searchClassNames,
|
|
37
|
+
startSlot,
|
|
36
38
|
classNames,
|
|
37
39
|
...props
|
|
38
40
|
}: SelectProps) => react_jsx_runtime0.JSX.Element;
|
|
@@ -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,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,UAAA;EAAA,GAAA;AAAA,
|
|
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,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,UAAA;EAAA,GAAA;AAAA,GAapB,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=!0,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,classNames:
|
|
1
|
+
import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!0,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,startSlot:V,classNames:H,...U})=>{let{target:W,scrollArea:G,...K}=H||{},{clearButton:q,chevron:J,...Y}=W||{},X=I??(L?`No results`:void 0),Z={placeholder:N,label:M,clearable:P,readOnly:!0,closeOnBlur:!L,startSlot:V,classNames:{dropdownTextInput:Y?.dropdownTextInput??S(),root:Y?.root??O(),label:Y?.label??E(),description:Y?.description??C(),error:Y?.error??w(),wrapper:Y?.wrapper??A(),input:Y?.input??T(),section:Y?.section??k(),required:Y?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:q?.clearButton??l(),root:q?.root??p(),icon:q?.icon??u(),iconRaw:{iconRaw:q?.iconRaw?.iconRaw??d(),root:q?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:J?.chevron??a(),root:J?.root??c(),open:{iconRaw:J?.open?.iconRaw??o(),root:J?.open?.root??s()},close:{iconRaw:J?.close?.iconRaw??o(),root:J?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:K?.dropdown??i(),root:K?.root??_(),options:K?.options??g(),option:K?.option??h(),empty:K?.empty??m(),search:K?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:G?.dropdownScrollAreaAutosize??v()}},target:j(n,{...Z}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...U,children:j(t,{emptyProps:{emptyText:X,classNames:{empty:K?.empty??m()}},creatableProps:{creatable:!1}})})};export{M as Select};
|
|
2
2
|
//# sourceMappingURL=Select.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n select,\n selectChevron,\n selectChevronIcon,\n selectChevronIconRoot,\n selectChevronRoot,\n selectClearButton,\n selectClearButtonIcon,\n selectClearButtonIconRaw,\n selectClearButtonIconRawRoot,\n selectClearButtonRoot,\n selectEmpty,\n selectOption,\n selectOptions,\n selectRoot,\n selectScrollAreaAutosize,\n selectSearchInput,\n selectSearchSection,\n selectSearchWrapper,\n selectTextInput,\n selectTextInputDescription,\n selectTextInputError,\n selectTextInputInput,\n selectTextInputLabel,\n selectTextInputRequired,\n selectTextInputRoot,\n selectTextInputSection,\n selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n DropdownProps,\n 'children' | 'classNames' | 'target'\n> & {\n label?: string;\n placeholder?: string;\n clearable?: boolean;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n classNames?: DropdownProps['classNames'] & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Select = ({\n label,\n placeholder,\n clearable = true,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n classNames,\n ...props\n}: SelectProps) => {\n const {\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n const resolvedEmptyText =\n emptyText ?? (searchable ? 'No results' : undefined);\n\n const targetProps = {\n placeholder,\n label,\n clearable,\n readOnly: true,\n closeOnBlur: !searchable,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n root: restTargetClassNames?.root ?? selectTextInputRoot(),\n label: restTargetClassNames?.label ?? selectTextInputLabel(),\n description:\n restTargetClassNames?.description ?? selectTextInputDescription(),\n error: restTargetClassNames?.error ?? selectTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n input: restTargetClassNames?.input ?? selectTextInputInput(),\n section: restTargetClassNames?.section ?? selectTextInputSection(),\n required: restTargetClassNames?.required ?? selectTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n selectClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n selectClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? selectChevron(),\n root: chevronClassNames?.root ?? selectChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n data-searchable={searchable}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? select(),\n root: dropdownClassNames?.root ?? selectRoot(),\n options: dropdownClassNames?.options ?? selectOptions(),\n option: dropdownClassNames?.option ?? selectOption(),\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n selectScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n dropdownTopSlot={\n searchable && (\n <SelectSearch\n searchPlaceholder={searchPlaceholder}\n startSlot={searchStartSlot}\n classNames={{\n input: searchClassNames?.input ?? selectSearchInput(),\n wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n section: searchClassNames?.section ?? selectSearchSection(),\n }}\n />\n )\n }\n {...props}\n >\n <ComboboxOptions\n emptyProps={{\n emptyText: resolvedEmptyText,\n classNames: {\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n },\n }}\n creatableProps={{\n creatable: false,\n }}\n />\n </Dropdown>\n );\n};\n"],"mappings":"
|
|
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 classNames?: DropdownProps['classNames'] & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Select = ({\n label,\n placeholder,\n clearable = true,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n startSlot,\n classNames,\n ...props\n}: SelectProps) => {\n const {\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n const resolvedEmptyText =\n emptyText ?? (searchable ? 'No results' : undefined);\n\n const targetProps = {\n placeholder,\n label,\n clearable,\n readOnly: true,\n closeOnBlur: !searchable,\n startSlot,\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":"s8BA+DA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAA,CACC,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,EAAA,CAAe,GAAI,EAAA,CAAe,CAC3C,gBACE,GACE,EAAC,EAAA,CACoB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,EACD,CAGN,GAAI,WAEJ,EAAC,EAAA,CACC,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,EACD,EACO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kanban.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"Kanban.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"mappings":";;;;UAoBiB,SAAA;EACf,EAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA;EACA,OAAA;IACE,WAAA;IACA,QAAA;IACA,QAAA;MACE,IAAA;MACA,GAAA;MACA,GAAA;IAAA;IAEF,KAAA;IAAA,CACC,GAAA;EAAA;EAEH,IAAA;EACA,MAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;AAAA;AAAA,UAEe,SAAA;EACf,IAAA,EAAM,SAAA;EAAA,CACL,GAAA,WAAc,SAAA;AAAA;AAAA,UAEA,eAAA;EACf,IAAA,EAAM,SAAA;EACN,MAAA,EAAQ,SAAA;EACR,KAAA;EACA,WAAA;AAAA;AAAA,KAGU,SAAA;EAAA,CACT,IAAA;IACC,MAAA,GAAS,KAAA,EAAO,eAAA,KAAoB,SAAA;IACpC,WAAA;EAAA;AAAA;AAAA,UAIa,WAAA;EACf,UAAA,EAAY,SAAA;EACZ,SAAA,GAAY,SAAA;EACZ,UAAA,IAAc,IAAA,EAAM,QAAA;EACpB,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;EAAU,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA;AAAA,GAKpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{addCardPlaceholder as e,getAddCardPlaceholderKey as t}from"./kanbanUtils.mjs";import{KanbanCard as n}from"./KanbanCard.mjs";import{KanbanCardAdder as r}from"./KanbanCardAdder.mjs";import{KanbanCardDragIndicator as i}from"./KanbanCardDragIndicator.mjs";import{KanbanColumnHeader as a}from"./KanbanColumnHeader.mjs";import{KanbanListFooter as o}from"./KanbanListFooter.mjs";import{cx as s}from"@mage-ui/styled-system/css";import{kanban as c,
|
|
1
|
+
import{addCardPlaceholder as e,getAddCardPlaceholderKey as t}from"./kanbanUtils.mjs";import{KanbanCard as n}from"./KanbanCard.mjs";import{KanbanCardAdder as r}from"./KanbanCardAdder.mjs";import{KanbanCardDragIndicator as i}from"./KanbanCardDragIndicator.mjs";import{KanbanColumnHeader as a}from"./KanbanColumnHeader.mjs";import{KanbanListFooter as o}from"./KanbanListFooter.mjs";import{cx as s}from"@mage-ui/styled-system/css";import{kanban as c,kanbanCardWrapper as l,kanbanCardWrapperRoot as u,kanbanColumn as d,kanbanRoot as f,kanbanWrapperColumn as p}from"@mage-ui/styled-system/recipes";import{jsx as m}from"react/jsx-runtime";import{useState as h}from"react";import{Kanban as g,dropHandler as _}from"react-kanban-kit";const v=({dataSource:v,configMap:y,onCardMove:b,classNames:x})=>{let[S,C]=h(v);return m(g,{dataSource:S,configMap:y??{card:{render:({data:e})=>m(n,{data:e}),isDraggable:!0},"new-card":{render:({column:e,data:t})=>m(r,{columnId:e.id,dataSource:S,setDataSource:C,inTop:t?.content?.inTop??!0}),isDraggable:!1}},renderColumnHeader:e=>m(a,{column:e}),renderCardDragIndicator:()=>m(i,{}),rootClassName:s(x?.kanban??c(),x?.root??f(),`group`),columnWrapperClassName:()=>x?.columnWrapper??p(),columnClassName:()=>x?.column??d(),cardWrapperClassName:s(x?.cardWrapper??l(),x?.cardWrapperRoot??u()),renderListFooter:t=>m(o,{onAddTask:()=>C(e(t.id,S,!1))}),allowListFooter:e=>!e.children.includes(t(e.id)),onCardMove:e=>{C(t=>_(e,structuredClone(t),()=>{},e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)+1}),e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)-1}))),b?.(e)}})};export{v as Kanban};
|
|
2
2
|
//# sourceMappingURL=Kanban.mjs.map
|
|
@@ -1 +1 @@
|
|
|
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 kanbanColumn,\n kanbanRoot,\n kanbanWrapperColumn,\n} from '@mage-ui/styled-system/recipes';\n\nimport { KanbanCard } from './KanbanCard';\nimport { KanbanCardAdder } from './KanbanCardAdder';\nimport { KanbanCardDragIndicator } from './KanbanCardDragIndicator';\nimport { KanbanColumnHeader } from './KanbanColumnHeader';\nimport { KanbanListFooter } from './KanbanListFooter';\nimport { addCardPlaceholder, getAddCardPlaceholderKey } from './kanbanUtils';\n\nexport interface BoardItem {\n id: string;\n title: string;\n parentId: string | null;\n children: string[];\n content?: {\n description?: string;\n priority?: string;\n assignee?: {\n name: string;\n src?: string;\n alt?: string;\n };\n inTop?: boolean;\n [key: string]: unknown;\n };\n type?: string | number;\n status?: string;\n totalChildrenCount: number;\n totalItemsCount?: number;\n isDraggable?: boolean;\n}\nexport interface BoardData {\n root: BoardItem;\n [key: string]: BoardItem;\n}\nexport interface CardRenderProps {\n data: BoardItem;\n column: BoardItem;\n index: number;\n isDraggable: boolean;\n}\n\nexport type ConfigMap = {\n [type: string]: {\n render: (props: CardRenderProps) => ReactNode;\n isDraggable?: boolean;\n };\n};\n\nexport interface KanbanProps {\n dataSource: BoardData;\n configMap?: ConfigMap;\n onCardMove?: (move: CardMove) => void;\n classNames?: {\n kanban?: string;\n root?: string;\n columnWrapper?: string;\n column?: 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 = ({\n dataSource,\n configMap,\n onCardMove,\n classNames,\n}: KanbanProps) => {\n const [board, setBoard] = useState<BoardData>(dataSource);\n\n const defaultConfigMap: ConfigMap = {\n card: {\n render: ({ data }: CardRenderProps) => <KanbanCard data={data} />,\n isDraggable: true,\n },\n 'new-card': {\n render: ({ column, data }: CardRenderProps) => (\n <KanbanCardAdder\n columnId={column.id}\n dataSource={board}\n setDataSource={setBoard}\n inTop={data?.content?.inTop ?? true}\n />\n ),\n isDraggable: false,\n },\n };\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,\n );\n onCardMove?.(move);\n };\n\n return (\n <KanbanKit\n dataSource={board}\n configMap={configMap ?? defaultConfigMap}\n renderColumnHeader={(column) => <KanbanColumnHeader column={column} />}\n renderCardDragIndicator={() => <KanbanCardDragIndicator />}\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 renderListFooter={(column) => (\n <KanbanListFooter\n onAddTask={() =>\n setBoard(addCardPlaceholder(column.id, board, false))\n }\n />\n )}\n allowListFooter={(column) =>\n !column.children.includes(getAddCardPlaceholderKey(column.id))\n }\n onCardMove={handleCardMove}\n />\n );\n};\n"],"mappings":"
|
|
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 { KanbanCard } from './KanbanCard';\nimport { KanbanCardAdder } from './KanbanCardAdder';\nimport { KanbanCardDragIndicator } from './KanbanCardDragIndicator';\nimport { KanbanColumnHeader } from './KanbanColumnHeader';\nimport { KanbanListFooter } from './KanbanListFooter';\nimport { addCardPlaceholder, getAddCardPlaceholderKey } from './kanbanUtils';\n\nexport interface BoardItem {\n id: string;\n title: string;\n parentId: string | null;\n children: string[];\n content?: {\n description?: string;\n priority?: string;\n assignee?: {\n name: string;\n src?: string;\n alt?: string;\n };\n inTop?: boolean;\n [key: string]: unknown;\n };\n type?: string | number;\n status?: string;\n totalChildrenCount: number;\n totalItemsCount?: number;\n isDraggable?: boolean;\n}\nexport interface BoardData {\n root: BoardItem;\n [key: string]: BoardItem;\n}\nexport interface CardRenderProps {\n data: BoardItem;\n column: BoardItem;\n index: number;\n isDraggable: boolean;\n}\n\nexport type ConfigMap = {\n [type: string]: {\n render: (props: CardRenderProps) => ReactNode;\n isDraggable?: boolean;\n };\n};\n\nexport interface KanbanProps {\n dataSource: BoardData;\n configMap?: ConfigMap;\n onCardMove?: (move: CardMove) => void;\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 = ({\n dataSource,\n configMap,\n onCardMove,\n classNames,\n}: KanbanProps) => {\n const [board, setBoard] = useState<BoardData>(dataSource);\n\n const defaultConfigMap: ConfigMap = {\n card: {\n render: ({ data }: CardRenderProps) => <KanbanCard data={data} />,\n isDraggable: true,\n },\n 'new-card': {\n render: ({ column, data }: CardRenderProps) => (\n <KanbanCardAdder\n columnId={column.id}\n dataSource={board}\n setDataSource={setBoard}\n inTop={data?.content?.inTop ?? true}\n />\n ),\n isDraggable: false,\n },\n };\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,\n );\n onCardMove?.(move);\n };\n\n return (\n <KanbanKit\n dataSource={board}\n configMap={configMap ?? defaultConfigMap}\n renderColumnHeader={(column) => <KanbanColumnHeader column={column} />}\n renderCardDragIndicator={() => <KanbanCardDragIndicator />}\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 renderListFooter={(column) => (\n <KanbanListFooter\n onAddTask={() =>\n setBoard(addCardPlaceholder(column.id, board, false))\n }\n />\n )}\n allowListFooter={(column) =>\n !column.children.includes(getAddCardPlaceholderKey(column.id))\n }\n onCardMove={handleCardMove}\n />\n );\n};\n"],"mappings":"otBAmFA,MAAaA,GAAU,CACrB,aACA,YACA,aACA,gBACiB,CACjB,GAAM,CAAC,EAAO,GAAY,EAAoB,EAAW,CAwCzD,OACE,EAACC,EAAAA,CACC,WAAY,EACZ,UAAW,GAzCqB,CAClC,KAAM,CACJ,QAAS,CAAE,UAA4B,EAAC,EAAA,CAAiB,OAAA,CAAQ,CACjE,YAAa,GACd,CACD,WAAY,CACV,QAAS,CAAE,SAAQ,UACjB,EAAC,EAAA,CACC,SAAU,EAAO,GACjB,WAAY,EACZ,cAAe,EACf,MAAO,GAAM,SAAS,OAAS,IAC/B,CAEJ,YAAa,GACd,CACF,CA0BG,mBAAqB,GAAW,EAAC,EAAA,CAA2B,SAAA,CAAU,CACtE,4BAA+B,EAAC,EAAA,EAAA,CAA0B,CAC1D,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,CACD,iBAAmB,GACjB,EAAC,EAAA,CACC,cACE,EAAS,EAAmB,EAAO,GAAI,EAAO,GAAM,CAAC,CAAA,CAEvD,CAEJ,gBAAkB,GAChB,CAAC,EAAO,SAAS,SAAS,EAAyB,EAAO,GAAG,CAAC,CAEhE,WAjDoB,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,GAiChB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{cx as e}from"@mage-ui/styled-system/css";import{scrollAreaAutosize as t,scrollAreaAutosizeContent as n,scrollAreaAutosizeCorner as r,scrollAreaAutosizeRoot as i,scrollAreaAutosizeScrollbar as a,scrollAreaAutosizeThumb as o,scrollAreaAutosizeViewport as s}from"@mage-ui/styled-system/recipes";import{ScrollArea as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";const u=({mah:u,children:d,classNames:f,...p})=>l(c.Autosize,{mah:u,classNames:{root:e(f?.scrollArea??t(),f?.root??i()),viewport:f?.viewport??s(),content:f?.content??n(),scrollbar:f?.scrollbar??a(),thumb:f?.thumb??o(),corner:f?.corner??r()},...p,children:d});export{u as ScrollAreaAutosize};
|
|
1
|
+
import{cx as e}from"@mage-ui/styled-system/css";import{scrollAreaAutosize as t,scrollAreaAutosizeContent as n,scrollAreaAutosizeCorner as r,scrollAreaAutosizeRoot as i,scrollAreaAutosizeScrollbar as a,scrollAreaAutosizeThumb as o,scrollAreaAutosizeViewport as s}from"@mage-ui/styled-system/recipes";import{ScrollArea as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";const u=({mah:u,children:d,classNames:f,...p})=>l(c.Autosize,{mah:u,style:{maxHeight:u,...p.style},classNames:{root:e(f?.scrollArea??t(),f?.root??i()),viewport:f?.viewport??s(),content:f?.content??n(),scrollbar:f?.scrollbar??a(),thumb:f?.thumb??o(),corner:f?.corner??r()},...p,children:d});export{u as ScrollAreaAutosize};
|
|
2
2
|
//# sourceMappingURL=ScrollAreaAutosize.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollAreaAutosize.mjs","names":["MantineScrollArea"],"sources":["../../../../src/components/misc/scroll-area-autosize/ScrollAreaAutosize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n scrollAreaAutosize,\n scrollAreaAutosizeContent,\n scrollAreaAutosizeCorner,\n scrollAreaAutosizeRoot,\n scrollAreaAutosizeScrollbar,\n scrollAreaAutosizeThumb,\n scrollAreaAutosizeViewport,\n} from '@mage-ui/styled-system/recipes';\nimport { ScrollArea as MantineScrollArea } from '@mantine/core';\n\nimport type { ScrollAreaProps } from '../scroll-area/ScrollArea';\n\nexport type ScrollAreaAutosizeProps = {\n mah: string | number;\n} & ScrollAreaProps;\n\nexport const ScrollAreaAutosize = ({\n mah,\n children,\n classNames,\n ...props\n}: ScrollAreaAutosizeProps): ReactNode => {\n return (\n <MantineScrollArea.Autosize\n mah={mah}\n classNames={{\n root: cx(\n classNames?.scrollArea ?? scrollAreaAutosize(),\n classNames?.root ?? scrollAreaAutosizeRoot(),\n ),\n viewport: classNames?.viewport ?? scrollAreaAutosizeViewport(),\n content: classNames?.content ?? scrollAreaAutosizeContent(),\n scrollbar: classNames?.scrollbar ?? scrollAreaAutosizeScrollbar(),\n thumb: classNames?.thumb ?? scrollAreaAutosizeThumb(),\n corner: classNames?.corner ?? scrollAreaAutosizeCorner(),\n }}\n {...props}\n >\n {children}\n </MantineScrollArea.Autosize>\n );\n};\n"],"mappings":"8XAoBA,MAAa,GAAsB,CACjC,MACA,WACA,aACA,GAAG,KAGD,EAACA,EAAkB,SAAA,CACZ,MACL,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAoB,CAC9C,GAAY,MAAQ,GAAwB,CAC7C,CACD,SAAU,GAAY,UAAY,GAA4B,CAC9D,QAAS,GAAY,SAAW,GAA2B,CAC3D,UAAW,GAAY,WAAa,GAA6B,CACjE,MAAO,GAAY,OAAS,GAAyB,CACrD,OAAQ,GAAY,QAAU,GAA0B,CACzD,CACD,GAAI,EAEH,YAC0B"}
|
|
1
|
+
{"version":3,"file":"ScrollAreaAutosize.mjs","names":["MantineScrollArea"],"sources":["../../../../src/components/misc/scroll-area-autosize/ScrollAreaAutosize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n scrollAreaAutosize,\n scrollAreaAutosizeContent,\n scrollAreaAutosizeCorner,\n scrollAreaAutosizeRoot,\n scrollAreaAutosizeScrollbar,\n scrollAreaAutosizeThumb,\n scrollAreaAutosizeViewport,\n} from '@mage-ui/styled-system/recipes';\nimport { ScrollArea as MantineScrollArea } from '@mantine/core';\n\nimport type { ScrollAreaProps } from '../scroll-area/ScrollArea';\n\nexport type ScrollAreaAutosizeProps = {\n mah: string | number;\n} & ScrollAreaProps;\n\nexport const ScrollAreaAutosize = ({\n mah,\n children,\n classNames,\n ...props\n}: ScrollAreaAutosizeProps): ReactNode => {\n return (\n <MantineScrollArea.Autosize\n mah={mah}\n style={{ maxHeight: mah, ...props.style }}\n classNames={{\n root: cx(\n classNames?.scrollArea ?? scrollAreaAutosize(),\n classNames?.root ?? scrollAreaAutosizeRoot(),\n ),\n viewport: classNames?.viewport ?? scrollAreaAutosizeViewport(),\n content: classNames?.content ?? scrollAreaAutosizeContent(),\n scrollbar: classNames?.scrollbar ?? scrollAreaAutosizeScrollbar(),\n thumb: classNames?.thumb ?? scrollAreaAutosizeThumb(),\n corner: classNames?.corner ?? scrollAreaAutosizeCorner(),\n }}\n {...props}\n >\n {children}\n </MantineScrollArea.Autosize>\n );\n};\n"],"mappings":"8XAoBA,MAAa,GAAsB,CACjC,MACA,WACA,aACA,GAAG,KAGD,EAACA,EAAkB,SAAA,CACZ,MACL,MAAO,CAAE,UAAW,EAAK,GAAG,EAAM,MAAO,CACzC,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAoB,CAC9C,GAAY,MAAQ,GAAwB,CAC7C,CACD,SAAU,GAAY,UAAY,GAA4B,CAC9D,QAAS,GAAY,SAAW,GAA2B,CAC3D,UAAW,GAAY,WAAa,GAA6B,CACjE,MAAO,GAAY,OAAS,GAAyB,CACrD,OAAQ,GAAY,QAAU,GAA0B,CACzD,CACD,GAAI,EAEH,YAC0B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.71",
|
|
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.71",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|