@datarobot/design-system 28.2.2

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

@@ -0,0 +1,174 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { useTableKeyboardNavigation } from './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 = renderHook(() => 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();
+    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();
+    act(() => hook.result.current.setFocusedCell('-1-0'));
+    act(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'ArrowDown'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    expect(cellRefMock.current.focus).toHaveBeenCalled();
+    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();
+    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);
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    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);
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    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
+    act(() => hook.result.current.setFocusedCell('-1-0'));
+    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
+    act(() => hook.result.current.setFocusedCell('-1-1'));
+    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
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    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
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    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);
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    act(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'Enter'
+    })));
+    await 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);
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    hook.result.current.registerCustomCellAction('0-0', customCellActionMock);
+    act(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'Enter'
+    })));
+    await 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();
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    act(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'End'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-2');
+    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();
+    act(() => hook.result.current.setFocusedCell('0-0'));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+    act(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'PageDown'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('1-0');
+    act(() => hook.result.current.onTableKeyDownHandler(new KeyboardEvent('keydown', {
+      key: 'PageUp'
+    })));
+    expect(hook.result.current.focusedCell).toEqual('0-0');
+  });
+});

package/esm/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/esm/hooks/use-throttle/index.js

@@ -0,0 +1,2 @@
+export { useThrottle } from './use-throttle';
+export { useThrottleValue } from './use-throttle-value';

package/esm/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/esm/hooks/use-throttle/use-throttle-value.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef, useState } from 'react';
+import throttle from 'lodash/throttle';
+
+/**
+ * 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 function useThrottleValue(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  const onChangeThrottled = useRef(throttle(setDebouncedValue, delay));
+  useEffect(() => {
+    onChangeThrottled.current?.cancel?.();
+    onChangeThrottled.current = throttle(setDebouncedValue, delay);
+    return () => onChangeThrottled.current?.cancel?.();
+  }, [delay]);
+  useEffect(() => {
+    onChangeThrottled.current?.(value);
+  }, [value]);
+  return debouncedValue;
+}

package/esm/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/esm/hooks/use-throttle/use-throttle.js

@@ -0,0 +1,31 @@
+import throttle from 'lodash/throttle';
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * 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
+ */
+export function useThrottle(callback, delay, options) {
+  const savedCallback = useRef(throttle(callback, delay, options));
+  useEffect(() => {
+    savedCallback.current?.cancel();
+    savedCallback.current = throttle(callback, delay, options);
+    return () => savedCallback?.current?.cancel();
+  }, [delay, callback]);
+  const resultFunction = useCallback((...args) => savedCallback.current(...args), []);
+  if (!resultFunction.cancel) {
+    resultFunction.cancel = () => savedCallback.current?.cancel?.();
+    resultFunction.flush = () => savedCallback.current?.flush?.();
+  }
+  return resultFunction;
+}

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

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

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

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

package/esm/hooks/use-translation/use-translation.d.ts

@@ -0,0 +1,107 @@
+type OptionsType = Record<string, string | number | boolean | undefined>;
+export declare function useTranslation(): {
+    isLocaleFetched: boolean;
+    isLoaded: boolean;
+    t: (key: string, options?: OptionsType) => string;
+    0: import("i18next").TFunction<string, undefined>;
+    1: import("i18next").i18n;
+    2: boolean;
+    length: 3;
+    toString(): string;
+    toLocaleString(): string;
+    pop(): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined> | undefined;
+    push(...items: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]): number;
+    concat(...items: ConcatArray<boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>[]): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    concat(...items: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined> | ConcatArray<boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>)[]): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    join(separator?: string | undefined): string;
+    reverse(): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    shift(): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined> | undefined;
+    slice(start?: number | undefined, end?: number | undefined): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    sort(compareFn?: ((a: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, b: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>) => number) | undefined): import("react-i18next").UseTranslationResponse<string, undefined>;
+    splice(start: number, deleteCount?: number | undefined): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    splice(start: number, deleteCount: number, ...items: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    unshift(...items: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]): number;
+    indexOf(searchElement: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, fromIndex?: number | undefined): number;
+    lastIndexOf(searchElement: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, fromIndex?: number | undefined): number;
+    every<S extends boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => value is S, thisArg?: any): this is S[];
+    every(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => unknown, thisArg?: any): boolean;
+    some(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => unknown, thisArg?: any): boolean;
+    forEach(callbackfn: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => U, thisArg?: any): U[];
+    filter<S_1 extends boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => value is S_1, thisArg?: any): S_1[];
+    filter(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => unknown, thisArg?: any): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    reduce(callbackfn: (previousValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentIndex: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>;
+    reduce(callbackfn: (previousValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentIndex: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, initialValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>;
+    reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentIndex: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => U_1, initialValue: U_1): U_1;
+    reduceRight(callbackfn: (previousValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentIndex: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>;
+    reduceRight(callbackfn: (previousValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentIndex: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, initialValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>;
+    reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, currentIndex: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => U_2, initialValue: U_2): U_2;
+    find<S_2 extends boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, obj: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => value is S_2, thisArg?: any): S_2 | undefined;
+    find(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, obj: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => unknown, thisArg?: any): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined> | undefined;
+    findIndex(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, obj: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => unknown, thisArg?: any): number;
+    fill(value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, start?: number | undefined, end?: number | undefined): import("react-i18next").UseTranslationResponse<string, undefined>;
+    copyWithin(target: number, start: number, end?: number | undefined): import("react-i18next").UseTranslationResponse<string, undefined>;
+    entries(): IterableIterator<[number, boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>]>;
+    keys(): IterableIterator<number>;
+    values(): IterableIterator<boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>;
+    includes(searchElement: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, fromIndex?: number | undefined): boolean;
+    flatMap<U_3, This = undefined>(callback: (this: This, value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => U_3 | readonly U_3[], thisArg?: This | undefined): U_3[];
+    flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
+    at(index: number): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined> | undefined;
+    findLast<S_3 extends boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => value is S_3, thisArg?: any): S_3 | undefined;
+    findLast(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => unknown, thisArg?: any): boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined> | undefined;
+    findLastIndex(predicate: (value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, index: number, array: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]) => unknown, thisArg?: any): number;
+    toReversed(): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    toSorted(compareFn?: ((a: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>, b: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>) => number) | undefined): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    toSpliced(start: number, deleteCount: number, ...items: (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[]): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    toSpliced(start: number, deleteCount?: number | undefined): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    with(index: number, value: boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>): (boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>)[];
+    [Symbol.iterator](): IterableIterator<boolean | import("i18next").i18n | import("i18next").TFunction<string, undefined>>;
+    [Symbol.unscopables]: {
+        [x: number]: boolean | undefined;
+        length?: boolean | undefined;
+        toString?: boolean | undefined;
+        toLocaleString?: boolean | undefined;
+        pop?: boolean | undefined;
+        push?: boolean | undefined;
+        concat?: boolean | undefined;
+        join?: boolean | undefined;
+        reverse?: boolean | undefined;
+        shift?: boolean | undefined;
+        slice?: boolean | undefined;
+        sort?: boolean | undefined;
+        splice?: boolean | undefined;
+        unshift?: boolean | undefined;
+        indexOf?: boolean | undefined;
+        lastIndexOf?: boolean | undefined;
+        every?: boolean | undefined;
+        some?: boolean | undefined;
+        forEach?: boolean | undefined;
+        map?: boolean | undefined;
+        filter?: boolean | undefined;
+        reduce?: boolean | undefined;
+        reduceRight?: boolean | undefined;
+        find?: boolean | undefined;
+        findIndex?: boolean | undefined;
+        fill?: boolean | undefined;
+        copyWithin?: boolean | undefined;
+        entries?: boolean | undefined;
+        keys?: boolean | undefined;
+        values?: boolean | undefined;
+        includes?: boolean | undefined;
+        flatMap?: boolean | undefined;
+        flat?: boolean | undefined;
+        at?: boolean | undefined;
+        findLast?: boolean | undefined;
+        findLastIndex?: boolean | undefined;
+        toReversed?: boolean | undefined;
+        toSorted?: boolean | undefined;
+        toSpliced?: boolean | undefined;
+        with?: boolean | undefined;
+        [Symbol.iterator]?: boolean | undefined;
+        readonly [Symbol.unscopables]?: boolean | undefined;
+    };
+    i18n: import("i18next").i18n;
+    ready: boolean;
+};
+export {};

package/esm/hooks/use-translation/use-translation.js

@@ -0,0 +1,76 @@
+import { useTranslation as useReactTranslation } from 'react-i18next';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { usePrevious } from '../use-previous';
+function defaultT(key, params) {
+  if (!params) {
+    return key;
+  }
+  const count = typeof params.count === 'number' ? params.count : 0;
+  const isDefaultNeeded = count !== 1 && params.plural;
+  const translateString = isDefaultNeeded ? String(params.plural) : key;
+  return translateString.replace(/\{\{(\w+)\}\}/g, (_match, match) => String(params[match] ?? `{{${match}}}`));
+}
+
+// todo replace with design system version
+const translationKey = `design-system-${Date.now()}`;
+const setDefaultValues = data => {
+  return Object.keys(data).reduce((acc, current) => {
+    acc[current] = data[current] || current;
+    return acc;
+  }, {});
+};
+const LANGUAGE_CODES = {
+  ENGLISH: 'en',
+  SPANISH_LA: 'es_419',
+  FRENCH: 'fr',
+  JAPANESE: 'ja',
+  KOREAN: 'ko',
+  PORTUGUESE_BRAZIL: 'pt_BR'
+};
+const loadLocales = {
+  [LANGUAGE_CODES.SPANISH_LA]: () => import(`../../../locales/es_419/translation.json`),
+  [LANGUAGE_CODES.FRENCH]: () => import(`../../../locales/fr/translation.json`),
+  [LANGUAGE_CODES.JAPANESE]: () => import(`../../../locales/ja/translation.json`),
+  [LANGUAGE_CODES.KOREAN]: () => import(`../../../locales/ko/translation.json`),
+  [LANGUAGE_CODES.PORTUGUESE_BRAZIL]: () => import(`../../../locales/pt_BR/translation.json`)
+};
+let prevLanguage = null;
+export function useTranslation() {
+  const result = useReactTranslation(translationKey);
+  const {
+    language,
+    hasResourceBundle,
+    isInitialized
+  } = result.i18n;
+  const isLoaded = hasResourceBundle?.(language, translationKey);
+  const [isFetched, setIsFetched] = useState(isLoaded);
+  const isFirstLocaleLoaded = useRef(isLoaded);
+  const isEnglish = language === LANGUAGE_CODES.ENGLISH;
+  const prevLanguageRef = usePrevious(language);
+  const t = (key, options = {}) => {
+    const baseOptions = {
+      fallbackLng: isEnglish ? LANGUAGE_CODES.ENGLISH : prevLanguage || language,
+      defaultValue_other: options?.plural,
+      ...options
+    };
+    return result.t(key, baseOptions);
+  };
+  useLayoutEffect(() => {
+    prevLanguage = prevLanguageRef;
+    if (!isLoaded && loadLocales[language]) {
+      setIsFetched(false);
+      loadLocales[language]().then(data => {
+        const translations = setDefaultValues(data.default);
+        result.i18n.addResourceBundle(language, translationKey, translations);
+        setIsFetched(true);
+        isFirstLocaleLoaded.current = true;
+      });
+    }
+  }, [language]);
+  return {
+    ...result,
+    isLocaleFetched: isFetched || isEnglish,
+    isLoaded: isFirstLocaleLoaded.current || isEnglish,
+    t: isInitialized ? t : defaultT
+  };
+}

package/esm/hooks/use-translation/use-translation.test.js

@@ -0,0 +1,107 @@
+import { renderHook } from '@testing-library/react';
+import { useTranslation } from './use-translation';
+describe('useTranslation hook', () => {
+  it('should return the t function', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(typeof result.current.t).toBe('function');
+  });
+  it('should return the key if no parameters are provided', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('hello')).toBe('hello');
+  });
+  it('should replace placeholders with provided parameters', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('Hello, {{name}}!', {
+      name: 'Alice'
+    })).toBe('Hello, Alice!');
+  });
+  it('should leave placeholders intact if no matching parameter is found', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('Hello, {{name}}!')).toBe('Hello, {{name}}!');
+  });
+  it('should handle multiple placeholders', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('{{greeting}}, {{name}}!', {
+      greeting: 'Hi',
+      name: 'Bob'
+    })).toBe('Hi, Bob!');
+  });
+  it('should not replace non-matching placeholders', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('Welcome, {{user}}!', {
+      name: 'Charlie'
+    })).toBe('Welcome, {{user}}!');
+  });
+  it('should use the key when count is 1 and no plural is provided', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('item', {
+      count: 1
+    })).toBe('item');
+  });
+  it('should use the key when count is 0 and no defaultpluralValue is provided', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('item', {
+      count: 0
+    })).toBe('item');
+  });
+  it('should use the key when count is not a number and no plural is provided', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('item', {
+      count: 'not a number'
+    })).toBe('item');
+  });
+  it('should use plural when count is greater than 1', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('item', {
+      count: 2,
+      plural: '2 items'
+    })).toBe('2 items');
+  });
+  it('should use plural with placeholders when count is greater than 1', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('item', {
+      count: 5,
+      plural: '{{count}} items'
+    })).toBe('5 items');
+  });
+  it('should not use plural when count is 1', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('item', {
+      count: 1,
+      plural: '2 items'
+    })).toBe('item');
+  });
+  it('should use plural when count is 0', () => {
+    const {
+      result
+    } = renderHook(() => useTranslation());
+    expect(result.current.t('item', {
+      count: 0,
+      plural: '2 items'
+    })).toBe('2 items');
+  });
+});

package/esm/hooks/use-tree-navigation/constants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Tab is omitted to allow navigation inside the node
+ * @link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
+ */
+export declare const KEYS: {
+    readonly UP: "ArrowUp";
+    readonly DOWN: "ArrowDown";
+    readonly RIGHT: "ArrowRight";
+    readonly LEFT: "ArrowLeft";
+    readonly HOME: "Home";
+    readonly END: "End";
+    readonly ESC: "Escape";
+    readonly ENTER: "Enter";
+    readonly SPACE: " ";
+    readonly TAB: "Tab";
+};
+export declare const KEY_VALUES: ("Tab" | "Escape" | "ArrowUp" | "ArrowDown" | "ArrowRight" | "ArrowLeft" | "Home" | "End" | "Enter" | " ")[];

package/esm/hooks/use-tree-navigation/constants.js

@@ -0,0 +1,17 @@
+/**
+ * Tab is omitted to allow navigation inside the node
+ * @link https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
+ */
+export const KEYS = {
+  UP: 'ArrowUp',
+  DOWN: 'ArrowDown',
+  RIGHT: 'ArrowRight',
+  LEFT: 'ArrowLeft',
+  HOME: 'Home',
+  END: 'End',
+  ESC: 'Escape',
+  ENTER: 'Enter',
+  SPACE: ' ',
+  TAB: 'Tab'
+};
+export const KEY_VALUES = Object.values(KEYS);

package/esm/hooks/use-tree-navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { useTreeNavigation } from './use-tree-navigation';
+export { useTreeNodeNavigation } from './use-tree-node-navigation';
+export { TreeNavigationContext, TreeNavigationProvider, } from './tree-navigation-context';

package/esm/hooks/use-tree-navigation/index.js

@@ -0,0 +1,3 @@
+export { useTreeNavigation } from './use-tree-navigation';
+export { useTreeNodeNavigation } from './use-tree-node-navigation';
+export { TreeNavigationContext, TreeNavigationProvider } from './tree-navigation-context';

package/esm/hooks/use-tree-navigation/tree-navigation-context.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNavigationAdapter, TreeNavigationContextState } from './types';
+export type TreeNavigationProviderProps = {
+    children: React.ReactNode;
+    adapter: TreeNavigationAdapter<any>;
+    tree: any[];
+    isDisabled?: boolean;
+};
+export declare const TreeNavigationContext: React.Context<TreeNavigationContextState>;
+export declare const TreeNavigationProvider: ({ children, adapter, tree, isDisabled, }: TreeNavigationProviderProps) => import("react/jsx-runtime").JSX.Element;