@procore/core-react 10.26.0 → 10.26.1-rc.2

package/dist/esm/components/DropdownFlyout/DropdownFlyout.helpers.js

@@ -0,0 +1,251 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { ulid } from 'ulid';
+import { rootId, } from './DropdownFlyout.types';
+import { StyledDropdownFlyoutExpandIcon, StyledDropdownFlyoutLabel, } from './DropdownFlyout.styles';
+export function noop() { }
+export function returnFalse() {
+    return false;
+}
+function getFirst(arr) {
+    return arr[0];
+}
+function isRootOption(optionId) {
+    return optionId === rootId;
+}
+export function hasChildren(option) {
+    return Array.isArray(option.children);
+}
+function reducer(state, action) {
+    switch (action.type) {
+        case 'highlight':
+            return __assign(__assign({}, state), { highlighted: action.option });
+        case 'expand':
+            return __assign(__assign({}, state), { highlighted: action.option, expanded: __spreadArray(__spreadArray([], collectParentIds(state.options, action.option.id), true), [
+                    action.option.id,
+                ], false) });
+        case 'collapse':
+            return __assign(__assign({}, state), { highlighted: action.option, expanded: collectParentIds(state.options, action.option.id) });
+        case 'close':
+            return __assign(__assign({}, state), { expanded: [], highlighted: getFirst(state.options), isOpen: false });
+        case 'open':
+            return __assign(__assign({}, state), { isOpen: true });
+        case 'setMouseOver':
+            return __assign(__assign({}, state), { isMouseOver: action.isMouseOver });
+        case 'setFocused':
+            return __assign(__assign({}, state), { isFocused: action.isFocused });
+        default:
+            return state;
+    }
+}
+function findById(options, optionId, initialValue) {
+    if (initialValue === void 0) { initialValue = getFirst(options); }
+    return options.reduce(function (result, current) {
+        if (current.id === optionId) {
+            return current;
+        }
+        if (current.children) {
+            return findById(current.children, optionId, result);
+        }
+        return result;
+    }, initialValue);
+}
+export function transformOption(options, parentId) {
+    return options.reduce(function (acc, option) {
+        var id = ulid();
+        var updatedOption = __assign({ id: id, parentId: parentId, origin: option }, (Array.isArray(option.children) && {
+            children: transformOption(option.children, id),
+        }));
+        return __spreadArray(__spreadArray([], acc, true), [updatedOption], false);
+    }, []);
+}
+function collectParentIds(options, optionId) {
+    var option = findById(options, optionId);
+    if (!isRootOption(option.parentId)) {
+        return __spreadArray(__spreadArray([], collectParentIds(options, option.parentId), true), [option.parentId], false);
+    }
+    return [option.parentId];
+}
+export function useDropdownFlyout(_a) {
+    var flyoutOptions = _a.flyoutOptions, _b = _a.onClick, _onClick = _b === void 0 ? noop : _b, _onKeyDown = _a.onKeyDown;
+    var _c = React.useReducer(reducer, {
+        options: flyoutOptions,
+        expanded: [],
+        highlighted: getFirst(flyoutOptions),
+        isMouseOver: false,
+        isFocused: false,
+        isOpen: false,
+    }), _d = _c[0], options = _d.options, expanded = _d.expanded, highlighted = _d.highlighted, isOpen = _d.isOpen, isMouseOver = _d.isMouseOver, isFocused = _d.isFocused, dispatch = _c[1];
+    var setMouseOver = React.useCallback(function (isMouseOver) { return dispatch({ type: 'setMouseOver', isMouseOver: isMouseOver }); }, []);
+    var setFocused = React.useCallback(function (isFocused) { return dispatch({ type: 'setFocused', isFocused: isFocused }); }, []);
+    var isExpanded = function (option) { return expanded.includes(option.id); };
+    var isHighlighted = function (option) {
+        var parentIds = collectParentIds(options, highlighted.id);
+        var isCorrectId = option.id === highlighted.id || parentIds.some(function (id) { return id === option.id; });
+        return (isMouseOver || isFocused) && isCorrectId;
+    };
+    var findOptionById = React.useCallback(function (id) { return findById(options, id); }, [options]);
+    var expand = React.useCallback(function (option) {
+        return dispatch({
+            type: 'expand',
+            option: option,
+        });
+    }, []);
+    var collapse = React.useCallback(function (option) {
+        return dispatch({
+            type: 'collapse',
+            option: option,
+        });
+    }, []);
+    var highlight = React.useCallback(function (option) {
+        return dispatch({
+            type: 'highlight',
+            option: option,
+        });
+    }, []);
+    var traversingHighlight = React.useCallback(function (item) {
+        var tier = isRootOption(highlighted.parentId)
+            ? options
+            : findOptionById(highlighted.parentId).children || [];
+        var optionIndex = tier.findIndex(function (item) { return item.id === highlighted.id; });
+        switch (item) {
+            case 'next':
+                var nextIndex = optionIndex + 1 >= tier.length ? 0 : optionIndex + 1;
+                highlight(tier[nextIndex]);
+                break;
+            case 'prev':
+                var prevIndex = optionIndex - 1 < 0 ? tier.length - 1 : optionIndex - 1;
+                highlight(tier[prevIndex]);
+                break;
+            case 'children':
+                if (Array.isArray(highlighted.children)) {
+                    expand(highlighted);
+                    highlight(getFirst(highlighted.children));
+                }
+                break;
+            case 'parent':
+                if (!isRootOption(highlighted.parentId)) {
+                    var parentOption = findOptionById(highlighted.parentId);
+                    collapse(parentOption);
+                }
+                break;
+            default:
+                return;
+        }
+    }, [options, findOptionById, collapse, highlighted, expand, highlight]);
+    var closeDropdown = React.useCallback(function () {
+        dispatch({ type: 'close' });
+    }, []);
+    var openDropdown = React.useCallback(function () {
+        dispatch({ type: 'open' });
+    }, []);
+    var onClick = React.useCallback(function (option) {
+        if (!hasChildren(option.origin)) {
+            _onClick(option.origin);
+            closeDropdown();
+        }
+    }, [_onClick, closeDropdown]);
+    var onKeyDown = React.useCallback(function (e) {
+        var key = e.key;
+        switch (key) {
+            case 'Enter':
+                e.preventDefault();
+                if (!isOpen && isFocused) {
+                    openDropdown();
+                }
+                else {
+                    if (hasChildren(highlighted.origin)) {
+                        traversingHighlight('children');
+                    }
+                    else {
+                        onClick(highlighted);
+                    }
+                }
+                break;
+            case 'Escape':
+            case 'Esc':
+                e.preventDefault();
+                if (isRootOption(highlighted.parentId)) {
+                    closeDropdown();
+                }
+                else {
+                    traversingHighlight('parent');
+                }
+                break;
+            case 'ArrowDown':
+            case 'Down':
+                e.preventDefault();
+                traversingHighlight('next');
+                break;
+            case 'ArrowUp':
+            case 'Up':
+                e.preventDefault();
+                traversingHighlight('prev');
+                break;
+        }
+        _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
+    }, [
+        closeDropdown,
+        openDropdown,
+        traversingHighlight,
+        highlighted,
+        isOpen,
+        isFocused,
+        onClick,
+        _onKeyDown,
+    ]);
+    return {
+        isFocused: isFocused,
+        isMouseOver: isMouseOver,
+        isOpen: isOpen,
+        options: options,
+        expanded: expanded,
+        highlighted: highlighted,
+        expand: expand,
+        collapse: collapse,
+        isHighlighted: isHighlighted,
+        isExpanded: isExpanded,
+        closeDropdown: closeDropdown,
+        openDropdown: openDropdown,
+        onKeyDown: onKeyDown,
+        onClick: onClick,
+        setMouseOver: setMouseOver,
+        setFocused: setFocused,
+    };
+}
+export function defaultOptionRenderer(option) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledDropdownFlyoutLabel, null, option.label),
+        hasChildren(option) && (React.createElement(StyledDropdownFlyoutExpandIcon, { "data-qa": "core-dropdown-flyout-option-expand-icon" }))));
+}
+export var DropdownFlyoutContext = React.createContext({
+    onClick: noop,
+    expand: noop,
+    collapse: noop,
+    optionRenderer: defaultOptionRenderer,
+    isExpanded: returnFalse,
+    isHighlighted: returnFalse,
+});
+export var useDropdownFlyoutContext = function () {
+    return React.useContext(DropdownFlyoutContext);
+};
+//# sourceMappingURL=DropdownFlyout.helpers.js.map

package/dist/esm/components/DropdownFlyout/DropdownFlyout.helpers.js.map

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

package/dist/esm/components/DropdownFlyout/DropdownFlyout.js

@@ -0,0 +1,137 @@
+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 { EllipsisVertical } from '@procore/core-icons/dist';
+import React from 'react';
+import { useClickOutside } from '../../effects/ClickOutside';
+import { Trigger } from '../../state/Trigger';
+import { Card } from '../Card';
+import { DropdownButton } from '../Dropdown';
+import { Overlay } from '../Overlay';
+import { StyledDropdownFlyout, StyledDropdownFlyoutItem, } from './DropdownFlyout.styles';
+import { rootId, } from './DropdownFlyout.types';
+import { defaultOptionRenderer, noop, useDropdownFlyout, transformOption, DropdownFlyoutContext, useDropdownFlyoutContext, } from './DropdownFlyout.helpers';
+export var FlyoutCaption = React.forwardRef(function FlyoutCaption(_a, ref) {
+    var option = _a.option, highlighted = _a.highlighted, optionRenderer = _a.optionRenderer, props = __rest(_a, ["option", "highlighted", "optionRenderer"]);
+    return (React.createElement(StyledDropdownFlyoutItem, __assign({}, props, { ref: ref, "data-highlighted": highlighted }), optionRenderer(option)));
+});
+FlyoutCaption.displayName = 'FlyoutCaption';
+export function FlyoutItem(_a) {
+    var option = _a.option, container = _a.container, placement = _a.placement;
+    var captionRef = React.useRef(null);
+    var overlayRef = React.useRef(null);
+    var _b = useDropdownFlyoutContext(), isHighlighted = _b.isHighlighted, isExpanded = _b.isExpanded, _onClick = _b.onClick, expand = _b.expand, collapse = _b.collapse, optionRenderer = _b.optionRenderer;
+    var onMouseEnter = React.useCallback(function () { return expand(option); }, [option, expand]);
+    var onMouseLeave = React.useCallback(function (e) {
+        var _a;
+        if (e.relatedTarget instanceof Node &&
+            !((_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
+            collapse(option);
+        }
+    }, [collapse, option]);
+    var onClick = React.useCallback(function () { return _onClick(option); }, [_onClick, option]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FlyoutCaption, { ref: captionRef, option: option.origin, onClick: onClick, optionRenderer: optionRenderer, highlighted: isHighlighted(option), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
+        Array.isArray(option.children) && isExpanded(option) ? (React.createElement(FlyoutList, { options: option.children, overlayRef: overlayRef, targetRef: captionRef, container: container, placement: placement })) : null));
+}
+export function FlyoutList(_a) {
+    var options = _a.options, targetRef = _a.targetRef, ref = _a.overlayRef, container = _a.container, placement = _a.placement, props = __rest(_a, ["options", "targetRef", "overlayRef", "container", "placement"]);
+    var overlayRef = React.useRef(null);
+    return (React.createElement(Overlay, __assign({}, __assign({ ref: ref, overlayRef: overlayRef, targetRef: targetRef, placement: placement, container: container, padding: 0 }, props)),
+        React.createElement(Card, { shadowStrength: 2 },
+            React.createElement(StyledDropdownFlyout, null, options.map(function (option) { return (React.createElement(FlyoutItem, { key: option.id, option: option, container: container, placement: placement })); })))));
+}
+var DefaultButton = React.forwardRef(function DefaultButton(_a, ref) {
+    var children = _a.children, icon = _a.icon, props = __rest(_a, ["children", "icon"]);
+    return (React.createElement(DropdownButton, __assign({}, props, { icon: props.loading ? undefined : !icon && !children ? (React.createElement(EllipsisVertical, null)) : (icon), arrow: !children ? false : true, ref: ref }), children));
+});
+/**
+
+ The dropdown flyout allows for additional menu items to be nested within
+ parent items, which allows more menu options for users.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-dropdownflyout--demo)
+
+ @see [Design Guidelines](https://design.procore.com/dropdown-flyout)
+
+ */
+export var DropdownFlyout = React.forwardRef(function DropdownFlyout(_a, ref) {
+    var disabled = _a.disabled, icon = _a.icon, label = _a.label, loading = _a.loading, _options = _a.options, _b = _a.onClick, _onClick = _b === void 0 ? noop : _b, _c = _a.optionRenderer, optionRenderer = _c === void 0 ? defaultOptionRenderer : _c, children = _a.children, _d = _a.placement, placement = _d === void 0 ? 'right-bottom' : _d, _onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, onMouseDown = _a.onMouseDown, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, size = _a.size, _e = _a.variant, variant = _e === void 0 ? 'secondary' : _e, props = __rest(_a, ["disabled", "icon", "label", "loading", "options", "onClick", "optionRenderer", "children", "placement", "onKeyDown", "onFocus", "onBlur", "onMouseDown", "onMouseEnter", "onMouseLeave", "size", "variant"]);
+    var innerRef = React.useRef(null);
+    var container = ref || innerRef;
+    var overlayRef = React.useRef(null);
+    var targetRef = React.useRef(null);
+    var flyoutOptions = React.useMemo(function () { return transformOption(_options, rootId); }, [_options]);
+    var _f = useDropdownFlyout({
+        flyoutOptions: flyoutOptions,
+        onClick: _onClick,
+        onKeyDown: _onKeyDown,
+    }), options = _f.options, collapse = _f.collapse, expand = _f.expand, closeDropdown = _f.closeDropdown, openDropdown = _f.openDropdown, isOpen = _f.isOpen, onClick = _f.onClick, onKeyDown = _f.onKeyDown, setMouseOver = _f.setMouseOver, setFocused = _f.setFocused, isExpanded = _f.isExpanded, isHighlighted = _f.isHighlighted;
+    useClickOutside({
+        onClickOutside: closeDropdown,
+        refs: [container],
+    });
+    var element = typeof children === 'function' ? children({ isOpen: isOpen }) : children;
+    var trigger = React.isValidElement(element) ? (element) : (React.createElement(DefaultButton, { children: label, disabled: disabled, loading: loading, icon: icon, size: size, variant: variant }));
+    return (React.createElement("div", __assign({}, props, { ref: container, onKeyDown: onKeyDown, onMouseEnter: function (e) {
+            setMouseOver(true);
+            onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        }, onMouseLeave: function (e) {
+            setMouseOver(false);
+            onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }, onFocus: function (e) {
+            setFocused(true);
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        }, onMouseDown: function (e) {
+            var _a, _b;
+            // Discard firing of blur event
+            // when click was inside the dropdown
+            if (e.target instanceof Node && ((_a = container.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                e.preventDefault();
+                (_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+        }, onBlur: function (e) {
+            setFocused(false);
+            closeDropdown();
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        } }),
+        React.createElement(Trigger, __assign({}, {
+            isEnabled: isOpen,
+            enable: openDropdown,
+            disable: closeDropdown,
+            trigger: ['click'],
+            triggerRef: targetRef,
+        }), React.cloneElement(trigger, __assign(__assign({}, trigger.props), { tabIndex: 0 }))),
+        React.createElement(DropdownFlyoutContext.Provider, { value: {
+                expand: expand,
+                collapse: collapse,
+                onClick: onClick,
+                isExpanded: isExpanded,
+                isHighlighted: isHighlighted,
+                optionRenderer: optionRenderer,
+            } }, isOpen && (React.createElement(FlyoutList, { options: options, targetRef: targetRef, overlayRef: overlayRef, placement: placement, container: container.current || undefined, padding: 4 })))));
+});
+export default DropdownFlyout;
+//# sourceMappingURL=DropdownFlyout.js.map

package/dist/esm/components/DropdownFlyout/DropdownFlyout.js.map

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

package/dist/esm/components/DropdownFlyout/DropdownFlyout.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledDropdownFlyout: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDropdownFlyoutItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDropdownFlyoutLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledDropdownFlyoutExpandIcon: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/esm/components/DropdownFlyout/DropdownFlyout.styles.js

@@ -0,0 +1,16 @@
+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 { arrowRight } from '../../styles/arrows';
+import { colors } from '../../styles/colors';
+import { getEllipsis } from '../../styles/mixins';
+import { spacing } from '../../styles/spacing';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+export var StyledDropdownFlyout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  width: 100%;\n  max-width: 148px;\n  max-height: 855px;\n  padding: ", "px 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  width: 100%;\n  max-width: 148px;\n  max-height: 855px;\n  padding: ", "px 0;\n"])), spacing.sm);
+export var StyledDropdownFlyoutItem = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  cursor: pointer;\n\n  width: 100%;\n  padding: ", "px ", "px;\n  color: ", ";\n  ", "\n\n  &[data-highlighted='true'],\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  cursor: pointer;\n\n  width: 100%;\n  padding: ", "px ", "px;\n  color: ", ";\n  ", "\n\n  &[data-highlighted='true'],\n  &:hover {\n    background-color: ", ";\n  }\n"])), spacing.xs, spacing.lg, colors.gray20, getTypographyIntent('body'), colors.gray96);
+export var StyledDropdownFlyoutLabel = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis());
+export var StyledDropdownFlyoutExpandIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-self: center;\n  flex-shrink: 0;\n  margin-left: ", "px;\n  white-space: nowrap;\n\n  ", "\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-self: center;\n  flex-shrink: 0;\n  margin-left: ", "px;\n  white-space: nowrap;\n\n  ", "\n"])), spacing.lg, arrowRight(4, 'black'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=DropdownFlyout.styles.js.map

package/dist/esm/components/DropdownFlyout/DropdownFlyout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownFlyout.styles.js","sourceRoot":"","sources":["../../../../src/components/DropdownFlyout/DropdownFlyout.styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AAErE,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,yNAAA,2IAOjC,EAAU,SACtB,KADY,OAAO,CAAC,EAAE,CACtB,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,uSAAA,4GAOrC,EAAU,KAAM,EAAU,gBAC5B,EAAa,OACpB,EAA2B,wEAIP,EAAa,UAEpC,KARY,OAAO,CAAC,EAAE,EAAM,OAAO,CAAC,EAAE,EAC5B,MAAM,CAAC,MAAM,EACpB,mBAAmB,CAAC,MAAM,CAAC,EAIP,MAAM,CAAC,MAAM,CAEpC,CAAA;AAED,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,+EAAA,MAChD,EAAa,IAChB,KADG,WAAW,EAAE,CAChB,CAAA;AAED,MAAM,CAAC,IAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,2NAAA,6GAKxC,EAAU,mCAGvB,EAAsB,IACzB,KAJgB,OAAO,CAAC,EAAE,EAGvB,UAAU,CAAC,CAAC,EAAE,OAAO,CAAC,CACzB,CAAA"}

package/dist/esm/components/DropdownFlyout/DropdownFlyout.types.d.ts

@@ -0,0 +1,202 @@
+import { DivAttributes, Props } from '../../utils/types';
+import { OverlayProps } from '../Overlay';
+import { DropdownProps } from '../Dropdown';
+export declare const rootId = "ROOT_ID";
+export declare type Action = {
+    type: 'highlight';
+    option: FlyoutOption;
+} | {
+    type: 'expand';
+    option: FlyoutOption;
+} | {
+    type: 'collapse';
+    option: FlyoutOption;
+} | {
+    type: 'close';
+} | {
+    type: 'open';
+} | {
+    type: 'setMouseOver';
+    isMouseOver: boolean;
+} | {
+    type: 'setFocused';
+    isFocused: boolean;
+};
+declare type ExpandedItem = FlyoutOptionId;
+export declare type State = {
+    /**
+     * @since 10.19.0
+     */
+    highlighted: FlyoutOption;
+    /**
+     * @since 10.19.0
+     */
+    expanded: ExpandedItem[];
+    /**
+     * @since 10.19.0
+     */
+    options: FlyoutOption[];
+    /**
+     * @since 10.19.0
+     */
+    isMouseOver: boolean;
+    /**
+     * @since 10.19.0
+     */
+    isFocused: boolean;
+    /**
+     * @since 10.19.0
+     */
+    isOpen: boolean;
+};
+export interface DropdownOption {
+    /**
+     * @since 10.19.0
+     */
+    value: any;
+    /**
+     * @since 10.19.0
+     */
+    label: string;
+    /**
+     * @since 10.19.0
+     */
+    children?: DropdownOption[];
+}
+declare type OptionId = string;
+export interface FlyoutOption {
+    /**
+     * @since 10.19.0
+     */
+    id: OptionId;
+    /**
+     * @since 10.19.0
+     */
+    parentId: OptionId | typeof rootId;
+    /**
+     * @since 10.19.0
+     */
+    origin: DropdownOption;
+    /**
+     * @since 10.19.0
+     */
+    children?: FlyoutOption[];
+}
+export declare type FlyoutOptionId = FlyoutOption['id'] | typeof rootId;
+export interface FlyoutCaptionProps extends DivAttributes {
+    /**
+     * @since 10.19.0
+     */
+    option: DropdownOption;
+    /**
+     * @since 10.19.0
+     */
+    highlighted: boolean;
+    /**
+     * @since 10.19.0
+     */
+    optionRenderer: (option: DropdownOption) => React.ReactNode;
+}
+export interface FlyoutListProps {
+    /**
+     * @since 10.19.0
+     */
+    options: FlyoutOption[];
+    /**
+     * @since 10.19.0
+     */
+    targetRef: OverlayProps['targetRef'];
+    /**
+     * @since 10.19.0
+     */
+    overlayRef: OverlayProps['overlayRef'];
+    /**
+     * @since 10.19.0
+     */
+    placement: OverlayProps['placement'];
+    /**
+     * @since 10.19.0
+     */
+    padding?: OverlayProps['padding'];
+    /**
+     * @since 10.19.0
+     */
+    container?: HTMLElement;
+}
+export interface DropdownFlyoutProps extends Omit<DivAttributes, 'onClick'> {
+    /**
+     * @since 10.19.0
+     */
+    disabled?: DropdownProps['disabled'];
+    /**
+     * The text of the button.
+     * @since 10.19.0
+     */
+    label?: DropdownProps['label'];
+    /**
+     * @since 10.19.0
+     */
+    loading?: DropdownProps['loading'];
+    /**
+     * The icon of the button.
+     * @since 10.19.0
+     */
+    icon?: DropdownProps['icon'];
+    /**
+     * <div>
+     *  Data of the dropdown options - <Code>Option[]</Code>
+     *  <CodeBlock>
+     *    {`type Option = { label: string; children?: Option[] }`}
+     *  </CodeBlock>
+     * </div>
+     * @since 10.19.0
+     */
+    options: DropdownOption[];
+    /**
+     * <div>
+     *  Callback for click on dropdown option
+     *  <CodeBlock>{'(option: Option) => void'}</CodeBlock>
+     * </div>
+     * @since 10.19.0
+     */
+    onClick?: (option: DropdownOption) => void;
+    /**
+     * <div>
+     *  Render prop to specify custom dropdown option content
+     *  <CodeBlock>{'(option: Option) => ReactNode'}</CodeBlock>
+     * </div>
+     * @since 10.19.0
+     */
+    optionRenderer?: (option: DropdownOption) => React.ReactNode;
+    /**
+     * @default 'right-bottom'
+     * @since 10.19.0
+     */
+    placement?: OverlayProps['placement'];
+    /**
+     * The button size
+     * @default 'md'
+     * @since 10.19.0
+     */
+    size?: DropdownProps['size'];
+    /**
+     * @default 'secondary'
+     * @since 10.19.0
+     */
+    variant?: DropdownProps['variant'];
+}
+export interface FlyoutItemProps extends Props {
+    /**
+     * @since 10.19.0
+     */
+    option: FlyoutOption;
+    /**
+     * @since 10.19.0
+     */
+    container?: HTMLElement;
+    /**
+     * @since 10.19.0
+     */
+    placement: OverlayProps['placement'];
+}
+export {};

package/dist/esm/components/DropdownFlyout/DropdownFlyout.types.js

@@ -0,0 +1,2 @@
+export var rootId = 'ROOT_ID';
+//# sourceMappingURL=DropdownFlyout.types.js.map

package/dist/esm/components/DropdownFlyout/DropdownFlyout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownFlyout.types.js","sourceRoot":"","sources":["../../../../src/components/DropdownFlyout/DropdownFlyout.types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,IAAM,MAAM,GAAG,SAAS,CAAA"}

package/dist/esm/components/DropdownFlyout/index.d.ts

@@ -0,0 +1,2 @@
+export { default, DropdownFlyout } from './DropdownFlyout';
+export { DropdownFlyoutProps } from './DropdownFlyout.types';

package/dist/esm/components/DropdownFlyout/index.js

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