@ultraviolet/plus 0.14.4 → 0.15.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, MouseEventHandler, ComponentProps, RefObject } from 'react';
+import { ReactNode, MouseEventHandler, ComponentProps, RefObject, Dispatch } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
@@ -455,11 +455,12 @@ declare const Navigation: {
          * some part of your logo
          */
     }) => _emotion_react_jsx_runtime.JSX.Element | null;
-    Item: ({ children, categoryIcon, categoryIconVariant, label, subLabel, badgeText, badgeSentiment, href, onClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, toggleMenu, }: {
+    Item: ({ children, categoryIcon, categoryIconVariant, label, subLabel, badgeText, badgeSentiment, href, onClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, index, id, }: {
         children?: ReactNode;
         categoryIcon?: "security" | "console" | "database" | "pin" | "billing" | "storage" | "baremetal" | "webHosting" | "vpc" | "useCase" | "toolsServices" | "serverless" | "observability" | "network" | "managedServices" | "iot" | "documentation" | "dedicatedServer" | "datacenter" | "containers" | "compute" | "ai" | "labs" | "devTools" | "applicationIntegration" | undefined;
         categoryIconVariant?: "neutral" | "primary" | undefined;
         label: string;
+        id: string;
         subLabel?: string | undefined;
         badgeText?: string | undefined;
         badgeSentiment?: ("neutral" | "danger" | "info" | "primary" | "secondary" | "success" | "warning") | undefined;
@@ -469,24 +470,34 @@ declare const Navigation: {
         active?: boolean | undefined;
         noPinButton?: boolean | undefined;
         type?: ("default" | "pinned" | "pinnedGroup") | undefined;
-        toggleMenu?: (() => void) | undefined;
         hasParents?: boolean | undefined;
+        index?: number | undefined;
         as?: keyof react.JSX.IntrinsicElements | undefined;
         noExpand?: boolean | undefined;
         disabled?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element | null;
-    PinnedItems: () => _emotion_react_jsx_runtime.JSX.Element | null;
+    PinnedItems: ({ toggle }: {
+        toggle?: boolean | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element | null;
     Separator: () => _emotion_react_jsx_runtime.JSX.Element;
 };
 
 declare const _default: {
     readonly 'navigation.pin.tooltip': "Pin product";
     readonly 'navigation.unpin.tooltip': "Unpin product";
+    readonly 'navigation.pin.limit': "You cannot pin more products";
     readonly 'navigation.pinned.item.group.label': "Pinned items";
     readonly 'navigation.expand.button': "Expand sidebar";
     readonly 'navigation.collapse.button': "Collapse sidebar";
+    readonly 'navigation.pinned.item.group.empty': "You have no pinned items.";
 };
 
+type Item = {
+    label: string;
+    active?: boolean;
+    onClick?: (toggle?: true | false) => void;
+};
+type Items = Record<string, Item>;
 type ContextProps = {
     expanded: boolean;
     toggleExpand: (toggle?: boolean) => void;
@@ -501,6 +512,21 @@ type ContextProps = {
     locales: typeof _default;
     width: number;
     setWidth: (width: number) => void;
+    /**
+     * This function will reorder the pinned items based on the initial index and
+     * the end index.
+     */
+    reorderItems: (
+    /**
+     * The initial index of the item
+     */
+    initialIndex: number, 
+    /**
+     * The end index of the item
+     */
+    endIndex: number) => void;
+    items: Items;
+    registerItem: Dispatch<Items>;
 };
 declare const useNavigation: () => ContextProps;
 type NavigationProviderProps = {
@@ -526,11 +552,6 @@ type NavigationProviderProps = {
      * navigation will be expanded by default otherwise it will be collapsed
      */
     initialExpanded?: boolean;
-    /**
-     * This function is triggered when the user click on the pin/unpin button
-     * of an item
-     */
-    onClickPinUnpin?: (pinned: string[]) => void;
     locales?: typeof _default;
     /**
      * This function is triggered when user click on expand button on the footer
@@ -538,8 +559,22 @@ type NavigationProviderProps = {
      * and it automatically collapse / expand.
      */
     onClickExpand?: (expanded: boolean) => void;
+    /**
+     * This function is triggered when the user click on the pin/unpin button
+     * of an item. To access all pinned item you can use the `useNavigation` hook
+     * and access the `pinnedItems` property.
+     */
+    onClickPinUnpin?: (
+    /**
+     * The state of the item after the click
+     */
+    state: 'pin' | 'unpin', 
+    /**
+     * The current items that has been pinned on click
+     */
+    pinned: string) => void;
 };
-declare const NavigationProvider: ({ children, pinnedFeature, onClickPinUnpin, initialPinned, initialExpanded, locales, pinLimit, onClickExpand, initialWidth, }: NavigationProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const NavigationProvider: ({ children, pinnedFeature, initialPinned, initialExpanded, locales, pinLimit, onClickExpand, initialWidth, onClickPinUnpin, }: NavigationProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type FAQProps = {
     description: string;

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

@@ -1,4 +1,4 @@
-import { useContext, useState, useRef, useCallback, useMemo, createContext } from 'react';
+import { useContext, useState, useReducer, useRef, useCallback, useMemo, createContext } from 'react';
 import { ANIMATION_DURATION, NAVIGATION_WIDTH } from './constants.js';
 import NavigationLocales from './locales/en.js';
 import { jsx } from '@emotion/react/jsx-runtime';
@@ -20,24 +20,34 @@ const NavigationContext = /*#__PURE__*/createContext({
     current: null
   },
   width: NAVIGATION_WIDTH,
-  setWidth: () => {}
+  setWidth: () => {},
+  reorderItems: () => {},
+  items: {},
+  registerItem: () => {}
 });
 const useNavigation = () => useContext(NavigationContext);
 const NavigationProvider = ({
   children,
   pinnedFeature = false,
-  onClickPinUnpin,
   initialPinned,
   initialExpanded = true,
   locales = NavigationLocales,
   pinLimit = 7,
   onClickExpand,
-  initialWidth = NAVIGATION_WIDTH
+  initialWidth = NAVIGATION_WIDTH,
+  onClickPinUnpin
 }) => {
   const [expanded, setExpanded] = useState(initialExpanded);
   const [pinnedItems, setPinnedItems] = useState(initialPinned ?? []);
   const [animation, setAnimation] = useState(false);
   const [width, setWidth] = useState(initialWidth);
+
+  // This is used to store the items that are registered in the navigation
+  // This way we can retrieve items with their active state in pinned feature
+  const [items, registerItem] = useReducer((oldState, newState) => ({
+    ...oldState,
+    ...newState
+  }), {});
   const navigationRef = useRef(null);
 
   // This function will be triggered when expand/collapse button is clicked
@@ -60,12 +70,18 @@ const NavigationProvider = ({
   }, [expanded, onClickExpand, setAnimation, setExpanded]);
   const pinItem = useCallback(item => {
     setPinnedItems([...pinnedItems, item]);
-    onClickPinUnpin?.(pinnedItems);
+    onClickPinUnpin?.('pin', item);
   }, [onClickPinUnpin, pinnedItems]);
   const unpinItem = useCallback(item => {
     setPinnedItems(pinnedItems.filter(localItem => localItem !== item));
-    onClickPinUnpin?.(pinnedItems);
+    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,
@@ -79,8 +95,11 @@ const NavigationProvider = ({
     setAnimation,
     navigationRef,
     width,
-    setWidth
-  }), [expanded, toggleExpand, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation, width]);
+    setWidth,
+    reorderItems,
+    registerItem,
+    items
+  }), [expanded, toggleExpand, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation, width, reorderItems, items]);
   return jsx(NavigationContext.Provider, {
     value: value,
     children: children

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

@@ -9,6 +9,8 @@ const StyledText = /*#__PURE__*/_styled(Text, {
   target: "eh4zgrv2"
 })("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']})`, ";");

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

@@ -1,9 +1,9 @@
 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 { Button, MenuV2, Stack, Tooltip, Expandable, Badge, Text, fadeIn } from '@ultraviolet/ui';
+import { useEffect, useState, useCallback, useMemo, Children, isValidElement, cloneElement } from 'react';
 import { useNavigation } from '../NavigationProvider.js';
-import { ANIMATION_DURATION, PIN_BUTTON_OPACITY_TRANSITION, shrinkHeight } from '../constants.js';
+import { ANIMATION_DURATION, 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';
@@ -17,17 +17,46 @@ const NeutralButtonLink = process.env.NODE_ENV === "production" ? {
   styles: "color:inherit;text-decoration:none;background-color:inherit;border:none;text-align:left",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+
+// Pin button when the navigation is expanded
 const ExpandedPinnedButton = /*#__PURE__*/_styled(Button, {
+  target: "e134hokc12"
+})(process.env.NODE_ENV === "production" ? {
+  name: "9hkyle",
+  styles: "opacity:0;right:0;position:absolute;left:-24px;top:0;bottom:0;margin:auto;&:hover,&:focus,&:active{opacity:1;}"
+} : {
+  name: "9hkyle",
+  styles: "opacity:0;right:0;position:absolute;left:-24px;top:0;bottom:0;margin:auto;&:hover,&:focus,&:active{opacity:1;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const GrabIcon = /*#__PURE__*/_styled(Icon, {
   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;");
+})("opacity:0;margin:0 ", ({
+  theme
+}) => theme.space['0.25'], ";cursor:grab;");
+
+// Pin button when the navigation is collapsed
 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, {
+})(process.env.NODE_ENV === "production" ? {
+  name: "i8vgdw",
+  styles: "position:absolute;opacity:0;right:0;margin:auto;top:0;bottom:0;&:hover{opacity:1;}"
+} : {
+  name: "i8vgdw",
+  styles: "position:absolute;opacity:0;right:0;margin:auto;top:0;bottom:0;&:hover{opacity:1;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const StyledBadge = /*#__PURE__*/_styled(Badge, {
   target: "e134hokc9"
-})("text-align:left;&:hover{", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}}");
-const StyledMenu = /*#__PURE__*/_styled(MenuV2, {
+})();
+const StyledMenuItem = /*#__PURE__*/_styled(MenuV2.Item, {
+  shouldForwardProp: prop => !['isPinnable'].includes(prop),
   target: "e134hokc8"
+})("text-align:left;&:hover,&:focus,&:active{", CollapsedPinnedButton, "{opacity:1;}", StyledBadge, "{opacity:", ({
+  isPinnable
+}) => isPinnable ? 0 : 1, ";}}");
+const StyledMenu = /*#__PURE__*/_styled(MenuV2, {
+  target: "e134hokc7"
 })(process.env.NODE_ENV === "production" ? {
   name: "educr3",
   styles: "width:180px"
@@ -36,9 +65,6 @@ const StyledMenu = /*#__PURE__*/_styled(MenuV2, {
   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" ? {
@@ -80,11 +106,13 @@ const StyledContainer = /*#__PURE__*/_styled(Stack, {
   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.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    ){background-color:", ({
   theme
-}) => theme.colors.neutral.backgroundHover, ";", WrapText, "{color:", ({
+}) => theme.colors.neutral.backgroundWeak, ";}&[data-has-active-children='true'][data-has-no-expand='false']:not(\n      [disabled][data-is-active='true']\n    ){background-color:", ({
   theme
-}) => theme.colors.neutral.textWeakHover, ";}", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}}&:hover[data-has-children='false'][data-is-active='false']{", WrapText, "{color:", ({
+}) => theme.colors.neutral.backgroundWeakHover, ";", WrapText, "{color:", ({
+  theme
+}) => theme.colors.neutral.textWeakHover, ";}", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}}&[data-has-no-expand='false']:not([disabled]){&:hover,&:focus,&:active{", ExpandedPinnedButton, ",", CollapsedPinnedButton, ",", 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(\n      [data-is-active='true']\n    ){background-color:", ({
   theme
@@ -130,7 +158,8 @@ const Item = ({
   as,
   disabled,
   noExpand = false,
-  toggleMenu
+  index,
+  id
 }) => {
   const context = useNavigation();
   if (!context) {
@@ -144,8 +173,22 @@ const Item = ({
     unpinItem,
     pinnedItems,
     pinLimit,
-    animation
+    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);
@@ -161,21 +204,20 @@ const Item = ({
       }, 1);
     }
   }, [animation, toggle]);
-  const PaddedStack = noExpand ? Stack : PaddingStack;
+  const PaddedStack = noExpand || type === 'pinnedGroup' ? Stack : PaddingStack;
   const hasHrefAndNoChildren = href && !children;
   const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
-  const isItemPinned = pinnedItems.includes(label);
+  const isItemPinned = pinnedItems.includes(id);
   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) {
+    if (hasPinnedFeatureAndNoChildren) {
       return true;
     }
     return false;
-  }, [disabled, hasPinnedFeatureAndNoChildren, href, isItemPinned, pinLimit, pinnedItems.length, type]);
+  }, [disabled, hasPinnedFeatureAndNoChildren, href, type]);
   const hasActiveChildren = useMemo(() => {
     if (!children) return false;
     return Children.map(children, child => /*#__PURE__*/isValidElement(child) ? child.props?.active : false).includes(true);
@@ -193,7 +235,7 @@ const Item = ({
     return 'button';
   }, [as, hasHrefAndNoChildren, noExpand]);
   const Container = StyledContainer.withComponent(containerTag, {
-    target: "e134hokc12"
+    target: "e134hokc13"
   });
   const ariaExpanded = useMemo(() => {
     if (hasHrefAndNoChildren && internalToggle) {
@@ -204,6 +246,28 @@ const Item = ({
     }
     return undefined;
   }, [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
+    }));
+    // eslint-disable-next-line no-param-reassign
+    event.currentTarget.style.opacity = '0.5';
+  };
+  const onDragStopTrigger = event => {
+    // eslint-disable-next-line no-param-reassign
+    event.currentTarget.style.opacity = '1';
+  };
 
   // This content is when the navigation is expanded
   if (expanded || !expanded && animation === 'expand') {
@@ -233,6 +297,10 @@ const Item = ({
         "data-has-active-children": hasActiveChildren,
         "data-has-no-expand": noExpand,
         disabled: disabled,
+        draggable: type === 'pinned' && expanded,
+        onDragStart: event => expanded ? onDragStartTrigger(event) : undefined,
+        onDragEnd: event => expanded ? onDragStopTrigger(event) : undefined,
+        id: id,
         children: [jsxs(Stack, {
           direction: "row",
           gap: 1,
@@ -246,6 +314,12 @@ const Item = ({
               variant: active ? 'primary' : categoryIconVariant,
               disabled: disabled
             })
+          }) : null, type === 'pinned' && expanded ? jsx(GrabIcon, {
+            name: "drag-vertical",
+            sentiment: "neutral",
+            prominence: "weak",
+            size: "small",
+            disabled: disabled
           }) : null, jsxs(Stack, {
             children: [jsx(WrapText, {
               as: "span",
@@ -278,7 +352,7 @@ const Item = ({
               disabled: disabled,
               children: badgeText
             }) : null, shouldShowPinnedButton ? jsx(Tooltip, {
-              text: isItemPinned ? locales['navigation.unpin.tooltip'] : locales['navigation.pin.tooltip'],
+              text: isItemPinned ? locales['navigation.unpin.tooltip'] : pinTooltipLocale,
               placement: "right",
               children: jsx("div", {
                 style: {
@@ -288,8 +362,17 @@ const Item = ({
                   size: "xsmall",
                   variant: "ghost",
                   sentiment: active ? 'primary' : 'neutral',
-                  onClick: () => isItemPinned ? unpinItem(label) : pinItem(label),
-                  icon: "pin"
+                  onClick: event => {
+                    if (isItemPinned) {
+                      unpinItem(id);
+                    } else {
+                      pinItem(id);
+                    }
+                    event.stopPropagation(); // This is to avoid click spread to the parent and change the routing
+                  },
+                  icon: isItemPinned ? 'unpin' : 'pin',
+                  iconVariant: isItemPinned ? 'filled' : 'outlined',
+                  disabled: isItemPinned ? false : isPinDisabled
                 })
               })
             }) : null]
@@ -298,21 +381,15 @@ const Item = ({
             sentiment: "neutral",
             prominence: "default",
             disabled: disabled
-          }) : null, children ? jsxs(Stack, {
+          }) : null, children ? jsx(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, {
+            children: !animation && !noExpand ? jsx(AnimatedIcon, {
               name: internalToggle ? 'arrow-down' : 'arrow-right',
               sentiment: "neutral",
               prominence: "weak"
-            }) : null]
+            }) : null
           }) : null]
         })]
       }), children ? jsx(Fragment, {
@@ -336,7 +413,9 @@ const Item = ({
       alignItems: "start",
       justifyContent: "start",
       children: Children.count(children) > 0 ? jsx(StyledMenu, {
-        triggerMethod: "hover",
+        triggerMethod: "click",
+        dynamicDomRendering: false // As we parse the children we don't need dynamic rendering
+        ,
         disclosure: jsx(Button, {
           sentiment: "neutral",
           variant: hasActiveChildren ? 'filled' : 'ghost',
@@ -354,11 +433,8 @@ const Item = ({
           }) : null
         }),
         placement: "right",
-        children: ({
-          toggle: toggleMenuLocal
-        }) => Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-          hasParents: true,
-          toggleMenu: toggleMenuLocal
+        children: Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+          hasParents: true
         }) : child)
       }) : jsx(Tooltip, {
         text: label,
@@ -390,17 +466,19 @@ const Item = ({
       href: href,
       onClick: () => {
         onClick?.();
-        toggleMenu?.();
       },
       borderless: true,
       active: active,
+      disabled: disabled,
       sentiment: active ? 'primary' : 'neutral',
+      isPinnable: shouldShowPinnedButton,
       children: jsxs(Stack, {
         gap: 1,
         direction: "row",
         alignItems: "center",
         justifyContent: "space-between",
         flex: 1,
+        width: "100%",
         children: [jsx(WrapText, {
           as: "span",
           variant: "bodySmall",
@@ -417,20 +495,28 @@ const Item = ({
           prominence: "weak",
           disabled: disabled
         }) : null, shouldShowPinnedButton ? jsx(Tooltip, {
-          text: isItemPinned ? locales['navigation.unpin.tooltip'] : locales['navigation.pin.tooltip'],
+          text: isItemPinned ? locales['navigation.unpin.tooltip'] : pinTooltipLocale,
           placement: "right",
-          children: jsx(CollapsedPinnedButton, {
-            size: "xsmall",
-            variant: "ghost",
-            sentiment: active ? 'primary' : 'neutral',
-            onClick: () => {
-              if (isItemPinned) {
-                unpinItem(label);
-              } else {
-                pinItem(label);
-              }
+          children: jsx("div", {
+            style: {
+              position: 'relative'
             },
-            icon: "auto-fix"
+            children: jsx(CollapsedPinnedButton, {
+              size: "xsmall",
+              variant: "ghost",
+              sentiment: active ? 'primary' : 'neutral',
+              onClick: event => {
+                if (isItemPinned) {
+                  unpinItem(id);
+                } else {
+                  pinItem(id);
+                }
+                event.stopPropagation(); // This is to avoid click spread to the parent and change the routing
+              },
+              icon: isItemPinned ? 'unpin' : 'pin',
+              iconVariant: isItemPinned ? 'filled' : 'outlined',
+              disabled: isItemPinned ? false : isPinDisabled
+            })
           })
         }) : null]
       })

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

@@ -1,8 +1,41 @@
+import _styled from '@emotion/styled/base';
+import { useTheme } from '@emotion/react';
+import { Text } from '@ultraviolet/ui';
+import { useCallback } from 'react';
 import { useNavigation } from '../NavigationProvider.js';
 import { Item } from './Item.js';
-import { jsx } from '@emotion/react/jsx-runtime';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
-const PinnedItems = () => {
+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 DropableArea = /*#__PURE__*/_styled("div", {
+  target: "e5ys0ny2"
+})("position:absolute;right:0;left:0;top:0;height:2px;border-top:2px solid;border-color:transparent;padding:", ({
+  theme
+}) => theme.space['0.5'], " 0;&::before{content:'';position:absolute;left:0;top:-4px;height:0px;width:0px;border:3px solid;border-color:inherit;border-radius:", ({
+  theme
+}) => theme.radii.circle, ";}");
+const RelativeDiv = /*#__PURE__*/_styled("div", {
+  target: "e5ys0ny1"
+})(process.env.NODE_ENV === "production" ? {
+  name: "bjn8wh",
+  styles: "position:relative"
+} : {
+  name: "bjn8wh",
+  styles: "position:relative",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const TextContainer = /*#__PURE__*/_styled("div", {
+  target: "e5ys0ny0"
+})("padding:", ({
+  theme
+}) => theme.space['1'], " 0;padding-left:", ({
+  theme
+}) => theme.space['4'], ";margin-left:", ({
+  theme
+}) => theme.space['0.5'], ";");
+const PinnedItems = ({
+  toggle = true
+}) => {
   const context = useNavigation();
   if (!context) {
     throw new Error('Navigation.PinnedItems can only be used inside a NavigationProvider.');
@@ -10,18 +43,84 @@ const PinnedItems = () => {
   const {
     locales,
     pinnedItems,
-    pinnedFeature
+    pinnedFeature,
+    reorderItems,
+    expanded,
+    items
   } = 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))
+  const theme = useTheme();
+  const onDrop = useCallback((event, index) => {
+    event.preventDefault();
+    if (event?.dataTransfer) {
+      // eslint-disable-next-line no-param-reassign
+      event.currentTarget.style.borderColor = 'transparent';
+      const data = JSON.parse(event.dataTransfer.getData('text'));
+      if (data.index === index - 1 || index > data.index) {
+        reorderItems(data.index, index - 1);
+        return;
+      }
+      reorderItems(data.index, index);
+    }
+  }, [reorderItems]);
+  const onDragOver = useCallback(event => {
+    event.preventDefault();
+    // eslint-disable-next-line no-param-reassign
+    event.currentTarget.style.borderColor = theme.colors.primary.border;
+  }, [theme.colors.primary.border]);
+  const onDragLeave = useCallback(event => {
+    event.preventDefault();
+    // eslint-disable-next-line no-param-reassign
+    event.currentTarget.style.borderColor = 'transparent';
+  }, []);
+  if (Object.keys(items).length === 0) {
+    return null;
+  }
+  if (pinnedFeature) {
+    return jsx("div", {
+      children: jsxs(Item, {
+        label: locales['navigation.pinned.item.group.label'],
+        categoryIcon: "pin",
+        categoryIconVariant: "neutral",
+        toggle: toggle,
+        type: "pinnedGroup",
+        id: "pinned-group",
+        children: [pinnedItems.length > 0 ? pinnedItems.map((itemId, index) => jsxs("div", {
+          style: {
+            position: expanded ? 'relative' : undefined
+          },
+          children: [expanded ? jsx(DropableArea, {
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDrop: event => onDrop(event, index)
+          }) : null, jsx(Item, {
+            label: items[itemId]?.label ?? 'Unknown navigation item',
+            type: "pinned",
+            index: index,
+            toggle: toggle,
+            id: itemId,
+            active: items[itemId]?.active ?? false,
+            onClick: items[itemId]?.onClick ?? undefined,
+            hasParents: true
+          })]
+        }, itemId)) : jsx(TextContainer, {
+          children: jsx(Text, {
+            as: "p",
+            variant: "caption",
+            prominence: "weak",
+            sentiment: "neutral",
+            children: locales['navigation.pinned.item.group.empty']
+          })
+        }), expanded ? jsx(RelativeDiv, {
+          style: {
+            position: 'relative'
+          },
+          children: jsx(DropableArea, {
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDrop: event => onDrop(event, pinnedItems.length)
+          })
+        }) : null]
+      })
     });
   }
   return null;

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

@@ -8,7 +8,6 @@ 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`
@@ -34,4 +33,4 @@ const groupAnimation = keyframes`
   }
 `;
 
-export { ANIMATION_DURATION, NAVIGATION_COLLASPED_WIDTH, NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_WIDTH, PIN_BUTTON_OPACITY_TRANSITION, groupAnimation, shrinkHeight };
+export { ANIMATION_DURATION, NAVIGATION_COLLASPED_WIDTH, NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_WIDTH, groupAnimation, shrinkHeight };

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

@@ -1,9 +1,11 @@
 var NavigationLocales = {
   'navigation.pin.tooltip': 'Pin product',
   'navigation.unpin.tooltip': 'Unpin product',
+  'navigation.pin.limit': 'You cannot pin more products',
   'navigation.pinned.item.group.label': 'Pinned items',
   'navigation.expand.button': 'Expand sidebar',
-  'navigation.collapse.button': 'Collapse sidebar'
+  'navigation.collapse.button': 'Collapse sidebar',
+  'navigation.pinned.item.group.empty': 'You have no pinned items.'
 };
 
 export { NavigationLocales as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.14.4",
+  "version": "0.15.0",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -35,18 +35,18 @@
   "peerDependencies": {
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
+    "@babel/core": "7.24.5",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "@ultraviolet/icons": "2.12.5",
     "@ultraviolet/illustrations": "1.7.1"
   },
@@ -56,7 +56,7 @@
     "@uiw/react-codemirror": "4.21.25",
     "react-intersection-observer": "9.8.2",
     "@ultraviolet/themes": "1.10.0",
-    "@ultraviolet/ui": "1.51.0"
+    "@ultraviolet/ui": "1.51.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",