diff --git a/README.md b/README.md index ef00ad3..a28bfbc 100644 --- a/README.md +++ b/README.md @@ -287,6 +287,9 @@ type TagInputProps = { // Use a popover to display tags instead of inline. usePopoverForTags?: boolean; // default: false + + // A callback function that generates an id for a newly created tag. + generateTagId?: () => string; // default: crypto.getRandomValues(new Uint32Array(1))[0].toString }; ``` diff --git a/packages/emblor/README.md b/packages/emblor/README.md index ff142d5..4f913a9 100644 --- a/packages/emblor/README.md +++ b/packages/emblor/README.md @@ -240,6 +240,9 @@ type TagInputProps = { // Use a popover to display tags instead of inline. usePopoverForTags?: boolean; // default: false + + // A callback function to generate an id for a newly created tag + generateTagId?: () => string; // default: utils/uuid }; ``` diff --git a/packages/emblor/src/tag/tag-input.tsx b/packages/emblor/src/tag/tag-input.tsx index 6ac3230..a1ea669 100644 --- a/packages/emblor/src/tag/tag-input.tsx +++ b/packages/emblor/src/tag/tag-input.tsx @@ -93,6 +93,7 @@ export interface TagInputProps extends OmittedInputProps, VariantProps string; } const TagInput = React.forwardRef((props, ref) => { @@ -146,6 +147,7 @@ const TagInput = React.forwardRef((props, ref) disabled = false, usePortal = false, addOnPaste = false, + generateTagId = uuid, } = props; const [inputValue, setInputValue] = React.useState(''); @@ -191,7 +193,7 @@ const TagInput = React.forwardRef((props, ref) return; } - const newTagId = uuid(); + const newTagId = generateTagId(); // Add tag if duplicates are allowed or tag does not already exist if (allowDuplicates || !tags.some((tag) => tag.text === newTagText)) { @@ -241,7 +243,7 @@ const TagInput = React.forwardRef((props, ref) (allowDuplicates || !tags.some((tag) => tag.text === newTagText)) && (maxTags === undefined || tags.length < maxTags) ) { - const newTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString(); + const newTagId = generateTagId(); setTags([...tags, { id: newTagId, text: newTagText }]); onTagAdd?.(newTagText); setTagCount((prevTagCount) => prevTagCount + 1); @@ -280,7 +282,7 @@ const TagInput = React.forwardRef((props, ref) return; } - const newTagId = uuid(); + const newTagId = generateTagId(); if ( newTagText && diff --git a/website/components/tag/tag-input.tsx b/website/components/tag/tag-input.tsx index 3a83b09..e5095f9 100644 --- a/website/components/tag/tag-input.tsx +++ b/website/components/tag/tag-input.tsx @@ -60,6 +60,7 @@ export interface TagInputProps extends OmittedInputProps, VariantProps void; inputProps?: React.InputHTMLAttributes; restrictTagsToAutocompleteOptions?: boolean; + generateTagId?: () => string; } const TagInput = React.forwardRef((props, ref) => { @@ -106,6 +107,7 @@ const TagInput = React.forwardRef((props, ref) usePopoverForTags = false, inputProps = {}, restrictTagsToAutocompleteOptions, + generateTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString, } = props; const [inputValue, setInputValue] = React.useState(''); @@ -168,7 +170,7 @@ const TagInput = React.forwardRef((props, ref) return; } - const newTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString(); + const newTagId = generateTagId(); if ( newTagText && diff --git a/website/content/docs/api-reference.mdx b/website/content/docs/api-reference.mdx index b962e9a..753c96a 100644 --- a/website/content/docs/api-reference.mdx +++ b/website/content/docs/api-reference.mdx @@ -508,6 +508,13 @@ return ( Customizes the rendering of tags. No + + generateTagId + null + Function + Generates an id for a newly created tag. + No + import {custom} from "zod" diff --git a/website/legacy/content/snippets/tag-input.mdx b/website/legacy/content/snippets/tag-input.mdx index 5446f48..ed4ef4d 100644 --- a/website/legacy/content/snippets/tag-input.mdx +++ b/website/legacy/content/snippets/tag-input.mdx @@ -66,6 +66,7 @@ export interface TagInputProps extends OmittedInputProps, VariantProps void; inputProps?: React.InputHTMLAttributes; restrictTagsToAutocompleteOptions?: boolean; + generateTagId?: () => string; } const TagInput = React.forwardRef((props, ref) => { @@ -112,6 +113,7 @@ const TagInput = React.forwardRef((props, ref) usePopoverForTags = false, inputProps = {}, restrictTagsToAutocompleteOptions, + generateTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString; } = props; const [inputValue, setInputValue] = React.useState(''); @@ -174,7 +176,7 @@ const TagInput = React.forwardRef((props, ref) return; } - const newTagId = crypto.getRandomValues(new Uint32Array(1))[0].toString(); + const newTagId = generateTagId(); if ( newTagText &&