@spark-web/button 1.4.4 → 1.5.0

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/declarations/src/button-link.d.ts +1 -1
  3. package/dist/declarations/src/use-button-styles.d.ts +1 -1
  4. package/dist/spark-web-button.cjs.dev.js +59 -72
  5. package/dist/spark-web-button.cjs.prod.js +59 -72
  6. package/dist/spark-web-button.esm.js +59 -72
  7. package/package.json +11 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
1
1
  # @spark-web/button
2
2
 
3
+ ## 1.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#382](https://github.com/brighte-labs/spark-web/pull/382)
8
+ [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
9
+ Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
10
+ version to latest (18.2.0)
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+ [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
16
+ - @spark-web/a11y@1.4.0
17
+ - @spark-web/box@1.2.0
18
+ - @spark-web/icon@1.3.0
19
+ - @spark-web/link@1.1.0
20
+ - @spark-web/spinner@1.1.0
21
+ - @spark-web/text@1.2.0
22
+ - @spark-web/theme@3.2.0
23
+ - @spark-web/utils@1.3.0
24
+
25
+ ## 1.4.5
26
+
27
+ ### Patch Changes
28
+
29
+ - [#274](https://github.com/brighte-labs/spark-web/pull/274)
30
+ [`b6976e3`](https://github.com/brighte-labs/spark-web/commit/b6976e36ab0a577ba700660c5dc8d2d1251082bb)
31
+ Thanks [@szhang-brighte](https://github.com/szhang-brighte)! - update
32
+ @spark-web/link version
33
+
3
34
  ## 1.4.4
4
35
 
5
36
  ### Patch Changes
package/dist/declarations/src/button-link.d.ts CHANGED
@@ -5,5 +5,5 @@ export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
5
5
  /** The appearance of a `Button`, with the semantics of a link. */
6
6
  export declare const ButtonLink: <Comp extends import("react").ElementType<any> = "a">(props: {
7
7
  as?: Comp | undefined;
8
- ref?: import("react").Ref<Comp extends "symbol" | "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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "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" | "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" | "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;
9
9
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/declarations/src/use-button-styles.d.ts CHANGED
@@ -9,7 +9,7 @@ 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" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "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;
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
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;
14
14
  readonly borderWidth: import("@spark-web/theme").ResponsiveProp<"standard" | "large"> | undefined;
15
15
  readonly borderRadius: "small" | "medium";
package/dist/spark-web-button.cjs.dev.js CHANGED
@@ -20,12 +20,11 @@ var ts = require('@spark-web/utils/ts');
20
20
  var _excluded$2 = ["onClick", "disabled", "type"];
21
21
  var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
22
22
  var onClickProp = _ref.onClick,
23
- _ref$disabled = _ref.disabled,
24
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
25
- _ref$type = _ref.type,
26
- type = _ref$type === void 0 ? 'button' : _ref$type,
27
- consumerProps = _objectWithoutProperties(_ref, _excluded$2);
28
-
23
+ _ref$disabled = _ref.disabled,
24
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
25
+ _ref$type = _ref.type,
26
+ type = _ref$type === void 0 ? 'button' : _ref$type,
27
+ consumerProps = _objectWithoutProperties(_ref, _excluded$2);
29
28
  var internalRef = react.useRef(null);
30
29
  var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
31
30
  /**
@@ -34,17 +33,16 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
34
33
  * To fix this we need to manually focus the button element after the user
35
34
  * presses the element.
36
35
  */
37
-
38
36
  var onClick = react.useCallback(function (event) {
39
37
  var _internalRef$current;
40
-
41
38
  (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
42
39
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
43
40
  preventableClickHandler(event);
44
41
  }, [disabled, onClickProp]);
45
42
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
46
43
  as: "button",
47
- ref: composedRef // Hide aria-disabled attribute when button is not disabled
44
+ ref: composedRef
45
+ // Hide aria-disabled attribute when button is not disabled
48
46
  ,
49
47
  "aria-disabled": disabled || undefined,
50
48
  onClick: onClick,
@@ -52,11 +50,11 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
52
50
  }));
53
51
  });
54
52
  BaseButton.displayName = 'BaseButton';
53
+
55
54
  /**
56
55
  * handle "disabled" behaviour w/o disabling buttons
57
56
  * @see https://axesslab.com/disabled-buttons-suck/
58
57
  */
59
-
60
58
  function getPreventableClickHandler(onClick, disabled) {
61
59
  return function handleClick(event) {
62
60
  if (disabled) {
@@ -234,10 +232,10 @@ var mapTokens = {
234
232
 
235
233
  var resolveButtonChildren = function resolveButtonChildren(_ref) {
236
234
  var children = _ref.children,
237
- isLoading = _ref.isLoading,
238
- prominence = _ref.prominence,
239
- size = _ref.size,
240
- tone = _ref.tone;
235
+ isLoading = _ref.isLoading,
236
+ prominence = _ref.prominence,
237
+ size = _ref.size,
238
+ tone = _ref.tone;
241
239
  var variant = variants[prominence][tone];
242
240
  return react.Children.map(children, function (child) {
243
241
  if (typeof child === 'string' || typeof child === 'number') {
@@ -254,7 +252,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
254
252
  })
255
253
  });
256
254
  }
257
-
258
255
  if ( /*#__PURE__*/react.isValidElement(child)) {
259
256
  return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
260
257
  isLoading: isLoading,
@@ -269,14 +266,12 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
269
266
  })
270
267
  });
271
268
  }
272
-
273
269
  return null;
274
270
  });
275
271
  };
276
-
277
272
  function HiddenWhenLoading(_ref2) {
278
273
  var children = _ref2.children,
279
- isLoading = _ref2.isLoading;
274
+ isLoading = _ref2.isLoading;
280
275
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
281
276
  as: "span",
282
277
  display: "inline-flex",
@@ -287,6 +282,8 @@ function HiddenWhenLoading(_ref2) {
287
282
  });
288
283
  }
289
284
 
285
+ ////////////////////////////////////////////////////////////////////////////////
286
+
290
287
  /**
291
288
  * useButtonStyles
292
289
  *
@@ -295,12 +292,11 @@ function HiddenWhenLoading(_ref2) {
295
292
  * underlying `Box` component, and the second item is a CSS object that can be
296
293
  * passed to Emotion's `css` function.
297
294
  */
298
-
299
295
  function useButtonStyles(_ref) {
300
296
  var iconOnly = _ref.iconOnly,
301
- prominence = _ref.prominence,
302
- size = _ref.size,
303
- tone = _ref.tone;
297
+ prominence = _ref.prominence,
298
+ size = _ref.size,
299
+ tone = _ref.tone;
304
300
  var theme$1 = theme.useTheme();
305
301
  var focusRingStyles = a11y.useFocusRing({
306
302
  tone: tone
@@ -369,42 +365,38 @@ function useButtonStyles(_ref) {
369
365
  }
370
366
 
371
367
  var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
372
-
373
368
  /**
374
369
  * Buttons are used to initialize an action, their label should express what
375
370
  * action will occur when the user interacts with it.
376
371
  */
377
372
  var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
378
373
  var ariaControls = _ref['aria-controls'],
379
- ariaDescribedBy = _ref['aria-describedby'],
380
- ariaExpanded = _ref['aria-expanded'],
381
- data = _ref.data,
382
- disabled = _ref.disabled,
383
- id = _ref.id,
384
- _ref$loading = _ref.loading,
385
- loading = _ref$loading === void 0 ? false : _ref$loading,
386
- onClick = _ref.onClick,
387
- _ref$prominence = _ref.prominence,
388
- prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
389
- _ref$size = _ref.size,
390
- size = _ref$size === void 0 ? 'medium' : _ref$size,
391
- _ref$tone = _ref.tone,
392
- tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
393
- type = _ref.type,
394
- props = _objectWithoutProperties(_ref, _excluded$1);
395
-
374
+ ariaDescribedBy = _ref['aria-describedby'],
375
+ ariaExpanded = _ref['aria-expanded'],
376
+ data = _ref.data,
377
+ disabled = _ref.disabled,
378
+ id = _ref.id,
379
+ _ref$loading = _ref.loading,
380
+ loading = _ref$loading === void 0 ? false : _ref$loading,
381
+ onClick = _ref.onClick,
382
+ _ref$prominence = _ref.prominence,
383
+ prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
384
+ _ref$size = _ref.size,
385
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
386
+ _ref$tone = _ref.tone,
387
+ tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
388
+ type = _ref.type,
389
+ props = _objectWithoutProperties(_ref, _excluded$1);
396
390
  var iconOnly = Boolean(props.label);
397
-
398
391
  var _useButtonStyles = useButtonStyles({
399
- iconOnly: iconOnly,
400
- size: size,
401
- tone: tone,
402
- prominence: prominence
403
- }),
404
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
405
- boxProps = _useButtonStyles2[0],
406
- buttonStyles = _useButtonStyles2[1];
407
-
392
+ iconOnly: iconOnly,
393
+ size: size,
394
+ tone: tone,
395
+ prominence: prominence
396
+ }),
397
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
398
+ boxProps = _useButtonStyles2[0],
399
+ buttonStyles = _useButtonStyles2[1];
408
400
  var isDisabled = disabled || loading;
409
401
  var isLoading = loading && !disabled;
410
402
  var variant = variants[prominence][tone];
@@ -431,7 +423,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
431
423
  }));
432
424
  });
433
425
  Button.displayName = 'Button';
434
-
435
426
  function Loading(_ref2) {
436
427
  var tone = _ref2.tone;
437
428
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -454,33 +445,29 @@ function Loading(_ref2) {
454
445
  }
455
446
 
456
447
  var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
457
-
458
448
  /** The appearance of a `Button`, with the semantics of a link. */
459
449
  var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
460
450
  var data = _ref.data,
461
- href = _ref.href,
462
- id = _ref.id,
463
- _ref$prominence = _ref.prominence,
464
- prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
465
- _ref$size = _ref.size,
466
- size = _ref$size === void 0 ? 'medium' : _ref$size,
467
- _ref$tone = _ref.tone,
468
- tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
469
- consumerProps = _objectWithoutProperties(_ref, _excluded);
470
-
451
+ href = _ref.href,
452
+ id = _ref.id,
453
+ _ref$prominence = _ref.prominence,
454
+ prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
455
+ _ref$size = _ref.size,
456
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
457
+ _ref$tone = _ref.tone,
458
+ tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
459
+ consumerProps = _objectWithoutProperties(_ref, _excluded);
471
460
  var LinkComponent = link.useLinkComponent(forwardedRef);
472
461
  var iconOnly = Boolean(consumerProps.label);
473
-
474
462
  var _useButtonStyles = useButtonStyles({
475
- iconOnly: iconOnly,
476
- prominence: prominence,
477
- size: size,
478
- tone: tone
479
- }),
480
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
481
- boxProps = _useButtonStyles2[0],
482
- buttonStyles = _useButtonStyles2[1];
483
-
463
+ iconOnly: iconOnly,
464
+ prominence: prominence,
465
+ size: size,
466
+ tone: tone
467
+ }),
468
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
469
+ boxProps = _useButtonStyles2[0],
470
+ buttonStyles = _useButtonStyles2[1];
484
471
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, boxProps), {}, {
485
472
  "aria-label": consumerProps.label,
486
473
  as: LinkComponent,
package/dist/spark-web-button.cjs.prod.js CHANGED
@@ -20,12 +20,11 @@ var ts = require('@spark-web/utils/ts');
20
20
  var _excluded$2 = ["onClick", "disabled", "type"];
21
21
  var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
22
22
  var onClickProp = _ref.onClick,
23
- _ref$disabled = _ref.disabled,
24
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
25
- _ref$type = _ref.type,
26
- type = _ref$type === void 0 ? 'button' : _ref$type,
27
- consumerProps = _objectWithoutProperties(_ref, _excluded$2);
28
-
23
+ _ref$disabled = _ref.disabled,
24
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
25
+ _ref$type = _ref.type,
26
+ type = _ref$type === void 0 ? 'button' : _ref$type,
27
+ consumerProps = _objectWithoutProperties(_ref, _excluded$2);
29
28
  var internalRef = react.useRef(null);
30
29
  var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
31
30
  /**
@@ -34,17 +33,16 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
34
33
  * To fix this we need to manually focus the button element after the user
35
34
  * presses the element.
36
35
  */
37
-
38
36
  var onClick = react.useCallback(function (event) {
39
37
  var _internalRef$current;
40
-
41
38
  (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
42
39
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
43
40
  preventableClickHandler(event);
44
41
  }, [disabled, onClickProp]);
45
42
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
46
43
  as: "button",
47
- ref: composedRef // Hide aria-disabled attribute when button is not disabled
44
+ ref: composedRef
45
+ // Hide aria-disabled attribute when button is not disabled
48
46
  ,
49
47
  "aria-disabled": disabled || undefined,
50
48
  onClick: onClick,
@@ -52,11 +50,11 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
52
50
  }));
53
51
  });
54
52
  BaseButton.displayName = 'BaseButton';
53
+
55
54
  /**
56
55
  * handle "disabled" behaviour w/o disabling buttons
57
56
  * @see https://axesslab.com/disabled-buttons-suck/
58
57
  */
59
-
60
58
  function getPreventableClickHandler(onClick, disabled) {
61
59
  return function handleClick(event) {
62
60
  if (disabled) {
@@ -234,10 +232,10 @@ var mapTokens = {
234
232
 
235
233
  var resolveButtonChildren = function resolveButtonChildren(_ref) {
236
234
  var children = _ref.children,
237
- isLoading = _ref.isLoading,
238
- prominence = _ref.prominence,
239
- size = _ref.size,
240
- tone = _ref.tone;
235
+ isLoading = _ref.isLoading,
236
+ prominence = _ref.prominence,
237
+ size = _ref.size,
238
+ tone = _ref.tone;
241
239
  var variant = variants[prominence][tone];
242
240
  return react.Children.map(children, function (child) {
243
241
  if (typeof child === 'string' || typeof child === 'number') {
@@ -254,7 +252,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
254
252
  })
255
253
  });
256
254
  }
257
-
258
255
  if ( /*#__PURE__*/react.isValidElement(child)) {
259
256
  return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
260
257
  isLoading: isLoading,
@@ -269,14 +266,12 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
269
266
  })
270
267
  });
271
268
  }
272
-
273
269
  return null;
274
270
  });
275
271
  };
276
-
277
272
  function HiddenWhenLoading(_ref2) {
278
273
  var children = _ref2.children,
279
- isLoading = _ref2.isLoading;
274
+ isLoading = _ref2.isLoading;
280
275
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
281
276
  as: "span",
282
277
  display: "inline-flex",
@@ -287,6 +282,8 @@ function HiddenWhenLoading(_ref2) {
287
282
  });
288
283
  }
289
284
 
285
+ ////////////////////////////////////////////////////////////////////////////////
286
+
290
287
  /**
291
288
  * useButtonStyles
292
289
  *
@@ -295,12 +292,11 @@ function HiddenWhenLoading(_ref2) {
295
292
  * underlying `Box` component, and the second item is a CSS object that can be
296
293
  * passed to Emotion's `css` function.
297
294
  */
298
-
299
295
  function useButtonStyles(_ref) {
300
296
  var iconOnly = _ref.iconOnly,
301
- prominence = _ref.prominence,
302
- size = _ref.size,
303
- tone = _ref.tone;
297
+ prominence = _ref.prominence,
298
+ size = _ref.size,
299
+ tone = _ref.tone;
304
300
  var theme$1 = theme.useTheme();
305
301
  var focusRingStyles = a11y.useFocusRing({
306
302
  tone: tone
@@ -369,42 +365,38 @@ function useButtonStyles(_ref) {
369
365
  }
370
366
 
371
367
  var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
372
-
373
368
  /**
374
369
  * Buttons are used to initialize an action, their label should express what
375
370
  * action will occur when the user interacts with it.
376
371
  */
377
372
  var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
378
373
  var ariaControls = _ref['aria-controls'],
379
- ariaDescribedBy = _ref['aria-describedby'],
380
- ariaExpanded = _ref['aria-expanded'],
381
- data = _ref.data,
382
- disabled = _ref.disabled,
383
- id = _ref.id,
384
- _ref$loading = _ref.loading,
385
- loading = _ref$loading === void 0 ? false : _ref$loading,
386
- onClick = _ref.onClick,
387
- _ref$prominence = _ref.prominence,
388
- prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
389
- _ref$size = _ref.size,
390
- size = _ref$size === void 0 ? 'medium' : _ref$size,
391
- _ref$tone = _ref.tone,
392
- tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
393
- type = _ref.type,
394
- props = _objectWithoutProperties(_ref, _excluded$1);
395
-
374
+ ariaDescribedBy = _ref['aria-describedby'],
375
+ ariaExpanded = _ref['aria-expanded'],
376
+ data = _ref.data,
377
+ disabled = _ref.disabled,
378
+ id = _ref.id,
379
+ _ref$loading = _ref.loading,
380
+ loading = _ref$loading === void 0 ? false : _ref$loading,
381
+ onClick = _ref.onClick,
382
+ _ref$prominence = _ref.prominence,
383
+ prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
384
+ _ref$size = _ref.size,
385
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
386
+ _ref$tone = _ref.tone,
387
+ tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
388
+ type = _ref.type,
389
+ props = _objectWithoutProperties(_ref, _excluded$1);
396
390
  var iconOnly = Boolean(props.label);
397
-
398
391
  var _useButtonStyles = useButtonStyles({
399
- iconOnly: iconOnly,
400
- size: size,
401
- tone: tone,
402
- prominence: prominence
403
- }),
404
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
405
- boxProps = _useButtonStyles2[0],
406
- buttonStyles = _useButtonStyles2[1];
407
-
392
+ iconOnly: iconOnly,
393
+ size: size,
394
+ tone: tone,
395
+ prominence: prominence
396
+ }),
397
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
398
+ boxProps = _useButtonStyles2[0],
399
+ buttonStyles = _useButtonStyles2[1];
408
400
  var isDisabled = disabled || loading;
409
401
  var isLoading = loading && !disabled;
410
402
  var variant = variants[prominence][tone];
@@ -431,7 +423,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
431
423
  }));
432
424
  });
433
425
  Button.displayName = 'Button';
434
-
435
426
  function Loading(_ref2) {
436
427
  var tone = _ref2.tone;
437
428
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
@@ -454,33 +445,29 @@ function Loading(_ref2) {
454
445
  }
455
446
 
456
447
  var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
457
-
458
448
  /** The appearance of a `Button`, with the semantics of a link. */
459
449
  var ButtonLink = ts.forwardRefWithAs(function (_ref, forwardedRef) {
460
450
  var data = _ref.data,
461
- href = _ref.href,
462
- id = _ref.id,
463
- _ref$prominence = _ref.prominence,
464
- prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
465
- _ref$size = _ref.size,
466
- size = _ref$size === void 0 ? 'medium' : _ref$size,
467
- _ref$tone = _ref.tone,
468
- tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
469
- consumerProps = _objectWithoutProperties(_ref, _excluded);
470
-
451
+ href = _ref.href,
452
+ id = _ref.id,
453
+ _ref$prominence = _ref.prominence,
454
+ prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
455
+ _ref$size = _ref.size,
456
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
457
+ _ref$tone = _ref.tone,
458
+ tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
459
+ consumerProps = _objectWithoutProperties(_ref, _excluded);
471
460
  var LinkComponent = link.useLinkComponent(forwardedRef);
472
461
  var iconOnly = Boolean(consumerProps.label);
473
-
474
462
  var _useButtonStyles = useButtonStyles({
475
- iconOnly: iconOnly,
476
- prominence: prominence,
477
- size: size,
478
- tone: tone
479
- }),
480
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
481
- boxProps = _useButtonStyles2[0],
482
- buttonStyles = _useButtonStyles2[1];
483
-
463
+ iconOnly: iconOnly,
464
+ prominence: prominence,
465
+ size: size,
466
+ tone: tone
467
+ }),
468
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
469
+ boxProps = _useButtonStyles2[0],
470
+ buttonStyles = _useButtonStyles2[1];
484
471
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, boxProps), {}, {
485
472
  "aria-label": consumerProps.label,
486
473
  as: LinkComponent,
package/dist/spark-web-button.esm.js CHANGED
@@ -16,12 +16,11 @@ import { forwardRefWithAs } from '@spark-web/utils/ts';
16
16
  var _excluded$2 = ["onClick", "disabled", "type"];
17
17
  var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
18
18
  var onClickProp = _ref.onClick,
19
- _ref$disabled = _ref.disabled,
20
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
21
- _ref$type = _ref.type,
22
- type = _ref$type === void 0 ? 'button' : _ref$type,
23
- consumerProps = _objectWithoutProperties(_ref, _excluded$2);
24
-
19
+ _ref$disabled = _ref.disabled,
20
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
21
+ _ref$type = _ref.type,
22
+ type = _ref$type === void 0 ? 'button' : _ref$type,
23
+ consumerProps = _objectWithoutProperties(_ref, _excluded$2);
25
24
  var internalRef = useRef(null);
26
25
  var composedRef = useComposedRefs(internalRef, forwardedRef);
27
26
  /**
@@ -30,17 +29,16 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
30
29
  * To fix this we need to manually focus the button element after the user
31
30
  * presses the element.
32
31
  */
33
-
34
32
  var onClick = useCallback(function (event) {
35
33
  var _internalRef$current;
36
-
37
34
  (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
38
35
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
39
36
  preventableClickHandler(event);
40
37
  }, [disabled, onClickProp]);
41
38
  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
42
39
  as: "button",
43
- ref: composedRef // Hide aria-disabled attribute when button is not disabled
40
+ ref: composedRef
41
+ // Hide aria-disabled attribute when button is not disabled
44
42
  ,
45
43
  "aria-disabled": disabled || undefined,
46
44
  onClick: onClick,
@@ -48,11 +46,11 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
48
46
  }));
49
47
  });
50
48
  BaseButton.displayName = 'BaseButton';
49
+
51
50
  /**
52
51
  * handle "disabled" behaviour w/o disabling buttons
53
52
  * @see https://axesslab.com/disabled-buttons-suck/
54
53
  */
55
-
56
54
  function getPreventableClickHandler(onClick, disabled) {
57
55
  return function handleClick(event) {
58
56
  if (disabled) {
@@ -230,10 +228,10 @@ var mapTokens = {
230
228
 
231
229
  var resolveButtonChildren = function resolveButtonChildren(_ref) {
232
230
  var children = _ref.children,
233
- isLoading = _ref.isLoading,
234
- prominence = _ref.prominence,
235
- size = _ref.size,
236
- tone = _ref.tone;
231
+ isLoading = _ref.isLoading,
232
+ prominence = _ref.prominence,
233
+ size = _ref.size,
234
+ tone = _ref.tone;
237
235
  var variant = variants[prominence][tone];
238
236
  return Children.map(children, function (child) {
239
237
  if (typeof child === 'string' || typeof child === 'number') {
@@ -250,7 +248,6 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
250
248
  })
251
249
  });
252
250
  }
253
-
254
251
  if ( /*#__PURE__*/isValidElement(child)) {
255
252
  return /*#__PURE__*/jsx(HiddenWhenLoading, {
256
253
  isLoading: isLoading,
@@ -265,14 +262,12 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
265
262
  })
266
263
  });
267
264
  }
268
-
269
265
  return null;
270
266
  });
271
267
  };
272
-
273
268
  function HiddenWhenLoading(_ref2) {
274
269
  var children = _ref2.children,
275
- isLoading = _ref2.isLoading;
270
+ isLoading = _ref2.isLoading;
276
271
  return /*#__PURE__*/jsx(Box, {
277
272
  as: "span",
278
273
  display: "inline-flex",
@@ -283,6 +278,8 @@ function HiddenWhenLoading(_ref2) {
283
278
  });
284
279
  }
285
280
 
281
+ ////////////////////////////////////////////////////////////////////////////////
282
+
286
283
  /**
287
284
  * useButtonStyles
288
285
  *
@@ -291,12 +288,11 @@ function HiddenWhenLoading(_ref2) {
291
288
  * underlying `Box` component, and the second item is a CSS object that can be
292
289
  * passed to Emotion's `css` function.
293
290
  */
294
-
295
291
  function useButtonStyles(_ref) {
296
292
  var iconOnly = _ref.iconOnly,
297
- prominence = _ref.prominence,
298
- size = _ref.size,
299
- tone = _ref.tone;
293
+ prominence = _ref.prominence,
294
+ size = _ref.size,
295
+ tone = _ref.tone;
300
296
  var theme = useTheme();
301
297
  var focusRingStyles = useFocusRing({
302
298
  tone: tone
@@ -365,42 +361,38 @@ function useButtonStyles(_ref) {
365
361
  }
366
362
 
367
363
  var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
368
-
369
364
  /**
370
365
  * Buttons are used to initialize an action, their label should express what
371
366
  * action will occur when the user interacts with it.
372
367
  */
373
368
  var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
374
369
  var ariaControls = _ref['aria-controls'],
375
- ariaDescribedBy = _ref['aria-describedby'],
376
- ariaExpanded = _ref['aria-expanded'],
377
- data = _ref.data,
378
- disabled = _ref.disabled,
379
- id = _ref.id,
380
- _ref$loading = _ref.loading,
381
- loading = _ref$loading === void 0 ? false : _ref$loading,
382
- onClick = _ref.onClick,
383
- _ref$prominence = _ref.prominence,
384
- prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
385
- _ref$size = _ref.size,
386
- size = _ref$size === void 0 ? 'medium' : _ref$size,
387
- _ref$tone = _ref.tone,
388
- tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
389
- type = _ref.type,
390
- props = _objectWithoutProperties(_ref, _excluded$1);
391
-
370
+ ariaDescribedBy = _ref['aria-describedby'],
371
+ ariaExpanded = _ref['aria-expanded'],
372
+ data = _ref.data,
373
+ disabled = _ref.disabled,
374
+ id = _ref.id,
375
+ _ref$loading = _ref.loading,
376
+ loading = _ref$loading === void 0 ? false : _ref$loading,
377
+ onClick = _ref.onClick,
378
+ _ref$prominence = _ref.prominence,
379
+ prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
380
+ _ref$size = _ref.size,
381
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
382
+ _ref$tone = _ref.tone,
383
+ tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
384
+ type = _ref.type,
385
+ props = _objectWithoutProperties(_ref, _excluded$1);
392
386
  var iconOnly = Boolean(props.label);
393
-
394
387
  var _useButtonStyles = useButtonStyles({
395
- iconOnly: iconOnly,
396
- size: size,
397
- tone: tone,
398
- prominence: prominence
399
- }),
400
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
401
- boxProps = _useButtonStyles2[0],
402
- buttonStyles = _useButtonStyles2[1];
403
-
388
+ iconOnly: iconOnly,
389
+ size: size,
390
+ tone: tone,
391
+ prominence: prominence
392
+ }),
393
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
394
+ boxProps = _useButtonStyles2[0],
395
+ buttonStyles = _useButtonStyles2[1];
404
396
  var isDisabled = disabled || loading;
405
397
  var isLoading = loading && !disabled;
406
398
  var variant = variants[prominence][tone];
@@ -427,7 +419,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
427
419
  }));
428
420
  });
429
421
  Button.displayName = 'Button';
430
-
431
422
  function Loading(_ref2) {
432
423
  var tone = _ref2.tone;
433
424
  return /*#__PURE__*/jsxs(Box, {
@@ -450,33 +441,29 @@ function Loading(_ref2) {
450
441
  }
451
442
 
452
443
  var _excluded = ["data", "href", "id", "prominence", "size", "tone"];
453
-
454
444
  /** The appearance of a `Button`, with the semantics of a link. */
455
445
  var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
456
446
  var data = _ref.data,
457
- href = _ref.href,
458
- id = _ref.id,
459
- _ref$prominence = _ref.prominence,
460
- prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
461
- _ref$size = _ref.size,
462
- size = _ref$size === void 0 ? 'medium' : _ref$size,
463
- _ref$tone = _ref.tone,
464
- tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
465
- consumerProps = _objectWithoutProperties(_ref, _excluded);
466
-
447
+ href = _ref.href,
448
+ id = _ref.id,
449
+ _ref$prominence = _ref.prominence,
450
+ prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
451
+ _ref$size = _ref.size,
452
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
453
+ _ref$tone = _ref.tone,
454
+ tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
455
+ consumerProps = _objectWithoutProperties(_ref, _excluded);
467
456
  var LinkComponent = useLinkComponent(forwardedRef);
468
457
  var iconOnly = Boolean(consumerProps.label);
469
-
470
458
  var _useButtonStyles = useButtonStyles({
471
- iconOnly: iconOnly,
472
- prominence: prominence,
473
- size: size,
474
- tone: tone
475
- }),
476
- _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
477
- boxProps = _useButtonStyles2[0],
478
- buttonStyles = _useButtonStyles2[1];
479
-
459
+ iconOnly: iconOnly,
460
+ prominence: prominence,
461
+ size: size,
462
+ tone: tone
463
+ }),
464
+ _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
465
+ boxProps = _useButtonStyles2[0],
466
+ buttonStyles = _useButtonStyles2[1];
480
467
  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
481
468
  "aria-label": consumerProps.label,
482
469
  as: LinkComponent,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/button",
3
- "version": "1.4.4",
3
+ "version": "1.5.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,18 +17,18 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.19.0",
19
19
  "@emotion/css": "^11.9.0",
20
- "@spark-web/a11y": "^1.3.2",
21
- "@spark-web/box": "^1.1.0",
22
- "@spark-web/icon": "^1.2.2",
23
- "@spark-web/link": "^1.0.10",
24
- "@spark-web/spinner": "^1.0.8",
25
- "@spark-web/text": "^1.1.2",
26
- "@spark-web/theme": "^3.1.0",
27
- "@spark-web/utils": "^1.2.3"
20
+ "@spark-web/a11y": "^1.4.0",
21
+ "@spark-web/box": "^1.2.0",
22
+ "@spark-web/icon": "^1.3.0",
23
+ "@spark-web/link": "^1.1.0",
24
+ "@spark-web/spinner": "^1.1.0",
25
+ "@spark-web/text": "^1.2.0",
26
+ "@spark-web/theme": "^3.2.0",
27
+ "@spark-web/utils": "^1.3.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@types/react": "^17.0.12",
31
- "react": "^17.0.2"
30
+ "@types/react": "^18.2.0",
31
+ "react": "^18.2.0"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=17.0.2"