@carbon/react 1.90.0-rc.0 → 1.91.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +923 -964
- package/es/components/AILabel/index.js +8 -6
- package/es/components/Breadcrumb/BreadcrumbItem.js +2 -0
- package/es/components/Button/Button.js +3 -0
- package/es/components/ChatButton/ChatButton.js +1 -0
- package/es/components/CheckboxGroup/CheckboxGroup.js +21 -2
- package/es/components/CodeSnippet/CodeSnippet.d.ts +1 -1
- package/es/components/CodeSnippet/CodeSnippet.js +1 -1
- package/es/components/ComboBox/ComboBox.js +18 -13
- package/es/components/ComboButton/index.js +2 -1
- package/es/components/ComposedModal/ComposedModal.js +5 -2
- package/es/components/Copy/Copy.d.ts +1 -1
- package/es/components/Copy/Copy.js +1 -1
- package/es/components/CopyButton/CopyButton.d.ts +1 -1
- package/es/components/CopyButton/CopyButton.js +1 -1
- package/es/components/DataTable/DataTable.d.ts +60 -15
- package/es/components/DataTable/DataTable.js +119 -178
- package/es/components/DataTable/Table.d.ts +2 -2
- package/es/components/DataTable/Table.js +4 -4
- package/es/components/DataTable/TableExpandHeader.d.ts +1 -1
- package/es/components/DataTable/TableExpandHeader.js +6 -2
- package/es/components/DataTable/TableExpandRow.js +1 -0
- package/es/components/DataTable/TableHeader.js +2 -0
- package/es/components/DataTable/TableRow.js +5 -0
- package/es/components/DataTable/TableSlugRow.js +1 -0
- package/es/components/DataTable/TableToolbarMenu.js +3 -0
- package/es/components/DataTable/state/sorting.d.ts +3 -1
- package/es/components/DataTable/state/sorting.js +2 -0
- package/es/components/DataTable/tools/sorting.js +1 -0
- package/es/components/DatePicker/DatePicker.d.ts +0 -12
- package/es/components/DatePicker/DatePicker.js +17 -6
- package/es/components/DatePicker/plugins/rangePlugin.d.ts +19 -2
- package/es/components/DatePicker/plugins/rangePlugin.js +18 -14
- package/es/components/DatePickerInput/DatePickerInput.js +6 -0
- package/es/components/Dialog/Dialog.js +10 -2
- package/es/components/Dropdown/Dropdown.js +17 -16
- package/es/components/ErrorBoundary/ErrorBoundaryContext.js +1 -0
- package/es/components/FeatureFlags/index.js +1 -0
- package/es/components/FileUploader/FileUploader.js +9 -2
- package/es/components/FileUploader/FileUploaderButton.js +1 -1
- package/es/components/FileUploader/FileUploaderDropContainer.js +1 -1
- package/es/components/FileUploader/FileUploaderItem.js +3 -0
- package/es/components/FluidMultiSelect/FluidMultiSelect.js +2 -0
- package/es/components/FluidNumberInput/FluidNumberInput.js +3 -2
- package/es/components/FluidSearch/FluidSearch.js +3 -2
- package/es/components/FluidSelect/FluidSelect.js +3 -2
- package/es/components/FluidTextInput/FluidTextInput.js +3 -2
- package/es/components/FluidTimePicker/FluidTimePicker.js +11 -4
- package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +3 -2
- package/es/components/Grid/CSSGrid.js +5 -0
- package/es/components/Grid/Column.js +3 -0
- package/es/components/Grid/ColumnHang.js +1 -0
- package/es/components/Grid/FlexGrid.js +1 -0
- package/es/components/Grid/Row.js +1 -0
- package/es/components/Heading/index.js +3 -1
- package/es/components/IconButton/index.js +5 -3
- package/es/components/IconIndicator/index.js +4 -2
- package/es/components/InlineCheckbox/InlineCheckbox.js +3 -2
- package/es/components/Layout/index.js +6 -4
- package/es/components/LayoutDirection/LayoutDirection.js +2 -0
- package/es/components/Link/Link.js +3 -0
- package/es/components/ListBox/ListBoxMenuItem.js +4 -1
- package/es/components/ListBox/next/ListBoxTrigger.js +3 -2
- package/es/components/Menu/Menu.js +6 -9
- package/es/components/Menu/MenuContext.js +1 -0
- package/es/components/Menu/MenuItem.d.ts +1 -1
- package/es/components/Menu/MenuItem.js +10 -18
- package/es/components/MenuButton/index.js +7 -2
- package/es/components/Modal/Modal.js +4 -1
- package/es/components/ModalWrapper/ModalWrapper.js +2 -0
- package/es/components/MultiSelect/FilterableMultiSelect.js +25 -6
- package/es/components/MultiSelect/MultiSelect.js +22 -17
- package/es/components/Notification/Notification.d.ts +6 -6
- package/es/components/Notification/Notification.js +7 -7
- package/es/components/NumberInput/NumberInput.js +7 -1
- package/es/components/OverflowMenu/OverflowMenu.js +3 -1
- package/es/components/OverflowMenu/next/index.js +4 -3
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +2 -0
- package/es/components/PageHeader/PageHeader.d.ts +3 -3
- package/es/components/PageHeader/PageHeader.js +22 -8
- package/es/components/Pagination/Pagination.js +6 -2
- package/es/components/PaginationNav/PaginationNav.js +2 -5
- package/es/components/Popover/index.js +15 -5
- package/es/components/ProgressBar/ProgressBar.js +4 -2
- package/es/components/RadioTile/RadioTile.js +2 -2
- package/es/components/Search/Search.d.ts +4 -2
- package/es/components/Search/Search.js +7 -6
- package/es/components/Select/Select.js +2 -3
- package/es/components/ShapeIndicator/index.js +4 -2
- package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.d.ts +4 -4
- package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js +1 -2
- package/es/components/SkeletonText/SkeletonText.js +0 -2
- package/es/components/Slider/Slider.d.ts +144 -188
- package/es/components/Slider/Slider.js +798 -726
- package/es/components/Slider/index.d.ts +2 -2
- package/es/components/Stack/HStack.js +1 -0
- package/es/components/Stack/Stack.js +6 -9
- package/es/components/Stack/VStack.js +1 -0
- package/es/components/StructuredList/StructuredList.js +3 -0
- package/es/components/Switch/Switch.js +1 -1
- package/es/components/Tabs/Tabs.d.ts +4 -0
- package/es/components/Tabs/Tabs.js +28 -17
- package/es/components/Tag/DismissibleTag.js +2 -0
- package/es/components/Tag/OperationalTag.js +2 -0
- package/es/components/Tag/SelectableTag.js +2 -0
- package/es/components/Tag/Tag.js +4 -0
- package/es/components/Tag/isEllipsisActive.js +1 -0
- package/es/components/Text/Text.js +1 -0
- package/es/components/TextArea/TextArea.js +13 -6
- package/es/components/TextInput/ControlledPasswordInput.js +4 -6
- package/es/components/TextInput/PasswordInput.js +9 -4
- package/es/components/TextInput/TextInput.js +6 -4
- package/es/components/TextInput/util.d.ts +17 -5
- package/es/components/TextInput/util.js +2 -7
- package/es/components/Theme/index.js +8 -3
- package/es/components/Tile/Tile.js +14 -17
- package/es/components/TimePicker/TimePicker.js +1 -0
- package/es/components/Toggle/Toggle.js +1 -1
- package/es/components/Toggletip/index.js +4 -0
- package/es/components/Tooltip/DefinitionTooltip.js +1 -0
- package/es/components/Tooltip/Tooltip.js +30 -23
- package/es/components/TreeView/TreeNode.js +13 -5
- package/es/components/TreeView/TreeView.js +7 -0
- package/es/components/UIShell/HeaderContainer.js +3 -1
- package/es/components/UIShell/HeaderGlobalAction.js +2 -2
- package/es/components/UIShell/HeaderMenu.js +3 -3
- package/es/components/UIShell/HeaderPanel.d.ts +1 -1
- package/es/components/UIShell/HeaderPanel.js +2 -2
- package/es/components/UIShell/Link.js +2 -0
- package/es/components/UIShell/SideNavItems.js +1 -0
- package/es/components/UIShell/SideNavMenu.js +2 -2
- package/es/components/UIShell/SideNavMenuItem.js +1 -1
- package/es/components/UIShell/SideNavSwitcher.js +1 -1
- package/es/components/UIShell/Switcher.js +2 -1
- package/es/components/UIShell/SwitcherItem.js +4 -2
- package/es/index.d.ts +12 -13
- package/es/index.js +25 -24
- package/es/internal/FloatingMenu.js +7 -1
- package/es/internal/Selection.js +12 -3
- package/es/internal/defaultItemToString.d.ts +7 -0
- package/es/internal/defaultItemToString.js +17 -0
- package/es/internal/index.d.ts +1 -0
- package/es/internal/useMergedRefs.js +1 -0
- package/es/internal/useNoInteractiveChildren.js +4 -0
- package/es/internal/useOutsideClick.js +1 -0
- package/es/internal/useOverflowItems.js +6 -0
- package/es/internal/useResizeObserver.js +4 -0
- package/es/internal/useSavedCallback.js +1 -0
- package/es/internal/warning.js +1 -0
- package/es/prop-types/deprecateValuesWithin.d.ts +8 -1
- package/es/prop-types/deprecateValuesWithin.js +6 -6
- package/es/prop-types/isRequiredOneOf.js +4 -1
- package/es/prop-types/requiredIfGivenPropIsTruthy.d.ts +8 -7
- package/es/prop-types/requiredIfGivenPropIsTruthy.js +10 -10
- package/es/tools/events.js +3 -1
- package/es/tools/wrapComponent.js +1 -0
- package/lib/components/AILabel/index.js +8 -6
- package/lib/components/Breadcrumb/BreadcrumbItem.js +2 -0
- package/lib/components/Button/Button.js +3 -0
- package/lib/components/ChatButton/ChatButton.js +1 -0
- package/lib/components/CheckboxGroup/CheckboxGroup.js +20 -1
- package/lib/components/CodeSnippet/CodeSnippet.d.ts +1 -1
- package/lib/components/CodeSnippet/CodeSnippet.js +1 -1
- package/lib/components/ComboBox/ComboBox.js +20 -15
- package/lib/components/ComboButton/index.js +2 -1
- package/lib/components/ComposedModal/ComposedModal.js +5 -2
- package/lib/components/Copy/Copy.d.ts +1 -1
- package/lib/components/Copy/Copy.js +1 -1
- package/lib/components/CopyButton/CopyButton.d.ts +1 -1
- package/lib/components/CopyButton/CopyButton.js +1 -1
- package/lib/components/DataTable/DataTable.d.ts +60 -15
- package/lib/components/DataTable/DataTable.js +119 -178
- package/lib/components/DataTable/Table.d.ts +2 -2
- package/lib/components/DataTable/Table.js +4 -4
- package/lib/components/DataTable/TableExpandHeader.d.ts +1 -1
- package/lib/components/DataTable/TableExpandHeader.js +6 -2
- package/lib/components/DataTable/TableExpandRow.js +1 -0
- package/lib/components/DataTable/TableHeader.js +2 -0
- package/lib/components/DataTable/TableRow.js +5 -0
- package/lib/components/DataTable/TableSlugRow.js +1 -0
- package/lib/components/DataTable/TableToolbarMenu.js +3 -0
- package/lib/components/DataTable/state/sorting.d.ts +3 -1
- package/lib/components/DataTable/state/sorting.js +2 -0
- package/lib/components/DataTable/tools/sorting.js +1 -0
- package/lib/components/DatePicker/DatePicker.d.ts +0 -12
- package/lib/components/DatePicker/DatePicker.js +16 -5
- package/lib/components/DatePicker/plugins/rangePlugin.d.ts +19 -2
- package/lib/components/DatePicker/plugins/rangePlugin.js +18 -16
- package/lib/components/DatePickerInput/DatePickerInput.js +6 -0
- package/lib/components/Dialog/Dialog.js +10 -2
- package/lib/components/Dropdown/Dropdown.js +19 -18
- package/lib/components/ErrorBoundary/ErrorBoundaryContext.js +1 -0
- package/lib/components/FeatureFlags/index.js +1 -0
- package/lib/components/FileUploader/FileUploader.js +9 -2
- package/lib/components/FileUploader/FileUploaderButton.js +1 -1
- package/lib/components/FileUploader/FileUploaderDropContainer.js +1 -1
- package/lib/components/FileUploader/FileUploaderItem.js +3 -0
- package/lib/components/FluidMultiSelect/FluidMultiSelect.js +2 -0
- package/lib/components/FluidNumberInput/FluidNumberInput.js +3 -2
- package/lib/components/FluidSearch/FluidSearch.js +3 -2
- package/lib/components/FluidSelect/FluidSelect.js +3 -2
- package/lib/components/FluidTextInput/FluidTextInput.js +3 -2
- package/lib/components/FluidTimePicker/FluidTimePicker.js +11 -4
- package/lib/components/FluidTimePickerSelect/FluidTimePickerSelect.js +3 -2
- package/lib/components/Grid/CSSGrid.js +5 -0
- package/lib/components/Grid/Column.js +3 -0
- package/lib/components/Grid/ColumnHang.js +1 -0
- package/lib/components/Grid/FlexGrid.js +1 -0
- package/lib/components/Grid/Row.js +1 -0
- package/lib/components/Heading/index.js +3 -1
- package/lib/components/IconButton/index.js +5 -3
- package/lib/components/IconIndicator/index.js +4 -2
- package/lib/components/InlineCheckbox/InlineCheckbox.js +3 -2
- package/lib/components/Layout/index.js +6 -4
- package/lib/components/LayoutDirection/LayoutDirection.js +2 -0
- package/lib/components/Link/Link.js +3 -0
- package/lib/components/ListBox/ListBoxMenuItem.js +4 -1
- package/lib/components/ListBox/next/ListBoxTrigger.js +3 -2
- package/lib/components/Menu/Menu.js +6 -9
- package/lib/components/Menu/MenuContext.js +1 -0
- package/lib/components/Menu/MenuItem.d.ts +1 -1
- package/lib/components/Menu/MenuItem.js +11 -19
- package/lib/components/MenuButton/index.js +7 -2
- package/lib/components/Modal/Modal.js +4 -1
- package/lib/components/ModalWrapper/ModalWrapper.js +2 -0
- package/lib/components/MultiSelect/FilterableMultiSelect.js +32 -13
- package/lib/components/MultiSelect/MultiSelect.js +23 -18
- package/lib/components/Notification/Notification.d.ts +6 -6
- package/lib/components/Notification/Notification.js +7 -7
- package/lib/components/NumberInput/NumberInput.js +7 -1
- package/lib/components/OverflowMenu/OverflowMenu.js +3 -1
- package/lib/components/OverflowMenu/next/index.js +4 -3
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +2 -0
- package/lib/components/PageHeader/PageHeader.d.ts +3 -3
- package/lib/components/PageHeader/PageHeader.js +22 -8
- package/lib/components/Pagination/Pagination.js +6 -2
- package/lib/components/PaginationNav/PaginationNav.js +2 -5
- package/lib/components/Popover/index.js +15 -5
- package/lib/components/ProgressBar/ProgressBar.js +4 -2
- package/lib/components/RadioTile/RadioTile.js +2 -2
- package/lib/components/Search/Search.d.ts +4 -2
- package/lib/components/Search/Search.js +7 -6
- package/lib/components/Select/Select.js +2 -3
- package/lib/components/ShapeIndicator/index.js +4 -2
- package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.d.ts +4 -4
- package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js +1 -2
- package/lib/components/SkeletonText/SkeletonText.js +0 -2
- package/lib/components/Slider/Slider.d.ts +144 -188
- package/lib/components/Slider/Slider.js +795 -725
- package/lib/components/Slider/index.d.ts +2 -2
- package/lib/components/Stack/HStack.js +1 -0
- package/lib/components/Stack/Stack.js +6 -9
- package/lib/components/Stack/VStack.js +1 -0
- package/lib/components/StructuredList/StructuredList.js +3 -0
- package/lib/components/Switch/Switch.js +1 -1
- package/lib/components/Tabs/Tabs.d.ts +4 -0
- package/lib/components/Tabs/Tabs.js +28 -17
- package/lib/components/Tag/DismissibleTag.js +2 -0
- package/lib/components/Tag/OperationalTag.js +2 -0
- package/lib/components/Tag/SelectableTag.js +2 -0
- package/lib/components/Tag/Tag.js +4 -0
- package/lib/components/Tag/isEllipsisActive.js +1 -0
- package/lib/components/Text/Text.js +1 -0
- package/lib/components/TextArea/TextArea.js +13 -6
- package/lib/components/TextInput/ControlledPasswordInput.js +3 -5
- package/lib/components/TextInput/PasswordInput.js +8 -3
- package/lib/components/TextInput/TextInput.js +5 -3
- package/lib/components/TextInput/util.d.ts +17 -5
- package/lib/components/TextInput/util.js +2 -7
- package/lib/components/Theme/index.js +8 -3
- package/lib/components/Tile/Tile.js +14 -17
- package/lib/components/TimePicker/TimePicker.js +1 -0
- package/lib/components/Toggle/Toggle.js +1 -1
- package/lib/components/Toggletip/index.js +4 -0
- package/lib/components/Tooltip/DefinitionTooltip.js +1 -0
- package/lib/components/Tooltip/Tooltip.js +30 -23
- package/lib/components/TreeView/TreeNode.js +13 -5
- package/lib/components/TreeView/TreeView.js +7 -0
- package/lib/components/UIShell/HeaderContainer.js +3 -1
- package/lib/components/UIShell/HeaderGlobalAction.js +2 -2
- package/lib/components/UIShell/HeaderMenu.js +3 -3
- package/lib/components/UIShell/HeaderPanel.d.ts +1 -1
- package/lib/components/UIShell/HeaderPanel.js +2 -2
- package/lib/components/UIShell/Link.js +2 -0
- package/lib/components/UIShell/SideNavItems.js +1 -0
- package/lib/components/UIShell/SideNavMenu.js +2 -2
- package/lib/components/UIShell/SideNavMenuItem.js +1 -1
- package/lib/components/UIShell/SideNavSwitcher.js +1 -1
- package/lib/components/UIShell/Switcher.js +2 -1
- package/lib/components/UIShell/SwitcherItem.js +4 -2
- package/lib/index.d.ts +12 -13
- package/lib/index.js +51 -28
- package/lib/internal/FloatingMenu.js +7 -1
- package/lib/internal/Selection.js +12 -3
- package/lib/internal/defaultItemToString.d.ts +7 -0
- package/lib/internal/defaultItemToString.js +19 -0
- package/lib/internal/index.d.ts +1 -0
- package/lib/internal/useMergedRefs.js +1 -0
- package/lib/internal/useNoInteractiveChildren.js +4 -0
- package/lib/internal/useOutsideClick.js +1 -0
- package/lib/internal/useOverflowItems.js +6 -0
- package/lib/internal/useResizeObserver.js +4 -0
- package/lib/internal/useSavedCallback.js +1 -0
- package/lib/internal/warning.js +1 -0
- package/lib/prop-types/deprecateValuesWithin.d.ts +8 -1
- package/lib/prop-types/deprecateValuesWithin.js +6 -8
- package/lib/prop-types/isRequiredOneOf.js +4 -1
- package/lib/prop-types/requiredIfGivenPropIsTruthy.d.ts +8 -7
- package/lib/prop-types/requiredIfGivenPropIsTruthy.js +10 -12
- package/lib/tools/events.js +3 -1
- package/lib/tools/wrapComponent.js +1 -0
- package/package.json +10 -9
- package/es/components/MultiSelect/tools/itemToString.d.ts +0 -1
- package/es/components/MultiSelect/tools/itemToString.js +0 -21
- package/es/components/Slider/index.js +0 -14
- package/es/internal/createClassWrapper.js +0 -23
- package/lib/components/MultiSelect/tools/itemToString.d.ts +0 -1
- package/lib/components/MultiSelect/tools/itemToString.js +0 -23
- package/lib/components/Slider/index.js +0 -20
- package/lib/internal/createClassWrapper.js +0 -25
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2025
|
|
3
3
|
*
|
|
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
|
-
|
|
7
|
+
import { Slider } from './Slider';
|
|
8
8
|
export { default as SliderSkeleton } from './Slider.Skeleton';
|
|
9
9
|
export default Slider;
|
|
10
10
|
export { Slider };
|
|
@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
|
|
|
9
9
|
import React, { forwardRef } from 'react';
|
|
10
10
|
import { Stack } from './Stack.js';
|
|
11
11
|
|
|
12
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
12
13
|
const HStack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
14
|
return /*#__PURE__*/React.createElement(Stack, _extends({}, props, {
|
|
14
15
|
ref: ref,
|
|
@@ -35,6 +35,7 @@ const SPACING_STEPS = Array.from({
|
|
|
35
35
|
* - https://paste.twilio.design/layout/stack/
|
|
36
36
|
* - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
|
|
37
37
|
*/
|
|
38
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
38
39
|
const Stack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
39
40
|
const {
|
|
40
41
|
as: BaseComponent = 'div',
|
|
@@ -55,15 +56,11 @@ const Stack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
55
56
|
if (typeof gap === 'string') {
|
|
56
57
|
style[`--${prefix}-stack-gap`] = gap;
|
|
57
58
|
}
|
|
58
|
-
return (
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
className: className,
|
|
64
|
-
style: style
|
|
65
|
-
}), children)
|
|
66
|
-
);
|
|
59
|
+
return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, rest, {
|
|
60
|
+
ref: ref,
|
|
61
|
+
className: className,
|
|
62
|
+
style: style
|
|
63
|
+
}), children);
|
|
67
64
|
});
|
|
68
65
|
Stack.propTypes = {
|
|
69
66
|
/**
|
|
@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
|
|
|
9
9
|
import React, { forwardRef } from 'react';
|
|
10
10
|
import { Stack } from './Stack.js';
|
|
11
11
|
|
|
12
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
12
13
|
const VStack = /*#__PURE__*/forwardRef((props, ref) => {
|
|
13
14
|
return /*#__PURE__*/React.createElement(Stack, _extends({}, props, {
|
|
14
15
|
ref: ref,
|
|
@@ -150,6 +150,7 @@ function StructuredListRow(props) {
|
|
|
150
150
|
...other
|
|
151
151
|
} = props;
|
|
152
152
|
const [hasFocusWithin, setHasFocusWithin] = useState(false);
|
|
153
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
153
154
|
const rowId = id ?? useId('grid-input');
|
|
154
155
|
const selectedRow = React.useContext(GridSelectedRowStateContext);
|
|
155
156
|
const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
|
|
@@ -183,6 +184,7 @@ function StructuredListRow(props) {
|
|
|
183
184
|
ref: itemRef,
|
|
184
185
|
onClick: event => {
|
|
185
186
|
setSelectedRow?.(rowId);
|
|
187
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
186
188
|
onClick && onClick(event);
|
|
187
189
|
if (selection) {
|
|
188
190
|
// focus items only when selection is enabled
|
|
@@ -262,6 +264,7 @@ function StructuredListInput(props) {
|
|
|
262
264
|
value: row?.id ?? '',
|
|
263
265
|
onChange: event => {
|
|
264
266
|
setSelectedRow?.(event.target.value);
|
|
267
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
265
268
|
onChange && onChange(event);
|
|
266
269
|
},
|
|
267
270
|
id: id ?? defaultId,
|
|
@@ -12,7 +12,7 @@ import cx from 'classnames';
|
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
import { noopFn } from '../../internal/noopFn.js';
|
|
14
14
|
|
|
15
|
-
const Switch = /*#__PURE__*/React.forwardRef(
|
|
15
|
+
const Switch = /*#__PURE__*/React.forwardRef((props, tabRef) => {
|
|
16
16
|
const {
|
|
17
17
|
children,
|
|
18
18
|
className,
|
|
@@ -367,6 +367,10 @@ export interface IconTabProps extends DivAttributes {
|
|
|
367
367
|
* Specify whether the tooltip for the icon should be open when it first renders
|
|
368
368
|
*/
|
|
369
369
|
defaultOpen?: boolean;
|
|
370
|
+
/**
|
|
371
|
+
* Specify whether your IconTab is disabled.
|
|
372
|
+
*/
|
|
373
|
+
disabled?: boolean;
|
|
370
374
|
/**
|
|
371
375
|
* Specify the duration in milliseconds to delay before displaying the tooltip for the icon.
|
|
372
376
|
*/
|
|
@@ -78,6 +78,7 @@ function Tabs({
|
|
|
78
78
|
}) {
|
|
79
79
|
const baseId = useId('ccs');
|
|
80
80
|
if (dismissable && !onTabCloseRequest) {
|
|
81
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
81
82
|
console.error('dismissable property specified without also providing an onTabCloseRequest property.');
|
|
82
83
|
}
|
|
83
84
|
// The active index is used to track the element which has focus in our tablist
|
|
@@ -164,15 +165,11 @@ function TabsVertical({
|
|
|
164
165
|
};
|
|
165
166
|
const isSm = useMatchMedia(smMediaQuery);
|
|
166
167
|
if (!isSm) {
|
|
167
|
-
return (
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
height: height
|
|
173
|
-
}
|
|
174
|
-
}, /*#__PURE__*/React.createElement(Tabs, props, children))
|
|
175
|
-
);
|
|
168
|
+
return /*#__PURE__*/React.createElement(GridAsGridComponent, {
|
|
169
|
+
style: {
|
|
170
|
+
height: height
|
|
171
|
+
}
|
|
172
|
+
}, /*#__PURE__*/React.createElement(Tabs, props, children));
|
|
176
173
|
}
|
|
177
174
|
return /*#__PURE__*/React.createElement(Tabs, props, children);
|
|
178
175
|
}
|
|
@@ -276,6 +273,7 @@ function TabList({
|
|
|
276
273
|
let hasSecondaryLabelTabs = false;
|
|
277
274
|
if (contained) {
|
|
278
275
|
hasSecondaryLabelTabs = React.Children.toArray(children).some(child => {
|
|
276
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
279
277
|
const _child = child;
|
|
280
278
|
return /*#__PURE__*/React.isValidElement(child) && !!_child.props.secondaryLabel;
|
|
281
279
|
});
|
|
@@ -389,6 +387,7 @@ function TabList({
|
|
|
389
387
|
inline: 'nearest'
|
|
390
388
|
});
|
|
391
389
|
}
|
|
390
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
392
391
|
}, []);
|
|
393
392
|
useEffect(() => {
|
|
394
393
|
//adding 1 in calculation for firefox support
|
|
@@ -409,6 +408,7 @@ function TabList({
|
|
|
409
408
|
setSelectedIndex(tabs.current.indexOf(tab));
|
|
410
409
|
}
|
|
411
410
|
}
|
|
411
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
412
412
|
}, []);
|
|
413
413
|
useIsomorphicEffect(() => {
|
|
414
414
|
if (ref.current) {
|
|
@@ -495,7 +495,9 @@ function TabList({
|
|
|
495
495
|
hasSecondaryLabel: hasSecondaryLabelTabs,
|
|
496
496
|
contained
|
|
497
497
|
}
|
|
498
|
-
}, /*#__PURE__*/React.cloneElement(
|
|
498
|
+
}, /*#__PURE__*/React.cloneElement(
|
|
499
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
500
|
+
child, {
|
|
499
501
|
ref: node => {
|
|
500
502
|
tabs.current[index] = node;
|
|
501
503
|
}
|
|
@@ -629,6 +631,7 @@ function TabListVertical({
|
|
|
629
631
|
setSelectedIndex(tabs.current.indexOf(tab));
|
|
630
632
|
}
|
|
631
633
|
}
|
|
634
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
632
635
|
}, []);
|
|
633
636
|
useEffect(() => {
|
|
634
637
|
function handler() {
|
|
@@ -639,6 +642,7 @@ function TabListVertical({
|
|
|
639
642
|
if (containerTop && containerHeight) {
|
|
640
643
|
// scrolls so selected tab is in view
|
|
641
644
|
if (selectedPositionTop - halfTabHeight < containerTop || selectedPositionTop - containerTop + verticalTabHeight + halfTabHeight > containerHeight) {
|
|
645
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
642
646
|
ref.current && ref.current.scrollTo({
|
|
643
647
|
top: (selectedIndex - 1) * verticalTabHeight,
|
|
644
648
|
behavior: 'smooth'
|
|
@@ -693,7 +697,9 @@ function TabListVertical({
|
|
|
693
697
|
index,
|
|
694
698
|
hasSecondaryLabel: false
|
|
695
699
|
}
|
|
696
|
-
}, /*#__PURE__*/React.cloneElement(
|
|
700
|
+
}, /*#__PURE__*/React.cloneElement(
|
|
701
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
702
|
+
child, {
|
|
697
703
|
ref: node => {
|
|
698
704
|
tabs.current[index] = node;
|
|
699
705
|
}
|
|
@@ -769,7 +775,8 @@ function createLongPressBehavior(ref, direction, setScrollLeft) {
|
|
|
769
775
|
* Tab
|
|
770
776
|
*/
|
|
771
777
|
|
|
772
|
-
|
|
778
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
779
|
+
const Tab = /*#__PURE__*/forwardRef(({
|
|
773
780
|
as = 'button',
|
|
774
781
|
children,
|
|
775
782
|
className: customClassName,
|
|
@@ -779,7 +786,7 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
|
|
|
779
786
|
secondaryLabel,
|
|
780
787
|
renderIcon: Icon,
|
|
781
788
|
...rest
|
|
782
|
-
}, forwardRef) {
|
|
789
|
+
}, forwardRef) => {
|
|
783
790
|
const prefix = usePrefix();
|
|
784
791
|
const {
|
|
785
792
|
selectedIndex,
|
|
@@ -803,6 +810,8 @@ const Tab = /*#__PURE__*/forwardRef(function Tab({
|
|
|
803
810
|
const id = `${baseId}-tab-${index}`;
|
|
804
811
|
const panelId = `${baseId}-tabpanel-${index}`;
|
|
805
812
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
813
|
+
|
|
814
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
806
815
|
const isEllipsisActive = element => {
|
|
807
816
|
setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
|
|
808
817
|
return element.offsetHeight < element.scrollHeight;
|
|
@@ -1022,7 +1031,8 @@ Tab.propTypes = {
|
|
|
1022
1031
|
*/
|
|
1023
1032
|
|
|
1024
1033
|
const IconTabContext = /*#__PURE__*/createContext(false);
|
|
1025
|
-
|
|
1034
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
1035
|
+
const IconTab = /*#__PURE__*/React.forwardRef(({
|
|
1026
1036
|
badgeIndicator,
|
|
1027
1037
|
children,
|
|
1028
1038
|
className: customClassName,
|
|
@@ -1031,7 +1041,7 @@ const IconTab = /*#__PURE__*/React.forwardRef(function IconTab({
|
|
|
1031
1041
|
leaveDelayMs,
|
|
1032
1042
|
label,
|
|
1033
1043
|
...rest
|
|
1034
|
-
}, ref) {
|
|
1044
|
+
}, ref) => {
|
|
1035
1045
|
const prefix = usePrefix();
|
|
1036
1046
|
const value = useMemo(() => ({
|
|
1037
1047
|
badgeIndicator
|
|
@@ -1093,11 +1103,12 @@ IconTab.propTypes = {
|
|
|
1093
1103
|
* TabPanel
|
|
1094
1104
|
*/
|
|
1095
1105
|
|
|
1096
|
-
|
|
1106
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
1107
|
+
const TabPanel = /*#__PURE__*/React.forwardRef(({
|
|
1097
1108
|
children,
|
|
1098
1109
|
className: customClassName,
|
|
1099
1110
|
...rest
|
|
1100
|
-
}, forwardRef) {
|
|
1111
|
+
}, forwardRef) => {
|
|
1101
1112
|
const prefix = usePrefix();
|
|
1102
1113
|
const panel = useRef(null);
|
|
1103
1114
|
const ref = useMergedRefs([forwardRef, panel]);
|
|
@@ -24,6 +24,7 @@ import { isComponentElement } from '../../internal/utils.js';
|
|
|
24
24
|
import { Text } from '../Text/Text.js';
|
|
25
25
|
|
|
26
26
|
var _Close;
|
|
27
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
27
28
|
const DismissibleTag = /*#__PURE__*/forwardRef(({
|
|
28
29
|
className,
|
|
29
30
|
decorator,
|
|
@@ -43,6 +44,7 @@ const DismissibleTag = /*#__PURE__*/forwardRef(({
|
|
|
43
44
|
}, forwardRef) => {
|
|
44
45
|
const prefix = usePrefix();
|
|
45
46
|
const tagLabelRef = useRef(null);
|
|
47
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
46
48
|
const tagId = id || `tag-${useId()}`;
|
|
47
49
|
const tagClasses = cx(`${prefix}--tag--filter`, className);
|
|
48
50
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
@@ -31,6 +31,7 @@ const TYPES = {
|
|
|
31
31
|
'cool-gray': 'Cool-Gray',
|
|
32
32
|
'warm-gray': 'Warm-Gray'
|
|
33
33
|
};
|
|
34
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
34
35
|
const OperationalTag = /*#__PURE__*/forwardRef(({
|
|
35
36
|
className,
|
|
36
37
|
disabled,
|
|
@@ -43,6 +44,7 @@ const OperationalTag = /*#__PURE__*/forwardRef(({
|
|
|
43
44
|
}, forwardRef) => {
|
|
44
45
|
const prefix = usePrefix();
|
|
45
46
|
const tagRef = useRef(null);
|
|
47
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
46
48
|
const tagId = id || `tag-${useId()}`;
|
|
47
49
|
const tagClasses = cx(`${prefix}--tag--operational`, className);
|
|
48
50
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
@@ -20,6 +20,7 @@ import mergeRefs from '../../tools/mergeRefs.js';
|
|
|
20
20
|
import { useControllableState } from '../../internal/useControllableState.js';
|
|
21
21
|
import { Text } from '../Text/Text.js';
|
|
22
22
|
|
|
23
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
23
24
|
const SelectableTag = /*#__PURE__*/forwardRef(({
|
|
24
25
|
className,
|
|
25
26
|
disabled,
|
|
@@ -35,6 +36,7 @@ const SelectableTag = /*#__PURE__*/forwardRef(({
|
|
|
35
36
|
}, forwardRef) => {
|
|
36
37
|
const prefix = usePrefix();
|
|
37
38
|
const tagRef = useRef(null);
|
|
39
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
38
40
|
const tagId = id || `tag-${useId()}`;
|
|
39
41
|
const [selectedTag, setSelectedTag] = useControllableState({
|
|
40
42
|
value: selected,
|
package/es/components/Tag/Tag.js
CHANGED
|
@@ -42,6 +42,7 @@ const SIZES = {
|
|
|
42
42
|
md: 'md',
|
|
43
43
|
lg: 'lg'
|
|
44
44
|
};
|
|
45
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
45
46
|
const TagBase = /*#__PURE__*/React.forwardRef(({
|
|
46
47
|
children,
|
|
47
48
|
className,
|
|
@@ -64,12 +65,15 @@ const TagBase = /*#__PURE__*/React.forwardRef(({
|
|
|
64
65
|
const prefix = usePrefix();
|
|
65
66
|
const tagRef = useRef(null);
|
|
66
67
|
if (filter) {
|
|
68
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
67
69
|
console.warn('The `filter` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
|
|
68
70
|
}
|
|
69
71
|
if (onClose) {
|
|
72
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
70
73
|
console.warn('The `onClose` prop for Tag has been deprecated and will be removed in the next major version. Use DismissibleTag instead.');
|
|
71
74
|
}
|
|
72
75
|
const ref = useMergedRefs([forwardRef, tagRef]);
|
|
76
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
73
77
|
const tagId = id || `tag-${useId()}`;
|
|
74
78
|
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
|
|
75
79
|
useLayoutEffect(() => {
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
8
9
|
const isEllipsisActive = element => {
|
|
9
10
|
if (element) {
|
|
10
11
|
return element?.offsetWidth < element?.scrollWidth;
|
|
@@ -11,6 +11,7 @@ import React, { useContext, Children } from 'react';
|
|
|
11
11
|
import './index.js';
|
|
12
12
|
import { TextDirectionContext } from './TextDirectionContext.js';
|
|
13
13
|
|
|
14
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
14
15
|
const TextBase = /*#__PURE__*/React.forwardRef(({
|
|
15
16
|
as,
|
|
16
17
|
children,
|
|
@@ -80,19 +80,26 @@ const TextArea = frFn((props, forwardRef) => {
|
|
|
80
80
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
81
|
}, [value, defaultValue, counterMode]);
|
|
82
82
|
useIsomorphicEffect(() => {
|
|
83
|
-
const measuredWidth = wrapperRef.current?.scrollWidth;
|
|
84
83
|
if (other.cols && textareaRef.current) {
|
|
85
84
|
textareaRef.current.style.width = '';
|
|
86
85
|
textareaRef.current.style.resize = 'none';
|
|
87
86
|
} else if (textareaRef.current) {
|
|
88
87
|
textareaRef.current.style.width = `100%`;
|
|
89
88
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
r.current
|
|
94
|
-
|
|
89
|
+
if (!wrapperRef.current) return;
|
|
90
|
+
const applyWidth = width => {
|
|
91
|
+
[helperTextRef, errorTextRef, warnTextRef].forEach(r => {
|
|
92
|
+
if (r.current) {
|
|
93
|
+
r.current.style.maxWidth = `${width}px`;
|
|
94
|
+
r.current.style.overflowWrap = 'break-word';
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
const resizeObserver = new ResizeObserver(([entry]) => {
|
|
99
|
+
applyWidth(entry.contentRect.width);
|
|
95
100
|
});
|
|
101
|
+
resizeObserver.observe(wrapperRef.current);
|
|
102
|
+
return () => resizeObserver && resizeObserver.disconnect();
|
|
96
103
|
}, [other.cols, invalid, warn]);
|
|
97
104
|
const textareaProps = {
|
|
98
105
|
id,
|
|
@@ -10,13 +10,13 @@ import React from 'react';
|
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
|
|
13
|
-
import {
|
|
13
|
+
import { getTextInputProps } from './util.js';
|
|
14
14
|
import { deprecate } from '../../prop-types/deprecate.js';
|
|
15
15
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
16
16
|
import { useId } from '../../internal/useId.js';
|
|
17
17
|
import { noopFn } from '../../internal/noopFn.js';
|
|
18
18
|
|
|
19
|
-
const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(
|
|
19
|
+
const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(({
|
|
20
20
|
labelText,
|
|
21
21
|
className,
|
|
22
22
|
id,
|
|
@@ -29,9 +29,7 @@ const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(function Controlle
|
|
|
29
29
|
invalidText = '',
|
|
30
30
|
helperText = '',
|
|
31
31
|
light,
|
|
32
|
-
// eslint-disable-next-line react/prop-types
|
|
33
32
|
type = 'password',
|
|
34
|
-
// eslint-disable-next-line react/prop-types
|
|
35
33
|
togglePasswordVisibility,
|
|
36
34
|
tooltipPosition = 'bottom',
|
|
37
35
|
tooltipAlignment = 'center',
|
|
@@ -39,7 +37,7 @@ const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(function Controlle
|
|
|
39
37
|
showPasswordLabel = 'Show password',
|
|
40
38
|
size = undefined,
|
|
41
39
|
...other
|
|
42
|
-
}, ref) {
|
|
40
|
+
}, ref) => {
|
|
43
41
|
const prefix = usePrefix();
|
|
44
42
|
const controlledPasswordInstanceId = useId();
|
|
45
43
|
const errorId = id + '-error-msg';
|
|
@@ -92,7 +90,7 @@ const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(function Controlle
|
|
|
92
90
|
[`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
|
|
93
91
|
});
|
|
94
92
|
const helperId = !helperText ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
|
|
95
|
-
const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({},
|
|
93
|
+
const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, getTextInputProps({
|
|
96
94
|
invalid,
|
|
97
95
|
sharedTextInputProps,
|
|
98
96
|
invalidId: errorId,
|
|
@@ -11,7 +11,7 @@ import cx from 'classnames';
|
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import { ViewOff, View } from '@carbon/icons-react';
|
|
13
13
|
import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
|
|
14
|
-
import {
|
|
14
|
+
import { getTextInputProps } from './util.js';
|
|
15
15
|
import '../FluidForm/FluidForm.js';
|
|
16
16
|
import { FormContext } from '../FluidForm/FormContext.js';
|
|
17
17
|
import '../Tooltip/DefinitionTooltip.js';
|
|
@@ -19,7 +19,7 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
|
19
19
|
import { deprecate } from '../../prop-types/deprecate.js';
|
|
20
20
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
21
21
|
|
|
22
|
-
const PasswordInput = /*#__PURE__*/React.forwardRef(
|
|
22
|
+
const PasswordInput = /*#__PURE__*/React.forwardRef(({
|
|
23
23
|
className,
|
|
24
24
|
disabled = false,
|
|
25
25
|
helperText,
|
|
@@ -44,7 +44,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput({
|
|
|
44
44
|
warn = false,
|
|
45
45
|
warnText,
|
|
46
46
|
...rest
|
|
47
|
-
}, ref) {
|
|
47
|
+
}, ref) => {
|
|
48
48
|
const [inputType, setInputType] = useState(type);
|
|
49
49
|
const prefix = usePrefix();
|
|
50
50
|
const normalizedProps = useNormalizedInputProps({
|
|
@@ -61,6 +61,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput({
|
|
|
61
61
|
} = useContext(FormContext);
|
|
62
62
|
const handleTogglePasswordVisibility = event => {
|
|
63
63
|
setInputType(inputType === 'password' ? 'text' : 'password');
|
|
64
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
64
65
|
onTogglePasswordVisibility && onTogglePasswordVisibility(event);
|
|
65
66
|
};
|
|
66
67
|
const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
|
|
@@ -150,11 +151,13 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput({
|
|
|
150
151
|
align = tooltipPosition;
|
|
151
152
|
}
|
|
152
153
|
if (!hidePasswordLabel || hidePasswordLabel.trim() === '') {
|
|
154
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
153
155
|
console.warn('Warning: The "hidePasswordLabel" should not be blank.');
|
|
154
156
|
} else if (!showPasswordLabel || showPasswordLabel.trim() === '') {
|
|
157
|
+
// eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
155
158
|
console.warn('Warning: The "showPasswordLabel" should not be blank.');
|
|
156
159
|
}
|
|
157
|
-
const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({},
|
|
160
|
+
const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, getTextInputProps({
|
|
158
161
|
sharedTextInputProps,
|
|
159
162
|
invalid: normalizedProps.invalid,
|
|
160
163
|
invalidId: normalizedProps.invalidId,
|
|
@@ -180,6 +183,8 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput({
|
|
|
180
183
|
useEffect(() => {
|
|
181
184
|
setInputType(type);
|
|
182
185
|
}, [type]);
|
|
186
|
+
|
|
187
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
183
188
|
const Icon = normalizedProps.icon;
|
|
184
189
|
return /*#__PURE__*/React.createElement("div", {
|
|
185
190
|
className: inputWrapperClasses
|
|
@@ -10,7 +10,7 @@ import React, { useRef, useState, useEffect, useContext, cloneElement } from 're
|
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
|
|
12
12
|
import { deprecate } from '../../prop-types/deprecate.js';
|
|
13
|
-
import {
|
|
13
|
+
import { getTextInputProps } from './util.js';
|
|
14
14
|
import '../FluidForm/FluidForm.js';
|
|
15
15
|
import { FormContext } from '../FluidForm/FormContext.js';
|
|
16
16
|
import { useMergedRefs } from '../../internal/useMergedRefs.js';
|
|
@@ -21,7 +21,7 @@ import { AILabel } from '../AILabel/index.js';
|
|
|
21
21
|
import { isComponentElement } from '../../internal/utils.js';
|
|
22
22
|
import { Text } from '../Text/Text.js';
|
|
23
23
|
|
|
24
|
-
const TextInput = /*#__PURE__*/React.forwardRef(
|
|
24
|
+
const TextInput = /*#__PURE__*/React.forwardRef(({
|
|
25
25
|
className,
|
|
26
26
|
decorator,
|
|
27
27
|
disabled = false,
|
|
@@ -45,7 +45,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
|
|
|
45
45
|
maxCount,
|
|
46
46
|
slug,
|
|
47
47
|
...rest
|
|
48
|
-
}, ref) {
|
|
48
|
+
}, ref) => {
|
|
49
49
|
const prefix = usePrefix();
|
|
50
50
|
const {
|
|
51
51
|
defaultValue,
|
|
@@ -60,6 +60,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
|
|
|
60
60
|
const [textCount, setTextCount] = useState(getInitialTextCount());
|
|
61
61
|
useEffect(() => {
|
|
62
62
|
setTextCount(getInitialTextCount());
|
|
63
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
63
64
|
}, [value, defaultValue, enableCounter]);
|
|
64
65
|
const normalizedProps = useNormalizedInputProps({
|
|
65
66
|
id,
|
|
@@ -153,7 +154,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
|
|
|
153
154
|
id: normalizedProps.helperId,
|
|
154
155
|
className: helperTextClasses
|
|
155
156
|
}, helperText) : null;
|
|
156
|
-
const input = /*#__PURE__*/React.createElement("input",
|
|
157
|
+
const input = /*#__PURE__*/React.createElement("input", getTextInputProps({
|
|
157
158
|
sharedTextInputProps,
|
|
158
159
|
invalid: normalizedProps.invalid,
|
|
159
160
|
invalidId: normalizedProps.invalidId,
|
|
@@ -188,6 +189,7 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput({
|
|
|
188
189
|
}
|
|
189
190
|
}
|
|
190
191
|
}, [ariaAnnouncement, prevAnnouncement]);
|
|
192
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
191
193
|
const Icon = normalizedProps.icon;
|
|
192
194
|
|
|
193
195
|
// AILabel is always size `mini`
|
|
@@ -1,9 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
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
|
+
interface TextInputPropsConfig {
|
|
8
|
+
sharedTextInputProps: Record<string, unknown>;
|
|
9
|
+
invalid: boolean;
|
|
10
|
+
invalidId: string;
|
|
5
11
|
warn?: boolean;
|
|
6
12
|
warnId?: string;
|
|
7
13
|
hasHelper?: boolean;
|
|
8
14
|
helperId?: string;
|
|
9
|
-
}
|
|
15
|
+
}
|
|
16
|
+
export declare const getTextInputProps: ({ sharedTextInputProps, invalid, invalidId, warn, warnId, hasHelper, helperId, }: TextInputPropsConfig) => {
|
|
17
|
+
'aria-describedby'?: string | undefined;
|
|
18
|
+
'data-invalid'?: boolean | undefined;
|
|
19
|
+
'aria-invalid'?: boolean | undefined;
|
|
20
|
+
};
|
|
21
|
+
export {};
|
|
@@ -16,12 +16,7 @@ const warnProps = warnId => ({
|
|
|
16
16
|
const helperProps = helperId => ({
|
|
17
17
|
'aria-describedby': helperId
|
|
18
18
|
});
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* @param {{sharedTextInputProps: object, invalid?: boolean, invalidId?: string, warn?: boolean, warnId?: string, hasHelper?: boolean, helperId?: string}} config
|
|
22
|
-
* @returns {object}
|
|
23
|
-
*/
|
|
24
|
-
const textInputProps = ({
|
|
19
|
+
const getTextInputProps = ({
|
|
25
20
|
sharedTextInputProps,
|
|
26
21
|
invalid,
|
|
27
22
|
invalidId,
|
|
@@ -36,4 +31,4 @@ const textInputProps = ({
|
|
|
36
31
|
...(hasHelper ? helperProps(helperId) : {})
|
|
37
32
|
});
|
|
38
33
|
|
|
39
|
-
export {
|
|
34
|
+
export { getTextInputProps };
|
|
@@ -16,16 +16,20 @@ import { useMatchMedia } from '../../internal/useMatchMedia.js';
|
|
|
16
16
|
const ThemeContext = /*#__PURE__*/React.createContext({
|
|
17
17
|
theme: 'white'
|
|
18
18
|
});
|
|
19
|
-
|
|
19
|
+
|
|
20
|
+
// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
21
|
+
const GlobalTheme = /*#__PURE__*/React.forwardRef(({
|
|
20
22
|
children,
|
|
21
23
|
theme
|
|
22
|
-
}, ref) {
|
|
24
|
+
}, ref) => {
|
|
23
25
|
const value = useMemo(() => {
|
|
24
26
|
return {
|
|
25
27
|
theme
|
|
26
28
|
};
|
|
27
29
|
}, [theme]);
|
|
28
|
-
const childrenWithProps = /*#__PURE__*/React.cloneElement(
|
|
30
|
+
const childrenWithProps = /*#__PURE__*/React.cloneElement(
|
|
31
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
32
|
+
children, {
|
|
29
33
|
ref: ref
|
|
30
34
|
});
|
|
31
35
|
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
|
@@ -67,6 +71,7 @@ function Theme({
|
|
|
67
71
|
isDark
|
|
68
72
|
};
|
|
69
73
|
}, [theme]);
|
|
74
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20071
|
|
70
75
|
const BaseComponentAsAny = BaseComponent;
|
|
71
76
|
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
|
72
77
|
value: value
|