@carbon/react 1.108.0-rc.0 → 1.109.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 +974 -974
- package/es/components/Button/ButtonBase.js +5 -5
- package/es/components/ComboBox/ComboBox.js +28 -1
- package/es/components/ComposedModal/ModalFooter.d.ts +5 -0
- package/es/components/ComposedModal/ModalFooter.js +3 -1
- package/es/components/DataTable/DataTable.d.ts +9 -3
- package/es/components/DataTable/DataTable.js +10 -8
- package/es/components/DataTable/TableToolbar.d.ts +8 -2
- package/es/components/DataTable/TableToolbar.js +21 -11
- package/es/components/DataTable/TableToolbarMenu.d.ts +5 -1
- package/es/components/DataTable/TableToolbarMenu.js +12 -2
- package/es/components/DataTable/TableToolbarSearch.d.ts +2 -6
- package/es/components/DataTable/TableToolbarSearch.js +5 -1
- package/es/components/Dialog/Dialog.d.ts +5 -0
- package/es/components/Dialog/Dialog.js +3 -1
- package/es/components/Menu/MenuItem.js +3 -2
- package/es/components/Modal/Modal.d.ts +5 -0
- package/es/components/Modal/Modal.js +17 -7
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +3 -2
- package/es/components/Tabs/Tabs.d.ts +5 -1
- package/es/components/Tabs/Tabs.js +2 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/internal/FloatingMenu.js +5 -3
- package/lib/components/Button/ButtonBase.js +5 -5
- package/lib/components/ComboBox/ComboBox.js +28 -1
- package/lib/components/ComposedModal/ModalFooter.d.ts +5 -0
- package/lib/components/ComposedModal/ModalFooter.js +3 -1
- package/lib/components/DataTable/DataTable.d.ts +9 -3
- package/lib/components/DataTable/DataTable.js +10 -8
- package/lib/components/DataTable/TableToolbar.d.ts +8 -2
- package/lib/components/DataTable/TableToolbar.js +20 -9
- package/lib/components/DataTable/TableToolbarMenu.d.ts +5 -1
- package/lib/components/DataTable/TableToolbarMenu.js +12 -2
- package/lib/components/DataTable/TableToolbarSearch.d.ts +2 -6
- package/lib/components/DataTable/TableToolbarSearch.js +5 -1
- package/lib/components/Dialog/Dialog.d.ts +5 -0
- package/lib/components/Dialog/Dialog.js +3 -1
- package/lib/components/Menu/MenuItem.js +3 -2
- package/lib/components/Modal/Modal.d.ts +5 -0
- package/lib/components/Modal/Modal.js +16 -6
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +3 -2
- package/lib/components/Tabs/Tabs.d.ts +5 -1
- package/lib/components/Tabs/Tabs.js +2 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +2 -0
- package/lib/internal/FloatingMenu.js +5 -3
- package/package.json +9 -9
|
@@ -144,7 +144,7 @@ function getNextIndexVertical(event, total, index) {
|
|
|
144
144
|
default: return index;
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
|
-
function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, ...rest }) {
|
|
147
|
+
function TabList({ activation = "automatic", "aria-label": label, children, className: customClassName, contained = false, fullWidth = false, iconSize, leftOverflowButtonProps, light, rightOverflowButtonProps, scrollDebounceWait = 200, scrollIntoView, size, ...rest }) {
|
|
148
148
|
const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex, dismissable } = React.useContext(TabsContext);
|
|
149
149
|
const prefix = usePrefix();
|
|
150
150
|
const ref = useRef(null);
|
|
@@ -161,6 +161,7 @@ function TabList({ activation = "automatic", "aria-label": label, children, clas
|
|
|
161
161
|
[`${prefix}--tabs__icon--default`]: iconSize === "default",
|
|
162
162
|
[`${prefix}--tabs__icon--lg`]: iconSize === "lg",
|
|
163
163
|
[`${prefix}--layout--size-lg`]: iconSize === "lg",
|
|
164
|
+
[`${prefix}--layout--size-${size}`]: size && contained && !hasSecondaryLabelTabs,
|
|
164
165
|
[`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
|
|
165
166
|
[`${prefix}--tabs--full-width`]: distributeWidth,
|
|
166
167
|
[`${prefix}--tabs--dismissable`]: dismissable
|
package/es/index.d.ts
CHANGED
|
@@ -46,6 +46,7 @@ export * from './components/FormLabel';
|
|
|
46
46
|
export * from './components/Grid';
|
|
47
47
|
export * from './components/Icon/Icon.Skeleton';
|
|
48
48
|
export * from './components/IdPrefix';
|
|
49
|
+
export { InlineCheckbox } from './components/InlineCheckbox';
|
|
49
50
|
export * from './components/InlineLoading';
|
|
50
51
|
export * from './components/Link';
|
|
51
52
|
export * from './components/ListItem';
|
package/es/index.js
CHANGED
|
@@ -82,6 +82,7 @@ import TableExpandedRow from "./components/DataTable/TableExpandedRow.js";
|
|
|
82
82
|
import TableHead from "./components/DataTable/TableHead.js";
|
|
83
83
|
import TableHeader from "./components/DataTable/TableHeader.js";
|
|
84
84
|
import TableRow from "./components/DataTable/TableRow.js";
|
|
85
|
+
import InlineCheckbox from "./components/InlineCheckbox/InlineCheckbox.js";
|
|
85
86
|
import TableSelectAll from "./components/DataTable/TableSelectAll.js";
|
|
86
87
|
import RadioButton from "./components/RadioButton/RadioButton.js";
|
|
87
88
|
import TableSelectRow from "./components/DataTable/TableSelectRow.js";
|
|
@@ -249,4 +250,4 @@ import { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
|
|
|
249
250
|
* LICENSE file in the root directory of this source tree.
|
|
250
251
|
*/
|
|
251
252
|
//#endregion
|
|
252
|
-
export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
|
|
253
|
+
export { AILabel, AILabelActions, AILabelContent, AISkeletonIcon, AISkeletonPlaceholder, AISkeletonText, Accordion, AccordionItem, AccordionSkeleton, ActionableNotification, AspectRatio, Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Button, ButtonKinds, ButtonSet, ButtonSizes, ButtonSkeleton, ButtonTooltipAlignments, ButtonTooltipPositions, Callout, Checkbox, CheckboxGroup, CheckboxSkeleton, ClassPrefix, ClickableTile, CodeSnippet, CodeSnippetSkeleton, Column, ColumnHangComponent as ColumnHang, ComboBox, ComboButton, ComposedModal, ComposedModalPresence, ContainedList, ContainedListItem_default as ContainedListItem, Content, ContentSwitcher, ControlledPasswordInput, Copy, CopyButton, DangerButton, DataTable, DataTableSkeleton, DatePicker, DatePickerInput, DatePickerSkeleton, DefinitionTooltip, DismissibleTag, Dropdown, DropdownSkeleton, ErrorBoundary, ErrorBoundaryContext, ExpandableSearch, ExpandableTile, FeatureFlags, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, FileUploaderSkeleton, Filename, FilterableMultiSelect, FlexGridComponent as FlexGrid, FluidComboBox, FluidComboBoxSkeleton, FluidDatePicker, FluidDatePickerInput, FluidDatePickerSkeleton, FluidDropdown, FluidDropdownSkeleton, FluidForm, FluidMultiSelect, FluidMultiSelectSkeleton, FluidNumberInput, FluidNumberInputSkeleton, FluidPasswordInput, FluidSearch, FluidSearchSkeleton, FluidSelect, FluidSelectSkeleton, FluidTextArea, FluidTextAreaSkeleton, FluidTextInput, FluidTextInputSkeleton, FluidTimePicker, FluidTimePickerSelect, FluidTimePickerSkeleton, Form, FormContext, FormGroup, FormItem, FormLabel, GlobalTheme, GridAsGridComponent as Grid, GridSettings, HStack, Header, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Heading, IconButton, IconButtonKinds, IconSkeleton, IconSwitch, IconTab, IdPrefix, InlineCheckbox, InlineLoading, InlineNotification, Layer, Link, ListItem, Loading, Menu, MenuButton, MenuItem, MenuItemDivider, MenuItemGroup, MenuItemRadioGroup, MenuItemSelectable, Modal, ModalBody, ModalFooter, ModalHeader, ModalPresence, ModalWrapper, MultiSelect, NotificationActionButton, NotificationButton, NumberInput, NumberInputSkeleton, OperationalTag, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PaginationNav, PaginationSkeleton, PasswordInput, Popover, PopoverContent, PrefixContext, PrimaryButton, ProgressBar, ProgressIndicator, ProgressIndicatorSkeleton, ProgressStep, RadioButton, RadioButtonGroup, RadioButtonSkeleton, RadioTile, Row, Search, SearchSkeleton, SecondaryButton, Section, Select, SelectItem, SelectItemGroup, SelectSkeleton, SelectableTag, SelectableTile, SideNav, SideNavDetails, SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher, SkeletonIcon, SkeletonPlaceholder, SkeletonText, SkipToContent, Slider, SliderSkeleton, Stack, StaticNotification, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListSkeleton, StructuredListWrapper, Switch, Switcher, SwitcherDivider, SwitcherItem, Tab, TabContent, TabList, TabListVertical, TabPanel, TabPanels, Table, TableActionList, TableBatchAction, TableBatchActions, TableBody, TableCell, TableContainer, TableDecoratorRow, TableExpandHeader, TableExpandRow, TableExpandedRow, TableHead, TableHeader, TableRow, TableSelectAll, TableSelectRow, TableSlugRow, TableToolbar, TableToolbarAction, TableToolbarContent, TableToolbarMenu, TableToolbarSearch, Tabs, TabsSkeleton, TabsVertical, Tag, TagSkeleton, TextArea, TextAreaSkeleton, TextInput, TextInputSkeleton, Theme, ThemeContext, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent, TileGroup, TimePicker, TimePickerSelect, ToastNotification, Toggle, ToggleSkeleton, ToggleSmallSkeleton, Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel, Tooltip, TreeNode, TreeView, UnorderedList, VStack, FeatureFlags as preview_FeatureFlags, Layout as preview_Layout, LayoutDirection as preview_LayoutDirection, OverflowMenuV2 as preview_OverflowMenuV2, PageSelector as preview_PageSelector, Pagination$1 as preview_Pagination, Text as preview_Text, TextDirection as preview_TextDirection, AISkeletonIcon as preview__AiSkeletonIcon, AISkeletonPlaceholder as preview__AiSkeletonPlaceholder, AISkeletonText as preview__AiSkeletonText, ChatButton as preview__ChatButton, ChatButtonSkeleton as preview__ChatButtonSkeleton, Dialog_exports as preview__Dialog, FluidComboBox as preview__FluidComboBox, FluidComboBoxSkeleton as preview__FluidComboBoxSkeleton, FluidDatePicker as preview__FluidDatePicker, FluidDatePickerInput as preview__FluidDatePickerInput, FluidDatePickerSkeleton as preview__FluidDatePickerSkeleton, FluidDropdown as preview__FluidDropdown, FluidDropdownSkeleton as preview__FluidDropdownSkeleton, FluidMultiSelect as preview__FluidMultiSelect, FluidMultiSelectSkeleton as preview__FluidMultiSelectSkeleton, FluidNumberInput as preview__FluidNumberInput, FluidNumberInputSkeleton as preview__FluidNumberInputSkeleton, FluidSearch as preview__FluidSearch, FluidSearchSkeleton as preview__FluidSearchSkeleton, FluidSelect as preview__FluidSelect, FluidSelectSkeleton as preview__FluidSelectSkeleton, FluidTextArea as preview__FluidTextArea, FluidTextAreaSkeleton as preview__FluidTextAreaSkeleton, FluidTextInput as preview__FluidTextInput, FluidTextInputSkeleton as preview__FluidTextInputSkeleton, FluidTimePicker as preview__FluidTimePicker, FluidTimePickerSelect as preview__FluidTimePickerSelect, FluidTimePickerSkeleton as preview__FluidTimePickerSkeleton, IconIndicator as preview__IconIndicator, PageHeader_exports as preview__PageHeader, ShapeIndicator as preview__ShapeIndicator, AILabel as preview__Slug, AILabelActions as preview__SlugActions, AILabelContent as preview__SlugContent, useFeatureFlag as preview_useFeatureFlag, useFeatureFlags as preview_useFeatureFlags, useLayoutDirection as preview_useLayoutDirection, FeatureFlags as unstable_FeatureFlags, Layout as unstable_Layout, LayoutDirection as unstable_LayoutDirection, OverflowMenuV2 as unstable_OverflowMenuV2, PageSelector as unstable_PageSelector, Pagination$1 as unstable_Pagination, Text as unstable_Text, TextDirection as unstable_TextDirection, AISkeletonIcon as unstable__AiSkeletonIcon, AISkeletonPlaceholder as unstable__AiSkeletonPlaceholder, AISkeletonText as unstable__AiSkeletonText, ChatButton as unstable__ChatButton, ChatButtonSkeleton as unstable__ChatButtonSkeleton, FluidComboBox as unstable__FluidComboBox, FluidComboBoxSkeleton as unstable__FluidComboBoxSkeleton, FluidDatePicker as unstable__FluidDatePicker, FluidDatePickerInput as unstable__FluidDatePickerInput, FluidDatePickerSkeleton as unstable__FluidDatePickerSkeleton, FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, FluidNumberInput as unstable__FluidNumberInput, FluidNumberInputSkeleton as unstable__FluidNumberInputSkeleton, FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSelect as unstable__FluidTimePickerSelect, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, IconIndicator as unstable__IconIndicator, PageHeader_exports as unstable__PageHeader, ShapeIndicator as unstable__ShapeIndicator, AILabel as unstable__Slug, AILabelActions as unstable__SlugActions, AILabelContent as unstable__SlugContent, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags, useLayoutDirection as unstable_useLayoutDirection, useContextMenu, useFeatureFlag, useFeatureFlags, useIdPrefix, useLayer, usePrefersDarkScheme, usePrefix, useTheme, validateNumberSeparators, withComposedModalPresence, withModalPresence };
|
|
@@ -113,7 +113,10 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
|
|
|
113
113
|
position: getComputedStyle(target()).position
|
|
114
114
|
}
|
|
115
115
|
});
|
|
116
|
-
|
|
116
|
+
setFloatingPosition((prev) => {
|
|
117
|
+
if (prev && prev.left === newFloatingPosition.left && prev.top === newFloatingPosition.top) return prev;
|
|
118
|
+
return newFloatingPosition;
|
|
119
|
+
});
|
|
117
120
|
if (!isAdjustment) {
|
|
118
121
|
const newMenuSize = menuBody.getBoundingClientRect();
|
|
119
122
|
if (newMenuSize.width !== menuSize.width || newMenuSize.height !== menuSize.height) updateMenuPosition(true);
|
|
@@ -125,8 +128,7 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
|
|
|
125
128
|
menuDirection,
|
|
126
129
|
flipped,
|
|
127
130
|
target,
|
|
128
|
-
updateOrientation
|
|
129
|
-
floatingPosition
|
|
131
|
+
updateOrientation
|
|
130
132
|
]);
|
|
131
133
|
const focusMenuContent = (menuBody) => {
|
|
132
134
|
const primaryFocusNode = selectorPrimaryFocus ? menuBody.querySelector(selectorPrimaryFocus) : null;
|
|
@@ -20,7 +20,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
20
20
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
21
21
|
* LICENSE file in the root directory of this source tree.
|
|
22
22
|
*/
|
|
23
|
-
const ButtonBase = react.default.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "
|
|
23
|
+
const ButtonBase = react.default.forwardRef(function ButtonBase({ as, children, className, dangerDescription = "", disabled = false, hasIconOnly = false, href, iconDescription, isExpressive = false, isSelected, kind = "primary", onBlur, onClick, onFocus, onMouseEnter, onMouseLeave, renderIcon: ButtonImageElement, size, tabIndex, type = "button", ...rest }, ref) {
|
|
24
24
|
const prefix = require_usePrefix.usePrefix();
|
|
25
25
|
const commonProps = {
|
|
26
26
|
tabIndex,
|
|
@@ -46,23 +46,23 @@ const ButtonBase = react.default.forwardRef(function ButtonBase({ as, children,
|
|
|
46
46
|
className: `${prefix}--btn__icon`,
|
|
47
47
|
"aria-hidden": "true"
|
|
48
48
|
});
|
|
49
|
-
const
|
|
49
|
+
const hasDangerDescription = [
|
|
50
50
|
"danger",
|
|
51
51
|
"danger--tertiary",
|
|
52
52
|
"danger--ghost"
|
|
53
|
-
];
|
|
53
|
+
].includes(kind) && Boolean(dangerDescription);
|
|
54
54
|
let component = "button";
|
|
55
55
|
const assistiveId = require_useId.useId("danger-description");
|
|
56
56
|
const { "aria-pressed": ariaPressed, "aria-describedby": ariaDescribedBy } = rest;
|
|
57
57
|
let otherProps = {
|
|
58
58
|
disabled,
|
|
59
59
|
type,
|
|
60
|
-
"aria-describedby":
|
|
60
|
+
"aria-describedby": hasDangerDescription ? assistiveId : ariaDescribedBy || void 0,
|
|
61
61
|
"aria-pressed": ariaPressed ?? (hasIconOnly && kind === "ghost" ? isSelected : void 0)
|
|
62
62
|
};
|
|
63
63
|
const anchorProps = { href };
|
|
64
64
|
let assistiveText = null;
|
|
65
|
-
if (
|
|
65
|
+
if (hasDangerDescription) assistiveText = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
66
66
|
id: assistiveId,
|
|
67
67
|
className: `${prefix}--visually-hidden`,
|
|
68
68
|
children: dangerDescription
|
|
@@ -131,12 +131,21 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
|
|
|
131
131
|
const [isFocused, setIsFocused] = (0, react.useState)(false);
|
|
132
132
|
const prevInputValue = (0, react.useRef)(inputValue);
|
|
133
133
|
const prevSelectedItemProp = (0, react.useRef)(selectedItemProp);
|
|
134
|
+
const isSyncingControlledSelectionRef = (0, react.useRef)(false);
|
|
135
|
+
const pendingControlledSelectionRef = (0, react.useRef)({
|
|
136
|
+
pending: false,
|
|
137
|
+
value: void 0
|
|
138
|
+
});
|
|
134
139
|
(0, react.useEffect)(() => {
|
|
135
140
|
isManualClearingRef.current = isClearing;
|
|
136
141
|
if (isClearing) setIsClearing(false);
|
|
137
142
|
}, [isClearing]);
|
|
138
143
|
(0, react.useEffect)(() => {
|
|
139
144
|
if (prevSelectedItemProp.current !== selectedItemProp) {
|
|
145
|
+
pendingControlledSelectionRef.current = {
|
|
146
|
+
pending: true,
|
|
147
|
+
value: selectedItemProp
|
|
148
|
+
};
|
|
140
149
|
const currentInputValue = getInputValue({
|
|
141
150
|
initialSelectedItem,
|
|
142
151
|
itemToString,
|
|
@@ -351,11 +360,14 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
|
|
|
351
360
|
isItemDisabled: isDisabledItem,
|
|
352
361
|
...downshiftProps,
|
|
353
362
|
onStateChange: ({ type, selectedItem: newSelectedItem }) => {
|
|
363
|
+
if (isManualClearingRef.current || isSyncingControlledSelectionRef.current) {
|
|
364
|
+
isSyncingControlledSelectionRef.current = false;
|
|
365
|
+
return;
|
|
366
|
+
}
|
|
354
367
|
downshiftProps?.onStateChange?.({
|
|
355
368
|
type,
|
|
356
369
|
selectedItem: newSelectedItem
|
|
357
370
|
});
|
|
358
|
-
if (isManualClearingRef.current) return;
|
|
359
371
|
if ((type === ItemClick || type === FunctionSelectItem || type === InputKeyDownEnter || !allowCustomValue && type === InputBlur) && typeof newSelectedItem !== "undefined" && !(0, react_fast_compare.default)(currentSelectedItem, newSelectedItem)) {
|
|
360
372
|
if (items.some((item) => (0, react_fast_compare.default)(item, newSelectedItem))) committedCustomValueRef.current = "";
|
|
361
373
|
onChange({ selectedItem: newSelectedItem });
|
|
@@ -363,6 +375,21 @@ const ComboBox = (0, react.forwardRef)((props, ref) => {
|
|
|
363
375
|
}
|
|
364
376
|
});
|
|
365
377
|
const currentSelectedItem = typeof selectedItemProp !== "undefined" ? selectedItemProp : selectedItem;
|
|
378
|
+
(0, react.useEffect)(() => {
|
|
379
|
+
if (pendingControlledSelectionRef.current.pending) {
|
|
380
|
+
const { value } = pendingControlledSelectionRef.current;
|
|
381
|
+
const nextSelectedItem = typeof value === "undefined" ? null : value;
|
|
382
|
+
pendingControlledSelectionRef.current.pending = false;
|
|
383
|
+
if (!(0, react_fast_compare.default)(selectedItem, nextSelectedItem)) {
|
|
384
|
+
isSyncingControlledSelectionRef.current = true;
|
|
385
|
+
selectItem(nextSelectedItem);
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
}, [
|
|
389
|
+
selectedItem,
|
|
390
|
+
selectedItemProp,
|
|
391
|
+
selectItem
|
|
392
|
+
]);
|
|
366
393
|
(0, react.useEffect)(() => {
|
|
367
394
|
if (downshiftActions) downshiftActions.current = {
|
|
368
395
|
closeMenu,
|
|
@@ -36,6 +36,11 @@ export interface ModalFooterProps {
|
|
|
36
36
|
* Note that this prop is not applied if you render primary/danger button by yourself
|
|
37
37
|
*/
|
|
38
38
|
danger?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Specify the message read by screen readers for the danger primary button.
|
|
41
|
+
* Defaults to an empty string; provide localized text to opt in.
|
|
42
|
+
*/
|
|
43
|
+
dangerDescription?: string;
|
|
39
44
|
/**
|
|
40
45
|
* The `ref` callback for the primary button.
|
|
41
46
|
*/
|
|
@@ -65,7 +65,7 @@ SecondaryButtonSet.propTypes = {
|
|
|
65
65
|
},
|
|
66
66
|
secondaryClassName: prop_types.default.string
|
|
67
67
|
};
|
|
68
|
-
const ModalFooter = react.default.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = require_noopFn.noopFn, danger, inputref, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, ...rest }, ref) {
|
|
68
|
+
const ModalFooter = react.default.forwardRef(function ModalFooter({ children, className: customClassName, closeModal = require_noopFn.noopFn, danger, dangerDescription = "", inputref, onRequestClose = require_noopFn.noopFn, onRequestSubmit = require_noopFn.noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, secondaryButtonText, secondaryButtons, secondaryClassName, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, ...rest }, ref) {
|
|
69
69
|
const prefix = require_usePrefix.usePrefix();
|
|
70
70
|
const footerClass = (0, classnames.default)(`${prefix}--modal-footer`, customClassName, Array.isArray(secondaryButtons) && secondaryButtons.length === 2 ? `${prefix}--modal-footer--three-button` : null);
|
|
71
71
|
const primaryButtonClass = (0, classnames.default)(primaryClassName, loadingStatus !== "inactive" ? `${prefix}--btn--loading` : null);
|
|
@@ -89,6 +89,7 @@ const ModalFooter = react.default.forwardRef(function ModalFooter({ children, cl
|
|
|
89
89
|
onClick: onRequestSubmit,
|
|
90
90
|
className: primaryButtonClass,
|
|
91
91
|
disabled: loadingActive || primaryButtonDisabled,
|
|
92
|
+
dangerDescription,
|
|
92
93
|
kind: danger ? "danger" : "primary",
|
|
93
94
|
ref: inputref,
|
|
94
95
|
children: loadingStatus === "inactive" ? primaryButtonText : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
|
|
@@ -108,6 +109,7 @@ ModalFooter.propTypes = {
|
|
|
108
109
|
className: prop_types.default.string,
|
|
109
110
|
closeModal: prop_types.default.func,
|
|
110
111
|
danger: prop_types.default.bool,
|
|
112
|
+
dangerDescription: prop_types.default.string,
|
|
111
113
|
inputref: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.any })]),
|
|
112
114
|
loadingDescription: prop_types.default.string,
|
|
113
115
|
loadingIconDescription: prop_types.default.string,
|
|
@@ -69,6 +69,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
|
|
|
69
69
|
selectedRows: (DataTableRow<ColTypes> & RowType)[];
|
|
70
70
|
getHeaderProps: (options: {
|
|
71
71
|
header: DataTableHeader;
|
|
72
|
+
id?: string;
|
|
72
73
|
isSortable?: boolean;
|
|
73
74
|
onClick?: (event: MouseEvent<HTMLButtonElement>, sortState: {
|
|
74
75
|
sortHeaderKey: string;
|
|
@@ -76,6 +77,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
|
|
|
76
77
|
}) => void;
|
|
77
78
|
[key: string]: unknown;
|
|
78
79
|
}) => {
|
|
80
|
+
id: string;
|
|
79
81
|
isSortable: boolean | undefined;
|
|
80
82
|
isSortHeader: boolean;
|
|
81
83
|
key: string;
|
|
@@ -135,7 +137,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
|
|
|
135
137
|
getToolbarProps: (options?: {
|
|
136
138
|
[key: string]: unknown;
|
|
137
139
|
}) => {
|
|
138
|
-
size: 'sm' | undefined;
|
|
140
|
+
size: 'xs' | 'sm' | undefined;
|
|
139
141
|
[key: string]: unknown;
|
|
140
142
|
};
|
|
141
143
|
getBatchActionProps: (options?: {
|
|
@@ -163,9 +165,12 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
|
|
|
163
165
|
};
|
|
164
166
|
getCellProps: (options: {
|
|
165
167
|
cell: DataTableCell<ColTypes>;
|
|
168
|
+
headers?: string;
|
|
169
|
+
[key: string]: unknown;
|
|
166
170
|
}) => {
|
|
167
171
|
[key: string]: unknown;
|
|
168
172
|
hasAILabelHeader?: boolean;
|
|
173
|
+
headers: string;
|
|
169
174
|
key: string;
|
|
170
175
|
};
|
|
171
176
|
/**
|
|
@@ -384,7 +389,7 @@ export declare const DataTable: {
|
|
|
384
389
|
TableToolbarAction: import("react").ForwardRefExoticComponent<import("./TableToolbarAction").TableToolbarActionProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
385
390
|
TableToolbarContent: (props: import("react").HTMLAttributes<"div">) => ReactElement;
|
|
386
391
|
TableToolbarSearch: {
|
|
387
|
-
({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
392
|
+
({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size: sizeProp, tabIndex, ...rest }: import("./TableToolbarSearch").TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
388
393
|
propTypes: {
|
|
389
394
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
390
395
|
className: PropTypes.Requireable<string>;
|
|
@@ -408,13 +413,14 @@ export declare const DataTable: {
|
|
|
408
413
|
};
|
|
409
414
|
};
|
|
410
415
|
TableToolbarMenu: {
|
|
411
|
-
({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
416
|
+
({ className, renderIcon, iconDescription, children, menuOptionsClass, size: sizeProp, ...rest }: import("./TableToolbarMenu").TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
412
417
|
propTypes: {
|
|
413
418
|
children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
|
|
414
419
|
className: PropTypes.Requireable<string>;
|
|
415
420
|
iconDescription: PropTypes.Requireable<string>;
|
|
416
421
|
menuOptionsClass: PropTypes.Requireable<string>;
|
|
417
422
|
renderIcon: PropTypes.Requireable<object>;
|
|
423
|
+
size: PropTypes.Requireable<string>;
|
|
418
424
|
};
|
|
419
425
|
};
|
|
420
426
|
propTypes: {
|
|
@@ -106,8 +106,10 @@ const DataTable = (props) => {
|
|
|
106
106
|
const getHeaderProps = ({ header, onClick, isSortable: headerIsSortable, ...rest }) => {
|
|
107
107
|
const { sortDirection, sortHeaderKey } = state;
|
|
108
108
|
const { key, slug, decorator } = header;
|
|
109
|
+
const id = typeof rest.id === "string" && rest.id.length ? rest.id : getHeaderId(key);
|
|
109
110
|
return {
|
|
110
111
|
...rest,
|
|
112
|
+
id,
|
|
111
113
|
key,
|
|
112
114
|
sortDirection,
|
|
113
115
|
isSortable: headerIsSortable ?? header.isSortable ?? isSortable,
|
|
@@ -207,13 +209,10 @@ const DataTable = (props) => {
|
|
|
207
209
|
onSelect: require_events.composeEventHandlers([handleSelectAll, onClick])
|
|
208
210
|
};
|
|
209
211
|
};
|
|
210
|
-
const getToolbarProps = (props) => {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
size: isSmall ? "sm" : void 0
|
|
215
|
-
};
|
|
216
|
-
};
|
|
212
|
+
const getToolbarProps = (props) => ({
|
|
213
|
+
...props,
|
|
214
|
+
size: size === "xs" || size === "sm" ? size : void 0
|
|
215
|
+
});
|
|
217
216
|
const getBatchActionProps = (props) => {
|
|
218
217
|
const { shouldShowBatchActions } = state;
|
|
219
218
|
const selectedRowCount = selectedRows.length;
|
|
@@ -243,10 +242,12 @@ const DataTable = (props) => {
|
|
|
243
242
|
useStaticWidth
|
|
244
243
|
};
|
|
245
244
|
};
|
|
246
|
-
const getCellProps = ({ cell: { hasAILabelHeader, id }, ...rest }) => {
|
|
245
|
+
const getCellProps = ({ cell: { hasAILabelHeader, id, info: { header } }, headers: customHeaders, ...rest }) => {
|
|
246
|
+
const headers = typeof customHeaders === "string" && customHeaders.length ? customHeaders : getHeaderId(header);
|
|
247
247
|
return {
|
|
248
248
|
...rest,
|
|
249
249
|
hasAILabelHeader,
|
|
250
|
+
headers,
|
|
250
251
|
key: id
|
|
251
252
|
};
|
|
252
253
|
};
|
|
@@ -268,6 +269,7 @@ const DataTable = (props) => {
|
|
|
268
269
|
* Generates a prefix for table related IDs.
|
|
269
270
|
*/
|
|
270
271
|
const getTablePrefix = () => `data-table-${instanceId}`;
|
|
272
|
+
const getHeaderId = (headerKey) => `${getTablePrefix()}__header-${headerKey}`;
|
|
271
273
|
/**
|
|
272
274
|
* Generates a new `rowsById` object with updated selection state.
|
|
273
275
|
*/
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2016,
|
|
2
|
+
* Copyright IBM Corp. 2016, 2026
|
|
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 PropTypes from 'prop-types';
|
|
8
8
|
import React from 'react';
|
|
9
|
+
export declare const TableToolbarContext: React.Context<{
|
|
10
|
+
size?: "xs" | "sm" | "lg";
|
|
11
|
+
}>;
|
|
12
|
+
export declare const useTableToolbar: () => {
|
|
13
|
+
size?: "xs" | "sm" | "lg";
|
|
14
|
+
};
|
|
9
15
|
export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
10
16
|
/**
|
|
11
17
|
* Specify a label to be read by screen readers on the container node
|
|
@@ -24,7 +30,7 @@ export interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
24
30
|
/**
|
|
25
31
|
* `lg` Change the row height of table
|
|
26
32
|
*/
|
|
27
|
-
size?: 'sm' | 'lg';
|
|
33
|
+
size?: 'xs' | 'sm' | 'lg';
|
|
28
34
|
}
|
|
29
35
|
declare const TableToolbar: {
|
|
30
36
|
({ ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, children, size, ...rest }: TableToolbarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -17,30 +17,41 @@ prop_types = require_runtime.__toESM(prop_types);
|
|
|
17
17
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
18
18
|
//#region src/components/DataTable/TableToolbar.tsx
|
|
19
19
|
/**
|
|
20
|
-
* Copyright IBM Corp. 2016,
|
|
20
|
+
* Copyright IBM Corp. 2016, 2026
|
|
21
21
|
*
|
|
22
22
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
23
23
|
* LICENSE file in the root directory of this source tree.
|
|
24
24
|
*/
|
|
25
|
+
const TableToolbarContext = (0, react.createContext)({});
|
|
26
|
+
const useTableToolbar = () => (0, react.useContext)(TableToolbarContext);
|
|
25
27
|
const TableToolbar = ({ ["aria-label"]: ariaLabel = "data table toolbar", ariaLabel: deprecatedAriaLabel, children, size, ...rest }) => {
|
|
26
28
|
const prefix = require_usePrefix.usePrefix();
|
|
27
29
|
const className = (0, classnames.default)({
|
|
28
30
|
[`${prefix}--table-toolbar`]: true,
|
|
29
|
-
[`${prefix}--table-toolbar--${size}`]: size
|
|
31
|
+
[`${prefix}--table-toolbar--${size}`]: size,
|
|
32
|
+
[`${prefix}--layout--size-${size}`]: size
|
|
30
33
|
});
|
|
31
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableToolbarContext.Provider, {
|
|
35
|
+
value: { size },
|
|
36
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
|
|
37
|
+
role: "group",
|
|
38
|
+
"aria-label": deprecatedAriaLabel || ariaLabel,
|
|
39
|
+
...rest,
|
|
40
|
+
className,
|
|
41
|
+
children
|
|
42
|
+
})
|
|
37
43
|
});
|
|
38
44
|
};
|
|
39
45
|
TableToolbar.propTypes = {
|
|
40
46
|
["aria-label"]: prop_types.default.string,
|
|
41
47
|
ariaLabel: require_deprecate.deprecate(prop_types.default.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
|
|
42
48
|
children: prop_types.default.node,
|
|
43
|
-
size: prop_types.default.oneOf([
|
|
49
|
+
size: prop_types.default.oneOf([
|
|
50
|
+
"xs",
|
|
51
|
+
"sm",
|
|
52
|
+
"lg"
|
|
53
|
+
])
|
|
44
54
|
};
|
|
45
55
|
//#endregion
|
|
46
56
|
exports.default = TableToolbar;
|
|
57
|
+
exports.useTableToolbar = useTableToolbar;
|
|
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
|
|
|
8
8
|
import { OverflowMenuProps } from '../OverflowMenu';
|
|
9
9
|
export type TableToolbarMenuProps = OverflowMenuProps;
|
|
10
10
|
declare const TableToolbarMenu: {
|
|
11
|
-
({ className, renderIcon, iconDescription, children, menuOptionsClass, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
({ className, renderIcon, iconDescription, children, menuOptionsClass, size: sizeProp, ...rest }: TableToolbarMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
propTypes: {
|
|
13
13
|
children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
|
|
14
14
|
/**
|
|
@@ -27,6 +27,10 @@ declare const TableToolbarMenu: {
|
|
|
27
27
|
* A component used to render an icon.
|
|
28
28
|
*/
|
|
29
29
|
renderIcon: PropTypes.Requireable<object>;
|
|
30
|
+
/**
|
|
31
|
+
* Specify the size of the ToolbarMenu.
|
|
32
|
+
*/
|
|
33
|
+
size: PropTypes.Requireable<string>;
|
|
30
34
|
};
|
|
31
35
|
};
|
|
32
36
|
export default TableToolbarMenu;
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
|
|
9
9
|
const require_usePrefix = require("../../internal/usePrefix.js");
|
|
10
|
+
const require_TableToolbar = require("./TableToolbar.js");
|
|
10
11
|
const require_index = require("../OverflowMenu/index.js");
|
|
11
12
|
let classnames = require("classnames");
|
|
12
13
|
classnames = require_runtime.__toESM(classnames);
|
|
@@ -24,13 +25,16 @@ let _carbon_icons_react = require("@carbon/icons-react");
|
|
|
24
25
|
* LICENSE file in the root directory of this source tree.
|
|
25
26
|
*/
|
|
26
27
|
const defaultIconDescription = "Settings";
|
|
27
|
-
const TableToolbarMenu = ({ className, renderIcon = _carbon_icons_react.Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, ...rest }) => {
|
|
28
|
+
const TableToolbarMenu = ({ className, renderIcon = _carbon_icons_react.Settings, iconDescription = defaultIconDescription, children, menuOptionsClass, size: sizeProp, ...rest }) => {
|
|
29
|
+
const toolbarContext = require_TableToolbar.useTableToolbar();
|
|
30
|
+
const size = sizeProp ?? toolbarContext.size;
|
|
28
31
|
const prefix = require_usePrefix.usePrefix();
|
|
29
32
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
|
|
30
33
|
renderIcon,
|
|
31
34
|
className: (0, classnames.default)(className, `${prefix}--toolbar-action ${prefix}--overflow-menu`),
|
|
32
35
|
iconDescription,
|
|
33
36
|
menuOptionsClass: (0, classnames.default)(menuOptionsClass, `${prefix}--toolbar-action__menu`),
|
|
37
|
+
size,
|
|
34
38
|
flipped: true,
|
|
35
39
|
...rest,
|
|
36
40
|
children
|
|
@@ -41,7 +45,13 @@ TableToolbarMenu.propTypes = {
|
|
|
41
45
|
className: prop_types.default.string,
|
|
42
46
|
iconDescription: prop_types.default.string,
|
|
43
47
|
menuOptionsClass: prop_types.default.string,
|
|
44
|
-
renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object])
|
|
48
|
+
renderIcon: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.object]),
|
|
49
|
+
size: prop_types.default.oneOf([
|
|
50
|
+
"xs",
|
|
51
|
+
"sm",
|
|
52
|
+
"md",
|
|
53
|
+
"lg"
|
|
54
|
+
])
|
|
45
55
|
};
|
|
46
56
|
//#endregion
|
|
47
57
|
exports.default = TableToolbarMenu;
|
|
@@ -13,7 +13,7 @@ declare const translationIds: {
|
|
|
13
13
|
readonly 'carbon.table.toolbar.search.placeholder': "carbon.table.toolbar.search.placeholder";
|
|
14
14
|
};
|
|
15
15
|
type TranslationKey = keyof typeof translationIds;
|
|
16
|
-
type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex'
|
|
16
|
+
type ExcludedInheritedProps = 'defaultValue' | 'labelText' | 'onBlur' | 'onChange' | 'onExpand' | 'onFocus' | 'tabIndex';
|
|
17
17
|
export type TableToolbarSearchHandleExpand = (event: FocusEvent<HTMLInputElement>, newValue?: boolean) => void;
|
|
18
18
|
/**
|
|
19
19
|
* @deprecated Passing `''` as the event sentinel is legacy compatibility
|
|
@@ -69,14 +69,10 @@ export interface TableToolbarSearchProps extends Omit<SearchProps, ExcludedInher
|
|
|
69
69
|
* Provide an optional className for the overall container of the Search
|
|
70
70
|
*/
|
|
71
71
|
searchContainerClass?: string;
|
|
72
|
-
/**
|
|
73
|
-
* Specify the size of the Search
|
|
74
|
-
*/
|
|
75
|
-
size?: 'sm' | 'md' | 'lg';
|
|
76
72
|
tabIndex?: number | string;
|
|
77
73
|
}
|
|
78
74
|
declare const TableToolbarSearch: {
|
|
79
|
-
({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
75
|
+
({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size: sizeProp, tabIndex, ...rest }: TableToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
|
|
80
76
|
propTypes: {
|
|
81
77
|
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
82
78
|
/**
|
|
@@ -10,6 +10,7 @@ const require_usePrefix = require("../../internal/usePrefix.js");
|
|
|
10
10
|
const require_useId = require("../../internal/useId.js");
|
|
11
11
|
const require_noopFn = require("../../internal/noopFn.js");
|
|
12
12
|
const require_index = require("../Search/index.js");
|
|
13
|
+
const require_TableToolbar = require("./TableToolbar.js");
|
|
13
14
|
let classnames = require("classnames");
|
|
14
15
|
classnames = require_runtime.__toESM(classnames);
|
|
15
16
|
let react = require("react");
|
|
@@ -35,7 +36,9 @@ const defaultTranslations = {
|
|
|
35
36
|
const defaultTranslateWithId = (messageId) => {
|
|
36
37
|
return defaultTranslations[messageId];
|
|
37
38
|
};
|
|
38
|
-
const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = require_noopFn.noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size
|
|
39
|
+
const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChangeProp, onClear = require_noopFn.noopFn, translateWithId: t = defaultTranslateWithId, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent = false, id, onBlur, onFocus, size: sizeProp, tabIndex = "0", ...rest }) => {
|
|
40
|
+
const toolbarContext = require_TableToolbar.useTableToolbar();
|
|
41
|
+
const size = sizeProp ?? toolbarContext.size;
|
|
39
42
|
const { current: controlled } = (0, react.useRef)(expandedProp !== void 0);
|
|
40
43
|
const [expandedState, setExpandedState] = (0, react.useState)(Boolean(defaultExpanded || defaultValue));
|
|
41
44
|
const expanded = controlled ? expandedProp : expandedState;
|
|
@@ -104,6 +107,7 @@ TableToolbarSearch.propTypes = {
|
|
|
104
107
|
placeholder: prop_types.default.string,
|
|
105
108
|
searchContainerClass: prop_types.default.string,
|
|
106
109
|
size: prop_types.default.oneOf([
|
|
110
|
+
"xs",
|
|
107
111
|
"sm",
|
|
108
112
|
"md",
|
|
109
113
|
"lg"
|
|
@@ -232,6 +232,11 @@ interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
232
232
|
* Specify whether the Dialog is for dangerous actions
|
|
233
233
|
*/
|
|
234
234
|
danger?: boolean;
|
|
235
|
+
/**
|
|
236
|
+
* Specify the message read by screen readers for the danger primary button.
|
|
237
|
+
* Defaults to an empty string; provide localized text to opt in.
|
|
238
|
+
*/
|
|
239
|
+
dangerDescription?: string;
|
|
235
240
|
/**
|
|
236
241
|
* Specify loading status
|
|
237
242
|
*/
|
|
@@ -252,7 +252,7 @@ DialogBody.propTypes = {
|
|
|
252
252
|
className: prop_types.default.string,
|
|
253
253
|
hasScrollingContent: prop_types.default.bool
|
|
254
254
|
};
|
|
255
|
-
const DialogFooter = react.default.forwardRef(({ children, className, onRequestClose = require_noopFn.noopFn, onSecondarySubmit, onRequestSubmit = require_noopFn.noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, danger = false, ...rest }, ref) => {
|
|
255
|
+
const DialogFooter = react.default.forwardRef(({ children, className, onRequestClose = require_noopFn.noopFn, onSecondarySubmit, onRequestSubmit = require_noopFn.noopFn, primaryButtonText = "Save", primaryButtonDisabled = false, secondaryButtonText = "Cancel", secondaryButtons, loadingStatus = "inactive", loadingDescription, loadingIconDescription, onLoadingSuccess = require_noopFn.noopFn, danger = false, dangerDescription = "", ...rest }, ref) => {
|
|
256
256
|
const prefix = require_usePrefix.usePrefix();
|
|
257
257
|
const button = (0, react.useRef)(null);
|
|
258
258
|
const { isOpen } = (0, react.useContext)(DialogContext);
|
|
@@ -300,6 +300,7 @@ const DialogFooter = react.default.forwardRef(({ children, className, onRequestC
|
|
|
300
300
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
|
|
301
301
|
className: primaryButtonClass,
|
|
302
302
|
kind: danger ? "danger" : "primary",
|
|
303
|
+
dangerDescription,
|
|
303
304
|
disabled: loadingActive || primaryButtonDisabled,
|
|
304
305
|
onClick: onRequestSubmit,
|
|
305
306
|
ref: button,
|
|
@@ -337,6 +338,7 @@ DialogFooter.propTypes = {
|
|
|
337
338
|
return null;
|
|
338
339
|
},
|
|
339
340
|
danger: prop_types.default.bool,
|
|
341
|
+
dangerDescription: prop_types.default.string,
|
|
340
342
|
loadingStatus: prop_types.default.oneOf([
|
|
341
343
|
"inactive",
|
|
342
344
|
"active",
|
|
@@ -33,7 +33,7 @@ let _floating_ui_react = require("@floating-ui/react");
|
|
|
33
33
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
34
34
|
* LICENSE file in the root directory of this source tree.
|
|
35
35
|
*/
|
|
36
|
-
const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className, dangerDescription = "
|
|
36
|
+
const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className, dangerDescription = "", disabled, kind = "default", label, onClick, renderIcon: IconElement, shortcut, ...rest }, forwardRef) {
|
|
37
37
|
const [submenuOpen, setSubmenuOpen] = (0, react.useState)(false);
|
|
38
38
|
const [rtl, setRtl] = (0, react.useState)(false);
|
|
39
39
|
const { refs, floatingStyles, context: floatingContext } = (0, _floating_ui_react.useFloating)({
|
|
@@ -71,6 +71,7 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className,
|
|
|
71
71
|
const hasChildren = react.default.Children.toArray(children).length > 0;
|
|
72
72
|
const isDisabled = disabled && !hasChildren;
|
|
73
73
|
const isDanger = kind === "danger" && !hasChildren;
|
|
74
|
+
const hasDangerDescription = isDanger && Boolean(dangerDescription);
|
|
74
75
|
function registerItem() {
|
|
75
76
|
context.dispatch({
|
|
76
77
|
type: "registerItem",
|
|
@@ -173,7 +174,7 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className,
|
|
|
173
174
|
className: `${prefix}--menu-item__label`,
|
|
174
175
|
children: label
|
|
175
176
|
}),
|
|
176
|
-
|
|
177
|
+
hasDangerDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
177
178
|
id: assistiveId,
|
|
178
179
|
className: `${prefix}--visually-hidden`,
|
|
179
180
|
children: dangerDescription
|
|
@@ -38,6 +38,11 @@ export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
38
38
|
* Specify whether the Modal is for dangerous actions
|
|
39
39
|
*/
|
|
40
40
|
danger?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Specify the message read by screen readers for the danger primary button.
|
|
43
|
+
* Defaults to an empty string; provide localized text to opt in.
|
|
44
|
+
*/
|
|
45
|
+
dangerDescription?: string;
|
|
41
46
|
/**
|
|
42
47
|
* **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
|
|
43
48
|
*/
|