@ultraviolet/plus 0.14.4 → 0.15.1

package/dist/components/Navigation/components/Item.js

@@ -0,0 +1,695 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Icon, CategoryIcon } from "@ultraviolet/icons";
+import { Button, Badge, MenuV2, Stack, Text, fadeIn, Tooltip, Expandable } from "@ultraviolet/ui";
+import { useEffect, useState, useCallback, useMemo, Children, isValidElement, cloneElement } from "react";
+import { useNavigation } from "../NavigationProvider.js";
+import { shrinkHeight, ANIMATION_DURATION } from "../constants.js";
+const RelativeDiv = styled.div`
+  position: relative;
+`;
+const StyledIcon = styled(Icon, {
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  padding: ${({ theme }) => theme.space["0.25"]};
+  border-radius: ${({ theme }) => theme.radii.default};
+  &:hover {
+    background: ${({ theme }) => theme.colors.neutral.backgroundWeakHover};
+
+    ${({ active, theme }) => active ? `background: ${theme.colors.primary.backgroundHover};` : null}
+    }
+  }
+`;
+const NeutralButtonLink = css`
+  color: inherit;
+  text-decoration: none;
+  background-color: inherit;
+  border: none;
+  text-align: left;
+`;
+const LocalExpandButton = styled(Button)`
+  opacity: 0;
+  right: 0;
+  position: absolute;
+  left: -24px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+
+  &:hover,
+  &:focus,
+  &:active {
+    opacity: 1;
+  }
+`;
+const PinnedButton = LocalExpandButton.withComponent("div");
+const GrabIcon = styled(Icon)`
+  opacity: 0;
+  margin: 0 ${({ theme }) => theme.space["0.25"]};
+  cursor: grab;
+`;
+const StyledBadge = styled(Badge)``;
+const StyledMenuItem = styled(MenuV2.Item, {
+  shouldForwardProp: (prop) => !["isPinnable"].includes(prop)
+})`
+  text-align: left;
+
+  &:hover,
+  &:focus,
+  &:active {
+    ${PinnedButton} {
+      opacity: 1;
+    }
+
+    ${StyledBadge} {
+      opacity: ${({ isPinnable }) => isPinnable ? 0 : 1};
+    }
+  }
+`;
+const StyledMenu = styled(MenuV2)`
+  width: 180px;
+`;
+const PaddingStack = styled(Stack)`
+  padding-left: 28px; // This value needs to be hardcoded because of the category icon size
+`;
+const AnimatedIcon = styled(Icon)``;
+const WrapText = styled(Text, {
+  shouldForwardProp: (prop) => !["animation", "subLabel", "textProminence"].includes(prop)
+})`
+  overflow-wrap: ${({ animation }) => animation ? "normal" : "anywhere"};
+  white-space: ${({ animation }) => animation ? "nowrap" : "normal"};
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  white-space: pre-wrap;
+`;
+const StyledStack = styled(Stack)`
+  padding-left: 28px; // This value needs to be hardcoded because of the category icon size
+`;
+const StyledContainer = styled(Stack)`
+  ${NeutralButtonLink};
+  border-radius: ${({ theme }) => theme.radii.default};
+
+  &[data-has-no-expand='false'] {
+    cursor: pointer;
+  }
+  margin-top: ${({ theme }) => theme.space["0.25"]};
+  padding: ${({ theme }) => `calc(${theme.space["0.25"]} + ${theme.space["0.5"]}) ${theme.space["1"]}`};
+
+  &[data-has-sub-label='true'] {
+    padding: ${({ theme }) => `${theme.space["0.5"]} ${theme.space["1"]}`};
+  }
+
+  width: 100%;
+
+  &:hover[data-has-no-expand='false']:not([disabled]):not(
+      [data-is-active='true']
+    ),
+  &:focus[data-has-no-expand='false']:not([disabled]):not(
+      [data-is-active='true']
+    ) {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundWeak};
+  }
+  &[data-has-active-children='true'][data-has-no-expand='false']:not(
+      [disabled][data-is-active='true']
+    ) {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundWeakHover};
+    ${WrapText} {
+      color: ${({ theme }) => theme.colors.neutral.textWeakHover};
+    }
+
+    ${PinnedButton} {
+      opacity: 1;
+    }
+
+    &[data-is-pinnable='true'] {
+      ${StyledBadge} {
+        opacity: 0;
+      }
+    }
+  }
+
+  &[data-has-no-expand='false']:not([disabled]) {
+    &:hover,
+    &:focus,
+    &:active {
+      ${PinnedButton}, ${GrabIcon} {
+        opacity: 1;
+      }
+
+      ${StyledBadge} {
+        opacity: 0;
+      }
+    }
+  }
+
+  &:hover[data-has-children='false'][data-is-active='false']:not([disabled]) {
+    ${WrapText} {
+      color: ${({ theme }) => theme.colors.neutral.textWeakHover};
+    }
+  }
+
+  &:active[data-has-no-expand='false']:not([disabled]):not(
+      [data-is-active='true']
+    ) {
+    background-color: ${({ theme }) => theme.colors.neutral.backgroundHover};
+  }
+
+  &[data-is-active='true'],
+  &:hover[data-has-active='true'] {
+    background-color: ${({ theme }) => theme.colors.primary.background};
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.primary.backgroundHover};
+    }
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    background-color: unset;
+
+    ${WrapText} {
+      color: ${({ theme }) => theme.colors.neutral.textWeakDisabled};
+    }
+  }
+
+  &[data-animation='collapse'] {
+    animation: ${shrinkHeight} ${ANIMATION_DURATION}ms ease-in-out;
+    ${WrapText}, ${AnimatedIcon}, ${StyledBadge} {
+      animation: ${fadeIn} ${ANIMATION_DURATION}ms ease-in-out reverse;
+    }
+  }
+
+  &[data-animation='expand'] {
+    animation: ${shrinkHeight} ${ANIMATION_DURATION}ms ease-in-out reverse;
+    ${WrapText}, ${AnimatedIcon}, ${StyledBadge} {
+      animation: ${fadeIn} ${ANIMATION_DURATION}ms ease-in-out;
+    }
+
+    ${StyledStack} {
+      display: none;
+    }
+  }
+`;
+const MenuStack = styled(Stack)`
+  padding: ${({ theme }) => `0 ${theme.space["2"]}`};
+  margin-top: ${({ theme }) => theme.space["0.25"]};
+`;
+const ContainerCategoryIcon = styled(Stack)`
+  min-width: 20px;
+`;
+const Item = ({
+  children,
+  categoryIcon,
+  categoryIconVariant,
+  label,
+  subLabel,
+  badgeText,
+  badgeSentiment,
+  href,
+  onClick,
+  onPinUnpinClick,
+  toggle,
+  active,
+  noPinButton,
+  type = "default",
+  hasParents,
+  as,
+  disabled,
+  noExpand = false,
+  index,
+  id
+}) => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error(
+      "Navigation.Item can only be used inside a NavigationProvider."
+    );
+  }
+  const {
+    expanded,
+    locales,
+    pinnedFeature,
+    pinItem,
+    unpinItem,
+    pinnedItems,
+    pinLimit,
+    animation,
+    registerItem
+  } = context;
+  useEffect(
+    () => {
+      if (type !== "pinnedGroup") {
+        registerItem({ [id]: { label, active, onClick } });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [active, id, label, registerItem]
+  );
+  const [internalToggle, setToggle] = useState(toggle !== false);
+  const triggerToggle = useCallback(
+    (value) => {
+      setToggle(value);
+      onClick?.(internalToggle);
+    },
+    [internalToggle, onClick]
+  );
+  useEffect(() => {
+    if (animation === "collapse") {
+      setToggle(false);
+    }
+    if (animation === "expand") {
+      setTimeout(() => {
+        setToggle(toggle ?? true);
+      }, 1);
+    }
+  }, [animation, toggle]);
+  const PaddedStack = noExpand || type === "pinnedGroup" ? Stack : PaddingStack;
+  const hasHrefAndNoChildren = href && !children;
+  const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
+  const isItemPinned = pinnedItems.includes(id);
+  const shouldShowPinnedButton = useMemo(() => {
+    if (href || disabled)
+      return false;
+    if (hasPinnedFeatureAndNoChildren && type !== "default") {
+      return true;
+    }
+    if (hasPinnedFeatureAndNoChildren) {
+      return true;
+    }
+    return false;
+  }, [disabled, hasPinnedFeatureAndNoChildren, href, type]);
+  const hasActiveChildren = useMemo(() => {
+    if (!children)
+      return false;
+    return Children.map(
+      children,
+      (child) => isValidElement(child) ? child.props?.active : false
+    ).includes(true);
+  }, [children]);
+  const containerTag = useMemo(() => {
+    if (as) {
+      return as;
+    }
+    if (hasHrefAndNoChildren) {
+      return "a";
+    }
+    if (noExpand) {
+      return "div";
+    }
+    return "button";
+  }, [as, hasHrefAndNoChildren, noExpand]);
+  const Container = StyledContainer.withComponent(containerTag);
+  const ariaExpanded = useMemo(() => {
+    if (hasHrefAndNoChildren && internalToggle) {
+      return true;
+    }
+    if (hasHrefAndNoChildren && !internalToggle) {
+      return false;
+    }
+    return void 0;
+  }, [hasHrefAndNoChildren, internalToggle]);
+  const isPinDisabled = pinnedItems.length >= pinLimit;
+  const pinTooltipLocale = useMemo(() => {
+    if (isPinDisabled) {
+      return locales["navigation.pin.limit"];
+    }
+    if (isItemPinned) {
+      return locales["navigation.unpin.tooltip"];
+    }
+    return locales["navigation.pin.tooltip"];
+  }, [isItemPinned, isPinDisabled, locales]);
+  const onDragStartTrigger = (event) => {
+    event.dataTransfer.setData("text/plain", JSON.stringify({ label, index }));
+    event.currentTarget.style.opacity = "0.5";
+  };
+  const onDragStopTrigger = (event) => {
+    event.currentTarget.style.opacity = "1";
+  };
+  if (expanded || !expanded && animation === "expand") {
+    const renderChildren = Children.map(
+      children,
+      (child) => isValidElement(child) ? cloneElement(child, {
+        hasParents: true
+      }) : child
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Container,
+        {
+          gap: 1,
+          direction: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          "data-has-sub-label": !!subLabel,
+          onClick: () => {
+            if (children) {
+              return triggerToggle(!internalToggle);
+            }
+            return onClick?.();
+          },
+          "aria-expanded": ariaExpanded,
+          href,
+          target: href ? "_blank" : void 0,
+          "data-is-pinnable": shouldShowPinnedButton,
+          "data-is-active": active,
+          "data-animation": animation,
+          "data-has-children": !!children,
+          "data-has-active-children": hasActiveChildren,
+          "data-has-no-expand": noExpand,
+          disabled,
+          draggable: type === "pinned" && expanded,
+          onDragStart: (event) => expanded ? onDragStartTrigger(event) : void 0,
+          onDragEnd: (event) => expanded ? onDragStopTrigger(event) : void 0,
+          id,
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "row",
+                gap: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                children: [
+                  categoryIcon ? /* @__PURE__ */ jsx(
+                    ContainerCategoryIcon,
+                    {
+                      alignItems: "center",
+                      justifyContent: "center",
+                      children: /* @__PURE__ */ jsx(
+                        CategoryIcon,
+                        {
+                          name: categoryIcon,
+                          variant: active ? "primary" : categoryIconVariant,
+                          disabled
+                        }
+                      )
+                    }
+                  ) : null,
+                  type === "pinned" && expanded ? /* @__PURE__ */ jsx(
+                    GrabIcon,
+                    {
+                      name: "drag-vertical",
+                      sentiment: "neutral",
+                      prominence: "weak",
+                      size: "small",
+                      disabled
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsxs(Stack, { children: [
+                    /* @__PURE__ */ jsx(
+                      WrapText,
+                      {
+                        as: "span",
+                        variant: "bodySmallStrong",
+                        sentiment: active ? "primary" : "neutral",
+                        prominence: (categoryIcon || !hasParents) && !active ? "strong" : "default",
+                        animation,
+                        disabled,
+                        children: label
+                      }
+                    ),
+                    subLabel ? /* @__PURE__ */ jsx(
+                      WrapText,
+                      {
+                        as: "span",
+                        variant: "caption",
+                        sentiment: "neutral",
+                        prominence: "weak",
+                        animation,
+                        disabled,
+                        subLabel: true,
+                        children: subLabel
+                      }
+                    ) : null
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", gap: href ? 1 : void 0, children: [
+              badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                badgeText ? /* @__PURE__ */ jsx(
+                  StyledBadge,
+                  {
+                    sentiment: badgeSentiment,
+                    size: "small",
+                    prominence: "strong",
+                    disabled,
+                    children: badgeText
+                  }
+                ) : null,
+                shouldShowPinnedButton ? /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    text: isItemPinned ? locales["navigation.unpin.tooltip"] : pinTooltipLocale,
+                    placement: "right",
+                    children: /* @__PURE__ */ jsx(RelativeDiv, { children: /* @__PURE__ */ jsx(
+                      PinnedButton,
+                      {
+                        role: "button",
+                        size: "xsmall",
+                        variant: "ghost",
+                        sentiment: active ? "primary" : "neutral",
+                        onClick: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          if (isItemPinned) {
+                            unpinItem(id);
+                          } else {
+                            pinItem(id);
+                          }
+                          onPinUnpinClick?.(event);
+                        },
+                        disabled: isItemPinned ? false : isPinDisabled,
+                        children: /* @__PURE__ */ jsx(
+                          StyledIcon,
+                          {
+                            size: "large",
+                            name: isItemPinned ? "unpin" : "pin",
+                            variant: isItemPinned ? "filled" : "outlined",
+                            disabled: isItemPinned ? false : isPinDisabled,
+                            sentiment: active ? "primary" : "neutral",
+                            active
+                          }
+                        )
+                      }
+                    ) })
+                  }
+                ) : null
+              ] }) : null,
+              hasHrefAndNoChildren ? /* @__PURE__ */ jsx(
+                AnimatedIcon,
+                {
+                  name: "open-in-new",
+                  sentiment: "neutral",
+                  prominence: "default",
+                  disabled
+                }
+              ) : null,
+              children ? /* @__PURE__ */ jsx(Stack, { gap: 1, direction: "row", alignItems: "center", children: !animation && !noExpand ? /* @__PURE__ */ jsx(
+                AnimatedIcon,
+                {
+                  name: internalToggle ? "arrow-down" : "arrow-right",
+                  sentiment: "neutral",
+                  prominence: "weak"
+                }
+              ) : null }) : null
+            ] })
+          ]
+        }
+      ),
+      children ? /* @__PURE__ */ jsx(Fragment, { children: !noExpand ? /* @__PURE__ */ jsx(
+        Expandable,
+        {
+          opened: internalToggle,
+          animationDuration: animation ? ANIMATION_DURATION / 2 : void 0,
+          children: /* @__PURE__ */ jsx(PaddedStack, { children: renderChildren })
+        }
+      ) : /* @__PURE__ */ jsx(PaddedStack, { children: renderChildren }) }) : null
+    ] });
+  }
+  if (categoryIcon || Children.count(children) > 0 && !hasParents) {
+    return /* @__PURE__ */ jsx(MenuStack, { gap: 1, alignItems: "start", justifyContent: "start", children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(
+      StyledMenu,
+      {
+        triggerMethod: "hover",
+        dynamicDomRendering: false,
+        disclosure: /* @__PURE__ */ jsx(
+          Button,
+          {
+            sentiment: "neutral",
+            variant: hasActiveChildren ? "filled" : "ghost",
+            size: "small",
+            icon: !categoryIcon ? "dots-horizontal" : void 0,
+            children: categoryIcon ? /* @__PURE__ */ jsx(
+              Stack,
+              {
+                direction: "row",
+                gap: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                children: /* @__PURE__ */ jsx(
+                  CategoryIcon,
+                  {
+                    name: categoryIcon,
+                    variant: active ? "primary" : categoryIconVariant
+                  }
+                )
+              }
+            ) : null
+          }
+        ),
+        placement: "right",
+        children: Children.map(
+          children,
+          (child) => isValidElement(child) ? cloneElement(child, {
+            hasParents: true
+          }) : child
+        )
+      }
+    ) : /* @__PURE__ */ jsx(Tooltip, { text: label, placement: "right", tabIndex: -1, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        sentiment: "neutral",
+        variant: active ? "filled" : "ghost",
+        size: "small",
+        onClick: () => onClick?.(),
+        children: /* @__PURE__ */ jsx(
+          Stack,
+          {
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            children: /* @__PURE__ */ jsx(
+              CategoryIcon,
+              {
+                name: categoryIcon ?? "console",
+                variant: active ? "primary" : categoryIconVariant
+              }
+            )
+          }
+        )
+      }
+    ) }) });
+  }
+  if (hasParents) {
+    return /* @__PURE__ */ jsx(
+      StyledMenuItem,
+      {
+        href,
+        onClick: () => {
+          onClick?.();
+        },
+        borderless: true,
+        active,
+        disabled,
+        sentiment: active ? "primary" : "neutral",
+        isPinnable: shouldShowPinnedButton,
+        children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            gap: 1,
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flex: 1,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsx(WrapText, { as: "span", variant: "bodySmall", children: label }),
+              /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
+                badgeText ? /* @__PURE__ */ jsx(
+                  StyledBadge,
+                  {
+                    sentiment: badgeSentiment,
+                    size: "small",
+                    prominence: "strong",
+                    disabled,
+                    children: badgeText
+                  }
+                ) : null,
+                hasHrefAndNoChildren ? /* @__PURE__ */ jsx(
+                  AnimatedIcon,
+                  {
+                    name: "open-in-new",
+                    sentiment: "neutral",
+                    prominence: "weak",
+                    disabled
+                  }
+                ) : null,
+                shouldShowPinnedButton ? /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    text: isItemPinned ? locales["navigation.unpin.tooltip"] : pinTooltipLocale,
+                    placement: "right",
+                    children: /* @__PURE__ */ jsx(RelativeDiv, { children: /* @__PURE__ */ jsx(
+                      PinnedButton,
+                      {
+                        role: "button",
+                        size: "xsmall",
+                        variant: "ghost",
+                        sentiment: active ? "primary" : "neutral",
+                        onClick: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          if (isItemPinned) {
+                            unpinItem(id);
+                          } else {
+                            pinItem(id);
+                          }
+                          onPinUnpinClick?.(event);
+                        },
+                        disabled: isItemPinned ? false : isPinDisabled,
+                        children: /* @__PURE__ */ jsx(
+                          StyledIcon,
+                          {
+                            size: "large",
+                            name: isItemPinned ? "unpin" : "pin",
+                            variant: isItemPinned ? "filled" : "outlined",
+                            disabled: isItemPinned ? false : isPinDisabled,
+                            sentiment: active ? "primary" : "neutral",
+                            active
+                          }
+                        )
+                      }
+                    ) })
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+  if (!hasParents && href) {
+    return /* @__PURE__ */ jsx(Tooltip, { text: label, placement: "right", children: /* @__PURE__ */ jsx(MenuStack, { gap: 1, alignItems: "start", justifyContent: "start", children: /* @__PURE__ */ jsx(
+      Container,
+      {
+        gap: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        href,
+        target: "_blank",
+        children: /* @__PURE__ */ jsx(
+          AnimatedIcon,
+          {
+            name: "open-in-new",
+            sentiment: "neutral",
+            prominence: "weak"
+          }
+        )
+      }
+    ) }) });
+  }
+  return null;
+};
+export {
+  Item
+};

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

@@ -0,0 +1,8 @@
+type PinnedItemsProps = {
+    /**
+     * This prop is used to control if the item is expanded or collapsed
+     */
+    toggle?: boolean;
+};
+export declare const PinnedItems: ({ toggle }: PinnedItemsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export {};