@citygross/components 0.16.25 → 0.16.26

package/build/@types/components/Modal/Modal.d.ts

@@ -12,6 +12,7 @@ export declare type TModal = {
     inertSelectors: string[];
     labelCancel?: string;
     labelCta?: string;
+    noOverlay?: boolean;
     onClose: () => void;
     onConfirm: () => void;
     portalHostSelector: string;
@@ -19,4 +20,4 @@ export declare type TModal = {
     title: string;
     variant: EModalVariant;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare const Modal: ({ children, inertSelectors, labelCancel, labelCta, onClose, onConfirm, portalHostSelector, size, title, variant }: TModal) => React.ReactPortal | null;
+export declare const Modal: ({ children, inertSelectors, labelCancel, labelCta, noOverlay, onClose, onConfirm, portalHostSelector, size, title, variant }: TModal) => React.ReactPortal | null;

package/build/@types/components/Modal/Modal.styles.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { type TModal } from './Modal';
-export declare const Overlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare type TOverlay = Pick<TModal, 'noOverlay'>;
+export declare const Overlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOverlay, never>;
 declare type TFrame = Pick<TModal, 'size'>;
 export declare const Frame: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFrame, never>;
 export declare const Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<({ children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography/build/bodyText/bodyText").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -6,6 +6,7 @@ var React = require('react');
 var reactDom = require('react-dom');
 var designTokens = require('@citygross/design-tokens');
 var icons = require('@citygross/icons');
+var typography = require('@citygross/typography');
 var utils = require('@citygross/utils');
 var CgButton = require('../CgButton/CgButton.js');
 var Modal_styles = require('./Modal.styles.js');
@@ -34,8 +35,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 ? exports.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 ? exports.EModalSize.medium : _h, title = _a.title, variant = _a.variant;
     var titleId = React.useId();
     var modalRef = React.useRef(null);
     var cancelButtonRef = React.useRef(null);
@@ -72,7 +73,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);
@@ -83,12 +84,12 @@ var Modal = function (_a) {
     }, [inertSelectors, onClose, variant]);
     if (!portalRoot)
         return null;
-    return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { onClick: onClose },
+    return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { noOverlay: noOverlay, onClick: onClose },
         React__default["default"].createElement(Modal_styles.Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, ref: modalRef, role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
             React__default["default"].createElement(Modal_styles.Header, null,
-                React__default["default"].createElement(Modal_styles.Title, { fontWeight: "semiBold", id: titleId }, title),
+                React__default["default"].createElement(typography.H2, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
                 variant !== exports.EModalVariant.destructive && (React__default["default"].createElement(CgButton.CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: CgButton_types.EButtonVariant.ghost },
-                    React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2 })))),
+                    React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", height: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2, width: (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm2 })))),
             children,
             React__default["default"].createElement(Modal_styles.Footer, null,
                 React__default["default"].createElement(CgButton.CgButton, { onClick: onConfirm, variant: CgButton_types.EButtonVariant.primary }, labelCta),

package/build/cjs/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/cjs/components/src/components/Modal/Modal.styles.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
-var typography = require('@citygross/typography');
 var styled = require('styled-components');
 var Modal = require('./Modal.js');
 
@@ -12,9 +11,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var Overlay = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__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;
@@ -60,12 +59,7 @@ var Header = styled__default["default"].div(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
 });
-var Title = styled__default["default"](typography.BodyText)(templateObject_4 || (templateObject_4 = _tslib.__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__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__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__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__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;
@@ -74,11 +68,10 @@ var Footer = styled__default["default"].div(templateObject_5 || (templateObject_
     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;
 
 exports.Footer = Footer;
 exports.Frame = Frame;
 exports.Header = Header;
 exports.Overlay = Overlay;
-exports.Title = Title;
 //# sourceMappingURL=Modal.styles.js.map

package/build/cjs/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/cjs/utils/build/index.js

@@ -535,31 +535,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');
             }
         });