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

package/dist/components/Menu/components/Item.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "@ultraviolet/icons";
 import { forwardRef, useCallback } from "react";
 import { Stack } from "../../Stack/index.js";
@@ -7,92 +7,154 @@ import { Tooltip } from "../../Tooltip/index.js";
 import { getListItem } from "../helpers.js";
 import { useMenu, useDisclosureContext } from "../MenuProvider.js";
 import { menuItemContainer, menuItem } from "../styles.css.js";
-const Item = forwardRef(({
-  borderless = false,
-  disabled = false,
-  onClick,
-  sentiment = "neutral",
-  href,
-  target,
-  rel,
-  children,
-  tooltip,
-  active,
-  className,
-  searchText,
-  "data-testid": dataTestId,
-  style
-}, ref) => {
-  const {
-    hideOnClickItem,
-    setIsVisible,
-    isVisible,
-    menuRef,
-    isNested,
-    parentDisclosureRef,
-    disclosureRef
-  } = useMenu();
-  const isDisclosure = useDisclosureContext();
-  const onClickHandle = useCallback((event) => {
-    if (disabled) {
-      return void 0;
-    }
-    onClick?.(event);
-    if (hideOnClickItem) {
-      setIsVisible(false);
-    }
-    return void 0;
-  }, [disabled, hideOnClickItem, onClick, setIsVisible]);
-  const handleKeyDown = (event) => {
-    if (isDisclosure && ["Enter", " ", "ArrowRight"].includes(event.key)) {
-      disclosureRef?.current?.click();
-      setTimeout(() => {
-        if (menuRef.current?.children) {
-          const listItem = getListItem([...menuRef.current.children[0].children[0].children]);
-          if (listItem) {
-            const firstElementInNestedMenu = listItem[0];
-            if (firstElementInNestedMenu && ["BUTTON", "A"].includes(firstElementInNestedMenu.tagName)) {
-              firstElementInNestedMenu.focus();
-            } else if (firstElementInNestedMenu && firstElementInNestedMenu.firstChild instanceof HTMLElement) {
-              firstElementInNestedMenu.firstChild.focus();
+const Item = forwardRef(
+  ({
+    borderless = false,
+    disabled = false,
+    onClick,
+    sentiment = "neutral",
+    href,
+    target,
+    rel,
+    children,
+    tooltip,
+    active,
+    className,
+    searchText,
+    "data-testid": dataTestId,
+    style
+  }, ref) => {
+    const {
+      hideOnClickItem,
+      setIsVisible,
+      isVisible,
+      menuRef,
+      isNested,
+      parentDisclosureRef,
+      disclosureRef
+    } = useMenu();
+    const isDisclosure = useDisclosureContext();
+    const onClickHandle = useCallback(
+      (event) => {
+        if (disabled) {
+          return void 0;
+        }
+        onClick?.(event);
+        if (hideOnClickItem) {
+          setIsVisible(false);
+        }
+        return void 0;
+      },
+      [disabled, hideOnClickItem, onClick, setIsVisible]
+    );
+    const handleKeyDown = (event) => {
+      if (isDisclosure && ["Enter", " ", "ArrowRight"].includes(event.key)) {
+        disclosureRef?.current?.click();
+        setTimeout(() => {
+          if (menuRef.current?.children) {
+            const listItem = getListItem([
+              ...menuRef.current.children[0].children[0].children
+            ]);
+            if (listItem) {
+              const firstElementInNestedMenu = listItem[0];
+              if (firstElementInNestedMenu && ["BUTTON", "A"].includes(firstElementInNestedMenu.tagName)) {
+                firstElementInNestedMenu.focus();
+              } else if (firstElementInNestedMenu && firstElementInNestedMenu.firstChild instanceof HTMLElement) {
+                firstElementInNestedMenu.firstChild.focus();
+              }
             }
           }
+        }, 50);
+      } else if (event.key === "ArrowLeft" && isNested && (isDisclosure && parentDisclosureRef?.current?.dataset["isMenuItem"] || !isDisclosure) && parentDisclosureRef?.current) {
+        (isDisclosure ? parentDisclosureRef : disclosureRef).current?.click();
+      }
+    };
+    if (href && !disabled) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: menuItemContainer({ borderless }),
+          "data-search-text": searchText,
+          style,
+          children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: `${className ? `${className} ` : ""}${menuItem({ borderless: true, disabled, sentiment })}`,
+              "data-active": active,
+              "data-is-disclosure": isDisclosure,
+              "data-is-menu-item": true,
+              "data-testid": dataTestId,
+              href,
+              onClick: onClickHandle,
+              onKeyDown: handleKeyDown,
+              ref,
+              rel,
+              role: "menuitem",
+              target,
+              children: isDisclosure ? /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  alignItems: "center",
+                  direction: "row",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  children: [
+                    children,
+                    " ",
+                    /* @__PURE__ */ jsx(ArrowRightIcon, {})
+                  ]
+                }
+              ) : children
+            }
+          ) })
         }
-      }, 50);
-    } else if (event.key === "ArrowLeft" && isNested && (isDisclosure && parentDisclosureRef?.current?.dataset["isMenuItem"] || !isDisclosure) && parentDisclosureRef?.current) {
-      (isDisclosure ? parentDisclosureRef : disclosureRef).current?.click();
+      );
     }
-  };
-  if (href && !disabled) {
-    return /* @__PURE__ */ jsx("div", { className: menuItemContainer({
-      borderless
-    }), "data-search-text": searchText, style, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx("a", { className: `${className ? `${className} ` : ""}${menuItem({
-      borderless: true,
-      disabled,
-      sentiment
-    })}`, "data-active": active, "data-is-disclosure": isDisclosure, "data-is-menu-item": true, "data-testid": dataTestId, href, onClick: onClickHandle, onKeyDown: handleKeyDown, ref, rel, role: "menuitem", target, children: isDisclosure ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", width: "100%", children: [
-      children,
-      " ",
-      /* @__PURE__ */ jsx(ArrowRightIcon, {})
-    ] }) : children }) }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: menuItemContainer({ borderless }),
+        "data-search-text": searchText,
+        style,
+        children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `${className ? `${className} ` : ""}${menuItem({ borderless, disabled, sentiment })}`,
+            "data-active": active || isVisible && isDisclosure,
+            "data-is-disclosure": isDisclosure,
+            "data-is-menu-item": true,
+            "data-testid": dataTestId,
+            disabled,
+            onClick: (event) => {
+              onClick?.(event);
+              if (hideOnClickItem) {
+                setIsVisible(false);
+              }
+            },
+            onKeyDown: handleKeyDown,
+            ref,
+            role: "menuitem",
+            type: "button",
+            children: isDisclosure ? /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                alignItems: "center",
+                direction: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                children: [
+                  children,
+                  " ",
+                  /* @__PURE__ */ jsx(ArrowRightIcon, {})
+                ]
+              }
+            ) : children
+          }
+        ) })
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", { className: menuItemContainer({
-    borderless
-  }), "data-search-text": searchText, style, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx("button", { className: `${className ? `${className} ` : ""}${menuItem({
-    borderless,
-    disabled,
-    sentiment
-  })}`, "data-active": active || isVisible && isDisclosure, "data-is-disclosure": isDisclosure, "data-is-menu-item": true, "data-testid": dataTestId, disabled, onClick: (event) => {
-    onClick?.(event);
-    if (hideOnClickItem) {
-      setIsVisible(false);
-    }
-  }, onKeyDown: handleKeyDown, ref, role: "menuitem", type: "button", children: isDisclosure ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", width: "100%", children: [
-    children,
-    " ",
-    /* @__PURE__ */ jsx(ArrowRightIcon, {})
-  ] }) : children }) }) });
-});
+);
 export {
   Item
 };

package/dist/components/Menu/helpers.js

@@ -41,7 +41,9 @@ const getButtonOrLink = (element) => {
   }
   return false;
 };
-const getListItem = (listItems) => listItems.map((child) => getButtonOrLink(child) ? getButtonOrLink(child) : getButtonOrLink(child.firstElementChild)).filter((element) => typeof element !== "boolean");
+const getListItem = (listItems) => listItems.map(
+  (child) => getButtonOrLink(child) ? getButtonOrLink(child) : getButtonOrLink(child.firstElementChild)
+).filter((element) => typeof element !== "boolean");
 export {
   getListItem,
   searchChildren

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

@@ -19,7 +19,7 @@ export declare const Menu: import("react").ForwardRefExoticComponent<{
     hideOnClickItem?: boolean;
     footer?: import("react").ReactNode;
     placement?: Exclude<import("react").ComponentProps<typeof import("..").Popup>["placement"], "nested-menu">;
-    noShrink?: boolean;
+    shrink?: boolean;
 } & Pick<{
     id?: string;
     children: import("react").ReactNode | ((renderProps: {
@@ -60,7 +60,7 @@ export declare const Menu: import("react").ForwardRefExoticComponent<{
         labelDescription?: import("react").ReactNode;
         emptyState?: import("react").ReactNode;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     Item: import("react").ForwardRefExoticComponent<{
         href?: HTMLAnchorElement["href"];
         target?: HTMLAnchorElement["target"];

package/dist/components/Menu/index.js

@@ -1,20 +1,14 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Group } from "./components/Group.js";
 import { Item } from "./components/Item.js";
 import { Menu as Menu$1 } from "./MenuContent.js";
 import { MenuProvider } from "./MenuProvider.js";
-const Component = forwardRef(({
-  children,
-  visible,
-  hideOnClickItem,
-  ...props
-}, ref) => /* @__PURE__ */ jsx(MenuProvider, { hideOnClickItem, visible, children: /* @__PURE__ */ jsx(Menu$1, { ...props, ref, children }) }));
-const Menu = Object.assign(Component, {
-  Group,
-  Item
-});
+const Component = forwardRef(
+  ({ children, visible, hideOnClickItem, ...props }, ref) => /* @__PURE__ */ jsx(MenuProvider, { hideOnClickItem, visible, children: /* @__PURE__ */ jsx(Menu$1, { ...props, ref, children }) })
+);
+const Menu = Object.assign(Component, { Group, Item });
 export {
   Menu
 };

package/dist/components/Menu/types.d.ts

@@ -41,8 +41,8 @@ export type MenuProps = {
     footer?: ReactNode;
     placement?: Exclude<ComponentProps<typeof Popup>['placement'], 'nested-menu'>;
     /**
-     * When set to true, the menu does not shrink (height) to avoid overflow on the page
+     * When set to true, the menu shrinks (height) to avoid overflow on the page
      */
-    noShrink?: boolean;
+    shrink?: boolean;
 } & Pick<ComponentProps<typeof Popup>, 'dynamicDomRendering' | 'align' | 'style'>;
 export {};

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

@@ -24,5 +24,5 @@ type PasswordStrengthMeterProps = {
 /**
  * Show strength of a password based on different criteria.
  */
-export declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, style, id, }: PasswordStrengthMeterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, style, id, }: PasswordStrengthMeterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Meter/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { Text } from "../Text/index.js";
 import { strengthMeter, colorMeter, wrapperMeter, meter } from "./styles.css.js";
@@ -16,18 +16,49 @@ const Meter = ({
   const width = `${toValue}%`;
   const backgroundColor = strength[value]?.color ?? strength[0].color;
   const text = strength[value]?.text ?? strength[0].text;
-  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": "meter-label", "aria-live": "polite", "aria-valuemax": strength.length ?? 0, "aria-valuemin": 0, "aria-valuenow": value, className, "data-testid": dataTestId, id, role: "meter", style, title, children: [
-    /* @__PURE__ */ jsxs(Text, { as: "p", id: "meter-label", variant: "bodySmallStrong", children: [
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-labelledby": "meter-label",
+      "aria-live": "polite",
+      "aria-valuemax": strength.length ?? 0,
+      "aria-valuemin": 0,
+      "aria-valuenow": value,
+      className,
+      "data-testid": dataTestId,
+      id,
+      role: "meter",
+      style,
       title,
-      /* @__PURE__ */ jsx(Text, { as: "span", className: strengthMeter, style: assignInlineVars({
-        [colorMeter]: strength[value].color
-      }), variant: "bodySmallStrong", children: text })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: wrapperMeter, children: /* @__PURE__ */ jsx("div", { className: meter, style: {
-      backgroundColor,
-      width
-    } }) })
-  ] });
+      children: [
+        /* @__PURE__ */ jsxs(Text, { as: "p", id: "meter-label", variant: "bodySmallStrong", children: [
+          title,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "span",
+              className: strengthMeter,
+              style: assignInlineVars({
+                [colorMeter]: strength[value].color
+              }),
+              variant: "bodySmallStrong",
+              children: text
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: wrapperMeter, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: meter,
+            style: {
+              backgroundColor,
+              width
+            }
+          }
+        ) })
+      ]
+    }
+  );
 };
 export {
   Meter

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

@@ -14,5 +14,5 @@ type ModalContentProps = ComponentProps<typeof Modal> & {
     image?: string;
     style?: CSSProperties;
 };
-export declare const ModalContent: ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, style, }: ModalContentProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const ModalContent: ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, style, }: ModalContentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Modal/ModalContent.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 { CloseIcon } from "@ultraviolet/icons";
 import { Button } from "../Button/index.js";
 import { Dialog } from "./components/Dialog.js";
@@ -24,16 +24,46 @@ const ModalContent = ({
   finalId,
   image,
   style
-}) => visible || open ? /* @__PURE__ */ jsx(Dialog, { ariaLabel, backdropClassName, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id: finalId, image, onClose: handleClose, open: visible || open, placement, preventBodyScroll, size: finalSize, style, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-  typeof children === "function" ? children({
-    close: handleClose,
-    modalId: finalId,
-    show: handleOpen,
-    toggle: handleToggle,
-    visible
-  }) : children,
-  /* @__PURE__ */ jsx("div", { className: modalContainer, children: isClosable ? /* @__PURE__ */ jsx(Button, { "aria-label": "close", "data-testid": dataTestId ? `${dataTestId}-close-button` : void 0, onClick: handleClose, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null })
-] }) }) : null;
+}) => visible || open ? /* @__PURE__ */ jsx(
+  Dialog,
+  {
+    ariaLabel,
+    backdropClassName,
+    className,
+    "data-testid": dataTestId,
+    hideOnClickOutside,
+    hideOnEsc,
+    id: finalId,
+    image,
+    onClose: handleClose,
+    open: visible || open,
+    placement,
+    preventBodyScroll,
+    size: finalSize,
+    style,
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      typeof children === "function" ? children({
+        close: handleClose,
+        modalId: finalId,
+        show: handleOpen,
+        toggle: handleToggle,
+        visible
+      }) : children,
+      /* @__PURE__ */ jsx("div", { className: modalContainer, children: isClosable ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": "close",
+          "data-testid": dataTestId ? `${dataTestId}-close-button` : void 0,
+          onClick: handleClose,
+          sentiment: "neutral",
+          size: "small",
+          variant: "ghost",
+          children: /* @__PURE__ */ jsx(CloseIcon, {})
+        }
+      ) : null })
+    ] })
+  }
+) : null;
 export {
   ModalContent
 };

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

@@ -14,5 +14,5 @@ export declare const useModal: () => ModalContextValues;
 type ModalProviderProps = {
     children: ReactNode;
 };
-export declare const ModalProvider: ({ children }: ModalProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ModalProvider: ({ children }: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Modal/ModalProvider.js

@@ -1,7 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { createContext, useState, useCallback, useMemo, useContext } from "react";
-const ModalContext = createContext(void 0);
+const ModalContext = createContext(
+  void 0
+);
 const useModal = () => {
   const context = useContext(ModalContext);
   if (!context) {
@@ -9,9 +11,7 @@ const useModal = () => {
   }
   return context;
 };
-const ModalProvider = ({
-  children
-}) => {
+const ModalProvider = ({ children }) => {
   const [openedModals, setOpenedModals] = useState([]);
   const [previsousOpenedModales, setPreviousOpenedModales] = useState([]);
   const registerModal = useCallback((object) => {
@@ -26,12 +26,15 @@ const ModalProvider = ({
       return prev.filter((modalId) => modalId.id !== id);
     });
   }, []);
-  const value = useMemo(() => ({
-    openedModals,
-    previsousOpenedModales,
-    registerModal,
-    unregisterModal
-  }), [openedModals, registerModal, unregisterModal, previsousOpenedModales]);
+  const value = useMemo(
+    () => ({
+      openedModals,
+      previsousOpenedModales,
+      registerModal,
+      unregisterModal
+    }),
+    [openedModals, registerModal, unregisterModal, previsousOpenedModales]
+  );
   return /* @__PURE__ */ jsx(ModalContext.Provider, { value, children });
 };
 export {