@stenajs-webui/modal 15.0.0-alpha.6 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/modal/ModalFooter.d.ts +1 -5
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.es.js +13 -10
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.js +13 -9
  6. package/dist/index.js.map +1 -1
  7. package/package.json +5 -5
package/dist/components/modal/ModalFooter.d.ts CHANGED
@@ -1,6 +1,2 @@
1
1
  import * as React from "react";
2
- interface ModalFooterProps {
3
- sticky: boolean;
4
- }
5
- export declare const ModalFooter: React.FC<ModalFooterProps>;
6
- export {};
2
+ export declare const ModalFooter: React.FC;
package/dist/index.d.ts CHANGED
@@ -4,3 +4,4 @@ export * from "./components/center-modal/CenterModal";
4
4
  export * from "./components/loading-modal/LoadingModal";
5
5
  export * from "./components/modal/Modal";
6
6
  export * from "./components/modal/ModalHeader";
7
+ export * from "./components/modal/ModalFooter";
package/dist/index.es.js CHANGED
@@ -71,8 +71,8 @@ function styleInject(css, ref) {
71
71
  }
72
72
  }
73
73
 
74
- var css_248z$2 = ".Modal-module_overlay__1c4LV {\n --swui-modal-animation-time: var(--swui-animation-time-fast);\n --swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);\n --swui-modal-padding: var(--swui-metrics-space);\n --swui-modal-content-bg-color: var(--swui-white);\n --swui-modal-width: 960px;\n --swui-modal-header-border-color: var(--lhds-color-ui-300);\n --swui-modal-shadow: var(--swui-shadow-modal);\n --swui-modal-footer-shadow: var(--swui-shadow-modal);\n\n position: fixed;\n z-index: 10;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--swui-modal-overlay-bg-color);\n overflow: auto;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-justify-content: flex-start;\n justify-content: flex-start;\n -webkit-align-items: center;\n align-items: center;\n padding: var(--swui-modal-padding);\n\n -webkit-animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n @media print {.Modal-module_overlay__1c4LV {\n background-color: rgba(255, 255, 255, 1)\n}\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_modal__1XMQr {\n max-width: 100%;\n outline: none;\n pointer-events: none;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n position: relative;\n display: block;\n background: var(--swui-modal-content-bg-color);\n box-shadow: var(--swui-modal-shadow);\n pointer-events: all;\n\n width: var(--swui-modal-width);\n max-width: 100%;\n\n -webkit-animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n }\n\n @media print {\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n box-shadow: none;\n top: 0\n }\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm :focus {\n outline: 0;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle {\n cursor: move;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle .draggable-modal-cancel,\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle [role=\"tooltip\"] {\n cursor: initial;\n }\n\n@-webkit-keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@-webkit-keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n\n@keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n";
75
- var styles$2 = {"overlay":"Modal-module_overlay__1c4LV","fadeIn":"Modal-module_fadeIn__2XO70","modal":"Modal-module_modal__1XMQr","content":"Modal-module_content__10pSm","appear":"Modal-module_appear__36n8p","isDraggable":"Modal-module_isDraggable__3l3pM"};
74
+ var css_248z$2 = ".Modal-module_overlay__1c4LV {\n --swui-modal-animation-time: var(--swui-animation-time-fast);\n --swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);\n --swui-modal-padding: var(--swui-metrics-space);\n --swui-modal-content-bg-color: var(--swui-white);\n --swui-modal-width: 960px;\n --swui-modal-header-border-color: var(--lhds-color-ui-300);\n --swui-modal-shadow: var(--swui-shadow-modal);\n --swui-modal-footer-shadow: var(--swui-shadow-modal);\n\n position: fixed;\n z-index: 10;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--swui-modal-overlay-bg-color);\n overflow: auto;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-justify-content: flex-start;\n justify-content: flex-start;\n -webkit-align-items: center;\n align-items: center;\n padding: var(--swui-modal-padding);\n\n -webkit-animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n @media print {.Modal-module_overlay__1c4LV {\n background-color: rgba(255, 255, 255, 1)\n}\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_modal__1XMQr {\n max-width: 100%;\n outline: none;\n pointer-events: none;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n position: relative;\n display: block;\n background: var(--swui-modal-content-bg-color);\n box-shadow: var(--swui-modal-shadow);\n pointer-events: all;\n\n width: var(--swui-modal-width);\n max-width: 100%;\n\n -webkit-animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n }\n\n @media print {\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n box-shadow: none;\n top: 0\n }\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm :focus {\n outline: 0;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle {\n cursor: move;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle .draggable-modal-cancel,\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle [role=\"tooltip\"] {\n cursor: initial;\n }\n\n@-webkit-keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@-webkit-keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n\n@keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n\n.Modal-module_footer__2FN1E {\n background-color: var(--swui-modal-content-bg-color);\n}\n\n.Modal-module_stickyFooter__9tQSR {\n position: -webkit-sticky;\n position: sticky;\n bottom: calc(-1 * var(--swui-modal-padding));\n box-shadow: var(--swui-modal-footer-shadow);\n}\n\n@media print {\n\n.Modal-module_stickyFooter__9tQSR {\n position: static;\n box-shadow: none\n}\n }\n";
75
+ var styles$2 = {"overlay":"Modal-module_overlay__1c4LV","fadeIn":"Modal-module_fadeIn__2XO70","modal":"Modal-module_modal__1XMQr","content":"Modal-module_content__10pSm","appear":"Modal-module_appear__36n8p","isDraggable":"Modal-module_isDraggable__3l3pM","footer":"Modal-module_footer__2FN1E","stickyFooter":"Modal-module_stickyFooter__9tQSR"};
76
76
  styleInject(css_248z$2);
77
77
 
78
78
  var DRAGGABLE_HANDLE_CLASSNAME = "draggable-modal-handle";
@@ -131,11 +131,6 @@ var LoadingModal = function (_a) {
131
131
  headerText && (React.createElement(Heading, { variant: "h4", color: "white" }, headerText))))))));
132
132
  };
133
133
 
134
- var ModalFooter = function (_a) {
135
- var sticky = _a.sticky, children = _a.children;
136
- return (React.createElement(Column, { indent: 2, spacing: 2, background: "var(--swui-modal-content-bg-color)", position: sticky ? "sticky" : undefined, bottom: sticky ? "calc(-1 * var(--swui-modal-padding))" : undefined, shadow: sticky ? "var(--swui-modal-footer-shadow)" : undefined }, children));
137
- };
138
-
139
134
  var ModalHeader = function (_a) {
140
135
  var onRequestClose = _a.onRequestClose, header = _a.header, headerText = _a.headerText, closeButtonClassName = _a.closeButtonClassName;
141
136
  return (React.createElement(Row, { spacing: 2, indent: 2, borderBottom: "1px solid var(--swui-modal-header-border-color)", className: DRAGGABLE_HANDLE_CLASSNAME },
@@ -147,14 +142,22 @@ var ModalHeader = function (_a) {
147
142
  };
148
143
 
149
144
  var Modal = function (_a) {
150
- var header = _a.header, headerText = _a.headerText, children = _a.children, spacing = _a.spacing, indent = _a.indent, _b = _a.draggable, draggable = _b === void 0 ? false : _b, onRequestClose = _a.onRequestClose, closeButtonClassName = _a.closeButtonClassName, footer = _a.footer, _c = _a.disableStickyFooter, disableStickyFooter = _c === void 0 ? false : _c, props = __rest(_a, ["header", "headerText", "children", "spacing", "indent", "draggable", "onRequestClose", "closeButtonClassName", "footer", "disableStickyFooter"]);
145
+ var _b;
146
+ var header = _a.header, headerText = _a.headerText, children = _a.children, spacing = _a.spacing, indent = _a.indent, _c = _a.draggable, draggable = _c === void 0 ? false : _c, onRequestClose = _a.onRequestClose, closeButtonClassName = _a.closeButtonClassName, footer = _a.footer, _d = _a.disableStickyFooter, disableStickyFooter = _d === void 0 ? false : _d, props = __rest(_a, ["header", "headerText", "children", "spacing", "indent", "draggable", "onRequestClose", "closeButtonClassName", "footer", "disableStickyFooter"]);
151
147
  var activeSpacing = typeof spacing === "number" ? spacing : 1;
152
148
  var activeIndent = typeof indent === "number" ? indent : 1;
153
149
  return (React.createElement(BaseModal, __assign({}, props, { onRequestClose: onRequestClose, draggable: draggable }),
154
150
  React.createElement(ModalHeader, { onRequestClose: onRequestClose, header: header, headerText: headerText, closeButtonClassName: closeButtonClassName }),
155
151
  React.createElement(Box, { spacing: activeSpacing, indent: activeIndent }, children),
156
- footer && (React.createElement(ModalFooter, { sticky: !disableStickyFooter }, footer))));
152
+ footer && (React.createElement(Box, { className: cx(styles$2.footer, (_b = {},
153
+ _b[styles$2.stickyFooter] = !disableStickyFooter,
154
+ _b)) }, footer))));
155
+ };
156
+
157
+ var ModalFooter = function (_a) {
158
+ var children = _a.children;
159
+ return (React.createElement(Column, { indent: 2, spacing: 2 }, children));
157
160
  };
158
161
 
159
- export { BaseModal, CenterModal, DRAGGABLE_CANCEL_CLASSNAME, DRAGGABLE_HANDLE_CLASSNAME, Drawer, LoadingModal, Modal, ModalHeader };
162
+ export { BaseModal, CenterModal, DRAGGABLE_CANCEL_CLASSNAME, DRAGGABLE_HANDLE_CLASSNAME, Drawer, LoadingModal, Modal, ModalFooter, ModalHeader };
160
163
  //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalFooter.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{ [\"--swui-modal-width\" as string]: width }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\n\nimport styles from \"./Drawer.module.css\";\n\nexport type SlideFrom = \"left\" | \"right\";\n\nexport interface DrawerProps\n extends Omit<\n ReactModal.Props,\n | \"closeTimeoutMS\"\n | \"portalClassName\"\n | \"overlayClassName\"\n | \"className\"\n | \"style\"\n | \"parentSelector\"\n > {\n width?: string;\n background?: string;\n zIndex?: number;\n onRequestClose?: () => void;\n /**\n * Which direction the drawer will appear from.\n * @default left\n * @param {String('left'|'right')}\n */\n slideFrom?: SlideFrom;\n /**\n * Portal target, HTML element. If not set, portal is not used.\n */\n portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n width = \"370px\",\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(\n styles.content,\n slideFrom === \"left\" ? styles.slideFromLeft : styles.slideFromRight\n ),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft || headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\n\ninterface ModalFooterProps {\n sticky: boolean;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({\n sticky,\n children,\n}) => (\n <Column\n indent={2}\n spacing={2}\n background={\"var(--swui-modal-content-bg-color)\"}\n position={sticky ? \"sticky\" : undefined}\n bottom={sticky ? \"calc(-1 * var(--swui-modal-padding))\" : undefined}\n shadow={sticky ? \"var(--swui-modal-footer-shadow)\" : undefined}\n >\n {children}\n </Column>\n);\n","import { faTimes } from \"@fortawesome/free-solid-svg-icons/faTimes\";\nimport { FlatButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={faTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalFooter } from \"./ModalFooter\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <ModalFooter sticky={!disableStickyFooter}>{footer}</ModalFooter>\n )}\n </BaseModal>\n );\n};\n"],"names":["styles"],"mappings":"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"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{ [\"--swui-modal-width\" as string]: width }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\n\nimport styles from \"./Drawer.module.css\";\n\nexport type SlideFrom = \"left\" | \"right\";\n\nexport interface DrawerProps\n extends Omit<\n ReactModal.Props,\n | \"closeTimeoutMS\"\n | \"portalClassName\"\n | \"overlayClassName\"\n | \"className\"\n | \"style\"\n | \"parentSelector\"\n > {\n width?: string;\n background?: string;\n zIndex?: number;\n onRequestClose?: () => void;\n /**\n * Which direction the drawer will appear from.\n * @default left\n * @param {String('left'|'right')}\n */\n slideFrom?: SlideFrom;\n /**\n * Portal target, HTML element. If not set, portal is not used.\n */\n portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n width = \"370px\",\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(\n styles.content,\n slideFrom === \"left\" ? styles.slideFromLeft : styles.slideFromRight\n ),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft || headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { faTimes } from \"@fortawesome/free-solid-svg-icons/faTimes\";\nimport { FlatButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={faTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <Box\n className={cx(styles.footer, {\n [styles.stickyFooter]: !disableStickyFooter,\n })}\n >\n {footer}\n </Box>\n )}\n </BaseModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\n\nexport const ModalFooter: React.FC = ({ children }) => (\n <Column indent={2} spacing={2}>\n {children}\n </Column>\n);\n"],"names":["styles"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -100,8 +100,8 @@ function styleInject(css, ref) {
100
100
  }
101
101
  }
102
102
 
103
- var css_248z$2 = ".Modal-module_overlay__1c4LV {\n --swui-modal-animation-time: var(--swui-animation-time-fast);\n --swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);\n --swui-modal-padding: var(--swui-metrics-space);\n --swui-modal-content-bg-color: var(--swui-white);\n --swui-modal-width: 960px;\n --swui-modal-header-border-color: var(--lhds-color-ui-300);\n --swui-modal-shadow: var(--swui-shadow-modal);\n --swui-modal-footer-shadow: var(--swui-shadow-modal);\n\n position: fixed;\n z-index: 10;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--swui-modal-overlay-bg-color);\n overflow: auto;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-justify-content: flex-start;\n justify-content: flex-start;\n -webkit-align-items: center;\n align-items: center;\n padding: var(--swui-modal-padding);\n\n -webkit-animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n @media print {.Modal-module_overlay__1c4LV {\n background-color: rgba(255, 255, 255, 1)\n}\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_modal__1XMQr {\n max-width: 100%;\n outline: none;\n pointer-events: none;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n position: relative;\n display: block;\n background: var(--swui-modal-content-bg-color);\n box-shadow: var(--swui-modal-shadow);\n pointer-events: all;\n\n width: var(--swui-modal-width);\n max-width: 100%;\n\n -webkit-animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n }\n\n @media print {\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n box-shadow: none;\n top: 0\n }\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm :focus {\n outline: 0;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle {\n cursor: move;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle .draggable-modal-cancel,\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle [role=\"tooltip\"] {\n cursor: initial;\n }\n\n@-webkit-keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@-webkit-keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n\n@keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n";
104
- var styles$2 = {"overlay":"Modal-module_overlay__1c4LV","fadeIn":"Modal-module_fadeIn__2XO70","modal":"Modal-module_modal__1XMQr","content":"Modal-module_content__10pSm","appear":"Modal-module_appear__36n8p","isDraggable":"Modal-module_isDraggable__3l3pM"};
103
+ var css_248z$2 = ".Modal-module_overlay__1c4LV {\n --swui-modal-animation-time: var(--swui-animation-time-fast);\n --swui-modal-overlay-bg-color: var(--swui-overlay-bg-color);\n --swui-modal-padding: var(--swui-metrics-space);\n --swui-modal-content-bg-color: var(--swui-white);\n --swui-modal-width: 960px;\n --swui-modal-header-border-color: var(--lhds-color-ui-300);\n --swui-modal-shadow: var(--swui-shadow-modal);\n --swui-modal-footer-shadow: var(--swui-shadow-modal);\n\n position: fixed;\n z-index: 10;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--swui-modal-overlay-bg-color);\n overflow: auto;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-direction: column;\n flex-direction: column;\n -webkit-justify-content: flex-start;\n justify-content: flex-start;\n -webkit-align-items: center;\n align-items: center;\n padding: var(--swui-modal-padding);\n\n -webkit-animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_fadeIn__2XO70 var(--swui-modal-animation-time)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n @media print {.Modal-module_overlay__1c4LV {\n background-color: rgba(255, 255, 255, 1)\n}\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_modal__1XMQr {\n max-width: 100%;\n outline: none;\n pointer-events: none;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n position: relative;\n display: block;\n background: var(--swui-modal-content-bg-color);\n box-shadow: var(--swui-modal-shadow);\n pointer-events: all;\n\n width: var(--swui-modal-width);\n max-width: 100%;\n\n -webkit-animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n\n animation: Modal-module_appear__36n8p var(--swui-animation-time-fast)\n cubic-bezier(0.645, 0.045, 0.355, 1) both;\n }\n\n @media print {\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm {\n box-shadow: none;\n top: 0\n }\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm :focus {\n outline: 0;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle {\n cursor: move;\n }\n\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle .draggable-modal-cancel,\n .Modal-module_overlay__1c4LV .Modal-module_content__10pSm.Modal-module_isDraggable__3l3pM .draggable-modal-handle [role=\"tooltip\"] {\n cursor: initial;\n }\n\n@-webkit-keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@keyframes Modal-module_fadeIn__2XO70 {\n 0% {\n background-color: var(--swui-hidden);\n }\n 100% {\n background-color: var(--swui-modal-overlay-bg-color);\n }\n}\n\n@-webkit-keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n\n@keyframes Modal-module_appear__36n8p {\n 0% {\n top: calc(0 - var(--swui-metrics-space));\n opacity: 0;\n }\n 100% {\n top: var(--swui-metrics-space);\n opacity: 1;\n }\n}\n\n.Modal-module_footer__2FN1E {\n background-color: var(--swui-modal-content-bg-color);\n}\n\n.Modal-module_stickyFooter__9tQSR {\n position: -webkit-sticky;\n position: sticky;\n bottom: calc(-1 * var(--swui-modal-padding));\n box-shadow: var(--swui-modal-footer-shadow);\n}\n\n@media print {\n\n.Modal-module_stickyFooter__9tQSR {\n position: static;\n box-shadow: none\n}\n }\n";
104
+ var styles$2 = {"overlay":"Modal-module_overlay__1c4LV","fadeIn":"Modal-module_fadeIn__2XO70","modal":"Modal-module_modal__1XMQr","content":"Modal-module_content__10pSm","appear":"Modal-module_appear__36n8p","isDraggable":"Modal-module_isDraggable__3l3pM","footer":"Modal-module_footer__2FN1E","stickyFooter":"Modal-module_stickyFooter__9tQSR"};
105
105
  styleInject(css_248z$2);
106
106
 
107
107
  var DRAGGABLE_HANDLE_CLASSNAME = "draggable-modal-handle";
@@ -160,11 +160,6 @@ var LoadingModal = function (_a) {
160
160
  headerText && (React__namespace.createElement(core.Heading, { variant: "h4", color: "white" }, headerText))))))));
161
161
  };
162
162
 
163
- var ModalFooter = function (_a) {
164
- var sticky = _a.sticky, children = _a.children;
165
- return (React__namespace.createElement(core.Column, { indent: 2, spacing: 2, background: "var(--swui-modal-content-bg-color)", position: sticky ? "sticky" : undefined, bottom: sticky ? "calc(-1 * var(--swui-modal-padding))" : undefined, shadow: sticky ? "var(--swui-modal-footer-shadow)" : undefined }, children));
166
- };
167
-
168
163
  var ModalHeader = function (_a) {
169
164
  var onRequestClose = _a.onRequestClose, header = _a.header, headerText = _a.headerText, closeButtonClassName = _a.closeButtonClassName;
170
165
  return (React__namespace.createElement(core.Row, { spacing: 2, indent: 2, borderBottom: "1px solid var(--swui-modal-header-border-color)", className: DRAGGABLE_HANDLE_CLASSNAME },
@@ -176,13 +171,21 @@ var ModalHeader = function (_a) {
176
171
  };
177
172
 
178
173
  var Modal = function (_a) {
179
- var header = _a.header, headerText = _a.headerText, children = _a.children, spacing = _a.spacing, indent = _a.indent, _b = _a.draggable, draggable = _b === void 0 ? false : _b, onRequestClose = _a.onRequestClose, closeButtonClassName = _a.closeButtonClassName, footer = _a.footer, _c = _a.disableStickyFooter, disableStickyFooter = _c === void 0 ? false : _c, props = __rest(_a, ["header", "headerText", "children", "spacing", "indent", "draggable", "onRequestClose", "closeButtonClassName", "footer", "disableStickyFooter"]);
174
+ var _b;
175
+ var header = _a.header, headerText = _a.headerText, children = _a.children, spacing = _a.spacing, indent = _a.indent, _c = _a.draggable, draggable = _c === void 0 ? false : _c, onRequestClose = _a.onRequestClose, closeButtonClassName = _a.closeButtonClassName, footer = _a.footer, _d = _a.disableStickyFooter, disableStickyFooter = _d === void 0 ? false : _d, props = __rest(_a, ["header", "headerText", "children", "spacing", "indent", "draggable", "onRequestClose", "closeButtonClassName", "footer", "disableStickyFooter"]);
180
176
  var activeSpacing = typeof spacing === "number" ? spacing : 1;
181
177
  var activeIndent = typeof indent === "number" ? indent : 1;
182
178
  return (React__namespace.createElement(BaseModal, __assign({}, props, { onRequestClose: onRequestClose, draggable: draggable }),
183
179
  React__namespace.createElement(ModalHeader, { onRequestClose: onRequestClose, header: header, headerText: headerText, closeButtonClassName: closeButtonClassName }),
184
180
  React__namespace.createElement(core.Box, { spacing: activeSpacing, indent: activeIndent }, children),
185
- footer && (React__namespace.createElement(ModalFooter, { sticky: !disableStickyFooter }, footer))));
181
+ footer && (React__namespace.createElement(core.Box, { className: cx__default["default"](styles$2.footer, (_b = {},
182
+ _b[styles$2.stickyFooter] = !disableStickyFooter,
183
+ _b)) }, footer))));
184
+ };
185
+
186
+ var ModalFooter = function (_a) {
187
+ var children = _a.children;
188
+ return (React__namespace.createElement(core.Column, { indent: 2, spacing: 2 }, children));
186
189
  };
187
190
 
188
191
  exports.BaseModal = BaseModal;
@@ -192,5 +195,6 @@ exports.DRAGGABLE_HANDLE_CLASSNAME = DRAGGABLE_HANDLE_CLASSNAME;
192
195
  exports.Drawer = Drawer;
193
196
  exports.LoadingModal = LoadingModal;
194
197
  exports.Modal = Modal;
198
+ exports.ModalFooter = ModalFooter;
195
199
  exports.ModalHeader = ModalHeader;
196
200
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalFooter.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{ [\"--swui-modal-width\" as string]: width }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\n\nimport styles from \"./Drawer.module.css\";\n\nexport type SlideFrom = \"left\" | \"right\";\n\nexport interface DrawerProps\n extends Omit<\n ReactModal.Props,\n | \"closeTimeoutMS\"\n | \"portalClassName\"\n | \"overlayClassName\"\n | \"className\"\n | \"style\"\n | \"parentSelector\"\n > {\n width?: string;\n background?: string;\n zIndex?: number;\n onRequestClose?: () => void;\n /**\n * Which direction the drawer will appear from.\n * @default left\n * @param {String('left'|'right')}\n */\n slideFrom?: SlideFrom;\n /**\n * Portal target, HTML element. If not set, portal is not used.\n */\n portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n width = \"370px\",\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(\n styles.content,\n slideFrom === \"left\" ? styles.slideFromLeft : styles.slideFromRight\n ),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft || headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\n\ninterface ModalFooterProps {\n sticky: boolean;\n}\n\nexport const ModalFooter: React.FC<ModalFooterProps> = ({\n sticky,\n children,\n}) => (\n <Column\n indent={2}\n spacing={2}\n background={\"var(--swui-modal-content-bg-color)\"}\n position={sticky ? \"sticky\" : undefined}\n bottom={sticky ? \"calc(-1 * var(--swui-modal-padding))\" : undefined}\n shadow={sticky ? \"var(--swui-modal-footer-shadow)\" : undefined}\n >\n {children}\n </Column>\n);\n","import { faTimes } from \"@fortawesome/free-solid-svg-icons/faTimes\";\nimport { FlatButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={faTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalFooter } from \"./ModalFooter\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <ModalFooter sticky={!disableStickyFooter}>{footer}</ModalFooter>\n )}\n </BaseModal>\n );\n};\n"],"names":["React","ReactModal","styles","Draggable","cx","Column","Box","Spinner","Spacing","Row","Icon","Indent","Heading","Txt","FlatButton","faTimes"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../node_modules/style-inject/dist/style-inject.es.js","../src/components/modal/BaseModal.tsx","../src/components/drawer/Drawer.tsx","../src/components/center-modal/CenterModal.tsx","../src/components/loading-modal/LoadingModal.tsx","../src/components/modal/ModalHeader.tsx","../src/components/modal/Modal.tsx","../src/components/modal/ModalFooter.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport Draggable from \"react-draggable\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface BaseModalProps extends ReactModal.Props {\n width?: string;\n onRequestClose?: () => void;\n draggable?: boolean;\n}\n\nexport const DRAGGABLE_HANDLE_CLASSNAME = \"draggable-modal-handle\";\nexport const DRAGGABLE_CANCEL_CLASSNAME = \"draggable-modal-cancel\";\n\nexport const BaseModal: React.FC<BaseModalProps> = ({\n width,\n draggable = false,\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n {...reactModalProps}\n >\n <Draggable\n handle={`.${DRAGGABLE_HANDLE_CLASSNAME}`}\n cancel={`.${DRAGGABLE_CANCEL_CLASSNAME}, button, [role=\"tooltip\"]`}\n bounds=\".ReactModal__Overlay\"\n disabled={!draggable}\n >\n <div\n style={{ [\"--swui-modal-width\" as string]: width }}\n className={cx(styles.content, {\n [styles.isDraggable]: draggable,\n })}\n >\n {children}\n </div>\n </Draggable>\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport cx from \"classnames\";\n\nimport styles from \"./Drawer.module.css\";\n\nexport type SlideFrom = \"left\" | \"right\";\n\nexport interface DrawerProps\n extends Omit<\n ReactModal.Props,\n | \"closeTimeoutMS\"\n | \"portalClassName\"\n | \"overlayClassName\"\n | \"className\"\n | \"style\"\n | \"parentSelector\"\n > {\n width?: string;\n background?: string;\n zIndex?: number;\n onRequestClose?: () => void;\n /**\n * Which direction the drawer will appear from.\n * @default left\n * @param {String('left'|'right')}\n */\n slideFrom?: SlideFrom;\n /**\n * Portal target, HTML element. If not set, portal is not used.\n */\n portalTarget?: HTMLElement | null;\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n width = \"370px\",\n background,\n zIndex,\n children,\n slideFrom = \"left\",\n portalTarget,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n closeTimeoutMS={250}\n portalClassName={styles.portal}\n overlayClassName={{\n base: styles.overlay,\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n className={{\n base: cx(\n styles.content,\n slideFrom === \"left\" ? styles.slideFromLeft : styles.slideFromRight\n ),\n afterOpen: styles.afterOpen,\n beforeClose: styles.beforeClose,\n }}\n style={{ content: { width, background }, overlay: { zIndex } }}\n parentSelector={portalTarget ? () => portalTarget : undefined}\n {...reactModalProps}\n >\n {children}\n </ReactModal>\n );\n};\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\n\nimport styles from \"../modal/Modal.module.css\";\n\nexport interface CenterModalProps extends ReactModal.Props {\n onRequestClose?: () => void;\n}\n\nconst style = { overlay: { justifyContent: \"center\" } };\n\nexport const CenterModal: React.FC<CenterModalProps> = ({\n children,\n ...reactModalProps\n}) => {\n return (\n <ReactModal\n overlayClassName={styles.overlay}\n className={styles.modal}\n style={style}\n {...reactModalProps}\n >\n <div\n className={styles.content}\n style={{ [\"--swui-modal-width\" as string]: \"fit-content\" }}\n >\n {children}\n </div>\n </ReactModal>\n );\n};\n","import { IconDefinition } from \"@fortawesome/fontawesome-svg-core\";\nimport {\n Box,\n Column,\n Heading,\n Indent,\n Row,\n Spacing,\n} from \"@stenajs-webui/core\";\nimport { Icon, Spinner } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport styles from \"./LoadingModal.module.css\";\n\nexport interface LoadingModalProps extends Omit<ReactModal.Props, \"isOpen\"> {\n headerText?: string;\n headerIconLeft?: IconDefinition;\n}\n\nexport const LoadingModal: React.FC<LoadingModalProps> = ({\n headerIconLeft,\n headerText,\n ...modalProps\n}) => {\n return (\n <ReactModal\n {...modalProps}\n isOpen\n className={styles.modal}\n overlayClassName={styles.overlay}\n >\n <Column spacing={2} alignItems={\"center\"}>\n <Box\n alignItems={\"center\"}\n justifyContent={\"center\"}\n width={\"64px\"}\n height={\"64px\"}\n borderRadius={\"50%\"}\n background={\"white\"}\n shadow={\"modal\"}\n >\n <Spinner size={\"small\"} />\n </Box>\n {(headerIconLeft || headerText) && (\n <>\n <Spacing />\n <Row indent={2}>\n {headerIconLeft && (\n <>\n <Icon size={14} icon={headerIconLeft} color={\"white\"} />\n <Indent />\n </>\n )}\n {headerText && (\n <Heading variant={\"h4\"} color={\"white\"}>\n {headerText}\n </Heading>\n )}\n </Row>\n </>\n )}\n </Column>\n </ReactModal>\n );\n};\n","import { faTimes } from \"@fortawesome/free-solid-svg-icons/faTimes\";\nimport { FlatButton } from \"@stenajs-webui/elements\";\nimport * as React from \"react\";\nimport { ReactNode } from \"react\";\nimport {\n DRAGGABLE_CANCEL_CLASSNAME,\n DRAGGABLE_HANDLE_CLASSNAME,\n} from \"./BaseModal\";\nimport { Box, Row, Txt } from \"@stenajs-webui/core\";\n\nexport interface ModalHeaderProps {\n onRequestClose?: () => void;\n header?: ReactNode;\n headerText?: string;\n closeButtonClassName?: string;\n}\n\nexport const ModalHeader: React.FC<ModalHeaderProps> = ({\n onRequestClose,\n header,\n headerText,\n closeButtonClassName,\n}) => {\n return (\n <Row\n spacing={2}\n indent={2}\n borderBottom={\"1px solid var(--swui-modal-header-border-color)\"}\n className={DRAGGABLE_HANDLE_CLASSNAME}\n >\n <Row flex={1} indent alignItems={\"center\"}>\n {headerText && (\n <Txt className={DRAGGABLE_CANCEL_CLASSNAME} size={\"large\"}>\n {headerText}\n </Txt>\n )}\n {header}\n </Row>\n <Box alignSelf={\"flex-start\"}>\n <FlatButton\n className={closeButtonClassName}\n onClick={onRequestClose}\n aria-label={\"Close\"}\n leftIcon={faTimes}\n />\n </Box>\n </Row>\n );\n};\n","import { Box } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\nimport { BaseModal, BaseModalProps } from \"./BaseModal\";\nimport { ModalHeader, ModalHeaderProps } from \"./ModalHeader\";\nimport cx from \"classnames\";\nimport styles from \"./Modal.module.css\";\n\nexport interface ModalProps extends BaseModalProps, ModalHeaderProps {\n spacing?: number;\n indent?: number;\n draggable?: boolean;\n footer?: React.ReactNode;\n disableStickyFooter?: boolean;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n header,\n headerText,\n children,\n spacing,\n indent,\n draggable = false,\n onRequestClose,\n closeButtonClassName,\n footer,\n disableStickyFooter = false,\n ...props\n}) => {\n const activeSpacing = typeof spacing === \"number\" ? spacing : 1;\n const activeIndent = typeof indent === \"number\" ? indent : 1;\n\n return (\n <BaseModal {...props} onRequestClose={onRequestClose} draggable={draggable}>\n <ModalHeader\n onRequestClose={onRequestClose}\n header={header}\n headerText={headerText}\n closeButtonClassName={closeButtonClassName}\n />\n <Box spacing={activeSpacing} indent={activeIndent}>\n {children}\n </Box>\n {footer && (\n <Box\n className={cx(styles.footer, {\n [styles.stickyFooter]: !disableStickyFooter,\n })}\n >\n {footer}\n </Box>\n )}\n </BaseModal>\n );\n};\n","import { Column } from \"@stenajs-webui/core\";\nimport * as React from \"react\";\n\nexport const ModalFooter: React.FC = ({ children }) => (\n <Column indent={2} spacing={2}>\n {children}\n </Column>\n);\n"],"names":["React","ReactModal","styles","Draggable","cx","Column","Box","Spinner","Spacing","Row","Icon","Indent","Heading","Txt","FlatButton","faTimes"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stenajs-webui/modal",
3
- "version": "15.0.0-alpha.6",
3
+ "version": "15.0.0",
4
4
  "description": "",
5
5
  "author": "mattias800",
6
6
  "license": "MIT",
@@ -27,9 +27,9 @@
27
27
  "deploy": "gh-pages -d example/build"
28
28
  },
29
29
  "dependencies": {
30
- "@stenajs-webui/core": "15.0.0-alpha.6",
31
- "@stenajs-webui/elements": "15.0.0-alpha.6",
32
- "@stenajs-webui/theme": "15.0.0-alpha.6",
30
+ "@stenajs-webui/core": "^15.0.0",
31
+ "@stenajs-webui/elements": "^15.0.0",
32
+ "@stenajs-webui/theme": "^15.0.0",
33
33
  "@types/react-modal": "^3.13.1",
34
34
  "classnames": "^2.3.1",
35
35
  "react-draggable": "^4.4.2",
@@ -59,5 +59,5 @@
59
59
  "files": [
60
60
  "dist"
61
61
  ],
62
- "gitHead": "8fdfb7b97167925672b89b6a8f8a30a67241abb7"
62
+ "gitHead": "ae5d6a4c9262b72f553eff709470d8d50a8b57ba"
63
63
  }