@edu-tosel/design 1.0.30 → 1.0.31

package/board/template/CanvasBoard.d.ts

@@ -1,2 +1,2 @@
 import { CanvasBoardProps } from "../../interface/Board";
-export default function CanvasBoard({ header, children, options, widgets, buttons, }: CanvasBoardProps): import("react/jsx-runtime").JSX.Element;
+export default function CanvasBoard<B>({ header, children, options, widgets, buttons, }: CanvasBoardProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/template/ManageBoard.d.ts

@@ -1,4 +1,4 @@
 import { ManageBoardProps } from "../../interface/Board";
-export default function ManageBoard<K extends string, T extends {
+export default function ManageBoard<B, K extends string, T extends {
     [p in K]: any;
-}>({ header, dataSets, dataField, widgets, options, buttons, }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ header, dataSets, dataField, widgets, options, buttons, }: ManageBoardProps<B, K, T>): import("react/jsx-runtime").JSX.Element;

package/board/template/PaperBoard.d.ts

@@ -1,2 +1,2 @@
 import { PaperBoardProps } from "../../interface/Board";
-export default function PaperBoard({ children, debug, options, }: PaperBoardProps): import("react/jsx-runtime").JSX.Element;
+export default function PaperBoard<B>({ children, debug, options, }: PaperBoardProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/widget/Board.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardProps } from "../../interface/Board";
-export declare function Board({ children, widgets, options, debug, buttons, }: BoardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Board<B>({ children, widgets, options, debug, buttons, }: BoardProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/widget/Header.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "./../../interface/Board";
-export default function BoardHeader({ titles, tag, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader<B>({ titles, tag, options, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/widget/Header.js

@@ -10,7 +10,7 @@ export default function BoardHeader({ titles, tag, options, }) {
         textColor: "black",
     };
     const container = {
-        positions: "fixed top-15 xl:top-0 left-0 z-20 xl:relative flex items-center",
+        positions: "fixed top-15 xl:top-0 left-0 z-30 xl:relative flex items-center",
         paddings: "px-7.5",
         styles: `${bgColor} ${textColor}`,
         sizes: "w-full h-19",

package/hook/index.d.ts

@@ -1,2 +1,3 @@
 export { default as useEase } from "./useEase";
 export { default as useEvents } from "./useEvents";
+export { default as useFlag } from "./useFlag";

package/hook/index.js

@@ -1,2 +1,3 @@
 export { default as useEase } from "./useEase";
 export { default as useEvents } from "./useEvents";
+export { default as useFlag } from "./useFlag";

package/hook/useFlag.d.ts

@@ -0,0 +1,2 @@
+import { State } from "../interface";
+export default function useFlag<T>(state: State<T>): void;

package/hook/useFlag.js

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useWidgetStore } from "../store";
+export default function useFlag(state) {
+    const [value, action] = state;
+    const { flag, isOwn, setIsOwn } = useWidgetStore();
+    useEffect(() => {
+        if (isOwn) {
+            return setIsOwn(false);
+        }
+        return action(value);
+    }, [flag]);
+}

package/html/widget/Select.design.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useState } from "react";
-import { cn } from "../../util";
+import { cn, useFlag } from "../../util";
 import { useTransition, animated } from "react-spring";
+import { useWidgetStore } from "../../store";
 const widthSize = {
     xs: "w-10",
     sm: "w-22.5",
@@ -13,12 +14,14 @@ const heightSize = {
 };
 export default function SelectDesign({ state, selectOptions, placeholder, options, }) {
     const id = useId();
+    const { setIsOwn } = useWidgetStore();
     const [value, setValue] = state;
     const [text, setText] = useState("");
     const [search, setSearch] = useState("");
     const [isOpen, setIsOpen] = useState(false);
     const [filteredOptions, setFilterdOptions] = useState([]);
     const [index, setIndex] = useState();
+    useFlag([false, setIsOpen]);
     const onKeyDown = (e) => {
         if (!filteredOptions)
             return;
@@ -97,7 +100,7 @@ export default function SelectDesign({ state, selectOptions, placeholder, option
             config: { duration: 0 },
         },
     });
-    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
+    return (_jsxs("div", { className: cn(container), onKeyDown: onKeyDown, onClick: () => setIsOwn(true), children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: cn(button), children: value ? (_jsx("div", { className: cn(label), children: selectOptions?.find((option) => value === option[0])?.[1] })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
                 item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), children: filteredOptions?.map(([value, text], order) => (_jsx("section", { children: _jsx("button", { onClick: () => {
                                 setValue(value);

package/interface/Board.d.ts

@@ -9,20 +9,20 @@ interface OptionsProps {
     isRounded?: boolean;
     noPadding?: boolean;
 }
-export interface BoardProps {
-    header?: BoardHeaderProps;
+export interface BoardProps<B> {
+    header?: BoardHeaderProps<B>;
     children?: React.ReactNode;
     widgets?: EventsProps;
     options?: OptionsProps;
     debug?: string;
     buttons?: HTMLLabelElement[];
 }
-export interface BoardHeaderProps {
+export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
     };
     tag?: {
-        selects?: HTMLSelectElement<unknown>[];
+        selects?: HTMLSelectElement<B>[];
         inputs?: HTMLInputElement[];
     };
     options?: {
@@ -32,9 +32,11 @@ export interface BoardHeaderProps {
         };
     };
 }
-export interface CanvasBoardProps extends BoardProps {
+export interface CanvasBoardProps<B> extends BoardProps<B> {
 }
-export interface ManageBoardProps<T> extends BoardProps {
+export interface ManageBoardProps<B, K extends string, T extends {
+    [p in K]: any;
+}> extends BoardProps<B> {
     dataSets: {
         items: T[] | undefined;
         renderItem: (item: T) => React.ReactNode;
@@ -45,6 +47,6 @@ export interface ManageBoardProps<T> extends BoardProps {
         [p in keyof T]?: Partial<DataField>;
     };
 }
-export interface PaperBoardProps extends BoardProps {
+export interface PaperBoardProps<B> extends BoardProps<B> {
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.30
+1.0.31