@box/blueprint-web 12.48.1 → 12.49.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.
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
4
5
|
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
5
6
|
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
6
7
|
import { ComboboxGroupCombobox } from './combobox-group-combobox.js';
|
|
@@ -21,6 +22,9 @@ const Root = /*#__PURE__*/forwardRef(({
|
|
|
21
22
|
isDisabled,
|
|
22
23
|
subcomponentId
|
|
23
24
|
} = useComboboxGroupContext();
|
|
25
|
+
const {
|
|
26
|
+
enableModernizedComponents
|
|
27
|
+
} = useBlueprintModernization();
|
|
24
28
|
const selectHasError = !!errors.select;
|
|
25
29
|
const comboboxHasError = !!errors.combobox;
|
|
26
30
|
const Label = useLabelable(label, subcomponentId);
|
|
@@ -30,6 +34,7 @@ const Root = /*#__PURE__*/forwardRef(({
|
|
|
30
34
|
className: clsx(styles.container, {
|
|
31
35
|
[styles.disabled]: isDisabled
|
|
32
36
|
}),
|
|
37
|
+
"data-modern": enableModernizedComponents,
|
|
33
38
|
children: [jsx(Label, {
|
|
34
39
|
className: styles.label,
|
|
35
40
|
hideLabel: hideLabel
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_combobox_group_module_container--
|
|
2
|
+
var styles = {"container":"bp_combobox_group_module_container--71411","trailing":"bp_combobox_group_module_trailing--71411","leading":"bp_combobox_group_module_leading--71411","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--71411","disabled":"bp_combobox_group_module_disabled--71411","label":"bp_combobox_group_module_label--71411","errorCombobox":"bp_combobox_group_module_errorCombobox--71411","errorSelect":"bp_combobox_group_module_errorSelect--71411","selectHasFocus":"bp_combobox_group_module_selectHasFocus--71411","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--71411"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -2579,26 +2579,60 @@
|
|
|
2579
2579
|
user-select:none;
|
|
2580
2580
|
}
|
|
2581
2581
|
|
|
2582
|
-
.bp_combobox_group_module_container--
|
|
2582
|
+
.bp_combobox_group_module_container--71411[data-modern=false]{
|
|
2583
|
+
--combobox-group-container-gap:var(--space-2);
|
|
2584
|
+
--combobox-group-container-max-width:358px;
|
|
2585
|
+
--combobox-group-disabled-opacity:60%;
|
|
2586
|
+
--combobox-group-label-color:var(--text-text-on-light);
|
|
2587
|
+
}
|
|
2588
|
+
.bp_combobox_group_module_container--71411[data-modern=false] .bp_combobox_group_module_trailing--71411{
|
|
2589
|
+
--blueprint-combobox-input-radius:0 var(--radius-2) var(--radius-2) 0;
|
|
2590
|
+
--blueprint-select-trigger-radius:0 var(--radius-2) var(--radius-2) 0;
|
|
2591
|
+
--blueprint-combobox-border-left-width:none;
|
|
2592
|
+
--blueprint-select-border-left-width:none;
|
|
2593
|
+
}
|
|
2594
|
+
.bp_combobox_group_module_container--71411[data-modern=false] .bp_combobox_group_module_leading--71411{
|
|
2595
|
+
--blueprint-combobox-input-radius:var(--radius-2) 0 0 var(--radius-2);
|
|
2596
|
+
--blueprint-select-trigger-radius:var(--radius-2) 0 0 var(--radius-2);
|
|
2597
|
+
}
|
|
2598
|
+
|
|
2599
|
+
.bp_combobox_group_module_container--71411[data-modern=true]{
|
|
2600
|
+
--combobox-group-container-gap:var(--bp-space-020);
|
|
2601
|
+
--combobox-group-container-max-width:358px;
|
|
2602
|
+
--combobox-group-disabled-opacity:60%;
|
|
2603
|
+
--combobox-group-label-color:var(--bp-text-text-on-light);
|
|
2604
|
+
}
|
|
2605
|
+
.bp_combobox_group_module_container--71411[data-modern=true] .bp_combobox_group_module_trailing--71411{
|
|
2606
|
+
--blueprint-combobox-input-radius:0 var(--bp-radius-06) var(--bp-radius-06) 0;
|
|
2607
|
+
--blueprint-select-trigger-radius:0 var(--bp-radius-06) var(--bp-radius-06) 0;
|
|
2608
|
+
--blueprint-combobox-border-left-width:none;
|
|
2609
|
+
--blueprint-select-border-left-width:none;
|
|
2610
|
+
}
|
|
2611
|
+
.bp_combobox_group_module_container--71411[data-modern=true] .bp_combobox_group_module_leading--71411{
|
|
2612
|
+
--blueprint-combobox-input-radius:var(--bp-radius-06) 0 0 var(--bp-radius-06);
|
|
2613
|
+
--blueprint-select-trigger-radius:var(--bp-radius-06) 0 0 var(--bp-radius-06);
|
|
2614
|
+
}
|
|
2615
|
+
|
|
2616
|
+
.bp_combobox_group_module_container--71411{
|
|
2583
2617
|
align-items:flex-start;
|
|
2584
2618
|
display:flex;
|
|
2585
2619
|
flex-direction:column;
|
|
2586
|
-
gap:var(--
|
|
2587
|
-
max-width:
|
|
2620
|
+
gap:var(--combobox-group-container-gap);
|
|
2621
|
+
max-width:var(--combobox-group-container-max-width);
|
|
2588
2622
|
}
|
|
2589
2623
|
|
|
2590
|
-
.bp_combobox_group_module_comboboxGroupcontainer--
|
|
2624
|
+
.bp_combobox_group_module_comboboxGroupcontainer--71411{
|
|
2591
2625
|
display:flex;
|
|
2592
2626
|
flex-direction:row;
|
|
2593
2627
|
}
|
|
2594
2628
|
|
|
2595
|
-
.bp_combobox_group_module_disabled--
|
|
2596
|
-
opacity:
|
|
2629
|
+
.bp_combobox_group_module_disabled--71411{
|
|
2630
|
+
opacity:var(--combobox-group-disabled-opacity);
|
|
2597
2631
|
pointer-events:none;
|
|
2598
2632
|
}
|
|
2599
2633
|
|
|
2600
|
-
.bp_combobox_group_module_label--
|
|
2601
|
-
color:var(--
|
|
2634
|
+
.bp_combobox_group_module_label--71411{
|
|
2635
|
+
color:var(--combobox-group-label-color);
|
|
2602
2636
|
flex:0 0 fit-content;
|
|
2603
2637
|
font-family:var(--body-default-bold-font-family);
|
|
2604
2638
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -2611,55 +2645,43 @@
|
|
|
2611
2645
|
text-transform:var(--body-default-bold-text-case);
|
|
2612
2646
|
}
|
|
2613
2647
|
|
|
2614
|
-
.
|
|
2615
|
-
--blueprint-combobox-input-radius:0 var(--radius-2) var(--radius-2) 0;
|
|
2616
|
-
--blueprint-select-trigger-radius:0 var(--radius-2) var(--radius-2) 0;
|
|
2617
|
-
--blueprint-combobox-border-left-width:none;
|
|
2618
|
-
--blueprint-select-border-left-width:none;
|
|
2619
|
-
}
|
|
2620
|
-
|
|
2621
|
-
.bp_combobox_group_module_leading--4fa0a{
|
|
2622
|
-
--blueprint-combobox-input-radius:var(--radius-2) 0 0 var(--radius-2);
|
|
2623
|
-
--blueprint-select-trigger-radius:var(--radius-2) 0 0 var(--radius-2);
|
|
2624
|
-
}
|
|
2625
|
-
|
|
2626
|
-
.bp_combobox_group_module_errorCombobox--4fa0a.bp_combobox_group_module_leading--4fa0a{
|
|
2648
|
+
.bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_leading--71411{
|
|
2627
2649
|
--blueprint-select-border-right-width:none;
|
|
2628
2650
|
}
|
|
2629
2651
|
|
|
2630
|
-
.bp_combobox_group_module_errorSelect--
|
|
2652
|
+
.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_leading--71411{
|
|
2631
2653
|
--blueprint-combobox-border-right-width:none;
|
|
2632
2654
|
}
|
|
2633
2655
|
|
|
2634
|
-
.bp_combobox_group_module_errorCombobox--
|
|
2656
|
+
.bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_trailing--71411{
|
|
2635
2657
|
--blueprint-select-border-error-left-width:none;
|
|
2636
2658
|
}
|
|
2637
2659
|
|
|
2638
|
-
.bp_combobox_group_module_errorCombobox--
|
|
2660
|
+
.bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_leading--71411{
|
|
2639
2661
|
--blueprint-select-border-error-right-width:none;
|
|
2640
2662
|
}
|
|
2641
2663
|
|
|
2642
|
-
.bp_combobox_group_module_selectHasFocus--
|
|
2664
|
+
.bp_combobox_group_module_selectHasFocus--71411.bp_combobox_group_module_leading--71411{
|
|
2643
2665
|
--blueprint-combobox-border-right-width:none;
|
|
2644
2666
|
}
|
|
2645
2667
|
|
|
2646
|
-
.bp_combobox_group_module_selectHasFocus--
|
|
2668
|
+
.bp_combobox_group_module_selectHasFocus--71411.bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_leading--71411{
|
|
2647
2669
|
--blueprint-combobox-border-error-right-width:none;
|
|
2648
2670
|
}
|
|
2649
2671
|
|
|
2650
|
-
.bp_combobox_group_module_selectHasFocus--
|
|
2672
|
+
.bp_combobox_group_module_selectHasFocus--71411.bp_combobox_group_module_errorCombobox--71411.bp_combobox_group_module_trailing--71411{
|
|
2651
2673
|
--blueprint-combobox-border-error-left-width:none;
|
|
2652
2674
|
}
|
|
2653
2675
|
|
|
2654
|
-
.bp_combobox_group_module_comboboxHasFocus--
|
|
2676
|
+
.bp_combobox_group_module_comboboxHasFocus--71411.bp_combobox_group_module_leading--71411{
|
|
2655
2677
|
--blueprint-select-border-right-width:none;
|
|
2656
2678
|
}
|
|
2657
2679
|
|
|
2658
|
-
.bp_combobox_group_module_comboboxHasFocus--
|
|
2680
|
+
.bp_combobox_group_module_comboboxHasFocus--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_leading--71411{
|
|
2659
2681
|
--blueprint-select-border-error-right-width:none;
|
|
2660
2682
|
}
|
|
2661
2683
|
|
|
2662
|
-
.bp_combobox_group_module_comboboxHasFocus--
|
|
2684
|
+
.bp_combobox_group_module_comboboxHasFocus--71411.bp_combobox_group_module_errorSelect--71411.bp_combobox_group_module_trailing--71411{
|
|
2663
2685
|
--blueprint-select-border-error-left-width:none;
|
|
2664
2686
|
}
|
|
2665
2687
|
|