@lumx/react 3.20.1-alpha.37 → 3.20.1-alpha.38

package/index.d.ts

@@ -1042,24 +1042,13 @@ interface FlexBoxProps extends GenericProps {
  */
 declare const FlexBox: Comp<FlexBoxProps, HTMLDivElement>;
 
+type GenericBlockGapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
 /**
  * Accepted gap sizes for the generic block.
  */
-declare const GenericBlockGapSize: Pick<{
-    readonly xxs: "xxs";
-    readonly xs: "xs";
-    readonly s: "s";
-    readonly m: "m";
-    readonly l: "l";
-    readonly xl: "xl";
-    readonly xxl: "xxl";
-    readonly tiny: "tiny";
-    readonly regular: "regular";
-    readonly medium: "medium";
-    readonly big: "big";
-    readonly huge: "huge";
-}, "tiny" | "regular" | "medium" | "big" | "huge">;
-type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;
+declare const GenericBlockGapSize: {
+    [S in GenericBlockGapSize]: S;
+};
 
 interface GenericBlockProps extends FlexBoxProps {
     /**

package/index.js

@@ -7,28 +7,16 @@ import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses, getBasicClass, getTypographyClassName, fontColorClass, resolveColorWithVariants } from '@lumx/core/js/utils/className';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
-import last from 'lodash/last';
-import pull from 'lodash/pull';
-import get from 'lodash/get';
-import concat from 'lodash/concat';
-import dropRight from 'lodash/dropRight';
-import partition from 'lodash/partition';
-import reduce from 'lodash/reduce';
+import { last } from '@lumx/core/js/utils/collection/last';
+import { partitionMulti } from '@lumx/core/js/utils/collection/partitionMulti';
 import { useDisabledStateContext, Portal, ClickAwayProvider } from './utils/index.js';
-import isEmpty from 'lodash/isEmpty';
 import memoize from 'lodash/memoize';
-import isFunction from 'lodash/isFunction';
-import castArray from 'lodash/castArray';
-import pick from 'lodash/pick';
-import noop from 'lodash/noop';
-import isInteger from 'lodash/isInteger';
+import { castArray } from '@lumx/core/js/utils/collection/castArray';
+import { isEmpty } from '@lumx/core/js/utils/collection/isEmpty';
 import throttle from 'lodash/throttle';
-import range from 'lodash/range';
-import chunk from 'lodash/chunk';
+import { range } from '@lumx/core/js/utils/collection/range';
+import { chunk } from '@lumx/core/js/utils/collection/chunk';
 import ReactDOM from 'react-dom';
-import take from 'lodash/take';
-import isObject from 'lodash/isObject';
-import set from 'lodash/set';
 
 const mdiAlert = 'M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';
 
@@ -722,7 +710,7 @@ BadgeWrapper.displayName = 'BadgeWrapper';
 BadgeWrapper.className = CLASSNAME$1f;
 
 /**
- * Properties of a component to use to determine it's name.
+ * Properties of a component to use to determine its name.
  * In the order of preference.
  */
 const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'type.name', 'props.mdxType', '_reactInternalFiber.elementType.name'];
@@ -734,7 +722,7 @@ const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'typ
  */
 const isComponent = component => instance => {
   const componentName = typeof component === 'string' ? component : component.displayName;
-  return !!get(instance, '$$typeof') && NAME_PROPERTIES.some(nameProperty => get(instance, nameProperty) === componentName);
+  return !!instance.$$typeof && NAME_PROPERTIES.some(nameProperty => instance[nameProperty] === componentName);
 };
 
 /**
@@ -962,11 +950,11 @@ const Button = forwardRef((props, ref) => {
   const buttonClassName = classNames(className, getBasicClass({
     prefix: CLASSNAME$1e,
     type: 'hasLeftIcon',
-    value: !isEmpty(leftIcon)
+    value: !!leftIcon
   }), getBasicClass({
     prefix: CLASSNAME$1e,
     type: 'hasRightIcon',
-    value: !isEmpty(rightIcon)
+    value: !!rightIcon
   }));
   return /*#__PURE__*/jsxs(ButtonRoot, {
     ref: ref,
@@ -976,7 +964,7 @@ const Button = forwardRef((props, ref) => {
     ...forwardedProps,
     className: buttonClassName,
     variant: "button",
-    children: [leftIcon && !isEmpty(leftIcon) &&
+    children: [leftIcon &&
     /*#__PURE__*/
     // Theme is handled in the button scss
     jsx(ThemeProvider, {
@@ -986,7 +974,7 @@ const Button = forwardRef((props, ref) => {
       })
     }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/jsx("span", {
       children: children
-    })), rightIcon && !isEmpty(rightIcon) &&
+    })), rightIcon &&
     /*#__PURE__*/
     // Theme is handled in the button scss
     jsx(ThemeProvider, {
@@ -1238,7 +1226,7 @@ Checkbox.defaultProps = DEFAULT_PROPS$X;
  */
 function useStopPropagation(handler) {
   return useCallback(evt => {
-    if (!evt || !isFunction(handler)) {
+    if (!evt || !handler) {
       return;
     }
     handler(evt);
@@ -1295,9 +1283,7 @@ const Chip = forwardRef((props, ref) => {
     onKeyDown,
     ...forwardedProps
   } = otherProps;
-  const hasAfterClick = isFunction(onAfterClick);
-  const hasBeforeClick = isFunction(onBeforeClick);
-  const hasOnClick = isFunction(props.onClick);
+  const hasOnClick = Boolean(props.onClick);
   const isButton = hasOnClick && !href;
   const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
@@ -1307,7 +1293,7 @@ const Chip = forwardRef((props, ref) => {
   const handleOnAfterClick = useStopPropagation(onAfterClick);
   const handleKeyDown = evt => {
     onKeyDown?.(evt);
-    if (hasOnClick) {
+    if (onClick) {
       onEnterPressed(onClick)(evt);
     }
   };
@@ -1333,14 +1319,14 @@ const Chip = forwardRef((props, ref) => {
         unselected: Boolean(!isSelected)
       })),
       "aria-disabled": isClickable && isAnyDisabled || undefined,
-      onClick: hasOnClick ? onClick : undefined,
+      onClick: onClick || undefined,
       onKeyDown: handleKeyDown,
       children: [before &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
         className: classNames(`${CLASSNAME$1a}__before`, {
-          [`${CLASSNAME$1a}__before--is-clickable`]: hasBeforeClick
+          [`${CLASSNAME$1a}__before--is-clickable`]: !!onBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
@@ -1352,7 +1338,7 @@ const Chip = forwardRef((props, ref) => {
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
         className: classNames(`${CLASSNAME$1a}__after`, {
-          [`${CLASSNAME$1a}__after--is-clickable`]: hasAfterClick
+          [`${CLASSNAME$1a}__after--is-clickable`]: !!onAfterClick
         }),
         onClick: handleOnAfterClick,
         children: after
@@ -1741,7 +1727,7 @@ const getMonthCalendar = (locale, referenceDate = new Date(), rangeMinDate, rang
     if (iterDate.getMonth() === month) {
       week[weekDayNumber] = day;
     }
-    if (weekDayNumber === lastDayOfWeek.number) {
+    if (weekDayNumber === lastDayOfWeek?.number) {
       weeks.push(week);
       rowCount += 1;
       week = {};
@@ -2187,7 +2173,10 @@ function makeListenerTowerContext() {
       // Disable current listener.
       listener.disable();
       // Remove current listener.
-      pull(LISTENERS, listener);
+      const index = LISTENERS.indexOf(listener);
+      if (index > -1) {
+        LISTENERS.splice(index, 1);
+      }
       // Enable previous listener.
       last(LISTENERS)?.enable();
     }
@@ -2368,23 +2357,6 @@ function useIntersectionObserver(elements, options) {
   return intersections;
 }
 
-/**
- * Similar to lodash `partition` function but working with multiple predicates.
- *
- * @example
- * const isString = (s) => typeof s === 'string'
- * const isNumber = (s) => typeof s === 'number'
- * const [strings, numbers, others] = partitionMulti(['a', 1, 'b', false], [isString, isNumber])
- * //=> [['a', 'b'], [1], [false]]
- *
- * @param  elements array of elements
- * @param  predicates array of predicates to apply on elements
- * @return partitioned elements by the given predicates
- */
-function partitionMulti(elements, predicates) {
-  return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
-}
-
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 // Older browsers don't support event options, feature detect it.
@@ -3010,7 +2982,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
       onListItemSelected(selectedItem);
       resetActiveIndex();
     } else if (activeItemIndex === initialIndex && onEnterPressed) {
-      const value = get(evt, 'target.value');
+      const value = evt.target?.value;
       onEnterPressed(value);
       resetActiveIndex();
     }
@@ -3021,7 +2993,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
    * @param evt - key pressed event
    */
   const onTabKeyPressed = evt => {
-    const value = get(evt, 'target.value');
+    const value = evt.target?.value;
     if (preventTabOnEnteredValue && value && value.length > 0) {
       preventDefaultAndStopPropagation(evt);
     }
@@ -3117,7 +3089,7 @@ function isClickable({
   linkProps,
   onItemSelected
 }) {
-  return !isEmpty(linkProps?.href) || !!onItemSelected;
+  return !!linkProps?.href || !!onItemSelected;
 }
 
 /**
@@ -3496,7 +3468,7 @@ var reactIsExports = requireReactIs();
 function flattenChildren(children) {
   function recur(nodes, keys = []) {
     return Children.toArray(nodes).reduce((acc, node, index) => {
-      const nodeKeys = keys.concat(get(node, 'key') ?? index);
+      const nodeKeys = keys.concat(node?.key ?? index);
       if (reactIsExports.isFragment(node)) {
         acc.push(...recur(node.props.children, nodeKeys));
       } else if (/*#__PURE__*/isValidElement(node)) {
@@ -3606,7 +3578,7 @@ const useInteractiveList = options => {
       setActiveItemIndex(nextIndex);
       evt.preventDefault();
       evt.stopPropagation();
-      onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
+      onListItemNavigated?.(nextIndex, items[nextIndex]?.key);
     };
 
     /**
@@ -6473,7 +6445,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
 
   // Either take the header in children or create one with the label.
   const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
-  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
+  const headerContent = React__default.Children.count(headerProps.children) > 0 ? headerProps.children : /*#__PURE__*/jsx("span", {
     className: `${CLASSNAME$$}__label`,
     children: label
   });
@@ -6492,7 +6464,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
   const rootClassName = classNames(className, handleBasicClasses({
     hasBackground,
-    hasHeader: Boolean(!isEmpty(headerProps.children)),
+    hasHeader: !isEmpty(headerProps.children),
     hasHeaderDivider,
     isClose: !isOpen,
     isDraggable: Boolean(dragHandle),
@@ -6687,11 +6659,11 @@ const DEFAULT_PROPS$L = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
-const Figure = noop.bind({});
+const Figure = () => {};
 const isFigure = isComponentType(Figure);
-const Content = noop.bind({});
+const Content = () => {};
 const isContent = isComponentType(Content);
-const Actions = noop.bind({});
+const Actions = () => {};
 const isActions = isComponentType(Actions);
 
 /**
@@ -6728,7 +6700,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       contentChildProps: contentChild?.props,
       actionsChild,
       actionsChildProps: actionsChild?.props,
-      otherChildren: otherChildren.filter(child => !isEmpty(child))
+      otherChildren: otherChildren.filter(child => React__default.Children.count(child) > 0)
     };
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, {
@@ -6778,7 +6750,13 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
 /**
  * Accepted gap sizes for the generic block.
  */
-const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
+const GenericBlockGapSize = {
+  tiny: Size.tiny,
+  regular: Size.regular,
+  medium: Size.medium,
+  big: Size.big,
+  huge: Size.huge
+};
 
 const DEFAULT_VALUE = {};
 
@@ -7151,7 +7129,7 @@ const GridColumn = forwardRef((props, ref) => {
     className: classNames(className, CLASSNAME$T),
     style: {
       ...style,
-      ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
+      ['--lumx-grid-column-item-min-width']: Number.isInteger(itemMinWidth) && `${itemMinWidth}px`,
       ['--lumx-grid-column-columns']: maxColumns,
       ['--lumx-grid-column-gap']: gap && `var(--lumx-spacing-unit-${gap})`
     },
@@ -8844,7 +8822,7 @@ const Mosaic = forwardRef((props, ref) => {
     }),
     children: /*#__PURE__*/jsx("div", {
       className: `${CLASSNAME$G}__wrapper`,
-      children: take(thumbnails, 4).map((thumbnail, index) => {
+      children: thumbnails.slice(0, 4).map((thumbnail, index) => {
         const {
           image,
           onClick,
@@ -9160,9 +9138,7 @@ const Notification = forwardRef((props, ref) => {
   const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
   const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
   const handleCallback = evt => {
-    if (isFunction(onActionClick)) {
-      onActionClick();
-    }
+    onActionClick?.();
     evt.stopPropagation();
   };
   if (!type || !isVisible) {
@@ -9311,6 +9287,13 @@ const PostBlock = forwardRef((props, ref) => {
     title,
     ...forwardedProps
   } = props;
+
+  // Display text as string or HTML
+  const textContent = typeof text === 'string' ? {
+    children: text
+  } : {
+    dangerouslySetInnerHTML: text
+  };
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: classNames(className, handleBasicClasses({
@@ -9339,15 +9322,9 @@ const PostBlock = forwardRef((props, ref) => {
       }), meta && /*#__PURE__*/jsx("span", {
         className: `${CLASSNAME$A}__meta`,
         children: meta
-      }), isObject(text) && text.__html ?
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-danger
-      jsx("p", {
-        dangerouslySetInnerHTML: text,
-        className: `${CLASSNAME$A}__text`
-      }) : /*#__PURE__*/jsx("p", {
+      }), /*#__PURE__*/jsx("p", {
         className: `${CLASSNAME$A}__text`,
-        children: text
+        ...textContent
       }), attachments && /*#__PURE__*/jsx("div", {
         className: `${CLASSNAME$A}__attachments`,
         children: attachments
@@ -10434,8 +10411,8 @@ const SelectField = props => {
  * @return React element.
  */
 const Select = forwardRef((props, ref) => {
-  const isEmpty$1 = isEmpty(props.value);
-  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
+  const isEmpty = !props.value;
+  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
   return WithSelectContext(SelectField, {
     ...DEFAULT_PROPS$n,
     ...props,
@@ -10445,7 +10422,7 @@ const Select = forwardRef((props, ref) => {
       prefix: CLASSNAME$q
     })),
     hasInputClear,
-    isEmpty: isEmpty$1
+    isEmpty
   }, ref);
 });
 Select.displayName = COMPONENT_NAME$q;
@@ -10677,7 +10654,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
-  const hasContent = !isEmpty(content);
+  const hasContent = Boolean(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
   const contentId = useId();
@@ -11218,9 +11195,7 @@ function useInterval(callback, delay) {
   useEffect(() => {
     if (delay === null) return undefined;
     function tick() {
-      if (isFunction(savedCallback.current)) {
-        savedCallback.current();
-      }
+      savedCallback.current?.();
     }
     const id = setInterval(tick, delay);
     return () => clearInterval(id);
@@ -12096,7 +12071,7 @@ const Switch = forwardRef((props, ref) => {
         theme: theme,
         className: `${CLASSNAME$e}__label`,
         children: children
-      }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
+      }), helper && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
         theme: theme,
         className: `${CLASSNAME$e}__helper`,
@@ -12769,7 +12744,7 @@ const renderInputNative = props => {
     setFocus(false);
   };
   const handleChange = event => {
-    onChange(get(event, 'target.value'), name, event);
+    onChange(event.target.value, name, event);
   };
   const Component = multiline ? 'textarea' : 'input';
   const inputProps = {
@@ -13914,7 +13889,7 @@ const UserBlock = forwardRef((props, ref) => {
   const isLink = Boolean(linkProps?.href || linkAs);
   const isClickable = !!onClick || isLink;
   const nameBlock = React__default.useMemo(() => {
-    if (isEmpty(name)) {
+    if (!name) {
       return null;
     }
     let NameComponent = 'span';
@@ -13931,15 +13906,11 @@ const UserBlock = forwardRef((props, ref) => {
         color: ColorPalette.dark
       });
     }
-    // Disable avatar focus since the name block is the same link / same button.
-    if (avatarProps) {
-      set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
-    }
     return /*#__PURE__*/jsx(NameComponent, {
       ...nProps,
       children: name
     });
-  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
+  }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
   const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
   const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
     className: `${CLASSNAME}__fields`,
@@ -13968,7 +13939,12 @@ const UserBlock = forwardRef((props, ref) => {
       className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
       size: componentSize,
       onClick: onClick,
-      theme: theme
+      theme: theme,
+      thumbnailProps: {
+        ...avatarProps?.thumbnailProps,
+        // Disable avatar focus since the name block is the same link / same button.
+        tabIndex: avatarProps ? -1 : undefined
+      }
     }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
       className: `${CLASSNAME}__wrapper`,
       children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]