From 6c49b3b97762fadfb1f48ff4c3d6632bc9f75d92 Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 30 Apr 2024 15:40:12 -0400 Subject: [PATCH 01/14] fix: Fix issue where SelectField was not populating selection into textfield (#1017) --- src/inputs/internal/ComboBoxBase.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/inputs/internal/ComboBoxBase.tsx b/src/inputs/internal/ComboBoxBase.tsx index b1ae6d4bd..119704c9b 100644 --- a/src/inputs/internal/ComboBoxBase.tsx +++ b/src/inputs/internal/ComboBoxBase.tsx @@ -12,6 +12,7 @@ import { keyToValue, Value, valueToKey } from "src/inputs/Value"; import { BeamFocusableProps } from "src/interfaces"; import { getFieldWidth } from "src/inputs/utils"; import { useDebounce } from "use-debounce"; +import equal from "fast-deep-equal"; /** Base props for either `SelectField` or `MultiSelectField`. */ export interface ComboBoxBaseProps extends BeamFocusableProps, PresentationFieldProps { @@ -130,8 +131,18 @@ export function ComboBoxBase(props: ComboBoxBaseProps) const values = useMemo(() => propValues ?? [], [propValues]); + const selectedOptionsRef = useRef(options.filter((o) => values.includes(getOptionValue(o)))); const selectedOptions = useMemo(() => { - return options.filter((o) => values.includes(getOptionValue(o))); + // `selectedOptions` should only ever update if the `values` prop actually change. + // Assuming `values` is a state variable, then it should hold its identity until it _really_ changes. + // Though, it is possible that the `options` prop has changed, which is a dependency on this `useMemo`. + // That could trigger an unnecessary new reference for `selectedOptions`, and cause additional renders or unexpected state changes. + // We should avoid updating `selectedOptions` unless `values` has actually changed. + if (!equal(values.sort(), selectedOptionsRef.current.map(getOptionValue).sort())) { + selectedOptionsRef.current = options.filter((o) => values.includes(getOptionValue(o))); + } + + return selectedOptionsRef.current; }, [options, values, getOptionValue]); const { contains } = useFilter({ sensitivity: "base" }); @@ -277,7 +288,6 @@ export function ComboBoxBase(props: ComboBoxBaseProps) // Reset inputValue when closed or selected changes useEffect(() => { - if (debouncedSearch) return; if (state.isOpen && multiselect) { // While the multiselect is open, let the user keep typing setFieldState((prevState) => ({ @@ -292,7 +302,7 @@ export function ComboBoxBase(props: ComboBoxBaseProps) inputValue: getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly), })); } - }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly, debouncedSearch]); + }, [state.isOpen, selectedOptions, getOptionLabel, multiselect, nothingSelectedText, isReadOnly]); // Call on search callback when the user types in the input field useEffect(() => { From 47bb4d4090c9d6ed0217f76d131b96fcf661f7ba Mon Sep 17 00:00:00 2001 From: Homebound Bot Date: Tue, 30 Apr 2024 19:43:08 +0000 Subject: [PATCH 02/14] chore(release): 2.343.2 [skip ci] ## [2.343.2](https://github.com/homebound-team/beam/compare/v2.343.1...v2.343.2) (2024-04-30) ### Bug Fixes * Fix issue where SelectField was not populating selection into textfield ([#1017](https://github.com/homebound-team/beam/issues/1017)) ([6c49b3b](https://github.com/homebound-team/beam/commit/6c49b3b97762fadfb1f48ff4c3d6632bc9f75d92)) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c272137a3..84817bf07 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@homebound/beam", - "version": "2.343.1", + "version": "2.343.2", "author": "Homebound", "license": "MIT", "main": "dist/index.js", From 8e12d94585a7c06850d822b26ac89ca390976002 Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 30 Apr 2024 16:38:40 -0400 Subject: [PATCH 03/14] fix: Prevent mutating value prop (#1018) --- src/inputs/internal/ComboBoxBase.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/inputs/internal/ComboBoxBase.tsx b/src/inputs/internal/ComboBoxBase.tsx index 119704c9b..e467a83ad 100644 --- a/src/inputs/internal/ComboBoxBase.tsx +++ b/src/inputs/internal/ComboBoxBase.tsx @@ -138,7 +138,7 @@ export function ComboBoxBase(props: ComboBoxBaseProps) // Though, it is possible that the `options` prop has changed, which is a dependency on this `useMemo`. // That could trigger an unnecessary new reference for `selectedOptions`, and cause additional renders or unexpected state changes. // We should avoid updating `selectedOptions` unless `values` has actually changed. - if (!equal(values.sort(), selectedOptionsRef.current.map(getOptionValue).sort())) { + if (!equal([...values].sort(), selectedOptionsRef.current.map(getOptionValue).sort())) { selectedOptionsRef.current = options.filter((o) => values.includes(getOptionValue(o))); } From f447ecb521bce4990900e07f422f365bcbed11b1 Mon Sep 17 00:00:00 2001 From: Homebound Bot Date: Tue, 30 Apr 2024 20:41:50 +0000 Subject: [PATCH 04/14] chore(release): 2.343.3 [skip ci] ## [2.343.3](https://github.com/homebound-team/beam/compare/v2.343.2...v2.343.3) (2024-04-30) ### Bug Fixes * Prevent mutating value prop ([#1018](https://github.com/homebound-team/beam/issues/1018)) ([8e12d94](https://github.com/homebound-team/beam/commit/8e12d94585a7c06850d822b26ac89ca390976002)) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 84817bf07..a2eec8857 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@homebound/beam", - "version": "2.343.2", + "version": "2.343.3", "author": "Homebound", "license": "MIT", "main": "dist/index.js", From 756d4c5665abbd730b3ae502736c8d55fcacabfb Mon Sep 17 00:00:00 2001 From: Brandon Date: Fri, 10 May 2024 15:38:28 -0400 Subject: [PATCH 05/14] fix: Better support for min-width on Table columns (#1019) --- src/components/Table/GridTable.stories.tsx | 46 ++++++++++++++++-- src/components/Table/GridTable.test.tsx | 15 +----- src/components/Table/components/Row.tsx | 10 +--- src/components/Table/types.ts | 2 +- src/components/Table/utils/columns.tsx | 54 +++++++++++++++++++--- 5 files changed, 94 insertions(+), 33 deletions(-) diff --git a/src/components/Table/GridTable.stories.tsx b/src/components/Table/GridTable.stories.tsx index 244f11175..fa3223995 100644 --- a/src/components/Table/GridTable.stories.tsx +++ b/src/components/Table/GridTable.stories.tsx @@ -13,6 +13,7 @@ import { condensedStyle, dateColumn, defaultStyle, + dragHandleColumn, emptyCell, GridCellAlignment, GridColumn, @@ -21,15 +22,14 @@ import { GridTable, Icon, IconButton, + insertAtIndex, numericColumn, + recursivelyGetContainingRow, RowStyles, selectColumn, simpleHeader, SimpleHeaderAndData, useGridTableApi, - insertAtIndex, - dragHandleColumn, - recursivelyGetContainingRow, } from "src/components/index"; import { Css, Palette } from "src/Css"; import { useComputed } from "src/hooks"; @@ -2065,3 +2065,43 @@ export function DraggableCardRows() { /> ); } + +export function MinColumnWidths() { + const nameColumn: GridColumn = { + header: "Name", + data: ({ name }) => ({ + content: name === "group" ? "Col-spans across all!" : `Width: 2fr; Min-width: 300px`, + colspan: name === "group" ? 3 : 1, + }), + w: 2, + mw: "300px", + }; + const valueColumn: GridColumn = { + id: "value", + header: "Value", + data: ({ value }) => `Width: 1fr; Min-width: 200px`, + w: 1, + mw: "200px", + }; + const actionColumn: GridColumn = { + header: "Action", + data: () => `Width: 1fr; Min-width: 150px`, + w: 1, + mw: "150px", + }; + return ( +
+ +
+ ); +} diff --git a/src/components/Table/GridTable.test.tsx b/src/components/Table/GridTable.test.tsx index 921ec15ea..bbbe9e9c5 100644 --- a/src/components/Table/GridTable.test.tsx +++ b/src/components/Table/GridTable.test.tsx @@ -953,7 +953,7 @@ describe("GridTable", () => { }); }); - it("throws error if column min-width definition is set with a non-px/percentage value", async () => { + it("throws error if column min-width definition is set with a non-px value", async () => { // Given a column with an invalid `mw` value, then the render will fail await expect( render( @@ -962,7 +962,7 @@ describe("GridTable", () => { rows={[simpleHeader, { kind: "data", id: "1", data: { name: "a", value: 3 } }]} />, ), - ).rejects.toThrow("Beam Table column min-width definition only supports px or percentage values"); + ).rejects.toThrow("Beam Table column minWidth definition only supports pixel units"); }); it("accepts pixel values for column min-width definition", async () => { @@ -976,17 +976,6 @@ describe("GridTable", () => { expect(r.gridTable).toBeTruthy(); }); - it("accepts percentage values for column min-width definition", async () => { - // Given a column with an valid `mw` percentage value, then the render will succeed. - const r = await render( - "Name", data: "Test", mw: "100%" }]} - rows={[simpleHeader, { kind: "data", id: "1", data: { name: "a", value: 3 } }]} - />, - ); - expect(r.gridTable).toBeTruthy(); - }); - it("can handle onClick for rows", async () => { const onClick = jest.fn(); const rowStyles: RowStyles = { header: {}, data: { onClick } }; diff --git a/src/components/Table/components/Row.tsx b/src/components/Table/components/Row.tsx index 88ffd802d..46f259ccb 100644 --- a/src/components/Table/components/Row.tsx +++ b/src/components/Table/components/Row.tsx @@ -1,5 +1,5 @@ import { observer } from "mobx-react"; -import { ReactElement, useContext, useRef, useCallback, RefObject } from "react"; +import { ReactElement, useCallback, useContext, useRef } from "react"; import { defaultRenderFn, headerRenderFn, @@ -176,13 +176,6 @@ function RowImpl(props: RowProps): ReactElement { const applyFirstContentColumnStyles = !isHeader && isFirstContentColumn; foundFirstContentColumn ||= applyFirstContentColumnStyles; - if (column.mw) { - // Validate the column's minWidth definition if set. - if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) { - throw new Error("Beam Table column min-width definition only supports px or percentage values"); - } - } - // When using the variation of the table with an EXPANDABLE_HEADER, then our HEADER and TOTAL rows have special border styling // Keep track of the when we get to the last expanded column so we can apply this styling properly. if (hasExpandableHeader && (isHeader || isTotals)) { @@ -333,7 +326,6 @@ function RowImpl(props: RowProps): ReactElement { width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${ applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : "" })`, - ...(typeof column.mw === "string" ? Css.mw(column.mw).$ : {}), }; const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined; diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts index 26b73008a..1de23fc96 100644 --- a/src/components/Table/types.ts +++ b/src/components/Table/types.ts @@ -56,7 +56,7 @@ export type GridColumn = { * Example: Collapsed state shows number of books. Expanded state shows titles of books. */ expandedWidth?: number | string; - /** The minimum width the column can shrink to */ + /** The minimum width the column can shrink to. This must be defined in pixels */ mw?: string; /** The column's default alignment for each cell. */ align?: GridCellAlignment; diff --git a/src/components/Table/utils/columns.tsx b/src/components/Table/utils/columns.tsx index 97562f4cb..eccdf4eda 100644 --- a/src/components/Table/utils/columns.tsx +++ b/src/components/Table/utils/columns.tsx @@ -5,7 +5,7 @@ import { GridColumn, GridColumnWithId, Kinded, nonKindGridColumnKeys } from "src import { DragData, emptyCell } from "src/components/Table/utils/utils"; import { isFunction, newMethodMissingProxy } from "src/utils"; import { Icon } from "src"; -import { Css, Palette } from "src/Css"; +import { Css } from "src/Css"; /** Provides default styling for a GridColumn representing a Date. */ export function column(columnDef: GridColumn): GridColumn { @@ -135,32 +135,62 @@ export function calcColumnSizes( { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 }, ); + // In the event a column defines a fractional unit (fr) as the `w` value and a `mw` value in pixels, + // it is possible that the min-width value will kick in and throw off our claimedPixel and totalFr calculations. + // Once a `tableWidth` is defined, then we can adjust the claimedPixels and totalFr based on minWidth being present for any columns + let adjustedClaimedPixels = claimedPixels; + let adjustedTotalFr = totalFr; + if (tableWidth) { + columns.forEach(({ w, mw }) => { + const frUnit = parseFr(w); + if (mw === undefined || frUnit === undefined) return; + + const mwPx = Number(mw.replace("px", "")); + const calcedWidth = + (tableWidth - (claimedPercentages / 100) * tableWidth - adjustedClaimedPixels) * (frUnit / adjustedTotalFr); + // If the calculated width is less than the minWidth, then this column will be sized via pixels instead of `fr` units. + if (calcedWidth < mwPx) { + // Adjust the claimedPixels and totalFr accordingly + adjustedClaimedPixels += mwPx; + adjustedTotalFr -= frUnit; + } + }); + } + // This is our "fake but for some reason it lines up better" fr calc - function fr(myFr: number): string { + function fr(myFr: number, mw: number): string { // If the tableWidth, then return a pixel value if (tableWidth) { const widthBasis = Math.max(tableWidth, tableMinWidthPx); - return `(${(widthBasis - (claimedPercentages / 100) * widthBasis - claimedPixels) * (myFr / totalFr)}px)`; + const calcedWidth = + (widthBasis - (claimedPercentages / 100) * widthBasis - adjustedClaimedPixels) * (myFr / adjustedTotalFr); + + return `${Math.max(calcedWidth, mw)}px`; } // Otherwise return the `calc()` value return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`; } - const sizes = columns.map(({ id, expandedWidth, w: _w }) => { + const sizes = columns.map(({ id, expandedWidth, w: _w, mw: _mw }) => { + // Ensure `mw` is a pixel value if defined + if (_mw !== undefined && !_mw.endsWith("px")) { + throw new Error("Beam Table column minWidth definition only supports pixel units"); + } + const mw = _mw ? Number(_mw.replace("px", "")) : 0; const w = expandedColumnIds.includes(id) && expandedWidth !== undefined ? expandedWidth : _w; if (typeof w === "undefined") { - return fr(1); + return fr(1, mw); } else if (typeof w === "string") { if (w.endsWith("%") || w.endsWith("px")) { return w; } else if (w.endsWith("fr")) { - return fr(Number(w.replace("fr", ""))); + return fr(Number(w.replace("fr", "")), mw); } else { throw new Error("Beam Table column width definition only supports px, percentage, or fr units"); } } else { - return fr(w); + return fr(w, mw); } }); @@ -237,3 +267,13 @@ export function dragHandleColumn(columnDef?: Partial Date: Fri, 10 May 2024 19:41:23 +0000 Subject: [PATCH 06/14] chore(release): 2.343.4 [skip ci] ## [2.343.4](https://github.com/homebound-team/beam/compare/v2.343.3...v2.343.4) (2024-05-10) ### Bug Fixes * Better support for min-width on Table columns ([#1019](https://github.com/homebound-team/beam/issues/1019)) ([756d4c5](https://github.com/homebound-team/beam/commit/756d4c5665abbd730b3ae502736c8d55fcacabfb)) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a2eec8857..8c89ae171 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@homebound/beam", - "version": "2.343.3", + "version": "2.343.4", "author": "Homebound", "license": "MIT", "main": "dist/index.js", From 60b6f57cc8ca82ced67e7a44b3f4132fb7763620 Mon Sep 17 00:00:00 2001 From: Brandon Date: Fri, 10 May 2024 16:30:10 -0400 Subject: [PATCH 07/14] fix: Fallback message for virtual table was exceeding table header width (#1020) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For virtualized tables we subtract 20px from the total width to account for a vertical scrollbar, which helps prevent horizontal scrollbars. The fallback message was not respecting that adjusted width. | Before | After | | --- | --- | | Screenshot 2024-05-10 at 4 16 32 PM | Screenshot 2024-05-10 at 4 16 47 PM | --- src/components/Table/GridTable.stories.tsx | 12 +++++++++++- src/components/Table/GridTable.tsx | 11 +++++------ src/components/Table/utils/utils.tsx | 6 ++++++ 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/Table/GridTable.stories.tsx b/src/components/Table/GridTable.stories.tsx index fa3223995..ea67d397b 100644 --- a/src/components/Table/GridTable.stories.tsx +++ b/src/components/Table/GridTable.stories.tsx @@ -298,7 +298,17 @@ export function InfiniteScrollWithLoader() { export function NoRowsFallback() { const nameColumn: GridColumn = { header: "Name", data: ({ name }) => name }; const valueColumn: GridColumn = { header: "Value", data: ({ value }) => value }; - return ; + return ( +
+ +
+ ); } // Make a `Row` ADT for a table with a header + 3 levels of nesting diff --git a/src/components/Table/GridTable.tsx b/src/components/Table/GridTable.tsx index cc9bd0698..c6c631f92 100644 --- a/src/components/Table/GridTable.tsx +++ b/src/components/Table/GridTable.tsx @@ -2,7 +2,7 @@ import memoizeOne from "memoize-one"; import { runInAction } from "mobx"; import React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from "react"; import { Components, Virtuoso, VirtuosoHandle } from "react-virtuoso"; -import { Loader } from "src/components"; +import { getTableRefWidthStyles, Loader } from "src/components"; import { DiscriminateUnion, GridRowKind } from "src/components/index"; import { PresentationFieldProps, PresentationProvider } from "src/components/PresentationContext"; import { GridTableApi, GridTableApiImpl } from "src/components/Table/GridTableApi"; @@ -20,7 +20,7 @@ import { import { assignDefaultColumnIds } from "src/components/Table/utils/columns"; import { GridRowLookup } from "src/components/Table/utils/GridRowLookup"; import { TableStateContext } from "src/components/Table/utils/TableState"; -import { EXPANDABLE_HEADER, KEPT_GROUP, isCursorBelowMidpoint, zIndices } from "src/components/Table/utils/utils"; +import { EXPANDABLE_HEADER, isCursorBelowMidpoint, KEPT_GROUP, zIndices } from "src/components/Table/utils/utils"; import { Css, Only } from "src/Css"; import { useComputed } from "src/hooks"; import { useRenderCount } from "src/hooks/useRenderCount"; @@ -484,9 +484,7 @@ export function GridTable = an return ( - {/* If virtualized take some pixels off the width to accommodate when virtuoso's scrollbar is introduced. */} - {/* Otherwise a horizontal scrollbar will _always_ appear once the vertical scrollbar is needed */} -
+
{renders[_as]( style, id, @@ -713,7 +711,8 @@ function renderVirtual( if (firstRowMessage) { if (index === 0) { return ( -
+ // Ensure the fallback message is the same width as the table +
{firstRowMessage}
); diff --git a/src/components/Table/utils/utils.tsx b/src/components/Table/utils/utils.tsx index b3d3f836f..930638652 100644 --- a/src/components/Table/utils/utils.tsx +++ b/src/components/Table/utils/utils.tsx @@ -301,3 +301,9 @@ export function recursivelyGetContainingRow( return undefined; } + +export function getTableRefWidthStyles(isVirtual: boolean) { + // If virtualized take some pixels off the width to accommodate when virtuoso's scrollbar is introduced. + // Otherwise a horizontal scrollbar will _always_ appear once the vertical scrollbar is needed + return Css.w100.if(isVirtual).w("calc(100% - 20px)").$; +} From 4903a2f2911c2d4c189f78a45bafb4e739bf86a0 Mon Sep 17 00:00:00 2001 From: Homebound Bot Date: Fri, 10 May 2024 20:33:06 +0000 Subject: [PATCH 08/14] chore(release): 2.343.5 [skip ci] ## [2.343.5](https://github.com/homebound-team/beam/compare/v2.343.4...v2.343.5) (2024-05-10) ### Bug Fixes * Fallback message for virtual table was exceeding table header width ([#1020](https://github.com/homebound-team/beam/issues/1020)) ([60b6f57](https://github.com/homebound-team/beam/commit/60b6f57cc8ca82ced67e7a44b3f4132fb7763620)) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8c89ae171..a877db3fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@homebound/beam", - "version": "2.343.4", + "version": "2.343.5", "author": "Homebound", "license": "MIT", "main": "dist/index.js", From 40b138ddb5d2f283fcd8bd39f0f1a35be48feb6c Mon Sep 17 00:00:00 2001 From: Khalid Williams <36432040+khalidwilliams@users.noreply.github.com> Date: Mon, 13 May 2024 13:24:51 -0400 Subject: [PATCH 09/14] feat: Add new icons (#1021) --- src/components/Icon.stories.tsx | 2 ++ src/components/Icon.tsx | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/src/components/Icon.stories.tsx b/src/components/Icon.stories.tsx index ff0a1145c..6668a903f 100644 --- a/src/components/Icon.stories.tsx +++ b/src/components/Icon.stories.tsx @@ -69,6 +69,7 @@ export const Icon = (props: IconProps) => { "checkCircleFilled", "loaderCircle", "circleOutline", + "time", ]; const arrowIcons: IconProps["icon"][] = [ "chevronsDown", @@ -154,6 +155,7 @@ export const Icon = (props: IconProps) => { "designPackage", "updateDesignPackage", "exteriorStyle", + "lockOpen", ]; const navigationIcons: IconProps["icon"][] = [ "projects", diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index c0ba1eb85..61458beb2 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -813,6 +813,15 @@ export const Icons = { fillRule="evenodd" /> ), + time: ( + <> + + + + ), + lockOpen: ( + + ), }; export type IconKey = keyof typeof Icons; From 12535072b4f02a174419d8d9e4de89c57293f1b0 Mon Sep 17 00:00:00 2001 From: Homebound Bot Date: Mon, 13 May 2024 17:27:54 +0000 Subject: [PATCH 10/14] chore(release): 2.344.0 [skip ci] ## [2.344.0](https://github.com/homebound-team/beam/compare/v2.343.5...v2.344.0) (2024-05-13) ### Features * Add new icons ([#1021](https://github.com/homebound-team/beam/issues/1021)) ([40b138d](https://github.com/homebound-team/beam/commit/40b138ddb5d2f283fcd8bd39f0f1a35be48feb6c)) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a877db3fc..5526f9cdc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@homebound/beam", - "version": "2.343.5", + "version": "2.344.0", "author": "Homebound", "license": "MIT", "main": "dist/index.js", From 0c636b7afe413d8f5f634460709954c359580c13 Mon Sep 17 00:00:00 2001 From: Brandon Date: Mon, 13 May 2024 21:08:18 -0400 Subject: [PATCH 11/14] fix: Form Labels to not extend full width of field (#1022) Kind of an annoying issue that I've see is you try to click away from a SelectField to close the menu, but instead the menu flickers and opens back up. This was due to clicking above the field, which happened to be still clicking on the label element which was taking up the full width of its container. When clicking a label element, then the focus is set to the associated field. By adding 'align-self: flex-start', then the label element no longer extends the full width of the container. See Loom for example: https://www.loom.com/share/7b2dd9d22c1a457f991aca884a45731b --- src/components/Label.tsx | 8 +++++++- src/inputs/TextFieldBase.tsx | 1 + src/inputs/ToggleChipGroup.tsx | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Label.tsx b/src/components/Label.tsx index 1f96b1ea2..a641439bd 100644 --- a/src/components/Label.tsx +++ b/src/components/Label.tsx @@ -27,7 +27,13 @@ function LabelComponent, X>>(props: LabelProps)