@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.
@@ -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: ({ children, toolbar, statusbar, classNames, ...props }: StackItemContentProps) => React.JSX.Element;
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;CAC9B,CAAC;AA0GF,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
+ {"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
- toolbar?: boolean;
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
- export declare const StackItemContent: ({ children, toolbar, statusbar, classNames, ...props }: StackItemContentProps) => React.JSX.Element;
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,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,2DAM1B,qBAAqB,sBAmBvB,CAAC"}
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;AAoBvD,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,yBAmEjC,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,EAEL,KAAK,WAAW,EAMjB,MAAM,gBAAgB,CAAC;AACxB,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;;;2CA6GpD,CAAC"}
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.2"}
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.9d26e3a",
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": "^9.19.0",
42
- "@radix-ui/primitive": "^1.0.0",
43
- "@radix-ui/react-compose-refs": "^1.0.0",
44
- "@radix-ui/react-context": "^1.0.0",
45
- "@radix-ui/react-menu": "^2.0.6",
46
- "@radix-ui/react-slot": "^1.0.1",
47
- "@radix-ui/react-use-controllable-state": "^1.0.0",
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.9d26e3a",
50
- "@dxos/keyboard": "0.7.5-main.9d26e3a",
51
- "@dxos/live-object": "0.7.5-main.9d26e3a",
52
- "@dxos/react-ui-mosaic": "0.7.5-main.9d26e3a",
53
- "@dxos/react-ui-attention": "0.7.5-main.9d26e3a",
54
- "@dxos/util": "0.7.5-main.9d26e3a"
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.9d26e3a",
64
- "@dxos/echo-schema": "0.7.5-main.9d26e3a",
65
- "@dxos/random": "0.7.5-main.9d26e3a",
66
- "@dxos/client": "0.7.5-main.9d26e3a",
67
- "@dxos/react-ui": "0.7.5-main.9d26e3a",
68
- "@dxos/react-ui-editor": "0.7.5-main.9d26e3a",
69
- "@dxos/react-ui-theme": "0.7.5-main.9d26e3a",
70
- "@dxos/storybook-utils": "0.7.5-main.9d26e3a",
71
- "@dxos/test-utils": "0.7.5-main.9d26e3a"
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/react-ui-theme": "0.7.5-main.9d26e3a",
78
- "@dxos/random": "0.7.5-main.9d26e3a",
79
- "@dxos/react-ui": "0.7.5-main.9d26e3a",
80
- "@dxos/client": "0.7.5-main.9d26e3a"
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 { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
8
- import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
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
- ({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
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
- // TODO(thure): tabster focus honeypots are causing the preview to render with the wrong dimensions; what do?
86
- onGenerateDragPreview: ({ nativeSetDragImage }) => {
87
- disableNativeDragPreview({ nativeSetDragImage });
88
- preventUnhandled.start();
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 ch-focus-ring-inset-over-all',
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
- toolbar?: boolean;
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
- export const StackItemContent = ({
18
- children,
19
- toolbar = true,
20
- statusbar,
21
- classNames,
22
- ...props
23
- }: StackItemContentProps) => {
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
- return (
27
- <div
28
- role='none'
29
- {...props}
30
- className={mx('group grid grid-cols-[100%]', size === 'contain' && 'min-bs-0 overflow-hidden', classNames)}
31
- style={{
32
- gridTemplateRows: [
33
- ...(toolbar ? ['var(--rail-action)'] : []),
34
- '1fr',
35
- ...(statusbar ? ['var(--statusbar-size)'] : []),
36
- ].join(' '),
37
- }}
38
- >
39
- {children}
40
- </div>
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 ch-focus-ring-inset-over-all relative !border-is-0',
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 MIN_SIZE = 20;
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(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
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
- orientation === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize',
85
- 'group absolute is-3 bs-full inline-end-[-1px] !border-lb-0',
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:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator',
93
+ 'before:absolute before:block before:bg-accentFocusIndicator',
88
94
  )}
89
95
  >
90
96
  <div
91
97
  role='none'
92
- className='absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0'
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' /> */}