@lumx/react 2.1.6-alpha.3 → 2.1.7

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.6-alpha.3",
-        "@lumx/icons": "^2.1.6-alpha.3",
+        "@lumx/core": "^2.1.7",
+        "@lumx/icons": "^2.1.7",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -23,18 +23,13 @@
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
         "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
         "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+        "@babel/plugin-proposal-private-methods": "^7.16.0",
+        "@babel/plugin-proposal-private-property-in-object": "^7.16.0",
         "@babel/preset-env": "^7.8.3",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.12.7",
         "@rollup/plugin-commonjs": "^15.0.0",
         "@rollup/plugin-node-resolve": "9.0.0",
-        "@storybook/addon-a11y": "^5.3.21",
-        "@storybook/addon-actions": "^5.3.21",
-        "@storybook/addon-knobs": "^5.3.21",
-        "@storybook/addon-storysource": "^5.3.21",
-        "@storybook/addon-viewport": "^5.3.21",
-        "@storybook/core": "^5.3.21",
-        "@storybook/react": "^5.3.21",
         "@types/body-scroll-lock": "^2.6.1",
         "@types/classnames": "^2.2.9",
         "@types/enzyme": "^3.10.5",
@@ -45,7 +40,7 @@
         "@types/react-is": "^16.7.1",
         "autoprefixer": "^9.7.4",
         "babel-loader": "^8.0.6",
-        "chromatic": "^5.4.0",
+        "chromatic": "^6.0.6",
         "core-js": "^3.6.4",
         "dts-bundle-generator": "^5.5.0",
         "enzyme": "^3.11.0",
@@ -120,11 +115,11 @@
         "prepare": "install-peers || exit 0",
         "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
-        "prepare:storybook": "mkdir -p node_modules",
-        "storybook": "yarn prepare:storybook && start-storybook -s ../site-demo/static/ -p 9000",
-        "build:storybook": "yarn prepare:storybook && build-storybook -s ../site-demo/static"
+        "storybook": "yarn start:storybook",
+        "start:storybook": "cd storybook && ./start",
+        "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.1.6-alpha.3",
-    "gitHead": "53b3ea3c7715614e9a6ce1339f6d350e72ddf52d"
+    "version": "2.1.7",
+    "gitHead": "b025a4e7e397ec0e725430120007f9ac8433fadb"
 }

package/src/components/alert-dialog/AlertDialog.stories.tsx

@@ -1,13 +1,20 @@
 import React, { RefObject, useRef, useState } from 'react';
 import { Button, Theme, Link } from '@lumx/react';
+import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
 import { AlertDialog } from './AlertDialog';
 
 export default {
     title: 'LumX components/alert-dialog/AlertDialog',
     parameters: {
-        // Notifies Chromatic to pause the animations when they finish for the specific story.
-        chromatic: { pauseAnimationAtEnd: true },
+        // Delay Chromatic snapshot to wait for dialog to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: DIALOG_TRANSITION_DURATION,
+        },
     },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [chromaticForceScreenSize],
 };
 
 const defaultProps = {

package/src/components/autocomplete/AutocompleteMultiple.stories.tsx

@@ -6,7 +6,7 @@ import { mdiClose, mdiFlag } from '@lumx/icons';
 
 import { CITIES } from './__mockData__';
 
-export default { title: 'LumX components/autocomplete/Autocomplete Multiple' };
+export default { title: 'LumX components/autocomplete/AutocompleteMultiple' };
 
 interface City {
     id: string;

package/src/components/avatar/__snapshots__/Avatar.test.tsx.snap

@@ -10,7 +10,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="xs"
@@ -25,7 +25,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="s"
@@ -40,7 +40,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="m"
@@ -55,7 +55,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="l"
@@ -70,7 +70,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="xl"
@@ -85,7 +85,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       onClick={[Function]}
       size="xxl"
@@ -105,7 +105,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -119,7 +119,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -133,7 +133,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -147,7 +147,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -161,7 +161,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -175,7 +175,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar1.jpg"
+      image="/demo-assets/avatar1.jpg"
       loading="lazy"
       size="xxl"
       theme="light"
@@ -194,7 +194,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -258,7 +258,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -322,7 +322,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -386,7 +386,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -450,7 +450,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -514,7 +514,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar2.jpg"
+      image="/demo-assets/avatar2.jpg"
       loading="lazy"
       size="xxl"
       theme="light"
@@ -583,7 +583,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -608,7 +608,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -633,7 +633,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -658,7 +658,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -683,7 +683,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -708,7 +708,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="avatar3.jpg"
+      image="/demo-assets/avatar3.jpg"
       loading="lazy"
       size="xxl"
       theme="light"
@@ -738,7 +738,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="xs"
       theme="light"
@@ -752,7 +752,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="s"
       theme="light"
@@ -766,7 +766,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="m"
       theme="light"
@@ -780,7 +780,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="l"
       theme="light"
@@ -794,7 +794,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="xl"
       theme="light"
@@ -808,7 +808,7 @@ Array [
       aspectRatio="square"
       className="lumx-avatar__thumbnail"
       fallback="M21,5V11.59L18,8.58L14,12.59L10,8.59L6,12.59L3,9.58V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M18,11.42L21,14.43V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V12.42L6,15.41L10,11.41L14,15.41"
-      image="portrait3.jpg"
+      image="/demo-assets/portrait3.jpg"
       loading="lazy"
       size="xxl"
       theme="light"

package/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderA
     >
       <Avatar
         alt="Avatar"
-        image="avatar1.jpg"
+        image="/demo-assets/avatar1.jpg"
         onKeyPress={[Function]}
         size="m"
         tabIndex={-1}

package/src/components/dialog/Dialog.stories.tsx

@@ -15,17 +15,24 @@ import {
     Theme,
     Toolbar,
 } from '@lumx/react';
+import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { select } from '@storybook/addon-knobs';
 import React, { RefObject, useRef, useState } from 'react';
 import { Dialog, DialogSizes } from './Dialog';
 import { loremIpsum } from '../../stories/knobs/lorem';
+import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
 
 export default {
     title: 'LumX components/dialog/Dialog',
     parameters: {
-        // Notifies Chromatic to pause the animations when they finish for the specific story.
-        chromatic: { pauseAnimationAtEnd: true },
+        // Delay Chromatic snapshot to wait for dialog to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: DIALOG_TRANSITION_DURATION,
+        },
     },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [chromaticForceScreenSize],
 };
 
 const header = <header className="lumx-spacing-padding lumx-typography-title">Dialog header</header>;

package/src/components/image-block/ImageBlock.stories.tsx

@@ -11,8 +11,8 @@ export default { title: 'LumX components/image-block/Image Block' };
 
 export const DefaultImageBlock = ({ theme }: any) => {
     const alt = text('Alternative text', 'Image alt text');
-    const align = select<Alignment>('Alignment', Alignment, Alignment.center) as any;
-    const aspectRatio = select<AspectRatio>('Aspect ratio', AspectRatio, AspectRatio.square);
+    const align = select('Alignment', Alignment, Alignment.center) as any;
+    const aspectRatio = select('Aspect ratio', AspectRatio, AspectRatio.square);
     const title = text('Title', 'Hello world');
     const description = text('Description', 'My awesome description');
     const crossOrigin = enumKnob('CORS', [undefined, 'anonymous', 'use-credentials'], undefined);

package/src/components/image-block/__snapshots__/ImageBlock.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`<ImageBlock> Snapshots and structure should render story 'DefaultImageB
         "y": 0,
       }
     }
-    image="landscape1.jpg"
+    image="/demo-assets/landscape1.jpg"
     loading="lazy"
     onClick={false}
     theme="light"

package/src/components/lightbox/Lightbox.stories.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+    ImageBlock,
+    Slideshow,
+    SlideshowItem,
+    Toolbar,
+    Divider,
+    Alignment,
+    TextField,
+    Typography,
+    Link,
+    Lightbox,
+    ThumbnailProps,
+} from '@lumx/react';
+import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+
+export default { title: 'LumX components/lightbox/Lightbox' };
+
+interface RowItemProps {
+    image: ThumbnailProps;
+}
+
+const RowItem: React.FC<RowItemProps> = ({ image }) => {
+    const [isOpen, setOpen] = React.useState(false);
+    const { image: url, alt: name } = image;
+    const linkRef = React.useRef(null);
+
+    return (
+        <>
+            <Toolbar
+                label={
+                    <Link ref={linkRef} typography={Typography.subtitle1} onClick={() => setOpen(true)}>
+                        {name}
+                    </Link>
+                }
+            />
+            <Lightbox
+                closeButtonProps={{ label: 'Close' }}
+                isOpen={isOpen}
+                onClose={() => setOpen(false)}
+                parentElement={linkRef}
+            >
+                <Slideshow
+                    activeIndex={0}
+                    fillHeight
+                    slideshowControlsProps={{
+                        nextButtonProps: { label: 'Next' },
+                        previousButtonProps: { label: 'Previous' },
+                    }}
+                >
+                    <SlideshowItem key={name}>
+                        <ImageBlock align={Alignment.center} alt={name} fillHeight image={url} />
+                    </SlideshowItem>
+                </Slideshow>
+            </Lightbox>
+        </>
+    );
+};
+
+export const Focus = () => {
+    const [textFieldValue, setTextFieldValue] = React.useState('');
+    const images: ThumbnailProps[] = thumbnailsKnob(12);
+
+    return (
+        <>
+            <TextField
+                value={textFieldValue}
+                onChange={setTextFieldValue}
+                className="lumx-spacing-margin-vertical-big"
+            />
+            {images.map((image, index) => {
+                const itemPosition = index + 1;
+                return (
+                    <div key={itemPosition}>
+                        <RowItem image={image} />
+                        <Divider />
+                    </div>
+                );
+            })}
+        </>
+    );
+};

package/src/components/lightbox/Lightbox.tsx

@@ -10,7 +10,6 @@ import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/
 
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
-import { useFocus } from '@lumx/react/hooks/useFocus';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -90,9 +89,18 @@ export const Lightbox: Comp<LightboxProps, HTMLDivElement> = forwardRef((props,
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocusTrap(wrapperRef.current, childrenRef.current?.firstChild);
 
-    // Focus the parent element on close.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocus(parentElement?.current, !isOpen);
+    const previousOpen = React.useRef(isOpen);
+
+    React.useEffect(() => {
+        if (isOpen !== previousOpen.current) {
+            previousOpen.current = isOpen;
+
+            // Focus the parent element on close.
+            if (!isOpen && parentElement && parentElement.current) {
+                parentElement.current.focus();
+            }
+        }
+    }, [isOpen, parentElement]);
 
     // Close lightbox on escape key pressed.
     // eslint-disable-next-line react-hooks/rules-of-hooks