@tunghtml/strapi-plugin-multiselect-checkbox 1.0.1 → 1.0.3

package/dist/_chunks/index-CG0vMCYh.mjs

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, Flex, Typography, Box, Checkbox } from "@strapi/design-system";
+import { useField } from "@strapi/strapi/admin";
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+import styled from "styled-components";
+const CapitalizedText = styled.p`
+  &::first-letter {
+    text-transform: uppercase;
+  }
+`;
+const MultiSelect = ({
+  hint,
+  label,
+  name,
+  intlLabel,
+  required,
+  attribute,
+  description,
+  placeholder,
+  disabled
+}) => {
+  const { formatMessage } = useIntl();
+  const { onChange, value, error } = useField(name);
+  const possibleOptions = useMemo(() => {
+    return (attribute["options"] || []).map((option) => {
+      const [label2, value2] = [...option.split(/:(.*)/s), option];
+      if (!label2 || !value2) return null;
+      return { label: label2, value: value2 };
+    }).filter(Boolean);
+  }, [attribute]);
+  const sanitizedValue = useMemo(() => {
+    let parsedValue;
+    try {
+      parsedValue = typeof value !== "string" ? value || [] : JSON.parse(value || "[]");
+    } catch (e) {
+      parsedValue = [];
+    }
+    return Array.isArray(parsedValue) ? parsedValue.map(
+      (val) => possibleOptions.find((option) => option.value === val)
+    ).filter((option) => !!option) : [];
+  }, [value, possibleOptions]);
+  const fieldError = useMemo(() => {
+    if (error) return error;
+    const { min, max } = attribute;
+    const hasNoOptions = required && !possibleOptions.length;
+    const belowMin = sanitizedValue.length < min && (required || sanitizedValue.length > 0);
+    const aboveMax = sanitizedValue.length > max;
+    if (hasNoOptions) {
+      return "No options, but field is required";
+    }
+    if (belowMin) {
+      return `Select at least ${min} options`;
+    }
+    if (aboveMax) {
+      return `Select at most ${max} options`;
+    }
+    return null;
+  }, [required, error, possibleOptions, sanitizedValue, attribute]);
+  const handleCheckboxChange = (optionValue, isChecked) => {
+    let newValues;
+    if (isChecked) {
+      newValues = [...sanitizedValue.map((v) => v.value), optionValue];
+    } else {
+      newValues = sanitizedValue.map((v) => v.value).filter((v) => v !== optionValue);
+    }
+    onChange({
+      target: {
+        name,
+        value: newValues.length ? JSON.stringify(newValues) : null,
+        type: attribute.type
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    Field.Root,
+    {
+      hint: description?.id ? formatMessage(description) : hint,
+      error: fieldError,
+      name,
+      required,
+      children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: intlLabel?.id ? formatMessage(intlLabel) : label }),
+        possibleOptions.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", children: "No options available. Please configure options in the field settings." }) : /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Flex, { gap: 2, direction: "column", alignItems: "stretch", children: possibleOptions.map((option) => {
+          const isChecked = sanitizedValue.some((v) => v.value === option.value);
+          const isDisabled = disabled || sanitizedValue.length >= attribute["max"] && !isChecked;
+          return /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isChecked,
+              disabled: isDisabled,
+              onCheckedChange: (checked) => handleCheckboxChange(option.value, checked),
+              children: /* @__PURE__ */ jsx(CapitalizedText, { children: formatMessage({
+                id: option.label,
+                defaultMessage: option.label
+              }) })
+            },
+            option.value
+          );
+        }) }) }),
+        /* @__PURE__ */ jsx(Field.Hint, {}),
+        /* @__PURE__ */ jsx(Field.Error, {})
+      ] })
+    }
+  );
+};
+export {
+  MultiSelect as default
+};

package/dist/_chunks/index-DRjsLClm.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const react = require("react");
+const reactIntl = require("react-intl");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const CapitalizedText = styled__default.default.p`
+  &::first-letter {
+    text-transform: uppercase;
+  }
+`;
+const MultiSelect = ({
+  hint,
+  label,
+  name,
+  intlLabel,
+  required,
+  attribute,
+  description,
+  placeholder,
+  disabled
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { onChange, value, error } = admin.useField(name);
+  const possibleOptions = react.useMemo(() => {
+    return (attribute["options"] || []).map((option) => {
+      const [label2, value2] = [...option.split(/:(.*)/s), option];
+      if (!label2 || !value2) return null;
+      return { label: label2, value: value2 };
+    }).filter(Boolean);
+  }, [attribute]);
+  const sanitizedValue = react.useMemo(() => {
+    let parsedValue;
+    try {
+      parsedValue = typeof value !== "string" ? value || [] : JSON.parse(value || "[]");
+    } catch (e) {
+      parsedValue = [];
+    }
+    return Array.isArray(parsedValue) ? parsedValue.map(
+      (val) => possibleOptions.find((option) => option.value === val)
+    ).filter((option) => !!option) : [];
+  }, [value, possibleOptions]);
+  const fieldError = react.useMemo(() => {
+    if (error) return error;
+    const { min, max } = attribute;
+    const hasNoOptions = required && !possibleOptions.length;
+    const belowMin = sanitizedValue.length < min && (required || sanitizedValue.length > 0);
+    const aboveMax = sanitizedValue.length > max;
+    if (hasNoOptions) {
+      return "No options, but field is required";
+    }
+    if (belowMin) {
+      return `Select at least ${min} options`;
+    }
+    if (aboveMax) {
+      return `Select at most ${max} options`;
+    }
+    return null;
+  }, [required, error, possibleOptions, sanitizedValue, attribute]);
+  const handleCheckboxChange = (optionValue, isChecked) => {
+    let newValues;
+    if (isChecked) {
+      newValues = [...sanitizedValue.map((v) => v.value), optionValue];
+    } else {
+      newValues = sanitizedValue.map((v) => v.value).filter((v) => v !== optionValue);
+    }
+    onChange({
+      target: {
+        name,
+        value: newValues.length ? JSON.stringify(newValues) : null,
+        type: attribute.type
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Field.Root,
+    {
+      hint: description?.id ? formatMessage(description) : hint,
+      error: fieldError,
+      name,
+      required,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: intlLabel?.id ? formatMessage(intlLabel) : label }),
+        possibleOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: "No options available. Please configure options in the field settings." }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, direction: "column", alignItems: "stretch", children: possibleOptions.map((option) => {
+          const isChecked = sanitizedValue.some((v) => v.value === option.value);
+          const isDisabled = disabled || sanitizedValue.length >= attribute["max"] && !isChecked;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Checkbox,
+            {
+              checked: isChecked,
+              disabled: isDisabled,
+              onCheckedChange: (checked) => handleCheckboxChange(option.value, checked),
+              children: /* @__PURE__ */ jsxRuntime.jsx(CapitalizedText, { children: formatMessage({
+                id: option.label,
+                defaultMessage: option.label
+              }) })
+            },
+            option.value
+          );
+        }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+      ] })
+    }
+  );
+};
+exports.default = MultiSelect;

package/dist/admin/index.js

@@ -1,3 +1,159 @@
 "use strict";
-const index = require("../_chunks/index-dXy7p2G8.js");
-module.exports = index.index;
+const react = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "multiselect-checkbox";
+const Initializer = ({ setPlugin }) => {
+  const ref = react.useRef(setPlugin);
+  react.useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const IconBox = styled__default.default(designSystem.Flex)`
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const PluginIcon = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) });
+};
+const prefixKey = (key) => `${PLUGIN_ID}.${key}`;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "multiselect-checkbox",
+      pluginId: `${PLUGIN_ID}`,
+      type: "text",
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${PLUGIN_ID}.label`,
+        defaultMessage: "Multiselect Checkbox"
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.description`,
+        defaultMessage: "Select multiple options using checkboxes. Data stored as JSON array."
+      },
+      components: {
+        Input: async () => Promise.resolve().then(() => require("../_chunks/index-DRjsLClm.js"))
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: null,
+            items: [
+              {
+                name: "options",
+                type: "textarea-enum",
+                intlLabel: {
+                  id: prefixKey("options.available-options.label"),
+                  defaultMessage: "Options (one per line)"
+                },
+                description: {
+                  id: prefixKey("options.available-options.description"),
+                  defaultMessage: "Enter one option per line."
+                },
+                placeholder: {
+                  id: prefixKey("options.available-options.placeholder"),
+                  defaultMessage: "Option 1\nOption 2\nOption 3"
+                }
+              },
+              {
+                name: "default",
+                type: "json",
+                intlLabel: {
+                  id: prefixKey("options.default.label"),
+                  defaultMessage: "Default value"
+                },
+                description: {
+                  id: prefixKey("options.default.description"),
+                  defaultMessage: 'Set the default value in JSON format, ex: ["Option 1", "Option 2"]'
+                },
+                defaultValue: "[]"
+              }
+            ]
+          }
+        ],
+        //
+        // Strapi default advanced options.
+        //
+        advanced: [
+          {
+            sectionTitle: {
+              id: "global.settings",
+              defaultMessage: "Settings"
+            },
+            items: [
+              {
+                name: "required",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.requiredField",
+                  defaultMessage: "Required field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.requiredField.description",
+                  defaultMessage: "You won't be able to create an entry if this field is empty"
+                }
+              },
+              {
+                name: "private",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.privateField",
+                  defaultMessage: "Private field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.privateField.description",
+                  defaultMessage: "This field will not show up in the API response"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    });
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("../_chunks/en-pkXKBXLR.js")) }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
+module.exports = index;

package/dist/admin/index.mjs

@@ -1,4 +1,158 @@
-import { i } from "../_chunks/index-Wx6rXcrm.mjs";
+import { useRef, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Flex } from "@strapi/design-system";
+import { Check } from "@strapi/icons";
+import styled from "styled-components";
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "multiselect-checkbox";
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const IconBox = styled(Flex)`
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+const PluginIcon = () => {
+  return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(Check, {}) });
+};
+const prefixKey = (key) => `${PLUGIN_ID}.${key}`;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "multiselect-checkbox",
+      pluginId: `${PLUGIN_ID}`,
+      type: "text",
+      icon: PluginIcon,
+      intlLabel: {
+        id: `${PLUGIN_ID}.label`,
+        defaultMessage: "Multiselect Checkbox"
+      },
+      intlDescription: {
+        id: `${PLUGIN_ID}.description`,
+        defaultMessage: "Select multiple options using checkboxes. Data stored as JSON array."
+      },
+      components: {
+        Input: async () => import("../_chunks/index-CG0vMCYh.mjs")
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: null,
+            items: [
+              {
+                name: "options",
+                type: "textarea-enum",
+                intlLabel: {
+                  id: prefixKey("options.available-options.label"),
+                  defaultMessage: "Options (one per line)"
+                },
+                description: {
+                  id: prefixKey("options.available-options.description"),
+                  defaultMessage: "Enter one option per line."
+                },
+                placeholder: {
+                  id: prefixKey("options.available-options.placeholder"),
+                  defaultMessage: "Option 1\nOption 2\nOption 3"
+                }
+              },
+              {
+                name: "default",
+                type: "json",
+                intlLabel: {
+                  id: prefixKey("options.default.label"),
+                  defaultMessage: "Default value"
+                },
+                description: {
+                  id: prefixKey("options.default.description"),
+                  defaultMessage: 'Set the default value in JSON format, ex: ["Option 1", "Option 2"]'
+                },
+                defaultValue: "[]"
+              }
+            ]
+          }
+        ],
+        //
+        // Strapi default advanced options.
+        //
+        advanced: [
+          {
+            sectionTitle: {
+              id: "global.settings",
+              defaultMessage: "Settings"
+            },
+            items: [
+              {
+                name: "required",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.requiredField",
+                  defaultMessage: "Required field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.requiredField.description",
+                  defaultMessage: "You won't be able to create an entry if this field is empty"
+                }
+              },
+              {
+                name: "private",
+                type: "checkbox",
+                intlLabel: {
+                  id: "content-type-builder.form.attribute.item.privateField",
+                  defaultMessage: "Private field"
+                },
+                description: {
+                  id: "content-type-builder.form.attribute.item.privateField.description",
+                  defaultMessage: "This field will not show up in the API response"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    });
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+  },
+  async registerTrads({ locales }) {
+    return Promise.all(
+      locales.map(async (locale) => {
+        try {
+          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("../_chunks/en-tWwdhLO5.mjs") }), `./translations/${locale}.json`, 3);
+          return { data, locale };
+        } catch {
+          return { data: {}, locale };
+        }
+      })
+    );
+  }
+};
 export {
-  i as default
+  index as default
 };

package/dist/admin/src/components/Multiselect/index.d.ts

@@ -1,23 +1,12 @@
-import type { FieldValue, InputProps } from '@strapi/strapi/admin';
-/** The properties for our `Multiselect` component below. */
-type Props = InputProps & FieldValue & {
-    attribute: {
-        options: string[] | undefined;
-    };
-};
-/**
- * `Multiselect` is a custom form component that allows users to select multiple options
- * via checkboxes. The selected values are stored as an array of strings.
- *
- * ### Props:
- * - `attribute`: An object containing the list of selectable `options: string[]`.
- * - `disabled`: (Optional) Disables all checkboxes when `true`.
- * - `hint`: (Optional) A string providing contextual help, shown below the field.
- * - `name`: The name of the form field (used in the synthetic `onChange` event).
- * - `label`: A label for the field, displayed above the checkboxes.
- * - `onChange`: A handler that receives the updated selection as an array of strings.
- * - `required`: (Optional) Indicates if the field is required.
- * - `value`: The current value as an array of selected options.
- */
-declare const Multiselect: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default Multiselect;
+declare const MultiSelect: ({ hint, label, name, intlLabel, required, attribute, description, placeholder, disabled, }: {
+    hint: string;
+    label: string;
+    name: string;
+    intlLabel: any;
+    required: boolean;
+    attribute: any;
+    description: any;
+    placeholder: string;
+    disabled: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelect;

package/dist/server/index.js

@@ -19,12 +19,8 @@ const register = ({ strapi }) => {
   strapi.customFields.register({
     name: "multiselect-checkbox",
     plugin: "multiselect-checkbox",
-    // The data type stored in the database - JSON array
-    type: "json",
-    inputSize: {
-      default: 12,
-      isResizable: true
-    }
+    // The data type stored in the database - text (serialized JSON)
+    type: "text"
   });
 };
 const contentAPIRoutes = [];

package/dist/server/index.mjs

@@ -18,12 +18,8 @@ const register = ({ strapi }) => {
   strapi.customFields.register({
     name: "multiselect-checkbox",
     plugin: "multiselect-checkbox",
-    // The data type stored in the database - JSON array
-    type: "json",
-    inputSize: {
-      default: 12,
-      isResizable: true
-    }
+    // The data type stored in the database - text (serialized JSON)
+    type: "text"
   });
 };
 const contentAPIRoutes = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tunghtml/strapi-plugin-multiselect-checkbox",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A Strapi v5 custom field plugin with checkbox UI that stores selected values as an array of strings (JSON type) instead of comma-separated strings.",
   "keywords": [
     "strapi",

package/dist/_chunks/index-BIpQIwH7.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const designSystem = require("@strapi/design-system");
-const reactIntl = require("react-intl");
-const styled = require("styled-components");
-const index = require("./index-dXy7p2G8.js");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const config = {
-  /**
-   * The default options used as fallbacks in case the user-defined values are missing.
-   */
-  defaultOptions: []
-};
-const CapitalizedText = styled__default.default.p`
-  &::first-letter {
-    text-transform: uppercase;
-  }
-`;
-const EmptyState = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: index.prefixKey("empty-state.text") }) });
-};
-const Multiselect = (props) => {
-  const { attribute, disabled, hint, label, name, onChange, required, type, value } = props;
-  const availableOptions = attribute?.options || config.defaultOptions;
-  const selectedOptions = Array.isArray(value) ? value : [];
-  const updateValue = (value2) => onChange({ target: { name, value: value2, type } });
-  const updateSelectedOptions = (option, isSelected) => {
-    const nextSelectedOptions = isSelected ? selectedOptions.concat(option) : selectedOptions.filter((selectedOption) => selectedOption !== option);
-    const sortedNextSelectedOptions = nextSelectedOptions.sort(
-      (lhs, rhs) => availableOptions.indexOf(lhs) - availableOptions.indexOf(rhs)
-    );
-    updateValue(sortedNextSelectedOptions);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { hint, name, required, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
-    availableOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, {}) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, direction: "column", alignItems: "leading", children: availableOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Checkbox,
-      {
-        checked: selectedOptions.includes(option),
-        disabled: disabled ?? false,
-        onCheckedChange: (isSelected) => updateSelectedOptions(option, isSelected),
-        children: /* @__PURE__ */ jsxRuntime.jsx(CapitalizedText, { children: option })
-      },
-      option
-    )) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
-  ] });
-};
-exports.default = Multiselect;

package/dist/_chunks/index-Wx6rXcrm.mjs

@@ -1,159 +0,0 @@
-import { useRef, useEffect } from "react";
-import { jsx } from "react/jsx-runtime";
-import { Flex } from "@strapi/design-system";
-import { Check } from "@strapi/icons";
-import styled from "styled-components";
-const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
-  const v = glob[path];
-  if (v) {
-    return typeof v === "function" ? v() : Promise.resolve(v);
-  }
-  return new Promise((_, reject) => {
-    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
-      reject.bind(
-        null,
-        new Error(
-          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
-        )
-      )
-    );
-  });
-};
-const PLUGIN_ID = "multiselect-checkbox";
-const Initializer = ({ setPlugin }) => {
-  const ref = useRef(setPlugin);
-  useEffect(() => {
-    ref.current(PLUGIN_ID);
-  }, []);
-  return null;
-};
-const IconBox = styled(Flex)`
-  background-color: #f0f0ff; /* primary100 */
-  border: 1px solid #d9d8ff; /* primary200 */
-
-  svg > path {
-    fill: #4945ff; /* primary600 */
-  }
-`;
-const PluginIcon = () => {
-  return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(Check, {}) });
-};
-const prefixKey = (key) => `${PLUGIN_ID}.${key}`;
-const index = {
-  register(app) {
-    app.customFields.register({
-      name: "multiselect-checkbox",
-      pluginId: `${PLUGIN_ID}`,
-      type: "json",
-      icon: PluginIcon,
-      intlLabel: {
-        id: `${PLUGIN_ID}.label`,
-        defaultMessage: "Multiselect Checkbox"
-      },
-      intlDescription: {
-        id: `${PLUGIN_ID}.description`,
-        defaultMessage: "Select multiple options using checkboxes. Data stored as JSON array."
-      },
-      components: {
-        Input: async () => import("./index-mocR0IHA.mjs")
-      },
-      options: {
-        base: [
-          {
-            sectionTitle: null,
-            items: [
-              {
-                name: "options",
-                type: "textarea-enum",
-                intlLabel: {
-                  id: prefixKey("options.available-options.label"),
-                  defaultMessage: "Options (one per line)"
-                },
-                description: {
-                  id: prefixKey("options.available-options.description"),
-                  defaultMessage: "Enter one option per line."
-                },
-                placeholder: {
-                  id: prefixKey("options.available-options.placeholder"),
-                  defaultMessage: "Option 1\nOption 2\nOption 3"
-                }
-              },
-              {
-                name: "default",
-                type: "json",
-                intlLabel: {
-                  id: prefixKey("options.default.label"),
-                  defaultMessage: "Default value"
-                },
-                description: {
-                  id: prefixKey("options.default.description"),
-                  defaultMessage: 'Set the default value in JSON format, ex: ["Option 1", "Option 2"]'
-                },
-                defaultValue: "[]"
-              }
-            ]
-          }
-        ],
-        //
-        // Strapi default advanced options.
-        //
-        advanced: [
-          {
-            sectionTitle: {
-              id: "global.settings",
-              defaultMessage: "Settings"
-            },
-            items: [
-              {
-                name: "required",
-                type: "checkbox",
-                intlLabel: {
-                  id: "content-type-builder.form.attribute.item.requiredField",
-                  defaultMessage: "Required field"
-                },
-                description: {
-                  id: "content-type-builder.form.attribute.item.requiredField.description",
-                  defaultMessage: "You won't be able to create an entry if this field is empty"
-                }
-              },
-              {
-                name: "private",
-                type: "checkbox",
-                intlLabel: {
-                  id: "content-type-builder.form.attribute.item.privateField",
-                  defaultMessage: "Private field"
-                },
-                description: {
-                  id: "content-type-builder.form.attribute.item.privateField.description",
-                  defaultMessage: "This field will not show up in the API response"
-                }
-              }
-            ]
-          }
-        ]
-      }
-    });
-    app.registerPlugin({
-      id: PLUGIN_ID,
-      initializer: Initializer,
-      isReady: false,
-      name: PLUGIN_ID
-    });
-  },
-  async registerTrads({ locales }) {
-    return Promise.all(
-      locales.map(async (locale) => {
-        try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-tWwdhLO5.mjs") }), `./translations/${locale}.json`, 3);
-          return { data, locale };
-        } catch {
-          return { data: {}, locale };
-        }
-      })
-    );
-  }
-};
-export {
-  index as i,
-  prefixKey as p
-};

package/dist/_chunks/index-dXy7p2G8.js

@@ -1,160 +0,0 @@
-"use strict";
-const react = require("react");
-const jsxRuntime = require("react/jsx-runtime");
-const designSystem = require("@strapi/design-system");
-const icons = require("@strapi/icons");
-const styled = require("styled-components");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const styled__default = /* @__PURE__ */ _interopDefault(styled);
-const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
-  const v = glob[path];
-  if (v) {
-    return typeof v === "function" ? v() : Promise.resolve(v);
-  }
-  return new Promise((_, reject) => {
-    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
-      reject.bind(
-        null,
-        new Error(
-          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
-        )
-      )
-    );
-  });
-};
-const PLUGIN_ID = "multiselect-checkbox";
-const Initializer = ({ setPlugin }) => {
-  const ref = react.useRef(setPlugin);
-  react.useEffect(() => {
-    ref.current(PLUGIN_ID);
-  }, []);
-  return null;
-};
-const IconBox = styled__default.default(designSystem.Flex)`
-  background-color: #f0f0ff; /* primary100 */
-  border: 1px solid #d9d8ff; /* primary200 */
-
-  svg > path {
-    fill: #4945ff; /* primary600 */
-  }
-`;
-const PluginIcon = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}) });
-};
-const prefixKey = (key) => `${PLUGIN_ID}.${key}`;
-const index = {
-  register(app) {
-    app.customFields.register({
-      name: "multiselect-checkbox",
-      pluginId: `${PLUGIN_ID}`,
-      type: "json",
-      icon: PluginIcon,
-      intlLabel: {
-        id: `${PLUGIN_ID}.label`,
-        defaultMessage: "Multiselect Checkbox"
-      },
-      intlDescription: {
-        id: `${PLUGIN_ID}.description`,
-        defaultMessage: "Select multiple options using checkboxes. Data stored as JSON array."
-      },
-      components: {
-        Input: async () => Promise.resolve().then(() => require("./index-BIpQIwH7.js"))
-      },
-      options: {
-        base: [
-          {
-            sectionTitle: null,
-            items: [
-              {
-                name: "options",
-                type: "textarea-enum",
-                intlLabel: {
-                  id: prefixKey("options.available-options.label"),
-                  defaultMessage: "Options (one per line)"
-                },
-                description: {
-                  id: prefixKey("options.available-options.description"),
-                  defaultMessage: "Enter one option per line."
-                },
-                placeholder: {
-                  id: prefixKey("options.available-options.placeholder"),
-                  defaultMessage: "Option 1\nOption 2\nOption 3"
-                }
-              },
-              {
-                name: "default",
-                type: "json",
-                intlLabel: {
-                  id: prefixKey("options.default.label"),
-                  defaultMessage: "Default value"
-                },
-                description: {
-                  id: prefixKey("options.default.description"),
-                  defaultMessage: 'Set the default value in JSON format, ex: ["Option 1", "Option 2"]'
-                },
-                defaultValue: "[]"
-              }
-            ]
-          }
-        ],
-        //
-        // Strapi default advanced options.
-        //
-        advanced: [
-          {
-            sectionTitle: {
-              id: "global.settings",
-              defaultMessage: "Settings"
-            },
-            items: [
-              {
-                name: "required",
-                type: "checkbox",
-                intlLabel: {
-                  id: "content-type-builder.form.attribute.item.requiredField",
-                  defaultMessage: "Required field"
-                },
-                description: {
-                  id: "content-type-builder.form.attribute.item.requiredField.description",
-                  defaultMessage: "You won't be able to create an entry if this field is empty"
-                }
-              },
-              {
-                name: "private",
-                type: "checkbox",
-                intlLabel: {
-                  id: "content-type-builder.form.attribute.item.privateField",
-                  defaultMessage: "Private field"
-                },
-                description: {
-                  id: "content-type-builder.form.attribute.item.privateField.description",
-                  defaultMessage: "This field will not show up in the API response"
-                }
-              }
-            ]
-          }
-        ]
-      }
-    });
-    app.registerPlugin({
-      id: PLUGIN_ID,
-      initializer: Initializer,
-      isReady: false,
-      name: PLUGIN_ID
-    });
-  },
-  async registerTrads({ locales }) {
-    return Promise.all(
-      locales.map(async (locale) => {
-        try {
-          const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-pkXKBXLR.js")) }), `./translations/${locale}.json`, 3);
-          return { data, locale };
-        } catch {
-          return { data: {}, locale };
-        }
-      })
-    );
-  }
-};
-exports.index = index;
-exports.prefixKey = prefixKey;

package/dist/_chunks/index-mocR0IHA.mjs

@@ -1,49 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Field, Box, Flex, Checkbox, Typography } from "@strapi/design-system";
-import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
-import { p as prefixKey } from "./index-Wx6rXcrm.mjs";
-const config = {
-  /**
-   * The default options used as fallbacks in case the user-defined values are missing.
-   */
-  defaultOptions: []
-};
-const CapitalizedText = styled.p`
-  &::first-letter {
-    text-transform: uppercase;
-  }
-`;
-const EmptyState = () => {
-  return /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral400", children: /* @__PURE__ */ jsx(FormattedMessage, { id: prefixKey("empty-state.text") }) });
-};
-const Multiselect = (props) => {
-  const { attribute, disabled, hint, label, name, onChange, required, type, value } = props;
-  const availableOptions = attribute?.options || config.defaultOptions;
-  const selectedOptions = Array.isArray(value) ? value : [];
-  const updateValue = (value2) => onChange({ target: { name, value: value2, type } });
-  const updateSelectedOptions = (option, isSelected) => {
-    const nextSelectedOptions = isSelected ? selectedOptions.concat(option) : selectedOptions.filter((selectedOption) => selectedOption !== option);
-    const sortedNextSelectedOptions = nextSelectedOptions.sort(
-      (lhs, rhs) => availableOptions.indexOf(lhs) - availableOptions.indexOf(rhs)
-    );
-    updateValue(sortedNextSelectedOptions);
-  };
-  return /* @__PURE__ */ jsxs(Field.Root, { hint, name, required, children: [
-    /* @__PURE__ */ jsx(Field.Label, { children: label }),
-    availableOptions.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Flex, { gap: 2, direction: "column", alignItems: "leading", children: availableOptions.map((option) => /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: selectedOptions.includes(option),
-        disabled: disabled ?? false,
-        onCheckedChange: (isSelected) => updateSelectedOptions(option, isSelected),
-        children: /* @__PURE__ */ jsx(CapitalizedText, { children: option })
-      },
-      option
-    )) }) }),
-    /* @__PURE__ */ jsx(Field.Hint, {})
-  ] });
-};
-export {
-  Multiselect as default
-};