grommet

• Resolved a performance issue cause by the styled components attrs function introduced in v2.39.0 of Grommet. (#7304)
• Fixed an issue with Drop to prevent clicks on target from triggering onClickOutside. (#7300)
• Fixed an accessibility issue with Accordion so that the AccordionPanel region has an accessible name. (#7295)

• Added defaultVisible prop to Tip to control the initial visibility of the tooltip. (https://github.com/grommet/grommet/pull/7255)
• Added showIndex boolean prop to List to control whether the index number for the list item is displayed when using onOrder. (https://github.com/grommet/grommet/pull/7271)
• Added view.columns to Data to track the visibility of columns in DataTableColumns and DataTable. (https://github.com/grommet/grommet/pull/7281)

General:

• Added theme option of anchor.icon.color. (#7236)
• Added tip to options for ToggleGroup. (#7258)
• Added support for React 18.3.0. (https://github.com/grommet/grommet/pull/7257)

• Added support for styled-components v6. (https://github.com/grommet/grommet/pull/7165)

This release is compatible with both styled components v5 and v6. Please note that if you are upgrading to styled components v6 there are various changes to be aware of. Refer to the styled components migration guide: https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6.
One major difference in styled-components v6 is the removal of CSS vendor prefixes by default since most CSS styles have broad cross-browser support. If you’d like to enable vendor prefixes for your project, you can do so following the steps provided in the styled components migration guide.

General:

• NEW ToggleGroup component. (#7172)
• Added pinned to DataTableColumns options to allow pinning of specific columns in “Order columns”. (#7193)
• Enhanced List pinned to accept object containing icon, background, color, and items. (#7213)
• Added extend to Skeleton theme. (#7176)
• Fixed FormField error when child is null. (#7181)
• Fixed Regex for autofocusing tags. (#7174)
• Fixed List TypeScript types. (#7164)
• Fixed Box round not respecting responsive={false}. (#7187)
• Fixed select all behavior across Data views. (#7200)
• Fixed DataSearch to ensure search event returns to page 1 of matched search results. (#7208)
• Fixed Pagination step to allow it to be controlled. (#7188)

General:

• Fixed bug with vertical padding on readOnlyCopy button in DateInput and TextInput. (#7168)
• Fixed bug where summary on Pagination was out of sync with active page. (#7169)

General:

• Added rangeInput.wheel to theme to allow for opting out of the scroll wheel behavior on RangeInput. (#7130)
• Added summary and stepOptions to Pagination. (#7133)
• Enhanced validate prop in FormField to allow easier implementation of a character counter by passing an object with max and threshold to the validate prop (#6550)
• Enhanced Box gap to accept an object with row and column. (#7147)
• Enhanced TextInput and DateInput to allow for readOnly styling through the theme property global.input.readOnly. (#7123)
• Added a readOnlyCopy boolean prop to TextInput and DateInput to support a copy to clipboard button within a readOnly input. (#7123)
• Fixed Form submit validation to run when submit is fired directly on an input. (#7148)
• Fixed an issue where Anchor with an icon contains extra space. (#6534)
• Fixed dropHeight of SelectMultiple in DataFilter. (#7157)

List:

• Added list.primaryKey to theme to enable primaryKey styling. (#7136)
• Enhanced to prevent scrolling when interacting with onOrder button via keyboard. (#7144)
• Enhanced keyboard accessibility when using onOrder. (#7140)

NEW Data components for turn-key implementations of complex filtering, searching, and sorting of data collections.

The following components have now been move out of “beta” and are available for production use:

• Data
• DataClearFilters
• DataFilter
• DataFilters
• DataSearch
• DataSort
• DataSummary
• DataTableColumns
• DataTableGroupBy
• DataView
• Toolbar
• Cards

General:

• Added Typescript types for Tag component. (#7099)
• Fixed label leaking as attribute in Checkbox. (#7101)
• Fixed groupHeader theming properties for DataTable. (#6986)

SelectMultiple:

• Enhanced to enable more options to be added via onSearch. (#7079)
• Added configurable i18n support. (#7009)

StarRating:

• Fixed the Typescript issue where not all RadioButtonGroup props were supported. (#7073)
• Fixed issue where value was not synced with Form. (#7077)

General:

• Fixed Typescript type for Box onClick prop. (#7018)
• Fixed Select focus when using search in Select. (#6901)
• Fixed NameValueList to account for theme-defined breakpoints. (#7047)

Beta:

• Added NEW DataClearFilters component. (#7025)
• Added default aria-label for DataFilter inputs. (#7038)
• Enhanced Data to include screen reader announcements when data changes. (#7010)
• Enhanced DataFilter range to allow users to specify step. (https://github.com/grommet/grommet/pull/6942)
• Enhanced DataSummary message to better support plural and singular grammar. (#7022)
• Enhanced DataFilter range to be inclusive of bounds. (#7026)
• Enhanced the DataFilter and RangeSelector to better handle floating point values. (#7033)
• Changed DataFilters default presentation to be layer when presented using Data toolbar prop to align with design best practices. (#7057)
• Fixed handling of multi-level property names that are used as RangeSelectors in filters. (#7049)
• Fixed DataSearch within a Layer to render with the correct form label. (#7053)
• Fixed RangeSelector to render with no errors when used in a controlled form. (#7045)
• Updated DataTableColumns prop types and typescript types. (#7028)

• Fixed keyboard focus issue on RadioButtonGroup. (#7011)
• Fixed Form submission bubbling issue when a portal containing a Form is the child of another Form. (#7005)

This is a pre-release

• Added support for styled components v6.

This release is compatible with both styled components v5 and v6. Please note that if you are upgrading to styled components v6 there are various changes to be aware of. Refer to the styled components migration guide: https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6.

One major difference in styled-components v6 is the removal of CSS vendor prefixes by default since most CSS styles have broad cross-browser support. If you are using styled-components v6 alongside this pre-release and run into any issues related to vendor prefixes, please file an issue so we can add the necessary vendor prefix to the appropriate Grommet component. Alternately, if you’d like to enable vendor prefixes for your project, you can do so following the steps provided in the styled components migration guide.

General:

• Added radiobutton.check.background.color to RadioButton. (#5243)
• Added level prop to PageHeader. (#6952)
• Added tag.icon.remove to Tag to allow the remove icon to be provided from the theme. (#6960)
• Added allowSelectAll prop to DataTable to have the option to not have the select all CheckBox in the header cell. (#6843)
• Fixed DataFilter to show all filter options. (#6943)
• Fixed DropContainer position. (#6097)

Typescript:

• Fixed types for onChange RangeSelector. (#6970)
• Fixed types for Grommet messages. (#6956)
• Fixed types for Box onClick. (#6983)
• Fixed types for Chart onClick and onHover. (#6984)

General:

• Fixed issue on Layer component when removing a Layer. (#6889)
• Fixed an issue where the MaskedInput value shows as undefined when the value property isn’t supplied and a non-matching character is input. (#6900)
• Fixed re-sizing issue in TextArea where the TextArea can be stretched horizontally beyond the parent container size. (#6924)
• Fixed Drop positioning when scrolling. (#6933)
• Fixed bug where Menu groups were collapsing when Menu had a scroll due to limited vertical space. (#6931)

Beta:

• Fixed Data’s flatten function to allow filtering on multiple sub properties of same parent property. (#6934)

• Fixed issue in SelectMultiple with empty options. (#6895)
• Fixed issue with filtering DataTableColumns. (#6881)

General:

• Added direction prop to DataChart to support displaying charts horizontally. (#6799)
• Added menu.item.align property to the theme. (#6835)
• Updated DataTable primaryKey behavior to align behavior for undefined and null. (#6865)
• Fixed an issue in Select with the display of the valueLabel when value={0}. (#6833)
• Fixed issue with Menu control displaying twice when align.bottom = 'top'. (#6844)
• Fixed an issue in DateInput where the value is not reset in an uncontrolled Form. (#6834)

Beta:

• Changed DataFilter to automatically add search to SelectMultiple when more than 10 options. (#6802)
• Fixed issue in DataSort when data is empty. (#6866)

• Added theme.select.emptySearchMessage prop to allow styling of the empty search message container and text in Select and SelectMultiple. (#6815)
• Added RTL support to Meter with the reverse prop. (#6398)
• Fixed typescript type for Select searchPlaceholder. (#6811)
• Fixed issue with displaying truncated text showing in a Tip in DataTable. (#6682)
• Fixed issue introduced in v2.30.0 where the Layer would not restrict scroll when modal={true}. (#6801)
• Fixed issue in CheckBox where check mark was exceeding parent bounds when padding applied with fill={true}. (#6819)

General:

• Fixed an issue with DataTable groupBy when value is 0 (#6770).
• Fixed issue when RadioButtonGroup defaultValue is 0 and retrieve correct selected value in onChange using event.value instead of event.target.value (#6752).
• Fixed issue that caused an infinite loop when updating component state on ref callback (#6793).
• Fixed an issue in Drop where we tried to access dropRef.current.style without first checking if dropRef.current is defined (#6804).
• Specified use client when exporting Grommet components so that they can be imported into a project using React Server Components (#6797).

Beta:

• Changed DataContext to fix an issue with using the default value (#6775).
• Changed DataFilter to handle properties with zero or one values (#6795).

General:

• Added support to Box for using border between in a border array. (#6642)
• Added level prop to Accordion to control what semantic heading should be rendered. (#6754)
• Added busy, messages, and success props to Button to support an animation while button is loading and when the button action succeeds. (#6656)
• Changed status-error color to meet accessibility contrast requirements. (#6690)
• Enhanced FormField to allow triggering validation at the FormField level. (#5943)
• Fixed issues using Grommet in a shadow root. (#6698)
• Fixed issue in DateInput when deselecting a date. (#6693)
• Fixed display of NameValueList with gird layout in Safari. (#6691)
• Fixed FileInput focus traversal. (#6391)
• Fixed issue where NameValueList’s align prop was ignored. (#6722)

DataTable:

• Changed DataTable to use a primaryKey value as the row key. (#6742)
• Fixed an issue with disabled rows and lazy loading. (#6706)
• Fixed issue where border is not applied to CheckBox cells. (#6718)
• Fixes an issue where the second argument (‘datum’) passed to onSelect was always undefined. (#6750)

SelectMultiple:

• Fixed a bug where the drop would scroll back to the top after selecting an option. (#6735)
• Fixed an issue when using object options and showSelectedInline. (#6738)

Typescript:

• Fixed type error on List’s children prop. (#6687)

Data: (beta)

• Changed DataFilters to use Tip. (#6707)
• New DataTableGroupBy component. (#6749)
• Fixed an issue in Data with filtering when filter value is an object. (#6725)
• Added support to Data’s filtering for when a property is an array. (#6704)
• Added a default tooltip to DataTableColumns. (#6746)

General:

• Added theme.icon.matchSize to use a component’s size property as the size property value on its icon. (#6653)
• Added theme.icon.disableScaleDown to theme Typescript definition. (#6668)
• Added responsive behavior to PageHeader subtitle so it sizes down to medium at small breakpoint. (#6689)
• Fixed Checkbox children Typescript definition. (#6648)
• Fixed FormField to allow fields to flex. (#6669)

Button:

• Added pad property. (#6686)
• Added theme.button.badge.align to allow a theme to specify if the badge should align to the button’s edge. (#6692)
• Fixed a bug with calculation of badge dimensions. (#6692)
• Fixed a bug with how Safari renders SVGs in icon-only buttons to ensure no additional vertical height is added. (#6666, #6702)

SelectMultiple:

• Fixed to use theme-defined icon in dropdown. (#6680)
• Fixed styling of help text. (#6685)

Beta features:

• Updated DataView placeholder to ”Select view” to align with placeholder conventions. (#6673)
• Fixed a bug with DataForm overflow. (#6672)

General:

• Fixed DropButton to use the correct dropTarget when opened. (#6613)
• Fixed Drop position to display correctly on the screen when a portion of the Drop is not visible. (#6611)
• Fixed error on FormField when focus leaves a field and doesn’t move to a new element. (#6592)
• Fixed WorldMap so places show in the correct position after a re-render. (#6587)
• Enhanced header.skeleton.width in the theme to have a min and max width. (#6603)
• Enhanced Calendar to allow the user to specify different Text properties for the month and year with the theme property calendar[size].title. (#6639)
• Enhanced Anchor theme to support anchor.size[size].color, anchor.size[size].fontWeight and anchor.size[size].textDecoration at different Anchor sizes. (#6643)
• Added width prop to TextInput. (#6624)
• Added theme.tabs.header.alignSelf to allow the theme to drive alignment of Tabs header along axis. (#6649)
• Changed Distribution to handle undefined values better. (#6650)

Button:

• Fixed text color when background is dark. (#6629)
• Added theme.button[kind].direction to allow the theme to drive the direction of icon + label. (#6606)
• Added theme.button.size[size].iconOnly.pad which allows the caller to specify padding for icon only Buttons across different Button sizes. (#6604)

DataTable:

• Fixed DataTable to not default height to 100%. (#6590)
• Enhanced rowProps to target group header rows. (#6627)
• Fixed size to accept any CSS string. (#6622)

Layer:

• Added layer.overlay.backdropFilter to the theme which supports passing a string value for any CSS supported backdrop-filter. (#6605)
• Fixed an issue where scrolling is disabled at certain viewport widths. (#6632)

Beta:

• Fixed DataFilter to accept the range prop and convert the correct values. (#6631)
• Fixed Pagination with propagating step and page properties to Data view. (#6616)
• Fixed DataTableColumns behavior when Data does not contain updateOn=’change’(#6617)
• Enhanced DataSearch to add drop and responsive props. (#6633)
• Added overflow prop to DataFilters. (#6634)
• Added drop prop to DataSort. (#6628)
• Added layer prop to DataFilters. (#6600)
• Changed Data to handle property paths. (#6645)