@dt-dds/react-select 1.0.0-beta.46

package/dist/index.mjs

@@ -0,0 +1,482 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/Select.tsx
+import { useClickOutside } from "@dt-dds/react-core";
+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 {
+  useRef,
+  useState,
+  useEffect,
+  Children,
+  isValidElement,
+  useMemo,
+  useCallback
+} from "react";
+
+// src/components/SelectOption.tsx
+import { Checkbox } from "@dt-dds/react-checkbox";
+
+// src/context/SelectProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var SelectContext = createContext(void 0);
+var useSelectContext = () => {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error("useSelectContext must be used within a SelectProvider");
+  }
+  return context;
+};
+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 /* @__PURE__ */ jsx(
+    SelectContext.Provider,
+    {
+      value: __spreadValues({
+        isItemHighlighted,
+        isItemSelected
+      }, rest),
+      children
+    }
+  );
+};
+
+// src/components/SelectOption.styled.ts
+import styled from "@emotion/styled";
+var SelectOptionStyled = styled.li`
+  display: flex;
+
+  ${({ theme, isMulti, isHighlighted }) => `
+    cursor:pointer;
+    align-items: center;
+    ${!isMulti && `padding: ${theme.spacing["4xs"]} ${theme.spacing["2xs"]}`};
+    gap: ${isMulti ? theme.spacing["4xs"] : theme.spacing["5xs"]};
+    background-color: ${isHighlighted && !isMulti ? theme.palette.primary.light : theme.palette.surface.contrast};
+
+    color: ${theme.palette.content.default};
+    ${theme.fontStyles.body2}
+
+    & > label {
+      ${isMulti && `padding: ${theme.spacing["4xs"]} ${theme.spacing["2xs"]}`};
+    }
+    
+    &:hover,&:focus-within {
+      background-color: ${theme.palette.primary.light};
+    }
+
+    &[aria-disabled="true"] {
+      cursor: not-allowed;
+      color: ${theme.palette.content.light};
+      &:hover {
+        background-color: ${theme.palette.surface.contrast};
+      }
+    }
+  `}
+`;
+var SelectOptionContentStyled = styled.div`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+
+  ${({ theme, isSelected }) => `
+    ${theme.fontStyles[isSelected ? "body2Bold" : "body2"]};
+  `}
+`;
+
+// src/components/SelectOption.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SelectOption = ({
+  dataTestId,
+  index,
+  children,
+  style,
+  value,
+  label,
+  disabled
+}) => {
+  const { getItemProps, isItemHighlighted, isItemSelected, isMulti } = useSelectContext();
+  const item = { value, label, disabled: !!disabled };
+  const isSelected = isItemSelected(item);
+  const isHighlighted = isItemHighlighted(index);
+  const itemProps = getItemProps({ item, index });
+  return /* @__PURE__ */ jsx2(
+    SelectOptionStyled,
+    __spreadProps(__spreadValues({
+      "aria-disabled": itemProps["aria-disabled"],
+      "data-testid": dataTestId,
+      isHighlighted,
+      isMulti,
+      style
+    }, !isMulti && __spreadProps(__spreadValues({}, itemProps), {
+      "aria-selected": isSelected
+    })), {
+      children: isMulti ? /* @__PURE__ */ jsx2(
+        Checkbox,
+        __spreadProps(__spreadValues({
+          isChecked: isSelected,
+          isDisabled: itemProps["aria-disabled"]
+        }, itemProps), {
+          children: children || label || value
+        })
+      ) : /* @__PURE__ */ jsx2(SelectOptionContentStyled, { isSelected, children: children || label || value })
+    })
+  );
+};
+
+// src/Select.styled.ts
+import { DROPDOWN_MENU_Z_INDEX } from "@dt-dds/react-core";
+import styled2 from "@emotion/styled";
+var SelectStyled = styled2.div`
+  position: relative;
+  width: 100%;
+`;
+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["5xs"]};
+    padding:  ${theme.spacing["2xs"]} ${theme.spacing.none};
+    background-color: ${theme.palette.surface.contrast};
+    display: ${isOpen ? "block" : "none"};
+    border-radius: ${theme.shape.formField};
+    box-shadow: ${theme.shadows.s};
+  `}
+`;
+var SelectValueContainerStyled = styled2.div`
+  display: flex;
+  flex: 1;
+  align-self: end;
+  overflow: hidden;
+`;
+var SelectValueStyled = styled2.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  ${({ theme }) => `
+    ${theme.fontStyles.body2}
+    color: ${theme.palette.content.default};
+  `}
+`;
+var SelectContainerStyled = styled2.div`
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({
+  theme,
+  hasError,
+  disabled,
+  isOpen = false,
+  variant = "outlined",
+  fill = "default"
+}) => `
+    ${theme.fontStyles.body2}
+    color: ${disabled ? theme.palette.content.light : theme.palette.content.default};
+    padding: ${theme.spacing["4xs"]} ${theme.spacing["3xs"]};
+    gap: ${theme.spacing["4xs"]} ;
+    background-color: ${getThemedBackgroundFill(fill, theme)};
+    border-radius: ${theme.shape.formField};
+    cursor: ${disabled ? "not-allowed" : "pointer"};
+
+    border-width: ${variant === "outlined" ? "1px" : "0 0 1px"};
+      border-color: ${isOpen ? theme.palette.content.dark : theme.palette.border.medium};
+      border-style: solid;
+
+      &:focus, &:hover {
+        border-color: ${hasError ? theme.palette.error.default : theme.palette.content.dark};
+      }
+
+      ${hasError && `border-color: ${theme.palette.error.default}`};
+  `};
+`;
+var SelectActionContainerStyled = styled2.div`
+  display: flex;
+`;
+var HelperSelectFieldMessageStyled = styled2.div`
+  ${({ theme }) => `
+    padding-left: ${theme.spacing["2xs"]};
+  `}
+`;
+
+// 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 Select = ({
+  dataTestId,
+  style,
+  helperText = "",
+  hasError = false,
+  initialValue = "",
+  label,
+  isMulti = false,
+  isRequired,
+  errorMessage,
+  children,
+  isDisabled,
+  variant = "outlined",
+  fill = "default",
+  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([]);
+  };
+  const helperMessage = hasError && errorMessage ? errorMessage : helperText;
+  const options = useMemo(() => {
+    const tempOptions = Children.map(children, (child) => {
+      if (isValidElement(child) && child.props.value != void 0) {
+        return createOptionObject(child);
+      }
+      return null;
+    });
+    return tempOptions ? tempOptions.filter(Boolean) : [];
+  }, [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 {
+    isOpen,
+    closeMenu,
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    highlightedIndex,
+    getItemProps
+  } = useSelect({
+    items: options,
+    isItemDisabled(item) {
+      return !!item.disabled;
+    },
+    itemToString,
+    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,
+            highlightedIndex: state.highlightedIndex
+          });
+        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;
+        }
+      }
+      changeSelectedItems(newSelectedItems);
+    }
+  });
+  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;
+  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,
+                    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: "s" }) }),
+                  /* @__PURE__ */ jsx3(Tooltip.Content, { children: "Clear all" })
+                ] }) : null,
+                /* @__PURE__ */ jsx3(Icon, { code: isOpen ? "expand_less" : "expand_more", size: "s" })
+              ] })
+            ]
+          })
+        ) }),
+        /* @__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: "body3",
+            children: helperMessage
+          }
+        ) }) : null
+      ] })
+    }
+  );
+};
+Select.Option = SelectOption;
+export {
+  Select
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@dt-dds/react-select",
+  "version": "1.0.0-beta.46",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-checkbox": "1.0.0-beta.40",
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "@dt-dds/react-icon": "1.0.0-beta.42",
+    "@dt-dds/react-icon-button": "1.0.0-beta.9",
+    "@dt-dds/react-label-field": "1.0.0-beta.37",
+    "@dt-dds/react-tooltip": "1.0.0-beta.49",
+    "@dt-dds/react-typography": "1.0.0-beta.32",
+    "downshift": "^9.0.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}