@kaizen/components 0.0.0-canary-fix-select-focus-add-small-delay-20241013230007 → 0.0.0-canary-tsx-codemod-20241029235345

package/dist/esm/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs

@@ -1,42 +1,37 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import '../../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { IndicatorActiveIcon } from '../../../../../Icon/IndicatorActiveIcon.mjs';
-import { IndicatorInactiveIcon } from '../../../../../Icon/IndicatorInactiveIcon.mjs';
-import { SuccessIcon } from '../../../../../Icon/SuccessIcon.mjs';
 import { VisuallyHidden } from '../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import { Icon } from '../../../../../__future__/Icon/Icon.mjs';
 import styles from './ProgressStepper.module.css.mjs';
 var getStepStatus = function (isComplete, isCurrentStep, step, index) {
   if (isComplete) {
     return {
-      icon: ( /*#__PURE__*/React.createElement(SuccessIcon, {
+      icon: /*#__PURE__*/React.createElement(Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "success"
-      })),
+        name: "check_circle",
+        isPresentational: true,
+        isFilled: true
+      }),
       accessibleName: "Completed: ".concat(step.label)
     };
   }
   if (isCurrentStep) {
     return {
-      icon: ( /*#__PURE__*/React.createElement(IndicatorActiveIcon, {
+      icon: /*#__PURE__*/React.createElement(Icon, {
         key: index,
-        inheritSize: true,
-        role: "presentation",
-        classNameOverride: "active"
-      })),
+        name: "radio_button_checked",
+        isPresentational: true
+      }),
       accessibleName: "Current: ".concat(step.label)
     };
   }
   return {
-    icon: ( /*#__PURE__*/React.createElement(IndicatorInactiveIcon, {
+    icon: /*#__PURE__*/React.createElement(Icon, {
       key: index,
-      inheritSize: true,
-      classNameOverride: "incomplete",
-      role: "presentation"
-    })),
+      name: "radio_button_unchecked",
+      isPresentational: true
+    }),
     accessibleName: "Not started: ".concat(step.label)
   };
 };
@@ -62,7 +57,7 @@ const ProgressStepper = /*#__PURE__*/function () {
       var isCompletedStep = index < currentStepIndex || isComplete;
       var _c = getStepStatus(isCompletedStep, isCurrentStep, step, index),
         accessibleName = _c.accessibleName,
-        Icon = _c.icon;
+        icon = _c.icon;
       return /*#__PURE__*/React.createElement("li", {
         className: styles.step,
         key: "".concat(step.id),
@@ -76,7 +71,7 @@ const ProgressStepper = /*#__PURE__*/function () {
         className: styles.stepIndicator
       }, /*#__PURE__*/React.createElement("span", {
         className: classnames(styles.stepIcon, (_b = {}, _b[styles.isCompleted] = isCompletedStep, _b))
-      }, Icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
+      }, icon)), index < steps.length - 1 && ( /*#__PURE__*/React.createElement("div", {
         className: classnames([styles.stepDivider, isCompletedStep && styles.completedStep])
       }))));
     })), /*#__PURE__*/React.createElement("span", {

package/dist/esm/__future__/Icon/Icon.mjs

@@ -0,0 +1,38 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { handledRtlIcons } from './constants.mjs';
+import styles from './Icon.module.css.mjs';
+var MaterialIcon = function (_a) {
+  var children = _a.children,
+    isFilled = _a.isFilled,
+    isPresentational = _a.isPresentational,
+    alt = _a.alt,
+    className = _a.className,
+    restProps = __rest(_a, ["children", "isFilled", "isPresentational", "alt", "className"]);
+  return /*#__PURE__*/React.createElement("span", __assign({
+    className: classnames("material-symbols-outlined", styles.icon, isFilled && styles.filled, className),
+    "aria-hidden": isPresentational,
+    role: isPresentational ? undefined : "img",
+    "aria-label": alt
+  }, restProps), children);
+};
+var Icon = function (_a) {
+  var name = _a.name,
+    shouldMirrorInRTL = _a.shouldMirrorInRTL,
+    restProps = __rest(_a, ["name", "shouldMirrorInRTL"]);
+  if (!shouldMirrorInRTL) {
+    return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps), name);
+  }
+  if (Object.keys(handledRtlIcons).includes(name)) {
+    return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps), /*#__PURE__*/React.createElement("span", {
+      className: styles.iconLTR
+    }, name), /*#__PURE__*/React.createElement("span", {
+      className: styles.iconRTL
+    }, handledRtlIcons[name]));
+  }
+  return /*#__PURE__*/React.createElement(MaterialIcon, __assign({}, restProps, {
+    className: classnames(styles.shouldMirrorInRTL, restProps.className)
+  }), name);
+};
+export { Icon };

package/dist/esm/__future__/Icon/Icon.module.css.mjs

@@ -0,0 +1,8 @@
+var styles = {
+  "icon": "Icon-module_icon__CkmHY",
+  "filled": "Icon-module_filled__-VArQ",
+  "shouldMirrorInRTL": "Icon-module_shouldMirrorInRTL__kxncF",
+  "iconLTR": "Icon-module_iconLTR__b3GoB",
+  "iconRTL": "Icon-module_iconRTL__lpVw5"
+};
+export { styles as default };

package/dist/esm/__future__/Icon/constants.mjs

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+var handledRtlIcons = {
+  checklist: "checklist_rtl",
+  format_list_numbered: "format_list_numbered_rtl"
+};
+export { handledRtlIcons };

package/dist/esm/__future__/Select/subcomponents/ListBox/ListBox.mjs

@@ -44,21 +44,18 @@ const ListBox = /*#__PURE__*/function () {
       autoFocus: false
     }), state, ref).listBoxProps;
     /**
-     * This uses the new useIsClientReady to ensure document exists before trying to querySelector and a timeout to give the Listbox time to calc its position before focus is shifted  */
+     * This uses the new useIsClientReady to ensure document exists before trying to querySelector and give the time to focus to the correct element
+     */
     useEffect(function () {
+      var _a;
       if (isClientReady) {
         var optionKey = getOptionKeyFromCollection(state);
-        var focusToElement_1 = safeQuerySelector("[data-key='".concat(optionKey, "']"));
-        if (focusToElement_1) {
-          setTimeout(function () {
-            focusToElement_1.focus();
-          }, 1);
+        var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
+        if (focusToElement) {
+          focusToElement.focus();
         } else {
           // If an element is not found, focus on the listbox. This ensures the list can still be navigated to via keyboard if the keys do not align to the data attributes of the list items.
-          setTimeout(function () {
-            var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-          }, 1);
+          (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
       }
     }, [isClientReady]);

package/dist/esm/__future__/Select/subcomponents/Option/Option.mjs

@@ -2,8 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
 import { useOption, useFocusRing, mergeProps } from 'react-aria';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { CheckIcon } from '../../../../Icon/CheckIcon.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
 import { useSelectContext } from '../../context/SelectContext.mjs';
 import styles from './Option.module.scss.mjs';
 const Option = /*#__PURE__*/function () {
@@ -42,9 +41,9 @@ const Option = /*#__PURE__*/function () {
       "aria-label": item.textValue
     }), item.rendered, /*#__PURE__*/React.createElement("span", {
       className: classnames(styles.icon, isSelected && styles.isSelected)
-    }, isSelected && /*#__PURE__*/React.createElement(CheckIcon, {
-      inheritSize: true,
-      role: "presentation"
+    }, isSelected && /*#__PURE__*/React.createElement(Icon, {
+      name: "check",
+      isPresentational: true
     })));
   };
   Option.displayName = "Option";

package/dist/esm/__future__/Select/subcomponents/SelectToggle/SelectToggle.mjs

@@ -1,10 +1,8 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import '../../../../Icon/subcomponents/SVG/SVG.mjs';
-import { ChevronDownIcon } from '../../../../Icon/ChevronDownIcon.mjs';
-import { ChevronUpIcon } from '../../../../Icon/ChevronUpIcon.mjs';
 import { Label } from '../../../../Label/Label.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
 import styles from './SelectToggle.module.scss.mjs';
 const SelectToggle = /*#__PURE__*/function () {
   const SelectToggle = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -33,13 +31,11 @@ const SelectToggle = /*#__PURE__*/function () {
       className: classnames(styles.selectToggle, (value === null || value === undefined) && styles.placeholder, status === "error" && styles.error, status === "caution" && styles.caution, isDisabled && styles.disabled, isReversed && styles.reversed, classNameOverride)
     }), /*#__PURE__*/React.createElement("span", __assign({}, valueProps, {
       className: styles.value
-    }), value !== null && value !== void 0 ? value : placeholder), isOpen ? ( /*#__PURE__*/React.createElement(ChevronUpIcon, {
-      role: "presentation",
-      classNameOverride: styles.icon
-    })) : ( /*#__PURE__*/React.createElement(ChevronDownIcon, {
-      role: "presentation",
-      classNameOverride: styles.icon
-    }))));
+    }), value !== null && value !== void 0 ? value : placeholder), /*#__PURE__*/React.createElement(Icon, {
+      name: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down",
+      isPresentational: true,
+      className: styles.icon
+    })));
   });
   SelectToggle.displayName = "SelectToggle";
   return SelectToggle;

package/dist/esm/__future__/Tag/RemovableTag/subcomponents/RemoveButton.mjs

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classnames from 'classnames';
-import { RemoveTagIcon } from './RemoveTagIcon.mjs';
+import { Icon } from '../../../Icon/Icon.mjs';
 import styles from './RemoveButton.module.scss.mjs';
 const RemoveButton = /*#__PURE__*/function () {
   const RemoveButton = function (_a) {
@@ -15,8 +15,9 @@ const RemoveButton = /*#__PURE__*/function () {
       "aria-label": ariaLabel,
       className: classnames(styles.removeButton, classNameOverride),
       onClick: onClick
-    }, restProps), /*#__PURE__*/React.createElement(RemoveTagIcon, {
-      role: "presentation"
+    }, restProps), /*#__PURE__*/React.createElement(Icon, {
+      name: "close",
+      isPresentational: true
     }));
   };
   RemoveButton.displayName = "RemoveButton";

package/dist/esm/future.mjs

@@ -1,3 +1,4 @@
+export { Icon } from './__future__/Icon/Icon.mjs';
 export { Select } from './__future__/Select/Select.mjs';
 export { RemovableTag } from './__future__/Tag/RemovableTag/RemovableTag.mjs';
 export { Tag } from './__future__/Tag/Tag/Tag.mjs';