@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/Textarea.tsx

@@ -1,102 +0,0 @@
-"use client";
-import clsx from "clsx";
-import { ComponentProps, ReactNode } from "react";
-import { baseTransition, componentGap, componentPaddingMinusBorder, typography } from "../classNames";
-
-interface TextareaProps
-  extends Omit<
-    ComponentProps<"textarea">,
-    "children" | "dangerouslySetInnerHTML" | "id"
-  > {
-  id?: string;
-  testid?: string;
-  label?: string;
-  error?: boolean;
-  caption?: ReactNode;
-}
-
-const textareaBaseClass = clsx(
-  "w-full min-h-19",
-  "rounded-base border border-border-primary-normal bg-background-primary-normal caret-text-action-normal",
-  "outline-transparent outline-2",
-  componentPaddingMinusBorder,
-  baseTransition,
-);
-
-const textareaInvalidClass = clsx(
-  "data-error:not-disabled:border-transparent data-error:not-focus:outline-border-primary-error data-error:not-focus:outline-1",
-);
-
-const textareaFocusClass = clsx(
-  "focus:border-transparent focus:outline-border-primary-focus",
-);
-
-const textareaDisabledClass = clsx(
-  "disabled:bg-background-action-secondary-disabled disabled:border-border-primary-normal",
-);
-
-const textareaReadOnlyClass = clsx(
-  "read-only:outline-none read-only:bg-transparent read-only:border-transparent read-only:appearance-none read-only:resize-none read-only:not-disabled:pl-0",
-);
-
-export const Textarea = ({
-  id,
-  testid,
-  label,
-  error,
-  caption,
-  ...props
-}: TextareaProps) => {
-  const attributes = {
-    "data-error": error || null,
-  };
-
-  return (
-    <label
-      htmlFor={id}
-      className={clsx(
-        "flex flex-col w-full",
-        "text-text-primary-normal has-disabled:text-text-primary-disabled",
-        !props.disabled &&
-          !props.readOnly &&
-          "has-[[data-error]]:text-text-primary-error",
-        componentGap
-      )}
-    >
-      {label && (
-        <span
-          className={clsx(
-            typography.label,
-            "text-inherit",
-            props.disabled || props.readOnly
-              ? "cursor-default"
-              : "cursor-pointer",
-            "inline-block",
-          )}
-        >
-          {label}
-        </span>
-      )}
-
-      <textarea
-        {...props}
-        {...attributes}
-        id={id}
-        data-testid={testid}
-        className={clsx(
-          "disabled:text-text-primary-disabled",
-          typography.paragraph,
-          textareaBaseClass,
-          textareaInvalidClass,
-          textareaFocusClass,
-          textareaDisabledClass,
-          textareaReadOnlyClass,
-        )}
-      ></textarea>
-
-      {caption && <div id={id ? `${id}-caption` : undefined} data-testid={testid ? `${testid}-caption` : undefined}>{caption}</div>}
-    </label>
-  );
-};
-
-Textarea.displayName = "Textarea";

package/src/components/Theme.tsx

@@ -1,27 +0,0 @@
-export function Theme({
-  theme,
-  children,
-  id,
-  testid,
-  ref,
-}: {
-  theme: "auto" | "brand";
-  children: React.ReactNode;
-  id?: string;
-  testid?: string;
-  ref?: React.RefObject<HTMLDivElement | null>;
-}) {
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className="contents"
-      data-theme={theme}
-      ref={(e) => {
-        if (ref) ref.current = e;
-      }}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/Time.tsx

@@ -1,460 +0,0 @@
-import { ComponentProps, ReactNode, useEffect, useRef, useState } from "react";
-import { InputBase } from "./Input";
-import { createPortal } from "react-dom";
-import clsx from "clsx";
-import { typography } from "../classNames";
-import { Icon } from "./Icon";
-import { findDocumentRoot } from "../utils";
-import { Stack } from "./Stack";
-
-type TimeProps = {
-  label?: string;
-  error?: boolean;
-  readOnly?: boolean;
-  caption?: ReactNode;
-  format?: "12h" | "24h";
-  id?: string;
-  testid?: string;
-} & Omit<
-  ComponentProps<"input">,
-  "type" | "children" | "dangerouslySetInnerHTML" | "id"
->;
-
-const timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
-
-export const Time = ({ onChange, format = "12h", id, testid, ...props }: TimeProps) => {
-  const [showTimePicker, setShowTimePicker] = useState(false);
-  const [hasInteracted, setHasInteracted] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputContainerRef = useRef<HTMLLabelElement>(null);
-  const timeRef = useRef<HTMLDivElement>(null);
-  const [timePosition, setTimePosition] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-
-  const [hour, setHour] = useState<string | null>(null);
-  const [minute, setMinute] = useState<string | null>(null);
-  const [meridiem, setMeridiem] = useState<"AM" | "PM" | null>(null);
-  const [inputValue, setInputValue] = useState("");
-
-  const is12HourFormat = format === "12h";
-
-  const formattedTime =
-    hour && minute
-      ? is12HourFormat
-        ? meridiem
-          ? `${hour}:${minute} ${meridiem}`
-          : `${hour}:${minute}`
-        : `${hour}:${minute}`
-      : "";
-
-  const updatePosition = () => {
-    if (inputContainerRef.current) {
-      const rect = inputContainerRef.current.getBoundingClientRect();
-      setTimePosition({
-        top: rect.bottom + window.scrollY + 6,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (showTimePicker) {
-      updatePosition();
-    }
-  }, [showTimePicker, is12HourFormat]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        inputRef.current &&
-        timeRef.current &&
-        !inputRef.current.contains(event.target as Node) &&
-        !timeRef.current.contains(event.target as Node)
-      ) {
-        setShowTimePicker(false);
-      }
-    };
-
-    if (showTimePicker) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showTimePicker, is12HourFormat]);
-
-  useEffect(() => {
-    if (formattedTime && hasInteracted) {
-      setInputValue(formattedTime);
-
-      onChange?.({
-        target: { value: formattedTime },
-      } as unknown as React.ChangeEvent<HTMLInputElement>);
-    }
-  }, [formattedTime, hasInteracted, onChange]);
-
-  const handleFocus = () => {
-    if (!props.disabled && !props.readOnly) {
-      setHasInteracted(true);
-      setShowTimePicker(true);
-
-      // Initialize meridiem to AM if not set and using 12-hour format
-      if (is12HourFormat && meridiem === null) {
-        setMeridiem("AM");
-      }
-    }
-  };
-
-  const handleSelect = (
-    type: "hour" | "minute" | "meridiem",
-    value: string,
-  ) => {
-    if (type === "hour") setHour(value);
-    if (type === "minute") setMinute(value);
-    if (type === "meridiem") setMeridiem(value as "AM" | "PM");
-
-    setTimeout(() => {
-      const allSet =
-        (type === "hour" ? value : hour) &&
-        (type === "minute" ? value : minute) &&
-        (is12HourFormat ? (type === "meridiem" ? value : meridiem) : true);
-
-      if (allSet) {
-        setShowTimePicker(false);
-      }
-    }, 100);
-  };
-
-  useEffect(() => {
-    if (!showTimePicker && formattedTime) {
-      setInputValue(formattedTime);
-    }
-  }, [showTimePicker, formattedTime]);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value
-      .toUpperCase()
-      .replace(/[^0-9:APM ]/gi, "")
-      .trim();
-    setInputValue(value);
-
-    // Check if input is cleared
-    if (value === "") {
-      setHour(null);
-      setMinute(null);
-      setMeridiem(null);
-      setShowTimePicker(true); // Keep dropdown open
-    }
-
-    const match = value.match(
-      is12HourFormat
-        ? /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/
-        : /^(\d{1,2}):(\d{2})$/,
-    );
-
-    if (match) {
-      const [, hRaw, mRaw, mer] = match;
-      const h = parseInt(hRaw, 10);
-      const m = parseInt(mRaw, 10);
-
-      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
-        let hStr: string;
-        const mStr = m.toString().padStart(2, "0");
-        let meridiemValue = mer as "AM" | "PM" | undefined;
-
-        if (is12HourFormat) {
-          hStr = (h % 12 || 12).toString().padStart(2, "0");
-          if (h > 12) {
-            meridiemValue = "PM";
-          }
-          setHour(hStr);
-          setMinute(mStr);
-          if (meridiemValue) {
-            setMeridiem(meridiemValue);
-          }
-        } else {
-          hStr = h.toString().padStart(2, "0");
-          setHour(hStr);
-          setMinute(mStr);
-        }
-      }
-    }
-
-    onChange?.(e);
-  };
-
-  const selectedRefs = {
-    hour: useRef<HTMLButtonElement | null>(null),
-    minute: useRef<HTMLButtonElement | null>(null),
-    meridiem: useRef<HTMLButtonElement | null>(null),
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      setShowTimePicker(false);
-      return;
-    }
-
-    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-
-    e.preventDefault();
-
-    let h: number;
-    let m: number;
-    let mer: "AM" | "PM";
-
-    if (
-      hour === null ||
-      minute === null ||
-      (is12HourFormat && meridiem === null)
-    ) {
-      const now = new Date();
-      h = now.getHours();
-      m = Math.round(now.getMinutes() / 5) * 5;
-      if (m === 60) {
-        m = 0;
-        h += 1;
-      }
-      if (is12HourFormat) {
-        mer = h >= 12 ? "PM" : "AM";
-        h = h % 12 || 12;
-      } else {
-        mer = "AM";
-      }
-    } else {
-      h = parseInt(hour, 10);
-      m = parseInt(minute, 10);
-      mer = (meridiem as "AM" | "PM") || "AM";
-    }
-
-    const step = 5;
-    const remainder = m % step;
-    m +=
-      e.key === "ArrowDown"
-        ? remainder === 0
-          ? step
-          : step - remainder
-        : -(remainder === 0 ? step : remainder);
-
-    if (m >= 60) {
-      m -= 60;
-      h += 1;
-    } else if (m < 0) {
-      m += 60;
-      h -= 1;
-    }
-
-    if (is12HourFormat) {
-      if (h > 12) {
-        h = 1;
-        mer = mer === "AM" ? "PM" : "AM";
-      } else if (h <= 0) {
-        h = 12;
-        mer = mer === "AM" ? "PM" : "AM";
-      }
-    } else {
-      h = (h + 24) % 24;
-    }
-
-    setHour(h.toString().padStart(2, "0"));
-    setMinute(m.toString().padStart(2, "0"));
-    if (is12HourFormat) setMeridiem(mer);
-  };
-
-  useEffect(() => {
-    if (showTimePicker) {
-      // Use a slight delay to ensure DOM is updated
-      setTimeout(() => {
-        selectedRefs.hour.current?.scrollIntoView({
-          block: "nearest",
-          behavior: "instant",
-        });
-        selectedRefs.minute.current?.scrollIntoView({
-          block: "nearest",
-          behavior: "instant",
-        });
-        if (is12HourFormat) {
-          selectedRefs.meridiem.current?.scrollIntoView({
-            block: "nearest",
-            behavior: "instant",
-          });
-        }
-      }, 0);
-    }
-  }, [
-    showTimePicker,
-    is12HourFormat,
-    selectedRefs.hour,
-    selectedRefs.minute,
-    selectedRefs.meridiem,
-  ]);
-  const renderOptions = (
-    items: string[],
-    type: "hour" | "minute" | "meridiem",
-  ) =>
-    items.map((val) => {
-      const isSelected =
-        (type === "hour" && val === hour) ||
-        (type === "minute" && val === minute) ||
-        (type === "meridiem" && val === meridiem);
-
-      return (
-        <TimeCell
-          key={val}
-          id={id ? `${id}-${type}-${val}` : undefined}
-          testid={testid ? `${testid}-${type}-${val}` : undefined}
-          selected={isSelected}
-          ref={
-            isSelected
-              ? (el) => {
-                  selectedRefs[type].current = el;
-                }
-              : null
-          }
-          onClick={() => handleSelect(type, val)}
-          className={clsx("!size-10 cursor-pointer", typography.caption)}
-        >
-          {val}
-        </TimeCell>
-      );
-    });
-
-  return (
-    <div className="relative max-w-38">
-      <InputBase
-        {...props}
-        id={id}
-        testid={testid}
-        ref={inputRef}
-        inputContainerRef={inputContainerRef}
-        value={inputValue}
-        placeholder={is12HourFormat ? "hh:mm am" : "hh:mm"}
-        after={
-          <span className="text-icon-primary-normal contents">
-            <Icon name="schedule" />
-          </span>
-        }
-        onFocus={handleFocus}
-        caption={props.caption}
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown}
-        type="text"
-      />
-      {showTimePicker &&
-        createPortal(
-          <Stack
-            id={id ? `${id}-timepicker` : undefined}
-            elevation={4}
-            height={240}
-            position="absolute"
-            backgroundColor="background-grouped-primary-normal"
-            overflowX="hidden"
-            overflowY="hidden"
-            zIndex={50}
-            top={timePosition.top}
-            left={timePosition.left}
-            minWidth={timePosition.width}
-            maxWidth={0}
-            rounded
-          >
-            <div ref={timeRef} className="px-4 flex h-60">
-              <div className={clsx(timePickerScrollableStyle)}>
-                {renderOptions(
-                  Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) =>
-                    (i + (is12HourFormat ? 1 : 0)).toString().padStart(2, "0"),
-                  ),
-                  "hour",
-                )}
-              </div>
-              <div className={clsx(timePickerScrollableStyle)}>
-                {renderOptions(
-                  Array.from({ length: 12 }, (_, i) =>
-                    (i * 5).toString().padStart(2, "0"),
-                  ),
-                  "minute",
-                )}
-              </div>
-              {is12HourFormat && (
-                <div className="py-4">
-                  {renderOptions(["AM", "PM"], "meridiem")}
-                </div>
-              )}
-            </div>
-          </Stack>,
-          findDocumentRoot(timeRef.current),
-        )}
-    </div>
-  );
-};
-
-type TimeCellProps = {
-  id?: string;
-  testid?: string;
-  selected?: boolean;
-  children?: React.ReactNode;
-  start?: boolean;
-  intermediate?: boolean;
-  end?: boolean;
-  disabled?: boolean;
-  today?: boolean;
-  onClick?: () => void;
-  onHover?: () => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  className?: string;
-  ref?: React.Ref<HTMLButtonElement> | undefined;
-};
-
-function TimeCell({
-  id,
-  testid,
-  selected = false,
-  start = false,
-  intermediate = false,
-  end = false,
-  today = false,
-  disabled = false,
-  onClick,
-  onHover,
-  onKeyDown,
-  children,
-  className,
-  ref,
-  ...props
-}: TimeCellProps) {
-  const isDefault = !selected && !start && !intermediate && !end && !today;
-  const isToday = today && !selected && !start && !intermediate && !end;
-  return (
-    <button
-      id={id}
-      data-testid={testid}
-      onPointerOver={onHover}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      disabled={disabled}
-      ref={ref}
-      className={clsx(
-        "w-full h-full aspect-square flex items-center justify-center ",
-        isDefault &&
-          "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
-        isToday &&
-          "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
-        selected &&
-          "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
-        start &&
-          "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
-        end &&
-          "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
-        intermediate && "bg-action-100 border-y border-action-400",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}