@box/blueprint-web 11.9.0 → 11.10.1
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.js +12 -1
- package/dist/lib-esm/accordion/accordion.module.js +1 -1
- package/dist/lib-esm/accordion/types.d.ts +19 -5
- package/dist/lib-esm/guided-tooltip/guided-tooltip-footer.js +8 -4
- package/dist/lib-esm/guided-tooltip/guided-tooltip.js +11 -0
- package/dist/lib-esm/guided-tooltip/types.d.ts +4 -0
- package/dist/lib-esm/index.css +53 -51
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js +1 -1
- package/package.json +1 -1
|
@@ -67,12 +67,16 @@ const Item = props => {
|
|
|
67
67
|
// TODO: [DSYS-549] Refactor - spread props in a single place
|
|
68
68
|
const {
|
|
69
69
|
status,
|
|
70
|
+
statusIcon,
|
|
71
|
+
statusIconAriaLabel,
|
|
70
72
|
title,
|
|
71
73
|
disabled,
|
|
72
74
|
error,
|
|
73
75
|
errorIconAriaLabel,
|
|
74
76
|
...itemRest
|
|
75
77
|
} = props;
|
|
78
|
+
const hasStatusLabel = isDefined(status) && !isDefined(statusIcon);
|
|
79
|
+
const hasStatusIcon = !isDefined(status) && isDefined(statusIcon);
|
|
76
80
|
return jsxs(RadixAccordion.Item, {
|
|
77
81
|
...itemRest,
|
|
78
82
|
className: accordionItemClasses,
|
|
@@ -87,10 +91,17 @@ const Item = props => {
|
|
|
87
91
|
children: title
|
|
88
92
|
}), jsxs("div", {
|
|
89
93
|
className: styles.accordionHeaderTrigger,
|
|
90
|
-
children: [
|
|
94
|
+
children: [hasStatusLabel && jsx(Status, {
|
|
91
95
|
className: styles.accordionStatus,
|
|
92
96
|
color: error ? statusColors.error : statusColors.default,
|
|
93
97
|
text: `${status}`
|
|
98
|
+
}), hasStatusIcon && jsx(Status, {
|
|
99
|
+
"aria-label": statusIconAriaLabel,
|
|
100
|
+
className: styles.accordionIconStatus,
|
|
101
|
+
color: error ? statusColors.error : statusColors.default,
|
|
102
|
+
hideText: true,
|
|
103
|
+
icon: statusIcon,
|
|
104
|
+
text: statusIconAriaLabel ?? ''
|
|
94
105
|
}), jsx(PointerChevron, {
|
|
95
106
|
"aria-hidden": "true",
|
|
96
107
|
className: styles.accordionTriggerIcon
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"accordionContent":"bp_accordion_module_accordionContent--
|
|
2
|
+
var styles = {"accordionContent":"bp_accordion_module_accordionContent--a6dfe","slideDown":"bp_accordion_module_slideDown--a6dfe","slideUp":"bp_accordion_module_slideUp--a6dfe","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--a6dfe","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--a6dfe","accordionItem":"bp_accordion_module_accordionItem--a6dfe","accordionFixedContent":"bp_accordion_module_accordionFixedContent--a6dfe","accordionHeader":"bp_accordion_module_accordionHeader--a6dfe","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--a6dfe","accordionStatus":"bp_accordion_module_accordionStatus--a6dfe","accordionIconStatus":"bp_accordion_module_accordionIconStatus--a6dfe","accordionTrigger":"bp_accordion_module_accordionTrigger--a6dfe","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--a6dfe"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type AccordionMultipleProps, type AccordionSingleProps, type AccordionItemProps as RadixAccordionItemProps } from '@radix-ui/react-accordion';
|
|
2
|
+
import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
|
|
2
3
|
import { type RequireAllOrNone } from 'type-fest';
|
|
3
4
|
interface Loading {
|
|
4
5
|
/** Loading state of the section. Loading sections are displaying a placeholder. When this is true `loadingAriaLabel` must also be provided. */
|
|
@@ -16,6 +17,23 @@ interface Errorable {
|
|
|
16
17
|
*/
|
|
17
18
|
errorIconAriaLabel?: string;
|
|
18
19
|
}
|
|
20
|
+
interface StatusIconProps {
|
|
21
|
+
/**
|
|
22
|
+
* Icon displayed in a status pill next to the title
|
|
23
|
+
* */
|
|
24
|
+
statusIcon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
|
|
25
|
+
/**
|
|
26
|
+
* Description of icon displayed in a status pill next to the title
|
|
27
|
+
* */
|
|
28
|
+
statusIconAriaLabel: string;
|
|
29
|
+
}
|
|
30
|
+
type StatusProps = {
|
|
31
|
+
status: number;
|
|
32
|
+
statusIcon?: never;
|
|
33
|
+
statusIconAriaLabel?: never;
|
|
34
|
+
} | ({
|
|
35
|
+
status?: never;
|
|
36
|
+
} & RequireAllOrNone<StatusIconProps, keyof StatusIconProps>);
|
|
19
37
|
export type AccordionBaseItem = {
|
|
20
38
|
/**
|
|
21
39
|
* Content of the accordion item that is displayed when the section is expanded
|
|
@@ -33,15 +51,11 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
|
|
|
33
51
|
* Header text displayed
|
|
34
52
|
*/
|
|
35
53
|
title: string;
|
|
36
|
-
/**
|
|
37
|
-
* Number displayed in a status pill next to the title
|
|
38
|
-
* */
|
|
39
|
-
status?: number;
|
|
40
54
|
/**
|
|
41
55
|
* Disabled state of the section.
|
|
42
56
|
*/
|
|
43
57
|
disabled?: boolean;
|
|
44
|
-
};
|
|
58
|
+
} & StatusProps;
|
|
45
59
|
export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
|
|
46
60
|
export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
|
|
47
61
|
export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;
|
|
@@ -6,11 +6,15 @@ import { getUniqueId } from '../utils/useUniqueId.js';
|
|
|
6
6
|
import styles from './guided-tooltip.module.js';
|
|
7
7
|
import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
|
|
8
8
|
|
|
9
|
-
const PrimaryAction = /*#__PURE__*/forwardRef((
|
|
10
|
-
|
|
9
|
+
const PrimaryAction = /*#__PURE__*/forwardRef(({
|
|
10
|
+
autoFocus = true,
|
|
11
|
+
className,
|
|
12
|
+
...rest
|
|
13
|
+
}, forwardedRef) => jsx(Button, {
|
|
14
|
+
...rest,
|
|
11
15
|
ref: forwardedRef,
|
|
12
|
-
autoFocus:
|
|
13
|
-
className: clsx(styles.primaryAction,
|
|
16
|
+
autoFocus: autoFocus,
|
|
17
|
+
className: clsx(styles.primaryAction, className)
|
|
14
18
|
}));
|
|
15
19
|
const SecondaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(Button, {
|
|
16
20
|
...props,
|
|
@@ -5,6 +5,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
|
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { forwardRef, useCallback, useState, useMemo } from 'react';
|
|
7
7
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
8
|
+
import { focusRadioGroupFirstIfExists } from '../primitives/popover/popover-focus-utils.js';
|
|
8
9
|
import { GuidedTooltipBody, GuidedTooltipText } from './guided-tooltip-body.js';
|
|
9
10
|
import { GuidedTooltipFooter } from './guided-tooltip-footer.js';
|
|
10
11
|
import { GuidedTooltipIcon } from './guided-tooltip-icon.js';
|
|
@@ -21,6 +22,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
|
|
|
21
22
|
closeLabel,
|
|
22
23
|
content,
|
|
23
24
|
closeDataResinTarget = 'dismiss',
|
|
25
|
+
onOpenAutoFocus,
|
|
24
26
|
side = 'bottom',
|
|
25
27
|
sideOffset = OFFSET_FROM_ANCHOR_IN_PX,
|
|
26
28
|
...rest
|
|
@@ -46,6 +48,14 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
|
|
|
46
48
|
* It also needs to consist of an id of the "steps indicator" element if it's present
|
|
47
49
|
*/
|
|
48
50
|
const ariaLabelledbyAttr = clsx(titleId || bodyId, stepsIndicatorId);
|
|
51
|
+
// Workaround for: https://github.com/radix-ui/primitives/issues/1910
|
|
52
|
+
const handleOpenAutoFocus = useCallback(e => {
|
|
53
|
+
onOpenAutoFocus?.(e);
|
|
54
|
+
if (e.defaultPrevented) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
focusRadioGroupFirstIfExists(e);
|
|
58
|
+
}, [onOpenAutoFocus]);
|
|
49
59
|
return jsx(GuidedTooltipContext.Provider, {
|
|
50
60
|
value: contextProviderValue,
|
|
51
61
|
children: jsxs(RadixPopover.Content, {
|
|
@@ -56,6 +66,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
|
|
|
56
66
|
arrowPadding: ARROW_PADDING_IN_PX,
|
|
57
67
|
className: clsx(styles.content, className),
|
|
58
68
|
onInteractOutside: onInteractOutside,
|
|
69
|
+
onOpenAutoFocus: handleOpenAutoFocus,
|
|
59
70
|
side: side,
|
|
60
71
|
sideOffset: sideOffset,
|
|
61
72
|
children: [content, jsx(RadixPopover.Close, {
|
|
@@ -15,6 +15,10 @@ export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTM
|
|
|
15
15
|
* "data-resin-target" to be passed to Close button.
|
|
16
16
|
*/
|
|
17
17
|
closeDataResinTarget?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Optional callback triggered when the GuidedTooltip is about to receive focus after opening
|
|
20
|
+
*/
|
|
21
|
+
onOpenAutoFocus?: RadixPopover.PopoverContentProps['onOpenAutoFocus'];
|
|
18
22
|
/** The preferred side of the anchor to render against. Will be reversed when collisions occur.
|
|
19
23
|
* "top" | "right" | "bottom" | "left"
|
|
20
24
|
* Default value: "bottom". */
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -522,19 +522,19 @@
|
|
|
522
522
|
background-color:#92e0c0;
|
|
523
523
|
}
|
|
524
524
|
|
|
525
|
-
.bp_accordion_module_accordionContent--
|
|
526
|
-
animation:bp_accordion_module_slideDown--
|
|
525
|
+
.bp_accordion_module_accordionContent--a6dfe[data-state=open]{
|
|
526
|
+
animation:bp_accordion_module_slideDown--a6dfe .15s ease-out;
|
|
527
527
|
}
|
|
528
528
|
|
|
529
|
-
.bp_accordion_module_accordionContent--
|
|
530
|
-
animation:bp_accordion_module_slideUp--
|
|
529
|
+
.bp_accordion_module_accordionContent--a6dfe[data-state=closed]{
|
|
530
|
+
animation:bp_accordion_module_slideUp--a6dfe .15s ease-out;
|
|
531
531
|
}
|
|
532
532
|
|
|
533
|
-
.bp_accordion_module_accordionContent--
|
|
533
|
+
.bp_accordion_module_accordionContent--a6dfe{
|
|
534
534
|
overflow:hidden;
|
|
535
535
|
}
|
|
536
536
|
|
|
537
|
-
@keyframes bp_accordion_module_slideDown--
|
|
537
|
+
@keyframes bp_accordion_module_slideDown--a6dfe{
|
|
538
538
|
from{
|
|
539
539
|
height:0;
|
|
540
540
|
}
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
height:var(--radix-accordion-content-height);
|
|
543
543
|
}
|
|
544
544
|
}
|
|
545
|
-
@keyframes bp_accordion_module_slideUp--
|
|
545
|
+
@keyframes bp_accordion_module_slideUp--a6dfe{
|
|
546
546
|
from{
|
|
547
547
|
height:var(--radix-accordion-content-height);
|
|
548
548
|
}
|
|
@@ -550,7 +550,7 @@
|
|
|
550
550
|
height:0;
|
|
551
551
|
}
|
|
552
552
|
}
|
|
553
|
-
.bp_accordion_module_accordionContentWrapper--
|
|
553
|
+
.bp_accordion_module_accordionContentWrapper--a6dfe{
|
|
554
554
|
display:flex;
|
|
555
555
|
flex-direction:column;
|
|
556
556
|
gap:var(--space-4);
|
|
@@ -559,20 +559,20 @@
|
|
|
559
559
|
padding-inline:var(--space-4);
|
|
560
560
|
}
|
|
561
561
|
|
|
562
|
-
.bp_accordion_module_accordionInlineErrorWrapper--
|
|
562
|
+
.bp_accordion_module_accordionInlineErrorWrapper--a6dfe{
|
|
563
563
|
padding-block-start:var(--space-4);
|
|
564
564
|
padding-inline:var(--space-4);
|
|
565
565
|
}
|
|
566
566
|
|
|
567
|
-
.bp_accordion_module_accordionItem--
|
|
567
|
+
.bp_accordion_module_accordionItem--a6dfe{
|
|
568
568
|
border-bottom:var(--border-1) solid var(--border-divider-border);
|
|
569
569
|
min-width:320px;
|
|
570
570
|
}
|
|
571
|
-
.bp_accordion_module_accordionItem--
|
|
571
|
+
.bp_accordion_module_accordionItem--a6dfe,.bp_accordion_module_accordionItem--a6dfe > [data-state=open]{
|
|
572
572
|
background-color:var(--surface-accordion-surface);
|
|
573
573
|
}
|
|
574
574
|
|
|
575
|
-
.bp_accordion_module_accordionFixedContent--
|
|
575
|
+
.bp_accordion_module_accordionFixedContent--a6dfe{
|
|
576
576
|
background-color:var(--surface-surface);
|
|
577
577
|
display:flex;
|
|
578
578
|
flex-direction:column;
|
|
@@ -581,7 +581,7 @@
|
|
|
581
581
|
padding-inline:var(--space-4);
|
|
582
582
|
}
|
|
583
583
|
|
|
584
|
-
.bp_accordion_module_accordionHeader--
|
|
584
|
+
.bp_accordion_module_accordionHeader--a6dfe{
|
|
585
585
|
color:var(--text-text-on-light);
|
|
586
586
|
display:flex;
|
|
587
587
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
@@ -597,16 +597,19 @@
|
|
|
597
597
|
width:100%;
|
|
598
598
|
}
|
|
599
599
|
|
|
600
|
-
.bp_accordion_module_accordionHeaderTrigger--
|
|
600
|
+
.bp_accordion_module_accordionHeaderTrigger--a6dfe{
|
|
601
601
|
align-items:center;
|
|
602
602
|
display:flex;
|
|
603
603
|
}
|
|
604
604
|
|
|
605
|
-
.bp_accordion_module_accordionStatus--
|
|
605
|
+
.bp_accordion_module_accordionIconStatus--a6dfe,.bp_accordion_module_accordionStatus--a6dfe{
|
|
606
606
|
margin-inline-start:var(--space-2);
|
|
607
607
|
}
|
|
608
|
+
.bp_accordion_module_accordionIconStatus--a6dfe > span{
|
|
609
|
+
padding:0 var(--space-1);
|
|
610
|
+
}
|
|
608
611
|
|
|
609
|
-
.bp_accordion_module_accordionTrigger--
|
|
612
|
+
.bp_accordion_module_accordionTrigger--a6dfe{
|
|
610
613
|
align-items:center;
|
|
611
614
|
background-color:var(--surface-surface);
|
|
612
615
|
border:none;
|
|
@@ -617,31 +620,31 @@
|
|
|
617
620
|
text-transform:capitalize;
|
|
618
621
|
width:100%;
|
|
619
622
|
}
|
|
620
|
-
.bp_accordion_module_accordionTrigger--
|
|
623
|
+
.bp_accordion_module_accordionTrigger--a6dfe:active{
|
|
621
624
|
background-color:var(--surface-surface);
|
|
622
625
|
}
|
|
623
|
-
.bp_accordion_module_accordionTrigger--
|
|
626
|
+
.bp_accordion_module_accordionTrigger--a6dfe:hover{
|
|
624
627
|
background-color:var(--surface-accordion-surface-hover);
|
|
625
628
|
cursor:pointer;
|
|
626
629
|
}
|
|
627
|
-
.bp_accordion_module_accordionTrigger--
|
|
630
|
+
.bp_accordion_module_accordionTrigger--a6dfe:focus-visible{
|
|
628
631
|
background-color:var(--surface-surface-hover);
|
|
629
632
|
box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
630
633
|
outline:none;
|
|
631
634
|
}
|
|
632
|
-
.bp_accordion_module_accordionTrigger--
|
|
635
|
+
.bp_accordion_module_accordionTrigger--a6dfe:disabled{
|
|
633
636
|
cursor:default;
|
|
634
637
|
opacity:.3;
|
|
635
638
|
}
|
|
636
|
-
.bp_accordion_module_accordionTrigger--
|
|
639
|
+
.bp_accordion_module_accordionTrigger--a6dfe:disabled:hover{
|
|
637
640
|
background-color:var(--gray-white);
|
|
638
641
|
}
|
|
639
|
-
.bp_accordion_module_accordionTrigger--
|
|
642
|
+
.bp_accordion_module_accordionTrigger--a6dfe .bp_accordion_module_accordionTriggerIcon--a6dfe{
|
|
640
643
|
color:var(--gray-50);
|
|
641
644
|
flex-shrink:0;
|
|
642
645
|
margin-inline-start:var(--space-3);
|
|
643
646
|
}
|
|
644
|
-
.bp_accordion_module_accordionTrigger--
|
|
647
|
+
.bp_accordion_module_accordionTrigger--a6dfe[data-state=open] .bp_accordion_module_accordionTriggerIcon--a6dfe{
|
|
645
648
|
transform:rotate(180deg);
|
|
646
649
|
}
|
|
647
650
|
|
|
@@ -2740,7 +2743,7 @@
|
|
|
2740
2743
|
transform:translateZ(0);
|
|
2741
2744
|
}
|
|
2742
2745
|
|
|
2743
|
-
.bp_dropdown_menu_module_content--
|
|
2746
|
+
.bp_dropdown_menu_module_content--0ec8b{
|
|
2744
2747
|
background-color:var(--surface-menu-surface);
|
|
2745
2748
|
border:var(--border-1) solid var(--border-card-border);
|
|
2746
2749
|
border-radius:var(--radius-3);
|
|
@@ -2761,7 +2764,7 @@
|
|
|
2761
2764
|
text-transform:none;
|
|
2762
2765
|
z-index:2147483647;
|
|
2763
2766
|
}
|
|
2764
|
-
.bp_dropdown_menu_module_content--
|
|
2767
|
+
.bp_dropdown_menu_module_content--0ec8b[data-menu-fullscreen=true]{
|
|
2765
2768
|
border:unset;
|
|
2766
2769
|
border-radius:unset;
|
|
2767
2770
|
display:flex;
|
|
@@ -2774,24 +2777,27 @@
|
|
|
2774
2777
|
position:relative;
|
|
2775
2778
|
width:100vw;
|
|
2776
2779
|
}
|
|
2777
|
-
.bp_dropdown_menu_module_content--
|
|
2780
|
+
.bp_dropdown_menu_module_content--0ec8b[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--0ec8b{
|
|
2778
2781
|
overflow-y:auto;
|
|
2779
2782
|
padding:var(--space-3);
|
|
2780
2783
|
}
|
|
2781
|
-
.bp_dropdown_menu_module_content--
|
|
2784
|
+
.bp_dropdown_menu_module_content--0ec8b .bp_dropdown_menu_module_subheader--0ec8b{
|
|
2782
2785
|
padding:var(--space-2);
|
|
2783
2786
|
}
|
|
2784
|
-
.bp_dropdown_menu_module_content--
|
|
2787
|
+
.bp_dropdown_menu_module_content--0ec8b .bp_dropdown_menu_module_subheader--0ec8b.bp_dropdown_menu_module_uppercased--0ec8b{
|
|
2785
2788
|
text-transform:uppercase;
|
|
2786
2789
|
}
|
|
2790
|
+
.bp_dropdown_menu_module_content--0ec8b .bp_dropdown_menu_module_dropdownMenuItemSeparator--0ec8b{
|
|
2791
|
+
margin-block:var(--space-2);
|
|
2792
|
+
}
|
|
2787
2793
|
|
|
2788
|
-
.bp_dropdown_menu_module_ellipsis--
|
|
2794
|
+
.bp_dropdown_menu_module_ellipsis--0ec8b{
|
|
2789
2795
|
overflow:hidden;
|
|
2790
2796
|
text-overflow:ellipsis;
|
|
2791
2797
|
white-space:nowrap;
|
|
2792
2798
|
}
|
|
2793
2799
|
|
|
2794
|
-
.bp_dropdown_menu_module_checkmark--
|
|
2800
|
+
.bp_dropdown_menu_module_checkmark--0ec8b{
|
|
2795
2801
|
align-items:center;
|
|
2796
2802
|
display:inline-flex;
|
|
2797
2803
|
justify-content:center;
|
|
@@ -2799,7 +2805,7 @@
|
|
|
2799
2805
|
position:absolute;
|
|
2800
2806
|
}
|
|
2801
2807
|
|
|
2802
|
-
.bp_dropdown_menu_module_item--
|
|
2808
|
+
.bp_dropdown_menu_module_item--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b{
|
|
2803
2809
|
align-items:center;
|
|
2804
2810
|
border:var(--border-2) solid #0000;
|
|
2805
2811
|
border-radius:var(--radius-3);
|
|
@@ -2811,34 +2817,34 @@
|
|
|
2811
2817
|
-webkit-user-select:none;
|
|
2812
2818
|
user-select:none;
|
|
2813
2819
|
}
|
|
2814
|
-
.bp_dropdown_menu_module_item--
|
|
2820
|
+
.bp_dropdown_menu_module_item--0ec8b[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--0ec8b[data-disabled]{
|
|
2815
2821
|
opacity:60%;
|
|
2816
2822
|
pointer-events:none;
|
|
2817
2823
|
}
|
|
2818
|
-
.bp_dropdown_menu_module_item--
|
|
2824
|
+
.bp_dropdown_menu_module_item--0ec8b[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--0ec8b[data-highlighted]{
|
|
2819
2825
|
background-color:var(--surface-menu-surface-hover);
|
|
2820
2826
|
border:var(--border-2) solid var(--outline-focus-on-light);
|
|
2821
2827
|
}
|
|
2822
|
-
.bp_dropdown_menu_module_item--
|
|
2828
|
+
.bp_dropdown_menu_module_item--0ec8b:active,.bp_dropdown_menu_module_subMenuTrigger--0ec8b:active{
|
|
2823
2829
|
background-color:var(--surface-menu-surface-hover);
|
|
2824
2830
|
border:var(--border-2) solid #0000;
|
|
2825
2831
|
}
|
|
2826
|
-
.bp_dropdown_menu_module_item--
|
|
2832
|
+
.bp_dropdown_menu_module_item--0ec8b:hover,.bp_dropdown_menu_module_item--0ec8b[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--0ec8b:hover,.bp_dropdown_menu_module_subMenuTrigger--0ec8b[data-state=open]{
|
|
2827
2833
|
background-color:var(--surface-menu-surface-hover);
|
|
2828
2834
|
}
|
|
2829
|
-
.bp_dropdown_menu_module_item--
|
|
2835
|
+
.bp_dropdown_menu_module_item--0ec8b.bp_dropdown_menu_module_radioItem--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b.bp_dropdown_menu_module_radioItem--0ec8b{
|
|
2830
2836
|
padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
|
|
2831
2837
|
}
|
|
2832
|
-
.bp_dropdown_menu_module_item--
|
|
2838
|
+
.bp_dropdown_menu_module_item--0ec8b.bp_dropdown_menu_module_radioItem--0ec8b .bp_dropdown_menu_module_radioItemMediumSpacing--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b.bp_dropdown_menu_module_radioItem--0ec8b .bp_dropdown_menu_module_radioItemMediumSpacing--0ec8b{
|
|
2833
2839
|
padding-inline-start:var(--space-2);
|
|
2834
2840
|
}
|
|
2835
|
-
.bp_dropdown_menu_module_item--
|
|
2841
|
+
.bp_dropdown_menu_module_item--0ec8b.bp_dropdown_menu_module_checkboxItem--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b.bp_dropdown_menu_module_checkboxItem--0ec8b{
|
|
2836
2842
|
padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
|
|
2837
2843
|
}
|
|
2838
|
-
.bp_dropdown_menu_module_item--
|
|
2844
|
+
.bp_dropdown_menu_module_item--0ec8b.bp_dropdown_menu_module_checkboxItem--0ec8b .bp_dropdown_menu_module_checkboxItemMediumSpacing--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b.bp_dropdown_menu_module_checkboxItem--0ec8b .bp_dropdown_menu_module_checkboxItemMediumSpacing--0ec8b{
|
|
2839
2845
|
padding-inline-start:var(--space-2);
|
|
2840
2846
|
}
|
|
2841
|
-
.bp_dropdown_menu_module_item--
|
|
2847
|
+
.bp_dropdown_menu_module_item--0ec8b .bp_dropdown_menu_module_mediumItemLayout--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b .bp_dropdown_menu_module_mediumItemLayout--0ec8b{
|
|
2842
2848
|
align-items:center;
|
|
2843
2849
|
display:flex;
|
|
2844
2850
|
gap:var(--space-2);
|
|
@@ -2846,24 +2852,20 @@
|
|
|
2846
2852
|
overflow:hidden;
|
|
2847
2853
|
width:100%;
|
|
2848
2854
|
}
|
|
2849
|
-
.bp_dropdown_menu_module_item--
|
|
2855
|
+
.bp_dropdown_menu_module_item--0ec8b .bp_dropdown_menu_module_startElement--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b .bp_dropdown_menu_module_startElement--0ec8b{
|
|
2850
2856
|
align-items:center;
|
|
2851
2857
|
display:flex;
|
|
2852
2858
|
}
|
|
2853
|
-
.bp_dropdown_menu_module_item--
|
|
2859
|
+
.bp_dropdown_menu_module_item--0ec8b .bp_dropdown_menu_module_menuItemMainContent--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b .bp_dropdown_menu_module_menuItemMainContent--0ec8b{
|
|
2854
2860
|
flex-grow:1;
|
|
2855
2861
|
}
|
|
2856
|
-
.bp_dropdown_menu_module_item--
|
|
2862
|
+
.bp_dropdown_menu_module_item--0ec8b .bp_dropdown_menu_module_endElement--0ec8b,.bp_dropdown_menu_module_subMenuTrigger--0ec8b .bp_dropdown_menu_module_endElement--0ec8b{
|
|
2857
2863
|
align-items:center;
|
|
2858
2864
|
color:var(--text-text-on-light-secondary);
|
|
2859
2865
|
display:flex;
|
|
2860
2866
|
}
|
|
2861
2867
|
|
|
2862
|
-
.
|
|
2863
|
-
margin-block:var(--space-2);
|
|
2864
|
-
}
|
|
2865
|
-
|
|
2866
|
-
.bp_dropdown_menu_module_menuHeader--87356{
|
|
2868
|
+
.bp_dropdown_menu_module_menuHeader--0ec8b{
|
|
2867
2869
|
align-items:center;
|
|
2868
2870
|
box-shadow:var(--dropshadow-1);
|
|
2869
2871
|
display:grid;
|
|
@@ -2873,15 +2875,15 @@
|
|
|
2873
2875
|
padding:var(--space-3);
|
|
2874
2876
|
}
|
|
2875
2877
|
|
|
2876
|
-
.bp_dropdown_menu_module_headerTextContent--
|
|
2878
|
+
.bp_dropdown_menu_module_headerTextContent--0ec8b{
|
|
2877
2879
|
display:grid;
|
|
2878
2880
|
}
|
|
2879
2881
|
|
|
2880
|
-
.bp_dropdown_menu_module_submenuCloseButton--
|
|
2882
|
+
.bp_dropdown_menu_module_submenuCloseButton--0ec8b{
|
|
2881
2883
|
grid-area:submenu-close;
|
|
2882
2884
|
}
|
|
2883
2885
|
|
|
2884
|
-
.bp_dropdown_menu_module_menuCloseButton--
|
|
2886
|
+
.bp_dropdown_menu_module_menuCloseButton--0ec8b{
|
|
2885
2887
|
grid-area:close;
|
|
2886
2888
|
}
|
|
2887
2889
|
|
|
@@ -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--0ec8b","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--0ec8b","subheader":"bp_dropdown_menu_module_subheader--0ec8b","uppercased":"bp_dropdown_menu_module_uppercased--0ec8b","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--0ec8b","ellipsis":"bp_dropdown_menu_module_ellipsis--0ec8b","checkmark":"bp_dropdown_menu_module_checkmark--0ec8b","item":"bp_dropdown_menu_module_item--0ec8b","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--0ec8b","radioItem":"bp_dropdown_menu_module_radioItem--0ec8b","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--0ec8b","checkboxItem":"bp_dropdown_menu_module_checkboxItem--0ec8b","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--0ec8b","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--0ec8b","startElement":"bp_dropdown_menu_module_startElement--0ec8b","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--0ec8b","endElement":"bp_dropdown_menu_module_endElement--0ec8b","menuHeader":"bp_dropdown_menu_module_menuHeader--0ec8b","headerTextContent":"bp_dropdown_menu_module_headerTextContent--0ec8b","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--0ec8b","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--0ec8b"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|