Restructure SubMenu & Implement new Light-in-Light mode [LG-4236, LG-…

…4060, LG-3263, LG-3168, LG-3190] (#2380) * create Menu.styles * installs descendants in menu * extract useMenuHeight * init descendants * pass onItemFocus from provider * abstract out useUpdatedChildren * creates useHighlightReducer * cleanup reducer * skip disabled elements * implement descendant in submenu * Update yarn.lock * rm focus-visible styles we always want focus * fix menu item list style * fix ts errors * rm deprecated hooks * rm debug text * restructure test suite * Create blue-crews-hope.md * Updates stories * adds controlled story * modernizes spec file * Update Menu.stories.tsx * Update SplitButton.spec.tsx * update split button pkg.json * Update yarn.lock * Delete getNewIndex.ts * add // prettier-ignore * mv HighlightReducer Update getUpdatedIndex.ts * Update .gitignore * creates AriaLabelPropsWithChildren type * uses AriaLabelPropsWithChildren in InputOption * Create InputOptionContent generated story * InputOptionContent use tokens, extend className * inputOptionThemeStyles use color tokens * Update titleClassName * create & use InputOptionContext * refactor inputOptionStyles * fix inputoption icon placement & sizing * update icon hover styles * Update Avatar props (#2352) * avatar accepts null text * update generated stories * changeset * Update spotty-ghosts-play.md * add turbo to clean (#2361) * pr * Update .gitignore * create Menu.styles * installs descendants in menu * extract useMenuHeight * init descendants * pass onItemFocus from provider * abstract out useUpdatedChildren * creates useHighlightReducer * cleanup reducer * skip disabled elements * implement descendant in submenu * Update yarn.lock * rm focus-visible styles we always want focus * fix menu item list style * fix ts errors * rm deprecated hooks * rm debug text * restructure test suite * Create blue-crews-hope.md * Updates stories * adds controlled story * modernizes spec file * Update Menu.stories.tsx * adds preserveIconSpace. Update unique classnames * create Menu.styles * installs descendants in menu * extract useMenuHeight * init descendants * pass onItemFocus from provider * abstract out useUpdatedChildren * creates useHighlightReducer * cleanup reducer * skip disabled elements * implement descendant in submenu * Update yarn.lock * rm focus-visible styles we always want focus * fix menu item list style * fix ts errors * rm deprecated hooks * rm debug text * restructure test suite * Create blue-crews-hope.md * Updates stories * adds controlled story * modernizes spec file * Update Menu.stories.tsx * Update SplitButton.spec.tsx * update split button pkg.json * Update yarn.lock * Delete getNewIndex.ts * add // prettier-ignore * mv HighlightReducer Update getUpdatedIndex.ts * update icon hover styles * pr * Update package.json * mv content * WIP: implement input option * update component exports * Create big-wasps-fix.md * Create shaggy-cheetahs-ring.md * Update big-wasps-fix.md * implements preserveIconSpace * Renames selected -> checked * creates separate InputOptionContent.stories * Update big-wasps-fix.md * updates menu item stories * Implement active & destructive styles, add stories * wip dark in light mode * update active wedge to border.primary * create DarkInLightMode story * include darkMode in InputOptionContext * fix renderDarkMenu stories * spread args into InitialOpen story * rm old highlight reducer * rm unused descendant vars * rm checked styles * Update big-wasps-fix.md * Create clean-apricots-provide.md * typo * fix bad merge * revert wedge color to blue.base * revert icon height to default * use disabled prop on `Description` * add style changes to changeset * updates text highlight color targeting * revert implementing of Label component * add description to highlight story * Update MenuItem.styles.ts * fix menu item tests * Update InputOption.style.ts * waitForTransition accepts null arg * WIP * add ref to descendant object * add ref to descendant object * rm controls from controlled story * Creates `useTraceUpdate` hook * create stale descendant test * update spec & stories * do not register descendent if it doesn't exist * Adds getDescendants function * add documentation for `getDescendants` * update docs * use getDescendants within Menu * fix stories TS * add popover as dev dep * Update package.json * mv test utils * Update yarn.lock * Update useControlledState.ts * Create SubMenu.stories.tsx * sub menu uses menu item. create useChildrenHeight * adds keydown to close submenu * Update Menu.spec.tsx * add serve & watch scripts * disable active styles when highlighted * update changesets * add tests for AriaLabelPropsWithChildren * update documentation * Update .gitignore * Update README.md * fix nits * add example to useTraceUpdate * rename var * fix testing lib version * PolyRef x null. PolyProps x PropsWithRef * use latest CLI * update Submenu types * Update styles.ts * clean up submenu tests * InternalMenuItemContent - Prevents nested buttons * lgids * test to ensure no nested buttons * Create slimy-walls-cry.md * Update RecursiveRecord.types.ts * scaffold light mode styles * updates menu light-mode styling * updates dark in light mode styles * update submenu indent styles * cleanup highlight styles * fix initial open logic * add destructive styles to dark-in-light * rm size from SB * Update Menu.stories.tsx * adds transition handler tests in submenu * cleanup tests * Adds tests for more complex menu interactions * ensure focus remains on a submenu after opening * add internal flags to descendants utils * add getByIndex/id to descendants pkg * refactor Highlight reducer * Update SubMenu.tsx * pass getDescendants into highlight reducer * Updates Descendant index properties * handle TransitionExiting in submenu * resolves submenu focus bugs * Update yarn.lock * rm comments * fixes generated stories --------- Co-authored-by: Shaneeza <[email protected]>
mongodb · Jun 25, 2024 · 7b28d64 · 7b28d64
1 parent f799a44
commit 7b28d64
Show file tree

Hide file tree

Showing 56 changed files with 1,767 additions and 1,456 deletions.
diff --git a/.changeset/curly-schools-call.md b/.changeset/curly-schools-call.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': patch
+---
+
+Fixes `RecursiveRecord` type
diff --git a/.changeset/rare-coins-raise.md b/.changeset/rare-coins-raise.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/descendants': patch
+---
+
+Updates Descendant index properties after inserting & removing to ensure the index of the Descendant object matches the index within the Descendants list
diff --git a/.changeset/slimy-walls-cry.md b/.changeset/slimy-walls-cry.md
@@ -0,0 +1,12 @@
+---
+'@leafygreen-ui/menu': minor
+---
+
+## Features
+- Clicking a submenu item that _does not_ have a click handler or `href` will toggle the submenu
+- When focused on a submenu item, pressing the left/right arrow keys will close/open the menu (respectively)
+
+## Structural changes
+- Updates Submenu component to use `InputOption`
+- Moves the submenu toggle button to be a sibling of the `InputOption`
+  - this avoids any potential nesting of `button` elements 
diff --git a/.changeset/strange-schools-call.md b/.changeset/strange-schools-call.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/descendants': minor
+---
+
+Adds & exports `getDescendantById` & `getDescendantByIndex` utilities
diff --git a/package.json b/package.json
@@ -29,9 +29,11 @@
     "publish": "yarn changeset publish --public",
     "slackbot": "lg slackbot release",
     "start": "npx storybook dev -p 9001 --no-version-updates",
+    "serve": "npx http-server storybook-static -c5",
     "test": "lg test",
     "unlink": "lg unlink",
-    "validate": "lg validate"
+    "validate": "lg validate",
+    "watch": "npx nodemon --watch packages/ -e tsx,ts --exec 'yarn build-storybook --test'"
   },
   "devDependencies": {
     "@actions/core": "^1.10.1",

diff --git a/packages/descendants/src/DescendantsReducer.ts b/packages/descendants/src/DescendantsReducer.ts
@@ -6,6 +6,7 @@ import {
   findDescendantIndexWithId,
   findDOMIndex,
   insertDescendantAt,
+  refreshDescendantIndexes,
   removeIndex,
 } from './utils/';
 import { Descendant, DescendantsList } from './Descendants.types';
@@ -65,7 +66,7 @@ export const descendantsReducer = <T extends HTMLElement>(
       if (!isElementRegistered) {
         // The element is not yet registered
 
-        // If there are no tracked descendants, then this element is at index 0,
+        // 2. If there are no tracked descendants, then this element is at index 0,
         // Otherwise, check the array of tracked elements to find what index this element should be
         const element = action.ref.current;
         const index = findDOMIndex(element, currentState);
@@ -78,14 +79,15 @@ export const descendantsReducer = <T extends HTMLElement>(
           index,
         };
 
-        // Add the new descendant at the given index
+        // 3. Add the new descendant at the given index
         const newDescendants = insertDescendantAt(
           currentState,
           thisDescendant,
           index,
         );
 
-        return newDescendants;
+        const indexedDescendants = refreshDescendantIndexes(newDescendants);
+        return indexedDescendants;
       }
 
       return currentState;
@@ -121,7 +123,9 @@ export const descendantsReducer = <T extends HTMLElement>(
       if (registeredIndex >= 0) {
         // If an element exists with the given id, remove it
         const newDescendants = removeIndex(currentState, registeredIndex);
-        return newDescendants;
+        const indexedDescendants = refreshDescendantIndexes(newDescendants);
+
+        return indexedDescendants;
       }
 
       // no change

diff --git a/packages/descendants/src/index.ts b/packages/descendants/src/index.ts
@@ -10,3 +10,4 @@ export {
 export { useDescendant } from './useDescendant';
 export { useDescendantsContext } from './useDescendantsContext';
 export { useInitDescendants } from './useInitDescendants';
+export { getDescendantById, getDescendantByIndex } from './utils';
diff --git a/packages/descendants/src/utils/findDOMIndex.ts b/packages/descendants/src/utils/findDOMIndex.ts
@@ -21,6 +21,7 @@ import { isElementPreceding } from './isElementPreceding';
  * findDOMIndex(<C>, descendants) // 2 (since <B> is the closest _tracked_ DOM node preceding <C>)
  * ```
  *
+ * @internal
  */
 export function findDOMIndex<T extends HTMLElement>(
   element: T,

diff --git a/packages/descendants/src/utils/findDescendantIndexWithId.ts b/packages/descendants/src/utils/findDescendantIndexWithId.ts
@@ -5,6 +5,8 @@ import { DescendantsList } from '../Descendants.types';
  * @param descendants
  * @param id
  * @returns The index of a descendant with the given id
+ *
+ * @internal
  */
 export function findDescendantIndexWithId(
   descendants: DescendantsList,

diff --git a/packages/descendants/src/utils/getDescendant.ts b/packages/descendants/src/utils/getDescendant.ts
@@ -0,0 +1,21 @@
+import { Descendant, DescendantsList } from '../Descendants.types';
+
+/**
+ * Returns the Descendant with the provided `id`, or undefined
+ */
+export const getDescendantById = (
+  id: string,
+  descendants: DescendantsList,
+): Descendant | undefined => {
+  return descendants.find(d => d.id === id);
+};
+
+/**
+ * Returns the Descendant at the provided `index`, or undefined
+ */
+export const getDescendantByIndex = (
+  index: number,
+  descendants: DescendantsList,
+): Descendant | undefined => {
+  return descendants[index];
+};
diff --git a/packages/descendants/src/utils/index.ts b/packages/descendants/src/utils/index.ts
@@ -1,5 +1,7 @@
 export { findDescendantIndexWithId } from './findDescendantIndexWithId';
 export { findDOMIndex } from './findDOMIndex';
+export { getDescendantById, getDescendantByIndex } from './getDescendant';
 export { insertDescendantAt } from './insertDescendantAt';
 export { isElementPreceding } from './isElementPreceding';
+export { refreshDescendantIndexes } from './refreshDescendantIndexes';
 export { removeIndex } from './removeIndex';
diff --git a/packages/descendants/src/utils/insertDescendantAt.ts b/packages/descendants/src/utils/insertDescendantAt.ts
@@ -6,6 +6,8 @@ import { Descendant } from '../Descendants.types';
  * @param item The item to insert into the array
  * @param index The index to insert the item at
  * @returns A copy of the array with the item inserted at the specified index
+ *
+ * @internal
  */
 export function insertDescendantAt<T extends HTMLElement>(
   array: Array<Descendant<T>>,

diff --git a/packages/descendants/src/utils/isElementPreceding.ts b/packages/descendants/src/utils/isElementPreceding.ts
@@ -2,7 +2,10 @@
  * Returns whether ElementA precedes ElementAB in the DOM
  *
  * See: https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
- */ export function isElementPreceding(elemA: HTMLElement, elemB: HTMLElement) {
+ *
+ * @internal
+ */
+export function isElementPreceding(elemA: HTMLElement, elemB: HTMLElement) {
   return Boolean(
     elemB.compareDocumentPosition(elemA) & Node.DOCUMENT_POSITION_PRECEDING,
   );

diff --git a/packages/descendants/src/utils/refreshDescendantIndexes.ts b/packages/descendants/src/utils/refreshDescendantIndexes.ts
@@ -0,0 +1,12 @@
+import { DescendantsList } from '../Descendants.types';
+
+/**
+ * Returns a new descendants list with updated indexes.
+ *
+ * Call this after inserting/removing from the descendants list
+ */
+export const refreshDescendantIndexes = <T extends HTMLElement>(
+  descendants: DescendantsList<T>,
+): DescendantsList<T> => {
+  return descendants.map((d, i) => ({ ...d, index: i }));
+};
diff --git a/packages/descendants/src/utils/removeIndex.ts b/packages/descendants/src/utils/removeIndex.ts
@@ -1,3 +1,9 @@
+/**
+ * Removes the given index from an array
+ *
+ * @internal
+ */
+// TODO: Move to `lib`
 export function removeIndex<T extends any>(
   array: Array<T>,
   index: number,

diff --git a/packages/input-option/src/InputOptionContent/InputOptionContent.types.ts b/packages/input-option/src/InputOptionContent/InputOptionContent.types.ts
@@ -22,6 +22,7 @@ export interface InputOptionContentProps extends ComponentProps<'div'> {
   rightGlyph?: React.ReactNode;
 
   /**
+   *
    * Preserves space before the text content for a left glyph.
    *
    * Use in menus where some items may or may not have icons/glyphs,

diff --git a/packages/lib/src/types/RecursiveRecord.types.ts b/packages/lib/src/types/RecursiveRecord.types.ts
@@ -24,11 +24,16 @@
 export type RecursiveRecord<
   Keys extends Array<any>,
   Strict extends boolean = true,
-> = Keys extends [
-  infer Key, // the current union of keys
-  ...infer Rest,
-]
-  ? Strict extends true
-    ? Record<Key & string, RecursiveRecord<Rest, Strict>>
-    : Partial<Record<Key & string, RecursiveRecord<Rest, Strict>>>
-  : Keys;
+> =
+  // If `Keys` is an array with at least 2 indexes
+  Keys extends [
+    infer Key, // the current union of keys
+    ...infer Rest extends [infer _K, ...infer _R], // (`Keys` has at least 2 indexes if 2nd argument can also be inferred)
+  ]
+    ? // If this is strict, then don't use Partial
+      Strict extends true
+      ? Record<Key & string, RecursiveRecord<Rest, Strict>>
+      : Partial<Record<Key & string, RecursiveRecord<Rest, Strict>>>
+    : Keys extends [infer Key] // If Keys has only 1 index
+    ? Key // return that index
+    : never; // otherwise there's an error
diff --git a/packages/menu/package.json b/packages/menu/package.json
@@ -33,6 +33,7 @@
     "@leafygreen-ui/polymorphic": "^2.0.0",
     "@leafygreen-ui/tokens": "^2.9.0",
     "lodash": "^4.17.21",
+    "polished": "^4.3.1",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {

diff --git a/packages/menu/src/HighlightReducer/HighlightReducer.ts b/packages/menu/src/HighlightReducer/HighlightReducer.ts
@@ -0,0 +1,109 @@
+import { type Reducer, useReducer } from 'react';
+
+import {
+  Descendant,
+  DescendantsList,
+  getDescendantById,
+  getDescendantByIndex,
+} from '@leafygreen-ui/descendants';
+
+import { getNextFromDirection } from './utils/getNextFromDirection';
+import { isDescendantsSet } from './utils/isDescendantsSet';
+import type {
+  Direction,
+  HighlightChangeHandler,
+  HighlightReducerFunction,
+  HighlightReducerReturnType,
+  UpdateHighlightAction,
+} from './highlight.types';
+
+const getInitialHighlight = (descendants: DescendantsList<HTMLElement>) =>
+  isDescendantsSet(descendants) ? descendants[0] : undefined;
+
+/**
+ * Creates a new reducer function for closure for a given `descendants` value
+ */
+const makeHighlightReducerFunction =
+  (getDescendants: () => DescendantsList): HighlightReducerFunction =>
+  (currentHighlight, action) => {
+    const descendants = getDescendants();
+
+    // If we've received a direction, move the highlight
+    if (action.direction) {
+      const nextHighlight = getNextFromDirection(
+        action.direction,
+        currentHighlight,
+        descendants,
+      );
+      return nextHighlight || currentHighlight;
+    } else if (action.index) {
+      const nextHighlight = getDescendantByIndex(action.index, descendants);
+      return nextHighlight;
+    } else if (action.id) {
+      const nextHighlight = getDescendantById(action.id, descendants);
+      return nextHighlight;
+    }
+
+    return currentHighlight;
+  };
+
+/**
+ * Custom hook that handles setting the highlighted descendant index,
+ * and fires any `onChange` side effects
+ */
+export const useHighlightReducer = (
+  /** An accessor for the updated descendants list */
+  getDescendants: () => DescendantsList,
+  /** A callback fired when the highlight changes */
+  onChange?: HighlightChangeHandler,
+): HighlightReducerReturnType => {
+  // Create a reducer function
+  const highlightReducerFunction = makeHighlightReducerFunction(getDescendants);
+
+  // Create the reducer
+  const [highlight, dispatch] = useReducer<
+    Reducer<Descendant | undefined, UpdateHighlightAction>
+  >(highlightReducerFunction, getInitialHighlight(getDescendants()));
+
+  /**
+   * Custom dispatch that moves the current highlight
+   * in a given direction
+   *
+   * Fires any side-effects in the `onChange` callback
+   */
+  const moveHighlight = (direction: Direction) => {
+    const updatedHighlight = highlightReducerFunction(highlight, {
+      direction,
+    });
+
+    onChange?.(updatedHighlight);
+    dispatch({ direction });
+  };
+
+  /**
+   * Custom dispatch that sets the current highlight
+   * to a given `index` or `id`.
+   *
+   * Fires any side-effects in the `onChange` callback
+   */
+  const setHighlight = (indexOrId: number | string) => {
+    const action =
+      typeof indexOrId === 'string'
+        ? {
+            id: indexOrId,
+          }
+        : {
+            index: indexOrId,
+          };
+
+    const updatedHighlight = highlightReducerFunction(highlight, action);
+    onChange?.(updatedHighlight);
+    dispatch(action);
+  };
+
+  return {
+    highlight,
+    moveHighlight,
+    setHighlight,
+  };
+};
diff --git a/packages/menu/src/HighlightReducer/highlight.types.ts b/packages/menu/src/HighlightReducer/highlight.types.ts
@@ -0,0 +1,44 @@
+import { Reducer } from 'react';
+
+import { Descendant } from '@leafygreen-ui/descendants';
+
+export type Index = number | undefined;
+const Direction = {
+  Next: 'next',
+  Prev: 'prev',
+  First: 'first',
+  Last: 'last',
+} as const;
+export type Direction = (typeof Direction)[keyof typeof Direction];
+
+export type HighlightChangeHandler = (
+  nextHighlight: Descendant | undefined,
+) => void;
+
+export type UpdateHighlightAction =
+  | {
+      direction: Direction;
+      index?: never;
+      id?: never;
+    }
+  | {
+      index: number;
+      direction?: never;
+      id?: never;
+    }
+  | {
+      id: string;
+      direction?: never;
+      index?: never;
+    };
+
+export type HighlightReducerFunction = Reducer<
+  Descendant | undefined,
+  UpdateHighlightAction
+>;
+
+export interface HighlightReducerReturnType {
+  highlight: Descendant | undefined;
+  moveHighlight: (direction: Direction) => void;
+  setHighlight: (indexOrId: number | string) => void;
+}
diff --git a/packages/menu/src/HighlightReducer/index.ts b/packages/menu/src/HighlightReducer/index.ts
@@ -0,0 +1,2 @@
+export type { Direction, Index } from './highlight.types';
+export { useHighlightReducer } from './HighlightReducer';