@bitrise/bitkit-v2 0.3.339 → 0.3.341
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.
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
import { Checkbox } from '@chakra-ui/react/checkbox';
|
|
2
2
|
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
type BitkitCheckboxBaseProps = {
|
|
4
|
+
/** Props forwarded to the underlying `<input>` (e.g. `data-testid`). */
|
|
5
5
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
6
|
-
labelText: ReactNode;
|
|
7
6
|
state?: 'disabled' | 'readOnly' | 'skeleton';
|
|
8
7
|
} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;
|
|
9
|
-
|
|
8
|
+
/**
|
|
9
|
+
* A checkbox has to end up with an accessible name, and it takes that name from its label. So either
|
|
10
|
+
* pass a visible `labelText`, or — for a checkbox in a layout with no room for one, like a table
|
|
11
|
+
* select-all header — an `aria-label`, which is applied to the hidden input instead of being
|
|
12
|
+
* rendered.
|
|
13
|
+
*/
|
|
14
|
+
export type BitkitCheckboxProps = BitkitCheckboxBaseProps & ({
|
|
10
15
|
helperText?: ReactNode;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
labelText: NonNullable<ReactNode>;
|
|
17
|
+
} | {
|
|
18
|
+
'aria-label': string;
|
|
19
|
+
helperText?: never;
|
|
20
|
+
labelText?: null;
|
|
21
|
+
});
|
|
22
|
+
declare const BitkitCheckbox: import('react').ForwardRefExoticComponent<BitkitCheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
15
23
|
export default BitkitCheckbox;
|
|
@@ -6,14 +6,18 @@ import { Text } from "@chakra-ui/react/text";
|
|
|
6
6
|
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
7
7
|
import { Checkbox } from "@chakra-ui/react/checkbox";
|
|
8
8
|
//#region lib/components/BitkitCheckbox/BitkitCheckbox.tsx
|
|
9
|
+
var isEmptyNode = (node) => node == null || node === "" || typeof node === "boolean";
|
|
9
10
|
var BitkitCheckbox = forwardRef((props, ref) => {
|
|
10
|
-
const { helperText, inputProps, labelText, state, ...rest } = props;
|
|
11
|
+
const { "aria-label": ariaLabel, helperText, inputProps, labelText, state, ...rest } = props;
|
|
12
|
+
const hasHelperText = !isEmptyNode(helperText);
|
|
13
|
+
const hasLabel = !isEmptyNode(labelText) || hasHelperText;
|
|
11
14
|
return /* @__PURE__ */ jsxs(Checkbox.Root, {
|
|
12
15
|
disabled: state === "disabled",
|
|
13
16
|
readOnly: state === "readOnly",
|
|
14
17
|
...rest,
|
|
15
18
|
children: [
|
|
16
19
|
/* @__PURE__ */ jsx(Checkbox.HiddenInput, {
|
|
20
|
+
"aria-label": ariaLabel,
|
|
17
21
|
ref,
|
|
18
22
|
...inputProps
|
|
19
23
|
}),
|
|
@@ -21,11 +25,11 @@ var BitkitCheckbox = forwardRef((props, ref) => {
|
|
|
21
25
|
loading: state === "skeleton",
|
|
22
26
|
children: /* @__PURE__ */ jsx(Checkbox.Control, { children: rest.checked === "indeterminate" ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(IconCheck, {}) })
|
|
23
27
|
}),
|
|
24
|
-
/* @__PURE__ */ jsx(Skeleton, {
|
|
28
|
+
hasLabel && /* @__PURE__ */ jsx(Skeleton, {
|
|
25
29
|
loading: state === "skeleton",
|
|
26
30
|
children: /* @__PURE__ */ jsxs(Checkbox.Label, {
|
|
27
31
|
as: "div",
|
|
28
|
-
children: [labelText,
|
|
32
|
+
children: [labelText, hasHelperText && /* @__PURE__ */ jsx(Text, {
|
|
29
33
|
color: "text/helper",
|
|
30
34
|
textStyle: "comp/input/helperText",
|
|
31
35
|
children: helperText
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\n\
|
|
1
|
+
{"version":3,"file":"BitkitCheckbox.js","names":[],"sources":["../../../lib/components/BitkitCheckbox/BitkitCheckbox.tsx"],"sourcesContent":["import { Checkbox } from '@chakra-ui/react/checkbox';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\n\nimport { IconCheck, IconMinus } from '../../icons';\n\ntype BitkitCheckboxBaseProps = {\n /** Props forwarded to the underlying `<input>` (e.g. `data-testid`). */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n state?: 'disabled' | 'readOnly' | 'skeleton';\n} & Omit<Checkbox.RootProps, 'disabled' | 'readOnly'>;\n\n/**\n * A checkbox has to end up with an accessible name, and it takes that name from its label. So either\n * pass a visible `labelText`, or — for a checkbox in a layout with no room for one, like a table\n * select-all header — an `aria-label`, which is applied to the hidden input instead of being\n * rendered.\n */\nexport type BitkitCheckboxProps = BitkitCheckboxBaseProps &\n (\n | {\n helperText?: ReactNode;\n labelText: NonNullable<ReactNode>;\n }\n | { 'aria-label': string; helperText?: never; labelText?: null }\n );\n\nconst isEmptyNode = (node: ReactNode) => node == null || node === '' || typeof node === 'boolean';\n\nconst BitkitCheckbox = forwardRef<HTMLInputElement, BitkitCheckboxProps>((props, ref) => {\n const { 'aria-label': ariaLabel, helperText, inputProps, labelText, state, ...rest } = props;\n const hasHelperText = !isEmptyNode(helperText);\n const hasLabel = !isEmptyNode(labelText) || hasHelperText;\n\n return (\n <Checkbox.Root disabled={state === 'disabled'} readOnly={state === 'readOnly'} {...rest}>\n <Checkbox.HiddenInput aria-label={ariaLabel} ref={ref} {...inputProps} />\n <Skeleton loading={state === 'skeleton'}>\n <Checkbox.Control>{rest.checked === 'indeterminate' ? <IconMinus /> : <IconCheck />}</Checkbox.Control>\n </Skeleton>\n {hasLabel && (\n <Skeleton loading={state === 'skeleton'}>\n <Checkbox.Label as=\"div\">\n {labelText}\n {hasHelperText && (\n <Text color=\"text/helper\" textStyle=\"comp/input/helperText\">\n {helperText}\n </Text>\n )}\n </Checkbox.Label>\n </Skeleton>\n )}\n </Checkbox.Root>\n );\n});\n\nBitkitCheckbox.displayName = 'BitkitCheckbox';\n\nexport default BitkitCheckbox;\n"],"mappings":";;;;;;;;AA4BA,IAAM,eAAe,SAAoB,QAAQ,QAAQ,SAAS,MAAM,OAAO,SAAS;AAExF,IAAM,iBAAiB,YAAmD,OAAO,QAAQ;CACvF,MAAM,EAAE,cAAc,WAAW,YAAY,YAAY,WAAW,OAAO,GAAG,SAAS;CACvF,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,WAAW,CAAC,YAAY,SAAS,KAAK;CAE5C,OACE,qBAAC,SAAS,MAAV;EAAe,UAAU,UAAU;EAAY,UAAU,UAAU;EAAY,GAAI;EAAnF,UAAA;GACE,oBAAC,SAAS,aAAV;IAAsB,cAAY;IAAgB;IAAK,GAAI;GAAa,CAAA;GACxE,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,oBAAC,SAAS,SAAV,EAAA,UAAmB,KAAK,YAAY,kBAAkB,oBAAC,WAAD,CAAY,CAAA,IAAI,oBAAC,WAAD,CAAY,CAAA,EAAoB,CAAA;GAC9F,CAAA;GACT,YACC,oBAAC,UAAD;IAAU,SAAS,UAAU;IAC3B,UAAA,qBAAC,SAAS,OAAV;KAAgB,IAAG;KAAnB,UAAA,CACG,WACA,iBACC,oBAAC,MAAD;MAAM,OAAM;MAAc,WAAU;MACjC,UAAA;KACG,CAAA,CAEM;;GACR,CAAA;EAEC;;AAEnB,CAAC;AAED,eAAe,cAAc"}
|