@citygross/components 0.8.78 → 0.8.80

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.
@@ -14,5 +14,6 @@ export declare type TNavButton = styles.TButton & styles.TBaseSmallButton & {
14
14
  keepLabel?: boolean;
15
15
  minWidth?: number;
16
16
  badgeMinWidth?: number;
17
+ id?: string;
17
18
  };
18
- export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, tabIndex, keepLabel, minWidth, badgeMinWidth, ...props }: TNavButton): JSX.Element;
19
+ export declare function NavButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, size, flexReverse, childGap, children, center, fullWidth, xsSize, borderRadius, hoverBackground, noShadow, tabIndex, keepLabel, minWidth, badgeMinWidth, id, ...props }: TNavButton): JSX.Element;
@@ -12,4 +12,5 @@ export declare type TSideModal = {
12
12
  maxHeight?: string;
13
13
  fullViewportHeight?: boolean;
14
14
  };
15
- export declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, maxHeight, children }: TSideModal) => React.ReactPortal | null;
15
+ export declare const SideModal: React.ForwardRefExoticComponent<TSideModal & React.RefAttributes<HTMLDivElement>>;
16
+ export default SideModal;
@@ -80,8 +80,7 @@ require('styled-components');
80
80
  require('../SearchBar/SearchBar.styles.js');
81
81
  require('../Nav/Nav.styles.js');
82
82
  require('../NavMainLink/NavMainLink.styled.js');
83
- require('framer-motion');
84
- require('../SideModal/SideModal.styles.js');
83
+ require('../SideModal/SideModal.js');
85
84
  require('../IconText/IconText.styles.js');
86
85
  require('../Dropdown/Dropdown.styles.js');
87
86
  require('../SearchListItem/SearchListItem.styles.js');
@@ -1 +1 @@
1
- {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,8 +12,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  function NavButton(_a) {
15
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth"]);
16
- return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth }, props),
15
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, id = _a.id, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth", "id"]);
16
+ return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth, "data-focus-id": id ||
17
+ "nav-button-".concat(Math.random()
18
+ .toString(36)
19
+ .slice(2, 11)) }, props),
17
20
  loading && (React__default["default"].createElement(Button_styles.Loading, null,
18
21
  React__default["default"].createElement(Button_styles.LoadingContainer, null,
19
22
  React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
@@ -1 +1 @@
1
- {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -12,14 +12,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
 
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
- var SideModal = function (_a) {
15
+ var SideModal = React.forwardRef(function (_a, ref) {
16
16
  var _b, _c;
17
17
  var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, children = _a.children;
18
- var ref = React.useRef(null);
19
18
  var domSafe = typeof document !== 'undefined';
20
19
  return domSafe
21
20
  ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { ref: ref, onMouseDown: function (e) {
22
- if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
21
+ if (e.target === e.currentTarget) {
23
22
  onBackdropClick();
24
23
  }
25
24
  }, overlayBackground: overlayBackground, initial: { opacity: 0 }, maxHeight: maxHeight, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
@@ -27,7 +26,9 @@ var SideModal = function (_a) {
27
26
  } },
28
27
  React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxHeight: maxHeight, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
29
28
  : null;
30
- };
29
+ });
30
+ SideModal.displayName = 'SideModal';
31
31
 
32
32
  exports.SideModal = SideModal;
33
+ exports["default"] = SideModal;
33
34
  //# sourceMappingURL=SideModal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -80,8 +80,7 @@ require('styled-components');
80
80
  require('../SearchBar/SearchBar.styles.js');
81
81
  require('../Nav/Nav.styles.js');
82
82
  require('../NavMainLink/NavMainLink.styled.js');
83
- require('framer-motion');
84
- require('../SideModal/SideModal.styles.js');
83
+ require('../SideModal/SideModal.js');
85
84
  require('../IconText/IconText.styles.js');
86
85
  require('../Dropdown/Dropdown.styles.js');
87
86
  require('../SearchListItem/SearchListItem.styles.js');
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -76,8 +76,7 @@ import 'styled-components';
76
76
  import '../SearchBar/SearchBar.styles.js';
77
77
  import '../Nav/Nav.styles.js';
78
78
  import '../NavMainLink/NavMainLink.styled.js';
79
- import 'framer-motion';
80
- import '../SideModal/SideModal.styles.js';
79
+ import '../SideModal/SideModal.js';
81
80
  import '../IconText/IconText.styles.js';
82
81
  import '../Dropdown/Dropdown.styles.js';
83
82
  import '../SearchListItem/SearchListItem.styles.js';
@@ -1 +1 @@
1
- {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -4,8 +4,11 @@ import { NavButton as NavButton$1, Loading, LoadingContainer, LoadingSpinner, Na
4
4
  import { theme } from '@citygross/design-tokens';
5
5
 
6
6
  function NavButton(_a) {
7
- var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth"]);
8
- return (React.createElement(NavButton$1, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth }, props),
7
+ var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, size = _a.size, flexReverse = _a.flexReverse, childGap = _a.childGap, children = _a.children, _c = _a.center, center = _c === void 0 ? true : _c, fullWidth = _a.fullWidth, xsSize = _a.xsSize, borderRadius = _a.borderRadius, hoverBackground = _a.hoverBackground, noShadow = _a.noShadow, tabIndex = _a.tabIndex, keepLabel = _a.keepLabel, minWidth = _a.minWidth, badgeMinWidth = _a.badgeMinWidth, id = _a.id, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "size", "flexReverse", "childGap", "children", "center", "fullWidth", "xsSize", "borderRadius", "hoverBackground", "noShadow", "tabIndex", "keepLabel", "minWidth", "badgeMinWidth", "id"]);
8
+ return (React.createElement(NavButton$1, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, keepLabel: keepLabel, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow, center: center, fullWidth: fullWidth, flexReverse: flexReverse, size: size, xsSize: xsSize, borderRadius: borderRadius, childGap: childGap, hoverBackground: hoverBackground, noShadow: noShadow, minWidth: minWidth, "data-focus-id": id ||
9
+ "nav-button-".concat(Math.random()
10
+ .toString(36)
11
+ .slice(2, 11)) }, props),
9
12
  loading && (React.createElement(Loading, null,
10
13
  React.createElement(LoadingContainer, null,
11
14
  React.createElement(LoadingSpinner, null)))),
@@ -1 +1 @@
1
- {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"NavButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,17 +1,16 @@
1
- import React, { useRef } from 'react';
1
+ import React, { forwardRef } from 'react';
2
2
  import { AnimatePresence } from 'framer-motion';
3
3
  import { createPortal } from 'react-dom';
4
4
  import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
5
5
  import { theme } from '@citygross/design-tokens';
6
6
 
7
- var SideModal = function (_a) {
7
+ var SideModal = forwardRef(function (_a, ref) {
8
8
  var _b, _c;
9
9
  var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, children = _a.children;
10
- var ref = useRef(null);
11
10
  var domSafe = typeof document !== 'undefined';
12
11
  return domSafe
13
12
  ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { ref: ref, onMouseDown: function (e) {
14
- if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
13
+ if (e.target === e.currentTarget) {
15
14
  onBackdropClick();
16
15
  }
17
16
  }, overlayBackground: overlayBackground, initial: { opacity: 0 }, maxHeight: maxHeight, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
@@ -19,7 +18,8 @@ var SideModal = function (_a) {
19
18
  } },
20
19
  React.createElement(SideModalContainer, { slideFrom: slideFrom, maxHeight: maxHeight, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
21
20
  : null;
22
- };
21
+ });
22
+ SideModal.displayName = 'SideModal';
23
23
 
24
- export { SideModal };
24
+ export { SideModal, SideModal as default };
25
25
  //# sourceMappingURL=SideModal.js.map
@@ -76,8 +76,7 @@ import 'styled-components';
76
76
  import '../SearchBar/SearchBar.styles.js';
77
77
  import '../Nav/Nav.styles.js';
78
78
  import '../NavMainLink/NavMainLink.styled.js';
79
- import 'framer-motion';
80
- import '../SideModal/SideModal.styles.js';
79
+ import '../SideModal/SideModal.js';
81
80
  import '../IconText/IconText.styles.js';
82
81
  import '../Dropdown/Dropdown.styles.js';
83
82
  import '../SearchListItem/SearchListItem.styles.js';
@@ -1 +1 @@
1
- {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.78",
3
+ "version": "0.8.80",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
76
76
  "react-slick": "^0.30.1",
77
77
  "slick-carousel": "^1.8.1"
78
78
  },
79
- "gitHead": "9f24dab92a2ab9367e8833fdbbc0555dde4b04e0"
79
+ "gitHead": "2708da6d0a2a68f8765a3f91242326051f73373a"
80
80
  }