@tecsinapse/react-core 1.12.8 → 1.14.0

package/dist/components/molecules/Calendar/components/MonthWeek.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Calendar/components/MonthWeek.tsx"],"names":["MonthWeek","week","referenceDate","type","value","TextComponent","onChange","checkIfIsBetween","React","useCallback","date","_value","lowest","highest","checkIfIsSelected","handlePressCell","newValue","undefined","lowestDiff","Math","abs","highestDiff","map","index","isSelected","isBetween","isRangeStart","isRangeEnd","colorTone","getMonth","getDate","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { compareAsc as compare, differenceInDays, isSameDay } from 'date-fns';\nimport { Cell, Selected, Week } from '../styled';\nimport { Value, DateRange, SelectionType } from '../Calendar';\nimport { TextProps } from '@tecsinapse/react-core';\n\ninterface IMonthWeek<T extends SelectionType> {\n  TextComponent: React.FC<TextProps>;\n  /** any as workaround for TS type mismatching */\n  onChange?: (value?: any) => void | never;\n  type?: T;\n  value?: Value<T>;\n  week: Date[];\n  referenceDate: Date;\n}\n\nconst MonthWeek = <T extends SelectionType>({\n  week,\n  referenceDate,\n  type,\n  value,\n  TextComponent,\n  onChange,\n}: IMonthWeek<T>) => {\n  const checkIfIsBetween = React.useCallback(\n    (date: Date, _value?: Value<T>) => {\n      if (type !== 'range' || !_value) return false;\n      else {\n        const { lowest, highest } = _value as DateRange;\n        if (!highest) return false;\n        return compare(lowest, date) <= 0 && compare(highest, date) >= 0;\n      }\n    },\n    [type]\n  );\n\n  const checkIfIsSelected = React.useCallback(\n    (date: Date, _value?: Value<T>) => {\n      if (!_value) return false;\n      else if (type === 'range' && _value) {\n        const { lowest, highest } = _value as DateRange;\n        return (\n          isSameDay(lowest, date) ||\n          (highest ? isSameDay(highest, date) : false)\n        );\n      } else {\n        return isSameDay(_value as Date, date);\n      }\n    },\n    [type]\n  );\n\n  const handlePressCell = React.useCallback(\n    (date: Date, _value?: Value<T>) => () => {\n      if (type === 'day') {\n        onChange?.(date as never);\n      } else if (!_value) {\n        onChange?.({ lowest: date } as never);\n      } else {\n        let newValue;\n        const { lowest, highest } = _value as DateRange;\n\n        if (!highest) {\n          if (compare(date, lowest) === -1) {\n            newValue = { lowest: date, highest: lowest };\n          } else if (compare(date, lowest) === 0) {\n            newValue = undefined;\n          } else {\n            newValue = { lowest: lowest, highest: date };\n          }\n        } else {\n          if (compare(date, lowest) === -1) {\n            newValue = { lowest: date, highest: highest };\n          } else if (compare(date, lowest) === 0) {\n            newValue = { lowest: highest, highest: undefined };\n          } else {\n            if (compare(date, highest) === -1) {\n              const lowestDiff = Math.abs(differenceInDays(date, lowest));\n              const highestDiff = Math.abs(differenceInDays(date, highest));\n              newValue = {\n                lowest: lowestDiff < highestDiff ? date : lowest,\n                highest: highestDiff <= lowestDiff ? date : highest,\n              };\n            } else if (compare(date, highest) === 0) {\n              newValue = { lowest: lowest, highest: undefined };\n            } else {\n              newValue = { lowest: lowest, highest: date };\n            }\n          }\n        }\n\n        onChange?.(newValue as never);\n      }\n    },\n    [onChange, type]\n  );\n\n  return (\n    <Week>\n      {week.map((date, index) => {\n        const isSelected = checkIfIsSelected(date, value);\n        const isBetween = checkIfIsBetween(date, value);\n\n        let isRangeStart, isRangeEnd;\n\n        if (type === 'range' && value) {\n          const { lowest, highest } = value as DateRange;\n          isRangeStart = highest && isSameDay(lowest, date);\n          isRangeEnd = !!highest && isSameDay(highest, date);\n        } else {\n          isRangeStart = false;\n          isRangeEnd = false;\n        }\n\n        const colorTone = isSelected\n          ? 'xlight'\n          : date.getMonth() === referenceDate.getMonth()\n          ? 'xdark'\n          : 'light';\n\n        return (\n          <Cell\n            key={date.getDate()}\n            selected={isSelected}\n            highlighted={isBetween}\n            isLineEnd={index === 6}\n            isLineStart={index === 0}\n            isRangeStart={isRangeStart}\n            isRangeEnd={isRangeEnd}\n            onPress={handlePressCell(date, value)}\n          >\n            <Selected selected={isSelected} pointerEvents={'none'}>\n              <TextComponent colorVariant={'secondary'} colorTone={colorTone}>\n                {date.getDate()}\n              </TextComponent>\n            </Selected>\n          </Cell>\n        );\n      })}\n    </Week>\n  );\n};\n\nexport default React.memo(MonthWeek);\n"],"file":"MonthWeek.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Calendar/components/MonthWeek.tsx"],"names":["MonthWeek","week","referenceDate","type","value","TextComponent","onChange","checkIfIsBetween","React","useCallback","date","_value","lowest","highest","checkIfIsSelected","handlePressCell","newValue","undefined","map","index","isSelected","isBetween","isRangeStart","isRangeEnd","colorTone","getMonth","getDate","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { compareAsc as compare, isSameDay } from 'date-fns';\nimport { Cell, Selected, Week } from '../styled';\nimport { Value, DateRange, SelectionType } from '../Calendar';\nimport { TextProps } from '@tecsinapse/react-core';\n\ninterface IMonthWeek<T extends SelectionType> {\n  TextComponent: React.FC<TextProps>;\n  /** any as workaround for TS type mismatching */\n  onChange?: (value?: any) => void | never;\n  type?: T;\n  value?: Value<T>;\n  week: Date[];\n  referenceDate: Date;\n}\n\nconst MonthWeek = <T extends SelectionType>({\n  week,\n  referenceDate,\n  type,\n  value,\n  TextComponent,\n  onChange,\n}: IMonthWeek<T>) => {\n  const checkIfIsBetween = React.useCallback(\n    (date: Date, _value?: Value<T>) => {\n      if (type !== 'range' || !_value) return false;\n      else {\n        const { lowest, highest } = _value as DateRange;\n        if (!highest) return false;\n        return compare(lowest, date) <= 0 && compare(highest, date) >= 0;\n      }\n    },\n    [type]\n  );\n\n  const checkIfIsSelected = React.useCallback(\n    (date: Date, _value?: Value<T>) => {\n      if (!_value) return false;\n      else if (type === 'range' && _value) {\n        const { lowest, highest } = _value as DateRange;\n        return (\n          isSameDay(lowest, date) ||\n          (highest ? isSameDay(highest, date) : false)\n        );\n      } else {\n        return isSameDay(_value as Date, date);\n      }\n    },\n    [type]\n  );\n\n  const handlePressCell = React.useCallback(\n    (date: Date, _value?: Value<T>) => () => {\n      if (type === 'day') {\n        onChange?.(date as never);\n      } else if (!_value) {\n        onChange?.({ lowest: date } as never);\n      } else {\n        let newValue;\n        const { lowest, highest } = _value as DateRange;\n\n        if (!highest) {\n          if (compare(date, lowest) === -1) {\n            newValue = { lowest: date, highest: undefined };\n          } else if (compare(date, lowest) === 0) {\n            newValue = undefined;\n          } else {\n            newValue = { lowest: lowest, highest: date };\n          }\n        } else {\n          if (compare(date, lowest) === -1) {\n            newValue = { lowest: date, highest: undefined };\n          } else if (compare(date, lowest) === 0) {\n            newValue = undefined;\n          } else {\n            if (compare(date, highest) === -1) {\n              newValue = { lowest: lowest, highest: date };\n            } else if (compare(date, highest) === 0) {\n              newValue = { lowest: lowest, highest: undefined };\n            } else {\n              newValue = { lowest: lowest, highest: date };\n            }\n          }\n        }\n\n        onChange?.(newValue as never);\n      }\n    },\n    [onChange, type]\n  );\n\n  return (\n    <Week>\n      {week.map((date, index) => {\n        const isSelected = checkIfIsSelected(date, value);\n        const isBetween = checkIfIsBetween(date, value);\n\n        let isRangeStart, isRangeEnd;\n\n        if (type === 'range' && value) {\n          const { lowest, highest } = value as DateRange;\n          isRangeStart = highest && isSameDay(lowest, date);\n          isRangeEnd = !!highest && isSameDay(highest, date);\n        } else {\n          isRangeStart = false;\n          isRangeEnd = false;\n        }\n\n        const colorTone = isSelected\n          ? 'xlight'\n          : date.getMonth() === referenceDate.getMonth()\n          ? 'xdark'\n          : 'light';\n\n        return (\n          <Cell\n            key={date.getDate()}\n            selected={isSelected}\n            highlighted={isBetween}\n            isLineEnd={index === 6}\n            isLineStart={index === 0}\n            isRangeStart={isRangeStart}\n            isRangeEnd={isRangeEnd}\n            onPress={handlePressCell(date, value)}\n          >\n            <Selected selected={isSelected} pointerEvents={'none'}>\n              <TextComponent colorVariant={'secondary'} colorTone={colorTone}>\n                {date.getDate()}\n              </TextComponent>\n            </Selected>\n          </Cell>\n        );\n      })}\n    </Week>\n  );\n};\n\nexport default React.memo(MonthWeek);\n"],"file":"MonthWeek.js"}

package/dist/components/molecules/Calendar/index.d.ts

@@ -1 +1 @@
-export { default as Calendar, CalendarProps, SelectionType, DateRange, } from './Calendar';
+export { default as Calendar, CalendarProps, SelectionType, DateRange, Value } from './Calendar';

package/dist/components/molecules/Calendar/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "DateRange", {
     return _Calendar.DateRange;
   }
 });
+Object.defineProperty(exports, "Value", {
+  enumerable: true,
+  get: function () {
+    return _Calendar.Value;
+  }
+});
 
 var _Calendar = _interopRequireWildcard(require("./Calendar"));
 

package/dist/components/molecules/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Calendar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export {\n  default as Calendar,\n  CalendarProps,\n  SelectionType,\n  DateRange,\n} from './Calendar';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Calendar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export {\n  default as Calendar,\n  CalendarProps,\n  SelectionType,\n  DateRange,\n  Value\n} from './Calendar';\n"],"file":"index.js"}

package/dist/components/molecules/Calendar/styled.js

@@ -25,21 +25,6 @@ const TitleContainer = _native.default.View`
 }) => theme.color.secondary.xlight};
 `;
 exports.TitleContainer = TitleContainer;
-
-const surfaceBorderRight = ({
-  isRright,
-  theme
-}) => !isWeb && isRright && (0, _native.css)`
-    border-top-right-radius: ${theme === null || theme === void 0 ? void 0 : theme.borderRadius.deca};
-  `;
-
-const surfaceBorderLeft = ({
-  isLeft,
-  theme
-}) => !isWeb && isLeft && (0, _native.css)`
-    border-top-left-radius: ${theme === null || theme === void 0 ? void 0 : theme.borderRadius.deca};
-  `;
-
 const Control = (0, _native.default)(_PressableSurface.PressableSurface)(props => {
   var _props$theme, _props$theme2, _props$theme3;
 
@@ -48,8 +33,6 @@ const Control = (0, _native.default)(_PressableSurface.PressableSurface)(props =
     padding: ${(_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.spacing.centi};
     border-radius: ${(_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.borderRadius.mili};
     margin: ${(_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.spacing.mili};
-    ${surfaceBorderRight(props)}
-    ${surfaceBorderLeft(props)}
   `;
 });
 exports.Control = Control;

package/dist/components/molecules/Calendar/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Calendar/styled.ts"],"names":["isWeb","Platform","OS","TitleContainer","styled","View","theme","color","secondary","xlight","surfaceBorderRight","isRright","borderRadius","deca","surfaceBorderLeft","isLeft","Control","PressableSurface","props","align","spacing","centi","mili","getCapitalizedTextComponent","component","Content","miscellaneous","surfaceColor","Week","Selected","selected","primary","medium","Cell","highlighted","isLineEnd","isLineStart","isRangeStart","isRangeEnd","borderRadiusSize","rightBorderRadius","leftBorderRadius","borderEffect","backgroundColor","light"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform, PressableProps, ViewProps } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\ninterface ButtonBorders {\n  isLeft?: boolean;\n  isRright?: boolean;\n}\n\nexport const TitleContainer = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nconst surfaceBorderRight = ({\n  isRright,\n  theme,\n}: ButtonBorders & Partial<StyleProps>) =>\n  !isWeb &&\n  isRright &&\n  css`\n    border-top-right-radius: ${theme?.borderRadius.deca};\n  `;\n\nconst surfaceBorderLeft = ({\n  isLeft,\n  theme,\n}: ButtonBorders & Partial<StyleProps>) =>\n  !isWeb &&\n  isLeft &&\n  css`\n    border-top-left-radius: ${theme?.borderRadius.deca};\n  `;\n\nexport const Control = styled(PressableSurface)(\n  (\n    props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }\n  ) => css`\n    align-items: flex-${props.align};\n    padding: ${props.theme?.spacing.centi};\n    border-radius: ${props.theme?.borderRadius.mili};\n    margin: ${props.theme?.spacing.mili};\n    ${surfaceBorderRight(props)}\n    ${surfaceBorderLeft(props)}\n  `\n);\n\nexport const getCapitalizedTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: capitalize;\n  `;\n};\n\nexport const Content = styled.View<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const Week = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n`;\n\nexport const Selected = styled.View<\n  Partial<StyleProps> & { selected: boolean }\n>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ${({ theme, selected }) =>\n    selected ? theme.color.primary.medium : 'transparent'};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  width: 100%;\n  height: 100%;\n`;\n\nexport const Cell = styled(PressableSurface)<\n  PressableProps &\n    Partial<StyleProps> & {\n      selected: boolean;\n      highlighted: boolean;\n      isLineEnd: boolean;\n      isLineStart: boolean;\n      isRangeStart: boolean;\n      isRangeEnd: boolean;\n    }\n>(\n  ({\n    theme,\n    selected,\n    highlighted,\n    isLineEnd,\n    isLineStart,\n    isRangeStart,\n    isRangeEnd,\n  }) => {\n    const borderRadiusSize = theme.borderRadius.mili;\n\n    const { rightBorderRadius, leftBorderRadius } = {\n      rightBorderRadius:\n        (selected && !isRangeStart) || isLineEnd ? borderRadiusSize : 0,\n      leftBorderRadius:\n        (selected && !isRangeEnd) || isLineStart ? borderRadiusSize : 0,\n    };\n\n    const borderEffect = highlighted ? 0 : borderRadiusSize;\n\n    const backgroundColor = highlighted\n      ? theme.color.primary.light\n      : 'transparent';\n\n    return css`\n      ${isWeb\n        ? css`\n            width: 32px;\n            height: 32px;\n          `\n        : css`\n            aspect-ratio: 1;\n            flex: 1;\n          `}\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ${borderEffect};\n      border-top-left-radius: ${leftBorderRadius};\n      border-bottom-left-radius: ${leftBorderRadius};\n      border-top-right-radius: ${rightBorderRadius};\n      border-bottom-right-radius: ${rightBorderRadius};\n      background-color: ${backgroundColor};\n    `;\n  }\n);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Calendar/styled.ts"],"names":["isWeb","Platform","OS","TitleContainer","styled","View","theme","color","secondary","xlight","Control","PressableSurface","props","align","spacing","centi","borderRadius","mili","getCapitalizedTextComponent","component","Content","deca","miscellaneous","surfaceColor","Week","Selected","selected","primary","medium","Cell","highlighted","isLineEnd","isLineStart","isRangeStart","isRangeEnd","borderRadiusSize","rightBorderRadius","leftBorderRadius","borderEffect","backgroundColor","light"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform, PressableProps, ViewProps } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\ninterface ButtonBorders {\n  isLeft?: boolean;\n  isRright?: boolean;\n}\n\nexport const TitleContainer = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nexport const Control = styled(PressableSurface)(\n  (\n    props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }\n  ) => css`\n    align-items: flex-${props.align};\n    padding: ${props.theme?.spacing.centi};\n    border-radius: ${props.theme?.borderRadius.mili};\n    margin: ${props.theme?.spacing.mili};\n  `\n);\n\nexport const getCapitalizedTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: capitalize;\n  `;\n};\n\nexport const Content = styled.View<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const Week = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n`;\n\nexport const Selected = styled.View<\n  Partial<StyleProps> & { selected: boolean }\n>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ${({ theme, selected }) =>\n    selected ? theme.color.primary.medium : 'transparent'};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  width: 100%;\n  height: 100%;\n`;\n\nexport const Cell = styled(PressableSurface)<\n  PressableProps &\n    Partial<StyleProps> & {\n      selected: boolean;\n      highlighted: boolean;\n      isLineEnd: boolean;\n      isLineStart: boolean;\n      isRangeStart: boolean;\n      isRangeEnd: boolean;\n    }\n>(\n  ({\n    theme,\n    selected,\n    highlighted,\n    isLineEnd,\n    isLineStart,\n    isRangeStart,\n    isRangeEnd,\n  }) => {\n    const borderRadiusSize = theme.borderRadius.mili;\n\n    const { rightBorderRadius, leftBorderRadius } = {\n      rightBorderRadius:\n        (selected && !isRangeStart) || isLineEnd ? borderRadiusSize : 0,\n      leftBorderRadius:\n        (selected && !isRangeEnd) || isLineStart ? borderRadiusSize : 0,\n    };\n\n    const borderEffect = highlighted ? 0 : borderRadiusSize;\n\n    const backgroundColor = highlighted\n      ? theme.color.primary.light\n      : 'transparent';\n\n    return css`\n      ${isWeb\n        ? css`\n            width: 32px;\n            height: 32px;\n          `\n        : css`\n            aspect-ratio: 1;\n            flex: 1;\n          `}\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ${borderEffect};\n      border-top-left-radius: ${leftBorderRadius};\n      border-bottom-left-radius: ${leftBorderRadius};\n      border-top-right-radius: ${rightBorderRadius};\n      border-bottom-right-radius: ${rightBorderRadius};\n      background-color: ${backgroundColor};\n    `;\n  }\n);\n"],"file":"styled.js"}

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

@@ -1,18 +1,19 @@
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 import { CalendarProps, SelectionType } from '../Calendar';
-import { DatePickerModalProps } from './Modal';
-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;
 }
-declare function DatePicker<T extends SelectionType>({ month, year, onChange, value, type, format, placeholder, onFocus, onBlur, disabled, controlComponent, hintComponent, hint, variant, TextComponent, CalendarComponent, bottomOffset, rightComponent, animationType, style, locale, closeOnPick, ...rest }: DatePickerProps<T>): JSX.Element;
+declare function DatePicker<T extends SelectionType>({ month, year, onChange, value, type, format, placeholder, onFocus, onBlur, disabled, controlComponent, hintComponent, hint, variant, TextComponent, CalendarComponent, rightComponent, style, locale, closeOnPick, renderCalendar, requestShowCalendar, requestCloseCalendar, ...rest }: DatePickerProps<T>): JSX.Element;
 export default DatePicker;

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

@@ -13,12 +13,10 @@ var _Input = require("../../atoms/Input");
 
 var _Text = require("../../atoms/Text");
 
-var _Modal = require("./Modal");
+var _HintInputContainer = require("../HintInputContainer");
 
 var _styled = require("./styled");
 
-var _HintInputContainer = require("../HintInputContainer");
-
 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; }
@@ -42,12 +40,13 @@ function DatePicker({
   variant,
   TextComponent = _Text.Text,
   CalendarComponent,
-  bottomOffset,
   rightComponent,
-  animationType = 'fade',
   style,
   locale,
   closeOnPick = false,
+  renderCalendar,
+  requestShowCalendar,
+  requestCloseCalendar,
   ...rest
 }) {
   const {
@@ -55,15 +54,10 @@ function DatePicker({
     handleBlur,
     handleFocus
   } = (0, _Input.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;
@@ -90,7 +84,7 @@ function DatePicker({
   const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
   (0, React.useEffect)(() => {
     if (closeOnPick && value && type === 'day') {
-      setTimeout(handleCloseModal, 200);
+      setTimeout(requestCloseCalendar, 200);
     }
 
     if (closeOnPick && value && type === 'range') {
@@ -98,13 +92,22 @@ function DatePicker({
         lowest,
         highest
       } = value;
-      lowest && highest && setTimeout(handleCloseModal, 200);
+      lowest && highest && setTimeout(requestCloseCalendar, 200);
     }
-  }, [value, closeOnPick, type, handleCloseModal]);
-  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue()) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
+  }, [value, closeOnPick, type, requestCloseCalendar]);
+  const calendar = React.createElement(CalendarComponent, {
+    pointerEvents: 'box-none',
+    type: type,
+    value: value,
+    month: month,
+    year: year,
+    onChange: onChange,
+    locale: locale
+  });
+  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowCalendar, getDisplayValue()) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
     focused: focused,
     viewStyle: style,
-    onPress: handlePressInput,
+    onPress: handleShowCalendar,
     disabled: disabled,
     hintComponent: hintComponent,
     LabelComponent: TextComponent,
@@ -118,20 +121,7 @@ function DatePicker({
   }, rest), React.createElement(StyledText, {
     fontWeight: "bold",
     disabled: disabled
-  }, getDisplayValue() || ' ')), React.createElement(_Modal.Modal, {
-    CalendarComponent: CalendarComponent,
-    bottomOffset: bottomOffset,
-    visible: modalVisible,
-    onRequestClose: handleCloseModal,
-    animated: true,
-    animationType: animationType,
-    month: month,
-    year: year,
-    onChange: onChange,
-    value: value,
-    type: type,
-    locale: locale
-  }));
+  }, getDisplayValue() || ' ')), renderCalendar(calendar, handleBlur));
 }
 
 var _default = DatePicker;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","bottomOffset","rightComponent","animationType","style","locale","closeOnPick","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","useCallback","handleCloseModal","getDisplayValue","lowest","highest","StyledText","setTimeout"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { DatePickerModalProps, Modal } from './Modal';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { useEffect } from 'react';\n\nexport interface DatePickerProps<T extends SelectionType>\n  extends InputContainerProps,\n    DatePickerModalProps<T>,\n    Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  locale,\n  closeOnPick = false,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = React.useCallback(() => {\n    setModalVisible(true);\n    handleFocus();\n  }, [handleFocus, setModalVisible]);\n\n  const handleCloseModal = React.useCallback(() => {\n    setModalVisible(false);\n    handleBlur();\n  }, [handleBlur, setModalVisible]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(handleCloseModal, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(handleCloseModal, 200);\n    }\n  }, [value, closeOnPick, type, handleCloseModal]);\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        CalendarComponent={CalendarComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        month={month}\n        year={year}\n        onChange={onChange}\n        value={value}\n        type={type}\n        locale={locale}\n      />\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","rightComponent","style","locale","closeOnPick","renderCalendar","requestShowCalendar","requestCloseCalendar","rest","focused","handleBlur","handleFocus","handleShowCalendar","React","useCallback","getDisplayValue","lowest","highest","StyledText","setTimeout","calendar"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;;;AAmBA,SAASA,UAAT,CAA6C;AAE3CC,EAAAA,KAF2C;AAG3CC,EAAAA,IAH2C;AAI3CC,EAAAA,QAJ2C;AAK3CC,EAAAA,KAL2C;AAM3CC,EAAAA,IAN2C;AAO3CC,EAAAA,MAAM,GAAG,YAPkC;AAQ3CC,EAAAA,WAR2C;AAS3CC,EAAAA,OAT2C;AAU3CC,EAAAA,MAV2C;AAW3CC,EAAAA,QAX2C;AAY3CC,EAAAA,gBAZ2C;AAa3CC,EAAAA,aAb2C;AAc3CC,EAAAA,IAd2C;AAe3CC,EAAAA,OAf2C;AAgB3CC,EAAAA,aAAa,GAAGC,UAhB2B;AAiB3CC,EAAAA,iBAjB2C;AAkB3CC,EAAAA,cAlB2C;AAmB3CC,EAAAA,KAnB2C;AAoB3CC,EAAAA,MApB2C;AAqB3CC,EAAAA,WAAW,GAAG,KArB6B;AAsB3CC,EAAAA,cAtB2C;AAuB3CC,EAAAA,mBAvB2C;AAwB3CC,EAAAA,oBAxB2C;AAyB3C,KAAGC;AAzBwC,CAA7C,EA0BoC;AAElC,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,0BAC3CpB,OAD2C,EAE3CC,MAF2C,EAG3C,CAACC,QAH0C,CAA7C;AAMA,QAAMmB,kBAAkB,GAAGC,KAAK,CAACC,WAAN,CAAkB,MAAM;AACjDR,IAAAA,mBAAmB;AACnBK,IAAAA,WAAW;AACZ,GAH0B,EAGxB,CAACA,WAAD,EAAcL,mBAAd,CAHwB,CAA3B;;AAKA,QAAMS,eAAe,GAAG,MAAM;AAC5B,QAAI,CAAC5B,KAAL,EAAY,OAAOG,WAAP;;AACZ,QAAIF,IAAI,KAAK,KAAb,EAAoB;AAClB,aAAO,qBAAWD,KAAX,EAA0BE,MAA1B,EAAkC;AAAEc,QAAAA,MAAM,EAAEA;AAAV,OAAlC,CAAP;AACD,KAFD,MAEO;AACL,YAAM;AAAEa,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAsB9B,KAA5B;AACA,UAAI8B,OAAJ,EACE,OAAQ,GAAE,qBAAWD,MAAX,EAAmB3B,MAAnB,EAA2B;AACnCc,QAAAA,MAAM,EAAEA;AAD2B,OAA3B,CAEP,MAAK,qBAAWc,OAAX,EAAoB5B,MAApB,EAA4B;AAAEc,QAAAA,MAAM,EAAEA;AAAV,OAA5B,CAAgD,EAFxD,CADF,KAIK,OAAO,qBAAWa,MAAX,EAAmB3B,MAAnB,EAA2B;AAAEc,QAAAA,MAAM,EAAEA;AAAV,OAA3B,CAAP;AACN;AACF,GAZD;;AAcA,QAAMe,UAAU,GAAG,oCAAuBpB,aAAvB,CAAnB;AAEA,uBAAU,MAAM;AACd,QAAIM,WAAW,IAAIjB,KAAf,IAAwBC,IAAI,KAAK,KAArC,EAA4C;AAC1C+B,MAAAA,UAAU,CAACZ,oBAAD,EAAuB,GAAvB,CAAV;AACD;;AACD,QAAIH,WAAW,IAAIjB,KAAf,IAAwBC,IAAI,KAAK,OAArC,EAA8C;AAC5C,YAAM;AAAE4B,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAsB9B,KAA5B;AACA6B,MAAAA,MAAM,IAAIC,OAAV,IAAqBE,UAAU,CAACZ,oBAAD,EAAuB,GAAvB,CAA/B;AACD;AACF,GARD,EAQG,CAACpB,KAAD,EAAQiB,WAAR,EAAqBhB,IAArB,EAA2BmB,oBAA3B,CARH;AAUA,QAAMa,QAAQ,GACZ,oBAAC,iBAAD;AACE,IAAA,aAAa,EAAE,UADjB;AAEE,IAAA,IAAI,EAAEhC,IAFR;AAGE,IAAA,KAAK,EAAED,KAHT;AAIE,IAAA,KAAK,EAAEH,KAJT;AAKE,IAAA,IAAI,EAAEC,IALR;AAME,IAAA,QAAQ,EAAEC,QANZ;AAOE,IAAA,MAAM,EAAEiB;AAPV,IADF;AAYA,SACE,0CACGT,gBAAgB,GACfA,gBAAgB,CAACkB,kBAAD,EAAqBG,eAAe,EAApC,CADD,GAGf,oBAAC,sCAAD;AACE,IAAA,OAAO,EAAEN,OADX;AAEE,IAAA,SAAS,EAAEP,KAFb;AAGE,IAAA,OAAO,EAAEU,kBAHX;AAIE,IAAA,QAAQ,EAAEnB,QAJZ;AAKE,IAAA,aAAa,EAAEE,aALjB;AAME,IAAA,cAAc,EAAEG,aANlB;AAOE,IAAA,OAAO,EAAED,OAPX;AAQE,IAAA,IAAI,EAAED,IARR;AASE,IAAA,cAAc,EACZ,0CACE,oBAAC,oBAAD;AAAc,MAAA,IAAI,EAAC,gBAAnB;AAAoC,MAAA,IAAI,EAAC,SAAzC;AAAmD,MAAA,IAAI,EAAC;AAAxD,MADF,EAEGK,cAFH;AAVJ,KAeMO,IAfN,GAiBE,oBAAC,UAAD;AAAY,IAAA,UAAU,EAAC,MAAvB;AAA8B,IAAA,QAAQ,EAAEf;AAAxC,KACGsB,eAAe,MAAM,GADxB,CAjBF,CAJJ,EA0BGV,cAAc,CAACe,QAAD,EAAWV,UAAX,CA1BjB,CADF;AA8BD;;eAEc3B,U","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  CalendarComponent: React.FC<CalendarProps<T>>\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null\n  requestShowCalendar: () => void\n  requestCloseCalendar: () => void\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  rightComponent,\n  style,\n  locale,\n  closeOnPick = false,\n  renderCalendar,\n  requestShowCalendar,\n  requestCloseCalendar,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  \n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const handleShowCalendar = React.useCallback(() => {\n    requestShowCalendar()\n    handleFocus();\n  }, [handleFocus, requestShowCalendar]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(requestCloseCalendar, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(requestCloseCalendar, 200);\n    }\n  }, [value, closeOnPick, type, requestCloseCalendar]);\n\n  const calendar = (\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  )\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handleShowCalendar, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handleShowCalendar}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      {renderCalendar(calendar, handleBlur)}\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}

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

@@ -1,20 +1,6 @@
 import { FC } from 'react';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
-export declare const Backdrop: import("@emotion/native").StyledComponent<import("../../atoms/PressableSurface").PressableSurfaceProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
-export declare const ModalContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    offset: number;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
-    ref?: import("react").Ref<import("react-native").View> | undefined;
-}>;
 export declare const getStyledTextComponent: (component: FC<TextProps>) => import("@emotion/native").StyledComponent<TextProps & {
     children?: import("react").ReactNode;
 } & {

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

@@ -3,63 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarIcon = exports.getStyledTextComponent = exports.ModalContent = exports.Backdrop = void 0;
+exports.CalendarIcon = exports.getStyledTextComponent = void 0;
 
 var _native = _interopRequireWildcard(require("@emotion/native"));
 
-var _reactNative = require("react-native");
-
-var _definitions = require("../../../styles/definitions");
-
-var _utils = require("../../../utils");
-
 var _Icon = require("../../atoms/Icon");
 
 var _Input = require("../../atoms/Input");
 
-var _PressableSurface = require("../../atoms/PressableSurface");
-
 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; }
 
-const isWeb = _reactNative.Platform.OS === 'web';
-const Backdrop = (0, _native.default)(_PressableSurface.PressableSurface)`
-  ${({
-  theme
-}) => isWeb ? (0, _native.css)`
-          justify-content: center;
-          align-items: center;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100vh;
-        ` : (0, _native.css)`
-          justify-content: flex-end;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100%;
-        `}
-`;
-exports.Backdrop = Backdrop;
-const ModalContent = _native.default.View`
-  background-color: transparent;
-  padding-bottom: ${({
-  offset
-}) => `${(0, _utils.RFValue)(offset)}px`};
-  ${({
-  theme: {
-    borderRadius
-  }
-}) => (0, _native.css)`
-    ${isWeb ? `
-      border-radius: ${borderRadius.micro};
-    ` : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-exports.ModalContent = ModalContent;
-
 const getStyledTextComponent = component => {
   return (0, _native.default)(component)(props => {
     var _props$theme;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","theme","miscellaneous","overlay","ModalContent","styled","View","offset","borderRadius","micro","deca","getStyledTextComponent","component","props","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAGA,MAAMA,KAAK,GAAGC,sBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,kCAAP,CAA8C;AACtE,IAAI,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACAL,KAAK,GACD,gBAAI;AACZ;AACA;AACA,8BAA8B,2BAASK,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SANS,GAOD,gBAAI;AACZ;AACA,8BAA8B,2BAASF,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SAAU;AACV,CAdO;;AAgBA,MAAMC,YAAY,GAAGC,gBAAOC,IAEjC;AACF;AACA,oBAAoB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAE,oBAAQA,MAAR,CAAgB,IAAI;AAC3D,IAAI,CAAC;AAAEN,EAAAA,KAAK,EAAE;AAAEO,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMZ,KAAK,GACF;AACT,uBAAuBY,YAAY,CAACC,KAAM;AAC1C,KAHW,GAIF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAhBO;;;AAkBA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACZ,KAD2C,iDACjD,aAAaa,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBH,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMI,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACkB,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACoB,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform } from 'react-native';\nimport { hex2rgba } from '../../../styles/definitions';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${({ theme }) =>\n    isWeb\n      ? css`\n          justify-content: center;\n          align-items: center;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100vh;\n        `\n      : css`\n          justify-content: flex-end;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100%;\n        `}\n`;\n\nexport const ModalContent = styled.View<\n  { offset: number } & Partial<StyleProps>\n>`\n  background-color: transparent;\n  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["getStyledTextComponent","component","props","theme","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAGO,MAAMA,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACC,KAD2C,iDACjD,aAAaC,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBJ,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMK,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACQ,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { TextProps } from '../../atoms/Text';\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}

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

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
-import { DateTimePickerModalProps } from './Modal';
-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;
 }
 declare const DateTimePicker: React.FC<DateTimePickerProps>;
 export default DateTimePicker;

package/dist/components/molecules/DateTimePicker/DateTimePicker.js

@@ -15,10 +15,12 @@ var _Text = require("../../atoms/Text");
 
 var _styled = require("../DatePicker/styled");
 
-var _Modal = require("./Modal");
+var _DateTimeSelector = require("../DateTimeSelector");
 
 var _HintInputContainer = require("../HintInputContainer");
 
+var _styled2 = require("./styled");
+
 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; }
@@ -54,11 +56,12 @@ const DateTimePicker = ({
   hint,
   variant = 'default',
   TextComponent = _Text.Text,
-  DateTimeSelectorComponent,
-  bottomOffset,
+  DateTimeSelectorComponent = _DateTimeSelector.DateTimeSelector,
   rightComponent,
-  animationType = 'fade',
   style,
+  renderSelector,
+  requestShowSelector,
+  requestCloseSelector,
   ...rest
 }) => {
   const {
@@ -66,47 +69,23 @@ const DateTimePicker = ({
     handleBlur,
     handleFocus
   } = (0, _Input.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 => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    requestCloseSelector();
   };
 
   const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
   const displayValue = (value ? (0, _dateFns.format)(value, format, {
     locale: locale
   }) : placeholder) || ' ';
-  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, displayValue) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
-    focused: focused,
-    viewStyle: style,
-    onPress: handlePressInput,
-    disabled: disabled,
-    LabelComponent: TextComponent,
-    variant: variant,
-    hint: hint,
-    hintComponent: hintComponent,
-    rightComponent: React.createElement(React.Fragment, null, React.createElement(_styled.CalendarIcon, {
-      name: "calendar-sharp",
-      type: "ionicon",
-      size: "centi"
-    }), rightComponent)
-  }, rest), React.createElement(StyledText, {
-    fontWeight: "bold",
-    disabled: disabled
-  }, displayValue)), React.createElement(_Modal.Modal, {
-    DateTimeSelectorComponent: DateTimeSelectorComponent,
-    bottomOffset: bottomOffset,
-    visible: modalVisible,
-    onRequestClose: handleCloseModal,
-    animated: true,
-    animationType: animationType,
-    onChange: onChange,
+  const StyledDateTimeSelector = (0, _styled2.getStyledDateTimeSelector)(DateTimeSelectorComponent);
+  const dateTimeSelector = React.createElement(StyledDateTimeSelector, {
     value: value,
     mode: mode,
     format: format,
@@ -124,8 +103,27 @@ const DateTimePicker = ({
     monthLabel: monthLabel,
     yearLabel: yearLabel,
     hourLabel: hourLabel,
-    minuteLabel: minuteLabel
-  }));
+    minuteLabel: minuteLabel,
+    onChange: handleChoosing
+  });
+  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowSelector, displayValue) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
+    focused: focused,
+    viewStyle: style,
+    onPress: handleShowSelector,
+    disabled: disabled,
+    LabelComponent: TextComponent,
+    variant: variant,
+    hint: hint,
+    hintComponent: hintComponent,
+    rightComponent: React.createElement(React.Fragment, null, React.createElement(_styled.CalendarIcon, {
+      name: "calendar-sharp",
+      type: "ionicon",
+      size: "centi"
+    }), rightComponent)
+  }, rest), React.createElement(StyledText, {
+    fontWeight: "bold",
+    disabled: disabled
+  }, displayValue)), renderSelector(dateTimeSelector, handleBlur));
 };
 
 var _default = DateTimePicker;

package/dist/components/molecules/DateTimePicker/DateTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","bottomOffset","rightComponent","animationType","style","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","handleCloseModal","StyledText","displayValue"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelectorProps } from '../DateTimeSelector';\nimport { DateTimePickerModalProps, Modal } from './Modal';\nimport { HintInputContainer } from '../HintInputContainer';\n\nexport interface DateTimePickerProps\n  extends InputContainerProps,\n    DateTimePickerModalProps,\n    Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  ...rest\n}) => {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = () => {\n    setModalVisible(true);\n    handleFocus();\n  };\n\n  const handleCloseModal = () => {\n    setModalVisible(false);\n    handleBlur();\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue =\n    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||\n    ' ';\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        DateTimeSelectorComponent={DateTimeSelectorComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        onChange={onChange}\n        value={value}\n        mode={mode}\n        format={format}\n        locale={locale}\n        upperDateThreshold={upperDateThreshold}\n        lowerDateThreshold={lowerDateThreshold}\n        offsetThreshold={offsetThreshold}\n        upperOffsetThreshold={upperOffsetThreshold}\n        lowerOffsetThreshold={lowerOffsetThreshold}\n        dateModalTitle={dateModalTitle}\n        timeModalTitle={timeModalTitle}\n        dateConfirmButtonText={dateConfirmButtonText}\n        timeConfirmButtonText={timeConfirmButtonText}\n        dayLabel={dayLabel}\n        monthLabel={monthLabel}\n        yearLabel={yearLabel}\n        hourLabel={hourLabel}\n        minuteLabel={minuteLabel}\n      />\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","onChange","value","mode","format","locale","upperDateThreshold","lowerDateThreshold","offsetThreshold","upperOffsetThreshold","lowerOffsetThreshold","dateModalTitle","timeModalTitle","dateConfirmButtonText","timeConfirmButtonText","dayLabel","monthLabel","yearLabel","hourLabel","minuteLabel","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","DateTimeSelectorComponent","DateTimeSelector","rightComponent","style","renderSelector","requestShowSelector","requestCloseSelector","rest","focused","handleBlur","handleFocus","handleShowSelector","handleChoosing","StyledText","displayValue","StyledDateTimeSelector","dateTimeSelector"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';\nimport { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { getStyledDateTimeSelector } from './styled';\n\nexport interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null\n  requestShowSelector: () => void\n  requestCloseSelector: () => void\n}\n\nconst DateTimePicker: React.FC<DateTimePickerProps> = ({\n  onChange,\n  value,\n  mode = 'date',\n  format = 'yyyy-MM-dd hh:mm:ss',\n  locale,\n  upperDateThreshold,\n  lowerDateThreshold,\n  offsetThreshold,\n  upperOffsetThreshold,\n  lowerOffsetThreshold,\n  dateModalTitle,\n  timeModalTitle,\n  dateConfirmButtonText,\n  timeConfirmButtonText,\n  dayLabel,\n  monthLabel,\n  yearLabel,\n  hourLabel,\n  minuteLabel,\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant = 'default',\n  TextComponent = Text,\n  DateTimeSelectorComponent = DateTimeSelector,\n  rightComponent,\n  style,\n  renderSelector,\n  requestShowSelector,\n  requestCloseSelector,\n  ...rest\n}) => {\n  \n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const handleShowSelector = () => {\n    requestShowSelector()\n    handleFocus();\n  };\n\n  const handleChoosing = (value: Date) => {\n    onChange?.(value)\n    requestCloseSelector()\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';\n  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)\n\n  const dateTimeSelector = (\n    <StyledDateTimeSelector\n      value={value}\n      mode={mode}\n      format={format}\n      locale={locale}\n      upperDateThreshold={upperDateThreshold}\n      lowerDateThreshold={lowerDateThreshold}\n      offsetThreshold={offsetThreshold}\n      upperOffsetThreshold={upperOffsetThreshold}\n      lowerOffsetThreshold={lowerOffsetThreshold}\n      dateModalTitle={dateModalTitle}\n      timeModalTitle={timeModalTitle}\n      dateConfirmButtonText={dateConfirmButtonText}\n      timeConfirmButtonText={timeConfirmButtonText}\n      dayLabel={dayLabel}\n      monthLabel={monthLabel}\n      yearLabel={yearLabel}\n      hourLabel={hourLabel}\n      minuteLabel={minuteLabel}\n      onChange={handleChoosing}\n    />\n  )\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handleShowSelector, displayValue)\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handleShowSelector}\n          disabled={disabled}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          hintComponent={hintComponent}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {displayValue}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      {renderSelector(dateTimeSelector, handleBlur)}\n    </>\n  );\n};\n\nexport default DateTimePicker;\n"],"file":"DateTimePicker.js"}