@telus-uds/components-base 1.59.2 → 1.61.0

package/component-docs.json

@@ -172,7 +172,8 @@
       "WaffleGrid": {
         "rowBorderWidth": "border",
         "itemBorderColor": "color",
-        "itemPadding": "size"
+        "itemPadding": "size",
+        "rowSize": "integer"
       },
       "QuantitySelector": {
         "inputBorderColor": "color",
@@ -3971,6 +3972,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": "",
@@ -6372,6 +6533,13 @@
             "required": false,
             "description": ""
           },
+          "testID": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "A unique identifier for testing purposes.\nWill be added as a `data-testid` attribute."
+          },
           "icon": {
             "type": {
               "name": "elementType"
@@ -7134,6 +7302,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",
@@ -9429,12 +9718,38 @@
         "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'",
                 "computed": false
               },
-              "required": false
+              "type": {
+                "name": "string"
+              },
+              "required": false,
+              "description": "Accesibility Role"
             },
             "children": {
               "type": {
@@ -9443,6 +9758,20 @@
               "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"
@@ -9543,6 +9872,13 @@
               },
               "required": false,
               "description": ""
+            },
+            "testID": {
+              "type": {
+                "name": "number"
+              },
+              "required": false,
+              "description": "test ID"
             }
           },
           "attributes": {
@@ -10489,7 +10825,11 @@
               "value": "Platform.select({ web: 'group', default: 'none' })",
               "computed": true
             },
-            "required": false
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "AccesibilityRole for the Tags"
           },
           "tokens": {
             "type": {
@@ -10951,6 +11291,17 @@
             "required": false,
             "description": "Select English or French copy for the accessible label."
           },
+          "inline": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Display tooltip icon button as an inline element."
+          },
           "children": {
             "type": {
               "name": "union",
@@ -12223,6 +12574,13 @@
             },
             "required": false,
             "description": ""
+          },
+          "dataSet": {
+            "type": {
+              "name": "object"
+            },
+            "required": false,
+            "description": ""
           }
         },
         "attributes": {
@@ -13286,76 +13644,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```",
@@ -13848,10 +14136,126 @@
             },
             "required": false,
             "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "exact",
+              "value": {
+                "size": {
+                  "name": "enum",
+                  "value": [
+                    {
+                      "value": "'large'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'small'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'micro'",
+                      "computed": false
+                    }
+                  ],
+                  "required": false
+                },
+                "alternative": {
+                  "name": "bool",
+                  "required": false
+                },
+                "inverse": {
+                  "name": "bool",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "onPress": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": ""
+          },
+          "onPressIn": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": ""
+          },
+          "onPressOut": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": ""
+          },
+          "disabled": {
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": ""
+          },
+          "href": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": ""
+          },
+          "hrefAttrs": {
+            "type": {
+              "name": "shape",
+              "value": {
+                "download": {
+                  "name": "string",
+                  "required": false
+                },
+                "rel": {
+                  "name": "string",
+                  "required": false
+                },
+                "target": {
+                  "name": "enum",
+                  "value": [
+                    {
+                      "value": "'_self'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_blank'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_parent'",
+                      "computed": false
+                    },
+                    {
+                      "value": "'_top'",
+                      "computed": false
+                    }
+                  ],
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": ""
           }
         },
         "attributes": {
-          "acceptsRNA11yProps": false
+          "acceptsRNA11yProps": true
         }
       }
     },
@@ -13975,6 +14379,20 @@
             },
             "required": false
           },
+          "href": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "href for the Link"
+          },
+          "accessibilityrole": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "AccesibilityRole for the link base"
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -13994,7 +14412,7 @@
               }
             },
             "required": false,
-            "description": ""
+            "description": "Children nodes that can be added"
           },
           "icon": {
             "type": {
@@ -14057,13 +14475,45 @@
               "value": "'button'",
               "computed": false
             },
-            "required": false
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Accesibility role for TextButton"
           },
           "onPress": {
             "type": {
               "name": "func"
             },
             "required": true,
+            "description": "onPress function"
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": "Children node that can be added"
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
             "description": ""
           }
         },