@lumx/react 2.2.2 → 2.2.3-alpha-export-hook1

package/esm/hooks/useOpenHoverOrLongPress.js

@@ -0,0 +1,172 @@
+import { d as _slicedToArray } from '../_internal/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+import { o as onEscapePressed } from '../_internal/onEscapePressed.js';
+
+/** Return true if the browser does not support pointer hover */
+var browserDoesNotSupportHover = function browserDoesNotSupportHover() {
+  var _window$matchMedia, _window;
+
+  return !!((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(hover: none)').matches);
+};
+
+var DEFAULT_CONFIG = {
+  hover: {
+    openDelay: 500,
+    closeDelay: 0
+  },
+  longPress: {
+    openDelay: 250,
+    closeDelay: 3000
+  }
+};
+/**
+ * Hook controlling an open/close action on hover on device supporting pointer hover
+ * and on long press on device not supporting pointer hover.
+ *
+ * @param  anchorElement Anchor element on which the hover or longPress is watched.
+ * @param  config        Open/close delay configuration.
+ * @return true/false boolean.
+ */
+
+function useOpenHoverOrLongPress(anchorElement) {
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var activation = browserDoesNotSupportHover() ? 'longPress' : 'hover';
+  var _DEFAULT_CONFIG$activ = DEFAULT_CONFIG[activation],
+      defaultOpenDelay = _DEFAULT_CONFIG$activ.openDelay,
+      defaultCloseDelay = _DEFAULT_CONFIG$activ.closeDelay;
+
+  var _ref = (config === null || config === void 0 ? void 0 : config[activation]) || {},
+      _ref$openDelay = _ref.openDelay,
+      openDelay = _ref$openDelay === void 0 ? defaultOpenDelay : _ref$openDelay,
+      _ref$closeDelay = _ref.closeDelay,
+      closeDelay = _ref$closeDelay === void 0 ? defaultCloseDelay : _ref$closeDelay;
+
+  useEffect(function () {
+    if (!anchorElement) {
+      return undefined;
+    }
+
+    var timer;
+    var openStartTime;
+    var shouldOpen; // Run timer to defer updating the isOpen state.
+
+    var deferUpdate = function deferUpdate(duration) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(function () {
+        setIsOpen(!!shouldOpen);
+      }, duration);
+    };
+
+    var hasTouch = 'ontouchstart' in window; // Open (or/and cancel closing).
+
+    var open = function open() {
+      if (shouldOpen && !timer) return;
+      shouldOpen = true;
+      openStartTime = Date.now();
+      deferUpdate(openDelay);
+    }; // Close or cancel opening
+
+
+    var close = function close() {
+      var overrideDelay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : closeDelay;
+      if (!shouldOpen && !timer) return;
+      shouldOpen = false;
+      deferUpdate(overrideDelay);
+    };
+
+    var closeImmediately = function closeImmediately() {
+      return close(0);
+    };
+    /**
+     * Handle touchend event
+     * If `touchend` comes before the open delay => cancel open (close immediate).
+     * Else if `touchend` comes after the open delay => open takes priority, the anchor's default touch end event is prevented.
+     */
+
+
+    var touchEnd = function touchEnd(evt) {
+      if (!openStartTime) return;
+
+      if (Date.now() - openStartTime >= openDelay) {
+        // Tooltip take priority, event prevented.
+        evt.stopPropagation();
+        evt.preventDefault();
+        anchorElement.focus(); // Close with delay.
+
+        close();
+      } else {
+        // Close immediately.
+        closeImmediately();
+      }
+    };
+
+    var events = []; // Long press activation.
+
+    if (activation === 'longPress') {
+      events.push([anchorElement, hasTouch ? 'touchstart' : 'mousedown', open], [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd]);
+    } // Hover activation.
+
+
+    if (activation === 'hover') {
+      events.push([anchorElement, 'mouseenter', open], [anchorElement, 'mouseleave', close], [anchorElement, 'mouseup', closeImmediately]);
+    } // Events always applied no matter the browser:
+
+
+    events.push( // Open on focus.
+    [anchorElement, 'focusin', open], // Close on lost focus.
+    [anchorElement, 'focusout', closeImmediately], // Close on ESC keydown
+    [anchorElement, 'keydown', onEscapePressed(closeImmediately)]); // Attach events
+
+    for (var _i = 0, _events = events; _i < _events.length; _i++) {
+      var _events$_i = _slicedToArray(_events[_i], 3),
+          node = _events$_i[0],
+          eventType = _events$_i[1],
+          evenHandler = _events$_i[2];
+
+      node.addEventListener(eventType, evenHandler);
+    }
+
+    return function () {
+      // Detach events.
+      var _iteratorNormalCompletion = true;
+      var _didIteratorError = false;
+      var _iteratorError = undefined;
+
+      try {
+        for (var _iterator = events[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var _step$value = _slicedToArray(_step.value, 3),
+              node = _step$value[0],
+              eventType = _step$value[1],
+              evenHandler = _step$value[2];
+
+          node.removeEventListener(eventType, evenHandler);
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+
+      closeImmediately();
+    };
+  }, [activation, anchorElement, closeDelay, openDelay]);
+  return isOpen;
+}
+
+export { DEFAULT_CONFIG, useOpenHoverOrLongPress };
+//# sourceMappingURL=useOpenHoverOrLongPress.js.map

package/esm/hooks/useOpenHoverOrLongPress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOpenHoverOrLongPress.js","sources":["../../../src/utils/browserDoesNotSupportHover.ts","../../../src/hooks/useOpenHoverOrLongPress.ts"],"sourcesContent":["/** Return true if the browser does not support pointer hover */\nexport const browserDoesNotSupportHover = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","import { onEscapePressed } from '@lumx/react/utils';\nimport { useEffect, useState } from 'react';\nimport { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';\n\ninterface OpenCloseConfig {\n    openDelay: number;\n    closeDelay: number;\n}\n\ninterface Config {\n    hover: OpenCloseConfig;\n    longPress: OpenCloseConfig;\n}\n\nexport const DEFAULT_CONFIG: Config = {\n    hover: {\n        openDelay: 500,\n        closeDelay: 0,\n    },\n    longPress: {\n        openDelay: 250,\n        closeDelay: 3000,\n    },\n};\n\n/**\n * Hook controlling an open/close action on hover on device supporting pointer hover\n * and on long press on device not supporting pointer hover.\n *\n * @param  anchorElement Anchor element on which the hover or longPress is watched.\n * @param  config        Open/close delay configuration.\n * @return true/false boolean.\n */\nexport function useOpenHoverOrLongPress(\n    anchorElement: HTMLElement | null,\n    config: { hover?: Partial<OpenCloseConfig>; longPress?: Partial<OpenCloseConfig> } = {},\n): boolean {\n    const [isOpen, setIsOpen] = useState(false);\n    const activation = browserDoesNotSupportHover() ? 'longPress' : 'hover';\n    const { openDelay: defaultOpenDelay, closeDelay: defaultCloseDelay } = DEFAULT_CONFIG[activation];\n    const { openDelay = defaultOpenDelay, closeDelay = defaultCloseDelay } = config?.[activation] || {};\n\n    useEffect(() => {\n        if (!anchorElement) {\n            return undefined;\n        }\n        let timer: number | undefined;\n        let openStartTime: number | undefined;\n        let shouldOpen: boolean | undefined;\n\n        // Run timer to defer updating the isOpen state.\n        const deferUpdate = (duration: number) => {\n            if (timer) clearTimeout(timer);\n            timer = setTimeout(() => {\n                setIsOpen(!!shouldOpen);\n            }, duration) as any;\n        };\n\n        const hasTouch = 'ontouchstart' in window;\n\n        // Open (or/and cancel closing).\n        const open = () => {\n            if (shouldOpen && !timer) return;\n            shouldOpen = true;\n            openStartTime = Date.now();\n            deferUpdate(openDelay);\n        };\n\n        // Close or cancel opening\n        const close = (overrideDelay = closeDelay) => {\n            if (!shouldOpen && !timer) return;\n            shouldOpen = false;\n            deferUpdate(overrideDelay);\n        };\n        const closeImmediately = () => close(0);\n\n        /**\n         * Handle touchend event\n         * If `touchend` comes before the open delay => cancel open (close immediate).\n         * Else if `touchend` comes after the open delay => open takes priority, the anchor's default touch end event is prevented.\n         */\n        const touchEnd = (evt: Event) => {\n            if (!openStartTime) return;\n            if (Date.now() - openStartTime >= openDelay) {\n                // Tooltip take priority, event prevented.\n                evt.stopPropagation();\n                evt.preventDefault();\n                anchorElement.focus();\n                // Close with delay.\n                close();\n            } else {\n                // Close immediately.\n                closeImmediately();\n            }\n        };\n\n        const events: Array<[Node, Event['type'], any]> = [];\n\n        // Long press activation.\n        if (activation === 'longPress') {\n            events.push(\n                [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n                [anchorElement, hasTouch ? 'touchend' : 'mouseup', touchEnd],\n            );\n        }\n\n        // Hover activation.\n        if (activation === 'hover') {\n            events.push(\n                [anchorElement, 'mouseenter', open],\n                [anchorElement, 'mouseleave', close],\n                [anchorElement, 'mouseup', closeImmediately],\n            );\n        }\n\n        // Events always applied no matter the browser:\n        events.push(\n            // Open on focus.\n            [anchorElement, 'focusin', open],\n            // Close on lost focus.\n            [anchorElement, 'focusout', closeImmediately],\n            // Close on ESC keydown\n            [anchorElement, 'keydown', onEscapePressed(closeImmediately)],\n        );\n\n        // Attach events\n        for (const [node, eventType, evenHandler] of events) {\n            node.addEventListener(eventType, evenHandler);\n        }\n        return () => {\n            // Detach events.\n            for (const [node, eventType, evenHandler] of events) {\n                node.removeEventListener(eventType, evenHandler);\n            }\n            closeImmediately();\n        };\n    }, [activation, anchorElement, closeDelay, openDelay]);\n\n    return isOpen;\n}\n"],"names":["browserDoesNotSupportHover","window","matchMedia","matches","DEFAULT_CONFIG","hover","openDelay","closeDelay","longPress","useOpenHoverOrLongPress","anchorElement","config","useState","isOpen","setIsOpen","activation","defaultOpenDelay","defaultCloseDelay","useEffect","undefined","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","setTimeout","hasTouch","open","Date","now","close","overrideDelay","closeImmediately","touchEnd","evt","stopPropagation","preventDefault","focus","events","push","onEscapePressed","node","eventType","evenHandler","addEventListener","removeEventListener"],"mappings":"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"}

package/esm/index.js

@@ -3,11 +3,15 @@ export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Ori
 import 'react';
 import './_internal/getRootClassName.js';
 import './_internal/mdi.js';
-import './index2.js';
+import './_internal/index.js';
+import 'lodash/noop';
+export { S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './_internal/SlideshowControls.js';
 import 'lodash/isBoolean';
-import 'lodash/isEmpty';
 import 'lodash/kebabCase';
-import 'lodash/noop';
+import 'lodash/isEmpty';
+export { L as List, a as ListItem, i as isClickable } from './_internal/List2.js';
+import './_internal/onEnterPressed.js';
+import './_internal/onEscapePressed.js';
 import './_internal/constants.js';
 import 'lodash/concat';
 import 'lodash/dropRight';
@@ -46,7 +50,6 @@ 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';
@@ -75,7 +78,6 @@ export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as Select
 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 { S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './_internal/SlideshowControls.js';
 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';
@@ -83,8 +85,8 @@ 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';
+import './hooks/useOpenHoverOrLongPress.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';
-import 'lodash/debounce';
 export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
 export { U as UserBlock } from './_internal/UserBlock.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.2.2",
-        "@lumx/icons": "^2.2.2",
+        "@lumx/core": "^2.2.3-alpha-export-hook1",
+        "@lumx/icons": "^2.2.3-alpha-export-hook1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.2.2",
-    "gitHead": "8abe1d0d8931cf956c0664cc3f9b3d9e84c9805c"
+    "version": "2.2.3-alpha-export-hook1",
+    "gitHead": "3c84d9a188d0b1bef0848b9e832dbdba6c22ff4e"
 }

package/src/{hooks → _internal/hooks}/useInterval.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 import isFunction from 'lodash/isFunction';
-import { Callback } from '../utils';
+import { Callback } from '../../utils';
 
 /**
  * Making setInterval Declarative with React Hooks.

package/src/components/autocomplete/Autocomplete.tsx

@@ -6,7 +6,7 @@ import { Dropdown, IconButtonProps, Offset, Placement, TextField, Theme } from '
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { useFocus } from '@lumx/react/hooks/useFocus';
+import { useFocus } from '@lumx/react/_internal/hooks/useFocus';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**

package/src/components/button/__snapshots__/IconButton.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`<IconButton> Props should forward any CSS class 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -19,7 +18,6 @@ exports[`<IconButton> Props should forward any CSS class 1`] = `
 
 exports[`<IconButton> Props should use default props 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -35,7 +33,6 @@ exports[`<IconButton> Props should use default props 1`] = `
 
 exports[`<IconButton> Snapshots and structure should render icon button 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -51,7 +48,6 @@ exports[`<IconButton> Snapshots and structure should render icon button 1`] = `
 
 exports[`<IconButton> Snapshots and structure should render icon button with an image 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot
@@ -70,7 +66,6 @@ exports[`<IconButton> Snapshots and structure should render icon button with an
 
 exports[`<IconButton> Snapshots and structure should render icon button with an image if both props are set 1`] = `
 <Tooltip
-  delay={500}
   placement="bottom"
 >
   <ButtonRoot

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

@@ -64,6 +64,20 @@ describe(`<${Checkbox.displayName}>`, () => {
             expect(label).toExist();
             expect(wrapper).toMatchSnapshot();
         });
+
+        it('should use the given props while passing custom props to input', () => {
+            const { helper, label, wrapper } = setup({
+                helper: 'Test helper',
+                label: 'Test label',
+                inputProps: {
+                    'aria-labelledby': 'labelledby-id',
+                },
+            });
+
+            expect(helper).toExist();
+            expect(label).toExist();
+            expect(wrapper).toMatchSnapshot();
+        });
     });
 
     // 3. Test events.

package/src/components/checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, forwardRef, ReactNode, SyntheticEvent } from 'react';
+import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
 
 import classNames from 'classnames';
 import { uid } from 'uid';
@@ -30,6 +30,8 @@ export interface CheckboxProps extends GenericProps {
     value?: string;
     /** On change callback. */
     onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
+    /** optional props for input */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 
 /**
@@ -70,6 +72,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
         onChange,
         theme,
         value,
+        inputProps = {},
         ...forwardedProps
     } = props;
     const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
@@ -105,6 +108,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
                     value={value}
                     checked={isChecked}
                     onChange={handleChange}
+                    {...inputProps}
                 />
 
                 <div className={`${CLASSNAME}__input-placeholder`}>

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

@@ -50,6 +50,57 @@ exports[`<Checkbox> Props should use the given props 1`] = `
 </div>
 `;
 
+exports[`<Checkbox> Props should use the given props while passing custom props to input 1`] = `
+<div
+  className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
+>
+  <div
+    className="lumx-checkbox__input-wrapper"
+  >
+    <input
+      aria-labelledby="labelledby-id"
+      className="lumx-checkbox__input-native"
+      id="fixedId"
+      onChange={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+    <div
+      className="lumx-checkbox__input-placeholder"
+    >
+      <div
+        className="lumx-checkbox__input-background"
+      />
+      <div
+        className="lumx-checkbox__input-indicator"
+      >
+        <Icon
+          icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="lumx-checkbox__content"
+  >
+    <InputLabel
+      className="lumx-checkbox__label"
+      htmlFor="fixedId"
+      theme="light"
+    >
+      Test label
+    </InputLabel>
+    <InputHelper
+      className="lumx-checkbox__helper"
+      kind="info"
+      theme="light"
+    >
+      Test helper
+    </InputHelper>
+  </div>
+</div>
+`;
+
 exports[`<Checkbox> Snapshots and structure should render correctly 1`] = `
 <div
   className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"

package/src/components/chip/Chip.tsx

@@ -1,5 +1,5 @@
 import { Color, ColorPalette, Size, Theme } from '@lumx/react';
-import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
+import { useStopPropagation } from '@lumx/react/_internal/hooks/useStopPropagation';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed } from '@lumx/react/utils';
 

package/src/components/chip/ChipGroup.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
+import { useChipGroupNavigation } from '@lumx/react/_internal/hooks/useChipGroupNavigation';
 
 /**
  * Defines the props of the component.

package/src/components/date-picker/DatePickerField.tsx

@@ -1,11 +1,11 @@
 import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
+import { useFocusTrap } from '@lumx/react/_internal/hooks/useFocusTrap';
 
 import moment from 'moment';
 
 import React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';
 
-import { useFocus } from '@lumx/react/hooks/useFocus';
+import { useFocus } from '@lumx/react/_internal/hooks/useFocus';
 import { Comp, GenericProps } from '@lumx/react/utils';
 
 /**

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

@@ -10,7 +10,7 @@ import * as stories from './Dialog.stories';
 const CLASSNAME = Dialog.className as string;
 
 // Mock out the useIntersectionObserver hook since it can't work with Jest/Enzyme.
-jest.mock('@lumx/react/hooks/useIntersectionObserver', () => ({
+jest.mock('@lumx/react/_internal/hooks/useIntersectionObserver', () => ({
     useIntersectionObserver: () => new Map(),
 }));
 

package/src/components/dialog/Dialog.tsx

@@ -6,9 +6,9 @@ import classNames from 'classnames';
 import { Progress, ProgressVariant, Size } from '@lumx/react';
 
 import { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';
-import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';
+import { useCallbackOnEscape } from '@lumx/react/_internal/hooks/useCallbackOnEscape';
+import { useFocusTrap } from '@lumx/react/_internal/hooks/useFocusTrap';
+import { useIntersectionObserver } from '@lumx/react/_internal/hooks/useIntersectionObserver';
 import {
     Comp,
     GenericProps,
@@ -20,8 +20,8 @@ import {
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
-import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
-import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
+import { useDelayedVisibility } from '@lumx/react/_internal/hooks/useDelayedVisibility';
+import { useDisableBodyScroll } from '@lumx/react/_internal/hooks/useDisableBodyScroll';
 
 /**
  * Defines the props of the component.

package/src/components/dropdown/Dropdown.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { List, ListProps } from '@lumx/react/components/list/List';
 import { Offset, Placement, Popover } from '@lumx/react/components/popover/Popover';
-import { useInfiniteScroll } from '@lumx/react/hooks/useInfiniteScroll';
+import { useInfiniteScroll } from '@lumx/react/_internal/hooks/useInfiniteScroll';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, isComponent } from '@lumx/react/utils';
 
 /**

package/src/components/lightbox/Lightbox.tsx

@@ -8,12 +8,12 @@ import { ColorPalette, Emphasis, IconButton, IconButtonProps, Theme } from '@lum
 import { DOCUMENT } from '@lumx/react/constants';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
-import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
+import { useFocusTrap } from '@lumx/react/_internal/hooks/useFocusTrap';
+import { useDelayedVisibility } from '@lumx/react/_internal/hooks/useDelayedVisibility';
+import { useDisableBodyScroll } from '@lumx/react/_internal/hooks/useDisableBodyScroll';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
+import { useCallbackOnEscape } from '@lumx/react/_internal/hooks/useCallbackOnEscape';
 
 const LIGHTBOX_TRANSITION_DURATION = 400;
 

package/src/components/list/List.tsx

@@ -1,6 +1,6 @@
 import { Size } from '@lumx/react';
 
-import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
+import { useKeyboardListNavigation } from '@lumx/react/_internal/hooks/useKeyboardListNavigation';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 

package/src/components/mosaic/Mosaic.test.tsx

@@ -11,7 +11,7 @@ import * as stories from './Mosaic.stories';
 const CLASSNAME = Mosaic.className as string;
 
 // Mock out the useIntersectionObserver hook since it can't work with Jest/Enzyme.
-jest.mock('@lumx/react/hooks/useIntersectionObserver', () => ({
+jest.mock('@lumx/react/_internal/hooks/useIntersectionObserver', () => ({
     useIntersectionObserver: () => new Map(),
 }));
 

package/src/components/notification/Notification.tsx

@@ -11,7 +11,7 @@ import { DOCUMENT, NOTIFICATION_TRANSITION_DURATION } from '@lumx/react/constant
 import { NOTIFICATION_CONFIGURATION } from '@lumx/react/components/notification/constants';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
-import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
+import { useDelayedVisibility } from '@lumx/react/_internal/hooks/useDelayedVisibility';
 
 /**
  * Defines the props of the component.

package/src/components/popover/Popover.tsx

@@ -6,8 +6,8 @@ import { usePopper } from 'react-popper';
 import classNames from 'classnames';
 
 import { DOCUMENT, WINDOW } from '@lumx/react/constants';
-import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
-import { useFocus } from '@lumx/react/hooks/useFocus';
+import { useCallbackOnEscape } from '@lumx/react/_internal/hooks/useCallbackOnEscape';
+import { useFocus } from '@lumx/react/_internal/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses, ValueOf } from '@lumx/react/utils';

package/src/components/progress-tracker/ProgressTracker.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useRovingTabIndex } from '../../hooks/useRovingTabIndex';
+import { useRovingTabIndex } from '@lumx/react/_internal/hooks/useRovingTabIndex';
 import { useTabProviderContextState } from '../tabs/state';
 
 /**

package/src/components/select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import { List, ListItem, Select, Size, TextField } from '@lumx/react';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { useBooleanState } from '@lumx/react/_internal/hooks/useBooleanState';
 import { text } from '@storybook/addon-knobs';
 import noop from 'lodash/noop';
 import range from 'lodash/range';

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

@@ -1,6 +1,6 @@
 /* istanbul ignore file */
 import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
-import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { useBooleanState } from '@lumx/react/_internal/hooks/useBooleanState';
 import noop from 'lodash/noop';
 import React, { MouseEventHandler, SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';