@cimpress-ui/react 1.0.1 → 1.1.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.
- package/dist/commonjs/components/checkbox/checkbox.d.ts +1 -1
- package/dist/commonjs/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/commonjs/components/checkbox/checkbox.js.map +1 -1
- package/dist/commonjs/components/date-picker/date-picker.d.ts +1 -1
- package/dist/commonjs/components/date-picker/date-picker.d.ts.map +1 -1
- package/dist/commonjs/components/date-picker/date-picker.js.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/commonjs/components/file-picker/file-picker.js +3 -3
- package/dist/commonjs/components/file-picker/file-picker.js.map +1 -1
- package/dist/commonjs/components/tabs/tabs.d.ts +1 -1
- package/dist/commonjs/components/tabs/tabs.d.ts.map +1 -1
- package/dist/commonjs/components/tabs/tabs.js +2 -4
- package/dist/commonjs/components/tabs/tabs.js.map +1 -1
- package/dist/commonjs/components/tag/tag-group.d.ts +1 -1
- package/dist/commonjs/components/tag/tag-group.d.ts.map +1 -1
- package/dist/commonjs/components/tag/tag-group.js.map +1 -1
- package/dist/commonjs/components/tag/tag.d.ts +1 -1
- package/dist/commonjs/components/tag/tag.d.ts.map +1 -1
- package/dist/commonjs/components/tag/tag.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field-list-box.js +14 -3
- package/dist/commonjs/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/commonjs/components/tag-field/tag-field.js +6 -3
- package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
- package/dist/commonjs/components/text-inputs/text-field.d.ts.map +1 -1
- package/dist/commonjs/components/text-inputs/text-field.js +1 -1
- package/dist/commonjs/components/text-inputs/text-field.js.map +1 -1
- package/dist/commonjs/components/toggle/toggle.d.ts +1 -1
- package/dist/commonjs/components/toggle/toggle.d.ts.map +1 -1
- package/dist/commonjs/components/toggle/toggle.js.map +1 -1
- package/dist/commonjs/components/toggle-button/context.d.ts +2 -0
- package/dist/commonjs/components/toggle-button/context.d.ts.map +1 -0
- package/dist/commonjs/components/toggle-button/context.js +7 -0
- package/dist/commonjs/components/toggle-button/context.js.map +1 -0
- package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts +2 -0
- package/dist/commonjs/components/toggle-button/internal-toggle-button.d.ts.map +1 -0
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js +57 -0
- package/dist/commonjs/components/toggle-button/internal-toggle-button.js.map +1 -0
- package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts +10 -6
- package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/toggle-button-group.js +61 -9
- package/dist/commonjs/components/toggle-button/toggle-button-group.js.map +1 -1
- package/dist/commonjs/components/toggle-button/toggle-button.d.ts +8 -8
- package/dist/commonjs/components/toggle-button/toggle-button.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/toggle-button.js +6 -6
- package/dist/commonjs/components/toggle-button/toggle-button.js.map +1 -1
- package/dist/commonjs/components/toggle-button/toggle-icon-button.d.ts +7 -6
- package/dist/commonjs/components/toggle-button/toggle-icon-button.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/toggle-icon-button.js +7 -10
- package/dist/commonjs/components/toggle-button/toggle-icon-button.js.map +1 -1
- package/dist/commonjs/components/types.d.ts +7 -1
- package/dist/commonjs/components/types.d.ts.map +1 -1
- package/dist/commonjs/components/types.js.map +1 -1
- package/dist/commonjs/index.d.ts +5 -5
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +5 -5
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox.d.ts +1 -1
- package/dist/esm/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/esm/components/checkbox/checkbox.js.map +1 -1
- package/dist/esm/components/date-picker/date-picker.d.ts +1 -1
- package/dist/esm/components/date-picker/date-picker.d.ts.map +1 -1
- package/dist/esm/components/date-picker/date-picker.js.map +1 -1
- package/dist/esm/components/file-picker/file-picker.d.ts.map +1 -1
- package/dist/esm/components/file-picker/file-picker.js +3 -3
- package/dist/esm/components/file-picker/file-picker.js.map +1 -1
- package/dist/esm/components/tabs/tabs.d.ts +1 -1
- package/dist/esm/components/tabs/tabs.d.ts.map +1 -1
- package/dist/esm/components/tabs/tabs.js +2 -4
- package/dist/esm/components/tabs/tabs.js.map +1 -1
- package/dist/esm/components/tag/tag-group.d.ts +1 -1
- package/dist/esm/components/tag/tag-group.d.ts.map +1 -1
- package/dist/esm/components/tag/tag-group.js.map +1 -1
- package/dist/esm/components/tag/tag.d.ts +1 -1
- package/dist/esm/components/tag/tag.d.ts.map +1 -1
- package/dist/esm/components/tag/tag.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field-list-box.js +14 -3
- package/dist/esm/components/tag-field/tag-field-list-box.js.map +1 -1
- package/dist/esm/components/tag-field/tag-field.d.ts.map +1 -1
- package/dist/esm/components/tag-field/tag-field.js +6 -3
- package/dist/esm/components/tag-field/tag-field.js.map +1 -1
- package/dist/esm/components/text-inputs/text-field.d.ts.map +1 -1
- package/dist/esm/components/text-inputs/text-field.js +1 -1
- package/dist/esm/components/text-inputs/text-field.js.map +1 -1
- package/dist/esm/components/toggle/toggle.d.ts +1 -1
- package/dist/esm/components/toggle/toggle.d.ts.map +1 -1
- package/dist/esm/components/toggle/toggle.js.map +1 -1
- package/dist/esm/components/toggle-button/context.d.ts +2 -0
- package/dist/esm/components/toggle-button/context.d.ts.map +1 -0
- package/dist/esm/components/toggle-button/context.js +4 -0
- package/dist/esm/components/toggle-button/context.js.map +1 -0
- package/dist/esm/components/toggle-button/internal-toggle-button.d.ts +2 -0
- package/dist/esm/components/toggle-button/internal-toggle-button.d.ts.map +1 -0
- package/dist/esm/components/toggle-button/internal-toggle-button.js +51 -0
- package/dist/esm/components/toggle-button/internal-toggle-button.js.map +1 -0
- package/dist/esm/components/toggle-button/toggle-button-group.d.ts +10 -6
- package/dist/esm/components/toggle-button/toggle-button-group.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/toggle-button-group.js +62 -10
- package/dist/esm/components/toggle-button/toggle-button-group.js.map +1 -1
- package/dist/esm/components/toggle-button/toggle-button.d.ts +8 -8
- package/dist/esm/components/toggle-button/toggle-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/toggle-button.js +5 -5
- package/dist/esm/components/toggle-button/toggle-button.js.map +1 -1
- package/dist/esm/components/toggle-button/toggle-icon-button.d.ts +7 -6
- package/dist/esm/components/toggle-button/toggle-icon-button.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/toggle-icon-button.js +6 -6
- package/dist/esm/components/toggle-button/toggle-icon-button.js.map +1 -1
- package/dist/esm/components/types.d.ts +7 -1
- package/dist/esm/components/types.d.ts.map +1 -1
- package/dist/esm/components/types.js.map +1 -1
- package/dist/esm/index.d.ts +5 -5
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +5 -5
- package/dist/esm/index.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +19 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,OAAO,IAAI,UAAU,GAGtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAsBhH,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5F,OAAO,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAC;IAC3G,CAAC;IAED,OAAO,CACL,MAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,KAAC,UAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAC1D,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n TagGroup as RACTagGroup,\n TagList as RACTagList,\n type TagGroupProps as RACTagGroupProps,\n type TagListProps as RACTagListProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';\n\nexport interface TagGroupProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n // `TagGroup` doesn't support `validate` or `error` because it's not a form field\n Omit<FieldProps<Key[]>, 'validate' | 'error' | 'name'>,\n Pick<\n RACTagGroupProps,\n 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'\n >,\n Pick<RACTagListProps<T>, 'children' | 'items'> {\n /** Whether the tag group is required. */\n isRequired?: boolean;\n /** The error message to display. */\n error?: string;\n /** The size of the tags. */\n size?: 'medium' | 'large';\n /** Provides content to display when there are no tags in the group. */\n renderEmptyState?: () => ReactNode;\n}\n\nfunction TagGroup<T extends CollectionItem>(\n {\n label,\n description,\n error,\n children,\n isRequired,\n items,\n renderEmptyState,\n size = 'medium',\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: TagGroupProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {\n console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `\"none\"`');\n }\n\n return (\n <RACTagGroup\n {...props}\n ref={ref}\n className={clsx('cim-tag-group', UNSAFE_className)}\n style={UNSAFE_style}\n data-size={size}\n >\n <FormFieldLabel isRequired={isRequired}>{label}</FormFieldLabel>\n <RACTagList className=\"cim-tag-group-list\" items={items} renderEmptyState={renderEmptyState}>\n {children}\n </RACTagList>\n {error && <FormFieldErrorText>{error}</FormFieldErrorText>}\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACTagGroup>\n );\n}\n\n/**\n * Displays a group of tags. Allows for selecting or removing tags.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');\n\nexport { _TagGroup as TagGroup };\n"]}
|
|
1
|
+
{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,OAAO,IAAI,UAAU,GAGtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAsBhH,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5F,OAAO,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAC;IAC3G,CAAC;IAED,OAAO,CACL,MAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,KAAC,UAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAC1D,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n TagGroup as RACTagGroup,\n TagList as RACTagList,\n type TagGroupProps as RACTagGroupProps,\n type TagListProps as RACTagListProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';\n\nexport interface TagGroupProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n // `TagGroup` doesn't support `validate` or `error` because it's not a form field\n Omit<FieldProps<Key[]>, 'validate' | 'error' | 'form' | 'name'>,\n Pick<\n RACTagGroupProps,\n 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'\n >,\n Pick<RACTagListProps<T>, 'children' | 'items'> {\n /** Whether the tag group is required. */\n isRequired?: boolean;\n /** The error message to display. */\n error?: string;\n /** The size of the tags. */\n size?: 'medium' | 'large';\n /** Provides content to display when there are no tags in the group. */\n renderEmptyState?: () => ReactNode;\n}\n\nfunction TagGroup<T extends CollectionItem>(\n {\n label,\n description,\n error,\n children,\n isRequired,\n items,\n renderEmptyState,\n size = 'medium',\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: TagGroupProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {\n console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `\"none\"`');\n }\n\n return (\n <RACTagGroup\n {...props}\n ref={ref}\n className={clsx('cim-tag-group', UNSAFE_className)}\n style={UNSAFE_style}\n data-size={size}\n >\n <FormFieldLabel isRequired={isRequired}>{label}</FormFieldLabel>\n <RACTagList className=\"cim-tag-group-list\" items={items} renderEmptyState={renderEmptyState}>\n {children}\n </RACTagList>\n {error && <FormFieldErrorText>{error}</FormFieldErrorText>}\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACTagGroup>\n );\n}\n\n/**\n * Displays a group of tags. Allows for selecting or removing tags.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');\n\nexport { _TagGroup as TagGroup };\n"]}
|
|
@@ -13,6 +13,6 @@ export interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id
|
|
|
13
13
|
*
|
|
14
14
|
* See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).
|
|
15
15
|
*/
|
|
16
|
-
declare const _Tag: (props: TagProps & import("react").RefAttributes<
|
|
16
|
+
declare const _Tag: (props: TagProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
|
|
17
17
|
export { _Tag as Tag };
|
|
18
18
|
//# sourceMappingURL=tag.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAiB,KAAK,QAAQ,IAAI,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAIzG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,YAAY,CAAC;IAC/F,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,mDAAmD;IACnD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAgCD;;;;GAIG;AACH,QAAA,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAiB,KAAK,QAAQ,IAAI,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAIzG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,YAAY,CAAC;IAC/F,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,mDAAmD;IACnD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAgCD;;;;GAIG;AACH,QAAA,MAAM,IAAI,0JAAyC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,GAAG,IAAI,MAAM,EAAgC,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAW3D,SAAS,GAAG,CACV,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAC3E,
|
|
1
|
+
{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,GAAG,IAAI,MAAM,EAAgC,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACzG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAW3D,SAAS,GAAG,CACV,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAC3E,GAAiC;IAEjC,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,KAAC,MAAM,OACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,8BACG,SAAS,IAAI,cAAK,SAAS,EAAC,cAAc,YAAE,SAAS,GAAO,EAC7D,eAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,EAC/C,cAAc,IAAI,CACjB,KAAC,SAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,mBAAmB,kBAC1C,KAAC,aAAa,KAAG,GACP,CACb,IACA,CACJ,GACM,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Tag as RACTag, type TagProps as RACTagProps, Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCloseBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** The icon to display at the start of the tag. */\n iconStart?: ReactNode;\n}\n\nfunction Tag(\n { children, iconStart, UNSAFE_className, UNSAFE_style, ...props }: TagProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACTag\n {...props}\n ref={ref}\n className={clsx('cim-tag', UNSAFE_className)}\n style={UNSAFE_style}\n textValue={textValue}\n >\n {({ allowsRemoving }) => (\n <>\n {iconStart && <div className=\"cim-tag-icon\">{iconStart}</div>}\n <span className=\"cim-tag-text\">{children}</span>\n {allowsRemoving && (\n <RACButton slot=\"remove\" excludeFromTabOrder>\n <IconCloseBold />\n </RACButton>\n )}\n </>\n )}\n </RACTag>\n );\n}\n\n/**\n * Displays a single tag within a tag group.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _Tag = withStyleProps(forwardRef(Tag), 'Tag');\n\nexport { _Tag as Tag };\n"]}
|
|
@@ -8,7 +8,7 @@ const VIRTUAL_LAYOUT_OPTIONS = {
|
|
|
8
8
|
gap: 0,
|
|
9
9
|
};
|
|
10
10
|
/** @internal */
|
|
11
|
-
export function TagFieldListBox({ children, selectedKeys, setSelectedKeys, items, onScroll, isVirtualized, }) {
|
|
11
|
+
export function TagFieldListBox({ children, inputId, selectedKeys, setSelectedKeys, items, onScroll, isVirtualized, }) {
|
|
12
12
|
const listState = useContext(RACListStateContext);
|
|
13
13
|
// Override RACListStateContext to allow multiple selection within the list
|
|
14
14
|
const updatedListState = useMemo(() => {
|
|
@@ -22,13 +22,24 @@ export function TagFieldListBox({ children, selectedKeys, setSelectedKeys, items
|
|
|
22
22
|
// @ts-expect-error `selectionManager.state` is private
|
|
23
23
|
listState.selectionManager.state.selectedKeys = selectedKeys;
|
|
24
24
|
// @ts-expect-error `selectionManager.state` is private
|
|
25
|
-
listState.selectionManager.state.setSelectedKeys =
|
|
25
|
+
listState.selectionManager.state.setSelectedKeys = (keys) => {
|
|
26
|
+
if (keys === 'all') {
|
|
27
|
+
// When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,
|
|
28
|
+
// the selection manager emits the `'all'` string as an indication to select all items.
|
|
29
|
+
// We don't want to do that - instead, we select the contents of the input field.
|
|
30
|
+
// Querying by ID because RACInputContext has a null ref for some reason.
|
|
31
|
+
document.getElementById(inputId)?.select();
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
setSelectedKeys(keys);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
26
37
|
// @ts-expect-error `selectionManager.state` is private
|
|
27
38
|
listState.selectionManager.state.disallowEmptySelection = false;
|
|
28
39
|
return {
|
|
29
40
|
...listState,
|
|
30
41
|
};
|
|
31
|
-
}, [listState, selectedKeys, setSelectedKeys]);
|
|
42
|
+
}, [listState, selectedKeys, setSelectedKeys, inputId]);
|
|
32
43
|
const listBox = (_jsx(RACListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }));
|
|
33
44
|
return (_jsx(RACListStateContext.Provider, { value: updatedListState, children: isVirtualized ? (_jsx(RACVirtualizer, { layout: RACListLayout, layoutOptions: VIRTUAL_LAYOUT_OPTIONS, children: listBox })) : (listBox) }));
|
|
34
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,UAAU,IAAI,aAAa,EAE3B,gBAAgB,IAAI,mBAAmB,EACvC,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAA2B,EACxD,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,aAAa,
|
|
1
|
+
{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,UAAU,IAAI,aAAa,EAE3B,gBAAgB,IAAI,mBAAmB,EACvC,WAAW,IAAI,cAAc,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,MAAM,sBAAsB,GAAyB;IACnD,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,CAAC;IACV,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,gBAAgB;AAChB,MAAM,UAAU,eAAe,CAA2B,EACxD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,EACR,aAAa,GAKd;IACC,MAAM,SAAS,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAElD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,uDAAuD;QACvD,wEAAwE;QACxE,sDAAsD;QACtD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,CAAC,IAAsB,EAAE,EAAE;YAC5E,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;gBACnB,kGAAkG;gBAClG,uFAAuF;gBACvF,iFAAiF;gBACjF,yEAAyE;gBACxE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAA6B,EAAE,MAAM,EAAE,CAAC;YAC1E,CAAC;iBAAM,CAAC;gBACN,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;QACF,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG,CACd,KAAC,UAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,CACd,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAClD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,cAAc,IAAC,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,sBAAsB,YACzE,OAAO,GACO,CAClB,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GAC4B,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n ListBox as RACListBox,\n ListLayout as RACListLayout,\n type ListLayoutOptions as RACListLayoutOptions,\n ListStateContext as RACListStateContext,\n Virtualizer as RACVirtualizer,\n} from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { TagFieldProps } from './tag-field.js';\n\nconst VIRTUAL_LAYOUT_OPTIONS: RACListLayoutOptions = {\n rowHeight: 36,\n headingHeight: 32,\n padding: 0,\n gap: 0,\n};\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n children,\n inputId,\n selectedKeys,\n setSelectedKeys,\n items,\n onScroll,\n isVirtualized,\n}: Pick<TagFieldProps<T>, 'children' | 'items' | 'onScroll' | 'isVirtualized'> & {\n inputId: string;\n selectedKeys: Set<Key>;\n setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n const listState = useContext(RACListStateContext);\n\n // Override RACListStateContext to allow multiple selection within the list\n const updatedListState = useMemo(() => {\n if (!listState || !listState.selectionManager) {\n return listState;\n }\n\n // @ts-expect-error `selectionManager.state` is private\n // This is a temporary mutation before a context update, so this is fine\n // eslint-disable-next-line react-hooks/react-compiler\n listState.selectionManager.state.selectionMode = 'multiple';\n // @ts-expect-error `selectionManager.state` is private\n listState.selectionManager.state.selectedKeys = selectedKeys;\n // @ts-expect-error `selectionManager.state` is private\n listState.selectionManager.state.setSelectedKeys = (keys: Set<Key> | 'all') => {\n if (keys === 'all') {\n // When the end-user presses Ctrl/Cmd + A on a list which has `selectionMode` set to `'multiple'`,\n // the selection manager emits the `'all'` string as an indication to select all items.\n // We don't want to do that - instead, we select the contents of the input field.\n // Querying by ID because RACInputContext has a null ref for some reason.\n (document.getElementById(inputId) as HTMLInputElement | null)?.select();\n } else {\n setSelectedKeys(keys);\n }\n };\n // @ts-expect-error `selectionManager.state` is private\n listState.selectionManager.state.disallowEmptySelection = false;\n\n return {\n ...listState,\n };\n }, [listState, selectedKeys, setSelectedKeys, inputId]);\n\n const listBox = (\n <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n {children}\n </RACListBox>\n );\n\n return (\n <RACListStateContext.Provider value={updatedListState}>\n {isVirtualized ? (\n <RACVirtualizer layout={RACListLayout} layoutOptions={VIRTUAL_LAYOUT_OPTIONS}>\n {listBox}\n </RACVirtualizer>\n ) : (\n listBox\n )}\n </RACListStateContext.Provider>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAQA,OAAO,EAOL,KAAK,YAAY,IAAI,eAAe,EAIpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAS/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAMrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;
|
|
1
|
+
{"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAQA,OAAO,EAOL,KAAK,YAAY,IAAI,eAAe,EAIpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAS/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAMrB,gFAAgF;AAChF,MAAM,WAAW,uBAAuB;IACtC,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EACjB,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,kEAAkE;IAClE,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAkPD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GArPG,CAAC,SAAS,cAAc,iKAqPwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CACzD,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,YAAY,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAqBlG;yBArBe,YAAY;;;AAyB5B,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACxF,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,EAAE,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAezB;yBApBe,eAAe"}
|
|
@@ -19,7 +19,7 @@ import { textStyle } from '../typography/utils.js';
|
|
|
19
19
|
import { TagFieldInput } from './tag-field-input.js';
|
|
20
20
|
import { TagFieldListBox } from './tag-field-list-box.js';
|
|
21
21
|
import { TagFieldTags } from './tag-field-tags.js';
|
|
22
|
-
function TagField({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, inputValue: consumerInputValue, defaultInputValue: defaultConsumerInputValue, onInputChange, name, validate, onScroll, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: defaultConsumerSelectedKeys, onSelectionChange, id, renderEmptyState, isVirtualized = false, ...props }, ref) {
|
|
22
|
+
function TagField({ label, description, error, items, children, placeholder, UNSAFE_className, UNSAFE_style, isReadOnly, inputValue: consumerInputValue, defaultInputValue: defaultConsumerInputValue, onInputChange, form, name, validate, onScroll, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: defaultConsumerSelectedKeys, onSelectionChange, id, renderEmptyState, isVirtualized = false, ...props }, ref) {
|
|
23
23
|
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;
|
|
24
24
|
useProductionWarning(() => {
|
|
25
25
|
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
@@ -52,7 +52,9 @@ function TagField({ label, description, error, items, children, placeholder, UNS
|
|
|
52
52
|
validate,
|
|
53
53
|
validationBehavior: 'native',
|
|
54
54
|
});
|
|
55
|
-
|
|
55
|
+
const [initialSelectedKeys] = useState(selectedKeys);
|
|
56
|
+
const [initialInputValue] = useState(inputValue);
|
|
57
|
+
useFormReset(formInputRef, [defaultConsumerSelectedKeys ?? initialSelectedKeys, defaultConsumerInputValue ?? initialInputValue], ([a, b]) => {
|
|
56
58
|
setSelectedKeys(a);
|
|
57
59
|
setInputValue(b);
|
|
58
60
|
});
|
|
@@ -109,7 +111,8 @@ function TagField({ label, description, error, items, children, placeholder, UNS
|
|
|
109
111
|
[RACFieldErrorContext, validationState.displayValidation],
|
|
110
112
|
], children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsxs(RACGroup, { className: "cim-combo-box-input-group", children: [_jsx(TagFieldInput, { "aria-describedby": props['aria-describedby'], isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: validationState.displayValidation.isInvalid, placeholder: selectedSet.size === 0 && placeholder
|
|
111
113
|
? placeholder
|
|
112
|
-
: messages.format('itemsSelected', { selectedItemCount: selectedSet.size }), onFocusChange: onFocusChange }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(TagFieldTags, { inputId: inputId, selectedKeys: selectedSet, isDisabled: isDisabled, isReadOnly: isReadOnly, renderEmptyState: renderEmptyState, onRemove: onItemSelectionChange }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(TagFieldListBox, { items: items, selectedKeys: selectedSet, setSelectedKeys: setSelectedKeys, onScroll: onScroll, isVirtualized: isVirtualized, children: children }) })] }) }), _jsx(RACInput, { ref: formInputRef, style: { display: 'none' }, value: selectedSet.size || '', required: isRequired, "aria-invalid": validationState.displayValidation.isInvalid || undefined, onChange: () => { } }), name &&
|
|
114
|
+
: messages.format('itemsSelected', { selectedItemCount: selectedSet.size }), onFocusChange: onFocusChange }), _jsx(RACButton, { className: "cim-combo-box-button", children: _jsx(IconChevronDown, {}) })] }), _jsx(FormFieldError, { children: error }), _jsx(FormFieldDescription, { children: description }), _jsx(TagFieldTags, { inputId: inputId, selectedKeys: selectedSet, isDisabled: isDisabled, isReadOnly: isReadOnly, renderEmptyState: renderEmptyState, onRemove: onItemSelectionChange }), _jsx(CollapsibleList, { offset: 5, maxHeight: 315, children: _jsx(TagFieldListBox, { inputId: inputId, items: items, selectedKeys: selectedSet, setSelectedKeys: setSelectedKeys, onScroll: onScroll, isVirtualized: isVirtualized, children: children }) })] }) }), _jsx(RACInput, { ref: formInputRef, style: { display: 'none' }, value: selectedSet.size || '', required: isRequired, "aria-invalid": validationState.displayValidation.isInvalid || undefined, onChange: () => { } }), name &&
|
|
115
|
+
[...selectedSet].map((value) => _jsx("input", { type: "hidden", form: form, name: name, value: value }, value))] }));
|
|
113
116
|
}
|
|
114
117
|
/**
|
|
115
118
|
* Allows users to filter a collapsible list and select multiple items from it.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACrE,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,UAAU,IAAI,aAAa,EAC3B,QAAQ,IAAI,WAAW,EACvB,KAAK,IAAI,QAAQ,EACjB,MAAM,IAAI,SAAS,EACnB,KAAK,IAAI,QAAQ,EAEjB,WAAW,IAAI,cAAc,EAC7B,cAAc,IAAI,iBAAiB,EACnC,IAAI,IAAI,OAAO,EAGf,QAAQ,IAAI,WAAW,EACvB,WAAW,IAAI,cAAc,EAC7B,YAAY,IAAI,eAAe,EAC/B,iBAAiB,IAAI,oBAAoB,GAC1C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAU5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AA2CnD,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,UAAU,EAAE,kBAAkB,EAC9B,iBAAiB,EAAE,yBAAyB,EAC5C,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,EAAE,oBAAoB,EAClC,mBAAmB,EAAE,2BAA2B,EAChD,iBAAiB,EACjB,EAAE,EACF,gBAAgB,EAChB,aAAa,GAAG,KAAK,EACrB,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEhH,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC,CAAC;QAClG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,yEAAyE,CAAC,CAAC;IAC1F,CAAC;IAED,MAAM,QAAQ,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAElD,QAAQ;IAER,MAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,2BAA2B,IAAI,IAAI,GAAG,EAAO,CAAC,CAAC;IAC5F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,kBAAkB,CACxD,oBAAoB,EACpB,mBAAmB,EACnB,iBAAiB,CAClB,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,kBAAkB,CACpD,kBAAkB,EAClB,yBAAyB,IAAI,EAAE,EAC/B,aAAa,CACd,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,0DAA0D;QAC1D,IAAI,YAAY,YAAY,GAAG,EAAE,CAAC;YAChC,OAAO,IAAI,GAAG,CAAM,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,IAAI,GAAG,CAAM,YAAY,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,aAAa;IAEb,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IAC1B,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,MAAM,eAAe,GAAG,sBAAsB,CAAC;QAC7C,IAAI;QACJ,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;QAC5F,SAAS;QACT,UAAU;QACV,QAAQ;QACR,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,YAAY,CAAqB,YAAY,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE;QACnF,eAAe,CAAC,CAAC,CAAC,CAAC;QACnB,aAAa,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,iBAAiB,CACf;QACE,KAAK,EAAE,GAAG,EAAE;YACV,gFAAgF;YAChF,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;QAC5C,CAAC;QACD,SAAS;QACT,UAAU;QACV,QAAQ;QACR,kBAAkB,EAAE,QAAQ;KAC7B,EACD,eAAe,EACf,YAAY,CACb,CAAC;IAEF,iBAAiB;IAEjB,6DAA6D;IAC7D,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7C,MAAM,kBAAkB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC3C,IAAI,SAAS,EAAE,CAAC;YACd,iBAAiB,CAAC,OAAO,GAAG,UAAU,CAAC;YACvC,kBAAkB,CAAC,OAAO,GAAG,WAAW,CAAC;QAC3C,CAAC;aAAM,IAAI,UAAU,KAAK,iBAAiB,CAAC,OAAO,IAAI,WAAW,KAAK,kBAAkB,CAAC,OAAO,EAAE,CAAC;YAClG,eAAe,CAAC,gBAAgB,EAAE,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,GAAQ,EAAE,EAAE;QACzC,IAAI,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YACzB,uFAAuF;YACvF,sDAAsD;YACtD,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC;QAED,eAAe,CAAC,IAAI,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QAC/C,eAAe,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC,CAAC;IAEF,aAAa;IAEb,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAExD,MAAM,cAAc,GAAG,SAAS,CAAC;QAC/B,OAAO,CAAC,KAAK,IAAI,eAAe,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;QACpE,eAAe,CAAC,iBAAiB,CAAC,SAAS;KAC5C,CAAC,CAAC;IAEH,OAAO,CACL,8BACE,KAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,eAAe,EAAE,gBAAgB,CAAC,EACnE,KAAK,EAAE,YAAY;gBACnB,6DAA6D;gBAC7D,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAC,OAAO,EACnB,UAAU,EAAE,UAAU,mBACP,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC5C,iBAAiB,EAAE,CAAC,GAAG,EAAE,EAAE;oBACzB,IAAI,GAAG,EAAE,CAAC;wBACR,qBAAqB,CAAC,GAAG,CAAC,CAAC;oBAC7B,CAAC;gBACH,CAAC,YAED,MAAC,WAAW,IACV,MAAM,EAAE;wBACN,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC;wBACzG,CAAC,eAAe,EAAE,EAAE,SAAS,EAAE,eAAe,CAAC,iBAAiB,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;wBACzF,CAAC,oBAAoB,EAAE,eAAe,CAAC,iBAAiB,CAAC;qBAC1D,aAED,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EAEjB,MAAC,QAAQ,IAAC,SAAS,EAAC,2BAA2B,aAC7C,KAAC,aAAa,wBACM,KAAK,CAAC,kBAAkB,CAAC,EAC3C,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,eAAe,CAAC,iBAAiB,CAAC,SAAS,EACtD,WAAW,EACT,WAAW,CAAC,IAAI,KAAK,CAAC,IAAI,WAAW;wCACnC,CAAC,CAAC,WAAW;wCACb,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,EAAE,iBAAiB,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,EAE/E,aAAa,EAAE,aAAa,GAC5B,EACF,KAAC,SAAS,IAAC,SAAS,EAAC,sBAAsB,YACzC,KAAC,eAAe,KAAG,GACT,IACH,EAEX,KAAC,cAAc,cAAE,KAAK,GAAkB,EACxC,KAAC,oBAAoB,cAAE,WAAW,GAAwB,EAE1D,KAAC,YAAY,IACX,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,WAAW,EACzB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,qBAAqB,GAC/B,EAEF,KAAC,eAAe,IACd,MAAM,EAAE,CAAC,EACT,SAAS,EAAE,GAAG,YAEd,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,WAAW,EACzB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,YAE3B,QAAQ,GACO,GACF,IACN,GACF,EAGd,KAAC,QAAQ,IACP,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,KAAK,EAAE,WAAW,CAAC,IAAI,IAAI,EAAE,EAC7B,QAAQ,EAAE,UAAU,kBACN,eAAe,CAAC,iBAAiB,CAAC,SAAS,IAAI,SAAS,EACtE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAClB,EAGD,IAAI,IAAI,CAAC,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAO,IAAI,EAAC,QAAQ,EAAa,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAA/B,KAAK,CAA8B,CAAC,IACtG,CACJ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAQjC,oDAAoD;AACpD,MAAM,UAAU,YAAY,CAA2B,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB;IACjG,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,KAAC,cAAc,OAAK,KAAK,EAAE,SAAS,EAAC,iCAAiC,EAAC,SAAS,EAAE,SAAS,YACxF,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACnB,8BACE,cAAK,SAAS,EAAC,6BAA6B,iCAC1C,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,aAAa,KAAG,GACb,GACF,EAEN,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,YACnG,QAAQ,GACD,IACT,CACJ,GACc,CAClB,CAAC;AACJ,CAAC;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAS1C,0DAA0D;AAC1D,MAAM,UAAU,eAAe,CAA2B,EACxD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACgB;IACxB,IAAI,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACvE,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;IACjG,CAAC;IAED,OAAO,CACL,MAAC,iBAAiB,OAAK,KAAK,EAAE,SAAS,EAAC,uBAAuB,aAC7D,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,YAExG,KAAK,GACI,EACZ,KAAC,aAAa,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAiB,IACrC,CACrB,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["'use client';\n\nimport { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, useRef, useState, type ForwardedRef } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n type ListBoxProps as RACListBoxProps,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Provider as RACProvider,\n TextContext as RACTextContext,\n GroupContext as RACGroupContext,\n FieldErrorContext as RACFieldErrorContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { TagGroupProps } from '../tag/tag-group.js';\nimport type {\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\nimport { TagFieldTags } from './tag-field-tags.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<RACListBoxProps<T>, 'onScroll'>,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n inputValue: consumerInputValue,\n defaultInputValue: defaultConsumerInputValue,\n onInputChange,\n name,\n validate,\n onScroll,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: defaultConsumerSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const messages = useLocalizedMessages('tagField');\n\n // State\n\n const [defaultSelectedKeys] = useState(() => defaultConsumerSelectedKeys ?? new Set<Key>());\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n );\n const [inputValue, setInputValue] = useControlledState(\n consumerInputValue,\n defaultConsumerInputValue ?? '',\n onInputChange,\n );\n\n const selectedSet = useMemo(() => {\n // eslint-disable-next-line unicorn/no-instanceof-builtins\n if (selectedKeys instanceof Set) {\n return new Set<Key>(selectedKeys.values());\n }\n\n return new Set<Key>(selectedKeys);\n }, [selectedKeys]);\n\n // Validation\n\n const inputId = useId(id);\n const formInputRef = useRef<HTMLInputElement>(null);\n\n const validationState = useFormValidationState({\n name,\n value: useMemo(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n });\n\n useFormReset<[Set<Key>, string]>(formInputRef, [selectedSet, inputValue], ([a, b]) => {\n setSelectedKeys(a);\n setInputValue(b);\n });\n\n useFormValidation(\n {\n focus: () => {\n // Querying by element ID because a ref is always null here, I don't know why :(\n document.getElementById(inputId)?.focus();\n },\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n },\n validationState,\n formInputRef,\n );\n\n // Event handlers\n\n // Commit validation on input blur if the values have changed\n const inputValueOnFocus = useRef(inputValue);\n const selectedSetOnFocus = useRef(selectedSet);\n\n const onFocusChange = (isFocused: boolean) => {\n if (isFocused) {\n inputValueOnFocus.current = inputValue;\n selectedSetOnFocus.current = selectedSet;\n } else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {\n validationState.commitValidation();\n }\n };\n\n const onItemSelectionChange = (key: Key) => {\n if (selectedSet.has(key)) {\n // This is a temporary mutation followed immediately by a state update, so this is fine\n // eslint-disable-next-line react-hooks/react-compiler\n selectedSet.delete(key);\n } else {\n selectedSet.add(key);\n }\n\n setSelectedKeys(new Set(selectedSet.values()));\n validationState.commitValidation();\n };\n\n // Text slots\n\n const descriptionId = useSlotId([Boolean(description)]);\n\n const errorMessageId = useSlotId([\n Boolean(error || validationState.displayValidation.validationErrors),\n validationState.displayValidation.isInvalid,\n ]);\n\n return (\n <>\n <RACComboBox\n {...props}\n ref={ref}\n id={inputId}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n // Force no internal selection - we handle selection manually\n selectedKey={null}\n inputValue={inputValue}\n onInputChange={setInputValue}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n onSelectionChange={(key) => {\n if (key) {\n onItemSelectionChange(key);\n }\n }}\n >\n <RACProvider\n values={[\n [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n [RACGroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],\n [RACFieldErrorContext, validationState.displayValidation],\n ]}\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={validationState.displayValidation.isInvalid}\n placeholder={\n selectedSet.size === 0 && placeholder\n ? placeholder\n : messages.format('itemsSelected', { selectedItemCount: selectedSet.size })\n }\n onFocusChange={onFocusChange}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <TagFieldTags<T>\n inputId={inputId}\n selectedKeys={selectedSet}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n renderEmptyState={renderEmptyState}\n onRemove={onItemSelectionChange}\n />\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T>\n items={items}\n selectedKeys={selectedSet}\n setSelectedKeys={setSelectedKeys}\n onScroll={onScroll}\n isVirtualized={isVirtualized}\n >\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACProvider>\n </RACComboBox>\n\n {/* This input is used for native form validation. We can't use the combo box input because its value has no relation to the selected values. */}\n <RACInput\n ref={formInputRef}\n style={{ display: 'none' }}\n value={selectedSet.size || ''}\n required={isRequired}\n aria-invalid={validationState.displayValidation.isInvalid || undefined}\n onChange={() => {}}\n />\n\n {/* These hidden inputs provide values when a form is submitted. */}\n {name && [...selectedSet].map((value) => <input type=\"hidden\" key={value} name={name} value={value} />)}\n </>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem>\n extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item cim-checkbox\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\" aria-hidden>\n <div className=\"cim-checkbox-toggle\">\n <IconCheckBold />\n </div>\n </div>\n\n <RACText slot=\"label\" className={textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
|
|
1
|
+
{"version":3,"file":"tag-field.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidation } from '@react-aria/form';\nimport { useFormReset, useId, useSlotId } from '@react-aria/utils';\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, useRef, useState, type ForwardedRef } from 'react';\nimport {\n Button as RACButton,\n Collection as RACCollection,\n ComboBox as RACComboBox,\n Group as RACGroup,\n Header as RACHeader,\n Input as RACInput,\n type ListBoxProps as RACListBoxProps,\n ListBoxItem as RACListBoxItem,\n ListBoxSection as RACListBoxSection,\n Text as RACText,\n type ComboBoxProps as RACComboBoxProps,\n type ListBoxItemProps as RACListBoxItemProps,\n Provider as RACProvider,\n TextContext as RACTextContext,\n GroupContext as RACGroupContext,\n FieldErrorContext as RACFieldErrorContext,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/localization-provider.js';\nimport { IconCheckBold, IconChevronDown } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { TagGroupProps } from '../tag/tag-group.js';\nimport type {\n CollectionItem,\n CollectionProps,\n CommonProps,\n FieldWithPlaceholderProps,\n Key,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\nimport { TagFieldInput } from './tag-field-input.js';\nimport { TagFieldListBox } from './tag-field-list-box.js';\nimport { TagFieldTags } from './tag-field-tags.js';\n\n/** Represents the state of the `TagField` component for validation purposes. */\nexport interface TagFieldValidationValue {\n /** The selected keys in the TagField. */\n selectedKeys: Set<Key> | null;\n /** The value of the TagField input. */\n inputValue: string;\n}\n\nexport interface TagFieldProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n Pick<\n RACComboBoxProps<T>,\n | 'isRequired'\n | 'isDisabled'\n | 'isInvalid'\n | 'isReadOnly'\n | 'inputValue'\n | 'defaultInputValue'\n | 'autoFocus'\n | 'onInputChange'\n | 'onFocus'\n | 'onBlur'\n | 'onOpenChange'\n >,\n Pick<RACListBoxProps<T>, 'onScroll'>,\n Pick<TagGroupProps<T>, 'renderEmptyState'> {\n /** The currently selected keys in the collection (controlled). */\n selectedKeys?: Iterable<Key>;\n /** The initial selected keys in the collection (uncontrolled). */\n defaultSelectedKeys?: Iterable<Key>;\n /** Handler that is called when the selection changes. */\n onSelectionChange?: (keys: Set<Key>) => void;\n /**\n * Whether the list of options should be virtualized. Use this as a performance optimization for large lists.\n * @default false\n */\n isVirtualized?: boolean;\n}\n\nfunction TagField<T extends CollectionItem>(\n {\n label,\n description,\n error,\n items,\n children,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n isReadOnly,\n inputValue: consumerInputValue,\n defaultInputValue: defaultConsumerInputValue,\n onInputChange,\n form,\n name,\n validate,\n onScroll,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: defaultConsumerSelectedKeys,\n onSelectionChange,\n id,\n renderEmptyState,\n isVirtualized = false,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isRequired, isDisabled, isInvalid } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TagField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagField` requires `children` to be a function when using `items` prop');\n }\n\n const messages = useLocalizedMessages('tagField');\n\n // State\n\n const [defaultSelectedKeys] = useState(() => defaultConsumerSelectedKeys ?? new Set<Key>());\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n );\n const [inputValue, setInputValue] = useControlledState(\n consumerInputValue,\n defaultConsumerInputValue ?? '',\n onInputChange,\n );\n\n const selectedSet = useMemo(() => {\n // eslint-disable-next-line unicorn/no-instanceof-builtins\n if (selectedKeys instanceof Set) {\n return new Set<Key>(selectedKeys.values());\n }\n\n return new Set<Key>(selectedKeys);\n }, [selectedKeys]);\n\n // Validation\n\n const inputId = useId(id);\n const formInputRef = useRef<HTMLInputElement>(null);\n\n const validationState = useFormValidationState({\n name,\n value: useMemo(() => ({ selectedKeys: selectedSet, inputValue }), [selectedSet, inputValue]),\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n });\n\n const [initialSelectedKeys] = useState(selectedKeys);\n const [initialInputValue] = useState(inputValue);\n\n useFormReset<[Iterable<Key>, string]>(\n formInputRef,\n [defaultConsumerSelectedKeys ?? initialSelectedKeys, defaultConsumerInputValue ?? initialInputValue],\n ([a, b]) => {\n setSelectedKeys(a);\n setInputValue(b);\n },\n );\n\n useFormValidation(\n {\n focus: () => {\n // Querying by element ID because a ref is always null here, I don't know why :(\n document.getElementById(inputId)?.focus();\n },\n isInvalid,\n isRequired,\n validate,\n validationBehavior: 'native',\n },\n validationState,\n formInputRef,\n );\n\n // Event handlers\n\n // Commit validation on input blur if the values have changed\n const inputValueOnFocus = useRef(inputValue);\n const selectedSetOnFocus = useRef(selectedSet);\n\n const onFocusChange = (isFocused: boolean) => {\n if (isFocused) {\n inputValueOnFocus.current = inputValue;\n selectedSetOnFocus.current = selectedSet;\n } else if (inputValue !== inputValueOnFocus.current || selectedSet !== selectedSetOnFocus.current) {\n validationState.commitValidation();\n }\n };\n\n const onItemSelectionChange = (key: Key) => {\n if (selectedSet.has(key)) {\n // This is a temporary mutation followed immediately by a state update, so this is fine\n // eslint-disable-next-line react-hooks/react-compiler\n selectedSet.delete(key);\n } else {\n selectedSet.add(key);\n }\n\n setSelectedKeys(new Set(selectedSet.values()));\n validationState.commitValidation();\n };\n\n // Text slots\n\n const descriptionId = useSlotId([Boolean(description)]);\n\n const errorMessageId = useSlotId([\n Boolean(error || validationState.displayValidation.validationErrors),\n validationState.displayValidation.isInvalid,\n ]);\n\n return (\n <>\n <RACComboBox\n {...props}\n ref={ref}\n id={inputId}\n className={clsx('cim-combo-box', 'cim-tag-field', UNSAFE_className)}\n style={UNSAFE_style}\n // Force no internal selection - we handle selection manually\n selectedKey={null}\n inputValue={inputValue}\n onInputChange={setInputValue}\n menuTrigger=\"focus\"\n isReadOnly={isReadOnly}\n data-readonly={isReadOnly ? true : undefined}\n onSelectionChange={(key) => {\n if (key) {\n onItemSelectionChange(key);\n }\n }}\n >\n <RACProvider\n values={[\n [RACTextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],\n [RACGroupContext, { isInvalid: validationState.displayValidation.isInvalid, isDisabled }],\n [RACFieldErrorContext, validationState.displayValidation],\n ]}\n >\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n\n <RACGroup className=\"cim-combo-box-input-group\">\n <TagFieldInput\n aria-describedby={props['aria-describedby']}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={validationState.displayValidation.isInvalid}\n placeholder={\n selectedSet.size === 0 && placeholder\n ? placeholder\n : messages.format('itemsSelected', { selectedItemCount: selectedSet.size })\n }\n onFocusChange={onFocusChange}\n />\n <RACButton className=\"cim-combo-box-button\">\n <IconChevronDown />\n </RACButton>\n </RACGroup>\n\n <FormFieldError>{error}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n\n <TagFieldTags<T>\n inputId={inputId}\n selectedKeys={selectedSet}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n renderEmptyState={renderEmptyState}\n onRemove={onItemSelectionChange}\n />\n\n <CollapsibleList\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <TagFieldListBox<T>\n inputId={inputId}\n items={items}\n selectedKeys={selectedSet}\n setSelectedKeys={setSelectedKeys}\n onScroll={onScroll}\n isVirtualized={isVirtualized}\n >\n {children}\n </TagFieldListBox>\n </CollapsibleList>\n </RACProvider>\n </RACComboBox>\n\n {/* This input is used for native form validation. We can't use the combo box input because its value has no relation to the selected values. */}\n <RACInput\n ref={formInputRef}\n style={{ display: 'none' }}\n value={selectedSet.size || ''}\n required={isRequired}\n aria-invalid={validationState.displayValidation.isInvalid || undefined}\n onChange={() => {}}\n />\n\n {/* These hidden inputs provide values when a form is submitted. */}\n {name &&\n [...selectedSet].map((value) => <input type=\"hidden\" key={value} form={form} name={name} value={value} />)}\n </>\n );\n}\n\n/**\n * Allows users to filter a collapsible list and select multiple items from it.\n *\n * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem>\n extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n /** The content to display as the label. */\n children: StringLikeChildren;\n}\n\n/** Renders a single list item within `TagField`. */\nexport function TagFieldItem<T extends CollectionItem>({ children, ...props }: TagFieldItemProps<T>) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACListBoxItem {...props} className=\"cim-tag-field-item cim-checkbox\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <div className=\"cim-checkbox-toggle-wrapper\" aria-hidden>\n <div className=\"cim-checkbox-toggle\">\n <IconCheckBold />\n </div>\n </div>\n\n <RACText slot=\"label\" className={textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n </>\n )}\n </RACListBoxItem>\n );\n}\n\nTagFieldItem.displayName = 'TagFieldItem';\n\nexport interface TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `TagField` into a section. */\nexport function TagFieldSection<T extends CollectionItem>({\n title,\n children,\n items,\n ...props\n}: TagFieldSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`TagFieldSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACListBoxSection {...props} className=\"cim-combo-box-section\">\n <RACHeader\n className={clsx('cim-combo-box-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}\n >\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACListBoxSection>\n );\n}\n\nTagFieldSection.displayName = 'TagFieldSection';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CACX;CAAG;
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,iBAAiB,EACf,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,WAAW,GACX,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CACX;CAAG;AAmCR;;;;GAIG;AACH,QAAA,MAAM,UAAU,gKAAqD,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}
|
|
@@ -14,7 +14,7 @@ function TextField({ label, description, error: errorMessage, placeholder, UNSAF
|
|
|
14
14
|
console.warn('TextField requires one of label / aria-label / aria-labelledby for accessibility');
|
|
15
15
|
}
|
|
16
16
|
}, [label, ariaLabel, ariaLabelledBy]);
|
|
17
|
-
return (_jsx(RACTextField, { ...props, ref: ref, className: clsx('cim-text-field', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled,
|
|
17
|
+
return (_jsx(RACTextField, { ...props, ref: ref, className: clsx('cim-text-field', UNSAFE_className), style: UNSAFE_style, children: ({ isDisabled, isRequired }) => (_jsxs(_Fragment, { children: [_jsx(FormFieldLabel, { isRequired: isRequired, isDisabled: isDisabled, children: label }), _jsx(RACGroup, { className: "cim-text-field-input-group", children: _jsx(RACInput, { className: clsx('cim-text-field-input', textStyle({ variant: 'body' })), placeholder: placeholder }) }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] })) }));
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
20
|
* Allows users to enter a single line of text with a keyboard.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,SAAS,IAAI,YAAY,EAEzB,KAAK,IAAI,QAAQ,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAyBnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../../src/components/text-inputs/text-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,KAAK,IAAI,QAAQ,EACjB,SAAS,IAAI,YAAY,EAEzB,KAAK,IAAI,QAAQ,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAE5G,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAyBnD,SAAS,SAAS,CAChB,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EAClH,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACxG,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAC/B,8BACE,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,YAC3D,KAAK,GACS,EACjB,KAAC,QAAQ,IAAC,SAAS,EAAC,4BAA4B,YAC9C,KAAC,QAAQ,IACP,SAAS,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,EACvE,WAAW,EAAE,WAAW,GACxB,GACO,EACX,KAAC,cAAc,cAAE,YAAY,GAAkB,EAC/C,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IACzD,CACJ,GACY,CAChB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,CAAC;AAEtE,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport {\n Input as RACInput,\n TextField as RACTextField,\n type TextFieldProps as RACTextFieldProps,\n Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface TextFieldProps\n extends CommonProps,\n FieldWithPlaceholderProps<string>,\n Pick<\n RACTextFieldProps,\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'isReadOnly'\n | 'type'\n | 'autoFocus'\n | 'autoComplete'\n | 'inputMode'\n | 'minLength'\n | 'maxLength'\n | 'pattern'\n | 'onFocus'\n | 'onBlur'\n > {}\n\nfunction TextField(\n { label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }: TextFieldProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('TextField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACTextField {...props} ref={ref} className={clsx('cim-text-field', UNSAFE_className)} style={UNSAFE_style}>\n {({ isDisabled, isRequired }) => (\n <>\n <FormFieldLabel isRequired={isRequired} isDisabled={isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-text-field-input-group\">\n <RACInput\n className={clsx('cim-text-field-input', textStyle({ variant: 'body' }))}\n placeholder={placeholder}\n />\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </>\n )}\n </RACTextField>\n );\n}\n\n/**\n * Allows users to enter a single line of text with a keyboard.\n *\n * See [text field usage guidelines](https://ui.cimpress.io/components/text-field/).\n */\nconst _TextField = withStyleProps(forwardRef(TextField), 'TextField');\n\nexport { _TextField as TextField };\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type SwitchProps as RACSwitchProps } from 'react-aria-components';
|
|
2
2
|
import type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';
|
|
3
|
-
export interface UNSTABLE_ToggleProps extends CommonProps, AriaLabelingProps, Pick<RACSwitchProps, 'onChange' | 'isSelected' | 'isDisabled' | 'isReadOnly' | 'defaultSelected' | 'autoFocus' | 'name' | 'value'> {
|
|
3
|
+
export interface UNSTABLE_ToggleProps extends CommonProps, AriaLabelingProps, Pick<RACSwitchProps, 'onChange' | 'isSelected' | 'isDisabled' | 'isReadOnly' | 'defaultSelected' | 'autoFocus' | 'form' | 'name' | 'value'> {
|
|
4
4
|
/** The label rendered next to the toggle. */
|
|
5
5
|
children?: StringLikeChildren;
|
|
6
6
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAKhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,oBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,cAAc,
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAuB,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAKhG,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtF,MAAM,WAAW,oBACf,SAAQ,WAAW,EACjB,iBAAiB,EACjB,IAAI,CACF,cAAc,EACZ,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,iBAAiB,GACjB,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,CACV;IACH,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;CAC/B;AAgCD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,wKAAwD,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAsC,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,IAAI,SAAS,EAAsC,MAAM,uBAAuB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAqB7C,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAwB,EAC5E,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,kFAAkF,CAAC,CAAC;QACnG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,MAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAClG,cAAK,SAAS,EAAC,0BAA0B,iCACvC,eAAK,SAAS,EAAC,kBAAkB,aAC/B,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,KAAG,EACjB,cAAK,SAAS,EAAC,uBAAuB,GAAG,IACrC,GACF,EACL,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACS,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,cAAc,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC;AAE/E,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\nimport { Switch as RACSwitch, type SwitchProps as RACSwitchProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCheckBold, IconCloseBold } from '../../icons/index.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface UNSTABLE_ToggleProps\n extends CommonProps,\n AriaLabelingProps,\n Pick<\n RACSwitchProps,\n | 'onChange'\n | 'isSelected'\n | 'isDisabled'\n | 'isReadOnly'\n | 'defaultSelected'\n | 'autoFocus'\n | 'form'\n | 'name'\n | 'value'\n > {\n /** The label rendered next to the toggle. */\n children?: StringLikeChildren;\n}\n\nfunction UNSTABLE_Toggle(\n { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_ToggleProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!children && !ariaLabel && !ariaLabelledBy) {\n console.warn('Toggle requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACSwitch {...props} ref={ref} className={clsx('cim-toggle', UNSAFE_className)} style={UNSAFE_style}>\n <div className=\"cim-toggle-track-wrapper\" aria-hidden>\n <div className=\"cim-toggle-track\">\n <IconCheckBold />\n <IconCloseBold />\n <div className=\"cim-toggle-track-head\" />\n </div>\n </div>\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </RACSwitch>\n );\n}\n\n/**\n * Allows users to turn a setting on or off.\n *\n * See [toggle usage guidelines](https://ui.cimpress.io/components/toggle/).\n */\nconst _UNSTABLE_Toggle = withStyleProps(forwardRef(UNSTABLE_Toggle), 'Toggle');\n\nexport { _UNSTABLE_Toggle as UNSTABLE_Toggle };\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/context.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/context.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC,gBAAgB;AAChB,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAuC,IAAI,CAAC,CAAC","sourcesContent":["import type { FormValidationState } from '@react-stately/form';\nimport { createContext } from 'react';\n\n/** @internal */\nexport interface ToggleButtonGroupContextValue {\n form?: string;\n name?: string;\n isInvalid?: boolean;\n isRequired?: boolean;\n validationState: FormValidationState;\n}\n\n/** @internal */\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupContextValue | null>(null);\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"internal-toggle-button.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/internal-toggle-button.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useFormValidation } from '@react-aria/form';
|
|
3
|
+
import { useFormReset, useObjectRef } from '@react-aria/utils';
|
|
4
|
+
import { privateValidationStateProp, useFormValidationState } from '@react-stately/form';
|
|
5
|
+
import { useControlledState } from '@react-stately/utils';
|
|
6
|
+
import clsx from 'clsx';
|
|
7
|
+
import { useContext, useRef, useState } from 'react';
|
|
8
|
+
import { TextContext as RACTextContext, ToggleButton as RACToggleButton, ToggleGroupStateContext as RACToggleGroupStateContext, useSlottedContext, } from 'react-aria-components';
|
|
9
|
+
import { ToggleButtonGroupContext } from './context.js';
|
|
10
|
+
/** @internal */
|
|
11
|
+
export function InternalToggleButton({ buttonRef: ref, children, size = 'medium', isDisabled, fullWidth, UNSAFE_className, UNSAFE_style, form, name, value, isSelected: consumerIsSelected, defaultSelected: consumerDefaultSelected, onChange, ...props }) {
|
|
12
|
+
// State
|
|
13
|
+
const toggleButtonGroupContext = useContext(ToggleButtonGroupContext);
|
|
14
|
+
const toggleGroupState = useContext(RACToggleGroupStateContext);
|
|
15
|
+
const descriptionProps = useSlottedContext(RACTextContext, 'description');
|
|
16
|
+
const errorMessageProps = useSlottedContext(RACTextContext, 'errorMessage');
|
|
17
|
+
const [isSelected, setIsSelected] = useControlledState(toggleGroupState && value ? toggleGroupState.selectedKeys.has(value) : consumerIsSelected, consumerDefaultSelected ?? false, (newIsSelected) => {
|
|
18
|
+
onChange?.(newIsSelected);
|
|
19
|
+
if (toggleGroupState && value) {
|
|
20
|
+
toggleGroupState.setSelected(value, newIsSelected);
|
|
21
|
+
}
|
|
22
|
+
validationState.commitValidation();
|
|
23
|
+
});
|
|
24
|
+
// Validation
|
|
25
|
+
const buttonRef = useObjectRef(ref);
|
|
26
|
+
const formInputRef = useRef(null);
|
|
27
|
+
const formInputName = toggleButtonGroupContext?.name ?? name;
|
|
28
|
+
const validationState = useFormValidationState({
|
|
29
|
+
// If part of a group, validation is handled at group level
|
|
30
|
+
name: toggleButtonGroupContext ? undefined : name,
|
|
31
|
+
value,
|
|
32
|
+
validationBehavior: 'native',
|
|
33
|
+
[privateValidationStateProp]: toggleButtonGroupContext?.validationState ?? undefined,
|
|
34
|
+
});
|
|
35
|
+
const [initialSelected] = useState(isSelected);
|
|
36
|
+
useFormReset(formInputRef, consumerDefaultSelected ?? initialSelected, setIsSelected);
|
|
37
|
+
useFormValidation({
|
|
38
|
+
focus: () => buttonRef.current?.focus(),
|
|
39
|
+
validationBehavior: 'native',
|
|
40
|
+
}, validationState, formInputRef);
|
|
41
|
+
return (_jsxs(_Fragment, { children: [_jsx(RACToggleButton, { ...props, ref: buttonRef, className: clsx('cim-toggle-button', UNSAFE_className), style: UNSAFE_style, id: toggleButtonGroupContext ? value : undefined, isDisabled: isDisabled, isSelected: isSelected, onChange: setIsSelected, "aria-describedby": [
|
|
42
|
+
props['aria-describedby'],
|
|
43
|
+
toggleButtonGroupContext?.isInvalid ? errorMessageProps?.id : null,
|
|
44
|
+
descriptionProps?.id,
|
|
45
|
+
]
|
|
46
|
+
.filter(Boolean)
|
|
47
|
+
.join(' ') || undefined, "data-variant": "secondary", "data-tone": "base", "data-size": size, "data-full-width": fullWidth || undefined, children: children }), formInputName && (_jsx("input", { ref: formInputRef, style: { display: 'none' }, type: "checkbox", form: toggleButtonGroupContext?.form ?? form, name: formInputName, checked: isSelected, value: value, required: toggleButtonGroupContext?.isRequired, "aria-invalid": toggleButtonGroupContext?.validationState.displayValidation.isInvalid ??
|
|
48
|
+
validationState.displayValidation.isInvalid ??
|
|
49
|
+
undefined, onChange: () => { } }))] }));
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=internal-toggle-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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\n/** @internal */\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 [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 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 [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,15 +1,19 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
import { type ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components';
|
|
3
|
-
import type { CommonProps,
|
|
4
|
-
export interface
|
|
5
|
-
/** Toggle buttons belonging to the group. Each button must have
|
|
3
|
+
import type { CommonProps, FieldProps, Key, WithRequired } from '../types.js';
|
|
4
|
+
export interface ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, WithRequired<FieldProps<Set<Key>>, 'label'>, Pick<RACToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'> {
|
|
5
|
+
/** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */
|
|
6
6
|
children: ReactNode;
|
|
7
|
+
/** Whether the current selection is invalid. */
|
|
8
|
+
isInvalid?: boolean;
|
|
9
|
+
/** Whether a selection is required before form submission. */
|
|
10
|
+
isRequired?: boolean;
|
|
7
11
|
}
|
|
8
12
|
/**
|
|
9
13
|
* Allows users to toggle multiple options, with single or multiple selection.
|
|
10
14
|
*
|
|
11
15
|
* See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).
|
|
12
16
|
*/
|
|
13
|
-
declare const
|
|
14
|
-
export {
|
|
17
|
+
declare const _ToggleButtonGroup: (props: ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
|
|
18
|
+
export { _ToggleButtonGroup as ToggleButtonGroup };
|
|
15
19
|
//# sourceMappingURL=toggle-button-group.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAML,KAAK,sBAAsB,IAAI,yBAAyB,EACzD,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI9E,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,EAC3C,IAAI,CACF,yBAAyB,EACzB,cAAc,GAAG,qBAAqB,GAAG,mBAAmB,GAAG,eAAe,GAAG,YAAY,CAC9F;IACH,2FAA2F;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAuHD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAAqE,CAAC;AAE9F,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}
|