v5.4.1

5.4.1 - 30.11.2023

What's New

• uui.epam.com site now fully support theming. You can choose preferred theme in app main menu.
• [Tag]:
  • rework according to the new design. Added new colors and new solid & outline mods;
  • [Breaking change]: for loveship package, changed default size from 18px to 36px.
• Upload new icons pack
  • [Breaking changes]:
    • 'action-update' icon was removed use 'navigation-refresh' instead
    • 'content-plus' icon was removed use 'action-add' instead
    • 'action-map_pin' icon was removed use 'communication-geo_tag' instead
    • 'table-info-outline' icon was removed use 'notification-info-outline' instead
    • 'action-chat' icon was removed use 'communication-chat' instead
    • 'not-recommended' icon was removed use 'blacklist' instead
    • 'copy-content' icon was removed use 'action-copy_content' instead
    • 'action-clock' icon was removed use 'action-schedule' instead
    • 'notification-close_popup' icon was removed use 'navigation-close' instead

What's Fixed

• [Calendar]: fixed disabled days text color
• [Text]:
  • fixed font-weight prop in skins.
  • fixed color values for semantic colors(info, warning, error, success) and for skin colors
• [TextPlaceholder]: improved animation
• [Panel]: fixed "background" property. Return transparent value by default.
• [MainMenu]: fixed colors for 'electric' theme

v5.4.0

5.4.0 - 21.11.2023

What's New

• This release introduced stable Theming approach and theme css variables:

  • Theme css variable now assumed as a stable API, you can use them into your application styles.
  • A lot of components styles tweaks according to the design changes.
  • You can read more about Themes here - https://uui.epam.com/documents?id=themes

• New EPAM brand 'Electric' Theme and @epam/electric package. To start using Electric theme you need:

  • Add @epam/electric package to your project
  • Add import '@epam/electric/styles.css' to the root of your application
  • Add import '@epam/assets/css/theme/theme_electric.css' to the root of your application
  • Add uui-theme-electric class to the html body node
  • Import all necessary components from @epam/electric package.

• Added Dark theme for Loveship. To start using Dark Loveship theme you need to:

  • Add import '@epam/assets/css/theme/theme_loveship_dark.css'; to the root of your application
  • Add uui-theme-loveship_dark class to the html body node.

• [Fonts]: Added Source Sans Pro font, which properly works with css font-weight and font-style rules.
  You can replace usages Sans Semibold font with Source Sans Pro and font-weight: 600, Sans Italic with Source Sans Pro and font-style: italic etc.
  We also keep old font-faces and variables for backward compatibility. It's recommended to move to the new approach, since old one will be deprecated in feature.

• [skinContext]: removed skinContext from UuiContexts, it's not needed to provide it to the uui services, just remove its usage.

• [Typography]: removed typography mixins. Now typography applies via css classes. If you use mixins, replace it by adding .uui-typography class on the same node.

• [StatusIndicator]: added new StatusIndicator component.

• [CountIndicator]: added new CountIndicator component.

• [Badge] :

  • [Breaking change]: removed fill "white" and "none" modes, use fill="outline" + color instead them.
  • [Breaking change]:removed fill "transparent", use StatusIndicator component instead.
  • [Badge]: deprecated fill "semitransparent", it will be removed in future releases. Use fill="outline' instead.

• [LabeledInput]:

  • added sidenote and footnote props
  • added maxLength and charCounter props. You can use them for cases when you need to show a counter which indicates the limit of symbols in input.
  • added possibility to provide validationMessage as react node

• [TextArea][Breaking Change]: removed maxLength prop, use LabeledInput with maxLength and charCounter={ true } props instead.

• [CheckBox, PickerList, RichTextView, Switch, TabButton, VerticalTabButton, ScrollBars]: removed theme prop. Use Theming approach instead.

• [PresetsPanel]: added the ability to add a modal confirmation window when deleting a preset

What's Fixed

• [useForm]: don't reset inChanged flag in case when server validation fails
• [DataTableRow]: fixed rawProps prop
• [DropdownMenuButton]: use isActive prop in priority under router.isActive
• [PickerInput]: set overflow: hidden; on open for mobile
• [DataTable]: fix columns reorder when there are hidden columns
• [TextArea and TextInput]: fix maxLength for Android
• [DataTable]: fixed column order after pin action
• [PickerInput]: Disable select all button if list are empty, and it has no selection
• [DataTable]: added role=table
• [SlateEditor]: fixed image caption appearance after upload
• [DropdownMenu]: added focusLock prop

v5.2.0

5.2.0 - 16.10.2023

What's New

• [useVirtualList]:
  • Breaking change: scrollToIndex prop was removed, use scrollTo instead.
  • Improved scrollTo functionality. Added configuration of scroll behavior and how to align item after scroll.
  • See the example here
• [DataTable]: added possibility to pin rows inside table. It allows you to make some rows sticky inside their parent group. Use pin callback in getRowOptions function for this. See the example here.
• [BaseListView]:
  • added backgroundReload property. If it is set to true, placeholders appear only on the first load and on fetching additional rows.
    Any filter/search/sorting change doesn't trigger placeholders' rendering. Old data is shown until new data is received. When reloading is started,
  • getListProps now returns isReloading flag, which signals that data is reloading.
• [DataTable][Pickers]: Added Blocker overlay while loading. It appears on initial render and filter, search, sort, page number, and size change.
• [InputAddon]: added InputAddon component that can be used in cases when you need to add prefix or suffix to the your component with ControlGroup.
• Use Vitest instead of Jest in Vite UUI template app

What's Fixed

• [UUI Contexts]: fixed context initialization for react 18 with strict mode
• [PickerItem]: fixed 'cx' prop
• [PickerInput]: remove the dropdown icon if minCharsToSearch prop is passed
• [PickerInput]: fixed paddings with multiline item text
• [PickerInput]: don't clear search on item check via keyboard
• [useUuiServices]: fixed apiPingPath, apiReloginPath, apiServerUrl props
• [AdaptivePanel]: fixed items width calculation in case of decimal values
• [useForm]: recover from isInProgress=true state if onSave is rejected
• [TabButton]: fixed notify dot, that it will not change button width
• [FiltersPanel]: fixed height of filter body in mobile view
• [ErrorHandler]: fixed image for 503 error code in loveship
• [DatePicker]: fixed crashes with different versions of day.js
• [ModalWindow]: changed role attribute value from 'modal' to 'dialog'
• [DropdownMenuButton]: fixed icon color in isDisabled state

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