@xsolla/xui-date-picker 0.218.1 → 0.220.0

package/web/index.mjs

@@ -66,6 +66,10 @@ var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
   "fontWeight",
   "fontFamily",
   "textDecoration",
+  // `display` is a presentation attribute on SVG, so isPropValid lets it
+  // through — but Box consumes it purely as CSS. Without this it lands on the
+  // DOM node as a bogus `display="inline-flex"` attribute.
+  "display",
   // Cross-platform layout prop that Text consumes as CSS, never as an
   // attribute. Pinned explicitly because it is now spread into the styled
   // component rather than destructured away before it can reach the DOM.
@@ -100,7 +104,7 @@ function createFilteredElement(defaultTag) {
 import { jsx } from "react/jsx-runtime";
 var FilteredDiv = createFilteredElement("div");
 var StyledBox = styled(FilteredDiv)`
-  display: flex;
+  display: ${(props) => props.display || "flex"};
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
   border-color: ${(props) => props.borderColor || "transparent"};
@@ -236,7 +240,7 @@ var Box = React2.forwardRef(
           onLoad,
           "data-testid": dataTestId || testID,
           style: {
-            display: "block",
+            display: props.display || "block",
             objectFit: "cover",
             width: typeof props.width === "number" ? `${props.width}px` : props.width,
             height: typeof props.height === "number" ? `${props.height}px` : props.height,
@@ -636,6 +640,9 @@ var DatePicker = forwardRef(
     overlayThemeProductContext,
     iconRight = /* @__PURE__ */ jsx2(CalendarFieldIcon, {}),
     iconLeft,
+    label,
+    clearable = false,
+    onClear,
     error,
     errorMessage,
     readOnly,
@@ -657,6 +664,7 @@ var DatePicker = forwardRef(
       () => isRange ? [datePartsFromDate(startDate), datePartsFromDate(endDate)] : [datePartsFromDate(selectedDate)],
       [isRange, startDate, endDate, selectedDate]
     );
+    const propKey = `${selectedDate?.getTime() ?? ""}|${startDate?.getTime() ?? ""}|${endDate?.getTime() ?? ""}|${isRange}`;
     const [open, setOpen] = useState(false);
     const [groups, setGroups] = useState(propGroups);
     const [edit, setEdit] = useState(null);
@@ -672,6 +680,15 @@ var DatePicker = forwardRef(
     const inputRef = useRef(null);
     const chipSelectionRef = useRef(false);
     const suppressReopenRef = useRef(false);
+    const sessionRef = useRef({
+      dirty: false,
+      cleared: false,
+      propKey
+    });
+    const markDirty = () => {
+      sessionRef.current.dirty = true;
+      sessionRef.current.cleared = false;
+    };
     const activeChipValue = activeChip !== void 0 ? activeChip : internalChip;
     const chipLabel = showChipLabel && activeChipValue && chips ? chips.find((c) => c.value === activeChipValue)?.label : void 0;
     const isWithinBounds = (date) => {
@@ -731,6 +748,7 @@ var DatePicker = forwardRef(
     );
     const showMask = hasAnyFilled || focused && isWeb;
     const inputValue = chipLabel ?? (showMask ? composed.text : "");
+    const showClear = clearable && editable && (hasAnyFilled || !!chipLabel);
     const orderedSegments = () => composeField().segments;
     const firstSegmentKey = () => {
       const first = orderedSegments()[0];
@@ -773,6 +791,7 @@ var DatePicker = forwardRef(
       if (start || end) applySelection([start, end], false);
     };
     const commitPart = (group, type, rawValue) => {
+      markDirty();
       const clamped = clampDatePart(type, rawValue, groups[group]);
       const next = groups.map((g, i) => {
         if (i !== group) return g;
@@ -821,6 +840,7 @@ var DatePicker = forwardRef(
         setEdit(null);
         if (committed !== null) advance(active);
       } else {
+        markDirty();
         setEdit({ group: active.group, type: active.type, buffer });
       }
     };
@@ -858,6 +878,7 @@ var DatePicker = forwardRef(
       e.preventDefault();
       const active = activeSegment ?? firstSegmentKey();
       if (!active) return;
+      markDirty();
       const sameActive = edit && edit.group === active.group && edit.type === active.type;
       if (sameActive && edit.buffer.length > 0) {
         const buffer = edit.buffer.slice(0, -1);
@@ -909,6 +930,11 @@ var DatePicker = forwardRef(
         suppressReopenRef.current = false;
         return;
       }
+      sessionRef.current = {
+        dirty: false,
+        cleared: sessionRef.current.cleared,
+        propKey
+      };
       setFocused(true);
       setOpen(true);
       if (isWeb && editable) setActiveSegment(firstSegmentKey());
@@ -925,7 +951,19 @@ var DatePicker = forwardRef(
       onBlurProp?.(e);
       setFocused(false);
       setActiveSegment(null);
+      if (sessionRef.current.propKey !== propKey && !sessionRef.current.dirty) {
+        sessionRef.current = { dirty: false, cleared: false, propKey };
+        setEdit(null);
+        setParseError(null);
+        setGroups(propGroups());
+        return;
+      }
       if (!editable) return;
+      if (sessionRef.current.cleared && !sessionRef.current.dirty) {
+        setEdit(null);
+        setParseError(null);
+        return;
+      }
       let next = groups;
       if (edit) {
         const clamped = clampDatePart(
@@ -982,6 +1020,7 @@ var DatePicker = forwardRef(
         setParseError("Date must be within the allowed range");
         return;
       }
+      markDirty();
       setParseError(null);
       setEdit(null);
       setGroups(next);
@@ -992,13 +1031,29 @@ var DatePicker = forwardRef(
       setInternalChip(value);
       onChipSelect?.(value);
     };
+    const handleClear = () => {
+      const next = isRange ? [datePartsFromDate(null), datePartsFromDate(null)] : [datePartsFromDate(null)];
+      sessionRef.current.dirty = false;
+      sessionRef.current.cleared = true;
+      setGroups(next);
+      setEdit(null);
+      setParseError(null);
+      setInternalChip(null);
+      onChipSelect?.(null);
+      if (isWeb && editable) setActiveSegment(firstSegmentKey());
+      onClear?.();
+      if (isRange) {
+        const emptyRange = [null, null];
+        onChange?.(emptyRange);
+      }
+    };
     const handleDateChange = (date) => applySelection(date, closeOnComplete);
     const closePanel = useCallback(() => setOpen(false), []);
     const renderTopContent = topContent ? () => topContent({ close: closePanel }) : void 0;
     const renderBottomContent = bottomContent ? () => bottomContent({ close: closePanel }) : void 0;
-    const propKey = `${selectedDate?.getTime() ?? ""}|${startDate?.getTime() ?? ""}|${endDate?.getTime() ?? ""}|${isRange}`;
     useEffect(() => {
       if (focused) return;
+      sessionRef.current = { dirty: false, cleared: false, propKey };
       setGroups(propGroups());
       setEdit(null);
       setParseError(null);
@@ -1175,6 +1230,7 @@ var DatePicker = forwardRef(
               ...rest,
               ref: inputRef,
               size,
+              label,
               placeholder: placeholder || (isRange ? "Choose a date range" : "Choose a date"),
               value: inputValue,
               readOnly,
@@ -1185,6 +1241,8 @@ var DatePicker = forwardRef(
               onPaste: handlePaste,
               iconRight,
               iconLeft,
+              extraClear: showClear,
+              onRemove: handleClear,
               error: error || !!parseError,
               errorMessage: parseError ?? errorMessage,
               backgroundColor,