@devcustrom/strapi-plugin-api-select 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,64 @@
+# Changelog
+
+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.1] - 2025-08-21
+
+### Fixed
+
+- 🐛 Fixed plugin name inconsistency causing custom field registration error
+- 🔧 Updated field name from "custom-strapi-select" to "api-select" to match package.json
+- 📝 Updated all i18n keys to use consistent "api-select" prefix
+
+## [1.0.0] - 2025-08-21
+
+### Added
+
+- 🎉 Initial release of Strapi Plugin API Select
+- ✨ Custom field for API-driven select dropdowns
+- 🔗 Support for external API integration
+- 📡 HTTP GET and POST request methods
+- 🔐 Custom headers and authentication support
+- 📋 Request payload configuration for POST requests
+- 🗺️ Flexible response data path mapping
+- 🎛️ Custom response field mapping configuration
+- 🌐 Proxy mode for private APIs with CORS bypass
+- 🔒 Basic SSRF protection for API URLs
+- 🌍 Multi-language content support
+- 📱 Single and multiple selection modes
+- 🎨 Strapi v5 design system integration
+- 🔄 Real-time option loading
+- 📝 Field descriptions and help text
+- ⚡ Performance optimized with caching
+- 🐛 Comprehensive error handling
+- 📊 Debug logging for troubleshooting
+
+### Features
+
+- **Dynamic Select Fields**: Create select fields that fetch options from any REST API
+- **Flexible HTTP Methods**: Support for both GET and POST requests with custom payloads
+- **Authentication Support**: Add custom headers for API authentication
+- **Response Mapping**: Handle diverse API response structures with custom field mapping
+- **Proxy Support**: Built-in proxy for private APIs and CORS handling
+- **Multilingual Ready**: Works with Strapi's internationalization features
+- **Production Ready**: Includes error handling, validation, and performance optimizations
+
+### Technical
+
+- Built for Strapi v5
+- ES6/CommonJS module compatibility
+- React-based admin UI
+- TypeScript support
+- Node.js 18+ compatibility
+- Modern build system integration
+
+### Documentation
+
+- Comprehensive README with examples
+- API response format examples
+- Configuration guide
+- Troubleshooting section
+- MIT License

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,266 @@
+# Strapi Plugin API Select
+
+[![npm version](https://badge.fury.io/js/@devcustrom/strapi-plugin-api-select.svg)](https://badge.fury.io/js/@devcustrom/strapi-plugin-api-select)
+[![Downloads](https://img.shields.io/npm/dm/@devcustrom/strapi-plugin-api-select)](https://npmjs.org/package/@devcustrom/strapi-plugin-api-select)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A powerful **Strapi v5 plugin** that provides API-driven select fields with support for GET/POST requests, custom headers, flexible response mapping, and multilingual content.
+
+## ✨ Features
+
+- 🔗 **External API Integration** - Fetch select options from any REST API
+- 📡 **HTTP Methods** - Support for both GET and POST requests
+- 🔐 **Authentication** - Custom headers and API token support
+- 📋 **Request Payloads** - Configure JSON payloads for POST requests
+- 🗺️ **Flexible Mapping** - Handle diverse API response structures
+- 🌐 **Proxy Mode** - Built-in proxy for private APIs and CORS bypass
+- 🌍 **Multilingual** - Works with Strapi's i18n features
+- 📱 **Selection Modes** - Single or multiple selection
+- ⚡ **Performance** - Optimized with error handling and caching
+
+## 🚀 Installation
+
+```bash
+npm install @devcustrom/strapi-plugin-api-select
+```
+
+## ⚙️ Configuration
+
+Add the plugin to your `config/plugins.js` file:
+
+```javascript
+module.exports = {
+  // ...
+  "api-select": {
+    enabled: true,
+  },
+  // ...
+};
+```
+
+## 📖 Usage
+
+### 1. Add Field to Content Type
+
+1. Go to **Content-Type Builder** in your Strapi admin
+2. Select your content type (e.g., Article, Product)
+3. Click **Add another field**
+4. Choose **Custom** → **API Select**
+5. Configure your field options
+
+### 2. Field Configuration
+
+#### Basic Settings
+
+- **Options API URL**: The endpoint that returns your options
+- **Label Key**: Field to use for display text (default: `name`)
+- **Value Key**: Field to use for stored value (default: `id`)
+- **Select Mode**: Single or Multiple selection
+- **Auth Mode**: Public API or Proxy for private APIs
+
+#### Advanced Settings
+
+- **HTTP Method**: GET or POST (default: `GET`)
+- **Request Payload**: JSON payload for POST requests
+- **Custom Headers**: Additional headers as JSON object
+- **Response Data Path**: Path to array in response (e.g., `data`, `results`)
+- **Response Mapping**: Custom field mapping for complex responses
+
+## 📋 Examples
+
+### Basic GET Request
+
+```javascript
+// API URL: https://api.example.com/categories
+// Response:
+[
+  { id: 1, name: "Technology" },
+  { id: 2, name: "Science" },
+];
+
+// Configuration:
+// - Label Key: name
+// - Value Key: id
+```
+
+### POST Request with Payload
+
+```javascript
+// Configuration:
+// - HTTP Method: POST
+// - Request Payload:
+{
+  "filters": {"status": "active"},
+  "limit": 100
+}
+
+// - Custom Headers:
+{
+  "Authorization": "Bearer your-token",
+  "X-API-Key": "your-api-key"
+}
+```
+
+### Complex Response Mapping
+
+```javascript
+// API Response:
+{
+  "success": true,
+  "data": {
+    "users": [
+      {
+        "userId": 1,
+        "profile": {"displayName": "John Doe"},
+        "department": {"name": "Engineering"}
+      }
+    ]
+  }
+}
+
+// Configuration:
+// - Response Data Path: data.users
+// - Response Mapping:
+{
+  "value": "userId",
+  "label": "profile.displayName",
+  "group": "department.name"
+}
+```
+
+### Different Response Formats
+
+The plugin automatically handles various API response structures:
+
+#### Direct Array
+
+```json
+[
+  { "id": 1, "name": "Option 1" },
+  { "id": 2, "name": "Option 2" }
+]
+```
+
+#### Nested Data
+
+```json
+{
+  "data": [
+    { "id": 1, "title": "Option 1" },
+    { "id": 2, "title": "Option 2" }
+  ]
+}
+```
+
+#### Complex Structure
+
+```json
+{
+  "response": {
+    "items": [{ "uuid": "abc-123", "label": "Custom Option" }]
+  }
+}
+```
+
+## 🔒 Security Features
+
+- **SSRF Protection**: Validates API URLs to prevent server-side request forgery
+- **Proxy Mode**: Routes requests through Strapi backend for private APIs
+- **Environment Variables**: Support for API tokens via environment variables
+
+Set your API token:
+
+```bash
+CUSTOM_STRAPI_SELECT_TOKEN=your_api_token_here
+```
+
+## 🌐 Proxy Mode
+
+For private APIs or to bypass CORS issues, use proxy mode:
+
+1. Set **Auth Mode** to "Proxy"
+2. Requests will be routed through your Strapi backend
+3. Configure authentication via environment variables
+
+## 🎛️ Field Types Supported
+
+### Single Selection
+
+Returns a single value:
+
+```javascript
+"selected_option_id";
+```
+
+### Multiple Selection
+
+Returns an array of values:
+
+```javascript
+["option_1", "option_2", "option_3"];
+```
+
+## 🔧 Development
+
+### Local Development
+
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. Link locally: `npm link`
+4. In your Strapi project: `npm link @devcustrom/strapi-plugin-api-select`
+5. Restart Strapi
+
+### Testing
+
+```bash
+npm test
+```
+
+## 📄 API Reference
+
+### Server Routes
+
+- `GET /api/api-select/fetch` - Proxy endpoint for fetching external API data
+
+### Query Parameters
+
+- `api` - External API URL
+- `labelKey` - Field name for option labels
+- `valueKey` - Field name for option values
+- `method` - HTTP method (GET/POST)
+- `payload` - JSON payload for POST requests
+- `headers` - Custom headers as JSON string
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+1. Fork the repository
+2. Create your feature branch: `git checkout -b feature/amazing-feature`
+3. Commit your changes: `git commit -m 'Add amazing feature'`
+4. Push to the branch: `git push origin feature/amazing-feature`
+5. Open a Pull Request
+
+## 📝 Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for a list of changes.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🆘 Support
+
+- 📖 [Documentation](https://github.com/devcustrom/strapi-plugin-api-select#readme)
+- 🐛 [Issue Tracker](https://github.com/devcustrom/strapi-plugin-api-select/issues)
+- 💬 [Strapi Discord](https://discord.strapi.io) - Ask in #plugins channel
+
+## 🙏 Acknowledgments
+
+- Built for [Strapi v5](https://strapi.io)
+- Inspired by the need for dynamic content in headless CMS
+- Thanks to the Strapi community for feedback and contributions
+
+---
+
+Made with ❤️ for the Strapi community

package/admin/src/index.js

@@ -0,0 +1,242 @@
+export default {
+  register(app) {
+    app.customFields.register({
+      name: "api-select",
+      pluginId: "api-select",
+      type: "json",
+      intlLabel: {
+        id: "api-select.label",
+        defaultMessage: "API Select",
+      },
+      intlDescription: {
+        id: "api-select.desc",
+        defaultMessage: "Select options from a remote API",
+      },
+      icon: () => "🔗",
+      components: {
+        Input: async () =>
+          import("./plugin/ApiSelectInput.jsx").then((m) => ({
+            default: m.default,
+          })),
+      },
+      options: {
+        base: [
+          {
+            name: "options.optionsApi",
+            type: "text",
+            intlLabel: {
+              id: "api-select.optionsApi.label",
+              defaultMessage: "Options API URL",
+            },
+          },
+          {
+            name: "options.optionLabelKey",
+            type: "text",
+            defaultValue: "name",
+            intlLabel: {
+              id: "api-select.optionLabelKey.label",
+              defaultMessage: "Label key",
+            },
+          },
+          {
+            name: "options.optionValueKey",
+            type: "text",
+            defaultValue: "id",
+            intlLabel: {
+              id: "api-select.optionValueKey.label",
+              defaultMessage: "Value key",
+            },
+          },
+          {
+            name: "options.selectMode",
+            type: "select",
+            defaultValue: "multiple",
+            options: [
+              {
+                key: "single",
+                value: "single",
+                metadatas: {
+                  intlLabel: {
+                    id: "api-select.selectMode.single",
+                    defaultMessage: "Single",
+                  },
+                },
+              },
+              {
+                key: "multiple",
+                value: "multiple",
+                metadatas: {
+                  intlLabel: {
+                    id: "api-select.selectMode.multiple",
+                    defaultMessage: "Multiple",
+                  },
+                },
+              },
+            ],
+            intlLabel: {
+              id: "api-select.selectMode.label",
+              defaultMessage: "Select mode",
+            },
+          },
+          {
+            name: "options.authMode",
+            type: "select",
+            defaultValue: "public",
+            options: [
+              {
+                key: "public",
+                value: "public",
+                metadatas: {
+                  intlLabel: {
+                    id: "api-select.authMode.public",
+                    defaultMessage: "Public",
+                  },
+                },
+              },
+              {
+                key: "proxy",
+                value: "proxy",
+                metadatas: {
+                  intlLabel: {
+                    id: "api-select.authMode.proxy",
+                    defaultMessage: "Proxy",
+                  },
+                },
+              },
+            ],
+            intlLabel: {
+              id: "api-select.authMode.label",
+              defaultMessage: "Auth mode",
+            },
+          },
+          {
+            name: "options.placeholder",
+            type: "text",
+            intlLabel: {
+              id: "api-select.placeholder.label",
+              defaultMessage: "Placeholder",
+            },
+          },
+          {
+            name: "options.httpMethod",
+            type: "select",
+            defaultValue: "GET",
+            options: [
+              {
+                key: "GET",
+                value: "GET",
+                metadatas: {
+                  intlLabel: {
+                    id: "api-select.httpMethod.get",
+                    defaultMessage: "GET",
+                  },
+                },
+              },
+              {
+                key: "POST",
+                value: "POST",
+                metadatas: {
+                  intlLabel: {
+                    id: "api-select.httpMethod.post",
+                    defaultMessage: "POST",
+                  },
+                },
+              },
+            ],
+            intlLabel: {
+              id: "api-select.httpMethod.label",
+              defaultMessage: "HTTP Method",
+            },
+          },
+          {
+            name: "options.requestPayload",
+            type: "textarea",
+            intlLabel: {
+              id: "api-select.requestPayload.label",
+              defaultMessage: "Request Payload (JSON)",
+            },
+            description: {
+              id: "api-select.requestPayload.description",
+              defaultMessage:
+                "JSON payload for POST requests. Leave empty for GET requests.",
+            },
+          },
+          {
+            name: "options.customHeaders",
+            type: "textarea",
+            intlLabel: {
+              id: "api-select.customHeaders.label",
+              defaultMessage: "Custom Headers (JSON)",
+            },
+            description: {
+              id: "api-select.customHeaders.description",
+              defaultMessage:
+                'Additional headers as JSON object. Example: {"Authorization": "Bearer token"}',
+            },
+          },
+          {
+            name: "options.responseDataPath",
+            type: "text",
+            intlLabel: {
+              id: "api-select.responseDataPath.label",
+              defaultMessage: "Response Data Path",
+            },
+            description: {
+              id: "api-select.responseDataPath.description",
+              defaultMessage:
+                "Path to array in response. Examples: 'data', 'results', 'items', 'data.users'. Leave empty if response is direct array.",
+            },
+          },
+          {
+            name: "options.responseMappingConfig",
+            type: "textarea",
+            intlLabel: {
+              id: "api-select.responseMappingConfig.label",
+              defaultMessage: "Response Mapping (JSON)",
+            },
+            description: {
+              id: "api-select.responseMappingConfig.description",
+              defaultMessage:
+                'Custom mapping for complex responses. Example: {"value": "id", "label": "name", "group": "category.name"}',
+            },
+          },
+          // {
+          //   sectionTitle: {
+          //     id: "api-select.icons.section",
+          //     defaultMessage: "Icon Preview",
+          //   },
+          //   items: [
+          //     {
+          //       name: "options.enableIcons",
+          //       type: "checkbox",
+          //       defaultValue: false,
+          //       intlLabel: {
+          //         id: "api-select.enableIcons.label",
+          //         defaultMessage: "Show icons",
+          //       },
+          //       description: {
+          //         id: "api-select.enableIcons.description",
+          //         defaultMessage: "Display icons next to options",
+          //       },
+          //     },
+          //     {
+          //       name: "options.iconUrlKey",
+          //       type: "text",
+          //       defaultValue: "iconUrl",
+          //       intlLabel: {
+          //         id: "api-select.iconUrlKey.label",
+          //         defaultMessage: "Icon URL field",
+          //       },
+          //       description: {
+          //         id: "api-select.iconUrlKey.description",
+          //         defaultMessage: 
+          //           "Field in API response that contains the full icon URL. Example: 'icon', 'image', 'svg'",
+          //       },
+          //     },
+          //   ],
+          // },
+        ],
+      },
+    });
+  },
+};

package/admin/src/plugin/ApiSelectInput.jsx

@@ -0,0 +1,380 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import {
+  Field,
+  SingleSelect,
+  SingleSelectOption,
+  MultiSelect,
+  MultiSelectOption,
+  Loader,
+  Box,
+  Typography,
+  Flex
+} from "@strapi/design-system";
+
+// Helper functions (getNestedValue, mapResponseData) остаются без изменений
+const getNestedValue = (obj, path) => {
+  if (!path) return obj;
+  return path.split('.').reduce((current, key) => {
+    return current && current[key] !== undefined ? current[key] : null;
+  }, obj);
+};
+
+const mapResponseData = (item, mapping, fallbackLabelKey, fallbackValueKey) => {
+  let mapped = { label: '', value: '', item };
+
+  if (mapping && typeof mapping === 'object') {
+    mapped.label =
+      getNestedValue(item, mapping.label || mapping.text || mapping.name) ||
+      getNestedValue(item, fallbackLabelKey) ||
+      item.label || item.name || item.text || 'Unknown';
+
+    mapped.value =
+      getNestedValue(item, mapping.value || mapping.id) ||
+      getNestedValue(item, fallbackValueKey) ||
+      item.value || item.id || mapped.label;
+
+    Object.keys(mapping).forEach(key => {
+      if (key !== 'label' && key !== 'value') {
+        mapped[key] = getNestedValue(item, mapping[key]);
+      }
+    });
+  } else {
+    mapped.label =
+      getNestedValue(item, fallbackLabelKey) ||
+      item.label || item.name || item.text || item.title ||
+      item.displayName || item.description || 'Unknown Option';
+
+    mapped.value =
+      getNestedValue(item, fallbackValueKey) ||
+      item.value || item.id || item.identifier || item.uuid || mapped.label;
+  }
+
+  if (!mapped.label || typeof mapped.label !== 'string') {
+    mapped.label = `Option ${mapped.value || 'Unknown'}`;
+  }
+
+  if (!mapped.value) {
+    mapped.value = mapped.label || `option_${Date.now()}`;
+  }
+
+  return mapped;
+};
+
+const ApiSelectInput = ({
+  name,
+  value,
+  onChange,
+  attribute,
+  placeholder,
+  error,
+  required,
+  disabled,
+  label,
+  description,
+  intlLabel,
+  forwardedRef,
+  ...props
+}) => {
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState(null);
+
+  const config = attribute?.options || {};
+  const configValues = config.options || config;
+
+  const {
+    optionsApi,
+    optionLabelKey = 'name',
+    optionValueKey = 'id',
+    selectMode = 'single',
+    authMode = 'public',
+    placeholder: configPlaceholder,
+    httpMethod = 'GET',
+    requestPayload = '',
+    customHeaders = '',
+    responseDataPath = '',
+    responseMappingConfig = '',
+    // 🔥 Новые поля для иконок
+    enableIcons = false,
+    iconUrlKey = 'iconUrl',
+  } = configValues;
+
+  const getAuthToken = () => {
+    try {
+      return (
+        localStorage.getItem('jwtToken')?.replaceAll('"', '') ||
+        localStorage.getItem('strapi_jwt')?.replaceAll('"', '') ||
+        localStorage.getItem('token')?.replaceAll('"', '')
+      );
+    } catch (e) {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (!optionsApi) return;
+
+    const fetchOptions = async () => {
+      setLoading(true);
+      setFetchError(null);
+
+      try {
+        let url = optionsApi;
+        const token = getAuthToken();
+
+        const fetchOpts = {
+          method: httpMethod,
+          credentials: authMode === 'proxy' ? 'include' : 'omit',
+          headers: {
+            'Content-Type': 'application/json',
+            ...(token && { Authorization: `Bearer ${token}` }),
+          },
+        };
+
+        if (customHeaders?.trim()) {
+          try {
+            Object.assign(fetchOpts.headers, JSON.parse(customHeaders));
+          } catch (e) {}
+        }
+
+        if (httpMethod === 'POST' && requestPayload?.trim()) {
+          fetchOpts.body = requestPayload;
+        }
+
+        if (authMode === 'proxy') {
+          const params = new URLSearchParams({
+            api: optionsApi,
+            labelKey: optionLabelKey,
+            valueKey: optionValueKey,
+            method: httpMethod,
+          });
+          if (requestPayload) params.append('payload', requestPayload);
+          if (customHeaders) params.append('headers', customHeaders);
+
+          url = `${window.strapi.backendURL}/api-select/fetch?${params}`;
+          fetchOpts.method = 'GET';
+          delete fetchOpts.body;
+        }
+
+        const response = await fetch(url, fetchOpts);
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+        const data = await response.json();
+
+        let itemsArray = data;
+        if (responseDataPath) {
+          itemsArray = getNestedValue(data, responseDataPath);
+        } else {
+          itemsArray = data.data || data.results || data.items || data.response || data;
+        }
+
+        if (!Array.isArray(itemsArray)) {
+          setOptions([]);
+          return;
+        }
+
+        let customMapping = null;
+        if (responseMappingConfig?.trim()) {
+          try {
+            customMapping = JSON.parse(responseMappingConfig);
+          } catch (e) {}
+        }
+        console.log(itemsArray);
+        
+        const mappedOptions = itemsArray.map(item =>
+          mapResponseData(item, customMapping, optionLabelKey, optionValueKey)
+        );
+
+        setOptions(mappedOptions);
+      } catch (err) {
+        setFetchError(err.message);
+        setOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchOptions();
+  }, [
+    optionsApi,
+    optionLabelKey,
+    optionValueKey,
+    authMode,
+    httpMethod,
+    requestPayload,
+    customHeaders,
+    responseDataPath,
+    responseMappingConfig,
+  ]);
+
+  const handleSingleChange = (value) => {
+    onChange({ target: { name, value, type: 'json' } });
+  };
+
+  const handleMultiChange = (values) => {
+    onChange({ target: { name, value: values, type: 'json' } });
+  };
+
+  const displayLabel = label || intlLabel?.defaultMessage || name || 'Select Option';
+
+  const getPlaceholder = () => {
+    if (loading) return 'Loading...';
+    if (fetchError) return 'Error loading options';
+    return placeholder || configPlaceholder || (selectMode === 'single' ? 'Select option...' : 'Select options...');
+  };
+
+  // 🔥 Функция для рендера опции с иконкой
+  const renderOptionContent = (option) => {    
+    const iconUrl = enableIcons ? option.item[iconUrlKey] : null;    
+    return (
+      <Flex gap={2} alignItems="center">
+        {
+          iconUrl && (
+            <svg 
+              width={20} 
+              height={20} 
+              viewBox="0 0 24 24"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use href={iconUrl} />
+            </svg>
+          )}
+        <span>{option.label}</span>
+      </Flex>
+    );
+  };
+
+  // Loading state
+  if (loading) {
+    return (
+      <Box padding={2}>
+        <Field.Root name={name} error={error} required={required}>
+          <Field.Label>{displayLabel}</Field.Label>
+          <Flex padding={2} gap={2}>
+            <Loader small />
+            <Typography variant="pi" textColor="neutral600">
+              Loading options...
+            </Typography>
+          </Flex>
+          {description && <Field.Hint>{description}</Field.Hint>}
+          <Field.Error />
+        </Field.Root>
+      </Box>
+    );
+  }
+
+  // Error state
+  if (fetchError) {
+    return (
+      <Box padding={2}>
+        <Field.Root name={name} error={error} required={required}>
+          <Field.Label>{displayLabel}</Field.Label>
+          <Box
+            padding={2}
+            background="danger100"
+            borderColor="danger600"
+            borderStyle="solid"
+            borderWidth="1px"
+            hasRadius
+          >
+            <Typography variant="pi" textColor="danger600">
+              Failed to load options: {fetchError}
+            </Typography>
+          </Box>
+          {description && <Field.Hint>{description}</Field.Hint>}
+          <Field.Error />
+        </Field.Root>
+      </Box>
+    );
+  }
+
+  // MultiSelect mode
+  if (selectMode === 'multiple') {
+    return (
+      <Box padding={2}>
+        <Field.Root name={name} error={error} required={required}>
+          <Field.Label>{displayLabel}</Field.Label>
+          <MultiSelect
+            ref={forwardedRef}
+            name={name}
+            value={value || []}
+            onChange={handleMultiChange}
+            disabled={disabled}
+            placeholder={getPlaceholder()}
+            withTags
+            {...props}
+          >
+            {options.map((option, index) => (
+              <MultiSelectOption key={option.value || index} value={option.value || ''}>
+                {renderOptionContent(option)}
+              </MultiSelectOption>
+            ))}
+          </MultiSelect>
+          {description && <Field.Hint>{description}</Field.Hint>}
+          <Field.Error />
+        </Field.Root>
+      </Box>
+    );
+  }
+
+  // Single Select mode
+  return (
+    <Box padding={2}>
+      <Field.Root name={name} error={error} required={required}>
+        <Field.Label>{displayLabel}</Field.Label>
+        <SingleSelect
+          ref={forwardedRef}
+          name={name}
+          value={value || ''}
+          onChange={handleSingleChange}
+          disabled={disabled}
+          placeholder={getPlaceholder()}
+          {...props}
+        >
+          {options.map((option, index) => (
+            <SingleSelectOption key={option.value || index} value={option.value || ''}>
+              {renderOptionContent(option)}
+            </SingleSelectOption>
+          ))}
+        </SingleSelect>
+        {description && <Field.Hint>{description}</Field.Hint>}
+        <Field.Error />
+      </Field.Root>
+    </Box>
+  );
+};
+
+ApiSelectInput.defaultProps = {
+  value: null,
+  placeholder: null,
+  error: null,
+  required: false,
+  disabled: false,
+  label: null,
+  description: null,
+  intlLabel: null,
+  forwardedRef: null,
+  attribute: {},
+};
+
+ApiSelectInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any,
+  onChange: PropTypes.func.isRequired,
+  attribute: PropTypes.object,
+  placeholder: PropTypes.string,
+  error: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  description: PropTypes.string,
+  intlLabel: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  forwardedRef: PropTypes.any,
+};
+
+export default ApiSelectInput;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@devcustrom/strapi-plugin-api-select",
+  "version": "1.1.0",
+  "description": "A powerful Strapi v5 plugin that provides API-driven select fields with support for GET/POST requests, custom headers, flexible response mapping, and multilingual content.",
+  "license": "MIT",
+  "main": "strapi-server.js",
+  "author": {
+    "name": "devcustrom",
+    "url": "https://github.com/devcustrom"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devcustrom/strapi-plugin-api-select.git"
+  },
+  "bugs": {
+    "url": "https://github.com/devcustrom/strapi-plugin-api-select/issues"
+  },
+  "homepage": "https://github.com/devcustrom/strapi-plugin-api-select#readme",
+  "strapi": {
+    "name": "api-select",
+    "displayName": "API Select",
+    "description": "Dynamic select fields powered by external APIs",
+    "kind": "plugin",
+    "type": "custom-field"
+  },
+  "peerDependencies": {
+    "@strapi/strapi": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
+  },
+  "files": [
+    "admin",
+    "server",
+    "strapi-admin.js",
+    "strapi-server.js",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "keywords": [
+    "strapi",
+    "strapi-plugin",
+    "custom-field",
+    "select",
+    "dropdown",
+    "api",
+    "dynamic",
+    "remote-data",
+    "external-api",
+    "v5",
+    "cms",
+    "headless"
+  ],
+  "scripts": {
+    "test": "echo \"No tests yet\" && exit 0"
+  }
+}

package/server/controllers/index.js

@@ -0,0 +1,5 @@
+const proxy = require("./proxy");
+
+module.exports = {
+  proxy,
+};

package/server/controllers/proxy.js

@@ -0,0 +1,87 @@
+const { URL } = require("url");
+
+module.exports = {
+  async fetch(ctx) {
+    try {
+      const {
+        api,
+        labelKey = "name",
+        valueKey = "id",
+        method = "GET",
+        payload,
+        headers: customHeadersStr,
+      } = ctx.query;
+
+      if (!api) {
+        return ctx.badRequest("API URL is required");
+      }
+
+      // Basic SSRF protection
+      const url = new URL(api);
+      if (!["http:", "https:"].includes(url.protocol)) {
+        return ctx.badRequest("Only HTTP/HTTPS URLs allowed");
+      }
+
+      // Prepare fetch options
+      const fetchOptions = {
+        method: method.toUpperCase(),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      };
+
+      // Add environment token if available
+      if (process.env.CUSTOM_STRAPI_SELECT_TOKEN) {
+        fetchOptions.headers.Authorization = `Bearer ${process.env.CUSTOM_STRAPI_SELECT_TOKEN}`;
+      }
+
+      // Parse and add custom headers
+      if (customHeadersStr) {
+        try {
+          const customHeaders = JSON.parse(customHeadersStr);
+          fetchOptions.headers = { ...fetchOptions.headers, ...customHeaders };
+          strapi.log.info("Added custom headers to proxy request");
+        } catch (error) {
+          strapi.log.warn("Invalid custom headers JSON:", error.message);
+        }
+      }
+
+      // Add request body for POST requests
+      if (method.toUpperCase() === "POST" && payload) {
+        try {
+          // Validate that payload is valid JSON
+          JSON.parse(payload);
+          fetchOptions.body = payload;
+          strapi.log.info("Added POST payload to proxy request");
+        } catch (error) {
+          return ctx.badRequest("Invalid JSON payload");
+        }
+      }
+
+      strapi.log.info(`Proxying ${method.toUpperCase()} request to: ${api}`);
+
+      // Fetch data
+      const response = await fetch(api, fetchOptions);
+
+      if (!response.ok) {
+        throw new Error(`API responded with ${response.status}`);
+      }
+
+      let data = await response.json();
+
+      // Handle both array and {data: array} formats
+      if (data.data && Array.isArray(data.data)) {
+        data = data.data;
+      }
+
+      if (!Array.isArray(data)) {
+        return ctx.badRequest("API must return an array or {data: array}");
+      }
+
+      ctx.body = data;
+    } catch (error) {
+      strapi.log.error("Proxy fetch error:", error.message);
+      ctx.internalServerError("Failed to fetch options");
+    }
+  },
+};

package/server/index.js

@@ -0,0 +1,9 @@
+const register = require("./register");
+const routes = require("./routes");
+const controllers = require("./controllers");
+
+module.exports = {
+  register,
+  routes,
+  controllers,
+};

package/server/register.js

@@ -0,0 +1,8 @@
+module.exports = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "api-select",
+    plugin: "api-select",
+    type: "json",
+    inputSize: { default: 8, isResizable: true },
+  });
+};

package/server/routes/index.js

@@ -0,0 +1,7 @@
+module.exports = [
+  {
+    method: "GET",
+    path: "/fetch",
+    handler: "proxy.fetch",
+  },
+];

package/strapi-admin.js

@@ -0,0 +1 @@
+export { default } from "./admin/src";

package/strapi-server.js

@@ -0,0 +1 @@
+module.exports = require("./server");