@cimpress-ui/react 1.9.0 → 1.9.1
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/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts +23 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.d.ts +23 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/internal-toggle-button.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
import { type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';
|
|
2
|
+
import type { BaseButtonProps } from '../button/types.js';
|
|
3
|
+
import type { AriaLabelingProps, CommonProps } from '../types.js';
|
|
4
|
+
export interface BaseToggleButtonProps extends Omit<CommonProps, 'id'>, AriaLabelingProps, Pick<BaseButtonProps, 'size' | 'fullWidth'>, Pick<RACToggleButtonProps, 'defaultSelected' | 'isSelected' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled' | 'autoFocus'> {
|
|
5
|
+
/**
|
|
6
|
+
* The `<form>` element to associate the input with.
|
|
7
|
+
* The value of this attribute must be the id of a `<form>` in the same document.
|
|
8
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
|
|
9
|
+
*/
|
|
10
|
+
form?: string;
|
|
11
|
+
/**
|
|
12
|
+
* The name of the input element, used when submitting an HTML form.
|
|
13
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).
|
|
14
|
+
*/
|
|
15
|
+
name?: string;
|
|
16
|
+
/**
|
|
17
|
+
* The value of the input element, used when submitting an HTML form.
|
|
18
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).
|
|
19
|
+
*
|
|
20
|
+
* When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.
|
|
21
|
+
*/
|
|
22
|
+
value?: string;
|
|
23
|
+
}
|
|
2
24
|
//# sourceMappingURL=internal-toggle-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"internal-toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,iBAAiB,IAAI,oBAAoB,EAG/C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,iBAAiB,EACjB,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,CAAC,EAC3C,IAAI,CACF,oBAAoB,EAClB,iBAAiB,GACjB,YAAY,GACZ,SAAS,GACT,cAAc,GACd,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,WAAW,CACd;IACH;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":";;;;;AA0DA,oDA+GC;;AAzKD,2CAAqD;AACrD,6CAA+D;AAC/D,8CAAyF;AACzF,gDAA0D;AAC1D,gDAAwB;AACxB,iCAA+E;AAC/E,iEAM+B;AAG/B,6CAAwD;AA0CxD,gBAAgB;AAChB,SAAgB,oBAAoB,CAAC,EACnC,SAAS,EAAE,GAAG,EACd,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,UAAU,EAAE,kBAAkB,EAC9B,eAAe,EAAE,uBAAuB,EACxC,QAAQ,EACR,GAAG,KAAK,EACkB;IAC1B,QAAQ;IAER,MAAM,wBAAwB,GAAG,IAAA,kBAAU,EAAC,qCAAwB,CAAC,CAAC;IACtE,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAC,+CAA0B,CAAC,CAAC;IAChE,MAAM,gBAAgB,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,aAAa,CAAC,CAAC;IAC1E,MAAM,iBAAiB,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,cAAc,CAAC,CAAC;IAE5E,MAAM,eAAe,GAAG,IAAA,6BAAsB,EAAC;QAC7C,2DAA2D;QAC3D,IAAI,EAAE,wBAAwB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACjD,KAAK;QACL,kBAAkB,EAAE,QAAQ;QAC5B,CAAC,iCAA0B,CAAC,EAAE,wBAAwB,EAAE,eAAe,IAAI,SAAS;KACrF,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,0BAAkB,EACpD,gBAAgB,IAAI,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,EACzF,uBAAuB,IAAI,KAAK,EAChC,CAAC,aAAa,EAAE,EAAE;QAChB,QAAQ,EAAE,CAAC,aAAa,CAAC,CAAC;QAE1B,IAAI,gBAAgB,IAAI,KAAK,EAAE,CAAC;YAC9B,gBAAgB,CAAC,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QACrD,CAAC;QAED,eAAe,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC,CACF,CAAC;IAEF,aAAa;IAEb,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IACpC,MAAM,YAAY,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,wBAAwB,EAAE,IAAI,IAAI,IAAI,CAAC;IAE7D,MAAM,CAAC,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,UAAU,CAAC,CAAC;IAC/C,IAAA,oBAAY,EAAC,YAAY,EAAE,uBAAuB,IAAI,eAAe,EAAE,aAAa,CAAC,CAAC;IAEtF,IAAA,wBAAiB,EACf;QACE,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE;QACvC,kBAAkB,EAAE,QAAQ;KAC7B,EACD,eAAe,EACf,YAAY,CACb,CAAC;IAEF,OAAO,CACL,6DACE,uBAAC,oCAAe,OACV,KAAK,EACT,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,cAAI,EAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACtD,KAAK,EAAE,YAAY,EACnB,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAChD,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,aAAa,sBAErB;oBACE,KAAK,CAAC,kBAAkB,CAAC;oBACzB,wBAAwB,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;oBAClE,gBAAgB,EAAE,EAAE;iBACrB;qBACE,MAAM,CAAC,OAAO,CAAC;qBACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,kBAEd,WAAW,eACd,MAAM,eACL,IAAI,qBACE,SAAS,IAAI,SAAS,YAEtC,QAAQ,GACO,EAEjB,aAAa,IAAI,CAChB,kCACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,wBAAwB,EAAE,IAAI,IAAI,IAAI,EAC5C,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,wBAAwB,EAAE,UAAU,kBAE5C,wBAAwB,EAAE,eAAe,CAAC,iBAAiB,CAAC,SAAS;oBACrE,eAAe,CAAC,iBAAiB,CAAC,SAAS;oBAC3C,SAAS,EAEX,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,CACH,IACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useObjectRef } from '@react-aria/utils';\nimport { privateValidationStateProp, useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, useContext, useRef, useState, type Ref } from 'react';\nimport {\n TextContext as RACTextContext,\n ToggleButton as RACToggleButton,\n type ToggleButtonProps as RACToggleButtonProps,\n ToggleGroupStateContext as RACToggleGroupStateContext,\n useSlottedContext,\n} from 'react-aria-components';\nimport type { BaseButtonProps } from '../button/types.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ToggleButtonGroupContext } from './context.js';\n\nexport interface BaseToggleButtonProps\n extends Omit<CommonProps, 'id'>,\n AriaLabelingProps,\n Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n Pick<\n RACToggleButtonProps,\n | 'defaultSelected'\n | 'isSelected'\n | 'onPress'\n | 'onHoverStart'\n | 'onHoverEnd'\n | 'onChange'\n | 'isDisabled'\n | 'autoFocus'\n > {\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name of the input element, used when submitting an HTML form.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: string;\n /**\n * The value of the input element, used when submitting an HTML form.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).\n *\n * When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.\n */\n value?: string;\n}\n\ninterface InternalToggleButtonProps extends BaseToggleButtonProps {\n children?: ReactNode;\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** @internal */\nexport function InternalToggleButton({\n buttonRef: ref,\n children,\n size = 'medium',\n isDisabled,\n fullWidth,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n value,\n isSelected: consumerIsSelected,\n defaultSelected: consumerDefaultSelected,\n onChange,\n ...props\n}: InternalToggleButtonProps) {\n // State\n\n const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);\n const toggleGroupState = useContext(RACToggleGroupStateContext);\n const descriptionProps = useSlottedContext(RACTextContext, 'description');\n const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');\n\n const validationState = useFormValidationState({\n // If part of a group, validation is handled at group level\n name: toggleButtonGroupContext ? undefined : name,\n value,\n validationBehavior: 'native',\n [privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,\n });\n\n const [isSelected, setIsSelected] = useControlledState(\n toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected,\n consumerDefaultSelected ?? false,\n (newIsSelected) => {\n onChange?.(newIsSelected);\n\n if (toggleGroupState && value) {\n toggleGroupState.setSelected(value, newIsSelected);\n }\n\n validationState.commitValidation();\n },\n );\n\n // Validation\n\n const buttonRef = useObjectRef(ref);\n const formInputRef = useRef<HTMLInputElement>(null);\n const formInputName = toggleButtonGroupContext?.name ?? name;\n\n const [initialSelected] = useState(isSelected);\n useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);\n\n useFormValidation(\n {\n focus: () => buttonRef.current?.focus(),\n validationBehavior: 'native',\n },\n validationState,\n formInputRef,\n );\n\n return (\n <>\n <RACToggleButton\n {...props}\n ref={buttonRef}\n className={clsx('cim-toggle-button', UNSAFE_className)}\n style={UNSAFE_style}\n id={toggleButtonGroupContext ? value : undefined}\n isDisabled={isDisabled}\n isSelected={isSelected}\n onChange={setIsSelected}\n aria-describedby={\n [\n props['aria-describedby'],\n toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,\n descriptionProps?.id,\n ]\n .filter(Boolean)\n .join(' ') || undefined\n }\n data-variant=\"secondary\"\n data-tone=\"base\"\n data-size={size}\n data-full-width={fullWidth || undefined}\n >\n {children}\n </RACToggleButton>\n\n {formInputName && (\n <input\n ref={formInputRef}\n style={{ display: 'none' }}\n type=\"checkbox\"\n form={toggleButtonGroupContext?.form ?? form}\n name={formInputName}\n checked={isSelected}\n value={value}\n required={toggleButtonGroupContext?.isRequired}\n aria-invalid={\n toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??\n validationState.displayValidation.isInvalid ??\n undefined\n }\n onChange={() => {}}\n />\n )}\n </>\n );\n}\n"]}
|
|
@@ -1,2 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
import { type ToggleButtonProps as RACToggleButtonProps } from 'react-aria-components';
|
|
2
|
+
import type { BaseButtonProps } from '../button/types.js';
|
|
3
|
+
import type { AriaLabelingProps, CommonProps } from '../types.js';
|
|
4
|
+
export interface BaseToggleButtonProps extends Omit<CommonProps, 'id'>, AriaLabelingProps, Pick<BaseButtonProps, 'size' | 'fullWidth'>, Pick<RACToggleButtonProps, 'defaultSelected' | 'isSelected' | 'onPress' | 'onHoverStart' | 'onHoverEnd' | 'onChange' | 'isDisabled' | 'autoFocus'> {
|
|
5
|
+
/**
|
|
6
|
+
* The `<form>` element to associate the input with.
|
|
7
|
+
* The value of this attribute must be the id of a `<form>` in the same document.
|
|
8
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
|
|
9
|
+
*/
|
|
10
|
+
form?: string;
|
|
11
|
+
/**
|
|
12
|
+
* The name of the input element, used when submitting an HTML form.
|
|
13
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).
|
|
14
|
+
*/
|
|
15
|
+
name?: string;
|
|
16
|
+
/**
|
|
17
|
+
* The value of the input element, used when submitting an HTML form.
|
|
18
|
+
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).
|
|
19
|
+
*
|
|
20
|
+
* When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.
|
|
21
|
+
*/
|
|
22
|
+
value?: string;
|
|
23
|
+
}
|
|
2
24
|
//# sourceMappingURL=internal-toggle-button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"internal-toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,iBAAiB,IAAI,oBAAoB,EAG/C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,iBAAiB,EACjB,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,WAAW,CAAC,EAC3C,IAAI,CACF,oBAAoB,EAClB,iBAAiB,GACjB,YAAY,GACZ,SAAS,GACT,cAAc,GACd,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,WAAW,CACd;IACH;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAkB,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAY,MAAM,OAAO,CAAC;AAC/E,OAAO,EACL,WAAW,IAAI,cAAc,EAC7B,YAAY,IAAI,eAAe,EAE/B,uBAAuB,IAAI,0BAA0B,EACrD,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal-toggle-button.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useObjectRef } from '@react-aria/utils';\nimport { privateValidationStateProp, useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { type ReactNode, useContext, useRef, useState, type Ref } from 'react';\nimport {\n TextContext as RACTextContext,\n ToggleButton as RACToggleButton,\n type ToggleButtonProps as RACToggleButtonProps,\n ToggleGroupStateContext as RACToggleGroupStateContext,\n useSlottedContext,\n} from 'react-aria-components';\nimport type { BaseButtonProps } from '../button/types.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ToggleButtonGroupContext } from './context.js';\n\nexport interface BaseToggleButtonProps\n extends Omit<CommonProps, 'id'>,\n AriaLabelingProps,\n Pick<BaseButtonProps, 'size' | 'fullWidth'>,\n Pick<\n RACToggleButtonProps,\n | 'defaultSelected'\n | 'isSelected'\n | 'onPress'\n | 'onHoverStart'\n | 'onHoverEnd'\n | 'onChange'\n | 'isDisabled'\n | 'autoFocus'\n > {\n /**\n * The `<form>` element to associate the input with.\n * The value of this attribute must be the id of a `<form>` in the same document.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).\n */\n form?: string;\n /**\n * The name of the input element, used when submitting an HTML form.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name).\n */\n name?: string;\n /**\n * The value of the input element, used when submitting an HTML form.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#value).\n *\n * When used in a `ToggleButtonGroup`, `value` serves as an identifier for this button, and has to be unique across all buttons in the group.\n */\n value?: string;\n}\n\ninterface InternalToggleButtonProps extends BaseToggleButtonProps {\n children?: ReactNode;\n buttonRef?: Ref<HTMLButtonElement>;\n}\n\n/** @internal */\nexport function InternalToggleButton({\n buttonRef: ref,\n children,\n size = 'medium',\n isDisabled,\n fullWidth,\n UNSAFE_className,\n UNSAFE_style,\n form,\n name,\n value,\n isSelected: consumerIsSelected,\n defaultSelected: consumerDefaultSelected,\n onChange,\n ...props\n}: InternalToggleButtonProps) {\n // State\n\n const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);\n const toggleGroupState = useContext(RACToggleGroupStateContext);\n const descriptionProps = useSlottedContext(RACTextContext, 'description');\n const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');\n\n const validationState = useFormValidationState({\n // If part of a group, validation is handled at group level\n name: toggleButtonGroupContext ? undefined : name,\n value,\n validationBehavior: 'native',\n [privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,\n });\n\n const [isSelected, setIsSelected] = useControlledState(\n toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected,\n consumerDefaultSelected ?? false,\n (newIsSelected) => {\n onChange?.(newIsSelected);\n\n if (toggleGroupState && value) {\n toggleGroupState.setSelected(value, newIsSelected);\n }\n\n validationState.commitValidation();\n },\n );\n\n // Validation\n\n const buttonRef = useObjectRef(ref);\n const formInputRef = useRef<HTMLInputElement>(null);\n const formInputName = toggleButtonGroupContext?.name ?? name;\n\n const [initialSelected] = useState(isSelected);\n useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);\n\n useFormValidation(\n {\n focus: () => buttonRef.current?.focus(),\n validationBehavior: 'native',\n },\n validationState,\n formInputRef,\n );\n\n return (\n <>\n <RACToggleButton\n {...props}\n ref={buttonRef}\n className={clsx('cim-toggle-button', UNSAFE_className)}\n style={UNSAFE_style}\n id={toggleButtonGroupContext ? value : undefined}\n isDisabled={isDisabled}\n isSelected={isSelected}\n onChange={setIsSelected}\n aria-describedby={\n [\n props['aria-describedby'],\n toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,\n descriptionProps?.id,\n ]\n .filter(Boolean)\n .join(' ') || undefined\n }\n data-variant=\"secondary\"\n data-tone=\"base\"\n data-size={size}\n data-full-width={fullWidth || undefined}\n >\n {children}\n </RACToggleButton>\n\n {formInputName && (\n <input\n ref={formInputRef}\n style={{ display: 'none' }}\n type=\"checkbox\"\n form={toggleButtonGroupContext?.form ?? form}\n name={formInputName}\n checked={isSelected}\n value={value}\n required={toggleButtonGroupContext?.isRequired}\n aria-invalid={\n toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??\n validationState.displayValidation.isInvalid ??\n undefined\n }\n onChange={() => {}}\n />\n )}\n </>\n );\n}\n"]}
|