@mage-ui/components 0.0.57 → 0.0.58
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/DropdownBase.d.ts +2 -0
- package/dist/components/controls/dropdown/DropdownBase.d.ts.map +1 -1
- package/dist/components/controls/dropdown/DropdownBase.js +1 -1
- package/dist/components/controls/dropdown/DropdownBase.js.map +1 -1
- package/dist/components/controls/dropdown/Menu.d.ts +7 -2
- package/dist/components/controls/dropdown/Menu.d.ts.map +1 -1
- package/dist/components/controls/dropdown/Menu.js +1 -1
- package/dist/components/controls/dropdown/Menu.js.map +1 -1
- package/dist/panda.json +1 -0
- package/package.json +3 -3
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import "@mantine/core";
|
|
2
2
|
import "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
3
4
|
|
|
4
5
|
//#region src/components/controls/dropdown/DropdownBase.d.ts
|
|
5
6
|
type DropdownBaseProps = {
|
|
@@ -15,6 +16,7 @@ type DropdownBaseProps = {
|
|
|
15
16
|
classNames?: {
|
|
16
17
|
dropdown?: string;
|
|
17
18
|
options?: string;
|
|
19
|
+
divider?: string;
|
|
18
20
|
};
|
|
19
21
|
endSlot?: React.ReactNode;
|
|
20
22
|
startSlot?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;;KASY,iBAAA;;;;;IAAA,EAAA,EAAA,MAAA,GAAA,MAAiB;IAAA,KAAA,EAAA,MAAA;MAMnB,SAAM;mBAME,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;QACJ,EAPJ,KAAA,CAAM,YAOI;YACF,CAAA,EAAA;IAAS,QAAA,CAAA,EAAA,MAAA;;;;YAFf,KAAA,CAAM;cACJ,KAAA,CAAM;YACR,KAAA,CAAM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{comboboxDivider as e,comboboxOptions as t,dropdown as n}from"@mage-ui/styled-system/recipes";import{Combobox as r,useCombobox as i}from"@mantine/core";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{cloneElement as s}from"react";const c=({defaultOpened:e,readOnly:c,setQuery:l,setSelectedOption:u,selectedOption:d,target:f,classNames:p,children:m,endSlot:h,startSlot:g,position:_,portal:v,width:y,...b})=>{let x=i({defaultOpened:e??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{x.resetSelectedOption()}}),S=s(f,{...f?.props??{},onChange:({currentTarget:e})=>{l?.(e.value),x.openDropdown(),x.updateSelectedOptionIndex()},onBlur:()=>{l?.(d?.value??``)},onClick:()=>{c?x.toggleDropdown():x.openDropdown()},startSlot:g,endSlot:h});return o(r,{readOnly:c??!1,onOptionSubmit:e=>{u(e),l?.(e),x.closeDropdown()},store:x,withinPortal:v||!0,position:_||`bottom-start`,width:y||`auto`,...b,children:[a(r.Target,{children:S}),a(r.Dropdown,{classNames:{dropdown:p?.dropdown??n()},children:a(r.Options,{classNames:{options:p?.options??t()},children:m})})]})},l=({classNames:t})=>a(`hr`,{className:t?.divider??e(),"aria-orientation":`horizontal`});c.Option=r.Option,c.Option.displayName=`DropdownBase.Option`,c.Divider=l,c.Divider.displayName=`DropdownBase.Divider`,c.Empty=r.Empty,c.Empty.displayName=`DropdownBase.Empty`;export{c as DropdownBase};
|
|
2
2
|
//# sourceMappingURL=DropdownBase.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownBase.js","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"DropdownBase.js","names":["MantineCombobox","Divider: React.FC<{ classNames?: { divider?: string } }>"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport {\n comboboxDivider,\n comboboxOptions,\n dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\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 classNames?: {\n dropdown?: string;\n options?: string;\n divider?: string;\n };\n endSlot?: React.ReactNode;\n startSlot?: React.ReactNode;\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 ...props\n}: DropdownBaseProps) => {\n const combobox = useCombobox({\n defaultOpened: defaultOpened ?? false,\n scrollBehavior: 'smooth',\n onDropdownClose: () => {\n combobox.resetSelectedOption();\n },\n });\n\n const targetComponent = cloneElement(target, {\n ...(target?.props ?? {}),\n onChange: ({\n currentTarget,\n }: ChangeEvent<HTMLInputElement | HTMLButtonElement>) => {\n setQuery?.(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: endSlot,\n } as React.HTMLProps<HTMLInputElement | HTMLButtonElement>);\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":"qPAyCA,MAAa,GAAgB,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,WACA,SACA,QACA,GAAG,KACoB,CACvB,IAAM,EAAW,EAAY,CAC3B,cAAe,GAAiB,GAChC,eAAgB,SAChB,oBAAuB,CACrB,EAAS,qBAAqB,EAEjC,CAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,EAAE,CACvB,UAAW,CACT,mBACuD,CACvD,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,EAEtC,WAAc,CACZ,IAAW,GAAgB,OAAS,GAAG,EAEzC,YAAe,CACT,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,EAIhB,YACF,UACV,CAA0D,CAE3D,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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DropdownBaseProps } from "./DropdownBase.js";
|
|
2
2
|
import * as react_jsx_runtime9 from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/components/controls/dropdown/Menu.d.ts
|
|
6
6
|
type MenuProps = Omit<DropdownBaseProps, 'setSelectedOption' | 'target' | 'opened'> & {
|
|
@@ -9,6 +9,7 @@ type MenuProps = Omit<DropdownBaseProps, 'setSelectedOption' | 'target' | 'opene
|
|
|
9
9
|
classNames?: {
|
|
10
10
|
option?: string;
|
|
11
11
|
dropdown?: string;
|
|
12
|
+
divider?: string;
|
|
12
13
|
};
|
|
13
14
|
buttonClassNames?: {
|
|
14
15
|
root?: string;
|
|
@@ -34,7 +35,11 @@ declare const Menu: {
|
|
|
34
35
|
Option: {
|
|
35
36
|
({
|
|
36
37
|
children
|
|
37
|
-
}: MenuOptionProps):
|
|
38
|
+
}: MenuOptionProps): ReactNode;
|
|
39
|
+
displayName: string;
|
|
40
|
+
};
|
|
41
|
+
Divider: {
|
|
42
|
+
(): null;
|
|
38
43
|
displayName: string;
|
|
39
44
|
};
|
|
40
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Menu.tsx"],"sourcesContent":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Menu.tsx"],"sourcesContent":[],"mappings":";;;;;KAYY,SAAA,GAAY,KACtB;UAGQ,KAAA,CAAM;;EAJJ,UAAA,CAAA,EAAS;IAAA,MAAA,CAAA,EAAA,MAAA;IACnB,QAAA,CAAA,EAAA,MAAA;IADsB,OAAA,CAAA,EAAA,MAAA;;kBAiBL,CAAA,EAAA;IACP,IAAA,CAAM,EAAA,MAAA;IACJ,KAAM,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;IAGhB,OAyDZ,CAAA,EAAA,MAAA;EAAA,CAAA;aA9DY,KAAA,CAAM;YACP,KAAA,CAAM;cACJ,KAAA,CAAM;;cAGP;;;;;;;;;;KASV,YAAS,kBAAA,CAAA,GAAA,CAAA;;IAAT,CAAA;MAAA;IAAA,CAAA,EAuD2B,eAvD3B,CAAA,EAuD0C,SAvD1C;IAAS,WAAA,EAAA,MAAA;;SAuDkB,EAAA;IAAe,EAAA,EAAA,IAAA;IAAA,WAAA,EAAA,MAAA;EALxC,CAAA;;KAAA,eAAA;;YAEO,KAAA,CAAM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{
|
|
1
|
+
import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{comboboxDivider as n,comboboxOption as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{jsx as a}from"react/jsx-runtime";import{Children as o,isValidElement as s}from"react";const c=({label:l,a11yLabel:u,classNames:d,buttonClassNames:f,children:p,endSlot:m,startSlot:h,...g})=>a(t,{setSelectedOption:()=>{},target:a(e,{classNames:f,...u&&{"aria-label":u},children:l}),classNames:{dropdown:d?.dropdown??i()},startSlot:h,endSlot:m,...g,children:o.map(p,(e,i)=>{if(!s(e))return null;let o=e.type.displayName;if(o===c.Option.displayName){let{value:n,children:i}=e.props;return a(t.Option,{value:n,classNames:{option:d?.option??r()},children:i},n)}if(o===c.Divider.displayName)return a(t.Divider,{classNames:{divider:d?.divider??n()}},`${e.type}-${i}`)})}),l=({children:e})=>e,u=()=>null;l.displayName=`Menu.Option`,c.Option=l,u.displayName=`Menu.Divider`,c.Divider=u;export{c as Menu};
|
|
2
2
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["children"],"sources":["../../../../src/components/controls/dropdown/Menu.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["children"],"sources":["../../../../src/components/controls/dropdown/Menu.tsx"],"sourcesContent":["import { Children, isValidElement, type ReactNode } from 'react';\n\nimport {\n comboboxDivider,\n comboboxOption,\n dropdown,\n} from '@mage-ui/styled-system/recipes';\n// import type { FloatingPosition, PopoverWidth } from '@mantine/core';\nimport { Button } from '@/components/buttons';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type MenuProps = Omit<\n DropdownBaseProps,\n 'setSelectedOption' | 'target' | 'opened'\n> & {\n label?: React.ReactNode;\n a11yLabel?: string;\n classNames?: {\n option?: string;\n dropdown?: string;\n divider?: string;\n };\n buttonClassNames?: {\n root?: string;\n inner?: string;\n label?: string;\n section?: string;\n };\n children?: React.ReactNode;\n endSlot?: React.ReactNode;\n startSlot?: React.ReactNode;\n};\n\nexport const Menu = ({\n label,\n a11yLabel,\n classNames,\n buttonClassNames,\n children,\n endSlot,\n startSlot,\n ...props\n}: MenuProps) => {\n return (\n <DropdownBase\n setSelectedOption={() => {}}\n target={\n <Button\n classNames={buttonClassNames}\n {...(a11yLabel && { 'aria-label': a11yLabel })}\n >\n {label}\n </Button>\n }\n classNames={{\n dropdown: classNames?.dropdown ?? dropdown(),\n }}\n startSlot={startSlot}\n endSlot={endSlot}\n {...props}\n >\n {Children.map(children, (child: ReactNode, index: number) => {\n if (!isValidElement(child)) return null;\n\n const typeName = (child.type as { displayName?: string }).displayName;\n\n if (typeName === Menu.Option.displayName) {\n const { value, children } = child.props as MenuOptionProps;\n return (\n <DropdownBase.Option\n key={value}\n value={value}\n classNames={{ option: classNames?.option ?? comboboxOption() }}\n >\n {children}\n </DropdownBase.Option>\n );\n }\n\n if (typeName === Menu.Divider.displayName) {\n return (\n <DropdownBase.Divider\n key={`${child.type}-${index}`}\n classNames={{ divider: classNames?.divider ?? comboboxDivider() }}\n />\n );\n }\n })}\n </DropdownBase>\n );\n};\n\ntype MenuOptionProps = {\n value: string;\n children: React.ReactNode;\n};\n\nconst Option = ({ children }: MenuOptionProps) => {\n return children;\n};\nconst Divider = () => null;\n\nOption.displayName = 'Menu.Option';\nMenu.Option = Option;\n\nDivider.displayName = 'Menu.Divider';\nMenu.Divider = Divider;\n"],"mappings":"ySAkCA,MAAa,GAAQ,CACnB,QACA,YACA,aACA,mBACA,WACA,UACA,YACA,GAAG,KAGD,EAAC,EAAA,CACC,sBAAyB,GACzB,OACE,EAAC,EAAA,CACC,WAAY,EACZ,GAAK,GAAa,CAAE,aAAc,EAAW,UAE5C,GACM,CAEX,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,CAC7C,CACU,YACF,UACT,GAAI,WAEH,EAAS,IAAI,GAAW,EAAkB,IAAkB,CAC3D,GAAI,CAAC,EAAe,EAAM,CAAE,OAAO,KAEnC,IAAM,EAAY,EAAM,KAAkC,YAE1D,GAAI,IAAa,EAAK,OAAO,YAAa,CACxC,GAAM,CAAE,QAAO,SAAA,GAAa,EAAM,MAClC,OACE,EAAC,EAAa,OAAA,CAEL,QACP,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7DA,GAJI,EAKe,CAI1B,GAAI,IAAa,EAAK,QAAQ,YAC5B,OACE,EAAC,EAAa,QAAA,CAEZ,WAAY,CAAE,QAAS,GAAY,SAAW,GAAiB,CAAE,CAAA,CAD5D,GAAG,EAAM,KAAK,GAAG,IAEtB,EAGN,EACW,CASb,GAAU,CAAE,cACT,EAEH,MAAgB,KAEtB,EAAO,YAAc,cACrB,EAAK,OAAS,EAEd,EAAQ,YAAc,eACtB,EAAK,QAAU"}
|
package/dist/panda.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.58",
|
|
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.58",
|
|
30
|
+
"@mage-ui/styled-system": "0.0.58"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@hookform/resolvers": "^5.2.2",
|