@epam/cra-template-uui

5.8.0 - 06.06.2024

What's New

• [Breaking change]: removed previously deprecated components:

  • removed SnackbarCard component in Loveship, use NotificationCard instead;
  • removed ControlWrapper component in Loveship and Promo;

• [Breaking change][Loveship]: removed previously deprecated props:

  • [All skins]:
    • [DropdownMenu]: all DropdownMenu items must be wrapped into DropdownMenuBody;
    • [DropdownContainer]: removed 'color' prop;
    • [TabButton][Tag][Badge][LinkButton][Button][MainMenuButton]: removed 'captionCx' prop. Please use 'cx' prop with cascading to 'uui-caption' global class;
    • [Text]: removed 'font' prop;
    • [IconContainer]: removed color prop. Define icon color by yourself, e.g. via cx or style prop;
    • [Avatar]: removed 'onClick' prop;
  • [Loveship]:
    • [LinkButton]: removed 'sun', 'cobalt', 'violet', 'fuchsia', 'white', 'night50', 'night100', 'night200', 'night300', 'night400', 'night500', 'night700', 'night800', 'night900' colors;
    • [Button]: removed 'night500', 'night600' colors, use 'neutral' instead;
    • [IconButton]: removed 'night200', 'night300', 'night400' colors;
    • [NotificationCard]: removed 'night600' color, use 'primary' instead;
    • [Tooltip]: removed 'night900' prop, use 'neutral' instead;
    • [Badge]:
      • removed 'semitransparent' fill value, use 'outline' instead;
      • removed shape prop, 'round' value will be used by default. If you use 'square' value, use Tag component instead;
      • removed '12' size;
    • [MultiSwitch]: removed 'night600' color value. Use 'gray' instead.
    • [RangeSlider]: removed 'color' prop;
  • [Promo]:
    • [LinkButton]: removed 'amber' color;
    • [Button]: removed 'gray50' color, use 'gray' instead;
    • [Badge]: removed 'semitransparent' fill value, use 'outline' instead;
    • [MultiSwitch]: removed 'gray60' color value. Use 'gray' instead.
    • [NotificationCard]: removed 'gray60' color, use 'primary' instead;
    • [Tooltip]: removed 'gray90' prop, use 'neutral' instead;
  • [uui-core]: helpers cleanup, removed following helpers: LazyLoadedMap, browser, Debouncer, parseIconViewbox, parseStringToCSSProperties, getScreenSize , urlParser, batch

• [useTree]: useTree hook is added.

  • [Features]:
    • [BaseListViewProps.showSelectedOnly]: The flow of rendering selected rows was changed. Previously, there was a separate flow of rendering selected rows, with using the IDataSourceView.getSelectedRows method. Currently, a new property, showSelectedOnly, was added. If this flag is turned on, selected rows are returned from IDataSourceView.getVisibleRows.
    • [Patch items in Lazy/Async/Array dataSources]: the possibility to add/move/delete items from Array/Async/Lazy DataSources was added. To provide this functionality, three options were added:
      • [BaseListViewProps.patch]: To add/move/delete some item from the existing dataset, it is required to pass that item via the patch map.
      • [BaseListViewProps.isDeleted]: To enable deleting of the items, it is required to specify getter of deleting state.
      • [BaseListViewProps.fixItemBetweenSortings]: If enabled, positions of items between sorting changes are fixed.
      • [BaseListViewProps.getNewItemPosition]: To specify the position an item to be moved, getNewItemPosition function may be provided. If not provided, new items will be placed at the top of the list. It can return a various of position configurations:
        • PatchOrdering.TOP - moves an element to the top of the children list;
        • PatchOrdering.BOTTOM - moves an element to the bottom of the children list;
        • By default, all new elements are placed to the top of the children list;
        • If BaseListViewProps.getItemTemporaryOrder returns some value for current item, that item is placed to the specific place and will not be included to the list of top/bottom children.
      • [BaseListViewProps.getItemTemporaryOrder]: To provide specific position for the item, it should be returned from BaseListViewProps.getItemTemporaryOrder function. This order can be placed to the patched item and generated by using getOrderBetween of the previous item temporary order or index and next item temporary order or index.
      • [BaseListViewProps.sortBy]: Items positions are frozen in the list while editing and reset on sorting change. To provide the correct sorting functionality for patched items (especially in LazyDataSources), it is required to provide access to the values of the fields, sorting is performed.
    • [ItemsMap]: immutable map with support of complex Ids was added. It should be used as an input of patch property, described above.
    • [useForm]: support of immutable/mutable maps was added.
    • [DataTable]: rows prop was added, along with getRows.
  • [Breaking changes]:
    • [useView]: onValueChange type was changed. Currently, it should support a state update callback((prevState: DataSourceState) => DataSourceState), instead of a new state value.
    • IDataSource.getView is deprecated. Use IDataSource.useView instead.
    • IDataSourceView.activate is deprecated. This functionality is built in IDataSourceView.useView hook.
    • IDataSourceView.deactivate is deprecated. This functionality is built in IDataSourceView.useView hook.
    • IDataSourceView.getSelectedRows is deprecated. Pass showSelectedOnly = true to IDataSourceView.useView options and access selected rows via IDataSourceView.getVisibleRows().
    • IDataSourceView.loadData is deprecated.
    • LazyListViewProps.legacyLoadDataBehavior is deprecated.

• [useForm]:

  • added setServerValidationState callback to externally change server validation state
  • now it's possible to return the 'remain' value from the beforeLeave callback. In this case, the form will perform the redirect and then lock again afterward.

• [Modals]: added property maxHeight that equals 80dvh in desktop mode and 100dvh in mobile.

• [ColumnsConfigurationModal]: set height and maxHeight equals to 95dvh and mobile breakpoint changed from 640px to 720px as in all other modals.

• [DatePicker][RangeDatePicker]: renderDay prop callback signature updated

• [PickerInput]: added property renderTag which can be used for rendering custom Tags in PickerInput toggler. Exposed PickerTogglerTag component, which is used in PickerInput for default for tag rendering.

• [PickerInput]: when using maxItems prop, selected values are only partially collapsed. Some(equal maxItems value) items remain visible, and the rest are collapsed into the "+N" view. Added tooltip with list of collapsed items to the "+N" tag

• [DataTable]:

  • isAlwaysVisible flag now makes column locked, which means that you can't hide, unpin or reorder this column. Usually applicable for such column without which table because useless. Note, that isAlwaysVisible column should be always fixed to any side of the table, if you didn't specify column.fix prop for such column, 'left' value will be used by default. Also, if you have a few isAlwaysVisible columns, it's necessary to place it together in the start or end(depends on fix prop) of columns array.
  • added property columnsGap?: '12' | '24'
  • added property headerSize?: '36' | '48'. In '48' size, column name can be braked in 2 lines text.

• [uui-editor]:

  • [Breaking change]: plugins prop now typed as PlatePlugin[]. YOu might need to change invocation of baseMarksPlugin() to ...baseMarksPlugin()
  • el.data.colSpan and el.data.rowSpan removed from table cell node as it has duplicates: el.colSpan and el.rowSpan
  • data.cellSizes removed from table element as it has duplicate: el.colSizes
  • data.align removed from image element as it has duplicate: el.align
  • added html serialization for separatorPlugin

• [AdaptivePanel]: added property itemsGap to set gap between items in the AdaptivePanel. You can set any number or select a predefined value.

• [Avatar]: added 'number' type for size prop

• [LinkButton]:

  • added semantic 'accent','critical' and 'white' colors
  • 'contrast' color is deprecated and will be removed in future versions. Please use 'white' color value instead.

• [Button]: added 'white' color

• [IconButton]: added semantic Primary, Accent and Critical colors. Colors info, success, error, warning is deprecated, use new one instead.

What's Fixed

• [Tooltip][Dropdown]: fixed recalculation of boundary area(when we shouldn't close body) after target position was changed in closeOnMouseLeave="boundary" mode
• [DropdownMenu]: prevent page scrolling when navigation through menu items via keyboard up/down keys
• [useForm]:
  • fixed beforeLeave callback invocation in case of redirect at onSuccess callback
  • fixed isInvalid, validationMessage and validationProps value returned from hook in case of server validation. Before they have only client validation value, now it's merged with server validation
• [RangeDatePicker]: removed border-radius for borders between inputs
• [ControlGroup]: removed border-radius for borders between inputs
• [Accordion]: prevent page scrolling when open/close Accordion by space key
• [Slider]: fixed tooltip text calculation with step="0.1" value
• [PickerInput]:
  • fixed setting emptyValue in case of unselecting all picker items
  • don't close picker body on toggler click, if toggler has search value. Before, click on toggler leads to clearing search value
  • remove border radius for mobile view modal container
• [FiltersPanel]: fixed focus on search after body opening and focus on PickerToggler after closing body
• [RTE]:
  • fixed content jumps on editor focus
  • fixed delayed placeholder rendering
• [StatusIndicator]: style tweaks according to the design
• [Badge]: style tweaks according to the design
• [Tag]: style tweaks according to the design
• [Tooltip]: style tweaks according to the design
• [DatePicker][RangeDatePicker]: style tweaks according to design
• [Modals]: make border radius equal 6px for Loveship Light, Loveship Dark, Electric themes