@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.
- package/es/components/Checkbox/Checkbox.Skeleton.d.ts +18 -0
- package/es/components/Checkbox/Checkbox.Skeleton.js +1 -2
- package/es/components/Checkbox/Checkbox.d.ts +47 -0
- package/es/components/Checkbox/Checkbox.js +6 -7
- package/es/components/Checkbox/index.d.ts +10 -0
- package/es/components/Checkbox/index.js +10 -0
- package/es/components/DataTable/TableToolbarSearch.js +1 -1
- package/es/components/ExpandableSearch/ExpandableSearch.js +1 -1
- package/es/components/Grid/Grid.js +0 -5
- package/es/components/Search/Search.js +160 -184
- package/es/components/Search/index.js +2 -8
- package/es/components/Tab/index.js +1 -1
- package/es/components/Tabs/Tabs.Skeleton.js +6 -6
- package/es/components/Tabs/Tabs.js +582 -508
- package/es/components/Tabs/index.js +2 -12
- package/es/components/Tabs/{next/usePressable.js → usePressable.js} +1 -1
- package/es/components/Text/Text.d.ts +33 -0
- package/es/components/Text/Text.js +8 -5
- package/es/components/Text/TextDirection.d.ts +35 -0
- package/es/components/Text/TextDirectionContext.js +2 -0
- package/es/components/Text/createTextComponent.d.ts +18 -0
- package/es/components/Text/index.d.ts +18 -0
- package/es/components/Text/index.js +2 -0
- package/es/components/Tile/Tile.js +339 -502
- package/es/index.js +6 -6
- package/es/internal/usePrefix.d.ts +9 -0
- package/lib/components/Checkbox/Checkbox.Skeleton.d.ts +18 -0
- package/lib/components/Checkbox/Checkbox.Skeleton.js +1 -2
- package/lib/components/Checkbox/Checkbox.d.ts +47 -0
- package/lib/components/Checkbox/Checkbox.js +6 -7
- package/lib/components/Checkbox/index.d.ts +10 -0
- package/lib/components/Checkbox/index.js +18 -0
- package/lib/components/DataTable/TableToolbarSearch.js +2 -2
- package/lib/components/ExpandableSearch/ExpandableSearch.js +3 -3
- package/lib/components/Grid/Grid.js +0 -5
- package/lib/components/Search/Search.js +159 -183
- package/lib/components/Search/index.js +2 -25
- package/lib/components/Tab/index.js +1 -1
- package/lib/components/Tabs/Tabs.Skeleton.js +6 -6
- package/lib/components/Tabs/Tabs.js +586 -507
- package/lib/components/Tabs/index.js +7 -33
- package/lib/components/Tabs/{next/usePressable.js → usePressable.js} +1 -1
- package/lib/components/Text/Text.d.ts +33 -0
- package/lib/components/Text/Text.js +8 -5
- package/lib/components/Text/TextDirection.d.ts +35 -0
- package/lib/components/Text/TextDirectionContext.js +2 -0
- package/lib/components/Text/createTextComponent.d.ts +18 -0
- package/lib/components/Text/index.d.ts +18 -0
- package/lib/components/Text/index.js +4 -0
- package/lib/components/Tile/Tile.js +336 -499
- package/lib/index.js +71 -71
- package/lib/internal/usePrefix.d.ts +9 -0
- package/package.json +7 -3
- package/es/components/Search/next/Search.js +0 -265
- package/es/components/Tabs/next/Tabs.Skeleton.js +0 -53
- package/es/components/Tabs/next/Tabs.js +0 -692
- package/es/components/Tile/index.js +0 -19
- package/es/components/Tile/next/Tile.js +0 -604
- package/lib/components/Search/next/Search.js +0 -275
- package/lib/components/Tabs/next/Tabs.Skeleton.js +0 -63
- package/lib/components/Tabs/next/Tabs.js +0 -708
- package/lib/components/Tile/index.js +0 -48
- 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;
|
|
@@ -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
|
|
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
|
|
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
|
|
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/
|
|
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/
|
|
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 {
|
|
9
|
-
import
|
|
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
|
|
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", "
|
|
23
|
-
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
|
-
|
|
35
|
-
|
|
81
|
+
function clearInput() {
|
|
82
|
+
if (!value) {
|
|
83
|
+
inputRef.current.value = '';
|
|
36
84
|
}
|
|
37
85
|
|
|
38
|
-
|
|
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
|
-
|
|
99
|
+
function handleChange(event) {
|
|
100
|
+
setHasContent(event.target.value !== '');
|
|
82
101
|
}
|
|
83
102
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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
|
|
184
|
-
|
|
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
|
-
*
|
|
200
|
+
* Optional callback called when the magnifier icon is clicked in ExpandableSearch.
|
|
234
201
|
*/
|
|
235
|
-
|
|
202
|
+
onExpand: PropTypes.func,
|
|
236
203
|
|
|
237
204
|
/**
|
|
238
|
-
*
|
|
205
|
+
* Provide a handler that is invoked on the key down event for the input
|
|
239
206
|
*/
|
|
240
|
-
|
|
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
|
|
223
|
+
* Specify the role for the underlying `<input>`, defaults to `searchbox`
|
|
257
224
|
*/
|
|
258
|
-
|
|
225
|
+
role: PropTypes.string,
|
|
259
226
|
|
|
260
227
|
/**
|
|
261
|
-
* Specify
|
|
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
|
-
|
|
243
|
+
function CustomSearchIcon(_ref2) {
|
|
244
|
+
var icon = _ref2.icon;
|
|
245
|
+
var prefix = usePrefix();
|
|
281
246
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
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
|
|
9
|
-
|
|
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/
|
|
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", "
|
|
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, "--
|
|
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
|
-
|
|
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"),
|
|
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, "--
|
|
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
|
-
|
|
50
|
+
contained: PropTypes.bool
|
|
51
51
|
};
|
|
52
52
|
|
|
53
53
|
export { TabsSkeleton as default };
|