@carbon/react 1.19.0 → 1.20.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/es/_virtual/_commonjsHelpers.js +15 -2
- package/es/_virtual/index.js +6 -2
- package/es/_virtual/rangePlugin.js +6 -2
- package/es/components/ContainedList/ContainedList.js +8 -1
- package/es/components/DataTable/TableHeader.js +1 -3
- package/es/components/DatePicker/DatePicker.js +14 -3
- package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js +42 -0
- package/es/components/FluidNumberInput/FluidNumberInput.js +138 -0
- package/es/components/FluidSearch/FluidSearch.Skeleton.js +42 -0
- package/es/components/FluidSearch/FluidSearch.js +114 -0
- package/es/components/NumberInput/NumberInput.js +38 -20
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +86 -125
- package/es/components/ProgressBar/ProgressBar.js +11 -4
- package/es/components/Search/Search.js +8 -2
- package/es/components/SkeletonText/SkeletonText.js +40 -39
- package/es/components/Slider/Slider.js +16 -26
- package/es/components/TextArea/TextArea.js +11 -4
- package/es/components/Tile/Tile.js +7 -5
- package/es/components/TimePickerSelect/TimePickerSelect.js +57 -69
- package/es/components/TimePickerSelect/index.js +2 -3
- package/es/index.js +4 -0
- package/es/node_modules/flatpickr/dist/l10n/index.js +3 -3
- package/es/node_modules/flatpickr/dist/plugins/rangePlugin.js +2 -2
- package/es/node_modules/use-resize-observer/polyfilled.js +0 -1
- package/lib/_virtual/_commonjsHelpers.js +15 -2
- package/lib/_virtual/index.js +6 -2
- package/lib/_virtual/rangePlugin.js +6 -2
- package/lib/components/ContainedList/ContainedList.js +8 -1
- package/lib/components/DataTable/TableHeader.js +1 -3
- package/lib/components/DatePicker/DatePicker.js +13 -2
- package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.js +52 -0
- package/lib/components/FluidNumberInput/FluidNumberInput.js +148 -0
- package/lib/components/FluidSearch/FluidSearch.Skeleton.js +52 -0
- package/lib/components/FluidSearch/FluidSearch.js +124 -0
- package/lib/components/NumberInput/NumberInput.js +37 -19
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +83 -141
- package/lib/components/ProgressBar/ProgressBar.js +10 -3
- package/lib/components/Search/Search.js +7 -1
- package/lib/components/SkeletonText/SkeletonText.js +38 -37
- package/lib/components/Slider/Slider.js +16 -26
- package/lib/components/TextArea/TextArea.js +10 -3
- package/lib/components/Tile/Tile.js +7 -5
- package/lib/components/TimePickerSelect/TimePickerSelect.js +53 -65
- package/lib/components/TimePickerSelect/index.js +2 -3
- package/lib/index.js +8 -0
- package/lib/node_modules/flatpickr/dist/l10n/index.js +2 -2
- package/lib/node_modules/flatpickr/dist/plugins/rangePlugin.js +2 -2
- package/lib/node_modules/use-resize-observer/polyfilled.js +0 -1
- package/package.json +7 -7
- package/scss/components/fluid-combo-box/_fluid-combo-box.scss +9 -0
- package/scss/components/fluid-combo-box/_index.scss +9 -0
- package/scss/components/fluid-multiselect/_fluid-multiselect.scss +9 -0
- package/scss/components/fluid-multiselect/_index.scss +9 -0
- package/scss/components/fluid-number-input/_fluid-number-input.scss +9 -0
- package/scss/components/fluid-number-input/_index.scss +9 -0
- package/scss/components/fluid-search/_fluid-search.scss +9 -0
- package/scss/components/fluid-search/_index.scss +9 -0
- package/es/components/TimePickerSelect/next/TimePickerSelect.js +0 -70
- package/lib/components/TimePickerSelect/next/TimePickerSelect.js +0 -80
|
@@ -75,16 +75,12 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
|
|
|
75
75
|
|
|
76
76
|
var _super = _rollupPluginBabelHelpers.createSuper(Slider);
|
|
77
77
|
|
|
78
|
-
function Slider() {
|
|
78
|
+
function Slider(props) {
|
|
79
79
|
var _this;
|
|
80
80
|
|
|
81
81
|
_rollupPluginBabelHelpers.classCallCheck(this, Slider);
|
|
82
82
|
|
|
83
|
-
|
|
84
|
-
args[_key] = arguments[_key];
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
83
|
+
_this = _super.call(this, props);
|
|
88
84
|
|
|
89
85
|
_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {
|
|
90
86
|
value: _this.props.value,
|
|
@@ -315,16 +311,18 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
|
|
|
315
311
|
};
|
|
316
312
|
});
|
|
317
313
|
|
|
314
|
+
_this.thumbRef = /*#__PURE__*/React__default["default"].createRef();
|
|
315
|
+
_this.filledTrackRef = /*#__PURE__*/React__default["default"].createRef();
|
|
318
316
|
return _this;
|
|
319
317
|
}
|
|
318
|
+
/**
|
|
319
|
+
* Sets up initial slider position and value in response to component mount.
|
|
320
|
+
*/
|
|
321
|
+
|
|
320
322
|
|
|
321
323
|
_rollupPluginBabelHelpers.createClass(Slider, [{
|
|
322
324
|
key: "componentDidMount",
|
|
323
|
-
value:
|
|
324
|
-
/**
|
|
325
|
-
* Sets up initial slider position and value in response to component mount.
|
|
326
|
-
*/
|
|
327
|
-
function componentDidMount() {
|
|
325
|
+
value: function componentDidMount() {
|
|
328
326
|
if (this.element) {
|
|
329
327
|
var _this$calcValue4 = this.calcValue({
|
|
330
328
|
useRawValue: true
|
|
@@ -352,6 +350,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
|
|
|
352
350
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
353
351
|
// Fire onChange event handler if present, if there's a usable value, and
|
|
354
352
|
// if the value is different from the last one
|
|
353
|
+
this.thumbRef.current.style.left = "".concat(this.state.left, "%");
|
|
354
|
+
this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
|
|
355
|
+
|
|
355
356
|
if (this.state.value !== '' && prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
|
|
356
357
|
this.props.onChange({
|
|
357
358
|
value: this.state.value
|
|
@@ -435,7 +436,6 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
|
|
|
435
436
|
delete other.invalid;
|
|
436
437
|
var _this$state = this.state,
|
|
437
438
|
value = _this$state.value,
|
|
438
|
-
left = _this$state.left,
|
|
439
439
|
isValid = _this$state.isValid;
|
|
440
440
|
var scope = this.context;
|
|
441
441
|
var enabled;
|
|
@@ -450,16 +450,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
|
|
|
450
450
|
var labelId = "".concat(id, "-label");
|
|
451
451
|
var labelClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
|
|
452
452
|
var sliderClasses = cx__default["default"]("".concat(prefix, "--slider"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--slider--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--slider--readonly"), readOnly), [enabled ? null : className]);
|
|
453
|
-
var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--invalid"), isValid === false), _classNames4));
|
|
454
|
-
var filledTrackStyle = {
|
|
455
|
-
transform: "translate(0%, -50%) scaleX(".concat(left / 100, ")")
|
|
456
|
-
};
|
|
457
|
-
var thumbStyle = {
|
|
458
|
-
left: "".concat(left, "%")
|
|
459
|
-
};
|
|
460
|
-
var hiddenInputStyle = {
|
|
461
|
-
display: 'none'
|
|
462
|
-
};
|
|
453
|
+
var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--invalid"), isValid === false), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--slider-text-input--hidden"), hideTextInput), _classNames4));
|
|
463
454
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
464
455
|
className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
|
|
465
456
|
}, /*#__PURE__*/React__default["default"].createElement("label", {
|
|
@@ -489,8 +480,8 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
|
|
|
489
480
|
"aria-valuemax": max,
|
|
490
481
|
"aria-valuemin": min,
|
|
491
482
|
"aria-valuenow": value,
|
|
492
|
-
|
|
493
|
-
|
|
483
|
+
"aria-labelledby": labelId,
|
|
484
|
+
ref: _this2.thumbRef
|
|
494
485
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
495
486
|
className: "".concat(prefix, "--slider__track"),
|
|
496
487
|
ref: function ref(node) {
|
|
@@ -498,12 +489,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
|
|
|
498
489
|
}
|
|
499
490
|
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
500
491
|
className: "".concat(prefix, "--slider__filled-track"),
|
|
501
|
-
|
|
492
|
+
ref: _this2.filledTrackRef
|
|
502
493
|
})), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
503
494
|
className: "".concat(prefix, "--slider__range-label")
|
|
504
495
|
}, formatLabel(max, maxLabel)), /*#__PURE__*/React__default["default"].createElement("input", {
|
|
505
496
|
type: hideTextInput ? 'hidden' : inputType,
|
|
506
|
-
style: hideTextInput ? hiddenInputStyle : null,
|
|
507
497
|
id: "".concat(id, "-input-for-slider"),
|
|
508
498
|
name: name,
|
|
509
499
|
className: inputClasses,
|
|
@@ -20,6 +20,7 @@ var usePrefix = require('../../internal/usePrefix.js');
|
|
|
20
20
|
require('../FluidForm/FluidForm.js');
|
|
21
21
|
var FormContext = require('../FluidForm/FormContext.js');
|
|
22
22
|
var useAnnouncer = require('../../internal/useAnnouncer.js');
|
|
23
|
+
var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
|
|
23
24
|
|
|
24
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
26
|
|
|
@@ -107,6 +108,14 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
|
|
|
107
108
|
className: "".concat(prefix, "--text-area__invalid-icon")
|
|
108
109
|
})) : null;
|
|
109
110
|
var textareaClasses = cx__default["default"]("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
|
|
111
|
+
var textareaRef = React.useRef();
|
|
112
|
+
useIsomorphicEffect["default"](function () {
|
|
113
|
+
if (other.cols) {
|
|
114
|
+
textareaRef.current.style.width = null;
|
|
115
|
+
} else {
|
|
116
|
+
textareaRef.current.style.width = "100%";
|
|
117
|
+
}
|
|
118
|
+
}, [other.cols]);
|
|
110
119
|
var input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
|
|
111
120
|
placeholder: placeholder || null,
|
|
112
121
|
className: textareaClasses,
|
|
@@ -114,9 +123,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
|
|
|
114
123
|
"aria-describedby": invalid ? errorId : null,
|
|
115
124
|
disabled: other.disabled,
|
|
116
125
|
readOnly: other.readOnly,
|
|
117
|
-
|
|
118
|
-
width: "100%"
|
|
119
|
-
}
|
|
126
|
+
ref: textareaRef
|
|
120
127
|
}));
|
|
121
128
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
122
129
|
className: enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
|
|
@@ -429,9 +429,6 @@ function ExpandableTile(_ref4) {
|
|
|
429
429
|
var classNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tile--light"), light), _cx4), className);
|
|
430
430
|
var interactiveClassNames = cx__default["default"]("".concat(prefix, "--tile"), "".concat(prefix, "--tile--expandable"), "".concat(prefix, "--tile--expandable--interactive"), (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--is-expanded"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--tile--light"), light), _cx5), className);
|
|
431
431
|
var chevronInteractiveClassNames = cx__default["default"]("".concat(prefix, "--tile__chevron"), "".concat(prefix, "--tile__chevron--interactive"));
|
|
432
|
-
var tileStyle = {
|
|
433
|
-
maxHeight: isExpanded ? null : isTileMaxHeight + isTilePadding
|
|
434
|
-
};
|
|
435
432
|
var childrenAsArray = getChildren();
|
|
436
433
|
useIsomorphicEffect["default"](function () {
|
|
437
434
|
var getStyle = window.getComputedStyle(tile.current, null);
|
|
@@ -453,6 +450,13 @@ function ExpandableTile(_ref4) {
|
|
|
453
450
|
setInteractive(true);
|
|
454
451
|
}
|
|
455
452
|
}, []);
|
|
453
|
+
useIsomorphicEffect["default"](function () {
|
|
454
|
+
if (isExpanded) {
|
|
455
|
+
tile.current.style.maxHeight = null;
|
|
456
|
+
} else {
|
|
457
|
+
tile.current.style.maxHeight = isTileMaxHeight + isTilePadding + 'px';
|
|
458
|
+
}
|
|
459
|
+
}, [isExpanded, isTileMaxHeight, isTilePadding]);
|
|
456
460
|
React.useEffect(function () {
|
|
457
461
|
var resizeObserver = new ResizeObserver(function (entries) {
|
|
458
462
|
var _entries = _rollupPluginBabelHelpers.slicedToArray(entries, 1),
|
|
@@ -467,7 +471,6 @@ function ExpandableTile(_ref4) {
|
|
|
467
471
|
}, []);
|
|
468
472
|
return interactive ? /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
|
|
469
473
|
ref: tile,
|
|
470
|
-
style: tileStyle,
|
|
471
474
|
className: interactiveClassNames,
|
|
472
475
|
"aria-expanded": isExpanded
|
|
473
476
|
}, rest), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -488,7 +491,6 @@ function ExpandableTile(_ref4) {
|
|
|
488
491
|
}, childrenAsArray[1]))) : /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
|
|
489
492
|
type: "button",
|
|
490
493
|
ref: tile,
|
|
491
|
-
style: tileStyle,
|
|
492
494
|
className: classNames,
|
|
493
495
|
"aria-expanded": isExpanded,
|
|
494
496
|
title: isExpanded ? tileExpandedIconText : tileCollapsedIconText
|
|
@@ -14,7 +14,6 @@ var PropTypes = require('prop-types');
|
|
|
14
14
|
var React = require('react');
|
|
15
15
|
var cx = require('classnames');
|
|
16
16
|
var iconsReact = require('@carbon/icons-react');
|
|
17
|
-
var deprecate = require('../../prop-types/deprecate.js');
|
|
18
17
|
var usePrefix = require('../../internal/usePrefix.js');
|
|
19
18
|
|
|
20
19
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -23,70 +22,59 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
|
23
22
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
24
23
|
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
25
24
|
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
disabled = _this$props.disabled,
|
|
54
|
-
_this$props$hideLabel = _this$props.hideLabel,
|
|
55
|
-
hideLabel = _this$props$hideLabel === void 0 ? true : _this$props$hideLabel,
|
|
56
|
-
id = _this$props.id,
|
|
57
|
-
iconDescription = _this$props.iconDescription,
|
|
58
|
-
labelText = _this$props.labelText,
|
|
59
|
-
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded);
|
|
60
|
-
|
|
61
|
-
var selectClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--time-picker__select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
|
|
62
|
-
var labelClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
|
|
63
|
-
var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
64
|
-
htmlFor: id,
|
|
65
|
-
className: labelClasses
|
|
66
|
-
}, labelText) : null;
|
|
67
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
68
|
-
className: selectClasses
|
|
69
|
-
}, label, /*#__PURE__*/React__default["default"].createElement("select", _rollupPluginBabelHelpers["extends"]({
|
|
70
|
-
className: "".concat(prefix, "--select-input"),
|
|
71
|
-
disabled: disabled,
|
|
72
|
-
id: id,
|
|
73
|
-
"aria-label": ariaLabel
|
|
74
|
-
}, rest), children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
|
|
75
|
-
className: "".concat(prefix, "--select__arrow"),
|
|
76
|
-
"aria-label": ariaLabel ? ariaLabel : iconDescription
|
|
77
|
-
}));
|
|
78
|
-
}
|
|
79
|
-
}]);
|
|
80
|
-
|
|
81
|
-
return TimePickerSelect;
|
|
82
|
-
}(React.Component);
|
|
83
|
-
|
|
84
|
-
_rollupPluginBabelHelpers.defineProperty(TimePickerSelect, "contextType", usePrefix.PrefixContext);
|
|
85
|
-
|
|
86
|
-
_rollupPluginBabelHelpers.defineProperty(TimePickerSelect, "propTypes", (_defineProperty2 = {}, _rollupPluginBabelHelpers.defineProperty(_defineProperty2, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "defaultValue", PropTypes__default["default"].any), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "hideLabel", deprecate["default"](PropTypes__default["default"].bool, 'The `hideLabel` prop for `TimePickerSelect` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release.')), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "iconDescription", deprecate["default"](PropTypes__default["default"].string, 'The `iconDescription` prop for `TimePickerSelect` is no longer needed and has ' + 'been deprecated. It will be removed in the next major release. Use `aria-label` instead.')), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_defineProperty2, "labelText", PropTypes__default["default"].node.isRequired), _defineProperty2));
|
|
87
|
-
|
|
88
|
-
_rollupPluginBabelHelpers.defineProperty(TimePickerSelect, "defaultProps", {
|
|
89
|
-
disabled: false
|
|
25
|
+
var _excluded = ["aria-label", "children", "id", "disabled", "className"];
|
|
26
|
+
var TimePickerSelect = /*#__PURE__*/React__default["default"].forwardRef(function TimePickerSelect(_ref, ref) {
|
|
27
|
+
var _cx;
|
|
28
|
+
|
|
29
|
+
var _ref$ariaLabel = _ref['aria-label'],
|
|
30
|
+
ariaLabel = _ref$ariaLabel === void 0 ? 'open list of options' : _ref$ariaLabel,
|
|
31
|
+
children = _ref.children,
|
|
32
|
+
id = _ref.id,
|
|
33
|
+
_ref$disabled = _ref.disabled,
|
|
34
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
35
|
+
className = _ref.className,
|
|
36
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
37
|
+
|
|
38
|
+
var prefix = usePrefix.usePrefix();
|
|
39
|
+
var selectClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--time-picker__select"), true), _rollupPluginBabelHelpers.defineProperty(_cx, className, className), _cx));
|
|
40
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
41
|
+
className: selectClasses
|
|
42
|
+
}, /*#__PURE__*/React__default["default"].createElement("select", _rollupPluginBabelHelpers["extends"]({
|
|
43
|
+
"aria-label": ariaLabel,
|
|
44
|
+
className: "".concat(prefix, "--select-input"),
|
|
45
|
+
disabled: disabled,
|
|
46
|
+
id: id,
|
|
47
|
+
ref: ref
|
|
48
|
+
}, rest), children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
|
|
49
|
+
className: "".concat(prefix, "--select__arrow"),
|
|
50
|
+
"aria-hidden": "true"
|
|
51
|
+
}));
|
|
90
52
|
});
|
|
53
|
+
TimePickerSelect.propTypes = {
|
|
54
|
+
/**
|
|
55
|
+
* Provide the contents of your TimePickerSelect
|
|
56
|
+
*/
|
|
57
|
+
children: PropTypes__default["default"].node,
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Specify an optional className to be applied to the node containing the label and the select box
|
|
61
|
+
*/
|
|
62
|
+
className: PropTypes__default["default"].string,
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Optionally provide the default value of the `<select>`
|
|
66
|
+
*/
|
|
67
|
+
defaultValue: PropTypes__default["default"].any,
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Specify whether the control is disabled
|
|
71
|
+
*/
|
|
72
|
+
disabled: PropTypes__default["default"].bool,
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Specify a custom `id` for the `<select>`
|
|
76
|
+
*/
|
|
77
|
+
id: PropTypes__default["default"].string.isRequired
|
|
78
|
+
};
|
|
91
79
|
|
|
92
80
|
exports["default"] = TimePickerSelect;
|
|
@@ -10,8 +10,7 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var FeatureFlags = require('@carbon/feature-flags');
|
|
13
|
-
var TimePickerSelect$1 = require('./
|
|
14
|
-
var TimePickerSelect$2 = require('./TimePickerSelect.js');
|
|
13
|
+
var TimePickerSelect$1 = require('./TimePickerSelect.js');
|
|
15
14
|
|
|
16
15
|
function _interopNamespace(e) {
|
|
17
16
|
if (e && e.__esModule) return e;
|
|
@@ -33,6 +32,6 @@ function _interopNamespace(e) {
|
|
|
33
32
|
|
|
34
33
|
var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
|
|
35
34
|
|
|
36
|
-
var TimePickerSelect = FeatureFlags__namespace.enabled('enable-v11-release') ? TimePickerSelect$1["default"] : TimePickerSelect$
|
|
35
|
+
var TimePickerSelect = FeatureFlags__namespace.enabled('enable-v11-release') ? TimePickerSelect$1["default"] : TimePickerSelect$1["default"];
|
|
37
36
|
|
|
38
37
|
exports["default"] = TimePickerSelect;
|
package/lib/index.js
CHANGED
|
@@ -163,6 +163,10 @@ var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
|
|
|
163
163
|
var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
|
|
164
164
|
var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
|
|
165
165
|
var FluidMultiSelect_Skeleton = require('./components/FluidMultiSelect/FluidMultiSelect.Skeleton.js');
|
|
166
|
+
var FluidNumberInput = require('./components/FluidNumberInput/FluidNumberInput.js');
|
|
167
|
+
var FluidNumberInput_Skeleton = require('./components/FluidNumberInput/FluidNumberInput.Skeleton.js');
|
|
168
|
+
var FluidSearch = require('./components/FluidSearch/FluidSearch.js');
|
|
169
|
+
var FluidSearch_Skeleton = require('./components/FluidSearch/FluidSearch.Skeleton.js');
|
|
166
170
|
var FluidSelect = require('./components/FluidSelect/FluidSelect.js');
|
|
167
171
|
var FluidSelect_Skeleton = require('./components/FluidSelect/FluidSelect.Skeleton.js');
|
|
168
172
|
var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
|
|
@@ -403,6 +407,10 @@ exports.unstable__FluidDropdown = FluidDropdown["default"];
|
|
|
403
407
|
exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
|
|
404
408
|
exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
|
|
405
409
|
exports.unstable__FluidMultiSelectSkeleton = FluidMultiSelect_Skeleton["default"];
|
|
410
|
+
exports.unstable__FluidNumberInput = FluidNumberInput["default"];
|
|
411
|
+
exports.unstable__FluidNumberInputSkeleton = FluidNumberInput_Skeleton["default"];
|
|
412
|
+
exports.unstable__FluidSearch = FluidSearch["default"];
|
|
413
|
+
exports.unstable__FluidSearchSkeleton = FluidSearch_Skeleton["default"];
|
|
406
414
|
exports.unstable__FluidSelect = FluidSelect["default"];
|
|
407
415
|
exports.unstable__FluidSelectSkeleton = FluidSelect_Skeleton["default"];
|
|
408
416
|
exports.unstable__FluidTextArea = FluidTextArea["default"];
|
|
@@ -1420,8 +1420,8 @@ var index = require('../../../../_virtual/index.js');
|
|
|
1420
1420
|
value: true
|
|
1421
1421
|
});
|
|
1422
1422
|
});
|
|
1423
|
-
})(index.
|
|
1423
|
+
})(index.__module, index.exports);
|
|
1424
1424
|
|
|
1425
|
-
var l10n = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(index.
|
|
1425
|
+
var l10n = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(index.exports);
|
|
1426
1426
|
|
|
1427
1427
|
exports["default"] = l10n;
|
|
@@ -193,8 +193,8 @@ var rangePlugin$1 = require('../../../../_virtual/rangePlugin.js');
|
|
|
193
193
|
|
|
194
194
|
return rangePlugin;
|
|
195
195
|
});
|
|
196
|
-
})(rangePlugin$1.
|
|
196
|
+
})(rangePlugin$1.__module);
|
|
197
197
|
|
|
198
|
-
var rangePlugin = rangePlugin$1.
|
|
198
|
+
var rangePlugin = rangePlugin$1.exports;
|
|
199
199
|
|
|
200
200
|
exports["default"] = rangePlugin;
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
11
|
|
|
12
12
|
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
require('../resize-observer-polyfill/dist/ResizeObserver.es.js');
|
|
14
13
|
var ResizeObserver_es = require('../../_virtual/ResizeObserver.es.js');
|
|
15
14
|
var React = require('react');
|
|
16
15
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/react",
|
|
3
3
|
"description": "React components for the Carbon Design System",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.20.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@babel/runtime": "^7.18.3",
|
|
46
46
|
"@carbon/feature-flags": "^0.11.0",
|
|
47
|
-
"@carbon/icons-react": "^11.
|
|
48
|
-
"@carbon/layout": "^11.
|
|
49
|
-
"@carbon/styles": "^1.
|
|
47
|
+
"@carbon/icons-react": "^11.14.0",
|
|
48
|
+
"@carbon/layout": "^11.10.0",
|
|
49
|
+
"@carbon/styles": "^1.20.0",
|
|
50
50
|
"@carbon/telemetry": "0.1.0",
|
|
51
51
|
"classnames": "2.3.2",
|
|
52
52
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -73,9 +73,9 @@
|
|
|
73
73
|
"@babel/preset-env": "^7.18.2",
|
|
74
74
|
"@babel/preset-react": "^7.17.12",
|
|
75
75
|
"@carbon/test-utils": "^10.26.0",
|
|
76
|
-
"@carbon/themes": "^11.
|
|
76
|
+
"@carbon/themes": "^11.15.0",
|
|
77
77
|
"@rollup/plugin-babel": "^6.0.0",
|
|
78
|
-
"@rollup/plugin-commonjs": "^
|
|
78
|
+
"@rollup/plugin-commonjs": "^24.0.0",
|
|
79
79
|
"@rollup/plugin-node-resolve": "^15.0.0",
|
|
80
80
|
"@rollup/plugin-typescript": "^10.0.0",
|
|
81
81
|
"@storybook/addon-a11y": "^6.5.6",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"**/*.scss",
|
|
136
136
|
"**/*.css"
|
|
137
137
|
],
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "b115fef8c7d19ed31ed3aeeb2b7f95f8be0738b6"
|
|
139
139
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-combo-box/fluid-combo-box';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-combo-box';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-multiselect/fluid-multiselect';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-multiselect';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-number-input/fluid-number-input';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-number-input';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-search/fluid-search';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-search';
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import PropTypes from 'prop-types';
|
|
10
|
-
import React__default from 'react';
|
|
11
|
-
import cx from 'classnames';
|
|
12
|
-
import { ChevronDown } from '@carbon/icons-react';
|
|
13
|
-
import { usePrefix } from '../../../internal/usePrefix.js';
|
|
14
|
-
|
|
15
|
-
var _excluded = ["aria-label", "children", "id", "disabled", "className"];
|
|
16
|
-
var TimePickerSelect = /*#__PURE__*/React__default.forwardRef(function TimePickerSelect(_ref, ref) {
|
|
17
|
-
var _cx;
|
|
18
|
-
|
|
19
|
-
var _ref$ariaLabel = _ref['aria-label'],
|
|
20
|
-
ariaLabel = _ref$ariaLabel === void 0 ? 'open list of options' : _ref$ariaLabel,
|
|
21
|
-
children = _ref.children,
|
|
22
|
-
id = _ref.id,
|
|
23
|
-
_ref$disabled = _ref.disabled,
|
|
24
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
25
|
-
className = _ref.className,
|
|
26
|
-
rest = _objectWithoutProperties(_ref, _excluded);
|
|
27
|
-
|
|
28
|
-
var prefix = usePrefix();
|
|
29
|
-
var selectClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--select"), true), _defineProperty(_cx, "".concat(prefix, "--time-picker__select"), true), _defineProperty(_cx, className, className), _cx));
|
|
30
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
31
|
-
className: selectClasses
|
|
32
|
-
}, /*#__PURE__*/React__default.createElement("select", _extends({
|
|
33
|
-
"aria-label": ariaLabel,
|
|
34
|
-
className: "".concat(prefix, "--select-input"),
|
|
35
|
-
disabled: disabled,
|
|
36
|
-
id: id,
|
|
37
|
-
ref: ref
|
|
38
|
-
}, rest), children), /*#__PURE__*/React__default.createElement(ChevronDown, {
|
|
39
|
-
className: "".concat(prefix, "--select__arrow"),
|
|
40
|
-
"aria-hidden": "true"
|
|
41
|
-
}));
|
|
42
|
-
});
|
|
43
|
-
TimePickerSelect.propTypes = {
|
|
44
|
-
/**
|
|
45
|
-
* Provide the contents of your TimePickerSelect
|
|
46
|
-
*/
|
|
47
|
-
children: PropTypes.node,
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Specify an optional className to be applied to the node containing the label and the select box
|
|
51
|
-
*/
|
|
52
|
-
className: PropTypes.string,
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Optionally provide the default value of the `<select>`
|
|
56
|
-
*/
|
|
57
|
-
defaultValue: PropTypes.any,
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Specify whether the control is disabled
|
|
61
|
-
*/
|
|
62
|
-
disabled: PropTypes.bool,
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* Specify a custom `id` for the `<select>`
|
|
66
|
-
*/
|
|
67
|
-
id: PropTypes.string.isRequired
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export { TimePickerSelect as default };
|