@tecsinapse/react-core 1.12.5 → 1.12.9

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,29 +1,27 @@
 import { format as formatDate } from 'date-fns';
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
+import { useEffect } from 'react';
 import { InputContainerProps, useInputFocus } from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { CalendarProps, DateRange, SelectionType } from '../Calendar';
-import { DatePickerModalProps, Modal } from './Modal';
-import { CalendarIcon, getStyledTextComponent } from './styled';
 import { HintInputContainer } from '../HintInputContainer';
-import { useEffect } from 'react';
+import { CalendarIcon, getStyledTextComponent } from './styled';
 
-export interface DatePickerProps<T extends SelectionType>
-  extends InputContainerProps,
-    DatePickerModalProps<T>,
-    Omit<CalendarProps<T>, 'style'> {
+export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  animationType?: ModalBaseProps['animationType'];
+  CalendarComponent: React.FC<CalendarProps<T>>
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
   format?: string;
   closeOnPick?: boolean;
+  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null
+  requestShowCalendar: () => void
+  requestCloseCalendar: () => void
 }
 
 function DatePicker<T extends SelectionType>({
@@ -34,7 +32,6 @@ function DatePicker<T extends SelectionType>({
   value,
   type,
   format = 'yyyy-MM-dd',
-
   placeholder,
   onFocus,
   onBlur,
@@ -45,31 +42,26 @@ function DatePicker<T extends SelectionType>({
   variant,
   TextComponent = Text,
   CalendarComponent,
-  bottomOffset,
   rightComponent,
-  animationType = 'fade',
   style,
   locale,
   closeOnPick = false,
+  renderCalendar,
+  requestShowCalendar,
+  requestCloseCalendar,
   ...rest
 }: DatePickerProps<T>): JSX.Element {
+  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
     !disabled
   );
 
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  const handlePressInput = React.useCallback(() => {
-    setModalVisible(true);
+  const handleShowCalendar = React.useCallback(() => {
+    requestShowCalendar()
     handleFocus();
-  }, [handleFocus, setModalVisible]);
-
-  const handleCloseModal = React.useCallback(() => {
-    setModalVisible(false);
-    handleBlur();
-  }, [handleBlur, setModalVisible]);
+  }, [handleFocus, requestShowCalendar]);
 
   const getDisplayValue = () => {
     if (!value) return placeholder;
@@ -89,23 +81,35 @@ function DatePicker<T extends SelectionType>({
 
   useEffect(() => {
     if (closeOnPick && value && type === 'day') {
-      setTimeout(handleCloseModal, 200);
+      setTimeout(requestCloseCalendar, 200);
     }
     if (closeOnPick && value && type === 'range') {
       const { lowest, highest } = value as DateRange;
-      lowest && highest && setTimeout(handleCloseModal, 200);
+      lowest && highest && setTimeout(requestCloseCalendar, 200);
     }
-  }, [value, closeOnPick, type, handleCloseModal]);
+  }, [value, closeOnPick, type, requestCloseCalendar]);
+
+  const calendar = (
+    <CalendarComponent
+      pointerEvents={'box-none'}
+      type={type}
+      value={value}
+      month={month}
+      year={year}
+      onChange={onChange}
+      locale={locale}
+    />
+  )
 
   return (
     <>
       {controlComponent ? (
-        controlComponent(handlePressInput, getDisplayValue())
+        controlComponent(handleShowCalendar, getDisplayValue())
       ) : (
         <HintInputContainer
           focused={focused}
           viewStyle={style}
-          onPress={handlePressInput}
+          onPress={handleShowCalendar}
           disabled={disabled}
           hintComponent={hintComponent}
           LabelComponent={TextComponent}
@@ -124,20 +128,7 @@ function DatePicker<T extends SelectionType>({
           </StyledText>
         </HintInputContainer>
       )}
-      <Modal
-        CalendarComponent={CalendarComponent}
-        bottomOffset={bottomOffset}
-        visible={modalVisible}
-        onRequestClose={handleCloseModal}
-        animated
-        animationType={animationType}
-        month={month}
-        year={year}
-        onChange={onChange}
-        value={value}
-        type={type}
-        locale={locale}
-      />
+      {renderCalendar(calendar, handleBlur)}
     </>
   );
 }

package/src/components/molecules/DatePicker/styled.ts

@@ -1,50 +1,10 @@
 import styled, { css } from '@emotion/native';
 import { FC } from 'react';
-import { Platform } from 'react-native';
-import { hex2rgba } from '../../../styles/definitions';
 import { StyleProps } from '../../../types/defaults';
-import { RFValue } from '../../../utils';
 import { Icon } from '../../atoms/Icon';
 import { disabledInputStyles, InputContainerProps } from '../../atoms/Input';
-import { PressableSurface } from '../../atoms/PressableSurface';
 import { TextProps } from '../../atoms/Text';
 
-const isWeb = Platform.OS === 'web';
-
-export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
-  ${({ theme }) =>
-    isWeb
-      ? css`
-          justify-content: center;
-          align-items: center;
-          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
-          height: 100vh;
-        `
-      : css`
-          justify-content: flex-end;
-          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
-          height: 100%;
-        `}
-`;
-
-export const ModalContent = styled.View<
-  { offset: number } & Partial<StyleProps>
->`
-  background-color: transparent;
-  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
-  ${({ theme: { borderRadius } }) => css`
-    ${isWeb
-      ? `
-      border-radius: ${borderRadius.micro};
-    `
-      : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-
 export const getStyledTextComponent = (component: FC<TextProps>) => {
   return styled(component)(
     (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,26 +1,25 @@
 import { format as formatDate } from 'date-fns';
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps, useInputFocus } from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';
-import { DateTimeSelectorProps } from '../DateTimeSelector';
-import { DateTimePickerModalProps, Modal } from './Modal';
+import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
 import { HintInputContainer } from '../HintInputContainer';
+import { getStyledDateTimeSelector } from './styled';
 
-export interface DateTimePickerProps
-  extends InputContainerProps,
-    DateTimePickerModalProps,
-    Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  animationType?: ModalBaseProps['animationType'];
+  DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
+  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null
+  requestShowSelector: () => void
+  requestCloseSelector: () => void
 }
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -34,7 +33,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   offsetThreshold,
   upperOffsetThreshold,
   lowerOffsetThreshold,
-
   dateModalTitle,
   timeModalTitle,
   dateConfirmButtonText,
@@ -44,7 +42,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   yearLabel,
   hourLabel,
   minuteLabel,
-
   placeholder,
   onFocus,
   onBlur,
@@ -54,45 +51,68 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   hint,
   variant = 'default',
   TextComponent = Text,
-  DateTimeSelectorComponent,
-  bottomOffset,
+  DateTimeSelectorComponent = DateTimeSelector,
   rightComponent,
-  animationType = 'fade',
   style,
+  renderSelector,
+  requestShowSelector,
+  requestCloseSelector,
   ...rest
 }) => {
+  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
     !disabled
   );
 
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  const handlePressInput = () => {
-    setModalVisible(true);
+  const handleShowSelector = () => {
+    requestShowSelector()
     handleFocus();
   };
 
-  const handleCloseModal = () => {
-    setModalVisible(false);
-    handleBlur();
+  const handleChoosing = (value: Date) => {
+    onChange?.(value)
+    requestCloseSelector()
   };
 
   const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue =
-    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
-    ' ';
+  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';
+  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)
+
+  const dateTimeSelector = (
+    <StyledDateTimeSelector
+      value={value}
+      mode={mode}
+      format={format}
+      locale={locale}
+      upperDateThreshold={upperDateThreshold}
+      lowerDateThreshold={lowerDateThreshold}
+      offsetThreshold={offsetThreshold}
+      upperOffsetThreshold={upperOffsetThreshold}
+      lowerOffsetThreshold={lowerOffsetThreshold}
+      dateModalTitle={dateModalTitle}
+      timeModalTitle={timeModalTitle}
+      dateConfirmButtonText={dateConfirmButtonText}
+      timeConfirmButtonText={timeConfirmButtonText}
+      dayLabel={dayLabel}
+      monthLabel={monthLabel}
+      yearLabel={yearLabel}
+      hourLabel={hourLabel}
+      minuteLabel={minuteLabel}
+      onChange={handleChoosing}
+    />
+  )
 
   return (
     <>
       {controlComponent ? (
-        controlComponent(handlePressInput, displayValue)
+        controlComponent(handleShowSelector, displayValue)
       ) : (
         <HintInputContainer
           focused={focused}
           viewStyle={style}
-          onPress={handlePressInput}
+          onPress={handleShowSelector}
           disabled={disabled}
           LabelComponent={TextComponent}
           variant={variant}
@@ -111,33 +131,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
           </StyledText>
         </HintInputContainer>
       )}
-      <Modal
-        DateTimeSelectorComponent={DateTimeSelectorComponent}
-        bottomOffset={bottomOffset}
-        visible={modalVisible}
-        onRequestClose={handleCloseModal}
-        animated
-        animationType={animationType}
-        onChange={onChange}
-        value={value}
-        mode={mode}
-        format={format}
-        locale={locale}
-        upperDateThreshold={upperDateThreshold}
-        lowerDateThreshold={lowerDateThreshold}
-        offsetThreshold={offsetThreshold}
-        upperOffsetThreshold={upperOffsetThreshold}
-        lowerOffsetThreshold={lowerOffsetThreshold}
-        dateModalTitle={dateModalTitle}
-        timeModalTitle={timeModalTitle}
-        dateConfirmButtonText={dateConfirmButtonText}
-        timeConfirmButtonText={timeConfirmButtonText}
-        dayLabel={dayLabel}
-        monthLabel={monthLabel}
-        yearLabel={yearLabel}
-        hourLabel={hourLabel}
-        minuteLabel={minuteLabel}
-      />
+      {renderSelector(dateTimeSelector, handleBlur)}
     </>
   );
 };

package/src/components/molecules/DateTimePicker/styled.ts

@@ -1,56 +1,8 @@
-import styled, { css } from '@emotion/native';
+import styled from '@emotion/native';
 import { FC } from 'react';
-import { Platform } from 'react-native';
 import { StyleProps } from '../../../types/defaults';
-import { RFValue, RFValueStr } from '../../../utils';
-import {
-  PressableSurface,
-  PressableSurfaceProps
-} from '../../atoms/PressableSurface';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
 
-const isWeb = Platform.OS === 'web';
-
-export const StyledPressableSurface = styled(
-  PressableSurface
-)<PressableSurfaceProps>`
-  width: 100%;
-`;
-
-export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
-  ${isWeb
-    ? css`
-        justify-content: center;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100vh;
-      `
-    : css`
-        justify-content: flex-end;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100%;
-      `}
-`;
-
-export const ModalContent = styled.View<
-  { offset: number } & Partial<StyleProps>
->`
-  background-color: transparent;
-  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
-  ${({ theme: { borderRadius } }) => css`
-    ${isWeb
-      ? `
-      width: ${RFValueStr('375px')};
-      border-radius: ${borderRadius.micro};
-    `
-      : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-
 export const getStyledDateTimeSelector = (
   component: FC<DateTimeSelectorProps>
 ) => {

package/src/components/molecules/Grid/Item/Item.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
-  extractNumbersFromString,
-  SpacingType,
-  useTheme,
-} from '@tecsinapse/react-core';
 import { View } from 'react-native';
+import { useTheme } from '../../../../hooks';
+import { SpacingType } from '../../../../types/defaults';
+import { extractNumbersFromString } from '../../../../utils';
 
 type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
 type FlexAlignBase = FlexPositioning | 'stretch';

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -1,12 +1,7 @@
-import {
-  Hint,
-  InputVariantType,
-  PressableInputContainer,
-  PressableInputContainerProps,
-  TextProps,
-} from '@tecsinapse/react-core';
-import { StyleProp, View, ViewStyle } from 'react-native';
 import * as React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import { Hint, InputVariantType, PressableInputContainer, PressableInputContainerProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
 
 export interface HintInputContainerProps extends PressableInputContainerProps {
   viewStyle?: StyleProp<ViewStyle>;

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,15 +1,9 @@
 import React, { FC } from 'react';
-import {
-  FontStackType,
-  FontWeightType,
-  Hint,
-  InputContainerProps,
-  InputElementProps,
-  TextProps,
-} from '@tecsinapse/react-core';
 import { View } from 'react-native';
+import { FontStackType, FontWeightType } from '../../../types/defaults';
+import { Hint, InputContainerProps, InputElementProps } from '../../atoms/Input';
+import { Text, TextProps } from '../../atoms/Text';
 import { StyledInputContainer } from './styled';
-import { Text } from '../../atoms/Text';
 
 export interface TextAreaProps
   extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,

package/src/index.ts

@@ -57,6 +57,7 @@ export {
   CalendarProps,
   DateRange,
   SelectionType,
+  Value
 } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export {

package/src/styles/definitions.ts

@@ -49,7 +49,7 @@ export const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {
 };
 
 export const miscellaneous: Miscellaneous = {
-  shadow: '#85807a', // rgba(133, 128, 122, 0.08)
+  shadow: '#000000', // black
   overlay: '#282625', // rgba(40, 38, 37, 0.5)
   bodyColor: '#f8f7f7',
   surfaceColor: '#ffffff', //input, group button, cards

package/src/utils/extractNumbersFromString.ts

@@ -1,6 +1,5 @@
-export const extractNumbersFromString = (value: string): number => Number(extractDigitsFromString(value));
+export const extractNumbersFromString = (value: string): number =>
+  Number(extractDigitsFromString(value));
 
-/*
- * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91
- * */
-export const extractDigitsFromString = (value: string): string => value.replace(/[^-0-9]/g, '');
+export const extractDigitsFromString = (value: string): string =>
+  value.replace(/[^0-9]/g, '');

package/dist/components/molecules/DatePicker/Modal.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { ModalProps } from 'react-native';
-import { CalendarProps, SelectionType } from '../Calendar';
-export interface DatePickerModalProps<T extends SelectionType> {
-    CalendarComponent?: React.FC<CalendarProps<T>>;
-    bottomOffset?: number;
-}
-export declare const Modal: <T extends SelectionType>({ type, value, onRequestClose, month, year, onChange, CalendarComponent, bottomOffset, locale, ...modalProps }: CalendarProps<T> & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & DatePickerModalProps<T>) => JSX.Element;

package/dist/components/molecules/DatePicker/Modal.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Modal = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _Calendar = require("../Calendar");
-
-var _styled = require("./styled");
-
-var _reactCore = require("@tecsinapse/react-core");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const Component = ({
-  type,
-  value,
-  onRequestClose,
-  month,
-  year,
-  onChange,
-  CalendarComponent = _Calendar.Calendar,
-  bottomOffset = 0,
-  locale,
-  ...modalProps
-}) => {
-  return React.createElement(_reactNative.Modal, _extends({
-    transparent: true,
-    hardwareAccelerated: true,
-    statusBarTranslucent: true
-  }, modalProps, {
-    onRequestClose: onRequestClose
-  }), React.createElement(_styled.Backdrop, {
-    onPress: onRequestClose,
-    effect: "none"
-  }, React.createElement(_reactCore.PressableSurface, null, React.createElement(_styled.ModalContent, {
-    offset: bottomOffset
-  }, React.createElement(CalendarComponent, {
-    pointerEvents: 'box-none',
-    type: type,
-    value: value,
-    month: month,
-    year: year,
-    onChange: onChange,
-    locale: locale
-  })))));
-};
-
-const Modal = Component;
-exports.Modal = Modal;
-//# sourceMappingURL=Modal.js.map

package/dist/components/molecules/DatePicker/Modal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","type","value","onRequestClose","month","year","onChange","CalendarComponent","Calendar","bottomOffset","locale","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAOA,MAAMA,SAAS,GAAG,CAA0B;AAC1CC,EAAAA,IAD0C;AAE1CC,EAAAA,KAF0C;AAG1CC,EAAAA,cAH0C;AAI1CC,EAAAA,KAJ0C;AAK1CC,EAAAA,IAL0C;AAM1CC,EAAAA,QAN0C;AAO1CC,EAAAA,iBAAiB,GAAGC,kBAPsB;AAQ1CC,EAAAA,YAAY,GAAG,CAR2B;AAS1CC,EAAAA,MAT0C;AAU1C,KAAGC;AAVuC,CAA1B,KAW0D;AAC1E,SACE,oBAAC,kBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAER;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,2BAAD,QACE,oBAAC,oBAAD;AAAc,IAAA,MAAM,EAAEM;AAAtB,KACE,oBAAC,iBAAD;AACE,IAAA,aAAa,EAAE,UADjB;AAEE,IAAA,IAAI,EAAER,IAFR;AAGE,IAAA,KAAK,EAAEC,KAHT;AAIE,IAAA,KAAK,EAAEE,KAJT;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,MAAM,EAAEI;AAPV,IADF,CADF,CADF,CAPF,CADF;AAyBD,CArCD;;AAuCO,MAAME,KAAK,GAAGZ,SAAd","sourcesContent":["import * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Calendar, CalendarProps, SelectionType } from '../Calendar';\nimport { Backdrop, ModalContent } from './styled';\nimport { PressableSurface } from '@tecsinapse/react-core';\n\nexport interface DatePickerModalProps<T extends SelectionType> {\n  CalendarComponent?: React.FC<CalendarProps<T>>;\n  bottomOffset?: number;\n}\n\nconst Component = <T extends SelectionType>({\n  type,\n  value,\n  onRequestClose,\n  month,\n  year,\n  onChange,\n  CalendarComponent = Calendar,\n  bottomOffset = 0,\n  locale,\n  ...modalProps\n}: CalendarProps<T> & ModalProps & DatePickerModalProps<T>): JSX.Element => {\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <PressableSurface>\n          <ModalContent offset={bottomOffset}>\n            <CalendarComponent\n              pointerEvents={'box-none'}\n              type={type}\n              value={value}\n              month={month}\n              year={year}\n              onChange={onChange}\n              locale={locale}\n            />\n          </ModalContent>\n        </PressableSurface>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/dist/components/molecules/DateTimePicker/Modal.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { DateTimeSelectorProps } from '../DateTimeSelector';
-export interface DateTimePickerModalProps {
-    DateTimeSelectorComponent?: React.FC<DateTimeSelectorProps>;
-    bottomOffset?: number;
-}
-export declare const Modal: React.FC<DateTimeSelectorProps & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & DateTimePickerModalProps>;