@citygross/components 0.17.10 → 0.17.12

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

@@ -5,4 +5,3 @@ export declare type TWarningIndicator = {
 };
 export declare const WarningIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWarningIndicator, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const BodyTextStyled: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;

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

@@ -14,7 +14,7 @@ var AvailabilityLabel = function (_a) {
     var label = _a.label, _b = _a.textSize, textSize = _b === void 0 ? typography.TextTypes.TextSize.EXTRASMALL : _b;
     return (React__default["default"].createElement(AvailabilityLabel_styles.Root, null,
         React__default["default"].createElement(AvailabilityLabel_styles.Dot, null),
-        React__default["default"].createElement(typography.BodyText, { size: textSize }, label)));
+        React__default["default"].createElement(typography.BodyText, { size: textSize, as: "span" }, label)));
 };
 
 exports.AvailabilityLabel = AvailabilityLabel;

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

@@ -37,18 +37,21 @@ var Modal = function (_a) {
     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 dialogRef = React.useRef(null);
     var previouslyFocusedElement = React.useRef(null);
+    var onCloseRef = React.useRef(onClose);
+    onCloseRef.current = onClose;
     var portalRoot = React.useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
-    React.useEffect(function () {
+    React.useLayoutEffect(function () {
         if (typeof document === 'undefined')
             return;
+        previouslyFocusedElement.current = document.activeElement;
         var inertElements = Array.from(new Set(inertSelectors.flatMap(function (id) {
             var element = document.getElementById(id);
             return element ? [element] : [];
         })));
         var body = document.body;
         var html = document.documentElement;
-        previouslyFocusedElement.current = document.activeElement;
         var restoreInert = utils.toggleInert({
             elements: inertElements,
             isInert: true
@@ -58,8 +61,17 @@ var Modal = function (_a) {
         body.style.overflow = 'hidden';
         html.style.overflow = 'hidden';
         var handleEscape = function (event) {
-            return utils.escapeKeyboardEventHandler({ event: event, onEscape: onClose });
+            return utils.escapeKeyboardEventHandler({
+                event: event,
+                onEscape: function () {
+                    var _a;
+                    (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef);
+                }
+            });
         };
+        var root = dialogRef.current;
+        var first = root === null || root === void 0 ? void 0 : root.querySelector(utils.focusableSelectors);
+        first === null || first === void 0 ? void 0 : first.focus();
         document.addEventListener('keydown', handleEscape);
         return function () {
             restoreInert();
@@ -70,7 +82,7 @@ var Modal = function (_a) {
                 previouslyFocusedElement.current.focus();
             }
         };
-    }, [inertSelectors, onClose]);
+    }, [inertSelectors]);
     if (!portalRoot)
         return null;
     var cancelButton = (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, variant: CgButton_types.EButtonVariant.secondary }, labelCancel));
@@ -80,7 +92,7 @@ var Modal = function (_a) {
         }
     };
     return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { noOverlay: noOverlay, onMouseDown: handleBackdropMouseDown },
-        React__default["default"].createElement(Modal_styles.Frame, { "aria-labelledby": titleId, "aria-modal": "true", role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
+        React__default["default"].createElement(Modal_styles.Frame, { ref: dialogRef, "aria-labelledby": titleId, "aria-modal": "true", role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
             React__default["default"].createElement(Modal_styles.Header, null,
                 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 },

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/WarningLabel/WarningLabel.js

@@ -14,7 +14,7 @@ function WarningLabel(_a) {
     var text = _a.text, background = _a.background, icon = _a.icon;
     return (React__default["default"].createElement(WarningLabel_styles.WarningIndicator, { background: background },
         icon && React__default["default"].createElement(WarningLabel_styles.IconWrapper, null, icon),
-        React__default["default"].createElement(WarningLabel_styles.BodyTextStyled, { size: typography.TextTypes.TextSize.TINY }, text)));
+        React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.TINY }, text)));
 }
 
 exports.WarningLabel = WarningLabel;

package/build/cjs/components/src/components/WarningLabel/WarningLabel.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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,10 +11,8 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var WarningIndicator = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: ", "px;\n  width: fit-content;\n"], ["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: ", "px;\n  width: fit-content;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
 var IconWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"])));
-var BodyTextStyled = styled__default["default"](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;
 
-exports.BodyTextStyled = BodyTextStyled;
 exports.IconWrapper = IconWrapper;
 exports.WarningIndicator = WarningIndicator;
 //# sourceMappingURL=WarningLabel.styles.js.map

package/build/cjs/components/src/components/WarningLabel/WarningLabel.styles.js.map

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

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

@@ -6,7 +6,7 @@ var AvailabilityLabel = function (_a) {
     var label = _a.label, _b = _a.textSize, textSize = _b === void 0 ? TextTypes.TextSize.EXTRASMALL : _b;
     return (React.createElement(Root, null,
         React.createElement(Dot, null),
-        React.createElement(BodyText, { size: textSize }, label)));
+        React.createElement(BodyText, { size: textSize, as: "span" }, label)));
 };
 
 export { AvailabilityLabel };

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

@@ -1,8 +1,8 @@
-import React, { useId, useRef, useMemo, useEffect } from 'react';
+import React, { useId, useRef, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { theme } from '@citygross/design-tokens';
 import { Icons } from '@citygross/icons';
-import { toggleInert, escapeKeyboardEventHandler } from '@citygross/utils';
+import { toggleInert, focusableSelectors, escapeKeyboardEventHandler } from '@citygross/utils';
 import { CgButton } from '../CgButton/CgButton.js';
 import { Overlay, Frame, Header, Title, Footer } from './Modal.styles.js';
 import { EButtonVariant } from '../CgButton/CgButton.types.js';
@@ -29,18 +29,21 @@ var Modal = function (_a) {
     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 dialogRef = useRef(null);
     var previouslyFocusedElement = useRef(null);
+    var onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
     var portalRoot = useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
-    useEffect(function () {
+    useLayoutEffect(function () {
         if (typeof document === 'undefined')
             return;
+        previouslyFocusedElement.current = document.activeElement;
         var inertElements = Array.from(new Set(inertSelectors.flatMap(function (id) {
             var element = document.getElementById(id);
             return element ? [element] : [];
         })));
         var body = document.body;
         var html = document.documentElement;
-        previouslyFocusedElement.current = document.activeElement;
         var restoreInert = toggleInert({
             elements: inertElements,
             isInert: true
@@ -50,8 +53,17 @@ var Modal = function (_a) {
         body.style.overflow = 'hidden';
         html.style.overflow = 'hidden';
         var handleEscape = function (event) {
-            return escapeKeyboardEventHandler({ event: event, onEscape: onClose });
+            return escapeKeyboardEventHandler({
+                event: event,
+                onEscape: function () {
+                    var _a;
+                    (_a = onCloseRef.current) === null || _a === void 0 ? void 0 : _a.call(onCloseRef);
+                }
+            });
         };
+        var root = dialogRef.current;
+        var first = root === null || root === void 0 ? void 0 : root.querySelector(focusableSelectors);
+        first === null || first === void 0 ? void 0 : first.focus();
         document.addEventListener('keydown', handleEscape);
         return function () {
             restoreInert();
@@ -62,7 +74,7 @@ var Modal = function (_a) {
                 previouslyFocusedElement.current.focus();
             }
         };
-    }, [inertSelectors, onClose]);
+    }, [inertSelectors]);
     if (!portalRoot)
         return null;
     var cancelButton = (React.createElement(CgButton, { onClick: onClose, variant: EButtonVariant.secondary }, labelCancel));
@@ -72,7 +84,7 @@ var Modal = function (_a) {
         }
     };
     return createPortal(React.createElement(Overlay, { noOverlay: noOverlay, onMouseDown: handleBackdropMouseDown },
-        React.createElement(Frame, { "aria-labelledby": titleId, "aria-modal": "true", role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
+        React.createElement(Frame, { ref: dialogRef, "aria-labelledby": titleId, "aria-modal": "true", role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
             React.createElement(Header, null,
                 React.createElement(Title, { 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 },

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/WarningLabel/WarningLabel.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { TextTypes } from '@citygross/typography';
-import { WarningIndicator, IconWrapper, BodyTextStyled } from './WarningLabel.styles.js';
+import { BodyText, TextTypes } from '@citygross/typography';
+import { WarningIndicator, IconWrapper } from './WarningLabel.styles.js';
 
 function WarningLabel(_a) {
     var text = _a.text, background = _a.background, icon = _a.icon;
     return (React.createElement(WarningIndicator, { background: background },
         icon && React.createElement(IconWrapper, null, icon),
-        React.createElement(BodyTextStyled, { size: TextTypes.TextSize.TINY }, text)));
+        React.createElement(BodyText, { size: TextTypes.TextSize.TINY }, text)));
 }
 
 export { WarningLabel };

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

@@ -1,11 +1,9 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
-import { BodyText } from '@citygross/typography';
 import styled from 'styled-components';
 
 var WarningIndicator = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: ", "px;\n  width: fit-content;\n"], ["\n  padding: ", "px\n    ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  gap: ", "px;\n  width: fit-content;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
 var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"])));
-var BodyTextStyled = styled(BodyText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;
 
-export { BodyTextStyled, IconWrapper, WarningIndicator };
+export { IconWrapper, WarningIndicator };
 //# sourceMappingURL=WarningLabel.styles.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.17.10",
+  "version": "0.17.12",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "ae050c58fa8cad8e1867d412ba3a5aedb10d8ad2"
+  "gitHead": "3d6105e54543744d45aef0c455fbf83ce788d1e4"
 }