@tap-payments/os-micro-frontend-shared 0.0.267 → 0.0.268-test.1

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

@@ -2,6 +2,7 @@ import { MouseEvent } from 'react';
 import { PopperProps } from '@mui/material/Popper';
 import type { CalenderMode, Timezone } from '../../types/index.js';
 import { SxProps } from '@mui/system';
+import { RangeDatepickerProps } from './components/RangeDatepicker/RangeDatepicker';
 interface RangeCalendarProps {
     defaultDate: [Date, Date];
     onDateChange: (date: [Date, Date], timezoneOffset?: number) => void;
@@ -22,6 +23,7 @@ interface RangeCalendarProps {
     renderCalendarButton?: (open: boolean, onOpenCalender: (event: MouseEvent<HTMLElement>) => void) => React.ReactNode;
     mainSx?: SxProps;
     popperProps?: Partial<PopperProps>;
+    rangeDatePickerProps?: Partial<RangeDatepickerProps>;
 }
-declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, popperProps, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
+declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
 export default RangeCalender;

package/build/components/RangeCalender/RangeCalender.js

@@ -13,7 +13,7 @@ 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, calendarPopperSx, renderCalendarButton, mainSx, popperProps, }) {
+function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, }) {
     const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
     const [values, setValues] = useState(dates);
     const [selectedTimezone, setSelectedTimezone] = useState(timezone);
@@ -87,6 +87,6 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
                     onCloseCalender();
                 } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: Object.assign({ zIndex: 3 }, calendarPopperSx) }, popperProps, { 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') }))] })] }))] }))] }) }))] })));
+                                            } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _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/RangeDatepicker/RangeDatepicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CalendarProps } from 'react-multi-date-picker';
 import { Dates } from '../../type';
-interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
+export interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
     isAr?: boolean;
     isHijri: boolean;
     values: Dates;

package/build/components/RangeCalender/style.js

@@ -113,6 +113,10 @@ export const CalenderWrapper = styled(Box)(({ theme }) => ({
     '.rmdp-day.start.end': {
         overflow: 'hidden',
     },
+    '.rmdp-day.rmdp-disabled': {
+        color: '#ccc',
+        cursor: 'not-allowed',
+    },
 }));
 export const CancelButton = styled(Button)(({ theme }) => ({
     textTransform: 'capitalize',

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 import { Box, useTheme } from '@mui/material';
 import Dropdown from '../../DropdownMenu';
 import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../../constants/index.js';
@@ -9,6 +9,7 @@ import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableR
 function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
+    const columnFilterRef = useRef(null);
     const theme = useTheme();
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
@@ -45,7 +46,13 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                     const isPinned = pinnedColumns.includes(id);
                     const isDefaultPinned = !!column.isDefaultPinned;
                     const isSelected = selectedColumn === id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
+                            var _a;
+                            onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
+                            if (columnFilterRef.current) {
+                                (_a = columnFilterRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                            }
+                        }, sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({ ref: columnFilterRef }, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
                                     event.stopPropagation();
                                     handlePinClick(id);
                                 }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));

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

@@ -1,5 +1,10 @@
 /// <reference types="react" />
-import { IColumnFilter } from '../../../../types/index.js';
-declare function ColumnFilter(filter: IColumnFilter): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof ColumnFilter>;
+declare const _default: import("react").ForwardRefExoticComponent<({
+    onConfirm?: ((filterValues: import("../../../../types/index.js").ColumnFilterValues) => void) | undefined;
+    onClear: (apiKeys: string[]) => void;
+    onColumnFilterClearClick?: (() => void) | undefined;
+    data?: import("../../../../types/index.js").ColumnFilterValues | undefined;
+    isOnlyOneFilter?: boolean | undefined;
+    wrapperSx?: import("@mui/system").SxProps | undefined;
+} & (import("../../../../types/index.js").IColumnFilterList | import("../../../../types/index.js").IColumnFilterInputs | import("../../../../types/index.js").IColumnFilterCustom)) & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Popper from '@mui/material/Popper';
@@ -8,13 +8,14 @@ import Inputs from './Inputs';
 import List from './List';
 import { FilterWrapper } from './style';
 import CustomBackdrop from '../../../CustomBackdrop';
-function ColumnFilter(filter) {
+function ColumnFilter(filter, ref) {
     const [anchorEl, setAnchorEl] = useState(null);
     const openDropdown = (event) => {
         setAnchorEl(event.currentTarget);
     };
     const onCloseDropdown = () => {
         setAnchorEl(null);
+        console.log('close');
     };
     const filterData = useMemo(() => { var _a; return ((_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [filter]);
     const listFilterData = useMemo(() => {
@@ -23,11 +24,7 @@ function ColumnFilter(filter) {
         const rawData = (_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey];
         return Array.isArray(rawData) ? rawData : [];
     }, [filter]);
-    const showClearIcon = useMemo(() => Object.values(filterData || {}).some((value) => {
-        if (typeof value === 'string' || Array.isArray(value))
-            return value.length > 0;
-        return Boolean(value);
-    }) || listFilterData.length > 0, [filterData, listFilterData]);
+    const showClearIcon = true;
     const open = Boolean(anchorEl);
     const filterApiKeys = useMemo(() => {
         var _a;
@@ -50,10 +47,10 @@ function ColumnFilter(filter) {
         }
         return null;
     }, [open, filter, anchorEl, setAnchorEl]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
-                                filter.onClear(filterApiKeys);
-                            } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
-                        zIndex: 9999,
-                    } }, { children: renderFilter }))] })) })));
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown, ref: ref }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
+                                        filter.onClear(filterApiKeys);
+                                    } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown, ref: ref })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown, sx: { background: 'red', zIndex: 12 } })] })) })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
+                    zIndex: 9999,
+                } }, { children: renderFilter }))] }));
 }
-export default memo(ColumnFilter);
+export default forwardRef(ColumnFilter);

package/build/components/VirtualTable/style.js

@@ -29,7 +29,7 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
 }));
 export const StyledCell = styled(TableCell, {
-    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
+    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
 })(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',

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.267",
+  "version": "0.0.268-test.1",
   "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}