@xanui/ui 1.1.10 → 1.1.12
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/Accordion/{index.cjs → index.js} +3 -17
- package/Accordion/index.js.map +1 -0
- package/Accordion/index.mjs +2 -14
- package/Accordion/index.mjs.map +1 -1
- package/Alert/{index.cjs → index.js} +5 -23
- package/Alert/index.js.map +1 -0
- package/Alert/index.mjs +2 -18
- package/Alert/index.mjs.map +1 -1
- package/Avatar/{index.cjs → index.js} +2 -13
- package/Avatar/index.js.map +1 -0
- package/Avatar/index.mjs +2 -11
- package/Avatar/index.mjs.map +1 -1
- package/Badge/{index.cjs → index.js} +2 -12
- package/Badge/index.js.map +1 -0
- package/Badge/index.mjs +2 -10
- package/Badge/index.mjs.map +1 -1
- package/Box/index.js +4 -0
- package/Box/index.js.map +1 -0
- package/Box/index.mjs +2 -10
- package/Box/index.mjs.map +1 -1
- package/Button/{index.cjs → index.js} +4 -16
- package/Button/index.js.map +1 -0
- package/Button/index.mjs +2 -12
- package/Button/index.mjs.map +1 -1
- package/ButtonGroup/{index.cjs → index.js} +2 -12
- package/ButtonGroup/index.js.map +1 -0
- package/ButtonGroup/index.mjs +2 -10
- package/ButtonGroup/index.mjs.map +1 -1
- package/Calendar/{index.cjs → index.js} +16 -34
- package/Calendar/index.js.map +1 -0
- package/Calendar/index.mjs +2 -18
- package/Calendar/index.mjs.map +1 -1
- package/CalendarInput/index.js +11 -0
- package/CalendarInput/index.js.map +1 -0
- package/CalendarInput/index.mjs +2 -18
- package/CalendarInput/index.mjs.map +1 -1
- package/Checkbox/{index.cjs → index.js} +2 -15
- package/Checkbox/index.js.map +1 -0
- package/Checkbox/index.mjs +2 -13
- package/Checkbox/index.mjs.map +1 -1
- package/Chip/{index.cjs → index.js} +3 -14
- package/Chip/index.js.map +1 -0
- package/Chip/index.mjs +2 -11
- package/Chip/index.mjs.map +1 -1
- package/CircleProgress/{index.cjs → index.js} +2 -12
- package/CircleProgress/index.js.map +1 -0
- package/CircleProgress/index.mjs +2 -10
- package/CircleProgress/index.mjs.map +1 -1
- package/ClickOutside/{index.cjs → index.js} +2 -12
- package/ClickOutside/index.js.map +1 -0
- package/ClickOutside/index.mjs +2 -10
- package/ClickOutside/index.mjs.map +1 -1
- package/Collaps/{index.cjs → index.js} +2 -12
- package/Collaps/index.js.map +1 -0
- package/Collaps/index.mjs +2 -10
- package/Collaps/index.mjs.map +1 -1
- package/Container/{index.cjs → index.js} +2 -12
- package/Container/index.js.map +1 -0
- package/Container/index.mjs +2 -10
- package/Container/index.mjs.map +1 -1
- package/Datatable/FilterBox.js +19 -0
- package/Datatable/FilterBox.js.map +1 -0
- package/Datatable/FilterBox.mjs +2 -14
- package/Datatable/FilterBox.mjs.map +1 -1
- package/Datatable/{Row.cjs → Row.js} +7 -24
- package/Datatable/Row.js.map +1 -0
- package/Datatable/Row.mjs +2 -17
- package/Datatable/Row.mjs.map +1 -1
- package/Datatable/SelectedBox.js +11 -0
- package/Datatable/SelectedBox.js.map +1 -0
- package/Datatable/SelectedBox.mjs +2 -11
- package/Datatable/SelectedBox.mjs.map +1 -1
- package/Datatable/Table.js +11 -0
- package/Datatable/Table.js.map +1 -0
- package/Datatable/Table.mjs +2 -11
- package/Datatable/Table.mjs.map +1 -1
- package/Datatable/{TableHead.cjs → TableHead.js} +5 -18
- package/Datatable/TableHead.js.map +1 -0
- package/Datatable/TableHead.mjs +2 -13
- package/Datatable/TableHead.mjs.map +1 -1
- package/Datatable/index.js +35 -0
- package/Datatable/index.js.map +1 -0
- package/Datatable/index.mjs +2 -15
- package/Datatable/index.mjs.map +1 -1
- package/Divider/{index.cjs → index.js} +2 -12
- package/Divider/index.js.map +1 -0
- package/Divider/index.mjs +2 -10
- package/Divider/index.mjs.map +1 -1
- package/Drawer/{index.cjs → index.js} +4 -15
- package/Drawer/index.js.map +1 -0
- package/Drawer/index.mjs +2 -11
- package/Drawer/index.mjs.map +1 -1
- package/Form/{index.cjs → index.js} +2 -12
- package/Form/index.js.map +1 -0
- package/Form/index.mjs +2 -10
- package/Form/index.mjs.map +1 -1
- package/GridContainer/{index.cjs → index.js} +2 -12
- package/GridContainer/index.js.map +1 -0
- package/GridContainer/index.mjs +2 -10
- package/GridContainer/index.mjs.map +1 -1
- package/GridItem/{index.cjs → index.js} +2 -12
- package/GridItem/index.js.map +1 -0
- package/GridItem/index.mjs +2 -10
- package/GridItem/index.mjs.map +1 -1
- package/IconButton/{index.cjs → index.js} +3 -14
- package/IconButton/index.js.map +1 -0
- package/IconButton/index.mjs +2 -11
- package/IconButton/index.mjs.map +1 -1
- package/Image/{index.cjs → index.js} +2 -12
- package/Image/index.js.map +1 -0
- package/Image/index.mjs +2 -10
- package/Image/index.mjs.map +1 -1
- package/Input/{index.cjs → index.js} +3 -14
- package/Input/index.js.map +1 -0
- package/Input/index.mjs +3 -12
- package/Input/index.mjs.map +1 -1
- package/Label/{index.cjs → index.js} +2 -12
- package/Label/index.js.map +1 -0
- package/Label/index.mjs +2 -10
- package/Label/index.mjs.map +1 -1
- package/Layer/{index.cjs → index.js} +4 -16
- package/Layer/index.js.map +1 -0
- package/Layer/index.mjs +2 -12
- package/Layer/index.mjs.map +1 -1
- package/LineProgress/{index.cjs → index.js} +2 -12
- package/LineProgress/index.js.map +1 -0
- package/LineProgress/index.mjs +2 -10
- package/LineProgress/index.mjs.map +1 -1
- package/List/{index.cjs → index.js} +2 -12
- package/List/index.js.map +1 -0
- package/List/index.mjs +2 -10
- package/List/index.mjs.map +1 -1
- package/ListItem/{index.cjs → index.js} +3 -14
- package/ListItem/index.js.map +1 -0
- package/ListItem/index.mjs +2 -11
- package/ListItem/index.mjs.map +1 -1
- package/LoadingBox/{index.cjs → index.js} +3 -14
- package/LoadingBox/index.js.map +1 -0
- package/LoadingBox/index.mjs +2 -11
- package/LoadingBox/index.mjs.map +1 -1
- package/Menu/{index.cjs → index.js} +3 -15
- package/Menu/index.js.map +1 -0
- package/Menu/index.mjs +2 -12
- package/Menu/index.mjs.map +1 -1
- package/Modal/{index.cjs → index.js} +3 -14
- package/Modal/index.js.map +1 -0
- package/Modal/index.mjs +2 -11
- package/Modal/index.mjs.map +1 -1
- package/NoSSR/index.js +7 -0
- package/NoSSR/index.js.map +1 -0
- package/NoSSR/index.mjs +2 -7
- package/NoSSR/index.mjs.map +1 -1
- package/Option/index.js +4 -0
- package/Option/index.js.map +1 -0
- package/Option/index.mjs +2 -10
- package/Option/index.mjs.map +1 -1
- package/Paper/{index.cjs → index.js} +2 -12
- package/Paper/index.js.map +1 -0
- package/Paper/index.mjs +2 -10
- package/Paper/index.mjs.map +1 -1
- package/Portal/{index.cjs → index.js} +2 -12
- package/Portal/index.js.map +1 -0
- package/Portal/index.mjs +2 -10
- package/Portal/index.mjs.map +1 -1
- package/Radio/index.js +4 -0
- package/Radio/index.js.map +1 -0
- package/Radio/index.mjs +2 -12
- package/Radio/index.mjs.map +1 -1
- package/Scrollbar/{index.cjs → index.js} +2 -12
- package/Scrollbar/index.js.map +1 -0
- package/Scrollbar/index.mjs +2 -10
- package/Scrollbar/index.mjs.map +1 -1
- package/Select/{index.cjs → index.js} +5 -21
- package/Select/index.js.map +1 -0
- package/Select/index.mjs +2 -16
- package/Select/index.mjs.map +1 -1
- package/Stack/index.js +7 -0
- package/Stack/index.js.map +1 -0
- package/Stack/index.mjs +2 -10
- package/Stack/index.mjs.map +1 -1
- package/Switch/{index.cjs → index.js} +2 -12
- package/Switch/index.js.map +1 -0
- package/Switch/index.mjs +2 -10
- package/Switch/index.mjs.map +1 -1
- package/Tab/index.js +5 -0
- package/Tab/index.js.map +1 -0
- package/Tab/index.mjs +2 -11
- package/Tab/index.mjs.map +1 -1
- package/Table/{index.cjs → index.js} +3 -14
- package/Table/index.js.map +1 -0
- package/Table/index.mjs +2 -11
- package/Table/index.mjs.map +1 -1
- package/TableBody/index.js +4 -0
- package/TableBody/index.js.map +1 -0
- package/TableBody/index.mjs +2 -10
- package/TableBody/index.mjs.map +1 -1
- package/TableCell/{index.cjs → index.js} +2 -12
- package/TableCell/index.js.map +1 -0
- package/TableCell/index.mjs +2 -10
- package/TableCell/index.mjs.map +1 -1
- package/TableFooter/index.js +4 -0
- package/TableFooter/index.js.map +1 -0
- package/TableFooter/index.mjs +2 -10
- package/TableFooter/index.mjs.map +1 -1
- package/TableHead/index.js +4 -0
- package/TableHead/index.js.map +1 -0
- package/TableHead/index.mjs +2 -10
- package/TableHead/index.mjs.map +1 -1
- package/TablePagination/{index.cjs → index.js} +6 -22
- package/TablePagination/index.js.map +1 -0
- package/TablePagination/index.mjs +2 -16
- package/TablePagination/index.mjs.map +1 -1
- package/TableRow/index.js +4 -0
- package/TableRow/index.js.map +1 -0
- package/TableRow/index.mjs +2 -10
- package/TableRow/index.mjs.map +1 -1
- package/Tabs/{index.cjs → index.js} +2 -12
- package/Tabs/index.js.map +1 -0
- package/Tabs/index.mjs +2 -10
- package/Tabs/index.mjs.map +1 -1
- package/Text/{index.cjs → index.js} +2 -12
- package/Text/index.js.map +1 -0
- package/Text/index.mjs +2 -10
- package/Text/index.mjs.map +1 -1
- package/Toast/{index.cjs → index.js} +4 -17
- package/Toast/index.js.map +1 -0
- package/Toast/index.mjs +2 -13
- package/Toast/index.mjs.map +1 -1
- package/Tooltip/{index.cjs → index.js} +3 -13
- package/Tooltip/index.js.map +1 -0
- package/Tooltip/index.mjs +2 -10
- package/Tooltip/index.mjs.map +1 -1
- package/ViewBox/{index.cjs → index.js} +3 -14
- package/ViewBox/index.js.map +1 -0
- package/ViewBox/index.mjs +2 -11
- package/ViewBox/index.mjs.map +1 -1
- package/index.d.ts +55 -55
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.mjs +1 -56
- package/index.mjs.map +1 -1
- package/package.json +15 -8
- package/readme.md +104 -104
- package/useAlert/{index.cjs → index.js} +5 -18
- package/useAlert/index.js.map +1 -0
- package/useAlert/index.mjs +2 -13
- package/useAlert/index.mjs.map +1 -1
- package/useBlurCss/{index.cjs → index.js} +2 -10
- package/useBlurCss/index.js.map +1 -0
- package/useBlurCss/index.mjs +2 -8
- package/useBlurCss/index.mjs.map +1 -1
- package/useCorner/{index.cjs → index.js} +2 -7
- package/useCorner/index.js.map +1 -0
- package/useCorner/index.mjs +1 -4
- package/useCorner/index.mjs.map +1 -1
- package/useLayer/{index.cjs → index.js} +3 -13
- package/useLayer/index.js.map +1 -0
- package/useLayer/index.mjs +2 -10
- package/useLayer/index.mjs.map +1 -1
- package/useModal/{index.cjs → index.js} +3 -13
- package/useModal/index.js.map +1 -0
- package/useModal/index.mjs +2 -10
- package/useModal/index.mjs.map +1 -1
- package/Accordion/index.cjs.map +0 -1
- package/Alert/index.cjs.map +0 -1
- package/Avatar/index.cjs.map +0 -1
- package/Badge/index.cjs.map +0 -1
- package/Box/index.cjs +0 -14
- package/Box/index.cjs.map +0 -1
- package/Button/index.cjs.map +0 -1
- package/ButtonGroup/index.cjs.map +0 -1
- package/Calendar/index.cjs.map +0 -1
- package/CalendarInput/index.cjs +0 -29
- package/CalendarInput/index.cjs.map +0 -1
- package/Checkbox/index.cjs.map +0 -1
- package/Chip/index.cjs.map +0 -1
- package/CircleProgress/index.cjs.map +0 -1
- package/ClickOutside/index.cjs.map +0 -1
- package/Collaps/index.cjs.map +0 -1
- package/Container/index.cjs.map +0 -1
- package/Datatable/FilterBox.cjs +0 -33
- package/Datatable/FilterBox.cjs.map +0 -1
- package/Datatable/Row.cjs.map +0 -1
- package/Datatable/SelectedBox.cjs +0 -22
- package/Datatable/SelectedBox.cjs.map +0 -1
- package/Datatable/Table.cjs +0 -22
- package/Datatable/Table.cjs.map +0 -1
- package/Datatable/TableHead.cjs.map +0 -1
- package/Datatable/index.cjs +0 -50
- package/Datatable/index.cjs.map +0 -1
- package/Divider/index.cjs.map +0 -1
- package/Drawer/index.cjs.map +0 -1
- package/Form/index.cjs.map +0 -1
- package/GridContainer/index.cjs.map +0 -1
- package/GridItem/index.cjs.map +0 -1
- package/IconButton/index.cjs.map +0 -1
- package/Image/index.cjs.map +0 -1
- package/Input/index.cjs.map +0 -1
- package/Label/index.cjs.map +0 -1
- package/Layer/index.cjs.map +0 -1
- package/LineProgress/index.cjs.map +0 -1
- package/List/index.cjs.map +0 -1
- package/ListItem/index.cjs.map +0 -1
- package/LoadingBox/index.cjs.map +0 -1
- package/Menu/index.cjs.map +0 -1
- package/Modal/index.cjs.map +0 -1
- package/NoSSR/index.cjs +0 -14
- package/NoSSR/index.cjs.map +0 -1
- package/Option/index.cjs +0 -14
- package/Option/index.cjs.map +0 -1
- package/Paper/index.cjs.map +0 -1
- package/Portal/index.cjs.map +0 -1
- package/Radio/index.cjs +0 -16
- package/Radio/index.cjs.map +0 -1
- package/Scrollbar/index.cjs.map +0 -1
- package/Select/index.cjs.map +0 -1
- package/Stack/index.cjs +0 -17
- package/Stack/index.cjs.map +0 -1
- package/Switch/index.cjs.map +0 -1
- package/Tab/index.cjs +0 -16
- package/Tab/index.cjs.map +0 -1
- package/Table/index.cjs.map +0 -1
- package/TableBody/index.cjs +0 -14
- package/TableBody/index.cjs.map +0 -1
- package/TableCell/index.cjs.map +0 -1
- package/TableFooter/index.cjs +0 -14
- package/TableFooter/index.cjs.map +0 -1
- package/TableHead/index.cjs +0 -14
- package/TableHead/index.cjs.map +0 -1
- package/TablePagination/index.cjs.map +0 -1
- package/TableRow/index.cjs +0 -14
- package/TableRow/index.cjs.map +0 -1
- package/Tabs/index.cjs.map +0 -1
- package/Text/index.cjs.map +0 -1
- package/Toast/index.cjs.map +0 -1
- package/Tooltip/index.cjs.map +0 -1
- package/ViewBox/index.cjs.map +0 -1
- package/index.cjs +0 -116
- package/index.cjs.map +0 -1
- package/useAlert/index.cjs.map +0 -1
- package/useBlurCss/index.cjs.map +0 -1
- package/useCorner/index.cjs.map +0 -1
- package/useLayer/index.cjs.map +0 -1
- package/useModal/index.cjs.map +0 -1
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var core = require('@xanui/core');
|
|
7
|
-
var index = require('../Text/index.cjs');
|
|
8
|
-
|
|
9
|
-
const ListItem = React.forwardRef((_a, ref) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Text/index.js');const ListItem = React.forwardRef((_a, ref) => {
|
|
10
2
|
var { children, startIcon, endIcon, subtitle } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle"]);
|
|
11
3
|
let [_b] = core.useInterface("ListItem", rest, {}), { selected } = _b, props = tslib.__rest(_b, ["selected"]);
|
|
12
4
|
const _p = {};
|
|
@@ -30,8 +22,5 @@ const ListItem = React.forwardRef((_a, ref) => {
|
|
|
30
22
|
p: 1,
|
|
31
23
|
whiteSpace: "nowrap",
|
|
32
24
|
flexShrink: "0",
|
|
33
|
-
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
module.exports = ListItem;
|
|
37
|
-
//# sourceMappingURL=index.cjs.map
|
|
25
|
+
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index.default, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index.default, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
26
|
+
});exports.default=ListItem;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Text"],"mappings":"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"}
|
package/ListItem/index.mjs
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
-
import Text from '../Text/index.mjs';
|
|
6
|
-
|
|
7
|
-
const ListItem = React.forwardRef((_a, ref) => {
|
|
1
|
+
import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';import Text from'../Text/index.mjs';const ListItem = React.forwardRef((_a, ref) => {
|
|
8
2
|
var { children, startIcon, endIcon, subtitle } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle"]);
|
|
9
3
|
let [_b] = useInterface("ListItem", rest, {}), { selected } = _b, props = __rest(_b, ["selected"]);
|
|
10
4
|
const _p = {};
|
|
@@ -29,7 +23,4 @@ const ListItem = React.forwardRef((_a, ref) => {
|
|
|
29
23
|
whiteSpace: "nowrap",
|
|
30
24
|
flexShrink: "0",
|
|
31
25
|
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxs(Tag, { flex: 1, children: [jsx(Text, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsx(Text, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsx(Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
export { ListItem as default };
|
|
35
|
-
//# sourceMappingURL=index.mjs.map
|
|
26
|
+
});export{ListItem as default};//# sourceMappingURL=index.mjs.map
|
package/ListItem/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var core = require('@xanui/core');
|
|
7
|
-
var index = require('../CircleProgress/index.cjs');
|
|
8
|
-
|
|
9
|
-
const LoadingBox = React.forwardRef((_a, ref) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../CircleProgress/index.js');const LoadingBox = React.forwardRef((_a, ref) => {
|
|
10
2
|
var _b;
|
|
11
3
|
var { children } = _a, props = tslib.__rest(_a, ["children"]);
|
|
12
4
|
let [_c] = core.useInterface("LoadingBox", props, {}), { loading, color, slotProps } = _c, rest = tslib.__rest(_c, ["loading", "color", "slotProps"]);
|
|
@@ -25,8 +17,5 @@ const LoadingBox = React.forwardRef((_a, ref) => {
|
|
|
25
17
|
display: "flex",
|
|
26
18
|
justifyContent: "center",
|
|
27
19
|
alignItems: "center",
|
|
28
|
-
}, children: jsxRuntime.jsx(index, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsxRuntime.jsx(core.Tag, { disabled: loading, children: children })] })));
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
module.exports = LoadingBox;
|
|
32
|
-
//# sourceMappingURL=index.cjs.map
|
|
20
|
+
}, children: jsxRuntime.jsx(index.default, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsxRuntime.jsx(core.Tag, { disabled: loading, children: children })] })));
|
|
21
|
+
});exports.default=LoadingBox;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n loading?: boolean;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n slotProps?: {\n CircleProgress?: Omit<CircleProgressProps, \"value\">\n }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n const _p: any = {}\n if (color) _p.color = color\n const p: any = useBreakpointProps(_p)\n color = p.color ?? \"brand\"\n\n return (\n <Tag\n baseClass='loading-box'\n {...rest}\n sxr={{\n position: \"relative\",\n display: \"inline-block\",\n overflow: \"hidden\",\n ...((rest as any).sx || {})\n }}\n ref={ref}\n >\n {loading && <Tag\n baseClass=\"loading-box-container\"\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n color=\"brand\"\n hideTrack\n {...slotProps?.CircleProgress}\n />\n </Tag>}\n <Tag\n disabled={loading}\n >\n {children}\n </Tag>\n </Tag>\n )\n})\n\nexport default LoadingBox\n\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","CircleProgress"],"mappings":"wOAeA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACzF,IAAI,CAAA,EAAA,CAAA,GAA2CC,iBAAY,CAAM,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,EAApF,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAD,YAAA,CAAA,EAAA,EAApC,CAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAsC,CAA8C;IACzF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAE1B,QACIC,gBAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,aAAa,IACnB,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,KACb,IAAY,CAAC,EAAE,IAAI,EAAE,EAAC,EAE/B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAIC,eAACD,QAAG,EAAA,EACZ,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,QAAA,EAEDC,cAAA,CAACC,aAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAA,IAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAA,CAC/B,EAAA,CACA,EACND,cAAA,CAACD,QAAG,EAAA,EACA,QAAQ,EAAE,OAAO,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACP,CAAA,EAAA,CAAA,CACJ;AAEd,CAAC"}
|
package/LoadingBox/index.mjs
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
-
import CircleProgress from '../CircleProgress/index.mjs';
|
|
6
|
-
|
|
7
|
-
const LoadingBox = React.forwardRef((_a, ref) => {
|
|
1
|
+
import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';import CircleProgress from'../CircleProgress/index.mjs';const LoadingBox = React.forwardRef((_a, ref) => {
|
|
8
2
|
var _b;
|
|
9
3
|
var { children } = _a, props = __rest(_a, ["children"]);
|
|
10
4
|
let [_c] = useInterface("LoadingBox", props, {}), { loading, color, slotProps } = _c, rest = __rest(_c, ["loading", "color", "slotProps"]);
|
|
@@ -24,7 +18,4 @@ const LoadingBox = React.forwardRef((_a, ref) => {
|
|
|
24
18
|
justifyContent: "center",
|
|
25
19
|
alignItems: "center",
|
|
26
20
|
}, children: jsx(CircleProgress, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsx(Tag, { disabled: loading, children: children })] })));
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
export { LoadingBox as default };
|
|
30
|
-
//# sourceMappingURL=index.mjs.map
|
|
21
|
+
});export{LoadingBox as default};//# sourceMappingURL=index.mjs.map
|
package/LoadingBox/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n loading?: boolean;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n slotProps?: {\n CircleProgress?: Omit<CircleProgressProps, \"value\">\n }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n const _p: any = {}\n if (color) _p.color = color\n const p: any = useBreakpointProps(_p)\n color = p.color ?? \"brand\"\n\n return (\n <Tag\n baseClass='loading-box'\n {...rest}\n sxr={{\n position: \"relative\",\n display: \"inline-block\",\n overflow: \"hidden\",\n ...((rest as any).sx || {})\n }}\n ref={ref}\n >\n {loading && <Tag\n baseClass=\"loading-box-container\"\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n color=\"brand\"\n hideTrack\n {...slotProps?.CircleProgress}\n />\n </Tag>}\n <Tag\n disabled={loading}\n >\n {children}\n </Tag>\n </Tag>\n )\n})\n\nexport default LoadingBox\n\n"],"names":["_jsxs","_jsx"],"mappings":"mNAeA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACzF,IAAI,CAAA,EAAA,CAAA,GAA2C,YAAY,CAAM,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,EAApF,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,EAApC,CAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAsC,CAA8C;IACzF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAE1B,QACIA,KAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,aAAa,IACnB,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,KACb,IAAY,CAAC,EAAE,IAAI,EAAE,EAAC,EAE/B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAIC,IAAC,GAAG,EAAA,EACZ,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,cAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAA,IAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAA,CAC/B,EAAA,CACA,EACNA,GAAA,CAAC,GAAG,EAAA,EACA,QAAQ,EAAE,OAAO,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACP,CAAA,EAAA,CAAA,CACJ;AAEd,CAAC"}
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var core = require('@xanui/core');
|
|
7
|
-
var index = require('../Portal/index.cjs');
|
|
8
|
-
var index$1 = require('../ClickOutside/index.cjs');
|
|
9
|
-
|
|
10
|
-
const placements = [
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Portal/index.js'),index$1=require('../ClickOutside/index.js');const placements = [
|
|
11
2
|
"top",
|
|
12
3
|
"top-left",
|
|
13
4
|
"top-right",
|
|
@@ -130,7 +121,7 @@ const Menu = (_a) => {
|
|
|
130
121
|
}, [closed, target, placement]);
|
|
131
122
|
if (closed)
|
|
132
123
|
return null;
|
|
133
|
-
return (jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(index$1, { onClickOutside: (e) => {
|
|
124
|
+
return (jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(index$1.default, { onClickOutside: (e) => {
|
|
134
125
|
if (e.target !== target) {
|
|
135
126
|
onClickOutside && onClickOutside(e);
|
|
136
127
|
}
|
|
@@ -139,7 +130,4 @@ const Menu = (_a) => {
|
|
|
139
130
|
setClosed(true);
|
|
140
131
|
(_b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _a === void 0 ? void 0 : _a.onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
141
132
|
}, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
module.exports = Menu;
|
|
145
|
-
//# sourceMappingURL=index.cjs.map
|
|
133
|
+
};exports.default=Menu;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n onClickOutside?: (e: MouseEvent) => void;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n let pos = computePosition(placement, menu, target);\n menu.style.top = pos.top + \"px\";\n menu.style.left = pos.left + \"px\";\n\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n menu.style.top = fallbackPos.top + \"px\";\n menu.style.left = fallbackPos.left + \"px\";\n if (!isOffScreen(menu)) return p;\n }\n }\n return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n const p = placeMenu(placement!, menuRef.current, target);\n setPlaced(p);\n }\n };\n\n updatePosition();\n\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return undefined;\n }, [closed, target, placement]);\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={200}\n easing=\"fast\"\n variant=\"grow\"\n {...slotProps?.transition}\n open={isOpen}\n onClosed={() => {\n setClosed(true);\n slotProps?.transition?.onClosed?.();\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":["__rest","useInterface","useBreakpointProps","useState","useRef","useEffect","_jsx","Portal","ClickOutside","Transition","Tag"],"mappings":"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"}
|
package/Menu/index.mjs
CHANGED
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useState, useRef, useEffect } from 'react';
|
|
4
|
-
import { useInterface, useBreakpointProps, Transition, Tag } from '@xanui/core';
|
|
5
|
-
import Portal from '../Portal/index.mjs';
|
|
6
|
-
import ClickOutside from '../ClickOutside/index.mjs';
|
|
7
|
-
|
|
8
|
-
const placements = [
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {useInterface,useBreakpointProps,Transition,Tag}from'@xanui/core';import Portal from'../Portal/index.mjs';import ClickOutside from'../ClickOutside/index.mjs';const placements = [
|
|
9
2
|
"top",
|
|
10
3
|
"top-left",
|
|
11
4
|
"top-right",
|
|
@@ -137,7 +130,4 @@ const Menu = (_a) => {
|
|
|
137
130
|
setClosed(true);
|
|
138
131
|
(_b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _a === void 0 ? void 0 : _a.onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
139
132
|
}, children: jsx(Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
export { Menu as default };
|
|
143
|
-
//# sourceMappingURL=index.mjs.map
|
|
133
|
+
};export{Menu as default};//# sourceMappingURL=index.mjs.map
|
package/Menu/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n | \"top\"\r\n | \"top-left\"\r\n | \"top-right\"\r\n | \"bottom\"\r\n | \"bottom-left\"\r\n | \"bottom-right\"\r\n | \"right\"\r\n | \"right-top\"\r\n | \"right-bottom\"\r\n | \"left\"\r\n | \"left-top\"\r\n | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n children?: ReactNode;\r\n target?: HTMLElement;\r\n placement?: useBreakpointPropsType<PlacementTypes>;\r\n zIndex?: number;\r\n onClickOutside?: (e: MouseEvent) => void;\r\n slotProps?: {\r\n transition?: Omit<TransitionProps, \"open\">;\r\n portal?: Omit<PortalProps, \"children\">;\r\n content?: Omit<TagProps<\"div\">, \"children\">;\r\n };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n \"top\",\r\n \"top-left\",\r\n \"top-right\",\r\n \"bottom\",\r\n \"bottom-left\",\r\n \"bottom-right\",\r\n \"right\",\r\n \"right-top\",\r\n \"right-bottom\",\r\n \"left\",\r\n \"left-top\",\r\n \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n switch (placement) {\r\n case \"top\":\r\n return \"bottom\";\r\n case \"top-left\":\r\n return \"bottom left\";\r\n case \"top-right\":\r\n return \"bottom right\";\r\n case \"bottom\":\r\n return \"top\";\r\n case \"bottom-left\":\r\n return \"top left\";\r\n case \"bottom-right\":\r\n return \"top right\";\r\n case \"left\":\r\n return \"right\";\r\n case \"left-top\":\r\n return \"top right\";\r\n case \"left-bottom\":\r\n return \"bottom right\";\r\n case \"right\":\r\n return \"left\";\r\n case \"right-top\":\r\n return \"top left\";\r\n case \"right-bottom\":\r\n return \"bottom left\";\r\n default:\r\n return \"top\";\r\n }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n placement: PlacementTypes,\r\n menu: HTMLElement,\r\n target: HTMLElement\r\n) => {\r\n const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n const {\r\n top: tt,\r\n left: tl,\r\n bottom: tb,\r\n right: tr,\r\n width: tw,\r\n height: th,\r\n } = target.getBoundingClientRect();\r\n\r\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n \"bottom-left\": { top: tb, left: tl },\r\n \"bottom-right\": { top: tb, left: tr - mw },\r\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n \"top-left\": { top: tt - mh, left: tl },\r\n \"top-right\": { top: tt - mh, left: tr - mw },\r\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n \"left-top\": { top: tt, left: tl - mw },\r\n \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n right: { top: tt + (th - mh) / 2, left: tr },\r\n \"right-top\": { top: tt, left: tr },\r\n \"right-bottom\": { top: tb - mh, left: tr },\r\n };\r\n\r\n return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n const { x, y, width, height } = menu.getBoundingClientRect();\r\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n let pos = computePosition(placement, menu, target);\r\n menu.style.top = pos.top + \"px\";\r\n menu.style.left = pos.left + \"px\";\r\n\r\n if (isOffScreen(menu)) {\r\n for (const p of placements) {\r\n const fallbackPos = computePosition(p, menu, target);\r\n menu.style.top = fallbackPos.top + \"px\";\r\n menu.style.left = fallbackPos.left + \"px\";\r\n if (!isOffScreen(menu)) return p;\r\n }\r\n }\r\n return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n const _p: any = {};\r\n if (placement) _p.placement = placement;\r\n const p: any = useBreakpointProps(_p);\r\n placement = p.placement || \"bottom-left\";\r\n\r\n const isOpen = Boolean(target);\r\n const [closed, setClosed] = useState(!isOpen);\r\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n // Open/close effect\r\n useEffect(() => {\r\n if (closed && isOpen) setClosed(false);\r\n }, [isOpen]);\r\n\r\n\r\n useEffect(() => {\r\n if (!closed && target && menuRef.current) {\r\n const updatePosition = () => {\r\n if (menuRef.current && target) {\r\n const p = placeMenu(placement!, menuRef.current, target);\r\n setPlaced(p);\r\n }\r\n };\r\n\r\n updatePosition();\r\n\r\n window.addEventListener(\"resize\", updatePosition);\r\n window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n return () => {\r\n window.removeEventListener(\"resize\", updatePosition);\r\n window.removeEventListener(\"scroll\", updatePosition, true);\r\n };\r\n }\r\n return undefined;\r\n }, [closed, target, placement]);\r\n\r\n if (closed) return null;\r\n\r\n return (\r\n <Portal {...slotProps?.portal}>\r\n <ClickOutside\r\n onClickOutside={(e: MouseEvent) => {\r\n if (e.target !== target) {\r\n onClickOutside && onClickOutside(e);\r\n }\r\n }}\r\n ref={menuRef}\r\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n >\r\n <Transition\r\n duration={200}\r\n easing=\"fast\"\r\n variant=\"grow\"\r\n {...slotProps?.transition}\r\n open={isOpen}\r\n onClosed={() => {\r\n setClosed(true);\r\n slotProps?.transition?.onClosed?.();\r\n }}\r\n >\r\n <Tag\r\n baseClass=\"menu-content\"\r\n {...slotProps?.content}\r\n sxr={{\r\n overflow: \"hidden\",\r\n bgcolor: \"background.primary\",\r\n shadow: 2,\r\n radius: 1,\r\n transformOrigin: getTransformOrigin(placed),\r\n ...slotProps?.content?.sx,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n </Transition>\r\n </ClickOutside>\r\n </Portal>\r\n );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":["_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n onClickOutside?: (e: MouseEvent) => void;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n let pos = computePosition(placement, menu, target);\n menu.style.top = pos.top + \"px\";\n menu.style.left = pos.left + \"px\";\n\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n menu.style.top = fallbackPos.top + \"px\";\n menu.style.left = fallbackPos.left + \"px\";\n if (!isOffScreen(menu)) return p;\n }\n }\n return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n const p = placeMenu(placement!, menuRef.current, target);\n setPlaced(p);\n }\n };\n\n updatePosition();\n\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return undefined;\n }, [closed, target, placement]);\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={200}\n easing=\"fast\"\n variant=\"grow\"\n {...slotProps?.transition}\n open={isOpen}\n onClosed={() => {\n setClosed(true);\n slotProps?.transition?.onClosed?.();\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,15 +1,7 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var index = require('../useModal/index.cjs');
|
|
7
|
-
var core = require('@xanui/core');
|
|
8
|
-
|
|
9
|
-
const Modal = (_a) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../useModal/index.js'),core=require('@xanui/core');const Modal = (_a) => {
|
|
10
2
|
var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
|
|
11
3
|
const ref = React.useRef(null);
|
|
12
|
-
const modal = index(jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
|
|
4
|
+
const modal = index.default(jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
|
|
13
5
|
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
14
6
|
props.onClickOutside();
|
|
15
7
|
}
|
|
@@ -52,7 +44,4 @@ Modal.open = (children, props) => {
|
|
|
52
44
|
};
|
|
53
45
|
Modal.close = () => {
|
|
54
46
|
core.Renderar.unrender(ActionModal);
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
module.exports = Modal;
|
|
58
|
-
//# sourceMappingURL=index.cjs.map
|
|
47
|
+
};exports.default=Modal;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n children: ReactNode;\n open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const modal = useModal(<>{children}</>, {\n ...props,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n }\n },\n slotProps: {\n layer: {\n portal: {\n container: ref?.current || undefined\n }\n }\n }\n })\n\n useEffect(() => {\n if (open) {\n modal.open()\n } else {\n modal.close()\n }\n }, [open])\n return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n return (\n <Modal {...props}>\n {children}\n </Modal>\n )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children'>) => {\n const m = Renderar.render(ActionModal as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n m.unrender()\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n\n return {\n open: () => {\n m.updateProps({ open: true })\n },\n close: () => {\n m.updateProps({ open: false })\n },\n }\n};\n\nModal.close = () => {\n Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":["__rest","useRef","useModal","_jsx","_Fragment","useEffect","Tag","Renderar"],"mappings":"kOASA,MAAM,KAAK,GAAG,CAAC,EAAwC,KAAI;QAA5C,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AACtC,IAAA,MAAM,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAExC,IAAA,MAAM,KAAK,GAAGC,aAAQ,CAACC,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,KAAK,CAAA,EAAA,EACR,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;QACH,CAAC,EACD,SAAS,EAAE;AACR,YAAA,KAAK,EAAE;AACJ,gBAAA,MAAM,EAAE;oBACL,SAAS,EAAE,CAAA,GAAG,KAAA,IAAA,IAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI;AAC7B;AACH;AACH,SAAA,EAAA,CAAA,CACF;IAEFC,eAAS,CAAC,MAAK;QACZ,IAAI,IAAI,EAAE;YACP,KAAK,CAAC,IAAI,EAAE;QACf;aAAO;YACJ,KAAK,CAAC,KAAK,EAAE;QAChB;AACH,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACV,IAAA,OAAOF,eAACG,QAAG,EAAA,EAAC,GAAG,EAAE,GAAG,GAAQ;AAC/B;AAEA,MAAM,WAAW,GAAG,CAAC,EAAkC,KAAI;AAAtC,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAAN,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACtC,QACGG,eAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAA,QAAA,EACZ,QAAQ,EAAA,CAAA,CACJ;AAEd,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,QAAgC,EAAE,KAAoC,KAAI;AACrF,IAAA,MAAM,CAAC,GAAGI,aAAQ,CAAC,MAAM,CAAC,WAAkB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACzC,IAAI,EAAE,IAAI,EAAA,EACP,KAAK,CAAA,EAAA,EACR,QAAQ,EACR,QAAQ,EAAE,MAAK;YACZ,CAAC,CAAC,QAAQ,EAAE;YACZ,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,IACF;IAEF,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAChC,CAAC;QACD,KAAK,EAAE,MAAK;YACT,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;KACH;AACJ,CAAC;AAED,KAAK,CAAC,KAAK,GAAG,MAAK;AAChB,IAAAA,aAAQ,CAAC,QAAQ,CAAC,WAAkB,CAAC;AACxC,CAAC"}
|
package/Modal/index.mjs
CHANGED
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import { useRef, useEffect } from 'react';
|
|
4
|
-
import useModal from '../useModal/index.mjs';
|
|
5
|
-
import { Tag, Renderar } from '@xanui/core';
|
|
6
|
-
|
|
7
|
-
const Modal = (_a) => {
|
|
1
|
+
import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {useRef,useEffect}from'react';import useModal from'../useModal/index.mjs';import {Tag,Renderar}from'@xanui/core';const Modal = (_a) => {
|
|
8
2
|
var { children, open } = _a, props = __rest(_a, ["children", "open"]);
|
|
9
3
|
const ref = useRef(null);
|
|
10
4
|
const modal = useModal(jsx(Fragment, { children: children }), Object.assign(Object.assign({}, props), { onClickOutside: () => {
|
|
@@ -50,7 +44,4 @@ Modal.open = (children, props) => {
|
|
|
50
44
|
};
|
|
51
45
|
Modal.close = () => {
|
|
52
46
|
Renderar.unrender(ActionModal);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
export { Modal as default };
|
|
56
|
-
//# sourceMappingURL=index.mjs.map
|
|
47
|
+
};export{Modal as default};//# sourceMappingURL=index.mjs.map
|
package/Modal/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from \"react\";\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n children: ReactNode;\n open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const modal = useModal(<>{children}</>, {\n ...props,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n }\n },\n slotProps: {\n layer: {\n portal: {\n container: ref?.current || undefined\n }\n }\n }\n })\n\n useEffect(() => {\n if (open) {\n modal.open()\n } else {\n modal.close()\n }\n }, [open])\n return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n return (\n <Modal {...props}>\n {children}\n </Modal>\n )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children'>) => {\n const m = Renderar.render(ActionModal as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n m.unrender()\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n\n return {\n open: () => {\n m.updateProps({ open: true })\n },\n close: () => {\n m.updateProps({ open: false })\n },\n }\n};\n\nModal.close = () => {\n Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":["_jsx","_Fragment"],"mappings":"gMASA,MAAM,KAAK,GAAG,CAAC,EAAwC,KAAI;QAA5C,EAAE,QAAQ,EAAE,IAAI,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA1B,oBAA4B,CAAF;AACtC,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC;AAExC,IAAA,MAAM,KAAK,GAAG,QAAQ,CAACA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,KAAK,CAAA,EAAA,EACR,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;QACH,CAAC,EACD,SAAS,EAAE;AACR,YAAA,KAAK,EAAE;AACJ,gBAAA,MAAM,EAAE;oBACL,SAAS,EAAE,CAAA,GAAG,KAAA,IAAA,IAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,KAAI;AAC7B;AACH;AACH,SAAA,EAAA,CAAA,CACF;IAEF,SAAS,CAAC,MAAK;QACZ,IAAI,IAAI,EAAE;YACP,KAAK,CAAC,IAAI,EAAE;QACf;aAAO;YACJ,KAAK,CAAC,KAAK,EAAE;QAChB;AACH,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACV,IAAA,OAAOD,IAAC,GAAG,EAAA,EAAC,GAAG,EAAE,GAAG,GAAQ;AAC/B;AAEA,MAAM,WAAW,GAAG,CAAC,EAAkC,KAAI;AAAtC,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAwB,EAAnB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACtC,QACGA,IAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAA,QAAA,EACZ,QAAQ,EAAA,CAAA,CACJ;AAEd,CAAC;AAED,KAAK,CAAC,IAAI,GAAG,CAAC,QAAgC,EAAE,KAAoC,KAAI;AACrF,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAkB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACzC,IAAI,EAAE,IAAI,EAAA,EACP,KAAK,CAAA,EAAA,EACR,QAAQ,EACR,QAAQ,EAAE,MAAK;YACZ,CAAC,CAAC,QAAQ,EAAE;YACZ,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,IACF;IAEF,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAChC,CAAC;QACD,KAAK,EAAE,MAAK;YACT,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC;KACH;AACJ,CAAC;AAED,KAAK,CAAC,KAAK,GAAG,MAAK;AAChB,IAAA,QAAQ,CAAC,QAAQ,CAAC,WAAkB,CAAC;AACxC,CAAC"}
|
package/NoSSR/index.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react');const NoSSR = ({ children }) => {
|
|
2
|
+
const [isClient, setIsClient] = React.useState(false);
|
|
3
|
+
React.useEffect(() => {
|
|
4
|
+
setIsClient(true);
|
|
5
|
+
}, []);
|
|
6
|
+
return isClient ? children : null;
|
|
7
|
+
};exports.default=NoSSR;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\nimport { useEffect, useState } from \"react\";\n\nconst NoSSR = ({ children }: any) => {\n const [isClient, setIsClient] = useState(false);\n useEffect(() => {\n setIsClient(true);\n }, [])\n return isClient ? children : null\n}\n\nexport default NoSSR"],"names":["useState","useEffect"],"mappings":"iGAGA,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAO,KAAI;IAChC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAC/CC,eAAS,CAAC,MAAK;QACX,WAAW,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;IACN,OAAO,QAAQ,GAAG,QAAQ,GAAG,IAAI;AACrC"}
|
package/NoSSR/index.mjs
CHANGED
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
const NoSSR = ({ children }) => {
|
|
1
|
+
import {useState,useEffect}from'react';const NoSSR = ({ children }) => {
|
|
4
2
|
const [isClient, setIsClient] = useState(false);
|
|
5
3
|
useEffect(() => {
|
|
6
4
|
setIsClient(true);
|
|
7
5
|
}, []);
|
|
8
6
|
return isClient ? children : null;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export { NoSSR as default };
|
|
12
|
-
//# sourceMappingURL=index.mjs.map
|
|
7
|
+
};export{NoSSR as default};//# sourceMappingURL=index.mjs.map
|
package/NoSSR/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\nimport { useEffect, useState } from \"react\";\n\nconst NoSSR = ({ children }: any) => {\n const [isClient, setIsClient] = useState(false);\n useEffect(() => {\n setIsClient(true);\n }, [])\n return isClient ? children : null\n}\n\nexport default NoSSR"],"names":[],"mappings":"uCAGA,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAO,KAAI;IAChC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC/C,SAAS,CAAC,MAAK;QACX,WAAW,CAAC,IAAI,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;IACN,OAAO,QAAQ,GAAG,QAAQ,GAAG,IAAI;AACrC"}
|
package/Option/index.js
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../ListItem/index.js');const Option = React.forwardRef((_a, ref) => {
|
|
2
|
+
var { value, children } = _a, props = tslib.__rest(_a, ["value", "children"]);
|
|
3
|
+
return (jsxRuntime.jsx(index.default, Object.assign({}, props, { ref: ref, children: children })));
|
|
4
|
+
});exports.default=Option;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Option/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n return (\n <ListItem {...props} ref={ref}>{children}</ListItem>\n )\n})\n\nexport default Option"],"names":["__rest","_jsx","ListItem"],"mappings":"sMAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIC,cAAA,CAACC,aAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC"}
|
package/Option/index.mjs
CHANGED
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import ListItem from '../ListItem/index.mjs';
|
|
5
|
-
|
|
6
|
-
const Option = React.forwardRef((_a, ref) => {
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import ListItem from'../ListItem/index.mjs';const Option = React.forwardRef((_a, ref) => {
|
|
7
2
|
var { value, children } = _a, props = __rest(_a, ["value", "children"]);
|
|
8
3
|
return (jsx(ListItem, Object.assign({}, props, { ref: ref, children: children })));
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
export { Option as default };
|
|
12
|
-
//# sourceMappingURL=index.mjs.map
|
|
4
|
+
});export{Option as default};//# sourceMappingURL=index.mjs.map
|
package/Option/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Option/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Option/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n return (\n <ListItem {...props} ref={ref}>{children}</ListItem>\n )\n})\n\nexport default Option"],"names":["_jsx"],"mappings":"oIAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC"}
|
|
@@ -1,15 +1,5 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var core = require('@xanui/core');
|
|
7
|
-
|
|
8
|
-
const Paper = React.forwardRef((_a, ref) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Paper = React.forwardRef((_a, ref) => {
|
|
9
2
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
10
3
|
let [props] = core.useInterface("default", rest, {});
|
|
11
4
|
return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { sxr: Object.assign({ radius: 1, p: 1.5, bgcolor: "background.secondary", color: "text.primary" }, props === null || props === void 0 ? void 0 : props.sx), baseClass: 'default', ref: ref, children: children })));
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
module.exports = Paper;
|
|
15
|
-
//# sourceMappingURL=index.cjs.map
|
|
5
|
+
});exports.default=Paper;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n let [props] = useInterface<any>(\"default\", rest, {})\n return (\n <Tag\n {...props}\n sxr={{\n radius: 1,\n p: 1.5,\n bgcolor: \"background.secondary\",\n color: \"text.primary\",\n ...props?.sx\n }}\n baseClass='default'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Paper\n"],"names":["__rest","useInterface","_jsx","Tag"],"mappings":"4LAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAGC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC;AACpD,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,KAAA,IAAA,IAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
|
package/Paper/index.mjs
CHANGED
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useInterface, Tag } from '@xanui/core';
|
|
5
|
-
|
|
6
|
-
const Paper = React.forwardRef((_a, ref) => {
|
|
1
|
+
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useInterface,Tag}from'@xanui/core';const Paper = React.forwardRef((_a, ref) => {
|
|
7
2
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
8
3
|
let [props] = useInterface("default", rest, {});
|
|
9
4
|
return (jsx(Tag, Object.assign({}, props, { sxr: Object.assign({ radius: 1, p: 1.5, bgcolor: "background.secondary", color: "text.primary" }, props === null || props === void 0 ? void 0 : props.sx), baseClass: 'default', ref: ref, children: children })));
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
export { Paper as default };
|
|
13
|
-
//# sourceMappingURL=index.mjs.map
|
|
5
|
+
});export{Paper as default};//# sourceMappingURL=index.mjs.map
|
package/Paper/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n let [props] = useInterface<any>(\"default\", rest, {})\n return (\n <Tag\n {...props}\n sxr={{\n radius: 1,\n p: 1.5,\n bgcolor: \"background.secondary\",\n color: \"text.primary\",\n ...props?.sx\n }}\n baseClass='default'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Paper\n"],"names":["_jsx"],"mappings":"mIAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC;AACpD,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,KAAA,IAAA,IAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var ReactDOM = require('react-dom');
|
|
6
|
-
var core = require('@xanui/core');
|
|
7
|
-
|
|
8
|
-
const Portal = ({ children, appendTo, container }) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),ReactDOM=require('react-dom'),core=require('@xanui/core');const Portal = ({ children, appendTo, container }) => {
|
|
9
2
|
const theme = core.useTheme();
|
|
10
3
|
appendTo = appendTo || document.body;
|
|
11
4
|
const c = React.useMemo(() => {
|
|
@@ -20,7 +13,4 @@ const Portal = ({ children, appendTo, container }) => {
|
|
|
20
13
|
};
|
|
21
14
|
}, []);
|
|
22
15
|
return ReactDOM.createPortal(jsxRuntime.jsx(core.ThemeProvider, { theme: theme.name, children: children }), c);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
module.exports = Portal;
|
|
26
|
-
//# sourceMappingURL=index.cjs.map
|
|
16
|
+
};exports.default=Portal;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n children?: React.ReactNode;\n appendTo?: HTMLElement;\n container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n const theme = useTheme()\n appendTo = appendTo || document.body\n\n const c = useMemo(() => {\n let _con: HTMLElement = container || document.createElement(\"div\");\n appendTo.appendChild(_con);\n _con.className = \"xui-portal\"\n return _con\n }, [])\n\n useEffect(() => {\n return () => {\n (appendTo as any).removeChild(c);\n }\n }, [])\n\n return ReactDOM.createPortal(\n <ThemeProvider theme={theme.name}>\n {children}\n </ThemeProvider>,\n c,\n );\n}\n\nexport default Portal"],"names":["useTheme","useMemo","useEffect","_jsx","ThemeProvider"],"mappings":"mMAUA,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAe,KAAI;AAC9D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,QAAQ,GAAG,QAAQ,IAAI,QAAQ,CAAC,IAAI;AAEpC,IAAA,MAAM,CAAC,GAAGC,aAAO,CAAC,MAAK;QACnB,IAAI,IAAI,GAAgB,SAAS,IAAI,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAClE,QAAA,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,SAAS,GAAG,YAAY;AAC7B,QAAA,OAAO,IAAI;IACf,CAAC,EAAE,EAAE,CAAC;IAENC,eAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;AACP,YAAA,QAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AACpC,QAAA,CAAC;IACL,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,QAAQ,CAAC,YAAY,CACxBC,cAAA,CAACC,kBAAa,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAC3B,QAAQ,GACG,EAChB,CAAC,CACJ;AACL"}
|