@true-engineering/true-react-common-ui-kit 3.17.0 → 3.19.0

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
-export * from './Provider';
-export * from './common';
-export * from './types';
-export * from './helpers';
+export * from './Provider';
+export * from './common';
+export * from './types';
+export * from './helpers';

package/dist/theme/types.d.ts

@@ -1,80 +1,80 @@
-import { Styles } from 'react-jss';
-import { Classes, JssValue } from 'jss';
-import type { IAccountInfoStyles, IAddButtonStyles, IButtonStyles, ICheckboxStyles, ICloseButtonStyles, ICommonIcon, IComplexIcon, ICssBaselineStyles, IDateInputStyles, IDatePickerHeaderStyles, IDatePickerStyles, IDescriptionStyles, IDotsPreloaderStyles, IFilterIntervalStyles, IFilterSelectStyles, IFiltersPaneSearchStyles, IFiltersPaneStyles, IFilterValueViewStyles, IFilterWithDatesStyles, IFilterWithPeriodStyles, IFilterWrapperStyles, IFlagStyles, IFlexibleTableCellStyles, IFlexibleTableRowStyles, IFlexibleTableStyles, IIconButtonStyles, IIconStyles, IIncrementInputStyles, IInputStyles, IListItemStyles, IListStyles, IModalStyles, IMoreMenuStyles, IMultiSelectInputStyles, IMultiSelectListStyles, IMultiSelectStyles, INotificationStyles, IPhoneInputCountryListStyles, IPhoneInputStyles, IPreloaderSvgType, IRadioButtonStyles, ISearchInputStyles, ISelectListStyles, ISelectorStyles, ISelectStyles, ISkeletonStyles, IStatusStyles, ISvgIcon, ISvgPreloaderStyles, ISwitchStyles, ITextAreaStyles, ITextButtonStyles, ITextWithInfoStyles, ITextWithTooltipStyles, IThemedPreloaderStyles, IToasterStyles, ITooltipStyles, IWithPopupStyles, INewMoreMenuStyles } from '../components';
-export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
-export type IUseStyles<C extends string, P = unknown> = (data?: P & {
-    theme?: Partial<Styles<C, P>>;
-}) => Classes<C>;
-export type ITweakStyles<StyleCreator, ChildTweakStyles = unknown> = StyleCreator extends IUseStyles<infer C, infer P> ? Partial<Styles<C, P>> & Partial<ChildTweakStyles> : never;
-export interface IComponentStyles {
-    AccountInfo: IAccountInfoStyles;
-    AddButton: IAddButtonStyles;
-    Button: IButtonStyles;
-    CloseButton: ICloseButtonStyles;
-    Checkbox: ICheckboxStyles;
-    CssBaseline: ICssBaselineStyles;
-    DateInput: IDateInputStyles;
-    DatePicker: IDatePickerStyles;
-    DatePickerHeader: IDatePickerHeaderStyles;
-    Description: IDescriptionStyles;
-    DotsPreloader: IDotsPreloaderStyles;
-    SvgPreloader: ISvgPreloaderStyles;
-    FilterValueView: IFilterValueViewStyles;
-    FiltersPane: IFiltersPaneStyles;
-    FilterInterval: IFilterIntervalStyles;
-    FilterSelect: IFilterSelectStyles;
-    FilterWithDates: IFilterWithDatesStyles;
-    FilterWithPeriod: IFilterWithPeriodStyles;
-    FilterWrapper: IFilterWrapperStyles;
-    FiltersPaneSearch: IFiltersPaneSearchStyles;
-    Flag: IFlagStyles;
-    FlexibleTable: IFlexibleTableStyles;
-    FlexibleTableRow: IFlexibleTableRowStyles;
-    FlexibleTableCell: IFlexibleTableCellStyles;
-    Icon: IIconStyles;
-    IconButton: IIconButtonStyles;
-    IncrementInput: IIncrementInputStyles;
-    Input: IInputStyles;
-    List: IListStyles;
-    ListItem: IListItemStyles;
-    Modal: IModalStyles;
-    MoreMenu: IMoreMenuStyles;
-    MultiSelect: IMultiSelectStyles;
-    MultiSelectInput: IMultiSelectInputStyles;
-    MultiSelectList: IMultiSelectListStyles;
-    Notification: INotificationStyles;
-    PhoneInput: IPhoneInputStyles;
-    PhoneInputCountryList: IPhoneInputCountryListStyles;
-    RadioButton: IRadioButtonStyles;
-    SearchInput: ISearchInputStyles;
-    Select: ISelectStyles;
-    SelectList: ISelectListStyles;
-    Selector: ISelectorStyles;
-    Skeleton: ISkeletonStyles;
-    Switch: ISwitchStyles;
-    TextButton: ITextButtonStyles;
-    TextArea: ITextAreaStyles;
-    TextWithInfo: ITextWithInfoStyles;
-    TextWithTooltip: ITextWithTooltipStyles;
-    Status: IStatusStyles;
-    ThemedPreloader: IThemedPreloaderStyles;
-    Tooltip: ITooltipStyles;
-    Toaster: IToasterStyles;
-    WithPopup: IWithPopupStyles;
-    NewMoreMenu: INewMoreMenuStyles;
-}
-export type IComponentName = keyof IComponentStyles;
-export type IUiKitAnimations = Record<string, any>;
-export type IUiKitHelpers = Record<string, Styles | (() => Styles)>;
-export interface IUiKitTheme {
-    name: string;
-    components?: Partial<IComponentStyles>;
-    icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-    complexIcons?: Partial<Record<IComplexIcon, string>>;
-    preloaders?: Partial<Record<IPreloaderSvgType, string>>;
-    animations?: IUiKitAnimations;
-    colors?: Record<string, string>;
-    dimensions?: Record<string, number>;
-    boxShadows?: Record<string, JssValue>;
-    helpers?: IUiKitHelpers;
-}
+import { Styles } from 'react-jss';
+import { Classes, JssValue } from 'jss';
+import type { IAccountInfoStyles, IAddButtonStyles, IButtonStyles, ICheckboxStyles, ICloseButtonStyles, ICommonIcon, IComplexIcon, ICssBaselineStyles, IDateInputStyles, IDatePickerHeaderStyles, IDatePickerStyles, IDescriptionStyles, IDotsPreloaderStyles, IFilterIntervalStyles, IFilterSelectStyles, IFiltersPaneSearchStyles, IFiltersPaneStyles, IFilterValueViewStyles, IFilterWithDatesStyles, IFilterWithPeriodStyles, IFilterWrapperStyles, IFlagStyles, IFlexibleTableCellStyles, IFlexibleTableRowStyles, IFlexibleTableStyles, IIconButtonStyles, IIconStyles, IIncrementInputStyles, IInputStyles, IListItemStyles, IListStyles, IModalStyles, IMoreMenuStyles, IMultiSelectInputStyles, IMultiSelectListStyles, IMultiSelectStyles, INotificationStyles, IPhoneInputCountryListStyles, IPhoneInputStyles, IPreloaderSvgType, IRadioButtonStyles, ISearchInputStyles, ISelectListStyles, ISelectorStyles, ISelectStyles, ISkeletonStyles, IStatusStyles, ISvgIcon, ISvgPreloaderStyles, ISwitchStyles, ITextAreaStyles, ITextButtonStyles, ITextWithInfoStyles, ITextWithTooltipStyles, IThemedPreloaderStyles, IToasterStyles, ITooltipStyles, IWithPopupStyles, INewMoreMenuStyles } from '../components';
+export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
+export type IUseStyles<C extends string, P = unknown> = (data?: P & {
+    theme?: Partial<Styles<C, P>>;
+}) => Classes<C>;
+export type ITweakStyles<StyleCreator, ChildTweakStyles = unknown> = StyleCreator extends IUseStyles<infer C, infer P> ? Partial<Styles<C, P>> & Partial<ChildTweakStyles> : never;
+export interface IComponentStyles {
+    AccountInfo: IAccountInfoStyles;
+    AddButton: IAddButtonStyles;
+    Button: IButtonStyles;
+    CloseButton: ICloseButtonStyles;
+    Checkbox: ICheckboxStyles;
+    CssBaseline: ICssBaselineStyles;
+    DateInput: IDateInputStyles;
+    DatePicker: IDatePickerStyles;
+    DatePickerHeader: IDatePickerHeaderStyles;
+    Description: IDescriptionStyles;
+    DotsPreloader: IDotsPreloaderStyles;
+    SvgPreloader: ISvgPreloaderStyles;
+    FilterValueView: IFilterValueViewStyles;
+    FiltersPane: IFiltersPaneStyles;
+    FilterInterval: IFilterIntervalStyles;
+    FilterSelect: IFilterSelectStyles;
+    FilterWithDates: IFilterWithDatesStyles;
+    FilterWithPeriod: IFilterWithPeriodStyles;
+    FilterWrapper: IFilterWrapperStyles;
+    FiltersPaneSearch: IFiltersPaneSearchStyles;
+    Flag: IFlagStyles;
+    FlexibleTable: IFlexibleTableStyles;
+    FlexibleTableRow: IFlexibleTableRowStyles;
+    FlexibleTableCell: IFlexibleTableCellStyles;
+    Icon: IIconStyles;
+    IconButton: IIconButtonStyles;
+    IncrementInput: IIncrementInputStyles;
+    Input: IInputStyles;
+    List: IListStyles;
+    ListItem: IListItemStyles;
+    Modal: IModalStyles;
+    MoreMenu: IMoreMenuStyles;
+    MultiSelect: IMultiSelectStyles;
+    MultiSelectInput: IMultiSelectInputStyles;
+    MultiSelectList: IMultiSelectListStyles;
+    Notification: INotificationStyles;
+    PhoneInput: IPhoneInputStyles;
+    PhoneInputCountryList: IPhoneInputCountryListStyles;
+    RadioButton: IRadioButtonStyles;
+    SearchInput: ISearchInputStyles;
+    Select: ISelectStyles;
+    SelectList: ISelectListStyles;
+    Selector: ISelectorStyles;
+    Skeleton: ISkeletonStyles;
+    Switch: ISwitchStyles;
+    TextButton: ITextButtonStyles;
+    TextArea: ITextAreaStyles;
+    TextWithInfo: ITextWithInfoStyles;
+    TextWithTooltip: ITextWithTooltipStyles;
+    Status: IStatusStyles;
+    ThemedPreloader: IThemedPreloaderStyles;
+    Tooltip: ITooltipStyles;
+    Toaster: IToasterStyles;
+    WithPopup: IWithPopupStyles;
+    NewMoreMenu: INewMoreMenuStyles;
+}
+export type IComponentName = keyof IComponentStyles;
+export type IUiKitAnimations = Record<string, any>;
+export type IUiKitHelpers = Record<string, Styles | (() => Styles)>;
+export interface IUiKitTheme {
+    name: string;
+    components?: Partial<IComponentStyles>;
+    icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+    complexIcons?: Partial<Record<IComplexIcon, string>>;
+    preloaders?: Partial<Record<IPreloaderSvgType, string>>;
+    animations?: IUiKitAnimations;
+    colors?: Record<string, string>;
+    dimensions?: Record<string, number>;
+    boxShadows?: Record<string, JssValue>;
+    helpers?: IUiKitHelpers;
+}

package/dist/true-react-common-ui-kit.js

@@ -1079,6 +1079,7 @@ var helpers = {
     }
   }
 };
+var SLIDE_UP_ANIMATION_DURATION = 150;
 var SLIDE_UP_POSITION_START = 15;
 var SLIDE_UP_POSITION_END = 0;
 var animations = {
@@ -1092,7 +1093,7 @@ var animations = {
     "slide-up-enter-active": {
       opacity: 1,
       transform: "translateY(".concat(SLIDE_UP_POSITION_END, "px)"),
-      transition: "150ms ease-in-out",
+      transition: "".concat(SLIDE_UP_ANIMATION_DURATION, "ms ease-in-out"),
       transitionProperty: "opacity, transform"
     },
     "slide-up-exit-active": {
@@ -1102,7 +1103,7 @@ var animations = {
     "slide-up-exit": {
       opacity: 0,
       transform: "translateY(".concat(SLIDE_UP_POSITION_START, "px)"),
-      transition: "150ms ease-in-out",
+      transition: "".concat(SLIDE_UP_ANIMATION_DURATION, "ms ease-in-out"),
       transitionProperty: "opacity, transform"
     }
   }
@@ -6591,63 +6592,63 @@ var useMergedRefs = function(refs) {
     return mergeRefs(refs);
   }, refs);
 };
-const avatarGreen = `  <svg\r
-    width="100%"\r
-    height="100%"\r
-    viewBox="0 0 32 32"\r
-    fill="none"\r
-    xmlns="http://www.w3.org/2000/svg"\r
-  >\r
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />\r
-    <mask\r
-      id="mask0_0_12744"\r
-      style="mask-type: 'alpha';"\r
-      maskUnits="userSpaceOnUse"\r
-      x="0"\r
-      y="0"\r
-      width="32"\r
-      height="32"\r
-    >\r
-      <circle cx="16" cy="16" r="16" fill="white" />\r
-    </mask>\r
-    <g mask="url(#mask0_0_12744)">\r
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />\r
-      <mask\r
-        id="mask1_0_12744"\r
-        style="mask-type: 'alpha';"\r
-        maskUnits="userSpaceOnUse"\r
-        x="3"\r
-        y="16"\r
-        width="26"\r
-        height="26"\r
-      >\r
-        <circle cx="16" cy="29" r="13" fill="white" />\r
-      </mask>\r
-      <g mask="url(#mask1_0_12744)">\r
-        <ellipse\r
-          cx="16"\r
-          cy="17.5"\r
-          rx="6"\r
-          ry="7.5"\r
-          fill="#505F79"\r
-          fill-opacity="0.204983"\r
-        />\r
-      </g>\r
-    </g>\r
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />\r
-    <defs>\r
-      <linearGradient\r
-        id="paint0_linear_0_12744"\r
-        x1="13.347"\r
-        y1="46.279"\r
-        x2="33.5318"\r
-        y2="30.8088"\r
-        gradientUnits="userSpaceOnUse"\r
-      >\r
-        <stop stop-color="#ABD229" />\r
-        <stop offset="1" stop-color="#9CD03F" />\r
-      </linearGradient>\r
-    </defs>\r
+const avatarGreen = `  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>`;
 var complexIcons = {
   avatar: avatarGreen
@@ -11470,7 +11471,9 @@ function Select(props) {
     optionsMode
   ]);
   var debounceHandleOnType = useMemo(function() {
-    return debounce$1(handleOnType, debounceTime);
+    return debounce$1(handleOnType, debounceTime, {
+      isImmediate: debounceTime === 0
+    });
   }, [
     handleOnType,
     debounceTime
@@ -17645,6 +17648,21 @@ var useStyles$q = createThemedStyles("WithPopup", {
   },
   popup: {
     zIndex: 5
+  },
+  animationEnd: {},
+  animationStart: {},
+  "dropdown-initial": {
+    extend: "animationEnd"
+  },
+  "dropdown-open": {
+    extend: "animationStart"
+  },
+  "dropdown-close": {
+    visibility: "hidden",
+    extend: "animationEnd"
+  },
+  "dropdown-unmounted": {
+    extend: "animationEnd"
   }
 });
 function _array_like_to_array$a(arr, len) {
@@ -17800,7 +17818,10 @@ var WithPopup = function(param) {
   }), refs = _useFloating.refs, floatingStyles = _useFloating.floatingStyles, context = _useFloating.context;
   var hover = useHover(context, {
     enabled: eventType === "hover",
-    delay: hoverDelay
+    delay: typeof hoverDelay === "number" ? {
+      open: hoverDelay,
+      close: 0
+    } : hoverDelay
   });
   var click = useClick(context, {
     enabled: eventType === "click",
@@ -17815,7 +17836,11 @@ var WithPopup = function(param) {
     click,
     dismiss
   ]).getFloatingProps;
-  var _useTransitionStatus = useTransitionStatus(context), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
+  var _useTransitionStatus = useTransitionStatus(context, {
+    duration: {
+      close: 500
+    }
+  }), isMounted = _useTransitionStatus.isMounted, status = _useTransitionStatus.status;
   return /* @__PURE__ */ jsxs("div", _object_spread_props$q(_object_spread$r({
     ref: refs.setReference,
     className: clsx(classes.root, _define_property$s({}, classes.disabled, isDisabled))
@@ -17838,10 +17863,12 @@ var WithPopup = function(param) {
           className: classes.popup,
           ref: refs.setFloating
         }, getFloatingProps()), {
-          children: isFunction$1(children) ? children({
-            status,
-            onClose: handleClose
-          }) : children
+          children: /* @__PURE__ */ jsx("div", {
+            className: classes["dropdown-".concat(status)],
+            children: isFunction$1(children) ? children({
+              onClose: handleClose
+            }) : children
+          })
         }))
       })
     ]
@@ -17948,20 +17975,6 @@ var useStyles$p = createThemedStyles("FilterWrapper", {
     fontWeight: "bold",
     display: "flex",
     minWidth: 0
-  },
-  animationEnd: animations.slideUp["slide-up-exit"],
-  animationStart: animations.slideUp["slide-up-enter-active"],
-  "dropdown-initial": {
-    extend: "animationEnd"
-  },
-  "dropdown-open": {
-    extend: "animationStart"
-  },
-  "dropdown-close": {
-    extend: "animationEnd"
-  },
-  "dropdown-unmounted": {
-    extend: "animationEnd"
   }
 });
 function _define_property$r(obj, key, value) {
@@ -18021,6 +18034,11 @@ function FilterWrapper(param) {
   var classes = useStyles$p({
     theme: tweakStyles
   });
+  var tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakWithPopup",
+    currentComponentName: "FilterWrapper"
+  });
   var tweakFilterValueViewStyles = useTweakStyles({
     tweakStyles,
     className: "tweakValueView",
@@ -18047,6 +18065,7 @@ function FilterWrapper(param) {
     placement: "bottom-start",
     canBeFlipped: true,
     isDisabled: isBoolean || isDisabled,
+    tweakStyles: tweakWithPopupStyles,
     trigger: function(param2) {
       var isActive = param2.isActive;
       var _obj;
@@ -18083,18 +18102,15 @@ function FilterWrapper(param) {
       }));
     },
     children: function(param2) {
-      var onClose = param2.onClose, status = param2.status;
-      return /* @__PURE__ */ jsx("div", {
-        className: classes["dropdown-".concat(status)],
-        children: /* @__PURE__ */ jsx(Filter, {
-          value,
-          filter,
-          localeKey,
-          locale: locale2,
-          onClose,
-          onChange,
-          testId
-        })
+      var onClose = param2.onClose;
+      return /* @__PURE__ */ jsx(Filter, {
+        value,
+        filter,
+        localeKey,
+        locale: locale2,
+        onClose,
+        onChange,
+        testId
       });
     }
   });
@@ -25230,7 +25246,7 @@ function FlexibleTable(_param) {
               var TitleComponent = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.titleComponent;
               var _itemConfig_titleAlign, _itemConfig_title;
               var _obj;
-              return /* @__PURE__ */ jsx(TableHeader, {
+              return /* @__PURE__ */ jsx(TableHeader, _object_spread_props$k(_object_spread$l({
                 className: clsx(classes.header, (_obj = {}, _define_property$m(_obj, classes.headerSticky, isFirstColumnSticky && i === 0), _define_property$m(_obj, classes.headerSecond, isFirstColumnSticky && i === 1), _obj)),
                 style: {
                   minWidth: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.minWidth,
@@ -25238,13 +25254,16 @@ function FlexibleTable(_param) {
                   maxWidth: itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.maxWidth,
                   textAlign: (_itemConfig_titleAlign = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.titleAlign) !== null && _itemConfig_titleAlign !== void 0 ? _itemConfig_titleAlign : "left"
                 },
-                onClick: function() {
-                  return onHeadClick === null || onHeadClick === void 0 ? void 0 : onHeadClick(key);
-                },
+                onClick: isNotEmpty(onHeadClick) ? function() {
+                  return onHeadClick(key);
+                } : void 0
+              }, addDataAttributes({
+                id: (itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.shouldRenderDataId) ? key : void 0
+              })), {
                 children: isNotEmpty(TitleComponent) ? /* @__PURE__ */ jsx(TitleComponent, {
                   value: headerContent === null || headerContent === void 0 ? void 0 : headerContent[key]
                 }) : (_itemConfig_title = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.title) !== null && _itemConfig_title !== void 0 ? _itemConfig_title : ""
-              }, key);
+              }), key);
             })
           })
         }),
@@ -30389,6 +30408,7 @@ export {
   NumberInput,
   PhoneInput,
   RadioButton,
+  SLIDE_UP_ANIMATION_DURATION,
   ScrollIntoViewIfNeeded,
   SearchInput,
   Select,