@carbon/react 1.68.0-rc.0 → 1.69.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 (112) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +743 -743
  2. package/README.md +3 -3
  3. package/es/components/Accordion/AccordionItem.js +0 -1
  4. package/es/components/Button/Button.js +6 -0
  5. package/es/components/CheckboxGroup/CheckboxGroup.js +1 -2
  6. package/es/components/CheckboxGroup/index.d.ts +10 -0
  7. package/es/components/ComboBox/ComboBox.d.ts +5 -0
  8. package/es/components/ComboBox/ComboBox.js +139 -54
  9. package/es/components/ComboButton/index.js +10 -3
  10. package/es/components/DataTable/TableCell.d.ts +1 -4
  11. package/es/components/DataTable/TableCell.js +3 -2
  12. package/es/components/DatePicker/DatePicker.js +10 -6
  13. package/es/components/Disclosure/index.d.ts +18 -0
  14. package/es/components/Dropdown/Dropdown.js +11 -9
  15. package/es/components/FileUploader/FileUploader.d.ts +8 -92
  16. package/es/components/FileUploader/FileUploader.js +116 -137
  17. package/es/components/FileUploader/FileUploaderDropContainer.js +1 -1
  18. package/es/components/FluidComboBox/FluidComboBox.Skeleton.d.ts +15 -0
  19. package/es/components/FluidComboBox/FluidComboBox.Skeleton.js +1 -2
  20. package/es/components/FluidComboBox/FluidComboBox.d.ts +102 -0
  21. package/es/components/FluidComboBox/FluidComboBox.js +2 -3
  22. package/es/components/FluidComboBox/index.d.ts +13 -0
  23. package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.d.ts +19 -0
  24. package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js +2 -2
  25. package/es/components/FluidDatePicker/FluidDatePicker.d.ts +39 -0
  26. package/es/components/FluidDatePicker/FluidDatePicker.js +2 -3
  27. package/es/components/FluidDatePicker/index.d.ts +13 -0
  28. package/es/components/FluidDatePickerInput/FluidDatePickerInput.d.ts +10 -0
  29. package/es/components/FluidDatePickerInput/FluidDatePickerInput.js +1 -2
  30. package/es/components/FluidDatePickerInput/index.d.ts +9 -0
  31. package/es/components/IdPrefix/index.d.ts +26 -0
  32. package/es/components/Menu/MenuItem.js +1 -4
  33. package/es/components/MenuButton/index.d.ts +4 -0
  34. package/es/components/MenuButton/index.js +19 -5
  35. package/es/components/MultiSelect/MultiSelect.js +11 -9
  36. package/es/components/OverflowMenu/next/index.d.ts +4 -0
  37. package/es/components/OverflowMenu/next/index.js +19 -9
  38. package/es/components/PaginationNav/PaginationNav.js +1 -1
  39. package/es/components/Popover/index.js +18 -14
  40. package/es/components/Portal/index.d.ts +25 -0
  41. package/es/components/Slider/Slider.js +2 -2
  42. package/es/components/Tabs/usePressable.js +2 -0
  43. package/es/components/Tag/DismissibleTag.js +2 -2
  44. package/es/components/Tag/OperationalTag.d.ts +2 -10
  45. package/es/components/Tag/OperationalTag.js +2 -14
  46. package/es/components/Tag/SelectableTag.d.ts +2 -10
  47. package/es/components/Tag/SelectableTag.js +2 -16
  48. package/es/components/Toggle/Toggle.js +2 -0
  49. package/es/components/ToggleSmall/ToggleSmall.Skeleton.d.ts +49 -0
  50. package/es/components/ToggleSmall/index.d.ts +7 -0
  51. package/es/components/TreeView/TreeNode.js +4 -2
  52. package/es/components/TreeView/TreeView.js +4 -4
  53. package/es/components/UIShell/SideNavMenuItem.d.ts +4 -3
  54. package/es/components/UIShell/SideNavMenuItem.js +1 -4
  55. package/es/index.js +6 -6
  56. package/es/internal/useIdPrefix.d.ts +9 -0
  57. package/lib/components/Accordion/AccordionItem.js +0 -1
  58. package/lib/components/Button/Button.js +6 -0
  59. package/lib/components/CheckboxGroup/CheckboxGroup.js +1 -2
  60. package/lib/components/CheckboxGroup/index.d.ts +10 -0
  61. package/lib/components/ComboBox/ComboBox.d.ts +5 -0
  62. package/lib/components/ComboBox/ComboBox.js +144 -59
  63. package/lib/components/ComboButton/index.js +12 -5
  64. package/lib/components/DataTable/TableCell.d.ts +1 -4
  65. package/lib/components/DataTable/TableCell.js +3 -2
  66. package/lib/components/DatePicker/DatePicker.js +9 -5
  67. package/lib/components/Disclosure/index.d.ts +18 -0
  68. package/lib/components/Dropdown/Dropdown.js +18 -16
  69. package/lib/components/FileUploader/FileUploader.d.ts +8 -92
  70. package/lib/components/FileUploader/FileUploader.js +113 -134
  71. package/lib/components/FileUploader/FileUploaderDropContainer.js +1 -1
  72. package/lib/components/FluidComboBox/FluidComboBox.Skeleton.d.ts +15 -0
  73. package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js +1 -2
  74. package/lib/components/FluidComboBox/FluidComboBox.d.ts +102 -0
  75. package/lib/components/FluidComboBox/FluidComboBox.js +2 -3
  76. package/lib/components/FluidComboBox/index.d.ts +13 -0
  77. package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.d.ts +19 -0
  78. package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js +2 -2
  79. package/lib/components/FluidDatePicker/FluidDatePicker.d.ts +39 -0
  80. package/lib/components/FluidDatePicker/FluidDatePicker.js +3 -4
  81. package/lib/components/FluidDatePicker/index.d.ts +13 -0
  82. package/lib/components/FluidDatePickerInput/FluidDatePickerInput.d.ts +10 -0
  83. package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js +1 -2
  84. package/lib/components/FluidDatePickerInput/index.d.ts +9 -0
  85. package/lib/components/IdPrefix/index.d.ts +26 -0
  86. package/lib/components/Menu/MenuItem.js +1 -4
  87. package/lib/components/MenuButton/index.d.ts +4 -0
  88. package/lib/components/MenuButton/index.js +19 -5
  89. package/lib/components/MultiSelect/MultiSelect.js +18 -16
  90. package/lib/components/OverflowMenu/next/index.d.ts +4 -0
  91. package/lib/components/OverflowMenu/next/index.js +21 -11
  92. package/lib/components/PaginationNav/PaginationNav.js +1 -1
  93. package/lib/components/Popover/index.js +18 -14
  94. package/lib/components/Portal/index.d.ts +25 -0
  95. package/lib/components/Slider/Slider.js +2 -2
  96. package/lib/components/Tabs/usePressable.js +2 -0
  97. package/lib/components/Tag/DismissibleTag.js +2 -2
  98. package/lib/components/Tag/OperationalTag.d.ts +2 -10
  99. package/lib/components/Tag/OperationalTag.js +2 -14
  100. package/lib/components/Tag/SelectableTag.d.ts +2 -10
  101. package/lib/components/Tag/SelectableTag.js +2 -16
  102. package/lib/components/Toggle/Toggle.js +2 -0
  103. package/lib/components/ToggleSmall/ToggleSmall.Skeleton.d.ts +49 -0
  104. package/lib/components/ToggleSmall/index.d.ts +7 -0
  105. package/lib/components/TreeView/TreeNode.js +4 -2
  106. package/lib/components/TreeView/TreeView.js +4 -4
  107. package/lib/components/UIShell/SideNavMenuItem.d.ts +4 -3
  108. package/lib/components/UIShell/SideNavMenuItem.js +1 -4
  109. package/lib/index.js +12 -12
  110. package/lib/internal/useIdPrefix.d.ts +9 -0
  111. package/package.json +7 -7
  112. package/telemetry.yml +809 -809
@@ -4,8 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import PropTypes from 'prop-types';
8
- import React from 'react';
7
+ import { ReactElement } from 'react';
9
8
  import { ReactAttr } from '../../types/common';
10
9
  export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
11
10
  /**
@@ -74,93 +73,10 @@ export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
74
73
  */
75
74
  size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
76
75
  }
77
- export default class FileUploader extends React.Component<FileUploaderProps, {
78
- filenames: string[];
79
- }> {
80
- static propTypes: {
81
- /**
82
- * Specify the types of files that this input should be able to receive
83
- */
84
- accept: PropTypes.Requireable<(string | null | undefined)[]>;
85
- /**
86
- * Specify the type of the `<FileUploaderButton>`
87
- */
88
- buttonKind: PropTypes.Requireable<string>;
89
- /**
90
- * Provide the label text to be read by screen readers when interacting with
91
- * the `<FileUploaderButton>`
92
- */
93
- buttonLabel: PropTypes.Requireable<string>;
94
- /**
95
- * Provide a custom className to be applied to the container node
96
- */
97
- className: PropTypes.Requireable<string>;
98
- /**
99
- * Specify whether file input is disabled
100
- */
101
- disabled: PropTypes.Requireable<boolean>;
102
- /**
103
- * Specify the status of the File Upload
104
- */
105
- filenameStatus: PropTypes.Validator<string>;
106
- /**
107
- * Provide a description for the complete/close icon that can be read by screen readers
108
- */
109
- iconDescription: PropTypes.Requireable<string>;
110
- /**
111
- * Specify the description text of this `<FileUploader>`
112
- */
113
- labelDescription: PropTypes.Requireable<string>;
114
- /**
115
- * Specify the title text of this `<FileUploader>`
116
- */
117
- labelTitle: PropTypes.Requireable<string>;
118
- /**
119
- * Specify if the component should accept multiple files to upload
120
- */
121
- multiple: PropTypes.Requireable<boolean>;
122
- /**
123
- * Provide a name for the underlying `<input>` node
124
- */
125
- name: PropTypes.Requireable<string>;
126
- /**
127
- * Provide an optional `onChange` hook that is called each time the input is
128
- * changed
129
- */
130
- onChange: PropTypes.Requireable<(...args: any[]) => any>;
131
- /**
132
- * Provide an optional `onClick` hook that is called each time the
133
- * FileUploader is clicked
134
- */
135
- onClick: PropTypes.Requireable<(...args: any[]) => any>;
136
- /**
137
- * Provide an optional `onDelete` hook that is called when an uploaded item
138
- * is removed
139
- */
140
- onDelete: PropTypes.Requireable<(...args: any[]) => any>;
141
- /**
142
- * Specify the size of the FileUploaderButton, from a list of available
143
- * sizes.
144
- */
145
- size: PropTypes.Requireable<string>;
146
- };
147
- static contextType: React.Context<string>;
148
- state: {
149
- filenames: string[];
150
- };
151
- nodes: HTMLElement[];
152
- uploaderButton: React.RefObject<HTMLLabelElement>;
153
- static getDerivedStateFromProps({ filenameStatus }: {
154
- filenameStatus: any;
155
- }, state: any): {
156
- filenameStatus: any;
157
- prevFilenameStatus: any;
158
- } | null;
159
- handleChange: (evt: any) => void;
160
- handleClick: (evt: any, { index, filenameStatus }: {
161
- index: any;
162
- filenameStatus: any;
163
- }) => void;
164
- clearFiles: () => void;
165
- render(): import("react/jsx-runtime").JSX.Element;
166
- }
76
+ declare const FileUploader: {
77
+ <ItemType>(props: FileUploaderProps): ReactElement;
78
+ propTypes?: any;
79
+ contextTypes?: any;
80
+ defaultProps?: any;
81
+ };
82
+ export default FileUploader;
@@ -18,6 +18,7 @@ var FileUploaderButton = require('./FileUploaderButton.js');
18
18
  var types = require('../../prop-types/types.js');
19
19
  var usePrefix = require('../../internal/usePrefix.js');
20
20
  require('../Text/index.js');
21
+ var useId = require('../../internal/useId.js');
21
22
  var Text = require('../Text/Text.js');
22
23
  var match = require('../../internal/keyboard/match.js');
23
24
  var keys = require('../../internal/keyboard/keys.js');
@@ -28,144 +29,123 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
28
29
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
29
30
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
30
31
 
31
- class FileUploader extends React__default["default"].Component {
32
- constructor() {
33
- super(...arguments);
34
- _rollupPluginBabelHelpers.defineProperty(this, "state", {
35
- filenames: []
36
- });
37
- _rollupPluginBabelHelpers.defineProperty(this, "nodes", []);
38
- _rollupPluginBabelHelpers.defineProperty(this, "uploaderButton", /*#__PURE__*/React__default["default"].createRef());
39
- _rollupPluginBabelHelpers.defineProperty(this, "handleChange", evt => {
32
+ const FileUploader = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
33
+ let {
34
+ accept,
35
+ buttonKind,
36
+ buttonLabel,
37
+ className,
38
+ disabled,
39
+ filenameStatus,
40
+ iconDescription,
41
+ labelDescription,
42
+ labelTitle,
43
+ multiple,
44
+ name,
45
+ onChange,
46
+ onClick,
47
+ onDelete,
48
+ size,
49
+ ...other
50
+ } = _ref;
51
+ const fileUploaderInstanceId = useId.useId('file-uploader');
52
+ const [state, updateState] = React.useState({
53
+ fileNames: []
54
+ });
55
+ const nodes = [];
56
+ const prefix = usePrefix.usePrefix();
57
+ const handleChange = evt => {
58
+ evt.stopPropagation();
59
+ const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
60
+ updateState(prevState => ({
61
+ fileNames: multiple ? [...new Set([...prevState.fileNames, ...filenames])] : filenames
62
+ }));
63
+ if (onChange) {
64
+ onChange(evt);
65
+ }
66
+ };
67
+ const handleClick = (evt, _ref2) => {
68
+ let {
69
+ index,
70
+ filenameStatus
71
+ } = _ref2;
72
+ if (filenameStatus === 'edit') {
40
73
  evt.stopPropagation();
41
- const filenames = Array.prototype.map.call(evt.target.files, file => file.name);
42
- this.setState({
43
- filenames: this.props.multiple ? [...new Set([...this.state.filenames, ...filenames])] : filenames
74
+ const filteredArray = state.fileNames.filter(filename => filename !== nodes[index]?.innerText?.trim());
75
+ updateState({
76
+ fileNames: filteredArray
44
77
  });
45
- if (this.props.onChange) {
46
- this.props.onChange(evt);
78
+ if (onDelete) {
79
+ onDelete(evt);
80
+ uploaderButton.current?.focus?.();
47
81
  }
48
- });
49
- _rollupPluginBabelHelpers.defineProperty(this, "handleClick", (evt, _ref) => {
50
- let {
51
- index,
52
- filenameStatus
53
- } = _ref;
54
- if (filenameStatus === 'edit') {
55
- evt.stopPropagation();
56
- const filteredArray = this.state.filenames.filter(filename => filename !== this.nodes[index].innerText.trim());
57
- this.setState({
58
- filenames: filteredArray
82
+ onClick?.(evt);
83
+ }
84
+ };
85
+ const uploaderButton = /*#__PURE__*/React__default["default"].createRef();
86
+ const classes = cx__default["default"]({
87
+ [`${prefix}--form-item`]: true,
88
+ [className]: className
89
+ });
90
+ const getHelperLabelClasses = baseClass => cx__default["default"](baseClass, {
91
+ [`${prefix}--label-description--disabled`]: disabled
92
+ });
93
+ const selectedFileClasses = cx__default["default"](`${prefix}--file__selected-file`, {
94
+ [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
95
+ [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
96
+ });
97
+ return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
98
+ className: classes
99
+ }, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
100
+ as: "h3",
101
+ className: getHelperLabelClasses(`${prefix}--file--label`)
102
+ }, labelTitle), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
103
+ as: "p",
104
+ className: getHelperLabelClasses(`${prefix}--label-description`),
105
+ id: fileUploaderInstanceId
106
+ }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
107
+ innerRef: uploaderButton,
108
+ disabled: disabled,
109
+ labelText: buttonLabel,
110
+ multiple: multiple,
111
+ buttonKind: buttonKind,
112
+ onChange: handleChange,
113
+ disableLabelChanges: true,
114
+ accept: accept,
115
+ name: name,
116
+ size: size,
117
+ "aria-describedby": fileUploaderInstanceId
118
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
119
+ className: `${prefix}--file-container`
120
+ }, state.fileNames.length === 0 ? null : state.fileNames.map((name, index) => /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
121
+ key: index,
122
+ className: selectedFileClasses,
123
+ ref: node => nodes[index] = node // eslint-disable-line
124
+ }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
125
+ as: "p",
126
+ className: `${prefix}--file-filename`,
127
+ id: name
128
+ }, name), /*#__PURE__*/React__default["default"].createElement("span", {
129
+ className: `${prefix}--file__state-container`
130
+ }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
131
+ name: name,
132
+ iconDescription: iconDescription,
133
+ status: filenameStatus,
134
+ onKeyDown: evt => {
135
+ if (match.matches(evt, [keys.Enter, keys.Space])) {
136
+ handleClick(evt, {
137
+ index,
138
+ filenameStatus
59
139
  });
60
- if (this.props.onDelete) {
61
- this.props.onDelete(evt);
62
- this.uploaderButton.current?.focus?.();
63
- }
64
- this.props.onClick?.(evt);
65
140
  }
66
- });
67
- _rollupPluginBabelHelpers.defineProperty(this, "clearFiles", () => {
68
- // A clearFiles function that resets filenames and can be referenced using a ref by the parent.
69
- this.setState({
70
- filenames: []
71
- });
72
- });
73
- }
74
- static getDerivedStateFromProps(_ref2, state) {
75
- let {
141
+ },
142
+ onClick: evt => handleClick(evt, {
143
+ index,
76
144
  filenameStatus
77
- } = _ref2;
78
- const {
79
- prevFilenameStatus
80
- } = state;
81
- return prevFilenameStatus === filenameStatus ? null : {
82
- filenameStatus,
83
- prevFilenameStatus: filenameStatus
84
- };
85
- }
86
- render() {
87
- const {
88
- iconDescription,
89
- buttonLabel = '',
90
- buttonKind = 'primary',
91
- disabled = false,
92
- filenameStatus = 'uploading',
93
- labelDescription,
94
- labelTitle,
95
- className,
96
- multiple = false,
97
- accept = [],
98
- name,
99
- size = 'md',
100
- onDelete,
101
- // eslint-disable-line
102
- ...other
103
- } = this.props;
104
- const prefix = this.context;
105
- const classes = cx__default["default"]({
106
- [`${prefix}--form-item`]: true,
107
- [className]: className
108
- });
109
- const getHelperLabelClasses = baseClass => cx__default["default"](baseClass, {
110
- [`${prefix}--label-description--disabled`]: disabled
111
- });
112
- const selectedFileClasses = cx__default["default"](`${prefix}--file__selected-file`, {
113
- [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
114
- [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
115
- });
116
- return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
117
- className: classes
118
- }, other), !labelTitle ? null : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
119
- as: "h3",
120
- className: getHelperLabelClasses(`${prefix}--file--label`)
121
- }, labelTitle), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
122
- as: "p",
123
- className: getHelperLabelClasses(`${prefix}--label-description`),
124
- id: "description"
125
- }, labelDescription), /*#__PURE__*/React__default["default"].createElement(FileUploaderButton["default"], {
126
- innerRef: this.uploaderButton,
127
- disabled: disabled,
128
- labelText: buttonLabel,
129
- multiple: multiple,
130
- buttonKind: buttonKind,
131
- onChange: this.handleChange,
132
- disableLabelChanges: true,
133
- accept: accept,
134
- name: name,
135
- size: size,
136
- "aria-describedby": "description"
137
- }), /*#__PURE__*/React__default["default"].createElement("div", {
138
- className: `${prefix}--file-container`
139
- }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
140
- key: index,
141
- className: selectedFileClasses,
142
- ref: node => this.nodes[index] = node // eslint-disable-line
143
- }, other), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
144
- as: "p",
145
- className: `${prefix}--file-filename`,
146
- id: name
147
- }, name), /*#__PURE__*/React__default["default"].createElement("span", {
148
- className: `${prefix}--file__state-container`
149
- }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
150
- name: name,
151
- iconDescription: iconDescription,
152
- status: filenameStatus,
153
- onKeyDown: evt => {
154
- if (match.matches(evt, [keys.Enter, keys.Space])) {
155
- this.handleClick(evt, {
156
- index,
157
- filenameStatus
158
- });
159
- }
160
- },
161
- onClick: evt => this.handleClick(evt, {
162
- index,
163
- filenameStatus
164
- })
165
- }))))));
166
- }
167
- }
168
- _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
145
+ })
146
+ }))))));
147
+ });
148
+ FileUploader.propTypes = {
169
149
  /**
170
150
  * Specify the types of files that this input should be able to receive
171
151
  */
@@ -231,7 +211,6 @@ _rollupPluginBabelHelpers.defineProperty(FileUploader, "propTypes", {
231
211
  * sizes.
232
212
  */
233
213
  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
234
- });
235
- _rollupPluginBabelHelpers.defineProperty(FileUploader, "contextType", usePrefix.PrefixContext);
214
+ };
236
215
 
237
216
  exports["default"] = FileUploader;
@@ -153,7 +153,7 @@ function FileUploaderDropContainer(_ref) {
153
153
  multiple: multiple,
154
154
  onChange: handleChange,
155
155
  onClick: evt => {
156
- evt.target.value = null;
156
+ evt.target.value = '';
157
157
  }
158
158
  }));
159
159
  }
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
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 React from 'react';
8
+ export interface FluidComboBoxSkeletonProps {
9
+ /**
10
+ * Specify an optional className to add.
11
+ */
12
+ className?: string;
13
+ }
14
+ declare const FluidComboBoxSkeleton: React.FC<FluidComboBoxSkeletonProps>;
15
+ export default FluidComboBoxSkeleton;
@@ -44,6 +44,5 @@ FluidComboBoxSkeleton.propTypes = {
44
44
  */
45
45
  className: PropTypes__default["default"].string
46
46
  };
47
- var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
48
47
 
49
- exports["default"] = FluidComboBoxSkeleton$1;
48
+ exports["default"] = FluidComboBoxSkeleton;
@@ -0,0 +1,102 @@
1
+ /**
2
+ * Copyright IBM Corp. 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
+ import React, { ComponentType } from 'react';
8
+ import { ComboBoxProps } from '../ComboBox/ComboBox';
9
+ type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
10
+ interface OnChangeData<ItemType> {
11
+ selectedItem: ItemType | null | undefined;
12
+ inputValue?: string | null;
13
+ }
14
+ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType> {
15
+ /**
16
+ * Specify an optional className to be applied to the outer FluidForm wrapper
17
+ */
18
+ className?: string;
19
+ /**
20
+ * Specify the direction of the dropdown. Can be either top or bottom.
21
+ */
22
+ direction?: 'top' | 'bottom';
23
+ /**
24
+ * Specify whether the `<input>` should be disabled
25
+ */
26
+ disabled?: boolean;
27
+ /**
28
+ * Specify a custom `id` for the `<input>`
29
+ */
30
+ id: string;
31
+ /**
32
+ * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
33
+ * from their collection that are pre-selected
34
+ */
35
+ initialSelectedItem?: ItemType;
36
+ /**
37
+ * Specify if the currently selected value is invalid.
38
+ */
39
+ invalid?: boolean;
40
+ /**
41
+ * Provide the text that is displayed when the control is in an invalid state
42
+ */
43
+ invalidText?: React.ReactNode;
44
+ /**
45
+ * Specify if the `FluidComboBox` should render its menu items in condensed mode
46
+ */
47
+ isCondensed?: boolean;
48
+ /**
49
+ * Function to render items as custom components instead of strings.
50
+ * Defaults to null and is overridden by a getter
51
+ */
52
+ itemToElement?: ComponentType<ItemType> | null;
53
+ /**
54
+ * Helper function passed to downshift that allows the library to render a
55
+ * given item to a string label. By default, it extracts the `label` field
56
+ * from a given item to serve as the item label in the list.
57
+ */
58
+ itemToString?: ItemToStringHandler<ItemType>;
59
+ /**
60
+ * We try to stay as generic as possible here to allow individuals to pass
61
+ * in a collection of whatever kind of data structure they prefer
62
+ */
63
+ items: ItemType[];
64
+ /**
65
+ * Generic `label` that will be used as the textual representation of what
66
+ * this field is for
67
+ */
68
+ label: React.ReactNode;
69
+ /**
70
+ * `onChange` is a utility for this controlled component to communicate to a
71
+ * consuming component what kind of internal state changes are occurring.
72
+ */
73
+ onChange: (data: OnChangeData<ItemType>) => void;
74
+ /**
75
+ * An optional callback to render the currently selected item as a react element instead of only
76
+ * as a string.
77
+ */
78
+ renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
79
+ /**
80
+ * In the case you want to control the dropdown selection entirely.
81
+ * */
82
+ selectedItem?: ItemType | null;
83
+ /**
84
+ * Provide the title text that will be read by a screen reader when
85
+ * visiting this control
86
+ */
87
+ titleText?: React.ReactNode;
88
+ /**
89
+ * Callback function for translating ListBoxMenuIcon SVG title
90
+ */
91
+ translateWithId?: (id: string) => string;
92
+ /**
93
+ * Specify whether the control is currently in warning state
94
+ */
95
+ warn?: boolean;
96
+ /**
97
+ * Provide the text that is displayed when the control is in warning state
98
+ */
99
+ warnText?: React.ReactNode;
100
+ }
101
+ declare const FluidComboBox: React.ForwardRefExoticComponent<FluidComboBoxProps<unknown> & React.RefAttributes<HTMLInputElement>>;
102
+ export default FluidComboBox;
@@ -101,7 +101,7 @@ FluidComboBox.propTypes = {
101
101
  * `onChange` is a utility for this controlled component to communicate to a
102
102
  * consuming component what kind of internal state changes are occurring.
103
103
  */
104
- onChange: PropTypes__default["default"].func,
104
+ onChange: PropTypes__default["default"].func.isRequired,
105
105
  /**
106
106
  * An optional callback to render the currently selected item as a react element instead of only
107
107
  * as a string.
@@ -129,6 +129,5 @@ FluidComboBox.propTypes = {
129
129
  */
130
130
  warnText: PropTypes__default["default"].node
131
131
  };
132
- var FluidComboBox$1 = FluidComboBox;
133
132
 
134
- exports["default"] = FluidComboBox$1;
133
+ exports["default"] = FluidComboBox;
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Copyright IBM Corp. 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
+ import FluidComboBox from './FluidComboBox';
8
+ import type { FluidComboBoxProps } from './FluidComboBox';
9
+ import type { FluidComboBoxSkeletonProps } from './FluidComboBox.Skeleton';
10
+ export type { FluidComboBoxProps, FluidComboBoxSkeletonProps };
11
+ export default FluidComboBox;
12
+ export { FluidComboBox };
13
+ export { default as FluidComboBoxSkeleton } from './FluidComboBox.Skeleton';
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2023
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 React from 'react';
8
+ export interface FluidDatePickerSkeletonProps {
9
+ /**
10
+ * Specify an optional className to be applied to the outer FluidForm wrapper
11
+ */
12
+ className?: string;
13
+ /**
14
+ * Specify which variant of the DatePicker the skeleton should mimic
15
+ */
16
+ datePickerType?: 'simple' | 'single' | 'range';
17
+ }
18
+ declare const FluidDatePickerSkeleton: React.FC<FluidDatePickerSkeletonProps>;
19
+ export default FluidDatePickerSkeleton;
@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
23
23
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
24
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
25
25
 
26
- function FluidDatePickerSkeleton(_ref) {
26
+ const FluidDatePickerSkeleton = _ref => {
27
27
  let {
28
28
  className,
29
29
  datePickerType = 'single',
@@ -60,7 +60,7 @@ function FluidDatePickerSkeleton(_ref) {
60
60
  role: "img",
61
61
  "aria-hidden": "true"
62
62
  }))));
63
- }
63
+ };
64
64
  FluidDatePickerSkeleton.propTypes = {
65
65
  /**
66
66
  * Specify an optional className to be applied to the outer FluidForm wrapper
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Copyright IBM Corp. 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
+ import React from 'react';
8
+ export interface FluidDatePickerProps {
9
+ /**
10
+ * The child node(s)
11
+ */
12
+ children?: React.ReactNode;
13
+ /**
14
+ * Specify an optional className to be applied to the outer FluidForm wrapper
15
+ */
16
+ className?: string;
17
+ /**
18
+ * Specify whether or not the control is invalid
19
+ */
20
+ invalid?: boolean;
21
+ /**
22
+ * Provide the text that is displayed when the control is in error state
23
+ */
24
+ invalidText?: React.ReactNode;
25
+ /**
26
+ * Whether the input should be read-only
27
+ */
28
+ readOnly?: boolean;
29
+ /**
30
+ * Specify whether the control is currently in warning state
31
+ */
32
+ warn?: boolean;
33
+ /**
34
+ * Provide the text that is displayed when the control is in warning state
35
+ */
36
+ warnText?: React.ReactNode;
37
+ }
38
+ declare const FluidDatePicker: React.FC<FluidDatePickerProps>;
39
+ export default FluidDatePicker;
@@ -11,18 +11,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
13
  var PropTypes = require('prop-types');
14
- var React = require('react');
15
14
  var cx = require('classnames');
16
15
  var DatePicker = require('../DatePicker/DatePicker.js');
17
16
  require('../DatePicker/DatePicker.Skeleton.js');
18
17
  var usePrefix = require('../../internal/usePrefix.js');
19
18
  var FormContext = require('../FluidForm/FormContext.js');
19
+ var React = require('react');
20
20
 
21
21
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
22
22
 
23
23
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
24
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
25
24
  var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
25
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
26
26
 
27
27
  const FluidDatePicker = /*#__PURE__*/React__default["default"].forwardRef(function FluidDatePicker(_ref, ref) {
28
28
  let {
@@ -86,6 +86,5 @@ FluidDatePicker.propTypes = {
86
86
  */
87
87
  warnText: PropTypes__default["default"].node
88
88
  };
89
- var FluidDatePicker$1 = FluidDatePicker;
90
89
 
91
- exports["default"] = FluidDatePicker$1;
90
+ exports["default"] = FluidDatePicker;
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Copyright IBM Corp. 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
+ import FluidDatePicker from './FluidDatePicker';
8
+ import type { FluidDatePickerProps } from './FluidDatePicker';
9
+ import { FluidDatePickerSkeletonProps } from './FluidDatePicker.Skeleton';
10
+ export type { FluidDatePickerProps, FluidDatePickerSkeletonProps };
11
+ export { default as FluidDatePickerSkeleton } from './FluidDatePicker.Skeleton';
12
+ export default FluidDatePicker;
13
+ export { FluidDatePicker };