@mage-ui/components 0.0.81 → 0.0.82
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/buttons/button/Button.d.ts +2 -2
- package/dist/components/buttons/button-icon/ButtonIcon.d.ts +2 -2
- package/dist/components/controls/dropdown/DropdownBase.d.ts +7 -1
- 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/navigation/breadcrumbs/Breadcrumbs.d.ts +2 -2
- package/dist/components/navigation/tabs/Tabs.d.ts +5 -5
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime6 from "react/jsx-runtime";
|
|
2
2
|
import { ComponentProps, ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/buttons/button/Button.d.ts
|
|
@@ -20,7 +20,7 @@ declare const Button: ({
|
|
|
20
20
|
endSlot,
|
|
21
21
|
children,
|
|
22
22
|
...props
|
|
23
|
-
}: ButtonProps) =>
|
|
23
|
+
}: ButtonProps) => react_jsx_runtime6.JSX.Element;
|
|
24
24
|
//#endregion
|
|
25
25
|
export { Button, ButtonProps };
|
|
26
26
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ButtonProps } from "../button/Button.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime5 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/components/buttons/button-icon/ButtonIcon.d.ts
|
|
5
5
|
type ButtonIconProps = ButtonProps & {
|
|
@@ -15,7 +15,7 @@ declare const ButtonIcon: ({
|
|
|
15
15
|
icon,
|
|
16
16
|
classNames,
|
|
17
17
|
...props
|
|
18
|
-
}: ButtonIconProps) =>
|
|
18
|
+
}: ButtonIconProps) => react_jsx_runtime5.JSX.Element;
|
|
19
19
|
//#endregion
|
|
20
20
|
export { ButtonIcon, ButtonIconProps };
|
|
21
21
|
//# sourceMappingURL=ButtonIcon.d.ts.map
|
|
@@ -12,7 +12,13 @@ type DropdownBaseProps = {
|
|
|
12
12
|
value: string;
|
|
13
13
|
} | undefined;
|
|
14
14
|
setSelectedOption: (value: string | undefined) => void;
|
|
15
|
-
target: React.ReactElement
|
|
15
|
+
target: React.ReactElement<{
|
|
16
|
+
startSlot?: React.ReactNode;
|
|
17
|
+
endSlot?: React.ReactNode;
|
|
18
|
+
onChange?: (event: EventTarget & HTMLInputElement) => void;
|
|
19
|
+
onBlur?: () => void;
|
|
20
|
+
onClick?: () => void;
|
|
21
|
+
}>;
|
|
16
22
|
classNames?: {
|
|
17
23
|
dropdown?: string;
|
|
18
24
|
options?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,iBAAA;;;;;IAAA,EAAA,EAAA,MAAA,GAAA,MAAiB;IAAA,KAAA,EAAA,MAAA;
|
|
1
|
+
{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,iBAAA;;;;;IAAA,EAAA,EAAA,MAAA,GAAA,MAAiB;IAAA,KAAA,EAAA,MAAA;MAOb,SAAM;mBACF,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;QACG,EAHb,KAAA,CAAM,YAGO,CAAA;IAAc,SAAA,CAAA,EAFrB,KAAA,CAAM,SAEe;IAH3B,OAAM,CAAA,EAEF,KAAA,CAAM,SAFJ;IAYJ,QAAM,CAAA,EAAA,CAAA,KAAA,EATK,WASL,GATmB,gBASnB,EAAA,GAAA,IAAA;IACJ,MAAM,CAAA,EAAA,GAAA,GAAA,IAAA;IAGR,OAAM,CAAA,EAAA,GAAA,GAAA,IAAA;EAAS,CAAA,CAAA;;;;;;YAJf,KAAA,CAAM;cACJ,KAAA,CAAM;;;YAGR,KAAA,CAAM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.js";import{comboboxClear as t,comboboxDivider as n,comboboxOptions as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{Combobox as a,useCombobox as o}from"@mantine/core";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{cloneElement as l}from"react";const u=({defaultOpened:n,readOnly:u,setQuery:d,setSelectedOption:f,selectedOption:p,target:m,classNames:h,children:g,endSlot:_,startSlot:v,position:y,portal:b,width:x,isClearable:S,clearableIcon:C,...w})=>{let T=o({defaultOpened:n??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{T.resetSelectedOption()}}),E=()=>{d?.(``),f(void 0),T.resetSelectedOption()},D=S&&(p?.value||``),O=s(e,{classNames:{root:t()},icon:C||`x-close`,label:`clear input`,onClick:e=>{e.stopPropagation(),E()}}),k=l(m,{...m?.props??{},onChange:(
|
|
1
|
+
import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.js";import{comboboxClear as t,comboboxDivider as n,comboboxOptions as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{Combobox as a,useCombobox as o}from"@mantine/core";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{cloneElement as l}from"react";const u=({defaultOpened:n,readOnly:u,setQuery:d,setSelectedOption:f,selectedOption:p,target:m,classNames:h,children:g,endSlot:_,startSlot:v,position:y,portal:b,width:x,isClearable:S,clearableIcon:C,...w})=>{let T=o({defaultOpened:n??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{T.resetSelectedOption()}}),E=()=>{d?.(``),f(void 0),T.resetSelectedOption()},D=S&&(p?.value||``),O=s(e,{classNames:{root:t()},icon:C||`x-close`,label:`clear input`,onClick:e=>{e.stopPropagation(),E()}}),k=l(m,{...m?.props??{},onChange:e=>{m?.props?.onChange?.(e),d?.(e.value),T.openDropdown(),T.updateSelectedOptionIndex()},onBlur:()=>{d?.(p?.value??``)},onClick:()=>{u?T.toggleDropdown():T.openDropdown()},startSlot:v,endSlot:D?O:_});return c(a,{readOnly:u??!1,onOptionSubmit:e=>{f(e),d?.(e),T.closeDropdown()},store:T,withinPortal:b||!0,position:y||`bottom-start`,width:x||`auto`,...w,children:[s(a.Target,{children:k}),s(a.Dropdown,{classNames:{dropdown:h?.dropdown??i()},children:s(a.Options,{classNames:{options:h?.options??r()},children:g})})]})},d=({classNames:e})=>s(`hr`,{className:e?.divider??n(),"aria-orientation":`horizontal`});u.Option=a.Option,u.Option.displayName=`DropdownBase.Option`,u.Divider=d,u.Divider.displayName=`DropdownBase.Divider`,u.Empty=a.Empty,u.Empty.displayName=`DropdownBase.Empty`;export{u as DropdownBase};
|
|
2
2
|
//# sourceMappingURL=DropdownBase.js.map
|
|
@@ -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 {
|
|
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: EventTarget & 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) => {\n target?.props?.onChange?.(event);\n setQuery?.(event.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":"6UAmDA,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,GAAU,CACnB,GAAQ,OAAO,WAAW,EAAM,CAChC,IAAW,EAAM,MAAM,CACvB,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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime4 from "react/jsx-runtime";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/components/navigation/breadcrumbs/Breadcrumbs.d.ts
|
|
@@ -17,7 +17,7 @@ declare const Breadcrumbs: {
|
|
|
17
17
|
separator,
|
|
18
18
|
children,
|
|
19
19
|
classNames
|
|
20
|
-
}: BreadcrumbsProps):
|
|
20
|
+
}: BreadcrumbsProps): react_jsx_runtime4.JSX.Element;
|
|
21
21
|
Item: {
|
|
22
22
|
({
|
|
23
23
|
children
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { TabsListProps } from "./TabsList.js";
|
|
2
2
|
import { TabsTabProps } from "./TabsTab.js";
|
|
3
3
|
import { TabsPanelProps } from "./TabsPanel.js";
|
|
4
|
-
import * as
|
|
4
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
5
|
import React from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/navigation/tabs/Tabs.d.ts
|
|
@@ -18,14 +18,14 @@ declare const Tabs: {
|
|
|
18
18
|
classNames,
|
|
19
19
|
children,
|
|
20
20
|
...props
|
|
21
|
-
}: TabsProps):
|
|
21
|
+
}: TabsProps): react_jsx_runtime0.JSX.Element;
|
|
22
22
|
displayName: string;
|
|
23
23
|
List: {
|
|
24
24
|
({
|
|
25
25
|
classNames,
|
|
26
26
|
children,
|
|
27
27
|
...props
|
|
28
|
-
}: TabsListProps):
|
|
28
|
+
}: TabsListProps): react_jsx_runtime0.JSX.Element;
|
|
29
29
|
displayName: string;
|
|
30
30
|
};
|
|
31
31
|
Tab: {
|
|
@@ -35,7 +35,7 @@ declare const Tabs: {
|
|
|
35
35
|
endSlot,
|
|
36
36
|
children,
|
|
37
37
|
...props
|
|
38
|
-
}: TabsTabProps):
|
|
38
|
+
}: TabsTabProps): react_jsx_runtime0.JSX.Element;
|
|
39
39
|
displayName: string;
|
|
40
40
|
};
|
|
41
41
|
Panel: {
|
|
@@ -43,7 +43,7 @@ declare const Tabs: {
|
|
|
43
43
|
classNames,
|
|
44
44
|
children,
|
|
45
45
|
...props
|
|
46
|
-
}: TabsPanelProps):
|
|
46
|
+
}: TabsPanelProps): react_jsx_runtime0.JSX.Element;
|
|
47
47
|
displayName: string;
|
|
48
48
|
};
|
|
49
49
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.82",
|
|
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.82",
|
|
30
|
+
"@mage-ui/styled-system": "0.0.82"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@hookform/resolvers": "^5.2.2",
|