@telus-uds/components-base 1.3.1 → 1.6.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@telus-uds/components-base:build: cache hit, replaying output 4c5b413de9c92c19
-@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
-@telus-uds/components-base:build: $ yarn build:main && yarn build:module
-@telus-uds/components-base:build: $ babel src -d lib
-@telus-uds/components-base:build: Successfully compiled 215 files with Babel (14990ms).
-@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
-@telus-uds/components-base:build: Successfully compiled 215 files with Babel (11089ms).
-@telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js
+@telus-uds/components-base:build: cache hit, replaying output d1359cc1069914c5
+@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
+@telus-uds/components-base:build: $ yarn build:main && yarn build:module
+@telus-uds/components-base:build: $ babel src -d lib
+@telus-uds/components-base:build: Successfully compiled 217 files with Babel (8026ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 217 files with Babel (5098ms).
+@telus-uds/components-base:build: $ babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js

package/.turbo/turbo-lint.log

@@ -0,0 +1,13 @@
+@telus-uds/components-base:lint: cache hit, replaying output 946abc71241dcfa6
+@telus-uds/components-base:lint: $ yarn --cwd ../.. lint:path --color packages/components-base
+@telus-uds/components-base:lint: $ eslint --ignore-path .gitignore --ext .js,.jsx,.mjs,.cjs --color packages/components-base
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: /home/runner/work/universal-design-system/universal-design-system/packages/components-base/__tests__/FlexGrid/Col.test.jsx
+@telus-uds/components-base:lint:    51:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   106:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   155:63  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   200:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   248:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: ✖ 5 problems (0 errors, 5 warnings)
+@telus-uds/components-base:lint: 

package/CHANGELOG.json

@@ -2,7 +2,148 @@
   "name": "@telus-uds/components-base",
   "entries": [
     {
-      "date": "Wed, 30 Mar 2022 09:49:08 GMT",
+      "date": "Thu, 28 Apr 2022 15:40:15 GMT",
+      "tag": "@telus-uds/components-base_v1.6.0",
+      "version": "1.6.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Add `pattern` prop for `TextInput` (web)"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "feat: add unique ids validation to the group components"
+          },
+          {
+            "author": "eugene@michasiw.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "use IconButton for modal close"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Add flex prop to FlexGrid.Col"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "feat: add handler props whitelisting to the input components"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.5.0",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5"
+          }
+        ],
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "V-align Checkbox/Radio with label first line"
+          },
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix ExpandCollapse unable to response to window resize"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "fix: move link underline to the inline pressable becoming the anchor tag on web"
+          },
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix scenario where `reverse` props might not work when elements wrap"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix input label text wrap"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "fix Select validation icons"
+          }
+        ],
+        "none": [
+          {
+            "author": "simon.lawrence@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "update babel plugin used for docs generation to maintained fork"
+          },
+          {
+            "author": "cody.zuschlag@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "improve linting"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 07 Apr 2022 20:33:56 GMT",
+      "tag": "@telus-uds/components-base_v1.5.0",
+      "version": "1.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "63472330f9144ba99c34c7524dcc2d2f4f716e69",
+            "comment": "extend HorizontalScrollButton via IconButton"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.4.0",
+            "commit": "63472330f9144ba99c34c7524dcc2d2f4f716e69"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 01 Apr 2022 14:15:21 GMT",
+      "tag": "@telus-uds/components-base_v1.4.0",
+      "version": "1.4.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "simon.lawrence@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "05e43b4642997ec461094b5d8a439bfef1abaab8",
+            "comment": "Refactor children wrapping in the notifications"
+          }
+        ],
+        "minor": [
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.3.0",
+            "commit": "05e43b4642997ec461094b5d8a439bfef1abaab8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 30 Mar 2022 09:49:18 GMT",
       "tag": "@telus-uds/components-base_v1.3.1",
       "version": "1.3.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,55 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 30 Mar 2022 09:49:08 GMT and should not be manually modified.
+This log was last generated on Thu, 28 Apr 2022 15:40:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.6.0
+
+Thu, 28 Apr 2022 15:40:15 GMT
+
+### Minor changes
+
+- Add `pattern` prop for `TextInput` (web) (shahzaibkhalidmalik@outlook.com)
+- feat: add unique ids validation to the group components (ruslan.bredikhin@nearform.com)
+- use IconButton for modal close (eugene@michasiw.com)
+- Add flex prop to FlexGrid.Col (alan.slater@nearform.com)
+- feat: add handler props whitelisting to the input components (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v1.5.0
+
+### Patches
+
+- V-align Checkbox/Radio with label first line (alan.slater@nearform.com)
+- Fix ExpandCollapse unable to response to window resize (shahzaibkhalidmalik@outlook.com)
+- fix: move link underline to the inline pressable becoming the anchor tag on web (ruslan.bredikhin@nearform.com)
+- Fix scenario where `reverse` props might not work when elements wrap (shahzaibkhalidmalik@outlook.com)
+- Fix input label text wrap (alan.slater@nearform.com)
+- fix Select validation icons (alan.slater@nearform.com)
+
+## 1.5.0
+
+Thu, 07 Apr 2022 20:33:56 GMT
+
+### Minor changes
+
+- extend HorizontalScrollButton via IconButton (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v1.4.0
+
+## 1.4.0
+
+Fri, 01 Apr 2022 14:15:21 GMT
+
+### Minor changes
+
+- Bump @telus-uds/system-theme-tokens to v1.3.0
+
+### Patches
+
+- Refactor children wrapping in the notifications (simon.lawrence@nearform.com)
+
 ## 1.3.1
 
-Wed, 30 Mar 2022 09:49:08 GMT
+Wed, 30 Mar 2022 09:49:18 GMT
 
 ### Patches
 
@@ -14,6 +57,12 @@ Wed, 30 Mar 2022 09:49:08 GMT
 - Bump @telus-uds/system-constants to v1.0.2
 - Bump @telus-uds/system-theme-tokens to v1.2.2
 - Bump @telus-uds/browserslist-config to v1.0.1
+- Export viewport context
+- Unify system props handling
+- Reduced motion support for ActivityIndicator component
+- Include FootnoteLink in list of wrappable children
+- Add a module build target
+- Add SSR util functions
 
 ## [1.3.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.2.0...@telus-uds/components-base/v1.3.0) (2022-03-21)
 

package/__tests__/FlexGrid/Row.test.jsx

@@ -151,48 +151,123 @@ describe('FlexGrid Row', () => {
 
   it('applies correct row order for each reverse prop at viewport "xs"', () => {
     const { getByText } = renderEachReverseProp('xs')
-    expect(getByText('xs--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xs--smReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--mdReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('xs--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xs--smReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "sm"', () => {
     const { getByText } = renderEachReverseProp('sm')
-    expect(getByText('sm--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('sm--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('sm--mdReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('sm--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('sm--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('sm--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('sm--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('sm--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('sm--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('sm--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "md"', () => {
     const { getByText } = renderEachReverseProp('md')
-    expect(getByText('md--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('md--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('md--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('md--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "lg"', () => {
     const { getByText } = renderEachReverseProp('lg')
 
-    expect(getByText('lg--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--lgReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('lg--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "xl"', () => {
     const { getByText } = renderEachReverseProp('xl')
 
-    expect(getByText('xl--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--lgReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--xlReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
+    expect(getByText('xl--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
   })
 })

package/__tests__/utils/containUniqueFields.test.js

@@ -0,0 +1,25 @@
+import { containUniqueFields } from '../../src'
+
+const unique = [
+  { a: 1, b: 'B' },
+  { a: 2, b: 'A' }
+]
+
+const notUnique = [
+  { a: 1, b: 'B' },
+  { a: 1, b: 'A' }
+]
+
+describe('containUniqueFields util', () => {
+  it('returns true if no specified fields have duplicates', () => {
+    expect(containUniqueFields(unique, ['a', 'b'])).toBe(true)
+  })
+
+  it('returns false if specified fields have duplicates', () => {
+    expect(containUniqueFields(notUnique, ['a'])).toBe(false)
+  })
+
+  it('returns false if fields have duplicates, but not the specified ones', () => {
+    expect(containUniqueFields(notUnique, ['b'])).toBe(true)
+  })
+})

package/component-docs.json

@@ -110,7 +110,8 @@
         "rightIcon": "icon",
         "iconDisplace": "size",
         "iconSize": "size",
-        "iconSpace": "integer"
+        "iconSpace": "integer",
+        "textLine": "textLine"
       },
       "CheckboxGroup": {
         "space": "integer",
@@ -171,14 +172,20 @@
         "iconGap": "size"
       },
       "HorizontalScrollButton": {
-        "borderRadius": "radius",
         "backgroundColor": "color",
+        "borderRadius": "radius",
         "borderColor": "color",
         "borderWidth": "border",
-        "padding": "size",
-        "shadow": "shadow",
+        "iconColor": "color",
         "iconSize": "size",
-        "iconColor": "color"
+        "iconScale": "iconScale",
+        "iconTranslateX": "size",
+        "iconTranslateY": "size",
+        "outerBorderWidth": "border",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "padding": "size",
+        "shadow": "shadow"
       },
       "Icon": {
         "size": "size",
@@ -276,7 +283,8 @@
         "paddingBottom": "size",
         "closeIcon": "icon",
         "closeIconColor": "color",
-        "closeIconSize": "size"
+        "closeIconSize": "size",
+        "closePadding": "size"
       },
       "Notification": {
         "backgroundColor": "color",
@@ -3886,6 +3894,13 @@
               },
               "required": false,
               "description": "Align content horizontally within the column.\n\nAccepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure."
+            },
+            "flex": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "(web only) Stretches the column to fill vertical space using `display: flex`.\nIn native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s)."
             }
           },
           "attributes": {
@@ -4750,7 +4765,8 @@
                 "paddingBottom": "size",
                 "closeIcon": "icon",
                 "closeIconColor": "color",
-                "closeIconSize": "size"
+                "closeIconSize": "size",
+                "closePadding": "size"
               }
             },
             "required": false,
@@ -4776,6 +4792,13 @@
             },
             "required": false,
             "description": ""
+          },
+          "closeButton": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "Pass a react node to override the default close button or pass `null` to hide the close button."
           }
         },
         "attributes": {
@@ -6968,14 +6991,20 @@
             "type": {
               "name": "custom",
               "raw": {
-                "borderRadius": "radius",
                 "backgroundColor": "color",
+                "borderRadius": "radius",
                 "borderColor": "color",
                 "borderWidth": "border",
-                "padding": "size",
-                "shadow": "shadow",
+                "iconColor": "color",
                 "iconSize": "size",
-                "iconColor": "color"
+                "iconScale": "iconScale",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "outerBorderWidth": "border",
+                "outerBorderColor": "color",
+                "outerBorderGap": "size",
+                "padding": "size",
+                "shadow": "shadow"
               }
             },
             "required": false,
@@ -8277,14 +8306,20 @@
             "type": {
               "name": "custom",
               "raw": {
-                "borderRadius": "radius",
                 "backgroundColor": "color",
+                "borderRadius": "radius",
                 "borderColor": "color",
                 "borderWidth": "border",
-                "padding": "size",
-                "shadow": "shadow",
+                "iconColor": "color",
                 "iconSize": "size",
-                "iconColor": "color"
+                "iconScale": "iconScale",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "outerBorderWidth": "border",
+                "outerBorderColor": "color",
+                "outerBorderGap": "size",
+                "padding": "size",
+                "shadow": "shadow"
               }
             },
             "required": false,

package/lib/Button/ButtonBase.js

@@ -31,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.linkProps, _utils2.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.focusHandlerProps, _utils2.linkProps, _utils2.viewProps]);
 
 const getOuterBorderOffset = ({
   outerBorderGap = 0,