@kaizen/components 2.2.1 → 2.2.3

package/codemods/utils/updateKaioImports.ts

@@ -130,8 +130,7 @@ export const updateKaioImports =
     if (!ts.isSourceFile(rootNode)) return rootNode
 
     if (!importsToRemove && !importsToAdd) return rootNode
-    if (importsToRemove && importsToRemove.size === 0 && importsToAdd && importsToAdd.size === 0)
-      return rootNode
+    if (importsToRemove?.size === 0 && importsToAdd?.size === 0) return rootNode
 
     const { factory } = context
 

package/dist/cjs/src/TitleBlock/subcomponents/Toolbar.cjs

@@ -19,7 +19,7 @@ var Toolbar = function (_a) {
     _b = _a.noGap,
     noGap = _b === void 0 ? false : _b,
     automationId = _a.automationId;
-  if (!items || items && items.length === 0) {
+  if (!items || (items === null || items === void 0 ? void 0 : items.length) === 0) {
     return React__default.default.createElement(React__default.default.Fragment, null);
   }
   return React__default.default.createElement("div", {

package/dist/esm/src/TitleBlock/subcomponents/Toolbar.mjs

@@ -11,7 +11,7 @@ const Toolbar = /*#__PURE__*/function () {
       _b = _a.noGap,
       noGap = _b === void 0 ? false : _b,
       automationId = _a.automationId;
-    if (!items || items && items.length === 0) {
+    if (!items || (items === null || items === void 0 ? void 0 : items.length) === 0) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
     return /*#__PURE__*/React.createElement("div", {

package/dist/styles.css

@@ -12,7 +12,7 @@
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
-    word-wrap: normal;
+    overflow-wrap: normal;
     direction: ltr;
     font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
@@ -148,6 +148,7 @@
     font-family: var(--typography-heading-1-font-family);
     font-weight: var(--typography-heading-1-font-weight);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    overflow-wrap: normal;
   }
 
   .Avatar-module_initials__85roP.Avatar-module_longName__02zNk::before {
@@ -559,8 +560,7 @@
 }
 @layer kz-components {
   .VisuallyHidden-module_srOnly__tTjOK {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -3732,8 +3732,7 @@
     }
   }
   .Base-module_visuallyHidden__bykhu:not(:focus, :active) {
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     position: absolute;
     width: 1px;
     height: 1px;
@@ -3791,7 +3790,7 @@
       );
     grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
     padding: var(--spacing-24);
-    grid-column-gap: var(--spacing-32);
+    column-gap: var(--spacing-32);
   }
 
   .EmptyState-module_illustrationContainer__2Ch-u {
@@ -3824,8 +3823,8 @@
     .EmptyState-module_content__dggps {
       grid-template-columns: 1fr;
       grid-template-rows: auto;
-      grid-column-gap: unset;
-      grid-row-gap: var(--spacing-24);
+      column-gap: unset;
+      row-gap: var(--spacing-24);
       padding: var(--spacing-24);
     }
 
@@ -5197,7 +5196,7 @@
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: rect(0 0 0 0);
     border: 0;
   }
 }
@@ -8267,7 +8266,7 @@
     border: var(--border-solid-border-width, 2px) var(--border-solid-border-style, solid) var(--color-gray-500, #878792);
     background: var(--color-white, #ffffff);
     border-radius: var(--border-solid-border-radius, 7px);
-    word-wrap: break-word;
+    overflow-wrap: break-word;
     /* stylelint-enable no-descending-specificity */
   }
   .RichTextEditor-module_editorWrapper__5q3mG:hover, .RichTextEditor-module_editorWrapper__5q3mG:focus-within {
@@ -9740,7 +9739,7 @@
     margin-block: 0;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
-    grid-gap: var(--spacing-md, 1.5rem);
+    gap: var(--spacing-md, 1.5rem);
   }
   @media (max-width: 767px) {
     .TileGrid-module_grid__1WCNc {
@@ -10724,8 +10723,7 @@
     }
   }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -10750,7 +10748,6 @@
     }
   }
   .TitleBlock-module_breadcrumbTextLink__ngx82:hover, .TitleBlock-module_breadcrumbTextLink__ngx82:focus, .TitleBlock-module_breadcrumb__lVNKz:hover .TitleBlock-module_breadcrumbTextLink__ngx82, .TitleBlock-module_breadcrumb__lVNKz:focus .TitleBlock-module_breadcrumbTextLink__ngx82 {
-    clip: initial;
     clip-path: initial;
     height: initial;
     overflow: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -77,8 +77,8 @@
     "kaizen-codemod": "./bin/codemod.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.5",
-    "@headlessui/react": "^2.2.7",
+    "@floating-ui/react-dom": "^2.1.6",
+    "@headlessui/react": "^2.2.9",
     "@internationalized/date": "^3.8.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
@@ -103,16 +103,16 @@
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
     "prosemirror-commands": "^1.7.1",
-    "prosemirror-history": "^1.4.1",
-    "prosemirror-inputrules": "^1.5.0",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.2",
+    "prosemirror-model": "^1.25.4",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
-    "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.10.4",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-transform": "^1.10.5",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.40.1",
+    "prosemirror-view": "^1.41.3",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -123,23 +123,23 @@
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "use-debounce": "^10.0.5",
-    "uuid": "^11.1.0"
+    "use-debounce": "^10.0.6",
+    "uuid": "^13.0.0"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.12.2",
-    "@cultureamp/package-bundler": "^2.3.2",
+    "@cultureamp/i18n-react-intl": "^2.15.0",
+    "@cultureamp/package-bundler": "^2.4.4",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-highlight": "^0.12.8",
     "@types/react-textfit": "^1.1.4",
-    "@types/uuid": "^10.0.0",
-    "autoprefixer": "^10.4.21",
+    "@types/uuid": "^11.0.0",
+    "autoprefixer": "^10.4.22",
     "concat-cli": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
@@ -148,20 +148,20 @@
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^10.2.4",
+    "postcss-preset-env": "^10.4.0",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.2.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "query-string": "^9.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-highlight": "^0.15.0",
-    "react-intl": "^7.1.11",
-    "rollup": "^4.46.2",
+    "react-intl": "^7.1.14",
+    "rollup": "^4.53.3",
     "sass": "1.79.6",
-    "serialize-query-params": "^2.0.2",
-    "svgo": "^3.3.2",
+    "serialize-query-params": "^2.0.4",
+    "svgo": "^4.0.0",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.3",
+    "tsx": "^4.20.6",
     "@kaizen/design-tokens": "11.0.0"
   },
   "devDependenciesComments": {

package/src/Avatar/Avatar.module.css

@@ -95,6 +95,7 @@
     font-family: var(--typography-heading-1-font-family);
     font-weight: var(--typography-heading-1-font-weight);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    overflow-wrap: normal;
   }
 
   .initials.longName::before {

package/src/EmptyState/EmptyState.module.css

@@ -46,7 +46,7 @@
       );
     grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
     padding: var(--spacing-24);
-    grid-column-gap: var(--spacing-32);
+    column-gap: var(--spacing-32);
   }
 
   .illustrationContainer {
@@ -79,8 +79,8 @@
     .content {
       grid-template-columns: 1fr;
       grid-template-rows: auto;
-      grid-column-gap: unset;
-      grid-row-gap: var(--spacing-24);
+      column-gap: unset;
+      row-gap: var(--spacing-24);
       padding: var(--spacing-24);
     }
 

package/src/Icon/Icon.module.css

@@ -11,7 +11,7 @@
     text-transform: none;
     display: inline-block;
     white-space: nowrap;
-    word-wrap: normal;
+    overflow-wrap: normal;
     direction: ltr;
     font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;

package/src/IconV1/_docs/icon.module.scss

@@ -5,7 +5,7 @@
     display: grid;
     grid-template-columns: repeat(6, 150px);
     grid-template-rows: min-content;
-    grid-gap: var(--spacing-8);
+    gap: var(--spacing-8);
     margin: 0;
     padding: 0;
     list-style: none;

package/src/Illustration/subcomponents/Base/Base.module.scss

@@ -114,8 +114,7 @@
   // keyboard focus. Otherwise, a sighted keyboard user would have to try and
   // figure out where their visible focus indicator had gone to.
   .visuallyHidden:not(:focus, :active) {
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     position: absolute;
     width: 1px;
     height: 1px;

package/src/Notification/subcomponents/GenericNotification/_mixins.scss

@@ -360,7 +360,7 @@ $notification-slide-right: transform 300ms ease-out;
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: rect(0 0 0 0);
     border: 0;
   }
 }

package/src/RichTextEditor/RichTextEditor/RichTextEditor.module.scss

@@ -61,7 +61,7 @@
     border: $border-solid-border-width $border-solid-border-style $color-gray-500;
     background: $color-white;
     border-radius: $border-solid-border-radius;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     &:hover,
     &:focus-within {

package/src/Select/Select.tsx

@@ -120,8 +120,7 @@ export const Select = React.forwardRef<any, SelectProps>(
 Select.displayName = 'Select'
 
 interface AsyncProps
-  extends ReactAsyncSelectProps<any, boolean, any>,
-    ReactSelectProps<any, boolean, any> {}
+  extends ReactAsyncSelectProps<any, boolean, any>, ReactSelectProps<any, boolean, any> {}
 
 export const AsyncSelect = React.forwardRef(
   ({ className: propsClassName, placeholder, ...props }: AsyncProps, ref: React.Ref<any>) => (

package/src/Tile/TileGrid/TileGrid.module.scss

@@ -11,7 +11,7 @@
     // the more we shave off the width here,
     // the less the tiles will grow when they lose one from the row
     grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
-    grid-gap: $spacing-md;
+    gap: $spacing-md;
 
     @include ca-media-mobile {
       grid-template-columns: repeat(2, minmax(226px, $tileHeight));

package/src/TitleBlock/TitleBlock.module.scss

@@ -577,8 +577,7 @@
   }
 
   @mixin visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;
@@ -587,7 +586,6 @@
   }
 
   @mixin visually-hidden-reset {
-    clip: initial;
     clip-path: initial;
     height: initial;
     overflow: initial;

package/src/TitleBlock/subcomponents/Toolbar.tsx

@@ -18,7 +18,7 @@ type ToolbarProps = {
 }
 
 export const Toolbar = ({ items, noGap = false, automationId }: ToolbarProps): JSX.Element => {
-  if (!items || (items && items.length === 0)) {
+  if (!items || items?.length === 0) {
     return <></>
   }
   return (

package/src/VisuallyHidden/VisuallyHidden.module.scss

@@ -1,7 +1,6 @@
 @layer kz-components {
   .srOnly {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    clip-path: rect(0 0 0 0);
     height: 1px;
     overflow: hidden;
     position: absolute;