ados-rcm 1.0.8 → 1.0.10

package/dist/AModule/AComponents/AFloatMenu/AFloatMenu.d.ts

@@ -1,29 +1,131 @@
 /// <reference types="react" />
 import { EDir12, TActionRef, TIdx } from '../ATypes/ATypes';
-import { TCBAble } from '../../AUtils/cbF';
+import { TCanCallback } from '../../AUtils/cbF';
 export interface IAFloatMenuActions {
+    /**
+     * open : () => void
+     * <br/>Description : open AFloatMenu
+     */
     open: () => void;
+    /**
+     * close : () => void
+     * <br/>Description : close AFloatMenu
+     */
     close: () => void;
+    /**
+     * toggle : () => void
+     * <br/>Description : toggle AFloatMenu
+     */
     toggle: () => void;
 }
 export interface IAFloatMenuContentProps {
+    /**
+     * defKey : TIdx
+     * <br/>Description : defKey of AFloatMenu
+     */
     defKey: TIdx;
+    /**
+     * def : IAFloatMenuDef
+     * <br/>Description : def of AFloatMenu
+     */
     def: IAFloatMenuDef;
 }
 export interface IAFloatMenuDef {
+    /**
+     * noDisplay? : boolean
+     * <br/>Description : decides whether to display the menu or not
+     */
     noDisplay?: boolean;
+    /**
+     * isDisabled? : boolean
+     * <br/>Description : decides whether the menu is disabled or not
+     */
     isDisabled?: boolean;
-    content?: TCBAble<IAFloatMenuContentProps, React.ReactNode>;
+    /**
+     * content? : TCanCallback<IAFloatMenuContentProps, React.ReactNode>
+     * <br/>Description : content of AFloatMenu
+     */
+    content?: TCanCallback<IAFloatMenuContentProps, React.ReactNode>;
 }
 export type TAFloatMenuDefs = {
     [key in TIdx]: IAFloatMenuDef;
-} & {
-    defaultDef?: IAFloatMenuDef;
 };
 export interface IAFloatMenuProps {
+    /**
+     * defs : TAFloatMenuDefs
+     * <br/>Description : defs of AFloatMenu
+     * <br/>Basic Usage :
+     * <br/>(1)const defs = {
+     *   'testDefKey' : {
+     *     content : ({defKey, def}) => <div>{defKey}</div>,
+     *   },
+     *   'testDefKey2' : {}
+     * }
+     * return <AFloatMenu defs={defs}/>
+     */
     defs: TAFloatMenuDefs;
+    /**
+     * defaultDef? : IAFloatMenuDef
+     * <br/>Description : defaultDef of AFloatMenu. it will affect all defs.
+     * <br/>Basic Usage :
+     * <br/>(1)const defs = {
+     *   'testDefKey' : {
+     *     content : ({defKey, def}) => <div>{defKey}</div>,
+     *   },
+     *   'testDefKey2' : {}
+     * }
+     * const defaultDef = {
+     *  content : ({defKey, def}) => <div>I am test defaultDef!</div>,
+     * }
+     * return <AFloatMenu defs={defs} defaultDef={defaultDef}/> // testDefKey2 will render 'I am test defaultDef!'
+     */
+    defaultDef?: IAFloatMenuDef;
+    /**
+     * anchorRef : React.RefObject<HTMLElement>
+     * <br/>Description : anchorRef of AFloatMenu
+     * <br/>Basic Usage :
+     * <br/>(1)const anchorRef = useRef<HTMLDivElement>(null);
+     * return <>
+     *  <div ref={anchorRef}>I am anchor</div>
+     *  <AFloatMenu anchorRef={anchorRef}/>
+     * </>
+     */
     anchorRef: React.RefObject<HTMLElement>;
+    /**
+     * position? : EDir12
+     * <br/>Description : position of AFloatMenu based on anchorRef
+     * <br/>Basic Usage :
+     * <br/>(1)<AFloatMenu position={EDir12.W}/>
+     */
     position?: EDir12;
+    /**
+     * actionRef? : TActionRef<IAFloatMenuActions>
+     * <br/>Description : actionRef of AFloatMenu
+     * <br/>Basic Usage :
+     * <br/>(1)const actionRef = useRef<IAFloatMenuActions>();
+     * return <AFloatMenu actionRef={actionRef}/>
+     */
     actionRef?: TActionRef<IAFloatMenuActions>;
 }
-export declare const AFloatMenu: ({ defs, anchorRef, actionRef, position }: IAFloatMenuProps) => import("react").ReactPortal | null;
+/**
+ * AComponent : AFloatMenu
+ * <br/>Description : AFloatMenu is a floating component with menues to click.
+ * <br/>Basic Usage :
+ * <br/>(1)const defs = {
+ *  'testDefKey' : {
+ *     content : ({defKey, def}) => <div>{defKey}</div>,
+ *   },
+ *   'testDefKey2' : {}
+ * }
+ * const defaultDef = {
+ *   content : ({defKey, def}) => <div>I am test defaultDef!</div>,
+ * }
+ * const anchorRef = useRef<HTMLDivElement>(null);
+ * return (
+ *   <>
+ *     <div ref={anchorRef}>I am anchor</div>
+ *     <AFloatMenu defs={defs} defaultDef={defaultDef} anchorRef={anchorRef}/>
+ *   </>
+ * )
+ */
+export declare const AFloatMenu: ({ defs: extDefs, defaultDef: extDefaultDef, anchorRef, actionRef, position, }: IAFloatMenuProps) => import("react").ReactPortal | null;

package/dist/AModule/AComponents/AFrames/AFrames.d.ts

@@ -1,13 +1,44 @@
 import { IABaseProps } from '../ABase/ABase';
+/**
+ * AComponent : AFrame : RowFrame
+ * <br/>Description : RowFrame is a frame component that is displayed as a row and aligned center.
+ * <br/>Basic Usage :
+ * <br/>(1)<RowFrame>
+ *   Items
+ *   <div>Item1</div>
+ *   <AICon icon="Alert"/>
+ * </RowFrame>
+ */
 export declare const RowFrame: (props: IABaseProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ColFrame: (props: IABaseProps) => import("react/jsx-runtime").JSX.Element;
 /**
- * OverflowFrame
- * Description : it sets the tooltip of the children if the children is overflowed.
- * Notice 1 :
+ * AComponent : AFrame : ColFrame
+ * <br/>Description : ColFrame is a frame component that is displayed as a column and aligned center.
+ * <br/>Basic Usage :
+ * <br/>(1)<ColFrame>
+ *   Items
+ *   <div>Item1</div>
+ *   <AICon icon="Alert"/>
+ * </ColFrame>
  */
+export declare const ColFrame: (props: IABaseProps) => import("react/jsx-runtime").JSX.Element;
 interface IOverflowFrameProps extends IABaseProps {
+    /**
+     * noOverflowTooltip? : boolean
+     * <br/>Description : decides whether to display tooltip when overflowed or not
+     * <br/>Basic Usage :
+     * <br/>(1)<OverflowFrame noOverflowTooltip>
+     *  Long TextTextTextTextTextTextTextTextTextText
+     * </OverflowFrame>
+     */
     noOverflowTooltip?: boolean;
 }
+/**
+ * AComponent : AFrame : OverflowFrame
+ * <br/>Description : OverflowFrame is a frame component that is text-ellipsis and shows tooltips when overflowed.
+ * <br/>Basic Usage :
+ * <br/>(1)<OverflowFrame>
+ *  Long TextTextTextTextTextTextTextTextTextText
+ * </OverflowFrame>
+ */
 export declare const OverflowFrame: ({ tooltip: extTooltip, children, abaseRef, className, noOverflowTooltip, ...props }: IOverflowFrameProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AModule/AComponents/AGrow/AGrow.d.ts

@@ -1 +1,11 @@
+/**
+ * AComponent : AGrow
+ * <br/>Description : AGrow is a frame component that grows flexibly.
+ * <br/>Basic Usage :
+ * <br/>(1)<div style={{display: 'flex', flexGrow: 1}}>
+ *   Left Item
+ *   <AGrow/>
+ *   Right Item
+ * </div>
+ */
 export declare const AGrow: () => import("react/jsx-runtime").JSX.Element;

package/dist/AModule/AComponents/AIcon/AIcon.d.ts

@@ -4,17 +4,21 @@ export interface IASVGProps extends React.SVGProps<SVGSVGElement> {
 }
 export type TIcons = keyof typeof AIcons;
 export interface IAIconProps extends IASVGProps {
+    /**
+     * icon : TIcons
+     * <br/>Description : icon to render
+     * <br/>Basic Usage :
+     * <br/>(1)<AIcon icon="Alert"/>
+     */
     icon: TIcons;
-    isDisabled?: boolean;
 }
 /**
- * AIcon is a component that renders an SVG icon.
- *
- * Notice 1 : icons must be have a square viewbox.
- * Notice 2 : default width and height is 24.
- * Notice 3 : larger images should be handled as images, not icons.
+ * AComponent : AIcon
+ * <br/>Description : AIcon is an icon component that can render icons.
+ * <br/>Basic Usage :
+ * <br/>(1)<AIcon icon="Alert"/>
  */
-export declare const AIcon: ({ icon, svgRef, isDisabled, ...rest }: IAIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AIcon: ({ icon, svgRef, ...rest }: IAIconProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AIcons: Readonly<{
     ArrowDown: (props?: IASVGProps) => import("react/jsx-runtime").JSX.Element;
     ArrowUp: (props?: IASVGProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AModule/AComponents/AInput/AInput.d.ts

@@ -1,22 +1,115 @@
 import React from 'react';
-import { IAWrapProps } from '../AWrap/AWrap';
-import { IABaseProps } from '../ABase/ABase';
 import { TUseValues } from '../../AHooks/useValues';
+import { IABaseProps } from '../ABase/ABase';
+import { IAWrapProps } from '../AWrap/AWrap';
 export type TInputType = 'Primary' | 'Secondary' | 'Error';
 export interface IAInputProps extends IABaseProps, IAWrapProps {
+    /**
+     * onEnterPress? : (value: string) => void
+     * <br/>Description : onEnterPress of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput onEnterPress={value => console.log(value)}/>
+     */
     onEnterPress?: (value: string) => void;
+    /**
+     * type? : TInputType = 'Primary'
+     * <br/>Description : type of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput type="Secondary"/>
+     */
     type?: TInputType;
+    /**
+     * inputRef? : React.RefObject<HTMLInputElement>
+     * <br/>Description : inputRef of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)const inputRef = useRef<HTMLInputElement>(null);
+     * <AInput inputRef={inputRef}/>
+     */
     inputRef?: React.RefObject<HTMLInputElement>;
+    /**
+     * useValue? : TUseValues<string>
+     * <br/>Description : useValue of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)const [value, setValue] = useState<string>('');
+     * <AInput useValue={[value, setValue]}/>
+     */
     useValue?: TUseValues<string>;
+    /**
+     * isReadonly? : boolean
+     * <br/>Description : decides whether the input is readonly or not
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput isReadonly/>
+     */
     isReadonly?: boolean;
+    /**
+     * placeholder? : string
+     * <br/>Description : placeholder of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput placeholder="Placeholder"/>
+     */
     placeholder?: string;
+    /**
+     * maxLength? : number
+     * <br/>Description : maxLength of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput maxLength={10}/>
+     */
     maxLength?: number;
+    /**
+     * tabIndex? : number
+     * <br/>Description : tabIndex of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput tabIndex={1}/>
+     */
     tabIndex?: number;
+    /**
+     * autoFocus? : boolean
+     * <br/>Description : decides whether the input is focused or not
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput autoFocus/>
+     */
     autoFocus?: boolean;
+    /**
+     * isPassword? : boolean
+     * <br/>Description : decides whether the input is password or not. if true, values will be masked.
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput isPassword/>
+     */
     isPassword?: boolean;
+    /**
+     * autoComplete? : string = 'off'
+     * <br/>Description : autoComplete of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput autoComplete="on"/>
+     */
     autoComplete?: string;
+    /**
+     * LeftAddon? : React.ReactNode
+     * <br/>Description : LeftAddon of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput LeftAddon={<AICon icon="Search"/>}/>
+     */
     LeftAddon?: React.ReactNode;
+    /**
+     * RightAddon? : React.ReactNode
+     * <br/>Description : RightAddon of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput RightAddon={<AICon icon="Search"/>}/>
+     */
     RightAddon?: React.ReactNode;
+    /**
+     * inputProps? : React.InputHTMLAttributes<HTMLInputElement>
+     * <br/>Description : inputProps of AInput
+     * <br/>Basic Usage :
+     * <br/>(1)<AInput inputProps={{onFocus: () => console.log('focus')}}/>
+     */
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
+/**
+ * AComponent : AInput
+ * <br/>Description : AInput is an input component. it has AWrap and ABase inside, so be careful with the styles. I recommend checking out the element hierarchy first.
+ * <br/>Basic Usage :
+ * <br/>(1)const [value, setValue] = useState<string>('');
+ * return <AInput useValue={[value, setValue]}/>
+ */
 export declare const AInput: ({ onEnterPress, type, inputRef, useValue, isReadonly, placeholder, maxLength, tabIndex, autoFocus, isPassword, autoComplete, LeftAddon, RightAddon, inputProps, wrapProps, helperText, label, wrapType, ...abaseProps }: IAInputProps) => React.ReactNode;

package/dist/AModule/AComponents/AListView/AListView.d.ts

@@ -10,28 +10,81 @@
  *
  */
 import React from 'react';
+import { TCanCallback } from '../../AUtils/cbF';
 import { IObject } from '../../AUtils/objF';
-import { TIdx } from '../ATypes/ATypes';
 import { IABaseProps } from '../ABase/ABase';
-import { TCBAble } from '../../AUtils/cbF';
+import { TIdx } from '../ATypes/ATypes';
 export interface IAListViewContentProps<T extends IObject> {
+    /**
+     * defKey : TIdx
+     * <br/>Description : defKey of AListView
+     */
     defKey: TIdx;
+    /**
+     * item : T
+     * <br/>Description : item of AListView
+     */
     item: T;
+    /**
+     * def : IAListViewDef<T>
+     * <br/>Description : def of AListView
+     */
     def: IAListViewDef<T>;
 }
 export interface IAListViewDef<T extends IObject> {
-    label?: TCBAble<IAListViewContentProps<T>, React.ReactNode>;
-    content?: TCBAble<IAListViewContentProps<T>, React.ReactNode>;
+    /**
+     * label? : TCanCallback<IAListViewContentProps<T>, React.ReactNode>
+     * <br/>Description : label of AListView
+     */
+    label?: TCanCallback<IAListViewContentProps<T>, React.ReactNode>;
+    /**
+     * content? : TCanCallback<IAListViewContentProps<T>, React.ReactNode>
+     * <br/>Description : content of AListView
+     */
+    content?: TCanCallback<IAListViewContentProps<T>, React.ReactNode>;
 }
 export type TAListViewDefs<T extends IObject> = {
     [key in Exclude<keyof T, symbol>]: IAListViewDef<T>;
 } & {
     [key in TIdx]?: IAListViewDef<T>;
-} & {
-    defaultDef?: IAListViewDef<T>;
 };
 export interface IAListViewProps<T extends IObject> extends IABaseProps {
+    /**
+     * defs : TAListViewDefs<T>
+     * <br/>Description : defs of AListView
+     * <br/>Basic Usage :
+     * const defs = {
+     *  'Name': {label: ({item}) => item.name},
+     *  'Age': {content: ({item}) => item.age},
+     * }
+     * <AListView defs={defs} item={{name: 'John', age: 20}}/>
+     */
     defs: TAListViewDefs<T>;
+    /**
+     * defaultDef? : IAListViewDef<T>
+     * <br/>Description : defaultDef of AListView. it affects no all defs, and can be overridden by each def.
+     * <br/>Basic Usage :
+     * <br/>(1)const defaultDef = {label: ({defKey}) => defKey};
+     * <AListView defs={{'Name': {content: ({item}) => item.name}}} defaultDef={defaultDef}/>
+     */
+    defaultDef?: IAListViewDef<T>;
+    /**
+     * item : T
+     * <br/>Description : item of AListView
+     * <br/>Basic Usage :
+     * <br/>(1)<AListView defs={{'Name': {content: ({item}) => item.name}}} item={{name: 'John'}}/>
+     */
     item: T;
 }
-export declare const AListView: <T extends IObject>({ defs, item, ...rest }: IAListViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * AComponent : AListView
+ * <br/>Description : AListView is a list view component that can show the key:values of items
+ * <br/>Basic Usage :
+ * <br/>(1)const defs = {
+ *  'Name': {label: ({item}) => item.name},
+ *  'Age': {content: ({item}) => item.age},
+ * }
+ * const item = {name: 'John', age: 20};
+ * return <AListView defs={defs} item={item}/>
+ */
+export declare const AListView: <T extends IObject>({ defs: extDefs, defaultDef: extDefaultDef, item, ...abaseProps }: IAListViewProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/AModule/AComponents/ASelect/ASelect.d.ts

@@ -1,37 +1,134 @@
-/**
- * ASelect
- *
- * Notice 1 : useSelect is considered as T[], so you should pass T[] to useSelect even if isSelectMulti is false.
- */
 import React from 'react';
+import { TUseValues } from '../../AHooks/useValues';
 import { IABaseProps } from '../ABase/ABase';
 import { IAWrapProps } from '../AWrap/AWrap';
-import { TUseValues } from '../../AHooks/useValues';
-export interface IASelect_ValuesRenderer_Props<T> {
-    OptionRenderer: (props: IASelect_OptionRenderer_Props<T>) => React.ReactNode;
-    selected: T[];
+export interface IASelectSelectedRendererProps<TItem, TGivenSelected, TSelected = TGivenSelected extends Array<TItem> ? TItem[] : null | TItem> {
+    /**
+     * OptionRenderer : (props: IASelectOptionRendererProps<T>) => React.ReactNode
+     * <br/>Description : OptionRenderer of ASelect
+     */
+    OptionRenderer: (props: IASelectOptionRendererProps<TItem>) => React.ReactNode;
+    /**
+     * selected : T[]
+     * <br/>Description : selected items of ASelect
+     */
+    selected: TSelected;
+    /**
+     * placeholder : React.ReactNode
+     * <br/>Description : placeholder of ASelect
+     */
     placeholder?: React.ReactNode;
 }
-export interface IASelect_OptionRenderer_Props<T> {
-    option: T;
+export interface IASelectOptionRendererProps<TItem> {
+    /**
+     * option : T
+     * <br/>Description : option of ASelect
+     */
+    option: TItem;
 }
-export interface IASelectProps<T> extends IAWrapProps, IABaseProps {
-    options: T[];
-    useSelect?: TUseValues<T[]>;
+export interface IASelectProps<TItem, TGivenSelected, TSelected = TGivenSelected extends Array<TItem> ? TItem[] : null | TItem> extends IABaseProps, IAWrapProps {
+    /**
+     * options : T[]
+     * <br/>Description : options of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)const options = ['Option1', 'Option2', 'Option3'];
+     * <ASelect options={options}/>
+     */
+    options: TItem[];
+    /**
+     * useSelect? : TUseValues<T[]>
+     * <br/>Description : useSelect of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)const [selected, setSelected] = useState<T[]>([]);
+     * <ASelect options={options} useSelect={[selected, setSelected]}/>
+     */
+    useSelect?: TUseValues<TSelected>;
+    /**
+     * type? : 'Primary' | 'Secondary' = 'Primary'
+     * <br/>Description : type of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect type="Secondary"/>
+     */
     type?: 'Primary' | 'Secondary';
+    /**
+     * placeholder? : React.ReactNode
+     * <br/>Description : placeholder of ASelect. it is shown when no option is selected
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect placeholder="Select"/>
+     */
     placeholder?: React.ReactNode;
+    /**
+     * isSelectMulti? : boolean = false
+     * <br/>Description : isSelectMulti of ASelect. if it is true, multiple options can be selected
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect isSelectMulti/>
+     */
     isSelectMulti?: boolean;
+    /**
+     * onClose? : () => void
+     * <br/>Description : onClose of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect onClose={() => console.log('closed')}/>
+     */
     onClose?: () => void;
-    ValuesRenderer?: (props: IASelect_ValuesRenderer_Props<T>) => React.ReactNode;
-    OptionRenderer?: (props: IASelect_OptionRenderer_Props<T>) => React.ReactNode;
+    /**
+     * SelectedRenderer? : (props: IASelectSelectedRendererProps<T>) => React.ReactNode = DefaultSelectedRenderer
+     * <br/>Description : Renderer of Selected Options of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect SelectedRenderer={({selected, placeholder}) => selected ? selected : placeholder}/>
+     */
+    SelectedRenderer?: (props: IASelectSelectedRendererProps<TItem, TGivenSelected, TSelected>) => React.ReactNode;
+    /**
+     * OptionRenderer? : (props: IASelectOptionRendererProps<T>) => React.ReactNode = DefaultOptionRenderer
+     * <br/>Description : Renderer of Options of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect OptionRenderer={({option}) => <div>{option}</div>}/>
+     */
+    OptionRenderer?: (props: IASelectOptionRendererProps<TItem>) => React.ReactNode;
+    /**
+     * minShowRows? : number = 2
+     * <br/>Description : minShowRows of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect minShowRows={2}/>
+     */
     minShowRows?: number;
+    /**
+     * maxShowRows? : number = 6
+     * <br/>Description : maxShowRows of ASelect. scrollbar will appear when overflow
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect maxShowRows={6}/>
+     */
     maxShowRows?: number;
+    /**
+     * arrowProps? : React.HTMLProps<HTMLDivElement>
+     * <br/>Description : divProps for Arrow of ASelect
+     * <br/>Basic Usage :
+     * <br/>(1)<ASelect arrowProps={{style: {color: 'red'}}}/>
+     */
     arrowProps?: React.HTMLProps<HTMLDivElement>;
 }
 /**
- * ASelect
- * values와 options를 받아서 선택된 options를 보여주는 컴포넌트
- * isSelectMulti가 true라면 여러개의 option을 선택할 수 있다.
+ * AComponent : ASelect
+ * <br/>Description : ASelect is a select component. give options and useSelect to select an option.
+ * <br/>Basic Usage :
+ * <br/>(1)const options = ['Option1', 'Option2', 'Option3'];
+ * const [selected, setSelected] = useState<string | null>(null);
+ * return <ASelect options={options} useSelect={[selected, setSelected]}/>
+ *
+ * <br/>(2)const options = ['Option1', 'Option2', 'Option3'];
+ * const [selected, setSelected] = useState<string[]>([]);
+ * return <ASelect options={options} useSelect={[selected, setSelected]} isSelectMulti/>
+ *
+ * <br/>(3)const options = [{idx : 1, name : 'option1'}, {idx : 2, name : 'option2'}, {idx : 3, name : 'option3'}];
+ * const [selected, setSelected] = useState<{idx : number, name : string}[]>([]);
+ * const OptionRenderer = ({option}) => <div>{option.name}</div>;
+ * return <ASelect options={options} useSelect={[selected, setSelected]} OptionRenderer={OptionRenderer}/>
+ *
+ * <br/>(4)const options = [{idx : 1, name : 'option1'}, {idx : 2, name : 'option2'}, {idx : 3, name : 'option3'}];
+ * const [selected, setSelected] = useState<{idx : number, name : string}[]>([]);
+ * const OptionRenderer = ({option}) => <div>{option.name}</div>;
+ * const SelectedRenderer = ({selected, placeholder}) => selected.length > 0 ? string.join(selected.map(e => e.name), ', ') : placeholder;
+ * return <ASelect options={options} useSelect={[selected, setSelected]} OptionRenderer={OptionRenderer} SelectedRenderer={SelectedRenderer}/>
  */
-export declare const ASelect: <T>({ options, useSelect, type, placeholder, isSelectMulti, onClose, ValuesRenderer, OptionRenderer, minShowRows, maxShowRows, arrowProps, wrapProps, helperText, label, ...abaseProps }: IASelectProps<T>) => React.ReactNode;
-export declare const DefaultOptionRenderer: <T>({ option }: IASelect_OptionRenderer_Props<T>) => React.ReactNode;
+export declare const ASelect: <TItem, TGivenSelected, TSelected = TGivenSelected extends TItem[] ? TItem[] : TItem | null>({ options, useSelect, type, placeholder, isSelectMulti, onClose, SelectedRenderer, OptionRenderer, minShowRows, maxShowRows, arrowProps, wrapProps, helperText, label, ...abaseProps }: IASelectProps<TItem, TGivenSelected, TSelected>) => React.ReactNode;
+export declare const DefaultOptionRenderer: <T>({ option }: IASelectOptionRendererProps<T>) => React.ReactNode;

package/dist/AModule/AComponents/ASpace/ASpace.d.ts

@@ -1,7 +1,29 @@
 import { HTMLAttributes } from 'react';
 interface IASpaceProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * h? : number | string
+     * <br/>Description : height of ASpace
+     * <br/>Basic Usage :
+     * <br/>(1)<ASpace h={10}/>
+     */
     h?: number | string;
+    /**
+     * w? : number | string
+     * <br/>Description : width of ASpace
+     * <br/>Basic Usage :
+     * <br/>(1)<ASpace w={10}/>
+     */
     w?: number | string;
 }
+/**
+ * AComponent : ASpace
+ * <br/>Description : ASpace is a component to make spaces.
+ * <br/>Basic Usage :
+ * <br/>(1)<ASpace h={10}/>
+ *
+ * <br/>(2)<ASpace w={10}/>
+ *
+ * <br/>(3)<ASpace h={10} w={10}/>
+ */
 export declare const ASpace: ({ h, w, ...divProps }: IASpaceProps) => React.ReactNode;
 export {};