v5.1.3

5.1.3 - 31.08.2023

What's New

• Added focus state styles for Accordion, AvatarStack, Anchor, Badge, Button, Burger, Checkbox, Control Group, IconButton, LinkButton, MainMenu, RadioInput, Switch, TabButton, Tag. This focus styles works via :focus-visible pseudo class and will be applied only when using the keyboard.
• [FiltersPanel]: added possibility to provide your own custom filter
• [useForm]: validate callback now return new validationState
• [DropdownContainer]: improved keyboard support. Now DropdownContainer by default lock focus inside and return to the toggler by closing. Also implemented close by 'Esc'.

What's Fixed

• [PickerInput]: when searchPosition=input a cursor is placed in textbox once PickerInput is focused via Tab key.
• [PickerInput]: fix searchPosition when editMode=modal, it cannot be input.
• [useForm]: after calling validate callback, form switch to revalidating mode on fields change.
• [useForm]: fixed isChanged prop calculation, in case when form value returned to initial
• [useForm]: don't call loadUnsavedChanges callback when for was edited and then returned to the initial value
• [Accordion]: fixed outdated isOpen value of renderTitle and renderAdditionalItems callbacks in case when this.props.value provided
• [Burger]: fixed keyboard navigation
• [Badge]: fixed hover effects for non-clickable badges in loveship
• [SliderRating] fixed colors of icons when it's 2+ sliders on one page
• [LabeledInput]: fixed default Tooltip color
• [SlateEditor]: get zIndex from layer context for RTE toolbars
• [DataTable]: fixed columns resize

v5.1.2

5.1.2 - 10.08.2023

What's New

• Added support of UUI library proper work in shadow-dom container
• [DropdownMenu]:
  • [Breaking change]: reworked component in loveship skin to be aligned with @epam/uui implementation and with design specs
• [Alert]: added size '36' option.
• [DropdownMenu]: added minWidth prop to set up minWidth to DropdownMenu container.
• [Avatar]: property onClick marked as deprecated. It will be removed in future versions.
• [TimePicker]: rework styles for loveship. Size '48' was marked as deprecated and will be deleted in the future releases.
• [FileUpload]: file upload components was added to the Loveship skin.

What's Fixed

• [Button]: fixed disabled styles
• [FiltersPanel]: fixed wrong filter order calculation on new filter adding.
• [RangeDatePicker]: presets.name prop now accept ReactNode.
• [PickerInput]: fixed selected value displaying if item id equals zero or false.
• [ColumnsConfigurationModal]: fixed crashes when new column was added or deleted from columns array
• [ControlWrapper]: component was marked as deprecated and will be removed in feature releases.
• [InstanceItem]: component was marked as deprecated and will be removed in feature releases.
• [MakeMeItem]: component was marked as deprecated and will be removed in feature releases.
• [DraftRTE]: updated to the latest epam/assets package version
• [DataPickerFooter]: added export from loveship and promo packages
• [SlateEditor] fixed custom elements removal when they are last element in editor
• [DataTable]: fixed paddings for first cell in edit mode

v5.1.1

5.1.1 - 27.07.2023

What's New

• [PickerInput]: Added highlighting of the search matching results.
• [PickerInput]: Added search result sorting by search relevance.
• [Tooltip][BreakingChange]: Removed prop trigger. Now tooltip always opens on hover, use dropdown for cases when you need to open body by click.
• [DataTable]: Added column description tooltip to table header. DataTable now has an optional property-callback 'renderColumnsConfigurationModal?: (props) => React.ReactNode' for render your custom ColumnsConfigurationModal.
• [ColumnsConfigurationModal]: Added 'renderItem?: (column) => React.ReactNode' optional property-callback for render your custom column name section.
• [ColumnsConfigurationModal]: Added 'getSearchFields?: (column) => string[];' optional callback to define columns to search in the ColumnsConfigurationModal. We use 'column.caption' by default.
• Added adapter for react-router 6.
  • Note: we strongly discourage the use of react-router 6, as it introduces too many breaking changes, and certain important features (like block and listen) are available only via unstable internal API.

What's Fixed

• [uui-editor]: reduced package size.
• [PickerInput]: fixed initialValue resetting in case of entity value type and async data source.
• [Button]: added missing styles for 'sun' color in loveship skin.
• [FilterPanel]: fixed RangeDatePicker 'to' value change.
• [FilterPanel]: added maxItems prop for filter config, this prop will configure how much items will be shown in filter toggler before collapsing in '+ n items'. Also improved selected items collapsing when they don't fit toggler width.
• [Rating]: fixed rating behavior with 0.5 step.
• [ColumnsConfigurationConfig]: change 'Apply' button color to the 'primary'
• [MainMenu]: fixed hover styles for nested menu items.
• [PickerInput]: reset 'Show only selected' to default value toggler on picker close.
• [DropdownMenu]: fixed button's heigth and submenu position.
• [LabeledInput]: changed info prop type from string to ReactNode.
• [DatePicker]: size '48' marked as @deprecated. It will be removed in future releases.
• [RangeDatePicker]: size '48' marked as @deprecated. It will be removed in future releases.
• [SnackbarCard]: component deprecated and will be deleted in a future releases. Please, use a NotificationCard instead it.

v5.1.0

5.1.0 - 29.06.2023

What's New

Rich Text Editor component update and improvements

UUI SlateEditor was reworked and updated to the actual version of Slate.js framework.
During the update the previous code based of RTE almost completely rewritten due to a lot of breaking changes from Slate.js side. However, we put significant efforts to minimize breaking changes for our users. Therefore, update to the new version of uui-editor package should be seamless and easy.

List of changes:

• [Breaking change]: Changed RTE value format, now it's works with array instead of immutable.js object. Also, there are some additional changes inside slate value structure.
  We make an automatic migration from old state format to the new one, so it's not required any additional actions from your side. But if you make some manipulations with value object on your side, it will cause issues, contact us if you faced with such case.

• Regarding the new value format it's not needed to convert value to JSON via value.toJSON() and Value.fromJSON(value) in your code.

• Added possibility to add caption for images

• Added possibility to insert new line after image/video/iframe

• Added images adjusting when width of RTE container is changing

• Added support of different spell checking extensions, like Grammarly

• Now visited links doesn't highlight with visited style in edit mode

• Long links now fit table cell width

• Improved content copying from Microsoft Word files

• Added autofocus on input in 'Add Link' modal

• A lot of issues and improvements from Slate.js version update

• Fixed page crash after delete horizontal line/separator

• Fixed adding list inside table

• Fixed text selection breaks if mouse cursor lands on toolbar

• Fixed reverse text in list in Safari

• Fixed color bar closing by color click

• Fixed sticky toolbar disappears after selecting any options in it in Safari

• Fixed link replacement without first deleting it

• Fixed error after setting list on empty line

• Fixed error after inserting a list previously cut from the editor

What's Fixed

• [PickerInput]: disabled 'Clear' button in footer in case when disableClear prop is true
• [TimePickerBody]: fixed the bug where minutes values that are not a multiple of minutesStep, are not rounded up to a step
• [TextInput]: fixed incorrectly text color in disabled state in Safari
• [useTableState]: fixed checked state overriding to the initial value

v5.0.1

5.0.1 - 13.06.2023

What's New

• [FiltersPanel]:
  • added picker title to the header in mobile view
  • added possibility to hide search for exact filter using showSearch prop in config
  • added 42 and 48 sizes

What's Fixed

• [PickerInput]: fixed unknown in a single selection mode while data is loading in AsyncDataSource and LazyDataSource, and removed error of missing ids if data is still loading
• [FiltersPanel]: fixed styles for body & toggler according to design

v5.0.0

5.0.0 - 06.06.2023

Themes

This release introduces Themes support. @epam/uui package now contains components, which can be styled differently according to an applied Theme - a set of global CSS variables.

@epam/promo and @epam/loveship packages are re-built on top of @epam/uui package. This allows us to unify codebase, and reduce differences between 'loveship' and 'promo'. We also aligned APIs, functionality and visual appearance between 'promo' and 'loveship' skins, as a result, we removed or deprecated some props or their values.

Pay attention that this release requires some additional actions for the library to work properly.
You can find migration guide and full list of changes here.

Note: Currently, we use Themes internally to implement Loveship and Promo. In future, we allow UUI users to build their own themes, and using Themes variables for customization. However, in this release we haven’t yet finalized Themes APIs (CSS variables names). We can’t yet recommend using Themes internals, e.g. override Themes CSS variables for customization.

Testing facilities and documentation

• Introduced new @epam/uui-test-utils package. It provides a set of helpers, utils and mocks which facilitate creation of unit tests for UUI components.
• Was added Testing documentation. It contains general guidelines, best practices and tools which we are recommending to use for UUI components testing.
  Also, it contains a Cookbook describing typical use cases with code examples as well as frequent questions & answers.

DataSources documentation

• Introduced the new DataSources documentation, that covers a wide range of topics related to the DataSources, accompanied by illustrative examples.
  Note that this is the first revision of this doc, so we would appreciate your feedback and have plans to continuously improve this documentation.

ESM modules support

• EcmaScript modules (ESM) are now included into UUI packages. Usage of ESM should help to eliminate unused code via tree shaking. CommonJs modules will be published along with ESM in the same package for backwards compatibility.

Other changes

• We made UUI compatible with Vite build toolchain. You can find template project of UUI + Vite here.
• The @epam/assets package and "assets" folders inside promo and loveship packages were cleaned up: some "*.scss" files were deleted. Please copy any missing files directly to your project if they are still needed.
• [useTableState]:
  • [BreakingChange]: removed initialFilter prop, if you need to provide any initial state for hook, pre-generate an url link with this state on you side.
  • added storing of sorting, columns config, and paging state into url
  • now hook accepts optional IEditable props, use them for cases when you need to store DataTableState by yourself. If passed it assumed that you will handle all state changes on your side and hook will not store any state into url.
• [ContextProvider]: removed support of legacy React context API, as it were announced in 4.1.0 version. enableLegacyContext prop was deleted.
• [ApiContext]: removed the code which handles /auth/login for the apps, which doesn't handle this themselves.
  If an app doesn't handle /auth/login correctly, this needs to be implemented implicitly. There are several options:
  • Handle /auth/login path server-side. Server should log in user (via redirects to SSO), and - after success, return the following HTML:
    <script>window.opener && window.opener.postMessage("authSuccess", "*")</script>
  • Handle /auth/login path client-side. The simplest method is to add the following to the index.js:
    window.opener && window.location.pathname === '/auth/login' && window.opener.postMessage("authSuccess", "*");
  • If an app implements UUI-based login pages, they need to run the following code after successful login:
    window.opener && window.opener.postMessage("authSuccess", "*")
• [DataTable]: deprecated column shrink property was removed, as it was announced in 4.9.0 version.
• [MainMenuDropdown]: added callback renderBody prop.
• [FiltersPanel]:
  • hide 'Add filter' button, if all filters isAlwaysVisible
  • added presets prop to rangeDatePicker filter
  • added filter prop for datePicker and rangeDatePicker filters
• [PickerInput]:
  • added implicit cascade selection mode. In this mode selecting a parent node means that all children are considered checked,
    but only the checked parent is present in the Picker's value or DataSourceState.checked array.
  • now items which present in selection and doesn't exist in DataSource will be shown in picker as '[Unknown]'
  • added a default footer component for single pickers that includes a "Clear" button
• [DataSources]: DataSources internals are refactored, optimized, and prepared for further improvements
• [PresetsPanel]: added limitation for new preset input (max length 50)
• [DropdownMenu]: added a 400ms delay to the submenu's close and open triggers
• [ModalWindow]: added possibility to provide number for 'width' and 'height' props.
• [TimePicker]: added max values to hours and minutes inputs
• [Tooltip]: added possibility to pass rawProps to the tooltip body
• [RangeDatePicker]: added new onOpenChange prop
• [ErrorHandler]: now in Loveship used NotificationCard component instead of SnackbarCard for notification type errors
• [ErrorHandler]: added additional property onNotificationError to render notifications with custom markup and configured the notification duration.
• Added inputCx and bodyCx props for composed components like PickerInput and DatePickers

What's Fixed

• [PickerInput]:
  • fixed partially checked nodes in lazy lists
  • fixed single select dropdown body closing by the collapse icon if any value was selected.
  • fixed hover affect doesn't appear on "parent" node, in case when it's not selectable but foldable.
  • fixed single select window doesn't close by the collapse icon if any value was selected.
  • fixed renderToggler prop which was used with TextInput / SearchInput
  • fixed picker body closing by click on clear search icon
• [FilterPanel]:
  • fixed "show only selected" toggle not being visible, when selectAll was disabled via DataSource
  • fixed picker body closing by clicking close button or done in mobile view.
• [DataTable]:
  • fixed first column overlapping second column in case when content can't fit the column
  • set 'undefined' value instead of '[]' for sorting, when sorting removed from column
  • fixed mobile view column filter crashes and when column caption not a string
• [Tooltip]:
  • removed default 300px max-width value from styles, you can set max-with using property 'maxWidth'.
  • Fixed a white subpixel line on a tooltip arrow on browsers with zoom >100%.
• [PresetsPanel]: fixed scroll inside "N more" dropdown
• [Dropdown]: The delay to close/open the dropdown has been fixed. In previous version the closeDelay being overwritten constantly while the mouse was moving.
• [Button]: removed 'disabled' attribute if the Button/LinkButton/IconButton is disabled, because it will prevent all events and broke Tooltip at least.
• [RichTextView]: h1 font-size in promo skin changed from 36px to 42px.
• [FilterPanel]: fixed issue with "show only selected" toggle not being visible, when selectAll was disabled via DataSource

v4.10.2

4.10.2 - 24.03.2023

What's Fixed

• [Form]: fixed isChanged calculation for already saved and then changed form
• [Dropdown]: fixed issue with '0' value for closeDelay prop
• [MainMenu]: fixed issue when menu resize caused removing body overflow for opened modals
• [TimePicker]: fixed body content alignment

v4.10.1

4.10.1 - 10.03.2023

What's New

• Exposed our Rollup build toolchain from @epam/uui-build package that you be able to build and publish your own packages.

What's Fixed

• [Typography]: links now underlined
• [NumericInput]: prevented text selection by arrows click
• [NumericInput]: formatter prop replaced with custom formatValue function which converts given input into text instead of number
• [ButtonBase]: set disabled attribute for disabled buttons
• [NumericInput]: improved work with floating numbers
• [FilterPanel]: fixed predicate value change
• [FilterPanel]: fixed range date picker date selection
• [PickerList]: fixed default sorting
• [DataTable]: fixed first column content alignment

v4.10.0

4.10.0 - 06.02.2023

What's New

• React v18 support. You can still use React v17 or lower, no changes required from your side.
• [Tooltip]: Tooltip component implemented based on Dropdown.
  • In accordance with this change, Tooltip received some Dropdown features, such as: closeOnMouseLeave: 'boundary', closeDelay and openDelay
  • [BreakingChange]: Removed prop trigger. Now tooltip always opens on hover, use dropdown for cases when you need to open body by click.
  • [BreakingChange]: Removed prop isVisible. If you need to programmatically control the opening, use the value/onValueChange props.
• [PresetsPanel]: store sorting into preset
• [useTableState]: store sorting into url
• [FlexRow]: added Flexbox properties columnGap and rowGap to setting the spacing between children and rows in case of a FlexRow wrap
• [ColumnsConfigurationModal]: added functionality to deny applying the configuration without selected columns
• [Dropdown]: added openDelay and closeDelay prop, for dropdown which opens by hover
• [useTableState]: adding viewState into DataTableState and store it into presets
• [TimePicker]: change IEditable typing to accept null
• [PresetPanel]: fix copy link action on non-active preset

What’s Fixed

• [VerticalTabButton]: fix text trimmed and text align
• [Switch]: remove margin-left when there is no label
• [Anchor][Button]: added rel='noopener noreferrer' where target='_blank'
• [PickerInput]: update correctly dataSourceState when programmatically handling previously loaded data, if API returns empty array
• [ColumnsConfigurationModal]: Removed disabling of a checkbox if a column has a fix property and fixed the problem with pinning the column after unpinning, if it has fix property in the column config.
• [NumericInput]: fixed NumericInput by preventing rounding up numbers if formatOptions are defined
• [Rating]: fixed loveship Rating color for selected stars
• [useTableState]: now correctly work with react-router baseUrl
• [RangeDatePicker]: move focus from 'to' value to 'from' value, in case when 'from' empty
• [DatePicker, RangeDatePicker]: use props.format value in priority over other acceptable formats
• [useForm]: fix close callback to work properly when lock doesn't exist
• [PresetPanel]: set minHeight: 60px for presets container

v4.9.2

4.9.2 - 14.12.2022

What’s Fixed

• [useForm] - allow to replace getMetadata prop after the first render