@carbon-labs/react-ui-shell 0.12.0 → 0.13.0

package/es/components/HeaderPanel.js

@@ -9,11 +9,11 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
-import { usePrefix } from '@carbon/react/lib/internal/usePrefix';
-import { keys } from '@carbon/react/lib/internal/keyboard/keys';
-import { match } from '@carbon/react/lib/internal/keyboard/match';
-import { useWindowEvent } from '@carbon/react/lib/internal/useEvent';
-import { useMergedRefs } from '@carbon/react/lib/internal/useMergedRefs';
+import { usePrefix } from '../internal/usePrefix.js';
+import { Escape } from '../internal/keyboard/keys.js';
+import { match } from '../internal/keyboard/match.js';
+import { useWindowEvent } from '../internal/useEvent.js';
+import { useMergedRefs } from '../internal/useMergedRefs.js';
 
 const noopFn = () => {};
 const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel(_ref, ref) {
@@ -49,7 +49,7 @@ const HeaderPanel = /*#__PURE__*/React.forwardRef(function HeaderPanel(_ref, ref
       }
     };
     eventHandlers.onKeyDown = event => {
-      if (match(event, keys.Escape)) {
+      if (match(event, Escape)) {
         setExpandedState(false);
         onHeaderPanelFocus();
         if (href) {

package/es/components/Link.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React, { type ElementType, type Ref } from 'react';
+import { type PolymorphicProps } from '../types/common';
+type LinkBaseProps<E extends ElementType> = {
+    /**
+     * @deprecated Use `as` instead
+     */
+    element?: E | undefined;
+    ref?: Ref<E>;
+};
+export type LinkProps<E extends ElementType> = PolymorphicProps<E, LinkBaseProps<E>>;
+/**
+ * Link is a custom component that allows us to supporting rendering elements
+ * other than `a` in our markup. The goal is to allow users to support passing
+ * in their own components to support use-cases like `react-router` or
+ * `@reach/router`
+ */
+declare const Link: (<E extends React.ElementType = "a">(props: LinkProps<E>) => JSX.Element) & {
+    displayName?: string | undefined;
+    propTypes?: React.WeakValidationMap<LinkProps<any>> | undefined;
+};
+declare const LinkPropTypes: {
+    /**
+     * Provide a custom element or component to render the top-level node for the
+     * component.
+     */
+    as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    /**
+     * The base element to use to build the link. Defaults to `a`, can also accept
+     * alternative tag names or custom components like `Link` from `react-router`.
+     * @deprecated Use `as` instead
+     *
+     */
+    element: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    /**
+     * Property to indicate if the side nav container is open (or not). Use to
+     * keep local state and styling in step with the SideNav expansion state.
+     */
+    isSideNavExpanded: PropTypes.Requireable<boolean>;
+};
+export { LinkPropTypes };
+export default Link;

package/es/components/Link.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import deprecate from '../prop-types/deprecate.js';
+
+// Note: Maybe we should use `as` instead of `element`? `as` appears to be
+// standard and is used in other places in this project.
+
+function LinkRenderFunction(_ref, ref) {
+  let {
+    element,
+    as: BaseComponent,
+    // Captured here to prevent it from being passed into the created element.
+    // See https://github.com/carbon-design-system/carbon/issues/3970
+    isSideNavExpanded: _isSideNavExpanded,
+    ...rest
+  } = _ref;
+  const BaseComponentAsAny = BaseComponent ?? element ?? 'a';
+  return /*#__PURE__*/React.createElement(BaseComponentAsAny, _extends({
+    ref: ref
+  }, rest));
+}
+
+/**
+ * Link is a custom component that allows us to supporting rendering elements
+ * other than `a` in our markup. The goal is to allow users to support passing
+ * in their own components to support use-cases like `react-router` or
+ * `@reach/router`
+ */
+const Link = /*#__PURE__*/forwardRef(LinkRenderFunction);
+const LinkPropTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.elementType,
+  /**
+   * The base element to use to build the link. Defaults to `a`, can also accept
+   * alternative tag names or custom components like `Link` from `react-router`.
+   * @deprecated Use `as` instead
+   *
+   */
+  element: deprecate(PropTypes.elementType, 'The `element` prop for `Link` has been deprecated. Please use `as` ' + 'instead. This will be removed in the next major release.'),
+  /**
+   * Property to indicate if the side nav container is open (or not). Use to
+   * keep local state and styling in step with the SideNav expansion state.
+   */
+  isSideNavExpanded: PropTypes.bool
+};
+Link.displayName = 'Link';
+Link.propTypes = LinkPropTypes;
+
+export { LinkPropTypes, Link as default };

package/es/components/SideNav.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type ComponentProps, type FocusEvent, type KeyboardEvent, type MouseEventHandler } from 'react';
-import { TranslateWithId } from '@carbon/react/lib/types/common';
+import { TranslateWithId } from '../types/common';
 export declare enum SIDE_NAV_TYPE {
     DEFAULT = "default",
     RAIL = "rail",
@@ -31,8 +31,8 @@ export interface SideNavProps extends ComponentProps<'nav'>, TranslateWithId<Tra
     onSideNavBlur?: () => void;
     enterDelayMs?: number;
     inert?: boolean;
-    isCollapsible: boolean;
-    hideOverlay: boolean;
+    isCollapsible?: boolean;
+    hideOverlay?: boolean;
     navType: SIDE_NAV_TYPE;
 }
 interface SideNavContextData {

package/es/components/SideNav.js

@@ -9,16 +9,16 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React, { createContext, useRef, isValidElement, useEffect } from 'react';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '@carbon/react/lib/prop-types/AriaPropTypes';
+import { AriaLabelPropType } from '../prop-types/AriaPropTypes.js';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
-import { usePrefix } from '@carbon/react/lib/internal/usePrefix';
-import * as keys from '@carbon/react/lib/internal/keyboard/keys';
-import { match, matches } from '@carbon/react/lib/internal/keyboard/match';
-import { useMergedRefs } from '@carbon/react/lib/internal/useMergedRefs';
-import { useWindowEvent } from '@carbon/react/lib/internal/useEvent';
-import { useDelayedState } from '@carbon/react/lib/internal/useDelayedState';
+import { usePrefix } from '../internal/usePrefix.js';
+import { ArrowUp, ArrowDown, Home, End, Escape, Tab } from '../internal/keyboard/keys.js';
+import { match, matches } from '../internal/keyboard/match.js';
+import { useMergedRefs } from '../internal/useMergedRefs.js';
+import { useWindowEvent } from '../internal/useEvent.js';
+import { useDelayedState } from '../internal/useDelayedState.js';
 import { breakpoints } from '../node_modules/@carbon/layout/es/index.js';
-import { useMatchMedia } from '@carbon/react/lib/internal/useMatchMedia';
+import { useMatchMedia } from '../internal/useMatchMedia.js';
 import { SideNavToggle } from './SideNavToggle.js';
 import { SidePanelClose, SidePanelOpen } from '../node_modules/@carbon/icons-react/es/generated/bucket-15.js';
 
@@ -179,7 +179,7 @@ function SideNavRenderFunction(_ref, ref) {
       event.stopPropagation();
 
       // stops page from scrolling
-      if (matches(event, [keys.ArrowUp, keys.ArrowDown, keys.Home, keys.End,
+      if (matches(event, [ArrowUp, ArrowDown, Home, End,
       // @ts-ignore - `matches` doesn't like the object syntax without missing properties
       {
         code: 'KeyA'
@@ -188,7 +188,7 @@ function SideNavRenderFunction(_ref, ref) {
       }
       treeWalker.currentNode = event.target.closest(`li`) ?? treeWalker?.currentNode;
       let nextFocusNode = null;
-      if (match(event, keys.ArrowUp)) {
+      if (match(event, ArrowUp)) {
         const parentNode = parentSideNavMenu(treeWalker.currentNode);
         let previousSideNavMenu = parentNode?.previousElementSibling;
 
@@ -209,7 +209,7 @@ function SideNavRenderFunction(_ref, ref) {
           }
         }
       }
-      if (match(event, keys.ArrowDown)) {
+      if (match(event, ArrowDown)) {
         if (treeWalker.currentNode.getAttribute('aria-expanded') == 'false') {
           nextFocusNode = treeWalker.nextSibling();
         } else {
@@ -218,19 +218,19 @@ function SideNavRenderFunction(_ref, ref) {
       }
 
       // Home/End functionality
-      if (matches(event, [keys.Home, keys.End])) {
+      if (matches(event, [Home, End])) {
         if (!sideNavRef?.current) {
           return;
         }
         const allItems = Array.from(sideNavRef.current.querySelectorAll('a, button'));
-        if (match(event, keys.Home)) {
+        if (match(event, Home)) {
           const firstElement = allItems[0];
           if (firstElement) {
             firstElement.tabIndex = 0;
             firstElement?.focus();
           }
         }
-        if (match(event, keys.End)) {
+        if (match(event, End)) {
           const allItems = Array.from(sideNavRef.current.querySelectorAll('li'));
           const lastVisibleItem = allItems.reverse().find(item => getComputedStyle(item).visibility !== 'hidden');
           if (lastVisibleItem) {
@@ -256,7 +256,7 @@ function SideNavRenderFunction(_ref, ref) {
       }
 
       // close menu
-      if (match(event, keys.Escape)) {
+      if (match(event, Escape)) {
         if (expanded && !isFixedNav) {
           if (onSideNavBlur) {
             onSideNavBlur();
@@ -289,7 +289,7 @@ function SideNavRenderFunction(_ref, ref) {
     const focusedElement = document.activeElement;
 
     // going from header menu to sideNav
-    if (match(event, keys.Tab) && expanded && !isFixedNav && sideNavRef?.current && focusedElement?.classList.contains(`${prefix}--header__menu-toggle`) && !focusedElement.closest('nav')) {
+    if (match(event, Tab) && expanded && !isFixedNav && sideNavRef?.current && focusedElement?.classList.contains(`${prefix}--header__menu-toggle`) && !focusedElement.closest('nav')) {
       sideNavRef.current.focus();
     }
   });

package/es/components/SideNavItems.js

@@ -9,7 +9,7 @@ import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
-import { usePrefix } from '@carbon/react/lib/internal/usePrefix';
+import { usePrefix } from '../internal/usePrefix.js';
 
 const SideNavItems = _ref => {
   let {

package/es/components/SideNavMenu.js

@@ -9,12 +9,12 @@ import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
 import React, { useContext, useState, useRef, useEffect } from 'react';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
-import SideNavIcon from '@carbon/react/es/components/UIShell/SideNavIcon';
-import { match } from '@carbon/react/lib/internal/keyboard/match';
-import { usePrefix } from '@carbon/react/lib/internal/usePrefix';
+import { SideNavIcon } from '@carbon/react';
+import { Escape, ArrowLeft, ArrowRight } from '../internal/keyboard/keys.js';
+import { match } from '../internal/keyboard/match.js';
+import { usePrefix } from '../internal/usePrefix.js';
 import { SideNavContext } from './SideNav.js';
-import { useMergedRefs } from '@carbon/react/lib/internal/useMergedRefs';
-import * as keys from '@carbon/react/lib/internal/keyboard/keys';
+import { useMergedRefs } from '../internal/useMergedRefs.js';
 import { ChevronDown } from '../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
 
 var _ChevronDown;
@@ -109,14 +109,14 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     return node;
   }
   function handleKeyDown(event) {
-    if (match(event, keys.Escape)) {
+    if (match(event, Escape)) {
       setIsExpanded(false);
     }
     const node = event.target;
     const isMenu = node.hasAttribute('aria-expanded');
     const isExpanded = node.getAttribute('aria-expanded');
     const parent = parentSideNavMenu(node);
-    if (match(event, keys.ArrowLeft)) {
+    if (match(event, ArrowLeft)) {
       event.stopPropagation();
       if (isMenu) {
         // collapse menu
@@ -139,7 +139,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
         button?.focus();
       }
     }
-    if (match(event, keys.ArrowRight)) {
+    if (match(event, ArrowRight)) {
       event.stopPropagation();
 
       // expand menu

package/es/components/SideNavMenuItem.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ElementType, ComponentProps } from 'react';
-import Link from '@carbon/react/es/components/UIShell/Link';
+import Link from './Link';
 export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
     /**
      * Specify the children to be rendered inside of the `SideNavMenuItem`

package/es/components/SideNavMenuItem.js

@@ -9,10 +9,10 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import cx from '../_virtual/index.js';
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
-import SideNavLinkText from '@carbon/react/es/components/UIShell/SideNavLinkText';
-import Link from '@carbon/react/es/components/UIShell/Link';
-import { usePrefix } from '@carbon/react/lib/internal/usePrefix';
-import { useMergedRefs } from '@carbon/react/lib/internal/useMergedRefs';
+import { SideNavLinkText } from '@carbon/react';
+import Link from './Link.js';
+import { usePrefix } from '../internal/usePrefix.js';
+import { useMergedRefs } from '../internal/useMergedRefs.js';
 
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix();

package/es/components/SideNavToggle.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { SideNavIcon } from '@carbon/react';
-import { usePrefix } from '@carbon/react/lib/internal/usePrefix';
+import { usePrefix } from '../internal/usePrefix.js';
 
 const SideNavToggle = /*#__PURE__*/React.forwardRef(function SideNavToggle(_ref, ref) {
   let {

package/es/internal/environment.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Indicate whether current execution environment can access the DOM.
+ *
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+export const canUseDOM: boolean;

package/es/internal/environment.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Indicate whether current execution environment can access the DOM.
+ *
+ * @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
+ */
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+
+export { canUseDOM };

package/es/internal/keyboard/index.d.ts

@@ -0,0 +1,3 @@
+export * as keys from "./keys";
+export { getNextIndex } from "./navigation";
+export { match, matches, getCharacterFor } from "./match";

package/es/internal/keyboard/keys.d.ts

@@ -0,0 +1,126 @@
+export namespace Tab {
+    let key: string;
+    let which: number;
+    let keyCode: number;
+    let code: string;
+}
+export namespace Enter {
+    let key_1: string;
+    export { key_1 as key };
+    let which_1: number;
+    export { which_1 as which };
+    let keyCode_1: number;
+    export { keyCode_1 as keyCode };
+    let code_1: string;
+    export { code_1 as code };
+}
+export namespace Escape {
+    let key_2: string[];
+    export { key_2 as key };
+    let which_2: number;
+    export { which_2 as which };
+    let keyCode_2: number;
+    export { keyCode_2 as keyCode };
+    let code_2: string;
+    export { code_2 as code };
+}
+export namespace Space {
+    let key_3: string;
+    export { key_3 as key };
+    let which_3: number;
+    export { which_3 as which };
+    let keyCode_3: number;
+    export { keyCode_3 as keyCode };
+    let code_3: string;
+    export { code_3 as code };
+}
+export namespace PageUp {
+    let key_4: string;
+    export { key_4 as key };
+    let which_4: number;
+    export { which_4 as which };
+    let keyCode_4: number;
+    export { keyCode_4 as keyCode };
+    let code_4: string;
+    export { code_4 as code };
+}
+export namespace PageDown {
+    let key_5: string;
+    export { key_5 as key };
+    let which_5: number;
+    export { which_5 as which };
+    let keyCode_5: number;
+    export { keyCode_5 as keyCode };
+    let code_5: string;
+    export { code_5 as code };
+}
+export namespace End {
+    let key_6: string;
+    export { key_6 as key };
+    let which_6: number;
+    export { which_6 as which };
+    let keyCode_6: number;
+    export { keyCode_6 as keyCode };
+    let code_6: string;
+    export { code_6 as code };
+}
+export namespace Home {
+    let key_7: string;
+    export { key_7 as key };
+    let which_7: number;
+    export { which_7 as which };
+    let keyCode_7: number;
+    export { keyCode_7 as keyCode };
+    let code_7: string;
+    export { code_7 as code };
+}
+export namespace ArrowLeft {
+    let key_8: string;
+    export { key_8 as key };
+    let which_8: number;
+    export { which_8 as which };
+    let keyCode_8: number;
+    export { keyCode_8 as keyCode };
+    let code_8: string;
+    export { code_8 as code };
+}
+export namespace ArrowUp {
+    let key_9: string;
+    export { key_9 as key };
+    let which_9: number;
+    export { which_9 as which };
+    let keyCode_9: number;
+    export { keyCode_9 as keyCode };
+    let code_9: string;
+    export { code_9 as code };
+}
+export namespace ArrowRight {
+    let key_10: string;
+    export { key_10 as key };
+    let which_10: number;
+    export { which_10 as which };
+    let keyCode_10: number;
+    export { keyCode_10 as keyCode };
+    let code_10: string;
+    export { code_10 as code };
+}
+export namespace ArrowDown {
+    let key_11: string;
+    export { key_11 as key };
+    let which_11: number;
+    export { which_11 as which };
+    let keyCode_11: number;
+    export { keyCode_11 as keyCode };
+    let code_11: string;
+    export { code_11 as code };
+}
+export namespace Delete {
+    let key_12: string;
+    export { key_12 as key };
+    let which_12: number;
+    export { which_12 as which };
+    let keyCode_12: number;
+    export { keyCode_12 as keyCode };
+    let code_12: string;
+    export { code_12 as code };
+}

package/es/internal/keyboard/keys.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const Tab = {
+  key: 'Tab',
+  which: 9,
+  keyCode: 9,
+  code: 'Tab'
+};
+const Escape = {
+  key: ['Escape',
+  // IE11 Escape
+  'Esc'],
+  which: 27,
+  keyCode: 27,
+  code: 'Esc'
+};
+const End = {
+  key: 'End',
+  which: 35,
+  keyCode: 35,
+  code: 'Numpad1'
+};
+const Home = {
+  key: 'Home',
+  which: 36,
+  keyCode: 36,
+  code: 'Numpad7'
+};
+const ArrowLeft = {
+  key: 'ArrowLeft',
+  which: 37,
+  keyCode: 37,
+  code: 'ArrowLeft'
+};
+const ArrowUp = {
+  key: 'ArrowUp',
+  which: 38,
+  keyCode: 38,
+  code: 'ArrowUp'
+};
+const ArrowRight = {
+  key: 'ArrowRight',
+  which: 39,
+  keyCode: 39,
+  code: 'ArrowRight'
+};
+const ArrowDown = {
+  key: 'ArrowDown',
+  which: 40,
+  keyCode: 40,
+  code: 'ArrowDown'
+};
+
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Escape, Home, Tab };

package/es/internal/keyboard/match.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @typedef Key
+ * @property key {Array<string>|string}
+ * @property which {number}
+ * @property keyCode {number}
+ */
+/**
+ * Check to see if at least one key code matches the key code of the
+ * given event.
+ *
+ * @example
+ * import * as keys from '../keys';
+ * import { matches } from '../match';
+ *
+ * function handleOnKeyDown(event) {
+ *   if (matches(event, [keys.Enter, keys.Space]) {
+ *     // ...
+ *   }
+ * }
+ *
+ * @param {Event|React.SyntheticEvent} event
+ * @param {Array<Key>} keysToMatch
+ * @returns {boolean}
+ */
+export function matches(event: Event | React.SyntheticEvent, keysToMatch: Array<Key>): boolean;
+/**
+ * Check to see if the given key matches the corresponding keyboard event. Also
+ * supports passing in the value directly if you can't used the given event.
+ *
+ * @example
+ * import * as keys from '../keys';
+ * import { matches } from '../match';
+ *
+ * function handleOnKeyDown(event) {
+ *   if (match(event, keys.Enter) {
+ *     // ...
+ *   }
+ * }
+ *
+ * @param {React.SyntheticEvent|Event|number|string} eventOrCode
+ * @param {Key} key
+ * @returns {boolean}
+ */
+export function match(eventOrCode: React.SyntheticEvent | Event | number | string, { key, which, keyCode, code }?: Key): boolean;
+/**
+ * Get a string character for a given event or event code (useful for synthetic
+ * events)
+ *
+ * @param {Event|number} eventOrCode
+ * @returns {string}
+ */
+export function getCharacterFor(eventOrCode: Event | number): string;
+export type Key = {
+    key: Array<string> | string;
+    which: number;
+    keyCode: number;
+};