@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -6,10 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DatePicker = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _index3 = require("../PickerTrigger/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * DatePicker operates in two modes:
+ *
+ * 1. **Controlled-modal mode** — pass `visible` (plus `onSelect` / `onClose`)
+ *    and own the open state externally. The component renders only the modal.
+ * 2. **Trigger mode** — omit `visible`. The component renders a built-in
+ *    PickerTrigger field (label / value / placeholder / chevron / clear /
+ *    helper / error / size / variant) and manages its own open state. The
+ *    field opens the modal on press and closes it on confirm/cancel.
+ *
+ * `onSelect` / `onClose` are typed optional to support trigger-only usage
+ * where the consumer may not need either callback. In controlled-modal mode
+ * they remain semantically required.
+ */
+
 const DAY_MS = 24 * 60 * 60 * 1000;
 const GRID_SIZE = 12; // 4 cols x 3 rows for year / decade grids
 const DECADE_SPAN = 10;
@@ -86,7 +103,6 @@ const buildDecadeCells = anchorYear => {
 };
 const DatePicker = props => {
   const {
-    visible,
     value,
     onSelect,
     onClose,
@@ -100,9 +116,32 @@ const DatePicker = props => {
     confirmLabel = 'Confirm',
     cancelLabel = 'Cancel',
     style,
-    testID
+    containerStyle,
+    headerLabelStyle,
+    navButtonStyle,
+    footerButtonStyle,
+    testID,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle
   } = props;
+
+  // Controlled vs uncontrolled detection: if `visible` is supplied (even
+  // `false`), the consumer owns the open state; otherwise we own it.
+  const isControlled = props.visible !== undefined;
+  const [internalOpen, setInternalOpen] = (0, _react.useState)(false);
+  const open = isControlled ? props.visible : internalOpen;
   const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const today = (0, _react.useMemo)(() => startOfDay(new Date()), []);
   const initialAnchor = value ? startOfDay(value) : today;
@@ -131,17 +170,20 @@ const DatePicker = props => {
     }
   }, [value]);
 
-  // Modal open / close animation.
+  // Modal open / close animation. Backdrop opacity runs on JS driver — see
+  // Modal.tsx for the RN 0.85 / Fabric two-bug reason (view flattening +
+  // native-driver opacity on Animated.View with backgroundColor). Sheet
+  // transform stays native.
   (0, _react.useEffect)(() => {
     if (mode !== 'modal') return;
-    if (visible) {
-      (0, _index.setNativeValue)(backdrop, 0);
+    if (open) {
+      backdrop.setValue(0);
       (0, _index.setNativeValue)(sheet, 0);
       _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
-        useNativeDriver: true
+        useNativeDriver: false
       }), _reactNative.Animated.spring(sheet, {
         toValue: 1,
         damping: theme.motion.spring.gentle.damping,
@@ -150,7 +192,7 @@ const DatePicker = props => {
         useNativeDriver: true
       })]).start();
     }
-  }, [visible, mode, backdrop, sheet, theme.motion]);
+  }, [open, mode, backdrop, sheet, theme.motion]);
   const disabledIsoSet = (0, _react.useMemo)(() => {
     const set = new Set();
     disabledDates?.forEach(d => set.add(toIso(startOfDay(d))));
@@ -191,17 +233,19 @@ const DatePicker = props => {
     return false;
   }, [minDay, maxDay]);
   const animateMonthChange = (0, _react.useCallback)(delta => {
-    (0, _index2.triggerHaptic)('impactLight');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
     const direction = delta > 0 ? 1 : -1;
-    const distance = 32;
+    const distance = theme.components.datePicker?.monthSlideDistance ?? 32;
+    const outDuration = theme.components.datePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
+    const inDuration = theme.components.datePicker?.monthSlideInDuration ?? theme.motion.duration.fast ?? 160;
     _reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(monthSlide, {
       toValue: -direction * distance,
-      duration: 140,
+      duration: outDuration,
       easing: _reactNative.Easing.out(_reactNative.Easing.quad),
       useNativeDriver: true
     }), _reactNative.Animated.timing(monthFade, {
       toValue: 0,
-      duration: 140,
+      duration: outDuration,
       useNativeDriver: true
     })]), _reactNative.Animated.timing(monthSlide, {
       toValue: direction * distance,
@@ -209,68 +253,71 @@ const DatePicker = props => {
       useNativeDriver: true
     }), _reactNative.Animated.parallel([_reactNative.Animated.timing(monthSlide, {
       toValue: 0,
-      duration: 160,
+      duration: inDuration,
       easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
       useNativeDriver: true
     }), _reactNative.Animated.timing(monthFade, {
       toValue: 1,
-      duration: 160,
+      duration: inDuration,
       useNativeDriver: true
     })])]).start();
     const next = addMonths(anchor, delta);
     setAnchor(next);
     _reactNative.AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide]);
+  }, [anchor, locale, monthFade, monthSlide, theme.components.datePicker, theme.motion.duration.fast]);
   const goPrev = (0, _react.useCallback)(() => {
     if (viewMode === 'days') {
       animateMonthChange(-1);
       return;
     }
-    (0, _index2.triggerHaptic)('impactLight');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() - GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode]);
+  }, [animateMonthChange, viewMode, theme.components.datePicker]);
   const goNext = (0, _react.useCallback)(() => {
     if (viewMode === 'days') {
       animateMonthChange(1);
       return;
     }
-    (0, _index2.triggerHaptic)('impactLight');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('impactLight');
     if (viewMode === 'years') {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE, prev.getMonth(), 1));
     } else {
       setAnchor(prev => new Date(prev.getFullYear() + GRID_SIZE * DECADE_SPAN, prev.getMonth(), 1));
     }
-  }, [animateMonthChange, viewMode]);
+  }, [animateMonthChange, viewMode, theme.components.datePicker]);
 
-  // View-mode transition: fade + scale (200ms, native driver).
+  // View-mode transition: fade + scale, native driver.
   const animateViewTransition = (0, _react.useCallback)(() => {
+    const dur = theme.components.datePicker?.viewTransitionDuration ?? theme.motion.duration.normal ?? 200;
     (0, _index.setNativeValue)(viewFade, 0);
     (0, _index.setNativeValue)(viewScale, 0.9);
     _reactNative.Animated.parallel([_reactNative.Animated.timing(viewFade, {
       toValue: 1,
-      duration: 200,
+      duration: dur,
       easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
       useNativeDriver: true
     }), _reactNative.Animated.timing(viewScale, {
       toValue: 1,
-      duration: 200,
+      duration: dur,
       easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
       useNativeDriver: true
     })]).start();
-  }, [viewFade, viewScale]);
+  }, [viewFade, viewScale, theme.components.datePicker, theme.motion.duration.normal]);
   const cycleViewMode = (0, _react.useCallback)(() => {
-    (0, _index2.triggerHaptic)('selection');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
+    const pressDur = theme.components.datePicker?.headerPressDuration ?? 80;
+    const releaseDur = theme.components.datePicker?.headerReleaseDuration ?? 100;
     _reactNative.Animated.sequence([_reactNative.Animated.timing(headerScale, {
       toValue: 0.96,
-      duration: 80,
+      duration: pressDur,
       useNativeDriver: true
     }), _reactNative.Animated.timing(headerScale, {
       toValue: 1,
-      duration: 100,
+      duration: releaseDur,
       useNativeDriver: true
     })]).start();
     setViewMode(prev => {
@@ -279,23 +326,23 @@ const DatePicker = props => {
       return 'years';
     });
     animateViewTransition();
-  }, [animateViewTransition, headerScale]);
+  }, [animateViewTransition, headerScale, theme.components.datePicker]);
   const pickYear = (0, _react.useCallback)(year => {
-    (0, _index2.triggerHaptic)('selection');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
     setAnchor(prev => new Date(year, prev.getMonth(), 1));
     setViewMode('days');
     animateViewTransition();
-  }, [animateViewTransition]);
+  }, [animateViewTransition, theme.components.datePicker]);
   const pickDecade = (0, _react.useCallback)(decadeStart => {
-    (0, _index2.triggerHaptic)('selection');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
     // Anchor mid-decade so the year grid centers nicely on this decade.
     setAnchor(prev => new Date(decadeStart + 4, prev.getMonth(), 1));
     setViewMode('years');
     animateViewTransition();
-  }, [animateViewTransition]);
+  }, [animateViewTransition, theme.components.datePicker]);
   const pressDay = (0, _react.useCallback)(cell => {
     if (isDisabled(cell.date)) return;
-    (0, _index2.triggerHaptic)('selection');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
     setPendingDate(cell.date);
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
@@ -308,42 +355,50 @@ const DatePicker = props => {
       mass: theme.motion.spring.bouncy.mass,
       useNativeDriver: true
     }).start();
-  }, [isDisabled, selectScale, theme.motion.spring.bouncy]);
+  }, [isDisabled, selectScale, theme.motion.spring.bouncy, theme.components.datePicker]);
+  const finalizeClose = (0, _react.useCallback)(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+      onClose?.();
+    }
+  }, [isControlled, onClose]);
   const handleClose = (0, _react.useCallback)(() => {
     if (mode !== 'modal') {
-      onClose();
+      finalizeClose();
       return;
     }
     _reactNative.Animated.parallel([_reactNative.Animated.timing(backdrop, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.in(_reactNative.Easing.cubic),
-      useNativeDriver: true
+      useNativeDriver: false
     }), _reactNative.Animated.timing(sheet, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: _reactNative.Easing.in(_reactNative.Easing.cubic),
       useNativeDriver: true
     })]).start(() => {
-      onClose();
+      finalizeClose();
     });
-  }, [backdrop, mode, onClose, sheet, theme.motion.duration.fast]);
+  }, [backdrop, mode, finalizeClose, sheet, theme.motion.duration.fast]);
   const handleCancel = (0, _react.useCallback)(() => {
-    (0, _index2.triggerHaptic)('selection');
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('selection');
     handleClose();
-  }, [handleClose]);
+  }, [handleClose, theme.components.datePicker]);
   const handleConfirm = (0, _react.useCallback)(() => {
     if (!pendingDate) return;
-    (0, _index2.triggerHaptic)('notificationSuccess');
-    onSelect(pendingDate);
+    if (theme.components.datePicker?.haptic) (0, _index2.triggerHaptic)('notificationSuccess');
+    onSelect?.(pendingDate);
     handleClose();
-  }, [handleClose, onSelect, pendingDate]);
+  }, [handleClose, onSelect, pendingDate, theme.components.datePicker]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]
   });
   const calendar = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.card, style],
+    style: [styles.card, style, containerStyle],
     accessibilityRole: mode === 'modal' ? undefined : 'none',
     accessible: false,
     testID: testID,
@@ -360,7 +415,7 @@ const DatePicker = props => {
         onPress: goPrev,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: viewMode === 'days' ? 'Previous month' : viewMode === 'years' ? 'Previous years' : 'Previous decades',
         hitSlop: 8,
@@ -370,7 +425,7 @@ const DatePicker = props => {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         onPress: cycleViewMode,
-        style: styles.headerLabelWrap,
+        style: [styles.headerLabelWrap, headerLabelStyle],
         accessibilityRole: "button",
         accessibilityLabel: viewMode === 'days' ? `${headerLabel}, switch to year selection` : viewMode === 'years' ? `${headerLabel}, switch to decade selection` : `${headerLabel}, switch to year selection`,
         hitSlop: 8,
@@ -404,7 +459,7 @@ const DatePicker = props => {
         onPress: goNext,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: viewMode === 'days' ? 'Next month' : viewMode === 'years' ? 'Next years' : 'Next decades',
         hitSlop: 8,
@@ -578,7 +633,7 @@ const DatePicker = props => {
         onPress: handleCancel,
         style: ({
           pressed
-        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed],
+        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: cancelLabel,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -597,7 +652,7 @@ const DatePicker = props => {
           opacity: !pendingDate ? 0.5 : 1
         }, pressed && {
           backgroundColor: theme.colors.primaryHover
-        }],
+        }, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: confirmLabel,
         accessibilityState: {
@@ -612,38 +667,92 @@ const DatePicker = props => {
       })]
     })]
   });
+  const formatTriggerValue = formatValue ?? (d => d.toLocaleDateString());
+  const triggerValueText = value ? formatTriggerValue(value) : undefined;
+  const showTrigger = !isControlled;
   if (mode === 'inline') {
-    if (!visible) return null;
+    if (!open && !showTrigger) return null;
+    if (showTrigger) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.PickerTrigger, {
+          label: label,
+          value: triggerValueText,
+          placeholder: placeholder,
+          helperText: helperText,
+          error: error,
+          required: required,
+          disabled: disabled,
+          size: size,
+          variant: variant,
+          clearable: clearable,
+          onClear: onClear,
+          onPress: () => setInternalOpen(true),
+          triggerStyle: triggerStyle
+        }), open ? calendar : null]
+      });
+    }
     return calendar;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
-    visible: visible,
+  const modalNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+    visible: open,
     transparent: true,
-    statusBarTranslucent: true,
+    statusBarTranslucent: true
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+    ,
+    navigationBarTranslucent: true,
     animationType: "none",
     onRequestClose: handleClose,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+    // Backdrop wraps the sheet (not sibling) — on Fabric a sibling
+    // backdrop is occluded by the sheet wrapper regardless of order.
+    // collapsable={false} prevents flattening; plain View + pre-baked
+    // rgba colour avoids the Fabric animated-opacity-on-coloured-View bug.
+    , {
+      collapsable: false,
       style: [styles.backdrop, {
-        opacity: backdrop,
         backgroundColor: theme.colors.background.overlay
       }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         style: _reactNative.StyleSheet.absoluteFill,
         onPress: handleClose,
         accessibilityLabel: "Dismiss"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [styles.sheetWrap, {
-        opacity: sheet,
-        transform: [{
-          translateY: sheetTranslate
-        }]
-      }],
-      accessibilityViewIsModal: true,
-      accessibilityRole: "none",
-      children: calendar
-    })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.sheetWrap, {
+          // Push the sheet up by the system nav-bar inset so its content
+          // never lands behind Android gesture/3-button chrome.
+          paddingBottom: insets.bottom + theme.spacing.lg,
+          opacity: sheet,
+          transform: [{
+            translateY: sheetTranslate
+          }]
+        }],
+        accessibilityViewIsModal: true,
+        accessibilityRole: "none",
+        children: calendar
+      })]
+    })
   });
+  if (showTrigger) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.PickerTrigger, {
+        label: label,
+        value: triggerValueText,
+        placeholder: placeholder,
+        helperText: helperText,
+        error: error,
+        required: required,
+        disabled: disabled,
+        size: size,
+        variant: variant,
+        clearable: clearable,
+        onClear: onClear,
+        onPress: () => setInternalOpen(true),
+        triggerStyle: triggerStyle
+      }), modalNode]
+    });
+  }
+  return modalNode;
 };
 exports.DatePicker = DatePicker;
 const buildStyles = theme => {
@@ -685,8 +794,8 @@ const buildStyles = theme => {
       marginBottom: theme.spacing.md
     },
     navBtn: {
-      width: 36,
-      height: 36,
+      width: theme.components.datePicker?.navButtonSize ?? 36,
+      height: theme.components.datePicker?.navButtonSize ?? 36,
       borderRadius: theme.radius.full,
       alignItems: 'center',
       justifyContent: 'center',
@@ -696,8 +805,8 @@ const buildStyles = theme => {
       backgroundColor: theme.colors.surface.pressed
     },
     navText: {
-      fontSize: 22,
-      lineHeight: 24,
+      fontSize: theme.components.datePicker?.navTextFontSize ?? 22,
+      lineHeight: theme.components.datePicker?.navTextLineHeight ?? 24,
       color: theme.colors.text.primary,
       fontWeight: theme.typography.fontWeight.semibold
     },
@@ -746,12 +855,12 @@ const buildStyles = theme => {
       aspectRatio: 1,
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 2
+      padding: theme.components.datePicker?.dayCellPadding ?? 2
     },
     dayInner: {
       width: '100%',
       height: '100%',
-      borderRadius: theme.radius.full,
+      borderRadius: theme.components.datePicker?.dayInnerBorderRadius ?? theme.radius.full,
       alignItems: 'center',
       justifyContent: 'center'
     },
@@ -767,12 +876,12 @@ const buildStyles = theme => {
       aspectRatio: 1.6,
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 4
+      padding: theme.components.datePicker?.yearCellPadding ?? 4
     },
     yearInner: {
       width: '100%',
       height: '100%',
-      borderRadius: theme.radius.lg,
+      borderRadius: theme.components.datePicker?.yearInnerBorderRadius ?? theme.radius.lg,
       alignItems: 'center',
       justifyContent: 'center'
     },
@@ -783,7 +892,7 @@ const buildStyles = theme => {
     decadeRangeText: {
       fontSize: theme.typography.fontSize.xs,
       fontWeight: theme.typography.fontWeight.medium,
-      marginTop: 2
+      marginTop: theme.components.datePicker?.decadeRangeMarginTop ?? 2
     },
     footer: {
       flexDirection: 'row',
@@ -796,7 +905,7 @@ const buildStyles = theme => {
       paddingHorizontal: theme.spacing.lg,
       paddingVertical: theme.spacing.sm,
       borderRadius: theme.radius.md,
-      minHeight: 40,
+      minHeight: theme.components.datePicker?.footerButtonMinHeight ?? 40,
       alignItems: 'center',
       justifyContent: 'center'
     },