@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.1

package/README.md

@@ -10,6 +10,22 @@
 
 # Release Notes
 
+## v3.9.1
+
+### Changes
+
+- **WithPopup** для `trigger` добавлен `testId`
+
+## v3.9.0
+
+### Changes
+
+- **Select**: 
+  1. Добавлена поддержка для `readonly` опций
+  2. Добавлена типизация для `event` в `onChange`
+- **WithPopup**: добавлен `z-index: 5` для дропдауна
+- **NewMoreMenu**: добавлены твикстайлс для **List** и **WithPopup**
+
 ## v3.8.1
 
 ### Changes

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, ChangeEvent, KeyboardEvent } from 'react';
 import { ICommonProps } from '../../types';
 import { ICheckboxStyles } from './Checkbox.styles';
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
@@ -18,6 +18,6 @@ export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
     onSelect: (value: {
         value: V;
         isSelected: boolean;
-    }) => void;
+    }, event: ChangeEvent<HTMLInputElement> | KeyboardEvent) => void;
 }
 export declare function Checkbox<V>({ children, isDisabled, isReadonly, isChecked, value, data, testId, isSemiChecked, labelPosition, tweakStyles, onSelect, }: ICheckboxProps<V>): JSX.Element;

package/dist/components/NewMoreMenu/NewMoreMenu.styles.d.ts

@@ -1,6 +1,8 @@
 import { ITweakStyles } from '../../theme';
 import { IListStyles } from '../List';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "button" | "icon" | "menu" | "active" | "disabled" | "hasCircle", unknown>;
+import { IWithPopupStyles } from '../WithPopup';
+export declare const useStyles: import("../../theme").IUseStyles<"button" | "icon" | "active" | "disabled" | "hasCircle", unknown>;
 export type INewMoreMenuStyles = ITweakStyles<typeof useStyles, {
     tweakList: IListStyles;
+    tweakWithPopup: IWithPopupStyles;
 }>;

package/dist/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.d.ts

@@ -175,7 +175,7 @@ export declare class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoVie
         'aria-describedby'?: string | undefined;
         'aria-details'?: string | undefined;
         'aria-disabled'?: (boolean | "false" | "true") | undefined;
-        'aria-dropeffect'?: "copy" | "none" | "link" | "move" | "execute" | "popup" | undefined;
+        'aria-dropeffect'?: "copy" | "none" | "link" | "move" | "popup" | "execute" | undefined;
         'aria-errormessage'?: string | undefined;
         'aria-expanded'?: (boolean | "false" | "true") | undefined;
         'aria-flowto'?: string | undefined;

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, SyntheticEvent } from 'react';
+import { ReactNode, KeyboardEvent, MouseEvent, SyntheticEvent, ChangeEvent, FormEvent } from 'react';
 import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
 import { IIcon } from '../Icon';
 import { IInputProps } from '../Input';
@@ -19,7 +19,7 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
     dropdownOptions?: IDropdownWithPopperOptions;
     /** @default 'chevron-down' */
     dropdownIcon?: IIcon;
-    options: Value[];
+    options: Value[] | Readonly<Value[]>;
     value: Value | undefined;
     /** @default true */
     shouldScrollToList?: boolean;
@@ -28,7 +28,7 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
         shouldRenderInList: true;
     } & Pick<ISearchInputProps, 'placeholder'>;
     isOptionDisabled?: (option: Value) => boolean;
-    onChange: (value?: Value) => void;
+    onChange: (value: Value | undefined, event: MouseEvent<HTMLElement> | KeyboardEvent | ChangeEvent<HTMLElement> | FormEvent<HTMLElement>) => void;
     onBlur?: (event: Event | SyntheticEvent) => void;
     onType?: (value: string) => Promise<void>;
     optionsFilter?: (options: Value[], query: string) => Value[];
@@ -41,7 +41,7 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
 export interface IMultipleSelectProps<Value> extends Omit<ISelectProps<Value>, 'value' | 'onChange' | 'compareValuesOnChange'> {
     isMultiSelect: true;
     value: IMultipleSelectValue<Value> | undefined;
-    onChange: (value?: IMultipleSelectValue<Value>) => void;
+    onChange: (value: IMultipleSelectValue<Value> | undefined, event: MouseEvent<HTMLElement> | KeyboardEvent | ChangeEvent<HTMLElement> | FormEvent<HTMLElement>) => void;
     compareValuesOnChange?: (v1?: IMultipleSelectValue<Value>, v2?: IMultipleSelectValue<Value>) => boolean;
 }
 export declare function Select<Value>(props: ISelectProps<Value> | IMultipleSelectProps<Value>): JSX.Element;

package/dist/components/Select/components/SelectList/SelectList.d.ts

@@ -1,20 +1,19 @@
-import { ReactNode, MouseEvent } from 'react';
+import { ReactNode } from 'react';
 import { ICommonProps } from '../../../../types';
+import { ISelectListItemProps } from '../SelectListItem';
 import { ISelectListStyles } from './SelectList.styles';
-export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles> {
-    options: Value[];
+export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles>, Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect'> {
+    options: Value[] | Readonly<Value[]>;
     focusedIndex?: number;
     activeValue?: Value | Value[];
     noMatchesLabel?: string;
     isLoading?: boolean;
     loadingLabel?: ReactNode;
     defaultOptionLabel?: ReactNode;
-    allOptionsLabel?: string;
+    allOptionsLabel?: ReactNode;
     areAllOptionsSelected?: boolean;
     shouldScrollToList?: boolean;
     customListHeader?: ReactNode;
-    onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-    onToggleCheckbox?: (index: number, isSelected: boolean) => void;
     isOptionDisabled: (value: Value) => boolean;
     convertValueToString: (value: Value) => string | undefined;
     convertValueToReactNode?: (value: Value, isDisabled: boolean) => ReactNode;

package/dist/components/Select/components/SelectListItem/SelectListItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEvent, FC } from 'react';
+import { ReactNode, MouseEvent, FC, KeyboardEvent, ChangeEvent } from 'react';
 import { Classes } from 'jss';
 export interface ISelectListItemProps {
     index: number;
@@ -9,6 +9,6 @@ export interface ISelectListItemProps {
     children: ReactNode;
     classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>;
     onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-    onToggleCheckbox?: (index: number, isSelected: boolean) => void;
+    onToggleCheckbox?: (index: number, isSelected: boolean, event: ChangeEvent<HTMLElement> | KeyboardEvent) => void;
 }
 export declare const SelectListItem: FC<ISelectListItemProps>;

package/dist/components/WithPopup/WithPopup.styles.d.ts

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "trigger", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "trigger" | "popup", unknown>;
 export type IWithPopupStyles = ITweakStyles<typeof useStyles>;

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

@@ -9110,12 +9110,12 @@ function Checkbox(param) {
   });
   var _useState = _sliced_to_array$o(useState(false), 2), isSelected = _useState[0], setIsSelected = _useState[1];
   var hasAction = !isDisabled && !isReadonly;
-  var onToggle = function() {
+  var onToggle = function(event) {
     var isSelectedNext = !isSelected;
     onSelect({
       value,
       isSelected: isSelectedNext
-    });
+    }, event);
     setIsSelected(isSelectedNext);
   };
   useEffect(function() {
@@ -10851,8 +10851,8 @@ var SelectListItem = function(param) {
       isSemiChecked,
       isDisabled,
       tweakStyles: checkboxStyles$1,
-      onSelect: function(v) {
-        return onToggleCheckbox(index, v.isSelected);
+      onSelect: function(v, event) {
+        return onToggleCheckbox(index, v.isSelected, event);
       },
       children
     }) : children
@@ -10974,7 +10974,7 @@ function SelectList(param) {
               },
               children: defaultOptionLabel
             }),
-            isStringNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
+            isReactNodeNotEmpty(allOptionsLabel) && /* @__PURE__ */ jsx(SelectListItem, {
               classes,
               index: ALL_OPTION_INDEX,
               isSemiChecked: selectedOptionsCount > 0 && !areAllOptionsSelected,
@@ -11455,7 +11455,9 @@ function Select(props) {
   var classes = useStyles$B({
     theme: tweakStyles
   });
-  var shouldRenderSearchInputInList = (searchInput === null || searchInput === void 0 ? void 0 : searchInput.shouldRenderInList) === true;
+  var _ref = searchInput !== null && searchInput !== void 0 ? searchInput : {}, tmp = _ref.shouldRenderInList, shouldRenderSearchInputInList = tmp === void 0 ? false : tmp, searchInputProps = _object_without_properties$9(_ref, [
+    "shouldRenderInList"
+  ]);
   var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
   var isMultiSelect = isMultiSelectValue(props);
   var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
@@ -11534,7 +11536,11 @@ function Select(props) {
       return acc;
     }, []));
   }, [
-    filteredOptions
+    filteredOptions,
+    hasDefaultOption,
+    isOptionDisabled,
+    shouldShowAllOption,
+    shouldShowDefaultOption
   ]);
   var stringValue = isNotEmpty(strValue) ? convertValueToString(strValue) : void 0;
   var showedStringValue = areAllOptionsSelected && isNotEmpty(allOptionsLabel) ? allOptionsLabel : stringValue;
@@ -11577,9 +11583,9 @@ function Select(props) {
       handleListClose(event);
     }
   };
-  var handleOnChange = useCallback(function(newValue) {
+  var handleOnChange = useCallback(function(newValue, event) {
     if (!compareValuesOnChange(value, newValue)) {
-      onChange(newValue);
+      onChange(newValue, event);
     }
   }, [
     value,
@@ -11588,7 +11594,7 @@ function Select(props) {
   ]);
   var handleOptionSelect = useCallback(function(index, event) {
     var _input_current;
-    handleOnChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index]);
+    handleOnChange(index === DEFAULT_OPTION_INDEX ? void 0 : filteredOptions[index], event);
     handleListClose(event);
     (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.blur();
   }, [
@@ -11596,16 +11602,16 @@ function Select(props) {
     handleListClose,
     filteredOptions
   ]);
-  var handleToggleOptionCheckbox = useCallback(function(index, isSelected) {
+  var handleToggleOptionCheckbox = useCallback(function(index, isSelected, event) {
     if (!isMultiSelect) {
       return;
     }
     if (index === DEFAULT_OPTION_INDEX || index === ALL_OPTION_INDEX && !isSelected) {
-      handleOnChange(void 0);
+      handleOnChange(void 0, event);
       return;
     }
     if (index === ALL_OPTION_INDEX && isSelected) {
-      handleOnChange(availableOptions);
+      handleOnChange(availableOptions, event);
       return;
     }
     var option = filteredOptions[index];
@@ -11619,12 +11625,14 @@ function Select(props) {
       value === null || value === void 0 ? void 0 : value.filter(function(o) {
         return convertToId(o) !== convertToId(option);
       })
-    ));
+    ), event);
   }, [
-    handleOnChange,
-    filteredOptions,
     isMultiSelect,
-    value
+    filteredOptions,
+    handleOnChange,
+    value,
+    availableOptions,
+    convertToId
   ]);
   var handleOnType = useCallback(function() {
     var _ref2 = _async_to_generator$4(function(v) {
@@ -11661,14 +11669,17 @@ function Select(props) {
       return _ref2.apply(this, arguments);
     };
   }(), [
+    isMounted,
     onType,
     optionsMode
   ]);
-  var debounceHandleOnType = useCallback(debounce$1(handleOnType, debounceTime), [
+  var debounceHandleOnType = useMemo(function() {
+    return debounce$1(handleOnType, debounceTime);
+  }, [
     handleOnType,
     debounceTime
   ]);
-  var handleInputChange = function(v) {
+  var handleInputChange = function(v, event) {
     if (onType !== void 0) {
       debounceHandleOnType(v);
     }
@@ -11676,7 +11687,7 @@ function Select(props) {
       setShouldShowDefaultOption(v === "");
     }
     if (v === "" && !hasSearchInputInList) {
-      handleOnChange(void 0);
+      handleOnChange(void 0, event);
     }
     setSearchValue(v);
   };
@@ -11706,7 +11717,7 @@ function Select(props) {
               return convertToId(opt) === valueIdToSelect;
             })) !== null && _value_some !== void 0 ? _value_some : false;
           }
-          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected);
+          handleToggleOptionCheckbox(indexToSelect, !isThisValueAlreadySelected, event);
         } else {
           handleOptionSelect(indexToSelect, event);
         }
@@ -11748,7 +11759,7 @@ function Select(props) {
     hasSearchInputInList) && // Последняя проверка на случай, если мы че то ищем в опциях
     (optionsMode === "normal" || hasEnoughSymbolsToSearch)
   );
-  var _ref = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
+  var _ref1 = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref1.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref1.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref1.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
   var popperData = useDropdown({
     isOpen,
     onDropdownClose: handleListClose,
@@ -11787,15 +11798,15 @@ function Select(props) {
   }, popperData === null || popperData === void 0 ? void 0 : popperData.attributes.popper), {
     children: isOpen && /* @__PURE__ */ jsx(SelectList, {
       options: filteredOptions,
-      defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption ? defaultOptionLabel : void 0,
-      allOptionsLabel: shouldShowAllOption ? allOptionsLabel : void 0,
+      defaultOptionLabel: hasDefaultOption && shouldShowDefaultOption && defaultOptionLabel,
+      allOptionsLabel: shouldShowAllOption && allOptionsLabel,
       areAllOptionsSelected,
-      customListHeader: hasSearchInputInList ? /* @__PURE__ */ jsx(SearchInput, _object_spread$D({
+      customListHeader: hasSearchInputInList && /* @__PURE__ */ jsx(SearchInput, _object_spread$D({
         value: searchValue,
         onChange: handleInputChange,
         tweakStyles: tweakSearchInputStyles,
         placeholder: "Поиск"
-      }, searchInput)) : void 0,
+      }, searchInputProps)),
       noMatchesLabel,
       focusedIndex: focusedListCellIndex,
       activeValue: value,
@@ -30086,6 +30097,9 @@ var useStyles$1 = createThemedStyles("WithPopup", {
   },
   trigger: {
     cursor: "pointer"
+  },
+  popup: {
+    zIndex: 5
   }
 });
 function _array_like_to_array(arr, len) {
@@ -30264,19 +30278,21 @@ var WithPopup = function(param) {
     className: clsx(classes.root, _define_property$1({}, classes.disabled, isDisabled))
   }), addDataTestId(testId), addDataAttributes(data)), {
     children: [
-      /* @__PURE__ */ jsx("div", {
+      /* @__PURE__ */ jsx("div", _object_spread_props$1(_object_spread$1({
         className: classes.trigger,
         onClick: eventType === "click" ? function(e) {
           return handleToggle(!isOpen, e);
-        } : void 0,
+        } : void 0
+      }, addDataTestId(testId, "trigger")), {
         children: isFunction$1(Trigger) ? /* @__PURE__ */ jsx(Trigger, {
           isActive: isOpen
         }) : Trigger
-      }),
+      })),
       isOpen && /* @__PURE__ */ jsx(FloatingPortal, {
         root: !shouldRenderInBody ? refs.reference.current : void 0,
         children: /* @__PURE__ */ jsx("div", _object_spread_props$1(_object_spread$1({
           style: floatingStyles,
+          className: classes.popup,
           ref: refs.setFloating
         }, getFloatingProps()), {
           children: isFunction$1(Popup) ? /* @__PURE__ */ jsx(Popup, {
@@ -30288,7 +30304,6 @@ var WithPopup = function(param) {
   }));
 };
 var useStyles = createThemedStyles("NewMoreMenu", {
-  root: {},
   hasCircle: {},
   button: {
     display: "flex",
@@ -30311,8 +30326,7 @@ var useStyles = createThemedStyles("NewMoreMenu", {
   active: {},
   disabled: {
     cursor: "default"
-  },
-  menu: {}
+  }
 });
 function _define_property(obj, key, value) {
   if (key in obj) {
@@ -30371,6 +30385,16 @@ var NewMoreMenu = function(param) {
   var classes = useStyles({
     theme: tweakStyles
   });
+  var tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakWithPopup",
+    currentComponentName: "NewMoreMenu"
+  });
+  var tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: "tweakList",
+    currentComponentName: "NewMoreMenu"
+  });
   var isButtonDisabled = isDisabled || !isArrayNotEmpty(items);
   return /* @__PURE__ */ jsx(WithPopup, {
     placement,
@@ -30378,6 +30402,7 @@ var NewMoreMenu = function(param) {
     shouldHideOnScroll,
     shouldRenderInBody,
     isDisabled: isButtonDisabled,
+    tweakStyles: tweakWithPopupStyles,
     trigger: function(param2) {
       var isActive = param2.isActive;
       var _obj;
@@ -30397,6 +30422,7 @@ var NewMoreMenu = function(param) {
       var onClose = param2.onClose;
       return /* @__PURE__ */ jsx(List, {
         items,
+        tweakStyles: tweakListStyles,
         onClick: onClose
       });
     }