@tap-payments/os-micro-frontend-shared 0.0.89 → 0.0.90

package/build/components/StatusBar/StatusBar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { AvailableStatus } from '../TableHeader_V2';
+import { TableHeaderStatus } from '../../types/index.js';
+interface StatusBarProps {
+    status?: TableHeaderStatus;
+    availableStatuses?: AvailableStatus[];
+    isFilteredIdsShown?: boolean;
+    onStatusChange?: (status: TableHeaderStatus) => void;
+}
+declare function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof StatusBar>;
+export default _default;

package/build/components/StatusBar/StatusBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StatusButton } from '../TableHeader_V2';
+function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status }) {
+    const { t } = useTranslation();
+    const getButtonStatus = useCallback((buttonStatus) => (buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive'), [status, isFilteredIdsShown]);
+    return (_jsx(_Fragment, { children: availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((s) => {
+            var _a, _b;
+            if (!Array.isArray(s.status)) {
+                return (_createElement(StatusButton, Object.assign({}, s, { key: `status-button-array-${s.status}`, variant: getButtonStatus(s.status), onClick: () => {
+                        if (!Array.isArray(s.status)) {
+                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(s.status);
+                        }
+                    } })));
+            }
+            const isCurrentStatusDropdown = (_a = s.status) === null || _a === void 0 ? void 0 : _a.includes(status || '');
+            const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
+            const statusLabel = isCurrentStatusDropdown ? status : s.status[0];
+            return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
+                        onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(buttonStatus);
+                    }, dropdownOptions: s.status.map((stat) => ({
+                        label: t(stat || ''),
+                        onClick: () => {
+                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(stat);
+                        },
+                        status: stat,
+                    })) })) }, (_b = s === null || s === void 0 ? void 0 : s.status) === null || _b === void 0 ? void 0 : _b[0]));
+        }) }));
+}
+export default memo(StatusBar);

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

@@ -0,0 +1,2 @@
+import StatusBar from './StatusBar';
+export default StatusBar;

package/build/components/StatusBar/index.js

@@ -0,0 +1,2 @@
+import StatusBar from './StatusBar';
+export default StatusBar;

package/build/components/TableCells/CustomCells/ActionCell/constant.d.ts

@@ -25,7 +25,4 @@ export declare const actionIcons: {
     reverse: string;
     destination: string;
     invoice: string;
-    users: string;
-    brand: string;
-    clipboard: string;
 };

package/build/components/TableCells/CustomCells/ActionCell/constant.js

@@ -1,5 +1,5 @@
 import { BadgeVariants } from '../../../CountBadge';
-import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, } from '../../../../constants/index.js';
+import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, } from '../../../../constants/index.js';
 export const flags = {
     GRAY: { icon: closedFlagIcon, color: '#CFCFCF' },
     ORANGE: { icon: orangeFlagIcon, color: '#FFD503' },
@@ -21,7 +21,4 @@ export const actionIcons = {
     reverse: reverseActionIcon,
     destination: destinationReversedTableIcon,
     invoice: viewInvoiceIcon,
-    users: usersIcon,
-    brand: brandPlaceholderIcon,
-    clipboard: clipboardIcon,
 };

package/build/components/TableCells/CustomCells/ActionCell/hooks/useActionCell.d.ts

@@ -12,7 +12,7 @@ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdow
         label: string;
         onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
         onRightClick?: ((e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void) | undefined;
-        icon: "brand" | "users" | "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard";
+        icon: "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice";
         isLoading?: boolean | undefined;
         isError?: boolean | undefined;
         isSuccess?: boolean | undefined;

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -280,5 +280,5 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     sizes?: string | undefined;
     srcSet?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    icon?: "brand" | "users" | "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | undefined;
+    icon?: "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | undefined;
 }, {}, {}>;

package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js

@@ -79,8 +79,6 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         };
         return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
                         overflowX: isPinned ? 'hidden' : 'auto',
-                        paddingBottom: '12px',
-                        backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
                     } }, { children: ListItemWrapper }))) })) })));
     }, [
         itemsCount,
@@ -114,7 +112,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                                     width: '100%',
                                                     minWidth: 'fit-content',
                                                 } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));

package/build/components/VirtualTable/SheetView/style.js

@@ -86,7 +86,6 @@ export const MainTableWrapper = styled('div', {
     marginLeft: hasPinnedStart ? '0' : '32px',
     marginRight: hasPinnedEnd ? '0' : '32px',
     position: 'relative',
-    scrollbarWidth: 'auto',
 }));
 export const UnpinnedTableHeaderWrapper = styled('div')({
     flexShrink: 0,

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js

@@ -56,10 +56,15 @@ function ListItemWrapper(_a) {
         const lastRowContent = _jsx(LastRowContent, { isLoadingRow: isLoadingRow });
         const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isPinned && isLastRow) {
-            return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
+            return _jsx(Box, { sx: { height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT, backgroundColor: '#F6F8FACC' } });
         }
         if (isLastRow) {
-            return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
+            return (_jsx(Box, Object.assign({ sx: {
+                    height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } }, { children: _jsx(Box, Object.assign({ sx: {
                         backgroundColor: '#F6F8FACC',
                         display: 'flex',
                         justifyContent: 'center',

package/build/components/VirtualTable/style.d.ts

@@ -41,7 +41,6 @@ export declare const StyledTableBox: import("@emotion/styled").StyledComponent<i
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showBackgroundColor: boolean;
     showNoDataView: boolean;
-    scrollable?: boolean | undefined;
 }, {}, {}>;
 export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;

package/build/components/VirtualTable/style.js

@@ -82,8 +82,8 @@ export const StyledTableRow = styled(MUITableRow, {
     },
 }))))));
 export const StyledTableBox = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView' && prop !== 'scrollable',
-})(({ theme, showBackgroundColor, showNoDataView, scrollable }) => ({
+    shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView',
+})(({ theme, showBackgroundColor, showNoDataView }) => ({
     position: 'relative',
     backgroundColor: showBackgroundColor ? theme.palette.background.default : 'transparent',
     height: '100%',
@@ -91,24 +91,6 @@ export const StyledTableBox = styled(Box, {
     paddingBottom: showBackgroundColor ? '52px' : '0',
     display: 'flex',
     flexDirection: 'column',
-    '&:hover': {
-        scrollbarWidth: scrollable ? 'auto' : 'none',
-    },
-    '&::-webkit-scrollbar': {
-        display: 'block',
-        height: '13px',
-    },
-    '&::-webkit-scrollbar-track': {
-        background: 'white',
-        border: '1px solid #F2F2F2',
-    },
-    '&::-webkit-scrollbar-thumb': {
-        backgroundColor: '#DADCDF',
-        borderRadius: '32px',
-        border: '3px solid transparent',
-        backgroundClip: 'content-box',
-        minHeight: '20px',
-    },
 }));
 export const ActionIcon = styled(motion.img)(() => ({
     width: '24px',

package/build/components/index.d.ts

@@ -85,6 +85,6 @@ export { default as OTPInput } from './OTPInput';
 export { default as FlagDetails } from './FlagDetails';
 export { default as TapLoader } from './Loaders';
 export { default as Error } from './Error';
+export { default as StatusBar } from './StatusBar';
 export * from './Chip';
 export * from './TableHeader_V2';
-export { default as RangeCalender } from './RangeCalender';

package/build/components/index.js

@@ -85,6 +85,6 @@ export { default as OTPInput } from './OTPInput';
 export { default as FlagDetails } from './FlagDetails';
 export { default as TapLoader } from './Loaders';
 export { default as Error } from './Error';
+export { default as StatusBar } from './StatusBar';
 export * from './Chip';
 export * from './TableHeader_V2';
-export { default as RangeCalender } from './RangeCalender';

package/build/constants/assets.d.ts

@@ -351,8 +351,6 @@ export declare const agreementInstallmentIcon: string;
 export declare const agreementSavedCardIcon: string;
 export declare const agreementSubscriptionIcon: string;
 export declare const brandPlaceholderIcon: string;
-export declare const usersIcon: string;
-export declare const clipboardIcon: string;
 export declare const noAgreementIcon: string;
 export declare const getPaymentMethodsIcon: (source: string) => string;
 export declare const getCountriesIcon: (source: string) => string;

package/build/constants/assets.js

@@ -352,8 +352,6 @@ export const agreementInstallmentIcon = `${lightUrl}/status/InstallmentAgreement
 export const agreementSavedCardIcon = `${lightUrl}/status/CardAgreementIcon.svg`;
 export const agreementSubscriptionIcon = `${lightUrl}/status/SubscriptionAgreementIcon.svg`;
 export const brandPlaceholderIcon = `${lightUrl}/brandPlaceholder.svg`;
-export const usersIcon = `${lightUrl}/users-icons.svg`;
-export const clipboardIcon = `${lightUrl}/Board-Icons.svg`;
 export const noAgreementIcon = `${appBaseUrl}/No Agreement.svg`;
 export const getPaymentMethodsIcon = (source) => `${lightUrl}/payment-method/v2/${source}.svg`;
 export const getCountriesIcon = (source) => `${lightUrl}/country/${source}.svg`;

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.89",
+  "version": "0.0.90",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -125,5 +125,8 @@
       "yarn run prettier:fix",
       "yarn run lint"
     ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
   }
 }

package/build/components/RangeCalender/RangeCalender.d.ts

@@ -1,20 +0,0 @@
-import type { CalenderMode, Timezone } from '../../types/index.js';
-interface RangeCalendarProps {
-    defaultDate: [Date, Date];
-    onDateChange: (date: [Date, Date], timezoneOffset?: number) => void;
-    mode?: CalenderMode;
-    onCalendarModeSwitch?: (mode: CalenderMode) => void;
-    numberOfMonths?: number;
-    noTimezone?: boolean;
-    noQuickFilter?: boolean;
-    maxDateRange?: number;
-    onCalendarGroupChange?: (value: string) => void;
-    groupBy?: string;
-    timezone: Timezone;
-    onChangeTimezoneHistory?: (timezone: Timezone) => void;
-    onChangeTimezone?: (timezone: Timezone) => void;
-    defaultTimezone: Timezone;
-    browserTimezone: string;
-}
-declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
-export default RangeCalender;

package/build/components/RangeCalender/RangeCalender.js

@@ -1,92 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import Box from '@mui/material/Box';
-import Collapse from '@mui/material/Collapse';
-import Popper from '@mui/material/Popper';
-import dayjs from 'dayjs';
-import { useTranslation } from 'react-i18next';
-import { DateObject } from 'react-multi-date-picker';
-import { CustomBackdrop, Error } from '../index.js';
-import GroupBy from './components/GroupBy';
-import Hijri from './components/Hijri';
-import QuickFilters from './components/QuickFilters';
-import RangeDatePicker from './components/RangeDatepicker';
-import CustomTimezone from './components/Timezone';
-import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Main, OkayButton, SelectedDate, TimeZone, Settings } from './style';
-function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }) {
-    const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
-    const [values, setValues] = useState(dates);
-    const [selectedTimezone, setSelectedTimezone] = useState(timezone);
-    const [selectedGroupBy, setSelectedGroupBy] = useState(groupBy || 'day');
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const [isError, setIsError] = useState(false);
-    const { t } = useTranslation();
-    const calendarRef = useRef();
-    const isHijri = mode === 'hijri';
-    const onCloseCalender = () => {
-        setAnchorEl(null);
-    };
-    const onOpenCalender = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    useEffect(() => {
-        if (!open) {
-            if (numberOfMonths === 1)
-                return;
-            setValues([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
-        }
-    }, [open]);
-    useEffect(() => {
-        setSelectedTimezone(timezone);
-    }, [timezone, open]);
-    const updateTimezone = (newTimezone) => {
-        onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(newTimezone);
-        onChangeTimezoneHistory === null || onChangeTimezoneHistory === void 0 ? void 0 : onChangeTimezoneHistory(newTimezone);
-    };
-    const formatDate = (date) => new Date(date.setHour(new Date().getHours()).setMinute(new Date().getMinutes()).setSecond(new Date().getSeconds()).toDate().toLocaleString('en-us', {
-        timeZone: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone,
-    }));
-    const submitDate = () => {
-        setDates(values);
-        onCloseCalender();
-        onDateChange([formatDate(values[0]), formatDate(values[1] || values[0])], timezone === null || timezone === void 0 ? void 0 : timezone.offset);
-        onCalendarGroupChange === null || onCalendarGroupChange === void 0 ? void 0 : onCalendarGroupChange(selectedGroupBy || 'day');
-        updateTimezone(selectedTimezone);
-    };
-    const getSelectedDate = () => {
-        const startSelectedTime = dates[0].format('MMM D');
-        const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
-        return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
-    };
-    const onChange = (newDate) => {
-        if (newDate.length < 2 || !maxDateRange) {
-            setValues(newDate);
-            return;
-        }
-        const startDate = newDate[0].toDate();
-        const endDate = newDate[1].toDate();
-        const numberOfDays = dayjs(endDate).diff(startDate, 'day');
-        if (numberOfDays <= maxDateRange) {
-            setValues(newDate);
-            return;
-        }
-        setIsError(true);
-        setValues([newDate[0], newDate[1].subtract(numberOfDays - maxDateRange, 'd')]);
-        setTimeout(() => {
-            setIsError(false);
-        }, 3000);
-    };
-    const onChangeQuickFilter = (newValues) => {
-        setValues(newValues);
-        if (calendarRef.current)
-            calendarRef.current.set({ date: newValues[0] });
-    };
-    return (_jsxs(Main, Object.assign({ "data-testid": "RangeCalender" }, { children: [_jsx(SelectedDate, Object.assign({ onClick: onOpenCalender, open: open }, { children: (dates[0] || dates[1]) && getSelectedDate() })), open && (_jsx(CustomBackdrop, { onClick: (e) => {
-                    e.stopPropagation();
-                    onCloseCalender();
-                } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: { zIndex: 3 } }, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
-                                                setSelectedGroupBy(group);
-                                            } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, { values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
-}
-export default RangeCalender;

package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.d.ts

@@ -1,11 +0,0 @@
-import { DateObject } from 'react-multi-date-picker';
-import { Dates } from '../../type';
-interface CustomTimePickerProps {
-    values: Dates;
-    startTime: DateObject;
-    endTime: DateObject;
-    onChangeStartTime: (value: DateObject) => void;
-    onChangeEndTime: (value: DateObject) => void;
-}
-declare function CustomTimePicker({ values, onChangeStartTime, onChangeEndTime, startTime, endTime }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element;
-export default CustomTimePicker;

package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import DatePicker, { DateObject } from 'react-multi-date-picker';
-import TimePicker from 'react-multi-date-picker/plugins/time_picker';
-import { IOSSwitch } from '../../../index.js';
-import { AllDayStyled, TimeArea, TimePickerWrapper, TimeAreaInner } from './style';
-function CustomTimePicker({ values, onChangeStartTime, onChangeEndTime, startTime, endTime }) {
-    const [isAllDay, setIsAllDay] = useState(false);
-    const [lastTime, setLastTime] = useState([startTime, endTime]);
-    const { t } = useTranslation();
-    useEffect(() => {
-        if (isAllDay)
-            setIsAllDay(new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear);
-    }, [values]);
-    return (_jsx(_Fragment, { children: new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear && (_jsx(TimeArea, { children: _jsxs(TimeAreaInner, { children: [_jsxs(AllDayStyled, Object.assign({ isAllDay: isAllDay }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('allDay') })), _jsx(IOSSwitch, { checked: isAllDay, onChange: (e) => {
-                                    setIsAllDay(!isAllDay);
-                                    if (e.target.checked) {
-                                        setLastTime([startTime, endTime]);
-                                        onChangeStartTime(new DateObject().setHour(0).setMinute(0));
-                                        onChangeEndTime(new DateObject().setHour(23).setMinute(59));
-                                    }
-                                    else {
-                                        onChangeStartTime(lastTime[0]);
-                                        onChangeEndTime(lastTime[1]);
-                                    }
-                                } })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: startTime, onChange: (time) => {
-                                    onChangeStartTime(time);
-                                }, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] }), _jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: endTime, onChange: (time) => {
-                                    onChangeEndTime(time);
-                                }, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] })] }))] }) })) }));
-}
-export default CustomTimePicker;

package/build/components/RangeCalender/components/CustomTimepicker/index.d.ts

@@ -1,2 +0,0 @@
-import CustomTimepicker from './CustomTimepicker';
-export default CustomTimepicker;

package/build/components/RangeCalender/components/CustomTimepicker/index.js

@@ -1,2 +0,0 @@
-import CustomTimepicker from './CustomTimepicker';
-export default CustomTimepicker;

package/build/components/RangeCalender/components/CustomTimepicker/style.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export declare const AllDayStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    isAllDay: boolean;
-}, {}, {}>;
-export declare const TimeArea: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const TimePickerWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const TimeAreaInner: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/RangeCalender/components/CustomTimepicker/style.js

@@ -1,132 +0,0 @@
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-import { grayUpArrowIcon } from '../../../../constants/index.js';
-export const AllDayStyled = styled(Box, { shouldForwardProp: (props) => props !== 'isAllDay' })(({ theme, isAllDay }) => (Object.assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1), position: 'relative', paddingInline: '5px', '.label': {
-        width: 'max-content',
-    } }, (!isAllDay && {
-    paddingRight: theme.spacing(1),
-    '&:after': {
-        content: '""',
-        position: 'absolute',
-        width: '1px',
-        background: theme.palette.divider,
-        right: 0,
-        height: 17,
-    },
-}))));
-export const TimeArea = styled(Box)(() => ({
-    width: 235,
-}));
-export const TimePickerWrapper = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: '4px',
-    '.rmdp-input': {
-        width: '64px',
-        borderRadius: '19px',
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        color: theme.palette.text.primary,
-        fontSize: '11px',
-        fontWeight: 500,
-        background: 'transparent',
-        cursor: 'pointer',
-    },
-    '.rmdp-input:focus': {
-        boxShadow: theme.shadows[7],
-        border: `1px solid ${theme.palette.info.dark}`,
-        borderRadius: '19px',
-    },
-    '.rmdp-time-picker': {
-        boxShadow: theme.shadows[5],
-        borderRadius: theme.spacing(1),
-        padding: theme.spacing(2),
-        minWidth: 'auto !important',
-        div: {
-            marginTop: 0,
-            display: 'block',
-        },
-        '> div': {
-            width: 32,
-            height: 64,
-        },
-        '.rmdp-arrow': {
-            borderColor: `${theme.palette.background.transparent[1]} !important`,
-        },
-        '.rmdp-arrow-container': {
-            justifyContent: 'center',
-            '&:hover': {
-                backgroundColor: 'transparent',
-                boxShadow: 'unset',
-            },
-        },
-        input: {
-            borderRadius: '4px',
-            border: `1px solid ${theme.palette.divider}`,
-            padding: 0,
-            width: 32,
-            height: 32,
-            fontSize: '11px',
-            color: theme.palette.text.primary,
-            fontWeight: 500,
-            '&:focus, &:focus-visible': {
-                border: `1px solid ${theme.palette.info.dark}`,
-                outline: 'unset',
-            },
-        },
-        '.dvdr': {
-            margin: '7px 4px 0',
-        },
-        '.rmdp-am, .rmdp-pm': {
-            margin: 0,
-            width: 32,
-            height: 32,
-            flex: 'auto',
-            justifyContent: 'center',
-            fontSize: '11px',
-            color: theme.palette.text.primary,
-            fontWeight: 500,
-            display: 'flex',
-            cursor: 'default',
-        },
-        '> div:last-child': {
-            marginInlineStart: '4px',
-            display: 'block !important',
-        },
-        '.rmdp-down, .rmdp-up': {
-            position: 'relative',
-            i: {
-                display: 'none',
-            },
-            '&:before': {
-                content: '""',
-                position: 'absolute',
-                top: '5px',
-                width: '10px',
-                height: '10px',
-                backgroundImage: `url(${grayUpArrowIcon})`,
-            },
-        },
-        '.rmdp-down:before': {
-            transform: 'rotate(180deg)',
-        },
-    },
-    '.rmdp-container': {
-        position: 'relative',
-        '> div': {
-            top: 'unset !important',
-            bottom: '28px',
-            transform: 'unset !important',
-        },
-    },
-}));
-export const TimeAreaInner = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    gap: '8px',
-    alignItems: 'center',
-    borderRadius: '50px',
-    border: '1px solid',
-    borderColor: theme.palette.divider,
-    paddingInline: '5px',
-    width: 'fit-content',
-    height: 32,
-}));

package/build/components/RangeCalender/components/GroupBy/GroupBy.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { BoxProps } from '@mui/material/Box';
-interface GroupByProps extends BoxProps {
-    groupBy: string;
-    isCalenderOpen: boolean;
-    onUpdate?: (value: string) => void;
-}
-declare function GroupBy({ sx, groupBy, isCalenderOpen, onUpdate }: GroupByProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof GroupBy>;
-export default _default;