@dt-dds/react-dropdown 1.0.0-beta.67 → 1.0.0-beta.69

package/dist/index.mjs

@@ -1,413 +1,337 @@
-// 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: "bodySmRegular",
-      children
+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;
 };
-
-// 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 __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];
     }
-  );
-};
-var useDropdownContext = () => {
-  const context = useContext(DropdownContext);
-  if (!context) {
-    throw new Error(
-      "Dropdown compound components cannot be rendered outside the Dropdown component"
-    );
-  }
-  return context;
+  return target;
 };
 
+// src/Dropdown.tsx
+import { Portal, useClickOutside } from "@dt-dds/react-core";
+import { forwardRef as forwardRef2, useCallback, useRef } from "react";
+
+// src/components/option/DropdownOption.tsx
+import { forwardRef } from "react";
+
 // src/components/option/DropdownOption.styled.ts
-import styled2 from "@emotion/styled";
-var DropdownOptionStyled = styled2.li`
-  ${({ theme, disabled, isSelected }) => `
-    ${theme.fontStyles[isSelected ? "bodyMdBold" : "bodyMdRegular"]};
+import styled from "@emotion/styled";
+var DropdownOptionStyled = styled.li`
+  ${({ theme }) => `
+    ${theme.fontStyles.bodyMdRegular};
+    
     color: ${theme.palette.content.default};
+    padding: ${theme.spacing.spacing_40} ${theme.spacing.spacing_50};
     list-style: none;
-    padding: ${theme.spacing.spacing_30} ${theme.spacing.spacing_50};
     text-overflow: ellipsis;
     overflow-x: hidden;
+    text-wrap: nowrap;
 
-    &:hover {
-      background: ${disabled ? theme.palette.surface.light : theme.palette.primary.light};
-      cursor: ${disabled ? "not-allowed" : "pointer"};
+    &:not([aria-disabled="true"]) {
+      &[aria-selected="true"], &[aria-selected="true"] span {
+        ${theme.fontStyles.bodyMdBold};
+      }
+
+      &:hover, &[data-highlighted="true"] {
+        background: ${theme.palette.accent.light};
+        cursor: pointer;
+      }
     }
 
-    ${disabled && `
-        color: ${theme.palette.content.light};
-        background: ${theme.palette.surface.light};
-      `}
+    &[aria-disabled="true"] {
+      color: ${theme.palette.content.light};
+      cursor: not-allowed;
+
+      &[aria-selected="true"] {
+        background-color: ${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",
+import { jsx } from "react/jsx-runtime";
+var DropdownOption = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      dataTestId,
+      children,
       style,
-      children
-    },
-    option.value
-  );
-};
+      isDisabled,
+      isSelected = false,
+      isHighlighted = false,
+      onClick
+    } = _b, rest = __objRest(_b, [
+      "dataTestId",
+      "children",
+      "style",
+      "isDisabled",
+      "isSelected",
+      "isHighlighted",
+      "onClick"
+    ]);
+    const testId = dataTestId != null ? dataTestId : "dropdown-option";
+    const handleClick = (e) => {
+      if (isDisabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
+    };
+    return /* @__PURE__ */ jsx(
+      DropdownOptionStyled,
+      __spreadProps(__spreadValues({}, rest), {
+        "aria-disabled": isDisabled,
+        "aria-selected": isSelected,
+        "data-highlighted": isHighlighted,
+        "data-testid": testId,
+        onClick: handleClick,
+        ref,
+        style,
+        children
+      })
+    );
+  }
+);
 
-// 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/Dropdown.styled.ts
+import styled2 from "@emotion/styled";
+var DropdownStyled = styled2.div`
+  list-style-type: none;
+  width: 100%;
+  overflow: auto;
 
-// 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};
+    padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
+    background-color: ${theme.palette.surface.contrast};
     border-radius: ${theme.shape.dropdown};
-    width: 100%;
-    padding:${theme.spacing.spacing_50} ${theme.spacing.spacing_0};
-    margin: ${theme.spacing.spacing_20} ${theme.spacing.spacing_0};
-    position: absolute;
-    right: 0;
-    z-index: ${DROPDOWN_MENU_Z_INDEX};
-    max-height: 180px;
-    overflow: auto;
+    border: 1px solid ${theme.palette.border.medium};
   `}
 `;
 
-// 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.spacing_30} ${hasBorder ? theme.spacing.spacing_50 : "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: "" });
+// src/hooks/useFloatingPosition.ts
+import { DROPDOWN_MENU_Z_INDEX } from "@dt-dds/react-core";
+import { useLayoutEffect, useState } from "react";
+function basePos({
+  placement,
+  anchor,
+  menuWidth,
+  menuHeight,
+  offsetX,
+  offsetY
+}) {
+  switch (placement) {
+    case "bottom":
+      return { top: anchor.bottom + offsetY, left: anchor.left + offsetX };
+    case "top":
+      return {
+        top: anchor.top - offsetY - menuHeight,
+        left: anchor.left + offsetX
+      };
+    case "right":
+      return { top: anchor.top + offsetY, left: anchor.right + offsetX };
+    case "left":
+      return {
+        top: anchor.top + offsetY,
+        left: anchor.left - offsetX - menuWidth
+      };
+  }
+}
+function useFloatingPosition(anchorEl, open, {
+  offsetX = 0,
+  offsetY = 4,
+  matchWidth = true,
+  minViewportPadding = 8,
+  placement = "bottom",
+  menuRef
+} = {}) {
+  const [style, setStyle] = useState({
+    visibility: "hidden",
+    position: "fixed"
+  });
+  useLayoutEffect(() => {
+    if (!open || !(anchorEl == null ? void 0 : anchorEl.current)) {
+      setStyle({
+        visibility: "hidden",
+        position: "fixed"
+      });
+      return;
     }
-  }, [children, setState, state.value]);
-  useEffect2(() => {
-    var _a;
-    if (hasOneChild) {
-      const options = Children.map(
-        children,
-        (child) => child && child.props.option
+    const anchorElement = anchorEl == null ? void 0 : anchorEl.current;
+    const menuElement = menuRef == null ? void 0 : menuRef.current;
+    const updatePosition = () => {
+      var _a, _b;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const anchor = anchorElement.getBoundingClientRect();
+      const menuRect = menuElement == null ? void 0 : menuElement.getBoundingClientRect();
+      const menuWidth = matchWidth ? anchor.width : (_a = menuRect == null ? void 0 : menuRect.width) != null ? _a : anchor.width;
+      const menuHeight = (_b = menuRect == null ? void 0 : menuRect.height) != null ? _b : 0;
+      let { top, left } = basePos({
+        placement,
+        anchor,
+        menuWidth,
+        menuHeight,
+        offsetX,
+        offsetY
+      });
+      const maxLeft = Math.max(
+        minViewportPadding,
+        vw - menuWidth - minViewportPadding
       );
-      if (options && options[0]) {
-        const option = {
-          text: (_a = options[0].text) != null ? _a : options[0].value,
-          value: options[0].value
-        };
-        setState(option);
-      }
+      const maxTop = Math.max(
+        minViewportPadding,
+        vh - menuHeight - minViewportPadding
+      );
+      left = Math.max(minViewportPadding, Math.min(left, maxLeft));
+      top = Math.max(minViewportPadding, Math.min(top, maxTop));
+      setStyle({
+        position: "fixed",
+        top,
+        left,
+        width: matchWidth ? anchor.width : void 0,
+        maxWidth: matchWidth ? anchor.width : 300,
+        boxSizing: "border-box",
+        zIndex: DROPDOWN_MENU_Z_INDEX
+      });
+    };
+    updatePosition();
+    const ro = new ResizeObserver(updatePosition);
+    ro.observe(anchorElement);
+    if (anchorElement) {
+      ro.observe(anchorElement);
     }
-  }, [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: "bodySmRegular",
-                children: [
-                  label,
-                  isRequired ? /* @__PURE__ */ jsx5(
-                    Typography2,
-                    {
-                      color: "error.default",
-                      element: "span",
-                      fontStyles: "bodySmRegular",
-                      children: "*"
-                    }
-                  ) : null
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              Typography2,
-              {
-                color: disabled ? "content.light" : "content.default",
-                fontStyles: "bodyMdRegular",
-                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
-  ] });
-};
+    const opts = { passive: true };
+    window.addEventListener("scroll", updatePosition, opts);
+    window.addEventListener("resize", updatePosition, opts);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("scroll", updatePosition, opts);
+      window.removeEventListener("resize", updatePosition, opts);
+    };
+  }, [
+    menuRef,
+    anchorEl,
+    open,
+    placement,
+    offsetX,
+    offsetY,
+    matchWidth,
+    minViewportPadding
+  ]);
+  return { style };
+}
 
-// 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/utils/set-ref.ts
+var setRef = (target, node) => {
+  if (!target) {
+    return;
+  }
+  if (typeof target === "function") {
+    target(node);
+    return;
+  }
+  target.current = node;
 };
 
-// src/Dropdown.styled.ts
-import styled5 from "@emotion/styled";
-var DropdownStyled = styled5.div`
-  ${({ theme, style }) => `
-    margin: ${theme.spacing.spacing_0};
-    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;
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Dropdown = Object.assign(
+  forwardRef2(
+    (_a, forwardedRef) => {
+      var _b = _a, {
+        children,
+        style,
+        dataTestId = "dropdown",
+        isOpen = false,
+        anchorRef,
+        matchWidth = true,
+        offsetX,
+        offsetY,
+        as = "div",
+        onClose,
+        placement
+      } = _b, rest = __objRest(_b, [
+        "children",
+        "style",
+        "dataTestId",
+        "isOpen",
+        "anchorRef",
+        "matchWidth",
+        "offsetX",
+        "offsetY",
+        "as",
+        "onClose",
+        "placement"
+      ]);
+      const localMenuRef = useRef(null);
+      const setMenuRef = useCallback(
+        (node) => {
+          localMenuRef.current = node;
+          setRef(forwardedRef, node);
+        },
+        [forwardedRef]
+      );
+      const { style: floatingStyle } = useFloatingPosition(
+        anchorRef,
+        isOpen,
+        {
+          matchWidth,
+          offsetX,
+          offsetY,
+          placement,
+          menuRef: localMenuRef
+        }
+      );
+      useClickOutside({
+        refs: [localMenuRef, anchorRef],
+        handler: () => onClose == null ? void 0 : onClose()
+      });
+      return /* @__PURE__ */ jsx2(Portal, { isOpen: true, children: /* @__PURE__ */ jsx2(
+        DropdownStyled,
+        __spreadProps(__spreadValues({
+          as,
+          "data-testid": dataTestId,
+          ref: setMenuRef,
+          role: "menu",
+          style: __spreadValues(__spreadValues({}, floatingStyle), style)
+        }, rest), {
+          "aria-hidden": !isOpen,
+          onMouseDown: (e) => e.preventDefault(),
+          children
+        })
+      ) });
+    }
+  ),
+  {
+    Option: DropdownOption
+  }
+);
 export {
-  Dropdown_default as Dropdown,
-  DropdownContainer,
-  DropdownContext,
-  DropdownContextProvider,
-  DropdownDetail,
-  DropdownMenu,
-  DropdownOption,
-  DropdownSelect,
-  useDropdownContext
+  Dropdown,
+  DropdownOption
 };