@lumx/react 3.18.2-alpha.2 → 3.18.2-alpha.4

package/index.d.ts

@@ -3328,11 +3328,13 @@ interface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'>
 /**
  * Defines the props of the component.
  */
-interface UploaderProps extends GenericProps, HasTheme {
+interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {
     /** Image aspect ratio. */
     aspectRatio?: AspectRatio;
     /** Icon (SVG path). */
     icon?: string;
+    /** Disabled state */
+    isDisabled?: boolean;
     /** Label text. */
     label?: string;
     /** Size variant. */

package/index.js

@@ -1389,6 +1389,7 @@ const ButtonRoot = forwardRef((props, ref) => {
     }), children);
   }
   return /*#__PURE__*/React__default.createElement("button", _extends({}, forwardedProps, disabledStateProps, {
+    "aria-disabled": isAnyDisabled,
     "aria-label": ariaLabel,
     ref: ref,
     className: buttonClassName,
@@ -13651,6 +13652,10 @@ const DEFAULT_PROPS$4 = {
  */
 const Thumbnail = forwardRef((props, ref) => {
   var _loadingPlaceholderIm;
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
       align,
@@ -13676,8 +13681,8 @@ const Thumbnail = forwardRef((props, ref) => {
       variant,
       linkProps,
       linkAs
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$4);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$4);
   const [imgElement, setImgElement] = useState();
 
   // Image loading state.
@@ -13700,13 +13705,13 @@ const Thumbnail = forwardRef((props, ref) => {
   }
   const isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
   const isButton = !!forwardedProps.onClick;
-  const isClickable = isButton || isLink;
+  const isClickable = !isAnyDisabled && (isButton || isLink);
   let Wrapper = 'div';
   const wrapperProps = _objectSpread2({}, forwardedProps);
-  if (isLink) {
+  if (!isAnyDisabled && isLink) {
     Wrapper = linkAs || 'a';
     Object.assign(wrapperProps, linkProps);
-  } else if (isButton) {
+  } else if (!isAnyDisabled && isButton) {
     Wrapper = 'button';
     wrapperProps.type = forwardedProps.type || 'button';
     wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
@@ -14172,7 +14177,7 @@ Tooltip.displayName = COMPONENT_NAME$2;
 Tooltip.className = CLASSNAME$2;
 Tooltip.defaultProps = DEFAULT_PROPS$2;
 
-const _excluded$1 = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps"];
+const _excluded$1 = ["aspectRatio", "className", "label", "icon", "size", "theme", "variant", "fileInputProps", "onClick"];
 
 /**
  * Uploader variants.
@@ -14222,6 +14227,11 @@ const DEFAULT_PROPS$1 = {
  * @return React element.
  */
 const Uploader = forwardRef((props, ref) => {
+  const {
+    disabledStateProps,
+    otherProps,
+    isAnyDisabled
+  } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
       aspectRatio = DEFAULT_PROPS$1.aspectRatio,
@@ -14231,11 +14241,19 @@ const Uploader = forwardRef((props, ref) => {
       size = DEFAULT_PROPS$1.size,
       theme = defaultTheme,
       variant = DEFAULT_PROPS$1.variant,
-      fileInputProps
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+      fileInputProps,
+      onClick
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1);
   // Adjust to square aspect ratio when using circle variants.
   const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
+  const handleClick = React__default.useCallback(evt => {
+    if (isAnyDisabled) {
+      evt.preventDefault();
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick(evt);
+    }
+  }, [isAnyDisabled, onClick]);
   const generatedInputId = useId();
   const inputId = (fileInputProps === null || fileInputProps === void 0 ? void 0 : fileInputProps.id) || generatedInputId;
   const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
@@ -14246,28 +14264,30 @@ const Uploader = forwardRef((props, ref) => {
     }
   } : {
     Component: 'button',
-    props: {
+    props: _objectSpread2({
       type: 'button'
-    }
+    }, disabledStateProps)
   };
   const onChange = React__default.useMemo(() => {
-    if (!(fileInputProps !== null && fileInputProps !== void 0 && fileInputProps.onChange)) return undefined;
+    if (isAnyDisabled || !(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]);
+  }, [isAnyDisabled, fileInputProps]);
   return /*#__PURE__*/React__default.createElement(wrapper.Component, _extends({
     ref: ref
   }, wrapper.props, forwardedProps, {
+    onClick: handleClick,
     className: classNames(className, handleBasicClasses({
       aspectRatio: adjustedAspectRatio,
       prefix: CLASSNAME$1,
       size,
       theme,
       variant,
-      isDragHovering
+      isDragHovering,
+      isDisabled: isAnyDisabled
     }))
   }), /*#__PURE__*/React__default.createElement("span", {
     className: `${CLASSNAME$1}__background`
@@ -14282,8 +14302,9 @@ const Uploader = forwardRef((props, ref) => {
   }, label)), fileInputProps && /*#__PURE__*/React__default.createElement("input", _extends({
     type: "file",
     id: inputId,
-    className: `${CLASSNAME$1}__input`
-  }, fileInputProps, {
+    className: `${CLASSNAME$1}__input ${VISUALLY_HIDDEN}`
+  }, disabledStateProps, fileInputProps, {
+    readOnly: isAnyDisabled,
     onChange: onChange,
     onDragEnter: setDragHovering,
     onDragLeave: unsetDragHovering,