@ostack.tech/ui 0.3.3 → 0.4.0

package/dist/ostack-ui.js

@@ -1,9 +1,9 @@
 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 { shallow } from "zustand/shallow";
 import { removeNumericFormat, numericFormatter, NumericFormat } from "react-number-format";
 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";
@@ -410,7 +410,7 @@ function useCreateDataTableContext({
   onSelectedRowsChange,
   disabledSelections
 }) {
-  const listeners2 = useLatestValues({
+  const listeners = useLatestValues({
     onOffsetChange,
     onLimitChange,
     onSort,
@@ -499,11 +499,11 @@ function useCreateDataTableContext({
           },
           setOffset: (offset2) => {
             set({ updateCounter: get().updateCounter + 1, _offset: offset2 });
-            listeners2.onOffsetChange?.(offset2);
+            listeners.onOffsetChange?.(offset2);
           },
           setLimit: (limit2) => {
             set({ updateCounter: get().updateCounter + 1, limit: limit2 });
-            listeners2.onLimitChange?.(limit2);
+            listeners.onLimitChange?.(limit2);
           },
           setFilter: (filter2) => {
             if (get().offset() > 0) {
@@ -511,7 +511,7 @@ function useCreateDataTableContext({
             }
             set({ filter: filter2 });
             get().actions.refresh(null);
-            listeners2.onFilterChange?.(filter2);
+            listeners.onFilterChange?.(filter2);
           },
           setSort: (sortBy2, sortDirection2) => {
             if (get().offset() > 0) {
@@ -519,7 +519,7 @@ function useCreateDataTableContext({
             }
             set({ sortBy: sortBy2, sortDirection: sortDirection2 });
             get().actions.refresh();
-            listeners2.onSort?.(sortBy2, sortDirection2);
+            listeners.onSort?.(sortBy2, sortDirection2);
           },
           selectRows: (keys) => {
             const {
@@ -535,7 +535,7 @@ function useCreateDataTableContext({
             }
             if (selected) {
               set({ selectedRows: [selectedRows2] });
-              listeners2.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
+              listeners.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
             }
           },
           unselectRows: (keys) => {
@@ -551,7 +551,7 @@ function useCreateDataTableContext({
             }
             if (unselected) {
               set({ selectedRows: [selectedRows2] });
-              listeners2.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
+              listeners.onSelectedRowsChange?.(Array.from(selectedRows2).sort());
             }
           },
           updateWindow: (offset2, limit2) => {
@@ -1180,14 +1180,31 @@ function unsetRef(ref, cleanupsRef) {
 const LocalizationContext = createContext(null);
 function useControllableState(initialValue, controlledValue) {
   const [uncontrolledValue, setUncontrolledValue] = useState(initialValue);
-  const isControlled = controlledValue !== void 0;
+  const latest = useLatestValues({ controlledValue });
   const setValue = useCallback(
-    (nextValue) => isControlled ? typeof nextValue === "function" ? setUncontrolledValue(
-      nextValue(controlledValue)
-    ) : setUncontrolledValue(controlledValue) : setUncontrolledValue(nextValue),
-    [controlledValue, isControlled]
+    (nextValue) => {
+      const { controlledValue: controlledValue2 } = latest;
+      if (controlledValue2 === void 0) {
+        setUncontrolledValue(nextValue);
+      } else if (typeof nextValue === "function") {
+        setUncontrolledValue(
+          nextValue(controlledValue2)
+        );
+      } else {
+        setUncontrolledValue(controlledValue2);
+      }
+    },
+    [latest]
+  );
+  return useMemo(
+    () => [
+      // See: https://github.com/typescript-eslint/typescript-eslint/issues/7842
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      controlledValue === void 0 ? uncontrolledValue : controlledValue,
+      setValue
+    ],
+    [controlledValue, setValue, uncontrolledValue]
   );
-  return [isControlled ? controlledValue : uncontrolledValue, setValue];
 }
 function LocalizationProvider({
   defaultLocale,
@@ -10622,128 +10639,144 @@ 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 navigate(url, options) {
+  history[options?.replace ? "replaceState" : "pushState"](
+    options?.state,
+    "",
+    url
+  );
 }
-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}`,
+function useIntersectionObserver(element, onIntersectionEntryChange, options) {
+  useEffect(() => {
+    if (element !== null) {
+      const observer = new IntersectionObserver(
+        ([e]) => onIntersectionEntryChange(e),
         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]
-  );
+      observer.observe(element);
+      return () => observer.unobserve(element);
+    }
+  }, [element, onIntersectionEntryChange, options]);
 }
 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"
+  "ostack-ui.pushState",
+  "ostack-ui.replaceState"
 ];
-const listeners = /* @__PURE__ */ new Set();
-function handleHistoryEvent(evt) {
-  for (const listener of listeners) {
-    listener(evt);
-  }
+let locationStore;
+function currentLocation() {
+  const loc = window.location;
+  return { pathname: loc.pathname, search: loc.search, hash: loc.hash };
 }
-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;
+function createLocationStore() {
+  return createStore((set, get) => ({
+    location: currentLocation(),
+    subscribers: 0,
+    actions: {
+      setCurrentLocation: () => {
+        const newLocation = currentLocation();
+        if (!shallow(get().location, newLocation)) {
+          set({ location: newLocation });
+        }
+      },
+      subscribe: () => {
+        if (!globalThis[MONKEY_PATCHED_HISTORY]) {
+          if (typeof history !== "undefined") {
+            for (const fnName of ["pushState", "replaceState"]) {
+              const evtName = `ostack-ui.${fnName}`;
+              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 (get().subscribers === 0) {
+          get().actions.setCurrentLocation();
+          for (const evtType of HISTORY_EVENT_TYPES) {
+            addEventListener(evtType, get().actions.setCurrentLocation);
+          }
+        }
+        set(({ subscribers }) => ({ subscribers: subscribers + 1 }));
+        return () => {
+          set(({ subscribers }) => ({ subscribers: subscribers - 1 }));
+          if (get().subscribers === 0) {
+            for (const evtType of HISTORY_EVENT_TYPES) {
+              removeEventListener(evtType, get().actions.setCurrentLocation);
+            }
+          }
         };
       }
     }
-    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 useLocation(selector) {
+  locationStore ??= createLocationStore();
+  useEffect(() => locationStore.getState().actions.subscribe(), []);
+  return useStore(
+    locationStore,
+    ({ location: location2 }) => selector ? selector(location2) : location2
+  );
 }
-function navigate(url, options) {
-  history[options?.replace ? "replaceState" : "pushState"](
-    options?.state,
-    "",
-    url
+function useSearchParam(searchParam, defaultValue) {
+  const searchParamValue = useLocation(
+    (location2) => new URLSearchParams(location2.search).get(searchParam) ?? defaultValue
+  );
+  const latest = useLatestValues({ searchParam, defaultValue });
+  const setSearchParamValue = useCallback(
+    (nextSearchParamValue, { clearHash, clearDefaultValue, ...options } = {}) => {
+      const { pathname, search, hash } = window.location;
+      const { searchParam: searchParam2, defaultValue: defaultValue2 } = latest;
+      const searchParams = new URLSearchParams(search);
+      const prevValue = searchParams.get(searchParam2) ?? defaultValue2;
+      const value = (typeof nextSearchParamValue === "function" ? nextSearchParamValue(prevValue) : nextSearchParamValue)?.toString();
+      if (value == null || clearDefaultValue && value === defaultValue2) {
+        searchParams.delete(searchParam2);
+      } else {
+        searchParams.set(searchParam2, value);
+      }
+      let searchParamsStr = searchParams.toString();
+      searchParamsStr &&= `?${searchParamsStr}`;
+      navigate(
+        `${pathname}${searchParamsStr}${clearHash ? "" : hash}`,
+        options
+      );
+    },
+    [latest]
+  );
+  return useMemo(
+    () => [searchParamValue, setSearchParamValue],
+    [searchParamValue, setSearchParamValue]
   );
 }
-function useIntersectionObserver(element, onIntersectionEntryChange, options) {
-  useEffect(() => {
-    if (element !== null) {
-      const observer = new IntersectionObserver(
-        ([e]) => onIntersectionEntryChange(e),
+function useSearchParams() {
+  const locationSearch = useLocation((location2) => location2.search);
+  const setSearchParams = useCallback(
+    (nextSearchParams, { clearHash, ...options } = {}) => {
+      const { pathname, search, hash } = window.location;
+      let searchParams = typeof nextSearchParams === "function" ? nextSearchParams(new URLSearchParams(search)) : nextSearchParams;
+      if (!(searchParams instanceof URLSearchParams)) {
+        searchParams = new URLSearchParams(searchParams);
+      }
+      let searchParamsStr = searchParams.toString();
+      searchParamsStr &&= `?${searchParamsStr}`;
+      navigate(
+        `${pathname}${searchParamsStr}${clearHash ? "" : hash}`,
         options
       );
-      observer.observe(element);
-      return () => observer.unobserve(element);
-    }
-  }, [element, onIntersectionEntryChange, options]);
+    },
+    []
+  );
+  return useMemo(
+    () => [new URLSearchParams(locationSearch), setSearchParams],
+    [locationSearch, setSearchParams]
+  );
 }
 export {
   Alert,
@@ -10923,6 +10956,7 @@ export {
   isNumericStringNegative,
   matchAgainstFilter,
   mergeAriaIds,
+  navigate,
   normalizeNumericString,
   numericStringFloatToInt,
   numericStringIntToFloat,