@wheelhouse/ui 0.2.4 → 0.2.5
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/blocks/columns/columns-types.d.ts +25 -1
- package/dist/blocks/columns/columns-types.d.ts.map +1 -1
- package/dist/blocks/columns/columns-types.js +4 -0
- package/dist/blocks/columns/columns-utils.d.ts +31 -1
- package/dist/blocks/columns/columns-utils.d.ts.map +1 -1
- package/dist/blocks/columns/columns-utils.js +86 -1
- package/dist/blocks/columns/columns.d.ts +1 -1
- package/dist/blocks/columns/columns.d.ts.map +1 -1
- package/dist/blocks/columns/columns.js +81 -20
- package/dist/blocks/columns/columns.stories.d.ts +1 -0
- package/dist/blocks/columns/columns.stories.d.ts.map +1 -1
- package/dist/blocks/columns/columns.stories.js +21 -1
- package/dist/blocks/columns/index.d.ts +1 -1
- package/dist/blocks/columns/index.d.ts.map +1 -1
- package/dist/components/data-grid/data-grid-column-filter.d.ts +15 -0
- package/dist/components/data-grid/data-grid-column-filter.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-column-filter.js +36 -0
- package/dist/components/data-grid/data-grid-column-header.d.ts +15 -0
- package/dist/components/data-grid/data-grid-column-header.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-column-header.js +137 -0
- package/dist/components/data-grid/data-grid-column-visibility.d.ts +8 -0
- package/dist/components/data-grid/data-grid-column-visibility.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-column-visibility.js +13 -0
- package/dist/components/data-grid/data-grid-pagination.d.ts +20 -0
- package/dist/components/data-grid/data-grid-pagination.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-pagination.js +76 -0
- package/dist/components/data-grid/data-grid-scroll-area.d.ts +11 -0
- package/dist/components/data-grid/data-grid-scroll-area.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-scroll-area.js +218 -0
- package/dist/components/data-grid/data-grid-table-dnd-rows.d.ts +12 -0
- package/dist/components/data-grid/data-grid-table-dnd-rows.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-table-dnd-rows.js +91 -0
- package/dist/components/data-grid/data-grid-table-dnd.d.ts +8 -0
- package/dist/components/data-grid/data-grid-table-dnd.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-table-dnd.js +95 -0
- package/dist/components/data-grid/data-grid-table-virtual.d.ts +28 -0
- package/dist/components/data-grid/data-grid-table-virtual.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-table-virtual.js +133 -0
- package/dist/components/data-grid/data-grid-table.d.ts +98 -0
- package/dist/components/data-grid/data-grid-table.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid-table.js +560 -0
- package/dist/components/data-grid/data-grid.d.ts +94 -0
- package/dist/components/data-grid/data-grid.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid.js +123 -0
- package/dist/components/data-grid/data-grid.stories.d.ts +14 -0
- package/dist/components/data-grid/data-grid.stories.d.ts.map +1 -0
- package/dist/components/data-grid/data-grid.stories.js +47 -0
- package/dist/components/data-grid/index.d.ts +14 -0
- package/dist/components/data-grid/index.d.ts.map +1 -0
- package/dist/components/data-grid/index.js +10 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/sidebar/sidebar.stories.d.ts.map +1 -1
- package/dist/components/sidebar/sidebar.stories.js +2 -5
- package/dist/components/sortable/sortable.d.ts +4 -2
- package/dist/components/sortable/sortable.d.ts.map +1 -1
- package/dist/components/sortable/sortable.js +4 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -4
- package/src/styles/globals.css +26 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { createContext, useContext, useMemo } from 'react';
|
|
4
|
+
import {} from '@tanstack/react-table';
|
|
5
|
+
import { cn } from '../../lib/utils';
|
|
6
|
+
/** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
|
|
7
|
+
export function getColumnHeaderLabel(column) {
|
|
8
|
+
const meta = column.columnDef.meta;
|
|
9
|
+
if (typeof meta?.headerTitle === 'string')
|
|
10
|
+
return meta.headerTitle;
|
|
11
|
+
const defHeader = column.columnDef.header;
|
|
12
|
+
if (typeof defHeader === 'string')
|
|
13
|
+
return defHeader;
|
|
14
|
+
return String(column.id);
|
|
15
|
+
}
|
|
16
|
+
const DataGridContext = createContext(undefined);
|
|
17
|
+
function useDataGrid() {
|
|
18
|
+
const context = useContext(DataGridContext);
|
|
19
|
+
if (!context) {
|
|
20
|
+
throw new Error('useDataGrid must be used within a DataGridProvider');
|
|
21
|
+
}
|
|
22
|
+
return context;
|
|
23
|
+
}
|
|
24
|
+
function DataGridProvider({ children, table, ...props }) {
|
|
25
|
+
const tableState = table.getState();
|
|
26
|
+
const resolvedColumnsResizeMode = props.tableLayout?.columnsResizeMode ?? 'onEnd';
|
|
27
|
+
// Keep resize mode aligned with the DataGrid contract every render so
|
|
28
|
+
// consumer-level useReactTable options cannot flip it back between drags.
|
|
29
|
+
if (props.tableLayout?.columnsResizable) {
|
|
30
|
+
table.options.columnResizeMode = resolvedColumnsResizeMode;
|
|
31
|
+
}
|
|
32
|
+
// Memoize context value so consumers don't re-render during column resize.
|
|
33
|
+
// Column sizing state is intentionally excluded from deps -- CSS variables
|
|
34
|
+
// on the <table> element handle width updates without React re-renders.
|
|
35
|
+
const value = useMemo(() => ({
|
|
36
|
+
props,
|
|
37
|
+
table,
|
|
38
|
+
recordCount: props.recordCount,
|
|
39
|
+
isLoading: props.isLoading || false,
|
|
40
|
+
}),
|
|
41
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
42
|
+
[
|
|
43
|
+
table,
|
|
44
|
+
props.recordCount,
|
|
45
|
+
props.isLoading,
|
|
46
|
+
props.loadingMode,
|
|
47
|
+
props.loadingMessage,
|
|
48
|
+
props.fetchingMoreMessage,
|
|
49
|
+
props.allRowsLoadedMessage,
|
|
50
|
+
props.emptyMessage,
|
|
51
|
+
props.onRowClick,
|
|
52
|
+
props.className,
|
|
53
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
54
|
+
JSON.stringify(props.tableLayout),
|
|
55
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
|
+
JSON.stringify(props.tableClassNames),
|
|
57
|
+
tableState.sorting,
|
|
58
|
+
tableState.pagination,
|
|
59
|
+
tableState.columnFilters,
|
|
60
|
+
tableState.rowSelection,
|
|
61
|
+
tableState.expanded,
|
|
62
|
+
tableState.columnVisibility,
|
|
63
|
+
tableState.columnOrder,
|
|
64
|
+
tableState.columnPinning,
|
|
65
|
+
tableState.globalFilter,
|
|
66
|
+
]);
|
|
67
|
+
return _jsx(DataGridContext.Provider, { value: value, children: children });
|
|
68
|
+
}
|
|
69
|
+
function DataGrid({ children, table, ...props }) {
|
|
70
|
+
const defaultProps = {
|
|
71
|
+
loadingMode: 'skeleton',
|
|
72
|
+
tableLayout: {
|
|
73
|
+
dense: false,
|
|
74
|
+
cellBorder: false,
|
|
75
|
+
rowBorder: true,
|
|
76
|
+
rowRounded: false,
|
|
77
|
+
stripped: false,
|
|
78
|
+
headerSticky: false,
|
|
79
|
+
headerBackground: true,
|
|
80
|
+
headerBorder: true,
|
|
81
|
+
width: 'fixed',
|
|
82
|
+
columnsVisibility: false,
|
|
83
|
+
columnsResizable: false,
|
|
84
|
+
columnsResizeMode: 'onEnd',
|
|
85
|
+
columnsPinnable: false,
|
|
86
|
+
columnsMovable: false,
|
|
87
|
+
columnsDraggable: false,
|
|
88
|
+
rowsDraggable: false,
|
|
89
|
+
rowsPinnable: false,
|
|
90
|
+
},
|
|
91
|
+
tableClassNames: {
|
|
92
|
+
base: '',
|
|
93
|
+
header: '',
|
|
94
|
+
headerRow: '',
|
|
95
|
+
headerSticky: 'sticky top-0 z-15 bg-background/90 backdrop-blur-xs',
|
|
96
|
+
body: '',
|
|
97
|
+
bodyRow: '',
|
|
98
|
+
footer: '',
|
|
99
|
+
edgeCell: '',
|
|
100
|
+
},
|
|
101
|
+
};
|
|
102
|
+
const mergedProps = {
|
|
103
|
+
...defaultProps,
|
|
104
|
+
...props,
|
|
105
|
+
tableLayout: {
|
|
106
|
+
...defaultProps.tableLayout,
|
|
107
|
+
...(props.tableLayout || {}),
|
|
108
|
+
},
|
|
109
|
+
tableClassNames: {
|
|
110
|
+
...defaultProps.tableClassNames,
|
|
111
|
+
...(props.tableClassNames || {}),
|
|
112
|
+
},
|
|
113
|
+
};
|
|
114
|
+
// Ensure table is provided
|
|
115
|
+
if (!table) {
|
|
116
|
+
throw new Error('DataGrid requires a "table" prop');
|
|
117
|
+
}
|
|
118
|
+
return (_jsx(DataGridProvider, { table: table, ...mergedProps, children: children }));
|
|
119
|
+
}
|
|
120
|
+
function DataGridContainer({ children, className, border = true }) {
|
|
121
|
+
return (_jsx("div", { "data-slot": "data-grid", className: cn('w-full overflow-hidden', border && 'rounded-lg border border-border', className), children: children }));
|
|
122
|
+
}
|
|
123
|
+
export { useDataGrid, DataGridProvider, DataGrid, DataGridContainer };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
tags: string[];
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
export default meta;
|
|
10
|
+
type Story = StoryObj<typeof meta>;
|
|
11
|
+
export declare const Default: Story;
|
|
12
|
+
export declare const Striped: Story;
|
|
13
|
+
export declare const Empty: Story;
|
|
14
|
+
//# sourceMappingURL=data-grid.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-grid.stories.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,QAAA,MAAM,IAAI;;;;;;CAMM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6CnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table';
|
|
5
|
+
import { DataGrid, DataGridContainer, DataGridScrollArea, DataGridTable } from '.';
|
|
6
|
+
const columnHelper = createColumnHelper();
|
|
7
|
+
const meta = {
|
|
8
|
+
title: 'Components/Data grid',
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: 'padded',
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
export default meta;
|
|
15
|
+
function DataGridStoryHost({ rowCount = 6, ...dataGridProps }) {
|
|
16
|
+
const data = useMemo(() => Array.from({ length: rowCount }, (_, i) => ({
|
|
17
|
+
id: String(i + 1),
|
|
18
|
+
name: `Person ${i + 1}`,
|
|
19
|
+
role: i % 2 === 0 ? 'Admin' : 'Editor',
|
|
20
|
+
})), [rowCount]);
|
|
21
|
+
const columns = useMemo(() => [
|
|
22
|
+
columnHelper.accessor('name', {
|
|
23
|
+
header: 'Name',
|
|
24
|
+
cell: (info) => info.getValue(),
|
|
25
|
+
}),
|
|
26
|
+
columnHelper.accessor('role', {
|
|
27
|
+
header: 'Role',
|
|
28
|
+
meta: { headerTitle: 'Access' },
|
|
29
|
+
cell: (info) => info.getValue(),
|
|
30
|
+
}),
|
|
31
|
+
], []);
|
|
32
|
+
const table = useReactTable({
|
|
33
|
+
data,
|
|
34
|
+
columns,
|
|
35
|
+
getCoreRowModel: getCoreRowModel(),
|
|
36
|
+
});
|
|
37
|
+
return (_jsx(DataGrid, { ...dataGridProps, table: table, recordCount: dataGridProps.recordCount ?? data.length, children: _jsx(DataGridContainer, { className: "max-w-3xl", children: _jsx(DataGridScrollArea, { className: "h-72", children: _jsx(DataGridTable, {}) }) }) }));
|
|
38
|
+
}
|
|
39
|
+
export const Default = {
|
|
40
|
+
render: () => _jsx(DataGridStoryHost, {}),
|
|
41
|
+
};
|
|
42
|
+
export const Striped = {
|
|
43
|
+
render: () => _jsx(DataGridStoryHost, { tableLayout: { stripped: true, rowBorder: true } }),
|
|
44
|
+
};
|
|
45
|
+
export const Empty = {
|
|
46
|
+
render: () => _jsx(DataGridStoryHost, { rowCount: 0, recordCount: 0, emptyMessage: "No people match this view." }),
|
|
47
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export { getColumnHeaderLabel, useDataGrid, DataGridProvider, DataGrid, DataGridContainer } from './data-grid';
|
|
2
|
+
export type { DataGridApiFetchParams, DataGridApiResponse, DataGridContextProps, DataGridRequestParams, DataGridProps } from './data-grid';
|
|
3
|
+
export { DataGridColumnFilter, type DataGridColumnFilterProps } from './data-grid-column-filter';
|
|
4
|
+
export { DataGridColumnHeader, type DataGridColumnHeaderProps } from './data-grid-column-header';
|
|
5
|
+
export { DataGridColumnVisibility } from './data-grid-column-visibility';
|
|
6
|
+
export { DataGridPagination, type DataGridPaginationProps } from './data-grid-pagination';
|
|
7
|
+
export { DataGridScrollArea, type DataGridScrollAreaOrientation, type DataGridScrollAreaProps } from './data-grid-scroll-area';
|
|
8
|
+
export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableRenderedRow, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell, DataGridTableHeader, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowPin, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, DataGridTableViewport, getDataGridTableResolvedRows, getDataGridTableRowSections, } from './data-grid-table';
|
|
9
|
+
export type { DataGridTablePinnedBoundary } from './data-grid-table';
|
|
10
|
+
export { DataGridTableDnd } from './data-grid-table-dnd';
|
|
11
|
+
export { DataGridTableDndRowHandle, DataGridTableDndRows } from './data-grid-table-dnd-rows';
|
|
12
|
+
export { DataGridTableVirtual } from './data-grid-table-virtual';
|
|
13
|
+
export type { DataGridTableVirtualProps, DataGridTableVirtualScrollElements, DataGridTableVirtualizerOptions } from './data-grid-table-virtual';
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,gBAAgB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC/G,YAAY,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3I,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACjG,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACjG,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,kBAAkB,EAAE,KAAK,6BAA6B,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAC/H,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,6BAA6B,EAC7B,wBAAwB,EACxB,4BAA4B,EAC5B,gCAAgC,EAChC,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,yBAAyB,EACzB,sBAAsB,EACtB,qBAAqB,EACrB,4BAA4B,EAC5B,2BAA2B,GAC9B,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,YAAY,EAAE,yBAAyB,EAAE,kCAAkC,EAAE,+BAA+B,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { getColumnHeaderLabel, useDataGrid, DataGridProvider, DataGrid, DataGridContainer } from './data-grid';
|
|
2
|
+
export { DataGridColumnFilter } from './data-grid-column-filter';
|
|
3
|
+
export { DataGridColumnHeader } from './data-grid-column-header';
|
|
4
|
+
export { DataGridColumnVisibility } from './data-grid-column-visibility';
|
|
5
|
+
export { DataGridPagination } from './data-grid-pagination';
|
|
6
|
+
export { DataGridScrollArea } from './data-grid-scroll-area';
|
|
7
|
+
export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableRenderedRow, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell, DataGridTableHeader, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowPin, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, DataGridTableViewport, getDataGridTableResolvedRows, getDataGridTableRowSections, } from './data-grid-table';
|
|
8
|
+
export { DataGridTableDnd } from './data-grid-table-dnd';
|
|
9
|
+
export { DataGridTableDndRowHandle, DataGridTableDndRows } from './data-grid-table-dnd-rows';
|
|
10
|
+
export { DataGridTableVirtual } from './data-grid-table-virtual';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA6BvD,OAAO,EAeH,eAAe,EAIlB,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA6BvD,OAAO,EAeH,eAAe,EAIlB,MAAM,WAAW,CAAC;AA+YnB,QAAA,MAAM,IAAI;;;;;;;;;;;;yBAxIY,KAAK,CAAC,aAAa;CAsJD,CAAC;AAEzC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAqBnC,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC"}
|
|
@@ -9,7 +9,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsi
|
|
|
9
9
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '../dropdown-menu';
|
|
10
10
|
import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
|
|
11
11
|
function NavMain({ items, }) {
|
|
12
|
-
return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Platform" }), _jsx(SidebarMenu, { children: items.map((item) => (_jsxs(Collapsible, { defaultOpen: item.isActive, className: "group/collapsible", render: _jsx(SidebarMenuItem, {}), children: [_jsx(CollapsibleTrigger, { render: _jsxs(SidebarMenuButton, { tooltip: item.title, children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items?.map((subItem) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { href: subItem.url, children: _jsx("span", { children: subItem.title }) }) }, subItem.title))) }) })] }, item.title))) })] }));
|
|
12
|
+
return (_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Platform" }), _jsx(SidebarMenu, { children: items.map((item) => (_jsxs(Collapsible, { defaultOpen: item.isActive, className: "group/collapsible", render: _jsx(SidebarMenuItem, {}), children: [_jsx(CollapsibleTrigger, { render: _jsxs(SidebarMenuButton, { tooltip: item.title, children: [item.icon && _jsx(item.icon, {}), _jsx("span", { children: item.title }), _jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" })] }) }), _jsx(CollapsibleContent, { children: _jsx(SidebarMenuSub, { children: item.items?.map((subItem) => (_jsx(SidebarMenuSubItem, { children: _jsx(SidebarMenuSubButton, { render: _jsx("a", { href: subItem.url, "aria-label": subItem.title }), children: _jsx("span", { children: subItem.title }) }) }, subItem.title))) }) })] }, item.title))) })] }));
|
|
13
13
|
}
|
|
14
14
|
function TeamSwitcher({ teams, }) {
|
|
15
15
|
const { isMobile } = useSidebar();
|
|
@@ -25,10 +25,7 @@ function NavUser({ user, }) {
|
|
|
25
25
|
}
|
|
26
26
|
function NavProjects({ projects, }) {
|
|
27
27
|
const { isMobile } = useSidebar();
|
|
28
|
-
return (_jsxs(SidebarGroup, { className: "group-data-[collapsible=icon]:hidden", children: [_jsx(SidebarGroupLabel, { children: "Projects" }), _jsxs(SidebarMenu, { children: [projects.map((item) => (_jsxs(SidebarMenuItem, { children: [_jsxs(SidebarMenuButton, { render:
|
|
29
|
-
// Children are merged from `SidebarMenuButton` by useRender; ESLint cannot see them on this JSX node.
|
|
30
|
-
// eslint-disable-next-line jsx-a11y/anchor-has-content -- runtime children from SidebarMenuButton
|
|
31
|
-
_jsx("a", { href: item.url }), children: [_jsx(item.icon, {}), _jsx("span", { children: item.name })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(SidebarMenuAction, { showOnHover: true, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }) }), _jsxs(DropdownMenuContent, { className: "w-48 rounded-lg", side: isMobile ? 'bottom' : 'right', align: isMobile ? 'end' : 'start', children: [_jsxs(DropdownMenuItem, { children: [_jsx(Folder, { className: "text-muted-foreground" }), _jsx("span", { children: "View Project" })] }), _jsxs(DropdownMenuItem, { children: [_jsx(Forward, { className: "text-muted-foreground" }), _jsx("span", { children: "Share Project" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: [_jsx(Trash2, { className: "text-muted-foreground" }), _jsx("span", { children: "Delete Project" })] })] })] })] }, item.name))), _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { className: "text-sidebar-foreground/70", children: [_jsx(MoreHorizontal, { className: "text-sidebar-foreground/70" }), _jsx("span", { children: "More" })] }) })] })] }));
|
|
28
|
+
return (_jsxs(SidebarGroup, { className: "group-data-[collapsible=icon]:hidden", children: [_jsx(SidebarGroupLabel, { children: "Projects" }), _jsxs(SidebarMenu, { children: [projects.map((item) => (_jsxs(SidebarMenuItem, { children: [_jsxs(SidebarMenuButton, { render: _jsx("a", { href: item.url, "aria-label": item.name }), children: [_jsx(item.icon, {}), _jsx("span", { children: item.name })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(SidebarMenuAction, { showOnHover: true, children: [_jsx(MoreHorizontal, {}), _jsx("span", { className: "sr-only", children: "More" })] }) }), _jsxs(DropdownMenuContent, { className: "w-48 rounded-lg", side: isMobile ? 'bottom' : 'right', align: isMobile ? 'end' : 'start', children: [_jsxs(DropdownMenuItem, { children: [_jsx(Folder, { className: "text-muted-foreground" }), _jsx("span", { children: "View Project" })] }), _jsxs(DropdownMenuItem, { children: [_jsx(Forward, { className: "text-muted-foreground" }), _jsx("span", { children: "Share Project" })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { children: [_jsx(Trash2, { className: "text-muted-foreground" }), _jsx("span", { children: "Delete Project" })] })] })] })] }, item.name))), _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { className: "text-sidebar-foreground/70", children: [_jsx(MoreHorizontal, { className: "text-sidebar-foreground/70" }), _jsx("span", { children: "More" })] }) })] })] }));
|
|
32
29
|
}
|
|
33
30
|
const shell = (Story) => (_jsx("div", { className: "h-[min(720px,85vh)] w-full min-w-0 overflow-hidden rounded-lg border bg-background text-foreground", children: _jsx(Story, {}) }));
|
|
34
31
|
// This is sample data.
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
import * as React from 'react';
|
|
11
11
|
import { type ReactNode } from 'react';
|
|
12
12
|
import { useRender } from '@base-ui/react/use-render';
|
|
13
|
-
import { type DragEndEvent, DragOverlay, type DragStartEvent, type Modifiers, type UniqueIdentifier } from '@dnd-kit/core';
|
|
13
|
+
import { type CollisionDetection, type DragEndEvent, DragOverlay, type DragStartEvent, type Modifiers, type UniqueIdentifier } from '@dnd-kit/core';
|
|
14
14
|
/**
|
|
15
15
|
* Props for {@link Sortable}. `T` is your row model; stable string ids come from {@link SortableRootProps.getItemValue}.
|
|
16
16
|
*
|
|
@@ -45,13 +45,15 @@ export interface SortableRootProps<T> extends Omit<useRender.ComponentProps<'div
|
|
|
45
45
|
onDragEnd?: (event: DragEndEvent) => void;
|
|
46
46
|
/** Optional dnd-kit modifiers (e.g. `restrictToParentElement`) for both context and overlay. */
|
|
47
47
|
modifiers?: Modifiers;
|
|
48
|
+
/** Override pointer collision detection for `DndContext` (e.g. restrict valid drop targets). */
|
|
49
|
+
collisionDetection?: CollisionDetection;
|
|
48
50
|
}
|
|
49
51
|
/**
|
|
50
52
|
* Root for a sortable region. Wires `DndContext`, `SortableContext`, sensors, and a `DragOverlay` portal on the client.
|
|
51
53
|
*
|
|
52
54
|
* Renders the default element as a `div` with `data-slot="sortable"` (see Base UI `useRender` / `render` prop).
|
|
53
55
|
*/
|
|
54
|
-
declare function Sortable<T>({ value, onValueChange, getItemValue, className, render, onMove, strategy, onDragStart, onDragEnd, modifiers, children, ...props }: SortableRootProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
declare function Sortable<T>({ value, onValueChange, getItemValue, className, render, onMove, strategy, onDragStart, onDragEnd, modifiers, collisionDetection, children, ...props }: SortableRootProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
55
57
|
/**
|
|
56
58
|
* Props for {@link SortableItem}. `value` is the sortable id (string) registered with dnd-kit.
|
|
57
59
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAMH,KAAK,SAAS,EAMjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,
|
|
1
|
+
{"version":3,"file":"sortable.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/sortable.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAMH,KAAK,SAAS,EAMjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EACH,KAAK,kBAAkB,EAGvB,KAAK,YAAY,EAEjB,WAAW,EACX,KAAK,cAAc,EAInB,KAAK,SAAS,EAGd,KAAK,gBAAgB,EAGxB,MAAM,eAAe,CAAC;AA2DvB;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACzH,6HAA6H;IAC7H,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,gFAAgF;IAChF,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,oGAAoG;IACpG,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAClC,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1F;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC9C,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9C,sFAAsF;IACtF,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,gGAAgG;IAChG,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gGAAgG;IAChG,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CAC3C;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,CAAC,EAAE,EACjB,KAAK,EACL,aAAa,EACb,YAAY,EACZ,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAqB,EACrB,WAAW,EACX,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAiItB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC;IACtE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAgDxF;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5E,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAa,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,0EAiBlG;AAED;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,UAAU,CAAC;IACpG,wGAAwG;IACxG,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,gBAAgB,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;CAC/E;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,4BAc/E;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -48,7 +48,7 @@ function useIsClient() {
|
|
|
48
48
|
*
|
|
49
49
|
* Renders the default element as a `div` with `data-slot="sortable"` (see Base UI `useRender` / `render` prop).
|
|
50
50
|
*/
|
|
51
|
-
function Sortable({ value, onValueChange, getItemValue, className, render, onMove, strategy = 'vertical', onDragStart, onDragEnd, modifiers, children, ...props }) {
|
|
51
|
+
function Sortable({ value, onValueChange, getItemValue, className, render, onMove, strategy = 'vertical', onDragStart, onDragEnd, modifiers, collisionDetection, children, ...props }) {
|
|
52
52
|
const [activeId, setActiveId] = useState(null);
|
|
53
53
|
const isClient = useIsClient();
|
|
54
54
|
const sensors = useSensors(useSensor(MouseSensor, {
|
|
@@ -76,6 +76,8 @@ function Sortable({ value, onValueChange, getItemValue, className, render, onMov
|
|
|
76
76
|
// Handle item reordering
|
|
77
77
|
const activeIndex = value.findIndex((item) => getItemValue(item) === active.id);
|
|
78
78
|
const overIndex = value.findIndex((item) => getItemValue(item) === over.id);
|
|
79
|
+
if (activeIndex < 0 || overIndex < 0)
|
|
80
|
+
return;
|
|
79
81
|
if (activeIndex !== overIndex) {
|
|
80
82
|
if (onMove) {
|
|
81
83
|
onMove({ event, activeIndex, overIndex });
|
|
@@ -125,7 +127,7 @@ function Sortable({ value, onValueChange, getItemValue, className, render, onMov
|
|
|
125
127
|
});
|
|
126
128
|
return result;
|
|
127
129
|
}, [activeId, children]);
|
|
128
|
-
return (_jsx(SortableInternalContext.Provider, { value: contextValue, children: _jsxs(DndContext, { sensors: sensors, modifiers: modifiers, measuring: {
|
|
130
|
+
return (_jsx(SortableInternalContext.Provider, { value: contextValue, children: _jsxs(DndContext, { sensors: sensors, modifiers: modifiers, ...(collisionDetection !== undefined ? { collisionDetection } : {}), measuring: {
|
|
129
131
|
droppable: {
|
|
130
132
|
strategy: MeasuringStrategy.Always,
|
|
131
133
|
},
|