jy-headless 0.2.27 → 0.2.29

package/cjs/hooks/index.d.ts

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

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/index.d.ts

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

package/cjs/index.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var Button = require('./buttons/Button/Button.js');
-var Input = require('./inputs/Input/Input.js');
+require('react/jsx-runtime');
 require('react');
+require('./selectors/Dropdown/Dropdown.js');
+var useDropdown = require('./hooks/useDropdown.js');
 
 
 
-exports.Button = Button;
-exports.Input = Input;
+exports.DropdownContext = useDropdown.DropdownContext;
+exports.useDropdownContext = useDropdown.useDropdownContext;

package/cjs/inputs/Input/Input.js

@@ -5,7 +5,7 @@ var useThrottling = require('../../hooks/useThrottling.js');
 
 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", { id: id, onChange: handleChange, ...props }), suffixElement] }));
+    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,53 @@
+'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 }));
+};
+Object.assign(DropdownRoot, {
+    Button: DropdownButton,
+    Options: DropdownOptions,
+    Option: DropdownOption,
+    Viewer: DropdownViewer,
+});

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/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';
 export * from './inputs';
+export * from './selectors';
+export * from './common';

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/hooks/index.d.ts

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

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/index.d.ts

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

package/index.js

@@ -1,3 +1,4 @@
-export { default as Button } from './buttons/Button/Button.js';
-export { default as Input } from './inputs/Input/Input.js';
+import 'react/jsx-runtime';
 import 'react';
+import './selectors/Dropdown/Dropdown.js';
+export { DropdownContext, useDropdownContext } from './hooks/useDropdown.js';

package/inputs/Input/Input.js

@@ -3,7 +3,7 @@ import useThrottling from '../../hooks/useThrottling.js';
 
 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", { id: id, onChange: handleChange, ...props }), suffixElement] }));
+    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.27",
+  "version": "0.2.29",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -28,45 +28,30 @@
       "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,51 @@
+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 }));
+};
+Object.assign(DropdownRoot, {
+    Button: DropdownButton,
+    Options: DropdownOptions,
+    Option: DropdownOption,
+    Viewer: DropdownViewer,
+});

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/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';
 export * from './inputs';
+export * from './selectors';
+export * from './common';

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/version.txt

@@ -1 +1 @@
-0.2.27
+0.2.29

package/cjs/types/buttons/types.d.ts

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

package/cjs/types/index.js

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

package/cjs/types/inputs/types.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    suffixElement?: ReactElement | ReactNode;
-    prefixElement?: ReactElement | ReactNode;
-    wrapperStyle?: CSSProperties;
-    wrapperClass?: string | string[];
-}

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/buttons/types.d.ts

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

package/types/index.js

@@ -1 +0,0 @@
-

package/types/inputs/types.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    suffixElement?: ReactElement | ReactNode;
-    prefixElement?: ReactElement | ReactNode;
-    wrapperStyle?: CSSProperties;
-    wrapperClass?: string | string[];
-}

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';