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

package/README.md

@@ -0,0 +1,10 @@
+# @carbon-labs/react-ui-shell
+
+## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
+
+This package uses IBM Telemetry to collect de-identified and anonymized metrics
+data. By installing this package as a dependency you are agreeing to telemetry
+collection. To opt out, see
+[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
+For more information on the data being collected, please see the
+[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).

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.4.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -18,14 +18,20 @@
   "files": [
     "es",
     "lib",
-    "scss"
+    "scss",
+    "telemetry.yml"
   ],
   "scripts": {
     "build": "node ../../../tasks/build.js",
-    "clean": "rm -rf {es,lib,scss}"
+    "clean": "rm -rf {es,lib,scss}",
+    "postinstall": "ibmtelemetry --config=telemetry.yml",
+    "telemetry:config": "npx -y @ibm/telemetry-js-config-generator generate --id 5b9dce15-eeda-4b53-8683-3e3aeb599fd1 --endpoint https://www-api.ibm.com/ibm-telemetry/v1/metrics --files ./components/**/*.(tsx|js|jsx)"
   },
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "48941ca09c9d9992ac597fc3fa79b8f700daaeab"
+  "dependencies": {
+    "@ibm/telemetry-js": "^1.9.1"
+  },
+  "gitHead": "4fbaf523877b2c49978e125e5b007ca3fce3a0c6"
 }

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;
-}

package/telemetry.yml

@@ -0,0 +1,37 @@
+# yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+
+version: 1
+projectId: 5b9dce15-eeda-4b53-8683-3e3aeb599fd1
+endpoint: https://www-api.ibm.com/ibm-telemetry/v1/metrics
+collect:
+  jsx:
+    elements:
+      allowedAttributeNames:
+        # SideNav
+        - addFocusListeners
+        - addMouseListeners
+        - className
+        - defaultExpanded
+        - enterDelayMs
+        - expanded
+        - href
+        - inert
+        - isChildOfHeader
+        - isCollapsible
+        - isFixedNav
+        - isPersistent
+        - isRail
+        - onOverlayClick
+        - onSideNavBlur
+        - onToggle
+        # React
+        - key
+        - ref
+      allowedAttributeStringValues:
+        - 'true'
+        - 'false'
+  npm:
+    dependencies: null
+  js:
+    functions: {}
+    tokens: null