@xsolla/xui-date-picker 0.218.1 → 0.219.0

package/web/index.js

@@ -107,6 +107,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.
@@ -141,7 +145,7 @@ function createFilteredElement(defaultTag) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var FilteredDiv = createFilteredElement("div");
 var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
-  display: flex;
+  display: ${(props) => props.display || "flex"};
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
   border-color: ${(props) => props.borderColor || "transparent"};
@@ -277,7 +281,7 @@ var Box = import_react2.default.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,
@@ -677,6 +681,9 @@ var DatePicker = (0, import_react3.forwardRef)(
     overlayThemeProductContext,
     iconRight = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CalendarFieldIcon, {}),
     iconLeft,
+    label,
+    clearable = false,
+    onClear,
     error,
     errorMessage,
     readOnly,
@@ -698,6 +705,7 @@ var DatePicker = (0, import_react3.forwardRef)(
       () => isRange ? [datePartsFromDate(startDate), datePartsFromDate(endDate)] : [datePartsFromDate(selectedDate)],
       [isRange, startDate, endDate, selectedDate]
     );
+    const propKey = `${selectedDate?.getTime() ?? ""}|${startDate?.getTime() ?? ""}|${endDate?.getTime() ?? ""}|${isRange}`;
     const [open, setOpen] = (0, import_react3.useState)(false);
     const [groups, setGroups] = (0, import_react3.useState)(propGroups);
     const [edit, setEdit] = (0, import_react3.useState)(null);
@@ -713,6 +721,15 @@ var DatePicker = (0, import_react3.forwardRef)(
     const inputRef = (0, import_react3.useRef)(null);
     const chipSelectionRef = (0, import_react3.useRef)(false);
     const suppressReopenRef = (0, import_react3.useRef)(false);
+    const sessionRef = (0, import_react3.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) => {
@@ -772,6 +789,7 @@ var DatePicker = (0, import_react3.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];
@@ -814,6 +832,7 @@ var DatePicker = (0, import_react3.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;
@@ -862,6 +881,7 @@ var DatePicker = (0, import_react3.forwardRef)(
         setEdit(null);
         if (committed !== null) advance(active);
       } else {
+        markDirty();
         setEdit({ group: active.group, type: active.type, buffer });
       }
     };
@@ -899,6 +919,7 @@ var DatePicker = (0, import_react3.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);
@@ -950,6 +971,11 @@ var DatePicker = (0, import_react3.forwardRef)(
         suppressReopenRef.current = false;
         return;
       }
+      sessionRef.current = {
+        dirty: false,
+        cleared: sessionRef.current.cleared,
+        propKey
+      };
       setFocused(true);
       setOpen(true);
       if (isWeb && editable) setActiveSegment(firstSegmentKey());
@@ -966,7 +992,19 @@ var DatePicker = (0, import_react3.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(
@@ -1023,6 +1061,7 @@ var DatePicker = (0, import_react3.forwardRef)(
         setParseError("Date must be within the allowed range");
         return;
       }
+      markDirty();
       setParseError(null);
       setEdit(null);
       setGroups(next);
@@ -1033,13 +1072,29 @@ var DatePicker = (0, import_react3.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 = (0, import_react3.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}`;
     (0, import_react3.useEffect)(() => {
       if (focused) return;
+      sessionRef.current = { dirty: false, cleared: false, propKey };
       setGroups(propGroups());
       setEdit(null);
       setParseError(null);
@@ -1216,6 +1271,7 @@ var DatePicker = (0, import_react3.forwardRef)(
               ...rest,
               ref: inputRef,
               size,
+              label,
               placeholder: placeholder || (isRange ? "Choose a date range" : "Choose a date"),
               value: inputValue,
               readOnly,
@@ -1226,6 +1282,8 @@ var DatePicker = (0, import_react3.forwardRef)(
               onPaste: handlePaste,
               iconRight,
               iconLeft,
+              extraClear: showClear,
+              onRemove: handleClear,
               error: error || !!parseError,
               errorMessage: parseError ?? errorMessage,
               backgroundColor,