@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,186 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Time } from "@internationalized/date";
+import { useTimeFieldState } from "@react-stately/datepicker";
+import { clsx } from "clsx";
+import { useRef, useEffect } from "react";
+import { useLocale, useTimeField, useDateSegment } from "react-aria";
+import { ChevronDownIcon } from "../../../../assets/icons/ChevronDown.js";
+import { ChevronUpIcon } from "../../../../assets/icons/ChevronUp.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { getPlaceholder } from "./DateSegmentItem.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
+import { useLongPressRepeat } from "../../../../hooks/useLongPressRepeat.js";
+const INCREMENT_STEP_SIZE = 5;
+const TimePickerForm = ({ state, datePickerState }) => {
+  const isDesktop = useBreakpoint("md");
+  const { locale } = useLocale();
+  const fieldState = useTimeFieldState({
+    locale,
+    defaultValue: datePickerState?.timeValue,
+    onChange: (value) => {
+      datePickerState?.setTimeValue(value ?? new Time(0, 0));
+    },
+    hideTimeZone: true
+  });
+  const ref = useRef(null);
+  const innerState = state ?? fieldState;
+  const { fieldProps } = useTimeField({ "aria-label": "Time Picker" }, innerState, ref);
+  const getAutoFocus = (index) => {
+    if (!isDesktop) {
+      return false;
+    }
+    return index === innerState.segments.findIndex(({ type }) => ["hour", "minute", "dayPeriod"].includes(type));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full p-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-4", children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
+      TimeSegmentButton,
+      {
+        segment,
+        state: innerState,
+        type: "increment"
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...fieldProps,
+        className: "flex items-center justify-center gap-4 py-2",
+        children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
+          TimeSegmentInput,
+          {
+            segment,
+            state: innerState,
+            autoFocus: getAutoFocus(i)
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-4", children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
+      TimeSegmentButton,
+      {
+        segment,
+        state: innerState,
+        type: "decrement"
+      },
+      i
+    )) })
+  ] });
+};
+const TimeSegmentInput = ({ segment, state, autoFocus }) => {
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  const isDesktop = useBreakpoint("md");
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current?.focus();
+    }
+  }, [autoFocus]);
+  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
+    return null;
+  }
+  if (segment.type === "literal") {
+    if (!showSegmentText(segment.text)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex flex-col text-center",
+        ref,
+        children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            as: "span",
+            variant: "prominent-1",
+            size: "label-2",
+            className: "text-text-default-2",
+            children: segment.text
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center gap-2", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...isDesktop && segmentProps,
+      className: clsx(
+        "w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center",
+        "font-labels-default text-text-default-3",
+        "border border-input-filled-idle border-solid",
+        "hover:border-interactive-contained-primary-hover",
+        "focus-within:border-interactive-contained-primary-idle focus-within:outline-none"
+      ),
+      children: getPlaceholder(segment) ?? segment.text
+    }
+  ) });
+};
+const TimeSegmentButton = ({ segment, state, type }) => {
+  const stateRef = useRef(state);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  const onPress = (isLongPress) => {
+    if (isLongPress && segment.type === "minute") {
+      const currentValue = stateRef.current.segments.find((item) => item.type === "minute")?.value ?? 0;
+      const diff = type === "increment" ? INCREMENT_STEP_SIZE : -INCREMENT_STEP_SIZE;
+      const newValue = Math.round((currentValue + diff) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE;
+      const normalizedValue = (newValue % 60 + 60) % 60;
+      stateRef.current.setSegment(segment.type, normalizedValue);
+    } else {
+      stateRef.current[type](segment.type);
+    }
+  };
+  const { onPressStart, onPressEnd } = useLongPressRepeat({
+    onPress,
+    enabled: segment.type !== "dayPeriod",
+    timeout: 300,
+    interval: 300
+  });
+  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
+    return null;
+  }
+  if (segment.type === "literal") {
+    if (!showSegmentText(segment.text)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: "flex shrink-0", children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        variant: "prominent-1",
+        size: "label-2",
+        className: "invisible text-text-default-2",
+        "aria-hidden": true,
+        children: segment.text
+      }
+    ) });
+  }
+  const Icon = type === "increment" ? ChevronUpIcon : ChevronDownIcon;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-11 select-none items-center justify-center",
+      onContextMenu: (e) => e.preventDefault(),
+      children: /* @__PURE__ */ jsx(
+        InlineIconButton,
+        {
+          label: "",
+          color: "secondary",
+          onPressStart,
+          onPressEnd,
+          icon: Icon
+        }
+      )
+    }
+  );
+};
+const showSegmentText = (text) => !/[\u2066\u2069]/.test(text);
+export {
+  TimePickerForm
+};

package/{src → dist}/components/inputs/DateTime/shared/TimePickerInput.d.ts

@@ -1,8 +1,8 @@
 import { Ref } from 'react';
 import { DateFieldAria } from 'react-aria';
 import { TimeFieldState } from 'react-stately';
-import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
+import { InputVariantProps } from '../../shared/input.cva';
 interface DatePickerInputProps extends InputVariantProps {
     ref?: Ref<HTMLDivElement>;
     fieldProps: DateFieldAria["fieldProps"];

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

@@ -0,0 +1,114 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState, useMemo } from "react";
+import { useHover, useFocusWithin, useFocusVisible } from "react-aria";
+import useMeasure from "react-use-measure";
+import { ClockIcon } from "../../../../assets/icons/Clock.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+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 { UIStyle } from "../../../../config/uiStyle.context.js";
+const TimePickerInput = ({
+  ref,
+  as,
+  fieldProps,
+  state,
+  isDisabled,
+  isInvalid,
+  disableDropdown,
+  variant,
+  size,
+  isClearable,
+  headerProps,
+  onPress,
+  ...props
+}) => {
+  const inputCva = useInputCva();
+  const uiStyle = UIStyle.useConfig();
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const [isFocused, setIsFocused] = useState(false);
+  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+  const { isFocusVisible } = useFocusVisible();
+  const [labelContentRef, { width: labelWidth }] = useMeasure();
+  const hidePlaceholder = as === "floating" && !state.value && !isFocused;
+  const style = useMemo(() => {
+    const paddingLeft = as === "filter" ? `calc(var(${inputSideCva({ size, type: "var" })}) + ${labelWidth}px)` : "0px";
+    return {
+      paddingLeft
+    };
+  }, [labelWidth, as, size, inputSideCva]);
+  const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: inputCva({
+        variant,
+        as,
+        size,
+        ...props,
+        className: clsx(
+          "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2"
+        )
+      }),
+      "data-rac": "",
+      "data-hovered": isHovered || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-focus-within": isFocused || void 0,
+      "data-focus-visible": isFocused && isFocusVisible || void 0,
+      "data-has-selection": state.value !== null || void 0,
+      ...fieldProps,
+      ...focusWithinProps,
+      ...hoverProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
+            FormFieldLabel,
+            {
+              ref: labelContentRef,
+              as,
+              ...headerProps
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+            TimeField,
+            {
+              fieldProps,
+              state,
+              isDisabled,
+              hidePlaceholder
+            }
+          ) })
+        ] }),
+        /* @__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
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TimePickerInput
+};

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

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+import { today } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { ListBox, ListBoxItem } from "react-aria-components";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
+const YearPicker = ({ state, onSelectionChange }) => {
+  const formatter = useDateFormatter({
+    year: "numeric",
+    timeZone: state.timeZone
+  });
+  const years = useMemo(() => {
+    const arr = [];
+    for (let i = -100; i <= 100; i++) {
+      const date = today(state.timeZone).add({ years: i });
+      arr.push({
+        value: date.year,
+        formatted: formatter.format(date.toDate(state.timeZone))
+      });
+    }
+    return arr;
+  }, [state.timeZone, formatter]);
+  const isYearDisabled = (year) => {
+    if (state.minValue && year < state.minValue.year) {
+      return true;
+    }
+    if (state.maxValue && year > state.maxValue.year) {
+      return true;
+    }
+    return false;
+  };
+  const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
+  const { ref } = useScrollableListBox();
+  return /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      ref,
+      autoFocus: true,
+      "aria-label": "Year",
+      selectionMode: "single",
+      selectedKeys: [selectedYear],
+      onSelectionChange: (key) => {
+        if (key === "all") {
+          return;
+        }
+        const index = [...key][0];
+        if (typeof index === "number") {
+          const date = state.focusedDate.set({ year: years[index].value });
+          state.setFocusedDate(date);
+        }
+        onSelectionChange(key);
+      },
+      className: "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80",
+      children: years.map((year, index) => {
+        const isDisabled = isYearDisabled(year.value);
+        return /* @__PURE__ */ jsx(
+          ListBoxItem,
+          {
+            id: index,
+            textValue: year.formatted,
+            isDisabled,
+            className: clsx(
+              "flex px-4 py-2 text-interactive-text-secondary-idle outline-none",
+              "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0",
+              "hover:text-interactive-text-secondary-hover",
+              "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
+              "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
+              isDisabled ? "cursor-default opacity-50" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                as: "span",
+                size: "label-2",
+                children: year.formatted
+              }
+            )
+          },
+          index
+        );
+      })
+    }
+  );
+};
+export {
+  YearPicker
+};

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

@@ -0,0 +1,254 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useState, useCallback } from "react";
+import { DropZone } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { FormField } from "../FormField/FormField.js";
+import { ns } from "../../../config/i18n.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { FileUtils } from "../../../utils/file.utils.js";
+import { FileCardList } from "./shared/FileCardList.js";
+import { FileUploadContent } from "./shared/FileUploadContent.js";
+import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty.js";
+import { fileUploadDropZone } from "./shared/fileUpload.cva.js";
+const FileUploadBase = (props) => {
+  const { t } = useTranslation(ns);
+  const {
+    ref: _ref,
+    label,
+    tooltipText,
+    variant = "vertical",
+    as = "button",
+    helperText,
+    isRequired,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    allowsMultiple = false,
+    hideLabel,
+    acceptedFileTypes,
+    emptyText = t(($) => $.ui.fileUpload.emptyText),
+    uploadText = t(($) => $.ui.fileUpload.uploadText),
+    browseText = t(($) => $.ui.fileUpload.browse),
+    fileUpload,
+    fileRemove,
+    children,
+    listRenderer,
+    ...rest
+  } = props;
+  const ui = UIConfig.useConfig();
+  const [uploadState, setUploadState] = useState(props.value ?? []);
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    isHeaderHidden,
+    hideLabel: hideLabel ?? ui.input.hideLabel,
+    isDisabled,
+    headerClassName,
+    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;
+      }
+      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)
+                );
+              },
+              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]
+  );
+  const handleDrop = async (e) => {
+    if (!e.items) {
+      return;
+    }
+    const promises = [];
+    e.items.forEach((item) => {
+      if (item.kind === "file") {
+        promises.push(item.getFile());
+      }
+    });
+    const inputFiles = await Promise.all(promises);
+    handleUpload(inputFiles);
+  };
+  const handleRemove = useCallback(
+    (id) => {
+      fileRemove?.({ id });
+      setUploadState((prev) => prev.filter((state) => state.id !== id));
+    },
+    [fileRemove]
+  );
+  const handleCancelUpload = useCallback(
+    (index) => {
+      const findState = uploadState[index];
+      if (findState) {
+        findState.abortController?.abort("canceled by user");
+        setUploadState((prev) => prev.filter((_, i) => i !== index));
+      }
+    },
+    [uploadState]
+  );
+  return /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      ...formFieldProps,
+      labelProps,
+      className: clsx("w-full", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap", children: /* @__PURE__ */ jsx(
+          DropZone,
+          {
+            ...rest,
+            "data-rac": "",
+            "data-disabled": isDisabled || void 0,
+            "data-invalid": !!error || void 0,
+            "data-multiple": allowsMultiple || void 0,
+            "data-has-files": uploadState.length > 0 || void 0,
+            isDisabled,
+            onDrop: handleDrop,
+            className: fileUploadDropZone({ variant, isContainer: !!children, className: "group/file-upload-drop-zone" }),
+            children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              children({
+                files: uploadState,
+                onRemove: handleRemove,
+                onCancel: handleCancelUpload
+              }),
+              /* @__PURE__ */ jsx(
+                FileUploadContentEmpty,
+                {
+                  as,
+                  variant,
+                  singleFile: true,
+                  hideButton: true,
+                  isDisabled,
+                  title: emptyText,
+                  uploadText,
+                  browseText,
+                  className: "-translate-x-1/2 -translate-y-1/2 group-data-[drop-target]/file-upload-drop-zone:!flex absolute top-1/2 left-1/2 z-50 hidden flex-col"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
+              FileUploadContent,
+              {
+                ...rest,
+                variant,
+                as,
+                isDisabled,
+                browseText,
+                uploadText,
+                emptyText,
+                uploadState,
+                handleSelect,
+                handleCancelUpload,
+                handleRemove,
+                acceptedFileTypes,
+                allowsMultiple
+              }
+            )
+          }
+        ) }),
+        !children && allowsMultiple && uploadState.length > 0 && (listRenderer ? listRenderer({
+          files: uploadState,
+          onRemove: handleRemove,
+          onCancel: handleCancelUpload
+        }) : /* @__PURE__ */ jsx(
+          FileCardList,
+          {
+            as,
+            uploadState,
+            isDisabled,
+            onRemove: handleRemove,
+            onCancel: handleCancelUpload
+          }
+        ))
+      ]
+    }
+  );
+};
+const FileUpload = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          FileUploadBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(FileUploadBase, { ...props });
+};
+export {
+  FileUpload
+};

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

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { FileUpload } from "./FileUpload.js";
+const FileUploadContainer = (props) => {
+  return /* @__PURE__ */ jsx(
+    FileUpload,
+    {
+      label: "",
+      hideLabel: true,
+      variant: "vertical",
+      as: "button",
+      ...props
+    }
+  );
+};
+export {
+  FileUploadContainer
+};