@dxos/react-ui-stack 0.6.13 → 0.6.14-main.2b6a0f3
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 +9 -8
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/testing/index.mjs +1 -1
- package/dist/lib/browser/testing/index.mjs.map +3 -3
- package/dist/lib/node/index.cjs +7 -6
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node/testing/index.cjs.map +2 -2
- package/dist/lib/node-esm/index.mjs +378 -0
- package/dist/lib/node-esm/index.mjs.map +7 -0
- package/dist/lib/node-esm/meta.json +1 -0
- package/dist/lib/node-esm/testing/index.mjs +161 -0
- package/dist/lib/node-esm/testing/index.mjs.map +7 -0
- package/dist/types/src/components/CaretDownUp.d.ts.map +1 -1
- package/dist/types/src/components/Deck.stories.d.ts.map +1 -1
- package/dist/types/src/components/Section.d.ts +2 -3
- package/dist/types/src/components/Section.d.ts.map +1 -1
- package/dist/types/src/components/Stack.d.ts +2 -2
- package/dist/types/src/components/Stack.d.ts.map +1 -1
- package/dist/types/src/next/Stack.d.ts +9 -0
- package/dist/types/src/next/Stack.d.ts.map +1 -0
- package/dist/types/src/next/Stack.stories.d.ts +8 -0
- package/dist/types/src/next/Stack.stories.d.ts.map +1 -0
- package/dist/types/src/next/StackItem.d.ts +14 -0
- package/dist/types/src/next/StackItem.d.ts.map +1 -0
- package/dist/types/src/next/index.d.ts +2 -0
- package/dist/types/src/next/index.d.ts.map +1 -0
- package/dist/types/src/playwright/playwright.config.d.ts +2 -2
- package/dist/types/src/playwright/playwright.config.d.ts.map +1 -1
- package/dist/types/src/testing/TableContent.d.ts.map +1 -1
- package/dist/types/src/testing/generator.d.ts +2 -2
- package/dist/types/src/testing/generator.d.ts.map +1 -1
- package/package.json +31 -21
- package/src/components/CaretDownUp.tsx +1 -0
- package/src/components/ContentTypes.stories.tsx +1 -1
- package/src/components/Deck.stories.tsx +14 -27
- package/src/components/Section.stories.tsx +1 -1
- package/src/components/Section.tsx +9 -18
- package/src/components/Stack.stories.tsx +1 -1
- package/src/components/Stack.tsx +2 -2
- package/src/next/Stack.stories.tsx +148 -0
- package/src/next/Stack.tsx +30 -0
- package/src/next/StackItem.tsx +78 -0
- package/src/next/index.ts +5 -0
- package/src/playwright/playwright.config.ts +13 -2
- package/src/playwright/smoke.spec.ts +11 -19
- package/src/testing/TableContent.tsx +1 -0
- package/src/testing/generator.ts +4 -4
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/testing/generator.ts", "../../../../src/testing/stack-manager.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { create, type ReactiveObject, S } from '@dxos/echo-schema';\nimport { faker } from '@dxos/random';\n\n// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.\n\n// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).\n\n// TODO(burdon): Util.\nexport const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>\n Array.from({ length })\n .map((_, i) => fn(i))\n .filter(Boolean) as T[];\n\n// TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?\nexport type TestItem = { id: string; type: string } & Record<string, any>;\n\ntype ObjectDataGenerator = {\n createSchema?: () => S.Schema<any>;\n createData: () => any;\n};\n\ntype ObjectFactory<T extends ReactiveObject<any>> = {\n schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.\n createObject: () => T;\n};\n\ntype ObjectFactoryMap = { [type: string]: ObjectFactory<any> };\n\nconst createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {\n const schema = createSchema?.();\n return {\n schema,\n createObject: () => (schema ? create(schema, createData()) : create(createData())),\n };\n};\n\n// TODO(burdon): Handle restricted values.\nexport const Status = ['pending', 'active', 'done'];\nexport const Priority = [1, 2, 3, 4, 5];\n\nexport const defaultGenerators: { [type: string]: ObjectDataGenerator } = {\n document: {\n createData: () => ({\n title: faker.lorem.sentence(3),\n body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),\n }),\n },\n\n image: {\n createData: () => ({\n title: faker.lorem.sentence(3),\n image: faker.helpers.arrayElement(data.images),\n body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,\n }),\n },\n\n project: {\n createSchema: () =>\n S.Struct({\n title: S.String,\n repo: S.String,\n status: S.String,\n priority: S.Number,\n }),\n createData: () => ({\n title: faker.commerce.productName(),\n repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,\n status: faker.helpers.arrayElement(Status),\n priority: faker.helpers.arrayElement(Priority),\n }),\n },\n};\n\n/**\n * Typed object generator.\n * @deprecated\n */\n// TODO(wittjosiah): Remove.\nexport class TestObjectGenerator {\n public readonly factories: ObjectFactoryMap;\n\n constructor({ types, factories }: { types?: string[]; factories?: ObjectFactoryMap } = {}) {\n this.factories =\n factories ??\n (types ?? Object.keys(defaultGenerators)).reduce<ObjectFactoryMap>((acc, type) => {\n acc[type] = createFactory(defaultGenerators[type]);\n return acc;\n }, {});\n }\n\n get schema(): S.Schema<any>[] {\n return Object.values(this.factories).map((f) => f.schema!);\n }\n\n createObject({ types }: { types?: string[] } = {}) {\n const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));\n const factory = this.factories[type];\n return factory?.createObject();\n }\n\n createObjects({ types, length }: { types?: string[]; length: number }) {\n return range(() => this.createObject({ types }), length);\n }\n}\n\n// https://unsplash.com\n// TODO(burdon): Use https://picsum.photos?\nconst data = {\n images: [\n '/images/image-1.png',\n '/images/image-2.png',\n '/images/image-3.png',\n '/images/image-4.png',\n '/images/image-5.png',\n '/images/image-6.png',\n ],\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type { Locator, Page } from '@playwright/test';\n\nexport class StackManager {\n private readonly _page: Page;\n\n constructor(readonly locator: Locator) {\n this._page = locator.page();\n }\n\n empty() {\n return this.locator.getByTestId('stack.empty');\n }\n\n sections() {\n return this.locator.locator('li');\n }\n\n order() {\n return this.locator.locator('li').evaluateAll((els) => els.map((el) => el.getAttribute('id')));\n }\n\n section(index: number) {\n return new SectionManager(this.locator.locator('li').nth(index));\n }\n}\n\nexport class SectionManager {\n private readonly _page: Page;\n\n constructor(readonly locator: Locator) {\n this._page = locator.page();\n }\n\n async id() {\n return this.locator.getAttribute('id');\n }\n\n async remove() {\n await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n await this._page.getByTestId('section.remove').click();\n }\n\n async navigateTo() {\n await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n await this._page.getByTestId('section.navigate-to').click();\n }\n\n async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }) {\n const active = this.locator.getByTestId('section.drag-handle-menu-trigger');\n const box = await target.boundingBox();\n if (box) {\n await active.hover();\n await this._page.mouse.down();\n // Timeouts are for input discretization in WebKit\n await this._page.waitForTimeout(100);\n await this._page.pause();\n await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n await this._page.pause();\n await this._page.waitForTimeout(100);\n await this._page.mouse.up();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["create", "S", "faker", "range", "fn", "length", "Array", "from", "map", "_", "i", "filter", "Boolean", "createFactory", "createSchema", "createData", "schema", "createObject", "create", "Status", "Priority", "defaultGenerators", "document", "title", "faker", "lorem", "sentence", "body", "sentences", "min", "max", "number", "int", "image", "helpers", "arrayElement", "data", "images", "datatype", "boolean", "undefined", "project", "S", "Struct", "String", "repo", "status", "priority", "Number", "commerce", "productName", "probability", "internet", "url", "TestObjectGenerator", "constructor", "types", "factories", "Object", "keys", "reduce", "acc", "type", "values", "f", "factory", "createObjects", "StackManager", "constructor", "locator", "_page", "page", "empty", "getByTestId", "sections", "order", "evaluateAll", "els", "map", "el", "getAttribute", "section", "index", "SectionManager", "nth", "id", "remove", "click", "navigateTo", "dragTo", "target", "offset", "x", "y", "active", "box", "boundingBox", "hover", "mouse", "down", "waitForTimeout", "pause", "move", "width", "height", "steps", "up"]
|
|
7
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaretDownUp.d.ts","sourceRoot":"","sources":["../../../../src/components/CaretDownUp.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CaretDownUp.d.ts","sourceRoot":"","sources":["../../../../src/components/CaretDownUp.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,mCAAoC,SAAS,sBAuBpE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Deck.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Deck.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Deck.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Deck.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAgE,MAAM,OAAO,CAAC;;;;;;;AAsFrF,wBAME;AAEF,eAAO,MAAM,iBAAiB;;;CAoB7B,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;CAoB9C,CAAC;AA2CF,eAAO,MAAM,kBAAkB,yBA+K9B,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { type IconProps } from '@phosphor-icons/react';
|
|
2
1
|
import React, { type ForwardRefExoticComponent, type RefAttributes, type FC, type PropsWithChildren, type ComponentPropsWithRef } from 'react';
|
|
3
2
|
import { type Label, type ThemedClassName } from '@dxos/react-ui';
|
|
4
3
|
import { type MosaicActiveType, type MosaicDataItem, type MosaicTileComponent, type MosaicTileProps } from '@dxos/react-ui-mosaic';
|
|
@@ -30,13 +29,13 @@ export type StackSectionItem = MosaicDataItem & {
|
|
|
30
29
|
custom?: Record<string, any>;
|
|
31
30
|
};
|
|
32
31
|
metadata?: {
|
|
33
|
-
icon?:
|
|
32
|
+
icon?: string;
|
|
34
33
|
placeholder?: Label;
|
|
35
34
|
viewActions?: (item: StackSectionItem) => StackAction;
|
|
36
35
|
};
|
|
37
36
|
};
|
|
38
37
|
export type StackAction = {
|
|
39
|
-
icon:
|
|
38
|
+
icon: string;
|
|
40
39
|
label: Label;
|
|
41
40
|
onClick: () => void;
|
|
42
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAGZ,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAClB,KAAK,EAAE,EACP,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC3B,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,KAAK,KAAK,EAIV,KAAK,eAAe,EAIrB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAErB,MAAM,uBAAuB,CAAC;AAgB/B,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC;AAE/E,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,mBAAmB,GAAG,mBAAmB,IAAI;IACvF,cAAc,EAAE,EAAE,CAAC;QAAE,IAAI,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,gBAAgB,CAAC;IACtE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpE,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACvD,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9D,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG;IACvC,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C,MAAM,EAAE,mBAAmB,CAAC;IAE5B,IAAI,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,WAAW,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KAC9B,CAAC;IAEF,QAAQ,CAAC,EAAE;QACT,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,KAAK,CAAC;QACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,WAAW,CAAC;KACvD,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C;IAEE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,GAAG,IAAI,CACN,eAAe,EACf,gBAAgB,GAAG,gBAAgB,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,aAAa,CAC/F,GACC,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,aAAa,GAAG,mBAAmB,CAAC,GAC3E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,GAC9D,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,CACvD,CAAC;AAIF,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAAC,YAAY,GAAG,aAAa,CAAC,aAAa,CAAC,CAgM1F,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC;AAGhF,eAAO,MAAM,oBAAoB,kGACgE,CAAC;AAElG,eAAO,MAAM,cAAc,6BAA8B,mBAAmB,sBAM3E,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,mBAAmB,CAC3C,gBAAgB,EAChB,aAAa,CA+Cb,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
import { type MosaicContainerProps } from '@dxos/react-ui-mosaic';
|
|
3
3
|
import { type CollapsedSections, type AddSectionPosition, type StackContextValue, type StackSectionContent, type StackSectionItem } from './Section';
|
|
4
4
|
export type Direction = 'horizontal' | 'vertical';
|
|
@@ -8,7 +8,7 @@ export type StackProps<TData extends StackSectionContent = StackSectionContent>
|
|
|
8
8
|
items?: StackSectionItem[];
|
|
9
9
|
separation?: boolean;
|
|
10
10
|
onCollapseSection?: (id: string, collapsed: boolean) => void;
|
|
11
|
-
emptyComponent?:
|
|
11
|
+
emptyComponent?: ReactNode;
|
|
12
12
|
};
|
|
13
13
|
export declare const Stack: ({ id, type, SectionContent, items, separation, transform, onOver, onDrop, onAddSection, onDeleteSection, onNavigateToSection, onCollapseSection, ...props }: StackProps) => React.JSX.Element;
|
|
14
14
|
//# sourceMappingURL=Stack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.tsx"],"names":[],"mappings":"AAKA,OAAO,
|
|
1
|
+
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAIvE,OAAO,EACL,KAAK,oBAAoB,EAO1B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EAEvB,KAAK,iBAAiB,EAEtB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACtB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,CAAC;AAEtD,eAAO,MAAM,YAAY,kBAAkB,CAAC;AAE5C,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,mBAAmB,GAAG,mBAAmB,IAAI,IAAI,CACpF,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,EACnC,OAAO,GAAG,WAAW,CACtB,GACC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,sBAAsB,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAEJ,eAAO,MAAM,KAAK,gKAcf,UAAU,sBA8DZ,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
|
+
type Orientation = 'horizontal' | 'vertical';
|
|
4
|
+
export type StackProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
|
|
5
|
+
orientation?: Orientation;
|
|
6
|
+
};
|
|
7
|
+
export declare const Stack: ({ children, classNames, style, orientation, ...props }: StackProps) => React.JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=Stack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/next/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAgC,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG;IACpG,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,KAAK,2DAA4D,UAAU,sBAcvF,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type Meta, type StoryObj } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
declare const StorybookStack: () => React.JSX.Element;
|
|
4
|
+
type Story = StoryObj<typeof StorybookStack>;
|
|
5
|
+
export declare const Default: Story;
|
|
6
|
+
declare const meta: Meta<typeof StorybookStack>;
|
|
7
|
+
export default meta;
|
|
8
|
+
//# sourceMappingURL=Stack.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/next/Stack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AA4BrD,QAAA,MAAM,cAAc,yBAgGnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
2
|
+
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import { type ThemedClassName } from '@dxos/react-ui';
|
|
4
|
+
import { type StackProps } from './Stack';
|
|
5
|
+
export type StackItemProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
|
|
6
|
+
item: {
|
|
7
|
+
id: string;
|
|
8
|
+
type: 'column' | 'card';
|
|
9
|
+
};
|
|
10
|
+
orientation?: StackProps['orientation'];
|
|
11
|
+
onReorder: (sourceId: string, targetId: string, closestEdge: Edge | null) => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const StackItem: ({ item, children, classNames, orientation, onReorder, ...props }: StackItemProps) => React.JSX.Element;
|
|
14
|
+
//# sourceMappingURL=StackItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/next/StackItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,IAAI,EAEV,MAAM,uDAAuD,CAAC;AAE/D,OAAO,KAAK,EAAE,EAA+B,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG;IACxG,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACnF,CAAC;AAEF,eAAO,MAAM,SAAS,qEAAsE,cAAc,sBAoDzG,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export default
|
|
1
|
+
declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
|
|
2
|
+
export default _default;
|
|
3
3
|
//# sourceMappingURL=playwright.config.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../src/playwright/playwright.config.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../src/playwright/playwright.config.ts"],"names":[],"mappings":";AASA,wBAQG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/TableContent.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/TableContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8BF,eAAO,MAAM,WAAW,cAAe,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,KAAG,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,EAqCzF,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,WAWtC,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAEjG,eAAO,MAAM,YAAY,gCAAiC;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,sBAMpF,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { type ReactiveObject, S } from '@dxos/echo-schema';
|
|
2
2
|
export declare const range: <T>(fn: (i: number) => T | undefined, length: number) => T[];
|
|
3
3
|
export type TestItem = {
|
|
4
4
|
id: string;
|
|
@@ -8,7 +8,7 @@ type ObjectDataGenerator = {
|
|
|
8
8
|
createSchema?: () => S.Schema<any>;
|
|
9
9
|
createData: () => any;
|
|
10
10
|
};
|
|
11
|
-
type ObjectFactory<T extends
|
|
11
|
+
type ObjectFactory<T extends ReactiveObject<any>> = {
|
|
12
12
|
schema?: S.Schema<any>;
|
|
13
13
|
createObject: () => T;
|
|
14
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,cAAc,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAQnE,eAAO,MAAM,KAAK,GAAI,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,UAAU,MAAM,KAAG,CAAC,EAGlD,CAAC;AAG5B,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACnC,UAAU,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC,IAAI;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAW/D,eAAO,MAAM,MAAM,UAAgC,CAAC;AACpD,eAAO,MAAM,QAAQ,UAAkB,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAA;CA+BpE,CAAC;AAEF;;;GAGG;AAEH,qBAAa,mBAAmB;IAC9B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;gBAEhC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,gBAAgB,CAAA;KAAO;IASzF,IAAI,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAE5B;IAED,YAAY,CAAC,EAAE,KAAK,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAO;IAMjD,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAGtE"}
|
package/package.json
CHANGED
|
@@ -1,23 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-stack",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.14-main.2b6a0f3",
|
|
4
4
|
"description": "A stack component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"author": "DXOS.org",
|
|
9
|
+
"sideEffects": false,
|
|
9
10
|
"exports": {
|
|
10
11
|
".": {
|
|
11
12
|
"browser": "./dist/lib/browser/index.mjs",
|
|
12
13
|
"node": {
|
|
13
|
-
"
|
|
14
|
+
"require": "./dist/lib/node/index.cjs",
|
|
15
|
+
"default": "./dist/lib/node-esm/index.mjs"
|
|
14
16
|
},
|
|
15
17
|
"types": "./dist/types/src/index.d.ts"
|
|
16
18
|
},
|
|
17
19
|
"./testing": {
|
|
18
20
|
"browser": "./dist/lib/browser/testing/index.mjs",
|
|
19
21
|
"node": {
|
|
20
|
-
"
|
|
22
|
+
"require": "./dist/lib/node/testing/index.cjs",
|
|
23
|
+
"default": "./dist/lib/node-esm/testing/index.mjs"
|
|
21
24
|
},
|
|
22
25
|
"types": "./dist/types/src/testing/index.d.ts"
|
|
23
26
|
}
|
|
@@ -35,6 +38,10 @@
|
|
|
35
38
|
"src"
|
|
36
39
|
],
|
|
37
40
|
"dependencies": {
|
|
41
|
+
"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
|
|
42
|
+
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
|
|
43
|
+
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
|
|
44
|
+
"@effect/schema": "^0.75.1",
|
|
38
45
|
"@fluentui/react-tabster": "^9.19.0",
|
|
39
46
|
"@radix-ui/primitive": "^1.0.0",
|
|
40
47
|
"@radix-ui/react-collapsible": "^1.0.2",
|
|
@@ -43,11 +50,10 @@
|
|
|
43
50
|
"@radix-ui/react-menu": "^2.0.6",
|
|
44
51
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
45
52
|
"react-resize-detector": "^11.0.1",
|
|
46
|
-
"@dxos/
|
|
47
|
-
"@dxos/react-ui-
|
|
48
|
-
"@dxos/react-ui-
|
|
49
|
-
"@dxos/react-ui-mosaic": "0.6.
|
|
50
|
-
"@dxos/react-ui-theme": "0.6.13"
|
|
53
|
+
"@dxos/echo-schema": "0.6.14-main.2b6a0f3",
|
|
54
|
+
"@dxos/react-ui-deck": "0.6.14-main.2b6a0f3",
|
|
55
|
+
"@dxos/react-ui-attention": "0.6.14-main.2b6a0f3",
|
|
56
|
+
"@dxos/react-ui-mosaic": "0.6.14-main.2b6a0f3"
|
|
51
57
|
},
|
|
52
58
|
"devDependencies": {
|
|
53
59
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -55,22 +61,26 @@
|
|
|
55
61
|
"@types/react-dom": "~18.2.0",
|
|
56
62
|
"react": "~18.2.0",
|
|
57
63
|
"react-dom": "~18.2.0",
|
|
58
|
-
"vite": "
|
|
59
|
-
"@dxos/client": "0.6.
|
|
60
|
-
"@dxos/echo-schema": "0.6.
|
|
61
|
-
"@dxos/random": "0.6.
|
|
62
|
-
"@dxos/react-ui
|
|
63
|
-
"@dxos/react-ui-table": "0.6.
|
|
64
|
-
"@dxos/
|
|
65
|
-
"@dxos/
|
|
64
|
+
"vite": "5.4.7",
|
|
65
|
+
"@dxos/client": "0.6.14-main.2b6a0f3",
|
|
66
|
+
"@dxos/echo-schema": "0.6.14-main.2b6a0f3",
|
|
67
|
+
"@dxos/random": "0.6.14-main.2b6a0f3",
|
|
68
|
+
"@dxos/react-ui": "0.6.14-main.2b6a0f3",
|
|
69
|
+
"@dxos/react-ui-table": "0.6.14-main.2b6a0f3",
|
|
70
|
+
"@dxos/react-ui-editor": "0.6.14-main.2b6a0f3",
|
|
71
|
+
"@dxos/react-ui-theme": "0.6.14-main.2b6a0f3",
|
|
72
|
+
"@dxos/test-utils": "0.6.14-main.2b6a0f3",
|
|
73
|
+
"@dxos/storybook-utils": "0.6.14-main.2b6a0f3",
|
|
74
|
+
"@dxos/util": "0.6.14-main.2b6a0f3"
|
|
66
75
|
},
|
|
67
76
|
"peerDependencies": {
|
|
68
77
|
"@phosphor-icons/react": "^2.1.5",
|
|
69
|
-
"react": "
|
|
70
|
-
"react-dom": "
|
|
71
|
-
"@dxos/
|
|
72
|
-
"@dxos/
|
|
73
|
-
"@dxos/
|
|
78
|
+
"react": "~18.2.0",
|
|
79
|
+
"react-dom": "~18.2.0",
|
|
80
|
+
"@dxos/random": "0.6.14-main.2b6a0f3",
|
|
81
|
+
"@dxos/react-ui": "0.6.14-main.2b6a0f3",
|
|
82
|
+
"@dxos/react-ui-theme": "0.6.14-main.2b6a0f3",
|
|
83
|
+
"@dxos/client": "0.6.14-main.2b6a0f3"
|
|
74
84
|
},
|
|
75
85
|
"publishConfig": {
|
|
76
86
|
"access": "public"
|
|
@@ -42,7 +42,7 @@ const ContentTypesStoryStack = ({ items }: { items: StackSectionItem[] }) => {
|
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
export default {
|
|
45
|
-
title: 'react-ui-stack/ContentTypes',
|
|
45
|
+
title: 'ui/react-ui-stack/ContentTypes',
|
|
46
46
|
component: ContentTypesStoryStack,
|
|
47
47
|
decorators: [withTheme, withLayout({ tooltips: true })],
|
|
48
48
|
};
|
|
@@ -4,23 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
import '@dxos-theme';
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
Books,
|
|
9
|
-
CardsThree,
|
|
10
|
-
CaretLeft,
|
|
11
|
-
CaretLineLeft,
|
|
12
|
-
CaretLineRight,
|
|
13
|
-
CaretRight,
|
|
14
|
-
SidebarSimple,
|
|
15
|
-
TextAa,
|
|
16
|
-
X,
|
|
17
|
-
} from '@phosphor-icons/react';
|
|
7
|
+
import { CaretLeft, CaretLineLeft, CaretLineRight, CaretRight, SidebarSimple, X } from '@phosphor-icons/react';
|
|
18
8
|
import React, { type PropsWithChildren, useState, type ComponentProps } from 'react';
|
|
19
9
|
|
|
20
10
|
import { faker } from '@dxos/random';
|
|
21
|
-
import { Button, Main } from '@dxos/react-ui';
|
|
22
|
-
import {
|
|
23
|
-
import { PlankHeading,
|
|
11
|
+
import { Button, Icon, Main } from '@dxos/react-ui';
|
|
12
|
+
import { RootAttentionProvider } from '@dxos/react-ui-attention';
|
|
13
|
+
import { PlankHeading, Deck as NaturalDeck, Plank } from '@dxos/react-ui-deck';
|
|
24
14
|
import { Mosaic, type MosaicDataItem } from '@dxos/react-ui-mosaic';
|
|
25
15
|
import { withTheme } from '@dxos/storybook-utils';
|
|
26
16
|
import { arrayMove } from '@dxos/util';
|
|
@@ -51,7 +41,7 @@ const SimpleContent = ({ data }: { data: MosaicDataItem & { title?: string; body
|
|
|
51
41
|
const rollItems = (n: number): StackSectionItem[] => {
|
|
52
42
|
return [...Array(n)].map(() => ({
|
|
53
43
|
id: faker.string.uuid(),
|
|
54
|
-
icon:
|
|
44
|
+
icon: 'ph--text-aa--regular',
|
|
55
45
|
isResizable: true,
|
|
56
46
|
object: {
|
|
57
47
|
id: faker.string.uuid(),
|
|
@@ -74,7 +64,7 @@ const StackPlank = ({ label, items, id, children }: PropsWithChildren<PlankProps
|
|
|
74
64
|
<>
|
|
75
65
|
<PlankHeading.Root classNames='pli-px'>
|
|
76
66
|
<PlankHeading.Button>
|
|
77
|
-
<
|
|
67
|
+
<Icon icon='ph--cards-three--regular' size={5} />
|
|
78
68
|
</PlankHeading.Button>
|
|
79
69
|
<PlankHeading.Label classNames='flex-1 truncate'>{label}</PlankHeading.Label>
|
|
80
70
|
{children}
|
|
@@ -103,7 +93,7 @@ const DemoStackPlank = (rootProps: Partial<ComponentProps<typeof Plank.Root>>) =
|
|
|
103
93
|
|
|
104
94
|
export default {
|
|
105
95
|
// NOTE(thure): This is intentionally organized under `react-ui-deck` so that related stories appear together in Storybook despite needing to live in separate packages based on dependencies.
|
|
106
|
-
title: 'react-ui-deck/Deck',
|
|
96
|
+
title: 'ui/react-ui-deck/Deck',
|
|
107
97
|
component: NaturalDeck.Root,
|
|
108
98
|
decorators: [withTheme],
|
|
109
99
|
args: {},
|
|
@@ -112,10 +102,9 @@ export default {
|
|
|
112
102
|
export const StaticBasicStacks = {
|
|
113
103
|
args: {},
|
|
114
104
|
render: () => {
|
|
115
|
-
const [attended] = useState(new Set<string>());
|
|
116
105
|
return (
|
|
117
106
|
<Mosaic.Root>
|
|
118
|
-
<
|
|
107
|
+
<RootAttentionProvider>
|
|
119
108
|
<Mosaic.DragOverlay />
|
|
120
109
|
<NaturalDeck.Root classNames='fixed inset-0 z-0'>
|
|
121
110
|
<DemoStackPlank />
|
|
@@ -126,7 +115,7 @@ export const StaticBasicStacks = {
|
|
|
126
115
|
<DemoStackPlank />
|
|
127
116
|
<DemoStackPlank />
|
|
128
117
|
</NaturalDeck.Root>
|
|
129
|
-
</
|
|
118
|
+
</RootAttentionProvider>
|
|
130
119
|
</Mosaic.Root>
|
|
131
120
|
);
|
|
132
121
|
},
|
|
@@ -135,10 +124,9 @@ export const StaticBasicStacks = {
|
|
|
135
124
|
export const StaticBasicStacksWithOverscrolling = {
|
|
136
125
|
args: {},
|
|
137
126
|
render: () => {
|
|
138
|
-
const [attended] = useState(new Set<string>());
|
|
139
127
|
return (
|
|
140
128
|
<Mosaic.Root>
|
|
141
|
-
<
|
|
129
|
+
<RootAttentionProvider>
|
|
142
130
|
<Mosaic.DragOverlay />
|
|
143
131
|
<NaturalDeck.Root classNames='fixed inset-0 z-0'>
|
|
144
132
|
<DemoStackPlank />
|
|
@@ -149,7 +137,7 @@ export const StaticBasicStacksWithOverscrolling = {
|
|
|
149
137
|
<DemoStackPlank />
|
|
150
138
|
<DemoStackPlank />
|
|
151
139
|
</NaturalDeck.Root>
|
|
152
|
-
</
|
|
140
|
+
</RootAttentionProvider>
|
|
153
141
|
</Mosaic.Root>
|
|
154
142
|
);
|
|
155
143
|
},
|
|
@@ -205,7 +193,6 @@ export const DynamicBasicStacks = () => {
|
|
|
205
193
|
return acc;
|
|
206
194
|
}, {}),
|
|
207
195
|
);
|
|
208
|
-
const [attended] = useState(new Set<string>());
|
|
209
196
|
|
|
210
197
|
const [navOpen, setNavOpen] = useState(true);
|
|
211
198
|
const [c11yOpen, setC11yOpen] = useState(false);
|
|
@@ -244,7 +231,7 @@ export const DynamicBasicStacks = () => {
|
|
|
244
231
|
<>
|
|
245
232
|
<PlankHeading.Root classNames='pli-px'>
|
|
246
233
|
<PlankHeading.Button>
|
|
247
|
-
<
|
|
234
|
+
<Icon icon='ph--books--regular' size={5} />
|
|
248
235
|
</PlankHeading.Button>
|
|
249
236
|
<PlankHeading.Label classNames='grow'>Menu</PlankHeading.Label>
|
|
250
237
|
{c11yContent === MENU ? (
|
|
@@ -295,7 +282,7 @@ export const DynamicBasicStacks = () => {
|
|
|
295
282
|
|
|
296
283
|
return (
|
|
297
284
|
<Mosaic.Root>
|
|
298
|
-
<
|
|
285
|
+
<RootAttentionProvider>
|
|
299
286
|
<Main.Root complementarySidebarOpen={c11yOpen} navigationSidebarOpen={navOpen}>
|
|
300
287
|
<Main.Overlay />
|
|
301
288
|
<Mosaic.DragOverlay />
|
|
@@ -369,7 +356,7 @@ export const DynamicBasicStacks = () => {
|
|
|
369
356
|
)}
|
|
370
357
|
</NaturalDeck.Root>
|
|
371
358
|
</Main.Root>
|
|
372
|
-
</
|
|
359
|
+
</RootAttentionProvider>
|
|
373
360
|
</Mosaic.Root>
|
|
374
361
|
);
|
|
375
362
|
};
|
|
@@ -13,7 +13,7 @@ import { withTheme } from '@dxos/storybook-utils';
|
|
|
13
13
|
import { Section, type SectionProps } from './Section';
|
|
14
14
|
|
|
15
15
|
export default {
|
|
16
|
-
title: 'react-ui-stack/Section',
|
|
16
|
+
title: 'ui/react-ui-stack/Section',
|
|
17
17
|
component: Section as any,
|
|
18
18
|
decorators: [withTheme],
|
|
19
19
|
args: {
|
|
@@ -3,15 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';
|
|
6
|
-
import {
|
|
7
|
-
ArrowLineDown,
|
|
8
|
-
ArrowLineUp,
|
|
9
|
-
ArrowSquareOut,
|
|
10
|
-
CaretUpDown,
|
|
11
|
-
DotsNine,
|
|
12
|
-
type IconProps,
|
|
13
|
-
Trash,
|
|
14
|
-
} from '@phosphor-icons/react';
|
|
6
|
+
import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from '@phosphor-icons/react';
|
|
15
7
|
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
16
8
|
import React, {
|
|
17
9
|
forwardRef,
|
|
@@ -26,6 +18,7 @@ import React, {
|
|
|
26
18
|
import {
|
|
27
19
|
Button,
|
|
28
20
|
DropdownMenu,
|
|
21
|
+
Icon,
|
|
29
22
|
type Label,
|
|
30
23
|
List,
|
|
31
24
|
ListItem,
|
|
@@ -35,7 +28,7 @@ import {
|
|
|
35
28
|
toLocalizedString,
|
|
36
29
|
useTranslation,
|
|
37
30
|
} from '@dxos/react-ui';
|
|
38
|
-
import {
|
|
31
|
+
import { useAttendableAttributes } from '@dxos/react-ui-attention';
|
|
39
32
|
import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';
|
|
40
33
|
import {
|
|
41
34
|
type MosaicActiveType,
|
|
@@ -92,14 +85,14 @@ export type StackSectionItem = MosaicDataItem & {
|
|
|
92
85
|
};
|
|
93
86
|
// TODO(wittjosiah): Common type? Factor out?
|
|
94
87
|
metadata?: {
|
|
95
|
-
icon?:
|
|
88
|
+
icon?: string;
|
|
96
89
|
placeholder?: Label;
|
|
97
90
|
viewActions?: (item: StackSectionItem) => StackAction;
|
|
98
91
|
};
|
|
99
92
|
};
|
|
100
93
|
|
|
101
94
|
export type StackAction = {
|
|
102
|
-
icon:
|
|
95
|
+
icon: string;
|
|
103
96
|
label: Label;
|
|
104
97
|
onClick: () => void;
|
|
105
98
|
};
|
|
@@ -133,7 +126,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
133
126
|
{
|
|
134
127
|
id,
|
|
135
128
|
title,
|
|
136
|
-
icon
|
|
129
|
+
icon = 'ph--placeholder--regular',
|
|
137
130
|
size = 'intrinsic',
|
|
138
131
|
collapsed,
|
|
139
132
|
active,
|
|
@@ -157,8 +150,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
157
150
|
mover: { cyclic: true, direction: 1, memorizeCurrent: false },
|
|
158
151
|
});
|
|
159
152
|
const sectionContentGroup = useFocusableGroup({});
|
|
160
|
-
const attendableAttrs =
|
|
161
|
-
const hasAttention = useHasAttention(id);
|
|
153
|
+
const attendableAttrs = useAttendableAttributes(id);
|
|
162
154
|
|
|
163
155
|
return (
|
|
164
156
|
<CollapsiblePrimitive.Root
|
|
@@ -180,10 +172,9 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
180
172
|
role='none'
|
|
181
173
|
className={mx(
|
|
182
174
|
'grid col-span-2 grid-cols-subgrid',
|
|
183
|
-
'bg-base
|
|
175
|
+
'bg-base attention-surface',
|
|
184
176
|
hoverableControls,
|
|
185
177
|
hoverableFocusedWithinControls,
|
|
186
|
-
(active || hasAttention) && 'attention-surface border-separator',
|
|
187
178
|
(active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',
|
|
188
179
|
)}
|
|
189
180
|
>
|
|
@@ -206,7 +197,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
206
197
|
}}
|
|
207
198
|
>
|
|
208
199
|
<DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>
|
|
209
|
-
<Icon
|
|
200
|
+
<Icon icon={icon} size={5} classNames='transition-opacity' />
|
|
210
201
|
</DropDownMenuDragHandleTrigger>
|
|
211
202
|
<DropdownMenu.Portal>
|
|
212
203
|
<DropdownMenu.Content>
|
package/src/components/Stack.tsx
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
|
|
6
|
-
import React, { forwardRef, useCallback } from 'react';
|
|
6
|
+
import React, { type ReactNode, forwardRef, useCallback } from 'react';
|
|
7
7
|
import { useResizeDetector } from 'react-resize-detector';
|
|
8
8
|
|
|
9
9
|
import { List, useTranslation } from '@dxos/react-ui';
|
|
@@ -44,7 +44,7 @@ export type StackProps<TData extends StackSectionContent = StackSectionContent>
|
|
|
44
44
|
items?: StackSectionItem[];
|
|
45
45
|
separation?: boolean; // TODO(burdon): Style.
|
|
46
46
|
onCollapseSection?: (id: string, collapsed: boolean) => void;
|
|
47
|
-
emptyComponent?:
|
|
47
|
+
emptyComponent?: ReactNode;
|
|
48
48
|
};
|
|
49
49
|
|
|
50
50
|
export const Stack = ({
|