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

package/dist/index.js

@@ -0,0 +1,508 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var select_exports = {};
+__export(select_exports, {
+  Select: () => Select
+});
+module.exports = __toCommonJS(select_exports);
+
+// src/Select.tsx
+var import_react_core2 = require("@dt-dds/react-core");
+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 import_react_typography = require("@dt-dds/react-typography");
+var import_downshift = require("downshift");
+var import_react2 = require("react");
+
+// src/components/SelectOption.tsx
+var import_react_checkbox = require("@dt-dds/react-checkbox");
+
+// src/context/SelectProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SelectContext = (0, import_react.createContext)(void 0);
+var useSelectContext = () => {
+  const context = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    SelectContext.Provider,
+    {
+      value: __spreadValues({
+        isItemHighlighted,
+        isItemSelected
+      }, rest),
+      children
+    }
+  );
+};
+
+// src/components/SelectOption.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var SelectOptionStyled = import_styled.default.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 = import_styled.default.div`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+
+  ${({ theme, isSelected }) => `
+    ${theme.fontStyles[isSelected ? "body2Bold" : "body2"]};
+  `}
+`;
+
+// src/components/SelectOption.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
+    SelectOptionStyled,
+    __spreadProps(__spreadValues({
+      "aria-disabled": itemProps["aria-disabled"],
+      "data-testid": dataTestId,
+      isHighlighted,
+      isMulti,
+      style
+    }, !isMulti && __spreadProps(__spreadValues({}, itemProps), {
+      "aria-selected": isSelected
+    })), {
+      children: isMulti ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_checkbox.Checkbox,
+        __spreadProps(__spreadValues({
+          isChecked: isSelected,
+          isDisabled: itemProps["aria-disabled"]
+        }, itemProps), {
+          children: children || label || value
+        })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectOptionContentStyled, { isSelected, children: children || label || value })
+    })
+  );
+};
+
+// src/Select.styled.ts
+var import_react_core = require("@dt-dds/react-core");
+var import_styled2 = __toESM(require("@emotion/styled"));
+var SelectStyled = import_styled2.default.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 = import_styled2.default.div`
+  display: flex;
+  height: auto;
+  width: 100%;
+  position: relative;
+  flex-direction: column;
+  overflow: hidden;
+`;
+var SelectMenuStyled = import_styled2.default.ul`
+  list-style-type: none;
+  position: absolute;
+  z-index: ${import_react_core.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 = import_styled2.default.div`
+  display: flex;
+  flex: 1;
+  align-self: end;
+  overflow: hidden;
+`;
+var SelectValueStyled = import_styled2.default.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  ${({ theme }) => `
+    ${theme.fontStyles.body2}
+    color: ${theme.palette.content.default};
+  `}
+`;
+var SelectContainerStyled = import_styled2.default.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 = import_styled2.default.div`
+  display: flex;
+`;
+var HelperSelectFieldMessageStyled = import_styled2.default.div`
+  ${({ theme }) => `
+    padding-left: ${theme.spacing["2xs"]};
+  `}
+`;
+
+// src/Select.tsx
+var import_jsx_runtime3 = require("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] = (0, import_react2.useState)([]);
+  const ref = (0, import_react2.useRef)(null);
+  const changeSelectedItems = (0, import_react2.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 = (0, import_react2.useMemo)(() => {
+    const tempOptions = import_react2.Children.map(children, (child) => {
+      if ((0, import_react2.isValidElement)(child) && child.props.value != void 0) {
+        return createOptionObject(child);
+      }
+      return null;
+    });
+    return tempOptions ? tempOptions.filter(Boolean) : [];
+  }, [children]);
+  const validSelectedItems = (0, import_react2.useMemo)(() => {
+    const isSelectedItemValid = (selectedItem) => {
+      return !!options.find((option) => option.value === selectedItem.value);
+    };
+    return selectedItems.filter(isSelectedItemValid);
+  }, [options, selectedItems]);
+  (0, import_react2.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]);
+  (0, import_react2.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
+  } = (0, import_downshift.useSelect)({
+    items: options,
+    isItemDisabled(item) {
+      return !!item.disabled;
+    },
+    itemToString,
+    stateReducer: (state, actionAndChanges) => {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case import_downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case import_downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+        case import_downshift.useSelect.stateChangeTypes.ItemClick:
+        case import_downshift.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;
+  };
+  (0, import_react_core2.useClickOutside)({ ref, handler: () => closeMenu() });
+  const disabled = isDisabled || options.length === 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    SelectProvider,
+    {
+      value: { highlightedIndex, getItemProps, selectedItems, isMulti },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectStyled, { "data-testid": dataTestId, ref, style, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectFieldStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          SelectContainerStyled,
+          __spreadProps(__spreadValues({}, getToggleButtonProps({ disabled })), {
+            "data-testid": "select-container",
+            fill,
+            hasError,
+            isOpen,
+            variant,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectValueContainerStyled, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_react_label_field.LabelField,
+                  __spreadProps(__spreadValues({}, getLabelProps()), {
+                    hasError,
+                    isActive: hasSelectedItems,
+                    isDisabled: disabled,
+                    isRequired,
+                    children: label
+                  })
+                ),
+                hasSelectedItems ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectValueStyled, { children: selectedValueContainerText() }) : null
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(SelectActionContainerStyled, { children: [
+                isMulti && hasSelectedItems ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_tooltip.Tooltip, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icon_button.IconButton, { onClick: clearSelection, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icon.Icon, { code: "close", dataTestId: "clear-selection", size: "s" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_tooltip.Tooltip.Content, { children: "Clear all" })
+                ] }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icon.Icon, { code: isOpen ? "expand_less" : "expand_more", size: "s" })
+              ] })
+            ]
+          })
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          SelectMenuStyled,
+          __spreadProps(__spreadValues({}, getMenuProps()), {
+            "aria-multiselectable": isMulti,
+            isOpen,
+            children: isOpen ? children : null
+          })
+        ),
+        helperMessage ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HelperSelectFieldMessageStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react_typography.Typography,
+          {
+            color: hasError ? "error.default" : "content.light",
+            element: "span",
+            fontStyles: "body3",
+            children: helperMessage
+          }
+        ) }) : null
+      ] })
+    }
+  );
+};
+Select.Option = SelectOption;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Select
+});