@true-engineering/true-react-common-ui-kit 4.0.0-alpha64 → 4.0.0-alpha66

package/package.json

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

package/src/components/DatePicker/DatePicker.tsx

@@ -82,6 +82,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(function
     preventOpenOnFocus,
     popperModifiers = [],
     popperPlacement = 'bottom-start',
+    popperProps,
     todayButton,
     highlightDates,
     calendarContainer,
@@ -290,6 +291,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(function
         // Убираем дефолтный отступ в 10px из либы
         // https://github.com/Hacker0x01/react-datepicker/blob/db67a58de2b05d2681bdf0a4977b606095d514c4/src/with_floating.tsx#L58
         popperModifiers={[offset(-10), ...popperModifiers]}
+        popperProps={popperProps}
         popperPlacement={popperPlacement}
         strictParsing={strictParsing}
         preventOpenOnFocus={preventOpenOnFocus}

package/src/components/DatePicker/types.ts

@@ -14,6 +14,7 @@ export type IDatePickerBaseProps = Pick<
   | 'monthsShown'
   | 'popperModifiers'
   | 'popperPlacement'
+  | 'popperProps'
   | 'filterDate'
   | 'dayClassName'
   | 'calendarContainer'

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -61,7 +61,8 @@ const fetchOptionsMock = [
 
 interface ConfigValues extends Record<string, unknown> {
   name: string;
-  date: IPeriod;
+  datePeriod: IPeriod;
+  datePickerSingle: Date;
   select: string;
   multiSelect: string;
   multiSelectWithSearch: IMultiSelectListValues<{ v: string }>;
@@ -127,25 +128,6 @@ const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
       options: selectOptions,
     },
 
-    date: {
-      name: 'date',
-      type: 'dateRange',
-      locale: {
-        periods: {
-          MINE: 'Вот такой',
-        },
-      },
-      periods: [
-        'THIS_MONTH',
-        'LAST_MONTH',
-        'THIS_YEAR',
-        'LAST_YEAR',
-        ['MINE', myPeriodGetter],
-        'CUSTOM',
-      ],
-      isClearable: isClearableFields,
-    },
-
     multiSelect: {
       name: 'multiSelect',
       type: 'multiSelect',
@@ -212,6 +194,37 @@ const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
       isClearable: isClearableFields,
     },
 
+    datePeriod: {
+      name: 'Date With Period',
+      type: 'dateRange',
+      locale: {
+        periods: {
+          MINE: 'Вот такой',
+        },
+      },
+      periods: [
+        'THIS_MONTH',
+        'LAST_MONTH',
+        'THIS_YEAR',
+        'LAST_YEAR',
+        ['MINE', myPeriodGetter],
+        'CUSTOM',
+      ],
+      isClearable: isClearableFields,
+    },
+
+    dateWithoutPeriod: {
+      name: 'Date Without Period',
+      type: 'dateRangeWithoutPeriod',
+      isClearable: isClearableFields,
+    },
+
+    datePickerSingle: {
+      name: 'Date Picker Single',
+      type: 'datePickerSingle',
+      isClearable: isClearableFields,
+    },
+
     custom: {
       type: 'custom',
       name: 'Custom',
@@ -249,7 +262,9 @@ const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
         }}
         enabledFilters={[
           'name',
-          'date',
+          'datePeriod',
+          'dateWithoutPeriod',
+          'datePickerSingle',
           'select',
           'multiSelect',
           'multiSelectWithSearch',
@@ -280,7 +295,7 @@ const meta: Meta<typeof Story> = {
     isClearableFields: false,
     isDisabled: false,
     shouldRenderDataId: false,
-    containerWidth: 400,
+    containerWidth: 800,
     withFieldNameInLabel: true,
     isGroupingEnabled: true,
     checkboxPosition: 'left',
@@ -288,7 +303,7 @@ const meta: Meta<typeof Story> = {
   },
   argTypes: {
     containerWidth: {
-      control: { type: 'range', min: 100, max: 1000, step: 100 },
+      control: { type: 'range', min: 500, max: 1400, step: 100 },
     },
     checkboxPosition: {
       control: 'inline-radio',

package/src/components/FiltersPane/FiltersPane.tsx

@@ -148,7 +148,11 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             onChange={(value) => onChangeFilters({ ...values, [filterKey]: value })}
             value={currentValue}
             key={filterKey}
-            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
+            isDisabled={
+              isDisabled ||
+              filter?.isDisabled ||
+              filter?.requiredFilledFilters?.some((item) => !values[item])
+            }
             tweakStyles={tweakFilterWrapperStyles}
             data={shouldRenderDataId ? { id: filterKey } : undefined}
             testId={getTestId(testId, `filter-${filterKey}`)}

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -1,13 +1,14 @@
 import { useMemo } from 'react';
 import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { getLocale } from '../../helpers';
+import { FilterDateSingle } from '../FilterDateSingle';
 import { FilterInterval } from '../FilterInterval';
 import { FilterMultiSelect } from '../FilterMultiSelect';
 import { FilterSelect } from '../FilterSelect';
 import { FilterWithDates } from '../FilterWithDates';
 import { FilterWithPeriod } from '../FilterWithPeriod';
 import type { IFilterWrapperProps } from '../FilterWrapper';
-import { isDatePeriodValue, isMultiSelectValue, isPeriodValue } from './helpers';
+import { isDateOrEmpty, isDatePeriodValue, isMultiSelectValue, isPeriodValue } from './helpers';
 
 export interface IFilterProps<Values extends Record<string, unknown>, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {
@@ -71,6 +72,23 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
     );
   }
 
+  if (filter.type === 'datePickerSingle') {
+    const preparedValue = isDateOrEmpty(value) ? value : undefined;
+
+    return (
+      <FilterDateSingle
+        value={preparedValue}
+        onChange={onChange}
+        onClose={onClose}
+        onEndBtnSubmit={() => onChange(undefined)}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={getTestId(testId, 'datePicker')}
+        {...filter}
+      />
+    );
+  }
+
   if (filter.type === 'multiSelect') {
     const preparedValue = isMultiSelectValue<any>(value) ? value : undefined;
 

package/src/components/FiltersPane/components/Filter/helpers.ts

@@ -1,7 +1,7 @@
 import { isEmpty, isString } from '@true-engineering/true-react-platform-helpers';
 import { IDatePeriod, IFilterMultiSelectValues, IPeriod } from '../../types';
 
-const isDateOrEmpty = (value: unknown): value is Date | null | undefined =>
+export const isDateOrEmpty = (value: unknown): value is Date | null | undefined =>
   isEmpty(value) || value instanceof Date;
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types

package/src/components/FiltersPane/components/FilterDateSingle/FilterDateSingle.styles.ts

@@ -0,0 +1,34 @@
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IDatePickerStyles } from '../../../DatePicker';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
+
+export const useStyles = createThemedStyles('FilterDateSingle', {
+  root: {
+    width: 312,
+    background: colors.CLASSIC_WHITE,
+    position: 'relative',
+    zIndex: 20,
+  },
+
+  container: {
+    padding: [8, 20],
+  },
+
+  buttons: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+    padding: 8,
+  },
+});
+
+export const clearButtonStyles = structuredClone(innerTextButtonStyles);
+
+export type IFilterDateSingleStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakDatePicker: IDatePickerStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;

package/src/components/FiltersPane/components/FilterDateSingle/FilterDateSingle.tsx

@@ -0,0 +1,103 @@
+import { FC, useMemo, useRef } from 'react';
+import { enUS, ru } from 'date-fns/locale';
+import { addDataAttributes, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { DatePicker, IDatePickerProps } from '../../../DatePicker';
+import { getLocale } from '../../helpers';
+import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { clearButtonStyles, IFilterDateSingleStyles, useStyles } from './FilterDateSingle.styles';
+
+export interface IFilterDateSingleProps
+  extends ICommonProps<IFilterDateSingleStyles>,
+    Partial<
+      Pick<
+        IDatePickerProps,
+        'label' | 'minDate' | 'maxDate' | 'calendarStartDay' | 'popperModifiers' | 'popperPlacement'
+      >
+    > {
+  value?: Date | null;
+  locale?: IPartialFilterLocale;
+  localeKey?: IFilterLocaleKey;
+  isClearable?: boolean;
+  onChange: (value: Date | null) => void;
+  onClose?: () => void;
+  onEndBtnSubmit: () => void;
+}
+
+export const FilterDateSingle: FC<IFilterDateSingleProps> = ({
+  value,
+  label,
+  locale,
+  localeKey,
+  isClearable,
+  tweakStyles,
+  onChange,
+  onClose,
+  onEndBtnSubmit,
+  testId,
+  data,
+  ...props
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterDateSingle',
+  });
+
+  const tweakDatePickerStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakDatePicker',
+    currentComponentName: 'FilterDateSingle',
+  });
+
+  const popperTargetRef = useRef<HTMLDivElement>(null);
+
+  const dateLocale = localeKey === 'ru' ? ru : enUS;
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const handleClear = () => {
+    onEndBtnSubmit();
+  };
+
+  return (
+    <div className={classes.root} ref={popperTargetRef} {...addDataAttributes(data, testId)}>
+      <div className={classes.container}>
+        <DatePicker
+          label={label ?? translates.date}
+          locale={dateLocale}
+          months={translates.months}
+          selectedDate={value}
+          onChangeDate={(date) => {
+            onChange(date);
+            onClose?.();
+          }}
+          tweakStyles={tweakDatePickerStyles}
+          popperProps={{ elements: { reference: popperTargetRef?.current } }}
+          {...props}
+        />
+      </div>
+
+      <div className={classes.buttons}>
+        {isClearable && (
+          <div>
+            <Button
+              onClick={handleClear}
+              size="s"
+              view="text"
+              testId={getTestId(testId, 'clear-button')}
+              isFullWidth
+              tweakStyles={tweakClearButtonStyles}
+            >
+              {translates.clear}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/FiltersPane/components/FilterDateSingle/index.ts

@@ -0,0 +1,2 @@
+export * from './FilterDateSingle';
+export type { IFilterDateSingleStyles } from './FilterDateSingle.styles';

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -38,7 +38,7 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
 
   const isMultiple = filter.type === 'custom' && filter.valueViewType === 'multiple';
   const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
-  const isDate = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
+  const isDateRange = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
 
   const displayValue = (v: unknown): string => {
     if (!isNotEmpty(v)) {
@@ -108,7 +108,7 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
     return <span className={classes.text}>{intervals.join(' ')}</span>;
   }
 
-  if (isDate) {
+  if (isDateRange) {
     const { from, to, periodType, label } = value as unknown as IPeriod;
     const hasFrom = from !== undefined && from !== null;
     const hasTo = to !== undefined && to !== null;

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -5,7 +5,7 @@ import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWithDates', {
   root: {
-    width: 320,
+    width: 312,
     background: colors.CLASSIC_WHITE,
     position: 'relative',
     zIndex: 20,
@@ -28,35 +28,12 @@ export const useStyles = createThemedStyles('FilterWithDates', {
     justifyContent: 'space-between',
     padding: 8,
   },
-
-  datepicker: {},
 });
 
 export const clearButtonStyles = structuredClone(innerTextButtonStyles);
 
 export const backButtonStyles = innerTextButtonStyles;
 
-const PICKER_TOP_MARGIN = 28;
-const PICKER_WITH_BUTTONS_TOP_MARGIN = 56;
-const START_PICKER_LEFT_MARGIN = -20;
-const END_PICKER_LEFT_MARGIN = -170;
-
-export const startDatePickerStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
-};
-
-export const startDatePickerWithButtonStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
-};
-
-export const endDatePickerStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
-};
-
-export const endDatePickerWithButtonStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
-};
-
 export type IFilterWithDatesStyles = ITweakStyles<
   typeof useStyles,
   {

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -1,11 +1,7 @@
-import { FC, useMemo, useRef, useState } from 'react';
+import { FC, useMemo, useRef } from 'react';
 import { isAfter, isBefore } from 'date-fns';
 import { enUS, ru } from 'date-fns/locale';
-import {
-  getTestId,
-  isNotEmpty,
-  addDataAttributes,
-} from '@true-engineering/true-react-platform-helpers';
+import { getTestId, addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
@@ -21,11 +17,7 @@ import {
 import {
   backButtonStyles,
   clearButtonStyles,
-  endDatePickerStyles,
-  endDatePickerWithButtonStyles,
   IFilterWithDatesStyles,
-  startDatePickerStyles,
-  startDatePickerWithButtonStyles,
   useStyles,
 } from './FilterWithDates.styles';
 
@@ -71,26 +63,19 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
     currentComponentName: 'FilterWithDates',
   });
 
-  const hasButtonsRow = isClearable || isNotEmpty(onStartBtnSubmit);
-
   const tweakStartDatePickerStyles = useTweakStyles({
-    innerStyles: hasButtonsRow ? startDatePickerWithButtonStyles : startDatePickerStyles,
     tweakStyles,
     className: 'tweakStartDatePicker',
     currentComponentName: 'FilterWithDates',
   });
 
   const tweakEndDatePickerStyles = useTweakStyles({
-    innerStyles: hasButtonsRow ? endDatePickerWithButtonStyles : endDatePickerStyles,
     tweakStyles,
     className: 'tweakEndDatePicker',
     currentComponentName: 'FilterWithDates',
   });
 
-  const [isOpenFrom, setOpenFrom] = useState(false);
-  const [isOpenTo, setOpenTo] = useState(false);
-
-  const ref = useRef<HTMLDivElement>(null);
+  const popperTargetRef = useRef<HTMLDivElement>(null);
 
   const dateLocale = localeKey === 'ru' ? ru : enUS;
 
@@ -99,17 +84,6 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   const handleClear = () => {
     onEndBtnSubmit();
   };
-  const isOpenCalendar = isOpenFrom || isOpenTo;
-
-  const handleFromSelected = (val: Date | null) => {
-    onChange({ from: val, to: value?.to ?? null });
-    setOpenFrom(false);
-  };
-
-  const handleToSelected = (val: Date | null) => {
-    onChange({ from: value?.from ?? null, to: val });
-    setOpenTo(false);
-  };
 
   const handleChangeFrom = (val: Date | null) => {
     // на самом деле ситуации когда надо переворачивать даты, произойти не может
@@ -130,7 +104,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   };
 
   return (
-    <div className={classes.root} {...addDataAttributes(data, testId)}>
+    <div className={classes.root} ref={popperTargetRef} {...addDataAttributes(data, testId)}>
       <div className={classes.container}>
         <div className={classes.containerItem}>
           <DatePicker
@@ -143,6 +117,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             tweakStyles={tweakStartDatePickerStyles}
             testId={getTestId(testId, 'from')}
             isClearable={isClearable}
+            popperProps={{ elements: { reference: popperTargetRef?.current } }}
             {...startPickerProps}
           />
         </div>
@@ -157,6 +132,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             tweakStyles={tweakEndDatePickerStyles}
             testId={getTestId(testId, 'to')}
             isClearable={isClearable}
+            popperProps={{ elements: { reference: popperTargetRef?.current } }}
             {...endPickerProps}
           />
         </div>
@@ -192,19 +168,6 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
           </div>
         )}
       </div>
-
-      {isOpenCalendar && (
-        <div ref={ref} className={classes.datepicker}>
-          <DatePicker
-            selectedDate={(isOpenFrom ? value?.from : value?.to) ?? null}
-            label=""
-            locale={dateLocale}
-            months={translates.months}
-            isInline
-            onChangeDate={isOpenFrom ? handleFromSelected : handleToSelected}
-          />
-        </div>
-      )}
     </div>
   );
 };

package/src/components/FiltersPane/components/index.ts

@@ -1,4 +1,5 @@
 export * from './Filter';
+export * from './FilterDateSingle';
 export * from './FilterInterval';
 export * from './FilterMultiSelect';
 export * from './FilterSelect';

package/src/components/FiltersPane/constants.ts

@@ -37,6 +37,7 @@ export const FilterLocales: Record<string, IFilterLocale> = {
     from: 'От',
     to: 'До',
     back: 'Назад',
+    date: 'Дата',
     searchPlaceholder: 'Поиск',
     displayedFields: 'Поля для поиска',
     months: [
@@ -71,6 +72,7 @@ export const FilterLocales: Record<string, IFilterLocale> = {
     from: 'From',
     to: 'To',
     back: 'Back',
+    date: 'Date',
     searchPlaceholder: 'Search',
     displayedFields: 'Displayed fields',
     months: [

package/src/components/FiltersPane/types.ts

@@ -4,6 +4,7 @@ import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
 import { INumberInputProps } from '../NumberInput';
 import type {
+  IFilterDateSingleProps,
   IFilterIntervalProps,
   IFilterMultiSelectProps,
   IFilterSelectProps,
@@ -41,6 +42,8 @@ export interface IPeriod extends IDatePeriod {
 
 export type IPeriodGetter = () => IDatePeriod;
 
+export type IFilterDateSingleValue = Date;
+
 export type IFilterWithDatesValue = IDatePeriod;
 
 export type MultiSelectOptionType<Value> = Value | undefined extends
@@ -52,6 +55,7 @@ export type MultiSelectOptionType<Value> = Value | undefined extends
 export interface IConfigItemBasicBase<Value> {
   name: ReactNode;
   isInline?: boolean;
+  isDisabled?: boolean;
   isClearable?: boolean;
   requiredFilledFilters?: string[];
   localeKey?: IFilterLocaleKey;
@@ -83,12 +87,17 @@ export type IDateRangeWithoutPeriodConfigItem<Value> = IConfigItemBasicBase<Valu
   dateFormat?: string;
 } & Omit<IFilterWithDatesProps, 'value' | 'onChange' | 'onStartBtnSubmit' | 'onEndBtnSubmit'>;
 
-// Дата С ПЕРИОДАМИ
+// Дата с периодами
 export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   type: 'dateRange';
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
+// Date Picker для выбора одной даты
+export type IDatePickerSingleConfigItem<Value> = IConfigItemBasicBase<Value> & {
+  type: 'datePickerSingle';
+} & Omit<IFilterDateSingleProps, 'value' | 'onChange' | 'onEndBtnSubmit'>;
+
 export interface ICustomComponentProps<Value> extends ITestIdProps {
   value?: Value;
   onChange: (v?: Value) => void;
@@ -127,6 +136,7 @@ export type ConfigItem<Value> =
   | ICustomConfigItem<Value>
   | IDateRangeWithoutPeriodConfigItem<Value>
   | IDateRangeConfigItem<Value>
+  | IDatePickerSingleConfigItem<Value>
   | IIntervalConfigItem<Value>
   | IBooleanConfigItem<Value>;
 
@@ -145,6 +155,7 @@ export interface IFilterLocale {
   from: string;
   to: string;
   back: string;
+  date: string;
   months: string[];
   periods: {
     [key: string]: string;

package/src/theme/types.ts

@@ -16,6 +16,7 @@ import type {
   IDotsPreloaderStyles,
   IFileInputStyles,
   IFileItemStyles,
+  IFilterDateSingleStyles,
   IFilterIntervalStyles,
   IFilterSelectStyles,
   IFiltersPaneSearchStyles,
@@ -103,6 +104,7 @@ export interface IComponentStyles {
   FileItem: IFileItemStyles;
   FilterValueView: IFilterValueViewStyles;
   FiltersPane: IFiltersPaneStyles;
+  FilterDateSingle: IFilterDateSingleStyles;
   FilterInterval: IFilterIntervalStyles;
   FilterSelect: IFilterSelectStyles;
   FilterWithDates: IFilterWithDatesStyles;