@telus-uds/components-base 1.60.0 → 1.62.0

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 12 Sep 2023 15:31:31 GMT and should not be manually modified.
+This log was last generated on Fri, 15 Sep 2023 20:56:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.62.0
+
+Fri, 15 Sep 2023 20:56:52 GMT
+
+### Minor changes
+
+- TextInputBase component changed to match with design intention for the IconButton (35577399+JoshHC@users.noreply.github.com)
+- `Tooltip`: Add `onPress` callback function to be triggered when tooltip button is clicked (shahzaibkhalidmalik@outlook.com)
+
+## 1.61.0
+
+Tue, 12 Sep 2023 23:39:14 GMT
+
+### Minor changes
+
+- autocomplete from web to multi-platform (srikanthkhari@gmail.com)
+
 ## 1.60.0
 
-Tue, 12 Sep 2023 15:31:31 GMT
+Tue, 12 Sep 2023 15:37:54 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -799,7 +799,9 @@
         "iconSize": "size",
         "iconScale": "iconScale",
         "iconTranslateX": "size",
-        "iconTranslateY": "size"
+        "iconTranslateY": "size",
+        "height": "size",
+        "width": "size"
       },
       "Link": {
         "color": "color",
@@ -3972,6 +3974,166 @@
         }
       }
     },
+    "Autocomplete": {
+      "docs": {
+        "description": "",
+        "props": {
+          "copy": {
+            "defaultValue": {
+              "value": "'en'",
+              "computed": false
+            },
+            "type": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "enum",
+                  "value": [
+                    {
+                      "value": "'en'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'fr'",
+                      "computed": false
+                    }
+                  ]
+                },
+                {
+                  "name": "custom",
+                  "raw": "dictionaryContentShape"
+                }
+              ]
+            },
+            "required": false,
+            "description": "Copy language identifier"
+          },
+          "fullWidth": {
+            "defaultValue": {
+              "value": "true",
+              "computed": false
+            },
+            "required": false
+          },
+          "isLoading": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Set to true in order to display the loading indicator instead of results"
+          },
+          "maxSuggestions": {
+            "defaultValue": {
+              "value": "5",
+              "computed": false
+            },
+            "type": {
+              "name": "number"
+            },
+            "required": false,
+            "description": "Maximum number of suggestions provided at the same time"
+          },
+          "minToSuggestion": {
+            "defaultValue": {
+              "value": "1",
+              "computed": false
+            },
+            "type": {
+              "name": "number"
+            },
+            "required": false,
+            "description": "Minimum number of characters typed for a list of suggestions to appear"
+          },
+          "helpText": {
+            "defaultValue": {
+              "value": "''",
+              "computed": false
+            },
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Help text to display when the input is focused and empty"
+          },
+          "children": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Can be used to provide a function that renders a custom input:\n<Autocomplete items={items} value={currentValue}>\n  {({ inputId, inputRef, onChange, onKeyPress, readOnly, tokens, value }) => (\n    <Search\n      nativeID={inputId}\n      ref={inputRef}\n      onChange={onChange}\n      onKeyPress={onKeyPress}\n      readOnly={readOnly}\n      tokens={tokens}\n      value={value}\n    />\n  )}\n</Autocomplete>"
+          },
+          "items": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": {
+                  "id": {
+                    "name": "string",
+                    "required": false
+                  },
+                  "label": {
+                    "name": "string",
+                    "required": false
+                  }
+                }
+              }
+            },
+            "required": false,
+            "description": "List of items to display as suggestions"
+          },
+          "loadingLabel": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Label to display alongside the spinner when in a loading state"
+          },
+          "noResults": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "Text or JSX to render when no results are available"
+          },
+          "onChange": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Handler function to be called when the input value changes"
+          },
+          "onClear": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Handler function to be called when the clear button (appears if the handler is passed) is pressed"
+          },
+          "onSelect": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Callback function to be called when an item is selected from the list"
+          },
+          "value": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Input value for controlled usage"
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "BaseProvider": {
       "docs": {
         "description": "",
@@ -6367,7 +6529,9 @@
                 "iconSize": "size",
                 "iconScale": "iconScale",
                 "iconTranslateX": "size",
-                "iconTranslateY": "size"
+                "iconTranslateY": "size",
+                "height": "size",
+                "width": "size"
               }
             },
             "required": false,
@@ -7142,6 +7306,127 @@
         }
       }
     },
+    "Listbox": {
+      "docs": {
+        "description": "",
+        "props": {
+          "items": {
+            "defaultValue": {
+              "value": "[]",
+              "computed": false
+            },
+            "type": {
+              "name": "array"
+            },
+            "required": false,
+            "description": "`Listbox` items"
+          },
+          "firstItemRef": {
+            "defaultValue": {
+              "value": "null",
+              "computed": false
+            },
+            "type": {
+              "name": "object"
+            },
+            "required": false,
+            "description": "Focus will be moved to the item with this ref once within the menu."
+          },
+          "parentRef": {
+            "defaultValue": {
+              "value": "null",
+              "computed": false
+            },
+            "type": {
+              "name": "object"
+            },
+            "required": false,
+            "description": "Focus will be returned to the dropdown control with this ref after leaving\nthe last menu item."
+          },
+          "LinkRouter": {
+            "type": {
+              "name": "elementType"
+            },
+            "required": false,
+            "description": ""
+          },
+          "linkRouterProps": {
+            "type": {
+              "name": "object"
+            },
+            "required": false,
+            "description": ""
+          },
+          "selectedId": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "To select an item by default"
+          },
+          "onClose": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "onClose event"
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "groupBorderRadius": "radius",
+                "groupBorderWidth": "border",
+                "groupFontSize": "size",
+                "groupFontName": "fontName",
+                "groupFontWeight": "fontWeight",
+                "groupColor": "color",
+                "groupBorderColor": "color",
+                "groupBackgroundColor": "color",
+                "groupPaddingTop": "size",
+                "groupPaddingBottom": "size",
+                "groupPaddingLeft": "size",
+                "groupPaddingRight": "size",
+                "groupIcon": "icon",
+                "itemDisplay": "show",
+                "itemFontName": "fontName",
+                "itemFontWeight": "fontWeight",
+                "itemFontSize": "size",
+                "itemPaddingTop": "size",
+                "itemPaddingBottom": "size",
+                "itemPaddingLeft": "size",
+                "itemPaddingRight": "size",
+                "itemColor": "color",
+                "itemBackgroundColor": "color",
+                "itemBorderLeftColor": "color",
+                "itemBorderLeftWidth": "border",
+                "itemBorderWidth": "border",
+                "itemTextDecoration": "textLine",
+                "itemOutline": "border",
+                "shadow": "shadow",
+                "itemBorderRightColor": "color",
+                "itemBorderBottomColor": "color",
+                "itemBorderTopColor": "color",
+                "itemBorderRightWidth": "border",
+                "itemBorderBottomWidth": "border",
+                "itemBorderTopWidth": "border",
+                "itemBorderRadius": "radius",
+                "minWidth": "size",
+                "minHeight": "size",
+                "itemHeight": "size",
+                "groupHeight": "size",
+                "lineHeight": "lineHeight"
+              }
+            },
+            "required": false,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Modal": {
       "docs": {
         "description": "A modal window is a secondary window that opens on top of the main one.\nUsers have to interact with it before they can carry out their task and return to the main window.\nUse to reveal additional information to a user after they have performed an explicit interaction.\nThey are a strongly discouraged pattern; it's preferred to have all relevant information within a page,\nand irrelevant information either linked externally or omitted.\n\n- Must only appear after a customer interaction, not on page load or any other circumstance\n- Open a modal based on explicit customer action e.g. clicking on a button/link/form field\n- Only one modal should be \"current\" at any time\n- Read [WebAIM's documentation](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) to create accessible modals\n- Don’t use modals to reinforce or repeat information already available in the parent page or view\n- Don’t use modals consecutively",
@@ -9437,28 +9722,6 @@
         "docs": {
           "description": "`SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.\n\n This component can only be accessed as a name-spaced component: `SideNav.Item`.",
           "props": {
-            "isActive": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "type": {
-                "name": "bool"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function."
-            },
-            "isExpanded": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "type": {
-                "name": "bool"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent."
-            },
             "accessibilityRole": {
               "defaultValue": {
                 "value": "'link'",
@@ -9468,7 +9731,7 @@
                 "name": "string"
               },
               "required": false,
-              "description": "Accesibility Role"
+              "description": ""
             },
             "children": {
               "type": {
@@ -9477,20 +9740,6 @@
               "required": true,
               "description": "Text content of the `Item`."
             },
-            "itemId": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function - used to keep track of active item."
-            },
-            "groupId": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function - used to keep track of expanded items groups."
-            },
             "onPress": {
               "type": {
                 "name": "func"
@@ -9544,6 +9793,13 @@
               "required": false,
               "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
             },
+            "testID": {
+              "type": {
+                "name": "number"
+              },
+              "required": false,
+              "description": ""
+            },
             "tokens": {
               "type": {
                 "name": "custom",
@@ -9591,13 +9847,6 @@
               },
               "required": false,
               "description": ""
-            },
-            "testID": {
-              "type": {
-                "name": "number"
-              },
-              "required": false,
-              "description": "test ID"
             }
           },
           "attributes": {
@@ -11010,6 +11259,17 @@
             "required": false,
             "description": "Select English or French copy for the accessible label."
           },
+          "onPress": {
+            "defaultValue": {
+              "value": "() => {}",
+              "computed": false
+            },
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Callback function triggered when the tooltip is pressed."
+          },
           "inline": {
             "defaultValue": {
               "value": "false",
@@ -13363,76 +13623,6 @@
         }
       }
     },
-    "PressableItem": {
-      "docs": {
-        "description": "",
-        "props": {
-          "isChild": {
-            "defaultValue": {
-              "value": "false",
-              "computed": false
-            },
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": ""
-          },
-          "tabIndex": {
-            "defaultValue": {
-              "value": "0",
-              "computed": false
-            },
-            "required": false
-          },
-          "href": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "children": {
-            "type": {
-              "name": "node"
-            },
-            "required": true,
-            "description": ""
-          },
-          "onBlur": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "nextItemRef": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          },
-          "prevItemRef": {
-            "type": {
-              "name": "object"
-            },
-            "required": false,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": false
-        }
-      }
-    },
     "CheckboxGroup": {
       "docs": {
         "description": "A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.\n\n## Component API\n\nUse the `items` prop to pass an array of objects describing each Checkbox in the group:\n\n - `label`: main text passed to CheckboxGroup's `label` prop\n - `id`: identifier used to store which CheckboxGroup is selected (uses `label` if undefinded)\n - `onChange`: optional function called on selection, in addition to updating the group's selection state\n\n### Controlled version\n\nIf the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.\n\n### Uncontrolled version\n\nIf the CheckboxGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.\nWhenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).\n\n### Use in forms\n\nFor web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.\n\n### Validation\n\nValidation state may be set by passing 'error' or 'success' to the `validation` prop.\n\n## A11y guidelines\n\nCheckboxGroup accepts all the common accessibility props, and controls the accessibility state\nof children like Checkbox and Feedback based on current state.\n\n@example\n```jsx\n<CheckboxGroup\n  initialCheckedIds=\"check1\"\n  items={[\n    { label: 'Checkbox 1', id: 'check1' },\n    { label: 'Checkbox 2', id: 'check2' },\n    { label: 'Checkbox 3', id: 'check3' }\n  ]}\n  legend=\"Checkboxes\"\n  hint=\"Choose from these options\"\n/>\n```",