@bigbinary/neeto-atoms 1.0.128 → 1.0.129

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.
@@ -7998,14 +7998,28 @@ const SelectionCheckbox = ({
7998
7998
  ariaLabel
7999
7999
  }) => {
8000
8000
  const { t } = useTranslation();
8001
- return /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center", children: /* @__PURE__ */ jsx(
8002
- Checkbox,
8001
+ const shiftKeyRef = useRef(false);
8002
+ return /* @__PURE__ */ jsx(
8003
+ "div",
8003
8004
  {
8004
- checked,
8005
- onCheckedChange,
8006
- "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row")
8005
+ className: "flex w-full items-center justify-center",
8006
+ onMouseDown: (event) => {
8007
+ if (event.shiftKey) event.preventDefault();
8008
+ },
8009
+ children: /* @__PURE__ */ jsx(
8010
+ Checkbox,
8011
+ {
8012
+ checked,
8013
+ "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row"),
8014
+ onCheckedChange: (value) => onCheckedChange(!!value, shiftKeyRef.current),
8015
+ onClick: (event) => {
8016
+ shiftKeyRef.current = event.shiftKey;
8017
+ if (event.shiftKey) event.currentTarget.focus();
8018
+ }
8019
+ }
8020
+ )
8007
8021
  }
8008
- ) });
8022
+ );
8009
8023
  };
8010
8024
 
8011
8025
  const useTableSelection = ({
@@ -8034,7 +8048,8 @@ const useTableSelection = ({
8034
8048
  }
8035
8049
  if (onRowSelect) {
8036
8050
  const keys = rowSelectionToKeys(newSelection);
8037
- const selectedRows = data.filter((row) => keys.includes(getRowId(row)));
8051
+ const keySet = new Set(keys);
8052
+ const selectedRows = data.filter((row) => keySet.has(getRowId(row)));
8038
8053
  onRowSelect(keys, selectedRows);
8039
8054
  }
8040
8055
  },
@@ -8046,25 +8061,66 @@ const useTableSelection = ({
8046
8061
  return;
8047
8062
  }
8048
8063
  }, []);
8064
+ const rangeAnchorRef = useRef(null);
8065
+ const onRowCheckedChange = useCallback(
8066
+ ({
8067
+ row,
8068
+ table,
8069
+ checked,
8070
+ shiftKey
8071
+ }) => {
8072
+ const rows = table.getRowModel().rows;
8073
+ const currentIndex = rows.findIndex(({ id }) => id === row.id);
8074
+ const anchorIndex = rows.findIndex(
8075
+ ({ id }) => id === rangeAnchorRef.current
8076
+ );
8077
+ const currentSelection = table.getState().rowSelection;
8078
+ const hasSelectionOnPage = rows.some(({ id }) => currentSelection[id]);
8079
+ const isRangeSelection = shiftKey && anchorIndex !== -1 && currentIndex !== -1 && hasSelectionOnPage;
8080
+ if (!isRangeSelection) {
8081
+ rangeAnchorRef.current = checked && row.getCanSelect() ? row.id : null;
8082
+ row.toggleSelected(checked);
8083
+ return;
8084
+ }
8085
+ const startIndex = Math.min(anchorIndex, currentIndex);
8086
+ const endIndex = Math.max(anchorIndex, currentIndex);
8087
+ const rangeRows = rows.slice(startIndex, endIndex + 1).filter((rangeRow) => rangeRow.getCanSelect());
8088
+ const shouldSelect = rangeRows.some(({ id }) => !currentSelection[id]);
8089
+ const nextSelection = { ...currentSelection };
8090
+ rangeRows.forEach(({ id }) => {
8091
+ if (shouldSelect) {
8092
+ nextSelection[id] = true;
8093
+ } else {
8094
+ delete nextSelection[id];
8095
+ }
8096
+ });
8097
+ rangeAnchorRef.current = shouldSelect ? rows[endIndex].id : null;
8098
+ table.setRowSelection(nextSelection);
8099
+ },
8100
+ []
8101
+ );
8049
8102
  const selectionColumn = useMemo(() => {
8050
8103
  if (!enableRowSelection) return null;
8051
8104
  return {
8052
8105
  id: "_selection",
8053
8106
  header: ({ table }) => SelectionCheckbox({
8054
8107
  checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
8055
- onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
8108
+ onCheckedChange: (value) => {
8109
+ rangeAnchorRef.current = null;
8110
+ table.toggleAllPageRowsSelected(!!value);
8111
+ },
8056
8112
  ariaLabel: "Select all"
8057
8113
  }),
8058
- cell: ({ row }) => SelectionCheckbox({
8114
+ cell: ({ row, table }) => SelectionCheckbox({
8059
8115
  checked: row.getIsSelected(),
8060
- onCheckedChange: (value) => row.toggleSelected(!!value),
8116
+ onCheckedChange: (value, shiftKey) => onRowCheckedChange({ row, table, checked: value, shiftKey }),
8061
8117
  ariaLabel: "Select row"
8062
8118
  }),
8063
8119
  size: 56,
8064
8120
  enableSorting: false,
8065
8121
  enableResizing: false
8066
8122
  };
8067
- }, [enableRowSelection]);
8123
+ }, [enableRowSelection, onRowCheckedChange]);
8068
8124
  return {
8069
8125
  rowSelection,
8070
8126
  onRowSelectionChange,
@@ -9303,4 +9359,4 @@ const DataTable = ({
9303
9359
  };
9304
9360
 
9305
9361
  export { DataTable as D, useColumnPinning as a, useColumnVisibility as b, useTablePagination as c, useTableSelection as d, useTableSort as e, useColumnOrdering as u };
9306
- //# sourceMappingURL=DataTable-288mhy24.js.map
9362
+ //# sourceMappingURL=DataTable-DKYkrFfk.js.map