@itcase/ui 1.0.9 → 1.0.11

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.
@@ -0,0 +1,218 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var clsx = require('clsx');
5
+ var reactDateRange = require('react-date-range');
6
+ var luxon = require('luxon');
7
+ var index$1 = require('../index-738f53f6.js');
8
+ var index$2 = require('./Button.js');
9
+ var Modal = require('../Modal-375ef8c3.js');
10
+ require('./Loader.js');
11
+ var index = require('./Input.js');
12
+ require('../typeof-6dd323c6.js');
13
+ require('prop-types');
14
+ require('../constants/componentProps/borderType.js');
15
+ require('../constants/componentProps/fill.js');
16
+ require('../constants/componentProps/horizontalResizeMode.js');
17
+ require('../constants/componentProps/shape.js');
18
+ require('../constants/componentProps/size.js');
19
+ require('../constants/componentProps/type.js');
20
+ require('../constants/componentProps/width.js');
21
+ require('./Icon.js');
22
+ require('react-inlinesvg');
23
+ require('../constants/componentProps/iconSize.js');
24
+ require('../constants/componentProps/strokeColor.js');
25
+ require('./Link.js');
26
+ require('../useStyles-e4accb53.js');
27
+ require('lodash/camelCase');
28
+ require('lodash/maxBy');
29
+ require('lodash/upperFirst');
30
+ require('../hooks/styleAttributes.js');
31
+ require('../context/UIContext.js');
32
+ require('../hooks/useMediaQueries.js');
33
+ require('react-responsive');
34
+ require('../constants/componentProps/textColor.js');
35
+ require('../constants/componentProps/textGradient.js');
36
+ require('../constants/componentProps/textStyle.js');
37
+ require('../constants/componentProps/textWeight.js');
38
+ require('../constants/componentProps/underline.js');
39
+ require('../hooks/useDeviceTargetClass.js');
40
+ require('lodash/castArray');
41
+ require('./Text.js');
42
+ require('../constants/componentProps/textColorActive.js');
43
+ require('../constants/componentProps/textColorHover.js');
44
+ require('react-dom');
45
+ require('./Fader.js');
46
+ require('../constants/componentProps/fillGradient.js');
47
+
48
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
49
+
50
+ var React__default = /*#__PURE__*/_interopDefault(React);
51
+ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
52
+
53
+ var DateRangePickerInput = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
54
+ var onChange = props.onChange,
55
+ onFocus = props.onFocus,
56
+ toFormat = props.toFormat,
57
+ value = props.value,
58
+ _props$initialDate = props.initialDate,
59
+ initialDate = _props$initialDate === void 0 ? new Date() : _props$initialDate,
60
+ modalIsOpen = props.modalIsOpen,
61
+ modalIsFader = props.modalIsFader,
62
+ modalIsOutsideClose = props.modalIsOutsideClose,
63
+ modalShape = props.modalShape,
64
+ modalElevation = props.modalElevation,
65
+ modalPadding = props.modalPadding,
66
+ dateRangeProps = props.dateRangeProps,
67
+ primaryButtonShape = props.primaryButtonShape,
68
+ secondaryButtonShape = props.secondaryButtonShape,
69
+ primaryButtonFill = props.primaryButtonFill,
70
+ primaryButtonFillHover = props.primaryButtonFillHover,
71
+ primaryButtonSize = props.primaryButtonSize,
72
+ primaryButtonLabelTextColor = props.primaryButtonLabelTextColor,
73
+ primaryButtonLabelSize = props.primaryButtonLabelSize,
74
+ primaryButtonLabelTextWeight = props.primaryButtonLabelTextWeight,
75
+ primaryButtonLabel = props.primaryButtonLabel,
76
+ secondaryButtonFill = props.secondaryButtonFill,
77
+ secondaryButtonFillHover = props.secondaryButtonFillHover,
78
+ secondaryButtonSize = props.secondaryButtonSize,
79
+ secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor,
80
+ secondaryButtonLabelSize = props.secondaryButtonLabelSize,
81
+ secondaryButtonLabelTextWeight = props.secondaryButtonLabelTextWeight,
82
+ secondaryButtonLabel = props.secondaryButtonLabel,
83
+ placeholder = props.placeholder,
84
+ inputProps = props.inputProps;
85
+ var rangeRef = React.useRef(null);
86
+ var modalRef = React.useRef(null);
87
+ var onClickSave = React.useCallback(function () {
88
+ var _rangeRef$current;
89
+ var value = (_rangeRef$current = rangeRef.current) == null ? void 0 : _rangeRef$current.value;
90
+ if (onChange) {
91
+ onChange(value);
92
+ }
93
+ modalRef.current.closeModal();
94
+ }, [onChange]);
95
+ var onClickCancel = React.useCallback(function () {
96
+ modalRef.current.closeModal();
97
+ }, []);
98
+
99
+ // Create JS Date object for Calendar component
100
+ var _useState = React.useState(function () {
101
+ var startDate = initialDate.startDate,
102
+ endDate = initialDate.endDate;
103
+ if (typeof initialDate === 'string' && initialDate.includes('-')) {
104
+ var _initialDate$split = initialDate.split(' - ');
105
+ startDate = _initialDate$split[0];
106
+ endDate = _initialDate$split[1];
107
+ }
108
+ var state = {
109
+ startDate: null,
110
+ endDate: null,
111
+ key: 'date'
112
+ };
113
+ if (!startDate && !endDate) {
114
+ return state;
115
+ }
116
+ if (typeof startDate === 'string' && typeof endDate === 'string') {
117
+ state.startDate = luxon.DateTime.fromISO(startDate).toJSDate();
118
+ state.endDate = luxon.DateTime.fromISO(endDate).toJSDate();
119
+ }
120
+ if (startDate instanceof Date && endDate instanceof Date) {
121
+ state.startDate = startDate;
122
+ state.endDate = endDate;
123
+ }
124
+ return state;
125
+ }),
126
+ dateRanges = _useState[0],
127
+ setDateRanges = _useState[1];
128
+ React.useImperativeHandle(ref, function () {
129
+ var startDate = luxon.DateTime.fromJSDate(dateRanges.startDate).toISODate();
130
+ var endDate = luxon.DateTime.fromJSDate(dateRanges.endDate).toISODate();
131
+ return {
132
+ value: startDate + " - " + endDate
133
+ };
134
+ });
135
+ var onChangeDate = React.useCallback(function (range) {
136
+ setDateRanges(function (prevState) {
137
+ var _range$date, _range$date2;
138
+ return Object.assign({}, prevState, {
139
+ startDate: (_range$date = range.date) == null ? void 0 : _range$date.startDate,
140
+ endDate: (_range$date2 = range.date) == null ? void 0 : _range$date2.endDate
141
+ });
142
+ });
143
+ }, []);
144
+ var onFocusInput = React.useCallback(function () {
145
+ onFocus && onFocus();
146
+ modalRef.current.openModal();
147
+ }, [onFocus]);
148
+ return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(index.Input, Object.assign({
149
+ readonly: "true",
150
+ type: "text",
151
+ onFocus: onFocusInput,
152
+ value: value
153
+ // onBlur={input.onBlur}
154
+ ,
155
+ onChange: function onChange() {
156
+ /* set empty function for disable react warning */
157
+ },
158
+ placeholder: placeholder
159
+ }, inputProps)), /*#__PURE__*/React__default.default.createElement(Modal.Modal, {
160
+ ref: modalRef,
161
+ isOpen: modalIsOpen,
162
+ isFader: modalIsFader,
163
+ isOutsideClose: modalIsOutsideClose,
164
+ shape: modalShape,
165
+ elevation: modalElevation,
166
+ padding: modalPadding
167
+ }, /*#__PURE__*/React__default.default.createElement(reactDateRange.DateRange, Object.assign({
168
+ locale: index$1.ru,
169
+ className: clsx__default.default('date-range-picker'),
170
+ ranges: [dateRanges],
171
+ toFormat: toFormat,
172
+ weekdayDisplayFormat: "EEEEEE",
173
+ dayDisplayFormat: "d",
174
+ showDateDisplay: false,
175
+ onChange: onChangeDate
176
+ }, dateRangeProps)), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
177
+ width: "fill",
178
+ fill: primaryButtonFill,
179
+ fillHover: primaryButtonFillHover,
180
+ size: primaryButtonSize,
181
+ labelTextColor: primaryButtonLabelTextColor,
182
+ labelSize: primaryButtonLabelSize,
183
+ labelTextWeight: primaryButtonLabelTextWeight,
184
+ label: primaryButtonLabel,
185
+ shape: primaryButtonShape,
186
+ onClick: onClickSave
187
+ }), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
188
+ width: "fill",
189
+ fill: secondaryButtonFill,
190
+ fillHover: secondaryButtonFillHover,
191
+ size: secondaryButtonSize,
192
+ labelTextColor: secondaryButtonLabelTextColor,
193
+ labelSize: secondaryButtonLabelSize,
194
+ shape: secondaryButtonShape,
195
+ labelTextWeight: secondaryButtonLabelTextWeight,
196
+ label: secondaryButtonLabel,
197
+ onClick: onClickCancel
198
+ })));
199
+ });
200
+ DateRangePickerInput.displayName = 'DateRangePickerInput';
201
+ DateRangePickerInput.defaultProps = {
202
+ primaryButtonFill: 'accentPrimary',
203
+ primaryButtonFillHover: 'accentPrimaryHover',
204
+ primaryButtonSize: 'xl',
205
+ primaryButtonShape: 'rounded',
206
+ primaryButtonLabelTextColor: 'accentTextPrimary',
207
+ primaryButtonLabelSize: 'l',
208
+ primaryButtonLabel: 'OK',
209
+ secondaryButtonFill: 'surfaceSecondary',
210
+ secondaryButtonFillHover: 'surfaceSecondaryHover',
211
+ secondaryButtonSize: 'xl',
212
+ secondaryButtonShape: 'rounded',
213
+ secondaryButtonLabelTextColor: 'surfaceTextPrimary',
214
+ secondaryButtonLabelSize: 'l',
215
+ secondaryButtonLabel: 'Отмена'
216
+ };
217
+
218
+ exports.DateRangePickerInput = DateRangePickerInput;
@@ -0,0 +1,67 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var PropTypes = require('prop-types');
5
+ var clsx = require('clsx');
6
+ var borderType = require('../constants/componentProps/borderType.js');
7
+ var fill = require('../constants/componentProps/fill.js');
8
+ var shape = require('../constants/componentProps/shape.js');
9
+ var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
10
+ require('lodash/castArray');
11
+ require('lodash/camelCase');
12
+ require('../context/UIContext.js');
13
+ require('../hooks/useMediaQueries.js');
14
+ require('react-responsive');
15
+
16
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
17
+
18
+ var React__default = /*#__PURE__*/_interopDefault(React);
19
+ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
20
+ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
21
+
22
+ function Dot(props) {
23
+ var className = props.className,
24
+ children = props.children;
25
+ var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
26
+ prefix: 'border-color_',
27
+ propsKey: 'border'
28
+ });
29
+ var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
30
+ prefix: 'border_',
31
+ propsKey: 'borderType'
32
+ });
33
+ var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
34
+ prefix: 'fill_',
35
+ propsKey: 'fill'
36
+ });
37
+ var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
38
+ prefix: 'dot_shape_',
39
+ propsKey: 'shape'
40
+ });
41
+ return /*#__PURE__*/React__default.default.createElement("div", {
42
+ className: clsx__default.default(className, 'dot', borderClass, borderTypeClass, fillClass, shapeClass)
43
+ }, children);
44
+ }
45
+ Dot.propTypes = {
46
+ children: PropTypes__default.default.any,
47
+ className: PropTypes__default.default.string,
48
+ border: PropTypes__default.default.string,
49
+ borderDesktop: PropTypes__default.default.string,
50
+ borderMobile: PropTypes__default.default.string,
51
+ borderTablet: PropTypes__default.default.string,
52
+ borderType: PropTypes__default.default.oneOf(borderType.default),
53
+ borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
54
+ borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
55
+ borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
56
+ fill: PropTypes__default.default.oneOf(fill.default),
57
+ fillMobile: PropTypes__default.default.oneOf(fill.default),
58
+ fillTablet: PropTypes__default.default.oneOf(fill.default),
59
+ fillDesktop: PropTypes__default.default.oneOf(fill.default),
60
+ shape: PropTypes__default.default.oneOf(shape.default),
61
+ shapeDesktop: PropTypes__default.default.oneOf(shape.default),
62
+ shapeMobile: PropTypes__default.default.oneOf(shape.default),
63
+ shapeTablet: PropTypes__default.default.oneOf(shape.default)
64
+ };
65
+ Dot.defaultProps = {};
66
+
67
+ exports.Dot = Dot;
@@ -37,7 +37,8 @@ require('../constants/componentProps/textGradient.js');
37
37
  require('../constants/componentProps/type.js');
38
38
  require('../constants/componentProps/underline.js');
39
39
  require('react-select');
40
- require('../objectWithoutProperties-ea190611.js');
40
+ require('../defineProperty-72768a50.js');
41
+ require('../typeof-6dd323c6.js');
41
42
  require('react-dom');
42
43
 
43
44
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -93,11 +93,15 @@ function Group(props) {
93
93
  prefix: 'flex-grow_',
94
94
  propsKey: 'flexGrow'
95
95
  });
96
+ var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
97
+ prefix: 'elevation_',
98
+ propsKey: 'elevation'
99
+ });
96
100
  var _useStyles = useStyles.useStyles(props),
97
101
  groupStyles = _useStyles.styles,
98
102
  groupWrapperStyles = _useStyles.wrapper;
99
103
  return /*#__PURE__*/React__default.default.createElement("div", {
100
- className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, justifyContentClass),
104
+ className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
101
105
  id: id,
102
106
  style: Object.assign({}, groupStyles, style)
103
107
  }, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
@@ -33,6 +33,7 @@ function Input(props) {
33
33
  value = props.value,
34
34
  onBlur = props.onBlur,
35
35
  onChange = props.onChange,
36
+ onFocus = props.onFocus,
36
37
  onKeyDown = props.onKeyDown;
37
38
  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
38
39
  prefix: 'fill_',
@@ -87,6 +88,7 @@ function Input(props) {
87
88
  value: value,
88
89
  onBlur: onBlur,
89
90
  onChange: onChange,
91
+ onFocus: onFocus,
90
92
  onKeyDown: onKeyDown
91
93
  });
92
94
  }
@@ -14,14 +14,14 @@ require('../constants/componentProps/textStyle.js');
14
14
  require('../constants/componentProps/textWeight.js');
15
15
  require('../constants/componentProps/type.js');
16
16
  require('../constants/componentProps/underline.js');
17
- require('lodash/castArray');
18
17
  require('lodash/camelCase');
19
- require('../context/UIContext.js');
20
- require('../hooks/useMediaQueries.js');
21
- require('react-responsive');
22
18
  require('lodash/maxBy');
23
19
  require('lodash/upperFirst');
24
20
  require('../hooks/styleAttributes.js');
21
+ require('../context/UIContext.js');
22
+ require('../hooks/useMediaQueries.js');
23
+ require('react-responsive');
24
+ require('lodash/castArray');
25
25
 
26
26
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
27
27
 
@@ -1,247 +1,43 @@
1
1
  'use strict';
2
2
 
3
+ var Modal = require('../Modal-375ef8c3.js');
3
4
  var React = require('react');
4
- var PropTypes = require('prop-types');
5
- var require$$2 = require('react-dom');
6
- var clsx = require('clsx');
7
- require('./Icon.js');
8
- require('./Text.js');
9
- var index = require('./Fader.js');
5
+ var index = require('./Loader.js');
6
+ require('prop-types');
7
+ require('react-dom');
8
+ require('clsx');
9
+ require('./Fader.js');
10
+ require('../constants/componentProps/fill.js');
11
+ require('../constants/componentProps/fillGradient.js');
12
+ require('../hooks/useDeviceTargetClass.js');
13
+ require('lodash/castArray');
10
14
  require('lodash/camelCase');
11
- require('lodash/maxBy');
12
- require('lodash/upperFirst');
13
15
  require('../context/UIContext.js');
14
- var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
15
- var index$1 = require('./Loader.js');
16
- require('react-inlinesvg');
17
- require('../constants/componentProps/fill.js');
18
- require('../constants/componentProps/iconSize.js');
19
- require('../constants/componentProps/shape.js');
20
- require('../constants/componentProps/strokeColor.js');
21
- require('./Link.js');
16
+ require('../hooks/useMediaQueries.js');
17
+ require('react-responsive');
22
18
  require('../useStyles-e4accb53.js');
19
+ require('lodash/maxBy');
20
+ require('lodash/upperFirst');
23
21
  require('../hooks/styleAttributes.js');
24
- require('../constants/componentProps/size.js');
22
+ require('./Text.js');
25
23
  require('../constants/componentProps/textColor.js');
26
- require('../constants/componentProps/textGradient.js');
27
- require('../constants/componentProps/textStyle.js');
28
- require('../constants/componentProps/textWeight.js');
29
- require('../constants/componentProps/type.js');
30
- require('../constants/componentProps/underline.js');
31
- require('../hooks/useMediaQueries.js');
32
- require('react-responsive');
33
- require('lodash/castArray');
34
24
  require('../constants/componentProps/textColorActive.js');
35
25
  require('../constants/componentProps/textColorHover.js');
36
- require('../constants/componentProps/fillGradient.js');
26
+ require('../constants/componentProps/size.js');
27
+ require('../constants/componentProps/textStyle.js');
28
+ require('../constants/componentProps/textWeight.js');
37
29
 
38
30
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
39
31
 
40
32
  var React__default = /*#__PURE__*/_interopDefault(React);
41
- var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
42
- var require$$2__default = /*#__PURE__*/_interopDefault(require$$2);
43
- var clsx__default = /*#__PURE__*/_interopDefault(clsx);
44
-
45
- var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelector, className) {
46
- if (className === void 0) {
47
- className = '';
48
- }
49
- // prettier-ignore
50
- var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
51
- var modalElement = document.querySelector(modalQuerySelector);
52
- if (!modalElement) {
53
- // Add modal element into the DOM on mount.
54
- modalElement = document.createElement('div');
55
- modalElement.setAttribute('id', 'modal-global');
56
- modalElement.classList.add('modal');
57
- if (classList.length) {
58
- var _modalElement$classLi;
59
- (_modalElement$classLi = modalElement.classList).add.apply(_modalElement$classLi, classList);
60
- }
61
- document.body.prepend(modalElement);
62
- }
63
- return modalElement;
64
- };
65
-
66
- // Modal component that is an abstraction around the portal API.
67
- var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
68
- var children = props.children,
69
- className = props.className,
70
- closeButton = props.closeButton,
71
- contentClassName = props.contentClassName,
72
- id = props.id,
73
- isFader = props.isFader,
74
- faderFill = props.faderFill,
75
- faderFillGradient = props.faderFillGradient,
76
- faderOpacity = props.faderOpacity,
77
- initialIsOpen = props.isOpen,
78
- isScrollOnOpen = props.isScrollOnOpen,
79
- isSetFocusOnOpen = props.isSetFocusOnOpen,
80
- modalQuerySelector = props.modalQuerySelector,
81
- isOutsideClose = props.isOutsideClose,
82
- onCloseModal = props.onCloseModal,
83
- onOpenModal = props.onOpenModal;
84
-
85
- // Query DOM element
86
- var _useState = React.useState(null),
87
- modalElement = _useState[0],
88
- setModalElement = _useState[1];
89
- React.useLayoutEffect(function () {
90
- var element = getOrCreateModalElement(modalQuerySelector, className);
91
- setModalElement(element);
92
- if (element) {
93
- addModalProps(element);
94
- }
95
- }, []);
96
- var modalContentRef = React.useRef(null);
97
- var modalFaderRef = React.useRef(null);
98
- var _useState2 = React.useState(initialIsOpen),
99
- isOpen = _useState2[0],
100
- setIsOpen = _useState2[1];
101
- var addModalProps = React.useCallback(function (element) {
102
- // Change class need in "useEffect"
103
- if (isOpen) {
104
- // Show modal
105
- element.classList.add('modal_state_visible');
106
- // Scroll to opened modal
107
- if (isScrollOnOpen) {
108
- // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
109
- element.scrollIntoView({
110
- block: 'center',
111
- behavior: 'smooth'
112
- });
113
- }
114
-
115
- // "setTimeout" in this implementation is needs for set focus on modal
116
- // after "onMouseDown" event on button
117
- if (isSetFocusOnOpen) {
118
- setTimeout(function () {
119
- return modalContentRef.current.focus();
120
- }, 0);
121
- }
122
- } else if (!element.children.length) {
123
- // Hide modal if has no children
124
- element.classList.remove('modal_state_visible');
125
- }
126
- }, [isOpen, isSetFocusOnOpen]);
127
- React.useEffect(function () {
128
- if (!modalElement) {
129
- return;
130
- }
131
- addModalProps(modalElement);
132
- }, [isOpen]); // eslint-disable-line
133
-
134
- // Show modal with children content
135
- var openModal = React.useCallback(function () {
136
- setIsOpen(true);
137
-
138
- // Callback
139
- if (typeof onOpenModal === 'function') {
140
- onOpenModal();
141
- }
142
-
143
- /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
144
- // If current modal is already opened
145
- // Move content to end of modal root container. For order in DOM.
146
- const modalContentElement = modalContentRef.current
147
- if (modalContentElement) {
148
- modalContentElement.parentNode.appendChild(modalContentElement)
149
- }
150
- // Also move fader to end of modal root container after container
151
- const modalFaderElement = modalFaderRef.current
152
- if (modalFaderElement) {
153
- modalFaderElement.parentNode.appendChild(modalFaderElement)
154
- }
155
- */
156
- }, [onOpenModal]);
157
-
158
- // Hide modal and unmount children content
159
- var closeModal = React.useCallback(function (event) {
160
- if (event === void 0) {
161
- event = {};
162
- }
163
- var hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
164
- if (hasRelatedTarget) {
165
- return event;
166
- }
167
- setIsOpen(false);
168
-
169
- // Callback
170
- if (typeof onCloseModal === 'function') {
171
- onCloseModal();
172
- }
173
- }, [modalElement, onCloseModal]);
174
-
175
- // Save ref things
176
- React.useImperativeHandle(ref, function () {
177
- return {
178
- isOpen: isOpen,
179
- openModal: openModal,
180
- closeModal: closeModal,
181
- modalElement: modalElement
182
- };
183
- });
184
- var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
185
- prefix: 'fill_',
186
- propsKey: 'contentFill'
187
- });
188
-
189
- // Use a portal to render the children into the element
190
- return modalElement && /*#__PURE__*/require$$2__default.default.createPortal(
191
- // Any valid React child: JSX, strings, arrays, etc.
192
- isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
193
- className: clsx__default.default('modal-content', contentClassName, contentFillClass),
194
- id: id,
195
- ref: modalContentRef,
196
- tabIndex: 0,
197
- onBlur: isOutsideClose ? undefined : closeModal
198
- }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
199
- className: "modal-content__close",
200
- onClick: closeModal
201
- }, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
202
- ref: modalFaderRef,
203
- fill: faderFill,
204
- fillGradient: faderFillGradient,
205
- opacity: faderOpacity,
206
- className: "modal__fader",
207
- isFader: isFader
208
- })) : null,
209
- // A DOM element
210
- modalElement);
211
- });
212
- Modal.propTypes = {
213
- children: PropTypes__default.default.any,
214
- className: PropTypes__default.default.string,
215
- closeIcon: PropTypes__default.default.string,
216
- closeText: PropTypes__default.default.string,
217
- faderFill: PropTypes__default.default.string,
218
- faderFillGradient: PropTypes__default.default.string,
219
- faderOpacity: PropTypes__default.default.string,
220
- contentClassName: PropTypes__default.default.string,
221
- id: PropTypes__default.default.string,
222
- isFader: PropTypes__default.default.bool,
223
- isScrollOnOpen: PropTypes__default.default.bool,
224
- isSetFocusOnOpen: PropTypes__default.default.bool,
225
- modalQuerySelector: PropTypes__default.default.string,
226
- isOutsideClose: PropTypes__default.default.bool,
227
- onCloseModal: PropTypes__default.default.func,
228
- onOpenModal: PropTypes__default.default.func
229
- };
230
- Modal.defaultProps = {
231
- isFader: true,
232
- isOpen: false,
233
- isScrollOnOpen: true,
234
- isSetFocusOnOpen: true,
235
- modalQuerySelector: '#modal-global'
236
- };
237
33
 
238
34
  function ModalLoader(props) {
239
35
  return /*#__PURE__*/React__default.default.createElement("div", {
240
36
  className: "modal-loading"
241
37
  }, /*#__PURE__*/React__default.default.createElement("div", {
242
38
  className: "modal-loading__inner"
243
- }, /*#__PURE__*/React__default.default.createElement(index$1.Loader, null)));
39
+ }, /*#__PURE__*/React__default.default.createElement(index.Loader, null)));
244
40
  }
245
41
 
246
- exports.Modal = Modal;
42
+ exports.Modal = Modal.Modal;
247
43
  exports.ModalLoader = ModalLoader;