@procore/core-react 0.0.0-20230808121909

package/dist/MultiSelect/MultiSelect.styles.js

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { StyledSelectArrow, StyledSelectArrowContainer, StyledSelectButton, StyledSelectClearIcon, StyledSelectMenu, } from '../Select/Select.styles';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+import { colors } from '../_styles/colors';
+import { getFocus } from '../_styles/mixins';
+import { spacing } from '../_styles/spacing';
+export var StyledMultiSelectValues = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 2px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  margin-top: 2px;\n  min-width: 0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin-bottom: 2px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  margin-top: 2px;\n  min-width: 0;\n  width: 100%;\n"])), spacing.md, spacing.xs);
+export var StyledMultiSelectToken = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 2px;\n  margin-right: ", "px;\n  margin-top: 2px;\n  flex: 0 1 auto;\n\n  > div {\n    max-width: 178px;\n    width: 100%;\n  }\n"], ["\n  margin-bottom: 2px;\n  margin-right: ", "px;\n  margin-top: 2px;\n  flex: 0 1 auto;\n\n  > div {\n    max-width: 178px;\n    width: 100%;\n  }\n"])), spacing.xs);
+export var StyledMultiSelectSearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  border-width: 0;\n  font-family: inherit;\n  padding: 0;\n  height: 24px;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  &::-ms-clear {\n    display: none;\n  }\n\n  &:focus {\n    box-shadow: none;\n    outline: none;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"], ["\n  background-color: transparent;\n  border-width: 0;\n  font-family: inherit;\n  padding: 0;\n  height: 24px;\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  &::-ms-clear {\n    display: none;\n  }\n\n  &:focus {\n    box-shadow: none;\n    outline: none;\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n"])), getTypographyIntent('body'), function (_a) {
+    var $isNavigatingTokens = _a.$isNavigatingTokens;
+    return $isNavigatingTokens && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      color: transparent;\n    "], ["\n      color: transparent;\n    "])));
+}, colors.gray45);
+export var StyledMultiSelectSearch = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 2px;\n  margin-right: ", "px;\n  margin-top: 2px;\n  flex: 1;\n  max-width: 100%;\n  min-width: 24px;\n"], ["\n  margin-bottom: 2px;\n  margin-right: ", "px;\n  margin-top: 2px;\n  flex: 1;\n  max-width: 100%;\n  min-width: 24px;\n"])), spacing.xs);
+export var StyledMultiSelectSearchIcon = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  align-self: flex-start;\n  display: flex;\n  height: 34px;\n  justify-content: flex-end;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  min-width: 40px;\n  width: 40px;\n"], ["\n  align-items: center;\n  align-self: flex-start;\n  display: flex;\n  height: 34px;\n  justify-content: flex-end;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  min-width: 40px;\n  width: 40px;\n"])), spacing.xs, spacing.md);
+export var StyledMultiSelectClearIcon = StyledSelectClearIcon;
+export var StyledMultiSelectArrowContainer = StyledSelectArrowContainer;
+export var StyledMultiSelectArrow = StyledSelectArrow;
+export var StyledMultiSelectMenu = StyledSelectMenu;
+export var StyledMultiSelectButton = styled(StyledSelectButton)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: auto;\n  padding: 0;\n  white-space: normal;\n\n  &:focus-within {\n    ", "\n  }\n\n  ", "\n"], ["\n  height: auto;\n  padding: 0;\n  white-space: normal;\n\n  &:focus-within {\n    ", "\n  }\n\n  ", "\n"])), getFocus(), function (_a) {
+    var $emptyValue = _a.$emptyValue;
+    return $emptyValue && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      ", " {\n        cursor: pointer;\n      }\n    "], ["\n      ", " {\n        cursor: pointer;\n      }\n    "])), StyledMultiSelectSearchInput);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=MultiSelect.styles.js.map

package/dist/MultiSelect/MultiSelect.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.styles.js","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,0OAAA,gFAIhC,EAAU,uBACT,EAAU,4DAI3B,KALgB,OAAO,CAAC,EAAE,EACT,OAAO,CAAC,EAAE,CAI3B,CAAA;AAED,MAAM,CAAC,IAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,yNAAA,2CAE9B,EAAU,yGAQ3B,KARiB,OAAO,CAAC,EAAE,CAQ3B,CAAA;AAED,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,KAAK,mXAEtD,uIAQE,EAA2B,QAE3B,EAIC,iJAYQ,EAAa,UAEzB,KApBG,mBAAmB,CAAC,MAAM,CAAC,EAE3B,UAAC,EAAuB;QAArB,mBAAmB,yBAAA;IACtB,OAAA,mBAAmB,IACnB,GAAG,sGAAA,mCAEF,IAAA;AAHD,CAGC,EAYQ,MAAM,CAAC,MAAM,CAEzB,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,+LAAA,2CAE/B,EAAU,+EAK3B,KALiB,OAAO,CAAC,EAAE,CAK3B,CAAA;AAED,MAAM,CAAC,IAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,gRAAA,uIAMpC,EAAU,uBACT,EAAU,2CAG3B,KAJgB,OAAO,CAAC,EAAE,EACT,OAAO,CAAC,EAAE,CAG3B,CAAA;AAED,MAAM,CAAC,IAAM,0BAA0B,GAAG,qBAAqB,CAAA;AAE/D,MAAM,CAAC,IAAM,+BAA+B,GAAG,0BAA0B,CAAA;AAEzE,MAAM,CAAC,IAAM,sBAAsB,GAAG,iBAAiB,CAAA;AAEvD,MAAM,CAAC,IAAM,qBAAqB,GAAG,gBAAgB,CAAA;AAErD,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,kBAAkB,CAAC,8KAE/D,sFAMI,EAAU,aAGZ,EAMC,IACJ,KAVK,QAAQ,EAAE,EAGZ,UAAC,EAAe;QAAb,WAAW,iBAAA;IACd,OAAA,WAAW,IACX,GAAG,4HAAA,UACC,EAA4B,6CAG/B,KAHG,4BAA4B,CAG/B;AALD,CAKC,CACJ,CAAA"}

package/dist/MultiSelect/MultiSelect.types.d.ts

@@ -0,0 +1,371 @@
+/// <reference types="react" />
+import { DropdownPlacement } from '../Dropdown/Dropdown.types';
+import { MenuProps, MenuRef, Selection } from '../MenuImperative/MenuImperative.types';
+import { OverlayTriggerProps } from '../OverlayTrigger';
+export declare type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
+export declare type OptionItem = any;
+export interface MultiSelectOptionProps {
+    /**
+     * @since 10.19.0
+     */
+    children?: React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    className?: string;
+    /**
+     * @since 10.19.0
+     */
+    selected?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    suggested?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    value: OptionItem;
+}
+export interface OptionRendererProps extends MultiSelectOptionProps {
+    /**
+     * @since 10.19.0
+     */
+    getId: MultiSelectConfig['getId'];
+    /**
+     * @since 10.19.0
+     */
+    getLabel: MultiSelectConfig['getLabel'];
+    /**
+     * @since 10.19.0
+     */
+    qa: QaTags;
+}
+export interface GroupItem {
+    /**
+     * @since 10.19.0
+     */
+    id: string;
+    /**
+     * @since 10.19.0
+     */
+    label: string;
+}
+export interface GroupHeader extends GroupItem {
+    /**
+     * @since 10.19.0
+     */
+    isGroupHeader: boolean;
+}
+export interface MultiSelectConfig {
+    /**
+     * @since 10.19.0
+     */
+    getGroup: (option: OptionItem) => number | string;
+    /**
+     * @since 10.19.0
+     */
+    getId: (option: OptionItem) => number | string;
+    /**
+     * @since 10.19.0
+     */
+    getLabel: (option: OptionItem) => string;
+    /**
+     * @since 10.19.0
+     */
+    menuRef: React.RefObject<MenuRef>;
+    /**
+     * @since 10.19.0
+     */
+    onChange?: (value: OptionItem[], event?: Event) => void;
+    /**
+     * @since 10.19.0
+     */
+    onSearch?: (e: ChangeEvent) => void;
+    /**
+     * @since 10.19.0
+     */
+    onSelect?: (selection: Selection) => void;
+    /**
+     * @since 10.19.0
+     */
+    optgroups?: GroupItem[];
+    /**
+     * @since 10.19.0
+     */
+    options: OptionItem[];
+    /**
+     * @since 10.19.0
+     */
+    value: OptionItem[];
+}
+export interface MultiSelectHook {
+    /**
+     * @since 10.19.0
+     */
+    ids: Set<number | string>;
+    /**
+     * @since 10.19.0
+     */
+    index: number | null;
+    /**
+     * @since 10.19.0
+     */
+    menuRef: React.RefObject<MenuRef>;
+    /**
+     * @since 10.19.0
+     */
+    options: (OptionItem | GroupHeader)[];
+    /**
+     * @since 10.19.0
+     */
+    search: string;
+    /**
+     * @since 10.19.0
+     */
+    clearToken: () => void;
+    /**
+     * @since 10.19.0
+     */
+    decrementToken: () => void;
+    /**
+     * @since 10.19.0
+     */
+    incrementToken: () => void;
+    /**
+     * @since 10.19.0
+     */
+    onSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * @since 10.19.0
+     */
+    onSelect: (selection: Selection) => void;
+    /**
+     * @since 10.19.0
+     */
+    removeToken: (index: number) => void;
+    /**
+     * @since 10.19.0
+     */
+    domHandlers: {
+        onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    };
+}
+export interface GroupedOptionsProps {
+    /**
+     * @since 10.19.0
+     */
+    multiselect: MultiSelectHook;
+    /**
+     * @since 10.19.0
+     */
+    groupHeaderRenderer: (group: GroupItem) => React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    optionRenderer: (option: OptionItem, props: OptionRendererProps) => React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    getId: MultiSelectConfig['getId'];
+    /**
+     * @since 10.19.0
+     */
+    getLabel: MultiSelectConfig['getLabel'];
+    /**
+     * @since 10.19.0
+     */
+    isOptionDisabled: (option: OptionItem) => boolean;
+    /**
+     * @since 10.19.0
+     */
+    qa: QaTags;
+}
+export interface QaTags {
+    /**
+     * @since 10.19.0
+     */
+    option?: (option: OptionItem) => string;
+    /**
+     * @since 10.19.0
+     */
+    token?: (option: OptionItem) => string;
+    /**
+     * @since 10.19.0
+     */
+    tokenClear?: (option: OptionItem) => string;
+}
+export interface TokenRendererProps {
+    /**
+     * @since 10.19.0
+     */
+    focused: boolean;
+    /**
+     * @since 10.19.0
+     */
+    disabled: boolean;
+    /**
+     * @since 10.19.0
+     */
+    option: OptionItem;
+    /**
+     * @since 10.19.0
+     */
+    removeToken: () => void;
+    /**
+     * @since 10.19.0
+     */
+    getLabel: (opt: OptionItem) => React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    qa: QaTags;
+}
+export interface MultiSelectProps {
+    /**
+     * @since 10.19.0
+     */
+    afterHide?: OverlayTriggerProps['afterHide'];
+    /**
+     * @since 10.19.0
+     */
+    afterShow?: OverlayTriggerProps['afterShow'];
+    /**
+     * @since 10.19.0
+     */
+    beforeHide?: OverlayTriggerProps['beforeHide'];
+    /**
+     * @since 10.19.0
+     */
+    beforeShow?: OverlayTriggerProps['beforeShow'];
+    /**
+     * Callback for each entry in <Code>options</Code> to define relation to
+     * group in <Code>groups</Code>
+     * <CodeBlock>{'(option: OptionItem) => React.ReactNode'}</CodeBlock>
+     * @since 10.19.0
+     */
+    getGroup?: MultiSelectConfig['getGroup'];
+    /**
+     * Callback for each entry in <Code>options</Code> for keying and
+     * optimizations
+     * <CodeBlock>{'(option: OptionItem) => number | string'}</CodeBlock>
+     * @since 10.19.0
+     */
+    getId?: MultiSelectConfig['getId'];
+    /**
+     * Callback for each entry in <Code>options</Code> to generate the token
+     * label.
+     * <CodeBlock>{'(option: OptionItem) => string'}</CodeBlock>
+     * @since 10.19.0
+     */
+    getLabel?: MultiSelectConfig['getLabel'];
+    /**
+     * Callback for when a user types into the multiselect input
+     <CodeBlock>{'(event: KeyboardEvent) => void'}</CodeBlock>
+     * @since 10.19.0
+     */
+    onSearch?: MultiSelectConfig['onSearch'];
+    /**
+     * Array of available option groups
+     */
+    optgroups?: MultiSelectConfig['optgroups'];
+    /**
+     * Array of available options
+     * @since 10.19.0
+     */
+    options?: MultiSelectConfig['options'];
+    /**
+     * @since 10.19.0
+     */
+    onScrollBottom?: MenuProps['onScrollBottom'];
+    /**
+     * @since 10.19.0
+     */
+    block?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    className?: string;
+    /**
+     * @since 10.19.0
+     */
+    disabled?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    isOptionDisabled?: (option: OptionItem) => boolean;
+    /**
+     * @since 10.19.0
+     */
+    emptyMessage?: string;
+    /**
+     * @since 10.19.0
+     */
+    error?: boolean;
+    /**
+     * Callback for rendering header for each entry in <Code>groups</Code>
+     * <CodeBlock>{'(group: GroupItem) => React.ReactNode'}</CodeBlock>
+     * @since 10.19.0
+     */
+    groupHeaderRenderer?: (group: GroupItem) => React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    loading?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    onBlur?: React.SelectHTMLAttributes<HTMLDivElement>['onBlur'];
+    /**
+     * @since 10.19.0
+     */
+    onChange?: (value: OptionItem[], event?: Event) => void;
+    /**
+     * @since 10.19.0
+     */
+    onFocus?: React.SelectHTMLAttributes<HTMLDivElement>['onFocus'];
+    /**
+     * @since 10.19.0
+     */
+    optionRenderer?: (option: OptionItem) => React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    placeholder?: string;
+    /**
+     * @since 10.19.0
+     */
+    placement?: DropdownPlacement;
+    /**
+     * @since 10.19.0
+     */
+    qa?: QaTags;
+    /**
+     * @since 10.19.0
+     */
+    tabIndex?: number;
+    /**
+     * Callback for rendering each selected value
+     * <CodeBlock>
+     *  {'(props: TokenRendererProps) => React.ReactNode'}
+     * </CodeBlock>
+     * @since 10.19.0
+     */
+    tokenRenderer?: (props: TokenRendererProps) => React.ReactNode;
+    /**
+     * Array of the currently selected values
+     * @since 10.19.0
+     */
+    value?: OptionItem[];
+    /**
+     * @since 10.29.0
+     */
+    footer?: React.ReactNode;
+    /**
+     * @since 11.4.0
+     */
+    ['aria-labelledby']?: string;
+}

package/dist/MultiSelect/MultiSelect.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MultiSelect.types.js.map

package/dist/MultiSelect/MultiSelect.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.types.js","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.types.ts"],"names":[],"mappings":""}

package/dist/MultiSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect';
+export { MultiSelectOptionProps, MultiSelectProps } from './MultiSelect.types';

package/dist/MultiSelect/index.js

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect';
+//# sourceMappingURL=index.js.map

package/dist/MultiSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/MultiSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}

package/dist/NextMenu/NextMenu.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NextMenuProps } from './NextMenu.types';
+/**
+ * Count items in groups by id received from getItemGroupId
+ *
+ * @param items_
+ * @param groups_
+ * @param getItemGroupId
+ * @return number[]
+ * */
+export declare const getGroupCounts: (items_: any[], groups_: any[], getItemGroupId: (item: any) => string | number) => number[];
+/**
+ Menus are used in conjunction with components that contain dropdowns.
+ For example, multi select, single select, and dropdown.
+
+ @since 11.1.1
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-nextmenu--with-groups)
+ @see [Design Guidelines](https://design.procore.com/menu)
+ */
+export declare const NextMenu: React.ForwardRefExoticComponent<NextMenuProps<any, any> & React.RefAttributes<React.ReactElement<any, string | React.JSXElementConstructor<any>>>>;
+/**
+ * Flat version of menu list
+ * */
+export declare const NextMenuFlat: React.ForwardRefExoticComponent<NextMenuProps<any, any> & {
+    totalListHeightChanged: (height: number) => void;
+} & React.RefAttributes<React.ReactElement<any, string | React.JSXElementConstructor<any>>>>;
+/**
+ * Grouped version of menu list
+ * Provide getItemGroupId to group items
+ * @see getGroupCounts
+ * */
+export declare const NextMenuGrouped: React.ForwardRefExoticComponent<NextMenuProps<any, any> & {
+    totalListHeightChanged: (height: number) => void;
+} & React.RefAttributes<React.ReactElement<any, string | React.JSXElementConstructor<any>>>>;

package/dist/NextMenu/NextMenu.js

@@ -0,0 +1,100 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { GroupedVirtuoso, Virtuoso } from 'react-virtuoso';
+import { defaultMenuHeight, optionMinHeight, StyledOptions, } from './NextMenu.styles';
+import { NextMenuGroup, NextMenuItem } from './NextMenuItem';
+/**
+ * Count items in groups by id received from getItemGroupId
+ *
+ * @param items_
+ * @param groups_
+ * @param getItemGroupId
+ * @return number[]
+ * */
+export var getGroupCounts = function (items_, groups_, getItemGroupId) {
+    return groups_.map(function (group) {
+        var groupedItems = items_.filter(function (item) { return getItemGroupId(item) === group.id; });
+        return groupedItems.length;
+    });
+};
+/**
+ * Get the height of the item list, used to make menu grow to size of item list
+ * (or to a max height if applied by implementer) with a minimum of 32px
+ * @param height;
+ * @returns number
+ */
+function calculateHeight(height) {
+    return Math.max(height, optionMinHeight);
+}
+var Options = React.forwardRef(function (props, ref) {
+    return React.createElement(StyledOptions, __assign({ ref: ref }, props));
+});
+var flatComponents = { Item: NextMenuItem, List: Options };
+var groupedComponents = {
+    Group: NextMenuGroup,
+    Item: NextMenuItem,
+    List: Options,
+};
+/**
+ Menus are used in conjunction with components that contain dropdowns.
+ For example, multi select, single select, and dropdown.
+
+ @since 11.1.1
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/coverage-nextmenu--with-groups)
+ @see [Design Guidelines](https://design.procore.com/menu)
+ */
+export var NextMenu = React.forwardRef(function (_a, menuRef) {
+    var _b;
+    var style = _a.style, props = __rest(_a, ["style"]);
+    var _c = React.useState(defaultMenuHeight), adjustedHeight = _c[0], setAdjustedHeight = _c[1];
+    var sharedMenuConfiguration = {
+        ref: menuRef,
+        style: __assign({ height: adjustedHeight, minHeight: optionMinHeight }, style),
+        totalListHeightChanged: function (height) {
+            return setAdjustedHeight(calculateHeight(height));
+        },
+    };
+    if (!((_b = props.groups) === null || _b === void 0 ? void 0 : _b.length)) {
+        return React.createElement(NextMenuFlat, __assign({}, sharedMenuConfiguration, props));
+    }
+    return React.createElement(NextMenuGrouped, __assign({}, sharedMenuConfiguration, props));
+});
+/**
+ * Flat version of menu list
+ * */
+export var NextMenuFlat = React.forwardRef(function (_a, menuRef) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.overscan, overscan = _c === void 0 ? 20 : _c, style = _a.style, totalListHeightChanged = _a.totalListHeightChanged, _d = _a.onEndReached, onEndReached = _d === void 0 ? function () { } : _d, _e = _a.components, components = _e === void 0 ? {} : _e, _f = _a.getItemLabel, getItemLabel = _f === void 0 ? function (item) { return item === null || item === void 0 ? void 0 : item.label; } : _f;
+    return (React.createElement(Virtuoso, { ref: menuRef, components: __assign(__assign({}, flatComponents), components), context: { items: items, getItemLabel: getItemLabel }, data: items, overscan: overscan, style: style, totalListHeightChanged: totalListHeightChanged, endReached: onEndReached }));
+});
+/**
+ * Grouped version of menu list
+ * Provide getItemGroupId to group items
+ * @see getGroupCounts
+ * */
+export var NextMenuGrouped = React.forwardRef(function (props, menuRef) {
+    var children = props.children, _a = props.components, components = _a === void 0 ? {} : _a, _b = props.items, items = _b === void 0 ? [] : _b, _c = props.groups, groups = _c === void 0 ? [] : _c, _d = props.getItemGroupId, getItemGroupId = _d === void 0 ? function () { return -1; } : _d, _e = props.overscan, overscan = _e === void 0 ? 20 : _e, onSelect_ = props.onSelect, _f = props.onEndReached, onEndReached_ = _f === void 0 ? function () { } : _f, style = props.style, totalListHeightChanged = props.totalListHeightChanged;
+    var groupCounts = getGroupCounts(items, groups, getItemGroupId);
+    return (React.createElement(GroupedVirtuoso, { ref: menuRef, style: style, components: __assign(__assign({}, groupedComponents), components), context: { items: items }, groupCounts: groupCounts, overscan: overscan, endReached: onEndReached_, totalListHeightChanged: totalListHeightChanged }));
+});
+//# sourceMappingURL=NextMenu.js.map

package/dist/NextMenu/NextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextMenu.js","sourceRoot":"","sources":["../../src/NextMenu/NextMenu.tsx"],"names":[],"mappings":"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"}

package/dist/NextMenu/NextMenu.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const optionMinHeight = 32;
+/** Large enough to fit one group and one item */
+export declare const defaultMenuHeight = 64;
+export declare const StyledOptions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledGroup: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/NextMenu/NextMenu.styles.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { getTypographyIntent, typographyWeights, } from '../Typography/Typography.styles';
+import { spacing } from '../_styles/spacing';
+export var optionMinHeight = 32;
+/** Large enough to fit one group and one item */
+export var defaultMenuHeight = 64;
+export var StyledOptions = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+export var StyledItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  padding: ", "px ", "px;\n  cursor: pointer;\n  list-style-type: none;\n"], ["\n  ", ";\n\n  padding: ", "px ", "px;\n  cursor: pointer;\n  list-style-type: none;\n"])), getTypographyIntent('body'), spacing.xs, spacing.md);
+export var StyledGroup = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n\n  padding: ", "px ", "px ", "px;\n  font-weight: ", ";\n  background: white;\n  list-style-type: none;\n"], ["\n  ", ";\n\n  padding: ", "px ", "px ", "px;\n  font-weight: ", ";\n  background: white;\n  list-style-type: none;\n"])), getTypographyIntent('body'), spacing.md, spacing.md, spacing.xs, typographyWeights.semibold);
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=NextMenu.styles.js.map

package/dist/NextMenu/NextMenu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextMenu.styles.js","sourceRoot":"","sources":["../../src/NextMenu/NextMenu.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EACL,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C,MAAM,CAAC,IAAM,eAAe,GAAG,EAAE,CAAA;AACjC,iDAAiD;AACjD,MAAM,CAAC,IAAM,iBAAiB,GAAG,EAAE,CAAA;AAEnC,MAAM,CAAC,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,qEAAA,EAAE,IAAA,CAAA;AAEzC,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,GAAG,2JAAA,MAChC,EAA2B,kBAElB,EAAU,KAAM,EAAU,qDAGtC,KALG,mBAAmB,CAAC,MAAM,CAAC,EAElB,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,CAGtC,CAAA;AAED,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,0LAAA,MACjC,EAA2B,kBAElB,EAAU,KAAM,EAAU,KAAM,EAAU,sBACtC,EAA0B,qDAG1C,KANG,mBAAmB,CAAC,MAAM,CAAC,EAElB,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,EACtC,iBAAiB,CAAC,QAAQ,CAG1C,CAAA"}