@tap-payments/os-micro-frontend-shared 0.0.187 → 0.0.189

package/build/components/Calender/Calender.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
 import { PopperPlacementType } from '@mui/material/Popper';
-import { CalendarProps, DateObject } from 'react-multi-date-picker';
-interface CalenderI extends CalendarProps {
+import { CalendarProps as MDPickerProps, DateObject } from 'react-multi-date-picker';
+interface CalenderProps extends MDPickerProps {
     isAr?: boolean;
     value?: DateObject;
     setValue?: (v: DateObject) => void;
     enableTimePicker?: boolean;
     placement?: PopperPlacementType;
+    sx?: BoxProps['sx'];
 }
-declare function Calender({ isAr, value, setValue, enableTimePicker, placement, ...props }: CalenderI & BoxProps): import("react/jsx-runtime").JSX.Element;
+declare function Calender({ isAr, value, setValue, enableTimePicker, placement, sx, ...props }: CalenderProps): import("react/jsx-runtime").JSX.Element;
+export type { DateObject, CalenderProps };
 declare const _default: import("react").MemoExoticComponent<typeof Calender>;
 export default _default;

package/build/components/Calender/Calender.js

@@ -14,19 +14,19 @@ import { memo, useState } from 'react';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Popper from '@mui/material/Popper';
 import { useTranslation } from 'react-i18next';
-import { Calendar, DateObject } from 'react-multi-date-picker';
-import TimePicker, { getDefaultHour, getDefaultMinute } from '../Timepicker';
+import { Calendar as MDPicker, DateObject } from 'react-multi-date-picker';
+import TimePicker, { getDefaultHour, getDefaultMinute, convertTo12Hour } from '../Timepicker';
 import { darkLeftArrowIcon, darkRightArrowIcon } from '../../constants/index.js';
 import { ArrowButton, CalenderWrapper, SelectedDate, Wrapper, ButtonsWrapper, CancelButton, OkayButton, FooterButtonsWrapper } from './style';
 const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 function Calender(_a) {
     var _b;
-    var { isAr = false, value, setValue, enableTimePicker, placement } = _a, props = __rest(_a, ["isAr", "value", "setValue", "enableTimePicker", "placement"]);
+    var { isAr = false, value, setValue, enableTimePicker, placement, sx } = _a, props = __rest(_a, ["isAr", "value", "setValue", "enableTimePicker", "placement", "sx"]);
     const [anchorEl, setAnchorEl] = useState(null);
     const [date, setDate] = useState(value ? new DateObject(new Date(value.toLocaleString())) : new DateObject(new Date()));
     const [tempDate, setTempDate] = useState(value ? new DateObject(new Date(value.toLocaleString())) : new DateObject(new Date()));
-    const defaultHour = (value === null || value === void 0 ? void 0 : value.hour) && (value === null || value === void 0 ? void 0 : value.hour) > 12 ? (value === null || value === void 0 ? void 0 : value.hour) - 12 : value === null || value === void 0 ? void 0 : value.hour;
-    const [time, setTime] = useState({ hour: defaultHour !== null && defaultHour !== void 0 ? defaultHour : getDefaultHour(), minute: (_b = value === null || value === void 0 ? void 0 : value.minute) !== null && _b !== void 0 ? _b : getDefaultMinute() });
+    const defaultHour = (value === null || value === void 0 ? void 0 : value.hour) ? convertTo12Hour(value.hour) : getDefaultHour();
+    const [time, setTime] = useState({ hour: defaultHour, minute: (_b = value === null || value === void 0 ? void 0 : value.minute) !== null && _b !== void 0 ? _b : getDefaultMinute() });
     const { t } = useTranslation();
     const open = Boolean(anchorEl);
     const getArrow = (direction) => {
@@ -51,7 +51,7 @@ function Calender(_a) {
     const onChangeTimepicker = (newTime) => {
         setTime(newTime);
     };
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(Wrapper, Object.assign({ sx: Object.assign({}, props.sx) }, { children: [_jsx(SelectedDate, Object.assign({ onClick: onOpen, open: open, className: "date-button" }, { children: date.format('MMM D, YYYY') })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement }, { children: _jsxs(CalenderWrapper, Object.assign({ className: "calender-content", open: open }, { children: [_jsx(Calendar, Object.assign({ numberOfMonths: 1, format: "MMM DD YYYY", monthYearSeparator: ' ', renderButton: (direction, handleClick) => (_jsx(ArrowButton, Object.assign({ onClick: handleClick }, { children: _jsx("img", { src: getArrow(direction), alt: "arrow" }) }))), onMonthChange: (v) => {
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleClose }, { children: _jsxs(Wrapper, Object.assign({ sx: Object.assign({}, sx) }, { children: [_jsx(SelectedDate, Object.assign({ onClick: onOpen, open: open, className: "date-button" }, { children: date.format('MMM D, YYYY') })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement }, { children: _jsxs(CalenderWrapper, Object.assign({ className: "calender-content", open: open }, { children: [_jsx(MDPicker, Object.assign({ numberOfMonths: 1, format: "MMM DD YYYY", monthYearSeparator: ' ', renderButton: (direction, handleClick) => (_jsx(ArrowButton, Object.assign({ onClick: handleClick }, { children: _jsx("img", { src: getArrow(direction), alt: "arrow" }) }))), onMonthChange: (v) => {
                                     setTempDate(v);
                                 }, onYearChange: (v) => {
                                     setTempDate(v);

package/build/components/Calender/index.d.ts

@@ -1,2 +1,3 @@
 import Calender from './Calender';
+export type { CalenderProps, DateObject } from './Calender';
 export default Calender;

package/build/components/Timepicker/utils.d.ts

@@ -1,2 +1,3 @@
+export declare const convertTo12Hour: (hour24: number) => number;
 export declare const getDefaultMinute: () => number;
 export declare const getDefaultHour: () => number;

package/build/components/Timepicker/utils.js

@@ -1,2 +1,12 @@
+export const convertTo12Hour = (hour24) => {
+    if (hour24 === 0)
+        return 12;
+    if (hour24 <= 12)
+        return hour24;
+    return hour24 - 12;
+};
 export const getDefaultMinute = () => new Date().getMinutes();
-export const getDefaultHour = () => (new Date().getHours() > 12 ? new Date().getHours() - 12 : new Date().getHours());
+export const getDefaultHour = () => {
+    const currentHour = new Date().getHours();
+    return convertTo12Hour(currentHour);
+};

package/build/components/index.d.ts

@@ -4,7 +4,7 @@ export { default as ActivityAreaChart, type ActivityAreaChartProps, type ChartDa
 export { default as AppWindowWrapper, type AccountHeaderProps, AccountHeaderTitle, AppWindow, type AccountHeaderTitleProps, type AppWindowProps, type WindowProps, AppWindowContext, AppWindowContextProvider, LEFT_SIDEBAR, RIGHT_SIDEBAR, VIEWER_HEIGHT, VIEWER_WIDTH, animationDuration, StyledFooter, StyledHideButton, StyledMenuLink, StyledSubmitButton, SubmitButtonWrapper, } from './AppWindowWrapper';
 export { default as BackgroundAnimation, type BlobGradient, type Blob } from './BackgroundAnimation';
 export { default as Button, PlusButton, StyledButton } from './Button';
-export { default as Calender } from './Calender';
+export { default as Calender, type CalenderProps, type DateObject } from './Calender';
 export { default as Timepicker } from './Timepicker';
 export { default as CardEmptyState, type CardEmptyStateProps } from './CardEmptyState';
 export { default as CardHeadline } from './CardHeadline';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.187",
+  "version": "0.0.189",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",