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

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @dt-ui/react-select
 
+## 1.0.0-beta.70
+
+### Patch Changes
+
+- fix(config): update ESLint, TS, and Storybook config
+- fix(icon-button): add missing @dt-dds/react-icon devDependency
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies [223664b]
+  - @dt-dds/react-checkbox@1.0.0-beta.53
+  - @dt-dds/react-core@1.0.0-beta.52
+  - @dt-dds/react-dropdown@1.0.0-beta.79
+  - @dt-dds/react-icon@1.0.0-beta.55
+  - @dt-dds/react-icon-button@1.0.0-beta.21
+  - @dt-dds/react-label-field@1.0.0-beta.53
+  - @dt-dds/react-tooltip@1.0.0-beta.61
+  - @dt-dds/react-typography@1.0.0-beta.43
+  - @dt-dds/themes@1.0.0-beta.10
+  - @dt-dds/react-box@1.0.0-beta.58
+
+## 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.d.mts

@@ -1,6 +1,6 @@
 import { CustomTheme } from '@dt-dds/themes';
-import { BaseProps, Scale } from '@dt-dds/react-core';
 import { ReactNode } from 'react';
+import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface SelectOptionProps extends BaseProps {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { CustomTheme } from '@dt-dds/themes';
-import { BaseProps, Scale } from '@dt-dds/react-core';
 import { ReactNode } from 'react';
+import { BaseProps, Scale } from '@dt-dds/react-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface SelectOptionProps extends BaseProps {

package/dist/index.js

@@ -64,13 +64,13 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Select.tsx
+var import_react2 = require("react");
+var Downshift = __toESM(require("downshift"));
 var import_react_box = require("@dt-dds/react-box");
 var import_react_icon = require("@dt-dds/react-icon");
 var import_react_icon_button = require("@dt-dds/react-icon-button");
 var import_react_label_field = require("@dt-dds/react-label-field");
 var import_react_tooltip = require("@dt-dds/react-tooltip");
-var Downshift = __toESM(require("downshift"));
-var import_react2 = require("react");
 
 // src/components/SelectOption.tsx
 var import_react_dropdown = require("@dt-dds/react-dropdown");
@@ -105,8 +105,8 @@ var SelectProvider = ({ children, value }) => {
 };
 
 // src/components/SelectOption.styled.ts
-var import_react_checkbox = require("@dt-dds/react-checkbox");
 var import_styled = __toESM(require("@emotion/styled"));
+var import_react_checkbox = require("@dt-dds/react-checkbox");
 var SelectCheckboxStyled = (0, import_styled.default)(import_react_checkbox.Checkbox)`
   ${({ theme }) => `
     pointer-events: none;
@@ -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
         }
@@ -161,9 +159,9 @@ var SelectOption = ({
 };
 
 // src/Select.styled.ts
+var import_styled2 = __toESM(require("@emotion/styled"));
 var import_react_dropdown2 = require("@dt-dds/react-dropdown");
 var import_react_typography = require("@dt-dds/react-typography");
-var import_styled2 = __toESM(require("@emotion/styled"));
 var SelectStyled = import_styled2.default.div`
   position: relative;
   width: 100%;
@@ -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

@@ -31,18 +31,18 @@ var __objRest = (source, exclude) => {
 };
 
 // src/Select.tsx
-import { Box } from "@dt-dds/react-box";
-import { Icon } from "@dt-dds/react-icon";
-import { IconButton } from "@dt-dds/react-icon-button";
-import { LabelField } from "@dt-dds/react-label-field";
-import { Tooltip } from "@dt-dds/react-tooltip";
-import * as Downshift from "downshift";
 import {
   Children,
   isValidElement,
   useMemo,
   useRef
 } from "react";
+import * as Downshift from "downshift";
+import { Box } from "@dt-dds/react-box";
+import { Icon } from "@dt-dds/react-icon";
+import { IconButton } from "@dt-dds/react-icon-button";
+import { LabelField } from "@dt-dds/react-label-field";
+import { Tooltip } from "@dt-dds/react-tooltip";
 
 // src/components/SelectOption.tsx
 import { Dropdown } from "@dt-dds/react-dropdown";
@@ -77,8 +77,8 @@ var SelectProvider = ({ children, value }) => {
 };
 
 // src/components/SelectOption.styled.ts
-import { Checkbox } from "@dt-dds/react-checkbox";
 import styled from "@emotion/styled";
+import { Checkbox } from "@dt-dds/react-checkbox";
 var SelectCheckboxStyled = styled(Checkbox)`
   ${({ theme }) => `
     pointer-events: none;
@@ -120,10 +120,8 @@ var SelectOption = ({
       children: isMulti ? /* @__PURE__ */ jsx2(
         SelectCheckboxStyled,
         {
-          "aria-hidden": "true",
           isChecked: isSelected,
           isDisabled,
-          role: "presentation",
           tabIndex: -1,
           children
         }
@@ -133,9 +131,9 @@ var SelectOption = ({
 };
 
 // src/Select.styled.ts
+import styled2 from "@emotion/styled";
 import { Dropdown as Dropdown2 } from "@dt-dds/react-dropdown";
 import { Typography } from "@dt-dds/react-typography";
-import styled2 from "@emotion/styled";
 var SelectStyled = styled2.div`
   position: relative;
   width: 100%;
@@ -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.70",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,16 +20,16 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-box": "1.0.0-beta.56",
-    "@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-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",
-    "@dt-dds/react-tooltip": "1.0.0-beta.60",
-    "@dt-dds/react-typography": "1.0.0-beta.42",
-    "@dt-dds/themes": "1.0.0-beta.9",
+    "@dt-dds/react-box": "1.0.0-beta.58",
+    "@dt-dds/react-checkbox": "1.0.0-beta.53",
+    "@dt-dds/react-core": "1.0.0-beta.52",
+    "@dt-dds/react-dropdown": "1.0.0-beta.79",
+    "@dt-dds/react-icon": "1.0.0-beta.55",
+    "@dt-dds/react-icon-button": "1.0.0-beta.21",
+    "@dt-dds/react-label-field": "1.0.0-beta.53",
+    "@dt-dds/react-tooltip": "1.0.0-beta.61",
+    "@dt-dds/react-typography": "1.0.0-beta.43",
+    "@dt-dds/themes": "1.0.0-beta.10",
     "downshift": "^9.0.10"
   },
   "devDependencies": {