@lumx/react 2.2.15 → 2.2.18-alpha-hooks.1

package/esm/_internal/user-block.js

@@ -1,16 +1,16 @@
-import './_rollupPluginBabelHelpers.js';
+import './_rolluppluginbabelhelpers.53.js';
 import './components.js';
 import 'react';
-import './getRootClassName.js';
-import './Icon2.js';
+import './getrootclassname.54.js';
+import './icon.21.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './mergeRefs.js';
-import './Avatar2.js';
-import './renderLink.js';
-import './Link2.js';
-import './Thumbnail2.js';
-export { U as UserBlock } from './UserBlock.js';
+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';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/{UserBlock.js → userblock.52.js}

@@ -1,10 +1,10 @@
-import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rolluppluginbabelhelpers.53.js';
 import { Size, Orientation, Theme, ColorPalette } from './components.js';
 import React, { forwardRef } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
+import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getrootclassname.54.js';
 import isEmpty from 'lodash/isEmpty';
-import { A as Avatar } from './Avatar2.js';
-import { L as Link } from './Link2.js';
+import { A as Avatar } from './avatar.3.js';
+import { L as Link } from './link.26.js';
 
 /**
  * Component display name.
@@ -122,4 +122,4 @@ UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
 export { UserBlock as U };
-//# sourceMappingURL=UserBlock.js.map
+//# sourceMappingURL=userblock.52.js.map

package/esm/_internal/userblock.52.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"userblock.52.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\nimport isEmpty from 'lodash/isEmpty';\nimport classNames from 'classnames';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** User name. */\n    name?: string;\n    /** Props to pass to the name block. */\n    nameProps?: GenericProps;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        linkProps,\n        linkAs,\n        multipleActions,\n        name,\n        nameProps,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        let NameComponent: any = 'span';\n        const nProps: any = {\n            ...nameProps,\n            className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n        };\n        if (isClickable) {\n            NameComponent = Link;\n            Object.assign(nProps, {\n                ...linkProps,\n                onClick,\n                linkAs,\n                color: ColorPalette.dark,\n            });\n        }\n        return <NameComponent {...nProps}>{name}</NameComponent>;\n    }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((field: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {field}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkAs={linkAs}\n                    linkProps={linkProps}\n                    {...avatarProps}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","fieldsBlock","s","map","field","idx","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/{useRovingTabIndex.js → userovingtabindex.66.js}

@@ -1,6 +1,6 @@
-import { e as _toConsumableArray, _ as _objectSpread2, a as _defineProperty, d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
+import { e as _toConsumableArray, _ as _objectSpread2, a as _defineProperty, d as _slicedToArray } from './_rolluppluginbabelhelpers.53.js';
 import { createContext, useContext, useMemo, useEffect, useCallback } from 'react';
-import { u as uid } from '../index2.js';
+import { u as uid } from './index.55.js';
 
 var INIT_STATE = {
   isLazy: true,
@@ -219,4 +219,4 @@ var useRovingTabIndex = function useRovingTabIndex(_ref) {
 };
 
 export { INIT_STATE as I, TabProviderContext as T, useTabProviderContextState as a, useTabProviderContext as b, reducer as r, useRovingTabIndex as u };
-//# sourceMappingURL=useRovingTabIndex.js.map
+//# sourceMappingURL=userovingtabindex.66.js.map

package/esm/_internal/userovingtabindex.66.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"userovingtabindex.66.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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"}

package/hooks/useFocusWithin.d.ts

@@ -0,0 +1,16 @@
+interface UseFocusWithinOptions {
+    /** element to add the focus within to */
+    element: HTMLElement | null;
+    /** callback to be executed on focus in */
+    onFocusIn: (ev: FocusEvent) => void;
+    /** callback to be executed on focus out */
+    onFocusOut: (ev: FocusEvent) => void;
+}
+/**
+ * Hook that allows to control when there is a focus event within a given element, meaning
+ * that any element within the given target will trigger the focus in and focus out events.
+ * @param options - UseFocusWithinOptions
+ */
+declare const useFocusWithin: ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => void;
+
+export { UseFocusWithinOptions, useFocusWithin };

package/hooks/useFocusWithin.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook that allows to control when there is a focus event within a given element, meaning
+ * that any element within the given target will trigger the focus in and focus out events.
+ * @param options - UseFocusWithinOptions
+ */
+var useFocusWithin = function useFocusWithin(_ref) {
+  var element = _ref.element,
+      onFocusIn = _ref.onFocusIn,
+      onFocusOut = _ref.onFocusOut;
+  useEffect(function () {
+    if (element) {
+      element.addEventListener('focusin', onFocusIn);
+      element.addEventListener('focusout', onFocusOut);
+    }
+
+    return function () {
+      if (element) {
+        element.removeEventListener('focusin', onFocusIn);
+        element.removeEventListener('focusout', onFocusOut);
+      }
+    };
+  }, [onFocusIn, element, onFocusOut]);
+};
+
+export { useFocusWithin };
+//# sourceMappingURL=useFocusWithin.js.map

package/hooks/useFocusWithin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusWithin.js","sources":["../../src/hooks/useFocusWithin.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nexport interface UseFocusWithinOptions {\n    /** element to add the focus within to */\n    element: HTMLElement | null;\n    /** callback to be executed on focus in */\n    onFocusIn: (ev: FocusEvent) => void;\n    /** callback to be executed on focus out */\n    onFocusOut: (ev: FocusEvent) => void;\n}\n\n/**\n * Hook that allows to control when there is a focus event within a given element, meaning\n * that any element within the given target will trigger the focus in and focus out events.\n * @param options - UseFocusWithinOptions\n */\nexport const useFocusWithin = ({ element, onFocusIn, onFocusOut }: UseFocusWithinOptions) => {\n    useEffect(() => {\n        if (element) {\n            element.addEventListener('focusin', onFocusIn);\n\n            element.addEventListener('focusout', onFocusOut);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener('focusin', onFocusIn);\n\n                element.removeEventListener('focusout', onFocusOut);\n            }\n        };\n    }, [onFocusIn, element, onFocusOut]);\n};\n"],"names":["useFocusWithin","element","onFocusIn","onFocusOut","useEffect","addEventListener","removeEventListener"],"mappings":";;AAWA;;;;;IAKaA,cAAc,GAAG,SAAjBA,cAAiB,OAA+D;AAAA,MAA5DC,OAA4D,QAA5DA,OAA4D;AAAA,MAAnDC,SAAmD,QAAnDA,SAAmD;AAAA,MAAxCC,UAAwC,QAAxCA,UAAwC;AACzFC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIH,OAAJ,EAAa;AACTA,MAAAA,OAAO,CAACI,gBAAR,CAAyB,SAAzB,EAAoCH,SAApC;AAEAD,MAAAA,OAAO,CAACI,gBAAR,CAAyB,UAAzB,EAAqCF,UAArC;AACH;;AAED,WAAO,YAAM;AACT,UAAIF,OAAJ,EAAa;AACTA,QAAAA,OAAO,CAACK,mBAAR,CAA4B,SAA5B,EAAuCJ,SAAvC;AAEAD,QAAAA,OAAO,CAACK,mBAAR,CAA4B,UAA5B,EAAwCH,UAAxC;AACH;AACJ,KAND;AAOH,GAdQ,EAcN,CAACD,SAAD,EAAYD,OAAZ,EAAqBE,UAArB,CAdM,CAAT;AAeH;;;;"}

package/{types.d.ts → index.d.ts}

@@ -1,4 +1,4 @@
-// Generated by dts-bundle-generator v5.6.0
+// Generated by dts-bundle-generator v5.9.0
 
 /// <reference types="react" />
 
@@ -95,6 +95,7 @@ export declare const Size: {
 	readonly xxl: "xxl";
 	readonly tiny: "tiny";
 	readonly regular: "regular";
+	readonly medium: "medium";
 	readonly big: "big";
 	readonly huge: "huge";
 };
@@ -670,7 +671,7 @@ export interface ChipGroupProps extends GenericProps {
 	children: ReactNode;
 }
 export declare const ChipGroup: Comp<ChipGroupProps, HTMLDivElement> & {
-	useChipGroupNavigation: import("../../hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
+	useChipGroupNavigation: import("@lumx/react/hooks/useChipGroupNavigation").useChipGroupNavigationType<any>;
 };
 /**
  * Comment block variants.
@@ -1091,7 +1092,7 @@ export interface FlagProps extends GenericProps {
  */
 export declare const Flag: Comp<FlagProps, HTMLDivElement>;
 export declare type MarginAutoAlignment = Extract<Alignment, "top" | "bottom" | "right" | "left">;
-export declare type GapSize = Extract<Size, "regular" | "big" | "huge">;
+export declare type GapSize = Extract<Size, "regular" | "medium" | "big" | "huge">;
 /**
  * Defines the props of the component.
  */
@@ -1494,7 +1495,7 @@ export interface ListProps extends GenericProps {
 	onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
 }
 export declare const List: Comp<ListProps, HTMLUListElement> & {
-	useKeyboardListNavigation: import("../../hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
+	useKeyboardListNavigation: import("@lumx/react/hooks/useKeyboardListNavigation").useKeyboardListNavigationType;
 };
 export declare type ListItemSize = Extract<Size, "tiny" | "regular" | "big" | "huge">;
 /**
@@ -2219,8 +2220,8 @@ export interface SlideshowControlsProps extends GenericProps {
 	playButtonProps?: Pick<IconButtonProps, "label"> & Omit<IconButtonProps, "label" | "onClick" | "icon" | "emphasis" | "color">;
 }
 export declare const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> & {
-	useSlideshowControls: ({ activeIndex, groupBy, interval, autoPlay, defaultActiveIndex, onChange, itemsCount, id, slidesId, }: import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions) => import("../../hooks/useSlideshowControls").UseSlideshowControls;
-	useSlideshowControlsDefaultOptions: Partial<import("../../hooks/useSlideshowControls").UseSlideshowControlsOptions>;
+	useSlideshowControls: ({ activeIndex, groupBy, interval, autoPlay, defaultActiveIndex, onChange, itemsCount, id, slidesId, }: import("@lumx/react/hooks/useSlideshowControls").UseSlideshowControlsOptions) => import("@lumx/react/hooks/useSlideshowControls").UseSlideshowControls;
+	useSlideshowControlsDefaultOptions: Partial<import("@lumx/react/hooks/useSlideshowControls").UseSlideshowControlsOptions>;
 };
 export interface SlidesProps extends GenericProps {
 	/** current slide active */
@@ -2546,7 +2547,6 @@ export interface TextFieldProps extends GenericProps {
  * @return React element.
  */
 export declare const TextField: Comp<TextFieldProps, HTMLDivElement>;
-export declare const useFocusPointStyle: ({ image, aspectRatio, focusPoint, imgProps: { width, height } }: ThumbnailProps, element: HTMLImageElement | undefined, isLoaded: boolean) => CSSProperties;
 /**
  * Defines the props of the component.
  */

package/index.js

@@ -0,0 +1,90 @@
+import './esm/_internal/_rolluppluginbabelhelpers.53.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './esm/_internal/components.js';
+import 'react';
+import './esm/_internal/getrootclassname.54.js';
+export { I as Icon } from './esm/_internal/icon.21.js';
+import './esm/_internal/index.55.js';
+import 'lodash/isBoolean';
+import 'lodash/isEmpty';
+import 'lodash/kebabCase';
+import 'lodash/noop';
+import './esm/_internal/constants.59.js';
+import 'lodash/concat';
+import 'lodash/dropRight';
+import 'lodash/last';
+import 'lodash/partition';
+import 'lodash/reduce';
+import './esm/_internal/partitionmulti.62.js';
+import 'lodash/get';
+import './esm/_internal/type.64.js';
+export { A as AlertDialog } from './esm/_internal/alertdialog.1.js';
+export { P as Placement, a as Popover } from './esm/_internal/popover.33.js';
+import './esm/_internal/mergerefs.56.js';
+export { A as Autocomplete, a as AutocompleteMultiple } from './esm/_internal/autocompletemultiple.2.js';
+export { A as Avatar } from './esm/_internal/avatar.3.js';
+export { B as Badge } from './esm/_internal/badge.4.js';
+import './esm/_internal/renderlink.65.js';
+import './esm/_internal/buttonroot.57.js';
+export { a as Button, B as ButtonEmphasis } from './esm/_internal/button.5.js';
+export { I as IconButton } from './esm/_internal/iconbutton.6.js';
+export { B as ButtonGroup } from './esm/_internal/buttongroup.7.js';
+export { C as Checkbox } from './esm/_internal/checkbox.8.js';
+import 'lodash/isFunction';
+export { C as Chip } from './esm/_internal/chip.9.js';
+export { C as ChipGroup } from './esm/_internal/chipgroup.10.js';
+export { a as CommentBlock, C as CommentBlockVariant } from './esm/_internal/commentblock.11.js';
+import 'moment';
+export { D as DatePicker, a as DatePickerControlled, b as DatePickerField } from './esm/_internal/datepickerfield.12.js';
+import 'lodash/range';
+import 'moment-range';
+import './esm/_internal/usefocustrap.58.js';
+import 'react-dom';
+import './esm/_internal/clickawayprovider.60.js';
+export { D as Dialog } from './esm/_internal/dialog.13.js';
+import 'lodash/pull';
+import './esm/_internal/usedelayedvisibility.63.js';
+import './esm/_internal/usedisablebodyscroll.61.js';
+export { D as DEFAULT_PROPS, a as Divider } from './esm/_internal/divider.14.js';
+export { D as DragHandle } from './esm/_internal/draghandle.15.js';
+export { L as List, a as ListItem, i as isClickable } from './esm/_internal/list.28.js';
+import './hooks/useFocusWithin.js';
+export { D as Dropdown } from './esm/_internal/dropdown.16.js';
+export { E as ExpansionPanel } from './esm/_internal/expansionpanel.17.js';
+export { F as Flag } from './esm/_internal/flag.18.js';
+import 'lodash/castArray';
+export { F as FlexBox } from './esm/_internal/flexbox.19.js';
+export { G as Grid, a as GridItem } from './esm/_internal/griditem.20.js';
+import 'lodash/isObject';
+export { a as ImageBlock, I as ImageBlockCaptionPosition } from './esm/_internal/imageblock.22.js';
+export { I as InputHelper } from './esm/_internal/inputhelper.23.js';
+export { I as InputLabel } from './esm/_internal/inputlabel.24.js';
+export { L as Lightbox } from './esm/_internal/lightbox.25.js';
+export { L as Link } from './esm/_internal/link.26.js';
+export { L as LinkPreview } from './esm/_internal/linkpreview.27.js';
+export { L as ListDivider, a as ListSubheader } from './esm/_internal/listsubheader.29.js';
+export { M as Message } from './esm/_internal/message.30.js';
+import 'lodash/take';
+export { M as Mosaic } from './esm/_internal/mosaic.31.js';
+export { N as Notification } from './esm/_internal/notification.32.js';
+export { P as PostBlock } from './esm/_internal/postblock.34.js';
+export { a as Progress, P as ProgressVariant } from './esm/_internal/progress.35.js';
+import './esm/_internal/userovingtabindex.66.js';
+export { a as ProgressTracker, P as ProgressTrackerProvider, b as ProgressTrackerStep, c as ProgressTrackerStepPanel } from './esm/_internal/progresstrackersteppanel.36.js';
+export { R as RadioButton, a as RadioGroup } from './esm/_internal/radiogroup.37.js';
+export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './esm/_internal/selectmultiple.38.js';
+export { S as SideNavigation, a as SideNavigationItem } from './esm/_internal/sidenavigationitem.39.js';
+export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVariant, c as SkeletonTypography } from './esm/_internal/skeletontypography.40.js';
+export { S as Slider, c as clamp } from './esm/_internal/slider.41.js';
+export { c as Slides, S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './esm/_internal/slides.42.js';
+import 'lodash/uniqueId';
+export { S as Switch } from './esm/_internal/switch.43.js';
+export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './esm/_internal/tablerow.44.js';
+export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './esm/_internal/tabpanel.45.js';
+export { T as TextField } from './esm/_internal/textfield.46.js';
+export { T as Thumbnail } from './esm/_internal/thumbnail.47.js';
+export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './esm/_internal/types.48.js';
+export { T as Toolbar } from './esm/_internal/toolbar.49.js';
+export { T as Tooltip } from './esm/_internal/tooltip.50.js';
+export { a as Uploader, U as UploaderVariant } from './esm/_internal/uploader.51.js';
+export { U as UserBlock } from './esm/_internal/userblock.52.js';
+//# sourceMappingURL=index.js.map

package/{esm/index.js.map → 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": "^2.2.15",
-        "@lumx/icons": "^2.2.15",
+        "@lumx/core": "^2.2.18-alpha-hooks.1",
+        "@lumx/icons": "^2.2.18-alpha-hooks.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -67,6 +67,7 @@
         "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",
@@ -98,10 +99,12 @@
         "React"
     ],
     "license": "MIT",
-    "module": "esm/index.js",
-    "main": "esm/index.js",
-    "types": "types.d.ts",
+    "type": "module",
     "name": "@lumx/react",
+    "exports": {
+        ".": "./index.js",
+        "./hooks/*": "./hooks/*.js"
+    },
     "publishConfig": {
         "directory": "dist"
     },
@@ -111,7 +114,7 @@
     },
     "scripts": {
         "build": "rollup -c && yarn generate:types",
-        "generate:types": "dts-bundle-generator --no-check --external-types=react --external-imports=moment -o dist/types.d.ts src/index.ts",
+        "generate:types": "dts-bundle-generator --no-check --external-types=react --external-imports=moment -o dist/index.d.ts src/index.ts",
         "prepare": "install-peers || exit 0",
         "prepublishOnly": "yarn build",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
@@ -120,6 +123,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.15",
-    "gitHead": "985be86008a58fb87ebd36c5cee48b43268ebc10"
+    "version": "2.2.18-alpha-hooks.1",
+    "gitHead": "280df99a48535a25a827bbd48575cd8af836b3fa"
 }

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

@@ -333,7 +333,7 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                         label="Checkbox input"
                     />
 
-                    <FlexBox orientation="horizontal">
+                    <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
                         <DatePickerField
                             locale="fr"
                             label="Start date"
@@ -366,6 +366,8 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                                 ))}
                             </List>
                         </Select>
+
+                        <Button isDisabled>Disabled button (focus ignored)</Button>
                     </FlexBox>
 
                     {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}

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

@@ -152,6 +152,8 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
         theme="light"
       />
       <FlexBox
+        gap="regular"
+        hAlign="bottom"
         orientation="horizontal"
       >
         <DatePickerField
@@ -210,6 +212,14 @@ exports[`<Dialog> Snapshots and structure should render story DialogWithFocusabl
             </ListItem>
           </List>
         </Select>
+        <Button
+          emphasis="high"
+          isDisabled={true}
+          size="m"
+          theme="light"
+        >
+          Disabled button (focus ignored)
+        </Button>
       </FlexBox>
       <div
         tabIndex={0}

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

@@ -1,5 +1,5 @@
 import { mdiPencil } from '@lumx/icons';
-import { Alignment, Button, Icon, Orientation } from '@lumx/react';
+import { Alignment, Button, Icon, Orientation, Size } from '@lumx/react';
 import { boolean, number, select, text } from '@storybook/addon-knobs';
 import fromPairs from 'lodash/fromPairs';
 import React from 'react';
@@ -18,6 +18,7 @@ const flexViewKnobConfigs: Array<
     ['fillSpace', boolean],
     ['noShrink', boolean],
     ['wrap', boolean],
+    ['gap', select, [DEFAULT_PROPS.gap, 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]],
     ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
@@ -52,7 +53,7 @@ const setupFlexBoxKnobs = (group: string, knobs: FlexBoxPropName[] = []) =>
 const flexChildKnobs: FlexBoxPropName[] = ['fillSpace', 'noShrink', 'marginAuto'];
 
 export const Flex = () => (
-    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap'])}>
+    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap', 'gap'])}>
         <FlexBox {...setupFlexBoxKnobs('start', flexChildKnobs)}>
             <Icon icon={mdiPencil} />
         </FlexBox>
@@ -78,6 +79,16 @@ const vAlign = (prefix?: string) =>
         Alignment.center,
     );
 
+const orientation = (prefix?: string) =>
+    select(
+        `${prefix ? `${prefix}: ` : ''}Set orientation`,
+        [Orientation.vertical, Orientation.horizontal],
+        Orientation.vertical,
+    );
+
+const gapSize = (prefix?: string) =>
+    select(`${prefix ? `${prefix}: ` : ''}Gap size`, [Size.regular, Size.medium, Size.big, Size.huge], Size.regular);
+
 export const HorizontalFlex = () => (
     <FlexBox
         orientation={Orientation.horizontal}
@@ -122,6 +133,21 @@ export const VerticalFlex = () => (
     </FlexBox>
 );
 
+export const GapSizeFlex = () => (
+    <FlexBox orientation={orientation()} gap={gapSize()}>
+        <Button>Item 1</Button>
+        <FlexBox vAlign={Alignment.left}>
+            <Button>Item 2</Button>
+        </FlexBox>
+        <FlexBox>
+            <Button>Item 3</Button>
+        </FlexBox>
+        <FlexBox vAlign={Alignment.right}>
+            <Button>Item 4</Button>
+        </FlexBox>
+    </FlexBox>
+);
+
 export const WrapFlex = () => (
     <FlexBox
         orientation={Orientation.horizontal}

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

@@ -6,7 +6,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { Size } from '..';
 
 export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'regular' | 'big' | 'huge'>;
+export type GapSize = Extract<Size, 'regular' | 'medium' | 'big' | 'huge'>;
 
 /**
  * Defines the props of the component.

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

@@ -89,6 +89,86 @@ Array [
 ]
 `;
 
+exports[`<FlexBox> Snapshots and structure should render story 'GapSizeFlex' 1`] = `
+Array [
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--gap-regular"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 1
+    </Button>
+    <FlexBox
+      vAlign="left"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 2
+      </Button>
+    </FlexBox>
+    <FlexBox>
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 3
+      </Button>
+    </FlexBox>
+    <FlexBox
+      vAlign="right"
+    >
+      <Button
+        emphasis="high"
+        size="m"
+        theme="light"
+      >
+        Item 4
+      </Button>
+    </FlexBox>
+  </div>,
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 2
+    </Button>
+  </div>,
+  <div
+    className="lumx-flex-box"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 3
+    </Button>
+  </div>,
+  <div
+    className="lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-right"
+  >
+    <Button
+      emphasis="high"
+      size="m"
+      theme="light"
+    >
+      Item 4
+    </Button>
+  </div>,
+]
+`;
+
 exports[`<FlexBox> Snapshots and structure should render story 'HorizontalFlex' 1`] = `
 Array [
   <div

package/src/components/index.ts

@@ -67,6 +67,7 @@ export const Size = {
     xxl: 'xxl',
     tiny: 'tiny',
     regular: 'regular',
+    medium: 'medium',
     big: 'big',
     huge: 'huge',
 } as const;

package/src/components/select/SelectMultiple.test.tsx

@@ -46,6 +46,8 @@ const setup = (props: SetupProps = {}, shallowRendering = true) => {
             (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.info,
         ),
         input: wrapper.find('#select-uid:not(SelectMultipleField)').first(),
+        chip: wrapper.find('Chip'),
+        inputWrapper: wrapper.find('.lumx-select__wrapper'),
         props,
         wrapper,
     };
@@ -188,6 +190,29 @@ describe(`<SelectMultiple>`, () => {
             expect(error).toExist();
             expect(helper).toExist();
         });
+
+        it('should have a data-id as prop', () => {
+            const { inputWrapper } = setup(
+                {
+                    'data-id': 'select',
+                },
+                false,
+            );
+
+            expect(inputWrapper.prop('data-id')).toEqual('select');
+        });
+
+        it('should have a data-id as prop with Chip variant', () => {
+            const { chip } = setup(
+                {
+                    'data-id': 'select',
+                    variant: SelectVariant.chip,
+                },
+                false,
+            );
+
+            expect(chip.prop('data-id')).toEqual('select');
+        });
     });
 
     // 3. Test events.