@dt-dds/react-select 1.0.0-beta.59 → 1.0.0-beta.61

package/dist/index.mjs

@@ -31,25 +31,22 @@ var __objRest = (source, exclude) => {
 };
 
 // src/Select.tsx
-import { useClickOutside } from "@dt-dds/react-core";
+import { Box } from "@dt-dds/react-box";
+import { Dropdown as Dropdown2 } from "@dt-dds/react-dropdown";
 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 { Typography } from "@dt-dds/react-typography";
-import { useSelect } from "downshift";
+import * as Downshift from "downshift";
 import {
-  useRef,
-  useState,
-  useEffect,
   Children,
   isValidElement,
   useMemo,
-  useCallback
+  useRef
 } from "react";
 
 // src/components/SelectOption.tsx
-import { Checkbox } from "@dt-dds/react-checkbox";
+import { Dropdown } from "@dt-dds/react-dropdown";
 
 // src/context/SelectProvider.tsx
 import { createContext, useContext } from "react";
@@ -83,47 +80,22 @@ var SelectProvider = ({ children, value }) => {
 };
 
 // src/components/SelectOption.styled.ts
+import { Checkbox } from "@dt-dds/react-checkbox";
 import styled from "@emotion/styled";
-var SelectOptionStyled = styled.li`
-  display: flex;
-
-  ${({ theme, isMulti, isHighlighted }) => `
-    cursor:pointer;
-    align-items: center;
-    ${!isMulti && `padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50}`};
-    gap: ${isMulti ? theme.spacing.spacing_30 : theme.spacing.spacing_20};
-    background-color: ${isHighlighted && !isMulti ? theme.palette.primary.light : theme.palette.surface.contrast};
-
-    color: ${theme.palette.content.default};
-    ${theme.fontStyles.bodyMdRegular}
+var SelectCheckboxStyled = styled(Checkbox)`
+  ${({ theme }) => `
+    pointer-events: none;
+    padding: ${theme.spacing.spacing_40} ${theme.spacing.spacing_50};
 
-    & > label {
-      ${isMulti && `padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50}`};
-    }
-    
-    &:hover,&:focus-within {
-      background-color: ${theme.palette.primary.light};
+    &[data-selected="true"] span {
+      ${theme.fontStyles.bodyMdBold};
     }
 
-    &[aria-disabled="true"] {
-      cursor: not-allowed;
-      color: ${theme.palette.content.light};
-      &:hover {
-        background-color: ${theme.palette.surface.contrast};
-      }
+    span {
+      color: inherit;
     }
   `}
 `;
-var SelectOptionContentStyled = styled.div`
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 100%;
-
-  ${({ theme, isSelected }) => `
-    ${theme.fontStyles[isSelected ? "bodyMdBold" : "bodyMdRegular"]};
-  `}
-`;
 
 // src/components/SelectOption.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -133,233 +105,197 @@ var SelectOption = ({
   children,
   style,
   value,
-  label,
-  disabled
+  isDisabled = false
 }) => {
   const { getItemProps, isItemHighlighted, isItemSelected, isMulti } = useSelectContext();
-  const item = { value, label, disabled: !!disabled };
+  const item = { value, isDisabled };
   const isSelected = isItemSelected(item);
   const isHighlighted = isItemHighlighted(index);
-  const itemProps = getItemProps({ item, index });
   return /* @__PURE__ */ jsx2(
-    SelectOptionStyled,
+    Dropdown.Option,
     __spreadProps(__spreadValues({
-      "aria-disabled": itemProps["aria-disabled"],
-      "data-testid": dataTestId,
+      dataTestId,
+      isDisabled,
       isHighlighted,
-      isMulti,
-      style
-    }, !isMulti && __spreadProps(__spreadValues({}, itemProps), {
-      "aria-selected": isSelected
-    })), {
+      isSelected,
+      style: __spreadValues(__spreadValues({}, style), isMulti ? { padding: 0 } : {})
+    }, getItemProps({ item, index })), {
       children: isMulti ? /* @__PURE__ */ jsx2(
-        Checkbox,
-        __spreadProps(__spreadValues({
+        SelectCheckboxStyled,
+        {
+          "aria-hidden": "true",
           isChecked: isSelected,
-          isDisabled: itemProps["aria-disabled"]
-        }, itemProps), {
-          children: children || label || value
-        })
-      ) : /* @__PURE__ */ jsx2(SelectOptionContentStyled, { isSelected, children: children || label || value })
+          isDisabled,
+          role: "presentation",
+          tabIndex: -1,
+          children
+        }
+      ) : children
     })
   );
 };
 
 // src/Select.styled.ts
-import { DROPDOWN_MENU_Z_INDEX } from "@dt-dds/react-core";
+import { Typography } from "@dt-dds/react-typography";
 import styled2 from "@emotion/styled";
 var SelectStyled = styled2.div`
   position: relative;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.spacing_30};
 `;
 var getThemedBackgroundFill = (fill, theme) => ({
   default: theme.palette.surface.default,
   contrast: theme.palette.surface.contrast,
   light: theme.palette.surface.light
 })[fill];
-var SelectFieldStyled = styled2.div`
-  display: flex;
-  height: auto;
-  width: 100%;
-  position: relative;
-  flex-direction: column;
-  overflow: hidden;
-`;
-var SelectMenuStyled = styled2.ul`
-  list-style-type: none;
-  position: absolute;
-  z-index: ${DROPDOWN_MENU_Z_INDEX};
-  width: 100%;
-  max-height: 180px;
-  overflow: auto;
-
-  ${({ isOpen, theme }) => `
-    margin-top:${theme.spacing.spacing_20};
-    padding:  ${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
-    background-color: ${theme.palette.surface.contrast};
-    display: ${isOpen ? "block" : "none"};
-    border-radius: ${theme.shape.formField};
-    box-shadow: ${theme.shadows.elevation_200};
-  `}
-`;
-var SelectValueContainerStyled = styled2.div`
-  display: flex;
-  flex: 1;
-  align-self: end;
-  overflow: hidden;
-`;
-var SelectValueStyled = styled2.div`
+var TypographyValueStyled = styled2(Typography, {
+  shouldForwardProp: (prop) => prop !== "scale" && prop !== "isFloatingLabel"
+})`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  ${({ theme }) => `
-    ${theme.fontStyles.bodyMdRegular}
-    color: ${theme.palette.content.default};
+  ${({ 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};`}
   `}
 `;
 var SelectContainerStyled = styled2.div`
-  transition: all 0.2s ease-in-out;
+  transition: border 0.2s ease-in-out;
   width: 100%;
-  height: 54px;
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
 
   ${({
   theme,
-  hasError,
-  disabled,
   isOpen = false,
   variant = "outlined",
-  fill = "default"
+  fill = "default",
+  scale
 }) => `
     ${theme.fontStyles.bodyMdRegular}
-    color: ${disabled ? theme.palette.content.light : theme.palette.content.default};
-    padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_40};
-    gap: ${theme.spacing.spacing_30} ;
+    color: ${theme.palette.content.default};
+    padding: ${scale === "standard" ? theme.spacing.spacing_40 : `${theme.spacing.spacing_30} ${theme.spacing.spacing_40}`};
+    gap: ${theme.spacing.spacing_30};
     background-color: ${getThemedBackgroundFill(fill, theme)};
     border-radius: ${theme.shape.formField};
-    cursor: ${disabled ? "not-allowed" : "pointer"};
+    cursor: pointer;
+    user-select: none;
+
+
 
     border-width: ${variant === "outlined" ? "1px" : "0 0 1px"};
-      border-color: ${isOpen ? theme.palette.content.dark : theme.palette.border.medium};
-      border-style: solid;
+    border-color: ${isOpen ? theme.palette.informative.default : theme.palette.border.medium};
+    border-style: solid;
+
+    &:not([disabled]){
+      &:focus-visible {
+        outline: 2px solid ${theme.palette.primary.default};
+        outline-offset: 1px; 
+      }
 
-      &:focus, &:hover {
-        border-color: ${hasError ? theme.palette.error.default : theme.palette.content.dark};
+      &:not([aria-invalid="true"]){
+        &:focus-visible, &:hover {
+          border-color: ${theme.palette.informative.default};
+        }
       }
 
-      ${hasError && `border-color: ${theme.palette.error.default}`};
+      &[aria-invalid="true"]{
+        border-color: ${theme.palette.error.default};
+
+        i {
+          color: ${theme.palette.error.default}
+        } 
+      }
+    }
+
+    &[disabled] {
+      color: ${theme.palette.content.light};
+      cursor: not-allowed;
+
+      i {
+        color: inherit;
+      }
+    }
   `};
 `;
 var SelectActionContainerStyled = styled2.div`
   display: flex;
+
+  ${({ scale, hasItems, isFloatingLabel, theme }) => `
+    gap: ${theme.spacing.spacing_30};
+
+    ${(!hasItems || !isFloatingLabel) && `padding-block: ${scale === "standard" ? theme.spacing.spacing_20 : theme.spacing.spacing_10}`}
+  `}
 `;
-var HelperSelectFieldMessageStyled = styled2.div`
+var TypographyHelperTextStyled = styled2(Typography)`
   ${({ theme }) => `
-    padding-left: ${theme.spacing.spacing_50};
+    padding-left: ${theme.spacing.spacing_40};
   `}
 `;
 
 // src/Select.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var createOptionObject = (element) => {
-  return {
-    value: element.props.value,
-    label: element.props.label,
-    disabled: !!element.props.disabled
-  };
-};
-var itemToString = (item) => {
-  if (item) {
-    return item.label || item.value;
-  }
-  return "";
-};
+var { useSelect } = Downshift;
+var helperTextId = "helper-text-id";
 var Select = ({
   dataTestId,
   style,
-  helperText = "",
-  hasError = false,
-  initialValue = "",
+  value,
   label,
-  isMulti = false,
+  isMulti,
   isRequired,
-  errorMessage,
   children,
   isDisabled,
+  labelIcon,
+  hasError = false,
+  helperText = "",
   variant = "outlined",
   fill = "default",
+  isFloatingLabel = true,
+  scale = "standard",
   onChange
 }) => {
-  const [selectedItems, setSelectedItems] = useState([]);
-  const ref = useRef(null);
-  const changeSelectedItems = useCallback(
-    (newItems, skipOnChangeTrigger = false) => {
-      var _a;
-      setSelectedItems(newItems);
-      if (onChange && !skipOnChangeTrigger) {
-        if (isMulti) {
-          const values = newItems.map((newSelectedItem) => newSelectedItem.value).filter((value) => Boolean(value));
-          onChange(values);
-        } else {
-          const value = ((_a = newItems[0]) == null ? void 0 : _a.value) || "";
-          onChange(value);
-        }
-      }
-    },
-    [setSelectedItems, isMulti, onChange]
-  );
-  const clearSelection = (event) => {
-    event.stopPropagation();
-    changeSelectedItems([]);
+  var _a;
+  const anchorRef = useRef(null);
+  const handleClearKeyDown = (e) => {
+    if (e.code === "Enter" || e.code === "Space") {
+      handleClearSelection(e);
+    }
+  };
+  const handleClearSelection = (e) => {
+    e.stopPropagation();
+    isMulti && onChange([]);
   };
-  const helperMessage = hasError && errorMessage ? errorMessage : helperText;
   const options = useMemo(() => {
+    var _a2;
     const tempOptions = Children.map(children, (child) => {
       if (isValidElement(child) && child.props.value != void 0) {
-        return createOptionObject(child);
+        return {
+          value: child.props.value,
+          isDisabled: child.props.isDisabled,
+          label: child.props.children
+        };
       }
       return null;
     });
-    return tempOptions ? tempOptions.filter(Boolean) : [];
+    return (_a2 = tempOptions == null ? void 0 : tempOptions.filter(Boolean)) != null ? _a2 : [];
   }, [children]);
-  const validSelectedItems = useMemo(() => {
-    const isSelectedItemValid = (selectedItem) => {
-      return !!options.find((option) => option.value === selectedItem.value);
-    };
-    return selectedItems.filter(isSelectedItemValid);
-  }, [options, selectedItems]);
-  useEffect(() => {
-    const getInitialOptions = () => {
-      if (Array.isArray(initialValue)) {
-        return initialValue.map(
-          (value) => options.find((option) => option.value === value)
-        ).filter((option) => Boolean(option));
-      } else {
-        return options.find((option) => option.value === initialValue);
-      }
-    };
-    const initalOptions = getInitialOptions();
-    if (!initialValue || !initalOptions || Array.isArray(initalOptions) && initalOptions.length === 0) {
-      changeSelectedItems([], true);
-    } else {
-      if (Array.isArray(initalOptions)) {
-        changeSelectedItems(isMulti ? initalOptions : [initalOptions[0]], true);
-      } else {
-        changeSelectedItems([initalOptions], true);
-      }
-    }
-  }, [isMulti, initialValue, options, changeSelectedItems]);
-  useEffect(() => {
-    if (options.length === 1 && selectedItems.length === 0) {
-      changeSelectedItems([options[0]]);
-    }
-    if (validSelectedItems.length !== selectedItems.length) {
-      changeSelectedItems(validSelectedItems);
-    }
-  }, [options, selectedItems, validSelectedItems, changeSelectedItems]);
+  const selectedOptionsSet = useMemo(
+    () => new Set(value ? [value].flat() : []),
+    [value]
+  );
+  const selectedItems = useMemo(
+    () => options.filter((o) => selectedOptionsSet.has(o.value)),
+    [options, selectedOptionsSet]
+  );
+  const hasSelectedItems = !!(selectedItems == null ? void 0 : selectedItems.length);
+  const selectedValueContainerText = () => {
+    var _a2;
+    return selectedItems.length > 1 ? `${selectedItems.length} options selected` : (_a2 = selectedItems[0]) == null ? void 0 : _a2.label;
+  };
   const {
     isOpen,
     closeMenu,
@@ -371,122 +307,159 @@ var Select = ({
   } = useSelect({
     items: options,
     isItemDisabled(item) {
-      return !!item.disabled;
+      return !!item.isDisabled;
     },
-    itemToString,
-    stateReducer: (state, actionAndChanges) => {
+    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.ToggleButtonKeyDownEnter:
-        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-        case useSelect.stateChangeTypes.ItemClick:
         case useSelect.stateChangeTypes.ToggleButtonBlur:
           return __spreadProps(__spreadValues({}, changes), {
-            isOpen: isMulti,
+            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;
       }
     },
-    selectedItem: null,
     onSelectedItemChange: ({ selectedItem }) => {
-      let newSelectedItems = [];
-      if (!isMulti) {
-        if (selectedItem) {
-          newSelectedItems = [selectedItem];
-        }
-      } else {
-        if (selectedItem) {
-          if (selectedItems.includes(selectedItem)) {
-            newSelectedItems = selectedItems.filter(
-              (item) => item !== selectedItem
-            );
-          } else {
-            newSelectedItems = [...selectedItems, selectedItem];
-          }
-        } else {
-          newSelectedItems = selectedItems;
-        }
+      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;
       }
-      changeSelectedItems(newSelectedItems);
+      onChange(selectedItem.value);
     }
   });
-  const hasSelectedItems = !!selectedItems && !!selectedItems.length;
-  const selectedValueContainerText = () => {
-    return selectedItems.length > 1 ? `${selectedItems.length} options selected` : selectedItems[0].label || selectedItems[0].value;
-  };
-  useClickOutside({ ref, handler: () => closeMenu() });
   const disabled = isDisabled || options.length === 1;
+  const toggleProps = getToggleButtonProps({
+    disabled,
+    tabIndex: disabled ? -1 : 0,
+    ref: anchorRef
+  });
   return /* @__PURE__ */ jsx3(
     SelectProvider,
     {
-      value: { highlightedIndex, getItemProps, selectedItems, isMulti },
-      children: /* @__PURE__ */ jsxs(SelectStyled, { "data-testid": dataTestId, ref, style, children: [
-        /* @__PURE__ */ jsx3(SelectFieldStyled, { children: /* @__PURE__ */ jsxs(
-          SelectContainerStyled,
-          __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled })), {
-            "data-testid": "select-container",
-            fill,
-            hasError,
-            isOpen,
-            variant,
-            children: [
-              /* @__PURE__ */ jsxs(SelectValueContainerStyled, { children: [
-                /* @__PURE__ */ jsx3(
-                  LabelField,
-                  __spreadProps(__spreadValues({}, getLabelProps()), {
-                    hasError,
-                    isActive: hasSelectedItems,
-                    isCentered: true,
-                    isDisabled: disabled,
-                    isRequired,
-                    children: label
-                  })
-                ),
-                hasSelectedItems ? /* @__PURE__ */ jsx3(SelectValueStyled, { children: selectedValueContainerText() }) : null
-              ] }),
-              /* @__PURE__ */ jsxs(SelectActionContainerStyled, { children: [
-                isMulti && hasSelectedItems ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-                  /* @__PURE__ */ jsx3(IconButton, { onClick: clearSelection, children: /* @__PURE__ */ jsx3(
-                    Icon,
-                    {
-                      code: "close",
-                      dataTestId: "clear-selection",
-                      size: "small"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx3(Tooltip.Content, { children: "Clear all" })
-                ] }) : null,
-                /* @__PURE__ */ jsx3(
-                  Icon,
-                  {
-                    code: isOpen ? "expand_less" : "expand_more",
-                    size: "small"
-                  }
-                )
-              ] })
-            ]
-          })
-        ) }),
-        /* @__PURE__ */ jsx3(
-          SelectMenuStyled,
-          __spreadProps(__spreadValues({}, getMenuProps()), {
-            "aria-multiselectable": isMulti,
-            isOpen,
-            children: isOpen ? children : null
-          })
-        ),
-        helperMessage ? /* @__PURE__ */ jsx3(HelperSelectFieldMessageStyled, { children: /* @__PURE__ */ jsx3(
-          Typography,
-          {
-            color: hasError ? "error.default" : "content.light",
-            element: "span",
-            fontStyles: "bodySmRegular",
-            children: helperMessage
-          }
-        ) }) : null
-      ] })
+      value: {
+        highlightedIndex,
+        getItemProps,
+        selectedItems,
+        isMulti: !!isMulti
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          dataTestId: dataTestId != null ? dataTestId : "select",
+          style: { alignItems: "start", gap: 4 },
+          children: [
+            /* @__PURE__ */ jsxs(SelectStyled, { style, children: [
+              /* @__PURE__ */ jsx3(
+                LabelField,
+                __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getLabelProps()), {
+                  hasError,
+                  icon: labelIcon,
+                  isActive: isFloatingLabel ? hasSelectedItems : isOpen,
+                  isCentered: true,
+                  isDisabled: disabled,
+                  isFloating: isFloatingLabel,
+                  isRequired,
+                  scale
+                }), isFloatingLabel && {
+                  style: { pointerEvents: "none" }
+                }), {
+                  children: label
+                })
+              ),
+              /* @__PURE__ */ jsxs(
+                SelectContainerStyled,
+                __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, toggleProps), !!helperText && { "aria-describedby": helperTextId }), hasError && { "aria-invalid": hasError }), {
+                  "data-testid": "select-container",
+                  fill,
+                  isOpen,
+                  scale,
+                  variant,
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      TypographyValueStyled,
+                      __spreadProps(__spreadValues({
+                        color: "content.default",
+                        dataTestId: "select-value",
+                        element: "span",
+                        fontStyles: "bodyMdRegular",
+                        isFloatingLabel,
+                        scale
+                      }, disabled && { color: "content.light" }), {
+                        children: selectedValueContainerText()
+                      })
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      SelectActionContainerStyled,
+                      {
+                        hasItems: hasSelectedItems,
+                        isFloatingLabel,
+                        scale,
+                        children: [
+                          isMulti && hasSelectedItems ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                            /* @__PURE__ */ jsx3(
+                              IconButton,
+                              {
+                                dataTestId: "clear-selection",
+                                onClick: handleClearSelection,
+                                onKeyDown: handleClearKeyDown,
+                                onMouseDown: (e) => e.preventDefault(),
+                                children: /* @__PURE__ */ jsx3(Icon, { code: "close_small" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx3(Tooltip.Content, { children: "Clear all" })
+                          ] }) : null,
+                          /* @__PURE__ */ jsx3(Icon, { code: isOpen ? "expand_less" : "expand_more" })
+                        ]
+                      }
+                    )
+                  ]
+                })
+              )
+            ] }),
+            helperText ? /* @__PURE__ */ jsx3(
+              TypographyHelperTextStyled,
+              {
+                color: isDisabled ? "content.light" : hasError ? "error.default" : "content.medium",
+                dataTestId: "select-helper-text",
+                element: "span",
+                fontStyles: "bodySmRegular",
+                id: helperTextId,
+                children: helperText
+              }
+            ) : null,
+            /* @__PURE__ */ jsx3(
+              Dropdown2,
+              __spreadProps(__spreadValues({}, getMenuProps()), {
+                anchorRef,
+                "aria-multiselectable": isMulti,
+                as: "ul",
+                isOpen,
+                onClose: closeMenu,
+                style: { maxHeight: 200 },
+                children
+              })
+            )
+          ]
+        }
+      )
     }
   );
 };