@apexcura/ui-components 0.0.8-Beta0 → 0.0.8-Beta10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ApexCura
+
+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/dist/index.d.mts

@@ -18,8 +18,7 @@ type ElementType = {
     maxLength?: number;
     fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
-    options: any[];
-    onFocusHandler: () => void;
+    dropDownOptions?: any[];
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -62,7 +61,7 @@ declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
 declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const MultipleSelectElement: () => React$1.JSX.Element;
+declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const ButtonElement: () => React$1.JSX.Element;
 

package/dist/index.d.ts

@@ -18,8 +18,7 @@ type ElementType = {
     maxLength?: number;
     fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
-    options: any[];
-    onFocusHandler: () => void;
+    dropDownOptions?: any[];
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -62,7 +61,7 @@ declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
 declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const MultipleSelectElement: () => React$1.JSX.Element;
+declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const ButtonElement: () => React$1.JSX.Element;
 

package/dist/index.js

@@ -159,7 +159,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange3 = (value) => {
+  const handleChange = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -178,7 +178,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange3
+      onChange: handleChange
     }
   );
 };
@@ -187,12 +187,12 @@ var SelectElement = (props) => {
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
 var RadioElement = (props) => {
-  const handleChange3 = (e) => {
+  const handleChange = (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: 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"));
+  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"));
 };
 
 // src/Components/Checkbox.tsx
@@ -204,7 +204,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const handleChange3 = (list) => {
+  const handleChange = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       props.onChange(list);
@@ -236,7 +236,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange3
+      onChange: handleChange
     }
   ));
 };
@@ -301,9 +301,12 @@ var onSearch = (value) => {
   console.log("search:", value);
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
-var handleChange = () => {
-};
 var SingleSelectElement = (props) => {
+  const handleChange = (value) => {
+    if (props.onChange) {
+      props.onChange(value);
+    }
+  };
   return /* @__PURE__ */ import_react10.default.createElement(
     import_antd8.Select,
     {
@@ -313,8 +316,7 @@ var SingleSelectElement = (props) => {
       onChange: handleChange,
       onSearch,
       filterOption,
-      onFocus: props.onFocusHandler,
-      options: props.options
+      options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title) }))
     }
   );
 };
@@ -322,46 +324,19 @@ var SingleSelectElement = (props) => {
 // 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 = () => {
+var MultipleSelectElement = (props) => {
+  const handleChange = (value) => {
+    if (props.onChange) {
+      props.onChange(value);
+    }
+  };
   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)
+      placeholder: props.placeholder,
+      onChange: handleChange,
+      options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title) }))
     }
   );
 };

package/dist/index.mjs

@@ -113,7 +113,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ React5.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange3 = (value) => {
+  const handleChange = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -132,7 +132,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange3
+      onChange: handleChange
     }
   );
 };
@@ -141,12 +141,12 @@ var SelectElement = (props) => {
 import React6 from "react";
 import { Radio } from "antd";
 var RadioElement = (props) => {
-  const handleChange3 = (e) => {
+  const handleChange = (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: 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"));
+  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"));
 };
 
 // src/Components/Checkbox.tsx
@@ -158,7 +158,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = useState2(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const handleChange3 = (list) => {
+  const handleChange = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       props.onChange(list);
@@ -190,7 +190,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange3
+      onChange: handleChange
     }
   ));
 };
@@ -255,9 +255,12 @@ var onSearch = (value) => {
   console.log("search:", value);
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
-var handleChange = () => {
-};
 var SingleSelectElement = (props) => {
+  const handleChange = (value) => {
+    if (props.onChange) {
+      props.onChange(value);
+    }
+  };
   return /* @__PURE__ */ React9.createElement(
     Select2,
     {
@@ -267,55 +270,27 @@ var SingleSelectElement = (props) => {
       onChange: handleChange,
       onSearch,
       filterOption,
-      onFocus: props.onFocusHandler,
-      options: props.options
+      options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title) }))
     }
   );
 };
 
 // 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 = () => {
+import { Select as Select3 } from "antd";
+var MultipleSelectElement = (props) => {
+  const handleChange = (value) => {
+    if (props.onChange) {
+      props.onChange(value);
+    }
+  };
   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)
+      placeholder: props.placeholder,
+      onChange: handleChange,
+      options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title) }))
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.8-Beta0",
+  "version": "0.0.8-Beta10",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",