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

package/dist/index.mjs

@@ -0,0 +1,374 @@
+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/Dropdown.tsx
+import {
+  forwardRef as forwardRef2,
+  useCallback,
+  useRef
+} from "react";
+import { FocusTrap } from "focus-trap-react";
+import { Portal, useClickOutside } from "@dt-dds/react-core";
+
+// src/components/option/DropdownOption.tsx
+import {
+  forwardRef
+} from "react";
+
+// src/components/option/DropdownOption.styled.ts
+import styled from "@emotion/styled";
+var DropdownOptionStyled = styled.li`
+  ${({ theme }) => `
+    ${theme.fontStyles.bodyMdRegular};
+
+    display: block;
+    color: ${theme.palette.content.default};
+    padding: ${theme.spacing.spacing_40} ${theme.spacing.spacing_50};   
+    list-style: none;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    text-wrap: nowrap;
+
+    &: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;
+      }
+
+      &:focus-visible {
+        outline: 2px solid ${theme.palette.primary.default};
+        outline-offset: -2px; 
+      }
+    }
+
+    &[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 } from "react/jsx-runtime";
+var DropdownOption = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      dataTestId,
+      children,
+      style,
+      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);
+    };
+    const handleKeyDown = (e) => {
+      if (e.code === "Enter" || e.code === "Space") {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(e);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      DropdownOptionStyled,
+      __spreadProps(__spreadValues(__spreadValues({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: isDisabled ? -1 : 0
+      }, !isSelected && { role: "menuitem" }), rest), {
+        "aria-disabled": isDisabled,
+        "aria-selected": isSelected,
+        "data-highlighted": isHighlighted,
+        "data-testid": testId,
+        ref,
+        style,
+        children
+      })
+    );
+  }
+);
+
+// src/Dropdown.styled.ts
+import styled2 from "@emotion/styled";
+var DropdownStyled = styled2.div`
+  list-style-type: none;
+  width: 100%;
+  overflow: auto;
+`;
+
+// src/hooks/useFloatingPosition.ts
+import { useLayoutEffect, useState } from "react";
+import { DROPDOWN_MENU_Z_INDEX } from "@dt-dds/react-core";
+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;
+    }
+    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
+      );
+      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);
+    }
+    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/utils/set-ref.ts
+var setRef = (target, node) => {
+  if (!target) {
+    return;
+  }
+  if (typeof target === "function") {
+    target(node);
+    return;
+  }
+  target.current = node;
+};
+
+// src/Dropdown.tsx
+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,
+        isFocusable = true
+      } = _b, rest = __objRest(_b, [
+        "children",
+        "style",
+        "dataTestId",
+        "isOpen",
+        "anchorRef",
+        "matchWidth",
+        "offsetX",
+        "offsetY",
+        "as",
+        "onClose",
+        "placement",
+        "isFocusable"
+      ]);
+      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()
+      });
+      const dropdownNode = /* @__PURE__ */ jsx2(
+        DropdownStyled,
+        __spreadProps(__spreadValues(__spreadValues({
+          as,
+          "data-testid": dataTestId,
+          ref: setMenuRef,
+          role: "menu",
+          style: __spreadValues(__spreadValues({}, floatingStyle), style)
+        }, rest), !isFocusable && {
+          onMouseDown: (e) => e.preventDefault()
+        }), {
+          children
+        })
+      );
+      return /* @__PURE__ */ jsx2(Portal, { isOpen: true, children: isFocusable ? /* @__PURE__ */ jsx2(
+        FocusTrap,
+        {
+          active: isOpen,
+          focusTrapOptions: {
+            initialFocus: () => {
+              var _a2;
+              return (_a2 = localMenuRef == null ? void 0 : localMenuRef.current) != null ? _a2 : false;
+            },
+            fallbackFocus: () => document.body,
+            escapeDeactivates: true,
+            allowOutsideClick: true,
+            onDeactivate: () => {
+              onClose == null ? void 0 : onClose();
+            },
+            tabbableOptions: { displayCheck: "none" }
+          },
+          children: dropdownNode
+        }
+      ) : dropdownNode });
+    }
+  ),
+  {
+    Option: DropdownOption
+  }
+);
+export {
+  Dropdown,
+  DropdownOption
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@dt-dds/react-dropdown",
+  "version": "1.0.0-beta.100",
+  "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.76",
+    "@dt-dds/react-core": "1.0.0-beta.58",
+    "@dt-dds/react-icon": "1.0.0-beta.61",
+    "@dt-dds/react-icon-button": "1.0.0-beta.27",
+    "@dt-dds/react-typography": "1.0.0-beta.49",
+    "@dt-dds/themes": "1.0.0-beta.13",
+    "focus-trap-react": "^11.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": "^8.5.0",
+    "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"
+  }
+}