@canonical/react-components 3.8.1 → 3.8.3

package/dist/components/ActionButton/ActionButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ClassName, PropsWithSpread } from "../../types";
@@ -33,6 +33,10 @@ export type Props = PropsWithSpread<{
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
+    /**
+     * Function for handling button click event.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
@@ -45,5 +49,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/components/ActionButton/ActionButton.js

@@ -30,6 +30,7 @@ const ActionButton = _ref => {
     appearance,
     children,
     className,
+    onClick,
     disabled = null,
     inline = false,
     loading = false,
@@ -108,8 +109,10 @@ const ActionButton = _ref => {
     "is-inline": inline
   });
   const showIcon = showLoader || showSuccess;
+  const isDisabled = disabled === null ? showLoader : disabled;
   const icon = showLoader && "spinner" || showSuccess && "success" || null;
   const iconLight = appearance === "positive" || appearance === "negative";
+  const onClickDisabled = e => e.preventDefault();
 
   // This component uses the base button element instead of the Button component
   // as the button requires a ref and Button would have to be updated to use
@@ -117,8 +120,9 @@ const ActionButton = _ref => {
   // typescript generics.
   return /*#__PURE__*/_react.default.createElement("button", _extends({
     className: buttonClasses,
-    disabled: disabled === null ? showLoader : disabled,
     ref: ref,
+    onClick: isDisabled ? onClickDisabled : onClick,
+    "aria-disabled": isDisabled || undefined,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

package/dist/components/Modal/Modal.js

@@ -35,11 +35,11 @@ const Modal = _ref => {
   const shouldClose = (0, _react.useRef)(false);
   const modalRef = (0, _react.useRef)(null);
   const closeButtonRef = (0, _react.useRef)(null);
-  const focusableModalElements = (0, _react.useRef)(null);
   const handleTabKey = event => {
-    if (focusableModalElements.current.length > 0) {
-      const firstElement = focusableModalElements.current[0];
-      const lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
+    const focusableModalElements = modalRef.current.querySelectorAll(focusableElementSelectors);
+    if (focusableModalElements.length > 0) {
+      const firstElement = focusableModalElements[0];
+      const lastElement = focusableModalElements[focusableModalElements.length - 1];
       if (!event.shiftKey && document.activeElement === lastElement) {
         firstElement.focus();
         event.preventDefault();
@@ -70,7 +70,6 @@ const Modal = _ref => {
     } else {
       modalRef.current.focus();
     }
-    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
   }, [focusRef]);
   (0, _react.useEffect)(() => {
     const keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);

package/dist/esm/components/ActionButton/ActionButton.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEventHandler } from "react";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ClassName, PropsWithSpread } from "../../types";
@@ -33,6 +33,10 @@ export type Props = PropsWithSpread<{
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
+    /**
+     * Function for handling button click event.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
@@ -45,5 +49,5 @@ export type Props = PropsWithSpread<{
  * [Button](?path=/docs/components-button--docs) in addition to those in the
  * props table:
  */
-declare const ActionButton: ({ appearance, children, className, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
+declare const ActionButton: ({ appearance, children, className, onClick, disabled, inline, loading, success, ...buttonProps }: Props) => React.JSX.Element;
 export default ActionButton;

package/dist/esm/components/ActionButton/ActionButton.js

@@ -1,4 +1,4 @@
-var _excluded = ["appearance", "children", "className", "disabled", "inline", "loading", "success"];
+var _excluded = ["appearance", "children", "className", "onClick", "disabled", "inline", "loading", "success"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -25,6 +25,7 @@ var ActionButton = _ref => {
       appearance,
       children,
       className,
+      onClick,
       disabled = null,
       inline = false,
       loading = false,
@@ -103,8 +104,10 @@ var ActionButton = _ref => {
     "is-inline": inline
   });
   var showIcon = showLoader || showSuccess;
+  var isDisabled = disabled === null ? showLoader : disabled;
   var icon = showLoader && "spinner" || showSuccess && "success" || null;
   var iconLight = appearance === "positive" || appearance === "negative";
+  var onClickDisabled = e => e.preventDefault();
 
   // This component uses the base button element instead of the Button component
   // as the button requires a ref and Button would have to be updated to use
@@ -112,8 +115,9 @@ var ActionButton = _ref => {
   // typescript generics.
   return /*#__PURE__*/React.createElement("button", _extends({
     className: buttonClasses,
-    disabled: disabled === null ? showLoader : disabled,
     ref: ref,
+    onClick: isDisabled ? onClickDisabled : onClick,
+    "aria-disabled": isDisabled || undefined,
     style: height && width ? {
       height: "".concat(height, "px"),
       width: "".concat(width, "px")

package/dist/esm/components/Modal/Modal.js

@@ -29,11 +29,11 @@ export var Modal = _ref => {
   var shouldClose = useRef(false);
   var modalRef = useRef(null);
   var closeButtonRef = useRef(null);
-  var focusableModalElements = useRef(null);
   var handleTabKey = event => {
-    if (focusableModalElements.current.length > 0) {
-      var firstElement = focusableModalElements.current[0];
-      var lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
+    var focusableModalElements = modalRef.current.querySelectorAll(focusableElementSelectors);
+    if (focusableModalElements.length > 0) {
+      var firstElement = focusableModalElements[0];
+      var lastElement = focusableModalElements[focusableModalElements.length - 1];
       if (!event.shiftKey && document.activeElement === lastElement) {
         firstElement.focus();
         event.preventDefault();
@@ -64,7 +64,6 @@ export var Modal = _ref => {
     } else {
       modalRef.current.focus();
     }
-    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
   }, [focusRef]);
   useEffect(() => {
     var keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.8.1",
+  "version": "3.8.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -81,7 +81,7 @@
     "sass": "1.85.0",
     "sass-loader": "16.0.5",
     "semantic-release": "25.0.2",
-    "storybook": "8.5.6",
+    "storybook": "8.6.15",
     "strip-ansi": "7.1.0",
     "style-loader": "4.0.0",
     "stylelint": "16.14.1",