@lumx/react 3.0.1 → 3.0.2

package/esm/_internal/slideshow.js.map

@@ -1 +1 @@
-{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/state.js

@@ -0,0 +1,145 @@
+import { e as _toConsumableArray, _ as _objectSpread2, a as _defineProperty, d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
+import { createContext, useContext, useMemo, useEffect, useCallback } from 'react';
+import { u as uid } from '../index2.js';
+
+var INIT_STATE = {
+  isLazy: true,
+  shouldActivateOnFocus: false,
+  activeTabIndex: 0,
+  ids: {
+    tab: [],
+    tabPanel: []
+  }
+};
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case 'update':
+      return _objectSpread2({}, state, {}, action.payload);
+
+    case 'setActiveTabIndex':
+      {
+        if (state.activeTabIndex === action.payload) {
+          return state;
+        } // Change active tab index.
+
+
+        return _objectSpread2({}, state, {
+          activeTabIndex: action.payload
+        });
+      }
+
+    case 'register':
+      {
+        var _action$payload = action.payload,
+            type = _action$payload.type,
+            id = _action$payload.id; // Append tab/tabPanel id in state.
+
+        return _objectSpread2({}, state, {
+          ids: _objectSpread2({}, state.ids, _defineProperty({}, type, [].concat(_toConsumableArray(state.ids[type]), [id])))
+        });
+      }
+
+    case 'unregister':
+      {
+        var _action$payload2 = action.payload,
+            _type = _action$payload2.type,
+            _id = _action$payload2.id;
+
+        var index = state.ids[_type].indexOf(_id);
+
+        if (index === -1) return state; // Remove tab & tab panel at index.
+
+        var tabIds = _toConsumableArray(state.ids.tab);
+
+        tabIds.splice(index, 1);
+
+        var tabPanelIds = _toConsumableArray(state.ids.tabPanel);
+
+        tabPanelIds.splice(index, 1);
+        return _objectSpread2({}, state, {
+          ids: {
+            tab: tabIds,
+            tabPanel: tabPanelIds
+          }
+        });
+      }
+
+    default:
+      return state;
+  }
+};
+var TabProviderContext = createContext(null);
+
+/* eslint-disable react-hooks/rules-of-hooks */
+var useTabProviderContext = function useTabProviderContext(type, originalId) {
+  var context = useContext(TabProviderContext);
+
+  if (!context) {
+    return undefined;
+  }
+
+  var _context = _slicedToArray(context, 2),
+      state = _context[0],
+      dispatch = _context[1]; // Current tab or tab panel id.
+
+
+  var id = useMemo(function () {
+    return originalId || "".concat(type, "-").concat(uid());
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  useEffect(function () {
+    // On mount: register tab or tab panel id.
+    dispatch({
+      type: 'register',
+      payload: {
+        type: type,
+        id: id
+      }
+    });
+    return function () {
+      // On unmount: unregister tab or tab panel id.
+      dispatch({
+        type: 'unregister',
+        payload: {
+          type: type,
+          id: id
+        }
+      });
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); // Find tab/tabPanel index using it's id.
+
+  var index = useMemo(function () {
+    return state.ids[type].indexOf(id);
+  }, [state.ids, type, id]);
+  var tabId = useMemo(function () {
+    return state.ids.tab[index] || '';
+  }, [state, index]);
+  var tabPanelId = useMemo(function () {
+    return state.ids.tabPanel[index] || '';
+  }, [state, index]);
+  var isActive = useMemo(function () {
+    return state.activeTabIndex === index;
+  }, [state, index]);
+  var changeToTab = useCallback(function () {
+    return dispatch({
+      type: 'setActiveTabIndex',
+      payload: index
+    });
+  }, [dispatch, index]);
+  return {
+    isLazy: state.isLazy,
+    shouldActivateOnFocus: state.shouldActivateOnFocus,
+    tabId: tabId,
+    tabPanelId: tabPanelId,
+    isActive: isActive,
+    changeToTab: changeToTab
+  };
+};
+var useTabProviderContextState = function useTabProviderContextState() {
+  var context = useContext(TabProviderContext);
+  return context === null || context === void 0 ? void 0 : context[0];
+};
+
+export { INIT_STATE as I, TabProviderContext as T, useTabProviderContext as a, reducer as r, useTabProviderContextState as u };
+//# sourceMappingURL=state.js.map

package/esm/_internal/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sources":["../../../src/components/tabs/state.ts"],"sourcesContent":["import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';\nimport { uid } from 'uid';\n\ntype TabType = 'tab' | 'tabPanel';\n\nexport interface State {\n    isLazy: boolean;\n    shouldActivateOnFocus: boolean;\n    activeTabIndex: number;\n    ids: Record<TabType, string[]>;\n}\n\nexport const INIT_STATE: State = {\n    isLazy: true,\n    shouldActivateOnFocus: false,\n    activeTabIndex: 0,\n    ids: { tab: [], tabPanel: [] },\n};\n\nexport type Action =\n    | { type: 'update'; payload: Partial<State> }\n    | { type: 'setActiveTabIndex'; payload: number }\n    | { type: 'register'; payload: { type: TabType; id: string } }\n    | { type: 'unregister'; payload: { type: TabType; id: string } };\n\nexport const reducer = (state: State, action: Action): State => {\n    switch (action.type) {\n        case 'update':\n            return { ...state, ...action.payload };\n        case 'setActiveTabIndex': {\n            if (state.activeTabIndex === action.payload) {\n                return state;\n            }\n            // Change active tab index.\n            return { ...state, activeTabIndex: action.payload };\n        }\n        case 'register': {\n            const { type, id } = action.payload;\n            // Append tab/tabPanel id in state.\n            return { ...state, ids: { ...state.ids, [type]: [...state.ids[type], id] } };\n        }\n        case 'unregister': {\n            const { type, id } = action.payload;\n            const index = state.ids[type].indexOf(id);\n            if (index === -1) return state;\n            // Remove tab & tab panel at index.\n            const tabIds = [...state.ids.tab];\n            tabIds.splice(index, 1);\n            const tabPanelIds = [...state.ids.tabPanel];\n            tabPanelIds.splice(index, 1);\n            return {\n                ...state,\n                ids: { tab: tabIds, tabPanel: tabPanelIds },\n            };\n        }\n        default:\n            return state;\n    }\n};\n\nexport const TabProviderContext = createContext<[State, Dispatch<Action>] | null>(null);\n\nexport type TabState = Pick<Required<State>, 'isLazy' | 'shouldActivateOnFocus'> & {\n    isActive: boolean;\n    tabId: string;\n    tabPanelId: string;\n    changeToTab(): void;\n};\n\n/* eslint-disable react-hooks/rules-of-hooks */\nexport const useTabProviderContext = (type: TabType, originalId?: string): undefined | TabState => {\n    const context = useContext(TabProviderContext);\n    if (!context) {\n        return undefined;\n    }\n    const [state, dispatch] = context;\n\n    // Current tab or tab panel id.\n    const id = useMemo(\n        () => originalId || `${type}-${uid()}`,\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n    useEffect(\n        () => {\n            // On mount: register tab or tab panel id.\n            dispatch({ type: 'register', payload: { type, id } });\n            return () => {\n                // On unmount: unregister tab or tab panel id.\n                dispatch({ type: 'unregister', payload: { type, id } });\n            };\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n\n    // Find tab/tabPanel index using it's id.\n    const index = useMemo(() => state.ids[type].indexOf(id), [state.ids, type, id]);\n    const tabId = useMemo(() => state.ids.tab[index] || '', [state, index]);\n    const tabPanelId = useMemo(() => state.ids.tabPanel[index] || '', [state, index]);\n    const isActive = useMemo(() => state.activeTabIndex === index, [state, index]);\n    const changeToTab = useCallback(() => dispatch({ type: 'setActiveTabIndex', payload: index }), [dispatch, index]);\n    return {\n        isLazy: state.isLazy,\n        shouldActivateOnFocus: state.shouldActivateOnFocus,\n        tabId,\n        tabPanelId,\n        isActive,\n        changeToTab,\n    };\n};\n\nexport const useTabProviderContextState = (): State | undefined => {\n    const context = useContext(TabProviderContext);\n    return context?.[0];\n};\n"],"names":["INIT_STATE","isLazy","shouldActivateOnFocus","activeTabIndex","ids","tab","tabPanel","reducer","state","action","type","payload","id","index","indexOf","tabIds","splice","tabPanelIds","TabProviderContext","createContext","useTabProviderContext","originalId","context","useContext","undefined","dispatch","useMemo","uid","useEffect","tabId","tabPanelId","isActive","changeToTab","useCallback","useTabProviderContextState"],"mappings":"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"}

package/esm/_internal/tabs.js

@@ -9,6 +9,7 @@ import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
 import './mergeRefs.js';
+import './state.js';
 import './useRovingTabIndex.js';
 export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './TabPanel.js';
 //# sourceMappingURL=tabs.js.map

package/esm/_internal/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/esm/_internal/text.js

@@ -0,0 +1,10 @@
+import './_rollupPluginBabelHelpers.js';
+import './components.js';
+import 'react';
+import './getRootClassName.js';
+import 'lodash/isBoolean';
+import 'lodash/isEmpty';
+import 'lodash/kebabCase';
+import 'lodash/noop';
+export { T as Text } from './Text2.js';
+//# sourceMappingURL=text.js.map

package/esm/_internal/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/esm/_internal/useRovingTabIndex.js

@@ -1,150 +1,11 @@
-import { e as _toConsumableArray, _ as _objectSpread2, a as _defineProperty, d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
-import { createContext, useContext, useMemo, useEffect, useCallback } from 'react';
-import { u as uid } from '../index2.js';
-
-var INIT_STATE = {
-  isLazy: true,
-  shouldActivateOnFocus: false,
-  activeTabIndex: 0,
-  ids: {
-    tab: [],
-    tabPanel: []
-  }
-};
-var reducer = function reducer(state, action) {
-  switch (action.type) {
-    case 'update':
-      return _objectSpread2({}, state, {}, action.payload);
-
-    case 'setActiveTabIndex':
-      {
-        if (state.activeTabIndex === action.payload) {
-          return state;
-        } // Change active tab index.
-
-
-        return _objectSpread2({}, state, {
-          activeTabIndex: action.payload
-        });
-      }
-
-    case 'register':
-      {
-        var _action$payload = action.payload,
-            type = _action$payload.type,
-            id = _action$payload.id; // Append tab/tabPanel id in state.
-
-        return _objectSpread2({}, state, {
-          ids: _objectSpread2({}, state.ids, _defineProperty({}, type, [].concat(_toConsumableArray(state.ids[type]), [id])))
-        });
-      }
-
-    case 'unregister':
-      {
-        var _action$payload2 = action.payload,
-            _type = _action$payload2.type,
-            _id = _action$payload2.id;
-
-        var index = state.ids[_type].indexOf(_id);
-
-        if (index === -1) return state; // Remove tab & tab panel at index.
-
-        var tabIds = _toConsumableArray(state.ids.tab);
-
-        tabIds.splice(index, 1);
-
-        var tabPanelIds = _toConsumableArray(state.ids.tabPanel);
-
-        tabPanelIds.splice(index, 1);
-        return _objectSpread2({}, state, {
-          ids: {
-            tab: tabIds,
-            tabPanel: tabPanelIds
-          }
-        });
-      }
-
-    default:
-      return state;
-  }
-};
-var TabProviderContext = createContext(null);
-
-/* eslint-disable react-hooks/rules-of-hooks */
-var useTabProviderContext = function useTabProviderContext(type, originalId) {
-  var context = useContext(TabProviderContext);
-
-  if (!context) {
-    return undefined;
-  }
-
-  var _context = _slicedToArray(context, 2),
-      state = _context[0],
-      dispatch = _context[1]; // Current tab or tab panel id.
-
-
-  var id = useMemo(function () {
-    return originalId || "".concat(type, "-").concat(uid());
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  useEffect(function () {
-    // On mount: register tab or tab panel id.
-    dispatch({
-      type: 'register',
-      payload: {
-        type: type,
-        id: id
-      }
-    });
-    return function () {
-      // On unmount: unregister tab or tab panel id.
-      dispatch({
-        type: 'unregister',
-        payload: {
-          type: type,
-          id: id
-        }
-      });
-    };
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []); // Find tab/tabPanel index using it's id.
-
-  var index = useMemo(function () {
-    return state.ids[type].indexOf(id);
-  }, [state.ids, type, id]);
-  var tabId = useMemo(function () {
-    return state.ids.tab[index] || '';
-  }, [state, index]);
-  var tabPanelId = useMemo(function () {
-    return state.ids.tabPanel[index] || '';
-  }, [state, index]);
-  var isActive = useMemo(function () {
-    return state.activeTabIndex === index;
-  }, [state, index]);
-  var changeToTab = useCallback(function () {
-    return dispatch({
-      type: 'setActiveTabIndex',
-      payload: index
-    });
-  }, [dispatch, index]);
-  return {
-    isLazy: state.isLazy,
-    shouldActivateOnFocus: state.shouldActivateOnFocus,
-    tabId: tabId,
-    tabPanelId: tabPanelId,
-    isActive: isActive,
-    changeToTab: changeToTab
-  };
-};
-var useTabProviderContextState = function useTabProviderContextState() {
-  var context = useContext(TabProviderContext);
-  return context === null || context === void 0 ? void 0 : context[0];
-};
+import { e as _toConsumableArray } from './_rollupPluginBabelHelpers.js';
+import { useEffect } from 'react';
 
 var useRovingTabIndex = function useRovingTabIndex(_ref) {
   var parentRef = _ref.parentRef,
       elementSelector = _ref.elementSelector,
       keepTabIndex = _ref.keepTabIndex,
+      onElementFocus = _ref.onElementFocus,
       _ref$extraDependencie = _ref.extraDependencies,
       extraDependencies = _ref$extraDependencie === void 0 ? [] : _ref$extraDependencie;
   useEffect(function () {
@@ -183,7 +44,11 @@ var useRovingTabIndex = function useRovingTabIndex(_ref) {
         }
 
         var newElement = elements[newTabFocus];
-        newElement === null || newElement === void 0 ? void 0 : newElement.focus();
+        newElement === null || newElement === void 0 ? void 0 : newElement.focus(); // When an element is focused using roving tab index, trigger the onElementFocus callback
+
+        if (newElement && onElementFocus) {
+          onElementFocus(newElement);
+        }
 
         if (keepTabIndex) {
           evt.currentTarget.setAttribute('tabindex', '-1');
@@ -218,5 +83,5 @@ var useRovingTabIndex = function useRovingTabIndex(_ref) {
   [parentRef].concat(_toConsumableArray(extraDependencies)));
 };
 
-export { INIT_STATE as I, TabProviderContext as T, useTabProviderContextState as a, useTabProviderContext as b, reducer as r, useRovingTabIndex as u };
+export { useRovingTabIndex as u };
 //# sourceMappingURL=useRovingTabIndex.js.map

package/esm/_internal/useRovingTabIndex.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRovingTabIndex.js","sources":["../../../src/components/tabs/state.ts","../../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { Dispatch, createContext, useCallback, useContext, useEffect, useMemo } from 'react';\nimport { uid } from 'uid';\n\ntype TabType = 'tab' | 'tabPanel';\n\nexport interface State {\n    isLazy: boolean;\n    shouldActivateOnFocus: boolean;\n    activeTabIndex: number;\n    ids: Record<TabType, string[]>;\n}\n\nexport const INIT_STATE: State = {\n    isLazy: true,\n    shouldActivateOnFocus: false,\n    activeTabIndex: 0,\n    ids: { tab: [], tabPanel: [] },\n};\n\nexport type Action =\n    | { type: 'update'; payload: Partial<State> }\n    | { type: 'setActiveTabIndex'; payload: number }\n    | { type: 'register'; payload: { type: TabType; id: string } }\n    | { type: 'unregister'; payload: { type: TabType; id: string } };\n\nexport const reducer = (state: State, action: Action): State => {\n    switch (action.type) {\n        case 'update':\n            return { ...state, ...action.payload };\n        case 'setActiveTabIndex': {\n            if (state.activeTabIndex === action.payload) {\n                return state;\n            }\n            // Change active tab index.\n            return { ...state, activeTabIndex: action.payload };\n        }\n        case 'register': {\n            const { type, id } = action.payload;\n            // Append tab/tabPanel id in state.\n            return { ...state, ids: { ...state.ids, [type]: [...state.ids[type], id] } };\n        }\n        case 'unregister': {\n            const { type, id } = action.payload;\n            const index = state.ids[type].indexOf(id);\n            if (index === -1) return state;\n            // Remove tab & tab panel at index.\n            const tabIds = [...state.ids.tab];\n            tabIds.splice(index, 1);\n            const tabPanelIds = [...state.ids.tabPanel];\n            tabPanelIds.splice(index, 1);\n            return {\n                ...state,\n                ids: { tab: tabIds, tabPanel: tabPanelIds },\n            };\n        }\n        default:\n            return state;\n    }\n};\n\nexport const TabProviderContext = createContext<[State, Dispatch<Action>] | null>(null);\n\nexport type TabState = Pick<Required<State>, 'isLazy' | 'shouldActivateOnFocus'> & {\n    isActive: boolean;\n    tabId: string;\n    tabPanelId: string;\n    changeToTab(): void;\n};\n\n/* eslint-disable react-hooks/rules-of-hooks */\nexport const useTabProviderContext = (type: TabType, originalId?: string): undefined | TabState => {\n    const context = useContext(TabProviderContext);\n    if (!context) {\n        return undefined;\n    }\n    const [state, dispatch] = context;\n\n    // Current tab or tab panel id.\n    const id = useMemo(\n        () => originalId || `${type}-${uid()}`,\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n    useEffect(\n        () => {\n            // On mount: register tab or tab panel id.\n            dispatch({ type: 'register', payload: { type, id } });\n            return () => {\n                // On unmount: unregister tab or tab panel id.\n                dispatch({ type: 'unregister', payload: { type, id } });\n            };\n        },\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [],\n    );\n\n    // Find tab/tabPanel index using it's id.\n    const index = useMemo(() => state.ids[type].indexOf(id), [state.ids, type, id]);\n    const tabId = useMemo(() => state.ids.tab[index] || '', [state, index]);\n    const tabPanelId = useMemo(() => state.ids.tabPanel[index] || '', [state, index]);\n    const isActive = useMemo(() => state.activeTabIndex === index, [state, index]);\n    const changeToTab = useCallback(() => dispatch({ type: 'setActiveTabIndex', payload: index }), [dispatch, index]);\n    return {\n        isLazy: state.isLazy,\n        shouldActivateOnFocus: state.shouldActivateOnFocus,\n        tabId,\n        tabPanelId,\n        isActive,\n        changeToTab,\n    };\n};\n\nexport const useTabProviderContextState = (): State | undefined => {\n    const context = useContext(TabProviderContext);\n    return context?.[0];\n};\n","import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n    parentRef: RefObject<HTMLElement>;\n    elementSelector: string;\n    keepTabIndex?: boolean;\n    /** List of values to be used as extra dependencies of the useEffect */\n    extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n    parentRef,\n    elementSelector,\n    keepTabIndex,\n    extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n    useEffect(\n        () => {\n            const parent = parentRef?.current;\n            if (!parent) {\n                return undefined;\n            }\n\n            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n                let newTabFocus = index;\n                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n                    return;\n                }\n\n                if (evt.key === 'ArrowRight') {\n                    // Move right\n                    newTabFocus += 1;\n                    // If we're at the end, go to the start\n                    if (newTabFocus >= elements.length) {\n                        newTabFocus = 0;\n                    }\n                } else if (evt.key === 'ArrowLeft') {\n                    // Move left\n                    newTabFocus -= 1;\n                    if (newTabFocus < 0) {\n                        // If we're at the start, move to the end\n                        newTabFocus = elements.length - 1;\n                    }\n                }\n                const newElement = elements[newTabFocus];\n                newElement?.focus();\n                if (keepTabIndex) {\n                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n                    newElement?.setAttribute('tabindex', '0');\n                }\n            };\n\n            if (elements?.length > 0) {\n                elements.forEach((el, key) => {\n                    // if no element has tabindex set to 0, set the first element as focusable\n                    if (!initialFocusableElement && key === 0) {\n                        el.setAttribute('tabindex', '0');\n                        // set all other to -1\n                    } else if (initialFocusableElement !== el) {\n                        el.setAttribute('tabindex', '-1');\n                    }\n                    // add event listener\n                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n                });\n            }\n\n            // Cleanup listeners\n            return () => {\n                if (elements?.length > 0) {\n                    elements.forEach((el, key) => {\n                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n                    });\n                }\n            };\n        }, // eslint-disable-next-line react-hooks/exhaustive-deps\n        [parentRef, ...extraDependencies],\n    );\n};\n"],"names":["INIT_STATE","isLazy","shouldActivateOnFocus","activeTabIndex","ids","tab","tabPanel","reducer","state","action","type","payload","id","index","indexOf","tabIds","splice","tabPanelIds","TabProviderContext","createContext","useTabProviderContext","originalId","context","useContext","undefined","dispatch","useMemo","uid","useEffect","tabId","tabPanelId","isActive","changeToTab","useCallback","useTabProviderContextState","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","parent","current","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":"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"}
+{"version":3,"file":"useRovingTabIndex.js","sources":["../../../src/hooks/useRovingTabIndex.tsx"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\ninterface UseRovingTabIndexOptions {\n    parentRef: RefObject<HTMLElement>;\n    elementSelector: string;\n    keepTabIndex?: boolean;\n    /** Action to trigger when an element is focused using roving tab index */\n    onElementFocus?: (element: HTMLElement) => void;\n    /** List of values to be used as extra dependencies of the useEffect */\n    extraDependencies?: any[];\n}\n\nexport const useRovingTabIndex = ({\n    parentRef,\n    elementSelector,\n    keepTabIndex,\n    onElementFocus,\n    extraDependencies = [],\n}: UseRovingTabIndexOptions): void => {\n    useEffect(\n        () => {\n            const parent = parentRef?.current;\n            if (!parent) {\n                return undefined;\n            }\n\n            const elements = parent.querySelectorAll(elementSelector) as NodeListOf<HTMLElement>;\n            const initialFocusableElement = parent?.querySelector(`${elementSelector}[tabindex=\"0\"]`);\n\n            const handleKeyDown = (index: number) => (evt: KeyboardEvent) => {\n                let newTabFocus = index;\n                if (!(evt.key === 'ArrowRight' || evt.key === 'ArrowLeft')) {\n                    return;\n                }\n\n                if (evt.key === 'ArrowRight') {\n                    // Move right\n                    newTabFocus += 1;\n                    // If we're at the end, go to the start\n                    if (newTabFocus >= elements.length) {\n                        newTabFocus = 0;\n                    }\n                } else if (evt.key === 'ArrowLeft') {\n                    // Move left\n                    newTabFocus -= 1;\n                    if (newTabFocus < 0) {\n                        // If we're at the start, move to the end\n                        newTabFocus = elements.length - 1;\n                    }\n                }\n                const newElement = elements[newTabFocus];\n                newElement?.focus();\n\n                // When an element is focused using roving tab index, trigger the onElementFocus callback\n                if (newElement && onElementFocus) {\n                    onElementFocus(newElement);\n                }\n\n                if (keepTabIndex) {\n                    (evt.currentTarget as HTMLElement).setAttribute('tabindex', '-1');\n                    newElement?.setAttribute('tabindex', '0');\n                }\n            };\n\n            if (elements?.length > 0) {\n                elements.forEach((el, key) => {\n                    // if no element has tabindex set to 0, set the first element as focusable\n                    if (!initialFocusableElement && key === 0) {\n                        el.setAttribute('tabindex', '0');\n                        // set all other to -1\n                    } else if (initialFocusableElement !== el) {\n                        el.setAttribute('tabindex', '-1');\n                    }\n                    // add event listener\n                    el.addEventListener('keydown', handleKeyDown(key) as EventListener);\n                });\n            }\n\n            // Cleanup listeners\n            return () => {\n                if (elements?.length > 0) {\n                    elements.forEach((el, key) => {\n                        el.removeEventListener('keydown', handleKeyDown(key) as EventListener);\n                    });\n                }\n            };\n        }, // eslint-disable-next-line react-hooks/exhaustive-deps\n        [parentRef, ...extraDependencies],\n    );\n};\n"],"names":["useRovingTabIndex","parentRef","elementSelector","keepTabIndex","onElementFocus","extraDependencies","useEffect","parent","current","undefined","elements","querySelectorAll","initialFocusableElement","querySelector","handleKeyDown","index","evt","newTabFocus","key","length","newElement","focus","currentTarget","setAttribute","forEach","el","addEventListener","removeEventListener"],"mappings":"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"}

package/esm/index.js

@@ -53,6 +53,8 @@ export { F as Flag } from './_internal/Flag2.js';
 import 'lodash/castArray';
 export { F as FlexBox } from './_internal/FlexBox.js';
 export { G as GenericBlock } from './_internal/GenericBlock.js';
+export { T as Text } from './_internal/Text2.js';
+export { H as Heading, a as HeadingLevelProvider, u as useHeadingLevel } from './_internal/HeadingLevelProvider.js';
 export { G as Grid, a as GridItem } from './_internal/GridItem.js';
 import 'lodash/isObject';
 export { a as ImageBlock, I as ImageBlockCaptionPosition } from './_internal/ImageBlock.js';
@@ -68,8 +70,9 @@ export { M as Mosaic } from './_internal/Mosaic2.js';
 export { N as Notification } from './_internal/Notification2.js';
 export { P as PostBlock } from './_internal/PostBlock.js';
 export { a as Progress, P as ProgressVariant } from './_internal/Progress2.js';
-import './_internal/useRovingTabIndex.js';
+import './_internal/state.js';
 export { a as ProgressTracker, P as ProgressTrackerProvider, b as ProgressTrackerStep, c as ProgressTrackerStepPanel } from './_internal/ProgressTrackerStepPanel.js';
+import './_internal/useRovingTabIndex.js';
 export { R as RadioButton, a as RadioGroup } from './_internal/RadioGroup.js';
 export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './_internal/SelectMultiple.js';
 export { S as SideNavigation, a as SideNavigationItem } from './_internal/SideNavigationItem.js';
@@ -77,6 +80,7 @@ export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVari
 export { S as Slider, c as clamp } from './_internal/Slider2.js';
 export { c as Slides, S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './_internal/Slides.js';
 import 'lodash/uniqueId';
+import 'lodash/chunk';
 export { S as Switch } from './_internal/Switch2.js';
 export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './_internal/TableRow.js';
 export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './_internal/TabPanel.js';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.1",
-        "@lumx/icons": "^3.0.1",
+        "@lumx/core": "^3.0.2",
+        "@lumx/icons": "^3.0.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -61,7 +61,6 @@
         "jest-watch-master": "^1.0.0",
         "jest-watch-suspend": "^1.1.2",
         "jest-watch-typeahead": "^0.6.0",
-        "postcss-flexbox-unboxer": "^1.0.0",
         "rollup": "2.26.10",
         "rollup-plugin-analyzer": "^3.3.0",
         "rollup-plugin-babel": "^4.4.0",
@@ -120,6 +119,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.0.1",
-    "gitHead": "cd913d1c468a87d794b68b25505975ac992e940c"
+    "version": "3.0.2",
+    "gitHead": "f66d1996ea46e90a4dc135ee8f47ef012b95171c"
 }

package/src/components/flex-box/FlexBox.stories.tsx

@@ -19,8 +19,32 @@ const flexViewKnobConfigs: Array<
     ['noShrink', boolean],
     ['wrap', boolean],
     ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
-    ['hAlign', select, [DEFAULT_PROPS.hAlign, Alignment.center, Alignment.top, Alignment.bottom]],
-    ['vAlign', select, [DEFAULT_PROPS.vAlign, Alignment.center, Alignment.right, Alignment.left]],
+    [
+        'hAlign',
+        select,
+        [
+            DEFAULT_PROPS.hAlign,
+            Alignment.center,
+            Alignment.top,
+            Alignment.bottom,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
+    ],
+    [
+        'vAlign',
+        select,
+        [
+            DEFAULT_PROPS.vAlign,
+            Alignment.center,
+            Alignment.right,
+            Alignment.left,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
+    ],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
     [
         'marginAuto',
@@ -69,13 +93,27 @@ export const Flex = () => (
 const hAlign = (prefix?: string) =>
     select(
         `${prefix ? `${prefix}: ` : ''}Horizontal align`,
-        [Alignment.center, Alignment.top, Alignment.bottom],
+        [
+            Alignment.center,
+            Alignment.top,
+            Alignment.bottom,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
         Alignment.center,
     );
 const vAlign = (prefix?: string) =>
     select(
         `${prefix ? `${prefix}: ` : ''}Vertical align`,
-        [Alignment.center, Alignment.left, Alignment.right],
+        [
+            Alignment.center,
+            Alignment.left,
+            Alignment.right,
+            Alignment.spaceAround,
+            Alignment.spaceBetween,
+            Alignment.spaceEvenly,
+        ],
         Alignment.center,
     );
 
@@ -179,3 +217,21 @@ export const Align = () => (
         <FlexBox style={{ height: 'fit-content' }}>Some text</FlexBox>
     </FlexBox>
 );
+
+export const Distribution = () => (
+    <FlexBox
+        style={{
+            width: `${number('width (px)', 720)}px`,
+            height: `${number('height (px)', 300)}px`,
+            border: '1px solid red',
+        }}
+        orientation={orientation()}
+        gap={gapSize()}
+        vAlign={vAlign()}
+        hAlign={hAlign()}
+    >
+        <Button>Button 1</Button>
+        <Button>Button 2</Button>
+        <Button>Button 3</Button>
+    </FlexBox>
+);

package/src/components/flex-box/FlexBox.tsx

@@ -1,12 +1,15 @@
-import { Alignment, HorizontalAlignment, Orientation, VerticalAlignment } from '@lumx/react';
+import { Alignment, Orientation } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import classNames from 'classnames';
 import castArray from 'lodash/castArray';
 import React, { forwardRef, ReactNode } from 'react';
-import { Size } from '..';
+import { HorizontalAlignment, Size, VerticalAlignment } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
 export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
+type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
+export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
+export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
 
 /**
  * Defines the props of the component.
@@ -19,7 +22,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. */
@@ -27,7 +30,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;
 }

package/src/components/flex-box/__snapshots__/FlexBox.test.tsx.snap

@@ -40,6 +40,41 @@ Array [
 ]
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'Distribution' 1`] = `
+<div
+  className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-center lumx-flex-box--h-align-center lumx-flex-box--gap-regular"
+  style={
+    Object {
+      "border": "1px solid red",
+      "height": "300px",
+      "width": "720px",
+    }
+  }
+>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 1
+  </Button>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 2
+  </Button>
+  <Button
+    emphasis="high"
+    size="m"
+    theme="light"
+  >
+    Button 3
+  </Button>
+</div>
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'Flex' 1`] = `
 Array [
   <div