@spark-web/button 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @spark-web/button
2
2
 
3
+ ## 1.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#451](https://github.com/brighte-labs/spark-web/pull/451)
8
+ [`02b6077`](https://github.com/brighte-labs/spark-web/commit/02b60775c2ea8e2f2c3ef27c5d4030e1b343fb92)
9
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Fix button
10
+ loading and disabled state
11
+
12
+ ## 1.5.1
13
+
14
+ ### Patch Changes
15
+
16
+ - [#426](https://github.com/brighte-labs/spark-web/pull/426)
17
+ [`c674947`](https://github.com/brighte-labs/spark-web/commit/c6749475b0245718300c290f6e521609012aaf6b)
18
+ Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Updated
19
+ types based on prettier config
20
+
21
+ - Updated dependencies
22
+ [[`c674947`](https://github.com/brighte-labs/spark-web/commit/c6749475b0245718300c290f6e521609012aaf6b)]:
23
+ - @spark-web/theme@3.2.1
24
+
3
25
  ## 1.5.0
4
26
 
5
27
  ### Minor Changes
@@ -1,6 +1,6 @@
1
1
  import type { BoxProps } from '@spark-web/box';
2
2
  import type { MouseEvent as ReactMouseEvent } from 'react';
3
- import type { NativeButtonProps } from './types';
3
+ import type { NativeButtonProps } from "./types.js";
4
4
  export declare type BaseButtonProps = NativeButtonProps & Partial<BoxProps>;
5
5
  export declare const BaseButton: import("react").ForwardRefExoticComponent<NativeButtonProps & Partial<BoxProps> & import("react").RefAttributes<HTMLButtonElement>>;
6
6
  /**
@@ -1,9 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  import type { LinkComponentProps } from '@spark-web/link';
3
- import type { CommonButtonProps } from './types';
3
+ import type { CommonButtonProps } from "./types.js";
4
4
  export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
5
5
  /** The appearance of a `Button`, with the semantics of a link. */
6
- export declare const ButtonLink: <Comp extends import("react").ElementType<any> = "a">(props: {
6
+ export declare const ButtonLink: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: {
7
7
  as?: Comp | undefined;
8
- ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
8
+ ref?: import("react").Ref<Comp extends "symbol" | "switch" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "switch" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
9
9
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import type { CommonButtonProps, NativeButtonProps } from './types';
2
+ import type { CommonButtonProps, NativeButtonProps } from "./types.js";
3
3
  export declare type ButtonProps = CommonButtonProps & {
4
4
  /**
5
5
  * Identifies the element (or elements) whose contents or presence
@@ -1,9 +1,9 @@
1
- export { BaseButton } from './base-button';
2
- export { Button } from './button';
3
- export { ButtonLink } from './button-link';
4
- export { useButtonStyles } from './use-button-styles';
5
- export type { BaseButtonProps } from './base-button';
6
- export type { ButtonProps } from './button';
7
- export type { ButtonLinkProps } from './button-link';
8
- export type { ButtonChildrenProps, ButtonProminence, ButtonSize, ButtonTone, } from './types';
9
- export type { UseButtonStylesProps } from './use-button-styles';
1
+ export { BaseButton } from "./base-button.js";
2
+ export { Button } from "./button.js";
3
+ export { ButtonLink } from "./button-link.js";
4
+ export { useButtonStyles } from "./use-button-styles.js";
5
+ export type { BaseButtonProps } from "./base-button.js";
6
+ export type { ButtonProps } from "./button.js";
7
+ export type { ButtonLinkProps } from "./button-link.js";
8
+ export type { ButtonChildrenProps, ButtonProminence, ButtonSize, ButtonTone, } from "./types.js";
9
+ export type { UseButtonStylesProps } from "./use-button-styles.js";
@@ -2,8 +2,8 @@ import type { BackgroundTone } from '@spark-web/a11y';
2
2
  import type { IconProps } from '@spark-web/icon';
3
3
  import type { DataAttributeMap } from '@spark-web/utils/internal';
4
4
  import type { ButtonHTMLAttributes, ReactElement } from 'react';
5
- import type { mapTokens } from './utils';
6
- export declare type ButtonSize = keyof typeof mapTokens[keyof typeof mapTokens];
5
+ import type { mapTokens } from "./utils.js";
6
+ export declare type ButtonSize = keyof (typeof mapTokens)[keyof typeof mapTokens];
7
7
  export declare type ButtonProminence = 'high' | 'low' | 'none';
8
8
  export declare type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
9
9
  declare type ChildrenWithText = {
@@ -1,4 +1,4 @@
1
- import type { ButtonProminence, ButtonSize, ButtonTone } from './types';
1
+ import type { ButtonProminence, ButtonSize, ButtonTone } from "./types.js";
2
2
  /**
3
3
  * useButtonStyles
4
4
  *
@@ -9,8 +9,8 @@ import type { ButtonProminence, ButtonSize, ButtonTone } from './types';
9
9
  */
10
10
  export declare function useButtonStyles({ iconOnly, prominence, size, tone, }: UseButtonStylesProps): readonly [{
11
11
  readonly alignItems: "center";
12
- readonly background: "body" | "input" | "disabled" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
13
- readonly border: import("@spark-web/theme").ResponsiveProp<"standard" | "fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | "positiveMuted" | "standardInverted" | "field" | "fieldHover" | "fieldDisabled" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive"> | undefined;
12
+ readonly background: "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "body" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | "input" | "inputPressed" | "inputDisabled" | "accent" | "accentMuted" | "neutral" | "neutralLow" | "primary" | "primaryLow" | "primaryMuted" | "secondary" | "secondaryLow" | "secondaryMuted" | "caution" | "cautionLow" | "cautionMuted" | "critical" | "criticalLow" | "criticalMuted" | "info" | "infoLow" | "infoMuted" | "positive" | "positiveLow" | "positiveMuted" | undefined;
13
+ readonly border: import("@spark-web/theme").ResponsiveProp<"standard" | "fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | "positiveMuted" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive" | "standardInverted" | "field" | "fieldHover" | "fieldDisabled"> | undefined;
14
14
  readonly borderWidth: import("@spark-web/theme").ResponsiveProp<"standard" | "large"> | undefined;
15
15
  readonly borderRadius: "small" | "medium";
16
16
  readonly cursor: "pointer";
@@ -1,7 +1,7 @@
1
1
  import type { BoxProps } from '@spark-web/box';
2
2
  import type { ForegroundTone } from '@spark-web/text';
3
3
  import type { BrighteTheme } from '@spark-web/theme';
4
- import type { ButtonProminence, ButtonTone } from './types';
4
+ import type { ButtonProminence, ButtonTone } from "./types.js";
5
5
  declare type BaseButtonStyles = {
6
6
  background: BoxProps['background'];
7
7
  border?: BoxProps['border'];
@@ -1 +1,2 @@
1
1
  export * from "./declarations/src/index";
2
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJ1dHRvbi5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
@@ -35,7 +35,7 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
35
35
  */
36
36
  var onClick = react.useCallback(function (event) {
37
37
  var _internalRef$current;
38
- (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
38
+ (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 || _internalRef$current.focus();
39
39
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
40
40
  preventableClickHandler(event);
41
41
  }, [disabled, onClickProp]);
@@ -60,7 +60,7 @@ function getPreventableClickHandler(onClick, disabled) {
60
60
  if (disabled) {
61
61
  event.preventDefault();
62
62
  } else {
63
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
63
+ onClick === null || onClick === void 0 || onClick(event);
64
64
  }
65
65
  };
66
66
  }
@@ -397,8 +397,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
397
397
  _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
398
398
  boxProps = _useButtonStyles2[0],
399
399
  buttonStyles = _useButtonStyles2[1];
400
- var isDisabled = disabled || loading;
401
- var isLoading = loading && !disabled;
402
400
  var variant = variants[prominence][tone];
403
401
  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
404
402
  "aria-controls": ariaControls,
@@ -407,17 +405,17 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
407
405
  "aria-label": props.label,
408
406
  className: css.css(buttonStyles),
409
407
  data: data,
410
- disabled: isDisabled,
408
+ disabled: loading || disabled,
411
409
  id: id,
412
410
  onClick: onClick,
413
411
  ref: forwardedRef,
414
412
  type: type,
415
413
  children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
416
- isLoading: isLoading,
414
+ isLoading: loading,
417
415
  prominence: prominence,
418
416
  size: size,
419
417
  tone: tone
420
- })), isLoading && /*#__PURE__*/jsxRuntime.jsx(Loading, {
418
+ })), loading && /*#__PURE__*/jsxRuntime.jsx(Loading, {
421
419
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone
422
420
  })]
423
421
  }));
@@ -35,7 +35,7 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
35
35
  */
36
36
  var onClick = react.useCallback(function (event) {
37
37
  var _internalRef$current;
38
- (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
38
+ (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 || _internalRef$current.focus();
39
39
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
40
40
  preventableClickHandler(event);
41
41
  }, [disabled, onClickProp]);
@@ -60,7 +60,7 @@ function getPreventableClickHandler(onClick, disabled) {
60
60
  if (disabled) {
61
61
  event.preventDefault();
62
62
  } else {
63
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
63
+ onClick === null || onClick === void 0 || onClick(event);
64
64
  }
65
65
  };
66
66
  }
@@ -397,8 +397,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
397
397
  _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
398
398
  boxProps = _useButtonStyles2[0],
399
399
  buttonStyles = _useButtonStyles2[1];
400
- var isDisabled = disabled || loading;
401
- var isLoading = loading && !disabled;
402
400
  var variant = variants[prominence][tone];
403
401
  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
404
402
  "aria-controls": ariaControls,
@@ -407,17 +405,17 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
407
405
  "aria-label": props.label,
408
406
  className: css.css(buttonStyles),
409
407
  data: data,
410
- disabled: isDisabled,
408
+ disabled: loading || disabled,
411
409
  id: id,
412
410
  onClick: onClick,
413
411
  ref: forwardedRef,
414
412
  type: type,
415
413
  children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
416
- isLoading: isLoading,
414
+ isLoading: loading,
417
415
  prominence: prominence,
418
416
  size: size,
419
417
  tone: tone
420
- })), isLoading && /*#__PURE__*/jsxRuntime.jsx(Loading, {
418
+ })), loading && /*#__PURE__*/jsxRuntime.jsx(Loading, {
421
419
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone
422
420
  })]
423
421
  }));
@@ -31,7 +31,7 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
31
31
  */
32
32
  var onClick = useCallback(function (event) {
33
33
  var _internalRef$current;
34
- (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
34
+ (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 || _internalRef$current.focus();
35
35
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
36
36
  preventableClickHandler(event);
37
37
  }, [disabled, onClickProp]);
@@ -56,7 +56,7 @@ function getPreventableClickHandler(onClick, disabled) {
56
56
  if (disabled) {
57
57
  event.preventDefault();
58
58
  } else {
59
- onClick === null || onClick === void 0 ? void 0 : onClick(event);
59
+ onClick === null || onClick === void 0 || onClick(event);
60
60
  }
61
61
  };
62
62
  }
@@ -393,8 +393,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
393
393
  _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
394
394
  boxProps = _useButtonStyles2[0],
395
395
  buttonStyles = _useButtonStyles2[1];
396
- var isDisabled = disabled || loading;
397
- var isLoading = loading && !disabled;
398
396
  var variant = variants[prominence][tone];
399
397
  return /*#__PURE__*/jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
400
398
  "aria-controls": ariaControls,
@@ -403,17 +401,17 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
403
401
  "aria-label": props.label,
404
402
  className: css(buttonStyles),
405
403
  data: data,
406
- disabled: isDisabled,
404
+ disabled: loading || disabled,
407
405
  id: id,
408
406
  onClick: onClick,
409
407
  ref: forwardedRef,
410
408
  type: type,
411
409
  children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
412
- isLoading: isLoading,
410
+ isLoading: loading,
413
411
  prominence: prominence,
414
412
  size: size,
415
413
  tone: tone
416
- })), isLoading && /*#__PURE__*/jsx(Loading, {
414
+ })), loading && /*#__PURE__*/jsx(Loading, {
417
415
  tone: variant === null || variant === void 0 ? void 0 : variant.textTone
418
416
  })]
419
417
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/button",
3
- "version": "1.5.0",
3
+ "version": "1.5.2",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -16,14 +16,14 @@
16
16
  ],
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.19.0",
19
- "@emotion/css": "^11.9.0",
19
+ "@emotion/css": "^11.11.2",
20
20
  "@spark-web/a11y": "^1.4.0",
21
21
  "@spark-web/box": "^1.2.0",
22
22
  "@spark-web/icon": "^1.3.0",
23
23
  "@spark-web/link": "^1.1.0",
24
24
  "@spark-web/spinner": "^1.1.0",
25
25
  "@spark-web/text": "^1.2.0",
26
- "@spark-web/theme": "^3.2.0",
26
+ "@spark-web/theme": "^3.2.1",
27
27
  "@spark-web/utils": "^1.3.0"
28
28
  },
29
29
  "devDependencies": {
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- import type { ButtonChildrenProps, ButtonProminence, ButtonSize, ButtonTone } from './types';
3
- declare type ResolveButtonChildren = ButtonChildrenProps & {
4
- isLoading: boolean;
5
- prominence: ButtonProminence;
6
- size: ButtonSize;
7
- tone: ButtonTone;
8
- };
9
- export declare const resolveButtonChildren: ({ children, isLoading, prominence, size, tone, }: ResolveButtonChildren) => JSX.Element[];
10
- export {};