@navikt/ds-react 8.9.0 → 8.9.1
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/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.d.ts +1 -0
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +5 -3
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/cjs/data/drag-and-drop/item/DragAndDropItem.d.ts +4 -0
- package/cjs/data/drag-and-drop/item/DragAndDropItem.js +3 -7
- package/cjs/data/drag-and-drop/item/DragAndDropItem.js.map +1 -1
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.d.ts +2 -1
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.d.ts +12 -10
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js +71 -39
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -3
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js +4 -4
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/getSingleSelectProps.d.ts +2 -2
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js +4 -1
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/selection.types.d.ts +5 -5
- package/cjs/data/table/root/DataTableAuto.js +9 -11
- package/cjs/data/table/root/DataTableAuto.js.map +1 -1
- package/cjs/data/table/td/DataTableTd.d.ts +4 -0
- package/cjs/data/table/td/DataTableTd.js +4 -2
- package/cjs/data/table/td/DataTableTd.js.map +1 -1
- package/cjs/data/table/th/DataTableTh.d.ts +4 -0
- package/cjs/data/table/th/DataTableTh.js +6 -3
- package/cjs/data/table/th/DataTableTh.js.map +1 -1
- package/cjs/data/token-filter/FilterChip.d.ts +10 -0
- package/cjs/data/token-filter/FilterChip.js +65 -0
- package/cjs/data/token-filter/FilterChip.js.map +1 -0
- package/cjs/data/token-filter/TokenFilter.js +3 -10
- package/cjs/data/token-filter/TokenFilter.js.map +1 -1
- package/cjs/form/checkbox/Checkbox.js +19 -33
- package/cjs/form/checkbox/Checkbox.js.map +1 -1
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.d.ts +21 -0
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.js +65 -0
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.js.map +1 -0
- package/cjs/form/checkbox/types.d.ts +1 -1
- package/cjs/form/fieldset/Fieldset.js +2 -6
- package/cjs/form/fieldset/Fieldset.js.map +1 -1
- package/cjs/form/radio/Radio.js +9 -7
- package/cjs/form/radio/Radio.js.map +1 -1
- package/cjs/form/radio/radio-input/RadioInput.d.ts +19 -0
- package/cjs/form/radio/radio-input/RadioInput.js +55 -0
- package/cjs/form/radio/radio-input/RadioInput.js.map +1 -0
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.d.ts +1 -0
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +5 -3
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -1
- package/esm/data/drag-and-drop/item/DragAndDropItem.d.ts +4 -0
- package/esm/data/drag-and-drop/item/DragAndDropItem.js +3 -7
- package/esm/data/drag-and-drop/item/DragAndDropItem.js.map +1 -1
- package/esm/data/drag-and-drop/root/DragAndDrop.context.d.ts +2 -1
- package/esm/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -1
- package/esm/data/drag-and-drop/root/DragAndDropRoot.d.ts +12 -10
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js +71 -39
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -1
- package/esm/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -3
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js +4 -4
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/getSingleSelectProps.d.ts +2 -2
- package/esm/data/table/helpers/selection/getSingleSelectProps.js +4 -1
- package/esm/data/table/helpers/selection/getSingleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/selection.types.d.ts +5 -5
- package/esm/data/table/root/DataTableAuto.js +9 -11
- package/esm/data/table/root/DataTableAuto.js.map +1 -1
- package/esm/data/table/td/DataTableTd.d.ts +4 -0
- package/esm/data/table/td/DataTableTd.js +4 -2
- package/esm/data/table/td/DataTableTd.js.map +1 -1
- package/esm/data/table/th/DataTableTh.d.ts +4 -0
- package/esm/data/table/th/DataTableTh.js +6 -3
- package/esm/data/table/th/DataTableTh.js.map +1 -1
- package/esm/data/token-filter/FilterChip.d.ts +10 -0
- package/esm/data/token-filter/FilterChip.js +30 -0
- package/esm/data/token-filter/FilterChip.js.map +1 -0
- package/esm/data/token-filter/TokenFilter.js +3 -10
- package/esm/data/token-filter/TokenFilter.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +19 -33
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/checkbox/checkbox-input/CheckboxInput.d.ts +21 -0
- package/esm/form/checkbox/checkbox-input/CheckboxInput.js +29 -0
- package/esm/form/checkbox/checkbox-input/CheckboxInput.js.map +1 -0
- package/esm/form/checkbox/types.d.ts +1 -1
- package/esm/form/fieldset/Fieldset.js +2 -6
- package/esm/form/fieldset/Fieldset.js.map +1 -1
- package/esm/form/radio/Radio.js +9 -7
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/form/radio/radio-input/RadioInput.d.ts +19 -0
- package/esm/form/radio/radio-input/RadioInput.js +19 -0
- package/esm/form/radio/radio-input/RadioInput.js.map +1 -0
- package/package.json +3 -3
- package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx +7 -3
- package/src/data/drag-and-drop/item/DragAndDropItem.tsx +15 -11
- package/src/data/drag-and-drop/root/DragAndDrop.context.tsx +4 -2
- package/src/data/drag-and-drop/root/DragAndDropRoot.tsx +94 -45
- package/src/data/table/helpers/selection/getMultipleSelectProps.ts +7 -7
- package/src/data/table/helpers/selection/getSingleSelectProps.ts +6 -3
- package/src/data/table/helpers/selection/selection.types.ts +5 -5
- package/src/data/table/root/DataTableAuto.tsx +25 -15
- package/src/data/table/td/DataTableTd.tsx +15 -2
- package/src/data/table/th/DataTableTh.tsx +13 -2
- package/src/data/token-filter/FilterChip.tsx +100 -0
- package/src/data/token-filter/TokenFilter.tsx +8 -24
- package/src/form/checkbox/Checkbox.tsx +37 -64
- package/src/form/checkbox/checkbox-input/CheckboxInput.tsx +69 -0
- package/src/form/checkbox/types.ts +1 -1
- package/src/form/fieldset/Fieldset.tsx +4 -6
- package/src/form/radio/Radio.tsx +43 -38
- package/src/form/radio/radio-input/RadioInput.tsx +32 -0
|
@@ -13,16 +13,18 @@ const DragAndDrop_context_1 = require("../root/DragAndDrop.context");
|
|
|
13
13
|
* A button component that serves as a drag handle for drag and drop operations.
|
|
14
14
|
* Can be used to initiate dragging of elements in a data table or list.
|
|
15
15
|
*/
|
|
16
|
-
exports.DragAndDropDragHandler = react_1.default.forwardRef(({ item }, forwardedRef) => {
|
|
16
|
+
exports.DragAndDropDragHandler = react_1.default.forwardRef(({ item, itemRef }, forwardedRef) => {
|
|
17
17
|
var _a;
|
|
18
18
|
const context = (0, DragAndDrop_context_1.useDragAndDropContext)();
|
|
19
|
-
const active = (
|
|
19
|
+
const active = (context === null || context === void 0 ? void 0 : context.dragHandlerActive) &&
|
|
20
|
+
item &&
|
|
21
|
+
((_a = context === null || context === void 0 ? void 0 : context.dragHandlerActive) === null || _a === void 0 ? void 0 : _a.id) === item.id;
|
|
20
22
|
return (react_1.default.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler", ref: forwardedRef },
|
|
21
23
|
active && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "up" },
|
|
22
24
|
react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" }))),
|
|
23
25
|
react_1.default.createElement("button", { "aria-label": "Dra for \u00E5 flytte", className: "aksel-data-drag-and-drop__drag-handler__button", "data-drag-handler-active": active, onPointerDown: (event) => {
|
|
24
26
|
event.stopPropagation();
|
|
25
|
-
context === null || context === void 0 ? void 0 : context.
|
|
27
|
+
context === null || context === void 0 ? void 0 : context.startPendingDragStart(event, item, (itemRef === null || itemRef === void 0 ? void 0 : itemRef.current) || null);
|
|
26
28
|
}, onClick: () => context === null || context === void 0 ? void 0 : context.setDragHandlerActive(item), onKeyDown: (event) => {
|
|
27
29
|
if ((event.key === "Enter" || event.key === " ") &&
|
|
28
30
|
(context === null || context === void 0 ? void 0 : context.dragHandlerActive)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAI6B;AAC7B,qEAAoE;
|
|
1
|
+
{"version":3,"file":"DragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx"],"names":[],"mappings":"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"}
|
|
@@ -33,18 +33,14 @@ const DragAndDrop_context_1 = require("../root/DragAndDrop.context");
|
|
|
33
33
|
*/
|
|
34
34
|
const DragAndDropItem = react_1.default.forwardRef((_a, forwardedRef) => {
|
|
35
35
|
var _b;
|
|
36
|
-
var { children, id, index, className } = _a, rest = __rest(_a, ["children", "id", "index", "className"]);
|
|
36
|
+
var { children, id, index, className, isOverlay = false } = _a, rest = __rest(_a, ["children", "id", "index", "className", "isOverlay"]);
|
|
37
37
|
const ref = react_1.default.useRef(null);
|
|
38
38
|
const context = (0, DragAndDrop_context_1.useDragAndDropContext)();
|
|
39
39
|
const item = { id, index };
|
|
40
40
|
const isDropTarget = ((_b = context === null || context === void 0 ? void 0 : context.dropTarget) === null || _b === void 0 ? void 0 : _b.id) === id;
|
|
41
41
|
return (react_1.default.createElement(stack_1.HStack, { gap: "space-8", align: "center", wrap: false, asChild: true, ref: forwardedRef, padding: "space-4" },
|
|
42
|
-
react_1.default.createElement("div", Object.assign({ id: id, ref: ref }, rest, { "data-dnd-id": id, "data-dnd-index":
|
|
43
|
-
|
|
44
|
-
data-keyboard-dragging={keyboardDragging}
|
|
45
|
-
*/
|
|
46
|
-
tabIndex: -1 }),
|
|
47
|
-
react_1.default.createElement(DragAndDropDragHandler_1.DragAndDropDragHandler, { item: item }),
|
|
42
|
+
react_1.default.createElement("div", Object.assign({ id: isOverlay ? undefined : id, ref: ref }, rest, { "data-dnd-id": isOverlay ? undefined : id, "data-dnd-index": isOverlay ? undefined : index, className: (0, helpers_1.cl)("aksel-data-table__drag-and-drop-item", className), "data-drop-target": isOverlay ? undefined : isDropTarget, "data-overlay": isOverlay, tabIndex: isOverlay ? undefined : -1 }),
|
|
43
|
+
react_1.default.createElement(DragAndDropDragHandler_1.DragAndDropDragHandler, { item: item, itemRef: ref }),
|
|
48
44
|
react_1.default.createElement("div", null, children))));
|
|
49
45
|
});
|
|
50
46
|
exports.DragAndDropItem = DragAndDropItem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragAndDropItem.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/item/DragAndDropItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qDAAmD;AACnD,oDAA4C;AAC5C,mFAAgF;AAChF,qEAAoE;
|
|
1
|
+
{"version":3,"file":"DragAndDropItem.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/item/DragAndDropItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qDAAmD;AACnD,oDAA4C;AAC5C,mFAAgF;AAChF,qEAAoE;AAkBpE;;;;;;;;;;GAUG;AACH,MAAM,eAAe,GAAG,eAAK,CAAC,UAAU,CACtC,CACE,EAA8D,EAC9D,YAAY,EACZ,EAAE;;QAFF,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAG,KAAK,OAAW,EAAN,IAAI,cAA5D,qDAA8D,CAAF;IAG5D,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,IAAA,2CAAqB,GAAE,CAAC;IACxC,MAAM,IAAI,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;IAC3B,MAAM,YAAY,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,0CAAE,EAAE,MAAK,EAAE,CAAC;IAEpD,OAAO,CACL,8BAAC,cAAM,IACL,GAAG,EAAC,SAAS,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,KAAK,EACX,OAAO,QACP,GAAG,EAAE,YAAY,EACjB,OAAO,EAAC,SAAS;QAGjB,qDACE,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAC9B,GAAG,EAAE,GAAG,IACJ,IAAI,mBACK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,oBACvB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC7C,SAAS,EAAE,IAAA,YAAE,EAAC,sCAAsC,EAAE,SAAS,CAAC,sBAC9C,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,kBACxC,SAAS,EACvB,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;YAEpC,8BAAC,+CAAsB,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,GAAI;YACpD,2CAAM,QAAQ,CAAO,CACjB,CACC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,0CAAe;AADxB,kBAAe,eAAe,CAAC"}
|
|
@@ -7,7 +7,8 @@ interface DragAndDropContextType {
|
|
|
7
7
|
dragHandlerActive: DragAndDropElement | null;
|
|
8
8
|
setDragHandlerActive: (active: DragAndDropElement | null) => void;
|
|
9
9
|
onKeyboardDragEnd: (diff: number) => void;
|
|
10
|
-
|
|
10
|
+
startPendingDragStart: (event: React.PointerEvent, item: DragAndDropElement, element?: HTMLElement | null) => void;
|
|
11
|
+
cancelDragStart: () => void;
|
|
11
12
|
}
|
|
12
13
|
export declare const DragAndDropProvider: import("react").FC<DragAndDropContextType & {
|
|
13
14
|
children: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragAndDrop.context.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDrop.context.tsx"],"names":[],"mappings":";;;;AAAA,oDAA6D;
|
|
1
|
+
{"version":3,"file":"DragAndDrop.context.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDrop.context.tsx"],"names":[],"mappings":";;;;AAAA,oDAA6D;AAmBhD,KAGT,IAAA,6BAAmB,EAAqC;IAC1D,YAAY,EACV,iEAAiE;IACnE,IAAI,EAAE,oBAAoB;CAC3B,CAAC,EANU,2BAAmB,gBACjB,6BAAqB,iBAKhC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import DragAndDropItem, { DragAndDropItemProps } from "../item/DragAndDropItem";
|
|
3
3
|
interface DragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
-
children:
|
|
4
|
+
children: React.ReactElement<DragAndDropItemProps>[];
|
|
5
5
|
setItems: React.Dispatch<React.SetStateAction<any[]>>;
|
|
6
6
|
}
|
|
7
7
|
interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<DragAndDropProps & React.RefAttributes<HTMLDivElement>> {
|
|
@@ -20,15 +20,17 @@ interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<D
|
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
22
|
* TODO
|
|
23
|
-
* setItems on root
|
|
24
|
-
* state : active element
|
|
25
|
-
* pointer over listener / state, onPointerEnter, onPointerLeave
|
|
26
|
-
* Overlay - Use floating component
|
|
27
|
-
* Keyboard navigation
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* []
|
|
23
|
+
* [x] setItems on root
|
|
24
|
+
* [x] state : active element
|
|
25
|
+
* [x] pointer over listener / state, onPointerEnter, onPointerLeave
|
|
26
|
+
* [x] Overlay - Use floating component
|
|
27
|
+
* [x] Keyboard navigation
|
|
28
|
+
* [ ] UU - announce on drag start, item moved, drag end
|
|
29
|
+
* [x] Make overlay same width as the OG item, currently jumps to content width
|
|
30
|
+
* [ ] Look into adding a cancel listener event
|
|
31
|
+
* [ ] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
|
|
32
|
+
* [ ] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
|
|
33
|
+
* [ ] Make arrow icons into buttons that react to keyboard events, currently just decorative
|
|
32
34
|
*/
|
|
33
35
|
declare const DragAndDrop: DataDragAndDropRootComponent;
|
|
34
36
|
export { DragAndDrop, DragAndDropItem };
|
|
@@ -44,25 +44,43 @@ exports.DragAndDropItem = DragAndDropItem_1.default;
|
|
|
44
44
|
const DragAndDrop_context_1 = require("./DragAndDrop.context");
|
|
45
45
|
/**
|
|
46
46
|
* TODO
|
|
47
|
-
* setItems on root
|
|
48
|
-
* state : active element
|
|
49
|
-
* pointer over listener / state, onPointerEnter, onPointerLeave
|
|
50
|
-
* Overlay - Use floating component
|
|
51
|
-
* Keyboard navigation
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
* []
|
|
47
|
+
* [x] setItems on root
|
|
48
|
+
* [x] state : active element
|
|
49
|
+
* [x] pointer over listener / state, onPointerEnter, onPointerLeave
|
|
50
|
+
* [x] Overlay - Use floating component
|
|
51
|
+
* [x] Keyboard navigation
|
|
52
|
+
* [ ] UU - announce on drag start, item moved, drag end
|
|
53
|
+
* [x] Make overlay same width as the OG item, currently jumps to content width
|
|
54
|
+
* [ ] Look into adding a cancel listener event
|
|
55
|
+
* [ ] Make onClick work on drag handler button, currently blocked by pointer down/up listeners
|
|
56
|
+
* [ ] Talk to design about what should happen on ESC key press, currently just cancels dragging, should it also reset position?
|
|
57
|
+
* [ ] Make arrow icons into buttons that react to keyboard events, currently just decorative
|
|
56
58
|
*/
|
|
57
59
|
const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRef) => {
|
|
60
|
+
const DRAG_THRESHOLD = 4; // Minimum movement in pixels to start dragging
|
|
58
61
|
const [activeItem, setActiveItem] = react_1.default.useState(null);
|
|
59
62
|
const [dropTarget, setDropTarget] = react_1.default.useState(null);
|
|
60
63
|
const [dragHandlerActive, setDragHandlerActive] = react_1.default.useState(null);
|
|
64
|
+
const [overlayWidth, setOverlayWidth] = react_1.default.useState(null);
|
|
61
65
|
const activeItemRef = react_1.default.useRef(null);
|
|
62
66
|
const dropTargetRef = react_1.default.useRef(null);
|
|
67
|
+
const activeChild = children.find((child) => child.props.id === (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id));
|
|
63
68
|
const [virtualRef, setVirtualRef] = react_1.default.useState({
|
|
64
69
|
getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, x: 0, y: 0 }),
|
|
65
70
|
});
|
|
71
|
+
const pendingDragStartRef = react_1.default.useRef(null);
|
|
72
|
+
const startPendingDragStart = (event, item, element) => {
|
|
73
|
+
pendingDragStartRef.current = {
|
|
74
|
+
item,
|
|
75
|
+
element: element || null,
|
|
76
|
+
pointerId: event.pointerId,
|
|
77
|
+
startX: event.clientX,
|
|
78
|
+
startY: event.clientY,
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
const cancelDragStart = () => {
|
|
82
|
+
pendingDragStartRef.current = null;
|
|
83
|
+
};
|
|
66
84
|
const setCombinedActiveItem = react_1.default.useCallback((item) => {
|
|
67
85
|
activeItemRef.current = item;
|
|
68
86
|
setActiveItem(item);
|
|
@@ -72,24 +90,45 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
|
|
|
72
90
|
setDropTarget(item);
|
|
73
91
|
}, []);
|
|
74
92
|
(0, react_1.useEffect)(() => {
|
|
93
|
+
/* This useEffect is used to toggle a class on the html element when dragging,
|
|
94
|
+
to prevent cursor issues when dragging over interactive elements,
|
|
95
|
+
and to prevent text selection during dragging. */
|
|
75
96
|
if (activeItem) {
|
|
76
|
-
document.documentElement.setAttribute("data-dragging", "true");
|
|
97
|
+
document.documentElement.setAttribute("data-dragging-cursor", "true");
|
|
77
98
|
document.body.style.userSelect = "none";
|
|
78
99
|
}
|
|
79
100
|
else {
|
|
80
|
-
document.documentElement.removeAttribute("data-dragging");
|
|
101
|
+
document.documentElement.removeAttribute("data-dragging-cursor");
|
|
81
102
|
document.body.style.userSelect = "";
|
|
82
103
|
}
|
|
83
104
|
return () => {
|
|
84
|
-
document.documentElement.removeAttribute("data-dragging");
|
|
105
|
+
document.documentElement.removeAttribute("data-dragging-cursor");
|
|
85
106
|
document.body.style.userSelect = "";
|
|
86
107
|
};
|
|
87
108
|
}, [activeItem]);
|
|
88
109
|
(0, react_1.useEffect)(() => {
|
|
89
|
-
if (!activeItem)
|
|
90
|
-
return;
|
|
91
110
|
const handlePointerMove = (event) => {
|
|
92
|
-
var _a, _b;
|
|
111
|
+
var _a, _b, _c;
|
|
112
|
+
const pendingStart = pendingDragStartRef.current;
|
|
113
|
+
const activeRef = activeItemRef.current;
|
|
114
|
+
const element = pendingStart === null || pendingStart === void 0 ? void 0 : pendingStart.element;
|
|
115
|
+
if (!activeRef && pendingStart) {
|
|
116
|
+
const deltaX = Math.abs(event.clientX - pendingStart.startX);
|
|
117
|
+
const deltaY = Math.abs(event.clientY - pendingStart.startY);
|
|
118
|
+
if (deltaX > DRAG_THRESHOLD || deltaY > DRAG_THRESHOLD) {
|
|
119
|
+
if (element) {
|
|
120
|
+
element.setPointerCapture(pendingStart.pointerId);
|
|
121
|
+
}
|
|
122
|
+
setOverlayWidth((_a = element === null || element === void 0 ? void 0 : element.getBoundingClientRect().width) !== null && _a !== void 0 ? _a : null);
|
|
123
|
+
setCombinedActiveItem(pendingStart.item);
|
|
124
|
+
setCombinedDropTarget(pendingStart.item);
|
|
125
|
+
pendingDragStartRef.current = null;
|
|
126
|
+
}
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
const active = activeItemRef.current;
|
|
130
|
+
if (!active)
|
|
131
|
+
return;
|
|
93
132
|
setVirtualRef({
|
|
94
133
|
getBoundingClientRect: () => DOMRect.fromRect({
|
|
95
134
|
width: 0,
|
|
@@ -98,16 +137,13 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
|
|
|
98
137
|
y: event.clientY,
|
|
99
138
|
}),
|
|
100
139
|
});
|
|
101
|
-
const active = activeItemRef.current;
|
|
102
|
-
if (!active)
|
|
103
|
-
return;
|
|
104
140
|
const elements = document.elementsFromPoint(event.clientX, event.clientY);
|
|
105
141
|
const matchingElements = elements.filter((el) => el instanceof HTMLElement && Boolean(el.closest("[data-dnd-id]")));
|
|
106
142
|
const itemElements = matchingElements
|
|
107
143
|
.map((el) => el.closest("[data-dnd-id]"))
|
|
108
144
|
.filter((el) => el instanceof HTMLElement);
|
|
109
145
|
const uniqueItemElements = Array.from(new Set(itemElements));
|
|
110
|
-
const targetElement = (
|
|
146
|
+
const targetElement = (_c = (_b = uniqueItemElements.find((el) => el.dataset.dndId !== active.id)) !== null && _b !== void 0 ? _b : uniqueItemElements.find((el) => el.dataset.dndId === active.id)) !== null && _c !== void 0 ? _c : null;
|
|
111
147
|
if (!targetElement) {
|
|
112
148
|
setCombinedDropTarget(null);
|
|
113
149
|
return;
|
|
@@ -121,6 +157,10 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
|
|
|
121
157
|
setCombinedDropTarget({ id: hoveredId, index: hoveredIndex });
|
|
122
158
|
};
|
|
123
159
|
const handlePointerUp = () => {
|
|
160
|
+
if (!activeItemRef.current) {
|
|
161
|
+
pendingDragStartRef.current = null;
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
124
164
|
const active = activeItemRef.current;
|
|
125
165
|
const target = dropTargetRef.current;
|
|
126
166
|
if (active && target && active.id !== target.id) {
|
|
@@ -131,8 +171,11 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
|
|
|
131
171
|
return newItems;
|
|
132
172
|
});
|
|
133
173
|
}
|
|
174
|
+
setOverlayWidth(null);
|
|
175
|
+
setDragHandlerActive(null);
|
|
134
176
|
setCombinedActiveItem(null);
|
|
135
177
|
setCombinedDropTarget(null);
|
|
178
|
+
pendingDragStartRef.current = null;
|
|
136
179
|
};
|
|
137
180
|
// TODO - Look into adding a cancel listener event
|
|
138
181
|
window.addEventListener("pointermove", handlePointerMove);
|
|
@@ -141,7 +184,7 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
|
|
|
141
184
|
window.removeEventListener("pointermove", handlePointerMove);
|
|
142
185
|
window.removeEventListener("pointerup", handlePointerUp);
|
|
143
186
|
};
|
|
144
|
-
}, [
|
|
187
|
+
}, [setCombinedDropTarget, setCombinedActiveItem, setItems]);
|
|
145
188
|
const onKeyboardDragEnd = (diff) => {
|
|
146
189
|
if (!dragHandlerActive)
|
|
147
190
|
return;
|
|
@@ -157,28 +200,17 @@ const DragAndDrop = (0, react_1.forwardRef)(({ setItems, children }, forwardedRe
|
|
|
157
200
|
});
|
|
158
201
|
setDragHandlerActive(Object.assign(Object.assign({}, dragHandlerActive), { index: targetIndex }));
|
|
159
202
|
};
|
|
160
|
-
|
|
161
|
-
setVirtualRef({
|
|
162
|
-
getBoundingClientRect: () => DOMRect.fromRect({
|
|
163
|
-
width: 0,
|
|
164
|
-
height: 0,
|
|
165
|
-
x: event.clientX,
|
|
166
|
-
y: event.clientY,
|
|
167
|
-
}),
|
|
168
|
-
});
|
|
169
|
-
setCombinedActiveItem(item);
|
|
170
|
-
setCombinedDropTarget(item);
|
|
171
|
-
};
|
|
172
|
-
// TODO - Make overlay same width as the OG item, currently jumps to content width
|
|
173
|
-
return (react_1.default.createElement(DragAndDrop_context_1.DragAndDropProvider, { activeItem: activeItem, setActiveItem: setCombinedActiveItem, dropTarget: dropTarget, setDropTarget: setCombinedDropTarget, dragHandlerActive: dragHandlerActive, setDragHandlerActive: setDragHandlerActive, onKeyboardDragEnd: onKeyboardDragEnd, onDragStart: onDragStart },
|
|
203
|
+
return (react_1.default.createElement(DragAndDrop_context_1.DragAndDropProvider, { activeItem: activeItem, setActiveItem: setCombinedActiveItem, dropTarget: dropTarget, setDropTarget: setCombinedDropTarget, dragHandlerActive: dragHandlerActive, setDragHandlerActive: setDragHandlerActive, onKeyboardDragEnd: onKeyboardDragEnd, startPendingDragStart: startPendingDragStart, cancelDragStart: cancelDragStart },
|
|
174
204
|
react_1.default.createElement("div", { ref: forwardedRef }, children),
|
|
175
|
-
activeItem && (react_1.default.createElement(Floating_1.Floating, null,
|
|
205
|
+
activeItem && activeChild && (react_1.default.createElement(Floating_1.Floating, null,
|
|
176
206
|
react_1.default.createElement(Floating_1.Floating.Anchor, { virtualRef: virtualRef },
|
|
177
207
|
react_1.default.createElement("span", null)),
|
|
178
|
-
react_1.default.createElement(Floating_1.Floating.Content, { align: "start", updatePositionStrategy: "always", style: {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
208
|
+
react_1.default.createElement(Floating_1.Floating.Content, { align: "start", updatePositionStrategy: "always", style: {
|
|
209
|
+
pointerEvents: "none",
|
|
210
|
+
boxSizing: "border-box",
|
|
211
|
+
width: overlayWidth ? `${overlayWidth}px` : "fit-content",
|
|
212
|
+
} }, react_1.default.cloneElement(activeChild, {
|
|
213
|
+
isOverlay: true,
|
|
182
214
|
}))))));
|
|
183
215
|
});
|
|
184
216
|
exports.DragAndDrop = DragAndDrop;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragAndDropRoot.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDropRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,0EAAuE;AACvE,8EAAgF;
|
|
1
|
+
{"version":3,"file":"DragAndDropRoot.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DragAndDropRoot.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
|
|
2
2
|
import type { SelectionT } from "./selection.types";
|
|
3
3
|
type GetMultipleSelectPropsArgs = {
|
|
4
4
|
selectedKeys: SelectionT;
|
|
@@ -8,7 +8,7 @@ type GetMultipleSelectPropsArgs = {
|
|
|
8
8
|
totalCount: number;
|
|
9
9
|
};
|
|
10
10
|
declare function getMultipleSelectProps({ selectedKeys, setSelectedKeys, disabledKeys, allKeys, totalCount, }: GetMultipleSelectPropsArgs): {
|
|
11
|
-
getTheadCheckboxProps: () =>
|
|
12
|
-
getRowCheckboxProps: (key: string | number) =>
|
|
11
|
+
getTheadCheckboxProps: () => CheckboxInputProps;
|
|
12
|
+
getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
|
|
13
13
|
};
|
|
14
14
|
export { getMultipleSelectProps };
|
|
@@ -26,22 +26,22 @@ function getMultipleSelectProps({ selectedKeys, setSelectedKeys, disabledKeys, a
|
|
|
26
26
|
selectedKeys.length > 0 &&
|
|
27
27
|
selectedKeys.length < totalCount;
|
|
28
28
|
return {
|
|
29
|
-
|
|
29
|
+
/* TODO: Add support for label visuallyhidden */
|
|
30
|
+
/* children: "Select all rows", */
|
|
30
31
|
onChange: handleToggleAll,
|
|
31
32
|
checked: (selectedKeys === "all" ||
|
|
32
33
|
(Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
|
|
33
34
|
!indeterminate,
|
|
34
35
|
indeterminate,
|
|
35
36
|
disabled: disabledKeys.length === totalCount,
|
|
36
|
-
hideLabel: true,
|
|
37
37
|
};
|
|
38
38
|
},
|
|
39
39
|
getRowCheckboxProps: (key) => ({
|
|
40
|
-
|
|
40
|
+
/* TODO: Add support for label visuallyhidden */
|
|
41
|
+
/* children: `Select row with id ${key}`, */
|
|
41
42
|
onChange: () => handleToggleRow(key),
|
|
42
43
|
checked: isChecked(key),
|
|
43
44
|
disabled: disabledKeys.includes(key),
|
|
44
|
-
hideLabel: true,
|
|
45
45
|
}),
|
|
46
46
|
};
|
|
47
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getMultipleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getMultipleSelectProps.ts"],"names":[],"mappings":";;AAqES,wDAAsB;AA1D/B,SAAS,sBAAsB,CAAC,EAC9B,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,OAAO,EACP,UAAU,GACiB;IAC3B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,WAAW,GACf,YAAY,KAAK,KAAK;YACtB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC;QAEtE,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,GAAoB,EAAE,EAAE;QAC/C,IAAI,YAAY,KAAK,KAAK,EAAE,CAAC;YAC3B,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;QACtD,CAAC;aAAM,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACtC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,CAAC,GAAG,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,GAAoB,EAAE,EAAE,CACzC,YAAY,KAAK,KAAK;QACtB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAE9D,OAAO;QACL,qBAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"getMultipleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getMultipleSelectProps.ts"],"names":[],"mappings":";;AAqES,wDAAsB;AA1D/B,SAAS,sBAAsB,CAAC,EAC9B,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,OAAO,EACP,UAAU,GACiB;IAC3B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,WAAW,GACf,YAAY,KAAK,KAAK;YACtB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC;QAEtE,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,GAAoB,EAAE,EAAE;QAC/C,IAAI,YAAY,KAAK,KAAK,EAAE,CAAC;YAC3B,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;QACtD,CAAC;aAAM,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACtC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,CAAC,GAAG,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,GAAoB,EAAE,EAAE,CACzC,YAAY,KAAK,KAAK;QACtB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAE9D,OAAO;QACL,qBAAqB,EAAE,GAAuB,EAAE;YAC9C,MAAM,aAAa,GACjB,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;gBAC3B,YAAY,CAAC,MAAM,GAAG,CAAC;gBACvB,YAAY,CAAC,MAAM,GAAG,UAAU,CAAC;YAEnC,OAAO;gBACL,gDAAgD;gBAChD,kCAAkC;gBAClC,QAAQ,EAAE,eAAe;gBACzB,OAAO,EACL,CAAC,YAAY,KAAK,KAAK;oBACrB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBAC3D,CAAC,aAAa;gBAChB,aAAa;gBACb,QAAQ,EAAE,YAAY,CAAC,MAAM,KAAK,UAAU;aAC7C,CAAC;QACJ,CAAC;QACD,mBAAmB,EAAE,CAAC,GAAoB,EAAsB,EAAE,CAAC,CAAC;YAClE,gDAAgD;YAChD,4CAA4C;YAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC;YACpC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC;YACvB,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;SACrC,CAAC;KACH,CAAC;AACJ,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
|
|
2
2
|
type GetSingleSelectPropsArgs = {
|
|
3
3
|
selectedKeys: (string | number)[];
|
|
4
4
|
setSelectedKeys: (keys: (string | number)[]) => void;
|
|
5
5
|
disabledKeys: (string | number)[];
|
|
6
6
|
};
|
|
7
7
|
declare function getSingleSelectProps({ selectedKeys, setSelectedKeys, disabledKeys, }: GetSingleSelectPropsArgs): {
|
|
8
|
-
getRowRadioProps: (key: string | number) =>
|
|
8
|
+
getRowRadioProps: (key: string | number) => RadioInputProps;
|
|
9
9
|
};
|
|
10
10
|
export { getSingleSelectProps };
|
|
@@ -12,11 +12,14 @@ function getSingleSelectProps({ selectedKeys, setSelectedKeys, disabledKeys, })
|
|
|
12
12
|
};
|
|
13
13
|
return {
|
|
14
14
|
getRowRadioProps: (key) => ({
|
|
15
|
-
|
|
15
|
+
/* TODO: Add support for label visuallyhidden */
|
|
16
|
+
/* children: `Select row with id ${key}`, */
|
|
16
17
|
checked: selectedKeys.includes(key),
|
|
17
18
|
onChange: () => handleSelectionChange(key),
|
|
18
19
|
disabled: disabledKeys.includes(key),
|
|
19
20
|
value: key,
|
|
21
|
+
/* TODO: Make this unique to avoid issue with multipe tables */
|
|
22
|
+
name: "data-table-single-select",
|
|
20
23
|
}),
|
|
21
24
|
};
|
|
22
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSingleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getSingleSelectProps.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"getSingleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getSingleSelectProps.ts"],"names":[],"mappings":";;AAmCS,oDAAoB;AA3B7B,SAAS,oBAAoB,CAAC,EAC5B,YAAY,EACZ,eAAe,EACf,YAAY,GACa;IACzB,MAAM,qBAAqB,GAAG,CAAC,GAAoB,EAAE,EAAE;QACrD,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,eAAe,CAAC,EAAE,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO;QACL,gBAAgB,EAAE,CAAC,GAAoB,EAAmB,EAAE,CAAC,CAAC;YAC5D,gDAAgD;YAChD,4CAA4C;YAC5C,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;YACnC,QAAQ,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,CAAC;YAC1C,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;YACpC,KAAK,EAAE,GAAG;YACV,+DAA+D;YAC/D,IAAI,EAAE,0BAA0B;SACjC,CAAC;KACH,CAAC;AACJ,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
1
|
+
import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
|
|
2
|
+
import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
|
|
3
3
|
type SelectionT = (string | number)[] | "all";
|
|
4
4
|
type SelectionProps = {
|
|
5
5
|
/**
|
|
@@ -28,15 +28,15 @@ type SingleSelection = {
|
|
|
28
28
|
allKeys: (string | number)[];
|
|
29
29
|
selectedKeys: (string | number)[];
|
|
30
30
|
disabledKeys: (string | number)[];
|
|
31
|
-
getRowRadioProps: (key: string | number) =>
|
|
31
|
+
getRowRadioProps: (key: string | number) => RadioInputProps;
|
|
32
32
|
};
|
|
33
33
|
type MultipleSelection = {
|
|
34
34
|
selectionMode: "multiple";
|
|
35
35
|
allKeys: (string | number)[];
|
|
36
36
|
selectedKeys: SelectionT;
|
|
37
37
|
disabledKeys: (string | number)[];
|
|
38
|
-
getTheadCheckboxProps: () =>
|
|
39
|
-
getRowCheckboxProps: (key: string | number) =>
|
|
38
|
+
getTheadCheckboxProps: () => CheckboxInputProps;
|
|
39
|
+
getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
|
|
40
40
|
};
|
|
41
41
|
type TableSelection = NoneSelection | SingleSelection | MultipleSelection;
|
|
42
42
|
export type { MultipleSelection, NoneSelection, SelectionProps, SelectionT, SingleSelection, TableSelection, };
|
|
@@ -47,7 +47,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
47
47
|
exports.DataTableAuto = void 0;
|
|
48
48
|
/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
|
|
49
49
|
const react_1 = __importStar(require("react"));
|
|
50
|
-
const
|
|
50
|
+
const CheckboxInput_1 = require("../../../form/checkbox/checkbox-input/CheckboxInput");
|
|
51
|
+
const RadioInput_1 = require("../../../form/radio/radio-input/RadioInput");
|
|
51
52
|
const helpers_1 = require("../../../utils/helpers");
|
|
52
53
|
const hooks_1 = require("../../../utils/hooks");
|
|
53
54
|
const useTableKeyboardNav_1 = require("../hooks/useTableKeyboardNav");
|
|
@@ -82,12 +83,9 @@ function DataTableAutoInner(_a, forwardedRef) {
|
|
|
82
83
|
react_1.default.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex }),
|
|
83
84
|
react_1.default.createElement(DataTableThead_1.DataTableThead, null,
|
|
84
85
|
react_1.default.createElement(DataTableTr_1.DataTableTr, null,
|
|
85
|
-
selection.selectionMode === "multiple" && (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
react_1.default.createElement(DataTableTh_1.DataTableTh, { textAlign: "center", width: "60px" },
|
|
89
|
-
react_1.default.createElement(checkbox_1.Checkbox, Object.assign({}, selection.getTheadCheckboxProps())))),
|
|
90
|
-
selection.selectionMode === "single" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { align: "center", width: "60px" })),
|
|
86
|
+
selection.selectionMode === "multiple" && (react_1.default.createElement(DataTableTh_1.DataTableTh, { textAlign: "center", width: "60px", UNSAFE_isSelection: true },
|
|
87
|
+
react_1.default.createElement(CheckboxInput_1.CheckboxInput, Object.assign({}, selection.getTheadCheckboxProps(), { compact: true })))),
|
|
88
|
+
selection.selectionMode === "single" && (react_1.default.createElement(DataTableTh_1.DataTableTh, { width: "64px", UNSAFE_isSelection: true })),
|
|
91
89
|
columnDefinitions.map((colDef, colDefIndex) => {
|
|
92
90
|
return (react_1.default.createElement(DataTableTh_1.DataTableTh
|
|
93
91
|
/* TODO: Make these user-changable */
|
|
@@ -98,10 +96,10 @@ function DataTableAutoInner(_a, forwardedRef) {
|
|
|
98
96
|
react_1.default.createElement(DataTableTbody_1.DataTableTbody, null, data.map((rowData, rowIndex) => {
|
|
99
97
|
const rowId = selection.allKeys[rowIndex];
|
|
100
98
|
return (react_1.default.createElement(DataTableTr_1.DataTableTr, { key: rowId },
|
|
101
|
-
selection.selectionMode === "multiple" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { align: "center", width: "60px" },
|
|
102
|
-
react_1.default.createElement(
|
|
103
|
-
selection.selectionMode === "single" && (react_1.default.createElement(DataTableTd_1.DataTableTd, {
|
|
104
|
-
react_1.default.createElement(
|
|
99
|
+
selection.selectionMode === "multiple" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { align: "center", width: "60px", UNSAFE_isSelection: true },
|
|
100
|
+
react_1.default.createElement(CheckboxInput_1.CheckboxInput, Object.assign({}, selection.getRowCheckboxProps(rowId), { compact: true })))),
|
|
101
|
+
selection.selectionMode === "single" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { width: "64px", UNSAFE_isSelection: true },
|
|
102
|
+
react_1.default.createElement(RadioInput_1.RadioInput, Object.assign({}, selection.getRowRadioProps(rowId))))),
|
|
105
103
|
columnDefinitions.map((colDef, colDefIndex) => {
|
|
106
104
|
return (react_1.default.createElement(DataTableTd_1.DataTableTd, { textAlign: "left", key: colDef.id || colDefIndex }, colDef.cell(rowData)));
|
|
107
105
|
})));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableAuto.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableAuto.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mHAAmH;AACnH,+CAAoD;AACpD,
|
|
1
|
+
{"version":3,"file":"DataTableAuto.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableAuto.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,6 +16,10 @@ interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement>
|
|
|
16
16
|
* @default "left"
|
|
17
17
|
*/
|
|
18
18
|
textAlign?: "left" | "center" | "right";
|
|
19
|
+
/**
|
|
20
|
+
* Temp hack to solve overflow and alignment
|
|
21
|
+
*/
|
|
22
|
+
UNSAFE_isSelection?: boolean;
|
|
19
23
|
}
|
|
20
24
|
declare const DataTableTd: React.ForwardRefExoticComponent<DataTableTdProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
21
25
|
export { DataTableTd };
|
|
@@ -49,9 +49,11 @@ const react_1 = __importStar(require("react"));
|
|
|
49
49
|
const helpers_1 = require("../../../utils/helpers");
|
|
50
50
|
const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
|
|
51
51
|
const DataTableTd = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
52
|
-
var { className, children, contentMaxWidth, textAlign = "left" } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth", "textAlign"]);
|
|
52
|
+
var { className, children, contentMaxWidth, textAlign = "left", UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth", "textAlign", "UNSAFE_isSelection"]);
|
|
53
53
|
const { withKeyboardNav } = (0, DataTableRoot_context_1.useDataTableContext)();
|
|
54
|
-
return (react_1.default.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__td", className
|
|
54
|
+
return (react_1.default.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__td", className, {
|
|
55
|
+
"aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
|
|
56
|
+
}), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign }),
|
|
55
57
|
react_1.default.createElement("div", { style: { maxWidth: contentMaxWidth } }, children)));
|
|
56
58
|
});
|
|
57
59
|
exports.DataTableTd = DataTableTd;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,yEAAoE;
|
|
1
|
+
{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,yEAAoE;AA0BpE,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CACE,EAOC,EACD,YAAY,EACZ,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,eAAe,EACf,SAAS,GAAG,MAAM,EAClB,kBAAkB,OAEnB,EADI,IAAI,cANT,+EAOC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAElD,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,sCAAsC,EAAE,kBAAkB;SAC3D,CAAC,EACF,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,SAAS;QAErB,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAG,QAAQ,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}
|