@abgov/jsonforms-components 2.34.1 → 2.36.0

package/index.esm.js

@@ -10447,7 +10447,31 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
                   children: jsx(GoAFormItem, {
                     error: (_b = error === null || error === void 0 ? void 0 : error.message) !== null && _b !== void 0 ? _b : '',
                     mb: errorRow && !error && '2xl' || 'xs',
-                    children: dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoAInput, {
+                    children: dataObject.enum ? jsxs(GoADropdown, {
+                      id: schemaName,
+                      name: schemaName,
+                      value: currentData != null ? String(currentData) : '',
+                      testId: `#/properties/${schemaName}-select-${i}`,
+                      onChange: (name, value) => {
+                        const selectedValue = Array.isArray(value) ? value[0] : value;
+                        const coerced = dataObject.type === 'number' && selectedValue !== '' ? Number(selectedValue) : selectedValue;
+                        handleChange(rowPath, {
+                          [num]: {
+                            [schemaName]: coerced
+                          }
+                        });
+                      },
+                      width: "100%",
+                      ariaLabel: schemaName,
+                      error: !!(error === null || error === void 0 ? void 0 : error.message),
+                      children: [!(required === null || required === void 0 ? void 0 : required.includes(schemaName)) && jsx(GoADropdownItem, {
+                        value: "",
+                        label: `-- Select ${convertToSentenceCase(schemaName)} --`
+                      }), dataObject.enum.map(opt => jsx(GoADropdownItem, {
+                        value: String(opt),
+                        label: String(opt)
+                      }, String(opt)))]
+                    }) : dataObject.type === 'number' || dataObject.type === 'string' && !dataObject.enum ? jsx(GoAInput, {
                       error: (error === null || error === void 0 ? void 0 : error.message.length) > 0,
                       type: dataObject.type === 'number' ? 'number' : 'text',
                       id: schemaName,
@@ -10468,7 +10492,7 @@ const NonEmptyCellComponent$1 = /*#__PURE__*/React.memo(function NonEmptyCellCom
                       size: "medium",
                       testId: "form-support-callout",
                       heading: "Not supported",
-                      children: "Only string and number are supported inside arrays"
+                      children: "Only string, number, and enum are supported inside arrays"
                     })
                   })
                 }, ix);
@@ -11715,6 +11739,69 @@ const HelpContentDiv = styled.div(_t$1 || (_t$1 = _$1`
   .single-line {
     margin: var(--goa-space-2xs) 0 var(--goa-space-2xs) 0;
   }
+
+  .help-content-markdown details {
+    margin: 1.5rem 0 !important;
+    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
+  }
+
+  .help-content-markdown details summary {
+    font-size: 1.5em;
+    font-weight: bold;
+    color: red;
+    list-style: none;
+    cursor: pointer;
+    position: relative;
+    padding-left: 0;
+    font-weight: 600;
+    font-size: 1.125rem; /* 18px */
+    color: #111827; /* gray-900 */
+    user-select: none;
+    border-left: 0; /* vertical line */
+  }
+
+  .help-content-markdown details summary::before {
+    content: '';
+    display: inline-block;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.5rem;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/></svg>");
+    background-size: contain;
+    background-repeat: no-repeat;
+    transition: opacity 0.2s ease;
+  }
+
+  .help-content-markdown details[open] summary::before {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/></svg>");
+  }
+
+  .help-content-markdown details[open] {
+    margin-left: 1.75rem !important;
+  }
+  .help-content-markdown details[open] summary {
+    margin-left: -1.75rem !important;
+  }
+
+  .help-content-markdown details[open] {
+    position: relative;
+  }
+
+  .help-content-markdown details[open]::before {
+    margin-left: -1.75rem !important;
+    content: '';
+    position: absolute;
+    left: 0.6rem;
+    top: 2.2rem;
+    bottom: 0.5rem;
+    width: 2px;
+    background-color: #ccc;
+    pointer-events: none;
+  }
+
+  .help-content-markdown summary {
+    text-decoration: underline;
+  }
 `));
 const InvalidMarkdown = styled.div(_t2 || (_t2 = _$1`
   color: var(--goa-color-interactive-error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "2.34.1",
+  "version": "2.36.0",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",