@lumx/react 3.20.1-alpha.35 → 3.20.1-alpha.36

package/_internal/{840e9690.js → components/drag-handle/index-80e5af6c.js}

@@ -1,12 +1,13 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx } from 'react/jsx-runtime';
-import { mdiDragVertical } from './c72d4f8b.js';
-import { Icon } from './595d0e66.js';
+import { I as Icon } from '../../bace1bf1.js';
 import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
 
+const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';
+
 /**
  * Component display name.
  */
@@ -49,4 +50,3 @@ DragHandle.displayName = COMPONENT_NAME;
 DragHandle.className = CLASSNAME;
 
 export { DragHandle };
-//# sourceMappingURL=840e9690.js.map

package/_internal/{2d1acaa0.js → components/dropdown/index-cebfc268.js}

@@ -1,13 +1,53 @@
-import { useRef, useMemo, cloneElement } from 'react';
+import { useEffect, useRef, useMemo, cloneElement } from 'react';
 import classNames from 'classnames';
-import { List } from './a6be9f05.js';
-import { Popover } from './612f6fb4.js';
-import { useInfiniteScroll } from './dbc379f8.js';
-import { isComponent } from './ebe24fd7.js';
+import { L as List } from '../../0ea95af1.js';
+import { P as Popover } from '../../3864a6c1.js';
 import { getRootClassName } from '@lumx/core/js/utils/className';
-import { Placement } from './9d063548.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { P as Placement } from '../../4f4c0582.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx } from 'react/jsx-runtime';
+import { i as isComponent } from '../../78df9309.js';
+
+// The error margin in px we want to have for triggering infinite scroll
+const SCROLL_TRIGGER_MARGIN = 5;
+
+/**
+ * Listen to clicks away from a given element and callback the passed in function.
+ *
+ * @param  ref               A reference to the element on which you want to listen scroll event.
+ * @param  [callback]        A callback function to call when the bottom of the reference element is reached.
+ * @param  [callbackOnMount] A callback function to call when the component is mounted.
+ */
+const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTriggerMargin = SCROLL_TRIGGER_MARGIN) => {
+  useEffect(() => {
+    const {
+      current
+    } = ref;
+    if (!callback || !current) {
+      return undefined;
+    }
+    const isAtBottom = () => Boolean(current && current.scrollHeight - (current.scrollTop + current.clientHeight) <= scrollTriggerMargin);
+    const onScroll = e => {
+      if (isAtBottom()) {
+        callback(e);
+      }
+    };
+    if (isAtBottom()) {
+      onScroll();
+    }
+    current.addEventListener('scroll', onScroll);
+    current.addEventListener('resize', onScroll);
+    return () => {
+      current.removeEventListener('scroll', onScroll);
+      current.removeEventListener('resize', onScroll);
+    };
+  }, [ref, callback, scrollTriggerMargin]);
+  useEffect(() => {
+    if (callback && callbackOnMount) {
+      callback();
+    }
+  }, [callback, callbackOnMount]);
+};
 
 /**
  * Component display name.
@@ -105,4 +145,3 @@ Dropdown.className = CLASSNAME;
 Dropdown.defaultProps = DEFAULT_PROPS;
 
 export { Dropdown };
-//# sourceMappingURL=2d1acaa0.js.map

package/_internal/{a89bf7bc.js → components/expansion-panel/index-9d45a211.js}

@@ -1,18 +1,17 @@
 import React__default, { Children, useRef } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
-import { isComponent } from './ebe24fd7.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { partitionMulti } from './cb19eca6.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { IS_BROWSER } from './6af61e2f.js';
+import { p as partitionMulti } from '../../4daccdd5.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { I as IS_BROWSER } from '../../d0e3f49e.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { mdiChevronUp } from './0846b7f3.js';
-import { mdiChevronDown } from './256f8eff.js';
-import { DragHandle } from './840e9690.js';
+import { m as mdiChevronUp, a as mdiChevronDown } from '../../0b9c76cb.js';
+import { i as isComponent } from '../../78df9309.js';
+import { DragHandle } from '../drag-handle/index-80e5af6c.js';
 import { Theme, ColorPalette, Emphasis } from '@lumx/core/js/constants';
-import { IconButton } from './5a0207d9.js';
+import { I as IconButton } from '../../b83e864b.js';
 
 /**
  * Component display name.
@@ -166,4 +165,3 @@ ExpansionPanel.className = CLASSNAME;
 ExpansionPanel.defaultProps = DEFAULT_PROPS;
 
 export { ExpansionPanel };
-//# sourceMappingURL=a89bf7bc.js.map

package/_internal/{fcc7c462.js → components/flag/index-33e9d909.js}

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
-import { Icon } from './595d0e66.js';
-import { Text } from './203b01d8.js';
+import { I as Icon } from '../../bace1bf1.js';
+import { T as Text } from '../../e913a3af.js';
 
 const COMPONENT_NAME = 'Flag';
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
@@ -57,4 +57,3 @@ Flag.className = CLASSNAME;
 Flag.defaultProps = DEFAULT_PROPS;
 
 export { Flag };
-//# sourceMappingURL=fcc7c462.js.map

package/_internal/{fdebc718.js → components/flex-box/index-0d6b6b43.js}

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import castArray from 'lodash/castArray';
 import { Orientation } from '@lumx/core/js/constants';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx } from 'react/jsx-runtime';
 
 /**
@@ -54,4 +54,3 @@ FlexBox.displayName = COMPONENT_NAME;
 FlexBox.className = CLASSNAME;
 
 export { FlexBox };
-//# sourceMappingURL=fdebc718.js.map

package/_internal/{ac3f7e4d.js → components/generic-block/index-836c4352.js}

@@ -2,13 +2,14 @@ import React__default, { Children } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import noop from 'lodash/noop';
-import { isComponentType } from './111e65e5.js';
 import { getRootClassName } from '@lumx/core/js/utils/className';
-import { partitionMulti } from './cb19eca6.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { p as partitionMulti } from '../../4daccdd5.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsxs } from 'react/jsx-runtime';
+import { i as isComponentType } from '../../e806b848.js';
 import { Size, Orientation } from '@lumx/core/js/constants';
-import { FlexBox } from './fdebc718.js';
+import { FlexBox } from '../flex-box/index-0d6b6b43.js';
+import pick from 'lodash/pick';
 
 /**
  * Component display name.
@@ -115,5 +116,9 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
   Actions
 });
 
-export { GenericBlock };
-//# sourceMappingURL=ac3f7e4d.js.map
+/**
+ * Accepted gap sizes for the generic block.
+ */
+const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
+
+export { GenericBlock, GenericBlockGapSize };

package/_internal/components/grid/index-8c16a4f1.js

@@ -0,0 +1,104 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { f as forwardRef } from '../../8bce732e.js';
+import { jsx } from 'react/jsx-runtime';
+import { Orientation } from '@lumx/core/js/constants';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'Grid';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  orientation: Orientation.horizontal,
+  wrap: 'nowrap'
+};
+
+/**
+ * Grid component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Grid = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    gutter,
+    hAlign,
+    orientation = DEFAULT_PROPS.orientation,
+    vAlign,
+    wrap = DEFAULT_PROPS.wrap,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, `${CLASSNAME$1}-container`, {
+      [`${CLASSNAME$1}--h-align-${hAlign}`]: hAlign
+    }, {
+      [`${CLASSNAME$1}--v-align-${vAlign}`]: vAlign
+    }, handleBasicClasses({
+      prefix: CLASSNAME$1,
+      orientation,
+      wrap,
+      gutter
+    })),
+    children: children
+  });
+});
+Grid.displayName = COMPONENT_NAME$1;
+Grid.className = CLASSNAME$1;
+Grid.defaultProps = DEFAULT_PROPS;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'GridItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * GridItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const GridItem = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    width,
+    align,
+    order,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      width,
+      order,
+      align
+    })),
+    children: children
+  });
+});
+GridItem.displayName = COMPONENT_NAME;
+GridItem.className = CLASSNAME;
+
+export { Grid, GridItem };

package/_internal/{00cc46ee.js → components/grid-column/index-4a2f56bb.js}

@@ -1,7 +1,7 @@
 import isInteger from 'lodash/isInteger';
 import classNames from 'classnames';
 import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx } from 'react/jsx-runtime';
 
 /**
@@ -57,4 +57,3 @@ GridColumn.className = CLASSNAME;
 GridColumn.defaultProps = DEFAULT_PROPS;
 
 export { GridColumn };
-//# sourceMappingURL=00cc46ee.js.map

package/_internal/{bd1cd49f.js → components/heading/index-fd558a9a.js}

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './82c6852b.js';
-import { useHeadingLevel } from './2cdd9ec6.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { u as useHeadingLevel, D as DEFAULT_TYPOGRAPHY_BY_LEVEL } from '../../ebdcb0c7.js';
+export { H as HeadingLevelProvider } from '../../ebdcb0c7.js';
 import { jsx } from 'react/jsx-runtime';
-import { Text } from './203b01d8.js';
+import { T as Text } from '../../e913a3af.js';
 
 /**
  * Component display name.
@@ -50,5 +50,4 @@ Heading.displayName = COMPONENT_NAME;
 Heading.className = CLASSNAME;
 Heading.defaultProps = DEFAULT_PROPS;
 
-export { Heading };
-//# sourceMappingURL=bd1cd49f.js.map
+export { Heading, useHeadingLevel };

package/_internal/components/icon/index-e7b9b40e.js

@@ -0,0 +1 @@
+export { I as Icon } from '../../bace1bf1.js';

package/_internal/{4c891480.js → components/image-block/index-7021c2f1.js}

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { useTheme } from './d8ee966d.js';
-import { ImageCaption } from './3996d544.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { u as useTheme } from '../../3181f000.js';
+import { I as ImageCaption } from '../../5cef5e8c.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Alignment, Theme } from '@lumx/core/js/constants';
-import { Thumbnail } from './dbe906f1.js';
+import { T as Thumbnail } from '../../035c132d.js';
 
 const ImageBlockCaptionPosition = {
   below: 'below',
@@ -108,4 +108,3 @@ ImageBlock.className = CLASSNAME;
 ImageBlock.defaultProps = DEFAULT_PROPS;
 
 export { ImageBlock, ImageBlockCaptionPosition };
-//# sourceMappingURL=4c891480.js.map