box-ui-elements 15.0.0-beta.7 → 15.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flyout/Flyout.js"],"names":["React","TetherComponent","uniqueId","KEYS","BOTTOM_CENTER","BOTTOM_LEFT","BOTTOM_RIGHT","MIDDLE_LEFT","MIDDLE_RIGHT","TOP_CENTER","TOP_LEFT","TOP_RIGHT","positions","attachment","targetAttachment","hasClickableAncestor","rootNode","targetNode","currentNode","Node","parentNode","nodeName","toUpperCase","hasClassAncestor","targetEl","className","el","HTMLElement","classList","contains","Flyout","props","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","prevProps","prevState","addEventListener","handleDocumentClickOrWindowBlur","window","removeEventListener","children","constrainToScrollParent","constrainToWindow","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","tetherProps","classPrefix","enabled","classes","element","cloneElement","Component"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport TetherComponent from 'react-tether';\nimport uniqueId from 'lodash/uniqueId';\nimport { KEYS } from '../../constants';\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\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     * 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        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            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': 'true',\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: 'dialog',\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        const tetherProps: Object = {\n            classPrefix: 'flyout-overlay',\n            attachment: tetherPosition.attachment,\n            targetAttachment: tetherPosition.targetAttachment,\n            enabled: isVisible,\n            classes: {\n                element: `flyout-overlay ${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 ? React.cloneElement(overlayContent, overlayProps) : null}\n            </TetherComponent>\n        );\n    }\n}\n\nexport default Flyout;\n"],"file":"Flyout.js"}
+{"version":3,"sources":["../../../src/components/flyout/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","hasClickableAncestor","rootNode","targetNode","currentNode","Node","parentNode","nodeName","toUpperCase","hasClassAncestor","targetEl","className","el","HTMLElement","classList","contains","Flyout","props","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","prevProps","prevState","addEventListener","handleDocumentClickOrWindowBlur","window","removeEventListener","children","constrainToScrollParent","constrainToWindow","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","tetherProps","classPrefix","enabled","classes","element","cloneElement","Component"],"mappings":"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","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\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     * 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            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': 'true',\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: 'dialog',\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        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                <FlyoutContext.Provider value={{ closeOverlay: this.closeOverlay }}>\n                    {isVisible ? React.cloneElement(overlayContent, overlayProps) : null}\n                </FlyoutContext.Provider>\n            </TetherComponent>\n        );\n    }\n}\n\nexport default Flyout;\n"],"file":"Flyout.js"}

package/es/components/flyout/Flyout.scss

@@ -1,4 +1,5 @@
 @import '../../styles/variables';
+@import './variables';
 
 .flyout-overlay {
     @include common-typography;
@@ -23,3 +24,42 @@
         }
     }
 }
+
+@include breakpoint($medium-screen) {
+    .flyout-overlay.bdl-Flyout--responsive {
+        &.flyout-overlay-enabled {
+            // cancels out the tether inline styling without having to set enabled=false
+            transform: none !important;
+        }
+
+        .overlay {
+            position: fixed;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: 0;
+            padding: 0;
+            background-color: $white;
+            border: none;
+            border-radius: 0;
+            box-shadow: none;
+        }
+
+        .bdl-OverlayHeader {
+            position: relative;
+            z-index: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: $bdl-OverlayHeader-height;
+            padding: ($bdl-grid-unit * 3) ($bdl-grid-unit * 4);
+            background-color: $white;
+            box-shadow: $bdl-header-box-shadow;
+
+            .bdl-CloseButton {
+                display: block;
+            }
+        }
+    }
+}

package/es/components/flyout/FlyoutContext.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import noop from 'lodash/noop';
+export default React.createContext({
+  closeOverlay: noop
+});
+//# sourceMappingURL=FlyoutContext.js.map

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

@@ -0,0 +1,9 @@
+// @flow
+import * as React from 'react';
+import noop from 'lodash/noop';
+
+type FlyoutContextValues = {
+    closeOverlay: Function,
+};
+
+export default React.createContext<FlyoutContextValues>({ closeOverlay: noop });

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/flyout/FlyoutContext.js"],"names":["React","noop","createContext","closeOverlay"],"mappings":"AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,IAAP,MAAiB,aAAjB;AAMA,eAAeD,KAAK,CAACE,aAAN,CAAyC;AAAEC,EAAAA,YAAY,EAAEF;AAAhB,CAAzC,CAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport noop from 'lodash/noop';\n\ntype FlyoutContextValues = {\n    closeOverlay: Function,\n};\n\nexport default React.createContext<FlyoutContextValues>({ closeOverlay: noop });\n"],"file":"FlyoutContext.js"}

package/es/components/flyout/OverlayHeader.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import CloseButton from '../close-button/CloseButton'; // @ts-ignore flow
+
+import FlyoutContext from './FlyoutContext';
+import './OverlayHeader.scss';
+
+var OverlayHeader = function OverlayHeader(_ref) {
+  var children = _ref.children,
+      className = _ref.className;
+
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  var _React$useContext = React.useContext(FlyoutContext),
+      closeOverlay = _React$useContext.closeOverlay;
+
+  return React.createElement("div", {
+    className: classNames('bdl-OverlayHeader', className),
+    "data-testid": "bdl-OverlayHeader",
+    onClick: handleClick,
+    role: "presentation"
+  }, React.createElement("div", {
+    className: "bdl-OverlayHeader-content"
+  }, children), React.createElement(CloseButton, {
+    onClick: closeOverlay
+  }));
+};
+
+export default OverlayHeader;
+//# sourceMappingURL=OverlayHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/flyout/OverlayHeader.tsx"],"names":["React","classNames","CloseButton","FlyoutContext","OverlayHeader","children","className","handleClick","event","preventDefault","stopPropagation","useContext","closeOverlay"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,WAAP,MAAwB,6BAAxB,C,CACA;;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AAEA,OAAO,sBAAP;;AASA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAAiD;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,SAAoC,QAApCA,SAAoC;;AACnE,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,KAAD,EAAuD;AACvEA,IAAAA,KAAK,CAACC,cAAN;AACAD,IAAAA,KAAK,CAACE,eAAN;AACH,GAHD;;AADmE,0BAM1CV,KAAK,CAACW,UAAN,CAAiBR,aAAjB,CAN0C;AAAA,MAM3DS,YAN2D,qBAM3DA,YAN2D;;AAQnE,SACI;AACI,IAAA,SAAS,EAAEX,UAAU,CAAC,mBAAD,EAAsBK,SAAtB,CADzB;AAEI,mBAAY,mBAFhB;AAGI,IAAA,OAAO,EAAEC,WAHb;AAII,IAAA,IAAI,EAAC;AAJT,KAMI;AAAK,IAAA,SAAS,EAAC;AAAf,KAA4CF,QAA5C,CANJ,EAOI,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEO;AAAtB,IAPJ,CADJ;AAWH,CAnBD;;AAqBA,eAAeR,aAAf","sourcesContent":["import * as React from 'react';\n\nimport classNames from 'classnames';\nimport CloseButton from '../close-button/CloseButton';\n// @ts-ignore flow\nimport FlyoutContext from './FlyoutContext';\n\nimport './OverlayHeader.scss';\n\nexport interface OverlayHeaderProps {\n    /** Components to render in the header */\n    children?: React.ReactNode;\n    /** Set className to the overlay header */\n    className?: string;\n}\n\nconst OverlayHeader = ({ children, className }: OverlayHeaderProps) => {\n    const handleClick = (event: React.SyntheticEvent<HTMLDivElement>): void => {\n        event.preventDefault();\n        event.stopPropagation();\n    };\n\n    const { closeOverlay } = React.useContext(FlyoutContext);\n\n    return (\n        <div\n            className={classNames('bdl-OverlayHeader', className)}\n            data-testid=\"bdl-OverlayHeader\"\n            onClick={handleClick}\n            role=\"presentation\"\n        >\n            <div className=\"bdl-OverlayHeader-content\">{children}</div>\n            <CloseButton onClick={closeOverlay} />\n        </div>\n    );\n};\n\nexport default OverlayHeader;\n"],"file":"OverlayHeader.js"}

package/es/components/flyout/OverlayHeader.scss

@@ -0,0 +1,9 @@
+.bdl-OverlayHeader {
+    .bdl-CloseButton {
+        display: none;
+    }
+}
+
+.bdl-OverlayHeader-content {
+    flex-grow: 1;
+}

package/es/components/flyout/_variables.scss

@@ -0,0 +1 @@
+$bdl-OverlayHeader-height: 64px;

package/es/components/flyout/index.js

@@ -1,3 +1,5 @@
 export { default as Flyout } from './Flyout';
+export { default as FlyoutContext } from './FlyoutContext';
 export { default as Overlay } from './Overlay';
+export { default as OverlayHeader } from './OverlayHeader';
 //# sourceMappingURL=index.js.map

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

@@ -1,3 +1,5 @@
 // @flow
 export { default as Flyout } from './Flyout';
+export { default as FlyoutContext } from './FlyoutContext';
 export { default as Overlay } from './Overlay';
+export { default as OverlayHeader } from './OverlayHeader';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/flyout/index.js"],"names":["default","Flyout","Overlay"],"mappings":"AACA,SAASA,OAAO,IAAIC,MAApB,QAAkC,UAAlC;AACA,SAASD,OAAO,IAAIE,OAApB,QAAmC,WAAnC","sourcesContent":["// @flow\nexport { default as Flyout } from './Flyout';\nexport { default as Overlay } from './Overlay';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/components/flyout/index.js"],"names":["default","Flyout","FlyoutContext","Overlay","OverlayHeader"],"mappings":"AACA,SAASA,OAAO,IAAIC,MAApB,QAAkC,UAAlC;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,iBAAzC;AACA,SAASF,OAAO,IAAIG,OAApB,QAAmC,WAAnC;AACA,SAASH,OAAO,IAAII,aAApB,QAAyC,iBAAzC","sourcesContent":["// @flow\nexport { default as Flyout } from './Flyout';\nexport { default as FlyoutContext } from './FlyoutContext';\nexport { default as Overlay } from './Overlay';\nexport { default as OverlayHeader } from './OverlayHeader';\n"],"file":"index.js"}

package/es/components/image-tooltip/ImageTooltip.js

@@ -40,8 +40,7 @@ var ImageTooltip = function ImageTooltip(_ref) {
     },
     title: title
   }, React.Children.only(image));
-  var imageTooltipClasses = classNames('bdl-ImageTooltip', {
-    className: className,
+  var imageTooltipClasses = classNames('bdl-ImageTooltip', className, {
     'bdl-is-image-loaded': isImageLoaded
   });
   return React.createElement(Tooltip, _extends({

package/es/components/image-tooltip/ImageTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/image-tooltip/ImageTooltip.tsx"],"names":["React","classNames","Tooltip","TooltipTheme","ImageTooltipContent","ImageTooltip","children","className","content","image","title","otherTooltipProps","useState","isImageLoaded","setIsImageLoaded","tooltipContent","Children","only","imageTooltipClasses","CALLOUT"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB,C,CAEA;;AACA,OAAOC,OAAP,IAAgCC,YAAhC,QAAoD,YAApD;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,OAAO,qBAAP,C,CAEA;;AAcA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA6F;AAAA,MAA1FC,QAA0F,QAA1FA,QAA0F;AAAA,MAAhFC,SAAgF,QAAhFA,SAAgF;AAAA,MAArEC,OAAqE,QAArEA,OAAqE;AAAA,MAA5DC,KAA4D,QAA5DA,KAA4D;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA3CC,iBAA2C;;AAC9G;AAD8G,wBAEpEX,KAAK,CAACY,QAAN,CAAe,KAAf,CAFoE;AAAA;AAAA,MAEvGC,aAFuG;AAAA,MAExFC,gBAFwF;;AAI9G,MAAMC,cAAc,GAChB,oBAAC,mBAAD;AAAqB,IAAA,OAAO,EAAEP,OAA9B;AAAuC,IAAA,WAAW,EAAE;AAAA,aAAMM,gBAAgB,CAAC,IAAD,CAAtB;AAAA,KAApD;AAAkF,IAAA,KAAK,EAAEJ;AAAzF,KACKV,KAAK,CAACgB,QAAN,CAAeC,IAAf,CAAoBR,KAApB,CADL,CADJ;AAMA,MAAMS,mBAAmB,GAAGjB,UAAU,CAAC,kBAAD,EAAqB;AACvDM,IAAAA,SAAS,EAATA,SADuD;AAEvD,2BAAuBM;AAFgC,GAArB,CAAtC;AAKA,SACI,oBAAC,OAAD;AACI,IAAA,SAAS,EAAEK,mBADf;AAEI,IAAA,eAAe,MAFnB;AAGI,IAAA,KAAK,EAAEf,YAAY,CAACgB;AAHxB,KAIQR,iBAJR;AAKI,IAAA,IAAI,EAAEI;AALV,MAOKT,QAPL,CADJ;AAWH,CA1BD;;AA4BA,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\n// @ts-ignore flow import\nimport Tooltip, { TooltipProps, TooltipTheme } from '../tooltip';\nimport ImageTooltipContent from './ImageTooltipContent';\n\nimport './ImageTooltip.scss';\n\n// We manually set \"text\" with our specific visual tooltip content.\ntype OtherTooltipProps = Omit<TooltipProps, 'text'>;\n\nexport type ImageTooltipProps = {\n    /** A React element to put the tooltip on */\n    children: React.ReactChild;\n    /** A string to be used in the tooltip's paragraph content */\n    content: string;\n    /** A React component representing the image used in the visual tooltip */\n    image: React.ReactElement;\n    /** A string to be used in the tooltip's title heading */\n    title: string;\n} & OtherTooltipProps;\n\nconst ImageTooltip = ({ children, className, content, image, title, ...otherTooltipProps }: ImageTooltipProps) => {\n    // State to track if the image has been loaded before displaying the tooltip\n    const [isImageLoaded, setIsImageLoaded] = React.useState(false);\n\n    const tooltipContent = (\n        <ImageTooltipContent content={content} onImageLoad={() => setIsImageLoaded(true)} title={title}>\n            {React.Children.only(image)}\n        </ImageTooltipContent>\n    );\n\n    const imageTooltipClasses = classNames('bdl-ImageTooltip', {\n        className,\n        'bdl-is-image-loaded': isImageLoaded,\n    });\n\n    return (\n        <Tooltip\n            className={imageTooltipClasses}\n            showCloseButton\n            theme={TooltipTheme.CALLOUT}\n            {...otherTooltipProps}\n            text={tooltipContent}\n        >\n            {children}\n        </Tooltip>\n    );\n};\n\nexport default ImageTooltip;\n"],"file":"ImageTooltip.js"}
+{"version":3,"sources":["../../../src/components/image-tooltip/ImageTooltip.tsx"],"names":["React","classNames","Tooltip","TooltipTheme","ImageTooltipContent","ImageTooltip","children","className","content","image","title","otherTooltipProps","useState","isImageLoaded","setIsImageLoaded","tooltipContent","Children","only","imageTooltipClasses","CALLOUT"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB,C,CAEA;;AACA,OAAOC,OAAP,IAAgCC,YAAhC,QAAoD,YAApD;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,OAAO,qBAAP,C,CAEA;;AAcA,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAA6F;AAAA,MAA1FC,QAA0F,QAA1FA,QAA0F;AAAA,MAAhFC,SAAgF,QAAhFA,SAAgF;AAAA,MAArEC,OAAqE,QAArEA,OAAqE;AAAA,MAA5DC,KAA4D,QAA5DA,KAA4D;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA3CC,iBAA2C;;AAC9G;AAD8G,wBAEpEX,KAAK,CAACY,QAAN,CAAe,KAAf,CAFoE;AAAA;AAAA,MAEvGC,aAFuG;AAAA,MAExFC,gBAFwF;;AAI9G,MAAMC,cAAc,GAChB,oBAAC,mBAAD;AAAqB,IAAA,OAAO,EAAEP,OAA9B;AAAuC,IAAA,WAAW,EAAE;AAAA,aAAMM,gBAAgB,CAAC,IAAD,CAAtB;AAAA,KAApD;AAAkF,IAAA,KAAK,EAAEJ;AAAzF,KACKV,KAAK,CAACgB,QAAN,CAAeC,IAAf,CAAoBR,KAApB,CADL,CADJ;AAMA,MAAMS,mBAAmB,GAAGjB,UAAU,CAAC,kBAAD,EAAqBM,SAArB,EAAgC;AAClE,2BAAuBM;AAD2C,GAAhC,CAAtC;AAIA,SACI,oBAAC,OAAD;AACI,IAAA,SAAS,EAAEK,mBADf;AAEI,IAAA,eAAe,MAFnB;AAGI,IAAA,KAAK,EAAEf,YAAY,CAACgB;AAHxB,KAIQR,iBAJR;AAKI,IAAA,IAAI,EAAEI;AALV,MAOKT,QAPL,CADJ;AAWH,CAzBD;;AA2BA,eAAeD,YAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\n// @ts-ignore flow import\nimport Tooltip, { TooltipProps, TooltipTheme } from '../tooltip';\nimport ImageTooltipContent from './ImageTooltipContent';\n\nimport './ImageTooltip.scss';\n\n// We manually set \"text\" with our specific visual tooltip content.\ntype OtherTooltipProps = Omit<TooltipProps, 'text'>;\n\nexport type ImageTooltipProps = {\n    /** A React element to put the tooltip on */\n    children: React.ReactChild;\n    /** A string to be used in the tooltip's paragraph content */\n    content: string;\n    /** A React component representing the image used in the visual tooltip */\n    image: React.ReactElement;\n    /** A string to be used in the tooltip's title heading */\n    title: string;\n} & OtherTooltipProps;\n\nconst ImageTooltip = ({ children, className, content, image, title, ...otherTooltipProps }: ImageTooltipProps) => {\n    // State to track if the image has been loaded before displaying the tooltip\n    const [isImageLoaded, setIsImageLoaded] = React.useState(false);\n\n    const tooltipContent = (\n        <ImageTooltipContent content={content} onImageLoad={() => setIsImageLoaded(true)} title={title}>\n            {React.Children.only(image)}\n        </ImageTooltipContent>\n    );\n\n    const imageTooltipClasses = classNames('bdl-ImageTooltip', className, {\n        'bdl-is-image-loaded': isImageLoaded,\n    });\n\n    return (\n        <Tooltip\n            className={imageTooltipClasses}\n            showCloseButton\n            theme={TooltipTheme.CALLOUT}\n            {...otherTooltipProps}\n            text={tooltipContent}\n        >\n            {children}\n        </Tooltip>\n    );\n};\n\nexport default ImageTooltip;\n"],"file":"ImageTooltip.js"}

package/es/components/media-query/constants.js

@@ -0,0 +1,26 @@
+import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';
+export var SIZE_SMALL = smallScreen;
+export var SIZE_MEDIUM = mediumScreen;
+export var SIZE_LARGE = largeScreen;
+export var HOVER = '(hover: hover)';
+export var ANY_HOVER = '(any-hover: hover)';
+export var POINTER_FINE = '(pointer: fine)';
+export var POINTER_COARSE = '(pointer: coarse)';
+export var ANY_POINTER_FINE = '(any-pointer: fine)';
+export var ANY_POINTER_COARSE = '(any-pointer: coarse)';
+export var POINTER_TYPE = {
+  fine: 'fine',
+  coarse: 'coarse',
+  none: 'none'
+};
+export var HOVER_TYPE = {
+  hover: 'hover',
+  none: 'none'
+};
+export var VIEW_SIZE_TYPE = {
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  xlarge: 'x-large'
+};
+//# sourceMappingURL=constants.js.map

package/es/components/media-query/constants.js.flow

@@ -0,0 +1,32 @@
+import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';
+
+export const SIZE_SMALL = smallScreen;
+export const SIZE_MEDIUM = mediumScreen;
+export const SIZE_LARGE = largeScreen;
+
+export const HOVER = '(hover: hover)';
+export const ANY_HOVER = '(any-hover: hover)';
+
+export const POINTER_FINE = '(pointer: fine)';
+export const POINTER_COARSE = '(pointer: coarse)';
+
+export const ANY_POINTER_FINE = '(any-pointer: fine)';
+export const ANY_POINTER_COARSE = '(any-pointer: coarse)';
+
+export const POINTER_TYPE = {
+    fine: 'fine',
+    coarse: 'coarse',
+    none: 'none',
+};
+
+export const HOVER_TYPE = {
+    hover: 'hover',
+    none: 'none',
+};
+
+export const VIEW_SIZE_TYPE = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    xlarge: 'x-large',
+};

package/es/components/media-query/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-query/constants.js"],"names":["smallScreen","mediumScreen","largeScreen","SIZE_SMALL","SIZE_MEDIUM","SIZE_LARGE","HOVER","ANY_HOVER","POINTER_FINE","POINTER_COARSE","ANY_POINTER_FINE","ANY_POINTER_COARSE","POINTER_TYPE","fine","coarse","none","HOVER_TYPE","hover","VIEW_SIZE_TYPE","small","medium","large","xlarge"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,wBAAvD;AAEA,OAAO,IAAMC,UAAU,GAAGH,WAAnB;AACP,OAAO,IAAMI,WAAW,GAAGH,YAApB;AACP,OAAO,IAAMI,UAAU,GAAGH,WAAnB;AAEP,OAAO,IAAMI,KAAK,GAAG,gBAAd;AACP,OAAO,IAAMC,SAAS,GAAG,oBAAlB;AAEP,OAAO,IAAMC,YAAY,GAAG,iBAArB;AACP,OAAO,IAAMC,cAAc,GAAG,mBAAvB;AAEP,OAAO,IAAMC,gBAAgB,GAAG,qBAAzB;AACP,OAAO,IAAMC,kBAAkB,GAAG,uBAA3B;AAEP,OAAO,IAAMC,YAAY,GAAG;AACxBC,EAAAA,IAAI,EAAE,MADkB;AAExBC,EAAAA,MAAM,EAAE,QAFgB;AAGxBC,EAAAA,IAAI,EAAE;AAHkB,CAArB;AAMP,OAAO,IAAMC,UAAU,GAAG;AACtBC,EAAAA,KAAK,EAAE,OADe;AAEtBF,EAAAA,IAAI,EAAE;AAFgB,CAAnB;AAKP,OAAO,IAAMG,cAAc,GAAG;AAC1BC,EAAAA,KAAK,EAAE,OADmB;AAE1BC,EAAAA,MAAM,EAAE,QAFkB;AAG1BC,EAAAA,KAAK,EAAE,OAHmB;AAI1BC,EAAAA,MAAM,EAAE;AAJkB,CAAvB","sourcesContent":["import { smallScreen, mediumScreen, largeScreen } from '../../styles/variables';\n\nexport const SIZE_SMALL = smallScreen;\nexport const SIZE_MEDIUM = mediumScreen;\nexport const SIZE_LARGE = largeScreen;\n\nexport const HOVER = '(hover: hover)';\nexport const ANY_HOVER = '(any-hover: hover)';\n\nexport const POINTER_FINE = '(pointer: fine)';\nexport const POINTER_COARSE = '(pointer: coarse)';\n\nexport const ANY_POINTER_FINE = '(any-pointer: fine)';\nexport const ANY_POINTER_COARSE = '(any-pointer: coarse)';\n\nexport const POINTER_TYPE = {\n    fine: 'fine',\n    coarse: 'coarse',\n    none: 'none',\n};\n\nexport const HOVER_TYPE = {\n    hover: 'hover',\n    none: 'none',\n};\n\nexport const VIEW_SIZE_TYPE = {\n    small: 'small',\n    medium: 'medium',\n    large: 'large',\n    xlarge: 'x-large',\n};\n"],"file":"constants.js"}

package/es/components/media-query/index.js

@@ -0,0 +1,3 @@
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as withMediaQuery } from './withMediaQuery';
+//# sourceMappingURL=index.js.map

package/es/components/media-query/index.js.flow

@@ -0,0 +1,4 @@
+// @flow
+
+export { default as useMediaQuery } from './useMediaQuery';
+export { default as withMediaQuery } from './withMediaQuery';

package/es/components/media-query/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-query/index.js"],"names":["default","useMediaQuery","withMediaQuery"],"mappings":"AAEA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC;AACA,SAASD,OAAO,IAAIE,cAApB,QAA0C,kBAA1C","sourcesContent":["// @flow\n\nexport { default as useMediaQuery } from './useMediaQuery';\nexport { default as withMediaQuery } from './withMediaQuery';\n"],"file":"index.js"}

package/es/components/media-query/stories/MediaQuery.stories.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { VIEW_SIZE_TYPE } from '../constants';
+import notes from './MediaQuery.stories.md';
+import useMediaQuery from '../useMediaQuery';
+import withMediaQuery from '../withMediaQuery';
+export var CustomHook = function CustomHook() {
+  var _useMediaQuery = useMediaQuery(),
+      hover = _useMediaQuery.hover,
+      pointer = _useMediaQuery.pointer,
+      size = _useMediaQuery.size,
+      viewWidth = _useMediaQuery.viewWidth,
+      viewHeight = _useMediaQuery.viewHeight;
+
+  return React.createElement("div", null, React.createElement("p", null, React.createElement("b", null, "Hover:"), React.createElement("span", null, " ".concat(hover))), React.createElement("p", null, React.createElement("b", null, "Pointer:"), React.createElement("span", null, " ".concat(pointer))), React.createElement("p", null, React.createElement("b", null, "View Dimensions:"), React.createElement("span", null, " ".concat(viewWidth, "px (w) x ").concat(viewHeight, "px (h)"))), size === VIEW_SIZE_TYPE.small && React.createElement("h4", null, "This view is small"), size === VIEW_SIZE_TYPE.medium && React.createElement("h3", null, "This view is medium"), size === VIEW_SIZE_TYPE.large && React.createElement("h2", null, "This view is large"), size === VIEW_SIZE_TYPE.xlarge && React.createElement("h1", null, "This view is xlarge"));
+};
+
+var DemoComponent = function DemoComponent(props) {
+  var hover = props.hover,
+      pointer = props.pointer,
+      size = props.size,
+      viewWidth = props.viewWidth,
+      viewHeight = props.viewHeight;
+  return React.createElement("div", null, React.createElement("p", null, React.createElement("b", null, "Hover:"), React.createElement("span", null, " ".concat(hover))), React.createElement("p", null, React.createElement("b", null, "Pointer:"), React.createElement("span", null, " ".concat(pointer))), React.createElement("p", null, React.createElement("b", null, "View Dimensions:"), React.createElement("span", null, " ".concat(viewWidth, "px (w) x ").concat(viewHeight, "px (h)"))), size === 'small' && React.createElement("h4", null, "This view is small"), size === 'medium' && React.createElement("h3", null, "This view is medium"), size === 'large' && React.createElement("h2", null, "This view is large"), size === 'x-large' && React.createElement("h1", null, "This view is xlarge"));
+};
+
+export var HigherOrderComponent = withMediaQuery(DemoComponent);
+export default {
+  title: 'Components|MediaQuery',
+  component: useMediaQuery,
+  parameters: {
+    notes: notes,
+    viewport: {
+      defaultViewport: 'tablet'
+    }
+  }
+};
+//# sourceMappingURL=MediaQuery.stories.js.map

package/es/components/media-query/stories/MediaQuery.stories.js.flow

@@ -0,0 +1,80 @@
+// @flow
+
+import * as React from 'react';
+
+import { VIEW_SIZE_TYPE } from '../constants';
+import notes from './MediaQuery.stories.md';
+import useMediaQuery from '../useMediaQuery';
+import withMediaQuery from '../withMediaQuery';
+
+export const CustomHook = () => {
+    const { hover, pointer, size, viewWidth, viewHeight } = useMediaQuery();
+
+    return (
+        <div>
+            <p>
+                <b>Hover:</b>
+                <span>{` ${hover}`}</span>
+            </p>
+            <p>
+                <b>Pointer:</b>
+                <span>{` ${pointer}`}</span>
+            </p>
+            <p>
+                <b>View Dimensions:</b>
+                <span>{` ${viewWidth}px (w) x ${viewHeight}px (h)`}</span>
+            </p>
+            {size === VIEW_SIZE_TYPE.small && <h4>This view is small</h4>}
+            {size === VIEW_SIZE_TYPE.medium && <h3>This view is medium</h3>}
+            {size === VIEW_SIZE_TYPE.large && <h2>This view is large</h2>}
+            {size === VIEW_SIZE_TYPE.xlarge && <h1>This view is xlarge</h1>}
+        </div>
+    );
+};
+
+type Props = {
+    children?: any,
+    hover: string,
+    pointer: string,
+    size: string,
+    viewHeight: number,
+    viewWidth: number,
+};
+
+const DemoComponent = (props: Props) => {
+    const { hover, pointer, size, viewWidth, viewHeight } = props;
+
+    return (
+        <div>
+            <p>
+                <b>Hover:</b>
+                <span>{` ${hover}`}</span>
+            </p>
+            <p>
+                <b>Pointer:</b>
+                <span>{` ${pointer}`}</span>
+            </p>
+            <p>
+                <b>View Dimensions:</b>
+                <span>{` ${viewWidth}px (w) x ${viewHeight}px (h)`}</span>
+            </p>
+            {size === 'small' && <h4>This view is small</h4>}
+            {size === 'medium' && <h3>This view is medium</h3>}
+            {size === 'large' && <h2>This view is large</h2>}
+            {size === 'x-large' && <h1>This view is xlarge</h1>}
+        </div>
+    );
+};
+
+export const HigherOrderComponent = withMediaQuery(DemoComponent);
+
+export default {
+    title: 'Components|MediaQuery',
+    component: useMediaQuery,
+    parameters: {
+        notes,
+        viewport: {
+            defaultViewport: 'tablet',
+        },
+    },
+};

package/es/components/media-query/stories/MediaQuery.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/media-query/stories/MediaQuery.stories.js"],"names":["React","VIEW_SIZE_TYPE","notes","useMediaQuery","withMediaQuery","CustomHook","hover","pointer","size","viewWidth","viewHeight","small","medium","large","xlarge","DemoComponent","props","HigherOrderComponent","title","component","parameters","viewport","defaultViewport"],"mappings":"AAEA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,cAAT,QAA+B,cAA/B;AACA,OAAOC,KAAP,MAAkB,yBAAlB;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AAEA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AAAA,uBAC4BF,aAAa,EADzC;AAAA,MACpBG,KADoB,kBACpBA,KADoB;AAAA,MACbC,OADa,kBACbA,OADa;AAAA,MACJC,IADI,kBACJA,IADI;AAAA,MACEC,SADF,kBACEA,SADF;AAAA,MACaC,UADb,kBACaA,UADb;;AAG5B,SACI,iCACI,+BACI,wCADJ,EAEI,6CAAWJ,KAAX,EAFJ,CADJ,EAKI,+BACI,0CADJ,EAEI,6CAAWC,OAAX,EAFJ,CALJ,EASI,+BACI,kDADJ,EAEI,6CAAWE,SAAX,sBAAgCC,UAAhC,YAFJ,CATJ,EAaKF,IAAI,KAAKP,cAAc,CAACU,KAAxB,IAAiC,qDAbtC,EAcKH,IAAI,KAAKP,cAAc,CAACW,MAAxB,IAAkC,sDAdvC,EAeKJ,IAAI,KAAKP,cAAc,CAACY,KAAxB,IAAiC,qDAftC,EAgBKL,IAAI,KAAKP,cAAc,CAACa,MAAxB,IAAkC,sDAhBvC,CADJ;AAoBH,CAvBM;;AAkCP,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAkB;AAAA,MAC5BV,KAD4B,GACoBU,KADpB,CAC5BV,KAD4B;AAAA,MACrBC,OADqB,GACoBS,KADpB,CACrBT,OADqB;AAAA,MACZC,IADY,GACoBQ,KADpB,CACZR,IADY;AAAA,MACNC,SADM,GACoBO,KADpB,CACNP,SADM;AAAA,MACKC,UADL,GACoBM,KADpB,CACKN,UADL;AAGpC,SACI,iCACI,+BACI,wCADJ,EAEI,6CAAWJ,KAAX,EAFJ,CADJ,EAKI,+BACI,0CADJ,EAEI,6CAAWC,OAAX,EAFJ,CALJ,EASI,+BACI,kDADJ,EAEI,6CAAWE,SAAX,sBAAgCC,UAAhC,YAFJ,CATJ,EAaKF,IAAI,KAAK,OAAT,IAAoB,qDAbzB,EAcKA,IAAI,KAAK,QAAT,IAAqB,sDAd1B,EAeKA,IAAI,KAAK,OAAT,IAAoB,qDAfzB,EAgBKA,IAAI,KAAK,SAAT,IAAsB,sDAhB3B,CADJ;AAoBH,CAvBD;;AAyBA,OAAO,IAAMS,oBAAoB,GAAGb,cAAc,CAACW,aAAD,CAA3C;AAEP,eAAe;AACXG,EAAAA,KAAK,EAAE,uBADI;AAEXC,EAAAA,SAAS,EAAEhB,aAFA;AAGXiB,EAAAA,UAAU,EAAE;AACRlB,IAAAA,KAAK,EAALA,KADQ;AAERmB,IAAAA,QAAQ,EAAE;AACNC,MAAAA,eAAe,EAAE;AADX;AAFF;AAHD,CAAf","sourcesContent":["// @flow\n\nimport * as React from 'react';\n\nimport { VIEW_SIZE_TYPE } from '../constants';\nimport notes from './MediaQuery.stories.md';\nimport useMediaQuery from '../useMediaQuery';\nimport withMediaQuery from '../withMediaQuery';\n\nexport const CustomHook = () => {\n    const { hover, pointer, size, viewWidth, viewHeight } = useMediaQuery();\n\n    return (\n        <div>\n            <p>\n                <b>Hover:</b>\n                <span>{` ${hover}`}</span>\n            </p>\n            <p>\n                <b>Pointer:</b>\n                <span>{` ${pointer}`}</span>\n            </p>\n            <p>\n                <b>View Dimensions:</b>\n                <span>{` ${viewWidth}px (w) x ${viewHeight}px (h)`}</span>\n            </p>\n            {size === VIEW_SIZE_TYPE.small && <h4>This view is small</h4>}\n            {size === VIEW_SIZE_TYPE.medium && <h3>This view is medium</h3>}\n            {size === VIEW_SIZE_TYPE.large && <h2>This view is large</h2>}\n            {size === VIEW_SIZE_TYPE.xlarge && <h1>This view is xlarge</h1>}\n        </div>\n    );\n};\n\ntype Props = {\n    children?: any,\n    hover: string,\n    pointer: string,\n    size: string,\n    viewHeight: number,\n    viewWidth: number,\n};\n\nconst DemoComponent = (props: Props) => {\n    const { hover, pointer, size, viewWidth, viewHeight } = props;\n\n    return (\n        <div>\n            <p>\n                <b>Hover:</b>\n                <span>{` ${hover}`}</span>\n            </p>\n            <p>\n                <b>Pointer:</b>\n                <span>{` ${pointer}`}</span>\n            </p>\n            <p>\n                <b>View Dimensions:</b>\n                <span>{` ${viewWidth}px (w) x ${viewHeight}px (h)`}</span>\n            </p>\n            {size === 'small' && <h4>This view is small</h4>}\n            {size === 'medium' && <h3>This view is medium</h3>}\n            {size === 'large' && <h2>This view is large</h2>}\n            {size === 'x-large' && <h1>This view is xlarge</h1>}\n        </div>\n    );\n};\n\nexport const HigherOrderComponent = withMediaQuery(DemoComponent);\n\nexport default {\n    title: 'Components|MediaQuery',\n    component: useMediaQuery,\n    parameters: {\n        notes,\n        viewport: {\n            defaultViewport: 'tablet',\n        },\n    },\n};\n"],"file":"MediaQuery.stories.js"}

package/es/components/media-query/types.js

@@ -0,0 +1,2 @@
+import { POINTER_TYPE, HOVER_TYPE } from './constants';
+//# sourceMappingURL=types.js.map

package/es/components/media-query/types.js.flow

@@ -0,0 +1,29 @@
+// @flow
+
+import { POINTER_TYPE, HOVER_TYPE } from './constants';
+
+export type MediaPointerType = POINTER_TYPE.none | POINTER_TYPE.coarse | POINTER_TYPE.fine;
+export type MediaHoverType = HOVER_TYPE.none | HOVER_TYPE.hover;
+
+export type MediaFeatures = {
+    anyHover?: MediaHoverType,
+    anyPointer?: MediaPointerType,
+    hover?: MediaHoverType,
+    maxHeight?: number,
+    maxWidth?: number,
+    minHeight?: number,
+    minWidth?: number,
+    pointer?: MediaPointerType,
+};
+
+export type MediaShape = {
+    anyHover: MediaHoverType,
+    anyPointer: MediaPointerType,
+    hover: MediaHoverType,
+    pointer: MediaPointerType,
+    size: boolean,
+    viewHeight: number,
+    viewWidth: number,
+};
+
+export type MediaQuery = string | MediaFeatures;

package/es/components/media-query/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/media-query/types.js"],"names":["POINTER_TYPE","HOVER_TYPE"],"mappings":"AAEA,SAASA,YAAT,EAAuBC,UAAvB,QAAyC,aAAzC","sourcesContent":["// @flow\n\nimport { POINTER_TYPE, HOVER_TYPE } from './constants';\n\nexport type MediaPointerType = POINTER_TYPE.none | POINTER_TYPE.coarse | POINTER_TYPE.fine;\nexport type MediaHoverType = HOVER_TYPE.none | HOVER_TYPE.hover;\n\nexport type MediaFeatures = {\n    anyHover?: MediaHoverType,\n    anyPointer?: MediaPointerType,\n    hover?: MediaHoverType,\n    maxHeight?: number,\n    maxWidth?: number,\n    minHeight?: number,\n    minWidth?: number,\n    pointer?: MediaPointerType,\n};\n\nexport type MediaShape = {\n    anyHover: MediaHoverType,\n    anyPointer: MediaPointerType,\n    hover: MediaHoverType,\n    pointer: MediaPointerType,\n    size: boolean,\n    viewHeight: number,\n    viewWidth: number,\n};\n\nexport type MediaQuery = string | MediaFeatures;\n"],"file":"types.js"}