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

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -1,32 +1,31 @@
-import { ReactNode, useMemo, MouseEvent } from 'react';
+import { ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
-  isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
 import { IMultipleSelectValue } from '../../types';
-import { SelectListItem } from '../SelectListItem';
+import { ISelectListItemProps, SelectListItem } from '../SelectListItem';
 import { useStyles, 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;
@@ -111,7 +110,7 @@ export function SelectList<Value>({
                 {defaultOptionLabel}
               </ScrollIntoViewIfNeeded>
             )}
-            {isStringNotEmpty(allOptionsLabel) && (
+            {isReactNodeNotEmpty(allOptionsLabel) && (
               <SelectListItem
                 classes={classes}
                 index={ALL_OPTION_INDEX}

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, MouseEvent, FC } from 'react';
+import { ReactNode, MouseEvent, FC, KeyboardEvent, ChangeEvent } from 'react';
 import clsx from 'clsx';
 import { Classes } from 'jss';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
@@ -16,7 +16,11 @@ export interface ISelectListItemProps {
   children: ReactNode;
   classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
   onOptionSelect: (index: number, event: MouseEvent<HTMLElement>) => void;
-  onToggleCheckbox?: (index: number, isSelected: boolean) => void;
+  onToggleCheckbox?: (
+    index: number,
+    isSelected: boolean,
+    event: ChangeEvent<HTMLElement> | KeyboardEvent,
+  ) => void;
 }
 
 export const SelectListItem: FC<ISelectListItemProps> = ({
@@ -56,7 +60,7 @@ export const SelectListItem: FC<ISelectListItemProps> = ({
           isSemiChecked={isSemiChecked}
           isDisabled={isDisabled}
           tweakStyles={checkboxStyles}
-          onSelect={(v) => onToggleCheckbox(index, v.isSelected)}
+          onSelect={(v, event) => onToggleCheckbox(index, v.isSelected, event)}
         >
           {children}
         </Checkbox>

package/src/components/Select/constants.ts

@@ -1,2 +1,2 @@
-export const DEFAULT_OPTION_INDEX = -2;
-export const ALL_OPTION_INDEX = -1;
+export const DEFAULT_OPTION_INDEX = -2;
+export const ALL_OPTION_INDEX = -1;

package/src/components/Select/types.ts

@@ -1 +1 @@
-export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
+export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;

package/src/components/Selector/Selector.stories.tsx

@@ -1,62 +1,62 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { Status } from '../Status';
-import { Selector } from './Selector';
-import { ISelectorOption } from './types';
-
-const options: Array<ISelectorOption<string>> = [
-  {
-    label: 'Label 1',
-    value: '1',
-    icon: 'eye',
-  },
-  {
-    label: 'My label 2',
-    value: '2',
-  },
-  {
-    label: (
-      <>
-        This is Label 3{' '}
-        <Status size="xs" color="teal">
-          P
-        </Status>
-      </>
-    ),
-    value: '3',
-  },
-  {
-    label: 'This is disabled',
-    value: '4',
-    isDisabled: true,
-  },
-];
-
-export default {
-  title: 'Controls/Selector',
-  component: Selector,
-};
-
-const Template: ComponentStory<typeof Selector> = (args) => {
-  const [value, setValue] = useState(options[0].value);
-  return <Selector {...args} value={value} options={options} onChange={setValue} />;
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  size: 'l',
-  iconPosition: 'left',
-  hasSameOptionsWidth: true,
-  isDisabled: false,
-  isInvalid: false,
-  isRequired: false,
-};
-
-Default.argTypes = {};
-
-Default.parameters = {
-  controls: {
-    exclude: ['options', 'value', 'testId', 'onChange'],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { Status } from '../Status';
+import { Selector } from './Selector';
+import { ISelectorOption } from './types';
+
+const options: Array<ISelectorOption<string>> = [
+  {
+    label: 'Label 1',
+    value: '1',
+    icon: 'eye',
+  },
+  {
+    label: 'My label 2',
+    value: '2',
+  },
+  {
+    label: (
+      <>
+        This is Label 3{' '}
+        <Status size="xs" color="teal">
+          P
+        </Status>
+      </>
+    ),
+    value: '3',
+  },
+  {
+    label: 'This is disabled',
+    value: '4',
+    isDisabled: true,
+  },
+];
+
+export default {
+  title: 'Controls/Selector',
+  component: Selector,
+};
+
+const Template: ComponentStory<typeof Selector> = (args) => {
+  const [value, setValue] = useState(options[0].value);
+  return <Selector {...args} value={value} options={options} onChange={setValue} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'l',
+  iconPosition: 'left',
+  hasSameOptionsWidth: true,
+  isDisabled: false,
+  isInvalid: false,
+  isRequired: false,
+};
+
+Default.argTypes = {};
+
+Default.parameters = {
+  controls: {
+    exclude: ['options', 'value', 'testId', 'onChange'],
+  },
+};

package/src/components/Selector/Selector.styles.ts

@@ -1,164 +1,164 @@
-import { CSSProperties } from 'react';
-import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
-
-const SELECTOR_TOTAL_GAP = 4;
-const SELECTOR_BORDER_WIDTH = 1;
-export const SELECTOR_GAP = SELECTOR_TOTAL_GAP - SELECTOR_BORDER_WIDTH;
-
-export const getSelectorLineStyle = (activeElementData?: {
-  clientWidth: number;
-  offsetLeft: number;
-}): CSSProperties | undefined =>
-  isNotEmpty(activeElementData)
-    ? {
-        width: activeElementData.clientWidth - SELECTOR_GAP * 2,
-        transform: `translateX(${activeElementData.offsetLeft}px)`,
-      }
-    : undefined;
-
-export const useStyles = createThemedStyles('Selector', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    listStyle: 'none',
-    position: 'relative',
-  },
-
-  disabled: {
-    cursor: 'default',
-
-    '& $optionText': {
-      color: colors.FONT_LABEL,
-    },
-  },
-
-  required: {
-    '&::before': {
-      top: '50%',
-      left: -12,
-      width: 6,
-      height: 6,
-      content: '""',
-      position: 'absolute',
-      transform: 'translate(0, -50%)',
-      borderRadius: '50%',
-      backgroundColor: colors.ORANGE_FOCUS,
-    },
-  },
-
-  invalid: {},
-
-  optionWrapper: {
-    height: '100%',
-  },
-
-  option: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    appearance: 'none',
-    borderRadius: 0,
-    padding: 0,
-    border: 'none',
-    cursor: 'pointer',
-    width: '100%',
-  },
-
-  active: {
-    cursor: 'default',
-  },
-
-  optionIcon: {
-    width: 20,
-    height: 20,
-  },
-
-  optionText: {},
-
-  iconFromRight: {
-    '& $option': {
-      flexDirection: 'row-reverse',
-    },
-  },
-
-  s: {},
-
-  m: {},
-
-  l: {},
-
-  line: {},
-
-  selector: {
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gridAutoColumns: '1fr',
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.BORDER_LIGHT,
-    width: 'fit-content',
-    position: 'relative',
-    border: ['solid', SELECTOR_BORDER_WIDTH, 'transparent'],
-
-    '& $line': {
-      content: '""',
-      position: 'absolute',
-      left: SELECTOR_GAP,
-      height: `calc(100% - ${SELECTOR_GAP * 2}px)`,
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderRadius: dimensions.BORDER_RADIUS_SMALL,
-      transition: '0.25s ease-in-out',
-      transitionProperty: 'transform, width',
-    },
-
-    '&$invalid': {
-      borderColor: colors.RED_WARNING,
-    },
-
-    '& $option': {
-      gap: 6,
-      position: 'relative',
-      zIndex: 1,
-      height: '100%',
-      color: colors.FONT_MEDIUM,
-      fontSize: 16,
-      transition: 'color 0.25s ease-in-out',
-      background: 'none',
-
-      '&$s': {
-        padding: [4, 8],
-        fontSize: 10,
-        lineHeight: '14px',
-      },
-
-      '&$m': {
-        padding: [14, 18],
-      },
-
-      '&$l': {
-        padding: [16, 24],
-      },
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MAIN,
-      },
-
-      '&$active': {
-        color: colors.FONT_MAIN,
-      },
-    },
-  },
-
-  autoWidth: {
-    '&$selector': {
-      gridAutoColumns: 'auto',
-
-      '& $line': {
-        width: 'unset',
-        transform: 'unset',
-      },
-    },
-  },
-});
-
-export type ISelectorStyles = ITweakStyles<typeof useStyles>;
+import { CSSProperties } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+
+const SELECTOR_TOTAL_GAP = 4;
+const SELECTOR_BORDER_WIDTH = 1;
+export const SELECTOR_GAP = SELECTOR_TOTAL_GAP - SELECTOR_BORDER_WIDTH;
+
+export const getSelectorLineStyle = (activeElementData?: {
+  clientWidth: number;
+  offsetLeft: number;
+}): CSSProperties | undefined =>
+  isNotEmpty(activeElementData)
+    ? {
+        width: activeElementData.clientWidth - SELECTOR_GAP * 2,
+        transform: `translateX(${activeElementData.offsetLeft}px)`,
+      }
+    : undefined;
+
+export const useStyles = createThemedStyles('Selector', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    listStyle: 'none',
+    position: 'relative',
+  },
+
+  disabled: {
+    cursor: 'default',
+
+    '& $optionText': {
+      color: colors.FONT_LABEL,
+    },
+  },
+
+  required: {
+    '&::before': {
+      top: '50%',
+      left: -12,
+      width: 6,
+      height: 6,
+      content: '""',
+      position: 'absolute',
+      transform: 'translate(0, -50%)',
+      borderRadius: '50%',
+      backgroundColor: colors.ORANGE_FOCUS,
+    },
+  },
+
+  invalid: {},
+
+  optionWrapper: {
+    height: '100%',
+  },
+
+  option: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    appearance: 'none',
+    borderRadius: 0,
+    padding: 0,
+    border: 'none',
+    cursor: 'pointer',
+    width: '100%',
+  },
+
+  active: {
+    cursor: 'default',
+  },
+
+  optionIcon: {
+    width: 20,
+    height: 20,
+  },
+
+  optionText: {},
+
+  iconFromRight: {
+    '& $option': {
+      flexDirection: 'row-reverse',
+    },
+  },
+
+  s: {},
+
+  m: {},
+
+  l: {},
+
+  line: {},
+
+  selector: {
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: '1fr',
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.BORDER_LIGHT,
+    width: 'fit-content',
+    position: 'relative',
+    border: ['solid', SELECTOR_BORDER_WIDTH, 'transparent'],
+
+    '& $line': {
+      content: '""',
+      position: 'absolute',
+      left: SELECTOR_GAP,
+      height: `calc(100% - ${SELECTOR_GAP * 2}px)`,
+      backgroundColor: colors.CLASSIC_WHITE,
+      borderRadius: dimensions.BORDER_RADIUS_SMALL,
+      transition: '0.25s ease-in-out',
+      transitionProperty: 'transform, width',
+    },
+
+    '&$invalid': {
+      borderColor: colors.RED_WARNING,
+    },
+
+    '& $option': {
+      gap: 6,
+      position: 'relative',
+      zIndex: 1,
+      height: '100%',
+      color: colors.FONT_MEDIUM,
+      fontSize: 16,
+      transition: 'color 0.25s ease-in-out',
+      background: 'none',
+
+      '&$s': {
+        padding: [4, 8],
+        fontSize: 10,
+        lineHeight: '14px',
+      },
+
+      '&$m': {
+        padding: [14, 18],
+      },
+
+      '&$l': {
+        padding: [16, 24],
+      },
+
+      '&:hover, &:focus': {
+        color: colors.FONT_MAIN,
+      },
+
+      '&$active': {
+        color: colors.FONT_MAIN,
+      },
+    },
+  },
+
+  autoWidth: {
+    '&$selector': {
+      gridAutoColumns: 'auto',
+
+      '& $line': {
+        width: 'unset',
+        transform: 'unset',
+      },
+    },
+  },
+});
+
+export type ISelectorStyles = ITweakStyles<typeof useStyles>;