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

package/dist/index.mjs

@@ -0,0 +1,413 @@
+// src/components/detail/DropdownDetail.tsx
+import { Typography } from "@dt-dds/react-typography";
+
+// src/components/detail/DropdownDetail.styled.ts
+import styled from "@emotion/styled";
+var DropdownDetailStyled = styled.div`
+  display: flex;
+  align-items: center;
+  padding-left: 15px;
+  margin-top: 4px;
+`;
+
+// src/components/detail/DropdownDetail.tsx
+import { jsx } from "react/jsx-runtime";
+var DropdownDetail = ({
+  dataTestId,
+  isDisabled = false,
+  hasError = false,
+  children = ""
+}) => {
+  const messageColor = isDisabled ? "content.light" : "content.medium";
+  return /* @__PURE__ */ jsx(DropdownDetailStyled, { "data-testid": dataTestId != null ? dataTestId : "dropdown-text", children: /* @__PURE__ */ jsx(
+    Typography,
+    {
+      color: hasError ? "error.default" : messageColor,
+      element: "span",
+      fontStyles: "body3",
+      children
+    }
+  ) });
+};
+
+// src/context/DropdownProvider.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_VALUE = {
+  state: {
+    text: "",
+    value: ""
+  },
+  isOpen: false,
+  setState: () => null,
+  setIsOpen: () => null
+};
+var DropdownContext = createContext(DEFAULT_VALUE);
+var DropdownContextProvider = ({
+  children,
+  defaultValue,
+  name
+}) => {
+  const [state, setState] = useState(defaultValue != null ? defaultValue : DEFAULT_VALUE.state);
+  const [isOpen, setIsOpen] = useState(DEFAULT_VALUE.isOpen);
+  useEffect(() => defaultValue && setState(defaultValue), [defaultValue]);
+  return /* @__PURE__ */ jsx2(
+    DropdownContext.Provider,
+    {
+      value: {
+        state,
+        setState,
+        isOpen,
+        setIsOpen,
+        name
+      },
+      children
+    }
+  );
+};
+var useDropdownContext = () => {
+  const context = 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
+import styled2 from "@emotion/styled";
+var DropdownOptionStyled = styled2.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
+import { jsx as jsx3 } from "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__ */ jsx3(
+    DropdownOptionStyled,
+    {
+      "data-testid": testId,
+      disabled: isDisabled,
+      isSelected: state.value === option.value,
+      onClick: handleClick,
+      role: "option",
+      style,
+      children
+    },
+    option.value
+  );
+};
+
+// src/components/select/DropdownSelect.tsx
+import { Box } from "@dt-dds/react-box";
+import { Icon } from "@dt-dds/react-icon";
+import { IconButton } from "@dt-dds/react-icon-button";
+import { Typography as Typography2 } from "@dt-dds/react-typography";
+import { useTheme } from "@emotion/react";
+import { Children, useEffect as useEffect2 } from "react";
+
+// src/components/menu/DropdownMenu.styled.ts
+import { DROPDOWN_MENU_Z_INDEX } from "@dt-dds/react-core";
+import styled3 from "@emotion/styled";
+var DropdownMenuStyled = styled3.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: ${DROPDOWN_MENU_Z_INDEX};
+    max-height: 180px;
+    overflow: auto;
+  `}
+`;
+
+// src/components/menu/DropdownMenu.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DropdownMenu = ({ children, dataTestId, style }) => {
+  return /* @__PURE__ */ jsx4(
+    DropdownMenuStyled,
+    {
+      "data-testid": `${dataTestId ? dataTestId + "-" : ""}menu`,
+      style,
+      children
+    }
+  );
+};
+
+// src/components/select/DropdownSelect.styled.ts
+import styled4 from "@emotion/styled";
+var getThemedBackgroundFill = (fill, theme) => ({
+  default: theme.palette.surface.default,
+  contrast: theme.palette.surface.contrast,
+  light: theme.palette.surface.light
+})[fill];
+var SelectDropdownStyled = styled4.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
+import { Fragment, jsx as jsx5, jsxs } from "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 = useTheme();
+  const childCount = 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: "" });
+  };
+  useEffect2(() => {
+    const hasOption = Children.toArray(children).find(
+      (child) => child.props.option.value === state.value
+    );
+    if (!hasOption) {
+      setState({ text: "", value: "" });
+    }
+  }, [children, setState, state.value]);
+  useEffect2(() => {
+    var _a;
+    if (hasOneChild) {
+      const options = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      SelectDropdownStyled,
+      {
+        "data-testid": dataTestId,
+        disabled,
+        fill,
+        hasBorder,
+        hasError,
+        isOpen,
+        onClick: handleClick,
+        style,
+        variant,
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { overflow: "hidden" }, children: [
+            /* @__PURE__ */ jsxs(
+              Typography2,
+              {
+                color: disabled ? "content.light" : "content.default",
+                fontStyles: "body3",
+                children: [
+                  label,
+                  isRequired ? /* @__PURE__ */ jsx5(
+                    Typography2,
+                    {
+                      color: "error.default",
+                      element: "span",
+                      fontStyles: "body3",
+                      children: "*"
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              Typography2,
+              {
+                color: disabled ? "content.light" : "content.default",
+                fontStyles: "body2",
+                style: { textOverflow: "ellipsis", overflow: "hidden" },
+                children: !state.value ? "Select an option" : state.text
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "row", gap: "0.5rem" }, children: [
+            hasDeselect && !!state.value ? /* @__PURE__ */ jsx5(IconButton, { onClick: handleDeselectClick, children: /* @__PURE__ */ jsx5(
+              Icon,
+              {
+                code: "close",
+                color: disabledIconColor,
+                dataTestId: "deselect-value",
+                size: "s"
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx5(
+              Icon,
+              {
+                code: isOpen ? "expand_less" : "expand_more",
+                color: disabledIconColor,
+                size: "l"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsx5(DropdownMenu, { dataTestId, children }) : null
+  ] });
+};
+
+// src/components/container/DropdownContainer.tsx
+import { useClickOutside } from "@dt-dds/react-core";
+import { useRef } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DropdownContainer = ({
+  children,
+  style,
+  dataTestId
+}) => {
+  const { setIsOpen } = useDropdownContext();
+  const ref = useRef(null);
+  useClickOutside({ ref, handler: () => setIsOpen(false) });
+  return /* @__PURE__ */ jsx6("div", { "data-testid": dataTestId, ref, style, children });
+};
+
+// src/Dropdown.styled.ts
+import styled5 from "@emotion/styled";
+var DropdownStyled = styled5.div`
+  ${({ theme, style }) => `
+    margin: ${theme.spacing.none};
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    ${style}
+  `}
+`;
+
+// src/Dropdown.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Dropdown = ({
+  children,
+  defaultValue,
+  style,
+  name,
+  dataTestId = "dropdown"
+}) => /* @__PURE__ */ jsx7(DropdownContextProvider, { defaultValue, name, children: /* @__PURE__ */ jsx7(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;
+export {
+  Dropdown_default as Dropdown,
+  DropdownContainer,
+  DropdownContext,
+  DropdownContextProvider,
+  DropdownDetail,
+  DropdownMenu,
+  DropdownOption,
+  DropdownSelect,
+  useDropdownContext
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@dt-dds/react-dropdown",
+  "version": "1.0.0-beta.31",
+  "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-box": "1.0.0-beta.10",
+    "@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-typography": "1.0.0-beta.32"
+  },
+  "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"
+  }
+}