@ioca/react 1.3.93 → 1.3.95

package/lib/es/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../../packages/components/select/select.tsx"],"sourcesContent":["import { UnfoldMoreRound } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { debounce } from \"radash\";\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\nimport \"../../css/input.css\";\nimport { formatOption } from \"../../js/utils\";\nimport { TOption } from \"../../type\";\nimport Popup from \"../popup\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { Options, displayValue } from \"./options\";\nimport { ISelect } from \"./type\";\n\nconst Select = (props: ISelect) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tname,\n\t\tlabel,\n\t\tvalue = \"\",\n\t\tplaceholder,\n\t\toptions = [],\n\t\tmultiple,\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tstyle,\n\t\tclassName,\n\t\tmessage,\n\t\tstatus = \"normal\",\n\t\thideClear,\n\t\thideArrow,\n\t\tmaxDisplay,\n\t\tborder,\n\t\tfilter,\n\t\ttip,\n\t\tfilterPlaceholder = \"...\",\n\t\tpopupProps,\n\t\tonSelect,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive({\n\t\tinputValue: \"\",\n\t\tfilterValue: \"\",\n\t\tvalue,\n\t\tloading: false,\n\t});\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst formattedOptions = useMemo(() => formatOption(options), [options]);\n\n\tconst filterOptions = useMemo(() => {\n\t\tconst { filterValue: fv } = state;\n\t\tif (!fv || !filter) return formattedOptions;\n\n\t\tconst filterFn =\n\t\t\ttypeof filter === \"function\"\n\t\t\t\t? filter\n\t\t\t\t: (opt) => opt.value.includes(fv) || opt.label.includes(fv);\n\n\t\treturn formattedOptions.filter(filterFn);\n\t}, [formattedOptions, filter, state.filterValue]);\n\n\tconst changeValue = (v: any) => {\n\t\tstate.value = v;\n\t\tonChange?.(v);\n\t};\n\n\tconst displayLabel = useMemo(() => {\n\t\tif (multiple) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst option = formattedOptions.find(\n\t\t\t(opt) => opt.value === state.value\n\t\t);\n\t\treturn option ? option.label : state.value;\n\t}, [state.value, formattedOptions]);\n\n\tconst handleSelect = (value: any, option?: TOption) => {\n\t\tonSelect?.(value, option);\n\n\t\tif (multiple) {\n\t\t\tconst values = [...(state.value as any[])];\n\t\t\tconst i = values.findIndex((v) => v === value);\n\n\t\t\ti > -1 ? values.splice(i, 1) : values.push(value);\n\t\t\tchangeValue(values as any);\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetActive(false);\n\t\tchangeValue(value);\n\t};\n\n\tconst handleVisibleChange = (visible: boolean) => {\n\t\tsetActive(visible);\n\n\t\tif (!filter) return;\n\n\t\tstate.filterValue = \"\";\n\t};\n\n\tconst handleHelperClick = (e) => {\n\t\te.stopPropagation();\n\t\tsetActive(true);\n\t\tif (!active) return;\n\n\t\tchangeValue(multiple ? [] : \"\");\n\t};\n\n\tconst handleFilterChange = debounce(\n\t\t{ delay: 400 },\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst v = e.target.value;\n\t\t\tstate.filterValue = v;\n\t\t}\n\t);\n\n\tconst handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tstate.filterValue = e.target.value;\n\t};\n\n\tuseEffect(() => {\n\t\tstate.value = value;\n\t}, [value]);\n\n\tconst hasValue = multiple\n\t\t? (state.value as any[]).length > 0\n\t\t: !!state.value;\n\tconst clearable = !hideClear && active && hasValue;\n\tconst text = message ?? tip;\n\n\treturn (\n\t\t<label\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && <span className='i-input-label-text'>{label}</span>}\n\n\t\t\t<Popup\n\t\t\t\tposition='bottom'\n\t\t\t\tarrow={false}\n\t\t\t\tfitSize\n\t\t\t\t{...popupProps}\n\t\t\t\tvisible={active}\n\t\t\t\ttrigger='none'\n\t\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\t\tcontent={\n\t\t\t\t\t<Options\n\t\t\t\t\t\toptions={filterOptions}\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\tmultiple={multiple}\n\t\t\t\t\t\tfilter={!!filter}\n\t\t\t\t\t\tfilterPlaceholder={filterPlaceholder}\n\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\tonFilter={handleFilterChange}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\t\"i-input-focus\": active,\n\t\t\t\t\t})}\n\t\t\t\t\tonClick={() => setActive(true)}\n\t\t\t\t>\n\t\t\t\t\t{prepend}\n\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttype='hidden'\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{multiple ? (\n\t\t\t\t\t\thasValue ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-input i-select\", {\n\t\t\t\t\t\t\t\t\t\"i-select-multiple\": multiple,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{displayValue({\n\t\t\t\t\t\t\t\t\toptions: formattedOptions,\n\t\t\t\t\t\t\t\t\tvalue: state.value,\n\t\t\t\t\t\t\t\t\tmultiple,\n\t\t\t\t\t\t\t\t\tmaxDisplay,\n\t\t\t\t\t\t\t\t\tonSelect: handleSelect,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t{!multiple && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tvalue={active ? state.filterValue : displayLabel}\n\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\tplaceholder={displayLabel || placeholder}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\treadOnly={!filter}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<Helpericon\n\t\t\t\t\t\tactive={!hideArrow}\n\t\t\t\t\t\ticon={clearable ? undefined : <UnfoldMoreRound />}\n\t\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{append}\n\t\t\t\t</div>\n\t\t\t</Popup>\n\n\t\t\t{text && <span className='i-input-message'>{text}</span>}\n\t\t</label>\n\t);\n};\n\nexport default Select;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../../../packages/components/select/select.tsx"],"sourcesContent":["import { UnfoldMoreRound } from \"@ricons/material\";\nimport { useReactive } from \"ahooks\";\nimport classNames from \"classnames\";\nimport { debounce } from \"radash\";\nimport { ChangeEvent, useEffect, useMemo, useState } from \"react\";\nimport \"../../css/input.css\";\nimport { formatOption } from \"../../js/utils\";\nimport { TOption } from \"../../type\";\nimport Popup from \"../popup\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport { Options, displayValue } from \"./options\";\nimport { ISelect } from \"./type\";\n\nconst Select = (props: ISelect) => {\n\tconst {\n\t\tref,\n\t\ttype = \"text\",\n\t\tname,\n\t\tlabel,\n\t\tvalue = \"\",\n\t\tplaceholder,\n\t\toptions = [],\n\t\tmultiple,\n\t\tprepend,\n\t\tappend,\n\t\tlabelInline,\n\t\tstyle,\n\t\tclassName,\n\t\tmessage,\n\t\tstatus = \"normal\",\n\t\thideClear,\n\t\thideArrow,\n\t\tmaxDisplay,\n\t\tborder,\n\t\tfilter,\n\t\ttip,\n\t\tfilterPlaceholder = \"...\",\n\t\tpopupProps,\n\t\tonSelect,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst state = useReactive({\n\t\tinputValue: \"\",\n\t\tfilterValue: \"\",\n\t\tvalue,\n\t\tloading: false,\n\t});\n\n\tconst [active, setActive] = useState<boolean>(false);\n\n\tconst formattedOptions = useMemo(() => formatOption(options), [options]);\n\n\tconst filterOptions = useMemo(() => {\n\t\tconst { filterValue: fv } = state;\n\t\tif (!fv || !filter) return formattedOptions;\n\n\t\tconst filterFn =\n\t\t\ttypeof filter === \"function\"\n\t\t\t\t? filter\n\t\t\t\t: (opt) => opt.value.includes(fv) || opt.label.includes(fv);\n\n\t\treturn formattedOptions.filter(filterFn);\n\t}, [formattedOptions, filter, state.filterValue]);\n\n\tconst changeValue = (v: any) => {\n\t\tstate.value = v;\n\t\tonChange?.(v);\n\t};\n\n\tconst displayLabel = useMemo(() => {\n\t\tif (multiple) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst option = formattedOptions.find(\n\t\t\t(opt) => opt.value === state.value\n\t\t);\n\t\treturn option ? option.label : state.value;\n\t}, [state.value, formattedOptions]);\n\n\tconst handleSelect = (value: any, option?: TOption) => {\n\t\tonSelect?.(value, option);\n\n\t\tif (multiple) {\n\t\t\tconst values = [...(state.value as any[])];\n\t\t\tconst i = values.findIndex((v) => v === value);\n\n\t\t\ti > -1 ? values.splice(i, 1) : values.push(value);\n\t\t\tchangeValue(values as any);\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetActive(false);\n\t\tchangeValue(value);\n\t};\n\n\tconst handleVisibleChange = (visible: boolean) => {\n\t\tsetActive(visible);\n\n\t\tif (!filter) return;\n\n\t\tstate.filterValue = \"\";\n\t};\n\n\tconst handleHelperClick = (e) => {\n\t\te.stopPropagation();\n\t\tsetActive(true);\n\t\tif (!active) return;\n\n\t\tchangeValue(multiple ? [] : \"\");\n\t};\n\n\tconst handleFilterChange = debounce(\n\t\t{ delay: 400 },\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst v = e.target.value;\n\t\t\tstate.filterValue = v;\n\t\t}\n\t);\n\n\tconst handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n\t\tstate.filterValue = e.target.value;\n\t};\n\n\tuseEffect(() => {\n\t\tstate.value = value;\n\t}, [value]);\n\n\tconst hasValue = multiple\n\t\t? (state.value as any[]).length > 0\n\t\t: !!state.value;\n\tconst clearable = !hideClear && active && hasValue;\n\tconst text = message ?? tip;\n\n\treturn (\n\t\t<label\n\t\t\tclassName={classNames(\"i-input-label\", className, {\n\t\t\t\t\"i-input-inline\": labelInline,\n\t\t\t})}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label && <span className='i-input-label-text'>{label}</span>}\n\n\t\t\t<Popup\n\t\t\t\tposition='bottom'\n\t\t\t\tarrow={false}\n\t\t\t\tfitSize\n\t\t\t\toffset={0}\n\t\t\t\t{...popupProps}\n\t\t\t\tvisible={active}\n\t\t\t\ttrigger='none'\n\t\t\t\tonVisibleChange={handleVisibleChange}\n\t\t\t\tcontent={\n\t\t\t\t\t<Options\n\t\t\t\t\t\toptions={filterOptions}\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\tmultiple={multiple}\n\t\t\t\t\t\tfilter={!!filter}\n\t\t\t\t\t\tfilterPlaceholder={filterPlaceholder}\n\t\t\t\t\t\tonSelect={handleSelect}\n\t\t\t\t\t\tonFilter={handleFilterChange}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-input-item\", {\n\t\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\n\t\t\t\t\t\t\"i-input-borderless\": !border,\n\t\t\t\t\t\t\"i-input-focus\": active,\n\t\t\t\t\t})}\n\t\t\t\t\tonClick={() => setActive(true)}\n\t\t\t\t>\n\t\t\t\t\t{prepend}\n\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttype='hidden'\n\t\t\t\t\t\tvalue={state.value}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{multiple ? (\n\t\t\t\t\t\thasValue ? (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={classNames(\"i-input i-select\", {\n\t\t\t\t\t\t\t\t\t\"i-select-multiple\": multiple,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{displayValue({\n\t\t\t\t\t\t\t\t\toptions: formattedOptions,\n\t\t\t\t\t\t\t\t\tvalue: state.value,\n\t\t\t\t\t\t\t\t\tmultiple,\n\t\t\t\t\t\t\t\t\tmaxDisplay,\n\t\t\t\t\t\t\t\t\tonSelect: handleSelect,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t{!multiple && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tvalue={active ? state.filterValue : displayLabel}\n\t\t\t\t\t\t\tclassName='i-input i-select'\n\t\t\t\t\t\t\tplaceholder={displayLabel || placeholder}\n\t\t\t\t\t\t\tonChange={handleInputChange}\n\t\t\t\t\t\t\treadOnly={!filter}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<Helpericon\n\t\t\t\t\t\tactive={!hideArrow}\n\t\t\t\t\t\ticon={clearable ? undefined : <UnfoldMoreRound />}\n\t\t\t\t\t\tonClick={handleHelperClick}\n\t\t\t\t\t/>\n\n\t\t\t\t\t{append}\n\t\t\t\t</div>\n\t\t\t</Popup>\n\n\t\t\t{text && <span className='i-input-message'>{text}</span>}\n\t\t</label>\n\t);\n};\n\nexport default Select;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/lib/es/index.js

@@ -38,4 +38,5 @@ export { default as Tree } from './components/tree/tree.js';
 export { default as Upload } from './components/upload/upload.js';
 export { default as Video } from './components/video/video.js';
 export { default as usePreview } from './js/usePreview/index.js';
+export { default as useTheme } from './js/useTheme/index.js';
 //# sourceMappingURL=index.js.map

package/lib/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/es/js/useTheme/index.js

@@ -0,0 +1,27 @@
+import { useLocalStorageState } from 'ahooks';
+import { useEffect } from 'react';
+
+const useTheme = (props) => {
+    const { key = "ioca-react-theme", defaultValue, listenStorageChange, } = props ?? {};
+    const [theme, setTheme] = useLocalStorageState(key, {
+        defaultValue: defaultValue ?? "",
+        listenStorageChange,
+    });
+    useEffect(() => {
+        const cls = document.documentElement.classList;
+        const cns = Array.from(cls);
+        const pre = cns.find((n) => n.startsWith("theme-")) ?? "";
+        if (pre) {
+            cls.replace(pre, theme || "theme-auto");
+            return;
+        }
+        theme && cls.add(theme);
+    }, [theme]);
+    return {
+        theme,
+        setTheme,
+    };
+};
+
+export { useTheme as default };
+//# sourceMappingURL=index.js.map

package/lib/es/js/useTheme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../packages/js/useTheme/index.ts"],"sourcesContent":["import { useLocalStorageState } from \"ahooks\";\nimport { useEffect } from \"react\";\nimport { ITheme } from \"./type\";\n\nconst useTheme = (props?: ITheme) => {\n\tconst {\n\t\tkey = \"ioca-react-theme\",\n\t\tdefaultValue,\n\t\tlistenStorageChange,\n\t} = props ?? {};\n\tconst [theme, setTheme] = useLocalStorageState<string>(key, {\n\t\tdefaultValue: defaultValue ?? \"\",\n\t\tlistenStorageChange,\n\t});\n\n\tuseEffect(() => {\n\t\tconst cls = document.documentElement.classList;\n\t\tconst cns = Array.from(cls);\n\t\tconst pre = cns.find((n) => n.startsWith(\"theme-\")) ?? \"\";\n\n\t\tif (pre) {\n\t\t\tcls.replace(pre, theme || \"theme-auto\");\n\t\t\treturn;\n\t\t}\n\n\t\ttheme && cls.add(theme);\n\t}, [theme]);\n\n\treturn {\n\t\ttheme,\n\t\tsetTheme,\n\t};\n};\n\nexport default useTheme;\n"],"names":[],"mappings":";;;AAIA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAI;AACnC,IAAA,MAAM,EACL,GAAG,GAAG,kBAAkB,EACxB,YAAY,EACZ,mBAAmB,GACnB,GAAG,KAAK,IAAI,EAAE;IACf,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAS,GAAG,EAAE;QAC3D,YAAY,EAAE,YAAY,IAAI,EAAE;QAChC,mBAAmB;AACnB,KAAA,CAAC;IAEF,SAAS,CAAC,MAAK;AACd,QAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS;QAC9C,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;QAC3B,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE;QAEzD,IAAI,GAAG,EAAE;YACR,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,IAAI,YAAY,CAAC;YACvC;;AAGD,QAAA,KAAK,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,OAAO;QACN,KAAK;QACL,QAAQ;KACR;AACF;;;;"}

package/lib/index.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, pick, title } from 'radash';
-import { useMemo, Children, cloneElement, useEffect, createElement, isValidElement, useState, useRef, Fragment as Fragment$1, useTransition, useLayoutEffect, useImperativeHandle, createContext, useContext } from 'react';
+import { useMemo, Children, cloneElement, useEffect, createElement, isValidElement, useState, useRef, Fragment as Fragment$1, useTransition, createContext, useContext, useLayoutEffect, useImperativeHandle } from 'react';
 import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, RedoRound, UndoRound, ClearAllRound, PauseRound, PlayArrowRound, StopRound, VolumeOffRound, VolumeDownRound, FullscreenExitRound, FullscreenRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, HideImageTwotone, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
-import { useReactive, useCreation, useSize } from 'ahooks';
+import { useReactive, useCreation, useSize, useLocalStorageState } from 'ahooks';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
 import xss, { escapeAttrValue } from 'xss';
@@ -1176,6 +1176,8 @@ const List$1 = (props) => {
 };
 List$1.Item = Item$4;
 
+const ModalContext = createContext(false);
+
 const Content$2 = (props) => {
     const { ref, getContainer = (trigger) => {
         if (typeof document === "undefined")
@@ -1214,14 +1216,16 @@ const Content$2 = (props) => {
 };
 
 function Popup(props) {
-    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, fixed, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align, fitSize, watchResize, clickOutside = true, disabled, referToWindow, style, className, getContainer, children, onVisibleChange, } = props;
+    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, fixed, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align, fitSize, watchResize, clickOutside = true, disabled, style, className, getContainer, children, onVisibleChange, } = props;
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const timerRef = useRef(null);
     const statusRef = useRef("");
+    const isInModal = useContext(ModalContext);
+    const refWindow = isInModal || fixed;
     const state = useReactive({
         show: false,
-        style: { position: fixed ? "fixed" : "absolute" },
+        style: { position: refWindow ? "fixed" : "absolute" },
         arrowProps: {},
     });
     useMouseUp((e) => {
@@ -1259,7 +1263,7 @@ function Popup(props) {
                     gap,
                     offset,
                     align,
-                    refWindow: referToWindow,
+                    refWindow,
                 });
                 state.style = {
                     ...state.style,
@@ -1370,7 +1374,7 @@ function Popup(props) {
             gap,
             offset,
             align,
-            refWindow: referToWindow,
+            refWindow,
         });
         Object.assign(state, {
             style: { ...state.style, left, top },
@@ -1822,11 +1826,11 @@ function useConfig(configs, formProps) {
     const node = useMemo(() => {
         return (jsx(Form, { ...formProps, onChange: handleChange, form: form, children: configs.map((config) => {
                 const { name, label, required, component: El, componentProps = {}, colspan = 1, render, shouldUpdate, shouldRender, } = config;
-                const { className } = componentProps;
+                const { className, style } = componentProps;
                 if (shouldRender && !shouldRender(values, form)) {
                     return jsx(Fragment$1, {}, name);
                 }
-                return (jsx(Field, { name: name, required: required, children: render?.(config, values) ?? (jsx(El, { label: label, required: required, ...componentProps, className: `${className} ${colspan !== 1
+                return (jsx(Field, { name: name, required: required, children: render?.(config, values) ?? (jsx(El, { label: label, required: required, ...componentProps, className: `${className ?? ""} ${colspan !== 1
                             ? `colspan-${colspan}`
                             : ""}` })) }, name));
             }) }));
@@ -1838,7 +1842,7 @@ function useConfig(configs, formProps) {
 }
 
 const Form = (props) => {
-    const { form = {}, rules, initialValues, style, className, width, columns = 1, gap = "1em", labelInline, labelWidth, labelRight, children, onKeyDown, onEnter, onChange, ...restProps } = props;
+    const { form = {}, rules, initialValues, style, className, width, columns, itemMaxWidth, gap = "1em", labelInline, labelWidth, labelRight, children, onKeyDown, onEnter, onChange, ...restProps } = props;
     const handleKeyDown = (e) => {
         onKeyDown?.(e);
         if (e.keyCode !== 13)
@@ -1846,10 +1850,14 @@ const Form = (props) => {
         onEnter?.(e, form.data, form);
     };
     const gridColumns = useMemo(() => {
-        if (!columns)
+        if (!columns && !itemMaxWidth)
             return;
-        if (typeof columns === "number")
+        if (itemMaxWidth) {
+            return `repeat(auto-fill, minmax(${itemMaxWidth}, 1fr))`;
+        }
+        if (typeof columns === "number") {
             return `minmax(0, 1fr) `.repeat(columns);
+        }
         return columns;
     }, [columns]);
     useEffect(() => {
@@ -2000,7 +2008,7 @@ function Modal(props) {
             "i-modal-customized": customized,
             "i-modal-active": active,
             fixed,
-        }, className), style: style, onClick: handleBackdropClick, "aria-modal": 'true', "aria-hidden": !active, children: jsxs("div", { className: classNames("i-modal", {
+        }, className), style: style, onClick: handleBackdropClick, "aria-modal": 'true', "aria-hidden": !active, children: jsx("div", { className: classNames("i-modal", {
                 bounced,
                 shadow: !hideShadow,
             }), style: {
@@ -2010,7 +2018,7 @@ function Modal(props) {
                 e.stopPropagation();
                 handleClick();
                 onClick?.(e);
-            }, role: 'dialog', "aria-labelledby": title ? "modal-title" : undefined, ...restProps, children: [customized && children, !customized && (jsx(Content$1, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document?.body ?? null);
+            }, role: 'dialog', "aria-labelledby": title ? "modal-title" : undefined, ...restProps, children: jsxs(ModalContext.Provider, { value: true, children: [customized && children, !customized && (jsx(Content$1, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }) }), document?.body ?? null);
 }
 Modal.useModal = useModal;
 
@@ -3188,7 +3196,7 @@ const Select = (props) => {
     const text = message ?? tip;
     return (jsxs("label", { className: classNames("i-input-label", className, {
             "i-input-inline": labelInline,
-        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), jsx(Popup, { position: 'bottom', arrow: false, fitSize: true, ...popupProps, visible: active, trigger: 'none', onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: state.value, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
+        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), jsx(Popup, { position: 'bottom', arrow: false, fitSize: true, offset: 0, ...popupProps, visible: active, trigger: 'none', onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: state.value, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
                         [`i-input-${status}`]: status !== "normal",
                         "i-input-borderless": !border,
                         "i-input-focus": active,
@@ -4619,4 +4627,26 @@ const Upload = (props) => {
                     }) }), state.message && (jsx("span", { className: 'i-upload-message', children: state.message })), state.files.length < limit && (jsxs("label", { children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), trigger] }))] }) }));
 };
 
-export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview };
+const useTheme = (props) => {
+    const { key = "ioca-react-theme", defaultValue, listenStorageChange, } = props ?? {};
+    const [theme, setTheme] = useLocalStorageState(key, {
+        defaultValue: defaultValue ?? "",
+        listenStorageChange,
+    });
+    useEffect(() => {
+        const cls = document.documentElement.classList;
+        const cns = Array.from(cls);
+        const pre = cns.find((n) => n.startsWith("theme-")) ?? "";
+        if (pre) {
+            cls.replace(pre, theme || "theme-auto");
+            return;
+        }
+        theme && cls.add(theme);
+    }, [theme]);
+    return {
+        theme,
+        setTheme,
+    };
+};
+
+export { Affix, Badge, Button, Card, Checkbox, Collapse, ColorPicker, Datagrid, Datepicker as DatePicker, Description, Drawer, Dropdown, Editor, Flex, Form, Icon, Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Resizable, River, Select, Step, Swiper, Tabs, Tag, Text, TimePicker, Tree, Upload, Video, usePreview, useTheme };

package/lib/types/components/form/type.d.ts

@@ -14,6 +14,7 @@ interface IForm extends Omit<HTMLAttributes<HTMLFormElement>, "onChange"> {
     columns?: number | string;
     initialValues?: Record<string, any>;
     width?: string | number;
+    itemMaxWidth?: string;
     gap?: string | number;
     labelWidth?: string;
     labelInline?: boolean;

package/lib/types/components/popup/type.d.ts

@@ -18,7 +18,6 @@ interface IPopup {
     watchResize?: boolean;
     clickOutside?: boolean;
     disabled?: boolean;
-    referToWindow?: boolean;
     style?: CSSProperties;
     children?: ReactNode;
     className?: string;

package/lib/types/index.d.ts

@@ -38,3 +38,4 @@ export { default as Tree } from './components/tree/tree.js';
 export { default as Upload } from './components/upload/upload.js';
 export { default as Video } from './components/video/video.js';
 export { default as usePreview } from './js/usePreview/index.js';
+export { default as useTheme } from './js/useTheme/index.js';

package/lib/types/js/useTheme/index.d.ts

@@ -0,0 +1,9 @@
+import * as ahooks_lib_createUseStorageState from '/Users/iann/codes/ioca-react/node_modules/ahooks/lib/createUseStorageState/index.d.ts';
+import { ITheme } from './type.js';
+
+declare const useTheme: (props?: ITheme) => {
+    theme: string | undefined;
+    setTheme: (value?: ahooks_lib_createUseStorageState.SetState<string> | undefined) => void;
+};
+
+export { useTheme as default };

package/lib/types/js/useTheme/type.d.ts

@@ -0,0 +1,7 @@
+interface ITheme {
+    listenStorageChange?: boolean;
+    defaultValue?: string;
+    key?: string;
+}
+
+export type { ITheme };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ioca/react",
-	"version": "1.3.93",
+	"version": "1.3.95",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",