@citygross/components 0.16.25 → 0.16.26

package/build/es/components/src/components/Modal/Modal.js

@@ -2,9 +2,10 @@ import React, { useId, useRef, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { theme } from '@citygross/design-tokens';
 import { Icons } from '@citygross/icons';
+import { H2 } from '@citygross/typography';
 import { toggleInert, escapeKeyboardEventHandler } from '@citygross/utils';
 import { CgButton } from '../CgButton/CgButton.js';
-import { Overlay, Frame, Header, Title, Footer } from './Modal.styles.js';
+import { Overlay, Frame, Header, Footer } from './Modal.styles.js';
 import { EButtonVariant } from '../CgButton/CgButton.types.js';
 
 var EModalSize;
@@ -26,8 +27,8 @@ var getPortalRoot = function (portalHostSelector) {
     return (_a = hostElement === null || hostElement === void 0 ? void 0 : hostElement.parentElement) !== null && _a !== void 0 ? _a : document.body;
 };
 var Modal = function (_a) {
-    var _b, _c;
-    var children = _a.children, inertSelectors = _a.inertSelectors, _d = _a.labelCancel, labelCancel = _d === void 0 ? 'Avbryt' : _d, _e = _a.labelCta, labelCta = _e === void 0 ? 'Okej' : _e, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _f = _a.size, size = _f === void 0 ? EModalSize.medium : _f, title = _a.title, variant = _a.variant;
+    var _b, _c, _d;
+    var children = _a.children, inertSelectors = _a.inertSelectors, _e = _a.labelCancel, labelCancel = _e === void 0 ? 'Avbryt' : _e, _f = _a.labelCta, labelCta = _f === void 0 ? 'Okej' : _f, _g = _a.noOverlay, noOverlay = _g === void 0 ? false : _g, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _h = _a.size, size = _h === void 0 ? EModalSize.medium : _h, title = _a.title, variant = _a.variant;
     var titleId = useId();
     var modalRef = useRef(null);
     var cancelButtonRef = useRef(null);
@@ -64,7 +65,7 @@ var Modal = function (_a) {
             (_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         });
         return function () {
-            restoreInert === null || restoreInert === void 0 ? void 0 : restoreInert();
+            restoreInert();
             body.style.overflow = previousBodyOverflow;
             html.style.overflow = previousHtmlOverflow;
             document.removeEventListener('keydown', handleEscape);
@@ -75,12 +76,12 @@ var Modal = function (_a) {
     }, [inertSelectors, onClose, variant]);
     if (!portalRoot)
         return null;
-    return createPortal(React.createElement(Overlay, { onClick: onClose },
+    return createPortal(React.createElement(Overlay, { noOverlay: noOverlay, onClick: onClose },
         React.createElement(Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, ref: modalRef, role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
             React.createElement(Header, null,
-                React.createElement(Title, { fontWeight: "semiBold", id: titleId }, title),
+                React.createElement(H2, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
                 variant !== EModalVariant.destructive && (React.createElement(CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: EButtonVariant.ghost },
-                    React.createElement(Icons.Cross, { "aria-hidden": "true", height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2 })))),
+                    React.createElement(Icons.Cross, { "aria-hidden": "true", height: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2, width: (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.sm2 })))),
             children,
             React.createElement(Footer, null,
                 React.createElement(CgButton, { onClick: onConfirm, variant: EButtonVariant.primary }, labelCta),

package/build/es/components/src/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/Modal/Modal.styles.js

@@ -1,12 +1,11 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
-import { BodyText } from '@citygross/typography';
 import styled from 'styled-components';
 import { EModalSize } from './Modal.js';
 
 var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  min-height: 100%;\n  overflow-y: auto;\n  padding: ", ";\n  position: fixed;\n  z-index: ", ";\n"], ["\n  background: ", ";\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  min-height: 100%;\n  overflow-y: auto;\n  padding: ", ";\n  position: fixed;\n  z-index: ", ";\n"])), function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay;
+    var _b, _c;
+    var theme = _a.theme, noOverlay = _a.noOverlay;
+    return noOverlay ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay;
 }, function (_a) {
     var _b, _c, _d;
     var theme = _a.theme;
@@ -52,12 +51,7 @@ var Header = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateOb
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
 });
-var Title = styled(BodyText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: ", "px;\n"], ["\n  font-size: ", "px;\n"])), function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s4;
-});
-var Footer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"])), function (_a) {
+var Footer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
@@ -66,7 +60,7 @@ var Footer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateOb
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.lg;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-export { Footer, Frame, Header, Overlay, Title };
+export { Footer, Frame, Header, Overlay };
 //# sourceMappingURL=Modal.styles.js.map

package/build/es/components/src/components/Modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/utils/build/index.js

@@ -528,31 +528,32 @@ var selectKeyboardEventHandler = function (_a) {
 
 var toggleInert = function (_a) {
     var elements = _a.elements, isInert = _a.isInert;
-    var snapshots = elements
-        .filter(function (element) { return Boolean(element); })
-        .map(function (element) { return ({
+    var list = elements.filter(function (element) {
+        return Boolean(element);
+    });
+    if (!isInert) {
+        list.forEach(function (element) {
+            var hadInert = element.hasAttribute('inert');
+            if (!hadInert) {
+                element.removeAttribute('inert');
+            }
+        });
+        return function () { };
+    }
+    var snapshots = list.map(function (element) { return ({
         element: element,
-        hadInert: element.hasAttribute('inert')
+        setByThisCall: !element.hasAttribute('inert')
     }); });
     snapshots.forEach(function (_a) {
-        var element = _a.element, hadInert = _a.hadInert;
-        if (isInert) {
-            if (!hadInert) {
-                element.setAttribute('inert', '');
-            }
-            return;
-        }
-        if (!hadInert) {
-            element.removeAttribute('inert');
+        var element = _a.element, setByThisCall = _a.setByThisCall;
+        if (setByThisCall) {
+            element.setAttribute('inert', '');
         }
     });
     return function () {
         snapshots.forEach(function (_a) {
-            var element = _a.element, hadInert = _a.hadInert;
-            if (hadInert) {
-                element.setAttribute('inert', '');
-            }
-            else {
+            var element = _a.element, setByThisCall = _a.setByThisCall;
+            if (setByThisCall) {
                 element.removeAttribute('inert');
             }
         });