@carbon/react 1.0.0 → 1.0.3
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/README.md +2 -2
- package/es/components/Toggletip/index.js +252 -0
- package/es/index.js +2 -4
- package/es/internal/ComponentToggle.js +0 -1
- package/es/internal/useEvent.js +29 -0
- package/icons/package.json +2 -1
- package/lib/components/Toggletip/index.js +266 -0
- package/lib/index.js +34 -38
- package/lib/internal/ComponentToggle.js +0 -1
- package/lib/internal/useEvent.js +33 -0
- package/package.json +5 -5
- package/es/components/ToggleSmall/ToggleSmall.js +0 -104
- package/es/components/Toolbar/Toolbar.js +0 -121
- package/es/components/ToolbarSearch/ToolbarSearch.js +0 -168
- package/lib/components/ToggleSmall/ToggleSmall.js +0 -114
- package/lib/components/Toolbar/Toolbar.js +0 -135
- package/lib/components/ToolbarSearch/ToolbarSearch.js +0 -178
package/lib/index.js
CHANGED
|
@@ -82,10 +82,7 @@ var index$e = require('./components/TileGroup/index.js');
|
|
|
82
82
|
var index$f = require('./components/TimePicker/index.js');
|
|
83
83
|
var index$g = require('./components/TimePickerSelect/index.js');
|
|
84
84
|
var index$h = require('./components/Toggle/index.js');
|
|
85
|
-
var
|
|
86
|
-
var ToggleSmall = require('./components/ToggleSmall/ToggleSmall.js');
|
|
87
|
-
var Toolbar = require('./components/Toolbar/Toolbar.js');
|
|
88
|
-
var ToolbarSearch = require('./components/ToolbarSearch/ToolbarSearch.js');
|
|
85
|
+
var index$p = require('./components/Toggletip/index.js');
|
|
89
86
|
var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
|
|
90
87
|
var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
|
|
91
88
|
var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
|
|
@@ -101,20 +98,21 @@ var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
|
|
|
101
98
|
var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
|
|
102
99
|
var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
|
|
103
100
|
var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
|
|
101
|
+
var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
|
|
104
102
|
var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
|
|
105
103
|
var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
|
|
106
|
-
var index$
|
|
107
|
-
var index$
|
|
108
|
-
var index$
|
|
109
|
-
var index$
|
|
110
|
-
var index$
|
|
104
|
+
var index$q = require('./components/UIShell/index.js');
|
|
105
|
+
var index$r = require('./components/FeatureFlags/index.js');
|
|
106
|
+
var index$s = require('./components/Heading/index.js');
|
|
107
|
+
var index$t = require('./components/IconButton/index.js');
|
|
108
|
+
var index$u = require('./components/Layer/index.js');
|
|
111
109
|
require('./components/Menu/index.js');
|
|
112
|
-
var index$
|
|
113
|
-
var index$
|
|
114
|
-
var index$
|
|
110
|
+
var index$v = require('./components/OverflowMenuV2/index.js');
|
|
111
|
+
var index$w = require('./components/Popover/index.js');
|
|
112
|
+
var index$x = require('./components/Stack/index.js');
|
|
115
113
|
var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
|
|
116
114
|
require('./components/TreeView/index.js');
|
|
117
|
-
var index$
|
|
115
|
+
var index$y = require('./components/Theme/index.js');
|
|
118
116
|
var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
|
|
119
117
|
var Filename = require('./components/FileUploader/Filename.js');
|
|
120
118
|
var FileUploaderButton = require('./components/FileUploader/FileUploaderButton.js');
|
|
@@ -288,14 +286,11 @@ exports.TileGroup = index$e["default"];
|
|
|
288
286
|
exports.TimePicker = index$f["default"];
|
|
289
287
|
exports.TimePickerSelect = index$g["default"];
|
|
290
288
|
exports.Toggle = index$h["default"];
|
|
291
|
-
exports.
|
|
292
|
-
exports.
|
|
293
|
-
exports.
|
|
294
|
-
exports.
|
|
295
|
-
exports.
|
|
296
|
-
exports.ToolbarOption = Toolbar.ToolbarOption;
|
|
297
|
-
exports.ToolbarTitle = Toolbar.ToolbarTitle;
|
|
298
|
-
exports.ToolbarSearch = ToolbarSearch["default"];
|
|
289
|
+
exports.Toggletip = index$p.Toggletip;
|
|
290
|
+
exports.ToggletipActions = index$p.ToggletipActions;
|
|
291
|
+
exports.ToggletipButton = index$p.ToggletipButton;
|
|
292
|
+
exports.ToggletipContent = index$p.ToggletipContent;
|
|
293
|
+
exports.ToggletipLabel = index$p.ToggletipLabel;
|
|
299
294
|
exports.UnorderedList = UnorderedList["default"];
|
|
300
295
|
exports.SkeletonText = SkeletonText["default"];
|
|
301
296
|
exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
|
|
@@ -311,26 +306,27 @@ exports.SliderSkeleton = Slider_Skeleton["default"];
|
|
|
311
306
|
exports.TabsSkeleton = Tabs_Skeleton["default"];
|
|
312
307
|
exports.TextInputSkeleton = TextInput_Skeleton["default"];
|
|
313
308
|
exports.ToggleSkeleton = Toggle_Skeleton["default"];
|
|
309
|
+
exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
|
|
314
310
|
exports.IconSkeleton = Icon_Skeleton["default"];
|
|
315
311
|
exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
|
|
316
|
-
exports.HeaderNavigation = index$
|
|
317
|
-
exports.SideNavMenu = index$
|
|
318
|
-
exports.unstable_FeatureFlags = index$
|
|
319
|
-
exports.unstable_useFeatureFlag = index$
|
|
320
|
-
exports.unstable_useFeatureFlags = index$
|
|
321
|
-
exports.Heading = index$
|
|
322
|
-
exports.Section = index$
|
|
323
|
-
exports.IconButton = index$
|
|
324
|
-
exports.Layer = index$
|
|
325
|
-
exports.unstable_OverflowMenuV2 = index$
|
|
326
|
-
exports.Popover = index$
|
|
327
|
-
exports.PopoverContent = index$
|
|
328
|
-
exports.HStack = index$
|
|
329
|
-
exports.VStack = index$
|
|
312
|
+
exports.HeaderNavigation = index$q.HeaderNavigation;
|
|
313
|
+
exports.SideNavMenu = index$q.SideNavMenu;
|
|
314
|
+
exports.unstable_FeatureFlags = index$r.FeatureFlags;
|
|
315
|
+
exports.unstable_useFeatureFlag = index$r.useFeatureFlag;
|
|
316
|
+
exports.unstable_useFeatureFlags = index$r.useFeatureFlags;
|
|
317
|
+
exports.Heading = index$s.Heading;
|
|
318
|
+
exports.Section = index$s.Section;
|
|
319
|
+
exports.IconButton = index$t.IconButton;
|
|
320
|
+
exports.Layer = index$u.Layer;
|
|
321
|
+
exports.unstable_OverflowMenuV2 = index$v.OverflowMenuV2;
|
|
322
|
+
exports.Popover = index$w.Popover;
|
|
323
|
+
exports.PopoverContent = index$w.PopoverContent;
|
|
324
|
+
exports.HStack = index$x.HStack;
|
|
325
|
+
exports.VStack = index$x.VStack;
|
|
330
326
|
exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
|
|
331
|
-
exports.GlobalTheme = index$
|
|
332
|
-
exports.Theme = index$
|
|
333
|
-
exports.useTheme = index$
|
|
327
|
+
exports.GlobalTheme = index$y.GlobalTheme;
|
|
328
|
+
exports.Theme = index$y.Theme;
|
|
329
|
+
exports.useTheme = index$y.useTheme;
|
|
334
330
|
exports.AspectRatio = AspectRatio["default"];
|
|
335
331
|
exports.Filename = Filename["default"];
|
|
336
332
|
exports.FileUploaderButton = FileUploaderButton["default"];
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2016, 2021
|
|
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
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
+
|
|
12
|
+
var React = require('react');
|
|
13
|
+
|
|
14
|
+
function useWindowEvent(eventName, callback) {
|
|
15
|
+
var savedCallback = React.useRef(null);
|
|
16
|
+
React.useEffect(function () {
|
|
17
|
+
savedCallback.current = callback;
|
|
18
|
+
});
|
|
19
|
+
React.useEffect(function () {
|
|
20
|
+
function handler(event) {
|
|
21
|
+
if (savedCallback.current) {
|
|
22
|
+
savedCallback.current(event);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
window.addEventListener(eventName, handler);
|
|
27
|
+
return function () {
|
|
28
|
+
window.removeEventListener(eventName, handler);
|
|
29
|
+
};
|
|
30
|
+
}, [eventName]);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
exports.useWindowEvent = useWindowEvent;
|
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.0.
|
|
4
|
+
"version": "1.0.3",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@babel/runtime": "^7.16.7",
|
|
47
47
|
"@carbon/feature-flags": "^0.7.0",
|
|
48
|
-
"@carbon/icons-react": "^11.0.
|
|
48
|
+
"@carbon/icons-react": "^11.0.2",
|
|
49
49
|
"@carbon/layout": "^11.0.0",
|
|
50
|
-
"@carbon/styles": "^1.0.
|
|
50
|
+
"@carbon/styles": "^1.0.2",
|
|
51
51
|
"@carbon/telemetry": "0.1.0",
|
|
52
52
|
"classnames": "2.3.1",
|
|
53
53
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"@babel/preset-env": "^7.16.7",
|
|
75
75
|
"@babel/preset-react": "^7.16.7",
|
|
76
76
|
"@carbon/test-utils": "^10.22.0",
|
|
77
|
-
"@carbon/themes": "^11.0.
|
|
77
|
+
"@carbon/themes": "^11.0.1",
|
|
78
78
|
"@cypress/react": "^5.11.0",
|
|
79
79
|
"@cypress/webpack-dev-server": "1.8.3",
|
|
80
80
|
"@percy/cypress": "^3.1.1",
|
|
@@ -136,5 +136,5 @@
|
|
|
136
136
|
"**/*.scss",
|
|
137
137
|
"**/*.css"
|
|
138
138
|
],
|
|
139
|
-
"gitHead": "
|
|
139
|
+
"gitHead": "42d17eec46503003defc2a4227ac0c20750713fe"
|
|
140
140
|
}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2021
|
|
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 cx from 'classnames';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import React__default from 'react';
|
|
12
|
-
import { warning } from '../../internal/warning.js';
|
|
13
|
-
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
|
-
import { match } from '../../internal/keyboard/match.js';
|
|
15
|
-
import { Enter } from '../../internal/keyboard/keys.js';
|
|
16
|
-
|
|
17
|
-
var _path, _ToggleSmall$propType;
|
|
18
|
-
|
|
19
|
-
var _excluded = ["className", "defaultToggled", "toggled", "onChange", "onToggle", "id", "labelText", "labelA", "labelB"];
|
|
20
|
-
var didWarnAboutDeprecation = false;
|
|
21
|
-
|
|
22
|
-
var ToggleSmall = function ToggleSmall(_ref) {
|
|
23
|
-
var className = _ref.className,
|
|
24
|
-
defaultToggled = _ref.defaultToggled,
|
|
25
|
-
toggled = _ref.toggled,
|
|
26
|
-
_onChange = _ref.onChange,
|
|
27
|
-
onToggle = _ref.onToggle,
|
|
28
|
-
id = _ref.id,
|
|
29
|
-
labelText = _ref.labelText,
|
|
30
|
-
labelA = _ref.labelA,
|
|
31
|
-
labelB = _ref.labelB,
|
|
32
|
-
other = _objectWithoutProperties(_ref, _excluded);
|
|
33
|
-
|
|
34
|
-
var prefix = usePrefix();
|
|
35
|
-
|
|
36
|
-
if (process.env.NODE_ENV !== "production") {
|
|
37
|
-
process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ToggleSmall>` has been deprecated in favor of `<Toggle size="sm" />` and will be removed in the next major release of `carbon-components-react`') : void 0;
|
|
38
|
-
didWarnAboutDeprecation = true;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
var input;
|
|
42
|
-
var wrapperClasses = cx("".concat(prefix, "--form-item"), _defineProperty({}, className, className));
|
|
43
|
-
var checkedProps = {};
|
|
44
|
-
|
|
45
|
-
if (typeof toggled !== 'undefined') {
|
|
46
|
-
checkedProps.checked = toggled;
|
|
47
|
-
} else {
|
|
48
|
-
checkedProps.defaultChecked = defaultToggled;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
var ariaLabel = typeof labelText === 'string' && labelText || other['aria-label'] || other.ariaLabel || null;
|
|
52
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
53
|
-
className: wrapperClasses
|
|
54
|
-
}, /*#__PURE__*/React__default.createElement("input", _extends({}, other, checkedProps, {
|
|
55
|
-
"aria-label": null,
|
|
56
|
-
type: "checkbox",
|
|
57
|
-
id: id,
|
|
58
|
-
className: "".concat(prefix, "--toggle-input ").concat(prefix, "--toggle-input--small"),
|
|
59
|
-
onChange: function onChange(evt) {
|
|
60
|
-
_onChange && _onChange(evt);
|
|
61
|
-
onToggle(input.checked, id, evt);
|
|
62
|
-
},
|
|
63
|
-
ref: function ref(el) {
|
|
64
|
-
input = el;
|
|
65
|
-
},
|
|
66
|
-
onKeyUp: function onKeyUp(evt) {
|
|
67
|
-
if (match(evt, Enter)) {
|
|
68
|
-
input.checked = !input.checked;
|
|
69
|
-
_onChange && _onChange(evt);
|
|
70
|
-
onToggle(input.checked, id, evt);
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
})), /*#__PURE__*/React__default.createElement("label", {
|
|
74
|
-
className: "".concat(prefix, "--toggle-input__label"),
|
|
75
|
-
htmlFor: id,
|
|
76
|
-
"aria-label": ariaLabel
|
|
77
|
-
}, labelText, /*#__PURE__*/React__default.createElement("span", {
|
|
78
|
-
className: "".concat(prefix, "--toggle__switch")
|
|
79
|
-
}, /*#__PURE__*/React__default.createElement("svg", {
|
|
80
|
-
className: "".concat(prefix, "--toggle__check"),
|
|
81
|
-
width: "6px",
|
|
82
|
-
height: "5px",
|
|
83
|
-
viewBox: "0 0 6 5"
|
|
84
|
-
}, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
|
|
85
|
-
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
86
|
-
}))), /*#__PURE__*/React__default.createElement("span", {
|
|
87
|
-
className: "".concat(prefix, "--toggle__text--off"),
|
|
88
|
-
"aria-hidden": "true"
|
|
89
|
-
}, labelA), /*#__PURE__*/React__default.createElement("span", {
|
|
90
|
-
className: "".concat(prefix, "--toggle__text--on"),
|
|
91
|
-
"aria-hidden": "true"
|
|
92
|
-
}, labelB))));
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
ToggleSmall.propTypes = (_ToggleSmall$propType = {}, _defineProperty(_ToggleSmall$propType, 'aria-label', PropTypes.string.isRequired), _defineProperty(_ToggleSmall$propType, "className", PropTypes.string), _defineProperty(_ToggleSmall$propType, "defaultToggled", PropTypes.bool), _defineProperty(_ToggleSmall$propType, "id", PropTypes.string.isRequired), _defineProperty(_ToggleSmall$propType, "labelA", PropTypes.node.isRequired), _defineProperty(_ToggleSmall$propType, "labelB", PropTypes.node.isRequired), _defineProperty(_ToggleSmall$propType, "labelText", PropTypes.node), _defineProperty(_ToggleSmall$propType, "onChange", PropTypes.func), _defineProperty(_ToggleSmall$propType, "onToggle", PropTypes.func), _defineProperty(_ToggleSmall$propType, "toggled", PropTypes.bool), _ToggleSmall$propType);
|
|
96
|
-
ToggleSmall.defaultProps = {
|
|
97
|
-
defaultToggled: false,
|
|
98
|
-
onToggle: function onToggle() {},
|
|
99
|
-
labelA: 'Off',
|
|
100
|
-
labelB: 'On'
|
|
101
|
-
};
|
|
102
|
-
var ToggleSmall$1 = ToggleSmall;
|
|
103
|
-
|
|
104
|
-
export { ToggleSmall$1 as default };
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2021
|
|
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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React__default from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import ToolbarSearch from '../ToolbarSearch/ToolbarSearch.js';
|
|
12
|
-
import cx from 'classnames';
|
|
13
|
-
import { warning } from '../../internal/warning.js';
|
|
14
|
-
import { usePrefix } from '../../internal/usePrefix.js';
|
|
15
|
-
|
|
16
|
-
var _excluded = ["children", "className"];
|
|
17
|
-
var didWarnAboutDeprecation = false;
|
|
18
|
-
|
|
19
|
-
var Toolbar = function Toolbar(_ref) {
|
|
20
|
-
var children = _ref.children,
|
|
21
|
-
className = _ref.className,
|
|
22
|
-
other = _objectWithoutProperties(_ref, _excluded);
|
|
23
|
-
|
|
24
|
-
var prefix = usePrefix();
|
|
25
|
-
var wrapperClasses = cx("".concat(prefix, "--toolbar"), className);
|
|
26
|
-
|
|
27
|
-
if (process.env.NODE_ENV !== "production") {
|
|
28
|
-
process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, 'The Toolbar component has been deprecated and will be removed in the next major release of `carbon-components-react`') : void 0;
|
|
29
|
-
didWarnAboutDeprecation = true;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
33
|
-
className: wrapperClasses
|
|
34
|
-
}, other), children);
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
Toolbar.propTypes = {
|
|
38
|
-
/**
|
|
39
|
-
* Specify a collection of ToolbarItem's that should render in the Toolbar
|
|
40
|
-
*/
|
|
41
|
-
children: PropTypes.node,
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Specify an optional className to be applied to the containing Toolbar node
|
|
45
|
-
*/
|
|
46
|
-
className: PropTypes.string
|
|
47
|
-
};
|
|
48
|
-
var ToolbarItem = function ToolbarItem(_ref2) {
|
|
49
|
-
var children = _ref2.children,
|
|
50
|
-
type = _ref2.type,
|
|
51
|
-
placeHolderText = _ref2.placeHolderText;
|
|
52
|
-
var toolbarItem = type === 'search' ? /*#__PURE__*/React__default.createElement(ToolbarSearch, {
|
|
53
|
-
placeHolderText: placeHolderText
|
|
54
|
-
}) : children;
|
|
55
|
-
return toolbarItem;
|
|
56
|
-
};
|
|
57
|
-
ToolbarItem.propTypes = {
|
|
58
|
-
/**
|
|
59
|
-
* Specify the contents of the ToolbarItem
|
|
60
|
-
*/
|
|
61
|
-
children: PropTypes.node,
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* Specify the placeholder text for the ToolbarSearch component. Useful if
|
|
65
|
-
* `type` is set to 'search'
|
|
66
|
-
*/
|
|
67
|
-
placeHolderText: PropTypes.string,
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Specify the type of the ToolbarItem. The `search` type will render a
|
|
71
|
-
* `ToolbarSearch` component
|
|
72
|
-
*/
|
|
73
|
-
type: PropTypes.string
|
|
74
|
-
};
|
|
75
|
-
ToolbarItem.defaultProps = {
|
|
76
|
-
placeHolderText: 'Provide placeHolderText'
|
|
77
|
-
}; // eslint-disable-next-line react/display-name
|
|
78
|
-
|
|
79
|
-
var ToolbarTitle = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
|
|
80
|
-
var title = _ref3.title;
|
|
81
|
-
var prefix = usePrefix();
|
|
82
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
83
|
-
ref: ref,
|
|
84
|
-
className: "".concat(prefix, "--toolbar-menu__title")
|
|
85
|
-
}, title);
|
|
86
|
-
});
|
|
87
|
-
ToolbarTitle.displayName = 'ToolbarTitle';
|
|
88
|
-
ToolbarTitle.propTypes = {
|
|
89
|
-
/**
|
|
90
|
-
* Specify the title of the Toolbar
|
|
91
|
-
*/
|
|
92
|
-
title: PropTypes.string
|
|
93
|
-
}; // eslint-disable-next-line react/display-name
|
|
94
|
-
|
|
95
|
-
var ToolbarOption = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
|
|
96
|
-
var children = _ref4.children;
|
|
97
|
-
var prefix = usePrefix();
|
|
98
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
99
|
-
ref: ref,
|
|
100
|
-
className: "".concat(prefix, "--toolbar-menu__option")
|
|
101
|
-
}, children);
|
|
102
|
-
});
|
|
103
|
-
ToolbarOption.displayName = 'ToolbarOption';
|
|
104
|
-
ToolbarOption.propTypes = {
|
|
105
|
-
/**
|
|
106
|
-
* Specify the contents of the ToolbarOption
|
|
107
|
-
*/
|
|
108
|
-
children: PropTypes.node
|
|
109
|
-
}; // eslint-disable-next-line react/display-name
|
|
110
|
-
|
|
111
|
-
var ToolbarDivider = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
112
|
-
var prefix = usePrefix();
|
|
113
|
-
return /*#__PURE__*/React__default.createElement("hr", {
|
|
114
|
-
ref: ref,
|
|
115
|
-
className: "".concat(prefix, "--toolbar-menu__divider")
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
ToolbarDivider.displayName = 'ToolbarDivider';
|
|
119
|
-
var Toolbar$1 = Toolbar;
|
|
120
|
-
|
|
121
|
-
export { ToolbarDivider, ToolbarItem, ToolbarOption, ToolbarTitle, Toolbar$1 as default };
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2021
|
|
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 { 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 React__default, { Component } from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import cx from 'classnames';
|
|
12
|
-
import { Search } from '@carbon/icons-react';
|
|
13
|
-
import ClickListener from '../../internal/ClickListener.js';
|
|
14
|
-
import { warning } from '../../internal/warning.js';
|
|
15
|
-
import { PrefixContext } from '../../internal/usePrefix.js';
|
|
16
|
-
|
|
17
|
-
var _excluded = ["className", "type", "id", "placeHolderText", "labelText", "role", "labelId"];
|
|
18
|
-
var didWarnAboutDeprecation = false;
|
|
19
|
-
|
|
20
|
-
var ToolbarSearch = /*#__PURE__*/function (_Component) {
|
|
21
|
-
_inherits(ToolbarSearch, _Component);
|
|
22
|
-
|
|
23
|
-
var _super = _createSuper(ToolbarSearch);
|
|
24
|
-
|
|
25
|
-
function ToolbarSearch(props) {
|
|
26
|
-
var _this;
|
|
27
|
-
|
|
28
|
-
_classCallCheck(this, ToolbarSearch);
|
|
29
|
-
|
|
30
|
-
_this = _super.call(this, props);
|
|
31
|
-
|
|
32
|
-
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
33
|
-
expanded: false
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
_defineProperty(_assertThisInitialized(_this), "expandSearch", function () {
|
|
37
|
-
_this.setState({
|
|
38
|
-
expanded: !_this.state.expanded
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
_this.input.focus();
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
_defineProperty(_assertThisInitialized(_this), "handleClickOutside", function () {
|
|
45
|
-
_this.setState({
|
|
46
|
-
expanded: false
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
|
|
50
|
-
if (process.env.NODE_ENV !== "production") {
|
|
51
|
-
process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, 'The ToolbarSearch component has been deprecated and will be removed in the next major release of `carbon-components-react`') : void 0;
|
|
52
|
-
didWarnAboutDeprecation = true;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return _this;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
_createClass(ToolbarSearch, [{
|
|
59
|
-
key: "render",
|
|
60
|
-
value: function render() {
|
|
61
|
-
var _classNames,
|
|
62
|
-
_this2 = this;
|
|
63
|
-
|
|
64
|
-
var prefix = this.context;
|
|
65
|
-
|
|
66
|
-
var _this$props = this.props,
|
|
67
|
-
className = _this$props.className,
|
|
68
|
-
type = _this$props.type,
|
|
69
|
-
id = _this$props.id,
|
|
70
|
-
placeHolderText = _this$props.placeHolderText,
|
|
71
|
-
labelText = _this$props.labelText,
|
|
72
|
-
role = _this$props.role,
|
|
73
|
-
labelId = _this$props.labelId,
|
|
74
|
-
other = _objectWithoutProperties(_this$props, _excluded);
|
|
75
|
-
|
|
76
|
-
var searchClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--search ").concat(prefix, "--search--sm ").concat(prefix, "--toolbar-search"), true), _defineProperty(_classNames, "".concat(prefix, "--toolbar-search--active"), this.state.expanded), _defineProperty(_classNames, className, className), _classNames));
|
|
77
|
-
return /*#__PURE__*/React__default.createElement(ClickListener, {
|
|
78
|
-
onClickOutside: this.handleClickOutside
|
|
79
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
80
|
-
className: searchClasses,
|
|
81
|
-
role: role
|
|
82
|
-
}, /*#__PURE__*/React__default.createElement("label", {
|
|
83
|
-
htmlFor: id,
|
|
84
|
-
className: "".concat(prefix, "--label"),
|
|
85
|
-
id: labelId
|
|
86
|
-
}, labelText), /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
|
|
87
|
-
type: type,
|
|
88
|
-
className: "".concat(prefix, "--search-input"),
|
|
89
|
-
id: id,
|
|
90
|
-
"aria-labelledby": labelId,
|
|
91
|
-
placeholder: placeHolderText,
|
|
92
|
-
ref: function ref(input) {
|
|
93
|
-
_this2.input = input;
|
|
94
|
-
}
|
|
95
|
-
})), /*#__PURE__*/React__default.createElement("button", {
|
|
96
|
-
type: "button",
|
|
97
|
-
className: "".concat(prefix, "--toolbar-search__btn"),
|
|
98
|
-
title: labelText,
|
|
99
|
-
onClick: this.expandSearch
|
|
100
|
-
}, /*#__PURE__*/React__default.createElement(Search, {
|
|
101
|
-
className: "".concat(prefix, "--search-magnifier"),
|
|
102
|
-
"aria-label": labelText
|
|
103
|
-
}))));
|
|
104
|
-
}
|
|
105
|
-
}]);
|
|
106
|
-
|
|
107
|
-
return ToolbarSearch;
|
|
108
|
-
}(Component);
|
|
109
|
-
|
|
110
|
-
_defineProperty(ToolbarSearch, "contextType", PrefixContext);
|
|
111
|
-
|
|
112
|
-
_defineProperty(ToolbarSearch, "propTypes", {
|
|
113
|
-
/**
|
|
114
|
-
* The child nodes.
|
|
115
|
-
*/
|
|
116
|
-
children: PropTypes.node,
|
|
117
|
-
|
|
118
|
-
/**
|
|
119
|
-
* The CSS class names.
|
|
120
|
-
*/
|
|
121
|
-
className: PropTypes.string,
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
* The ID of the `<input>`.
|
|
125
|
-
*/
|
|
126
|
-
id: PropTypes.string,
|
|
127
|
-
|
|
128
|
-
/**
|
|
129
|
-
* The ID of the `<label>`.
|
|
130
|
-
*/
|
|
131
|
-
labelId: PropTypes.string,
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* The text in the `<label>`.
|
|
135
|
-
*/
|
|
136
|
-
labelText: PropTypes.node,
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* The placeholder text of the `<input>`.
|
|
140
|
-
*/
|
|
141
|
-
placeHolderText: PropTypes.string,
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
* Optional prop to specify the role of the ToolbarSearch
|
|
145
|
-
*/
|
|
146
|
-
role: PropTypes.string,
|
|
147
|
-
|
|
148
|
-
/**
|
|
149
|
-
* `true` to use the small version of the UI.
|
|
150
|
-
*/
|
|
151
|
-
small: PropTypes.bool,
|
|
152
|
-
|
|
153
|
-
/**
|
|
154
|
-
* The `type` of the `<input>`.
|
|
155
|
-
*/
|
|
156
|
-
type: PropTypes.string
|
|
157
|
-
});
|
|
158
|
-
|
|
159
|
-
_defineProperty(ToolbarSearch, "defaultProps", {
|
|
160
|
-
type: 'search',
|
|
161
|
-
id: 'search__input',
|
|
162
|
-
labelText: '',
|
|
163
|
-
placeHolderText: '',
|
|
164
|
-
role: 'search',
|
|
165
|
-
labelId: 'search__label'
|
|
166
|
-
});
|
|
167
|
-
|
|
168
|
-
export { ToolbarSearch as default };
|