@ostack.tech/ui 0.3.1 → 0.3.3

package/dist/ostack-ui.js

@@ -1,10 +1,10 @@
 import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, isValidElement, cloneElement, Fragment, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$1, createElement, useDeferredValue, useSyncExternalStore } from "react";
 import { tinykeys } from "tinykeys";
+import { shallow } from "zustand/shallow";
 import fromExponential from "from-exponential";
 import { isValid, isDate, addMonths, isAfter, isBefore, startOfMonth, setMonth, getYear, setYear, startOfYear, format, isSameYear, getMonth, max, min, lastDayOfMonth, parseISO, parse, isWithinInterval, isEqual } from "date-fns";
 import { createStore, useStore, create } from "zustand";
 import { removeNumericFormat, numericFormatter, NumericFormat } from "react-number-format";
-import { shallow } from "zustand/shallow";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { faClose, faTriangleExclamation, faCircleExclamation, faCircleCheck, faCircleInfo, faChevronUp, faChevronDown, faRedo, faCircleQuestion, faSortDown, faSortUp, faAsterisk, faMinus, faCheck, faFilter, faArrowLeft, faArrowRight, faSearch, faChevronLeft, faChevronRight, faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
@@ -410,7 +410,7 @@ function useCreateDataTableContext({
   onSelectedRowsChange,
   disabledSelections
 }) {
-  const listeners = useLatestValues({
+  const listeners2 = useLatestValues({
     onOffsetChange,
     onLimitChange,
     onSort,
@@ -499,11 +499,11 @@ function useCreateDataTableContext({
           },
           setOffset: (offset2) => {
             set({ updateCounter: get().updateCounter + 1, _offset: offset2 });
-            listeners.onOffsetChange?.(offset2);
+            listeners2.onOffsetChange?.(offset2);
           },
           setLimit: (limit2) => {
             set({ updateCounter: get().updateCounter + 1, limit: limit2 });
-            listeners.onLimitChange?.(limit2);
+            listeners2.onLimitChange?.(limit2);
           },
           setFilter: (filter2) => {
             if (get().offset() > 0) {
@@ -511,7 +511,7 @@ function useCreateDataTableContext({
             }
             set({ filter: filter2 });
             get().actions.refresh(null);
-            listeners.onFilterChange?.(filter2);
+            listeners2.onFilterChange?.(filter2);
           },
           setSort: (sortBy2, sortDirection2) => {
             if (get().offset() > 0) {
@@ -519,7 +519,7 @@ function useCreateDataTableContext({
             }
             set({ sortBy: sortBy2, sortDirection: sortDirection2 });
             get().actions.refresh();
-            listeners.onSort?.(sortBy2, sortDirection2);
+            listeners2.onSort?.(sortBy2, sortDirection2);
           },
           selectRows: (keys) => {
             const {
@@ -535,7 +535,7 @@ function useCreateDataTableContext({
             }
             if (selected) {
               set({ selectedRows: [selectedRows2] });
-              listeners.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
+              listeners2.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
             }
           },
           unselectRows: (keys) => {
@@ -551,7 +551,7 @@ function useCreateDataTableContext({
             }
             if (unselected) {
               set({ selectedRows: [selectedRows2] });
-              listeners.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
+              listeners2.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
             }
           },
           updateWindow: (offset2, limit2) => {
@@ -4977,6 +4977,8 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
   rowsRange,
   previousPageButtonLabel,
   nextPageButtonLabel,
+  previousPageButtonProps,
+  nextPageButtonProps,
   className,
   ...otherProps
 }, forwardedRef) {
@@ -5026,19 +5028,29 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
           /* @__PURE__ */ jsx(
             IconButton,
             {
+              variant: "subtle",
               icon: faArrowLeft,
               label: previousPageButtonLabel ?? "",
-              disabled: currentPage === 0,
-              onClick: () => setOffsetWithTransition((currentPage - 1) * limit)
+              ...previousPageButtonProps,
+              disabled: currentPage === 0 || previousPageButtonProps?.disabled,
+              onClick: combineEventHandlers(
+                (() => setOffsetWithTransition((currentPage - 1) * limit)),
+                previousPageButtonProps?.onClick
+              )
             }
           ),
           /* @__PURE__ */ jsx(
             IconButton,
             {
+              variant: "subtle",
               icon: faArrowRight,
               label: nextPageButtonLabel ?? "",
-              disabled: currentPage === lastPage,
-              onClick: () => setOffsetWithTransition((currentPage + 1) * limit)
+              ...nextPageButtonProps,
+              disabled: currentPage === lastPage || nextPageButtonProps?.disabled,
+              onClick: combineEventHandlers(
+                (() => setOffsetWithTransition((currentPage + 1) * limit)),
+                nextPageButtonProps?.onClick
+              )
             }
           )
         ] })
@@ -5074,7 +5086,14 @@ const ScrolledDataTablePagination = forwardRef(function ScrolledDataTablePaginat
     }
   );
 });
-const DataTablePagination = forwardRef(function DataTablePagination2({ rowsRange, previousPageButtonLabel, nextPageButtonLabel, ...otherProps }, forwardedRef) {
+const DataTablePagination = forwardRef(function DataTablePagination2({
+  rowsRange,
+  previousPageButtonLabel,
+  nextPageButtonLabel,
+  previousPageButtonProps,
+  nextPageButtonProps,
+  ...otherProps
+}, forwardedRef) {
   const [locale] = useLocale();
   rowsRange ??= locale.DataTablePagination.rowsRange;
   previousPageButtonLabel ??= locale.DataTablePagination.previousPageButtonLabel;
@@ -5087,6 +5106,8 @@ const DataTablePagination = forwardRef(function DataTablePagination2({ rowsRange
       rowsRange,
       previousPageButtonLabel,
       nextPageButtonLabel,
+      previousPageButtonProps,
+      nextPageButtonProps,
       ref: forwardedRef
     }
   ) : /* @__PURE__ */ jsx(
@@ -10601,6 +10622,117 @@ function useKeyboardShortcut(keybinds, action, {
 function ignoreFormControlsKeyboardShortcut(event) {
   return event.target !== null && event.target instanceof HTMLElement && FORM_CONTROLS.includes(event.target.tagName);
 }
+function useLocation() {
+  const prevLocation = useRef(currentLocation());
+  const location2 = useSyncExternalStore(subscribeToHistoryEvents, () => {
+    const newLocation = currentLocation();
+    return shallow(prevLocation.current, newLocation) ? prevLocation.current : prevLocation.current = newLocation;
+  });
+  return useMemo(() => [location2, navigate], [location2]);
+}
+function useSearchParams() {
+  const [location2, navigate2] = useLocation();
+  const latestValues = useLatestValues({ location: location2 });
+  const setSearchParams = useCallback(
+    (nextSearchParams, { clearHash, ...options } = {}) => {
+      const { pathname, search, hash } = latestValues.location;
+      let newSearchParams = typeof nextSearchParams === "function" ? nextSearchParams(new URLSearchParams(search)) : nextSearchParams;
+      if (!(newSearchParams instanceof URLSearchParams)) {
+        newSearchParams = new URLSearchParams(newSearchParams);
+      }
+      navigate2(
+        `${pathname}?${newSearchParams}${clearHash ? "" : hash}`,
+        options
+      );
+    },
+    [latestValues, navigate2]
+  );
+  return useMemo(
+    () => [new URLSearchParams(location2.search), setSearchParams],
+    [location2.search, setSearchParams]
+  );
+}
+function useSearchParam(searchParam, defaultValue) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchParamValue = useMemo(
+    () => searchParams.get(searchParam) ?? defaultValue,
+    [defaultValue, searchParam, searchParams]
+  );
+  const setSearchParamValue = useCallback(
+    (nextSearchParamValue, { clearDefaultValue, ...options } = {}) => {
+      setSearchParams((prevSearchParams) => {
+        const prevValue = prevSearchParams.get(searchParam) ?? defaultValue;
+        const newValue = (typeof nextSearchParamValue === "function" ? nextSearchParamValue(prevValue) : nextSearchParamValue)?.toString();
+        if (newValue == null || clearDefaultValue && newValue === defaultValue) {
+          prevSearchParams.delete(searchParam);
+        } else {
+          prevSearchParams.set(searchParam, newValue);
+        }
+        return prevSearchParams;
+      }, options);
+    },
+    [defaultValue, searchParam, setSearchParams]
+  );
+  return useMemo(
+    () => [searchParamValue, setSearchParamValue],
+    [searchParamValue, setSearchParamValue]
+  );
+}
+const MONKEY_PATCHED_HISTORY = Symbol.for("ostack-ui.monkeyPatchedHistory");
+const HISTORY_EVENT_TYPES = [
+  "popstate",
+  "hashchange",
+  // Events emitted by monkey-patched `pushState`/`replaceState` respectively
+  "ostack-ui.pushstate",
+  "ostack-ui.replacestate"
+];
+const listeners = /* @__PURE__ */ new Set();
+function handleHistoryEvent(evt) {
+  for (const listener of listeners) {
+    listener(evt);
+  }
+}
+function subscribeToHistoryEvents(listener) {
+  if (!globalThis[MONKEY_PATCHED_HISTORY]) {
+    if (typeof history !== "undefined") {
+      for (const fnName of ["pushState", "replaceState"]) {
+        const evtName = `ostack-ui.${fnName.toLowerCase()}`;
+        const originalFn = history[fnName];
+        history[fnName] = function() {
+          const result = originalFn.apply(this, arguments);
+          dispatchEvent(new Event(evtName));
+          return result;
+        };
+      }
+    }
+    globalThis[MONKEY_PATCHED_HISTORY] = true;
+  }
+  if (listeners.size === 0) {
+    for (const evtType of HISTORY_EVENT_TYPES) {
+      addEventListener(evtType, handleHistoryEvent);
+    }
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      for (const evtType of HISTORY_EVENT_TYPES) {
+        removeEventListener(evtType, handleHistoryEvent);
+      }
+    }
+  };
+}
+function currentLocation() {
+  const loc = window.location;
+  return { pathname: loc.pathname, search: loc.search, hash: loc.hash };
+}
+function navigate(url, options) {
+  history[options?.replace ? "replaceState" : "pushState"](
+    options?.state,
+    "",
+    url
+  );
+}
 function useIntersectionObserver(element, onIntersectionEntryChange, options) {
   useEffect(() => {
     if (element !== null) {
@@ -10832,6 +10964,7 @@ export {
   useLatestValues,
   useLayoutEffect,
   useLocale,
+  useLocation,
   useMeasure,
   useMediaBreakpointDown,
   useMediaBreakpointUp,
@@ -10843,6 +10976,8 @@ export {
   useResponsiveValues,
   useScrollPosition,
   useScrollbarSize,
+  useSearchParam,
+  useSearchParams,
   useSetFieldControl,
   useSetFieldControlFocused,
   useSetFieldFeedback,