@elliemae/ds-menu 1.60.0 → 2.0.0-alpha.12

package/package.json

@@ -1,14 +1,98 @@
 {
   "name": "@elliemae/ds-menu",
-  "version": "1.60.0",
+  "version": "2.0.0-alpha.12",
   "license": "MIT",
-  "description": "Ellie Mae - Dim Sum - Menu",
-  "module": "esm/index.js",
-  "main": "cjs/index.js",
+  "description": "ICE MT - Dimsum - Menu",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./VirtualMenuList": {
+      "import": "./esm/VirtualMenuList.js",
+      "require": "./cjs/VirtualMenuList.js"
+    },
+    "./utils/useHeightByAmountOfItems": {
+      "import": "./esm/utils/useHeightByAmountOfItems.js",
+      "require": "./cjs/utils/useHeightByAmountOfItems.js"
+    },
+    "./MenuItems/SubMenu": {
+      "import": "./esm/MenuItems/SubMenu.js",
+      "require": "./cjs/MenuItems/SubMenu.js"
+    },
+    "./MenuItems/Separator": {
+      "import": "./esm/MenuItems/Separator.js",
+      "require": "./cjs/MenuItems/Separator.js"
+    },
+    "./MenuItems/SelectionGroup": {
+      "import": "./esm/MenuItems/SelectionGroup.js",
+      "require": "./cjs/MenuItems/SelectionGroup.js"
+    },
+    "./MenuItems/SearchableList": {
+      "import": "./esm/MenuItems/SearchableList.js",
+      "require": "./cjs/MenuItems/SearchableList.js"
+    },
+    "./MenuItems/SearchableGroup": {
+      "import": "./esm/MenuItems/SearchableGroup.js",
+      "require": "./cjs/MenuItems/SearchableGroup.js"
+    },
+    "./MenuItems/RadioGroup": {
+      "import": "./esm/MenuItems/RadioGroup.js",
+      "require": "./cjs/MenuItems/RadioGroup.js"
+    },
+    "./MenuItems/MenuItemRadio": {
+      "import": "./esm/MenuItems/MenuItemRadio.js",
+      "require": "./cjs/MenuItems/MenuItemRadio.js"
+    },
+    "./MenuItems/menuItemFactory": {
+      "import": "./esm/MenuItems/menuItemFactory.js",
+      "require": "./cjs/MenuItems/menuItemFactory.js"
+    },
+    "./MenuItems/MenuItemCheckbox": {
+      "import": "./esm/MenuItems/MenuItemCheckbox.js",
+      "require": "./cjs/MenuItems/MenuItemCheckbox.js"
+    },
+    "./MenuItems/MenuItemCheckable": {
+      "import": "./esm/MenuItems/MenuItemCheckable.js",
+      "require": "./cjs/MenuItems/MenuItemCheckable.js"
+    },
+    "./MenuItems/MenuItem": {
+      "import": "./esm/MenuItems/MenuItem.js",
+      "require": "./cjs/MenuItems/MenuItem.js"
+    },
+    "./MenuItems/CheckboxGroup": {
+      "import": "./esm/MenuItems/CheckboxGroup.js",
+      "require": "./cjs/MenuItems/CheckboxGroup.js"
+    },
+    "./MenuContext": {
+      "import": "./esm/MenuContext.js",
+      "require": "./cjs/MenuContext.js"
+    },
+    "./MenuCombobox": {
+      "import": "./esm/MenuCombobox.js",
+      "require": "./cjs/MenuCombobox.js"
+    },
+    "./Menu": {
+      "import": "./esm/Menu.js",
+      "require": "./cjs/Menu.js"
+    }
+  },
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
   "scripts": {
     "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
     "prebuild": "exit 0",
@@ -16,32 +100,36 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "1.60.0",
-    "@elliemae/ds-classnames": "1.60.0",
-    "@elliemae/ds-form": "1.60.0",
-    "@elliemae/ds-hidden": "1.60.0",
-    "@elliemae/ds-icons": "1.60.0",
-    "@elliemae/ds-popper": "1.60.0",
-    "@elliemae/ds-separator": "1.60.0",
-    "@elliemae/ds-shared": "1.60.0",
-    "@elliemae/ds-truncated-tooltip-text": "1.60.0",
-    "@elliemae/ds-utilities": "1.60.0",
+    "@elliemae/ds-button": "2.0.0-alpha.12",
+    "@elliemae/ds-classnames": "2.0.0-alpha.12",
+    "@elliemae/ds-form": "2.0.0-alpha.12",
+    "@elliemae/ds-hidden": "2.0.0-alpha.12",
+    "@elliemae/ds-icons": "2.0.0-alpha.12",
+    "@elliemae/ds-popper": "2.0.0-alpha.12",
+    "@elliemae/ds-separator": "2.0.0-alpha.12",
+    "@elliemae/ds-shared": "2.0.0-alpha.12",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-alpha.12",
+    "@elliemae/ds-utilities": "2.0.0-alpha.12",
     "prop-types": "~15.7.2",
-    "react-desc": "^4.1.2",
+    "react-desc": "~4.1.3",
     "react-spring": "~8.0.27",
     "react-window": "~1.8.6"
   },
   "devDependencies": {
-    "styled-components": "~5.3.0"
+    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/react": "~12.1.2",
+    "jest-styled-components": "~7.0.6",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
-    "lodash": "^4.17.20",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "styled-components": "^5.3.0"
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/Menu.d.ts

@@ -0,0 +1,28 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+import React from 'react';
+import { renderMenuItems, menuItemFactory } from './MenuItems/menuItemFactory';
+declare const Menu: any;
+declare const DSMenuWithSchema: {
+    (props?: {
+        [x: string]: any;
+        containerProps?: {} | undefined;
+        innerRef: any;
+        as?: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
+            ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+        }> | undefined;
+        children?: undefined;
+        onClickOutside?: (() => void) | undefined;
+        visible?: undefined;
+        focusOnOpen?: boolean | undefined;
+        maxOption?: number | undefined;
+        style?: {} | undefined;
+        minWidth?: undefined;
+        maxWidth?: undefined;
+        closeMenu: any;
+        responsiveHeight?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { Menu, menuItemFactory, renderMenuItems, DSMenuWithSchema };
+export default Menu;

package/types/MenuCombobox.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+declare function MenuCombobox({ dropdownFilterOptions, options, onSelectMenuItem, innerRef, maxOptions, loading, ...rest }: {
+    [x: string]: any;
+    dropdownFilterOptions?: {} | undefined;
+    options?: never[] | undefined;
+    onSelectMenuItem?: (() => null) | undefined;
+    innerRef: any;
+    maxOptions?: number | undefined;
+    loading?: boolean | undefined;
+}): JSX.Element;
+declare namespace MenuCombobox {
+    var propTypes: {
+        /** Options */
+        dropdownFilterOptions: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+        /** The option or menu items to render */
+        options: PropTypes.Requireable<(object | null | undefined)[]>;
+        /** Handler when a menu item is selected */
+        onSelectMenuItem: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Internal ref */
+        innerRef: PropTypes.Requireable<object>;
+        /** Max options to display in the list */
+        maxOptions: PropTypes.Requireable<number>;
+        /** Is loading */
+        loading: PropTypes.Requireable<boolean>;
+    };
+}
+export default MenuCombobox;

package/types/MenuContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.Context<unknown>;
+export default _default;

package/types/MenuItems/CheckboxGroup.d.ts

@@ -0,0 +1,32 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare function CheckboxGroup(props: any): JSX.Element;
+declare namespace CheckboxGroup {
+    var propTypes: {
+        active: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        multi: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        onCheck: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+}
+declare const DSMenuCheckboxGroupWithSchema: {
+    (props?: any): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export default CheckboxGroup;
+export { DSMenuCheckboxGroupWithSchema };

package/types/MenuItems/MenuItem.d.ts

@@ -0,0 +1,79 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare function MenuItem(props: any): JSX.Element;
+declare namespace MenuItem {
+    var propTypes: {
+        /** Renders the MenuItem with a specific html element */
+        as: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /**
+         * reference to the component
+         */
+        innerRef: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** Renders the passed element to the left */
+        leftAddon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** Renders the passed element to the right */
+        rightAddon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** Label for the menu item */
+        label: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** style object for menu item wrapper */
+        style: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** disable menu item */
+        disabled: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** HTML tabindex to manage focus order */
+        tabindex: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** a11y role */
+        role: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+}
+declare const DSMenuItemWithSchema: {
+    (props?: any): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export default MenuItem;
+export { DSMenuItemWithSchema };

package/types/MenuItems/MenuItemCheckable.d.ts

@@ -0,0 +1,86 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+/**
+ * Reuses the same props as the MenuItem
+ *
+ * @param root0
+ * @param root0.role
+ * @param root0.checked
+ * @param root0.name
+ * @param root0.checkIcon
+ * @param root0.children
+ * @param root0.leftAddon
+ * @param root0.item
+ */
+declare function MenuItemCheckable({ role, checked, name, checkIcon, children, leftAddon, item, ...otherProps }: {
+    [x: string]: any;
+    role?: string | undefined;
+    checked?: boolean | undefined;
+    name?: string | undefined;
+    checkIcon?: JSX.Element | undefined;
+    children: any;
+    leftAddon: any;
+    item?: undefined;
+}): JSX.Element;
+declare namespace MenuItemCheckable {
+    var propTypes: {
+        /** Whether the item is checked or not */
+        checked: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** A custom item when the item is checked */
+        checkIcon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** form field name */
+        name: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** menu item object props */
+        item: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** a11y role */
+        role: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** left addon component */
+        leftAddon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+}
+declare const DSMenuItemCheckeableWithSchema: {
+    (props?: {
+        [x: string]: any;
+        role?: string | undefined;
+        checked?: boolean | undefined;
+        name?: string | undefined;
+        checkIcon?: JSX.Element | undefined;
+        children: any;
+        leftAddon: any;
+        item?: undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export default MenuItemCheckable;
+export { DSMenuItemCheckeableWithSchema };

package/types/MenuItems/MenuItemCheckbox.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function MenuItemCheckbox({ checked, ...rest }: {
+    [x: string]: any;
+    checked: any;
+}): JSX.Element;
+export default MenuItemCheckbox;

package/types/MenuItems/MenuItemRadio.d.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare function MenuItemRadio(props: any): JSX.Element;
+declare namespace MenuItemRadio {
+    var propTypes: {
+        /** Whether the item is checked or not */
+        checked: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** A custom item when the item is checked */
+        checkIcon: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+}
+declare const DSMenuItemRadioWithSchema: {
+    (props?: {
+        [x: string]: any;
+        role?: string | undefined;
+        checked?: boolean | undefined;
+        name?: string | undefined;
+        checkIcon?: JSX.Element | undefined;
+        children: any;
+        leftAddon: any;
+        item?: undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export default MenuItemRadio;
+export { DSMenuItemRadioWithSchema };

package/types/MenuItems/RadioGroup.d.ts

@@ -0,0 +1,26 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare function RadioGroup(props: any): JSX.Element;
+declare namespace RadioGroup {
+    var propTypes: {
+        active: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        onCheck: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+}
+declare const DSMenuRadioGroupWithSchema: {
+    (props?: any): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export default RadioGroup;
+export { DSMenuRadioGroupWithSchema };

package/types/MenuItems/SearchableGroup.d.ts

@@ -0,0 +1,18 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare const DSMenuSearchableGroupWithSchema: {
+    (props?: {
+        children: any;
+        amountItemsInWindow?: number | undefined;
+        searchTerm?: string | undefined;
+        noOptionsText?: string | undefined;
+        height: any;
+        width: any;
+        focusOnOpen?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const _default: any;
+export default _default;
+export { DSMenuSearchableGroupWithSchema };

package/types/MenuItems/SearchableList.d.ts

@@ -0,0 +1,106 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare function SearchableList({ onSelectMenuItem, components, searchTerm: searchTermProp, items, dropdownFilterOptions, returnValue, extraListProps, appendTermInList, maxOptions, loading, }: {
+    onSelectMenuItem?: (() => void) | undefined;
+    components?: {} | undefined;
+    searchTerm?: string | undefined;
+    items?: never[] | undefined;
+    dropdownFilterOptions?: {} | undefined;
+    returnValue: any;
+    extraListProps?: {} | undefined;
+    appendTermInList?: boolean | undefined;
+    maxOptions?: number | undefined;
+    loading?: boolean | undefined;
+}): JSX.Element;
+declare namespace SearchableList {
+    var propTypes: {
+        /** callback after item gets selected */
+        onSelectMenuItem: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** Object with custom components for react-select */
+        components: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** search term to filter for */
+        searchTerm: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** item options */
+        items: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** options */
+        dropdownFilterOptions: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** Whether the combo box is has value to return or not */
+        returnValue: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** extra props to pass down to combo */
+        extraListProps: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** append search term as item on the list */
+        appendTermInList: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /** maxoptions for combobox */
+        maxOptions: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        /**  loading flag */
+        loading: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+    };
+}
+declare const DSMenuSearchableListWithSchema: {
+    (props?: {
+        onSelectMenuItem?: (() => void) | undefined;
+        components?: {} | undefined;
+        searchTerm?: string | undefined;
+        items?: never[] | undefined;
+        dropdownFilterOptions?: {} | undefined;
+        returnValue: any;
+        extraListProps?: {} | undefined;
+        appendTermInList?: boolean | undefined;
+        maxOptions?: number | undefined;
+        loading?: boolean | undefined;
+    } | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export default SearchableList;
+export { DSMenuSearchableListWithSchema };