@true-engineering/true-react-common-ui-kit 3.11.0 → 3.12.0

package/package.json

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,28 +1,54 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Checkbox } from './Checkbox';
+import { useState, FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox as CheckboxComponent, ICheckboxProps } from './Checkbox';
 
-export default {
+const CheckboxComponentWithData: FC<ICheckboxProps<string>> = (props) => {
+  const [isChecked, setIsChecked] = useState(false);
+  const [isSemiChecked, setIsSemiChecked] = useState(false);
+
+  return (
+    <div style={{ gap: 10, display: 'grid' }}>
+      <CheckboxComponent
+        isChecked={isChecked}
+        isSemiChecked={isSemiChecked}
+        onSelect={({ isSelected }) => {
+          setIsChecked(isSelected);
+          setIsSemiChecked(false);
+        }}
+        {...props}
+      >
+        Use wrapping paper
+      </CheckboxComponent>
+      <CheckboxComponent
+        value={undefined}
+        isChecked={isSemiChecked}
+        onSelect={({ isSelected }) => setIsSemiChecked(isSelected)}
+      >
+        Is Semi Checked
+      </CheckboxComponent>
+    </div>
+  );
+};
+
+const meta: Meta<typeof CheckboxComponentWithData> = {
   title: 'Controls/Checkbox',
-  component: Checkbox,
+  component: CheckboxComponentWithData,
   args: {
     value: 'value',
     labelPosition: 'right',
-    isReadonly: false,
     isInvalid: false,
     isDisabled: false,
-    isSemiChecked: false,
+    isReadonly: false,
   },
   parameters: {
     controls: {
       exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
     },
   },
-} as ComponentMeta<typeof Checkbox>;
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxComponent>;
 
-export const Default: ComponentStory<typeof Checkbox> = (args) => (
-  <div style={{ width: 200 }}>
-    <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
-      <div>Some text</div>
-    </Checkbox>
-  </div>
-);
+export const Default: Story = {};

package/src/components/Checkbox/Checkbox.styles.ts

@@ -9,6 +9,10 @@ export const useStyles = createThemedStyles('Checkbox', {
     width: 'fit-content',
   },
 
+  checked: {},
+
+  invalid: {},
+
   disabled: {
     cursor: 'default',
     pointerEvents: 'none',
@@ -37,8 +41,6 @@ export const useStyles = createThemedStyles('Checkbox', {
     boxSizing: 'border-box',
   },
 
-  checked: {},
-
   labelPositionLeft: {
     flexDirection: 'row-reverse',
   },

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, ReactNode, ChangeEvent, KeyboardEvent } from 'react';
+import { ReactNode, ChangeEvent, KeyboardEvent } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
@@ -11,57 +11,53 @@ import { Icon } from '../Icon';
 import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
+  value?: V;
   children?: ReactNode;
-  isChecked: boolean | undefined;
+  /** @default false */
+  isChecked?: boolean;
   /** @default false */
   isSemiChecked?: boolean;
   /** @default false */
+  isInvalid?: 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 },
+  onSelect?: (
+    value: { value?: V; isSelected: boolean },
     event: ChangeEvent<HTMLInputElement> | KeyboardEvent,
   ) => void;
 }
 
 export function Checkbox<V>({
+  value,
   children,
+  isChecked = false,
+  isSemiChecked = false,
+  isInvalid = false,
   isDisabled = false,
   isReadonly = false,
-  isChecked = false,
-  value,
+  labelPosition = 'right',
   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 isSelected = isChecked || isSemiChecked;
 
-  const onToggle = (event: ChangeEvent<HTMLInputElement> | KeyboardEvent) => {
-    const isSelectedNext = !isSelected;
-    onSelect({ value, isSelected: isSelectedNext }, event);
-    setIsSelected(isSelectedNext);
-  };
-
-  useEffect(() => {
-    setIsSelected(isChecked);
-  }, [isChecked]);
+  const onToggle = (event: ChangeEvent<HTMLInputElement> | KeyboardEvent) =>
+    onSelect?.({ value, isSelected: !isSelected }, event);
 
   return (
     <label
       className={clsx(classes.root, {
+        [classes.checked]: isSelected,
+        [classes.invalid]: isInvalid,
         [classes.disabled]: isDisabled,
         [classes.labelPositionLeft]: labelPosition === 'left',
       })}
@@ -69,8 +65,8 @@ export function Checkbox<V>({
       {...addDataAttributes(data)}
     >
       <input
-        type="checkbox"
         className={classes.input}
+        type="checkbox"
         checked={isSelected}
         disabled={isDisabled}
         readOnly={isReadonly}
@@ -79,8 +75,8 @@ export function Checkbox<V>({
           onKeyDown: getSelectKeyHandler(onToggle),
         })}
       />
-      <div className={clsx(classes.check, isSelected && classes.checked)}>
-        <Icon type={isSemiChecked ? 'minus' : 'check'} />
+      <div className={classes.check}>
+        {isSelected && <Icon type={isSemiChecked ? 'minus' : 'check'} />}
       </div>
       {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
     </label>

package/src/components/Icon/icons-list.ts

@@ -123,10 +123,11 @@ export const iconsList = checkIcons({
   check: {
     paths: [
       {
-        d: 'M9.333 11.252l4.96-4.96a1 1 0 011.414 1.415l-5.667 5.667a1 1 0 01-1.414 0L6.293 11.04a1 1 0 111.414-1.414l1.626 1.626z',
+        d: 'm7.5 13.086 7.793-7.793a1 1 0 1 1 1.414 1.414l-8.5 8.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L7.5 13.086Z',
       },
     ],
   },
+  /** @deprecated */
   'check-big': {
     paths: [
       {
@@ -138,17 +139,8 @@ export const iconsList = checkIcons({
     viewBox: '0 0 20 20',
     paths: [
       {
-        d: 'M3 10.5L5.92929 13.4293C5.96834 13.4683 6.03166 13.4683 6.07071 13.4293L13.5 6',
-        strokeWidth: 2,
-        strokeLinecap: 'round' as const,
-        stroke: 'currentColor',
-        fill: 'none',
-      },
-      {
-        d: 'M10.2071 13.2929L9.5 12.5858L8.08579 14L8.79289 14.7071L10.2071 13.2929ZM18.2071 7.70711C18.5976 7.31658 18.5976 6.68342 18.2071 6.29289C17.8166 5.90237 17.1834 5.90237 16.7929 6.29289L18.2071 7.70711ZM9.92929 14.4293L10.6364 13.7222L9.92929 14.4293ZM10.0707 14.4293L9.3636 13.7222L10.0707 14.4293ZM8.79289 14.7071L9.22218 15.1364L10.6364 13.7222L10.2071 13.2929L8.79289 14.7071ZM10.7778 15.1364L18.2071 7.70711L16.7929 6.29289L9.3636 13.7222L10.7778 15.1364ZM9.22218 15.1364C9.65176 15.566 10.3482 15.566 10.7778 15.1364L9.3636 13.7222C9.71508 13.3707 10.2849 13.3707 10.6364 13.7222L9.22218 15.1364Z',
-        fill: 'currentColor',
-        stroke: 'none',
-        fillRule: undefined,
+        d: 'M14.207 6.707a1 1 0 0 0-1.414-1.414L6 12.086 3.707 9.793a1 1 0 0 0-1.414 1.414l2.93 2.93a1.1 1.1 0 0 0 1.555 0l7.43-7.43Zm4 1a1 1 0 0 0-1.414-1.414L10 13.086l-.5-.5L8.086 14l1.136 1.136a1.1 1.1 0 0 0 1.556 0l7.43-7.429Z',
+        fillRule: 'evenodd',
       },
     ],
   },
@@ -466,7 +458,7 @@ export const iconsList = checkIcons({
   minus: {
     paths: [
       {
-        d: 'M16 11H4c-.552 0-1-.448-1-1s.448-1 1-1h12c.552 0 1 .448 1 1s-.448 1-1 1z',
+        d: 'M16 11H4a1 1 0 1 1 0-2h12a1 1 0 1 1 0 2Z',
       },
     ],
   },

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState, useMemo, useRef, useCallback, ReactNode } from 'react';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useIsMounted, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -167,12 +168,14 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
     onChange(undefined);
   };
 
-  const onSelect: ICheckboxProps<Option>['onSelect'] = (val) => {
-    handleSelectValue(
-      val.isSelected
-        ? [...(chosenValues ?? []), val.value]
-        : chosenValues?.filter((v) => getValueId(v) !== getValueId(val.value)) ?? [],
-    );
+  const onSelect: ICheckboxProps<Option>['onSelect'] = ({ value: checkboxValue, isSelected }) => {
+    if (isNotEmpty(checkboxValue)) {
+      handleSelectValue(
+        isSelected
+          ? [...(chosenValues ?? []), checkboxValue]
+          : chosenValues?.filter((v) => getValueId(v) !== getValueId(checkboxValue)) ?? [],
+      );
+    }
   };
 
   const handleKeyDown = (event: KeyboardEvent) => {