@povio/ui 2.1.0 → 2.1.1

package/dist/components/inputs/Selection/shared/SelectListBoxItem.js

@@ -33,7 +33,7 @@ const SelectListBoxItem = ({
       isDisabled,
       className: clsx(
         selectListBoxItemClass,
-        !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
+        !isMultiple && "selected:bg-interactive-contained-primary-idle selected:text-interactive-contained-primary-on-idle",
         isNewItem ? "text-interactive-text-primary-idle" : "text-interactive-text-secondary-idle"
       ),
       children: [
@@ -41,7 +41,7 @@ const SelectListBoxItem = ({
           CheckboxCheckmark,
           {
             variant: "default",
-            className: "group-focus-visible:!outline-none"
+            className: "group-focus-visible:outline-none!"
           }
         ),
         isMultiple && isSearchable && /* @__PURE__ */ jsx(
@@ -54,7 +54,7 @@ const SelectListBoxItem = ({
               CheckboxCheckmark,
               {
                 variant: "default",
-                className: "group-focus-visible:!outline-none"
+                className: "group-focus-visible:outline-none!"
               }
             )
           }

package/dist/config/theme.context.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { z } from 'zod';
+export declare namespace ThemeContext {
+    const ThemeSchema: z.ZodLiteral<"dark" | "light" | "system">;
+    export type Theme = z.infer<typeof ThemeSchema>;
+    interface ThemeContextValue {
+        theme: Theme;
+        systemTheme?: Exclude<Theme, "system">;
+        updateTheme: (theme: Theme) => void;
+    }
+    interface ThemeContextProviderProps {
+        storageKey?: string;
+    }
+    export const ThemeContextProvider: ({ children, storageKey, }: PropsWithChildren<ThemeContextProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export const useTheme: () => ThemeContextValue;
+    export {};
+}

package/dist/config/theme.context.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useEffect, useMemo, use } from "react";
+import { z } from "zod";
+import { useLocalStorage } from "../hooks/useLocalStorage.js";
+var ThemeContext;
+((_ThemeContext) => {
+  const DEFAULT_STORAGE_KEY = "theme";
+  const ThemeSchema = z.literal(["light", "dark", "system"]);
+  const ThemeContext2 = createContext(null);
+  _ThemeContext.ThemeContextProvider = ({
+    children,
+    storageKey = DEFAULT_STORAGE_KEY
+  }) => {
+    const [systemTheme, setSystemTheme] = useState(() => {
+      if (typeof window === "undefined") {
+        return void 0;
+      }
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      return media.matches ? "dark" : "light";
+    });
+    const { value: theme, set } = useLocalStorage({
+      key: storageKey,
+      schema: ThemeSchema
+    });
+    const updateTheme = useCallback(
+      (theme2) => {
+        set(theme2);
+      },
+      [set]
+    );
+    useEffect(() => {
+      if (typeof window === "undefined") {
+        return;
+      }
+      const onChange = (event) => {
+        setSystemTheme(event.matches ? "dark" : "light");
+      };
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      media.addEventListener("change", onChange);
+      return () => {
+        media.removeEventListener("change", onChange);
+      };
+    }, []);
+    useEffect(() => {
+      document.documentElement.classList.remove("dark");
+      if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
+        document.documentElement.classList.add("dark");
+      } else if (theme === "light") {
+        document.documentElement.classList.add("light");
+      }
+    }, [theme, systemTheme]);
+    const contextValue = useMemo(
+      () => ({
+        theme: theme ?? "system",
+        systemTheme,
+        updateTheme
+      }),
+      [theme, systemTheme, updateTheme]
+    );
+    return /* @__PURE__ */ jsx(ThemeContext2.Provider, { value: contextValue, children });
+  };
+  _ThemeContext.useTheme = () => {
+    const context = use(ThemeContext2);
+    return context;
+  };
+})(ThemeContext || (ThemeContext = {}));
+export {
+  ThemeContext
+};

package/dist/hooks/useBreakpoint.js

@@ -1,17 +1,22 @@
 import { useMemo } from "react";
 import { useMediaQuery } from "react-responsive";
+let breakpoints = null;
 function getBreakpoints() {
+  if (breakpoints) {
+    return breakpoints;
+  }
   const cs = getComputedStyle(document.documentElement);
   const entries = ["sm", "md", "lg", "xl", "2xl"].map((k) => [k, cs.getPropertyValue(`--breakpoint-${k}`).trim()]).filter(([, v]) => !!v);
-  return Object.fromEntries(entries);
+  breakpoints = Object.fromEntries(entries);
+  return breakpoints;
 }
 function useBreakpoint(breakpointKey) {
-  const breakpoints = useMemo(() => getBreakpoints(), []);
-  if (!breakpoints) {
+  const breakpoints2 = useMemo(() => getBreakpoints(), []);
+  if (!breakpoints2) {
     throw new Error("Tailwind config is missing theme.screens");
   }
   const bool = useMediaQuery({
-    query: `(min-width: ${breakpoints[breakpointKey]})`
+    query: `(min-width: ${breakpoints2[breakpointKey]})`
   });
   return bool;
 }

package/dist/hooks/useFilters.d.ts

@@ -1,11 +1,7 @@
-import { z } from 'zod';
-type FilterValue = string | string[] | boolean | number;
 export interface FilterStore<TFilterData> {
     filterData: TFilterData;
     setFilterValue: (data: Partial<TFilterData>) => void;
     getFilterValue: (keys: (keyof TFilterData)[]) => Partial<TFilterData>;
     clearAllFilters: () => void;
 }
-export declare function parseFilterFromQuery(query: Record<string, any>, schema?: z.ZodObject<any>): Record<string, FilterValue>;
-export declare function useFilters<TFilterData>(defaultFilterValues?: TFilterData, prefix?: string, schema?: z.ZodObject<any>): FilterStore<TFilterData>;
-export {};
+export declare const useFilters: <TFilterData>(defaultFilterValues?: TFilterData, prefix?: string) => FilterStore<TFilterData>;

package/dist/hooks/useFilters.js

@@ -1,160 +1,107 @@
-import { useNavigate, useLocation } from "@tanstack/react-router";
-import { useMemo, useRef, useState, useEffect } from "react";
-import { z } from "zod";
-function getFieldType(schema, fieldKey) {
-  if (!schema || !schema.shape) return "unknown";
-  let fieldSchema = schema.shape[fieldKey];
-  while (fieldSchema) {
-    if (fieldSchema instanceof z.ZodOptional || fieldSchema instanceof z.ZodNullable) {
-      fieldSchema = fieldSchema.unwrap();
-    } else {
-      break;
-    }
-  }
-  if (!fieldSchema) return "unknown";
-  if (fieldSchema instanceof z.ZodNumber) return "number";
-  if (fieldSchema instanceof z.ZodBoolean) return "boolean";
-  if (fieldSchema instanceof z.ZodString) return "string";
-  return "unknown";
-}
-function serializeFiltersToQuery(filterData, prefix) {
+import { useState, useEffect } from "react";
+import { UIRouter } from "../config/router.context.js";
+const serializeFiltersToQuery = (filterData, prefix) => {
   const query = {};
   for (const [key, value] of Object.entries(filterData)) {
     if (value === null || value === void 0) {
       continue;
     }
+    const filterKey = `filter[${prefix && `${prefix}-`}${key}]`;
     if (Array.isArray(value) || typeof value === "object") {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = JSON.stringify(value);
+      query[filterKey] = JSON.stringify(value);
     } else if (typeof value === "boolean") {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = value ? "true" : "false";
-    } else if (typeof value === "number") {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = value.toString();
+      query[filterKey] = value ? "true" : "false";
     } else {
-      query[`filter[${prefix && `${prefix}-`}${key}]`] = value;
+      query[filterKey] = value;
     }
   }
   return query;
-}
-function parseFilterFromQuery(query, schema) {
+};
+const parseFilterFromQuery = (query) => {
   const filter = {};
   for (const [key, value] of Object.entries(query)) {
-    const match = key.match(/^filter\[(.+?)\]$/);
-    if (match) {
-      const filterKey = match[1];
-      const baseKey = filterKey.includes("-") ? filterKey.split("-").pop() || filterKey : filterKey;
-      if (value.startsWith("[") && value.endsWith("]") || value.startsWith("{") && value.endsWith("}")) {
-        filter[filterKey] = JSON.parse(value);
-      } else if (["true", "false"].includes(value)) {
-        filter[filterKey] = value === "true";
-      } else {
-        const expectedType = getFieldType(schema, baseKey);
-        if (expectedType === "number" && !Number.isNaN(Number(value)) && value !== "" && value !== null) {
-          filter[filterKey] = Number(value);
-        } else if (expectedType === "boolean" && ["true", "false"].includes(value)) {
-          filter[filterKey] = value === "true";
-        } else {
-          filter[filterKey] = value;
-        }
-      }
+    const match = /^filter\[(.+?)\]$/.exec(key);
+    if (!match) {
+      continue;
+    }
+    const filterKey = match[1];
+    const isArray = value.startsWith("[") && value.endsWith("]");
+    const isObject = value.startsWith("{") && value.endsWith("}");
+    const isNumber = !Number.isNaN(Number(value)) && value !== "";
+    const isBoolean = ["true", "false"].includes(value);
+    if (isArray || isObject || isNumber) {
+      filter[filterKey] = JSON.parse(value);
+    } else if (isBoolean) {
+      filter[filterKey] = value === "true";
+    } else {
+      filter[filterKey] = value;
     }
   }
   return filter;
-}
-function useFilters(defaultFilterValues, prefix = "", schema) {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const queryObject = useMemo(
-    () => Object.fromEntries(new URLSearchParams(location.searchStr || "").entries()),
-    [location.searchStr]
-  );
-  const hasAppliedDefaultsRef = useRef(false);
-  const lastPathnameRef = useRef(location.pathname);
-  const queryFilters = parseFilterFromQuery(queryObject, schema);
+};
+const useFilters = (defaultFilterValues, prefix = "") => {
+  const { query, pathname, replace } = UIRouter.useUIRouter();
+  const queryFilters = parseFilterFromQuery(query);
   const [filterData, setFilterData] = useState(queryFilters);
   useEffect(() => {
-    if (lastPathnameRef.current !== location.pathname) {
-      hasAppliedDefaultsRef.current = false;
-      lastPathnameRef.current = location.pathname;
-    }
-  }, [location.pathname]);
-  useEffect(() => {
-    const currentQueryObject = Object.fromEntries(new URLSearchParams(location.searchStr || "").entries());
-    const currentFilters = parseFilterFromQuery(currentQueryObject, schema);
-    const shouldApplyDefaults = defaultFilterValues && Object.keys(currentFilters).length === 0 && !hasAppliedDefaultsRef.current;
-    if (shouldApplyDefaults) {
+    const setUrlToDefaultFilters = () => {
       const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
-      const sp = new URLSearchParams(location.searchStr || "");
-      let needsNavigation = false;
-      Object.entries(flatFilterQuery).forEach(([k, v]) => {
-        const currentValue = sp.get(k);
-        if (Array.isArray(v)) {
-          const currentValues = sp.getAll(k);
-          if (JSON.stringify(currentValues.sort()) !== JSON.stringify(v.sort())) {
-            needsNavigation = true;
-          }
-        } else {
-          if (currentValue !== v) {
-            needsNavigation = true;
-          }
+      replace({
+        pathname,
+        query: {
+          ...query,
+          ...flatFilterQuery
         }
       });
-      if (needsNavigation) {
-        Object.entries(flatFilterQuery).forEach(([k, v]) => {
-          sp.delete(k);
-          if (Array.isArray(v)) {
-            v.forEach((val) => sp.append(k, val));
-          } else {
-            sp.set(k, v);
-          }
-        });
-        const to = `${location.pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
-        navigate({ to, replace: true });
-      }
-      hasAppliedDefaultsRef.current = true;
+    };
+    const currentFilters = parseFilterFromQuery(query);
+    const hasFiltersSet = Object.keys(currentFilters).length > 0;
+    if (defaultFilterValues && !hasFiltersSet) {
+      setUrlToDefaultFilters();
     }
-  }, [defaultFilterValues, prefix, location.pathname, location.searchStr]);
+  }, [defaultFilterValues, prefix]);
   useEffect(() => {
-    const newQueryFilters = parseFilterFromQuery(queryObject, schema);
+    const newQueryFilters = parseFilterFromQuery(query);
     setFilterData(newQueryFilters);
-  }, [queryObject, schema]);
+  }, [query]);
   const setFilterValue = (data) => {
-    const next = { ...filterData };
+    let newFilters = { ...filterData };
     const isReset = Object.keys(data).length === 0;
     const isResetToDefault = data === defaultFilterValues;
     if (isResetToDefault) {
-      Object.keys(next).forEach((key) => delete next[key]);
-      Object.entries(defaultFilterValues ?? {}).forEach(([key, value]) => {
-        next[key] = value;
-      });
-    } else if (!isReset) {
+      newFilters = {
+        ...defaultFilterValues
+      };
+    } else if (isReset) {
+      newFilters = {};
+    } else {
       Object.entries(data).forEach(([key, value]) => {
         if (value === void 0) {
-          delete next[key];
+          delete newFilters[key];
         } else {
-          next[key] = value;
+          newFilters[key] = value;
         }
       });
-    } else {
-      Object.keys(next).forEach((key) => delete next[key]);
     }
-    const sp = new URLSearchParams(location.searchStr || "");
-    Array.from(sp.keys()).forEach((key) => {
-      if (key.startsWith(`filter[${prefix && `${prefix}-`}`)) {
-        sp.delete(key);
-      }
-    });
-    const flatFilterQuery = serializeFiltersToQuery(next, prefix);
-    Object.entries(flatFilterQuery).forEach(([k, v]) => {
-      sp.delete(k);
-      if (Array.isArray(v)) {
-        v.forEach((val) => sp.append(k, val));
-      } else {
-        sp.set(k, v);
+    const prefixPart = prefix ? `${prefix}-` : "";
+    const cleanedQuery = Object.keys(query).reduce(
+      (acc, k) => {
+        if (!k.startsWith(`filter[${prefixPart}`)) {
+          acc[k] = query[k];
+        }
+        return acc;
+      },
+      {}
+    );
+    const flatFilterQuery = serializeFiltersToQuery(newFilters, prefix);
+    replace({
+      pathname,
+      query: {
+        ...cleanedQuery,
+        ...flatFilterQuery
       }
     });
-    const to = `${location.pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
-    navigate({ to, replace: true });
-    setFilterData(next);
+    setFilterData(newFilters);
   };
   const getFilterValue = (keys) => {
     const result = {};
@@ -167,8 +114,7 @@ function useFilters(defaultFilterValues, prefix = "", schema) {
     setFilterValue(defaultFilterValues ?? {});
   };
   return { filterData, setFilterValue, getFilterValue, clearAllFilters };
-}
+};
 export {
-  parseFilterFromQuery,
   useFilters
 };

package/dist/hooks/useLocalStorage.d.ts

@@ -7,7 +7,5 @@ export declare const useLocalStorage: <ZOutput, ZInput>({ key, schema }: IProps<
     value: ZOutput | null;
     set: (newValue: ZInput) => void;
     remove: () => void;
-    error: Error | null;
-    isInitialLoading: boolean;
 };
 export {};

package/dist/hooks/useLocalStorage.js

@@ -1,36 +1,27 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useCallback } from "react";
+const getValue = (key, schema) => {
+  if (!localStorage) {
+    return null;
+  }
+  const lsValue = localStorage.getItem(key);
+  if (!lsValue) {
+    return null;
+  }
+  let jsonOrString;
+  try {
+    jsonOrString = JSON.parse(lsValue);
+  } catch {
+    jsonOrString = lsValue;
+  }
+  const parsedValue = schema.safeParse(jsonOrString);
+  if (parsedValue.success) {
+    return parsedValue.data;
+  } else {
+    return null;
+  }
+};
 const useLocalStorage = ({ key, schema }) => {
-  const [value, setValue] = useState(null);
-  const [isInitialLoading, setIsInitialLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!localStorage) {
-      setValue(null);
-      return;
-    }
-    try {
-      const lsValue = localStorage.getItem(key);
-      if (!lsValue) {
-        setValue(null);
-        return;
-      }
-      let jsonOrString;
-      try {
-        jsonOrString = JSON.parse(lsValue);
-      } catch {
-        jsonOrString = lsValue;
-      }
-      const parsedValue = schema.safeParse(jsonOrString);
-      if (parsedValue.success) {
-        setValue(parsedValue.data);
-      } else {
-        setError(parsedValue.error);
-        setValue(null);
-      }
-    } finally {
-      setIsInitialLoading(false);
-    }
-  }, [key, schema]);
+  const [value, setValue] = useState(() => getValue(key, schema));
   const set = useCallback(
     (newValue) => {
       if (!localStorage) {
@@ -56,7 +47,7 @@ const useLocalStorage = ({ key, schema }) => {
     localStorage.removeItem(key);
     setValue(null);
   }, [key]);
-  return { value, set, remove, error, isInitialLoading };
+  return { value, set, remove };
 };
 export {
   useLocalStorage

package/dist/index.d.ts

@@ -157,6 +157,7 @@ export { Confirmation } from './config/confirmation.context';
 export { ns, resources } from './config/i18n';
 export { LinkContext } from './config/link.context';
 export { UIRouter } from './config/router.context';
+export { ThemeContext } from './config/theme.context';
 export { UIConfig } from './config/uiConfig.context';
 export { UIStyle } from './config/uiStyle.context';
 export type { DynamicColumnsOptions } from './helpers/dynamicColumns';

package/dist/index.js

@@ -96,6 +96,7 @@ import { Confirmation } from "./config/confirmation.context.js";
 import { ns, resources } from "./config/i18n.js";
 import { LinkContext } from "./config/link.context.js";
 import { UIRouter } from "./config/router.context.js";
+import { ThemeContext } from "./config/theme.context.js";
 import { UIConfig } from "./config/uiConfig.context.js";
 import { UIStyle } from "./config/uiStyle.context.js";
 import { dynamicColumns } from "./helpers/dynamicColumns.js";
@@ -240,6 +241,7 @@ export {
   TextColorIcon,
   TextEditor,
   TextInput,
+  ThemeContext,
   TimePicker,
   Toast,
   ToastContainer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",