@kaizen/components 1.78.0 → 1.78.2

package/dist/cjs/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.cjs

@@ -57,7 +57,7 @@ var FilterBarSelect = function (_a) {
       }));
     },
     onSelectionChange: function (key) {
-      updateValue(id, key);
+      updateValue(id, key !== null && key !== void 0 ? key : undefined);
       onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(key);
     },
     isOpen: filterState.isOpen,

package/dist/cjs/src/LikertScaleLegacy/LikertScaleLegacy.cjs

@@ -36,7 +36,8 @@ var LikertScaleLegacy = function (_a) {
     onSelect = _a.onSelect,
     validationMessage = _a.validationMessage,
     status = _a.status,
-    labelId = _a.labelId;
+    labelId = _a.labelId,
+    isRequired = _a.isRequired;
   var _e = React.useState(null),
     hoveredItem = _e[0],
     setHoveredItem = _e[1];
@@ -83,11 +84,12 @@ var LikertScaleLegacy = function (_a) {
   var isRated = selectedItem && selectedItem.value > 0;
   return React__default.default.createElement("div", {
     className: classnames__default.default(LikertScaleLegacy_module.container, isRated && LikertScaleLegacy_module.rated, reversed && [LikertScaleLegacy_module.reversed], hoveredItem !== null && LikertScaleLegacy_module.hovered),
-    "aria-labelledby": labelId,
+    "aria-labelledby": isRequired ? "".concat(labelId) : labelId,
     role: "radiogroup",
     tabIndex: -1,
     "aria-describedby": validationMessageId,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "aria-required": isRequired
   }, React__default.default.createElement("div", {
     className: LikertScaleLegacy_module.legend,
     "data-testid": dataTestId && "".concat(dataTestId, "-legend")

package/dist/cjs/src/Menu/subcomponents/StatelessMenu/StatelessMenu.cjs

@@ -40,7 +40,6 @@ var StatelessMenu = function (_a) {
     'onMouseDown': function (e) {
       return e.preventDefault();
     },
-    'aria-haspopup': true,
     'aria-expanded': isMenuVisible
   });
   React.useEffect(function () {

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

@@ -44,16 +44,19 @@ var Select = function (_a) {
     status = _a.status,
     validationMessage = _a.validationMessage,
     isReversed = _a.isReversed,
+    _c = _a.isRequired,
+    isRequired = _c === void 0 ? false : _c,
     isFullWidth = _a.isFullWidth,
     disabledValues = _a.disabledValues,
     classNameOverride = _a.classNameOverride,
     selectedKey = _a.selectedKey,
     description = _a.description,
-    _c = _a.placeholder,
-    placeholder = _c === void 0 ? '' : _c,
+    _d = _a.placeholder,
+    placeholder = _d === void 0 ? '' : _d,
     isDisabled = _a.isDisabled,
     portalContainerId = _a.portalContainerId,
-    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+    onSelectionChange = _a.onSelectionChange,
+    restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId", "onSelectionChange"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
   var fallbackId = React.useId();
@@ -70,16 +73,20 @@ var Select = function (_a) {
     selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description: description,
     placeholder: placeholder,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isRequired: isRequired,
+    onSelectionChange: onSelectionChange ? function (key) {
+      return onSelectionChange(key);
+    } : undefined
   }, restProps);
   var state = select.useSelectState(ariaSelectProps);
-  var _d = select$1.useSelect(ariaSelectProps, state, triggerRef),
-    labelProps = _d.labelProps,
-    reactAriaTriggerProps = _d.triggerProps,
-    valueProps = _d.valueProps,
-    menuProps = _d.menuProps,
-    errorMessageProps = _d.errorMessageProps,
-    descriptionProps = _d.descriptionProps;
+  var _e = select$1.useSelect(ariaSelectProps, state, triggerRef),
+    labelProps = _e.labelProps,
+    reactAriaTriggerProps = _e.triggerProps,
+    valueProps = _e.valueProps,
+    menuProps = _e.menuProps,
+    errorMessageProps = _e.errorMessageProps,
+    descriptionProps = _e.descriptionProps;
   // Hack incoming:
   // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
   // We use role=combobox, meaning screen readers will read the value.
@@ -101,11 +108,12 @@ var Select = function (_a) {
     'isDisabled': triggerProps.isDisabled,
     isReversed: isReversed,
     'ref': refs.setReference,
-    'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId)
+    'aria-describedby': classnames__default.default(validationMessage && validationId, description && descriptionId),
+    'aria-required': isRequired
   });
-  var _e = React.useState(),
-    portalContainer = _e[0],
-    setPortalContainer = _e[1];
+  var _f = React.useState(),
+    portalContainer = _f[0],
+    setPortalContainer = _f[1];
   React.useEffect(function () {
     if (portalContainerId) {
       var portalElement = document.getElementById(portalContainerId);

package/dist/esm/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.mjs

@@ -50,7 +50,7 @@ const FilterBarSelect = /*#__PURE__*/function () {
         }));
       },
       onSelectionChange: function (key) {
-        updateValue(id, key);
+        updateValue(id, key !== null && key !== void 0 ? key : undefined);
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(key);
       },
       isOpen: filterState.isOpen,

package/dist/esm/src/LikertScaleLegacy/LikertScaleLegacy.mjs

@@ -27,7 +27,8 @@ var LikertScaleLegacy = function (_a) {
     onSelect = _a.onSelect,
     validationMessage = _a.validationMessage,
     status = _a.status,
-    labelId = _a.labelId;
+    labelId = _a.labelId,
+    isRequired = _a.isRequired;
   var _e = useState(null),
     hoveredItem = _e[0],
     setHoveredItem = _e[1];
@@ -74,11 +75,12 @@ var LikertScaleLegacy = function (_a) {
   var isRated = selectedItem && selectedItem.value > 0;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.container, isRated && styles.rated, reversed && [styles.reversed], hoveredItem !== null && styles.hovered),
-    "aria-labelledby": labelId,
+    "aria-labelledby": isRequired ? "".concat(labelId) : labelId,
     role: "radiogroup",
     tabIndex: -1,
     "aria-describedby": validationMessageId,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "aria-required": isRequired
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.legend,
     "data-testid": dataTestId && "".concat(dataTestId, "-legend")

package/dist/esm/src/Menu/subcomponents/StatelessMenu/StatelessMenu.mjs

@@ -32,7 +32,6 @@ const StatelessMenu = /*#__PURE__*/function () {
       'onMouseDown': function (e) {
         return e.preventDefault();
       },
-      'aria-haspopup': true,
       'aria-expanded': isMenuVisible
     });
     useEffect(function () {

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

@@ -36,16 +36,19 @@ const Select = /*#__PURE__*/function () {
       status = _a.status,
       validationMessage = _a.validationMessage,
       isReversed = _a.isReversed,
+      _c = _a.isRequired,
+      isRequired = _c === void 0 ? false : _c,
       isFullWidth = _a.isFullWidth,
       disabledValues = _a.disabledValues,
       classNameOverride = _a.classNameOverride,
       selectedKey = _a.selectedKey,
       description = _a.description,
-      _c = _a.placeholder,
-      placeholder = _c === void 0 ? '' : _c,
+      _d = _a.placeholder,
+      placeholder = _d === void 0 ? '' : _d,
       isDisabled = _a.isDisabled,
       portalContainerId = _a.portalContainerId,
-      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+      onSelectionChange = _a.onSelectionChange,
+      restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isRequired", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId", "onSelectionChange"]);
     var refs = useFloating().refs;
     var triggerRef = refs.reference;
     var fallbackId = useId();
@@ -62,16 +65,20 @@ const Select = /*#__PURE__*/function () {
       selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
       description: description,
       placeholder: placeholder,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isRequired: isRequired,
+      onSelectionChange: onSelectionChange ? function (key) {
+        return onSelectionChange(key);
+      } : undefined
     }, restProps);
     var state = useSelectState(ariaSelectProps);
-    var _d = useSelect(ariaSelectProps, state, triggerRef),
-      labelProps = _d.labelProps,
-      reactAriaTriggerProps = _d.triggerProps,
-      valueProps = _d.valueProps,
-      menuProps = _d.menuProps,
-      errorMessageProps = _d.errorMessageProps,
-      descriptionProps = _d.descriptionProps;
+    var _e = useSelect(ariaSelectProps, state, triggerRef),
+      labelProps = _e.labelProps,
+      reactAriaTriggerProps = _e.triggerProps,
+      valueProps = _e.valueProps,
+      menuProps = _e.menuProps,
+      errorMessageProps = _e.errorMessageProps,
+      descriptionProps = _e.descriptionProps;
     // Hack incoming:
     // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
     // We use role=combobox, meaning screen readers will read the value.
@@ -93,11 +100,12 @@ const Select = /*#__PURE__*/function () {
       'isDisabled': triggerProps.isDisabled,
       isReversed: isReversed,
       'ref': refs.setReference,
-      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId)
+      'aria-describedby': classnames(validationMessage && validationId, description && descriptionId),
+      'aria-required': isRequired
     });
-    var _e = useState(),
-      portalContainer = _e[0],
-      setPortalContainer = _e[1];
+    var _f = useState(),
+      portalContainer = _f[0],
+      setPortalContainer = _f[1];
     useEffect(function () {
       if (portalContainerId) {
         var portalElement = document.getElementById(portalContainerId);