@dxos/react-ui-list 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87
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/lib/browser/index.mjs +92 -103
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +90 -101
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +92 -103
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/List/List.d.ts +1 -1
- package/dist/types/src/components/List/List.d.ts.map +1 -1
- package/dist/types/src/components/List/ListItem.d.ts +9 -6
- package/dist/types/src/components/List/ListItem.d.ts.map +1 -1
- package/dist/types/src/components/List/ListRoot.d.ts +6 -3
- package/dist/types/src/components/List/ListRoot.d.ts.map +1 -1
- package/dist/types/src/components/Tree/Tree.d.ts +2 -4
- package/dist/types/src/components/Tree/Tree.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItem.d.ts +1 -2
- package/dist/types/src/components/Tree/TreeItem.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItemHeading.d.ts.map +1 -1
- package/dist/types/src/components/Tree/TreeItemToggle.d.ts +0 -1
- package/dist/types/src/components/Tree/TreeItemToggle.d.ts.map +1 -1
- package/dist/types/src/components/Tree/helpers.d.ts +1 -1
- package/package.json +20 -20
- package/src/components/List/ListItem.tsx +4 -10
- package/src/components/Tree/Tree.tsx +5 -9
- package/src/components/Tree/TreeItem.tsx +16 -13
- package/src/components/Tree/TreeItemHeading.tsx +3 -2
- package/src/components/Tree/TreeItemToggle.tsx +2 -3
- package/src/components/Tree/helpers.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":10900,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24635,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytes":2214,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytes":7653,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytes":3377,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytes":1223,"imports":[],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytes":31434,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx","kind":"import-statement","original":"./TreeItemHeading"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx","kind":"import-statement","original":"./TreeItemToggle"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytes":5887,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytes":692,"imports":[{"path":"packages/ui/react-ui-list/src/components/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":580,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"},{"path":"packages/ui/react-ui-list/src/components/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":46720},"packages/ui/react-ui-list/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["List","RawTreeItem","Tree","TreeDataSchema","TreeItem","TreeProvider","isTreeData","useTree"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6511},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":2175},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytesInOutput":1127},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytesInOutput":293},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytesInOutput":8153},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytesInOutput":1817},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytesInOutput":813},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytesInOutput":162},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":22201}}}
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":10900,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24357,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytes":2214,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytes":7754,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytes":3194,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytes":1223,"imports":[],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytes":31446,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx","kind":"import-statement","original":"./TreeItemHeading"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx","kind":"import-statement","original":"./TreeItemToggle"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytes":5361,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytes":692,"imports":[{"path":"packages/ui/react-ui-list/src/components/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":580,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"},{"path":"packages/ui/react-ui-list/src/components/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":46298},"packages/ui/react-ui-list/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["List","RawTreeItem","Tree","TreeDataSchema","TreeItem","TreeProvider","isTreeData","useTree"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6469},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":2175},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytesInOutput":1022},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytesInOutput":293},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytesInOutput":7883},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytesInOutput":1822},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytesInOutput":766},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytesInOutput":162},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":21742}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -144,7 +144,7 @@ var stateStyles = {
|
|
|
144
144
|
var defaultContext = {};
|
|
145
145
|
var LIST_ITEM_NAME = "ListItem";
|
|
146
146
|
var [ListItemProvider, useListItemContext] = (0, import_react_context.createContext)(LIST_ITEM_NAME, defaultContext);
|
|
147
|
-
var ListItem = ({ children, classNames, item
|
|
147
|
+
var ListItem = ({ children, classNames, item }) => {
|
|
148
148
|
const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
|
|
149
149
|
const ref = (0, import_react.useRef)(null);
|
|
150
150
|
const dragHandleRef = (0, import_react.useRef)(null);
|
|
@@ -153,7 +153,7 @@ var ListItem = ({ children, classNames, item, ...props }) => {
|
|
|
153
153
|
const element = ref.current;
|
|
154
154
|
(0, import_invariant.invariant)(element, void 0, {
|
|
155
155
|
F: __dxlog_file,
|
|
156
|
-
L:
|
|
156
|
+
L: 90,
|
|
157
157
|
S: void 0,
|
|
158
158
|
A: [
|
|
159
159
|
"element",
|
|
@@ -262,13 +262,11 @@ var ListItem = ({ children, classNames, item, ...props }) => {
|
|
|
262
262
|
item,
|
|
263
263
|
dragHandleRef
|
|
264
264
|
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
265
|
-
role: "none",
|
|
266
265
|
className: "relative"
|
|
267
266
|
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
268
267
|
ref,
|
|
269
268
|
role: "listitem",
|
|
270
|
-
className: (0, import_react_ui_theme.mx)("flex overflow-hidden", classNames, stateStyles[state.type])
|
|
271
|
-
...props
|
|
269
|
+
className: (0, import_react_ui_theme.mx)("flex overflow-hidden", classNames, stateStyles[state.type])
|
|
272
270
|
}, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react.default.createElement(import_react_ui.ListItem.DropIndicator, {
|
|
273
271
|
edge: state.closestEdge
|
|
274
272
|
})));
|
|
@@ -357,7 +355,7 @@ var TreeItemHeading = /* @__PURE__ */ (0, import_react6.memo)(/* @__PURE__ */ (0
|
|
|
357
355
|
"data-testid": "treeItem.heading",
|
|
358
356
|
variant: "ghost",
|
|
359
357
|
density: "fine",
|
|
360
|
-
classNames: (0, import_react_ui_theme3.mx)("grow gap-2 pis-0.5 hover
|
|
358
|
+
classNames: (0, import_react_ui_theme3.mx)("grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent", "disabled:!cursor-default disabled:!opacity-100", className),
|
|
361
359
|
disabled,
|
|
362
360
|
onClick: handleSelect,
|
|
363
361
|
onKeyDown: handleButtonKeydown,
|
|
@@ -373,14 +371,14 @@ var TreeItemHeading = /* @__PURE__ */ (0, import_react6.memo)(/* @__PURE__ */ (0
|
|
|
373
371
|
"data-tooltip": true
|
|
374
372
|
}, (0, import_react_ui4.toLocalizedString)(label, t))));
|
|
375
373
|
}));
|
|
376
|
-
var TreeItemToggle = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0, import_react7.forwardRef)(({ open, isBranch,
|
|
374
|
+
var TreeItemToggle = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0, import_react7.forwardRef)(({ open, isBranch, onToggle }, forwardedRef) => {
|
|
377
375
|
return /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Button, {
|
|
378
376
|
ref: forwardedRef,
|
|
379
377
|
"data-testid": "treeItem.toggle",
|
|
380
378
|
"aria-expanded": open,
|
|
381
379
|
variant: "ghost",
|
|
382
380
|
density: "fine",
|
|
383
|
-
classNames: (0, import_react_ui_theme4.mx)("is-
|
|
381
|
+
classNames: (0, import_react_ui_theme4.mx)("is-6 !pli-1", !isBranch && "invisible"),
|
|
384
382
|
onClick: onToggle
|
|
385
383
|
}, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Icon, {
|
|
386
384
|
icon: "ph--caret-right--regular",
|
|
@@ -389,7 +387,7 @@ var TreeItemToggle = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0,
|
|
|
389
387
|
}));
|
|
390
388
|
}));
|
|
391
389
|
var DEFAULT_INDENTATION = 8;
|
|
392
|
-
var
|
|
390
|
+
var paddingIndendation = (level, indentation = DEFAULT_INDENTATION) => ({
|
|
393
391
|
paddingInlineStart: `${(level - 1) * indentation}px`
|
|
394
392
|
});
|
|
395
393
|
var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
|
|
@@ -400,7 +398,7 @@ var TreeDataSchema = import_echo_schema.S.Struct({
|
|
|
400
398
|
item: import_echo_schema.S.Any
|
|
401
399
|
});
|
|
402
400
|
var isTreeData = (data) => import_echo_schema.S.is(TreeDataSchema)(data);
|
|
403
|
-
var RawTreeItem = ({ item, path: _path, last, draggable:
|
|
401
|
+
var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColumns: Columns, canDrop, onOpenChange, onSelect }) => {
|
|
404
402
|
const { getItems, getProps, isOpen, isCurrent } = useTree();
|
|
405
403
|
const items = getItems(item);
|
|
406
404
|
const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
|
|
@@ -413,7 +411,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
|
|
|
413
411
|
]);
|
|
414
412
|
const open = isOpen(path, item);
|
|
415
413
|
const current = isCurrent(path, item);
|
|
416
|
-
const level = path.length -
|
|
414
|
+
const level = path.length - 2;
|
|
417
415
|
const isBranch = !!parentOf;
|
|
418
416
|
const mode = last ? "last-in-group" : open ? "expanded" : "standard";
|
|
419
417
|
const data = (0, import_react5.useMemo)(() => ({
|
|
@@ -439,98 +437,94 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
|
|
|
439
437
|
}
|
|
440
438
|
}, []);
|
|
441
439
|
(0, import_react5.useEffect)(() => {
|
|
442
|
-
if (!
|
|
440
|
+
if (!draggable2) {
|
|
443
441
|
return;
|
|
444
442
|
}
|
|
445
443
|
(0, import_invariant2.invariant)(buttonRef.current, void 0, {
|
|
446
444
|
F: __dxlog_file2,
|
|
447
|
-
L:
|
|
445
|
+
L: 109,
|
|
448
446
|
S: void 0,
|
|
449
447
|
A: [
|
|
450
448
|
"buttonRef.current",
|
|
451
449
|
""
|
|
452
450
|
]
|
|
453
451
|
});
|
|
454
|
-
return (0, import_combine2.combine)(
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
});
|
|
467
|
-
}
|
|
468
|
-
},
|
|
469
|
-
onDrop: () => {
|
|
470
|
-
setState("idle");
|
|
471
|
-
if (openRef.current) {
|
|
472
|
-
onOpenChange?.({
|
|
473
|
-
item,
|
|
474
|
-
path,
|
|
475
|
-
open: true
|
|
476
|
-
});
|
|
477
|
-
}
|
|
452
|
+
return (0, import_combine2.combine)((0, import_adapter3.draggable)({
|
|
453
|
+
element: buttonRef.current,
|
|
454
|
+
getInitialData: () => data,
|
|
455
|
+
onDragStart: () => {
|
|
456
|
+
setState("dragging");
|
|
457
|
+
if (open) {
|
|
458
|
+
openRef.current = true;
|
|
459
|
+
onOpenChange?.({
|
|
460
|
+
item,
|
|
461
|
+
path,
|
|
462
|
+
open: false
|
|
463
|
+
});
|
|
478
464
|
}
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
indentPerLevel: DEFAULT_INDENTATION,
|
|
488
|
-
currentLevel: level,
|
|
489
|
-
mode,
|
|
490
|
-
block: isBranch ? [] : [
|
|
491
|
-
"make-child"
|
|
492
|
-
]
|
|
465
|
+
},
|
|
466
|
+
onDrop: () => {
|
|
467
|
+
setState("idle");
|
|
468
|
+
if (openRef.current) {
|
|
469
|
+
onOpenChange?.({
|
|
470
|
+
item,
|
|
471
|
+
path,
|
|
472
|
+
open: true
|
|
493
473
|
});
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
}), (0, import_adapter3.dropTargetForElements)({
|
|
477
|
+
element: buttonRef.current,
|
|
478
|
+
getData: ({ input, element }) => {
|
|
479
|
+
return (0, import_tree_item.attachInstruction)(data, {
|
|
480
|
+
input,
|
|
481
|
+
element,
|
|
482
|
+
indentPerLevel: DEFAULT_INDENTATION,
|
|
483
|
+
currentLevel: level,
|
|
484
|
+
mode,
|
|
485
|
+
block: isBranch ? [] : [
|
|
486
|
+
"make-child"
|
|
487
|
+
]
|
|
488
|
+
});
|
|
489
|
+
},
|
|
490
|
+
canDrop: ({ source }) => {
|
|
491
|
+
const _canDrop = canDrop ?? (() => true);
|
|
492
|
+
return source.element !== buttonRef.current && _canDrop(source.data, data);
|
|
493
|
+
},
|
|
494
|
+
getIsSticky: () => true,
|
|
495
|
+
onDrag: ({ self, source }) => {
|
|
496
|
+
const instruction2 = (0, import_tree_item.extractInstruction)(self.data);
|
|
497
|
+
if (source.data.id !== id) {
|
|
498
|
+
if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
|
|
499
|
+
cancelExpandRef.current = setTimeout(() => {
|
|
500
|
+
onOpenChange?.({
|
|
501
|
+
item,
|
|
502
|
+
path,
|
|
503
|
+
open: true
|
|
504
|
+
});
|
|
505
|
+
}, 500);
|
|
520
506
|
}
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
setInstruction(
|
|
525
|
-
}
|
|
526
|
-
|
|
527
|
-
|
|
507
|
+
if (instruction2?.type !== "make-child") {
|
|
508
|
+
cancelExpand();
|
|
509
|
+
}
|
|
510
|
+
setInstruction(instruction2);
|
|
511
|
+
} else if (instruction2?.type === "reparent") {
|
|
512
|
+
setInstruction(instruction2);
|
|
513
|
+
} else {
|
|
528
514
|
setInstruction(null);
|
|
529
515
|
}
|
|
530
|
-
}
|
|
531
|
-
|
|
516
|
+
},
|
|
517
|
+
onDragLeave: () => {
|
|
518
|
+
cancelExpand();
|
|
519
|
+
setInstruction(null);
|
|
520
|
+
},
|
|
521
|
+
onDrop: () => {
|
|
522
|
+
cancelExpand();
|
|
523
|
+
setInstruction(null);
|
|
524
|
+
}
|
|
525
|
+
}));
|
|
532
526
|
}, [
|
|
533
|
-
|
|
527
|
+
draggable2,
|
|
534
528
|
item,
|
|
535
529
|
id,
|
|
536
530
|
mode,
|
|
@@ -589,7 +583,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
|
|
|
589
583
|
id,
|
|
590
584
|
"aria-labelledby": `${id}__label`,
|
|
591
585
|
parentOf: parentOf?.join(import_react_ui3.Treegrid.PARENT_OF_SEPARATOR),
|
|
592
|
-
classNames: (0, import_react_ui_theme2.mx)("grid grid-cols-subgrid col-[tree-row]
|
|
586
|
+
classNames: (0, import_react_ui_theme2.mx)("grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input", import_react_ui_theme2.hoverableControls, import_react_ui_theme2.hoverableFocusedKeyboardControls, import_react_ui_theme2.hoverableFocusedWithinControls, hoverableDescriptionIcons, import_react_ui_theme2.ghostHover, import_react_ui_theme2.focusRing, className),
|
|
593
587
|
"data-itemid": id,
|
|
594
588
|
"data-testid": testId,
|
|
595
589
|
// NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
|
|
@@ -604,7 +598,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
|
|
|
604
598
|
}, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Cell, {
|
|
605
599
|
indent: true,
|
|
606
600
|
classNames: "relative grid grid-cols-subgrid col-[tree-row]",
|
|
607
|
-
style:
|
|
601
|
+
style: paddingIndendation(level)
|
|
608
602
|
}, /* @__PURE__ */ import_react5.default.createElement("div", {
|
|
609
603
|
role: "none",
|
|
610
604
|
className: "flex items-center"
|
|
@@ -634,7 +628,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
|
|
|
634
628
|
item: item2,
|
|
635
629
|
path,
|
|
636
630
|
last: index === items.length - 1,
|
|
637
|
-
draggable:
|
|
631
|
+
draggable: draggable2,
|
|
638
632
|
renderColumns: Columns,
|
|
639
633
|
canDrop,
|
|
640
634
|
onOpenChange,
|
|
@@ -642,7 +636,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColum
|
|
|
642
636
|
})));
|
|
643
637
|
};
|
|
644
638
|
var TreeItem = /* @__PURE__ */ (0, import_react5.memo)(RawTreeItem);
|
|
645
|
-
var Tree = ({
|
|
639
|
+
var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect }) => {
|
|
646
640
|
const context = (0, import_react3.useMemo)(() => ({
|
|
647
641
|
getItems,
|
|
648
642
|
getProps,
|
|
@@ -654,15 +648,11 @@ var Tree = ({ root, path, id, getItems, getProps, isOpen, isCurrent, draggable:
|
|
|
654
648
|
isOpen,
|
|
655
649
|
isCurrent
|
|
656
650
|
]);
|
|
657
|
-
const items = getItems(
|
|
658
|
-
const
|
|
659
|
-
...path,
|
|
660
|
-
id
|
|
661
|
-
] : [
|
|
651
|
+
const items = getItems();
|
|
652
|
+
const path = (0, import_react3.useMemo)(() => [
|
|
662
653
|
id
|
|
663
654
|
], [
|
|
664
|
-
id
|
|
665
|
-
path
|
|
655
|
+
id
|
|
666
656
|
]);
|
|
667
657
|
return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Treegrid.Root, {
|
|
668
658
|
gridTemplateColumns,
|
|
@@ -673,9 +663,8 @@ var Tree = ({ root, path, id, getItems, getProps, isOpen, isCurrent, draggable:
|
|
|
673
663
|
key: item.id,
|
|
674
664
|
item,
|
|
675
665
|
last: index === items.length - 1,
|
|
676
|
-
path
|
|
677
|
-
|
|
678
|
-
draggable: draggable3,
|
|
666
|
+
path,
|
|
667
|
+
draggable: draggable2,
|
|
679
668
|
renderColumns,
|
|
680
669
|
canDrop,
|
|
681
670
|
onOpenChange,
|