@citygross/components 0.16.25 → 0.16.27

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,13 @@
 /// <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 declare const Title: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h2/h2").TH2) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare type TFooter = {
+    rowReverse?: boolean;
+};
+export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFooter, never>;
 export {};

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

@@ -34,11 +34,9 @@ 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);
     var previouslyFocusedElement = React.useRef(null);
     var portalRoot = React.useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
     React.useEffect(function () {
@@ -63,16 +61,8 @@ var Modal = function (_a) {
             return utils.escapeKeyboardEventHandler({ event: event, onEscape: onClose });
         };
         document.addEventListener('keydown', handleEscape);
-        requestAnimationFrame(function () {
-            var _a, _b;
-            if (variant === exports.EModalVariant.destructive) {
-                (_a = cancelButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            (_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);
@@ -80,19 +70,21 @@ var Modal = function (_a) {
                 previouslyFocusedElement.current.focus();
             }
         };
-    }, [inertSelectors, onClose, variant]);
+    }, [inertSelectors, onClose]);
     if (!portalRoot)
         return null;
-    return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { 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 },
+    var cancelButton = (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, variant: CgButton_types.EButtonVariant.secondary }, labelCancel));
+    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(); }, 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(Modal_styles.Title, { 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(Modal_styles.Footer, { rowReverse: variant === exports.EModalVariant.destructive },
+                variant === exports.EModalVariant.destructive && cancelButton,
                 React__default["default"].createElement(CgButton.CgButton, { onClick: onConfirm, variant: CgButton_types.EButtonVariant.primary }, labelCta),
-                variant !== exports.EModalVariant.informational && (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, ref: cancelButtonRef, variant: CgButton_types.EButtonVariant.secondary }, labelCancel))))), portalRoot);
+                variant === exports.EModalVariant.transactional && cancelButton))), portalRoot);
 };
 
 exports.Modal = Modal;

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

@@ -12,9 +12,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 +60,11 @@ 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 Title = styled__default["default"](typography.H2)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var Footer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\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  flex-direction: ", ";\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 rowReverse = _a.rowReverse;
+    return (rowReverse ? 'row-reverse' : 'row');
+}, function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;

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');
             }
         });