@meta-1/design 0.0.161 → 0.0.163

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.161",
+  "version": "0.0.163",
   "keywords": [
     "easykit",
     "design",

package/src/components/uix/date-picker/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useContext, useState } from "react";
+import { forwardRef, type MouseEvent, useContext, useEffect, useState } from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { addDays, format } from "date-fns";
 import get from "lodash/get";
@@ -13,52 +13,135 @@ export type DatePickerProps = {
   preset?: boolean;
   className?: string;
   allowClear?: boolean;
+  value?: Date;
+  onChange?: (value: Date | undefined) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 };
 
 export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, _ref) => {
-  const { preset = false, allowClear = false } = props;
-  const [date, setDate] = useState<Date>();
+  const {
+    placeholder,
+    format: formatProp,
+    preset = false,
+    allowClear = false,
+    className,
+    value,
+    onChange,
+    open,
+    onOpenChange,
+  } = props;
+
+  const hasValueProp = Object.hasOwn(props, "value");
+  const isValueControlled = hasValueProp;
+  const [internalDate, setInternalDate] = useState<Date | undefined>(value);
   const [presetValue, setPresetValue] = useState<string>("");
+  const hasOpenProp = Object.hasOwn(props, "open");
+  const isOpenControlled = hasOpenProp;
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  useEffect(() => {
+    if (isValueControlled) {
+      setInternalDate(value);
+    }
+  }, [isValueControlled, value]);
+
+  useEffect(() => {
+    if (isOpenControlled) {
+      setInternalOpen(Boolean(open));
+    }
+  }, [isOpenControlled, open]);
 
   const config = useContext(UIXContext);
   const locale = get(config.locale, "DatePicker.locale");
-  const formatConfig = props.format || get(config.locale, "DatePicker.format") || "yyyy-MM-dd";
+  const formatConfig = formatProp || get(config.locale, "DatePicker.format") || "yyyy-MM-dd";
   const options = get(config.locale, "DatePicker.options");
+  const selectedDate = isValueControlled ? value : internalDate;
+  const popoverOpen = isOpenControlled ? open : internalOpen;
 
-  const calendar = (
-    <Calendar
-      locale={locale}
-      mode="single"
-      onSelect={(v) => {
-        setDate(v);
-        setPresetValue("");
-      }}
-      selected={date}
-    />
-  );
+  const closePopover = () => {
+    if (!isOpenControlled) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  };
+
+  const handleSelect = (nextDate?: Date) => {
+    if (!nextDate) {
+      return;
+    }
+    if (!isValueControlled) {
+      setInternalDate(nextDate);
+    }
+    setPresetValue("");
+    onChange?.(nextDate);
+    closePopover();
+  };
+
+  const handlePresetChange = (valueStr: string) => {
+    setPresetValue(valueStr);
+    const offset = Number.parseInt(valueStr, 10);
+    if (Number.isNaN(offset)) {
+      if (!isValueControlled) {
+        setInternalDate(undefined);
+      }
+      onChange?.(undefined);
+      return;
+    }
+    const nextDate = addDays(new Date(), offset);
+    if (!isValueControlled) {
+      setInternalDate(nextDate);
+    }
+    onChange?.(nextDate);
+    closePopover();
+  };
+
+  const handleClear = (event: MouseEvent<SVGSVGElement | HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isValueControlled) {
+      setInternalDate(undefined);
+    }
+    setPresetValue("");
+    onChange?.(undefined);
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange?.(nextOpen);
+    if (!isOpenControlled) {
+      setInternalOpen(nextOpen);
+    }
+  };
+
+  const calendar = <Calendar locale={locale} mode="single" onSelect={handleSelect} selected={selectedDate} />;
 
   return (
-    <Popover>
+    <Popover onOpenChange={handleOpenChange} open={popoverOpen}>
       <PopoverTrigger asChild>
         <Button
           className={cn(
             "group w-full justify-start space-x-1 text-left font-normal",
-            !date && "text-muted-foreground",
-            props.className,
+            !selectedDate && "text-muted-foreground",
+            className,
           )}
           variant="outline"
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
-          <span className="flex-1">{date ? format(date, formatConfig) : props.placeholder}</span>
-          {allowClear && date ? (
-            <Cross2Icon
-              className="hidden group-hover:block"
-              onClick={(e) => {
-                setDate(undefined);
-                setPresetValue("");
-                e.stopPropagation();
+          <span className="flex-1">{selectedDate ? format(selectedDate, formatConfig) : placeholder}</span>
+          {allowClear && selectedDate ? (
+            <span
+              aria-label="Clear date"
+              className="hidden cursor-pointer items-center justify-center group-hover:flex"
+              onClick={handleClear}
+              onPointerDown={(pointerEvent) => {
+                pointerEvent.preventDefault();
+                pointerEvent.stopPropagation();
               }}
-            />
+              role="button"
+              tabIndex={-1}
+            >
+              <Cross2Icon />
+            </span>
           ) : null}
         </Button>
       </PopoverTrigger>
@@ -67,10 +150,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, _r
           <>
             <Select
               className="w-full"
-              onChange={(value) => {
-                setDate(addDays(new Date(), Number.parseInt(value, 10)));
-                setPresetValue(value);
-              }}
+              onChange={handlePresetChange}
               options={options || []}
               placeholder="请选择"
               value={presetValue}

package/src/components/uix/select/index.tsx

@@ -25,6 +25,8 @@ export interface SelectProps {
   empty?: ReactNode;
   allowClear?: boolean;
   triggerClassName?: string;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) => {
@@ -38,6 +40,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) =
     empty,
     allowClear,
     triggerClassName,
+    open,
+    onOpenChange,
     ...rest
   } = props;
 
@@ -60,7 +64,14 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>((props, _ref) =
   };
 
   return (
-    <UISelect {...rest} defaultValue={defaultValue} onValueChange={handleChange} value={currentValue}>
+    <UISelect
+      {...rest}
+      defaultValue={defaultValue}
+      onOpenChange={onOpenChange}
+      onValueChange={handleChange}
+      open={open}
+      value={currentValue}
+    >
       <div className={cn("relative inline-block", allowClear && currentValue ? "group" : "", className)}>
         <SelectTrigger className={cn("flex w-full", triggerClassName)}>
           <SelectValue placeholder={placeholder} />