@paygreen/pgui 2.14.6 → 2.14.8

package/dist/cjs/types/hooks/useCustomScrollbar.d.ts

@@ -0,0 +1,17 @@
+export declare const useCustomScrollbar: (options: {
+    trackColorLight: string;
+    trackColorDark: string;
+    thumbColorLight: string;
+    thumbColorDark: string;
+    width?: string;
+}) => {
+    '&::-webkit-scrollbar': {
+        width: string;
+        borderRadius: string;
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: 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, useBreakpoint, useColorMode, 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, useBreakpoint, 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)));
 };
@@ -319,7 +319,7 @@ var DataListAccordionIcon = function (_a) {
 };
 var DataListAccordionPanel = function (_a) {
     var rest = __rest$2(_a, []);
-    return (React__default.createElement(AccordionPanel, __assign$2({ boxShadow: "inner", px: "4", py: "3", bg: "gray.50", _dark: { bg: 'gray.900' } }, rest)));
+    return (React__default.createElement(AccordionPanel, __assign$2({ boxShadow: "inner", px: "4", py: "3", bg: "gray.50", _dark: { bg: 'gray.800' } }, rest)));
 };
 var DataListRow = function (_a) {
     var _b = _a.isVisible, isVisible = _b === void 0 ? true : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, rest = __rest$2(_a, ["isVisible", "isDisabled"]);
@@ -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,6 +59930,26 @@ 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 colorMode = useColorMode().colorMode;
+    var scrollbarStyles = {
+        '&::-webkit-scrollbar': {
+            width: options.width || '0.7rem',
+            borderRadius: '9999px',
+            backgroundColor: colorMode === 'light'
+                ? options.trackColorLight
+                : options.trackColorDark
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: colorMode === 'light'
+                ? options.thumbColorLight
+                : options.thumbColorDark,
+            borderRadius: '9999px'
+        }
+    };
+    return scrollbarStyles;
+};
+
 var dateFormat = 'dd/MM/yyyy';
 
 var useIsMobile = function (currentBreakpoint) {
@@ -59948,17 +59968,12 @@ var SideNav = function (_a) {
     var useColorModeValue = function (light, dark) {
         return colorMode === 'light' ? light : dark;
     };
-    var customScrollBar = {
-        '&::-webkit-scrollbar': {
-            width: '0.7rem',
-            borderRadius: '9999px',
-            backgroundColor: useColorModeValue('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')
-        },
-        '&::-webkit-scrollbar-thumb': {
-            backgroundColor: useColorModeValue('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)'),
-            borderRadius: '9999px'
-        }
-    };
+    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)');
     if (isMobile) {
         return (React__default.createElement(Drawer, { isOpen: isMobileMenuOpen, placement: "left", onClose: onMobileMenuClose, size: "nav" },
@@ -59969,7 +59984,7 @@ var SideNav = function (_a) {
     }
     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, overflow: "auto", 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: color, pt: 6, px: 6, position: "fixed", top: "0", left: "0", sx: customScrollBar }, props), children));
 };
 var SideNavContainer = function (props) { return (React__default.createElement(VStack, __assign$2({ spacing: 6, alignItems: "inherit", minH: "100%" }, props))); };
 var SideNavHeader = function (_a) {
@@ -59978,7 +59993,13 @@ var SideNavHeader = function (_a) {
 };
 var SideNavBody = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);
-    return (React__default.createElement(VStack, __assign$2({ pt: 4, spacing: 5, alignItems: "inherit" }, rest), 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));
 };
 var SideNavFooter = function (_a) {
     var children = _a.children, rest = __rest$2(_a, ["children"]);