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

package/_internal/{62c6c615.js → components/slider/index-4f9b891b.js}

@@ -1,16 +1,48 @@
-import { useMemo, useRef } from 'react';
+import React__default, { useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import useEventCallback from './a7abe967.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { clamp } from './c3ccd387.js';
-import { useId } from './11687649.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { useDisableStateProps } from './ef982c3d.js';
+import { u as useId } from '../../3a1facc0.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
-import { InputLabel } from './26a92990.js';
-import { InputHelper } from './3119c1fe.js';
+import { InputLabel } from '../input-label/index-0113f382.js';
+import { InputHelper } from '../input-helper/index-5a837e7c.js';
+
+const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
+
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ *
+ * @param fn A function to run
+ * @return A React callback
+ */
+function useEventCallback(fn) {
+  const ref = React__default.useRef(fn);
+  useEnhancedEffect(() => {
+    ref.current = fn;
+  });
+  return React__default.useCallback(event => ref.current(event), []);
+}
+
+/**
+ * Clamp value in range.
+ *
+ * @param value Value to clamp.
+ * @param min   Minimum value.
+ * @param max   Maximum value.
+ * @return Clamped value.
+ */
+const clamp = (value, min, max) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /**
@@ -276,5 +308,4 @@ Slider.displayName = COMPONENT_NAME;
 Slider.className = CLASSNAME;
 Slider.defaultProps = DEFAULT_PROPS;
 
-export { Slider };
-//# sourceMappingURL=62c6c615.js.map
+export { Slider, clamp };

package/_internal/{e5657997.js → components/slideshow/index-d4604589.js}

@@ -1,14 +1,35 @@
-import React__default from 'react';
-import { DEFAULT_OPTIONS } from './1c1cdfa2.js';
-import { useFocusWithin } from './9976fe9a.js';
-import { mergeRefs } from './27df0cb6.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { buildSlideShowGroupId } from './81a6a29a.js';
+import React__default, { useEffect } from 'react';
+import { a as SlideshowControls, b as Slides, c as buildSlideShowGroupId, D as DEFAULT_OPTIONS } from '../../b326655a.js';
+export { S as SlideshowItem } from '../../b326655a.js';
+import { m as mergeRefs } from '../../f0d7d6ea.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
-import { SlideshowControls } from './1d7267a1.js';
-import { Slides } from './e8e4d09e.js';
+
+/**
+ * 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
+ */
+const useFocusWithin = ({
+  element,
+  onFocusIn,
+  onFocusOut
+}) => {
+  useEffect(() => {
+    if (element) {
+      element.addEventListener('focusin', onFocusIn);
+      element.addEventListener('focusout', onFocusOut);
+    }
+    return () => {
+      if (element) {
+        element.removeEventListener('focusin', onFocusIn);
+        element.removeEventListener('focusout', onFocusOut);
+      }
+    };
+  }, [onFocusIn, element, onFocusOut]);
+};
 
 /**
  * Component default props.
@@ -126,5 +147,4 @@ const Slideshow = forwardRef((props, ref) => {
 Slideshow.displayName = 'Slideshow';
 Slideshow.defaultProps = DEFAULT_PROPS;
 
-export { Slideshow };
-//# sourceMappingURL=e5657997.js.map
+export { Slides, Slideshow, SlideshowControls };

package/_internal/{851a3109.js → components/switch/index-58fe0f0c.js}

@@ -2,14 +2,14 @@ import { Children } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useId } from './11687649.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
-import { useDisableStateProps } from './ef982c3d.js';
+import { u as useId } from '../../3a1facc0.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Alignment, Theme } from '@lumx/core/js/constants';
-import { InputLabel } from './26a92990.js';
-import { InputHelper } from './3119c1fe.js';
+import { InputLabel } from '../input-label/index-0113f382.js';
+import { InputHelper } from '../input-helper/index-5a837e7c.js';
 
 /**
  * Component display name.
@@ -120,4 +120,3 @@ Switch.className = CLASSNAME;
 Switch.defaultProps = DEFAULT_PROPS;
 
 export { Switch };
-//# sourceMappingURL=851a3109.js.map

package/_internal/components/table/index-d541aa88.js

@@ -0,0 +1,297 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Theme, Size } from '@lumx/core/js/constants';
+import { I as Icon } from '../../bace1bf1.js';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
+
+const mdiArrowDown = 'M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z';
+
+const mdiArrowUp = 'M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$4 = 'Table';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$4 = getRootClassName(COMPONENT_NAME$4);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$3 = {};
+
+/**
+ * Table component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Table = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    children,
+    className,
+    hasBefore,
+    hasDividers,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("table", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$4,
+      hasBefore,
+      hasDividers,
+      theme
+    })),
+    children: children
+  });
+});
+Table.displayName = COMPONENT_NAME$4;
+Table.className = CLASSNAME$4;
+Table.defaultProps = DEFAULT_PROPS$3;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$3 = 'TableBody';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3, true);
+
+/**
+ * TableBody component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableBody = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("tbody", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME$3),
+    children: children
+  });
+});
+TableBody.displayName = COMPONENT_NAME$3;
+TableBody.className = CLASSNAME$3;
+
+const ThOrder = {
+  asc: 'asc',
+  desc: 'desc'
+};
+/**
+ * Table cell variants.
+ */
+const TableCellVariant = {
+  body: 'body',
+  head: 'head'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'TableCell';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$2 = {
+  variant: TableCellVariant.body
+};
+
+/**
+ * TableCell component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableCell = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    icon,
+    isSortable,
+    onHeaderClick,
+    sortOrder,
+    variant = DEFAULT_PROPS$2.variant,
+    ...forwardedProps
+  } = props;
+
+  // Use button if clickable
+  const Wrapper = onHeaderClick ? 'button' : 'div';
+  const wrapperProps = Wrapper === 'button' ? {
+    type: 'button',
+    onClick: onHeaderClick
+  } : undefined;
+
+  // ARIA sort
+  let ariaSort;
+  if (isSortable) {
+    ariaSort = 'none';
+    if (sortOrder === ThOrder.asc) ariaSort = 'ascending';
+    if (sortOrder === ThOrder.desc) ariaSort = 'descending';
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
+      ref: ref,
+      ...forwardedProps,
+      className: classNames(handleBasicClasses({
+        prefix: CLASSNAME$2,
+        isSortable,
+        isSorted: isSortable && !!sortOrder
+      }), className, `${CLASSNAME$2}--head`),
+      "aria-sort": ariaSort,
+      children: /*#__PURE__*/jsxs(Wrapper, {
+        className: `${CLASSNAME$2}-wrapper`,
+        ...wrapperProps,
+        children: [icon && !isSortable && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME$2}-icon`,
+          icon: icon,
+          size: Size.xxs
+        }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME$2}-icon`,
+          icon: mdiArrowUp,
+          size: Size.xxs
+        }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME$2}-icon`,
+          icon: mdiArrowDown,
+          size: Size.xxs
+        }), /*#__PURE__*/jsx("div", {
+          className: `${CLASSNAME$2}-content`,
+          children: children
+        })]
+      })
+    }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
+      ...forwardedProps,
+      className: classNames(className, CLASSNAME$2, `${CLASSNAME$2}--body`),
+      children: /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME$2}-content`,
+        children: children
+      })
+    })]
+  });
+});
+TableCell.displayName = COMPONENT_NAME$2;
+TableCell.className = CLASSNAME$2;
+TableCell.defaultProps = DEFAULT_PROPS$2;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'TableHeader';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$1 = {};
+
+/**
+ * TableHeader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableHeader = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("thead", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME$1),
+    children: children
+  });
+});
+TableHeader.displayName = COMPONENT_NAME$1;
+TableHeader.className = CLASSNAME$1;
+TableHeader.defaultProps = DEFAULT_PROPS$1;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'TableRow';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME, true);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * TableRow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const TableRow = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    children,
+    className,
+    isClickable,
+    isSelected,
+    ...forwardedProps
+  } = otherProps;
+  return /*#__PURE__*/jsx("tr", {
+    ref: ref,
+    tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      isClickable: isClickable && !isAnyDisabled,
+      isDisabled: isAnyDisabled,
+      isSelected: isSelected && !isAnyDisabled,
+      prefix: CLASSNAME
+    })),
+    "aria-disabled": isAnyDisabled,
+    children: children
+  });
+});
+TableRow.displayName = COMPONENT_NAME;
+TableRow.className = CLASSNAME;
+TableRow.defaultProps = DEFAULT_PROPS;
+
+export { Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, ThOrder };