@jetbrains/ring-ui 6.0.2-beta.0 → 6.0.2

package/components/hub-source/hub-source.d.ts

@@ -26,17 +26,19 @@ export default class HubSource<I extends Item, U extends string> {
     isClientSideSearch: boolean | null;
     filterFn: (item: I) => boolean;
     constructor(auth: Auth, relativeUrl: U, options?: Partial<HubSourceOptions>);
-    makeRequest(queryParams?: Record<string, unknown>): Promise<any>;
-    makeCachedRequest(params?: Record<string, unknown>): Promise<any>;
+    makeRequest<T = unknown>(queryParams?: Record<string, unknown>): Promise<T>;
+    makeCachedRequest(params?: Record<string, unknown>): Promise<Response<I, U>>;
     static mergeParams(params?: Record<string, unknown>, toMerge?: Record<string, unknown>): Record<string, unknown>;
     checkIsClientSideSearch(res: Response<I, U>): boolean;
     getDefaultFilterFn(query?: string): (it: I) => boolean;
     formatQuery(query?: string): string;
     static validateInputParams(params: Record<string, unknown>): void;
     processResults(res: Response<I, U>): I[];
-    sideDetectionRequest(params?: Record<string, unknown>, query?: string): Promise<any>;
-    doClientSideSearch(params?: Record<string, unknown>): Promise<any>;
-    doServerSideSearch(params?: Record<string, unknown>, query?: string): Promise<any>;
-    getValueFromSuitableSource(query?: string, params?: Record<string, unknown>): Promise<any>;
+    sideDetectionRequest(params?: Record<string, unknown>, query?: string): Promise<unknown>;
+    doClientSideSearch(params?: Record<string, unknown>): Promise<Response<I, U>>;
+    doServerSideSearch(params?: Record<string, unknown>, query?: string): Promise<unknown>;
+    getValueFromSuitableSource(query?: string, params?: Record<string, unknown>): Promise<Partial<Record<U, I[]>> & {
+        total: number;
+    }>;
     get(query: string, params: Record<string, unknown>, filterFn?: (item: I) => boolean): Promise<I[]>;
 }

package/components/icon/icon.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 .icon {
   display: inline-block;
 
@@ -36,8 +34,8 @@
   }
 
   &.compatibilityMode {
-    width: calc(unit * 2);
-    height: calc(unit * 2);
+    width: calc(var(--ring-unit) * 2);
+    height: calc(var(--ring-unit) * 2);
     margin-right: 0;
     margin-left: 0;
   }

package/components/input/input-legacy.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 /*
 Input
 
@@ -18,7 +16,7 @@ Input
 :global(.ring-input) {
   /* .heightS */
   --ring-input-padding-block: 1px;
-  --ring-input-padding-inline: unit;
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-padding-start: var(--ring-input-padding-inline);
   --ring-input-padding-end: var(--ring-input-padding-inline);
 
@@ -114,7 +112,7 @@ Input
 :global(textarea.ring-input) {
   box-sizing: border-box;
 
-  min-height: calc(8 * unit);
+  min-height: calc(8 * var(--ring-unit));
 
   resize: none;
 }

package/components/input/input.css

@@ -1,11 +1,9 @@
 @import "../global/variables.css";
 @import "../button/button.css";
 
-@value unit from "../global/global.css";
-
 .outerContainer {
-  --ring-input-icon-offset: calc(unit * 2.5);
-  --ring-input-padding-inline: unit;
+  --ring-input-icon-offset: calc(var(--ring-unit) * 2.5);
+  --ring-input-padding-inline: var(--ring-unit);
   --ring-input-background-color: var(--ring-content-background-color);
 }
 
@@ -116,7 +114,7 @@
   color: var(--ring-icon-secondary-color);
 
   [dir="rtl"] & {
-    right: unit;
+    right: var(--ring-unit);
     left: auto;
   }
 }
@@ -138,7 +136,7 @@
 
   [dir="rtl"] & {
     right: auto;
-    left: unit;
+    left: var(--ring-unit);
   }
 }
 
@@ -159,7 +157,7 @@ textarea.input {
 }
 
 .errorText {
-  margin-top: calc(unit / 2);
+  margin-top: calc(var(--ring-unit) / 2);
 
   color: var(--ring-error-color);
 
@@ -168,15 +166,15 @@ textarea.input {
 }
 
 .sizeS {
-  width: calc(unit * 12);
+  width: calc(var(--ring-unit) * 12);
 }
 
 .sizeM {
-  width: calc(unit * 30);
+  width: calc(var(--ring-unit) * 30);
 }
 
 .sizeL {
-  width: calc(unit * 50);
+  width: calc(var(--ring-unit) * 50);
 }
 
 .sizeFULL {

package/components/input-size/input-size.css

@@ -1,12 +1,10 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :root {
-  --ring-input-xs: calc(unit * 12);
-  --ring-input-s: calc(unit * 12);
-  --ring-input-m: calc(unit * 30);
-  --ring-input-l: calc(unit * 50);
+  --ring-input-xs: calc(var(--ring-unit) * 12);
+  --ring-input-s: calc(var(--ring-unit) * 12);
+  --ring-input-m: calc(var(--ring-unit) * 30);
+  --ring-input-l: calc(var(--ring-unit) * 50);
 }
 
 /**

package/components/input-size/input-size.stories.js

@@ -0,0 +1,73 @@
+import '../input/input-legacy.css';
+import '../form/form.css';
+import './input-size.css';
+import '../error-bubble/error-bubble-legacy.css';
+import React from 'react';
+
+export default {
+  title: 'Style-only/Input Sizes'
+};
+
+export const basic = () => (
+  <div>
+    <h3 className="example-block">Inputs</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <input id="extra-short-input" type="number" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-input" className="ring-error-bubble active">Extra-short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="short-input" type="number" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-input" className="ring-error-bubble active">Short Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="medium-input" type="number" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-input" className="ring-error-bubble active">Medium Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="long-input" type="number" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-input" className="ring-error-bubble active">Long Input</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <input id="full-width-input" type="number" className="ring-input"/>
+        <label htmlFor="full-width-input" className="ring-error-bubble active">Full-width Input</label>
+      </div>
+    </div>
+
+    <h3 className="example-block">Textareas</h3>
+    <div className="example-block">
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="extra-short-textarea" className="ring-input ring-input-size_xs"/>
+        <label htmlFor="extra-short-textarea" className="ring-error-bubble active">Extra-short Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="short-textarea" className="ring-input ring-input-size_s"/>
+        <label htmlFor="short-textarea" className="ring-error-bubble active">Short Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="medium-textarea" className="ring-input ring-input-size_m"/>
+        <label htmlFor="medium-textarea" className="ring-error-bubble active">Medium Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="long-textarea" className="ring-input ring-input-size_l"/>
+        <label htmlFor="long-textarea" className="ring-error-bubble active">Long Textarea</label>
+      </div>
+      <div className="ring-error-bubble-wrapper">
+        <textarea id="full-width-textarea" className="ring-input"/>
+        <label htmlFor="full-width-textarea" className="ring-error-bubble active">Full-width Textarea</label>
+      </div>
+    </div>
+  </div>
+);
+
+basic.storyName = 'Input Sizes';
+
+basic.parameters = {
+  storyStyles: `
+<style>
+  .example-block {
+    margin: 16px;
+    max-width: 600px;
+  }
+</style>`
+};

package/components/island/header.js

@@ -45,7 +45,7 @@ class Header extends Component {
         });
         const headerStyle = phase != null
             ? {
-                lineHeight: `${this.style('LINE_HEIGHT')}px`,
+                lineHeight: `${this.style('LINE_HEIGHT')}px`, // need to append px because number is a valid line-height value
                 paddingTop: this.style('PADDING_TOP'),
                 paddingBottom: this.style('PADDING_BOTTOM')
             }

package/components/island/island.css

@@ -1,6 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
 @value gradientStart: rgba(255, 255, 255, 0);
 @value gradientStop: var(--ring-content-background-color);
 
@@ -24,7 +23,7 @@
 .header {
   box-sizing: border-box;
   width: 100%;
-  padding: calc(unit * 2) calc(unit * 4) unit;
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4) var(--ring-unit);
 
   transition: border-bottom-color 0.1s;
 
@@ -56,7 +55,7 @@
 }
 
 .narrowIsland .header {
-  padding: 0 calc(unit * 2);
+  padding: 0 calc(var(--ring-unit) * 2);
 }
 
 .content {
@@ -73,7 +72,7 @@
   overflow: auto;
 
   width: 100%;
-  padding: calc(unit * 2) calc(unit * 4);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 
   &:focus:not(:focus-visible) {
     outline: none;
@@ -81,7 +80,7 @@
 }
 
 .narrowIsland .scrollableWrapper {
-  padding: calc(unit * 2) calc(unit * 2);
+  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 2);
 }
 
 .withoutPaddings .scrollableWrapper {
@@ -96,7 +95,7 @@
   display: block;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   content: "";
 
@@ -120,7 +119,7 @@
   display: block;
 
   width: 100%;
-  height: calc(unit * 3);
+  height: calc(var(--ring-unit) * 3);
 
   content: "";
   pointer-events: none;

package/components/island-legacy/island-legacy.css

@@ -1,11 +1,9 @@
-@value unit from "../global/global.css";
-
 /**
  * @name Island Legacy
  */
 
 :global(.ring-island) {
-  min-width: calc(unit * 25 - 2px);
+  min-width: calc(var(--ring-unit) * 25 - 2px);
 
   color: var(--ring-text-color);
 
@@ -37,7 +35,7 @@
 }
 
 :global(.ring-island__header) {
-  min-height: calc(unit * 3 - 2px);
+  min-height: calc(var(--ring-unit) * 3 - 2px);
 
   border-bottom: 1px solid var(--ring-line-color);
   border-top-left-radius: var(--ring-border-radius);
@@ -45,14 +43,14 @@
 
   background-color: var(--ring-content-background-color);
 
-  line-height: calc(unit * 3 - 2px);
+  line-height: calc(var(--ring-unit) * 3 - 2px);
 }
 
 :global(.ring-island__header-btn),
 :global(.ring-island__header-button) {
   float: right;
 
-  padding: 0 calc(unit * 2 - 1px);
+  padding: 0 calc(var(--ring-unit) * 2 - 1px);
 
   /* -1 to account for border */
 
@@ -90,11 +88,11 @@
   display: block;
   float: left;
 
-  padding: 0 calc(unit * 4);
+  padding: 0 calc(var(--ring-unit) * 4);
 
   font-weight: bold;
 }
 
 :global(.ring-island__content) {
-  margin: calc(unit * 2) calc(unit * 4);
+  margin: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 4);
 }

package/components/line/line.css

@@ -1,7 +1,5 @@
 @import "../global/variables.css";
 
-@value unit from "../global/global.css";
-
 :global(.ring-line) {
   display: block;
 
@@ -12,5 +10,5 @@
 }
 
 :global(.ring-line_separated) {
-  margin: calc(unit * 2) 0;
+  margin: calc(var(--ring-unit) * 2) 0;
 }

package/components/link/link.css

@@ -1,67 +1,43 @@
 @import "../global/variables.css";
 
-.link {
+.link,
+.withLinks a {
   cursor: pointer;
   transition: color var(--ring-fast-ease);
 
   color: var(--ring-link-color);
 
-  &,
-  &:hover {
-    text-decoration: none;
+  outline: none;
+
+  text-decoration-line: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+
+  @media (min-resolution: 2dppx) {
+    text-decoration-thickness: 0.5px;
   }
 
   &:hover,
   &.hover {
+    text-decoration-line: underline;
+
     transition: none;
 
     color: var(--ring-link-hover-color);
   }
 
-  &:hover .inner {
-    border-width: 0;
-    border-bottom: 2px solid;
-    border-image-source: linear-gradient(currentcolor 50%, transparent 50%);
-    border-image-slice: 0 0 100% 0;
-  }
-
-  &.active {
-    color: inherit;
-  }
-
-  &.compatibilityUnderlineMode:hover {
-    text-decoration: underline;
-
-    /* stylelint-disable-next-line selector-max-specificity */
-    & .inner {
-      border: none;
-    }
-  }
-
+  /* stylelint-disable-next-line selector-max-specificity */
   &.pseudo:hover {
     text-decoration: none;
-
-    /* stylelint-disable-next-line selector-max-specificity */
-    & .inner {
-      border: none;
-    }
   }
 
-  outline: none;
-
   &:focus-visible {
     box-shadow: 0 0 0 2px var(--ring-border-hover-color);
   }
 }
 
-@media (min-resolution: 2dppx) {
-  .link:hover .inner {
-    border-bottom-width: 1px;
-  }
-}
-
-.text {
-  border-radius: var(--ring-border-radius);
+.link.active {
+  color: inherit;
 }
 
 .inherit:not(:hover) {

package/components/link/link.d.ts

@@ -1,25 +1,20 @@
 import React, { ReactNode, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { ClickableLinkProps } from './clickableLink';
-export declare function setCompatibilityMode(isEnabled: boolean): void;
-export interface WrapTextProps {
-    children: ReactNode;
-    className?: string | null | undefined;
-}
-type ChildrenFunction = (WrapText: ComponentType<WrapTextProps>) => ReactNode;
+/**
+ * @name Link
+ */
 export interface LinkBaseProps {
     active?: boolean | null | undefined;
     inherit?: boolean | null | undefined;
     pseudo?: boolean | null | undefined;
     hover?: boolean | null | undefined;
-    innerClassName?: string | null | undefined;
     'data-test'?: string | null | undefined;
-    children: ReactNode | ChildrenFunction;
+    children: ReactNode;
 }
 export type LinkProps<P extends ClickableLinkProps = ClickableLinkProps> = Omit<P, keyof LinkBaseProps> & LinkBaseProps;
 export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent: ComponentType<P> | string): {
     new (props: LinkProps<P> | Readonly<LinkProps<P>>): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -43,7 +38,6 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<P>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<P>, context: any): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<P>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -68,12 +62,11 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
     };
     propTypes: {
         className: PropTypes.Requireable<string>;
-        innerClassName: PropTypes.Requireable<string>;
         active: PropTypes.Requireable<boolean>;
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -83,7 +76,6 @@ export declare function linkHOC<P extends ClickableLinkProps>(ComposedComponent:
 };
 declare const _default: {
     new (props: LinkProps<ClickableLinkProps> | Readonly<LinkProps<ClickableLinkProps>>): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -107,7 +99,6 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<LinkProps<ClickableLinkProps>>, nextState: Readonly<{}>, nextContext: any): void;
     };
     new (props: LinkProps<ClickableLinkProps>, context: any): {
-        getChildren(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<LinkProps<ClickableLinkProps>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
@@ -132,12 +123,11 @@ declare const _default: {
     };
     propTypes: {
         className: PropTypes.Requireable<string>;
-        innerClassName: PropTypes.Requireable<string>;
         active: PropTypes.Requireable<boolean>;
         inherit: PropTypes.Requireable<boolean>;
         pseudo: PropTypes.Requireable<boolean>;
         hover: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         'data-test': PropTypes.Requireable<string>;
         href: PropTypes.Requireable<string>;
         onPlainLeftClick: PropTypes.Requireable<(...args: any[]) => any>;

package/components/link/link.js

@@ -1,71 +1,42 @@
-import React, { PureComponent, memo } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import memoize from '../global/memoize';
 import dataTests from '../global/data-tests';
 import ClickableLink from './clickableLink';
 import styles from './link.css';
-/**
- * @name Link
- */
-let isCompatibilityMode = false;
-export function setCompatibilityMode(isEnabled) {
-    isCompatibilityMode = isEnabled;
-}
-const makeWrapText = memoize((innerClassName) => {
-    function WrapText({ className, children }) {
-        const classes = classNames(styles.inner, className, innerClassName);
-        return <span className={classes}>{children}</span>;
-    }
-    WrapText.propTypes = {
-        className: PropTypes.string,
-        children: PropTypes.node
-    };
-    return memo(WrapText);
-});
 export function linkHOC(ComposedComponent) {
     const isCustom = typeof ComposedComponent !== 'string' && ComposedComponent !== ClickableLink;
     return class Link extends PureComponent {
         static propTypes = {
             className: PropTypes.string,
-            innerClassName: PropTypes.string,
             active: PropTypes.bool,
             inherit: PropTypes.bool,
             pseudo: PropTypes.bool,
             hover: PropTypes.bool,
-            children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+            children: PropTypes.node,
             'data-test': PropTypes.string,
             href: PropTypes.string,
             onPlainLeftClick: PropTypes.func,
             onClick: PropTypes.func
         };
-        getChildren() {
-            const { children, innerClassName } = this.props;
-            const WrapText = makeWrapText(innerClassName);
-            return typeof children === 'function'
-                ? children(WrapText)
-                : <WrapText>{children}</WrapText>;
-        }
         render() {
-            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, innerClassName, children, onPlainLeftClick, onClick, ...restProps } = this.props;
+            const { active, inherit, pseudo, hover, className, 'data-test': dataTest, href, children, onPlainLeftClick, onClick, ...restProps } = this.props;
             const useButton = pseudo || !isCustom && href == null;
             const classes = classNames(styles.link, className, {
                 [styles.active]: active,
                 [styles.inherit]: inherit,
                 [styles.hover]: hover,
-                [styles.compatibilityUnderlineMode]: isCompatibilityMode,
-                [styles.pseudo]: useButton,
-                [styles.text]: typeof children !== 'function'
+                [styles.pseudo]: useButton
             });
             let props = restProps;
             if (isCustom && !props.activeClassName) {
                 props = { ...props, activeClassName: styles.active };
             }
             if (useButton) {
-                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{this.getChildren()}</button>);
+                return (<button type="button" {...props} className={classes} onClick={(onClick || onPlainLeftClick)} data-test={dataTests('ring-link', dataTest)}>{children}</button>);
             }
             return (<ComposedComponent {...props} href={href} className={classes} onClick={onClick} onPlainLeftClick={onPlainLeftClick} data-test={dataTests('ring-link', dataTest)}>
-          {this.getChildren()}
+          {children}
         </ComposedComponent>);
         }
     };

package/components/list/consts.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentType, ReactNode, SyntheticEvent } from 'react';
+import React, { ComponentType, ReactNode, ReactElement, SyntheticEvent } from 'react';
 import { LinkProps } from '../link/link';
 import { IconType, Size } from '../icon/icon';
 import { ClickableLinkProps } from '../link/clickableLink';
@@ -14,17 +14,17 @@ export declare enum Type {
     TITLE = 5,
     MARGIN = 6
 }
-export declare enum Dimension {
-    ITEM_PADDING = 16,
-    ITEM_HEIGHT = 32,
-    COMPACT_ITEM_HEIGHT = 24,
-    SEPARATOR_HEIGHT = 25,
-    SEPARATOR_FIRST_HEIGHT = 16,
-    SEPARATOR_TEXT_HEIGHT = 18,
-    TITLE_HEIGHT = 42,
-    INNER_PADDING = 8,
-    MARGIN = 8
-}
+export declare const Dimension: {
+    ITEM_PADDING: number;
+    ITEM_HEIGHT: number;
+    COMPACT_ITEM_HEIGHT: number;
+    SEPARATOR_HEIGHT: number;
+    SEPARATOR_FIRST_HEIGHT: number;
+    SEPARATOR_TEXT_HEIGHT: number;
+    TITLE_HEIGHT: number;
+    INNER_PADDING: number;
+    MARGIN: number;
+};
 export declare const DEFAULT_ITEM_TYPE = Type.ITEM;
 export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' | 'onMouseUp'>> & {
     rgItemType?: Type | null | undefined;
@@ -55,6 +55,7 @@ export type ListDataItem<T = unknown> = T & Partial<Omit<LinkProps, 'onClick' |
     originalModel?: never;
     LinkComponent?: ComponentType<ClickableLinkProps> | string | null | undefined;
     template?: ReactNode | ((props: ListDataItemProps<T>) => ReactNode);
+    labelWrapper?: (children: ReactNode) => ReactElement;
     custom?: boolean | null | undefined;
     onClick?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;
     onMouseUp?: ((item: ListDataItem<T>, event: Event | SyntheticEvent) => void) | null | undefined;