@axinom/mosaic-ui 0.66.0 → 0.67.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.66.0",
+  "version": "0.67.0-rc.1",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c484ceff643b3ac656a5a5aebb30394be58ee2e0"
+  "gitHead": "05c979ef28af7f6460faba7b3dbd034ffcb7bd38"
 }

package/src/components/FieldSelection/FieldSelection.scss

@@ -1,5 +1,11 @@
 @import '../../styles/common.scss';
 
+.container {
+  div:has(> .selectionHeader) {
+    z-index: 12 !important;
+  }
+}
+
 .header {
   display: grid;
   grid-template-columns: 1fr 50px;
@@ -7,10 +13,6 @@
   align-items: center;
 }
 
-.item {
-  z-index: 0;
-}
-
 .selectionHeader {
   display: grid;
   grid-template-columns: 1fr;

package/src/components/FieldSelection/FieldSelection.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { noop } from '../../helpers/utils';
 import { Accordion, AccordionItem } from '../Accordion';
@@ -57,7 +58,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
 
   return (
     <Accordion
-      className={className}
+      className={clsx(classes.container, className)}
       expandedByDefault={true}
       header={
         <FieldSelectionHeader
@@ -84,7 +85,6 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
       {selectedFields.map((field) => (
         <AccordionItem
           key={field.value}
-          className={classes.item}
           header={
             <FieldSelectionItemHeader
               label={field.label as string}

package/src/components/Filters/SelectionTypes/OptionsFilter/OptionsFilter.scss

@@ -5,7 +5,6 @@
 
   display: grid;
   grid-auto-rows: 40px;
-  gap: 1px;
   border-top: unset;
 
   .option {

package/src/components/FormElements/DateTimeField/DateTimeText.scss

@@ -43,16 +43,15 @@
     display: grid;
     grid-template-columns: min-content min-content;
   }
+}
 
-  .picker {
-    position: absolute;
-    overflow: visible;
-    z-index: 99999;
-  }
+.picker {
+  overflow: visible;
+  z-index: 99999;
 }
 
 .backdrop {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   bottom: 0;

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -1,6 +1,8 @@
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { usePopper } from 'react-popper';
 import { noop } from '../../../helpers/utils';
 import { Button, ButtonContext } from '../../Buttons';
 import { DateTimePicker } from '../../DateTime/DateTimePicker';
@@ -46,6 +48,9 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
   ...rest
 }) => {
   const container = useRef<HTMLDivElement>(null);
+  const [pickerElement, setPickerElement] = useState<HTMLDivElement | null>(
+    null,
+  );
   const errorMsg: string | undefined = error;
   const [display, setDisplay] = useState<string>(() => {
     const locale = fromISODate(value, modifyTime);
@@ -54,6 +59,30 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
 
   const [showPicker, setShowPicker] = useState(false);
 
+  const { styles, attributes } = usePopper(container.current, pickerElement, {
+    placement: 'bottom-start',
+    modifiers: [
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: ['top-start', 'bottom-start'],
+        },
+      },
+      {
+        name: 'preventOverflow',
+        options: {
+          padding: 8,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  });
+
   useEffect(() => {
     const locale = fromISODate(value, modifyTime);
     setDisplay(locale ?? '');
@@ -119,31 +148,36 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
           }}
         />
       </div>
-      {showPicker && (
-        <>
-          <div
-            className={clsx(classes.picker)}
-            style={calculatePosition(container.current)}
-          >
-            <DateTimePicker
-              value={getValue(value)}
-              onSelected={(value) => {
-                if (!modifyTime) {
-                  setShowPicker(false);
-                }
-                onChange && onChange(DateTime.fromJSDate(value).toISO(), true);
+      {showPicker &&
+        createPortal(
+          <>
+            <div
+              ref={setPickerElement}
+              className={clsx(classes.picker)}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <DateTimePicker
+                value={getValue(value)}
+                onSelected={(value) => {
+                  if (!modifyTime) {
+                    setShowPicker(false);
+                  }
+                  onChange &&
+                    onChange(DateTime.fromJSDate(value).toISO(), true);
+                }}
+                showTimePicker={modifyTime}
+              />
+            </div>
+            <div
+              className={clsx(classes.backdrop)}
+              onClick={() => {
+                setShowPicker(false);
               }}
-              showTimePicker={modifyTime}
-            />
-          </div>
-          <div
-            className={clsx(classes.backdrop)}
-            onClick={() => {
-              setShowPicker(false);
-            }}
-          ></div>
-        </>
-      )}
+            ></div>
+          </>,
+          document.body,
+        )}
     </FormElementContainer>
   );
 };
@@ -172,22 +206,3 @@ function fromISODate(ISODateString: string, modifyTime: boolean): string {
     return ISODateString;
   }
 }
-
-const calculatePosition = (
-  container: HTMLDivElement | null,
-): React.CSSProperties => {
-  if (!container) {
-    return {};
-  }
-
-  const PICKER_HEIGHT = 280;
-
-  const rect = container.getBoundingClientRect();
-  const top = rect.bottom;
-
-  if (top + PICKER_HEIGHT > window.innerHeight) {
-    return { top: rect.top - PICKER_HEIGHT, left: container.offsetLeft };
-  } else {
-    return { top, left: container.offsetLeft };
-  }
-};

package/src/components/VisualElements/SvgElement.spec.tsx

@@ -112,7 +112,6 @@ describe('SvgElement', () => {
   it('passes through additional SVG attributes', () => {
     const customProps: SvgElementProps = {
       id: 'custom-id',
-      'data-testid': 'custom-svg',
       fill: 'currentColor',
       stroke: 'red',
       strokeWidth: '2',
@@ -122,7 +121,6 @@ describe('SvgElement', () => {
     const svg = wrapper.find('svg');
 
     expect(svg.prop('id')).toBe('custom-id');
-    expect(svg.prop('data-testid')).toBe('custom-svg');
     expect(svg.prop('fill')).toBe('currentColor');
     expect(svg.prop('stroke')).toBe('red');
     expect(svg.prop('strokeWidth')).toBe('2');