@purpurds/quantity-selector 7.6.1 → 7.7.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 (20) hide show
  1. package/.rush/temp/chunked-rush-logs/quantity-selector.ci_build.chunks.jsonl +4 -4
  2. package/.rush/temp/chunked-rush-logs/quantity-selector.test_unit.chunks.jsonl +3 -3
  3. package/.rush/temp/operation/ci_build/all.log +4 -4
  4. package/.rush/temp/operation/ci_build/log-chunks.jsonl +4 -4
  5. package/.rush/temp/operation/ci_build/state.json +1 -1
  6. package/.rush/temp/operation/test_unit/all.log +3 -3
  7. package/.rush/temp/operation/test_unit/log-chunks.jsonl +3 -3
  8. package/.rush/temp/operation/test_unit/state.json +1 -1
  9. package/.rush/temp/shrinkwrap-deps.json +1 -1
  10. package/dist/LICENSE.txt +4 -4
  11. package/dist/quantity-selector-button.d.ts.map +1 -1
  12. package/dist/quantity-selector.cjs.js +15 -15
  13. package/dist/quantity-selector.cjs.js.map +1 -1
  14. package/dist/quantity-selector.d.ts +3 -22
  15. package/dist/quantity-selector.d.ts.map +1 -1
  16. package/dist/quantity-selector.es.js +596 -682
  17. package/dist/quantity-selector.es.js.map +1 -1
  18. package/package.json +6 -5
  19. package/src/quantity-selector-button.tsx +6 -9
  20. package/src/quantity-selector.tsx +22 -29
package/src/quantity-selector.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import React, { type ChangeEvent, type ForwardedRef, forwardRef, useEffect, useState } from "react";
1
+ import React, { type ChangeEvent, forwardRef, useEffect, useState } from "react";
2
+ import type { BaseProps } from "@purpurds/common-types";
2
3
  import { Spinner } from "@purpurds/spinner";
3
4
  import { TextField } from "@purpurds/text-field";
4
5
  import c from "classnames/bind";
@@ -14,8 +15,7 @@ export const quantitySelectorButtonVariants = ["primary", "secondary"] as const;
14
15
  type Variant = (typeof quantitySelectorVariants)[number];
15
16
  type ButtonVariant = (typeof quantitySelectorButtonVariants)[number];
16
17
 
17
- export type QuantitySelectorProps = Omit<React.HTMLAttributes<HTMLElement>, "onChange"> & {
18
- ["data-testid"]?: string;
18
+ export type QuantitySelectorProps = Omit<BaseProps<"input">, "onChange" | "type"> & {
19
19
  variant: Variant;
20
20
  buttonVariant: ButtonVariant;
21
21
  onChange: (value: number) => void;
@@ -37,7 +37,7 @@ export type QuantitySelectorProps = Omit<React.HTMLAttributes<HTMLElement>, "onC
37
37
 
38
38
  const rootClassName = "purpur-quantity-selector";
39
39
 
40
- export const QuantitySelector = forwardRef(
40
+ export const QuantitySelector = forwardRef<HTMLInputElement, QuantitySelectorProps>(
41
41
  (
42
42
  {
43
43
  ["data-testid"]: dataTestId,
@@ -55,8 +55,8 @@ export const QuantitySelector = forwardRef(
55
55
  ariaLabelDecrement,
56
56
  ariaLabelIncrement,
57
57
  ...props
58
- }: QuantitySelectorProps,
59
- ref: ForwardedRef<HTMLInputElement>
58
+ },
59
+ ref
60
60
  ) => {
61
61
  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? 0);
62
62
  const [debouncedValue, setDebouncedValue] = useState(uncontrolledValue);
@@ -87,22 +87,18 @@ export const QuantitySelector = forwardRef(
87
87
  return;
88
88
  }, [debouncedValue, isControlled, onChange]);
89
89
 
90
- const classes = cx([
91
- className,
92
- rootClassName,
93
- {
94
- [`${rootClassName}--no-gap`]:
95
- variant === "attached" && !isDisabled && !decrementDisabled && !incrementDisabled,
96
- [`${rootClassName}--no-gap-disabled-left`]:
97
- variant === "attached" && !isDisabled && !incrementDisabled && decrementDisabled,
98
- [`${rootClassName}--no-gap-disabled-right`]:
99
- variant === "attached" && !isDisabled && !decrementDisabled && incrementDisabled,
100
- [`${rootClassName}--no-gap-disabled`]:
101
- variant === "attached" && (isDisabled || (incrementDisabled && decrementDisabled)),
102
- [`${rootClassName}--full-width`]: fullWidth,
103
- [`${rootClassName}--loading`]: loading,
104
- },
105
- ]);
90
+ const classes = cx(className, rootClassName, {
91
+ [`${rootClassName}--no-gap`]:
92
+ variant === "attached" && !isDisabled && !decrementDisabled && !incrementDisabled,
93
+ [`${rootClassName}--no-gap-disabled-left`]:
94
+ variant === "attached" && !isDisabled && !incrementDisabled && decrementDisabled,
95
+ [`${rootClassName}--no-gap-disabled-right`]:
96
+ variant === "attached" && !isDisabled && !decrementDisabled && incrementDisabled,
97
+ [`${rootClassName}--no-gap-disabled`]:
98
+ variant === "attached" && (isDisabled || (incrementDisabled && decrementDisabled)),
99
+ [`${rootClassName}--full-width`]: fullWidth,
100
+ [`${rootClassName}--loading`]: loading,
101
+ });
106
102
 
107
103
  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
108
104
  const numericRegex = /^[0-9]*$/;
@@ -153,13 +149,10 @@ export const QuantitySelector = forwardRef(
153
149
  <>
154
150
  {loading && (
155
151
  <div
156
- className={cx([
157
- `${rootClassName}__spinner`,
158
- {
159
- [`${rootClassName}__spinner--full-width`]: fullWidth,
160
- [`${rootClassName}__spinner--separated`]: !fullWidth && variant === "separated",
161
- },
162
- ])}
152
+ className={cx(`${rootClassName}__spinner`, {
153
+ [`${rootClassName}__spinner--full-width`]: fullWidth,
154
+ [`${rootClassName}__spinner--separated`]: !fullWidth && variant === "separated",
155
+ })}
163
156
  >
164
157
  <Spinner
165
158
  key="spinner"