@purpurds/checkbox 7.6.0 → 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 (9) hide show
  1. package/dist/LICENSE.txt +5 -5
  2. package/dist/checkbox.cjs.js +8 -8
  3. package/dist/checkbox.cjs.js.map +1 -1
  4. package/dist/checkbox.d.ts +3 -59
  5. package/dist/checkbox.d.ts.map +1 -1
  6. package/dist/checkbox.es.js +284 -326
  7. package/dist/checkbox.es.js.map +1 -1
  8. package/package.json +8 -7
  9. package/src/checkbox.tsx +87 -86
package/src/checkbox.tsx CHANGED
@@ -1,4 +1,5 @@
1
- import React, { type ForwardedRef, forwardRef } from "react";
1
+ import React, { forwardRef } from "react";
2
+ import type { BaseProps } from "@purpurds/common-types";
2
3
  import { FieldErrorText } from "@purpurds/field-error-text";
3
4
  import { FieldHelperText } from "@purpurds/field-helper-text";
4
5
  import { Icon } from "@purpurds/icon";
@@ -15,7 +16,7 @@ const cx = c.bind(styles);
15
16
  export const checkedState = ["indeterminate", true, false] as const;
16
17
 
17
18
  export type CheckedState = (typeof checkedState)[number];
18
- export type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "onChange"> & {
19
+ export type CheckboxProps = Omit<BaseProps<"button">, "onChange" | "children"> & {
19
20
  /**
20
21
  * To use with custom label (not recommended).
21
22
  * */
@@ -24,7 +25,6 @@ export type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "onCha
24
25
  * To use when no label is given (not recommended).
25
26
  * */
26
27
  ["aria-label"]?: string;
27
- ["data-testid"]?: string;
28
28
  checked?: CheckedState;
29
29
  /**
30
30
  * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
@@ -75,91 +75,92 @@ export type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "onCha
75
75
 
76
76
  const rootClassName = "purpur-checkbox";
77
77
 
78
- const CheckboxComponent = (
79
- {
80
- ["data-testid"]: dataTestId,
81
- checked,
82
- className,
83
- error = false,
84
- errorText,
85
- label,
86
- helperText,
87
- onChange,
88
- ...props
89
- }: CheckboxProps,
90
- ref: ForwardedRef<HTMLButtonElement>
91
- ) => {
92
- const isError = errorText && !checked;
93
- const isCheckboxError = error && !checked;
78
+ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
79
+ (
80
+ {
81
+ ["data-testid"]: dataTestId,
82
+ checked,
83
+ className,
84
+ error = false,
85
+ errorText,
86
+ label,
87
+ helperText,
88
+ onChange,
89
+ ...props
90
+ },
91
+ ref
92
+ ) => {
93
+ const isError = errorText && !checked;
94
+ const isCheckboxError = error && !checked;
94
95
 
95
- return (
96
- <div className={cx([className, `${rootClassName}__wrapper`])}>
97
- <div className={cx([className, `${rootClassName}__container`])}>
98
- <RadixCheckbox.Root
99
- {...props}
100
- checked={checked}
101
- className={cx([
102
- rootClassName,
103
- {
104
- [`${rootClassName}--error`]: isError,
105
- [`${rootClassName}--error-checkbox`]: isCheckboxError,
106
- },
107
- ])}
108
- data-testid={dataTestId}
109
- onCheckedChange={onChange}
110
- ref={ref}
111
- >
112
- <span className={cx(`${rootClassName}__box`)}>
113
- <RadixCheckbox.Indicator className={cx(`${rootClassName}__indicator`)}>
114
- {checked === "indeterminate" ? (
115
- <Icon
116
- data-testid={dataTestId && `${dataTestId}-checked-icon`}
117
- size="xs"
118
- svg={minusBold}
119
- />
120
- ) : (
121
- <Icon
122
- data-testid={dataTestId && `${dataTestId}-indeterminate-icon`}
123
- size="xs"
124
- svg={checkmarkBold}
125
- />
126
- )}
127
- </RadixCheckbox.Indicator>
96
+ return (
97
+ <div className={cx([className, `${rootClassName}__wrapper`])}>
98
+ <div className={cx([className, `${rootClassName}__container`])}>
99
+ <RadixCheckbox.Root
100
+ {...props}
101
+ checked={checked}
102
+ className={cx([
103
+ rootClassName,
104
+ {
105
+ [`${rootClassName}--error`]: isError,
106
+ [`${rootClassName}--error-checkbox`]: isCheckboxError,
107
+ },
108
+ ])}
109
+ data-testid={dataTestId}
110
+ onCheckedChange={onChange}
111
+ ref={ref}
112
+ >
113
+ <span className={cx(`${rootClassName}__box`)}>
114
+ <RadixCheckbox.Indicator className={cx(`${rootClassName}__indicator`)}>
115
+ {checked === "indeterminate" ? (
116
+ <Icon
117
+ data-testid={dataTestId && `${dataTestId}-checked-icon`}
118
+ size="xs"
119
+ svg={minusBold}
120
+ />
121
+ ) : (
122
+ <Icon
123
+ data-testid={dataTestId && `${dataTestId}-indeterminate-icon`}
124
+ size="xs"
125
+ svg={checkmarkBold}
126
+ />
127
+ )}
128
+ </RadixCheckbox.Indicator>
129
+ </span>
130
+ </RadixCheckbox.Root>
131
+ <span className={cx(`${rootClassName}__label-container`)}>
132
+ {label && (
133
+ <Label
134
+ htmlFor={props.id}
135
+ data-testid={dataTestId && `${dataTestId}-label`}
136
+ disabled={props.disabled}
137
+ >
138
+ <Paragraph variant="paragraph-100" disabled={props.disabled}>
139
+ {props.required && <span aria-hidden>{"* "}</span>}
140
+ {label}
141
+ </Paragraph>
142
+ </Label>
143
+ )}
144
+ {helperText && (
145
+ <FieldHelperText
146
+ className={cx(`${rootClassName}__helper`)}
147
+ data-testid={dataTestId && `${dataTestId}-helper-text`}
148
+ disabled={props.disabled}
149
+ id={`${props.id}-helper-text`}
150
+ >
151
+ {helperText}
152
+ </FieldHelperText>
153
+ )}
128
154
  </span>
129
- </RadixCheckbox.Root>
130
- <span className={cx(`${rootClassName}__label-container`)}>
131
- {label && (
132
- <Label
133
- htmlFor={props.id}
134
- data-testid={dataTestId && `${dataTestId}-label`}
135
- disabled={props.disabled}
136
- >
137
- <Paragraph variant="paragraph-100" disabled={props.disabled}>
138
- {props.required && <span aria-hidden>{"* "}</span>}
139
- {label}
140
- </Paragraph>
141
- </Label>
142
- )}
143
- {helperText && (
144
- <FieldHelperText
145
- className={cx(`${rootClassName}__helper`)}
146
- data-testid={dataTestId && `${dataTestId}-helper-text`}
147
- disabled={props.disabled}
148
- id={`${props.id}-helper-text`}
149
- >
150
- {helperText}
151
- </FieldHelperText>
152
- )}
153
- </span>
155
+ </div>
156
+ {isError && (
157
+ <FieldErrorText data-testid={dataTestId && `${dataTestId}-error-text`}>
158
+ {errorText}
159
+ </FieldErrorText>
160
+ )}
154
161
  </div>
155
- {isError && (
156
- <FieldErrorText data-testid={dataTestId && `${dataTestId}-error-text`}>
157
- {errorText}
158
- </FieldErrorText>
159
- )}
160
- </div>
161
- );
162
- };
162
+ );
163
+ }
164
+ );
163
165
 
164
- export const Checkbox = forwardRef(CheckboxComponent);
165
166
  Checkbox.displayName = "Checkbox";