@moda/om 21.5.2 → 21.6.1

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { useContext, useState, createContext, forwardRef, useRef, useCallback, useEffect, useMemo, Fragment, PureComponent, Children, isValidElement, cloneElement, useReducer } from 'react';
3
- import { Link, Prompt } from 'react-router-dom';
3
+ import { Link } from 'react-router-dom';
4
4
  import { createPortal } from 'react-dom';
5
5
 
6
6
  function getDefaultExportFromCjs (x) {
@@ -43,7 +43,7 @@ var hasRequiredFocusVisible;
43
43
  function requireFocusVisible() {
44
44
  if (hasRequiredFocusVisible) return focusVisible$1.exports;
45
45
  hasRequiredFocusVisible = 1;
46
- (function (module, exports) {
46
+ (function (module, exports$1) {
47
47
  (function (global, factory) {
48
48
  factory() ;
49
49
  })(focusVisible, function () {
@@ -371,7 +371,7 @@ function requireColors() {
371
371
  "tuscany": "rgb(186, 83, 44)",
372
372
  "klein-blue": "rgb(38, 48, 120)",
373
373
  "persian-blue": "rgb(30, 34, 170)",
374
- "brick": "rgb(147, 58, 32)",
374
+ "brick": "rgb(158, 48, 57)",
375
375
  "goldenrod": "rgb(186, 145, 46)",
376
376
  "seafoam": "rgb(177, 191, 170)",
377
377
  "coral": "rgb(255, 146, 121)",
@@ -401,7 +401,7 @@ function requireColors() {
401
401
  "global": {
402
402
  "klein-blue": "rgb(38, 48, 120)",
403
403
  "persian-blue": "rgb(30, 34, 170)",
404
- "brick": "rgb(147, 58, 32)",
404
+ "brick": "rgb(158, 48, 57)",
405
405
  "goldenrod": "rgb(186, 145, 46)",
406
406
  "seafoam": "rgb(177, 191, 170)",
407
407
  "coral": "rgb(255, 146, 121)"
@@ -919,7 +919,7 @@ var hasRequiredHelpers;
919
919
  function requireHelpers() {
920
920
  if (hasRequiredHelpers) return helpers;
921
921
  hasRequiredHelpers = 1;
922
- (function (exports) {
922
+ (function (exports$1) {
923
923
 
924
924
  var __assign = helpers && helpers.__assign || function () {
925
925
  __assign = Object.assign || function (t) {
@@ -936,10 +936,10 @@ function requireHelpers() {
936
936
  "default": mod
937
937
  };
938
938
  };
939
- Object.defineProperty(exports, "__esModule", {
939
+ Object.defineProperty(exports$1, "__esModule", {
940
940
  value: true
941
941
  });
942
- exports.spacing = exports.colorInHex = exports.color = exports.remToUnitlessPx = exports.text = void 0;
942
+ exports$1.spacing = exports$1.colorInHex = exports$1.color = exports$1.remToUnitlessPx = exports$1.text = void 0;
943
943
  var color_string_1 = __importDefault(require$$0);
944
944
  var colors_1 = requireColors();
945
945
  var space_1 = requireSpace();
@@ -954,11 +954,11 @@ function requireHelpers() {
954
954
  'line-height': "".concat(treatment['line-height'])
955
955
  });
956
956
  };
957
- exports.text = text;
957
+ exports$1.text = text;
958
958
  var remToUnitlessPx = function remToUnitlessPx(value) {
959
959
  return parseFloat(value) * parseInt(typography_1.typography['root-font-size'], 10);
960
960
  };
961
- exports.remToUnitlessPx = remToUnitlessPx;
961
+ exports$1.remToUnitlessPx = remToUnitlessPx;
962
962
  var color = function color(name, alpha) {
963
963
  var _a;
964
964
  var color = colors_1.colors.all[name];
@@ -968,16 +968,16 @@ function requireHelpers() {
968
968
  blue = _b[2];
969
969
  return alpha != null ? color_string_1["default"].to.rgb(red, green, blue, alpha) : color;
970
970
  };
971
- exports.color = color;
971
+ exports$1.color = color;
972
972
  var colorInHex = function colorInHex(name, alpha) {
973
973
  var _a, _b, _c;
974
- var _d = (_b = color_string_1["default"].get.rgb((_a = (0, exports.color)(name, alpha)) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : [],
974
+ var _d = (_b = color_string_1["default"].get.rgb((_a = (0, exports$1.color)(name, alpha)) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : [],
975
975
  red = _d[0],
976
976
  green = _d[1],
977
977
  blue = _d[2];
978
978
  return (_c = color_string_1["default"].to.hex(red, green, blue, alpha)) !== null && _c !== void 0 ? _c : '';
979
979
  };
980
- exports.colorInHex = colorInHex;
980
+ exports$1.colorInHex = colorInHex;
981
981
  var spacing = function spacing(topY, rightX, bottom, left) {
982
982
  return [topY, rightX, bottom, left].reduce(function (acc, value) {
983
983
  var _a;
@@ -985,7 +985,7 @@ function requireHelpers() {
985
985
  return [acc, (_a = space_1.space.scale[Number(value)]) !== null && _a !== void 0 ? _a : value].join(' ');
986
986
  }, '');
987
987
  };
988
- exports.spacing = spacing;
988
+ exports$1.spacing = spacing;
989
989
  })(helpers);
990
990
  return helpers;
991
991
  }
@@ -994,7 +994,7 @@ var hasRequiredDist$4;
994
994
  function requireDist$4() {
995
995
  if (hasRequiredDist$4) return dist$4;
996
996
  hasRequiredDist$4 = 1;
997
- (function (exports) {
997
+ (function (exports$1) {
998
998
 
999
999
  var __createBinding = dist$4 && dist$4.__createBinding || (Object.create ? function (o, m, k, k2) {
1000
1000
  if (k2 === undefined) k2 = k;
@@ -1012,42 +1012,42 @@ function requireDist$4() {
1012
1012
  if (k2 === undefined) k2 = k;
1013
1013
  o[k2] = m[k];
1014
1014
  });
1015
- var __exportStar = dist$4 && dist$4.__exportStar || function (m, exports) {
1016
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
1015
+ var __exportStar = dist$4 && dist$4.__exportStar || function (m, exports$1) {
1016
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports$1, p)) __createBinding(exports$1, m, p);
1017
1017
  };
1018
- Object.defineProperty(exports, "__esModule", {
1018
+ Object.defineProperty(exports$1, "__esModule", {
1019
1019
  value: true
1020
1020
  });
1021
- exports.breakpoints = exports.space = exports.typography = exports.colors = void 0;
1021
+ exports$1.breakpoints = exports$1.space = exports$1.typography = exports$1.colors = void 0;
1022
1022
  var colors_1 = requireColors();
1023
- Object.defineProperty(exports, "colors", {
1023
+ Object.defineProperty(exports$1, "colors", {
1024
1024
  enumerable: true,
1025
1025
  get: function get() {
1026
1026
  return colors_1.colors;
1027
1027
  }
1028
1028
  });
1029
1029
  var typography_1 = requireTypography();
1030
- Object.defineProperty(exports, "typography", {
1030
+ Object.defineProperty(exports$1, "typography", {
1031
1031
  enumerable: true,
1032
1032
  get: function get() {
1033
1033
  return typography_1.typography;
1034
1034
  }
1035
1035
  });
1036
1036
  var space_1 = requireSpace();
1037
- Object.defineProperty(exports, "space", {
1037
+ Object.defineProperty(exports$1, "space", {
1038
1038
  enumerable: true,
1039
1039
  get: function get() {
1040
1040
  return space_1.space;
1041
1041
  }
1042
1042
  });
1043
1043
  var breakpoints_1 = requireBreakpoints();
1044
- Object.defineProperty(exports, "breakpoints", {
1044
+ Object.defineProperty(exports$1, "breakpoints", {
1045
1045
  enumerable: true,
1046
1046
  get: function get() {
1047
1047
  return breakpoints_1.breakpoints;
1048
1048
  }
1049
1049
  });
1050
- __exportStar(requireHelpers(), exports);
1050
+ __exportStar(requireHelpers(), exports$1);
1051
1051
  })(dist$4);
1052
1052
  return dist$4;
1053
1053
  }
@@ -1360,11 +1360,6 @@ var States = function States(_ref) {
1360
1360
  }));
1361
1361
  };
1362
1362
 
1363
- var preventNavigation = function preventNavigation(event) {
1364
- event.preventDefault();
1365
- event.returnValue = '';
1366
- };
1367
-
1368
1363
  /******************************************************************************
1369
1364
  Copyright (c) Microsoft Corporation.
1370
1365
 
@@ -5318,7 +5313,7 @@ var hasRequiredScale;
5318
5313
  function requireScale() {
5319
5314
  if (hasRequiredScale) return scale;
5320
5315
  hasRequiredScale = 1;
5321
- (function (exports) {
5316
+ (function (exports$1) {
5322
5317
 
5323
5318
  var __assign = scale && scale.__assign || function () {
5324
5319
  __assign = Object.assign || function (t) {
@@ -5338,11 +5333,11 @@ function requireScale() {
5338
5333
  }
5339
5334
  return t;
5340
5335
  };
5341
- Object.defineProperty(exports, "__esModule", {
5336
+ Object.defineProperty(exports$1, "__esModule", {
5342
5337
  value: true
5343
5338
  });
5344
- exports.scale = exports.paddingBottom = exports.factor = void 0;
5345
- exports.factor = function (_a) {
5339
+ exports$1.scale = exports$1.paddingBottom = exports$1.factor = void 0;
5340
+ exports$1.factor = function (_a) {
5346
5341
  var width = _a.width,
5347
5342
  height = _a.height,
5348
5343
  dimensions = __rest(_a, ["width", "height"]);
@@ -5350,16 +5345,16 @@ function requireScale() {
5350
5345
  if ("maxWidth" in dimensions && !("maxHeight" in dimensions)) return dimensions.maxWidth / width;
5351
5346
  return Math.min(dimensions.maxWidth / width, dimensions.maxHeight / height);
5352
5347
  };
5353
- exports.paddingBottom = function (_a) {
5348
+ exports$1.paddingBottom = function (_a) {
5354
5349
  var width = _a.width,
5355
5350
  height = _a.height;
5356
5351
  return height / width * 100.0 + "%";
5357
5352
  };
5358
- exports.scale = function (_a) {
5353
+ exports$1.scale = function (_a) {
5359
5354
  var width = _a.width,
5360
5355
  height = _a.height,
5361
5356
  dimensions = __rest(_a, ["width", "height"]);
5362
- var scale = exports.factor(__assign({
5357
+ var scale = exports$1.factor(__assign({
5363
5358
  width: width,
5364
5359
  height: height
5365
5360
  }, dimensions));
@@ -5368,7 +5363,7 @@ function requireScale() {
5368
5363
  return {
5369
5364
  width: scaledWidth,
5370
5365
  height: scaledHeight,
5371
- paddingBottom: exports.paddingBottom({
5366
+ paddingBottom: exports$1.paddingBottom({
5372
5367
  width: width,
5373
5368
  height: height
5374
5369
  }),
@@ -5383,7 +5378,7 @@ var hasRequiredDist$3;
5383
5378
  function requireDist$3() {
5384
5379
  if (hasRequiredDist$3) return dist$3;
5385
5380
  hasRequiredDist$3 = 1;
5386
- (function (exports) {
5381
+ (function (exports$1) {
5387
5382
 
5388
5383
  var __createBinding = dist$3 && dist$3.__createBinding || (Object.create ? function (o, m, k, k2) {
5389
5384
  if (k2 === undefined) k2 = k;
@@ -5397,13 +5392,13 @@ function requireDist$3() {
5397
5392
  if (k2 === undefined) k2 = k;
5398
5393
  o[k2] = m[k];
5399
5394
  });
5400
- var __exportStar = dist$3 && dist$3.__exportStar || function (m, exports) {
5401
- for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
5395
+ var __exportStar = dist$3 && dist$3.__exportStar || function (m, exports$1) {
5396
+ for (var p in m) if (p !== "default" && !exports$1.hasOwnProperty(p)) __createBinding(exports$1, m, p);
5402
5397
  };
5403
- Object.defineProperty(exports, "__esModule", {
5398
+ Object.defineProperty(exports$1, "__esModule", {
5404
5399
  value: true
5405
5400
  });
5406
- __exportStar(requireScale(), exports);
5401
+ __exportStar(requireScale(), exports$1);
5407
5402
  })(dist$3);
5408
5403
  return dist$3;
5409
5404
  }
@@ -5518,14 +5513,18 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
5518
5513
  };
5519
5514
 
5520
5515
  var _excluded$B = ["className", "styleless", "disabled"];
5516
+
5517
+ // Define minimal LinkProps that work with both v5 and v7
5518
+ // Using Omit to remove conflicting HTML attributes, then add router-specific props
5519
+
5521
5520
  var isLink = function isLink(props) {
5522
5521
  return 'to' in props;
5523
5522
  };
5524
5523
  var isAnchor = function isAnchor(props) {
5525
- return 'href' in props;
5524
+ return 'href' in props && !('to' in props);
5526
5525
  };
5527
5526
  var isButton = function isButton(props) {
5528
- return !('href' in props);
5527
+ return !('href' in props) && !('to' in props);
5529
5528
  };
5530
5529
  var Clickable = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
5531
5530
  var className = _ref.className,
@@ -5533,16 +5532,23 @@ var Clickable = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
5533
5532
  styleless = _ref$styleless === void 0 ? false : _ref$styleless,
5534
5533
  disabled = _ref.disabled,
5535
5534
  rest = _objectWithoutProperties(_ref, _excluded$B);
5535
+ var baseClassName = classNames({
5536
+ Clickable: !styleless,
5537
+ 'Clickable--disabled': disabled
5538
+ }, className);
5539
+ if (isLink(rest)) {
5540
+ // Link doesn't support disabled prop, but we handle it via CSS class
5541
+ return /*#__PURE__*/React__default.createElement(Link, _extends$1({}, rest, {
5542
+ className: baseClassName,
5543
+ ref: ref
5544
+ }));
5545
+ }
5546
+
5547
+ // For anchor and button, include the disabled prop
5536
5548
  var props = _objectSpread2(_objectSpread2({}, rest), {}, {
5537
- className: classNames({
5538
- Clickable: !styleless,
5539
- 'Clickable--disabled': disabled
5540
- }, className),
5549
+ className: baseClassName,
5541
5550
  disabled: disabled
5542
5551
  });
5543
- if (isLink(props)) return /*#__PURE__*/React__default.createElement(Link, _extends$1({}, props, {
5544
- ref: ref
5545
- }));
5546
5552
  if (isAnchor(props)) return /*#__PURE__*/React__default.createElement("a", _extends$1({}, props, {
5547
5553
  ref: ref
5548
5554
  }));
@@ -5942,7 +5948,7 @@ function _has(prop, obj) {
5942
5948
  }
5943
5949
 
5944
5950
  // Based on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
5945
- function _objectIs(a, b) {
5951
+ function _objectIs$1(a, b) {
5946
5952
  // SameValue algorithm
5947
5953
  if (a === b) {
5948
5954
  // Steps 1-5, 7-10
@@ -5953,7 +5959,7 @@ function _objectIs(a, b) {
5953
5959
  return a !== a && b !== b;
5954
5960
  }
5955
5961
  }
5956
- var _objectIs$1 = typeof Object.is === 'function' ? Object.is : _objectIs;
5962
+ var _objectIs = typeof Object.is === 'function' ? Object.is : _objectIs$1;
5957
5963
 
5958
5964
  var toString$1 = Object.prototype.toString;
5959
5965
  var _isArguments = /*#__PURE__*/function () {
@@ -6046,6 +6052,8 @@ var keys = typeof Object.keys === 'function' && !hasArgsEnumBug ? /*#__PURE__*/_
6046
6052
  * @example
6047
6053
  *
6048
6054
  * R.type({}); //=> "Object"
6055
+ * R.type(new Map); //=> "Map"
6056
+ * R.type(new Set); //=> "Set"
6049
6057
  * R.type(1); //=> "Number"
6050
6058
  * R.type(false); //=> "Boolean"
6051
6059
  * R.type('s'); //=> "String"
@@ -6085,7 +6093,7 @@ function _uniqContentEquals(aIterator, bIterator, stackA, stackB) {
6085
6093
  }, b, a);
6086
6094
  }
6087
6095
  function _equals(a, b, stackA, stackB) {
6088
- if (_objectIs$1(a, b)) {
6096
+ if (_objectIs(a, b)) {
6089
6097
  return true;
6090
6098
  }
6091
6099
  var typeA = type(a);
@@ -6109,12 +6117,12 @@ function _equals(a, b, stackA, stackB) {
6109
6117
  case 'Boolean':
6110
6118
  case 'Number':
6111
6119
  case 'String':
6112
- if (!(_typeof$1(a) === _typeof$1(b) && _objectIs$1(a.valueOf(), b.valueOf()))) {
6120
+ if (!(_typeof$1(a) === _typeof$1(b) && _objectIs(a.valueOf(), b.valueOf()))) {
6113
6121
  return false;
6114
6122
  }
6115
6123
  break;
6116
6124
  case 'Date':
6117
- if (!_objectIs$1(a.valueOf(), b.valueOf())) {
6125
+ if (!_objectIs(a.valueOf(), b.valueOf())) {
6118
6126
  return false;
6119
6127
  }
6120
6128
  break;
@@ -7196,16 +7204,17 @@ var omit = /*#__PURE__*/_curry2(function omit(names, obj) {
7196
7204
  * @example
7197
7205
  *
7198
7206
  * R.range(1, 5); //=> [1, 2, 3, 4]
7199
- * R.range(50, 53); //=> [50, 51, 52]
7207
+ * R.range(1, 5.5); //=> [1, 2, 3, 4, 5]
7208
+ * R.range(1.5, 5.5); //=> [1.5, 2.5, 3.5, 4.5]
7200
7209
  */
7201
7210
  var range = /*#__PURE__*/_curry2(function range(from, to) {
7202
7211
  if (!(_isNumber(from) && _isNumber(to))) {
7203
7212
  throw new TypeError('Both arguments to range must be numbers');
7204
7213
  }
7205
- var result = Array(from < to ? to - from : 0);
7206
- var finish = from < 0 ? to + Math.abs(from) : to - from;
7214
+ var length = from < to ? Math.ceil(to - from) : 0;
7215
+ var result = Array(length);
7207
7216
  var idx = 0;
7208
- while (idx < finish) {
7217
+ while (idx < length) {
7209
7218
  result[idx] = idx + from;
7210
7219
  idx += 1;
7211
7220
  }
@@ -10006,12 +10015,12 @@ var hasRequiredDist$1;
10006
10015
  function requireDist$1() {
10007
10016
  if (hasRequiredDist$1) return dist$1;
10008
10017
  hasRequiredDist$1 = 1;
10009
- (function (exports) {
10018
+ (function (exports$1) {
10010
10019
 
10011
10020
  function __export(m) {
10012
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
10021
+ for (var p in m) if (!exports$1.hasOwnProperty(p)) exports$1[p] = m[p];
10013
10022
  }
10014
- Object.defineProperty(exports, "__esModule", {
10023
+ Object.defineProperty(exports$1, "__esModule", {
10015
10024
  value: true
10016
10025
  });
10017
10026
  __export(requireMapCursorToMax());
@@ -11328,12 +11337,12 @@ var hasRequiredDist;
11328
11337
  function requireDist() {
11329
11338
  if (hasRequiredDist) return dist;
11330
11339
  hasRequiredDist = 1;
11331
- (function (exports) {
11340
+ (function (exports$1) {
11332
11341
 
11333
11342
  function __export(m) {
11334
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
11343
+ for (var p in m) if (!exports$1.hasOwnProperty(p)) exports$1[p] = m[p];
11335
11344
  }
11336
- Object.defineProperty(exports, "__esModule", {
11345
+ Object.defineProperty(exports$1, "__esModule", {
11337
11346
  value: true
11338
11347
  });
11339
11348
  __export(requireUseCursor());
@@ -12009,30 +12018,6 @@ var LoadingShapesLavenderBlue = function LoadingShapesLavenderBlue() {
12009
12018
  }));
12010
12019
  };
12011
12020
 
12012
- var usePreventNavigation = function usePreventNavigation() {
12013
- var enabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
12014
- useEffect(function () {
12015
- if (enabled) {
12016
- window.addEventListener('beforeunload', preventNavigation);
12017
- return function () {
12018
- return window.removeEventListener('beforeunload', preventNavigation);
12019
- };
12020
- }
12021
- }, [enabled]);
12022
- };
12023
-
12024
- var NavigationPreventer = function NavigationPreventer(_ref) {
12025
- var _ref$enabled = _ref.enabled,
12026
- enabled = _ref$enabled === void 0 ? false : _ref$enabled,
12027
- _ref$message = _ref.message,
12028
- message = _ref$message === void 0 ? 'Changes that you made may not be saved.' : _ref$message;
12029
- usePreventNavigation(enabled);
12030
- return /*#__PURE__*/React__default.createElement(Prompt, {
12031
- when: enabled,
12032
- message: message
12033
- });
12034
- };
12035
-
12036
12021
  var __assign$1 = undefined && undefined.__assign || function () {
12037
12022
  __assign$1 = Object.assign || function (t) {
12038
12023
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12513,35 +12498,23 @@ var SlidingPane = function SlidingPane(_ref) {
12513
12498
  }, children))));
12514
12499
  };
12515
12500
 
12516
- var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className"];
12517
- var Tabs = function Tabs(_ref) {
12518
- var tabs = _ref.tabs,
12519
- onTabClicked = _ref.onTabClicked,
12520
- defaultActiveTab = _ref.defaultActiveTab,
12521
- activeTab = _ref.activeTab,
12522
- className = _ref.className,
12523
- rest = _objectWithoutProperties(_ref, _excluded$4);
12524
- var _useState = useState(activeTab || defaultActiveTab || tabs[0].name),
12525
- _useState2 = _slicedToArray(_useState, 2),
12526
- activePanel = _useState2[0],
12527
- setActivePanel = _useState2[1];
12528
- var handleTabClick = function handleTabClick(tabName) {
12529
- if (!activeTab) setActivePanel(tabName);
12530
- if (onTabClicked) onTabClicked(tabName);
12531
- };
12532
- useEffect(function () {
12533
- if (activeTab) setActivePanel(activeTab);
12534
- }, [activeTab]);
12535
- return /*#__PURE__*/React__default.createElement("div", _extends$1({
12536
- className: classNames('Tabs', className)
12537
- }, rest), /*#__PURE__*/React__default.createElement(TabList, {
12538
- tabs: tabs,
12539
- onTabSelected: handleTabClick,
12540
- activePanel: activePanel
12541
- }), /*#__PURE__*/React__default.createElement(TabPanels, {
12542
- panels: tabs,
12543
- activePanel: activePanel
12544
- }));
12501
+ var Tab = function Tab(_ref) {
12502
+ var tab = _ref.tab,
12503
+ onTabChosen = _ref.onTabChosen,
12504
+ activeTab = _ref.activeTab;
12505
+ var handleClick = useCallback(function () {
12506
+ return onTabChosen(tab.name);
12507
+ }, [tab.name, onTabChosen]);
12508
+ var handleKeyDown = useCallback(function (event) {
12509
+ if (event.key === 'Enter') {
12510
+ handleClick();
12511
+ }
12512
+ }, [handleClick]);
12513
+ return /*#__PURE__*/React__default.createElement(Clickable, {
12514
+ className: "Tab ".concat(activeTab === tab.name ? 'Tab--active' : ''),
12515
+ onClick: handleClick,
12516
+ onKeyDown: handleKeyDown
12517
+ }, tab.title);
12545
12518
  };
12546
12519
 
12547
12520
  var TabList = function TabList(_ref) {
@@ -12560,23 +12533,11 @@ var TabList = function TabList(_ref) {
12560
12533
  }));
12561
12534
  };
12562
12535
 
12563
- var Tab = function Tab(_ref) {
12564
- var tab = _ref.tab,
12565
- onTabChosen = _ref.onTabChosen,
12566
- activeTab = _ref.activeTab;
12567
- var handleClick = useCallback(function () {
12568
- return onTabChosen(tab.name);
12569
- }, [tab.name, onTabChosen]);
12570
- var handleKeyDown = useCallback(function (event) {
12571
- if (event.key === 'Enter') {
12572
- handleClick();
12573
- }
12574
- }, [handleClick]);
12575
- return /*#__PURE__*/React__default.createElement(Clickable, {
12576
- className: "Tab ".concat(activeTab === tab.name ? 'Tab--active' : ''),
12577
- onClick: handleClick,
12578
- onKeyDown: handleKeyDown
12579
- }, tab.title);
12536
+ var TabPanel = function TabPanel(_ref) {
12537
+ var children = _ref.children;
12538
+ return /*#__PURE__*/React__default.createElement("div", {
12539
+ className: "TabPanel"
12540
+ }, children);
12580
12541
  };
12581
12542
 
12582
12543
  var TabPanels = function TabPanels(_ref) {
@@ -12593,11 +12554,35 @@ var TabPanels = function TabPanels(_ref) {
12593
12554
  }));
12594
12555
  };
12595
12556
 
12596
- var TabPanel = function TabPanel(_ref) {
12597
- var children = _ref.children;
12598
- return /*#__PURE__*/React__default.createElement("div", {
12599
- className: "TabPanel"
12600
- }, children);
12557
+ var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className"];
12558
+ var Tabs = function Tabs(_ref) {
12559
+ var tabs = _ref.tabs,
12560
+ onTabClicked = _ref.onTabClicked,
12561
+ defaultActiveTab = _ref.defaultActiveTab,
12562
+ activeTab = _ref.activeTab,
12563
+ className = _ref.className,
12564
+ rest = _objectWithoutProperties(_ref, _excluded$4);
12565
+ var _useState = useState(activeTab || defaultActiveTab || tabs[0].name),
12566
+ _useState2 = _slicedToArray(_useState, 2),
12567
+ activePanel = _useState2[0],
12568
+ setActivePanel = _useState2[1];
12569
+ var handleTabClick = function handleTabClick(tabName) {
12570
+ if (!activeTab) setActivePanel(tabName);
12571
+ if (onTabClicked) onTabClicked(tabName);
12572
+ };
12573
+ useEffect(function () {
12574
+ if (activeTab) setActivePanel(activeTab);
12575
+ }, [activeTab]);
12576
+ return /*#__PURE__*/React__default.createElement("div", _extends$1({
12577
+ className: classNames('Tabs', className)
12578
+ }, rest), /*#__PURE__*/React__default.createElement(TabList, {
12579
+ tabs: tabs,
12580
+ onTabSelected: handleTabClick,
12581
+ activePanel: activePanel
12582
+ }), /*#__PURE__*/React__default.createElement(TabPanels, {
12583
+ panels: tabs,
12584
+ activePanel: activePanel
12585
+ }));
12601
12586
  };
12602
12587
 
12603
12588
  var _excluded$3 = ["className", "disabled", "onRemove", "children"];
@@ -12689,4 +12674,4 @@ var Utilities = {
12689
12674
  States: States
12690
12675
  };
12691
12676
 
12692
- export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NavigationPreventer, NoLineDivider, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useKeyboardListNavigation, usePreventNavigation, useUpdateEffect };
12677
+ export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useKeyboardListNavigation, useUpdateEffect };