@elliemae/ds-menu-items 3.27.0-next.6 → 3.27.0-next.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/TempTreeviewItem.js +133 -0
- package/dist/cjs/TempTreeviewItem.js.map +7 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/TempTreeviewItem.js +103 -0
- package/dist/esm/TempTreeviewItem.js.map +7 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/types/TempTreeviewItem.d.ts +16 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +12 -8
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var TempTreeviewItem_exports = {};
|
|
30
|
+
__export(TempTreeviewItem_exports, {
|
|
31
|
+
TreeviewItem: () => TreeviewItem
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(TempTreeviewItem_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
+
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
|
+
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
40
|
+
var import_ds_separator = require("@elliemae/ds-separator");
|
|
41
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
42
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
43
|
+
var import_ds_form_checkbox = require("@elliemae/ds-form-checkbox");
|
|
44
|
+
var import_ds_form_radio = require("@elliemae/ds-form-radio");
|
|
45
|
+
const borderStyle = import_ds_system.css`
|
|
46
|
+
outline: 2px solid ${({ theme }) => theme.colors.brand["700"]};
|
|
47
|
+
outline-offset: -2px;
|
|
48
|
+
`;
|
|
49
|
+
const MenuItemWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
50
|
+
height: 36px;
|
|
51
|
+
|
|
52
|
+
${({ isFocused }) => isFocused && borderStyle};
|
|
53
|
+
&:hover {
|
|
54
|
+
background-color: ${({ theme }) => theme.colors.brand["200"]};
|
|
55
|
+
}
|
|
56
|
+
`;
|
|
57
|
+
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
|
|
58
|
+
&:hover:not(:disabled) {
|
|
59
|
+
background-color: transparent;
|
|
60
|
+
}
|
|
61
|
+
`;
|
|
62
|
+
const TreeviewItem = (props) => {
|
|
63
|
+
const { onCollapse, item, onSelect = () => {
|
|
64
|
+
}, isSelected, multiple } = props;
|
|
65
|
+
const cols = (0, import_react.useMemo)(() => {
|
|
66
|
+
if (isSelected !== void 0) {
|
|
67
|
+
return ["auto", "auto", "auto", "1fr"];
|
|
68
|
+
}
|
|
69
|
+
return ["auto", "auto", "1fr"];
|
|
70
|
+
}, [isSelected]);
|
|
71
|
+
const subItemsLength = (0, import_react.useMemo)(() => {
|
|
72
|
+
if (item.subitems && item.subitems?.length > 0) {
|
|
73
|
+
return item.subitems.length;
|
|
74
|
+
}
|
|
75
|
+
return 0;
|
|
76
|
+
}, [item.subitems]);
|
|
77
|
+
const expandableButton = (0, import_react.useMemo)(() => {
|
|
78
|
+
if (subItemsLength > 0) {
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["auto", "auto"], alignItems: "center", children: [
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
StyledButton,
|
|
82
|
+
{
|
|
83
|
+
"aria-label": "Expand",
|
|
84
|
+
buttonType: "icon",
|
|
85
|
+
size: "s",
|
|
86
|
+
onClick: () => {
|
|
87
|
+
onCollapse(item.dsId);
|
|
88
|
+
},
|
|
89
|
+
children: item.collapsed === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadDown, { size: "s", color: ["brand-primary", "800"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadRight, { size: "s", color: ["brand-primary", "800"] })
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Folder, { color: ["brand-primary", "700"] })
|
|
93
|
+
] });
|
|
94
|
+
}
|
|
95
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.FilePdf, { color: ["brand-primary", "700"] }) });
|
|
96
|
+
}, [item.collapsed, item.dsId, onCollapse, subItemsLength]);
|
|
97
|
+
const SelectComponent = import_react.default.useMemo(() => {
|
|
98
|
+
if (multiple) {
|
|
99
|
+
return import_ds_form_checkbox.DSControlledCheckbox;
|
|
100
|
+
}
|
|
101
|
+
return import_ds_form_radio.DSControlledRadio;
|
|
102
|
+
}, [multiple]);
|
|
103
|
+
const handleOnSelect = (0, import_react.useCallback)(() => {
|
|
104
|
+
onSelect(item.dsId);
|
|
105
|
+
}, [item.dsId, onSelect]);
|
|
106
|
+
const [isFocused, setIsFocused] = import_react.default.useState(false);
|
|
107
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemWrapper, { px: "xxs", isFocused, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols, marginLeft: item.depth * 24, gutter: "xxs2", alignItems: "center", children: [
|
|
108
|
+
isSelected !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
+
SelectComponent,
|
|
110
|
+
{
|
|
111
|
+
onFocus: () => setIsFocused(true),
|
|
112
|
+
onBlur: () => setIsFocused(false),
|
|
113
|
+
checked: isSelected,
|
|
114
|
+
onChange: handleOnSelect,
|
|
115
|
+
"aria-label": "Select",
|
|
116
|
+
value: item.dsId
|
|
117
|
+
}
|
|
118
|
+
),
|
|
119
|
+
expandableButton,
|
|
120
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_typography.DSTypography, { variant: "b1", id: `${item.dsId}-text`, children: [
|
|
121
|
+
"Test ",
|
|
122
|
+
item.dsId
|
|
123
|
+
] }) }),
|
|
124
|
+
subItemsLength > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["min-content", "auto"], gutter: "xxs", children: [
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_separator.DSSeparatorV2, { isVertical: true, height: "80%" }) }),
|
|
126
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { alignItems: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_typography.DSTypography, { variant: "b1", color: "neutral-500", children: [
|
|
127
|
+
subItemsLength,
|
|
128
|
+
" Items"
|
|
129
|
+
] }) })
|
|
130
|
+
] })
|
|
131
|
+
] }) });
|
|
132
|
+
};
|
|
133
|
+
//# sourceMappingURL=TempTreeviewItem.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/TempTreeviewItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\nimport React, { useCallback, useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { ArrowheadDown, ArrowheadRight, Folder, FilePdf } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSSeparatorV2 } from '@elliemae/ds-separator';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\n\nconst borderStyle = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n outline-offset: -2px;\n`;\nconst MenuItemWrapper = styled(Grid)<{ isFocused: boolean }>`\n height: 36px;\n\n ${({ isFocused }) => isFocused && borderStyle};\n &:hover {\n background-color: ${({ theme }) => theme.colors.brand['200']};\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n\ninterface ItemT {\n dsId: string;\n collapsed?: boolean;\n depth: number;\n subitems: ItemT[] | null;\n}\ninterface TreeviewItemProps {\n onCollapse: (dsId: string) => void;\n item: ItemT;\n onSelect?: (dsId: string) => void;\n isSelected?: boolean;\n multiple?: boolean;\n}\n\nexport const TreeviewItem: React.ComponentType<TreeviewItemProps> = (props) => {\n const { onCollapse, item, onSelect = () => {}, isSelected, multiple } = props;\n const cols = useMemo(() => {\n if (isSelected !== undefined) {\n return ['auto', 'auto', 'auto', '1fr'];\n }\n return ['auto', 'auto', '1fr'];\n }, [isSelected]);\n\n const subItemsLength = useMemo(() => {\n if (item.subitems && item.subitems?.length > 0) {\n return item.subitems.length;\n }\n return 0;\n }, [item.subitems]);\n const expandableButton = useMemo(() => {\n if (subItemsLength > 0) {\n return (\n <Grid cols={['auto', 'auto']} alignItems=\"center\">\n <StyledButton\n aria-label=\"Expand\"\n buttonType=\"icon\"\n size=\"s\"\n onClick={() => {\n onCollapse(item.dsId);\n }}\n >\n {item.collapsed === false ? (\n <ArrowheadDown size=\"s\" color={['brand-primary', '800']} />\n ) : (\n <ArrowheadRight size=\"s\" color={['brand-primary', '800']} />\n )}\n </StyledButton>\n <Folder color={['brand-primary', '700']} />\n </Grid>\n );\n }\n return (\n <Grid alignItems=\"center\">\n <FilePdf color={['brand-primary', '700']} />\n </Grid>\n );\n }, [item.collapsed, item.dsId, onCollapse, subItemsLength]);\n\n const SelectComponent = React.useMemo(() => {\n if (multiple) {\n return DSControlledCheckbox;\n }\n return DSControlledRadio;\n }, [multiple]);\n const handleOnSelect = useCallback(() => {\n onSelect(item.dsId);\n }, [item.dsId, onSelect]);\n const [isFocused, setIsFocused] = React.useState(false);\n return (\n <MenuItemWrapper px=\"xxs\" isFocused={isFocused}>\n <Grid cols={cols} marginLeft={item.depth * 24} gutter=\"xxs2\" alignItems=\"center\">\n {isSelected !== undefined && (\n <SelectComponent\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n checked={isSelected}\n onChange={handleOnSelect}\n aria-label=\"Select\"\n value={item.dsId}\n />\n )}\n {expandableButton}\n <Grid alignItems=\"flex-end\">\n <DSTypography variant=\"b1\" id={`${item.dsId}-text`}>\n Test {item.dsId}\n </DSTypography>\n </Grid>\n {subItemsLength > 0 && (\n <Grid cols={['min-content', 'auto']} gutter=\"xxs\">\n <Grid alignItems=\"center\">\n <DSSeparatorV2 isVertical height=\"80%\" />\n </Grid>\n <Grid alignItems=\"flex-end\">\n <DSTypography variant=\"b1\" color=\"neutral-500\">\n {subItemsLength} Items\n </DSTypography>\n </Grid>\n </Grid>\n )}\n </Grid>\n </MenuItemWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -28,4 +28,5 @@ module.exports = __toCommonJS(src_exports);
|
|
|
28
28
|
var React = __toESM(require("react"));
|
|
29
29
|
__reExport(src_exports, require("./components/index.js"), module.exports);
|
|
30
30
|
__reExport(src_exports, require("./exported-related/index.js"), module.exports);
|
|
31
|
+
__reExport(src_exports, require("./TempTreeviewItem.js"), module.exports);
|
|
31
32
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nexport * from './components/index.js';\nexport * from './exported-related/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADGvB,wBAAc,kCAHd;AAIA,wBAAc,wCAJd;",
|
|
4
|
+
"sourcesContent": ["import type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nexport * from './components/index.js';\nexport * from './exported-related/index.js';\nexport * from './TempTreeviewItem.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADGvB,wBAAc,kCAHd;AAIA,wBAAc,wCAJd;AAKA,wBAAc,kCALd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React2, { useCallback, useMemo } from "react";
|
|
4
|
+
import { styled, css } from "@elliemae/ds-system";
|
|
5
|
+
import { ArrowheadDown, ArrowheadRight, Folder, FilePdf } from "@elliemae/ds-icons";
|
|
6
|
+
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
7
|
+
import { DSSeparatorV2 } from "@elliemae/ds-separator";
|
|
8
|
+
import { DSTypography } from "@elliemae/ds-typography";
|
|
9
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
10
|
+
import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
|
|
11
|
+
import { DSControlledRadio } from "@elliemae/ds-form-radio";
|
|
12
|
+
const borderStyle = css`
|
|
13
|
+
outline: 2px solid ${({ theme }) => theme.colors.brand["700"]};
|
|
14
|
+
outline-offset: -2px;
|
|
15
|
+
`;
|
|
16
|
+
const MenuItemWrapper = styled(Grid)`
|
|
17
|
+
height: 36px;
|
|
18
|
+
|
|
19
|
+
${({ isFocused }) => isFocused && borderStyle};
|
|
20
|
+
&:hover {
|
|
21
|
+
background-color: ${({ theme }) => theme.colors.brand["200"]};
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
|
+
const StyledButton = styled(DSButtonV2)`
|
|
25
|
+
&:hover:not(:disabled) {
|
|
26
|
+
background-color: transparent;
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
const TreeviewItem = (props) => {
|
|
30
|
+
const { onCollapse, item, onSelect = () => {
|
|
31
|
+
}, isSelected, multiple } = props;
|
|
32
|
+
const cols = useMemo(() => {
|
|
33
|
+
if (isSelected !== void 0) {
|
|
34
|
+
return ["auto", "auto", "auto", "1fr"];
|
|
35
|
+
}
|
|
36
|
+
return ["auto", "auto", "1fr"];
|
|
37
|
+
}, [isSelected]);
|
|
38
|
+
const subItemsLength = useMemo(() => {
|
|
39
|
+
if (item.subitems && item.subitems?.length > 0) {
|
|
40
|
+
return item.subitems.length;
|
|
41
|
+
}
|
|
42
|
+
return 0;
|
|
43
|
+
}, [item.subitems]);
|
|
44
|
+
const expandableButton = useMemo(() => {
|
|
45
|
+
if (subItemsLength > 0) {
|
|
46
|
+
return /* @__PURE__ */ jsxs(Grid, { cols: ["auto", "auto"], alignItems: "center", children: [
|
|
47
|
+
/* @__PURE__ */ jsx(
|
|
48
|
+
StyledButton,
|
|
49
|
+
{
|
|
50
|
+
"aria-label": "Expand",
|
|
51
|
+
buttonType: "icon",
|
|
52
|
+
size: "s",
|
|
53
|
+
onClick: () => {
|
|
54
|
+
onCollapse(item.dsId);
|
|
55
|
+
},
|
|
56
|
+
children: item.collapsed === false ? /* @__PURE__ */ jsx(ArrowheadDown, { size: "s", color: ["brand-primary", "800"] }) : /* @__PURE__ */ jsx(ArrowheadRight, { size: "s", color: ["brand-primary", "800"] })
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ jsx(Folder, { color: ["brand-primary", "700"] })
|
|
60
|
+
] });
|
|
61
|
+
}
|
|
62
|
+
return /* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(FilePdf, { color: ["brand-primary", "700"] }) });
|
|
63
|
+
}, [item.collapsed, item.dsId, onCollapse, subItemsLength]);
|
|
64
|
+
const SelectComponent = React2.useMemo(() => {
|
|
65
|
+
if (multiple) {
|
|
66
|
+
return DSControlledCheckbox;
|
|
67
|
+
}
|
|
68
|
+
return DSControlledRadio;
|
|
69
|
+
}, [multiple]);
|
|
70
|
+
const handleOnSelect = useCallback(() => {
|
|
71
|
+
onSelect(item.dsId);
|
|
72
|
+
}, [item.dsId, onSelect]);
|
|
73
|
+
const [isFocused, setIsFocused] = React2.useState(false);
|
|
74
|
+
return /* @__PURE__ */ jsx(MenuItemWrapper, { px: "xxs", isFocused, children: /* @__PURE__ */ jsxs(Grid, { cols, marginLeft: item.depth * 24, gutter: "xxs2", alignItems: "center", children: [
|
|
75
|
+
isSelected !== void 0 && /* @__PURE__ */ jsx(
|
|
76
|
+
SelectComponent,
|
|
77
|
+
{
|
|
78
|
+
onFocus: () => setIsFocused(true),
|
|
79
|
+
onBlur: () => setIsFocused(false),
|
|
80
|
+
checked: isSelected,
|
|
81
|
+
onChange: handleOnSelect,
|
|
82
|
+
"aria-label": "Select",
|
|
83
|
+
value: item.dsId
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
expandableButton,
|
|
87
|
+
/* @__PURE__ */ jsx(Grid, { alignItems: "flex-end", children: /* @__PURE__ */ jsxs(DSTypography, { variant: "b1", id: `${item.dsId}-text`, children: [
|
|
88
|
+
"Test ",
|
|
89
|
+
item.dsId
|
|
90
|
+
] }) }),
|
|
91
|
+
subItemsLength > 0 && /* @__PURE__ */ jsxs(Grid, { cols: ["min-content", "auto"], gutter: "xxs", children: [
|
|
92
|
+
/* @__PURE__ */ jsx(Grid, { alignItems: "center", children: /* @__PURE__ */ jsx(DSSeparatorV2, { isVertical: true, height: "80%" }) }),
|
|
93
|
+
/* @__PURE__ */ jsx(Grid, { alignItems: "flex-end", children: /* @__PURE__ */ jsxs(DSTypography, { variant: "b1", color: "neutral-500", children: [
|
|
94
|
+
subItemsLength,
|
|
95
|
+
" Items"
|
|
96
|
+
] }) })
|
|
97
|
+
] })
|
|
98
|
+
] }) });
|
|
99
|
+
};
|
|
100
|
+
export {
|
|
101
|
+
TreeviewItem
|
|
102
|
+
};
|
|
103
|
+
//# sourceMappingURL=TempTreeviewItem.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/TempTreeviewItem.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable max-lines */\n/* eslint-disable react/no-array-index-key */\nimport React, { useCallback, useMemo } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { ArrowheadDown, ArrowheadRight, Folder, FilePdf } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSSeparatorV2 } from '@elliemae/ds-separator';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\n\nconst borderStyle = css`\n outline: 2px solid ${({ theme }) => theme.colors.brand['700']};\n outline-offset: -2px;\n`;\nconst MenuItemWrapper = styled(Grid)<{ isFocused: boolean }>`\n height: 36px;\n\n ${({ isFocused }) => isFocused && borderStyle};\n &:hover {\n background-color: ${({ theme }) => theme.colors.brand['200']};\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n &:hover:not(:disabled) {\n background-color: transparent;\n }\n`;\n\ninterface ItemT {\n dsId: string;\n collapsed?: boolean;\n depth: number;\n subitems: ItemT[] | null;\n}\ninterface TreeviewItemProps {\n onCollapse: (dsId: string) => void;\n item: ItemT;\n onSelect?: (dsId: string) => void;\n isSelected?: boolean;\n multiple?: boolean;\n}\n\nexport const TreeviewItem: React.ComponentType<TreeviewItemProps> = (props) => {\n const { onCollapse, item, onSelect = () => {}, isSelected, multiple } = props;\n const cols = useMemo(() => {\n if (isSelected !== undefined) {\n return ['auto', 'auto', 'auto', '1fr'];\n }\n return ['auto', 'auto', '1fr'];\n }, [isSelected]);\n\n const subItemsLength = useMemo(() => {\n if (item.subitems && item.subitems?.length > 0) {\n return item.subitems.length;\n }\n return 0;\n }, [item.subitems]);\n const expandableButton = useMemo(() => {\n if (subItemsLength > 0) {\n return (\n <Grid cols={['auto', 'auto']} alignItems=\"center\">\n <StyledButton\n aria-label=\"Expand\"\n buttonType=\"icon\"\n size=\"s\"\n onClick={() => {\n onCollapse(item.dsId);\n }}\n >\n {item.collapsed === false ? (\n <ArrowheadDown size=\"s\" color={['brand-primary', '800']} />\n ) : (\n <ArrowheadRight size=\"s\" color={['brand-primary', '800']} />\n )}\n </StyledButton>\n <Folder color={['brand-primary', '700']} />\n </Grid>\n );\n }\n return (\n <Grid alignItems=\"center\">\n <FilePdf color={['brand-primary', '700']} />\n </Grid>\n );\n }, [item.collapsed, item.dsId, onCollapse, subItemsLength]);\n\n const SelectComponent = React.useMemo(() => {\n if (multiple) {\n return DSControlledCheckbox;\n }\n return DSControlledRadio;\n }, [multiple]);\n const handleOnSelect = useCallback(() => {\n onSelect(item.dsId);\n }, [item.dsId, onSelect]);\n const [isFocused, setIsFocused] = React.useState(false);\n return (\n <MenuItemWrapper px=\"xxs\" isFocused={isFocused}>\n <Grid cols={cols} marginLeft={item.depth * 24} gutter=\"xxs2\" alignItems=\"center\">\n {isSelected !== undefined && (\n <SelectComponent\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n checked={isSelected}\n onChange={handleOnSelect}\n aria-label=\"Select\"\n value={item.dsId}\n />\n )}\n {expandableButton}\n <Grid alignItems=\"flex-end\">\n <DSTypography variant=\"b1\" id={`${item.dsId}-text`}>\n Test {item.dsId}\n </DSTypography>\n </Grid>\n {subItemsLength > 0 && (\n <Grid cols={['min-content', 'auto']} gutter=\"xxs\">\n <Grid alignItems=\"center\">\n <DSSeparatorV2 isVertical height=\"80%\" />\n </Grid>\n <Grid alignItems=\"flex-end\">\n <DSTypography variant=\"b1\" color=\"neutral-500\">\n {subItemsLength} Items\n </DSTypography>\n </Grid>\n </Grid>\n )}\n </Grid>\n </MenuItemWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgEf,SAUM,KAVN;AA7DR,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,QAAQ,WAAW;AAC5B,SAAS,eAAe,gBAAgB,QAAQ,eAAe;AAC/D,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAElC,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAG9D,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA,IAG/B,CAAC,EAAE,UAAU,MAAM,aAAa;AAAA;AAAA,wBAEZ,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAI/D,MAAM,eAAe,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAoB/B,MAAM,eAAuD,CAAC,UAAU;AAC7E,QAAM,EAAE,YAAY,MAAM,WAAW,MAAM;AAAA,EAAC,GAAG,YAAY,SAAS,IAAI;AACxE,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,eAAe,QAAW;AAC5B,aAAO,CAAC,QAAQ,QAAQ,QAAQ,KAAK;AAAA,IACvC;AACA,WAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,EAC/B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,KAAK,YAAY,KAAK,UAAU,SAAS,GAAG;AAC9C,aAAO,KAAK,SAAS;AAAA,IACvB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,QAAQ,CAAC;AAClB,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,iBAAiB,GAAG;AACtB,aACE,qBAAC,QAAK,MAAM,CAAC,QAAQ,MAAM,GAAG,YAAW,UACvC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,YAAW;AAAA,YACX,MAAK;AAAA,YACL,SAAS,MAAM;AACb,yBAAW,KAAK,IAAI;AAAA,YACtB;AAAA,YAEC,eAAK,cAAc,QAClB,oBAAC,iBAAc,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAEzD,oBAAC,kBAAe,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,QAE9D;AAAA,QACA,oBAAC,UAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA,SAC3C;AAAA,IAEJ;AACA,WACE,oBAAC,QAAK,YAAW,UACf,8BAAC,WAAQ,OAAO,CAAC,iBAAiB,KAAK,GAAG,GAC5C;AAAA,EAEJ,GAAG,CAAC,KAAK,WAAW,KAAK,MAAM,YAAY,cAAc,CAAC;AAE1D,QAAM,kBAAkBA,OAAM,QAAQ,MAAM;AAC1C,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AACb,QAAM,iBAAiB,YAAY,MAAM;AACvC,aAAS,KAAK,IAAI;AAAA,EACpB,GAAG,CAAC,KAAK,MAAM,QAAQ,CAAC;AACxB,QAAM,CAAC,WAAW,YAAY,IAAIA,OAAM,SAAS,KAAK;AACtD,SACE,oBAAC,mBAAgB,IAAG,OAAM,WACxB,+BAAC,QAAK,MAAY,YAAY,KAAK,QAAQ,IAAI,QAAO,QAAO,YAAW,UACrE;AAAA,mBAAe,UACd;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,aAAa,IAAI;AAAA,QAChC,QAAQ,MAAM,aAAa,KAAK;AAAA,QAChC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAW;AAAA,QACX,OAAO,KAAK;AAAA;AAAA,IACd;AAAA,IAED;AAAA,IACD,oBAAC,QAAK,YAAW,YACf,+BAAC,gBAAa,SAAQ,MAAK,IAAI,GAAG,KAAK,aAAa;AAAA;AAAA,MAC5C,KAAK;AAAA,OACb,GACF;AAAA,IACC,iBAAiB,KAChB,qBAAC,QAAK,MAAM,CAAC,eAAe,MAAM,GAAG,QAAO,OAC1C;AAAA,0BAAC,QAAK,YAAW,UACf,8BAAC,iBAAc,YAAU,MAAC,QAAO,OAAM,GACzC;AAAA,MACA,oBAAC,QAAK,YAAW,YACf,+BAAC,gBAAa,SAAQ,MAAK,OAAM,eAC9B;AAAA;AAAA,QAAe;AAAA,SAClB,GACF;AAAA,OACF;AAAA,KAEJ,GACF;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nexport * from './components/index.js';\nexport * from './exported-related/index.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,cAAc;AACd,cAAc;",
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nexport * from './components/index.js';\nexport * from './exported-related/index.js';\nexport * from './TempTreeviewItem.js';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface ItemT {
|
|
3
|
+
dsId: string;
|
|
4
|
+
collapsed?: boolean;
|
|
5
|
+
depth: number;
|
|
6
|
+
subitems: ItemT[] | null;
|
|
7
|
+
}
|
|
8
|
+
interface TreeviewItemProps {
|
|
9
|
+
onCollapse: (dsId: string) => void;
|
|
10
|
+
item: ItemT;
|
|
11
|
+
onSelect?: (dsId: string) => void;
|
|
12
|
+
isSelected?: boolean;
|
|
13
|
+
multiple?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const TreeviewItem: React.ComponentType<TreeviewItemProps>;
|
|
16
|
+
export {};
|
package/dist/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-menu-items",
|
|
3
|
-
"version": "3.27.0-next.
|
|
3
|
+
"version": "3.27.0-next.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Menu Items",
|
|
6
6
|
"files": [
|
|
@@ -37,17 +37,21 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@xstyled/system": "~3.7.3",
|
|
39
39
|
"@xstyled/util": "3.7.0",
|
|
40
|
-
"@elliemae/ds-
|
|
41
|
-
"@elliemae/ds-
|
|
42
|
-
"@elliemae/ds-form-checkbox": "3.27.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-props-helpers": "3.27.0-next.
|
|
40
|
+
"@elliemae/ds-button-v2": "3.27.0-next.8",
|
|
41
|
+
"@elliemae/ds-form-radio": "3.27.0-next.8",
|
|
42
|
+
"@elliemae/ds-form-checkbox": "3.27.0-next.8",
|
|
43
|
+
"@elliemae/ds-grid": "3.27.0-next.8",
|
|
44
|
+
"@elliemae/ds-icons": "3.27.0-next.8",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.27.0-next.8",
|
|
46
|
+
"@elliemae/ds-separator": "3.27.0-next.8",
|
|
47
|
+
"@elliemae/ds-skeleton": "3.27.0-next.8",
|
|
48
|
+
"@elliemae/ds-system": "3.27.0-next.8",
|
|
49
|
+
"@elliemae/ds-typography": "3.27.0-next.8"
|
|
46
50
|
},
|
|
47
51
|
"devDependencies": {
|
|
48
52
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
49
53
|
"styled-components": "~5.3.9",
|
|
50
|
-
"@elliemae/ds-monorepo-devops": "3.27.0-next.
|
|
54
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.8"
|
|
51
55
|
},
|
|
52
56
|
"peerDependencies": {
|
|
53
57
|
"lodash": "^4.17.21",
|