@citygross/components 0.8.89 → 0.8.91
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.
- package/build/@types/components/Modal/Modal.d.ts +8 -8
- package/build/@types/components/SideModal/SideModal.d.ts +6 -7
- package/build/cjs/components/src/components/Modal/Modal.js +5 -6
- package/build/cjs/components/src/components/Modal/Modal.js.map +1 -1
- package/build/cjs/components/src/components/Nav/Nav.js +1 -1
- package/build/cjs/components/src/components/SideModal/SideModal.js +5 -5
- package/build/es/components/src/components/Modal/Modal.js +6 -7
- package/build/es/components/src/components/Modal/Modal.js.map +1 -1
- package/build/es/components/src/components/Nav/Nav.js +1 -1
- package/build/es/components/src/components/SideModal/SideModal.js +5 -5
- package/package.json +2 -2
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import * as styles from './Modal.styles';
|
|
3
3
|
export declare type TModal = styles.TModalContainer & {
|
|
4
|
-
onBackdropClick: () => void;
|
|
5
4
|
children?: React.ReactNode;
|
|
6
|
-
|
|
7
|
-
subTitle?: string;
|
|
5
|
+
footer?: JSX.Element;
|
|
8
6
|
hideCancel?: boolean;
|
|
7
|
+
onBackdropClick: () => void;
|
|
9
8
|
querySelector?: string;
|
|
10
|
-
|
|
9
|
+
subTitle?: string;
|
|
10
|
+
title?: string;
|
|
11
11
|
};
|
|
12
12
|
export declare const Modal: React.ForwardRefExoticComponent<styles.TModalContainer & {
|
|
13
|
-
onBackdropClick: () => void;
|
|
14
13
|
children?: React.ReactNode;
|
|
15
|
-
|
|
16
|
-
subTitle?: string | undefined;
|
|
14
|
+
footer?: JSX.Element | undefined;
|
|
17
15
|
hideCancel?: boolean | undefined;
|
|
16
|
+
onBackdropClick: () => void;
|
|
18
17
|
querySelector?: string | undefined;
|
|
19
|
-
|
|
18
|
+
subTitle?: string | undefined;
|
|
19
|
+
title?: string | undefined;
|
|
20
20
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type TSideModal = {
|
|
3
|
-
onBackdropClick: () => void;
|
|
4
|
-
children?: React.ReactNode;
|
|
5
|
-
width?: number;
|
|
6
3
|
background?: string;
|
|
4
|
+
children?: React.ReactNode;
|
|
7
5
|
isVisible?: boolean;
|
|
6
|
+
maxHeight?: string;
|
|
7
|
+
maxWidth?: string;
|
|
8
|
+
onBackdropClick: () => void;
|
|
9
|
+
overlayBackground?: string;
|
|
8
10
|
querySelector?: string;
|
|
9
11
|
slideFrom?: 'left' | 'right';
|
|
10
|
-
|
|
11
|
-
maxWidth?: string;
|
|
12
|
-
maxHeight?: string;
|
|
13
|
-
fullViewportHeight?: boolean;
|
|
12
|
+
width?: number;
|
|
14
13
|
};
|
|
15
14
|
export declare const SideModal: React.ForwardRefExoticComponent<TSideModal & React.RefAttributes<HTMLDivElement>>;
|
|
16
15
|
export default SideModal;
|
|
@@ -16,21 +16,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
16
16
|
|
|
17
17
|
var Modal = React.forwardRef(function (_a, ref) {
|
|
18
18
|
var _b;
|
|
19
|
-
var
|
|
19
|
+
var _c = _a.background, background = _c === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _c, children = _a.children, footer = _a.footer, _d = _a.hideCancel, hideCancel = _d === void 0 ? true : _d, onBackdropClick = _a.onBackdropClick, isConfirm = _a.isConfirm, maxWidth = _a.maxWidth, _e = _a.querySelector, querySelector = _e === void 0 ? '#root' : _e, subTitle = _a.subTitle, title = _a.title;
|
|
20
20
|
var domSafe = typeof document !== 'undefined';
|
|
21
21
|
return domSafe
|
|
22
22
|
? reactDom.createPortal(React__default["default"].createElement(Modal_styles.ModalOverlay, { onClick: onBackdropClick, ref: ref },
|
|
23
|
-
React__default["default"].createElement(Modal_styles.ModalContainer, { isConfirm: isConfirm || false, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); },
|
|
24
|
-
title && (React__default["default"].createElement(
|
|
23
|
+
React__default["default"].createElement(Modal_styles.ModalContainer, { "aria-modal": "true", background: background, isConfirm: isConfirm || false, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog" },
|
|
24
|
+
title && (React__default["default"].createElement(React.Fragment, null,
|
|
25
25
|
React__default["default"].createElement(Modal_styles.ModalHeaderContainer, null,
|
|
26
26
|
React__default["default"].createElement(Modal_styles.ModalHeader, null,
|
|
27
27
|
React__default["default"].createElement(typography.H2, null, title),
|
|
28
28
|
!hideCancel && (React__default["default"].createElement(Modal_styles.CloseButtonWrapper, { onClick: onBackdropClick },
|
|
29
29
|
React__default["default"].createElement(icons.Icons.Cross, null)))),
|
|
30
30
|
React__default["default"].createElement(typography.BodyText, null, subTitle)))),
|
|
31
|
-
children && (React__default["default"].createElement(
|
|
32
|
-
|
|
33
|
-
footer && (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
31
|
+
children && (React__default["default"].createElement(Modal_styles.ChildrenWrapper, null, children)),
|
|
32
|
+
footer && (React__default["default"].createElement(React.Fragment, null,
|
|
34
33
|
React__default["default"].createElement(Spacer.Spacer, null),
|
|
35
34
|
React__default["default"].createElement(Modal_styles.FooterWrapper, null, footer))))), document.querySelector(querySelector) || document.body)
|
|
36
35
|
: null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -99,7 +99,7 @@ var Nav = function (_a) {
|
|
|
99
99
|
: searchIsOpen
|
|
100
100
|
? 'closed'
|
|
101
101
|
: 'open', initial: "open" }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
|
|
102
|
-
React__default["default"].createElement(Nav_styles.SearchContainer, { isOpen: searchIsOpen, ref: searchContainerRef },
|
|
102
|
+
React__default["default"].createElement(Nav_styles.SearchContainer, { "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
103
103
|
React__default["default"].createElement(SearchBar.SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, inputIcon: inputIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
|
|
104
104
|
onSearchClick && onSearchClick();
|
|
105
105
|
}, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen, onBlur: onSearchBlur, onKeyDown: function (e) {
|
|
@@ -13,18 +13,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
14
|
|
|
15
15
|
var SideModal = React.forwardRef(function (_a, ref) {
|
|
16
|
-
var _b, _c;
|
|
17
|
-
var
|
|
16
|
+
var _b, _c, _d;
|
|
17
|
+
var _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h;
|
|
18
18
|
var domSafe = typeof document !== 'undefined';
|
|
19
19
|
return domSafe
|
|
20
|
-
? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, {
|
|
20
|
+
? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
|
|
21
21
|
if (e.target === e.currentTarget) {
|
|
22
22
|
onBackdropClick();
|
|
23
23
|
}
|
|
24
|
-
}, overlayBackground: overlayBackground,
|
|
24
|
+
}, overlayBackground: overlayBackground, ref: ref, transition: {
|
|
25
25
|
type: 'just'
|
|
26
26
|
} },
|
|
27
|
-
React__default["default"].createElement(SideModal_styles.SideModalContainer, {
|
|
27
|
+
React__default["default"].createElement(SideModal_styles.SideModalContainer, { animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, children)))), document.querySelector(querySelector) || document.body)
|
|
28
28
|
: null;
|
|
29
29
|
});
|
|
30
30
|
SideModal.displayName = 'SideModal';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
1
|
+
import React, { forwardRef, Fragment } from 'react';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
3
|
import { H2, BodyText } from '@citygross/typography';
|
|
4
4
|
import { ModalOverlay, ModalContainer, ModalHeaderContainer, ModalHeader, CloseButtonWrapper, ChildrenWrapper, FooterWrapper } from './Modal.styles.js';
|
|
@@ -8,21 +8,20 @@ import { Spacer } from '../Spacer/Spacer.js';
|
|
|
8
8
|
|
|
9
9
|
var Modal = forwardRef(function (_a, ref) {
|
|
10
10
|
var _b;
|
|
11
|
-
var
|
|
11
|
+
var _c = _a.background, background = _c === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _c, children = _a.children, footer = _a.footer, _d = _a.hideCancel, hideCancel = _d === void 0 ? true : _d, onBackdropClick = _a.onBackdropClick, isConfirm = _a.isConfirm, maxWidth = _a.maxWidth, _e = _a.querySelector, querySelector = _e === void 0 ? '#root' : _e, subTitle = _a.subTitle, title = _a.title;
|
|
12
12
|
var domSafe = typeof document !== 'undefined';
|
|
13
13
|
return domSafe
|
|
14
14
|
? createPortal(React.createElement(ModalOverlay, { onClick: onBackdropClick, ref: ref },
|
|
15
|
-
React.createElement(ModalContainer, { isConfirm: isConfirm || false, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); },
|
|
16
|
-
title && (React.createElement(
|
|
15
|
+
React.createElement(ModalContainer, { "aria-modal": "true", background: background, isConfirm: isConfirm || false, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog" },
|
|
16
|
+
title && (React.createElement(Fragment, null,
|
|
17
17
|
React.createElement(ModalHeaderContainer, null,
|
|
18
18
|
React.createElement(ModalHeader, null,
|
|
19
19
|
React.createElement(H2, null, title),
|
|
20
20
|
!hideCancel && (React.createElement(CloseButtonWrapper, { onClick: onBackdropClick },
|
|
21
21
|
React.createElement(Icons.Cross, null)))),
|
|
22
22
|
React.createElement(BodyText, null, subTitle)))),
|
|
23
|
-
children && (React.createElement(
|
|
24
|
-
|
|
25
|
-
footer && (React.createElement(React.Fragment, null,
|
|
23
|
+
children && (React.createElement(ChildrenWrapper, null, children)),
|
|
24
|
+
footer && (React.createElement(Fragment, null,
|
|
26
25
|
React.createElement(Spacer, null),
|
|
27
26
|
React.createElement(FooterWrapper, null, footer))))), document.querySelector(querySelector) || document.body)
|
|
28
27
|
: null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -91,7 +91,7 @@ var Nav = function (_a) {
|
|
|
91
91
|
: searchIsOpen
|
|
92
92
|
? 'closed'
|
|
93
93
|
: 'open', initial: "open" }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
|
|
94
|
-
React.createElement(SearchContainer, { isOpen: searchIsOpen, ref: searchContainerRef },
|
|
94
|
+
React.createElement(SearchContainer, { "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
|
|
95
95
|
React.createElement(SearchBar, { mobileTopPosition: mobileTopPosition, icon: searchIcon, inputIcon: inputIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
|
|
96
96
|
onSearchClick && onSearchClick();
|
|
97
97
|
}, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen, onBlur: onSearchBlur, onKeyDown: function (e) {
|
|
@@ -5,18 +5,18 @@ import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
|
|
|
5
5
|
import { theme } from '@citygross/design-tokens';
|
|
6
6
|
|
|
7
7
|
var SideModal = forwardRef(function (_a, ref) {
|
|
8
|
-
var _b, _c;
|
|
9
|
-
var
|
|
8
|
+
var _b, _c, _d;
|
|
9
|
+
var _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _e, children = _a.children, isVisible = _a.isVisible, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, onBackdropClick = _a.onBackdropClick, _f = _a.overlayBackground, overlayBackground = _f === void 0 ? (_d = (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkOverlay) !== null && _d !== void 0 ? _d : '' : _f, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, slideFrom = _a.slideFrom, _h = _a.width, width = _h === void 0 ? 375 : _h;
|
|
10
10
|
var domSafe = typeof document !== 'undefined';
|
|
11
11
|
return domSafe
|
|
12
|
-
? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, {
|
|
12
|
+
? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { animate: { opacity: 1 }, exit: { opacity: 0 }, initial: { opacity: 0 }, maxHeight: maxHeight, onMouseDown: function (e) {
|
|
13
13
|
if (e.target === e.currentTarget) {
|
|
14
14
|
onBackdropClick();
|
|
15
15
|
}
|
|
16
|
-
}, overlayBackground: overlayBackground,
|
|
16
|
+
}, overlayBackground: overlayBackground, ref: ref, transition: {
|
|
17
17
|
type: 'just'
|
|
18
18
|
} },
|
|
19
|
-
React.createElement(SideModalContainer, {
|
|
19
|
+
React.createElement(SideModalContainer, { animate: { x: 0 }, "aria-modal": "true", background: background, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, maxHeight: maxHeight, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, role: "dialog", slideFrom: slideFrom, transition: { type: 'just' }, width: width }, children)))), document.querySelector(querySelector) || document.body)
|
|
20
20
|
: null;
|
|
21
21
|
});
|
|
22
22
|
SideModal.displayName = 'SideModal';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citygross/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.91",
|
|
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": "
|
|
79
|
+
"gitHead": "9bd454a9b1913279cfb02ef5552b39cfcd16f4aa"
|
|
80
80
|
}
|