@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.28

package/dist/components/Modal/components/Dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
@@ -40,10 +40,7 @@ const Dialog = ({
     setIsVisible(true);
   }, []);
   useEffect(() => {
-    registerModal({
-      id,
-      ref: dialogRef
-    });
+    registerModal({ id, ref: dialogRef });
     return () => {
       unregisterModal(id);
     };
@@ -80,18 +77,24 @@ const Dialog = ({
   const modalAbove = openedModals[realPosition + 1];
   const currentModalHeight = dialogRef.current?.offsetHeight;
   let top = 0;
-  const handleKeyUp = useCallback((event) => {
-    event.stopPropagation();
-    if (event.key === "Escape" && hideOnEsc) {
-      event.preventDefault();
-      onCloseRef.current();
-    }
-  }, [hideOnEsc]);
-  const handleClose = useCallback((event) => {
-    if (hideOnClickOutside && dialogRef.current && !dialogRef.current.contains(event.target) && position === 0) {
-      onCloseRef.current();
-    }
-  }, [hideOnClickOutside, position]);
+  const handleKeyUp = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (event.key === "Escape" && hideOnEsc) {
+        event.preventDefault();
+        onCloseRef.current();
+      }
+    },
+    [hideOnEsc]
+  );
+  const handleClose = useCallback(
+    (event) => {
+      if (hideOnClickOutside && dialogRef.current && !dialogRef.current.contains(event.target) && position === 0) {
+        onCloseRef.current();
+      }
+    },
+    [hideOnClickOutside, position]
+  );
   const handleFocusTrap = useCallback((event) => {
     event.stopPropagation();
     if (event.key === "Escape") {
@@ -102,46 +105,87 @@ const Dialog = ({
     if (!isTabPressed) {
       return;
     }
-    const focusableEls = dialogRef.current?.querySelectorAll("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])") ?? [];
-    if (focusableEls.length === 0) {
+    const focusableEls = dialogRef.current?.querySelectorAll(
+      "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])"
+    );
+    if (focusableEls?.length === 0) {
       event.preventDefault();
     }
-    const firstFocusableEl = focusableEls[0];
-    const lastFocusableEl = focusableEls[focusableEls.length - 1];
-    if (event.shiftKey) {
-      if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
-        lastFocusableEl.focus();
+    if (focusableEls) {
+      const elems = [...focusableEls];
+      const firstFocusableEl = elems[0];
+      const lastFocusableEl = elems.at(-1);
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusableEl || document.activeElement === dialogRef.current) {
+          if (lastFocusableEl instanceof HTMLElement) {
+            lastFocusableEl.focus();
+          }
+          event.preventDefault();
+        }
+      } else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
+        if (firstFocusableEl instanceof HTMLElement) {
+          firstFocusableEl.focus();
+        }
         event.preventDefault();
       }
-    } else if (document.activeElement === lastFocusableEl || document.activeElement === dialogRef.current) {
-      firstFocusableEl.focus();
-      event.preventDefault();
     }
   }, []);
   if (modalAbove?.ref && typeof modalAbove.ref === "object" && "current" in modalAbove.ref && currentModalHeight) {
     top = (modalAbove?.ref?.current?.offsetHeight ?? 0) / 2 - currentModalHeight / 2 + 20;
   }
   const animation = openedModals.length > 1 && position === 0 && previsousOpenedModales.length < openedModals.length;
-  return createPortal(/* @__PURE__ */ jsx("div", { className: `${backdropClassName} ${modalBackdrop({
-    open: true,
-    visible: isVisible
-  })}`, "data-testid": dataTestId ? `${dataTestId}-backdrop` : void 0, "data-visible": isVisible, onClick: handleClose, onFocus: stopFocus, onKeyDown: () => {
-  }, children: /* @__PURE__ */ jsx("dialog", { "aria-label": ariaLabel, "aria-modal": true, className: `${className ? `${className} ` : ""}${modal({
-    animation,
-    image: !!image,
-    placement,
-    positivePosition: position > 0,
-    size
-  })}`, "data-size": size, "data-testid": dataTestId, id, onCancel: stopCancel, onClose: stopCancel, onKeyDown: handleFocusTrap, onKeyUp: handleKeyUp, open: true, ref: dialogRef, style: {
-    ...assignInlineVars({
-      [topModal]: `-${top}px`,
-      [positionModal]: `${position * 50}px`
-    }),
-    ...style
-  }, tabIndex: 0, children: image ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Stack, { alignItems: "end", className: modalImageContainer, justifyContent: "center", children: /* @__PURE__ */ jsx("img", { alt: "illustration", className: modalImage, src: image }) }),
-    /* @__PURE__ */ jsx(Stack, { className: modalContent, gap: 5, children })
-  ] }) : children }) }), containerRef.current);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${backdropClassName} ${modalBackdrop({ open: true, visible: isVisible })}`,
+        "data-testid": dataTestId ? `${dataTestId}-backdrop` : void 0,
+        "data-visible": isVisible,
+        onClick: handleClose,
+        onFocus: stopFocus,
+        onKeyDown: () => {
+        },
+        children: /* @__PURE__ */ jsx(
+          "dialog",
+          {
+            "aria-label": ariaLabel,
+            "aria-modal": true,
+            className: `${className ? `${className} ` : ""}${modal({ animation, image: !!image, placement, positivePosition: position > 0, size })}`,
+            "data-size": size,
+            "data-testid": dataTestId,
+            id,
+            onCancel: stopCancel,
+            onClose: stopCancel,
+            onKeyDown: handleFocusTrap,
+            onKeyUp: handleKeyUp,
+            open: true,
+            ref: dialogRef,
+            style: {
+              ...assignInlineVars({
+                [topModal]: `-${top}px`,
+                [positionModal]: `${position * 50}px`
+              }),
+              ...style
+            },
+            tabIndex: 0,
+            children: image ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  alignItems: "end",
+                  className: modalImageContainer,
+                  justifyContent: "center",
+                  children: /* @__PURE__ */ jsx("img", { alt: "illustration", className: modalImage, src: image })
+                }
+              ),
+              /* @__PURE__ */ jsx(Stack, { className: modalContent, gap: 5, children })
+            ] }) : children
+          }
+        )
+      }
+    ),
+    containerRef.current
+  );
 };
 export {
   Dialog

package/dist/components/Modal/index.d.ts

@@ -27,4 +27,4 @@ export type ModalProps = {
  * Modal is a component that allows you to display content on top of other content.
  * It is often used to display a dialog with additional information or to ask for a confirmation.
  */
-export declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, open, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, image, style, }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, open, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, image, style, }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useId, useRef, useCallback, useContext } from "react";
 import { Disclosure } from "./components/Disclosure.js";
 import { ModalContent } from "./ModalContent.js";
@@ -49,8 +49,65 @@ const Modal = ({
   const finalId = id ?? controlId;
   const context = useContext(ModalContext);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    disclosure ? /* @__PURE__ */ jsx(Disclosure, { disclosure, handleClose, handleOpen, id: finalId, ref: disclosureRef, toggle: handleToggle, visible }) : null,
-    !context ? /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, style, visible, children }) }) : /* @__PURE__ */ jsx(ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, style, visible, children })
+    disclosure ? /* @__PURE__ */ jsx(
+      Disclosure,
+      {
+        disclosure,
+        handleClose,
+        handleOpen,
+        id: finalId,
+        ref: disclosureRef,
+        toggle: handleToggle,
+        visible
+      }
+    ) : null,
+    !context ? /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(
+      ModalContent,
+      {
+        ariaLabel,
+        backdropClassName,
+        className,
+        dataTestId,
+        finalId,
+        finalSize: size,
+        handleClose,
+        handleOpen,
+        handleToggle,
+        hideOnClickOutside,
+        hideOnEsc,
+        image,
+        isClosable,
+        open,
+        placement,
+        preventBodyScroll,
+        style,
+        visible,
+        children
+      }
+    ) }) : /* @__PURE__ */ jsx(
+      ModalContent,
+      {
+        ariaLabel,
+        backdropClassName,
+        className,
+        dataTestId,
+        finalId,
+        finalSize: size,
+        handleClose,
+        handleOpen,
+        handleToggle,
+        hideOnClickOutside,
+        hideOnEsc,
+        image,
+        isClosable,
+        open,
+        placement,
+        preventBodyScroll,
+        style,
+        visible,
+        children
+      }
+    )
   ] });
 };
 export {

package/dist/components/Notice/index.d.ts

@@ -8,5 +8,5 @@ type NoticeProps = {
 /**
  * A Notice is used to display a short message to the user.
  */
-export declare const Notice: ({ children, className, "data-testid": dataTestId, style, }: NoticeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Notice: ({ children, className, "data-testid": dataTestId, style, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Notice/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { InformationOutlineIcon } from "@ultraviolet/icons";
 import { Text } from "../Text/index.js";
 import { notice } from "./styles.css.js";
@@ -8,10 +8,29 @@ const Notice = ({
   className,
   "data-testid": dataTestId,
   style
-}) => /* @__PURE__ */ jsxs(Text, { as: "span", className: `${className ? `${className} ` : ""}${notice}`, "data-testid": dataTestId, prominence: "weak", sentiment: "neutral", style, variant: "caption", children: [
-  /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }),
-  children
-] });
+}) => /* @__PURE__ */ jsxs(
+  Text,
+  {
+    as: "span",
+    className: `${className ? `${className} ` : ""}${notice}`,
+    "data-testid": dataTestId,
+    prominence: "weak",
+    sentiment: "neutral",
+    style,
+    variant: "caption",
+    children: [
+      /* @__PURE__ */ jsx(
+        InformationOutlineIcon,
+        {
+          prominence: "weak",
+          sentiment: "neutral",
+          size: "small"
+        }
+      ),
+      children
+    ]
+  }
+);
 export {
   Notice
 };

package/dist/components/Notification/Notification.js

@@ -1,11 +1,21 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { toast } from "react-toastify";
 import { Button } from "../Button/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
-const closeButton = (props) => /* @__PURE__ */ jsx(Button, { "aria-label": "close", onClick: props.closeToast, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+const closeButton = (props) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    "aria-label": "close",
+    onClick: props.closeToast,
+    sentiment: "neutral",
+    size: "xsmall",
+    variant: "ghost",
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
+  }
+);
 const notification = (children, title, icon, isClosable, containerId, options) => toast("", {
   ...options,
   closeButton: (props) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, children: [

package/dist/components/Notification/NotificationContainer.d.ts

@@ -26,5 +26,5 @@ type NotificationContainerProps = {
     containerId?: string;
     style?: CSSProperties;
 };
-export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, style, containerId, }: NotificationContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, style, containerId, }: NotificationContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Notification/NotificationContainer.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { ToastContainer, Slide } from "react-toastify";
 import { notification } from "./styles.css.js";
 const NotificationContainer = ({
@@ -11,7 +11,23 @@ const NotificationContainer = ({
   className,
   style,
   containerId = "notification"
-}) => /* @__PURE__ */ jsx(ToastContainer, { autoClose, className: `${className ? `${className} ` : ""}${notification}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, position, style, transition: Slide });
+}) => /* @__PURE__ */ jsx(
+  ToastContainer,
+  {
+    autoClose,
+    className: `${className ? `${className} ` : ""}${notification}`,
+    containerId,
+    "data-testid": dataTestId,
+    draggable: false,
+    hideProgressBar: true,
+    icon: false,
+    limit,
+    newestOnTop,
+    position,
+    style,
+    transition: Slide
+  }
+);
 export {
   NotificationContainer
 };

package/dist/components/NumberInput/index.d.ts

@@ -30,5 +30,5 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<{
     onChange?: (newValue: number | null) => void;
     min?: number;
     max?: number;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "name" | "aria-label" | "onFocus" | "onBlur" | "autoFocus" | "step" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "autoFocus" | "aria-label" | "onFocus" | "onBlur" | "name" | "step" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};