@true-engineering/true-react-common-ui-kit 4.0.0-alpha23 → 4.0.0-alpha25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha23",
+  "version": "4.0.0-alpha25",
   "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/WithPopup/WithPopup.tsx

@@ -121,10 +121,8 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
-    if (!isDisabled) {
-      onToggle?.(isActive, event);
-      setIsOpen(isActive);
-    }
+    onToggle?.(isActive, event);
+    setIsOpen(isActive);
   };
 
   const handleClose = (event?: IWithPopupToggleEvent) => {
@@ -132,7 +130,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   };
 
   const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
+    open: isOpen && !isDisabled,
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),