From 50dd49823e19e267823b020e1b22e14fbf440d50 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@beta.gouv.fr>
Date: Sun, 14 Jul 2024 22:44:18 +0200
Subject: [PATCH 1/7] fix(TemplateArrayField): use uncontrolled tabs

---
 src/components/TemplateArrayField.tsx | 80 +++++++++++++++------------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/src/components/TemplateArrayField.tsx b/src/components/TemplateArrayField.tsx
index 0f87208..98a91b8 100644
--- a/src/components/TemplateArrayField.tsx
+++ b/src/components/TemplateArrayField.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FrIconClassName, RiIconClassName } from '@codegouvfr/react-dsfr'
 import Button from '@codegouvfr/react-dsfr/Button'
 import Tabs from '@codegouvfr/react-dsfr/Tabs'
@@ -30,59 +30,69 @@ export default function ({
   items,
   canAdd,
   onAddClick,
+  registry,
 }: ArrayFieldTemplateProps & { uiSchema?: UiSchemaDSFR }) {
+  const [selectedTabId, setSelectedTabId] = useState('tab0')
   const tabLabel = uiSchema?.['ui:tabLabel'] ?? 'Element'
   const removeIcon = uiSchema?.['ui:removeIcon'] ?? 'fr-icon-delete-line'
   const addIcon = uiSchema?.['ui:addIcon'] ?? 'fr-icon-add-circle-line'
-  console.log('items', items)
+
+  // ensure no exception when last selected tab has been destroyed
+  const selectedIndex = Math.min(
+    items.length - 1,
+    parseInt(selectedTabId.replace(/^tab(\d+)$/, '$1')),
+  )
+
+  const tabContent =
+    (items.length && (
+      <>
+        <Button
+          type="button"
+          iconId={removeIcon}
+          onClick={(e) => {
+            items[selectedIndex].onDropIndexClick(selectedIndex)()
+          }}
+          size="small"
+          priority="secondary"
+        >
+          Supprimer
+        </Button>
+        {items[selectedIndex].children}
+      </>
+    )) ||
+    null
+
+  const onTabChange = (id: string) => {
+    if (id === 'add') {
+      onAddClick()
+      setSelectedTabId(`tab${items.length}`)
+      return
+    }
+    setSelectedTabId(id)
+  }
+
   return (
     <div className="form-group field">
       <div className="fr-input-group">
         <label className="fr-label">{title}</label>
         <div className="fr-input-wrap">
           <Tabs
+            onTabChange={onTabChange}
+            selectedTabId={selectedTabId}
             tabs={items
               .map((element) => ({
                 label: `${tabLabel} ${element.index + 1}`,
-                content: (
-                  <>
-                    <Button
-                      type="button"
-                      iconId={removeIcon}
-                      onClick={(e) => {
-                        console.log('io', element)
-                        element.onDropIndexClick(element.index)
-                      }}
-                      size="small"
-                      priority="secondary"
-                    >
-                      Supprimer
-                    </Button>
-                    {element.children}
-                  </>
-                ),
+                tabId: `tab${element.index}`,
               }))
               .concat([
                 {
                   label: `Ajouter`,
-                  content: (
-                    <>
-                      {canAdd && (
-                        <Button
-                          type="button"
-                          iconId={addIcon}
-                          onClick={onAddClick}
-                          size="small"
-                          priority="secondary"
-                        >
-                          Ajouter
-                        </Button>
-                      )}
-                    </>
-                  ),
+                  tabId: 'add',
                 },
               ])}
-          />
+          >
+            {selectedTabId !== 'add' && tabContent}
+          </Tabs>
         </div>
       </div>
     </div>

From 655825128c078a1092f6cb052904c823519c41c0 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@beta.gouv.fr>
Date: Sun, 14 Jul 2024 22:45:27 +0200
Subject: [PATCH 2/7] feat: add WidgetCheckBoxes

---
 src/components/WidgetCheckBoxes.tsx | 109 ++++++++++++++++++++++++++++
 src/index.tsx                       |   4 +
 2 files changed, 113 insertions(+)
 create mode 100644 src/components/WidgetCheckBoxes.tsx

diff --git a/src/components/WidgetCheckBoxes.tsx b/src/components/WidgetCheckBoxes.tsx
new file mode 100644
index 0000000..fe2ef52
--- /dev/null
+++ b/src/components/WidgetCheckBoxes.tsx
@@ -0,0 +1,109 @@
+import {
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsValueForIndex,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils'
+import Checkbox from '@codegouvfr/react-dsfr/Checkbox'
+import LabelWithHelp from './LabelWithHelp'
+import { ChangeEvent, FocusEvent } from 'react'
+
+//export default function (props: WidgetProps) {
+
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  uiSchema,
+  schema,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, inline, emptyValue } = options
+  const checkboxesValues = Array.isArray(value) ? value : [value]
+
+  const _onChange =
+    (index: number) =>
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
+      if (checked) {
+        onChange(
+          enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions),
+        )
+      } else {
+        onChange(
+          enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions),
+        )
+      }
+    }
+
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(
+      id,
+      enumOptionsValueForIndex<S>(
+        target && target.value,
+        enumOptions,
+        emptyValue,
+      ),
+    )
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(
+      id,
+      enumOptionsValueForIndex<S>(
+        target && target.value,
+        enumOptions,
+        emptyValue,
+      ),
+    )
+
+  return (
+    <div style={{ marginTop: '1rem', marginBottom: '-1rem' }}>
+      <Checkbox
+        options={
+          (Array.isArray(enumOptions) &&
+            enumOptions.map((option, index: number) => {
+              const checked = enumOptionsIsSelected<S>(
+                option.value,
+                checkboxesValues,
+              )
+              const itemDisabled =
+                Array.isArray(enumDisabled) &&
+                enumDisabled.indexOf(option.value) !== -1
+
+              return {
+                label: (
+                  <LabelWithHelp
+                    helpText={
+                      uiSchema !== undefined ? uiSchema['ui:help'] : undefined
+                    }
+                  >
+                    {option.label + (required ? '*' : '')}
+                  </LabelWithHelp>
+                ),
+                nativeInputProps: {
+                  checked,
+                  disabled: itemDisabled,
+                  onChange: _onChange(index),
+                  onBlur: _onBlur,
+                  onFocus: _onFocus,
+                },
+              }
+            })) ||
+          []
+        }
+      />
+    </div>
+  )
+}
diff --git a/src/index.tsx b/src/index.tsx
index 6636011..5c2a4c9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,6 +11,7 @@ import defaultValidator from '@rjsf/validator-ajv8'
 import { Button } from '@codegouvfr/react-dsfr/Button'
 
 import WidgetCheckBox from './components/WidgetCheckBox'
+import WidgetCheckBoxes from './components/WidgetCheckBoxes'
 import WidgetRadio from './components/WidgetRadio'
 import WidgetSelect from './components/WidgetSelect'
 import WidgetTextarea from './components/WidgetTextarea'
@@ -89,13 +90,16 @@ export default function FormDSFR<
   )
 }
 
+// https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-widgets-fields
 export const widgetsDSFR = {
   CheckboxWidget: WidgetCheckBox,
+  CheckboxesWidget: WidgetCheckBoxes,
   RadioWidget: WidgetRadio,
   SelectWidget: WidgetSelect,
   TextareaWidget: WidgetTextarea,
 }
 
+// https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-templates
 export const templatesDSFR = {
   ArrayFieldTemplate: TemplateArrayField,
   BaseInputTemplate: TemplateBaseInput,

From 68f2748ca2a60948c3c92458decc9db8c4626f66 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@beta.gouv.fr>
Date: Sun, 14 Jul 2024 22:45:42 +0200
Subject: [PATCH 3/7] fix: small fixes

---
 src/components/WidgetRadio.tsx  | 46 +++++++++++++++++++++------------
 src/components/WidgetSelect.tsx | 11 +++++---
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/WidgetRadio.tsx b/src/components/WidgetRadio.tsx
index 0e4bc4d..b907890 100644
--- a/src/components/WidgetRadio.tsx
+++ b/src/components/WidgetRadio.tsx
@@ -1,5 +1,6 @@
 import { ChangeEvent, FocusEvent } from 'react'
 import {
+  enumOptionsIsSelected,
   enumOptionsValueForIndex,
   FormContextType,
   RJSFSchema,
@@ -37,28 +38,41 @@ export default function RadioWidget<
   const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
     onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue))
 
+  const radioValues = Array.isArray(value) ? value : [value]
   const inline = Boolean(options && options.inline)
-
+  console.log(value, options)
   return (
     <div style={{ marginTop: '1rem', marginBottom: '-1rem' }}>
       <RadioButtons
         options={
           (options &&
-            options.enumOptions?.map((option) => ({
-              label: (
-                <LabelWithHelp
-                  helpText={
-                    uiSchema !== undefined ? uiSchema['ui:help'] : undefined
-                  }
-                >
-                  {option.label}
-                </LabelWithHelp>
-              ),
-              nativeInputProps: {
-                checked: value === option.value,
-                onChange: (e) => onChange(option.value),
-              },
-            }))) ||
+            options.enumOptions?.map((option) => {
+              const checked = enumOptionsIsSelected<S>(
+                option.value,
+                radioValues,
+              )
+              const itemDisabled =
+                Array.isArray(enumDisabled) &&
+                enumDisabled.indexOf(option.value) !== -1
+
+              return {
+                label: (
+                  <LabelWithHelp
+                    helpText={
+                      uiSchema !== undefined ? uiSchema['ui:help'] : undefined
+                    }
+                  >
+                    {option.label}
+                  </LabelWithHelp>
+                ),
+                nativeInputProps: {
+                  checked,
+                  disabled: itemDisabled,
+                  onChange: (e) => onChange(option.value),
+                  value: option.value,
+                },
+              }
+            })) ||
           []
         }
       />
diff --git a/src/components/WidgetSelect.tsx b/src/components/WidgetSelect.tsx
index 8833675..f6637b9 100644
--- a/src/components/WidgetSelect.tsx
+++ b/src/components/WidgetSelect.tsx
@@ -23,6 +23,7 @@ export default function <
   hideError,
   hideLabel,
   uiSchema,
+  multiple,
   ...props
 }: WidgetProps<T, S, F>) {
   const { enumOptions, emptyValue: optEmptyVal } = props.options
@@ -74,13 +75,17 @@ export default function <
       label={undefined}
       {...props}
     >
-      {!props.multiple &&
+      {(!props.multiple &&
         props.schema.default === undefined &&
         props.options.placeholder && (
-          <option value="" disabled>
+          <option value="" disabled selected>
             {props.options.placeholder}
           </option>
-        )}
+        )) || (
+        <option value="" disabled selected>
+          Séléctionner une option
+        </option>
+      )}
       {props.options.enumOptions?.map((item, index) => (
         <option key={index} value={String(index)}>
           {item.label}

From 1821c281c4f46f8c0ec9b266d5197a39e5cc4914 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@beta.gouv.fr>
Date: Thu, 22 Aug 2024 20:58:00 +0200
Subject: [PATCH 4/7] fixes

---
 demo/src/samples/widgets.tsx    | 35 ++++++++++++++++++---------------
 src/components/WidgetRadio.tsx  |  1 +
 src/components/WidgetSelect.tsx | 14 ++++++-------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/demo/src/samples/widgets.tsx b/demo/src/samples/widgets.tsx
index a93b236..2f1475c 100644
--- a/demo/src/samples/widgets.tsx
+++ b/demo/src/samples/widgets.tsx
@@ -1,4 +1,4 @@
-import { Sample } from './Sample';
+import { Sample } from './Sample'
 
 const widgets: Sample = {
   schema: {
@@ -146,19 +146,19 @@ const widgets: Sample = {
         onChange,
         options,
       }: {
-        value: any;
-        onChange: (value: any) => void;
-        options: { backgroundColor: string };
+        value: any
+        onChange: (value: any) => void
+        options: { backgroundColor: string }
       }) => {
-        const { backgroundColor } = options;
+        const { backgroundColor } = options
         return (
           <input
-            className='form-control'
+            className="custom-classname"
             onChange={(event) => onChange(event.target.value)}
             style={{ backgroundColor }}
             value={value}
           />
-        );
+        )
       },
       'ui:options': {
         backgroundColor: 'yellow',
@@ -170,14 +170,17 @@ const widgets: Sample = {
         onChange,
         options,
       }: {
-        value: any;
-        onChange: (value: any) => void;
-        options: { enumOptions: { label: string; value: any }[]; backgroundColor: string };
+        value: any
+        onChange: (value: any) => void
+        options: {
+          enumOptions: { label: string; value: any }[]
+          backgroundColor: string
+        }
       }) => {
-        const { enumOptions, backgroundColor } = options;
+        const { enumOptions, backgroundColor } = options
         return (
           <select
-            className='form-control'
+            className="form-control"
             style={{ backgroundColor }}
             value={value}
             onChange={(event) => onChange(event.target.value)}
@@ -187,10 +190,10 @@ const widgets: Sample = {
                 <option key={i} value={value}>
                   {label}
                 </option>
-              );
+              )
             })}
           </select>
-        );
+        )
       },
       'ui:options': {
         backgroundColor: 'pink',
@@ -213,6 +216,6 @@ const widgets: Sample = {
     },
     secret: "I'm a hidden string.",
   },
-};
+}
 
-export default widgets;
+export default widgets
diff --git a/src/components/WidgetRadio.tsx b/src/components/WidgetRadio.tsx
index b907890..6cf3b2d 100644
--- a/src/components/WidgetRadio.tsx
+++ b/src/components/WidgetRadio.tsx
@@ -44,6 +44,7 @@ export default function RadioWidget<
   return (
     <div style={{ marginTop: '1rem', marginBottom: '-1rem' }}>
       <RadioButtons
+        orientation={inline ? 'horizontal' : 'vertical'}
         options={
           (options &&
             options.enumOptions?.map((option) => {
diff --git a/src/components/WidgetSelect.tsx b/src/components/WidgetSelect.tsx
index f6637b9..d409522 100644
--- a/src/components/WidgetSelect.tsx
+++ b/src/components/WidgetSelect.tsx
@@ -59,7 +59,7 @@ export default function <
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema)
   const backgroundColor = (uiOptions.backgroundColor as string) || 'auto'
-
+  const placeholder = uiOptions.placeholder || props.options.placeholder
   return (
     <Select
       nativeSelectProps={{
@@ -75,13 +75,11 @@ export default function <
       label={undefined}
       {...props}
     >
-      {(!props.multiple &&
-        props.schema.default === undefined &&
-        props.options.placeholder && (
-          <option value="" disabled selected>
-            {props.options.placeholder}
-          </option>
-        )) || (
+      {(!props.multiple && placeholder && (
+        <option value="" disabled selected>
+          {placeholder}
+        </option>
+      )) || (
         <option value="" disabled selected>
           Séléctionner une option
         </option>

From 36337cf927ba0d52c152994545078ee922cc271f Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@beta.gouv.fr>
Date: Fri, 20 Sep 2024 11:21:52 +0200
Subject: [PATCH 5/7] Update src/components/WidgetCheckBoxes.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Emile Rolley ⏚ <44124798+EmileRolley@users.noreply.github.com>
Signed-off-by: Julien Bouquillon <julien@bouquillon.com>
---
 src/components/WidgetCheckBoxes.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/WidgetCheckBoxes.tsx b/src/components/WidgetCheckBoxes.tsx
index fe2ef52..9f9b919 100644
--- a/src/components/WidgetCheckBoxes.tsx
+++ b/src/components/WidgetCheckBoxes.tsx
@@ -12,7 +12,6 @@ import Checkbox from '@codegouvfr/react-dsfr/Checkbox'
 import LabelWithHelp from './LabelWithHelp'
 import { ChangeEvent, FocusEvent } from 'react'
 
-//export default function (props: WidgetProps) {
 
 export default function CheckboxesWidget<
   T = any,

From f68ad26be76cc4cca557f320c3a17c785c08c4ee Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@beta.gouv.fr>
Date: Fri, 20 Sep 2024 11:22:09 +0200
Subject: [PATCH 6/7] Update src/components/WidgetRadio.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Emile Rolley ⏚ <44124798+EmileRolley@users.noreply.github.com>
Signed-off-by: Julien Bouquillon <julien@bouquillon.com>
---
 src/components/WidgetRadio.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/WidgetRadio.tsx b/src/components/WidgetRadio.tsx
index 6cf3b2d..2c4580f 100644
--- a/src/components/WidgetRadio.tsx
+++ b/src/components/WidgetRadio.tsx
@@ -40,7 +40,6 @@ export default function RadioWidget<
 
   const radioValues = Array.isArray(value) ? value : [value]
   const inline = Boolean(options && options.inline)
-  console.log(value, options)
   return (
     <div style={{ marginTop: '1rem', marginBottom: '-1rem' }}>
       <RadioButtons

From 24fa9c15a15303b4f1f54f6dbf8649fe82a317e8 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien.bouquillon@beta.gouv.fr>
Date: Fri, 20 Sep 2024 11:22:27 +0200
Subject: [PATCH 7/7] Update src/components/WidgetSelect.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Emile Rolley ⏚ <44124798+EmileRolley@users.noreply.github.com>
Signed-off-by: Julien Bouquillon <julien@bouquillon.com>
---
 src/components/WidgetSelect.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/WidgetSelect.tsx b/src/components/WidgetSelect.tsx
index d409522..51b67a1 100644
--- a/src/components/WidgetSelect.tsx
+++ b/src/components/WidgetSelect.tsx
@@ -75,11 +75,13 @@ export default function <
       label={undefined}
       {...props}
     >
-      {(!props.multiple && placeholder && (
+      {!props.multiple && placeholder 
+      ? (
         <option value="" disabled selected>
           {placeholder}
         </option>
-      )) || (
+      )
+      : (
         <option value="" disabled selected>
           Séléctionner une option
         </option>