@povio/ui 0.1.0 → 2.1.0

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
 import { RadioGroup as RadioGroup$1, Radio } from "react-aria-components";
 import { Controller } from "react-hook-form";
 import { FormField } from "../FormField/FormField.js";
@@ -62,16 +61,7 @@ const RadioGroupBase = (props) => {
                 className: radioCva({
                   variant,
                   ...rest
-                }),
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "absolute hidden size-1 rounded-full group-selected:block",
-                      "bg-interactive-contained-primary-on-idle group-hover:bg-interactive-contained-primary-on-hover"
-                    )
-                  }
-                )
+                })
               }
             ),
             /* @__PURE__ */ jsx(CheckContent, { typography: radioTypographyMap({ variant, ...rest }), children: option.label })

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -2,7 +2,12 @@ import { cva } from "class-variance-authority";
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 const radio = cva(
-  ["flex items-center justify-center border-2", "relative size-3-5 rounded-full p-1-5", uiGroupOutlineClass],
+  [
+    "flex items-center justify-center border-2",
+    "relative size-3-5 rounded-full p-1-5",
+    "before:absolute before:hidden before:size-1 before:rounded-full",
+    uiGroupOutlineClass
+  ],
   {
     variants: {
       variant: {
@@ -17,6 +22,8 @@ const radio = cva(
           "group-selected:group-hover:border-interactive-contained-primary-hover",
           "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
           "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-selected:group-disabled:bg-interactive-contained-primary-disabled",
+          "group-selected:group-disabled:border-interactive-contained-primary-disabled",
           "group-indeterminate:border-interactive-contained-primary-idle",
           "group-indeterminate:bg-interactive-contained-primary-idle",
           "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
@@ -24,7 +31,10 @@ const radio = cva(
           "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
           "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
           "group-invalid:border-interactive-contained-error-idle",
-          "group-focus-visible:outline-interactive-contained-primary-focus"
+          "group-focus-visible:outline-interactive-contained-primary-focus",
+          "before:bg-interactive-contained-primary-on-idle",
+          "group-hover:before:bg-interactive-contained-primary-on-hover",
+          "group-selected:before:block"
         ]
       }
     },

package/dist/components/inputs/shared/input.cva.js

@@ -10,7 +10,13 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
     },
     as: {
       default: "rounded-input-rounding-default",
-      floating: "rounded-input-rounding-default",
+      floating: [
+        "rounded-input-rounding-default",
+        "py-floating-label-input-height-empty!",
+        "group-has-[input:not(:placeholder-shown)]/input-content:pb-floating-label-input-height-filled!",
+        "group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-input-height-default)+14px)]!"
+        // TODO: remove this hardcoded value
+      ],
       filter: "rounded-input-rounding-default",
       inline: [
         "h-full",
@@ -110,10 +116,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
 const inputSize = cva("", {
   variants: {
     size: {
-      "extra-small": "px-input-side-xs py-input-height-extra-small text-label-1",
-      small: "px-input-side-s py-input-height-small text-label-1",
-      default: "px-input-side-m py-input-height-default text-label-1",
-      large: "px-input-side-l py-input-height-large text-label-1"
+      "extra-small": "px-input-side-default py-input-height-default text-label-1",
+      small: "px-input-side-default py-input-height-default text-label-1",
+      default: "px-input-side-default py-input-height-default text-label-1",
+      large: "px-input-side-default py-input-height-default text-label-1"
     }
   },
   defaultVariants: {
@@ -135,18 +141,18 @@ const inputSide = cva("", {
     }
   },
   compoundVariants: [
-    { type: "left", size: "extra-small", className: "left-input-side-xs" },
-    { type: "right", size: "extra-small", className: "right-input-side-xs" },
-    { type: "var", size: "extra-small", className: "--spacing-input-side-xs" },
-    { type: "left", size: "small", className: "left-input-side-s" },
-    { type: "right", size: "small", className: "right-input-side-s" },
-    { type: "var", size: "small", className: "--spacing-input-side-s" },
-    { type: "left", size: "default", className: "left-input-side-m" },
-    { type: "right", size: "default", className: "right-input-side-m" },
-    { type: "var", size: "default", className: "--spacing-input-side-m" },
-    { type: "left", size: "large", className: "left-input-side-l" },
-    { type: "right", size: "large", className: "right-input-side-l" },
-    { type: "var", size: "large", className: "--spacing-input-side-l" }
+    { type: "left", size: "extra-small", className: "left-input-side-default" },
+    { type: "right", size: "extra-small", className: "right-input-side-default" },
+    { type: "var", size: "extra-small", className: "--spacing-input-side-default" },
+    { type: "left", size: "small", className: "left-input-side-default" },
+    { type: "right", size: "small", className: "right-input-side-default" },
+    { type: "var", size: "small", className: "--spacing-input-side-default" },
+    { type: "left", size: "default", className: "left-input-side-default" },
+    { type: "right", size: "default", className: "right-input-side-default" },
+    { type: "var", size: "default", className: "--spacing-input-side-default" },
+    { type: "left", size: "large", className: "left-input-side-default" },
+    { type: "right", size: "large", className: "right-input-side-default" },
+    { type: "var", size: "large", className: "--spacing-input-side-default" }
   ],
   defaultVariants: {
     size: "default"

package/dist/components/inputs/shared/label.cva.js

@@ -7,6 +7,7 @@ const labelBase = cva("text-text-default-1", {
       filter: ["-translate-y-1/2 absolute top-1/2"],
       inline: ["flex items-start gap-1"],
       floating: [
+        "pointer-events-none",
         "absolute transition-all duration-75",
         "-translate-y-1/2 top-1/2",
         "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
@@ -19,17 +20,11 @@ const labelBase = cva("text-text-default-1", {
         // TextEditor default positioning
         "group-data-[text-editor]/text-editor:top-5 group-data-[text-editor]/text-editor:left-2 group-data-[text-editor]/text-editor:translate-y-0",
         // Text and Number Input
-        "group-focus/input-content:top-1 group-focus/input-content:translate-y-0",
-        "group-focus-within/input-content:top-1 group-focus-within/input-content:translate-y-0",
-        "group-has-[input:not(:placeholder-shown)]/input-content:top-1 group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
+        "group-has-[input:not(:placeholder-shown)]/input-content:top-floating-label-input-height-filled group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
         // TextArea
-        "group-focus/text-area:top-1 group-focus/text-area:translate-y-0",
-        "group-focus-within/text-area:top-1 group-focus-within/text-area:translate-y-0",
-        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-1 group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
+        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-floating-label-input-height-filled group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
         // TextEditor
-        "group-focus/text-editor:top-1 group-focus/text-editor:translate-y-0",
-        "group-focus-within/text-editor:top-1 group-focus-within/text-editor:translate-y-0",
-        "group-data-[is-filled=true]/text-editor:top-1 group-data-[is-filled=true]/text-editor:translate-y-0",
+        "group-data-[is-filled=true]/text-editor:top-floating-label-input-height-filled group-data-[is-filled=true]/text-editor:translate-y-0",
         // Date and Time Picker
         "group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
         "group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
@@ -40,12 +35,12 @@ const labelBase = cva("text-text-default-1", {
         // Text and Number Input
         "group-has-[input:placeholder-shown]/input-content:text-text-default-3",
         "group-has-[input:placeholder-shown]/input-content:!font-medium",
-        "group-has-[input:not(placeholder-shown)]/input-content:!font-semibold",
+        "group-has-[input:not(:placeholder-shown)]/input-content:!font-semibold",
         "group-has-[input:not(:placeholder-shown)]/input-content:!text-label-3",
-        "group-has-[input:not(placeholder-shown)]/input-content:text-text-default-1",
-        "group-focus-within/input-content:!text-text-default-1",
-        "group-focus-within/input-content:text-label-3",
-        "group-has-[input:focus-within]/input-content:!font-semibold",
+        "group-has-[input:not(:placeholder-shown)]/input-content:text-text-default-1",
+        // "group-focus-within/input-content:!text-text-default-1",
+        // "group-focus-within/input-content:text-label-3",
+        // "group-has-[input:focus-within]/input-content:!font-semibold",
         // TextArea
         "group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
         "group-has-[textarea:placeholder-shown]/text-area:!font-medium",

package/dist/components/overlays/Modal/Modal.d.ts

@@ -5,7 +5,8 @@ export interface ModalProps extends ModalVariantProps {
     portalContainerRef?: RefObject<HTMLElement>;
     onClose: () => void;
     modalClassName?: string;
+    closeIconClassName?: string;
     showCloseIcon?: boolean;
     isDismissable?: boolean;
 }
-export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.js

@@ -4,7 +4,7 @@ import { ModalOverlay, Modal as Modal$1, Dialog } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
-import { modalOverlay, modalContent, modalMain } from "./modal.cva.js";
+import { modalOverlay, modalMain, modalContent } from "./modal.cva.js";
 import { ns } from "../../../config/i18n.js";
 const Modal = ({
   isOpen,
@@ -13,6 +13,7 @@ const Modal = ({
   aside,
   children,
   modalClassName,
+  closeIconClassName,
   showCloseIcon,
   isDismissable = true
 }) => {
@@ -32,14 +33,17 @@ const Modal = ({
           onClose();
         }
       },
-      children: /* @__PURE__ */ jsx(Modal$1, { className: clsx(modalMain({ aside })), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
+      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMain({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
         showCloseIcon && /* @__PURE__ */ jsx(
           InlineIconButton,
           {
             color: "secondary",
             onPress: onClose,
             icon: CloseIcon,
-            className: "absolute top-0 right-0 p-2",
+            className: clsx(
+              "absolute top-0 right-0 p-modal-gap-desktop-modal-close-icon-top-right",
+              closeIconClassName
+            ),
             label: t(($) => $.ui.modal.closeBtn)
           }
         ),

package/dist/components/overlays/Tooltip/tooltip.cva.js

@@ -5,7 +5,7 @@ const tooltipCva = cva(
     variants: {
       color: {
         default: ["bg-interactive-contained-secondary-idle"],
-        error: ["w-max bg-text-error-1"]
+        error: ["w-max bg-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -19,7 +19,7 @@ const tooltipPointerHorizontalCva = cva(
     variants: {
       color: {
         default: ["text-interactive-contained-secondary-idle"],
-        error: ["text-text-error-1"]
+        error: ["text-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -33,7 +33,7 @@ const tooltipPointerVerticalCva = cva(
     variants: {
       color: {
         default: ["text-interactive-contained-secondary-idle"],
-        error: ["text-text-error-1"]
+        error: ["text-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -45,7 +45,7 @@ const tooltipTextCva = cva([], {
   variants: {
     color: {
       default: ["text-text-inverted-3"],
-      error: ["text-interactive-text-secondary-idle-inverted"]
+      error: ["text-text-error-inverted-1"]
     }
   },
   defaultVariants: {

package/dist/components/segment/SegmentItem.js

@@ -11,16 +11,17 @@ const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
       ...props,
       id,
       className: clsx(
-        "flex items-center justify-center gap-1 transition-all duration-200",
-        "border border-transparent",
+        "flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
+        "border border-support-transparent-outline",
         "py-segmented-control-height-segment",
-        iconOnly ? "px-segmented-control-height-segment" : "px-segmented-control-side-segment py-segmented-control-height-segment",
+        iconOnly ? "px-segmented-control-height-segment" : "px-segmented-control-side-segment",
         "rounded-segmented-control-rounding-segment",
-        "hover:bg-interactive-subtle-secondary-hover",
-        "pressed:bg-interactive-subtle-secondary-pressed",
-        "selected:text-interactive-subtle-secondary-on-toggled-idle text-interactive-subtle-secondary-on-idle hover:text-interactive-subtle-secondary-on-hover",
-        "disabled:selected:text-interactive-subtle-secondary-on-toggled-disabled disabled:text-interactive-subtle-secondary-on-disabled",
-        "selected:bg-interactive-subtle-secondary-toggled-idle disabled:selected:bg-interactive-subtle-secondary-toggled-disabled"
+        "text-interactive-subtle-secondary-on-idle",
+        "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+        "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+        "disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
+        "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+        "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
       ),
       isDisabled,
       children: [

package/dist/components/shared/pagination/PaginationList.d.ts

@@ -6,7 +6,7 @@ export interface PaginationListProps {
     hideFirstLast?: boolean;
     hidePrevNext?: boolean;
     hideNumbers?: boolean;
-    size?: ButtonProps["size"];
+    size?: Exclude<ButtonProps["size"], "none">;
     color?: ButtonProps["color"];
     variant?: ButtonProps["variant"];
     className?: string;

package/dist/components/shared/pagination/minWidth.cva.d.ts

@@ -1,3 +1,3 @@
 export declare const minWidth: (props?: ({
-    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+    size?: "xs" | "s" | "m" | "l" | "xxs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/status/Toast/Toast.js

@@ -32,7 +32,8 @@ const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props })
           onPress,
           ...buttonColor({ ...props }),
           variant: "text",
-          size: "xs",
+          size: "none",
+          width: "hug",
           children: buttonText
         },
         buttonText

package/dist/hooks/useFilters.d.ts

@@ -1,7 +1,11 @@
+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 const useFilters: <TFilterData>(defaultFilterValues?: TFilterData, prefix?: string) => FilterStore<TFilterData>;
+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 {};

package/dist/hooks/useFilters.js

@@ -1,107 +1,160 @@
-import { useState, useEffect } from "react";
-import { UIRouter } from "../config/router.context.js";
-const serializeFiltersToQuery = (filterData, prefix) => {
+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) {
   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[filterKey] = JSON.stringify(value);
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = JSON.stringify(value);
     } else if (typeof value === "boolean") {
-      query[filterKey] = value ? "true" : "false";
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = value ? "true" : "false";
+    } else if (typeof value === "number") {
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = value.toString();
     } else {
-      query[filterKey] = value;
+      query[`filter[${prefix && `${prefix}-`}${key}]`] = value;
     }
   }
   return query;
-};
-const parseFilterFromQuery = (query) => {
+}
+function parseFilterFromQuery(query, schema) {
   const filter = {};
   for (const [key, value] of Object.entries(query)) {
-    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;
+    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;
+        }
+      }
     }
   }
   return filter;
-};
-const useFilters = (defaultFilterValues, prefix = "") => {
-  const { query, pathname, replace } = UIRouter.useUIRouter();
-  const queryFilters = parseFilterFromQuery(query);
+}
+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 [filterData, setFilterData] = useState(queryFilters);
   useEffect(() => {
-    const setUrlToDefaultFilters = () => {
+    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 flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
-      replace({
-        pathname,
-        query: {
-          ...query,
-          ...flatFilterQuery
+      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;
+          }
         }
       });
-    };
-    const currentFilters = parseFilterFromQuery(query);
-    const hasFiltersSet = Object.keys(currentFilters).length > 0;
-    if (defaultFilterValues && !hasFiltersSet) {
-      setUrlToDefaultFilters();
+      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;
     }
-  }, [defaultFilterValues, prefix]);
+  }, [defaultFilterValues, prefix, location.pathname, location.searchStr]);
   useEffect(() => {
-    const newQueryFilters = parseFilterFromQuery(query);
+    const newQueryFilters = parseFilterFromQuery(queryObject, schema);
     setFilterData(newQueryFilters);
-  }, [query]);
+  }, [queryObject, schema]);
   const setFilterValue = (data) => {
-    let newFilters = { ...filterData };
+    const next = { ...filterData };
     const isReset = Object.keys(data).length === 0;
     const isResetToDefault = data === defaultFilterValues;
     if (isResetToDefault) {
-      newFilters = {
-        ...defaultFilterValues
-      };
-    } else if (isReset) {
-      newFilters = {};
-    } else {
+      Object.keys(next).forEach((key) => delete next[key]);
+      Object.entries(defaultFilterValues ?? {}).forEach(([key, value]) => {
+        next[key] = value;
+      });
+    } else if (!isReset) {
       Object.entries(data).forEach(([key, value]) => {
         if (value === void 0) {
-          delete newFilters[key];
+          delete next[key];
         } else {
-          newFilters[key] = value;
+          next[key] = value;
         }
       });
+    } else {
+      Object.keys(next).forEach((key) => delete next[key]);
     }
-    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 sp = new URLSearchParams(location.searchStr || "");
+    Array.from(sp.keys()).forEach((key) => {
+      if (key.startsWith(`filter[${prefix && `${prefix}-`}`)) {
+        sp.delete(key);
       }
     });
-    setFilterData(newFilters);
+    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 to = `${location.pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
+    navigate({ to, replace: true });
+    setFilterData(next);
   };
   const getFilterValue = (keys) => {
     const result = {};
@@ -114,7 +167,8 @@ const useFilters = (defaultFilterValues, prefix = "") => {
     setFilterValue(defaultFilterValues ?? {});
   };
   return { filterData, setFilterValue, getFilterValue, clearAllFilters };
-};
+}
 export {
+  parseFilterFromQuery,
   useFilters
 };

package/dist/index.d.ts

@@ -69,6 +69,7 @@ export type { FileUploadContainerProps } from './components/inputs/File/FileUplo
 export { FileUploadContainer } from './components/inputs/File/FileUploadContainer';
 export type { InputUploadProps } from './components/inputs/File/InputUpload';
 export { InputUpload } from './components/inputs/File/InputUpload';
+export { ProgressBar } from './components/inputs/File/shared/ProgressBar';
 export type { FormFieldProps } from './components/inputs/FormField/FormField';
 export { FormField } from './components/inputs/FormField/FormField';
 export type { ControlledNumberInputProps, NumberInputProps } from './components/inputs/Input/NumberInput/NumberInput';

package/dist/index.js

@@ -51,6 +51,7 @@ import { TimePicker } from "./components/inputs/DateTime/TimePicker/TimePicker.j
 import { FileUpload } from "./components/inputs/File/FileUpload.js";
 import { FileUploadContainer } from "./components/inputs/File/FileUploadContainer.js";
 import { InputUpload } from "./components/inputs/File/InputUpload.js";
+import { ProgressBar } from "./components/inputs/File/shared/ProgressBar.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
 import { NumberInput } from "./components/inputs/Input/NumberInput/NumberInput.js";
 import { PasswordInput } from "./components/inputs/Input/PasswordInput/PasswordInput.js";
@@ -216,6 +217,7 @@ export {
   PillButton,
   PointerHorizontalIcon,
   PointerVerticalIcon,
+  ProgressBar,
   QueriesUtils,
   QueryAutocomplete,
   RadioGroup,

package/package.json

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

package/dist/components/inputs/File/shared/FileProgressBar.d.ts

@@ -1,3 +0,0 @@
-export declare const FileProgressBar: ({ progress }: {
-    progress?: number;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/shared/FileProgressBar.js

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Typography } from "../../../text/Typography/Typography.js";
-const FileProgressBar = ({ progress = 0 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1 w-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-1 w-full flex-shrink-0 rounded-xs bg-input-filled-idle" }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "absolute top-0 left-0 h-1 flex-shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
-          style: { width: `${progress}%` }
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs(
-      Typography,
-      {
-        variant: "default",
-        size: "label-2",
-        as: "span",
-        className: "text-center text-text-default-1",
-        children: [
-          progress,
-          "%"
-        ]
-      }
-    )
-  ] });
-};
-export {
-  FileProgressBar
-};