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

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @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
+
+- feat: make select onChange optional
+- feat: enable custom value label on Select
+
+### Patch Changes
+
+- style: add width 100% to select
+- fix: add optional chaining to isDisabled item
+- Updated dependencies [223664b]
+  - @dt-dds/react-box@1.0.0-beta.56
+  - @dt-dds/react-dropdown@1.0.0-beta.77
+
 ## 1.0.0-beta.67
 
 ### Patch Changes

package/README.md

@@ -69,6 +69,7 @@ export const App = () => {
 | ------------ | --------------------- | ------- | ------------------------------------------------------------ |
 | `children`   | `ReactNode`           | —       | Visible content of the option (the label shown to the user). |
 | `value`      | `string`              | —       | Option value.                                                |
+| `valueLabel` | `ReactNode`           | —       | This is a customizable option label on the input.            |
 | `index`      | `number`              | —       | Option index in the list (used internally by Downshift).     |
 | `isDisabled` | `boolean`             | `false` | Disables the option.                                         |
 | `style`      | `React.CSSProperties` | —       | Inline styles for the option.                                |

package/dist/index.d.mts

@@ -1,18 +1,19 @@
 import { CustomTheme } from '@dt-dds/themes';
 import { BaseProps, Scale } from '@dt-dds/react-core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface SelectOptionProps extends BaseProps {
     value: string;
     index: number;
     isDisabled?: boolean;
+    valueLabel?: ReactNode;
 }
 
 type SelectOptionValue = {
     value: string;
     isDisabled?: boolean;
-    label?: string;
+    label?: ReactNode;
 };
 type SelectVariant = 'outlined' | 'bottom-line';
 type SelectFill = 'default' | 'contrast' | 'light';
@@ -33,12 +34,12 @@ interface BaseSelectProps extends BaseProps {
 interface SingleSelectProps extends BaseSelectProps {
     isMulti?: false;
     value?: string;
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 interface MultiSelectProps extends BaseSelectProps {
     isMulti: true;
     value?: string[];
-    onChange: (value: string[]) => void;
+    onChange?: (value: string[]) => void;
 }
 type SelectProps = SingleSelectProps | MultiSelectProps;
 declare const Select: {

package/dist/index.d.ts

@@ -1,18 +1,19 @@
 import { CustomTheme } from '@dt-dds/themes';
 import { BaseProps, Scale } from '@dt-dds/react-core';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface SelectOptionProps extends BaseProps {
     value: string;
     index: number;
     isDisabled?: boolean;
+    valueLabel?: ReactNode;
 }
 
 type SelectOptionValue = {
     value: string;
     isDisabled?: boolean;
-    label?: string;
+    label?: ReactNode;
 };
 type SelectVariant = 'outlined' | 'bottom-line';
 type SelectFill = 'default' | 'contrast' | 'light';
@@ -33,12 +34,12 @@ interface BaseSelectProps extends BaseProps {
 interface SingleSelectProps extends BaseSelectProps {
     isMulti?: false;
     value?: string;
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 interface MultiSelectProps extends BaseSelectProps {
     isMulti: true;
     value?: string[];
-    onChange: (value: string[]) => void;
+    onChange?: (value: string[]) => void;
 }
 type SelectProps = SingleSelectProps | MultiSelectProps;
 declare const Select: {

package/dist/index.js

@@ -90,9 +90,7 @@ var SelectProvider = ({ children, value }) => {
   const _a = value, { highlightedIndex, selectedItems } = _a, rest = __objRest(_a, ["highlightedIndex", "selectedItems"]);
   const isItemHighlighted = (index) => index === highlightedIndex;
   const isItemSelected = (item) => {
-    return !!selectedItems.find(
-      (selectedItem) => selectedItem.value === item.value
-    );
+    return !!selectedItems.find((selectedItem) => selectedItem.value === item);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     SelectContext.Provider,
@@ -136,7 +134,7 @@ var SelectOption = ({
 }) => {
   const { getItemProps, isItemHighlighted, isItemSelected, isMulti } = useSelectContext();
   const item = { value, isDisabled };
-  const isSelected = isItemSelected(item);
+  const isSelected = isItemSelected(value);
   const isHighlighted = isItemHighlighted(index);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_dropdown.Dropdown.Option,
@@ -150,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
         }
@@ -185,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;
@@ -306,16 +306,17 @@ var Select = ({
   };
   const handleClearSelection = (e) => {
     e.stopPropagation();
-    isMulti && onChange([]);
+    isMulti && (onChange == null ? void 0 : onChange([]));
   };
   const options = (0, import_react2.useMemo)(() => {
     var _a2;
     const tempOptions = import_react2.Children.map(children, (child) => {
+      var _a3, _b, _c;
       if ((0, import_react2.isValidElement)(child) && child.props.value != void 0) {
         return {
           value: child.props.value,
           isDisabled: child.props.isDisabled,
-          label: child.props.children
+          label: (_c = (_a3 = child.props) == null ? void 0 : _a3.valueLabel) != null ? _c : (_b = child.props) == null ? void 0 : _b.children
         };
       }
       return null;
@@ -339,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,
@@ -350,45 +386,20 @@ var Select = ({
   } = useSelect({
     items: options,
     isItemDisabled(item) {
-      return !!item.isDisabled;
+      return !!(item == null ? void 0 : item.isDisabled);
     },
     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(nextValue);
-        return;
-      }
-      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,
@@ -407,9 +418,9 @@ var Select = ({
         import_react_box.Box,
         {
           dataTestId: dataTestId != null ? dataTestId : "select",
-          style: { alignItems: "start", gap: 4 },
+          style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectStyled, { style, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectStyled, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 import_react_label_field.LabelField,
                 __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getLabelProps()), {
@@ -480,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",
@@ -494,6 +505,7 @@ var Select = ({
                 anchorRef,
                 "aria-multiselectable": isMulti,
                 as: "ul",
+                isFocusable: false,
                 isOpen,
                 onClose: closeMenu,
                 children

package/dist/index.mjs

@@ -62,9 +62,7 @@ var SelectProvider = ({ children, value }) => {
   const _a = value, { highlightedIndex, selectedItems } = _a, rest = __objRest(_a, ["highlightedIndex", "selectedItems"]);
   const isItemHighlighted = (index) => index === highlightedIndex;
   const isItemSelected = (item) => {
-    return !!selectedItems.find(
-      (selectedItem) => selectedItem.value === item.value
-    );
+    return !!selectedItems.find((selectedItem) => selectedItem.value === item);
   };
   return /* @__PURE__ */ jsx(
     SelectContext.Provider,
@@ -108,7 +106,7 @@ var SelectOption = ({
 }) => {
   const { getItemProps, isItemHighlighted, isItemSelected, isMulti } = useSelectContext();
   const item = { value, isDisabled };
-  const isSelected = isItemSelected(item);
+  const isSelected = isItemSelected(value);
   const isHighlighted = isItemHighlighted(index);
   return /* @__PURE__ */ jsx2(
     Dropdown.Option,
@@ -122,10 +120,8 @@ var SelectOption = ({
       children: isMulti ? /* @__PURE__ */ jsx2(
         SelectCheckboxStyled,
         {
-          "aria-hidden": "true",
           isChecked: isSelected,
           isDisabled,
-          role: "presentation",
           tabIndex: -1,
           children
         }
@@ -157,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;
@@ -278,16 +278,17 @@ var Select = ({
   };
   const handleClearSelection = (e) => {
     e.stopPropagation();
-    isMulti && onChange([]);
+    isMulti && (onChange == null ? void 0 : onChange([]));
   };
   const options = useMemo(() => {
     var _a2;
     const tempOptions = Children.map(children, (child) => {
+      var _a3, _b, _c;
       if (isValidElement(child) && child.props.value != void 0) {
         return {
           value: child.props.value,
           isDisabled: child.props.isDisabled,
-          label: child.props.children
+          label: (_c = (_a3 = child.props) == null ? void 0 : _a3.valueLabel) != null ? _c : (_b = child.props) == null ? void 0 : _b.children
         };
       }
       return null;
@@ -311,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,
@@ -322,45 +358,20 @@ var Select = ({
   } = useSelect({
     items: options,
     isItemDisabled(item) {
-      return !!item.isDisabled;
+      return !!(item == null ? void 0 : item.isDisabled);
     },
     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(nextValue);
-        return;
-      }
-      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,
@@ -379,9 +390,9 @@ var Select = ({
         Box,
         {
           dataTestId: dataTestId != null ? dataTestId : "select",
-          style: { alignItems: "start", gap: 4 },
+          style: __spreadValues({ alignItems: "start", gap: 4, width: "100%" }, style),
           children: [
-            /* @__PURE__ */ jsxs(SelectStyled, { style, children: [
+            /* @__PURE__ */ jsxs(SelectStyled, { children: [
               /* @__PURE__ */ jsx3(
                 LabelField,
                 __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getLabelProps()), {
@@ -452,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",
@@ -466,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.67",
+  "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.55",
+    "@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.76",
+    "@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",