Add tag builder options (#621)

* Add tag filter

* Add focus helpers

* Cleanup & lint

* Split popup menu into its own component

* Add detail component

* Update search menu to use Detail component

* Add docs and fix issues

* Add menu tests

* lint

* Add lodash to dependencies

* Bump & lint

* Update snapshot

* Update changelog

* Fix version

Author: sean-mckenna

CHANGELOG.md

@@ -57,6 +57,10 @@
 
 - Upgrade dependencies #450
 
+## react-components 5.34.9 (2022-07-28)
+
+- [Menu] Adding Detail, Menu, Menu.Search, and Tag.Search components (by [@krable55](https://github.com/krable55) in [#621](https://github.com/puppetlabs/design-system/pull/621))
+
 ## react-components 5.33.9 (2022-07-28)
 
 - Adding optional tooltip to ButtonSelect component (by [@alex501212](https://github.com/alex501212) in [#591](https://github.com/puppetlabs/design-system/pull/591))

packages/data-grid/src/__test__/__snapshots__/tagBuilder.test.jsx.snap

@@ -36,6 +36,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         type="primary"
       >
         <div
+          class="dg-filter-tag dg-filter-tag-0"
           className="rc-tag rc-tag-primary rc-tag-bold"
         >
           <div
@@ -122,6 +123,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         type="primary"
       >
         <div
+          class="dg-filter-tag dg-filter-tag-1"
           className="rc-tag rc-tag-primary rc-tag-bold"
         >
           <div

packages/design-system-website/styleguide.config.js

@@ -164,6 +164,10 @@ module.exports = {
         '**/toolbar/Actions.js',
         '**/logo/logos.js',
         '**/breadcrumb/BreadcrumbSection.js',
+		'**/tag/Search.js',
+		'**/menu/Arrow.js',
+		'**/menu/Container.js',
+		'**/menu/Trigger.js',
         '**/tooltips/Tooltip.js',
       ],
     },

packages/react-components/package-lock.json

@@ -81,6 +81,7 @@
     "@puppet/sass-variables": "^2.0.0-alpha.3",
     "classnames": "^2.3.1",
     "hoist-non-react-statics": "^3.3.1",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react-modal": "^3.14.3",
     "react-popper": "^2.2.5",

packages/react-components/package.json

@@ -13,6 +13,7 @@ import Columns from './react/library/columns';
 import ConfirmationModal from './react/library/confirmation-modal';
 import Content from './react/library/content';
 import Copy from './react/library/copy';
+import Detail from './react/library/detail';
 import Drawer from './react/library/drawer';
 import Form from './react/library/form';
 import Heading from './react/library/heading';
@@ -57,6 +58,8 @@ export {
   Content,
   Copy,
   Drawer,
+  Detail,
+  Filters,
   Form,
   Heading,
   Icon,

packages/react-components/source/index.js

@@ -0,0 +1,111 @@
+import React, {
+  useEffect,
+  useRef,
+  useContext,
+  useState,
+  useCallback,
+} from 'react';
+import classNames from 'classnames';
+import { RovingFocusContext, getTabIndexId } from './useRovingFocus';
+import MenuContext from '../internal/popup-menus/menu-context';
+import { ENTER_KEY_CODE } from '../constants';
+
+/**
+ * @description HOC that adds roving focus to a component. Meant to be used with the RovingFocusProvider, it wraps the menu item component and adds the necessary props and event handlers to make it focusable, keeping the focus order according to it's visual position on the page.
+ * @param {ReactComponent} WrappedComponent - The React component to wrap. Button, Checkbox, Link, etc.
+ * @note The wrapped component must accept an inputRef prop and forward it to the element that should be focused.
+ * @returns {
+ * RovingFocusContext.Consumer > MenuItemHOC(WrappedComponent)}
+ */
+const asFocusItem = WrappedComponent => {
+  // Wrap the component in a providers that uses the context props
+  const MenuItem = componentProps => {
+    const { closeMenu, closeOnSelect } = useContext(MenuContext);
+    const {
+      currentFocus,
+      setFocus,
+      addTarget,
+      removeTarget,
+      indexes,
+    } = useContext(RovingFocusContext);
+
+    const [ref, setRef] = useState(null);
+    const { current: id } = useRef(getTabIndexId(componentProps));
+    const [position, setPosition] = useState(null);
+    const index = indexes[id];
+    const focus = index === currentFocus;
+
+    const setRefNode = useCallback(
+      node => {
+        setRef(node);
+        if (node) {
+          setPosition(node.getBoundingClientRect());
+        }
+      },
+      [currentFocus, focus],
+    );
+
+    useEffect(() => {
+      const node = { id };
+      // Register the node position on the page
+      if (position) {
+        node.x = position.x;
+        node.y = position.y;
+        addTarget(node);
+      }
+      return () => removeTarget(node);
+    }, [position]);
+
+    useEffect(() => {
+      if (focus && ref) {
+        // Move element into view when it is focused and apply focus styles
+        ref.className = classNames(ref.className, { focus });
+        ref.focus();
+      } else if (!focus && ref) {
+        // Remove focus styles when the element is not focused
+        ref.className = ref.className.replace(' focus', '');
+      }
+    }, [focus]);
+
+    // Wrap the component's onClick handler to also set the focus onClick
+    const handleSelect = (...args) => {
+      const { onClick } = componentProps;
+      setFocus(index);
+      if (onClick) {
+        onClick(...args);
+        if (closeMenu && closeOnSelect) closeMenu();
+      }
+    };
+
+    const handleKeyDown = (...args) => {
+      const [event] = args;
+      setFocus(index);
+
+      const { onClick } = componentProps;
+      if (onClick && event && event.keyCode === ENTER_KEY_CODE) {
+        onClick(...args);
+        if (closeMenu && closeOnSelect) closeMenu();
+      }
+    };
+
+    return (
+      <WrappedComponent
+        {...componentProps}
+        inputRef={setRefNode}
+        onClick={handleSelect}
+        className={classNames(componentProps.className, { focus })}
+        onKeyDown={handleKeyDown}
+        role="menuitem"
+        tabIndex={focus ? 0 : -1}
+      />
+    );
+  };
+
+  MenuItem.displayName = `FocusItem`;
+  MenuItem.defaultProps = {
+    ...WrappedComponent.defaultProps,
+  };
+  return MenuItem;
+};
+
+export default asFocusItem;

packages/react-components/source/react/helpers/asFocusItem.js

@@ -0,0 +1,109 @@
+import { useRef, useState, useEffect } from 'react';
+import { usePopper } from 'react-popper';
+import { uniqueId } from 'lodash';
+
+/**
+ *@description Hook that returns the necessary refs and event handlers to make a popper.js menu component.
+ * @param {popperOptions} param.popperOptions - Options to pass to the popper instance
+ * @link https://popper.js.org/docs/v2/constructors/
+ */
+const useMenu = ({ popperOptions }) => {
+  /** Ref of the menu */
+  const [menuRef, setMenu] = useState(null);
+
+  /** Ref of the trigger (button, select, etc.) */
+  const [triggerRef, setTrigger] = useState(null);
+
+  /** Ref of the optional arrow element */
+  const [arrowRef, setArrowRef] = useState(null);
+
+  const [closeOnSelect, setCloseOnSelect] = useState(true);
+
+  const { current: menuId } = useRef(uniqueId(`menu-`));
+  const { current: menuTriggerId } = useRef(uniqueId(`menu-trigger-`));
+  const { current: menuArrowId } = useRef(uniqueId(`menu-arrow-`));
+
+  const popperModifiers = [
+    {
+      name: 'flip',
+      enabled: true,
+    },
+    {
+      name: 'arrow',
+      enabled: !!arrowRef,
+      options: {
+        element: arrowRef,
+        offset: [0, 6],
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [0, 6],
+      },
+    },
+    {
+      name: 'preventOverflow',
+      options: {
+        rootBoundary: 'document',
+        padding: 0,
+      },
+    },
+  ];
+
+  const { styles, attributes, update } = usePopper(triggerRef, menuRef, {
+    placement: 'bottom-start',
+    modifiers: popperModifiers,
+    strategy: 'absolute',
+    ...popperOptions,
+  });
+
+  // Focus on a node
+  const focusOnNode = node => () => {
+    if (node) node.focus();
+  };
+
+  const focusMenu = focusOnNode(menuRef);
+  const focusTrigger = focusOnNode(triggerRef);
+
+  useEffect(() => {
+    // Update the menu after a click or keydown event to ensure the menu is positioned correctly after the DOM has updated
+    const handleUpdate = () => {
+      if (update) setTimeout(update, 10);
+    };
+
+    document.addEventListener('click', handleUpdate, true);
+    document.addEventListener('keydown', handleUpdate, true);
+    document.addEventListener('scroll', handleUpdate, true);
+    document.addEventListener('resize', handleUpdate, true);
+
+    return () => {
+      document.removeEventListener('click', handleUpdate, true);
+      document.removeEventListener('keydown', handleUpdate, true);
+      document.removeEventListener('scroll', handleUpdate, true);
+      document.removeEventListener('resize', handleUpdate, true);
+    };
+  }, [triggerRef, update]);
+
+  return {
+    menuRef: setMenu,
+    currentMenuRef: menuRef,
+    triggerRef: setTrigger,
+    arrowRef: setArrowRef,
+    focusMenu,
+    focusTrigger,
+    setCloseOnSelect,
+    closeOnSelect,
+    styles,
+    attributes,
+    update,
+    /** Id to be set on menu container. Needed for closing menu on click outside */
+    menuId,
+    /** Id to be set on menu trigger. Needed for aria-controls */
+    menuTriggerId,
+    /** Id to be set on menu arrow. Needed for aria-controls */
+    menuArrowId,
+  };
+};
+
+export default useMenu;