@hexure/ui 1.9.0 → 1.9.2

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

@@ -16,8 +16,10 @@ export interface ModalProps extends AccessibleProps {
     secondaryButton?: ButtonProps;
     /** Defines a button to be displayed on the far left of the bottom button bar */
     tertiaryButton?: ButtonProps;
-    /** Overrides the default max width of the modal (90vw) */
+    /** Overrides the default max width of the modal (900px) */
     maxWidth?: string;
+    /** Ignore all width/height configuration and display the modal over the entire window with a 40px padding around the edges */
+    fullscreen?: boolean;
     /** It is used to pass child nodes, string values and number as child components. */
     children: ReactNode;
     /** It is used to give title. */

package/dist/esm/index.js

@@ -3098,7 +3098,7 @@ const Wrapper$b = styled.div `
 const StyledIcon$4 = styled(Icon) `
   width: 16px;
   height: 16px;
-  padding: 0px 6px;
+  margin: 0px 6px;
   color: ${props => props.theme.PRIMARY_COLOR.Hex};
   cursor: pointer;
 `;
@@ -3785,8 +3785,10 @@ const Wrapper$7 = styled.div `
   justify-content: center;
 `;
 const Container$1 = styled.dialog `
-  max-width: ${props => props.$maxWidth || '90vw'};
-  width: auto;
+  width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
+  max-width: calc(100vw - 80px);
+  height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
+  max-height: calc(100vh - 80px);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -3795,10 +3797,11 @@ const Container$1 = styled.dialog `
   position: relative;
   padding: 0px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 `;
 const Header$1 = styled.div `
-  position: sticky;
-  top: 0;
+  flex-shrink: 0;
   padding: 20px;
   border-bottom: 1px solid #e7e6e6;
   display: flex;
@@ -3824,12 +3827,11 @@ const ContentWrapper = styled.div `
   overflow-x: hidden;
   overflow-y: auto;
   background: #ffffff;
-  max-height: calc(100vh - 260px);
+  flex: 1;
   box-sizing: border-box;
 `;
 const ButtonBar = styled.div `
-  position: sticky;
-  bottom: 0;
+  flex-shrink: 0;
   background: #ffffff;
   padding: 20px;
   border-top: 1px solid #e7e6e6;
@@ -3839,7 +3841,7 @@ const ButtonBar = styled.div `
   box-sizing: border-box;
 `;
 const Modal = (_a) => {
-    var { children, title, onClose, maxWidth, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
+    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
     useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -3851,7 +3853,7 @@ const Modal = (_a) => {
         };
     }, []);
     return (React.createElement(Wrapper$7, null,
-        React.createElement(Container$1, Object.assign({ "$maxWidth": maxWidth, open: true }, accessibleProps),
+        React.createElement(Container$1, Object.assign({ "$fullscreen": fullscreen, "$maxWidth": maxWidth, open: true }, accessibleProps),
             React.createElement(Header$1, null,
                 title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
                 React.createElement(Close, { onClick: onClose },