@carbon-labs/react-ui-shell 0.25.0 → 0.26.0

package/es/components/SideNavMenu.js

@@ -15,9 +15,11 @@ import { match } from '../internal/keyboard/match.js';
 import { usePrefix } from '../internal/usePrefix.js';
 import { SideNavContext, SIDE_NAV_TYPE } from './SideNav.js';
 import { useMergedRefs } from '../internal/useMergedRefs.js';
+import { SharkFinIcon } from './SharkFinIcon.js';
+import { SideNavFlyoutMenu } from './SideNavFlyoutMenu.js';
 import { ChevronDown } from '../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
 
-var _ChevronDown;
+var _SharkFinIcon, _ChevronDown;
 const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref) {
   let {
     className: customClassName,
@@ -84,6 +86,42 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
     }
     return child;
   });
+
+  /**
+    Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
+    a single element, an array of elements, or null or undefined.
+  **/
+  function hasActiveDescendant(children) {
+    if (Array.isArray(children)) {
+      return children.some(child => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          setActive(false);
+          return false;
+        }
+
+        /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
+        safety when accessing their props.
+        **/
+        const props = child.props;
+        if (props.isActive === true || props['aria-current'] || props.children instanceof Array && hasActiveDescendant(props.children)) {
+          setActive(true);
+          return true;
+        }
+        return false;
+      });
+    }
+
+    // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
+
+    if (/*#__PURE__*/React.isValidElement(children)) {
+      const props = children.props;
+      if (props.isActive === true || props['aria-current']) {
+        setActive(true);
+        return true;
+      }
+    }
+    return false;
+  }
   useEffect(() => {
     if (navType == SIDE_NAV_TYPE.PANEL) {
       // grab first link to redirect if clicked when not expanded
@@ -119,8 +157,9 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       const parent = parentSideNavMenu(node);
       if (match(event, ArrowLeft)) {
         event.stopPropagation();
-        if (isMenu) {
-          // collapse menu
+
+        // collapse menu
+        if (isMenu && sideNavExpanded) {
           if (isExpanded == 'true') {
             setIsExpanded(false);
 
@@ -143,8 +182,8 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       if (match(event, ArrowRight)) {
         event.stopPropagation();
 
-        // expand menu
-        if (isMenu) {
+        // expand menu when sidenav is expanded
+        if (isMenu && sideNavExpanded) {
           setIsExpanded(true);
 
           // if already expanded, focus on first element
@@ -163,7 +202,7 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
   // save expanded state before SideNav collapse
   const [lastExpandedState, setLastExpandedState] = useState(isExpanded);
 
-  // reset when SideNav is panel
+  // reset to opened/collapsed menu state when Panel SideNav is toggled
   useEffect(() => {
     if (navType == SIDE_NAV_TYPE.PANEL && !sideNavExpanded) {
       setLastExpandedState(isExpanded);
@@ -172,42 +211,53 @@ const SideNavMenu = /*#__PURE__*/React.forwardRef(function SideNavMenu(_ref, ref
       setIsExpanded(lastExpandedState);
     }
   }, [sideNavExpanded]);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("li", {
-      role: isTreeview ? 'treeitem' : undefined,
-      "aria-expanded": isExpanded,
-      className: className,
-      ref: listRef,
-      onKeyDown: handleKeyDown
-    }, /*#__PURE__*/React.createElement("button", {
-      "aria-expanded": isExpanded,
-      className: buttonClassName,
-      onClick: () => {
-        // only when sidenav is panel view
-        if (navType == SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
-          window.location.href = firstLink.current;
-        } else {
-          setIsExpanded(!isExpanded);
-          setLastExpandedState(!isExpanded);
-        }
-      },
-      ref: menuRef,
-      type: "button",
-      tabIndex: isTreeview ? -1 : 0
-    }, IconElement && /*#__PURE__*/React.createElement(SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--side-nav__submenu-title`
-    }, title), /*#__PURE__*/React.createElement(SideNavIcon, {
-      className: `${prefix}--side-nav__submenu-chevron`,
-      small: true
-    }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
-      size: 20
-    })))), /*#__PURE__*/React.createElement("ul", {
-      className: `${prefix}--side-nav__menu`,
-      role: "group"
-    }, childrenToRender))
-  );
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const content =
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+  React.createElement("li", {
+    role: isTreeview ? 'treeitem' : undefined,
+    "aria-expanded": isExpanded,
+    className: className,
+    ref: listRef,
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement("button", {
+    "aria-expanded": isExpanded,
+    className: buttonClassName,
+    onClick: () => {
+      // only when sidenav is panel view
+      if (navType == SIDE_NAV_TYPE.PANEL && !isExpanded && firstLink.current && !sideNavExpanded) {
+        setOpenPopover(!openPopover);
+        // window.location.href = firstLink.current;
+      } else {
+        setIsExpanded(!isExpanded);
+        setLastExpandedState(!isExpanded);
+      }
+    },
+    ref: menuRef,
+    type: "button",
+    tabIndex: isTreeview ? -1 : 0
+  }, IconElement && /*#__PURE__*/React.createElement(SideNavIcon, null, /*#__PURE__*/React.createElement(IconElement, null)), !sideNavExpanded && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav--panel-submenu-caret-container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--side-nav--panel-submenu-caret`
+  }, _SharkFinIcon || (_SharkFinIcon = /*#__PURE__*/React.createElement(SharkFinIcon, null)))), /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--side-nav__submenu-title`
+  }, title), /*#__PURE__*/React.createElement(SideNavIcon, {
+    className: `${prefix}--side-nav__submenu-chevron`,
+    small: true
+  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
+    size: 20
+  })))), /*#__PURE__*/React.createElement("ul", {
+    className: `${prefix}--side-nav__menu`,
+    role: "group"
+  }, childrenToRender));
+  return navType == SIDE_NAV_TYPE.PANEL && !sideNavExpanded ? /*#__PURE__*/React.createElement(SideNavFlyoutMenu, {
+    selected: active,
+    className: `${prefix}--side-nav-flyout-menu`,
+    title: title,
+    menuContent: children
+  }, content) : content;
 });
 SideNavMenu.displayName = 'SideNavMenu';
 SideNavMenu.propTypes = {
@@ -249,6 +299,10 @@ SideNavMenu.propTypes = {
    */
   // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   *  The boolean to show the flyout menu has been selected.
+   */
+  selected: PropTypes.bool,
   /**
    * Optional prop to specify the tabIndex of the button. If undefined, it will be applied default validation
    */
@@ -259,37 +313,4 @@ SideNavMenu.propTypes = {
   title: PropTypes.string.isRequired
 };
 
-/**
-Defining the children parameter with the type ReactNode | ReactNode[]. This allows for various possibilities:
-a single element, an array of elements, or null or undefined.
-**/
-function hasActiveDescendant(children) {
-  if (Array.isArray(children)) {
-    return children.some(child => {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return false;
-      }
-
-      /** Explicitly defining the expected prop types (isActive and 'aria-current) for the children to ensure type
-      safety when accessing their props.
-      **/
-      const props = child.props;
-      if (props.isActive === true || props['aria-current'] || props.children instanceof Array && hasActiveDescendant(props.children)) {
-        return true;
-      }
-      return false;
-    });
-  }
-
-  // We use React.isValidElement(child) to check if the child is a valid React element before accessing its props
-
-  if (/*#__PURE__*/React.isValidElement(children)) {
-    const props = children.props;
-    if (props.isActive === true || props['aria-current']) {
-      return true;
-    }
-  }
-  return false;
-}
-
 export { SideNavMenu };

package/es/components/SideNavMenuItem.d.ts

@@ -21,6 +21,10 @@ export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
      * `aria-current="page"`, as well.
      */
     isActive?: boolean;
+    /**
+     * Specify whether the link is part of a "SideNavMenu" in "flyout menu" mode.
+     */
+    isFlyoutMenuItem?: boolean;
     /**
      * Optionally provide an href for the underlying li`
      */

package/es/components/SideNavMenuItem.js

@@ -13,7 +13,9 @@ import { SideNavIcon, SideNavLinkText } from '@carbon/react';
 import Link from './Link.js';
 import { usePrefix } from '../internal/usePrefix.js';
 import { SideNavContext } from './SideNav.js';
+import { Checkmark } from '../node_modules/@carbon/icons-react/es/generated/bucket-3.js';
 
+var _SideNavIcon;
 const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(props, ref) {
   const prefix = usePrefix();
   const {
@@ -21,16 +23,21 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     className: customClassName,
     as: Component = Link,
     isActive,
+    isFlyoutMenuItem,
     renderIcon: IconElement,
     ...rest
   } = props;
   const {
     isTreeview
   } = useContext(SideNavContext);
-  const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
+  const className = cx({
+    [`${prefix}--side-nav__menu-item`]: true,
+    [`${prefix}--side-nav__menu-item--flyout-menu-item`]: isFlyoutMenuItem
+  }, customClassName);
   const linkClassName = cx({
     [`${prefix}--side-nav__link`]: true,
-    [`${prefix}--side-nav__link--current`]: isActive
+    [`${prefix}--side-nav__link--active`]: isActive && isFlyoutMenuItem,
+    [`${prefix}--side-nav__link--current`]: isActive && !isFlyoutMenuItem
   });
   return /*#__PURE__*/React.createElement("li", {
     className: className
@@ -40,9 +47,11 @@ const SideNavMenuItem = /*#__PURE__*/React.forwardRef(function SideNavMenuItem(p
     className: linkClassName,
     tabIndex: isTreeview ? -1 : 0,
     ref: ref
-  }), IconElement && /*#__PURE__*/React.createElement(SideNavIcon, {
+  }), IconElement && !isFlyoutMenuItem && /*#__PURE__*/React.createElement(SideNavIcon, {
     small: true
-  }, /*#__PURE__*/React.createElement(IconElement, null)), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
+  }, /*#__PURE__*/React.createElement(IconElement, null)), isActive && isFlyoutMenuItem && (_SideNavIcon || (_SideNavIcon = /*#__PURE__*/React.createElement(SideNavIcon, {
+    small: true
+  }, /*#__PURE__*/React.createElement(Checkmark, null)))), /*#__PURE__*/React.createElement(SideNavLinkText, null, children)));
 });
 SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNavMenuItem.propTypes = {
@@ -68,6 +77,10 @@ SideNavMenuItem.propTypes = {
    * `aria-current="page"`, as well.
    */
   isActive: PropTypes.bool,
+  /**
+   * Specify whether the link is part of a "SideNavMenu" in "flyout menu" mode.
+   */
+  isFlyoutMenuItem: PropTypes.bool,
   /**
    * Provide an icon to render in the side navigation link. Should be a React class.
    */

package/es/index.d.ts

@@ -14,3 +14,4 @@ export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer';
 export { HeaderPanel } from './components/HeaderPanel';
+export { SharkFinIcon } from './components/SharkFinIcon';

package/es/index.js

@@ -13,3 +13,4 @@ export { SideNavMenu } from './components/SideNavMenu.js';
 export { SideNavMenuItem } from './components/SideNavMenuItem.js';
 export { HeaderContainer } from './components/HeaderContainer.js';
 export { HeaderPanel } from './components/HeaderPanel.js';
+export { SharkFinIcon } from './components/SharkFinIcon.js';

package/es/internal/keyboard/keys.js

@@ -19,6 +19,12 @@ const Tab = {
   keyCode: 9,
   code: 'Tab'
 };
+const Enter = {
+  key: 'Enter',
+  which: 13,
+  keyCode: 13,
+  code: 'Enter'
+};
 const Escape = {
   key: ['Escape',
   // IE11 Escape
@@ -27,6 +33,12 @@ const Escape = {
   keyCode: 27,
   code: 'Esc'
 };
+const Space = {
+  key: ' ',
+  which: 32,
+  keyCode: 32,
+  code: 'Space'
+};
 const End = {
   key: 'End',
   which: 35,
@@ -64,4 +76,4 @@ const ArrowDown = {
   code: 'ArrowDown'
 };
 
-export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Escape, Home, Tab };
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Escape, Home, Space, Tab };

package/es/internal/setupGetInstanceId.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+export default function setupGetInstanceId(): () => number;

package/es/internal/setupGetInstanceId.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+/**
+ * Generic utility to initialize a method that will return a unique instance id
+ * for a component.
+ */
+function setupGetInstanceId() {
+  let instanceId = 0;
+  return function getInstanceId() {
+    return ++instanceId;
+  };
+}
+
+export { setupGetInstanceId as default };

package/es/internal/useId.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+export function useCompatibleId(prefix?: string | undefined): string;
+/**
+ * Generate a unique id if a given `id` is not provided
+ * This is an internal utility, not intended for public usage.
+ * @param {string|undefined} id the provided id
+ * @returns {string}
+ */
+export function useFallbackId(id: string | undefined): string;
+/**
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+export function useId(prefix?: string | undefined): string;

package/es/internal/useId.js

@@ -0,0 +1,100 @@
+/**
+ * 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 React, { useState, useEffect, useLayoutEffect } from 'react';
+import setupGetInstanceId from './setupGetInstanceId.js';
+import { useIdPrefix } from './useIdPrefix.js';
+import { canUseDOM } from './environment.js';
+
+// This file was heavily inspired by:
+//
+// 1. Reach UI and their work on their auto-id package:
+//    https://github.com/reach/reach-ui/blob/86a046f54d53b6420e392b3fa56dd991d9d4e458/packages/auto-id/src/index.ts
+//
+// 2. Floating UI and their work on react >=18 compatibility
+//    https://github.com/floating-ui/floating-ui/blob/%40floating-ui/utils%400.2.5/packages/react/src/hooks/useId.ts
+//
+// The problem that this solves is an id mismatch when auto-generating
+// ids on both the server and the client. When using server-side rendering,
+// there can be the chance of a mismatch between what the server renders and
+// what the client renders when the id value is auto-generated.
+//
+// To get around this, we set the initial value of the `id` to `null` and then
+// conditionally use `useLayoutEffect` on the client and `useEffect` on the
+// server. On the client, `useLayoutEffect` will patch up the id to the correct
+// value. On the server, `useEffect` will not run.
+//
+// This ensures that we won't encounter a mismatch in ids between server and
+// client, at the cost of runtime patching of the id value in
+// `useLayoutEffect`
+//
+// React 18 introduced a new hook called `useId` that takes care of hydration
+// mismatches. If the user is running React 18 or higher, the native hook is
+// used via the `useReactId` function. If the user is running React 17 or
+// lower, `useCompatibleId` is used.
+
+
+// This tricks bundlers so they can't statically analyze this and produce
+// compilation warnings/errors.
+// https://github.com/webpack/webpack/issues/14814
+// https://github.com/mui/material-ui/issues/41190
+const _React = {
+  ...React
+};
+const instanceId = setupGetInstanceId();
+const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+let serverHandoffCompleted = false;
+const defaultId = 'id';
+
+/**
+ * Generate a unique ID for React <=17 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+function useCompatibleId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix();
+  const [id, setId] = useState(() => {
+    if (serverHandoffCompleted) {
+      return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`;
+    }
+    return null;
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (id === null) {
+      setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
+    }
+  }, [instanceId]);
+  useEffect(() => {
+    if (serverHandoffCompleted === false) {
+      serverHandoffCompleted = true;
+    }
+  }, []);
+  return id;
+}
+
+/**
+ * Generate a unique ID for React >=18 with an optional prefix prepended to it.
+ * This is an internal utility, not intended for public usage.
+ * @param {string} [prefix] the optional prefix id
+ * @returns {string}
+ */
+function useReactId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultId;
+  const contextPrefix = useIdPrefix();
+  return `${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${_React.useId()}`;
+}
+
+/**
+ * Uses React 18's built-in `useId()` when available, or falls back to a
+ * slightly less performant (requiring a double render) implementation for
+ * earlier React versions.
+ */
+const useId = _React.useId ? useReactId : useCompatibleId;
+
+export { useCompatibleId, useId };

package/es/internal/useIdPrefix.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.
+ */
+import React from 'react';
+export declare const IdPrefixContext: React.Context<string | null | undefined>;
+/**
+ *
+ */
+export declare function useIdPrefix(): string | null | undefined;

package/es/internal/useIdPrefix.js

@@ -0,0 +1,19 @@
+/**
+ * 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 React from 'react';
+
+const IdPrefixContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ *
+ */
+function useIdPrefix() {
+  return React.useContext(IdPrefixContext);
+}
+
+export { IdPrefixContext, useIdPrefix };

package/es/internal/usePrefix.d.ts

@@ -6,4 +6,9 @@
  */
 import React from 'react';
 export declare const PrefixContext: React.Context<string>;
+/**
+ * An internal function to return the prefix used in components and styles.
+ *
+ * @returns a react context including the prefix
+ */
 export declare function usePrefix(): string;

package/es/internal/usePrefix.js

@@ -16,6 +16,12 @@ import React from 'react';
  */
 
 const PrefixContext = /*#__PURE__*/React.createContext('cds');
+
+/**
+ * An internal function to return the prefix used in components and styles.
+ *
+ * @returns a react context including the prefix
+ */
 function usePrefix() {
   return React.useContext(PrefixContext);
 }

package/lib/components/SharkFinIcon.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 React from 'react';
+export interface SharkFinIconProps {
+    /**
+     * Provide a single icon as the child to `SharkfinIcon` to render in the
+     * container
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Specify whether the icon should be placed in a smaller bounding box
+     * Since the 'small' prop is not provided, we make it optional and set a default value to `false`.
+     */
+    small?: boolean;
+}
+export declare const SharkFinIcon: React.FC<SharkFinIconProps>;

package/lib/components/SharkFinIcon.js

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var index = require('../_virtual/index.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../internal/usePrefix.js');
+
+var _g, _defs;
+const SharkFinIcon = _ref => {
+  let {
+    className: customClassName
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = index.default({
+    [`${prefix}--side-nav__icon`]: true,
+    [`${prefix}--shark-fin__icon`]: true,
+    [customClassName]: !!customClassName
+  });
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    width: "4",
+    height: "4",
+    viewBox: "0 0 4 4",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _g || (_g = /*#__PURE__*/React.createElement("g", {
+    "clip-path": "url(#clip0_519_52879)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M2 2L4 0V4H0L2 2Z"
+  }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_519_52879"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "4",
+    height: "4",
+    fill: "white"
+  })))));
+};
+SharkFinIcon.propTypes = {
+  /**
+   * Provide a single icon as the child to `SharkfinIcon` to render in the
+   * container
+   */
+  children: PropTypes.node,
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * Specify whether the icon should be placed in a smaller bounding box
+   */
+  small: PropTypes.bool
+};
+
+exports.SharkFinIcon = SharkFinIcon;