@axinom/mosaic-ui 0.67.0-rc.0 → 0.67.0-rc.11

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/FormElements/FileUploadControl/FileUploadControl.scss

@@ -19,7 +19,7 @@
 
       margin-left: -50px;
       border: none;
-      background-color: var(--ax-primary);
+      background-color: var(--file-upload-button-bg-color, $file-upload-button-bg-color);
 
       transition: box-shadow 0.15s ease-in-out 0s;
 
@@ -35,12 +35,12 @@
 
       &:hover {
         border: none;
-        background-color: color-mix(in srgb, var(--ax-primary) 75%, transparent);
+        background-color: var(--file-upload-button-hover-bg-color, $file-upload-button-hover-bg-color);
       }
 
       &.disabled {
         border: none;
-        background-color: var(--ax-neutral);
+        background-color: var(--file-upload-button-disabled-bg-color, $file-upload-button-disabled-bg-color);
         cursor: default;
 
         svg * {

package/src/components/FormElements/Radio/Radio.scss

@@ -27,7 +27,7 @@
         grid: 1fr / 30px 1fr;
         column-gap: 8px;
 
-        color: var(--ax-neutral-dark);
+        color: var(--radio-label-color, $radio-label-color);
         font-size: 16px;
         font-weight: unset;
 
@@ -37,12 +37,12 @@
 
         &.disabled {
           .radioOutline {
-            fill: var(--ax-neutral-lighter);
+            fill: var(--radio-disabled-outline-color, $radio-disabled-outline-color);
           }
 
           .checked {
             .radioDot {
-              fill: var(--ax-neutral-light);
+              fill: var(--radio-disabled-dot-color, $radio-disabled-dot-color);
             }
           }
         }
@@ -60,7 +60,7 @@
 
     .radioOutline {
       fill: none;
-      stroke: var(--ax-neutral);
+      stroke: var(--radio-outline-stroke-color, $radio-outline-stroke-color);
       stroke-width: 1;
     }
 
@@ -87,7 +87,7 @@
 
     &.hasConfirm {
       .radioOutline {
-        stroke: var(--ax-warning);
+        stroke: var(--radio-warning-stroke-color, $radio-warning-stroke-color);
         stroke-width: 3;
       }
     }

package/src/components/FormElements/ToggleButton/ToggleButton.scss

@@ -94,13 +94,13 @@
           }
         }
         &.off {
-          border-top: 1px solid var(--ax-warning);
-          border-bottom: 1px solid var(--ax-warning);
-          border-left: 1px solid var(--ax-warning);
+          border-top: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border-bottom: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
+          border-left: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
           transition: border $confirmation-transition linear;
         }
         &.on {
-          border: 1px solid var(--ax-warning);
+          border: 1px solid var(--toggle-button-warning-border-color, $toggle-button-warning-border-color);
           transition: border $confirmation-transition linear;
         }
       }
@@ -108,19 +108,19 @@
       div.active.off {
         svg {
           .svgText {
-            fill: var(--ax-warning);
+            fill: var(--toggle-button-warning-text-color, $toggle-button-warning-text-color);
             transition: fill $confirmation-transition linear;
           }
         }
       }
 
       div.active.on {
-        background-color: var(--ax-warning) !important;
+        background-color: var(--toggle-button-warning-bg-color, $toggle-button-warning-bg-color) !important;
         transition: background-color $confirmation-transition linear;
       }
 
       &:hover {
-        box-shadow: 0 0 0 2px var(--ax-warning);
+        box-shadow: 0 0 0 2px var(--toggle-button-warning-hover-shadow-color, $toggle-button-warning-hover-shadow-color);
         transition: box-shadow $confirmation-transition linear;
       }
     }

package/src/components/List/List.scss

@@ -42,10 +42,10 @@
     p {
       margin-left: 10px;
 
-      color: var(--ax-neutral-dark);
+      color: var(--list-no-data-text-color, $list-no-data-text-color);
     }
 
-    background-color: var(--ax-neutral-light) !important;
+    background-color: var(--list-no-data-bg-color, $list-no-data-bg-color) !important;
   }
 
   .error {
@@ -56,9 +56,9 @@
     p {
       margin: 10px 0px 10px 10px;
 
-      color: var(--ax-error);
+      color: var(--list-error-text-color, $list-error-text-color);
     }
 
-    background-color: color-mix(in srgb, var(--ax-error) 15%, transparent) !important;
+    background-color: var(--list-error-bg-color, $list-error-bg-color) !important;
   }
 }

package/src/components/List/ListHeader/ListHeader.scss

@@ -12,7 +12,7 @@
   );
 
   box-sizing: border-box;
-  border-bottom: solid 1px var(--ax-neutral-light);
+  border-bottom: solid 1px var(--list-header-border-color, $list-header-border-color);
 
   .columnLabel {
     box-sizing: border-box;
@@ -28,7 +28,7 @@
       height: 100%;
 
       z-index: 1;
-      border-right: var(--explorer-list-row-border, 1px solid var(--ax-neutral-light));
+      border-right: var(--explorer-list-row-border, 1px solid var(--list-header-resize-handle-border-color, $list-header-resize-handle-border-color));
       position: absolute;
       right: 0;
 

package/src/components/List/ListRow/ListRow.scss

@@ -29,7 +29,7 @@
 
   &.disabled {
     cursor: not-allowed;
-    color: var(--disabled-text-color, var(--ax-neutral));
+    color: var(--disabled-text-color, var(--list-row-disabled-text-color, $list-row-disabled-text-color));
   }
 
   .actions {

package/src/components/PageHeader/PageHeader.scss

@@ -38,7 +38,7 @@
 
       margin-top: 12px;
 
-      color: var(--ax-neutral);
+      color: var(--page-header-subtitle-color, $page-header-subtitle-color);
       font-size: 16px;
     }
 

package/src/components/Tabs/Tab/CustomTab.scss

@@ -5,7 +5,7 @@
 
   display: grid;
   height: 50px;
-  color: var(--ax-primary);
+  color: var(--tab-text-color, $tab-text-color);
   font-size: 14px;
   font-weight: bold;
   border-bottom: none;
@@ -17,17 +17,17 @@
 
   &.selected {
     background: white;
-    color: var(--ax-primary-dark);
+    color: var(--tab-selected-text-color, $tab-selected-text-color);
   }
 
   &:hover:not(.selected):not(.disabled) {
-    background-color: var(--ax-primary);
+    background-color: var(--tab-hover-bg-color, $tab-hover-bg-color);
     transition: background-color $confirmation-transition linear;
     color: white;
   }
 
   &.disabled {
-    color: var(--ax-neutral);
+    color: var(--tab-disabled-text-color, $tab-disabled-text-color);
     cursor: default;
   }
 }

package/src/components/Tabs/TabList/CustomTabList.scss

@@ -4,6 +4,6 @@
   border: none;
   margin: 0;
   padding: 0;
-  background-color: var(--ax-neutral-lighter);
-  border-top: 1px solid var(--ax-neutral-lighter);
+  background-color: var(--tab-list-bg-color, $tab-list-bg-color);
+  border-top: 1px solid var(--tab-list-border-color, $tab-list-border-color);
 }

package/src/styles/branding.scss

@@ -7,20 +7,20 @@
  * ## CSS Custom Properties Defined
  *
  * ### Primary Colors (Blues)
- * - `--ax-primary`: Base primary color (#1478af)
- * - `--ax-primary-dark`: Darker variant (auto-derived using HSL relative color syntax)
- * - `--ax-primary-light`: Lighter variant (auto-derived using HSL relative color syntax)
+ * - `--mosaic-primary`: Base primary light color (#28aae1)
+ * - `--mosaic-secondary`: Base variant (#1478af - auto-derived using RGB relative color syntax)
+ * - `--mosaic-accent`: Darker variant (#00467d - auto-derived using RGB relative color syntax)
  *
  * ### Neutral Colors (Grays)
- * - `--ax-neutral`: Base neutral color (#b7b7b7)
- * - `--ax-neutral-dark`: Darker variant (#707070)
- * - `--ax-neutral-light`: Lighter variant (#dddddd)
- * - `--ax-neutral-lighter`: Lightest variant (#eeeeee)
+ * - `--mosaic-neutral`: Base neutral color (#b7b7b7)
+ * - `--mosaic-neutral-1`: Darker variant (#707070)
+ * - `--mosaic-neutral-2`: Lighter variant (#dddddd)
+ * - `--mosaic-neutral-3`: Lightest variant (#eeeeee)
  *
  * ### Semantic Colors
- * - `--ax-error`: Error/danger state color (#f06c55 - red)
- * - `--ax-warning`: Warning state color (#ffc81a - yellow)
- * - `--ax-success`: Success state color (#95c852 - green)
+ * - `--mosaic-error`: Error/danger state color (#f06c55 - red)
+ * - `--mosaic-warning`: Warning state color (#ffc81a - yellow)
+ * - `--mosaic-success`: Success state color (#95c852 - green)
  *
  * ## Runtime Theming Usage
  *
@@ -32,20 +32,20 @@
  * Override colors in your application's CSS/SCSS:
  *
  *   :root {
- *     --ax-primary: #ff5733;  // No !important needed
- *     --ax-neutral: #666666;
+ *     --mosaic-secondary: #ff5733;  // No !important needed
+ *     --mosaic-neutral: #666666;
  *   }
  *
  * ### Example - Purple Theme
  *
  *   :root {
- *     --ax-primary: #7c3aed;
+ *     --mosaic-primary: #9d7aed;
  *   }
- *   // --ax-primary-dark and --ax-primary-light automatically adjust!
+ *   // --mosaic-secondary and --mosaic-accent automatically adjust!
  *
  * ### Dynamic Runtime Override
  *
- *   document.documentElement.style.setProperty('--ax-primary', '#7c3aed');
+ *   document.documentElement.style.setProperty('--mosaic-primary', '#9d7aed');
  *
  * ### Why This Works
  *
@@ -56,7 +56,7 @@
  *
  * ## Browser Support
  *
- * - CSS Relative Color Syntax (`hsl(from var(...))`) requires:
+ * - CSS Relative Color Syntax (`rgb(from var(...))`) requires:
  *   - Chrome 119+
  *   - Firefox 128+
  *   - Safari 16.4+
@@ -69,21 +69,25 @@
  */
 @layer ax-defaults {
   :root {
-    /* Base Primary Color - override this to change the entire primary palette */
-    --ax-primary: #1478af;
-    --ax-primary-dark: hsl(from var(--ax-primary) h calc(s + 24) calc(l - 13));
-    --ax-primary-light: hsl(
-      from var(--ax-primary) calc(h - 4) calc(s + 3) calc(l + 14)
+    /* Base Primary Light Color - override this to change the entire primary palette */
+    --mosaic-primary: #28aae1;
+    --mosaic-secondary: #1478af;
+    --mosaic-secondary: rgb(
+      from var(--mosaic-primary) calc(r * 0.5) calc(g * 0.706) calc(b * 0.778)
+    );
+    --mosaic-accent: #00467d;
+    --mosaic-accent: rgb(
+      from var(--mosaic-primary) calc(r * 0) calc(g * 0.412) calc(b * 0.556)
     );
 
-    --ax-neutral: #b7b7b7;
-    --ax-neutral-dark: #707070;
-    --ax-neutral-light: #dddddd;
-    --ax-neutral-lighter: #eeeeee;
+    --mosaic-neutral: #b7b7b7;
+    --mosaic-neutral-1: #707070;
+    --mosaic-neutral-2: #dddddd;
+    --mosaic-neutral-3: #eeeeee;
 
     /* Semantic Colors */
-    --ax-error: #f06c55;
-    --ax-warning: #ffc81a;
-    --ax-success: #95c852;
+    --mosaic-error: #f06c55;
+    --mosaic-warning: #ffc81a;
+    --mosaic-success: #95c852;
   }
 }