@ultraviolet/plus 0.10.6 → 0.11.1

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

@@ -0,0 +1,445 @@
+import _styled from '@emotion/styled/base';
+import '@emotion/react';
+import { MenuV2, Stack, Tooltip, Expandable, Button, Badge, Text, fadeIn } from '@ultraviolet/ui';
+import { useState, useCallback, useEffect, useMemo, Children, isValidElement, cloneElement } from 'react';
+import { useNavigation } from '../NavigationProvider.js';
+import { ANIMATION_DURATION, PIN_BUTTON_OPACITY_TRANSITION, shrinkHeight } from '../constants.js';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { CategoryIcon } from '../../../../@ultraviolet/icons/dist/components/CategoryIcon/index.js';
+import { Icon } from '../../../../@ultraviolet/icons/dist/components/Icon/index.js';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const NeutralButtonLink = process.env.NODE_ENV === "production" ? {
+  name: "rhgg7c",
+  styles: "color:inherit;text-decoration:none;background-color:inherit;border:none;text-align:left"
+} : {
+  name: "rhgg7c",
+  styles: "color:inherit;text-decoration:none;background-color:inherit;border:none;text-align:left",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+const ExpandedPinnedButton = /*#__PURE__*/_styled(Button, {
+  target: "e134hokc11"
+})("opacity:0;right:0;position:absolute;left:-24px;top:0;bottom:0;margin:auto;&:hover,&:focus{opacity:1;}transition:", PIN_BUTTON_OPACITY_TRANSITION, ";transition-delay:0.3s;");
+const CollapsedPinnedButton = /*#__PURE__*/_styled(Button, {
+  target: "e134hokc10"
+})("opacity:0;&:hover,&:focus{opacity:1;}transition:", PIN_BUTTON_OPACITY_TRANSITION, ";transition-delay:0.3s;");
+const StyledMenuItem = /*#__PURE__*/_styled(MenuV2.Item, {
+  target: "e134hokc9"
+})("text-align:left;&:hover{", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}}");
+const StyledMenu = /*#__PURE__*/_styled(MenuV2, {
+  target: "e134hokc8"
+})(process.env.NODE_ENV === "production" ? {
+  name: "educr3",
+  styles: "width:180px"
+} : {
+  name: "educr3",
+  styles: "width:180px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledBadge = /*#__PURE__*/_styled(Badge, {
+  target: "e134hokc7"
+})("transition:", PIN_BUTTON_OPACITY_TRANSITION, ";transition-delay:0.3s;");
+const PaddingStack = /*#__PURE__*/_styled(Stack, {
+  target: "e134hokc6"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13feash",
+  styles: "padding-left:28px"
+} : {
+  name: "13feash",
+  styles: "padding-left:28px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const AnimatedIcon = /*#__PURE__*/_styled(Icon, {
+  target: "e134hokc5"
+})();
+const WrapText = /*#__PURE__*/_styled(Text, {
+  shouldForwardProp: prop => !['animation', 'subLabel'].includes(prop),
+  target: "e134hokc4"
+})("overflow-wrap:", ({
+  animation
+}) => animation ? 'normal' : 'anywhere', ";white-space:", ({
+  animation
+}) => animation ? 'nowrap' : 'normal', ";");
+const StyledStack = /*#__PURE__*/_styled(Stack, {
+  target: "e134hokc3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "13feash",
+  styles: "padding-left:28px"
+} : {
+  name: "13feash",
+  styles: "padding-left:28px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledContainer = /*#__PURE__*/_styled(Stack, {
+  target: "e134hokc2"
+})(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(\n      [data-is-active='true']\n    ),&:focus[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ),&[data-has-active-children='true'][data-has-no-expand='false']:not(\n      [disabled][data-is-active='true']\n    ){background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundHover, ";", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}", WrapText, "{color:", ({
+  theme
+}) => theme.colors.neutral.textWeakHover, ";}}&:active[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ){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 = /*#__PURE__*/_styled(Stack, {
+  target: "e134hokc1"
+})("padding:", ({
+  theme
+}) => `0 ${theme.space['2']}`, ";margin-top:", ({
+  theme
+}) => theme.space['0.25'], ";");
+const ContainerCategoryIcon = /*#__PURE__*/_styled(Stack, {
+  target: "e134hokc0"
+})(process.env.NODE_ENV === "production" ? {
+  name: "d47oax",
+  styles: "min-width:20px"
+} : {
+  name: "d47oax",
+  styles: "min-width:20px",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Item = ({
+  children,
+  categoryIcon,
+  label,
+  subLabel,
+  badgeText,
+  badgeSentiment,
+  href,
+  onClick,
+  toggle,
+  active,
+  noPinButton,
+  type = 'default',
+  hasParents,
+  as,
+  disabled,
+  noExpand = false,
+  toggleMenu
+}) => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error('Navigation.Item can only be used inside a Navigation');
+  }
+  const {
+    expanded,
+    locales,
+    pinnedFeature,
+    pinItem,
+    unpinItem,
+    pinnedItems,
+    pinLimit,
+    animation
+  } = context;
+  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 ? Stack : PaddingStack;
+  const hasHrefAndNoChildren = href && !children;
+  const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
+  const isItemPinned = pinnedItems.includes(label);
+  const shouldShowPinnedButton = useMemo(() => {
+    if (href || disabled) return false;
+    if (pinnedItems.length >= pinLimit && type === 'default') return false;
+    if (hasPinnedFeatureAndNoChildren && type !== 'default') {
+      return true;
+    }
+    if (hasPinnedFeatureAndNoChildren && !isItemPinned) {
+      return true;
+    }
+    return false;
+  }, [disabled, hasPinnedFeatureAndNoChildren, href, isItemPinned, pinLimit, pinnedItems.length, type]);
+  const hasActiveChildren = useMemo(() => {
+    if (!children) return false;
+    return Children.map(children, child => /*#__PURE__*/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, {
+    target: "e134hokc12"
+  });
+  const ariaExpanded = useMemo(() => {
+    if (hasHrefAndNoChildren && internalToggle) {
+      return true;
+    }
+    if (hasHrefAndNoChildren && !internalToggle) {
+      return false;
+    }
+    return undefined;
+  }, [hasHrefAndNoChildren, internalToggle]);
+
+  // This content is when the navigation is expanded
+  if (expanded || !expanded && animation === 'expand') {
+    const renderChildren = Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+      hasParents: true
+    }) : child);
+    return jsxs(Fragment, {
+      children: [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: href,
+        target: href ? '_blank' : undefined,
+        "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: disabled,
+        children: [jsxs(Stack, {
+          direction: "row",
+          gap: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          children: [categoryIcon ? jsx(ContainerCategoryIcon, {
+            alignItems: "center",
+            justifyContent: "center",
+            children: jsx(CategoryIcon, {
+              name: categoryIcon
+            })
+          }) : null, jsxs(Stack, {
+            children: [jsx(WrapText, {
+              as: "span",
+              variant: "bodySmallStrong",
+              sentiment: active ? 'primary' : 'neutral',
+              prominence: categoryIcon || !hasParents ? undefined : 'weak',
+              animation: animation,
+              disabled: disabled,
+              children: label
+            }), subLabel ? jsx(WrapText, {
+              as: "span",
+              variant: "caption",
+              sentiment: "neutral",
+              prominence: "weak",
+              animation: animation,
+              disabled: disabled,
+              subLabel: true,
+              children: subLabel
+            }) : null]
+          })]
+        }), jsxs(Stack, {
+          direction: "row",
+          alignItems: "center",
+          gap: href ? 1 : undefined,
+          children: [badgeText || hasPinnedFeatureAndNoChildren ? jsxs(Fragment, {
+            children: [badgeText ? jsx(StyledBadge, {
+              sentiment: badgeSentiment,
+              size: "small",
+              prominence: "strong",
+              disabled: disabled,
+              children: badgeText
+            }) : null, shouldShowPinnedButton ? jsx(Tooltip, {
+              text: isItemPinned ? locales['navigation.unpin.tooltip'] : locales['navigation.pin.tooltip'],
+              placement: "right",
+              children: jsx("div", {
+                style: {
+                  position: 'relative'
+                },
+                children: jsx(ExpandedPinnedButton, {
+                  size: "xsmall",
+                  variant: "ghost",
+                  sentiment: active ? 'primary' : 'neutral',
+                  onClick: () => isItemPinned ? unpinItem(label) : pinItem(label),
+                  icon: "pin"
+                })
+              })
+            }) : null]
+          }) : null, hasHrefAndNoChildren ? jsx(AnimatedIcon, {
+            name: "open-in-new",
+            sentiment: "neutral",
+            prominence: "weak",
+            disabled: disabled
+          }) : null, children ? jsxs(Stack, {
+            gap: 1,
+            direction: "row",
+            alignItems: "center",
+            children: [type === 'pinnedGroup' && pinLimit !== Infinity ? jsxs(WrapText, {
+              as: "span",
+              variant: "caption",
+              sentiment: "neutral",
+              prominence: "weak",
+              children: [pinnedItems.length, "/", pinLimit]
+            }) : null, !animation && !noExpand ? jsx(AnimatedIcon, {
+              name: internalToggle ? 'arrow-down' : 'arrow-right',
+              sentiment: "neutral",
+              prominence: "weak"
+            }) : null]
+          }) : null]
+        })]
+      }), children ? jsx(Fragment, {
+        children: !noExpand ? jsx(Expandable, {
+          opened: internalToggle,
+          animationDuration: animation ? ANIMATION_DURATION / 2 : undefined,
+          children: jsx(PaddedStack, {
+            children: renderChildren
+          })
+        }) : jsx(PaddedStack, {
+          children: renderChildren
+        })
+      }) : null]
+    });
+  }
+
+  // This content is the menu of the navigation when collapsed
+  if (categoryIcon || Children.count(children) > 0 && !hasParents) {
+    return jsx(MenuStack, {
+      gap: 1,
+      alignItems: "start",
+      justifyContent: "start",
+      children: Children.count(children) > 0 ? jsx(StyledMenu, {
+        disclosure: jsx(Button, {
+          sentiment: "neutral",
+          variant: hasActiveChildren ? 'filled' : 'ghost',
+          size: "small",
+          icon: !categoryIcon ? 'dots-horizontal' : undefined,
+          children: categoryIcon ? jsx(Stack, {
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            children: jsx(CategoryIcon, {
+              name: categoryIcon
+            })
+          }) : null
+        }),
+        placement: "right",
+        children: ({
+          toggle: toggleMenuLocal
+        }) => Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+          hasParents: true,
+          toggleMenu: toggleMenuLocal
+        }) : child)
+      }) : jsx(Tooltip, {
+        text: label,
+        placement: "right",
+        tabIndex: -1,
+        children: jsx(Button, {
+          sentiment: "neutral",
+          variant: active ? 'filled' : 'ghost',
+          size: "small",
+          onClick: () => onClick?.(),
+          children: jsx(Stack, {
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            justifyContent: "center",
+            children: jsx(CategoryIcon, {
+              name: categoryIcon ?? 'console'
+            })
+          })
+        })
+      })
+    });
+  }
+
+  // This content is what is inside a menu item the navigation is collapsed
+  if (hasParents) {
+    return jsx(StyledMenuItem, {
+      href: href,
+      onClick: () => {
+        onClick?.();
+        toggleMenu?.();
+      },
+      borderless: true,
+      children: jsxs(Stack, {
+        gap: 1,
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [jsx(WrapText, {
+          as: "span",
+          variant: "bodySmall",
+          children: label
+        }), shouldShowPinnedButton ? jsx(Tooltip, {
+          text: isItemPinned ? locales['navigation.unpin.tooltip'] : locales['navigation.pin.tooltip'],
+          placement: "right",
+          children: jsx(CollapsedPinnedButton, {
+            size: "xsmall",
+            variant: "ghost",
+            sentiment: active ? 'primary' : 'neutral',
+            onClick: () => {
+              if (isItemPinned) {
+                unpinItem(label);
+              } else {
+                pinItem(label);
+              }
+            },
+            icon: "auto-fix"
+          })
+        }) : null]
+      })
+    });
+  }
+
+  // This content is for when navigation is collapsed and we show an icon of link
+  if (!hasParents && href) {
+    return jsx(Tooltip, {
+      text: label,
+      placement: "right",
+      children: jsx(MenuStack, {
+        gap: 1,
+        alignItems: "start",
+        justifyContent: "start",
+        children: jsx(Container, {
+          gap: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          href: href,
+          target: "_blank",
+          children: jsx(AnimatedIcon, {
+            name: "open-in-new",
+            sentiment: "neutral",
+            prominence: "weak"
+          })
+        })
+      })
+    });
+  }
+  return null;
+};
+
+export { Item };

package/dist/src/components/Navigation/components/PinnedItems.js

@@ -0,0 +1,30 @@
+import { useNavigation } from '../NavigationProvider.js';
+import { Item } from './Item.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const PinnedItems = () => {
+  const context = useNavigation();
+  if (!context) {
+    throw new Error('Navigation.PinnedItems can only be used inside a Navigation');
+  }
+  const {
+    locales,
+    pinnedItems,
+    pinnedFeature
+  } = context;
+  if (pinnedItems.length > 0 && pinnedFeature) {
+    return jsx(Item, {
+      label: locales['navigation.pinned.item.group.label'],
+      categoryIcon: "pin",
+      toggle: false,
+      type: "pinnedGroup",
+      children: pinnedItems.map(item => jsx(Item, {
+        label: item,
+        type: "pinned"
+      }, item))
+    });
+  }
+  return null;
+};
+
+export { PinnedItems };

package/dist/src/components/Navigation/components/Separator.js

@@ -0,0 +1,12 @@
+import _styled from '@emotion/styled/base';
+import { Separator as Separator$1 } from '@ultraviolet/ui';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledSeparator = /*#__PURE__*/_styled(Separator$1, {
+  target: "e1tbaa9b0"
+})("margin:", ({
+  theme
+}) => `${theme.space['2']} -${theme.space['2']}`, ";");
+const Separator = () => jsx(StyledSeparator, {});
+
+export { Separator };

package/dist/src/components/Navigation/constants.js

@@ -0,0 +1,37 @@
+import { keyframes } from '@emotion/react';
+
+const NAVIGATION_MIN_WIDTH = 220; // in px
+const NAVIGATION_WIDTH = 280; // in px
+const NAVIGATION_COLLASPED_WIDTH = 67; // in px
+const NAVIGATION_MAX_WIDTH = 320; // in px
+
+/**
+ * ANIMATIONS
+ */
+const PIN_BUTTON_OPACITY_TRANSITION = 'opacity 250ms ease-in-out'; // this is the transition animation when hovering pin button
+const ANIMATION_DURATION = 700; // collapse and expand animation duration of the whole nav in ms
+
+const shrinkHeight = keyframes`
+    0% {
+      max-height: 50px; // this is on purpose higher than the actual height of the item
+    }
+
+    100% {
+      max-height: 32px;
+    }
+`;
+const groupAnimation = keyframes`
+  0% {
+    opacity: 0;
+    max-height: 0;
+    margin-bottom: -8px;
+  }
+
+  100% {
+    opacity: 1;
+    max-height: 40px;
+    margin-bottom: 0;
+  }
+`;
+
+export { ANIMATION_DURATION, NAVIGATION_COLLASPED_WIDTH, NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_WIDTH, PIN_BUTTON_OPACITY_TRANSITION, groupAnimation, shrinkHeight };

package/dist/src/components/Navigation/locales/en.js

@@ -0,0 +1,9 @@
+var NavigationLocales = {
+  'navigation.pin.tooltip': 'Pin product',
+  'navigation.unpin.tooltip': 'Unpin product',
+  'navigation.pinned.item.group.label': 'Pinned items',
+  'navigation.expand.button': 'Expand sidebar',
+  'navigation.collapse.button': 'Collapse sidebar'
+};
+
+export { NavigationLocales as default };

package/dist/src/index.js

@@ -5,5 +5,6 @@ export { EstimateCost } from './components/EstimateCost/EstimateCost.js';
 export { default as estimateCostDefaultLocales } from './components/EstimateCost/locales/en.js';
 export { CustomerSatisfaction } from './components/CustomerSatisfaction/index.js';
 export { Conversation } from './components/Conversation/index.js';
+export { Navigation } from './components/Navigation/Navigation.js';
 export { FAQ } from './components/FAQ/index.js';
 export { SteppedListContainer } from './components/SteppedListCard/SteppedListContainer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.10.6",
+  "version": "0.11.1",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -34,30 +34,29 @@
   },
   "peerDependencies": {
     "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
+    "@emotion/styled": "11.11.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.1",
+    "@babel/core": "7.24.3",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.61",
-    "@types/react-dom": "18.2.19",
+    "@emotion/styled": "11.11.5",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@ultraviolet/icons": "2.11.0",
-    "@ultraviolet/illustrations": "1.6.4"
+    "@ultraviolet/icons": "2.11.2",
+    "@ultraviolet/illustrations": "1.7.0"
   },
   "dependencies": {
-    "@uiw/codemirror-extensions-langs": "4.21.24",
-    "@uiw/codemirror-theme-material": "4.21.24",
-    "@uiw/react-codemirror": "4.21.24",
-    "react-flatten-children": "1.1.2",
+    "@uiw/codemirror-extensions-langs": "4.21.25",
+    "@uiw/codemirror-theme-material": "4.21.25",
+    "@uiw/react-codemirror": "4.21.25",
     "react-intersection-observer": "9.8.1",
     "@ultraviolet/themes": "1.9.0",
-    "@ultraviolet/ui": "1.44.0"
+    "@ultraviolet/ui": "1.45.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",