@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.18

package/dist/components/Navigation/NavigationProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, useState, useReducer, useRef, useCallback, useMemo, createContext } from "react";
 import { NAVIGATION_WIDTH, ANIMATION_DURATION } from "./constants.js";
 import NavigationLocales from "./locales/en.js";
@@ -10,9 +10,7 @@ const NavigationContext = createContext({
   expanded: true,
   items: {},
   locales: NavigationLocales,
-  navigationRef: {
-    current: null
-  },
+  navigationRef: { current: null },
   pinItem: () => [],
   pinLimit: 7,
   pinnedItems: [],
@@ -51,75 +49,115 @@ const NavigationProvider = ({
 }) => {
   const [expanded, setExpanded] = useState(initialExpanded);
   const [pinnedItems, setPinnedItems] = useState(initialPinned ?? []);
-  const [animation, setAnimation] = useState(false);
+  const [animation, setAnimation] = useState(
+    false
+  );
   const [width, setWidth] = useState(initialWidth);
-  const [allowNavigationResize, setAllowNavigationResize] = useState(initialAllowNavigationResize);
-  const [items, registerItem] = useReducer((oldState, newState) => ({
-    ...oldState,
-    ...newState
-  }), {});
+  const [allowNavigationResize, setAllowNavigationResize] = useState(
+    initialAllowNavigationResize
+  );
+  const [items, registerItem] = useReducer(
+    (oldState, newState) => ({
+      ...oldState,
+      ...newState
+    }),
+    {}
+  );
   const navigationRef = useRef(null);
-  const toggleExpand = useCallback((toggle) => {
-    if (typeof toggle !== "boolean" && toggle !== void 0) {
-      throw new Error("toggleExpand only accepts boolean or undefined as parameter. You most likely did <button onClick={toggleExpand}> instead of <button onClick={() => toggleExpand()}>");
-    }
-    if (toggle !== void 0 && toggle === expanded) {
-      return;
-    }
-    onExpandChange?.(!expanded);
-    if (navigationRef.current) {
-      navigationRef.current.style.width = "";
-    }
-    if (shouldAnimate) {
-      setAnimation(expanded ? "collapse" : "expand");
-      setTimeout(() => {
+  const toggleExpand = useCallback(
+    (toggle) => {
+      if (typeof toggle !== "boolean" && toggle !== void 0) {
+        throw new Error(
+          "toggleExpand only accepts boolean or undefined as parameter. You most likely did <button onClick={toggleExpand}> instead of <button onClick={() => toggleExpand()}>"
+        );
+      }
+      if (toggle !== void 0 && toggle === expanded) {
+        return;
+      }
+      onExpandChange?.(!expanded);
+      if (navigationRef.current) {
+        navigationRef.current.style.width = "";
+      }
+      if (shouldAnimate) {
+        setAnimation(expanded ? "collapse" : "expand");
+        setTimeout(() => {
+          setExpanded(toggle !== void 0 ? toggle : !expanded);
+          setAnimation(false);
+        }, ANIMATION_DURATION);
+      } else {
         setExpanded(toggle !== void 0 ? toggle : !expanded);
-        setAnimation(false);
-      }, ANIMATION_DURATION);
-    } else {
-      setExpanded(toggle !== void 0 ? toggle : !expanded);
-    }
-  }, [expanded, onExpandChange, shouldAnimate]);
-  const pinItem = useCallback((item) => {
-    const newValue = [...pinnedItems, item];
-    setPinnedItems(newValue);
-    return newValue;
-  }, [pinnedItems]);
-  const unpinItem = useCallback((item) => {
-    const newValue = pinnedItems.filter((localItem) => localItem !== item);
-    setPinnedItems(newValue);
-    return newValue;
-  }, [pinnedItems]);
-  const reorderItems = useCallback((initialIndex, endIndex) => {
-    const newPinnedItems = [...pinnedItems];
-    const [removed] = newPinnedItems.splice(initialIndex, 1);
-    newPinnedItems.splice(endIndex, 0, removed);
-    setPinnedItems(newPinnedItems);
-    return newPinnedItems;
-  }, [pinnedItems]);
-  const value = useMemo(() => ({
-    allowNavigationResize,
-    animation,
-    animationType,
-    expanded,
-    items,
-    locales,
-    navigationRef,
-    pinItem,
-    pinLimit,
-    pinnedFeature,
-    pinnedItems,
-    registerItem,
-    reorderItems,
-    setAllowNavigationResize,
-    setAnimation,
-    setPinnedItems,
-    setWidth,
-    shouldAnimate,
-    toggleExpand,
-    unpinItem,
-    width
-  }), [expanded, toggleExpand, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation, width, reorderItems, items, allowNavigationResize, shouldAnimate, animationType]);
+      }
+    },
+    [expanded, onExpandChange, shouldAnimate]
+  );
+  const pinItem = useCallback(
+    (item) => {
+      const newValue = [...pinnedItems, item];
+      setPinnedItems(newValue);
+      return newValue;
+    },
+    [pinnedItems]
+  );
+  const unpinItem = useCallback(
+    (item) => {
+      const newValue = pinnedItems.filter((localItem) => localItem !== item);
+      setPinnedItems(newValue);
+      return newValue;
+    },
+    [pinnedItems]
+  );
+  const reorderItems = useCallback(
+    (initialIndex, endIndex) => {
+      const newPinnedItems = [...pinnedItems];
+      const [removed] = newPinnedItems.splice(initialIndex, 1);
+      newPinnedItems.splice(endIndex, 0, removed);
+      setPinnedItems(newPinnedItems);
+      return newPinnedItems;
+    },
+    [pinnedItems]
+  );
+  const value = useMemo(
+    () => ({
+      allowNavigationResize,
+      animation,
+      animationType,
+      expanded,
+      items,
+      locales,
+      navigationRef,
+      pinItem,
+      pinLimit,
+      pinnedFeature,
+      pinnedItems,
+      registerItem,
+      reorderItems,
+      setAllowNavigationResize,
+      setAnimation,
+      setPinnedItems,
+      setWidth,
+      shouldAnimate,
+      toggleExpand,
+      unpinItem,
+      width
+    }),
+    [
+      expanded,
+      toggleExpand,
+      pinnedItems,
+      pinItem,
+      unpinItem,
+      pinnedFeature,
+      locales,
+      pinLimit,
+      animation,
+      width,
+      reorderItems,
+      items,
+      allowNavigationResize,
+      shouldAnimate,
+      animationType
+    ]
+  );
   return /* @__PURE__ */ jsx(NavigationContext.Provider, { value, children });
 };
 export {

package/dist/components/Navigation/components/Group.d.ts

@@ -4,5 +4,5 @@ type GroupProps = {
     label: string;
     style?: CSSProperties;
 };
-export declare const Group: ({ children, label, style }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const Group: ({ children, label, style }: GroupProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Navigation/components/Group.js

@@ -1,32 +1,33 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack, Text } from "@ultraviolet/ui";
 import { Children } from "react";
 import { useNavigation } from "../NavigationProvider.js";
 import { navigationGroupStack, navigationGroupText } from "./styles.css.js";
-const Group = ({
-  children,
-  label,
-  style
-}) => {
+const Group = ({ children, label, style }) => {
   const context = useNavigation();
   if (!context) {
-    throw new Error("Navigation.Group can only be used inside a NavigationProvider.");
+    throw new Error(
+      "Navigation.Group can only be used inside a NavigationProvider."
+    );
   }
-  const {
-    expanded,
-    animation,
-    animationType
-  } = context;
+  const { expanded, animation, animationType } = context;
   const isDiplay = !animation && expanded;
   if (Children.count(children) > 0) {
-    return /* @__PURE__ */ jsx("div", { style: {
-      width: animation ? "100%" : void 0,
-      ...style
-    }, children: /* @__PURE__ */ jsxs(Stack, { className: navigationGroupStack, direction: "column", children: [
-      isDiplay ? /* @__PURE__ */ jsx(Text, { as: "span", className: navigationGroupText({
-        animation: animationType === "complex" ? animation : false
-      }), prominence: "weak", sentiment: "neutral", variant: "bodySmallStrong", children: label }) : null,
+    return /* @__PURE__ */ jsx("div", { style: { width: animation ? "100%" : void 0, ...style }, children: /* @__PURE__ */ jsxs(Stack, { className: navigationGroupStack, direction: "column", children: [
+      isDiplay ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          className: navigationGroupText({
+            animation: animationType === "complex" ? animation : false
+          }),
+          prominence: "weak",
+          sentiment: "neutral",
+          variant: "bodySmallStrong",
+          children: label
+        }
+      ) : null,
       children
     ] }) });
   }

package/dist/components/Navigation/components/Item.d.ts

@@ -80,5 +80,5 @@ type ItemProps = {
     'data-testid'?: string;
     style?: CSSProperties;
 };
-export declare const Item: import("react").MemoExoticComponent<({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type, as, disabled, noExpand, index, id, "data-testid": dataTestId, style, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
+export declare const Item: import("react").MemoExoticComponent<({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type, as, disabled, noExpand, index, id, "data-testid": dataTestId, style, }: ItemProps) => import("react/jsx-runtime").JSX.Element | null>;
 export {};