@epam/cra-template-uui - npm Package Versions

5.8.1 - 21.06.2024

What's Fixed

• [LazyDataSource]:
  • fixed reload data on DS deps change and fixed fetching minus count on scroll up
  • fixed updating itemsMap after setItems.

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

5.7.2 - 12.04.2024

What's Fixed

• [IconButton]: Replace the isDropdown prop with showDropdownIcon to prevent the automatic appearance of the dropdown icon when using IconButton as the Dropdown target.
• [ApiContext]: Added possibility to send signal about success relogin via localStorage, due to old mechanism with window.opener.postMessage was broken on SSO side by security reasons .
  • To switch to the handling via localStorage replace code of /auth/login endpoint to <html><script>window.localStorage.setItem("uui-auth-recovery-success", "true"); window.close();</script></html>
• [VirtualList]: fixed scrolling on focus to the partially visible row.
  • [Breaking change]: scroll to the focused item is not managed by VirtualList anymore. To execute scroll to focused row, it is required to handle the change of focusIndex in key down handler and pass scrollTo with align = 'nearest' along with focusIndex as part of dataSourceState.

5.7.1 - 29.03.2024

What's Fixed

• [TabButton, VerticalTabButton]: set 18 icon size for all button sizes according to design
• [DataPickerHeader]: changed close icon to match design
• [DataTableHeaderCell]: set 18 size for all icons by design

5.7.0 - 25.03.2024

What's New

• New Scaling Icons Approach:
  • Components now define the icon size based on their props.size value. You no longer need to pass an icon with an appropriate size for the component's size. The provided icon will now be scaled by the component itself.
  • Added a new icons pack, new icons placed under the '@epam/assets/icons' path. Old icons still exist under the '@epam/assets/icons/common' path.
  • This change doesn't require any immediate action from your side. You can continue using icons from the old icons pack. However, please note that icons which were passed to the components without adhering to the guidelines may now be scaled according to these guidelines.
• [DataTable]: Added possibility to pin columns to the right side of the table via columns config dialog
• [DataTable]: added 'Expand All/Collapse All' action in table header. They isn't rendered by default, to turn on pass showFoldAll={ true } to the DataTable props.
• [RTE]: added serializer/deserializer for MD format. Read more here.
• [RTE]: added onFocus prop
• [Modals]: now the Modals closed by default if the URL was changed. You can turn this off passing disableCloseOnRouterChange={true} prop to ModalBlocker component.
• [Modals]: added maxHeight prop
• [Paginator]: added isDisabled property
• [IconButton]: added property size
• [TimePicker]: added property disableClear to disable inputs' clear cross
• [FlexRow]: deprecated property spacing, it will be removed in future releases. Please use columnGap instead. spacing prop now works via columnGap.
• [FlexRow]: added property topBorder to add border on the top of the FlexRow
• [FileUpload]: move wordings to the i18n
• [ColumnsConfigurationModal]: small visual tweaks
• [Avatar]: changed default avatar img

What's Fixed

• [PickerInput]: fixed loading of selectedId with parents.
  • Fixed partially selected with predefined selected value.
  • Fixed fetching missing parents for selected element in PickerInput.
• [PickerInput]: fixed 'unknown records' removing
• [PickerInput]: Fixed focus reset after clicking outside
• [PickerInput]: fixed unnecessary PickerInput onValueChange calls on dataSourceState change(search, focusedIndex change) in single select with valueType=entity.
• [PickerList]: aligned caption by the left side in the footer.
• [DropdownContainer]: disable scroll to the focused element after dropdown close
• [DropdownContainer]: fixed warning about incorrect ref in React strict mode
• [Avatar]: change type of 'img' prop to also accept null value
• [RTE]: fixed table border rendering issues in Firefox
• [RTE]: fixed placeholder position in Safari
• [RTE]: fixed editor focusable area and appearing cursor on first click
• [RTE]: disable image resizing in readonly mode
• [RTE]: Fixed the position of the selected text toolbar within ShadowRoot for Chromium browsers.
• [DataTable]: prevent sorting change on column resize;
• [Blocker]: changed the exit animation duration from 1000ms to 200ms
• [ApiContext]: 'auth-lost' and 'connection-lost' errors in 'manual' error handling mode now handled by ApiContext itself
• [ApiContext]: add link to the login page in 'auth lost' modal
• [IconButton]: fixed property isDropdown;
• [Switch]: fixed property isReadonly;
• [TextArea]: fixed ability to scroll when readonly or disable;
• [Modals]: change 'accent' buttons to 'primary' in UUI built in modals
• [Badge]: small style tweaks according to the design
• [LayoutContext]: fixed uncontrolled accumulation of layers if using useLock hook. Added releaseLayer for manual notification close
• [DataTable]: added background(surface-main) for table container