@cratis/components 4.9.0 → 4.10.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type HTMLAttributes, type InputHTMLAttributes } from 'react';
|
|
1
|
+
import { type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
/** Attributes a consumer may hand to one {@link TagGroup} part: class, style, title and data attributes. */
|
|
3
3
|
export type TagGroupPartAttributes = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'title'> & {
|
|
4
4
|
[dataAttribute: `data-${string}`]: string | number | boolean | undefined;
|
|
@@ -50,6 +50,12 @@ export interface TagGroupProps {
|
|
|
50
50
|
id?: string;
|
|
51
51
|
/** Accessible label for a tag's remove button. Receives the tag's value. */
|
|
52
52
|
removeLabel?: (value: string) => string;
|
|
53
|
+
/**
|
|
54
|
+
* Glyph inside a tag's remove button. Defaults to a multiplication sign; pass your icon set's
|
|
55
|
+
* close icon to match the rest of the product. The button, its accessible name and its keyboard
|
|
56
|
+
* behaviour are unaffected.
|
|
57
|
+
*/
|
|
58
|
+
removeIcon?: ReactNode;
|
|
53
59
|
/** Extra class name for the root element. */
|
|
54
60
|
className?: string;
|
|
55
61
|
/** Cratis-owned per-part attributes. */
|
|
@@ -64,5 +70,5 @@ export interface TagGroupProps {
|
|
|
64
70
|
* separator commit the typed value, Backspace on an empty entry removes the last tag, and a pasted
|
|
65
71
|
* string is split on the separators.
|
|
66
72
|
*/
|
|
67
|
-
export declare const TagGroup: ({ value, onChange, editable, placeholder, separators, allowDuplicates, disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, invalid, id, removeLabel, className, pt, }: TagGroupProps) => import("react").JSX.Element;
|
|
73
|
+
export declare const TagGroup: ({ value, onChange, editable, placeholder, separators, allowDuplicates, disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, invalid, id, removeLabel, removeIcon, className, pt, }: TagGroupProps) => import("react").JSX.Element;
|
|
68
74
|
//# sourceMappingURL=TagGroup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../Common/TagGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,cAAc,EACnB,KAAK,mBAAmB,
|
|
1
|
+
{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../Common/TagGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGH,KAAK,cAAc,EACnB,KAAK,mBAAmB,EAExB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAUf,4GAA4G;AAC5G,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACrC,cAAc,CAAC,WAAW,CAAC,EAC3B,WAAW,GAAG,OAAO,GAAG,OAAO,CAClC,GAAG;IACA,CAAC,aAAa,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CAC5E,CAAC;AAEF,gEAAgE;AAChE,MAAM,WAAW,aAAa;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,oBAAoB;IACpB,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,eAAe;IACf,GAAG,CAAC,EAAE,sBAAsB,CAAC;IAC7B,6BAA6B;IAC7B,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,wCAAwC;IACxC,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CACjD;AAKD,kCAAkC;AAClC,MAAM,WAAW,aAAa;IAC1B,wCAAwC;IACxC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,iFAAiF;IACjF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yFAAyF;IACzF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0FAA0F;IAC1F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,EAAE,CAAC,EAAE,aAAa,CAAC;CACtB;AAKD;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,6OAiBlB,aAAa,gCAkHf,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { TagGroup as TagGroup$1, TagList, Tag } from 'react-aria-components/TagG
|
|
|
4
4
|
import { Button } from 'react-aria-components/Button';
|
|
5
5
|
|
|
6
6
|
const classNames = (...values) => values.filter(Boolean).join(' ');
|
|
7
|
-
const TagGroup = ({ value, onChange, editable = true, placeholder, separators = [','], allowDuplicates = false, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, invalid = false, id, removeLabel, className, pt, }) => {
|
|
7
|
+
const TagGroup = ({ value, onChange, editable = true, placeholder, separators = [','], allowDuplicates = false, disabled = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, invalid = false, id, removeLabel, removeIcon = '×', className, pt, }) => {
|
|
8
8
|
const generatedId = useId();
|
|
9
9
|
const inputId = id ?? `cratis-tag-group-${generatedId}`;
|
|
10
10
|
const [draft, setDraft] = useState('');
|
|
@@ -26,7 +26,7 @@ const TagGroup = ({ value, onChange, editable = true, placeholder, separators =
|
|
|
26
26
|
const splitOn = (text) => separators.length === 0
|
|
27
27
|
? [text]
|
|
28
28
|
: text.split(new RegExp(`[${separators.map(escapeForClass).join('')}]`));
|
|
29
|
-
return (jsxs("div", { ...pt?.root, className: classNames('cratis-tag-group', pt?.root?.className, className), "data-cratis-part": 'root', "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, children: [jsx(TagGroup$1, { selectionMode: 'none', onRemove: remove, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: jsx(TagList, { ...pt?.list, items: value.map((entry) => ({ id: entry })), className: classNames('cratis-tag-group__list', pt?.list?.className), "data-cratis-part": 'list', children: (item) => (jsxs(Tag, { ...pt?.tag, id: item.id, textValue: item.id, className: classNames('cratis-tag-group__tag', pt?.tag?.className), "data-cratis-part": 'tag', "data-disabled": disabled || undefined, children: [jsx("span", { className: 'cratis-tag-group__tag-label', children: item.id }), !disabled && (jsx(Button, { ...pt?.remove, slot: 'remove', "aria-label": removeLabel?.(item.id), className: classNames('cratis-tag-group__remove', pt?.remove?.className), "data-cratis-part": 'remove', children: jsx("span", { "aria-hidden": 'true', children:
|
|
29
|
+
return (jsxs("div", { ...pt?.root, className: classNames('cratis-tag-group', pt?.root?.className, className), "data-cratis-part": 'root', "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, children: [jsx(TagGroup$1, { selectionMode: 'none', onRemove: remove, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: jsx(TagList, { ...pt?.list, items: value.map((entry) => ({ id: entry })), className: classNames('cratis-tag-group__list', pt?.list?.className), "data-cratis-part": 'list', children: (item) => (jsxs(Tag, { ...pt?.tag, id: item.id, textValue: item.id, className: classNames('cratis-tag-group__tag', pt?.tag?.className), "data-cratis-part": 'tag', "data-disabled": disabled || undefined, children: [jsx("span", { className: 'cratis-tag-group__tag-label', children: item.id }), !disabled && (jsx(Button, { ...pt?.remove, slot: 'remove', "aria-label": removeLabel?.(item.id), className: classNames('cratis-tag-group__remove', pt?.remove?.className), "data-cratis-part": 'remove', children: jsx("span", { "aria-hidden": 'true', children: removeIcon }) }))] })) }) }), editable && (jsx("input", { ...pt?.input, id: inputId, type: 'text', value: draft, disabled: disabled, placeholder: placeholder, "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": invalid || undefined, className: classNames('cratis-tag-group__input', pt?.input?.className), "data-cratis-part": 'input', "data-invalid": invalid || undefined, onChange: (event) => setDraft(event.currentTarget.value), onKeyDown: (event) => {
|
|
30
30
|
if (event.key === 'Enter' || separators.includes(event.key)) {
|
|
31
31
|
event.preventDefault();
|
|
32
32
|
add([draft]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagGroup.js","sources":["../../../Common/TagGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaTagGroup","AriaTagList","AriaTag","AriaButton"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"TagGroup.js","sources":["../../../Common/TagGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaTagGroup","AriaTagList","AriaTag","AriaButton"],"mappings":"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"}
|
package/package.json
CHANGED