@lumx/react 3.3.2-alpha-thumbnail-aspect-ratio.7 → 3.3.2-alpha.0

package/index.d.ts

@@ -2779,6 +2779,12 @@ declare type UploaderVariant = ValueOf<typeof UploaderVariant>;
  * Uploader sizes.
  */
 declare type UploaderSize = Extract<Size, 'xl' | 'xxl'>;
+/**
+ * Extend native HTML input props with specialized `onChange` providing the a `File` array.
+ */
+interface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {
+    onChange(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;
+}
 /**
  * Defines the props of the component.
  */
@@ -2794,7 +2800,9 @@ interface UploaderProps extends GenericProps, HasTheme {
     /** Variant. */
     variant?: UploaderVariant;
     /** On click callback. */
-    onClick?: MouseEventHandler<HTMLDivElement>;
+    onClick?: MouseEventHandler;
+    /** Handle file selection with a native input file. */
+    fileInputProps?: FileInputProps;
 }
 /**
  * Uploader component.
@@ -2803,7 +2811,7 @@ interface UploaderProps extends GenericProps, HasTheme {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Uploader: Comp<UploaderProps, HTMLDivElement>;
+declare const Uploader: Comp<UploaderProps>;
 
 /**
  * User block sizes.

package/index.js

@@ -9872,7 +9872,26 @@ const SideNavigation = /*#__PURE__*/forwardRef((props, ref) => {
 SideNavigation.displayName = COMPONENT_NAME$Z;
 SideNavigation.className = CLASSNAME$W;
 
-const _excluded$10 = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
+const _excluded$10 = ["linkAs", "href"];
+/**
+ * Render <button> HTML component, fallbacks to `<a>` when a `href` is provided or a custom component with `linkAs`.
+ */
+const renderButtonOrLink = function (props) {
+  const {
+      linkAs,
+      href
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$10);
+  for (var _len = arguments.length, children = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    children[_key - 1] = arguments[_key];
+  }
+  if (linkAs || href) return renderLink(props, ...children);
+  return /*#__PURE__*/React.createElement('button', _objectSpread2({
+    type: 'button'
+  }, forwardedProps), ...children);
+};
+
+const _excluded$11 = ["children", "className", "emphasis", "icon", "isOpen", "isSelected", "label", "linkAs", "linkProps", "onActionClick", "onClick", "toggleButtonProps", "closeMode"];
 
 /**
  * Defines the props of the component.
@@ -9919,11 +9938,18 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
       toggleButtonProps,
       closeMode = 'unmount'
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$10);
+    forwardedProps = _objectWithoutProperties(props, _excluded$11);
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
   const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
+  const contentId = React.useMemo(uid, []);
+  const ariaProps = {};
+  if (hasContent) {
+    ariaProps['aria-expanded'] = !!showChildren;
+    // Associate with content ID only if in DOM (shown or hidden and not unmounted)
+    ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;
+  }
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: ref
   }, forwardedProps, {
@@ -9951,14 +9977,13 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
     size: Size.m,
     emphasis: Emphasis.low,
     onClick: onActionClick
-  }))) : renderLink(_objectSpread2(_objectSpread2({
+  }, ariaProps))) : renderButtonOrLink(_objectSpread2(_objectSpread2({
     linkAs
   }, linkProps), {}, {
     className: `${CLASSNAME$X}__link`,
     tabIndex: 0,
-    onClick,
-    onKeyDown: onClick ? onEnterPressed(onClick) : undefined
-  }), icon && /*#__PURE__*/React.createElement(Icon, {
+    onClick
+  }, ariaProps), icon && /*#__PURE__*/React.createElement(Icon, {
     className: `${CLASSNAME$X}__icon`,
     icon: icon,
     size: Size.xs
@@ -9967,14 +9992,15 @@ const SideNavigationItem = /*#__PURE__*/forwardRef((props, ref) => {
     icon: isOpen ? mdiChevronUp : mdiChevronDown,
     size: Size.xs
   })), (closeMode === 'hide' || showChildren) && /*#__PURE__*/React.createElement("ul", {
-    className: `${CLASSNAME$X}__children`
+    className: `${CLASSNAME$X}__children`,
+    id: contentId
   }, content));
 });
 SideNavigationItem.displayName = COMPONENT_NAME$_;
 SideNavigationItem.className = CLASSNAME$X;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$K;
 
-const _excluded$11 = ["className", "size", "color", "theme"];
+const _excluded$12 = ["className", "size", "color", "theme"];
 
 /**
  * Defines the props of the component.
@@ -10008,7 +10034,7 @@ const SkeletonCircle = /*#__PURE__*/forwardRef((props, ref) => {
       color,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$11);
+    forwardedProps = _objectWithoutProperties(props, _excluded$12);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10024,7 +10050,7 @@ SkeletonCircle.displayName = COMPONENT_NAME$$;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$L;
 SkeletonCircle.className = CLASSNAME$Y;
 
-const _excluded$12 = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
+const _excluded$13 = ["aspectRatio", "className", "height", "theme", "variant", "width", "color"];
 
 /**
  * Skeleton variants.
@@ -10071,7 +10097,7 @@ const SkeletonRectangle = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$12);
+    forwardedProps = _objectWithoutProperties(props, _excluded$13);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10092,7 +10118,7 @@ SkeletonRectangle.displayName = COMPONENT_NAME$10;
 SkeletonRectangle.className = CLASSNAME$Z;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$M;
 
-const _excluded$13 = ["className", "theme", "typography", "width", "color"];
+const _excluded$14 = ["className", "theme", "typography", "width", "color"];
 
 /**
  * Defines the props of the component.
@@ -10127,7 +10153,7 @@ const SkeletonTypography = /*#__PURE__*/forwardRef((props, ref) => {
       width,
       color
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$13);
+    forwardedProps = _objectWithoutProperties(props, _excluded$14);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -10182,7 +10208,7 @@ const clamp = (value, min, max) => {
   return value;
 };
 
-const _excluded$14 = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
+const _excluded$15 = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
 
 /**
  * Defines the props of the component.
@@ -10257,7 +10283,7 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
       theme,
       value
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$14);
+    forwardedProps = _objectWithoutProperties(props, _excluded$15);
   const sliderId = useMemo(() => id || `slider-${uid()}`, [id]);
   const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
   const sliderRef = useRef(null);
@@ -10738,7 +10764,7 @@ const useSlideFocusManagement = _ref => {
   }, [isSlideDisplayed, slideRef]);
 };
 
-const _excluded$15 = ["className", "children", "role", "label", "isDisplayed"];
+const _excluded$16 = ["className", "children", "role", "label", "isDisplayed"];
 
 /**
  * Defines the props of the component.
@@ -10770,7 +10796,7 @@ const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
       label,
       isDisplayed
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$15);
+    forwardedProps = _objectWithoutProperties(props, _excluded$16);
   const groupRef = React.useRef(null);
   useSlideFocusManagement({
     isSlideDisplayed: isDisplayed,
@@ -10789,7 +10815,7 @@ const SlideshowItemGroup = /*#__PURE__*/forwardRef((props, ref) => {
 SlideshowItemGroup.displayName = COMPONENT_NAME$13;
 SlideshowItemGroup.className = CLASSNAME$10;
 
-const _excluded$16 = ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"];
+const _excluded$17 = ["activeIndex", "autoPlay", "children", "className", "fillHeight", "groupBy", "interval", "onChange", "slideshowControlsProps", "theme", "id", "slidesId", "slideGroupLabel"];
 
 /**
  * Defines the props of the component.
@@ -10825,7 +10851,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
       slidesId,
       slideGroupLabel
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$16);
+    forwardedProps = _objectWithoutProperties(props, _excluded$17);
   // Number of slideshow items.
   const itemsCount = React.Children.count(children);
   const {
@@ -10907,7 +10933,7 @@ const Slideshow = /*#__PURE__*/forwardRef((props, ref) => {
 Slideshow.displayName = 'Slideshow';
 Slideshow.defaultProps = DEFAULT_PROPS$P;
 
-const _excluded$17 = ["className", "children"];
+const _excluded$18 = ["className", "children"];
 
 /**
  * Defines the props of the component.
@@ -10935,7 +10961,7 @@ const SlideshowItem = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$17);
+    forwardedProps = _objectWithoutProperties(props, _excluded$18);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
     className: classnames(className, handleBasicClasses({
@@ -11003,7 +11029,7 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
   }, [activeIndex, slideCount]);
 }
 
-const _excluded$18 = ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"],
+const _excluded$19 = ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"],
   _excluded2$2 = ["className", "label"];
 
 /**
@@ -11053,7 +11079,7 @@ const InternalSlideshowControls = /*#__PURE__*/forwardRef((props, ref) => {
       paginationItemLabel,
       paginationItemProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$18);
+    forwardedProps = _objectWithoutProperties(props, _excluded$19);
   let parent;
   if (WINDOW) {
     // Checking window object to avoid errors in SSR.
@@ -11155,7 +11181,7 @@ const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS$1
 });
 
-const _excluded$19 = ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"];
+const _excluded$1a = ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"];
 /**
  * Component display name.
  */
@@ -11189,7 +11215,7 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
       hasControls,
       slideGroupLabel
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$19);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
   const wrapperRef = React.useRef(null);
   const startIndexVisible = activeIndex;
   const endIndexVisible = startIndexVisible + 1;
@@ -11235,7 +11261,7 @@ const Slides = /*#__PURE__*/forwardRef((props, ref) => {
 Slides.displayName = COMPONENT_NAME$16;
 Slides.className = CLASSNAME$13;
 
-const _excluded$1a = ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"];
+const _excluded$1b = ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -11283,7 +11309,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       inputProps = {}
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1a);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
   const inputId = useMemo(() => id || `switch-${uid()}`, [id]);
   const handleChange = event => {
     if (onChange) {
@@ -11338,7 +11364,7 @@ Switch.displayName = COMPONENT_NAME$17;
 Switch.className = CLASSNAME$14;
 Switch.defaultProps = DEFAULT_PROPS$R;
 
-const _excluded$1b = ["children", "className", "hasBefore", "hasDividers", "theme"];
+const _excluded$1c = ["children", "className", "hasBefore", "hasDividers", "theme"];
 
 /**
  * Defines the props of the component.
@@ -11376,7 +11402,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
       hasDividers,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1b);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
   return /*#__PURE__*/React.createElement("table", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11392,7 +11418,7 @@ Table.displayName = COMPONENT_NAME$18;
 Table.className = CLASSNAME$15;
 Table.defaultProps = DEFAULT_PROPS$S;
 
-const _excluded$1c = ["children", "className"];
+const _excluded$1d = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -11420,7 +11446,7 @@ const TableBody = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
   return /*#__PURE__*/React.createElement("tbody", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11432,7 +11458,7 @@ const TableBody = /*#__PURE__*/forwardRef((props, ref) => {
 TableBody.displayName = COMPONENT_NAME$19;
 TableBody.className = CLASSNAME$16;
 
-const _excluded$1d = ["children", "className", "icon", "isSortable", "onHeaderClick", "sortOrder", "variant"];
+const _excluded$1e = ["children", "className", "icon", "isSortable", "onHeaderClick", "sortOrder", "variant"];
 
 /**
  * Table head cell sort order.
@@ -11487,7 +11513,7 @@ const TableCell = /*#__PURE__*/forwardRef((props, ref) => {
       sortOrder,
       variant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1d);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
 
   // Use button if clickable
   const Wrapper = onHeaderClick ? 'button' : 'div';
@@ -11540,7 +11566,7 @@ TableCell.displayName = COMPONENT_NAME$1a;
 TableCell.className = CLASSNAME$17;
 TableCell.defaultProps = DEFAULT_PROPS$T;
 
-const _excluded$1e = ["children", "className"];
+const _excluded$1f = ["children", "className"];
 
 /**
  * Defines the props of the component.
@@ -11573,7 +11599,7 @@ const TableHeader = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1e);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
   return /*#__PURE__*/React.createElement("thead", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11586,7 +11612,7 @@ TableHeader.displayName = COMPONENT_NAME$1b;
 TableHeader.className = CLASSNAME$18;
 TableHeader.defaultProps = DEFAULT_PROPS$U;
 
-const _excluded$1f = ["children", "className", "disabled", "isClickable", "isDisabled", "isSelected"];
+const _excluded$1g = ["children", "className", "disabled", "isClickable", "isDisabled", "isSelected"];
 
 /**
  * Defines the props of the component.
@@ -11623,7 +11649,7 @@ const TableRow = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled = disabled,
       isSelected
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1f);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
   return /*#__PURE__*/React.createElement("tr", _extends({
     ref: ref,
     tabIndex: isClickable && !isDisabled ? 0 : -1
@@ -11641,7 +11667,7 @@ TableRow.displayName = COMPONENT_NAME$1c;
 TableRow.className = CLASSNAME$19;
 TableRow.defaultProps = DEFAULT_PROPS$V;
 
-const _excluded$1g = ["children", "onChange"];
+const _excluded$1h = ["children", "onChange"];
 const DEFAULT_PROPS$W = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
@@ -11661,7 +11687,7 @@ const TabProvider = props => {
       children,
       onChange
     } = props,
-    propState = _objectWithoutProperties(props, _excluded$1g);
+    propState = _objectWithoutProperties(props, _excluded$1h);
   const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
   // On prop state change => dispatch update.
@@ -11689,7 +11715,7 @@ const TabProvider = props => {
 };
 TabProvider.defaultProps = DEFAULT_PROPS$W;
 
-const _excluded$1h = ["aria-label", "children", "className", "layout", "position", "theme"];
+const _excluded$1i = ["aria-label", "children", "className", "layout", "position", "theme"];
 let TabListLayout;
 
 /**
@@ -11736,7 +11762,7 @@ const TabList = /*#__PURE__*/forwardRef((props, ref) => {
       position,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
   const tabListRef = React.useRef(null);
   useRovingTabIndex({
     parentRef: tabListRef,
@@ -11763,7 +11789,7 @@ TabList.displayName = COMPONENT_NAME$1d;
 TabList.className = CLASSNAME$1a;
 TabList.defaultProps = DEFAULT_PROPS$X;
 
-const _excluded$1i = ["className", "disabled", "icon", "id", "isActive", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$1j = ["className", "disabled", "icon", "id", "isActive", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -11806,7 +11832,7 @@ const Tab = /*#__PURE__*/forwardRef((props, ref) => {
       onKeyPress,
       tabIndex = -1
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
@@ -11855,7 +11881,7 @@ Tab.displayName = COMPONENT_NAME$1e;
 Tab.className = CLASSNAME$1b;
 Tab.defaultProps = DEFAULT_PROPS$Y;
 
-const _excluded$1j = ["children", "id", "className", "isActive"];
+const _excluded$1k = ["children", "id", "className", "isActive"];
 
 /**
  * Defines the props of the component.
@@ -11892,7 +11918,7 @@ const TabPanel = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       isActive: propIsActive
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   const state = useTabProviderContext('tabPanel', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -11912,7 +11938,7 @@ TabPanel.displayName = COMPONENT_NAME$1f;
 TabPanel.className = CLASSNAME$1c;
 TabPanel.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1k = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
+const _excluded$1l = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
   _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
 
 /**
@@ -11997,7 +12023,7 @@ const renderInputNative = props => {
       hasError,
       describedById
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const ref = useRef(null);
 
@@ -12062,7 +12088,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       helper,
       icon,
       id,
-      inputRef,
+      inputRef: inputRefProps,
       isDisabled = disabled,
       isRequired,
       isValid,
@@ -12084,6 +12110,10 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2$3);
   const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+  /** Keep a clean local input ref to manage focus */
+  const localInputRef = useRef(null);
+  /** Merge prop input ref and local input ref */
+  const inputRef = mergeRefs(localInputRef, inputRefProps);
   /**
    * Generate unique ids for both the helper and error texts, in order to
    * later on add them to the input native as aria-describedby. If both the error and the helper are present,
@@ -12116,7 +12146,9 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     if (onClear) {
       onClear(evt);
     }
-    const inputElement = inputRef;
+
+    /** Use local inputRef in case the prop input ref is a `mergeRefs` function. */
+    const inputElement = localInputRef;
     if (inputElement && inputElement.current) {
       inputElement.current.focus();
     }
@@ -12373,7 +12405,7 @@ const useFocusPointStyle = (_ref2, element, isLoaded) => {
   return style;
 };
 
-const _excluded$1l = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
+const _excluded$1m = ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs"];
 
 /**
  * Defines the props of the component.
@@ -12429,7 +12461,7 @@ const Thumbnail = /*#__PURE__*/forwardRef((props, ref) => {
       linkProps,
       linkAs
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
   const [imgElement, setImgElement] = useState();
 
   // Image loading state.
@@ -12535,7 +12567,7 @@ const ThumbnailVariant = {
   rounded: 'rounded'
 };
 
-const _excluded$1m = ["after", "before", "className", "label"];
+const _excluded$1n = ["after", "before", "className", "label"];
 
 /**
  * Defines the props of the component.
@@ -12570,7 +12602,7 @@ const Toolbar = /*#__PURE__*/forwardRef((props, ref) => {
       className,
       label
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, forwardedProps, {
@@ -12726,7 +12758,7 @@ function useTooltipOpen(delay, anchorElement) {
   return isOpen;
 }
 
-const _excluded$1n = ["label", "children", "className", "delay", "placement", "forceOpen"];
+const _excluded$1o = ["label", "children", "className", "delay", "placement", "forceOpen"];
 
 /** Position of the tooltip relative to the anchor element. */
 
@@ -12773,7 +12805,7 @@ const Tooltip = /*#__PURE__*/forwardRef((props, ref) => {
       placement,
       forceOpen
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
   // Disable in SSR or without a label.
   if (!DOCUMENT || !label) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
@@ -12819,7 +12851,15 @@ Tooltip.displayName = COMPONENT_NAME$1j;
 Tooltip.className = CLASSNAME$1g;
 Tooltip.defaultProps = DEFAULT_PROPS$11;
 
-const _excluded$1o = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant"];
+const useBooleanState = defaultValue => {
+  const [booleanValue, setBoolean] = useState(defaultValue);
+  const setToFalse = useCallback(() => setBoolean(false), []);
+  const setToTrue = useCallback(() => setBoolean(true), []);
+  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
+  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
+};
+
+const _excluded$1p = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps"];
 
 /**
  * Uploader variants.
@@ -12834,6 +12874,10 @@ const UploaderVariant = {
  * Uploader sizes.
  */
 
+/**
+ * Extend native HTML input props with specialized `onChange` providing the a `File` array.
+ */
+
 /**
  * Defines the props of the component.
  */
@@ -12873,39 +12917,70 @@ const Uploader = /*#__PURE__*/forwardRef((props, ref) => {
       icon,
       size,
       theme,
-      variant
+      variant,
+      fileInputProps
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
   // Adjust to square aspect ratio when using circle variants.
   const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  const inputId = React.useMemo(() => (fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id) || uniqueId('uploader-input-'), [fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id]);
+  const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
+  const wrapper = fileInputProps ? {
+    Component: 'label',
+    props: {
+      htmlFor: inputId
+    }
+  } : {
+    Component: 'button',
+    props: {
+      type: 'button'
+    }
+  };
+  const onChange = React.useMemo(() => {
+    if (!(fileInputProps !== null && fileInputProps !== void 0 && fileInputProps.onChange)) return undefined;
+    return evt => {
+      const fileList = evt.target.files;
+      const files = fileList ? Array.from(fileList) : [];
+      fileInputProps.onChange(files, evt);
+    };
+  }, [fileInputProps]);
+  return /*#__PURE__*/React.createElement(wrapper.Component, _extends({
     ref: ref
-  }, forwardedProps, {
+  }, wrapper.props, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       aspectRatio: adjustedAspectRatio,
       prefix: CLASSNAME$1h,
       size,
       theme,
-      variant
+      variant,
+      isDragHovering
     }))
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1h}__background`
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1h}__wrapper`
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME$1h}__icon`
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    className: `${CLASSNAME$1h}__icon`,
     icon: icon,
     size: Size.s
-  })), label && /*#__PURE__*/React.createElement("span", {
+  }), label && /*#__PURE__*/React.createElement("span", {
     className: `${CLASSNAME$1h}__label`
-  }, label)));
+  }, label)), fileInputProps && /*#__PURE__*/React.createElement("input", _extends({
+    type: "file",
+    id: inputId,
+    className: `${CLASSNAME$1h}__input`
+  }, fileInputProps, {
+    onChange: onChange,
+    onDragEnter: setDragHovering,
+    onDragLeave: unsetDragHovering,
+    onDrop: unsetDragHovering
+  })));
 });
 Uploader.displayName = COMPONENT_NAME$1k;
 Uploader.className = CLASSNAME$1h;
 Uploader.defaultProps = DEFAULT_PROPS$12;
 
-const _excluded$1p = ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"];
+const _excluded$1q = ["avatarProps", "className", "fields", "linkProps", "linkAs", "multipleActions", "name", "nameProps", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"];
 
 /**
  * User block sizes.
@@ -12959,7 +13034,7 @@ const UserBlock = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       theme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
   let componentSize = size;
 
   // Special case - When using vertical orientation force the size to be Sizes.l.