@povio/ui 0.0.4 → 0.0.6

package/dist/hooks/useLongPressRepeat.d.ts

@@ -0,0 +1,9 @@
+export declare const useLongPressRepeat: ({ onPress, enabled, interval, timeout, }: {
+    onPress: (long?: boolean) => void;
+    enabled?: boolean;
+    interval?: number;
+    timeout?: number;
+}) => {
+    onPressStart: () => void;
+    onPressEnd: () => void;
+};

package/{src/hooks/useLongPressRepeat.ts → dist/hooks/useLongPressRepeat.js}

@@ -1,24 +1,16 @@
-import { useEffect, useRef } from "react";
-
-export const useLongPressRepeat = ({
+import { useRef, useEffect } from "react";
+const useLongPressRepeat = ({
   onPress,
   enabled = true,
   interval = 85,
-  timeout = 500,
-}: {
-  onPress: (long?: boolean) => void;
-  enabled?: boolean;
-  interval?: number;
-  timeout?: number;
+  timeout = 500
 }) => {
-  const intervalRef = useRef<NodeJS.Timeout>(undefined);
-
+  const intervalRef = useRef(void 0);
   useEffect(() => {
     return () => {
       clearInterval(intervalRef.current);
     };
   }, []);
-
   const onPressStart = () => {
     onPress(false);
     if (!enabled) {
@@ -31,10 +23,11 @@ export const useLongPressRepeat = ({
       }, interval);
     }, timeout);
   };
-
   const onPressEnd = () => {
     clearInterval(intervalRef.current);
   };
-
   return { onPressStart, onPressEnd };
 };
+export {
+  useLongPressRepeat
+};

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,7 @@
+import { PaginationState } from '@tanstack/react-table';
+export declare function usePagination(defaultPagination?: PaginationState): {
+    pagination: PaginationState;
+    setPagination: import('react').Dispatch<import('react').SetStateAction<PaginationState>>;
+    pageIndex: number;
+    pageSize: number;
+};

package/dist/hooks/usePagination.js

@@ -0,0 +1,35 @@
+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.d.ts

@@ -0,0 +1,3 @@
+export declare function useScrollableListBox(): {
+    ref: import('react').RefObject<HTMLDivElement | null>;
+};

package/{src/hooks/useScrollableListBox.ts → dist/hooks/useScrollableListBox.js}

@@ -1,35 +1,30 @@
-import { useEffect, useRef } from "react";
-
-import { useBreakpoint } from "#ui/hooks/useBreakpoint";
-
-export function useScrollableListBox() {
-  const ref = useRef<HTMLDivElement | null>(null);
+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 undefined;
+      return void 0;
     }
-
-    const onPointerDownCapture = (e: PointerEvent) => {
+    const onPointerDownCapture = (e) => {
       e.stopPropagation();
     };
-
-    const onClickCapture = (e: MouseEvent) => {
-      if ((e.currentTarget as HTMLDivElement)?.contains(e.target as Node) && e.target !== e.currentTarget) {
-        (e.target as HTMLElement).click();
+    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

@@ -0,0 +1,4 @@
+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/{src/hooks/useSingletonMutation.ts → dist/hooks/useSingletonMutation.js}

@@ -1,30 +1,27 @@
-import { type UseMutationOptions, useMutation } from "@tanstack/react-query";
 import { useRef } from "react";
-
-export function useSingletonMutation<TData, TError, TVariables>({
+function useSingletonMutation({
   mutationFn,
+  useMutation,
   ...options
-}: UseMutationOptions<TData, TError, TVariables> &
-  Required<Pick<UseMutationOptions<TData, TError, TVariables>, "mutationFn">>) {
-  const mutationFnPromiseRef = useRef<Promise<TData> | null>(null);
-
-  return useMutation<TData, TError, TVariables>({
+}) {
+  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.d.ts

@@ -0,0 +1,6 @@
+import { SortingState } from '@tanstack/react-table';
+export declare function useSorting(defaultSorting?: SortingState, prefix?: string): {
+    sorting: SortingState;
+    setSorting: import('react').Dispatch<import('react').SetStateAction<SortingState>>;
+    order: string;
+};

package/dist/hooks/useSorting.js

@@ -0,0 +1,30 @@
+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.d.ts

@@ -0,0 +1,4 @@
+import { RefObject, SetStateAction } from 'react';
+type StateRefReturn<T> = [T, RefObject<T>, (value: SetStateAction<T>) => void];
+export declare const useStateAndRef: <T>(initialState: T | (() => T)) => StateRefReturn<T>;
+export {};

package/dist/hooks/useStateAndRef.js

@@ -0,0 +1,17 @@
+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.d.ts

@@ -0,0 +1,16 @@
+import { ColumnDef, ColumnOrderState, VisibilityState } from '@tanstack/react-table';
+interface UseTableColumnConfigOptions {
+    visibleColumns?: VisibilityState;
+    columnOrder?: ColumnOrderState;
+    onVisibilityChange?: (value: VisibilityState) => void;
+    onOrderChange?: (value: ColumnOrderState) => void;
+}
+export declare function useTableColumnConfig<TData, TValue>(defaultColumns: ColumnDef<TData, TValue>[], options?: UseTableColumnConfigOptions): {
+    configColumns: ColumnDef<TData, TValue>[];
+    columns: ColumnDef<TData, TValue>[];
+    visibleColumns: VisibilityState;
+    columnOrder: ColumnOrderState;
+    onVisibilityChange: (value: VisibilityState) => void;
+    onOrderChange: (value: ColumnOrderState) => void;
+};
+export {};

package/dist/hooks/useTableColumnConfig.js

@@ -0,0 +1,59 @@
+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.d.ts

@@ -0,0 +1,84 @@
+import { KeyboardEvent } from 'react';
+declare const Selectors: {
+    readonly Cell: "[role=\"cell\"],[role=\"gridcell\"],[role=\"columnheader\"],[role=\"rowheader\"],td,th";
+    readonly Row: "[role=\"row\"],tr";
+    readonly RowGroup: "[role=\"rowgroup\"],thead,tbody,tfoot";
+    /** Selector from here: https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/focus.ts#L10 */
+    readonly 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]";
+};
+type Config = {
+    /** Enable debug logs */
+    debug?: boolean;
+    /** CSS Selectors being used to find Rows, Row Groups, Cells and Focusable elements */
+    selectors?: Partial<typeof Selectors>;
+    /** How many rows to move when pressing page up/down - Default goes to first/last row */
+    pageUpDown?: number;
+} | undefined;
+declare class DataGridNav {
+    private selectors;
+    readonly pageUpDown: number | undefined;
+    private keys;
+    private disabled;
+    readonly debug: boolean;
+    private activeCell;
+    constructor();
+    constructor(config: Config);
+    private debugLog;
+    /**
+     * Disables the keyboard listener in cases
+     * that elements inside the grid need to use
+     * arrows keys etc., like select dropdowns
+     */
+    disable(): void;
+    /**
+     * Enables the keyboard listeners
+     */
+    enable(): void;
+    private isFocusable;
+    getActiveCell(): HTMLElement | null;
+    /** Used as a keyboard listener for key up */
+    tableKeyUp(): void;
+    /** Used as a keyboard listener for key down */
+    tableKeyDown(e: KeyboardEvent): void;
+    /**
+     * Handles the navigation inside a cell
+     */
+    cellNavigation(e: KeyboardEvent): void;
+    /**
+     * Handles the navigation outside a cell
+     * on the grid level
+     */
+    gridNavigation(e: KeyboardEvent): void;
+    private pageCellNavigation;
+    private verticalCellNavigation;
+    /**
+     * 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
+     */
+    private focusOnFirstCell;
+    /**
+     * 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.
+     */
+    private getColumnIndex;
+    /**
+     * Get the row index of a `row` based
+     * on its sibling rows
+     */
+    private getRowIndex;
+    /**
+     * Equivalent to prevUntil/nextUntil in jQuery
+     * https://api.jquery.com/prevUntil/
+     */
+    private findUntil;
+}
+export declare function useTableNav(options?: Config): {
+    listeners: {
+        onKeyDown: (e: KeyboardEvent) => void;
+        onKeyUp: () => void;
+    };
+    tableNav: DataGridNav;
+};
+export {};