@citygross/components 0.8.169 → 0.8.171

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 (11) hide show
  1. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js +10 -2
  2. package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js.map +1 -1
  3. package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.js +18 -5
  4. package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.js.map +1 -1
  5. package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +1 -1
  6. package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js +10 -2
  7. package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js.map +1 -1
  8. package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.js +19 -6
  9. package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.js.map +1 -1
  10. package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js +1 -1
  11. package/package.json +2 -2
package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js CHANGED
@@ -21,8 +21,16 @@ var CartSubTotalContainer = styled__default["default"].div(templateObject_1 || (
21
21
  ? "\n font-size: ".concat((_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3, "px;\n font-weight: ").concat((_e = (_d = theme.typography) === null || _d === void 0 ? void 0 : _d.weight) === null || _e === void 0 ? void 0 : _e.medium, ";\n ")
22
22
  : "\n font-size: ".concat((_g = (_f = theme.typography) === null || _f === void 0 ? void 0 : _f.size) === null || _g === void 0 ? void 0 : _g.s2, "px;\n font-weight: ").concat((_j = (_h = theme.typography) === null || _h === void 0 ? void 0 : _h.weight) === null || _j === void 0 ? void 0 : _j.regular, ";\n ");
23
23
  });
24
- var SubTotalLabel = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; });
25
- var ToolTipButton = styled__default["default"].button(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
24
+ var SubTotalLabel = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
25
+ var _b;
26
+ var theme = _a.theme;
27
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
28
+ });
29
+ var ToolTipButton = styled__default["default"].button(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ", "px;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ", "px;\n\n svg {\n display: block;\n }\n"])), function (_a) {
30
+ var _b;
31
+ var theme = _a.theme;
32
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
33
+ });
26
34
  var Price = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
27
35
  var priceColor = _a.priceColor;
28
36
  return priceColor;
package/build/cjs/components/src/components/CartSubTotal/CartSubTotal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.js CHANGED
@@ -15,12 +15,22 @@ var ToolTipDialog = function (_a) {
15
15
  var id = _a.id, info = _a.info, onBottom = _a.onBottom, toggle = _a.toggle;
16
16
  var infoRef = React.useRef(null);
17
17
  var isOpenRef = React.useRef(true);
18
- utils.useOutsideClick(infoRef, function () { return toggle(); });
18
+ var triggerElementRef = React.useRef(null);
19
+ React.useEffect(function () {
20
+ triggerElementRef.current = document.activeElement;
21
+ }, []);
22
+ var handleClose = React.useCallback(function () {
23
+ if (triggerElementRef.current) {
24
+ triggerElementRef.current.focus();
25
+ }
26
+ toggle();
27
+ }, [toggle]);
28
+ utils.useOutsideClick(infoRef, handleClose);
19
29
  React.useEffect(function () {
20
30
  var focusTrapCleanup;
21
31
  if (infoRef.current) {
22
32
  focusTrapCleanup = utils.focusTrap({
23
- exitFunction: toggle,
33
+ exitFunction: handleClose,
24
34
  ref: infoRef
25
35
  });
26
36
  }
@@ -28,7 +38,7 @@ var ToolTipDialog = function (_a) {
28
38
  if (event.key === 'Escape' && isOpenRef.current && infoRef.current) {
29
39
  event.stopPropagation();
30
40
  isOpenRef.current = false;
31
- toggle();
41
+ handleClose();
32
42
  }
33
43
  };
34
44
  document.addEventListener('keydown', handleKeyDown, true);
@@ -36,11 +46,14 @@ var ToolTipDialog = function (_a) {
36
46
  isOpenRef.current = false;
37
47
  document.removeEventListener('keydown', handleKeyDown, true);
38
48
  focusTrapCleanup === null || focusTrapCleanup === void 0 ? void 0 : focusTrapCleanup();
49
+ if (triggerElementRef.current) {
50
+ triggerElementRef.current.focus();
51
+ }
39
52
  };
40
- }, [toggle]);
53
+ }, [handleClose]);
41
54
  return (React__default["default"].createElement(ToolTipDialog_styles.DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: infoRef, role: "tooltip" },
42
55
  info,
43
- React__default["default"].createElement(ToolTipDialog_styles.DialogClose, { "aria-label": "St\u00E4ng", onClick: toggle },
56
+ React__default["default"].createElement(ToolTipDialog_styles.DialogClose, { "aria-label": "St\u00E4ng", onClick: handleClose },
44
57
  React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", color: "white", height: 20, width: 20 }))));
45
58
  };
46
59
 
package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/ToolTipDialog/ToolTipDialog.styles.js CHANGED
@@ -40,7 +40,7 @@ var DialogContainer = styled__default["default"].div(templateObject_1 || (templa
40
40
  ? "\n margin-top: ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2, "px;\n top: 100%;\n ")
41
41
  : "\n margin-bottom: ".concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs2, "px;\n bottom: 100%;\n ");
42
42
  });
43
- var DialogClose = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
43
+ var DialogClose = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n display: block;\n }\n"])));
44
44
  var templateObject_1, templateObject_2;
45
45
 
46
46
  exports.DialogClose = DialogClose;
package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js CHANGED
@@ -13,8 +13,16 @@ var CartSubTotalContainer = styled.div(templateObject_1 || (templateObject_1 = _
13
13
  ? "\n font-size: ".concat((_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3, "px;\n font-weight: ").concat((_e = (_d = theme.typography) === null || _d === void 0 ? void 0 : _d.weight) === null || _e === void 0 ? void 0 : _e.medium, ";\n ")
14
14
  : "\n font-size: ".concat((_g = (_f = theme.typography) === null || _f === void 0 ? void 0 : _f.size) === null || _g === void 0 ? void 0 : _g.s2, "px;\n font-weight: ").concat((_j = (_h = theme.typography) === null || _h === void 0 ? void 0 : _h.weight) === null || _j === void 0 ? void 0 : _j.regular, ";\n ");
15
15
  });
16
- var SubTotalLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; });
17
- var ToolTipButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
16
+ var SubTotalLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
17
+ var _b;
18
+ var theme = _a.theme;
19
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
20
+ });
21
+ var ToolTipButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ", "px;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: ", "px;\n\n svg {\n display: block;\n }\n"])), function (_a) {
22
+ var _b;
23
+ var theme = _a.theme;
24
+ return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
25
+ });
18
26
  var Price = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
19
27
  var priceColor = _a.priceColor;
20
28
  return priceColor;
package/build/es/components/src/components/CartSubTotal/CartSubTotal.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"CartSubTotal.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useRef, useEffect } from 'react';
1
+ import React, { useRef, useEffect, useCallback } from 'react';
2
2
  import { useOutsideClick, focusTrap } from '@citygross/utils';
3
3
  import { Icons } from '@citygross/icons';
4
4
  import { DialogContainer, DialogClose } from './ToolTipDialog.styles.js';
@@ -7,12 +7,22 @@ var ToolTipDialog = function (_a) {
7
7
  var id = _a.id, info = _a.info, onBottom = _a.onBottom, toggle = _a.toggle;
8
8
  var infoRef = useRef(null);
9
9
  var isOpenRef = useRef(true);
10
- useOutsideClick(infoRef, function () { return toggle(); });
10
+ var triggerElementRef = useRef(null);
11
+ useEffect(function () {
12
+ triggerElementRef.current = document.activeElement;
13
+ }, []);
14
+ var handleClose = useCallback(function () {
15
+ if (triggerElementRef.current) {
16
+ triggerElementRef.current.focus();
17
+ }
18
+ toggle();
19
+ }, [toggle]);
20
+ useOutsideClick(infoRef, handleClose);
11
21
  useEffect(function () {
12
22
  var focusTrapCleanup;
13
23
  if (infoRef.current) {
14
24
  focusTrapCleanup = focusTrap({
15
- exitFunction: toggle,
25
+ exitFunction: handleClose,
16
26
  ref: infoRef
17
27
  });
18
28
  }
@@ -20,7 +30,7 @@ var ToolTipDialog = function (_a) {
20
30
  if (event.key === 'Escape' && isOpenRef.current && infoRef.current) {
21
31
  event.stopPropagation();
22
32
  isOpenRef.current = false;
23
- toggle();
33
+ handleClose();
24
34
  }
25
35
  };
26
36
  document.addEventListener('keydown', handleKeyDown, true);
@@ -28,11 +38,14 @@ var ToolTipDialog = function (_a) {
28
38
  isOpenRef.current = false;
29
39
  document.removeEventListener('keydown', handleKeyDown, true);
30
40
  focusTrapCleanup === null || focusTrapCleanup === void 0 ? void 0 : focusTrapCleanup();
41
+ if (triggerElementRef.current) {
42
+ triggerElementRef.current.focus();
43
+ }
31
44
  };
32
- }, [toggle]);
45
+ }, [handleClose]);
33
46
  return (React.createElement(DialogContainer, { "aria-live": "polite", id: id, onBottom: onBottom, ref: infoRef, role: "tooltip" },
34
47
  info,
35
- React.createElement(DialogClose, { "aria-label": "St\u00E4ng", onClick: toggle },
48
+ React.createElement(DialogClose, { "aria-label": "St\u00E4ng", onClick: handleClose },
36
49
  React.createElement(Icons.Cross, { "aria-hidden": "true", color: "white", height: 20, width: 20 }))));
37
50
  };
38
51
 
package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ToolTipDialog.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/ToolTipDialog/ToolTipDialog.styles.js CHANGED
@@ -32,7 +32,7 @@ var DialogContainer = styled.div(templateObject_1 || (templateObject_1 = __makeT
32
32
  ? "\n margin-top: ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs2, "px;\n top: 100%;\n ")
33
33
  : "\n margin-bottom: ".concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs2, "px;\n bottom: 100%;\n ");
34
34
  });
35
- var DialogClose = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n\n svg {\n display: block;\n }\n"])));
35
+ var DialogClose = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n display: block;\n }\n"], ["\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n display: block;\n }\n"])));
36
36
  var templateObject_1, templateObject_2;
37
37
 
38
38
  export { DialogClose, DialogContainer };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.169",
3
+ "version": "0.8.171",
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": "48ef7eb7b641949927e104527a7f915390440d94"
77
+ "gitHead": "1053e6e75192187811c33d54d1d52d7cdf7757b5"
78
78
  }