@box/blueprint-web 11.7.1 → 11.8.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/index.css
CHANGED
|
@@ -4638,12 +4638,13 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4638
4638
|
background:none;
|
|
4639
4639
|
}
|
|
4640
4640
|
|
|
4641
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4641
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f{
|
|
4642
|
+
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
4642
4643
|
display:flex;
|
|
4643
4644
|
flex-direction:column;
|
|
4644
4645
|
font-weight:400;
|
|
4645
4646
|
}
|
|
4646
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4647
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_label--8647f{
|
|
4647
4648
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4648
4649
|
font-size:.875rem;
|
|
4649
4650
|
letter-spacing:.01875rem;
|
|
@@ -4651,22 +4652,22 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4651
4652
|
text-decoration:none;
|
|
4652
4653
|
text-transform:none;
|
|
4653
4654
|
}
|
|
4654
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4655
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_label--8647f{
|
|
4655
4656
|
color:#222;
|
|
4656
4657
|
flex:0 0 fit-content;
|
|
4657
4658
|
font-weight:700;
|
|
4658
4659
|
width:-moz-fit-content;
|
|
4659
4660
|
width:fit-content;
|
|
4660
4661
|
}
|
|
4661
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4662
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_label--8647f:not(.bp_base_text_input_module_hidden--8647f){
|
|
4662
4663
|
margin-block-end:var(--space-2);
|
|
4663
4664
|
}
|
|
4664
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4665
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f{
|
|
4665
4666
|
display:flex;
|
|
4666
4667
|
height:2.5rem;
|
|
4667
4668
|
position:relative;
|
|
4668
4669
|
}
|
|
4669
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4670
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f{
|
|
4670
4671
|
background:#fff;
|
|
4671
4672
|
border:.0625rem solid #909090;
|
|
4672
4673
|
border-radius:.375rem;
|
|
@@ -4685,74 +4686,74 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4685
4686
|
text-transform:none;
|
|
4686
4687
|
width:100%;
|
|
4687
4688
|
}
|
|
4688
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4689
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:hover{
|
|
4689
4690
|
box-shadow:var(--innershadow-1);
|
|
4690
4691
|
}
|
|
4691
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4692
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f::placeholder,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f::placeholder,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f::placeholder{
|
|
4692
4693
|
color:#6f6f6f;
|
|
4693
4694
|
opacity:1;
|
|
4694
4695
|
}
|
|
4695
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4696
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f{
|
|
4696
4697
|
background:#fff;
|
|
4697
4698
|
border:.125rem solid #ed3757;
|
|
4698
4699
|
outline:0;
|
|
4699
4700
|
padding-inline-start:.6875rem;
|
|
4700
4701
|
}
|
|
4701
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4702
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f{
|
|
4702
4703
|
border-color:var(--border-collapsible-border);
|
|
4703
4704
|
box-shadow:var(--innershadow-1);
|
|
4704
4705
|
color:var(--text-text-on-light-secondary);
|
|
4705
4706
|
}
|
|
4706
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4707
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:focus-visible{
|
|
4707
4708
|
border:.125rem solid #2486fc;
|
|
4708
4709
|
}
|
|
4709
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4710
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:hover{
|
|
4710
4711
|
cursor:default;
|
|
4711
4712
|
}
|
|
4712
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4713
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:disabled,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:disabled,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:disabled{
|
|
4713
4714
|
background:var(--surface-input-surface);
|
|
4714
4715
|
border-color:var(--border-input-border);
|
|
4715
4716
|
box-shadow:var(--innershadow-1);
|
|
4716
4717
|
color:var(--text-text-on-light);
|
|
4717
4718
|
}
|
|
4718
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4719
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:disabled:hover{
|
|
4719
4720
|
border-color:var(--border-input-border);
|
|
4720
4721
|
}
|
|
4721
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4722
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:focus-visible{
|
|
4722
4723
|
background:#fff;
|
|
4723
4724
|
border:.125rem solid #2486fc;
|
|
4724
4725
|
outline:0;
|
|
4725
4726
|
padding-inline-start:.6875rem;
|
|
4726
4727
|
}
|
|
4727
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4728
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:has(+ .bp_base_text_input_module_endIcon--8647f),.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:has(+ .bp_base_text_input_module_endIcon--8647f),.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:has(+ .bp_base_text_input_module_endIcon--8647f){
|
|
4728
4729
|
padding-inline-end:calc(1.25rem + var(--end-icon-width));
|
|
4729
4730
|
}
|
|
4730
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4731
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--8647f):hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--8647f):hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--8647f):hover{
|
|
4731
4732
|
background:#fff;
|
|
4732
4733
|
border:.0625rem solid #6f6f6f;
|
|
4733
4734
|
}
|
|
4734
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4735
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f{
|
|
4735
4736
|
left:.8125rem;
|
|
4736
4737
|
position:absolute;
|
|
4737
4738
|
top:50%;
|
|
4738
4739
|
transform:translateY(-50%);
|
|
4739
4740
|
}
|
|
4740
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4741
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f + input.bp_base_text_input_module_textInput--8647f{
|
|
4741
4742
|
padding-inline-start:calc(1.25rem + var(--start-icon-width));
|
|
4742
4743
|
}
|
|
4743
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4744
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f + input.bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f + input.bp_base_text_input_module_textInput--8647f:focus-visible{
|
|
4744
4745
|
padding-inline-start:calc(1.1875rem + var(--start-icon-width));
|
|
4745
4746
|
}
|
|
4746
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4747
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_endIcon--8647f{
|
|
4747
4748
|
position:absolute;
|
|
4748
4749
|
right:.8125rem;
|
|
4749
4750
|
top:50%;
|
|
4750
4751
|
transform:translateY(-50%);
|
|
4751
4752
|
}
|
|
4752
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4753
|
-
opacity:
|
|
4753
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f.bp_base_text_input_module_disabled--8647f{
|
|
4754
|
+
opacity:var(--disabled-opacity);
|
|
4754
4755
|
}
|
|
4755
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4756
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_inlineError--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_subtext--8647f{
|
|
4756
4757
|
margin-block-start:var(--space-2);
|
|
4757
4758
|
}
|
|
4758
4759
|
.bp_chip_module_chip--728a9{
|
package/dist/lib-esm/index.d.ts
CHANGED
|
@@ -64,6 +64,7 @@ export * from './text';
|
|
|
64
64
|
export * from './text-area';
|
|
65
65
|
export * from './text-button';
|
|
66
66
|
export * from './text-input';
|
|
67
|
+
export * from './primitives/base-text-input';
|
|
67
68
|
export * from './text-toggle-button';
|
|
68
69
|
export * from './toolbar';
|
|
69
70
|
export * from './tooltip';
|
package/dist/lib-esm/index.js
CHANGED
|
@@ -81,6 +81,7 @@ export { Text } from './text/text.js';
|
|
|
81
81
|
export { TextArea } from './text-area/text-area.js';
|
|
82
82
|
export { TextButton } from './text-button/text-button.js';
|
|
83
83
|
export { TextInput } from './text-input/text-input.js';
|
|
84
|
+
export { BaseTextInput } from './primitives/base-text-input/base-text-input.js';
|
|
84
85
|
export { TextToggleButton } from './text-toggle-button/text-toggle-button.js';
|
|
85
86
|
export { Toolbar } from './toolbar/index.js';
|
|
86
87
|
export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
|
|
@@ -7,6 +7,11 @@ import { useUniqueId } from '../../utils/useUniqueId.js';
|
|
|
7
7
|
import { InlineError } from '../inline-error/inline-error.js';
|
|
8
8
|
import styles from './base-text-input.module.js';
|
|
9
9
|
|
|
10
|
+
const setValueUsing = setter => node => {
|
|
11
|
+
if (node) {
|
|
12
|
+
setter(node.getBoundingClientRect().width);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
10
15
|
/**
|
|
11
16
|
* This extends a default HTML <input/> and accepts the same props as well as some custom ones listed below.<br/>
|
|
12
17
|
*
|
|
@@ -35,29 +40,28 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
35
40
|
const inlineErrorId = useUniqueId('inline-error-');
|
|
36
41
|
const subtextId = useUniqueId('subtext-');
|
|
37
42
|
const hasError = !!error && !disabled;
|
|
43
|
+
const hasSubtext = !error && !!subtext;
|
|
44
|
+
const hasDescribedByText = hasError || hasSubtext;
|
|
45
|
+
let describedByText = '';
|
|
46
|
+
if (hasError) {
|
|
47
|
+
describedByText = inlineErrorId;
|
|
48
|
+
} else if (hasSubtext) {
|
|
49
|
+
describedByText = subtextId;
|
|
50
|
+
}
|
|
38
51
|
const shouldMarkError = (!!error || invalid) && !disabled;
|
|
39
52
|
const ariaDescribedBy = clsx(rest['aria-describedby'], {
|
|
40
|
-
[
|
|
53
|
+
[describedByText]: hasDescribedByText
|
|
41
54
|
});
|
|
42
55
|
const [startIconWidth, setStartIconWidth] = useState(null);
|
|
43
56
|
const [endIconWidth, setEndIconWidth] = useState(null);
|
|
44
57
|
const StartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
|
|
45
|
-
ref:
|
|
46
|
-
if (node) {
|
|
47
|
-
setStartIconWidth(node.getBoundingClientRect().width);
|
|
48
|
-
}
|
|
49
|
-
},
|
|
58
|
+
ref: setValueUsing(setStartIconWidth),
|
|
50
59
|
className: clsx(startIcon.props?.className, styles.startIcon)
|
|
51
60
|
}), [startIcon]);
|
|
52
61
|
const EndIconComponent = useMemo(() => endIcon && /*#__PURE__*/cloneElement(endIcon, {
|
|
53
|
-
ref:
|
|
54
|
-
if (node) {
|
|
55
|
-
setEndIconWidth(node.getBoundingClientRect().width);
|
|
56
|
-
}
|
|
57
|
-
},
|
|
62
|
+
ref: setValueUsing(setEndIconWidth),
|
|
58
63
|
className: clsx(endIcon.props?.className, styles.endIcon)
|
|
59
64
|
}), [endIcon]);
|
|
60
|
-
const hasSubtext = !error && !!subtext;
|
|
61
65
|
const Label = useLabelable(label, inputId, required);
|
|
62
66
|
return jsxs("div", {
|
|
63
67
|
className: clsx([styles.textInputContainerOuter], {
|
|
@@ -78,7 +82,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
78
82
|
children: [StartIconComponent, jsx("input", {
|
|
79
83
|
...rest,
|
|
80
84
|
ref: forwardedRef,
|
|
81
|
-
"aria-describedby": ariaDescribedBy,
|
|
85
|
+
"aria-describedby": ariaDescribedBy || undefined,
|
|
82
86
|
"aria-invalid": shouldMarkError,
|
|
83
87
|
"aria-required": required,
|
|
84
88
|
className: clsx([styles.textInput], {
|
|
@@ -91,11 +95,11 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
91
95
|
required: required,
|
|
92
96
|
type: type
|
|
93
97
|
}), EndIconComponent]
|
|
94
|
-
}), jsx(InlineError, {
|
|
98
|
+
}), hasError ? jsx(InlineError, {
|
|
95
99
|
className: styles.inlineError,
|
|
96
100
|
id: inlineErrorId,
|
|
97
101
|
children: error
|
|
98
|
-
})
|
|
102
|
+
}) : hasSubtext && jsx(Text, {
|
|
99
103
|
as: "p",
|
|
100
104
|
className: styles.subtext,
|
|
101
105
|
color: "textOnLightSecondary",
|
|
@@ -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--8647f","label":"bp_base_text_input_module_label--8647f","hidden":"bp_base_text_input_module_hidden--8647f","textInputContainer":"bp_base_text_input_module_textInputContainer--8647f","textInput":"bp_base_text_input_module_textInput--8647f","error":"bp_base_text_input_module_error--8647f","readOnly":"bp_base_text_input_module_readOnly--8647f","endIcon":"bp_base_text_input_module_endIcon--8647f","startIcon":"bp_base_text_input_module_startIcon--8647f","disabled":"bp_base_text_input_module_disabled--8647f","inlineError":"bp_base_text_input_module_inlineError--8647f","subtext":"bp_base_text_input_module_subtext--8647f"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|