@lanaco/lnc-react-ui 4.0.193 → 4.0.194

package/dist/DetailedProductsInfinitiveSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const t=require("react/jsx-runtime"),a=require("react"),E=require("./emotion-styled.browser.esm-BtEseadx.cjs"),I=require("./consts-goSZX3xP.cjs"),L=require("./IconButton.cjs"),T=require("./Button.cjs"),n=require("./utils-RnrgDDZP.cjs"),z=require("./useDetectMobile-zkbzoOGV.cjs"),g=require("./index-Lmz3An4A.cjs"),R=E.styled.div`
+"use strict";const t=require("react/jsx-runtime"),c=require("react"),f=require("./emotion-styled.browser.esm-BtEseadx.cjs"),Q=require("./consts-goSZX3xP.cjs"),G=require("./IconButton.cjs"),W=require("./Button.cjs"),a=require("./utils-RnrgDDZP.cjs"),X=require("./useDetectMobile-zkbzoOGV.cjs"),b=require("./index-Lmz3An4A.cjs"),Z=require("./index-CSNxZFTX.cjs"),l=require("./style-BAcV7F53.cjs"),H=f.styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -21,9 +21,18 @@
     }
   }
 
+  & .section__options {
+    & button {
+      &:focus {
+        outline: none;
+        outline-offset: 0;
+      }
+    }
+  }
+
   & .section__items {
     display: grid;
-    grid-template-columns: ${r=>`repeat(${r.limit},  minmax(0, 1fr))`};
+    grid-template-columns: ${o=>`repeat(${o.limit},  minmax(0, 1fr))`};
     gap: 2rem;
   }
 
@@ -47,7 +56,7 @@
     white-space: nowrap;
   }
 
-  @media (max-width: ${I.MOBILE_SIZE_PX+"px"}) {
+  @media (max-width: ${Q.MOBILE_SIZE_PX+"px"}) {
     gap: 1.25rem;
 
     & .section__items {
@@ -70,4 +79,4 @@
       }
     }
   }
-`,U=a.memo(g.DetailedProductCard),A=a.forwardRef((r,p)=>{const{title:l,icon:c,items:i,limit:f=4,isLoading:s=!1,onSelectCard:b=()=>{},onLoadMore:h=()=>{},onButtonAction:w=()=>{},getImage:y=()=>{},viewAllbuttonLink:d,viewAllButonText:m="View all",negotiableText:_,freeText:k,loadMoreButtonIcon:v="angle-down",sponsoredText:S,onBookmark:C=()=>{},actionComponent:N,componentName:P,hasNextPage:j=!1,LinkComponent:q,urgentText:D}=r,u=z.useDetectMobile(),M=a.useMemo(()=>i==null?void 0:i.map((e,o)=>t.jsx(U,{name:e==null?void 0:e.name,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,sponsored:e==null?void 0:e.sponsored,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:(F,B)=>b({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:B}),nameSlug:e==null?void 0:e.nameSlug,imageUrl:y(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,negotiableText:_,freeText:k,tags:e==null?void 0:e.tags,categoryCode:e==null?void 0:e.categoryCode,condition:e==null?void 0:e.condition,quantity:e==null?void 0:e.quantity,hasQuantities:e==null?void 0:e.hasQuantities,status:e==null?void 0:e.status,trade:e==null?void 0:e.trade,sponsoredText:S,onBookmark:C,actionComponent:N,bookmarked:e==null?void 0:e.bookmarked,bookmarkLists:e==null?void 0:e.bookmarkLists,metadata:{accessor:e==null?void 0:e.accessor,name:P},sellerName:e==null?void 0:e.sellerName,forCart:e==null?void 0:e.forCart,forOrder:e==null?void 0:e.forOrder,contactSeller:e==null?void 0:e.contactSeller,hasVariants:e==null?void 0:e.hasVariants,LinkComponent:q,activeSalesPackages:e==null?void 0:e.activeSalesPackages,urgentText:D},o)),[i]);return t.jsxs(R,{ref:p,limit:f,children:[t.jsxs("div",{className:"section__heading",children:[n.isDefinedNotEmptyString(l)&&t.jsxs("div",{className:"section__title",children:[n.isDefinedNotEmptyString(c)&&t.jsx("i",{className:c})," ",l]}),u&&n.isDefinedNotEmptyString(d)&&n.isDefinedNotEmptyString(m)&&!s&&t.jsx(T,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var o;(o=e==null?void 0:e.target)==null||o.blur(),w(d)},borderRadius:"curved",className:"section__view-all",children:m})]}),t.jsx(g.SuspenseDetailedProductCard,{isLoading:s,keyPrefix:"detailed-product-card-skeleton",children:t.jsx("div",{className:"section__items",children:M})}),!u&&!s&&j&&t.jsx(L,{icon:v,borderRadius:"curved",btnType:"basic",color:"neutral",className:"section__show-more",onClick:h})]})});module.exports=A;
+`,J=f.styled(l.SkeletonRowWrapper)``,Y=({keyPrefix:o})=>t.jsxs(J,{children:[t.jsx(l.SkeletonLinePlaceholder,{width:"5rem",borderRadius:"0.75rem"},`${o}-1`),t.jsx(l.SkeletonLinePlaceholder,{width:"5rem",borderRadius:"0.75rem"},`${o}-2`),t.jsx(l.SkeletonLinePlaceholder,{width:"5rem",borderRadius:"0.75rem"},`${o}-3`)]}),x=({keyPrefix:o,isLoading:d=!1,fallbackComponent:n=t.jsx(t.Fragment,{}),children:i})=>t.jsx(c.Suspense,{fallbackComponent:n,children:d===!0?t.jsx(Y,{keyPrefix:o}):i}),ee=c.memo(b.DetailedProductCard),te=c.forwardRef((o,d)=>{const{title:n,icon:i,items:r,limit:h=4,isLoading:u=!1,onSelectCard:S=()=>{},onLoadMore:w=()=>{},onButtonAction:_=()=>{},getImage:y=()=>{},viewAllbuttonLink:m,viewAllButonText:p="View all",negotiableText:k,freeText:v,loadMoreButtonIcon:j="angle-down",sponsoredText:C,onBookmark:N=()=>{},actionComponent:L,componentName:q,hasNextPage:P=!1,LinkComponent:B,urgentText:R,options:O=[],isLoadingOptions:D=!1,selectedOption:M,onSelectOption:E=()=>{},onRemoveOption:I=()=>{},allOptionsEnabled:T=!1,allOptionsLabel:$="All",onSelectAllOptions:A=()=>{},optionLabel:z="label",optionValue:F="value",optionCode:U="code"}=o,g=X.useDetectMobile(),V=c.useMemo(()=>r==null?void 0:r.map((e,s)=>t.jsx(ee,{name:e==null?void 0:e.name,price:e==null?void 0:e.price,sellingPrice:e==null?void 0:e.sellingPrice,currency:e==null?void 0:e.currency,image:e==null?void 0:e.image,sellerUuid:e==null?void 0:e.sellerUuid,uuid:e==null?void 0:e.uuid,sponsored:e==null?void 0:e.sponsored,imageComponent:e==null?void 0:e.imageComponent,onSelectCard:(oe,K)=>S({uuid:e==null?void 0:e.uuid,nameSlug:e==null?void 0:e.nameSlug,cardRef:K}),nameSlug:e==null?void 0:e.nameSlug,imageUrl:y(e==null?void 0:e.image,e==null?void 0:e.uuid,e==null?void 0:e.sellerUuid)||null,isFree:e==null?void 0:e.isFree,isNegotiable:e==null?void 0:e.isNegotiable,negotiableText:k,freeText:v,tags:e==null?void 0:e.tags,categoryCode:e==null?void 0:e.categoryCode,condition:e==null?void 0:e.condition,quantity:e==null?void 0:e.quantity,hasQuantities:e==null?void 0:e.hasQuantities,status:e==null?void 0:e.status,trade:e==null?void 0:e.trade,sponsoredText:C,onBookmark:N,actionComponent:L,bookmarked:e==null?void 0:e.bookmarked,bookmarkLists:e==null?void 0:e.bookmarkLists,metadata:{accessor:e==null?void 0:e.accessor,name:q},sellerName:e==null?void 0:e.sellerName,forCart:e==null?void 0:e.forCart,forOrder:e==null?void 0:e.forOrder,contactSeller:e==null?void 0:e.contactSeller,hasVariants:e==null?void 0:e.hasVariants,LinkComponent:B,activeSalesPackages:e==null?void 0:e.activeSalesPackages,urgentText:R},s)),[r]);return t.jsxs(H,{ref:d,limit:h,children:[t.jsxs("div",{className:"section__heading",children:[a.isDefinedNotEmptyString(n)&&t.jsxs("div",{className:"section__title",children:[a.isDefinedNotEmptyString(i)&&t.jsx("i",{className:i})," ",n]}),g&&a.isDefinedNotEmptyString(m)&&a.isDefinedNotEmptyString(p)&&!u&&t.jsx(W,{type:"button",btnType:"tinted",color:"neutral",onClick:e=>{var s;(s=e==null?void 0:e.target)==null||s.blur(),_(m)},borderRadius:"curved",className:"section__view-all",children:p})]}),t.jsx(x,{isLoading:D,children:t.jsx(Z.SelectBar,{items:O,selectedIds:M,onRemove:I,onSelect:E,allButton:T,onSelectAll:A,labelKey:z,valueKey:F,codeKey:U,noMargin:!0,productsToolbarName:$,noGradient:!0,className:"section__options"})}),t.jsx(b.SuspenseDetailedProductCard,{isLoading:u,keyPrefix:"detailed-product-card-skeleton",children:t.jsx("div",{className:"section__items",children:V})}),!g&&!u&&P&&t.jsx(G,{icon:j,borderRadius:"curved",btnType:"basic",color:"neutral",className:"section__show-more",onClick:w})]})});module.exports=te;

package/dist/DetailedProductsInfinitiveSection.js

@@ -1,13 +1,15 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { memo as D, forwardRef as I, useMemo as z } from "react";
-import { s as E } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as U } from "./consts-BuFChS64.js";
-import $ from "./IconButton.js";
-import j from "./Button.js";
-import { k as r } from "./utils-Dc5zIpaz.js";
-import { u as A } from "./useDetectMobile-Bkvj0VMa.js";
-import { D as F, S as O } from "./index-DqBXIFsQ.js";
-const R = E.div`
+import { jsxs as s, jsx as o, Fragment as q } from "react/jsx-runtime";
+import { Suspense as Q, memo as G, forwardRef as W, useMemo as X } from "react";
+import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as Z } from "./consts-BuFChS64.js";
+import H from "./IconButton.js";
+import J from "./Button.js";
+import { k as l } from "./utils-Dc5zIpaz.js";
+import { u as Y } from "./useDetectMobile-Bkvj0VMa.js";
+import { D as x, S as ee } from "./index-DqBXIFsQ.js";
+import { S as oe } from "./index-BGiZlEQt.js";
+import { a as te, b as m } from "./style-CXMUA6cI.js";
+const ie = f.div`
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -30,9 +32,18 @@ const R = E.div`
     }
   }
 
+  & .section__options {
+    & button {
+      &:focus {
+        outline: none;
+        outline-offset: 0;
+      }
+    }
+  }
+
   & .section__items {
     display: grid;
-    grid-template-columns: ${(a) => `repeat(${a.limit},  minmax(0, 1fr))`};
+    grid-template-columns: ${(t) => `repeat(${t.limit},  minmax(0, 1fr))`};
     gap: 2rem;
   }
 
@@ -56,7 +67,7 @@ const R = E.div`
     white-space: nowrap;
   }
 
-  @media (max-width: ${U + "px"}) {
+  @media (max-width: ${Z + "px"}) {
     gap: 1.25rem;
 
     & .section__items {
@@ -79,36 +90,80 @@ const R = E.div`
       }
     }
   }
-`, V = D(F), x = I((a, p) => {
+`, ne = f(te)``, re = ({ keyPrefix: t }) => /* @__PURE__ */ s(ne, { children: [
+  /* @__PURE__ */ o(
+    m,
+    {
+      width: "5rem",
+      borderRadius: "0.75rem"
+    },
+    `${t}-1`
+  ),
+  /* @__PURE__ */ o(
+    m,
+    {
+      width: "5rem",
+      borderRadius: "0.75rem"
+    },
+    `${t}-2`
+  ),
+  /* @__PURE__ */ o(
+    m,
+    {
+      width: "5rem",
+      borderRadius: "0.75rem"
+    },
+    `${t}-3`
+  )
+] }), ae = ({
+  keyPrefix: t,
+  isLoading: c = !1,
+  fallbackComponent: i = /* @__PURE__ */ o(q, {}),
+  children: n
+}) => /* @__PURE__ */ o(Q, { fallbackComponent: i, children: c === !0 ? /* @__PURE__ */ o(re, { keyPrefix: t }) : n }), le = G(x), _e = W((t, c) => {
   const {
-    title: l,
-    icon: c,
-    items: o,
-    limit: g = 4,
-    isLoading: n = !1,
-    onSelectCard: f = () => {
+    title: i,
+    icon: n,
+    items: r,
+    limit: b = 4,
+    isLoading: d = !1,
+    onSelectCard: h = () => {
     },
-    onLoadMore: h = () => {
+    onLoadMore: w = () => {
     },
-    onButtonAction: b = () => {
+    onButtonAction: S = () => {
     },
-    getImage: w = () => {
+    getImage: _ = () => {
     },
-    viewAllbuttonLink: m,
-    viewAllButonText: d = "View all",
-    negotiableText: _,
-    freeText: k,
+    viewAllbuttonLink: u,
+    viewAllButonText: p = "View all",
+    negotiableText: k,
+    freeText: v,
     loadMoreButtonIcon: y = "angle-down",
-    sponsoredText: v,
-    onBookmark: C = () => {
+    sponsoredText: C,
+    onBookmark: N = () => {
     },
-    actionComponent: S,
-    componentName: N,
+    actionComponent: L,
+    componentName: B,
     hasNextPage: P = !1,
-    LinkComponent: M,
-    urgentText: B
-  } = a, u = A(), L = z(() => o == null ? void 0 : o.map((e, i) => /* @__PURE__ */ t(
-    V,
+    LinkComponent: O,
+    urgentText: M,
+    options: R = [],
+    isLoadingOptions: T = !1,
+    selectedOption: $,
+    onSelectOption: I = () => {
+    },
+    onRemoveOption: A = () => {
+    },
+    allOptionsEnabled: D = !1,
+    allOptionsLabel: z = "All",
+    onSelectAllOptions: E = () => {
+    },
+    optionLabel: F = "label",
+    optionValue: U = "value",
+    optionCode: V = "code"
+  } = t, g = Y(), j = X(() => r == null ? void 0 : r.map((e, a) => /* @__PURE__ */ o(
+    le,
     {
       name: e == null ? void 0 : e.name,
       price: e == null ? void 0 : e.price,
@@ -119,13 +174,13 @@ const R = E.div`
       uuid: e == null ? void 0 : e.uuid,
       sponsored: e == null ? void 0 : e.sponsored,
       imageComponent: e == null ? void 0 : e.imageComponent,
-      onSelectCard: (q, T) => f({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug, cardRef: T }),
+      onSelectCard: (se, K) => h({ uuid: e == null ? void 0 : e.uuid, nameSlug: e == null ? void 0 : e.nameSlug, cardRef: K }),
       nameSlug: e == null ? void 0 : e.nameSlug,
-      imageUrl: w(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
+      imageUrl: _(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
       isFree: e == null ? void 0 : e.isFree,
       isNegotiable: e == null ? void 0 : e.isNegotiable,
-      negotiableText: _,
-      freeText: k,
+      negotiableText: k,
+      freeText: v,
       tags: e == null ? void 0 : e.tags,
       categoryCode: e == null ? void 0 : e.categoryCode,
       condition: e == null ? void 0 : e.condition,
@@ -133,67 +188,85 @@ const R = E.div`
       hasQuantities: e == null ? void 0 : e.hasQuantities,
       status: e == null ? void 0 : e.status,
       trade: e == null ? void 0 : e.trade,
-      sponsoredText: v,
-      onBookmark: C,
-      actionComponent: S,
+      sponsoredText: C,
+      onBookmark: N,
+      actionComponent: L,
       bookmarked: e == null ? void 0 : e.bookmarked,
       bookmarkLists: e == null ? void 0 : e.bookmarkLists,
-      metadata: { accessor: e == null ? void 0 : e.accessor, name: N },
+      metadata: { accessor: e == null ? void 0 : e.accessor, name: B },
       sellerName: e == null ? void 0 : e.sellerName,
       forCart: e == null ? void 0 : e.forCart,
       forOrder: e == null ? void 0 : e.forOrder,
       contactSeller: e == null ? void 0 : e.contactSeller,
       hasVariants: e == null ? void 0 : e.hasVariants,
-      LinkComponent: M,
+      LinkComponent: O,
       activeSalesPackages: e == null ? void 0 : e.activeSalesPackages,
-      urgentText: B
+      urgentText: M
     },
-    i
-  )), [o]);
-  return /* @__PURE__ */ s(R, { ref: p, limit: g, children: [
+    a
+  )), [r]);
+  return /* @__PURE__ */ s(ie, { ref: c, limit: b, children: [
     /* @__PURE__ */ s("div", { className: "section__heading", children: [
-      r(l) && /* @__PURE__ */ s("div", { className: "section__title", children: [
-        r(c) && /* @__PURE__ */ t("i", { className: c }),
+      l(i) && /* @__PURE__ */ s("div", { className: "section__title", children: [
+        l(n) && /* @__PURE__ */ o("i", { className: n }),
         " ",
-        l
+        i
       ] }),
-      u && r(m) && r(d) && !n && /* @__PURE__ */ t(
-        j,
+      g && l(u) && l(p) && !d && /* @__PURE__ */ o(
+        J,
         {
           type: "button",
           btnType: "tinted",
           color: "neutral",
           onClick: (e) => {
-            var i;
-            (i = e == null ? void 0 : e.target) == null || i.blur(), b(m);
+            var a;
+            (a = e == null ? void 0 : e.target) == null || a.blur(), S(u);
           },
           borderRadius: "curved",
           className: "section__view-all",
-          children: d
+          children: p
         }
       )
     ] }),
-    /* @__PURE__ */ t(
-      O,
+    /* @__PURE__ */ o(ae, { isLoading: T, children: /* @__PURE__ */ o(
+      oe,
+      {
+        items: R,
+        selectedIds: $,
+        onRemove: A,
+        onSelect: I,
+        allButton: D,
+        onSelectAll: E,
+        labelKey: F,
+        valueKey: U,
+        codeKey: V,
+        noMargin: !0,
+        productsToolbarName: z,
+        noGradient: !0,
+        className: "section__options"
+      }
+    ) }),
+    /* @__PURE__ */ o(
+      ee,
       {
-        isLoading: n,
+        isLoading: d,
         keyPrefix: "detailed-product-card-skeleton",
-        children: /* @__PURE__ */ t("div", { className: "section__items", children: L })
+        children: /* @__PURE__ */ o("div", { className: "section__items", children: j })
       }
     ),
-    !u && !n && P && /* @__PURE__ */ t(
-      $,
+    !g && !d && P && /* @__PURE__ */ o(
+      H,
       {
         icon: y,
         borderRadius: "curved",
         btnType: "basic",
         color: "neutral",
         className: "section__show-more",
-        onClick: h
+        onClick: w
       }
     )
   ] });
 });
 export {
-  x as default
+  _e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.193",
+  "version": "4.0.194",
   "description": "React component library",
   "type": "module",
   "keywords": [