react-restyle-components 0.3.18 → 0.3.19

package/README.md

@@ -26,7 +26,6 @@ yarn add react-restyle-components
 
 https://appasaheb4.github.io/react-restyle-components
 
-
 ### Built With
 
 - [ReactJS](https://reactjs.org/)
@@ -47,8 +46,8 @@ Website: www.tech-abl.com
     ### How To Contribute
         - Fork and clone this repository
         - Make some changes as required
-        - Write unit test to showcase its functionality
-        - Run the test suites to make sure it's not breaking anything `$ npm test`
+        <!-- - Write unit test to showcase its functionality
+        - Run the test suites to make sure it's not breaking anything `$ npm run test` -->
         - Submit a pull request under `master` branch
 
 😊 ALWAYS WELCOME 😊

package/lib/src/core-components/src/molecules/single-select/single-select.component.d.ts

@@ -0,0 +1,9 @@
+interface SingleSelectProps {
+    options: Array<any>;
+    displayKey?: string;
+    hasError?: boolean;
+    onSelect: (item: any) => any;
+}
+export declare const SingleSelect: ({ options, displayKey, hasError, onSelect, }: SingleSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=single-select.component.d.ts.map

package/lib/src/core-components/src/molecules/single-select/single-select.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-select.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/single-select/single-select.component.tsx"],"names":[],"mappings":"AAIA,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,iDAKtB,iBAAiB,4CA0KnB,CAAC"}

package/lib/src/core-components/src/molecules/single-select/single-select.component.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const SingleSelect = ({ options = [], displayKey = 'title', hasError = false, onSelect, }) => {
+    const [value, setValue] = useState('');
+    const [isListOpen, setIsListOpen] = useState(false);
+    // Arrow navigation state
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target) && isListOpen) {
+                    setIsListOpen(false);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref, isListOpen]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    // Keyboard navigation
+    useEffect(() => {
+        if (!isListOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                setHighlightedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+            }
+            else if (e.key === 'ArrowUp') {
+                setHighlightedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+            }
+            else if (e.key === 'Enter' && highlightedIndex >= 0) {
+                const item = options[highlightedIndex];
+                setValue(item[displayKey]);
+                onSelect(item);
+                setIsListOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isListOpen, highlightedIndex, options, displayKey, onSelect]);
+    // Reset highlight when list opens/closes
+    useEffect(() => {
+        if (isListOpen)
+            setHighlightedIndex(-1);
+    }, [isListOpen]);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: cn(s['flex'], s['dark:bg-boxdark'], s['dark:text-white'], s['flex-col'], s['w-full'], s['rounded-md'], s['border'], {
+                [s['border-red']]: hasError,
+                [s['border-gray-300']]: !hasError,
+            }), ref: wrapperRef, children: [_jsxs("span", { className: cn(s['p-2'], s['shadow-sm'], s['flex'], s['justify-between'], s['items-center']), onClick: () => {
+                        setIsListOpen(!isListOpen);
+                    }, tabIndex: 0, style: { cursor: 'pointer' }, children: [value ? value : 'Select', _jsx("span", { children: isListOpen ? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M5 12l5-5 5 5", stroke: "currentColor", strokeWidth: "2", fill: "none" }) })) : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M5 8l5 5 5-5", stroke: "currentColor", strokeWidth: "2", fill: "none" }) })) })] }), _jsx("div", { className: cn(s['flex'], { [s['show']]: isListOpen, [s['hidden']]: !isListOpen }, s['relative']), children: options
+                        ? options?.length > 0 && (_jsx("div", { className: cn(s['flex'], s['absolute'], s['rounded-sm'], s['w-full']), style: { zIndex: 999 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['gap-1'], s['bg-gray-200'], s['w-full']), children: options?.map((item, index) => (_jsx("li", { className: cn(s['flex'], s['gap-2'], s['p-2'], highlightedIndex === index && s['bg-blue-100']), style: {
+                                        cursor: 'pointer',
+                                        background: highlightedIndex === index ? '#e0e7ff' : undefined,
+                                    }, onClick: () => {
+                                        setValue(item[displayKey]);
+                                        onSelect(item);
+                                        setIsListOpen(false);
+                                    }, onMouseEnter: () => setHighlightedIndex(index), children: _jsx("label", { className: cn(s['flex'], s['gap-2']), children: _jsx("span", { className: cn(s['flex'], s['h-4']), children: item[displayKey] }) }) }, index))) }) }))
+                        : null })] }) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "private": false,
   "description": "Easy use restyle components",
   "author": {