@dt-dds/react-select 1.0.0-beta.68 → 1.0.0-beta.69

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @dt-ui/react-select
 
+## 1.0.0-beta.69
+
+### Minor Changes
+
+- feat: add accessibility to Dropdown
+
+### Patch Changes
+
+- refactor: fix sonar issues on Dropdown and Select
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-dropdown@1.0.0-beta.78
+  - @dt-dds/react-box@1.0.0-beta.57
+
 ## 1.0.0-beta.68
 
 ### Minor Changes

package/dist/index.js

@@ -148,10 +148,8 @@ var SelectOption = ({
       children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         SelectCheckboxStyled,
         {
-          "aria-hidden": "true",
           isChecked: isSelected,
           isDisabled,
-          role: "presentation",
           tabIndex: -1,
           children
         }
@@ -183,9 +181,13 @@ var TypographyValueStyled = (0, import_styled2.default)(import_react_typography.
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  ${({ theme, scale, isFloatingLabel }) => `
-    ${isFloatingLabel ? `padding-top: ${scale === "standard" ? theme.spacing.spacing_50 : theme.spacing.spacing_40};` : `padding-block: ${scale === "standard" ? theme.spacing.spacing_30 : theme.spacing.spacing_20};`}
-  `}
+  ${({ theme, scale, isFloatingLabel }) => {
+  const paddingTop = scale === "standard" ? theme.spacing.spacing_50 : theme.spacing.spacing_40;
+  const paddingBlock = scale === "standard" ? theme.spacing.spacing_30 : theme.spacing.spacing_20;
+  return `
+      ${isFloatingLabel ? `padding-top: ${paddingTop};` : `padding-block: ${paddingBlock};`}
+  `;
+}}
 `;
 var SelectContainerStyled = import_styled2.default.div`
   transition: border 0.2s ease-in-out;
@@ -338,6 +340,41 @@ var Select = ({
     }
     return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a2 = selectedItems[0]) == null ? void 0 : _a2.label;
   };
+  const selectStateReducer = (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+    switch (type) {
+      case useSelect.stateChangeTypes.ToggleButtonBlur:
+        return __spreadProps(__spreadValues({}, changes), {
+          isOpen: false,
+          selectedItem: state.selectedItem,
+          highlightedIndex: state.highlightedIndex
+        });
+      case useSelect.stateChangeTypes.ItemClick:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+        return isMulti ? __spreadProps(__spreadValues({}, changes), {
+          isOpen: true,
+          highlightedIndex: state.highlightedIndex
+        }) : changes;
+      default:
+        return changes;
+    }
+  };
+  const handleSelectedItemChange = ({
+    selectedItem
+  }) => {
+    if (!selectedItem) {
+      return;
+    }
+    if (isMulti) {
+      const currentValue = Array.isArray(value) ? value : [];
+      const isSelectedItem = selectedOptionsSet.has(selectedItem.value);
+      const nextValue = isSelectedItem ? currentValue.filter((v) => v !== selectedItem.value) : [...currentValue, selectedItem.value];
+      onChange == null ? void 0 : onChange(nextValue);
+      return;
+    }
+    onChange == null ? void 0 : onChange(selectedItem.value);
+  };
   const {
     isOpen,
     closeMenu,
@@ -353,41 +390,16 @@ var Select = ({
     },
     defaultHighlightedIndex: isMulti || !(selectedItems == null ? void 0 : selectedItems[0]) ? 0 : void 0,
     selectedItem: !isMulti ? (_a = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a : null : null,
-    stateReducer(state, actionAndChanges) {
-      const { changes, type } = actionAndChanges;
-      switch (type) {
-        case useSelect.stateChangeTypes.ToggleButtonBlur:
-          return __spreadProps(__spreadValues({}, changes), {
-            isOpen: false,
-            selectedItem: state.selectedItem,
-            highlightedIndex: state.highlightedIndex
-          });
-        case useSelect.stateChangeTypes.ItemClick:
-        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
-        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-          return isMulti ? __spreadProps(__spreadValues({}, changes), {
-            isOpen: true,
-            highlightedIndex: state.highlightedIndex
-          }) : changes;
-        default:
-          return changes;
-      }
-    },
-    onSelectedItemChange: ({ selectedItem }) => {
-      if (!selectedItem) {
-        return;
-      }
-      if (isMulti) {
-        const currentValue = Array.isArray(value) ? value : [];
-        const isSelectedItem = selectedOptionsSet.has(selectedItem.value);
-        const nextValue = isSelectedItem ? currentValue.filter((v) => v !== selectedItem.value) : [...currentValue, selectedItem.value];
-        onChange == null ? void 0 : onChange(nextValue);
-        return;
-      }
-      onChange == null ? void 0 : onChange(selectedItem.value);
-    }
+    stateReducer: selectStateReducer,
+    onSelectedItemChange: handleSelectedItemChange
   });
   const disabled = isDisabled || options.length === 1;
+  const helperTextColor = (isDisabled2, hasError2) => {
+    if (isDisabled2) {
+      return "content.light";
+    }
+    return hasError2 ? "error.default" : "content.medium";
+  };
   const toggleProps = getToggleButtonProps({
     disabled,
     tabIndex: disabled ? -1 : 0,
@@ -479,7 +491,7 @@ var Select = ({
             helperText ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               TypographyHelperTextStyled,
               {
-                color: isDisabled ? "content.light" : hasError ? "error.default" : "content.medium",
+                color: helperTextColor(!!isDisabled, hasError),
                 dataTestId: "select-helper-text",
                 element: "span",
                 fontStyles: "bodySmRegular",
@@ -493,6 +505,7 @@ var Select = ({
                 anchorRef,
                 "aria-multiselectable": isMulti,
                 as: "ul",
+                isFocusable: false,
                 isOpen,
                 onClose: closeMenu,
                 children

package/dist/index.mjs

@@ -120,10 +120,8 @@ var SelectOption = ({
       children: isMulti ? /* @__PURE__ */ jsx2(
         SelectCheckboxStyled,
         {
-          "aria-hidden": "true",
           isChecked: isSelected,
           isDisabled,
-          role: "presentation",
           tabIndex: -1,
           children
         }
@@ -155,9 +153,13 @@ var TypographyValueStyled = styled2(Typography, {
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  ${({ theme, scale, isFloatingLabel }) => `
-    ${isFloatingLabel ? `padding-top: ${scale === "standard" ? theme.spacing.spacing_50 : theme.spacing.spacing_40};` : `padding-block: ${scale === "standard" ? theme.spacing.spacing_30 : theme.spacing.spacing_20};`}
-  `}
+  ${({ theme, scale, isFloatingLabel }) => {
+  const paddingTop = scale === "standard" ? theme.spacing.spacing_50 : theme.spacing.spacing_40;
+  const paddingBlock = scale === "standard" ? theme.spacing.spacing_30 : theme.spacing.spacing_20;
+  return `
+      ${isFloatingLabel ? `padding-top: ${paddingTop};` : `padding-block: ${paddingBlock};`}
+  `;
+}}
 `;
 var SelectContainerStyled = styled2.div`
   transition: border 0.2s ease-in-out;
@@ -310,6 +312,41 @@ var Select = ({
     }
     return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a2 = selectedItems[0]) == null ? void 0 : _a2.label;
   };
+  const selectStateReducer = (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+    switch (type) {
+      case useSelect.stateChangeTypes.ToggleButtonBlur:
+        return __spreadProps(__spreadValues({}, changes), {
+          isOpen: false,
+          selectedItem: state.selectedItem,
+          highlightedIndex: state.highlightedIndex
+        });
+      case useSelect.stateChangeTypes.ItemClick:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+        return isMulti ? __spreadProps(__spreadValues({}, changes), {
+          isOpen: true,
+          highlightedIndex: state.highlightedIndex
+        }) : changes;
+      default:
+        return changes;
+    }
+  };
+  const handleSelectedItemChange = ({
+    selectedItem
+  }) => {
+    if (!selectedItem) {
+      return;
+    }
+    if (isMulti) {
+      const currentValue = Array.isArray(value) ? value : [];
+      const isSelectedItem = selectedOptionsSet.has(selectedItem.value);
+      const nextValue = isSelectedItem ? currentValue.filter((v) => v !== selectedItem.value) : [...currentValue, selectedItem.value];
+      onChange == null ? void 0 : onChange(nextValue);
+      return;
+    }
+    onChange == null ? void 0 : onChange(selectedItem.value);
+  };
   const {
     isOpen,
     closeMenu,
@@ -325,41 +362,16 @@ var Select = ({
     },
     defaultHighlightedIndex: isMulti || !(selectedItems == null ? void 0 : selectedItems[0]) ? 0 : void 0,
     selectedItem: !isMulti ? (_a = selectedItems == null ? void 0 : selectedItems[0]) != null ? _a : null : null,
-    stateReducer(state, actionAndChanges) {
-      const { changes, type } = actionAndChanges;
-      switch (type) {
-        case useSelect.stateChangeTypes.ToggleButtonBlur:
-          return __spreadProps(__spreadValues({}, changes), {
-            isOpen: false,
-            selectedItem: state.selectedItem,
-            highlightedIndex: state.highlightedIndex
-          });
-        case useSelect.stateChangeTypes.ItemClick:
-        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
-        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-          return isMulti ? __spreadProps(__spreadValues({}, changes), {
-            isOpen: true,
-            highlightedIndex: state.highlightedIndex
-          }) : changes;
-        default:
-          return changes;
-      }
-    },
-    onSelectedItemChange: ({ selectedItem }) => {
-      if (!selectedItem) {
-        return;
-      }
-      if (isMulti) {
-        const currentValue = Array.isArray(value) ? value : [];
-        const isSelectedItem = selectedOptionsSet.has(selectedItem.value);
-        const nextValue = isSelectedItem ? currentValue.filter((v) => v !== selectedItem.value) : [...currentValue, selectedItem.value];
-        onChange == null ? void 0 : onChange(nextValue);
-        return;
-      }
-      onChange == null ? void 0 : onChange(selectedItem.value);
-    }
+    stateReducer: selectStateReducer,
+    onSelectedItemChange: handleSelectedItemChange
   });
   const disabled = isDisabled || options.length === 1;
+  const helperTextColor = (isDisabled2, hasError2) => {
+    if (isDisabled2) {
+      return "content.light";
+    }
+    return hasError2 ? "error.default" : "content.medium";
+  };
   const toggleProps = getToggleButtonProps({
     disabled,
     tabIndex: disabled ? -1 : 0,
@@ -451,7 +463,7 @@ var Select = ({
             helperText ? /* @__PURE__ */ jsx3(
               TypographyHelperTextStyled,
               {
-                color: isDisabled ? "content.light" : hasError ? "error.default" : "content.medium",
+                color: helperTextColor(!!isDisabled, hasError),
                 dataTestId: "select-helper-text",
                 element: "span",
                 fontStyles: "bodySmRegular",
@@ -465,6 +477,7 @@ var Select = ({
                 anchorRef,
                 "aria-multiselectable": isMulti,
                 as: "ul",
+                isFocusable: false,
                 isOpen,
                 onClose: closeMenu,
                 children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-select",
-  "version": "1.0.0-beta.68",
+  "version": "1.0.0-beta.69",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,10 +20,10 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-box": "1.0.0-beta.56",
+    "@dt-dds/react-box": "1.0.0-beta.57",
     "@dt-dds/react-checkbox": "1.0.0-beta.52",
     "@dt-dds/react-core": "1.0.0-beta.51",
-    "@dt-dds/react-dropdown": "1.0.0-beta.77",
+    "@dt-dds/react-dropdown": "1.0.0-beta.78",
     "@dt-dds/react-icon": "1.0.0-beta.54",
     "@dt-dds/react-icon-button": "1.0.0-beta.20",
     "@dt-dds/react-label-field": "1.0.0-beta.52",