@lumx/react 3.6.7 → 3.6.8

package/src/components/select/SelectMultiple.stories.tsx

@@ -265,66 +265,64 @@ export const SelectWithinADialog = ({ theme }: any) => {
         searchText && searchText.length > 0 ? CHOICES.filter((choice) => choice.includes(searchText)) : CHOICES;
 
     return (
-        <>
-            <Dialog isOpen>
-                <header>
-                    <Toolbar label={<span className="lumx-typography-title">Dialog header</span>} />
-                </header>
-                <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
-                    {/* Testing hidden input do not count in th focus trap*/}
-                    <input hidden type="file" />
-                    <input type="hidden" />
+        <Dialog isOpen>
+            <header>
+                <Toolbar label={<span className="lumx-typography-title">Dialog header</span>} />
+            </header>
+            <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
+                {/* Testing hidden input do not count in th focus trap*/}
+                <input hidden type="file" />
+                <input type="hidden" />
 
-                    <div className="lumx-spacing-margin-bottom-huge">The select should capture the focus on open.</div>
+                <div className="lumx-spacing-margin-bottom-huge">The select should capture the focus on open.</div>
 
-                    <SelectMultiple
-                        isOpen={isOpen}
-                        value={values}
-                        onClear={clearSelected}
-                        clearButtonProps={{ label: 'Clear' }}
-                        label={LABEL}
-                        placeholder={PLACEHOLDER}
-                        theme={theme}
-                        onInputClick={toggleSelect}
-                        onDropdownClose={closeSelect}
-                        icon={mdiTram}
-                        focusElement={searchFieldRef}
-                    >
-                        <List isClickable>
-                            <>
-                                <ListSubheader>
-                                    <TextField
-                                        clearButtonProps={{ label: 'Clear' }}
-                                        placeholder="Search"
-                                        role="searchbox"
-                                        inputRef={searchFieldRef}
-                                        onChange={setSearchText}
-                                        value={searchText}
-                                    />
-                                </ListSubheader>
-                                <ListDivider role="presentation" />
-                            </>
+                <SelectMultiple
+                    isOpen={isOpen}
+                    value={values}
+                    onClear={clearSelected}
+                    clearButtonProps={{ label: 'Clear' }}
+                    label={LABEL}
+                    placeholder={PLACEHOLDER}
+                    theme={theme}
+                    onInputClick={toggleSelect}
+                    onDropdownClose={closeSelect}
+                    icon={mdiTram}
+                    focusElement={searchFieldRef}
+                >
+                    <List isClickable>
+                        <>
+                            <ListSubheader>
+                                <TextField
+                                    clearButtonProps={{ label: 'Clear' }}
+                                    placeholder="Search"
+                                    role="searchbox"
+                                    inputRef={searchFieldRef}
+                                    onChange={setSearchText}
+                                    value={searchText}
+                                />
+                            </ListSubheader>
+                            <ListDivider role="presentation" />
+                        </>
 
-                            {filteredChoices.length > 0
-                                ? filteredChoices.map((choice) => (
-                                      <ListItem
-                                          isSelected={values.includes(choice)}
-                                          key={choice}
-                                          onItemSelected={selectItem(choice)}
-                                          size={Size.tiny}
-                                      >
-                                          {choice}
-                                      </ListItem>
-                                  ))
-                                : [
-                                      <ListItem key={0} size={Size.tiny}>
-                                          No data
-                                      </ListItem>,
-                                  ]}
-                        </List>
-                    </SelectMultiple>
-                </div>
-            </Dialog>
-        </>
+                        {filteredChoices.length > 0
+                            ? filteredChoices.map((choice) => (
+                                  <ListItem
+                                      isSelected={values.includes(choice)}
+                                      key={choice}
+                                      onItemSelected={selectItem(choice)}
+                                      size={Size.tiny}
+                                  >
+                                      {choice}
+                                  </ListItem>
+                              ))
+                            : [
+                                  <ListItem key={0} size={Size.tiny}>
+                                      No data
+                                  </ListItem>,
+                              ]}
+                    </List>
+                </SelectMultiple>
+            </div>
+        </Dialog>
     );
 };

package/src/components/select/SelectMultiple.test.tsx

@@ -39,7 +39,7 @@ const setup = (props: Partial<SelectMultipleProps> = {}) => {
     return { props, select, getDropdown, helpers, inputWrapper, chip, valueChips };
 };
 
-describe(`<SelectMultiple>`, () => {
+describe('<SelectMultiple>', () => {
     describe('Props', () => {
         it('should have default classNames', () => {
             const { select, inputWrapper, valueChips, chip } = setup();
@@ -48,7 +48,7 @@ describe(`<SelectMultiple>`, () => {
             expect(valueChips).toBeEmptyDOMElement();
             expect(chip).not.toBeInTheDocument();
             expect(select.className).toMatchInlineSnapshot(
-                `"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"`,
+                '"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"',
             );
         });
 
@@ -119,7 +119,7 @@ describe(`<SelectMultiple>`, () => {
                 expect(inputWrapper).not.toBeInTheDocument();
                 expect(chip).toBeInTheDocument();
                 expect(select.className).toMatchInlineSnapshot(
-                    `"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"`,
+                    '"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"',
                 );
             });
 
@@ -127,7 +127,7 @@ describe(`<SelectMultiple>`, () => {
                 const { select, chip } = setup({ variant: SelectVariant.chip, value: ['val1', 'val2'] });
                 expect(chip).toHaveTextContent('val1 +1');
                 expect(select.className).toMatchInlineSnapshot(
-                    `"lumx-select lumx-select--has-multiple lumx-select lumx-select--has-value lumx-select--theme-light"`,
+                    '"lumx-select lumx-select--has-multiple lumx-select lumx-select--has-value lumx-select--theme-light"',
                 );
             });
 

package/src/components/side-navigation/SideNavigation.test.tsx

@@ -21,12 +21,12 @@ const setup = (props: Partial<SideNavigationProps> = {}) => {
 describe(`<${SideNavigation.displayName}>`, () => {
     it('should render default', () => {
         const { sideNavigation } = setup();
-        expect(sideNavigation.className).toMatchInlineSnapshot(`"lumx-side-navigation"`);
+        expect(sideNavigation.className).toMatchInlineSnapshot('"lumx-side-navigation"');
     });
 
     it('should render dark theme', () => {
         const { sideNavigation } = setup({ theme: Theme.dark });
-        expect(sideNavigation.className).toMatchInlineSnapshot(`"lumx-color-font-light-N lumx-side-navigation"`);
+        expect(sideNavigation.className).toMatchInlineSnapshot('"lumx-color-font-light-N lumx-side-navigation"');
     });
 
     // Common tests suite.

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -7,15 +7,10 @@ import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
 export const Simple = () => {
-    const {
-        activeIndex,
-        slidesCount,
-        onNextClick,
-        onPreviousClick,
-        onPaginationClick,
-    } = SlideshowControls.useSlideshowControls({
-        itemsCount: 9,
-    });
+    const { activeIndex, slidesCount, onNextClick, onPreviousClick, onPaginationClick } =
+        SlideshowControls.useSlideshowControls({
+            itemsCount: 9,
+        });
 
     return (
         <SlideshowControls

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -11,7 +11,7 @@ export interface UseSlideFocusManagementProps {
  * This is to easily find elements that have been tempered with,
  * and not elements whose focus was already initially blocked.
  * */
-const BLOCKED_FOCUS_CLASSNAME = `focus-blocked`;
+const BLOCKED_FOCUS_CLASSNAME = 'focus-blocked';
 
 /**
  * Manage how slides must behave when visible or not.

package/src/components/tabs/TabProvider.test.tsx

@@ -21,7 +21,7 @@ const setup = (props: Partial<TabProviderProps> = {}) => {
     );
 };
 
-describe(`TabProvider`, () => {
+describe('TabProvider', () => {
     describe('default config', () => {
         it('should render with accessible DOM', () => {
             setup();

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { mdiAbTesting, mdiImageBroken } from '@lumx/icons';
+import { mdiAbTesting } from '@lumx/icons';
 import { Alignment, AspectRatio, Badge, FlexBox, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 import { IMAGE_SIZES, imageArgType, IMAGES } from '@lumx/react/stories/controls/image';
@@ -159,16 +159,16 @@ export const Original = () => (
             </tr>
             <tr>
                 <td>
-                    <Thumbnail alt="" image={IMAGES.landscape1} />
+                    <Thumbnail alt="landscape image" image={IMAGES.landscape1} />
                 </td>
                 <td>
-                    <Thumbnail alt="" image={IMAGES.landscape1} imgProps={IMAGE_SIZES.landscape1} />
+                    <Thumbnail alt="landscape image" image={IMAGES.landscape1} imgProps={IMAGE_SIZES.landscape1} />
                 </td>
                 <td>
-                    <Thumbnail alt="" image={IMAGES.portrait1} />
+                    <Thumbnail alt="portrait image" image={IMAGES.portrait1} />
                 </td>
                 <td>
-                    <Thumbnail alt="" image={IMAGES.portrait1} imgProps={IMAGE_SIZES.portrait1} />
+                    <Thumbnail alt="portrait image" image={IMAGES.portrait1} imgProps={IMAGE_SIZES.portrait1} />
                 </td>
             </tr>
         </table>

package/src/constants.ts

@@ -9,9 +9,9 @@ export {
 /**
  * Optional global `window` instance (not defined when running SSR).
  */
-export const WINDOW = typeof window !== `undefined` ? window : undefined;
+export const WINDOW = typeof window !== 'undefined' ? window : undefined;
 
 /**
  * Optional global `document` instance (not defined when running SSR).
  */
-export const DOCUMENT = typeof document !== `undefined` ? document : undefined;
+export const DOCUMENT = typeof document !== 'undefined' ? document : undefined;

package/src/stories/decorators/withCombinations.tsx

@@ -20,80 +20,82 @@ function formatProps(config?: Combination): PropCombination {
 /**
  * SB decorator generating a tables of combination of props (max 3 levels of props)
  */
-export const withCombinations = ({
-    combinations,
-    tableStyle,
-    firstColStyle,
-    cellStyle,
-    combinator = Object.assign,
-}: {
-    /** Props combinations */
-    combinations: {
-        rows?: Combination;
-        cols?: Combination;
-        sections?: Combination;
-    };
-    /** Inject style on table */
-    tableStyle?: React.CSSProperties;
-    /** Inject style on first col */
-    firstColStyle?: React.CSSProperties;
-    /** Inject style on cells */
-    cellStyle?: React.CSSProperties;
-    /** Combinator function */
-    combinator?: (a: any, b: any) => any;
-}) => (Story: any, ctx: any) => {
-    const rows = formatProps(combinations.rows);
-    const cols = formatProps(combinations.cols);
-    const sections = formatProps(combinations.sections);
+export const withCombinations =
+    ({
+        combinations,
+        tableStyle,
+        firstColStyle,
+        cellStyle,
+        combinator = Object.assign,
+    }: {
+        /** Props combinations */
+        combinations: {
+            rows?: Combination;
+            cols?: Combination;
+            sections?: Combination;
+        };
+        /** Inject style on table */
+        tableStyle?: React.CSSProperties;
+        /** Inject style on first col */
+        firstColStyle?: React.CSSProperties;
+        /** Inject style on cells */
+        cellStyle?: React.CSSProperties;
+        /** Combinator function */
+        combinator?: (a: any, b: any) => any;
+    }) =>
+    (Story: any, ctx: any) => {
+        const rows = formatProps(combinations.rows);
+        const cols = formatProps(combinations.cols);
+        const sections = formatProps(combinations.sections);
 
-    return (
-        <>
-            {Object.entries(sections).map(([level2Key, level2Value]) => (
-                <div key={level2Key}>
-                    {level2Key && <h2>{level2Key}</h2>}
+        return (
+            <>
+                {Object.entries(sections).map(([level2Key, level2Value]) => (
+                    <div key={level2Key}>
+                        {level2Key && <h2>{level2Key}</h2>}
 
-                    <table style={{ ...tableStyle, borderCollapse: 'separate', borderSpacing: 8 }}>
-                        {combinations.cols && (
-                            <thead>
-                                <tr>
-                                    <th />
-                                    {Object.keys(cols).map((key) => (
-                                        <th key={key}>
-                                            <small>{key}</small>
+                        <table style={{ ...tableStyle, borderCollapse: 'separate', borderSpacing: 8 }}>
+                            {combinations.cols && (
+                                <thead>
+                                    <tr>
+                                        <th />
+                                        {Object.keys(cols).map((key) => (
+                                            <th key={key}>
+                                                <small>{key}</small>
+                                            </th>
+                                        ))}
+                                    </tr>
+                                </thead>
+                            )}
+                            <tbody>
+                                {Object.entries(rows).map(([level0Key, level0Value], i1) => (
+                                    <tr key={i1}>
+                                        <th style={{ ...firstColStyle, textAlign: 'left' }}>
+                                            <small>{level0Key}</small>
                                         </th>
-                                    ))}
-                                </tr>
-                            </thead>
-                        )}
-                        <tbody>
-                            {Object.entries(rows).map(([level0Key, level0Value], i1) => (
-                                <tr key={i1}>
-                                    <th style={{ ...firstColStyle, textAlign: 'left' }}>
-                                        <small>{level0Key}</small>
-                                    </th>
-                                    {Object.entries(cols).map(([level1Key, level1Value]) => {
-                                        const args = [level0Value, level1Value, level2Value].reduce(
-                                            (acc, value) => combinator(acc, value),
-                                            { ...ctx.args },
-                                        );
-                                        return (
-                                            <td
-                                                key={level1Key}
-                                                style={{
-                                                    textAlign: combinations.cols ? 'center' : undefined,
-                                                    ...cellStyle,
-                                                }}
-                                            >
-                                                <Story args={args} />
-                                            </td>
-                                        );
-                                    })}
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                </div>
-            ))}
-        </>
-    );
-};
+                                        {Object.entries(cols).map(([level1Key, level1Value]) => {
+                                            const args = [level0Value, level1Value, level2Value].reduce(
+                                                (acc, value) => combinator(acc, value),
+                                                { ...ctx.args },
+                                            );
+                                            return (
+                                                <td
+                                                    key={level1Key}
+                                                    style={{
+                                                        textAlign: combinations.cols ? 'center' : undefined,
+                                                        ...cellStyle,
+                                                    }}
+                                                >
+                                                    <Story args={args} />
+                                                </td>
+                                            );
+                                        })}
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                ))}
+            </>
+        );
+    };

package/src/utils/date/getFirstDayOfWeek.ts

@@ -22,7 +22,8 @@ const FIRST_DAY_FOR_LOCALES = [
     },
     {
         // Locales with Monday as the first day of the week
-        localeRX: /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
+        localeRX:
+            /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
         firstDay: 1,
     },
     {

package/src/utils/date/getMonthCalendar.test.ts

@@ -57,6 +57,8 @@ describe(getMonthCalendar.name, () => {
                     '1': { date: new Date('2017-02-27') },
                     '2': { date: new Date('2017-02-28') },
                 },
+                // Empty row (used for padding to avoid layout shift)
+                {},
             ],
         });
     });
@@ -117,6 +119,8 @@ describe(getMonthCalendar.name, () => {
                     '1': { date: new Date('2017-02-27'), isOutOfRange: true },
                     '2': { date: new Date('2017-02-28'), isOutOfRange: true },
                 },
+                // Empty row (used for padding to avoid layout shift)
+                {},
             ],
         });
     });

package/src/utils/date/getMonthCalendar.ts

@@ -11,6 +11,9 @@ interface MonthCalendar {
     weeks: Array<AnnotatedWeek>;
 }
 
+/** Up to 6 rows can appear in a month calendar => 4 weeks + 1 start of month partial week + 1 send of month partial week */
+const MONTH_ROW_COUNT = 6;
+
 /**
  * Get month calendar.
  * A list of weeks with days indexed by week day number
@@ -30,7 +33,8 @@ export const getMonthCalendar = (
 
     const weeks: Array<AnnotatedWeek> = [];
     let week: AnnotatedWeek = {};
-    while (iterDate.getMonth() === month) {
+    let rowCount = 0;
+    while (rowCount < MONTH_ROW_COUNT) {
         const weekDayNumber = iterDate.getDay();
         const day: AnnotatedDay = { date: new Date(iterDate.getTime()) };
 
@@ -39,9 +43,13 @@ export const getMonthCalendar = (
             day.isOutOfRange = true;
         }
 
-        week[weekDayNumber] = day;
+        if (iterDate.getMonth() === month) {
+            week[weekDayNumber] = day;
+        }
+
         if (weekDayNumber === lastDayOfWeek.number) {
             weeks.push(week);
+            rowCount += 1;
             week = {};
         }
         iterDate.setDate(iterDate.getDate() + 1);

package/src/utils/focus/constants.ts

@@ -1,5 +1,7 @@
 /** CSS selector listing all tabbable elements. */
-export const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]`;
+export const TABBABLE_ELEMENTS_SELECTOR =
+    'a[href], button, textarea, input:not([type="hidden"]):not([hidden]), [tabindex]';
 
 /** CSS selector matching element that are disabled (should not receive focus). */
-export const DISABLED_SELECTOR = `[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
+export const DISABLED_SELECTOR =
+    '[hidden], [tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])';

package/src/utils/focus/getFirstAndLastFocusable.test.ts

@@ -8,13 +8,13 @@ function htmlToElement(html: string): any {
 
 describe(getFirstAndLastFocusable.name, () => {
     it('should get empty', () => {
-        const element = htmlToElement(`<div></div>`);
+        const element = htmlToElement('<div></div>');
         const focusable = getFirstAndLastFocusable(element);
         expect(focusable).toEqual({});
     });
 
     it('should get single item', () => {
-        const element = htmlToElement(`<div><button /></div>`);
+        const element = htmlToElement('<div><button /></div>');
         const focusable = getFirstAndLastFocusable(element);
         expect(focusable.last).toBe(focusable.first);
     });
@@ -44,13 +44,13 @@ describe(getFirstAndLastFocusable.name, () => {
 
     describe('match focusable elements', () => {
         it('should match input element', () => {
-            const element = htmlToElement(`<div><input /></div>`);
+            const element = htmlToElement('<div><input /></div>');
             const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<input />`);
+            expect(focusable.first).toMatchInlineSnapshot('<input />');
         });
 
         it('should match link element', () => {
-            const element = htmlToElement(`<div><a href="#" /></div>`);
+            const element = htmlToElement('<div><a href="#" /></div>');
             const focusable = getFirstAndLastFocusable(element);
             expect(focusable.first).toMatchInlineSnapshot(`
                 <a
@@ -60,7 +60,7 @@ describe(getFirstAndLastFocusable.name, () => {
         });
 
         it('should match textarea element', () => {
-            const element = htmlToElement(`<div><textarea /></div>`);
+            const element = htmlToElement('<div><textarea /></div>');
             const focusable = getFirstAndLastFocusable(element);
             expect(focusable.first).toMatchInlineSnapshot(`
                 <textarea>
@@ -70,7 +70,7 @@ describe(getFirstAndLastFocusable.name, () => {
         });
 
         it('should match element with tabindex', () => {
-            const element = htmlToElement(`<div><span tabindex="0" /></div>`);
+            const element = htmlToElement('<div><span tabindex="0" /></div>');
             const focusable = getFirstAndLastFocusable(element);
             expect(focusable.first).toMatchInlineSnapshot(`
                 <span
@@ -80,7 +80,7 @@ describe(getFirstAndLastFocusable.name, () => {
         });
 
         it('should keep disabled=false', () => {
-            const element = htmlToElement(`<div><button disabled="false" /><button /></div>`);
+            const element = htmlToElement('<div><button disabled="false" /><button /></div>');
             const focusable = getFirstAndLastFocusable(element);
             expect(focusable.first).toMatchInlineSnapshot(`
                 <button
@@ -90,7 +90,7 @@ describe(getFirstAndLastFocusable.name, () => {
         });
 
         it('should keep aria-disabled=false', () => {
-            const element = htmlToElement(`<div><button aria-disabled="false" /><button /></div>`);
+            const element = htmlToElement('<div><button aria-disabled="false" /><button /></div>');
             const focusable = getFirstAndLastFocusable(element);
             expect(focusable.first).toMatchInlineSnapshot(`
                 <button
@@ -102,33 +102,33 @@ describe(getFirstAndLastFocusable.name, () => {
 
     describe('skip disabled elements', () => {
         it('should skip disabled', () => {
-            const element = htmlToElement(`<div><button disabled /><button /></div>`);
+            const element = htmlToElement('<div><button disabled /><button /></div>');
             const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+            expect(focusable.first).toMatchInlineSnapshot('<button />');
         });
 
         it('should skip aria-disabled', () => {
-            const element = htmlToElement(`<div><button aria-disabled /><button /></div>`);
+            const element = htmlToElement('<div><button aria-disabled /><button /></div>');
             const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+            expect(focusable.first).toMatchInlineSnapshot('<button />');
         });
 
         it('should skip tabindex=-1', () => {
-            const element = htmlToElement(`<div><button tabindex="-1" /><button /></div>`);
+            const element = htmlToElement('<div><button tabindex="-1" /><button /></div>');
             const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+            expect(focusable.first).toMatchInlineSnapshot('<button />');
         });
 
         it('should skip input type hidden', () => {
-            const element = htmlToElement(`<div><input type="hidden" /><button /></div>`);
+            const element = htmlToElement('<div><input type="hidden" /><button /></div>');
             const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+            expect(focusable.first).toMatchInlineSnapshot('<button />');
         });
 
         it('should skip hidden input', () => {
-            const element = htmlToElement(`<div><input hidden /><button /></div>`);
+            const element = htmlToElement('<div><input hidden /><button /></div>');
             const focusable = getFirstAndLastFocusable(element);
-            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+            expect(focusable.first).toMatchInlineSnapshot('<button />');
         });
     });
 });