@bsol-oss/react-datatable5 11.0.0-beta.8 → 12.0.0-beta.0

package/dist/index.d.ts

@@ -467,6 +467,7 @@ interface FormProps<TData extends FieldValues> {
     translate: UseTranslationResponse<any, any>;
     order?: string[];
     ignore?: string[];
+    include?: string[];
     onSubmit?: SubmitHandler<TData>;
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
@@ -485,7 +486,7 @@ declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, rowNumber, requestOptions, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, include, onSubmit, rowNumber, requestOptions, }: FormProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface UseFormProps {
     preLoadedValues?: FieldValues | undefined;

package/dist/index.js

@@ -3548,26 +3548,14 @@ const SchemaFormContext = React.createContext({
     requestUrl: "",
     order: [],
     ignore: [],
+    include: [],
     onSubmit: async () => { },
     rowNumber: 0,
     requestOptions: {},
 });
 
 const useSchemaContext = () => {
-    const { schema, serverUrl, requestUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, requestOptions, } = React.useContext(SchemaFormContext);
-    return {
-        schema,
-        serverUrl,
-        requestUrl,
-        order,
-        ignore,
-        onSubmit,
-        rowNumber,
-        idMap,
-        setIdMap,
-        translate,
-        requestOptions,
-    };
+    return React.useContext(SchemaFormContext);
 };
 
 const clearEmptyString = (object) => {
@@ -4350,12 +4338,15 @@ react.NumberInput.Scrubber;
 react.NumberInput.Label;
 
 const NumberInputField = ({ schema, column, prefix, }) => {
-    const { register, formState: { errors }, watch } = reactHookForm.useFormContext();
+    const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
     const { required, gridColumn, gridRow } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(NumberInputRoot, { children: jsxRuntime.jsx(NumberInputField$1, { ...register(`${colLabel}`, { required: isRequired }) }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    const value = watch(`${colLabel}`);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsxRuntime.jsx(NumberInputRoot, { children: jsxRuntime.jsx(NumberInputField$1, { required: isRequired, value: value, onChange: (event) => {
+                        setValue(`${colLabel}`, Number(event.target.value));
+                    } }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
 };
 
 const ObjectInput = ({ schema, column, prefix }) => {
@@ -4950,7 +4941,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
     }
 };
 const FormInternal = () => {
-    const { schema, requestUrl, order, onSubmit, rowNumber, translate, requestOptions, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, } = useSchemaContext();
     const methods = reactHookForm.useFormContext();
     const [isSuccess, setIsSuccess] = React.useState(false);
     const [isError, setIsError] = React.useState(false);
@@ -5009,11 +5000,19 @@ const FormInternal = () => {
         setIsError(false);
         setIsConfirming(true);
     };
-    const renderOrder = (order, origin_list) => {
-        const not_exist = origin_list.filter((columnA) => !order.some((columnB) => columnA === columnB));
-        return [...order, ...not_exist];
+    const renderColumns = ({ order, keys, ignore, include, }) => {
+        const included = include.length > 0 ? include : keys;
+        const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
+        const ordered = [...order, ...not_exist];
+        const ignored = ordered.filter((column) => !ignore.some((shouldIgnore) => column === shouldIgnore));
+        return ignored;
     };
-    const ordered = renderOrder(order, Object.keys(properties));
+    const ordered = renderColumns({
+        order,
+        keys: Object.keys(properties),
+        ignore,
+        include,
+    });
     if (isSuccess) {
         return (jsxRuntime.jsxs(react.Grid, { gap: 2, children: [jsxRuntime.jsx(react.Heading, { children: translate.t("title") }), jsxRuntime.jsxs(react.Alert.Root, { status: "success", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsx(react.Alert.Title, { children: translate.t("submitSuccess") })] }), jsxRuntime.jsx(react.Flex, { justifyContent: "end", children: jsxRuntime.jsx(Button, { onClick: () => {
                             setIsError(false);
@@ -5049,15 +5048,16 @@ const FormInternal = () => {
                                 methods.handleSubmit(onValid)();
                             }, formNoValidate: true, children: translate.t("submit") })] })] }) }));
 };
-const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
-    const { properties } = schema;
-    idListSanityCheck("order", order, properties);
-    idListSanityCheck("ignore", ignore, properties);
+const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
+    // const { properties } = schema;
+    // idListSanityCheck("order", order, properties as object);
+    // idListSanityCheck("ignore", ignore, properties as object);
     return (jsxRuntime.jsx(SchemaFormContext.Provider, { value: {
             schema,
             serverUrl,
             order,
             ignore,
+            include,
             // @ts-expect-error TODO: find appropriate types
             onSubmit,
             rowNumber,

package/dist/index.mjs

@@ -3528,26 +3528,14 @@ const SchemaFormContext = createContext({
     requestUrl: "",
     order: [],
     ignore: [],
+    include: [],
     onSubmit: async () => { },
     rowNumber: 0,
     requestOptions: {},
 });
 
 const useSchemaContext = () => {
-    const { schema, serverUrl, requestUrl, order, ignore, onSubmit, rowNumber, idMap, setIdMap, translate, requestOptions, } = useContext(SchemaFormContext);
-    return {
-        schema,
-        serverUrl,
-        requestUrl,
-        order,
-        ignore,
-        onSubmit,
-        rowNumber,
-        idMap,
-        setIdMap,
-        translate,
-        requestOptions,
-    };
+    return useContext(SchemaFormContext);
 };
 
 const clearEmptyString = (object) => {
@@ -4330,12 +4318,15 @@ NumberInput.Scrubber;
 NumberInput.Label;
 
 const NumberInputField = ({ schema, column, prefix, }) => {
-    const { register, formState: { errors }, watch } = useFormContext();
+    const { setValue, formState: { errors }, watch, } = useFormContext();
     const { translate } = useSchemaContext();
     const { required, gridColumn, gridRow } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
-    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(NumberInputRoot, { children: jsx(NumberInputField$1, { ...register(`${colLabel}`, { required: isRequired }) }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
+    const value = watch(`${colLabel}`);
+    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.fieldLabel`))}`, required: isRequired, gridColumn, gridRow, children: [jsx(NumberInputRoot, { children: jsx(NumberInputField$1, { required: isRequired, value: value, onChange: (event) => {
+                        setValue(`${colLabel}`, Number(event.target.value));
+                    } }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.fieldRequired`)) }))] }));
 };
 
 const ObjectInput = ({ schema, column, prefix }) => {
@@ -4930,7 +4921,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
     }
 };
 const FormInternal = () => {
-    const { schema, requestUrl, order, onSubmit, rowNumber, translate, requestOptions, } = useSchemaContext();
+    const { schema, requestUrl, order, ignore, include, onSubmit, rowNumber, translate, requestOptions, } = useSchemaContext();
     const methods = useFormContext();
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
@@ -4989,11 +4980,19 @@ const FormInternal = () => {
         setIsError(false);
         setIsConfirming(true);
     };
-    const renderOrder = (order, origin_list) => {
-        const not_exist = origin_list.filter((columnA) => !order.some((columnB) => columnA === columnB));
-        return [...order, ...not_exist];
+    const renderColumns = ({ order, keys, ignore, include, }) => {
+        const included = include.length > 0 ? include : keys;
+        const not_exist = included.filter((columnA) => !order.some((columnB) => columnA === columnB));
+        const ordered = [...order, ...not_exist];
+        const ignored = ordered.filter((column) => !ignore.some((shouldIgnore) => column === shouldIgnore));
+        return ignored;
     };
-    const ordered = renderOrder(order, Object.keys(properties));
+    const ordered = renderColumns({
+        order,
+        keys: Object.keys(properties),
+        ignore,
+        include,
+    });
     if (isSuccess) {
         return (jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: translate.t("title") }), jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: translate.t("submitSuccess") })] }), jsx(Flex, { justifyContent: "end", children: jsx(Button, { onClick: () => {
                             setIsError(false);
@@ -5029,15 +5028,16 @@ const FormInternal = () => {
                                 methods.handleSubmit(onValid)();
                             }, formNoValidate: true, children: translate.t("submit") })] })] }) }));
 };
-const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
-    const { properties } = schema;
-    idListSanityCheck("order", order, properties);
-    idListSanityCheck("ignore", ignore, properties);
+const Form = ({ schema, idMap, setIdMap, form, serverUrl, translate, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, }) => {
+    // const { properties } = schema;
+    // idListSanityCheck("order", order, properties as object);
+    // idListSanityCheck("ignore", ignore, properties as object);
     return (jsx(SchemaFormContext.Provider, { value: {
             schema,
             serverUrl,
             order,
             ignore,
+            include,
             // @ts-expect-error TODO: find appropriate types
             onSubmit,
             rowNumber,

package/dist/types/components/Form/Form.d.ts

@@ -14,6 +14,7 @@ export interface FormProps<TData extends FieldValues> {
     translate: UseTranslationResponse<any, any>;
     order?: string[];
     ignore?: string[];
+    include?: string[];
     onSubmit?: SubmitHandler<TData>;
     rowNumber?: number | string;
     requestOptions?: AxiosRequestConfig;
@@ -32,4 +33,4 @@ export declare const idPickerSanityCheck: (column: string, foreign_key?: {
     column?: string | undefined;
     display_column?: string | undefined;
 } | undefined) => void;
-export declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, onSubmit, rowNumber, requestOptions, }: FormProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <TData extends FieldValues>({ schema, idMap, setIdMap, form, serverUrl, translate, order, ignore, include, onSubmit, rowNumber, requestOptions, }: FormProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/SchemaFormContext.d.ts

@@ -9,6 +9,7 @@ export interface SchemaFormContext<TData extends FieldValues> {
     requestUrl: string;
     order: string[];
     ignore: string[];
+    include: string[];
     onSubmit?: (data: TData) => Promise<void>;
     rowNumber?: number | string;
     idMap: Record<string, object>;

package/dist/types/components/Form/useSchemaContext.d.ts

@@ -1,14 +1,2 @@
-/// <reference types="react" />
-export declare const useSchemaContext: () => {
-    schema: import("json-schema").JSONSchema7;
-    serverUrl: string;
-    requestUrl: string;
-    order: string[];
-    ignore: string[];
-    onSubmit: ((data: unknown) => Promise<void>) | undefined;
-    rowNumber: string | number | undefined;
-    idMap: Record<string, object>;
-    setIdMap: import("react").Dispatch<import("react").SetStateAction<Record<string, object>>>;
-    translate: import("react-i18next").UseTranslationResponse<any, any>;
-    requestOptions: import("axios").AxiosRequestConfig<any>;
-};
+import { SchemaFormContext } from "./SchemaFormContext";
+export declare const useSchemaContext: () => SchemaFormContext<unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "11.0.0-beta.8",
+  "version": "12.0.0-beta.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -49,12 +49,11 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.1",
     "react-icons": "^5.4.0",
-    "tiny-invariant": "^1.3.3",
-    "react-i18next": "^15.4.1"
+    "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.3",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-essentials": "^8.4.7",