@homebound/beam 2.229.0 → 2.229.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.
|
@@ -38,7 +38,7 @@ function TextFieldBase(props) {
|
|
|
38
38
|
? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
|
|
39
39
|
: [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
|
|
40
40
|
const fieldStyles = {
|
|
41
|
-
container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.if(labelStyle === "left").fdr.gap2.jcsb.aic.$,
|
|
41
|
+
container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
|
|
42
42
|
inputWrapper: {
|
|
43
43
|
...Css_1.Css[typeScale].df.aic.br4.px1.w100
|
|
44
44
|
.hPx(fieldHeight - maybeSmaller)
|
|
@@ -46,7 +46,7 @@ function TextFieldBase(props) {
|
|
|
46
46
|
.hPx(compactFieldHeight - maybeSmaller).$,
|
|
47
47
|
...Css_1.Css.bgColor(bgColor)
|
|
48
48
|
.gray900.if(contrast)
|
|
49
|
-
.white.if(labelStyle === "left").
|
|
49
|
+
.white.if(labelStyle === "left").w50.$,
|
|
50
50
|
// When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
|
|
51
51
|
// This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
|
|
52
52
|
// To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
|
|
@@ -247,7 +247,7 @@ function SelectFieldBase(props) {
|
|
|
247
247
|
// Ensures the menu never gets too small.
|
|
248
248
|
minWidth: 200,
|
|
249
249
|
};
|
|
250
|
-
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
|
|
250
|
+
return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(otherProps.labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
|
|
251
251
|
}
|
|
252
252
|
exports.SelectFieldBase = SelectFieldBase;
|
|
253
253
|
function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {
|