@box/blueprint-web 14.40.0 → 14.41.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/combobox/combobox.js +32 -8
- package/dist/lib-esm/combobox/combobox.module.js +1 -1
- package/dist/lib-esm/combobox/types.d.ts +9 -0
- package/dist/lib-esm/index.css +94 -70
- package/dist/lib-esm/primitives/base-text-input/base-text-input.js +29 -3
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/dist/lib-esm/primitives/base-text-input/types.d.ts +8 -0
- package/dist/lib-esm/text-input/text-input.d.ts +2 -0
- package/package.json +3 -3
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
|
|
3
3
|
import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
|
|
4
|
-
import { Checkmark, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
|
|
5
|
-
import { XMark } from '@box/blueprint-web-assets/icons/Medium';
|
|
6
|
-
import { bpIconIconOnLight, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
|
|
4
|
+
import { Checkmark, AlertBadge, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
|
|
5
|
+
import { AlertCircle, XMark } from '@box/blueprint-web-assets/icons/Medium';
|
|
6
|
+
import { bpIconIconOnLight, IconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
|
|
9
9
|
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
10
|
+
import { Focusable } from '../focusable/focusable.js';
|
|
10
11
|
import { InputChip } from '../input-chip/input-chip.js';
|
|
11
12
|
import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
|
|
12
13
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
13
14
|
import { InlineError } from '../primitives/inline-error/inline-error.js';
|
|
14
15
|
import { TextArea } from '../text-area/text-area.js';
|
|
16
|
+
import { Tooltip } from '../tooltip/tooltip.js';
|
|
15
17
|
import { useLabelable } from '../util-components/labelable/useLabelable.js';
|
|
18
|
+
import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
|
|
16
19
|
import { composeEventHandlers } from '../utils/composeEventHandlers.js';
|
|
17
20
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
18
21
|
import { useUniqueId } from '../utils/useUniqueId.js';
|
|
@@ -46,6 +49,7 @@ const RootInner = ({
|
|
|
46
49
|
className,
|
|
47
50
|
popoverClassName,
|
|
48
51
|
error,
|
|
52
|
+
errorVariant = 'default',
|
|
49
53
|
hideLabel = false,
|
|
50
54
|
label,
|
|
51
55
|
defaultOpen = false,
|
|
@@ -335,6 +339,8 @@ const RootInner = ({
|
|
|
335
339
|
const showChipsGroup = Array.isArray(selectedValue) && selectedValue.length > 0;
|
|
336
340
|
const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
|
|
337
341
|
const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
|
|
342
|
+
const showInlineError = errorVariant === 'inline' && hasError;
|
|
343
|
+
const InlineErrorIcon = enableModernizedComponents ? AlertCircle : AlertBadge;
|
|
338
344
|
const Label = useLabelable(label, comboboxId, required);
|
|
339
345
|
const inlineErrorId = useUniqueId('inline-error-');
|
|
340
346
|
const ariaDescribedBy = clsx(rest['aria-describedby'], {
|
|
@@ -361,7 +367,8 @@ const RootInner = ({
|
|
|
361
367
|
className: clsx(styles.comboboxContainer, {
|
|
362
368
|
[styles.error]: hasError,
|
|
363
369
|
[styles.withChips]: showChipsGroup || showSingleSelectChip,
|
|
364
|
-
[styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon)
|
|
370
|
+
[styles.withComboboxButtons]: showComboboxCancelButton || Boolean(endComboboxIcon) || showInlineError,
|
|
371
|
+
[styles.withInlineErrorAndEndButton]: showInlineError && (showComboboxCancelButton || Boolean(endComboboxIcon))
|
|
365
372
|
}),
|
|
366
373
|
onClick: handleFocusInputOnEvent,
|
|
367
374
|
"data-testid": "combobox-container",
|
|
@@ -402,9 +409,26 @@ const RootInner = ({
|
|
|
402
409
|
onKeyDown: handleKeyDown,
|
|
403
410
|
required: required,
|
|
404
411
|
store: comboboxStore
|
|
405
|
-
}),
|
|
412
|
+
}), jsxs("div", {
|
|
406
413
|
className: styles.comboboxButtons,
|
|
407
|
-
children:
|
|
414
|
+
children: [showInlineError && jsxs(Fragment, {
|
|
415
|
+
children: [jsx(Tooltip, {
|
|
416
|
+
content: error,
|
|
417
|
+
side: "top",
|
|
418
|
+
variant: "error",
|
|
419
|
+
children: jsx(Focusable, {
|
|
420
|
+
"aria-labelledby": inlineErrorId,
|
|
421
|
+
children: jsx(InlineErrorIcon, {
|
|
422
|
+
className: styles.inlineErrorIcon,
|
|
423
|
+
color: IconIconErrorOnLight,
|
|
424
|
+
"data-testid": enableModernizedComponents ? 'combobox-inline-error-icon-modern' : 'combobox-inline-error-icon-legacy'
|
|
425
|
+
})
|
|
426
|
+
})
|
|
427
|
+
}), jsx(VisuallyHidden, {
|
|
428
|
+
id: inlineErrorId,
|
|
429
|
+
children: error
|
|
430
|
+
})]
|
|
431
|
+
}), showComboboxCancelButton ? jsx(ComboboxCancel, {
|
|
408
432
|
onClick: resetSelectedValue,
|
|
409
433
|
// eslint-disable-next-line react/jsx-no-bind
|
|
410
434
|
render: cancelProps => jsx(IconButton, {
|
|
@@ -414,12 +438,12 @@ const RootInner = ({
|
|
|
414
438
|
size: "x-small"
|
|
415
439
|
}),
|
|
416
440
|
store: comboboxStore
|
|
417
|
-
}) : endComboboxIcon
|
|
441
|
+
}) : endComboboxIcon]
|
|
418
442
|
})]
|
|
419
443
|
})]
|
|
420
444
|
})
|
|
421
445
|
})
|
|
422
|
-
}), jsx(InlineError, {
|
|
446
|
+
}), errorVariant === 'default' && jsx(InlineError, {
|
|
423
447
|
className: styles.inlineError,
|
|
424
448
|
id: inlineErrorId,
|
|
425
449
|
children: error
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_combobox_module_container--
|
|
2
|
+
var styles = {"container":"bp_combobox_module_container--61e5e","label":"bp_combobox_module_label--61e5e","textInput":"bp_combobox_module_textInput--61e5e","popover":"bp_combobox_module_popover--61e5e","disabled":"bp_combobox_module_disabled--61e5e","hiddenLabel":"bp_combobox_module_hiddenLabel--61e5e","comboboxContainer":"bp_combobox_module_comboboxContainer--61e5e","comboboxContainerInner":"bp_combobox_module_comboboxContainerInner--61e5e","withChips":"bp_combobox_module_withChips--61e5e","error":"bp_combobox_module_error--61e5e","withComboboxButtons":"bp_combobox_module_withComboboxButtons--61e5e","withInlineErrorAndEndButton":"bp_combobox_module_withInlineErrorAndEndButton--61e5e","textInputWrapper":"bp_combobox_module_textInputWrapper--61e5e","comboboxButtons":"bp_combobox_module_comboboxButtons--61e5e","inlineErrorIcon":"bp_combobox_module_inlineErrorIcon--61e5e","inlineError":"bp_combobox_module_inlineError--61e5e","popoverInner":"bp_combobox_module_popoverInner--61e5e","option":"bp_combobox_module_option--61e5e","indicator":"bp_combobox_module_indicator--61e5e","indicatorIcon":"bp_combobox_module_indicatorIcon--61e5e","optionWithIndicator":"bp_combobox_module_optionWithIndicator--61e5e","loadingIndicator":"bp_combobox_module_loadingIndicator--61e5e"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -2,6 +2,7 @@ import { type ComboboxProps as AriakitComboboxProps, type ComboboxPopoverProps }
|
|
|
2
2
|
import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
|
|
3
3
|
import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
|
|
4
4
|
import { type InputChipProps } from '../input-chip/types';
|
|
5
|
+
import { type ErrorVariant } from '../primitives/base-text-input/types';
|
|
5
6
|
import { type TextAreaProps } from '../text-area/types';
|
|
6
7
|
import { type Labelable } from '../util-components/labelable/types';
|
|
7
8
|
export type OptionValue = {
|
|
@@ -178,6 +179,14 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
|
|
|
178
179
|
* The content of the error message
|
|
179
180
|
*/
|
|
180
181
|
error?: React.ReactNode;
|
|
182
|
+
/**
|
|
183
|
+
* How the error message is displayed.
|
|
184
|
+
* - `default`: renders an inline error message below the combobox.
|
|
185
|
+
* - `inline`: renders an always-visible error icon inside the combobox; the error message shows in a tooltip on hover/focus of the icon.
|
|
186
|
+
*
|
|
187
|
+
* @default 'default'
|
|
188
|
+
*/
|
|
189
|
+
errorVariant?: ErrorVariant;
|
|
181
190
|
/**
|
|
182
191
|
* The DOM element where the Combobox should be portal-ed into. If not provided, the Combobox will be appended to the document body.
|
|
183
192
|
*/
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -4806,7 +4806,7 @@
|
|
|
4806
4806
|
.bp_text_area_module_textAreaContainer--62c43 .bp_text_area_module_inlineError--62c43{
|
|
4807
4807
|
margin-block-start:var(--text-area-container-row-gap);
|
|
4808
4808
|
}
|
|
4809
|
-
.bp_combobox_module_container--
|
|
4809
|
+
.bp_combobox_module_container--61e5e[data-modern=false]{
|
|
4810
4810
|
--max-lines:3;
|
|
4811
4811
|
--input-height:var(--space-5);
|
|
4812
4812
|
--chip-height:var(--space-7);
|
|
@@ -4859,7 +4859,11 @@
|
|
|
4859
4859
|
--combobox-text-input-background-color:#0000;
|
|
4860
4860
|
--combobox-error-icon-fill:var(--icon-icon-error-on-light);
|
|
4861
4861
|
--combobox-inline-error-margin-block-start:var(--space-2);
|
|
4862
|
+
--combobox-inline-error-icon-width:var(--size-5);
|
|
4863
|
+
--combobox-inline-error-icon-height:var(--size-5);
|
|
4862
4864
|
--combobox-button-spacing:var(--space-2);
|
|
4865
|
+
--combobox-buttons-gap:var(--space-1);
|
|
4866
|
+
--combobox-container-padding-inline-end-with-inline-error-and-buttons:calc(var(--combobox-container-padding-inline-end-with-buttons) + var(--combobox-inline-error-icon-width) + var(--combobox-buttons-gap));
|
|
4863
4867
|
font-family:var(--body-default-font-family);
|
|
4864
4868
|
font-size:var(--body-default-font-size);
|
|
4865
4869
|
font-weight:var(--body-default-font-weight);
|
|
@@ -4868,7 +4872,7 @@
|
|
|
4868
4872
|
text-decoration:var(--body-default-text-decoration);
|
|
4869
4873
|
text-transform:var(--body-default-text-case);
|
|
4870
4874
|
}
|
|
4871
|
-
.bp_combobox_module_container--
|
|
4875
|
+
.bp_combobox_module_container--61e5e[data-modern=false] .bp_combobox_module_label--61e5e{
|
|
4872
4876
|
font-family:var(--body-default-bold-font-family);
|
|
4873
4877
|
font-size:var(--body-default-bold-font-size);
|
|
4874
4878
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -4877,7 +4881,7 @@
|
|
|
4877
4881
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
4878
4882
|
text-transform:var(--body-default-bold-text-case);
|
|
4879
4883
|
}
|
|
4880
|
-
.bp_combobox_module_container--
|
|
4884
|
+
.bp_combobox_module_container--61e5e[data-modern=false] .bp_combobox_module_textInput--61e5e{
|
|
4881
4885
|
font-family:var(--body-default-font-family);
|
|
4882
4886
|
font-size:var(--body-default-font-size);
|
|
4883
4887
|
font-weight:var(--body-default-font-weight);
|
|
@@ -4887,7 +4891,7 @@
|
|
|
4887
4891
|
text-transform:var(--body-default-text-case);
|
|
4888
4892
|
}
|
|
4889
4893
|
|
|
4890
|
-
.bp_combobox_module_container--
|
|
4894
|
+
.bp_combobox_module_container--61e5e[data-modern=true]{
|
|
4891
4895
|
--max-lines:3;
|
|
4892
4896
|
--bp-innershadow-01:var(--innershadow-1);
|
|
4893
4897
|
--bp-input-height:var(--bp-space-050);
|
|
@@ -4946,20 +4950,24 @@
|
|
|
4946
4950
|
--combobox-text-input-background-color:#0000;
|
|
4947
4951
|
--combobox-error-icon-fill:var(--bp-icon-icon-error-on-light);
|
|
4948
4952
|
--combobox-inline-error-margin-block-start:var(--bp-space-020);
|
|
4953
|
+
--combobox-inline-error-icon-width:var(--bp-size-050);
|
|
4954
|
+
--combobox-inline-error-icon-height:var(--bp-size-050);
|
|
4949
4955
|
--combobox-button-spacing:var(--bp-space-020);
|
|
4956
|
+
--combobox-buttons-gap:var(--bp-space-010);
|
|
4957
|
+
--combobox-container-padding-inline-end-with-inline-error-and-buttons:calc(var(--combobox-container-padding-inline-end-with-buttons) + var(--combobox-inline-error-icon-width) + var(--combobox-buttons-gap));
|
|
4950
4958
|
font-weight:var(--bp-font-weight-regular);
|
|
4951
4959
|
}
|
|
4952
|
-
.bp_combobox_module_container--
|
|
4960
|
+
.bp_combobox_module_container--61e5e[data-modern=true],.bp_combobox_module_container--61e5e[data-modern=true] .bp_combobox_module_label--61e5e{
|
|
4953
4961
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4954
4962
|
font-size:var(--bp-font-size-05);
|
|
4955
4963
|
font-style:normal;
|
|
4956
4964
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
4957
4965
|
line-height:var(--bp-font-line-height-04);
|
|
4958
4966
|
}
|
|
4959
|
-
.bp_combobox_module_container--
|
|
4967
|
+
.bp_combobox_module_container--61e5e[data-modern=true] .bp_combobox_module_label--61e5e{
|
|
4960
4968
|
font-weight:var(--bp-font-weight-bold);
|
|
4961
4969
|
}
|
|
4962
|
-
.bp_combobox_module_container--
|
|
4970
|
+
.bp_combobox_module_container--61e5e[data-modern=true] .bp_combobox_module_textInput--61e5e{
|
|
4963
4971
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4964
4972
|
font-size:var(--bp-font-size-05);
|
|
4965
4973
|
font-style:normal;
|
|
@@ -4968,7 +4976,7 @@
|
|
|
4968
4976
|
line-height:var(--bp-font-line-height-04);
|
|
4969
4977
|
}
|
|
4970
4978
|
|
|
4971
|
-
.bp_combobox_module_popover--
|
|
4979
|
+
.bp_combobox_module_popover--61e5e[data-modern=false]{
|
|
4972
4980
|
--option-height:2.25rem;
|
|
4973
4981
|
--dropdown-max-height:12.5rem;
|
|
4974
4982
|
--combobox-popover-max-height:min(
|
|
@@ -5009,7 +5017,7 @@
|
|
|
5009
5017
|
text-transform:var(--body-default-text-case);
|
|
5010
5018
|
}
|
|
5011
5019
|
|
|
5012
|
-
.bp_combobox_module_popover--
|
|
5020
|
+
.bp_combobox_module_popover--61e5e[data-modern=true]{
|
|
5013
5021
|
--option-height:2.25rem;
|
|
5014
5022
|
--dropdown-max-height:12.5rem;
|
|
5015
5023
|
--bp-dropshadow-03:var(--dropshadow-3);
|
|
@@ -5050,22 +5058,22 @@
|
|
|
5050
5058
|
line-height:var(--bp-font-line-height-04);
|
|
5051
5059
|
}
|
|
5052
5060
|
|
|
5053
|
-
.bp_combobox_module_container--
|
|
5061
|
+
.bp_combobox_module_container--61e5e{
|
|
5054
5062
|
display:flex;
|
|
5055
5063
|
flex-direction:column;
|
|
5056
5064
|
}
|
|
5057
|
-
.bp_combobox_module_container--
|
|
5065
|
+
.bp_combobox_module_container--61e5e.bp_combobox_module_disabled--61e5e{
|
|
5058
5066
|
opacity:60%;
|
|
5059
5067
|
}
|
|
5060
|
-
.bp_combobox_module_container--
|
|
5068
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_label--61e5e{
|
|
5061
5069
|
color:var(--combobox-label-color);
|
|
5062
5070
|
flex:0 0 fit-content;
|
|
5063
5071
|
overflow-wrap:break-word;
|
|
5064
5072
|
}
|
|
5065
|
-
.bp_combobox_module_container--
|
|
5073
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_label--61e5e:not(.bp_combobox_module_hiddenLabel--61e5e){
|
|
5066
5074
|
margin-block-end:var(--combobox-label-margin-block-end);
|
|
5067
5075
|
}
|
|
5068
|
-
.bp_combobox_module_container--
|
|
5076
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e{
|
|
5069
5077
|
background-color:var(--combobox-container-background-color);
|
|
5070
5078
|
border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color);
|
|
5071
5079
|
border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color);
|
|
@@ -5077,7 +5085,7 @@
|
|
|
5077
5085
|
overflow:hidden;
|
|
5078
5086
|
position:relative;
|
|
5079
5087
|
}
|
|
5080
|
-
.bp_combobox_module_container--
|
|
5088
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5081
5089
|
display:flex;
|
|
5082
5090
|
flex-wrap:wrap;
|
|
5083
5091
|
gap:var(--combobox-container-contents-gap);
|
|
@@ -5085,49 +5093,52 @@
|
|
|
5085
5093
|
padding-block:var(--combobox-container-padding-block);
|
|
5086
5094
|
padding-inline:var(--combobox-container-padding-inline);
|
|
5087
5095
|
}
|
|
5088
|
-
.bp_combobox_module_container--
|
|
5096
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e.bp_combobox_module_withChips--61e5e .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5089
5097
|
max-height:var(--combobox-container-with-chips-max-height);
|
|
5090
5098
|
padding-block:var(--combobox-container-with-chips-padding-block);
|
|
5091
5099
|
}
|
|
5092
|
-
.bp_combobox_module_container--
|
|
5100
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e.bp_combobox_module_withChips--61e5e:not(:disabled).bp_combobox_module_error--61e5e .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5093
5101
|
padding-block:var(--combobox-container-with-chips-error-padding-block);
|
|
5094
5102
|
}
|
|
5095
|
-
.bp_combobox_module_container--
|
|
5103
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e.bp_combobox_module_withChips--61e5e:not(:disabled):has(input:focus) .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5096
5104
|
padding-block:var(--combobox-container-with-chips-focus-padding-block);
|
|
5097
5105
|
}
|
|
5098
|
-
.bp_combobox_module_container--
|
|
5106
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e.bp_combobox_module_withComboboxButtons--61e5e .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5099
5107
|
padding-inline-end:var(--combobox-container-padding-inline-end-with-buttons);
|
|
5100
5108
|
}
|
|
5101
|
-
.bp_combobox_module_container--
|
|
5109
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e.bp_combobox_module_withComboboxButtons--61e5e.bp_combobox_module_withInlineErrorAndEndButton--61e5e .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5110
|
+
padding-inline-end:var(--combobox-container-padding-inline-end-with-inline-error-and-buttons);
|
|
5111
|
+
}
|
|
5112
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e:not(:disabled):has(input:focus){
|
|
5102
5113
|
background-color:var(--combobox-container-focus-background-color);
|
|
5103
5114
|
border:var(--combobox-container-focus-border);
|
|
5104
5115
|
}
|
|
5105
|
-
.bp_combobox_module_container--
|
|
5116
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e:not(:disabled):has(input:focus) .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5106
5117
|
padding-block:var(--combobox-container-focus-padding-block);
|
|
5107
5118
|
}
|
|
5108
|
-
.bp_combobox_module_container--
|
|
5119
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e:not(:disabled).bp_combobox_module_error--61e5e,.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e:not(:disabled):has([aria-invalid=true]){
|
|
5109
5120
|
background-color:var(--combobox-container-error-background-color);
|
|
5110
5121
|
border-bottom:var(--combobox-container-error-border-bottom-width) solid var(--combobox-container-error-border-color);
|
|
5111
5122
|
border-left:var(--combobox-container-error-border-left-width) solid var(--combobox-container-error-border-color);
|
|
5112
5123
|
border-right:var(--combobox-container-error-border-right-width) solid var(--combobox-container-error-border-color);
|
|
5113
5124
|
border-top:var(--combobox-container-error-border-top-width) solid var(--combobox-container-error-border-color);
|
|
5114
5125
|
}
|
|
5115
|
-
.bp_combobox_module_container--
|
|
5126
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e:not(:disabled).bp_combobox_module_error--61e5e .bp_combobox_module_comboboxContainerInner--61e5e,.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e:not(:disabled):has([aria-invalid=true]) .bp_combobox_module_comboboxContainerInner--61e5e{
|
|
5116
5127
|
padding-block:var(--combobox-container-error-padding-block);
|
|
5117
5128
|
}
|
|
5118
|
-
.bp_combobox_module_container--
|
|
5129
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e:not(:disabled, :has(input:focus)):has(input:hover):not(.bp_combobox_module_error--61e5e, :has([aria-invalid=true])){
|
|
5119
5130
|
border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color-hover);
|
|
5120
5131
|
border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color-hover);
|
|
5121
5132
|
border-right:var(--combobox-container-border-right-width) solid var(--combobox-container-border-color-hover);
|
|
5122
5133
|
border-top:var(--combobox-container-border-top-width) solid var(--combobox-container-border-color-hover);
|
|
5123
5134
|
}
|
|
5124
|
-
.bp_combobox_module_container--
|
|
5135
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e .bp_combobox_module_textInputWrapper--61e5e{
|
|
5125
5136
|
align-items:center;
|
|
5126
5137
|
display:flex;
|
|
5127
5138
|
flex:content;
|
|
5128
5139
|
gap:var(--combobox-text-input-wrapper-gap);
|
|
5129
5140
|
}
|
|
5130
|
-
.bp_combobox_module_container--
|
|
5141
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e .bp_combobox_module_textInputWrapper--61e5e .bp_combobox_module_textInput--61e5e{
|
|
5131
5142
|
background-color:var(--combobox-text-input-background-color);
|
|
5132
5143
|
border:none;
|
|
5133
5144
|
color:var(--combobox-text-input-color);
|
|
@@ -5136,21 +5147,26 @@
|
|
|
5136
5147
|
padding:0;
|
|
5137
5148
|
width:100%;
|
|
5138
5149
|
}
|
|
5139
|
-
.bp_combobox_module_container--
|
|
5150
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e .bp_combobox_module_textInputWrapper--61e5e .bp_combobox_module_errorIcon--61e5e path{
|
|
5140
5151
|
fill:var(--combobox-error-icon-fill);
|
|
5141
5152
|
}
|
|
5142
|
-
.bp_combobox_module_container--
|
|
5153
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e .bp_combobox_module_textInputWrapper--61e5e .bp_combobox_module_comboboxButtons--61e5e{
|
|
5143
5154
|
align-items:center;
|
|
5144
5155
|
display:flex;
|
|
5156
|
+
gap:var(--combobox-buttons-gap);
|
|
5145
5157
|
position:absolute;
|
|
5146
5158
|
right:var(--combobox-button-spacing);
|
|
5147
5159
|
top:var(--combobox-button-spacing);
|
|
5148
5160
|
}
|
|
5149
|
-
.bp_combobox_module_container--
|
|
5161
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_comboboxContainer--61e5e .bp_combobox_module_textInputWrapper--61e5e .bp_combobox_module_inlineErrorIcon--61e5e{
|
|
5162
|
+
height:var(--combobox-inline-error-icon-height);
|
|
5163
|
+
width:var(--combobox-inline-error-icon-width);
|
|
5164
|
+
}
|
|
5165
|
+
.bp_combobox_module_container--61e5e .bp_combobox_module_inlineError--61e5e{
|
|
5150
5166
|
margin-block-start:var(--combobox-inline-error-margin-block-start);
|
|
5151
5167
|
}
|
|
5152
5168
|
|
|
5153
|
-
.bp_combobox_module_popover--
|
|
5169
|
+
.bp_combobox_module_popover--61e5e{
|
|
5154
5170
|
backdrop-filter:var(--combobox-popover-backdrop-filter);
|
|
5155
5171
|
background-color:var(--combobox-popover-background-color);
|
|
5156
5172
|
border:var(--combobox-popover-border);
|
|
@@ -5159,13 +5175,13 @@
|
|
|
5159
5175
|
overflow:hidden;
|
|
5160
5176
|
z-index:var(--z-index-popover);
|
|
5161
5177
|
}
|
|
5162
|
-
.bp_combobox_module_popover--
|
|
5178
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_popoverInner--61e5e{
|
|
5163
5179
|
max-height:var(--combobox-popover-max-height);
|
|
5164
5180
|
overflow:auto;
|
|
5165
5181
|
padding-block:var(--combobox-popover-padding-block);
|
|
5166
5182
|
padding-inline:var(--combobox-popover-padding-inline);
|
|
5167
5183
|
}
|
|
5168
|
-
.bp_combobox_module_popover--
|
|
5184
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_option--61e5e{
|
|
5169
5185
|
border:var(--combobox-option-border);
|
|
5170
5186
|
border-radius:var(--combobox-option-border-radius);
|
|
5171
5187
|
box-sizing:border-box;
|
|
@@ -5180,21 +5196,21 @@
|
|
|
5180
5196
|
user-select:none;
|
|
5181
5197
|
width:100%;
|
|
5182
5198
|
}
|
|
5183
|
-
.bp_combobox_module_popover--
|
|
5199
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_option--61e5e[aria-disabled]{
|
|
5184
5200
|
opacity:var(--combobox-option-disabled-opacity);
|
|
5185
5201
|
}
|
|
5186
|
-
.bp_combobox_module_popover--
|
|
5202
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_option--61e5e[data-active-item]:not([aria-disabled]){
|
|
5187
5203
|
background-color:var(--combobox-option-active-background-color);
|
|
5188
5204
|
border:var(--combobox-option-active-border);
|
|
5189
5205
|
}
|
|
5190
|
-
.bp_combobox_module_popover--
|
|
5206
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_option--61e5e:active{
|
|
5191
5207
|
background-color:var(--combobox-option-hover-background-color);
|
|
5192
5208
|
border:var(--combobox-option-border);
|
|
5193
5209
|
}
|
|
5194
|
-
.bp_combobox_module_popover--
|
|
5210
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_option--61e5e:hover{
|
|
5195
5211
|
background-color:var(--combobox-option-hover-background-color);
|
|
5196
5212
|
}
|
|
5197
|
-
.bp_combobox_module_popover--
|
|
5213
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_option--61e5e .bp_combobox_module_indicator--61e5e{
|
|
5198
5214
|
align-items:center;
|
|
5199
5215
|
display:flex;
|
|
5200
5216
|
height:var(--combobox-option-indicator-height);
|
|
@@ -5203,16 +5219,16 @@
|
|
|
5203
5219
|
position:absolute;
|
|
5204
5220
|
top:var(--combobox-option-indicator-top);
|
|
5205
5221
|
}
|
|
5206
|
-
.bp_combobox_module_popover--
|
|
5222
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_option--61e5e .bp_combobox_module_indicator--61e5e .bp_combobox_module_indicatorIcon--61e5e path{
|
|
5207
5223
|
fill:var(--combobox-option-indicator-icon-fill);
|
|
5208
5224
|
}
|
|
5209
|
-
.bp_combobox_module_popover--
|
|
5225
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_optionWithIndicator--61e5e{
|
|
5210
5226
|
padding-inline:var(--combobox-option-with-indicator-padding-inline);
|
|
5211
5227
|
}
|
|
5212
|
-
.bp_combobox_module_popover--
|
|
5228
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_loadingIndicator--61e5e{
|
|
5213
5229
|
position:var(--combobox-loading-indicator-position);
|
|
5214
5230
|
}
|
|
5215
|
-
.bp_combobox_module_popover--
|
|
5231
|
+
.bp_combobox_module_popover--61e5e .bp_combobox_module_noResultOption--61e5e{
|
|
5216
5232
|
color:var(--combobox-no-result-option-color);
|
|
5217
5233
|
-webkit-user-select:none;
|
|
5218
5234
|
user-select:none;
|
|
@@ -9594,7 +9610,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9594
9610
|
.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:active,.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:hover{
|
|
9595
9611
|
background:none;
|
|
9596
9612
|
}
|
|
9597
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9613
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false]{
|
|
9598
9614
|
--text-input-border-width:var(--border-1);
|
|
9599
9615
|
--text-input-border-width-focused:var(--border-2);
|
|
9600
9616
|
--text-input-border-width-error:var(--border-2);
|
|
@@ -9603,6 +9619,8 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9603
9619
|
--text-input-padding-inline-focused:calc(var(--text-input-padding-inline) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
9604
9620
|
--text-input-padding-inline-error:calc(var(--text-input-padding-inline) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
9605
9621
|
--text-input-inline-error-subtext-block-margin:var(--space-2);
|
|
9622
|
+
--text-input-inline-error-icon-width:var(--size-5);
|
|
9623
|
+
--text-input-inline-error-icon-height:var(--size-5);
|
|
9606
9624
|
--text-input-row-gap:var(--space-2);
|
|
9607
9625
|
--text-input-label-color:var(--text-text-on-light);
|
|
9608
9626
|
--text-input-color:var(--text-text-on-light);
|
|
@@ -9631,7 +9649,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9631
9649
|
text-decoration:var(--body-default-text-decoration);
|
|
9632
9650
|
text-transform:var(--body-default-text-case);
|
|
9633
9651
|
}
|
|
9634
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9652
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_label--8494e{
|
|
9635
9653
|
font-family:var(--body-default-bold-font-family);
|
|
9636
9654
|
font-size:var(--body-default-bold-font-size);
|
|
9637
9655
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -9640,7 +9658,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9640
9658
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
9641
9659
|
text-transform:var(--body-default-bold-text-case);
|
|
9642
9660
|
}
|
|
9643
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9661
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false] .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e{
|
|
9644
9662
|
font-family:var(--body-default-font-family);
|
|
9645
9663
|
font-size:var(--body-default-font-size);
|
|
9646
9664
|
font-weight:var(--body-default-font-weight);
|
|
@@ -9650,7 +9668,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9650
9668
|
text-transform:var(--body-default-text-case);
|
|
9651
9669
|
}
|
|
9652
9670
|
|
|
9653
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9671
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true]{
|
|
9654
9672
|
--text-input-border-width:var(--bp-border-01);
|
|
9655
9673
|
--text-input-border-width-focused:var(--bp-border-02);
|
|
9656
9674
|
--text-input-border-width-error:var(--bp-border-02);
|
|
@@ -9659,6 +9677,8 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9659
9677
|
--text-input-padding-inline-focused:calc(var(--text-input-padding-inline) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
9660
9678
|
--text-input-padding-inline-error:calc(var(--text-input-padding-inline) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
9661
9679
|
--text-input-inline-error-subtext-block-margin:var(--bp-space-020);
|
|
9680
|
+
--text-input-inline-error-icon-width:var(--bp-size-050);
|
|
9681
|
+
--text-input-inline-error-icon-height:var(--bp-size-050);
|
|
9662
9682
|
--text-input-row-gap:var(--bp-space-020);
|
|
9663
9683
|
--text-input-label-color:var(--bp-text-text-on-light);
|
|
9664
9684
|
--text-input-color:var(--bp-text-text-on-light);
|
|
@@ -9682,17 +9702,17 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9682
9702
|
--text-input-hover-border-color:var(--bp-border-input-border-hover);
|
|
9683
9703
|
font-weight:var(--bp-font-weight-regular);
|
|
9684
9704
|
}
|
|
9685
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9705
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true],.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_label--8494e{
|
|
9686
9706
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
9687
9707
|
font-size:var(--bp-font-size-05);
|
|
9688
9708
|
font-style:normal;
|
|
9689
9709
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
9690
9710
|
line-height:var(--bp-font-line-height-04);
|
|
9691
9711
|
}
|
|
9692
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9712
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_label--8494e{
|
|
9693
9713
|
font-weight:var(--bp-font-weight-bold);
|
|
9694
9714
|
}
|
|
9695
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9715
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=true] .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e{
|
|
9696
9716
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
9697
9717
|
font-size:var(--bp-font-size-05);
|
|
9698
9718
|
font-style:normal;
|
|
@@ -9701,25 +9721,25 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9701
9721
|
line-height:var(--bp-font-line-height-04);
|
|
9702
9722
|
}
|
|
9703
9723
|
|
|
9704
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9724
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e{
|
|
9705
9725
|
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
9706
9726
|
display:flex;
|
|
9707
9727
|
flex-direction:column;
|
|
9708
9728
|
}
|
|
9709
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9729
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_label--8494e{
|
|
9710
9730
|
color:var(--text-input-label-color);
|
|
9711
9731
|
flex:0 0 fit-content;
|
|
9712
9732
|
width:fit-content;
|
|
9713
9733
|
}
|
|
9714
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9734
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_label--8494e:not(.bp_base_text_input_module_hidden--8494e){
|
|
9715
9735
|
margin-block-end:var(--text-input-row-gap);
|
|
9716
9736
|
}
|
|
9717
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9737
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e{
|
|
9718
9738
|
display:flex;
|
|
9719
9739
|
height:var(--size-10);
|
|
9720
9740
|
position:relative;
|
|
9721
9741
|
}
|
|
9722
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9742
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e{
|
|
9723
9743
|
background:var(--text-input-background);
|
|
9724
9744
|
border:var(--text-input-border-width) solid var(--text-input-border-color);
|
|
9725
9745
|
border-radius:var(--text-input-border-radius);
|
|
@@ -9731,77 +9751,81 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9731
9751
|
padding-inline:var(--text-input-padding-inline);
|
|
9732
9752
|
width:100%;
|
|
9733
9753
|
}
|
|
9734
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9754
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:hover{
|
|
9735
9755
|
box-shadow:var(--text-input-box-shadow);
|
|
9736
9756
|
}
|
|
9737
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9757
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e::placeholder,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e::placeholder,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e::placeholder{
|
|
9738
9758
|
color:var(--text-input-placeholder-color);
|
|
9739
9759
|
opacity:1;
|
|
9740
9760
|
}
|
|
9741
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9761
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e{
|
|
9742
9762
|
background:var(--text-input-error-background);
|
|
9743
9763
|
border:var(--text-input-border-width-error) solid var(--text-input-error-border-color);
|
|
9744
9764
|
outline:0;
|
|
9745
9765
|
padding-inline-start:var(--text-input-padding-inline-error);
|
|
9746
9766
|
}
|
|
9747
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9767
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e{
|
|
9748
9768
|
background-color:var(--text-input-read-only-background);
|
|
9749
9769
|
border-color:var(--text-input-read-only-border-color);
|
|
9750
9770
|
box-shadow:var(--text-input-box-shadow);
|
|
9751
9771
|
color:var(--text-input-read-only-color);
|
|
9752
9772
|
cursor:default;
|
|
9753
9773
|
}
|
|
9754
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9774
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_readOnly--8494e:focus-visible{
|
|
9755
9775
|
border:var(--text-input-border-width-focused) solid var(--text-input-border-color-focus);
|
|
9756
9776
|
}
|
|
9757
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9777
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:disabled,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:disabled,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:disabled{
|
|
9758
9778
|
background:var(--text-input-disabled-background);
|
|
9759
9779
|
border-color:var(--text-input-disabled-border-color);
|
|
9760
9780
|
box-shadow:var(--text-input-box-shadow);
|
|
9761
9781
|
color:var(--text-input-disabled-color);
|
|
9762
9782
|
}
|
|
9763
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9783
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:disabled:hover{
|
|
9764
9784
|
border-color:var(--text-input-border-color);
|
|
9765
9785
|
}
|
|
9766
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9786
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:focus-visible{
|
|
9767
9787
|
background:var(--text-input-focused-background);
|
|
9768
9788
|
border:var(--text-input-border-width-focused) solid var(--text-input-focused-border-color);
|
|
9769
9789
|
outline:0;
|
|
9770
9790
|
padding-inline-start:var(--text-input-padding-inline-focused);
|
|
9771
9791
|
}
|
|
9772
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9792
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:has(+ .bp_base_text_input_module_endIcon--8494e),.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:has(+ .bp_base_text_input_module_endIcon--8494e),.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:has(+ .bp_base_text_input_module_endIcon--8494e){
|
|
9773
9793
|
padding-inline-end:calc(var(--text-input-padding-inline) + var(--end-icon-width) + var(--text-input-icon-padding));
|
|
9774
9794
|
}
|
|
9775
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9795
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_textInput--8494e:not(:disabled, :focus-visible, .bp_base_text_input_module_error--8494e):hover, .bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=number].bp_base_text_input_module_textInput--8494e:not(:disabled, :focus-visible, .bp_base_text_input_module_error--8494e):hover, .bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e input[type=text].bp_base_text_input_module_textInput--8494e:not(:disabled, :focus-visible, .bp_base_text_input_module_error--8494e):hover{
|
|
9776
9796
|
background:var(--text-input-hover-background);
|
|
9777
9797
|
border:var(--border-1) solid var(--text-input-hover-border-color);
|
|
9778
9798
|
}
|
|
9779
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9799
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e{
|
|
9780
9800
|
left:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
|
|
9781
9801
|
position:absolute;
|
|
9782
9802
|
top:50%;
|
|
9783
9803
|
transform:translateY(-50%);
|
|
9784
9804
|
}
|
|
9785
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9805
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e + input.bp_base_text_input_module_textInput--8494e{
|
|
9786
9806
|
--text-input-start-icon-space:calc(var(--text-input-icon-padding) + var(--start-icon-width));
|
|
9787
9807
|
padding-inline-start:calc(var(--text-input-padding-inline) + var(--text-input-start-icon-space));
|
|
9788
9808
|
}
|
|
9789
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9809
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e + input.bp_base_text_input_module_textInput--8494e:focus-visible{
|
|
9790
9810
|
padding-inline-start:calc(var(--text-input-padding-inline-focused) + var(--text-input-start-icon-space));
|
|
9791
9811
|
}
|
|
9792
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9812
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_startIcon--8494e + input.bp_base_text_input_module_textInput--8494e.bp_base_text_input_module_error--8494e{
|
|
9793
9813
|
padding-inline-start:calc(var(--text-input-padding-inline-error) + var(--text-input-start-icon-space));
|
|
9794
9814
|
}
|
|
9795
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9815
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_endIcon--8494e{
|
|
9796
9816
|
position:absolute;
|
|
9797
9817
|
right:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
|
|
9798
9818
|
top:50%;
|
|
9799
9819
|
transform:translateY(-50%);
|
|
9800
9820
|
}
|
|
9801
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9821
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_textInputContainer--8494e .bp_base_text_input_module_inlineErrorIcon--8494e{
|
|
9822
|
+
height:var(--text-input-inline-error-icon-height);
|
|
9823
|
+
width:var(--text-input-inline-error-icon-width);
|
|
9824
|
+
}
|
|
9825
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e.bp_base_text_input_module_disabled--8494e{
|
|
9802
9826
|
opacity:var(--disabled-opacity);
|
|
9803
9827
|
}
|
|
9804
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9828
|
+
.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_inlineError--8494e,.bp_base_text_input_module_textInputContainerOuter--8494e .bp_base_text_input_module_subtext--8494e{
|
|
9805
9829
|
margin-block-start:var(--text-input-inline-error-subtext-block-margin);
|
|
9806
9830
|
}
|
|
9807
9831
|
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
|
+
import { IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
|
|
2
5
|
import clsx from 'clsx';
|
|
3
6
|
import { forwardRef, useState, useMemo, cloneElement } from 'react';
|
|
4
7
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
8
|
+
import { Focusable } from '../../focusable/focusable.js';
|
|
5
9
|
import { Text } from '../../text/text.js';
|
|
10
|
+
import { Tooltip } from '../../tooltip/tooltip.js';
|
|
6
11
|
import { useLabelable } from '../../util-components/labelable/useLabelable.js';
|
|
7
12
|
import { useUniqueId } from '../../utils/useUniqueId.js';
|
|
13
|
+
import { VisuallyHidden } from '../../visually-hidden/visually-hidden.js';
|
|
8
14
|
import { InlineError } from '../inline-error/inline-error.js';
|
|
9
15
|
import styles from './base-text-input.module.js';
|
|
10
16
|
|
|
@@ -29,6 +35,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
29
35
|
hideLabel,
|
|
30
36
|
readOnly,
|
|
31
37
|
error,
|
|
38
|
+
errorVariant = 'default',
|
|
32
39
|
required = false,
|
|
33
40
|
endIcon,
|
|
34
41
|
startIcon,
|
|
@@ -99,8 +106,27 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
99
106
|
readOnly: readOnly,
|
|
100
107
|
required: required,
|
|
101
108
|
type: type
|
|
102
|
-
}),
|
|
103
|
-
|
|
109
|
+
}), errorVariant === 'inline' && hasError ? jsxs(Fragment, {
|
|
110
|
+
children: [jsx(Tooltip, {
|
|
111
|
+
content: error,
|
|
112
|
+
side: "top",
|
|
113
|
+
variant: "error",
|
|
114
|
+
children: jsx(Focusable, {
|
|
115
|
+
ref: setValueUsing(setEndIconWidth),
|
|
116
|
+
"aria-labelledby": inlineErrorId,
|
|
117
|
+
className: clsx(styles.endIcon, styles.inlineErrorIcon),
|
|
118
|
+
children: enableModernizedComponents ? jsx(AlertCircle, {
|
|
119
|
+
color: IconIconErrorOnLight
|
|
120
|
+
}) : jsx(AlertBadge, {
|
|
121
|
+
color: IconIconErrorOnLight
|
|
122
|
+
})
|
|
123
|
+
})
|
|
124
|
+
}), jsx(VisuallyHidden, {
|
|
125
|
+
id: inlineErrorId,
|
|
126
|
+
children: error
|
|
127
|
+
})]
|
|
128
|
+
}) : EndIconComponent]
|
|
129
|
+
}), errorVariant === 'default' && hasError ? jsx(InlineError, {
|
|
104
130
|
className: styles.inlineError,
|
|
105
131
|
id: inlineErrorId,
|
|
106
132
|
children: error
|
|
@@ -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--8494e","label":"bp_base_text_input_module_label--8494e","textInputContainer":"bp_base_text_input_module_textInputContainer--8494e","textInput":"bp_base_text_input_module_textInput--8494e","hidden":"bp_base_text_input_module_hidden--8494e","error":"bp_base_text_input_module_error--8494e","readOnly":"bp_base_text_input_module_readOnly--8494e","endIcon":"bp_base_text_input_module_endIcon--8494e","startIcon":"bp_base_text_input_module_startIcon--8494e","inlineErrorIcon":"bp_base_text_input_module_inlineErrorIcon--8494e","disabled":"bp_base_text_input_module_disabled--8494e","inlineError":"bp_base_text_input_module_inlineError--8494e","subtext":"bp_base_text_input_module_subtext--8494e"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { type Labelable } from '../../util-components/labelable/types';
|
|
2
|
+
export type ErrorVariant = 'default' | 'inline';
|
|
2
3
|
export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelable & {
|
|
3
4
|
/** Input type, defaults to 'text' */
|
|
4
5
|
type?: 'text' | 'password';
|
|
@@ -16,6 +17,13 @@ export type BaseTextInputProps = React.ComponentPropsWithRef<'input'> & Labelabl
|
|
|
16
17
|
required?: boolean;
|
|
17
18
|
/** Content of error message */
|
|
18
19
|
error?: React.ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* Controls how the error is displayed.
|
|
22
|
+
* 'default' renders an inline error message below the input.
|
|
23
|
+
* 'inline' renders an error icon inside the input that shows the error in a tooltip on hover.
|
|
24
|
+
* @default 'default'
|
|
25
|
+
*/
|
|
26
|
+
errorVariant?: ErrorVariant;
|
|
19
27
|
/**
|
|
20
28
|
* Custom icon to be rendered after the input
|
|
21
29
|
* When loading is true and input is not disabled prop value will be ignored
|
|
@@ -7,6 +7,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<
|
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
required?: boolean;
|
|
9
9
|
error?: React.ReactNode;
|
|
10
|
+
errorVariant?: import("../primitives/base-text-input/types").ErrorVariant;
|
|
10
11
|
endIcon?: React.ReactElement;
|
|
11
12
|
startIcon?: React.ReactElement;
|
|
12
13
|
subtext?: string;
|
|
@@ -19,6 +20,7 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<
|
|
|
19
20
|
disabled?: boolean;
|
|
20
21
|
required?: boolean;
|
|
21
22
|
error?: React.ReactNode;
|
|
23
|
+
errorVariant?: import("../primitives/base-text-input/types").ErrorVariant;
|
|
22
24
|
endIcon?: React.ReactElement;
|
|
23
25
|
startIcon?: React.ReactElement;
|
|
24
26
|
subtext?: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.41.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.121.0",
|
|
51
51
|
"@internationalized/date": "^3.12.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.
|
|
80
|
+
"@box/storybook-utils": "^0.20.0",
|
|
81
81
|
"@figma/code-connect": "1.4.4",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|