@povio/ui 2.1.12 → 2.1.14

package/dist/components/Menu/menu.cva.js

@@ -16,10 +16,10 @@ const menuItemCva = cva(
     "border-b border-b-elevation-outline-default-1 outline-none last:border-b-0",
     "bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
     "disabled:cursor-default disabled:text-interactive-text-secondary-disabled",
-    "hover:bg-elevation-fill-default-1 hover:text-interactive-text-secondary-hover",
+    "hover:bg-elevation-fill-default-2 hover:text-interactive-text-secondary-hover",
     "open:bg-interactive-contained-primary-idle open:text-interactive-contained-primary-on-idle",
     "open:hover:bg-interactive-contained-primary-hover open:hover:text-interactive-contained-primary-on-hover",
-    "focus-visible:bg-elevation-fill-default-1 focus-visible:text-interactive-text-secondary-hover"
+    "focus-visible:bg-elevation-fill-default-2 focus-visible:text-interactive-text-secondary-hover"
   ],
   {
     variants: {

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -11,6 +11,8 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     isClearable?: boolean;
     className?: string;
     todayIcon?: boolean;
+    disableManualEntry?: boolean;
+    placeholder?: string;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -34,6 +34,7 @@ const DatePickerBase = (props) => {
     value,
     disableDropdown,
     className,
+    placeholder,
     as = ui.input.as,
     hideLabel = ui.input.hideLabel,
     variant = ui.input.variant,
@@ -41,6 +42,7 @@ const DatePickerBase = (props) => {
     isClearable = ui.input.isClearable,
     todayIcon = ui.dateInput.todayIcon,
     shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
+    disableManualEntry = ui.dateInput.disableManualEntry,
     ...rest
   } = props;
   const formFieldProps = {
@@ -138,16 +140,19 @@ const DatePickerBase = (props) => {
                 fieldProps: { ...fieldProps, placeholderValue: PLACEHOLDER_VALUE },
                 buttonProps,
                 isDisabled,
+                disableManualEntry,
                 isInvalid: !!error,
                 disableDropdown,
                 variant,
                 size,
                 isClearable,
                 headerProps,
-                todayIcon
+                todayIcon,
+                onOpenDropdown: () => state.toggle(),
+                placeholder
               }
             ),
-            !disableDropdown && /* @__PURE__ */ jsx(
+            (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
               DateTimeDialog,
               {
                 footer: /* @__PURE__ */ jsx(

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts

@@ -13,6 +13,8 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     hideSidebar?: boolean;
     className?: string;
     todayIcon?: boolean;
+    disableManualEntry?: boolean;
+    placeholder?: string;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -40,6 +40,7 @@ const DateRangePickerBase = (props) => {
     disableDropdown,
     className,
     hideSidebar,
+    placeholder,
     hideLabel = ui.input.hideLabel,
     variant = ui.input.variant,
     as = ui.input.as,
@@ -47,6 +48,7 @@ const DateRangePickerBase = (props) => {
     isClearable = ui.input.isClearable,
     todayIcon = ui.dateInput.todayIcon,
     shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
+    disableManualEntry = ui.dateInput.disableManualEntry,
     ...rest
   } = props;
   const [validationRangeError, setValidationRangeError] = useState();
@@ -523,7 +525,10 @@ const DateRangePickerBase = (props) => {
                 size,
                 isClearable,
                 headerProps,
-                todayIcon
+                todayIcon,
+                disableManualEntry,
+                placeholder,
+                onOpenDropdown: () => state.toggle()
               }
             ),
             /* @__PURE__ */ jsx(

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -11,6 +11,8 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     isTimeOptional?: boolean;
     isClearable?: boolean;
     todayIcon?: boolean;
+    disableManualEntry?: boolean;
+    placeholder?: string;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -32,6 +32,7 @@ const DateTimePickerBase = (props) => {
     value,
     disableDropdown,
     isTimeOptional,
+    placeholder,
     hideLabel = ui.input.hideLabel,
     variant = ui.input.variant,
     as = ui.input.as,
@@ -39,6 +40,7 @@ const DateTimePickerBase = (props) => {
     isClearable = ui.input.isClearable,
     todayIcon = ui.dateInput.todayIcon,
     shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros,
+    disableManualEntry = ui.dateInput.disableManualEntry,
     ...rest
   } = props;
   const formFieldProps = {
@@ -167,10 +169,13 @@ const DateTimePickerBase = (props) => {
                 isDateTime: true,
                 isClearable,
                 headerProps,
-                todayIcon
+                todayIcon,
+                disableManualEntry,
+                placeholder,
+                onOpenDropdown: () => state.toggle()
               }
             ),
-            !disableDropdown && /* @__PURE__ */ jsx(
+            (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
               DateTimeDialog,
               {
                 footer: /* @__PURE__ */ jsx(

package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts

@@ -9,6 +9,8 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     disableDropdown?: boolean;
     date?: string | null;
     isClearable?: boolean;
+    disableManualEntry?: boolean;
+    placeholder?: string;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -31,11 +31,13 @@ const TimePickerBase = (props) => {
     onChange,
     value,
     disableDropdown,
+    placeholder,
     variant = ui.input.variant,
     as = ui.input.as,
     size = ui.input.size,
     hideLabel = ui.input.hideLabel,
     isClearable = ui.input.isClearable,
+    disableManualEntry = ui.dateInput.disableManualEntry,
     ...rest
   } = props;
   const formFieldProps = {
@@ -52,7 +54,6 @@ const TimePickerBase = (props) => {
     errorClassName
   };
   const [isOpen, setIsOpen] = useState(false);
-  const skipOnChangeRef = useRef(false);
   const initialDateEmitRef = useRef(true);
   const { locale } = useLocale();
   const dialogState = useTimeFieldState({
@@ -64,11 +65,7 @@ const TimePickerBase = (props) => {
     ...rest,
     isDisabled,
     value,
-    onChange: (val) => {
-      if (!skipOnChangeRef.current) {
-        onChange?.(val);
-      }
-    },
+    onChange,
     locale
   });
   useEffect(() => {
@@ -80,18 +77,12 @@ const TimePickerBase = (props) => {
       onChange?.(state.timeValue);
     }
   }, [rest.date]);
-  useEffect(() => {
-    if (dialogState.timeValue || !state.value) {
-      return;
-    }
-    state.segments.forEach((segment) => {
-      if (segment.isEditable && segment.value != null) {
-        dialogState.setSegment(segment.type, segment.value);
-      }
-    });
-  }, [state.value]);
   const timeFieldRef = useRef(null);
-  const { labelProps, fieldProps } = useTimeField({ ...rest, label }, state, timeFieldRef);
+  const { labelProps, fieldProps } = useTimeField(
+    { ...rest, label, isReadOnly: disableManualEntry },
+    state,
+    timeFieldRef
+  );
   const headerProps = {
     label,
     tooltipText,
@@ -104,15 +95,6 @@ const TimePickerBase = (props) => {
     labelProps
   };
   const onApply = () => {
-    if (!state.timeValue) {
-      skipOnChangeRef.current = true;
-      dialogState.segments.forEach((segment) => {
-        if (segment.isEditable && segment.value != null) {
-          state.setSegment(segment.type, segment.value);
-        }
-      });
-      skipOnChangeRef.current = false;
-    }
     state.setValue(dialogState.value);
     setIsOpen(false);
   };
@@ -153,10 +135,12 @@ const TimePickerBase = (props) => {
                 variant,
                 size,
                 isClearable,
-                headerProps
+                headerProps,
+                disableManualEntry,
+                placeholder
               }
             ),
-            !disableDropdown && /* @__PURE__ */ jsx(
+            (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
               DateTimeDialog,
               {
                 footer: /* @__PURE__ */ jsx(

package/dist/components/inputs/DateTime/shared/DateField.d.ts

@@ -7,6 +7,7 @@ interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createC
     ref?: Ref<DateFieldHandle>;
     onClearChange?: (canClear: boolean) => void;
     hidePlaceholder?: boolean;
+    disableManualEntry?: boolean;
 }
-export declare const DateField: ({ ref, onClearChange, hidePlaceholder, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/DateField.js

@@ -1,18 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import { createCalendar } from "@internationalized/date";
+import { clsx } from "clsx";
 import { useRef, useImperativeHandle, useEffect } from "react";
 import { useLocale, useDateField } from "react-aria";
 import { useDateFieldState } from "react-stately";
 import { DateSegmentItem } from "./DateSegmentItem.js";
-const DateField = ({ ref, onClearChange, hidePlaceholder, ...props }) => {
+const DateField = ({
+  ref,
+  onClearChange,
+  hidePlaceholder,
+  isDisabled,
+  disableManualEntry,
+  ...props
+}) => {
   const { locale } = useLocale();
   const state = useDateFieldState({
     ...props,
+    isDisabled,
+    isReadOnly: disableManualEntry,
     locale,
     createCalendar
   });
   const dataFieldRef = useRef(null);
-  const { fieldProps } = useDateField(props, state, dataFieldRef);
+  const { fieldProps } = useDateField({ ...props, isDisabled, isReadOnly: disableManualEntry }, state, dataFieldRef);
   const handleBlur = (e) => {
     fieldProps.onBlur?.(e);
     if (!state.value) {
@@ -32,6 +42,11 @@ const DateField = ({ ref, onClearChange, hidePlaceholder, ...props }) => {
   useImperativeHandle(ref, () => ({
     clearField: () => {
       state.setValue(null);
+      for (const segment of state.segments) {
+        if (segment.type !== "literal") {
+          state.clearSegment(segment.type);
+        }
+      }
     }
   }));
   useEffect(() => {
@@ -43,13 +58,13 @@ const DateField = ({ ref, onClearChange, hidePlaceholder, ...props }) => {
       ...fieldProps,
       ref: dataFieldRef,
       onBlur: handleBlur,
-      className: "relative w-full",
+      className: clsx("relative w-full", disableManualEntry && "pointer-events-none"),
       children: /* @__PURE__ */ jsx("div", { className: "flex", children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
         DateSegmentItem,
         {
           segment,
           state,
-          isDisabled: props.isDisabled,
+          isDisabled,
           hidePlaceholder
         },
         i

package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts

@@ -15,6 +15,9 @@ interface DatePickerInputProps extends InputVariantProps {
     isClearable?: boolean;
     headerProps?: FormFieldHeaderProps;
     todayIcon?: boolean;
+    disableManualEntry?: boolean;
+    placeholder?: string;
+    onOpenDropdown?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, disableManualEntry, placeholder, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -3,6 +3,7 @@ import { now, getLocalTimeZone, today } from "@internationalized/date";
 import { clsx } from "clsx";
 import { useState, useRef, useCallback, useMemo } from "react";
 import { useHover, useFocusWithin, useFocusVisible } from "react-aria";
+import { Button } from "react-aria-components";
 import useMeasure from "react-use-measure";
 import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
@@ -13,6 +14,7 @@ import { DateField } from "./DateField.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { useInputCva, inputSide } from "../../shared/input.cva.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 const DatePickerInput = ({
   ref,
@@ -30,6 +32,9 @@ const DatePickerInput = ({
   isClearable,
   headerProps,
   todayIcon,
+  disableManualEntry,
+  placeholder,
+  onOpenDropdown,
   ...props
 }) => {
   const inputCva = useInputCva();
@@ -49,10 +54,7 @@ const DatePickerInput = ({
   const onClear = () => {
     dateFieldRef.current?.clearField();
     fieldProps.onChange?.(null);
-    const timeout = setTimeout(() => {
-      endDateFieldRef.current?.clearField();
-      clearTimeout(timeout);
-    }, 0);
+    endDateFieldRef.current?.clearField();
     setCanClear(false);
   };
   const onToday = () => {
@@ -115,47 +117,76 @@ const DatePickerInput = ({
               className: "flex items-center gap-2",
               style,
               children: [
+                disableManualEntry && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onPress: onOpenDropdown,
+                    className: "absolute inset-0 z-0",
+                    isDisabled
+                  }
+                ),
                 todayIcon && /* @__PURE__ */ jsx(
                   IconButton,
                   {
                     label: "",
                     icon: TodayIcon,
                     size: "none",
-                    onPress: onToday
+                    onPress: onToday,
+                    className: "relative z-1"
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  DateField,
+                disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(
+                  Typography,
                   {
-                    ref: dateFieldRef,
-                    ...fieldProps,
-                    isDisabled,
-                    isInvalid,
-                    onClearChange,
-                    hidePlaceholder
+                    size: "label-1",
+                    className: "text-text-default-3",
+                    children: placeholder
                   }
-                ),
-                endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  !((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", { className: clsx("select-none", isDisabled && "text-interactive-text-secondary-disabled"), children: "–" }),
+                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     DateField,
                     {
-                      ref: endDateFieldRef,
-                      ...endFieldProps,
+                      ref: dateFieldRef,
+                      ...fieldProps,
                       isDisabled,
                       isInvalid,
                       onClearChange,
-                      hidePlaceholder
+                      hidePlaceholder,
+                      disableManualEntry
                     }
-                  )
+                  ),
+                  endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    !((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: clsx(
+                          "pointer-events-none select-none",
+                          isDisabled && "text-interactive-text-secondary-disabled"
+                        ),
+                        children: "–"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      DateField,
+                      {
+                        ref: endDateFieldRef,
+                        ...endFieldProps,
+                        isDisabled,
+                        isInvalid,
+                        onClearChange,
+                        hidePlaceholder,
+                        disableManualEntry
+                      }
+                    )
+                  ] })
                 ] })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center gap-2", as === "floating" && "-mt-4"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative z-1 flex items-center gap-2", children: [
           isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear }),
-          !disableDropdown && /* @__PURE__ */ jsx(
+          (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
             InlineIconButton,
             {
               label: "",

package/dist/components/inputs/DateTime/shared/DateTimeDialog.js

@@ -31,7 +31,7 @@ const DateTimeDialog = ({
           Dialog,
           {
             ...dialogProps,
-            className: "!outline-none",
+            className: "outline-none!",
             "aria-label": label,
             children: /* @__PURE__ */ jsxs("div", { className: "flex overflow-hidden rounded-input-rounding-default border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 shadow-5", children: [
               !hideSidebar && sidebar,
@@ -61,7 +61,7 @@ const DateTimeDialog = ({
           FormFieldHeader,
           {
             label,
-            className: "!mb-8 shrink-0 px-4 pt-3",
+            className: "mb-8! shrink-0 px-4 pt-3",
             rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close })
           }
         ),

package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts

@@ -12,7 +12,9 @@ interface DatePickerInputProps extends InputVariantProps {
     disableDropdown?: boolean;
     headerProps?: FormFieldHeaderProps;
     isClearable?: boolean;
+    disableManualEntry?: boolean;
+    placeholder?: string;
     onPress: () => void;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isInvalid, disableDropdown, variant, size, isClearable, headerProps, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState, useMemo } from "react";
 import { useHover, useFocusWithin, useFocusVisible } from "react-aria";
+import { Button } from "react-aria-components";
 import useMeasure from "react-use-measure";
 import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
@@ -9,6 +10,7 @@ import { TimeField } from "./TimeField.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { useInputCva, inputSide } from "../../shared/input.cva.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 const TimePickerInput = ({
   ref,
@@ -22,6 +24,8 @@ const TimePickerInput = ({
   size,
   isClearable,
   headerProps,
+  disableManualEntry,
+  placeholder,
   onPress,
   ...props
 }) => {
@@ -67,6 +71,13 @@ const TimePickerInput = ({
       ...hoverProps,
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
+          disableManualEntry && /* @__PURE__ */ jsx(
+            Button,
+            {
+              onPress,
+              className: "absolute inset-0 z-0"
+            }
+          ),
           as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
             FormFieldLabel,
             {
@@ -75,7 +86,14 @@ const TimePickerInput = ({
               ...headerProps
             }
           ),
-          /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { style, children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              size: "label-1",
+              className: "text-text-default-3",
+              children: placeholder
+            }
+          ) : /* @__PURE__ */ jsx(
             TimeField,
             {
               fieldProps,
@@ -85,27 +103,19 @@ const TimePickerInput = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx("flex items-center gap-2", {
-              "-mt-4": as === "floating"
-            }),
-            children: [
-              isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }),
-              !disableDropdown && /* @__PURE__ */ jsx(
-                InlineIconButton,
-                {
-                  label: "",
-                  color: "secondary",
-                  onPress,
-                  icon: ClockIcon,
-                  isDisabled
-                }
-              )
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: clsx("relative z-1 flex items-center gap-2", as === "floating" && "-mt-4"), children: [
+          isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }),
+          (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(
+            InlineIconButton,
+            {
+              label: "",
+              color: "secondary",
+              onPress,
+              icon: ClockIcon,
+              isDisabled
+            }
+          )
+        ] })
       ]
     }
   );

package/dist/components/inputs/File/FileUpload.js

@@ -39,6 +39,7 @@ const FileUploadBase = (props) => {
     fileRemove,
     children,
     listRenderer,
+    onInvalidFileType,
     ...rest
   } = props;
   const ui = UIConfig.useConfig();
@@ -56,68 +57,70 @@ const FileUploadBase = (props) => {
     errorClassName
   };
   const labelProps = useLabels({ "aria-label": label });
-  const handleUpload = useCallback(
-    async (inputFiles) => {
-      const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-      if (acceptedFiles.length === 0 || !fileUpload) {
-        return;
+  const handleUpload = async (inputFiles) => {
+    const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+    const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+    if (invalidFiles.length > 0) {
+      if (allowsMultiple) {
+        onInvalidFileType?.(invalidFiles.map((file) => file.name));
+      } else {
+        onInvalidFileType?.(invalidFiles[0].name);
       }
-      if (!allowsMultiple) {
-        setUploadState([]);
-      }
-      const newUploadState = [];
-      acceptedFiles.forEach((file) => {
-        newUploadState.push({ state: "uploading", progress: 0, file, abortController: new AbortController() });
-      });
-      const startIndex = allowsMultiple ? uploadState.length : 0;
-      setUploadState((prev) => [...prev, ...newUploadState]);
-      const promises = [];
-      acceptedFiles.forEach(async (file, index) => {
-        promises.push(
-          fileUpload(
-            {
-              data: {
-                resourceName: file.name,
-                fileName: file.name,
-                fileSize: file.size,
-                method: "put"
+    }
+    if (acceptedFiles.length === 0 || !fileUpload) {
+      return;
+    }
+    if (!allowsMultiple) {
+      setUploadState([]);
+    }
+    const newUploadState = [];
+    acceptedFiles.forEach((file) => {
+      newUploadState.push({ state: "uploading", progress: 0, file, abortController: new AbortController() });
+    });
+    const startIndex = allowsMultiple ? uploadState.length : 0;
+    setUploadState((prev) => [...prev, ...newUploadState]);
+    const promises = [];
+    acceptedFiles.forEach(async (file, index) => {
+      promises.push(
+        fileUpload(
+          {
+            data: {
+              resourceName: file.name,
+              fileName: file.name,
+              fileSize: file.size,
+              method: "put"
+            }
+          },
+          file,
+          {
+            onUploadProgress: ({ loaded, total }) => {
+              if (total == null) {
+                return;
               }
+              const progress = Math.round(loaded / total * 100);
+              setUploadState(
+                (prev) => prev.map((state, i) => i === startIndex + index ? { ...state, progress } : state)
+              );
             },
-            file,
-            {
-              onUploadProgress: ({ loaded, total }) => {
-                if (total == null) {
-                  return;
-                }
-                const progress = Math.round(loaded / total * 100);
-                setUploadState(
-                  (prev) => prev.map((state, i) => i === startIndex + index ? { ...state, progress } : state)
-                );
-              },
-              abortController: newUploadState[index]?.abortController
-            }
-          )
-        );
-      });
-      const response = await Promise.all(promises);
-      response.forEach((res, index) => {
-        setUploadState(
-          (prev) => prev.map((state, i) => i === startIndex + index ? { ...state, state: "uploaded", id: res.id } : state)
-        );
-      });
-    },
-    [fileUpload, acceptedFileTypes, setUploadState, allowsMultiple, uploadState.length]
-  );
-  const handleSelect = useCallback(
-    (inputFiles) => {
-      if (!inputFiles) {
-        return;
-      }
-      const filesArray = Array.from(inputFiles);
-      handleUpload(filesArray);
-    },
-    [handleUpload]
-  );
+            abortController: newUploadState[index]?.abortController
+          }
+        )
+      );
+    });
+    const response = await Promise.all(promises);
+    response.forEach((res, index) => {
+      setUploadState(
+        (prev) => prev.map((state, i) => i === startIndex + index ? { ...state, state: "uploaded", id: res.id } : state)
+      );
+    });
+  };
+  const handleSelect = (inputFiles) => {
+    if (!inputFiles) {
+      return;
+    }
+    const filesArray = Array.from(inputFiles);
+    handleUpload(filesArray);
+  };
   const handleDrop = async (e) => {
     if (!e.items) {
       return;

package/dist/components/inputs/File/InputUpload.js

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { Controller } from "react-hook-form";
 import { FormField } from "../FormField/FormField.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { FileUtils } from "../../../utils/file.utils.js";
 import { InputUploadContent } from "./shared/InputUploadContent.js";
 import { InputUploadFilled } from "./shared/InputUploadFilled.js";
 const InputUploadBase = ({
@@ -21,6 +22,7 @@ const InputUploadBase = ({
   error,
   className,
   onChange,
+  onInvalidFileType,
   value,
   defaultValue,
   allowsMultiple = false,
@@ -73,28 +75,29 @@ const InputUploadBase = ({
       onChange?.(newFiles[0] || null);
     }
   };
-  const isFileAccepted = (file) => {
-    if (!acceptedFileTypes || acceptedFileTypes.length === 0) {
-      return true;
-    }
-    return acceptedFileTypes.some((type) => {
-      if (type.includes("/")) {
-        return file.type === type || type.endsWith("/*") && file.type.startsWith(type.slice(0, -1));
+  const handleFileSelect = (inputFiles) => {
+    const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+    const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+    if (allowsMultiple) {
+      updateFiles([...files, ...acceptedFiles]);
+      if (invalidFiles.length > 0) {
+        onInvalidFileType?.(invalidFiles.map((file) => file.name));
       }
-      return file.name.toLowerCase().endsWith(type.toLowerCase());
-    });
+    } else {
+      if (acceptedFiles.length > 0) {
+        updateFiles([acceptedFiles[0]]);
+      }
+      if (invalidFiles.length > 0) {
+        onInvalidFileType?.(invalidFiles[0].name);
+      }
+    }
   };
   const handleSelect = (inputFiles) => {
     if (!inputFiles) {
       return;
     }
     const filesArray = Array.from(inputFiles);
-    const acceptedFiles = filesArray.filter(isFileAccepted);
-    if (allowsMultiple) {
-      updateFiles([...files, ...acceptedFiles]);
-    } else {
-      updateFiles([acceptedFiles[0]]);
-    }
+    handleFileSelect(filesArray);
   };
   const handleDrop = async (e) => {
     if (!e.items) {
@@ -107,12 +110,7 @@ const InputUploadBase = ({
       }
     });
     const inputFiles = await Promise.all(promises);
-    const acceptedFiles = inputFiles.filter(isFileAccepted);
-    if (allowsMultiple) {
-      updateFiles([...files, ...acceptedFiles]);
-    } else {
-      updateFiles([acceptedFiles[0]]);
-    }
+    handleFileSelect(inputFiles);
   };
   const handleRemove = () => {
     updateFiles([]);

package/dist/components/inputs/File/fileUpload.types.d.ts

@@ -12,12 +12,14 @@ export interface SingleFileUploadProps {
     value?: FileUploadState | null;
     onChange?: (file: File | null) => void;
     defaultValue?: File | null;
+    onInvalidFileType?: (filename: string) => void;
 }
 export interface MultipleFileUploadProps {
     allowsMultiple: true;
     value?: FileUploadState[];
     onChange?: (files: File[]) => void;
     defaultValue?: File[];
+    onInvalidFileType?: (filenames: string[]) => void;
 }
 export type GroupedFileUploadProps = MultipleFileUploadProps | SingleFileUploadProps;
 export type GroupedFileUploadControlProps<TFieldValues extends FieldValues> = ({

package/dist/components/inputs/File/inputUpload.types.d.ts

@@ -9,12 +9,14 @@ export interface SingleFileUploadProps {
     value?: File | null;
     onChange?: (file: File | null) => void;
     defaultValue?: File | null;
+    onInvalidFileType?: (filename: string) => void;
 }
 export interface MultipleFileUploadProps {
     allowsMultiple: true;
     value?: File[];
     onChange?: (files: File[]) => void;
     defaultValue?: File[];
+    onInvalidFileType?: (filenames: string[]) => void;
 }
 export type GroupedFileUploadProps = MultipleFileUploadProps | SingleFileUploadProps;
 export type GroupedFileUploadControlProps<TFieldValues extends FieldValues> = ({

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

@@ -35,14 +35,11 @@ const FileUploadContentFilled = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx(
-              "flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content",
-              {
-                "flex-col": variant === "vertical",
-                "flex-row": variant === "horizontal",
-                "opacity-50": isDisabled
-              }
-            ),
+            className: clsx("flex min-w-0 max-w-full grow items-center gap-file-upload-content-gap-icon-to-content", {
+              "flex-col": variant === "vertical",
+              "flex-row": variant === "horizontal",
+              "opacity-50": isDisabled
+            }),
             children: [
               /* @__PURE__ */ jsx(CheckCircleIcon, { className: "h-6 w-6 text-text-default-1" }),
               /* @__PURE__ */ jsxs(
@@ -50,7 +47,7 @@ const FileUploadContentFilled = ({
                 {
                   className: clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
                     "max-w-full items-center": variant === "vertical",
-                    "max-w-[calc(100%_-_32px)]": variant === "horizontal"
+                    "max-w-[calc(100%-32px)]": variant === "horizontal"
                   }),
                   children: [
                     /* @__PURE__ */ jsx(
@@ -94,7 +91,7 @@ const FileUploadContentFilled = ({
                   TextButton,
                   {
                     className: clsx("text-interactive-text-primary-idle", {
-                      "[&>span>span]:!font-medium": variant === "vertical"
+                      "[&>span>span]:font-medium!": variant === "vertical"
                     }),
                     children: browseText ?? ""
                   }
@@ -124,7 +121,7 @@ const FileUploadContentFilled = ({
                 TextButton,
                 {
                   className: clsx(
-                    variant === "vertical" && "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase"
+                    variant === "vertical" && "text-interactive-text-primary-idle lowercase [&>span>span]:font-medium!"
                   ),
                   color: variant === "horizontal" ? "secondary" : "primary",
                   onPress: () => {

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

@@ -46,10 +46,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
       variant: "filled",
       as: "default",
       className: [
-        "bg-input-filled-idle text-text-default-1",
-        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
-        "focus-within:border focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
-        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+        "hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+        "invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
         "disabled:bg-input-filled-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
         "focus-visible:outline-interactive-contained-primary-focus"
@@ -72,9 +72,9 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
       variant: "filled",
       as: "floating",
       className: [
-        "bg-input-filled-idle text-text-default-1",
-        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
-        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
+        "border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+        "hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
         "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
         "disabled:bg-input-filled-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
@@ -98,10 +98,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
       variant: "outlined",
       as: "filter",
       className: [
-        "bg-input-filled-idle text-text-default-1",
-        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
-        "focus-within:border focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
-        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "border border-transparent border-solid bg-input-filled-idle text-text-default-1",
+        "hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+        "invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
         "disabled:bg-input-filled-disabled disabled:text-text-default-1",
         "placeholder:text-text-default-3",
         "focus-visible:outline-interactive-contained-primary-focus"

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

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

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

@@ -15,6 +15,7 @@ const Modal = ({
   children,
   modalClassName,
   closeIconClassName,
+  overlayClassName,
   showCloseIcon,
   isDismissable = true
 }) => {
@@ -27,7 +28,7 @@ const Modal = ({
     ModalOverlay,
     {
       UNSTABLE_portalContainer: portalContainerRef?.current,
-      className: modalOverlayCva({ aside }),
+      className: modalOverlayCva({ aside, className: overlayClassName }),
       isDismissable,
       isOpen,
       shouldCloseOnInteractOutside: () => {
@@ -49,7 +50,8 @@ const Modal = ({
               "absolute top-0 right-0 p-modal-gap-desktop-modal-close-icon-top-right",
               closeIconClassName
             ),
-            label: t(($) => $.ui.modal.closeBtn)
+            label: t(($) => $.ui.modal.closeBtn),
+            disableTooltip: true
           }
         ),
         children

package/dist/components/table/Table.js

@@ -218,7 +218,7 @@ const Table = ({
       className: clsx("w-full", className),
       ...listeners,
       children: [
-        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 border-b border-b-elevation-outline-default-1", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 bg-elevation-fill-default-1 shadow-2", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
           "tr",
           {
             className: clsx(tableHeadRowCva({})),

package/dist/components/table/table.cva.js

@@ -21,7 +21,7 @@ const tableRow = cva(
 const tableHeadRow = cva(["h-8 w-full"]);
 const tableHeadData = cva(
   [
-    "border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left"
+    "border-b border-b-elevation-outline-default-1 border-solid bg-elevation-fill-default-1 px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left"
   ],
   {
     variants: {

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

@@ -19,7 +19,7 @@ export declare namespace UIConfig {
         select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType">;
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/config/uiConfig.context.js

@@ -40,7 +40,8 @@ var UIConfig;
     },
     dateInput: {
       todayIcon: false,
-      shouldForceLeadingZeros: false
+      shouldForceLeadingZeros: false,
+      disableManualEntry: false
     }
   };
   const Context = createContext(DEFAULT_CONFIG);

package/dist/hooks/useBreakpoint.d.ts

@@ -1,3 +1,3 @@
-type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+type Breakpoint = "sm" | "md" | "lg" | "xl";
 export declare function useBreakpoint(breakpointKey: Breakpoint): boolean;
 export {};

package/dist/hooks/useBreakpoint.js

@@ -5,6 +5,14 @@ function getBreakpoints() {
   if (breakpoints) {
     return breakpoints;
   }
+  if (typeof window === "undefined") {
+    return {
+      sm: "23.75rem",
+      md: "37.5rem",
+      lg: "80rem",
+      xl: "105rem"
+    };
+  }
   const cs = getComputedStyle(document.documentElement);
   const entries = ["sm", "md", "lg", "xl", "2xl"].map((k) => [k, cs.getPropertyValue(`--breakpoint-${k}`).trim()]).filter(([, v]) => !!v);
   breakpoints = Object.fromEntries(entries);

package/package.json

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