jy-headless 0.2.34 → 0.2.36

package/cjs/index.js

@@ -3,6 +3,7 @@
 var Button = require('./buttons/Button/Button.js');
 var Input = require('./inputs/Input/Input.js');
 var ImageInput = require('./inputs/ImageInput/ImageInput.js');
+var CheckboxList = require('./inputs/checkboxList/CheckboxList.js');
 var Dropdown = require('./selectors/Dropdown/Dropdown.js');
 var Tooltip = require('./tooltip/Tooltip/Tooltip.js');
 require('react');
@@ -12,6 +13,7 @@ function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: nu
 
 var Button__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Button);
 var Input__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Input);
+var CheckboxList__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(CheckboxList);
 var Dropdown__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Dropdown);
 var Tooltip__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Tooltip);
 
@@ -20,6 +22,7 @@ var Tooltip__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Tooltip);
 exports.Button = Button__namespace;
 exports.Input = Input__namespace;
 exports.ImageInput = ImageInput;
+exports.CheckboxList = CheckboxList__namespace;
 exports.Dropdown = Dropdown__namespace;
 exports.Tooltip = Tooltip__namespace;
 exports.DropdownContext = useDropdown.DropdownContext;

package/cjs/inputs/checkboxList/CheckboxList.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxItemProps, CheckboxProps } from '../../types';
+declare const CheckboxList: (<T>({ children, values, onChange, max, ...props }: CheckboxProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Item: <T>({ value, children, id, ...props }: CheckboxItemProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default CheckboxList;

package/cjs/inputs/checkboxList/CheckboxList.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const CheckboxContext = react.createContext(null);
+const CheckBoxRoot = ({ children, values, onChange, max = Infinity, ...props }) => {
+    const onToggle = (checked, isCheck) => {
+        if (isCheck && values.length < max) {
+            onChange([...values, checked]);
+        }
+        else {
+            onChange(values.filter((it) => it != checked));
+        }
+    };
+    return (jsxRuntime.jsx("div", { ...props, children: jsxRuntime.jsx(CheckboxContext.Provider, { value: { values, onToggle }, children: children }) }));
+};
+const CheckBoxItem = ({ value, children, id, ...props }) => {
+    const context = react.useContext(CheckboxContext);
+    if (!context) {
+        logCannotFindContextError('CheckboxList');
+        return null;
+    }
+    const uuid = react.useMemo(() => id || crypto.randomUUID(), []);
+    const { values, onToggle } = context;
+    return (jsxRuntime.jsxs("div", { ...props, children: [jsxRuntime.jsx("input", { id: uuid, checked: values.includes(value), onChange: (e) => onToggle(value, e.target.checked), type: 'checkbox' }), jsxRuntime.jsxs("label", { htmlFor: uuid, children: [" ", children] })] }));
+};
+const CheckboxList = Object.assign(CheckBoxRoot, {
+    Item: CheckBoxItem,
+});
+
+module.exports = CheckboxList;

package/cjs/inputs/checkboxList/index.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxItemProps, CheckboxProps } from '../../types';
+declare const CheckboxList: (<T>({ children, values, onChange, max, ...props }: CheckboxProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Item: <T>({ value, children, id, ...props }: CheckboxItemProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default CheckboxList;

package/cjs/inputs/checkboxList/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const CheckboxContext = react.createContext(null);
+const CheckBoxRoot = ({ children, values, onChange, max = Infinity, ...props }) => {
+    const onToggle = (checked, isCheck) => {
+        if (isCheck && values.length < max) {
+            onChange([...values, checked]);
+        }
+        else {
+            onChange(values.filter((it) => it != checked));
+        }
+    };
+    return (jsxRuntime.jsx("div", { ...props, children: jsxRuntime.jsx(CheckboxContext.Provider, { value: { values, onToggle }, children: children }) }));
+};
+const CheckBoxItem = ({ value, children, id, ...props }) => {
+    const context = react.useContext(CheckboxContext);
+    if (!context) {
+        logCannotFindContextError('CheckboxList');
+        return null;
+    }
+    const uuid = react.useMemo(() => id || crypto.randomUUID(), []);
+    const { values, onToggle } = context;
+    return (jsxRuntime.jsxs("div", { ...props, children: [jsxRuntime.jsx("input", { id: uuid, checked: values.includes(value), onChange: (e) => onToggle(value, e.target.checked), type: 'checkbox' }), jsxRuntime.jsxs("label", { htmlFor: uuid, children: [" ", children] })] }));
+};
+const CheckboxList = Object.assign(CheckBoxRoot, {
+    Item: CheckBoxItem,
+});
+
+module.exports = CheckboxList;

package/cjs/inputs/index.d.ts

@@ -1,2 +1,3 @@
 export * as Input from './Input/Input';
 export * as ImageInput from './ImageInput/ImageInput';
+export * as CheckboxList from './checkboxList/CheckboxList';

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

@@ -1,4 +1,5 @@
 import { ChangeEvent, CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { DivAttribute } from '../common';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     suffixElement?: ReactElement | ReactNode;
     prefixElement?: ReactElement | ReactNode;
@@ -21,3 +22,15 @@ export interface ImageInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     onChange?: (file: File) => void;
     value?: File;
 }
+export interface CheckboxProps<T> extends Omit<DivAttribute<T>, 'onChange'> {
+    values: T[];
+    onChange: (newValue: T[]) => void;
+    max?: number;
+}
+export interface CheckboxItemProps<T> extends DivAttribute<T> {
+    value: T;
+}
+export interface CheckboxContextData<T> {
+    onToggle: (newValue: T, isCheck: boolean) => void;
+    values: T[];
+}

package/cjs/utils/MessageUtils.d.ts

@@ -0,0 +1 @@
+declare const logCannotFindContextError: (componentName: string) => never;

package/index.js

@@ -4,6 +4,8 @@ import * as Input from './inputs/Input/Input.js';
 export { Input };
 import * as ImageInput from './inputs/ImageInput/ImageInput.js';
 export { ImageInput };
+import * as CheckboxList from './inputs/checkboxList/CheckboxList.js';
+export { CheckboxList };
 import * as Dropdown from './selectors/Dropdown/Dropdown.js';
 export { Dropdown };
 import * as Tooltip from './tooltip/Tooltip/Tooltip.js';

package/inputs/checkboxList/CheckboxList.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxItemProps, CheckboxProps } from '../../types';
+declare const CheckboxList: (<T>({ children, values, onChange, max, ...props }: CheckboxProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Item: <T>({ value, children, id, ...props }: CheckboxItemProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default CheckboxList;

package/inputs/checkboxList/CheckboxList.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo } from 'react';
+
+const CheckboxContext = createContext(null);
+const CheckBoxRoot = ({ children, values, onChange, max = Infinity, ...props }) => {
+    const onToggle = (checked, isCheck) => {
+        if (isCheck && values.length < max) {
+            onChange([...values, checked]);
+        }
+        else {
+            onChange(values.filter((it) => it != checked));
+        }
+    };
+    return (jsx("div", { ...props, children: jsx(CheckboxContext.Provider, { value: { values, onToggle }, children: children }) }));
+};
+const CheckBoxItem = ({ value, children, id, ...props }) => {
+    const context = useContext(CheckboxContext);
+    if (!context) {
+        logCannotFindContextError('CheckboxList');
+        return null;
+    }
+    const uuid = useMemo(() => id || crypto.randomUUID(), []);
+    const { values, onToggle } = context;
+    return (jsxs("div", { ...props, children: [jsx("input", { id: uuid, checked: values.includes(value), onChange: (e) => onToggle(value, e.target.checked), type: 'checkbox' }), jsxs("label", { htmlFor: uuid, children: [" ", children] })] }));
+};
+const CheckboxList = Object.assign(CheckBoxRoot, {
+    Item: CheckBoxItem,
+});
+
+export { CheckboxList as default };

package/inputs/checkboxList/index.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxItemProps, CheckboxProps } from '../../types';
+declare const CheckboxList: (<T>({ children, values, onChange, max, ...props }: CheckboxProps<T>) => import("react/jsx-runtime").JSX.Element) & {
+    Item: <T>({ value, children, id, ...props }: CheckboxItemProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default CheckboxList;

package/inputs/checkboxList/index.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo } from 'react';
+
+const CheckboxContext = createContext(null);
+const CheckBoxRoot = ({ children, values, onChange, max = Infinity, ...props }) => {
+    const onToggle = (checked, isCheck) => {
+        if (isCheck && values.length < max) {
+            onChange([...values, checked]);
+        }
+        else {
+            onChange(values.filter((it) => it != checked));
+        }
+    };
+    return (jsx("div", { ...props, children: jsx(CheckboxContext.Provider, { value: { values, onToggle }, children: children }) }));
+};
+const CheckBoxItem = ({ value, children, id, ...props }) => {
+    const context = useContext(CheckboxContext);
+    if (!context) {
+        logCannotFindContextError('CheckboxList');
+        return null;
+    }
+    const uuid = useMemo(() => id || crypto.randomUUID(), []);
+    const { values, onToggle } = context;
+    return (jsxs("div", { ...props, children: [jsx("input", { id: uuid, checked: values.includes(value), onChange: (e) => onToggle(value, e.target.checked), type: 'checkbox' }), jsxs("label", { htmlFor: uuid, children: [" ", children] })] }));
+};
+const CheckboxList = Object.assign(CheckBoxRoot, {
+    Item: CheckBoxItem,
+});
+
+export { CheckboxList as default };

package/inputs/index.d.ts

@@ -1,2 +1,3 @@
 export * as Input from './Input/Input';
 export * as ImageInput from './ImageInput/ImageInput';
+export * as CheckboxList from './checkboxList/CheckboxList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jy-headless",
-  "version": "0.2.34",
+  "version": "0.2.36",
   "description": "A lightweight and customizable headless UI library for React components",
   "license": "MIT",
   "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -43,6 +43,16 @@
       "require": "./cjs/types/tooltip/index.js",
       "types": "./types/tooltip/index.d.ts"
     },
+    "./cjs/inputs/checkboxList": {
+      "import": "./cjs/inputs/checkboxList/index.js",
+      "require": "./cjs/cjs/inputs/checkboxList/index.js",
+      "types": "./cjs/inputs/checkboxList/index.d.ts"
+    },
+    "./CheckboxList": {
+      "import": "./inputs/checkboxList/CheckboxList.js",
+      "require": "./cjs/inputs/checkboxList/CheckboxList.js",
+      "types": "./inputs/checkboxList/CheckboxList.d.ts"
+    },
     "./ImageInput": {
       "import": "./inputs/ImageInput/ImageInput.js",
       "require": "./cjs/inputs/ImageInput/ImageInput.js",
@@ -68,6 +78,11 @@
       "require": "./cjs/cjs/types/tooltip/index.js",
       "types": "./cjs/types/tooltip/index.d.ts"
     },
+    "./inputs/checkboxList": {
+      "import": "./inputs/checkboxList/index.js",
+      "require": "./cjs/inputs/checkboxList/index.js",
+      "types": "./inputs/checkboxList/index.d.ts"
+    },
     "./types/tooltip": {
       "import": "./types/tooltip/index.js",
       "require": "./cjs/types/tooltip/index.js",

package/types/inputs/index.d.ts

@@ -1,4 +1,5 @@
 import { ChangeEvent, CSSProperties, InputHTMLAttributes, ReactElement, ReactNode } from 'react';
+import { DivAttribute } from '../common';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     suffixElement?: ReactElement | ReactNode;
     prefixElement?: ReactElement | ReactNode;
@@ -21,3 +22,15 @@ export interface ImageInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     onChange?: (file: File) => void;
     value?: File;
 }
+export interface CheckboxProps<T> extends Omit<DivAttribute<T>, 'onChange'> {
+    values: T[];
+    onChange: (newValue: T[]) => void;
+    max?: number;
+}
+export interface CheckboxItemProps<T> extends DivAttribute<T> {
+    value: T;
+}
+export interface CheckboxContextData<T> {
+    onToggle: (newValue: T, isCheck: boolean) => void;
+    values: T[];
+}

package/utils/MessageUtils.d.ts

@@ -0,0 +1 @@
+declare const logCannotFindContextError: (componentName: string) => never;

package/version.txt

@@ -1 +1 @@
-0.2.34
+0.2.36