@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.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$a = ["color", "name", "size", "styles", "pathStyles", "width", "height", "viewBox"];
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$a);
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$9 = ["backgroundColor", "borderColor", "children", "disabled", "icon", "iconColor", "iconSize", "onClick", "onDelete", "selected", "textColor", "variant", "hasLink"];
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$9);
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$8 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant", "disabled"];
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$8);
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$7 = ["autoComplete", "disabled", "defaultChecked", "onChange", "rounded", "styles", "value"];
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$7);
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$6 = ["autoComplete", "defaultChecked", "disabled", "id", "name", "onChange", "value"];
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$6);
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$5 = ["icon", "error", "disabled", "placeholder", "errorMessage", "autoComplete", "hasFloatingLabel", "value", "isTranslateActive", "defaultValue"];
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$5);
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$4 = ["label", "error", "disabled", "placeholder", "autoComplete", "errorMessage", "hasFloatingLabel", "isTranslateActive", "value", "defaultValue"];
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$4);
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$3 = ["href", "children", "target", "icon"];
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$3);
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$2 = ["open", "position", "handleClose", "transitionDuration", "fullScreen", "closeOnClickAway", "children"];
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$2);
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, _window$google$maps;
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 ? void 0 : (_window$google$maps = _window$google.maps) === null || _window$google$maps === void 0 ? void 0 : _window$google$maps.Animation;
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 ? void 0 : (_marker$position = marker.position) === null || _marker$position === void 0 ? void 0 : _marker$position.lat, "-").concat(marker === null || marker === void 0 ? void 0 : (_marker$position2 = marker.position) === null || _marker$position2 === void 0 ? void 0 : _marker$position2.lng, "/").concat(idx.toString());
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$1 = ["formattedAddress"];
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$1);
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
- * react-collapsed v4.2.0
35714
- *
35715
- * Copyright (c) 2019-2024, Rogin Farrer
35716
- *
35717
- * This source code is licensed under the MIT license found in the
35718
- * LICENSE.md file in the root directory of this source tree.
35719
- *
35720
- * @license MIT
35721
- */
35722
- var CollapseError = class extends Error {
35723
- constructor(message) {
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
- var collapseWarning = (...args) => {
35728
- return warning(args[0], `[react-collapsed] -- ${args[1]}`);
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
- const ref = React.useRef(callback);
35732
- React.useEffect(() => {
35805
+ var ref = React.useRef(callback);
35806
+ React.useEffect(function () {
35733
35807
  ref.current = callback;
35734
35808
  });
35735
- return React.useCallback((...args) => ref.current?.(...args), []);
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
- const [state, setState] = React.useState(defaultValue);
35739
- const initiallyControlled = React.useRef(typeof value !== "undefined");
35740
- const effectiveValue = initiallyControlled.current ? value : state;
35741
- const cb = useEvent(callback);
35742
- const onChange = React.useCallback(
35743
- (update) => {
35744
- const setter = update;
35745
- const newValue = typeof update === "function" ? setter(effectiveValue) : update;
35746
- if (!initiallyControlled.current) {
35747
- setState(newValue);
35748
- }
35749
- cb?.(newValue);
35750
- },
35751
- [cb, effectiveValue]
35752
- );
35753
- React.useEffect(() => {
35754
- collapseWarning(
35755
- !(initiallyControlled.current && value == null),
35756
- "`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."
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
- const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
35768
- React.useEffect(() => {
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
- const mediaQueryList = window.matchMedia(QUERY);
35857
+
35858
+ var mediaQueryList = window.matchMedia(QUERY);
35773
35859
  setPrefersReducedMotion(mediaQueryList.matches);
35774
- const listener = (event) => {
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
- var __useId = React__namespace["useId".toString()] || (() => void 0);
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
- const id2 = __useId();
35795
- return id2 ?? "";
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
- var genId = () => ++id;
35895
+
35896
+ var genId = function genId() {
35897
+ return ++id;
35898
+ };
35899
+
35801
35900
  function useUniqueId(idFromProps) {
35802
- const initialId = idFromProps || (serverHandoffComplete ? genId() : null);
35803
- const [id2, setId] = React__namespace.useState(initialId);
35804
- useIsomorphicLayoutEffect(() => {
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
- const reactId = useReactId();
35818
- const uniqueId = useUniqueId(idOverride);
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
- const startTime = performance.now();
35831
- const frame = {};
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
- cancelAnimationFrame(frame.id);
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
- const collapseProps = getCollapseProps({refKey: 'innerRef'})`
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
- const constant = height / 36;
35867
- return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
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
- return;
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(`Cannot assign value "${value}" to ref "${ref}"`);
35987
+ throw new CollapseError("Cannot assign value \"".concat(value, "\" to ref \"").concat(ref, "\""));
35879
35988
  }
35880
35989
  }
35881
35990
  }
35882
- function mergeRefs(...refs) {
35883
- if (refs.every((ref) => ref == null)) {
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
- return (node) => {
35887
- refs.forEach((ref) => {
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
- let warn = (el) => {
35894
- };
36011
+ var warn = function warn(el) {};
36012
+
35895
36013
  {
35896
- warn = (el) => {
35897
- if (!el?.current) {
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
- Before: <div {...getCollapseProps({style: {padding: 10}})}>{children}</div>
36019
+ var _window$getComputedSt = window.getComputedStyle(el.current),
36020
+ paddingTop = _window$getComputedSt.paddingTop,
36021
+ paddingBottom = _window$getComputedSt.paddingBottom;
35907
36022
 
35908
- After: <div {...getCollapseProps()}>
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
- React.useEffect(() => {
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
- function useCollapse({
35924
- duration,
35925
- easing = "cubic-bezier(0.4, 0, 0.2, 1)",
35926
- onTransitionStateChange: propOnTransitionStateChange = () => {
35927
- },
35928
- isExpanded: configIsExpanded,
35929
- defaultExpanded = false,
35930
- hasDisabledAnimation,
35931
- id: id2,
35932
- ...initialConfig
35933
- } = {}) {
35934
- const onTransitionStateChange = useEvent(propOnTransitionStateChange);
35935
- const uniqueId = useId(id2 ? `${id2}` : void 0);
35936
- const [isExpanded, setExpanded] = useControlledState(
35937
- configIsExpanded,
35938
- defaultExpanded
35939
- );
35940
- const prevExpanded = React.useRef(isExpanded);
35941
- const [isAnimating, setIsAnimating] = React.useState(false);
35942
- const prefersReducedMotion = usePrefersReducedMotion();
35943
- const disableAnimation = hasDisabledAnimation ?? prefersReducedMotion;
35944
- const frameId = React.useRef();
35945
- const endFrameId = React.useRef();
35946
- const collapseElRef = React.useRef(null);
35947
- const [toggleEl, setToggleEl] = React.useState(null);
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
- const collapsedHeight = `${initialConfig.collapsedHeight || 0}px`;
36077
+ var collapsedHeight = "".concat(initialConfig.collapsedHeight || 0, "px");
36078
+
35950
36079
  function setStyles(newStyles) {
35951
- if (!collapseElRef.current)
35952
- return;
35953
- const target = collapseElRef.current;
35954
- for (const property in newStyles) {
35955
- const value = newStyles[property];
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
- useLayoutEffect2(() => {
35964
- const collapse = collapseElRef.current;
35965
- if (!collapse)
35966
- return;
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
- return duration ?? getAutoHeightDuration(height);
36104
+
36105
+ return duration !== null && duration !== void 0 ? duration : getAutoHeightDuration(height);
35975
36106
  }
35976
- const getTransitionStyles = (height) => `height ${getDuration(height)}ms ${easing}`;
35977
- const setTransitionEndTimeout = (duration2) => {
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({ transition: "" });
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
- const height = getElementHeight(collapseElRef);
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 = `${height}px`;
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
- const height = getElementHeight(collapseElRef);
36163
+ var height = getElementHeight(collapseElRef);
36021
36164
  setTransitionEndTimeout(getDuration(height));
36022
36165
  setStyles({
36023
36166
  transition: getTransitionStyles(height),
36024
- height: `${height}px`
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
- return () => {
36036
- if (frameId.current)
36037
- cancelAnimationFrame(frameId.current);
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
- const { disabled, onClick, refKey, ...rest } = {
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
- disabled: false,
36058
- ...args
36059
- };
36060
- const isButton = toggleEl ? toggleEl.tagName === "BUTTON" : void 0;
36061
- const theirRef = args?.[refKey || "ref"];
36062
- const props = {
36063
- id: `react-collapsed-toggle-${uniqueId}`,
36064
- "aria-controls": `react-collapsed-panel-${uniqueId}`,
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
- return;
36069
- onClick?.(evt);
36070
- setExpanded((n) => !n);
36071
- },
36072
- [refKey || "ref"]: mergeRefs(theirRef, setToggleEl)
36073
- };
36074
- const buttonProps = {
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
- const fakeButtonProps = {
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 { ...props, ...fakeButtonProps, ...rest };
36225
+ return _objectSpread2(_objectSpread2(_objectSpread2({}, props), fakeButtonProps), rest);
36085
36226
  } else if (isButton === true) {
36086
- return { ...props, ...buttonProps, ...rest };
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
- const { style, refKey } = { refKey: "ref", style: {}, ...args };
36098
- const theirRef = args?.[refKey || "ref"];
36099
- return {
36100
- id: `react-collapsed-panel-${uniqueId}`,
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": `react-collapsed-toggle-${uniqueId}`,
36103
- role: "region",
36104
- ...args,
36105
- [refKey || "ref"]: mergeRefs(collapseElRef, theirRef),
36106
- style: {
36107
- boxSizing: "border-box",
36108
- ...!isAnimating && !isExpanded ? {
36109
- // collapsed and not animating
36110
- display: collapsedHeight === "0px" ? "none" : "block",
36111
- height: collapsedHeight,
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
  }