aidos-ui 4.0.5 → 4.0.6

package/dist/index.js

@@ -564,7 +564,9 @@ var sizes2 = {
   small: 6,
   medium: 12,
   large: 18,
-  xlarge: 24
+  xlarge: 24,
+  xxlarge: 32,
+  xxxlarge: 40
 };
 function Badge({
   size = "medium",
@@ -771,12 +773,13 @@ var BaseButton = React34.forwardRef(
     disabled,
     animateInteraction = true,
     padding,
+    type = "button",
     ...otherProps
   }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
       {
-        type: "button",
+        type,
         ...otherProps,
         "aria-disabled": disabled ? true : void 0,
         ref,
@@ -931,12 +934,12 @@ var BaseLink = React34.forwardRef(
         href,
         role,
         ref,
-        onClick: onClick ? (event) => {
+        onClick: (event) => {
           if (disabled) {
             return;
           }
-          onClick(event);
-        } : void 0,
+          onClick && onClick(event);
+        },
         className: toClassnames([
           ...getInteractableJSS({
             color,
@@ -1133,15 +1136,20 @@ var focusElement = (focusables, index) => {
 };
 function useRefEffect(callback) {
   const unsubscribeRef = useRef(null);
-  const refCallback = useCallback((root) => {
-    if (root === null) {
-      unsubscribeRef.current && unsubscribeRef.current();
-    } else {
-      const unsubscribe = callback(root);
-      unsubscribeRef.current = unsubscribe;
-    }
-  }, []);
-  return refCallback;
+  return useCallback(
+    (root) => {
+      if (root === null) {
+        const unsubscribe = unsubscribeRef.current;
+        if (unsubscribe) {
+          unsubscribe();
+        }
+        unsubscribeRef.current = null;
+      } else {
+        unsubscribeRef.current = callback(root);
+      }
+    },
+    [callback]
+  );
 }
 
 // src/useNavigation.tsx
@@ -1150,72 +1158,78 @@ function useNavigation({
   rowLength = 1,
   enabled = true
 } = {}) {
-  return useRefEffect((root) => {
-    if (!enabled) {
-      return;
-    }
-    let index = 0;
-    const elements = queryFocusables(root);
-    if (elements.length === 0) {
-      return;
-    }
-    if (elements.length !== 0 && autofocus) {
-      focusElement(elements, index);
-    } else {
-      normalizeElements(elements, index);
-    }
-    const onKeyDown = (e) => {
-      const elements2 = queryFocusables(root);
-      if (elements2.length === 0) {
-        return;
-      }
-      let newIndex = -1;
-      if (e.code === "ArrowUp") {
-        if (index - rowLength < 0) {
-          newIndex = elements2.length - elements2.length % rowLength + index;
-        } else {
-          newIndex = index - rowLength;
-        }
-      } else if (e.code === "ArrowLeft") {
-        if (index <= 0) {
-          newIndex = elements2.length - 1;
-        } else {
-          newIndex = index - 1;
+  return useRefEffect(
+    useCallback(
+      (root) => {
+        if (!enabled) {
+          return;
         }
-      } else if (e.code === "ArrowRight") {
-        if (index >= elements2.length - 1) {
-          newIndex = 0;
-        } else {
-          newIndex = index + 1;
+        let index = 0;
+        const elements = queryFocusables(root);
+        if (elements.length === 0) {
+          return;
         }
-      } else if (e.code === "ArrowDown") {
-        if (index + rowLength > elements2.length - 1) {
-          newIndex = (index + rowLength) % rowLength;
+        if (elements.length !== 0 && autofocus) {
+          focusElement(elements, index);
         } else {
-          newIndex = index + rowLength;
+          normalizeElements(elements, index);
         }
-      }
-      if (newIndex !== -1 && index !== newIndex) {
-        index = newIndex;
-        focusElement(elements2, index);
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
-    root.addEventListener("keydown", onKeyDown);
-    const observer = new MutationObserver((mutationList) => {
-      if (mutationList.filter((m) => m.type === "childList").length > 0) {
-        const elements2 = queryFocusables(root);
-        if (elements2.length > 0) {
-          normalizeElements(elements2, index);
-        }
-      }
-    });
-    observer.observe(root, { childList: true });
-    return () => {
-      root.removeEventListener("keydown", onKeyDown);
-    };
-  });
+        const onKeyDown = (e) => {
+          const elements2 = queryFocusables(root);
+          if (elements2.length === 0) {
+            return;
+          }
+          let newIndex = -1;
+          if (e.code === "ArrowUp") {
+            if (index - rowLength < 0) {
+              newIndex = elements2.length - elements2.length % rowLength + index;
+            } else {
+              newIndex = index - rowLength;
+            }
+          } else if (e.code === "ArrowLeft") {
+            if (index <= 0) {
+              newIndex = elements2.length - 1;
+            } else {
+              newIndex = index - 1;
+            }
+          } else if (e.code === "ArrowRight") {
+            if (index >= elements2.length - 1) {
+              newIndex = 0;
+            } else {
+              newIndex = index + 1;
+            }
+          } else if (e.code === "ArrowDown") {
+            if (index + rowLength > elements2.length - 1) {
+              newIndex = (index + rowLength) % rowLength;
+            } else {
+              newIndex = index + rowLength;
+            }
+          }
+          if (newIndex !== -1 && index !== newIndex) {
+            index = newIndex;
+            focusElement(elements2, index);
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        };
+        root.addEventListener("keydown", onKeyDown);
+        const observer = new MutationObserver((mutationList) => {
+          if (mutationList.filter((m) => m.type === "childList").length > 0) {
+            const elements2 = queryFocusables(root);
+            if (elements2.length > 0) {
+              normalizeElements(elements2, index);
+            }
+          }
+        });
+        observer.observe(root, { childList: true });
+        return () => {
+          root.removeEventListener("keydown", onKeyDown);
+          observer.disconnect();
+        };
+      },
+      [autofocus, enabled, rowLength]
+    )
+  );
 }
 var ListContext = React34.createContext({ bare: false, carded: true });
 function List({
@@ -1488,7 +1502,7 @@ var Button = React34.forwardRef(
     );
   }
 );
-var dateFormatter = Intl.DateTimeFormat("en-UK", {
+var dateFormatter = Intl.DateTimeFormat("en-GB", {
   weekday: "short"
 });
 var MON = dateFormatter.format(new Date(2e3, 1, 7));
@@ -1635,7 +1649,9 @@ var sizes3 = {
   small: 24,
   medium: 32,
   large: 40,
-  xlarge: 48
+  xlarge: 48,
+  xxlarge: 56,
+  xxxlarge: 64
 };
 function StaticCheckbox({
   checked,
@@ -1859,6 +1875,32 @@ function DarkModeToggle() {
     }
   );
 }
+
+// src/dateInputValue.ts
+var pad = (value) => value.toString().padStart(2, "0");
+function formatDateInputValue(date) {
+  return `${date.getFullYear().toString().padStart(4, "0")}-${pad(
+    date.getMonth() + 1
+  )}-${pad(date.getDate())}`;
+}
+function parseDateInputValue(value) {
+  const [year, month, day] = value.split("-").map(Number);
+  return new Date(year, month - 1, day);
+}
+function formatDatetimeInputValue(date) {
+  return `${formatDateInputValue(date)}T${pad(date.getHours())}:${pad(
+    date.getMinutes()
+  )}`;
+}
+function parseDatetimeInputValue(value) {
+  const [date, time] = value.split("T");
+  const [year, month, day] = date.split("-").map(Number);
+  const [hour, minute] = time.split(":").map(Number);
+  return new Date(year, month - 1, day, hour, minute);
+}
+function formatTimeInputValue(date) {
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
 var DateInput = React34.forwardRef(
   ({ date, onDateChange, jss, icon, addOn, ...inputProps }, ref) => {
     return /* @__PURE__ */ jsxs(
@@ -1875,8 +1917,12 @@ var DateInput = React34.forwardRef(
               ...inputProps,
               type: "date",
               ref,
-              value: date.toISOString().substring(0, 10),
-              onChange: (e) => onDateChange(new Date(e.target.value)),
+              value: formatDateInputValue(date),
+              onChange: (e) => {
+                if (e.target.value) {
+                  onDateChange(parseDateInputValue(e.target.value));
+                }
+              },
               jss: [
                 {
                   flexGrow: 1,
@@ -1920,12 +1966,15 @@ function DatePicker({
   date,
   onDateChange
 }) {
-  const initialDate = useRef(date);
-  const year = initialDate.current.getFullYear();
-  const month = initialDate.current.getMonth();
-  const day = initialDate.current.getDate();
-  const min = new Date(year - 1, month, day).toISOString().substring(0, 10);
-  const max = new Date(year + 1, month, day).toISOString().substring(0, 10);
+  const [{ min, max }] = useState(() => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const day = date.getDate();
+    return {
+      min: formatDateInputValue(new Date(year - 1, month, day)),
+      max: formatDateInputValue(new Date(year + 1, month, day))
+    };
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, children: /* @__PURE__ */ jsx(Text, { size: "small", color, children: label }) }),
     /* @__PURE__ */ jsx(
@@ -1936,15 +1985,10 @@ function DatePicker({
         className: toClassnames(styles6.dateInput),
         type: "date",
         id,
-        value: date.toISOString().substring(0, 10),
+        value: formatDateInputValue(date),
         onChange: (event) => {
-          let parsedDate;
-          try {
-            parsedDate = new Date(event.target.value);
-          } finally {
-            if (parsedDate != null) {
-              onDateChange(parsedDate);
-            }
+          if (event.target.value) {
+            onDateChange(parseDateInputValue(event.target.value));
           }
         }
       }
@@ -1982,8 +2026,12 @@ var DatetimeInput = React34.forwardRef(
           ...inputProps,
           type: "datetime-local",
           ref,
-          value: date.toISOString().substring(0, 16),
-          onChange: (e) => onDateChange(new Date(e.target.value)),
+          value: formatDatetimeInputValue(date),
+          onChange: (e) => {
+            if (e.target.value) {
+              onDateChange(parseDatetimeInputValue(e.target.value));
+            }
+          },
           jss: [styles7.input, jss]
         }
       ),
@@ -2147,15 +2195,17 @@ function Dropdown({
   const triggerRef = useRef(null);
   const [expanded, setExpanded] = useState(false);
   const dropdownRef = useNavigation({ autofocus: true });
-  const rootRef = useRefEffect((root) => {
-    const onKeyDown = (e) => {
-      if (e.code === "Escape") {
-        setExpanded(false);
-      }
-    };
-    root.addEventListener("keydown", onKeyDown);
-    return () => root.removeEventListener("keydown", onKeyDown);
-  });
+  const rootRef = useRefEffect(
+    useCallback((root) => {
+      const onKeyDown = (e) => {
+        if (e.code === "Escape") {
+          setExpanded(false);
+        }
+      };
+      root.addEventListener("keydown", onKeyDown);
+      return () => root.removeEventListener("keydown", onKeyDown);
+    }, [])
+  );
   useEffect(() => {
     if (!expanded) {
       triggerRef.current && triggerRef.current.focus();
@@ -2263,7 +2313,9 @@ var sizes5 = {
   small: 24,
   medium: 32,
   large: 40,
-  xlarge: 48
+  xlarge: 48,
+  xxlarge: 56,
+  xxxlarge: 64
 };
 var IconLink = React34.forwardRef(
   ({ icon, size, color, bare, disabled, jss, ...otherProps }, ref) => {
@@ -2667,47 +2719,53 @@ var styles11 = {
 };
 function Popover({ children, close }) {
   const activeElementRef = useRef(null);
-  const focusTrapRoot = useRefEffect((root) => {
-    activeElementRef.current = document.activeElement;
-    const [element] = queryFocusables(root);
-    element ? element.focus() : root.focus();
-    const keydown = (e) => {
-      if (e.key === "Escape") {
-        close();
-      } else if (e.key === "Tab") {
-        const focusables = queryFocusables(root).filter(
-          (element2) => element2.tabIndex !== -1
-        );
-        if (focusables.length === 0) {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-        const focusedIndex = focusables.findIndex(
-          (x) => x === document.activeElement
-        );
-        if (focusables.length === 0) {
-          e.stopPropagation();
-          e.preventDefault();
-        } else if (focusedIndex === focusables.length - 1) {
-          focusables[0].focus();
-          e.stopPropagation();
-          e.preventDefault();
-        } else ;
-      }
-    };
-    const click = () => {
-      close();
-    };
-    setTimeout(() => {
-      window.addEventListener("keydown", keydown);
-      window.addEventListener("click", click);
-    }, 0);
-    return () => {
-      activeElementRef.current && activeElementRef.current.focus();
-      window.removeEventListener("keydown", keydown);
-      window.removeEventListener("click", click);
-    };
-  });
+  const focusTrapRoot = useRefEffect(
+    useCallback(
+      (root) => {
+        activeElementRef.current = document.activeElement;
+        const [element] = queryFocusables(root);
+        element ? element.focus() : root.focus();
+        const keydown = (e) => {
+          if (e.key === "Escape") {
+            close();
+          } else if (e.key === "Tab") {
+            const focusables = queryFocusables(root).filter(
+              (element2) => element2.tabIndex !== -1
+            );
+            if (focusables.length === 0) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+            const focusedIndex = focusables.findIndex(
+              (x) => x === document.activeElement
+            );
+            if (focusables.length === 0) {
+              e.stopPropagation();
+              e.preventDefault();
+            } else if (focusedIndex === focusables.length - 1) {
+              focusables[0].focus();
+              e.stopPropagation();
+              e.preventDefault();
+            } else ;
+          }
+        };
+        const click = () => {
+          close();
+        };
+        const timeout = window.setTimeout(() => {
+          window.addEventListener("keydown", keydown);
+          window.addEventListener("click", click);
+        }, 0);
+        return () => {
+          window.clearTimeout(timeout);
+          activeElementRef.current && activeElementRef.current.focus();
+          window.removeEventListener("keydown", keydown);
+          window.removeEventListener("click", click);
+        };
+      },
+      [close]
+    )
+  );
   return /* @__PURE__ */ jsx(BaseView, { ref: focusTrapRoot, children });
 }
 function PopoverTrigger({
@@ -2795,7 +2853,9 @@ var sizes6 = {
   small: 8,
   medium: 12,
   large: 16,
-  xlarge: 20
+  xlarge: 20,
+  xxlarge: 28,
+  xxxlarge: 36
 };
 function ProgressBar({
   color,
@@ -3493,7 +3553,6 @@ var TextArea = React34.forwardRef(
     jss,
     onValueChange,
     value,
-    onChange,
     padding = "medium",
     ...otherProps
   }, ref) => {
@@ -3647,9 +3706,10 @@ function TextInputWithState({
   );
   return /* @__PURE__ */ jsx(TextInput, { ...otherProps, value, onValueChange });
 }
-var timeFormatter = Intl.DateTimeFormat("en-UK", {
+var timeFormatter = Intl.DateTimeFormat("en-GB", {
   hour: "2-digit",
-  minute: "2-digit"
+  minute: "2-digit",
+  hourCycle: "h23"
 });
 function TimeInputInternal({
   time: date,
@@ -3695,7 +3755,7 @@ function TimeInputInternal({
             ...inputProps,
             type: "time",
             ref,
-            value: timeFormatter.format(date),
+            value: formatTimeInputValue(date),
             onChange: (e) => {
               const value = e.target.value;
               const [hour, minute] = value.split(":");
@@ -3754,34 +3814,37 @@ var styles13 = {
 function Tooltip({ content, jss, tag, children }) {
   const [tooltip, setTooltip] = useState(null);
   const dialogRef = useRef(null);
-  const focusTrapRoot = useRefEffect((root) => {
-    dialogRef.current = root;
-    const keydown = (e) => {
-      if (e.key === "Escape") {
-        dialogRef.current?.close();
-      } else if (e.key === "Tab") {
+  const focusTrapRoot = useRefEffect(
+    useCallback((root) => {
+      dialogRef.current = root;
+      const keydown = (e) => {
+        if (e.key === "Escape") {
+          dialogRef.current?.close();
+        } else if (e.key === "Tab") {
+          dialogRef.current?.close();
+        }
+      };
+      const click = () => {
         dialogRef.current?.close();
-      }
-    };
-    const click = () => {
-      dialogRef.current?.close();
-    };
-    window.addEventListener("keydown", keydown);
-    window.addEventListener("click", click);
-    const activeElement = document.activeElement;
-    root.show();
-    activeElement.focus();
-    return () => {
-      window.removeEventListener("keydown", keydown);
-      window.removeEventListener("click", click);
-    };
-  });
+      };
+      window.addEventListener("keydown", keydown);
+      window.addEventListener("click", click);
+      const activeElement = document.activeElement;
+      root.show();
+      activeElement.focus();
+      return () => {
+        window.removeEventListener("keydown", keydown);
+        window.removeEventListener("click", click);
+      };
+    }, [])
+  );
   const toggle = () => {
     if (tooltip == null) {
       setTooltip(
         /* @__PURE__ */ jsx(
           "dialog",
           {
+            role: "tooltip",
             ref: (ref) => {
               dialogRef.current = ref;
               focusTrapRoot(ref);
@@ -3825,35 +3888,38 @@ function Tooltip({ content, jss, tag, children }) {
     }
   );
 }
-
-// src/useKeyboard.tsx
 function useKeyboard(shortcuts) {
-  return useRefEffect((root) => {
-    const onKeyDown = (e) => {
-      for (const {
-        metaKey,
-        key,
-        action,
-        ctrlKey,
-        onlyWhenFocused
-      } of shortcuts) {
-        if (metaKey && e.metaKey !== true) {
-          continue;
-        } else if (ctrlKey && e.ctrlKey !== true) {
-          continue;
-        } else if (onlyWhenFocused && document.activeElement !== root) {
-          continue;
-        }
-        if (e.key.toLowerCase() === key.toLowerCase()) {
-          action(root);
-        }
-      }
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  });
+  return useRefEffect(
+    useCallback(
+      (root) => {
+        const onKeyDown = (e) => {
+          for (const {
+            metaKey,
+            key,
+            action,
+            ctrlKey,
+            onlyWhenFocused
+          } of shortcuts) {
+            if (metaKey && e.metaKey !== true) {
+              continue;
+            } else if (ctrlKey && e.ctrlKey !== true) {
+              continue;
+            } else if (onlyWhenFocused && document.activeElement !== root) {
+              continue;
+            }
+            if (e.key.toLowerCase() === key.toLowerCase()) {
+              action(root);
+            }
+          }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+          window.removeEventListener("keydown", onKeyDown);
+        };
+      },
+      [shortcuts]
+    )
+  );
 }
 function usePromise(promiseFactory, inputs, initialValue) {
   const [value, setValue] = useState(initialValue);