@carbon/react 1.83.0-rc.0 → 1.83.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 +1008 -938
- package/es/components/AILabel/index.js +13 -13
- package/es/components/AISkeleton/AISkeletonIcon.js +2 -2
- package/es/components/AISkeleton/AISkeletonPlaceholder.js +2 -2
- package/es/components/AISkeleton/AISkeletonText.js +2 -2
- package/es/components/Accordion/Accordion.Skeleton.js +15 -15
- package/es/components/Accordion/Accordion.js +3 -3
- package/es/components/Accordion/AccordionItem.js +9 -9
- package/es/components/Accordion/AccordionProvider.js +2 -2
- package/es/components/AspectRatio/AspectRatio.js +2 -2
- package/es/components/BadgeIndicator/index.js +3 -3
- package/es/components/Breadcrumb/Breadcrumb.Skeleton.js +5 -5
- package/es/components/Breadcrumb/Breadcrumb.js +3 -3
- package/es/components/Breadcrumb/BreadcrumbItem.js +9 -9
- package/es/components/Button/Button.Skeleton.js +3 -3
- package/es/components/Button/Button.js +5 -5
- package/es/components/Button/ButtonBase.js +5 -5
- package/es/components/ButtonSet/ButtonSet.js +2 -2
- package/es/components/ChatButton/ChatButton.Skeleton.js +2 -2
- package/es/components/ChatButton/ChatButton.js +3 -3
- package/es/components/Checkbox/Checkbox.Skeleton.js +4 -4
- package/es/components/Checkbox/Checkbox.js +15 -15
- package/es/components/CheckboxGroup/CheckboxGroup.js +12 -12
- package/es/components/ClassPrefix/index.js +2 -2
- package/es/components/CodeSnippet/CodeSnippet.Skeleton.js +7 -7
- package/es/components/CodeSnippet/CodeSnippet.js +16 -16
- package/es/components/ComboBox/ComboBox.js +18 -18
- package/es/components/ComboButton/index.js +7 -7
- package/es/components/ComposedModal/ComposedModal.js +20 -20
- package/es/components/ComposedModal/ModalFooter.js +8 -8
- package/es/components/ComposedModal/ModalHeader.js +8 -8
- package/es/components/ContainedList/ContainedList.js +7 -7
- package/es/components/ContainedList/ContainedListItem/ContainedListItem.js +7 -7
- package/es/components/ContentSwitcher/ContentSwitcher.d.ts +8 -0
- package/es/components/ContentSwitcher/ContentSwitcher.js +13 -7
- package/es/components/Copy/Copy.js +2 -2
- package/es/components/CopyButton/CopyButton.js +4 -4
- package/es/components/DangerButton/DangerButton.js +2 -2
- package/es/components/DataTable/DataTable.d.ts +81 -283
- package/es/components/DataTable/DataTable.js +83 -123
- package/es/components/DataTable/Table.d.ts +2 -2
- package/es/components/DataTable/Table.js +4 -4
- package/es/components/DataTable/TableActionList.d.ts +1 -1
- package/es/components/DataTable/TableBatchAction.js +2 -2
- package/es/components/DataTable/TableBatchActions.js +9 -9
- package/es/components/DataTable/TableBody.d.ts +3 -3
- package/es/components/DataTable/TableBody.js +2 -2
- package/es/components/DataTable/TableCell.d.ts +3 -4
- package/es/components/DataTable/TableCell.js +2 -2
- package/es/components/DataTable/TableContainer.d.ts +2 -3
- package/es/components/DataTable/TableContainer.js +6 -6
- package/es/components/DataTable/TableDecoratorRow.js +4 -4
- package/es/components/DataTable/TableExpandHeader.d.ts +2 -3
- package/es/components/DataTable/TableExpandHeader.js +4 -4
- package/es/components/DataTable/TableExpandRow.js +8 -8
- package/es/components/DataTable/TableExpandedRow.d.ts +3 -3
- package/es/components/DataTable/TableExpandedRow.js +4 -4
- package/es/components/DataTable/TableHead.d.ts +1 -1
- package/es/components/DataTable/TableHeader.d.ts +4 -4
- package/es/components/DataTable/TableHeader.js +15 -15
- package/es/components/DataTable/TableRow.d.ts +3 -4
- package/es/components/DataTable/TableRow.js +4 -4
- package/es/components/DataTable/TableSelectAll.js +3 -3
- package/es/components/DataTable/TableSelectRow.js +4 -4
- package/es/components/DataTable/TableSlugRow.js +3 -3
- package/es/components/DataTable/TableToolbar.js +2 -2
- package/es/components/DataTable/TableToolbarAction.js +2 -2
- package/es/components/DataTable/TableToolbarContent.d.ts +1 -1
- package/es/components/DataTable/TableToolbarMenu.js +2 -2
- package/es/components/DataTable/TableToolbarSearch.js +2 -2
- package/es/components/DataTable/index.d.ts +1 -1
- package/es/components/DataTableSkeleton/DataTableSkeleton.js +15 -15
- package/es/components/DatePicker/DatePicker.Skeleton.js +8 -8
- package/es/components/DatePicker/DatePicker.js +17 -17
- package/es/components/DatePickerInput/DatePickerInput.d.ts +3 -4
- package/es/components/DatePickerInput/DatePickerInput.js +19 -19
- package/es/components/Dialog/index.d.ts +5 -6
- package/es/components/Dialog/index.js +10 -10
- package/es/components/Dropdown/Dropdown.Skeleton.d.ts +2 -3
- package/es/components/Dropdown/Dropdown.Skeleton.js +4 -4
- package/es/components/Dropdown/Dropdown.d.ts +3 -3
- package/es/components/Dropdown/Dropdown.js +18 -18
- package/es/components/ErrorBoundary/ErrorBoundary.js +2 -2
- package/es/components/ExpandableSearch/ExpandableSearch.js +3 -3
- package/es/components/FeatureFlags/index.js +2 -2
- package/es/components/FileUploader/FileUploader.Skeleton.d.ts +3 -3
- package/es/components/FileUploader/FileUploader.Skeleton.js +5 -5
- package/es/components/FileUploader/FileUploader.d.ts +2 -3
- package/es/components/FileUploader/FileUploader.js +12 -12
- package/es/components/FileUploader/FileUploaderButton.d.ts +2 -3
- package/es/components/FileUploader/FileUploaderButton.js +4 -4
- package/es/components/FileUploader/FileUploaderDropContainer.d.ts +2 -3
- package/es/components/FileUploader/FileUploaderDropContainer.js +5 -5
- package/es/components/FileUploader/FileUploaderItem.d.ts +2 -3
- package/es/components/FileUploader/FileUploaderItem.js +13 -13
- package/es/components/FileUploader/Filename.d.ts +3 -4
- package/es/components/FileUploader/Filename.js +7 -7
- package/es/components/FluidComboBox/FluidComboBox.Skeleton.js +5 -5
- package/es/components/FluidComboBox/FluidComboBox.js +4 -4
- package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js +11 -11
- package/es/components/FluidDatePicker/FluidDatePicker.js +4 -4
- package/es/components/FluidDatePickerInput/FluidDatePickerInput.js +3 -3
- package/es/components/FluidDropdown/FluidDropdown.Skeleton.js +5 -5
- package/es/components/FluidDropdown/FluidDropdown.js +4 -4
- package/es/components/FluidForm/FluidForm.d.ts +3 -4
- package/es/components/FluidForm/FluidForm.js +3 -3
- package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js +5 -5
- package/es/components/FluidMultiSelect/FluidMultiSelect.js +5 -5
- package/es/components/FluidNumberInput/FluidNumberInput.Skeleton.js +5 -5
- package/es/components/FluidNumberInput/FluidNumberInput.js +4 -4
- package/es/components/FluidSearch/FluidSearch.Skeleton.js +5 -5
- package/es/components/FluidSearch/FluidSearch.js +4 -4
- package/es/components/FluidSelect/FluidSelect.Skeleton.js +5 -5
- package/es/components/FluidSelect/FluidSelect.js +4 -4
- package/es/components/FluidTextArea/FluidTextArea.Skeleton.js +5 -5
- package/es/components/FluidTextArea/FluidTextArea.js +3 -3
- package/es/components/FluidTextInput/FluidTextInput.Skeleton.js +5 -5
- package/es/components/FluidTextInput/FluidTextInput.js +5 -5
- package/es/components/FluidTimePicker/FluidTimePicker.Skeleton.js +3 -3
- package/es/components/FluidTimePicker/FluidTimePicker.js +13 -13
- package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js +3 -3
- package/es/components/Form/Form.js +2 -2
- package/es/components/FormGroup/FormGroup.d.ts +3 -4
- package/es/components/FormGroup/FormGroup.js +4 -4
- package/es/components/FormItem/FormItem.js +2 -2
- package/es/components/FormLabel/FormLabel.js +2 -2
- package/es/components/Grid/CSSGrid.js +8 -8
- package/es/components/Grid/Column.js +5 -5
- package/es/components/Grid/ColumnHang.js +2 -2
- package/es/components/Grid/FlexGrid.js +4 -4
- package/es/components/Grid/Grid.js +3 -3
- package/es/components/Grid/GridContext.d.ts +2 -2
- package/es/components/Grid/GridContext.js +1 -1
- package/es/components/Grid/Row.js +2 -2
- package/es/components/Heading/index.js +9 -9
- package/es/components/Icon/Icon.Skeleton.js +2 -2
- package/es/components/IconButton/index.js +11 -6
- package/es/components/IconIndicator/index.js +4 -4
- package/es/components/IdPrefix/index.js +2 -2
- package/es/components/InlineCheckbox/InlineCheckbox.js +6 -6
- package/es/components/InlineLoading/InlineLoading.js +10 -10
- package/es/components/Layer/LayerContext.js +2 -2
- package/es/components/Layer/index.d.ts +4 -0
- package/es/components/Layer/index.js +15 -8
- package/es/components/Layout/index.js +5 -5
- package/es/components/LayoutDirection/LayoutDirection.js +4 -4
- package/es/components/LayoutDirection/LayoutDirectionContext.js +2 -2
- package/es/components/Link/Link.js +6 -6
- package/es/components/ListBox/ListBox.d.ts +2 -3
- package/es/components/ListBox/ListBox.js +5 -5
- package/es/components/ListBox/ListBoxField.d.ts +3 -4
- package/es/components/ListBox/ListBoxField.js +2 -2
- package/es/components/ListBox/ListBoxMenu.d.ts +2 -3
- package/es/components/ListBox/ListBoxMenu.js +2 -2
- package/es/components/ListBox/ListBoxMenuIcon.js +4 -4
- package/es/components/ListBox/ListBoxMenuItem.d.ts +2 -3
- package/es/components/ListBox/ListBoxMenuItem.js +3 -3
- package/es/components/ListBox/ListBoxSelection.js +6 -6
- package/es/components/ListBox/next/ListBoxSelection.js +7 -7
- package/es/components/ListBox/next/ListBoxTrigger.js +4 -4
- package/es/components/ListItem/ListItem.js +2 -2
- package/es/components/Loading/Loading.d.ts +3 -3
- package/es/components/Loading/Loading.js +6 -6
- package/es/components/Menu/Menu.js +3 -3
- package/es/components/Menu/MenuItem.js +16 -16
- package/es/components/MenuButton/index.js +4 -4
- package/es/components/Modal/Modal.d.ts +2 -3
- package/es/components/Modal/Modal.js +35 -35
- package/es/components/ModalWrapper/ModalWrapper.js +7 -7
- package/es/components/MultiSelect/FilterableMultiSelect.js +22 -26
- package/es/components/MultiSelect/MultiSelect.js +23 -23
- package/es/components/Notification/Notification.js +41 -41
- package/es/components/NumberInput/NumberInput.Skeleton.js +4 -4
- package/es/components/NumberInput/NumberInput.js +22 -22
- package/es/components/OrderedList/OrderedList.js +2 -2
- package/es/components/OverflowMenu/OverflowMenu.js +7 -7
- package/es/components/OverflowMenu/index.js +3 -3
- package/es/components/OverflowMenu/next/index.js +6 -6
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +4 -4
- package/es/components/OverflowMenuV2/index.js +3 -3
- package/es/components/PageHeader/PageHeader.js +29 -29
- package/es/components/Pagination/Pagination.Skeleton.js +8 -8
- package/es/components/Pagination/Pagination.js +17 -17
- package/es/components/Pagination/experimental/PageSelector.js +3 -3
- package/es/components/Pagination/experimental/Pagination.js +14 -14
- package/es/components/PaginationNav/PaginationNav.js +31 -31
- package/es/components/Popover/index.js +15 -15
- package/es/components/PrimaryButton/PrimaryButton.js +2 -2
- package/es/components/ProgressBar/ProgressBar.js +13 -13
- package/es/components/ProgressIndicator/ProgressIndicator.Skeleton.js +7 -7
- package/es/components/ProgressIndicator/ProgressIndicator.js +20 -20
- package/es/components/RadioButton/RadioButton.Skeleton.js +4 -4
- package/es/components/RadioButton/RadioButton.js +10 -10
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +16 -16
- package/es/components/RadioTile/RadioTile.js +12 -12
- package/es/components/Search/Search.Skeleton.js +4 -4
- package/es/components/Search/Search.js +11 -11
- package/es/components/SecondaryButton/SecondaryButton.js +2 -2
- package/es/components/Select/Select.Skeleton.js +5 -5
- package/es/components/Select/Select.js +19 -19
- package/es/components/SelectItem/SelectItem.js +2 -2
- package/es/components/SelectItemGroup/SelectItemGroup.js +2 -2
- package/es/components/ShapeIndicator/index.js +7 -7
- package/es/components/SkeletonIcon/SkeletonIcon.d.ts +0 -4
- package/es/components/SkeletonIcon/SkeletonIcon.js +3 -7
- package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js +2 -2
- package/es/components/SkeletonText/SkeletonText.js +4 -4
- package/es/components/Slider/Slider.Skeleton.js +17 -17
- package/es/components/Slider/Slider.js +38 -38
- package/es/components/Slider/SliderHandles.js +19 -19
- package/es/components/Stack/HStack.js +2 -2
- package/es/components/Stack/Stack.js +2 -2
- package/es/components/Stack/VStack.js +2 -2
- package/es/components/StructuredList/StructuredList.Skeleton.js +12 -12
- package/es/components/StructuredList/StructuredList.js +24 -24
- package/es/components/Switch/IconSwitch.js +3 -3
- package/es/components/Switch/Switch.js +4 -4
- package/es/components/TabContent/TabContent.js +2 -2
- package/es/components/Tabs/Tabs.Skeleton.js +7 -7
- package/es/components/Tabs/Tabs.js +60 -60
- package/es/components/Tag/DismissibleTag.js +10 -10
- package/es/components/Tag/OperationalTag.js +6 -6
- package/es/components/Tag/SelectableTag.js +6 -6
- package/es/components/Tag/Tag.Skeleton.js +2 -2
- package/es/components/Tag/Tag.js +15 -15
- package/es/components/Text/Text.js +4 -4
- package/es/components/Text/TextDirection.js +2 -2
- package/es/components/Text/createTextComponent.js +2 -2
- package/es/components/TextArea/TextArea.Skeleton.js +4 -4
- package/es/components/TextArea/TextArea.js +19 -19
- package/es/components/TextInput/ControlledPasswordInput.d.ts +2 -3
- package/es/components/TextInput/ControlledPasswordInput.js +13 -13
- package/es/components/TextInput/PasswordInput.js +15 -15
- package/es/components/TextInput/TextInput.Skeleton.js +4 -4
- package/es/components/TextInput/TextInput.js +17 -17
- package/es/components/Theme/index.js +10 -10
- package/es/components/Tile/Tile.js +36 -36
- package/es/components/TileGroup/TileGroup.d.ts +3 -4
- package/es/components/TileGroup/TileGroup.js +8 -8
- package/es/components/TimePicker/TimePicker.d.ts +2 -3
- package/es/components/TimePicker/TimePicker.js +14 -14
- package/es/components/TimePickerSelect/TimePickerSelect.js +4 -4
- package/es/components/Toggle/Toggle.Skeleton.js +4 -4
- package/es/components/Toggle/Toggle.js +10 -10
- package/es/components/ToggleSmall/ToggleSmall.Skeleton.js +8 -8
- package/es/components/Toggletip/index.js +12 -12
- package/es/components/Tooltip/DefinitionTooltip.js +4 -4
- package/es/components/Tooltip/Tooltip.d.ts +3 -0
- package/es/components/Tooltip/Tooltip.js +25 -13
- package/es/components/TreeView/TreeNode.js +45 -36
- package/es/components/TreeView/TreeView.js +30 -21
- package/es/components/UIShell/Content.js +2 -2
- package/es/components/UIShell/Header.js +2 -2
- package/es/components/UIShell/HeaderContainer.js +2 -2
- package/es/components/UIShell/HeaderGlobalAction.js +3 -3
- package/es/components/UIShell/HeaderGlobalBar.d.ts +1 -1
- package/es/components/UIShell/HeaderMenu.js +14 -14
- package/es/components/UIShell/HeaderMenuButton.js +4 -4
- package/es/components/UIShell/HeaderMenuItem.js +11 -9
- package/es/components/UIShell/HeaderName.js +3 -3
- package/es/components/UIShell/HeaderNavigation.js +3 -3
- package/es/components/UIShell/HeaderPanel.js +3 -3
- package/es/components/UIShell/HeaderSideNavItems.js +2 -2
- package/es/components/UIShell/Link.js +3 -3
- package/es/components/UIShell/SideNav.js +7 -7
- package/es/components/UIShell/SideNavDetails.js +3 -3
- package/es/components/UIShell/SideNavDivider.js +3 -3
- package/es/components/UIShell/SideNavFooter.js +7 -7
- package/es/components/UIShell/SideNavHeader.js +3 -3
- package/es/components/UIShell/SideNavIcon.js +2 -2
- package/es/components/UIShell/SideNavItem.js +2 -2
- package/es/components/UIShell/SideNavItems.js +5 -5
- package/es/components/UIShell/SideNavLink.js +5 -5
- package/es/components/UIShell/SideNavLinkText.js +2 -2
- package/es/components/UIShell/SideNavMenu.js +10 -10
- package/es/components/UIShell/SideNavMenuItem.js +5 -5
- package/es/components/UIShell/SideNavSwitcher.js +8 -8
- package/es/components/UIShell/SkipToContent.js +2 -2
- package/es/components/UIShell/Switcher.js +8 -8
- package/es/components/UIShell/SwitcherDivider.js +2 -2
- package/es/components/UIShell/SwitcherItem.js +3 -3
- package/es/components/UnorderedList/UnorderedList.js +2 -2
- package/es/index.js +23 -24
- package/es/internal/FloatingMenu.js +4 -4
- package/es/internal/__mocks__/mockHTMLElement.d.ts +9 -0
- package/es/internal/createClassWrapper.js +2 -2
- package/es/internal/useId.js +2 -2
- package/es/internal/useIdPrefix.js +3 -3
- package/es/internal/useNormalizedInputProps.js +3 -3
- package/es/internal/usePrefix.js +3 -3
- package/es/internal/useResizeObserver.d.ts +14 -0
- package/es/internal/useResizeObserver.js +74 -0
- package/es/internal/wrapFocus.js +3 -6
- package/es/tools/wrapComponent.d.ts +3 -4
- package/es/tools/wrapComponent.js +2 -2
- package/es/types/common.d.ts +0 -2
- package/lib/components/CodeSnippet/CodeSnippet.js +2 -3
- package/lib/components/ContentSwitcher/ContentSwitcher.d.ts +8 -0
- package/lib/components/ContentSwitcher/ContentSwitcher.js +7 -1
- package/lib/components/DataTable/DataTable.d.ts +81 -283
- package/lib/components/DataTable/DataTable.js +82 -123
- package/lib/components/DataTable/Table.d.ts +2 -2
- package/lib/components/DataTable/TableActionList.d.ts +1 -1
- package/lib/components/DataTable/TableBody.d.ts +3 -3
- package/lib/components/DataTable/TableCell.d.ts +3 -4
- package/lib/components/DataTable/TableContainer.d.ts +2 -3
- package/lib/components/DataTable/TableExpandHeader.d.ts +2 -3
- package/lib/components/DataTable/TableExpandedRow.d.ts +3 -3
- package/lib/components/DataTable/TableHead.d.ts +1 -1
- package/lib/components/DataTable/TableHeader.d.ts +4 -4
- package/lib/components/DataTable/TableRow.d.ts +3 -4
- package/lib/components/DataTable/TableToolbarContent.d.ts +1 -1
- package/lib/components/DataTable/index.d.ts +1 -1
- package/lib/components/DatePickerInput/DatePickerInput.d.ts +3 -4
- package/lib/components/Dialog/index.d.ts +5 -6
- package/lib/components/Dropdown/Dropdown.Skeleton.d.ts +2 -3
- package/lib/components/Dropdown/Dropdown.d.ts +3 -3
- package/lib/components/FileUploader/FileUploader.Skeleton.d.ts +3 -3
- package/lib/components/FileUploader/FileUploader.d.ts +2 -3
- package/lib/components/FileUploader/FileUploaderButton.d.ts +2 -3
- package/lib/components/FileUploader/FileUploaderDropContainer.d.ts +2 -3
- package/lib/components/FileUploader/FileUploaderItem.d.ts +2 -3
- package/lib/components/FileUploader/Filename.d.ts +3 -4
- package/lib/components/FluidForm/FluidForm.d.ts +3 -4
- package/lib/components/FormGroup/FormGroup.d.ts +3 -4
- package/lib/components/Grid/GridContext.d.ts +2 -2
- package/lib/components/Grid/GridContext.js +5 -23
- package/lib/components/IconButton/index.js +6 -1
- package/lib/components/Layer/index.d.ts +4 -0
- package/lib/components/Layer/index.js +9 -2
- package/lib/components/Link/Link.js +1 -1
- package/lib/components/ListBox/ListBox.d.ts +2 -3
- package/lib/components/ListBox/ListBoxField.d.ts +3 -4
- package/lib/components/ListBox/ListBoxMenu.d.ts +2 -3
- package/lib/components/ListBox/ListBoxMenuItem.d.ts +2 -3
- package/lib/components/Loading/Loading.d.ts +3 -3
- package/lib/components/Modal/Modal.d.ts +2 -3
- package/lib/components/MultiSelect/FilterableMultiSelect.js +1 -5
- package/lib/components/SkeletonIcon/SkeletonIcon.d.ts +0 -4
- package/lib/components/SkeletonIcon/SkeletonIcon.js +1 -5
- package/lib/components/TextInput/ControlledPasswordInput.d.ts +2 -3
- package/lib/components/TileGroup/TileGroup.d.ts +3 -4
- package/lib/components/TimePicker/TimePicker.d.ts +2 -3
- package/lib/components/Tooltip/Tooltip.d.ts +3 -0
- package/lib/components/Tooltip/Tooltip.js +18 -6
- package/lib/components/TreeView/TreeNode.js +20 -11
- package/lib/components/TreeView/TreeView.js +27 -18
- package/lib/components/UIShell/HeaderGlobalBar.d.ts +1 -1
- package/lib/components/UIShell/HeaderMenuItem.js +7 -5
- package/lib/index.js +46 -47
- package/lib/internal/__mocks__/mockHTMLElement.d.ts +9 -0
- package/lib/internal/useResizeObserver.d.ts +14 -0
- package/lib/internal/useResizeObserver.js +78 -0
- package/lib/internal/wrapFocus.js +3 -6
- package/lib/tools/wrapComponent.d.ts +3 -4
- package/lib/types/common.d.ts +0 -2
- package/package.json +5 -6
- package/scss/components/content-switcher/_tokens.scss +9 -0
- package/telemetry.yml +4 -1
- package/es/components/DataTable/index.js +0 -76
- package/lib/components/DataTable/index.js +0 -82
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React, { useContext, Children } from 'react';
|
|
11
11
|
import './index.js';
|
|
12
12
|
import { TextDirectionContext } from './TextDirectionContext.js';
|
|
13
13
|
|
|
14
|
-
const TextBase = /*#__PURE__*/
|
|
14
|
+
const TextBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
15
15
|
let {
|
|
16
16
|
as,
|
|
17
17
|
children,
|
|
@@ -48,9 +48,9 @@ const TextBase = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
|
|
|
48
48
|
textProps.dir = dir;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
return /*#__PURE__*/
|
|
51
|
+
return /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
|
|
52
52
|
value: value
|
|
53
|
-
}, /*#__PURE__*/
|
|
53
|
+
}, /*#__PURE__*/React.createElement(BaseComponent, _extends({
|
|
54
54
|
ref: ref
|
|
55
55
|
}, rest, textProps), children));
|
|
56
56
|
});
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import
|
|
9
|
+
import React, { useRef, useMemo, useEffect } from 'react';
|
|
10
10
|
import './index.js';
|
|
11
11
|
import { TextDirectionContext } from './TextDirectionContext.js';
|
|
12
12
|
|
|
@@ -28,7 +28,7 @@ const TextDirection = _ref => {
|
|
|
28
28
|
// TODO: Is this `useEffect` supposed to have a dependency on
|
|
29
29
|
// `getTextDirection`?
|
|
30
30
|
});
|
|
31
|
-
return /*#__PURE__*/
|
|
31
|
+
return /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
|
|
32
32
|
value: value
|
|
33
33
|
}, children);
|
|
34
34
|
};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import
|
|
9
|
+
import React from 'react';
|
|
10
10
|
import './index.js';
|
|
11
11
|
import { Text } from './Text.js';
|
|
12
12
|
|
|
@@ -18,7 +18,7 @@ import { Text } from './Text.js';
|
|
|
18
18
|
*/
|
|
19
19
|
const createTextComponent = (element, displayName) => {
|
|
20
20
|
const TextWrapper = props => {
|
|
21
|
-
return /*#__PURE__*/
|
|
21
|
+
return /*#__PURE__*/React.createElement(Text, _extends({
|
|
22
22
|
as: element
|
|
23
23
|
}, props));
|
|
24
24
|
};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
|
|
@@ -18,11 +18,11 @@ const TextAreaSkeleton = props => {
|
|
|
18
18
|
...rest
|
|
19
19
|
} = props;
|
|
20
20
|
const prefix = usePrefix();
|
|
21
|
-
return /*#__PURE__*/
|
|
21
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
22
22
|
className: cx(`${prefix}--form-item`, className)
|
|
23
|
-
}, rest), !hideLabel && /*#__PURE__*/
|
|
23
|
+
}, rest), !hideLabel && /*#__PURE__*/React.createElement("span", {
|
|
24
24
|
className: `${prefix}--label ${prefix}--skeleton`
|
|
25
|
-
}), /*#__PURE__*/
|
|
25
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
26
26
|
className: `${prefix}--skeleton ${prefix}--text-area`
|
|
27
27
|
}));
|
|
28
28
|
};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React, { useContext, useRef, useState, useEffect, forwardRef } from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import deprecate from '../../prop-types/deprecate.js';
|
|
13
13
|
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
|
|
@@ -175,35 +175,35 @@ const TextArea = frFn((props, forwardRef) => {
|
|
|
175
175
|
const helperTextClasses = cx(`${prefix}--form__helper-text`, {
|
|
176
176
|
[`${prefix}--form__helper-text--disabled`]: disabled
|
|
177
177
|
});
|
|
178
|
-
const label = labelText ? /*#__PURE__*/
|
|
178
|
+
const label = labelText ? /*#__PURE__*/React.createElement(Text, {
|
|
179
179
|
as: "label",
|
|
180
180
|
htmlFor: id,
|
|
181
181
|
className: labelClasses
|
|
182
182
|
}, labelText) : null;
|
|
183
|
-
const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/
|
|
183
|
+
const counter = enableCounter && maxCount && (counterMode === 'character' || counterMode === 'word') ? /*#__PURE__*/React.createElement(Text, {
|
|
184
184
|
as: "div",
|
|
185
185
|
className: counterClasses
|
|
186
186
|
}, `${textCount}/${maxCount}`) : null;
|
|
187
187
|
const helperId = !helperText ? undefined : `text-area-helper-text-${textAreaInstanceId}`;
|
|
188
|
-
const helper = helperText ? /*#__PURE__*/
|
|
188
|
+
const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
|
|
189
189
|
as: "div",
|
|
190
190
|
id: helperId,
|
|
191
191
|
className: helperTextClasses
|
|
192
192
|
}, helperText) : null;
|
|
193
193
|
const errorId = id + '-error-msg';
|
|
194
|
-
const error = invalid ? /*#__PURE__*/
|
|
194
|
+
const error = invalid ? /*#__PURE__*/React.createElement(Text, {
|
|
195
195
|
as: "div",
|
|
196
196
|
role: "alert",
|
|
197
197
|
className: `${prefix}--form-requirement`,
|
|
198
198
|
id: errorId
|
|
199
|
-
}, invalidText, isFluid && /*#__PURE__*/
|
|
199
|
+
}, invalidText, isFluid && /*#__PURE__*/React.createElement(WarningFilled, {
|
|
200
200
|
className: `${prefix}--text-area__invalid-icon`
|
|
201
201
|
})) : null;
|
|
202
|
-
const warning = warn ? /*#__PURE__*/
|
|
202
|
+
const warning = warn ? /*#__PURE__*/React.createElement(Text, {
|
|
203
203
|
as: "div",
|
|
204
204
|
role: "alert",
|
|
205
205
|
className: `${prefix}--form-requirement`
|
|
206
|
-
}, warnText, isFluid && /*#__PURE__*/
|
|
206
|
+
}, warnText, isFluid && /*#__PURE__*/React.createElement(WarningAltFilled, {
|
|
207
207
|
className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
|
|
208
208
|
})) : null;
|
|
209
209
|
let ariaDescribedBy;
|
|
@@ -245,7 +245,7 @@ const TextArea = frFn((props, forwardRef) => {
|
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
247
|
}, [ariaAnnouncement, prevAnnouncement, counterMode]);
|
|
248
|
-
const input = /*#__PURE__*/
|
|
248
|
+
const input = /*#__PURE__*/React.createElement("textarea", _extends({}, other, textareaProps, {
|
|
249
249
|
placeholder: placeholder,
|
|
250
250
|
"aria-readonly": other.readOnly ? true : false,
|
|
251
251
|
className: textareaClasses,
|
|
@@ -258,32 +258,32 @@ const TextArea = frFn((props, forwardRef) => {
|
|
|
258
258
|
}));
|
|
259
259
|
|
|
260
260
|
// AILabel is always size `mini`
|
|
261
|
-
let normalizedDecorator = /*#__PURE__*/
|
|
261
|
+
let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
|
|
262
262
|
if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
|
|
263
|
-
normalizedDecorator = /*#__PURE__*/
|
|
263
|
+
normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
|
|
264
264
|
size: 'mini'
|
|
265
265
|
});
|
|
266
266
|
}
|
|
267
|
-
return /*#__PURE__*/
|
|
267
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
268
268
|
className: formItemClasses
|
|
269
|
-
}, /*#__PURE__*/
|
|
269
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
270
270
|
className: `${prefix}--text-area__label-wrapper`
|
|
271
|
-
}, label, counter), /*#__PURE__*/
|
|
271
|
+
}, label, counter), /*#__PURE__*/React.createElement("div", {
|
|
272
272
|
className: textAreaWrapperClasses,
|
|
273
273
|
"data-invalid": invalid || null
|
|
274
|
-
}, invalid && !isFluid && /*#__PURE__*/
|
|
274
|
+
}, invalid && !isFluid && /*#__PURE__*/React.createElement(WarningFilled, {
|
|
275
275
|
className: `${prefix}--text-area__invalid-icon`
|
|
276
|
-
}), warn && !invalid && !isFluid && /*#__PURE__*/
|
|
276
|
+
}), warn && !invalid && !isFluid && /*#__PURE__*/React.createElement(WarningAltFilled, {
|
|
277
277
|
className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
|
|
278
|
-
}), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/
|
|
278
|
+
}), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
|
|
279
279
|
className: `${prefix}--text-area__inner-wrapper--decorator`
|
|
280
|
-
}, normalizedDecorator) : '', /*#__PURE__*/
|
|
280
|
+
}, normalizedDecorator) : '', /*#__PURE__*/React.createElement("span", {
|
|
281
281
|
className: `${prefix}--text-area__counter-alert`,
|
|
282
282
|
role: "alert",
|
|
283
283
|
"aria-live": "assertive",
|
|
284
284
|
"aria-atomic": "true",
|
|
285
285
|
ref: announcerRef
|
|
286
|
-
}, ariaAnnouncement), isFluid && /*#__PURE__*/
|
|
286
|
+
}, ariaAnnouncement), isFluid && /*#__PURE__*/React.createElement("hr", {
|
|
287
287
|
className: `${prefix}--text-area__divider`
|
|
288
288
|
}), isFluid && invalid ? error : null, isFluid && warn && !invalid ? warning : null), !invalid && !warn && !isFluid ? helper : null, invalid && !isFluid ? error : null, warn && !invalid && !isFluid ? warning : null);
|
|
289
289
|
});
|
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
export interface ControlledPasswordInputProps extends ReactAttr<HTMLInputElement> {
|
|
7
|
+
import React, { type HTMLAttributes } from 'react';
|
|
8
|
+
export interface ControlledPasswordInputProps extends HTMLAttributes<HTMLInputElement> {
|
|
10
9
|
/**
|
|
11
10
|
* Provide a custom className that is applied directly to the underlying
|
|
12
11
|
* `<input>` node
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import
|
|
9
|
+
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';
|
|
@@ -16,7 +16,7 @@ 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__*/
|
|
19
|
+
const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(function ControlledPasswordInput(_ref, ref) {
|
|
20
20
|
let {
|
|
21
21
|
labelText,
|
|
22
22
|
className,
|
|
@@ -74,18 +74,18 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
|
|
|
74
74
|
const helperTextClasses = cx(`${prefix}--form__helper-text`, {
|
|
75
75
|
[`${prefix}--form__helper-text--disabled`]: disabled
|
|
76
76
|
});
|
|
77
|
-
const label = labelText ? /*#__PURE__*/
|
|
77
|
+
const label = labelText ? /*#__PURE__*/React.createElement("label", {
|
|
78
78
|
htmlFor: id,
|
|
79
79
|
className: labelClasses
|
|
80
80
|
}, labelText) : null;
|
|
81
|
-
const error = invalid ? /*#__PURE__*/
|
|
81
|
+
const error = invalid ? /*#__PURE__*/React.createElement("div", {
|
|
82
82
|
className: `${prefix}--form-requirement`,
|
|
83
83
|
id: errorId
|
|
84
84
|
}, invalidText) : null;
|
|
85
85
|
const passwordIsVisible = type === 'text';
|
|
86
|
-
const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/
|
|
86
|
+
const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React.createElement(ViewOff, {
|
|
87
87
|
className: `${prefix}--icon-visibility-off`
|
|
88
|
-
}) : /*#__PURE__*/
|
|
88
|
+
}) : /*#__PURE__*/React.createElement(View, {
|
|
89
89
|
className: `${prefix}--icon-visibility-on`
|
|
90
90
|
});
|
|
91
91
|
const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
|
|
@@ -93,7 +93,7 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
|
|
|
93
93
|
[`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
|
|
94
94
|
});
|
|
95
95
|
const helperId = !helperText ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
|
|
96
|
-
const input = /*#__PURE__*/
|
|
96
|
+
const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, textInputProps({
|
|
97
97
|
invalid,
|
|
98
98
|
sharedTextInputProps,
|
|
99
99
|
invalidId: errorId,
|
|
@@ -101,23 +101,23 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
|
|
|
101
101
|
helperId
|
|
102
102
|
}), {
|
|
103
103
|
"data-toggle-password-visibility": type === 'password'
|
|
104
|
-
})), /*#__PURE__*/
|
|
104
|
+
})), /*#__PURE__*/React.createElement("button", {
|
|
105
105
|
type: "button",
|
|
106
106
|
className: passwordVisibilityToggleClasses,
|
|
107
107
|
onClick: togglePasswordVisibility
|
|
108
|
-
}, /*#__PURE__*/
|
|
108
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
109
109
|
className: `${prefix}--assistive-text`
|
|
110
110
|
}, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
|
|
111
|
-
const helper = helperText ? /*#__PURE__*/
|
|
111
|
+
const helper = helperText ? /*#__PURE__*/React.createElement("div", {
|
|
112
112
|
id: helperId,
|
|
113
113
|
className: helperTextClasses
|
|
114
114
|
}, helperText) : null;
|
|
115
|
-
return /*#__PURE__*/
|
|
115
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
116
116
|
className: `${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`
|
|
117
|
-
}, label, /*#__PURE__*/
|
|
117
|
+
}, label, /*#__PURE__*/React.createElement("div", {
|
|
118
118
|
className: `${prefix}--text-input__field-wrapper`,
|
|
119
119
|
"data-invalid": invalid || null
|
|
120
|
-
}, invalid && /*#__PURE__*/
|
|
120
|
+
}, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
|
|
121
121
|
className: `${prefix}--text-input__invalid-icon`
|
|
122
122
|
}), input), error ? error : helper);
|
|
123
123
|
});
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import
|
|
9
|
+
import React, { useState, useContext, useEffect } from 'react';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import { ViewOff, View } from '@carbon/icons-react';
|
|
@@ -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__*/
|
|
22
|
+
const PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput(_ref, ref) {
|
|
23
23
|
let {
|
|
24
24
|
className,
|
|
25
25
|
disabled = false,
|
|
@@ -117,18 +117,18 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
|
|
|
117
117
|
[`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
|
|
118
118
|
[`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
|
|
119
119
|
});
|
|
120
|
-
const label = labelText ? /*#__PURE__*/
|
|
120
|
+
const label = labelText ? /*#__PURE__*/React.createElement("label", {
|
|
121
121
|
htmlFor: id,
|
|
122
122
|
className: labelClasses
|
|
123
123
|
}, labelText) : null;
|
|
124
|
-
const helper = helperText ? /*#__PURE__*/
|
|
124
|
+
const helper = helperText ? /*#__PURE__*/React.createElement("div", {
|
|
125
125
|
id: normalizedProps.helperId,
|
|
126
126
|
className: helperTextClasses
|
|
127
127
|
}, helperText) : null;
|
|
128
128
|
const passwordIsVisible = inputType === 'text';
|
|
129
|
-
const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/
|
|
129
|
+
const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React.createElement(ViewOff, {
|
|
130
130
|
className: `${prefix}--icon-visibility-off`
|
|
131
|
-
}) : /*#__PURE__*/
|
|
131
|
+
}) : /*#__PURE__*/React.createElement(View, {
|
|
132
132
|
className: `${prefix}--icon-visibility-on`
|
|
133
133
|
});
|
|
134
134
|
const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
|
|
@@ -155,7 +155,7 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
|
|
|
155
155
|
} else if (!showPasswordLabel || showPasswordLabel.trim() === '') {
|
|
156
156
|
console.warn('Warning: The "showPasswordLabel" should not be blank.');
|
|
157
157
|
}
|
|
158
|
-
const input = /*#__PURE__*/
|
|
158
|
+
const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, textInputProps({
|
|
159
159
|
sharedTextInputProps,
|
|
160
160
|
invalid: normalizedProps.invalid,
|
|
161
161
|
invalidId: normalizedProps.invalidId,
|
|
@@ -166,13 +166,13 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
|
|
|
166
166
|
}), {
|
|
167
167
|
disabled: disabled,
|
|
168
168
|
"data-toggle-password-visibility": inputType === 'password'
|
|
169
|
-
})), isFluid && /*#__PURE__*/
|
|
169
|
+
})), isFluid && /*#__PURE__*/React.createElement("hr", {
|
|
170
170
|
className: `${prefix}--text-input__divider`
|
|
171
|
-
}), /*#__PURE__*/
|
|
171
|
+
}), /*#__PURE__*/React.createElement(Tooltip, {
|
|
172
172
|
align: align,
|
|
173
173
|
className: `${prefix}--toggle-password-tooltip`,
|
|
174
174
|
label: passwordIsVisible ? hidePasswordLabel : showPasswordLabel
|
|
175
|
-
}, /*#__PURE__*/
|
|
175
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
176
176
|
type: "button",
|
|
177
177
|
className: passwordVisibilityToggleClasses,
|
|
178
178
|
disabled: disabled || readOnly,
|
|
@@ -182,16 +182,16 @@ const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordIn
|
|
|
182
182
|
setInputType(type);
|
|
183
183
|
}, [type]);
|
|
184
184
|
const Icon = normalizedProps.icon;
|
|
185
|
-
return /*#__PURE__*/
|
|
185
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
186
186
|
className: inputWrapperClasses
|
|
187
|
-
}, !inline ? label : /*#__PURE__*/
|
|
187
|
+
}, !inline ? label : /*#__PURE__*/React.createElement("div", {
|
|
188
188
|
className: `${prefix}--text-input__label-helper-wrapper`
|
|
189
|
-
}, label, !isFluid && helper), /*#__PURE__*/
|
|
189
|
+
}, label, !isFluid && helper), /*#__PURE__*/React.createElement("div", {
|
|
190
190
|
className: fieldOuterWrapperClasses
|
|
191
|
-
}, /*#__PURE__*/
|
|
191
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
192
192
|
className: fieldWrapperClasses,
|
|
193
193
|
"data-invalid": normalizedProps.invalid || null
|
|
194
|
-
}, Icon && /*#__PURE__*/
|
|
194
|
+
}, Icon && /*#__PURE__*/React.createElement(Icon, {
|
|
195
195
|
className: iconClasses
|
|
196
196
|
}), input, isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
|
|
197
197
|
});
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
|
-
import
|
|
10
|
+
import React from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
|
|
@@ -18,11 +18,11 @@ const TextInputSkeleton = _ref => {
|
|
|
18
18
|
...rest
|
|
19
19
|
} = _ref;
|
|
20
20
|
const prefix = usePrefix();
|
|
21
|
-
return /*#__PURE__*/
|
|
21
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
22
22
|
className: cx(`${prefix}--form-item`, className)
|
|
23
|
-
}, rest), !hideLabel && /*#__PURE__*/
|
|
23
|
+
}, rest), !hideLabel && /*#__PURE__*/React.createElement("span", {
|
|
24
24
|
className: `${prefix}--label ${prefix}--skeleton`
|
|
25
|
-
}), /*#__PURE__*/
|
|
25
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
26
26
|
className: `${prefix}--skeleton ${prefix}--text-input`
|
|
27
27
|
}));
|
|
28
28
|
};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import
|
|
9
|
+
import React, { useState, useContext, useRef, useEffect } from 'react';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
|
|
12
12
|
import deprecate from '../../prop-types/deprecate.js';
|
|
@@ -18,7 +18,7 @@ import { useAnnouncer } from '../../internal/useAnnouncer.js';
|
|
|
18
18
|
import '../Text/index.js';
|
|
19
19
|
import { Text } from '../Text/Text.js';
|
|
20
20
|
|
|
21
|
-
const TextInput = /*#__PURE__*/
|
|
21
|
+
const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
|
|
22
22
|
let {
|
|
23
23
|
className,
|
|
24
24
|
decorator,
|
|
@@ -125,24 +125,24 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
|
|
|
125
125
|
[`${prefix}--label--disabled`]: disabled,
|
|
126
126
|
[`${prefix}--text-input__label-counter`]: true
|
|
127
127
|
});
|
|
128
|
-
const counter = enableCounter && maxCount ? /*#__PURE__*/
|
|
128
|
+
const counter = enableCounter && maxCount ? /*#__PURE__*/React.createElement(Text, {
|
|
129
129
|
as: "div",
|
|
130
130
|
className: counterClasses
|
|
131
131
|
}, `${textCount}/${maxCount}`) : null;
|
|
132
|
-
const label = labelText ? /*#__PURE__*/
|
|
132
|
+
const label = labelText ? /*#__PURE__*/React.createElement(Text, {
|
|
133
133
|
as: "label",
|
|
134
134
|
htmlFor: id,
|
|
135
135
|
className: labelClasses
|
|
136
136
|
}, labelText) : null;
|
|
137
|
-
const labelWrapper = /*#__PURE__*/
|
|
137
|
+
const labelWrapper = /*#__PURE__*/React.createElement("div", {
|
|
138
138
|
className: `${prefix}--text-input__label-wrapper`
|
|
139
139
|
}, label, counter);
|
|
140
|
-
const helper = helperText ? /*#__PURE__*/
|
|
140
|
+
const helper = helperText ? /*#__PURE__*/React.createElement(Text, {
|
|
141
141
|
as: "div",
|
|
142
142
|
id: normalizedProps.helperId,
|
|
143
143
|
className: helperTextClasses
|
|
144
144
|
}, helperText) : null;
|
|
145
|
-
const input = /*#__PURE__*/
|
|
145
|
+
const input = /*#__PURE__*/React.createElement("input", textInputProps({
|
|
146
146
|
sharedTextInputProps,
|
|
147
147
|
invalid: normalizedProps.invalid,
|
|
148
148
|
invalidId: normalizedProps.invalidId,
|
|
@@ -180,32 +180,32 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
|
|
|
180
180
|
const Icon = normalizedProps.icon;
|
|
181
181
|
|
|
182
182
|
// AILabel is always size `mini`
|
|
183
|
-
let normalizedDecorator = /*#__PURE__*/
|
|
183
|
+
let normalizedDecorator = /*#__PURE__*/React.isValidElement(slug ?? decorator) ? slug ?? decorator : null;
|
|
184
184
|
if (normalizedDecorator && normalizedDecorator['type']?.displayName === 'AILabel') {
|
|
185
|
-
normalizedDecorator = /*#__PURE__*/
|
|
185
|
+
normalizedDecorator = /*#__PURE__*/React.cloneElement(normalizedDecorator, {
|
|
186
186
|
size: 'mini'
|
|
187
187
|
});
|
|
188
188
|
}
|
|
189
|
-
return /*#__PURE__*/
|
|
189
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
190
190
|
className: inputWrapperClasses
|
|
191
|
-
}, !inline ? labelWrapper : /*#__PURE__*/
|
|
191
|
+
}, !inline ? labelWrapper : /*#__PURE__*/React.createElement("div", {
|
|
192
192
|
className: `${prefix}--text-input__label-helper-wrapper`
|
|
193
|
-
}, labelWrapper, !isFluid && (normalizedProps.validation || helper)), /*#__PURE__*/
|
|
193
|
+
}, labelWrapper, !isFluid && (normalizedProps.validation || helper)), /*#__PURE__*/React.createElement("div", {
|
|
194
194
|
className: fieldOuterWrapperClasses
|
|
195
|
-
}, /*#__PURE__*/
|
|
195
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
196
196
|
className: fieldWrapperClasses,
|
|
197
197
|
"data-invalid": normalizedProps.invalid || null
|
|
198
|
-
}, Icon && /*#__PURE__*/
|
|
198
|
+
}, Icon && /*#__PURE__*/React.createElement(Icon, {
|
|
199
199
|
className: iconClasses
|
|
200
|
-
}), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/
|
|
200
|
+
}), input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
|
|
201
201
|
className: `${prefix}--text-input__field-inner-wrapper--decorator`
|
|
202
|
-
}, normalizedDecorator) : '', /*#__PURE__*/
|
|
202
|
+
}, normalizedDecorator) : '', /*#__PURE__*/React.createElement("span", {
|
|
203
203
|
className: `${prefix}--text-input__counter-alert`,
|
|
204
204
|
role: "alert",
|
|
205
205
|
"aria-live": "assertive",
|
|
206
206
|
"aria-atomic": "true",
|
|
207
207
|
ref: announcerRef
|
|
208
|
-
}, ariaAnnouncement), isFluid && /*#__PURE__*/
|
|
208
|
+
}, ariaAnnouncement), isFluid && /*#__PURE__*/React.createElement("hr", {
|
|
209
209
|
className: `${prefix}--text-input__divider`
|
|
210
210
|
}), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
|
|
211
211
|
});
|
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import cx from 'classnames';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
-
import
|
|
11
|
+
import React, { useMemo } from 'react';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
13
13
|
import { LayerContext } from '../Layer/LayerContext.js';
|
|
14
14
|
import { useMatchMedia } from '../../internal/useMatchMedia.js';
|
|
15
15
|
|
|
16
|
-
const ThemeContext = /*#__PURE__*/
|
|
16
|
+
const ThemeContext = /*#__PURE__*/React.createContext({
|
|
17
17
|
theme: 'white'
|
|
18
18
|
});
|
|
19
|
-
const GlobalTheme = /*#__PURE__*/
|
|
19
|
+
const GlobalTheme = /*#__PURE__*/React.forwardRef(function GlobalTheme(_ref, ref) {
|
|
20
20
|
let {
|
|
21
21
|
children,
|
|
22
22
|
theme
|
|
@@ -26,10 +26,10 @@ const GlobalTheme = /*#__PURE__*/React__default.forwardRef(function GlobalTheme(
|
|
|
26
26
|
theme
|
|
27
27
|
};
|
|
28
28
|
}, [theme]);
|
|
29
|
-
const childrenWithProps = /*#__PURE__*/
|
|
29
|
+
const childrenWithProps = /*#__PURE__*/React.cloneElement(children, {
|
|
30
30
|
ref: ref
|
|
31
31
|
});
|
|
32
|
-
return /*#__PURE__*/
|
|
32
|
+
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
|
33
33
|
value: value
|
|
34
34
|
}, childrenWithProps);
|
|
35
35
|
});
|
|
@@ -62,7 +62,7 @@ function Theme(_ref2) {
|
|
|
62
62
|
[`${prefix}--g100`]: theme === 'g100',
|
|
63
63
|
[`${prefix}--layer-one`]: true
|
|
64
64
|
});
|
|
65
|
-
const value =
|
|
65
|
+
const value = React.useMemo(() => {
|
|
66
66
|
const isDark = theme && ['g90', 'g100'].includes(theme);
|
|
67
67
|
return {
|
|
68
68
|
theme,
|
|
@@ -70,11 +70,11 @@ function Theme(_ref2) {
|
|
|
70
70
|
};
|
|
71
71
|
}, [theme]);
|
|
72
72
|
const BaseComponentAsAny = BaseComponent;
|
|
73
|
-
return /*#__PURE__*/
|
|
73
|
+
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
|
74
74
|
value: value
|
|
75
|
-
}, /*#__PURE__*/
|
|
75
|
+
}, /*#__PURE__*/React.createElement(LayerContext.Provider, {
|
|
76
76
|
value: 1
|
|
77
|
-
}, /*#__PURE__*/
|
|
77
|
+
}, /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({}, rest, {
|
|
78
78
|
className: className
|
|
79
79
|
}))));
|
|
80
80
|
}
|
|
@@ -103,7 +103,7 @@ Theme.propTypes = {
|
|
|
103
103
|
* Get access to the current theme
|
|
104
104
|
*/
|
|
105
105
|
function useTheme() {
|
|
106
|
-
return
|
|
106
|
+
return React.useContext(ThemeContext);
|
|
107
107
|
}
|
|
108
108
|
function usePrefersDarkScheme() {
|
|
109
109
|
return useMatchMedia('(prefers-color-scheme: dark)');
|