@true-engineering/true-react-common-ui-kit 4.0.0-alpha22 → 4.0.0-alpha24

package/package.json

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

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -71,6 +71,27 @@ Default.args = {
   isRange: false,
   isClearable: true,
   shouldRenderPopperInBody: false,
+  popperPlacement: 'bottom-start',
+};
+
+Default.argTypes = {
+  popperPlacement: {
+    options: [
+      'bottom-start',
+      'bottom',
+      'bottom-end',
+      'top-start',
+      'top',
+      'top-end',
+      'right-start',
+      'right',
+      'right-end',
+      'left-start',
+      'left',
+      'left-end',
+    ],
+    control: 'select',
+  },
 };
 
 Default.parameters = {

package/src/components/DatePicker/DatePicker.tsx

@@ -8,6 +8,7 @@ import {
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
+import { offset } from '@floating-ui/react';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
@@ -70,8 +71,8 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       shouldCloseOnSelect,
       showPreviousMonths,
       preventOpenOnFocus,
-      popperModifiers,
-      popperPlacement,
+      popperModifiers = [],
+      popperPlacement = 'bottom-start',
       todayButton,
       highlightDates,
       calendarContainer,
@@ -264,7 +265,9 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
           dayClassName={(v) => clsx(classes.day, dayClassName?.(v))}
           disabledKeyboardNavigation={disabledKeyboardNavigation}
           popperContainer={shouldRenderPopperInBody ? PopperContainer : undefined}
-          popperModifiers={popperModifiers}
+          // Убираем дефолтный отступ в 10px из либы
+          // https://github.com/Hacker0x01/react-datepicker/blob/db67a58de2b05d2681bdf0a4977b606095d514c4/src/with_floating.tsx#L58
+          popperModifiers={[offset(-10), ...popperModifiers]}
           popperPlacement={popperPlacement}
           strictParsing={strictParsing}
           preventOpenOnFocus={preventOpenOnFocus}

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

@@ -38,7 +38,7 @@ export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
 export const backButtonStyles = innerTextButtonStyles;
 
 const PICKER_TOP_MARGIN = 28;
-const PICKER_WITH_BUTTONS_TOP_MARGIN = 60;
+const PICKER_WITH_BUTTONS_TOP_MARGIN = 56;
 const START_PICKER_LEFT_MARGIN = -20;
 const END_PICKER_LEFT_MARGIN = -170;
 

package/src/components/TextArea/TextArea.styles.ts

@@ -1,6 +1,6 @@
 import { animations, createThemedStyles, helpers, ITweakStyles } from '../../theme';
 import { IWithPrefix } from '../../types';
-import { IControlWrapperStyles } from '../ControlWrapper';
+import { IControlWrapperSizes, IControlWrapperStyles } from '../ControlWrapper';
 import { IWithMessagesStyles } from '../WithMessages';
 import { ITextAreaCounterPositions } from './types';
 
@@ -84,5 +84,6 @@ export type ITextAreaStyles = ITweakStyles<
   {
     tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
-  } & IWithPrefix<ITextAreaCounterPositions, 'counter-'>
+  } & IWithPrefix<ITextAreaCounterPositions, 'counter-'> &
+    IControlWrapperSizes
 >;

package/src/components/TextArea/TextArea.tsx

@@ -128,7 +128,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     };
 
     return (
-      <div className={classes.root} style={{ '--counter-length': counterString.length } as Styles}>
+      <div
+        className={clsx(classes.root, isNotEmpty(size) && classes[size])}
+        style={{ '--counter-length': counterString.length } as Styles}
+      >
         <WithMessages
           errorMessage={errorMessage}
           infoMessage={infoMessage}
@@ -148,7 +151,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
             isFullWidth
           >
             <div
-              className={clsx(classes.wrapper, isNotEmpty(size) && classes[size], {
+              className={clsx(classes.wrapper, {
                 [classes.autoSized]: isAutoSized,
                 [classes.withLabel]: hasLabel,
               })}

package/src/components/TextArea/index.ts

@@ -1,2 +1,3 @@
 export * from './TextArea';
 export type { ITextAreaStyles } from './TextArea.styles';
+export * from './types';