@ultraviolet/plus 0.12.5 → 0.12.7

package/dist/index.d.ts

@@ -477,6 +477,7 @@ type NavigationProps = {
      * This function is called when resize occur using the vertical bar on the left of the navigation.
      */
     onWidthResize?: (width: number) => void;
+    id?: string;
 };
 /**
  * Navigation is a component that allows you to create a sidebar navigation.
@@ -484,7 +485,7 @@ type NavigationProps = {
  * to make it work in your application.
  */
 declare const Navigation: {
-    ({ children, logo, pinnedFeature, onClickPinUnpin, onClickExpand, initialPinned, initialExpanded, locales, pinLimit, width, onWidthResize, className, }: NavigationProps): _emotion_react_jsx_runtime.JSX.Element;
+    ({ children, logo, pinnedFeature, onClickPinUnpin, onClickExpand, initialPinned, initialExpanded, locales, pinLimit, width, onWidthResize, className, id, }: NavigationProps): _emotion_react_jsx_runtime.JSX.Element;
     Group: ({ children, label }: {
         children: ReactNode;
         label: string;

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

@@ -25,7 +25,8 @@ const Navigation = ({
   pinLimit = 7,
   width = NAVIGATION_WIDTH,
   onWidthResize,
-  className
+  className,
+  id
 }) => jsx(NavigationProvider, {
   onClickPinUnpin: onClickPinUnpin,
   pinnedFeature: pinnedFeature,
@@ -39,6 +40,7 @@ const Navigation = ({
     className: className,
     width: width,
     onWidthResize: onWidthResize,
+    id: id,
     children: children
   })
 });

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

@@ -70,7 +70,8 @@ const NavigationContent = ({
   onClickExpand,
   width,
   onWidthResize,
-  className
+  className,
+  id
 }) => {
   const sliderRef = useRef(null);
   const navigationRef = useRef(null);
@@ -188,6 +189,7 @@ const NavigationContent = ({
   }, [expanded, onWidthResize, toggleExpand]);
   return jsxs(StyledNav, {
     className: className,
+    id: id,
     children: [jsxs(Container, {
       ref: navigationRef,
       "data-animation": animation,

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

@@ -80,13 +80,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']}`, ";}transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out;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    ),&[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, ";", WrapText, "{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
-}) => theme.colors.neutral.textWeakHover, ";transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out;}}&:active[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ){background-color:", ({
+}) => 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
@@ -243,7 +243,7 @@ const Item = ({
             justifyContent: "center",
             children: jsx(CategoryIcon, {
               name: categoryIcon,
-              variant: categoryIconVariant,
+              variant: active ? 'primary' : categoryIconVariant,
               disabled: disabled
             })
           }) : null, jsxs(Stack, {
@@ -347,7 +347,8 @@ const Item = ({
             alignItems: "center",
             justifyContent: "center",
             children: jsx(CategoryIcon, {
-              name: categoryIcon
+              name: categoryIcon,
+              variant: active ? 'primary' : categoryIconVariant
             })
           }) : null
         }),
@@ -373,7 +374,8 @@ const Item = ({
             alignItems: "center",
             justifyContent: "center",
             children: jsx(CategoryIcon, {
-              name: categoryIcon ?? 'console'
+              name: categoryIcon ?? 'console',
+              variant: active ? 'primary' : categoryIconVariant
             })
           })
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.12.5",
+  "version": "0.12.7",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.24.3",
+    "@babel/core": "7.24.4",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
@@ -47,7 +47,7 @@
     "@types/react-dom": "18.2.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@ultraviolet/icons": "2.12.2",
+    "@ultraviolet/icons": "2.12.3",
     "@ultraviolet/illustrations": "1.7.0"
   },
   "dependencies": {
@@ -56,7 +56,7 @@
     "@uiw/react-codemirror": "4.21.25",
     "react-intersection-observer": "9.8.1",
     "@ultraviolet/themes": "1.10.0",
-    "@ultraviolet/ui": "1.45.6"
+    "@ultraviolet/ui": "1.46.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",