@datarobot/design-system 28.2.2

package/cjs/hooks/use-table-keyboard-navigation/useTableKeyboardNavigation.js

@@ -0,0 +1,299 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableKeyboardNavigationContext = void 0;
+exports.getCellId = getCellId;
+exports.useTableKeyboardNavigation = useTableKeyboardNavigation;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var MOVEMENT_DIRECTION = /*#__PURE__*/function (MOVEMENT_DIRECTION) {
+  MOVEMENT_DIRECTION["UP"] = "UP";
+  MOVEMENT_DIRECTION["RIGHT"] = "RIGHT";
+  MOVEMENT_DIRECTION["DOWN"] = "DOWN";
+  MOVEMENT_DIRECTION["LEFT"] = "LEFT";
+  return MOVEMENT_DIRECTION;
+}(MOVEMENT_DIRECTION || {});
+var PAGE_SCROLL_DIRECTION = /*#__PURE__*/function (PAGE_SCROLL_DIRECTION) {
+  PAGE_SCROLL_DIRECTION["UP"] = "UP";
+  PAGE_SCROLL_DIRECTION["DOWN"] = "DOWN";
+  return PAGE_SCROLL_DIRECTION;
+}(PAGE_SCROLL_DIRECTION || {});
+const TableKeyboardNavigationContext = exports.TableKeyboardNavigationContext = /*#__PURE__*/_react.default.createContext(null);
+
+// due to virtualization not all cell definitions stored in cells map will have non-null ref
+// this function will return either first or last non-null cell
+function getEdgeRenderedCell(cells, first) {
+  let i = 0;
+  // if we looking for the last existing cell ref than we should go upwards from the last cell available in the cells map
+  if (!first) {
+    const arr = Array.from(cells.values());
+    arr.sort((a, b) => b.cellRowIndex - a.cellRowIndex);
+    i = arr?.[0]?.cellRowIndex;
+  }
+  while (cells.has(`${i}-0`)) {
+    if (cells.get(`${i}-0`)?.cellRef?.current) {
+      return cells.get(`${i}-0`);
+    }
+    if (first) {
+      i++;
+    } else {
+      i--;
+    }
+  }
+}
+function getCellId({
+  cellRowIndex,
+  cellColumnIndex
+}) {
+  return `${cellRowIndex}-${cellColumnIndex}`;
+}
+function useTableKeyboardNavigation({
+  tableRef,
+  columnsCount,
+  rowsCount
+}) {
+  const [focusedCell, setFocusedCell] = (0, _react.useState)();
+  const cells = (0, _react.useRef)(new Map());
+  const registerCell = (0, _react.useCallback)(({
+    cellRowIndex,
+    cellColumnIndex,
+    cellRef,
+    cellAction
+  }) => {
+    cells.current.set(getCellId({
+      cellRowIndex,
+      cellColumnIndex
+    }), {
+      cellRowIndex,
+      cellColumnIndex,
+      cellRef,
+      cellAction
+    });
+  }, []);
+  const registerCustomCellAction = (0, _react.useCallback)((cellId, actionFn) => {
+    const cellToUpdate = cells.current.get(cellId);
+    if (!cellToUpdate) {
+      // eslint-disable-next-line no-console
+      console.error(`[useTableKeyboardNavigation]: No cell for custom cell renderer with id ${cellId}`);
+      return;
+    }
+    cells.current.set(cellId, {
+      ...cellToUpdate,
+      cellAction: actionFn
+    });
+  }, []);
+  const shouldRespondToKeyboardEvents = () => {
+    return tableRef.current?.contains(document.activeElement);
+  };
+  const isCorrectTable = () => {
+    const focusedCellDef = cells.current.get(focusedCell);
+
+    // we might have nested tables. In this case we will be having 2 hooks invoked
+    // in case we are currently focused on the inner table cell document.activeElement !== focusedCell.cellRef.current of the parent table
+    // thus we should not react to keyboard events on the parent cell. And vice versa
+    return !!focusedCellDef && focusedCellDef.cellRef.current === document.activeElement;
+  };
+  const shouldPerformCellAction = () => {
+    if (!focusedCell || cells.current.size === 0 || !shouldRespondToKeyboardEvents() || !isCorrectTable()) {
+      return false;
+    }
+    if (!cells.current.get(focusedCell)) {
+      // eslint-disable-next-line no-console
+      console.error(`[useTableKeyboardNavigation]: No cell definition found for cell id ${focusedCell}`);
+      return false;
+    }
+    return true;
+  };
+  const shouldPreventDefaultArrowBehaviour = e => {
+    /**
+     * In most cases we want to prevent default behaviour of arrow
+     * keys on the table because they scroll the table by default and we are using
+     * them to move focus between cells. But in some cases, when cells might have interactive
+     * elements withing them, e.g. inputs, preventing default behaviour might berak stuff
+     * e.g. input cursor is not moved by arrow keys. For this sake we are checking
+     * whether element which triggered the event is actually a currently focused cell
+     */
+    const focusedCellDef = cells.current.get(focusedCell);
+    return e.target === focusedCellDef?.cellRef?.current;
+  };
+  const selectCell = (0, _react.useCallback)(nextFocusedCellId => {
+    const nextSelectedCell = cells.current.get(nextFocusedCellId);
+    if (!nextSelectedCell) {
+      // eslint-disable-next-line no-console
+      console.error(`[useTableKeyboardNavigation]: No cell definition found for the cell to select above with id: ${nextFocusedCellId}`);
+      return;
+    }
+    nextSelectedCell.cellRef.current?.focus();
+    nextSelectedCell.cellRef.current?.scrollIntoView?.({
+      behavior: 'smooth',
+      block: 'nearest'
+    });
+    setFocusedCell(nextFocusedCellId);
+  }, []);
+  const selectNextFocusedCell = (0, _react.useCallback)(direction => {
+    if (!shouldPerformCellAction()) {
+      return;
+    }
+    const focusedCellDef = cells.current.get(focusedCell);
+    const {
+      cellColumnIndex,
+      cellRowIndex
+    } = focusedCellDef;
+    switch (direction) {
+      case MOVEMENT_DIRECTION.UP:
+        // if we are not on the top row
+        if (cellRowIndex !== -1) {
+          const nextSelectedCellId = getCellId({
+            cellRowIndex: cellRowIndex - 1,
+            cellColumnIndex
+          });
+          selectCell(nextSelectedCellId);
+        }
+        break;
+      case MOVEMENT_DIRECTION.RIGHT:
+        // if we are not on the most right cell
+        if (cellColumnIndex !== columnsCount - 1) {
+          const nextSelectedCellId = getCellId({
+            cellRowIndex,
+            cellColumnIndex: cellColumnIndex + 1
+          });
+          selectCell(nextSelectedCellId);
+        }
+        break;
+      case MOVEMENT_DIRECTION.DOWN:
+        // if we are not on the last row
+        if (cellRowIndex !== rowsCount - 1) {
+          const nextSelectedCellId = getCellId({
+            cellRowIndex: cellRowIndex + 1,
+            cellColumnIndex
+          });
+          selectCell(nextSelectedCellId);
+        }
+        break;
+      case MOVEMENT_DIRECTION.LEFT:
+        // if we are not on the first column
+        if (cellColumnIndex !== 0) {
+          const nextSelectedCellId = getCellId({
+            cellRowIndex,
+            cellColumnIndex: cellColumnIndex - 1
+          });
+          selectCell(nextSelectedCellId);
+        }
+        break;
+      default:
+        break;
+    }
+  }, [focusedCell]);
+
+  // TODO check custom params except for event (like when we need to pass rowdata, or smth like that)
+  const performCellAction = (0, _react.useCallback)(e => {
+    if (!shouldPerformCellAction()) {
+      return;
+    }
+    const focusedCellDef = cells.current.get(focusedCell);
+    focusedCellDef?.cellAction?.(e);
+  }, [focusedCell]);
+  const selectLastCellInTheRow = (0, _react.useCallback)(() => {
+    if (!shouldPerformCellAction()) {
+      return;
+    }
+    const focusedCellDef = cells.current.get(focusedCell);
+    const selectedRow = focusedCellDef?.cellRowIndex;
+    const nextSelectedCellId = getCellId({
+      cellRowIndex: selectedRow,
+      cellColumnIndex: columnsCount - 1
+    });
+    selectCell(nextSelectedCellId);
+  }, [focusedCell]);
+  const selectFirstCellInTheRow = (0, _react.useCallback)(() => {
+    if (!shouldPerformCellAction()) {
+      return;
+    }
+    const focusedCellDef = cells.current.get(focusedCell);
+    const selectedRowIndex = focusedCellDef?.cellRowIndex;
+    const nextSelectedCellId = getCellId({
+      cellRowIndex: selectedRowIndex,
+      cellColumnIndex: 0
+    });
+    selectCell(nextSelectedCellId);
+  }, [focusedCell]);
+  const scrollPage = (0, _react.useCallback)(direction => {
+    if (!shouldPerformCellAction()) {
+      return;
+    }
+    const focusedCellDef = cells.current.get(focusedCell);
+    const selectedColumnIndex = focusedCellDef.cellColumnIndex;
+    // in our case we'll just go to the first or last cell that has ref !== null
+    // because due to virtualization only ~ 20 items are actiually rendered at the same time
+    const nextRowIndex = getEdgeRenderedCell(cells.current, direction === PAGE_SCROLL_DIRECTION.UP)?.cellRowIndex;
+    if (nextRowIndex !== undefined) {
+      selectCell(getCellId({
+        cellRowIndex: nextRowIndex,
+        cellColumnIndex: selectedColumnIndex
+      }));
+    }
+  }, [focusedCell]);
+  const onTableKeyDownHandler = (0, _react.useCallback)(e => {
+    switch (e.key) {
+      case 'ArrowUp':
+        if (shouldPreventDefaultArrowBehaviour(e)) {
+          e.preventDefault();
+        }
+        selectNextFocusedCell(MOVEMENT_DIRECTION.UP);
+        break;
+      case 'ArrowRight':
+        if (shouldPreventDefaultArrowBehaviour(e)) {
+          e.preventDefault();
+        }
+        selectNextFocusedCell(MOVEMENT_DIRECTION.RIGHT);
+        break;
+      case 'ArrowDown':
+        if (shouldPreventDefaultArrowBehaviour(e)) {
+          e.preventDefault();
+        }
+        selectNextFocusedCell(MOVEMENT_DIRECTION.DOWN);
+        break;
+      case 'ArrowLeft':
+        if (shouldPreventDefaultArrowBehaviour(e)) {
+          e.preventDefault();
+        }
+        selectNextFocusedCell(MOVEMENT_DIRECTION.LEFT);
+        break;
+      case 'Enter':
+        // This fix is needed for row actions to work properly because we have global document event listeners
+        // in use-dropdown-menu-keyboard-navigation.ts that are negating effects of table-react listeners
+        // TODO remove timeout after on of the https://datarobot.atlassian.net/browse/UIUX-11638 & https://datarobot.atlassian.net/browse/UIUX-11271 are done (or both of them)
+        setTimeout(() => {
+          performCellAction(e);
+        }, 10);
+        break;
+      case 'End':
+        e.preventDefault();
+        selectLastCellInTheRow();
+        break;
+      case 'Home':
+        e.preventDefault();
+        selectFirstCellInTheRow();
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        scrollPage(PAGE_SCROLL_DIRECTION.DOWN);
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        scrollPage(PAGE_SCROLL_DIRECTION.UP);
+        break;
+      default:
+        break;
+    }
+  }, [selectNextFocusedCell]);
+  return (0, _react.useMemo)(() => ({
+    focusedCell,
+    registerCell,
+    onTableKeyDownHandler,
+    setFocusedCell,
+    registerCustomCellAction
+  }), [focusedCell, onTableKeyDownHandler, registerCustomCellAction]);
+}

package/cjs/hooks/use-table-keyboard-navigation/useTableKeyboardNavigation.test.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _useTableKeyboardNavigation = require("./useTableKeyboardNavigation");
+describe('useTableKeyboardNavigation', function () {
+  const cellRefMock = {
+    current: {
+      focus: jest.fn(),
+      setAttribute: jest.fn()
+    }
+  };
+  const defaultCellActionMock = jest.fn();
+  function initHook(colsCount = 3, rowsCount = 3, activeElementIsWithin = true) {
+    // eslint-disable-next-line testing-library/render-result-naming-convention
+    const hook = (0, _react.renderHook)(() => (0, _useTableKeyboardNavigation.useTableKeyboardNavigation)({
+      tableRef: {
+        current: {
+          contains: jest.fn(() => activeElementIsWithin)
+        }
+      },
+      rowsCount,
+      columnsCount: colsCount
+    }));
+
+    // in table we use -1 for header row not to mess around with virtual indexes, so here we need to mimic that logic too
+    for (let columnIndex = 0; columnIndex < colsCount; columnIndex++) {
+      for (let rowIndex = -1; rowIndex + 1 < rowsCount; rowIndex++) {
+        hook.result.current.registerCell({
+          cellRowIndex: rowIndex,
+          cellColumnIndex: columnIndex,
+          cellRef: cellRefMock,
+          cellAction: defaultCellActionMock
+        });
+      }
+    }
+    return hook;
+  }
+  beforeEach(function () {
+    // we have to mock activeElement so that checks to perform action would pass
+    jest.spyOn(document, 'activeElement', 'get').mockReturnValue(cellRefMock.current);
+  });
+  afterEach(function () {
+    jest.resetAllMocks();
+  });
+  it('should register cells and invoke focus function', function () {
+    const hook = initHook();
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+  });
+  it('should change focused cell via keyboard events', function () {
+    const hook = initHook();
+    (0, _react.act)(() => hook.result.current.setFocusedCell('-1-0'));
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowDown'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    expect(cellRefMock.current.focus).toHaveBeenCalled();
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowRight'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-1');
+    expect(cellRefMock.current.focus).toHaveBeenCalledTimes(2);
+  });
+  it('should not react to keyboard event if focusedCell is not set', function () {
+    const hook = initHook();
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowDown'
+    })));
+    expect(hook.result.current.focusedCell).toBeUndefined();
+    expect(cellRefMock.current.focus).not.toHaveBeenCalled();
+  });
+  it('should not react to keyboard events if none cells were registered', function () {
+    const hook = initHook(0, 0);
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowDown'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    expect(cellRefMock.current.focus).not.toHaveBeenCalled();
+  });
+  it('should not react to keyboard events if active element is not within table', function () {
+    const hook = initHook(2, 2, false);
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowDown'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    expect(cellRefMock.current.focus).not.toHaveBeenCalled();
+  });
+  it('should not change focused cell for edge cells', function () {
+    const hook = initHook(2, 2);
+
+    // can't go up from the first row
+    (0, _react.act)(() => hook.result.current.setFocusedCell('-1-0'));
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowUp'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('-1-0');
+    expect(cellRefMock.current.focus).not.toHaveBeenCalled();
+
+    // can't go right from the last column
+    (0, _react.act)(() => hook.result.current.setFocusedCell('-1-1'));
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowRight'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('-1-1');
+    expect(cellRefMock.current.focus).not.toHaveBeenCalled();
+
+    // can't go down from the last row
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowDown'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    expect(cellRefMock.current.focus).not.toHaveBeenCalled();
+
+    // can't go left from the first column
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowLeft'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    expect(cellRefMock.current.focus).not.toHaveBeenCalled();
+  });
+  it('should invoke action function on Enter press', async function () {
+    const hook = initHook(2, 2);
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'Enter'
+    })));
+    await (0, _react.waitFor)(() => {
+      expect(defaultCellActionMock).toHaveBeenCalled();
+    });
+  });
+  it('should invoke custom cell action if on is registered', async function () {
+    const customCellActionMock = jest.fn();
+    const hook = initHook(2, 2);
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    hook.result.current.registerCustomCellAction('0-0', customCellActionMock);
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'Enter'
+    })));
+    await (0, _react.waitFor)(() => {
+      expect(customCellActionMock).toHaveBeenCalled();
+    });
+    expect(defaultCellActionMock).not.toHaveBeenCalled();
+  });
+  it('should move to the first/last cell of the row using "Home"/"End" buttons', function () {
+    const hook = initHook();
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'End'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-2');
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'Home'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+  });
+  it('should move to the first/last available row with use of "PageUp"/"PageDown"', function () {
+    const hook = initHook();
+    (0, _react.act)(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'PageDown'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('1-0');
+    (0, _react.act)(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'PageUp'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+  });
+});

package/cjs/hooks/use-throttle/index.d.ts

@@ -0,0 +1,3 @@
+export { useThrottle } from './use-throttle';
+export type { ThrottledFunction, ThrottleSettings } from './use-throttle';
+export { useThrottleValue } from './use-throttle-value';

package/cjs/hooks/use-throttle/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useThrottle", {
+  enumerable: true,
+  get: function () {
+    return _useThrottle.useThrottle;
+  }
+});
+Object.defineProperty(exports, "useThrottleValue", {
+  enumerable: true,
+  get: function () {
+    return _useThrottleValue.useThrottleValue;
+  }
+});
+var _useThrottle = require("./use-throttle");
+var _useThrottleValue = require("./use-throttle-value");

package/cjs/hooks/use-throttle/use-throttle-value.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Use this hook for debounced parameters, for example for useQuery
+ * @param value
+ * @param delay
+ * @return debounced value
+ * @see https://github.com/uidotdev/usehooks/blob/90fbbb4cc085e74e50c36a62a5759a40c62bb98e/index.js#L239-L253
+ */
+export declare function useThrottleValue<T = any>(value: T, delay: number): T;

package/cjs/hooks/use-throttle/use-throttle-value.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThrottleValue = useThrottleValue;
+var _react = require("react");
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Use this hook for debounced parameters, for example for useQuery
+ * @param value
+ * @param delay
+ * @return debounced value
+ * @see https://github.com/uidotdev/usehooks/blob/90fbbb4cc085e74e50c36a62a5759a40c62bb98e/index.js#L239-L253
+ */
+function useThrottleValue(value, delay) {
+  const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
+  const onChangeThrottled = (0, _react.useRef)((0, _throttle.default)(setDebouncedValue, delay));
+  (0, _react.useEffect)(() => {
+    onChangeThrottled.current?.cancel?.();
+    onChangeThrottled.current = (0, _throttle.default)(setDebouncedValue, delay);
+    return () => onChangeThrottled.current?.cancel?.();
+  }, [delay]);
+  (0, _react.useEffect)(() => {
+    onChangeThrottled.current?.(value);
+  }, [value]);
+  return debouncedValue;
+}

package/cjs/hooks/use-throttle/use-throttle.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Interfaces from Lodash
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/ef8f9bb5ba32fb36ff978ac9898cc4f35cf7a9d6/types/lodash/common/function.d.ts#L1358-L1376
+ */
+export interface ThrottleSettings {
+    leading?: boolean | undefined;
+    trailing?: boolean | undefined;
+}
+export interface ThrottledFunction<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): ReturnType<T> | undefined;
+    cancel(): void;
+    flush(): ReturnType<T> | undefined;
+}
+/**
+ * A hook which replaces imperative throttle from Lodash and works with React lifecycle
+ * @param callback a function, **should** be wrapped in useCallback
+ * @param delay in milliseconds
+ * @param options check throttle options for description. Hook does not react to change of this object,
+ * so it is not required to wrap it in useMemo or define outside component
+ * @returns throttled function which has cancel and flush methods, always the same instance of a function.
+ * @see https://lodash.com/docs/4.17.15#throttle
+ */
+export declare function useThrottle<T extends (...args: any) => any>(callback: T, delay: number, options?: ThrottleSettings): ThrottledFunction<T>;

package/cjs/hooks/use-throttle/use-throttle.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThrottle = useThrottle;
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _react = require("react");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Interfaces from Lodash
+ * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/ef8f9bb5ba32fb36ff978ac9898cc4f35cf7a9d6/types/lodash/common/function.d.ts#L1358-L1376
+ */
+
+/**
+ * A hook which replaces imperative throttle from Lodash and works with React lifecycle
+ * @param callback a function, **should** be wrapped in useCallback
+ * @param delay in milliseconds
+ * @param options check throttle options for description. Hook does not react to change of this object,
+ * so it is not required to wrap it in useMemo or define outside component
+ * @returns throttled function which has cancel and flush methods, always the same instance of a function.
+ * @see https://lodash.com/docs/4.17.15#throttle
+ */
+function useThrottle(callback, delay, options) {
+  const savedCallback = (0, _react.useRef)((0, _throttle.default)(callback, delay, options));
+  (0, _react.useEffect)(() => {
+    savedCallback.current?.cancel();
+    savedCallback.current = (0, _throttle.default)(callback, delay, options);
+    return () => savedCallback?.current?.cancel();
+  }, [delay, callback]);
+  const resultFunction = (0, _react.useCallback)((...args) => savedCallback.current(...args), []);
+  if (!resultFunction.cancel) {
+    resultFunction.cancel = () => savedCallback.current?.cancel?.();
+    resultFunction.flush = () => savedCallback.current?.flush?.();
+  }
+  return resultFunction;
+}

package/cjs/hooks/use-translation/index.d.ts

@@ -0,0 +1 @@
+export * from './use-translation';

package/cjs/hooks/use-translation/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useTranslation = require("./use-translation");
+Object.keys(_useTranslation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useTranslation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useTranslation[key];
+    }
+  });
+});