@elliemae/ds-menu-button 3.39.0-rc.1

package/dist/esm/parts/SubMenu.js

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2, { useState, useMemo, useCallback, useContext } from "react";
+import { useKeyboardNavigation, DIRECTIONS } from "@elliemae/ds-hooks-keyboard-navigation";
+import { MenuButtonContext } from "../DSMenuButtonCTX.js";
+import { StyledMenu } from "../styled.js";
+import { ItemFactory } from "./ItemFactory.js";
+const SubMenu = (props) => {
+  const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;
+  const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);
+  const listRef = React2.useRef(null);
+  const rect = referenceElement?.getBoundingClientRect();
+  const [coords, setCoords] = useState({ x: rect?.width ?? 0, y: 0 });
+  React2.useLayoutEffect(() => {
+    const listRect = listRef?.current?.getBoundingClientRect();
+    if (!listRect) return;
+    if (level === 1) {
+      if (listRect.bottom < window.innerHeight) {
+        setCoords({ x: 0, y: rect?.height || 0 });
+      } else {
+        setCoords({ x: 0, y: -listRect.height });
+      }
+      return;
+    }
+    if (listRect.right > window.innerWidth) {
+      setCoords({ x: -(rect?.width || 0), y: 0 });
+    } else {
+      setCoords({ x: rect?.width || 0, y: 0 });
+    }
+  }, [level, rect?.height, rect?.width, referenceElement]);
+  const config = {
+    options: items.filter((item) => item.type !== "separator" && item.type !== "section").map((item) => item.dsId),
+    direction: DIRECTIONS.VERTICAL,
+    focusedOption,
+    setFocusedOption
+  };
+  const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);
+  const { onKeyDown, onBlur } = getWrapperProps();
+  const handleOnMenuKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.stopPropagation();
+      }
+      onKeyDown(event);
+    },
+    [onKeyDown]
+  );
+  const handleOnBlur = useCallback(
+    (e) => {
+      setTimeout(() => {
+        if (!listRef.current?.contains(document.activeElement)) {
+          setShowSubMenu(false);
+        }
+      });
+      onBlur(e);
+    },
+    [onBlur, setShowSubMenu]
+  );
+  console.log(minWidth, "minWidth");
+  const subMenuStyles = useMemo(
+    () => ({
+      position: "absolute",
+      top: coords.y,
+      left: coords.x,
+      zIndex: 1001 + level,
+      minWidth
+    }),
+    [coords, level, minWidth]
+  );
+  if (!referenceElement || !showSubMenu) return null;
+  return /* @__PURE__ */ jsx(
+    StyledMenu,
+    {
+      innerRef: listRef,
+      role: "menu",
+      onKeyDown: handleOnMenuKeyDown,
+      onBlur: handleOnBlur,
+      style: subMenuStyles,
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        ItemFactory,
+        {
+          item,
+          selectionMode,
+          level,
+          parentId,
+          ...getItemProps(item.dsId)
+        },
+        item.dsId
+      ))
+    }
+  );
+};
+export {
+  SubMenu
+};
+//# sourceMappingURL=SubMenu.js.map

package/dist/esm/parts/SubMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SubMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\nimport { useKeyboardNavigation, DIRECTIONS } from '@elliemae/ds-hooks-keyboard-navigation';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\nimport { StyledMenu } from '../styled.js';\nimport { ItemFactory } from './ItemFactory.js';\n\ninterface SubMenuProps {\n  referenceElement: HTMLElement | null;\n  showSubMenu: boolean;\n  selectionMode?: 'single' | 'multiple';\n  setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  parentId?: string;\n  level: number;\n  items: MenuButtonT.Item[];\n  minWidth?: string | number;\n}\n\nexport const SubMenu: React.FC<SubMenuProps> = (props) => {\n  const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;\n  const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const rect = referenceElement?.getBoundingClientRect();\n  const [coords, setCoords] = useState<{ x: number; y: number }>({ x: rect?.width ?? 0, y: 0 });\n\n  // this logic will be part of the new popper custom hook\n  React.useLayoutEffect(() => {\n    const listRect = listRef?.current?.getBoundingClientRect();\n    if (!listRect) return;\n    if (level === 1) {\n      if (listRect.bottom < window.innerHeight) {\n        setCoords({ x: 0, y: rect?.height || 0 });\n      } else {\n        setCoords({ x: 0, y: -listRect.height });\n      }\n      return;\n    }\n    if (listRect.right > window.innerWidth) {\n      setCoords({ x: -(rect?.width || 0), y: 0 });\n    } else {\n      setCoords({ x: rect?.width || 0, y: 0 });\n    }\n  }, [level, rect?.height, rect?.width, referenceElement]);\n\n  const config = {\n    options: items.filter((item) => item.type !== 'separator' && item.type !== 'section').map((item) => item.dsId),\n    direction: DIRECTIONS.VERTICAL,\n    focusedOption,\n    setFocusedOption,\n  };\n\n  const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);\n\n  const { onKeyDown, onBlur } = getWrapperProps();\n\n  const handleOnMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.stopPropagation();\n      }\n      onKeyDown(event);\n    },\n    [onKeyDown],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      setTimeout(() => {\n        if (!listRef.current?.contains(document.activeElement)) {\n          setShowSubMenu(false);\n        }\n      });\n      onBlur(e);\n    },\n    [onBlur, setShowSubMenu],\n  );\n\n  console.log(minWidth, 'minWidth');\n\n  const subMenuStyles = useMemo(\n    () => ({\n      position: 'absolute',\n      top: coords.y,\n      left: coords.x,\n      zIndex: 1001 + level,\n      minWidth,\n    }),\n    [coords, level, minWidth],\n  );\n\n  if (!referenceElement || !showSubMenu) return null;\n\n  return (\n    <StyledMenu\n      innerRef={listRef}\n      role=\"menu\"\n      onKeyDown={handleOnMenuKeyDown}\n      onBlur={handleOnBlur}\n      style={subMenuStyles}\n    >\n      {items.map((item) => (\n        <ItemFactory\n          key={item.dsId}\n          item={item}\n          selectionMode={selectionMode}\n          level={level}\n          parentId={parentId}\n          {...getItemProps(item.dsId)}\n        />\n      ))}\n    </StyledMenu>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+const defaultProps = {
+  selectedKeys: [],
+  onSelectionChange: () => {
+  }
+};
+const DSDMenuButtonPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      dsId: PropTypes.string.isRequired,
+      label: PropTypes.string,
+      type: PropTypes.oneOf(["separator", "section", "single", "multiple", void 0])
+    })
+  ).description("Array of items to be displayed in the dropdown").isRequired,
+  TriggerElement: PropTypes.node.description("Component to be used as the trigger element").isRequired,
+  selectedKeys: PropTypes.arrayOf(PropTypes.string).description("Array of selected keys"),
+  onSelectionChange: PropTypes.func.description("Function to be called when selection changes"),
+  triggerElementProps: PropTypes.object.description("Props to be passed to the trigger element"),
+  selectionMode: PropTypes.oneOf(["single", "multiple"]).description("Selection mode"),
+  menuMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(
+    "Minimum width of the main dropdown"
+  ),
+  ItemRenderer: PropTypes.node.description("Component to be used to render the items")
+};
+const DSDMenuButtonPropTypesSchema = DSDMenuButtonPropTypes;
+export {
+  DSDMenuButtonPropTypes,
+  DSDMenuButtonPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace MenuButtonT {\n  export interface RequiredProps {\n    items: Item[];\n    TriggerElement: React.ComponentType<TriggerElementProps>;\n  }\n\n  export interface DefaultProps {\n    selectedKeys: string[];\n    onSelectionChange: (selectedKeys: string[]) => void;\n  }\n\n  export interface OptionalProps<T extends object = object> {\n    triggerElementProps?: T;\n    selectionMode?: 'single' | 'multiple';\n    menuMinWidth?: string | number;\n    ItemRenderer?: React.ComponentType<{ item: Item; isSelected: boolean }>;\n  }\n\n  export interface Props<T extends object = object>\n    extends Partial<DefaultProps>,\n      OptionalProps<T>,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps<T extends object = object>\n    extends DefaultProps,\n      OptionalProps<T>,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export type Item = {\n    dsId: string;\n    label: string;\n    type?: 'separator' | 'section';\n    childrens?: Item[];\n    subitems: Item[];\n    selectionMode?: 'single' | 'multiple';\n    minWidth?: string;\n  };\n\n  export interface TriggerElementProps {\n    isOpen: boolean;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    attributes: {\n      'aria-haspopup': string;\n      'aria-expanded': boolean;\n    };\n    listeners: {\n      onKeyDown: (e: React.KeyboardEvent) => void;\n    };\n    triggerElementProps?: OptionalProps['triggerElementProps'];\n  }\n}\n\nexport const defaultProps: MenuButtonT.DefaultProps = {\n  selectedKeys: [],\n  onSelectionChange: () => {},\n};\n\nexport const DSDMenuButtonPropTypes: DSPropTypesSchema<MenuButtonT.Props<object>> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(\n    PropTypes.shape({\n      dsId: PropTypes.string.isRequired,\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['separator', 'section', 'single', 'multiple', undefined]),\n    }),\n  ).description('Array of items to be displayed in the dropdown').isRequired,\n  TriggerElement: PropTypes.node.description('Component to be used as the trigger element').isRequired,\n  selectedKeys: PropTypes.arrayOf(PropTypes.string).description('Array of selected keys'),\n  onSelectionChange: PropTypes.func.description('Function to be called when selection changes'),\n  triggerElementProps: PropTypes.object.description('Props to be passed to the trigger element'),\n  selectionMode: PropTypes.oneOf(['single', 'multiple']).description('Selection mode'),\n  menuMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'Minimum width of the main dropdown',\n  ),\n  ItemRenderer: PropTypes.node.description('Component to be used to render the items'),\n};\n\nexport const DSDMenuButtonPropTypesSchema = DSDMenuButtonPropTypes as unknown as WeakValidationMap<\n  MenuButtonT.Props<object>\n>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA6DhE,MAAM,eAAyC;AAAA,EACpD,cAAc,CAAC;AAAA,EACf,mBAAmB,MAAM;AAAA,EAAC;AAC5B;AAEO,MAAM,yBAAuE;AAAA,EAClF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU;AAAA,IACf,UAAU,MAAM;AAAA,MACd,MAAM,UAAU,OAAO;AAAA,MACvB,OAAO,UAAU;AAAA,MACjB,MAAM,UAAU,MAAM,CAAC,aAAa,WAAW,UAAU,YAAY,MAAS,CAAC;AAAA,IACjF,CAAC;AAAA,EACH,EAAE,YAAY,gDAAgD,EAAE;AAAA,EAChE,gBAAgB,UAAU,KAAK,YAAY,6CAA6C,EAAE;AAAA,EAC1F,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,wBAAwB;AAAA,EACtF,mBAAmB,UAAU,KAAK,YAAY,8CAA8C;AAAA,EAC5F,qBAAqB,UAAU,OAAO,YAAY,2CAA2C;AAAA,EAC7F,eAAe,UAAU,MAAM,CAAC,UAAU,UAAU,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnF,cAAc,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IACtE;AAAA,EACF;AAAA,EACA,cAAc,UAAU,KAAK,YAAY,0CAA0C;AACrF;AAEO,MAAM,+BAA+B;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { xStyledCommonProps, styled } from "@elliemae/ds-system";
+const StyledMenuButtonWrapper = styled("div")`
+  position: relative;
+`;
+const StyledMenu = styled("ul")`
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  background-color: white;
+  /* height: 100%; */
+  ${xStyledCommonProps}
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),
+    0 2px 4px rgba(16, 22, 26, 0.2),
+    0 8px 24px rgba(16, 22, 26, 0.2);
+`;
+const StyledMenuItem = styled("li")`
+  position: relative;
+  background-color: white;
+  display: flex;
+  margin: 0;
+  min-height: 32px;
+  width: ${({ isVertical, level }) => !isVertical && level === 0 ? "auto" : "100%"};
+  cursor: pointer;
+
+  ul li {
+    min-width: 200px;
+  }
+
+  &:hover {
+    background-color: brand-200;
+  }
+
+  a:focus {
+    outline: 1px solid brand-500;
+    background-color: brand-200;
+  }
+
+  ${({ isOpen, theme }) => isOpen ? `background-color: ${theme.colors.brand["200"]}` : ""}
+`;
+const StyledMenuItemContent = styled("a")`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  text-decoration: none;
+  color: black;
+  &:focus {
+    outline: none;
+  }
+  ${({ hasChildren }) => hasChildren ? "padding-left: 16px;" : "padding: 0 16px;"}
+  ${xStyledCommonProps}
+`;
+const StyledLeftContent = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 100%;
+`;
+const StyledRightContent = styled("div")`
+  display: flex;
+  align-items: center;
+`;
+const StyledSeparator = styled("hr")`
+  border: 0;
+  border-top: 1px solid #697489;
+  margin: 4px 0px;
+  padding: 0;
+`;
+const StyledSectionLabel = styled("div")`
+  color: neutral-500;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 0 16px;
+  min-height: 24px;
+  justify-content: center;
+`;
+const StyledSection = styled("div")`
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+`;
+export {
+  StyledLeftContent,
+  StyledMenu,
+  StyledMenuButtonWrapper,
+  StyledMenuItem,
+  StyledMenuItemContent,
+  StyledRightContent,
+  StyledSection,
+  StyledSectionLabel,
+  StyledSeparator
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { xStyledCommonProps, styled } from '@elliemae/ds-system';\n\nexport const StyledMenuButtonWrapper = styled('div')`\n  position: relative;\n`;\n\nexport const StyledMenu = styled('ul')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  background-color: white;\n  /* height: 100%; */\n  ${xStyledCommonProps}\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),\n    0 2px 4px rgba(16, 22, 26, 0.2),\n    0 8px 24px rgba(16, 22, 26, 0.2);\n`;\n\nexport const StyledMenuItem = styled('li')<{ isVertical?: boolean; level?: number; isOpen?: boolean }>`\n  position: relative;\n  background-color: white;\n  display: flex;\n  margin: 0;\n  min-height: 32px;\n  width: ${({ isVertical, level }) => (!isVertical && level === 0 ? 'auto' : '100%')};\n  cursor: pointer;\n\n  ul li {\n    min-width: 200px;\n  }\n\n  &:hover {\n    background-color: brand-200;\n  }\n\n  a:focus {\n    outline: 1px solid brand-500;\n    background-color: brand-200;\n  }\n\n  ${({ isOpen, theme }) => (isOpen ? `background-color: ${theme.colors.brand['200']}` : '')}\n`;\n\nexport const StyledMenuItemContent = styled('a')<{ hasChildren?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  text-decoration: none;\n  color: black;\n  &:focus {\n    outline: none;\n  }\n  ${({ hasChildren }) => (hasChildren ? 'padding-left: 16px;' : 'padding: 0 16px;')}\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLeftContent = styled('div')`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n`;\n\nexport const StyledRightContent = styled('div')`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSeparator = styled('hr')`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('div')`\n  color: neutral-500;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 0 16px;\n  min-height: 24px;\n  justify-content: center;\n`;\n\nexport const StyledSection = styled('div')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB,cAAc;AAEpC,MAAM,0BAA0B,OAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,iBAAiB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhF,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAGpF,MAAM,wBAAwB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,gBAAgB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/types/DSMenuButton.d.ts

@@ -0,0 +1,7 @@
+import { type MenuButtonT } from './react-desc-prop-types.js';
+declare const DSMenuButton: {
+    <T extends object = object>(props: MenuButtonT.Props<T>): import("react/jsx-runtime.js").JSX.Element;
+    displayName: string;
+};
+declare const DSMenuButtonWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<MenuButtonT.Props<object>>;
+export { DSMenuButton, DSMenuButtonWithSchema };

package/dist/types/DSMenuButtonCTX.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { MenuButtonT } from './react-desc-prop-types.js';
+interface MenuButtonContextProps<T extends object = object> {
+    focusedOption: string | null;
+    setFocusedOption: React.Dispatch<React.SetStateAction<string | null>>;
+    selectedKeys: string[];
+    onSelectionChange: (selectedKeys: string[], parentId: string, item: MenuButtonT.Item) => void;
+    propsWithDefault: MenuButtonT.InternalProps<T>;
+}
+export declare const MenuButtonContext: React.Context<MenuButtonContextProps<object>>;
+export {};

package/dist/types/config/useMenuButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type MenuButtonT } from '../react-desc-prop-types.js';
+export declare const useDSMenuButton: <T extends object = object>(propsFromUser: MenuButtonT.Props<T>) => {
+    propsWithDefault: MenuButtonT.InternalProps<T>;
+    focusedOption: string | null;
+    setFocusedOption: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    selectedKeys: string[];
+    onSelectionChange: (selectedKeys: string[]) => void;
+};

package/dist/types/config/useValidateProps.d.ts

@@ -0,0 +1,3 @@
+import type { WeakValidationMap } from 'react';
+import { type MenuButtonT } from '../react-desc-prop-types.js';
+export declare const useValidateProps: <T extends object = object>(props: MenuButtonT.InternalProps<T>, propTypes: WeakValidationMap<unknown>) => void;

package/dist/types/constants/index.d.ts

@@ -0,0 +1,5 @@
+export declare const DSMenuButtonName = "DSMenuButton";
+export declare const MENU_BUTTON_SLOTS: {
+    readonly root: "root";
+};
+export declare const MENU_BUTTON_DATATEST_ID: Record<string, string>;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';
+export { type MenuButtonT } from './react-desc-prop-types.js';
+export { DSMenuButtonName, MENU_BUTTON_DATATEST_ID, MENU_BUTTON_SLOTS } from './constants/index.js';

package/dist/types/parts/ItemFactory.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import type { MenuButtonT } from '../react-desc-prop-types.js';
+interface ItemFactoryProps {
+    item: MenuButtonT.Item;
+    level: number;
+    selectionMode?: 'single' | 'multiple';
+    parentId?: string;
+    tabIndex: TypescriptHelpersT.WCAGTabIndex;
+    onFocus: React.FocusEventHandler;
+    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
+}
+export declare const ItemFactory: React.FC<ItemFactoryProps>;
+export {};

package/dist/types/parts/MenuButtonContent.d.ts

@@ -0,0 +1 @@
+export declare const MenuButtonContent: () => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/MenuItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import type { MenuButtonT } from '../react-desc-prop-types.js';
+export declare const MenuItemAddon: React.MemoExoticComponent<({ level, isOpen }: {
+    level: number;
+    isOpen: boolean;
+}) => import("react/jsx-runtime.js").JSX.Element>;
+export declare const MenuItem: ({ innerRef, tabIndex, onFocus, selectionMode, item, level, parentId, isVertical, }: {
+    selectionMode?: 'single' | 'multiple';
+    item: MenuButtonT.Item;
+    level: number;
+    parentId: string | undefined;
+    isVertical?: boolean;
+    tabIndex: number;
+    onFocus: React.FocusEventHandler;
+    innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
+}) => import("react/jsx-runtime.js").JSX.Element;
+export declare const Separator: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const Section: ({ item }: {
+    item: MenuButtonT.Item;
+}) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/SubMenu.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { MenuButtonT } from '../react-desc-prop-types.js';
+interface SubMenuProps {
+    referenceElement: HTMLElement | null;
+    showSubMenu: boolean;
+    selectionMode?: 'single' | 'multiple';
+    setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;
+    parentId?: string;
+    level: number;
+    items: MenuButtonT.Item[];
+    minWidth?: string | number;
+}
+export declare const SubMenu: React.FC<SubMenuProps>;
+export {};

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,51 @@
+import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import type { WeakValidationMap } from 'react';
+export declare namespace MenuButtonT {
+    interface RequiredProps {
+        items: Item[];
+        TriggerElement: React.ComponentType<TriggerElementProps>;
+    }
+    interface DefaultProps {
+        selectedKeys: string[];
+        onSelectionChange: (selectedKeys: string[]) => void;
+    }
+    interface OptionalProps<T extends object = object> {
+        triggerElementProps?: T;
+        selectionMode?: 'single' | 'multiple';
+        menuMinWidth?: string | number;
+        ItemRenderer?: React.ComponentType<{
+            item: Item;
+            isSelected: boolean;
+        }>;
+    }
+    interface Props<T extends object = object> extends Partial<DefaultProps>, OptionalProps<T>, Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>, XstyledProps, RequiredProps {
+    }
+    interface InternalProps<T extends object = object> extends DefaultProps, OptionalProps<T>, Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps<T> | keyof XstyledProps>, XstyledProps, RequiredProps {
+    }
+    type Item = {
+        dsId: string;
+        label: string;
+        type?: 'separator' | 'section';
+        childrens?: Item[];
+        subitems: Item[];
+        selectionMode?: 'single' | 'multiple';
+        minWidth?: string;
+    };
+    interface TriggerElementProps {
+        isOpen: boolean;
+        innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;
+        setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+        attributes: {
+            'aria-haspopup': string;
+            'aria-expanded': boolean;
+        };
+        listeners: {
+            onKeyDown: (e: React.KeyboardEvent) => void;
+        };
+        triggerElementProps?: OptionalProps['triggerElementProps'];
+    }
+}
+export declare const defaultProps: MenuButtonT.DefaultProps;
+export declare const DSDMenuButtonPropTypes: DSPropTypesSchema<MenuButtonT.Props<object>>;
+export declare const DSDMenuButtonPropTypesSchema: WeakValidationMap<MenuButtonT.Props<object>>;

package/dist/types/styled.d.ts

@@ -0,0 +1,15 @@
+export declare const StyledMenuButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledMenu: import("styled-components").StyledComponent<"ul", import("@elliemae/ds-system").Theme, import("@xstyled/styled-components").Props<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").TypographyProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").BackgroundProps & import("@elliemae/ds-system").SpaceProps & import("@elliemae/ds-system").BoxShadowProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").FlexboxesProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").LayoutProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").ColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ul">, never>;
+export declare const StyledMenuItem: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, {
+    isVertical?: boolean | undefined;
+    level?: number | undefined;
+    isOpen?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
+export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, {
+    hasChildren?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"a">, never>;
+export declare const StyledLeftContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledRightContent: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledSeparator: import("styled-components").StyledComponent<"hr", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"hr">, never>;
+export declare const StyledSectionLabel: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledSection: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@elliemae/ds-menu-button",
+  "version": "3.39.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Menu Button",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@xstyled/styled-components": "~3.6.0",
+    "uid": "^2.0.2",
+    "@elliemae/ds-button-v2": "3.39.0-rc.1",
+    "@elliemae/ds-grid": "3.39.0-rc.1",
+    "@elliemae/ds-hooks-keyboard-navigation": "3.39.0-rc.1",
+    "@elliemae/ds-icons": "3.39.0-rc.1",
+    "@elliemae/ds-system": "3.39.0-rc.1",
+    "@elliemae/ds-typescript-helpers": "3.39.0-rc.1",
+    "@elliemae/ds-typography": "3.39.0-rc.1",
+    "@elliemae/ds-props-helpers": "3.39.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "9.0.0-next.50",
+    "@xstyled/system": "3.7.0",
+    "lodash": "^4.17.21",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-monorepo-devops": "3.39.0-rc.1"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
+    "lint": "node ../../../scripts/lint.mjs --fix",
+    "lint:strict": "node ../../../scripts/lint-strict.mjs",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}