@box/blueprint-web 12.104.1 → 12.106.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/dist/lib-esm/accordion/accordion.module.js +1 -1
- package/dist/lib-esm/avatar/avatar.module.js +1 -1
- package/dist/lib-esm/badge/base-badge.module.js +1 -1
- package/dist/lib-esm/card-tooltip/card-tooltip.module.js +1 -1
- package/dist/lib-esm/card-tooltip-v2/card-tooltip-v2.module.js +1 -1
- package/dist/lib-esm/checkbox/checkbox.module.js +1 -1
- package/dist/lib-esm/combobox/combobox.module.js +1 -1
- package/dist/lib-esm/combobox-group/combobox-group.module.js +1 -1
- package/dist/lib-esm/content-card/content-card.module.js +1 -1
- package/dist/lib-esm/data-table/cell/sticky-cell.module.js +1 -1
- package/dist/lib-esm/data-table/data-table.module.js +1 -1
- package/dist/lib-esm/date-picker/date-picker.module.js +1 -1
- package/dist/lib-esm/empty-state/empty-state.module.js +1 -1
- package/dist/lib-esm/index.css +1160 -1082
- package/dist/lib-esm/input-chip/input-chip.module.js +1 -1
- package/dist/lib-esm/loading-indicator/loading-indicator.module.js +1 -1
- package/dist/lib-esm/modal/modal.module.js +1 -1
- package/dist/lib-esm/page-section/page-section.module.js +1 -1
- package/dist/lib-esm/password-input/password-input.module.js +1 -1
- package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/dist/lib-esm/primitives/calendar/calendar.module.js +1 -1
- package/dist/lib-esm/primitives/context-menu/context-menu.module.js +1 -1
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js +1 -1
- package/dist/lib-esm/primitives/notification/notification.module.js +1 -1
- package/dist/lib-esm/primitives/popover/popover.module.js +1 -1
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js +1 -1
- package/dist/lib-esm/primitives/tabs/tabs.module.js +1 -1
- package/dist/lib-esm/radio-group/radio-group.module.js +1 -1
- package/dist/lib-esm/radio-tiles/radio-tiles.d.ts +1 -1
- package/dist/lib-esm/radio-tiles/radio-tiles.js +23 -9
- package/dist/lib-esm/radio-tiles/radio-tiles.module.js +1 -1
- package/dist/lib-esm/radio-tiles/types.d.ts +2 -1
- package/dist/lib-esm/select/select-context.d.ts +12 -0
- package/dist/lib-esm/select/select-context.js +55 -0
- package/dist/lib-esm/select/select.js +115 -34
- package/dist/lib-esm/select/select.module.js +1 -1
- package/dist/lib-esm/select/types.d.ts +45 -0
- package/dist/lib-esm/side-panel/side-panel.module.js +1 -1
- package/dist/lib-esm/switch/switch.module.js +1 -1
- package/dist/lib-esm/text/text.module.js +1 -1
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js +1 -1
- package/dist/lib-esm/text-area/text-area.module.js +1 -1
- package/dist/lib-esm/text-button/text-button.module.js +1 -1
- package/dist/lib-esm/text-input/text-input.module.js +1 -1
- package/dist/lib-esm/time-picker/time-picker.module.js +1 -1
- package/dist/lib-esm/toolbar/toolbar.module.js +1 -1
- package/dist/lib-esm/trigger-button/trigger-button.module.js +1 -1
- package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js +1 -1
- package/dist/lib-esm/util-components/interactive-icon/interactive-icon.module.js +1 -1
- package/dist/lib-esm/utils/throwOnDev.d.ts +6 -0
- package/dist/lib-esm/utils/throwOnDev.js +14 -0
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_input_chip_module_container--
|
|
2
|
+
var styles = {"container":"bp_input_chip_module_container--e6383","avatarContainer":"bp_input_chip_module_avatarContainer--e6383","deleteButton":"bp_input_chip_module_deleteButton--e6383","noDeleteButton":"bp_input_chip_module_noDeleteButton--e6383","error":"bp_input_chip_module_error--e6383","deleteIcon":"bp_input_chip_module_deleteIcon--e6383","label":"bp_input_chip_module_label--e6383","variable":"bp_input_chip_module_variable--e6383","avatar":"bp_input_chip_module_avatar--e6383","modern":"bp_input_chip_module_modern--e6383"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"crawler":"bp_loading_indicator_module_crawler--
|
|
2
|
+
var styles = {"crawler":"bp_loading_indicator_module_crawler--3c434","segment":"bp_loading_indicator_module_segment--3c434","small":"bp_loading_indicator_module_small--3c434","large":"bp_loading_indicator_module_large--3c434","x-large":"bp_loading_indicator_module_x-large--3c434","default":"bp_loading_indicator_module_default--3c434","segment-transform":"bp_loading_indicator_module_segment-transform--3c434","segment-default":"bp_loading_indicator_module_segment-default--3c434","dark":"bp_loading_indicator_module_dark--3c434","segment-dark":"bp_loading_indicator_module_segment-dark--3c434","light":"bp_loading_indicator_module_light--3c434","segment-light":"bp_loading_indicator_module_segment-light--3c434"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"overlay":"bp_modal_module_overlay--
|
|
2
|
+
var styles = {"overlay":"bp_modal_module_overlay--2a443","headerDividerLine":"bp_modal_module_headerDividerLine--2a443","footerDividerLine":"bp_modal_module_footerDividerLine--2a443","content":"bp_modal_module_content--2a443","popup_bounce_in":"bp_modal_module_popup_bounce_in--2a443","smallSizeModal":"bp_modal_module_smallSizeModal--2a443","mediumSizeModal":"bp_modal_module_mediumSizeModal--2a443","largeSizeModal":"bp_modal_module_largeSizeModal--2a443","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--2a443","loadingContainerActive":"bp_modal_module_loadingContainerActive--2a443","scrollableContainer":"bp_modal_module_scrollableContainer--2a443","close":"bp_modal_module_close--2a443","onColor":"bp_modal_module_onColor--2a443","backButton":"bp_modal_module_backButton--2a443","modalHeader":"bp_modal_module_modalHeader--2a443","modalTitle":"bp_modal_module_modalTitle--2a443","body":"bp_modal_module_body--2a443","footer":"bp_modal_module_footer--2a443","footerButton":"bp_modal_module_footerButton--2a443","loadingContainer":"bp_modal_module_loadingContainer--2a443","loading":"bp_modal_module_loading--2a443","loadingOverlay":"bp_modal_module_loadingOverlay--2a443","loadingContent":"bp_modal_module_loadingContent--2a443","loadingContentVisible":"bp_modal_module_loadingContentVisible--2a443"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"pageSectionContainer":"bp_page_section_module_pageSectionContainer--
|
|
2
|
+
var styles = {"pageSectionContainer":"bp_page_section_module_pageSectionContainer--d1373","pageSection":"bp_page_section_module_pageSection--d1373","pageSectionHeader":"bp_page_section_module_pageSectionHeader--d1373","pageSectionContent":"bp_page_section_module_pageSectionContent--d1373","pageSectionDivider":"bp_page_section_module_pageSectionDivider--d1373"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"passwordInput":"bp_password_input_module_passwordInput--
|
|
2
|
+
var styles = {"passwordInput":"bp_password_input_module_passwordInput--fe321","iconButton":"bp_password_input_module_iconButton--fe321"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"button":"bp_base_button_module_button--
|
|
2
|
+
var styles = {"button":"bp_base_button_module_button--d9fd8","primary":"bp_base_button_module_primary--d9fd8","secondary":"bp_base_button_module_secondary--d9fd8","tertiary":"bp_base_button_module_tertiary--d9fd8","outline":"bp_base_button_module_outline--d9fd8","small":"bp_base_button_module_small--d9fd8","isIconButton":"bp_base_button_module_isIconButton--d9fd8","isTextWithIconButton":"bp_base_button_module_isTextWithIconButton--d9fd8","large":"bp_base_button_module_large--d9fd8","icon":"bp_base_button_module_icon--d9fd8","hide":"bp_base_button_module_hide--d9fd8"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--
|
|
2
|
+
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--b26a8","label":"bp_base_text_input_module_label--b26a8","textInputContainer":"bp_base_text_input_module_textInputContainer--b26a8","textInput":"bp_base_text_input_module_textInput--b26a8","hidden":"bp_base_text_input_module_hidden--b26a8","error":"bp_base_text_input_module_error--b26a8","readOnly":"bp_base_text_input_module_readOnly--b26a8","endIcon":"bp_base_text_input_module_endIcon--b26a8","startIcon":"bp_base_text_input_module_startIcon--b26a8","disabled":"bp_base_text_input_module_disabled--b26a8","inlineError":"bp_base_text_input_module_inlineError--b26a8","subtext":"bp_base_text_input_module_subtext--b26a8"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"calendar":"bp_calendar_module_calendar--
|
|
2
|
+
var styles = {"calendar":"bp_calendar_module_calendar--e8ac8","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--e8ac8","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--e8ac8","calendarCell":"bp_calendar_module_calendarCell--e8ac8","today":"bp_calendar_module_today--e8ac8","calendarHeader":"bp_calendar_module_calendarHeader--e8ac8","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--e8ac8","calendarGrid":"bp_calendar_module_calendarGrid--e8ac8"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"menuBlock":"bp_context_menu_module_menuBlock--
|
|
2
|
+
var styles = {"menuBlock":"bp_context_menu_module_menuBlock--dbb78","menuHeader":"bp_context_menu_module_menuHeader--dbb78","fullScreenContent":"bp_context_menu_module_fullScreenContent--dbb78","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--dbb78","menuItem":"bp_context_menu_module_menuItem--dbb78","headerTextContent":"bp_context_menu_module_headerTextContent--dbb78","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--dbb78","menuCloseButton":"bp_context_menu_module_menuCloseButton--dbb78","ellipsis":"bp_context_menu_module_ellipsis--dbb78"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"content":"bp_dropdown_menu_module_content--
|
|
2
|
+
var styles = {"content":"bp_dropdown_menu_module_content--6b9f5","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--6b9f5","subheader":"bp_dropdown_menu_module_subheader--6b9f5","uppercased":"bp_dropdown_menu_module_uppercased--6b9f5","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--6b9f5","ellipsis":"bp_dropdown_menu_module_ellipsis--6b9f5","checkmark":"bp_dropdown_menu_module_checkmark--6b9f5","item":"bp_dropdown_menu_module_item--6b9f5","radioItem":"bp_dropdown_menu_module_radioItem--6b9f5","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--6b9f5","checkboxItem":"bp_dropdown_menu_module_checkboxItem--6b9f5","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--6b9f5","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--6b9f5","startElement":"bp_dropdown_menu_module_startElement--6b9f5","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--6b9f5","endElement":"bp_dropdown_menu_module_endElement--6b9f5","menuHeader":"bp_dropdown_menu_module_menuHeader--6b9f5","headerTextContent":"bp_dropdown_menu_module_headerTextContent--6b9f5","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--6b9f5","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--6b9f5"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"viewport":"bp_notification_module_viewport--
|
|
2
|
+
var styles = {"viewport":"bp_notification_module_viewport--ed392","root":"bp_notification_module_root--ed392","text":"bp_notification_module_text--ed392","info":"bp_notification_module_info--ed392","success":"bp_notification_module_success--ed392","warning":"bp_notification_module_warning--ed392","error":"bp_notification_module_error--ed392","container":"bp_notification_module_container--ed392","mobileContainer":"bp_notification_module_mobileContainer--ed392","withButtons":"bp_notification_module_withButtons--ed392","typeIconContainer":"bp_notification_module_typeIconContainer--ed392","typeIcon":"bp_notification_module_typeIcon--ed392","contentButtonSection":"bp_notification_module_contentButtonSection--ed392","contentButtons":"bp_notification_module_contentButtons--ed392","closeButtonSection":"bp_notification_module_closeButtonSection--ed392","closeButton":"bp_notification_module_closeButton--ed392"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--
|
|
2
|
+
var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--2eae8","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--2eae8","popoverCard":"bp_popover_module_popoverCard--2eae8","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--2eae8","popoverMainContent":"bp_popover_module_popoverMainContent--2eae8","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--2eae8","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--2eae8","popoverFooter":"bp_popover_module_popoverFooter--2eae8","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--2eae8"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--
|
|
2
|
+
var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--37319","withLabel":"bp_select_menu_grid_option_module_withLabel--37319","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--37319","optionButton":"bp_select_menu_grid_option_module_optionButton--37319","labeled":"bp_select_menu_grid_option_module_labeled--37319","text":"bp_select_menu_grid_option_module_text--37319","text--large":"bp_select_menu_grid_option_module_text--large--37319","text--default":"bp_select_menu_grid_option_module_text--default--37319","iconContainer":"bp_select_menu_grid_option_module_iconContainer--37319","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--37319","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--37319","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--37319","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--37319","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--37319","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--37319","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--37319","active":"bp_select_menu_grid_option_module_active--37319","dragging":"bp_select_menu_grid_option_module_dragging--37319","disabled":"bp_select_menu_grid_option_module_disabled--37319","square":"bp_select_menu_grid_option_module_square--37319","outlineHost":"bp_select_menu_grid_option_module_outlineHost--37319","circle":"bp_select_menu_grid_option_module_circle--37319","loading":"bp_select_menu_grid_option_module_loading--37319","color":"bp_select_menu_grid_option_module_color--37319","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--37319"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--
|
|
2
|
+
var styles = {"hiddenWidthSetter":"bp_tabs_module_hiddenWidthSetter--4504d","contentSwitchTabList":"bp_tabs_module_contentSwitchTabList--4504d","contentSwitchTab":"bp_tabs_module_contentSwitchTab--4504d","tabsListContainer":"bp_tabs_module_tabsListContainer--4504d","tab":"bp_tabs_module_tab--4504d","tabList":"bp_tabs_module_tabList--4504d","tabSeparator":"bp_tabs_module_tabSeparator--4504d"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"root":"bp_radio_group_module_root--
|
|
2
|
+
var styles = {"root":"bp_radio_group_module_root--917da","horizontal":"bp_radio_group_module_horizontal--917da","radioOption":"bp_radio_group_module_radioOption--917da","label":"bp_radio_group_module_label--917da","description":"bp_radio_group_module_description--917da","disabled":"bp_radio_group_module_disabled--917da","radioButton":"bp_radio_group_module_radioButton--917da","indicator":"bp_radio_group_module_indicator--917da"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type RadioTilesProps } from './types';
|
|
2
|
-
export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
|
|
2
|
+
export declare const RadioTiles: (<T extends string | null = string>({ children, name, value, variant, columns, disabled, className, error, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onChange, }: RadioTilesProps<T>) => import("react/jsx-runtime").JSX.Element) & {
|
|
3
3
|
Option: <T extends string>({ children, value, label, icon, disabled: disabledProp, className, "aria-label": ariaLabel, }: import("./types").RadioTilesOptionProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useMemo } from 'react';
|
|
4
4
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
|
+
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
6
|
+
import { useUniqueId } from '../utils/useUniqueId.js';
|
|
5
7
|
import { RadioTilesOption } from './radio-tiles-option.js';
|
|
6
8
|
import { RadioTilesContext } from './radio-tiles.context.js';
|
|
7
9
|
import styles from './radio-tiles.module.js';
|
|
@@ -14,6 +16,7 @@ const RadioTilesRoot = ({
|
|
|
14
16
|
columns,
|
|
15
17
|
disabled,
|
|
16
18
|
className,
|
|
19
|
+
error,
|
|
17
20
|
'aria-label': ariaLabel,
|
|
18
21
|
'aria-labelledby': ariaLabelledBy,
|
|
19
22
|
onChange
|
|
@@ -21,13 +24,15 @@ const RadioTilesRoot = ({
|
|
|
21
24
|
const containerStyles = {
|
|
22
25
|
'--columns': columns
|
|
23
26
|
};
|
|
24
|
-
const
|
|
27
|
+
const radioTilesClassNames = clsx(styles.radioTiles, {
|
|
25
28
|
[styles.hasColumns]: Number(columns) > 0,
|
|
26
29
|
[variant === 'compact' ? styles.compact : styles.default]: true
|
|
27
30
|
}, className);
|
|
28
31
|
const {
|
|
29
32
|
enableModernizedComponents
|
|
30
33
|
} = useBlueprintModernization();
|
|
34
|
+
const hasError = !!error && !disabled;
|
|
35
|
+
const inlineErrorId = useUniqueId('inline-error-');
|
|
31
36
|
const contextValue = useMemo(() => ({
|
|
32
37
|
name,
|
|
33
38
|
selectedValue: value,
|
|
@@ -36,14 +41,23 @@ const RadioTilesRoot = ({
|
|
|
36
41
|
}), [name, value, disabled, onChange]);
|
|
37
42
|
return jsx(RadioTilesContext.Provider, {
|
|
38
43
|
value: contextValue,
|
|
39
|
-
children:
|
|
40
|
-
|
|
41
|
-
"aria-labelledby": ariaLabelledBy,
|
|
42
|
-
className: containerClassNames,
|
|
44
|
+
children: jsxs("div", {
|
|
45
|
+
className: styles.container,
|
|
43
46
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
children: [jsx("div", {
|
|
48
|
+
"aria-describedby": hasError ? inlineErrorId : undefined,
|
|
49
|
+
"aria-invalid": hasError || undefined,
|
|
50
|
+
"aria-label": ariaLabel,
|
|
51
|
+
"aria-labelledby": ariaLabelledBy,
|
|
52
|
+
className: radioTilesClassNames,
|
|
53
|
+
role: "radiogroup",
|
|
54
|
+
style: containerStyles,
|
|
55
|
+
children: children
|
|
56
|
+
}), hasError ? jsx(InlineError, {
|
|
57
|
+
className: styles.inlineError,
|
|
58
|
+
id: inlineErrorId,
|
|
59
|
+
children: error
|
|
60
|
+
}) : null]
|
|
47
61
|
})
|
|
48
62
|
});
|
|
49
63
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"radioTiles":"bp_radio_tiles_module_radioTiles--
|
|
2
|
+
var styles = {"container":"bp_radio_tiles_module_container--1020c","radioTiles":"bp_radio_tiles_module_radioTiles--1020c","hasColumns":"bp_radio_tiles_module_hasColumns--1020c","default":"bp_radio_tiles_module_default--1020c","compact":"bp_radio_tiles_module_compact--1020c","inlineError":"bp_radio_tiles_module_inlineError--1020c"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ChangeEvent, type CSSProperties, type ReactElement, type SVGProps } from 'react';
|
|
1
|
+
import { type ChangeEvent, type CSSProperties, type ReactElement, type ReactNode, type SVGProps } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* RadioTilesProps
|
|
4
4
|
*/
|
|
@@ -19,6 +19,7 @@ export type RadioTilesProps<T extends string | null = string | null> = {
|
|
|
19
19
|
variant?: 'default' | 'compact';
|
|
20
20
|
disabled?: boolean;
|
|
21
21
|
className?: string;
|
|
22
|
+
error?: ReactNode;
|
|
22
23
|
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
23
24
|
} & (WithAriaLabel | WithAriaLabelledBy);
|
|
24
25
|
/**
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
interface SelectContextValue {
|
|
3
|
+
registerLeftElement: (value: string, element: ReactNode) => void;
|
|
4
|
+
unregisterLeftElement: (value: string) => void;
|
|
5
|
+
getLeftElement: (value: string) => ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const useSelectContext: () => SelectContextValue;
|
|
8
|
+
interface SelectProviderProps {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export declare const SelectProvider: ({ children }: SelectProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useState, useCallback, useMemo, createContext, useContext } from 'react';
|
|
3
|
+
import { throwOnDev } from '../utils/throwOnDev.js';
|
|
4
|
+
|
|
5
|
+
const defaultContextValue = {
|
|
6
|
+
registerLeftElement: () => {
|
|
7
|
+
/* noop */
|
|
8
|
+
},
|
|
9
|
+
unregisterLeftElement: () => {
|
|
10
|
+
/* noop */
|
|
11
|
+
},
|
|
12
|
+
getLeftElement: () => null
|
|
13
|
+
};
|
|
14
|
+
const SelectContext = /*#__PURE__*/createContext(null);
|
|
15
|
+
const useSelectContext = () => {
|
|
16
|
+
const context = useContext(SelectContext);
|
|
17
|
+
if (!context) {
|
|
18
|
+
throwOnDev('Select compound components must be used within Select');
|
|
19
|
+
return defaultContextValue;
|
|
20
|
+
}
|
|
21
|
+
return context;
|
|
22
|
+
};
|
|
23
|
+
const SelectProvider = ({
|
|
24
|
+
children
|
|
25
|
+
}) => {
|
|
26
|
+
const [leftElements, setLeftElements] = useState(new Map());
|
|
27
|
+
const registerLeftElement = useCallback((value, element) => {
|
|
28
|
+
setLeftElements(prev => {
|
|
29
|
+
const next = new Map(prev);
|
|
30
|
+
next.set(value, element);
|
|
31
|
+
return next;
|
|
32
|
+
});
|
|
33
|
+
}, []);
|
|
34
|
+
const unregisterLeftElement = useCallback(value => {
|
|
35
|
+
setLeftElements(prev => {
|
|
36
|
+
const next = new Map(prev);
|
|
37
|
+
next.delete(value);
|
|
38
|
+
return next;
|
|
39
|
+
});
|
|
40
|
+
}, []);
|
|
41
|
+
const getLeftElement = useCallback(value => {
|
|
42
|
+
return leftElements.get(value);
|
|
43
|
+
}, [leftElements]);
|
|
44
|
+
const value = useMemo(() => ({
|
|
45
|
+
registerLeftElement,
|
|
46
|
+
unregisterLeftElement,
|
|
47
|
+
getLeftElement
|
|
48
|
+
}), [registerLeftElement, unregisterLeftElement, getLeftElement]);
|
|
49
|
+
return jsx(SelectContext.Provider, {
|
|
50
|
+
value: value,
|
|
51
|
+
children: children
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export { SelectProvider, useSelectContext };
|
|
@@ -5,12 +5,14 @@ import { bpSize030, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/t
|
|
|
5
5
|
import * as ScrollArea from '@radix-ui/react-scroll-area';
|
|
6
6
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
|
-
import { forwardRef, useCallback } from 'react';
|
|
8
|
+
import { forwardRef, useCallback, useLayoutEffect } from 'react';
|
|
9
9
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
10
10
|
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
11
11
|
import { Text } from '../text/text.js';
|
|
12
12
|
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
13
|
+
import { useControllableState } from '../utils/useControllableState.js';
|
|
13
14
|
import { useUniqueId } from '../utils/useUniqueId.js';
|
|
15
|
+
import { SelectProvider, useSelectContext } from './select-context.js';
|
|
14
16
|
import styles from './select.module.js';
|
|
15
17
|
|
|
16
18
|
const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
@@ -22,10 +24,11 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
22
24
|
hideLabel,
|
|
23
25
|
label,
|
|
24
26
|
placeholder,
|
|
27
|
+
placeholderLeftElement,
|
|
25
28
|
// RadixSelect props
|
|
26
|
-
defaultValue,
|
|
27
|
-
value,
|
|
28
|
-
onValueChange,
|
|
29
|
+
defaultValue: defaultValueProp,
|
|
30
|
+
value: valueProp,
|
|
31
|
+
onValueChange: onValueChangeProp,
|
|
29
32
|
defaultOpen,
|
|
30
33
|
open,
|
|
31
34
|
onOpenChange,
|
|
@@ -38,6 +41,17 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
38
41
|
// RadixSelectTrigger props
|
|
39
42
|
...triggerProps
|
|
40
43
|
} = props;
|
|
44
|
+
/**
|
|
45
|
+
* currentValue is used to access current value of the select
|
|
46
|
+
* it is updated when the user selects an option
|
|
47
|
+
* it is used to display the correct left element in the trigger
|
|
48
|
+
* this is to support both controlled and uncontrolled mode
|
|
49
|
+
*/
|
|
50
|
+
const [value, onValueChange] = useControllableState({
|
|
51
|
+
prop: valueProp,
|
|
52
|
+
defaultProp: defaultValueProp,
|
|
53
|
+
onChange: onValueChangeProp
|
|
54
|
+
});
|
|
41
55
|
const selectId = useUniqueId('select-', !id) || id || 'default-select-id';
|
|
42
56
|
const {
|
|
43
57
|
enableModernizedComponents
|
|
@@ -56,7 +70,6 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
56
70
|
disabled,
|
|
57
71
|
required,
|
|
58
72
|
value,
|
|
59
|
-
defaultValue,
|
|
60
73
|
defaultOpen: !readonly && isSelectDefaultOpen,
|
|
61
74
|
open: !readonly && isSelectOpen,
|
|
62
75
|
onValueChange,
|
|
@@ -93,28 +106,22 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
93
106
|
children: [jsx(Label, {
|
|
94
107
|
className: styles.label,
|
|
95
108
|
hideLabel: hideLabel
|
|
96
|
-
}),
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
placeholder: placeholder
|
|
113
|
-
}), jsx(SelectPrimitive.Icon, {
|
|
114
|
-
className: styles.iconWrapper,
|
|
115
|
-
children: icon
|
|
116
|
-
})]
|
|
117
|
-
}), children]
|
|
109
|
+
}), jsx(SelectProvider, {
|
|
110
|
+
children: jsxs(SelectPrimitive.Root, {
|
|
111
|
+
...selectProps,
|
|
112
|
+
children: [jsx(Trigger, {
|
|
113
|
+
...triggerProps,
|
|
114
|
+
ref: forwardedRef,
|
|
115
|
+
ariaDescribedBy: ariaDescribedBy,
|
|
116
|
+
hasError: hasError,
|
|
117
|
+
icon: icon,
|
|
118
|
+
placeholder: placeholder,
|
|
119
|
+
placeholderLeftElement: placeholderLeftElement,
|
|
120
|
+
readonly: readonly,
|
|
121
|
+
selectId: selectId,
|
|
122
|
+
value: value
|
|
123
|
+
}), children]
|
|
124
|
+
})
|
|
118
125
|
}), jsx(InlineError, {
|
|
119
126
|
className: styles.inlineError,
|
|
120
127
|
id: inlineErrorId,
|
|
@@ -127,6 +134,53 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
127
134
|
});
|
|
128
135
|
});
|
|
129
136
|
Root.displayName = 'Select';
|
|
137
|
+
const Trigger = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
138
|
+
const {
|
|
139
|
+
ariaDescribedBy,
|
|
140
|
+
hasError,
|
|
141
|
+
readonly,
|
|
142
|
+
selectId,
|
|
143
|
+
placeholder,
|
|
144
|
+
placeholderLeftElement,
|
|
145
|
+
icon,
|
|
146
|
+
value,
|
|
147
|
+
...triggerProps
|
|
148
|
+
} = props;
|
|
149
|
+
const {
|
|
150
|
+
getLeftElement
|
|
151
|
+
} = useSelectContext();
|
|
152
|
+
const selectedLeftElement = value ? getLeftElement(value) : null;
|
|
153
|
+
const shouldShowPlaceholderLeftElement = !value && placeholderLeftElement;
|
|
154
|
+
return jsxs(SelectPrimitive.Trigger, {
|
|
155
|
+
...triggerProps,
|
|
156
|
+
ref: forwardedRef,
|
|
157
|
+
"aria-describedby": ariaDescribedBy,
|
|
158
|
+
...(hasError && {
|
|
159
|
+
'aria-invalid': 'true'
|
|
160
|
+
}),
|
|
161
|
+
"aria-readonly": readonly ? 'true' : undefined,
|
|
162
|
+
className: clsx(styles.triggerBtn, {
|
|
163
|
+
[styles.error]: hasError,
|
|
164
|
+
[styles.readonly]: readonly
|
|
165
|
+
}),
|
|
166
|
+
id: selectId,
|
|
167
|
+
children: [jsxs("span", {
|
|
168
|
+
className: styles.triggerValue,
|
|
169
|
+
children: [selectedLeftElement && jsx("span", {
|
|
170
|
+
className: styles.triggerLeftElement,
|
|
171
|
+
children: selectedLeftElement
|
|
172
|
+
}), shouldShowPlaceholderLeftElement && jsx("span", {
|
|
173
|
+
className: styles.triggerLeftElement,
|
|
174
|
+
children: placeholderLeftElement
|
|
175
|
+
}), jsx(SelectPrimitive.Value, {
|
|
176
|
+
placeholder: placeholder
|
|
177
|
+
})]
|
|
178
|
+
}), jsx(SelectPrimitive.Icon, {
|
|
179
|
+
className: styles.iconWrapper,
|
|
180
|
+
children: icon
|
|
181
|
+
})]
|
|
182
|
+
});
|
|
183
|
+
});
|
|
130
184
|
const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
131
185
|
const {
|
|
132
186
|
children,
|
|
@@ -164,23 +218,50 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
164
218
|
const {
|
|
165
219
|
text,
|
|
166
220
|
secondaryText,
|
|
221
|
+
leftElement,
|
|
167
222
|
...itemProps
|
|
168
223
|
} = props;
|
|
224
|
+
const {
|
|
225
|
+
registerLeftElement,
|
|
226
|
+
unregisterLeftElement
|
|
227
|
+
} = useSelectContext();
|
|
169
228
|
const onPointerLeave = useCallback(event => event.preventDefault(), []);
|
|
170
229
|
const onPointerMove = useCallback(event => event.preventDefault(), []);
|
|
230
|
+
const hasLeftElement = !!leftElement;
|
|
231
|
+
// Register/unregister leftElement with the context
|
|
232
|
+
// Using useLayoutEffect to ensure registration happens before paint
|
|
233
|
+
useLayoutEffect(() => {
|
|
234
|
+
if (itemProps.value && leftElement) {
|
|
235
|
+
registerLeftElement(itemProps.value, leftElement);
|
|
236
|
+
return () => {
|
|
237
|
+
unregisterLeftElement(itemProps.value);
|
|
238
|
+
};
|
|
239
|
+
}
|
|
240
|
+
return undefined;
|
|
241
|
+
}, [itemProps.value, leftElement, registerLeftElement, unregisterLeftElement]);
|
|
171
242
|
return jsxs(SelectPrimitive.Item, {
|
|
172
243
|
...itemProps,
|
|
173
244
|
ref: forwardedRef,
|
|
174
|
-
className: styles.option,
|
|
245
|
+
className: clsx(styles.option, {
|
|
246
|
+
[styles.hasLeftElement]: hasLeftElement
|
|
247
|
+
}),
|
|
175
248
|
onPointerLeave: onPointerLeave,
|
|
176
249
|
onPointerMove: onPointerMove,
|
|
177
|
-
children: [jsx(
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
250
|
+
children: [leftElement && jsx("span", {
|
|
251
|
+
className: styles.leftElement,
|
|
252
|
+
children: leftElement
|
|
253
|
+
}), jsxs("span", {
|
|
254
|
+
className: styles.textWrapper,
|
|
255
|
+
children: [jsx(SelectPrimitive.ItemText, {
|
|
256
|
+
children: text
|
|
257
|
+
}), !!secondaryText && jsx("span", {
|
|
258
|
+
className: styles.secondaryText,
|
|
259
|
+
children: secondaryText
|
|
260
|
+
})]
|
|
182
261
|
}), !itemProps.disabled && jsx(SelectPrimitive.ItemIndicator, {
|
|
183
|
-
className: styles.indicator,
|
|
262
|
+
className: clsx(styles.indicator, {
|
|
263
|
+
[styles.indicatorRight]: hasLeftElement
|
|
264
|
+
}),
|
|
184
265
|
children: jsx(Checkmark, {})
|
|
185
266
|
})]
|
|
186
267
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_select_module_container--
|
|
2
|
+
var styles = {"container":"bp_select_module_container--a74d6","label":"bp_select_module_label--a74d6","triggerBtn":"bp_select_module_triggerBtn--a74d6","disabled":"bp_select_module_disabled--a74d6","triggerValue":"bp_select_module_triggerValue--a74d6","triggerLeftElement":"bp_select_module_triggerLeftElement--a74d6","readonly":"bp_select_module_readonly--a74d6","error":"bp_select_module_error--a74d6","iconWrapper":"bp_select_module_iconWrapper--a74d6","iconCaret":"bp_select_module_iconCaret--a74d6","iconPencilCrossed":"bp_select_module_iconPencilCrossed--a74d6","content":"bp_select_module_content--a74d6","viewport":"bp_select_module_viewport--a74d6","option":"bp_select_module_option--a74d6","textWrapper":"bp_select_module_textWrapper--a74d6","secondaryText":"bp_select_module_secondaryText--a74d6","leftElement":"bp_select_module_leftElement--a74d6","hasLeftElement":"bp_select_module_hasLeftElement--a74d6","indicator":"bp_select_module_indicator--a74d6","indicatorRight":"bp_select_module_indicatorRight--a74d6","separator":"bp_select_module_separator--a74d6"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -69,6 +69,11 @@ export interface ExtraProps extends Labelable {
|
|
|
69
69
|
* The content of the error message.
|
|
70
70
|
*/
|
|
71
71
|
error?: React.ReactNode;
|
|
72
|
+
/**
|
|
73
|
+
* Optional element to display at the start of the trigger when placeholder is shown (e.g., an icon).
|
|
74
|
+
* Only displayed when no value is selected.
|
|
75
|
+
*/
|
|
76
|
+
placeholderLeftElement?: React.ReactNode;
|
|
72
77
|
}
|
|
73
78
|
type SelectState = {
|
|
74
79
|
disabled?: boolean;
|
|
@@ -129,5 +134,45 @@ export interface SelectOptionProps extends React.ComponentPropsWithRef<'div'> {
|
|
|
129
134
|
* The secondary text of the item. Displayed on the right side.
|
|
130
135
|
*/
|
|
131
136
|
secondaryText?: string;
|
|
137
|
+
/**
|
|
138
|
+
* Optional element to display at the start of the option (e.g., an icon).
|
|
139
|
+
* When provided, the checkmark indicator moves to the right side.
|
|
140
|
+
*/
|
|
141
|
+
leftElement?: React.ReactNode;
|
|
142
|
+
}
|
|
143
|
+
export interface SelectTriggerProps extends Omit<SelectProps, 'children' | 'error' | 'label' | 'subText'> {
|
|
144
|
+
/**
|
|
145
|
+
* The ID(s) of the element(s) that describe the trigger button.
|
|
146
|
+
*/
|
|
147
|
+
ariaDescribedBy: string;
|
|
148
|
+
/**
|
|
149
|
+
* When `true`, indicates the trigger is in an error state.
|
|
150
|
+
*/
|
|
151
|
+
hasError: boolean;
|
|
152
|
+
/**
|
|
153
|
+
* The icon element to display in the trigger (e.g., caret or chevron).
|
|
154
|
+
*/
|
|
155
|
+
icon: React.ReactNode;
|
|
156
|
+
/**
|
|
157
|
+
* The placeholder value displayed within the select trigger button when no value has been selected yet.
|
|
158
|
+
*/
|
|
159
|
+
placeholder: string | ReactElement;
|
|
160
|
+
/**
|
|
161
|
+
* When `true`, prevents the user from interacting with select but can be read by the user.
|
|
162
|
+
*/
|
|
163
|
+
readonly?: boolean;
|
|
164
|
+
/**
|
|
165
|
+
* The unique identifier for the select trigger button.
|
|
166
|
+
*/
|
|
167
|
+
selectId: string;
|
|
168
|
+
/**
|
|
169
|
+
* The current selected value of the select.
|
|
170
|
+
*/
|
|
171
|
+
value?: string;
|
|
172
|
+
/**
|
|
173
|
+
* Optional element to display at the start of the trigger when placeholder is shown (e.g., an icon).
|
|
174
|
+
* Only displayed when no value is selected.
|
|
175
|
+
*/
|
|
176
|
+
placeholderLeftElement?: React.ReactNode;
|
|
132
177
|
}
|
|
133
178
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"content":"bp_side_panel_module_content--
|
|
2
|
+
var styles = {"content":"bp_side_panel_module_content--677db","overlay":"bp_side_panel_module_overlay--677db","header":"bp_side_panel_module_header--677db","headerShadow":"bp_side_panel_module_headerShadow--677db","scrollableContainer":"bp_side_panel_module_scrollableContainer--677db","persistentContent":"bp_side_panel_module_persistentContent--677db","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--677db","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--677db","contentNormal":"bp_side_panel_module_contentNormal--677db","contentLarge":"bp_side_panel_module_contentLarge--677db","dropShadowContent":"bp_side_panel_module_dropShadowContent--677db","close":"bp_side_panel_module_close--677db","overlayContent":"bp_side_panel_module_overlayContent--677db","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--677db","footer":"bp_side_panel_module_footer--677db","footerShadow":"bp_side_panel_module_footerShadow--677db","footerButton":"bp_side_panel_module_footerButton--677db"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"option":"bp_switch_module_option--
|
|
2
|
+
var styles = {"option":"bp_switch_module_option--1eab8","label":"bp_switch_module_label--1eab8","rightAlign":"bp_switch_module_rightAlign--1eab8","switch":"bp_switch_module_switch--1eab8","description":"bp_switch_module_description--1eab8","thumb":"bp_switch_module_thumb--1eab8"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|