qlu-20-ui-library 1.7.76 → 1.7.77

package/dist/components/DropDownForm/DropDownForm.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type DropDownFormProps = {
+    items: string[];
+    onSelect: (val: string) => void;
+};
+declare const DropDownForm: React.FC<DropDownFormProps>;
+export default DropDownForm;

package/dist/components/DropDownForm/index.d.ts

@@ -0,0 +1,2 @@
+import DropDownForm from "./DropDownForm";
+export default DropDownForm;

package/dist/components/index.d.ts

@@ -170,6 +170,7 @@ export { default as BadgeWithCount } from "./BadgeWithCount";
 export { default as SelectablePill } from "./SelectablePill";
 export { default as SelectionDropDown } from "./SelectionDropdown";
 export { default as ContinuousRangeComponent } from "./ContinuousRangeComponent";
+export { default as DropDownForm } from "./DropDownForm";
 export { default as CreditBarChart } from "./CreditBarChart";
 export { default as CreditUsageChart } from "./CreditUsageChart";
 export { default as CreditManagementDropdownButton } from "./CreditsManagementDropdownButton/CreditsManagementDropdownButton";

package/dist/types/components/DropDownForm/DropDownForm.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type DropDownFormProps = {
+    items: string[];
+    onSelect: (val: string) => void;
+};
+declare const DropDownForm: React.FC<DropDownFormProps>;
+export default DropDownForm;

package/dist/types/components/DropDownForm/DropDownForm.js

@@ -0,0 +1,39 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { GetSvgIcon } from '..';
+import clsx from 'clsx';
+import styles from './style.module.scss';
+const DropDownForm = ({ items, onSelect, }) => {
+    const [extend, setExtend] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(items[0] || "");
+    const elementRef = useRef(null);
+    const handleArrow = () => {
+        setExtend(prev => !prev);
+    };
+    const handleItem = (e) => {
+        setSelectedItem(e);
+        onSelect(e);
+        setExtend(false);
+    };
+    // Add an event listener to the document to detect clicks outside the element
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (elementRef.current && !elementRef.current.contains(event.target)) {
+                handleArrow();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    const getItemClasses = (index) => {
+        return clsx(styles.dropdownItem, {
+            [styles.itemFirst]: index === 0,
+            [styles.itemLast]: index === items.length - 1
+        });
+    };
+    return (_jsxs("div", { className: styles.dropdownContainer, children: [_jsxs("button", { type: 'button', className: styles.dropdownTrigger, onClick: handleArrow, children: [_jsxs("span", { className: styles.dropdownLabel, children: [" ", selectedItem, " "] }), _jsx("span", { className: styles.dropdownIcon, children: _jsx(GetSvgIcon, { iconType: `${extend ? 'cheveronUp' : 'cheveronDown'}`, iconSize: '18' }) })] }), extend &&
+                _jsx("div", { className: styles.dropdownContent, ref: elementRef, children: items.map((ele, idx) => (_jsx("div", { className: getItemClasses(idx), onClick: () => handleItem(ele), children: ele }, ele + idx))) })] }));
+};
+export default DropDownForm;

package/dist/types/components/DropDownForm/index.d.ts

@@ -0,0 +1,2 @@
+import DropDownForm from "./DropDownForm";
+export default DropDownForm;

package/dist/types/components/DropDownForm/index.js

@@ -0,0 +1,2 @@
+import DropDownForm from "./DropDownForm";
+export default DropDownForm;

package/dist/types/components/index.d.ts

@@ -170,6 +170,7 @@ export { default as BadgeWithCount } from "./BadgeWithCount";
 export { default as SelectablePill } from "./SelectablePill";
 export { default as SelectionDropDown } from "./SelectionDropdown";
 export { default as ContinuousRangeComponent } from "./ContinuousRangeComponent";
+export { default as DropDownForm } from "./DropDownForm";
 export { default as CreditBarChart } from "./CreditBarChart";
 export { default as CreditUsageChart } from "./CreditUsageChart";
 export { default as CreditManagementDropdownButton } from "./CreditsManagementDropdownButton/CreditsManagementDropdownButton";

package/dist/types/components/index.js

@@ -170,6 +170,7 @@ export { default as BadgeWithCount } from "./BadgeWithCount";
 export { default as SelectablePill } from "./SelectablePill";
 export { default as SelectionDropDown } from "./SelectionDropdown";
 export { default as ContinuousRangeComponent } from "./ContinuousRangeComponent";
+export { default as DropDownForm } from "./DropDownForm";
 export { default as CreditBarChart } from "./CreditBarChart";
 export { default as CreditUsageChart } from "./CreditUsageChart";
 export { default as CreditManagementDropdownButton } from "./CreditsManagementDropdownButton/CreditsManagementDropdownButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qlu-20-ui-library",
-  "version": "1.7.76",
+  "version": "1.7.77",
   "type": "module",
   "scripts": {
     "dev": "vite",