@commander-services/cmd-dropdown-portal 1.7.7 → 1.9.0

package/package.json

@@ -1,31 +1,22 @@
 {
   "name": "@commander-services/cmd-dropdown-portal",
-  "version": "1.7.7",
+  "version": "1.9.0",
   "description": "A cmd dropdown portal component",
   "type": "module",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
-    },
-    "./styles.css": "./dist/cms-dropdown-portal.css"
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./CHANGELOG.md": "./CHANGELOG.md"
   },
   "files": [
-    "dist"
+    "src"
   ],
   "sideEffects": [
     "**/*.css"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --p ./tsconfig-build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -38,8 +29,6 @@
     "@types/react-dom": "^18.3.6",
     "@typescript-eslint/eslint-plugin": "^8.32.1",
     "@typescript-eslint/parser": "^8.32.1",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitejs/plugin-react-swc": "^3.9.0",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.27.0",
     "eslint-plugin-react": "^7.37.5",
@@ -50,12 +39,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "~5.7.3",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "^3.2.2"
   },
   "dependencies": {
-    "@commander-services/cmd-hooks": "^1.0.1"
+    "@commander-services/cmd-hooks": "1.3.0"
+  },
+  "scripts": {
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   }
-}
+}

package/src/CmdDropDownPortal.stories.tsx

@@ -0,0 +1,15 @@
+// import { useState } from 'react';
+import CmdDropdownPortal, { CmdDropdownPortalProps } from './CmdDropdownPortal';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+type CmdDropdownPortalStory = StoryObj<CmdDropdownPortalProps>;
+
+export default {
+  title: 'CmdDropdownPortal',
+  component: CmdDropdownPortal,
+  args: {
+    elementId: 'id',
+  },
+} satisfies Meta<CmdDropdownPortalProps>;
+
+export const Default: CmdDropdownPortalStory = {};

package/src/CmdDropdownPortal.test.tsx

@@ -0,0 +1,30 @@
+// import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
+
+// import CmdLoader, { CmdLoaderProps } from "./CmdLoader";
+
+describe("Test Component CmdLoader", () => {
+  // let props: CmdLoaderProps;
+
+  // beforeEach(() => {
+  //   props = {
+  //     alt: "Loading alternative text",
+  //     inContent: true,
+  //     oldLoader: true,
+  //   };
+  // });
+
+  // const renderComponent = () => render(<CmdLoader {...props} />);
+
+  it("should render loader correctly", () => {
+    // const { getAllByAltText } = renderComponent();
+    // const component = getAllByAltText(props.alt)[0];
+    // expect(component).toHaveAttribute("alt", props.alt);
+  });
+
+  it("should render loader inContent correctly", () => {
+    // const { getByTestId } = renderComponent();
+    // const component = getByTestId("CmdLoaderContent");
+    // expect(component).toBeInTheDocument();
+  });
+});

package/src/CmdDropdownPortal.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import CmdHooks from '@commander-services/cmd-hooks';
+
+export interface CmdDropdownPortalProps {
+  elementId: string;
+  children: React.ReactNode;
+  handleOpen: (value: boolean) => void;
+  target?: HTMLElement;
+  keepWidth?: boolean;
+  maxDropdownHeight?: number;
+}
+
+export interface CmdDropdownPortalPosition {
+  top?: number;
+  bottom?: number;
+  left: number;
+  width: number;
+}
+
+function CmdDropdownPortal(props: CmdDropdownPortalProps): JSX.Element | null {
+  const [position, setPosition] = useState<CmdDropdownPortalPosition | null>(null);
+  const { useOutsideClick, useKeyPress, ESCAPE_KEY } = CmdHooks();
+
+  const clickOutsideRef: React.RefObject<any> = React.useRef();
+
+  const handleOutside = () => {
+    setTimeout(function () {
+      props.handleOpen(false);
+    }, 50);
+  };
+
+  useOutsideClick(clickOutsideRef, () => {
+    handleOutside();
+  });
+
+  useKeyPress(ESCAPE_KEY, () => {
+    handleOutside();
+  });
+
+  const isElementFullyVisible = (el: Element, container: Element) => {
+    const elRect = el.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+
+    return elRect.bottom >= containerRect.top && elRect.bottom <= containerRect.bottom;
+  };
+
+  const getElementPosition = React.useCallback(() => {
+    const element = document.getElementById(props.elementId);
+    const wrapperBody =
+      document.getElementById('cmd-modal-body') || document.getElementById('cmd-page-wrapper-body');
+    if (element && (wrapperBody ? isElementFullyVisible(element, wrapperBody) : true)) {
+      const rect = element.getBoundingClientRect();
+      const maxDropdownHeight = props.maxDropdownHeight || 360; // max dropdown height
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const left = rect.left;
+      const top = rect.bottom;
+      const width = rect.width;
+      if (spaceBelow >= maxDropdownHeight || !wrapperBody) {
+        setPosition({
+          // top: rect.bottom + window.scrollY,
+          top,
+          left,
+          width,
+          bottom: undefined,
+        });
+      } else {
+        setPosition({
+          bottom: window.innerHeight - rect.top - window.scrollY + 3,
+          left,
+          width,
+          top: undefined,
+        });
+      }
+      // setPosition({ left, top, width });
+    } else {
+      setPosition(null);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    window.addEventListener('scroll', getElementPosition, { capture: true });
+    window.addEventListener('resize', getElementPosition, { capture: true });
+    return () => {
+      window.removeEventListener('scroll', getElementPosition, { capture: true });
+      window.removeEventListener('resize', getElementPosition, { capture: true });
+    };
+  }, [getElementPosition]);
+
+  React.useEffect(() => {
+    getElementPosition();
+  }, [props.elementId]);
+
+  return position
+    ? ReactDOM.createPortal(
+        <div
+          className="font-poppins"
+          id={`cmd-dropdown-portal-${props.elementId}`}
+          ref={clickOutsideRef}
+          data-testid={`cmd-dropdown-portal-${props.elementId}`}
+          style={{
+            position: 'absolute',
+            left: position.left,
+            zIndex: 999,
+            ...(position.top !== undefined ? { top: position.top } : {}),
+            ...(position.bottom !== undefined ? { bottom: position.bottom } : {}),
+            ...(!props.keepWidth ? { width: position.width } : {}),
+          }}
+        >
+          {props.children}
+        </div>,
+        props.target || document.body
+      )
+    : null;
+}
+
+export default CmdDropdownPortal;

package/src/index.ts

@@ -0,0 +1,6 @@
+import './styles.css';
+
+import CmdDropdownPortal from './CmdDropdownPortal';
+
+export { type CmdDropdownPortalProps } from './CmdDropdownPortal';
+export default CmdDropdownPortal;

package/src/styles.css

@@ -0,0 +1,24 @@
+/* @import 'tailwindcss'; */
+
+@theme {
+  --font-*: initial;
+  --font-poppins: Poppins, sans-serif;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/cmd-dropdown-portal.css

@@ -1 +0,0 @@
-@theme{--font-*: initial; --font-poppins: Poppins,sans-serif;}@layer base{*,:after,:before,::backdrop,::file-selector-button{border-color:var(--color-gray-200, currentColor)}}

package/dist/index.d.ts

@@ -1,15 +0,0 @@
-import { default as default_2 } from 'react';
-
-declare function CmdDropdownPortal(props: CmdDropdownPortalProps): JSX.Element | null;
-export default CmdDropdownPortal;
-
-export declare interface CmdDropdownPortalProps {
-    elementId: string;
-    children: default_2.ReactNode;
-    handleOpen: (value: boolean) => void;
-    target?: HTMLElement;
-    keepWidth?: boolean;
-    maxDropdownHeight?: number;
-}
-
-export { }