@kaizen/components 1.66.1 → 1.67.1

package/codemods/utils/updateKaioImports.spec.ts

@@ -0,0 +1,223 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { updateKaioImports, UpdateKaioImportsArgs } from "./updateKaioImports"
+import { printAst } from "."
+
+const transformInput =
+  (sourceFile: ts.SourceFile) =>
+  (imports: UpdateKaioImportsArgs): string => {
+    const result = ts.transform(sourceFile, [updateKaioImports(imports)])
+    const transformedSource = result.transformed[0] as ts.SourceFile
+    return printAst(transformedSource)
+  }
+
+describe("updateKaioImports()", () => {
+  describe("remove imports", () => {
+    it("removes listed named imports", () => {
+      const inputAst = parseJsx(`
+        import { Card, Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("removes listed named aliased imports", () => {
+      const inputAst = parseJsx(`
+        import { Card as KzCard, Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("removes import statement when all named imports are removed", () => {
+      const inputAst = parseJsx(`
+        import { Card } from "@kaizen/components"
+        import { Select } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does nothing if the import does not exist", () => {
+      const inputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+  })
+
+  describe("add imports", () => {
+    it("creates a new import declaration for new imports", () => {
+      const inputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+        import { Card } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Card", { componentName: "Card" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("creates a new import declaration for new aliased imports", () => {
+      const inputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+        import { Card as KzCard } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Card", { componentName: "Card", alias: "KzCard" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not add a new named import if it already exists", () => {
+      const inputAst = parseJsx(`
+        import { Icon } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Icon } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Icon", { componentName: "Icon" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("updates existing import declaration with new imports", () => {
+      const inputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Select, Card } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Card", { componentName: "Card" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    describe("insert position", () => {
+      it("inserts the new import below @kaizen/components", () => {
+        const inputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        const outputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components"
+          import { Card } from "@kaizen/components/future"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        expect(
+          transformInput(inputAst)({
+            importsToAdd: new Map([
+              [
+                "@kaizen/components/future",
+                new Map([["Card", { componentName: "Card" }]]),
+              ],
+            ]),
+          })
+        ).toEqual(printAst(outputAst))
+      })
+
+      it("inserts the new import below the first subpath of @kaizen/components", () => {
+        const inputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components/v1"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        const outputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components/v1"
+          import { Card } from "@kaizen/components/future"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        expect(
+          transformInput(inputAst)({
+            importsToAdd: new Map([
+              [
+                "@kaizen/components/future",
+                new Map([["Card", { componentName: "Card" }]]),
+              ],
+            ]),
+          })
+        ).toEqual(printAst(outputAst))
+      })
+
+      it("inserts at the top of the file if no pre-existing import of @kaizen/components", () => {
+        const inputAst = parseJsx(`
+          import React from "react"
+        `)
+        const outputAst = parseJsx(`
+          import { Card } from "@kaizen/components/future"
+          import React from "react"
+        `)
+        expect(
+          transformInput(inputAst)({
+            importsToAdd: new Map([
+              [
+                "@kaizen/components/future",
+                new Map([["Card", { componentName: "Card" }]]),
+              ],
+            ]),
+          })
+        ).toEqual(printAst(outputAst))
+      })
+    })
+  })
+})

package/codemods/utils/updateKaioImports.ts

@@ -0,0 +1,233 @@
+import ts from "typescript"
+
+type ImportsToRemove = Set<string>
+
+const removeNamedImports = (
+  factory: ts.NodeFactory,
+  node: ts.ImportDeclaration,
+  importsToRemove: ImportsToRemove
+): ts.ImportDeclaration | null => {
+  const namedBindings = node.importClause?.namedBindings
+  if (namedBindings && ts.isNamedImports(namedBindings)) {
+    const namedImports = namedBindings.elements.filter(importSpecifier => {
+      const componentName =
+        importSpecifier.propertyName?.getText() ??
+        importSpecifier.name.getText()
+      return !importsToRemove.has(componentName)
+    })
+
+    if (namedImports.length === 0) return null
+
+    return factory.updateImportDeclaration(
+      node,
+      node.modifiers,
+      factory.updateImportClause(
+        node.importClause,
+        node.importClause.isTypeOnly,
+        node.importClause.name,
+        factory.updateNamedImports(namedBindings, namedImports)
+      ),
+      node.moduleSpecifier,
+      node.attributes
+    )
+  }
+
+  return node
+}
+
+type NewImportAttributes = { componentName: string; alias?: string }
+type ImportsToAdd = Map<string, NewImportAttributes>
+
+const createImportDeclaration = (
+  factory: ts.NodeFactory,
+  importsToAdd: ImportsToAdd,
+  moduleSpecifier: string
+): ts.ImportDeclaration => {
+  const namedImports = Array.from(importsToAdd.values()).map(
+    ({ componentName, alias }) =>
+      factory.createImportSpecifier(
+        false,
+        alias ? factory.createIdentifier(componentName) : undefined,
+        factory.createIdentifier(alias ?? componentName)
+      )
+  )
+
+  return factory.createImportDeclaration(
+    undefined,
+    factory.createImportClause(
+      false,
+      undefined,
+      factory.createNamedImports(namedImports)
+    ),
+    factory.createStringLiteral(moduleSpecifier)
+  )
+}
+
+const updateNamedImports = (
+  factory: ts.NodeFactory,
+  node: ts.ImportDeclaration,
+  importsToAdd: ImportsToAdd
+): ts.ImportDeclaration => {
+  if (!node.importClause) return node
+
+  const existingNamedImportNames = new Set<string>()
+  const importSpecifiers: ts.ImportSpecifier[] = []
+
+  const namedBindings = node.importClause.namedBindings
+  if (namedBindings && ts.isNamedImports(namedBindings)) {
+    namedBindings.elements.forEach(importSpecifier => {
+      existingNamedImportNames.add(importSpecifier.name.getText())
+      importSpecifiers.push(importSpecifier)
+    })
+  }
+
+  Array.from(importsToAdd.values()).forEach(({ alias, componentName }) => {
+    const newImport = factory.createImportSpecifier(
+      false,
+      alias ? factory.createIdentifier(componentName) : undefined,
+      factory.createIdentifier(alias ?? componentName)
+    )
+
+    if (!existingNamedImportNames.has(componentName)) {
+      importSpecifiers.push(newImport)
+    }
+  })
+
+  return factory.updateImportDeclaration(
+    node,
+    node.modifiers,
+    factory.updateImportClause(
+      node.importClause,
+      node.importClause.isTypeOnly,
+      node.importClause.name,
+      factory.createNamedImports(importSpecifiers)
+    ),
+    node.moduleSpecifier,
+    node.attributes
+  )
+}
+
+// Key is module specifier (eg. "@kaizen/components")
+type ImportsToRemoveMap = Map<string, ImportsToRemove>
+// Key is module specifier (eg. "@kaizen/components")
+type ImportsToAddMap = Map<string, ImportsToAdd>
+
+export type UpdateKaioImportsArgs = {
+  importsToRemove?: ImportsToRemoveMap
+  importsToAdd?: ImportsToAddMap
+}
+
+export const updateKaioImports =
+  ({ importsToRemove, importsToAdd }: UpdateKaioImportsArgs) =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    if (!ts.isSourceFile(rootNode)) return rootNode
+
+    if (!importsToRemove && !importsToAdd) return rootNode
+
+    const { factory } = context
+
+    const statements = Array.from(rootNode.statements)
+
+    if (importsToRemove) {
+      Array.from(importsToRemove.keys()).forEach(moduleSpecifier => {
+        const importIndex = statements.findIndex(
+          s =>
+            ts.isImportDeclaration(s) &&
+            (s.moduleSpecifier as ts.StringLiteral).text === moduleSpecifier
+        )
+
+        if (importIndex === -1) return
+
+        const importDeclaration = statements[
+          importIndex
+        ] as ts.ImportDeclaration
+
+        const updatedImportDeclaration = removeNamedImports(
+          factory,
+          importDeclaration,
+          importsToRemove.get(moduleSpecifier)!
+        )
+
+        if (updatedImportDeclaration === null) {
+          // Remove import statement as there are no more imports
+          statements.splice(importIndex, 1)
+          return
+        }
+
+        // Update import statement
+        statements[importIndex] = updatedImportDeclaration
+      })
+    }
+
+    if (importsToAdd) {
+      Array.from(importsToAdd.keys()).forEach(newModuleSpecifier => {
+        const importIndex = statements.findIndex(
+          s =>
+            ts.isImportDeclaration(s) &&
+            (s.moduleSpecifier as ts.StringLiteral).text === newModuleSpecifier
+        )
+
+        if (importIndex === -1) {
+          const fallbackKaioImportIdx = statements.findIndex(
+            s =>
+              ts.isImportDeclaration(s) &&
+              (s.moduleSpecifier as ts.StringLiteral).text.includes(
+                "@kaizen/components"
+              )
+          )
+
+          const newImport = createImportDeclaration(
+            factory,
+            importsToAdd.get(newModuleSpecifier)!,
+            newModuleSpecifier
+          )
+          statements.splice(fallbackKaioImportIdx + 1, 0, newImport)
+          return
+        }
+
+        const importDeclaration = statements[
+          importIndex
+        ] as ts.ImportDeclaration
+
+        const updatedImportDeclaration = updateNamedImports(
+          factory,
+          importDeclaration,
+          importsToAdd.get(newModuleSpecifier)!
+        )
+
+        // Update import statement
+        statements[importIndex] = updatedImportDeclaration
+      })
+    }
+
+    return factory.updateSourceFile(rootNode, statements)
+  }
+
+/* Transformer helpers to generate `importsToRemove` and `importsToAdd` for `updateKaioImports` */
+export const setImportToRemove = (
+  map: ImportsToRemoveMap,
+  moduleSpecifier: string,
+  componentName: string
+): void => {
+  if (!map.has(moduleSpecifier)) {
+    map.set(moduleSpecifier, new Set([componentName]))
+  }
+  map.get(moduleSpecifier)?.add(componentName)
+}
+
+export const setImportToAdd = (
+  map: ImportsToAddMap,
+  moduleSpecifier: string,
+  importAttributes: NewImportAttributes
+): void => {
+  if (!map.has(moduleSpecifier)) {
+    map.set(
+      moduleSpecifier,
+      new Map([[importAttributes.componentName, importAttributes]])
+    )
+  }
+  map
+    .get(moduleSpecifier)
+    ?.set(importAttributes.componentName, importAttributes)
+}

package/dist/cjs/Avatar/Avatar.cjs

@@ -4,8 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
 var reactTextfit = require('react-textfit');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var UserIcon = require('../Icon/UserIcon.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var Avatar_module = require('./Avatar.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -28,17 +27,21 @@ var getMaxFontSizePixels = function (size) {
   if (size === "xlarge" || size === "xxlarge") return 34;
   return 22;
 };
-var fallbackIcon = function (alt) {
+var FallbackIcon = function (_a) {
+  var alt = _a.alt;
   if (alt) {
-    return React__default.default.createElement(UserIcon.UserIcon, {
-      inheritSize: true,
-      role: "img",
-      "aria-label": alt
+    return React__default.default.createElement(Icon.Icon, {
+      name: "person",
+      alt: alt,
+      isFilled: true,
+      className: Avatar_module.fallbackIcon
     });
   }
-  return React__default.default.createElement(UserIcon.UserIcon, {
-    inheritSize: true,
-    role: "presentation"
+  return React__default.default.createElement(Icon.Icon, {
+    name: "person",
+    isPresentational: true,
+    isFilled: true,
+    className: Avatar_module.fallbackIcon
   });
 };
 var renderInitials = function (fullName, alt, size, disableInitials) {
@@ -51,9 +54,9 @@ var renderInitials = function (fullName, alt, size, disableInitials) {
   var initials = getInitials(fullName);
   var isLongName = initials.length > 2 && size !== "small";
   var renderFallback = disableInitials || initials === "";
-  return renderFallback ? React__default.default.createElement("span", {
-    className: Avatar_module.fallbackIcon
-  }, fallbackIcon(alt)) : React__default.default.createElement("abbr", {
+  return renderFallback ? React__default.default.createElement(FallbackIcon, {
+    alt: alt
+  }) : React__default.default.createElement("abbr", {
     className: classnames__default.default(Avatar_module.initials, isLongName && Avatar_module.longName),
     title: alt
   }, isLongName ?

package/dist/cjs/Calendar/CalendarRange/CalendarRange.cjs

@@ -4,9 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var locale = require('date-fns/locale');
 var reactDayPicker = require('react-day-picker');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowBackwardIcon = require('../../Icon/ArrowBackwardIcon.cjs');
-var ArrowForwardIcon = require('../../Icon/ArrowForwardIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var baseCalendarClassNames = require('../baseCalendarClassNames.cjs');
 require('date-fns');
 var isInvalidDate = require('../utils/isInvalidDate.cjs');
@@ -55,13 +53,17 @@ var CalendarRange = function (_a) {
     classNames: classNames,
     components: {
       IconRight: function () {
-        return React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
-          role: "presentation"
+        return React__default.default.createElement(Icon.Icon, {
+          name: "arrow_forward",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         });
       },
       IconLeft: function () {
-        return React__default.default.createElement(ArrowBackwardIcon.ArrowBackwardIcon, {
-          role: "presentation"
+        return React__default.default.createElement(Icon.Icon, {
+          name: "arrow_back",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         });
       }
     },

package/dist/cjs/Calendar/CalendarSingle/CalendarSingle.cjs

@@ -4,9 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var locale = require('date-fns/locale');
 var reactDayPicker = require('react-day-picker');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowBackwardIcon = require('../../Icon/ArrowBackwardIcon.cjs');
-var ArrowForwardIcon = require('../../Icon/ArrowForwardIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var baseCalendarClassNames = require('../baseCalendarClassNames.cjs');
 require('date-fns');
 var isInvalidDate = require('../utils/isInvalidDate.cjs');
@@ -52,13 +50,17 @@ var CalendarSingle = function (_a) {
     classNames: classNames,
     components: {
       IconRight: function () {
-        return React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
-          role: "presentation"
+        return React__default.default.createElement(Icon.Icon, {
+          name: "arrow_forward",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         });
       },
       IconLeft: function () {
-        return React__default.default.createElement(ArrowBackwardIcon.ArrowBackwardIcon, {
-          role: "presentation"
+        return React__default.default.createElement(Icon.Icon, {
+          name: "arrow_back",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         });
       }
     },

package/dist/cjs/Calendar/LegacyCalendarRange/LegacyCalendarRange.cjs

@@ -3,9 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var reactDayPicker = require('react-day-picker');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ArrowBackwardIcon = require('../../Icon/ArrowBackwardIcon.cjs');
-var ArrowForwardIcon = require('../../Icon/ArrowForwardIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var baseCalendarClassNames = require('../baseCalendarClassNames.cjs');
 var enums = require('../enums.cjs');
 require('date-fns');
@@ -50,13 +48,17 @@ var LegacyCalendarRange = function (_a) {
     classNames: classNames,
     components: {
       IconRight: function () {
-        return React__default.default.createElement(ArrowForwardIcon.ArrowForwardIcon, {
-          role: "presentation"
+        return React__default.default.createElement(Icon.Icon, {
+          name: "arrow_forward",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         });
       },
       IconLeft: function () {
-        return React__default.default.createElement(ArrowBackwardIcon.ArrowBackwardIcon, {
-          role: "presentation"
+        return React__default.default.createElement(Icon.Icon, {
+          name: "arrow_back",
+          isPresentational: true,
+          shouldMirrorInRTL: true
         });
       }
     },

package/dist/cjs/Checkbox/Checkbox/Checkbox.cjs

@@ -3,9 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var CheckIcon = require('../../Icon/CheckIcon.cjs');
-var MinusIcon = require('../../Icon/MinusIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var Checkbox_module = require('./Checkbox.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -16,15 +14,11 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var renderCheckOrMixedIcon = function (status, reversed) {
   if (status === "off") return;
-  return React__default.default.createElement("span", {
+  return React__default.default.createElement(Icon.Icon, {
+    name: status === "on" ? "check" : "remove",
+    isPresentational: true,
     className: classnames__default.default(Checkbox_module.icon, reversed && Checkbox_module.reversed)
-  }, status === "on" ? React__default.default.createElement(CheckIcon.CheckIcon, {
-    role: "presentation",
-    inheritSize: true
-  }) : React__default.default.createElement(MinusIcon.MinusIcon, {
-    role: "presentation",
-    inheritSize: true
-  }));
+  });
 };
 var getCheckedFromStatus = function (checkedStatus) {
   return checkedStatus === "on";

package/dist/cjs/ClearButton/ClearButton.cjs

@@ -3,8 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-require('../Icon/subcomponents/SVG/SVG.cjs');
-var ClearIcon = require('../Icon/ClearIcon.cjs');
+var Icon = require('../__future__/Icon/Icon.cjs');
 var ClearButton_module = require('./ClearButton.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -22,8 +21,10 @@ var ClearButton = function (_a) {
     type: "button",
     "aria-label": "clear",
     className: classnames__default.default(ClearButton_module.clearButton, isReversed ? ClearButton_module.reversed : ClearButton_module.default, classNameOverride)
-  }, restProps), React__default.default.createElement(ClearIcon.ClearIcon, {
-    role: "presentation"
+  }, restProps), React__default.default.createElement(Icon.Icon, {
+    name: "cancel",
+    isPresentational: true,
+    isFilled: true
   }));
 };
 ClearButton.displayName = "ClearButton";

package/dist/cjs/Collapsible/Collapsible/Collapsible.cjs

@@ -5,9 +5,7 @@ var React = require('react');
 var classnames = require('classnames');
 var AnimateHeight = require('react-animate-height');
 var Heading = require('../../Heading/Heading.cjs');
-require('../../Icon/subcomponents/SVG/SVG.cjs');
-var ChevronDownIcon = require('../../Icon/ChevronDownIcon.cjs');
-var ChevronUpIcon = require('../../Icon/ChevronUpIcon.cjs');
+var Icon = require('../../__future__/Icon/Icon.cjs');
 var Collapsible_module = require('./Collapsible.module.scss.cjs');
 var IconButton = require('../../__actions__/Button/v1/IconButton/IconButton.cjs');
 function _interopDefault(e) {
@@ -74,10 +72,9 @@ var Collapsible = function (_a) {
     tag: "span"
   }, title)), React__default.default.createElement("div", null, React__default.default.createElement(IconButton.IconButton, {
     label: title,
-    icon: isOpen ? React__default.default.createElement(ChevronUpIcon.ChevronUpIcon, {
-      role: "presentation"
-    }) : React__default.default.createElement(ChevronDownIcon.ChevronDownIcon, {
-      role: "presentation"
+    icon: React__default.default.createElement(Icon.Icon, {
+      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      isPresentational: true
     }),
     type: "button",
     "aria-expanded": isOpen,