@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/lib/__tests__/hooks/useProvidedStateOrCreate.test.jsx

@@ -1,56 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const useProvidedStateOrCreate_1 = require("../../hooks/useProvidedStateOrCreate");
-const react_1 = require("@testing-library/react");
-const react_2 = __importStar(require("react"));
-it('will use the provided state', () => {
-    const Component = () => {
-        const [state, setState] = react_2.useState('foo');
-        const [combinedState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(state, setState, 'bar');
-        return <div>{combinedState}</div>;
-    };
-    const doc = react_1.render(<Component />);
-    expect(doc.baseElement.textContent).toEqual('foo');
-});
-it('will set state correctly when provided a set state method', () => {
-    const Component = () => {
-        const [state, setState] = react_2.useState('foo');
-        const [combinedState, setCombinedState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(state, setState, 'bar');
-        if (combinedState !== 'baz')
-            setCombinedState('baz');
-        return <div>{combinedState}</div>;
-    };
-    const doc = react_1.render(<Component />);
-    expect(doc.baseElement.textContent).toEqual('baz');
-});
-it('if not provided a state, will use an internal state', () => {
-    const Component = () => {
-        const state = undefined;
-        const setState = undefined;
-        const [combinedState, setCombinedState] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(state, setState, '');
-        if (combinedState !== 'bar')
-            setCombinedState('bar');
-        return <div>{combinedState}</div>;
-    };
-    const doc = react_1.render(<Component />);
-    expect(doc.baseElement.textContent).toEqual('bar');
-});

package/lib/__tests__/useSafeTimeout.test.jsx

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_hooks_1 = require("@testing-library/react-hooks");
-const useSafeTimeout_1 = __importDefault(require("../hooks/useSafeTimeout"));
-afterEach(() => {
-    jest.useRealTimers();
-});
-test('should call callback after time', async () => {
-    const { result, waitFor } = react_hooks_1.renderHook(() => useSafeTimeout_1.default());
-    const mockFunction = jest.fn();
-    result.current.safeSetTimeout(mockFunction, 300);
-    await waitFor(() => expect(mockFunction).toHaveBeenCalled());
-});
-test('should clear timeouts when safeClearTimeout is called', () => {
-    jest.useFakeTimers();
-    jest.spyOn(global, 'clearTimeout');
-    const { result } = react_hooks_1.renderHook(() => useSafeTimeout_1.default());
-    const mockFunction = jest.fn();
-    const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
-    result.current.safeClearTimeout(timeoutId);
-    expect(clearTimeout).toHaveBeenCalledTimes(1);
-    expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
-});
-test('should clear timeouts when the component is unmounted', () => {
-    jest.useFakeTimers();
-    jest.spyOn(global, 'clearTimeout');
-    const { result, unmount } = react_hooks_1.renderHook(() => useSafeTimeout_1.default());
-    const mockFunction = jest.fn();
-    const timeoutId = result.current.safeSetTimeout(mockFunction, 300);
-    unmount();
-    expect(clearTimeout).toHaveBeenCalledTimes(1);
-    expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId);
-});

package/lib/__tests__/utils/createSlots.test.jsx

@@ -1,57 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-require("babel-polyfill");
-const react_2 = require("@testing-library/react");
-const create_slots_1 = __importDefault(require("../../utils/create-slots"));
-// setup a component with slots
-const { Slots, Slot } = create_slots_1.default(['One', 'Two', 'Three']);
-const ComponentWithSlots = ({ salutation, children }) => {
-    return (<Slots context={{ salutation }}>
-      {slots => (<div>
-          {slots.One}
-          <span>
-            {children} {slots.Two} {slots.Three}
-          </span>
-        </div>)}
-    </Slots>);
-};
-const SlotItem1 = ({ children }) => <Slot name="One">{children}</Slot>;
-const SlotItem2 = ({ children }) => <Slot name="Two">{children}</Slot>;
-const SlotItem3 = ({ children }) => (<Slot name="Three">
-    {(context) => (<>
-        {context.salutation} {children}
-      </>)}
-  </Slot>);
-describe('ComponentWithSlots', () => {
-    it('renders all slots', async () => {
-        const component = react_2.render(<ComponentWithSlots>
-        <SlotItem1>first</SlotItem1>
-        <SlotItem2>second</SlotItem2>
-        free form
-      </ComponentWithSlots>);
-        await react_2.waitFor(() => component.getByText('first'));
-        expect(component.container).toMatchSnapshot();
-    });
-    it('renders without any slots', async () => {
-        const component = react_2.render(<ComponentWithSlots>free form</ComponentWithSlots>);
-        expect(component.container).toMatchSnapshot();
-    });
-    it('renders with just one slot', async () => {
-        const component = react_2.render(<ComponentWithSlots>
-        <SlotItem1>first</SlotItem1>
-        free form
-      </ComponentWithSlots>);
-        expect(component.container).toMatchSnapshot();
-    });
-    it('renders with context passed to children', async () => {
-        const component = react_2.render(<ComponentWithSlots salutation="hi">
-        <SlotItem3>third</SlotItem3>
-        free form
-      </ComponentWithSlots>);
-        expect(component.container).toMatchSnapshot();
-    });
-});

package/lib/hooks/useDetails.jsx

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-function useDetails({ ref, closeOnOutsideClick, defaultOpen, onClickOutside }) {
-    const [open, setOpen] = react_1.useState(defaultOpen);
-    const backupRef = react_1.useRef(null);
-    const customRef = ref ?? backupRef;
-    const onClickOutsideInternal = react_1.useCallback((event) => {
-        const { current } = customRef;
-        const eventTarget = event.target;
-        const closest = eventTarget.closest('details');
-        if (closest !== current) {
-            onClickOutside && onClickOutside(event);
-            if (!event.defaultPrevented) {
-                setOpen(false);
-            }
-        }
-    }, [customRef, setOpen, onClickOutside]);
-    // handles the overlay behavior - closing the menu when clicking outside of it
-    react_1.useEffect(() => {
-        if (open && closeOnOutsideClick) {
-            document.addEventListener('click', onClickOutsideInternal);
-            return () => {
-                document.removeEventListener('click', onClickOutsideInternal);
-            };
-        }
-    }, [open, closeOnOutsideClick, onClickOutsideInternal]);
-    const handleToggle = (e) => {
-        if (!e.defaultPrevented) {
-            const eventTarget = e.target;
-            setOpen(eventTarget.open);
-        }
-    };
-    const getDetailsProps = () => {
-        return { onToggle: handleToggle, open, ref: customRef };
-    };
-    return { open, setOpen, getDetailsProps };
-}
-exports.default = useDetails;

package/lib/hooks/useOnOutsideClick.jsx

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOnOutsideClick = void 0;
-const react_1 = require("react");
-// Because events are handled at the document level, we provide a mechanism for early return.
-const stopPropagation = true;
-/**
- * Calls all handlers in reverse order
- * @param event The MouseEvent generated by the click event.
- */
-function handleClick(event) {
-    if (!event.defaultPrevented) {
-        for (const handler of Object.values(registry).reverse()) {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (handler(event) === stopPropagation || event.defaultPrevented) {
-                break;
-            }
-        }
-    }
-}
-const registry = {};
-function register(id, handler) {
-    registry[id] = handler;
-}
-function deregister(id) {
-    delete registry[id];
-}
-// For auto-incrementing unique identifiers for registered handlers.
-let handlerId = 0;
-const useOnOutsideClick = ({ containerRef, ignoreClickRefs, onClickOutside }) => {
-    const id = react_1.useMemo(() => handlerId++, []);
-    const handler = react_1.useCallback(event => {
-        // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
-        if (event instanceof MouseEvent && event.button > 0) {
-            return stopPropagation;
-        }
-        // don't call handler if the click happened inside of the container
-        if (containerRef.current?.contains(event.target)) {
-            return stopPropagation;
-        }
-        // don't call handler if click happened on an ignored ref
-        if (ignoreClickRefs && ignoreClickRefs.some(({ current }) => current?.contains(event.target))) {
-            return stopPropagation;
-        }
-        onClickOutside(event);
-    }, [containerRef, ignoreClickRefs, onClickOutside]);
-    react_1.useEffect(() => {
-        if (Object.keys(registry).length === 0) {
-            // use capture to ensure we get all events
-            document.addEventListener('mousedown', handleClick, { capture: true });
-        }
-        register(id, handler);
-        return () => {
-            deregister(id);
-            if (Object.keys(registry).length === 0) {
-                document.removeEventListener('mousedown', handleClick, { capture: true });
-            }
-        };
-    }, [id, handler]);
-};
-exports.useOnOutsideClick = useOnOutsideClick;

package/lib/hooks/useOverlay.jsx

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOverlay = void 0;
-const useOnOutsideClick_1 = require("./useOnOutsideClick");
-const useOpenAndCloseFocus_1 = require("./useOpenAndCloseFocus");
-const useOnEscapePress_1 = require("./useOnEscapePress");
-const useProvidedRefOrCreate_1 = require("./useProvidedRefOrCreate");
-const useOverlay = ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }) => {
-    const overlayRef = useProvidedRefOrCreate_1.useProvidedRefOrCreate(_overlayRef);
-    useOpenAndCloseFocus_1.useOpenAndCloseFocus({ containerRef: overlayRef, returnFocusRef, initialFocusRef, preventFocusOnOpen });
-    useOnOutsideClick_1.useOnOutsideClick({ containerRef: overlayRef, ignoreClickRefs, onClickOutside });
-    useOnEscapePress_1.useOnEscapePress(onEscape);
-    return { ref: overlayRef };
-};
-exports.useOverlay = useOverlay;

package/lib/utils/create-slots.jsx

@@ -1,65 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const use_force_update_1 = require("./use-force-update");
-/** createSlots is a factory that can create a
- *  typesafe Slots + Slot pair to use in a component definition
- *  For example: ActionList.Item uses createSlots to get a Slots wrapper
- *  + Slot component that is used by LeadingVisual, Description
- */
-const createSlots = (slotNames) => {
-    const SlotsContext = react_1.default.createContext({
-        registerSlot: () => null,
-        unregisterSlot: () => null,
-        context: {}
-    });
-    /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
-     *  Slot registers themself with the Slots parent.
-     *  When all the children have mounted = registered themselves in slot,
-     *  we re-render the parent component to render with slots
-     */
-    const Slots = ({ context = {}, children }) => {
-        // initialise slots
-        const slotsDefinition = {};
-        slotNames.map(name => (slotsDefinition[name] = null));
-        const slotsRef = react_1.default.useRef(slotsDefinition);
-        const rerenderWithSlots = use_force_update_1.useForceUpdate();
-        const [isMounted, setIsMounted] = react_1.default.useState(false);
-        // fires after all the effects in children
-        react_1.default.useEffect(() => {
-            rerenderWithSlots();
-            setIsMounted(true);
-        }, [rerenderWithSlots]);
-        const registerSlot = react_1.default.useCallback((name, contents) => {
-            slotsRef.current[name] = contents;
-            // don't render until the component mounts = all slots are registered
-            if (isMounted)
-                rerenderWithSlots();
-        }, [isMounted, rerenderWithSlots]);
-        // Slot can be removed from the tree as well,
-        // we need to unregister them from the slot
-        const unregisterSlot = react_1.default.useCallback((name) => {
-            slotsRef.current[name] = null;
-            rerenderWithSlots();
-        }, [rerenderWithSlots]);
-        /**
-         * Slots uses a render prop API so abstract the
-         * implementation detail of using a context provider.
-         */
-        const slots = slotsRef.current;
-        return (<SlotsContext.Provider value={{ registerSlot, unregisterSlot, context }}>{children(slots)}</SlotsContext.Provider>);
-    };
-    const Slot = ({ name, children }) => {
-        const { registerSlot, unregisterSlot, context } = react_1.default.useContext(SlotsContext);
-        react_1.default.useEffect(() => {
-            registerSlot(name, typeof children === 'function' ? children(context) : children);
-            return () => unregisterSlot(name);
-        }, [name, children, registerSlot, unregisterSlot, context]);
-        return null;
-    };
-    return { Slots, Slot };
-};
-exports.default = createSlots;

package/lib/utils/deprecate.jsx

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Deprecations = exports.useDeprecation = exports.deprecate = void 0;
-const react_1 = require("react");
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => { };
-// eslint-disable-next-line import/no-mutable-exports
-let deprecate = noop;
-exports.deprecate = deprecate;
-if (__DEV__) {
-    exports.deprecate = deprecate = ({ name, message, version }) => {
-        Deprecations.deprecate({ name, message, version });
-    };
-}
-// eslint-disable-next-line import/no-mutable-exports
-let useDeprecation = null;
-exports.useDeprecation = useDeprecation;
-if (__DEV__) {
-    exports.useDeprecation = useDeprecation = ({ name, message, version }) => {
-        const ref = react_1.useRef(false);
-        const logDeprecation = react_1.useCallback(() => {
-            if (!ref.current) {
-                ref.current = true;
-                deprecate({ name, message, version });
-            }
-        }, [name, message, version]);
-        return logDeprecation;
-    };
-}
-else {
-    exports.useDeprecation = useDeprecation = () => {
-        return noop;
-    };
-}
-class Deprecations {
-    constructor() {
-        this.deprecations = [];
-    }
-    static get() {
-        if (!Deprecations.instance) {
-            Deprecations.instance = new Deprecations();
-        }
-        return Deprecations.instance;
-    }
-    static deprecate({ name, message, version }) {
-        const msg = `WARNING! ${name} is deprecated and will be removed in version ${version}. ${message}`;
-        // eslint-disable-next-line no-console
-        console.warn(msg);
-        this.get().deprecations.push({ name, message, version });
-    }
-    static getDeprecations() {
-        return this.get().deprecations;
-    }
-    static clearDeprecations() {
-        this.get().deprecations.length = 0;
-    }
-}
-exports.Deprecations = Deprecations;
-Deprecations.instance = null;

package/lib/utils/isNumeric.jsx

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function isNumeric(n) {
-    return !isNaN(parseFloat(n)) && isFinite(n);
-}
-exports.default = isNumeric;

package/lib/utils/ssr.jsx

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSSRSafeId = exports.SSRProvider = void 0;
-var ssr_1 = require("@react-aria/ssr");
-Object.defineProperty(exports, "SSRProvider", { enumerable: true, get: function () { return ssr_1.SSRProvider; } });
-Object.defineProperty(exports, "useSSRSafeId", { enumerable: true, get: function () { return ssr_1.useSSRSafeId; } });

package/lib/utils/test-deprecations.jsx

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const semver_1 = __importDefault(require("semver"));
-const deprecate_1 = require("./deprecate");
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const ourVersion = require('../../package.json').version;
-beforeEach(() => {
-    deprecate_1.Deprecations.clearDeprecations();
-});
-afterEach(() => {
-    const deprecations = deprecate_1.Deprecations.getDeprecations();
-    for (const dep of deprecations) {
-        if (semver_1.default.gte(ourVersion, dep.version)) {
-            throw new Error(`Found a deprecation that should be removed in ${dep.version}`);
-        }
-    }
-});

package/lib/utils/test-helpers.jsx

@@ -1,8 +0,0 @@
-"use strict";
-// JSDOM doesn't mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => {
-    return {
-        observe: jest.fn(),
-        disconnect: jest.fn()
-    };
-});

package/lib/utils/test-matchers.jsx

@@ -1,100 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-require("jest-styled-components");
-const serializer_1 = require("jest-styled-components/serializer");
-const react_1 = __importDefault(require("react"));
-const testing_1 = require("./testing");
-expect.addSnapshotSerializer(serializer_1.styleSheetSerializer);
-const stringify = (d) => JSON.stringify(d, null, '  ');
-expect.extend({
-    toMatchKeys(obj, values) {
-        return {
-            pass: Object.keys(values).every(key => this.equals(obj[key], values[key])),
-            message: () => `Expected ${stringify(obj)} to have matching keys: ${stringify(values)}`
-        };
-    },
-    toHaveClass(node, klass) {
-        const classes = testing_1.getClasses(node);
-        const pass = classes.includes(klass);
-        return {
-            pass,
-            message: () => `expected ${stringify(classes)} to include: ${stringify(klass)}`
-        };
-    },
-    toHaveClasses(node, klasses, only = false) {
-        const classes = testing_1.getClasses(node);
-        const pass = only
-            ? this.equals(classes.sort(), klasses.sort())
-            : klasses.every((klass) => classes.includes(klass));
-        return {
-            pass,
-            message: () => `expected ${stringify(classes)} to include: ${stringify(klasses)}`
-        };
-    },
-    toImplementSxBehavior(element) {
-        const mediaKey = '@media (max-width:123px)';
-        const sxPropValue = {
-            [mediaKey]: {
-                color: 'red.5'
-            }
-        };
-        const elem = react_1.default.cloneElement(element, { sx: sxPropValue });
-        function checkStylesDeep(rendered) {
-            const className = rendered.props.className;
-            const styles = testing_1.getComputedStyles(className);
-            const mediaStyles = styles[mediaKey];
-            if (mediaStyles && mediaStyles.color) {
-                return true;
-            }
-            else if (rendered.children) {
-                return rendered.children.some((child) => checkStylesDeep(child));
-            }
-            else {
-                return false;
-            }
-        }
-        return {
-            pass: checkStylesDeep(testing_1.render(elem)),
-            message: () => 'sx prop values did not change styles of component nor of any sub-components'
-        };
-    },
-    toSetExports(mod, expectedExports) {
-        if (!Object.keys(expectedExports).includes('default')) {
-            return {
-                pass: false,
-                message: () => "You must specify the module's default export"
-            };
-        }
-        const seen = new Set();
-        for (const exp of Object.keys(expectedExports)) {
-            seen.add(exp);
-            if (mod[exp] !== expectedExports[exp]) {
-                if (!mod[exp] && !expectedExports[exp]) {
-                    continue;
-                }
-                return {
-                    pass: false,
-                    message: () => `Module exported a different value from key '${exp}' than expected`
-                };
-            }
-        }
-        for (const exp of Object.keys(mod)) {
-            if (seen.has(exp)) {
-                continue;
-            }
-            if (mod[exp] !== expectedExports[exp]) {
-                return {
-                    pass: false,
-                    message: () => `Module exported an unexpected value from key '${exp}'`
-                };
-            }
-        }
-        return {
-            pass: true,
-            message: () => ''
-        };
-    }
-});