fix(PopoverV2): move to up container parent ref definition (#58)

Co-authored-by: Hamik Hambardzumyan <150047343+hamikhambardzumyan@users.noreply.github.com>
softconstruct · Feb 2, 2024 · 5d73395 · 5d73395
1 parent 4210d35
commit 5d73395
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 27 deletions.
diff --git a/.storybook/decorators.js b/.storybook/decorators.js
@@ -63,16 +63,16 @@ const CustomDecorator = ({ children }) => {
     return (
         <>
             <GeneUIProvider>
-                <div data-stage-alert style={{ padding: '16px 16px 0' }}>
-                    {componentStageProp && (
+                {componentStageProp && (
+                    <div data-stage-alert style={{ padding: '16px 16px 0' }}>
                         <Alert
                             title={componentStageProp?.type.replace(/^\w/, (c) => c.toUpperCase())}
                             message={alertMessage}
                             style={{ marginBottom: '10px' }}
                             type={type}
                         />
-                    )}
-                </div>
+                    </div>
+                )}
                 <div style={{ position: 'relative', height: '100%', padding: '8px 16px' }}>
                     <div>{allowRenderChildren && children}</div>
                 </div>

diff --git a/src/lib/atoms/PopoverV2/index.js b/src/lib/atoms/PopoverV2/index.js
@@ -230,17 +230,16 @@ const PopoverV2 = forwardRef((props, ref) => {
         [popoverTrackRef, children, trackClassName, popoverState, disabled, handleTrackClick]
     );
 
-    if (!Content) {
-        return childElement;
-    }
-
     const containerParentMemo = useMemo(
         () => ({
             containerParent: containerParent || geneUIProviderRef.current
         }),
         [containerParent]
     );
 
+    if (!Content) {
+        return childElement;
+    }
     return (
         <TinyPopover
             key={updateKey}

diff --git a/src/lib/molecules/DatePickerInput/DateInput.js b/src/lib/molecules/DatePickerInput/DateInput.js
@@ -158,11 +158,11 @@ function DatePickerInput({
             e.stopPropagation();
             e.preventDefault();
 
-            if (!popoverOpened && !isBlurInitiatorCalendarIcon) {
+            if ((!popoverOpened && !isBlurInitiatorCalendarIcon) || withoutPicker) {
                 inputRef.current.focus();
             }
         },
-        [popoverOpened]
+        [popoverOpened, withoutPicker]
     );
 
     useEffect(() => {
@@ -248,7 +248,6 @@ function DatePickerInput({
                         {...pickerProps}
                         markedDate={markedDate}
                         frozenDateRange={frozenDateRange}
-                        autocomplete="off"
                     />
                 )
             }
@@ -263,8 +262,9 @@ function DatePickerInput({
                 onChange={handleInputChange}
                 icon={readOnly ? '' : 'bc-icon-calendar'}
                 className={classnames(className, 'date-input', {
-                    'default-cursor': readOnly,
-                    'clearable-date-picker': clearable
+                    'default-cursor': readOnly || disabled,
+                    'clearable-date-picker': clearable,
+                    'text-cursor': withoutPicker
                 })}
                 {...sharedProps}
             />

diff --git a/src/lib/molecules/DatePickerInput/DateRangeInput.js b/src/lib/molecules/DatePickerInput/DateRangeInput.js
@@ -331,11 +331,11 @@ function DateRangePickerInput({
             e.stopPropagation();
             e.preventDefault();
 
-            if (!popoverOpened && !isBlurInitiatorCalendarIcon) {
+            if ((!popoverOpened && !isBlurInitiatorCalendarIcon) || withoutPicker) {
                 inputRef.current.focus();
             }
         },
-        [popoverOpened]
+        [popoverOpened, withoutPicker]
     );
 
     useEffect(() => {
@@ -498,10 +498,11 @@ function DateRangePickerInput({
                 icon={readOnly ? '' : 'bc-icon-calendar'}
                 onIconClick={handleIconClick}
                 className={classnames(className, 'date-input', {
-                    'default-cursor': readOnly,
-                    'clearable-date-picker': clearable
+                    'default-cursor': readOnly || disabled,
+                    'clearable-date-picker': clearable,
+                    'text-cursor': withoutPicker
                 })}
-                autoComplete="off"
+                autocomplete="off"
                 {...sharedProps}
             />
         </Popover>

diff --git a/src/lib/molecules/DatePickerInput/index.scss b/src/lib/molecules/DatePickerInput/index.scss
@@ -14,6 +14,10 @@
     cursor: default !important;
 }
 
+.text-cursor {
+    cursor: text;
+}
+
 .mobile-date-ranges-picker {
     width: 100%;
     display: grid;
@@ -74,13 +78,12 @@
 
         .input-element-relative {
             position: absolute;
-            inset-inline-start: 0;
-            top: 0;
-            width: 90%;
+            width: 100%;
+            left: 0;
 
             > input {
                 padding-inline: rem(20) rem(15);
-                padding-inline-end: rem(24);
+                padding-inline-end: rem(64);
             }
 
             > .read-only {
@@ -107,7 +110,3 @@
         pointer-events: none;
     }
 }
-
-.clearable-date-picker input {
-    width: 85%;
-}
diff --git a/src/lib/organisms/Dropdown/index.js b/src/lib/organisms/Dropdown/index.js
@@ -19,7 +19,7 @@ import { noop, stopEvent, callAfterDelay } from 'utils';
 // Components
 import BusyLoader from '../../atoms/BusyLoader';
 import Empty from '../../atoms/Empty';
-import Popover from '../../atoms/Popover';
+import Popover from '../../atoms/PopoverV2';
 import Tooltip from '../../molecules/Tooltip';
 import ExtendedInput from '../../molecules/ExtendedInput';