@optiaxiom/react 1.9.37 → 1.9.38

package/dist/esm/packages/react/src/date-input/DateInput.js

@@ -1,194 +1,157 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { useId } from '@radix-ui/react-id';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import clsx from 'clsx';
-import { forwardRef, useState, useRef } from 'react';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Calendar } from '../calendar/Calendar.js';
-import { useFieldContext } from '../field/FieldContext.js';
-import { useObserveValue } from '../hooks/useObserveValue.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { toInstant } from '../utils/toInstant.js';
-import { toPlainDate } from '../utils/toPlainDate.js';
-import { toPlainDateTime } from '../utils/toPlainDateTime.js';
-import { IconCalendar } from '../icons/IconCalendar.js';
-import { IconX } from '../icons/IconX.js';
-import { Input } from '../input/Input.js';
-import '../input/InputAddon.js';
-import '../input/InputControl.js';
-import '../input/InputRoot.js';
-import { Popover } from '../popover/Popover.js';
-import { PopoverAnchor } from '../popover/PopoverAnchor.js';
-import { PopoverContent } from '../popover/PopoverContent.js';
-import { PopoverTrigger } from '../popover/PopoverTrigger.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { input, date, picker, clear } from './DateInput-css.js';
-
-const DateInput = forwardRef(
-  ({
-    className,
-    disabled,
-    holiday,
-    max: maxProp,
-    min: minProp,
-    onChange,
-    placeholder,
-    step,
-    type = "date",
-    weekend,
-    ...props
-  }, outerRef) => {
-    const { labelId: fieldLabelId } = useFieldContext(
-      "@optiaxiom/react/DateInput"
-    );
-    const labelId = useId();
-    const [open, setOpen] = useState(false);
-    const hasInteractedOutsideRef = useRef(false);
-    const pickerRef = useRef(null);
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    const [value, setValue] = useControllableState({
-      caller: "@optiaxiom/react/DateInput",
-      defaultProp: props.defaultValue,
-      prop: props.value
-    });
-    const forceValueChange = useObserveValue(innerRef, setValue);
-    const instant = typeof value === "string" ? toInstant(value) ?? null : null;
-    const max = maxProp || "2100-12-31";
-    const min = minProp || "1900-01-01";
-    const maxDate = toInstant(max) ;
-    const minDate = toInstant(min) ;
-    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
-      /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(
-        Input,
-        {
-          addonAfter: value && !props.readOnly && !props.required && /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "subtle",
-              "aria-label": "Clear",
-              icon: /* @__PURE__ */ jsx(IconX, {}),
-              onPointerDown: (event) => {
-                event.preventDefault();
-                forceValueChange("");
-              },
-              tabIndex: -1,
-              ...clear()
-            }
-          ),
-          addonBefore: /* @__PURE__ */ jsx(
-            PopoverTrigger,
-            {
-              "aria-label": "Show date picker",
-              asChild: true,
-              onClick: (event) => {
-                if (props.readOnly) {
-                  event.preventDefault();
-                }
-              },
-              ref: pickerRef,
-              role: "img",
-              ...picker(),
-              children: /* @__PURE__ */ jsx(IconCalendar, {})
-            }
-          ),
-          asChild: true,
-          disabled,
-          max,
-          min,
-          onChange: (event) => {
-            onChange?.(event);
-            setValue(event.target.value);
-          },
-          onClick: (e) => {
-            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
-              e.preventDefault();
-            }
-          },
-          onKeyDown: (e) => {
-            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
-              if (e.key === " ") {
-                e.preventDefault();
-                if (!props.readOnly) {
-                  setOpen(true);
-                }
-              } else if (e.key === "Escape") {
-                e.preventDefault();
-                setOpen(false);
-              }
-            }
-          },
-          ref,
-          step,
-          type,
-          ...date({}, className),
-          ...props,
-          children: /* @__PURE__ */ jsx("input", { ...input() })
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          "aria-labelledby": clsx(labelId, fieldLabelId),
-          gap: "8",
-          onCloseAutoFocus: (event) => {
-            if (hasInteractedOutsideRef.current) {
-              hasInteractedOutsideRef.current = false;
-            } else {
-              event.preventDefault();
-              innerRef.current?.focus();
-            }
-          },
-          onInteractOutside: (event) => {
-            if (!(event.target instanceof Node && pickerRef.current?.contains(event.target))) {
-              hasInteractedOutsideRef.current = true;
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, id: labelId, children: /* @__PURE__ */ jsx("h2", { children: "Calendar" }) }),
-            /* @__PURE__ */ jsx(
-              Calendar,
-              {
-                holiday,
-                max: maxDate,
-                min: minDate,
-                onValueChange: (date) => {
-                  if (!date) {
-                    return;
-                  }
-                  forceValueChange(
-                    type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date)
-                  );
-                  if (type === "date") {
-                    setOpen(false);
-                  }
-                },
-                placeholder,
-                step,
-                type,
-                value: instant,
-                weekend
-              }
-            ),
-            type === "datetime-local" && /* @__PURE__ */ jsx(
-              Button,
-              {
-                flex: "none",
-                justifyContent: "center",
-                onClick: () => setOpen(false),
-                children: "Done"
-              }
-            )
-          ]
-        }
-      )
-    ] });
-  }
-);
+import { toInstant } from "../utils/toInstant.js";
+import { toPlainDateTime } from "../utils/toPlainDateTime.js";
+import { toPlainDate } from "../utils/toPlainDate.js";
+import { Button } from "../button/Button.js";
+import { IconX } from "../icons/IconX.js";
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { useObserveValue } from "../hooks/useObserveValue.js";
+import { Popover } from "../popover/Popover.js";
+import { PopoverAnchor } from "../popover/PopoverAnchor.js";
+import { PopoverContent } from "../popover/PopoverContent.js";
+import { PopoverTrigger } from "../popover/PopoverTrigger.js";
+import { Input } from "../input/Input.js";
+import { Calendar } from "../calendar/Calendar.js";
+import { IconCalendar } from "../icons/IconCalendar.js";
+import { clear, date, input, picker } from "./DateInput-css.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/date-input/DateInput.tsx
+/**
+* Input field with calendar that lets user enter dates.
+*
+* Important Notes:
+* - The `placeholder` prop sets the default date/time in the calendar picker,
+*   NOT hint text for the input field (native date inputs don't support that)
+* - Don't use `addonBefore` as it will override the calendar icon that opens
+*   the date picker popover
+*
+* @category form
+* @category date
+* @since 1.4.0
+*/
+const DateInput = forwardRef(({ className, disabled, holiday, max: maxProp, min: minProp, onChange, placeholder, step, type = "date", weekend, ...props }, outerRef) => {
+	const { labelId: fieldLabelId } = useFieldContext("@optiaxiom/react/DateInput");
+	const labelId = useId();
+	const [open, setOpen] = useState(false);
+	const hasInteractedOutsideRef = useRef(false);
+	const pickerRef = useRef(null);
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	const [value, setValue] = useControllableState({
+		caller: "@optiaxiom/react/DateInput",
+		defaultProp: props.defaultValue,
+		prop: props.value
+	});
+	const forceValueChange = useObserveValue(innerRef, setValue);
+	const instant = typeof value === "string" ? toInstant(value) ?? null : null;
+	const max = maxProp || "2100-12-31";
+	const min = minProp || "1900-01-01";
+	const maxDate = max ? toInstant(max) : void 0;
+	const minDate = min ? toInstant(min) : void 0;
+	return /* @__PURE__ */ jsxs(Popover, {
+		onOpenChange: setOpen,
+		open: !disabled && open,
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(Input, {
+			addonAfter: value && !props.readOnly && !props.required && /* @__PURE__ */ jsx(Button, {
+				appearance: "subtle",
+				"aria-label": "Clear",
+				icon: /* @__PURE__ */ jsx(IconX, {}),
+				onPointerDown: (event) => {
+					event.preventDefault();
+					forceValueChange("");
+				},
+				tabIndex: -1,
+				...clear()
+			}),
+			addonBefore: /* @__PURE__ */ jsx(PopoverTrigger, {
+				"aria-label": "Show date picker",
+				asChild: true,
+				onClick: (event) => {
+					if (props.readOnly) event.preventDefault();
+				},
+				ref: pickerRef,
+				role: "img",
+				...picker(),
+				children: /* @__PURE__ */ jsx(IconCalendar, {})
+			}),
+			asChild: true,
+			disabled,
+			max,
+			min,
+			onChange: (event) => {
+				onChange?.(event);
+				setValue(event.target.value);
+			},
+			onClick: (e) => {
+				if (CSS.supports("selector(::-webkit-datetime-edit)")) e.preventDefault();
+			},
+			onKeyDown: (e) => {
+				if (CSS.supports("selector(::-webkit-datetime-edit)")) {
+					if (e.key === " ") {
+						e.preventDefault();
+						if (!props.readOnly) setOpen(true);
+					} else if (e.key === "Escape") {
+						e.preventDefault();
+						setOpen(false);
+					}
+				}
+			},
+			ref,
+			step,
+			type,
+			...date({}, className),
+			...props,
+			children: /* @__PURE__ */ jsx("input", { ...input() })
+		}) }), /* @__PURE__ */ jsxs(PopoverContent, {
+			"aria-labelledby": clsx(labelId, fieldLabelId),
+			gap: "8",
+			onCloseAutoFocus: (event) => {
+				if (hasInteractedOutsideRef.current) hasInteractedOutsideRef.current = false;
+				else {
+					event.preventDefault();
+					innerRef.current?.focus();
+				}
+			},
+			onInteractOutside: (event) => {
+				if (!(event.target instanceof Node && pickerRef.current?.contains(event.target))) hasInteractedOutsideRef.current = true;
+			},
+			children: [
+				/* @__PURE__ */ jsx(VisuallyHidden, {
+					asChild: true,
+					id: labelId,
+					children: /* @__PURE__ */ jsx("h2", { children: "Calendar" })
+				}),
+				/* @__PURE__ */ jsx(Calendar, {
+					holiday,
+					max: maxDate,
+					min: minDate,
+					onValueChange: (date) => {
+						if (!date) return;
+						forceValueChange(type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date));
+						if (type === "date") setOpen(false);
+					},
+					placeholder,
+					step,
+					type,
+					value: instant,
+					weekend
+				}),
+				type === "datetime-local" && /* @__PURE__ */ jsx(Button, {
+					flex: "none",
+					justifyContent: "center",
+					onClick: () => setOpen(false),
+					children: "Done"
+				})
+			]
+		})]
+	});
+});
 DateInput.displayName = "@optiaxiom/react/DateInput";
-
+//#endregion
 export { DateInput };

package/dist/esm/packages/react/src/date-range-picker/DateRangePicker.js

@@ -1,71 +1,64 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useRef, useState, useEffect } from 'react';
-import { useEffectEvent } from '../hooks/useEffectEvent.js';
-import '../field/FieldContext.js';
-import '../utils/conditions.js';
-import '../utils/isHoverSupported.js';
-import { toInstant } from '../utils/toInstant.js';
-import { toPlainDate } from '../utils/toPlainDate.js';
-import { Popover } from '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import '../popover/PopoverContent.js';
-import '../popover/PopoverTrigger.js';
-import { DateRangePickerProvider } from './DateRangePickerContext.js';
-
-function DateRangePicker({
-  children,
-  defaultOpen = false,
-  defaultValue = null,
-  disabled,
-  onOpenChange,
-  onValueChange,
-  open: openProp,
-  value: valueProp,
-  ...props
-}) {
-  const triggerRef = useRef(null);
-  const [from, setFrom] = useState();
-  const [open, setOpen] = useControllableState({
-    caller: "@optiaxiom/react/DateRangePicker",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const [value, setValue] = useControllableState({
-    caller: "@optiaxiom/react/DateRangePicker",
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: valueProp
-  });
-  const setValueStable = useEffectEvent(setValue);
-  useEffect(() => {
-    if (open) {
-      setFrom(void 0);
-    }
-  }, [open]);
-  useEffect(() => {
-    if (!open && from) {
-      const end = toInstant(toPlainDate(from) + "T23:59:59.999");
-      if (end) {
-        setValueStable({ from, to: end });
-      }
-    }
-  }, [from, open]);
-  return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
-    DateRangePickerProvider,
-    {
-      disabled,
-      setFrom,
-      setOpen,
-      setValue,
-      triggerRef,
-      value,
-      children
-    }
-  ) });
+import { toInstant } from "../utils/toInstant.js";
+import { toPlainDate } from "../utils/toPlainDate.js";
+import { useEffectEvent } from "../hooks/useEffectEvent.js";
+import { Popover } from "../popover/Popover.js";
+import { DateRangePickerProvider } from "./DateRangePickerContext.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/date-range-picker/DateRangePicker.tsx
+/**
+* Calendar popover that lets user pick date ranges.
+*
+* @category date
+* @group DateRangePicker
+* @since 1.4.0
+* @extends Popover
+*/
+function DateRangePicker({ children, defaultOpen = false, defaultValue = null, disabled, onOpenChange, onValueChange, open: openProp, value: valueProp, ...props }) {
+	const triggerRef = useRef(null);
+	const [from, setFrom] = useState();
+	const [open, setOpen] = useControllableState({
+		caller: "@optiaxiom/react/DateRangePicker",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const [value, setValue] = useControllableState({
+		caller: "@optiaxiom/react/DateRangePicker",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const setValueStable = useEffectEvent(setValue);
+	useEffect(() => {
+		if (open) setFrom(void 0);
+	}, [open]);
+	useEffect(() => {
+		if (!open && from) {
+			const end = toInstant(toPlainDate(from) + "T23:59:59.999");
+			if (end) setValueStable({
+				from,
+				to: end
+			});
+		}
+	}, [from, open]);
+	return /* @__PURE__ */ jsx(Popover, {
+		onOpenChange: setOpen,
+		open,
+		...props,
+		children: /* @__PURE__ */ jsx(DateRangePickerProvider, {
+			disabled,
+			setFrom,
+			setOpen,
+			setValue,
+			triggerRef,
+			value,
+			children
+		})
+	});
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
-
+//#endregion
 export { DateRangePicker };

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,6 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-vDw4DFSx.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var panels = recipeRuntime({base:[{alignItems:'stretch',gap:'0'}]});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-D2KEETGI.css";
+//#region src/date-range-picker/DateRangePickerContent.css.ts
+var panels = recipeRuntime({ base: [{
+	alignItems: "stretch",
+	gap: "0"
+}] });
+//#endregion
 export { panels };

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent.js

@@ -1,79 +1,64 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { Calendar } from '../calendar/Calendar.js';
-import { useFieldContext } from '../field/FieldContext.js';
-import { Group } from '../group/Group.js';
-import '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import { PopoverContent } from '../popover/PopoverContent.js';
-import '../popover/PopoverTrigger.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { panels } from './DateRangePickerContent-css.js';
-import { useDateRangePickerContext } from './DateRangePickerContext.js';
-
-const DateRangePickerContent = forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    "aria-label": ariaLabel,
-    children,
-    holiday,
-    max,
-    min,
-    today,
-    weekend,
-    ...props
-  }, ref) => {
-    const { labelId: fieldLabelId } = useFieldContext(
-      "@optiaxiom/react/DateRangePickerContent"
-    );
-    const { setFrom, setOpen, setValue, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerContent");
-    const labelId = useId();
-    return /* @__PURE__ */ jsxs(
-      PopoverContent,
-      {
-        "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
-        gap: "8",
-        maxW: void 0,
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: ariaLabel || "Calendar" }),
-          /* @__PURE__ */ jsxs(Group, { ...panels(), children: [
-            addonBefore,
-            /* @__PURE__ */ jsx(
-              Calendar,
-              {
-                alignSelf: "start",
-                holiday,
-                max,
-                min,
-                mode: "range",
-                onDateSelect: (date) => {
-                  setFrom((from) => from ? void 0 : date);
-                },
-                onValueChange: (value2) => {
-                  setValue(value2);
-                  requestAnimationFrame(() => {
-                    setOpen(false);
-                  });
-                },
-                today,
-                value,
-                weekend
-              }
-            ),
-            addonAfter
-          ] }),
-          children
-        ]
-      }
-    );
-  }
-);
+import { Group } from "../group/Group.js";
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { PopoverContent } from "../popover/PopoverContent.js";
+import { Calendar } from "../calendar/Calendar.js";
+import { useDateRangePickerContext } from "./DateRangePickerContext.js";
+import { panels } from "./DateRangePickerContent-css.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/date-range-picker/DateRangePickerContent.tsx
+/**
+* @group DateRangePicker
+*/
+const DateRangePickerContent = forwardRef(({ addonAfter, addonBefore, "aria-label": ariaLabel, children, holiday, max, min, today, weekend, ...props }, ref) => {
+	const { labelId: fieldLabelId } = useFieldContext("@optiaxiom/react/DateRangePickerContent");
+	const { setFrom, setOpen, setValue, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerContent");
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs(PopoverContent, {
+		"aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
+		gap: "8",
+		maxW: void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				id: labelId,
+				children: ariaLabel || "Calendar"
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				...panels(),
+				children: [
+					addonBefore,
+					/* @__PURE__ */ jsx(Calendar, {
+						alignSelf: "start",
+						holiday,
+						max,
+						min,
+						mode: "range",
+						onDateSelect: (date) => {
+							setFrom((from) => from ? void 0 : date);
+						},
+						onValueChange: (value) => {
+							setValue(value);
+							requestAnimationFrame(() => {
+								setOpen(false);
+							});
+						},
+						today,
+						value,
+						weekend
+					}),
+					addonAfter
+				]
+			}),
+			children
+		]
+	});
+});
 DateRangePickerContent.displayName = "@optiaxiom/react/DateRangePickerContent";
-
+//#endregion
 export { DateRangePickerContent };