@xanui/ui 1.1.25 → 1.1.27
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/Datatable/Table.js +1 -1
- package/Datatable/Table.js.map +1 -1
- package/Datatable/Table.mjs +1 -1
- package/Datatable/Table.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/Datatable/Table.js
CHANGED
|
@@ -15,7 +15,7 @@ const TableArea = (props) => {
|
|
|
15
15
|
}
|
|
16
16
|
}, children: rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => {
|
|
17
17
|
let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
|
|
18
|
-
return jsxRuntime.jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id
|
|
18
|
+
return jsxRuntime.jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), `dt-row-${row.id}-${idx}`);
|
|
19
19
|
}) })] })));
|
|
20
20
|
};
|
|
21
21
|
|
package/Datatable/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n let {\n rows,\n renderRow,\n state,\n update,\n slotProps\n } = props\n\n return (\n <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n <TableHead {...props} update={update} state={state} />\n <TableBody\n sx={{\n '& tr:last-child td': {\n borderBottom: 0\n }\n }}\n >\n {\n rows?.map((row: any, idx) => {\n let _row = renderRow ? renderRow({ ...row }, state) : row\n return <Row\n key={row.id
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n let {\n rows,\n renderRow,\n state,\n update,\n slotProps\n } = props\n\n return (\n <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n <TableHead {...props} update={update} state={state} />\n <TableBody\n sx={{\n '& tr:last-child td': {\n borderBottom: 0\n }\n }}\n >\n {\n rows?.map((row: any, idx) => {\n let _row = renderRow ? renderRow({ ...row }, state) : row\n return <Row\n key={`dt-row-${row.id}-${idx}`}\n rawRow={row}\n row={_row}\n {...props}\n update={update}\n state={state}\n />\n })\n }\n </TableBody>\n </Table>\n )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;;;AAQA;AACG;AAQA;AAKY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}
|
package/Datatable/Table.mjs
CHANGED
|
@@ -13,7 +13,7 @@ const TableArea = (props) => {
|
|
|
13
13
|
}
|
|
14
14
|
}, children: rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => {
|
|
15
15
|
let _row = renderRow ? renderRow(Object.assign({}, row), state) : row;
|
|
16
|
-
return jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), row.id
|
|
16
|
+
return jsx(Row, Object.assign({ rawRow: row, row: _row }, props, { update: update, state: state }), `dt-row-${row.id}-${idx}`);
|
|
17
17
|
}) })] })));
|
|
18
18
|
};
|
|
19
19
|
|
package/Datatable/Table.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.mjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n let {\n rows,\n renderRow,\n state,\n update,\n slotProps\n } = props\n\n return (\n <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n <TableHead {...props} update={update} state={state} />\n <TableBody\n sx={{\n '& tr:last-child td': {\n borderBottom: 0\n }\n }}\n >\n {\n rows?.map((row: any, idx) => {\n let _row = renderRow ? renderRow({ ...row }, state) : row\n return <Row\n key={row.id
|
|
1
|
+
{"version":3,"file":"Table.mjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\n\nimport TableHead from './TableHead'\nimport Table from '../Table'\nimport TableBody from '../TableBody'\nimport Row from './Row'\nimport { DatatablePropsWithState } from './types';\n\nconst TableArea = (props: DatatablePropsWithState) => {\n let {\n rows,\n renderRow,\n state,\n update,\n slotProps\n } = props\n\n return (\n <Table width=\"100%\" border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\n <TableHead {...props} update={update} state={state} />\n <TableBody\n sx={{\n '& tr:last-child td': {\n borderBottom: 0\n }\n }}\n >\n {\n rows?.map((row: any, idx) => {\n let _row = renderRow ? renderRow({ ...row }, state) : row\n return <Row\n key={`dt-row-${row.id}-${idx}`}\n rawRow={row}\n row={_row}\n {...props}\n update={update}\n state={state}\n />\n })\n }\n </TableBody>\n </Table>\n )\n}\n\nexport default TableArea"],"names":[],"mappings":";;;;;;;AAQA;AACG;AAQA;AAKY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}
|
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;;"}
|