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

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":"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"}

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,91 @@
+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/ClickAwayProvider.js';
+import 'lodash/pull';
+import './_internal/useFocusTrap.js';
+import 'react-dom';
+export { D as Dialog } from './_internal/Dialog2.js';
+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 GenericBlock } from './_internal/GenericBlock.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/{index.js.map → 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/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-type.1",
+        "@lumx/icons": "^2.2.20-alpha-type.1",
         "@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-imports=react -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-type.1",
+    "gitHead": "ad74227be3187c488044780000f5f66007af2132"
 }

package/src/components/autocomplete/Autocomplete.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useRef } from 'react';
+import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Dropdown, IconButtonProps, Offset, Placement, TextField, Theme } from '@lumx/react';
+import { Dropdown, IconButtonProps, Offset, Placement, TextField, TextFieldProps, Theme } from '@lumx/react';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
@@ -29,7 +29,7 @@ export interface AutocompleteProps extends GenericProps {
      * Reference to the <input> or <textarea> element.
      * @see {@link TextFieldProps#inputRef}
      */
-    inputRef?: RefObject<HTMLInputElement>;
+    inputRef?: TextFieldProps['inputRef'];
     /**
      * The offset that will be applied to the Dropdown position.
      * @see {@link DropdownProps#offset}
@@ -244,7 +244,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
                 hasError={hasError}
                 helper={helper}
                 icon={icon}
-                inputRef={mergeRefs(inputAnchorRef, inputRef) as any}
+                inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}
                 clearButtonProps={clearButtonProps}
                 isDisabled={isDisabled}
                 isRequired={isRequired}

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/date-picker/DatePickerField.tsx

@@ -62,7 +62,7 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
         value,
         ...forwardedProps
     } = props;
-    const wrapperRef = useRef(null);
+    const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
     const anchorRef = useRef(null);
 
     const [isOpen, setIsOpen] = useState(false);
@@ -83,8 +83,8 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
     };
 
     // Handle focus trap.
-    const todayOrSelectedDateRef = useRef<HTMLButtonElement>(null);
-    useFocusTrap(todayOrSelectedDateRef.current && wrapperRef.current, todayOrSelectedDateRef.current);
+    const [todayOrSelectedDate, setTodayOrSelectedDate] = useState<HTMLButtonElement | null>(null);
+    useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
 
     const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {
         if (!textFieldValue) {
@@ -121,19 +121,18 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
                     closeOnClickAway
                     closeOnEscape
                 >
-                    <div ref={wrapperRef}>
-                        <DatePicker
-                            locale={locale}
-                            maxDate={maxDate}
-                            minDate={minDate}
-                            value={value}
-                            onChange={onDatePickerChange}
-                            todayOrSelectedDateRef={todayOrSelectedDateRef}
-                            defaultMonth={defaultMonth}
-                            nextButtonProps={nextButtonProps}
-                            previousButtonProps={previousButtonProps}
-                        />
-                    </div>
+                    <DatePicker
+                        ref={setWrapperElement}
+                        locale={locale}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        value={value}
+                        onChange={onDatePickerChange}
+                        todayOrSelectedDateRef={setTodayOrSelectedDate}
+                        defaultMonth={defaultMonth}
+                        nextButtonProps={nextButtonProps}
+                        previousButtonProps={previousButtonProps}
+                    />
                 </Popover>
             ) : null}
         </>

package/src/components/date-picker/types.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from '@lumx/react';
 import { GenericProps } from '@lumx/react/utils';
-import { RefObject } from 'react';
+import { Ref } from 'react';
 
 /**
  * Defines the props of the component.
@@ -20,7 +20,7 @@ export interface DatePickerProps extends GenericProps {
     previousButtonProps: Pick<IconButtonProps, 'label'> &
         Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
     /** Reference to the <button> element corresponding to the current date or the selected date. */
-    todayOrSelectedDateRef?: RefObject<HTMLButtonElement>;
+    todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
     /** Currently selected date. */
     value: Date | undefined;
     /** On change callback. */

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

@@ -1,3 +1,4 @@
+import noop from 'lodash/noop';
 import { mdiClose } from '@lumx/icons';
 import {
     AlertDialog,
@@ -17,7 +18,8 @@ import {
 } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { select } from '@storybook/addon-knobs';
-import React, { RefObject, useRef, useState } from 'react';
+import React, { RefObject, useCallback, useRef, useState } from 'react';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import { Dialog, DialogSizes } from './Dialog';
 import { loremIpsum } from '../../stories/knobs/lorem';
 import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
@@ -43,8 +45,8 @@ const footer = <footer className="lumx-spacing-padding">Dialog footer</footer>;
 function useOpenButton(theme: Theme, defaultState = true) {
     const buttonRef = useRef() as RefObject<HTMLButtonElement>;
     const [isOpen, setOpen] = useState(defaultState);
-    const openDialog = () => setOpen(true);
-    const closeDialog = () => setOpen(false);
+    const openDialog = useCallback(() => setOpen(true), []);
+    const closeDialog = useCallback(() => setOpen(false), []);
 
     return {
         button: (
@@ -283,7 +285,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);
@@ -300,6 +303,9 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
     };
     const [date, setDate] = useState<Date | undefined>(new Date('2020-05-18'));
 
+    const datePickerDialogButtonRef = useRef<HTMLButtonElement>(null);
+    const [isDatePickerDialogOpen, closeDatePickerDialog, openDatePickerDialog] = useBooleanState(false);
+
     return (
         <>
             {button}
@@ -313,6 +319,10 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                     />
                 </header>
                 <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
+                    {/* Testing hidden input do not count in th focus trap*/}
+                    <input hidden type="file" />
+                    <input type="hidden" />
+
                     <div className="lumx-spacing-margin-bottom-huge">
                         The text field should capture the focus on open and a focus trap should be in place.
                     </div>
@@ -334,16 +344,51 @@ export const DialogWithFocusableElements = ({ theme }: any) => {
                     />
 
                     <FlexBox orientation="horizontal" hAlign="bottom" gap="regular">
-                        <DatePickerField
-                            locale="fr"
-                            label="Start date"
-                            placeholder="Pick a date"
-                            theme={theme}
-                            onChange={setDate}
-                            value={date}
-                            nextButtonProps={{ label: 'Next month' }}
-                            previousButtonProps={{ label: 'Previous month' }}
-                        />
+                        <Button ref={datePickerDialogButtonRef} onClick={openDatePickerDialog}>
+                            Open date picker
+                        </Button>
+                        <Dialog
+                            isOpen={isDatePickerDialogOpen}
+                            parentElement={datePickerDialogButtonRef}
+                            onClose={closeDatePickerDialog}
+                        >
+                            <header>
+                                <Toolbar
+                                    label={<h1 className="lumx-typography-title">Date picker</h1>}
+                                    after={
+                                        <IconButton
+                                            label="Close"
+                                            icon={mdiClose}
+                                            onClick={closeDatePickerDialog}
+                                            emphasis={Emphasis.low}
+                                        />
+                                    }
+                                />
+                            </header>
+                            <div className="lumx-spacing-padding">
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    theme={theme}
+                                    onChange={setDate}
+                                    value={date}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                />
+                                <DatePickerField
+                                    locale="fr"
+                                    label="Start date"
+                                    placeholder="Pick a date"
+                                    theme={theme}
+                                    onChange={noop}
+                                    value={undefined}
+                                    nextButtonProps={{ label: 'Next month' }}
+                                    previousButtonProps={{ label: 'Previous month' }}
+                                    defaultMonth={new Date('2020-05-18')}
+                                />
+                            </div>
+                        </Dialog>
 
                         <Select
                             className="lumx-spacing-margin-left-huge"
@@ -372,6 +417,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/Dialog.tsx

@@ -1,4 +1,4 @@
-import React, { Children, forwardRef, ReactElement, ReactNode, RefObject, useMemo, useRef, useState } from 'react';
+import React, { Children, forwardRef, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
@@ -42,7 +42,7 @@ export interface DialogProps extends GenericProps {
     /** Reference to the parent element that triggered modal opening (will get back focus on close). */
     parentElement?: RefObject<HTMLElement>;
     /** Reference to the dialog content element. */
-    contentRef?: RefObject<HTMLDivElement>;
+    contentRef?: Ref<HTMLDivElement>;
     /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */
     focusElement?: RefObject<HTMLElement>;
     /** Whether to keep the dialog open on clickaway or escape press. */
@@ -142,7 +142,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
     const localContentRef = useRef<HTMLDivElement>(null);
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useFocusTrap(wrapperRef.current, focusElement?.current);
+    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDisableBodyScroll(isOpen && localContentRef.current);