grommet

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)

General:

• NEW SelectMultiple component. (#6275)
• Added global.backgrounds to the theme allowing theme-defined backgrounds. (#6310)
• Added defaultValue prop to CheckBoxGroup. (#6331)
• Added pinned prop to List allowing list items to be pinned in place when reordering. (#6249)
• Fixed Heading text to wrap by default. (#6296)
• Fixed Notification theme’s default to have proper background. (#6336)

Select:

• Fixed Select to trigger validation when value is an array. (#6316)
• Fixed Select to allow initial value to be null. (#6324)

• Moved TestCafe dependencies into devDependencies. (#3612)

General:

• Added formField.checkBox.pad as a theme option to add pad to CheckBox when wrapped in FormField. (#6300)
• Added weight prop to Heading. (#6294)
• Added size to PageHeader. (#6279)
• Fixed Menu types and added menu.item prop for Menu theme. (#6241)
• Fixed Spinner to obtain the correct size on different screen sizes. (#6277)
• Fixed circle Meter angle calculation for larger values. (#6293)
• Enhanced Tab to be resilient to not be contained in Tabs. (#6274)

Button:

• Enhanced Button to allow the user to specify icon for kind in theme. (#6297)
• Fixed TypeScript theme type for Button. (#6298)

DataTable:

• Fixed TS error for border in DataTable. (#6253)
• Fixed DataTable sort when some attributes are null. (#6282)
• Fixed sort icon to update on re-render. (#6307)

Select:

• Fixed an issue when options are set to objects and no labelKey or valueKey is provided. (#6299)
• Fixed an issue where all the options were not being loaded when clear={true}. (#6285)

9/15 Note:
An issue with this release has been identified. Passing a null value to Select causes an error. In previous versions, passing a null value was accepted. A fix for this has been merged and will be available in the next release which is planned for next week (if needed sooner consider using the stable branch or an older version of Grommet).

General:

• Added focus to the Video progress bar. (#6195)
• Fixed CheckBox aria-label to be directly on input. (#6215)
• Fixed Image onLoad. (#6217)
• Fixed Form validation for added/removed inputs. (#6227)
• Fixed FormField debounce function to not execute if the FormField is unmounted. (#6226)
• Fixed rendering of Tab header in a fixed height container. (#6239)
• Fixed Calendar and DateInput timezone/daylight savings bugs. (#6214)

Typescript:

• Added digital Clock type. (#6220)
• Added support for string to theme.focus.shadow. (#6234)
• Fixed TypeScript definition on Menu items. (#6237)
• Fixed TypeScript definition for Card. (#6203)

DataChart:

• Fixed detail pad. (#6206)
• Fixed support of negative values. (#6246)
• Removed IE11 specific support.(#6240)

FileInput:

• Fixed cursor behavior. (#6154)
• Fixed scroll behavior when pressing space. (#6194)

General:

• Enhanced Menu items to allow for grouped items (#6162).
• Enhanced FileInput to include event.target.files in onRemove (#6136).
• Added reverse to DateInput to allow control of icon placement (#6160).
• Added accordion.hover.background to theme (#6177).
• Added new responsive behavior for Tabs (#6137).
• Added maxLines prop to Paragraph (#6207).
• Added info as status type on Notification (#6211).
• Improved DataChart rendering of swatches for detail and legend (#6173).
• Changed MaskedInput to restore to prior value when mask does not match (#6174).
• Changed Meter to handle floating point precision issues better (#6191).
• Fixed PageHeader typescript export (#6180).
• Fixed Button to allow as to accept elementType (#6172).
• Fixed incorrect row highlight behavior in DataTable (#6189).

General:

• NEW PageHeader Component. #6071
• Enhanced TextInput accessibility by adding combobox and listbox ARIA roles. #6079
• Enhanced Anchor theme with anchor.gap. #6114
• Enhanced Video to support audio description track. #6080
• Fixed Notifications to pass additional properties. #6139
• Fixed Tip to respect onMouseEnter, onMouseLeave onFocus and onBlurfunctions from its child. #6101
• Fixed DataTable layout in Firefox to not set the table-layout to fixed by default. #6108
• Fixed Layer and Drop onClickOutside so that click location is properly registered in shadow DOM. #6120
• Fixed onChange type for FileInput. #6145

List:

• Added onActive. #6103
• Added disabled. #6111

Select:

• Fixed bug so search term persists after an option is selected when closeOnChange={false}. #6147
• Fixed keyboard navigation in Select with search. #6101

General:

• Added support for React 18. (#6066)
• Dropped support for Node 12. (#6069)
• Added ability to pass in a11yTitle or aria-label for List. (#6048)
• Added ability to pass in a11yTitle in dropProps for Menu. (#6033)
• Added sticky prop to Header. (#6024)
• Fixed RTL support for CheckBox when toggle={true}. (#6074)
• Fixed as prop on Box to accept any React element. (#6038)

DataChart:

• Added offset gap. (#6041)
• Fixed an issue when there is only one datum. (#6082)

DataTable:

• Enhanced to allow both onClickRow and onSelect. (#6084)
• Added verticalAlign prop. (#6076)
• Added disabled prop. (#6070)
• Changed sortable icon to appear after the column units. (#6063)
• Fixed hover indicator to fill header cell. (#6086)

Select:

• Fixed clear button filling vertically on Firefox. (#6095)
• Fixed search to handle fast typing. (#6030)
• Fixed clear button to only show when Select has a value. (#6042)

Video:

• Enhanced to allow moving along Video timeline with keyboard. (#6035)
• Fixed captions to correctly display. (#6072)
• Fixed pause control to be disabled if Video is already paused or disable play if Video is already playing. (#6037)

General:

• NEW! Page and PageContent components. (#5960)
• Fixed DataTable placeholder to be visible. (#5987)
• Fixed typescript typing for radioButton.check.color. (#6014)
• Fixed issue where a RangeInput within a FormField received double focus. (#6004)
• Changed Box to fix an issue with desired height using an object. (#5996)
• Changed Tip to not crash without children. (#5969)
• Changed Drop to add container inline. (#6034)
• Allow for TableCell to receive an array of objects as border prop. (#5774)
• Added restrictToOptions to mask object in MaskedInput to restrict continued invalid typing. (#5894)
• Improved how Calendar handles daylight savings time. (#5997)
• Improved Select accessibility by allowing keyboard access to clear button. (#5972)
• Improved Menu accessibility through defining ARIA roles and attributes. (#5982)

DateInput:

• Changed DateInput to prevent it from scrolling down the page when opening with space. (#6022)
• Improved logic for when to normalize the date in DateInput. (#5942)

Select:

• Fixed name prop in Select component when using valueLabel. (#6031)
• Enhanced valueLabel in Select to accept a function. (#6020)
• Fixed display of selected option when labelKey is a function. (#6020)

Notification:

• Changed Notification to include event in onClose. (#5975)
• Enhanced Notification to support onClick, href, truncation, and directional layout of title/message. (#5958)
• Added global prop. (#5958)
• Fixed position of toast Notification when viewed on a small screen. (#6008)

DataChart:

• Changed DataChart to add placeholder prop. (#5977)
• Changed DataChart to insure guide for the y-dimension encompasses thickness. (#5980)
• Changed DataChart to align placeholder styling with DataTable. (#5981)

General:

• Added itemKey prop to List to allow users to specify a key for list items. (#5872)
• Added size prop to Tag. (#5914)
• Added the ability to change the gap between an icon and label in a Button through button.gap in the theme. (#5906)
• Fixed TextInput jumping scroll behavior. (#5927)
• Fixed Markdown options.wrapper so it is not overridden as a Fragment. (#5946)
• Enhanced RangeInput to handle an undefined value. (#5931)
• Enabled onClick prop in Tab. (#5937)
• Added arrow key functionality to Menu. (#5944)

DataChart:

• Added ‘lines’ option to chart.type. (#5953)
• Added ‘areas’ option to chart.type. (#5932)
• Added offset prop. (#5941)
• Fixed an issue when using areas and passing chart props per property. (#5951)
• Fixed an issue with x-axis alignment. (#5959)
• Enhanced DataChart to be more resilient to an empty property array. (#5957)

DateInput:

• Added icon prop. (#5911)
• Fixed an issue with setting the icon through inputProps. (#5911)

Notification:

• Enhanced toast prop to allow a position object to be passed in. (#5926)
• Enhanced toast prop to allow setting autoClose. (#5730)

Select:

• Fixed screenreader behavior to read out correct number of options. (#5924)
• Improved the screenreader and keyboard navigation experience. (#5934)

• Fixed double focus on FormField with Select and search. (#5895)
• Fixed DateInput bug with yyyy/mm/dd format. (#5893)
• Fixed Button icon alignment. (#5892 and #5885)
• Fixed TextInput suggestions styling. (#5880)
• Added Form validation onMount for controlled input forms. (#5881)

General:

• NEW Tag component. (#5778)
• Enhanced Form to support an array of field values. (#5630)
• Enhanced Carousel to have a smooth transition. (#5839)
• Enhanced Video to be able to customize controls. (#5658)
• Enhanced DateInput to open when Calendar icon is clicked. (#5838)
• Fixed Anchor’s as prop type. (#5823)
• Fixed Select to clear search content when drop closes. (#5866)
• Fixed Text to show Tip when truncated and observe resize. (#5855)
• Fixed Button icon alignment while using a small icon size. (#5856)
• Fixed TextInput suggestions closing incorrectly. (#5860)
• Fixed Clock to handle when the hour is not given. (#5850)

Calendar:

• Enhanced Calendar to handle changes with time zones. (#5837)
• Enhanced Calendar accessibility for screen readers. (#5849)
• Fixed Typescript definition for Calendar messages prop. (#5836)

• Fixed DataTable onSelect bug.

General:

• NEW NameValueList component. (#5626)
• Enhanced DataTable lazy loading with onUpdate. (#5716)
• Enhanced Text to accept dropProps when truncate=”tip”. (#5637)
• Enhanced WorldMap to improve placement of places. (#5712)
• Added value types on Anchor weight propTypes. (#5484)
• Added theme.card.hover.container.elevation to Card. (#5736)
• Added a11yTitle Typescript support on MaskedInput. (#5751)
• Fixed Calendar hover behavior and active day styling. (#5784)
• Fixed Carousel transition bug. (#5678)
• Fixed Pagination to account for changing data. (#5683)
• Fixed Spinner to allow color prop to override theme. (#5631)
• Fixed Video volumeDown Typescript definition. (#5760)
• Fixed InfiniteScroll last page calculation. (#5806)

Button:

• Added hasLabel and hasIcon prop to Button. (#5628)
• Fixed TypeScript support for Button. (#5651)

CheckBox:

• Fixed theme.checkBox.label.align to apply only when label is string. (#5800)
• Fixed focus state to not apply when disabled. (#5658)

DateInput:

• Enhanced behavior to align with native HTML. (#5667)
• Added size to TypeScript definitions. (#5687)
• Added checks for leap year. (#5717)
• Fixed value bug. (#5632)

FileInput:

• Added confirmRemove prop. (#5711)
• Fixed maxSize conversion factor. (#5775)

FormField:

• Added option to remove required indicator for individual FormField. (#5713)
• Fixed theme styling on required indicator. (#5709)

RangeInput:

• Added theme.rangeInput.pad. (#5666)
• Added disabled prop. (#5660)
• Enhanced RangeInput to be controlled by mouse wheel. (#5693)

General:

• NEW Notification component. (#5450)
• Added gap prop to Anchor. (#5541)
• Added defaultItemProps prop to List to allow styling of list item layouts. (#5573)
• Added color prop to RangeInput allowing track color to be specified. (#5275)
• Changed zIndex for RangeSelector’s edge controls. (#5564)
• Enhanced weight values supported by Text. (#5606)
• Fixed InfiniteScroll bug related to passing an empty array when using onMore callback. (#5636)
• Fixed missing TypeScript type for Grid. (#5561)
• Fixed RadioButton theme radioButton.check.background.color to accept symbolic colors. (#5621)
• Fixed Table TableCell rowSpan so that it is applied to the proper DOM element. (#5489)
• Fixed TextInput placeholder value not clearing when value is a JSX.Element. (#5571)

Button:

• Added justify prop to Button. (#5591)
• Fixed missing TypeScript type rel on Button. (#5582)

Calendar:

• Fixed Calendar to properly announce selected dates and date ranges and to screen readers. (#5575)
• Fixed Calendar keyboard behavior to properly keep active date in view when using arrow keys. (#5588)

Carousel:

• Fixed Carousel keyboard accessibility by limiting focus to only visible children. (#5552)
• Fixed Carousel animation direction when set to autoplay. (#5603)

DateInput:

• Added messages prop to DateInput to allow for accessibility announcements to be read by screen readers. (#5471)
• Enhanced DateInput keyboard behavior to align with native HTML input. (#5550)
• Fixed missing TypeScript type className on DateInput. (#5561)

DataTable:

• Fixed missing defaultProps on DataTable. (#5572)
• Fixed DataTable footer to allow rendering of a custom node. (#5563)
• Fixed DataTable to properly pin the checkbox column when using onSelect. (#5547)

FileInput:

• Added maxSize prop to FileInput to limit allowed file size. (#5457)
• Enhanced FileInput to limit the allowed number of files to be uploaded. (#5218)

Markdown:

• Enhanced Markdown to support refs. (#5587)
• Fixed unintentional line break when italics were used in Markdown. (#5581)
• Fixed Markdown to properly support onClick. (#5614)

Meter:

• Fixed Meter size=”full” bug. (#5597)
• Fixed missing TypeScript semicircle type on Meter. (#5601)

Select:

• Fixed missing support for onBlur and onFocus on Select. (#5590)
• Fixed missing TypeScript type className on Select. (#5561)

General:

• Component documentation has moved to Grommet-Site. All doc.js files have been deprecated. Documentation pull requests can now be submitted to the Grommet-Site repository. #5513
• Enhanced CheckBox to accept children. #5460
• Enhanced CheckBoxGroup to accept children. #5460
• Enhanced Meter to accept type=”semicircle”. #5463
• Enhanced Select emptySearchMessage to accept JSX elements. #5525
• Fixed missing TypeScript type for Button kind. #5529
• Fixed missing TypeScript type for Markdown options. #5534
• Fixed Form validation to exclude disabled inputs from validation results. #5530
• Fixed Menu to exclude extraneous Button when drop direction is flipped vertically. #5497

Accessibility:

• Fixed Calendar accessibility issue by properly traversing cells with populated dates. #5474
• Fixed Carousel accessibility issue by clearly labeling the currently displayed slide. #5254
• Fixed RangeInput accessibility issue by properly placing focus on the input’s thumb control. #5254
• Fixed RangeSelector accessibility issue by properly specifying role=”slider”. #5533

DateInput:

• Fixed ability to reset DateInput value with ” ” or [ ]. #5517
• Fixed situation where DateInput calendar would not open properly. #5491

Layer:

• Fixed missing extend for ThemeType layer.container.extend. #5520
• Fixed bug where Layer could not be used outside of Grommet block.. #5524

General:

• Added animation prop to Diagram. #5267
• Added onChange to FileInput. #5028
• Added support for textAlign=“justify” to Heading. #5374
• Added selected styling to custom child in Select. #5296
• Enhanced support for aria-label in all components where a11yTitle is accepted. #5444
• Enhanced Grid align and alignContent to support any valid CSS align-items and align-content strings. #5037
• Enhanced MaskedInput size to accept additional t-shirt sizes. #5405
• Enhanced TextArea size to accept additional t-shirt sizes. #5405
• Enhanced TextInput size to accept additional t-shirt sizes. #5405
• Fixed styling for Button hover state. #5314
• Fixed initial image displayed in Carousel. #5326
• Fixed DataChart detail display when rendering large data sets. #5331
• Fixed values retained in uncontrolled Form when inputs are dynamically removed. #5414
• Fixed active style for List so that the style is retained when a user is interacting with other components on the page. #5371
• Fixed RadioButtonGroup to properly pass focus state to children. #5473
• Fixed TableCell rendering performance when theme background is changed. #5407
• Fixed theme to accept custom pixel values when specifying input font sizes. #5399

Box:

• Enhanced align and alignContent to support any valid CSS align-items and align-content strings. #5037
• Fixed Box rendering performance when theme background is changed. #5407

Calendar:

• Enhanced Calendar accessibility by announcing the selected date upon selection. #5458
• Fixed Calendar accessibility to properly read only the active date as a user tabs through calendar dates. #5319
• Fixed Enter key behavior for Calendar. #5367

DataTable:

• Enhanced DataTable to apply case-insensitive sorting. #5307
• Enhanced DataTable groupBy to leverage InfiniteScroll. #5452
• Fixed DataTable cell styling to better support custom styling of grouped rows. #5355
• Fixed active style for DataTable so that the style is retained when a user is interacting with other components on the page. #5371

DateInput:

• Added size prop to DateInput. #5405
• Fixed DateInput to set value properly when implemented as a controlled component. #5330

FormField:

• Fixed FormField theme property to use error.border.color. #5252
• Fixed FormField validation when supplied an empty array as value. #5349

Grommet:

• Added global messages prop to Grommet. #5356
• Added ability to pass dynamic values to messages. #5468

Paragraph:

• Added support for textAlign=“justify” to Paragraph. #5374
• Fixed ability of size to accept a custom pixel value. #5465

Text:

• Added tip and smart aria-label default to Text. #5138
• Added truncate=“tip” to display the entirety of truncated text within a Tip.
• Added support for textAlign=“justify” to Text. #5374