@apexcura/ui-components 0.0.14-Beta244 → 0.0.14-Beta246

package/dist/index.css

@@ -338,6 +338,9 @@ video {
 .fixed {
   position: fixed;
 }
+.m-10 {
+  margin: 2.5rem;
+}
 .m-\[10px\] {
   margin: 10px;
 }
@@ -350,6 +353,9 @@ video {
 .grid {
   display: grid;
 }
+.flex-col {
+  flex-direction: column;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -372,12 +378,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(242 242 242 / var(--tw-bg-opacity));
 }
+.p-10 {
+  padding: 2.5rem;
+}
 .p-\[6px\] {
   padding: 6px;
 }
 .text-center {
   text-align: center;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .italic {
   font-style: italic;
 }

package/dist/index.js

@@ -189,6 +189,9 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 var import_react5 = __toESM(require("react"));
 var import_antd5 = require("antd");
+var filterOptions = (input, option) => {
+  return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+};
 var SelectElement = (props) => {
   const handleChange = (value) => {
     console.log("++=====", typeof value);
@@ -205,20 +208,15 @@ var SelectElement = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col p-10 m-10" }, props.label && /* @__PURE__ */ import_react5.default.createElement("label", { htmlFor: props.name, className: "font-semibold text-default-400 text-red" }, props.label), /* @__PURE__ */ import_react5.default.createElement(
     import_antd5.Select,
     {
-      mode: props.mode,
       options: props.options,
       placeholder: props.placeholder,
       allowClear: true,
-      defaultValue: props.defaultValue,
-      disabled: props.disabled,
-      id: props.name,
-      status: props.status,
-      style: props.styles,
+      filterOption: filterOptions,
+      showSearch: true,
       className: props.className,
-      variant: props.variant,
       onChange: handleChange
     }
   ));
@@ -763,6 +761,7 @@ var import_moment = __toESM(require("moment"));
 var ModelBody = (props) => {
   return /* @__PURE__ */ import_react19.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map(
     (eachField) => {
+      console.log(eachField);
       if (eachField.element === "div") {
         return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: eachField.className }, eachField.label), eachField.dateTime ? /* @__PURE__ */ import_react19.default.createElement(
           "p",
@@ -1123,13 +1122,21 @@ var DropDownGroup = (props) => {
       return newValue;
     });
   };
+  const firstFilterOptions = (input, option) => {
+    return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  };
+  const secondFilterOptions = (input, option) => {
+    return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  };
   return /* @__PURE__ */ import_react26.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react26.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react26.default.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ import_react26.default.createElement(
     import_antd18.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
       options: props.firstOptions,
-      className: props.className
+      className: props.className,
+      filterOption: firstFilterOptions,
+      showSearch: true
     }
   ), /* @__PURE__ */ import_react26.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react26.default.createElement(
     import_antd18.Select,
@@ -1137,7 +1144,9 @@ var DropDownGroup = (props) => {
       onChange: handleSecondChange,
       variant: props.variant,
       options: props.secondOptions,
-      className: props.className
+      className: props.className,
+      filterOption: secondFilterOptions,
+      showSearch: true
     }
   )));
 };

package/dist/index.mjs

@@ -123,6 +123,9 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 import React5 from "react";
 import { Select } from "antd";
+var filterOptions = (input, option) => {
+  return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+};
 var SelectElement = (props) => {
   const handleChange = (value) => {
     console.log("++=====", typeof value);
@@ -139,20 +142,15 @@ var SelectElement = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React5.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React5.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col p-10 m-10" }, props.label && /* @__PURE__ */ React5.createElement("label", { htmlFor: props.name, className: "font-semibold text-default-400 text-red" }, props.label), /* @__PURE__ */ React5.createElement(
     Select,
     {
-      mode: props.mode,
       options: props.options,
       placeholder: props.placeholder,
       allowClear: true,
-      defaultValue: props.defaultValue,
-      disabled: props.disabled,
-      id: props.name,
-      status: props.status,
-      style: props.styles,
+      filterOption: filterOptions,
+      showSearch: true,
       className: props.className,
-      variant: props.variant,
       onChange: handleChange
     }
   ));
@@ -697,6 +695,7 @@ import moment from "moment";
 var ModelBody = (props) => {
   return /* @__PURE__ */ React19.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map(
     (eachField) => {
+      console.log(eachField);
       if (eachField.element === "div") {
         return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement("div", { className: eachField.className }, eachField.label), eachField.dateTime ? /* @__PURE__ */ React19.createElement(
           "p",
@@ -1057,13 +1056,21 @@ var DropDownGroup = (props) => {
       return newValue;
     });
   };
+  const firstFilterOptions = (input, option) => {
+    return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  };
+  const secondFilterOptions = (input, option) => {
+    return (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+  };
   return /* @__PURE__ */ React26.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React26.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React26.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ React26.createElement(
     Select4,
     {
       onChange: handleFirstChange,
       variant: props.variant,
       options: props.firstOptions,
-      className: props.className
+      className: props.className,
+      filterOption: firstFilterOptions,
+      showSearch: true
     }
   ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
     Select4,
@@ -1071,7 +1078,9 @@ var DropDownGroup = (props) => {
       onChange: handleSecondChange,
       variant: props.variant,
       options: props.secondOptions,
-      className: props.className
+      className: props.className,
+      filterOption: secondFilterOptions,
+      showSearch: true
     }
   )));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta244",
+  "version": "0.0.14-Beta246",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",
@@ -25,7 +25,9 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "test": "jest",
-    "build": "tsup"
+    "build:css": "postcss src/styles/index.css -o dist/index.css",
+    "build:js": "tsup src/index.ts --out-dir dist",
+    "build": "npm run build:css && npm run build:js"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",
@@ -36,8 +38,10 @@
     "@types/react-global-configuration": "^1.3.3",
     "@types/testing-library__react": "^10.2.0",
     "antd": "^5.16.5",
+    "autoprefixer": "^10.4.19",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "postcss-cli": "^11.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "ts-jest": "^29.1.2",
@@ -49,7 +53,6 @@
   },
   "dependencies": {
     "@tinymce/tinymce-react": "^5.0.1",
-    "autoprefixer": "^10.4.19",
     "chart.js": "^4.4.3",
     "date-fns": "^3.6.0",
     "devextreme": "^24.1.3",
@@ -59,9 +62,8 @@
     "highcharts-react-official": "^3.2.1",
     "moment": "^2.30.1",
     "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
     "react-chartjs-2": "^5.2.0",
     "react-icons": "^5.2.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.4"
   }
 }

package/postcss.config.js

@@ -1,6 +1,7 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
+  

package/tailwind.config.js

@@ -1,10 +1,9 @@
-/** @type {import('tailwindcss').Config} */
 module.exports = {
   
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};