jy-headless 0.2.26 → 0.2.28

package/buttons/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import type { ButtonProps } from '../../types';
-declare const Button: ({ onClick, debounce, loading, readOnly, disabled, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ onClick, loading, readOnly, disabled, useDebounce, timeout, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/buttons/Button/Button.js

@@ -1,19 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import useDebouncing from '../../hooks/useDebouncing.js';
 
-const Button = ({ onClick, debounce = false, loading = false, readOnly = false, disabled = false, children, ...props }) => {
-    const timer = useRef(0);
-    const handleClick = (() => {
-        if (!onClick)
-            return;
-        if (debounce) {
-            return () => {
-                clearTimeout(timer.current);
-                timer.current = setTimeout(onClick, 300);
-            };
-        }
-        return onClick;
-    })();
+const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
+    const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
     return (jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
 };
 

package/cjs/buttons/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import type { ButtonProps } from '../../types';
-declare const Button: ({ onClick, debounce, loading, readOnly, disabled, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ onClick, loading, readOnly, disabled, useDebounce, timeout, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/cjs/buttons/Button/Button.js

@@ -1,21 +1,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var useDebouncing = require('../../hooks/useDebouncing.js');
 
-const Button = ({ onClick, debounce = false, loading = false, readOnly = false, disabled = false, children, ...props }) => {
-    const timer = react.useRef(0);
-    const handleClick = (() => {
-        if (!onClick)
-            return;
-        if (debounce) {
-            return () => {
-                clearTimeout(timer.current);
-                timer.current = setTimeout(onClick, 300);
-            };
-        }
-        return onClick;
-    })();
+const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
+    const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
     return (jsxRuntime.jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
 };
 

package/cjs/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useDebouncing';
+export * from './useThrottling';
+export * from './useDropdown';

package/cjs/hooks/useDebouncing.d.ts

@@ -0,0 +1,2 @@
+declare const useDebouncing: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useDebouncing;

package/cjs/hooks/useDebouncing.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var react = require('react');
+
+const useDebouncing = (callback, delay) => {
+    const timer = react.useRef(null);
+    return react.useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
+};
+
+module.exports = useDebouncing;

package/cjs/hooks/useDropdown.d.ts

@@ -0,0 +1,10 @@
+import { DropdownContextValue } from '../types';
+export declare const DropdownContext: import("react").Context<DropdownContextValue<any> | null>;
+declare const useDropdown: <T>(defaultValue?: T | null) => {
+    isOpen: boolean;
+    selected: T | null;
+    toggle: () => void;
+    select: (value: T) => void;
+};
+export declare const useDropdownContext: <T>() => DropdownContextValue<T>;
+export default useDropdown;

package/cjs/hooks/useDropdown.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const DropdownContext = react.createContext(null);
+const useDropdown = (defaultValue = null) => {
+    const [isOpen, setIsOpen] = react.useState(false);
+    const [selected, setSelected] = react.useState(defaultValue);
+    const toggle = () => setIsOpen((prev) => !prev);
+    const select = (value) => {
+        setSelected(value);
+        setIsOpen(false);
+    };
+    return {
+        isOpen,
+        selected,
+        toggle,
+        select,
+    };
+};
+const useDropdownContext = () => {
+    const context = react.useContext(DropdownContext);
+    if (!context)
+        throw new Error('Dropdown components must be used within <Dropdown>');
+    return context;
+};
+
+exports.DropdownContext = DropdownContext;
+exports.default = useDropdown;
+exports.useDropdownContext = useDropdownContext;

package/cjs/hooks/useThrottling.d.ts

@@ -0,0 +1,2 @@
+declare const useThrottling: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useThrottling;

package/cjs/hooks/useThrottling.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var react = require('react');
+
+const useThrottling = (callback, delay) => {
+    const lastCalled = react.useRef(0);
+    return react.useCallback((...args) => {
+        const now = Date.now();
+        if (now - lastCalled.current >= delay) {
+            lastCalled.current = now;
+            callback(...args);
+        }
+    }, [callback, delay]);
+};
+
+module.exports = useThrottling;

package/cjs/index.d.ts

@@ -1,4 +1,6 @@
-export { default as Button } from './buttons/Button/Button';
-export { default as Input } from './inputs/Input/Input';
-export * as Types from './types';
-export * as Utils from './utils';
+export { default as Button } from './buttons';
+export { default as Input } from './inputs';
+export { default as Dropdown } from './selectors';
+export * from './types';
+export * from './utils';
+export * from './hooks';

package/cjs/index.js

@@ -2,16 +2,14 @@
 
 var Button = require('./buttons/Button/Button.js');
 var Input = require('./inputs/Input/Input.js');
-var index = require('./types/index.js');
-var index$1 = require('./utils/index.js');
-
-function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
-
-var index__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(index$1);
+var Dropdown = require('./selectors/Dropdown/Dropdown.js');
+require('react');
+var useDropdown = require('./hooks/useDropdown.js');
 
 
 
 exports.Button = Button;
 exports.Input = Input;
-exports.Types = index;
-exports.Utils = index__namespace;
+exports.Dropdown = Dropdown;
+exports.DropdownContext = useDropdown.DropdownContext;
+exports.useDropdownContext = useDropdown.useDropdownContext;

package/cjs/inputs/Input/Input.d.ts

@@ -1,3 +1,3 @@
-import { InputProps } from '../../types/inputs/types';
-declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+import { InputProps } from '../../types';
+declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, useThrottle, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/cjs/inputs/Input/Input.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var ArrayUtils = require('../../utils/ArrayUtils.js');
+var useThrottling = require('../../hooks/useThrottling.js');
 
-const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }) => {
-    return (jsxRuntime.jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass && ArrayUtils.toFlat(wrapperClass).join(' '), style: wrapperStyle, children: [prefixElement, jsxRuntime.jsx("input", { id: id, ...props }), suffixElement] }));
+const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, useThrottle = false, children, ...props }) => {
+    const handleChange = onChange && useThrottle ? useThrottling(onChange, timeout) : onChange;
+    return (jsxRuntime.jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsxRuntime.jsx("input", { role: 'textbox', id: id, onChange: handleChange, ...props }), suffixElement] }));
 };
 
 module.exports = Input;

package/cjs/selectors/Dropdown/Dropdown.d.ts

@@ -0,0 +1,8 @@
+import { DivAttribute, DropdownProps, SpanAttribute } from '../../types';
+declare const Dropdown: (<T>({ select, selected, isOpen, toggle, children, ...props }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Button: <T>({ onClick, children, ...props }: SpanAttribute<T>) => import("react/jsx-runtime").JSX.Element;
+    Options: <T>({ children, ...props }: DivAttribute<T>) => import("react/jsx-runtime").JSX.Element | null;
+    Option: <T>({ children, value, ...props }: DivAttribute<T>) => import("react/jsx-runtime").JSX.Element;
+    Viewer: ({ children, ...props }: SpanAttribute<null>) => import("react/jsx-runtime").JSX.Element;
+};
+export default Dropdown;

package/cjs/selectors/Dropdown/Dropdown.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useDropdown = require('../../hooks/useDropdown.js');
+
+const DropdownRoot = ({ select, selected, isOpen, toggle, children, ...props }) => {
+    const dropdownRef = react.useRef(null);
+    const unControlled = useDropdown.default();
+    const customValue = {
+        isOpen: isOpen ?? unControlled.isOpen,
+        toggle: toggle ?? unControlled.toggle,
+        select: select ?? unControlled.select,
+        selected: selected ?? unControlled.selected,
+    };
+    react.useEffect(() => {
+        if (!dropdownRef.current)
+            return;
+        const onClickOutside = (e) => {
+            if (!dropdownRef.current?.contains(e.target)) {
+                if (isOpen && toggle) {
+                    toggle();
+                }
+            }
+        };
+        window.addEventListener('click', onClickOutside);
+        return () => window.removeEventListener('click', onClickOutside);
+    }, [customValue]);
+    return (jsxRuntime.jsx("div", { ...props, ref: dropdownRef, children: jsxRuntime.jsx(useDropdown.DropdownContext.Provider, { value: customValue, children: children }) }));
+};
+const DropdownViewer = ({ children, ...props }) => {
+    return (jsxRuntime.jsx("span", { role: 'viewer', ...props, children: children }));
+};
+const DropdownButton = ({ onClick, children, ...props }) => {
+    const { toggle } = useDropdown.useDropdownContext();
+    return (jsxRuntime.jsx("span", { ...props, onClick: toggle, children: children }));
+};
+const DropdownOptions = ({ children, ...props }) => {
+    const { isOpen } = useDropdown.useDropdownContext();
+    if (!isOpen)
+        return null;
+    return jsxRuntime.jsx("div", { ...props, children: children });
+};
+const DropdownOption = ({ children, value, ...props }) => {
+    const { select } = useDropdown.useDropdownContext();
+    return (jsxRuntime.jsx("div", { role: "option", onClick: () => select(value), ...props, children: children }));
+};
+const Dropdown = Object.assign(DropdownRoot, {
+    Button: DropdownButton,
+    Options: DropdownOptions,
+    Option: DropdownOption,
+    Viewer: DropdownViewer,
+});
+
+module.exports = Dropdown;

package/cjs/selectors/Dropdown/DropdownDefaultTrigger.d.ts

@@ -0,0 +1,4 @@
+declare const DropdownDefaultTrigger: ({ value }: {
+    value: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DropdownDefaultTrigger;

package/cjs/selectors/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Dropdown/Dropdown';

package/cjs/types/buttons/{types.d.ts → index.d.ts}

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    debounce?: boolean;
     loading?: boolean;
     readOnly?: boolean;
+    useDebounce?: boolean;
+    timeout?: number;
 }

package/cjs/types/common/index.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export interface DivAttribute<T> extends HTMLAttributes<HTMLDivElement> {
+    value?: T;
+}
+export interface SpanAttribute<T> extends HTMLAttributes<HTMLSpanElement> {
+    value?: T;
+}

package/cjs/types/index.d.ts

@@ -1,2 +1,4 @@
-export * from './buttons/types';
-export * from './inputs/types';
+export * from './buttons';
+export * from './inputs';
+export * from './selectors';
+export * from './common';

package/cjs/types/inputs/{types.d.ts → index.d.ts}

@@ -3,5 +3,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     suffixElement?: ReactElement | ReactNode;
     prefixElement?: ReactElement | ReactNode;
     wrapperStyle?: CSSProperties;
-    wrapperClass?: string | string[];
+    wrapperClass?: string[];
+    useThrottle?: boolean;
+    timeout?: number;
 }

package/cjs/types/selectors/index.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface DropdownContextValue<T> {
+    isOpen: boolean;
+    toggle: () => void;
+    select: (value: T) => void;
+    selected: T | null;
+}
+export interface DropdownProps<T> extends HTMLAttributes<HTMLElement> {
+    isOpen?: boolean;
+    toggle?: () => void;
+    select?: (value: T) => void;
+    selected?: T | null;
+}
+export interface UseDropdownProps<T> {
+    defaultValue?: T;
+}

package/cjs/utils/ArrayUtils.d.ts

@@ -1,4 +1,2 @@
-declare const ArrayUtils: {
-    toFlat(...args: (string | string[])[]): string[];
-};
+declare const ArrayUtils: {};
 export default ArrayUtils;

package/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useDebouncing';
+export * from './useThrottling';
+export * from './useDropdown';

package/hooks/useDebouncing.d.ts

@@ -0,0 +1,2 @@
+declare const useDebouncing: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useDebouncing;

package/hooks/useDebouncing.js

@@ -0,0 +1,14 @@
+import { useRef, useCallback } from 'react';
+
+const useDebouncing = (callback, delay) => {
+    const timer = useRef(null);
+    return useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            callback();
+        }, delay);
+    }, [callback, delay]);
+};
+
+export { useDebouncing as default };

package/hooks/useDropdown.d.ts

@@ -0,0 +1,10 @@
+import { DropdownContextValue } from '../types';
+export declare const DropdownContext: import("react").Context<DropdownContextValue<any> | null>;
+declare const useDropdown: <T>(defaultValue?: T | null) => {
+    isOpen: boolean;
+    selected: T | null;
+    toggle: () => void;
+    select: (value: T) => void;
+};
+export declare const useDropdownContext: <T>() => DropdownContextValue<T>;
+export default useDropdown;

package/hooks/useDropdown.js

@@ -0,0 +1,26 @@
+import { createContext, useContext, useState } from 'react';
+
+const DropdownContext = createContext(null);
+const useDropdown = (defaultValue = null) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(defaultValue);
+    const toggle = () => setIsOpen((prev) => !prev);
+    const select = (value) => {
+        setSelected(value);
+        setIsOpen(false);
+    };
+    return {
+        isOpen,
+        selected,
+        toggle,
+        select,
+    };
+};
+const useDropdownContext = () => {
+    const context = useContext(DropdownContext);
+    if (!context)
+        throw new Error('Dropdown components must be used within <Dropdown>');
+    return context;
+};
+
+export { DropdownContext, useDropdown as default, useDropdownContext };

package/hooks/useThrottling.d.ts

@@ -0,0 +1,2 @@
+declare const useThrottling: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
+export default useThrottling;

package/hooks/useThrottling.js

@@ -0,0 +1,14 @@
+import { useRef, useCallback } from 'react';
+
+const useThrottling = (callback, delay) => {
+    const lastCalled = useRef(0);
+    return useCallback((...args) => {
+        const now = Date.now();
+        if (now - lastCalled.current >= delay) {
+            lastCalled.current = now;
+            callback(...args);
+        }
+    }, [callback, delay]);
+};
+
+export { useThrottling as default };

package/index.d.ts

@@ -1,4 +1,6 @@
-export { default as Button } from './buttons/Button/Button';
-export { default as Input } from './inputs/Input/Input';
-export * as Types from './types';
-export * as Utils from './utils';
+export { default as Button } from './buttons';
+export { default as Input } from './inputs';
+export { default as Dropdown } from './selectors';
+export * from './types';
+export * from './utils';
+export * from './hooks';

package/index.js

@@ -1,6 +1,5 @@
 export { default as Button } from './buttons/Button/Button.js';
 export { default as Input } from './inputs/Input/Input.js';
-import * as index from './types/index.js';
-export { index as Types };
-import * as index$1 from './utils/index.js';
-export { index$1 as Utils };
+export { default as Dropdown } from './selectors/Dropdown/Dropdown.js';
+import 'react';
+export { DropdownContext, useDropdownContext } from './hooks/useDropdown.js';

package/inputs/Input/Input.d.ts

@@ -1,3 +1,3 @@
-import { InputProps } from '../../types/inputs/types';
-declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+import { InputProps } from '../../types';
+declare const Input: ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, useThrottle, children, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/inputs/Input/Input.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import ArrayUtils from '../../utils/ArrayUtils.js';
+import useThrottling from '../../hooks/useThrottling.js';
 
-const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass, children, ...props }) => {
-    return (jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass && ArrayUtils.toFlat(wrapperClass).join(' '), style: wrapperStyle, children: [prefixElement, jsx("input", { id: id, ...props }), suffixElement] }));
+const Input = ({ id, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, useThrottle = false, children, ...props }) => {
+    const handleChange = onChange && useThrottle ? useThrottling(onChange, timeout) : onChange;
+    return (jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsx("input", { role: 'textbox', id: id, onChange: handleChange, ...props }), suffixElement] }));
 };
 
 export { Input as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.2.26",
+  "version": "0.2.28",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -23,40 +23,35 @@
       "require": "./cjs/cjs/index.js",
       "types": "./cjs/index.d.ts"
     },
+    "./useDebouncing": {
+      "import": "./hooks/useDebouncing.js",
+      "require": "./cjs/hooks/useDebouncing.js",
+      "types": "./hooks/useDebouncing.d.ts"
+    },
+    "./useDropdown": {
+      "import": "./hooks/useDropdown.js",
+      "require": "./cjs/hooks/useDropdown.js",
+      "types": "./hooks/useDropdown.d.ts"
+    },
+    "./useThrottling": {
+      "import": "./hooks/useThrottling.js",
+      "require": "./cjs/hooks/useThrottling.js",
+      "types": "./hooks/useThrottling.d.ts"
+    },
     "./index": {
-      "import": "./utils/index.js",
-      "require": "./cjs/utils/index.js",
-      "types": "./utils/index.d.ts"
+      "import": "./index.js",
+      "require": "./cjs/index.js",
+      "types": "./index.d.ts"
     },
     "./Input": {
       "import": "./inputs/Input/Input.js",
       "require": "./cjs/inputs/Input/Input.js",
       "types": "./inputs/Input/Input.d.ts"
     },
-    "./cjs/types": {
-      "import": "./cjs/types/index.js",
-      "require": "./cjs/cjs/types/index.js",
-      "types": "./cjs/types/index.d.ts"
-    },
-    "./cjs/utils": {
-      "import": "./cjs/utils/index.js",
-      "require": "./cjs/cjs/utils/index.js",
-      "types": "./cjs/utils/index.d.ts"
-    },
-    "./ArrayUtils": {
-      "import": "./utils/ArrayUtils.js",
-      "require": "./cjs/utils/ArrayUtils.js",
-      "types": "./utils/ArrayUtils.d.ts"
-    },
-    "./types": {
-      "import": "./types/index.js",
-      "require": "./cjs/types/index.js",
-      "types": "./types/index.d.ts"
-    },
-    "./utils": {
-      "import": "./utils/index.js",
-      "require": "./cjs/utils/index.js",
-      "types": "./utils/index.d.ts"
+    "./Dropdown": {
+      "import": "./selectors/Dropdown/Dropdown.js",
+      "require": "./cjs/selectors/Dropdown/Dropdown.js",
+      "types": "./selectors/Dropdown/Dropdown.d.ts"
     }
   },
   "keywords": [

package/selectors/Dropdown/Dropdown.d.ts

@@ -0,0 +1,8 @@
+import { DivAttribute, DropdownProps, SpanAttribute } from '../../types';
+declare const Dropdown: (<T>({ select, selected, isOpen, toggle, children, ...props }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Button: <T>({ onClick, children, ...props }: SpanAttribute<T>) => import("react/jsx-runtime").JSX.Element;
+    Options: <T>({ children, ...props }: DivAttribute<T>) => import("react/jsx-runtime").JSX.Element | null;
+    Option: <T>({ children, value, ...props }: DivAttribute<T>) => import("react/jsx-runtime").JSX.Element;
+    Viewer: ({ children, ...props }: SpanAttribute<null>) => import("react/jsx-runtime").JSX.Element;
+};
+export default Dropdown;

package/selectors/Dropdown/Dropdown.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import useDropdown, { DropdownContext, useDropdownContext } from '../../hooks/useDropdown.js';
+
+const DropdownRoot = ({ select, selected, isOpen, toggle, children, ...props }) => {
+    const dropdownRef = useRef(null);
+    const unControlled = useDropdown();
+    const customValue = {
+        isOpen: isOpen ?? unControlled.isOpen,
+        toggle: toggle ?? unControlled.toggle,
+        select: select ?? unControlled.select,
+        selected: selected ?? unControlled.selected,
+    };
+    useEffect(() => {
+        if (!dropdownRef.current)
+            return;
+        const onClickOutside = (e) => {
+            if (!dropdownRef.current?.contains(e.target)) {
+                if (isOpen && toggle) {
+                    toggle();
+                }
+            }
+        };
+        window.addEventListener('click', onClickOutside);
+        return () => window.removeEventListener('click', onClickOutside);
+    }, [customValue]);
+    return (jsx("div", { ...props, ref: dropdownRef, children: jsx(DropdownContext.Provider, { value: customValue, children: children }) }));
+};
+const DropdownViewer = ({ children, ...props }) => {
+    return (jsx("span", { role: 'viewer', ...props, children: children }));
+};
+const DropdownButton = ({ onClick, children, ...props }) => {
+    const { toggle } = useDropdownContext();
+    return (jsx("span", { ...props, onClick: toggle, children: children }));
+};
+const DropdownOptions = ({ children, ...props }) => {
+    const { isOpen } = useDropdownContext();
+    if (!isOpen)
+        return null;
+    return jsx("div", { ...props, children: children });
+};
+const DropdownOption = ({ children, value, ...props }) => {
+    const { select } = useDropdownContext();
+    return (jsx("div", { role: "option", onClick: () => select(value), ...props, children: children }));
+};
+const Dropdown = Object.assign(DropdownRoot, {
+    Button: DropdownButton,
+    Options: DropdownOptions,
+    Option: DropdownOption,
+    Viewer: DropdownViewer,
+});
+
+export { Dropdown as default };

package/selectors/Dropdown/DropdownDefaultTrigger.d.ts

@@ -0,0 +1,4 @@
+declare const DropdownDefaultTrigger: ({ value }: {
+    value: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DropdownDefaultTrigger;

package/selectors/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Dropdown/Dropdown';

package/types/buttons/{types.d.ts → index.d.ts}

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    debounce?: boolean;
     loading?: boolean;
     readOnly?: boolean;
+    useDebounce?: boolean;
+    timeout?: number;
 }

package/types/common/index.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export interface DivAttribute<T> extends HTMLAttributes<HTMLDivElement> {
+    value?: T;
+}
+export interface SpanAttribute<T> extends HTMLAttributes<HTMLSpanElement> {
+    value?: T;
+}

package/types/index.d.ts

@@ -1,2 +1,4 @@
-export * from './buttons/types';
-export * from './inputs/types';
+export * from './buttons';
+export * from './inputs';
+export * from './selectors';
+export * from './common';

package/types/inputs/{types.d.ts → index.d.ts}

@@ -3,5 +3,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     suffixElement?: ReactElement | ReactNode;
     prefixElement?: ReactElement | ReactNode;
     wrapperStyle?: CSSProperties;
-    wrapperClass?: string | string[];
+    wrapperClass?: string[];
+    useThrottle?: boolean;
+    timeout?: number;
 }

package/types/selectors/index.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface DropdownContextValue<T> {
+    isOpen: boolean;
+    toggle: () => void;
+    select: (value: T) => void;
+    selected: T | null;
+}
+export interface DropdownProps<T> extends HTMLAttributes<HTMLElement> {
+    isOpen?: boolean;
+    toggle?: () => void;
+    select?: (value: T) => void;
+    selected?: T | null;
+}
+export interface UseDropdownProps<T> {
+    defaultValue?: T;
+}

package/utils/ArrayUtils.d.ts

@@ -1,4 +1,2 @@
-declare const ArrayUtils: {
-    toFlat(...args: (string | string[])[]): string[];
-};
+declare const ArrayUtils: {};
 export default ArrayUtils;

package/version.txt

@@ -1 +1 @@
-0.2.26
+0.2.28

package/cjs/types/index.js

@@ -1,2 +0,0 @@
-'use strict';
-

package/cjs/utils/ArrayUtils.js

@@ -1,9 +0,0 @@
-'use strict';
-
-const ArrayUtils = {
-    toFlat(...args) {
-        return args.flat().map(String).filter(Boolean);
-    },
-};
-
-module.exports = ArrayUtils;

package/cjs/utils/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-var ArrayUtils = require('./ArrayUtils.js');
-
-
-
-module.exports = ArrayUtils;

package/types/index.js

@@ -1 +0,0 @@
-

package/utils/ArrayUtils.js

@@ -1,7 +0,0 @@
-const ArrayUtils = {
-    toFlat(...args) {
-        return args.flat().map(String).filter(Boolean);
-    },
-};
-
-export { ArrayUtils as default };

package/utils/index.js

@@ -1 +0,0 @@
-export { default } from './ArrayUtils.js';