@ornikar/kitt-universal 9.30.2 → 9.32.0

package/dist/index-node-14.17.cjs.web.js

@@ -209,14 +209,6 @@ const TypographyDefaultColorContext = /*#__PURE__*/react.createContext(undefined
 function useTypographyDefaultColor() {
   return react.useContext(TypographyDefaultColorContext);
 }
-
-/** @deprecated use native-base instead for SSR compatibility */
-const getTypographyTypeConfigKey = theme => {
-  const isMediumOrAbove = theme.responsive.matchWindowSize({
-    minWidth: KittBreakpoints.MEDIUM
-  });
-  return isMediumOrAbove ? 'mediumAndWide' : 'baseAndSmall';
-};
 function getTypographyTypeConfigKeyFromTypeName(breakpointName) {
   return breakpointName === 'base' || breakpointName === 'small' ? 'baseAndSmall' : 'mediumAndWide';
 }
@@ -906,6 +898,7 @@ const lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
+  seaShell: '#FFF9F3',
   transparent: 'transparent',
   moonPurple: '#DBD6F9',
   moonPurpleLight1: '#EDEBFC'
@@ -2939,171 +2932,204 @@ function Checkbox({
   });
 }
 
-/** @deprecated use native-base instead */
-function getInputUIState({
-  isFocused,
-  isDisabled,
-  formState
-}) {
-  if (isDisabled) return 'disabled';
-  if (isFocused) return 'focus';
-  if (formState === 'invalid') return 'invalid';
-  return 'default';
+function prefixWithZero(value, maxLength = 2) {
+  return `${value}`.padStart(maxLength, '0');
 }
-
-/** @deprecated this mixin is not SSR compatible */
-const styledTextInputMixin = /*#__PURE__*/styled.css(["background-color:", ";border-width:", "px;border-radius:", "px;border-color:", ";font-size:", ";color:", ";font-family:", ";"], ({
-  theme,
-  $state
-}) => $state === 'disabled' ? theme.kitt.forms.input.states.disabled.backgroundColor : theme.kitt.forms.input.states.default.backgroundColor, ({
-  theme
-}) => theme.kitt.forms.input.borderWidth, ({
-  theme
-}) => theme.kitt.forms.input.borderRadius, ({
-  theme,
-  $state
-}) => theme.kitt.forms.input.states[$state].borderColor, ({
-  theme
-}) => {
-  const typeConfigKey = getTypographyTypeConfigKey(theme);
-  return `${theme.kitt.typography.types.bodies.configs.body[typeConfigKey].fontSize}px`;
-}, ({
-  theme,
-  $state
-}) => theme.kitt.forms.input.states[$state].color || theme.kitt.forms.input.states.default.color, ({
-  theme
-}) => theme.kitt.typography.types.bodies.fontFamily.web.regular);
-
-const StyledTypographyText = /*#__PURE__*/styled__default(Typography.Text).withConfig({
-  displayName: "DatePickerInputPart__StyledTypographyText",
-  componentId: "kitt-universal__sc-11fmlmi-0"
-})(["text-align:center;"]);
-const ViewInput = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "DatePickerInputPart__ViewInput",
-  componentId: "kitt-universal__sc-11fmlmi-1"
-})(["", " padding:", ";min-height:", "px;min-width:", ";"], styledTextInputMixin, ({
-  theme
-}) => `${theme.kitt.forms.input.padding.vertical}px ${theme.kitt.forms.input.padding.horizontal}px`, ({
-  theme
-}) => theme.kitt.forms.input.minHeight, ({
-  theme,
-  $partName
-}) => {
-  if (!$partName) {
-    return undefined;
-  }
-  return `${theme.kitt.forms.datePicker[$partName].minWidth}px`;
-});
-function DatePickerInputPart({
-  $state,
-  placeholder,
-  value,
-  partName,
-  disabled
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(ViewInput, {
-    $state: $state,
-    $partName: partName,
-    children: placeholder || value ? /*#__PURE__*/jsxRuntime.jsx(StyledTypographyText, {
-      color: !value || disabled ? 'black-light' : undefined,
-      children: value || placeholder
-    }) : null
-  });
+function dayFormatter(day) {
+  return prefixWithZero(day);
+}
+function monthFormatter(month) {
+  return prefixWithZero(month);
+}
+function yearFormatter(year) {
+  return prefixWithZero(year, 4);
 }
 
-function prefixWithZero(value) {
-  return `${value}`.padStart(2, '0');
+function getDayInInterval(value, minDate, maxDate) {
+  const minValue = minDate ? minDate.getDate() : 1;
+  const maxValue = maxDate ? maxDate.getDate() : 31;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
 }
-const PartContainer = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.View).withConfig({
-  displayName: "DatePickerInputs__PartContainer",
-  componentId: "kitt-universal__sc-j9hin5-0"
-})(["margin-right:", ";", ";"], ({
-  theme,
-  $isLast
-}) => !$isLast ? `${theme.kitt.spacing * 2}px` : 0, ({
-  $isStretch
-}) => $isStretch ? styled.css(["flex:0.33;flex-grow:1;"]) : undefined);
-const DatePickerPressable = /*#__PURE__*/styled__default(BabelPluginStyledComponentsReactNative.Pressable).withConfig({
-  displayName: "DatePickerInputs__DatePickerPressable",
-  componentId: "kitt-universal__sc-j9hin5-1"
-})(["display:flex;flex-direction:row;", ";"], ({
-  $isStretch
-}) => {
-  if ($isStretch) {
-    return styled.css(["width:100%;"]);
-  }
-  return styled.css(["align-self:baseline;"]);
-});
-function DatePickerInputs({
-  state,
-  internalForceState,
-  isFocused,
-  disabled,
-  stretch,
-  id,
-  testID,
-  handleModalOpen,
-  currentValue,
-  placeholder
-}) {
-  const currentState = internalForceState || getInputUIState({
-    isFocused,
-    isDisabled: Boolean(disabled),
-    formState: state
-  });
-  const sharedPartProps = {
-    disabled,
-    $state: currentState
-  };
-  return /*#__PURE__*/jsxRuntime.jsxs(DatePickerPressable, {
-    $isStretch: stretch,
-    nativeID: id,
-    disabled: disabled,
-    testID: testID,
-    onPress: handleModalOpen,
-    children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, {
-        ...sharedPartProps,
-        partName: "day",
-        value: currentValue ? prefixWithZero(currentValue.getDate()) : undefined,
-        placeholder: placeholder?.day
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, {
-        ...sharedPartProps,
-        partName: "month",
-        value: currentValue ? prefixWithZero(currentValue.getMonth() + 1) : undefined,
-        placeholder: placeholder?.month
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
-      $isLast: true,
-      $isStretch: stretch,
-      children: /*#__PURE__*/jsxRuntime.jsx(DatePickerInputPart, {
-        ...sharedPartProps,
-        partName: "year",
-        value: currentValue ? currentValue.getFullYear() : undefined,
-        placeholder: placeholder?.year
-      })
-    })]
-  });
+function getMonthInInterval(value, minDate, maxDate) {
+  const minValue = minDate ? minDate.getMonth() + 1 : 1;
+  const maxValue = maxDate ? maxDate.getMonth() + 1 : 12;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
+}
+function getYearInInterval(value, minDate, maxDate) {
+  const minValue = minDate ? minDate.getFullYear() : 1;
+  const maxValue = maxDate ? maxDate.getFullYear() : 9999;
+  return value !== undefined ? Math.max(minValue, Math.min(maxValue, value)) : value;
 }
 
-// This is not yet implemented
-// We still display the inputs for chromatic
-function DatePicker({
-  value,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(DatePickerInputs, {
-    handleModalOpen: () => {},
-    currentValue: value,
-    isFocused: false,
-    ...props
-  });
+function isNumber(input) {
+  //  Number.isNaN and isNaN are not consistent
+  // eslint-disable-next-line no-restricted-globals
+  return !isNaN(input);
 }
 
+function onDatePartChange({
+  day,
+  month,
+  year,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const arrayParts = [day, month, year];
+  const isEverythingUndefined = arrayParts.every(v => v === undefined);
+  const isEverythingDefined = arrayParts.every(Boolean);
+
+  // every parts are undefined
+  if (isEverythingUndefined) {
+    if (onFocus) onFocus();
+    onChange(undefined);
+    if (onBlur) onBlur();
+    return;
+  }
+
+  // Do nothing if some input parts are empty
+  if (!isEverythingDefined) {
+    return;
+  }
+  const nextValue = new Date();
+  if (day) nextValue.setDate(day);
+  if (month) nextValue.setMonth(month - 1);
+  if (year) nextValue.setFullYear(year);
+  nextValue.setMinutes(0);
+  nextValue.setHours(0);
+  nextValue.setSeconds(0);
+  nextValue.setMilliseconds(0);
+  if (onFocus) onFocus();
+  onChange(nextValue);
+  if (onBlur) onBlur();
+}
+
+function stringToNumber(text) {
+  if (text.length === 0) return undefined;
+  return parseInt(text, 10);
+}
+
+const keyboardDatePickerReducer = (state, action) => {
+  const handleChange = dateParts => {
+    const {
+      onFocus,
+      onBlur,
+      onChange
+    } = state;
+    onDatePartChange({
+      ...dateParts,
+      onFocus,
+      onBlur,
+      onChange
+    });
+  };
+  switch (action.type) {
+    case 'day-change':
+      {
+        const nextDay = stringToNumber(action.nextDay || '');
+        if (nextDay === undefined || !isNumber(action.nextDay)) {
+          return {
+            ...state,
+            currentDay: undefined,
+            displayedDay: ''
+          };
+        }
+        handleChange({
+          day: nextDay,
+          month: state.currentMonth,
+          year: state.currentYear
+        });
+        return {
+          ...state,
+          currentDay: nextDay,
+          displayedDay: nextDay.toString()
+        };
+      }
+    case 'month-change':
+      {
+        const nextMonth = stringToNumber(action.nextMonth || '');
+        if (nextMonth === undefined || !isNumber(action.nextMonth)) {
+          return {
+            ...state,
+            currentMonth: undefined,
+            displayedMonth: ''
+          };
+        }
+        handleChange({
+          day: state.currentDay,
+          month: nextMonth,
+          year: state.currentYear
+        });
+        return {
+          ...state,
+          currentMonth: nextMonth,
+          displayedMonth: nextMonth.toString()
+        };
+      }
+    case 'year-change':
+      {
+        const nextYear = stringToNumber(action.nextYear || '');
+        if (nextYear === undefined || !isNumber(action.nextYear)) {
+          return {
+            ...state,
+            currentYear: undefined,
+            displayedYear: ''
+          };
+        }
+        handleChange({
+          day: state.currentDay,
+          month: state.currentMonth,
+          year: nextYear
+        });
+        return {
+          ...state,
+          currentYear: nextYear,
+          displayedYear: nextYear.toString()
+        };
+      }
+    case 'day-blur':
+      {
+        const {
+          minDate,
+          maxDate
+        } = state;
+        const nextCurrentDay = getDayInInterval(state.currentDay, minDate, maxDate);
+        return {
+          ...state,
+          displayedDay: nextCurrentDay ? dayFormatter(nextCurrentDay) : state.displayedDay
+        };
+      }
+    case 'month-blur':
+      {
+        const {
+          minDate,
+          maxDate
+        } = state;
+        const nextCurrentMonth = getMonthInInterval(state.currentMonth, minDate, maxDate);
+        return {
+          ...state,
+          currentMonth: nextCurrentMonth,
+          displayedMonth: nextCurrentMonth !== undefined ? monthFormatter(nextCurrentMonth) : state.displayedMonth
+        };
+      }
+    case 'year-blur':
+      {
+        const {
+          minDate,
+          maxDate
+        } = state;
+        const nextCurrentYear = getYearInInterval(state.currentYear, minDate, maxDate);
+        return {
+          ...state,
+          currentYear: nextCurrentYear,
+          displayedYear: nextCurrentYear !== undefined ? yearFormatter(nextCurrentYear) : state.displayedYear
+        };
+      }
+    default:
+      return state;
+  }
+};
+
 const _exp$3 = /*#__PURE__*/() => ({
   theme
 }) => {
@@ -3177,6 +3203,181 @@ const InputText = /*#__PURE__*/react.forwardRef(({
   });
 });
 
+function getCurrentInternalForcedState({
+  isDisabled,
+  isHoveredInternal,
+  isFocusedInternal,
+  isPressedInternal
+}) {
+  if (isDisabled) return 'disabled';
+  if (isHoveredInternal) return 'hover';
+  if (isFocusedInternal) return 'focus';
+  if (isPressedInternal) return 'hover';
+  return 'default';
+}
+const InputPart = /*#__PURE__*/react.forwardRef(({
+  value,
+  placeholder,
+  disabled,
+  isFocusedInternal,
+  isHoveredInternal,
+  isPressedInternal,
+  onChange,
+  onBlur
+}, ref) => {
+  return /*#__PURE__*/jsxRuntime.jsx(InputText, {
+    ref: ref,
+    internalForceState: getCurrentInternalForcedState({
+      isDisabled: disabled,
+      isHoveredInternal,
+      isFocusedInternal,
+      isPressedInternal
+    }),
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    keyboardType: "numeric",
+    textAlign: "center",
+    onChange: onChange,
+    onBlur: onBlur
+  });
+});
+
+function PartContainer({
+  children,
+  isStretch,
+  width
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    flex: createResponsiveStyleFromProp(isStretch, 0.33),
+    flexGrow: createResponsiveStyleFromProp(isStretch, 1),
+    width: isStretch ? undefined : width,
+    children: children
+  });
+}
+
+function KeyboardDatePicker({
+  value,
+  testID,
+  id,
+  stretch,
+  placeholder,
+  minDate,
+  maxDate,
+  disabled,
+  isFocusedInternal,
+  isHoveredInternal,
+  isPressedInternal,
+  onChange,
+  onBlur,
+  onFocus,
+  ...props
+}) {
+  const dayRef = react.useRef(null);
+  const monthRef = react.useRef(null);
+  const yearRef = react.useRef(null);
+  const defaultValue = value;
+  const defaultDay = defaultValue?.getDate();
+  const defaultMonth = defaultValue ? defaultValue.getMonth() + 1 : undefined;
+  const defaultYear = defaultValue?.getFullYear();
+  const [state, dispatch] = react.useReducer(keyboardDatePickerReducer, {
+    currentValue: defaultValue,
+    currentDay: defaultDay,
+    currentMonth: defaultMonth,
+    currentYear: defaultYear,
+    displayedDay: defaultDay ? dayFormatter(defaultDay) : '',
+    displayedMonth: defaultMonth ? monthFormatter(defaultMonth) : '',
+    displayedYear: defaultYear ? yearFormatter(defaultYear) : '',
+    minDate,
+    maxDate,
+    onChange,
+    onBlur,
+    onFocus
+  });
+  const sharedInputPartProps = {
+    isFocusedInternal,
+    isHoveredInternal,
+    isPressedInternal,
+    disabled
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(View, {
+    testID: testID,
+    nativeID: id,
+    children: /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+      space: "kitt.2",
+      children: [/*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.day.minWidth",
+        children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+          ref: dayRef,
+          ...sharedInputPartProps,
+          placeholder: placeholder?.day,
+          value: state.displayedDay,
+          onChange: e => {
+            const nextDay = e.nativeEvent.text;
+            dispatch({
+              type: 'day-change',
+              nextDay
+            });
+            if (nextDay.length === 2 && monthRef.current) {
+              monthRef.current.focus();
+            }
+          },
+          onBlur: () => dispatch({
+            type: 'day-blur'
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.month.minWidth",
+        children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+          ref: monthRef,
+          ...sharedInputPartProps,
+          placeholder: placeholder?.month,
+          value: state.displayedMonth,
+          onChange: e => {
+            const nextMonth = e.nativeEvent.text;
+            dispatch({
+              type: 'month-change',
+              nextMonth: e.nativeEvent.text
+            });
+            if (nextMonth.length === 2 && yearRef.current) {
+              yearRef.current.focus();
+            }
+          },
+          onBlur: () => dispatch({
+            type: 'month-blur'
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(PartContainer, {
+        isStretch: stretch,
+        width: "kitt.forms.datePicker.year.minWidth",
+        children: /*#__PURE__*/jsxRuntime.jsx(InputPart, {
+          ref: yearRef,
+          ...sharedInputPartProps,
+          placeholder: placeholder?.year,
+          value: state.displayedYear,
+          onChange: e => {
+            dispatch({
+              type: 'year-change',
+              nextYear: e.nativeEvent.text
+            });
+          },
+          onBlur: () => dispatch({
+            type: 'year-blur'
+          })
+        })
+      })]
+    })
+  });
+}
+
+function DatePicker(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(KeyboardDatePicker, {
+    ...props
+  });
+}
+
 function InputEmail(props) {
   return /*#__PURE__*/jsxRuntime.jsx(InputText, {
     autoComplete: "email",
@@ -4563,6 +4764,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         typography: theme.typography.colors,
         palettes: theme.palettes,
         forms: {
+          input: {
+            states: theme.forms.input.states
+          },
           radioButtonGroup: {
             item: {
               borderColor: theme.forms.radioButtonGroup.item.borderColor,
@@ -4607,6 +4811,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderRadius: theme.dialogModal.borderRadius
         },
         forms: {
+          input: {
+            borderRadius: theme.forms.input.borderRadius
+          },
           radioButtonGroup: {
             item: {
               borderRadius: theme.forms.radioButtonGroup.item.borderRadius
@@ -4638,6 +4845,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           borderWidth: theme.button.borderWidth
         },
         forms: {
+          input: {
+            borderWidth: theme.forms.input.borderWidth
+          },
           radioButtonGroup: {
             item: {
               borderWidth: theme.forms.radioButtonGroup.item.borderWidth
@@ -4684,6 +4894,21 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           overlayPadding: theme.dialogModal.overlayPadding
         },
         forms: {
+          datePicker: {
+            minHeight: theme.forms.input.minHeight,
+            day: {
+              minWidth: theme.forms.datePicker.day.minWidth
+            },
+            month: {
+              minWidth: theme.forms.datePicker.month.minWidth
+            },
+            year: {
+              minWidth: theme.forms.datePicker.year.minWidth
+            }
+          },
+          input: {
+            minHeight: theme.forms.input.minHeight
+          },
           radioButtonGroup: {
             item: {
               minHeight: theme.forms.radioButtonGroup.item.minHeight
@@ -4730,6 +4955,12 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           overlayPadding: theme.dialogModal.overlayPadding
         },
         forms: {
+          datePicker: {
+            padding: theme.forms.input.padding
+          },
+          input: {
+            padding: theme.forms.input.padding
+          },
           radioButtonGroup: {
             item: {
               padding: theme.forms.radioButtonGroup.item.padding
@@ -5084,8 +5315,9 @@ const StyledViewWithPadding = /*#__PURE__*/styled__default(ContentPadding).withC
   displayName: "Body__StyledViewWithPadding",
   componentId: "kitt-universal__sc-oc39vn-0"
 })(["padding-top:", "px;padding-bottom:", "px;"], ({
-  theme
-}) => theme.kitt.spacing * 6, ({
+  theme,
+  $insetTop
+}) => Math.max(theme.kitt.spacing * 6, $insetTop), ({
   theme,
   $insetBottom
 }) => Math.max(theme.kitt.spacing * 4, $insetBottom));
@@ -5093,15 +5325,19 @@ function Body({
   children,
   shouldHandleBottomNotch,
   style,
+  shouldHandleTopNotch,
   ...props
 }) {
   const {
-    bottom
+    bottom,
+    top
   } = reactNativeSafeAreaContext.useSafeAreaInsets();
   const insetBottom = shouldHandleBottomNotch ? bottom : 0;
+  const insetTop = shouldHandleTopNotch ? top : 0;
   return /*#__PURE__*/jsxRuntime.jsx(StyledViewWithPadding, {
     ...props,
     $insetBottom: insetBottom,
+    $insetTop: insetTop,
     style: style,
     children: children
   });
@@ -5144,9 +5380,10 @@ function Footer({
 const HeaderContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig({
   displayName: "Header__HeaderContainer",
   componentId: "kitt-universal__sc-1g7sbq-0"
-})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;", ";"], ({
-  theme
-}) => theme.kitt.navigationModal.height, ({
+})(["height:", "px;width:100%;justify-content:center;background-color:", ";padding-right:", "px;padding-left:", "px;padding-top:", "px;", ";"], ({
+  theme,
+  $insetTop
+}) => theme.kitt.navigationModal.height + $insetTop, ({
   theme,
   $isTransparent
 }) => {
@@ -5159,6 +5396,8 @@ const HeaderContainer = /*#__PURE__*/styled__default(ContentPadding).withConfig(
   theme,
   $hasLeft
 }) => $hasLeft ? theme.kitt.spacing * 2 : theme.kitt.navigationModal.padding, ({
+  $insetTop
+}) => $insetTop, ({
   $hasSeparator
 }) => {
   if (!$hasSeparator) return undefined;
@@ -5214,14 +5453,20 @@ function Header({
   children,
   right,
   left,
+  shouldHandleTopNotch = true,
   style
 }) {
+  const {
+    top
+  } = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const insetTop = shouldHandleTopNotch ? top : 0;
   const sharedProps = {
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right)
   };
   return /*#__PURE__*/jsxRuntime.jsx(HeaderContainer, {
     $isTransparent: isTransparent,
+    $insetTop: insetTop,
     $hasSeparator: hasSeparator,
     $hasLeft: Boolean(left),
     $hasRight: Boolean(right),