@procore/core-react 11.20.0-vite.1 → 11.21.0

package/dist/DropdownFlyout/DropdownFlyout.helpers.js

@@ -0,0 +1,266 @@
+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 { StyledDropdownFlyoutExpandIcon, StyledDropdownFlyoutLabel, } from './DropdownFlyout.styles';
+import { rootId, } from './DropdownFlyout.types';
+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 closeSelectedDropdown = React.useCallback(function (e) {
+        if (e &&
+            e.type === 'click' &&
+            !e
+                .composedPath()
+                .some(function (node) { var _a; return (_a = node.dataset) === null || _a === void 0 ? void 0 : _a.flyout; })) {
+            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 _a, _b;
+        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)) {
+                    if (isOpen) {
+                        (_a = e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+                    }
+                    closeDropdown();
+                }
+                else {
+                    (_b = e.stopPropagation) === null || _b === void 0 ? void 0 : _b.call(e);
+                    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,
+        closeSelectedDropdown: closeSelectedDropdown,
+        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/DropdownFlyout/DropdownFlyout.helpers.js.map

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

package/dist/DropdownFlyout/DropdownFlyout.js

@@ -0,0 +1,166 @@
+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 { Card } from '../Card/Card';
+import { DropdownButton } from '../Dropdown/Dropdown';
+import { Portal } from '../Portal';
+import { useClickOutside } from '../_hooks/ClickOutside';
+import { useI18nContext } from '../_hooks/I18n';
+import { mergeRefs } from '../_utils/mergeRefs';
+import { defaultOptionRenderer, DropdownFlyoutContext, noop, transformOption, useDropdownFlyout, useDropdownFlyoutContext, } from './DropdownFlyout.helpers';
+import { StyledDropdownFlyout, StyledDropdownFlyoutItem, } from './DropdownFlyout.styles';
+import { rootId, } from './DropdownFlyout.types';
+import { useDropdownFlyoutOverlay } from './useDropdownFlyoutOverlay';
+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, "data-flyout": true }), optionRenderer(option)));
+});
+FlyoutCaption.displayName = 'FlyoutCaption';
+export function FlyoutItem(_a) {
+    var option = _a.option;
+    var overlayElRef = 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) {
+        if (e.relatedTarget instanceof Node &&
+            overlayElRef.current &&
+            !overlayElRef.current.contains(e.relatedTarget)) {
+            collapse(option);
+        }
+    }, [collapse, option]);
+    var onClick = React.useCallback(function () { return _onClick(option); }, [_onClick, option]);
+    var _c = React.useState(null), referenceEl = _c[0], setReferenceEl = _c[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FlyoutCaption, { ref: setReferenceEl, option: option.origin, onClick: onClick, optionRenderer: optionRenderer, highlighted: isHighlighted(option), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }),
+        Array.isArray(option.children) && isExpanded(option) ? (React.createElement(Portal, null,
+            React.createElement(FlyoutList, { referenceEl: referenceEl, options: option.children, overlayRef: overlayElRef, placement: "right-top" }))) : null));
+}
+export function FlyoutList(_a) {
+    var options = _a.options, placement = _a.placement, referenceEl = _a.referenceEl, overlayElRef = _a.overlayRef, _b = _a.offset, offset = _b === void 0 ? 0 : _b;
+    var _c = useDropdownFlyoutOverlay({
+        placement: placement,
+        offset: { mainAxis: offset },
+    }), overlayStyle = _c.overlayStyle, referenceRef = _c.referenceRef, overlayRef = _c.overlayRef;
+    React.useEffect(function () {
+        referenceRef(referenceEl);
+    }, [referenceEl, referenceRef]);
+    return (React.createElement(Card, { ref: mergeRefs(overlayRef, overlayElRef), shadowStrength: 2, style: overlayStyle },
+        React.createElement(StyledDropdownFlyout, null, options.map(function (option) { return (React.createElement(FlyoutItem, { key: option.id, option: option })); }))));
+}
+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: Boolean(React.Children.count(children)), ref: ref }), children));
+});
+/**
+
+  The dropdown flyout allows for additional menu items to be nested within
+  parent items, which allows more menu options for users.
+  @a11y WARN: DropdownFlyotus hold no value and take an action. Focus is expected
+    to be moved from a Dropdown to something else, to continue the user flow.
+    If the action is inert and does not move focus, this is left to be added
+    by the consumer.
+  @since 10.19.0
+
+  @see [Storybook](https://procore.github.io/core/core-react/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 containerRef = ref || innerRef;
+    var overlayElRef = 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, closeSelectedDropdown = _f.closeSelectedDropdown, 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: closeSelectedDropdown,
+        refs: [containerRef],
+    });
+    var element = typeof children === 'function' ? children({ isOpen: isOpen }) : children;
+    var I18n = useI18nContext();
+    var ariaLabel = props['aria-label'] ||
+        label ||
+        I18n.t("core.dropdown.".concat(loading ? 'loading' : 'moreOptions'));
+    var trigger = React.isValidElement(element) ? (element) : (React.createElement(DefaultButton, { "aria-label": ariaLabel, children: label, disabled: disabled, loading: loading, icon: icon, size: size, variant: variant }));
+    function onBlur(e) {
+        setFocused(false);
+        closeSelectedDropdown(e);
+        onBlur_ === null || onBlur_ === void 0 ? void 0 : onBlur_(e);
+    }
+    function onFocus(e) {
+        setFocused(true);
+        onFocus_ === null || onFocus_ === void 0 ? void 0 : onFocus_(e);
+    }
+    function onMouseDown(e) {
+        var _a, _b;
+        // Discard firing of blur event
+        // when click was inside the dropdown
+        if (e.target.dataset.flyout) {
+            e.preventDefault();
+            return;
+        }
+        if (e.target instanceof Node && ((_a = containerRef.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);
+    }
+    function onMouseLeave(e) {
+        setMouseOver(false);
+        onMouseLeave_ === null || onMouseLeave_ === void 0 ? void 0 : onMouseLeave_(e);
+    }
+    function onMouseEnter(e) {
+        setMouseOver(true);
+        onMouseEnter_ === null || onMouseEnter_ === void 0 ? void 0 : onMouseEnter_(e);
+    }
+    var _g = React.useState(null), referenceEl = _g[0], setReferenceEl = _g[1];
+    return (React.createElement("div", __assign({}, props, { "aria-label": undefined, ref: containerRef, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onMouseDown: onMouseDown, onBlur: onBlur }),
+        React.cloneElement(trigger, {
+            ref: trigger.ref
+                ? mergeRefs(trigger.ref, targetRef, setReferenceEl)
+                : mergeRefs(targetRef, setReferenceEl),
+            onClick: function (e) {
+                var _a, _b;
+                (_b = (_a = trigger.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                openDropdown();
+            },
+            tabIndex: 0,
+        }),
+        React.createElement(DropdownFlyoutContext.Provider, { value: {
+                expand: expand,
+                collapse: collapse,
+                onClick: onClick,
+                isExpanded: isExpanded,
+                isHighlighted: isHighlighted,
+                optionRenderer: optionRenderer,
+            } }, isOpen && (React.createElement(Portal, null,
+            React.createElement(FlyoutList, { options: options, overlayRef: overlayElRef, placement: placement, referenceEl: referenceEl, offset: 4 }))))));
+});
+//# sourceMappingURL=DropdownFlyout.js.map

package/dist/DropdownFlyout/DropdownFlyout.js.map

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

package/dist/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/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 { getTypographyIntent } from '../Typography/Typography.styles';
+import { arrowRight } from '../_styles/arrows';
+import { colors } from '../_styles/colors';
+import { getEllipsis } from '../_styles/mixins';
+import { spacing } from '../_styles/spacing';
+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-height: 855px;\n  padding: ", "px 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  width: 100%;\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/DropdownFlyout/DropdownFlyout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownFlyout.styles.js","sourceRoot":"","sources":["../../src/DropdownFlyout/DropdownFlyout.styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,oMAAA,sHAMjC,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/DropdownFlyout/DropdownFlyout.types.d.ts

@@ -0,0 +1,137 @@
+import { Ref } from 'react';
+import { DropdownProps } from '../Dropdown/Dropdown.types';
+import { OverlayProps } from '../Overlay/Overlay';
+import { DivAttributes, Placement, Props } from '../_utils/types';
+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 = {
+    highlighted: FlyoutOption;
+    expanded: ExpandedItem[];
+    options: FlyoutOption[];
+    isMouseOver: boolean;
+    isFocused: boolean;
+    isOpen: boolean;
+};
+export interface DropdownOption {
+    value: any;
+    label: string;
+    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 {
+    option: DropdownOption;
+    highlighted: boolean;
+    optionRenderer: (option: DropdownOption) => React.ReactNode;
+}
+export interface FlyoutListProps extends DivAttributes {
+    options: FlyoutOption[];
+    overlayRef: Ref<HTMLDivElement>;
+    placement: Placement;
+    referenceEl: HTMLElement | null;
+    offset?: number;
+}
+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 {
+    option: FlyoutOption;
+}
+export {};

package/dist/DropdownFlyout/DropdownFlyout.types.js

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

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

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

package/dist/DropdownFlyout/index.d.ts

@@ -0,0 +1,3 @@
+export { DropdownFlyout } from './DropdownFlyout';
+export { StyledDropdownFlyoutExpandIcon, StyledDropdownFlyoutLabel, } from './DropdownFlyout.styles';
+export type { DropdownFlyoutProps, DropdownOption as DropdownFlyoutOption, } from './DropdownFlyout.types';

package/dist/DropdownFlyout/index.js

@@ -0,0 +1,3 @@
+export { DropdownFlyout } from './DropdownFlyout';
+export { StyledDropdownFlyoutExpandIcon, StyledDropdownFlyoutLabel, } from './DropdownFlyout.styles';
+//# sourceMappingURL=index.js.map

package/dist/DropdownFlyout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/DropdownFlyout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EACL,8BAA8B,EAC9B,yBAAyB,GAC1B,MAAM,yBAAyB,CAAA"}