What's new in 1.5

Six new components

• 

  DiffView

  Compares two texts line by line, side by side or in one column, with changed words highlighted and long unchanged stretches folded.

• 

  ColorPicker

  Colour picker with a saturation area, hue and opacity sliders, hex, rgb or hsl text, swatches and an eye dropper, plus a ColorField for forms.

• 

  CodeField

  Text field for code and settings with highlighting, line numbers, Tab to indent and a live JSON check, with no dependencies.

• 

  Sortable

  Reorder a list, row or grid by pointer, touch or keyboard, with every step announced to screen readers.

• 

  DropZone

  Draggable items and drop areas that work with a pointer, a finger or the keyboard, and take files dropped from the computer.

• 

  MediaLibrary

  A grid of images and files to pick from, with search, type filters, one or many picks, load more and upload.

ColorPicker also gives you ColorField, the form-field version. For moving things between areas, DropZone comes with Draggable. Every one works with a mouse, a finger and the keyboard, and was checked for accessibility in light and dark themes.

Better in components you already use

• TreeView: rows can be dragged before, after or into another row, or moved with Alt and the arrow keys. onMove, canMove, canDrop and moveTreeNode do the rest.
• Translation: set the language and the text of every component once with LocaleProvider, or per component with the labels prop. Calendar and the date picker take a locale for month names and the first day of the week.
• Validation: async rules, new rules (including json), messages you can set for a whole form, a schema API, and an oks-ui/validation entry that runs without React, for servers.
• TextEditor: exported HTML no longer runs code from a document, and normalizeBlocks and validateBlocks repair and check stored content.
• Fixes: fields no longer crash when given children (<Checkbox>I agree</Checkbox> works), error text and breadcrumb targets meet WCAG contrast and size, Tabs names its tab list, and a Nav item with a badge keeps its visible text in its name.
• Playgrounds on this site: switches for options that are on by default can now be turned off.

Upgrading

npm install oks-ui@latest

There are no breaking changes. Two things to know: the default validation messages are a little more specific (for example, “Must be at least 6 digits” for a phone number), so update any test that compares the old text; and if you show exported TextEditor content to people who did not write it, update now, because older versions could write unsafe HTML.