@carbon/react 1.66.0 → 1.67.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 (100) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +971 -911
  2. package/es/components/ComboBox/ComboBox.js +11 -2
  3. package/es/components/ComboButton/index.js +1 -1
  4. package/es/components/DataTable/TableExpandHeader.d.ts +2 -2
  5. package/es/components/DataTable/TableExpandHeader.js +1 -1
  6. package/es/components/DatePicker/DatePicker.js +1 -0
  7. package/es/components/Dropdown/Dropdown.js +1 -1
  8. package/es/components/FeatureFlags/index.js +27 -7
  9. package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +15 -0
  10. package/es/components/FluidNumberInput/FluidNumberInput.d.ts +95 -0
  11. package/es/components/FluidNumberInput/index.d.ts +11 -0
  12. package/es/components/FluidSearch/FluidSearch.Skeleton.d.ts +15 -0
  13. package/es/components/FluidSearch/FluidSearch.Skeleton.js +2 -2
  14. package/es/components/FluidSearch/FluidSearch.d.ts +73 -0
  15. package/es/components/FluidSearch/FluidSearch.js +1 -2
  16. package/es/components/FluidSearch/index.d.ts +11 -0
  17. package/es/components/FluidSelect/FluidSelect.Skeleton.d.ts +15 -0
  18. package/es/components/FluidSelect/FluidSelect.Skeleton.js +1 -2
  19. package/es/components/FluidSelect/FluidSelect.d.ts +57 -0
  20. package/es/components/FluidSelect/FluidSelect.js +1 -2
  21. package/es/components/FluidSelect/index.d.ts +13 -0
  22. package/es/components/FluidSelect/index.js +1 -0
  23. package/es/components/FluidTextInput/FluidPasswordInput.d.ts +83 -0
  24. package/es/components/FluidTextInput/FluidPasswordInput.js +87 -0
  25. package/es/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +15 -0
  26. package/es/components/FluidTextInput/FluidTextInput.Skeleton.js +2 -2
  27. package/es/components/FluidTextInput/FluidTextInput.d.ts +70 -0
  28. package/es/components/FluidTextInput/FluidTextInput.js +6 -4
  29. package/es/components/FluidTextInput/index.d.ts +15 -0
  30. package/es/components/FluidTextInput/index.js +2 -0
  31. package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.d.ts +35 -0
  32. package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js +4 -2
  33. package/es/components/FluidTimePicker/FluidTimePicker.d.ts +45 -0
  34. package/es/components/FluidTimePicker/FluidTimePicker.js +5 -5
  35. package/es/components/FluidTimePicker/index.d.ts +13 -0
  36. package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +41 -0
  37. package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +2 -2
  38. package/es/components/FluidTimePickerSelect/index.d.ts +11 -0
  39. package/es/components/MultiSelect/FilterableMultiSelect.js +4 -4
  40. package/es/components/MultiSelect/MultiSelect.js +1 -1
  41. package/es/components/Notification/Notification.js +4 -2
  42. package/es/components/OverflowMenuV2/index.js +1 -3
  43. package/es/components/Pagination/Pagination.js +1 -1
  44. package/es/components/Popover/index.js +1 -1
  45. package/es/components/Tabs/Tabs.js +1 -1
  46. package/es/components/UIShell/HeaderPanel.js +1 -1
  47. package/es/index.js +10 -9
  48. package/es/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +757 -4
  49. package/es/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +76 -0
  50. package/es/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +106 -6
  51. package/lib/components/ComboBox/ComboBox.js +12 -3
  52. package/lib/components/ComboButton/index.js +2 -2
  53. package/lib/components/DataTable/TableExpandHeader.d.ts +2 -2
  54. package/lib/components/DataTable/TableExpandHeader.js +1 -1
  55. package/lib/components/DatePicker/DatePicker.js +1 -0
  56. package/lib/components/Dropdown/Dropdown.js +2 -2
  57. package/lib/components/FeatureFlags/index.js +27 -7
  58. package/lib/components/FluidNumberInput/FluidNumberInput.Skeleton.d.ts +15 -0
  59. package/lib/components/FluidNumberInput/FluidNumberInput.d.ts +95 -0
  60. package/lib/components/FluidNumberInput/index.d.ts +11 -0
  61. package/lib/components/FluidSearch/FluidSearch.Skeleton.d.ts +15 -0
  62. package/lib/components/FluidSearch/FluidSearch.Skeleton.js +2 -2
  63. package/lib/components/FluidSearch/FluidSearch.d.ts +73 -0
  64. package/lib/components/FluidSearch/FluidSearch.js +1 -2
  65. package/lib/components/FluidSearch/index.d.ts +11 -0
  66. package/lib/components/FluidSelect/FluidSelect.Skeleton.d.ts +15 -0
  67. package/lib/components/FluidSelect/FluidSelect.Skeleton.js +1 -2
  68. package/lib/components/FluidSelect/FluidSelect.d.ts +57 -0
  69. package/lib/components/FluidSelect/FluidSelect.js +1 -2
  70. package/lib/components/FluidSelect/index.d.ts +13 -0
  71. package/lib/components/FluidSelect/index.js +2 -0
  72. package/lib/components/FluidTextInput/FluidPasswordInput.d.ts +83 -0
  73. package/lib/components/FluidTextInput/FluidPasswordInput.js +93 -0
  74. package/lib/components/FluidTextInput/FluidTextInput.Skeleton.d.ts +15 -0
  75. package/lib/components/FluidTextInput/FluidTextInput.Skeleton.js +2 -2
  76. package/lib/components/FluidTextInput/FluidTextInput.d.ts +70 -0
  77. package/lib/components/FluidTextInput/FluidTextInput.js +6 -4
  78. package/lib/components/FluidTextInput/index.d.ts +15 -0
  79. package/lib/components/FluidTextInput/index.js +3 -0
  80. package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.d.ts +35 -0
  81. package/lib/components/FluidTimePicker/FluidTimePicker.Skeleton.js +4 -2
  82. package/lib/components/FluidTimePicker/FluidTimePicker.d.ts +45 -0
  83. package/lib/components/FluidTimePicker/FluidTimePicker.js +6 -6
  84. package/lib/components/FluidTimePicker/index.d.ts +13 -0
  85. package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.d.ts +41 -0
  86. package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js +2 -2
  87. package/lib/components/FluidTimePickerSelect/index.d.ts +11 -0
  88. package/lib/components/MultiSelect/FilterableMultiSelect.js +5 -5
  89. package/lib/components/MultiSelect/MultiSelect.js +2 -2
  90. package/lib/components/Notification/Notification.js +4 -2
  91. package/lib/components/OverflowMenuV2/index.js +1 -3
  92. package/lib/components/Pagination/Pagination.js +1 -1
  93. package/lib/components/Popover/index.js +2 -2
  94. package/lib/components/Tabs/Tabs.js +1 -1
  95. package/lib/components/UIShell/HeaderPanel.js +1 -1
  96. package/lib/index.js +19 -18
  97. package/lib/node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js +763 -2
  98. package/lib/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js +80 -0
  99. package/lib/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs.js +121 -5
  100. package/package.json +8 -8
@@ -0,0 +1,87 @@
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
+
8
+ import PropTypes from 'prop-types';
9
+ import 'react';
10
+ import 'classnames';
11
+ import '../TextInput/ControlledPasswordInput.js';
12
+ import '../TextInput/PasswordInput.js';
13
+
14
+ ({
15
+ /**
16
+ * Specify an optional className to be applied to the outer FluidForm wrapper
17
+ */
18
+ className: PropTypes.string,
19
+ /**
20
+ * Optionally provide the default value of the `<input>`
21
+ */
22
+ defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
23
+ /**
24
+ * Specify whether the `<input>` should be disabled
25
+ */
26
+ disabled: PropTypes.bool,
27
+ /**
28
+ * "Hide password" tooltip text on password visibility toggle
29
+ */
30
+ hidePasswordLabel: PropTypes.string,
31
+ /**
32
+ * Specify a custom `id` for the `<input>`
33
+ */
34
+ id: PropTypes.string.isRequired,
35
+ /**
36
+ * Specify whether the control is currently invalid
37
+ */
38
+ invalid: PropTypes.bool,
39
+ /**
40
+ * Provide the text that is displayed when the control is in an invalid state
41
+ */
42
+ invalidText: PropTypes.node,
43
+ /**
44
+ * Specify whether the control is a password input
45
+ */
46
+ isPassword: PropTypes.bool,
47
+ /**
48
+ * Provide the text that will be read by a screen reader when visiting this
49
+ * control
50
+ */
51
+ labelText: PropTypes.node.isRequired,
52
+ /**
53
+ * Optionally provide an `onChange` handler that is called whenever `<input>`
54
+ * is updated
55
+ */
56
+ onChange: PropTypes.func,
57
+ /**
58
+ * Optionally provide an `onClick` handler that is called whenever the
59
+ * `<input>` is clicked
60
+ */
61
+ onClick: PropTypes.func,
62
+ /**
63
+ * Callback function that is called whenever the toggle password visibility
64
+ * button is clicked
65
+ */
66
+ onTogglePasswordVisibility: PropTypes.func,
67
+ /**
68
+ * Specify the placeholder attribute for the `<input>`
69
+ */
70
+ placeholder: PropTypes.string,
71
+ /**
72
+ * "Show password" tooltip text on password visibility toggle
73
+ */
74
+ showPasswordLabel: PropTypes.string,
75
+ /**
76
+ * Specify the value of the `<input>`
77
+ */
78
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
79
+ /**
80
+ * Specify whether the control is currently in warning state
81
+ */
82
+ warn: PropTypes.bool,
83
+ /**
84
+ * Provide the text that is displayed when the control is in warning state
85
+ */
86
+ warnText: PropTypes.node
87
+ });
@@ -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 FluidTextInputSkeletonProps {
9
+ /**
10
+ * Specify an optional className to be applied to the outer FluidForm wrapper
11
+ */
12
+ className?: string;
13
+ }
14
+ declare const FluidTextInputSkeleton: React.FC<FluidTextInputSkeletonProps>;
15
+ export default FluidTextInputSkeleton;
@@ -12,7 +12,7 @@ import cx from 'classnames';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
13
  import { FormContext } from '../FluidForm/FormContext.js';
14
14
 
15
- function FluidTextInputSkeleton(_ref) {
15
+ const FluidTextInputSkeleton = _ref => {
16
16
  let {
17
17
  className,
18
18
  ...other
@@ -29,7 +29,7 @@ function FluidTextInputSkeleton(_ref) {
29
29
  }), /*#__PURE__*/React__default.createElement("div", {
30
30
  className: `${prefix}--skeleton ${prefix}--text-input`
31
31
  })));
32
- }
32
+ };
33
33
  FluidTextInputSkeleton.propTypes = {
34
34
  /**
35
35
  * Specify an optional className to be applied to the outer FluidForm wrapper
@@ -0,0 +1,70 @@
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 FluidTextInputProps {
9
+ /**
10
+ * Specify an optional className to be applied to the outer FluidForm wrapper
11
+ */
12
+ className?: string;
13
+ /**
14
+ * Optionally provide the default value of the `<input>`
15
+ */
16
+ defaultValue?: string | number;
17
+ /**
18
+ * Specify whether the `<input>` should be disabled
19
+ */
20
+ disabled?: boolean;
21
+ /**
22
+ * Specify a custom `id` for the `<input>`
23
+ */
24
+ id: string;
25
+ /**
26
+ * Specify whether the control is currently invalid
27
+ */
28
+ invalid?: boolean;
29
+ /**
30
+ * Provide the text that is displayed when the control is in an invalid state
31
+ */
32
+ invalidText?: React.ReactNode;
33
+ /**
34
+ * Specify whether the control is a password input
35
+ */
36
+ isPassword?: boolean;
37
+ /**
38
+ * Provide the text that will be read by a screen reader when visiting this
39
+ * control
40
+ */
41
+ labelText: React.ReactNode;
42
+ /**
43
+ * Optionally provide an `onChange` handler that is called whenever `<input>`
44
+ * is updated
45
+ */
46
+ onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
47
+ /**
48
+ * Optionally provide an `onClick` handler that is called whenever the
49
+ * `<input>` is clicked
50
+ */
51
+ onClick?: (event: React.MouseEvent<HTMLElement>) => void;
52
+ /**
53
+ * Specify the placeholder attribute for the `<input>`
54
+ */
55
+ placeholder?: string;
56
+ /**
57
+ * Specify the value of the `<input>`
58
+ */
59
+ value?: string | number;
60
+ /**
61
+ * Specify whether the control is currently in warning state
62
+ */
63
+ warn?: boolean;
64
+ /**
65
+ * Provide the text that is displayed when the control is in warning state
66
+ */
67
+ warnText?: React.ReactNode;
68
+ }
69
+ declare const FluidTextInput: React.ForwardRefExoticComponent<FluidTextInputProps & React.RefAttributes<HTMLInputElement>>;
70
+ export default FluidTextInput;
@@ -16,7 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
16
16
  import { FormContext } from '../FluidForm/FormContext.js';
17
17
  import TextInput from '../TextInput/TextInput.js';
18
18
 
19
- function FluidTextInput(_ref) {
19
+ const FluidTextInput = /*#__PURE__*/React__default.forwardRef(function FluidTextInput(_ref, ref) {
20
20
  let {
21
21
  className,
22
22
  isPassword,
@@ -31,11 +31,13 @@ function FluidTextInput(_ref) {
31
31
  isFluid: true
32
32
  }
33
33
  }, isPassword ? /*#__PURE__*/React__default.createElement(PasswordInput, _extends({
34
- className: classNames
34
+ className: classNames,
35
+ ref: ref
35
36
  }, other)) : /*#__PURE__*/React__default.createElement(TextInput, _extends({
36
- className: classNames
37
+ className: classNames,
38
+ ref: ref
37
39
  }, other)));
38
- }
40
+ });
39
41
  FluidTextInput.propTypes = {
40
42
  /**
41
43
  * Specify an optional className to be applied to the outer FluidForm wrapper
@@ -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 FluidTextInput from './FluidTextInput';
8
+ import FluidPasswordInput from './FluidPasswordInput';
9
+ import { type FluidTextInputSkeletonProps } from './FluidTextInput.Skeleton';
10
+ import { type FluidPasswordInputProps } from './FluidPasswordInput';
11
+ import { type FluidTextInputProps } from './FluidTextInput';
12
+ export default FluidTextInput;
13
+ export { FluidTextInput, type FluidTextInputProps, type FluidTextInputSkeletonProps, };
14
+ export { FluidPasswordInput, type FluidPasswordInputProps };
15
+ export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton';
@@ -7,3 +7,5 @@
7
7
 
8
8
  import FluidTextInput from './FluidTextInput.js';
9
9
  export { default as FluidTextInput, default } from './FluidTextInput.js';
10
+ import './FluidPasswordInput.js';
11
+ export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton.js';
@@ -0,0 +1,35 @@
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 PropTypes from 'prop-types';
8
+ export interface FluidTimePickerSkeletonProps {
9
+ /**
10
+ * Specify an optional className to add.
11
+ */
12
+ className?: string;
13
+ /**
14
+ * Specify if there are only two TimePicker elements
15
+ */
16
+ isOnlyTwo?: boolean;
17
+ }
18
+ declare const FluidTimePickerSkeleton: {
19
+ ({ className, isOnlyTwo, ...rest }: {
20
+ [x: string]: any;
21
+ className: any;
22
+ isOnlyTwo: any;
23
+ }): import("react/jsx-runtime").JSX.Element;
24
+ propTypes: {
25
+ /**
26
+ * Specify an optional className to add.
27
+ */
28
+ className: PropTypes.Requireable<string>;
29
+ /**
30
+ * Specify if there are only two TimePicker elements
31
+ */
32
+ isOnlyTwo: PropTypes.Requireable<boolean>;
33
+ };
34
+ };
35
+ export default FluidTimePickerSkeleton;
@@ -10,7 +10,10 @@ import PropTypes from 'prop-types';
10
10
  import React__default from 'react';
11
11
  import cx from 'classnames';
12
12
  import { usePrefix } from '../../internal/usePrefix.js';
13
+ import '../FluidTextInput/FluidTextInput.js';
14
+ import '../FluidTextInput/FluidPasswordInput.js';
13
15
  import FluidTextInputSkeleton from '../FluidTextInput/FluidTextInput.Skeleton.js';
16
+ import '../FluidSelect/FluidSelect.js';
14
17
  import FluidSelectSkeleton from '../FluidSelect/FluidSelect.Skeleton.js';
15
18
 
16
19
  var _FluidTextInputSkelet, _FluidSelectSkeleton, _FluidSelectSkeleton2;
@@ -38,6 +41,5 @@ FluidTimePickerSkeleton.propTypes = {
38
41
  */
39
42
  isOnlyTwo: PropTypes.bool
40
43
  };
41
- var FluidTimePickerSkeleton$1 = FluidTimePickerSkeleton;
42
44
 
43
- export { FluidTimePickerSkeleton$1 as default };
45
+ export { FluidTimePickerSkeleton as default };
@@ -0,0 +1,45 @@
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
+ import { FluidTextInputProps } from '../FluidTextInput';
9
+ export interface FluidTimePickerProps extends FluidTextInputProps {
10
+ /**
11
+ * The child node(s)
12
+ */
13
+ children?: React.ReactNode;
14
+ /**
15
+ * Specify an optional className to be applied to the outer FluidTimePicker wrapper
16
+ */
17
+ className?: string;
18
+ /**
19
+ * Specify whether the `<input>` should be disabled
20
+ */
21
+ disabled?: boolean;
22
+ /**
23
+ * Specify whether or not the control is invalid
24
+ */
25
+ invalid?: boolean;
26
+ /**
27
+ * Provide the text that is displayed when the control is in error state
28
+ */
29
+ invalidText?: React.ReactNode;
30
+ /**
31
+ * Provide the text that will be read by a screen reader when visiting this
32
+ * control
33
+ */
34
+ labelText: React.ReactNode;
35
+ /**
36
+ * Specify whether the control is currently in warning state
37
+ */
38
+ warn?: boolean;
39
+ /**
40
+ * Provide the text that is displayed when the control is in warning state
41
+ */
42
+ warnText?: React.ReactNode;
43
+ }
44
+ declare const FluidTimePicker: React.ForwardRefExoticComponent<FluidTimePickerProps & React.RefAttributes<HTMLInputElement>>;
45
+ export default FluidTimePicker;
@@ -6,10 +6,12 @@
6
6
  */
7
7
 
8
8
  import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
9
- import PropTypes from 'prop-types';
10
9
  import React__default from 'react';
10
+ import PropTypes from 'prop-types';
11
11
  import cx from 'classnames';
12
12
  import FluidTextInput from '../FluidTextInput/FluidTextInput.js';
13
+ import '../FluidTextInput/FluidPasswordInput.js';
14
+ import '../FluidTextInput/FluidTextInput.Skeleton.js';
13
15
  import { usePrefix } from '../../internal/usePrefix.js';
14
16
  import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
15
17
 
@@ -27,7 +29,7 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
27
29
  const prefix = usePrefix();
28
30
  const classNames = cx(className, {
29
31
  [`${prefix}--time-picker--fluid`]: true,
30
- [`${prefix}--time-picker--equal-width`]: children?.length !== 2,
32
+ [`${prefix}--time-picker--equal-width`]: React__default.Children.toArray(children).length !== 2,
31
33
  [`${prefix}--time-picker--fluid--disabled`]: disabled,
32
34
  [`${prefix}--time-picker--fluid--invalid`]: invalid,
33
35
  [`${prefix}--time-picker--fluid--warning`]: warn
@@ -48,7 +50,6 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
48
50
  }, /*#__PURE__*/React__default.createElement("div", {
49
51
  className: `${prefix}--time-picker__input`
50
52
  }, /*#__PURE__*/React__default.createElement(FluidTextInput, _extends({
51
- disabled: disabled,
52
53
  ref: ref
53
54
  }, other))), disabled ? React__default.Children.toArray(children).map(child => {
54
55
  return /*#__PURE__*/React__default.cloneElement(child, {
@@ -99,6 +100,5 @@ FluidTimePicker.propTypes = {
99
100
  */
100
101
  warnText: PropTypes.node
101
102
  };
102
- var FluidTimePicker$1 = FluidTimePicker;
103
103
 
104
- export { FluidTimePicker$1 as default };
104
+ export { FluidTimePicker as default };
@@ -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 FluidTimePicker from './FluidTimePicker';
8
+ import { FluidTimePickerProps } from './FluidTimePicker';
9
+ import { FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
10
+ export { default as FluidTimePickerSkeleton } from './FluidTimePicker.Skeleton';
11
+ export type { FluidTimePickerProps, FluidTimePickerSkeletonProps };
12
+ export default FluidTimePicker;
13
+ export { FluidTimePicker };
@@ -0,0 +1,41 @@
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 FluidTimePickerSelectProps {
9
+ /**
10
+ * Provide the contents of your Select
11
+ */
12
+ children?: React.ReactNode;
13
+ /**
14
+ * Specify an optional className to be applied to the node containing the label and the select box
15
+ */
16
+ className?: string;
17
+ /**
18
+ * Optionally provide the default value of the `<select>`
19
+ */
20
+ defaultValue?: any;
21
+ /**
22
+ * Specify whether the control is disabled
23
+ */
24
+ disabled?: boolean;
25
+ /**
26
+ * Specify a custom `id` for the `<select>`
27
+ */
28
+ id: string;
29
+ /**
30
+ * Provide label text to be read by screen readers when interacting with the
31
+ * control
32
+ */
33
+ labelText?: React.ReactNode;
34
+ /**
35
+ * Provide an optional `onChange` hook that is called each time the value of
36
+ * the underlying `<input>` changes
37
+ */
38
+ onChange?: React.ChangeEventHandler<HTMLSelectElement>;
39
+ }
40
+ declare const FluidTimePickerSelect: React.ForwardRefExoticComponent<FluidTimePickerSelectProps & React.RefAttributes<HTMLSelectElement>>;
41
+ export default FluidTimePickerSelect;
@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
9
9
  import React__default from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import FluidSelect from '../FluidSelect/FluidSelect.js';
12
+ import '../FluidSelect/FluidSelect.Skeleton.js';
12
13
 
13
14
  const FluidTimePickerSelect = /*#__PURE__*/React__default.forwardRef(function FluidTimePickerSelect(_ref, ref) {
14
15
  let {
@@ -53,6 +54,5 @@ FluidTimePickerSelect.propTypes = {
53
54
  */
54
55
  onChange: PropTypes.func
55
56
  };
56
- var FluidTimePickerSelect$1 = FluidTimePickerSelect;
57
57
 
58
- export { FluidTimePickerSelect$1 as default };
58
+ export { FluidTimePickerSelect as default };
@@ -0,0 +1,11 @@
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 FluidTimePickerSelect from './FluidTimePickerSelect';
8
+ import { type FluidTimePickerSelectProps } from './FluidTimePickerSelect';
9
+ export { type FluidTimePickerSelectProps };
10
+ export default FluidTimePickerSelect;
11
+ export { FluidTimePickerSelect };
@@ -27,7 +27,7 @@ import '../FluidForm/FluidForm.js';
27
27
  import { FormContext } from '../FluidForm/FormContext.js';
28
28
  import { useSelection } from '../../internal/Selection.js';
29
29
  import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
30
- import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
30
+ import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
31
31
  import { match } from '../../internal/keyboard/match.js';
32
32
  import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
33
33
  import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
@@ -235,10 +235,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
235
235
  const nextIsOpen = forceIsOpen ?? !isOpen;
236
236
  setIsOpen(nextIsOpen);
237
237
  validateHighlightFocus();
238
- if (onMenuChange) {
239
- onMenuChange(nextIsOpen);
240
- }
241
238
  }
239
+ useEffect(() => {
240
+ onMenuChange?.(isOpen);
241
+ }, [isOpen, onMenuChange]);
242
242
  const {
243
243
  getToggleButtonProps,
244
244
  getLabelProps,
@@ -26,7 +26,7 @@ import Checkbox from '../Checkbox/Checkbox.js';
26
26
  import '../Checkbox/Checkbox.Skeleton.js';
27
27
  import { noopFn } from '../../internal/noopFn.js';
28
28
  import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
29
- import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
29
+ import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
30
30
  import { match } from '../../internal/keyboard/match.js';
31
31
  import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
32
32
  import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
@@ -35,13 +35,15 @@ function useEscapeToClose(ref, callback) {
35
35
  let override = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
36
36
  const handleKeyDown = event => {
37
37
  // The callback should only be called when focus is on or within the container
38
- const elementContainsFocus = ref.current && document.activeElement === ref.current || ref.current.contains(document.activeElement);
38
+ const elementContainsFocus = ref.current && document.activeElement === ref.current || ref.current?.contains(document.activeElement);
39
39
  if (matches(event, [Escape]) && override && elementContainsFocus) {
40
40
  callback(event);
41
41
  }
42
42
  };
43
43
  useIsomorphicEffect(() => {
44
- document.addEventListener('keydown', handleKeyDown, false);
44
+ if (ref.current !== null) {
45
+ document.addEventListener('keydown', handleKeyDown, false);
46
+ }
45
47
  return () => document.removeEventListener('keydown', handleKeyDown, false);
46
48
  });
47
49
  }
@@ -17,9 +17,7 @@ function OverflowMenuV2(props) {
17
17
  didWarnAboutDeprecation = true;
18
18
  }
19
19
  return /*#__PURE__*/React__default.createElement(FeatureFlags, {
20
- flags: {
21
- 'enable-v12-overflowmenu': true
22
- }
20
+ enableV12Overflowmenu: true
23
21
  }, /*#__PURE__*/React__default.createElement(OverflowMenu, props));
24
22
  }
25
23
 
@@ -100,7 +100,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
100
100
  [`${prefix}--pagination__button--backward`]: true,
101
101
  [`${prefix}--pagination__button--no-index`]: backButtonDisabled
102
102
  });
103
- const forwardButtonDisabled = disabled || page === totalPages;
103
+ const forwardButtonDisabled = disabled || page === totalPages && !pagesUnknown;
104
104
  const forwardButtonClasses = cx({
105
105
  [`${prefix}--pagination__button`]: true,
106
106
  [`${prefix}--pagination__button--forward`]: true,
@@ -16,7 +16,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
16
16
  import { useWindowEvent } from '../../internal/useEvent.js';
17
17
  import { mapPopoverAlignProp } from '../../tools/createPropAdapter.js';
18
18
  import { useFloating, offset, flip, arrow, autoUpdate } from '@floating-ui/react';
19
- import { hide } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.mjs.js';
19
+ import { hide } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js';
20
20
 
21
21
  const PopoverContext = /*#__PURE__*/React__default.createContext({
22
22
  setFloating: {
@@ -810,7 +810,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab(_ref8, forwardRef) {
810
810
  // determine number of tabs, excluding disabled
811
811
  const tabCount = Array.from(tabRef.current.parentElement.childNodes).filter(node => {
812
812
  const element = node;
813
- return element.classList.contains('cds--tabs__nav-link') && !element.classList.contains('cds--tabs__nav-item--disabled');
813
+ return element.classList.contains(`${prefix}--tabs__nav-link`) && !element.classList.contains(`${prefix}--tabs__nav-item--disabled`);
814
814
  }).length;
815
815
 
816
816
  // if not removing last tab focus on next tab
@@ -40,7 +40,7 @@ const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(
40
40
  const eventHandlers = {};
41
41
  if (addFocusListeners) {
42
42
  eventHandlers.onBlur = event => {
43
- if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains('cds--switcher__item-link')) {
43
+ if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains(`${prefix}--switcher__item-link`)) {
44
44
  setExpandedState(false);
45
45
  setLastClickedElement(null);
46
46
  if (expanded) {
package/es/index.js CHANGED
@@ -159,8 +159,18 @@ export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem
159
159
  export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
160
160
  export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
161
161
  export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
162
+ export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
163
+ export { default as unstable__FluidSelectSkeleton } from './components/FluidSelect/FluidSelect.Skeleton.js';
164
+ export { default as unstable__FluidSearch } from './components/FluidSearch/FluidSearch.js';
165
+ export { default as unstable__FluidSearchSkeleton } from './components/FluidSearch/FluidSearch.Skeleton.js';
162
166
  export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
163
167
  export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
168
+ export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
169
+ import './components/FluidTextInput/FluidPasswordInput.js';
170
+ export { default as unstable__FluidTextInputSkeleton } from './components/FluidTextInput/FluidTextInput.Skeleton.js';
171
+ export { default as unstable__FluidTimePicker } from './components/FluidTimePicker/FluidTimePicker.js';
172
+ export { default as unstable__FluidTimePickerSkeleton } from './components/FluidTimePicker/FluidTimePicker.Skeleton.js';
173
+ export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
164
174
  export { Heading, Section } from './components/Heading/index.js';
165
175
  export { IconButton, IconButtonKinds } from './components/IconButton/index.js';
166
176
  export { Layer, useLayer } from './components/Layer/index.js';
@@ -181,9 +191,6 @@ export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
181
191
  export { PrefixContext, usePrefix } from './internal/usePrefix.js';
182
192
  export { useIdPrefix } from './internal/useIdPrefix.js';
183
193
  export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
184
- export { default as unstable__FluidSearchSkeleton } from './components/FluidSearch/FluidSearch.Skeleton.js';
185
- export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
186
- export { default as unstable__FluidTextInputSkeleton } from './components/FluidTextInput/FluidTextInput.Skeleton.js';
187
194
  export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
188
195
  export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
189
196
  export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
@@ -200,12 +207,6 @@ export { default as unstable__FluidDropdown } from './components/FluidDropdown/F
200
207
  export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
201
208
  export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';
202
209
  export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
203
- export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
204
- export { default as unstable__FluidSelectSkeleton } from './components/FluidSelect/FluidSelect.Skeleton.js';
205
- export { default as unstable__FluidSearch } from './components/FluidSearch/FluidSearch.js';
206
- export { default as unstable__FluidTimePicker } from './components/FluidTimePicker/FluidTimePicker.js';
207
- export { default as unstable__FluidTimePickerSkeleton } from './components/FluidTimePicker/FluidTimePicker.Skeleton.js';
208
- export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';
209
210
  export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';
210
211
  export { useLayoutDirection as unstable_useLayoutDirection } from './components/LayoutDirection/useLayoutDirection.js';
211
212
  export { Text as unstable_Text } from './components/Text/Text.js';