@instincthub/react-ui 0.1.21 → 0.1.23

package/dist/src/assets/css/forms/search-objects-from-db.css

@@ -170,13 +170,63 @@
   border-radius: 5px;
 }
 
+/* Selected Options Styles */
+.ihub-selected-options {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-top: 1px solid var(--borderDefault);
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+.ihub-selected-options h4 {
+  margin: 0 0 10px 0;
+  color: var(--Gunmetal);
+  font-weight: 600;
+}
+
+.ihub-selected-options li {
+  background-color: rgba(0, 131, 143, 0.1);
+  border: 1px solid var(--DarkCyan);
+  border-radius: 4px;
+  margin-bottom: 5px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  color: var(--Gunmetal);
+}
+
+.ihub-selected-options .ihub-delete-icon {
+  color: var(--Danger);
+  cursor: pointer;
+  font-size: 18px !important;
+  margin-left: auto;
+  transition: color 0.2s ease, transform 0.1s ease;
+}
+
+.ihub-selected-options .ihub-delete-icon:hover {
+  color: var(--TurkishRose);
+  transform: scale(1.1);
+}
+
+.ihub-selected-options .ihub-delete-icon:active {
+  transform: scale(0.95);
+}
+
 /* Responsive adjustments */
 @media (max-width: 576px) {
   .ihub-react-search {
     max-width: 100%;
   }
-  
+
   .ihub-search-result-item {
     padding: 14px 12px;
   }
+
+  .ihub-selected-options li {
+    padding: 10px 12px;
+  }
 }

package/dist/src/components/forms/SearchObjectsFromDB.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,asyncToGenerator as i,regeneratorRuntime as n,toConsumableArray as r,typeof as c}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as t}from"react/jsx-runtime";import{memo as l,useState as o,useEffect as s,useCallback as u}from"react";import{reqOptions as h,API_HOST_URL as d}from"../lib/helpFunction.js";import"../lib/utils.js";import m from"@mui/icons-material/SearchOutlined";import b from"@mui/icons-material/Check";import f from"@mui/icons-material/CloseOutlined";function p(l){var p=l.label,v=l.token,N=l.handle,g=l.setSelected,k=l.appLabel,y=l.modelName,x=l.filterChannel,C=void 0!==x&&x,j=l.limitQuery,w=void 0===j?5:j,E=l.limitSelect,S=void 0===E?0:E,T=l.options,_=l.keyName,q=void 0===_?"title":_,O=l.placeholder,U=void 0===O?"Search by Username or Email":O,A=l.searchUrl,D=l.selected,G=l.err,H=void 0!==G&&G,P=l.required,R=void 0!==P&&P,B=o(""),F=e(B,2),K=F[0],L=F[1],Q=o([]),z=e(Q,2),I=z[0],J=z[1],M=o(!1),V=e(M,2),W=V[0],X=V[1],Y=o(null),Z=e(Y,2),$=Z[0],ee=Z[1];s((function(){D&&D.length>0&&0===I.length&&J(D)}),[D]),s((function(){J(T||[])}),[T]);var ie=u(i(n().mark((function e(){var i,c,a,t,l;return n().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return X(!0),ee(null),i=h("GET",null,v),c=A?A.includes("/?")?"".concat(A,"&search=").concat(K):"".concat(A,"?search=").concat(K):k?"".concat(d,"channels/").concat(N,"/dynamic-search/?app_label=").concat(k,"&model_name=").concat(y,"&value=").concat(K,"&filter_channel=").concat(C):"".concat(d,"auth/").concat(N,"/search-user/").concat(K,"/?limit=").concat(w),e.prev=4,e.next=7,fetch(c,i);case 7:if((a=e.sent).ok){e.next=10;break}throw new Error("HTTP error ".concat(a.status));case 10:return e.next=12,a.json();case 12:t=e.sent,J([].concat(r(t.results||[]),r(T||[]))),e.next=22;break;case 16:e.prev=16,e.t0=e.catch(4),l=e.t0 instanceof Error?e.t0.message:"Unknown error occurred",console.error("Error fetching search results:",l),ee(l),J(r(T||[]));case 22:return e.prev=22,X(!1),e.finish(22);case 25:case"end":return e.stop()}}),e,null,[[4,16,22,25]])}))),[K,v,A,k,y,N,C,w]),ne=u((function(e){"Enter"===e.key&&(e.preventDefault(),ie())}),[ie]),re=u((function(){L(""),J(r(T||[])),ee(null)}),[]),ce=u((function(e){return D.some((function(i){return("object"===c(i)?null==i?void 0:i.id:i)===((null==e?void 0:e.username)||(null==e?void 0:e.id))}))}),[D]),ae=u((function(e){var i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(e&&e.id){var n=D.find((function(i){return i.id===e.id}));i?g(D.filter((function(i){return i.id!==e.id}))):!n&&(0===S||D.length<S)?g([].concat(r(D),[e])):1===S&&g([e])}}),[D,g,S]);return a("div",{className:"ihub-react-search-container",children:t("div",{className:"ihub-react-search card",children:[p&&t("h4",{className:"ihub-fs-sm ihub-mt-2 ihub-mb-2",children:[p," ",R&&a("span",{className:"ihub-required",children:"*"})]}),t("div",{className:"ihub-search-input",children:[a("input",{type:"text",placeholder:U,onKeyDown:ne,value:K,onChange:function(e){return L(e.target.value)},disabled:W,required:R&&!D.length}),t("div",{className:"ihub-search-icons",children:[K&&a(f,{onClick:re,className:"ihub-search-icon ihub-close-icon"}),a(m,{onClick:ie,className:"ihub-search-icon ihub-search-button ".concat(W?"ihub-disabled":"")})]})]}),W&&a("div",{className:"ihub-loading",children:"Searching..."}),$&&a("div",{className:"ihub-search-error",children:$}),t("ul",{className:"ihub-search-results",children:[null==I?void 0:I.map((function(e,i){return t("li",{className:"ihub-search-result-item ihub-valid",onClick:function(){return e&&ae(e)},children:[ce(e)&&a(b,{className:"ihub-check-icon",style:{position:"relative",top:"5px",marginRight:"10px"}}),e[q]||(null==e?void 0:e.title)||"",ce(e)?a(f,{className:"ihub-delete-icon ihub-ml-auto",onClick:function(){return e&&ae(e,!0)}}):""]},"".concat((null==e?void 0:e.id)||(null==e?void 0:e.username)||i))})),W||$||I.length||D.length?"":a("li",{className:"ihub-no-results",children:"No available options"})]}),t("ul",{className:"ihub-selected-options ihub-mt-2 ihub-",children:[a("h4",{className:"ihub-fs-sm ihub-mt-2 ihub-mb-2",children:"Selected Options:"}),D.map((function(e){return t("li",{className:"ihub-fs-sm ihub-border-bottom ihub-pb-2 ihub-flex ihub-items-center",children:[e[q]||e.title,a(f,{className:"ihub-delete-icon ihub-ml-auto",onClick:function(){return ae(e,!0)}})]},null==e?void 0:e.id)}))]}),H&&a("p",{className:"ihub-error",children:"This field is required"})]})})}var v=l(p);export{v as default};
+import{slicedToArray as e,asyncToGenerator as n,regeneratorRuntime as r,toConsumableArray as a,typeof as i,createForOfIteratorHelper as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l,jsxs as c}from"react/jsx-runtime";import{memo as o,useState as s,useEffect as u,useCallback as d}from"react";import{reqOptions as h,API_HOST_URL as m}from"../lib/helpFunction.js";import"../lib/utils.js";import f from"@mui/icons-material/SearchOutlined";import p from"@mui/icons-material/Check";import v from"@mui/icons-material/CloseOutlined";var b=function(e){if(!e||!Array.isArray(e))return[];var n,r=[],l=t(e);try{for(l.s();!(n=l.n()).done;){var c=n.value;Array.isArray(c)?r.push.apply(r,a(b(c))):c&&"object"===i(c)&&c.id&&r.push(c)}}catch(e){l.e(e)}finally{l.f()}var o=r.filter((function(e,n,r){return r.findIndex((function(n){return n.id===e.id}))===n}));return o};function y(t){var o=t.label,y=t.token,g=t.handle,N=t.selected,k=t.setSelected,x=t.appLabel,S=t.modelName,j=t.filterChannel,C=void 0!==j&&j,O=t.limitQuery,_=void 0===O?5:O,D=t.limitSelect,w=void 0===D?0:D,F=t.options,T=t.keyName,A=void 0===T?"title":T,E=t.placeholder,B=void 0===E?"Search by Username or Email":E,I=t.searchUrl,q=t.err,H=void 0!==q&&q,P=t.required,U=void 0!==P&&P,G=s(""),J=e(G,2),K=J[0],L=J[1],R=s([]),Q=e(R,2),z=Q[0],M=Q[1],V=s(!1),W=e(V,2),X=W[0],Y=W[1],Z=s(null),$=e(Z,2),ee=$[0],ne=$[1];u((function(){N&&N.length>0&&0===z.length&&M(N)}),[N]),u((function(){M(F||[])}),[F]),u((function(){if(N&&N.length>0){var e=b(N);JSON.stringify(e)!==JSON.stringify(N)&&console.warn("SearchObjectsFromDB: Detected malformed selected array. Parent should provide flattened data:",{original:N,expectedFormat:e,keyName:A})}console.log("SearchObjectsFromDB Debug:",{keyName:A,selectedLength:(null==N?void 0:N.length)||0,selectedSample:null==N?void 0:N[0],label:o})}),[N,A,o]);var re,ae=d(n(r().mark((function e(){var n,i,t,l,c;return r().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return Y(!0),ne(null),n=h("GET",null,y),i=I?I.includes("/?")?"".concat(I,"&search=").concat(K):"".concat(I,"?search=").concat(K):x?"".concat(m,"channels/").concat(g,"/dynamic-search/?app_label=").concat(x,"&model_name=").concat(S,"&value=").concat(K,"&filter_channel=").concat(C):"".concat(m,"auth/").concat(g,"/search-user/").concat(K,"/?limit=").concat(_),e.prev=4,e.next=7,fetch(i,n);case 7:if((t=e.sent).ok){e.next=10;break}throw new Error("HTTP error ".concat(t.status));case 10:return e.next=12,t.json();case 12:l=e.sent,M([].concat(a(l.results||[]),a(F||[]))),e.next=22;break;case 16:e.prev=16,e.t0=e.catch(4),c=e.t0 instanceof Error?e.t0.message:"Unknown error occurred",console.error("Error fetching search results:",c),ne(c),M(a(F||[]));case 22:return e.prev=22,Y(!1),e.finish(22);case 25:case"end":return e.stop()}}),e,null,[[4,16,22,25]])}))),[K,y,I,x,S,g,C,_]),ie=d((function(e){"Enter"===e.key&&(e.preventDefault(),ae())}),[ae]),te=d((function(){L(""),M(a(F||[])),ne(null)}),[]),le=d((function(e){return!(!e||!N||0===N.length)&&b(N).some((function(n){if(!n)return!1;var r="object"===i(n)?null==n?void 0:n.id:n,a=(null==e?void 0:e.username)||(null==e?void 0:e.id);return r===a&&null!=r&&null!=a}))}),[N]),ce=d((function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(e&&e.id&&N){var r=b(N),i=r.find((function(n){return(null==n?void 0:n.id)===e.id}));if(n){var t=r.filter((function(n){return(null==n?void 0:n.id)!==e.id}));k(t)}else!i&&(0===w||r.length<w)?k([].concat(a(r),[e])):1===w&&k([e])}}),[N,k,w]);return l("div",{className:"ihub-react-search-container",children:c("div",{className:"ihub-react-search card",children:[o&&c("h4",{className:"ihub-fs-sm ihub-mt-2 ihub-mb-2",children:[o," ",U&&l("span",{className:"ihub-required",children:"*"})]}),c("div",{className:"ihub-search-input",children:[l("input",{type:"text",placeholder:B,onKeyDown:ie,value:K,onChange:function(e){return L(e.target.value)},disabled:X,required:U&&!N.length}),c("div",{className:"ihub-search-icons",children:[K&&l(v,{onClick:te,className:"ihub-search-icon ihub-close-icon"}),l(f,{onClick:ae,className:"ihub-search-icon ihub-search-button ".concat(X?"ihub-disabled":"")})]})]}),X&&l("div",{className:"ihub-loading",children:"Searching..."}),ee&&l("div",{className:"ihub-search-error",children:ee}),c("ul",{className:"ihub-search-results",children:[null==z?void 0:z.map((function(e,n){return c("li",{className:"ihub-search-result-item ihub-valid",onClick:function(){return e&&ce(e)},children:[le(e)&&l(p,{className:"ihub-check-icon",style:{position:"relative",top:"5px",marginRight:"10px"}}),e[A]||(null==e?void 0:e.title)||"",le(e)?l(v,{className:"ihub-delete-icon ihub-ml-auto",onClick:function(){return e&&ce(e,!0)}}):""]},"".concat((null==e?void 0:e.id)||(null==e?void 0:e.username)||n))})),X||ee||z.length||N.length?"":l("li",{className:"ihub-no-results",children:"No available options"})]}),(re=b(N||[]),0===re.length?null:c("ul",{className:"ihub-selected-options",children:[l("h4",{className:"ihub-fs-md",children:"Selected Options:"}),re.map((function(e,n){if(!e||"object"!==i(e))return console.warn("SearchObjectsFromDB: Invalid item in selected array:",e),null;var r=e,a=r[A]||r.title||r.name||r.full_name||r.name_plus_username||r.display_name||r.username||"Item ".concat(n+1),t=e.id||r.username||"selected-".concat(n);return a&&a!=="Item ".concat(n+1)||console.log("SearchObjectsFromDB: Display text debug:",{item:e,keyName:A,itemKeyName:r[A],title:r.title,name:r.name,fullName:r.full_name,displayText:a}),c("li",{children:[l("span",{children:a}),l(v,{className:"ihub-delete-icon",onClick:function(){return ce(e,!0)}})]},t)}))]})),H&&l("p",{className:"ihub-error",children:"This field is required"})]})})}var g=o(y);export{g as default};
 //# sourceMappingURL=SearchObjectsFromDB.js.map

package/dist/src/types/components/forms/SearchObjectsFromDB.d.ts

@@ -47,6 +47,6 @@ interface SearchObjectsFromDBProps<T extends SearchObjectItemType = SearchObject
  * @param {T[]} props.selected - The selected for the API request
  * @param {boolean} props.err - The error for the API request
  */
-declare function SearchObjectsFromDB<T extends SearchObjectItemType = SearchObjectItemType>({ label, token, handle, setSelected, appLabel, modelName, filterChannel, limitQuery, limitSelect, options, keyName, placeholder, searchUrl, selected, err, required, }: SearchObjectsFromDBProps<T>): JSX.Element;
+declare function SearchObjectsFromDB<T extends SearchObjectItemType = SearchObjectItemType>({ label, token, handle, selected, setSelected, appLabel, modelName, filterChannel, limitQuery, limitSelect, options, keyName, placeholder, searchUrl, err, required, }: SearchObjectsFromDBProps<T>): JSX.Element;
 declare const _default: typeof SearchObjectsFromDB;
 export default _default;