@ultraviolet/plus 0.14.0 → 0.14.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, MouseEventHandler, ComponentProps } from 'react';
+import { ReactNode, MouseEventHandler, ComponentProps, RefObject } 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';
@@ -66,7 +66,7 @@ type CodeEditorProps = {
 };
 declare const CodeEditor: ({ title, value, onChange, extensions, onBlur, height, readOnly, }: CodeEditorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const _default: {
+declare const _default$1: {
     readonly 'estimate.cost.description': "This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.";
     readonly 'estimate.cost.label': "Estimated cost";
     readonly 'estimate.cost.beta.free': "Free During Beta";
@@ -186,7 +186,7 @@ type EstimateCostProps = {
     /**
      * Locales for the component. By default, it will use the english locales.
      */
-    locales?: typeof _default;
+    locales?: typeof _default$1;
     /**
      * Defines the currency to be shown in the component.
      * To find out all currencies checkout https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes section "Code" of the table.
@@ -479,6 +479,68 @@ declare const Navigation: {
     Separator: () => _emotion_react_jsx_runtime.JSX.Element;
 };
 
+declare const _default: {
+    readonly 'navigation.pin.tooltip': "Pin product";
+    readonly 'navigation.unpin.tooltip': "Unpin product";
+    readonly 'navigation.pinned.item.group.label': "Pinned items";
+    readonly 'navigation.expand.button': "Expand sidebar";
+    readonly 'navigation.collapse.button': "Collapse sidebar";
+};
+
+type ContextProps = {
+    expanded: boolean;
+    toggleExpand: (toggle?: boolean) => void;
+    animation: boolean | 'expand' | 'collapse';
+    pinnedFeature?: boolean;
+    onClickPinUnpin?: (pinned: string[]) => void;
+    pinItem: (item: string) => void;
+    unpinItem: (item: string) => void;
+    pinnedItems: string[];
+    pinLimit: number;
+    navigationRef: RefObject<HTMLDivElement>;
+    locales: typeof _default;
+    width: number;
+    setWidth: (width: number) => void;
+};
+declare const useNavigation: () => ContextProps;
+type NavigationProviderProps = {
+    children: ReactNode;
+    initialWidth?: number;
+    /**
+     * This enable / disable the pinned feature of the navigation
+     * Pinned allows the use to pin (or favorite) some items in the navigation
+     */
+    pinnedFeature?: boolean;
+    /**
+     * This define how many items can be pinned at the same time.
+     * If you want to disable the limit just set `Infinity` to this prop
+     */
+    pinLimit?: number;
+    /**
+     * The initial pinned items. This should be an array of labels you've set on
+     * your `<Navigation.Item>`
+     */
+    initialPinned?: string[];
+    /**
+     * The initial expanded state of the navigation. If set to true the
+     * 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
+     * of the navigation. This is not triggered when the user resize the navigation
+     * and it automatically collapse / expand.
+     */
+    onClickExpand?: (expanded: boolean) => void;
+};
+declare const NavigationProvider: ({ children, pinnedFeature, onClickPinUnpin, initialPinned, initialExpanded, locales, pinLimit, onClickExpand, initialWidth, }: NavigationProviderProps) => _emotion_react_jsx_runtime.JSX.Element;
+
 type FAQProps = {
     description: string;
     productIconName?: ComponentProps<typeof ProductIcon>['name'];
@@ -536,4 +598,4 @@ declare const SteppedListContainer: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, Navigation, SteppedListContainer, _default as estimateCostDefaultLocales };
+export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, Navigation, NavigationProvider, SteppedListContainer, _default$1 as estimateCostDefaultLocales, useNavigation };

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

@@ -1,7 +1,7 @@
-import { useContext, createContext } from 'react';
-import { NAVIGATION_WIDTH } from './constants.js';
+import { useContext, useState, useRef, useCallback, useMemo, createContext } from 'react';
+import { ANIMATION_DURATION, NAVIGATION_WIDTH } from './constants.js';
 import NavigationLocales from './locales/en.js';
-import '@emotion/react/jsx-runtime';
+import { jsx } from '@emotion/react/jsx-runtime';
 
 const NavigationContext = /*#__PURE__*/createContext({
   expanded: true,
@@ -23,5 +23,68 @@ const NavigationContext = /*#__PURE__*/createContext({
   setWidth: () => {}
 });
 const useNavigation = () => useContext(NavigationContext);
+const NavigationProvider = ({
+  children,
+  pinnedFeature = false,
+  onClickPinUnpin,
+  initialPinned,
+  initialExpanded = true,
+  locales = NavigationLocales,
+  pinLimit = 7,
+  onClickExpand,
+  initialWidth = NAVIGATION_WIDTH
+}) => {
+  const [expanded, setExpanded] = useState(initialExpanded);
+  const [pinnedItems, setPinnedItems] = useState(initialPinned ?? []);
+  const [animation, setAnimation] = useState(false);
+  const [width, setWidth] = useState(initialWidth);
+  const navigationRef = useRef(null);
 
-export { NavigationContext, useNavigation };
+  // This function will be triggered when expand/collapse button is clicked
+  const toggleExpand = useCallback(toggle => {
+    if (typeof toggle !== 'boolean' && toggle !== undefined) {
+      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 !== undefined && toggle === expanded) {
+      return;
+    }
+    onClickExpand?.(!expanded);
+    if (navigationRef.current) {
+      navigationRef.current.style.width = '';
+    }
+    setAnimation(expanded ? 'collapse' : 'expand');
+    setTimeout(() => {
+      setExpanded(toggle !== undefined ? toggle : !expanded);
+      setAnimation(false);
+    }, ANIMATION_DURATION);
+  }, [expanded, onClickExpand, setAnimation, setExpanded]);
+  const pinItem = useCallback(item => {
+    setPinnedItems([...pinnedItems, item]);
+    onClickPinUnpin?.(pinnedItems);
+  }, [onClickPinUnpin, pinnedItems]);
+  const unpinItem = useCallback(item => {
+    setPinnedItems(pinnedItems.filter(localItem => localItem !== item));
+    onClickPinUnpin?.(pinnedItems);
+  }, [onClickPinUnpin, pinnedItems]);
+  const value = useMemo(() => ({
+    expanded,
+    toggleExpand,
+    pinnedItems,
+    pinItem,
+    unpinItem,
+    pinnedFeature,
+    locales,
+    pinLimit,
+    animation,
+    setAnimation,
+    navigationRef,
+    width,
+    setWidth
+  }), [expanded, toggleExpand, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation, width]);
+  return jsx(NavigationContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+export { NavigationContext, NavigationProvider, useNavigation };

package/dist/src/index.js

@@ -6,5 +6,6 @@ export { default as estimateCostDefaultLocales } from './components/EstimateCost
 export { CustomerSatisfaction } from './components/CustomerSatisfaction/index.js';
 export { Conversation } from './components/Conversation/index.js';
 export { Navigation } from './components/Navigation/Navigation.js';
+export { NavigationProvider, useNavigation } from './components/Navigation/NavigationProvider.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.14.0",
+  "version": "0.14.1",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -56,7 +56,7 @@
     "@uiw/react-codemirror": "4.21.25",
     "react-intersection-observer": "9.8.2",
     "@ultraviolet/themes": "1.10.0",
-    "@ultraviolet/ui": "1.48.0"
+    "@ultraviolet/ui": "1.48.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",