@ultraviolet/plus 0.14.4 → 0.15.1

package/dist/components/Navigation/NavigationProvider.js

@@ -0,0 +1,142 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useContext, useState, useReducer, useRef, useCallback, useMemo } from "react";
+import { NAVIGATION_WIDTH, ANIMATION_DURATION } from "./constants.js";
+import NavigationLocales from "./locales/en.js";
+const NavigationContext = createContext({
+  expanded: true,
+  /**
+   * This function will trigger the expand/collapse of the navigation and
+   * will also trigger the animation
+   */
+  toggleExpand: () => {
+  },
+  animation: false,
+  locales: NavigationLocales,
+  pinItem: () => {
+  },
+  unpinItem: () => {
+  },
+  pinnedItems: [],
+  pinLimit: 7,
+  navigationRef: { current: null },
+  width: NAVIGATION_WIDTH,
+  setWidth: () => {
+  },
+  reorderItems: () => {
+  },
+  items: {},
+  registerItem: () => {
+  }
+});
+const useNavigation = () => useContext(NavigationContext);
+const NavigationProvider = ({
+  children,
+  pinnedFeature = false,
+  initialPinned,
+  initialExpanded = true,
+  locales = NavigationLocales,
+  pinLimit = 7,
+  onClickExpand,
+  initialWidth = NAVIGATION_WIDTH,
+  onClickPinUnpin
+}) => {
+  const [expanded, setExpanded] = useState(initialExpanded);
+  const [pinnedItems, setPinnedItems] = useState(initialPinned ?? []);
+  const [animation, setAnimation] = useState(
+    false
+  );
+  const [width, setWidth] = useState(initialWidth);
+  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;
+      }
+      onClickExpand?.(!expanded);
+      if (navigationRef.current) {
+        navigationRef.current.style.width = "";
+      }
+      setAnimation(expanded ? "collapse" : "expand");
+      setTimeout(() => {
+        setExpanded(toggle !== void 0 ? toggle : !expanded);
+        setAnimation(false);
+      }, ANIMATION_DURATION);
+    },
+    [expanded, onClickExpand, setAnimation, setExpanded]
+  );
+  const pinItem = useCallback(
+    (item) => {
+      setPinnedItems([...pinnedItems, item]);
+      onClickPinUnpin?.("pin", item);
+    },
+    [onClickPinUnpin, pinnedItems]
+  );
+  const unpinItem = useCallback(
+    (item) => {
+      setPinnedItems(pinnedItems.filter((localItem) => localItem !== item));
+      onClickPinUnpin?.("unpin", item);
+    },
+    [onClickPinUnpin, pinnedItems]
+  );
+  const reorderItems = useCallback(
+    (initialIndex, endIndex) => {
+      const newPinnedItems = [...pinnedItems];
+      const [removed] = newPinnedItems.splice(initialIndex, 1);
+      newPinnedItems.splice(endIndex, 0, removed);
+      setPinnedItems(newPinnedItems);
+    },
+    [pinnedItems]
+  );
+  const value = useMemo(
+    () => ({
+      expanded,
+      toggleExpand,
+      pinnedItems,
+      pinItem,
+      unpinItem,
+      pinnedFeature,
+      locales,
+      pinLimit,
+      animation,
+      setAnimation,
+      navigationRef,
+      width,
+      setWidth,
+      reorderItems,
+      registerItem,
+      items
+    }),
+    [
+      expanded,
+      toggleExpand,
+      pinnedItems,
+      pinItem,
+      unpinItem,
+      pinnedFeature,
+      locales,
+      pinLimit,
+      animation,
+      width,
+      reorderItems,
+      items
+    ]
+  );
+  return /* @__PURE__ */ jsx(NavigationContext.Provider, { value, children });
+};
+export {
+  NavigationContext,
+  NavigationProvider,
+  useNavigation
+};

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+type GroupProps = {
+    children: ReactNode;
+    label: string;
+};
+export declare const Group: ({ children, label }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+import { Text, Stack } from "@ultraviolet/ui";
+import { Children } from "react";
+import { useNavigation } from "../NavigationProvider.js";
+import { ANIMATION_DURATION, groupAnimation } from "../constants.js";
+const StyledText = styled(Text)`
+  padding-bottom: ${({ theme }) => theme.space["1"]};
+  padding-left: ${({ theme }) => theme.space["1"]};
+
+  transition:
+    opacity ${ANIMATION_DURATION}ms ease-in-out,
+    height ${ANIMATION_DURATION}ms ease-in-out;
+  height: ${({ theme }) => `calc(${theme.typography.bodySmallStrong.lineHeight} + ${theme.space["1"]})`}; // This is only for animation
+`;
+const StyledStack = styled(Stack)`
+  padding-top: ${({ theme }) => theme.space["1"]};
+`;
+const Container = styled.div`
+  &[data-animation='expand'] {
+    ${StyledText} {
+      animation: ${groupAnimation} ${ANIMATION_DURATION}ms ease-in-out;
+    }
+  }
+
+  &[data-animation='collapse'] {
+    ${StyledText} {
+      animation: ${groupAnimation} ${ANIMATION_DURATION}ms ease-in-out reverse;
+    }
+  }
+`;
+const Group = ({ children, label }) => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error(
+      "Navigation.Group can only be used inside a NavigationProvider."
+    );
+  }
+  const { expanded, animation } = context;
+  if (Children.count(children) > 0) {
+    return /* @__PURE__ */ jsx(Container, { "data-animation": animation, children: /* @__PURE__ */ jsxs(StyledStack, { direction: "column", children: [
+      expanded || animation === "expand" ? /* @__PURE__ */ jsx(
+        StyledText,
+        {
+          as: "span",
+          variant: "bodySmallStrong",
+          sentiment: "neutral",
+          prominence: "weak",
+          children: label
+        }
+      ) : null,
+      children
+    ] }) });
+  }
+  return null;
+};
+export {
+  Group
+};

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

@@ -0,0 +1,81 @@
+import { CategoryIcon } from '@ultraviolet/icons';
+import { Badge } from '@ultraviolet/ui';
+import type { ComponentProps, JSX, MouseEvent, ReactNode } from 'react';
+type ItemType = 'default' | 'pinned' | 'pinnedGroup';
+type ItemProps = {
+    children?: ReactNode;
+    /**
+     * Sets a category icon on the left of the item
+     */
+    categoryIcon?: ComponentProps<typeof CategoryIcon>['name'];
+    categoryIconVariant?: ComponentProps<typeof CategoryIcon>['variant'];
+    /**
+     * The label of the item that will be shown.
+     * It is also used as the key for pinning.
+     */
+    label: string;
+    /**
+     * It should be a unique id and will be used for pin/unpin feature.
+     */
+    id: string;
+    /**
+     * Text shown under the label with a lighter color and smaller font size
+     */
+    subLabel?: string;
+    /**
+     * Badge is added on the right of the item. It is hidden on hover if pinned
+     * feature is enabled
+     */
+    badgeText?: string;
+    /**
+     * Defined the sentiment of the badge according to Badge component from
+     * `@ultraviolet/ui`
+     */
+    badgeSentiment?: ComponentProps<typeof Badge>['sentiment'];
+    href?: string;
+    /**
+     * This function will be triggered on click of the item. If the item is expandable
+     * toggle will be passed with it.
+     */
+    onClick?: (toggle?: true | false) => void;
+    onPinUnpinClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * This prop is used to control if the item is expanded or collapsed
+     */
+    toggle?: boolean;
+    /**
+     * Set this to true if your current page is this item.
+     */
+    active?: boolean;
+    /**
+     * If you want to remove pin button on your item use this prop
+     */
+    noPinButton?: boolean;
+    /**
+     * You don't need to use this prop it's used internally to control the type of the item
+     */
+    type?: ItemType;
+    /**
+     * You don't need to use this prop it's used internally to control if the item has a parent
+     */
+    hasParents?: boolean;
+    /**
+     * You don't need to use this prop it's used internally for pinned item to be reorganized with drag and drop
+     */
+    index?: number;
+    /**
+     * When the item has href it becomes a link if not it is a button.
+     * When using an external routing tool you might need to remove both of them and use
+     * a non focusable element. This option allows you to choose the tag of the
+     * item.
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Use this prop if you want to remove the expand behavior when the item
+     * has sub items.
+     */
+    noExpand?: boolean;
+    disabled?: boolean;
+};
+export declare const Item: ({ children, categoryIcon, categoryIconVariant, label, subLabel, badgeText, badgeSentiment, href, onClick, onPinUnpinClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, index, id, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};