@primer/components 31.2.0-rc.6afeaa37 → 31.2.0-rc.76ed571d

package/lib/theme.js

@@ -1,13 +1,4 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _themePreval = require("./theme-preval");
-
-var _default = _themePreval.theme; // NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
-// were exports from primitives (or a different shape but derived from those exports).
-
-exports.default = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+const theme_preval_1 = require("./theme-preval");
+exports.default = theme_preval_1.theme;

package/lib/utils/create-slots.jsx

@@ -0,0 +1,65 @@
+"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

@@ -0,0 +1,59 @@
+"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

@@ -0,0 +1,7 @@
+"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/iterateFocusableElements.js

@@ -1,16 +1,6 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.iterateFocusableElements = iterateFocusableElements;
-exports.isFocusable = isFocusable;
-exports.isTabbable = isTabbable;
-
-/**
- * Options to the focusable elements iterator
- */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTabbable = exports.isFocusable = exports.iterateFocusableElements = void 0;
 /**
  * Returns an iterator over all of the focusable elements within `container`.
  * Note: If `container` is itself focusable it will be included in the results.
@@ -18,86 +8,75 @@ exports.isTabbable = isTabbable;
  * @param reverse If true, iterate backwards through focusable elements.
  */
 function* iterateFocusableElements(container, options = {}) {
-  var _options$strict, _options$onlyTabbable;
-
-  const strict = (_options$strict = options.strict) !== null && _options$strict !== void 0 ? _options$strict : false;
-  const acceptFn = ((_options$onlyTabbable = options.onlyTabbable) !== null && _options$onlyTabbable !== void 0 ? _options$onlyTabbable : false) ? isTabbable : isFocusable;
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
-    acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
-  });
-  let nextNode = null; // Allow the container to participate
-
-  if (!options.reverse && acceptFn(container, strict)) {
-    yield container;
-  } // If iterating in reverse, continue traversing down into the last child until we reach
-  // a leaf DOM node
-
-
-  if (options.reverse) {
-    let lastChild = walker.lastChild();
-
-    while (lastChild) {
-      nextNode = lastChild;
-      lastChild = walker.lastChild();
+    const strict = options.strict ?? false;
+    const acceptFn = options.onlyTabbable ?? false ? isTabbable : isFocusable;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+        acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+    });
+    let nextNode = null;
+    // Allow the container to participate
+    if (!options.reverse && acceptFn(container, strict)) {
+        yield container;
+    }
+    // If iterating in reverse, continue traversing down into the last child until we reach
+    // a leaf DOM node
+    if (options.reverse) {
+        let lastChild = walker.lastChild();
+        while (lastChild) {
+            nextNode = lastChild;
+            lastChild = walker.lastChild();
+        }
+    }
+    else {
+        nextNode = walker.firstChild();
+    }
+    while (nextNode instanceof HTMLElement) {
+        yield nextNode;
+        nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
     }
-  } else {
-    nextNode = walker.firstChild();
-  }
-
-  while (nextNode instanceof HTMLElement) {
-    yield nextNode;
-    nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
-  } // Allow the container to participate (in reverse)
-
-
-  if (options.reverse && acceptFn(container, strict)) {
-    yield container;
-  }
-
-  return undefined;
+    // Allow the container to participate (in reverse)
+    if (options.reverse && acceptFn(container, strict)) {
+        yield container;
+    }
+    return undefined;
 }
+exports.iterateFocusableElements = iterateFocusableElements;
 /**
  * Determines whether the given element is focusable. If `strict` is true, we may
  * perform additional checks that require a reflow (less performant).
  * @param elem
  * @param strict
  */
-
-
 function isFocusable(elem, strict = false) {
-  // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
-  const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) && elem.disabled;
-  const hiddenInert = elem.hidden;
-  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-
-  if (disabledAttrInert || hiddenInert || hiddenInputInert) {
-    return false;
-  } // Each of the conditions checked below require a reflow, thus are gated by the `strict`
-  // argument. If any are true, the element is not focusable, even if tabindex is set.
-
-
-  if (strict) {
-    const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
-    const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
-    const clientRectsInert = elem.getClientRects().length === 0;
-
-    if (sizeInert || visibilityInert || clientRectsInert) {
-      return false;
+    // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
+    const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
+        elem.disabled;
+    const hiddenInert = elem.hidden;
+    const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
+    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+        return false;
+    }
+    // Each of the conditions checked below require a reflow, thus are gated by the `strict`
+    // argument. If any are true, the element is not focusable, even if tabindex is set.
+    if (strict) {
+        const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+        const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
+        const clientRectsInert = elem.getClientRects().length === 0;
+        if (sizeInert || visibilityInert || clientRectsInert) {
+            return false;
+        }
+    }
+    // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
+    if (elem.getAttribute('tabindex') != null) {
+        return true;
     }
-  } // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
-
-
-  if (elem.getAttribute('tabindex') != null) {
-    return true;
-  } // One last way `elem.tabIndex` can be wrong.
-
-
-  if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
-    return false;
-  }
-
-  return elem.tabIndex !== -1;
+    // One last way `elem.tabIndex` can be wrong.
+    if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
+        return false;
+    }
+    return elem.tabIndex !== -1;
 }
+exports.isFocusable = isFocusable;
 /**
  * Determines whether the given element is tabbable. If `strict` is true, we may
  * perform additional checks that require a reflow (less performant). This check
@@ -106,8 +85,7 @@ function isFocusable(elem, strict = false) {
  * @param elem
  * @param strict
  */
-
-
 function isTabbable(elem, strict = false) {
-  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
-}
+    return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}
+exports.isTabbable = isTabbable;

package/lib/utils/ssr.jsx

@@ -0,0 +1,6 @@
+"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

@@ -0,0 +1,20 @@
+"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

@@ -0,0 +1,8 @@
+"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

@@ -0,0 +1,100 @@
+"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: () => ''
+        };
+    }
+});

package/lib/utils/testing.jsx

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkExports = exports.behavesAsComponent = exports.unloadCSS = exports.loadCSS = exports.getClasses = exports.getClassName = exports.getProps = exports.getComputedStyles = exports.renderStyles = exports.percent = exports.px = exports.rendersClass = exports.renderClasses = exports.renderRoot = exports.render = exports.mount = exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
+const react_1 = __importDefault(require("react"));
+const util_1 = require("util");
+const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
+const enzyme_1 = __importDefault(require("enzyme"));
+const enzyme_adapter_react_17_1 = __importDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
+const __1 = require("..");
+const theme_1 = __importDefault(require("../theme"));
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const readFile = util_1.promisify(require('fs').readFile);
+exports.COMPONENT_DISPLAY_NAME_REGEX = /^[A-Z][A-Za-z]+(\.[A-Z][A-Za-z]+)*$/;
+enzyme_1.default.configure({ adapter: new enzyme_adapter_react_17_1.default() });
+function mount(component) {
+    return enzyme_1.default.mount(component);
+}
+exports.mount = mount;
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * into its intermediate object representation with 'type',
+ * 'props', and 'children' keys
+ *
+ * The returned object can be matched with expect().toEqual(), e.g.
+ *
+ * ```js
+ * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
+ * ```
+ */
+function render(component, theme = theme_1.default) {
+    return react_test_renderer_1.default
+        .create(<__1.ThemeProvider theme={theme}>{component}</__1.ThemeProvider>)
+        .toJSON();
+}
+exports.render = render;
+/**
+ * Render the component (a React.createElement() or JSX expression)
+ * using react-test-renderer and return the root node
+ * ```
+ */
+function renderRoot(component) {
+    return react_test_renderer_1.default.create(component).root;
+}
+exports.renderRoot = renderRoot;
+/**
+ * Get the HTML class names rendered by the component instance
+ * as an array.
+ *
+ * ```js
+ * expect(renderClasses(<div className='a b' />))
+ *   .toEqual(['a', 'b'])
+ * ```
+ */
+function renderClasses(component) {
+    const { props: { className } } = render(component);
+    return className ? className.trim().split(' ') : [];
+}
+exports.renderClasses = renderClasses;
+/**
+ * Returns true if a node renders with a single class.
+ */
+function rendersClass(node, klass) {
+    return renderClasses(node).includes(klass);
+}
+exports.rendersClass = rendersClass;
+function px(value) {
+    return typeof value === 'number' ? `${value}px` : value;
+}
+exports.px = px;
+function percent(value) {
+    return typeof value === 'number' ? `${value}%` : value;
+}
+exports.percent = percent;
+function renderStyles(node) {
+    const { props: { className } } = render(node);
+    return getComputedStyles(className);
+}
+exports.renderStyles = renderStyles;
+function getComputedStyles(className) {
+    const div = document.createElement('div');
+    div.className = className;
+    const computed = {};
+    for (const sheet of document.styleSheets) {
+        // CSSRulesLists assumes every rule is a CSSRule, not a CSSStyleRule
+        for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSMediaRule) {
+                readMedia(rule);
+            }
+            else if (rule instanceof CSSStyleRule) {
+                readRule(rule, computed);
+            }
+            else {
+                // console.warn('rule.type =', rule.type)
+            }
+        }
+    }
+    return computed;
+    function matchesSafe(node, selector) {
+        if (!selector) {
+            return false;
+        }
+        try {
+            return node.matches(selector);
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    function readRule(rule, dest) {
+        if (matchesSafe(div, rule.selectorText)) {
+            const { style } = rule;
+            for (let i = 0; i < style.length; i++) {
+                const prop = style[i];
+                dest[prop] = style.getPropertyValue(prop);
+            }
+        }
+        else {
+            // console.warn('no match:', rule.selectorText)
+        }
+    }
+    function readMedia(mediaRule) {
+        const key = `@media ${mediaRule.media[0]}`;
+        // const dest = computed[key] || (computed[key] = {})
+        const dest = {};
+        for (const rule of mediaRule.cssRules) {
+            if (rule instanceof CSSStyleRule) {
+                readRule(rule, dest);
+            }
+        }
+        // Don't add media rule to computed styles
+        // if no styles were actually applied
+        if (Object.keys(dest).length > 0) {
+            computed[key] = dest;
+        }
+    }
+}
+exports.getComputedStyles = getComputedStyles;
+/**
+ * This provides a layer of compatibility between the render() function from
+ * react-test-renderer and Enzyme's mount()
+ */
+function getProps(node) {
+    return typeof node.props === 'function' ? node.props() : node.props;
+}
+exports.getProps = getProps;
+function getClassName(node) {
+    return getProps(node).className;
+}
+exports.getClassName = getClassName;
+function getClasses(node) {
+    const className = getClassName(node);
+    return className ? className.trim().split(/ +/) : [];
+}
+exports.getClasses = getClasses;
+async function loadCSS(path) {
+    const css = await readFile(require.resolve(path), 'utf8');
+    const style = document.createElement('style');
+    style.setAttribute('data-path', path);
+    style.textContent = css;
+    document.head.appendChild(style);
+    return style;
+}
+exports.loadCSS = loadCSS;
+function unloadCSS(path) {
+    const style = document.querySelector(`style[data-path="${path}"]`);
+    if (style) {
+        style.remove();
+        return true;
+    }
+}
+exports.unloadCSS = unloadCSS;
+function behavesAsComponent({ Component, toRender, options }) {
+    options = options || {};
+    const getElement = () => (toRender ? toRender() : <Component />);
+    if (!options.skipSx) {
+        it('implements sx prop behavior', () => {
+            expect(getElement()).toImplementSxBehavior();
+        });
+    }
+    if (!options.skipAs) {
+        it('respects the as prop', () => {
+            const As = react_1.default.forwardRef((_props, ref) => <div className="as-component" ref={ref}/>);
+            const elem = react_1.default.cloneElement(getElement(), { as: As });
+            expect(render(elem)).toEqual(render(<As />));
+        });
+    }
+    it('sets a valid displayName', () => {
+        expect(Component.displayName).toMatch(exports.COMPONENT_DISPLAY_NAME_REGEX);
+    });
+    it('renders consistently', () => {
+        expect(render(getElement())).toMatchSnapshot();
+    });
+}
+exports.behavesAsComponent = behavesAsComponent;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function checkExports(path, exports) {
+    it('has declared exports', () => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const mod = require(`../${path}`);
+        expect(mod).toSetExports(exports);
+    });
+}
+exports.checkExports = checkExports;