@true-engineering/true-react-common-ui-kit 3.32.0 → 3.33.1

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -1,177 +1,177 @@
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { PERIODS, PERIODS_GETTERS } from '../../constants';
-import { getLocale } from '../../helpers';
-import {
-  IDatePeriod,
-  IFilterLocaleKey,
-  IPartialFilterLocale,
-  IPeriod,
-  IPeriodGetter,
-  IPeriodsList,
-} from '../../types';
-import { FilterSelect } from '../FilterSelect';
-import { FilterWithDates } from '../FilterWithDates';
-import { useStyles, IFilterWithPeriodStyles, filterSelectStyles } from './FilterWithPeriod.styles';
-
-export interface IFilterWithPeriodProps extends ICommonProps<IFilterWithPeriodStyles> {
-  value?: IPeriod;
-  localeKey?: IFilterLocaleKey;
-  locale?: IPartialFilterLocale;
-  periods?: IPeriodsList;
-  onChange: (period?: IPeriod) => void;
-  onClose?: () => void;
-}
-
-export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
-  value,
-  localeKey,
-  locale,
-  onChange,
-  onClose,
-  periods,
-  tweakStyles,
-  testId,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
-
-  const [isPeriodPickerShown, setIsPeriodPickerShown] = useState(value?.periodType !== 'CUSTOM');
-
-  const [isDatePickerShown, setIsDatePickerShown] = useState(value?.periodType === 'CUSTOM');
-
-  const [period, setPeriod] = useState(value);
-
-  const periodGetters = useMemo(() => {
-    const result: Record<string, IPeriodGetter> = { ...PERIODS_GETTERS };
-    periods?.forEach((p) => {
-      if (Array.isArray(p)) {
-        result[p[0]] = p[1];
-      }
-    });
-    return result;
-  }, [periods]);
-
-  const periodsList = useMemo(() => {
-    if (periods === undefined) {
-      return [...PERIODS];
-    }
-    return periods.map((p) => (Array.isArray(p) ? p[0] : p));
-  }, [periods]);
-
-  const getPeriodTranslate = useCallback(
-    (val: string) => translates.periods[val] ?? val,
-    [translates.periods],
-  );
-
-  const handlePeriodChange = (periodType: string) => {
-    let from = null;
-    let to = null;
-
-    if (periodType in periodGetters) {
-      const newPeriod = periodGetters[periodType]();
-      from = newPeriod.from;
-      to = newPeriod.to;
-    }
-
-    const p = { from, to, periodType };
-    setPeriod(p);
-
-    if (periodType === 'CUSTOM') {
-      setIsDatePickerShown(true);
-    } else {
-      if (onClose !== undefined) {
-        onClose();
-      }
-      onChange({ ...p, label: getPeriodTranslate(periodType) });
-    }
-
-    setIsPeriodPickerShown(false);
-  };
-
-  const refPeriodPicker = useRef<HTMLDivElement>(null);
-  const refDatePicker = useRef<HTMLDivElement>(null);
-
-  const onPeriodChange = (val?: string) => {
-    if (val !== undefined) {
-      handlePeriodChange(val);
-    } else {
-      onChange(undefined);
-      if (onClose !== undefined) {
-        onClose();
-      }
-    }
-  };
-
-  const handleCustomDateChange = (val: IDatePeriod): void => {
-    if (val.from || val.to) {
-      onChange({
-        ...val,
-        periodType: 'CUSTOM',
-      });
-    } else {
-      onChange(undefined);
-    }
-  };
-
-  useOnClickOutside(refDatePicker, () => {
-    if (!period?.from && !period?.to) {
-      setPeriod(undefined);
-    }
-    setIsDatePickerShown(false);
-  });
-
-  useEffect(() => {
-    setPeriod(value);
-  }, [value, value?.from, value?.to, value?.periodType]);
-
-  const tweakSelectStyles = useTweakStyles({
-    innerStyles: filterSelectStyles,
-    tweakStyles,
-    className: 'tweakFilterSelect',
-    currentComponentName: 'FilterWithPeriod',
-  });
-
-  return (
-    <div className={classes.root}>
-      {isPeriodPickerShown && (
-        <div className={classes.main} ref={refPeriodPicker}>
-          <FilterSelect
-            options={periodsList}
-            value={period?.periodType}
-            onChange={onPeriodChange}
-            localeKey={localeKey}
-            locale={translates}
-            tweakStyles={tweakSelectStyles}
-            getValueView={getPeriodTranslate}
-            testId={testId !== undefined ? `${testId}-select` : undefined}
-          />
-        </div>
-      )}
-      {isDatePickerShown && (
-        <div className={classes.picker} style={{ width: 320 }} ref={refDatePicker}>
-          <FilterWithDates
-            onStartBtnSubmit={() => {
-              setIsDatePickerShown(false);
-              setIsPeriodPickerShown(true);
-            }}
-            onEndBtnSubmit={() => {
-              onChange(undefined);
-              setIsDatePickerShown(false);
-              if (onClose !== undefined) {
-                onClose();
-              }
-            }}
-            value={period}
-            onChange={handleCustomDateChange}
-            localeKey={localeKey}
-            locale={translates}
-            testId={testId !== undefined ? `${testId}-dates` : undefined}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { PERIODS, PERIODS_GETTERS } from '../../constants';
+import { getLocale } from '../../helpers';
+import {
+  IDatePeriod,
+  IFilterLocaleKey,
+  IPartialFilterLocale,
+  IPeriod,
+  IPeriodGetter,
+  IPeriodsList,
+} from '../../types';
+import { FilterSelect } from '../FilterSelect';
+import { FilterWithDates } from '../FilterWithDates';
+import { useStyles, IFilterWithPeriodStyles, filterSelectStyles } from './FilterWithPeriod.styles';
+
+export interface IFilterWithPeriodProps extends ICommonProps<IFilterWithPeriodStyles> {
+  value?: IPeriod;
+  localeKey?: IFilterLocaleKey;
+  locale?: IPartialFilterLocale;
+  periods?: IPeriodsList;
+  onChange: (period?: IPeriod) => void;
+  onClose?: () => void;
+}
+
+export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
+  value,
+  localeKey,
+  locale,
+  onChange,
+  onClose,
+  periods,
+  tweakStyles,
+  testId,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const [isPeriodPickerShown, setIsPeriodPickerShown] = useState(value?.periodType !== 'CUSTOM');
+
+  const [isDatePickerShown, setIsDatePickerShown] = useState(value?.periodType === 'CUSTOM');
+
+  const [period, setPeriod] = useState(value);
+
+  const periodGetters = useMemo(() => {
+    const result: Record<string, IPeriodGetter> = { ...PERIODS_GETTERS };
+    periods?.forEach((p) => {
+      if (Array.isArray(p)) {
+        result[p[0]] = p[1];
+      }
+    });
+    return result;
+  }, [periods]);
+
+  const periodsList = useMemo(() => {
+    if (periods === undefined) {
+      return [...PERIODS];
+    }
+    return periods.map((p) => (Array.isArray(p) ? p[0] : p));
+  }, [periods]);
+
+  const getPeriodTranslate = useCallback(
+    (val: string) => translates.periods[val] ?? val,
+    [translates.periods],
+  );
+
+  const handlePeriodChange = (periodType: string) => {
+    let from = null;
+    let to = null;
+
+    if (periodType in periodGetters) {
+      const newPeriod = periodGetters[periodType]();
+      from = newPeriod.from;
+      to = newPeriod.to;
+    }
+
+    const p = { from, to, periodType };
+    setPeriod(p);
+
+    if (periodType === 'CUSTOM') {
+      setIsDatePickerShown(true);
+    } else {
+      if (onClose !== undefined) {
+        onClose();
+      }
+      onChange({ ...p, label: getPeriodTranslate(periodType) });
+    }
+
+    setIsPeriodPickerShown(false);
+  };
+
+  const refPeriodPicker = useRef<HTMLDivElement>(null);
+  const refDatePicker = useRef<HTMLDivElement>(null);
+
+  const onPeriodChange = (val?: string) => {
+    if (val !== undefined) {
+      handlePeriodChange(val);
+    } else {
+      onChange(undefined);
+      if (onClose !== undefined) {
+        onClose();
+      }
+    }
+  };
+
+  const handleCustomDateChange = (val: IDatePeriod): void => {
+    if (val.from || val.to) {
+      onChange({
+        ...val,
+        periodType: 'CUSTOM',
+      });
+    } else {
+      onChange(undefined);
+    }
+  };
+
+  useOnClickOutside(refDatePicker, () => {
+    if (!period?.from && !period?.to) {
+      setPeriod(undefined);
+    }
+    setIsDatePickerShown(false);
+  });
+
+  useEffect(() => {
+    setPeriod(value);
+  }, [value, value?.from, value?.to, value?.periodType]);
+
+  const tweakSelectStyles = useTweakStyles({
+    innerStyles: filterSelectStyles,
+    tweakStyles,
+    className: 'tweakFilterSelect',
+    currentComponentName: 'FilterWithPeriod',
+  });
+
+  return (
+    <div className={classes.root}>
+      {isPeriodPickerShown && (
+        <div className={classes.main} ref={refPeriodPicker}>
+          <FilterSelect
+            options={periodsList}
+            value={period?.periodType}
+            onChange={onPeriodChange}
+            localeKey={localeKey}
+            locale={translates}
+            tweakStyles={tweakSelectStyles}
+            getValueView={getPeriodTranslate}
+            testId={testId !== undefined ? `${testId}-select` : undefined}
+          />
+        </div>
+      )}
+      {isDatePickerShown && (
+        <div className={classes.picker} style={{ width: 320 }} ref={refDatePicker}>
+          <FilterWithDates
+            onStartBtnSubmit={() => {
+              setIsDatePickerShown(false);
+              setIsPeriodPickerShown(true);
+            }}
+            onEndBtnSubmit={() => {
+              onChange(undefined);
+              setIsDatePickerShown(false);
+              if (onClose !== undefined) {
+                onClose();
+              }
+            }}
+            value={period}
+            onChange={handleCustomDateChange}
+            localeKey={localeKey}
+            locale={translates}
+            testId={testId !== undefined ? `${testId}-dates` : undefined}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -75,7 +75,7 @@ export function FilterWrapper<Values, Key extends keyof Values>({
       canBeFlipped
       isDisabled={isBoolean || isDisabled}
       tweakStyles={tweakWithPopupStyles}
-      trigger={({ isActive, isDisabled: _isDisabled, ...props }) => (
+      trigger={({ triggerProps: { isActive }, referenceProps }) => (
         <div
           className={clsx(classes.root, {
             [classes.noValue]: !hasValue,
@@ -87,7 +87,7 @@ export function FilterWrapper<Values, Key extends keyof Values>({
           })}
           {...addDataTestId(testId)}
           {...addDataAttributes(data)}
-          {...props}
+          {...referenceProps}
         >
           <div
             onClick={handleLabelClick}

package/src/components/Flag/Flag.stories.tsx

@@ -1,29 +1,29 @@
-import { countries } from 'country-flag-icons';
-import { ComponentStory } from '@storybook/react';
-import { Flag } from './Flag';
-
-export default {
-  title: 'Data Display/Flag',
-  component: Flag,
-  argTypes: {
-    countryCode: { control: 'select', options: countries },
-  },
-};
-
-const Template: ComponentStory<typeof Flag> = (args) => (
-  <div style={{ width: 60, height: 40 }}>
-    <Flag {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  countryCode: 'ug',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
-  },
-};
+import { countries } from 'country-flag-icons';
+import { ComponentStory } from '@storybook/react';
+import { Flag } from './Flag';
+
+export default {
+  title: 'Data Display/Flag',
+  component: Flag,
+  argTypes: {
+    countryCode: { control: 'select', options: countries },
+  },
+};
+
+const Template: ComponentStory<typeof Flag> = (args) => (
+  <div style={{ width: 60, height: 40 }}>
+    <Flag {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  countryCode: 'ug',
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data'],
+  },
+};

package/src/components/Flag/Flag.tsx

@@ -1,26 +1,26 @@
-import { FC } from 'react';
-import { hasFlag } from 'country-flag-icons';
-import Flags from 'country-flag-icons/react/3x2';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { useStyles, IFlagStyles } from './Flag.styles';
-
-export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
-  /** @default '' */
-  countryCode?: string;
-}
-
-export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-  const CC = countryCode.toUpperCase();
-
-  const TheFlag = hasFlag(CC)
-    ? Flags[CC as keyof typeof Flags]
-    : () => (
-        <div className={classes.noFlag}>
-          <Icon type="minus" />
-        </div>
-      );
-
-  return <TheFlag className={classes.root} />;
-};
+import { FC } from 'react';
+import { hasFlag } from 'country-flag-icons';
+import Flags from 'country-flag-icons/react/3x2';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { useStyles, IFlagStyles } from './Flag.styles';
+
+export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
+  /** @default '' */
+  countryCode?: string;
+}
+
+export const Flag: FC<IFlagProps> = ({ countryCode = '', tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+  const CC = countryCode.toUpperCase();
+
+  const TheFlag = hasFlag(CC)
+    ? Flags[CC as keyof typeof Flags]
+    : () => (
+        <div className={classes.noFlag}>
+          <Icon type="minus" />
+        </div>
+      );
+
+  return <TheFlag className={classes.root} />;
+};

package/src/components/Flag/augment.d.ts

@@ -1 +1 @@
-declare module 'country-flag-icons/react/3x2';
+declare module 'country-flag-icons/react/3x2';

package/src/components/FlexibleTable/FlexibleTable.stories.tsx

@@ -12,6 +12,8 @@ interface ITableContent {
   contractCode: string;
   validFrom: Date;
   validTo: Date;
+  validTo1?: Date;
+  validTo2?: Date;
   title: string;
   signDate: Date;
   partner: string;
@@ -26,11 +28,16 @@ const Temp: FC<IValueComponentProps<ITableContent, string>> = ({ value }) => <>{
 const config: IFlexibleTableConfigType<ITableContent> = {
   contractCode: {
     title: 'Contract Code',
+    minWidth: 150,
+    maxWidth: 150,
+    position: 'sticky',
   },
   title: {
     component: Temp,
     title: 'Title',
-    minWidth: 320,
+    minWidth: 100,
+    position: 'sticky',
+    left: 186,
   },
   validFrom: {
     title: 'Valid From',
@@ -39,6 +46,12 @@ const config: IFlexibleTableConfigType<ITableContent> = {
   validTo: {
     title: 'Valid From',
   },
+  validTo1: {
+    title: 'Valid To1',
+  },
+  validTo2: {
+    title: 'Valid To2',
+  },
   signDate: {
     title: 'Sign Date',
   },

package/src/components/FlexibleTable/FlexibleTable.tsx

@@ -222,27 +222,39 @@ export function FlexibleTable<
         <Table.Head className={classes.head}>
           <Table.Row className={classes.headerRow}>
             {columns.map((key, i) => {
-              const itemConfig = config?.[key];
+              const {
+                position,
+                minWidth,
+                width,
+                maxWidth,
+                titleAlign = 'left',
+                right,
+                left,
+                title = '',
+                shouldRenderDataId,
+              } = config?.[key] ?? {};
+              const isSticky = position === 'sticky' || (isFirstColumnSticky && i === 0);
 
               return (
                 <Table.Header
                   key={key}
                   className={clsx(classes.header, {
-                    [classes.headerSticky]: isFirstColumnSticky && i === 0,
+                    [classes.headerSticky]: isSticky,
                     [classes.headerSecond]: isFirstColumnSticky && i === 1,
                   })}
                   style={{
-                    minWidth: itemConfig?.minWidth,
-                    width: itemConfig?.width,
-                    maxWidth: itemConfig?.maxWidth,
-                    textAlign: itemConfig?.titleAlign ?? 'left',
+                    minWidth,
+                    width,
+                    maxWidth,
+                    textAlign: titleAlign,
+                    position: isSticky ? 'sticky' : position,
+                    right,
+                    left,
                   }}
                   onClick={isNotEmpty(onHeadClick) ? () => onHeadClick(key) : undefined}
-                  {...addDataAttributes({ id: itemConfig?.shouldRenderDataId ? key : undefined })}
+                  {...addDataAttributes({ id: shouldRenderDataId ? key : undefined })}
                 >
-                  {applyAction(itemConfig?.title ?? '', {
-                    value: headerContent?.[key] as HeaderContent[string],
-                  })}
+                  {applyAction(title, { value: headerContent?.[key] as HeaderContent[string] })}
                 </Table.Header>
               );
             })}

package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts

@@ -1,38 +1,39 @@
-import { getTransition } from '@true-engineering/true-react-platform-helpers';
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
-import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
-
-export const useStyles = createThemedStyles('FlexibleTableCell', {
-  root: {
-    position: 'relative',
-    boxSizing: 'content-box',
-    padding: [14, 7],
-    fontSize: 14,
-    lineHeight: 1.42,
-    zIndex: 5,
-    verticalAlign: 'top',
-  },
-
-  sticky: {
-    zIndex: 19,
-    paddingLeft: 24,
-    paddingRight: 12,
-    ...getTransition(['box-shadow']),
-
-    '[data-scrolled] &': {
-      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
-    },
-  },
-
-  second: {
-    paddingLeft: STICKY_SHADOW_PADDING,
-  },
-
-  loading: {},
-
-  skeleton: {
-    height: 21,
-  },
-});
-
-export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;
+import { getTransition } from '@true-engineering/true-react-platform-helpers';
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { STICKY_SHADOW_PADDING } from '../../FlexibleTable.styles';
+
+export const useStyles = createThemedStyles('FlexibleTableCell', {
+  root: {
+    position: 'relative',
+    boxSizing: 'content-box',
+    padding: [14, 7],
+    fontSize: 14,
+    lineHeight: 1.42,
+    zIndex: 5,
+    verticalAlign: 'top',
+  },
+
+  sticky: {
+    zIndex: 19,
+    paddingLeft: 24,
+    paddingRight: 12,
+    left: 0,
+    ...getTransition(['box-shadow']),
+
+    '[data-scrolled] &': {
+      boxShadow: '4px 0 4px rgba(0, 0, 0, 0.05)',
+    },
+  },
+
+  second: {
+    paddingLeft: STICKY_SHADOW_PADDING,
+  },
+
+  loading: {},
+
+  skeleton: {
+    height: 21,
+  },
+});
+
+export type IFlexibleTableCellStyles = ITweakStyles<typeof useStyles>;