@carbon/react 1.31.3 → 1.32.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 (182) hide show
  1. package/README.md +1 -1
  2. package/es/components/Accordion/Accordion.Skeleton.d.ts +64 -0
  3. package/es/components/Accordion/Accordion.Skeleton.js +3 -3
  4. package/es/components/Accordion/Accordion.d.ts +65 -0
  5. package/es/components/Accordion/Accordion.js +5 -6
  6. package/es/components/Accordion/AccordionItem.d.ts +105 -0
  7. package/es/components/Accordion/AccordionItem.js +12 -9
  8. package/es/components/Accordion/AccordionProvider.d.ts +20 -0
  9. package/es/components/Accordion/AccordionProvider.js +25 -0
  10. package/es/components/Accordion/index.d.ts +11 -0
  11. package/es/components/Button/Button.Skeleton.d.ts +28 -0
  12. package/es/components/Button/Button.Skeleton.js +5 -3
  13. package/es/components/Button/Button.d.ts +72 -0
  14. package/es/components/Button/Button.js +13 -10
  15. package/es/components/Button/index.d.ts +11 -0
  16. package/es/components/Button/index.js +2 -1
  17. package/es/components/ButtonSet/ButtonSet.d.ts +17 -0
  18. package/es/components/ButtonSet/ButtonSet.js +1 -2
  19. package/es/components/ButtonSet/index.d.ts +9 -0
  20. package/es/components/CodeSnippet/CodeSnippet.js +1 -0
  21. package/es/components/ComboButton/index.js +1 -0
  22. package/es/components/ComposedModal/ComposedModal.d.ts +70 -0
  23. package/es/components/ComposedModal/ComposedModal.js +58 -67
  24. package/es/components/ComposedModal/ModalFooter.d.ts +71 -0
  25. package/es/components/ComposedModal/ModalFooter.js +22 -19
  26. package/es/components/ComposedModal/ModalHeader.d.ts +58 -0
  27. package/es/components/ComposedModal/ModalHeader.js +8 -25
  28. package/es/components/ComposedModal/index.d.ts +9 -0
  29. package/es/components/ContainedList/ContainedList.js +12 -1
  30. package/es/components/ContentSwitcher/ContentSwitcher.d.ts +109 -0
  31. package/es/components/ContentSwitcher/ContentSwitcher.js +14 -6
  32. package/es/components/DangerButton/DangerButton.d.ts +9 -0
  33. package/es/components/DangerButton/DangerButton.js +2 -2
  34. package/es/components/DangerButton/index.d.ts +9 -0
  35. package/es/components/DataTable/TableBatchAction.js +1 -0
  36. package/es/components/DataTable/TableBatchActions.js +1 -0
  37. package/es/components/DataTable/TableBody.d.ts +29 -0
  38. package/es/components/DataTable/TableBody.js +2 -3
  39. package/es/components/DataTable/TableContainer.d.ts +51 -0
  40. package/es/components/DataTable/TableContainer.js +3 -4
  41. package/es/components/DataTable/TableExpandHeader.d.ts +86 -0
  42. package/es/components/DataTable/TableExpandHeader.js +4 -5
  43. package/es/components/DatePicker/plugins/fixEventsPlugin.js +12 -16
  44. package/es/components/Dropdown/Dropdown.js +1 -0
  45. package/es/components/FluidTextInput/FluidTextInput.js +1 -0
  46. package/es/components/FormGroup/FormGroup.d.ts +80 -0
  47. package/es/components/IconButton/index.js +3 -2
  48. package/es/components/Layout/index.d.ts +74 -0
  49. package/es/components/Layout/index.js +14 -5
  50. package/es/components/Link/Link.d.ts +2 -2
  51. package/es/components/Link/Link.js +2 -1
  52. package/es/components/MenuButton/index.js +1 -0
  53. package/es/components/Modal/Modal.js +1 -0
  54. package/es/components/ModalWrapper/ModalWrapper.js +1 -0
  55. package/es/components/Notification/Notification.d.ts +531 -0
  56. package/es/components/Notification/Notification.js +40 -6
  57. package/es/components/Notification/index.d.ts +7 -0
  58. package/es/components/PrimaryButton/PrimaryButton.js +1 -0
  59. package/es/components/SecondaryButton/SecondaryButton.js +1 -0
  60. package/es/components/Select/Select.d.ts +1 -1
  61. package/es/components/SkeletonText/SkeletonText.d.ts +61 -0
  62. package/es/components/SkeletonText/SkeletonText.js +15 -17
  63. package/es/components/SkeletonText/index.d.ts +9 -0
  64. package/es/components/Switch/Switch.d.ts +56 -0
  65. package/es/components/Switch/Switch.js +4 -4
  66. package/es/components/Tab/index.d.ts +9 -0
  67. package/es/components/TabContent/TabContent.d.ts +40 -0
  68. package/es/components/TabContent/TabContent.js +6 -12
  69. package/es/components/TabContent/index.d.ts +10 -0
  70. package/es/components/Tabs/Tabs.Skeleton.d.ts +33 -0
  71. package/es/components/Tabs/Tabs.Skeleton.js +2 -2
  72. package/es/components/Tabs/Tabs.d.ts +303 -0
  73. package/es/components/Tabs/Tabs.js +136 -95
  74. package/es/components/Tabs/index.d.ts +10 -0
  75. package/es/components/Tabs/usePressable.js +11 -0
  76. package/es/components/TextInput/ControlledPasswordInput.d.ts +90 -0
  77. package/es/components/TextInput/ControlledPasswordInput.js +5 -6
  78. package/es/components/Tile/Tile.d.ts +153 -0
  79. package/es/components/Tile/Tile.js +62 -74
  80. package/es/components/Tile/index.d.ts +7 -0
  81. package/es/components/Toggle/Toggle.Skeleton.d.ts +3 -47
  82. package/es/components/Toggle/Toggle.Skeleton.js +24 -64
  83. package/es/components/Toggle/Toggle.js +1 -1
  84. package/es/components/UIShell/HeaderGlobalAction.js +1 -0
  85. package/es/components/UIShell/SideNav.d.ts +1 -1
  86. package/es/index.js +16 -16
  87. package/es/internal/keyboard/match.js +2 -2
  88. package/es/internal/useControllableState.js +2 -2
  89. package/es/internal/wrapFocus.js +6 -6
  90. package/es/prop-types/requiredIfGivenPropIsTruthy.js +1 -1
  91. package/es/prop-types/types.js +3 -0
  92. package/lib/components/Accordion/Accordion.Skeleton.d.ts +64 -0
  93. package/lib/components/Accordion/Accordion.Skeleton.js +3 -3
  94. package/lib/components/Accordion/Accordion.d.ts +65 -0
  95. package/lib/components/Accordion/Accordion.js +5 -6
  96. package/lib/components/Accordion/AccordionItem.d.ts +105 -0
  97. package/lib/components/Accordion/AccordionItem.js +11 -8
  98. package/lib/components/Accordion/AccordionProvider.d.ts +20 -0
  99. package/lib/components/Accordion/AccordionProvider.js +34 -0
  100. package/lib/components/Accordion/index.d.ts +11 -0
  101. package/lib/components/Button/Button.Skeleton.d.ts +28 -0
  102. package/lib/components/Button/Button.Skeleton.js +5 -3
  103. package/lib/components/Button/Button.d.ts +72 -0
  104. package/lib/components/Button/Button.js +18 -11
  105. package/lib/components/Button/index.d.ts +11 -0
  106. package/lib/components/Button/index.js +6 -0
  107. package/lib/components/ButtonSet/ButtonSet.d.ts +17 -0
  108. package/lib/components/ButtonSet/ButtonSet.js +1 -2
  109. package/lib/components/ButtonSet/index.d.ts +9 -0
  110. package/lib/components/CodeSnippet/CodeSnippet.js +1 -0
  111. package/lib/components/ComboButton/index.js +1 -0
  112. package/lib/components/ComposedModal/ComposedModal.d.ts +70 -0
  113. package/lib/components/ComposedModal/ComposedModal.js +58 -67
  114. package/lib/components/ComposedModal/ModalFooter.d.ts +71 -0
  115. package/lib/components/ComposedModal/ModalFooter.js +22 -19
  116. package/lib/components/ComposedModal/ModalHeader.d.ts +58 -0
  117. package/lib/components/ComposedModal/ModalHeader.js +8 -25
  118. package/lib/components/ComposedModal/index.d.ts +9 -0
  119. package/lib/components/ContainedList/ContainedList.js +12 -1
  120. package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +109 -0
  121. package/lib/components/ContentSwitcher/ContentSwitcher.js +14 -6
  122. package/lib/components/DangerButton/DangerButton.d.ts +9 -0
  123. package/lib/components/DangerButton/DangerButton.js +2 -2
  124. package/lib/components/DangerButton/index.d.ts +9 -0
  125. package/lib/components/DataTable/TableBatchAction.js +1 -0
  126. package/lib/components/DataTable/TableBatchActions.js +1 -0
  127. package/lib/components/DataTable/TableBody.d.ts +29 -0
  128. package/lib/components/DataTable/TableBody.js +3 -4
  129. package/lib/components/DataTable/TableContainer.d.ts +51 -0
  130. package/lib/components/DataTable/TableContainer.js +3 -4
  131. package/lib/components/DataTable/TableExpandHeader.d.ts +86 -0
  132. package/lib/components/DataTable/TableExpandHeader.js +4 -5
  133. package/lib/components/DatePicker/plugins/fixEventsPlugin.js +12 -16
  134. package/lib/components/Dropdown/Dropdown.js +1 -0
  135. package/lib/components/FluidTextInput/FluidTextInput.js +1 -0
  136. package/lib/components/FormGroup/FormGroup.d.ts +80 -0
  137. package/lib/components/IconButton/index.js +3 -2
  138. package/lib/components/Layout/index.d.ts +74 -0
  139. package/lib/components/Layout/index.js +14 -5
  140. package/lib/components/Link/Link.d.ts +2 -2
  141. package/lib/components/Link/Link.js +2 -1
  142. package/lib/components/MenuButton/index.js +1 -0
  143. package/lib/components/Modal/Modal.js +1 -0
  144. package/lib/components/ModalWrapper/ModalWrapper.js +1 -0
  145. package/lib/components/Notification/Notification.d.ts +531 -0
  146. package/lib/components/Notification/Notification.js +40 -6
  147. package/lib/components/Notification/index.d.ts +7 -0
  148. package/lib/components/PrimaryButton/PrimaryButton.js +1 -0
  149. package/lib/components/SecondaryButton/SecondaryButton.js +1 -0
  150. package/lib/components/Select/Select.d.ts +1 -1
  151. package/lib/components/SkeletonText/SkeletonText.d.ts +61 -0
  152. package/lib/components/SkeletonText/SkeletonText.js +15 -17
  153. package/lib/components/SkeletonText/index.d.ts +9 -0
  154. package/lib/components/Switch/Switch.d.ts +56 -0
  155. package/lib/components/Switch/Switch.js +4 -4
  156. package/lib/components/Tab/index.d.ts +9 -0
  157. package/lib/components/TabContent/TabContent.d.ts +40 -0
  158. package/lib/components/TabContent/TabContent.js +6 -12
  159. package/lib/components/TabContent/index.d.ts +10 -0
  160. package/lib/components/Tabs/Tabs.Skeleton.d.ts +33 -0
  161. package/lib/components/Tabs/Tabs.Skeleton.js +2 -2
  162. package/lib/components/Tabs/Tabs.d.ts +303 -0
  163. package/lib/components/Tabs/Tabs.js +135 -94
  164. package/lib/components/Tabs/index.d.ts +10 -0
  165. package/lib/components/Tabs/usePressable.js +11 -0
  166. package/lib/components/TextInput/ControlledPasswordInput.d.ts +90 -0
  167. package/lib/components/TextInput/ControlledPasswordInput.js +5 -6
  168. package/lib/components/Tile/Tile.d.ts +153 -0
  169. package/lib/components/Tile/Tile.js +62 -74
  170. package/lib/components/Tile/index.d.ts +7 -0
  171. package/lib/components/Toggle/Toggle.Skeleton.d.ts +3 -47
  172. package/lib/components/Toggle/Toggle.Skeleton.js +22 -62
  173. package/lib/components/Toggle/Toggle.js +1 -1
  174. package/lib/components/UIShell/HeaderGlobalAction.js +1 -0
  175. package/lib/components/UIShell/SideNav.d.ts +1 -1
  176. package/lib/index.js +51 -47
  177. package/lib/internal/keyboard/match.js +2 -2
  178. package/lib/internal/useControllableState.js +2 -2
  179. package/lib/internal/wrapFocus.js +6 -6
  180. package/lib/prop-types/requiredIfGivenPropIsTruthy.js +1 -1
  181. package/lib/prop-types/types.js +3 -0
  182. package/package.json +4 -3
@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
13
13
  var React = require('react');
14
14
  var PropTypes = require('prop-types');
15
15
  var Button = require('../Button/Button.js');
16
+ require('../Button/Button.Skeleton.js');
16
17
  var ButtonSet = require('../ButtonSet/ButtonSet.js');
17
18
  var cx = require('classnames');
18
19
  var usePrefix = require('../../internal/usePrefix.js');
@@ -97,11 +98,7 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
97
98
  ...rest
98
99
  } = _ref3;
99
100
  const prefix = usePrefix.usePrefix();
100
- const footerClass = cx__default["default"]({
101
- [`${prefix}--modal-footer`]: true,
102
- [customClassName]: customClassName,
103
- [`${prefix}--modal-footer--three-button`]: Array.isArray(secondaryButtons) && secondaryButtons.length === 2
104
- });
101
+ const footerClass = cx__default["default"](`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
105
102
  const secondaryButtonProps = {
106
103
  closeModal,
107
104
  secondaryButtons,
@@ -109,17 +106,21 @@ const ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function M
109
106
  secondaryClassName,
110
107
  onRequestClose
111
108
  };
112
- return /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
113
- className: footerClass
114
- }, rest, {
115
- ref: ref
116
- }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
117
- onClick: onRequestSubmit,
118
- className: primaryClassName,
119
- disabled: primaryButtonDisabled,
120
- kind: danger ? 'danger' : 'primary',
121
- ref: inputref
122
- }, primaryButtonText), children);
109
+ return (
110
+ /*#__PURE__*/
111
+ // @ts-expect-error: Invalid derived types, will be fine once explicit types are added
112
+ React__default["default"].createElement(ButtonSet["default"], _rollupPluginBabelHelpers["extends"]({
113
+ className: footerClass
114
+ }, rest, {
115
+ ref: ref
116
+ }), /*#__PURE__*/React__default["default"].createElement(SecondaryButtonSet, secondaryButtonProps), primaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
117
+ onClick: onRequestSubmit,
118
+ className: primaryClassName,
119
+ disabled: primaryButtonDisabled,
120
+ kind: danger ? 'danger' : 'primary',
121
+ ref: inputref
122
+ }, primaryButtonText), children)
123
+ );
123
124
  });
124
125
  ModalFooter.propTypes = {
125
126
  /**
@@ -142,6 +143,7 @@ ModalFooter.propTypes = {
142
143
  /**
143
144
  * The `ref` callback for the primary button.
144
145
  */
146
+ // @ts-expect-error: Invalid derived type
145
147
  inputref: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
146
148
  current: PropTypes__default["default"].any
147
149
  })]),
@@ -198,10 +200,11 @@ ModalFooter.propTypes = {
198
200
  */
199
201
  secondaryClassName: PropTypes__default["default"].string
200
202
  };
203
+ const noop = () => {};
201
204
  ModalFooter.defaultProps = {
202
- onRequestClose: () => {},
203
- onRequestSubmit: () => {},
204
- closeModal: () => {}
205
+ onRequestClose: noop,
206
+ onRequestSubmit: noop,
207
+ closeModal: noop
205
208
  };
206
209
 
207
210
  exports.ModalFooter = ModalFooter;
@@ -0,0 +1,58 @@
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, { type ReactNode, type MouseEvent, type HTMLAttributes } from 'react';
8
+ type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
9
+ export interface ModalHeaderProps extends DivProps {
10
+ /**
11
+ * Provide an optional function to be called when the close button is
12
+ * clicked
13
+ */
14
+ buttonOnClick?(event: MouseEvent): void;
15
+ /**
16
+ * Specify the content to be placed in the ModalHeader
17
+ */
18
+ children?: ReactNode;
19
+ /**
20
+ * Specify an optional className to be applied to the modal header
21
+ */
22
+ className?: string;
23
+ /**
24
+ * Specify an optional className to be applied to the modal close node
25
+ */
26
+ closeClassName?: string;
27
+ /**
28
+ * Specify an optional className to be applied to the modal close icon node
29
+ */
30
+ closeIconClassName?: string;
31
+ /**
32
+ * Provide an optional function to be called when the modal is closed
33
+ */
34
+ closeModal?(event: MouseEvent): void;
35
+ /**
36
+ * Specify a description for the close icon that can be read by screen
37
+ * readers
38
+ */
39
+ iconDescription?: string;
40
+ /**
41
+ * Specify an optional label to be displayed
42
+ */
43
+ label?: ReactNode;
44
+ /**
45
+ * Specify an optional className to be applied to the modal header label
46
+ */
47
+ labelClassName?: string;
48
+ /**
49
+ * Specify an optional title to be displayed
50
+ */
51
+ title?: ReactNode;
52
+ /**
53
+ * Specify an optional className to be applied to the modal heading
54
+ */
55
+ titleClassName?: string;
56
+ }
57
+ export declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
58
+ export {};
@@ -39,29 +39,14 @@ const ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function M
39
39
  } = _ref;
40
40
  const prefix = usePrefix.usePrefix();
41
41
  function handleCloseButtonClick(evt) {
42
- closeModal(evt);
43
- buttonOnClick();
42
+ closeModal?.(evt);
43
+ buttonOnClick?.(evt);
44
44
  }
45
- const headerClass = cx__default["default"]({
46
- [`${prefix}--modal-header`]: true,
47
- [customClassName]: customClassName
48
- });
49
- const labelClass = cx__default["default"]({
50
- [`${prefix}--modal-header__label ${prefix}--type-delta`]: true,
51
- [labelClassName]: labelClassName
52
- });
53
- const titleClass = cx__default["default"]({
54
- [`${prefix}--modal-header__heading ${prefix}--type-beta`]: true,
55
- [titleClassName]: titleClassName
56
- });
57
- const closeClass = cx__default["default"]({
58
- [`${prefix}--modal-close`]: true,
59
- [closeClassName]: closeClassName
60
- });
61
- const closeIconClass = cx__default["default"]({
62
- [`${prefix}--modal-close__icon`]: true,
63
- [closeIconClassName]: closeIconClassName
64
- });
45
+ const headerClass = cx__default["default"](`${prefix}--modal-header`, customClassName);
46
+ const labelClass = cx__default["default"](`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
47
+ const titleClass = cx__default["default"](`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
48
+ const closeClass = cx__default["default"](`${prefix}--modal-close`, closeClassName);
49
+ const closeIconClass = cx__default["default"](`${prefix}--modal-close__icon`, closeIconClassName);
65
50
  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
66
51
  className: headerClass
67
52
  }, rest, {
@@ -130,9 +115,7 @@ ModalHeader.propTypes = {
130
115
  titleClassName: PropTypes__default["default"].string
131
116
  };
132
117
  ModalHeader.defaultProps = {
133
- iconDescription: 'Close',
134
- buttonOnClick: () => {},
135
- closeModal: () => {}
118
+ iconDescription: 'Close'
136
119
  };
137
120
 
138
121
  exports.ModalHeader = ModalHeader;
@@ -0,0 +1,9 @@
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
+ export { default as ComposedModal, type ComposedModalProps, ModalBody, type ModalBodyProps, } from './ComposedModal';
8
+ export { ModalHeader, type ModalHeaderProps } from './ModalHeader';
9
+ export { ModalFooter, type ModalFooterProps } from './ModalFooter';
@@ -80,7 +80,18 @@ function ContainedList(_ref) {
80
80
  max: 'xl'
81
81
  },
82
82
  className: `${prefix}--contained-list__action`
83
- }, action)), children && /*#__PURE__*/React__default["default"].createElement("ul", {
83
+ }, action)), children &&
84
+ /*#__PURE__*/
85
+ /**
86
+ * Webkit removes implicit "list" semantics when "list-style-type: none" is set.
87
+ * Explicitly setting the "list" role ensures assistive technology in webkit
88
+ * browsers correctly announce the semantics.
89
+ *
90
+ * Ref https://bugs.webkit.org/show_bug.cgi?id=170179#c1
91
+ */
92
+ // eslint-disable-next-line jsx-a11y/no-redundant-roles
93
+ React__default["default"].createElement("ul", {
94
+ role: "list",
84
95
  "aria-labelledby": labelId
85
96
  }, isActionSearch ? filteredChildren : renderedChildren));
86
97
  }
@@ -0,0 +1,109 @@
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 PropTypes from 'prop-types';
8
+ import React, { HTMLAttributes, ReactElement } from 'react';
9
+ interface SwitchEventHandlersParams {
10
+ index?: number;
11
+ name?: string | number;
12
+ text?: string;
13
+ key?: string | number;
14
+ }
15
+ export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
16
+ /**
17
+ * Pass in Switch components to be rendered in the ContentSwitcher
18
+ */
19
+ children?: ReactElement[];
20
+ /**
21
+ * Specify an optional className to be added to the container node
22
+ */
23
+ className?: string;
24
+ /**
25
+ * `true` to use the light version.
26
+ *
27
+ * @deprecated The `light` prop for `ContentSwitcher` has
28
+ * been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
29
+ */
30
+ light?: boolean;
31
+ /**
32
+ * Specify an `onChange` handler that is called whenever the ContentSwitcher
33
+ * changes which item is selected
34
+ */
35
+ onChange: (params: SwitchEventHandlersParams) => void;
36
+ /**
37
+ * Specify a selected index for the initially selected content
38
+ */
39
+ selectedIndex: number;
40
+ /**
41
+ * Choose whether or not to automatically change selection on focus
42
+ */
43
+ selectionMode: 'automatic' | 'manual';
44
+ /**
45
+ * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
46
+ */
47
+ size: 'sm' | 'md' | 'lg';
48
+ }
49
+ interface ContentSwitcherState {
50
+ selectedIndex?: number;
51
+ }
52
+ export default class ContentSwitcher extends React.Component<ContentSwitcherProps, ContentSwitcherState> {
53
+ /**
54
+ * The DOM references of child `<Switch>`.
55
+ * @type {Array<Element>}
56
+ * @private
57
+ */
58
+ _switchRefs: HTMLButtonElement[];
59
+ state: {
60
+ selectedIndex: undefined;
61
+ };
62
+ static propTypes: {
63
+ /**
64
+ * Pass in Switch components to be rendered in the ContentSwitcher
65
+ */
66
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
67
+ /**
68
+ * Specify an optional className to be added to the container node
69
+ */
70
+ className: PropTypes.Requireable<string>;
71
+ /**
72
+ * `true` to use the light variant.
73
+ */
74
+ light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
75
+ /**
76
+ * Specify an `onChange` handler that is called whenever the ContentSwitcher
77
+ * changes which item is selected
78
+ */
79
+ onChange: PropTypes.Validator<(...args: any[]) => any>;
80
+ /**
81
+ * Specify a selected index for the initially selected content
82
+ */
83
+ selectedIndex: PropTypes.Requireable<number>;
84
+ /**
85
+ * Choose whether or not to automatically change selection on focus
86
+ */
87
+ selectionMode: PropTypes.Requireable<string>;
88
+ /**
89
+ * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
90
+ */
91
+ size: PropTypes.Requireable<string>;
92
+ };
93
+ static contextType: React.Context<string>;
94
+ static defaultProps: {
95
+ selectedIndex: number;
96
+ selectionMode: string;
97
+ onChange: () => void;
98
+ };
99
+ static getDerivedStateFromProps({ selectedIndex }: {
100
+ selectedIndex: any;
101
+ }, state: any): {
102
+ selectedIndex: any;
103
+ prevSelectedIndex: any;
104
+ } | null;
105
+ handleItemRef: (index: any) => (ref: any) => void;
106
+ handleChildChange: (data: any) => void;
107
+ render(): JSX.Element;
108
+ }
109
+ export {};
@@ -31,7 +31,9 @@ class ContentSwitcher extends React__default["default"].Component {
31
31
  constructor() {
32
32
  super(...arguments);
33
33
  _rollupPluginBabelHelpers.defineProperty(this, "_switchRefs", []);
34
- _rollupPluginBabelHelpers.defineProperty(this, "state", {});
34
+ _rollupPluginBabelHelpers.defineProperty(this, "state", {
35
+ selectedIndex: undefined
36
+ });
35
37
  _rollupPluginBabelHelpers.defineProperty(this, "handleItemRef", index => ref => {
36
38
  this._switchRefs[index] = ref;
37
39
  });
@@ -51,7 +53,7 @@ class ContentSwitcher extends React__default["default"].Component {
51
53
  key
52
54
  } = data;
53
55
  if (match.matches(data, [keys.ArrowRight, keys.ArrowLeft])) {
54
- const nextIndex = navigation.getNextIndex(key, index, this.props.children.length);
56
+ const nextIndex = navigation.getNextIndex(key, index, this.props.children?.length);
55
57
  const children = React__default["default"].Children.toArray(this.props.children);
56
58
  if (selectionMode === 'manual') {
57
59
  const switchRef = this._switchRefs[nextIndex];
@@ -60,6 +62,9 @@ class ContentSwitcher extends React__default["default"].Component {
60
62
  this.setState({
61
63
  selectedIndex: nextIndex
62
64
  }, () => {
65
+ if (typeof this.state.selectedIndex !== 'number') {
66
+ return;
67
+ }
63
68
  const child = children[this.state.selectedIndex];
64
69
  const switchRef = this._switchRefs[this.state.selectedIndex];
65
70
  switchRef && switchRef.focus();
@@ -105,16 +110,18 @@ class ContentSwitcher extends React__default["default"].Component {
105
110
  children,
106
111
  className,
107
112
  light,
113
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
108
114
  selectedIndex,
109
115
  // eslint-disable-line no-unused-vars
116
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
110
117
  selectionMode,
111
118
  // eslint-disable-line no-unused-vars
112
119
  size,
113
120
  ...other
114
121
  } = this.props;
115
- const isIconOnly = React__default["default"].Children.map(children, child => {
122
+ const isIconOnly = React__default["default"].Children?.map(children, child => {
116
123
  return child.type.displayName === 'IconSwitch';
117
- }).every(val => val === true);
124
+ })?.every(val => val === true);
118
125
  const classes = cx__default["default"](`${prefix}--content-switcher`, className, {
119
126
  [`${prefix}--content-switcher--light`]: light,
120
127
  [`${prefix}--content-switcher--${size}`]: size,
@@ -130,8 +137,9 @@ class ContentSwitcher extends React__default["default"].Component {
130
137
  }
131
138
  }, other, {
132
139
  className: classes,
133
- role: "tablist"
134
- }), React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
140
+ role: "tablist",
141
+ onChange: undefined
142
+ }), children && React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
135
143
  index,
136
144
  onClick: events.composeEventHandlers([this.handleChildChange, child.props.onClick]),
137
145
  onKeyDown: this.handleChildChange,
@@ -0,0 +1,9 @@
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 { ButtonComponent } from '../Button';
8
+ declare const DangerButton: ButtonComponent;
9
+ export default DangerButton;
@@ -12,6 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
13
  var React = require('react');
14
14
  var Button = require('../Button/Button.js');
15
+ require('../Button/Button.Skeleton.js');
15
16
 
16
17
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
18
 
@@ -20,6 +21,5 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
21
  const DangerButton = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
21
22
  kind: "danger"
22
23
  }, props));
23
- var DangerButton$1 = DangerButton;
24
24
 
25
- exports["default"] = DangerButton$1;
25
+ exports["default"] = DangerButton;
@@ -0,0 +1,9 @@
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 DangerButton from './DangerButton';
8
+ export default DangerButton;
9
+ export { DangerButton };
@@ -13,6 +13,7 @@ var PropTypes = require('prop-types');
13
13
  var React = require('react');
14
14
  var iconsReact = require('@carbon/icons-react');
15
15
  var Button = require('../Button/Button.js');
16
+ require('../Button/Button.Skeleton.js');
16
17
 
17
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
19
 
@@ -14,6 +14,7 @@ var cx = require('classnames');
14
14
  var PropTypes = require('prop-types');
15
15
  var React = require('react');
16
16
  var Button = require('../Button/Button.js');
17
+ require('../Button/Button.Skeleton.js');
17
18
  var TableActionList = require('./TableActionList.js');
18
19
  require('../Text/index.js');
19
20
  var usePrefix = require('../../internal/usePrefix.js');
@@ -0,0 +1,29 @@
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 PropTypes from 'prop-types';
8
+ import { ReactAttr } from '../../types/common';
9
+ export interface TableBodyProps extends ReactAttr<HTMLTableSectionElement> {
10
+ /**
11
+ * `polite` Adjust the notification behavior of screen readers
12
+ */
13
+ 'aria-live'?: 'polite' | 'assertive' | 'off';
14
+ }
15
+ declare const TableBody: {
16
+ ({ children, className, ...rest }: TableBodyProps): JSX.Element;
17
+ propTypes: {
18
+ /**
19
+ * `polite` Adjust the notification behavior of screen readers
20
+ */
21
+ 'aria-live': PropTypes.Requireable<string>;
22
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
23
+ className: PropTypes.Requireable<string>;
24
+ };
25
+ defaultProps: {
26
+ 'aria-live': string;
27
+ };
28
+ };
29
+ export default TableBody;
@@ -10,13 +10,13 @@
10
10
  Object.defineProperty(exports, '__esModule', { value: true });
11
11
 
12
12
  var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
13
- var React = require('react');
14
13
  var PropTypes = require('prop-types');
14
+ var React = require('react');
15
15
 
16
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
17
 
18
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
18
  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
19
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
20
 
21
21
  const TableBody = _ref => {
22
22
  let {
@@ -39,6 +39,5 @@ TableBody.propTypes = {
39
39
  TableBody.defaultProps = {
40
40
  'aria-live': 'polite'
41
41
  };
42
- var TableBody$1 = TableBody;
43
42
 
44
- exports["default"] = TableBody$1;
43
+ exports["default"] = TableBody;
@@ -0,0 +1,51 @@
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 PropTypes from 'prop-types';
8
+ import React from 'react';
9
+ import { ReactAttr } from '../../types/common';
10
+ export interface TableContainerProps extends Omit<ReactAttr<HTMLDivElement>, 'title'> {
11
+ /**
12
+ * Optional description text for the Table
13
+ */
14
+ description?: React.ReactNode;
15
+ /**
16
+ * Specify whether the table should have a sticky header
17
+ */
18
+ stickyHeader?: boolean;
19
+ /**
20
+ * If true, will use a width of 'fit-content' to match the inner table width
21
+ */
22
+ useStaticWidth?: boolean;
23
+ /**
24
+ * Provide a title for the Table
25
+ */
26
+ title?: React.ReactNode;
27
+ }
28
+ declare const TableContainer: {
29
+ ({ className, children, title, description, stickyHeader, useStaticWidth, ...rest }: TableContainerProps): JSX.Element;
30
+ propTypes: {
31
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
32
+ className: PropTypes.Requireable<string>;
33
+ /**
34
+ * Optional description text for the Table
35
+ */
36
+ description: PropTypes.Requireable<PropTypes.ReactNodeLike>;
37
+ /**
38
+ * Specify whether the table should have a sticky header
39
+ */
40
+ stickyHeader: PropTypes.Requireable<boolean>;
41
+ /**
42
+ * Provide a title for the Table
43
+ */
44
+ title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
45
+ /**
46
+ * If true, will use a width of 'fit-content' to match the inner table width
47
+ */
48
+ useStaticWidth: PropTypes.Requireable<boolean>;
49
+ };
50
+ };
51
+ export default TableContainer;
@@ -43,8 +43,8 @@ const TableContainer = _ref => {
43
43
  });
44
44
  const value = React.useMemo(() => {
45
45
  return {
46
- titleId: title ? titleId : null,
47
- descriptionId: description ? descriptionId : null
46
+ titleId: title ? titleId : undefined,
47
+ descriptionId: description ? descriptionId : undefined
48
48
  };
49
49
  }, [title, description, titleId, descriptionId]);
50
50
  return /*#__PURE__*/React__default["default"].createElement(TableContext.TableContext.Provider, {
@@ -81,6 +81,5 @@ TableContainer.propTypes = {
81
81
  */
82
82
  useStaticWidth: PropTypes__default["default"].bool
83
83
  };
84
- var TableContainer$1 = TableContainer;
85
84
 
86
- exports["default"] = TableContainer$1;
85
+ exports["default"] = TableContainer;
@@ -0,0 +1,86 @@
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 PropTypes from 'prop-types';
8
+ import React from 'react';
9
+ import { ReactAttr } from '../../types/common';
10
+ type TableExpandHeaderPropsBase = {
11
+ /**
12
+ * Specify the string read by a voice reader when the expand trigger is
13
+ * focused
14
+ */
15
+ ariaLabel?: string;
16
+ /**
17
+ * @deprecated The enableExpando prop is being replaced by `enableToggle`
18
+ */
19
+ enableExpando?: false | undefined;
20
+ /**
21
+ * Specify whether an expand all button should be displayed
22
+ */
23
+ enableToggle?: false | undefined;
24
+ /**
25
+ * The description of the chevron right icon, to be put in its SVG `<title>` element.
26
+ */
27
+ expandIconDescription?: string;
28
+ /**
29
+ * Specify whether this row is expanded or not. This helps coordinate data
30
+ * attributes so that `TableExpandRow` and `TableExpandedRow` work together
31
+ */
32
+ isExpanded?: boolean;
33
+ /**
34
+ * Hook for when a listener initiates a request to expand the given row
35
+ */
36
+ onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
37
+ } & ReactAttr<HTMLTableCellElement>;
38
+ type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableToggle' | 'onExpand'> & {
39
+ enableToggle: true;
40
+ ariaLabel: string;
41
+ onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
42
+ };
43
+ type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableExpando' | 'onExpand'> & {
44
+ enableExpando: true;
45
+ ariaLabel: string;
46
+ onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
47
+ };
48
+ export type TableExpandHeaderProps = TableExpandHeaderPropsWithToggle | TableExpandHeaderPropsWithExpando | TableExpandHeaderPropsBase;
49
+ declare const TableExpandHeader: {
50
+ ({ ariaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
51
+ propTypes: {
52
+ /**
53
+ * Specify the string read by a voice reader when the expand trigger is
54
+ * focused
55
+ */
56
+ ariaLabel: PropTypes.Requireable<any>;
57
+ children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
58
+ className: PropTypes.Requireable<string>;
59
+ /**
60
+ * The enableExpando prop is being replaced by enableToggle
61
+ */
62
+ enableExpando: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
63
+ /**
64
+ * Specify whether an expand all button should be displayed
65
+ */
66
+ enableToggle: PropTypes.Requireable<boolean>;
67
+ /**
68
+ * The description of the chevron right icon, to be put in its SVG `<title>` element.
69
+ */
70
+ expandIconDescription: PropTypes.Requireable<string>;
71
+ /**
72
+ * Supply an id to the th element.
73
+ */
74
+ id: PropTypes.Requireable<string>;
75
+ /**
76
+ * Specify whether this row is expanded or not. This helps coordinate data
77
+ * attributes so that `TableExpandRow` and `TableExpandedRow` work together
78
+ */
79
+ isExpanded: Function;
80
+ /**
81
+ * Hook for when a listener initiates a request to expand the given row
82
+ */
83
+ onExpand: PropTypes.Requireable<any>;
84
+ };
85
+ };
86
+ export default TableExpandHeader;