@citygross/components 0.16.24 → 0.16.26

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

@@ -62,7 +62,7 @@ function CartSummary(_a) {
             ? pickingFeeFromLabel.trim()
             : undefined;
         var chargeColor = charge.color;
-        return (React.createElement(CartLine, { key: charge.name, role: "listitem" },
+        return (React.createElement(CartLine, null,
             React.createElement(LabelWrapper, null,
                 React.createElement(BodyText, null, baseChargeName),
                 charge.info && (React.createElement(Fragment, null,
@@ -82,8 +82,8 @@ function CartSummary(_a) {
             cartSummary.title && (React.createElement(CartSummaryTitle, null,
                 React.createElement(BodyText, { fontWeight: "semiBold" }, cartSummary.title),
                 React.createElement(BodyText, null, cartSummary.subtitle))),
-            React.createElement(CartSummaryContent, { title: cartSummary.title, role: "list", "aria-label": "Ordersammanfattning" },
-                ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React.createElement(CartLine, { role: "listitem" },
+            React.createElement(CartSummaryContent, { title: cartSummary.title, role: "group", "aria-label": "Ordersammanfattning" },
+                ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React.createElement(CartLine, null,
                     React.createElement(BodyText, { fontWeight: "medium" },
                         itemsLabel,
                         React.createElement(QuantitySpan, null, " (".concat(((_h = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _h !== void 0 ? _h : 0) + ((_j = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _j !== void 0 ? _j : 0), ")"))),
@@ -91,7 +91,7 @@ function CartSummary(_a) {
                         (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_k = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _k === void 0 ? void 0 : _k.dark }, formatPrice(((_l = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _l !== void 0 ? _l : 0) +
                             ((_m = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _m !== void 0 ? _m : 0)))),
                         React.createElement(BodyText, null, formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
-                bags.length > 0 && (React.createElement(CartLine, { role: "listitem" },
+                bags.length > 0 && (React.createElement(CartLine, null,
                     React.createElement(BodyText, null,
                         "Matkassar",
                         React.createElement(QuantitySpan, null,
@@ -101,12 +101,12 @@ function CartSummary(_a) {
                     React.createElement(AmountWrapper, null,
                         sumOfBags.cancelledAmount > 0 && (React.createElement(BodyText, { lineThrough: true, color: (_o = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _o === void 0 ? void 0 : _o.dark }, formatPrice(sumOfBags.cancelledAmount))),
                         React.createElement(BodyText, { fontWeight: "semiBold" }, formatPrice(sumOfBags.amount))))),
-                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React.createElement(ChargesContainer, { role: "presentation" }, charges === null || charges === void 0 ? void 0 : charges.map(function (charge) { return (React.createElement(ChargeLine, { key: charge.name, charge: charge })); }))),
-                React.createElement(ChargesContainer, { role: "presentation" },
-                    React.createElement(CartLine, { role: "listitem" },
+                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React.createElement(ChargesContainer, null, charges === null || charges === void 0 ? void 0 : charges.map(function (charge) { return (React.createElement(ChargeLine, { key: charge.name, charge: charge })); }))),
+                React.createElement(ChargesContainer, null,
+                    React.createElement(CartLine, null,
                         React.createElement(BodyText, { fontWeight: "semiBold" }, totalLabel),
                         React.createElement(BodyText, { fontWeight: "semiBold" }, formatPrice(cartSummary.totalAmount))),
-                    cartSummary.totalDiscount > 0 && (React.createElement(CartLine, { role: "listitem" },
+                    cartSummary.totalDiscount > 0 && (React.createElement(CartLine, null,
                         React.createElement(BodyText, { size: TextTypes.TextSize.SMALL }, saveLabel),
                         React.createElement(BodyText, { color: (_p = theme_1 === null || theme_1 === void 0 ? void 0 : theme_1.palette) === null || _p === void 0 ? void 0 : _p.alertRed, size: TextTypes.TextSize.SMALL }, formatPrice(cartSummary.totalDiscount)))))))));
 }

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