box-ui-elements 23.3.0-beta.6 → 23.3.0-beta.8

package/es/components/flyout/Flyout.js

@@ -154,8 +154,9 @@ class Flyout extends React.Component {
         }, openOnHoverDelayTimeout);
       }
     });
-    _defineProperty(this, "handleKeyPress", () => {
-      if (KEYS.enter) {
+    _defineProperty(this, "handleKeyPress", event => {
+      if (event.key === KEYS.enter) {
+        event.preventDefault();
         this.openOverlay();
         this.focusButton();
       }

package/es/components/flyout/Flyout.js.flow

@@ -305,8 +305,9 @@ class Flyout extends React.Component<Props, State> {
         }
     };
 
-    handleKeyPress = () => {
-        if (KEYS.enter) {
+    handleKeyPress = (event: SyntheticKeyboardEvent<>) => {
+        if (event.key === KEYS.enter) {
+            event.preventDefault();
             this.openOverlay();
             this.focusButton();
         }

package/es/components/flyout/Flyout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flyout.js","names":["React","classNames","TetherComponent","uniqueId","KEYS","FlyoutContext","BOTTOM_CENTER","BOTTOM_LEFT","BOTTOM_RIGHT","MIDDLE_LEFT","MIDDLE_RIGHT","TOP_CENTER","TOP_LEFT","TOP_RIGHT","positions","attachment","targetAttachment","OVERLAY_ROLE","hasClickableAncestor","rootNode","targetNode","currentNode","Node","parentNode","nodeName","toUpperCase","hasClassAncestor","targetEl","className","el","HTMLElement","classList","contains","Flyout","Component","constructor","props","_defineProperty","event","overlayNode","document","getElementById","overlayID","closeOnClick","closeOnClickPredicate","target","handleOverlayClose","isVisible","state","closeOverlay","openOverlay","isButtonClicked","isTrusted","setState","preventDefault","openOnHover","openOnHoverDelayTimeout","clearTimeout","hoverDelay","setTimeout","enter","focusButton","onOpen","onClose","buttonEl","overlayButtonID","focus","portaledClasses","closeOnClickOutside","closeOnWindowBlur","buttonNode","isInsideToggleButton","isInsideOverlay","isInside","some","isVisibleByDefault","componentDidUpdate","prevProps","prevState","addEventListener","handleDocumentClickOrWindowBlur","window","removeEventListener","componentWillUnmount","render","children","constrainToScrollParent","constrainToWindow","constrainToWindowWithPin","isResponsive","offset","position","shouldDefaultFocus","elements","Children","toArray","tetherPosition","length","Error","overlayButton","overlayContent","overlayButtonProps","id","key","onClick","handleButtonClick","onKeyPress","handleKeyPress","onMouseEnter","handleButtonHover","onMouseLeave","handleButtonHoverLeave","role","tabIndex","overlayProps","handleOverlayClick","constraints","push","to","pin","tetherProps","classPrefix","enabled","classes","element","createElement","cloneElement","Provider","value"],"sources":["../../../src/components/flyout/Flyout.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport TetherComponent from 'react-tether';\nimport uniqueId from 'lodash/uniqueId';\nimport { KEYS } from '../../constants';\n\nimport FlyoutContext from './FlyoutContext';\n\nimport './Flyout.scss';\n\nconst BOTTOM_CENTER = 'bottom-center';\nconst BOTTOM_LEFT = 'bottom-left';\nconst BOTTOM_RIGHT = 'bottom-right';\nconst MIDDLE_LEFT = 'middle-left';\nconst MIDDLE_RIGHT = 'middle-right';\nconst TOP_CENTER = 'top-center';\nconst TOP_LEFT = 'top-left';\nconst TOP_RIGHT = 'top-right';\n\nconst positions = {\n    [BOTTOM_CENTER]: {\n        attachment: 'top center',\n        targetAttachment: 'bottom center',\n    },\n    [BOTTOM_LEFT]: {\n        attachment: 'top right',\n        targetAttachment: 'bottom right',\n    },\n    [BOTTOM_RIGHT]: {\n        attachment: 'top left',\n        targetAttachment: 'bottom left',\n    },\n    [MIDDLE_LEFT]: {\n        attachment: 'middle right',\n        targetAttachment: 'middle left',\n    },\n    [MIDDLE_RIGHT]: {\n        attachment: 'middle left',\n        targetAttachment: 'middle right',\n    },\n    [TOP_CENTER]: {\n        attachment: 'bottom center',\n        targetAttachment: 'top center',\n    },\n    [TOP_LEFT]: {\n        attachment: 'bottom right',\n        targetAttachment: 'top right',\n    },\n    [TOP_RIGHT]: {\n        attachment: 'bottom left',\n        targetAttachment: 'top left',\n    },\n};\n\nconst OVERLAY_ROLE = 'dialog';\n\n/**\n * Checks if there is a clickable ancestor or self\n * @param {Node} rootNode The base node we should stop at\n * @param {Node} targetNode The target node of the event\n * @returns {boolean}\n */\nconst hasClickableAncestor = (rootNode, targetNode) => {\n    // Check if the element or any of the ancestors are click-able (stopping at the component boundary)\n    let currentNode = targetNode;\n    while (currentNode && currentNode instanceof Node && currentNode.parentNode && currentNode !== rootNode) {\n        const nodeName = currentNode.nodeName.toUpperCase();\n        if (nodeName === 'A' || nodeName === 'BUTTON') {\n            return true;\n        }\n        currentNode = currentNode.parentNode;\n    }\n    return false;\n};\n\n/**\n * Checks if the target element is inside an element with the given CSS class.\n * @param {HTMLElement} targetEl The target element\n * @param {string} className A CSS class on the element to check for\n */\nconst hasClassAncestor = (targetEl, className) => {\n    let el = targetEl;\n    while (el && el instanceof HTMLElement) {\n        if (el.classList.contains(className)) {\n            return true;\n        }\n        el = el.parentNode;\n    }\n    return false;\n};\n\nexport type FlyoutProps = {\n    children: React.Node,\n    /**\n     * Set className to the overlay wrapper\n     */\n    className?: string,\n    /**\n     * If set to true, closes the overlay on clicking buttons/links inside\n     * of it\n     */\n    closeOnClick?: boolean,\n    /**\n     * If set to true, closes the overlay on clicking outside of it\n     */\n    closeOnClickOutside?: boolean,\n    /**\n     * Function that will interrogate the click event to determine whether or not to close the overlay if closeOnClick is enabled\n     */\n    closeOnClickPredicate?: Function,\n    /**\n     * If set to true, closes the overlay when window loses focus\n     */\n    closeOnWindowBlur?: boolean,\n    /**\n     * Sets tether constrain to scrollParent\n     */\n    constrainToScrollParent?: boolean,\n    /**\n     * Sets tether constrain to window\n     */\n    constrainToWindow?: boolean,\n    /**\n     * Sets tether constrain to window with pin\n     */\n    constrainToWindowWithPin?: boolean,\n    /**\n     * Toggles responsive behavior\n     */\n    isResponsive?: boolean,\n    /**\n     * Whether overlay should be visible by default\n     */\n    isVisibleByDefault: boolean,\n    /**\n     * Will fire this callback when the flyout should open\n     */\n    offset?: string,\n    /**\n     * Will fire this callback when the flyout should close\n     */\n    onClose?: Function,\n    /**\n     * Adjusts placement of the overlay (SEE http://tether.io/#options)\n     */\n    onOpen?: Function,\n    /**\n     * Whether overlay should open on hover\n     */\n    openOnHover?: boolean,\n    /**\n     * Time in milliseconds that the button should wait before opening and closing the flyout\n     */\n    openOnHoverDelayTimeout?: number,\n    /** An array of CSS classes for portaled elements in the overlay, used to check whether a click is inside the overlay */\n    portaledClasses: Array<string>,\n    /**\n     * Position of the overlay\n     */\n    position:\n        | 'bottom-center'\n        | 'bottom-left'\n        | 'bottom-right'\n        | 'middle-left'\n        | 'middle-right'\n        | 'top-center'\n        | 'top-left'\n        | 'top-right',\n    /**\n     * Prop whether to focus first focusable element or not\n     */\n    shouldDefaultFocus?: boolean,\n};\n\ntype State = {\n    isButtonClicked: boolean,\n    isVisible: boolean,\n};\n\ntype Props = FlyoutProps;\n\nclass Flyout extends React.Component<Props, State> {\n    static defaultProps = {\n        className: '',\n        closeOnClick: true,\n        closeOnClickOutside: true,\n        closeOnWindowBlur: false,\n        constrainToScrollParent: true,\n        constrainToWindow: false,\n        isResponsive: false,\n        isVisibleByDefault: false,\n        openOnHover: false,\n        openOnHoverDelayTimeout: 300,\n        portaledClasses: [],\n        position: BOTTOM_RIGHT,\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        this.overlayID = uniqueId('overlay');\n        this.overlayButtonID = uniqueId('flyoutbutton');\n        this.state = {\n            isVisible: props.isVisibleByDefault,\n            isButtonClicked: false,\n        };\n    }\n\n    componentDidUpdate(prevProps: Props, prevState: State) {\n        if (!prevState.isVisible && this.state.isVisible) {\n            const { closeOnClickOutside, closeOnWindowBlur } = this.props;\n            // When overlay is being opened\n            if (closeOnClickOutside) {\n                document.addEventListener('click', this.handleDocumentClickOrWindowBlur, true);\n                document.addEventListener('contextmenu', this.handleDocumentClickOrWindowBlur, true);\n            }\n            if (closeOnWindowBlur) {\n                window.addEventListener('blur', this.handleDocumentClickOrWindowBlur, true);\n            }\n        } else if (prevState.isVisible && !this.state.isVisible) {\n            // When overlay is being closed\n            document.removeEventListener('contextmenu', this.handleDocumentClickOrWindowBlur, true);\n            document.removeEventListener('click', this.handleDocumentClickOrWindowBlur, true);\n            window.removeEventListener('blur', this.handleDocumentClickOrWindowBlur, true);\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.state.isVisible) {\n            // Clean-up global click handlers\n            document.removeEventListener('contextmenu', this.handleDocumentClickOrWindowBlur, true);\n            document.removeEventListener('click', this.handleDocumentClickOrWindowBlur, true);\n            window.removeEventListener('blur', this.handleDocumentClickOrWindowBlur, true);\n        }\n\n        if (this.props.openOnHover && this.hoverDelay) {\n            clearTimeout(this.hoverDelay);\n        }\n    }\n\n    overlayButtonID: string;\n\n    overlayID: string;\n\n    handleOverlayClick = (event: SyntheticEvent<>) => {\n        const overlayNode = document.getElementById(this.overlayID);\n        const { closeOnClick, closeOnClickPredicate } = this.props;\n        if (!closeOnClick || !hasClickableAncestor(overlayNode, event.target)) {\n            return;\n        }\n        if (closeOnClickPredicate && !closeOnClickPredicate(event)) {\n            return;\n        }\n\n        this.handleOverlayClose();\n    };\n\n    handleButtonClick = (event: SyntheticUIEvent<>) => {\n        const { isVisible } = this.state;\n        if (isVisible) {\n            this.closeOverlay();\n        } else {\n            this.openOverlay();\n        }\n\n        // In at least one place, .click() is called programmatically\n        //     src/features/presence/Presence.js\n        // In the programmatic case, the event is not supposed to trigger\n        // autofocus of the content (TBD if this is truly correct behavior).\n        // This line was using \"event.detail > 0\"\n        // to detect if a click event was from a user, but that made keyboard\n        // triggers of the button click behave differently than the mouse.\n        // So, we use \"isTrusted\" instead. Note: React polyfills for IE11.\n        // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n        // https://reactjs.org/docs/events.html\n\n        const isButtonClicked = event.isTrusted;\n\n        this.setState({ isButtonClicked });\n\n        event.preventDefault();\n    };\n\n    hoverDelay: TimeoutID | void;\n\n    handleButtonHover = () => {\n        const { openOnHover, openOnHoverDelayTimeout } = this.props;\n        if (openOnHover) {\n            clearTimeout(this.hoverDelay);\n            this.hoverDelay = setTimeout(() => {\n                this.openOverlay();\n            }, openOnHoverDelayTimeout);\n        }\n    };\n\n    handleButtonHoverLeave = () => {\n        const { openOnHover, openOnHoverDelayTimeout } = this.props;\n        if (openOnHover) {\n            clearTimeout(this.hoverDelay);\n\n            this.hoverDelay = setTimeout(() => {\n                this.closeOverlay();\n            }, openOnHoverDelayTimeout);\n        }\n    };\n\n    handleKeyPress = () => {\n        if (KEYS.enter) {\n            this.openOverlay();\n            this.focusButton();\n        }\n    };\n\n    openOverlay = () => {\n        this.setState({\n            isVisible: true,\n        });\n\n        const { onOpen } = this.props;\n        if (onOpen) {\n            onOpen();\n        }\n    };\n\n    closeOverlay = () => {\n        this.setState({\n            isVisible: false,\n        });\n\n        const { onClose } = this.props;\n        if (onClose) {\n            onClose();\n        }\n    };\n\n    focusButton = () => {\n        const buttonEl = document.getElementById(this.overlayButtonID);\n        if (buttonEl) {\n            buttonEl.focus();\n        }\n    };\n\n    handleOverlayClose = () => {\n        this.focusButton();\n        this.closeOverlay();\n    };\n\n    handleDocumentClickOrWindowBlur = (event: MouseEvent | FocusEvent) => {\n        const { portaledClasses, closeOnClickOutside, closeOnWindowBlur } = this.props;\n        const { isVisible } = this.state;\n\n        if (!isVisible || !(closeOnClickOutside || closeOnWindowBlur)) {\n            return;\n        }\n\n        const overlayNode = document.getElementById(this.overlayID);\n        const buttonNode = document.getElementById(this.overlayButtonID);\n\n        const isInsideToggleButton =\n            (buttonNode && event.target instanceof Node && buttonNode.contains(event.target)) ||\n            buttonNode === event.target;\n        const isInsideOverlay =\n            (overlayNode && event.target instanceof Node && overlayNode.contains(event.target)) ||\n            overlayNode === event.target;\n        const isInside = isInsideToggleButton || isInsideOverlay;\n\n        if (isInside || portaledClasses.some(className => hasClassAncestor(event.target, className))) {\n            return;\n        }\n\n        // Only close overlay when the click is outside of the flyout or window loses focus\n        this.closeOverlay();\n    };\n\n    render() {\n        const {\n            children,\n            className = '',\n            constrainToScrollParent,\n            constrainToWindow,\n            constrainToWindowWithPin,\n            isResponsive,\n            offset,\n            openOnHover,\n            position,\n            shouldDefaultFocus,\n        } = this.props;\n        const { isButtonClicked, isVisible } = this.state;\n        const elements = React.Children.toArray(children);\n        const tetherPosition = positions[position];\n\n        if (elements.length !== 2) {\n            throw new Error('Flyout must have exactly two children: A button component and a <Overlay>');\n        }\n\n        const overlayButton = elements[0];\n        const overlayContent = elements[1];\n\n        const overlayButtonProps: Object = {\n            id: this.overlayButtonID,\n            key: this.overlayButtonID,\n            onClick: this.handleButtonClick,\n            onKeyPress: this.handleKeyPress,\n            onMouseEnter: this.handleButtonHover,\n            onMouseLeave: this.handleButtonHoverLeave,\n            role: 'button',\n            tabIndex: '0',\n            'aria-haspopup': OVERLAY_ROLE,\n            'aria-expanded': isVisible ? 'true' : 'false',\n        };\n\n        if (isVisible) {\n            overlayButtonProps['aria-controls'] = this.overlayID;\n        }\n\n        const overlayProps = {\n            id: this.overlayID,\n            key: this.overlayID,\n            role: OVERLAY_ROLE,\n            onClick: this.handleOverlayClick,\n            onClose: this.handleOverlayClose,\n            onMouseEnter: this.handleButtonHover,\n            onMouseLeave: this.handleButtonHoverLeave,\n            shouldDefaultFocus: shouldDefaultFocus || (!isButtonClicked && !openOnHover),\n            'aria-labelledby': this.overlayButtonID,\n        };\n\n        const constraints = [];\n\n        if (constrainToScrollParent) {\n            constraints.push({\n                to: 'scrollParent',\n                attachment: 'together',\n            });\n        }\n\n        if (constrainToWindow) {\n            constraints.push({\n                to: 'window',\n                attachment: 'together',\n            });\n        }\n\n        if (constrainToWindowWithPin) {\n            constraints.push({\n                to: 'window',\n                attachment: 'together',\n                pin: true,\n            });\n        }\n\n        const tetherProps: Object = {\n            classPrefix: 'flyout-overlay',\n            attachment: tetherPosition.attachment,\n            targetAttachment: tetherPosition.targetAttachment,\n            enabled: isVisible,\n            classes: {\n                element: classNames('flyout-overlay', { 'bdl-Flyout--responsive': isResponsive }, className),\n            },\n            constraints,\n        };\n\n        if (offset) {\n            tetherProps.offset = offset;\n        } else {\n            switch (position) {\n                case BOTTOM_CENTER:\n                case BOTTOM_LEFT:\n                case BOTTOM_RIGHT:\n                    tetherProps.offset = '-10px 0';\n                    break;\n                case TOP_CENTER:\n                case TOP_LEFT:\n                case TOP_RIGHT:\n                    tetherProps.offset = '10px 0';\n                    break;\n                case MIDDLE_LEFT:\n                    tetherProps.offset = '0 10px';\n                    break;\n                case MIDDLE_RIGHT:\n                    tetherProps.offset = '0 -10px';\n                    break;\n                default:\n                // no default\n            }\n        }\n\n        return (\n            <TetherComponent {...tetherProps}>\n                {React.cloneElement(overlayButton, overlayButtonProps)}\n                {isVisible && (\n                    <FlyoutContext.Provider value={{ closeOverlay: this.closeOverlay }}>\n                        {React.cloneElement(overlayContent, overlayProps)}\n                    </FlyoutContext.Provider>\n                )}\n            </TetherComponent>\n        );\n    }\n}\n\nexport default Flyout;\n"],"mappings":";;;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,eAAe,MAAM,cAAc;AAC1C,OAAOC,QAAQ,MAAM,iBAAiB;AACtC,SAASC,IAAI,QAAQ,iBAAiB;AAEtC,OAAOC,aAAa,MAAM,iBAAiB;AAE3C,OAAO,eAAe;AAEtB,MAAMC,aAAa,GAAG,eAAe;AACrC,MAAMC,WAAW,GAAG,aAAa;AACjC,MAAMC,YAAY,GAAG,cAAc;AACnC,MAAMC,WAAW,GAAG,aAAa;AACjC,MAAMC,YAAY,GAAG,cAAc;AACnC,MAAMC,UAAU,GAAG,YAAY;AAC/B,MAAMC,QAAQ,GAAG,UAAU;AAC3B,MAAMC,SAAS,GAAG,WAAW;AAE7B,MAAMC,SAAS,GAAG;EACd,CAACR,aAAa,GAAG;IACbS,UAAU,EAAE,YAAY;IACxBC,gBAAgB,EAAE;EACtB,CAAC;EACD,CAACT,WAAW,GAAG;IACXQ,UAAU,EAAE,WAAW;IACvBC,gBAAgB,EAAE;EACtB,CAAC;EACD,CAACR,YAAY,GAAG;IACZO,UAAU,EAAE,UAAU;IACtBC,gBAAgB,EAAE;EACtB,CAAC;EACD,CAACP,WAAW,GAAG;IACXM,UAAU,EAAE,cAAc;IAC1BC,gBAAgB,EAAE;EACtB,CAAC;EACD,CAACN,YAAY,GAAG;IACZK,UAAU,EAAE,aAAa;IACzBC,gBAAgB,EAAE;EACtB,CAAC;EACD,CAACL,UAAU,GAAG;IACVI,UAAU,EAAE,eAAe;IAC3BC,gBAAgB,EAAE;EACtB,CAAC;EACD,CAACJ,QAAQ,GAAG;IACRG,UAAU,EAAE,cAAc;IAC1BC,gBAAgB,EAAE;EACtB,CAAC;EACD,CAACH,SAAS,GAAG;IACTE,UAAU,EAAE,aAAa;IACzBC,gBAAgB,EAAE;EACtB;AACJ,CAAC;AAED,MAAMC,YAAY,GAAG,QAAQ;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,oBAAoB,GAAGA,CAACC,QAAQ,EAAEC,UAAU,KAAK;EACnD;EACA,IAAIC,WAAW,GAAGD,UAAU;EAC5B,OAAOC,WAAW,IAAIA,WAAW,YAAYC,IAAI,IAAID,WAAW,CAACE,UAAU,IAAIF,WAAW,KAAKF,QAAQ,EAAE;IACrG,MAAMK,QAAQ,GAAGH,WAAW,CAACG,QAAQ,CAACC,WAAW,CAAC,CAAC;IACnD,IAAID,QAAQ,KAAK,GAAG,IAAIA,QAAQ,KAAK,QAAQ,EAAE;MAC3C,OAAO,IAAI;IACf;IACAH,WAAW,GAAGA,WAAW,CAACE,UAAU;EACxC;EACA,OAAO,KAAK;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMG,gBAAgB,GAAGA,CAACC,QAAQ,EAAEC,SAAS,KAAK;EAC9C,IAAIC,EAAE,GAAGF,QAAQ;EACjB,OAAOE,EAAE,IAAIA,EAAE,YAAYC,WAAW,EAAE;IACpC,IAAID,EAAE,CAACE,SAAS,CAACC,QAAQ,CAACJ,SAAS,CAAC,EAAE;MAClC,OAAO,IAAI;IACf;IACAC,EAAE,GAAGA,EAAE,CAACN,UAAU;EACtB;EACA,OAAO,KAAK;AAChB,CAAC;AA4FD,MAAMU,MAAM,SAASjC,KAAK,CAACkC,SAAS,CAAe;EAgB/CC,WAAWA,CAACC,KAAY,EAAE;IACtB,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,6BA8CKC,KAAuB,IAAK;MAC9C,MAAMC,WAAW,GAAGC,QAAQ,CAACC,cAAc,CAAC,IAAI,CAACC,SAAS,CAAC;MAC3D,MAAM;QAAEC,YAAY;QAAEC;MAAsB,CAAC,GAAG,IAAI,CAACR,KAAK;MAC1D,IAAI,CAACO,YAAY,IAAI,CAACzB,oBAAoB,CAACqB,WAAW,EAAED,KAAK,CAACO,MAAM,CAAC,EAAE;QACnE;MACJ;MACA,IAAID,qBAAqB,IAAI,CAACA,qBAAqB,CAACN,KAAK,CAAC,EAAE;QACxD;MACJ;MAEA,IAAI,CAACQ,kBAAkB,CAAC,CAAC;IAC7B,CAAC;IAAAT,eAAA,4BAEoBC,KAAyB,IAAK;MAC/C,MAAM;QAAES;MAAU,CAAC,GAAG,IAAI,CAACC,KAAK;MAChC,IAAID,SAAS,EAAE;QACX,IAAI,CAACE,YAAY,CAAC,CAAC;MACvB,CAAC,MAAM;QACH,IAAI,CAACC,WAAW,CAAC,CAAC;MACtB;;MAEA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;;MAEA,MAAMC,eAAe,GAAGb,KAAK,CAACc,SAAS;MAEvC,IAAI,CAACC,QAAQ,CAAC;QAAEF;MAAgB,CAAC,CAAC;MAElCb,KAAK,CAACgB,cAAc,CAAC,CAAC;IAC1B,CAAC;IAAAjB,eAAA,4BAImB,MAAM;MACtB,MAAM;QAAEkB,WAAW;QAAEC;MAAwB,CAAC,GAAG,IAAI,CAACpB,KAAK;MAC3D,IAAImB,WAAW,EAAE;QACbE,YAAY,CAAC,IAAI,CAACC,UAAU,CAAC;QAC7B,IAAI,CAACA,UAAU,GAAGC,UAAU,CAAC,MAAM;UAC/B,IAAI,CAACT,WAAW,CAAC,CAAC;QACtB,CAAC,EAAEM,uBAAuB,CAAC;MAC/B;IACJ,CAAC;IAAAnB,eAAA,iCAEwB,MAAM;MAC3B,MAAM;QAAEkB,WAAW;QAAEC;MAAwB,CAAC,GAAG,IAAI,CAACpB,KAAK;MAC3D,IAAImB,WAAW,EAAE;QACbE,YAAY,CAAC,IAAI,CAACC,UAAU,CAAC;QAE7B,IAAI,CAACA,UAAU,GAAGC,UAAU,CAAC,MAAM;UAC/B,IAAI,CAACV,YAAY,CAAC,CAAC;QACvB,CAAC,EAAEO,uBAAuB,CAAC;MAC/B;IACJ,CAAC;IAAAnB,eAAA,yBAEgB,MAAM;MACnB,IAAIjC,IAAI,CAACwD,KAAK,EAAE;QACZ,IAAI,CAACV,WAAW,CAAC,CAAC;QAClB,IAAI,CAACW,WAAW,CAAC,CAAC;MACtB;IACJ,CAAC;IAAAxB,eAAA,sBAEa,MAAM;MAChB,IAAI,CAACgB,QAAQ,CAAC;QACVN,SAAS,EAAE;MACf,CAAC,CAAC;MAEF,MAAM;QAAEe;MAAO,CAAC,GAAG,IAAI,CAAC1B,KAAK;MAC7B,IAAI0B,MAAM,EAAE;QACRA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC;IAAAzB,eAAA,uBAEc,MAAM;MACjB,IAAI,CAACgB,QAAQ,CAAC;QACVN,SAAS,EAAE;MACf,CAAC,CAAC;MAEF,MAAM;QAAEgB;MAAQ,CAAC,GAAG,IAAI,CAAC3B,KAAK;MAC9B,IAAI2B,OAAO,EAAE;QACTA,OAAO,CAAC,CAAC;MACb;IACJ,CAAC;IAAA1B,eAAA,sBAEa,MAAM;MAChB,MAAM2B,QAAQ,GAAGxB,QAAQ,CAACC,cAAc,CAAC,IAAI,CAACwB,eAAe,CAAC;MAC9D,IAAID,QAAQ,EAAE;QACVA,QAAQ,CAACE,KAAK,CAAC,CAAC;MACpB;IACJ,CAAC;IAAA7B,eAAA,6BAEoB,MAAM;MACvB,IAAI,CAACwB,WAAW,CAAC,CAAC;MAClB,IAAI,CAACZ,YAAY,CAAC,CAAC;IACvB,CAAC;IAAAZ,eAAA,0CAEkCC,KAA8B,IAAK;MAClE,MAAM;QAAE6B,eAAe;QAAEC,mBAAmB;QAAEC;MAAkB,CAAC,GAAG,IAAI,CAACjC,KAAK;MAC9E,MAAM;QAAEW;MAAU,CAAC,GAAG,IAAI,CAACC,KAAK;MAEhC,IAAI,CAACD,SAAS,IAAI,EAAEqB,mBAAmB,IAAIC,iBAAiB,CAAC,EAAE;QAC3D;MACJ;MAEA,MAAM9B,WAAW,GAAGC,QAAQ,CAACC,cAAc,CAAC,IAAI,CAACC,SAAS,CAAC;MAC3D,MAAM4B,UAAU,GAAG9B,QAAQ,CAACC,cAAc,CAAC,IAAI,CAACwB,eAAe,CAAC;MAEhE,MAAMM,oBAAoB,GACrBD,UAAU,IAAIhC,KAAK,CAACO,MAAM,YAAYvB,IAAI,IAAIgD,UAAU,CAACtC,QAAQ,CAACM,KAAK,CAACO,MAAM,CAAC,IAChFyB,UAAU,KAAKhC,KAAK,CAACO,MAAM;MAC/B,MAAM2B,eAAe,GAChBjC,WAAW,IAAID,KAAK,CAACO,MAAM,YAAYvB,IAAI,IAAIiB,WAAW,CAACP,QAAQ,CAACM,KAAK,CAACO,MAAM,CAAC,IAClFN,WAAW,KAAKD,KAAK,CAACO,MAAM;MAChC,MAAM4B,QAAQ,GAAGF,oBAAoB,IAAIC,eAAe;MAExD,IAAIC,QAAQ,IAAIN,eAAe,CAACO,IAAI,CAAC9C,SAAS,IAAIF,gBAAgB,CAACY,KAAK,CAACO,MAAM,EAAEjB,SAAS,CAAC,CAAC,EAAE;QAC1F;MACJ;;MAEA;MACA,IAAI,CAACqB,YAAY,CAAC,CAAC;IACvB,CAAC;IA5KG,IAAI,CAACP,SAAS,GAAGvC,QAAQ,CAAC,SAAS,CAAC;IACpC,IAAI,CAAC8D,eAAe,GAAG9D,QAAQ,CAAC,cAAc,CAAC;IAC/C,IAAI,CAAC6C,KAAK,GAAG;MACTD,SAAS,EAAEX,KAAK,CAACuC,kBAAkB;MACnCxB,eAAe,EAAE;IACrB,CAAC;EACL;EAEAyB,kBAAkBA,CAACC,SAAgB,EAAEC,SAAgB,EAAE;IACnD,IAAI,CAACA,SAAS,CAAC/B,SAAS,IAAI,IAAI,CAACC,KAAK,CAACD,SAAS,EAAE;MAC9C,MAAM;QAAEqB,mBAAmB;QAAEC;MAAkB,CAAC,GAAG,IAAI,CAACjC,KAAK;MAC7D;MACA,IAAIgC,mBAAmB,EAAE;QACrB5B,QAAQ,CAACuC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,+BAA+B,EAAE,IAAI,CAAC;QAC9ExC,QAAQ,CAACuC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAACC,+BAA+B,EAAE,IAAI,CAAC;MACxF;MACA,IAAIX,iBAAiB,EAAE;QACnBY,MAAM,CAACF,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAACC,+BAA+B,EAAE,IAAI,CAAC;MAC/E;IACJ,CAAC,MAAM,IAAIF,SAAS,CAAC/B,SAAS,IAAI,CAAC,IAAI,CAACC,KAAK,CAACD,SAAS,EAAE;MACrD;MACAP,QAAQ,CAAC0C,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAACF,+BAA+B,EAAE,IAAI,CAAC;MACvFxC,QAAQ,CAAC0C,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAACF,+BAA+B,EAAE,IAAI,CAAC;MACjFC,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAACF,+BAA+B,EAAE,IAAI,CAAC;IAClF;EACJ;EAEAG,oBAAoBA,CAAA,EAAG;IACnB,IAAI,IAAI,CAACnC,KAAK,CAACD,SAAS,EAAE;MACtB;MACAP,QAAQ,CAAC0C,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAACF,+BAA+B,EAAE,IAAI,CAAC;MACvFxC,QAAQ,CAAC0C,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAACF,+BAA+B,EAAE,IAAI,CAAC;MACjFC,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAACF,+BAA+B,EAAE,IAAI,CAAC;IAClF;IAEA,IAAI,IAAI,CAAC5C,KAAK,CAACmB,WAAW,IAAI,IAAI,CAACG,UAAU,EAAE;MAC3CD,YAAY,CAAC,IAAI,CAACC,UAAU,CAAC;IACjC;EACJ;EAwIA0B,MAAMA,CAAA,EAAG;IACL,MAAM;MACFC,QAAQ;MACRzD,SAAS,GAAG,EAAE;MACd0D,uBAAuB;MACvBC,iBAAiB;MACjBC,wBAAwB;MACxBC,YAAY;MACZC,MAAM;MACNnC,WAAW;MACXoC,QAAQ;MACRC;IACJ,CAAC,GAAG,IAAI,CAACxD,KAAK;IACd,MAAM;MAAEe,eAAe;MAAEJ;IAAU,CAAC,GAAG,IAAI,CAACC,KAAK;IACjD,MAAM6C,QAAQ,GAAG7F,KAAK,CAAC8F,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC;IACjD,MAAMW,cAAc,GAAGlF,SAAS,CAAC6E,QAAQ,CAAC;IAE1C,IAAIE,QAAQ,CAACI,MAAM,KAAK,CAAC,EAAE;MACvB,MAAM,IAAIC,KAAK,CAAC,2EAA2E,CAAC;IAChG;IAEA,MAAMC,aAAa,GAAGN,QAAQ,CAAC,CAAC,CAAC;IACjC,MAAMO,cAAc,GAAGP,QAAQ,CAAC,CAAC,CAAC;IAElC,MAAMQ,kBAA0B,GAAG;MAC/BC,EAAE,EAAE,IAAI,CAACrC,eAAe;MACxBsC,GAAG,EAAE,IAAI,CAACtC,eAAe;MACzBuC,OAAO,EAAE,IAAI,CAACC,iBAAiB;MAC/BC,UAAU,EAAE,IAAI,CAACC,cAAc;MAC/BC,YAAY,EAAE,IAAI,CAACC,iBAAiB;MACpCC,YAAY,EAAE,IAAI,CAACC,sBAAsB;MACzCC,IAAI,EAAE,QAAQ;MACdC,QAAQ,EAAE,GAAG;MACb,eAAe,EAAEhG,YAAY;MAC7B,eAAe,EAAE8B,SAAS,GAAG,MAAM,GAAG;IAC1C,CAAC;IAED,IAAIA,SAAS,EAAE;MACXsD,kBAAkB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC3D,SAAS;IACxD;IAEA,MAAMwE,YAAY,GAAG;MACjBZ,EAAE,EAAE,IAAI,CAAC5D,SAAS;MAClB6D,GAAG,EAAE,IAAI,CAAC7D,SAAS;MACnBsE,IAAI,EAAE/F,YAAY;MAClBuF,OAAO,EAAE,IAAI,CAACW,kBAAkB;MAChCpD,OAAO,EAAE,IAAI,CAACjB,kBAAkB;MAChC8D,YAAY,EAAE,IAAI,CAACC,iBAAiB;MACpCC,YAAY,EAAE,IAAI,CAACC,sBAAsB;MACzCnB,kBAAkB,EAAEA,kBAAkB,IAAK,CAACzC,eAAe,IAAI,CAACI,WAAY;MAC5E,iBAAiB,EAAE,IAAI,CAACU;IAC5B,CAAC;IAED,MAAMmD,WAAW,GAAG,EAAE;IAEtB,IAAI9B,uBAAuB,EAAE;MACzB8B,WAAW,CAACC,IAAI,CAAC;QACbC,EAAE,EAAE,cAAc;QAClBvG,UAAU,EAAE;MAChB,CAAC,CAAC;IACN;IAEA,IAAIwE,iBAAiB,EAAE;MACnB6B,WAAW,CAACC,IAAI,CAAC;QACbC,EAAE,EAAE,QAAQ;QACZvG,UAAU,EAAE;MAChB,CAAC,CAAC;IACN;IAEA,IAAIyE,wBAAwB,EAAE;MAC1B4B,WAAW,CAACC,IAAI,CAAC;QACbC,EAAE,EAAE,QAAQ;QACZvG,UAAU,EAAE,UAAU;QACtBwG,GAAG,EAAE;MACT,CAAC,CAAC;IACN;IAEA,MAAMC,WAAmB,GAAG;MACxBC,WAAW,EAAE,gBAAgB;MAC7B1G,UAAU,EAAEiF,cAAc,CAACjF,UAAU;MACrCC,gBAAgB,EAAEgF,cAAc,CAAChF,gBAAgB;MACjD0G,OAAO,EAAE3E,SAAS;MAClB4E,OAAO,EAAE;QACLC,OAAO,EAAE3H,UAAU,CAAC,gBAAgB,EAAE;UAAE,wBAAwB,EAAEwF;QAAa,CAAC,EAAE7D,SAAS;MAC/F,CAAC;MACDwF;IACJ,CAAC;IAED,IAAI1B,MAAM,EAAE;MACR8B,WAAW,CAAC9B,MAAM,GAAGA,MAAM;IAC/B,CAAC,MAAM;MACH,QAAQC,QAAQ;QACZ,KAAKrF,aAAa;QAClB,KAAKC,WAAW;QAChB,KAAKC,YAAY;UACbgH,WAAW,CAAC9B,MAAM,GAAG,SAAS;UAC9B;QACJ,KAAK/E,UAAU;QACf,KAAKC,QAAQ;QACb,KAAKC,SAAS;UACV2G,WAAW,CAAC9B,MAAM,GAAG,QAAQ;UAC7B;QACJ,KAAKjF,WAAW;UACZ+G,WAAW,CAAC9B,MAAM,GAAG,QAAQ;UAC7B;QACJ,KAAKhF,YAAY;UACb8G,WAAW,CAAC9B,MAAM,GAAG,SAAS;UAC9B;QACJ;QACA;MACJ;IACJ;IAEA,oBACI1F,KAAA,CAAA6H,aAAA,CAAC3H,eAAe,EAAKsH,WAAW,eAC3BxH,KAAK,CAAC8H,YAAY,CAAC3B,aAAa,EAAEE,kBAAkB,CAAC,EACrDtD,SAAS,iBACN/C,KAAA,CAAA6H,aAAA,CAACxH,aAAa,CAAC0H,QAAQ;MAACC,KAAK,EAAE;QAAE/E,YAAY,EAAE,IAAI,CAACA;MAAa;IAAE,gBAC9DjD,KAAK,CAAC8H,YAAY,CAAC1B,cAAc,EAAEc,YAAY,CAC5B,CAEf,CAAC;EAE1B;AACJ;AAAC7E,eAAA,CA7TKJ,MAAM,kBACc;EAClBL,SAAS,EAAE,EAAE;EACbe,YAAY,EAAE,IAAI;EAClByB,mBAAmB,EAAE,IAAI;EACzBC,iBAAiB,EAAE,KAAK;EACxBiB,uBAAuB,EAAE,IAAI;EAC7BC,iBAAiB,EAAE,KAAK;EACxBE,YAAY,EAAE,KAAK;EACnBd,kBAAkB,EAAE,KAAK;EACzBpB,WAAW,EAAE,KAAK;EAClBC,uBAAuB,EAAE,GAAG;EAC5BW,eAAe,EAAE,EAAE;EACnBwB,QAAQ,EAAEnF;AACd,CAAC;AAiTL,eAAeyB,MAAM","ignoreList":[]}
+{"version":3,"file":"Flyout.js","names":["React","classNames","TetherComponent","uniqueId","KEYS","FlyoutContext","BOTTOM_CENTER","BOTTOM_LEFT","BOTTOM_RIGHT","MIDDLE_LEFT","MIDDLE_RIGHT","TOP_CENTER","TOP_LEFT","TOP_RIGHT","positions","attachment","targetAttachment","OVERLAY_ROLE","hasClickableAncestor","rootNode","targetNode","currentNode","Node","parentNode","nodeName","toUpperCase","hasClassAncestor","targetEl","className","el","HTMLElement","classList","contains","Flyout","Component","constructor","props","_defineProperty","event","overlayNode","document","getElementById","overlayID","closeOnClick","closeOnClickPredicate","target","handleOverlayClose","isVisible","state","closeOverlay","openOverlay","isButtonClicked","isTrusted","setState","preventDefault","openOnHover","openOnHoverDelayTimeout","clearTimeout","hoverDelay","setTimeout","key","enter","focusButton","onOpen","onClose","buttonEl","overlayButtonID","focus","portaledClasses","closeOnClickOutside","closeOnWindowBlur","buttonNode","isInsideToggleButton","isInsideOverlay","isInside","some","isVisibleByDefault","componentDidUpdate","prevProps","prevState","addEventListener","handleDocumentClickOrWindowBlur","window","removeEventListener","componentWillUnmount","render","children","constrainToScrollParent","constrainToWindow","constrainToWindowWithPin","isResponsive","offset","position","shouldDefaultFocus","elements","Children","toArray","tetherPosition","length","Error","overlayButton","overlayContent","overlayButtonProps","id","onClick","handleButtonClick","onKeyPress","handleKeyPress","onMouseEnter","handleButtonHover","onMouseLeave","handleButtonHoverLeave","role","tabIndex","overlayProps","handleOverlayClick","constraints","push","to","pin","tetherProps","classPrefix","enabled","classes","element","createElement","cloneElement","Provider","value"],"sources":["../../../src/components/flyout/Flyout.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport TetherComponent from 'react-tether';\nimport uniqueId from 'lodash/uniqueId';\nimport { KEYS } from '../../constants';\n\nimport FlyoutContext from './FlyoutContext';\n\nimport './Flyout.scss';\n\nconst BOTTOM_CENTER = 'bottom-center';\nconst BOTTOM_LEFT = 'bottom-left';\nconst BOTTOM_RIGHT = 'bottom-right';\nconst MIDDLE_LEFT = 'middle-left';\nconst MIDDLE_RIGHT = 'middle-right';\nconst TOP_CENTER = 'top-center';\nconst TOP_LEFT = 'top-left';\nconst TOP_RIGHT = 'top-right';\n\nconst positions = {\n    [BOTTOM_CENTER]: {\n        attachment: 'top center',\n        targetAttachment: 'bottom center',\n    },\n    [BOTTOM_LEFT]: {\n        attachment: 'top right',\n        targetAttachment: 'bottom right',\n    },\n    [BOTTOM_RIGHT]: {\n        attachment: 'top left',\n        targetAttachment: 'bottom left',\n    },\n    [MIDDLE_LEFT]: {\n        attachment: 'middle right',\n        targetAttachment: 'middle left',\n    },\n    [MIDDLE_RIGHT]: {\n        attachment: 'middle left',\n        targetAttachment: 'middle right',\n    },\n    [TOP_CENTER]: {\n        attachment: 'bottom center',\n        targetAttachment: 'top center',\n    },\n    [TOP_LEFT]: {\n        attachment: 'bottom right',\n        targetAttachment: 'top right',\n    },\n    [TOP_RIGHT]: {\n        attachment: 'bottom left',\n        targetAttachment: 'top left',\n    },\n};\n\nconst OVERLAY_ROLE = 'dialog';\n\n/**\n * Checks if there is a clickable ancestor or self\n * @param {Node} rootNode The base node we should stop at\n * @param {Node} targetNode The target node of the event\n * @returns {boolean}\n */\nconst hasClickableAncestor = (rootNode, targetNode) => {\n    // Check if the element or any of the ancestors are click-able (stopping at the component boundary)\n    let currentNode = targetNode;\n    while (currentNode && currentNode instanceof Node && currentNode.parentNode && currentNode !== rootNode) {\n        const nodeName = currentNode.nodeName.toUpperCase();\n        if (nodeName === 'A' || nodeName === 'BUTTON') {\n            return true;\n        }\n        currentNode = currentNode.parentNode;\n    }\n    return false;\n};\n\n/**\n * Checks if the target element is inside an element with the given CSS class.\n * @param {HTMLElement} targetEl The target element\n * @param {string} className A CSS class on the element to check for\n */\nconst hasClassAncestor = (targetEl, className) => {\n    let el = targetEl;\n    while (el && el instanceof HTMLElement) {\n        if (el.classList.contains(className)) {\n            return true;\n        }\n        el = el.parentNode;\n    }\n    return false;\n};\n\nexport type FlyoutProps = {\n    children: React.Node,\n    /**\n     * Set className to the overlay wrapper\n     */\n    className?: string,\n    /**\n     * If set to true, closes the overlay on clicking buttons/links inside\n     * of it\n     */\n    closeOnClick?: boolean,\n    /**\n     * If set to true, closes the overlay on clicking outside of it\n     */\n    closeOnClickOutside?: boolean,\n    /**\n     * Function that will interrogate the click event to determine whether or not to close the overlay if closeOnClick is enabled\n     */\n    closeOnClickPredicate?: Function,\n    /**\n     * If set to true, closes the overlay when window loses focus\n     */\n    closeOnWindowBlur?: boolean,\n    /**\n     * Sets tether constrain to scrollParent\n     */\n    constrainToScrollParent?: boolean,\n    /**\n     * Sets tether constrain to window\n     */\n    constrainToWindow?: boolean,\n    /**\n     * Sets tether constrain to window with pin\n     */\n    constrainToWindowWithPin?: boolean,\n    /**\n     * Toggles responsive behavior\n     */\n    isResponsive?: boolean,\n    /**\n     * Whether overlay should be visible by default\n     */\n    isVisibleByDefault: boolean,\n    /**\n     * Will fire this callback when the flyout should open\n     */\n    offset?: string,\n    /**\n     * Will fire this callback when the flyout should close\n     */\n    onClose?: Function,\n    /**\n     * Adjusts placement of the overlay (SEE http://tether.io/#options)\n     */\n    onOpen?: Function,\n    /**\n     * Whether overlay should open on hover\n     */\n    openOnHover?: boolean,\n    /**\n     * Time in milliseconds that the button should wait before opening and closing the flyout\n     */\n    openOnHoverDelayTimeout?: number,\n    /** An array of CSS classes for portaled elements in the overlay, used to check whether a click is inside the overlay */\n    portaledClasses: Array<string>,\n    /**\n     * Position of the overlay\n     */\n    position:\n        | 'bottom-center'\n        | 'bottom-left'\n        | 'bottom-right'\n        | 'middle-left'\n        | 'middle-right'\n        | 'top-center'\n        | 'top-left'\n        | 'top-right',\n    /**\n     * Prop whether to focus first focusable element or not\n     */\n    shouldDefaultFocus?: boolean,\n};\n\ntype State = {\n    isButtonClicked: boolean,\n    isVisible: boolean,\n};\n\ntype Props = FlyoutProps;\n\nclass Flyout extends React.Component<Props, State> {\n    static defaultProps = {\n        className: '',\n        closeOnClick: true,\n        closeOnClickOutside: true,\n        closeOnWindowBlur: false,\n        constrainToScrollParent: true,\n        constrainToWindow: false,\n        isResponsive: false,\n        isVisibleByDefault: false,\n        openOnHover: false,\n        openOnHoverDelayTimeout: 300,\n        portaledClasses: [],\n        position: BOTTOM_RIGHT,\n    };\n\n    constructor(props: Props) {\n        super(props);\n\n        this.overlayID = uniqueId('overlay');\n        this.overlayButtonID = uniqueId('flyoutbutton');\n        this.state = {\n            isVisible: props.isVisibleByDefault,\n            isButtonClicked: false,\n        };\n    }\n\n    componentDidUpdate(prevProps: Props, prevState: State) {\n        if (!prevState.isVisible && this.state.isVisible) {\n            const { closeOnClickOutside, closeOnWindowBlur } = this.props;\n            // When overlay is being opened\n            if (closeOnClickOutside) {\n                document.addEventListener('click', this.handleDocumentClickOrWindowBlur, true);\n                document.addEventListener('contextmenu', this.handleDocumentClickOrWindowBlur, true);\n            }\n            if (closeOnWindowBlur) {\n                window.addEventListener('blur', this.handleDocumentClickOrWindowBlur, true);\n            }\n        } else if (prevState.isVisible && !this.state.isVisible) {\n            // When overlay is being closed\n            document.removeEventListener('contextmenu', this.handleDocumentClickOrWindowBlur, true);\n            document.removeEventListener('click', this.handleDocumentClickOrWindowBlur, true);\n            window.removeEventListener('blur', this.handleDocumentClickOrWindowBlur, true);\n        }\n    }\n\n    componentWillUnmount() {\n        if (this.state.isVisible) {\n            // Clean-up global click handlers\n            document.removeEventListener('contextmenu', this.handleDocumentClickOrWindowBlur, true);\n            document.removeEventListener('click', this.handleDocumentClickOrWindowBlur, true);\n            window.removeEventListener('blur', this.handleDocumentClickOrWindowBlur, true);\n        }\n\n        if (this.props.openOnHover && this.hoverDelay) {\n            clearTimeout(this.hoverDelay);\n        }\n    }\n\n    overlayButtonID: string;\n\n    overlayID: string;\n\n    handleOverlayClick = (event: SyntheticEvent<>) => {\n        const overlayNode = document.getElementById(this.overlayID);\n        const { closeOnClick, closeOnClickPredicate } = this.props;\n        if (!closeOnClick || !hasClickableAncestor(overlayNode, event.target)) {\n            return;\n        }\n        if (closeOnClickPredicate && !closeOnClickPredicate(event)) {\n            return;\n        }\n\n        this.handleOverlayClose();\n    };\n\n    handleButtonClick = (event: SyntheticUIEvent<>) => {\n        const { isVisible } = this.state;\n        if (isVisible) {\n            this.closeOverlay();\n        } else {\n            this.openOverlay();\n        }\n\n        // In at least one place, .click() is called programmatically\n        //     src/features/presence/Presence.js\n        // In the programmatic case, the event is not supposed to trigger\n        // autofocus of the content (TBD if this is truly correct behavior).\n        // This line was using \"event.detail > 0\"\n        // to detect if a click event was from a user, but that made keyboard\n        // triggers of the button click behave differently than the mouse.\n        // So, we use \"isTrusted\" instead. Note: React polyfills for IE11.\n        // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted\n        // https://reactjs.org/docs/events.html\n\n        const isButtonClicked = event.isTrusted;\n\n        this.setState({ isButtonClicked });\n\n        event.preventDefault();\n    };\n\n    hoverDelay: TimeoutID | void;\n\n    handleButtonHover = () => {\n        const { openOnHover, openOnHoverDelayTimeout } = this.props;\n        if (openOnHover) {\n            clearTimeout(this.hoverDelay);\n            this.hoverDelay = setTimeout(() => {\n                this.openOverlay();\n            }, openOnHoverDelayTimeout);\n        }\n    };\n\n    handleButtonHoverLeave = () => {\n        const { openOnHover, openOnHoverDelayTimeout } = this.props;\n        if (openOnHover) {\n            clearTimeout(this.hoverDelay);\n\n            this.hoverDelay = setTimeout(() => {\n                this.closeOverlay();\n            }, openOnHoverDelayTimeout);\n        }\n    };\n\n    handleKeyPress = (event: SyntheticKeyboardEvent<>) => {\n        if (event.key === KEYS.enter) {\n            event.preventDefault();\n            this.openOverlay();\n            this.focusButton();\n        }\n    };\n\n    openOverlay = () => {\n        this.setState({\n            isVisible: true,\n        });\n\n        const { onOpen } = this.props;\n        if (onOpen) {\n            onOpen();\n        }\n    };\n\n    closeOverlay = () => {\n        this.setState({\n            isVisible: false,\n        });\n\n        const { onClose } = this.props;\n        if (onClose) {\n            onClose();\n        }\n    };\n\n    focusButton = () => {\n        const buttonEl = document.getElementById(this.overlayButtonID);\n        if (buttonEl) {\n            buttonEl.focus();\n        }\n    };\n\n    handleOverlayClose = () => {\n        this.focusButton();\n        this.closeOverlay();\n    };\n\n    handleDocumentClickOrWindowBlur = (event: MouseEvent | FocusEvent) => {\n        const { portaledClasses, closeOnClickOutside, closeOnWindowBlur } = this.props;\n        const { isVisible } = this.state;\n\n        if (!isVisible || !(closeOnClickOutside || closeOnWindowBlur)) {\n            return;\n        }\n\n        const overlayNode = document.getElementById(this.overlayID);\n        const buttonNode = document.getElementById(this.overlayButtonID);\n\n        const isInsideToggleButton =\n            (buttonNode && event.target instanceof Node && buttonNode.contains(event.target)) ||\n            buttonNode === event.target;\n        const isInsideOverlay =\n            (overlayNode && event.target instanceof Node && overlayNode.contains(event.target)) ||\n            overlayNode === event.target;\n        const isInside = isInsideToggleButton || isInsideOverlay;\n\n        if (isInside || portaledClasses.some(className => hasClassAncestor(event.target, className))) {\n            return;\n        }\n\n        // Only close overlay when the click is outside of the flyout or window loses focus\n        this.closeOverlay();\n    };\n\n    render() {\n        const {\n            children,\n            className = '',\n            constrainToScrollParent,\n            constrainToWindow,\n            constrainToWindowWithPin,\n            isResponsive,\n            offset,\n            openOnHover,\n            position,\n            shouldDefaultFocus,\n        } = this.props;\n        const { isButtonClicked, isVisible } = this.state;\n        const elements = React.Children.toArray(children);\n        const tetherPosition = positions[position];\n\n        if (elements.length !== 2) {\n            throw new Error('Flyout must have exactly two children: A button component and a <Overlay>');\n        }\n\n        const overlayButton = elements[0];\n        const overlayContent = elements[1];\n\n        const overlayButtonProps: Object = {\n            id: this.overlayButtonID,\n            key: this.overlayButtonID,\n            onClick: this.handleButtonClick,\n            onKeyPress: this.handleKeyPress,\n            onMouseEnter: this.handleButtonHover,\n            onMouseLeave: this.handleButtonHoverLeave,\n            role: 'button',\n            tabIndex: '0',\n            'aria-haspopup': OVERLAY_ROLE,\n            'aria-expanded': isVisible ? 'true' : 'false',\n        };\n\n        if (isVisible) {\n            overlayButtonProps['aria-controls'] = this.overlayID;\n        }\n\n        const overlayProps = {\n            id: this.overlayID,\n            key: this.overlayID,\n            role: OVERLAY_ROLE,\n            onClick: this.handleOverlayClick,\n            onClose: this.handleOverlayClose,\n            onMouseEnter: this.handleButtonHover,\n            onMouseLeave: this.handleButtonHoverLeave,\n            shouldDefaultFocus: shouldDefaultFocus || (!isButtonClicked && !openOnHover),\n            'aria-labelledby': this.overlayButtonID,\n        };\n\n        const constraints = [];\n\n        if (constrainToScrollParent) {\n            constraints.push({\n                to: 'scrollParent',\n                attachment: 'together',\n            });\n        }\n\n        if (constrainToWindow) {\n            constraints.push({\n                to: 'window',\n                attachment: 'together',\n            });\n        }\n\n        if (constrainToWindowWithPin) {\n            constraints.push({\n                to: 'window',\n                attachment: 'together',\n                pin: true,\n            });\n        }\n\n        const tetherProps: Object = {\n            classPrefix: 'flyout-overlay',\n            attachment: tetherPosition.attachment,\n            targetAttachment: tetherPosition.targetAttachment,\n            enabled: isVisible,\n            classes: {\n                element: classNames('flyout-overlay', { 'bdl-Flyout--responsive': isResponsive }, className),\n            },\n            constraints,\n        };\n\n        if (offset) {\n            tetherProps.offset = offset;\n        } else {\n            switch (position) {\n                case BOTTOM_CENTER:\n                case BOTTOM_LEFT:\n                case BOTTOM_RIGHT:\n                    tetherProps.offset = '-10px 0';\n                    break;\n                case TOP_CENTER:\n                case TOP_LEFT:\n                case TOP_RIGHT:\n                    tetherProps.offset = '10px 0';\n                    break;\n                case MIDDLE_LEFT:\n                    tetherProps.offset = '0 10px';\n                    break;\n                case MIDDLE_RIGHT:\n                    tetherProps.offset = '0 -10px';\n                    break;\n                default:\n                // no default\n            }\n        }\n\n        return (\n            <TetherComponent {...tetherProps}>\n                {React.cloneElement(overlayButton, overlayButtonProps)}\n                {isVisible && (\n                    <FlyoutContext.Provider value={{ closeOverlay: this.closeOverlay }}>\n                        {React.cloneElement(overlayContent, overlayProps)}\n                    </FlyoutContext.Provider>\n                )}\n            </TetherComponent>\n        );\n    }\n}\n\nexport default Flyout;\n"],"mappings":"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","ignoreList":[]}

package/es/features/metadata-instance-editor/CascadePolicy.js

@@ -1,7 +1,8 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { InlineNotice } from '@box/blueprint-web';
+import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { InlineNotice, TooltipProvider } from '@box/blueprint-web';
 import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
 import Toggle from '../../components/toggle';
 import { RadioButton, RadioGroup } from '../../components/radio';
@@ -12,6 +13,15 @@ import './CascadePolicy.scss';
 const COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';
 const AI_LINK = 'https://www.box.com/ai';
 const PRICING_LINK = 'https://www.box.com/pricing';
+const agents = [{
+  id: '1',
+  name: 'Basic',
+  isEnterpriseDefault: true
+}, {
+  id: '2',
+  name: 'Enhanced (Gemini 2.5 Pro)',
+  isEnterpriseDefault: false
+}];
 const CascadePolicy = ({
   canEdit,
   canUseAIFolderExtraction,
@@ -82,7 +92,15 @@ const CascadePolicy = ({
     className: "cascade-policy-link",
     href: AI_LINK,
     target: "_blank"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.aiAutofillLearnMore))), /*#__PURE__*/React.createElement(InlineNotice, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.aiAutofillLearnMore))), /*#__PURE__*/React.createElement("div", {
+    className: "metadata-cascade-ai-agent-selector"
+  }, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(BoxAiAgentSelector, {
+    agents: agents,
+    onErrorAction: () => {},
+    requestState: "success",
+    selectedAgent: agents[0],
+    variant: "sidebar"
+  }))), /*#__PURE__*/React.createElement(InlineNotice, {
     className: "metadata-cascade-ai-notice",
     variant: "info"
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.aiAutofillNotice, {

package/es/features/metadata-instance-editor/CascadePolicy.js.flow

@@ -2,7 +2,8 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { InlineNotice } from '@box/blueprint-web';
+import { BoxAiAgentSelector } from '@box/box-ai-agent-selector';
+import { InlineNotice, TooltipProvider } from '@box/blueprint-web';
 import BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
 
 import Toggle from '../../components/toggle';
@@ -15,6 +16,20 @@ import './CascadePolicy.scss';
 const COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';
 const AI_LINK = 'https://www.box.com/ai';
 const PRICING_LINK = 'https://www.box.com/pricing';
+
+const agents = [
+    {
+        id: '1',
+        name: 'Basic',
+        isEnterpriseDefault: true,
+    },
+    {
+        id: '2',
+        name: 'Enhanced (Gemini 2.5 Pro)',
+        isEnterpriseDefault: false,
+    },
+];
+
 type Props = {
     canEdit: boolean,
     canUseAIFolderExtraction: boolean,
@@ -126,6 +141,17 @@ const CascadePolicy = ({
                                 <FormattedMessage {...messages.aiAutofillLearnMore} />
                             </Link>
                         </div>
+                        <div className="metadata-cascade-ai-agent-selector">
+                            <TooltipProvider>
+                                <BoxAiAgentSelector
+                                    agents={agents}
+                                    onErrorAction={() => {}}
+                                    requestState="success"
+                                    selectedAgent={agents[0]}
+                                    variant="sidebar"
+                                />
+                            </TooltipProvider>
+                        </div>
                         <InlineNotice className="metadata-cascade-ai-notice" variant="info">
                             <FormattedMessage
                                 {...messages.aiAutofillNotice}

package/es/features/metadata-instance-editor/CascadePolicy.js.map

@@ -1 +1 @@
-{"version":3,"file":"CascadePolicy.js","names":["React","FormattedMessage","InlineNotice","BoxAiLogo","Toggle","RadioButton","RadioGroup","Link","IconAlertDefault","messages","COMMUNITY_LINK","AI_LINK","PRICING_LINK","CascadePolicy","canEdit","canUseAIFolderExtraction","isCascadingEnabled","isCascadingOverwritten","isCustomMetadata","isAIFolderExtractionEnabled","onAIFolderExtractionToggle","onCascadeToggle","onCascadeModeChange","shouldShowCascadeOptions","readOnlyState","createElement","className","metadataCascadePolicyEnabledInfo","Fragment","_extends","tagName","enableCascadePolicy","isOn","label","onChange","e","target","checked","applyCascadePolicyText","href","cascadePolicyLearnMore","cannotApplyCascadePolicyText","cascadePolicyModeQuestion","operationNotImmediate","value","cascadePolicySkipMode","cascadePolicyOverwriteMode","width","height","enableAIAutofill","aiAutofillDescription","aiAutofillLearnMore","variant","aiAutofillNotice","values","pricingLink","aiAutofillPricingDetails"],"sources":["../../../src/features/metadata-instance-editor/CascadePolicy.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { InlineNotice } from '@box/blueprint-web';\nimport BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';\n\nimport Toggle from '../../components/toggle';\nimport { RadioButton, RadioGroup } from '../../components/radio';\nimport Link from '../../components/link/Link';\nimport IconAlertDefault from '../../icons/general/IconAlertDefault';\nimport messages from './messages';\nimport './CascadePolicy.scss';\n\nconst COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';\nconst AI_LINK = 'https://www.box.com/ai';\nconst PRICING_LINK = 'https://www.box.com/pricing';\ntype Props = {\n    canEdit: boolean,\n    canUseAIFolderExtraction: boolean,\n    isAIFolderExtractionEnabled: boolean,\n    isCascadingEnabled: boolean,\n    isCascadingOverwritten: boolean,\n    isCustomMetadata: boolean,\n    onAIFolderExtractionToggle: (value: boolean) => void,\n    onCascadeModeChange: (value: boolean) => void,\n    onCascadeToggle: (value: boolean) => void,\n    shouldShowCascadeOptions: boolean,\n};\n\nconst CascadePolicy = ({\n    canEdit,\n    canUseAIFolderExtraction,\n    isCascadingEnabled,\n    isCascadingOverwritten,\n    isCustomMetadata,\n    isAIFolderExtractionEnabled,\n    onAIFolderExtractionToggle,\n    onCascadeToggle,\n    onCascadeModeChange,\n    shouldShowCascadeOptions,\n}: Props) => {\n    const readOnlyState = isCascadingEnabled ? (\n        <div className=\"metadata-cascade-notice\">\n            <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />\n        </div>\n    ) : null;\n\n    return canEdit ? (\n        <>\n            <div className=\"metadata-cascade-editor\">\n                <div className=\"metadata-cascade-enable\">\n                    <div>\n                        <FormattedMessage tagName=\"strong\" {...messages.enableCascadePolicy} />\n                        {!isCustomMetadata && (\n                            <Toggle\n                                className={`metadata-cascade-toggle ${\n                                    isCascadingEnabled ? 'cascade-on' : 'cascade-off'\n                                }`}\n                                isOn={isCascadingEnabled}\n                                label=\"\"\n                                onChange={e => onCascadeToggle(e.target.checked)}\n                            />\n                        )}\n                    </div>\n                    {!isCustomMetadata ? (\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.applyCascadePolicyText} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={COMMUNITY_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.cascadePolicyLearnMore} />\n                            </Link>\n                        </div>\n                    ) : (\n                        <div>\n                            <FormattedMessage {...messages.cannotApplyCascadePolicyText} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {shouldShowCascadeOptions && (\n                <div className=\"metadata-cascade-editor\">\n                    <div className=\"metadata-cascading-mode\">\n                        <FormattedMessage {...messages.cascadePolicyModeQuestion} />\n\n                        <div className=\"metadata-operation-not-immediate\">\n                            <IconAlertDefault />\n                            <span>\n                                <FormattedMessage {...messages.operationNotImmediate} />\n                            </span>\n                        </div>\n                        <RadioGroup\n                            className=\"metadata-cascading-options\"\n                            onChange={e => onCascadeModeChange(e.target.value === 'overwrite')}\n                            value={isCascadingOverwritten ? 'overwrite' : 'skip'}\n                        >\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicySkipMode} />}\n                                value=\"skip\"\n                            />\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}\n                                value=\"overwrite\"\n                            />\n                        </RadioGroup>\n                    </div>\n                </div>\n            )}\n            {shouldShowCascadeOptions && canUseAIFolderExtraction && (\n                <div className=\"metadata-cascade-editor\" data-testid=\"ai-folder-extraction\">\n                    <div className=\"metadata-cascade-enable\">\n                        <div>\n                            <BoxAiLogo className=\"metadata-cascade-ai-logo\" width={16} height={16} />\n                            <FormattedMessage tagName=\"strong\" {...messages.enableAIAutofill} />\n                            <Toggle\n                                className=\"metadata-cascade-toggle\"\n                                isOn={isAIFolderExtractionEnabled}\n                                label=\"\"\n                                onChange={e => onAIFolderExtractionToggle(e.target.checked)}\n                            />\n                        </div>\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.aiAutofillDescription} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={AI_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.aiAutofillLearnMore} />\n                            </Link>\n                        </div>\n                        <InlineNotice className=\"metadata-cascade-ai-notice\" variant=\"info\">\n                            <FormattedMessage\n                                {...messages.aiAutofillNotice}\n                                values={{\n                                    pricingLink: (\n                                        <Link className=\"cascade-policy-link\" href={PRICING_LINK} target=\"_blank\">\n                                            <FormattedMessage {...messages.aiAutofillPricingDetails} />\n                                        </Link>\n                                    ),\n                                }}\n                            />\n                        </InlineNotice>\n                    </div>\n                </div>\n            )}\n        </>\n    ) : (\n        readOnlyState\n    );\n};\n\nexport default CascadePolicy;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CascadePolicy.js","names":["React","FormattedMessage","BoxAiAgentSelector","InlineNotice","TooltipProvider","BoxAiLogo","Toggle","RadioButton","RadioGroup","Link","IconAlertDefault","messages","COMMUNITY_LINK","AI_LINK","PRICING_LINK","agents","id","name","isEnterpriseDefault","CascadePolicy","canEdit","canUseAIFolderExtraction","isCascadingEnabled","isCascadingOverwritten","isCustomMetadata","isAIFolderExtractionEnabled","onAIFolderExtractionToggle","onCascadeToggle","onCascadeModeChange","shouldShowCascadeOptions","readOnlyState","createElement","className","metadataCascadePolicyEnabledInfo","Fragment","_extends","tagName","enableCascadePolicy","isOn","label","onChange","e","target","checked","applyCascadePolicyText","href","cascadePolicyLearnMore","cannotApplyCascadePolicyText","cascadePolicyModeQuestion","operationNotImmediate","value","cascadePolicySkipMode","cascadePolicyOverwriteMode","width","height","enableAIAutofill","aiAutofillDescription","aiAutofillLearnMore","onErrorAction","requestState","selectedAgent","variant","aiAutofillNotice","values","pricingLink","aiAutofillPricingDetails"],"sources":["../../../src/features/metadata-instance-editor/CascadePolicy.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { BoxAiAgentSelector } from '@box/box-ai-agent-selector';\nimport { InlineNotice, TooltipProvider } from '@box/blueprint-web';\nimport BoxAiLogo from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';\n\nimport Toggle from '../../components/toggle';\nimport { RadioButton, RadioGroup } from '../../components/radio';\nimport Link from '../../components/link/Link';\nimport IconAlertDefault from '../../icons/general/IconAlertDefault';\nimport messages from './messages';\nimport './CascadePolicy.scss';\n\nconst COMMUNITY_LINK = 'https://support.box.com/hc/en-us/articles/360044195873-Cascading-metadata-in-folders';\nconst AI_LINK = 'https://www.box.com/ai';\nconst PRICING_LINK = 'https://www.box.com/pricing';\n\nconst agents = [\n    {\n        id: '1',\n        name: 'Basic',\n        isEnterpriseDefault: true,\n    },\n    {\n        id: '2',\n        name: 'Enhanced (Gemini 2.5 Pro)',\n        isEnterpriseDefault: false,\n    },\n];\n\ntype Props = {\n    canEdit: boolean,\n    canUseAIFolderExtraction: boolean,\n    isAIFolderExtractionEnabled: boolean,\n    isCascadingEnabled: boolean,\n    isCascadingOverwritten: boolean,\n    isCustomMetadata: boolean,\n    onAIFolderExtractionToggle: (value: boolean) => void,\n    onCascadeModeChange: (value: boolean) => void,\n    onCascadeToggle: (value: boolean) => void,\n    shouldShowCascadeOptions: boolean,\n};\n\nconst CascadePolicy = ({\n    canEdit,\n    canUseAIFolderExtraction,\n    isCascadingEnabled,\n    isCascadingOverwritten,\n    isCustomMetadata,\n    isAIFolderExtractionEnabled,\n    onAIFolderExtractionToggle,\n    onCascadeToggle,\n    onCascadeModeChange,\n    shouldShowCascadeOptions,\n}: Props) => {\n    const readOnlyState = isCascadingEnabled ? (\n        <div className=\"metadata-cascade-notice\">\n            <FormattedMessage {...messages.metadataCascadePolicyEnabledInfo} />\n        </div>\n    ) : null;\n\n    return canEdit ? (\n        <>\n            <div className=\"metadata-cascade-editor\">\n                <div className=\"metadata-cascade-enable\">\n                    <div>\n                        <FormattedMessage tagName=\"strong\" {...messages.enableCascadePolicy} />\n                        {!isCustomMetadata && (\n                            <Toggle\n                                className={`metadata-cascade-toggle ${\n                                    isCascadingEnabled ? 'cascade-on' : 'cascade-off'\n                                }`}\n                                isOn={isCascadingEnabled}\n                                label=\"\"\n                                onChange={e => onCascadeToggle(e.target.checked)}\n                            />\n                        )}\n                    </div>\n                    {!isCustomMetadata ? (\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.applyCascadePolicyText} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={COMMUNITY_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.cascadePolicyLearnMore} />\n                            </Link>\n                        </div>\n                    ) : (\n                        <div>\n                            <FormattedMessage {...messages.cannotApplyCascadePolicyText} />\n                        </div>\n                    )}\n                </div>\n            </div>\n            {shouldShowCascadeOptions && (\n                <div className=\"metadata-cascade-editor\">\n                    <div className=\"metadata-cascading-mode\">\n                        <FormattedMessage {...messages.cascadePolicyModeQuestion} />\n\n                        <div className=\"metadata-operation-not-immediate\">\n                            <IconAlertDefault />\n                            <span>\n                                <FormattedMessage {...messages.operationNotImmediate} />\n                            </span>\n                        </div>\n                        <RadioGroup\n                            className=\"metadata-cascading-options\"\n                            onChange={e => onCascadeModeChange(e.target.value === 'overwrite')}\n                            value={isCascadingOverwritten ? 'overwrite' : 'skip'}\n                        >\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicySkipMode} />}\n                                value=\"skip\"\n                            />\n                            <RadioButton\n                                label={<FormattedMessage {...messages.cascadePolicyOverwriteMode} />}\n                                value=\"overwrite\"\n                            />\n                        </RadioGroup>\n                    </div>\n                </div>\n            )}\n            {shouldShowCascadeOptions && canUseAIFolderExtraction && (\n                <div className=\"metadata-cascade-editor\" data-testid=\"ai-folder-extraction\">\n                    <div className=\"metadata-cascade-enable\">\n                        <div>\n                            <BoxAiLogo className=\"metadata-cascade-ai-logo\" width={16} height={16} />\n                            <FormattedMessage tagName=\"strong\" {...messages.enableAIAutofill} />\n                            <Toggle\n                                className=\"metadata-cascade-toggle\"\n                                isOn={isAIFolderExtractionEnabled}\n                                label=\"\"\n                                onChange={e => onAIFolderExtractionToggle(e.target.checked)}\n                            />\n                        </div>\n                        <div className=\"cascade-policy-text\">\n                            <FormattedMessage {...messages.aiAutofillDescription} />\n                            &nbsp;\n                            <Link className=\"cascade-policy-link\" href={AI_LINK} target=\"_blank\">\n                                <FormattedMessage {...messages.aiAutofillLearnMore} />\n                            </Link>\n                        </div>\n                        <div className=\"metadata-cascade-ai-agent-selector\">\n                            <TooltipProvider>\n                                <BoxAiAgentSelector\n                                    agents={agents}\n                                    onErrorAction={() => {}}\n                                    requestState=\"success\"\n                                    selectedAgent={agents[0]}\n                                    variant=\"sidebar\"\n                                />\n                            </TooltipProvider>\n                        </div>\n                        <InlineNotice className=\"metadata-cascade-ai-notice\" variant=\"info\">\n                            <FormattedMessage\n                                {...messages.aiAutofillNotice}\n                                values={{\n                                    pricingLink: (\n                                        <Link className=\"cascade-policy-link\" href={PRICING_LINK} target=\"_blank\">\n                                            <FormattedMessage {...messages.aiAutofillPricingDetails} />\n                                        </Link>\n                                    ),\n                                }}\n                            />\n                        </InlineNotice>\n                    </div>\n                </div>\n            )}\n        </>\n    ) : (\n        readOnlyState\n    );\n};\n\nexport default CascadePolicy;\n"],"mappings":"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","ignoreList":[]}

package/es/features/metadata-instance-editor/CascadePolicy.scss

@@ -78,3 +78,7 @@ $cascade-policy-background: #f1e2fd;
         }
     }
 }
+
+.metadata-cascade-ai-agent-selector {
+    margin-top: 4px;
+}