@dt-dds/react-dropdown 1.0.0-beta.31

package/dist/index.js

@@ -0,0 +1,453 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 dropdown_exports = {};
+__export(dropdown_exports, {
+  Dropdown: () => Dropdown_default,
+  DropdownContainer: () => DropdownContainer,
+  DropdownContext: () => DropdownContext,
+  DropdownContextProvider: () => DropdownContextProvider,
+  DropdownDetail: () => DropdownDetail,
+  DropdownMenu: () => DropdownMenu,
+  DropdownOption: () => DropdownOption,
+  DropdownSelect: () => DropdownSelect,
+  useDropdownContext: () => useDropdownContext
+});
+module.exports = __toCommonJS(dropdown_exports);
+
+// src/components/detail/DropdownDetail.tsx
+var import_react_typography = require("@dt-dds/react-typography");
+
+// src/components/detail/DropdownDetail.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var DropdownDetailStyled = import_styled.default.div`
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  margin-top: 4px;
+`;
+
+// src/components/detail/DropdownDetail.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DropdownDetail = ({
+  dataTestId,
+  isDisabled = false,
+  hasError = false,
+  children = ""
+}) => {
+  const messageColor = isDisabled ? "content.light" : "content.medium";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownDetailStyled, { "data-testid": dataTestId != null ? dataTestId : "dropdown-text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_typography.Typography,
+    {
+      color: hasError ? "error.default" : messageColor,
+      element: "span",
+      fontStyles: "body3",
+      children
+    }
+  ) });
+};
+
+// src/context/DropdownProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_VALUE = {
+  state: {
+    text: "",
+    value: ""
+  },
+  isOpen: false,
+  setState: () => null,
+  setIsOpen: () => null
+};
+var DropdownContext = (0, import_react.createContext)(DEFAULT_VALUE);
+var DropdownContextProvider = ({
+  children,
+  defaultValue,
+  name
+}) => {
+  const [state, setState] = (0, import_react.useState)(defaultValue != null ? defaultValue : DEFAULT_VALUE.state);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(DEFAULT_VALUE.isOpen);
+  (0, import_react.useEffect)(() => defaultValue && setState(defaultValue), [defaultValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    DropdownContext.Provider,
+    {
+      value: {
+        state,
+        setState,
+        isOpen,
+        setIsOpen,
+        name
+      },
+      children
+    }
+  );
+};
+var useDropdownContext = () => {
+  const context = (0, import_react.useContext)(DropdownContext);
+  if (!context) {
+    throw new Error(
+      "Dropdown compound components cannot be rendered outside the Dropdown component"
+    );
+  }
+  return context;
+};
+
+// src/components/option/DropdownOption.styled.ts
+var import_styled2 = __toESM(require("@emotion/styled"));
+var DropdownOptionStyled = import_styled2.default.li`
+  ${({ theme, disabled, isSelected }) => `
+    ${theme.fontStyles[isSelected ? "body2Bold" : "body2"]};
+    color: ${theme.palette.content.default};
+    list-style: none;
+    padding: ${theme.spacing["4xs"]} ${theme.spacing["2xs"]};
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+
+    &:hover {
+      background: ${disabled ? theme.palette.surface.light : theme.palette.primary.light};
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+    }
+
+    ${disabled && `
+        color: ${theme.palette.content.light};
+        background: ${theme.palette.surface.light};
+      `}
+  `}
+`;
+
+// src/components/option/DropdownOption.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DropdownOption = ({
+  dataTestId,
+  option,
+  children,
+  style,
+  isDisabled,
+  onClick
+}) => {
+  var _a;
+  const { state, setState, setIsOpen, name } = useDropdownContext();
+  const testId = dataTestId != null ? dataTestId : `dropdown-option-${option.value}`;
+  const value = {
+    text: (_a = option.text) != null ? _a : option.value,
+    value: option.value
+  };
+  const handleClick = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    setIsOpen(false);
+    setState(value);
+    onClick && onClick(option.value, name, event);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    DropdownOptionStyled,
+    {
+      "data-testid": testId,
+      disabled: isDisabled,
+      isSelected: state.value === option.value,
+      onClick: handleClick,
+      role: "option",
+      style,
+      children
+    },
+    option.value
+  );
+};
+
+// src/components/select/DropdownSelect.tsx
+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_typography2 = require("@dt-dds/react-typography");
+var import_react2 = require("@emotion/react");
+var import_react3 = require("react");
+
+// src/components/menu/DropdownMenu.styled.ts
+var import_react_core = require("@dt-dds/react-core");
+var import_styled3 = __toESM(require("@emotion/styled"));
+var DropdownMenuStyled = import_styled3.default.ul`
+  ${({ theme }) => `
+    background: ${theme.palette.surface.contrast};
+    border: 1px solid ${theme.palette.border.default};
+    border-radius: ${theme.shape.dropdown};
+    width: 100%;
+    padding:${theme.spacing["2xs"]} ${theme.spacing.none};
+    margin: ${theme.spacing["5xs"]} ${theme.spacing.none};
+    position: absolute;
+    right: 0;
+    z-index: ${import_react_core.DROPDOWN_MENU_Z_INDEX};
+    max-height: 180px;
+    overflow: auto;
+  `}
+`;
+
+// src/components/menu/DropdownMenu.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DropdownMenu = ({ children, dataTestId, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    DropdownMenuStyled,
+    {
+      "data-testid": `${dataTestId ? dataTestId + "-" : ""}menu`,
+      style,
+      children
+    }
+  );
+};
+
+// src/components/select/DropdownSelect.styled.ts
+var import_styled4 = __toESM(require("@emotion/styled"));
+var getThemedBackgroundFill = (fill, theme) => ({
+  default: theme.palette.surface.default,
+  contrast: theme.palette.surface.contrast,
+  light: theme.palette.surface.light
+})[fill];
+var SelectDropdownStyled = import_styled4.default.button`
+  ${({
+  theme,
+  hasBorder = true,
+  hasError = false,
+  isOpen = false,
+  variant = "outlined",
+  fill = "default"
+}) => {
+  const borderColor = theme.palette.border.medium;
+  const activeBorderColor = theme.palette.content.dark;
+  const errorBorderColor = theme.palette.error.default;
+  return `
+      background: ${theme.palette.surface.contrast};
+      padding: ${theme.spacing.xsmall} ${hasBorder ? theme.spacing.xmedium : "0"};
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      text-align: left;
+      width: 100%;
+      height: 53px;
+      cursor: pointer;
+      outline: none;
+
+      background-color: ${getThemedBackgroundFill(fill, theme)};
+
+      border-width: ${variant === "outlined" ? "1px" : "0 0 1px"};
+      border-color: ${isOpen ? activeBorderColor : borderColor};
+      border-style: solid;
+
+      &:focus, &:hover {
+        border-color: ${hasError ? errorBorderColor : activeBorderColor};
+      }
+
+      ${hasError && `border-color: ${errorBorderColor}`};
+      ${!hasBorder && "border: none"};
+
+      &:disabled {
+        pointer-events: none;
+      }
+    `;
+}}
+`;
+
+// src/components/select/DropdownSelect.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DropdownSelect = ({
+  children,
+  label,
+  style,
+  dataTestId = "dropdown-select",
+  isDisabled = false,
+  isRequired,
+  hasBorder = true,
+  hasError = false,
+  hasDeselect = false,
+  variant = "outlined",
+  fill = "default"
+}) => {
+  const { state, setState, isOpen, setIsOpen } = useDropdownContext();
+  const theme = (0, import_react2.useTheme)();
+  const childCount = import_react3.Children.count(children);
+  const hasOneChild = childCount === 1;
+  const disabled = isDisabled || hasOneChild;
+  const disabledIconColor = disabled ? theme.palette.content.light : theme.palette.content.default;
+  const handleClick = (event) => {
+    event.preventDefault();
+    setIsOpen((prev) => !prev);
+  };
+  const handleDeselectClick = (event) => {
+    event.stopPropagation();
+    setState({ text: "", value: "" });
+  };
+  (0, import_react3.useEffect)(() => {
+    const hasOption = import_react3.Children.toArray(children).find(
+      (child) => child.props.option.value === state.value
+    );
+    if (!hasOption) {
+      setState({ text: "", value: "" });
+    }
+  }, [children, setState, state.value]);
+  (0, import_react3.useEffect)(() => {
+    var _a;
+    if (hasOneChild) {
+      const options = import_react3.Children.map(
+        children,
+        (child) => child && child.props.option
+      );
+      if (options && options[0]) {
+        const option = {
+          text: (_a = options[0].text) != null ? _a : options[0].value,
+          value: options[0].value
+        };
+        setState(option);
+      }
+    }
+  }, [hasOneChild, setState, children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      SelectDropdownStyled,
+      {
+        "data-testid": dataTestId,
+        disabled,
+        fill,
+        hasBorder,
+        hasError,
+        isOpen,
+        onClick: handleClick,
+        style,
+        variant,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { overflow: "hidden" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              import_react_typography2.Typography,
+              {
+                color: disabled ? "content.light" : "content.default",
+                fontStyles: "body3",
+                children: [
+                  label,
+                  isRequired ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    import_react_typography2.Typography,
+                    {
+                      color: "error.default",
+                      element: "span",
+                      fontStyles: "body3",
+                      children: "*"
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_typography2.Typography,
+              {
+                color: disabled ? "content.light" : "content.default",
+                fontStyles: "body2",
+                style: { textOverflow: "ellipsis", overflow: "hidden" },
+                children: !state.value ? "Select an option" : state.text
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_box.Box, { style: { flexDirection: "row", gap: "0.5rem" }, children: [
+            hasDeselect && !!state.value ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_icon_button.IconButton, { onClick: handleDeselectClick, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_icon.Icon,
+              {
+                code: "close",
+                color: disabledIconColor,
+                dataTestId: "deselect-value",
+                size: "s"
+              }
+            ) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_react_icon.Icon,
+              {
+                code: isOpen ? "expand_less" : "expand_more",
+                color: disabledIconColor,
+                size: "l"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenu, { dataTestId, children }) : null
+  ] });
+};
+
+// src/components/container/DropdownContainer.tsx
+var import_react_core2 = require("@dt-dds/react-core");
+var import_react4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DropdownContainer = ({
+  children,
+  style,
+  dataTestId
+}) => {
+  const { setIsOpen } = useDropdownContext();
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react_core2.useClickOutside)({ ref, handler: () => setIsOpen(false) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-testid": dataTestId, ref, style, children });
+};
+
+// src/Dropdown.styled.ts
+var import_styled5 = __toESM(require("@emotion/styled"));
+var DropdownStyled = import_styled5.default.div`
+  ${({ theme, style }) => `
+    margin: ${theme.spacing.none};
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    ${style}
+  `}
+`;
+
+// src/Dropdown.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Dropdown = ({
+  children,
+  defaultValue,
+  style,
+  name,
+  dataTestId = "dropdown"
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownContextProvider, { defaultValue, name, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownStyled, { "data-testid": dataTestId, role: "menu", style, children }) });
+Dropdown.Container = DropdownContainer;
+Dropdown.Detail = DropdownDetail;
+Dropdown.Select = DropdownSelect;
+Dropdown.Option = DropdownOption;
+Dropdown.Menu = DropdownMenu;
+var Dropdown_default = Dropdown;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dropdown,
+  DropdownContainer,
+  DropdownContext,
+  DropdownContextProvider,
+  DropdownDetail,
+  DropdownMenu,
+  DropdownOption,
+  DropdownSelect,
+  useDropdownContext
+});