amotify 0.2.279 → 0.2.280

package/dist/fn/DataGrid/index.d.ts

@@ -1,5 +1,7 @@
+import { Records } from 'jmini';
 import { ReactElement, StyleProps } from '../../@declares';
 import React from 'react';
+import Input from '../Input';
 declare namespace DataGrid {
     type customTableHTMLAttributes<T> = Omit<React.TableHTMLAttributes<T>, 'border'>;
     type Table = StyleProps.BasicElement & customTableHTMLAttributes<HTMLTableElement>;
@@ -8,135 +10,179 @@ declare namespace DataGrid {
     type TR = StyleProps.BasicElement & React.HTMLAttributes<HTMLTableRowElement>;
     type TableCell = StyleProps.BasicElement & React.ThHTMLAttributes<HTMLTableCellElement>;
     type RowID = string | number;
+    /**
+     * -1: descending
+     * 0: disabled
+     * 1: ascending
+     */
+    type Keytype = string | number;
     type SortType = -1 | 0 | 1;
-    type Tones = 'border' | 'border.vertical' | 'border.horizontal' | 'plain';
+    type Tones = 'border' | 'border.vertical' | 'border.horizontal' | false;
+    type Checkable = boolean | 'left' | 'right';
     type CellPosition = {
         rowIdx: number;
         colIdx: number;
-        isTopCell: boolean;
-        isBottomCell: boolean;
-        isLeftCell: boolean;
-        isRightCell: boolean;
+        topIdx: number;
+        leftIdx: number;
+        rightIdx: number;
+        bottomIdx: number;
         isHeader: boolean;
         isBody: boolean;
+        isFooter: boolean;
     };
     type Cell = TableCell & {
-        type?: 'th' | 'td';
-        data: string | number;
+        isTH?: boolean;
         label?: ReactElement;
-        sortKey?: string | number;
     };
     namespace Cell {
-        type Head = Cell & {
+        type Head<K extends Keytype> = Cell & {
+            key: K;
             /**
-             * default true
+             * default 0
              */
             sortable?: SortType;
             defSort?: SortType;
             filterable?: boolean;
-            checkable?: boolean | 'body' | 'head';
+            checkable?: Checkable;
+            /**
+             * if true, ( sortable/defSort/filterable ) will be ignored.
+             */
             draggable?: boolean;
+            isHidden?: boolean;
+        };
+        type Body<T = Keytype> = Cell & {
+            data: T;
+            sortKey?: string | number;
+            onLabelRender?(value: T): ReactElement;
+        };
+        type Footer<T = Keytype> = Cell & {
+            data: T;
+            onLabelRender?(value: T): ReactElement;
         };
-        type Body = Cell & {};
     }
-    type RowMeta = {
+    type Row<K extends Keytype = Keytype, T = Keytype> = {
         row_id?: RowID;
+        /**
+         * for checker
+         */
         isSelected?: boolean;
         isFilterMatched?: boolean;
         isVisible?: boolean;
-        __sys_searchkey?: string;
-    };
-    namespace Row {
-        type Head = Cell.Head[];
-        type Body = Cell.Body[] & RowMeta & {
-            onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
-        };
-    }
-    type Input = {
+        searchKey?: string;
+        onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+    } & Partial<Record<K, Cell.Body<T> | RowID | boolean | Function>>;
+    type Header<K extends Keytype = Keytype> = Cell.Head<K>[];
+    type Body<K extends Keytype = Keytype> = Row<K>[];
+    type InternalRow<K extends Keytype = Keytype, T = Keytype> = {
+        row_id?: RowID;
+        /**
+         * for checker
+         */
+        isSelected?: boolean;
+        isFilterMatched?: boolean;
+        isVisible?: boolean;
+        searchKey?: string;
+        draggerIndex?: number;
+        onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+    } & Partial<Record<K, Cell.Body<T>>>;
+    type Footer<K extends Keytype = Keytype, T = Keytype> = Partial<Record<K, Cell.Footer<T> | RowID>>;
+    type Input<K extends Keytype = Keytype> = {
         tone?: Tones;
         datagridID?: string;
+        props?: Records;
+        /**
+         * default 100
+         */
+        maxRows?: number;
         colLength?: number;
-        maxRow?: number;
-        header?: Row.Head;
-        body: Row.Body[];
+        /**
+         * If true, the header will not be rendered.
+         */
+        headerless?: boolean;
+        header: Header<K>;
+        body: Body<K>;
+        footer?: Footer<K>;
         defaultSearchKey?: string;
-        cellStyles?: StyleProps.PropsNFreeCSS;
+        rowStyles?: StyleProps.StyleProps;
+        cellStyles?: StyleProps.StyleProps & {
+            onHeader?: StyleProps.StyleProps;
+            onBody?: StyleProps.StyleProps;
+            onTop?: StyleProps.StyleProps;
+            onBottom?: StyleProps.StyleProps;
+            onLeft?: StyleProps.StyleProps;
+            onRight?: StyleProps.StyleProps;
+        };
         cellClassName?: string;
-        onCellStyles?(props: CellPosition, def: StyleProps.PropsNFreeCSS): StyleProps.PropsNFreeCSS;
+        onCellStyles?(props: CellPosition, def: StyleProps.StyleProps): StyleProps.StyleProps;
         className?: string;
-        onNoRecordsRender?: ReactElement;
-        onRowClick?(rowId: RowID, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
-        onCellClick?(opt: CellPosition, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
-        onSorted?(sort: [number, SortType]): void;
-        onSelected?(selected: RowID[]): void;
+        onNoRecordsRender?(): ReactElement;
+        onRowClick?(row: Row, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+        onCellClick?(opt: CellPosition, event: React.MouseEvent<HTMLTableCellElement, MouseEvent>): void;
+        onSorted?(col: number, sort: SortType): void;
+        onSelected?(rows: Row[]): void;
+        onDragged?(rows: Row[]): void;
     } & StyleProps.States;
     type Config = {
         datagridID: string;
         colLength: number;
-        head: Row.Head;
-        body: Row.Body[];
-        checker: boolean[];
-        filter: boolean[] & Config.FilterMeta;
-        sort: SortType[] & Config.Sort.Meta;
-        dragger: number;
+        body: InternalRow[];
+        filter: {
+            keyword: string;
+            current: (string[])[];
+        };
+        sort: {
+            col: number;
+            dir: SortType;
+        };
         paging: {
             rows: number;
             total: number;
             current: number;
         };
+        draggable?: boolean;
     };
-    namespace Config {
-        namespace Sort {
-            type Meta = {
-                col: number;
-                dir: SortType;
-            };
-        }
-        type FilterMeta = {
-            keyword: string;
-            current: (string[])[];
-        };
-    }
     type Props = {
         input: Input;
         val_config: Config;
         set_config: React.Dispatch<React.SetStateAction<Config>>;
     };
-    type PartsDeligation = {
+    type RemoteProps = {
         val_config: Config;
-        set_config: React.Dispatch<React.SetStateAction<Config>>;
-    };
-    namespace Methods {
-        type Component = React.FC<DataGrid.Input>;
-        type FNs = {
-            genBodyRow(cells: Cell.Body[], meta?: RowMeta): Row.Body;
-            getData(datagridID: string): Row.Body[];
-            Table: React.FC<Table>;
-            Head: React.FC<TableHead>;
-            Body: React.FC<TableBody>;
-            Row: React.FC<TR>;
-            TH: React.FC<TableCell>;
-            TD: React.FC<TableCell>;
-            RightIndicator: Cell;
-            SearchInput: React.FC<{
-                datagridID: string;
-                onChange(keyword: string): void;
-            }>;
-            Info: React.FC<{
-                datagridID: string;
-            }>;
-            Paging: React.FC<{
-                datagridID: string;
-            }>;
-            RowLength: React.FC<{
-                datagridID: string;
-                lengthSelect: number[];
-            }>;
+        remoteUpdate: {
+            paging(pageIdx: number): void;
+            maxRow(maxRows: number): void;
+            searchKey(keyword: string): void;
         };
-    }
-    type Methods = Methods.Component & Methods.FNs;
+    };
+    type Component = <K extends string = string>(props: DataGrid.Input<K>) => ReactElement;
+    type FNs = {
+        getBodyRows(datagridID: string): Body[];
+        Table: React.FC<Table>;
+        Head: React.FC<TableHead>;
+        Body: React.FC<TableBody>;
+        Row: React.FC<TR>;
+        Cell: React.FC<TableCell & {
+            isTH?: boolean;
+        }>;
+        TH: React.FC<TableCell>;
+        TD: React.FC<TableCell>;
+        RightIndicator: Cell.Body;
+        SearchInput: React.FC<Input.TextField.Input & {
+            datagridID: string;
+        }>;
+        Info: React.FC<{
+            datagridID: string;
+        }>;
+        Paging: React.FC<{
+            datagridID: string;
+        }>;
+        RowCount: React.FC<{
+            datagridID: string;
+            options: number[];
+        }>;
+    };
+    type Methods = Component & FNs;
 }
-export declare const DefaultCellStyles: (tone: DataGrid.Tones) => StyleProps.States;
-export declare const onDefaultCellStyles: (args: DataGrid.CellPosition, prev: StyleProps.States) => StyleProps.Properties;
+export declare const onDefaultCellStyles: (args: DataGrid.CellPosition, prev: StyleProps.StyleProps) => StyleProps.StyleProps;
 declare const DataGrid: DataGrid.Methods;
 export { DataGrid, DataGrid as default };

package/dist/fn/DataGrid/index.js

@@ -1 +1 @@
-import{b as a,c}from"../../chunk-C5N2D3ZX.js";import{jsx as r,jsxs as R}from"react/jsx-runtime";import m,{useStore as M,UUID as I}from"jmini";import{useState as L,useEffect as P}from"react";import{useRefresh as y}from"../../@utils";import{Box as S,Flex as v,FAI as C,Span as B}from"../../atoms";import{Literal as H,Row as x}from"../../mols";import{Button as w}from"../Button";import u from"../Input";import{TableClasses as F}from"../../@styles/componentClasses";const E=e=>{if(e=="plain")return{};let o={};return m.isOneOf(e,"border","border.horizontal")&&(o.borderBottom="2.normal"),m.isOneOf(e,"border","border.vertical")&&(o.borderRight="2.normal"),a({padding:"1/2",backgroundColor:"layer.1",transition:"short",textAlign:"center"},o)},ee=(e,o)=>{let t=a({},o);return e.isRightCell&&(t.borderRight="unset"),e.isTopCell&&(e.isLeftCell&&(t.borderTopLeftRadius="inherit"),e.isRightCell&&(t.borderTopRightRadius="inherit")),e.isBottomCell&&(t.borderBottom="unset",e.isLeftCell&&(t.borderBottomLeftRadius="inherit"),e.isRightCell&&(t.borderBottomRightRadius="inherit")),t},T={index:e=>r(f.Table,{className:F("Table"),children:R(f.Body,{children:[r(T.Header,a({},e)),r(T.Body,a({},e))]})}),Header:e=>{let{val_config:o}=e;return r(f.Row,{children:o.head.map(t=>r(f.TH,{children:t.label||t.data},t.sortKey||t.data))})},Body:e=>r(f.Row,{})},G=e=>{console.log(e),e=c(a({datagridID:I(),tone:"border",header:[],colLength:0,borderRadius:"1.tone.primary",backgroundColor:"layer.1"},e),{cellStyles:a(a({},E(e.tone||"border")),e.cellStyles)});let o=e.header||[],[t,g]=L(m.scope(()=>{var i,p,d,b,D;let n={datagridID:e.datagridID||I(),colLength:(p=(i=e.colLength)!=null?i:o.length)!=null?p:0,head:o,body:e.body||[],checker:o.map(l=>!!(l!=null&&l.checkable)),filter:Object.assign(o.map(l=>!!(l!=null&&l.filterable)),{keyword:e.defaultSearchKey||"",current:[]}),sort:Object.assign(o.map(l=>{var h;return(h=l.sortable)!=null?h:1}),{col:0,dir:1}),dragger:-1,paging:{rows:100,total:1,current:1}};{let l=(d=o==null?void 0:o.filter(h=>h.defSort))==null?void 0:d[0];l&&(n.sort.col=(b=o.indexOf(l))!=null?b:-1,n.sort.dir=(D=l==null?void 0:l.sortable)!=null?D:1)}return o.forEach((l,h)=>{l!=null&&l.draggable&&(n.dragger=h)}),n}));P(()=>{},[]);let s={input:e,val_config:t,set_config:g};return r(T.index,a({},s))},k={genBodyRow:(e,o)=>Object.assign(e,o),getData:e=>{var o,t;return((t=(o=M.get(e))==null?void 0:o.getRowData)==null?void 0:t.call(o))||[]},Table:e=>r(S,c(a({htmlTag:"table"},e),{border:e.border})),Head:e=>r(S,a({htmlTag:"thead"},e)),Body:e=>r(S,a({htmlTag:"tbody"},e)),Row:e=>r(S,a({htmlTag:"tr"},e)),TH:e=>r(S,a({htmlTag:"th"},e)),TD:e=>r(S,a({htmlTag:"td"},e)),RightIndicator:{type:"td",unitWidth:3,data:"",label:r(C.AngleRight,{fontColor:"theme",fontSize:"4.thirdTitle"})},SearchInput:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t,set_config:g}=o;return r(u.TextField,{label:"\u691C\u7D22...",clearButton:!0,padding:"2/3",paddingRight:3,rightIcon:r(u.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:r(C.Search,{})}),value:t.filter.keyword,onUpdateValidValue:s=>{e.onChange(s),m.interval.once(()=>{g(n=>c(a({},n),{paging:c(a({},n.paging),{current:1}),filter:c(a({},n.filter),{keyword:s,current:Array.from({length:n.colLength},()=>[])})}))},200,"InputSearchTime")}})},Info:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t}=o,g=t.body.filter(n=>n.isFilterMatched).length,s=g.ratio(t.paging.total)||0;return R(v,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[r(B,{fontSize:"4.thirdTitle",fontColor:"theme",children:g.toLocaleString()}),"/ ",t.paging.total.toLocaleString(),"\u4EF6 (",s,"%)"]})},Paging:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t,set_config:g}=o,s=[];for(let i=0;i<t.paging.total;i++)s.push({value:i+1,label:(i+1).toString()});const n=i=>{let p=Math.min(Math.max(1,i),t.paging.total),d=a({},t);d.paging.current=p,g(b=>c(a({},b),{paging:c(a({},b.paging),{current:p})}))};return r(u.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:r(u.LeftIcon,{freeCSS:{left:2,pointerEvents:"all"},children:r(w.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==1){n(t.paging.total);return}n(t.paging.current-1)},children:r(C.ChevronLeft,{})})}),rightIcon:r(u.RightIcon,{freeCSS:{right:2,pointerEvents:"all"},children:r(w.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==t.paging.total){n(1);return}n(t.paging.current+1)},children:r(C.ChevronRight,{})})}),options:s.map(i=>({value:i.value,label:R(x.Left,{gap:"1/3",verticalAlign:"baseline",children:[i.label,R(H,{fontColor:"4.thin",fontSize:"0.xs",children:["/ ",t.paging.total]})]})})),value:t.paging.current,onUpdateValidValue:i=>{n(i)}})},RowLength:e=>{let o=y.catch(e.datagridID);if(!o)return null;let{val_config:t,set_config:g}=o,s=t.body.filter(d=>d.isFilterMatched).length,n=t.paging.rows,i=0,p=e.lengthSelect.map(d=>(i|=+(d==n),{value:d,label:d.toString()}));return i||p.push({value:n,label:n.toString()}),r(x.Center,{gap:"1/2",children:r(u.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{freeCSS:{minWidth:12*9}},pickerPosition:4,value:t.paging.rows,leftIcon:r(u.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",freeCSS:{left:6},children:"\u8868\u793A"}),rightIcon:r(u.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",freeCSS:{right:6},children:"\u4EF6"}),options:p.toASC("value"),onUpdateValidValue:d=>{g(b=>c(a({},b),{paging:{rows:Number(d),current:1,total:Math.ceil(s/Number(d))}}))}})})}},f=Object.assign(G,k);export{f as DataGrid,E as DefaultCellStyles,f as default,ee as onDefaultCellStyles};
+import{b as i,c as p,d as V,e as se}from"../../chunk-C5N2D3ZX.js";import{Fragment as we,jsx as r,jsxs as U}from"react/jsx-runtime";import b,{useStore as ce,UUID as ge}from"jmini";import re,{useState as me,useEffect as Z,useMemo as he}from"react";import{ExtractStyles as _,GenerateHTMLProps as Se,DragEffect as le,useRemote as Y}from"../../@utils";import{faArrowUp as Ce}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faUpDown as Re}from"@fortawesome/free-solid-svg-icons/faUpDown";import{Box as k,Flex as xe,FAI as v,Span as Ie}from"../../atoms";import{Literal as ae,Row as A,MarkerPen as pe}from"../../mols";import{Button as ee}from"../Button";import E from"../Input";import{TableClasses as Te}from"../../@styles/componentClasses";import{faGripVertical as ue}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{Tips as ye}from"../Tips";const x={toSafetyData:o=>{var n,s,d;let{header:e=[]}=o,t={datagridID:o.datagridID||ge(),colLength:o.colLength||e.length||0,body:o.body||[],filter:{keyword:o.defaultSearchKey||"",current:[]},sort:{col:-1,dir:1},paging:{rows:o.maxRows||100,total:1,current:1},draggable:!!e.some(l=>l.draggable)};t.body.forEach((l,a)=>{var m;l.row_id=(m=l.row_id)!=null?m:a,l.isFilterMatched=!0,l.isVisible=!0,l.draggerIndex=a+1,l.searchKey="",e.forEach((I,P)=>{var c;let g=l[I.key];b.isNullish(g)||(b.isRecord(g)||(g={data:g}),g.sortKey=(c=g.sortKey)!=null?c:String(g.data),l.searchKey+=String(g.sortKey)+" ",l[I.key]=g)})});{let l=(n=e==null?void 0:e.filter(a=>a.defSort))==null?void 0:n[0];l&&(t.sort.col=(s=e.indexOf(l))!=null?s:-1,t.sort.dir=(d=l==null?void 0:l.sortable)!=null?d:1)}return t.draggable,x.updateRowMeta(t,o)},updateRowMeta:(o,e)=>{let t=i({},o);if(t.sort.col>=0&&t.sort.dir){let n=e.header[t.sort.col].key;t.sort.dir==1?t.body.toASC(n+".data"):t.body.toDESC(n+".data")}{let n=String(t.filter.keyword)||"";t.body.forEach(s=>{var l;if(s.isFilterMatched=!0,!n)return;let d=!!((l=s.searchKey)!=null&&l.match(new RegExp(n.escapeRegExChar(),"i")));s.isFilterMatched=d})}{let n=t.paging.rows;t.paging.total=Math.ceil(t.body.filter(a=>a.isFilterMatched).length/n);let s=n*(t.paging.current-1),d=s+n,l=0;t.body.forEach(a=>{a.isVisible=!1,a.isFilterMatched&&(a.isVisible=l>=s&&l<d,l++)})}return t.draggable&&t.body.toASC("draggerIndex"),t},index:o=>{var I,P,g;let[e,t]=me(()=>x.toSafetyData(o));const n=re.useRef(!1);Z(()=>{if(e){if(!n.current){n.current=!0;return}t(x.toSafetyData(o))}},[he(()=>o.props,[o.props])]),Z(()=>{e&&(ce.set({["rows-"+e.datagridID]:e.body}),Y.bridge(e.datagridID,{val_config:e,remoteUpdate:{paging:c=>{t(u=>x.updateRowMeta(p(i({},u),{paging:p(i({},u.paging),{current:Math.max(1,Math.min(u.paging.total,c))})}),o))},maxRow:c=>{t(u=>x.updateRowMeta(p(i({},u),{paging:p(i({},u.paging),{rows:c,current:1})}),o))},searchKey:c=>{b.interval.once(()=>{t(u=>{let w=p(i({},u),{paging:p(i({},u.paging),{current:1}),filter:p(i({},u.filter),{keyword:String(c||"").trim()})});return x.updateRowMeta(w,o)})},300,"InputSearchTime")}}}))},[e]);const s=re.useRef(!1);Z(()=>{if(e&&o.onSelected){if(!s.current){s.current=!0;return}o.onSelected(e.body.filter(c=>c.isSelected))}},[(I=e==null?void 0:e.body)==null?void 0:I.filter(c=>c.isSelected).length]);const d=re.useRef(!1);Z(()=>{if(e&&o.onSorted){if(!d.current){d.current=!0;return}o.onSorted(e.sort.col,e.sort.dir)}},[(P=e==null?void 0:e.sort)==null?void 0:P.col,(g=e==null?void 0:e.sort)==null?void 0:g.dir]);let l={input:o,val_config:e,set_config:t},{className:a,style:m}=Se(o);return r(k,{className:a,style:m,children:r(D.Table,{className:Te("DataGrid"),borderRadius:"inherit",children:U(D.Body,{children:[r(x.Header,i({},l)),r(x.Body,i({},l)),r(x.Footer,i({},l))]})})})},Checker:o=>r(k,{onClick:e=>{e.stopPropagation()},children:r(E.Checker,p(i({wrapStyles:{display:"inlineBlock"},cellStyles:{gap:0}},o),{label:!1}))}),Header:o=>{let{input:e,val_config:t,set_config:n}=o;if(e.headerless)return null;let s="datagrid-dragger-"+t.datagridID,d=["datagrid",t.datagridID,""].join("-"),l=1+t.body.filter(a=>a.isVisible).length+ +!!e.footer;return r(le.DropArea,p(i({component:D.Row,id:d},e.rowStyles),{dragInfo:{type:s,id:d,idx:0,marker:"bottom"},children:e.header.map((a,m)=>{var W,q,$,Q,J;let[I,P]=_(a),j=P,{isTH:g,key:c,label:u,checkable:w,draggable:S,defSort:G,sortable:B,filterable:z,isHidden:O}=j,M=V(j,["isTH","key","label","checkable","draggable","defSort","sortable","filterable","isHidden"]);if(O)return null;let T={rowIdx:0,colIdx:m,topIdx:0,leftIdx:m,rightIdx:t.colLength-m-1,bottomIdx:l-1,isHeader:!0,isBody:!1,isFooter:!1},H=S,L=B!=0,C=m==t.sort.col,F=b.deepMerge(b.deepCopy(e.cellStyles),ie(T,{}),(W=e.cellStyles)==null?void 0:W.onHeader,!T.leftIdx&&((q=e.cellStyles)==null?void 0:q.onLeft),!T.rightIdx&&(($=e.cellStyles)==null?void 0:$.onRight),!T.topIdx&&((Q=e.cellStyles)==null?void 0:Q.onTop),!T.bottomIdx&&((J=e.cellStyles)==null?void 0:J.onBottom),I);e.onCellStyles&&(F=e.onCellStyles(T,F||{}));let K=[r(k,{flexSizing:0,children:u||c},"data")];return L&&K.unshift(r(v,{fontSize:"1.mini",opacity:C?"max":"low",transition:"middle",xcss:{transform:C&&t.sort.dir==-1?"rotate(180deg)":"none"},icon:C?Ce:Re},"sort")),w=="left"&&K.unshift(r(x.Checker,{value:t.body.every(y=>y.isSelected),onUpdateValue:y=>{n(R=>{let f=i({},R);return f.body.forEach(h=>{h.isFilterMatched&&(h.isSelected=!!y)}),f})}},"check")),H&&K.unshift(r(ee.Clear.S,{ssSphere:2,fontColor:"theme",onMouseOver:y=>{ye.open(y.currentTarget,U(ae.Supplement,{children:[r(v,{icon:ue}),"\u30C9\u30E9\u30C3\u30B0\u3067\u5217\u306E\u9806\u756A\u3092\u5909\u66F4"]}),22)},onMouseLeave:y=>ye.abort(),onClick:y=>{y.stopPropagation()},children:r(v.QuestionCircle,{})},"drag")),w=="right"&&K.push(r(x.Checker,{value:t.body.every(y=>y.isSelected),onUpdateValue:y=>{n(R=>{let f=i({},R);return f.body.forEach(h=>{h.isFilterMatched&&(h.isSelected=!!y)}),f})}},"check")),r(D.Cell,p(i(i({isTH:!!g,ssPushable:!!B},_(F||{})[0]),M),{className:[e.cellClassName,M.className].join(" "),onClick:y=>{M.onClick&&M.onClick(y),e.onCellClick&&e.onCellClick(T,y),L&&n(R=>{let f=i({},R);return f.sort={col:m,dir:C?R.sort.dir*-1:B},x.updateRowMeta(f,e)})},children:r(A.Left,{gap:"1/3",children:K})}),m)})}))},Body:o=>{var l;let{input:e,val_config:t,set_config:n}=o,s=t.body.filter(a=>a.isVisible),d=+!e.headerless+s.length+ +!!e.footer;return U(we,{children:[!s.length&&r(D.Row,p(i({},e.rowStyles),{children:r(D.Cell,{colSpan:t.colLength,padding:1,children:(l=e.onNoRecordsRender)==null?void 0:l.call(e)})})),s.map((a,m)=>{let I=m;e.headerless||(I+=1);let P="datagrid-dragger-"+t.datagridID,g=["datagrid",t.datagridID,a.row_id].join("-");return r(le.DropArea,p(i({component:D.Row,id:g,ssPushable:!!e.onRowClick||!!a.onRowClick},e.rowStyles),{onClick:c=>{a.onRowClick&&a.onRowClick(c),e.onRowClick&&e.onRowClick(a,c)},dragInfo:{type:P,id:g,idx:a.draggerIndex,disabled:!t.draggable,marker:"bottom"},children:e.header.map((c,u)=>{var W,q,$,Q,J,y;let w=c.draggable,S=a[c.key];if(!S)return null;b.isRecord(S)||(S={data:S});let[G,B]=_(S),j=B,{isTH:z,sortKey:O,data:M,label:T,onLabelRender:H}=j,L=V(j,["isTH","sortKey","data","label","onLabelRender"]),C={rowIdx:I,colIdx:u,topIdx:I,leftIdx:u,rightIdx:t.colLength-u-1,bottomIdx:d-I-1,isHeader:!1,isBody:!0,isFooter:!1},F=b.deepMerge(b.deepCopy(e.cellStyles),ie(C,{}),(W=e.cellStyles)==null?void 0:W.onBody,!C.leftIdx&&((q=e.cellStyles)==null?void 0:q.onLeft),!C.rightIdx&&(($=e.cellStyles)==null?void 0:$.onRight),!C.topIdx&&((Q=e.cellStyles)==null?void 0:Q.onTop),!C.bottomIdx&&((J=e.cellStyles)==null?void 0:J.onBottom),G);e.onCellStyles&&(F=e.onCellStyles(C,F||{}));let K=[r(k,{flexSizing:0,children:(y=H==null?void 0:H(M))!=null?y:pe(T!=null?T:String(M),t.filter.keyword)},"data")];return c.checkable=="left"&&K.unshift(r(x.Checker,{override:"force",value:!!a.isSelected,onUpdateValue:R=>{n(f=>p(i({},f),{body:f.body.map(h=>(h.row_id==a.row_id&&(h.isSelected=!!R),h))}))}},"check")),w&&K.unshift(r(ee.Clear.S,{tabIndex:-1,isRounded:!0,ssSphere:2.5,fontColor:"6.clear",onPointerDown:R=>{let f=b("#"+g)[0],h=f.cloneNode(!0);h.style.width=f.offsetWidth+"px",le.Start(P,{dragElement:h,startEvent:R,originId:g,horizontal:!1,allowPrevDataOnDropend:!1},de=>se(void 0,null,function*(){let te=m,N=Number(de.idx);if(b.isNullish(N)||N==-1||(N>te&&N--,te==N)||!de.end)return;let X=b.deepCopy(t.body||[]),fe=X.splice(te,1)[0];X.splice(N,0,fe),X.forEach((oe,be)=>{oe.draggerIndex=be+1}),e.onDragged&&e.onDragged(X),n(oe=>p(i({},oe),{body:X}))}))},children:r(A.Center,{gap:"1/4",children:r(v,{icon:ue})})},"drag")),c.checkable=="right"&&K.push(r(x.Checker,{override:"force",value:!!a.isSelected,onUpdateValue:R=>{n(f=>p(i({},f),{body:f.body.map(h=>(h.row_id==a.row_id&&(h.isSelected=!!R),h))}))}},"check")),r(D.Cell,p(i(i({isTH:!!z},_(F||{})[0]),L),{className:[e.cellClassName,L.className].join(" "),onClick:R=>{L.onClick&&L.onClick(R),e.onCellClick&&e.onCellClick(C,R)},children:r(A.Left,{gap:"1/3",children:K})}),u)})}),String(a.row_id))})]})},Footer:o=>{let{input:e,val_config:t,set_config:n}=o;if(!e.footer)return null;let s=+!e.headerless+t.body.filter(d=>d.isVisible).length+1;return r(D.Row,p(i({},e.rowStyles),{children:e.header.map((d,l)=>{var z,O,M,T,H,L;let a=e.footer[d.key];if(!a)return null;b.isRecord(a)||(a={data:a});let[m,I]=_(a),B=I,{isTH:P,data:g,label:c,onLabelRender:u}=B,w=V(B,["isTH","data","label","onLabelRender"]),S={rowIdx:s-1,colIdx:l,topIdx:s-1,leftIdx:l,rightIdx:t.colLength-l-1,bottomIdx:0,isHeader:!1,isBody:!1,isFooter:!0},G=b.deepMerge(b.deepCopy(e.cellStyles),ie(S,{}),(z=e.cellStyles)==null?void 0:z.onBody,!S.leftIdx&&((O=e.cellStyles)==null?void 0:O.onLeft),!S.rightIdx&&((M=e.cellStyles)==null?void 0:M.onRight),!S.topIdx&&((T=e.cellStyles)==null?void 0:T.onTop),!S.bottomIdx&&((H=e.cellStyles)==null?void 0:H.onBottom),m);return e.onCellStyles&&(G=e.onCellStyles(S,G||{})),r(D.Cell,p(i(i({isTH:!!P},_(G||{})[0]),w),{className:[e.cellClassName,w.className].join(" "),onClick:C=>{w.onClick&&w.onClick(C),e.onCellClick&&e.onCellClick(S,C)},children:r(k,{flexSizing:0,children:(L=u==null?void 0:u(g))!=null?L:pe(c!=null?c:String(g),t.filter.keyword)})}),l)})}))}},ie=(o,e)=>{let t=i({},e);return o.topIdx||(t.borderTop="unset"),o.bottomIdx||(t.borderBottom="unset"),o.rightIdx||(t.borderRight="unset"),o.leftIdx||(t.borderLeft="unset"),o.topIdx||(o.leftIdx||(t.borderTopLeftRadius="inherit"),o.rightIdx||(t.borderTopRightRadius="inherit")),o.bottomIdx||(o.leftIdx||(t.borderBottomLeftRadius="inherit"),o.rightIdx||(t.borderBottomRightRadius="inherit")),t},De=o=>(o=i({datagridID:ge(),tone:"border",colLength:0,maxRows:100,onNoRecordsRender:()=>r(A.Center,{children:r(ae.Supplement,{fontColor:"4.thin",children:"(\u30C7\u30FC\u30BF\u306A\u3057)"})})},o),o.rowStyles=i({backgroundColor:"layer.0"},o.rowStyles),o.cellStyles=i(p(i({},b.scope(()=>{if(!o.tone)return{};let e={};return b.isOneOf(o.tone,"border","border.horizontal")&&(e.borderBottom="2.normal"),b.isOneOf(o.tone,"border","border.vertical")&&(e.borderRight="2.normal"),e})),{padding:"1/3",transition:"short"}),o.cellStyles),o.tone&&(o=i({border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"},o)),o.header=o.header||[],o.header.forEach((e,t)=>{var n;e.sortable=(n=e.sortable)!=null?n:1,e.checkable===!0&&(e.checkable="left")}),r(x.index,i({},o))),ne={getBodyRows:o=>ce.get("rows-"+o)||[],Table:o=>r(k,p(i({htmlTag:"table",borderRadius:"inherit"},o),{border:o.border})),Head:o=>r(k,i({htmlTag:"thead",borderRadius:"inherit"},o)),Body:o=>r(k,i({htmlTag:"tbody",borderRadius:"inherit"},o)),Row:o=>r(k,i({htmlTag:"tr",borderRadius:"inherit"},o)),TH:o=>r(k,i({htmlTag:"th"},o)),TD:o=>r(k,i({htmlTag:"td"},o)),Cell:o=>{let n=o,{isTH:e}=n,t=V(n,["isTH"]);return e?r(ne.TH,i({},t)):r(ne.TD,i({},t))},RightIndicator:{unitWidth:3,data:"",label:r(v.AngleRight,{fontColor:"theme",fontSize:"4.thirdTitle"})},SearchInput:o=>{let d=o,{datagridID:e}=d,t=V(d,["datagridID"]),n=Y.catch(o.datagridID);if(!n)return console.warn("[DataGrid] SearchInput must be used inside DataGrid."),null;let{val_config:s}=n;return r(E.TextField,p(i({label:"\u691C\u7D22...",clearButton:!0,padding:["1/2","2/3"],rightIcon:r(E.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:r(v.Search,{})}),value:s.filter.keyword},t),{onUpdateValidValue:(...l)=>{t.onUpdateValidValue&&t.onUpdateValidValue(...l),n.remoteUpdate.searchKey(l[0])}}))},Info:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,n=t.body.filter(d=>d.isFilterMatched).length,s=n.ratio(t.paging.total)||0;return U(xe,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[r(Ie,{fontSize:"4.thirdTitle",fontColor:"theme",children:n.toLocaleString()}),"/ ",t.paging.total.toLocaleString(),"\u4EF6 (",s,"%)"]})},Paging:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,n=[];for(let d=0;d<t.paging.total;d++)n.push({value:d+1,label:(d+1).toString()});const s=d=>{let l=Math.min(Math.max(1,d),t.paging.total),a=i({},t);a.paging.current=l,e.remoteUpdate.paging(l)};return r(E.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:r(E.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:r(ee.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==1){s(t.paging.total);return}s(t.paging.current-1)},children:r(v.ChevronLeft,{})})}),rightIcon:r(E.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:r(ee.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==t.paging.total){s(1);return}s(t.paging.current+1)},children:r(v.ChevronRight,{})})}),options:n.map(d=>({value:d.value||0,label:U(A.Left,{gap:"1/3",verticalAlign:"baseline",children:[d.label,U(ae,{fontColor:"4.thin",fontSize:"0.xs",children:["/ ",t.paging.total]})]})})),value:t.paging.current,onUpdateValidValue:d=>{s(d)}})},RowCount:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,n=t.body.filter(a=>a.isFilterMatched).length,s=t.paging.rows,d=0,l=o.options.map(a=>(d|=+(a==s),{value:a,label:a.toString()}));return d||l.push({value:s,label:s.toString()}),r(A.Center,{gap:"1/2",children:r(E.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,leftIcon:r(E.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:r(E.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"}),value:t.paging.rows,options:l.toASC("value"),onUpdateValidValue:a=>{e.remoteUpdate.maxRow(Number(a))}})})}},D=Object.assign(De,ne);export{D as DataGrid,D as default,ie as onDefaultCellStyles};

package/dist/fn/Effect/Fade.js

@@ -1 +1 @@
-import{b as a,c as i,d as s}from"../../chunk-C5N2D3ZX.js";import{jsx as y}from"react/jsx-runtime";import{UUID as d}from"jmini";import{$$fromRoot as u}from"../../@utils";import{useState as l,useEffect as I}from"react";import{Box as f}from"../../atoms";const S=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentId:c=d()}=n,e=s(n,["animationDelay","animationTime","componentId"]),[t]=l(c);return I(()=>{setTimeout(()=>{let o=u('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1})},p)},[]),y(f,i(a({},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentId:t}))},F=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentId:c=d()}=n,e=s(n,["animationDelay","animationTime","componentId"]),[t]=l(c);return I(()=>{setTimeout(()=>{let o=u('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1,paddingTop:0})},p)},[]),y(f,i(a({paddingTop:2},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentId:t}))};export{S as FadeIn,F as FadeUp};
+import{b as a,c as i,d as r}from"../../chunk-C5N2D3ZX.js";import{jsx as y}from"react/jsx-runtime";import{UUID as d}from"jmini";import{$$fromRoot as u}from"../../@utils";import{useState as l,useEffect as I}from"react";import{Box as f}from"../../atoms";const x=m=>{let n=m,{animationDelay:p=100,animationTime:s=300,componentId:c=d()}=n,t=r(n,["animationDelay","animationTime","componentId"]),[e]=l(c);return I(()=>{setTimeout(()=>{let o=u('[data-component-id="'+e+'"]');o[0]&&o.css({transition:s+"ms"}).await(1).css({opacity:1})},p)},[]),y(f,i(a({},t),{xcss:i(a({},t.xcss),{opacity:0}),componentId:e}))},F=m=>{let n=m,{animationDelay:p=100,animationTime:s=300,componentId:c=d()}=n,t=r(n,["animationDelay","animationTime","componentId"]),[e]=l(c);return I(()=>{setTimeout(()=>{let o=u('[data-component-id="'+e+'"]');o[0]&&o.css({transition:s+"ms"}).await(1).css({opacity:1,paddingTop:0})},p)},[]),y(f,i(a({paddingTop:2},t),{xcss:i(a({},t.xcss),{opacity:0}),componentId:e}))};export{x as FadeIn,F as FadeUp};

package/dist/fn/Effect/Pudding.js

@@ -1 +1 @@
-import"../../chunk-C5N2D3ZX.js";import t from"jmini";import{Config as a}from"../../@utils";import{EffectClasses as e}from"../../@styles/componentClasses";const d={Wrapper:()=>(typeof window=="undefined"||t(a.get().appRoot).removeEvent("PuddingClick").addEvent({eventType:"click",eventID:"PuddingClick",target:'[data-effect-pudding="1"]',callback:function(n){t(n.target).removeClass(e("PuddingEffect")).await(1).addClass(e("PuddingEffect")).await(510).removeClass(e("PuddingEffect"))}}),null)};export{d as Pudding,d as default};
+import"../../chunk-C5N2D3ZX.js";import t from"jmini";import{Config as i}from"../../@utils";import{EffectClasses as e}from"../../@styles/componentClasses";const d={Wrapper:()=>(typeof window=="undefined"||t(i.get().appRoot).removeEvent("PuddingClick").onEvent("click",function(n){t(n.target).removeClass(e("PuddingEffect")).await(1).addClass(e("PuddingEffect")).await(510).removeClass(e("PuddingEffect"))},{eventID:"PuddingClick",target:'[data-effect-pudding="1"]'}),null)};export{d as Pudding,d as default};

package/dist/fn/Effect/Ripple.js

@@ -1,3 +1,3 @@
-import"../../chunk-C5N2D3ZX.js";import p,{UUID as b,Time as m}from"jmini";import{Config as v}from"../../@utils";import{EffectClasses as n}from"../../@styles/componentClasses";const a={RippleElementTag:'[data-effect-ripple="1"]',Start:t=>{let s=m().ms,d=t.target,e=p(d);if(!e[0])return;let i=e.getAttribute("data-effect-tone");if(!i){let r=e.parent('[data-effect-ripple="1"]');if(!r[0])return;e=r,i=r.getAttribute("data-effect-tone")}if(!i)return;let o="RippleWrap-"+b(),{left:l,top:c,height:w,width:R}=e.position(),{pageXOffset:h,pageYOffset:T}=p.getScreenSize(),{x:g,y:M}=p.getCursor(t),u=Math.min(R*1.5,300),y=Math.max(g-(l+h),0),I=Math.max(M-(c+T),0),f={RippleElement:e,startedAt:s,size:u};p(document).addEvent({eventID:"RippleMouseUp",eventType:"mouseup",callback:()=>{a.End(f)}}).addEvent({eventID:"RippleTouchEnd",eventType:"touchend",callback:()=>{setTimeout(()=>{a.End(f)},20)}}),p(e).addClass([n("RippleElement"),n("Color_"+i)]).append(`<div class="${n("RippleWrap")}" id="${o}">
-  <div class="${n("Wave")}" />
-  </div>`).addEvent({eventID:"RippleMouseOut",eventType:"mouseout",callback:r=>{a.End(f)}}).find("#"+o).find("."+n("Wave")).css({left:y,top:I}).await(10).css({height:u,width:u,opacity:".3",transition:".25s"})},End:t=>{let{RippleElement:s,startedAt:d,size:e}=t,o=m().ms-d<=400?".75s":".55s",l=e*2.5;p(document).removeEvent(["RippleMouseUp","RippleTouchMove","RippleTouchEnd","RippleMouseOut"]),s.removeEvent(["RippleMouseOut"]).find("."+n("Wave")).css({height:l,width:l,opacity:"0",transition:o}).await(750).parent().callback(c=>{c.remove()})}},E={Wrapper:()=>(typeof window=="undefined"||p(v.get().appRoot).removeEvent(["RippleTouchStart","RippleMouseDown"]).addEvent({eventID:"RippleTouchStart",eventType:"touchstart",target:a.RippleElementTag,callback:t=>{a.Start(t)}}).addEvent({eventID:"RippleMouseDown",eventType:"mousedown",target:a.RippleElementTag,callback:t=>{v.get().isTouchDevice||a.Start(t)}}),null)};export{E as Ripple,E as default};
+import"../../chunk-C5N2D3ZX.js";import p,{UUID as D,Time as c}from"jmini";import{Config as E}from"../../@utils";import{EffectClasses as i}from"../../@styles/componentClasses";const n={RippleElementTag:'[data-effect-ripple="1"]',Start:t=>{let s=c().ms,u=t.target,e=p(u);if(!e[0])return;let o=e.getAttribute("data-effect-tone");if(!o){let l=e.parent('[data-effect-ripple="1"]');if(!l[0])return;e=l,o=l.getAttribute("data-effect-tone")}if(!o)return;let a="RippleWrap-"+D(),{left:r,top:f,height:y,width:v}=e.position(),{pageXOffset:h,pageYOffset:g}=p.getScreenSize(),{x:T,y:M}=p.getCursor(t),m=Math.min(v*1.5,300),I=Math.max(T-(r+h),0),w=Math.max(M-(f+g),0),d={RippleElement:e,startedAt:s,size:m};p(document).onEvent("mouseup",()=>{n.End(d)},{eventID:"RippleMouseUp"}).onEvent("touchend",()=>{setTimeout(()=>{n.End(d)},20)},{eventID:"RippleTouchEnd"}),p(e).addClass(i("RippleElement"),i("Color_"+o)).append(`<div class="${i("RippleWrap")}" id="${a}">
+  <div class="${i("Wave")}" />
+</div>`).onEvent("mouseout",l=>{n.End(d)},{eventID:"RippleMouseOut"}).find("#"+a).find("."+i("Wave")).css({left:I,top:w}).await(10).css({height:m,width:m,opacity:".3",transition:".25s"})},End:t=>{let{RippleElement:s,startedAt:u,size:e}=t,a=c().ms-u<=400?".75s":".55s",r=e*2.5;p(document).removeEvent(["RippleMouseUp","RippleTouchMove","RippleTouchEnd","RippleMouseOut"]),s.removeEvent(["RippleMouseOut"]).find("."+i("Wave")).css({height:r,width:r,opacity:"0",transition:a}).await(750).parent().callback(f=>{f.remove()})}},R={Wrapper:()=>(typeof window=="undefined"||p(E.get().appRoot).removeEvent(["RippleTouchStart","RippleMouseDown"]).onEvent("touchstart",t=>{n.Start(t)},{eventID:"RippleTouchStart",target:n.RippleElementTag}).onEvent("mousedown",t=>{E.get().isTouchDevice||n.Start(t)},{eventID:"RippleMouseDown",target:n.RippleElementTag}),null)};export{R as Ripple,R as default};

package/dist/fn/Input/Autocomplete.d.ts

@@ -24,7 +24,7 @@ declare namespace Autocomplete {
         onDynamicSearchOptionsDelay?: number;
         onSelectorRender?(p: onSelectorRenderProps<T>): React.JSX.Element;
         onSelectedRender?(p: onSelectedRenderProps<T>): React.JSX.Element;
-        pickerStyles?: StyleProps.PropsNFreeCSS;
+        pickerStyles?: StyleProps.StyleProps;
         pickerPosition?: 1 | 2 | 3 | 4;
     };
     type Value<T = any> = T extends infer V ? V : string | number | boolean | Records | void | null;
@@ -76,8 +76,8 @@ declare namespace Autocomplete {
         set_optionsModified: React.Dispatch<React.SetStateAction<boolean>>;
         val_keyword: string;
         set_keyword: React.Dispatch<React.SetStateAction<string>>;
-        val_status: InputTypes.Status.Plain<Value[]>;
-        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
+        val_status: InputTypes.Status<Value[]>;
+        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status>>;
     };
     type Component = {
         <T = Value>(p: Input<Value<T>>): React.JSX.Element;

package/dist/fn/Input/Autocomplete.js

@@ -1 +1 @@
-import{b as l,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as u,jsxs as V}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import a,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as K,Row as M}from"../../mols";import{Button as $}from"../Button";import{Loader as le}from"../Loader";import{Sheet as ae}from"../Sheet";import{OptionalInputWrapper as re,BoxWrapper as se,CoreEffects as z,DefaultBoxishStyles as ue}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as ce}from"./Label";import{RightIcon as Q}from".";function pe(t){let{value:e,states:i}=t,{required:s,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],p=e.filter(h=>h!==null).length;return s&&(p||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),p<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),p>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const R={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:s,label:d,value:m,searchValue:o}=i,n=o||a.isString(d)&&d||""||a.isString(m)&&m||a.Stringify(m||"")||"";a.isNullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:s||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let s=t;return i||(s=t.filter(d=>(d==null?void 0:d.type)!="label")),a.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");s=s.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),s},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:s,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:p,required:h,form:O,className:r,multiSelect:c,enableFormSubmit:y,checkValidationAtFirst:S,onValidate:g,onValidateDelay:I,onUpdateValue:C,onUpdateValidValue:x,onUserAction:P,value:E="",options:_,leftIndicator:D,rightIndicator:k,leftIcon:de,rightIcon:fe,componentId:me,status_id:Se,wrapStyles:ve,emptySelect:ye,searchInputPlaceholder:he,onSelectedRender:ge,onSelectorRender:Ie,pickerStyles:be,pickerPosition:Oe,onDynamicSearchOptions:ke,onDynamicSearchOptionsDelay:_e}=J,T=G(J,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","searchInputPlaceholder","onSelectedRender","onSelectorRender","pickerStyles","pickerPosition","onDynamicSearchOptions","onDynamicSearchOptionsDelay"]),W="SearchInput_"+e.componentId;return F(()=>{var b;if(e.disabled||!o.isPickerOpen||a.isExist(d))return;let w=R.FilterSelectableOptions(t.val_options,i,!1);m(((b=w[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){s(""),n(w=>f(l({},w),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let w="autocomplete-click-"+e.componentId;if(!o.isPickerOpen){a(document).removeEvent([w]);return}a('[data-input-origin="'+e.componentId+'"]')&&a(document).addEvent({eventID:w,eventType:"mousedown",callback:U=>{let j=a(U.target),Z=!!a(j).parent("."+L("Core")).length,ee=!!a(j).parent("."+L("Selector")).length;Z||ee||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},options:{passive:!1}})},[o.isPickerOpen]),V(N,{children:[u(X,f(l({tabIndex:-1},T),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[r,L("Core")].join(" "),onClick:w=>{if(T!=null&&T.onClick&&(T==null||T.onClick(w)),e.disabled)return;let b=document.activeElement;(b==null?void 0:b.id)!=W&&(oe.get().isTouchDevice||a("#"+W).focus()),n(U=>f(l({},U),{eventID:v(8),isPickerOpen:!0,isFocusing:!0}))},onKeyDown:w=>{let b=document.activeElement;(b==null?void 0:b.id)!=W&&(w.preventDefault(),a("#"+W).focus())},children:V(M.Left,{gap:0,children:[u(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),V(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/2",verticalAlign:"unset",freeCSS:{letterSpacing:".5px"},children:[u(R.Selected,l({},t)),u(R.SearchInput,l({},t))]}),o.rawValue.length>1&&u($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:w=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:u(B.X,{})})]})})),u(R.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:s}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return u(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,"data-input-value-shallow":i.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),freeCSS:{outline:"none",minWidth:12*4},onFocus:o=>{s(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){s(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:p,ctrlKey:h}=o,O=p||h;n=="Escape"?s(r=>f(l({},r),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?s(r=>f(l({},r),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?a.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),s(r=>f(l({},r),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?a.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.rawValue];r.pop(),O&&(r=[]),s(c=>f(l({},c),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&a.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){s(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let r=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!r)return;let{value:c}=r;s(y=>{let S=[...y.rawValue];return a.scope(()=>{if(c===null)return S=[];y.rawValue.includes(c)?S=S.filter(I=>I!==c):e.multiSelect?S.push(c):S=[c]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),a.scope(()=>{if(!a.isOneOf(n,"ArrowDown","ArrowUp"))return;if(o.preventDefault(),!i.isPickerOpen){s(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let r=n=="ArrowDown"?1:-1,c=R.FilterSelectableOptions(t.val_options,t.val_keyword),y=c.length-1,S=null;a.scope(()=>{var I,C,x,P,E,_,D;let g=c.findIndex(k=>(k==null?void 0:k.id)==t.val_optionFocused);if(g==-1){S=(I=c[0])==null?void 0:I.id;return}if(r==1){if(S=(C=c[0])==null?void 0:C.id,O){S=(x=c[y])==null?void 0:x.id;return}if(g==-1||g==y)return;S=(P=c[g+1])==null?void 0:P.id}else{if(S=(E=c[y])==null?void 0:E.id,O){S=(_=c[0])==null?void 0:_.id;return}if(g==-1||g==0)return;S=(D=c[g-1])==null?void 0:D.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let p=o.target.value;t.set_keyword(p),t.set_optionFocused(""),p&&s(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[s,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let p="autocomplete-search-"+e.componentId;t.set_optionFocused(""),a.interval.once(()=>H(void 0,null,function*(){var r;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let O=R.InitOptions(h||[]);t.set_options(O),t.set_optionFocused(((r=O[0])==null?void 0:r.id)||"")}),e.onDynamicSearchOptionsDelay||500,p)},[t.val_keyword,i.isComposing]),F(()=>{let p=a(`[data-selector-id="${i.componentId}"]`)[0];if(!p)return;let h=a(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(p.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=R.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let p=e.pickerPosition||0;a.isOneOf(p,1,2)?o.bottom="100%":a.isOneOf(p,3,4)&&(o.top="100%"),a.isOneOf(p,1,3)?o.left=0:a.isOneOf(p,2,4)&&(o.right=0)}return i.isPickerOpen?u(X,f(l({position:"absolute",padding:"1/3"},o),{freeCSS:l({minWidth:"75%",zIndex:1e3},o.freeCSS),children:u(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{freeCSS:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.freeCSS),children:V(q,{gap:"1/12",padding:[1,0],children:[s=="fetch"&&u(M.Center,{padding:"1/2",children:u(le.Theme.R,{showInitial:!0})}),s!="fetch"&&V(N,{children:[!m.length&&u(K.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((p,h)=>{if(!p)return null;let{type:O,value:r}=p,c=t.val_optionFocused==p.id,y=i.rawValue.includes(r),S=e.onSelectorRender;return u(q,{"data-autocomplete-input-value":p.id,children:u(S,{option:p,isFocused:c,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return a.scope(()=>{if(r===null)return I=[];if(g.rawValue.includes(r)){I=I.filter(x=>x!==r);return}e.multiSelect?I.push(r):I=[r]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(C=>f(l({},C),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},p.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:s,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[a.Stringify(o)];if(!n)return;let p=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(u(q,{position:"relative",flexCenter:!0,freeCSS:{userSelect:"none"},children:u(p,{value:n==null?void 0:n.value,label:h,onRemove:O=>{if(e.disabled)return;let r=[...i.rawValue];r=r.filter(c=>c!==o),s(c=>f(l({},c),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=r.length,isPickerOpen:!0}))}})},a.Stringify(n==null?void 0:n.value)||v(8)))}),u(N,{children:m})},Core:t=>{var x,P,E;let{value:e}=t,[i,s]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[p,h]=A(((x=t.options.find(_=>{var D;return(_==null?void 0:_.value)===((D=t.value)==null?void 0:D[0])}))==null?void 0:x.id)||((P=t.options[0])==null?void 0:P.id)||""),[O,r]=A({}),[c,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[a.Stringify((E=t.options)==null?void 0:E.map(_=>_.value))]),F(()=>{if(!o.length)return;let _=[...o],D=l({},O);_.forEach(k=>{(k==null?void 0:k.type)!="label"&&(D[a.Stringify(k==null?void 0:k.value)]=k)}),r(D)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:p,set_optionFocused:h,val_optionsDict:O,set_optionsDict:r,val_optionsModified:i,set_optionsModified:s,val_keyword:d,set_keyword:m,val_status:c,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:c,set_status:y,SystemValidation:pe});let C=c.rawValue.length&&c.rawValue[0]!==null||c.isPickerOpen||c.isFocusing;return V(se,{val_status:c,set_status:y,states:t,children:[u(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:C}),u(R.Button,l({},g))]})}},Y=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var s;return i.option?((s=i.option)==null?void 0:s.type)=="label"?u(N,{children:i.option.label}):u($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["2/3",1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:V(M.Left,{gap:"1/2",children:[i.isSelected&&u(B.Check,{fontColor:"theme"}),u(K.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>V(M.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[u(K,{padding:[0,"1/2"],children:i.label}),u($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:u(B.X,{})})]}),pickerPosition:3},e),{freeCSS:l({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:u(K.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=a.Arrayify(e.value),e.options=R.InitOptions(e.options),a.isNullish(e.rightIcon)&&(e.rightIcon=u(Q,{children:u(B.Search,{})}),e.disabled&&(e.rightIcon=u(Q,{fontColor:"5.translucent",children:u(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),u(re,{componentId:e.componentId,children:R.Core,states:ue(e)})};export{Y as Autocomplete,Y as default};
+import{b as l,c as f,d as Z,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as c,jsxs as V}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import a,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as K,Row as M}from"../../mols";import{Button as $}from"../Button";import{Loader as le}from"../Loader";import{Sheet as ae}from"../Sheet";import{OptionalInputWrapper as re,BoxWrapper as se,CoreEffects as z,DefaultBoxishStyles as ue}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as ce}from"./Label";import{RightIcon as G}from".";function pe(t){let{value:e,states:i}=t,{required:s,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],p=e.filter(h=>h!==null).length;return s&&(p||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),p<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),p>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const R={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:s,label:d,value:m,searchValue:o}=i,n=o||a.isString(d)&&d||""||a.isString(m)&&m||a.Stringify(m||"")||"";a.isNullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:s||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let s=t;return i||(s=t.filter(d=>(d==null?void 0:d.type)!="label")),a.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");s=s.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),s},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:s,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:p,required:h,form:O,className:r,multiSelect:u,enableFormSubmit:y,showInitValidation:S,onValidate:g,onValidateDelay:I,onUpdateValue:x,onUpdateValidValue:C,onUserAction:P,value:E="",options:w,leftIndicator:D,rightIndicator:_,leftIcon:de,rightIcon:fe,componentId:me,status_id:Se,wrapStyles:ve,emptySelect:ye,searchInputPlaceholder:he,onSelectedRender:ge,onSelectorRender:Ie,pickerStyles:be,pickerPosition:Oe,onDynamicSearchOptions:_e,onDynamicSearchOptionsDelay:we}=J,T=Z(J,["tone","required","form","className","multiSelect","enableFormSubmit","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","searchInputPlaceholder","onSelectedRender","onSelectorRender","pickerStyles","pickerPosition","onDynamicSearchOptions","onDynamicSearchOptionsDelay"]),W="SearchInput_"+e.componentId;return F(()=>{var b;if(e.disabled||!o.isPickerOpen||a.isExist(d))return;let k=R.FilterSelectableOptions(t.val_options,i,!1);m(((b=k[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){s(""),n(k=>f(l({},k),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let k="autocomplete-click-"+e.componentId;if(!o.isPickerOpen){a(document).removeEvent([k]);return}a('[data-input-origin="'+e.componentId+'"]')&&a(document).onEvent("mousedown",U=>{let j=a(U.target),Y=!!a(j).parent("."+L("Core")).length,ee=!!a(j).parent("."+L("Selector")).length;Y||ee||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},{eventID:k,passive:!1})},[o.isPickerOpen]),V(N,{children:[c(X,f(l({tabIndex:-1},T),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[r,L("Core")].join(" "),onClick:k=>{if(T!=null&&T.onClick&&(T==null||T.onClick(k)),e.disabled)return;let b=document.activeElement;(b==null?void 0:b.id)!=W&&(oe.get().isTouchDevice||a("#"+W).focus()),n(U=>f(l({},U),{eventID:v(8),isPickerOpen:!0,isFocusing:!0}))},onKeyDown:k=>{let b=document.activeElement;(b==null?void 0:b.id)!=W&&(k.preventDefault(),a("#"+W).focus())},children:V(M.Left,{gap:0,children:[c(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),V(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/2",verticalAlign:"unset",xcss:{letterSpacing:".5px"},children:[c(R.Selected,l({},t)),c(R.SearchInput,l({},t))]}),o.rawValue.length>1&&c($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:k=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:c(B.X,{})})]})})),c(R.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:s}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return c(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,"data-input-value-shallow":i.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),xcss:{outline:"none",minWidth:12*4},onFocus:o=>{s(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){s(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:p,ctrlKey:h}=o,O=p||h;n=="Escape"?s(r=>f(l({},r),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?s(r=>f(l({},r),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?a.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),s(r=>f(l({},r),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?a.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.rawValue];r.pop(),O&&(r=[]),s(u=>f(l({},u),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&a.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){s(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let r=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!r)return;let{value:u}=r;s(y=>{let S=[...y.rawValue];return a.scope(()=>{if(u===null)return S=[];y.rawValue.includes(u)?S=S.filter(I=>I!==u):e.multiSelect?S.push(u):S=[u]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),a.scope(()=>{if(!a.isOneOf(n,"ArrowDown","ArrowUp"))return;if(o.preventDefault(),!i.isPickerOpen){s(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let r=n=="ArrowDown"?1:-1,u=R.FilterSelectableOptions(t.val_options,t.val_keyword),y=u.length-1,S=null;a.scope(()=>{var I,x,C,P,E,w,D;let g=u.findIndex(_=>(_==null?void 0:_.id)==t.val_optionFocused);if(g==-1){S=(I=u[0])==null?void 0:I.id;return}if(r==1){if(S=(x=u[0])==null?void 0:x.id,O){S=(C=u[y])==null?void 0:C.id;return}if(g==-1||g==y)return;S=(P=u[g+1])==null?void 0:P.id}else{if(S=(E=u[y])==null?void 0:E.id,O){S=(w=u[0])==null?void 0:w.id;return}if(g==-1||g==0)return;S=(D=u[g-1])==null?void 0:D.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let p=o.target.value;t.set_keyword(p),t.set_optionFocused(""),p&&s(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[s,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let p="autocomplete-search-"+e.componentId;t.set_optionFocused(""),a.interval.once(()=>H(void 0,null,function*(){var r;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let O=R.InitOptions(h||[]);t.set_options(O),t.set_optionFocused(((r=O[0])==null?void 0:r.id)||"")}),e.onDynamicSearchOptionsDelay||500,p)},[t.val_keyword,i.isComposing]),F(()=>{let p=a(`[data-selector-id="${i.componentId}"]`)[0];if(!p)return;let h=a(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(p.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=R.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let p=e.pickerPosition||0;a.isOneOf(p,1,2)?o.bottom="100%":a.isOneOf(p,3,4)&&(o.top="100%"),a.isOneOf(p,1,3)?o.left=0:a.isOneOf(p,2,4)&&(o.right=0)}return i.isPickerOpen?c(X,f(l({position:"absolute",ssZIndex:1e3,padding:"1/3"},o),{xcss:l({minWidth:"75%"},o.xcss),children:c(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{xcss:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.xcss),children:V(q,{gap:"1/12",padding:[1,0],children:[s=="fetch"&&c(M.Center,{padding:"1/2",children:c(le.Theme.R,{showInitial:!0})}),s!="fetch"&&V(N,{children:[!m.length&&c(K.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((p,h)=>{if(!p)return null;let{type:O,value:r}=p,u=t.val_optionFocused==p.id,y=i.rawValue.includes(r),S=e.onSelectorRender;return c(q,{"data-autocomplete-input-value":p.id,children:c(S,{option:p,isFocused:u,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return a.scope(()=>{if(r===null)return I=[];if(g.rawValue.includes(r)){I=I.filter(C=>C!==r);return}e.multiSelect?I.push(r):I=[r]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(x=>f(l({},x),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},p.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:s,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[a.Stringify(o)];if(!n)return;let p=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(c(q,{position:"relative",flexCenter:!0,xcss:{userSelect:"none"},children:c(p,{value:n==null?void 0:n.value,label:h,onRemove:O=>{if(e.disabled)return;let r=[...i.rawValue];r=r.filter(u=>u!==o),s(u=>f(l({},u),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=r.length,isPickerOpen:!0}))}})},a.Stringify(n==null?void 0:n.value)||v(8)))}),c(N,{children:m})},Core:t=>{var C,P,E;let{value:e}=t,[i,s]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[p,h]=A(((C=t.options.find(w=>{var D;return(w==null?void 0:w.value)===((D=t.value)==null?void 0:D[0])}))==null?void 0:C.id)||((P=t.options[0])==null?void 0:P.id)||""),[O,r]=A({}),[u,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[a.Stringify((E=t.options)==null?void 0:E.map(w=>w.value))]),F(()=>{if(!o.length)return;let w=[...o],D=l({},O);w.forEach(_=>{(_==null?void 0:_.type)!="label"&&(D[a.Stringify(_==null?void 0:_.value)]=_)}),r(D)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:p,set_optionFocused:h,val_optionsDict:O,set_optionsDict:r,val_optionsModified:i,set_optionsModified:s,val_keyword:d,set_keyword:m,val_status:u,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:u,set_status:y,SystemValidation:pe});let x=u.rawValue.length&&u.rawValue[0]!==null||u.isPickerOpen||u.isFocusing;return V(se,{val_status:u,set_status:y,states:t,children:[c(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:x,val_status:u}),c(R.Button,l({},g))]})}},Q=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var s;return i.option?((s=i.option)==null?void 0:s.type)=="label"?c(N,{children:i.option.label}):c($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["2/3",1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:V(M.Left,{gap:"1/2",children:[i.isSelected&&c(B.Check,{fontColor:"theme"}),c(K.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>V(M.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[c(K,{padding:[0,"1/2"],children:i.label}),c($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,xcss:{lineHeight:1,aspectRatio:"1/1"},children:c(B.X,{})})]}),pickerPosition:3},e),{xcss:l({cursor:"pointer"},e.xcss)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:c(K.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=a.Arrayify(e.value),e.options=R.InitOptions(e.options),a.isNullish(e.rightIcon)&&(e.rightIcon=c(G,{children:c(B.Search,{})}),e.disabled&&(e.rightIcon=c(G,{fontColor:"5.translucent",children:c(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),c(re,{componentId:e.componentId,children:R.Core,states:ue(e)})};export{Q as Autocomplete,Q as default};

package/dist/fn/Input/Color.js

@@ -1 +1 @@
-import{b as n,c as a,d as v}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as m}from"jmini";import{useState as D}from"react";import F from"../../atoms/Box";import{OptionalInputWrapper as T,BoxWrapper as h,CoreEffects as c,DefaultBoxishStyles as x}from"./core";import{InputSwitchClasses as B}from"../../@styles/componentClasses";function w(e){let{value:s,states:I}=e,{required:p}=I,l=[];return p&&!s&&l.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!l.filter(({type:f})=>f=="invalid").length,notice:l}}const U=e=>{let g=e,{componentId:s,required:I,form:p,enableFormSubmit:l,checkValidationAtFirst:f,onChange:C,onKeyDown:y,onValidate:E,onValidateDelay:R,onUpdateValue:W,onUpdateValidValue:_,onUserAction:k,value:S=""}=g,t=v(g,["componentId","required","form","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value"]),[i,r]=D(c.DefaultStatus(e.componentId||"",S));return c.CommonEffects({type:"color",states:e,val_status:i,set_status:r,SystemValidation:w}),d(h,{val_status:i,set_status:r,states:e,children:d(F,n({htmlTag:"input",type:"color","data-component-id":i.componentId,value:i.rawValue,className:B("Input"),onKeyDown:o=>{y&&y(o),l&&c.SubmitForm(o,p)},onChange:o=>{let{value:u}=o.target;r(b=>a(n({},b),{rawValue:u,eventType:"update",eventID:m(12),isInspected:!1,isValidated:!1,notice:[]})),C&&C(o)},onFocus:o=>{t!=null&&t.onFocus&&(t==null||t.onFocus(o)),r(u=>a(n({},u),{eventID:m(12),isFocusing:!0}))},onBlur:o=>{t!=null&&t.onBlur&&(t==null||t.onBlur(o)),r(u=>a(n({},u),{eventID:m(12),isFocusing:!1}))}},t))})},V=e=>{let s=a(n(a(n({},x(e)),{backgroundColor:"cloud",unitHeight:3}),e),{freeCSS:n({minWidth:108},e.freeCSS)});return d(T,{componentId:e.componentId,children:U,states:s})};export{V as Color,V as default};
+import{b as n,c as a,d as v}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as m}from"jmini";import{useState as T}from"react";import x from"../../atoms/Box";import{OptionalInputWrapper as F,BoxWrapper as h,CoreEffects as c,DefaultBoxishStyles as w}from"./core";import{InputSwitchClasses as B}from"../../@styles/componentClasses";function S(e){let{value:r,states:I}=e,{required:p}=I,l=[];return p&&!r&&l.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!l.filter(({type:f})=>f=="invalid").length,notice:l}}const U=e=>{let g=e,{componentId:r,required:I,form:p,enableFormSubmit:l,showInitValidation:f,onChange:C,onKeyDown:y,onValidate:E,onValidateDelay:R,onUpdateValue:W,onUpdateValidValue:_,onUserAction:H,value:b=""}=g,t=v(g,["componentId","required","form","enableFormSubmit","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value"]),[i,s]=T(c.DefaultStatus(e.componentId||"",b));return c.CommonEffects({type:"color",states:e,val_status:i,set_status:s,SystemValidation:S}),d(h,{val_status:i,set_status:s,states:e,children:d(x,n({htmlTag:"input",type:"color","data-component-id":i.componentId,value:i.rawValue,className:B("Input"),onKeyDown:o=>{y&&y(o),l&&c.SubmitForm(o,p)},onChange:o=>{let{value:u}=o.target;s(D=>a(n({},D),{rawValue:u,eventType:"update",eventID:m(12),isInspected:!1,isValidated:!1,notice:[]})),C&&C(o)},onFocus:o=>{t!=null&&t.onFocus&&(t==null||t.onFocus(o)),s(u=>a(n({},u),{eventID:m(12),isFocusing:!0}))},onBlur:o=>{t!=null&&t.onBlur&&(t==null||t.onBlur(o)),s(u=>a(n({},u),{eventID:m(12),isFocusing:!1}))}},t))})},V=e=>{let r=a(n(a(n({},w(e)),{backgroundColor:"cloud",unitHeight:3}),e),{xcss:n({minWidth:108},e.xcss)});return d(F,{componentId:e.componentId,children:U,states:r})};export{V as Color,V as default};

package/dist/fn/Input/Contenteditable.js

@@ -1 +1 @@
-import{b as o,c as r,d as y}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as x}from"jmini";import{useState as R}from"react";import{OptionalInputWrapper as w,BoxWrapper as D,CoreEffects as l,DefaultBoxishStyles as g}from"./core";import{Box as B}from"../../atoms";function F(t){let{value:e,states:c}=t,{required:u}=c,n=[];return u&&!e&&n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!n.filter(({type:s})=>s=="invalid").length,notice:n}}const H=t=>{let I=t,{componentId:e,tone:c,required:u,form:n,value:s,enableFormSubmit:h,checkValidationAtFirst:S,onInput:m,onKeyDown:f,onValidate:L,onValidateDelay:M,onUpdateValue:U,onUpdateValidValue:_,onUserAction:A,children:T="",leftIndicator:W,rightIndicator:k,leftIcon:q,rightIcon:K,freeCSS:G,wrapStyles:N}=I,C=y(I,["componentId","tone","required","form","value","enableFormSubmit","checkValidationAtFirst","onInput","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","children","leftIndicator","rightIndicator","leftIcon","rightIcon","freeCSS","wrapStyles"]),[i,p]=R(l.DefaultStatus(e,s));return l.CommonEffects({type:"contenteditable",states:t,val_status:i,set_status:p,SystemValidation:F}),d(D,{val_status:i,set_status:p,states:t,children:d(B,r(o({contentEditable:!0,"data-show-validation":l.isShowValidation(i,!!S),"data-component-id":i.componentId,onKeyDown:a=>{f&&f(a),h&&l.SubmitForm(a,n)},onInput:a=>{let E=a.currentTarget,{innerHTML:O,innerText:V}=E;p(v=>r(o({},v),{rawValue:V,eventType:"update",eventID:x(12),isInspected:!1,isValidated:!1,notice:[]})),m&&m(a)}},C),{children:T}))})},b=t=>{t=r(o({rows:5},t),{freeCSS:o({whiteSpace:"pre-wrap"},t.freeCSS)});let e=g(t);return d(w,{componentId:t.componentId,children:H,states:e})};export{b as Contenteditable,b as default};
+import{b as o,c as l,d as y}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as w}from"jmini";import{useState as R}from"react";import{OptionalInputWrapper as D,BoxWrapper as S,CoreEffects as s,DefaultBoxishStyles as g}from"./core";import{Box as B}from"../../atoms";function U(t){let{value:e,states:c}=t,{required:u}=c,n=[];return u&&!e&&n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!n.filter(({type:r})=>r=="invalid").length,notice:n}}const F=t=>{let f=t,{componentId:e,tone:c,required:u,form:n,value:r,enableFormSubmit:h,showInitValidation:T,onInput:m,onKeyDown:I,onValidate:H,onValidateDelay:L,onUpdateValue:M,onUpdateValidValue:_,onUserAction:W,children:x="",leftIndicator:q,rightIndicator:A,leftIcon:K,rightIcon:k,xcss:N,wrapStyles:O}=f,E=y(f,["componentId","tone","required","form","value","enableFormSubmit","showInitValidation","onInput","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","children","leftIndicator","rightIndicator","leftIcon","rightIcon","xcss","wrapStyles"]),[i,p]=R(s.DefaultStatus(e,r));return s.CommonEffects({type:"contenteditable",states:t,val_status:i,set_status:p,SystemValidation:U}),d(S,{val_status:i,set_status:p,states:t,children:d(B,l(o({contentEditable:!0,"data-show-validation":s.isShowValidation(i,!!T),"data-component-id":i.componentId,onKeyDown:a=>{I&&I(a),h&&s.SubmitForm(a,n)},onInput:a=>{let V=a.currentTarget,{innerHTML:z,innerText:C}=V;p(v=>l(o({},v),{rawValue:C,eventType:"update",eventID:w(12),isInspected:!1,isValidated:!1,notice:[]})),m&&m(a)}},E),{children:x}))})},b=t=>{t=l(o({rows:5},t),{xcss:o({whiteSpace:"pre-wrap"},t.xcss)});let e=g(t);return d(D,{componentId:t.componentId,children:F,states:e})};export{b as Contenteditable,b as default};

package/dist/fn/Input/DigitCharacters.d.ts

@@ -10,7 +10,7 @@ declare namespace DigitCharacters {
         tabIndex?: number;
         id?: string;
         value?: string | number;
-        listStyles?: StyleProps.PropsNFreeCSS;
+        listStyles?: StyleProps.StyleProps;
     };
 }
 declare const DigitCharacters: React.FC<DigitCharacters.Input>;

package/dist/fn/Input/DigitCharacters.js

@@ -1 +1 @@
-import{b as t,c as o,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as S}from"react/jsx-runtime";import{useState as P}from"react";import V,{UUID as g}from"jmini";import{$$fromRoot as _,GenerateHTMLProps as k}from"../../@utils";import{OptionalInputWrapper as K,BoxWrapper as U,CoreEffects as w,DefaultBoxishStyles as W}from"./core";import{Flex as $}from"../../atoms";import{InputClasses as R}from"../../@styles/componentClasses";function z(e){let{value:n,states:u}=e,{required:f,numericOnly:p=!1,digits:D}=u,s=[];return f&&!n&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(p&&n.match(/\D/)&&s.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=D&&s.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!s.filter(({type:C})=>C=="invalid"||C=="warn").length,notice:s}}const q=(e,n="")=>{let u=String(n),f=[];for(let p=0;p<e;p++)f[p]=u[p]||"";return{safeValue:f,rawValue:u}},A=(e="")=>{let n=e,u=n.join("");return{safeValue:n,rawValue:u}},j=e=>{let x=e,{tone:n,required:u,form:f,name:p,className:D="",digits:s,numericOnly:h=!1,enableFormSubmit:C,checkValidationAtFirst:G,onChange:J,onKeyDown:Q,onValidate:X,onValidateDelay:Y,onUpdateValue:Z,onUpdateValidValue:ee,onUserAction:te,value:O="",override:ne,freeCSS:ae,wrapStyles:ie,combineInput:re,componentId:se,listStyles:E}=x,a=T(x,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","override","freeCSS","wrapStyles","combineInput","componentId","listStyles"]),[c,d]=P(o(t({componentId:e.componentId||""},q(s,O)),{eventType:"init",eventID:g(12)}));w.CommonEffects({type:"textfield",states:e,val_status:c,set_status:d,SystemValidation:z});let b=[];for(let i=0;i<s;i++){let M=c.safeValue[i],N={},v=D;e.combineInput&&(v=[D,R("DigitCharacterCell"),R("Combined")].join(" ")),b.push(S("input",{type:"text",inputMode:h?"numeric":e.inputMode||"text",value:M,id:"Digit-"+i+"-"+c.componentId,className:v,style:t(t({},e.style),N),onKeyDown:m=>{let{key:l,code:H}=m;if(l=="Tab")return;m.preventDefault();let y=null;if(l=="Backspace"){let r=c.safeValue;r[i]="",d(I=>o(t(t({},I),A(r)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i-1}else if(V.isOneOf(l,"ArrowLeft","ArrowRight")){let r=+(l=="ArrowRight")*2-1;y=i+r}else C&&w.SubmitForm(m,f),(()=>{let r=H.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!r)return;let I=r[2]||r[3]||r[4];if(h&&!I.match(/\d/)||!I)return;let F=c.safeValue;F[i]=I,d(L=>o(t(t({},L),A(F)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i+1})();V.isExist(y)&&_("#Digit-"+y+"-"+c.componentId).focus()},onChange:()=>{},onFocus:m=>{a!=null&&a.onFocus&&(a==null||a.onFocus(m)),d(l=>o(t({},l),{eventID:g(12),isFocusing:!0}))},onBlur:m=>{a!=null&&a.onBlur&&(a==null||a.onBlur(m)),d(l=>o(t({},l),{eventID:g(12),isFocusing:!1}))}},i))}return S(U,{val_status:c,set_status:d,states:e,children:S($,o(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},E),{children:b}))})},B=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=o(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let n=k(W(e));return S(K,{componentId:e.componentId,children:j,states:n})};export{B as DigitCharacters,B as default};
+import{b as t,c as o,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as x}from"react/jsx-runtime";import{useState as P}from"react";import V,{UUID as g}from"jmini";import{$$fromRoot as _,GenerateHTMLProps as K}from"../../@utils";import{OptionalInputWrapper as U,BoxWrapper as W,CoreEffects as F,DefaultBoxishStyles as k}from"./core";import{Flex as $}from"../../atoms";import{InputClasses as R}from"../../@styles/componentClasses";function z(e){let{value:n,states:u}=e,{required:d,numericOnly:p=!1,digits:D}=u,r=[];return d&&!n&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(p&&n.match(/\D/)&&r.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=D&&r.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!r.filter(({type:h})=>h=="invalid"||h=="warn").length,notice:r}}const q=(e,n="")=>{let u=String(n),d=[];for(let p=0;p<e;p++)d[p]=u[p]||"";return{safeValue:d,rawValue:u}},B=(e="")=>{let n=e,u=n.join("");return{safeValue:n,rawValue:u}},X=e=>{let S=e,{tone:n,required:u,form:d,name:p,className:D="",digits:r,numericOnly:C=!1,enableFormSubmit:h,showInitValidation:j,onChange:G,onKeyDown:J,onValidate:Q,onValidateDelay:Y,onUpdateValue:Z,onUpdateValidValue:ee,onUserAction:te,value:A="",override:ne,xcss:ae,wrapStyles:ie,combineInput:se,componentId:re,listStyles:E}=S,a=T(S,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","override","xcss","wrapStyles","combineInput","componentId","listStyles"]),[c,f]=P(()=>o(t({componentId:e.componentId||""},q(r,A)),{eventType:"init",eventID:g(12)}));F.CommonEffects({type:"textfield",states:e,val_status:c,set_status:f,SystemValidation:z});let b=[];for(let i=0;i<r;i++){let M=c.safeValue[i],H={},v=D;e.combineInput&&(v=[D,R("DigitCharacterCell"),R("Combined")].join(" ")),b.push(x("input",{type:"text",inputMode:C?"numeric":e.inputMode||"text",value:M,id:"Digit-"+i+"-"+c.componentId,className:v,style:t(t({},e.style),H),onKeyDown:m=>{let{key:l,code:L}=m;if(l=="Tab")return;m.preventDefault();let y=null;if(l=="Backspace"){let s=c.safeValue;s[i]="",f(I=>o(t(t({},I),B(s)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i-1}else if(V.isOneOf(l,"ArrowLeft","ArrowRight")){let s=+(l=="ArrowRight")*2-1;y=i+s}else h&&F.SubmitForm(m,d),(()=>{let s=L.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!s)return;let I=s[2]||s[3]||s[4];if(C&&!I.match(/\d/)||!I)return;let w=c.safeValue;w[i]=I,f(N=>o(t(t({},N),B(w)),{eventType:"update",eventID:g(12),isInspected:!1})),y=i+1})();V.isExist(y)&&_("#Digit-"+y+"-"+c.componentId).focus()},onChange:()=>{},onFocus:m=>{a!=null&&a.onFocus&&(a==null||a.onFocus(m)),f(l=>o(t({},l),{eventID:g(12),isFocusing:!0}))},onBlur:m=>{a!=null&&a.onBlur&&(a==null||a.onBlur(m)),f(l=>o(t({},l),{eventID:g(12),isFocusing:!1}))}},i))}return x(W,{val_status:c,set_status:f,states:e,children:x($,o(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},E),{children:b}))})},O=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=o(t({textAlign:"center",width:0},e),{xcss:t({minWidth:12*2,marginRight:-1},e.xcss),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let n=K(k(e));return x(U,{componentId:e.componentId,children:X,states:n})};export{O as DigitCharacters,O as default};

package/dist/fn/Input/Drum.d.ts

@@ -27,8 +27,8 @@ declare namespace Drum {
         rootStates: Input & {
             value: Value[];
         };
-        val_status: InputTypes.Status.Plain<Value>;
-        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
+        val_status: InputTypes.Status<Value>;
+        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status>>;
     };
     type Component = {
         <T = Value>(p: Input<Value<T>>): React.JSX.Element;

package/dist/fn/Input/Drum.js

@@ -1 +1 @@
-import{b as r,c as p,d as _}from"../../chunk-C5N2D3ZX.js";import{Fragment as K,jsx as a,jsxs as O}from"react/jsx-runtime";import g,{UUID as y}from"jmini";import{useState as k,useEffect as z}from"react";import{$$fromRoot as $}from"../../@utils";import{Box as v,Column as j,CacheRender as q}from"../../atoms";import{Button as N}from"../Button";import{OptionalInputWrapper as X,BoxWrapper as J,CoreEffects as V,DefaultBoxishStyles as Y}from"./core";function G(o){let{value:e,states:n}=o,{required:l}=n,t=[];return l&&e===null&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:u})=>u=="invalid").length,notice:t}}const c={Original:o=>{let{rootStates:e,val_status:n,set_status:l}=o,R=e,{required:t,form:u,className:d,isHorizontal:s,enableFormSubmit:C,checkValidationAtFirst:W,onValidate:Q,onValidateDelay:Z,onUpdateValue:ee,onUpdateValidValue:te,onUserAction:oe,value:ne="",options:E,componentId:D,status_id:re,wrapStyles:ae}=R,A=_(R,["required","form","className","isHorizontal","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","componentId","status_id","wrapStyles"]),[i,B]=k(null);return z(()=>{let f=$(`[data-component-id="${D}"]`);if(!f[0])return;B(f[0]);let h="onscrollend"in window,S="scroll.Drum-"+D,I=h?50:150;return f.addEvent({eventType:h&&"scrollend"||"scroll",eventID:S,callback:b=>{g.interval.once(()=>{let{top:m,left:P,width:L,height:F}=f.position();const x=document.elementFromPoint(P+L/2,m+F/2);if(!x||!x.id)return;let[M,le,U]=x.id.split("-");if(M!=n.componentId)return;let T=E[Number(U)];T&&l(w=>w.rawValue==T.value?p(r({},w),{eventID:y(12)}):p(r({},w),{rawValue:T.value,eventType:"update",eventID:y(12),isInspected:!1,isValidated:!1,notice:[]}))},I,"update-drum-input-value")}}),()=>{f.removeEvent(S)}},[]),z(()=>{if(!i)return;let f=E.findIndex(m=>(m==null?void 0:m.value)==n.rawValue);if(f===-1)return;let h=g("#"+[n.componentId,"opt",f].join("-"))[0];if(!h)return;let S=i.position(),I=h.position();if(s){let m=h.offsetLeft-S.width/2+I.width/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({left:m,behavior:"smooth"});return}i.scrollLeft=m;return}let b=h.offsetTop-S.height/2+I.height/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({top:b,behavior:"smooth"});return}i.scrollTop=b},[i,n.rawValue]),O(j,p(r({gap:"1/4",tabIndex:0,position:"relative"},A),{"data-disabled":e.disabled,"data-show-validation":V.isShowValidation(n,!!W),"data-component-id":n.componentId,"data-input-origin":n.componentId,children:[a(c.Marker,p(r({},o),{val_parent:i})),a(c.EdgePadding,{}),a(c.Options,r({},o)),a(c.EdgePadding,{})]}))},Options:o=>{let{rootStates:e,val_status:n,set_status:l}=o;return a(K,{children:e.options.map((t,u)=>{if(!t)return null;let d=g.isEqual(t==null?void 0:t.value,n.rawValue);return t.type=="label"?a(v,{children:t.label||t.value},y(12)):a(q,{params:{value:t.value,isSelected:d},forceRender:(s,C)=>s.isSelected!=C.isSelected,children:a(N.Clear,{id:[n.componentId,"opt",u].join("-"),tabIndex:-1,padding:"1/2",color:"cloud",border:"0.trans",ssEffectsOnActive:!1,isActive:d,isActiveStyles:{isSemiBoldFont:!0},freeCSS:{scrollSnapAlign:"center"},onClick:()=>{d||l(s=>p(r({},s),{rawValue:t.value,eventType:"update",eventID:y(12),isInspected:!1,isValidated:!1,notice:[]}))},children:t.label||t.value})},[u,t==null?void 0:t.value].join("-"))})})},Marker:o=>{let{rootStates:e,val_parent:n,val_status:l}=o,t=!e.isHorizontal;if(!n)return null;let u=e.options.findIndex(s=>(s==null?void 0:s.value)==l.rawValue);if(u===-1)return null;let d=g("#"+[l.componentId,"opt",u].join("-"))[0];return d?a(v,p(r({flexSizing:"none",transition:"short",position:"sticky"},t?{height:0}:{width:0}),{flexCenter:!0,freeCSS:r({pointerEvents:"none",zIndex:3},t?{top:"50%",transform:"translateY(-50%)"}:{left:"50%",transform:"translateX(-50%)"}),children:a(v,{transition:"short",boxShadow:"0.remark",borderRadius:"2.tone.secondary",backgroundColor:"theme.opa.few",border:!0,borderColor:"theme",flexSizing:"none",freeCSS:{height:d.position().height||0,width:d.position().width||0}})})):null},EdgePadding:()=>a(v,{flexSizing:"none",freeCSS:{width:"50%",height:"50%",pointerEvents:"none"}}),EdgeShadow:o=>o.position=="top"||o.position=="bottom"?a(v,{position:"absolute",borderRadius:"1.tone.primary",gradients:{deg:o.position=="top"?0:180,colors:["hsla(var(--color-layer0-hsl),0)","hsla(var(--color-layer0-hsl),.8)"]},freeCSS:{zIndex:10,[o.position]:1,left:1,right:1,height:"35%",pointerEvents:"none"}}):a(v,{position:"absolute",borderRadius:"1.tone.primary",freeCSS:{zIndex:10,[o.position]:1,top:1,bottom:1,width:"35%",pointerEvents:"none"}}),Core:o=>{let[e,n]=k(V.DefaultStatus(o.componentId,o.value)),l={rootStates:o,val_status:e,set_status:n};return V.CommonEffects({type:"drum",states:o,val_status:e,set_status:n,SystemValidation:G}),O(J,{val_status:e,set_status:n,states:o,children:[a(c.EdgeShadow,{position:o.isHorizontal?"left":"top"}),a(c.Original,r({},l)),a(c.EdgeShadow,{position:o.isHorizontal?"right":"bottom"})]})}},H=o=>{var n,l;let e=r({},o);return e=r({padding:"1/2",overflow:"auto"},e),e.isHorizontal?e=p(r({flexType:"row",flexWrap:!1},e),{freeCSS:r({whiteSpace:"nowrap",scrollSnapType:"x mandatory",maxWidth:12*24},e.freeCSS)}):e=p(r({},e),{freeCSS:r({scrollSnapType:"y mandatory",maxHeight:12*20,minWidth:12*6},e.freeCSS)}),e.value=(n=e.value)!=null?n:null,(l=e.options)==null||l.forEach((t,u)=>{if(!t)return;let{type:d,value:s}=t;e.options[u]=p(r({id:y(12)},t),{value:s,type:d||"selector"})}),a(X,{componentId:e.componentId,children:c.Core,states:Y(e)})};export{H as Drum,H as default};
+import{b as a,c as p,d as _}from"../../chunk-C5N2D3ZX.js";import{Fragment as G,jsx as r,jsxs as W}from"react/jsx-runtime";import x,{UUID as I}from"jmini";import{useState as k,useEffect as H}from"react";import{$$fromRoot as $}from"../../@utils";import{Box as v,Column as j,CacheRender as q}from"../../atoms";import{Button as N}from"../Button";import{OptionalInputWrapper as Z,BoxWrapper as X,CoreEffects as V,DefaultBoxishStyles as J}from"./core";function Y(o){let{value:e,states:n}=o,{required:l}=n,t=[];return l&&e===null&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:u})=>u=="invalid").length,notice:t}}const f={Original:o=>{let{rootStates:e,val_status:n,set_status:l}=o,C=e,{required:t,form:u,className:d,isHorizontal:s,enableFormSubmit:E,showInitValidation:z,onValidate:K,onValidateDelay:Q,onUpdateValue:ee,onUpdateValidValue:te,onUserAction:oe,value:ne="",options:D,componentId:R,status_id:ae,wrapStyles:re}=C,B=_(C,["required","form","className","isHorizontal","enableFormSubmit","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","componentId","status_id","wrapStyles"]),[i,A]=k(null);return H(()=>{let c=$(`[data-component-id="${R}"]`);if(!c[0])return;A(c[0]);let h="onscrollend"in window,y="scroll.Drum-"+R,g=h?50:150;return c.onEvent(h&&"scrollend"||"scroll",S=>{x.interval.once(()=>{let{top:m,left:L,width:M,height:P}=c.position();const b=document.elementFromPoint(L+M/2,m+P/2);if(!b||!b.id)return;let[F,le,U]=b.id.split("-");if(F!=n.componentId)return;let w=D[Number(U)];w&&l(T=>T.rawValue==w.value?p(a({},T),{eventID:I(12)}):p(a({},T),{rawValue:w.value,eventType:"update",eventID:I(12),isInspected:!1,isValidated:!1,notice:[]}))},g,"update-drum-input-value")},{eventID:y}),()=>{c.removeEvent(y)}},[]),H(()=>{if(!i)return;let c=D.findIndex(m=>(m==null?void 0:m.value)==n.rawValue);if(c===-1)return;let h=x("#"+[n.componentId,"opt",c].join("-"))[0];if(!h)return;let y=i.position(),g=h.position();if(s){let m=h.offsetLeft-y.width/2+g.width/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({left:m,behavior:"smooth"});return}i.scrollLeft=m;return}let S=h.offsetTop-y.height/2+g.height/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({top:S,behavior:"smooth"});return}i.scrollTop=S},[i,n.rawValue]),W(j,p(a({gap:"1/4",tabIndex:0,position:"relative"},B),{"data-disabled":e.disabled,"data-show-validation":V.isShowValidation(n,!!z),"data-component-id":n.componentId,"data-input-origin":n.componentId,children:[r(f.Marker,p(a({},o),{val_parent:i})),r(f.EdgePadding,{}),r(f.Options,a({},o)),r(f.EdgePadding,{})]}))},Options:o=>{let{rootStates:e,val_status:n,set_status:l}=o;return r(G,{children:e.options.map((t,u)=>{if(!t)return null;let d=x.isEqual(t==null?void 0:t.value,n.rawValue);return t.type=="label"?r(v,{children:t.label||t.value},I(12)):r(q,{params:{value:t.value,isSelected:d},forceRender:(s,E)=>s.isSelected!=E.isSelected,children:r(N.Clear,{id:[n.componentId,"opt",u].join("-"),tabIndex:-1,padding:"1/2",color:"cloud",border:"0.trans",ssEffectsOnActive:!1,isActive:d,isActiveStyles:{isSemiBoldFont:!0},xcss:{scrollSnapAlign:"center"},onClick:()=>{d||l(s=>p(a({},s),{rawValue:t.value,eventType:"update",eventID:I(12),isInspected:!1,isValidated:!1,notice:[]}))},children:t.label||t.value})},[u,t==null?void 0:t.value].join("-"))})})},Marker:o=>{let{rootStates:e,val_parent:n,val_status:l}=o,t=!e.isHorizontal;if(!n)return null;let u=e.options.findIndex(s=>(s==null?void 0:s.value)==l.rawValue);if(u===-1)return null;let d=x("#"+[l.componentId,"opt",u].join("-"))[0];return d?r(v,p(a({flexSizing:"none",transition:"short",position:"sticky"},t?{height:0}:{width:0}),{flexCenter:!0,ssZIndex:3,xcss:a({pointerEvents:"none"},t?{top:"50%",transform:"translateY(-50%)"}:{left:"50%",transform:"translateX(-50%)"}),children:r(v,{transition:"short",boxShadow:"0.remark",borderRadius:"2.tone.secondary",backgroundColor:"theme.opa.few",border:!0,borderColor:"theme",flexSizing:"none",xcss:{height:d.position().height||0,width:d.position().width||0}})})):null},EdgePadding:()=>r(v,{flexSizing:"none",xcss:{width:"50%",height:"50%",pointerEvents:"none"}}),EdgeShadow:o=>o.position=="top"||o.position=="bottom"?r(v,{position:"absolute",borderRadius:"1.tone.primary",ssZIndex:10,gradients:{deg:o.position=="top"?0:180,colors:["hsla(var(--color-layer0-hsl),0)","hsla(var(--color-layer0-hsl),.8)"]},xcss:{[o.position]:1,left:1,right:1,height:"35%",pointerEvents:"none"}}):r(v,{position:"absolute",borderRadius:"1.tone.primary",ssZIndex:10,xcss:{[o.position]:1,top:1,bottom:1,width:"35%",pointerEvents:"none"}}),Core:o=>{let[e,n]=k(V.DefaultStatus(o.componentId,o.value)),l={rootStates:o,val_status:e,set_status:n};return V.CommonEffects({type:"drum",states:o,val_status:e,set_status:n,SystemValidation:Y}),W(X,{val_status:e,set_status:n,states:o,children:[r(f.EdgeShadow,{position:o.isHorizontal?"left":"top"}),r(f.Original,a({},l)),r(f.EdgeShadow,{position:o.isHorizontal?"right":"bottom"})]})}},O=o=>{var n,l;let e=a({},o);return e=a({padding:"1/2",overflow:"auto"},e),e.isHorizontal?e=p(a({flexType:"row",flexWrap:!1},e),{xcss:a({whiteSpace:"nowrap",scrollSnapType:"x mandatory",maxWidth:12*24},e.xcss)}):e=p(a({},e),{xcss:a({scrollSnapType:"y mandatory",maxHeight:12*20,minWidth:12*6},e.xcss)}),e.value=(n=e.value)!=null?n:null,(l=e.options)==null||l.forEach((t,u)=>{if(!t)return;let{type:d,value:s}=t;e.options[u]=p(a({id:I(12)},t),{value:s,type:d||"selector"})}),r(Z,{componentId:e.componentId,children:f.Core,states:J(e)})};export{O as Drum,O as default};

package/dist/fn/Input/Filer.d.ts

@@ -23,14 +23,14 @@ declare namespace Filer {
         rootStates: Input & {
             limit: number;
         };
-        val_status: InputTypes.Status.Plain<CustomFile[]>;
-        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain<CustomFile[]>>>;
+        val_status: InputTypes.Status<CustomFile[]>;
+        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status<CustomFile[]>>>;
     };
     type ListCellInput = WrapperStates & {
         index: number;
         val_file: File;
-        val_status: InputTypes.Status.Plain<CustomFile[]>;
-        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain<CustomFile[]>>>;
+        val_status: InputTypes.Status<CustomFile[]>;
+        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status<CustomFile[]>>>;
     };
     namespace Methods {
         type Component = React.FC<Input>;