@jobber/components 5.5.1-design-css.1 → 5.5.2

package/dist/Menu-QhoQyieU.js

@@ -1,167 +0,0 @@
-import React, { useState, useRef, useId } from 'react';
-import classnames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-ByKUsvjX.js';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DmTzYcQH.js';
-import { usePopper } from 'react-popper';
-import { u as useIsMounted_2 } from './useIsMounted-B9zhVMkH.js';
-import ReactDOM from 'react-dom';
-import { u as useFocusTrap_2 } from './useFocusTrap-DrwNSBFK.js';
-import { B as Button } from './Button-17M2X-lD.js';
-import { T as Typography } from './Typography-DCrI0yCx.js';
-import { I as Icon } from './Icon-DEiA5DBH.js';
-import { f as formFieldFocusAttribute } from './useFormFieldFocus-DVOtVzuv.js';
-
-var useWindowDimensions$1 = {};
-
-Object.defineProperty(useWindowDimensions$1, "__esModule", { value: true });
-var useWindowDimensions_2 = useWindowDimensions$1.useWindowDimensions = void 0;
-const react_1 = React;
-function getWindowDimensions() {
-    if (!(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)) {
-        return {
-            width: 0,
-            height: 0,
-        };
-    }
-    const { innerWidth: width, innerHeight: height } = window;
-    return {
-        width,
-        height,
-    };
-}
-function useWindowDimensions() {
-    const [windowDimensions, setWindowDimensions] = (0, react_1.useState)(getWindowDimensions());
-    (0, react_1.useEffect)(() => {
-        function handleResize() {
-            setWindowDimensions(getWindowDimensions());
-        }
-        window === null || window === void 0 ? void 0 : window.addEventListener("resize", handleResize);
-        return () => window === null || window === void 0 ? void 0 : window.removeEventListener("resize", handleResize);
-    }, []);
-    return windowDimensions;
-}
-useWindowDimensions_2 = useWindowDimensions$1.useWindowDimensions = useWindowDimensions;
-
-var styles = {"wrapper":"dT6M9tp1sZc-","popperContainer":"_9pvjsJS6vsg-","shadowRef":"G7Nzd9sctos-","menu":"Qmxlsj0D3qM-","section":"LaKFjYCLHZc-","sectionHeader":"_7HB7dWnqCi0-","action":"ZuceCiefKqw-","overlay":"eKnUAucwwWU-","fullWidth":"oaxefr58z-E-","screenReaderOnly":"vz9opIdwHFg-"};
-
-const SMALL_SCREEN_BREAKPOINT = 489;
-const MENU_OFFSET = 6;
-const variation = {
-    overlayStartStop: { opacity: 0 },
-    startOrStop: (placement) => {
-        let y = 10;
-        if (placement === null || placement === void 0 ? void 0 : placement.includes("bottom"))
-            y *= -1;
-        if (window.innerWidth < 640)
-            y = 150;
-        return { opacity: 0, y };
-    },
-    done: { opacity: 1, y: 0 },
-};
-// eslint-disable-next-line max-statements
-function Menu({ activator, items }) {
-    var _a, _b;
-    const [visible, setVisible] = useState(false);
-    const shadowRef = useRef(null);
-    const { width } = useWindowDimensions_2();
-    const buttonID = useId();
-    const menuID = useId();
-    const fullWidth = ((_a = activator === null || activator === void 0 ? void 0 : activator.props) === null || _a === void 0 ? void 0 : _a.fullWidth) || false;
-    const wrapperClasses = classnames(styles.wrapper, {
-        [styles.fullWidth]: fullWidth,
-    });
-    useOnKeyDown_2(handleKeyboardShortcut, ["Escape"]);
-    // useRefocusOnActivator must come before useFocusTrap for them both to work
-    useRefocusOnActivator_2(visible);
-    const menuRef = useFocusTrap_2(visible);
-    const [popperElement, setPopperElement] = useState(null);
-    const { styles: popperStyles, attributes, state, } = usePopper((_b = shadowRef.current) === null || _b === void 0 ? void 0 : _b.nextElementSibling, popperElement, {
-        placement: "bottom-start",
-        modifiers: [
-            {
-                name: "flip",
-                options: {
-                    flipVariations: true,
-                },
-            },
-            {
-                name: "offset",
-                options: {
-                    offset: [0, MENU_OFFSET],
-                },
-            },
-        ],
-    });
-    const positionAttributes = width > SMALL_SCREEN_BREAKPOINT
-        ? Object.assign(Object.assign({}, attributes.popper), { style: popperStyles.popper }) : {};
-    if (!activator) {
-        activator = (React.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
-    }
-    return (React.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
-        React.createElement("span", { ref: shadowRef, className: styles.shadowRef }),
-        React.cloneElement(activator, {
-            onClick: toggle(activator.props.onClick),
-            id: buttonID,
-            ariaControls: menuID,
-            ariaExpanded: visible,
-            ariaHaspopup: true,
-        }),
-        React.createElement(MenuPortal, null,
-            React.createElement(AnimatePresence, null, visible && (React.createElement(React.Fragment, null,
-                React.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
-                        type: "tween",
-                        duration: 0.15,
-                    } }),
-                React.createElement("div", Object.assign({ ref: setPopperElement, className: styles.popperContainer }, positionAttributes, formFieldFocusAttribute), items.length > 0 && (React.createElement(motion.div, { className: styles.menu, role: "menu", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: state === null || state === void 0 ? void 0 : state.placement, ref: menuRef, transition: {
-                        type: "tween",
-                        duration: 0.25,
-                    } }, items.map((item, key) => (React.createElement("div", { key: key, className: styles.section },
-                    item.header && React.createElement(SectionHeader, { text: item.header }),
-                    item.actions.map(action => (React.createElement(Action, Object.assign({ sectionLabel: item.header, key: action.label }, action))))))))))))))));
-    function toggle(callbackPassthrough) {
-        return (event) => {
-            setVisible(!visible);
-            callbackPassthrough && callbackPassthrough(event);
-        };
-    }
-    function hide() {
-        setVisible(false);
-    }
-    function handleKeyboardShortcut(event) {
-        const { key } = event;
-        if (!visible)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        key === "Escape" && hide();
-    }
-    function handleParentClick(event) {
-        // Since the menu is being rendered within the same parent as the activator,
-        // we need to stop the click event from bubbling up. If the Menu component
-        // gets added within a parent that has a click handler, any click on the
-        // menu will trigger the parent's click handler.
-        event.stopPropagation();
-    }
-}
-function SectionHeader({ text }) {
-    return (React.createElement("div", { className: styles.sectionHeader, "aria-hidden": true },
-        React.createElement(Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, text)));
-}
-function Action({ label, sectionLabel, icon, onClick }) {
-    const actionButtonRef = useRef();
-    return (React.createElement("button", { role: "menuitem", type: "button", className: styles.action, key: label, onClick: onClick, ref: actionButtonRef },
-        icon && React.createElement(Icon, { name: icon }),
-        React.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: "textSecondary" },
-            sectionLabel && (React.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
-            label)));
-}
-function MenuPortal({ children }) {
-    const mounted = useIsMounted_2();
-    if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
-        return null;
-    }
-    return ReactDOM.createPortal(children, document.body);
-}
-
-export { Menu as M };

package/dist/useFormFieldFocus-C3wB3RnM.js

@@ -1,60 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function useActiveElement() {
-    const [active, setActive] = React.useState(document === null || document === void 0 ? void 0 : document.activeElement);
-    const handleFocusIn = () => {
-        setActive(document === null || document === void 0 ? void 0 : document.activeElement);
-    };
-    React.useEffect(() => {
-        document === null || document === void 0 ? void 0 : document.addEventListener("focusin", handleFocusIn);
-        return () => {
-            document === null || document === void 0 ? void 0 : document.removeEventListener("focusin", handleFocusIn);
-        };
-    }, []);
-    return active;
-}
-
-const PORTAL_FOCUS_ATTRIBUTE_NAME = "data-atl-maintain-portal-focus";
-const formFieldFocusAttribute = {
-    [PORTAL_FOCUS_ATTRIBUTE_NAME]: "true",
-};
-function useFormFieldFocus(props) {
-    var _a;
-    const [focused, setFocused] = React.useState(false);
-    const activeElement = useActiveElement();
-    const activeElementRef = React.useRef(activeElement);
-    React.useEffect(() => {
-        activeElementRef.current = activeElement;
-    }, [activeElement]);
-    function handleFocusIn() {
-        setFocused(true);
-    }
-    function handleFocusOut() {
-        setTimeout(() => {
-            var _a, _b, _c;
-            const focusedElementWithinWrapper = (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
-            const focusException = (_c = activeElementRef.current) === null || _c === void 0 ? void 0 : _c.closest(`[${PORTAL_FOCUS_ATTRIBUTE_NAME}='true']`);
-            if (!focusedElementWithinWrapper && !focusException) {
-                setFocused(false);
-            }
-        }, 1);
-    }
-    React.useEffect(() => {
-        var _a, _b, _c, _d;
-        (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.addEventListener("focusin", handleFocusIn);
-        (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.addEventListener("focusout", handleFocusOut);
-        return () => {
-            var _a, _b, _c, _d;
-            (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.removeEventListener("focusin", handleFocusIn);
-            (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.removeEventListener("focusout", handleFocusOut);
-        };
-    }, [(_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current]);
-    return {
-        focused,
-    };
-}
-
-exports.formFieldFocusAttribute = formFieldFocusAttribute;
-exports.useFormFieldFocus = useFormFieldFocus;

package/dist/useFormFieldFocus-DVOtVzuv.js

@@ -1,57 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-
-function useActiveElement() {
-    const [active, setActive] = useState(document === null || document === void 0 ? void 0 : document.activeElement);
-    const handleFocusIn = () => {
-        setActive(document === null || document === void 0 ? void 0 : document.activeElement);
-    };
-    useEffect(() => {
-        document === null || document === void 0 ? void 0 : document.addEventListener("focusin", handleFocusIn);
-        return () => {
-            document === null || document === void 0 ? void 0 : document.removeEventListener("focusin", handleFocusIn);
-        };
-    }, []);
-    return active;
-}
-
-const PORTAL_FOCUS_ATTRIBUTE_NAME = "data-atl-maintain-portal-focus";
-const formFieldFocusAttribute = {
-    [PORTAL_FOCUS_ATTRIBUTE_NAME]: "true",
-};
-function useFormFieldFocus(props) {
-    var _a;
-    const [focused, setFocused] = useState(false);
-    const activeElement = useActiveElement();
-    const activeElementRef = useRef(activeElement);
-    useEffect(() => {
-        activeElementRef.current = activeElement;
-    }, [activeElement]);
-    function handleFocusIn() {
-        setFocused(true);
-    }
-    function handleFocusOut() {
-        setTimeout(() => {
-            var _a, _b, _c;
-            const focusedElementWithinWrapper = (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement);
-            const focusException = (_c = activeElementRef.current) === null || _c === void 0 ? void 0 : _c.closest(`[${PORTAL_FOCUS_ATTRIBUTE_NAME}='true']`);
-            if (!focusedElementWithinWrapper && !focusException) {
-                setFocused(false);
-            }
-        }, 1);
-    }
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.addEventListener("focusin", handleFocusIn);
-        (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.addEventListener("focusout", handleFocusOut);
-        return () => {
-            var _a, _b, _c, _d;
-            (_b = (_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.removeEventListener("focusin", handleFocusIn);
-            (_d = (_c = props.wrapperRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.removeEventListener("focusout", handleFocusOut);
-        };
-    }, [(_a = props.wrapperRef) === null || _a === void 0 ? void 0 : _a.current]);
-    return {
-        focused,
-    };
-}
-
-export { formFieldFocusAttribute as f, useFormFieldFocus as u };