@lumx/react 4.2.0 → 4.2.1-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^4.2.0",
-        "@lumx/icons": "^4.2.0",
+        "@lumx/core": "^4.2.1-alpha.0",
+        "@lumx/icons": "^4.2.1-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "react-popper": "^2.2.4"
@@ -81,11 +81,12 @@
     },
     "scripts": {
         "build": "rollup -c",
-        "test": "vitest run",
+        "test": "vitest run --run",
         "type-check": "yarn tsc -p tsconfig.json",
         "start:storybook": "storybook dev -p 9000",
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "4.2.0"
+    "version": "4.2.1-alpha.0",
+    "stableVersion": "4.2.0"
 }

package/utils/index.d.ts

@@ -1,4 +1,4 @@
-import React__default, { RefObject } from 'react';
+import React__default, { RefObject, ReactNode, AriaAttributes } from 'react';
 import { Falsy } from '@lumx/core/js/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';
@@ -33,6 +33,67 @@ interface ClickAwayProviderProps extends ClickAwayParameters {
  */
 declare const ClickAwayProvider: React.FC<ClickAwayProviderProps>;
 
+type EventCallback = (evt?: Event) => void;
+interface InfiniteScrollProps {
+    callback: EventCallback;
+    options?: IntersectionObserverInit;
+}
+/**
+ * Handles basic callback pattern by using intersection observers.
+ *
+ * @param  {Function} callback The callback to execute once the element is in the viewport or is intersecting
+ *                             with its root element.
+ * @param  {Object}   options  The set of options we want to set to the intersection observer.
+ * @return {Element}  The Infinite scroll element.
+ */
+declare const InfiniteScroll: React__default.FC<InfiniteScrollProps>;
+
+interface A11YLiveMessageProps {
+    /** The message that will be read. */
+    children?: ReactNode;
+    /** Whether the message should be hidden */
+    hidden?: boolean;
+    /**
+     * The type of message.
+     * Default to "polite"
+     * Assertive should only be used for messages than need immediate attention.
+     */
+    type?: AriaAttributes['aria-live'];
+    /**
+     * Indicates whether assistive technologies will present all, or only parts of, the changed region based on
+     * the change notifications defined by the aria-relevant attribute.
+     */
+    atomic?: AriaAttributes['aria-atomic'];
+    /**
+     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+     * @see atomic.
+     */
+    relevant?: AriaAttributes['aria-relevant'];
+    /**
+     * Whether the live region reads a current status or
+     * raises an alert.
+     * Only use `alert` for time sensitive information that should be read immediately
+     * as it will interrupt anything being currently read.
+     */
+    role?: 'status' | 'alert';
+    /** Scope, for  tracking purposes */
+    scope?: string;
+    /** Optionnal classname */
+    className?: string;
+}
+/**
+ * Live region to read a message to screen readers.
+ * Messages can be "polite" and be read when possible or
+ * "assertive" and interrupt any message currently be read. (To be used sparingly)
+ *
+ * More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ *
+ * @family A11Y
+ * @param A11YLiveMessageProps
+ * @returns A11YLiveMessage
+ */
+declare const A11YLiveMessage: React__default.FC<A11YLiveMessageProps>;
+
 type Container = DocumentFragment | Element;
 /**
  * Portal initializing function.
@@ -335,5 +396,5 @@ type Output = [
  */
 declare const useRovingTabIndex: (...args: BaseHookOptions) => Output;
 
-export { ClickAwayProvider, DisabledStateProvider, MovingFocusContext, MovingFocusProvider, Portal, PortalProvider, useDisabledStateContext, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };
-export type { PortalInit, PortalProps, PortalProviderProps };
+export { A11YLiveMessage, ClickAwayProvider, DisabledStateProvider, InfiniteScroll, MovingFocusContext, MovingFocusProvider, Portal, PortalProvider, useDisabledStateContext, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };
+export type { A11YLiveMessageProps, InfiniteScrollProps, PortalInit, PortalProps, PortalProviderProps };

package/utils/index.js

@@ -1,14 +1,100 @@
-export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/DpdvhbTO.js';
 import React__default, { useEffect } from 'react';
+import { join, visuallyHidden } from '@lumx/core/js/utils/classNames';
+import { jsx } from 'react/jsx-runtime';
+export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/DpdvhbTO.js';
 import noop from 'lodash/noop';
 import findLast from 'lodash/findLast';
 import find from 'lodash/find';
 import findLastIndex from 'lodash/findLastIndex';
 import isNil from 'lodash/isNil';
 import groupBy from 'lodash/groupBy';
-import { jsx } from 'react/jsx-runtime';
 import uniqueId from 'lodash/uniqueId';
 
+// The error margin in px we want to have for triggering infinite scroll
+const CLASSNAME = 'lumx-infinite-scroll-anchor';
+/**
+ * Handles basic callback pattern by using intersection observers.
+ *
+ * @param  {Function} callback The callback to execute once the element is in the viewport or is intersecting
+ *                             with its root element.
+ * @param  {Object}   options  The set of options we want to set to the intersection observer.
+ * @return {Element}  The Infinite scroll element.
+ */
+const InfiniteScroll = ({
+  callback,
+  options
+}) => {
+  const elementRef = React__default.useRef(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries = []) => {
+      const hasIntersection = entries.some(entry => entry.isIntersecting);
+
+      // Make sure at least one target element has intersected with the root element.
+      if (!hasIntersection) {
+        return;
+      }
+      callback();
+    }, options);
+    const currentRef = elementRef.current;
+    if (elementRef && elementRef.current) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      observer.observe(elementRef.current);
+    }
+    return () => {
+      if (currentRef) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        observer.unobserve(currentRef);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef.current, callback]);
+
+  // In order to avoid issues when a zoom is added to the browser, we add a small height to the div so that
+  // the intersection has a higher chance of working correctly.
+  return /*#__PURE__*/jsx("div", {
+    ref: elementRef,
+    "aria-hidden": "true",
+    className: CLASSNAME,
+    style: {
+      height: '4px'
+    }
+  });
+};
+
+/**
+ * Live region to read a message to screen readers.
+ * Messages can be "polite" and be read when possible or
+ * "assertive" and interrupt any message currently be read. (To be used sparingly)
+ *
+ * More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ *
+ * @family A11Y
+ * @param A11YLiveMessageProps
+ * @returns A11YLiveMessage
+ */
+const A11YLiveMessage = ({
+  type = 'polite',
+  atomic,
+  role,
+  hidden,
+  relevant,
+  children,
+  className,
+  ...forwardedProps
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    ...forwardedProps,
+    className: join(hidden ? visuallyHidden() : undefined, className),
+    role: role,
+    "aria-live": type,
+    "aria-atomic": atomic,
+    "aria-relevant": relevant,
+    children: children
+  });
+};
+
 /**
  * Create a map from the given tab stop to sort them by rowKey;
  */
@@ -1403,5 +1489,5 @@ const useRovingTabIndex = (ref, disabled = false, rowKey = null, autofocus = fal
   return [tabIndex, focused, handleKeyDown, handleClick];
 };
 
-export { MovingFocusContext, MovingFocusProvider, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };
+export { A11YLiveMessage, InfiniteScroll, MovingFocusContext, MovingFocusProvider, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };
 //# sourceMappingURL=index.js.map