Grommet Versions Save

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)

General:

• Fixed regression in FormField where autoFocus attribute causes TypeError. (#6577)
• Fixed an issue where Drop’s scroll position gets reset after a style change occurs in the drop. (#6575)
• Fixed an issue where onBlur validation was running prematurely on components with drops. (#6566)
• Fixed bug in SelectMultiple where ‘Clear All’ does not work with reduce: true in valueKey . (#6557)
• Removed unnecessary focus on List click. (#6579)

TypeScript:

• Fixed DataTable onSearch argument to use object type. (#6582)

Beta:

• New DataTableColumns component. (#6558)

General:

• NEW StarRating component. (#6529)
• NEW ThumbsRating component. (#6529)
• Added kind prop to Form. (#6529)
• Added option to use CSS gap with Box. (#6181)
• Fixed issue in DataTable where search causes large horizontal shift in the header. (#6536)
• Fixed issue with animation when Collapsible is initially set to open. (#6535)
• Fixed an issue with useForwardedRef that was causing an unnecessary re-render. (#6564)
• Enhanced DOM functions to fix shadow root bug in FormField. (#6562)
• Enhanced accessibility for FormFields with requiredIndicator. (#6540)

Typescript:

• Fixed Select typing to omit readOnly. (#6538)
• Fixed Select value type definition to include number. (#6537)

Beta: This release includes some new components that are in Beta mode. These components are not yet documented as we are anticipating that we will be making adjustments to them. We reserve the right to change the API structure without following semantic versioning rules. Feel free to test out the components and provide any feedback through GitHub tickets or Slack. New Beta components: Cards, Data, DataFilter, DataFilters, DataSearch, DataSort, DataSummary, Toolbar. (#6343)

General:

• NEW Skeleton component. (#6318)
• Added auto as option for Grommet’s themeMode prop. (#6397)
• Added baseline as an accepted value for the alignSelf prop. (#6413)
• Enhanced FileInput to recognize user operating system for maxSize calculation. (#6427)
• Changed DataChart to better align legend style with chart style. (#6411)
• Changed Table to accept a ref. (#6416)
• Changed SelectMultiple’s select all and clear all buttons to show when searching. (#6456)
• Changed Select to fix an issue with null value. (#6479)
• Fixed SkipLinks to filter out undefined children. (#6402)
• Fixed issues with itemKey being a function when ordering in List. (#6478)
• Fixed an issue with Layer when using a custom containerTarget. (#6457)
• Fixed issue where RangeInput within a FormField was off-center. (#6494)
• Fixed an issue when using border=‘between’ and gap size in pixels on Box. (#6490)
• Fixed an issue with Drop when using a custom containerTarget. (#6450)
• Fixed DataTable with pinned header and paginate. (#6501)

Calendar:

• Fixed issue where the incorrect timezone offset was being applied. (#6424)
• Fixed onBlur validation. (#6436)
• Fixed next/back arrows disabled when date is out of bounds. (#6156)

DateInput:

• Fixed issue with range format and no value. (#6408)
• Fixed issue where bounds were not respected. (#6438)
• Fixed issue where the incorrect timezone offset was being applied. (#6424)

Notification:

• Added time prop. (#6462)
• Added icon prop. (#6389)

Typescript:

• Fixed typescript definition of zIndex theme property of Drop. (#6472)
• Fixed typescript definition for rowDetails in DataTable. (#6486)
• Fixed typescript definition for Tip’s dropProps. (#6431)
• Fixed typescript definition for FileInput’s onChange prop. (#6418)
• Fixed typescript definition of dropProps in various components. (#6463)

General:

• Updated to Webpack 5. (#6329)
• Added global.font.variant to theme. (#6327)
• Added a11yTitle prop to Avatar. (#6353)
• Enhanced Notification to accept a node type for message prop. (#6320)
• Enhanced CheckBox to accept theme.checkBox.hover. (#6355)
• Enhanced DateInput to accept theme.dateInput.container.round to control rounding. (#6385)
• Fixed RadioButton to accept a custom theme icon. (#6263)
• Fixed Select bug when valueKey is not specified. (#6392)
• Fixed DataChart to not show detail for missing value. (#6404)

SelectMultiple:

• Fixed object comparison. (#6403)
• Fixed behavior when providing array of objects to options. (#6359)

List:

• Fixed layout when action and onOrder are defined. (#6350)
• Fixed onOrder dragging behavior bug. (#6386)

TypeScript:

• Fixed DataTable groupBy keys to optional. (#6400)