update version to 1.0.1 with minor fixes.

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 {
-  key: string;
+export type KintonePluginSelectOptionData = {
   value: string;
   label: string;
   disabled?: boolean;
-}
+};
 
-interface KintonePluginSelectProps {
+export type KintonePluginSelectProps = {
   className?: string;
-  defaultValue?: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  value: string;
+  onChange: (value: string) => void;
   options: KintonePluginSelectOptionData[];
-}
+};
 
 const KintonePluginSelect: React.FC<KintonePluginSelectProps> = (props) => {
-  const { className, defaultValue, onChange, options } = props;
-  if (!options || options.length === 0) {
-    return null; // Return null if no options are provided
+  const { className, value, onChange, options } = props;
+  const optionWithKeys = React.useMemo(
+    () =>
+      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}>
-          {options.map((option) => (
-            <option key={option.key} value={option.value} disabled={option.disabled}>
-              {option.label}
+        <select value={value} onChange={handleOnChange}>
+          {optionWithKeys.map(({ key, value: itemValue, label, disabled }) => (
+            <option key={key} value={itemValue} disabled={disabled}>
+              {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;