@mage-ui/components 0.0.95 → 0.0.96
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.
|
@@ -32,6 +32,7 @@ type DropdownBaseProps = {
|
|
|
32
32
|
portal?: boolean;
|
|
33
33
|
position?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
|
|
34
34
|
width?: number | string;
|
|
35
|
+
keepMounted?: boolean;
|
|
35
36
|
};
|
|
36
37
|
//#endregion
|
|
37
38
|
export { DropdownBaseProps };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownBase.js","names":["MantineCombobox","Divider: React.FC<{ classNames?: { divider?: string } }>"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { cloneElement } from 'react';\n\nimport {\n comboboxClear,\n comboboxDivider,\n comboboxOptions,\n dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\nimport { ButtonIcon } from '@/components/buttons';\n\nexport type DropdownBaseProps = {\n defaultOpened?: boolean;\n readOnly?: boolean;\n setQuery?: (value: string) => void;\n selectedOption?: { id: string | number; value: string } | undefined;\n setSelectedOption: (value: string | undefined) => void;\n target: React.ReactElement<{\n startSlot?: React.ReactNode;\n endSlot?: React.ReactNode;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur?: () => void;\n onClick?: () => void;\n }>;\n classNames?: {\n dropdown?: string;\n options?: string;\n divider?: string;\n };\n endSlot?: React.ReactNode;\n startSlot?: React.ReactNode;\n isClearable?: boolean;\n clearableIcon?: string;\n children: React.ReactNode;\n portal?: boolean;\n position?:\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n width?: number | string;\n};\n\nexport const DropdownBase = ({\n defaultOpened,\n readOnly,\n setQuery,\n setSelectedOption,\n selectedOption,\n target,\n classNames,\n children,\n endSlot,\n startSlot,\n position,\n portal,\n width,\n isClearable,\n clearableIcon,\n ...props\n}: DropdownBaseProps) => {\n const combobox = useCombobox({\n defaultOpened: defaultOpened ?? false,\n scrollBehavior: 'smooth',\n onDropdownClose: () => {\n combobox.resetSelectedOption();\n },\n });\n\n const handleClear = () => {\n setQuery?.('');\n setSelectedOption(undefined);\n combobox.resetSelectedOption();\n };\n const showClearButton = isClearable && (selectedOption?.value || '');\n\n const clearButton = (\n <ButtonIcon\n classNames={{\n root: comboboxClear(),\n }}\n icon={clearableIcon || 'x-close'}\n label='clear input'\n onClick={(e) => {\n e.stopPropagation();\n handleClear();\n }}\n />\n );\n\n const targetComponent = cloneElement(target, {\n ...(target?.props ?? {}),\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n target?.props?.onChange?.(event);\n setQuery?.(event.currentTarget.value);\n combobox.openDropdown();\n combobox.updateSelectedOptionIndex();\n },\n onBlur: () => {\n setQuery?.(selectedOption?.value ?? '');\n },\n onClick: () => {\n if (readOnly) {\n combobox.toggleDropdown();\n } else {\n combobox.openDropdown();\n }\n },\n // opened: combobox.isDropdownOpened,\n startSlot: startSlot,\n endSlot: showClearButton ? clearButton : endSlot,\n });\n\n return (\n <MantineCombobox\n readOnly={readOnly ?? false}\n onOptionSubmit={(option) => {\n setSelectedOption(option);\n setQuery?.(option);\n combobox.closeDropdown();\n }}\n store={combobox}\n withinPortal={portal || true}\n position={position || 'bottom-start'}\n width={width || 'auto'}\n {...props}\n >\n <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n <MantineCombobox.Dropdown\n classNames={{\n dropdown: classNames?.dropdown ?? dropdown(),\n }}\n >\n <MantineCombobox.Options\n classNames={{\n options: classNames?.options ?? comboboxOptions(),\n }}\n >\n {children}\n </MantineCombobox.Options>\n </MantineCombobox.Dropdown>\n </MantineCombobox>\n );\n};\n\nconst Divider: React.FC<{ classNames?: { divider?: string } }> = ({\n classNames,\n}) => {\n return (\n <hr\n className={classNames?.divider ?? comboboxDivider()}\n aria-orientation='horizontal'\n />\n );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Divider = Divider;\nDropdownBase.Divider.displayName = 'DropdownBase.Divider';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownBase.js","names":["MantineCombobox","Divider: React.FC<{ classNames?: { divider?: string } }>"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { cloneElement } from 'react';\n\nimport {\n comboboxClear,\n comboboxDivider,\n comboboxOptions,\n dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\nimport { ButtonIcon } from '@/components/buttons';\n\nexport type DropdownBaseProps = {\n defaultOpened?: boolean;\n readOnly?: boolean;\n setQuery?: (value: string) => void;\n selectedOption?: { id: string | number; value: string } | undefined;\n setSelectedOption: (value: string | undefined) => void;\n target: React.ReactElement<{\n startSlot?: React.ReactNode;\n endSlot?: React.ReactNode;\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n onBlur?: () => void;\n onClick?: () => void;\n }>;\n classNames?: {\n dropdown?: string;\n options?: string;\n divider?: string;\n };\n endSlot?: React.ReactNode;\n startSlot?: React.ReactNode;\n isClearable?: boolean;\n clearableIcon?: string;\n children: React.ReactNode;\n portal?: boolean;\n position?:\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'left'\n | 'left-start'\n | 'left-end';\n width?: number | string;\n keepMounted?: boolean;\n};\n\nexport const DropdownBase = ({\n defaultOpened,\n readOnly,\n setQuery,\n setSelectedOption,\n selectedOption,\n target,\n classNames,\n children,\n endSlot,\n startSlot,\n position,\n portal,\n width,\n isClearable,\n clearableIcon,\n ...props\n}: DropdownBaseProps) => {\n const combobox = useCombobox({\n defaultOpened: defaultOpened ?? false,\n scrollBehavior: 'smooth',\n onDropdownClose: () => {\n combobox.resetSelectedOption();\n },\n });\n\n const handleClear = () => {\n setQuery?.('');\n setSelectedOption(undefined);\n combobox.resetSelectedOption();\n };\n const showClearButton = isClearable && (selectedOption?.value || '');\n\n const clearButton = (\n <ButtonIcon\n classNames={{\n root: comboboxClear(),\n }}\n icon={clearableIcon || 'x-close'}\n label='clear input'\n onClick={(e) => {\n e.stopPropagation();\n handleClear();\n }}\n />\n );\n\n const targetComponent = cloneElement(target, {\n ...(target?.props ?? {}),\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n target?.props?.onChange?.(event);\n setQuery?.(event.currentTarget.value);\n combobox.openDropdown();\n combobox.updateSelectedOptionIndex();\n },\n onBlur: () => {\n setQuery?.(selectedOption?.value ?? '');\n },\n onClick: () => {\n if (readOnly) {\n combobox.toggleDropdown();\n } else {\n combobox.openDropdown();\n }\n },\n // opened: combobox.isDropdownOpened,\n startSlot: startSlot,\n endSlot: showClearButton ? clearButton : endSlot,\n });\n\n return (\n <MantineCombobox\n readOnly={readOnly ?? false}\n onOptionSubmit={(option) => {\n setSelectedOption(option);\n setQuery?.(option);\n combobox.closeDropdown();\n }}\n store={combobox}\n withinPortal={portal || true}\n position={position || 'bottom-start'}\n width={width || 'auto'}\n {...props}\n >\n <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n <MantineCombobox.Dropdown\n classNames={{\n dropdown: classNames?.dropdown ?? dropdown(),\n }}\n >\n <MantineCombobox.Options\n classNames={{\n options: classNames?.options ?? comboboxOptions(),\n }}\n >\n {children}\n </MantineCombobox.Options>\n </MantineCombobox.Dropdown>\n </MantineCombobox>\n );\n};\n\nconst Divider: React.FC<{ classNames?: { divider?: string } }> = ({\n classNames,\n}) => {\n return (\n <hr\n className={classNames?.divider ?? comboboxDivider()}\n aria-orientation='horizontal'\n />\n );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Divider = Divider;\nDropdownBase.Divider.displayName = 'DropdownBase.Divider';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"6UAoDA,MAAa,GAAgB,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,WACA,SACA,QACA,cACA,gBACA,GAAG,KACoB,CACvB,IAAM,EAAW,EAAY,CAC3B,cAAe,GAAiB,GAChC,eAAgB,SAChB,oBAAuB,CACrB,EAAS,qBAAqB,EAEjC,CAAC,CAEI,MAAoB,CACxB,IAAW,GAAG,CACd,EAAkB,IAAA,GAAU,CAC5B,EAAS,qBAAqB,EAE1B,EAAkB,IAAgB,GAAgB,OAAS,IAE3D,EACJ,EAAC,EAAA,CACC,WAAY,CACV,KAAM,GAAe,CACtB,CACD,KAAM,GAAiB,UACvB,MAAM,cACN,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAa,GAEf,CAGE,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,EAAE,CACvB,SAAW,GAA+C,CACxD,GAAQ,OAAO,WAAW,EAAM,CAChC,IAAW,EAAM,cAAc,MAAM,CACrC,EAAS,cAAc,CACvB,EAAS,2BAA2B,EAEtC,WAAc,CACZ,IAAW,GAAgB,OAAS,GAAG,EAEzC,YAAe,CACT,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,EAIhB,YACX,QAAS,EAAkB,EAAc,EAC1C,CAAC,CAEF,OACE,EAACA,EAAAA,CACC,SAAU,GAAY,GACtB,eAAiB,GAAW,CAC1B,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,EAE1B,MAAO,EACP,aAAc,GAAU,GACxB,SAAU,GAAY,eACtB,MAAO,GAAS,OAChB,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,EAAA,CAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,CAC7C,UAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,CAClD,CAEA,YACuB,EACD,CAAA,EACX,EAIhBC,GAA4D,CAChE,gBAGE,EAAC,KAAA,CACC,UAAW,GAAY,SAAW,GAAiB,CACnD,mBAAiB,cACjB,CAIN,EAAa,OAASD,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,QAAU,EACvB,EAAa,QAAQ,YAAc,uBACnC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.96",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"rimraf": "^6.0.1",
|
|
27
27
|
"tsdown": "^0.15.6",
|
|
28
28
|
"typescript": "^5.9.3",
|
|
29
|
-
"@mage-ui/preset": "0.0.
|
|
30
|
-
"@mage-ui/styled-system": "0.0.
|
|
29
|
+
"@mage-ui/preset": "0.0.96",
|
|
30
|
+
"@mage-ui/styled-system": "0.0.96"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@hookform/resolvers": "^5.2.2",
|