@lumx/react 3.18.2-alpha.3 → 3.19.0

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

@@ -7229,26 +7229,28 @@ const useTooltipContext = () => React__default.useContext(TooltipContext);
 
 /**
  * Compute a tooltip label based on a label element `innerText` if the text overflows.
- *
- * Warning: only works on first render, does not update on label element resize.
+ * Updates dynamically on content changes (but not on resize!)
  */
-const useOverflowTooltipLabel = () => {
+const useOverflowTooltipLabel = content => {
   const parentTooltip = useTooltipContext();
   const [tooltipLabel, setTooltipLabel] = React__default.useState(undefined);
-  const labelRef = React__default.useCallback(labelElement => {
-    if (!labelElement || !!parentTooltip) {
-      // Skip if label element is unknown
-      // Skip if the parent has a tooltip
-      return;
-    }
-
-    // Label overflowing
-    if (labelElement.offsetWidth < labelElement.scrollWidth) {
+  const [labelElement, setLabelElement] = React__default.useState(null);
+  React__default.useLayoutEffect(() => {
+    if (
+    // Not inside a tooltip
+    !parentTooltip && labelElement &&
+    // Not inside a visually hidden
+    !(labelElement !== null && labelElement !== void 0 && labelElement.closest(`.${VISUALLY_HIDDEN}`)) &&
+    // Text overflows
+    labelElement.offsetWidth < labelElement.scrollWidth) {
+      // Set tooltip label
       setTooltipLabel(labelElement.innerText);
+    } else {
+      setTooltipLabel(undefined);
     }
-  }, [parentTooltip]);
+  }, [labelElement, parentTooltip, content]);
   return {
-    labelRef,
+    labelRef: setLabelElement,
     tooltipLabel
   };
 };
@@ -7329,7 +7331,7 @@ const Text = forwardRef((props, ref) => {
   const {
     tooltipLabel,
     labelRef
-  } = useOverflowTooltipLabel();
+  } = useOverflowTooltipLabel(children);
   return /*#__PURE__*/React__default.createElement(Component, _extends({
     ref: useMergeRefs(ref, labelRef),
     className: classNames(className, handleBasicClasses({
@@ -9371,7 +9373,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
     tooltipLabel,
     labelRef
-  } = useOverflowTooltipLabel();
+  } = useOverflowTooltipLabel(label);
   const buttonProps = Element === 'button' ? {
     type: 'button'
   } : {};
@@ -14177,7 +14179,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.
@@ -14227,6 +14229,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,
@@ -14236,11 +14243,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);
@@ -14251,28 +14266,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`
@@ -14287,8 +14304,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,