@hero-design/rn 8.45.2-test-only.0 → 8.46.1

package/.turbo/turbo-build.log

@@ -3,6 +3,6 @@ $ rollup -c
 
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/runner/_work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 28.2s
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+created lib/index.js, es/index.js in 21.4s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/CHANGELOG.md

@@ -1,11 +1,26 @@
 # @hero-design/rn
 
-## 8.45.2-test-only.0
+## 8.46.1
+
+### Patch Changes
+
+- [#2426](https://github.com/Thinkei/hero-design/pull/2426) [`696e01db8`](https://github.com/Thinkei/hero-design/commit/696e01db8033379871d718dc20f5fdfb448a02e1) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [PageControl] Disable useNativeDriver to prevent crash
+
+## 8.46.0
+
+### Minor Changes
+
+- [#2423](https://github.com/Thinkei/hero-design/pull/2423) [`176e43f0d`](https://github.com/Thinkei/hero-design/commit/176e43f0d2d50a67b053ddba8f8e5fb8d752599a) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Swipeable] Add full-width variant
 
 ### Patch Changes
 
 - [#2406](https://github.com/Thinkei/hero-design/pull/2406) [`f6a11c2a9`](https://github.com/Thinkei/hero-design/commit/f6a11c2a97133154a527f607f3af59a5a7e30b3c) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [PageControl] Fix animation not working
 
+- [#2407](https://github.com/Thinkei/hero-design/pull/2407) [`9b943f82d`](https://github.com/Thinkei/hero-design/commit/9b943f82dfa7a3213cb51ef32fc30c5ca77b3c5c) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [DatePicker] Update minDate and maxDate logic
+
+- Updated dependencies [[`f006136ba`](https://github.com/Thinkei/hero-design/commit/f006136ba8db6d5adb9698c493e638338321c63c)]:
+  - @hero-design/colors@8.42.5
+
 ## 8.45.1
 
 ### Patch Changes

package/es/index.js

@@ -11949,7 +11949,7 @@ var PageControl = function PageControl(_ref) {
   React.useEffect(function () {
     Animated.spring(animatedValue, {
       toValue: currentPage,
-      useNativeDriver: Platform.OS !== 'web'
+      useNativeDriver: false // Native driver does not support animating width, it will cause the app to crash if set to true
     }).start();
   }, [currentPage]);
   return /*#__PURE__*/React.createElement(StyledPageControl$2, {
@@ -13083,6 +13083,28 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, displayText.length, "/", maxLength))));
 });
 
+var getDateValue = function getDateValue(value, minDate, maxDate) {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+  return value;
+};
+var useCalculateDate = function useCalculateDate(_ref) {
+  var maxDate = _ref.maxDate,
+    minDate = _ref.minDate,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  useEffect(function () {
+    var newDate = getDateValue(value || new Date(), minDate, maxDate);
+    if (newDate !== value) {
+      onChange(newDate);
+    }
+  }, [maxDate, minDate, value]);
+};
+
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -13105,6 +13127,12 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     setOpen = _useState2[1];
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
+  useCalculateDate({
+    minDate: minDate,
+    maxDate: maxDate,
+    onChange: _onChange,
+    value: value
+  });
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -13217,6 +13245,12 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     selectingDate = _useState10[0],
     setSelectingDate = _useState10[1];
   var displayValue = value ? formatTime(displayFormat, value) : '';
+  useCalculateDate({
+    minDate: minDate,
+    maxDate: maxDate,
+    onChange: onChange,
+    value: value
+  });
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -13272,15 +13306,6 @@ var StyledPickerWrapper$1 = index$a(View)(function (_ref) {
   };
 });
 
-var getInitialDateValue = function getInitialDateValue(value, minDate, maxDate) {
-  if (minDate && value < minDate) {
-    return minDate;
-  }
-  if (maxDate && value > maxDate) {
-    return maxDate;
-  }
-  return value;
-};
 var DatePickerIOS = function DatePickerIOS(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -13298,7 +13323,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText = _ref.helpText,
     style = _ref.style,
     testID = _ref.testID;
-  var _useState = useState(getInitialDateValue(value || new Date(), minDate, maxDate)),
+  var _useState = useState(getDateValue(value || new Date(), minDate, maxDate)),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
     setSelectingDate = _useState2[1];
@@ -13308,6 +13333,12 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     setOpen = _useState4[1];
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var theme = useTheme();
+  useCalculateDate({
+    minDate: minDate,
+    maxDate: maxDate,
+    onChange: onChange,
+    value: value
+  });
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -15845,7 +15876,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$8 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$8 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -15870,6 +15901,8 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'card' : _ref$variant,
     swipeableProps = _objectWithoutProperties(_ref, _excluded$8);
   var theme = useTheme();
   var _useWindowDimensions = useWindowDimensions(),
@@ -15912,7 +15945,7 @@ var Swipeable = function Swipeable(_ref) {
       return onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange('closed');
     },
     containerStyle: {
-      borderRadius: theme.__hd__.swipeable.radii.swipeableContainer
+      borderRadius: variant === 'card' ? theme.__hd__.swipeable.radii.swipeableContainer : 0
     }
   }), children));
 };

package/lib/index.js

@@ -11979,7 +11979,7 @@ var PageControl = function PageControl(_ref) {
   React__default["default"].useEffect(function () {
     reactNative.Animated.spring(animatedValue, {
       toValue: currentPage,
-      useNativeDriver: reactNative.Platform.OS !== 'web'
+      useNativeDriver: false // Native driver does not support animating width, it will cause the app to crash if set to true
     }).start();
   }, [currentPage]);
   return /*#__PURE__*/React__default["default"].createElement(StyledPageControl$2, {
@@ -13113,6 +13113,28 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }, displayText.length, "/", maxLength))));
 });
 
+var getDateValue = function getDateValue(value, minDate, maxDate) {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+  return value;
+};
+var useCalculateDate = function useCalculateDate(_ref) {
+  var maxDate = _ref.maxDate,
+    minDate = _ref.minDate,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  React.useEffect(function () {
+    var newDate = getDateValue(value || new Date(), minDate, maxDate);
+    if (newDate !== value) {
+      onChange(newDate);
+    }
+  }, [maxDate, minDate, value]);
+};
+
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -13135,6 +13157,12 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     setOpen = _useState2[1];
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
+  useCalculateDate({
+    minDate: minDate,
+    maxDate: maxDate,
+    onChange: _onChange,
+    value: value
+  });
   return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -13247,6 +13275,12 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     selectingDate = _useState10[0],
     setSelectingDate = _useState10[1];
   var displayValue = value ? formatTime(displayFormat, value) : '';
+  useCalculateDate({
+    minDate: minDate,
+    maxDate: maxDate,
+    onChange: onChange,
+    value: value
+  });
   return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -13302,15 +13336,6 @@ var StyledPickerWrapper$1 = index$a(reactNative.View)(function (_ref) {
   };
 });
 
-var getInitialDateValue = function getInitialDateValue(value, minDate, maxDate) {
-  if (minDate && value < minDate) {
-    return minDate;
-  }
-  if (maxDate && value > maxDate) {
-    return maxDate;
-  }
-  return value;
-};
 var DatePickerIOS = function DatePickerIOS(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -13328,7 +13353,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText = _ref.helpText,
     style = _ref.style,
     testID = _ref.testID;
-  var _useState = React.useState(getInitialDateValue(value || new Date(), minDate, maxDate)),
+  var _useState = React.useState(getDateValue(value || new Date(), minDate, maxDate)),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
     setSelectingDate = _useState2[1];
@@ -13338,6 +13363,12 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     setOpen = _useState4[1];
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var theme = useTheme();
+  useCalculateDate({
+    minDate: minDate,
+    maxDate: maxDate,
+    onChange: onChange,
+    value: value
+  });
   return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -15875,7 +15906,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$8 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$8 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -15900,6 +15931,8 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'card' : _ref$variant,
     swipeableProps = _objectWithoutProperties(_ref, _excluded$8);
   var theme = useTheme();
   var _useWindowDimensions = reactNative.useWindowDimensions(),
@@ -15942,7 +15975,7 @@ var Swipeable = function Swipeable(_ref) {
       return onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange('closed');
     },
     containerStyle: {
-      borderRadius: theme.__hd__.swipeable.radii.swipeableContainer
+      borderRadius: variant === 'card' ? theme.__hd__.swipeable.radii.swipeableContainer : 0
     }
   }), children));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.45.2-test-only.0",
+  "version": "8.46.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.4",
+    "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,10 +1,11 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
+import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import formatDate from 'date-fns/fp/format';
 
 import TextInput from '../TextInput';
 import type { DatePickerProps } from './types';
+import useCalculateDate from './useCalculateDate';
 
 const DatePickerAndroid = ({
   value,
@@ -25,10 +26,11 @@ const DatePickerAndroid = ({
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 >) => {
   const [open, setOpen] = useState(false);
-
   const displayValue = value ? formatDate(displayFormat, value) : '';
   const pickerInitValue = value || new Date();
 
+  useCalculateDate({ minDate, maxDate, onChange, value });
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputAndroid">

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -7,6 +7,7 @@ import Button from '../Button';
 import Calendar, { CalendarProps } from '../Calendar';
 import TextInput from '../TextInput';
 import type { DatePickerProps } from './types';
+import useCalculateDate from './useCalculateDate';
 
 const InternalCalendar = ({
   minDate,
@@ -84,6 +85,8 @@ const DatePickerCalendar = ({
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const displayValue = value ? formatDate(displayFormat, value) : '';
 
+  useCalculateDate({ minDate, maxDate, onChange, value });
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerCalendar">

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,30 +1,15 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
+import formatDate from 'date-fns/fp/format';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
-import formatDate from 'date-fns/fp/format';
 
+import { useTheme } from '../../theme';
 import BottomSheet from '../BottomSheet';
-import TextInput from '../TextInput';
 import Button from '../Button';
+import TextInput from '../TextInput';
 import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
-import { useTheme } from '../../theme';
-
-export const getInitialDateValue = (
-  value: Date,
-  minDate?: Date | undefined,
-  maxDate?: Date | undefined
-) => {
-  if (minDate && value < minDate) {
-    return minDate;
-  }
-
-  if (maxDate && value > maxDate) {
-    return maxDate;
-  }
-
-  return value;
-};
+import useCalculateDate, { getDateValue } from './useCalculateDate';
 
 const DatePickerIOS = ({
   value,
@@ -46,13 +31,14 @@ const DatePickerIOS = ({
   'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
 >) => {
   const [selectingDate, setSelectingDate] = useState<Date>(
-    getInitialDateValue(value || new Date(), minDate, maxDate)
+    getDateValue(value || new Date(), minDate, maxDate)
   );
   const [open, setOpen] = useState(false);
-
   const displayValue = value ? formatDate(displayFormat, value) : '';
-
   const theme = useTheme();
+
+  useCalculateDate({ minDate, maxDate, onChange, value });
+
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputIOS">

package/src/components/DatePicker/__tests__/DatePicker.spec.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Platform } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
 import DatePicker from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Button } from '../../..';
 
 describe('DatePicker', () => {
   it('renders DatePickerIOS when OS is iOS', () => {
@@ -54,4 +56,94 @@ describe('DatePicker', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByTestId('datePickerCalendar')).toBeDefined();
   });
+
+  it.each`
+    OS           | variant
+    ${'ios'}     | ${'calendar'}
+    ${'android'} | ${'calendar'}
+    ${'ios'}     | ${'default'}
+    ${'android'} | ${'default'}
+  `(
+    'changes value when minDate changes with OS=$OS and variant=$variant',
+    ({ OS, variant }) => {
+      Platform.OS = OS;
+      const DatePickerExample = () => {
+        const [minDate, setMinDate] = React.useState<Date | undefined>(
+          new Date('2000-01-01')
+        );
+        const [value, setValue] = React.useState<Date | undefined>(
+          new Date('December 21, 1995')
+        );
+
+        return (
+          <>
+            <Button
+              onPress={() => setMinDate(new Date('2023-11-01'))}
+              text="Change min date"
+            />
+
+            <DatePicker
+              value={value}
+              minDate={minDate}
+              label="Start date"
+              confirmLabel="Confirm"
+              onChange={(date) => setValue(date)}
+              variant={variant}
+            />
+          </>
+        );
+      };
+
+      const { getByText, queryByDisplayValue } = renderWithTheme(
+        <DatePickerExample />
+      );
+
+      expect(queryByDisplayValue('01/01/2000')).toBeTruthy();
+
+      fireEvent.press(getByText('Change min date'));
+      expect(queryByDisplayValue('01/11/2023')).toBeTruthy();
+    }
+  );
+
+  it.each`
+    OS
+    ${'ios'}
+    ${'android'}
+  `('changes value when maxDate changes with OS=$OS', ({ OS }) => {
+    Platform.OS = OS;
+    const DatePickerExample = () => {
+      const [maxDate, setMaxDate] = React.useState<Date | undefined>(
+        new Date('1996-12-21')
+      );
+      const [value, setValue] = React.useState<Date | undefined>(
+        new Date('December 21, 1997')
+      );
+
+      return (
+        <>
+          <Button
+            onPress={() => setMaxDate(new Date('1994-12-21'))}
+            text="Change max date"
+          />
+
+          <DatePicker
+            value={value}
+            maxDate={maxDate}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={(date) => setValue(date)}
+          />
+        </>
+      );
+    };
+
+    const { getByText, queryByDisplayValue } = renderWithTheme(
+      <DatePickerExample />
+    );
+
+    expect(queryByDisplayValue('21/12/1996')).toBeTruthy();
+
+    fireEvent.press(getByText('Change max date'));
+    expect(queryByDisplayValue('21/12/1994')).toBeTruthy();
+  });
 });

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -2,26 +2,27 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import DatePickerIOS, { getInitialDateValue } from '../DatePickerIOS';
+import DatePickerIOS from '../DatePickerIOS';
+import { getDateValue } from '../useCalculateDate';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
   return (props: ModalProps) => <Modal {...props} />;
 });
 
-describe('getInitialDateValue', () => {
+describe('getDateValue', () => {
   describe('when value is less than minDate', () => {
     it('should return minDate', () => {
       const value = new Date('2022-01-01T00:00:00.000Z');
       const minDate = new Date('2025-01-01T00:00:00.000Z');
-      expect(getInitialDateValue(value, minDate)).toBe(minDate);
+      expect(getDateValue(value, minDate)).toBe(minDate);
     });
   });
   describe('when value is greater than maxDate', () => {
     it('should return maxDate', () => {
       const value = new Date('2025-01-01T00:00:00.000Z');
       const maxDate = new Date('2022-01-01T00:00:00.000Z');
-      expect(getInitialDateValue(value, undefined, maxDate)).toBe(maxDate);
+      expect(getDateValue(value, undefined, maxDate)).toBe(maxDate);
     });
   });
   describe('when minDate < value < maxDate', () => {
@@ -29,7 +30,7 @@ describe('getInitialDateValue', () => {
       const minDate = new Date('2022-01-01T00:00:00.000Z');
       const value = new Date('2023-01-01T00:00:00.000Z');
       const maxDate = new Date('2025-01-01T00:00:00.000Z');
-      expect(getInitialDateValue(value, minDate, maxDate)).toBe(value);
+      expect(getDateValue(value, minDate, maxDate)).toBe(value);
     });
   });
 });

package/src/components/DatePicker/useCalculateDate.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { DatePickerProps } from './types';
+
+export const getDateValue = (
+  value: Date,
+  minDate?: Date | undefined,
+  maxDate?: Date | undefined
+) => {
+  if (minDate && value < minDate) {
+    return minDate;
+  }
+
+  if (maxDate && value > maxDate) {
+    return maxDate;
+  }
+
+  return value;
+};
+
+const useCalculateDate = ({
+  maxDate,
+  minDate,
+  onChange,
+  value,
+}: Pick<DatePickerProps, 'maxDate' | 'minDate' | 'onChange' | 'value'>) => {
+  useEffect(() => {
+    const newDate = getDateValue(value || new Date(), minDate, maxDate);
+    if (newDate !== value) {
+      onChange(newDate);
+    }
+  }, [maxDate, minDate, value]);
+};
+
+export default useCalculateDate;

package/src/components/PageControl/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Animated, Platform, StyleProp, ViewStyle } from 'react-native';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
 
+import { useTheme } from '../../theme';
 import {
-  StyledPageControlAnimatedView,
   StyledPageControl,
+  StyledPageControlAnimatedView,
 } from './StyledPageControl';
-import { useTheme } from '../../theme';
 
 export interface PageControlProps {
   /**
@@ -37,7 +37,7 @@ const PageControl = ({
   React.useEffect(() => {
     Animated.spring(animatedValue, {
       toValue: currentPage,
-      useNativeDriver: Platform.OS !== 'web',
+      useNativeDriver: false, // Native driver does not support animating width, it will cause the app to crash if set to true
     }).start();
   }, [currentPage]);
 

package/src/components/Swipeable/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Swipeable renders correctly 1`] = `
+exports[`Swipeable renders correctly with variant=card 1`] = `
 <View
   style={
     {
@@ -65,3 +65,69 @@ exports[`Swipeable renders correctly 1`] = `
   />
 </View>
 `;
+
+exports[`Swipeable renders correctly with variant=full-width 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View>
+    <View
+      containerStyle={
+        {
+          "borderRadius": 0,
+        }
+      }
+      onSwipeableClose={[Function]}
+      onSwipeableLeftOpen={[Function]}
+      onSwipeableRightOpen={[Function]}
+      renderLeftActions={[Function]}
+      renderRightActions={[Function]}
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.48,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="small"
+      >
+        Swipeable Item
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

package/src/components/Swipeable/__tests__/index.spec.tsx

@@ -4,7 +4,11 @@ import Typography from '../../Typography';
 import Swipeable from '..';
 
 describe('Swipeable', () => {
-  it('renders correctly', () => {
+  it.each`
+    variant
+    ${'card'}
+    ${'full-width'}
+  `('renders correctly with variant=$variant', ({ variant }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Swipeable
         leftActions={
@@ -25,6 +29,7 @@ describe('Swipeable', () => {
           </>
         }
         rightActionsWidth={168}
+        variant={variant}
       >
         <Typography.Body variant="small">Swipeable Item</Typography.Body>
       </Swipeable>

package/src/components/Swipeable/index.tsx

@@ -66,6 +66,10 @@ export interface SwipeableProps
    * Testing ID of the component
    */
   testID?: string;
+  /**
+   * Variant of the component.
+   */
+  variant?: 'card' | 'full-width';
 }
 
 const renderActions = (
@@ -101,6 +105,7 @@ const Swipeable = ({
   leftActionsWidth,
   rightActions,
   rightActionsWidth,
+  variant = 'card',
   ...swipeableProps
 }: SwipeableProps) => {
   const theme = useTheme();
@@ -150,7 +155,10 @@ const Swipeable = ({
         onSwipeableRightOpen={() => onStateChange?.('rightOpen')}
         onSwipeableClose={() => onStateChange?.('closed')}
         containerStyle={{
-          borderRadius: theme.__hd__.swipeable.radii.swipeableContainer,
+          borderRadius:
+            variant === 'card'
+              ? theme.__hd__.swipeable.radii.swipeableContainer
+              : 0,
         }}
       >
         {children}

package/types/components/DatePicker/DatePickerIOS.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { DatePickerProps } from './types';
-export declare const getInitialDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
 declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => React.JSX.Element;
 export default DatePickerIOS;

package/types/components/DatePicker/useCalculateDate.d.ts

@@ -0,0 +1,4 @@
+import { DatePickerProps } from './types';
+export declare const getDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
+declare const useCalculateDate: ({ maxDate, minDate, onChange, value, }: Pick<DatePickerProps, 'maxDate' | 'minDate' | 'onChange' | 'value'>) => void;
+export default useCalculateDate;

package/types/components/Swipeable/index.d.ts

@@ -37,8 +37,12 @@ export interface SwipeableProps extends Pick<RnghSwipeableProps, 'enableTrackpad
      * Testing ID of the component
      */
     testID?: string;
+    /**
+     * Variant of the component.
+     */
+    variant?: 'card' | 'full-width';
 }
-declare const _default: (({ children, state, onStateChange, leftActions, leftActionsWidth, rightActions, rightActionsWidth, ...swipeableProps }: SwipeableProps) => React.JSX.Element) & {
+declare const _default: (({ children, state, onStateChange, leftActions, leftActionsWidth, rightActions, rightActionsWidth, variant, ...swipeableProps }: SwipeableProps) => React.JSX.Element) & {
     Action: ({ intent, onPress, style, children, testID, }: import("./SwipeableAction").SwipeableActionProps) => React.JSX.Element;
     Content: typeof RectButton;
 };