@kaizen/components 1.73.9 → 1.73.11

package/dist/cjs/__next__/Select/Select.cjs

@@ -59,6 +59,7 @@ var Select = function (_a) {
   var fallbackId = React.useId();
   var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
   var descriptionId = "".concat(id, "--description");
+  var validationId = "".concat(id, "--validation");
   var popoverId = "".concat(id, "--popover");
   var disabledKeys = getDisabledKeysFromItems.getDisabledKeysFromItems(items);
   var ariaSelectProps = tslib.__assign({
@@ -92,14 +93,15 @@ var Select = function (_a) {
   var selectToggleProps = tslib.__assign(tslib.__assign({}, buttonProps), {
     label: label,
     labelProps: labelProps,
-    value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
+    'value': (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
     valueProps: valueProps,
-    isOpen: state.isOpen,
+    'isOpen': state.isOpen,
     placeholder: placeholder,
     status: status,
-    isDisabled: triggerProps.isDisabled,
+    'isDisabled': triggerProps.isDisabled,
     isReversed: isReversed,
-    ref: refs.setReference
+    'ref': refs.setReference,
+    'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId)
   });
   var _e = React.useState(),
     portalContainer = _e[0],
@@ -128,6 +130,7 @@ var Select = function (_a) {
   }, React__default.default.createElement(SelectPopoverContents.SelectPopoverContents, {
     menuProps: menuProps
   }, children)))), validationMessage && React__default.default.createElement(FieldMessage.FieldMessage, tslib.__assign({}, errorMessageProps, {
+    id: validationId,
     message: validationMessage,
     status: status,
     reversed: isReversed

package/dist/esm/__next__/Select/Select.mjs

@@ -51,6 +51,7 @@ const Select = /*#__PURE__*/function () {
     var fallbackId = useId();
     var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
     var descriptionId = "".concat(id, "--description");
+    var validationId = "".concat(id, "--validation");
     var popoverId = "".concat(id, "--popover");
     var disabledKeys = getDisabledKeysFromItems(items);
     var ariaSelectProps = __assign({
@@ -84,14 +85,15 @@ const Select = /*#__PURE__*/function () {
     var selectToggleProps = __assign(__assign({}, buttonProps), {
       label: label,
       labelProps: labelProps,
-      value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
+      'value': (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered,
       valueProps: valueProps,
-      isOpen: state.isOpen,
+      'isOpen': state.isOpen,
       placeholder: placeholder,
       status: status,
-      isDisabled: triggerProps.isDisabled,
+      'isDisabled': triggerProps.isDisabled,
       isReversed: isReversed,
-      ref: refs.setReference
+      'ref': refs.setReference,
+      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId)
     });
     var _e = useState(),
       portalContainer = _e[0],
@@ -120,6 +122,7 @@ const Select = /*#__PURE__*/function () {
     }, /*#__PURE__*/React.createElement(SelectPopoverContents, {
       menuProps: menuProps
     }, children))))), validationMessage && (/*#__PURE__*/React.createElement(FieldMessage, __assign({}, errorMessageProps, {
+      id: validationId,
       message: validationMessage,
       status: status,
       reversed: isReversed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.73.9",
+  "version": "1.73.11",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -121,7 +121,7 @@
     "@react-stately/list": "^3.12.0",
     "@react-stately/menu": "^3.9.2",
     "@react-stately/select": "^3.6.11",
-    "@react-types/shared": "^3.26.0",
+    "@react-types/shared": "^3.28.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
@@ -141,7 +141,7 @@
     "react-aria": "^3.38.1",
     "react-aria-components": "^1.7.1",
     "react-day-picker": "8.10.1",
-    "react-focus-lock": "^2.13.5",
+    "react-focus-lock": "^2.13.6",
     "react-focus-on": "^3.9.4",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
@@ -156,14 +156,14 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "^13.2.5",
-    "@cultureamp/i18n-react-intl": "^2.7.1",
+    "@cultureamp/i18n-react-intl": "^2.7.3",
     "@testing-library/dom": "^10.4.0",
     "@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.20",
+    "autoprefixer": "^10.4.21",
     "concat-cli": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
@@ -172,21 +172,21 @@
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.1.3",
+    "postcss-preset-env": "^10.1.5",
     "postcss-scss": "^4.0.9",
     "query-string": "^9.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
-    "react-intl": "^7.1.0",
-    "rollup": "^4.35.0",
+    "react-intl": "^7.1.6",
+    "rollup": "^4.36.0",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
-    "tsx": "^4.19.2",
+    "tsx": "^4.19.3",
     "@kaizen/design-tokens": "10.8.9",
-    "@kaizen/package-bundler": "2.0.5"
+    "@kaizen/package-bundler": "2.0.6"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/__next__/Select/Select.tsx

@@ -100,6 +100,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
   const fallbackId = useId()
   const id = propsId ?? fallbackId
   const descriptionId = `${id}--description`
+  const validationId = `${id}--validation`
   const popoverId = `${id}--popover`
 
   const disabledKeys = getDisabledKeysFromItems(items)
@@ -143,14 +144,15 @@ export const Select = <Option extends SelectOption = SelectOption>({
     ...buttonProps,
     label,
     labelProps,
-    value: state?.selectedItem?.rendered,
+    'value': state?.selectedItem?.rendered,
     valueProps,
-    isOpen: state.isOpen,
+    'isOpen': state.isOpen,
     placeholder,
     status,
-    isDisabled: triggerProps.isDisabled,
+    'isDisabled': triggerProps.isDisabled,
     isReversed,
-    ref: refs.setReference,
+    'ref': refs.setReference,
+    'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
   }
 
   const [portalContainer, setPortalContainer] = useState<HTMLElement>()
@@ -184,6 +186,7 @@ export const Select = <Option extends SelectOption = SelectOption>({
       {validationMessage && (
         <FieldMessage
           {...errorMessageProps}
+          id={validationId}
           message={validationMessage}
           status={status}
           reversed={isReversed}