@apexcura/ui-components 0.0.7-Beta5 → 0.0.7-Beta7

package/dist/index.d.mts

@@ -16,6 +16,7 @@ type ElementType = {
     name?: string;
     suffix?: React.ReactNode;
     maxLength?: number;
+    fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
 };
 
@@ -57,6 +58,10 @@ interface ElementExecuterProps extends ElementType {
 }
 declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
+declare const SingleSelectElement: () => React$1.JSX.Element;
+
+declare const MultipleSelectElement: () => React$1.JSX.Element;
+
 declare const ButtonElement: () => React$1.JSX.Element;
 
-export { ButtonElement, CheckboxElement, CkEditor, NumberElement, PasswordElement, RadioElement, SelectElement, TextElement, TextareaElement };
+export { ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -16,6 +16,7 @@ type ElementType = {
     name?: string;
     suffix?: React.ReactNode;
     maxLength?: number;
+    fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
 };
 
@@ -57,6 +58,10 @@ interface ElementExecuterProps extends ElementType {
 }
 declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
+declare const SingleSelectElement: () => React$1.JSX.Element;
+
+declare const MultipleSelectElement: () => React$1.JSX.Element;
+
 declare const ButtonElement: () => React$1.JSX.Element;
 
-export { ButtonElement, CheckboxElement, CkEditor, NumberElement, PasswordElement, RadioElement, SelectElement, TextElement, TextareaElement };
+export { ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.js

@@ -33,10 +33,12 @@ __export(src_exports, {
   ButtonElement: () => ButtonElement,
   CheckboxElement: () => CheckboxElement,
   CkEditor: () => CkEditor,
+  MultipleSelectElement: () => MultipleSelectElement,
   NumberElement: () => NumberElement,
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
+  SingleSelectElement: () => SingleSelectElement,
   TextElement: () => TextElement,
   TextareaElement: () => TextareaElement
 });
@@ -149,11 +151,6 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 var import_react5 = __toESM(require("react"));
 var import_antd5 = require("antd");
-var options = [
-  { label: "female", value: "female" },
-  { label: "male", value: "male" },
-  { label: "other", value: "other" }
-];
 var labelRender = (props) => {
   const { label, value } = props;
   if (label) {
@@ -162,7 +159,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -171,7 +168,7 @@ var SelectElement = (props) => {
     import_antd5.Select,
     {
       labelRender,
-      options,
+      options: props.fieldNames,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -181,7 +178,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
@@ -190,12 +187,12 @@ var SelectElement = (props) => {
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
 var RadioElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange3 = (e) => {
     if (props && props.onChange) {
       props.onChange(e.target.value);
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange3 }, "D"));
 };
 
 // src/Components/Checkbox.tsx
@@ -207,7 +204,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const handleChange = (list) => {
+  const handleChange3 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       props.onChange(list);
@@ -239,7 +236,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange3
     }
   ));
 };
@@ -261,7 +258,7 @@ var CkEditor = (props) => {
   return /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement(
     import_tinymce_react.Editor,
     {
-      apiKey: "your-api-key",
+      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
         if (editor)
           editorRef.current = editor;
@@ -297,19 +294,95 @@ var CkEditor = (props) => {
   ), /* @__PURE__ */ import_react9.default.createElement("button", { onClick: log }, "Log editor content"));
 };
 
-// src/Components/Button.tsx
+// src/Components/Select/SingleSelectElement.tsx
 var import_react10 = __toESM(require("react"));
 var import_antd8 = require("antd");
-var ButtonElement = () => /* @__PURE__ */ import_react10.default.createElement(import_antd8.Flex, { gap: "small" }, /* @__PURE__ */ import_react10.default.createElement(import_antd8.Button, { type: "primary" }, "Primary Button"));
+var onSearch = (value) => {
+  console.log("search:", value);
+};
+var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
+var handleFocus = () => {
+};
+var SingleSelectElement = () => {
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_antd8.Select,
+    {
+      showSearch: true,
+      placeholder: "Select a person",
+      optionFilterProp: "children",
+      onChange: handleChange,
+      onSearch,
+      filterOption,
+      onFocus: handleFocus,
+      options: []
+    }
+  );
+};
+
+// src/Components/Select/MultipleSelectElement.tsx
+var import_react11 = __toESM(require("react"));
+var import_antd9 = require("antd");
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_antd9.Select,
+    {
+      mode: "multiple",
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ import_react11.default.createElement(import_antd9.Space, null, /* @__PURE__ */ import_react11.default.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
+    }
+  );
+};
+
+// src/Components/Button.tsx
+var import_react12 = __toESM(require("react"));
+var import_antd10 = require("antd");
+var ButtonElement = () => /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, { gap: "small" }, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { type: "primary" }, "Primary Button"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ButtonElement,
   CheckboxElement,
   CkEditor,
+  MultipleSelectElement,
   NumberElement,
   PasswordElement,
   RadioElement,
   SelectElement,
+  SingleSelectElement,
   TextElement,
   TextareaElement
 });

package/dist/index.mjs

@@ -105,11 +105,6 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 import React5 from "react";
 import { Select } from "antd";
-var options = [
-  { label: "female", value: "female" },
-  { label: "male", value: "male" },
-  { label: "other", value: "other" }
-];
 var labelRender = (props) => {
   const { label, value } = props;
   if (label) {
@@ -118,7 +113,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ React5.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -127,7 +122,7 @@ var SelectElement = (props) => {
     Select,
     {
       labelRender,
-      options,
+      options: props.fieldNames,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -137,7 +132,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
@@ -146,12 +141,12 @@ var SelectElement = (props) => {
 import React6 from "react";
 import { Radio } from "antd";
 var RadioElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange3 = (e) => {
     if (props && props.onChange) {
       props.onChange(e.target.value);
     }
   };
-  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange3 }, "D"));
 };
 
 // src/Components/Checkbox.tsx
@@ -163,7 +158,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = useState2(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const handleChange = (list) => {
+  const handleChange3 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       props.onChange(list);
@@ -195,7 +190,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange3
     }
   ));
 };
@@ -217,7 +212,7 @@ var CkEditor = (props) => {
   return /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
     Editor,
     {
-      apiKey: "your-api-key",
+      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
       onInit: (_evt, editor) => {
         if (editor)
           editorRef.current = editor;
@@ -253,18 +248,94 @@ var CkEditor = (props) => {
   ), /* @__PURE__ */ React8.createElement("button", { onClick: log }, "Log editor content"));
 };
 
-// src/Components/Button.tsx
+// src/Components/Select/SingleSelectElement.tsx
 import React9 from "react";
+import { Select as Select2 } from "antd";
+var onSearch = (value) => {
+  console.log("search:", value);
+};
+var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
+var handleFocus = () => {
+};
+var SingleSelectElement = () => {
+  return /* @__PURE__ */ React9.createElement(
+    Select2,
+    {
+      showSearch: true,
+      placeholder: "Select a person",
+      optionFilterProp: "children",
+      onChange: handleChange,
+      onSearch,
+      filterOption,
+      onFocus: handleFocus,
+      options: []
+    }
+  );
+};
+
+// src/Components/Select/MultipleSelectElement.tsx
+import React10 from "react";
+import { Select as Select3, Space as Space2 } from "antd";
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
+  return /* @__PURE__ */ React10.createElement(
+    Select3,
+    {
+      mode: "multiple",
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ React10.createElement(Space2, null, /* @__PURE__ */ React10.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
+    }
+  );
+};
+
+// src/Components/Button.tsx
+import React11 from "react";
 import { Button as Button2, Flex as Flex2 } from "antd";
-var ButtonElement = () => /* @__PURE__ */ React9.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React9.createElement(Button2, { type: "primary" }, "Primary Button"));
+var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React11.createElement(Button2, { type: "primary" }, "Primary Button"));
 export {
   ButtonElement,
   CheckboxElement,
   CkEditor,
+  MultipleSelectElement,
   NumberElement,
   PasswordElement,
   RadioElement,
   SelectElement,
+  SingleSelectElement,
   TextElement,
   TextareaElement
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.7-Beta5",
+  "version": "0.0.7-Beta7",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",