@dashfoo/react 0.8.3 → 0.9.0
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/README.md +14 -8
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +98 -294
- package/dist/index.js.map +1 -1
- package/dist/styles.css +211 -0
- package/dist/styles.css.d.ts +2 -0
- package/package.json +11 -5
package/README.md
CHANGED
|
@@ -26,6 +26,11 @@ pnpm add @dashfoo/react @dashfoo/core react react-dom
|
|
|
26
26
|
|
|
27
27
|
React 18.3+ or 19 is a peer dependency.
|
|
28
28
|
|
|
29
|
+
Import `@dashfoo/react/styles.css` once in your app entry, before your theme.
|
|
30
|
+
It supplies layout structure, resize handles, and drag indicators in the
|
|
31
|
+
`dashfoo-structure` cascade layer. Floating and docking geometry is passed through
|
|
32
|
+
CSS custom properties. Use `className` to style the layout root.
|
|
33
|
+
|
|
29
34
|
## Quick start
|
|
30
35
|
|
|
31
36
|
A tab's `component` field is a string key. Map those keys to React components
|
|
@@ -37,6 +42,7 @@ import type { TabNode } from "@dashfoo/core";
|
|
|
37
42
|
import { model, row, tabset, tab } from "@dashfoo/core";
|
|
38
43
|
|
|
39
44
|
// Optional default skin; without it the chrome is unstyled (headless).
|
|
45
|
+
import "@dashfoo/react/styles.css";
|
|
40
46
|
import "@dashfoo/theme/dashfoo.css";
|
|
41
47
|
|
|
42
48
|
const startingModel = model(
|
|
@@ -53,7 +59,7 @@ export const App = () => (
|
|
|
53
59
|
|
|
54
60
|
The `model` / `row` / `tabset` / `tab` builders come from `@dashfoo/core`; they
|
|
55
61
|
produce the same plain object you could write by hand. If you don't import
|
|
56
|
-
`@dashfoo/theme`,
|
|
62
|
+
`@dashfoo/theme`, the chrome remains unstyled: the container is
|
|
57
63
|
`[data-dashfoo="layout"]` with `display: flex; height: 100%; width: 100%`; give it
|
|
58
64
|
a sized parent and add your CSS (see the [attribute reference](#data-dashfoo-attribute-reference)).
|
|
59
65
|
|
|
@@ -399,9 +405,8 @@ const storage = useMemo(() => memoryStorageAdapter(), []);
|
|
|
399
405
|
## `data-dashfoo` attribute reference
|
|
400
406
|
|
|
401
407
|
Every styleable element carries a `data-dashfoo` attribute. Selectors are stable;
|
|
402
|
-
target them in your stylesheet. The
|
|
403
|
-
|
|
404
|
-
you.
|
|
408
|
+
target them in your stylesheet. The required `@dashfoo/react/styles.css` owns
|
|
409
|
+
structure and consumes runtime geometry through CSS custom properties.
|
|
405
410
|
|
|
406
411
|
| `data-dashfoo` value | Element | Notes |
|
|
407
412
|
| -------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -447,7 +452,7 @@ the handle and pick the cursor off `[data-separator][aria-orientation="..."]`.
|
|
|
447
452
|
|
|
448
453
|
### Dock indicator CSS variables
|
|
449
454
|
|
|
450
|
-
The `[data-dashfoo="dock-indicator"]` overlay
|
|
455
|
+
The `[data-dashfoo="dock-indicator"]` overlay reads its geometry from CSS custom properties, and every
|
|
451
456
|
visual property reads from a CSS variable with a neutral fallback. Override them
|
|
452
457
|
to theme the drag preview without touching layout.
|
|
453
458
|
|
|
@@ -521,9 +526,9 @@ pattern as `Panel`:
|
|
|
521
526
|
| `Layout.FloatLayer` | overlay | Wrap the tree's content to enable floating panels; renders `model.floats` as draggable overlays. Takes `floats` + `global`. |
|
|
522
527
|
| `Tabset.Root` | `div[data-dashfoo="tabset"]` | Creates the per-tabset store; owns drop registration, overflow measurement, and focus restore after close. |
|
|
523
528
|
| `Tabset.TabStrip` | `div[data-dashfoo="tabstrip"]` | The strip row (drag hit-testing targets this attribute). |
|
|
524
|
-
| `Tabset.Tablist` | `div[data-dashfoo="tablist"]` | `role="tablist"`
|
|
529
|
+
| `Tabset.Tablist` | `div[data-dashfoo="tablist"]` | The scrolling viewport holding the `role="tablist"` marker that owns the triggers. |
|
|
525
530
|
| `Tabset.Tab` | `span[data-dashfoo="tab-item"]` | Per-tab wrapper; provides identity to the parts inside. |
|
|
526
|
-
| `Tabset.Trigger` | `button[data-dashfoo="tab"]` | The tab button: select on click, rename on double-click, draggable. Children override the label.
|
|
531
|
+
| `Tabset.Trigger` | `button[data-dashfoo="tab"]` | The tab button: arrow/Home/End navigation, select on click, rename on double-click, draggable. Children override the label. |
|
|
527
532
|
| `Tabset.RenameInput` | `input[data-dashfoo="tab-rename"]` | Inline rename editor; renders only while its tab is being renamed. |
|
|
528
533
|
| `Tabset.CloseButton` | `button[data-dashfoo="tab-close"]` | Closes the tab with focus restore; hides when the tab isn't closable. |
|
|
529
534
|
| `Tabset.Content` | `div[data-dashfoo="tabcontent"]` | The `role="tabpanel"` pane(s); honors `keepMounted`. Children render-prop overrides `renderers.tab`. |
|
|
@@ -533,7 +538,8 @@ pattern as `Panel`:
|
|
|
533
538
|
| `Tabset.MaximizeButton` | `button[data-dashfoo="tabset-maximize"]` | Maximize/restore toggle; hides when maximize is off. |
|
|
534
539
|
| `Tabset.FloatButton` | `button[data-dashfoo="tabset-float"]` | Floats the tabset into a movable overlay; hides when `floatable` is off or the tabset is maximized. |
|
|
535
540
|
|
|
536
|
-
|
|
541
|
+
Parts forward native props such as `className` and handlers. `Layout.Root`
|
|
542
|
+
accepts `className` for styling and reserves geometry for CSS custom properties;
|
|
537
543
|
the structural attributes (`role`, ids, `data-dashfoo`) are applied after the
|
|
538
544
|
spread because drag hit-testing and overflow measurement query them.
|
|
539
545
|
|
package/dist/index.d.ts
CHANGED
|
@@ -155,7 +155,7 @@ type LayoutState = {
|
|
|
155
155
|
declare const useLayout: <T>(selector: (state: LayoutState) => T) => T;
|
|
156
156
|
//#endregion
|
|
157
157
|
//#region src/components/layout-root.d.ts
|
|
158
|
-
type LayoutRootProps = Omit<ComponentProps<"div">, "children"> & {
|
|
158
|
+
type LayoutRootProps = Omit<ComponentProps<"div">, "children" | "style"> & {
|
|
159
159
|
children: ReactNode;
|
|
160
160
|
closableTabs?: boolean;
|
|
161
161
|
dispatch: (action: Action) => void;
|
|
@@ -179,7 +179,7 @@ type LayoutRenderers = {
|
|
|
179
179
|
tabLabel?: (tab: TabNode) => ReactNode;
|
|
180
180
|
tabsetToolbar?: (tabset: TabsetNode) => ReactNode;
|
|
181
181
|
};
|
|
182
|
-
declare const LayoutRoot: ({ children, closableTabs, dispatch, draggableTabs, draggableTabsets, editable, floatable, keepMounted, maximizable, model, renamableTabs, renderers, resizableSplits, restructurable, rootRef, snap,
|
|
182
|
+
declare const LayoutRoot: ({ children, closableTabs, dispatch, draggableTabs, draggableTabsets, editable, floatable, keepMounted, maximizable, model, renamableTabs, renderers, resizableSplits, restructurable, rootRef, snap, ...props }: LayoutRootProps) => ReactNode;
|
|
183
183
|
//#endregion
|
|
184
184
|
//#region src/components/row-view.d.ts
|
|
185
185
|
type RowViewProps = {
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/hooks/persistence.ts","../src/components/dashfoo-layout.tsx","../src/components/dashfoo-drag-provider.tsx","../src/hooks/drag-hooks.tsx","../src/components/drag-provider.tsx","../src/components/float-layer.tsx","../src/hooks/layout-store.ts","../src/components/layout-root.tsx","../src/components/row-view.tsx","../src/components/tabset/tabset-view.tsx","../src/components/layout.tsx","../src/components/panel-badge.tsx","../src/components/panel-body.tsx","../src/components/panel-header.tsx","../src/components/panel-icon.tsx","../src/components/panel-root.tsx","../src/components/panel-title.tsx","../src/components/panel.tsx","../src/components/tabset/tabset-content.tsx","../src/components/tabset/tabset-root.tsx","../src/components/tabset/tabset-tab.tsx","../src/components/tabset/tabset-overflow-menu.tsx","../src/components/tabset/tabset-rename-input.tsx","../src/components/tabset/tabset-tablist.tsx","../src/components/tabset/tabset-toolbar.tsx","../src/components/tabset/tabset.ts","../src/components/tab-overflow-menu.tsx","../src/components/tabset/tabset-store.ts","../src/hooks/responsive.ts","../src/hooks/store.ts"],"mappings":";;;;;;KAMK;EACH,UAAU;EACV,aAAa;EACb,UAAU,aAAa;;cAGnB,4BAA2B;cAa3B,qBAAqB;KAqCtB;EACH;EACA;EACA,SAAS;;KAYN;EACH;EAEA,cAAc;EACd,OAAO,OAAO;;cAGV,iBAAc,QACV,sBAAoB,cACd,wBACb;;;KCpDE;EAA0B;EAAqB;EAAa,UAAU;;KAgBtE,eAAe;EAAgB,MAAM;;KAIrC;EACH,SACE,KAAK,SACL;IAAU;IAAgB,WAAW;IAAc;;EAErD;EACA;EACA,WAAW;EACX,WAAW,QAAQ;EAEnB,YAAY;EAEZ,WAAW;EACX,gBAAgB;EAChB,iBAAiB;EACjB;EACA,YAAY,eAAe;EAE3B;EACA,YAAY,kBAAkB;EAC9B;;KAGG;EACH;EACA,aAAa,eAAe;EAC5B;EACA;EAEA;EACA,WAAW,KAAK,YAAY;EAE5B;EACA;EACA;EACA,YAAY,QAAQ,WAAW;EAC/B,wBAAwB;EACxB,2BAA2B;EAC3B,iBAAiB,OAAO,SAAS,SAAS;EAC1C;EACA,kBAAkB,KAAK,YAAY;EACnC,uBAAuB,QAAQ,eAAe;EAE9C;EACA;IAAe;IAAkB,cAAc;;EAE/C,OAAO;;KAGJ,qBAAqB;EAElB,cAAc;EAAS;EAAe,UAAU;;EAChD;EAAsB,OAAO;EAAS;;cAGxC,+BAAa,0BAAA,qCAAA,cAAA;;;cCzFb,wBAAmB;EAAoB,UAAU;MAAc;;;KCgMhE;EACH,iBAAiB;EACjB;EACA;;cAGI,yBAAoB,WAAA,UAAA,SAIvB;EAA6B,MAAM,SAAS;;;;;;;cAuBzC,sBAAqB;cAQrB,qBAAoB;;;KCnMrB;EACH,UAAU;EAEV,YAAY,QAAQ;EAEpB;;;;;;cA+EI,eAAY,OAAW,sBAAoB;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/hooks/persistence.ts","../src/components/dashfoo-layout.tsx","../src/components/dashfoo-drag-provider.tsx","../src/hooks/drag-hooks.tsx","../src/components/drag-provider.tsx","../src/components/float-layer.tsx","../src/hooks/layout-store.ts","../src/components/layout-root.tsx","../src/components/row-view.tsx","../src/components/tabset/tabset-view.tsx","../src/components/layout.tsx","../src/components/panel-badge.tsx","../src/components/panel-body.tsx","../src/components/panel-header.tsx","../src/components/panel-icon.tsx","../src/components/panel-root.tsx","../src/components/panel-title.tsx","../src/components/panel.tsx","../src/components/tabset/tabset-content.tsx","../src/components/tabset/tabset-root.tsx","../src/components/tabset/tabset-tab.tsx","../src/components/tabset/tabset-overflow-menu.tsx","../src/components/tabset/tabset-rename-input.tsx","../src/components/tabset/tabset-tablist.tsx","../src/components/tabset/tabset-toolbar.tsx","../src/components/tabset/tabset.ts","../src/components/tab-overflow-menu.tsx","../src/components/tabset/tabset-store.ts","../src/hooks/responsive.ts","../src/hooks/store.ts"],"mappings":"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"}
|