@lumx/react 3.0.1 → 3.0.2

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

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

package/src/utils/focus/getFocusableElements.ts

@@ -0,0 +1,7 @@
+import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
+
+const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
+
+export function getFocusableElements(element: HTMLElement): HTMLElement[] {
+    return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
+}

package/types.d.ts

@@ -66,6 +66,7 @@ export declare const Alignment: {
 	readonly right: "right";
 	readonly spaceAround: "space-around";
 	readonly spaceBetween: "space-between";
+	readonly spaceEvenly: "space-evenly";
 	readonly start: "start";
 	readonly top: "top";
 };
@@ -1100,6 +1101,9 @@ export interface FlagProps extends GenericProps, HasTheme {
 export declare const Flag: Comp<FlagProps, HTMLDivElement>;
 export declare type MarginAutoAlignment = Extract<Alignment, "top" | "bottom" | "right" | "left">;
 export declare type GapSize = Extract<Size, "tiny" | "regular" | "medium" | "big" | "huge">;
+export declare type SpaceAlignment = Extract<Alignment, "space-between" | "space-evenly" | "space-around">;
+export declare type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+export declare type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
 /**
  * Defines the props of the component.
  */
@@ -1111,7 +1115,7 @@ export interface FlexBoxProps extends GenericProps {
 	/** Gap space between flexbox items. */
 	gap?: GapSize;
 	/** Flex horizontal alignment. */
-	hAlign?: VerticalAlignment;
+	hAlign?: FlexVerticalAlignment;
 	/** Whether the "auto margin" is enabled all around or not. */
 	marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
 	/** Whether the "content shrink" is disabled or not. */
@@ -1119,7 +1123,7 @@ export interface FlexBoxProps extends GenericProps {
 	/** Flex direction. */
 	orientation?: Orientation;
 	/** Flex vertical alignment. */
-	vAlign?: HorizontalAlignment;
+	vAlign?: FlexHorizontalAlignment;
 	/** Whether the "flex wrap" is enabled or not. */
 	wrap?: boolean;
 }
@@ -1191,6 +1195,73 @@ export interface GenericBlock extends BaseGenericBlock {
 }
 declare const BaseGenericBlock: BaseGenericBlock;
 export declare const GenericBlock: GenericBlock;
+export declare type TextComponents = "span" | "p" | HeadingElement;
+/**
+ * Defines the props of the component.
+ */
+export interface TextProps extends GenericProps {
+	/**
+	 * Color variant.
+	 */
+	color?: Color;
+	/**
+	 * Lightened or darkened variant of the selected color.
+	 */
+	colorVariant?: ColorVariant;
+	/**
+	 * Typography variant.
+	 */
+	typography?: Typography;
+	/**
+	 * Custom component to render the text.
+	 */
+	as: TextComponents;
+	/**
+	 * Control whether the text should truncate or not.
+	 * Setting as `true` will make the text truncate on a single line.
+	 * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
+	 */
+	truncate?: boolean | {
+		lines: number;
+	};
+}
+/**
+ * Text component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Text: Comp<TextProps>;
+/**
+ * Defines the props of the component.
+ */
+export interface HeadingProps extends Partial<TextProps> {
+	/**
+	 * Display a specific heading level instead of the one provided by parent context provider.
+	 */
+	as?: HeadingElement;
+}
+/**
+ * Renders a heading component.
+ * Extends the `Text` Component with the heading level automatically computed based on
+ * the current level provided by the context.
+ */
+export declare const Heading: Comp<HeadingProps>;
+export interface HeadingLevelProviderProps {
+	/** The heading level to start at. If left undefined, the parent context will be used, if any. */
+	level?: number;
+	/** The children to display */
+	children: ReactNode;
+}
+/**
+ * Provide a new heading level context.
+ */
+export declare const HeadingLevelProvider: React.FC<HeadingLevelProviderProps>;
+export declare const useHeadingLevel: () => {
+	level: number;
+	headingElement: import("../../utils").HeadingElement;
+};
 export declare type GridGutterSize = Extract<Size, "regular" | "big" | "huge">;
 /**
  * Defines the props of the component.
@@ -2135,13 +2206,13 @@ export declare const clamp: (value: number, min: number, max: number) => number;
 /**
  * Defines the props of the component.
  */
-export interface SlideshowProps extends GenericProps, Pick<SlidesProps, "autoPlay" | "slidesId" | "id" | "theme" | "fillHeight" | "groupBy"> {
+export interface SlideshowProps extends GenericProps, Pick<SlidesProps, "autoPlay" | "slidesId" | "id" | "theme" | "fillHeight" | "groupBy" | "slideGroupLabel"> {
 	/** current slide active */
 	activeIndex?: SlidesProps["activeIndex"];
 	/** Interval between each slide when automatic rotation is enabled. */
 	interval?: number;
 	/** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */
-	slideshowControlsProps?: Pick<SlideshowControlsProps, "nextButtonProps" | "previousButtonProps"> & Omit<SlideshowControlsProps, "activeIndex" | "onPaginationClick" | "onNextClick" | "onPreviousClick" | "slidesCount" | "parentRef" | "theme">;
+	slideshowControlsProps?: Pick<SlideshowControlsProps, "nextButtonProps" | "previousButtonProps" | "paginationItemProps"> & Omit<SlideshowControlsProps, "activeIndex" | "onPaginationClick" | "onNextClick" | "onPreviousClick" | "slidesCount" | "parentRef" | "theme">;
 	/** Callback when slide changes */
 	onChange?(index: number): void;
 }
@@ -2157,8 +2228,6 @@ export declare const Slideshow: Comp<SlideshowProps, HTMLDivElement>;
  * Defines the props of the component.
  */
 export interface SlideshowItemProps extends GenericProps {
-	/** whether the slideshow item is currently visible */
-	isCurrentlyVisible?: boolean;
 	/** interval in which slides are automatically shown */
 	interval?: number;
 }
@@ -2242,6 +2311,8 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
 	parentRef?: RefObject<HTMLDivElement> | HTMLDivElement | null;
 	/** Props to pass to the previous button (minus those already set by the SlideshowControls props). */
 	previousButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
+	/** Props to pass to the pagination wrapper */
+	paginationProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "role">;
 	/** Number of slides. */
 	slidesCount: number;
 	/** On next button click callback. */
@@ -2252,8 +2323,17 @@ export interface SlideshowControlsProps extends GenericProps, HasTheme {
 	onPreviousClick?(loopback?: boolean): void;
 	/** whether the slideshow is currently playing */
 	isAutoPlaying?: boolean;
-	/** function to be executed in order to retrieve the label for the pagination item */
+	/**
+	 * function to be executed in order to retrieve the label for the pagination item
+	 * @deprecated Use paginationItemProps instead.
+	 * */
 	paginationItemLabel?: (index: number) => string;
+	/**
+	 * function to be executed in order to retrieve the props for a pagination item.
+	 */
+	paginationItemProps?: (itemIndex: number) => React.HTMLAttributes<HTMLButtonElement> & {
+		label?: string;
+	};
 	/** Props to pass to the lay button (minus those already set by the SlideshowControls props). */
 	playButtonProps?: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
 }
@@ -2280,6 +2360,13 @@ export interface SlidesProps extends GenericProps, HasTheme {
 	toggleAutoPlay: () => void;
 	/** component to be rendered after the slides */
 	afterSlides?: React.ReactNode;
+	/** Whether the slides have controls linked */
+	hasControls?: boolean;
+	/**
+	 * Accessible label to set on a slide group.
+	 * Receives the group position starting from 1 and the total number of groups.
+	 * */
+	slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
 }
 /**
  * Slides component.