@moda/om 21.7.1 → 21.8.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 +50 -33
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +50 -33
- package/dist/index.esm.js.map +1 -1
- package/dist/src/components/Field/Field.d.ts +1 -1
- package/dist/src/components/Field/Field.stories.d.ts +2 -0
- package/dist/src/components/Tabs/TabList.d.ts +1 -0
- package/dist/src/components/Tabs/Tabs.d.ts +1 -0
- package/package.json +52 -52
- package/src/components/Field/Field.stories.tsx +42 -1
- package/src/components/Field/Field.tsx +14 -2
- package/src/components/Tabs/TabList.tsx +15 -9
- package/src/components/Tabs/Tabs.tsx +8 -1
- package/src/components/TextInput/TextInput.tsx +1 -0
package/dist/index.cjs.js
CHANGED
|
@@ -356,18 +356,18 @@ requireFocusVisible();
|
|
|
356
356
|
|
|
357
357
|
var dist$4 = {};
|
|
358
358
|
|
|
359
|
-
var colors = {};
|
|
359
|
+
var colors$1 = {};
|
|
360
360
|
|
|
361
361
|
var hasRequiredColors;
|
|
362
362
|
function requireColors() {
|
|
363
|
-
if (hasRequiredColors) return colors;
|
|
363
|
+
if (hasRequiredColors) return colors$1;
|
|
364
364
|
hasRequiredColors = 1;
|
|
365
|
-
Object.defineProperty(colors, "__esModule", {
|
|
365
|
+
Object.defineProperty(colors$1, "__esModule", {
|
|
366
366
|
value: true
|
|
367
367
|
});
|
|
368
|
-
colors.colors = void 0;
|
|
368
|
+
colors$1.colors = void 0;
|
|
369
369
|
// THIS FILE IS AUTO-GENERATED. DO NOT EDIT.
|
|
370
|
-
colors.colors = {
|
|
370
|
+
colors$1.colors = {
|
|
371
371
|
"all": {
|
|
372
372
|
"coal": "rgb(0, 0, 0)",
|
|
373
373
|
"ink": "rgb(25, 26, 27)",
|
|
@@ -452,7 +452,7 @@ function requireColors() {
|
|
|
452
452
|
"silver": "rgb(217, 217, 217)"
|
|
453
453
|
}
|
|
454
454
|
};
|
|
455
|
-
return colors;
|
|
455
|
+
return colors$1;
|
|
456
456
|
}
|
|
457
457
|
|
|
458
458
|
var typography = {};
|
|
@@ -594,7 +594,7 @@ function requireBreakpoints() {
|
|
|
594
594
|
|
|
595
595
|
var helpers = {};
|
|
596
596
|
|
|
597
|
-
var
|
|
597
|
+
var colors = {
|
|
598
598
|
aliceblue: [240, 248, 255],
|
|
599
599
|
antiquewhite: [250, 235, 215],
|
|
600
600
|
aqua: [0, 255, 255],
|
|
@@ -744,6 +744,8 @@ var colorNames = {
|
|
|
744
744
|
yellow: [255, 255, 0],
|
|
745
745
|
yellowgreen: [154, 205, 50]
|
|
746
746
|
};
|
|
747
|
+
for (var key in colors) Object.freeze(colors[key]);
|
|
748
|
+
var colorNames = Object.freeze(colors);
|
|
747
749
|
|
|
748
750
|
var reverseNames = Object.create(null);
|
|
749
751
|
|
|
@@ -795,8 +797,8 @@ cs.get.rgb = function (string) {
|
|
|
795
797
|
}
|
|
796
798
|
var abbr = /^#([a-f\d]{3,4})$/i;
|
|
797
799
|
var hex = /^#([a-f\d]{6})([a-f\d]{2})?$/i;
|
|
798
|
-
var rgba = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|/]\s*([+-]?
|
|
799
|
-
var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)
|
|
800
|
+
var rgba = /^rgba?\(\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)(?=[\s,])\s*(?:,\s*)?([+-]?(?:\d*\.)?\d+(?:e\d+)?)\s*(?:[\s,|/]\s*([+-]?(?:\d*\.)?\d+(?:e\d+)?)(%?)\s*)?\)$/i;
|
|
801
|
+
var per = /^rgba?\(\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[\s,|/]\s*([+-]?[\d.]+)(%?)\s*)?\)$/i;
|
|
800
802
|
var keyword = /^(\w+)$/;
|
|
801
803
|
var rgb = [0, 0, 0, 1];
|
|
802
804
|
var match;
|
|
@@ -824,7 +826,7 @@ cs.get.rgb = function (string) {
|
|
|
824
826
|
}
|
|
825
827
|
} else if (match = string.match(rgba)) {
|
|
826
828
|
for (i = 0; i < 3; i++) {
|
|
827
|
-
rgb[i] = Number.
|
|
829
|
+
rgb[i] = Number.parseFloat(match[i + 1]);
|
|
828
830
|
}
|
|
829
831
|
if (match[4]) {
|
|
830
832
|
rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
|
|
@@ -836,14 +838,16 @@ cs.get.rgb = function (string) {
|
|
|
836
838
|
if (match[4]) {
|
|
837
839
|
rgb[3] = match[5] ? Number.parseFloat(match[4]) * 0.01 : Number.parseFloat(match[4]);
|
|
838
840
|
}
|
|
839
|
-
} else if (match = string.match(keyword)) {
|
|
841
|
+
} else if (match = string.toLowerCase().match(keyword)) {
|
|
840
842
|
if (match[1] === 'transparent') {
|
|
841
843
|
return [0, 0, 0, 0];
|
|
842
844
|
}
|
|
843
845
|
if (!Object.hasOwn(colorNames, match[1])) {
|
|
844
846
|
return null;
|
|
845
847
|
}
|
|
846
|
-
|
|
848
|
+
|
|
849
|
+
// eslint-disable-next-line unicorn/prefer-spread
|
|
850
|
+
rgb = colorNames[match[1]].slice();
|
|
847
851
|
rgb[3] = 1;
|
|
848
852
|
return rgb;
|
|
849
853
|
} else {
|
|
@@ -859,7 +863,7 @@ cs.get.hsl = function (string) {
|
|
|
859
863
|
if (!string) {
|
|
860
864
|
return null;
|
|
861
865
|
}
|
|
862
|
-
var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[
|
|
866
|
+
var hsl = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d.]+)%\s*,?\s*([+-]?[\d.]+)%\s*(?:[,|/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
|
|
863
867
|
var match = string.match(hsl);
|
|
864
868
|
if (match) {
|
|
865
869
|
var alpha = Number.parseFloat(match[4]);
|
|
@@ -875,7 +879,7 @@ cs.get.hwb = function (string) {
|
|
|
875
879
|
if (!string) {
|
|
876
880
|
return null;
|
|
877
881
|
}
|
|
878
|
-
var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s
|
|
882
|
+
var hwb = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*[\s,]\s*([+-]?[\d.]+)%\s*[\s,]\s*([+-]?[\d.]+)%\s*(?:[\s,]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:e[+-]?\d+)?)\s*)?\)$/i;
|
|
879
883
|
var match = string.match(hwb);
|
|
880
884
|
if (match) {
|
|
881
885
|
var alpha = Number.parseFloat(match[4]);
|
|
@@ -3116,8 +3120,6 @@ var extractRef$2 = function extractRef(ref) {
|
|
|
3116
3120
|
var effectCar = createSidecarMedium();
|
|
3117
3121
|
var focusHiddenMarker = 'data-focus-on-hidden';
|
|
3118
3122
|
|
|
3119
|
-
__assign$a({}, RemoveScroll.classNames);
|
|
3120
|
-
|
|
3121
3123
|
var PREVENT_SCROLL = {
|
|
3122
3124
|
preventScroll: true
|
|
3123
3125
|
};
|
|
@@ -4890,6 +4892,13 @@ function RemoveScrollSideCar(props) {
|
|
|
4890
4892
|
if ('touches' in event && moveDirection === 'h' && target.type === 'range') {
|
|
4891
4893
|
return false;
|
|
4892
4894
|
}
|
|
4895
|
+
// allow drag selection (iOS); check if selection's anchorNode is the same as target or contains target
|
|
4896
|
+
var selection = window.getSelection();
|
|
4897
|
+
var anchorNode = selection && selection.anchorNode;
|
|
4898
|
+
var isTouchingSelection = anchorNode ? anchorNode === target || anchorNode.contains(target) : false;
|
|
4899
|
+
if (isTouchingSelection) {
|
|
4900
|
+
return false;
|
|
4901
|
+
}
|
|
4893
4902
|
var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target);
|
|
4894
4903
|
if (!canBeScrolledInMainDirection) {
|
|
4895
4904
|
return true;
|
|
@@ -9566,14 +9575,13 @@ function requireClone() {
|
|
|
9566
9575
|
Object.defineProperty(clone, "__esModule", {
|
|
9567
9576
|
value: true
|
|
9568
9577
|
});
|
|
9569
|
-
clone.clone =
|
|
9578
|
+
clone.clone = clone$1;
|
|
9570
9579
|
function clone$1(originalObject) {
|
|
9571
9580
|
if (!originalObject) {
|
|
9572
9581
|
return null;
|
|
9573
9582
|
}
|
|
9574
9583
|
return JSON.parse(JSON.stringify(originalObject));
|
|
9575
9584
|
}
|
|
9576
|
-
clone.clone = clone$1;
|
|
9577
9585
|
return clone;
|
|
9578
9586
|
}
|
|
9579
9587
|
|
|
@@ -9589,7 +9597,7 @@ function requireMatches() {
|
|
|
9589
9597
|
Object.defineProperty(matches, "__esModule", {
|
|
9590
9598
|
value: true
|
|
9591
9599
|
});
|
|
9592
|
-
matches.matches =
|
|
9600
|
+
matches.matches = matches$1;
|
|
9593
9601
|
function matchesRange(cardNumber, min, max) {
|
|
9594
9602
|
var maxLengthToCheck = String(min).length;
|
|
9595
9603
|
var substr = cardNumber.substr(0, maxLengthToCheck);
|
|
@@ -9608,7 +9616,6 @@ function requireMatches() {
|
|
|
9608
9616
|
}
|
|
9609
9617
|
return matchesPattern(cardNumber, pattern);
|
|
9610
9618
|
}
|
|
9611
|
-
matches.matches = matches$1;
|
|
9612
9619
|
return matches;
|
|
9613
9620
|
}
|
|
9614
9621
|
|
|
@@ -9619,7 +9626,7 @@ function requireAddMatchingCardsToResults() {
|
|
|
9619
9626
|
Object.defineProperty(addMatchingCardsToResults, "__esModule", {
|
|
9620
9627
|
value: true
|
|
9621
9628
|
});
|
|
9622
|
-
addMatchingCardsToResults.addMatchingCardsToResults =
|
|
9629
|
+
addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
|
|
9623
9630
|
var clone_1 = requireClone();
|
|
9624
9631
|
var matches_1 = requireMatches();
|
|
9625
9632
|
function addMatchingCardsToResults$1(cardNumber, cardConfiguration, results) {
|
|
@@ -9642,7 +9649,6 @@ function requireAddMatchingCardsToResults() {
|
|
|
9642
9649
|
break;
|
|
9643
9650
|
}
|
|
9644
9651
|
}
|
|
9645
|
-
addMatchingCardsToResults.addMatchingCardsToResults = addMatchingCardsToResults$1;
|
|
9646
9652
|
return addMatchingCardsToResults;
|
|
9647
9653
|
}
|
|
9648
9654
|
|
|
@@ -9655,11 +9661,10 @@ function requireIsValidInputType() {
|
|
|
9655
9661
|
Object.defineProperty(isValidInputType, "__esModule", {
|
|
9656
9662
|
value: true
|
|
9657
9663
|
});
|
|
9658
|
-
isValidInputType.isValidInputType =
|
|
9664
|
+
isValidInputType.isValidInputType = isValidInputType$1;
|
|
9659
9665
|
function isValidInputType$1(cardNumber) {
|
|
9660
9666
|
return typeof cardNumber === "string" || cardNumber instanceof String;
|
|
9661
9667
|
}
|
|
9662
|
-
isValidInputType.isValidInputType = isValidInputType$1;
|
|
9663
9668
|
return isValidInputType;
|
|
9664
9669
|
}
|
|
9665
9670
|
|
|
@@ -9672,7 +9677,7 @@ function requireFindBestMatch() {
|
|
|
9672
9677
|
Object.defineProperty(findBestMatch, "__esModule", {
|
|
9673
9678
|
value: true
|
|
9674
9679
|
});
|
|
9675
|
-
findBestMatch.findBestMatch =
|
|
9680
|
+
findBestMatch.findBestMatch = findBestMatch$1;
|
|
9676
9681
|
function hasEnoughResultsToDetermineBestMatch(results) {
|
|
9677
9682
|
var numberOfResultsWithMaxStrengthProperty = results.filter(function (result) {
|
|
9678
9683
|
return result.matchStrength;
|
|
@@ -9702,7 +9707,6 @@ function requireFindBestMatch() {
|
|
|
9702
9707
|
return bestMatch;
|
|
9703
9708
|
});
|
|
9704
9709
|
}
|
|
9705
|
-
findBestMatch.findBestMatch = findBestMatch$1;
|
|
9706
9710
|
return findBestMatch;
|
|
9707
9711
|
}
|
|
9708
9712
|
|
|
@@ -9896,6 +9900,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
9896
9900
|
disabled: disabled,
|
|
9897
9901
|
placeholder: placeholder,
|
|
9898
9902
|
"aria-label": label || placeholder,
|
|
9903
|
+
"aria-invalid": error ? true : undefined,
|
|
9899
9904
|
ref: ref,
|
|
9900
9905
|
onChange: function onChange(event) {
|
|
9901
9906
|
_onChange === null || _onChange === void 0 || _onChange(event.target.value);
|
|
@@ -11179,11 +11184,16 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
11179
11184
|
label = _ref.label,
|
|
11180
11185
|
placeholder = _ref.placeholder,
|
|
11181
11186
|
rest = _objectWithoutProperties(_ref, _excluded$h);
|
|
11187
|
+
var id = React.useId();
|
|
11188
|
+
var errorId = "".concat(id, "-error");
|
|
11182
11189
|
var fieldContextValue = React.useMemo(function () {
|
|
11183
11190
|
return {
|
|
11184
11191
|
displaysError: Boolean(error)
|
|
11185
11192
|
};
|
|
11186
11193
|
}, [error]);
|
|
11194
|
+
|
|
11195
|
+
// Combine any existing aria-describedby with our error ID
|
|
11196
|
+
var ariaDescribedBy = [rest['aria-describedby'], error ? errorId : null].filter(Boolean).join(' ') || undefined;
|
|
11187
11197
|
return /*#__PURE__*/React.createElement(FormControlContext.Provider, {
|
|
11188
11198
|
value: fieldContextValue
|
|
11189
11199
|
}, /*#__PURE__*/React.createElement("label", {
|
|
@@ -11197,18 +11207,22 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
11197
11207
|
error: error,
|
|
11198
11208
|
placeholder: placeholder,
|
|
11199
11209
|
label: label,
|
|
11200
|
-
shiftIconLeftwards: error && children.type === Select
|
|
11210
|
+
shiftIconLeftwards: error && children.type === Select,
|
|
11211
|
+
'aria-describedby': ariaDescribedBy
|
|
11201
11212
|
}, rest), children.props)), error && /*#__PURE__*/React.createElement("span", {
|
|
11202
11213
|
className: "Field__icon"
|
|
11203
11214
|
}, /*#__PURE__*/React.createElement(Warning16, null))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextInput, _extends$1({
|
|
11204
11215
|
ref: ref,
|
|
11205
11216
|
placeholder: placeholder,
|
|
11206
11217
|
label: label,
|
|
11207
|
-
error: error
|
|
11218
|
+
error: error,
|
|
11219
|
+
"aria-describedby": ariaDescribedBy
|
|
11208
11220
|
}, rest)), error && /*#__PURE__*/React.createElement("span", {
|
|
11209
11221
|
className: "Field__icon"
|
|
11210
11222
|
}, /*#__PURE__*/React.createElement(Warning16, null)))), error && /*#__PURE__*/React.createElement("span", {
|
|
11211
|
-
|
|
11223
|
+
id: errorId,
|
|
11224
|
+
className: "Field__error",
|
|
11225
|
+
role: "alert"
|
|
11212
11226
|
}, error)));
|
|
11213
11227
|
});
|
|
11214
11228
|
Field.displayName = 'Field';
|
|
@@ -12665,9 +12679,10 @@ var Tab = function Tab(_ref) {
|
|
|
12665
12679
|
var TabList = function TabList(_ref) {
|
|
12666
12680
|
var tabs = _ref.tabs,
|
|
12667
12681
|
onTabSelected = _ref.onTabSelected,
|
|
12668
|
-
activePanel = _ref.activePanel
|
|
12682
|
+
activePanel = _ref.activePanel,
|
|
12683
|
+
className = _ref.className;
|
|
12669
12684
|
return /*#__PURE__*/React.createElement("div", {
|
|
12670
|
-
className:
|
|
12685
|
+
className: classNames('TabList', className)
|
|
12671
12686
|
}, tabs.map(function (tab) {
|
|
12672
12687
|
return /*#__PURE__*/React.createElement(Tab, {
|
|
12673
12688
|
key: tab.name,
|
|
@@ -12699,13 +12714,14 @@ var TabPanels = function TabPanels(_ref) {
|
|
|
12699
12714
|
}));
|
|
12700
12715
|
};
|
|
12701
12716
|
|
|
12702
|
-
var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className"];
|
|
12717
|
+
var _excluded$4 = ["tabs", "onTabClicked", "defaultActiveTab", "activeTab", "className", "tabListClassName"];
|
|
12703
12718
|
var Tabs = function Tabs(_ref) {
|
|
12704
12719
|
var tabs = _ref.tabs,
|
|
12705
12720
|
onTabClicked = _ref.onTabClicked,
|
|
12706
12721
|
defaultActiveTab = _ref.defaultActiveTab,
|
|
12707
12722
|
activeTab = _ref.activeTab,
|
|
12708
12723
|
className = _ref.className,
|
|
12724
|
+
tabListClassName = _ref.tabListClassName,
|
|
12709
12725
|
rest = _objectWithoutProperties(_ref, _excluded$4);
|
|
12710
12726
|
var _useState = React.useState(activeTab || defaultActiveTab || tabs[0].name),
|
|
12711
12727
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -12723,7 +12739,8 @@ var Tabs = function Tabs(_ref) {
|
|
|
12723
12739
|
}, rest), /*#__PURE__*/React.createElement(TabList, {
|
|
12724
12740
|
tabs: tabs,
|
|
12725
12741
|
onTabSelected: handleTabClick,
|
|
12726
|
-
activePanel: activePanel
|
|
12742
|
+
activePanel: activePanel,
|
|
12743
|
+
className: tabListClassName
|
|
12727
12744
|
}), /*#__PURE__*/React.createElement(TabPanels, {
|
|
12728
12745
|
panels: tabs,
|
|
12729
12746
|
activePanel: activePanel
|