Batch Issues Fix

package.json

@@ -62,5 +62,6 @@
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "typescript": "^5.3.3"
-  }
+  },
+  "packageManager": "npm@9.6.6+sha1.553376bb7b5de4b1cf2b5f3471f674b678c7e14d"
 }

packages/mantine-corporate/README.md

@@ -15,7 +15,12 @@ npm run start
 
 ## Installation
 
-replace module name from @aokiapp/rjsf-mantine-theme
+replace module name from `@aokiapp/rjsf-mantine-theme` to `@aokiapp/mantine-theme-corporate`
+
+If you use `FileWidget` you need to install `@mantine/dropzone` as well, and make sure to `import '@mantine/dropzone/styles.css';` in your project.
+
+
+```bash
 
 ## License
 

packages/mantine-corporate/src/templates/ArrayFieldItemTemplate.tsx

@@ -12,10 +12,17 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
->(props: ArrayFieldTemplateItemType<T, S, F>) {
-  const { children, className, disabled, hasToolbar, index, readonly } = props;
-  const isDraggable = !disabled && !readonly && hasToolbar;
+>(
+  props: ArrayFieldTemplateItemType<T, S, F> & {
+    orderable?: boolean;
+    removable?: boolean;
+  },
+) {
+  const { children, className, disabled, index, readonly, orderable, removable, registry, uiSchema, onDropIndexClick } =
+    props;
+  const isDraggable = !disabled && !readonly && orderable;
   const key = useId();
+  const { RemoveButton } = registry.templates.ButtonTemplates;
   return (
     <Draggable index={index} draggableId={key} key={key} isDragDisabled={!isDraggable}>
       {(provided) => (
@@ -25,11 +32,19 @@ export default function ArrayFieldItemTemplate<
           className={`armt-template-arrayfielditem ${className}`}
         >
           <Group style={{ flexGrow: 1 }} gap={0}>
-            {isDraggable && (
+            {isDraggable ? (
               <div {...provided.dragHandleProps} className={classes.dragHandle}>
                 <IconGripVertical style={{ width: rem(18), height: rem(18) }} stroke={1.5} />
               </div>
-            )}
+            ) : removable ? (
+              <RemoveButton
+                className='armt-template-afit-remove'
+                disabled={disabled || readonly}
+                onClick={onDropIndexClick(index)}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            ) : null}
             <Box style={{ flexGrow: 1 }}>{children}</Box>
           </Group>
         </Box>

packages/mantine-corporate/src/templates/ArrayFieldTemplate.tsx

@@ -13,6 +13,7 @@ import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { useState } from 'react';
 import classes from './ArrayFieldTemplate.module.css';
 import { IconCopy, IconTrash } from '@tabler/icons-react';
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate'; // do not use getTemplate here
 
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
@@ -43,11 +44,6 @@ export default function ArrayFieldTemplate<
     registry,
     uiOptions,
   );
-  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
-    'ArrayFieldItemTemplate',
-    registry,
-    uiOptions,
-  );
   const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
     'ArrayFieldTitleTemplate',
     registry,
@@ -82,6 +78,10 @@ export default function ArrayFieldTemplate<
     </Group>
   );
 
+  const orderable = (uiOptions.orderable ?? false) && !readonly && !disabled;
+  const removable = (uiOptions.removable ?? true) && !readonly && !disabled;
+  const copyable = (uiOptions.copyable ?? false) && !readonly && !disabled;
+
   const [isDragging, setIsDragging] = useState(false);
 
   let arrItems;
@@ -107,18 +107,20 @@ export default function ArrayFieldTemplate<
             {(provided) => (
               <div {...provided.droppableProps} ref={provided.innerRef}>
                 {items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => {
-                  return <ArrayFieldItemTemplate key={key} {...itemProps} />;
+                  return (
+                    <ArrayFieldItemTemplate key={key} {...itemProps} orderable={orderable} removable={!!removable} />
+                  );
                 })}
                 {provided.placeholder}
               </div>
             )}
           </Droppable>
           {items[0].hasToolbar && isDragging && (
             <Group m='sm'>
-              {items[0].hasCopy && (
+              {copyable && (
                 <DropToAction icon={<IconCopy />} label='コピー' className={classes.dropToCopy} droppableId='copy' />
               )}
-              {items[0].hasRemove && (
+              {removable && (
                 <DropToAction icon={<IconTrash />} label='削除' className={classes.dropToRemove} droppableId='remove' />
               )}
             </Group>

packages/mantine-corporate/src/templates/ObjectFieldTemplate.module.css

@@ -10,9 +10,6 @@
     transform: rotate(180deg);
   }
 }
-.labels {
-  flex-wrap: nowrap;
-}
 .root {
   border-radius: 8px;
   padding: 8px;

packages/mantine-corporate/src/templates/ObjectFieldTemplate.tsx

@@ -60,54 +60,80 @@ export default function ObjectFieldTemplate<
   const classNames = options.classNames;
   const containError = errorSchema && Object.keys(errorSchema).length > 0;
 
-  const legendNode = showLegend ? (
-    <Group onClick={toggle} className={classes.legend} justify='space-between' wrap='nowrap'>
-      <Group className={classes.labels} gap='xs'>
-        {title && (
-          <TitleFieldTemplate
-            id={titleId<T>(idSchema)}
-            title={title}
-            required={required}
-            schema={schema}
-            uiSchema={uiSchema}
-            registry={registry}
-          />
-        )}
-        {description && (
-          <DescriptionFieldTemplate
-            id={descriptionId<T>(idSchema)}
-            description={description}
-            schema={schema}
-            uiSchema={uiSchema}
-            registry={registry}
-          />
-        )}
-      </Group>
-      <IconChevronUp />
+  const legendInner = (
+    <Group gap='xs'>
+      {title && (
+        <TitleFieldTemplate
+          id={titleId<T>(idSchema)}
+          title={title}
+          required={required}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(idSchema)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
     </Group>
-  ) : null;
-  return (
-    <Stack
-      id={idSchema.$id}
-      role='group'
-      gap={'xs'}
-      className={`armt-template-objectfield ${classNames ?? ''} ${classes.root} ${containError && classes.error}`}
-    >
-      {legendNode}
-      <Collapse in={opened} className={classes.collapse}>
-        <Box className='armt-template-objectfield-item'>
-          {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
-        </Box>
-        {canExpand<T, S, F>(schema, uiSchema, formData) && (
-          <AddButton
-            className='object-property-expand'
-            onClick={onAddClick(schema)}
-            disabled={disabled || readonly}
-            uiSchema={uiSchema}
-            registry={registry}
-          />
-        )}
-      </Collapse>
-    </Stack>
   );
+
+  const contentInner = (
+    <>
+      <Box className='armt-template-objectfield-item'>
+        {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
+      </Box>
+      {canExpand<T, S, F>(schema, uiSchema, formData) && (
+        <AddButton
+          className='object-property-expand'
+          onClick={onAddClick(schema)}
+          disabled={disabled || readonly}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+    </>
+  );
+
+  // default setting is uncollapsable
+  if (options.collapsable) {
+    const legendNode = showLegend ? (
+      <Group onClick={toggle} justify='space-between' wrap='nowrap'>
+        {legendInner}
+        <IconChevronUp size='1rem' />
+      </Group>
+    ) : null;
+    return (
+      <Stack
+        id={idSchema.$id}
+        role='group'
+        gap={'xs'}
+        className={`armt-template-objectfield ${classNames ?? ''} ${classes.root} ${containError && classes.error}`}
+      >
+        {legendNode}
+        <Collapse in={opened} className={classes.collapse}>
+          {contentInner}
+        </Collapse>
+      </Stack>
+    );
+  } else {
+    const legendNode = showLegend ? legendInner : null;
+    return (
+      <Stack
+        id={idSchema.$id}
+        role='group'
+        gap={'xs'}
+        className={`armt-template-objectfield ${classNames ?? ''} ${classes.root} ${containError && classes.error}`}
+      >
+        {legendNode}
+        {contentInner}
+      </Stack>
+    );
+  }
 }

packages/mantine-corporate/src/widgets/FileWidget.tsx

@@ -10,7 +10,6 @@ import {
 } from '@rjsf/utils';
 import { Badge, Card, Group, Text, Image, Box, AspectRatio, CloseButton, Stack } from '@mantine/core';
 import { Dropzone, FileWithPath } from '@mantine/dropzone';
-import '@mantine/dropzone/styles.css';
 import {
   IconCode,
   IconFile,

packages/mantine/README.md

@@ -20,20 +20,23 @@ You can install the package:
 npm:
 
 ```bash
-npm install @mantine/core@7.4.0 @mantine/dates@7.4.0 @mantine/hooks@7.4.0 @rjsf/core @tabler/icons-react dayjs react
+npm install @mantine/core@7 @mantine/dates@7 @mantine/hooks@7 @rjsf/core @tabler/icons-react dayjs react @aokiapp/rjsf-mantine-theme
 ```
 
 yarn:
 
 ```bash
-yarn add @mantine/core@7.4.0 @mantine/dates@7.4.0 @mantine/hooks@7.4.0 @rjsf/core @tabler/icons-react dayjs react
+yarn add @mantine/core@7 @mantine/dates@7 @mantine/hooks@7 @rjsf/core @tabler/icons-react dayjs react @aokiapp/rjsf-mantine-theme
 ```
 
 ## Usage
 
 ```js
 import { MantineProvider } from '@mantine/core';
 import Form from '@aokiapp/rjsf-mantine-theme';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css'; // add only if you use MantineDateWidget
+import '@mantine/dropzone/styles.css'; // add only if you use mantine-corparate and FileWidget
 
 render(
   <MantineProvider>
@@ -48,6 +51,9 @@ or with a custom theme:
 ```js
 import { withTheme } from '@rjsf/core';
 import { Theme as MantineTheme } from '@aokiapp/rjsf-mantine-theme';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css'; // if you use MantineDateWidget
+import '@mantine/dropzone/styles.css'; // if you use mantine-corparate and FileWidget
 
 // Make modifications to the theme with your own fields and widgets
 

packages/mantine/src/fields/NullField.tsx

@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, getUiOptions, getWidget } from '@rjsf/utils';
+
+/** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
+ * also set to null if it has no value.
+ *
+ * Differences from the original:
+ * - Traverse the widget and use it
+ * - By default, use `NullWidget`, which is not present in the original
+ * - Hence, null fields can be replaced with custom ones
+ *
+ * @param props - The `FieldProps` for this template
+ */
+function NullField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldProps<T, S, F>,
+) {
+  const {
+    schema,
+    name,
+    uiSchema,
+    idSchema,
+    formData,
+    required,
+    disabled = false,
+    readonly = false,
+    autofocus = false,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    rawErrors,
+    hideError,
+  } = props;
+
+  const { title } = schema;
+  const { widgets, formContext, schemaUtils, globalUiOptions } = registry;
+  const { widget = 'NullWidget', placeholder = '', title: uiTitle, ...options } = getUiOptions<T, S, F>(uiSchema);
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+  const label = uiTitle ?? title ?? name;
+  const Widget = getWidget<T, S, F>(schema, widget, widgets);
+
+  useEffect(() => {
+    if (formData === undefined) {
+      onChange(null as unknown as T);
+    }
+  }, [formData, onChange]);
+
+  return (
+    <Widget
+      options={options}
+      schema={schema}
+      uiSchema={uiSchema}
+      id={idSchema.$id}
+      name={name}
+      label={label}
+      hideLabel={!displayLabel}
+      hideError={hideError}
+      value={formData}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      required={required}
+      disabled={disabled}
+      readonly={readonly}
+      formContext={formContext}
+      autofocus={autofocus}
+      registry={registry}
+      placeholder={placeholder}
+      rawErrors={rawErrors}
+    />
+  );
+}
+
+export default NullField;

packages/mantine/src/fields/index.ts

@@ -0,0 +1,15 @@
+import { FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import NullField from './NullField';
+
+export function generateFields<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(): RegistryFieldsType<T, S, F> {
+  return {
+    NullField,
+  };
+}
+
+export default generateFields();