@carbon-labs/react-ui-shell 0.39.0 → 0.41.0

package/es/components/SideNav.js

@@ -99,7 +99,8 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav--panel`]: navType === SIDE_NAV_TYPE.PANEL,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
     [`${prefix}--side-nav--hidden`]: !isPersistent,
-    [`${prefix}--side-nav--collapsible`]: isCollapsible
+    [`${prefix}--side-nav--collapsible`]: isCollapsible,
+    [`${prefix}--side-nav--with-overlay`]: !hideOverlay
   });
   const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,

package/lib/components/SideNav.js

@@ -101,7 +101,8 @@ function SideNavRenderFunction(_ref, ref) {
     [`${prefix}--side-nav--panel`]: navType === SIDE_NAV_TYPE.PANEL,
     [`${prefix}--side-nav--ux`]: isChildOfHeader,
     [`${prefix}--side-nav--hidden`]: !isPersistent,
-    [`${prefix}--side-nav--collapsible`]: isCollapsible
+    [`${prefix}--side-nav--collapsible`]: isCollapsible,
+    [`${prefix}--side-nav--with-overlay`]: !hideOverlay
   });
   const overlayClassName = index.default({
     [`${prefix}--side-nav__overlay`]: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -13,15 +13,15 @@
     "url": "https://github.com/carbon-design-system/carbon-labs",
     "directory": "src/components/UIShell"
   },
+  "types": "./es/index.d.ts",
   "exports": {
     ".": {
       "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "type": "./es/index.d.ts"
+      "require": "./lib/index.js"
     },
-    "./es/": "./es/",
-    "./lib/": "./lib/",
-    "./scss/": "./scss/"
+    "./es/*": "./es/*",
+    "./lib/*": "./lib/*",
+    "./scss/*": "./scss/*"
   },
   "files": [
     "es",
@@ -41,5 +41,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "36a6e456f79f042c833be0ea7ffad9d5f44ee8c2"
+  "gitHead": "84c5f4054019f11741d1a7f4bd5b9725914bab87"
 }

package/scss/styles/_content.scss

@@ -7,12 +7,14 @@
 
 @use '@carbon/styles/scss/utilities/convert' as convert;
 @use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
 $prefix: 'cds' !default;
 
+// Increases specificity to support shell components wrapped in a Theme component
 .#{$prefix}--side-nav--panel ~ .#{$prefix}--content,
 div:has(.#{$prefix}--side-nav--panel) ~ .#{$prefix}--content {
-  margin-inline-start: convert.to-rem(48px);
+  margin-inline-start: $spacing-09;
   transition: margin-inline-start $duration-fast-02, transform $duration-fast-02;
 }
 
@@ -22,3 +24,9 @@ div:has(.#{$prefix}--side-nav--panel.#{$prefix}--side-nav--expanded)
   ~ .#{$prefix}--content {
   margin-inline-start: convert.to-rem(256px);
 }
+
+// should not be a grid influencer when used with overlay
+.#{$prefix}--side-nav--with-overlay.#{$prefix}--side-nav--expanded
+  ~ .#{$prefix}--content {
+  margin-inline-start: $spacing-09;
+}

package/scss/styles/_side-nav.scss

@@ -348,8 +348,19 @@ div:has(.#{$prefix}--header)
 }
 
 //----------------------------------------------------------------------------
-// Side-nav Rail
+// Rail
 //----------------------------------------------------------------------------
 .#{$prefix}--side-nav--rail {
   z-index: 7999; /* needs to be below header */
 }
+
+// allow overlay to display at all breakpoints
+.#{$prefix}--side-nav__overlay-active {
+  z-index: z('overlay');
+  background-color: $overlay;
+  block-size: 100vh;
+  inline-size: 100vw;
+  opacity: 1;
+  transition: opacity $transition-expansion $standard-easing,
+    background-color $transition-expansion $standard-easing;
+}