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

package/index.js

@@ -1,22 +1,34 @@
-import { Kind, ColorPalette, Size, Emphasis, Theme, AspectRatio, CSS_PREFIX, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, CSS_PREFIX, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, isValidElement, cloneElement, useLayoutEffect, createContext, useContext, useReducer } from 'react';
 import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses, getBasicClass, getTypographyClassName, fontColorClass, resolveColorWithVariants } from '@lumx/core/js/utils/className';
+import { handleBasicClasses, getRootClassName, 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 '@lumx/core/js/utils/collection/last';
-import { partitionMulti } from '@lumx/core/js/utils/collection/partitionMulti';
-import { useDisabledStateContext, Portal, ClickAwayProvider } from './utils/index.js';
+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 { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/Portal.js';
+import isEmpty from 'lodash/isEmpty';
 import memoize from 'lodash/memoize';
-import { castArray } from '@lumx/core/js/utils/collection/castArray';
-import { isEmpty } from '@lumx/core/js/utils/collection/isEmpty';
+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 throttle from 'lodash/throttle';
-import { range } from '@lumx/core/js/utils/collection/range';
-import { chunk } from '@lumx/core/js/utils/collection/chunk';
+import range from 'lodash/range';
+import chunk from 'lodash/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';
 
@@ -710,7 +722,7 @@ BadgeWrapper.displayName = 'BadgeWrapper';
 BadgeWrapper.className = CLASSNAME$1f;
 
 /**
- * Properties of a component to use to determine its name.
+ * Properties of a component to use to determine it's name.
  * In the order of preference.
  */
 const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'type.name', 'props.mdxType', '_reactInternalFiber.elementType.name'];
@@ -722,7 +734,7 @@ const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'typ
  */
 const isComponent = component => instance => {
   const componentName = typeof component === 'string' ? component : component.displayName;
-  return !!instance.$$typeof && NAME_PROPERTIES.some(nameProperty => instance[nameProperty] === componentName);
+  return !!get(instance, '$$typeof') && NAME_PROPERTIES.some(nameProperty => get(instance, nameProperty) === componentName);
 };
 
 /**
@@ -950,11 +962,11 @@ const Button = forwardRef((props, ref) => {
   const buttonClassName = classNames(className, getBasicClass({
     prefix: CLASSNAME$1e,
     type: 'hasLeftIcon',
-    value: !!leftIcon
+    value: !isEmpty(leftIcon)
   }), getBasicClass({
     prefix: CLASSNAME$1e,
     type: 'hasRightIcon',
-    value: !!rightIcon
+    value: !isEmpty(rightIcon)
   }));
   return /*#__PURE__*/jsxs(ButtonRoot, {
     ref: ref,
@@ -964,7 +976,7 @@ const Button = forwardRef((props, ref) => {
     ...forwardedProps,
     className: buttonClassName,
     variant: "button",
-    children: [leftIcon &&
+    children: [leftIcon && !isEmpty(leftIcon) &&
     /*#__PURE__*/
     // Theme is handled in the button scss
     jsx(ThemeProvider, {
@@ -974,7 +986,7 @@ const Button = forwardRef((props, ref) => {
       })
     }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/jsx("span", {
       children: children
-    })), rightIcon &&
+    })), rightIcon && !isEmpty(rightIcon) &&
     /*#__PURE__*/
     // Theme is handled in the button scss
     jsx(ThemeProvider, {
@@ -1226,7 +1238,7 @@ Checkbox.defaultProps = DEFAULT_PROPS$X;
  */
 function useStopPropagation(handler) {
   return useCallback(evt => {
-    if (!evt || !handler) {
+    if (!evt || !isFunction(handler)) {
       return;
     }
     handler(evt);
@@ -1283,7 +1295,9 @@ const Chip = forwardRef((props, ref) => {
     onKeyDown,
     ...forwardedProps
   } = otherProps;
-  const hasOnClick = Boolean(props.onClick);
+  const hasAfterClick = isFunction(onAfterClick);
+  const hasBeforeClick = isFunction(onBeforeClick);
+  const hasOnClick = isFunction(props.onClick);
   const isButton = hasOnClick && !href;
   const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
@@ -1293,7 +1307,7 @@ const Chip = forwardRef((props, ref) => {
   const handleOnAfterClick = useStopPropagation(onAfterClick);
   const handleKeyDown = evt => {
     onKeyDown?.(evt);
-    if (onClick) {
+    if (hasOnClick) {
       onEnterPressed(onClick)(evt);
     }
   };
@@ -1319,14 +1333,14 @@ const Chip = forwardRef((props, ref) => {
         unselected: Boolean(!isSelected)
       })),
       "aria-disabled": isClickable && isAnyDisabled || undefined,
-      onClick: onClick || undefined,
+      onClick: hasOnClick ? 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`]: !!onBeforeClick
+          [`${CLASSNAME$1a}__before--is-clickable`]: hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
@@ -1338,7 +1352,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`]: !!onAfterClick
+          [`${CLASSNAME$1a}__after--is-clickable`]: hasAfterClick
         }),
         onClick: handleOnAfterClick,
         children: after
@@ -1727,7 +1741,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 = {};
@@ -2031,7 +2045,7 @@ const DatePicker = forwardRef((props, ref) => {
   }
   const [selectedMonth, setSelectedMonth] = useState(referenceDate);
   const setPrevMonth = () => setSelectedMonth(current => addMonthResetDay(current, -1));
-  const setNextMonth = () => setSelectedMonth(current => addMonthResetDay(current, +1));
+  const setNextMonth = () => setSelectedMonth(current => addMonthResetDay(current, 1));
   const onDatePickerChange = newDate => {
     onChange(newDate);
   };
@@ -2173,10 +2187,7 @@ function makeListenerTowerContext() {
       // Disable current listener.
       listener.disable();
       // Remove current listener.
-      const index = LISTENERS.indexOf(listener);
-      if (index > -1) {
-        LISTENERS.splice(index, 1);
-      }
+      pull(LISTENERS, listener);
       // Enable previous listener.
       last(LISTENERS)?.enable();
     }
@@ -2357,6 +2368,23 @@ 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.
@@ -2418,7 +2446,7 @@ var preventDefault = function preventDefault(rawEvent) {
 var setOverflowHidden = function setOverflowHidden(options) {
   // If previousBodyPaddingRight is already set, don't set it again.
   if (previousBodyPaddingRight === undefined) {
-    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+    var _reserveScrollBarGap = false;
     var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
 
     if (_reserveScrollBarGap && scrollBarGap > 0) {
@@ -2495,7 +2523,7 @@ var disableBodyScroll = function disableBodyScroll(targetElement, options) {
 
   var lock = {
     targetElement: targetElement,
-    options: options || {}
+    options: {}
   };
 
   locks = [].concat(_toConsumableArray(locks), [lock]);
@@ -2519,7 +2547,7 @@ var disableBodyScroll = function disableBodyScroll(targetElement, options) {
       documentListenerAdded = true;
     }
   } else {
-    setOverflowHidden(options);
+    setOverflowHidden();
   }
 };
 
@@ -2982,7 +3010,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
       onListItemSelected(selectedItem);
       resetActiveIndex();
     } else if (activeItemIndex === initialIndex && onEnterPressed) {
-      const value = evt.target?.value;
+      const value = get(evt, 'target.value');
       onEnterPressed(value);
       resetActiveIndex();
     }
@@ -2993,7 +3021,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
    * @param evt - key pressed event
    */
   const onTabKeyPressed = evt => {
-    const value = evt.target?.value;
+    const value = get(evt, 'target.value');
     if (preventTabOnEnteredValue && value && value.length > 0) {
       preventDefaultAndStopPropagation(evt);
     }
@@ -3089,7 +3117,7 @@ function isClickable({
   linkProps,
   onItemSelected
 }) {
-  return !!linkProps?.href || !!onItemSelected;
+  return !isEmpty(linkProps?.href) || !!onItemSelected;
 }
 
 /**
@@ -3202,9 +3230,9 @@ function requireReactIs_production_min () {
 	hasRequiredReactIs_production_min = 1;
 var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
 	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q;reactIs_production_min.Memo=p;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m;
-	reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return !1};reactIs_production_min.isConcurrentMode=function(){return !1};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
+	reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return  false};reactIs_production_min.isConcurrentMode=function(){return  false};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
 	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m};reactIs_production_min.isSuspenseList=function(a){return v(a)===n};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?!0:!1};reactIs_production_min.typeOf=v;
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?true:false};reactIs_production_min.typeOf=v;
 	return reactIs_production_min;
 }
 
@@ -3468,7 +3496,7 @@ var reactIsExports = requireReactIs();
 function flattenChildren(children) {
   function recur(nodes, keys = []) {
     return Children.toArray(nodes).reduce((acc, node, index) => {
-      const nodeKeys = keys.concat(node?.key ?? index);
+      const nodeKeys = keys.concat(get(node, 'key') ?? index);
       if (reactIsExports.isFragment(node)) {
         acc.push(...recur(node.props.children, nodeKeys));
       } else if (/*#__PURE__*/isValidElement(node)) {
@@ -3578,7 +3606,7 @@ const useInteractiveList = options => {
       setActiveItemIndex(nextIndex);
       evt.preventDefault();
       evt.stopPropagation();
-      onListItemNavigated?.(nextIndex, items[nextIndex]?.key);
+      onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
     };
 
     /**
@@ -4673,7 +4701,6 @@ function detectOverflow(state, options) {
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
     element: popperRect,
-    strategy: 'absolute',
     placement: placement
   });
   var popperClientRect = rectToClientRect(Object.assign(Object.assign({}, popperRect), popperOffsets));
@@ -5009,7 +5036,6 @@ function popperOffsets(_ref) {
   state.modifiersData[name] = computeOffsets({
     reference: state.rects.reference,
     element: state.rects.popper,
-    strategy: 'absolute',
     placement: state.placement
   });
 } // eslint-disable-next-line import/no-unused-modules
@@ -5920,10 +5946,7 @@ const Placement = {
  * Popover fit anchor width options.
  */
 const FitAnchorWidth = {
-  MAX_WIDTH: 'maxWidth',
-  MIN_WIDTH: 'minWidth',
-  WIDTH: 'width'
-};
+  MIN_WIDTH: 'minWidth'};
 /**
  * Arrow size (in pixel).
  */
@@ -6445,7 +6468,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 = React__default.Children.count(headerProps.children) > 0 ? headerProps.children : /*#__PURE__*/jsx("span", {
+  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
     className: `${CLASSNAME$$}__label`,
     children: label
   });
@@ -6464,7 +6487,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
   const rootClassName = classNames(className, handleBasicClasses({
     hasBackground,
-    hasHeader: !isEmpty(headerProps.children),
+    hasHeader: Boolean(!isEmpty(headerProps.children)),
     hasHeaderDivider,
     isClose: !isOpen,
     isDraggable: Boolean(dragHandle),
@@ -6659,11 +6682,11 @@ const DEFAULT_PROPS$L = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
-const Figure = () => {};
+const Figure = noop.bind({});
 const isFigure = isComponentType(Figure);
-const Content = () => {};
+const Content = noop.bind({});
 const isContent = isComponentType(Content);
-const Actions = () => {};
+const Actions = noop.bind({});
 const isActions = isComponentType(Actions);
 
 /**
@@ -6700,7 +6723,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       contentChildProps: contentChild?.props,
       actionsChild,
       actionsChildProps: actionsChild?.props,
-      otherChildren: otherChildren.filter(child => React__default.Children.count(child) > 0)
+      otherChildren: otherChildren.filter(child => !isEmpty(child))
     };
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, {
@@ -6750,13 +6773,7 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
 /**
  * Accepted gap sizes for the generic block.
  */
-const GenericBlockGapSize = {
-  tiny: Size.tiny,
-  regular: Size.regular,
-  medium: Size.medium,
-  big: Size.big,
-  huge: Size.huge
-};
+const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
 
 const DEFAULT_VALUE = {};
 
@@ -7129,7 +7146,7 @@ const GridColumn = forwardRef((props, ref) => {
     className: classNames(className, CLASSNAME$T),
     style: {
       ...style,
-      ['--lumx-grid-column-item-min-width']: Number.isInteger(itemMinWidth) && `${itemMinWidth}px`,
+      ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
       ['--lumx-grid-column-columns']: maxColumns,
       ['--lumx-grid-column-gap']: gap && `var(--lumx-spacing-unit-${gap})`
     },
@@ -8822,7 +8839,7 @@ const Mosaic = forwardRef((props, ref) => {
     }),
     children: /*#__PURE__*/jsx("div", {
       className: `${CLASSNAME$G}__wrapper`,
-      children: thumbnails.slice(0, 4).map((thumbnail, index) => {
+      children: take(thumbnails, 4).map((thumbnail, index) => {
         const {
           image,
           onClick,
@@ -9138,7 +9155,9 @@ const Notification = forwardRef((props, ref) => {
   const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
   const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
   const handleCallback = evt => {
-    onActionClick?.();
+    if (isFunction(onActionClick)) {
+      onActionClick();
+    }
     evt.stopPropagation();
   };
   if (!type || !isVisible) {
@@ -9287,13 +9306,6 @@ 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({
@@ -9322,9 +9334,15 @@ const PostBlock = forwardRef((props, ref) => {
       }), meta && /*#__PURE__*/jsx("span", {
         className: `${CLASSNAME$A}__meta`,
         children: meta
-      }), /*#__PURE__*/jsx("p", {
+      }), isObject(text) && text.__html ?
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-danger
+      jsx("p", {
+        dangerouslySetInnerHTML: text,
+        className: `${CLASSNAME$A}__text`
+      }) : /*#__PURE__*/jsx("p", {
         className: `${CLASSNAME$A}__text`,
-        ...textContent
+        children: text
       }), attachments && /*#__PURE__*/jsx("div", {
         className: `${CLASSNAME$A}__attachments`,
         children: attachments
@@ -10411,8 +10429,8 @@ const SelectField = props => {
  * @return React element.
  */
 const Select = forwardRef((props, ref) => {
-  const isEmpty = !props.value;
-  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
+  const isEmpty$1 = isEmpty(props.value);
+  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, {
     ...DEFAULT_PROPS$n,
     ...props,
@@ -10422,7 +10440,7 @@ const Select = forwardRef((props, ref) => {
       prefix: CLASSNAME$q
     })),
     hasInputClear,
-    isEmpty
+    isEmpty: isEmpty$1
   }, ref);
 });
 Select.displayName = COMPONENT_NAME$q;
@@ -10654,7 +10672,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
-  const hasContent = Boolean(content);
+  const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
   const contentId = useId();
@@ -11195,7 +11213,9 @@ function useInterval(callback, delay) {
   useEffect(() => {
     if (delay === null) return undefined;
     function tick() {
-      savedCallback.current?.();
+      if (isFunction(savedCallback.current)) {
+        savedCallback.current();
+      }
     }
     const id = setInterval(tick, delay);
     return () => clearInterval(id);
@@ -12071,7 +12091,7 @@ const Switch = forwardRef((props, ref) => {
         theme: theme,
         className: `${CLASSNAME$e}__label`,
         children: children
-      }), helper && /*#__PURE__*/jsx(InputHelper, {
+      }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
         theme: theme,
         className: `${CLASSNAME$e}__helper`,
@@ -12744,7 +12764,7 @@ const renderInputNative = props => {
     setFocus(false);
   };
   const handleChange = event => {
-    onChange(event.target.value, name, event);
+    onChange(get(event, 'target.value'), name, event);
   };
   const Component = multiline ? 'textarea' : 'input';
   const inputProps = {
@@ -13889,7 +13909,7 @@ const UserBlock = forwardRef((props, ref) => {
   const isLink = Boolean(linkProps?.href || linkAs);
   const isClickable = !!onClick || isLink;
   const nameBlock = React__default.useMemo(() => {
-    if (!name) {
+    if (isEmpty(name)) {
       return null;
     }
     let NameComponent = 'span';
@@ -13906,11 +13926,15 @@ 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
     });
-  }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
+  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
   const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
   const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
     className: `${CLASSNAME}__fields`,
@@ -13939,12 +13963,7 @@ const UserBlock = forwardRef((props, ref) => {
       className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
       size: componentSize,
       onClick: onClick,
-      theme: theme,
-      thumbnailProps: {
-        ...avatarProps?.thumbnailProps,
-        // Disable avatar focus since the name block is the same link / same button.
-        tabIndex: avatarProps ? -1 : undefined
-      }
+      theme: theme
     }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
       className: `${CLASSNAME}__wrapper`,
       children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]