@lumx/react 2.1.0-alpha.12 → 2.1.0-alpha.15

package/src/components/skeleton/SkeletonRectangle.stories.tsx

@@ -21,7 +21,7 @@ const variants = [
     SkeletonRectangleVariant.pill,
 ] as const;
 const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
-const aspectRatios = [AspectRatio.vertical, AspectRatio.square, AspectRatio.horizontal] as const;
+const aspectRatios = [AspectRatio.vertical, AspectRatio.square, AspectRatio.horizontal, AspectRatio.wide] as const;
 
 export const Rectangle = ({ theme }: any) => (
     <>

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -15,7 +15,7 @@ export type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
  */
 export interface SkeletonRectangleProps extends GenericProps {
     /** Aspect ratio (use with width and not height). */
-    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical'>;
+    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
     /** Height size. */
     height?: GlobalSize;
     /** Theme adapting the component to light or dark background. */

package/src/components/skeleton/SkeletonTypography.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { CSSProperties, forwardRef } from 'react';
 
-import { Theme, Typography } from '@lumx/react';
+import { Theme, TypographyInterface } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 /**
@@ -11,7 +11,7 @@ export interface SkeletonTypographyProps extends GenericProps {
     /** Theme adapting the component to light or dark background. */
     theme?: Theme;
     /** Typography variant. */
-    typography: Typography;
+    typography: TypographyInterface;
     /** Width CSS property. */
     width?: CSSProperties['width'];
 }

package/src/components/skeleton/__snapshots__/SkeletonRectangle.test.tsx.snap

@@ -103,5 +103,12 @@ Array [
       className="lumx-skeleton-rectangle__inner"
     />
   </div>,
+  <div
+    className="lumx-spacing-margin lumx-skeleton-rectangle lumx-skeleton-rectangle--aspect-ratio-wide lumx-skeleton-rectangle--theme-light lumx-skeleton-rectangle--variant-squared lumx-skeleton-rectangle--width-xl"
+  >
+    <div
+      className="lumx-skeleton-rectangle__inner"
+    />
+  </div>,
 ]
 `;

package/src/hooks/useDisableBodyScroll.ts

@@ -2,6 +2,12 @@ import { useEffect } from 'react';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import { Falsy } from '@lumx/react/utils';
 
+/**
+ * Disables the scroll on the body to make it only usable in the current modal element.
+ * When the modal element is not provided anymore, the scroll is restored.
+ *
+ * @param modalElement The modal element.
+ */
 export const useDisableBodyScroll = (modalElement: Element | Falsy): void => {
     useEffect(() => {
         if (!modalElement) {
@@ -14,7 +20,9 @@ export const useDisableBodyScroll = (modalElement: Element | Falsy): void => {
         return () => {
             enableBodyScroll(modalElement);
             // Restore the previous overflow style.
-            document.documentElement.style.overflow = previousDocumentOverflow;
+            requestAnimationFrame(() => {
+                document.documentElement.style.overflow = previousDocumentOverflow;
+            });
         };
     }, [modalElement]);
 };

package/src/hooks/useInfiniteScroll.tsx

@@ -7,6 +7,9 @@ type useInfiniteScrollType = (
 ) => void;
 type EventCallback = (evt?: Event) => void;
 
+// The error margin in px we want to have for triggering infinite scroll
+const SCROLL_TRIGGER_MARGIN = 5;
+
 /**
  * Listen to clicks away from a given element and callback the passed in function.
  *
@@ -14,14 +17,22 @@ type EventCallback = (evt?: Event) => void;
  * @param  [callback]        A callback function to call when the bottom of the reference element is reached.
  * @param  [callbackOnMount] A callback function to call when the component is mounted.
  */
-export const useInfiniteScroll: useInfiniteScrollType = (ref, callback, callbackOnMount = false) => {
+export const useInfiniteScroll: useInfiniteScrollType = (
+    ref,
+    callback,
+    callbackOnMount = false,
+    scrollTriggerMargin = SCROLL_TRIGGER_MARGIN,
+) => {
     useEffect(() => {
         const { current } = ref;
         if (!callback || !current) {
             return undefined;
         }
 
-        const isAtBottom = () => Boolean(current && current.scrollTop + current.clientHeight >= current.scrollHeight);
+        const isAtBottom = () =>
+            Boolean(
+                current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin,
+            );
 
         const onScroll = (e?: Event): void => {
             if (isAtBottom()) {
@@ -39,7 +50,7 @@ export const useInfiniteScroll: useInfiniteScrollType = (ref, callback, callback
             current.removeEventListener('scroll', onScroll);
             current.removeEventListener('resize', onScroll);
         };
-    }, [ref, callback]);
+    }, [ref, callback, scrollTriggerMargin]);
 
     useEffect(() => {
         if (callback && callbackOnMount) {

package/types.d.ts

@@ -112,9 +112,65 @@ export declare const Emphasis: {
 };
 export declare type Emphasis = ValueOf<typeof Emphasis>;
 /**
- * List of typographies.
+ * List of typographies that can't be customized.
+ */
+export declare const TypographyInterface: {
+	readonly overline: "overline";
+	readonly caption: "caption";
+	readonly body1: "body1";
+	readonly body2: "body2";
+	readonly subtitle1: "subtitle1";
+	readonly subtitle2: "subtitle2";
+	readonly title: "title";
+	readonly headline: "headline";
+	readonly display1: "display1";
+};
+export declare type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyTitleCustom: {
+	readonly title1: "custom-title1";
+	readonly title2: "custom-title2";
+	readonly title3: "custom-title3";
+	readonly title4: "custom-title4";
+	readonly title5: "custom-title5";
+	readonly title6: "custom-title6";
+};
+export declare type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+declare const TypographyCustom: {
+	readonly intro: "intro";
+	readonly "body-large": "body-large";
+	readonly body: "body";
+	readonly quote: "quote";
+	readonly "publish-info": "publish-info";
+	readonly button: "button";
+	readonly title1: "custom-title1";
+	readonly title2: "custom-title2";
+	readonly title3: "custom-title3";
+	readonly title4: "custom-title4";
+	readonly title5: "custom-title5";
+	readonly title6: "custom-title6";
+};
+export declare type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
  */
 export declare const Typography: {
+	readonly custom: {
+		readonly intro: "intro";
+		readonly "body-large": "body-large";
+		readonly body: "body";
+		readonly quote: "quote";
+		readonly "publish-info": "publish-info";
+		readonly button: "button";
+		readonly title1: "custom-title1";
+		readonly title2: "custom-title2";
+		readonly title3: "custom-title3";
+		readonly title4: "custom-title4";
+		readonly title5: "custom-title5";
+		readonly title6: "custom-title6";
+	};
 	readonly overline: "overline";
 	readonly caption: "caption";
 	readonly body1: "body1";
@@ -125,15 +181,22 @@ export declare const Typography: {
 	readonly headline: "headline";
 	readonly display1: "display1";
 };
-export declare type Typography = ValueOf<typeof Typography>;
+export declare type Typography = TypographyInterface | TypographyCustom;
 /**
  * All available aspect ratios.
  */
 export declare const AspectRatio: {
+	/** Intrinsic content ratio. */
 	readonly original: "original";
+	/** Ratio 16:9 */
+	readonly wide: "wide";
+	/** Ratio 3:2 */
 	readonly horizontal: "horizontal";
+	/** Ratio 3:2 */
 	readonly vertical: "vertical";
+	/** Ratio 1:1 */
 	readonly square: "square";
+	/** Ratio constrained by the parent. */
 	readonly free: "free";
 };
 export declare type AspectRatio = ValueOf<typeof AspectRatio>;
@@ -1326,7 +1389,7 @@ export interface LinkProps extends GenericProps {
 	/** Link target. */
 	target?: HTMLAnchorProps["target"];
 	/** Typography variant. */
-	typography?: Typography;
+	typography?: TypographyInterface | TypographyTitleCustom;
 }
 /**
  * Link component.
@@ -1902,7 +1965,7 @@ export declare type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleV
  */
 export interface SkeletonRectangleProps extends GenericProps {
 	/** Aspect ratio (use with width and not height). */
-	aspectRatio?: Extract<AspectRatio, "square" | "horizontal" | "vertical">;
+	aspectRatio?: Extract<AspectRatio, "square" | "horizontal" | "vertical" | "wide">;
 	/** Height size. */
 	height?: GlobalSize;
 	/** Theme adapting the component to light or dark background. */
@@ -1927,7 +1990,7 @@ export interface SkeletonTypographyProps extends GenericProps {
 	/** Theme adapting the component to light or dark background. */
 	theme?: Theme;
 	/** Typography variant. */
-	typography: Typography;
+	typography: TypographyInterface;
 	/** Width CSS property. */
 	width?: CSSProperties["width"];
 }