@max-ts/kit 1.10.3 → 1.10.6
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/lib/components/DataGrid/DataGrid.d.ts +2 -2
- package/lib/components/DataGrid/DataGrid.d.ts.map +1 -1
- package/lib/components/DataGrid/useLogic/index.d.ts +2 -0
- package/lib/components/DataGrid/useLogic/index.d.ts.map +1 -0
- package/lib/components/DataGrid/useLogic/useLogic.d.ts +13 -0
- package/lib/components/DataGrid/useLogic/useLogic.d.ts.map +1 -0
- package/lib/components/DataGrid/useLogic/utils.d.ts +4 -0
- package/lib/components/DataGrid/useLogic/utils.d.ts.map +1 -0
- package/lib/components/ScalableContainer/ScalableContainer.d.ts.map +1 -1
- package/lib/components/ScalableContainer/useLogic.d.ts +1 -0
- package/lib/components/ScalableContainer/useLogic.d.ts.map +1 -1
- package/lib/components/Sidebar/Sidebar.d.ts.map +1 -1
- package/lib/index.mjs +99 -29
- package/lib/stories/ScalableContainer.stories.d.ts +1 -0
- package/lib/stories/ScalableContainer.stories.d.ts.map +1 -1
- package/lib/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import type { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import type { ContentStateProps } from '../ContentState';
|
|
3
3
|
import type { DataGridColumn, DataGridEmptyState, DataGridRowId, DataGridSorting, DataGridSortMode } from './types';
|
|
4
4
|
export type DataGridProps<TRow> = {
|
|
@@ -26,5 +26,5 @@ export type DataGridProps<TRow> = {
|
|
|
26
26
|
title?: string;
|
|
27
27
|
footer?: ReactNode;
|
|
28
28
|
};
|
|
29
|
-
export declare function DataGrid<TRow>(
|
|
29
|
+
export declare function DataGrid<TRow>(props: DataGridProps<TRow>): import("react").JSX.Element;
|
|
30
30
|
//# sourceMappingURL=DataGrid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/DataGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAazD,OAAO,KAAK,EACX,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,aAAa,CAAC,IAAI,IAAI;IACjC,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,UAAU,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC;IAC1C,OAAO,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,qBAAqB,CAAC,EAAE,aAAa,EAAE,CAAC;IACxC,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC3D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,+BA8ExD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/useLogic/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { DataGridProps } from '../DataGrid';
|
|
2
|
+
import type { DataGridRowId } from '../types';
|
|
3
|
+
export declare const useLogic: <TRow>({ sorting, sortMode, rows, columns, selectedRowIds, onSelectRow, onSelectedRowIdsChange, isLoading, isError, keyId, defaultSelectedRowIds, }: DataGridProps<TRow>) => {
|
|
4
|
+
sortedRows: TRow[];
|
|
5
|
+
isFullHeight: boolean;
|
|
6
|
+
handleRowSelectionChange: (rowId: DataGridRowId, isSelected: boolean) => void;
|
|
7
|
+
handleAllRowsSelectionChange: (isSelected: boolean) => void;
|
|
8
|
+
isAllRowsSelected: boolean;
|
|
9
|
+
isSomeRowsSelected: boolean;
|
|
10
|
+
visibleRowIds: DataGridRowId[];
|
|
11
|
+
selectedRowIdSet: Set<DataGridRowId>;
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=useLogic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/useLogic/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,eAAO,MAAM,QAAQ,GAAI,IAAI,EAAE,8IAY5B,aAAa,CAAC,IAAI,CAAC;;;sCAoEZ,aAAa,cAAc,OAAO;+CAe7B,OAAO;;;;;CA4BrB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/DataGrid/useLogic/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,UAyBnD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,CAMtD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalableContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/ScalableContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,iBAAS,iBAAiB,CAAC,EAC1B,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,WAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,sBAAsB,+
|
|
1
|
+
{"version":3,"file":"ScalableContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/ScalableContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,iBAAS,iBAAiB,CAAC,EAC1B,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,WAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,sBAAsB,+BAmGxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -6,6 +6,7 @@ export declare function useLogic({ initialScale, minScale, maxScale, onScaleChan
|
|
|
6
6
|
transition: string;
|
|
7
7
|
};
|
|
8
8
|
cursor: string;
|
|
9
|
+
handleClickCapture: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
9
10
|
handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
10
11
|
handlePointerEnd: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
11
12
|
handlePointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,sBAAsB,EACtB,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,sBAAsB,EACtB,MAAM,SAAS,CAAC;AAQjB,KAAK,cAAc,GAAG,IAAI,CACzB,sBAAsB,EACpB,cAAc,GACd,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,mBAAmB,CACrB,CAAC;AAuBF,wBAAgB,QAAQ,CAAC,EACxB,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,cAAc,EACd,iBAAiB,GACjB,EAAE,cAAc;;;;;;gCAyIP,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;+BAjFhC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;8BAyDlC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;+BAjClC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;;6BAiFlC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;8BAbhC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;;;;;;EAoGzC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EACX,mBAAmB,EACnB,YAAY,EAEZ,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.mjs
CHANGED
|
@@ -2354,7 +2354,22 @@ var fullHeight = 'style__1gqvluf2';
|
|
|
2354
2354
|
var DataGrid_styles_css_loading = 'style__1gqvluf4';
|
|
2355
2355
|
var table = 'style__1gqvluf1';
|
|
2356
2356
|
var titleClass = 'style__1gqvluf5';
|
|
2357
|
-
function
|
|
2357
|
+
function compareValues(a, b) {
|
|
2358
|
+
if (null == a && null == b) return 0;
|
|
2359
|
+
if (null == a) return -1;
|
|
2360
|
+
if (null == b) return 1;
|
|
2361
|
+
if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
|
|
2362
|
+
if ('number' == typeof a && 'number' == typeof b) return a - b;
|
|
2363
|
+
return String(a).localeCompare(String(b), void 0, {
|
|
2364
|
+
numeric: true,
|
|
2365
|
+
sensitivity: 'base'
|
|
2366
|
+
});
|
|
2367
|
+
}
|
|
2368
|
+
function utils_getRowId(value) {
|
|
2369
|
+
if ('string' == typeof value || 'number' == typeof value) return value;
|
|
2370
|
+
return String(value);
|
|
2371
|
+
}
|
|
2372
|
+
const DataGrid_useLogic_useLogic_useLogic = ({ sorting, sortMode = 'client', rows, columns, selectedRowIds, onSelectRow, onSelectedRowIdsChange, isLoading, isError, keyId, defaultSelectedRowIds = [] })=>{
|
|
2358
2373
|
const [uncontrolledSelectedRowIds, setUncontrolledSelectedRowIds] = useState(defaultSelectedRowIds);
|
|
2359
2374
|
const sortedRows = useMemo(()=>{
|
|
2360
2375
|
if (!sorting || 'manual' === sortMode) return rows;
|
|
@@ -2377,7 +2392,7 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
|
|
|
2377
2392
|
const selectedRowIdSet = useMemo(()=>new Set(activeSelectedRowIds), [
|
|
2378
2393
|
activeSelectedRowIds
|
|
2379
2394
|
]);
|
|
2380
|
-
const visibleRowIds = useMemo(()=>sortedRows.map((row)=>
|
|
2395
|
+
const visibleRowIds = useMemo(()=>sortedRows.map((row)=>utils_getRowId(row[keyId])), [
|
|
2381
2396
|
keyId,
|
|
2382
2397
|
sortedRows
|
|
2383
2398
|
]);
|
|
@@ -2388,7 +2403,7 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
|
|
|
2388
2403
|
onSelectedRowIdsChange?.(nextSelectedRowIds);
|
|
2389
2404
|
if (onSelectRow) {
|
|
2390
2405
|
const nextSelectedRowIdSet = new Set(nextSelectedRowIds);
|
|
2391
|
-
onSelectRow(rows.filter((row)=>nextSelectedRowIdSet.has(
|
|
2406
|
+
onSelectRow(rows.filter((row)=>nextSelectedRowIdSet.has(utils_getRowId(row[keyId]))));
|
|
2392
2407
|
}
|
|
2393
2408
|
}, [
|
|
2394
2409
|
keyId,
|
|
@@ -2417,6 +2432,20 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
|
|
|
2417
2432
|
visibleRowIds
|
|
2418
2433
|
]);
|
|
2419
2434
|
const isFullHeight = isLoading || isError || 0 === rows.length;
|
|
2435
|
+
return {
|
|
2436
|
+
sortedRows,
|
|
2437
|
+
isFullHeight,
|
|
2438
|
+
handleRowSelectionChange,
|
|
2439
|
+
handleAllRowsSelectionChange,
|
|
2440
|
+
isAllRowsSelected,
|
|
2441
|
+
isSomeRowsSelected,
|
|
2442
|
+
visibleRowIds,
|
|
2443
|
+
selectedRowIdSet
|
|
2444
|
+
};
|
|
2445
|
+
};
|
|
2446
|
+
function DataGrid(props) {
|
|
2447
|
+
const { columns, height = '100%', className, rowHeight = 40, headerHeight = 40, keyId, onRowClick, isLoading, isDisabled, isError, emptyState, errorState, sorting, onSortingChange, footer, title, isRowSelectionEnabled } = props;
|
|
2448
|
+
const { visibleRowIds, isAllRowsSelected, isSomeRowsSelected, handleRowSelectionChange, handleAllRowsSelectionChange, isFullHeight, sortedRows, selectedRowIdSet } = DataGrid_useLogic_useLogic_useLogic(props);
|
|
2420
2449
|
return /*#__PURE__*/ jsxs("div", {
|
|
2421
2450
|
"data-slot": "data-grid",
|
|
2422
2451
|
style: {
|
|
@@ -2468,21 +2497,6 @@ function DataGrid({ rows, columns, height = '100%', className, rowHeight = 40, h
|
|
|
2468
2497
|
]
|
|
2469
2498
|
});
|
|
2470
2499
|
}
|
|
2471
|
-
function DataGrid_getRowId(value) {
|
|
2472
|
-
if ('string' == typeof value || 'number' == typeof value) return value;
|
|
2473
|
-
return String(value);
|
|
2474
|
-
}
|
|
2475
|
-
function compareValues(a, b) {
|
|
2476
|
-
if (null == a && null == b) return 0;
|
|
2477
|
-
if (null == a) return -1;
|
|
2478
|
-
if (null == b) return 1;
|
|
2479
|
-
if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
|
|
2480
|
-
if ('number' == typeof a && 'number' == typeof b) return a - b;
|
|
2481
|
-
return String(a).localeCompare(String(b), void 0, {
|
|
2482
|
-
numeric: true,
|
|
2483
|
-
sensitivity: 'base'
|
|
2484
|
-
});
|
|
2485
|
-
}
|
|
2486
2500
|
var checkboxItem = 'style__1ib8wktd style__1ib8wkta';
|
|
2487
2501
|
var DropdownMenu_styles_css_content = 'style__1ib8wkt7';
|
|
2488
2502
|
var styles_css_icon = 'style__1ib8wkth';
|
|
@@ -4542,6 +4556,7 @@ const DEFAULT_POSITION = {
|
|
|
4542
4556
|
y: 0
|
|
4543
4557
|
};
|
|
4544
4558
|
const OVERLAY_TIMEOUT = 1500;
|
|
4559
|
+
const DRAG_THRESHOLD = 4;
|
|
4545
4560
|
const ZOOM_FACTOR = 1.5;
|
|
4546
4561
|
const WHEEL_ZOOM_FACTOR = 0.05;
|
|
4547
4562
|
function clampScale(value, minScale, maxScale) {
|
|
@@ -4554,7 +4569,7 @@ function getDistance(firstTouch, secondTouch) {
|
|
|
4554
4569
|
}
|
|
4555
4570
|
function shouldSkipDragStart(target) {
|
|
4556
4571
|
if (!(target instanceof Element)) return false;
|
|
4557
|
-
return Boolean(target.closest('button, a, input, textarea, select, label, path, summary, [role="button"], [contenteditable="true"]'));
|
|
4572
|
+
return Boolean(target.closest('button, a, input, textarea, select, label, path, circle, ellipse, polygon, polyline, line, summary, [role="button"], [contenteditable="true"], [data-scalable-container-interactive]'));
|
|
4558
4573
|
}
|
|
4559
4574
|
function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1, maxScale = 4, onScaleChanged, onPositionChanged }) {
|
|
4560
4575
|
const initialClampedScale = clampScale(initialScale, minScale, maxScale);
|
|
@@ -4565,6 +4580,9 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
|
|
|
4565
4580
|
const scaleRef = useRef(initialClampedScale);
|
|
4566
4581
|
const positionRef = useRef(DEFAULT_POSITION);
|
|
4567
4582
|
const dragStartRef = useRef(DEFAULT_POSITION);
|
|
4583
|
+
const dragOriginRef = useRef(DEFAULT_POSITION);
|
|
4584
|
+
const isDraggingRef = useRef(false);
|
|
4585
|
+
const didDragRef = useRef(false);
|
|
4568
4586
|
const activePointersRef = useRef(new Map());
|
|
4569
4587
|
const initialPinchDistanceRef = useRef(0);
|
|
4570
4588
|
const initialPinchScaleRef = useRef(initialClampedScale);
|
|
@@ -4608,13 +4626,15 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
|
|
|
4608
4626
|
const handlePointerDown = useCallback((event)=>{
|
|
4609
4627
|
if ('mouse' === event.pointerType && 0 !== event.button) return;
|
|
4610
4628
|
if (shouldSkipDragStart(event.target)) return;
|
|
4611
|
-
event.currentTarget.setPointerCapture(event.pointerId);
|
|
4612
4629
|
activePointersRef.current.set(event.pointerId, {
|
|
4613
4630
|
x: event.clientX,
|
|
4614
4631
|
y: event.clientY
|
|
4615
4632
|
});
|
|
4616
4633
|
if (1 === activePointersRef.current.size) {
|
|
4617
|
-
|
|
4634
|
+
dragOriginRef.current = {
|
|
4635
|
+
x: event.clientX,
|
|
4636
|
+
y: event.clientY
|
|
4637
|
+
};
|
|
4618
4638
|
dragStartRef.current = {
|
|
4619
4639
|
x: event.clientX - positionRef.current.x,
|
|
4620
4640
|
y: event.clientY - positionRef.current.y
|
|
@@ -4627,10 +4647,21 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
|
|
|
4627
4647
|
x: event.clientX,
|
|
4628
4648
|
y: event.clientY
|
|
4629
4649
|
});
|
|
4630
|
-
if (1 === activePointersRef.current.size)
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4650
|
+
if (1 === activePointersRef.current.size) {
|
|
4651
|
+
if (!isDraggingRef.current) {
|
|
4652
|
+
const deltaX = event.clientX - dragOriginRef.current.x;
|
|
4653
|
+
const deltaY = event.clientY - dragOriginRef.current.y;
|
|
4654
|
+
if (Math.sqrt(deltaX * deltaX + deltaY * deltaY) < DRAG_THRESHOLD) return;
|
|
4655
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
4656
|
+
isDraggingRef.current = true;
|
|
4657
|
+
didDragRef.current = true;
|
|
4658
|
+
setIsDragging(true);
|
|
4659
|
+
}
|
|
4660
|
+
setPosition({
|
|
4661
|
+
x: event.clientX - dragStartRef.current.x,
|
|
4662
|
+
y: event.clientY - dragStartRef.current.y
|
|
4663
|
+
});
|
|
4664
|
+
}
|
|
4634
4665
|
}, [
|
|
4635
4666
|
setPosition
|
|
4636
4667
|
]);
|
|
@@ -4638,12 +4669,23 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
|
|
|
4638
4669
|
activePointersRef.current.delete(event.pointerId);
|
|
4639
4670
|
const remainingPointer = activePointersRef.current.values().next().value;
|
|
4640
4671
|
if (remainingPointer) {
|
|
4672
|
+
dragOriginRef.current = remainingPointer;
|
|
4641
4673
|
dragStartRef.current = {
|
|
4642
4674
|
x: remainingPointer.x - positionRef.current.x,
|
|
4643
4675
|
y: remainingPointer.y - positionRef.current.y
|
|
4644
4676
|
};
|
|
4645
|
-
|
|
4646
|
-
|
|
4677
|
+
}
|
|
4678
|
+
isDraggingRef.current = false;
|
|
4679
|
+
setIsDragging(false);
|
|
4680
|
+
window.setTimeout(()=>{
|
|
4681
|
+
didDragRef.current = false;
|
|
4682
|
+
});
|
|
4683
|
+
}, []);
|
|
4684
|
+
const handleClickCapture = useCallback((event)=>{
|
|
4685
|
+
if (!didDragRef.current) return;
|
|
4686
|
+
event.preventDefault();
|
|
4687
|
+
event.stopPropagation();
|
|
4688
|
+
didDragRef.current = false;
|
|
4647
4689
|
}, []);
|
|
4648
4690
|
const handleTouchStart = useCallback((event)=>{
|
|
4649
4691
|
if (2 !== event.touches.length) return;
|
|
@@ -4706,6 +4748,7 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
|
|
|
4706
4748
|
transition: isDragging ? 'none' : 'transform 0.1s ease-out'
|
|
4707
4749
|
},
|
|
4708
4750
|
cursor: isDragging ? 'grabbing' : 'grab',
|
|
4751
|
+
handleClickCapture,
|
|
4709
4752
|
handlePointerDown,
|
|
4710
4753
|
handlePointerEnd,
|
|
4711
4754
|
handlePointerMove,
|
|
@@ -4721,7 +4764,7 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
|
|
|
4721
4764
|
};
|
|
4722
4765
|
}
|
|
4723
4766
|
function ScalableContainer({ initialScale = 1, minScale = 0.1, maxScale = 4, showToolbar = false, onScaleChanged, onPositionChanged, onWheel, className, children, style, ...props }) {
|
|
4724
|
-
const { contentStyle, cursor, handlePointerDown, handlePointerEnd, handlePointerMove, handleTouchEnd, handleTouchMove, handleTouchStart, modifierKey, reset, showOverlay, viewportRef, zoomIn, zoomOut } = ScalableContainer_useLogic_useLogic({
|
|
4767
|
+
const { contentStyle, cursor, handleClickCapture, handlePointerDown, handlePointerEnd, handlePointerMove, handleTouchEnd, handleTouchMove, handleTouchStart, modifierKey, reset, showOverlay, viewportRef, zoomIn, zoomOut } = ScalableContainer_useLogic_useLogic({
|
|
4725
4768
|
initialScale,
|
|
4726
4769
|
minScale,
|
|
4727
4770
|
maxScale,
|
|
@@ -4794,6 +4837,7 @@ function ScalableContainer({ initialScale = 1, minScale = 0.1, maxScale = 4, sho
|
|
|
4794
4837
|
"data-slot": "scalable-container-content",
|
|
4795
4838
|
className: ScalableContainer_styles_css_content,
|
|
4796
4839
|
style: contentStyle,
|
|
4840
|
+
onClickCapture: handleClickCapture,
|
|
4797
4841
|
onPointerDown: handlePointerDown,
|
|
4798
4842
|
onPointerMove: handlePointerMove,
|
|
4799
4843
|
onPointerUp: handlePointerEnd,
|
|
@@ -5364,6 +5408,17 @@ var Sidebar_styles_css_trigger = 'style__1xiua9na';
|
|
|
5364
5408
|
var styles_css_visuallyHidden = 'style__1xiua9n9';
|
|
5365
5409
|
var Sidebar_styles_css_wrapper = 'style__1xiua9n1';
|
|
5366
5410
|
const SidebarContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
|
|
5411
|
+
function getSidebarCookieOpenState() {
|
|
5412
|
+
if ("u" < typeof document) return null;
|
|
5413
|
+
const cookieValue = document.cookie.split('; ').find((row)=>row.startsWith(`${SIDEBAR_COOKIE_NAME}=`))?.split('=')[1];
|
|
5414
|
+
if ('true' === cookieValue) return true;
|
|
5415
|
+
if ('false' === cookieValue) return false;
|
|
5416
|
+
return null;
|
|
5417
|
+
}
|
|
5418
|
+
function setSidebarCookieOpenState(open) {
|
|
5419
|
+
if ("u" < typeof document) return;
|
|
5420
|
+
document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=604800; SameSite=Lax`;
|
|
5421
|
+
}
|
|
5367
5422
|
function useSidebar() {
|
|
5368
5423
|
const context = __rspack_external_react.useContext(SidebarContext);
|
|
5369
5424
|
if (!context) throw new Error('useSidebar must be used within a Sidebar.Provider.');
|
|
@@ -5373,12 +5428,27 @@ function Provider({ defaultOpen = true, open: openProp, onOpenChange, className,
|
|
|
5373
5428
|
const isMobile = useIsMobile();
|
|
5374
5429
|
const [openMobile, setOpenMobile] = __rspack_external_react.useState(false);
|
|
5375
5430
|
const [_open, _setOpen] = __rspack_external_react.useState(defaultOpen);
|
|
5431
|
+
const isControlled = void 0 !== openProp;
|
|
5376
5432
|
const open = openProp ?? _open;
|
|
5433
|
+
__rspack_external_react.useEffect(()=>{
|
|
5434
|
+
if (isControlled) return;
|
|
5435
|
+
const storedOpen = getSidebarCookieOpenState();
|
|
5436
|
+
if (null !== storedOpen) _setOpen(storedOpen);
|
|
5437
|
+
}, [
|
|
5438
|
+
isControlled
|
|
5439
|
+
]);
|
|
5440
|
+
__rspack_external_react.useEffect(()=>{
|
|
5441
|
+
if (!isControlled) return;
|
|
5442
|
+
setSidebarCookieOpenState(open);
|
|
5443
|
+
}, [
|
|
5444
|
+
isControlled,
|
|
5445
|
+
open
|
|
5446
|
+
]);
|
|
5377
5447
|
const setOpen = __rspack_external_react.useCallback((value)=>{
|
|
5378
5448
|
const openState = 'function' == typeof value ? value(open) : value;
|
|
5379
5449
|
if (onOpenChange) onOpenChange(openState);
|
|
5380
5450
|
else _setOpen(openState);
|
|
5381
|
-
|
|
5451
|
+
setSidebarCookieOpenState(openState);
|
|
5382
5452
|
}, [
|
|
5383
5453
|
onOpenChange,
|
|
5384
5454
|
open
|
|
@@ -11,4 +11,5 @@ export default _default;
|
|
|
11
11
|
export declare function Basic(): import("react").JSX.Element;
|
|
12
12
|
export declare function WithToolbar(): import("react").JSX.Element;
|
|
13
13
|
export declare function InsideScrollablePage(): import("react").JSX.Element;
|
|
14
|
+
export declare function InteractiveContent(): import("react").JSX.Element;
|
|
14
15
|
//# sourceMappingURL=ScalableContainer.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalableContainer.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ScalableContainer.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAGjD,wBAO2C;AAqB3C,wBAAgB,KAAK,gCAYpB;AAED,wBAAgB,WAAW,gCA2B1B;AAED,wBAAgB,oBAAoB,gCAoBnC"}
|
|
1
|
+
{"version":3,"file":"ScalableContainer.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ScalableContainer.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAGjD,wBAO2C;AAqB3C,wBAAgB,KAAK,gCAYpB;AAED,wBAAgB,WAAW,gCA2B1B;AAED,wBAAgB,oBAAoB,gCAoBnC;AAED,wBAAgB,kBAAkB,gCAyCjC"}
|
package/lib/styles.css
CHANGED
|
@@ -2713,7 +2713,7 @@ a.outline__1af895x4:hover {
|
|
|
2713
2713
|
.style__uma6hu0 {
|
|
2714
2714
|
padding: var(--spacing-1) var(--spacing-2);
|
|
2715
2715
|
width: 100%;
|
|
2716
|
-
font-weight: var(--fontWeight-
|
|
2716
|
+
font-weight: var(--fontWeight-medium);
|
|
2717
2717
|
font-size: var(--fontSize-sm);
|
|
2718
2718
|
overflow-wrap: break-word;
|
|
2719
2719
|
background-color: var(--colors-background-paper);
|