@dxos/react-ui-stack 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b
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 +70 -64
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +61 -55
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +70 -64
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/components/StackItem.d.ts +8 -1
- package/dist/types/src/components/StackItem.d.ts.map +1 -1
- package/dist/types/src/components/StackItemContent.d.ts +35 -2
- package/dist/types/src/components/StackItemContent.d.ts.map +1 -1
- package/dist/types/src/components/StackItemResizeHandle.d.ts.map +1 -1
- package/dist/types/src/components/StackItemSigil.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +27 -27
- package/src/components/StackItem.tsx +19 -9
- package/src/components/StackItemContent.tsx +45 -27
- package/src/components/StackItemHeading.tsx +2 -2
- package/src/components/StackItemResizeHandle.tsx +20 -9
- package/src/components/StackItemSigil.tsx +90 -103
- package/dist/types/src/testing/EditorContent.d.ts +0 -8
- package/dist/types/src/testing/EditorContent.d.ts.map +0 -1
- package/src/testing/EditorContent.tsx +0 -60
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-stack/src/components/StackContext.tsx":{"bytes":3091,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytes":13994,"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":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemContent.tsx":{"bytes":3343,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemDragHandle.tsx":{"bytes":2101,"imports":[{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemHeading.tsx":{"bytes":5730,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx":{"bytes":14876,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"},{"path":"packages/ui/react-ui-stack/src/components/StackItem.tsx","kind":"import-statement","original":"./StackItem"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/MenuSignifier.tsx":{"bytes":3282,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/translations.ts":{"bytes":1870,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemSigil.tsx":{"bytes":20065,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/MenuSignifier.tsx","kind":"import-statement","original":"./MenuSignifier"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItem.tsx":{"bytes":21446,"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/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"},{"path":"packages/ui/react-ui-stack/src/components/StackItemContent.tsx","kind":"import-statement","original":"./StackItemContent"},{"path":"packages/ui/react-ui-stack/src/components/StackItemDragHandle.tsx","kind":"import-statement","original":"./StackItemDragHandle"},{"path":"packages/ui/react-ui-stack/src/components/StackItemHeading.tsx","kind":"import-statement","original":"./StackItemHeading"},{"path":"packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx","kind":"import-statement","original":"./StackItemResizeHandle"},{"path":"packages/ui/react-ui-stack/src/components/StackItemSigil.tsx","kind":"import-statement","original":"./StackItemSigil"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/LayoutControls.tsx":{"bytes":11653,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/index.ts":{"bytes":801,"imports":[{"path":"packages/ui/react-ui-stack/src/components/Stack.tsx","kind":"import-statement","original":"./Stack"},{"path":"packages/ui/react-ui-stack/src/components/StackItem.tsx","kind":"import-statement","original":"./StackItem"},{"path":"packages/ui/react-ui-stack/src/components/LayoutControls.tsx","kind":"import-statement","original":"./LayoutControls"},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/index.ts":{"bytes":718,"imports":[{"path":"packages/ui/react-ui-stack/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytes":7183,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-stack/src/testing/stack-manager.ts","kind":"import-statement","original":"./stack-manager"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":52954},"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs":{"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":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"react","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/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","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/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","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}],"exports":["DEFAULT_EXTRINSIC_SIZE","DEFAULT_HORIZONTAL_SIZE","DEFAULT_VERTICAL_SIZE","LayoutControls","Stack","StackContext","StackItem","StackItemContext","railGridHorizontal","railGridVertical","translations","useStack","useStackItem"],"entryPoint":"packages/ui/react-ui-stack/src/index.ts","inputs":{"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytesInOutput":3397},"packages/ui/react-ui-stack/src/components/StackContext.tsx":{"bytesInOutput":408},"packages/ui/react-ui-stack/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-stack/src/components/StackItem.tsx":{"bytesInOutput":5094},"packages/ui/react-ui-stack/src/components/StackItemContent.tsx":{"bytesInOutput":642},"packages/ui/react-ui-stack/src/components/StackItemDragHandle.tsx":{"bytesInOutput":335},"packages/ui/react-ui-stack/src/components/StackItemHeading.tsx":{"bytesInOutput":1274},"packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx":{"bytesInOutput":3762},"packages/ui/react-ui-stack/src/components/StackItemSigil.tsx":{"bytesInOutput":4887},"packages/ui/react-ui-stack/src/components/MenuSignifier.tsx":{"bytesInOutput":442},"packages/ui/react-ui-stack/src/translations.ts":{"bytesInOutput":444},"packages/ui/react-ui-stack/src/components/LayoutControls.tsx":{"bytesInOutput":3030},"packages/ui/react-ui-stack/src/index.ts":{"bytesInOutput":0}},"bytes":24998},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3599},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs":{"imports":[],"exports":["SectionManager","StackManager"],"entryPoint":"packages/ui/react-ui-stack/src/testing/index.ts","inputs":{"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytesInOutput":1516},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytesInOutput":0}},"bytes":1748}}}
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-stack/src/components/StackContext.tsx":{"bytes":3091,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytes":13994,"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":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemContent.tsx":{"bytes":5524,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemDragHandle.tsx":{"bytes":2101,"imports":[{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemHeading.tsx":{"bytes":5758,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx":{"bytes":16102,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"},{"path":"packages/ui/react-ui-stack/src/components/StackItem.tsx","kind":"import-statement","original":"./StackItem"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/MenuSignifier.tsx":{"bytes":3282,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/translations.ts":{"bytes":1870,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItemSigil.tsx":{"bytes":18750,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/MenuSignifier.tsx","kind":"import-statement","original":"./MenuSignifier"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/StackItem.tsx":{"bytes":23131,"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/preserve-offset-on-source","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"},{"path":"packages/ui/react-ui-stack/src/components/StackItemContent.tsx","kind":"import-statement","original":"./StackItemContent"},{"path":"packages/ui/react-ui-stack/src/components/StackItemDragHandle.tsx","kind":"import-statement","original":"./StackItemDragHandle"},{"path":"packages/ui/react-ui-stack/src/components/StackItemHeading.tsx","kind":"import-statement","original":"./StackItemHeading"},{"path":"packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx","kind":"import-statement","original":"./StackItemResizeHandle"},{"path":"packages/ui/react-ui-stack/src/components/StackItemSigil.tsx","kind":"import-statement","original":"./StackItemSigil"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/LayoutControls.tsx":{"bytes":11653,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/index.ts":{"bytes":801,"imports":[{"path":"packages/ui/react-ui-stack/src/components/Stack.tsx","kind":"import-statement","original":"./Stack"},{"path":"packages/ui/react-ui-stack/src/components/StackItem.tsx","kind":"import-statement","original":"./StackItem"},{"path":"packages/ui/react-ui-stack/src/components/LayoutControls.tsx","kind":"import-statement","original":"./LayoutControls"},{"path":"packages/ui/react-ui-stack/src/components/StackContext.tsx","kind":"import-statement","original":"./StackContext"}],"format":"esm"},"packages/ui/react-ui-stack/src/index.ts":{"bytes":718,"imports":[{"path":"packages/ui/react-ui-stack/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytes":7183,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytes":519,"imports":[{"path":"packages/ui/react-ui-stack/src/testing/stack-manager.ts","kind":"import-statement","original":"./stack-manager"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":54974},"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs":{"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":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"react","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/element/preserve-offset-on-source","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-compose-refs","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},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","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/element/disable-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/prevent-unhandled","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/keyboard","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","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}],"exports":["DEFAULT_EXTRINSIC_SIZE","DEFAULT_HORIZONTAL_SIZE","DEFAULT_VERTICAL_SIZE","LayoutControls","Stack","StackContext","StackItem","StackItemContext","railGridHorizontal","railGridVertical","translations","useStack","useStackItem"],"entryPoint":"packages/ui/react-ui-stack/src/index.ts","inputs":{"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytesInOutput":3397},"packages/ui/react-ui-stack/src/components/StackContext.tsx":{"bytesInOutput":408},"packages/ui/react-ui-stack/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-stack/src/components/StackItem.tsx":{"bytesInOutput":5405},"packages/ui/react-ui-stack/src/components/StackItemContent.tsx":{"bytesInOutput":850},"packages/ui/react-ui-stack/src/components/StackItemDragHandle.tsx":{"bytesInOutput":335},"packages/ui/react-ui-stack/src/components/StackItemHeading.tsx":{"bytesInOutput":1286},"packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx":{"bytesInOutput":4101},"packages/ui/react-ui-stack/src/components/StackItemSigil.tsx":{"bytesInOutput":4540},"packages/ui/react-ui-stack/src/components/MenuSignifier.tsx":{"bytesInOutput":442},"packages/ui/react-ui-stack/src/translations.ts":{"bytesInOutput":444},"packages/ui/react-ui-stack/src/components/LayoutControls.tsx":{"bytesInOutput":3014},"packages/ui/react-ui-stack/src/index.ts":{"bytesInOutput":0}},"bytes":25505},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3599},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs":{"imports":[],"exports":["SectionManager","StackManager"],"entryPoint":"packages/ui/react-ui-stack/src/testing/index.ts","inputs":{"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytesInOutput":1516},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytesInOutput":0}},"bytes":1748}}}
|
|
@@ -15,10 +15,17 @@ export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
|
|
|
15
15
|
size?: StackItemSize;
|
|
16
16
|
onSizeChange?: (nextSize: StackItemSize) => void;
|
|
17
17
|
role?: 'article' | 'section';
|
|
18
|
+
disableRearrange?: boolean;
|
|
18
19
|
};
|
|
19
20
|
export declare const StackItem: {
|
|
20
21
|
Root: React.ForwardRefExoticComponent<Omit<StackItemRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
-
Content:
|
|
22
|
+
Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
|
|
23
|
+
classNames?: import("@dxos/react-ui").ClassNameValue;
|
|
24
|
+
} & {
|
|
25
|
+
toolbar: boolean;
|
|
26
|
+
statusbar?: boolean;
|
|
27
|
+
size?: "intrinsic" | "video" | "square";
|
|
28
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
22
29
|
Heading: ({ children, classNames, ...props }: StackItemHeadingProps) => React.JSX.Element;
|
|
23
30
|
HeadingLabel: React.ForwardRefExoticComponent<Omit<StackItemHeadingLabelProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
24
31
|
ResizeHandle: () => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItem.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAyC,KAAK,qBAAqB,EAAe,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,gBAAgB,CAAC;AAGhE,OAAO,EAA8B,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpG,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAChC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAE/B,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,uBAAuB,KAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,gBAAwC,CAAC;AAC3E,eAAO,MAAM,sBAAsB,KAAkD,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC/E,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItem.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAyC,KAAK,qBAAqB,EAAe,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,gBAAgB,CAAC;AAGhE,OAAO,EAA8B,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpG,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAChC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAE/B,MAAM,kBAAkB,CAAC;AAE1B,eAAO,MAAM,uBAAuB,KAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,gBAAwC,CAAC;AAC3E,eAAO,MAAM,sBAAsB,KAAkD,CAAC;AAEtF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC/E,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAmHF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CASrB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,GACrB,CAAC"}
|
|
@@ -1,8 +1,41 @@
|
|
|
1
1
|
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
3
|
export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate
|
|
6
|
+
* (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.
|
|
7
|
+
*/
|
|
8
|
+
toolbar: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Whether to provide for the layout of a statusbar after the content.
|
|
11
|
+
*/
|
|
5
12
|
statusbar?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for
|
|
15
|
+
* convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.
|
|
16
|
+
*/
|
|
17
|
+
size?: 'intrinsic' | 'video' | 'square';
|
|
6
18
|
};
|
|
7
|
-
|
|
19
|
+
/**
|
|
20
|
+
* This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.
|
|
21
|
+
* The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.
|
|
22
|
+
*/
|
|
23
|
+
export declare const StackItemContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
|
|
24
|
+
classNames?: import("@dxos/react-ui").ClassNameValue;
|
|
25
|
+
} & {
|
|
26
|
+
/**
|
|
27
|
+
* This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate
|
|
28
|
+
* (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.
|
|
29
|
+
*/
|
|
30
|
+
toolbar: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Whether to provide for the layout of a statusbar after the content.
|
|
33
|
+
*/
|
|
34
|
+
statusbar?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for
|
|
37
|
+
* convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.
|
|
38
|
+
*/
|
|
39
|
+
size?: "intrinsic" | "video" | "square";
|
|
40
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
8
41
|
//# sourceMappingURL=StackItemContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemContent.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,
|
|
1
|
+
{"version":3,"file":"StackItemContent.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACrF;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;IApB3B;;;OAGG;aACM,OAAO;IAChB;;OAEG;gBACS,OAAO;IACnB;;;OAGG;WACI,WAAW,GAAG,OAAO,GAAG,QAAQ;wCAkCxC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAwBvD,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,yBA0EjC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,
|
|
1
|
+
{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,WAAW,EAAyD,MAAM,gBAAgB,CAAC;AACjH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAgB,MAAM,0BAA0B,CAAC;AAOzF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE9F,eAAO,MAAM,oBAAoB,kHAgBhC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CACjD;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD,GAAG,OAAO,CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;mBARR,MAAM;kBACP,MAAM;cACV,oBAAoB,EAAE,EAAE;UAC5B,MAAM;eACD,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI;;;2CAwGpD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.7.
|
|
1
|
+
{"version":"5.7.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-stack",
|
|
3
|
-
"version": "0.7.5-main.
|
|
3
|
+
"version": "0.7.5-main.e9bb01b",
|
|
4
4
|
"description": "A stack component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -38,20 +38,20 @@
|
|
|
38
38
|
"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
|
|
39
39
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
|
|
40
40
|
"@effect/schema": "^0.75.5",
|
|
41
|
-
"@fluentui/react-tabster": "
|
|
42
|
-
"@radix-ui/primitive": "
|
|
43
|
-
"@radix-ui/react-compose-refs": "
|
|
44
|
-
"@radix-ui/react-context": "
|
|
45
|
-
"@radix-ui/react-menu": "
|
|
46
|
-
"@radix-ui/react-slot": "
|
|
47
|
-
"@radix-ui/react-use-controllable-state": "
|
|
41
|
+
"@fluentui/react-tabster": "9.23.3",
|
|
42
|
+
"@radix-ui/primitive": "1.1.1",
|
|
43
|
+
"@radix-ui/react-compose-refs": "1.1.1",
|
|
44
|
+
"@radix-ui/react-context": "1.1.1",
|
|
45
|
+
"@radix-ui/react-menu": "2.1.6",
|
|
46
|
+
"@radix-ui/react-slot": "1.1.2",
|
|
47
|
+
"@radix-ui/react-use-controllable-state": "1.1.0",
|
|
48
48
|
"react-resize-detector": "^11.0.1",
|
|
49
|
-
"@dxos/echo-schema": "0.7.5-main.
|
|
50
|
-
"@dxos/keyboard": "0.7.5-main.
|
|
51
|
-
"@dxos/
|
|
52
|
-
"@dxos/
|
|
53
|
-
"@dxos/
|
|
54
|
-
"@dxos/
|
|
49
|
+
"@dxos/echo-schema": "0.7.5-main.e9bb01b",
|
|
50
|
+
"@dxos/keyboard": "0.7.5-main.e9bb01b",
|
|
51
|
+
"@dxos/react-ui-attention": "0.7.5-main.e9bb01b",
|
|
52
|
+
"@dxos/live-object": "0.7.5-main.e9bb01b",
|
|
53
|
+
"@dxos/util": "0.7.5-main.e9bb01b",
|
|
54
|
+
"@dxos/react-ui-mosaic": "0.7.5-main.e9bb01b"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -60,24 +60,24 @@
|
|
|
60
60
|
"react": "~18.2.0",
|
|
61
61
|
"react-dom": "~18.2.0",
|
|
62
62
|
"vite": "5.4.7",
|
|
63
|
-
"@dxos/app-graph": "0.7.5-main.
|
|
64
|
-
"@dxos/
|
|
65
|
-
"@dxos/
|
|
66
|
-
"@dxos/
|
|
67
|
-
"@dxos/react-ui": "0.7.5-main.
|
|
68
|
-
"@dxos/react-ui
|
|
69
|
-
"@dxos/react-ui-theme": "0.7.5-main.
|
|
70
|
-
"@dxos/storybook-utils": "0.7.5-main.
|
|
71
|
-
"@dxos/test-utils": "0.7.5-main.
|
|
63
|
+
"@dxos/app-graph": "0.7.5-main.e9bb01b",
|
|
64
|
+
"@dxos/client": "0.7.5-main.e9bb01b",
|
|
65
|
+
"@dxos/echo-schema": "0.7.5-main.e9bb01b",
|
|
66
|
+
"@dxos/random": "0.7.5-main.e9bb01b",
|
|
67
|
+
"@dxos/react-ui-editor": "0.7.5-main.e9bb01b",
|
|
68
|
+
"@dxos/react-ui": "0.7.5-main.e9bb01b",
|
|
69
|
+
"@dxos/react-ui-theme": "0.7.5-main.e9bb01b",
|
|
70
|
+
"@dxos/storybook-utils": "0.7.5-main.e9bb01b",
|
|
71
|
+
"@dxos/test-utils": "0.7.5-main.e9bb01b"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
74
|
"@phosphor-icons/react": "^2.1.5",
|
|
75
75
|
"react": "~18.2.0",
|
|
76
76
|
"react-dom": "~18.2.0",
|
|
77
|
-
"@dxos/
|
|
78
|
-
"@dxos/
|
|
79
|
-
"@dxos/
|
|
80
|
-
"@dxos/
|
|
77
|
+
"@dxos/client": "0.7.5-main.e9bb01b",
|
|
78
|
+
"@dxos/react-ui": "0.7.5-main.e9bb01b",
|
|
79
|
+
"@dxos/random": "0.7.5-main.e9bb01b",
|
|
80
|
+
"@dxos/react-ui-theme": "0.7.5-main.e9bb01b"
|
|
81
81
|
},
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public"
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
6
6
|
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
|
|
8
|
+
import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
|
|
9
9
|
import {
|
|
10
10
|
attachClosestEdge,
|
|
11
11
|
extractClosestEdge,
|
|
@@ -46,10 +46,14 @@ export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
|
|
|
46
46
|
size?: StackItemSize;
|
|
47
47
|
onSizeChange?: (nextSize: StackItemSize) => void;
|
|
48
48
|
role?: 'article' | 'section';
|
|
49
|
+
disableRearrange?: boolean;
|
|
49
50
|
};
|
|
50
51
|
|
|
51
52
|
const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
52
|
-
(
|
|
53
|
+
(
|
|
54
|
+
{ item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, ...props },
|
|
55
|
+
forwardedRef,
|
|
56
|
+
) => {
|
|
53
57
|
const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
|
|
54
58
|
const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);
|
|
55
59
|
const [closestEdge, setEdge] = useState<Edge | null>(null);
|
|
@@ -74,7 +78,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
|
74
78
|
const type = orientation === 'horizontal' ? 'column' : 'card';
|
|
75
79
|
|
|
76
80
|
useLayoutEffect(() => {
|
|
77
|
-
if (!itemElement || !onRearrange) {
|
|
81
|
+
if (!itemElement || !onRearrange || disableRearrange) {
|
|
78
82
|
return;
|
|
79
83
|
}
|
|
80
84
|
return combine(
|
|
@@ -82,10 +86,16 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
|
82
86
|
element: itemElement,
|
|
83
87
|
...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),
|
|
84
88
|
getInitialData: () => ({ id: item.id, type }),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
+
onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
|
|
90
|
+
document.body.setAttribute('data-drag-preview', 'true');
|
|
91
|
+
scrollJustEnoughIntoView({ element: source.element });
|
|
92
|
+
const { x, y } = preserveOffsetOnSource({ element: source.element, input: location.current.input })({
|
|
93
|
+
container: (source.element.offsetParent ?? document.body) as HTMLElement,
|
|
94
|
+
});
|
|
95
|
+
nativeSetDragImage?.(source.element, x, y);
|
|
96
|
+
},
|
|
97
|
+
onDragStart: () => {
|
|
98
|
+
document.body.removeAttribute('data-drag-preview');
|
|
89
99
|
},
|
|
90
100
|
}),
|
|
91
101
|
dropTargetForElements({
|
|
@@ -126,7 +136,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
|
|
|
126
136
|
tabIndex={0}
|
|
127
137
|
{...focusGroupAttrs}
|
|
128
138
|
className={mx(
|
|
129
|
-
'group/stack-item grid relative
|
|
139
|
+
'group/stack-item grid relative dx-focus-ring-inset-over-all',
|
|
130
140
|
size === 'min-content' && (orientation === 'horizontal' ? 'is-min' : 'bs-min'),
|
|
131
141
|
orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
|
|
132
142
|
rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
// Copyright 2024 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
5
|
+
import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
|
|
6
6
|
|
|
7
7
|
import { type ThemedClassName } from '@dxos/react-ui';
|
|
8
8
|
import { mx } from '@dxos/react-ui-theme';
|
|
@@ -10,33 +10,51 @@ import { mx } from '@dxos/react-ui-theme';
|
|
|
10
10
|
import { useStack } from './StackContext';
|
|
11
11
|
|
|
12
12
|
export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate
|
|
15
|
+
* (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.
|
|
16
|
+
*/
|
|
17
|
+
toolbar: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Whether to provide for the layout of a statusbar after the content.
|
|
20
|
+
*/
|
|
14
21
|
statusbar?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for
|
|
24
|
+
* convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.
|
|
25
|
+
*/
|
|
26
|
+
size?: 'intrinsic' | 'video' | 'square';
|
|
15
27
|
};
|
|
16
28
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
...props
|
|
23
|
-
|
|
24
|
-
const { size } = useStack();
|
|
29
|
+
/**
|
|
30
|
+
* This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.
|
|
31
|
+
* The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.
|
|
32
|
+
*/
|
|
33
|
+
export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(
|
|
34
|
+
({ children, toolbar, statusbar, classNames, size = 'intrinsic', ...props }, forwardedRef) => {
|
|
35
|
+
const { size: stackItemSize } = useStack();
|
|
25
36
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
37
|
+
return (
|
|
38
|
+
<div
|
|
39
|
+
role='none'
|
|
40
|
+
{...props}
|
|
41
|
+
className={mx(
|
|
42
|
+
'group grid grid-cols-[100%]',
|
|
43
|
+
stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
|
|
44
|
+
size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',
|
|
45
|
+
classNames,
|
|
46
|
+
)}
|
|
47
|
+
style={{
|
|
48
|
+
gridTemplateRows: [
|
|
49
|
+
...(toolbar ? ['var(--rail-action)'] : []),
|
|
50
|
+
'1fr',
|
|
51
|
+
...(statusbar ? ['var(--statusbar-size)'] : []),
|
|
52
|
+
].join(' '),
|
|
53
|
+
}}
|
|
54
|
+
ref={forwardedRef}
|
|
55
|
+
>
|
|
56
|
+
{children}
|
|
57
|
+
</div>
|
|
58
|
+
);
|
|
59
|
+
},
|
|
60
|
+
);
|
|
@@ -23,7 +23,7 @@ export const StackItemHeading = ({ children, classNames, ...props }: StackItemHe
|
|
|
23
23
|
tabIndex={0}
|
|
24
24
|
{...focusableGroupAttrs}
|
|
25
25
|
className={mx(
|
|
26
|
-
'flex items-center
|
|
26
|
+
'flex items-center dx-focus-ring-inset-over-all relative !border-is-0',
|
|
27
27
|
orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
|
|
28
28
|
classNames,
|
|
29
29
|
)}
|
|
@@ -43,7 +43,7 @@ export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHea
|
|
|
43
43
|
{...props}
|
|
44
44
|
data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
|
|
45
45
|
className={mx(
|
|
46
|
-
'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText',
|
|
46
|
+
'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',
|
|
47
47
|
classNames,
|
|
48
48
|
)}
|
|
49
49
|
ref={forwardedRef}
|
|
@@ -15,7 +15,8 @@ import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
|
|
|
15
15
|
|
|
16
16
|
const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
17
17
|
|
|
18
|
-
const
|
|
18
|
+
const MIN_WIDTH = 20;
|
|
19
|
+
const MIN_HEIGHT = 3;
|
|
19
20
|
|
|
20
21
|
const measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {
|
|
21
22
|
const stackItemElement = element.closest('[data-dx-stack-item]');
|
|
@@ -23,7 +24,10 @@ const measureStackItem = (element: HTMLButtonElement): { width: number; height:
|
|
|
23
24
|
};
|
|
24
25
|
|
|
25
26
|
const getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {
|
|
26
|
-
return Math.max(
|
|
27
|
+
return Math.max(
|
|
28
|
+
client === 'clientX' ? MIN_WIDTH : MIN_HEIGHT,
|
|
29
|
+
startSize + (location.current.input[client] - location.initial.input[client]) / REM,
|
|
30
|
+
);
|
|
27
31
|
};
|
|
28
32
|
|
|
29
33
|
export type StackItemResizeHandleProps = {};
|
|
@@ -81,29 +85,36 @@ export const StackItemResizeHandle = () => {
|
|
|
81
85
|
<button
|
|
82
86
|
ref={buttonRef}
|
|
83
87
|
className={mx(
|
|
84
|
-
|
|
85
|
-
|
|
88
|
+
'group absolute',
|
|
89
|
+
orientation === 'horizontal'
|
|
90
|
+
? 'cursor-col-resize is-3 bs-full inline-end-[-1px] !border-lb-0 before:inset-block-0 before:inline-end-0 before:is-1'
|
|
91
|
+
: 'cursor-row-resize bs-3 is-full block-end-[-1px] !border-li-0 before:inset-inline-0 before:block-end-0 before:bs-1',
|
|
86
92
|
'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',
|
|
87
|
-
'before:absolute before:block before:
|
|
93
|
+
'before:absolute before:block before:bg-accentFocusIndicator',
|
|
88
94
|
)}
|
|
89
95
|
>
|
|
90
96
|
<div
|
|
91
97
|
role='none'
|
|
92
|
-
className=
|
|
98
|
+
className={mx(
|
|
99
|
+
'absolute flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0',
|
|
100
|
+
orientation === 'horizontal'
|
|
101
|
+
? 'block-start-0 inline-end-px bs-[--rail-size]'
|
|
102
|
+
: 'inline-start-0 block-end-px is-[--rail-size] flex justify-center',
|
|
103
|
+
)}
|
|
93
104
|
>
|
|
94
|
-
<DragHandleSignifier />
|
|
105
|
+
<DragHandleSignifier orientation={orientation} />
|
|
95
106
|
</div>
|
|
96
107
|
</button>
|
|
97
108
|
);
|
|
98
109
|
};
|
|
99
110
|
|
|
100
|
-
const DragHandleSignifier = () => {
|
|
111
|
+
const DragHandleSignifier = ({ orientation }: { orientation: 'horizontal' | 'vertical' }) => {
|
|
101
112
|
return (
|
|
102
113
|
<svg
|
|
103
114
|
xmlns='http://www.w3.org/2000/svg'
|
|
104
115
|
viewBox='0 0 256 256'
|
|
105
116
|
fill='currentColor'
|
|
106
|
-
className='shrink-0 bs-[1em] is-[1em] text-unAccent'
|
|
117
|
+
className={mx('shrink-0 bs-[1em] is-[1em] text-unAccent', orientation === 'vertical' && 'rotate-90')}
|
|
107
118
|
>
|
|
108
119
|
{/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />
|
|
109
120
|
<path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}
|