@procore/core-react 10.30.0 → 11.0.0-rc.0

package/dist/Menu/Menu.js

@@ -0,0 +1,278 @@
+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 { useEventListener } from '../_hooks/EventListener';
+import { useI18nContext } from '../_hooks/I18n';
+import { useListNavigation } from '../_hooks/ListNavigation';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { usingHookOrDefault } from '../_utils/usingHookOrDefault';
+import { useOverlayTriggerContext } from '../OverlayTrigger/OverlayTrigger';
+import { Typeahead } from '../Typeahead';
+import { StyledFooter, StyledGroup, StyledHeader, StyledItem, StyledMenu, StyledOptions, StyledSearch, StyledWrapper, } from '../MenuImperative/MenuImperative.styles';
+var onScrollBottomThreshold = 8;
+export var isItem = function (element) { return element.type === Item; };
+function scrollIntoView(index, element) {
+    if (!element.parentElement) {
+        return;
+    }
+    if (index === 0) {
+        element.parentElement.scrollTop = 0;
+        return;
+    }
+    var offsetTop = element.offsetTop, clientHeight = element.clientHeight;
+    var _a = element.parentElement, scrollTop = _a.scrollTop, parentHeight = _a.clientHeight;
+    if (offsetTop < scrollTop) {
+        element.parentElement.scrollTop = offsetTop;
+    }
+    else if (offsetTop + clientHeight > scrollTop + parentHeight) {
+        element.parentElement.scrollTop = offsetTop - parentHeight + clientHeight;
+    }
+}
+function checkBottomScrollPosition(callback) {
+    return function onScroll(e) {
+        if (callback &&
+            e.currentTarget instanceof HTMLElement &&
+            e.currentTarget.scrollTop >=
+                e.currentTarget.scrollHeight -
+                    e.currentTarget.clientHeight -
+                    onScrollBottomThreshold) {
+            callback(e);
+        }
+    };
+}
+function noop() { }
+export function useMenu(_a) {
+    var _b = _a.isSelectable, isSelectable = _b === void 0 ? isItem : _b, externalKeyHandlerRef = _a.keyHandlerRef, _c = _a.multiple, multiple = _c === void 0 ? false : _c, onScrollBottom = _a.onScrollBottom, _d = _a.onSearch, onSearch = _d === void 0 ? noop : _d, _e = _a.onSelect, onSelect = _e === void 0 ? noop : _e, _f = _a.scrollable, scrollable = _f === void 0 ? true : _f;
+    var listNavigation = useListNavigation({
+        circular: !onScrollBottom,
+        initialIndex: 0,
+        size: 0,
+    });
+    var highlighted = React.useRef(null);
+    var keyHandlerRef = externalKeyHandlerRef || React.createRef();
+    var selectItem = React.useCallback(function (selection) {
+        onSelect(selection);
+    }, [onSelect]);
+    var onKeyDown = React.useCallback(function (e) {
+        var key = e.key;
+        if (key === 'ArrowDown' || key === 'Down') {
+            listNavigation.increment();
+            e.preventDefault();
+        }
+        else if (key === 'ArrowUp' || key === 'Up') {
+            listNavigation.decrement();
+            e.preventDefault();
+        }
+        else if (key === 'Enter') {
+            if (highlighted.current) {
+                highlighted.current.click();
+            }
+        }
+    }, [listNavigation]);
+    // TODO - deprecate keyhandlerRef, this is just for backwards compatibility since we already exposed it
+    React.useEffect(function () {
+        var el;
+        if (keyHandlerRef.current) {
+            keyHandlerRef.current.addEventListener('keydown', onKeyDown);
+            el = keyHandlerRef.current;
+        }
+        return function () {
+            if (el) {
+                el.removeEventListener('keydown', onKeyDown);
+            }
+        };
+    }, [keyHandlerRef, onKeyDown]);
+    return {
+        domHandlers: {
+            onKeyDown: function (e) {
+                return onKeyDown(e.nativeEvent);
+            },
+        },
+        highlighted: highlighted,
+        isSelectable: isSelectable,
+        listNavigation: listNavigation,
+        multiple: multiple,
+        onScrollBottom: onScrollBottom,
+        scrollable: scrollable,
+        selectItem: selectItem,
+    };
+}
+export var MenuHookContext = React.createContext(null);
+export function useMenuHookContext() {
+    var context = React.useContext(MenuHookContext);
+    if (context === null) {
+        throw new Error('Cannot find `MenuHook` context, please wrap your component in `<MenuHookContext.Provider>`');
+    }
+    return context;
+}
+/**
+
+ Menus are used in conjunction with components that contain dropdowns.
+ For example, multi select, single select, and dropdown.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-menu--demo)
+
+ @see [Design Guidelines](https://design.procore.com/menu)
+
+ */
+export var Menu_ = React.forwardRef(function Menu(_a, ref) {
+    var children = _a.children, _b = _a.UNSAFE_closesOnSelect, UNSAFE_closesOnSelect = _b === void 0 ? true : _b, _c = _a.isSelectable, isSelectable = _c === void 0 ? isItem : _c, keyHandlerRef = _a.keyHandlerRef, onScrollBottom = _a.onScrollBottom, _d = _a.onSelect, onSelect = _d === void 0 ? noop : _d, _e = _a.scrollable, scrollable = _e === void 0 ? true : _e, usingHook = _a.usingHook, props = __rest(_a, ["children", "UNSAFE_closesOnSelect", "isSelectable", "keyHandlerRef", "onScrollBottom", "onSelect", "scrollable", "usingHook"]);
+    // Don't be tempted to put this in useMenu. In order for hooks to be portable
+    // across the dom tree, they should not contain context consumers.
+    var overlayTriggerContext = useOverlayTriggerContext();
+    var menu = usingHookOrDefault(usingHook, useMenu)({
+        isSelectable: isSelectable,
+        keyHandlerRef: keyHandlerRef,
+        onScrollBottom: onScrollBottom,
+        onSelect: onSelect,
+        scrollable: scrollable,
+    });
+    React.useEffect(function () {
+        // When unmounting, reset the listNavigation index and set
+        // the current highlighted item to null. we only want to run this once,
+        // so don't pass any dependencies
+        return function () {
+            menu.listNavigation.reset();
+            menu.highlighted.current = null;
+        };
+    }, 
+    /* eslint-disable */ [] /* eslint-enable */);
+    function selectItem(selection) {
+        menu.selectItem(selection);
+        if (UNSAFE_closesOnSelect) {
+            overlayTriggerContext.hide(selection.event);
+        }
+    }
+    return (React.createElement(MenuHookContext.Provider, { value: __assign(__assign({}, menu), { selectItem: selectItem }) },
+        React.createElement(StyledWrapper, __assign({}, menu.domHandlers, { ref: ref, tabIndex: 0 }),
+            React.createElement(StyledMenu, __assign({}, props), children))));
+});
+export var Group = React.forwardRef(function Group(_a, ref) {
+    var children = _a.children, _b = _a.clickable, clickable = _b === void 0 ? false : _b, item = _a.item, props = __rest(_a, ["children", "clickable", "item"]);
+    return (React.createElement(StyledGroup, __assign({}, props, { ref: ref, onClick: function (event) {
+            // TODO: implement selecting groups?
+        }, "$clickable": clickable }), children));
+});
+export var Item = React.forwardRef(function Item(_a, ref) {
+    var children = _a.children, _b = _a.index, index = _b === void 0 ? 0 : _b, item = _a.item, _c = _a.onClick, onClick = _c === void 0 ? noop : _c, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.suggested, suggested = _e === void 0 ? false : _e, onMouseMove = _a.onMouseMove, props = __rest(_a, ["children", "index", "item", "onClick", "selected", "suggested", "onMouseMove"]);
+    var _f = useMenuHookContext(), highlighted = _f.highlighted, listNavigation = _f.listNavigation, multiple = _f.multiple, selectItem = _f.selectItem;
+    var itemRef = 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    ref || React.useRef();
+    var isHighlighted = index === listNavigation.index;
+    React.useEffect(function () {
+        // When mounting, check if this item is selected or suggested, and if
+        // it is, then set it as the current index and scroll to it.
+        // We only want to run this once, so don't pass any dependencies
+        if (multiple) {
+            // don't do this behavior in multiple mode
+            return;
+        }
+        if (itemRef.current && (selected || suggested)) {
+            highlighted.current = itemRef.current;
+            listNavigation.set(index);
+        }
+    }, 
+    /* eslint-disable */ [] /* eslint-enable */);
+    React.useEffect(function () {
+        // If this item has become highlighted, scroll to it
+        if (itemRef.current && isHighlighted) {
+            highlighted.current = itemRef.current;
+            scrollIntoView(index, itemRef.current);
+        }
+    }, [highlighted, index, isHighlighted, itemRef]);
+    return (React.createElement(StyledItem, __assign({}, props, { onClick: function (event) {
+            listNavigation.set(index);
+            selectItem({ event: event.nativeEvent, item: item, group: false });
+            onClick(event);
+        }, onMouseMove: function (event) {
+            if (onMouseMove) {
+                onMouseMove(event);
+            }
+            if (listNavigation.index !== index) {
+                listNavigation.set(index);
+            }
+        }, ref: itemRef, "$highlighted": isHighlighted, "$selected": selected }), children));
+});
+export var Options = React.forwardRef(function Options(_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.scrollable, scrollable = _b === void 0 ? true : _b;
+    var _c = useMenuHookContext(), listNavigation = _c.listNavigation, isSelectable = _c.isSelectable, onScrollBottom = _c.onScrollBottom, menuScrollable = _c.scrollable;
+    var optionsRef = ref || React.createRef();
+    var size = React.Children.toArray(children).filter(isSelectable).length;
+    React.useEffect(function () {
+        listNavigation.setSize(size);
+    }, [listNavigation, size]);
+    useEventListener({
+        event: 'scroll',
+        handler: checkBottomScrollPosition(onScrollBottom),
+        scope: optionsRef,
+    });
+    var index = 0;
+    return (React.createElement(StyledOptions, { className: className, ref: optionsRef, "$scrollable": menuScrollable || scrollable }, React.Children.map(children, function (child) {
+        if (React.isValidElement(child) && isSelectable(child)) {
+            var selectableIndex = index;
+            index = index + 1;
+            return React.cloneElement(child, {
+                index: selectableIndex,
+            });
+        }
+        return child;
+    })));
+});
+export var Search = function (_a) {
+    var className = _a.className, _b = _a.i18nScope, i18nScope = _b === void 0 ? 'core.menu' : _b, placeholder = _a.placeholder, _onChange = _a.onChange, props = __rest(_a, ["className", "i18nScope", "placeholder", "onChange"]);
+    var I18n = useI18nContext();
+    var _c = React.useState(''), value = _c[0], setValue = _c[1];
+    var onChange = React.useCallback(function (value, event) {
+        setValue(event.target.value);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(event);
+    }, [_onChange]);
+    return (React.createElement(StyledSearch, { className: className },
+        React.createElement(Typeahead, __assign({}, props, { autoFocus: true, placeholder: placeholder || I18n.t('search', { scope: i18nScope }), onChange: onChange, value: value }))));
+};
+export var Header = React.forwardRef(function Header(_a, ref) {
+    var props = __rest(_a, []);
+    return React.createElement(StyledHeader, __assign({ ref: ref }, props));
+});
+export var Footer = React.forwardRef(function Footer(_a, ref) {
+    var _b = _a.padding, padding = _b === void 0 ? 'md lg' : _b, props = __rest(_a, ["padding"]);
+    return React.createElement(StyledFooter, __assign({ ref: ref, padding: padding }, props));
+});
+Menu_.displayName = 'Menu';
+Footer.displayName = 'Menu.Footer';
+Group.displayName = 'Menu.Group';
+Header.displayName = 'Menu.Header';
+Item.displayName = 'Menu.Item';
+Options.displayName = 'Menu.Options';
+Search.displayName = 'Menu.Search';
+export var Menu = addSubcomponents({
+    Footer: Footer,
+    Group: Group,
+    Header: Header,
+    Item: Item,
+    Options: Options,
+    Search: Search,
+}, Menu_);
+//# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

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

package/dist/Menu/Menu.types.d.ts

@@ -0,0 +1,239 @@
+import { Props } from '../_utils/types';
+import React from 'react';
+import { BoxProps } from '../Box';
+import { ListNavigationApi } from '../_hooks/ListNavigation';
+import { ChangeEvent } from '../_hooks/TextEntry';
+import { SearchHook } from '../Search/Search.types';
+import { TypeaheadProps } from '../Typeahead';
+import { TypeaheadInputProps } from '../Typeahead/Typeahead.types';
+export declare type ElementTypeChecker = (element: any, index?: number, list?: any[]) => boolean;
+export interface MenuSelection {
+    /**
+     * @since 10.19.0
+     */
+    event: Event;
+    /**
+     * @since 10.19.0
+     */
+    group: boolean;
+    /**
+     * @since 10.19.0
+     */
+    item: any;
+}
+export interface MenuNavigationProps extends Props {
+    /**
+     * @since 10.19.0
+     */
+    index?: number;
+    /**
+     * @since 10.19.0
+     */
+    ref?: React.Ref<any>;
+}
+export interface MenuItemProps extends MenuNavigationProps {
+    /**
+     * @since 10.19.0
+     */
+    children?: React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    className?: string;
+    /**
+     * Value which can be passed around various callback functions.
+     * Can be anything!
+     * @since 10.19.0
+     */
+    item?: any;
+    /**
+     * @since 10.19.0
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => any;
+    /**
+     * Is the item selected
+     * @default false
+     * @since 10.19.0
+     */
+    selected?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    suggested?: boolean;
+}
+export interface MenuGroupProps {
+    /**
+     * @since 10.19.0
+     */
+    className?: string;
+    /**
+     * Can the group item be clicked
+     * @since 10.19.0
+     */
+    clickable?: boolean;
+    /**
+     * Value which can be passed around various callback functions.
+     * Can be anything!
+     * @since 10.19.0
+     */
+    item?: any;
+}
+export interface MenuOptionsProps {
+    /**
+     * @since 10.19.0
+     */
+    children?: React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    className?: string;
+    /**
+     * @since 10.19.0
+     */
+    padding?: string;
+    /**
+     * @default true
+     */
+    scrollable?: boolean;
+}
+export interface MenuSearchProps extends Omit<TypeaheadProps, 'onChange'>, TypeaheadInputProps, Props {
+    /**
+     * The i18n key to use for the menu search's configurable strings. Defaults to
+     * using the core library's default strings.
+     * @since 10.19.0
+     */
+    i18nScope?: string;
+    /**
+     * @since 10.21.0
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export interface MenuHeaderProps extends Props {
+    /**
+     * @since 10.19.0
+     */
+    tabIndex?: number;
+}
+export interface MenuFooterProps extends Omit<BoxProps, 'as'> {
+}
+export interface MenuHookConfig {
+    /**
+     * @since 10.19.0
+     */
+    isSelectable?: MenuHook['isSelectable'];
+    /**
+     * @since 10.19.0
+     */
+    keyHandlerRef?: React.RefObject<HTMLElement>;
+    /**
+     * @since 10.19.0
+     */
+    multiple?: boolean;
+    /**
+     * @since 10.19.0
+     */
+    onScrollBottom?: MenuHook['onScrollBottom'];
+    /**
+     * @since 10.19.0
+     */
+    onSearch?: (event: ChangeEvent) => void;
+    /**
+     * @since 10.19.0
+     */
+    onSelect?: MenuHook['selectItem'];
+    /**
+     * @since 10.19.0
+     */
+    scrollable?: MenuHook['scrollable'];
+    /**
+     * @since 10.19.0
+     */
+    usingSearchHook?: SearchHook;
+}
+export interface MenuHook {
+    /**
+     * @since 10.19.0
+     */
+    domHandlers: {
+        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    };
+    /**
+     * @since 10.19.0
+     */
+    highlighted: React.MutableRefObject<HTMLDivElement | null>;
+    /**
+     * @since 10.19.0
+     */
+    isSelectable: ElementTypeChecker;
+    /**
+     * @since 10.19.0
+     */
+    listNavigation: ListNavigationApi;
+    /**
+     * @since 10.19.0
+     */
+    multiple: boolean;
+    /**
+     * @since 10.19.0
+     */
+    onScrollBottom?: (e: Event) => void;
+    /**
+     * @default true
+     */
+    scrollable: boolean;
+    /**
+     * @since 10.19.0
+     */
+    selectItem: (selection: MenuSelection) => void;
+}
+export interface MenuProps extends Props, Omit<MenuOptionsProps, 'padding'> {
+    /**
+     * <CodeBlock>
+     *  (element: any, index?: number, list?: any[]) => boolean
+     * </CodeBlock>
+     *
+     * @deprecated
+     *
+     * The `isSelectable` prop has been deprecated and will be removed in a future version.
+     * Menu item selection is now handled internally and there is no need to configure this
+     * anymore.
+     *
+     * @deprecatedSince 10.20.0
+     * @since 10.19.0
+     */
+    isSelectable?: ElementTypeChecker;
+    /**
+     * Ref object which will get the key handler listeners
+     * @since 10.19.0
+     */
+    keyHandlerRef?: React.RefObject<HTMLElement>;
+    /**
+     * @since 10.19.0
+     */
+    onScrollBottom?: (e: Event) => void;
+    /**
+     * <div>Callback for selecting an item from the menu</div>
+     * <CodeBlock>
+     * {
+     *   '({ event: ReactEvent, item: Menu.Item.props.item, group: bool }) => void'
+     * }
+     * </CodeBlock>
+     * <div>
+     *  <Code>item</Code> will be the <Code>item</Code> prop supplied to the{' '}
+     *  <Code>Item</Code> component
+     *  <br />
+     *  <Code>group</Code> will be <Code>true</Code> if the clicked item was
+     *  a group label
+     * </div>
+     * @since 10.19.0
+     */
+    onSelect?: (selection: MenuSelection) => any;
+    /**
+     * @since 10.19.0
+     */
+    usingHook?: MenuHook;
+    /**
+     * @since 10.19.0
+     */
+    UNSAFE_closesOnSelect?: boolean;
+}

package/dist/Menu/Menu.types.js.map

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

package/dist/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export { MenuNavigationProps, MenuSelection, MenuHook } from './Menu.types';

package/dist/Menu/index.js

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

package/dist/Menu/index.js.map

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

package/dist/MenuImperative/MenuImperative.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { DivAttributes } from '../_utils/types';
+import { CheckboxProps } from '../Checkbox';
+import { DroppableProps, FooterProps, GroupProps, HeaderProps, ItemProps, ItemWithDraggingProps, MenuContext as IMenuContext, MenuProps, MenuRef, MenuSearchProps, OptionsProps, Ref } from './MenuImperative.types';
+export declare function useMergeRef<T = HTMLElement>(externalRef: Ref<T>): readonly [React.MutableRefObject<T | undefined>, (node: any) => void];
+export declare function useMenuContext(): IMenuContext;
+export declare const Group: React.ForwardRefExoticComponent<DivAttributes & GroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Droppable({ id, children }: DroppableProps): JSX.Element;
+export declare namespace Droppable {
+    var displayName: string;
+}
+export declare const Item: React.ForwardRefExoticComponent<(DivAttributes & (ItemProps | ItemWithDraggingProps)) & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxItem: React.ForwardRefExoticComponent<(DivAttributes & (ItemProps | ItemWithDraggingProps) & Omit<CheckboxProps, "checked">) & React.RefAttributes<HTMLDivElement>>;
+export declare const Options: React.ForwardRefExoticComponent<OptionsProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Search: {
+    ({ className, i18nScope, placeholder, onChange: _onChange, ...props }: MenuSearchProps): JSX.Element;
+    displayName: string;
+};
+export declare const Header: React.ForwardRefExoticComponent<DivAttributes & HeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Footer: React.ForwardRefExoticComponent<DivAttributes & FooterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const MenuImperative: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuRef>> & {
+    CheckboxItem: React.ForwardRefExoticComponent<(DivAttributes & (ItemProps | ItemWithDraggingProps) & Omit<CheckboxProps, "checked">) & React.RefAttributes<HTMLDivElement>>;
+    Droppable: typeof Droppable;
+    Footer: React.ForwardRefExoticComponent<DivAttributes & FooterProps & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<DivAttributes & GroupProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<DivAttributes & HeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<(DivAttributes & (ItemProps | ItemWithDraggingProps)) & React.RefAttributes<HTMLDivElement>>;
+    Options: React.ForwardRefExoticComponent<OptionsProps & React.RefAttributes<HTMLDivElement>>;
+    Search: {
+        ({ className, i18nScope, placeholder, onChange: _onChange, ...props }: MenuSearchProps): JSX.Element;
+        displayName: string;
+    };
+};