@box/blueprint-web 12.103.3 → 12.105.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/breadcrumb/breadcrumb.js +44 -5
- package/dist/lib-esm/breadcrumb/types.d.ts +2 -0
- 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 +1147 -1077
- 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/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 };
|
|
@@ -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 };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"textReset":"bp_text_module_textReset--
|
|
2
|
+
var styles = {"textReset":"bp_text_module_textReset--4cd89","breakWord":"bp_text_module_breakWord--4cd89","textOnLightDefault":"bp_text_module_textOnLightDefault--4cd89","textOnLightSecondary":"bp_text_module_textOnLightSecondary--4cd89","textOnLightLink":"bp_text_module_textOnLightLink--4cd89","textOnLightError":"bp_text_module_textOnLightError--4cd89","textOnDarkDefault":"bp_text_module_textOnDarkDefault--4cd89","titleMondo":"bp_text_module_titleMondo--4cd89","titleXLarge":"bp_text_module_titleXLarge--4cd89","titleLarge":"bp_text_module_titleLarge--4cd89","titleMedium":"bp_text_module_titleMedium--4cd89","titleSmall":"bp_text_module_titleSmall--4cd89","subtitle":"bp_text_module_subtitle--4cd89","bodyLargeBold":"bp_text_module_bodyLargeBold--4cd89","bodyLarge":"bp_text_module_bodyLarge--4cd89","bodyDefaultBold":"bp_text_module_bodyDefaultBold--4cd89","bodyDefaultSemibold":"bp_text_module_bodyDefaultSemibold--4cd89","bodyDefault":"bp_text_module_bodyDefault--4cd89","caption":"bp_text_module_caption--4cd89","labelBold":"bp_text_module_labelBold--4cd89","label":"bp_text_module_label--4cd89","bodySmallSemibold":"bp_text_module_bodySmallSemibold--4cd89","bodySmall":"bp_text_module_bodySmall--4cd89","captionBold":"bp_text_module_captionBold--4cd89","link":"bp_text_module_link--4cd89","notification":"bp_text_module_notification--4cd89"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textArea":"bp_text_area_autosize_module_textArea--
|
|
2
|
+
var styles = {"textArea":"bp_text_area_autosize_module_textArea--c6eef","error":"bp_text_area_autosize_module_error--c6eef","loading":"bp_text_area_autosize_module_loading--c6eef","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--c6eef","border":"bp_text_area_autosize_module_border--c6eef"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--
|
|
2
|
+
var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--43125","label":"bp_text_area_module_label--43125","hidden":"bp_text_area_module_hidden--43125","disabled":"bp_text_area_module_disabled--43125","inlineError":"bp_text_area_module_inlineError--43125"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"textButton":"bp_text_button_module_textButton--
|
|
2
|
+
var styles = {"textButton":"bp_text_button_module_textButton--3ca53","isFontInherited":"bp_text_button_module_isFontInherited--3ca53","isIconButton":"bp_text_button_module_isIconButton--3ca53","scaleLoader":"bp_text_button_module_scaleLoader--3ca53","icon":"bp_text_button_module_icon--3ca53","hideTextContent":"bp_text_button_module_hideTextContent--3ca53","visuallyHidden":"bp_text_button_module_visuallyHidden--3ca53"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"textInput":"bp_text_input_module_textInput--
|
|
2
|
+
var styles = {"textInput":"bp_text_input_module_textInput--8ac7f","loadingIndicatorReset":"bp_text_input_module_loadingIndicatorReset--8ac7f"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"timePicker":"bp_time_picker_module_timePicker--
|
|
2
|
+
var styles = {"timePicker":"bp_time_picker_module_timePicker--a88f9","label":"bp_time_picker_module_label--a88f9","group":"bp_time_picker_module_group--a88f9","disabled":"bp_time_picker_module_disabled--a88f9","error":"bp_time_picker_module_error--a88f9","timeInput":"bp_time_picker_module_timeInput--a88f9","timeInputSegment":"bp_time_picker_module_timeInputSegment--a88f9","clearButton":"bp_time_picker_module_clearButton--a88f9","clockIcon":"bp_time_picker_module_clockIcon--a88f9","inlineError":"bp_time_picker_module_inlineError--a88f9"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--
|
|
2
|
+
var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--2b14d","invertCaret":"bp_toolbar_module_invertCaret--2b14d","toolbarRoot":"bp_toolbar_module_toolbarRoot--2b14d","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--2b14d","toolbarItem":"bp_toolbar_module_toolbarItem--2b14d","toolbarButton":"bp_toolbar_module_toolbarButton--2b14d","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--2b14d","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--2b14d","toggleGroup":"bp_toolbar_module_toggleGroup--2b14d","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--2b14d","hidden":"bp_toolbar_module_hidden--2b14d","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--2b14d","separator":"bp_toolbar_module_separator--2b14d","toolbarToggle":"bp_toolbar_module_toolbarToggle--2b14d","toolbarIcon":"bp_toolbar_module_toolbarIcon--2b14d"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--
|
|
2
|
+
var styles = {"triggerButton":"bp_trigger_button_module_triggerButton--61dc0","secondary":"bp_trigger_button_module_secondary--61dc0","tertiary":"bp_trigger_button_module_tertiary--61dc0","extraSmall":"bp_trigger_button_module_extraSmall--61dc0","small":"bp_trigger_button_module_small--61dc0","large":"bp_trigger_button_module_large--61dc0","startIcon":"bp_trigger_button_module_startIcon--61dc0"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|