@citygross/components 0.16.26 → 0.16.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/@types/components/Modal/Modal.styles.d.ts +6 -1
  2. package/build/cjs/components/src/components/Modal/Modal.js +7 -16
  3. package/build/cjs/components/src/components/Modal/Modal.js.map +1 -1
  4. package/build/cjs/components/src/components/Modal/Modal.styles.js +8 -2
  5. package/build/cjs/components/src/components/Modal/Modal.styles.js.map +1 -1
  6. package/build/es/components/src/components/Modal/Modal.js +8 -17
  7. package/build/es/components/src/components/Modal/Modal.js.map +1 -1
  8. package/build/es/components/src/components/Modal/Modal.styles.js +8 -3
  9. package/build/es/components/src/components/Modal/Modal.styles.js.map +1 -1
  10. package/package.json +2 -2
package/build/@types/components/Modal/Modal.styles.d.ts CHANGED
@@ -1,8 +1,13 @@
1
+ /// <reference types="react" />
1
2
  import { type TModal } from './Modal';
2
3
  declare type TOverlay = Pick<TModal, 'noOverlay'>;
3
4
  export declare const Overlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOverlay, never>;
4
5
  declare type TFrame = Pick<TModal, 'size'>;
5
6
  export declare const Frame: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFrame, never>;
6
7
  export declare const Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
- export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
+ 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>;
9
+ declare type TFooter = {
10
+ rowReverse?: boolean;
11
+ };
12
+ export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFooter, never>;
8
13
  export {};
package/build/cjs/components/src/components/Modal/Modal.js CHANGED
@@ -6,7 +6,6 @@ var React = require('react');
6
6
  var reactDom = require('react-dom');
7
7
  var designTokens = require('@citygross/design-tokens');
8
8
  var icons = require('@citygross/icons');
9
- var typography = require('@citygross/typography');
10
9
  var utils = require('@citygross/utils');
11
10
  var CgButton = require('../CgButton/CgButton.js');
12
11
  var Modal_styles = require('./Modal.styles.js');
@@ -38,8 +37,6 @@ var Modal = function (_a) {
38
37
  var _b, _c, _d;
39
38
  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;
40
39
  var titleId = React.useId();
41
- var modalRef = React.useRef(null);
42
- var cancelButtonRef = React.useRef(null);
43
40
  var previouslyFocusedElement = React.useRef(null);
44
41
  var portalRoot = React.useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
45
42
  React.useEffect(function () {
@@ -64,14 +61,6 @@ var Modal = function (_a) {
64
61
  return utils.escapeKeyboardEventHandler({ event: event, onEscape: onClose });
65
62
  };
66
63
  document.addEventListener('keydown', handleEscape);
67
- requestAnimationFrame(function () {
68
- var _a, _b;
69
- if (variant === exports.EModalVariant.destructive) {
70
- (_a = cancelButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
71
- return;
72
- }
73
- (_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
74
- });
75
64
  return function () {
76
65
  restoreInert();
77
66
  body.style.overflow = previousBodyOverflow;
@@ -81,19 +70,21 @@ var Modal = function (_a) {
81
70
  previouslyFocusedElement.current.focus();
82
71
  }
83
72
  };
84
- }, [inertSelectors, onClose, variant]);
73
+ }, [inertSelectors, onClose]);
85
74
  if (!portalRoot)
86
75
  return null;
76
+ var cancelButton = (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, variant: CgButton_types.EButtonVariant.secondary }, labelCancel));
87
77
  return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { noOverlay: noOverlay, onClick: onClose },
88
- 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 },
78
+ 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 },
89
79
  React__default["default"].createElement(Modal_styles.Header, null,
90
- React__default["default"].createElement(typography.H2, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
80
+ React__default["default"].createElement(Modal_styles.Title, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
91
81
  variant !== exports.EModalVariant.destructive && (React__default["default"].createElement(CgButton.CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: CgButton_types.EButtonVariant.ghost },
92
82
  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 })))),
93
83
  children,
94
- React__default["default"].createElement(Modal_styles.Footer, null,
84
+ React__default["default"].createElement(Modal_styles.Footer, { rowReverse: variant === exports.EModalVariant.destructive },
85
+ variant === exports.EModalVariant.destructive && cancelButton,
95
86
  React__default["default"].createElement(CgButton.CgButton, { onClick: onConfirm, variant: CgButton_types.EButtonVariant.primary }, labelCta),
96
- variant !== exports.EModalVariant.informational && (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, ref: cancelButtonRef, variant: CgButton_types.EButtonVariant.secondary }, labelCancel))))), portalRoot);
87
+ variant === exports.EModalVariant.transactional && cancelButton))), portalRoot);
97
88
  };
98
89
 
99
90
  exports.Modal = Modal;
package/build/cjs/components/src/components/Modal/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/Modal/Modal.styles.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _tslib = require('../../../../_virtual/_tslib.js');
6
+ var typography = require('@citygross/typography');
6
7
  var styled = require('styled-components');
7
8
  var Modal = require('./Modal.js');
8
9
 
@@ -59,7 +60,11 @@ var Header = styled__default["default"].div(templateObject_3 || (templateObject_
59
60
  var theme = _a.theme;
60
61
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
61
62
  });
62
- 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) {
63
+ var Title = styled__default["default"](typography.H2)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
64
+ 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) {
65
+ var rowReverse = _a.rowReverse;
66
+ return (rowReverse ? 'row-reverse' : 'row');
67
+ }, function (_a) {
63
68
  var _b;
64
69
  var theme = _a.theme;
65
70
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
@@ -68,10 +73,11 @@ var Footer = styled__default["default"].div(templateObject_4 || (templateObject_
68
73
  var theme = _a.theme;
69
74
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.lg;
70
75
  });
71
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
76
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
72
77
 
73
78
  exports.Footer = Footer;
74
79
  exports.Frame = Frame;
75
80
  exports.Header = Header;
76
81
  exports.Overlay = Overlay;
82
+ exports.Title = Title;
77
83
  //# sourceMappingURL=Modal.styles.js.map
package/build/cjs/components/src/components/Modal/Modal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Modal/Modal.js CHANGED
@@ -2,10 +2,9 @@ import React, { useId, useRef, useMemo, useEffect } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
3
  import { theme } from '@citygross/design-tokens';
4
4
  import { Icons } from '@citygross/icons';
5
- import { H2 } from '@citygross/typography';
6
5
  import { toggleInert, escapeKeyboardEventHandler } from '@citygross/utils';
7
6
  import { CgButton } from '../CgButton/CgButton.js';
8
- import { Overlay, Frame, Header, Footer } from './Modal.styles.js';
7
+ import { Overlay, Frame, Header, Title, Footer } from './Modal.styles.js';
9
8
  import { EButtonVariant } from '../CgButton/CgButton.types.js';
10
9
 
11
10
  var EModalSize;
@@ -30,8 +29,6 @@ var Modal = function (_a) {
30
29
  var _b, _c, _d;
31
30
  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;
32
31
  var titleId = useId();
33
- var modalRef = useRef(null);
34
- var cancelButtonRef = useRef(null);
35
32
  var previouslyFocusedElement = useRef(null);
36
33
  var portalRoot = useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
37
34
  useEffect(function () {
@@ -56,14 +53,6 @@ var Modal = function (_a) {
56
53
  return escapeKeyboardEventHandler({ event: event, onEscape: onClose });
57
54
  };
58
55
  document.addEventListener('keydown', handleEscape);
59
- requestAnimationFrame(function () {
60
- var _a, _b;
61
- if (variant === EModalVariant.destructive) {
62
- (_a = cancelButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
63
- return;
64
- }
65
- (_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
66
- });
67
56
  return function () {
68
57
  restoreInert();
69
58
  body.style.overflow = previousBodyOverflow;
@@ -73,19 +62,21 @@ var Modal = function (_a) {
73
62
  previouslyFocusedElement.current.focus();
74
63
  }
75
64
  };
76
- }, [inertSelectors, onClose, variant]);
65
+ }, [inertSelectors, onClose]);
77
66
  if (!portalRoot)
78
67
  return null;
68
+ var cancelButton = (React.createElement(CgButton, { onClick: onClose, variant: EButtonVariant.secondary }, labelCancel));
79
69
  return createPortal(React.createElement(Overlay, { noOverlay: noOverlay, onClick: onClose },
80
- 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 },
70
+ React.createElement(Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
81
71
  React.createElement(Header, null,
82
- React.createElement(H2, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
72
+ React.createElement(Title, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
83
73
  variant !== EModalVariant.destructive && (React.createElement(CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: EButtonVariant.ghost },
84
74
  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 })))),
85
75
  children,
86
- React.createElement(Footer, null,
76
+ React.createElement(Footer, { rowReverse: variant === EModalVariant.destructive },
77
+ variant === EModalVariant.destructive && cancelButton,
87
78
  React.createElement(CgButton, { onClick: onConfirm, variant: EButtonVariant.primary }, labelCta),
88
- variant !== EModalVariant.informational && (React.createElement(CgButton, { onClick: onClose, ref: cancelButtonRef, variant: EButtonVariant.secondary }, labelCancel))))), portalRoot);
79
+ variant === EModalVariant.transactional && cancelButton))), portalRoot);
89
80
  };
90
81
 
91
82
  export { EModalSize, EModalVariant, Modal };
package/build/es/components/src/components/Modal/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Modal/Modal.styles.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
+ import { H2 } from '@citygross/typography';
2
3
  import styled from 'styled-components';
3
4
  import { EModalSize } from './Modal.js';
4
5
 
@@ -51,7 +52,11 @@ var Header = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateOb
51
52
  var theme = _a.theme;
52
53
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
53
54
  });
54
- 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) {
55
+ var Title = styled(H2)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
56
+ var Footer = styled.div(templateObject_5 || (templateObject_5 = __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) {
57
+ var rowReverse = _a.rowReverse;
58
+ return (rowReverse ? 'row-reverse' : 'row');
59
+ }, function (_a) {
55
60
  var _b;
56
61
  var theme = _a.theme;
57
62
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
@@ -60,7 +65,7 @@ var Footer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateOb
60
65
  var theme = _a.theme;
61
66
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.lg;
62
67
  });
63
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
68
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
64
69
 
65
- export { Footer, Frame, Header, Overlay };
70
+ export { Footer, Frame, Header, Overlay, Title };
66
71
  //# sourceMappingURL=Modal.styles.js.map
package/build/es/components/src/components/Modal/Modal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Modal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.16.26",
3
+ "version": "0.16.27",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
74
74
  "react-slick": "^0.30.1",
75
75
  "slick-carousel": "^1.8.1"
76
76
  },
77
- "gitHead": "705ad01b06d115e22f11761eda44db1a4637e26d"
77
+ "gitHead": "7819741544630c9734f1400533b9c2b58a89f274"
78
78
  }