@govtechsg/sgds-web-component 3.29.0 → 3.29.1-rc.0

package/custom-elements.json

@@ -5352,6 +5352,10 @@
             {
               "description": "default slot to pass in sgds-combo-box-option",
               "name": "default"
+            },
+            {
+              "description": "Custom content for the \"Create\" option shown when `creatable` is true and no match is found. Use `sgds-input` event to dynamically update the slotted content with the current input value.",
+              "name": "create"
             }
           ],
           "members": [
@@ -5434,6 +5438,17 @@
               "attribute": "emptyMenuAsync",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "creatable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, shows a \"Create xxx\" option when the typed value does not match any existing option. Selecting it emits the `sgds-create-option` event.",
+              "attribute": "creatable",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "scrollBottomOffset",
@@ -5738,6 +5753,107 @@
               "description": "Used `repeat` helper from Lit to render instead of .map:\nThe reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.\n\nTo compare this to lit-html's default handling for lists, consider reversing a large list of names:\nFor a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values\nFor a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.",
               "type": {}
             },
+            {
+              "kind": "field",
+              "name": "_createOptionSlotContent",
+              "type": {
+                "text": "Element[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "Slotted elements from the `create-option` named slot."
+            },
+            {
+              "kind": "field",
+              "name": "_createOptionValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\"",
+              "description": "The typed value captured when the create option was last synced."
+            },
+            {
+              "kind": "field",
+              "name": "_showCreateOption",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the shadow-DOM create-option container is visible."
+            },
+            {
+              "kind": "method",
+              "name": "_syncCreateOption",
+              "privacy": "private",
+              "description": "Updates visibility of the create-option container based on creatable + filter state.",
+              "type": {}
+            },
+            {
+              "kind": "method",
+              "name": "_handleCreateOptionSlotChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles slotchange for the create-option named slot.",
+              "type": {}
+            },
+            {
+              "kind": "method",
+              "name": "_handleCreateOptionClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "evt",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Click handler for the create-option container. Lets interactive slotted elements (links, buttons) pass through.",
+              "type": {}
+            },
+            {
+              "kind": "method",
+              "name": "_handleCreateOptionKeydown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "evt",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "description": "Keydown handler for the create-option container.",
+              "type": {}
+            },
+            {
+              "kind": "method",
+              "name": "_handleKeyboardMenuItemsEvent",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "type": {},
+              "description": "Override base keyboard handler to include create-option in ArrowDown/Tab navigation.",
+              "inheritedFrom": {
+                "name": "DropdownListElement",
+                "module": "src/base/dropdown-list-element.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "_renderFeedbackMenu",
@@ -6280,28 +6396,10 @@
                 "module": "src/base/dropdown-list-element.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "_handleKeyboardMenuItemsEvent",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "type": {},
-              "inheritedFrom": {
-                "name": "DropdownListElement",
-                "module": "src/base/dropdown-list-element.ts"
-              }
-            },
             {
               "kind": "method",
               "name": "_getMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -6316,7 +6414,7 @@
             {
               "kind": "method",
               "name": "_getActiveMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -6331,7 +6429,7 @@
             {
               "kind": "method",
               "name": "_setMenuItem",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "currentItemIdx",
@@ -6621,6 +6719,12 @@
               "name": "sgds-scroll-end",
               "reactName": "onSgdsScrollEnd"
             },
+            {
+              "description": "Emitted when the user selects the \"Create xxx\" option. `event.detail = { value }`",
+              "name": "sgds-create-option",
+              "detailType": "ISgdsComboBoxCreateOptionEventDetail",
+              "reactName": "onSgdsCreateOption"
+            },
             {
               "description": "Emitted event when show instance is called",
               "name": "sgds-show",
@@ -6713,6 +6817,15 @@
               "description": "When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only.",
               "fieldName": "emptyMenuAsync"
             },
+            {
+              "name": "creatable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, shows a \"Create xxx\" option when the typed value does not match any existing option. Selecting it emits the `sgds-create-option` event.",
+              "fieldName": "creatable"
+            },
             {
               "name": "scrollBottomOffset",
               "type": {
@@ -6977,6 +7090,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "ISgdsComboBoxCreateOptionEventDetail",
+          "declaration": {
+            "name": "ISgdsComboBoxCreateOptionEventDetail",
+            "module": "src/components/ComboBox/sgds-combo-box.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ISgdsComboBoxInputEventDetail",
@@ -10636,7 +10757,7 @@
             {
               "kind": "method",
               "name": "_getMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -10651,7 +10772,7 @@
             {
               "kind": "method",
               "name": "_getActiveMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -10666,7 +10787,7 @@
             {
               "kind": "method",
               "name": "_setMenuItem",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "currentItemIdx",
@@ -20491,7 +20612,7 @@
             {
               "kind": "method",
               "name": "_getMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -20506,7 +20627,7 @@
             {
               "kind": "method",
               "name": "_getActiveMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -20521,7 +20642,7 @@
             {
               "kind": "method",
               "name": "_setMenuItem",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "currentItemIdx",
@@ -29332,7 +29453,7 @@
             {
               "kind": "method",
               "name": "_getMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -29343,7 +29464,7 @@
             {
               "kind": "method",
               "name": "_getActiveMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -29354,7 +29475,7 @@
             {
               "kind": "method",
               "name": "_setMenuItem",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "currentItemIdx",
@@ -31321,7 +31442,7 @@
             {
               "kind": "method",
               "name": "_getMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -31336,7 +31457,7 @@
             {
               "kind": "method",
               "name": "_getActiveMenuItems",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "SgdsDropdownItem[]"
@@ -31351,7 +31472,7 @@
             {
               "kind": "method",
               "name": "_setMenuItem",
-              "privacy": "private",
+              "privacy": "protected",
               "parameters": [
                 {
                   "name": "currentItemIdx",
@@ -31864,7 +31985,7 @@
   "package": {
     "name": "@govtechsg/sgds-web-component",
     "description": "",
-    "version": "3.29.0",
+    "version": "3.29.1-rc.0",
     "author": "GovTechSG",
     "license": "MIT"
   }