@lumx/react 2.2.18 → 2.2.20

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/src/utils/makeListenerTowerContext.ts

@@ -0,0 +1,32 @@
+import last from 'lodash/last';
+import pull from 'lodash/pull';
+
+export type Listener = { enable(): void; disable(): void };
+
+/**
+ * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
+ * listener are disabled).
+ * When a listener gets unregistered, the previously registered listener gets enabled again.
+ */
+export function makeListenerTowerContext() {
+    const LISTENERS: Listener[] = [];
+
+    return {
+        register(listener: Listener) {
+            // Disable previous listener.
+            last(LISTENERS)?.disable();
+            // Keep track of current listener.
+            LISTENERS.push(listener);
+            // Enable current listener.
+            listener.enable();
+        },
+        unregister(listener: Listener) {
+            // Disable current listener.
+            listener.disable();
+            // Remove current listener.
+            pull(LISTENERS, listener);
+            // Enable previous listener.
+            last(LISTENERS)?.enable();
+        },
+    };
+}

package/src/utils/type.ts

@@ -31,6 +31,9 @@ export type Comp<P, T = HTMLElement> = {
     className?: string;
 };
 
+/** Union type of all heading elements */
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
 /**
  * Define a generic props types.
  */

package/types.d.ts

@@ -18,6 +18,8 @@ export declare type Comp<P, T = HTMLElement> = {
 	/** Component base class name. */
 	className?: string;
 };
+/** Union type of all heading elements */
+export declare type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 /**
  * Define a generic props types.
  */
@@ -476,9 +478,7 @@ export declare type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTM
  * Button size definition.
  */
 export declare type ButtonSize = Extract<Size, "s" | "m">;
-export interface BaseButtonProps extends GenericProps {
-	/** ARIA button label. */
-	["aria-label"]?: string;
+export interface BaseButtonProps extends GenericProps, Pick<AriaAttributes, "aria-expanded" | "aria-haspopup" | "aria-pressed" | "aria-label"> {
 	/** Color variant. */
 	color?: Color;
 	/** Emphasis variant. */
@@ -743,7 +743,7 @@ export interface DatePickerProps extends GenericProps {
 	/** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
 	previousButtonProps: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis">;
 	/** Reference to the <button> element corresponding to the current date or the selected date. */
-	todayOrSelectedDateRef?: RefObject<HTMLButtonElement>;
+	todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
 	/** Currently selected date. */
 	value: Date | undefined;
 	/** On change callback. */
@@ -951,6 +951,8 @@ export interface PopoverProps extends GenericProps {
 	isOpen: boolean;
 	/** Offset placement relative to anchor. */
 	offset?: Offset;
+	/** Reference to the parent element that triggered the popover (will get back focus on close or else fallback on the anchor element). */
+	parentElement?: RefObject<HTMLElement>;
 	/** Placement relative to anchor. */
 	placement?: Placement;
 	/** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
@@ -1124,6 +1126,41 @@ export interface FlexBoxProps extends GenericProps {
  * @return React element.
  */
 export declare const FlexBox: Comp<FlexBoxProps, HTMLDivElement>;
+export interface GenericBlockProps extends FlexBoxProps {
+	/** Component to use as visual element. */
+	figure?: ReactNode;
+	/** Actions to set after the main content. */
+	actions?: ReactNode;
+	/** Main content to display */
+	children: ReactNode;
+	/** Orientation of the 3 sections */
+	orientation?: FlexBoxProps["orientation"];
+	/** Horizontal alignment. */
+	hAlign?: FlexBoxProps["hAlign"];
+	/** Vertical alignment. */
+	vAlign?: FlexBoxProps["vAlign"];
+	/**
+	 * The props to forward to the content.
+	 * By default, the content will have the same alignment as wrapper.
+	 */
+	contentProps?: Omit<FlexBoxProps, "children">;
+	/** props to forward to the actions element. */
+	actionsProps?: Omit<FlexBoxProps, "children">;
+	/** props to forward to the figure element. */
+	figureProps?: Omit<FlexBoxProps, "children">;
+}
+/**
+ * The GenericBlock is a layout component made of 3 sections that can be
+ * displayed either horizontally of vertically with the same gap between each section.
+ *
+ * The sections are:
+ * * (Optional) `Figure` => A visual element to display before the main content.
+ * * (Required) `Content` => The main content displayed
+ * * (Optional) `Actions` => One or more actions to set after the element.
+ *
+ * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
+ */
+export declare const GenericBlock: Comp<GenericBlockProps, HTMLDivElement>;
 export declare type GridGutterSize = Extract<Size, "regular" | "big" | "huge">;
 /**
  * Defines the props of the component.
@@ -1433,12 +1470,12 @@ export declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement
  * Defines the props of the component.
  */
 export interface LinkPreviewProps extends GenericProps {
-	/** Description (either a string, or sanitized html). */
-	description?: string | {
-		__html: string;
-	};
+	/** Description. */
+	description?: string;
 	/** Link URL. */
 	link: string;
+	/** Custom react component for the link (can be used to inject react router Link). */
+	linkAs?: "a" | any;
 	/** Props to pass to the link (minus those already set by the LinkPreview props). */
 	linkProps?: Omit<LinkProps, "color" | "colorVariant" | "href" | "target">;
 	/** Size variant. */
@@ -1449,6 +1486,8 @@ export interface LinkPreviewProps extends GenericProps {
 	thumbnailProps?: ThumbnailProps;
 	/** Title. */
 	title?: string;
+	/** Customize the title heading tag. */
+	titleHeading?: HeadingElement;
 }
 /**
  * LinkPreview component.
@@ -1858,6 +1897,8 @@ export interface CoreSelectProps extends GenericProps {
 	helper?: string;
 	/** Whether the select should close on click. */
 	closeOnClick?: boolean;
+	/** Icon (SVG path). */
+	icon?: string;
 	/** Whether the component is disabled or not. */
 	isDisabled?: boolean;
 	/** Whether the component is required or not. */
@@ -2646,7 +2687,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. */

package/src/components/link-preview/__snapshots__/LinkPreview.test.tsx.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<LinkPreview> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-link-preview lumx-link-preview--size-regular lumx-link-preview--theme-light"
->
-  <div
-    className="lumx-link-preview__wrapper"
-  >
-    <div
-      className="lumx-link-preview__container"
-    >
-      <div
-        className="lumx-link-preview__link"
-      >
-        <Link
-          className="lumx-link-preview__link"
-          color="primary"
-          colorVariant="N"
-          target="_blank"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<LinkPreview> Snapshots and structure should render correctly 2`] = `
-<div
-  className="lumx-link-preview lumx-link-preview--size-regular lumx-link-preview--theme-light"
->
-  <div
-    className="lumx-link-preview__wrapper"
-  >
-    <div
-      className="lumx-link-preview__container"
-    >
-      <div
-        className="lumx-link-preview__link"
-      >
-        <Link
-          className="lumx-link-preview__link"
-          color="primary"
-          colorVariant="N"
-          target="_blank"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;