@lumx/react 2.2.17 → 2.2.19

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

@@ -0,0 +1,128 @@
+import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
+
+function htmlToElement(html: string): any {
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content.firstChild;
+}
+
+describe(getFirstAndLastFocusable.name, () => {
+    it('should get empty', () => {
+        const element = htmlToElement(`<div></div>`);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable).toEqual({});
+    });
+
+    it('should get single item', () => {
+        const element = htmlToElement(`<div><button /></div>`);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable.last).toBe(focusable.first);
+    });
+
+    it('should get first and last', () => {
+        const element = htmlToElement(`
+            <div>
+                <div>Non focusable div</div>
+                <button>Simple button</button>
+                <div>Non focusable div</div>
+                <input />
+                <div>Non focusable div</div>
+            </div>
+        `);
+        const focusable = getFirstAndLastFocusable(element);
+        expect(focusable.first).toMatchInlineSnapshot(`
+            <button>
+              Simple button
+            </button>
+        `);
+        expect(focusable.first).toMatchInlineSnapshot(`
+            <button>
+              Simple button
+            </button>
+        `);
+    });
+
+    describe('match focusable elements', () => {
+        it('should match input element', () => {
+            const element = htmlToElement(`<div><input /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<input />`);
+        });
+
+        it('should match link element', () => {
+            const element = htmlToElement(`<div><a href="#" /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <a
+                  href="#"
+                />
+            `);
+        });
+
+        it('should match textarea element', () => {
+            const element = htmlToElement(`<div><textarea /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <textarea>
+                  &lt;/div&gt;
+                </textarea>
+            `);
+        });
+
+        it('should match element with tabindex', () => {
+            const element = htmlToElement(`<div><span tabindex="0" /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <span
+                  tabindex="0"
+                />
+            `);
+        });
+
+        it('should keep disabled=false', () => {
+            const element = htmlToElement(`<div><button disabled="false" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <button
+                  disabled="false"
+                />
+            `);
+        });
+
+        it('should keep aria-disabled=false', () => {
+            const element = htmlToElement(`<div><button aria-disabled="false" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`
+                <button
+                  aria-disabled="false"
+                />
+            `);
+        });
+    });
+
+    describe('skip disabled elements', () => {
+        it('should skip disabled', () => {
+            const element = htmlToElement(`<div><button disabled /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip aria-disabled', () => {
+            const element = htmlToElement(`<div><button aria-disabled /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip tabindex=-1', () => {
+            const element = htmlToElement(`<div><button tabindex="-1" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+
+        it('should skip input type hidden', () => {
+            const element = htmlToElement(`<div><input type="hidden" /><button /></div>`);
+            const focusable = getFirstAndLastFocusable(element);
+            expect(focusable.first).toMatchInlineSnapshot(`<button />`);
+        });
+    });
+});

package/src/utils/focus/getFirstAndLastFocusable.ts

@@ -0,0 +1,27 @@
+/** CSS selector listing all tabbable elements. */
+const TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type="hidden"]), [tabindex]`;
+
+/** CSS selector matching element that are disabled (should not receive focus). */
+const DISABLED_SELECTOR = `[tabindex="-1"], [disabled]:not([disabled="false"]), [aria-disabled]:not([aria-disabled="false"])`;
+
+const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+
+/**
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+export function getFirstAndLastFocusable(parentElement: HTMLElement) {
+    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));
+
+    // First non disabled element.
+    const first = focusableElements.find(isNotDisabled);
+    // Last non disabled element.
+    const last = focusableElements.reverse().find(isNotDisabled);
+
+    if (last && first) {
+        return { first, last };
+    }
+    return {};
+}

package/types.d.ts

@@ -1957,6 +1957,11 @@ export interface SideNavigationItemProps extends GenericProps {
 	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 	/** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
 	toggleButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color" | "size">;
+	/**
+	 * Choose how the children are hidden when closed
+	 * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+	 */
+	closeMode?: "hide" | "unmount";
 	/** On action button click callback. */
 	onActionClick?(evt: React.MouseEvent): void;
 	/** On click callback. */
@@ -2641,7 +2646,7 @@ export declare type UserBlockSize = Extract<Size, "s" | "m" | "l">;
  */
 export interface UserBlockProps extends GenericProps {
 	/** Props to pass to the avatar. */
-	avatarProps?: AvatarProps;
+	avatarProps?: Omit<AvatarProps, "alt">;
 	/** Additional fields used to describe the user. */
 	fields?: string[];
 	/** Props to pass to the link wrapping the avatar thumbnail. */