@cimpress-ui/react 1.15.0 → 1.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/commonjs/components/checkbox/checkbox.js +2 -2
- package/dist/commonjs/components/checkbox/checkbox.js.map +1 -1
- package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.d.ts +2 -0
- package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.d.ts.map +1 -0
- package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js +21 -0
- package/dist/commonjs/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -0
- package/dist/commonjs/components/menu/menu.d.ts +3 -3
- package/dist/commonjs/components/menu/menu.d.ts.map +1 -1
- package/dist/commonjs/components/menu/menu.js +3 -1
- package/dist/commonjs/components/menu/menu.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 +2 -1
- package/dist/commonjs/components/tag-field/tag-field.js.map +1 -1
- package/dist/commonjs/components/toast/toast-queue.d.ts.map +1 -1
- package/dist/commonjs/components/toast/toast-queue.js +16 -11
- package/dist/commonjs/components/toast/toast-queue.js.map +1 -1
- package/dist/commonjs/components/toast/types.d.ts +1 -0
- package/dist/commonjs/components/toast/types.d.ts.map +1 -1
- package/dist/commonjs/components/toast/types.js.map +1 -1
- package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts +3 -0
- package/dist/commonjs/components/toggle-button/toggle-button-group.d.ts.map +1 -1
- package/dist/commonjs/components/toggle-button/toggle-button-group.js +2 -2
- package/dist/commonjs/components/toggle-button/toggle-button-group.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/esm/components/checkbox/checkbox.js +2 -2
- package/dist/esm/components/checkbox/checkbox.js.map +1 -1
- package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.d.ts +2 -0
- package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.d.ts.map +1 -0
- package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js +15 -0
- package/dist/esm/components/internal/checkbox-indicator/checkbox-indicator.js.map +1 -0
- package/dist/esm/components/menu/menu.d.ts +3 -3
- package/dist/esm/components/menu/menu.d.ts.map +1 -1
- package/dist/esm/components/menu/menu.js +3 -1
- package/dist/esm/components/menu/menu.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 +3 -2
- package/dist/esm/components/tag-field/tag-field.js.map +1 -1
- package/dist/esm/components/toast/toast-queue.d.ts.map +1 -1
- package/dist/esm/components/toast/toast-queue.js +16 -11
- package/dist/esm/components/toast/toast-queue.js.map +1 -1
- package/dist/esm/components/toast/types.d.ts +1 -0
- package/dist/esm/components/toast/types.d.ts.map +1 -1
- package/dist/esm/components/toast/types.js.map +1 -1
- package/dist/esm/components/toggle-button/toggle-button-group.d.ts +3 -0
- package/dist/esm/components/toggle-button/toggle-button-group.d.ts.map +1 -1
- package/dist/esm/components/toggle-button/toggle-button-group.js +2 -2
- package/dist/esm/components/toggle-button/toggle-button-group.js.map +1 -1
- package/dist-styles/core.css +1 -1
- package/dist-styles/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,IAAI,WAAW,EAA0C,MAAM,uBAAuB,CAAC;AACxG,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,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AAEzF,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAyB7C,SAAS,QAAQ,CACf,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiB,EACrE,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,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,gCAAgC,EAAE,gBAAgB,CAAC,EACnF,KAAK,EAAE,YAAY,YAElB,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CACpC,8BACE,KAAC,iBAAiB,IAAC,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,GAAI,EAC9E,QAAQ,IAAI,CACX,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAC7B,QAAQ,GACJ,CACR,IACA,CACJ,GACW,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 } from 'react';\nimport { Checkbox as RACCheckbox, type CheckboxProps as RACCheckboxProps } 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 { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport type { AriaLabelingProps, CommonProps, StringLikeChildren } from '../types.js';\nimport { Text } from '../typography/text.js';\n\nexport interface CheckboxProps\n extends\n CommonProps,\n AriaLabelingProps,\n Pick<\n RACCheckboxProps,\n | 'onChange'\n | 'isSelected'\n | 'isIndeterminate'\n | 'isDisabled'\n | 'isReadOnly'\n | 'isRequired'\n | 'isInvalid'\n | 'form'\n | 'name'\n | 'value'\n | 'defaultSelected'\n | 'autoFocus'\n > {\n /** The label rendered next to the checkbox. */\n children?: StringLikeChildren;\n}\n\nfunction Checkbox(\n { children, UNSAFE_className, UNSAFE_style, ...props }: CheckboxProps,\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('Checkbox requires one of children / aria-label / aria-labelledby for accessibility');\n }\n }, [children, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACCheckbox\n {...props}\n ref={ref}\n className={clsx('cim-checkbox', 'cim-checkbox-indicator-wrapper', UNSAFE_className)}\n style={UNSAFE_style}\n >\n {({ isIndeterminate, isSelected }) => (\n <>\n <CheckboxIndicator isIndeterminate={isIndeterminate} isSelected={isSelected} />\n {children && (\n <Text as=\"span\" variant=\"medium\">\n {children}\n </Text>\n )}\n </>\n )}\n </RACCheckbox>\n );\n}\n\n/**\n * Allows users to mark an item as selected. Can be used standalone, or as part of `CheckboxGroup`.\n *\n * See [checkbox usage guidelines](https://ui.cimpress.io/components/checkbox/).\n */\nconst _Checkbox = withStyleProps(forwardRef(Checkbox), 'Checkbox');\n\nexport { _Checkbox as Checkbox };\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-indicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/checkbox-indicator/checkbox-indicator.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { IconCheckBold, IconSubtractBold } from '../../../icons/index.js';
|
|
4
|
+
// TODO: refactor so that state is accepted through props/context instead of a parent className
|
|
5
|
+
/**
|
|
6
|
+
* Displays a non-interactive, purely visual checkbox indicator.
|
|
7
|
+
* Requires adding a `cim-checkbox-indicator-wrapper` className to the parent element.
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export function CheckboxIndicator({ isSelected, isIndeterminate, UNSAFE_className, UNSAFE_style, ...props }) {
|
|
12
|
+
return (_jsx("div", { ...props, className: clsx('cim-checkbox-indicator', UNSAFE_className), style: UNSAFE_style, "data-selected": isSelected, "aria-hidden": true, children: _jsx("div", { className: "cim-checkbox-indicator-icon", children: isIndeterminate ? _jsx(IconSubtractBold, {}) : _jsx(IconCheckBold, {}) }) }));
|
|
13
|
+
}
|
|
14
|
+
CheckboxIndicator.displayName = 'CheckboxIndicator';
|
|
15
|
+
//# sourceMappingURL=checkbox-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-indicator.js","sourceRoot":"","sources":["../../../../../src/components/internal/checkbox-indicator/checkbox-indicator.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK1E,+FAA+F;AAC/F;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACe;IACvB,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,IAAI,CAAC,wBAAwB,EAAE,gBAAgB,CAAC,EAC3D,KAAK,EAAE,YAAY,mBACJ,UAAU,iCAGzB,cAAK,SAAS,EAAC,6BAA6B,YAAE,eAAe,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,GAAO,GAC3G,CACP,CAAC;AACJ,CAAC;AAED,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { CheckboxProps as RACCheckboxProps } from 'react-aria-components';\nimport { IconCheckBold, IconSubtractBold } from '../../../icons/index.js';\nimport type { CommonProps } from '../../types.js';\n\ninterface CheckboxIndicatorProps extends CommonProps, Pick<RACCheckboxProps, 'isSelected' | 'isIndeterminate'> {}\n\n// TODO: refactor so that state is accepted through props/context instead of a parent className\n/**\n * Displays a non-interactive, purely visual checkbox indicator.\n * Requires adding a `cim-checkbox-indicator-wrapper` className to the parent element.\n *\n * @internal\n */\nexport function CheckboxIndicator({\n isSelected,\n isIndeterminate,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n}: CheckboxIndicatorProps) {\n return (\n <div\n {...props}\n className={clsx('cim-checkbox-indicator', UNSAFE_className)}\n style={UNSAFE_style}\n data-selected={isSelected}\n aria-hidden\n >\n <div className=\"cim-checkbox-indicator-icon\">{isIndeterminate ? <IconSubtractBold /> : <IconCheckBold />}</div>\n </div>\n );\n}\n\nCheckboxIndicator.displayName = 'CheckboxIndicator';\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ReactNode, UIEventHandler } from 'react';
|
|
2
|
-
import { type MenuItemProps as RACMenuItemProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
|
|
2
|
+
import { type MenuProps as RACMenuProps, type MenuItemProps as RACMenuItemProps, type MenuSectionProps as RACMenuSectionProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
|
|
3
3
|
import type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';
|
|
4
4
|
export interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {
|
|
5
5
|
/** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */
|
|
@@ -14,7 +14,7 @@ export declare function MenuRoot(props: MenuRootProps): import("react/jsx-runtim
|
|
|
14
14
|
export declare namespace MenuRoot {
|
|
15
15
|
var displayName: string;
|
|
16
16
|
}
|
|
17
|
-
export interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
|
|
17
|
+
export interface MenuProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {
|
|
18
18
|
/**
|
|
19
19
|
* The alignment of the menu overlay relative to its trigger.
|
|
20
20
|
* @default 'start'
|
|
@@ -30,7 +30,7 @@ export declare function Menu<T extends CollectionItem>({ align, ...props }: Menu
|
|
|
30
30
|
export declare namespace Menu {
|
|
31
31
|
var displayName: string;
|
|
32
32
|
}
|
|
33
|
-
export interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
|
|
33
|
+
export interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {
|
|
34
34
|
/** The ID of the section. Has to be unique across all sections and items. */
|
|
35
35
|
id?: Key;
|
|
36
36
|
/** The content to display as the section title. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAIL,KAAK,SAAS,IAAI,YAAY,EAE9B,KAAK,aAAa,IAAI,gBAAgB,EAEtC,KAAK,gBAAgB,IAAI,mBAAmB,EAE5C,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG7G,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,mBAAmB,EAAE,cAAc,GAAG,QAAQ,GAAG,aAAa,CAAC;IACzG,2HAA2H;IAC3H,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAE5C;yBAFe,QAAQ;;;AAMxB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IACzG;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,2CAczF;yBAde,IAAI;;;AAkBpB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzE,SAAQ,eAAe,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,eAAe,CAAC;IAChH,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IAC1G,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA+BhF;yBA/Be,QAAQ"}
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { Collection as RACCollection, Header as RACHeader, Menu as RACMenu, MenuItem as RACMenuItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Text as RACText, } from 'react-aria-components';
|
|
5
|
+
import { IconCheckBold } from '../../icons/index.js';
|
|
5
6
|
import { isProduction } from '../../utils/is-production.js';
|
|
7
|
+
import { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';
|
|
6
8
|
import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
|
|
7
9
|
import { textStyle } from '../typography/utils.js';
|
|
8
10
|
/**
|
|
@@ -33,7 +35,7 @@ MenuSection.displayName = 'MenuSection';
|
|
|
33
35
|
/** Renders a single list item within `Menu`. */
|
|
34
36
|
export function MenuItem({ children, description, icon, ...props }) {
|
|
35
37
|
const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
|
|
36
|
-
return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
|
|
38
|
+
return (_jsx(RACMenuItem, { ...props, className: "cim-menu-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled, isSelected, selectionMode }) => (_jsxs(_Fragment, { children: [selectionMode === 'single' && _jsx(IconCheckBold, { UNSAFE_className: "cim-menu-item-selection-indicator" }), selectionMode === 'multiple' && _jsx(CheckboxIndicator, { isSelected: isSelected }), icon, _jsxs("div", { className: "cim-menu-item-text", children: [_jsx(RACText, { slot: "label", className: textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && (_jsx(RACText, { slot: "description", className: textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
|
|
37
39
|
}
|
|
38
40
|
MenuItem.displayName = 'MenuItem';
|
|
39
41
|
//# sourceMappingURL=menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,UAAU,IAAI,aAAa,EAC3B,MAAM,IAAI,SAAS,EACnB,IAAI,IAAI,OAAO,
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, UIEventHandler } from 'react';\nimport {\n Collection as RACCollection,\n Header as RACHeader,\n Menu as RACMenu,\n type MenuProps as RACMenuProps,\n MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuSection as RACMenuSection,\n type MenuSectionProps as RACMenuSectionProps,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n Text as RACText,\n} from 'react-aria-components';\nimport { IconCheckBold } from '../../icons/index.js';\nimport { isProduction } from '../../utils/is-production.js';\nimport { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type { CollectionItem, CollectionProps, Key, NavigationProps, StringLikeChildren } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuRootProps extends Pick<RACMenuTriggerProps, 'onOpenChange' | 'isOpen' | 'defaultOpen'> {\n /** The menu trigger with its associated menu. Provide the trigger as the first child, and the menu as the second child. */\n children: ReactNode;\n}\n\n/**\n * Encapsulates a menu trigger and its associated menu. The trigger can be any Cimpress UI button, and the menu will be displayed when the trigger is activated.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nexport function MenuRoot(props: MenuRootProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nMenuRoot.displayName = 'MenuRoot';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\n /**\n * The alignment of the menu overlay relative to its trigger.\n * @default 'start'\n */\n align?: 'start' | 'end';\n /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n onAction?: (key: Key) => void;\n /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** Displays a collapsible list of options and actions that users can choose from. */\nexport function Menu<T extends CollectionItem>({ align = 'start', ...props }: MenuProps<T>) {\n if (!isProduction() && props.items != null && typeof props.children !== 'function') {\n console.warn('`Menu` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <CollapsibleList\n placement={`bottom ${align}`}\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <RACMenu {...props} className=\"cim-menu\" />\n </CollapsibleList>\n );\n}\n\nMenu.displayName = 'Menu';\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem>\n extends CollectionProps<T>, Pick<RACMenuSectionProps<T>, 'selectedKeys' | 'onSelectionChange' | 'selectionMode'> {\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 `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n if (!isProduction() && items != null && typeof children !== 'function') {\n console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuSection {...props} className=\"cim-menu-section\">\n <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACMenuSection>\n );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** Additional description for the menu item. */\n description?: string;\n /** An icon representing the menu item. */\n icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACMenuItem {...props} className=\"cim-menu-item cim-checkbox-indicator-wrapper\" textValue={textValue}>\n {({ isDisabled, isSelected, selectionMode }) => (\n <>\n {selectionMode === 'single' && <IconCheckBold UNSAFE_className=\"cim-menu-item-selection-indicator\" />}\n {selectionMode === 'multiple' && <CheckboxIndicator isSelected={isSelected} />}\n\n {icon}\n\n <div className=\"cim-menu-item-text\">\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n\n {description && (\n <RACText\n slot=\"description\"\n className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n >\n {description}\n </RACText>\n )}\n </div>\n </>\n )}\n </RACMenuItem>\n );\n}\n\nMenuItem.displayName = 'MenuItem';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAqB,KAAK,cAAc,EAAkD,MAAM,OAAO,CAAC;AAC/G,OAAO,EAUL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAqB,KAAK,cAAc,EAAkD,MAAM,OAAO,CAAC;AAC/G,OAAO,EAUL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,QAAQ,EACR,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,SACE,WAAW,EACX,yBAAyB,CAAC,uBAAuB,CAAC,EAClD,eAAe,CAAC,CAAC,CAAC,EAClB,QAAQ,CAAC,WAAW,CAAC,EACrB,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,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;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC3C;AAED,8DAA8D;AAC9D,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA8PD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GAjQG,CAAC,SAAS,cAAc,iKAiQwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC;AAEjC,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACvE,mBAAmB,CAAC,CAAC,CAAC,EACtB,YAAY,GAAG,cAAc,GAAG,YAAY,CAC7C;IACC,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,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,2CAiBlG;yBAjBe,YAAY;;;AAqB5B,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"}
|
|
@@ -9,10 +9,11 @@ import { useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
|
9
9
|
import { Button as RACButton, Collection as RACCollection, ComboBox as RACComboBox, Group as RACGroup, Header as RACHeader, Input as RACInput, ListBoxItem as RACListBoxItem, ListBoxSection as RACListBoxSection, Text as RACText, Provider as RACProvider, TextContext as RACTextContext, GroupContext as RACGroupContext, FieldErrorContext as RACFieldErrorContext, } from 'react-aria-components';
|
|
10
10
|
import { forwardRef } from '../../forward-ref.js';
|
|
11
11
|
import { useLocalizedMessages } from '../../i18n/localization-provider.js';
|
|
12
|
-
import {
|
|
12
|
+
import { IconChevronDown } from '../../icons/index.js';
|
|
13
13
|
import { isProduction } from '../../utils/is-production.js';
|
|
14
14
|
import { useProductionWarning } from '../../utils/use-production-warning.js';
|
|
15
15
|
import { withStyleProps } from '../../with-style-props.js';
|
|
16
|
+
import { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.js';
|
|
16
17
|
import { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';
|
|
17
18
|
import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';
|
|
18
19
|
import { textStyle } from '../typography/utils.js';
|
|
@@ -128,7 +129,7 @@ export { _TagField as TagField };
|
|
|
128
129
|
/** Renders a single list item within `TagField`. */
|
|
129
130
|
export function TagFieldItem({ children, ...props }) {
|
|
130
131
|
const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
|
|
131
|
-
return (_jsx(RACListBoxItem, { ...props, className: "cim-tag-field-item cim-checkbox", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(
|
|
132
|
+
return (_jsx(RACListBoxItem, { ...props, className: "cim-tag-field-item cim-checkbox-indicator-wrapper", textValue: textValue, children: ({ isDisabled }) => (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, {}), _jsx(RACText, { slot: "label", className: textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }), children: children })] })) }));
|
|
132
133
|
}
|
|
133
134
|
TagFieldItem.displayName = 'TagFieldItem';
|
|
134
135
|
/** Groups list items within `TagField` into a section. */
|
|
@@ -1 +1 @@
|
|
|
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 { type ForwardedRef, type UIEventHandler, useImperativeHandle, useMemo, useRef, useState } 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 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 ApiProps,\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\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\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<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 /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\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 apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\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 useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\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/immutability\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 inputRef={inputRef}\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.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\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 { type ForwardedRef, type UIEventHandler, useImperativeHandle, useMemo, useRef, useState } 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 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 { 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 { CheckboxIndicator } from '../internal/checkbox-indicator/checkbox-indicator.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 ApiProps,\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\n CommonProps,\n FieldWithPlaceholderProps<TagFieldValidationValue>,\n CollectionProps<T>,\n ApiProps<TagFieldApi>,\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<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 /** Handler that is called when the list of items is scrolled. */\n onScroll?: UIEventHandler<HTMLDivElement>;\n}\n\n/** The imperative API exposed by the `TagField` component. */\nexport interface TagFieldApi {\n /** Focuses the input field and opens the list of items. */\n focus: () => void;\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 apiRef,\n ...props\n }: TagFieldProps<T>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const inputRef = useRef<HTMLInputElement>(null);\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 useImperativeHandle(\n apiRef,\n () => ({\n focus: () => inputRef.current?.focus(),\n }),\n [],\n );\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/immutability\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 inputRef={inputRef}\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.io/components/tag-field).\n */\nconst _TagField = withStyleProps(forwardRef(TagField), 'TagField');\n\nexport { _TagField as TagField };\n\nexport interface TagFieldItemProps<T extends CollectionItem> extends Pick<\n RACListBoxItemProps<T>,\n 'isDisabled' | 'onHoverStart' | 'onHoverEnd'\n> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\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-indicator-wrapper\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n <CheckboxIndicator />\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":"toast-queue.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,
|
|
1
|
+
{"version":3,"file":"toast-queue.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE7E,OAAO,KAAK,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAI9E,eAAO,MAAM,kBAAkB,qCAU7B,CAAC;AAcH;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAC/D;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IAClE;;;OAGG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,qBAAqB,GAAG,MAAM,CAAC;IACnE;;;OAGG;IACH,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;OAEG;IACH,KAAK,IAAI,IAAI,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,mBA2CjC,CAAC"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { UNSTABLE_ToastQueue as RACToastQueue } from 'react-aria-components';
|
|
2
2
|
import { flushSync } from 'react-dom';
|
|
3
|
-
const
|
|
4
|
-
timeout: 5000,
|
|
5
|
-
};
|
|
3
|
+
const MIN_TOAST_TIMEOUT = 5000;
|
|
6
4
|
export const internalToastQueue = new RACToastQueue({
|
|
7
5
|
wrapUpdate(fn) {
|
|
8
6
|
if ('startViewTransition' in document) {
|
|
@@ -15,30 +13,37 @@ export const internalToastQueue = new RACToastQueue({
|
|
|
15
13
|
}
|
|
16
14
|
},
|
|
17
15
|
});
|
|
16
|
+
function addToast(content, options) {
|
|
17
|
+
if (options?.timeout != null && options.timeout > 0 && options?.timeout <= MIN_TOAST_TIMEOUT) {
|
|
18
|
+
console.warn(`[ToastQueue] The specified timeout (${options.timeout} ms) is less than the minimum allowed (${MIN_TOAST_TIMEOUT} ms). It will be adjusted to the minimum.`);
|
|
19
|
+
}
|
|
20
|
+
const timeout = Math.max(options?.timeout ?? MIN_TOAST_TIMEOUT, MIN_TOAST_TIMEOUT);
|
|
21
|
+
return internalToastQueue.add(content, { ...options, timeout });
|
|
22
|
+
}
|
|
18
23
|
export const UNSTABLE_toastQueue = {
|
|
19
24
|
info(message, options) {
|
|
20
|
-
return
|
|
25
|
+
return addToast({
|
|
21
26
|
message: message,
|
|
22
27
|
tone: 'info',
|
|
23
|
-
},
|
|
28
|
+
}, options);
|
|
24
29
|
},
|
|
25
30
|
success(message, options) {
|
|
26
|
-
return
|
|
31
|
+
return addToast({
|
|
27
32
|
message: message,
|
|
28
33
|
tone: 'success',
|
|
29
|
-
},
|
|
34
|
+
}, options);
|
|
30
35
|
},
|
|
31
36
|
warning(message, options) {
|
|
32
|
-
return
|
|
37
|
+
return addToast({
|
|
33
38
|
message: message,
|
|
34
39
|
tone: 'warning',
|
|
35
|
-
},
|
|
40
|
+
}, options);
|
|
36
41
|
},
|
|
37
42
|
critical(message, options) {
|
|
38
|
-
return
|
|
43
|
+
return addToast({
|
|
39
44
|
message: message,
|
|
40
45
|
tone: 'critical',
|
|
41
|
-
},
|
|
46
|
+
}, options);
|
|
42
47
|
},
|
|
43
48
|
close(id) {
|
|
44
49
|
internalToastQueue.close(id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast-queue.js","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,
|
|
1
|
+
{"version":3,"file":"toast-queue.js","sourceRoot":"","sources":["../../../../src/components/toast/toast-queue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGtC,MAAM,iBAAiB,GAAG,IAAI,CAAC;AAE/B,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,aAAa,CAAuB;IACxE,UAAU,CAAC,EAAE;QACX,IAAI,qBAAqB,IAAI,QAAQ,EAAE,CAAC;YACtC,QAAQ,CAAC,mBAAmB,CAAC,GAAG,EAAE;gBAChC,SAAS,CAAC,EAAE,CAAC,CAAC;YAChB,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,EAAE,EAAE,CAAC;QACP,CAAC;IACH,CAAC;CACF,CAAC,CAAC;AAEH,SAAS,QAAQ,CAAC,OAA6B,EAAE,OAA+B;IAC9E,IAAI,OAAO,EAAE,OAAO,IAAI,IAAI,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,IAAI,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,CAAC;QAC7F,OAAO,CAAC,IAAI,CACV,uCAAuC,OAAO,CAAC,OAAO,0CAA0C,iBAAiB,2CAA2C,CAC7J,CAAC;IACJ,CAAC;IAED,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;IAEnF,OAAO,kBAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;AAClE,CAAC;AAqCD,MAAM,CAAC,MAAM,mBAAmB,GAAwB;IACtD,IAAI,CAAC,OAAe,EAAE,OAA+B;QACnD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,MAAM;SACb,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAA+B;QACtD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,OAAe,EAAE,OAA+B;QACtD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,SAAS;SAChB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,QAAQ,CAAC,OAAe,EAAE,OAA+B;QACvD,OAAO,QAAQ,CACb;YACE,OAAO,EAAE,OAAO;YAChB,IAAI,EAAE,UAAU;SACjB,EACD,OAAO,CACR,CAAC;IACJ,CAAC;IACD,KAAK,CAAC,EAAU;QACd,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,KAAK;QACH,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAC7B,CAAC;CACF,CAAC","sourcesContent":["import { UNSTABLE_ToastQueue as RACToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\nimport type { InternalToastContent, UNSTABLE_ToastOptions } from './types.js';\n\nconst MIN_TOAST_TIMEOUT = 5000;\n\nexport const internalToastQueue = new RACToastQueue<InternalToastContent>({\n wrapUpdate(fn) {\n if ('startViewTransition' in document) {\n document.startViewTransition(() => {\n flushSync(fn);\n });\n } else {\n fn();\n }\n },\n});\n\nfunction addToast(content: InternalToastContent, options?: UNSTABLE_ToastOptions) {\n if (options?.timeout != null && options.timeout > 0 && options?.timeout <= MIN_TOAST_TIMEOUT) {\n console.warn(\n `[ToastQueue] The specified timeout (${options.timeout} ms) is less than the minimum allowed (${MIN_TOAST_TIMEOUT} ms). It will be adjusted to the minimum.`,\n );\n }\n\n const timeout = Math.max(options?.timeout ?? MIN_TOAST_TIMEOUT, MIN_TOAST_TIMEOUT);\n\n return internalToastQueue.add(content, { ...options, timeout });\n}\n\n/**\n * Manages the queue of toasts.\n */\nexport interface UNSTABLE_ToastQueue {\n /**\n * Add an info toast to the queue.\n * @returns The ID of the toast\n */\n info(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a success toast to the queue.\n * @returns The ID of the toast\n */\n success(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a warning toast to the queue.\n * @returns The ID of the toast\n */\n warning(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Add a critical toast to the queue.\n * @returns The ID of the toast\n */\n critical(message: string, options?: UNSTABLE_ToastOptions): string;\n /**\n * Close a toast.\n * @param id The ID of the toast to close\n */\n close(id: string): void;\n /**\n * Clear the queue.\n */\n clear(): void;\n}\n\nexport const UNSTABLE_toastQueue: UNSTABLE_ToastQueue = {\n info(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'info',\n },\n options,\n );\n },\n success(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'success',\n },\n options,\n );\n },\n warning(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'warning',\n },\n options,\n );\n },\n critical(message: string, options?: UNSTABLE_ToastOptions) {\n return addToast(\n {\n message: message,\n tone: 'critical',\n },\n options,\n );\n },\n close(id: string) {\n internalToastQueue.close(id);\n },\n clear() {\n internalToastQueue.clear();\n },\n};\n"]}
|
|
@@ -6,6 +6,7 @@ export interface UNSTABLE_ToastOptions {
|
|
|
6
6
|
/**
|
|
7
7
|
* The timeout to automatically close the toast after, in milliseconds.
|
|
8
8
|
* Setting this to `0` will prevent the toast from automatically closing.
|
|
9
|
+
* The minimum timeout is 5000 milliseconds.
|
|
9
10
|
* @default 5000
|
|
10
11
|
*/
|
|
11
12
|
timeout?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;CACnD;AAED,MAAM,WAAW,qBAAqB;IACpC
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;CACnD;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface InternalToastContent {\n message: string;\n tone: 'info' | 'success' | 'warning' | 'critical';\n}\n\nexport interface UNSTABLE_ToastOptions {\n /**\n * The timeout to automatically close the toast after, in milliseconds.\n * Setting this to `0` will prevent the toast from automatically closing.\n * @default 5000\n */\n timeout?: number;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface InternalToastContent {\n message: string;\n tone: 'info' | 'success' | 'warning' | 'critical';\n}\n\nexport interface UNSTABLE_ToastOptions {\n /**\n * The timeout to automatically close the toast after, in milliseconds.\n * Setting this to `0` will prevent the toast from automatically closing.\n * The minimum timeout is 5000 milliseconds.\n * @default 5000\n */\n timeout?: number;\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { type ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components';
|
|
3
|
+
import { type StackProps } from '../spacing/stack/stack.js';
|
|
3
4
|
import type { CommonProps, FieldProps, Key } from '../types.js';
|
|
4
5
|
export interface ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, FieldProps<Set<Key>>, Pick<RACToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'> {
|
|
5
6
|
/** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */
|
|
@@ -8,6 +9,8 @@ export interface ToggleButtonGroupProps extends Omit<CommonProps, 'id'>, FieldPr
|
|
|
8
9
|
isInvalid?: boolean;
|
|
9
10
|
/** Whether a selection is required before form submission. */
|
|
10
11
|
isRequired?: boolean;
|
|
12
|
+
/** Whether the toggle buttons should wrap to the next line when they don't fit in the available space. */
|
|
13
|
+
wrap?: StackProps['wrap'];
|
|
11
14
|
}
|
|
12
15
|
/**
|
|
13
16
|
* Allows users to toggle multiple options, with single or multiple selection.
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAM/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,sBACf,SACE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EACvB,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EACpB,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;IACrB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CAC3B;AA4HD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,wKAAqE,CAAC;AAE9F,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}
|
|
@@ -14,7 +14,7 @@ import { FormFieldDescription, FormFieldError, FormFieldLabel } from '../interna
|
|
|
14
14
|
import { Stack } from '../spacing/stack/stack.js';
|
|
15
15
|
import { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';
|
|
16
16
|
import { ToggleButtonGroupContext } from './context.js';
|
|
17
|
-
function ToggleButtonGroup({ children, label, description, error: errorMessage, validate, form, name, isInvalid, isRequired, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: consumerDefaultSelectedKeys, onSelectionChange, UNSAFE_className, UNSAFE_style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, ...props }, ref) {
|
|
17
|
+
function ToggleButtonGroup({ children, label, description, error: errorMessage, validate, form, name, isInvalid, isRequired, selectedKeys: consumerSelectedKeys, defaultSelectedKeys: consumerDefaultSelectedKeys, onSelectionChange, wrap, UNSAFE_className, UNSAFE_style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, ...props }, ref) {
|
|
18
18
|
useProductionWarning(() => {
|
|
19
19
|
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
20
20
|
console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');
|
|
@@ -66,7 +66,7 @@ function ToggleButtonGroup({ children, label, description, error: errorMessage,
|
|
|
66
66
|
[RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],
|
|
67
67
|
[RACFieldErrorContext, validationState.displayValidation],
|
|
68
68
|
[ToggleButtonGroupContext, toggleButtonGroupContext],
|
|
69
|
-
], children: [label && (_jsxs(FormFieldLabel, { isRequired: isRequired, children: [label, isRequired && _jsx(VisuallyHidden, { children: labelMessages.format('required') })] })), _jsx(Stack, { gap: 8, direction: "horizontal", wrap:
|
|
69
|
+
], children: [label && (_jsxs(FormFieldLabel, { isRequired: isRequired, children: [label, isRequired && _jsx(VisuallyHidden, { children: labelMessages.format('required') })] })), _jsx(Stack, { gap: 8, direction: "horizontal", wrap: wrap, children: children }), _jsx(FormFieldError, { children: errorMessage }), _jsx(FormFieldDescription, { children: description })] }) }));
|
|
70
70
|
}
|
|
71
71
|
/**
|
|
72
72
|
* Allows users to toggle multiple options, with single or multiple selection.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, type ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { mergeProps, useField } from 'react-aria';\nimport {\n LabelContext as RACLabelContext,\n FieldErrorContext as RACFieldErrorContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n ToggleButtonGroup as RACToggleButtonGroup,\n type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.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 { Stack } from '../spacing/stack/stack.js';\nimport type { CommonProps, FieldProps, Key } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { ToggleButtonGroupContext, type ToggleButtonGroupContextValue } from './context.js';\n\nexport interface ToggleButtonGroupProps\n extends\n Omit<CommonProps, 'id'>,\n FieldProps<Set<Key>>,\n Pick<\n RACToggleButtonGroupProps,\n 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'\n > {\n /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */\n children: ReactNode;\n /** Whether the current selection is invalid. */\n isInvalid?: boolean;\n /** Whether a selection is required before form submission. */\n isRequired?: boolean;\n}\n\nfunction ToggleButtonGroup(\n {\n children,\n label,\n description,\n error: errorMessage,\n validate,\n form,\n name,\n isInvalid,\n isRequired,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: consumerDefaultSelectedKeys,\n onSelectionChange,\n UNSAFE_className,\n UNSAFE_style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n ...props\n }: ToggleButtonGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const labelMessages = useLocalizedMessages('label');\n\n // State\n\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n consumerDefaultSelectedKeys ?? [],\n (newSelectedKeys) => {\n onSelectionChange?.(new Set(newSelectedKeys));\n // `validationState` is technically accessed before its declaration, but there's no way to write this in a different order,\n // and this is a callback anyway so it won't be called immediately\n // eslint-disable-next-line react-hooks/immutability\n validationState.commitValidation();\n },\n );\n\n const selectedSet = useMemo(() => new Set<Key>(selectedKeys), [selectedKeys]);\n\n // Validation\n\n const validationState = useFormValidationState({\n value: selectedSet,\n isInvalid,\n isRequired,\n name,\n validate,\n validationBehavior: 'native',\n });\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({\n 'aria-label': isRequired && ariaLabel != null ? `${ariaLabel} ${labelMessages.format('required')}` : ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n description,\n errorMessage: errorMessage || validationState.displayValidation.validationErrors,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n label,\n labelElementType: 'span',\n validate,\n validationBehavior: 'native',\n });\n\n // Remove props that we don't want from fieldProps\n const { id, ...filteredFieldProps } = fieldProps;\n\n const toggleButtonGroupContext: ToggleButtonGroupContextValue = {\n form,\n name,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n isRequired: isRequired && selectedSet.size === 0,\n validationState,\n };\n\n return (\n <RACToggleButtonGroup\n {...mergeProps(props, filteredFieldProps)}\n ref={ref}\n className={clsx('cim-toggle-button-group', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n >\n <RACProvider\n values={[\n [RACLabelContext, { ...labelProps, elementType: 'span' }],\n [RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],\n [RACFieldErrorContext, validationState.displayValidation],\n [ToggleButtonGroupContext, toggleButtonGroupContext],\n ]}\n >\n {label && (\n <FormFieldLabel isRequired={isRequired}>\n {label}\n {/*\n * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n */}\n {isRequired && <VisuallyHidden>{labelMessages.format('required')}</VisuallyHidden>}\n </FormFieldLabel>\n )}\n <Stack gap={8} direction=\"horizontal\" wrap>\n {children}\n </Stack>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACProvider>\n </RACToggleButtonGroup>\n );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButtonGroup = withStyleProps(forwardRef(ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _ToggleButtonGroup as ToggleButtonGroup };\n"]}
|
|
1
|
+
{"version":3,"file":"toggle-button-group.js","sourceRoot":"","sources":["../../../../src/components/toggle-button/toggle-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useFormValidationState } from '@react-stately/form';\nimport { useControlledState } from '@react-stately/utils';\nimport clsx from 'clsx';\nimport { useMemo, type ReactNode } from 'react';\nimport type { ForwardedRef } from 'react';\nimport { mergeProps, useField } from 'react-aria';\nimport {\n LabelContext as RACLabelContext,\n FieldErrorContext as RACFieldErrorContext,\n Provider as RACProvider,\n TextContext as RACTextContext,\n ToggleButtonGroup as RACToggleButtonGroup,\n type ToggleButtonGroupProps as RACToggleButtonGroupProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useLocalizedMessages } from '../../i18n/index.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 { Stack, type StackProps } from '../spacing/stack/stack.js';\nimport type { CommonProps, FieldProps, Key } from '../types.js';\nimport { UNSTABLE_VisuallyHidden as VisuallyHidden } from '../visually-hidden/visually-hidden.js';\nimport { ToggleButtonGroupContext, type ToggleButtonGroupContextValue } from './context.js';\n\nexport interface ToggleButtonGroupProps\n extends\n Omit<CommonProps, 'id'>,\n FieldProps<Set<Key>>,\n Pick<\n RACToggleButtonGroupProps,\n 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'selectionMode' | 'isDisabled'\n > {\n /** Toggle buttons belonging to the group. Each button must have a `value` prop defined. */\n children: ReactNode;\n /** Whether the current selection is invalid. */\n isInvalid?: boolean;\n /** Whether a selection is required before form submission. */\n isRequired?: boolean;\n /** Whether the toggle buttons should wrap to the next line when they don't fit in the available space. */\n wrap?: StackProps['wrap'];\n}\n\nfunction ToggleButtonGroup(\n {\n children,\n label,\n description,\n error: errorMessage,\n validate,\n form,\n name,\n isInvalid,\n isRequired,\n selectedKeys: consumerSelectedKeys,\n defaultSelectedKeys: consumerDefaultSelectedKeys,\n onSelectionChange,\n wrap,\n UNSAFE_className,\n UNSAFE_style,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n ...props\n }: ToggleButtonGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n useProductionWarning(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('ToggleButtonGroup requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const labelMessages = useLocalizedMessages('label');\n\n // State\n\n const [selectedKeys, setSelectedKeys] = useControlledState(\n consumerSelectedKeys,\n consumerDefaultSelectedKeys ?? [],\n (newSelectedKeys) => {\n onSelectionChange?.(new Set(newSelectedKeys));\n // `validationState` is technically accessed before its declaration, but there's no way to write this in a different order,\n // and this is a callback anyway so it won't be called immediately\n // eslint-disable-next-line react-hooks/immutability\n validationState.commitValidation();\n },\n );\n\n const selectedSet = useMemo(() => new Set<Key>(selectedKeys), [selectedKeys]);\n\n // Validation\n\n const validationState = useFormValidationState({\n value: selectedSet,\n isInvalid,\n isRequired,\n name,\n validate,\n validationBehavior: 'native',\n });\n\n const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({\n 'aria-label': isRequired && ariaLabel != null ? `${ariaLabel} ${labelMessages.format('required')}` : ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-details': ariaDetails,\n description,\n errorMessage: errorMessage || validationState.displayValidation.validationErrors,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n label,\n labelElementType: 'span',\n validate,\n validationBehavior: 'native',\n });\n\n // Remove props that we don't want from fieldProps\n const { id, ...filteredFieldProps } = fieldProps;\n\n const toggleButtonGroupContext: ToggleButtonGroupContextValue = {\n form,\n name,\n isInvalid: isInvalid || validationState.displayValidation.isInvalid,\n isRequired: isRequired && selectedSet.size === 0,\n validationState,\n };\n\n return (\n <RACToggleButtonGroup\n {...mergeProps(props, filteredFieldProps)}\n ref={ref}\n className={clsx('cim-toggle-button-group', UNSAFE_className)}\n style={UNSAFE_style}\n selectedKeys={selectedKeys}\n onSelectionChange={setSelectedKeys}\n >\n <RACProvider\n values={[\n [RACLabelContext, { ...labelProps, elementType: 'span' }],\n [RACTextContext, { slots: { description: descriptionProps, errorMessage: errorMessageProps } }],\n [RACFieldErrorContext, validationState.displayValidation],\n [ToggleButtonGroupContext, toggleButtonGroupContext],\n ]}\n >\n {label && (\n <FormFieldLabel isRequired={isRequired}>\n {label}\n {/*\n * Button elements don't support `aria-required`, so we need to add visually hidden text to indicate that the field is required.\n * See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required#examples:~:text=Note%3A%20If%20the%20field%27s%20label%20already%20contains%20the%20word%20%22required%22%2C%20it%20is%20recommended%20to%20leave%20out%20the%20aria%2Drequired%20attribute.%20This%20avoids%20that%20screen%20readers%20read%20out%20the%20term%20%22required%22%20twice.\n */}\n {isRequired && <VisuallyHidden>{labelMessages.format('required')}</VisuallyHidden>}\n </FormFieldLabel>\n )}\n <Stack gap={8} direction=\"horizontal\" wrap={wrap}>\n {children}\n </Stack>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACProvider>\n </RACToggleButtonGroup>\n );\n}\n\n/**\n * Allows users to toggle multiple options, with single or multiple selection.\n *\n * See [toggle button usage guidelines](https://ui.cimpress.io/components/toggle-button/).\n */\nconst _ToggleButtonGroup = withStyleProps(forwardRef(ToggleButtonGroup), 'ToggleButtonGroup');\n\nexport { _ToggleButtonGroup as ToggleButtonGroup };\n"]}
|