@carbon/react 1.16.0 → 1.17.0-rc.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.
Files changed (63) hide show
  1. package/es/components/Checkbox/Checkbox.Skeleton.d.ts +18 -0
  2. package/es/components/Checkbox/Checkbox.Skeleton.js +1 -2
  3. package/es/components/Checkbox/Checkbox.d.ts +47 -0
  4. package/es/components/Checkbox/Checkbox.js +6 -7
  5. package/es/components/Checkbox/index.d.ts +10 -0
  6. package/es/components/Checkbox/index.js +10 -0
  7. package/es/components/DataTable/TableToolbarSearch.js +1 -1
  8. package/es/components/ExpandableSearch/ExpandableSearch.js +1 -1
  9. package/es/components/Grid/Grid.js +0 -5
  10. package/es/components/Search/Search.js +160 -184
  11. package/es/components/Search/index.js +2 -8
  12. package/es/components/Tab/index.js +1 -1
  13. package/es/components/Tabs/Tabs.Skeleton.js +6 -6
  14. package/es/components/Tabs/Tabs.js +582 -508
  15. package/es/components/Tabs/index.js +2 -12
  16. package/es/components/Tabs/{next/usePressable.js → usePressable.js} +1 -1
  17. package/es/components/Text/Text.d.ts +33 -0
  18. package/es/components/Text/Text.js +8 -5
  19. package/es/components/Text/TextDirection.d.ts +35 -0
  20. package/es/components/Text/TextDirectionContext.js +2 -0
  21. package/es/components/Text/createTextComponent.d.ts +18 -0
  22. package/es/components/Text/index.d.ts +18 -0
  23. package/es/components/Text/index.js +2 -0
  24. package/es/components/Tile/Tile.js +339 -502
  25. package/es/index.js +6 -6
  26. package/es/internal/usePrefix.d.ts +9 -0
  27. package/lib/components/Checkbox/Checkbox.Skeleton.d.ts +18 -0
  28. package/lib/components/Checkbox/Checkbox.Skeleton.js +1 -2
  29. package/lib/components/Checkbox/Checkbox.d.ts +47 -0
  30. package/lib/components/Checkbox/Checkbox.js +6 -7
  31. package/lib/components/Checkbox/index.d.ts +10 -0
  32. package/lib/components/Checkbox/index.js +18 -0
  33. package/lib/components/DataTable/TableToolbarSearch.js +2 -2
  34. package/lib/components/ExpandableSearch/ExpandableSearch.js +3 -3
  35. package/lib/components/Grid/Grid.js +0 -5
  36. package/lib/components/Search/Search.js +159 -183
  37. package/lib/components/Search/index.js +2 -25
  38. package/lib/components/Tab/index.js +1 -1
  39. package/lib/components/Tabs/Tabs.Skeleton.js +6 -6
  40. package/lib/components/Tabs/Tabs.js +586 -507
  41. package/lib/components/Tabs/index.js +7 -33
  42. package/lib/components/Tabs/{next/usePressable.js → usePressable.js} +1 -1
  43. package/lib/components/Text/Text.d.ts +33 -0
  44. package/lib/components/Text/Text.js +8 -5
  45. package/lib/components/Text/TextDirection.d.ts +35 -0
  46. package/lib/components/Text/TextDirectionContext.js +2 -0
  47. package/lib/components/Text/createTextComponent.d.ts +18 -0
  48. package/lib/components/Text/index.d.ts +18 -0
  49. package/lib/components/Text/index.js +4 -0
  50. package/lib/components/Tile/Tile.js +336 -499
  51. package/lib/index.js +71 -71
  52. package/lib/internal/usePrefix.d.ts +9 -0
  53. package/package.json +7 -3
  54. package/es/components/Search/next/Search.js +0 -265
  55. package/es/components/Tabs/next/Tabs.Skeleton.js +0 -53
  56. package/es/components/Tabs/next/Tabs.js +0 -692
  57. package/es/components/Tile/index.js +0 -19
  58. package/es/components/Tile/next/Tile.js +0 -604
  59. package/lib/components/Search/next/Search.js +0 -275
  60. package/lib/components/Tabs/next/Tabs.Skeleton.js +0 -63
  61. package/lib/components/Tabs/next/Tabs.js +0 -708
  62. package/lib/components/Tile/index.js +0 -48
  63. package/lib/components/Tile/next/Tile.js +0 -619
@@ -0,0 +1,18 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2018
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
+ import PropTypes from 'prop-types';
8
+ import { HTMLAttributes } from 'react';
9
+ declare const CheckboxSkeleton: {
10
+ ({ className, ...rest }: HTMLAttributes<HTMLDivElement>): JSX.Element;
11
+ propTypes: {
12
+ /**
13
+ * Specify an optional className to add.
14
+ */
15
+ className: PropTypes.Requireable<string>;
16
+ };
17
+ };
18
+ export default CheckboxSkeleton;
@@ -33,6 +33,5 @@ CheckboxSkeleton.propTypes = {
33
33
  */
34
34
  className: PropTypes.string
35
35
  };
36
- var CheckboxSkeleton$1 = CheckboxSkeleton;
37
36
 
38
- export { CheckboxSkeleton$1 as default };
37
+ export { CheckboxSkeleton as default };
@@ -0,0 +1,47 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2018
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
+ import { ReactNodeLike } from 'prop-types';
8
+ import React from 'react';
9
+ declare type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type';
10
+ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
11
+ /**
12
+ * Provide an `id` to uniquely identify the Checkbox input
13
+ */
14
+ id: string;
15
+ /**
16
+ * Provide a label to provide a description of the Checkbox input that you are
17
+ * exposing to the user
18
+ */
19
+ labelText: NonNullable<ReactNodeLike>;
20
+ /**
21
+ * Specify whether the underlying input should be checked by default
22
+ */
23
+ defaultChecked?: boolean;
24
+ /**
25
+ * Specify whether the Checkbox should be disabled
26
+ */
27
+ disabled?: boolean;
28
+ /**
29
+ * Specify whether the label should be hidden, or not
30
+ */
31
+ hideLabel?: boolean;
32
+ /**
33
+ * Specify whether the Checkbox is in an indeterminate state
34
+ */
35
+ indeterminate?: boolean;
36
+ /**
37
+ * Provide an optional handler that is called when the internal state of
38
+ * Checkbox changes. This handler is called with event and state info.
39
+ * `(event, { checked, id }) => void`
40
+ */
41
+ onChange?: (evt: React.ChangeEvent<HTMLInputElement>, data: {
42
+ checked: boolean;
43
+ id: string;
44
+ }) => void;
45
+ }
46
+ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<unknown>>;
47
+ export default Checkbox;
@@ -14,7 +14,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
14
14
  import { Text } from '../Text/Text.js';
15
15
 
16
16
  var _excluded = ["className", "id", "labelText", "onChange", "indeterminate", "hideLabel", "title"];
17
- var Checkbox = /*#__PURE__*/React__default.forwardRef(function Checkbox(_ref, _ref2) {
17
+ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, _ref2) {
18
18
  var className = _ref.className,
19
19
  id = _ref.id,
20
20
  labelText = _ref.labelText,
@@ -33,7 +33,7 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function Checkbox(_ref, _r
33
33
  }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
34
34
  type: "checkbox",
35
35
  onChange: function onChange(evt) {
36
- _onChange(evt, {
36
+ _onChange && _onChange(evt, {
37
37
  checked: evt.target.checked,
38
38
  id: id
39
39
  });
@@ -41,20 +41,20 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function Checkbox(_ref, _r
41
41
  className: "".concat(prefix, "--checkbox"),
42
42
  id: id,
43
43
  ref: function ref(el) {
44
- if (el) {
44
+ if (el && indeterminate) {
45
45
  el.indeterminate = indeterminate;
46
46
  }
47
47
 
48
48
  if (typeof _ref2 === 'function') {
49
49
  _ref2(el);
50
- } else if (Object(_ref2) === _ref2) {
50
+ } else if (_ref2 && Object(_ref2) === _ref2) {
51
51
  _ref2.current = el;
52
52
  }
53
53
  }
54
54
  })), /*#__PURE__*/React__default.createElement("label", {
55
55
  htmlFor: id,
56
56
  className: "".concat(prefix, "--checkbox-label"),
57
- title: title || null
57
+ title: title
58
58
  }, /*#__PURE__*/React__default.createElement(Text, {
59
59
  className: innerLabelClasses
60
60
  }, labelText)));
@@ -118,6 +118,5 @@ Checkbox.defaultProps = {
118
118
  indeterminate: false
119
119
  };
120
120
  Checkbox.displayName = 'Checkbox';
121
- var Checkbox$1 = Checkbox;
122
121
 
123
- export { Checkbox$1 as default };
122
+ export { Checkbox as default };
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2018
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
+ export { default as CheckboxSkeleton } from './Checkbox.Skeleton';
8
+ import Checkbox, { CheckboxProps } from './Checkbox';
9
+ export type { CheckboxProps };
10
+ export default Checkbox;
@@ -0,0 +1,10 @@
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
+ export { default as CheckboxSkeleton } from './Checkbox.Skeleton.js';
9
+ import Checkbox from './Checkbox.js';
10
+ export { default } from './Checkbox.js';
@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
9
9
  import cx from 'classnames';
10
10
  import PropTypes from 'prop-types';
11
11
  import React__default, { useRef, useState, useMemo, useEffect } from 'react';
12
- import Search from '../Search/index.js';
12
+ import Search from '../Search/Search.js';
13
13
  import setupGetInstanceId from './tools/instanceId.js';
14
14
  import { usePrefix } from '../../internal/usePrefix.js';
15
15
 
@@ -8,7 +8,7 @@
8
8
  import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
9
  import React__default, { useState, useRef } from 'react';
10
10
  import cx from 'classnames';
11
- import Search from '../Search/index.js';
11
+ import Search from '../Search/Search.js';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
  import { composeEventHandlers } from '../../tools/events.js';
14
14
 
@@ -37,11 +37,6 @@ Grid.propTypes = {
37
37
  */
38
38
  className: PropTypes.string,
39
39
 
40
- /**
41
- * Specify how many columns wide the Grid should span
42
- */
43
- columns: PropTypes.number,
44
-
45
40
  /**
46
41
  * Collapse the gutter to 1px. Useful for fluid layouts.
47
42
  * Rows have 1px of margin between them to match gutter.
@@ -5,185 +5,152 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import PropTypes from 'prop-types';
10
- import React__default, { Component } from 'react';
8
+ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
+ import { Close, Search as Search$2 } from '@carbon/icons-react';
11
10
  import cx from 'classnames';
12
- import { Close, Search as Search$1 } from '@carbon/icons-react';
11
+ import PropTypes from 'prop-types';
12
+ import React__default, { useRef, useState } from 'react';
13
+ import { focus } from '../../internal/focus/index.js';
14
+ import { useId } from '../../internal/useId.js';
15
+ import { usePrefix } from '../../internal/usePrefix.js';
13
16
  import { composeEventHandlers } from '../../tools/events.js';
17
+ import { useMergedRefs } from '../../internal/useMergedRefs.js';
14
18
  import deprecate from '../../prop-types/deprecate.js';
15
- import { FeatureFlagContext } from '../FeatureFlags/index.js';
16
- import { PrefixContext } from '../../internal/usePrefix.js';
17
19
  import { match } from '../../internal/keyboard/match.js';
18
20
  import { Escape } from '../../internal/keyboard/keys.js';
19
21
 
20
22
  var _Close;
21
23
 
22
- var _excluded = ["className", "type", "id", "placeHolderText", "placeholder", "labelText", "closeButtonLabelText", "small", "size", "light", "disabled", "onChange", "onKeyDown", "renderIcon", "onClear", "onExpand"];
23
-
24
- var Search = /*#__PURE__*/function (_Component) {
25
- _inherits(Search, _Component);
26
-
27
- var _super = _createSuper(Search);
28
-
29
- function Search() {
30
- var _this;
31
-
32
- _classCallCheck(this, Search);
24
+ var _excluded = ["autoComplete", "className", "closeButtonLabelText", "defaultValue", "disabled", "id", "labelText", "light", "onChange", "onClear", "onKeyDown", "onExpand", "placeholder", "renderIcon", "role", "size", "type", "value"];
25
+ var Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forwardRef) {
26
+ var _cx, _cx2;
27
+
28
+ var _ref$autoComplete = _ref.autoComplete,
29
+ autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
30
+ className = _ref.className,
31
+ _ref$closeButtonLabel = _ref.closeButtonLabelText,
32
+ closeButtonLabelText = _ref$closeButtonLabel === void 0 ? 'Clear search input' : _ref$closeButtonLabel,
33
+ defaultValue = _ref.defaultValue,
34
+ disabled = _ref.disabled,
35
+ id = _ref.id,
36
+ labelText = _ref.labelText,
37
+ light = _ref.light,
38
+ _ref$onChange = _ref.onChange,
39
+ onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
40
+ _ref$onClear = _ref.onClear,
41
+ onClear = _ref$onClear === void 0 ? function () {} : _ref$onClear,
42
+ onKeyDown = _ref.onKeyDown,
43
+ onExpand = _ref.onExpand,
44
+ _ref$placeholder = _ref.placeholder,
45
+ placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
46
+ renderIcon = _ref.renderIcon,
47
+ _ref$role = _ref.role,
48
+ role = _ref$role === void 0 ? 'searchbox' : _ref$role,
49
+ _ref$size = _ref.size,
50
+ size = _ref$size === void 0 ? 'md' : _ref$size,
51
+ _ref$type = _ref.type,
52
+ type = _ref$type === void 0 ? 'text' : _ref$type,
53
+ value = _ref.value,
54
+ rest = _objectWithoutProperties(_ref, _excluded);
55
+
56
+ var prefix = usePrefix();
57
+ var inputRef = useRef(null);
58
+ var ref = useMergedRefs([forwardRef, inputRef]);
59
+ var inputId = useId('search-input');
60
+ var uniqueId = id || inputId;
61
+ var searchId = "".concat(uniqueId, "-search");
62
+
63
+ var _useState = useState(value || defaultValue || false),
64
+ _useState2 = _slicedToArray(_useState, 2),
65
+ hasContent = _useState2[0],
66
+ setHasContent = _useState2[1];
67
+
68
+ var _useState3 = useState(value),
69
+ _useState4 = _slicedToArray(_useState3, 2),
70
+ prevValue = _useState4[0],
71
+ setPrevValue = _useState4[1];
72
+
73
+ var searchClasses = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--search"), true), _defineProperty(_cx, "".concat(prefix, "--search--sm"), size === 'sm'), _defineProperty(_cx, "".concat(prefix, "--search--md"), size === 'md'), _defineProperty(_cx, "".concat(prefix, "--search--lg"), size === 'lg'), _defineProperty(_cx, "".concat(prefix, "--search--light"), light), _defineProperty(_cx, "".concat(prefix, "--search--disabled"), disabled), _defineProperty(_cx, className, className), _cx));
74
+ var clearClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--search-close"), true), _defineProperty(_cx2, "".concat(prefix, "--search-close--hidden"), !hasContent), _cx2));
75
+
76
+ if (value !== prevValue) {
77
+ setHasContent(!!value);
78
+ setPrevValue(value);
79
+ }
33
80
 
34
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
35
- args[_key] = arguments[_key];
81
+ function clearInput() {
82
+ if (!value) {
83
+ inputRef.current.value = '';
36
84
  }
37
85
 
38
- _this = _super.call.apply(_super, [this].concat(args));
39
-
40
- _defineProperty(_assertThisInitialized(_this), "state", {
41
- hasContent: _this.props.value || _this.props.defaultValue || false,
42
- prevValue: _this.props.value
43
- });
44
-
45
- _defineProperty(_assertThisInitialized(_this), "clearInput", function (evt) {
46
- if (!_this.props.value) {
47
- _this.input.value = '';
48
-
49
- _this.props.onChange(evt);
50
- } else {
51
- var clearedEvt = Object.assign({}, evt.target, {
52
- target: {
53
- value: ''
54
- }
55
- });
56
-
57
- _this.props.onChange(clearedEvt);
58
- }
59
-
60
- _this.props.onClear();
61
-
62
- _this.setState({
63
- hasContent: false
64
- }, function () {
65
- return _this.input.focus();
66
- });
67
- });
68
-
69
- _defineProperty(_assertThisInitialized(_this), "handleChange", function (evt) {
70
- _this.setState({
71
- hasContent: evt.target.value !== ''
72
- });
73
- });
74
-
75
- _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (evt) {
76
- if (match(evt, Escape)) {
77
- _this.clearInput(evt);
78
- }
86
+ var inputTarget = Object.assign({}, inputRef.current, {
87
+ value: ''
79
88
  });
89
+ var clearedEvt = {
90
+ target: inputTarget,
91
+ type: 'change'
92
+ };
93
+ onChange(clearedEvt);
94
+ onClear();
95
+ setHasContent(false);
96
+ focus(inputRef);
97
+ }
80
98
 
81
- return _this;
99
+ function handleChange(event) {
100
+ setHasContent(event.target.value !== '');
82
101
  }
83
102
 
84
- _createClass(Search, [{
85
- key: "render",
86
- value: function render() {
87
- var _this2 = this;
88
-
89
- var _this$props = this.props,
90
- className = _this$props.className,
91
- type = _this$props.type,
92
- _this$props$id = _this$props.id,
93
- id = _this$props$id === void 0 ? this._inputId = this._inputId || "search__input__id_".concat(Math.random().toString(36).substr(2)) : _this$props$id,
94
- placeHolderText = _this$props.placeHolderText,
95
- placeholder = _this$props.placeholder,
96
- labelText = _this$props.labelText,
97
- closeButtonLabelText = _this$props.closeButtonLabelText,
98
- small = _this$props.small,
99
- _this$props$size = _this$props.size,
100
- size = _this$props$size === void 0 ? !small ? 'xl' : 'sm' : _this$props$size,
101
- light = _this$props.light,
102
- disabled = _this$props.disabled,
103
- onChange = _this$props.onChange,
104
- onKeyDown = _this$props.onKeyDown,
105
- renderIcon = _this$props.renderIcon;
106
- _this$props.onClear;
107
- _this$props.onExpand;
108
- var other = _objectWithoutProperties(_this$props, _excluded);
109
-
110
- var hasContent = this.state.hasContent;
111
- var scope = this.context;
112
- var enabled;
113
-
114
- if (scope.enabled) {
115
- enabled = scope.enabled('enable-v11-release');
116
- }
117
-
118
- return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
119
- var _classNames, _classNames2;
120
-
121
- var searchClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--search"), true), _defineProperty(_classNames, "".concat(prefix, "--search--sm"), size === 'sm'), _defineProperty(_classNames, "".concat(prefix, "--search--lg"), enabled ? size === 'md' : size === 'lg'), _defineProperty(_classNames, "".concat(prefix, "--search--xl"), enabled ? size === 'lg' : size === 'xl'), _defineProperty(_classNames, "".concat(prefix, "--search--light"), light), _defineProperty(_classNames, "".concat(prefix, "--search--disabled"), disabled), _defineProperty(_classNames, className, className), _classNames));
122
- var clearClasses = cx((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--search-close"), true), _defineProperty(_classNames2, "".concat(prefix, "--search-close--hidden"), !hasContent), _classNames2));
123
- var customIcon;
124
-
125
- if (renderIcon) {
126
- customIcon = /*#__PURE__*/React__default.cloneElement(renderIcon, {
127
- className: "".concat(prefix, "--search-magnifier-icon")
128
- });
129
- }
130
-
131
- var searchId = "".concat(id, "-search");
132
- var searchIcon = renderIcon ? customIcon : /*#__PURE__*/React__default.createElement(Search$1, {
133
- className: "".concat(prefix, "--search-magnifier-icon")
134
- });
135
- return /*#__PURE__*/React__default.createElement("div", {
136
- role: "search",
137
- "aria-labelledby": searchId,
138
- className: searchClasses
139
- }, /*#__PURE__*/React__default.createElement("div", {
140
- className: "".concat(prefix, "--search-magnifier"),
141
- ref: function ref(magnifier) {
142
- _this2.magnifier = magnifier;
143
- }
144
- }, searchIcon), /*#__PURE__*/React__default.createElement("label", {
145
- id: searchId,
146
- htmlFor: id,
147
- className: "".concat(prefix, "--label")
148
- }, labelText), /*#__PURE__*/React__default.createElement("input", _extends({
149
- role: "searchbox",
150
- autoComplete: "off"
151
- }, other, {
152
- type: type,
153
- disabled: disabled,
154
- className: "".concat(prefix, "--search-input"),
155
- id: id,
156
- placeholder: placeHolderText || placeholder,
157
- onChange: composeEventHandlers([onChange, _this2.handleChange]),
158
- onKeyDown: composeEventHandlers([onKeyDown, _this2.handleKeyDown]),
159
- ref: function ref(input) {
160
- _this2.input = input;
161
- }
162
- })), /*#__PURE__*/React__default.createElement("button", {
163
- className: clearClasses,
164
- disabled: disabled,
165
- onClick: _this2.clearInput,
166
- type: "button",
167
- "aria-label": closeButtonLabelText
168
- }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
169
- });
170
- }
171
- }], [{
172
- key: "getDerivedStateFromProps",
173
- value: function getDerivedStateFromProps(_ref, state) {
174
- var value = _ref.value;
175
- var prevValue = state.prevValue;
176
- return prevValue === value ? null : {
177
- hasContent: !!value,
178
- prevValue: value
179
- };
103
+ function handleKeyDown(event) {
104
+ if (match(event, Escape)) {
105
+ event.stopPropagation();
106
+ clearInput();
180
107
  }
181
- }]);
108
+ }
182
109
 
183
- return Search;
184
- }(Component);
110
+ return /*#__PURE__*/React__default.createElement("div", {
111
+ role: "search",
112
+ "aria-labelledby": searchId,
113
+ className: searchClasses
114
+ }, /*#__PURE__*/React__default.createElement("div", {
115
+ role: onExpand ? 'button' : null,
116
+ className: "".concat(prefix, "--search-magnifier"),
117
+ onClick: onExpand
118
+ }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
119
+ icon: renderIcon
120
+ })), /*#__PURE__*/React__default.createElement("label", {
121
+ id: searchId,
122
+ htmlFor: uniqueId,
123
+ className: "".concat(prefix, "--label")
124
+ }, labelText), /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
125
+ autoComplete: autoComplete,
126
+ className: "".concat(prefix, "--search-input"),
127
+ defaultValue: defaultValue,
128
+ disabled: disabled,
129
+ role: role,
130
+ ref: ref,
131
+ id: uniqueId,
132
+ onChange: composeEventHandlers([onChange, handleChange]),
133
+ onKeyDown: composeEventHandlers([onKeyDown, handleKeyDown]),
134
+ placeholder: placeholder,
135
+ type: type,
136
+ value: value
137
+ })), /*#__PURE__*/React__default.createElement("button", {
138
+ "aria-label": closeButtonLabelText,
139
+ className: clearClasses,
140
+ disabled: disabled,
141
+ onClick: clearInput,
142
+ title: closeButtonLabelText,
143
+ type: "button"
144
+ }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null))));
145
+ });
146
+ Search.displayName = 'Search';
147
+ Search.propTypes = {
148
+ /**
149
+ * Specify an optional value for the `autocomplete` property on the underlying
150
+ * `<input>`, defaults to "off"
151
+ */
152
+ autoComplete: PropTypes.string,
185
153
 
186
- _defineProperty(Search, "propTypes", {
187
154
  /**
188
155
  * Specify an optional className to be applied to the container node
189
156
  */
@@ -217,7 +184,7 @@ _defineProperty(Search, "propTypes", {
217
184
  /**
218
185
  * Specify light version or default version of this control
219
186
  */
220
- light: PropTypes.bool,
187
+ light: deprecate(PropTypes.bool, 'The `light` prop for `Search` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
221
188
 
222
189
  /**
223
190
  * Optional callback called when the search value changes.
@@ -230,14 +197,14 @@ _defineProperty(Search, "propTypes", {
230
197
  onClear: PropTypes.func,
231
198
 
232
199
  /**
233
- * Provide a handler that is invoked on the key down event for the input
200
+ * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
234
201
  */
235
- onKeyDown: PropTypes.func,
202
+ onExpand: PropTypes.func,
236
203
 
237
204
  /**
238
- * Deprecated in favor of `placeholder`
205
+ * Provide a handler that is invoked on the key down event for the input
239
206
  */
240
- placeHolderText: deprecate(PropTypes.string, "\nThe prop `placeHolderText` for Search has been deprecated in favor of `placeholder`. Please use `placeholder` instead."),
207
+ onKeyDown: PropTypes.func,
241
208
 
242
209
  /**
243
210
  * Provide an optional placeholder text for the Search.
@@ -253,18 +220,14 @@ _defineProperty(Search, "propTypes", {
253
220
  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
254
221
 
255
222
  /**
256
- * Specify the search size
223
+ * Specify the role for the underlying `<input>`, defaults to `searchbox`
257
224
  */
258
- size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
225
+ role: PropTypes.string,
259
226
 
260
227
  /**
261
- * Specify whether the Search should be a small variant
228
+ * Specify the size of the Search
262
229
  */
263
-
264
- /**
265
- * Specify whether the load was successful
266
- */
267
- small: deprecate(PropTypes.bool, "\nThe prop `small` for Search has been deprecated in favor of `size`. Please use `size=\"sm\"` instead."),
230
+ size: PropTypes.oneOf(['sm', 'md', 'lg']),
268
231
 
269
232
  /**
270
233
  * Optional prop to specify the type of the `<input>`
@@ -275,16 +238,29 @@ _defineProperty(Search, "propTypes", {
275
238
  * Specify the value of the `<input>`
276
239
  */
277
240
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
278
- });
241
+ };
279
242
 
280
- _defineProperty(Search, "contextType", FeatureFlagContext);
243
+ function CustomSearchIcon(_ref2) {
244
+ var icon = _ref2.icon;
245
+ var prefix = usePrefix();
281
246
 
282
- _defineProperty(Search, "defaultProps", {
283
- type: 'text',
284
- placeholder: '',
285
- closeButtonLabelText: 'Clear search input',
286
- onChange: function onChange() {},
287
- onClear: function onClear() {}
288
- });
247
+ if (icon) {
248
+ return /*#__PURE__*/React__default.cloneElement(icon, {
249
+ className: "".concat(prefix, "--search-magnifier-icon")
250
+ });
251
+ }
252
+
253
+ return /*#__PURE__*/React__default.createElement(Search$2, {
254
+ className: "".concat(prefix, "--search-magnifier-icon")
255
+ });
256
+ }
257
+
258
+ CustomSearchIcon.propTypes = {
259
+ /**
260
+ * Rendered icon for the Search. Can be a React component class
261
+ */
262
+ icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
263
+ };
264
+ var Search$1 = Search;
289
265
 
290
- export { Search as default };
266
+ export { Search$1 as default };
@@ -5,11 +5,5 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
- import * as FeatureFlags from '@carbon/feature-flags';
9
- import SearchNext from './next/Search.js';
10
- import Search$2 from './Search.js';
11
-
12
- var Search = FeatureFlags.enabled('enable-v11-release') ? SearchNext : Search$2;
13
- var Search$1 = Search;
14
-
15
- export { Search$1 as default };
8
+ import Search from './Search.js';
9
+ export { default } from './Search.js';
@@ -6,7 +6,7 @@
6
6
  */
7
7
 
8
8
  import * as FeatureFlags from '@carbon/feature-flags';
9
- import { Tab as Tab$2 } from '../Tabs/next/Tabs.js';
9
+ import { Tab as Tab$2 } from '../Tabs/Tabs.js';
10
10
  import Tab$3 from './Tab.js';
11
11
 
12
12
  var Tab = FeatureFlags.enabled('enable-v11-release') ? Tab$2 : Tab$3;
@@ -11,14 +11,14 @@ import React__default from 'react';
11
11
  import cx from 'classnames';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
 
14
- var _excluded = ["className", "type"];
14
+ var _excluded = ["className", "contained"];
15
15
 
16
16
  var _span;
17
17
 
18
18
  function Tab() {
19
19
  var prefix = usePrefix();
20
20
  return /*#__PURE__*/React__default.createElement("li", {
21
- className: "".concat(prefix, "--tabs--scrollable__nav-item")
21
+ className: "".concat(prefix, "--tabs__nav-item")
22
22
  }, /*#__PURE__*/React__default.createElement("div", {
23
23
  className: "".concat(prefix, "--tabs__nav-link")
24
24
  }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null))));
@@ -26,15 +26,15 @@ function Tab() {
26
26
 
27
27
  function TabsSkeleton(_ref) {
28
28
  var className = _ref.className,
29
- type = _ref.type,
29
+ contained = _ref.contained,
30
30
  rest = _objectWithoutProperties(_ref, _excluded);
31
31
 
32
32
  var prefix = usePrefix();
33
- var tabClasses = cx(className, "".concat(prefix, "--tabs"), "".concat(prefix, "--skeleton"), "".concat(prefix, "--tabs--scrollable"), _defineProperty({}, "".concat(prefix, "--tabs--scrollable--container"), type === 'container'));
33
+ var tabClasses = cx(className, "".concat(prefix, "--tabs"), "".concat(prefix, "--skeleton"), _defineProperty({}, "".concat(prefix, "--tabs--contained"), contained));
34
34
  return /*#__PURE__*/React__default.createElement("div", _extends({
35
35
  className: tabClasses
36
36
  }, rest), /*#__PURE__*/React__default.createElement("ul", {
37
- className: "".concat(prefix, "--tabs--scrollable__nav")
37
+ className: "".concat(prefix, "--tabs__nav")
38
38
  }, Tab(), Tab(), Tab(), Tab(), Tab()));
39
39
  }
40
40
 
@@ -47,7 +47,7 @@ TabsSkeleton.propTypes = {
47
47
  /**
48
48
  * Provide the type of Tab
49
49
  */
50
- type: PropTypes.oneOf(['', 'default', 'container'])
50
+ contained: PropTypes.bool
51
51
  };
52
52
 
53
53
  export { TabsSkeleton as default };