@povio/ui 0.0.7 → 0.0.8

package/dist/hooks/useLongPressRepeat.js

@@ -1,33 +0,0 @@
-import { useRef, useEffect } from "react";
-const useLongPressRepeat = ({
-  onPress,
-  enabled = true,
-  interval = 85,
-  timeout = 500
-}) => {
-  const intervalRef = useRef(void 0);
-  useEffect(() => {
-    return () => {
-      clearInterval(intervalRef.current);
-    };
-  }, []);
-  const onPressStart = () => {
-    onPress(false);
-    if (!enabled) {
-      return;
-    }
-    intervalRef.current = setTimeout(() => {
-      onPress(true);
-      intervalRef.current = setInterval(() => {
-        onPress(true);
-      }, interval);
-    }, timeout);
-  };
-  const onPressEnd = () => {
-    clearInterval(intervalRef.current);
-  };
-  return { onPressStart, onPressEnd };
-};
-export {
-  useLongPressRepeat
-};

package/dist/hooks/usePagination.js

@@ -1,35 +0,0 @@
-import { useState, useEffect } from "react";
-import { UIRouter } from "../config/router.context.js";
-const DEFAULT_STATE = {
-  pageIndex: 1,
-  pageSize: 20
-};
-function usePagination(defaultPagination) {
-  const { pathname, query, replace, searchParams } = UIRouter.useUIRouter();
-  const [pagination, setPagination] = useState(
-    defaultPagination ?? {
-      pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
-      pageSize: searchParams.has("size") ? Number.parseInt(searchParams.get("size") ?? "", 10) : DEFAULT_STATE.pageSize
-    }
-  );
-  useEffect(() => {
-    const { page: _page, size: _size, ...queryParms } = query;
-    replace({
-      pathname,
-      query: {
-        ...queryParms,
-        ...pagination.pageSize !== DEFAULT_STATE.pageSize ? { size: pagination.pageSize } : {},
-        ...pagination.pageIndex !== DEFAULT_STATE.pageIndex ? { page: pagination.pageIndex } : {}
-      }
-    });
-  }, [pagination]);
-  return {
-    pagination,
-    setPagination,
-    pageIndex: pagination.pageIndex,
-    pageSize: pagination.pageSize
-  };
-}
-export {
-  usePagination
-};

package/dist/hooks/useScrollableListBox.js

@@ -1,30 +0,0 @@
-import { useRef, useEffect } from "react";
-import { useBreakpoint } from "./useBreakpoint.js";
-function useScrollableListBox() {
-  const ref = useRef(null);
-  const isDesktop = useBreakpoint("md");
-  useEffect(() => {
-    const node = ref.current;
-    if (!node || isDesktop) {
-      return void 0;
-    }
-    const onPointerDownCapture = (e) => {
-      e.stopPropagation();
-    };
-    const onClickCapture = (e) => {
-      if (e.currentTarget?.contains(e.target) && e.target !== e.currentTarget) {
-        e.target.click();
-      }
-    };
-    node.addEventListener("pointerdown", onPointerDownCapture);
-    node.addEventListener("click", onClickCapture);
-    return () => {
-      node.removeEventListener("pointerdown", onPointerDownCapture);
-      node.removeEventListener("click", onClickCapture);
-    };
-  }, [ref, isDesktop]);
-  return { ref };
-}
-export {
-  useScrollableListBox
-};

package/dist/hooks/useSingletonMutation.d.ts

@@ -1,4 +0,0 @@
-import { UseMutationOptions, useMutation as iUseMutation } from '@tanstack/react-query';
-export declare function useSingletonMutation<TData, TError, TVariables>({ mutationFn, useMutation, ...options }: UseMutationOptions<TData, TError, TVariables> & {
-    useMutation: typeof iUseMutation;
-} & Required<Pick<UseMutationOptions<TData, TError, TVariables>, "mutationFn">>): import('@tanstack/react-query').UseMutationResult<TData, TError, TVariables, unknown>;

package/dist/hooks/useSingletonMutation.js

@@ -1,27 +0,0 @@
-import { useRef } from "react";
-function useSingletonMutation({
-  mutationFn,
-  useMutation,
-  ...options
-}) {
-  const mutationFnPromiseRef = useRef(null);
-  return useMutation({
-    ...options,
-    mutationFn: async (variables) => {
-      if (mutationFnPromiseRef.current) {
-        return mutationFnPromiseRef.current;
-      }
-      const promise = mutationFn(variables);
-      mutationFnPromiseRef.current = promise;
-      try {
-        const result = await promise;
-        return result;
-      } finally {
-        mutationFnPromiseRef.current = null;
-      }
-    }
-  });
-}
-export {
-  useSingletonMutation
-};

package/dist/hooks/useSorting.js

@@ -1,30 +0,0 @@
-import { useState, useMemo, useEffect } from "react";
-import { UIRouter } from "../config/router.context.js";
-function useSorting(defaultSorting, prefix = "") {
-  const { pathname, replace, searchParams, query } = UIRouter.useUIRouter();
-  const [sorting, setSorting] = useState(
-    defaultSorting ?? searchParams.get(`order${prefix && `-${prefix}`}`)?.split(",").map((item) => {
-      if (item.startsWith("-")) {
-        return { id: item.slice(1), desc: true };
-      }
-      if (item.startsWith("+")) {
-        return { id: item.slice(1), desc: false };
-      }
-      return { id: item, desc: false };
-    }) ?? []
-  );
-  const order = useMemo(() => {
-    return sorting.map((field) => `${field.desc ? "-" : "+"}${field.id}`).join(",");
-  }, [sorting]);
-  useEffect(() => {
-    const { sort: _sort, ...queryParms } = query;
-    replace({
-      pathname,
-      query: { ...queryParms, ...order ? { [`order${prefix && `-${prefix}`}`]: order } : {} }
-    });
-  }, [order]);
-  return { sorting, setSorting, order };
-}
-export {
-  useSorting
-};

package/dist/hooks/useStateAndRef.js

@@ -1,17 +0,0 @@
-import { useState, useRef, useCallback } from "react";
-import { ObjectUtils } from "../utils/object.utils.js";
-const useStateAndRef = (initialState) => {
-  const [state, setState] = useState(initialState);
-  const ref = useRef(state);
-  const updateValue = useCallback(
-    (value) => {
-      ref.current = ObjectUtils.isFunction(value) ? value(ref.current) : value;
-      setState(ref.current);
-    },
-    [setState]
-  );
-  return [state, ref, updateValue];
-};
-export {
-  useStateAndRef
-};

package/dist/hooks/useTableColumnConfig.js

@@ -1,59 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
-function sortByKeyOrder(data, orderedKeys = []) {
-  return [...data].sort((a, b) => {
-    return orderedKeys.findIndex((key) => key === (a.id ?? a.accessorKey)) - orderedKeys.findIndex((key) => key === (b.id ?? b.accessorKey));
-  });
-}
-function useTableColumnConfig(defaultColumns, options = {}) {
-  const [internalVisibleColumns, setInternalVisibleColumns] = useState(
-    () => defaultColumns.map((col) => ({ [col.id ?? col.accessorKey]: true })).reduce((acc, cur) => ({ ...cur, ...acc }), {})
-  );
-  const [internalColumnOrder, setInternalColumnOrder] = useState(
-    () => defaultColumns.map((col) => col.id ?? col.accessorKey)
-  );
-  useEffect(() => {
-    if (options.visibleColumns) {
-      setInternalVisibleColumns(options.visibleColumns);
-    }
-  }, [options.visibleColumns]);
-  useEffect(() => {
-    if (options.columnOrder) {
-      setInternalColumnOrder(options.columnOrder);
-    }
-  }, [options.columnOrder]);
-  const handleVisibilityChange = useCallback(
-    (value) => {
-      setInternalVisibleColumns(value);
-      options?.onVisibilityChange?.(value);
-    },
-    [options]
-  );
-  const handleOrderChange = useCallback(
-    (value) => {
-      setInternalColumnOrder(value);
-      options?.onOrderChange?.(value);
-    },
-    [options]
-  );
-  const configColumns = useMemo(
-    () => sortByKeyOrder(defaultColumns, internalColumnOrder),
-    [defaultColumns, internalColumnOrder]
-  );
-  const columns = useMemo(
-    () => configColumns.filter(
-      (col) => internalVisibleColumns?.[col.id ?? col.accessorKey] ?? true
-    ),
-    [configColumns, internalVisibleColumns]
-  );
-  return {
-    configColumns,
-    columns,
-    visibleColumns: internalVisibleColumns,
-    columnOrder: internalColumnOrder,
-    onVisibilityChange: handleVisibilityChange,
-    onOrderChange: handleOrderChange
-  };
-}
-export {
-  useTableColumnConfig
-};

package/dist/hooks/useTableNav.js

@@ -1,409 +0,0 @@
-import { logger } from "../utils/logger.js";
-const Selectors = {
-  Cell: '[role="cell"],[role="gridcell"],[role="columnheader"],[role="rowheader"],td,th',
-  Row: '[role="row"],tr',
-  RowGroup: '[role="rowgroup"],thead,tbody,tfoot',
-  /** Selector from here: https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/focus.ts#L10 */
-  Focusable: 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not([aria-disabled="true"]):not([tabindex="-1"]):not(:disabled),*[tabindex]'
-};
-class DataGridNav {
-  constructor(config = {}) {
-    this.keys = [];
-    this.activeCell = null;
-    this.debugLog = (functionName, message) => {
-      if (this.debug) {
-        logger.info(`[${functionName}]: ${message}`);
-      }
-    };
-    const { selectors = {}, pageUpDown, debug = false } = config;
-    this.selectors = { ...Selectors, ...selectors };
-    this.pageUpDown = pageUpDown;
-    this.keys = [];
-    this.debug = debug;
-    this.disabled = false;
-  }
-  /**
-   * Disables the keyboard listener in cases
-   * that elements inside the grid need to use
-   * arrows keys etc., like select dropdowns
-   */
-  disable() {
-    this.disabled = true;
-  }
-  /**
-   * Enables the keyboard listeners
-   */
-  enable() {
-    this.disabled = false;
-  }
-  // oxlint-disable-next-line class-methods-use-this
-  isFocusable(el) {
-    return el instanceof HTMLElement || el instanceof SVGElement;
-  }
-  getActiveCell() {
-    return this.activeCell;
-  }
-  /** Used as a keyboard listener for key up */
-  tableKeyUp() {
-    this.keys = [];
-  }
-  /** Used as a keyboard listener for key down */
-  tableKeyDown(e) {
-    this.debugLog("tableKeyDown", `Key pressed: ${e.key}`);
-    if (this.disabled) {
-      this.debugLog("tableKeyDown", "interaction is disabled");
-      return;
-    }
-    if ("ArrowDown" === e.key || "ArrowUp" === e.key || "ArrowLeft" === e.key || "ArrowRight" === e.key) {
-      e.preventDefault();
-    }
-    if (this.keys.length === 0 || this.keys[this.keys.length - 1] !== e.key) {
-      this.keys.push(e.key);
-    }
-    if (!(e.target instanceof Element)) {
-      return;
-    }
-    const cell = e.target.parentElement?.closest(`${this.selectors.Cell},${this.selectors.Row}`);
-    if (!cell) {
-      this.debugLog("tableKeyDown", "cell not found");
-      return;
-    }
-    if (cell.matches(this.selectors.Cell)) {
-      this.debugLog("tableKeyDown", "event captured in cell");
-      this.cellNavigation(e);
-    } else {
-      this.debugLog("tableKeyDown", "event captured in cell");
-      this.gridNavigation(e);
-    }
-  }
-  /**
-   * Handles the navigation inside a cell
-   */
-  cellNavigation(e) {
-    if (!(e.target instanceof Element)) {
-      return;
-    }
-    if (e.key === "Escape") {
-      const cell = e.target.closest(this.selectors.Cell);
-      if (cell && this.isFocusable(cell)) {
-        cell.focus();
-        return;
-      }
-    }
-    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-      const cell = e.target.closest(this.selectors.Cell);
-      if (!cell) {
-        this.debugLog("cellNavigation", "cell not found");
-        return;
-      }
-      const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
-      const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
-      const nextFocusable = widgetIdx === focusableWidgets.length - 1 ? 0 : widgetIdx + 1;
-      const widgetToFocus = focusableWidgets[nextFocusable];
-      if (this.isFocusable(widgetToFocus)) {
-        widgetToFocus.focus();
-      }
-      return;
-    }
-    if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-      const cell = e.target.closest(this.selectors.Cell);
-      if (!cell) {
-        this.debugLog("cellNavigation", "cell not found");
-        return;
-      }
-      const focusableWidgets = [...cell.querySelectorAll(this.selectors.Focusable)];
-      const widgetIdx = focusableWidgets.findIndex((el) => el === e.target);
-      const previousFocusable = widgetIdx === 0 ? focusableWidgets.length - 1 : widgetIdx - 1;
-      const widgetToFocus = focusableWidgets[previousFocusable];
-      if (this.isFocusable(widgetToFocus)) {
-        widgetToFocus.focus();
-      }
-    }
-  }
-  /**
-   * Handles the navigation outside a cell
-   * on the grid level
-   */
-  gridNavigation(e) {
-    const { target } = e;
-    if (!(e.target instanceof Element)) {
-      return;
-    }
-    if (!(target instanceof Element)) {
-      return;
-    }
-    if (this.keys.length === 1) {
-      if (/^[a-zA-Z0-9]$/.test(e.key)) {
-        const cell = e.target.querySelector(this.selectors.Focusable);
-        if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
-          cell.focus();
-          cell.value = `${cell.value}${e.key}`;
-          e.preventDefault();
-        }
-        return;
-      }
-      if (e.key === "Backspace") {
-        const cell = e.target.querySelector(this.selectors.Focusable);
-        if (cell && this.isFocusable(cell) && cell instanceof HTMLInputElement) {
-          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
-          if (nativeInputValueSetter) {
-            nativeInputValueSetter.call(cell, "");
-            const ev = new Event("input", { bubbles: true });
-            cell.dispatchEvent(ev);
-          }
-        }
-        return;
-      }
-      if (e.key === "Enter") {
-        const cell = e.target.querySelector(this.selectors.Focusable);
-        if (cell && this.isFocusable(cell)) {
-          if (cell.getAttribute("data-type") === "select-trigger") {
-            cell.click();
-            return;
-          }
-          cell.focus();
-          e.preventDefault();
-        }
-        return;
-      }
-      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-        const direction = e.key === "ArrowLeft" ? "prev" : "next";
-        const cell = e.target.closest(this.selectors.Cell);
-        let nextCell = null;
-        if (direction === "next" && cell?.nextElementSibling instanceof HTMLElement) {
-          nextCell = cell.nextElementSibling;
-        }
-        if (direction === "prev" && cell?.previousElementSibling instanceof HTMLElement) {
-          nextCell = cell.previousElementSibling;
-        }
-        if (nextCell && this.isFocusable(nextCell)) {
-          nextCell.focus();
-          e.preventDefault();
-        }
-      }
-      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-        this.verticalCellNavigation(e);
-        return;
-      }
-      if (e.key === "PageUp" || e.key === "PageDown") {
-        this.pageCellNavigation(e);
-        return;
-      }
-      if (e.key === "Home" || e.key === "End") {
-        const row = e.target.closest(this.selectors.Row);
-        const rowChildren = [...row?.children || []];
-        if (e.key === "End") {
-          rowChildren.reverse();
-        }
-        this.focusOnFirstCell(rowChildren);
-      }
-    } else {
-      const [firstKey, secondKey] = this.keys;
-      if (firstKey === "Control" && // oxlint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
-      (secondKey === "Home" || secondKey === "End")) {
-        const row = e.target.closest(this.selectors.Row);
-        const siblings = row.parentElement?.children;
-        if (!siblings) {
-          this.debugLog("cellNavigation", "siblings not found");
-          return;
-        }
-        const rowToFocus = secondKey === "Home" ? siblings[0] : siblings[siblings.length - 1];
-        const rowChildren = [...rowToFocus?.children || []];
-        if (secondKey === "End") {
-          rowChildren.reverse();
-        }
-        this.focusOnFirstCell(rowChildren);
-      }
-    }
-  }
-  pageCellNavigation(e) {
-    if (!(e.target instanceof Element)) {
-      return;
-    }
-    const row = e.target.closest(this.selectors.Row);
-    const cell = e.target.closest(this.selectors.Cell);
-    if (row && cell) {
-      const position = this.getColumnIndex(cell);
-      if (position === void 0) {
-        this.debugLog("cellNavigation", "position not found");
-        return;
-      }
-      const direction = e.key === "PageUp" ? "prev" : "next";
-      const siblings = row.parentElement?.children;
-      if (!siblings) {
-        this.debugLog("cellNavigation", "siblings not found");
-        return;
-      }
-      let destinationRow;
-      if (this.pageUpDown) {
-        const methodClbk = direction === "prev" ? "previousSibling" : "nextSibling";
-        let sibling = row[methodClbk];
-        if (sibling === null) {
-          return;
-        }
-        let lastVisitedSibling = sibling;
-        for (let i = 0; i < this.pageUpDown - 1 && sibling; i++) {
-          sibling = sibling[methodClbk];
-          if (sibling) {
-            lastVisitedSibling = sibling;
-          }
-        }
-        destinationRow = sibling || lastVisitedSibling;
-      } else {
-        destinationRow = direction === "prev" ? siblings[0] : siblings[siblings.length - 1];
-      }
-      if (!destinationRow || !(destinationRow instanceof Element)) {
-        return;
-      }
-      const child = destinationRow.children[position];
-      if (child && this.isFocusable(child)) {
-        child.focus();
-      }
-    }
-  }
-  verticalCellNavigation(e) {
-    if (!(e.target instanceof Element)) {
-      return;
-    }
-    const row = e.target.closest(this.selectors.Row);
-    const cell = e.target.closest(this.selectors.Cell);
-    if (row && cell) {
-      const cellPosition = this.getColumnIndex(cell);
-      const rowPosition = this.getRowIndex(row);
-      this.debugLog("gridNavigation", `Initial row position: ${rowPosition}`);
-      this.debugLog("gridNavigation", `Initial cell position: ${cellPosition}`);
-      if (cellPosition === void 0 || rowPosition === void 0) {
-        this.debugLog("verticalCellNavigation", "row or cell position not found");
-        return;
-      }
-      const direction = e.key === "ArrowUp" ? "prev" : "next";
-      if (rowPosition === 0 && direction === "prev") {
-        const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
-        const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
-        const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
-        if (currentRowGroupIdx !== 0) {
-          const previousRowGroup = siblingRowGroups[currentRowGroupIdx - 1];
-          const rows = [...previousRowGroup.querySelectorAll(this.selectors.Row)];
-          const child2 = rows[rows.length - 1].children[cellPosition];
-          if (child2 && this.isFocusable(child2)) {
-            child2.focus();
-          }
-          return;
-        }
-      }
-      const siblingRows = [...row.parentElement?.querySelectorAll(this.selectors.Row) || []];
-      if (rowPosition === siblingRows.length - 1 && direction === "next") {
-        const currentRowGroup = row.parentElement?.closest(this.selectors.RowGroup);
-        const siblingRowGroups = [...currentRowGroup?.parentElement?.children || []];
-        const currentRowGroupIdx = siblingRowGroups.findIndex((el) => el === currentRowGroup);
-        if (currentRowGroupIdx !== siblingRowGroups.length - 1) {
-          const nextRowGroup = siblingRowGroups[currentRowGroupIdx + 1];
-          const rows = [...nextRowGroup.querySelectorAll(this.selectors.Row)];
-          const child2 = rows[0].children[cellPosition];
-          if (child2 && this.isFocusable(child2)) {
-            child2.focus();
-          }
-          return;
-        }
-        return;
-      }
-      const destinationRow = this.findUntil(direction, row, this.selectors.Row);
-      if (!destinationRow) {
-        return;
-      }
-      const child = destinationRow.children[cellPosition];
-      if (child && this.isFocusable(child)) {
-        child.focus();
-      }
-    }
-  }
-  /**
-   * Sending a row `Element` and then the first cell will be focused.
-   *
-   * If you want to focus the last cell then the row children can be passed in
-   * reversed order
-   */
-  focusOnFirstCell(el) {
-    for (let i = 0; i < el.length; i++) {
-      const child = el[i];
-      if (this.isFocusable(child)) {
-        child.focus();
-        return;
-      }
-    }
-  }
-  /**
-   * Get the column index of a `cell` based on the first `row` parent.
-   * `cellIndex` could be used, but it's not supported in HTML tables.
-   */
-  getColumnIndex(cell) {
-    let position = 0;
-    const siblings = cell?.parentNode?.children;
-    if (!siblings) {
-      return void 0;
-    }
-    while (cell !== siblings[position] && siblings[position] !== void 0) {
-      position++;
-    }
-    if (siblings[position] === void 0) {
-      this.debugLog("getColumnIndex", "position finding was not successful");
-      return void 0;
-    }
-    return position;
-  }
-  /**
-   * Get the row index of a `row` based
-   * on its sibling rows
-   */
-  getRowIndex(row) {
-    let position = 0;
-    const siblings = row?.parentNode?.children;
-    if (!siblings) {
-      return void 0;
-    }
-    while (row !== siblings[position] && siblings[position] !== void 0) {
-      position++;
-    }
-    if (siblings[position] === void 0) {
-      this.debugLog("getRowIndex", "position finding was not successful");
-      return void 0;
-    }
-    return position;
-  }
-  /**
-   * Equivalent to prevUntil/nextUntil in jQuery
-   * https://api.jquery.com/prevUntil/
-   */
-  // oxlint-disable-next-line class-methods-use-this
-  findUntil(direction, el, matchSelector, exitSelector) {
-    let element = el;
-    const method = direction === "next" ? "nextSibling" : "previousSibling";
-    while (element[method]) {
-      const sibling = element[method];
-      if (!sibling) {
-        return null;
-      }
-      if (exitSelector && sibling instanceof Element && sibling.matches(exitSelector)) {
-        return null;
-      }
-      if (sibling instanceof Element && sibling.matches(matchSelector)) {
-        return sibling;
-      }
-      element = sibling;
-    }
-    return null;
-  }
-}
-function useTableNav(options) {
-  const nav = new DataGridNav(options);
-  return {
-    listeners: {
-      onKeyDown: (e) => nav.tableKeyDown(e),
-      onKeyUp: () => nav.tableKeyUp()
-    },
-    tableNav: nav
-  };
-}
-export {
-  useTableNav
-};

package/dist/hooks/useTranslationMemo.js

@@ -1,14 +0,0 @@
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-function useTranslationMemo(func) {
-  const { t } = useTranslation();
-  return useMemo(() => {
-    if (func.length === 1) {
-      return func(t);
-    }
-    return func();
-  }, [func, t]);
-}
-export {
-  useTranslationMemo
-};