@launchpad-ui/button - npm Package Compare versions

Comparing version 0.1.6 to 0.2.0

dist/Button.d.ts

@@ -0,3 +1,3 @@
+/// <reference types="react" />
 import type { LocationDescriptor } from 'history';
-import { PureComponent } from 'react';
 import './styles/Button.css';
@@ -113,27 +113,5 @@ import { ButtonKind, ButtonSize, ButtonType } from './types';
 };
-declare class Button extends PureComponent<ButtonProps> {
-    static defaultProps: {
-        kind: ButtonKind;
-        size: ButtonSize;
-        disabled: boolean;
-        outlined: boolean;
-        onClick: () => undefined;
-        renderIconFirst: boolean;
-    };
-    rootRef: import("react").RefObject<HTMLElement>;
-    render(): JSX.Element;
-    renderAnchor(extraProps: object, children: React.ReactNode): JSX.Element;
-    renderButton(extraProps: object, children: React.ReactNode): JSX.Element;
-    handleClick: (event: React.MouseEvent) => void;
-    /**
-     * GOTCHA: focus only works with native dom elements: a and button. Since this
-     * component can render Link and in fact it can render any custom react components, this
-     * method is an anti-pattern.
-     */
-    focus: () => void;
-    getDomElement: () => HTMLElement | null;
-    handleKeyDown: (event: KeyboardEvent) => void;
-}
+declare const Button: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<any>>>;
 export { Button };
 export type { ButtonProps };
 //# sourceMappingURL=Button.d.ts.map

dist/index.es.js

@@ -6,3 +6,3 @@ // ../../scripts/react-shim.js
 import cx from "clsx";
-import { cloneElement, createRef, PureComponent } from "react";
+import { cloneElement, forwardRef, memo } from "react";
 import "./styles/Button.css";
@@ -42,146 +42,123 @@
 // src/Button.tsx
-var Button = class extends PureComponent {
-  constructor() {
-    super(...arguments);
-    this.rootRef = createRef();
-    this.handleClick = (event) => {
-      const { disabled, onClick } = this.props;
-      if (disabled) {
+var ButtonComponent = forwardRef((props, ref) => {
+  const {
+    className,
+    size = "normal" /* NORMAL */,
+    fit,
+    kind = "default" /* DEFAULT */,
+    icon,
+    outlined = false,
+    type,
+    children,
+    isLoading,
+    loadingText,
+    renderIconFirst = false,
+    onKeyDown,
+    disabled = false,
+    href,
+    target,
+    onClick = () => void 0,
+    to
+  } = props;
+  const kindClass = `Button--${kind}`;
+  const sizeClass = `Button--${size}`;
+  const classes = cx("Button", className, kindClass, sizeClass, {
+    "Button--fit": fit,
+    "Button--icon": type === "icon",
+    "Button--outlined": type === "icon" && outlined,
+    "Button--borderless": type === "borderless"
+  });
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick && onClick(event);
+  };
+  const handleKeyDown = (event) => {
+    const spacebarKeys = ["Spacebar", " "];
+    if (!!to || !!href || !!target) {
+      if (spacebarKeys.includes(event.key)) {
         event.preventDefault();
-        return;
+        const link = event.target;
+        link.click();
       }
-      onClick && onClick(event);
-    };
-    this.focus = () => {
-      const { current } = this.rootRef;
-      if (current && !current.focus) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Button.focus() is called on a custom class component which does not have a focus method.");
-        }
-        return;
-      }
-      if (current && current.focus) {
-        current.focus();
-      }
-    };
-    this.getDomElement = () => this.rootRef.current;
-    this.handleKeyDown = (event) => {
-      const { to, href, target } = this.props;
-      const { current } = this.rootRef;
-      const spacebarKeys = ["Spacebar", " "];
-      if (!!to || !!href || !!target) {
-        if (spacebarKeys.includes(event.key)) {
-          event.preventDefault();
-          current?.click();
-        }
-      }
-    };
-  }
-  render() {
-    const { href, target } = this.props;
+    }
+  };
+  const extraProps = {
+    disabled: disabled || isLoading,
+    className: classes,
+    onClick: handleClick,
+    ref,
+    onKeyDown: onKeyDown || handleKeyDown
+  };
+  const renderIcon = icon && cloneElement(icon, {
+    key: "icon",
+    size: icon.props.size || "small",
+    "aria-hidden": true
+  });
+  const finalChildren = [
+    renderIconFirst && renderIcon,
+    isLoading && /* @__PURE__ */ React.createElement("span", {
+      key: "text"
+    }, loadingText || children),
+    !isLoading && children && /* @__PURE__ */ React.createElement("span", {
+      key: "text"
+    }, children),
+    !renderIconFirst && renderIcon,
+    isLoading && /* @__PURE__ */ React.createElement("span", {
+      key: "spinner"
+    }, "\u2026")
+  ];
+  const renderAnchor = (extraProps2, children2) => {
     const {
-      disabled,
-      className,
-      size,
-      fit,
-      kind,
-      icon,
-      outlined,
-      type,
-      children,
-      isLoading,
-      loadingText,
-      renderIconFirst,
-      onKeyDown
-    } = this.props;
-    const kindClass = `Button--${kind}`;
-    const sizeClass = `Button--${size}`;
-    const classes = cx("Button", className, kindClass, sizeClass, {
-      "Button--fit": fit,
-      "Button--icon": type === "icon",
-      "Button--outlined": type === "icon" && outlined,
-      "Button--borderless": type === "borderless"
-    });
-    const extraProps = {
-      disabled: disabled || isLoading,
-      className: classes,
-      onClick: this.handleClick,
-      ref: this.rootRef,
-      onKeyDown: onKeyDown || this.handleKeyDown
-    };
-    const renderIcon = icon && cloneElement(icon, {
-      key: "icon",
-      size: icon.props.size || "small",
-      "aria-hidden": true
-    });
-    const finalChildren = [
-      renderIconFirst && renderIcon,
-      isLoading && /* @__PURE__ */ React.createElement("span", {
-        key: "text"
-      }, loadingText || children),
-      !isLoading && children && /* @__PURE__ */ React.createElement("span", {
-        key: "text"
-      }, children),
-      !renderIconFirst && renderIcon,
-      isLoading && /* @__PURE__ */ React.createElement("span", {
-        key: "spinner"
-      }, "\u2026")
-    ];
-    const content = this[href || target ? "renderAnchor" : "renderButton"](extraProps, finalChildren);
-    return content;
-  }
-  renderAnchor(extraProps, children) {
-    const {
       component,
-      isLoading,
-      loadingText,
-      size,
-      kind,
-      fit,
-      icon,
-      outlined,
-      renderIconFirst,
+      isLoading: isLoading2,
+      loadingText: loadingText2,
+      size: size2,
+      kind: kind2,
+      fit: fit2,
+      icon: icon2,
+      outlined: outlined2,
+      renderIconFirst: renderIconFirst2,
       testId,
-      ...props
-    } = this.props;
-    const ButtonComponent = component || "a";
-    return /* @__PURE__ */ React.createElement(ButtonComponent, {
-      ...props,
-      ...extraProps,
+      ...otherProps
+    } = props;
+    const ButtonComponent2 = component || "a";
+    return /* @__PURE__ */ React.createElement(ButtonComponent2, {
+      ...otherProps,
+      ...extraProps2,
       role: "button",
       "data-test-id": testId
-    }, children);
-  }
-  renderButton(extraProps, children) {
+    }, children2);
+  };
+  const renderButton = (extraProps2, children2) => {
     const {
       component,
-      type,
-      isLoading,
-      loadingText,
-      size,
-      kind,
-      fit,
-      icon,
-      outlined,
-      renderIconFirst,
+      type: type2,
+      isLoading: isLoading2,
+      loadingText: loadingText2,
+      size: size2,
+      kind: kind2,
+      fit: fit2,
+      icon: icon2,
+      outlined: outlined2,
+      renderIconFirst: renderIconFirst2,
       testId,
-      ...props
-    } = this.props;
-    const ButtonComponent = component || "button";
-    return /* @__PURE__ */ React.createElement(ButtonComponent, {
-      ...props,
-      ...extraProps,
-      type: type && type !== "icon" /* ICON */ ? type : "button" /* BUTTON */,
+      ...otherProps
+    } = props;
+    const ButtonComponent2 = component || "button";
+    return /* @__PURE__ */ React.createElement(ButtonComponent2, {
+      ...otherProps,
+      ...extraProps2,
+      type: type2 && type2 !== "icon" /* ICON */ ? type2 : "button" /* BUTTON */,
       "data-test-id": testId
-    }, children);
-  }
-};
-Button.defaultProps = {
-  kind: "default" /* DEFAULT */,
-  size: "normal" /* NORMAL */,
-  disabled: false,
-  outlined: false,
-  onClick: () => void 0,
-  renderIconFirst: false
-};
+    }, children2);
+  };
+  const renderFunc = href || target ? renderAnchor : renderButton;
+  const content = renderFunc(extraProps, finalChildren);
+  return content;
+});
+ButtonComponent.displayName = "Button";
+var Button = memo(ButtonComponent);
 export {
@@ -188,0 +165,0 @@ Button,

dist/index.js

@@ -73,146 +73,123 @@ var __create = Object.create;
 // src/Button.tsx
-var Button = class extends import_react.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.rootRef = (0, import_react.createRef)();
-    this.handleClick = (event) => {
-      const { disabled, onClick } = this.props;
-      if (disabled) {
+var ButtonComponent = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    className,
+    size = "normal" /* NORMAL */,
+    fit,
+    kind = "default" /* DEFAULT */,
+    icon,
+    outlined = false,
+    type,
+    children,
+    isLoading,
+    loadingText,
+    renderIconFirst = false,
+    onKeyDown,
+    disabled = false,
+    href,
+    target,
+    onClick = () => void 0,
+    to
+  } = props;
+  const kindClass = `Button--${kind}`;
+  const sizeClass = `Button--${size}`;
+  const classes = (0, import_clsx.default)("Button", className, kindClass, sizeClass, {
+    "Button--fit": fit,
+    "Button--icon": type === "icon",
+    "Button--outlined": type === "icon" && outlined,
+    "Button--borderless": type === "borderless"
+  });
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick && onClick(event);
+  };
+  const handleKeyDown = (event) => {
+    const spacebarKeys = ["Spacebar", " "];
+    if (!!to || !!href || !!target) {
+      if (spacebarKeys.includes(event.key)) {
         event.preventDefault();
-        return;
+        const link = event.target;
+        link.click();
       }
-      onClick && onClick(event);
-    };
-    this.focus = () => {
-      const { current } = this.rootRef;
-      if (current && !current.focus) {
-        if (process.env.NODE_ENV === "development") {
-          console.warn("Button.focus() is called on a custom class component which does not have a focus method.");
-        }
-        return;
-      }
-      if (current && current.focus) {
-        current.focus();
-      }
-    };
-    this.getDomElement = () => this.rootRef.current;
-    this.handleKeyDown = (event) => {
-      const { to, href, target } = this.props;
-      const { current } = this.rootRef;
-      const spacebarKeys = ["Spacebar", " "];
-      if (!!to || !!href || !!target) {
-        if (spacebarKeys.includes(event.key)) {
-          event.preventDefault();
-          current?.click();
-        }
-      }
-    };
-  }
-  render() {
-    const { href, target } = this.props;
+    }
+  };
+  const extraProps = {
+    disabled: disabled || isLoading,
+    className: classes,
+    onClick: handleClick,
+    ref,
+    onKeyDown: onKeyDown || handleKeyDown
+  };
+  const renderIcon = icon && (0, import_react.cloneElement)(icon, {
+    key: "icon",
+    size: icon.props.size || "small",
+    "aria-hidden": true
+  });
+  const finalChildren = [
+    renderIconFirst && renderIcon,
+    isLoading && /* @__PURE__ */ React.createElement("span", {
+      key: "text"
+    }, loadingText || children),
+    !isLoading && children && /* @__PURE__ */ React.createElement("span", {
+      key: "text"
+    }, children),
+    !renderIconFirst && renderIcon,
+    isLoading && /* @__PURE__ */ React.createElement("span", {
+      key: "spinner"
+    }, "\u2026")
+  ];
+  const renderAnchor = (extraProps2, children2) => {
     const {
-      disabled,
-      className,
-      size,
-      fit,
-      kind,
-      icon,
-      outlined,
-      type,
-      children,
-      isLoading,
-      loadingText,
-      renderIconFirst,
-      onKeyDown
-    } = this.props;
-    const kindClass = `Button--${kind}`;
-    const sizeClass = `Button--${size}`;
-    const classes = (0, import_clsx.default)("Button", className, kindClass, sizeClass, {
-      "Button--fit": fit,
-      "Button--icon": type === "icon",
-      "Button--outlined": type === "icon" && outlined,
-      "Button--borderless": type === "borderless"
-    });
-    const extraProps = {
-      disabled: disabled || isLoading,
-      className: classes,
-      onClick: this.handleClick,
-      ref: this.rootRef,
-      onKeyDown: onKeyDown || this.handleKeyDown
-    };
-    const renderIcon = icon && (0, import_react.cloneElement)(icon, {
-      key: "icon",
-      size: icon.props.size || "small",
-      "aria-hidden": true
-    });
-    const finalChildren = [
-      renderIconFirst && renderIcon,
-      isLoading && /* @__PURE__ */ React.createElement("span", {
-        key: "text"
-      }, loadingText || children),
-      !isLoading && children && /* @__PURE__ */ React.createElement("span", {
-        key: "text"
-      }, children),
-      !renderIconFirst && renderIcon,
-      isLoading && /* @__PURE__ */ React.createElement("span", {
-        key: "spinner"
-      }, "\u2026")
-    ];
-    const content = this[href || target ? "renderAnchor" : "renderButton"](extraProps, finalChildren);
-    return content;
-  }
-  renderAnchor(extraProps, children) {
-    const {
       component,
-      isLoading,
-      loadingText,
-      size,
-      kind,
-      fit,
-      icon,
-      outlined,
-      renderIconFirst,
+      isLoading: isLoading2,
+      loadingText: loadingText2,
+      size: size2,
+      kind: kind2,
+      fit: fit2,
+      icon: icon2,
+      outlined: outlined2,
+      renderIconFirst: renderIconFirst2,
       testId,
-      ...props
-    } = this.props;
-    const ButtonComponent = component || "a";
-    return /* @__PURE__ */ React.createElement(ButtonComponent, {
-      ...props,
-      ...extraProps,
+      ...otherProps
+    } = props;
+    const ButtonComponent2 = component || "a";
+    return /* @__PURE__ */ React.createElement(ButtonComponent2, {
+      ...otherProps,
+      ...extraProps2,
       role: "button",
       "data-test-id": testId
-    }, children);
-  }
-  renderButton(extraProps, children) {
+    }, children2);
+  };
+  const renderButton = (extraProps2, children2) => {
     const {
       component,
-      type,
-      isLoading,
-      loadingText,
-      size,
-      kind,
-      fit,
-      icon,
-      outlined,
-      renderIconFirst,
+      type: type2,
+      isLoading: isLoading2,
+      loadingText: loadingText2,
+      size: size2,
+      kind: kind2,
+      fit: fit2,
+      icon: icon2,
+      outlined: outlined2,
+      renderIconFirst: renderIconFirst2,
       testId,
-      ...props
-    } = this.props;
-    const ButtonComponent = component || "button";
-    return /* @__PURE__ */ React.createElement(ButtonComponent, {
-      ...props,
-      ...extraProps,
-      type: type && type !== "icon" /* ICON */ ? type : "button" /* BUTTON */,
+      ...otherProps
+    } = props;
+    const ButtonComponent2 = component || "button";
+    return /* @__PURE__ */ React.createElement(ButtonComponent2, {
+      ...otherProps,
+      ...extraProps2,
+      type: type2 && type2 !== "icon" /* ICON */ ? type2 : "button" /* BUTTON */,
       "data-test-id": testId
-    }, children);
-  }
-};
-Button.defaultProps = {
-  kind: "default" /* DEFAULT */,
-  size: "normal" /* NORMAL */,
-  disabled: false,
-  outlined: false,
-  onClick: () => void 0,
-  renderIconFirst: false
-};
+    }, children2);
+  };
+  const renderFunc = href || target ? renderAnchor : renderButton;
+  const content = renderFunc(extraProps, finalChildren);
+  return content;
+});
+ButtonComponent.displayName = "Button";
+var Button = (0, import_react.memo)(ButtonComponent);
 // Annotate the CommonJS export names for ESM import in node:
@@ -219,0 +196,0 @@ 0 && (module.exports = {

package.json

 {
   "name": "@launchpad-ui/button",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "publishConfig": {
@@ -37,4 +37,4 @@ "access": "public"
   "devDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
@@ -41,0 +41,0 @@ "scripts": {

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Total package byte prevSize

88346

decreased by-5%

Lines of code

600

decreased by-10.18%

No dependency changes