@lumx/react 3.18.1-alpha.0 → 3.18.2-alpha.0

package/index.js

@@ -360,7 +360,7 @@ const mdiRadioboxBlank = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0
 
 const mdiRadioboxMarked = 'M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
 
-const _excluded$1t = ["prefix"];
+const _excluded$1u = ["prefix"];
 
 /**
  * Enhance isEmpty method to also works with numbers.
@@ -417,7 +417,7 @@ function handleBasicClasses(_ref) {
   let {
       prefix
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$1t);
+    props = _objectWithoutProperties(_ref, _excluded$1u);
   const otherClasses = {};
   if (!isEmpty(props)) {
     Object.keys(props).forEach(prop => {
@@ -651,7 +651,7 @@ function useId() {
  */
 const forwardRef = React__default.forwardRef;
 
-const _excluded$1s = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
+const _excluded$1t = ["id", "title", "className", "cancelProps", "confirmProps", "kind", "size", "dialogProps", "children"],
   _excluded2$3 = ["label", "onClick"],
   _excluded3 = ["label", "onClick"];
 /**
@@ -715,7 +715,7 @@ const AlertDialog = forwardRef((props, ref) => {
       dialogProps,
       children
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1s);
+    forwardedProps = _objectWithoutProperties(props, _excluded$1t);
   const cancelButtonRef = React__default.useRef(null);
   const confirmationButtonRef = React__default.useRef(null);
   const {
@@ -842,7 +842,39 @@ function useTheme() {
   return React__default.useContext(ThemeContext);
 }
 
-const _excluded$1r = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "disabled", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
+const _excluded$1s = ["disabled", "isDisabled", "aria-disabled", "onClick", "onChange"];
+/**
+ * Resolve disabled state from props.
+ * (handles `disabled`, `isDisabled` and `aria-disabled`)
+ *
+ * @params component props
+ */
+function useDisableStateProps(props) {
+  const {
+      disabled,
+      isDisabled = disabled,
+      'aria-disabled': ariaDisabled,
+      onClick,
+      onChange
+    } = props,
+    otherProps = _objectWithoutProperties(props, _excluded$1s);
+  const disabledStateProps = {
+    disabled: isDisabled,
+    'aria-disabled': ariaDisabled === true || ariaDisabled === 'true'
+  };
+  const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled;
+  if (!isAnyDisabled) {
+    otherProps.onClick = onClick;
+    otherProps.onChange = onChange;
+  }
+  return {
+    disabledStateProps,
+    otherProps: otherProps,
+    isAnyDisabled
+  };
+}
+
+const _excluded$1r = ["anchorToInput", "children", "chips", "className", "closeOnClick", "closeOnClickAway", "closeOnEscape", "error", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClose", "onFocus", "onInfiniteScroll", "placeholder", "placement", "shouldFocusOnClose", "theme", "value", "textFieldProps", "focusAnchorOnClose"];
 
 /**
  * Defines the props of the component.
@@ -878,6 +910,10 @@ const DEFAULT_PROPS$12 = {
  */
 const Autocomplete = forwardRef((props, ref) => {
   const defaultTheme = useTheme();
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       anchorToInput = DEFAULT_PROPS$12.anchorToInput,
       children,
@@ -886,7 +922,6 @@ const Autocomplete = forwardRef((props, ref) => {
       closeOnClick = DEFAULT_PROPS$12.closeOnClick,
       closeOnClickAway = DEFAULT_PROPS$12.closeOnClickAway,
       closeOnEscape = DEFAULT_PROPS$12.closeOnEscape,
-      disabled,
       error,
       fitToAnchorWidth,
       hasError,
@@ -894,7 +929,6 @@ const Autocomplete = forwardRef((props, ref) => {
       icon,
       inputRef,
       clearButtonProps,
-      isDisabled = disabled,
       isRequired,
       isOpen,
       isValid,
@@ -913,8 +947,8 @@ const Autocomplete = forwardRef((props, ref) => {
       value,
       textFieldProps = {},
       focusAnchorOnClose
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1r);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1r);
   const inputAnchorRef = useRef(null);
   const textFieldRef = useRef(null);
   useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
@@ -929,8 +963,8 @@ const Autocomplete = forwardRef((props, ref) => {
     helper: helper,
     icon: icon,
     inputRef: mergeRefs(inputAnchorRef, inputRef),
-    clearButtonProps: clearButtonProps,
-    isDisabled: isDisabled,
+    clearButtonProps: clearButtonProps
+  }, disabledStateProps, {
     isRequired: isRequired,
     isValid: isValid,
     label: label,
@@ -962,7 +996,7 @@ Autocomplete.displayName = COMPONENT_NAME$1m;
 Autocomplete.className = CLASSNAME$1j;
 Autocomplete.defaultProps = DEFAULT_PROPS$12;
 
-const _excluded$1q = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isDisabled", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
+const _excluded$1q = ["anchorToInput", "children", "chipsAlignment", "className", "closeOnClickAway", "closeOnEscape", "fitToAnchorWidth", "hasError", "helper", "icon", "inputRef", "clearButtonProps", "isRequired", "isOpen", "isValid", "label", "name", "offset", "onBlur", "onChange", "onClear", "onClose", "onFocus", "onInfiniteScroll", "onKeyDown", "placeholder", "placement", "selectedChipRender", "shouldFocusOnClose", "theme", "type", "value", "values"];
 
 /**
  * Defines the props of the component.
@@ -1010,6 +1044,10 @@ const DEFAULT_PROPS$11 = {
  */
 const AutocompleteMultiple = forwardRef((props, ref) => {
   const defaultTheme = useTheme();
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       anchorToInput,
       children,
@@ -1025,7 +1063,6 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
       icon,
       inputRef,
       clearButtonProps,
-      isDisabled,
       isRequired,
       isOpen,
       isValid,
@@ -1047,8 +1084,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
       type,
       value,
       values = DEFAULT_PROPS$11.values
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1q);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1q);
   return /*#__PURE__*/React__default.createElement(Autocomplete, _extends({
     ref: ref
   }, forwardedProps, {
@@ -1065,8 +1102,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     helper: helper,
     icon: icon,
     inputRef: inputRef,
-    chips: values && values.map((chip, index) => selectedChipRender === null || selectedChipRender === void 0 ? void 0 : selectedChipRender(chip, index, onClear)),
-    isDisabled: isDisabled,
+    chips: values && values.map((chip, index) => selectedChipRender === null || selectedChipRender === void 0 ? void 0 : selectedChipRender(chip, index, onClear))
+  }, disabledStateProps, {
     isRequired: isRequired,
     clearButtonProps: clearButtonProps,
     isValid: isValid,
@@ -1307,7 +1344,7 @@ const renderLink = (_ref, ...children) => {
   return /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
 };
 
-const _excluded$1l = ["aria-label", "children", "className", "color", "disabled", "emphasis", "hasBackground", "href", "isDisabled", "aria-disabled", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
+const _excluded$1l = ["aria-label", "children", "className", "color", "emphasis", "hasBackground", "href", "isSelected", "isActive", "isFocused", "isHovered", "linkAs", "name", "size", "target", "theme", "variant", "type", "fullWidth"];
 
 /**
  * Button size definition.
@@ -1356,17 +1393,19 @@ const renderButtonWrapper = props => {
  * @return React element.
  */
 const ButtonRoot = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       'aria-label': ariaLabel,
       children,
       className,
       color,
-      disabled,
       emphasis,
       hasBackground,
       href,
-      isDisabled = disabled,
-      'aria-disabled': ariaDisabled = isDisabled,
       isSelected,
       isActive,
       isFocused,
@@ -1379,8 +1418,8 @@ const ButtonRoot = forwardRef((props, ref) => {
       variant,
       type = 'button',
       fullWidth
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1l);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1l);
   const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
   if (hasBackground) {
     return renderButtonWrapper(_objectSpread2(_objectSpread2({}, props), {}, {
@@ -1393,7 +1432,7 @@ const ButtonRoot = forwardRef((props, ref) => {
     color: adaptedColor,
     emphasis,
     isSelected,
-    isDisabled,
+    isDisabled: isAnyDisabled,
     isActive,
     isFocused,
     isHovered,
@@ -1410,7 +1449,7 @@ const ButtonRoot = forwardRef((props, ref) => {
    *
    * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
    */
-  if ((linkAs || !isEmpty(props.href)) && !isDisabled) {
+  if ((linkAs || !isEmpty(props.href)) && !isAnyDisabled) {
     return renderLink(_objectSpread2(_objectSpread2({
       linkAs
     }, forwardedProps), {}, {
@@ -1421,11 +1460,7 @@ const ButtonRoot = forwardRef((props, ref) => {
       ref: ref
     }), children);
   }
-  return /*#__PURE__*/React__default.createElement("button", _extends({}, forwardedProps, ariaDisabled ? {
-    onClick: undefined
-  } : undefined, {
-    disabled: isDisabled,
-    "aria-disabled": ariaDisabled,
+  return /*#__PURE__*/React__default.createElement("button", _extends({}, forwardedProps, disabledStateProps, {
     "aria-label": ariaLabel,
     ref: ref,
     className: buttonClassName,
@@ -1633,8 +1668,7 @@ ButtonGroup.displayName = COMPONENT_NAME$1e;
 ButtonGroup.className = CLASSNAME$1c;
 ButtonGroup.defaultProps = DEFAULT_PROPS$Y;
 
-const _excluded$1h = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
-
+const _excluded$1h = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
 /**
  * Intermediate state of checkbox.
  */
@@ -1667,24 +1701,27 @@ const DEFAULT_PROPS$X = {};
  * @return React element.
  */
 const Checkbox = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       className,
-      disabled,
       helper,
       id,
       inputRef,
       isChecked = checked,
-      isDisabled = disabled,
       label,
       name,
       onChange,
       theme = defaultTheme,
       value,
       inputProps = {}
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1h);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1h);
   const localInputRef = React__default.useRef(null);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
@@ -1704,7 +1741,7 @@ const Checkbox = forwardRef((props, ref) => {
     className: classNames(className, handleBasicClasses({
       // Whether state is intermediate class name will "-checked"
       isChecked: intermediateState ? true : isChecked,
-      isDisabled,
+      isDisabled: isAnyDisabled,
       isUnchecked: !isChecked,
       prefix: CLASSNAME$1b,
       theme
@@ -1715,15 +1752,15 @@ const Checkbox = forwardRef((props, ref) => {
     ref: useMergeRefs(inputRef, localInputRef),
     type: "checkbox",
     id: inputId,
-    className: `${CLASSNAME$1b}__input-native`,
-    disabled: isDisabled,
-    tabIndex: isDisabled ? -1 : 0,
+    className: `${CLASSNAME$1b}__input-native`
+  }, disabledStateProps, {
     name: name,
     value: value,
     checked: isChecked,
     onChange: handleChange,
     "aria-describedby": helper ? `${inputId}-helper` : undefined,
-    "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked)
+    "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
+    readOnly: inputProps.readOnly || disabledStateProps['aria-disabled']
   }, inputProps)), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$1b}__input-placeholder`
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -1764,7 +1801,7 @@ function useStopPropagation(handler) {
   }, [handler]);
 }
 
-const _excluded$1g = ["after", "before", "children", "className", "color", "disabled", "isClickable", "isDisabled", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
+const _excluded$1g = ["after", "before", "children", "className", "color", "isClickable", "isHighlighted", "isSelected", "onAfterClick", "onBeforeClick", "onClick", "size", "theme", "href", "onKeyDown"];
 
 /**
  * Chip sizes.
@@ -1800,15 +1837,18 @@ const DEFAULT_PROPS$W = {
  */
 const Chip = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       after,
       before,
       children,
       className,
       color,
-      disabled,
       isClickable: propIsClickable,
-      isDisabled = disabled,
       isHighlighted,
       isSelected,
       onAfterClick,
@@ -1818,11 +1858,11 @@ const Chip = forwardRef((props, ref) => {
       theme = defaultTheme,
       href,
       onKeyDown
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1g);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1g);
   const hasAfterClick = isFunction(onAfterClick);
   const hasBeforeClick = isFunction(onBeforeClick);
-  const hasOnClick = isFunction(onClick);
+  const hasOnClick = isFunction(props.onClick);
   const isButton = hasOnClick && !href;
   const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
@@ -1841,14 +1881,14 @@ const Chip = forwardRef((props, ref) => {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React__default.createElement("a", _extends({
       role: isButton ? 'button' : undefined,
-      tabIndex: isClickable ? 0 : undefined
+      tabIndex: isClickable && !disabledStateProps.disabled ? 0 : undefined
     }, forwardedProps, {
-      href: href,
+      href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
       className: classNames(className, handleBasicClasses({
         clickable: isClickable,
         color: chipColor,
-        isDisabled,
+        isDisabled: isAnyDisabled,
         hasAfter: Boolean(after),
         hasBefore: Boolean(before),
         highlighted: Boolean(isHighlighted),
@@ -1857,7 +1897,7 @@ const Chip = forwardRef((props, ref) => {
         size,
         unselected: Boolean(!isSelected)
       })),
-      "aria-disabled": isClickable && isDisabled || undefined,
+      "aria-disabled": isClickable && isAnyDisabled || undefined,
       onClick: hasOnClick ? onClick : undefined,
       onKeyDown: handleKeyDown
     }), before &&
@@ -2582,7 +2622,7 @@ const useBooleanState = defaultValue => {
   return [booleanValue, setToFalse, setToTrue, toggleBoolean];
 };
 
-const _excluded$1c = ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
+const _excluded$1c = ["defaultMonth", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"];
 
 /**
  * Defines the props of the component.
@@ -2601,10 +2641,12 @@ const COMPONENT_NAME$17 = 'DatePickerField';
  * @return React element.
  */
 const DatePickerField = forwardRef((props, ref) => {
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       defaultMonth,
-      disabled,
-      isDisabled = disabled,
       locale = getCurrentLocale(),
       maxDate,
       minDate,
@@ -2613,8 +2655,8 @@ const DatePickerField = forwardRef((props, ref) => {
       onChange,
       previousButtonProps,
       value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1c);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$1c);
   const anchorRef = useRef(null);
   const [isOpen, close,, toggleOpen] = useBooleanState(false);
   const handleKeyboardNav = useCallback(evt => {
@@ -2648,8 +2690,8 @@ const DatePickerField = forwardRef((props, ref) => {
     value: textFieldValue,
     onClick: toggleOpen,
     onChange: onTextFieldChange,
-    onKeyPress: handleKeyboardNav,
-    isDisabled: isDisabled,
+    onKeyPress: handleKeyboardNav
+  }, disabledStateProps, {
     readOnly: true,
     "aria-haspopup": "dialog"
   })), isOpen ? /*#__PURE__*/React__default.createElement(PopoverDialog
@@ -3595,7 +3637,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
   };
 };
 
-const _excluded$18 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "isDisabled", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
+const _excluded$18 = ["after", "before", "children", "className", "isHighlighted", "isSelected", "linkAs", "linkProps", "linkRef", "onItemSelected", "size"];
 
 /**
  * Defines the props of the component.
@@ -3637,6 +3679,11 @@ function isClickable({
  * @return React element.
  */
 const ListItem = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       after,
       before,
@@ -3644,14 +3691,13 @@ const ListItem = forwardRef((props, ref) => {
       className,
       isHighlighted,
       isSelected,
-      isDisabled,
       linkAs,
       linkProps = {},
       linkRef,
       onItemSelected,
       size = DEFAULT_PROPS$R.size
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$18);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$18);
   const role = linkAs || linkProps.href ? 'link' : 'button';
   const onKeyDown = useMemo(() => {
     if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
@@ -3678,19 +3724,19 @@ const ListItem = forwardRef((props, ref) => {
   }) ? (/* Clickable list item */
   renderLink(_objectSpread2(_objectSpread2({
     linkAs,
-    tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
+    tabIndex: !disabledStateProps.disabled ? 0 : undefined,
     role,
-    'aria-disabled': isDisabled
+    'aria-disabled': isAnyDisabled
   }, linkProps), {}, {
-    href: isDisabled ? undefined : linkProps.href,
+    href: isAnyDisabled ? undefined : linkProps.href,
     className: classNames(handleBasicClasses({
       prefix: `${CLASSNAME$13}__link`,
       isHighlighted,
       isSelected,
-      isDisabled
+      isDisabled: isAnyDisabled
     })),
-    onClick: isDisabled ? undefined : onItemSelected,
-    onKeyDown,
+    onClick: isAnyDisabled ? undefined : onItemSelected,
+    onKeyDown: isAnyDisabled ? undefined : onKeyDown,
     ref: linkRef
   }), content)) :
   /*#__PURE__*/
@@ -8939,7 +8985,7 @@ const Lightbox = forwardRef((props, ref) => {
 Lightbox.displayName = COMPONENT_NAME$M;
 Lightbox.className = CLASSNAME$M;
 
-const _excluded$P = ["children", "className", "color", "colorVariant", "disabled", "isDisabled", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
+const _excluded$P = ["children", "className", "color", "colorVariant", "href", "leftIcon", "linkAs", "rightIcon", "target", "typography"];
 
 /**
  * Defines the props of the component.
@@ -8963,28 +9009,31 @@ const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
  * @return React element.
  */
 const Link = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       children,
       className,
       color: propColor,
       colorVariant: propColorVariant,
-      disabled,
-      isDisabled = disabled,
       href,
       leftIcon,
       linkAs,
       rightIcon,
       target,
       typography
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$P);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$P);
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
   const isLink = linkAs || href;
-  const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';
+  const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
   const baseProps = {};
   if (Component === 'button') {
     baseProps.type = 'button';
-    baseProps.disabled = isDisabled;
+    Object.assign(baseProps, disabledStateProps);
   } else if (isLink) {
     baseProps.href = href;
     baseProps.target = target;
@@ -10347,7 +10396,7 @@ ProgressTracker.displayName = COMPONENT_NAME$w;
 ProgressTracker.className = CLASSNAME$w;
 ProgressTracker.defaultProps = DEFAULT_PROPS$r;
 
-const _excluded$y = ["className", "disabled", "hasError", "helper", "id", "isActive", "isComplete", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$y = ["className", "hasError", "helper", "id", "isActive", "isComplete", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -10378,29 +10427,31 @@ const DEFAULT_PROPS$q = {};
  * @return React element.
  */
 const ProgressTrackerStep = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       className,
-      disabled,
       hasError,
       helper,
       id,
       isActive: propIsActive,
       isComplete,
-      isDisabled = disabled,
       label,
       onFocus,
       onKeyPress,
       tabIndex = -1
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$y);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$y);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
-    if (isDisabled) {
+    if (isAnyDisabled) {
       return;
     }
     state === null || state === void 0 ? void 0 : state.changeToTab();
-  }, [isDisabled, state]);
+  }, [isAnyDisabled, state]);
   const handleFocus = useCallback(event => {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     if (state !== null && state !== void 0 && state.shouldActivateOnFocus) {
@@ -10432,7 +10483,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
       prefix: CLASSNAME$v,
       hasError,
       isActive,
-      isClickable: state && !isDisabled,
+      isClickable: state && !isAnyDisabled,
       isComplete
     })),
     onClick: changeToCurrentTab,
@@ -10440,7 +10491,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     onFocus: handleFocus,
     role: "tab",
     tabIndex: isActive ? 0 : tabIndex,
-    "aria-disabled": isDisabled,
+    "aria-disabled": isAnyDisabled,
     "aria-selected": isActive,
     "aria-controls": state === null || state === void 0 ? void 0 : state.tabPanelId
   }), /*#__PURE__*/React__default.createElement(Icon, {
@@ -10516,7 +10567,7 @@ ProgressTrackerStepPanel.displayName = COMPONENT_NAME$u;
 ProgressTrackerStepPanel.className = CLASSNAME$u;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$p;
 
-const _excluded$w = ["checked", "className", "disabled", "helper", "id", "inputRef", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"];
+const _excluded$w = ["checked", "className", "helper", "id", "inputRef", "isChecked", "label", "name", "onChange", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -10545,24 +10596,27 @@ const DEFAULT_PROPS$o = {};
  * @return React element.
  */
 const RadioButton = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       className,
-      disabled,
       helper,
       id,
       inputRef,
       isChecked = checked,
-      isDisabled = disabled,
       label,
       name,
       onChange,
       theme = defaultTheme,
       value,
       inputProps
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$w);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$w);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
   const handleChange = event => {
@@ -10575,7 +10629,7 @@ const RadioButton = forwardRef((props, ref) => {
   }, forwardedProps, {
     className: classNames(className, handleBasicClasses({
       isChecked,
-      isDisabled,
+      isDisabled: isAnyDisabled,
       isUnchecked: !isChecked,
       prefix: CLASSNAME$t,
       theme
@@ -10584,15 +10638,15 @@ const RadioButton = forwardRef((props, ref) => {
     className: `${CLASSNAME$t}__input-wrapper`
   }, /*#__PURE__*/React__default.createElement("input", _extends({
     ref: inputRef,
-    className: `${CLASSNAME$t}__input-native`,
-    disabled: isDisabled,
+    className: `${CLASSNAME$t}__input-native`
+  }, disabledStateProps, {
     id: inputId,
-    tabIndex: isDisabled ? -1 : 0,
     type: "radio",
     name: name,
     value: value,
     checked: isChecked,
     onChange: handleChange,
+    readOnly: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) || isAnyDisabled,
     "aria-describedby": helper ? `${inputId}-helper` : undefined
   }, inputProps)), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$t}__input-placeholder`
@@ -11412,7 +11466,7 @@ const clamp = (value, min, max) => {
   return value;
 };
 
-const _excluded$l = ["className", "disabled", "helper", "hideMinMaxLabel", "id", "isDisabled", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
+const _excluded$l = ["className", "helper", "hideMinMaxLabel", "id", "label", "max", "min", "name", "onChange", "onMouseDown", "precision", "steps", "theme", "value"];
 
 /**
  * Defines the props of the component.
@@ -11465,14 +11519,17 @@ const computePercentFromValue = (value, min, max) => Number((value - min) / (max
  * @return React element.
  */
 const Slider = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
       className,
-      disabled,
       helper,
       hideMinMaxLabel,
       id,
-      isDisabled = disabled,
       label,
       max,
       min,
@@ -11483,8 +11540,8 @@ const Slider = forwardRef((props, ref) => {
       steps = DEFAULT_PROPS$h.steps,
       theme = defaultTheme,
       value
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$l);
   const generatedId = useId();
   const sliderId = id || generatedId;
   const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
@@ -11604,7 +11661,7 @@ const Slider = forwardRef((props, ref) => {
     const {
       current: slider
     } = sliderRef;
-    if (isDisabled || !slider) return;
+    if (isAnyDisabled || !slider) return;
     const newValue = getPercentValue(event, slider);
     if (onChange) {
       onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
@@ -11621,8 +11678,7 @@ const Slider = forwardRef((props, ref) => {
       theme,
       hasLabel: Boolean(label)
     })),
-    onMouseDown: handleMouseDown,
-    "aria-disabled": isDisabled
+    onMouseDown: handleMouseDown
   }), label && /*#__PURE__*/React__default.createElement(InputLabel, {
     id: sliderLabelId,
     htmlFor: sliderId,
@@ -11653,7 +11709,7 @@ const Slider = forwardRef((props, ref) => {
     style: {
       left: `${step * 100}%`
     }
-  }))) : null, /*#__PURE__*/React__default.createElement("button", {
+  }))) : null, /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
     "aria-labelledby": sliderLabelId,
     name: name,
@@ -11662,9 +11718,8 @@ const Slider = forwardRef((props, ref) => {
     style: {
       left: percentString
     },
-    onKeyDown: handleKeyDown,
-    disabled: isDisabled
-  })), !hideMinMaxLabel && /*#__PURE__*/React__default.createElement("span", {
+    onKeyDown: isAnyDisabled ? undefined : handleKeyDown
+  }, disabledStateProps))), !hideMinMaxLabel && /*#__PURE__*/React__default.createElement("span", {
     className: `${CLASSNAME$j}__value-label ${CLASSNAME$j}__value-label--max`
   }, max)));
 });
@@ -12478,7 +12533,7 @@ const Slides = forwardRef((props, ref) => {
 Slides.displayName = COMPONENT_NAME$f;
 Slides.className = CLASSNAME$f;
 
-const _excluded$f = ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"];
+const _excluded$f = ["checked", "children", "className", "helper", "id", "isChecked", "name", "onChange", "position", "theme", "value", "inputProps"];
 
 /**
  * Defines the props of the component.
@@ -12509,24 +12564,27 @@ const DEFAULT_PROPS$e = {
  * @return React element.
  */
 const Switch = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
       checked,
       children,
       className,
-      disabled,
       helper,
       id,
       isChecked = checked,
-      isDisabled = disabled,
       name,
       onChange,
       position = DEFAULT_PROPS$e.position,
       theme = defaultTheme,
       value,
       inputProps = {}
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$f);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$f);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
   const handleChange = event => {
@@ -12540,12 +12598,11 @@ const Switch = forwardRef((props, ref) => {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$e,
       isChecked,
-      isDisabled,
+      isDisabled: isAnyDisabled,
       position,
       theme,
       isUnchecked: !isChecked
-    })),
-    "aria-disabled": isDisabled
+    }))
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$e}__input-wrapper`
   }, /*#__PURE__*/React__default.createElement("input", _extends({
@@ -12554,8 +12611,9 @@ const Switch = forwardRef((props, ref) => {
     id: inputId,
     className: `${CLASSNAME$e}__input-native`,
     name: name,
-    value: value,
-    disabled: isDisabled,
+    value: value
+  }, disabledStateProps, {
+    readOnly: inputProps.readOnly || isAnyDisabled,
     checked: isChecked,
     "aria-checked": Boolean(isChecked),
     onChange: handleChange,
@@ -12823,7 +12881,7 @@ TableHeader.displayName = COMPONENT_NAME$a;
 TableHeader.className = CLASSNAME$a;
 TableHeader.defaultProps = DEFAULT_PROPS$b;
 
-const _excluded$a = ["children", "className", "disabled", "isClickable", "isDisabled", "isSelected"];
+const _excluded$a = ["children", "className", "isClickable", "isSelected"];
 
 /**
  * Defines the props of the component.
@@ -12852,26 +12910,29 @@ const DEFAULT_PROPS$a = {};
  * @return React element.
  */
 const TableRow = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       children,
       className,
-      disabled,
       isClickable,
-      isDisabled = disabled,
       isSelected
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$a);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$a);
   return /*#__PURE__*/React__default.createElement("tr", _extends({
     ref: ref,
-    tabIndex: isClickable && !isDisabled ? 0 : -1
+    tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1
   }, forwardedProps, {
     className: classNames(className, handleBasicClasses({
-      isClickable: isClickable && !isDisabled,
-      isDisabled,
-      isSelected: isSelected && !isDisabled,
+      isClickable: isClickable && !isAnyDisabled,
+      isDisabled: isAnyDisabled,
+      isSelected: isSelected && !isAnyDisabled,
       prefix: CLASSNAME$9
     })),
-    "aria-disabled": isDisabled
+    "aria-disabled": isAnyDisabled
   }), children);
 });
 TableRow.displayName = COMPONENT_NAME$9;
@@ -13008,7 +13069,7 @@ TabList.displayName = COMPONENT_NAME$8;
 TabList.className = CLASSNAME$8;
 TabList.defaultProps = DEFAULT_PROPS$8;
 
-const _excluded$7 = ["className", "disabled", "icon", "iconProps", "id", "isActive", "isDisabled", "label", "onFocus", "onKeyPress", "tabIndex"];
+const _excluded$7 = ["className", "icon", "iconProps", "id", "isActive", "label", "onFocus", "onKeyPress", "tabIndex"];
 
 /**
  * Defines the props of the component.
@@ -13039,28 +13100,30 @@ const DEFAULT_PROPS$7 = {};
  * @return React element.
  */
 const Tab = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
   const {
       className,
-      disabled,
       icon,
       iconProps = {},
       id,
       isActive: propIsActive,
-      isDisabled = disabled,
       label,
       onFocus,
       onKeyPress,
       tabIndex = -1
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$7);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded$7);
   const state = useTabProviderContext('tab', id);
   const isActive = propIsActive || (state === null || state === void 0 ? void 0 : state.isActive);
   const changeToCurrentTab = useCallback(() => {
-    if (isDisabled) {
+    if (isAnyDisabled) {
       return;
     }
     state === null || state === void 0 ? void 0 : state.changeToTab();
-  }, [isDisabled, state]);
+  }, [isAnyDisabled, state]);
   const handleFocus = useCallback(event => {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     if (state !== null && state !== void 0 && state.shouldActivateOnFocus) {
@@ -13069,11 +13132,11 @@ const Tab = forwardRef((props, ref) => {
   }, [changeToCurrentTab, onFocus, state === null || state === void 0 ? void 0 : state.shouldActivateOnFocus]);
   const handleKeyPress = useCallback(event => {
     onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event);
-    if (event.key !== 'Enter') {
+    if (event.key !== 'Enter' || isAnyDisabled) {
       return;
     }
     changeToCurrentTab();
-  }, [changeToCurrentTab, onKeyPress]);
+  }, [changeToCurrentTab, isAnyDisabled, onKeyPress]);
   return /*#__PURE__*/React__default.createElement("button", _extends({
     ref: ref
   }, forwardedProps, {
@@ -13082,14 +13145,14 @@ const Tab = forwardRef((props, ref) => {
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$7,
       isActive,
-      isDisabled
+      isDisabled: isAnyDisabled
     })),
     onClick: changeToCurrentTab,
     onKeyPress: handleKeyPress,
     onFocus: handleFocus,
     role: "tab",
     tabIndex: isActive ? 0 : tabIndex,
-    "aria-disabled": isDisabled,
+    "aria-disabled": isAnyDisabled,
     "aria-selected": isActive,
     "aria-controls": state === null || state === void 0 ? void 0 : state.tabPanelId
   }), icon && /*#__PURE__*/React__default.createElement(Icon, _extends({
@@ -13161,8 +13224,8 @@ TabPanel.displayName = COMPONENT_NAME$6;
 TabPanel.className = CLASSNAME$6;
 TabPanel.defaultProps = DEFAULT_PROPS$6;
 
-const _excluded$5 = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
-  _excluded2 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "labelProps", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
+const _excluded$5 = ["id", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
+  _excluded2 = ["chips", "className", "clearButtonProps", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isRequired", "isValid", "label", "labelProps", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
 
 /**
  * Defines the props of the component.
@@ -13228,7 +13291,6 @@ const useComputeNumberOfRows = minimumRows => {
 const renderInputNative = props => {
   const {
       id,
-      isDisabled,
       isRequired,
       placeholder,
       multiline,
@@ -13274,13 +13336,13 @@ const renderInputNative = props => {
     placeholder,
     value,
     name,
-    disabled: isDisabled,
     required: isRequired,
     onFocus: onTextFieldFocus,
     onBlur: onTextFieldBlur,
     onChange: handleChange,
     'aria-invalid': hasError ? 'true' : undefined,
     'aria-describedby': describedById,
+    readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],
     ref: mergeRefs(inputRef, ref)
   });
   if (multiline) {
@@ -13299,12 +13361,16 @@ const renderInputNative = props => {
  * @return React element.
  */
 const TextField = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
   const defaultTheme = useTheme() || Theme.light;
   const {
       chips,
       className,
       clearButtonProps,
-      disabled,
       error,
       forceFocusStyle,
       hasError,
@@ -13312,7 +13378,6 @@ const TextField = forwardRef((props, ref) => {
       icon,
       id,
       inputRef: inputRefProps,
-      isDisabled = disabled,
       isRequired,
       isValid,
       label,
@@ -13331,8 +13396,8 @@ const TextField = forwardRef((props, ref) => {
       type = DEFAULT_PROPS$5.type,
       value,
       afterElement
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded2);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded2);
   const generatedTextFieldId = useId();
   const textFieldId = id || generatedTextFieldId;
   /** Keep a clean local input ref to manage focus */
@@ -13390,7 +13455,7 @@ const TextField = forwardRef((props, ref) => {
       hasPlaceholder: Boolean(placeholder),
       hasTextarea: multiline,
       hasValue: Boolean(value),
-      isDisabled,
+      isDisabled: isAnyDisabled,
       isFocus: isFocus || forceFocusStyle,
       isValid,
       prefix: CLASSNAME$5,
@@ -13418,10 +13483,10 @@ const TextField = forwardRef((props, ref) => {
     size: Size.xs
   }), chips && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$5}__chips`
-  }, chips, renderInputNative(_objectSpread2({
+  }, chips, renderInputNative(_objectSpread2(_objectSpread2({
     id: textFieldId,
-    inputRef,
-    isDisabled,
+    inputRef
+  }, disabledStateProps), {}, {
     isRequired,
     maxLength,
     multiline,
@@ -13439,10 +13504,10 @@ const TextField = forwardRef((props, ref) => {
     describedById
   }, forwardedProps))), !chips && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$5}__input-wrapper`
-  }, renderInputNative(_objectSpread2({
+  }, renderInputNative(_objectSpread2(_objectSpread2({
     id: textFieldId,
-    inputRef,
-    isDisabled,
+    inputRef
+  }, disabledStateProps), {}, {
     isRequired,
     maxLength,
     multiline,
@@ -13463,7 +13528,7 @@ const TextField = forwardRef((props, ref) => {
     color: theme === Theme.dark ? 'light' : undefined,
     icon: isValid ? mdiCheckCircle : mdiAlertCircle,
     size: Size.xxs
-  }), clearButtonProps && isNotEmpty && /*#__PURE__*/React__default.createElement(IconButton, _extends({}, clearButtonProps, {
+  }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/React__default.createElement(IconButton, _extends({}, clearButtonProps, {
     className: `${CLASSNAME$5}__input-clear`,
     icon: mdiCloseCircle,
     emphasis: Emphasis.low,