@adobe-commerce/aio-experience-kit 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -5,6 +5,96 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.2] - 2024-11-15
+
+### ✨ Added
+
+- **[FileUpload](./src/components/FileUpload/index.tsx)** - New file upload component with React Spectrum FileTrigger integration
+  - Single and multiple file upload support with flexible file selection
+  - Drag and drop functionality for intuitive file handling
+  - File validation with type, size, and extension constraints
+  - Custom file rendering with progress tracking and preview support
+  - Async file processing with configurable callbacks for upload and removal
+  - Error handling with detailed validation messages
+  - Accessibility-first design with keyboard navigation and screen reader support
+  - Type-safe props with comprehensive TypeScript interfaces
+  - Full test coverage with component and user interaction testing
+
+### 🔧 Changed
+
+- **[FieldBuilder](./src/components/DataForm/FieldBuilder/index.tsx)** - Enhanced TOGGLE field with contextual help support
+  - Added `contextualHelp` prop to TOGGLE field type for inline documentation
+  - Improved user guidance with tooltip-style help text
+  - Consistent help text rendering across all field types
+
+- **[FieldBuilder](./src/components/DataForm/FieldBuilder/index.tsx)** - Improved MULTISELECT field array handling
+  - Enhanced array value parsing and storage for MULTISELECT fields
+  - Better handling of comma-separated string to array conversion
+  - Improved compatibility with backend data structures
+
+- **[TwoColumnLeft](./src/components/MainContainer/TwoColumnLeft/index.tsx)** - Layout flexibility improvement
+  - Changed `height` to `minHeight` for better responsive behavior
+  - Allows content to expand naturally beyond minimum height
+  - Prevents layout issues with dynamic content
+
+### ⚠️ Deprecated
+
+- **[ShippingCarrierForm](./src/components/ShippingCarrierForm/index.tsx)** - Component marked as deprecated
+  - Use `DataForm` component instead with custom field configuration
+  - Will be removed in v2.0.0
+  - Added deprecation notices to TypeScript interfaces and component
+
+### 🗑️ Removed
+
+- **[AdminUiSdk](./src/utils/AdminUiSdk/index.ts)** - Removed menu and page registration methods
+  - Removed `addMenuSection()`, `addMenuItem()`, and `addPage()` methods
+  - Removed `getRegistration()` method and related types
+  - Removed `registerExtension()` method for UIX registration
+  - Simplified to only provide `getCredentials()` for Adobe IMS authentication
+  - Breaking change: Projects using registration methods must update to use Adobe UIX SDK directly
+  - Retained credential management functionality for backward compatibility
+
+## [1.0.1] - 2024-10-14
+
+### ✨ Added
+
+- **[ShippingCarrierForm](./src/components/ShippingCarrierForm/index.tsx)** - New specialized form component for shipping carrier configuration
+  - Pre-configured fields for common shipping carrier attributes (code, title, active status)
+  - Multi-select support for stores and countries with scrollable option lists
+  - Toggle fields for tracking and shipping labels availability
+  - Built on top of DataForm with consistent validation and user experience
+  - Async-friendly API with loading states and lifecycle callbacks
+  - Type-safe props with comprehensive TypeScript interfaces
+
+### 🐛 Fixed
+
+- **FormBuilder**: Resolved race condition when handling multiple toggle fields simultaneously
+- **ESLint**: Resolved React hooks linting warnings across components
+
+### 🔧 Changed
+
+- **[DataForm](./src/components/DataForm/index.tsx)** - Enhanced with new field types for richer form capabilities
+  - Added MULTISELECT field type with React Spectrum CheckboxGroup implementation
+  - Added TOGGLE field type with React Spectrum Switch component
+  - Array value handling for MULTISELECT with proper storage and retrieval
+  - Automatic '1'/'0' value handling for TOGGLE fields with backend compatibility
+  - Scrollable containers for multi-select options with automatic overflow handling
+  - Enhanced styling with proper spacing and visual hierarchy for new field types
+  - Full accessibility support with keyboard navigation for all field types
+  - Environment variable mode support for TOGGLE fields
+
+- **[AdminUiSdk](./src/utils/AdminUiSdk/index.ts)** - Refactored to use registration-based approach for improved flexibility
+- **ESLint**: Migrated to ESLint 9 flat config format for modern JavaScript tooling
+- **FieldBuilder**: Improved import formatting and code spacing for better readability
+
+### 📚 Documentation
+
+- Added comprehensive documentation for MULTISELECT and TOGGLE field types
+- Updated README with ShippingCarrierForm component usage examples
+- Enhanced field type documentation with code examples and use cases
+
+---
+
 ## [1.0.0] - 2024-12-19
 
 ### 🎉 Initial Release

package/README.md

@@ -287,6 +287,46 @@ class EntityModel {
                   label: 'Disabled'
                 }
               ]
+            },
+            {
+              label: 'Categories',
+              code: 'categories',
+              db_field: 'categories',
+              type: FieldType.MULTISELECT,
+              required: false,
+              options: [
+                {
+                  value: 'electronics',
+                  label: 'Electronics'
+                },
+                {
+                  value: 'clothing',
+                  label: 'Clothing'
+                },
+                {
+                  value: 'books',
+                  label: 'Books'
+                },
+                {
+                  value: 'home',
+                  label: 'Home & Garden'
+                }
+              ]
+            },
+            {
+              label: 'Featured Product',
+              code: 'featured',
+              db_field: 'featured',
+              type: FieldType.TOGGLE,
+              required: false
+            },
+            {
+              label: 'Notifications',
+              code: 'notifications',
+              db_field: 'notifications',
+              type: FieldType.TOGGLE,
+              required: false,
+              use_env_var: true
             }
           ]
         }
@@ -296,9 +336,74 @@ class EntityModel {
 }
 ```
 
+##### Field Types
+
+The DataForm component supports various field types for different input scenarios:
+
+**Basic Input Fields:**
+- `FieldType.TEXT` - Standard text input
+- `FieldType.EMAIL` - Email input with validation
+- `FieldType.PASSWORD` - Password input with masking
+- `FieldType.NUMBER` - Numeric input with validation
+- `FieldType.URL` - URL input with validation
+- `FieldType.TEL` - Telephone number input
+- `FieldType.SEARCH` - Search input with appropriate styling
+
+**Selection Fields:**
+- `FieldType.SELECT` - Single selection dropdown with options
+- `FieldType.MULTISELECT` - Multiple selection with checkboxes in a scrollable container
+- `FieldType.TOGGLE` - Boolean toggle switch with '1'/'0' values
+
+**Display Fields:**
+- `FieldType.LABEL` - Read-only display field for showing values
+
+**Field Configuration Examples:**
+
+```javascript
+// MULTISELECT field with scrollable options
+{
+  label: 'Product Categories',
+  code: 'categories',
+  db_field: 'categories',
+  type: FieldType.MULTISELECT,
+  required: false,
+  options: [
+    { value: 'electronics', label: 'Electronics' },
+    { value: 'clothing', label: 'Clothing' },
+    { value: 'books', label: 'Books' },
+    { value: 'home', label: 'Home & Garden' },
+    // ... more options (automatically scrollable when many)
+  ]
+}
+
+// TOGGLE field with automatic default value
+{
+  label: 'Enable Feature',
+  code: 'feature_enabled',
+  db_field: 'feature_enabled',
+  type: FieldType.TOGGLE,
+  required: false
+  // Automatically defaults to '0' if no value provided
+  // Returns '1' when enabled, '0' when disabled
+}
+
+// Field with environment variable support
+{
+  label: 'API Endpoint',
+  code: 'api_endpoint',
+  db_field: 'api_endpoint',
+  type: FieldType.TEXT,
+  required: true,
+  use_env_var: true  // Adds checkbox to use as environment variable
+}
+```
+
 **Features:**
 - **Dynamic Form Generation**: Create complex forms from simple configuration objects without manual field creation
-- **Rich Field Types**: Support for text, email, password, number, select, and specialized input types
+- **Rich Field Types**: Support for text, email, password, number, select, multiselect, toggle, and specialized input types
+- **Multi-Selection Support**: MULTISELECT field type with React Spectrum CheckboxGroup for selecting multiple options with scrollable overflow and accessibility support
+- **Toggle Controls**: TOGGLE field type using React Spectrum Switch component with '1'/'0' value handling and automatic default value initialization
+- **Environment Variable Support**: Built-in support for environment variable checkboxes on compatible field types (TEXT, SELECT, MULTISELECT, TOGGLE)
 - **Intelligent Validation**: Built-in validation with custom rules, real-time feedback, and error messaging
 - **Workflow Integration**: Loading states, processing indicators, and navigation controls for multi-step workflows
 - **Organized Layout**: Logical field grouping with collapsible sections and intuitive information hierarchy
@@ -386,44 +491,100 @@ class EntityModel {
 - **Accessibility Excellence**: Full screen reader support, proper ARIA labels, and focus trap implementation
 - **Design Consistency**: Follows Adobe Spectrum design patterns for familiar user interactions
 
+#### `FileUpload`
+
+A flexible file upload component with file validation and automatic content reading. Built on React Spectrum's FileTrigger for consistent Adobe design patterns.
+
+```javascript
+import React, { useState } from 'react';
+import { View } from '@adobe/react-spectrum';
+import { FileUpload } from '@adobe-commerce/aio-experience-kit';
+import { ToastQueue } from '@react-spectrum/toast';
+
+const DocumentUploader = () => {
+  const [isProcessing, setProcessing] = useState(false);
+
+  return (
+    <View>
+      <FileUpload
+        label="Upload Documents"
+        isRequired={true}
+        acceptedFileTypes={['application/pdf', '.doc', '.docx']}
+        allowsMultiple={true}
+        isDisabled={isProcessing}
+        onSelect={async (files) => {
+          setProcessing(true);
+          try {
+            // Process each file
+          } catch (error) {
+            ToastQueue.negative(`Upload failed: ${error.message}`, { timeout: 5000 });
+          } finally {
+            setProcessing(false);
+          }
+        }}
+      />
+    </View>
+  );
+};
+```
+
+**Features:**
+- **File Selection**: Click to browse files with support for single or multiple file selection
+- **Automatic Content Reading**: Automatically reads file content as text or base64 based on file type
+- **File Type Validation**: Built-in validation for accepted MIME types and file extensions
+- **Built-in Display**: Automatically displays selected files with name, size, and type information
+- **Clear Functionality**: Built-in "Clear Files" link to remove selected files
+- **Loading States**: Shows processing indicator while reading file contents
+- **Error Handling**: Comprehensive error messaging for file reading failures
+- **Accessibility**: Full keyboard navigation, screen reader support, and ARIA labels
+- **Type Safety**: Complete TypeScript support with FileInfo interface for processed files
+
+---
+
 ### 🔧 Utils
 
 Utility functions and classes that simplify common tasks in Adobe Commerce extension development.
 
 #### `AdminUiSdk`
 
-A comprehensive utility class for registering Adobe Admin UI extensions with the Adobe UIX registry, managing menu items and page configurations.
+A utility class for managing Adobe IMS credentials in Adobe Admin UI extensions. Provides secure access to authentication tokens and organization IDs for API calls.
 
-```typescript
-import { AdminUiSdk } from '@adobe-commerce/aio-experience-kit';
+> **Note**: As of v1.0.2, registration methods have been removed. Use the Adobe UIX SDK directly for extension registration.
 
-// Initialize the SDK
-const extensionId = 'my_admin_extension';
-const sdk = new AdminUiSdk(extensionId);
+##### Getting Adobe IMS Credentials
 
-// Add menu items
-sdk.addMenu({
-  id: `${extensionId}::products`,
-  title: 'Product Manager',
-  parent: 'Magento_Catalog::catalog',
-  sortOrder: 10
-});
+Retrieve authentication credentials from the Adobe shared context:
 
-// Set page title
-sdk.addPage('Product Management Dashboard');
+```typescript
+import { AdminUiSdk } from '@adobe-commerce/aio-experience-kit';
+
+try {
+  const sdk = new AdminUiSdk('my_admin_extension');
 
-// Register with Adobe UIX
-await sdk.register();
+  const credentials = await sdk.getCredentials();
+  
+  if (credentials.imsToken && credentials.imsOrgId) {
+    // Use credentials for API calls
+    const apiHeaders = {
+      'Authorization': `Bearer ${credentials.imsToken}`,
+      'x-gw-ims-org-id': credentials.imsOrgId
+    };
+    
+    // Make authenticated API requests
+  } else {
+    console.log('Credentials not available');
+  }
+} catch (error) {
+  console.error('Failed to get credentials:', error.message);
+}
 ```
 
 **Features:**
-- **Menu Management**: Add and organize menu items with validation, duplicate prevention, and proper hierarchy
-- **Page Configuration**: Set custom page titles for extension interfaces with automatic registration
-- **Adobe UIX Integration**: Seamless registration with Adobe's extensibility platform using official APIs
-- **Input Validation**: Built-in sanitization, trimming, and validation for all configuration parameters
-- **Error Prevention**: Comprehensive error handling with meaningful messages for invalid configurations
+- **Credential Management**: Secure access to Adobe IMS authentication tokens and organization IDs
+- **Shared Context Access**: Retrieves credentials from Adobe's shared context using @adobe/uix-guest
+- **Error Handling**: Comprehensive error handling for credential retrieval failures
 - **Type Safety**: Full TypeScript support with intelligent code completion and compile-time validation
-- **Production Ready**: Battle-tested utility used in real Adobe Commerce extensions with robust error handling
+- **Production Ready**: Battle-tested utility used in real Adobe Commerce extensions
 
 #### `useRouteParams`
 
@@ -469,9 +630,20 @@ import type {
   DataTableProps,
   DataFormProps,
   ConfirmationDialogProps,
+  FileUploadProps,
+  FieldType,
   AdminUiSdkInterface,
-  MenuItem
+  AdminUiSdkCredentials
 } from '@adobe-commerce/aio-experience-kit';
+
+// Deprecated types (for backward compatibility only)
+// These types are deprecated and will be removed in v2.0.0
+// import type { 
+//   ShippingCarrierFormProps, 
+//   SelectOption,
+//   AdminUiSdkRegistration,
+//   MenuItem
+// } from '@adobe-commerce/aio-experience-kit';
 ```
 
 ## License

package/dist/cjs/components/DataForm/FieldBuilder/index.js

@@ -9,7 +9,7 @@ var reactSpectrum = require('@adobe/react-spectrum');
 var types = require('../FormBuilder/types.js');
 
 var FieldBuilder = function FieldBuilder(_ref) {
-  var _editItem$envName, _ref2, _editItem$field$db_fi;
+  var _editItem$envName;
   var field = _ref.field,
     editItem = _ref.editItem,
     onFieldChange = _ref.onFieldChange,
@@ -20,12 +20,32 @@ var FieldBuilder = function FieldBuilder(_ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isChecked = _useState2[0],
     setIsChecked = _useState2[1];
-  var _useState3 = React.useState((_ref2 = (_editItem$field$db_fi = editItem[field.db_field]) !== null && _editItem$field$db_fi !== void 0 ? _editItem$field$db_fi : field.value) !== null && _ref2 !== void 0 ? _ref2 : null),
+  var _useState3 = React.useState(function () {
+      var _editItem$field$db_fi;
+      var initialValue = (_editItem$field$db_fi = editItem[field.db_field]) !== null && _editItem$field$db_fi !== void 0 ? _editItem$field$db_fi : field.value;
+      var defaultValue = initialValue !== null && initialValue !== void 0 ? initialValue : field.type === types.FieldType.TOGGLE ? '0' : null;
+      // Call onFieldChange for TOGGLE fields with default value
+      if (field.type === types.FieldType.TOGGLE && !initialValue && defaultValue === '0') {
+        // Use setTimeout to avoid calling during render
+        setTimeout(/*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
+          return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
+              case 0:
+                _context.n = 1;
+                return onFieldChange(field.code, field.db_field, '0');
+              case 1:
+                return _context.a(2);
+            }
+          }, _callee);
+        })), 0);
+      }
+      return defaultValue;
+    }),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     value = _useState4[0],
     setValue = _useState4[1];
   return jsxRuntime.jsx(reactSpectrum.View, {
-    children: function (_field$required, _field$disabled, _field$contextualHelp, _field$contextualHelp2, _field$required2, _field$disabled2, _field$contextualHelp3) {
+    children: function (_field$required, _field$disabled, _field$contextualHelp, _field$required2, _field$disabled2, _field$contextualHelp2, _field$disabled3, _field$contextualHelp3, _field$contextualHelp4, _field$required3, _field$disabled4, _field$contextualHelp5) {
       switch (field.type) {
         case types.FieldType.SELECT:
           return jsxRuntime.jsxs(reactSpectrum.View, {
@@ -39,17 +59,17 @@ var FieldBuilder = function FieldBuilder(_ref) {
               defaultSelectedKey: value,
               width: "100%",
               onSelectionChange: function () {
-                var _onSelectionChange = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee(value) {
-                  return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
-                    while (1) switch (_context.n) {
+                var _onSelectionChange = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee2(value) {
+                  return _rollupPluginBabelHelpers.regenerator().w(function (_context2) {
+                    while (1) switch (_context2.n) {
                       case 0:
                         setValue(value);
-                        _context.n = 1;
+                        _context2.n = 1;
                         return onFieldChange(field.code, field.db_field, value);
                       case 1:
-                        return _context.a(2);
+                        return _context2.a(2);
                     }
-                  }, _callee);
+                  }, _callee2);
                 }));
                 function onSelectionChange(_x) {
                   return _onSelectionChange.apply(this, arguments);
@@ -67,17 +87,17 @@ var FieldBuilder = function FieldBuilder(_ref) {
               isRequired: false,
               defaultSelected: isChecked,
               onChange: function () {
-                var _onChange = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee2(checked) {
-                  return _rollupPluginBabelHelpers.regenerator().w(function (_context2) {
-                    while (1) switch (_context2.n) {
+                var _onChange = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee3(checked) {
+                  return _rollupPluginBabelHelpers.regenerator().w(function (_context3) {
+                    while (1) switch (_context3.n) {
                       case 0:
                         setIsChecked(checked);
-                        _context2.n = 1;
+                        _context3.n = 1;
                         return onFieldChange(envName, envName, checked);
                       case 1:
-                        return _context2.a(2);
+                        return _context3.a(2);
                     }
-                  }, _callee2);
+                  }, _callee3);
                 }));
                 function onChange(_x2) {
                   return _onChange.apply(this, arguments);
@@ -87,13 +107,142 @@ var FieldBuilder = function FieldBuilder(_ref) {
               children: ["Use value as environment variable: ", value]
             }, envName) : null]
           });
+        case types.FieldType.MULTISELECT:
+          return jsxRuntime.jsxs(reactSpectrum.View, {
+            marginBottom: 'size-100',
+            children: [jsxRuntime.jsx(reactSpectrum.CheckboxGroup, {
+              label: field.label,
+              width: 'size-6000',
+              isRequired: (_field$required2 = field.required) !== null && _field$required2 !== void 0 ? _field$required2 : false,
+              isDisabled: isChecked || ((_field$disabled2 = field.disabled) !== null && _field$disabled2 !== void 0 ? _field$disabled2 : false),
+              contextualHelp: (_field$contextualHelp2 = field.contextualHelp) !== null && _field$contextualHelp2 !== void 0 ? _field$contextualHelp2 : null,
+              value: Array.isArray(value) ? value : [],
+              onChange: function () {
+                var _onChange2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee4(selectedValues) {
+                  return _rollupPluginBabelHelpers.regenerator().w(function (_context4) {
+                    while (1) switch (_context4.n) {
+                      case 0:
+                        setValue(selectedValues);
+                        _context4.n = 1;
+                        return onFieldChange(field.code, field.db_field, selectedValues);
+                      case 1:
+                        return _context4.a(2);
+                    }
+                  }, _callee4);
+                }));
+                function onChange(_x3) {
+                  return _onChange2.apply(this, arguments);
+                }
+                return onChange;
+              }(),
+              children: jsxRuntime.jsx(reactSpectrum.View, {
+                borderWidth: 'thin',
+                borderColor: 'gray-600',
+                borderRadius: 'medium',
+                padding: 'size-100',
+                backgroundColor: 'static-white',
+                children: jsxRuntime.jsx(reactSpectrum.View, {
+                  maxHeight: 'size-2400',
+                  overflow: 'auto',
+                  children: (field.options || []).map(function (option, index) {
+                    return jsxRuntime.jsx(reactSpectrum.Checkbox, {
+                      width: '100%',
+                      value: option.value,
+                      children: option.label
+                    }, "".concat(field.code, "-").concat(index));
+                  })
+                })
+              })
+            }, field.code), field.use_env_var !== undefined && field.use_env_var ? jsxRuntime.jsxs(reactSpectrum.Checkbox, {
+              name: envName,
+              value: '1',
+              isRequired: false,
+              defaultSelected: isChecked,
+              onChange: function () {
+                var _onChange3 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee5(checked) {
+                  return _rollupPluginBabelHelpers.regenerator().w(function (_context5) {
+                    while (1) switch (_context5.n) {
+                      case 0:
+                        setIsChecked(checked);
+                        _context5.n = 1;
+                        return onFieldChange(envName, envName, checked);
+                      case 1:
+                        return _context5.a(2);
+                    }
+                  }, _callee5);
+                }));
+                function onChange(_x4) {
+                  return _onChange3.apply(this, arguments);
+                }
+                return onChange;
+              }(),
+              children: ["Use value as environment variable:", ' ', Array.isArray(value) ? value.join(', ') : value]
+            }, envName) : null]
+          });
+        case types.FieldType.TOGGLE:
+          return jsxRuntime.jsxs(reactSpectrum.View, {
+            marginBottom: 'size-100',
+            children: [jsxRuntime.jsxs(reactSpectrum.Flex, {
+              gap: "size-100",
+              alignItems: "start",
+              children: [jsxRuntime.jsx(reactSpectrum.Switch, {
+                isDisabled: isChecked || ((_field$disabled3 = field.disabled) !== null && _field$disabled3 !== void 0 ? _field$disabled3 : false),
+                isSelected: value === '1',
+                onChange: function () {
+                  var _onChange4 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee6(selected) {
+                    var toggleValue;
+                    return _rollupPluginBabelHelpers.regenerator().w(function (_context6) {
+                      while (1) switch (_context6.n) {
+                        case 0:
+                          toggleValue = selected ? '1' : '0';
+                          setValue(toggleValue);
+                          _context6.n = 1;
+                          return onFieldChange(field.code, field.db_field, toggleValue);
+                        case 1:
+                          return _context6.a(2);
+                      }
+                    }, _callee6);
+                  }));
+                  function onChange(_x5) {
+                    return _onChange4.apply(this, arguments);
+                  }
+                  return onChange;
+                }(),
+                children: field.label
+              }, field.code), (_field$contextualHelp3 = field.contextualHelp) !== null && _field$contextualHelp3 !== void 0 ? _field$contextualHelp3 : null]
+            }), field.use_env_var !== undefined && field.use_env_var ? jsxRuntime.jsxs(reactSpectrum.Checkbox, {
+              name: envName,
+              value: '1',
+              isRequired: false,
+              defaultSelected: isChecked,
+              onChange: function () {
+                var _onChange5 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee7(checked) {
+                  return _rollupPluginBabelHelpers.regenerator().w(function (_context7) {
+                    while (1) switch (_context7.n) {
+                      case 0:
+                        setIsChecked(checked);
+                        _context7.n = 1;
+                        return onFieldChange(envName, envName, checked);
+                      case 1:
+                        return _context7.a(2);
+                    }
+                  }, _callee7);
+                }));
+                function onChange(_x6) {
+                  return _onChange5.apply(this, arguments);
+                }
+                return onChange;
+              }(),
+              children: ["Use value as environment variable: ", value]
+            }, envName) : null]
+          });
         case types.FieldType.LABEL:
           return jsxRuntime.jsx(reactSpectrum.View, {
             marginBottom: 'size-100',
             children: jsxRuntime.jsx(reactSpectrum.LabeledValue, {
               label: field.label,
               value: value,
-              contextualHelp: (_field$contextualHelp2 = field.contextualHelp) !== null && _field$contextualHelp2 !== void 0 ? _field$contextualHelp2 : null
+              contextualHelp: (_field$contextualHelp4 = field.contextualHelp) !== null && _field$contextualHelp4 !== void 0 ? _field$contextualHelp4 : null
             }, field.code)
           });
         case types.FieldType.TEXT:
@@ -110,26 +259,26 @@ var FieldBuilder = function FieldBuilder(_ref) {
               type: field.type,
               label: field.label,
               placeholder: usePlaceholder ? field.label : '',
-              isRequired: (_field$required2 = field.required) !== null && _field$required2 !== void 0 ? _field$required2 : false,
-              isDisabled: isChecked || ((_field$disabled2 = field.disabled) !== null && _field$disabled2 !== void 0 ? _field$disabled2 : false),
+              isRequired: (_field$required3 = field.required) !== null && _field$required3 !== void 0 ? _field$required3 : false,
+              isDisabled: isChecked || ((_field$disabled4 = field.disabled) !== null && _field$disabled4 !== void 0 ? _field$disabled4 : false),
               defaultValue: value,
-              contextualHelp: (_field$contextualHelp3 = field.contextualHelp) !== null && _field$contextualHelp3 !== void 0 ? _field$contextualHelp3 : null,
+              contextualHelp: (_field$contextualHelp5 = field.contextualHelp) !== null && _field$contextualHelp5 !== void 0 ? _field$contextualHelp5 : null,
               width: "100%",
               onChange: function () {
-                var _onChange2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee3(value) {
-                  return _rollupPluginBabelHelpers.regenerator().w(function (_context3) {
-                    while (1) switch (_context3.n) {
+                var _onChange6 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee8(value) {
+                  return _rollupPluginBabelHelpers.regenerator().w(function (_context8) {
+                    while (1) switch (_context8.n) {
                       case 0:
                         setValue(value);
-                        _context3.n = 1;
+                        _context8.n = 1;
                         return onFieldChange(field.code, field.db_field, value);
                       case 1:
-                        return _context3.a(2);
+                        return _context8.a(2);
                     }
-                  }, _callee3);
+                  }, _callee8);
                 }));
-                function onChange(_x3) {
-                  return _onChange2.apply(this, arguments);
+                function onChange(_x7) {
+                  return _onChange6.apply(this, arguments);
                 }
                 return onChange;
               }()
@@ -139,20 +288,20 @@ var FieldBuilder = function FieldBuilder(_ref) {
               isRequired: false,
               defaultSelected: isChecked,
               onChange: function () {
-                var _onChange3 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee4(checked) {
-                  return _rollupPluginBabelHelpers.regenerator().w(function (_context4) {
-                    while (1) switch (_context4.n) {
+                var _onChange7 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee9(checked) {
+                  return _rollupPluginBabelHelpers.regenerator().w(function (_context9) {
+                    while (1) switch (_context9.n) {
                       case 0:
                         setIsChecked(checked);
-                        _context4.n = 1;
+                        _context9.n = 1;
                         return onFieldChange(envName, envName, checked);
                       case 1:
-                        return _context4.a(2);
+                        return _context9.a(2);
                     }
-                  }, _callee4);
+                  }, _callee9);
                 }));
-                function onChange(_x4) {
-                  return _onChange3.apply(this, arguments);
+                function onChange(_x8) {
+                  return _onChange7.apply(this, arguments);
                 }
                 return onChange;
               }(),