@lumx/react 2.2.18-alpha-hooks.1 → 2.2.20-alpha.xss.datatable

package/esm/_internal/useRovingTabIndex.js.map

@@ -0,0 +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":";;;;IAYaA,UAAiB,GAAG;AAC7BC,EAAAA,MAAM,EAAE,IADqB;AAE7BC,EAAAA,qBAAqB,EAAE,KAFM;AAG7BC,EAAAA,cAAc,EAAE,CAHa;AAI7BC,EAAAA,GAAG,EAAE;AAAEC,IAAAA,GAAG,EAAE,EAAP;AAAWC,IAAAA,QAAQ,EAAE;AAArB;AAJwB;IAapBC,OAAO,GAAG,SAAVA,OAAU,CAACC,KAAD,EAAeC,MAAf,EAAyC;AAC5D,UAAQA,MAAM,CAACC,IAAf;AACI,SAAK,QAAL;AACI,gCAAYF,KAAZ,MAAsBC,MAAM,CAACE,OAA7B;;AACJ,SAAK,mBAAL;AAA0B;AACtB,YAAIH,KAAK,CAACL,cAAN,KAAyBM,MAAM,CAACE,OAApC,EAA6C;AACzC,iBAAOH,KAAP;AACH,SAHqB;;;AAKtB,kCAAYA,KAAZ;AAAmBL,UAAAA,cAAc,EAAEM,MAAM,CAACE;AAA1C;AACH;;AACD,SAAK,UAAL;AAAiB;AAAA,8BACQF,MAAM,CAACE,OADf;AAAA,YACLD,IADK,mBACLA,IADK;AAAA,YACCE,EADD,mBACCA,EADD;;AAGb,kCAAYJ,KAAZ;AAAmBJ,UAAAA,GAAG,qBAAOI,KAAK,CAACJ,GAAb,sBAAmBM,IAAnB,+BAA8BF,KAAK,CAACJ,GAAN,CAAUM,IAAV,CAA9B,IAA+CE,EAA/C;AAAtB;AACH;;AACD,SAAK,YAAL;AAAmB;AAAA,+BACMH,MAAM,CAACE,OADb;AAAA,YACPD,KADO,oBACPA,IADO;AAAA,YACDE,GADC,oBACDA,EADC;;AAEf,YAAMC,KAAK,GAAGL,KAAK,CAACJ,GAAN,CAAUM,KAAV,EAAgBI,OAAhB,CAAwBF,GAAxB,CAAd;;AACA,YAAIC,KAAK,KAAK,CAAC,CAAf,EAAkB,OAAOL,KAAP,CAHH;;AAKf,YAAMO,MAAM,sBAAOP,KAAK,CAACJ,GAAN,CAAUC,GAAjB,CAAZ;;AACAU,QAAAA,MAAM,CAACC,MAAP,CAAcH,KAAd,EAAqB,CAArB;;AACA,YAAMI,WAAW,sBAAOT,KAAK,CAACJ,GAAN,CAAUE,QAAjB,CAAjB;;AACAW,QAAAA,WAAW,CAACD,MAAZ,CAAmBH,KAAnB,EAA0B,CAA1B;AACA,kCACOL,KADP;AAEIJ,UAAAA,GAAG,EAAE;AAAEC,YAAAA,GAAG,EAAEU,MAAP;AAAeT,YAAAA,QAAQ,EAAEW;AAAzB;AAFT;AAIH;;AACD;AACI,aAAOT,KAAP;AA9BR;AAgCH;IAEYU,kBAAkB,GAAGC,aAAa,CAAmC,IAAnC;;AAS/C;IACaC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACV,IAAD,EAAgBW,UAAhB,EAA8D;AAC/F,MAAMC,OAAO,GAAGC,UAAU,CAACL,kBAAD,CAA1B;;AACA,MAAI,CAACI,OAAL,EAAc;AACV,WAAOE,SAAP;AACH;;AAJ8F,gCAKrEF,OALqE;AAAA,MAKxFd,KALwF;AAAA,MAKjFiB,QALiF;;;AAQ/F,MAAMb,EAAE,GAAGc,OAAO,CACd;AAAA,WAAML,UAAU,cAAOX,IAAP,cAAeiB,GAAG,EAAlB,CAAhB;AAAA,GADc;AAGd,IAHc,CAAlB;AAKAC,EAAAA,SAAS,CACL,YAAM;AACF;AACAH,IAAAA,QAAQ,CAAC;AAAEf,MAAAA,IAAI,EAAE,UAAR;AAAoBC,MAAAA,OAAO,EAAE;AAAED,QAAAA,IAAI,EAAJA,IAAF;AAAQE,QAAAA,EAAE,EAAFA;AAAR;AAA7B,KAAD,CAAR;AACA,WAAO,YAAM;AACT;AACAa,MAAAA,QAAQ,CAAC;AAAEf,QAAAA,IAAI,EAAE,YAAR;AAAsBC,QAAAA,OAAO,EAAE;AAAED,UAAAA,IAAI,EAAJA,IAAF;AAAQE,UAAAA,EAAE,EAAFA;AAAR;AAA/B,OAAD,CAAR;AACH,KAHD;AAIH,GARI;AAUL,IAVK,CAAT,CAb+F;;AA2B/F,MAAMC,KAAK,GAAGa,OAAO,CAAC;AAAA,WAAMlB,KAAK,CAACJ,GAAN,CAAUM,IAAV,EAAgBI,OAAhB,CAAwBF,EAAxB,CAAN;AAAA,GAAD,EAAoC,CAACJ,KAAK,CAACJ,GAAP,EAAYM,IAAZ,EAAkBE,EAAlB,CAApC,CAArB;AACA,MAAMiB,KAAK,GAAGH,OAAO,CAAC;AAAA,WAAMlB,KAAK,CAACJ,GAAN,CAAUC,GAAV,CAAcQ,KAAd,KAAwB,EAA9B;AAAA,GAAD,EAAmC,CAACL,KAAD,EAAQK,KAAR,CAAnC,CAArB;AACA,MAAMiB,UAAU,GAAGJ,OAAO,CAAC;AAAA,WAAMlB,KAAK,CAACJ,GAAN,CAAUE,QAAV,CAAmBO,KAAnB,KAA6B,EAAnC;AAAA,GAAD,EAAwC,CAACL,KAAD,EAAQK,KAAR,CAAxC,CAA1B;AACA,MAAMkB,QAAQ,GAAGL,OAAO,CAAC;AAAA,WAAMlB,KAAK,CAACL,cAAN,KAAyBU,KAA/B;AAAA,GAAD,EAAuC,CAACL,KAAD,EAAQK,KAAR,CAAvC,CAAxB;AACA,MAAMmB,WAAW,GAAGC,WAAW,CAAC;AAAA,WAAMR,QAAQ,CAAC;AAAEf,MAAAA,IAAI,EAAE,mBAAR;AAA6BC,MAAAA,OAAO,EAAEE;AAAtC,KAAD,CAAd;AAAA,GAAD,EAAgE,CAACY,QAAD,EAAWZ,KAAX,CAAhE,CAA/B;AACA,SAAO;AACHZ,IAAAA,MAAM,EAAEO,KAAK,CAACP,MADX;AAEHC,IAAAA,qBAAqB,EAAEM,KAAK,CAACN,qBAF1B;AAGH2B,IAAAA,KAAK,EAALA,KAHG;AAIHC,IAAAA,UAAU,EAAVA,UAJG;AAKHC,IAAAA,QAAQ,EAARA,QALG;AAMHC,IAAAA,WAAW,EAAXA;AANG,GAAP;AAQH;IAEYE,0BAA0B,GAAG,SAA7BA,0BAA6B,GAAyB;AAC/D,MAAMZ,OAAO,GAAGC,UAAU,CAACL,kBAAD,CAA1B;AACA,SAAOI,OAAP,aAAOA,OAAP,uBAAOA,OAAO,CAAG,CAAH,CAAd;AACH;;ICzGYa,iBAAiB,GAAG,SAApBA,iBAAoB,OAKK;AAAA,MAJlCC,SAIkC,QAJlCA,SAIkC;AAAA,MAHlCC,eAGkC,QAHlCA,eAGkC;AAAA,MAFlCC,YAEkC,QAFlCA,YAEkC;AAAA,mCADlCC,iBACkC;AAAA,MADlCA,iBACkC,sCADd,EACc;AAClCX,EAAAA,SAAS,CACL,YAAM;AACF,QAAMY,MAAM,GAAGJ,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEK,OAA1B;;AACA,QAAI,CAACD,MAAL,EAAa;AACT,aAAOhB,SAAP;AACH;;AAED,QAAMkB,QAAQ,GAAGF,MAAM,CAACG,gBAAP,CAAwBN,eAAxB,CAAjB;AACA,QAAMO,uBAAuB,GAAGJ,MAAH,aAAGA,MAAH,uBAAGA,MAAM,CAAEK,aAAR,WAAyBR,eAAzB,sBAAhC;;AAEA,QAAMS,aAAa,GAAG,SAAhBA,aAAgB,CAACjC,KAAD;AAAA,aAAmB,UAACkC,GAAD,EAAwB;AAC7D,YAAIC,WAAW,GAAGnC,KAAlB;;AACA,YAAI,EAAEkC,GAAG,CAACE,GAAJ,KAAY,YAAZ,IAA4BF,GAAG,CAACE,GAAJ,KAAY,WAA1C,CAAJ,EAA4D;AACxD;AACH;;AAED,YAAIF,GAAG,CAACE,GAAJ,KAAY,YAAhB,EAA8B;AAC1B;AACAD,UAAAA,WAAW,IAAI,CAAf,CAF0B;;AAI1B,cAAIA,WAAW,IAAIN,QAAQ,CAACQ,MAA5B,EAAoC;AAChCF,YAAAA,WAAW,GAAG,CAAd;AACH;AACJ,SAPD,MAOO,IAAID,GAAG,CAACE,GAAJ,KAAY,WAAhB,EAA6B;AAChC;AACAD,UAAAA,WAAW,IAAI,CAAf;;AACA,cAAIA,WAAW,GAAG,CAAlB,EAAqB;AACjB;AACAA,YAAAA,WAAW,GAAGN,QAAQ,CAACQ,MAAT,GAAkB,CAAhC;AACH;AACJ;;AACD,YAAMC,UAAU,GAAGT,QAAQ,CAACM,WAAD,CAA3B;AACAG,QAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEC,KAAZ;;AACA,YAAId,YAAJ,EAAkB;AACbS,UAAAA,GAAG,CAACM,aAAL,CAAmCC,YAAnC,CAAgD,UAAhD,EAA4D,IAA5D;AACAH,UAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEG,YAAZ,CAAyB,UAAzB,EAAqC,GAArC;AACH;AACJ,OA3BqB;AAAA,KAAtB;;AA6BA,QAAI,CAAAZ,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEQ,MAAV,IAAmB,CAAvB,EAA0B;AACtBR,MAAAA,QAAQ,CAACa,OAAT,CAAiB,UAACC,EAAD,EAAKP,GAAL,EAAa;AAC1B;AACA,YAAI,CAACL,uBAAD,IAA4BK,GAAG,KAAK,CAAxC,EAA2C;AACvCO,UAAAA,EAAE,CAACF,YAAH,CAAgB,UAAhB,EAA4B,GAA5B,EADuC;AAG1C,SAHD,MAGO,IAAIV,uBAAuB,KAAKY,EAAhC,EAAoC;AACvCA,UAAAA,EAAE,CAACF,YAAH,CAAgB,UAAhB,EAA4B,IAA5B;AACH,SAPyB;;;AAS1BE,QAAAA,EAAE,CAACC,gBAAH,CAAoB,SAApB,EAA+BX,aAAa,CAACG,GAAD,CAA5C;AACH,OAVD;AAWH,KAlDC;;;AAqDF,WAAO,YAAM;AACT,UAAI,CAAAP,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEQ,MAAV,IAAmB,CAAvB,EAA0B;AACtBR,QAAAA,QAAQ,CAACa,OAAT,CAAiB,UAACC,EAAD,EAAKP,GAAL,EAAa;AAC1BO,UAAAA,EAAE,CAACE,mBAAH,CAAuB,SAAvB,EAAkCZ,aAAa,CAACG,GAAD,CAA/C;AACH,SAFD;AAGH;AACJ,KAND;AAOH,GA7DI;AAAA,GA8DJb,SA9DI,4BA8DUG,iBA9DV,GAAT;AAgEH;;;;"}

package/esm/_internal/user-block.js

@@ -1,16 +1,17 @@
-import './_rolluppluginbabelhelpers.53.js';
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
 import 'react';
-import './getrootclassname.54.js';
-import './icon.21.js';
+import './getRootClassName.js';
+import './Icon2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './mergerefs.56.js';
-import './avatar.3.js';
-import './renderlink.65.js';
-import './link.26.js';
-import './thumbnail.47.js';
-export { U as UserBlock } from './userblock.52.js';
+import './mergeRefs.js';
+import './Avatar2.js';
+import './renderLink.js';
+import './Link2.js';
+import './Thumbnail2.js';
+import 'lodash/set';
+export { U as UserBlock } from './UserBlock.js';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/user-block.js.map

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

package/esm/index.js

@@ -0,0 +1,90 @@
+import './_internal/_rollupPluginBabelHelpers.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
+import 'react';
+import './_internal/getRootClassName.js';
+export { I as Icon } from './_internal/Icon2.js';
+import './index2.js';
+import 'lodash/isBoolean';
+import 'lodash/isEmpty';
+import 'lodash/kebabCase';
+import 'lodash/noop';
+import './_internal/constants.js';
+import 'lodash/concat';
+import 'lodash/dropRight';
+import 'lodash/last';
+import 'lodash/partition';
+import 'lodash/reduce';
+import './_internal/partitionMulti.js';
+import 'lodash/get';
+import './_internal/type.js';
+export { A as AlertDialog } from './_internal/AlertDialog.js';
+export { P as Placement, a as Popover } from './_internal/Popover2.js';
+import './_internal/mergeRefs.js';
+export { A as Autocomplete, a as AutocompleteMultiple } from './_internal/AutocompleteMultiple.js';
+export { A as Avatar } from './_internal/Avatar2.js';
+export { B as Badge } from './_internal/Badge2.js';
+import './_internal/renderLink.js';
+import './_internal/ButtonRoot.js';
+export { a as Button, B as ButtonEmphasis } from './_internal/Button2.js';
+export { I as IconButton } from './_internal/IconButton.js';
+export { B as ButtonGroup } from './_internal/ButtonGroup.js';
+export { C as Checkbox } from './_internal/Checkbox2.js';
+import 'lodash/isFunction';
+export { C as Chip } from './_internal/Chip2.js';
+export { C as ChipGroup } from './_internal/ChipGroup.js';
+export { a as CommentBlock, C as CommentBlockVariant } from './_internal/CommentBlock.js';
+import 'moment';
+export { D as DatePicker, a as DatePickerControlled, b as DatePickerField } from './_internal/DatePickerField.js';
+import 'lodash/range';
+import 'moment-range';
+import './_internal/useFocusTrap.js';
+import 'react-dom';
+import './_internal/ClickAwayProvider.js';
+export { D as Dialog } from './_internal/Dialog2.js';
+import 'lodash/pull';
+import './_internal/useDelayedVisibility.js';
+import './_internal/useDisableBodyScroll.js';
+export { D as DEFAULT_PROPS, a as Divider } from './_internal/Divider2.js';
+export { D as DragHandle } from './_internal/DragHandle.js';
+export { L as List, a as ListItem, i as isClickable } from './_internal/List2.js';
+export { D as Dropdown } from './_internal/Dropdown2.js';
+export { E as ExpansionPanel } from './_internal/ExpansionPanel.js';
+export { F as Flag } from './_internal/Flag2.js';
+import 'lodash/castArray';
+export { F as FlexBox } from './_internal/FlexBox.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';
+export { I as InputHelper } from './_internal/InputHelper.js';
+export { I as InputLabel } from './_internal/InputLabel.js';
+export { L as Lightbox } from './_internal/Lightbox2.js';
+export { L as Link } from './_internal/Link2.js';
+export { L as LinkPreview } from './_internal/LinkPreview.js';
+export { L as ListDivider, a as ListSubheader } from './_internal/ListSubheader.js';
+export { M as Message } from './_internal/Message2.js';
+import 'lodash/take';
+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';
+export { a as ProgressTracker, P as ProgressTrackerProvider, b as ProgressTrackerStep, c as ProgressTrackerStepPanel } from './_internal/ProgressTrackerStepPanel.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';
+export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVariant, c as SkeletonTypography } from './_internal/SkeletonTypography.js';
+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';
+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';
+export { T as TextField } from './_internal/TextField.js';
+export { T as Thumbnail, u as useFocusPointStyle } from './_internal/Thumbnail2.js';
+export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './_internal/types.js';
+export { T as Toolbar } from './_internal/Toolbar2.js';
+export { T as Tooltip } from './_internal/Tooltip2.js';
+export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
+import 'lodash/set';
+export { U as UserBlock } from './_internal/UserBlock.js';
+//# sourceMappingURL=index.js.map

package/esm/{_internal/index.55.js → index2.js}

@@ -13,4 +13,4 @@ function uid(len) {
 }
 
 export { uid as u };
-//# sourceMappingURL=index.55.js.map
+//# sourceMappingURL=index2.js.map

package/esm/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":["../../../../node_modules/uid/dist/index.mjs"],"sourcesContent":["var IDX=256, HEX=[], SIZE=256, BUFFER;\nwhile (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);\n\nexport function uid(len) {\n\tvar i=0, tmp=(len || 11);\n\tif (!BUFFER || ((IDX + tmp) > SIZE*2)) {\n\t\tfor (BUFFER='',IDX=0; i < SIZE; i++) {\n\t\t\tBUFFER += HEX[Math.random() * 256 | 0];\n\t\t}\n\t}\n\n\treturn BUFFER.substring(IDX, IDX++ + tmp);\n}\n"],"names":[],"mappings":"AAAA,IAAI,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC;AACtC,OAAO,GAAG,EAAE,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAC/D;AACO,SAAS,GAAG,CAAC,GAAG,EAAE;AACzB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;AAC1B,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE;AACxC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;AACvC,GAAG,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE;AACF;AACA,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC;AAC3C;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.18-alpha-hooks.1",
-        "@lumx/icons": "^2.2.18-alpha-hooks.1",
+        "@lumx/core": "^2.2.20-alpha.xss.datatable",
+        "@lumx/icons": "^2.2.20-alpha.xss.datatable",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -67,13 +67,12 @@
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-cleaner": "^1.0.0",
         "rollup-plugin-copy": "^3.3.0",
-        "rollup-plugin-dts": "^4.1.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
         "test-data-bot": "^0.8.0",
         "ts-jest": "^26.2.0",
-        "tsconfig-paths-webpack-plugin": "^3.2.0",
+        "tsconfig-paths-webpack-plugin": "^3.3.0",
         "typescript": "^4.1.2",
         "yargs": "^15.4.1",
         "yarn": "^1.19.1"
@@ -99,12 +98,10 @@
         "React"
     ],
     "license": "MIT",
-    "type": "module",
+    "module": "esm/index.js",
+    "main": "esm/index.js",
+    "types": "types.d.ts",
     "name": "@lumx/react",
-    "exports": {
-        ".": "./index.js",
-        "./hooks/*": "./hooks/*.js"
-    },
     "publishConfig": {
         "directory": "dist"
     },
@@ -114,7 +111,7 @@
     },
     "scripts": {
         "build": "rollup -c && yarn generate:types",
-        "generate:types": "dts-bundle-generator --no-check --external-types=react --external-imports=moment -o dist/index.d.ts src/index.ts",
+        "generate:types": "dts-bundle-generator --no-check --external-types=react --external-imports=moment -o dist/types.d.ts src/index.ts",
         "prepare": "install-peers || exit 0",
         "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
@@ -123,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.18-alpha-hooks.1",
-    "gitHead": "280df99a48535a25a827bbd48575cd8af836b3fa"
+    "version": "2.2.20-alpha.xss.datatable",
+    "gitHead": "f3e5a90ee87b5f78417bff7015fa43852205a69d"
 }

package/src/components/button/Button.stories.tsx

@@ -13,6 +13,7 @@ const DEFAULT_PROPS = Button.defaultProps as any;
 export const SimpleButton = ({ theme }: any) => {
     return (
         <Button
+            aria-pressed={boolean('isSelected', Boolean(DEFAULT_PROPS.isSelected))}
             emphasis={emphasis('Emphasis', DEFAULT_PROPS.emphasis)}
             theme={theme}
             rightIcon={select('Right icon', { none: undefined, mdiSend }, undefined)}

package/src/components/button/ButtonRoot.tsx

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';
+import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';
 
 import isEmpty from 'lodash/isEmpty';
 
@@ -16,9 +16,9 @@ type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>
  */
 export 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. */

package/src/components/checkbox/Checkbox.tsx

@@ -112,6 +112,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     value={value}
                     checked={isChecked}
                     onChange={handleChange}
+                    aria-describedby={helper ? `${inputId}-helper` : undefined}
                     {...inputProps}
                 />
 
@@ -131,7 +132,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     </InputLabel>
                 )}
                 {helper && (
-                    <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
+                    <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>
                         {helper}
                     </InputHelper>
                 )}

package/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`<Checkbox> Props should use the given props 1`] = `
     className="lumx-checkbox__input-wrapper"
   >
     <input
+      aria-describedby="fixedId-helper"
       className="lumx-checkbox__input-native"
       id="fixedId"
       onChange={[Function]}
@@ -41,6 +42,7 @@ exports[`<Checkbox> Props should use the given props 1`] = `
     </InputLabel>
     <InputHelper
       className="lumx-checkbox__helper"
+      id="fixedId-helper"
       kind="info"
       theme="light"
     >
@@ -58,6 +60,7 @@ exports[`<Checkbox> Props should use the given props while passing custom props
     className="lumx-checkbox__input-wrapper"
   >
     <input
+      aria-describedby="fixedId-helper"
       aria-labelledby="labelledby-id"
       className="lumx-checkbox__input-native"
       id="fixedId"
@@ -92,6 +95,7 @@ exports[`<Checkbox> Props should use the given props while passing custom props
     </InputLabel>
     <InputHelper
       className="lumx-checkbox__helper"
+      id="fixedId-helper"
       kind="info"
       theme="light"
     >

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

@@ -283,7 +283,8 @@ export const ScrollableDialogWithHeaderAndFooter = ({ theme }: any) => {
     );
 };
 
-export const DialogWithFocusableElements = ({ theme }: any) => {
+/** Test dialog focus trap (focus is contained inside the dialog) with all kinds of focusable and non-focusable items */
+export const DialogFocusTrap = ({ theme }: any) => {
     const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
     const [textValue, setTextValue] = useState('value');
     const [checkboxValue, setCheckboxValue] = useState(false);
@@ -372,6 +373,8 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
 
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
                     <div tabIndex={0}>Focus div</div>
+
+                    <Button isDisabled={false}>Button explicitly not disabled (should focus)</Button>
                 </div>
             </Dialog>
         </>

package/src/components/dialog/__snapshots__/Dialog.test.tsx.snap

@@ -1,82 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDialog 1`] = `
-<Fragment>
-  <Button
-    emphasis="high"
-    onClick={[Function]}
-    size="m"
-    theme="light"
-  >
-    Open dialog
-  </Button>
-  <Dialog
-    isOpen={true}
-    onClose={[Function]}
-    parentElement={
-      Object {
-        "current": undefined,
-      }
-    }
-    size="big"
-  >
-    <div
-      className="lumx-spacing-padding"
-    >
-      
-Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
-Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
-dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
-commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
-festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
-habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
-Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
-Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
-immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
-timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
-iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
-tertiam. Cras mattis iudicium purus sit amet fermentum
-    </div>
-    <footer>
-      <Toolbar
-        after={
-          <Button
-            emphasis="low"
-            onClick={[Function]}
-            size="m"
-            theme="light"
-          >
-            Close
-          </Button>
-        }
-      />
-    </footer>
-  </Dialog>
-  <AlertDialog
-    confirmProps={
-      Object {
-        "label": "Confirm",
-        "onClick": [Function],
-      }
-    }
-    isOpen={false}
-    kind="info"
-    onClose={[Function]}
-    parentElement={
-      Object {
-        "current": undefined,
-      }
-    }
-    size="tiny"
-    title="Default (info)"
-  >
-    Consequat deserunt officia aute laborum tempor anim sint est.
-  </AlertDialog>
-</Fragment>
-`;
-
-exports[`<Dialog> Snapshots and structure should render story DialogWithFocusableElements 1`] = `
+exports[`<Dialog> Snapshots and structure should render story DialogFocusTrap 1`] = `
 <Fragment>
   <Button
     emphasis="high"
@@ -226,11 +150,95 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
       >
         Focus div
       </div>
+      <Button
+        emphasis="high"
+        isDisabled={false}
+        size="m"
+        theme="light"
+      >
+        Button explicitly not disabled (should focus)
+      </Button>
     </div>
   </Dialog>
 </Fragment>
 `;
 
+exports[`<Dialog> Snapshots and structure should render story DialogWithAlertDialog 1`] = `
+<Fragment>
+  <Button
+    emphasis="high"
+    onClick={[Function]}
+    size="m"
+    theme="light"
+  >
+    Open dialog
+  </Button>
+  <Dialog
+    isOpen={true}
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="big"
+  >
+    <div
+      className="lumx-spacing-padding"
+    >
+      
+Nihil hic munitissimus habendi senatus locus, nihil horum? At nos hinc posthac, sitientis piros
+Afros. Magna pars studiorum, prodita quaerimus. Integer legentibus erat a ante historiarum
+dapibus. Praeterea iter est quasdam res quas ex communi. Ullamco laboris nisi ut aliquid ex ea
+commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
+festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
+habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
+Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
+Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
+immemorabili. Nec dubitamus multa iter quae et nos invenerat. Tu quoque, Brute, fili mi, nihil
+timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
+iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
+tertiam. Cras mattis iudicium purus sit amet fermentum
+    </div>
+    <footer>
+      <Toolbar
+        after={
+          <Button
+            emphasis="low"
+            onClick={[Function]}
+            size="m"
+            theme="light"
+          >
+            Close
+          </Button>
+        }
+      />
+    </footer>
+  </Dialog>
+  <AlertDialog
+    confirmProps={
+      Object {
+        "label": "Confirm",
+        "onClick": [Function],
+      }
+    }
+    isOpen={false}
+    kind="info"
+    onClose={[Function]}
+    parentElement={
+      Object {
+        "current": undefined,
+      }
+    }
+    size="tiny"
+    title="Default (info)"
+  >
+    Consequat deserunt officia aute laborum tempor anim sint est.
+  </AlertDialog>
+</Fragment>
+`;
+
 exports[`<Dialog> Snapshots and structure should render story DialogWithHeaderFooterAndDivider 1`] = `
 <Fragment>
   <Button

package/src/components/side-navigation/SideNavigation.stories.tsx

@@ -163,3 +163,29 @@ export const With3LevelsAndMultiActions = () => {
         </SideNavigation>
     );
 };
+
+/** Using closeMode="hide" keeps children in DOM on close */
+export const CloseModeHide = () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const toggleL1 = () => setIsOpen(!isOpen);
+
+    return (
+        <SideNavigation>
+            <SideNavigationItem
+                closeMode="hide"
+                label="Level 1"
+                emphasis={Emphasis.high}
+                isOpen={isOpen}
+                onClick={toggleL1}
+                toggleButtonProps={{ label: 'Toggle' }}
+            >
+                <SideNavigationItem
+                    closeMode="hide"
+                    label="Level 2"
+                    emphasis={Emphasis.medium}
+                    toggleButtonProps={{ label: 'Toggle' }}
+                />
+            </SideNavigationItem>
+        </SideNavigation>
+    );
+};

package/src/components/side-navigation/SideNavigationItem.test.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from 'react';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
+import without from 'lodash/without';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils';
@@ -51,13 +52,28 @@ describe(`<${SideNavigationItem.displayName}>`, () => {
             expect(root).toHaveClassName(CLASSNAME);
         });
 
-        it('should render correctly with splitted actions', () => {
+        it('should render correctly with split actions', () => {
             const { root, wrapper } = setup({ linkProps: { href: 'http://toto.com' }, onClick: () => null });
             expect(wrapper).toMatchSnapshot();
 
             expect(root).toExist();
             expect(root).toHaveClassName(CLASSNAME);
         });
+
+        it('should unmount children by default when closed', () => {
+            const { children } = setup({
+                children: <SideNavigationItem label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
+            });
+            expect(children).not.toExist();
+        });
+
+        it('should keep children in DOM when closed and with closeMode="hide"', () => {
+            const { children } = setup({
+                closeMode: 'hide',
+                children: <SideNavigationItem key="1" label="Child 1" toggleButtonProps={{ label: 'Toggle' }} />,
+            });
+            expect(children).toExist();
+        });
     });
 
     // 2. Test defaultProps value and important props custom values.
@@ -67,7 +83,8 @@ describe(`<${SideNavigationItem.displayName}>`, () => {
         it('should use default props', () => {
             const { root } = setup();
 
-            for (const prop of Object.keys(DEFAULT_PROPS)) {
+            const propNames = without(Object.keys(DEFAULT_PROPS), 'closeMode');
+            for (const prop of propNames) {
                 const className = getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] });
                 if (className) {
                     expect(root).toHaveClassName(className);

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -41,6 +41,11 @@ export interface SideNavigationItemProps extends GenericProps {
     /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
     toggleButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
     /** On action button click callback. */
     onActionClick?(evt: React.MouseEvent): void;
     /** On click callback. */
@@ -62,6 +67,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
     emphasis: Emphasis.high,
+    closeMode: 'unmount',
 };
 
 /**
@@ -85,12 +91,14 @@ export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> =
         onActionClick,
         onClick,
         toggleButtonProps,
+        closeMode = 'unmount',
         ...forwardedProps
     } = props;
 
     const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
     const hasContent = !isEmpty(content);
     const shouldSplitActions = Boolean(onActionClick);
+    const showChildren = hasContent && isOpen;
 
     return (
         <li
@@ -100,7 +108,7 @@ export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> =
                 className,
                 handleBasicClasses({
                     emphasis,
-                    isOpen,
+                    isOpen: showChildren,
                     isSelected,
                     prefix: CLASSNAME,
                 }),
@@ -151,7 +159,7 @@ export const SideNavigationItem: Comp<SideNavigationItemProps, HTMLLIElement> =
                 )
             )}
 
-            {hasContent && isOpen && <ul className={`${CLASSNAME}__children`}>{content}</ul>}
+            {(closeMode === 'hide' || showChildren) && <ul className={`${CLASSNAME}__children`}>{content}</ul>}
         </li>
     );
 });

package/src/components/side-navigation/__snapshots__/SideNavigationItem.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<SideNavigationItem> Snapshots and structure should render correctly 1`
 </li>
 `;
 
-exports[`<SideNavigationItem> Snapshots and structure should render correctly with splitted actions 1`] = `
+exports[`<SideNavigationItem> Snapshots and structure should render correctly with split actions 1`] = `
 <li
   className="lumx-side-navigation-item lumx-side-navigation-item--emphasis-high"
 >

package/src/components/thumbnail/index.ts

@@ -1,2 +1,3 @@
 export * from './Thumbnail';
 export * from './types';
+export { useFocusPointStyle } from '@lumx/react/components/thumbnail/useFocusPointStyle';