update version to 1.0.1 with minor fixes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kintone-plugin-docx",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "prepare": "node scripts/prepare-private-key.js",
     "start": "node scripts/npm-start.js",
@@ -16,7 +16,7 @@
     "angular-expressions": "^1.4.3",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "docxtemplater": "^3.63.2",
+    "docxtemplater": "^3.65.0",
     "file-saver": "^2.0.5",
     "moize": "^6.1.6",
     "pizzip": "^3.2.0",
@@ -30,17 +30,17 @@
     "@kintone/dts-gen": "^8.1.2",
     "@kintone/plugin-uploader": "^9.1.5",
     "@kintone/webpack-plugin-kintone-plugin": "^8.0.11",
-    "@rspack/cli": "^1.3.13",
+    "@rspack/cli": "^1.3.15",
-    "@rspack/core": "^1.3.13",
+    "@rspack/core": "^1.3.15",
     "@shin-chan/kypes": "^0.0.7",
     "@swc/helpers": "^0.5.17",
     "@types/file-saver": "^2.0.7",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.5",
+    "@types/react-dom": "^19.1.6",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "env-cmd": "^10.1.0",
-    "eslint": "^9.28.0",
+    "eslint": "^9.29.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.2.0",
     "npm-run-all": "^4.1.5",

plugin/manifest.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
   "manifest_version": 1,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "APP",
   "desktop": {
     "js": ["js/desktop.js"]

src/common/ui/KintonePluginAlert.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginAlertProps {
+export type KintonePluginAlertProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginAlert: React.FC<KintonePluginAlertProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginButton.tsx

@@ -2,16 +2,15 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginButtonProps {
+export type KintonePluginButtonProps = React.PropsWithChildren<{
   className?: string;
-  variant: 'normal' | 'disabled' | 'dialog-ok' | 'dialog-cancel';
+  variant: 'normal' | 'disabled' | 'dialog-ok' | 'dialog-cancel' | 'add-row-image' | 'remove-row-image';
   type?: 'button' | 'submit' | 'reset';
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginButton: React.FC<KintonePluginButtonProps> = (props) => {
-  const { className, variant, type, onClick, children } = props;
+  const { className, variant, type = 'button', onClick, children } = props;
   return (
     <button
       className={clsx(`kintoneplugin-button-${variant}`, className)}

src/common/ui/KintonePluginDesc.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginDescProps {
+export type KintonePluginDescProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginDesc: React.FC<KintonePluginDescProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginLabel.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginLabelProps {
+export type KintonePluginLabelProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginLabel: React.FC<KintonePluginLabelProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginRequire.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginRequire {
+export type KintonePluginRequire = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginRequire: React.FC<KintonePluginRequire> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginRow.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginRowProps {
+export type KintonePluginRowProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginRow: React.FC<KintonePluginRowProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginSelect.tsx

@@ -2,32 +2,42 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-export interface KintonePluginSelectOptionData {
+export type KintonePluginSelectOptionData = {
-  key: string;
   value: string;
   label: string;
   disabled?: boolean;
-}
+};
 
-interface KintonePluginSelectProps {
+export type KintonePluginSelectProps = {
   className?: string;
-  defaultValue?: string;
+  value: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onChange: (value: string) => void;
   options: KintonePluginSelectOptionData[];
-}
+};
 
 const KintonePluginSelect: React.FC<KintonePluginSelectProps> = (props) => {
-  const { className, defaultValue, onChange, options } = props;
+  const { className, value, onChange, options } = props;
-  if (!options || options.length === 0) {
+  const optionWithKeys = React.useMemo(
-    return null; // Return null if no options are provided
+    () =>
+      options.map((option) => ({
+        ...option,
+        key: crypto.randomUUID(),
+      })),
+    [options],
+  );
+  if (options.length === 0) {
+    return null;
   }
+  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(e.target.value);
+  };
   return (
     <div className={clsx('kintoneplugin-select-outer', className)}>
       <div className="kintoneplugin-select">
-        <select defaultValue={defaultValue} onChange={onChange}>
+        <select value={value} onChange={handleOnChange}>
-          {options.map((option) => (
+          {optionWithKeys.map(({ key, value: itemValue, label, disabled }) => (
-            <option key={option.key} value={option.value} disabled={option.disabled}>
+            <option key={key} value={itemValue} disabled={disabled}>
-              {option.label}
+              {label}
             </option>
           ))}
         </select>

src/common/ui/KintonePluginTitle.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginTitleProps {
+export type KintonePluginTitleProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginTitle: React.FC<KintonePluginTitleProps> = (props) => {
   const { className, children } = props;

src/config/Settings.tsx

@@ -29,11 +29,10 @@ const Settings: React.FC = () => {
   const properties = React.use(cachedFormFieldsProperties(appId));
   const fileFields = Object.values(properties).filter((property) => property.type === 'FILE');
   const options: KintonePluginSelectOptionData[] = [
-    { key: '-', value: '', label: 'Select a File field', disabled: true }, // Default option
+    { value: '', label: 'Select a File field', disabled: true }, // Default option
     ...fileFields.map((property) => ({
-      key: property.code,
       value: property.code,
-      label: property.label,
+      label: `${property.label} (${property.code})`,
     })),
   ];
 
@@ -49,8 +48,8 @@ const Settings: React.FC = () => {
     });
   };
 
-  const handleOnChangeTemplate = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleOnChangeTemplate = (value: string) => {
-    setTemplate(e.target.value);
+    setTemplate(value);
   };
 
   const handleOnClickCancel = () => {
@@ -71,7 +70,7 @@ const Settings: React.FC = () => {
               No file fields found in the app. Please add a file field to use this plugin.
             </KintonePluginAlert>
           ) : (
-            <KintonePluginSelect defaultValue={template} onChange={handleOnChangeTemplate} options={options} />
+            <KintonePluginSelect value={template} onChange={handleOnChangeTemplate} options={options} />
           )}
         </KintonePluginRow>
         <KintonePluginRow className={styles.buttons}>

src/desktop/MenuPanel.tsx

@@ -229,6 +229,7 @@ const MenuPanel: React.FC<MenuPanelProps> = (props) => {
           paragraphLoop: true,
           linebreaks: true,
           parser: expressionParser,
+          nullGetter: () => '',
         });
         doc.render(record2data(properties, event.record));
         const out = doc.getZip().generate({ type: 'blob', mimeType: DOCX_CONTENT_TYPE });