@moda/om 21.5.2 → 21.6.0
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.cjs.js +80 -97
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +82 -97
- package/dist/index.esm.js.map +1 -1
- package/dist/src/components/Clickable/Clickable.d.ts +10 -2
- package/dist/src/components/Tabs/TabList.d.ts +1 -1
- package/dist/src/components/Tabs/TabPanels.d.ts +1 -1
- package/dist/src/components/Tabs/Tabs.d.ts +1 -1
- package/dist/src/components/index.d.ts +0 -1
- package/dist/src/utilities/index.d.ts +0 -1
- package/dist/styles.css +1 -1
- package/package.json +12 -7
- package/src/components/Clickable/Clickable.tsx +28 -13
- package/src/components/Tabs/TabList.tsx +1 -1
- package/src/components/Tabs/TabPanels.tsx +2 -1
- package/src/components/Tabs/Tabs.tsx +3 -1
- package/src/components/index.ts +0 -1
- package/src/utilities/index.ts +0 -1
- package/dist/src/components/NavigationPreventer/NavigationPreventer.d.ts +0 -8
- package/dist/src/components/NavigationPreventer/index.d.ts +0 -2
- package/dist/src/components/NavigationPreventer/usePreventNavigation.d.ts +0 -1
- package/dist/src/utilities/preventNavigation.d.ts +0 -1
- package/src/components/NavigationPreventer/NavigationPreventer.tsx +0 -17
- package/src/components/NavigationPreventer/index.ts +0 -2
- package/src/components/NavigationPreventer/usePreventNavigation.ts +0 -12
- package/src/utilities/preventNavigation.ts +0 -4
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
|
|
3
|
+
import { Link } from 'react-router-dom';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
|
|
6
6
|
function getDefaultExportFromCjs (x) {
|
|
@@ -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(
|
|
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(
|
|
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)"
|
|
@@ -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
|
|
|
@@ -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:
|
|
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
|
}));
|
|
@@ -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"
|
|
@@ -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(
|
|
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
|
|
7206
|
-
var
|
|
7214
|
+
var length = from < to ? Math.ceil(to - from) : 0;
|
|
7215
|
+
var result = Array(length);
|
|
7207
7216
|
var idx = 0;
|
|
7208
|
-
while (idx <
|
|
7217
|
+
while (idx < length) {
|
|
7209
7218
|
result[idx] = idx + from;
|
|
7210
7219
|
idx += 1;
|
|
7211
7220
|
}
|
|
@@ -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
|
|
12517
|
-
var
|
|
12518
|
-
|
|
12519
|
-
|
|
12520
|
-
|
|
12521
|
-
|
|
12522
|
-
|
|
12523
|
-
|
|
12524
|
-
|
|
12525
|
-
|
|
12526
|
-
|
|
12527
|
-
|
|
12528
|
-
|
|
12529
|
-
|
|
12530
|
-
|
|
12531
|
-
|
|
12532
|
-
|
|
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
|
|
12564
|
-
var
|
|
12565
|
-
|
|
12566
|
-
|
|
12567
|
-
|
|
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
|
|
12597
|
-
|
|
12598
|
-
|
|
12599
|
-
|
|
12600
|
-
|
|
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,
|
|
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 };
|