@gcforms/tag-input 0.0.0 → 1.0.2

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.2] - 2025-06-23
+
+### Changed
+
+- Update Yarn to version 4.9.2
+
+## [1.0.1] - 2025-06-12
+
+### Added
+
+- Add allowSpacesInTags prop. When false, enable space to close tags.
+
+### Fixed
+
+- Improved styling on tag input element
+
 ## [1.0.0] - 2025-05-14
 
 ### Added

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@gcforms/tag-input",
-  "version": "0.0.0",
+  "version": "1.0.2",
   "author": "Canadian Digital Service",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "yarn@4.6.0",
+  "packageManager": "yarn@4.9.2",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"

package/src/TagInput.tsx

@@ -26,6 +26,7 @@ export const TagInput = ({
   placeholder,
   description,
   restrictDuplicates = true,
+  allowSpacesInTags = true,
   maxTags,
   onTagAdd,
   onTagRemove,
@@ -39,6 +40,7 @@ export const TagInput = ({
   placeholder?: string;
   description?: string;
   restrictDuplicates?: boolean;
+  allowSpacesInTags?: boolean;
   maxTags?: number;
   onTagAdd?: (tag: string) => void;
   onTagRemove?: (tag: string) => void;
@@ -136,7 +138,12 @@ export const TagInput = ({
     resetMessages();
 
     const { key } = event;
-    const acceptKeys = [keys.ENTER, keys.TAB, keys.COMMA];
+    const acceptKeys = [
+      keys.ENTER,
+      keys.TAB,
+      keys.COMMA,
+      ...(allowSpacesInTags ? [] : [keys.SPACE]),
+    ];
     const navigateKeys = [keys.ARROW_LEFT, keys.ARROW_RIGHT];
 
     // Clear selection when entering text input
@@ -213,7 +220,7 @@ export const TagInput = ({
         {label}
       </label>
       {description && <p className="gc-tag-input-description">{description}</p>}
-      <span id="input-instructions" aria-live="polite" className="visually-hidden">
+      <span id="input-instructions" className="gc-visually-hidden">
         {t("inputLabel", { tags: selectedTags.length.toString() })}
       </span>
       <div className="gc-tag-input">
@@ -224,7 +231,7 @@ export const TagInput = ({
             className={`gc-tag ${selectedTagIndex === index ? "gc-selected-tag" : ""}`}
           >
             <div>{tag}</div>
-            <button type="button" onClick={() => handleRemoveTag(index)}>
+            <button type="button" onClick={() => handleRemoveTag(index)} aria-label={t("delete")}>
               <CancelIcon />
             </button>
           </div>

package/src/i18n/en.json

@@ -4,6 +4,7 @@
   "announceTagAdded": "Tag \"{tag}\" added",
   "announceTagRemoved": "Tag \"{tag}\" removed",
   "announceTagSelected": "Tag \"{tag}\" selected",
+  "delete": "Delete",
   "duplicateTag": "Tag already added",
   "inputLabel": "{tags} tags. Use Enter, Tab, or a comma to create a tag. Use left and right arrow keys to navigate tags. Use Backspace or Delete to remove a tag.",
   "maxTagsReached": "Maximum number of tags reached ({max})"

package/src/i18n/fr.json

@@ -4,6 +4,7 @@
   "announceTagAdded": "Balise \"{tag}\" ajoutée",
   "announceTagRemoved": "Balise \"{tag}\" supprimée",
   "announceTagSelected": "Tag \"{tag}\" sélectionnée",
+  "delete": "Supprimer",
   "duplicateTag": "La balise a déjà été ajoutée",
   "inputLabel": "Balises {tags}. Utilisez Entrée, la touche Tab ou une virgule pour créer une balise. Utilisez les touches fléchées gauche et droite pour naviguer dans les balises. Utilisez le retour en arrière ou Supprimer  pour enlever une balise.",
   "maxTagsReached": "Le nombre maximal de balises a été atteint ({max})"

package/src/styles.css

@@ -55,7 +55,9 @@
   }
 
   input {
-    display: inline-block;
+    display: flex;
+    flex: 1 1 0%;
+    min-width: 120px;
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
     padding-left: 0.5rem;