@carbon-labs/react-ui-shell 0.2.0 → 0.3.0

package/es/components/SideNav.d.ts

@@ -21,6 +21,7 @@ export interface SideNavProps extends ComponentProps<'nav'> {
     enterDelayMs?: number;
     inert?: boolean;
     isCollapsible: boolean | undefined;
+    hideOverlay: boolean | undefined;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/es/components/SideNav.js

@@ -44,6 +44,7 @@ function SideNavRenderFunction(_ref, ref) {
     onSideNavBlur,
     enterDelayMs = 100,
     isCollapsible = false,
+    hideOverlay = false,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -82,8 +83,7 @@ function SideNavRenderFunction(_ref, ref) {
   });
   const overlayClassName = cx({
     [`${prefix}--side-nav__overlay`]: true,
-    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState,
-    [`${prefix}--side-nav__overlay-active--lg`]: isCollapsible && (expanded || expandedViaHoverState)
+    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
   });
   let childrenToRender = children;
 
@@ -156,7 +156,7 @@ function SideNavRenderFunction(_ref, ref) {
     value: {
       isRail
     }
-  }, isFixedNav ? null :
+  }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   React.createElement("div", {
@@ -201,6 +201,10 @@ SideNav.propTypes = {
    * Using this prop causes SideNav to become a controled component.
    */
   expanded: PropTypes.bool,
+  /**
+   * If `true`, the overlay will be hidden. Defaults to `false`.
+   */
+  hideOverlay: PropTypes.bool,
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.

package/lib/components/SideNav.d.ts

@@ -21,6 +21,7 @@ export interface SideNavProps extends ComponentProps<'nav'> {
     enterDelayMs?: number;
     inert?: boolean;
     isCollapsible: boolean | undefined;
+    hideOverlay: boolean | undefined;
 }
 interface SideNavContextData {
     isRail?: boolean | undefined;

package/lib/components/SideNav.js

@@ -46,6 +46,7 @@ function SideNavRenderFunction(_ref, ref) {
     onSideNavBlur,
     enterDelayMs = 100,
     isCollapsible = false,
+    hideOverlay = false,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -84,8 +85,7 @@ function SideNavRenderFunction(_ref, ref) {
   });
   const overlayClassName = index.default({
     [`${prefix}--side-nav__overlay`]: true,
-    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState,
-    [`${prefix}--side-nav__overlay-active--lg`]: isCollapsible && (expanded || expandedViaHoverState)
+    [`${prefix}--side-nav__overlay-active`]: expanded || expandedViaHoverState
   });
   let childrenToRender = children;
 
@@ -158,7 +158,7 @@ function SideNavRenderFunction(_ref, ref) {
     value: {
       isRail
     }
-  }, isFixedNav ? null :
+  }, isFixedNav || hideOverlay ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   React.createElement("div", {
@@ -203,6 +203,10 @@ SideNav.propTypes = {
    * Using this prop causes SideNav to become a controled component.
    */
   expanded: PropTypes.bool,
+  /**
+   * If `true`, the overlay will be hidden. Defaults to `false`.
+   */
+  hideOverlay: PropTypes.bool,
   /**
    * Provide the `href` to the id of the element on your package that is the
    * main content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -27,5 +27,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "48941ca09c9d9992ac597fc3fa79b8f700daaeab"
+  "gitHead": "e2bf601b2e8d4301fa72fdb9a5424f2ac938df14"
 }

package/scss/styles/_side-nav.scss

@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities/convert' as convert;
 
 // $prefix: 'clabs' !default;
@@ -23,13 +21,3 @@ $prefix: 'cds' !default;
 .#{$prefix}--side-nav--collapsible.#{$prefix}--side-nav--expanded {
   inline-size: convert.to-rem(256px);
 }
-
-.#{$prefix}--side-nav__overlay-active--lg {
-  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;
-}