@janiscommerce/ui-web 1.5.0-beta.3 → 1.5.0-beta.4
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/dist/index.esm.js +385 -247
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +385 -247
- package/dist/index.umd.js.map +1 -1
- package/dist/package.json +1 -1
- package/package.json +3 -3
package/dist/index.umd.js
CHANGED
|
@@ -207,6 +207,61 @@
|
|
|
207
207
|
}
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
+
function _construct(Parent, args, Class) {
|
|
211
|
+
if (_isNativeReflectConstruct()) {
|
|
212
|
+
_construct = Reflect.construct;
|
|
213
|
+
} else {
|
|
214
|
+
_construct = function _construct(Parent, args, Class) {
|
|
215
|
+
var a = [null];
|
|
216
|
+
a.push.apply(a, args);
|
|
217
|
+
var Constructor = Function.bind.apply(Parent, a);
|
|
218
|
+
var instance = new Constructor();
|
|
219
|
+
if (Class) _setPrototypeOf(instance, Class.prototype);
|
|
220
|
+
return instance;
|
|
221
|
+
};
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
return _construct.apply(null, arguments);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
function _isNativeFunction(fn) {
|
|
228
|
+
return Function.toString.call(fn).indexOf("[native code]") !== -1;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
function _wrapNativeSuper(Class) {
|
|
232
|
+
var _cache = typeof Map === "function" ? new Map() : undefined;
|
|
233
|
+
|
|
234
|
+
_wrapNativeSuper = function _wrapNativeSuper(Class) {
|
|
235
|
+
if (Class === null || !_isNativeFunction(Class)) return Class;
|
|
236
|
+
|
|
237
|
+
if (typeof Class !== "function") {
|
|
238
|
+
throw new TypeError("Super expression must either be null or a function");
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
if (typeof _cache !== "undefined") {
|
|
242
|
+
if (_cache.has(Class)) return _cache.get(Class);
|
|
243
|
+
|
|
244
|
+
_cache.set(Class, Wrapper);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
function Wrapper() {
|
|
248
|
+
return _construct(Class, arguments, _getPrototypeOf(this).constructor);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
Wrapper.prototype = Object.create(Class.prototype, {
|
|
252
|
+
constructor: {
|
|
253
|
+
value: Wrapper,
|
|
254
|
+
enumerable: false,
|
|
255
|
+
writable: true,
|
|
256
|
+
configurable: true
|
|
257
|
+
}
|
|
258
|
+
});
|
|
259
|
+
return _setPrototypeOf(Wrapper, Class);
|
|
260
|
+
};
|
|
261
|
+
|
|
262
|
+
return _wrapNativeSuper(Class);
|
|
263
|
+
}
|
|
264
|
+
|
|
210
265
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
211
266
|
if (source == null) return {};
|
|
212
267
|
var target = {};
|
|
@@ -7009,7 +7064,7 @@
|
|
|
7009
7064
|
});
|
|
7010
7065
|
}
|
|
7011
7066
|
|
|
7012
|
-
var _excluded$
|
|
7067
|
+
var _excluded$b = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
|
|
7013
7068
|
|
|
7014
7069
|
var Icon = function Icon(_ref) {
|
|
7015
7070
|
var color = _ref.color,
|
|
@@ -7020,7 +7075,7 @@
|
|
|
7020
7075
|
width = _ref.width,
|
|
7021
7076
|
height = _ref.height,
|
|
7022
7077
|
viewBox = _ref.viewBox,
|
|
7023
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7078
|
+
props = _objectWithoutProperties(_ref, _excluded$b);
|
|
7024
7079
|
|
|
7025
7080
|
if (!icons[name]) return null;
|
|
7026
7081
|
var _icons$name = icons[name],
|
|
@@ -7106,7 +7161,7 @@
|
|
|
7106
7161
|
})(["text-overflow:ellipsis;overflow:hidden;"])
|
|
7107
7162
|
};
|
|
7108
7163
|
|
|
7109
|
-
var _excluded$
|
|
7164
|
+
var _excluded$a = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "iconSize", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
|
|
7110
7165
|
|
|
7111
7166
|
var Chip = function Chip(_ref) {
|
|
7112
7167
|
var backgroundColor = _ref.backgroundColor,
|
|
@@ -7122,7 +7177,7 @@
|
|
|
7122
7177
|
textColor = _ref.textColor,
|
|
7123
7178
|
variant = _ref.variant,
|
|
7124
7179
|
hasLink = _ref.hasLink,
|
|
7125
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7180
|
+
props = _objectWithoutProperties(_ref, _excluded$a);
|
|
7126
7181
|
|
|
7127
7182
|
if (!children && !icon) return null;
|
|
7128
7183
|
return /*#__PURE__*/React__default["default"].createElement(styled$g.Chip, _extends$1({
|
|
@@ -7425,7 +7480,7 @@
|
|
|
7425
7480
|
})
|
|
7426
7481
|
};
|
|
7427
7482
|
|
|
7428
|
-
var _excluded$
|
|
7483
|
+
var _excluded$9 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
|
|
7429
7484
|
|
|
7430
7485
|
var Button = function Button(_ref) {
|
|
7431
7486
|
var children = _ref.children,
|
|
@@ -7439,7 +7494,7 @@
|
|
|
7439
7494
|
styles = _ref.styles,
|
|
7440
7495
|
variant = _ref.variant,
|
|
7441
7496
|
disabled = _ref.disabled,
|
|
7442
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7497
|
+
props = _objectWithoutProperties(_ref, _excluded$9);
|
|
7443
7498
|
|
|
7444
7499
|
return /*#__PURE__*/React__default["default"].createElement(styled$e.Button, _extends$1({
|
|
7445
7500
|
color: color,
|
|
@@ -7488,7 +7543,7 @@
|
|
|
7488
7543
|
})
|
|
7489
7544
|
};
|
|
7490
7545
|
|
|
7491
|
-
var _excluded$
|
|
7546
|
+
var _excluded$8 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
|
|
7492
7547
|
|
|
7493
7548
|
var Checkbox = function Checkbox(_ref) {
|
|
7494
7549
|
var autoComplete = _ref.autoComplete,
|
|
@@ -7498,7 +7553,7 @@
|
|
|
7498
7553
|
rounded = _ref.rounded,
|
|
7499
7554
|
styles = _ref.styles,
|
|
7500
7555
|
value = _ref.value,
|
|
7501
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7556
|
+
props = _objectWithoutProperties(_ref, _excluded$8);
|
|
7502
7557
|
|
|
7503
7558
|
var _useState = React.useState(!!value || defaultChecked),
|
|
7504
7559
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -7614,7 +7669,7 @@
|
|
|
7614
7669
|
iconCheckStyles: iconCheckStyles
|
|
7615
7670
|
};
|
|
7616
7671
|
|
|
7617
|
-
var _excluded$
|
|
7672
|
+
var _excluded$7 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
|
|
7618
7673
|
|
|
7619
7674
|
var Switch = function Switch(_ref) {
|
|
7620
7675
|
var autoComplete = _ref.autoComplete,
|
|
@@ -7624,7 +7679,7 @@
|
|
|
7624
7679
|
name = _ref.name,
|
|
7625
7680
|
onChange = _ref.onChange,
|
|
7626
7681
|
value = _ref.value,
|
|
7627
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
7682
|
+
props = _objectWithoutProperties(_ref, _excluded$7);
|
|
7628
7683
|
|
|
7629
7684
|
var _useState = React.useState(!!value || defaultChecked),
|
|
7630
7685
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -7796,7 +7851,7 @@
|
|
|
7796
7851
|
})(["position:absolute;flex-shrink:0;flex-grow:0;margin-right:8px;height:100%;"])
|
|
7797
7852
|
};
|
|
7798
7853
|
|
|
7799
|
-
var _excluded$
|
|
7854
|
+
var _excluded$6 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
|
|
7800
7855
|
|
|
7801
7856
|
var Input = /*#__PURE__*/function (_PureComponent) {
|
|
7802
7857
|
_inherits$2(Input, _PureComponent);
|
|
@@ -7892,7 +7947,7 @@
|
|
|
7892
7947
|
value = _this$props$value === void 0 ? stateValue : _this$props$value,
|
|
7893
7948
|
isTranslateActive = _this$props.isTranslateActive;
|
|
7894
7949
|
_this$props.defaultValue;
|
|
7895
|
-
var props = _objectWithoutProperties(_this$props, _excluded$
|
|
7950
|
+
var props = _objectWithoutProperties(_this$props, _excluded$6);
|
|
7896
7951
|
|
|
7897
7952
|
var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
|
|
7898
7953
|
var isFloating = isFocused || !!value.toString();
|
|
@@ -8005,7 +8060,7 @@
|
|
|
8005
8060
|
})(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], palette.statusRed)
|
|
8006
8061
|
};
|
|
8007
8062
|
|
|
8008
|
-
var _excluded$
|
|
8063
|
+
var _excluded$5 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
|
|
8009
8064
|
|
|
8010
8065
|
var Textarea = /*#__PURE__*/function (_PureComponent) {
|
|
8011
8066
|
_inherits$2(Textarea, _PureComponent);
|
|
@@ -8107,7 +8162,7 @@
|
|
|
8107
8162
|
_this$props$value = _this$props.value,
|
|
8108
8163
|
value = _this$props$value === void 0 ? stateValue : _this$props$value;
|
|
8109
8164
|
_this$props.defaultValue;
|
|
8110
|
-
var props = _objectWithoutProperties(_this$props, _excluded$
|
|
8165
|
+
var props = _objectWithoutProperties(_this$props, _excluded$5);
|
|
8111
8166
|
|
|
8112
8167
|
var isFloating = isFocused || !!value;
|
|
8113
8168
|
return /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
|
|
@@ -9604,14 +9659,14 @@
|
|
|
9604
9659
|
})(["margin-right:8px;"])
|
|
9605
9660
|
};
|
|
9606
9661
|
|
|
9607
|
-
var _excluded$
|
|
9662
|
+
var _excluded$4 = ["href", "children", "target", "icon"];
|
|
9608
9663
|
|
|
9609
9664
|
var Link = function Link(_ref) {
|
|
9610
9665
|
var href = _ref.href,
|
|
9611
9666
|
children = _ref.children,
|
|
9612
9667
|
target = _ref.target,
|
|
9613
9668
|
icon = _ref.icon,
|
|
9614
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
9669
|
+
props = _objectWithoutProperties(_ref, _excluded$4);
|
|
9615
9670
|
|
|
9616
9671
|
var renderIcon = function renderIcon() {
|
|
9617
9672
|
return icon ? /*#__PURE__*/React__default["default"].createElement(styled$5.StyledIcon, {
|
|
@@ -9735,7 +9790,7 @@
|
|
|
9735
9790
|
Overlay: Overlay
|
|
9736
9791
|
};
|
|
9737
9792
|
|
|
9738
|
-
var _excluded$
|
|
9793
|
+
var _excluded$3 = ["open", "position", "handleClose", "transitionDuration", "fullScreen", "closeOnClickAway", "children"];
|
|
9739
9794
|
|
|
9740
9795
|
var Drawer = function Drawer(_ref) {
|
|
9741
9796
|
var open = _ref.open,
|
|
@@ -9745,7 +9800,7 @@
|
|
|
9745
9800
|
fullScreen = _ref.fullScreen,
|
|
9746
9801
|
closeOnClickAway = _ref.closeOnClickAway,
|
|
9747
9802
|
children = _ref.children,
|
|
9748
|
-
props = _objectWithoutProperties(_ref, _excluded$
|
|
9803
|
+
props = _objectWithoutProperties(_ref, _excluded$3);
|
|
9749
9804
|
|
|
9750
9805
|
var drawerRef = React.useRef(null);
|
|
9751
9806
|
return /*#__PURE__*/React__default["default"].createElement(ClickAwayListener, {
|
|
@@ -15886,10 +15941,10 @@
|
|
|
15886
15941
|
return hasEqualLat && hasEqualLng;
|
|
15887
15942
|
};
|
|
15888
15943
|
var isValidAnimation = function isValidAnimation() {
|
|
15889
|
-
var _window$google
|
|
15944
|
+
var _window$google;
|
|
15890
15945
|
|
|
15891
15946
|
var animation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
15892
|
-
var validAnimations = (_window$google = window.google) === null || _window$google === void 0
|
|
15947
|
+
var validAnimations = (_window$google = window.google) === null || _window$google === void 0 || (_window$google = _window$google.maps) === null || _window$google === void 0 ? void 0 : _window$google.Animation;
|
|
15893
15948
|
if (!animation || !isObject$2(animation)) return false;
|
|
15894
15949
|
return (animation === null || animation === void 0 ? void 0 : animation.name) && validAnimations && validAnimations[animation === null || animation === void 0 ? void 0 : animation.name] !== undefined;
|
|
15895
15950
|
};
|
|
@@ -16120,7 +16175,7 @@
|
|
|
16120
16175
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, markers.map(function (marker, idx) {
|
|
16121
16176
|
var _marker$position, _marker$position2;
|
|
16122
16177
|
|
|
16123
|
-
var uniqueId = "".concat(marker === null || marker === void 0
|
|
16178
|
+
var uniqueId = "".concat(marker === null || marker === void 0 || (_marker$position = marker.position) === null || _marker$position === void 0 ? void 0 : _marker$position.lat, "-").concat(marker === null || marker === void 0 || (_marker$position2 = marker.position) === null || _marker$position2 === void 0 ? void 0 : _marker$position2.lng, "/").concat(idx.toString());
|
|
16124
16179
|
return /*#__PURE__*/React__default["default"].createElement(Marker$1, {
|
|
16125
16180
|
markerData: _objectSpread2(_objectSpread2({}, marker), {}, {
|
|
16126
16181
|
infoWindowOpen: (marker === null || marker === void 0 ? void 0 : marker.showInfoWindow) || activeMarkerId === uniqueId
|
|
@@ -35373,7 +35428,7 @@
|
|
|
35373
35428
|
})(["z-index:0;position:relative;right:0px;top:0px;background:", ";margin:10px;padding:4px 8px 6px;border-radius:2px;width:auto;box-shadow:rgba(0,0,0,0.3) 0px 1px 4px -1px;"], palette.white)
|
|
35374
35429
|
};
|
|
35375
35430
|
|
|
35376
|
-
var _excluded$
|
|
35431
|
+
var _excluded$2 = ["formattedAddress"];
|
|
35377
35432
|
|
|
35378
35433
|
var SearchBox = function SearchBox(_ref) {
|
|
35379
35434
|
var updateMarker = _ref.updateMarker;
|
|
@@ -35394,7 +35449,7 @@
|
|
|
35394
35449
|
|
|
35395
35450
|
case 4:
|
|
35396
35451
|
addressData = _context.sent;
|
|
35397
|
-
formattedAddress = addressData.formattedAddress, addressComponents = _objectWithoutProperties(addressData, _excluded$
|
|
35452
|
+
formattedAddress = addressData.formattedAddress, addressComponents = _objectWithoutProperties(addressData, _excluded$2);
|
|
35398
35453
|
if (updateMarker) updateMarker({
|
|
35399
35454
|
lat: newLat(),
|
|
35400
35455
|
lng: newLng(),
|
|
@@ -35428,7 +35483,7 @@
|
|
|
35428
35483
|
})));
|
|
35429
35484
|
};
|
|
35430
35485
|
|
|
35431
|
-
var _excluded = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "markerOptions", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
|
|
35486
|
+
var _excluded$1 = ["googleMapsApiKey", "width", "height", "center", "zoom", "markers", "markerOptions", "options", "callbackOnSuccessDirections", "callbackOnErrorDirections"];
|
|
35432
35487
|
var Map$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
35433
35488
|
var _mapRef$current;
|
|
35434
35489
|
|
|
@@ -35451,7 +35506,7 @@
|
|
|
35451
35506
|
callbackOnSuccessDirections = _ref$callbackOnSucces === void 0 ? function () {} : _ref$callbackOnSucces,
|
|
35452
35507
|
_ref$callbackOnErrorD = _ref.callbackOnErrorDirections,
|
|
35453
35508
|
callbackOnErrorDirections = _ref$callbackOnErrorD === void 0 ? function () {} : _ref$callbackOnErrorD,
|
|
35454
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
35509
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
35455
35510
|
|
|
35456
35511
|
var _useJsApiLoader = useJsApiLoader({
|
|
35457
35512
|
googleMapsApiKey: googleMapsApiKey,
|
|
@@ -35706,131 +35761,185 @@
|
|
|
35706
35761
|
}));
|
|
35707
35762
|
};
|
|
35708
35763
|
|
|
35764
|
+
var isProduction = "production" === 'production';
|
|
35709
35765
|
function warning(condition, message) {
|
|
35766
|
+
if (!isProduction) {
|
|
35767
|
+
if (condition) {
|
|
35768
|
+
return;
|
|
35769
|
+
}
|
|
35770
|
+
|
|
35771
|
+
var text = "Warning: " + message;
|
|
35772
|
+
|
|
35773
|
+
if (typeof console !== 'undefined') {
|
|
35774
|
+
console.warn(text);
|
|
35775
|
+
}
|
|
35776
|
+
|
|
35777
|
+
try {
|
|
35778
|
+
throw Error(text);
|
|
35779
|
+
} catch (x) {}
|
|
35780
|
+
}
|
|
35710
35781
|
}
|
|
35711
35782
|
|
|
35712
|
-
|
|
35713
|
-
|
|
35714
|
-
|
|
35715
|
-
|
|
35716
|
-
|
|
35717
|
-
|
|
35718
|
-
|
|
35719
|
-
|
|
35720
|
-
|
|
35721
|
-
|
|
35722
|
-
|
|
35723
|
-
|
|
35724
|
-
super(`react-collapsed: ${message}`);
|
|
35783
|
+
var _excluded = ["duration", "easing", "onTransitionStateChange", "isExpanded", "defaultExpanded", "hasDisabledAnimation", "id"],
|
|
35784
|
+
_excluded2 = ["disabled", "onClick", "refKey"];
|
|
35785
|
+
|
|
35786
|
+
var CollapseError = /*#__PURE__*/function (_Error) {
|
|
35787
|
+
_inherits$2(CollapseError, _Error);
|
|
35788
|
+
|
|
35789
|
+
var _super = _createSuper(CollapseError);
|
|
35790
|
+
|
|
35791
|
+
function CollapseError(message) {
|
|
35792
|
+
_classCallCheck$2(this, CollapseError);
|
|
35793
|
+
|
|
35794
|
+
return _super.call(this, "react-collapsed: ".concat(message));
|
|
35725
35795
|
}
|
|
35726
|
-
|
|
35727
|
-
|
|
35728
|
-
|
|
35729
|
-
|
|
35796
|
+
|
|
35797
|
+
return _createClass$2(CollapseError);
|
|
35798
|
+
}( /*#__PURE__*/_wrapNativeSuper(Error));
|
|
35799
|
+
|
|
35800
|
+
var collapseWarning = function collapseWarning() {
|
|
35801
|
+
return warning(arguments.length <= 0 ? undefined : arguments[0], "[react-collapsed] -- ".concat(arguments.length <= 1 ? undefined : arguments[1]));
|
|
35802
|
+
}; // src/utils/useEvent.ts
|
|
35803
|
+
|
|
35730
35804
|
function useEvent(callback) {
|
|
35731
|
-
|
|
35732
|
-
React.useEffect(()
|
|
35805
|
+
var ref = React.useRef(callback);
|
|
35806
|
+
React.useEffect(function () {
|
|
35733
35807
|
ref.current = callback;
|
|
35734
35808
|
});
|
|
35735
|
-
return React.useCallback(
|
|
35736
|
-
|
|
35809
|
+
return React.useCallback(function () {
|
|
35810
|
+
var _ref$current;
|
|
35811
|
+
|
|
35812
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
35813
|
+
args[_key] = arguments[_key];
|
|
35814
|
+
}
|
|
35815
|
+
|
|
35816
|
+
return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.call.apply(_ref$current, [ref].concat(args));
|
|
35817
|
+
}, []);
|
|
35818
|
+
} // src/utils/useControlledState.ts
|
|
35819
|
+
|
|
35737
35820
|
function useControlledState(value, defaultValue, callback) {
|
|
35738
|
-
|
|
35739
|
-
|
|
35740
|
-
|
|
35741
|
-
|
|
35742
|
-
|
|
35743
|
-
|
|
35744
|
-
|
|
35745
|
-
|
|
35746
|
-
|
|
35747
|
-
|
|
35748
|
-
|
|
35749
|
-
|
|
35750
|
-
|
|
35751
|
-
|
|
35752
|
-
|
|
35753
|
-
|
|
35754
|
-
|
|
35755
|
-
|
|
35756
|
-
|
|
35757
|
-
);
|
|
35758
|
-
collapseWarning(
|
|
35759
|
-
!(!initiallyControlled.current && value != null),
|
|
35760
|
-
"`isExpanded` state is changing from uncontrolled to controlled. useCollapse should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled collapse for the lifetime of the component. Check the `isExpanded` prop."
|
|
35761
|
-
);
|
|
35821
|
+
var _useState = React.useState(defaultValue),
|
|
35822
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
35823
|
+
state = _useState2[0],
|
|
35824
|
+
setState = _useState2[1];
|
|
35825
|
+
|
|
35826
|
+
var initiallyControlled = React.useRef(typeof value !== "undefined");
|
|
35827
|
+
var effectiveValue = initiallyControlled.current ? value : state;
|
|
35828
|
+
var cb = useEvent(callback);
|
|
35829
|
+
var onChange = React.useCallback(function (update) {
|
|
35830
|
+
var setter = update;
|
|
35831
|
+
var newValue = typeof update === "function" ? setter(effectiveValue) : update;
|
|
35832
|
+
|
|
35833
|
+
if (!initiallyControlled.current) {
|
|
35834
|
+
setState(newValue);
|
|
35835
|
+
}
|
|
35836
|
+
|
|
35837
|
+
cb === null || cb === void 0 || cb(newValue);
|
|
35838
|
+
}, [cb, effectiveValue]);
|
|
35839
|
+
React.useEffect(function () {
|
|
35840
|
+
collapseWarning(!(initiallyControlled.current && value == null), "`isExpanded` state is changing from controlled to uncontrolled. useCollapse should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled collapse for the lifetime of the component. Check the `isExpanded` prop.");
|
|
35841
|
+
collapseWarning(!(!initiallyControlled.current && value != null), "`isExpanded` state is changing from uncontrolled to controlled. useCollapse should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled collapse for the lifetime of the component. Check the `isExpanded` prop.");
|
|
35762
35842
|
}, [value]);
|
|
35763
35843
|
return [effectiveValue, onChange];
|
|
35764
|
-
}
|
|
35844
|
+
} // src/utils/usePrefersReducedMotion.ts
|
|
35765
35845
|
var QUERY = "(prefers-reduced-motion: reduce)";
|
|
35846
|
+
|
|
35766
35847
|
function usePrefersReducedMotion() {
|
|
35767
|
-
|
|
35768
|
-
|
|
35848
|
+
var _useState3 = React.useState(false),
|
|
35849
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
35850
|
+
prefersReducedMotion = _useState4[0],
|
|
35851
|
+
setPrefersReducedMotion = _useState4[1];
|
|
35852
|
+
|
|
35853
|
+
React.useEffect(function () {
|
|
35769
35854
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
|
35770
35855
|
return;
|
|
35771
35856
|
}
|
|
35772
|
-
|
|
35857
|
+
|
|
35858
|
+
var mediaQueryList = window.matchMedia(QUERY);
|
|
35773
35859
|
setPrefersReducedMotion(mediaQueryList.matches);
|
|
35774
|
-
|
|
35860
|
+
|
|
35861
|
+
var listener = function listener(event) {
|
|
35775
35862
|
setPrefersReducedMotion(event.matches);
|
|
35776
35863
|
};
|
|
35864
|
+
|
|
35777
35865
|
if (mediaQueryList.addEventListener) {
|
|
35778
35866
|
mediaQueryList.addEventListener("change", listener);
|
|
35779
|
-
return ()
|
|
35867
|
+
return function () {
|
|
35780
35868
|
mediaQueryList.removeEventListener("change", listener);
|
|
35781
35869
|
};
|
|
35782
35870
|
} else if (mediaQueryList.addListener) {
|
|
35783
35871
|
mediaQueryList.addListener(listener);
|
|
35784
|
-
return ()
|
|
35872
|
+
return function () {
|
|
35785
35873
|
mediaQueryList.removeListener(listener);
|
|
35786
35874
|
};
|
|
35787
35875
|
}
|
|
35876
|
+
|
|
35788
35877
|
return void 0;
|
|
35789
35878
|
}, []);
|
|
35790
35879
|
return prefersReducedMotion;
|
|
35791
|
-
}
|
|
35792
|
-
|
|
35880
|
+
} // src/utils/useId.ts
|
|
35881
|
+
|
|
35882
|
+
var __useId = React__namespace["useId".toString()] || function () {
|
|
35883
|
+
return void 0;
|
|
35884
|
+
};
|
|
35885
|
+
|
|
35793
35886
|
function useReactId() {
|
|
35794
|
-
|
|
35795
|
-
|
|
35887
|
+
var id2 = __useId();
|
|
35888
|
+
|
|
35889
|
+
return id2 !== null && id2 !== void 0 ? id2 : "";
|
|
35796
35890
|
}
|
|
35891
|
+
|
|
35797
35892
|
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
|
|
35798
35893
|
var serverHandoffComplete = false;
|
|
35799
35894
|
var id = 0;
|
|
35800
|
-
|
|
35895
|
+
|
|
35896
|
+
var genId = function genId() {
|
|
35897
|
+
return ++id;
|
|
35898
|
+
};
|
|
35899
|
+
|
|
35801
35900
|
function useUniqueId(idFromProps) {
|
|
35802
|
-
|
|
35803
|
-
|
|
35804
|
-
|
|
35901
|
+
var initialId = idFromProps || (serverHandoffComplete ? genId() : null);
|
|
35902
|
+
|
|
35903
|
+
var _React$useState = React__namespace.useState(initialId),
|
|
35904
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
35905
|
+
id2 = _React$useState2[0],
|
|
35906
|
+
setId = _React$useState2[1];
|
|
35907
|
+
|
|
35908
|
+
useIsomorphicLayoutEffect(function () {
|
|
35805
35909
|
if (id2 === null) {
|
|
35806
35910
|
setId(genId());
|
|
35807
35911
|
}
|
|
35808
35912
|
}, []);
|
|
35809
|
-
React__namespace.useEffect(()
|
|
35913
|
+
React__namespace.useEffect(function () {
|
|
35810
35914
|
if (serverHandoffComplete === false) {
|
|
35811
35915
|
serverHandoffComplete = true;
|
|
35812
35916
|
}
|
|
35813
35917
|
}, []);
|
|
35814
35918
|
return id2 != null ? String(id2) : void 0;
|
|
35815
35919
|
}
|
|
35920
|
+
|
|
35816
35921
|
function useId(idOverride) {
|
|
35817
|
-
|
|
35818
|
-
|
|
35922
|
+
var reactId = useReactId();
|
|
35923
|
+
var uniqueId = useUniqueId(idOverride);
|
|
35924
|
+
|
|
35819
35925
|
if (typeof idOverride === "string") {
|
|
35820
35926
|
return idOverride;
|
|
35821
35927
|
}
|
|
35928
|
+
|
|
35822
35929
|
if (typeof reactId === "string") {
|
|
35823
35930
|
return reactId;
|
|
35824
35931
|
}
|
|
35932
|
+
|
|
35825
35933
|
return uniqueId;
|
|
35826
|
-
}
|
|
35934
|
+
} // src/utils/setAnimationTimeout.ts
|
|
35935
|
+
|
|
35827
35936
|
|
|
35828
|
-
// src/utils/setAnimationTimeout.ts
|
|
35829
35937
|
function setAnimationTimeout(callback, timeout) {
|
|
35830
|
-
|
|
35831
|
-
|
|
35938
|
+
var startTime = performance.now();
|
|
35939
|
+
var frame = {};
|
|
35940
|
+
|
|
35832
35941
|
function call() {
|
|
35833
|
-
frame.id = requestAnimationFrame((now)
|
|
35942
|
+
frame.id = requestAnimationFrame(function (now) {
|
|
35834
35943
|
if (now - startTime > timeout) {
|
|
35835
35944
|
callback();
|
|
35836
35945
|
} else {
|
|
@@ -35838,121 +35947,142 @@
|
|
|
35838
35947
|
}
|
|
35839
35948
|
});
|
|
35840
35949
|
}
|
|
35950
|
+
|
|
35841
35951
|
call();
|
|
35842
35952
|
return frame;
|
|
35843
35953
|
}
|
|
35954
|
+
|
|
35844
35955
|
function clearAnimationTimeout(frame) {
|
|
35845
|
-
if (frame.id)
|
|
35846
|
-
|
|
35847
|
-
}
|
|
35956
|
+
if (frame.id) cancelAnimationFrame(frame.id);
|
|
35957
|
+
} // src/utils/index.ts
|
|
35848
35958
|
|
|
35849
|
-
// src/utils/index.ts
|
|
35850
|
-
function getElementHeight(el) {
|
|
35851
|
-
if (!el?.current) {
|
|
35852
|
-
collapseWarning(
|
|
35853
|
-
true,
|
|
35854
|
-
`Was not able to find a ref to the collapse element via \`getCollapseProps\`. Ensure that the element exposes its \`ref\` prop. If it exposes the ref prop under a different name (like \`innerRef\`), use the \`refKey\` property to change it. Example:
|
|
35855
35959
|
|
|
35856
|
-
|
|
35857
|
-
|
|
35960
|
+
function getElementHeight(el) {
|
|
35961
|
+
if (!(el !== null && el !== void 0 && el.current)) {
|
|
35962
|
+
collapseWarning(true, "Was not able to find a ref to the collapse element via `getCollapseProps`. Ensure that the element exposes its `ref` prop. If it exposes the ref prop under a different name (like `innerRef`), use the `refKey` property to change it. Example:\n\nconst collapseProps = getCollapseProps({refKey: 'innerRef'})");
|
|
35858
35963
|
return 0;
|
|
35859
35964
|
}
|
|
35965
|
+
|
|
35860
35966
|
return el.current.scrollHeight;
|
|
35861
35967
|
}
|
|
35968
|
+
|
|
35862
35969
|
function getAutoHeightDuration(height) {
|
|
35863
35970
|
if (!height || typeof height === "string") {
|
|
35864
35971
|
return 0;
|
|
35865
35972
|
}
|
|
35866
|
-
|
|
35867
|
-
|
|
35973
|
+
|
|
35974
|
+
var constant = height / 36;
|
|
35975
|
+
return Math.round((4 + 15 * Math.pow(constant, 0.25) + constant / 5) * 10);
|
|
35868
35976
|
}
|
|
35977
|
+
|
|
35869
35978
|
function assignRef(ref, value) {
|
|
35870
|
-
if (ref == null)
|
|
35871
|
-
|
|
35979
|
+
if (ref == null) return;
|
|
35980
|
+
|
|
35872
35981
|
if (typeof ref === "function") {
|
|
35873
35982
|
ref(value);
|
|
35874
35983
|
} else {
|
|
35875
35984
|
try {
|
|
35876
35985
|
ref.current = value;
|
|
35877
35986
|
} catch (error) {
|
|
35878
|
-
throw new CollapseError(
|
|
35987
|
+
throw new CollapseError("Cannot assign value \"".concat(value, "\" to ref \"").concat(ref, "\""));
|
|
35879
35988
|
}
|
|
35880
35989
|
}
|
|
35881
35990
|
}
|
|
35882
|
-
|
|
35883
|
-
|
|
35991
|
+
|
|
35992
|
+
function mergeRefs() {
|
|
35993
|
+
for (var _len2 = arguments.length, refs = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
35994
|
+
refs[_key2] = arguments[_key2];
|
|
35995
|
+
}
|
|
35996
|
+
|
|
35997
|
+
if (refs.every(function (ref) {
|
|
35998
|
+
return ref == null;
|
|
35999
|
+
})) {
|
|
35884
36000
|
return null;
|
|
35885
36001
|
}
|
|
35886
|
-
|
|
35887
|
-
|
|
36002
|
+
|
|
36003
|
+
return function (node) {
|
|
36004
|
+
refs.forEach(function (ref) {
|
|
35888
36005
|
assignRef(ref, node);
|
|
35889
36006
|
});
|
|
35890
36007
|
};
|
|
35891
36008
|
}
|
|
36009
|
+
|
|
35892
36010
|
function usePaddingWarning(element) {
|
|
35893
|
-
|
|
35894
|
-
|
|
36011
|
+
var warn = function warn(el) {};
|
|
36012
|
+
|
|
35895
36013
|
{
|
|
35896
|
-
warn = (el)
|
|
35897
|
-
if (!el
|
|
36014
|
+
warn = function warn(el) {
|
|
36015
|
+
if (!(el !== null && el !== void 0 && el.current)) {
|
|
35898
36016
|
return;
|
|
35899
36017
|
}
|
|
35900
|
-
const { paddingTop, paddingBottom } = window.getComputedStyle(el.current);
|
|
35901
|
-
const hasPadding = paddingTop && paddingTop !== "0px" || paddingBottom && paddingBottom !== "0px";
|
|
35902
|
-
collapseWarning(
|
|
35903
|
-
!hasPadding,
|
|
35904
|
-
`Padding applied to the collapse element will cause the animation to break and not perform as expected. To fix, apply equivalent padding to the direct descendent of the collapse element. Example:
|
|
35905
36018
|
|
|
35906
|
-
|
|
36019
|
+
var _window$getComputedSt = window.getComputedStyle(el.current),
|
|
36020
|
+
paddingTop = _window$getComputedSt.paddingTop,
|
|
36021
|
+
paddingBottom = _window$getComputedSt.paddingBottom;
|
|
35907
36022
|
|
|
35908
|
-
|
|
35909
|
-
<div style={{padding: 10}}>
|
|
35910
|
-
{children}
|
|
35911
|
-
</div>
|
|
35912
|
-
</div>`
|
|
35913
|
-
);
|
|
36023
|
+
var hasPadding = paddingTop && paddingTop !== "0px" || paddingBottom && paddingBottom !== "0px";
|
|
36024
|
+
collapseWarning(!hasPadding, "Padding applied to the collapse element will cause the animation to break and not perform as expected. To fix, apply equivalent padding to the direct descendent of the collapse element. Example:\n\nBefore: <div {...getCollapseProps({style: {padding: 10}})}>{children}</div>\n\nAfter: <div {...getCollapseProps()}>\n <div style={{padding: 10}}>\n {children}\n </div>\n </div>");
|
|
35914
36025
|
};
|
|
35915
36026
|
}
|
|
35916
|
-
|
|
36027
|
+
|
|
36028
|
+
React.useEffect(function () {
|
|
35917
36029
|
warn(element);
|
|
35918
36030
|
}, [element]);
|
|
35919
|
-
}
|
|
36031
|
+
} // src/index.ts
|
|
36032
|
+
|
|
35920
36033
|
|
|
35921
|
-
// src/index.ts
|
|
35922
36034
|
var useLayoutEffect2 = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
|
|
35923
|
-
|
|
35924
|
-
|
|
35925
|
-
|
|
35926
|
-
|
|
35927
|
-
|
|
35928
|
-
|
|
35929
|
-
|
|
35930
|
-
|
|
35931
|
-
|
|
35932
|
-
|
|
35933
|
-
|
|
35934
|
-
|
|
35935
|
-
|
|
35936
|
-
|
|
35937
|
-
|
|
35938
|
-
|
|
35939
|
-
);
|
|
35940
|
-
|
|
35941
|
-
|
|
35942
|
-
|
|
35943
|
-
|
|
35944
|
-
|
|
35945
|
-
|
|
35946
|
-
|
|
35947
|
-
|
|
36035
|
+
|
|
36036
|
+
function useCollapse() {
|
|
36037
|
+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
36038
|
+
duration = _ref.duration,
|
|
36039
|
+
_ref$easing = _ref.easing,
|
|
36040
|
+
easing = _ref$easing === void 0 ? "cubic-bezier(0.4, 0, 0.2, 1)" : _ref$easing,
|
|
36041
|
+
_ref$onTransitionStat = _ref.onTransitionStateChange,
|
|
36042
|
+
propOnTransitionStateChange = _ref$onTransitionStat === void 0 ? function () {} : _ref$onTransitionStat,
|
|
36043
|
+
configIsExpanded = _ref.isExpanded,
|
|
36044
|
+
_ref$defaultExpanded = _ref.defaultExpanded,
|
|
36045
|
+
defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded,
|
|
36046
|
+
hasDisabledAnimation = _ref.hasDisabledAnimation,
|
|
36047
|
+
id2 = _ref.id,
|
|
36048
|
+
initialConfig = _objectWithoutProperties(_ref, _excluded);
|
|
36049
|
+
|
|
36050
|
+
var onTransitionStateChange = useEvent(propOnTransitionStateChange);
|
|
36051
|
+
var uniqueId = useId(id2 ? "".concat(id2) : void 0);
|
|
36052
|
+
|
|
36053
|
+
var _useControlledState = useControlledState(configIsExpanded, defaultExpanded),
|
|
36054
|
+
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
36055
|
+
isExpanded = _useControlledState2[0],
|
|
36056
|
+
setExpanded = _useControlledState2[1];
|
|
36057
|
+
|
|
36058
|
+
var prevExpanded = React.useRef(isExpanded);
|
|
36059
|
+
|
|
36060
|
+
var _useState5 = React.useState(false),
|
|
36061
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
36062
|
+
isAnimating = _useState6[0],
|
|
36063
|
+
setIsAnimating = _useState6[1];
|
|
36064
|
+
|
|
36065
|
+
var prefersReducedMotion = usePrefersReducedMotion();
|
|
36066
|
+
var disableAnimation = hasDisabledAnimation !== null && hasDisabledAnimation !== void 0 ? hasDisabledAnimation : prefersReducedMotion;
|
|
36067
|
+
var frameId = React.useRef();
|
|
36068
|
+
var endFrameId = React.useRef();
|
|
36069
|
+
var collapseElRef = React.useRef(null);
|
|
36070
|
+
|
|
36071
|
+
var _useState7 = React.useState(null),
|
|
36072
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
36073
|
+
toggleEl = _useState8[0],
|
|
36074
|
+
setToggleEl = _useState8[1];
|
|
36075
|
+
|
|
35948
36076
|
usePaddingWarning(collapseElRef);
|
|
35949
|
-
|
|
36077
|
+
var collapsedHeight = "".concat(initialConfig.collapsedHeight || 0, "px");
|
|
36078
|
+
|
|
35950
36079
|
function setStyles(newStyles) {
|
|
35951
|
-
if (!collapseElRef.current)
|
|
35952
|
-
|
|
35953
|
-
|
|
35954
|
-
for (
|
|
35955
|
-
|
|
36080
|
+
if (!collapseElRef.current) return;
|
|
36081
|
+
var target = collapseElRef.current;
|
|
36082
|
+
|
|
36083
|
+
for (var property in newStyles) {
|
|
36084
|
+
var value = newStyles[property];
|
|
36085
|
+
|
|
35956
36086
|
if (value) {
|
|
35957
36087
|
target.style[property] = value;
|
|
35958
36088
|
} else {
|
|
@@ -35960,21 +36090,26 @@ After: <div {...getCollapseProps()}>
|
|
|
35960
36090
|
}
|
|
35961
36091
|
}
|
|
35962
36092
|
}
|
|
35963
|
-
|
|
35964
|
-
|
|
35965
|
-
|
|
35966
|
-
|
|
35967
|
-
if (isExpanded === prevExpanded.current)
|
|
35968
|
-
return;
|
|
36093
|
+
|
|
36094
|
+
useLayoutEffect2(function () {
|
|
36095
|
+
var collapse = collapseElRef.current;
|
|
36096
|
+
if (!collapse) return;
|
|
36097
|
+
if (isExpanded === prevExpanded.current) return;
|
|
35969
36098
|
prevExpanded.current = isExpanded;
|
|
36099
|
+
|
|
35970
36100
|
function getDuration(height) {
|
|
35971
36101
|
if (disableAnimation) {
|
|
35972
36102
|
return 0;
|
|
35973
36103
|
}
|
|
35974
|
-
|
|
36104
|
+
|
|
36105
|
+
return duration !== null && duration !== void 0 ? duration : getAutoHeightDuration(height);
|
|
35975
36106
|
}
|
|
35976
|
-
|
|
35977
|
-
|
|
36107
|
+
|
|
36108
|
+
var getTransitionStyles = function getTransitionStyles(height) {
|
|
36109
|
+
return "height ".concat(getDuration(height), "ms ").concat(easing);
|
|
36110
|
+
};
|
|
36111
|
+
|
|
36112
|
+
var setTransitionEndTimeout = function setTransitionEndTimeout(duration2) {
|
|
35978
36113
|
function endTransition() {
|
|
35979
36114
|
if (isExpanded) {
|
|
35980
36115
|
setStyles({
|
|
@@ -35985,45 +36120,53 @@ After: <div {...getCollapseProps()}>
|
|
|
35985
36120
|
});
|
|
35986
36121
|
onTransitionStateChange("expandEnd");
|
|
35987
36122
|
} else {
|
|
35988
|
-
setStyles({
|
|
36123
|
+
setStyles({
|
|
36124
|
+
transition: ""
|
|
36125
|
+
});
|
|
35989
36126
|
onTransitionStateChange("collapseEnd");
|
|
35990
36127
|
}
|
|
36128
|
+
|
|
35991
36129
|
setIsAnimating(false);
|
|
35992
36130
|
}
|
|
36131
|
+
|
|
35993
36132
|
if (endFrameId.current) {
|
|
35994
36133
|
clearAnimationTimeout(endFrameId.current);
|
|
35995
36134
|
}
|
|
36135
|
+
|
|
35996
36136
|
endFrameId.current = setAnimationTimeout(endTransition, duration2);
|
|
35997
36137
|
};
|
|
36138
|
+
|
|
35998
36139
|
setIsAnimating(true);
|
|
36140
|
+
|
|
35999
36141
|
if (isExpanded) {
|
|
36000
|
-
frameId.current = requestAnimationFrame(()
|
|
36142
|
+
frameId.current = requestAnimationFrame(function () {
|
|
36001
36143
|
onTransitionStateChange("expandStart");
|
|
36002
36144
|
setStyles({
|
|
36003
36145
|
display: "block",
|
|
36004
36146
|
overflow: "hidden",
|
|
36005
36147
|
height: collapsedHeight
|
|
36006
36148
|
});
|
|
36007
|
-
frameId.current = requestAnimationFrame(()
|
|
36149
|
+
frameId.current = requestAnimationFrame(function () {
|
|
36008
36150
|
onTransitionStateChange("expanding");
|
|
36009
|
-
|
|
36151
|
+
var height = getElementHeight(collapseElRef);
|
|
36010
36152
|
setTransitionEndTimeout(getDuration(height));
|
|
36153
|
+
|
|
36011
36154
|
if (collapseElRef.current) {
|
|
36012
36155
|
collapseElRef.current.style.transition = getTransitionStyles(height);
|
|
36013
|
-
collapseElRef.current.style.height =
|
|
36156
|
+
collapseElRef.current.style.height = "".concat(height, "px");
|
|
36014
36157
|
}
|
|
36015
36158
|
});
|
|
36016
36159
|
});
|
|
36017
36160
|
} else {
|
|
36018
|
-
frameId.current = requestAnimationFrame(()
|
|
36161
|
+
frameId.current = requestAnimationFrame(function () {
|
|
36019
36162
|
onTransitionStateChange("collapseStart");
|
|
36020
|
-
|
|
36163
|
+
var height = getElementHeight(collapseElRef);
|
|
36021
36164
|
setTransitionEndTimeout(getDuration(height));
|
|
36022
36165
|
setStyles({
|
|
36023
36166
|
transition: getTransitionStyles(height),
|
|
36024
|
-
height:
|
|
36167
|
+
height: "".concat(height, "px")
|
|
36025
36168
|
});
|
|
36026
|
-
frameId.current = requestAnimationFrame(()
|
|
36169
|
+
frameId.current = requestAnimationFrame(function () {
|
|
36027
36170
|
onTransitionStateChange("collapsing");
|
|
36028
36171
|
setStyles({
|
|
36029
36172
|
height: collapsedHeight,
|
|
@@ -36032,89 +36175,84 @@ After: <div {...getCollapseProps()}>
|
|
|
36032
36175
|
});
|
|
36033
36176
|
});
|
|
36034
36177
|
}
|
|
36035
|
-
|
|
36036
|
-
|
|
36037
|
-
|
|
36038
|
-
if (endFrameId.current)
|
|
36039
|
-
clearAnimationTimeout(endFrameId.current);
|
|
36178
|
+
|
|
36179
|
+
return function () {
|
|
36180
|
+
if (frameId.current) cancelAnimationFrame(frameId.current);
|
|
36181
|
+
if (endFrameId.current) clearAnimationTimeout(endFrameId.current);
|
|
36040
36182
|
};
|
|
36041
|
-
}, [
|
|
36042
|
-
isExpanded,
|
|
36043
|
-
collapsedHeight,
|
|
36044
|
-
disableAnimation,
|
|
36045
|
-
duration,
|
|
36046
|
-
easing,
|
|
36047
|
-
onTransitionStateChange
|
|
36048
|
-
]);
|
|
36183
|
+
}, [isExpanded, collapsedHeight, disableAnimation, duration, easing, onTransitionStateChange]);
|
|
36049
36184
|
return {
|
|
36050
|
-
isExpanded,
|
|
36051
|
-
setExpanded,
|
|
36052
|
-
getToggleProps(args) {
|
|
36053
|
-
|
|
36185
|
+
isExpanded: isExpanded,
|
|
36186
|
+
setExpanded: setExpanded,
|
|
36187
|
+
getToggleProps: function getToggleProps(args) {
|
|
36188
|
+
var _refKey$onClick$disab = _objectSpread2({
|
|
36054
36189
|
refKey: "ref",
|
|
36055
|
-
onClick() {
|
|
36056
|
-
|
|
36057
|
-
|
|
36058
|
-
|
|
36059
|
-
|
|
36060
|
-
|
|
36061
|
-
|
|
36062
|
-
|
|
36063
|
-
|
|
36064
|
-
|
|
36190
|
+
onClick: function onClick() {},
|
|
36191
|
+
disabled: false
|
|
36192
|
+
}, args),
|
|
36193
|
+
disabled = _refKey$onClick$disab.disabled,
|
|
36194
|
+
_onClick = _refKey$onClick$disab.onClick,
|
|
36195
|
+
refKey = _refKey$onClick$disab.refKey,
|
|
36196
|
+
rest = _objectWithoutProperties(_refKey$onClick$disab, _excluded2);
|
|
36197
|
+
|
|
36198
|
+
var isButton = toggleEl ? toggleEl.tagName === "BUTTON" : void 0;
|
|
36199
|
+
var theirRef = args === null || args === void 0 ? void 0 : args[refKey || "ref"];
|
|
36200
|
+
|
|
36201
|
+
var props = _defineProperty({
|
|
36202
|
+
id: "react-collapsed-toggle-".concat(uniqueId),
|
|
36203
|
+
"aria-controls": "react-collapsed-panel-".concat(uniqueId),
|
|
36065
36204
|
"aria-expanded": isExpanded,
|
|
36066
|
-
onClick(evt) {
|
|
36067
|
-
if (disabled)
|
|
36068
|
-
|
|
36069
|
-
|
|
36070
|
-
|
|
36071
|
-
|
|
36072
|
-
|
|
36073
|
-
};
|
|
36074
|
-
|
|
36205
|
+
onClick: function onClick(evt) {
|
|
36206
|
+
if (disabled) return;
|
|
36207
|
+
_onClick === null || _onClick === void 0 || _onClick(evt);
|
|
36208
|
+
setExpanded(function (n) {
|
|
36209
|
+
return !n;
|
|
36210
|
+
});
|
|
36211
|
+
}
|
|
36212
|
+
}, refKey || "ref", mergeRefs(theirRef, setToggleEl));
|
|
36213
|
+
|
|
36214
|
+
var buttonProps = {
|
|
36075
36215
|
type: "button",
|
|
36076
36216
|
disabled: disabled ? true : void 0
|
|
36077
36217
|
};
|
|
36078
|
-
|
|
36218
|
+
var fakeButtonProps = {
|
|
36079
36219
|
"aria-disabled": disabled ? true : void 0,
|
|
36080
36220
|
role: "button",
|
|
36081
36221
|
tabIndex: disabled ? -1 : 0
|
|
36082
36222
|
};
|
|
36223
|
+
|
|
36083
36224
|
if (isButton === false) {
|
|
36084
|
-
return {
|
|
36225
|
+
return _objectSpread2(_objectSpread2(_objectSpread2({}, props), fakeButtonProps), rest);
|
|
36085
36226
|
} else if (isButton === true) {
|
|
36086
|
-
return {
|
|
36227
|
+
return _objectSpread2(_objectSpread2(_objectSpread2({}, props), buttonProps), rest);
|
|
36087
36228
|
} else {
|
|
36088
|
-
return {
|
|
36089
|
-
...props,
|
|
36090
|
-
...buttonProps,
|
|
36091
|
-
...fakeButtonProps,
|
|
36092
|
-
...rest
|
|
36093
|
-
};
|
|
36229
|
+
return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, props), buttonProps), fakeButtonProps), rest);
|
|
36094
36230
|
}
|
|
36095
36231
|
},
|
|
36096
|
-
getCollapseProps(args) {
|
|
36097
|
-
|
|
36098
|
-
|
|
36099
|
-
|
|
36100
|
-
|
|
36232
|
+
getCollapseProps: function getCollapseProps(args) {
|
|
36233
|
+
var _objectSpread2$1;
|
|
36234
|
+
|
|
36235
|
+
var _refKey$style$args = _objectSpread2({
|
|
36236
|
+
refKey: "ref",
|
|
36237
|
+
style: {}
|
|
36238
|
+
}, args),
|
|
36239
|
+
style = _refKey$style$args.style,
|
|
36240
|
+
refKey = _refKey$style$args.refKey;
|
|
36241
|
+
|
|
36242
|
+
var theirRef = args === null || args === void 0 ? void 0 : args[refKey || "ref"];
|
|
36243
|
+
return _objectSpread2(_objectSpread2({
|
|
36244
|
+
id: "react-collapsed-panel-".concat(uniqueId),
|
|
36101
36245
|
"aria-hidden": !isExpanded,
|
|
36102
|
-
"aria-labelledby":
|
|
36103
|
-
role: "region"
|
|
36104
|
-
|
|
36105
|
-
|
|
36106
|
-
|
|
36107
|
-
|
|
36108
|
-
|
|
36109
|
-
|
|
36110
|
-
|
|
36111
|
-
|
|
36112
|
-
overflow: "hidden"
|
|
36113
|
-
} : {},
|
|
36114
|
-
// additional styles passed, e.g. getCollapseProps({style: {}})
|
|
36115
|
-
...style
|
|
36116
|
-
}
|
|
36117
|
-
};
|
|
36246
|
+
"aria-labelledby": "react-collapsed-toggle-".concat(uniqueId),
|
|
36247
|
+
role: "region"
|
|
36248
|
+
}, args), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, refKey || "ref", mergeRefs(collapseElRef, theirRef)), _defineProperty(_objectSpread2$1, "style", _objectSpread2(_objectSpread2({
|
|
36249
|
+
boxSizing: "border-box"
|
|
36250
|
+
}, !isAnimating && !isExpanded ? {
|
|
36251
|
+
// collapsed and not animating
|
|
36252
|
+
display: collapsedHeight === "0px" ? "none" : "block",
|
|
36253
|
+
height: collapsedHeight,
|
|
36254
|
+
overflow: "hidden"
|
|
36255
|
+
} : {}), style)), _objectSpread2$1));
|
|
36118
36256
|
}
|
|
36119
36257
|
};
|
|
36120
36258
|
}
|