@paygreen/pgui 2.4.0 → 2.5.0

package/dist/cjs/types/components/ModalResponsive/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DrawerProps, ModalProps } from '@chakra-ui/react';
+declare type ModalResponsiveProps = ModalProps & DrawerProps;
+export declare const ModalResponsive: ({ isOpen, onClose, finalFocusRef, children, ...rest }: ModalResponsiveProps) => JSX.Element;
+export {};

package/dist/cjs/types/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './DataList';
 export * from './DayPicker';
 export * from './FormGroup';
 export * from './InputDayPicker';
+export * from './ModalResponsive';
 export * from './Pagination';
 export * from './SearchInput';
 export * from './Select';

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, createElement, Fragment, Component, useCallback, useMemo } from 'react';
-import { forwardRef, IconButton, Flex, createStylesContext, chakra, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Icon, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useDisclosure, Popover, PopoverTrigger, InputGroup, Input as Input$2, InputRightElement, PopoverContent, PopoverArrow, HStack, useControllableState, useMergeRefs, useTheme, useColorModeValue, useStyleConfig, useToken, useBreakpoint, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, VStack, Button as Button$1, Stack, extendTheme } from '@chakra-ui/react';
+import { forwardRef, IconButton, Flex, createStylesContext, chakra, useMultiStyleConfig, useMenuItem, MenuIcon, MenuCommand, useMenuState, Icon, Text, useBreakpointValue, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Accordion, FormControl, FormLabel, FormHelperText, FormErrorMessage, SlideFade, useDisclosure, Popover, PopoverTrigger, InputGroup, Input as Input$2, InputRightElement, PopoverContent, PopoverArrow, useTheme, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, Modal, ModalOverlay, ModalContent, ModalCloseButton, HStack, useControllableState, useMergeRefs, useColorModeValue, useStyleConfig, useToken, useBreakpoint, VStack, Button as Button$1, Stack, extendTheme } from '@chakra-ui/react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -8659,7 +8659,7 @@ var DayPicker = function (props) {
 var FormGroup = function (_a) {
     var children = _a.children, errorMessage = _a.errorMessage, helper = _a.helper, id = _a.id, isRequired = _a.isRequired, label = _a.label, showError = _a.showError, props = __rest$2(_a, ["children", "errorMessage", "helper", "id", "isRequired", "label", "showError"]);
     return (React__default.createElement(FormControl, __assign$2({ isInvalid: showError, isRequired: isRequired }, props),
-        !!label && React__default.createElement(FormLabel, { htmlFor: id }, label),
+        !!label && (React__default.createElement(FormLabel, { htmlFor: id, fontWeight: "bold" }, label)),
         children,
         !!helper && React__default.createElement(FormHelperText, null, helper),
         !!errorMessage && (React__default.createElement(FormErrorMessage, { id: "".concat(id, "-error") },
@@ -8758,6 +8758,25 @@ var InputDayPicker = function (_a) {
                 isOpen && (React__default.createElement(DayPicker, __assign$2({ initialFocus: isOpen, defaultMonth: selectedDay, selected: selectedDay, onSelect: handleDaySelect }, dayPickerProps, { mode: "single" })))))));
 };
 
+var ModalResponsive = function (_a) {
+    var _b;
+    var isOpen = _a.isOpen, onClose = _a.onClose, finalFocusRef = _a.finalFocusRef, children = _a.children, rest = __rest$2(_a, ["isOpen", "onClose", "finalFocusRef", "children"]);
+    var isMobile = useBreakpointValue({ base: true, md: false });
+    var theme = useTheme();
+    if (isMobile) {
+        return (React__default.createElement(Drawer, __assign$2({ isOpen: isOpen, placement: "bottom", onClose: onClose, finalFocusRef: finalFocusRef }, rest),
+            React__default.createElement(DrawerOverlay, null),
+            React__default.createElement(DrawerContent, { borderRadius: "".concat(((_b = theme === null || theme === void 0 ? void 0 : theme.radii) === null || _b === void 0 ? void 0 : _b.md) ? "".concat(theme.radii.md, " ").concat(theme.radii.md, " 0 0") : '0') },
+                React__default.createElement(DrawerCloseButton, null),
+                children)));
+    }
+    return (React__default.createElement(Modal, __assign$2({ isOpen: isOpen, onClose: onClose, finalFocusRef: finalFocusRef, isCentered: true }, rest),
+        React__default.createElement(ModalOverlay, null),
+        React__default.createElement(ModalContent, null,
+            React__default.createElement(ModalCloseButton, null),
+            children)));
+};
+
 var getPaginationInfo = function (_a) {
     var _b = _a.page, page = _b === void 0 ? 1 : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 10 : _c, _d = _a.totalItems, totalItems = _d === void 0 ? 0 : _d;
     var firstItemOnPage = (page - 1) * pageSize + 1;
@@ -51457,5 +51476,5 @@ var styles = {
 
 var theme = extendTheme(__assign$2(__assign$2({ styles: styles }, foundations), { components: __assign$2({}, components) }));
 
-export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, LayoutContainer, MenuItem, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, getPaginationInfo, theme, useIsMobile };
+export { ActionsButton, BottomBar, Card, ConfirmMenuItem, DataList, DataListAccordion, DataListAccordionButton, DataListAccordionIcon, DataListAccordionPanel, DataListCell, DataListContext, DataListFooter, DataListHeader, DataListHeaderContext, DataListRow, DayPicker, FormGroup, InputDayPicker, LayoutContainer, MenuItem, ModalResponsive, Pagination, PaginationButtonFirstPage, PaginationButtonLastPage, PaginationButtonNextPage, PaginationButtonPrevPage, PaginationContext, PaginationInfo, SearchInput, Select, SideNav, SideNavBody, SideNavContainer, SideNavFooter, SideNavHeader, SideNavMenu, SideNavMenuItem, TopBar, TopBarBackAction, TopBarFirstElement, TopBarLastElement, dateFormat, getPaginationInfo, theme, useIsMobile };
 //# sourceMappingURL=index.js.map