@xanui/ui 1.1.24 → 1.1.26
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/Badge/index.d.ts +1 -1
- package/Badge/index.js +13 -14
- package/Badge/index.js.map +1 -1
- package/Badge/index.mjs +13 -14
- package/Badge/index.mjs.map +1 -1
- package/Select/index.d.ts +3 -0
- package/Select/index.js +12 -4
- package/Select/index.js.map +1 -1
- package/Select/index.mjs +12 -4
- package/Select/index.mjs.map +1 -1
- package/package.json +1 -1
package/Badge/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
|
|
|
2
2
|
import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, TransitionProps } from '@xanui/core';
|
|
3
3
|
|
|
4
4
|
type BadgeProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "baseClass" | "content"> & {
|
|
5
|
-
content?: useBreakpointPropsType<number | ReactElement>;
|
|
5
|
+
content?: useBreakpointPropsType<number | string | ReactElement>;
|
|
6
6
|
color?: useBreakpointPropsType<UseColorTemplateColor>;
|
|
7
7
|
placement?: useBreakpointPropsType<"left-top" | "left-bottom" | "right-top" | "right-bottom">;
|
|
8
8
|
visible?: useBreakpointPropsType<boolean>;
|
package/Badge/index.js
CHANGED
|
@@ -65,6 +65,17 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
65
65
|
_css.transform = translate;
|
|
66
66
|
}
|
|
67
67
|
if (!isReactElement) {
|
|
68
|
+
_css.userSelect = "none";
|
|
69
|
+
_css.pointerEvents = "none";
|
|
70
|
+
_css.fontSize = "small";
|
|
71
|
+
_css.lineHeight = 1;
|
|
72
|
+
_css.fontWeight = 500;
|
|
73
|
+
_css.radius = 2;
|
|
74
|
+
if (typeof content === 'number') {
|
|
75
|
+
if (content > 99) {
|
|
76
|
+
content = "99+";
|
|
77
|
+
}
|
|
78
|
+
}
|
|
68
79
|
if (content !== undefined) {
|
|
69
80
|
_css.minWidth = 16;
|
|
70
81
|
_css.height = 16;
|
|
@@ -79,19 +90,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
79
90
|
else {
|
|
80
91
|
template = {};
|
|
81
92
|
}
|
|
82
|
-
const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: {
|
|
83
|
-
position: "absolute",
|
|
84
|
-
zIndex: 1,
|
|
85
|
-
radius: 2,
|
|
86
|
-
display: 'flex',
|
|
87
|
-
justifyContent: "center",
|
|
88
|
-
alignItems: 'center',
|
|
89
|
-
fontWeight: 500,
|
|
90
|
-
fontSize: 11,
|
|
91
|
-
userSelect: "none",
|
|
92
|
-
pointerEvents: "none",
|
|
93
|
-
lineHeight: 1,
|
|
94
|
-
} }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content }));
|
|
93
|
+
const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.primary), _css), children: content }));
|
|
95
94
|
return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsxRuntime.jsx(core.Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
|
|
96
95
|
return {
|
|
97
96
|
from: {
|
|
@@ -103,7 +102,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
103
102
|
transform: `scale(1) ${translate}`.trim(),
|
|
104
103
|
},
|
|
105
104
|
};
|
|
106
|
-
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children:
|
|
105
|
+
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: _badge }), children] })));
|
|
107
106
|
});
|
|
108
107
|
|
|
109
108
|
module.exports = Badge;
|
package/Badge/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | string | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n _css.userSelect = \"none\"\n _css.pointerEvents = \"none\"\n _css.fontSize = \"small\"\n _css.lineHeight = 1\n _css.fontWeight = 500\n _css.radius = 2\n\n if (typeof content === 'number') {\n if (content > 99) {\n content = \"99+\"\n }\n }\n\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n display: 'flex',\n justifyContent: \"center\",\n alignItems: 'center',\n ...template.primary,\n ..._css,\n }}\n >\n {content}\n </Tag>\n\n return (\n <Tag\n {...props}\n position=\"relative\"\n display=\"inline-block\"\n baseClass='badge'\n ref={ref}\n >\n {\n !disableTransition ? (<Transition\n open={content !== undefined && visible}\n {...slotProps?.transition}\n variant={() => {\n return {\n from: {\n opacity: 0,\n transform: `scale(0) ${translate}`.trim(),\n },\n to: {\n opacity: 1,\n transform: `scale(1) ${translate}`.trim(),\n },\n }\n }}\n ref={refs?.transition}\n >\n {_badge}\n </Transition>) : <>{_badge}</>\n }\n\n {children}\n </Tag>\n )\n})\n\nexport default Badge\n\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag","_jsxs","Transition","_Fragment"],"mappings":"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"}
|
package/Badge/index.mjs
CHANGED
|
@@ -63,6 +63,17 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
63
63
|
_css.transform = translate;
|
|
64
64
|
}
|
|
65
65
|
if (!isReactElement) {
|
|
66
|
+
_css.userSelect = "none";
|
|
67
|
+
_css.pointerEvents = "none";
|
|
68
|
+
_css.fontSize = "small";
|
|
69
|
+
_css.lineHeight = 1;
|
|
70
|
+
_css.fontWeight = 500;
|
|
71
|
+
_css.radius = 2;
|
|
72
|
+
if (typeof content === 'number') {
|
|
73
|
+
if (content > 99) {
|
|
74
|
+
content = "99+";
|
|
75
|
+
}
|
|
76
|
+
}
|
|
66
77
|
if (content !== undefined) {
|
|
67
78
|
_css.minWidth = 16;
|
|
68
79
|
_css.height = 16;
|
|
@@ -77,19 +88,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
77
88
|
else {
|
|
78
89
|
template = {};
|
|
79
90
|
}
|
|
80
|
-
const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: {
|
|
81
|
-
position: "absolute",
|
|
82
|
-
zIndex: 1,
|
|
83
|
-
radius: 2,
|
|
84
|
-
display: 'flex',
|
|
85
|
-
justifyContent: "center",
|
|
86
|
-
alignItems: 'center',
|
|
87
|
-
fontWeight: 500,
|
|
88
|
-
fontSize: 11,
|
|
89
|
-
userSelect: "none",
|
|
90
|
-
pointerEvents: "none",
|
|
91
|
-
lineHeight: 1,
|
|
92
|
-
} }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content }));
|
|
91
|
+
const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.primary), _css), children: content }));
|
|
93
92
|
return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsx(Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
|
|
94
93
|
return {
|
|
95
94
|
from: {
|
|
@@ -101,7 +100,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
101
100
|
transform: `scale(1) ${translate}`.trim(),
|
|
102
101
|
},
|
|
103
102
|
};
|
|
104
|
-
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsx(Fragment, { children:
|
|
103
|
+
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsx(Fragment, { children: _badge }), children] })));
|
|
105
104
|
});
|
|
106
105
|
|
|
107
106
|
export { Badge as default };
|
package/Badge/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | string | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n _css.userSelect = \"none\"\n _css.pointerEvents = \"none\"\n _css.fontSize = \"small\"\n _css.lineHeight = 1\n _css.fontWeight = 500\n _css.radius = 2\n\n if (typeof content === 'number') {\n if (content > 99) {\n content = \"99+\"\n }\n }\n\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n display: 'flex',\n justifyContent: \"center\",\n alignItems: 'center',\n ...template.primary,\n ..._css,\n }}\n >\n {content}\n </Tag>\n\n return (\n <Tag\n {...props}\n position=\"relative\"\n display=\"inline-block\"\n baseClass='badge'\n ref={ref}\n >\n {\n !disableTransition ? (<Transition\n open={content !== undefined && visible}\n {...slotProps?.transition}\n variant={() => {\n return {\n from: {\n opacity: 0,\n transform: `scale(0) ${translate}`.trim(),\n },\n to: {\n opacity: 1,\n transform: `scale(1) ${translate}`.trim(),\n },\n }\n }}\n ref={refs?.transition}\n >\n {_badge}\n </Transition>) : <>{_badge}</>\n }\n\n {children}\n </Tag>\n )\n})\n\nexport default Badge\n\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
package/Select/index.d.ts
CHANGED
|
@@ -13,6 +13,9 @@ type SelectProps = {
|
|
|
13
13
|
color?: useBreakpointPropsType<UseColorTemplateColor>;
|
|
14
14
|
variant?: useBreakpointPropsType<UseColorTemplateType>;
|
|
15
15
|
fullWidth?: boolean;
|
|
16
|
+
name?: string;
|
|
17
|
+
error?: InputProps['error'];
|
|
18
|
+
helperText?: InputProps['helperText'];
|
|
16
19
|
refs?: {
|
|
17
20
|
input?: React.Ref<any>;
|
|
18
21
|
menu?: React.Ref<any>;
|
package/Select/index.js
CHANGED
|
@@ -14,7 +14,7 @@ var core = require('@xanui/core');
|
|
|
14
14
|
|
|
15
15
|
const Select = React.forwardRef((_a, ref) => {
|
|
16
16
|
var _b, _c, _d, _e, _f, _g;
|
|
17
|
-
var { onChange, value, children, refs } = _a, props = tslib.__rest(_a, ["onChange", "value", "children", "refs"]);
|
|
17
|
+
var { onChange, value, children, error, helperText, name, refs } = _a, props = tslib.__rest(_a, ["onChange", "value", "children", "error", "helperText", "name", "refs"]);
|
|
18
18
|
let [{ slotProps, color, variant, fullWidth, placeholder }] = core.useInterface("Select", props, {});
|
|
19
19
|
color !== null && color !== void 0 ? color : (color = "brand");
|
|
20
20
|
variant !== null && variant !== void 0 ? variant : (variant = "fill");
|
|
@@ -42,9 +42,17 @@ const Select = React.forwardRef((_a, ref) => {
|
|
|
42
42
|
}, [children, value]);
|
|
43
43
|
const mergeRefs = core.useMergeRefs(ref, conRef);
|
|
44
44
|
const toggleMenu = () => setTarget(target ? null : conRef.current);
|
|
45
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
|
|
46
|
-
rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick:
|
|
47
|
-
|
|
45
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1, { flexDirection: "row", component: "span", children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
|
|
46
|
+
rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: () => {
|
|
47
|
+
if (!target) {
|
|
48
|
+
toggleMenu();
|
|
49
|
+
}
|
|
50
|
+
} })
|
|
51
|
+
} })), jsxRuntime.jsx(index$2, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.slotProps), { content: Object.assign(Object.assign({ mt: .5 }, (_f = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _f === void 0 ? void 0 : _f.content), { width: conRef && ((_g = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _g === void 0 ? void 0 : _g.clientWidth) }) }), onClickOutside: (e) => {
|
|
52
|
+
if (conRef.current.contains(e.target))
|
|
53
|
+
return;
|
|
54
|
+
toggleMenu();
|
|
55
|
+
}, children: jsxRuntime.jsx(index$3, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
|
|
48
56
|
});
|
|
49
57
|
|
|
50
58
|
module.exports = Select;
|
package/Select/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n placeholder?: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n fullWidth?: boolean;\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n placeholder={placeholder}\n fullWidth={fullWidth}\n {...slotProps?.input}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: toggleMenu,\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={toggleMenu}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n placeholder?: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n fullWidth?: boolean;\n name?: string;\n error?: InputProps['error'];\n helperText?: InputProps['helperText'];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n placeholder={placeholder}\n fullWidth={fullWidth}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAwBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAahB;;"}
|
package/Select/index.mjs
CHANGED
|
@@ -12,7 +12,7 @@ import { useInterface, useMergeRefs } from '@xanui/core';
|
|
|
12
12
|
|
|
13
13
|
const Select = React.forwardRef((_a, ref) => {
|
|
14
14
|
var _b, _c, _d, _e, _f, _g;
|
|
15
|
-
var { onChange, value, children, refs } = _a, props = __rest(_a, ["onChange", "value", "children", "refs"]);
|
|
15
|
+
var { onChange, value, children, error, helperText, name, refs } = _a, props = __rest(_a, ["onChange", "value", "children", "error", "helperText", "name", "refs"]);
|
|
16
16
|
let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface("Select", props, {});
|
|
17
17
|
color !== null && color !== void 0 ? color : (color = "brand");
|
|
18
18
|
variant !== null && variant !== void 0 ? variant : (variant = "fill");
|
|
@@ -40,9 +40,17 @@ const Select = React.forwardRef((_a, ref) => {
|
|
|
40
40
|
}, [children, value]);
|
|
41
41
|
const mergeRefs = useMergeRefs(ref, conRef);
|
|
42
42
|
const toggleMenu = () => setTarget(target ? null : conRef.current);
|
|
43
|
-
return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
|
|
44
|
-
rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick:
|
|
45
|
-
|
|
43
|
+
return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ ref: mergeRefs, color: color, variant: variant === "soft" ? "fill" : variant, endIcon: jsxs(Stack, { flexDirection: "row", component: "span", children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] }), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder, fullWidth: fullWidth, error: error, helperText: helperText, name: name }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { refs: Object.assign({ input: refs === null || refs === void 0 ? void 0 : refs.input }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.refs), slotProps: {
|
|
44
|
+
rootContainer: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.container) || {})), { onClick: () => {
|
|
45
|
+
if (!target) {
|
|
46
|
+
toggleMenu();
|
|
47
|
+
}
|
|
48
|
+
} })
|
|
49
|
+
} })), jsx(Menu, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.menu, target: target, placement: "bottom-left" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: Object.assign(Object.assign({}, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.slotProps), { content: Object.assign(Object.assign({ mt: .5 }, (_f = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _f === void 0 ? void 0 : _f.content), { width: conRef && ((_g = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _g === void 0 ? void 0 : _g.clientWidth) }) }), onClickOutside: (e) => {
|
|
50
|
+
if (conRef.current.contains(e.target))
|
|
51
|
+
return;
|
|
52
|
+
toggleMenu();
|
|
53
|
+
}, children: jsx(List, Object.assign({ ref: refs === null || refs === void 0 ? void 0 : refs.list }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant, children: childs })) }))] }));
|
|
46
54
|
});
|
|
47
55
|
|
|
48
56
|
export { Select as default };
|
package/Select/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n placeholder?: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n fullWidth?: boolean;\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n placeholder={placeholder}\n fullWidth={fullWidth}\n {...slotProps?.input}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: toggleMenu,\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={toggleMenu}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { UseColorTemplateColor, UseColorTemplateType, useInterface, useBreakpointPropsType, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n placeholder?: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n fullWidth?: boolean;\n name?: string;\n error?: InputProps['error'];\n helperText?: InputProps['helperText'];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, fullWidth, placeholder }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n placeholder={placeholder}\n fullWidth={fullWidth}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AAqCA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAwBgB;;AAMY;;AAER;AAEP;;;AAiBG;AACJ;AAahB;;"}
|