@paygreen/pgui 2.14.7 → 2.14.9

package/dist/cjs/types/layout/SideNav/index.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { ButtonProps, DrawerContentProps, FlexProps, StackProps, TextProps } from '@chakra-ui/react';
 export type SideNavProps = {
-    isMobileMenuOpen: boolean;
-    onMobileMenuClose: () => void;
+    isOpen: boolean;
+    onClose: () => void;
+    onToggle?: () => void;
+    breakpoint?: any[] | Partial<Record<string, any>>;
 } & FlexProps & DrawerContentProps;
 export type SideNavMenuItemProps = {
     isActive?: boolean;
@@ -10,7 +12,7 @@ export type SideNavMenuItemProps = {
 export type SideNavMenuProps = {
     textProps?: TextProps;
 } & StackProps;
-export declare const SideNav: ({ isMobileMenuOpen, onMobileMenuClose, children, ...props }: SideNavProps) => React.JSX.Element;
+export declare const SideNav: ({ isOpen, onClose, onToggle, breakpoint, children, ...props }: SideNavProps) => React.JSX.Element;
 export declare const SideNavContainer: (props: StackProps) => React.JSX.Element;
 export declare const SideNavHeader: ({ children, ...rest }: FlexProps) => React.JSX.Element;
 export declare const SideNavBody: ({ children, ...rest }: StackProps) => React.JSX.Element;

package/dist/cjs/types/theme/rawStyle/index.d.ts

@@ -1,2 +1,3 @@
 export { chakraStyle } from './chakraStyle';
 export { reactDayPicker } from './reactDayPicker';
+export { scrollbarStyles } from './scrollbarStyles';

package/dist/cjs/types/{hooks/useCustomScrollbar.d.ts → theme/rawStyle/scrollbarStyles.d.ts}

@@ -1,10 +1,4 @@
-export declare const useCustomScrollbar: (options: {
-    trackColorLight: string;
-    trackColorDark: string;
-    thumbColorLight: string;
-    thumbColorDark: string;
-    width?: string;
-}) => {
+export declare const scrollbarStyles: () => {
     '&::-webkit-scrollbar': {
         width: string;
         borderRadius: string;

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useContext, createContext, forwardRef as forwardRef$1, useLayoutEffect, useCallback, useMemo, Fragment, Component } from 'react';
-import { forwardRef, IconButton, useColorModeValue, Card as Card$1, createStylesContext, chakra, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Flex, Icon, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useDisclosure, InputGroup, InputLeftElement, Input as Input$4, InputRightElement, VStack, Divider, HStack, Select as Select$2, useOutsideClick, List, ListItem, useTheme, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, Modal, ModalOverlay, ModalContent, ModalCloseButton, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, useControllableState, useMergeRefs, useStyleConfig, useToken, useColorMode, useBreakpoint, Button as Button$1, Stack, extendTheme } from '@chakra-ui/react';
+import { forwardRef, IconButton, useColorModeValue, Card as Card$1, createStylesContext, chakra, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Flex, Icon, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useDisclosure, InputGroup, InputLeftElement, Input as Input$4, InputRightElement, VStack, Divider, HStack, Select as Select$2, useOutsideClick, List, ListItem, useTheme, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, Modal, ModalOverlay, ModalContent, ModalCloseButton, NumberInput, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, useControllableState, useMergeRefs, useStyleConfig, useToken, useColorMode, Button as Button$1, Stack, extendTheme } from '@chakra-ui/react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -180,7 +180,7 @@ var ActionsButton = forwardRef(function (_a, ref) {
 ActionsButton.displayName = 'ActionsButton';
 
 var Card = function (props) {
-    var bgColor = useColorModeValue('white', 'gray.900');
+    var bgColor = useColorModeValue('white', 'whiteAlpha.50');
     var borderColor = useColorModeValue('gray.100', 'gray.700');
     return (React__default.createElement(Card$1, __assign$2({ p: 6, backgroundColor: bgColor, borderWidth: "1px", borderStyle: "solid", borderColor: borderColor, h: "fit-content", w: "full" }, props)));
 };
@@ -355,7 +355,7 @@ var DataListFooter = function (_a) {
     var rest = __rest$2(_a, []);
     return (React__default.createElement(Box, { mt: "auto" },
         React__default.createElement(Flex, __assign$2({ fontSize: "sm", mt: "-1px", borderTop: "1px solid", p: "2", align: "center", bg: "white", borderTopColor: "gray.100", color: "gray.600", _dark: {
-                bg: 'blackAlpha.50',
+                bg: 'whiteAlpha.50',
                 color: 'gray.300',
                 borderTopColor: 'gray.900'
             } }, rest))));
@@ -368,7 +368,7 @@ var DataList = function (_a) {
             columns: columns,
             isHover: isHover
         } },
-        React__default.createElement(Accordion, __assign$2({ border: "2px solid", borderBottom: "none", borderColor: useColorModeValue('gray.100', 'gray.700'), borderRadius: "md", display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", overflow: "hidden", allowMultiple: !allowToggle ? allowMultiple : false, allowToggle: allowToggle, bg: useColorModeValue('white', 'gray.900') }, rest))));
+        React__default.createElement(Accordion, __assign$2({ border: "2px solid", borderBottom: "none", borderColor: useColorModeValue('gray.100', 'gray.700'), borderRadius: "md", display: "flex", flexDirection: "column", position: "relative", boxShadow: "md", overflow: "hidden", allowMultiple: !allowToggle ? allowMultiple : false, allowToggle: allowToggle, bg: useColorModeValue('white', 'whiteAlpha.50') }, rest))));
 };
 
 var FormGroup = function (_a) {
@@ -59930,61 +59930,82 @@ var BottomBar = function (props) {
     return (React__default.createElement(LayoutContainer, __assign$2({ minH: "4.125rem", bg: bg, boxShadow: "layout", justifyContent: "space-between", alignItems: "center" }, props)));
 };
 
-var useCustomScrollbar = function (options) {
+var chakraStyle = function () { return ({
+    'div[data-popper-placement]': {
+        minWidth: 'auto !important'
+    }
+}); };
+
+var reactDayPicker = {
+    '.rdp': {
+        '--rdp-cell-size': '30px',
+        '--rdp-caption-font-size': 'var(--chakra-sizes-3-5)',
+        '--rdp-accent-color': 'var(--chakra-colors-blue-100)',
+        '--rdp-background-color': 'var(--chakra-colors-gray-200)',
+        '--rdp-outline': '0px',
+        '--rdp-outline-selected': '0px',
+        '--rdp-selected-color': 'var(--chakra-colors-gray-800)',
+        '[data-theme="dark"] &': {
+            '--rdp-accent-color': 'var(--chakra-colors-blue-800)',
+            '--rdp-background-color': 'var(--chakra-colors-gray-600)',
+            '--rdp-selected-color': 'var(--chakra-colors-gray-50)'
+        }
+    },
+    '.rdp-dropdown': {
+        appearance: 'none',
+        backgroundColor: 'var(--chakra-colors-gray-50)',
+        '[data-theme="dark"] &': {
+            backgroundColor: 'var(--chakra-colors-gray-800)'
+        }
+    }
+};
+
+var scrollbarStyles = function () {
     var colorMode = useColorMode().colorMode;
-    var scrollbarStyles = {
+    var trackColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.10)' : 'rgba(255, 255, 255, 0.10)';
+    var thumbColor = colorMode === 'light' ? 'rgba(0, 0, 0, 0.25)' : 'rgba(255, 255, 255, 0.25)';
+    return {
+        // WebKit browsers
         '&::-webkit-scrollbar': {
-            width: options.width || '0.7rem',
+            width: '0.4rem',
             borderRadius: '9999px',
-            backgroundColor: colorMode === 'light'
-                ? options.trackColorLight
-                : options.trackColorDark
+            backgroundColor: trackColor
         },
         '&::-webkit-scrollbar-thumb': {
-            backgroundColor: colorMode === 'light'
-                ? options.thumbColorLight
-                : options.thumbColorDark,
+            backgroundColor: thumbColor,
             borderRadius: '9999px'
         }
     };
-    return scrollbarStyles;
 };
 
-var dateFormat = 'dd/MM/yyyy';
-
-var useIsMobile = function (currentBreakpoint) {
-    return (currentBreakpoint === 'base' ||
-        currentBreakpoint === 'sm' ||
-        currentBreakpoint === 'md' ||
-        currentBreakpoint === 'lg');
-};
+var rawStyle = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  chakraStyle: chakraStyle,
+  reactDayPicker: reactDayPicker,
+  scrollbarStyles: scrollbarStyles
+});
 
 var SideNav = function (_a) {
-    var isMobileMenuOpen = _a.isMobileMenuOpen, onMobileMenuClose = _a.onMobileMenuClose, children = _a.children, props = __rest$2(_a, ["isMobileMenuOpen", "onMobileMenuClose", "children"]);
+    var isOpen = _a.isOpen, onClose = _a.onClose; _a.onToggle; var breakpoint = _a.breakpoint, children = _a.children, props = __rest$2(_a, ["isOpen", "onClose", "onToggle", "breakpoint", "children"]);
     var theme = useTheme();
-    var currentBreakpoint = useBreakpoint();
-    var isMobile = useIsMobile(currentBreakpoint);
     var colorMode = useColorMode().colorMode;
     var useColorModeValue = function (light, dark) {
         return colorMode === 'light' ? light : dark;
     };
-    var customScrollBar = useCustomScrollbar({
-        trackColorLight: 'rgba(0, 0, 0, 0.05)',
-        trackColorDark: 'rgba(255, 255, 255, 0.05)',
-        thumbColorLight: 'rgba(0, 0, 0, 0.10)',
-        thumbColorDark: 'rgba(255, 255, 255, 0.10)'
-    });
     var bgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
+    var isMobile = useBreakpointValue(breakpoint || {
+        base: true,
+        md: false
+    });
     if (isMobile) {
-        return (React__default.createElement(Drawer, { isOpen: isMobileMenuOpen, placement: "left", onClose: onMobileMenuClose, size: "nav" },
+        return (React__default.createElement(Drawer, { isOpen: isOpen, placement: "left", onClose: onClose, size: "nav" },
             React__default.createElement(DrawerOverlay, null),
-            React__default.createElement(DrawerContent, __assign$2({ bgGradient: bgGradient, color: "white", pt: 6, px: 6, overflow: "auto", sx: customScrollBar }, props),
+            React__default.createElement(DrawerContent, __assign$2({ bgGradient: bgGradient, color: "white", pt: 6, px: 6, overflow: "auto", sx: scrollbarStyles() }, props),
                 React__default.createElement(DrawerCloseButton, null),
                 children)));
     }
     var flexBgGradient = useColorModeValue(theme.colors.gradients.primary, 'linear(to-l, gray.900, gray.900)');
-    var color = useColorModeValue('white', 'gray.50');
-    return (React__default.createElement(Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: color, pt: 6, px: 6, position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
+    return (React__default.createElement(Flex, __assign$2({ w: "18rem", h: "100vh", flexDir: "column", bgGradient: flexBgGradient, color: useColorModeValue('white', 'gray.50'), pt: 6, px: 6, position: "fixed", top: "0", left: "0", sx: scrollbarStyles(), transform: !isOpen ? 'translateX(-18rem)' : 'none', transition: '0.4s ease-in-out' }, props), children));
 };
 var SideNavContainer = function (props) { return (React__default.createElement(VStack, __assign$2({ spacing: 6, alignItems: "inherit", minH: "100%" }, props))); };
 var SideNavHeader = function (_a) {
@@ -59993,13 +60014,7 @@ var SideNavHeader = function (_a) {
 };
 var SideNavBody = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
-    var customScrollBar = useCustomScrollbar({
-        trackColorLight: 'rgba(0, 0, 0, 0.10)',
-        trackColorDark: 'rgba(255, 255, 255, 0.10)',
-        thumbColorLight: 'rgba(0, 0, 0, 0.15)',
-        thumbColorDark: 'rgba(255, 255, 255, 0.15)'
-    });
-    return (React__default.createElement(VStack, __assign$2({ pt: 4, spacing: 5, pr: 1, alignItems: "inherit", overflowY: "auto", sx: customScrollBar }, rest), children));
+    return (React__default.createElement(VStack, __assign$2({ pt: 4, spacing: 5, pr: 2, alignItems: "inherit", overflowY: "auto", sx: scrollbarStyles() }, rest), children));
 };
 var SideNavFooter = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
@@ -60765,42 +60780,6 @@ var typography = {
 
 var foundations = __assign$2(__assign$2({ colors: colors }, typography), { sizes: sizes, shadows: shadows, radii: radii });
 
-var chakraStyle = function () { return ({
-    'div[data-popper-placement]': {
-        minWidth: 'auto !important'
-    }
-}); };
-
-var reactDayPicker = {
-    '.rdp': {
-        '--rdp-cell-size': '30px',
-        '--rdp-caption-font-size': 'var(--chakra-sizes-3-5)',
-        '--rdp-accent-color': 'var(--chakra-colors-blue-100)',
-        '--rdp-background-color': 'var(--chakra-colors-gray-200)',
-        '--rdp-outline': '0px',
-        '--rdp-outline-selected': '0px',
-        '--rdp-selected-color': 'var(--chakra-colors-gray-800)',
-        '[data-theme="dark"] &': {
-            '--rdp-accent-color': 'var(--chakra-colors-blue-800)',
-            '--rdp-background-color': 'var(--chakra-colors-gray-600)',
-            '--rdp-selected-color': 'var(--chakra-colors-gray-50)'
-        }
-    },
-    '.rdp-dropdown': {
-        appearance: 'none',
-        backgroundColor: 'var(--chakra-colors-gray-50)',
-        '[data-theme="dark"] &': {
-            backgroundColor: 'var(--chakra-colors-gray-800)'
-        }
-    }
-};
-
-var rawStyle = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  chakraStyle: chakraStyle,
-  reactDayPicker: reactDayPicker
-});
-
 var externalsStyles = function (props) {
     return Object.values(rawStyle).reduce(function (acc, cur) { return (__assign$2(__assign$2({}, acc), (typeof cur === 'function' ? cur(props) : cur))); }, {});
 };
@@ -60822,5 +60801,14 @@ var config = {
 };
 var theme = extendTheme(__assign$2(__assign$2({ styles: styles }, foundations), { components: __assign$2({}, components), config: config }));
 
+var dateFormat = 'dd/MM/yyyy';
+
+var useIsMobile = function (currentBreakpoint) {
+    return (currentBreakpoint === 'base' ||
+        currentBreakpoint === 'sm' ||
+        currentBreakpoint === 'md' ||
+        currentBreakpoint === 'lg');
+};
+
 export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, FormGroup, InputDayPicker, InputPhone, InputRangePicker, LayoutContainer, MenuItem, ModalResponsive, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, formatPhoneIntl, getPaginationInfo, isValidPhone, theme, useIsMobile };
 //# sourceMappingURL=index.js.map