@true-engineering/true-react-common-ui-kit 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Checkbox/Checkbox.tsx

@@ -1,85 +1,88 @@
-import { useEffect, useState, ReactNode } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getSelectKeyHandler,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { useStyles, ICheckboxStyles } from './Checkbox.styles';
-
-export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
-  children?: ReactNode;
-  isChecked: boolean | undefined;
-  /** @default false */
-  isSemiChecked?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isReadonly?: boolean;
-  /** @default false */
-  isInvalid?: boolean;
-  value: V;
-  /** @default 'right' */
-  labelPosition?: 'right' | 'left';
-  onSelect: (value: { value: V; isSelected: boolean }) => void;
-}
-
-export function Checkbox<V>({
-  children,
-  isDisabled = false,
-  isReadonly = false,
-  isChecked = false,
-  value,
-  data,
-  testId,
-  isSemiChecked = false,
-  labelPosition = 'right',
-  tweakStyles,
-  onSelect,
-}: ICheckboxProps<V>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const [isSelected, setIsSelected] = useState(false);
-
-  const hasAction = !isDisabled && !isReadonly;
-
-  const onToggle = () => {
-    const isSelectedNext = !isSelected;
-    onSelect({ value, isSelected: isSelectedNext });
-    setIsSelected(isSelectedNext);
-  };
-
-  useEffect(() => {
-    setIsSelected(isChecked);
-  }, [isChecked]);
-
-  return (
-    <label
-      className={clsx(classes.root, {
-        [classes.disabled]: isDisabled,
-        [classes.labelPositionLeft]: labelPosition === 'left',
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <input
-        type="checkbox"
-        className={classes.input}
-        checked={isSelected}
-        disabled={isDisabled}
-        readOnly={isReadonly}
-        {...(hasAction && {
-          onChange: onToggle,
-          onKeyDown: getSelectKeyHandler(onToggle),
-        })}
-      />
-      <div className={clsx(classes.check, isSelected && classes.checked)}>
-        <Icon type={isSemiChecked ? 'minus' : 'check'} />
-      </div>
-      {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
-    </label>
-  );
-}
+import { useEffect, useState, ReactNode, ChangeEvent, KeyboardEvent } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  getSelectKeyHandler,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { useStyles, ICheckboxStyles } from './Checkbox.styles';
+
+export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
+  children?: ReactNode;
+  isChecked: boolean | undefined;
+  /** @default false */
+  isSemiChecked?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isReadonly?: boolean;
+  /** @default false */
+  isInvalid?: boolean;
+  value: V;
+  /** @default 'right' */
+  labelPosition?: 'right' | 'left';
+  onSelect: (
+    value: { value: V; isSelected: boolean },
+    event: ChangeEvent<HTMLInputElement> | KeyboardEvent,
+  ) => void;
+}
+
+export function Checkbox<V>({
+  children,
+  isDisabled = false,
+  isReadonly = false,
+  isChecked = false,
+  value,
+  data,
+  testId,
+  isSemiChecked = false,
+  labelPosition = 'right',
+  tweakStyles,
+  onSelect,
+}: ICheckboxProps<V>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const [isSelected, setIsSelected] = useState(false);
+
+  const hasAction = !isDisabled && !isReadonly;
+
+  const onToggle = (event: ChangeEvent<HTMLInputElement> | KeyboardEvent) => {
+    const isSelectedNext = !isSelected;
+    onSelect({ value, isSelected: isSelectedNext }, event);
+    setIsSelected(isSelectedNext);
+  };
+
+  useEffect(() => {
+    setIsSelected(isChecked);
+  }, [isChecked]);
+
+  return (
+    <label
+      className={clsx(classes.root, {
+        [classes.disabled]: isDisabled,
+        [classes.labelPositionLeft]: labelPosition === 'left',
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <input
+        type="checkbox"
+        className={classes.input}
+        checked={isSelected}
+        disabled={isDisabled}
+        readOnly={isReadonly}
+        {...(hasAction && {
+          onChange: onToggle,
+          onKeyDown: getSelectKeyHandler(onToggle),
+        })}
+      />
+      <div className={clsx(classes.check, isSelected && classes.checked)}>
+        <Icon type={isSemiChecked ? 'minus' : 'check'} />
+      </div>
+      {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
+    </label>
+  );
+}

package/src/components/NewMoreMenu/NewMoreMenu.stories.tsx

@@ -63,6 +63,7 @@ Default.args = {
   hasDefaultStateBackground: true,
   placement: 'bottom-end',
   shouldRenderInBody: false,
+  shouldHideOnScroll: false,
 };
 
 Default.parameters = {

package/src/components/NewMoreMenu/NewMoreMenu.styles.ts

@@ -1,9 +1,8 @@
 import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 import { IListStyles } from '../List';
+import { IWithPopupStyles } from '../WithPopup';
 
 export const useStyles = createThemedStyles('NewMoreMenu', {
-  root: {},
-
   hasCircle: {},
 
   button: {
@@ -31,8 +30,9 @@ export const useStyles = createThemedStyles('NewMoreMenu', {
   disabled: {
     cursor: 'default',
   },
-
-  menu: {},
 });
 
-export type INewMoreMenuStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;
+export type INewMoreMenuStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakList: IListStyles; tweakWithPopup: IWithPopupStyles }
+>;

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isArrayNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IListItem, List } from '../List';
@@ -9,7 +10,7 @@ import { IWithPopupProps, WithPopup } from '../WithPopup';
 import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
 
 export interface INewMoreMenuProps
-  extends Pick<IWithPopupProps, 'middlewares' | 'shouldRenderInBody'>,
+  extends Pick<IWithPopupProps, 'middlewares' | 'shouldHideOnScroll' | 'shouldRenderInBody'>,
     ICommonProps<INewMoreMenuStyles> {
   items: IListItem[];
   /** @default false */
@@ -28,19 +29,34 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
   testId,
   placement,
   middlewares,
+  shouldHideOnScroll,
   shouldRenderInBody,
   tweakStyles,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
 
+  const tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithPopup',
+    currentComponentName: 'NewMoreMenu',
+  });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'NewMoreMenu',
+  });
+
   const isButtonDisabled = isDisabled || !isArrayNotEmpty(items);
 
   return (
     <WithPopup
       placement={placement}
       middlewares={middlewares}
+      shouldHideOnScroll={shouldHideOnScroll}
       shouldRenderInBody={shouldRenderInBody}
       isDisabled={isButtonDisabled}
+      tweakStyles={tweakWithPopupStyles}
       trigger={({ isActive }) => (
         <button
           className={clsx(classes.button, {
@@ -58,7 +74,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
         </button>
       )}
     >
-      {({ onClose }) => <List items={items} onClick={onClose} />}
+      {({ onClose }) => <List items={items} tweakStyles={tweakListStyles} onClick={onClose} />}
     </WithPopup>
   );
 };