@bikdotai/bik-component-library 0.0.382-beta.5 → 0.0.382-beta.7

package/dist/cjs/components/product-picker-v2/helpers/ProductHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../type.js");const n={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock"};exports.ProductHelper=class{static getProductLabels(l){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.OUT_OF_STOCK_ACTION.NORMAL,u="NORMAL";if(l.variants)return n[u];const d=l;return i===t.OUT_OF_STOCK_ACTION.HIDE&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),i===t.OUT_OF_STOCK_ACTION.BLUR&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="OUT_OF_STOCK"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),i===t.OUT_OF_STOCK_ACTION.NORMAL&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NORMAL"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),n[u]}},exports.parseSelectedVariantsToArray=t=>{let n=[];console.log("vj: inside parser",t),Object.keys(t).forEach((l=>{var i;return Object.keys((null===(i=null==t?void 0:t[l])||void 0===i?void 0:i.products)||[]).forEach((i=>{var u,d;const o=null!==(u=t[l].products)&&void 0!==u?u:[],a=null!==(d=o[i].variants)&&void 0!==d?d:[];return Object.keys(a).map((t=>{const n=a[t];n.variantId=t,n.productId=i,n.collectionId=l,n.productName=o[i].name})),n=[...n,...Object.values(a)],n}))}));const l=n.sort(((t,n)=>null==t.displayOrder&&null==n.displayOrder?0:null==t.displayOrder?1:null==n.displayOrder?-1:t.displayOrder-n.displayOrder));return l.forEach(((t,n)=>{t.displayOrder=n})),l};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../type.js");const n={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock"};exports.ProductHelper=class{static getProductLabels(l){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t.OUT_OF_STOCK_ACTION.NORMAL,u="NORMAL";if(l.variants)return n[u];const d=l;return i===t.OUT_OF_STOCK_ACTION.HIDE&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),i===t.OUT_OF_STOCK_ACTION.BLUR&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="OUT_OF_STOCK"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),i===t.OUT_OF_STOCK_ACTION.NORMAL&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NORMAL"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),n[u]}},exports.parseSelectedVariantsToArray=t=>{let n=[];Object.keys(t).forEach((l=>{var i;return Object.keys((null===(i=null==t?void 0:t[l])||void 0===i?void 0:i.products)||[]).forEach((i=>{var u,d;const a=null!==(u=t[l].products)&&void 0!==u?u:[],o=null!==(d=a[i].variants)&&void 0!==d?d:[];return Object.keys(o).map((t=>{const n=o[t];n.variantId=t,n.productId=i,n.collectionId=l,n.productName=a[i].name})),n=[...n,...Object.values(o)],n}))}));const l=n.sort(((t,n)=>null==t.displayOrder&&null==n.displayOrder?0:null==t.displayOrder?1:null==n.displayOrder?-1:t.displayOrder-n.displayOrder));return l.forEach(((t,n)=>{t.displayOrder=n})),l};

package/dist/cjs/components/product-picker-v2/modal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/search.svg.js"),o=require("react"),c=require("../../constants/Theme.js"),r=require("../button/Button.js"),s=require("../input/Input.js"),n=require("../modals/styledModal.js"),l=require("../spinner/Spinner.js"),i=require("../tag/Tag.js"),a=require("./collectionScreen.js"),d=require("./productScreen.js"),u=require("./rearrangeScreen.js"),h=require("./reducers.js"),p=require("./searchScreen.js"),C=require("./selectedScreen.js"),g=require("./style.js"),S=require("./type.js");exports.ProductPickerModal=j=>{const{storeId:x,selectedItems:v,onClose:y,visible:b,zIndex:m,limit:f,hideCollectionCheckbox:P,hideProductCheckbox:O,outOfStockAction:I=S.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:k,selectProductsFromCustomCollection:q,hideSelectionCount:F,title:T,width:R,startupScreen:E="collections",rearrangeAfterSelectionEnabled:D}=j,[w,B]=o.useReducer(h.collectionsReducer,{}),[A,L]=o.useState(E),[_,M]=o.useState("grid"),[z,G]=o.useState(""),[H,V]=o.useState(0),[$,K]=o.useState(!1),[U,N]=o.useState(0),[Y,J]=o.useState(""),[Q,W]=o.useState(!1),[X,Z]=o.useState(!1),[ee,te]=o.useState(),[oe,ce]=o.useReducer(h.selectedColectionsReducer,Object.keys(v).length>0?v:{});o.useEffect((()=>{K(!0),Z(!0),j.collectionFetcher(H,x).then((e=>{B({type:"fetched",data:(null==e?void 0:e.collections)||{}}),K(!1),V((e=>e+1)),Z(!1)})).catch()}),[]),o.useEffect((()=>{let e=0;Object.keys(oe||[]).forEach((t=>{var o;Object.keys((null===(o=oe[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=oe[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),N(e)})),o.useEffect((()=>{var e;z&&!(null===(e=null==w?void 0:w[z])||void 0===e?void 0:e.products)&&(K(!0),j.productFetcher(z,x).then((e=>{Object.keys(e).length&&B({type:"productsFetched",data:{collectionId:z,products:e}}),K(!1)})).catch())}),[z]),o.useEffect((()=>{const e=setTimeout((()=>{"rearrange"!==E&&(Y.length?(W(!0),j.searchFetcher(x,Y).then((e=>{te(Object.assign({},e)),L("searchProducts"),K(!1),W(!1)}))):L("collections"))}),800);return()=>clearTimeout(e)}),[Y]);const re=()=>{ce({type:"reset",data:{}})};return e.jsx(n.StyledModal,Object.assign({zIndex:m,open:b,onClose:()=>{y(),re()},headingTitle:T||("collections"===A||"products"===A?"Select Products":"view"===A?"Selected Products":"searchProducts"===A?"Searched Products":"rearrange"===A?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:R||"480px"},headerRightCustomElement:"rearrange"===A?(console.log("ignore:",M),e.jsx(e.Fragment,{})):e.jsx(e.Fragment,{}),primaryButton:{buttonText:$?"Loading...":"rearrange"===A?"Done":"Add",disabled:$||U<1||f&&U>f||!1,onClick:()=>{console.log("vj: selectedCollections on add",oe),j.onAdd(oe,U),re()}},footerLeftCustomElement:F?e.jsx(e.Fragment,{}):f&&U>f?e.jsx(i.Tag,{tagText:`You can only select ${f} products`,type:"negative"}):U>0?e.jsx(r.Button,{onClick:()=>{L(D?"rearrange":"view")},buttonText:`${U} products selected`,buttonType:["rearrange","view"].includes(A)?"tertiaryGray":"tertiary"}):e.jsx(r.Button,{disabled:!0,buttonText:`${U} products selected`,buttonType:"tertiaryGray"})},{children:e.jsxs(g.ContainerStyle,{children:[j.postHeader&&e.jsx("div",Object.assign({style:{padding:"0 24px"}},{children:j.postHeader})),!j.hideGlobalSearch&&e.jsx(e.Fragment,{children:("collections"===A||"searchProducts"===A)&&e.jsx("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(s.Input,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Q?e.jsx(l.Spinner,{size:"small",color:c.COLORS.content.primary}):e.jsx(t.default,{})},id:"listInput",height:"24px",type:"text",value:Y,onChangeText:e=>{e.length&&e.trim().length?J(e):J("")}})}))}),e.jsxs(g.ScrollContainerStyle,{children:["collections"===A&&e.jsx(a.CollectionsScreen,{customCollectionRestriction:j.customCollectionRestriction,dataLoading:X,collections:w,selectedCollectionsDispatch:ce,setCollectionId:G,setScreen:L,selectedCollections:oe,collectionFetcher:j.collectionFetcher,storeId:x,collectionsDispatch:B,setSaveDisabled:K,pagingControls:{curPage:H,setCurPage:V},hideCollectionCheckbox:P}),"products"===A&&z&&e.jsx(h.CollectionIdContext.Provider,Object.assign({value:z},{children:e.jsx(d.ProductsScreen,{hideInCollectionSearch:j.hideInCollectionSearch,customCollectionRestriction:j.customCollectionRestriction,productFetcher:j.productFetcher,setScreen:L,storeId:x,data:w[z],collectionsDispatch:B,selectedCollectionsDispatch:ce,selectedData:oe,setSaveDisabled:K,searchInCollectionFetcher:j.searchInCollectionFetcher,hideProductCheckbox:O,outOfStockAction:I,hideVariantCheckbox:k,selectProductsFromCustomCollection:q})})),"view"===A&&e.jsx(C.SelectedScreen,{selectedCollections:oe||{},selectedCollectionsDispatch:ce,setScreen:L,collections:w}),"rearrange"===A&&e.jsx(u.RearrangeScreen,{selectedCollections:oe||{},selectedCollectionsDispatch:ce,setScreen:L,rearrangeViewType:"grid"===_?"list":"grid"}),"searchProducts"===A&&e.jsx(p.SearchScreen,{customCollectionRestriction:j.customCollectionRestriction,selectedCollections:oe||{},searchedCollections:ee||{},selectedCollectionsDispatch:ce,setScreen:L,collections:w,onBackPress:()=>{J(""),te({})}})]})]})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/search.svg.js"),o=require("react"),c=require("../../constants/Theme.js"),r=require("../button/Button.js"),s=require("../input/Input.js"),n=require("../modals/styledModal.js"),i=require("../spinner/Spinner.js"),l=require("../tag/Tag.js"),a=require("./collectionScreen.js"),d=require("./productScreen.js"),u=require("./rearrangeScreen.js"),h=require("./reducers.js"),p=require("./searchScreen.js"),C=require("./selectedScreen.js"),g=require("./style.js"),S=require("./type.js");exports.ProductPickerModal=j=>{const{storeId:x,selectedItems:y,onClose:b,visible:v,zIndex:m,limit:f,hideCollectionCheckbox:O,hideProductCheckbox:P,outOfStockAction:k=S.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:I,selectProductsFromCustomCollection:q,hideSelectionCount:F,title:T,width:R,startupScreen:E="collections",rearrangeAfterSelectionEnabled:D}=j,[w,A]=o.useReducer(h.collectionsReducer,{}),[B,L]=o.useState(E),[_,M]=o.useState("grid"),[z,G]=o.useState(""),[H,V]=o.useState(0),[$,K]=o.useState(!1),[U,N]=o.useState(0),[Y,J]=o.useState(""),[Q,W]=o.useState(!1),[X,Z]=o.useState(!1),[ee,te]=o.useState(),[oe,ce]=o.useReducer(h.selectedColectionsReducer,Object.keys(y).length>0?y:{});o.useEffect((()=>{K(!0),Z(!0),j.collectionFetcher(H,x).then((e=>{A({type:"fetched",data:(null==e?void 0:e.collections)||{}}),K(!1),V((e=>e+1)),Z(!1)})).catch()}),[]),o.useEffect((()=>{let e=0;Object.keys(oe||[]).forEach((t=>{var o;Object.keys((null===(o=oe[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=oe[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),N(e)})),o.useEffect((()=>{var e;z&&!(null===(e=null==w?void 0:w[z])||void 0===e?void 0:e.products)&&(K(!0),j.productFetcher(z,x).then((e=>{Object.keys(e).length&&A({type:"productsFetched",data:{collectionId:z,products:e}}),K(!1)})).catch())}),[z]),o.useEffect((()=>{const e=setTimeout((()=>{"rearrange"!==E&&(Y.length?(W(!0),j.searchFetcher(x,Y).then((e=>{te(Object.assign({},e)),L("searchProducts"),K(!1),W(!1)}))):L("collections"))}),800);return()=>clearTimeout(e)}),[Y]);const re=()=>{ce({type:"reset",data:{}})};return e.jsx(n.StyledModal,Object.assign({zIndex:m,open:v,onClose:()=>{b(),re()},headingTitle:T||("collections"===B||"products"===B?"Select Products":"view"===B?"Selected Products":"searchProducts"===B?"Searched Products":"rearrange"===B?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:R||"480px"},headerRightCustomElement:"rearrange"===B?(console.log("ignore:",M),e.jsx(e.Fragment,{})):e.jsx(e.Fragment,{}),primaryButton:{buttonText:$?"Loading...":"rearrange"===B?"Done":"Add",disabled:$||U<1||f&&U>f||!1,onClick:()=>{j.onAdd(oe,U),re()}},footerLeftCustomElement:F?e.jsx(e.Fragment,{}):f&&U>f?e.jsx(l.Tag,{tagText:`You can only select ${f} products`,type:"negative"}):U>0?e.jsx(r.Button,{onClick:()=>{L(D?"rearrange":"view")},buttonText:`${U} products selected`,buttonType:["rearrange","view"].includes(B)?"tertiaryGray":"tertiary"}):e.jsx(r.Button,{disabled:!0,buttonText:`${U} products selected`,buttonType:"tertiaryGray"})},{children:e.jsxs(g.ContainerStyle,{children:[j.postHeader&&e.jsx("div",Object.assign({style:{padding:"0 24px"}},{children:j.postHeader})),!j.hideGlobalSearch&&e.jsx(e.Fragment,{children:("collections"===B||"searchProducts"===B)&&e.jsx("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:e.jsx(s.Input,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Q?e.jsx(i.Spinner,{size:"small",color:c.COLORS.content.primary}):e.jsx(t.default,{})},id:"listInput",height:"24px",type:"text",value:Y,onChangeText:e=>{e.length&&e.trim().length?J(e):J("")}})}))}),e.jsxs(g.ScrollContainerStyle,{children:["collections"===B&&e.jsx(a.CollectionsScreen,{customCollectionRestriction:j.customCollectionRestriction,dataLoading:X,collections:w,selectedCollectionsDispatch:ce,setCollectionId:G,setScreen:L,selectedCollections:oe,collectionFetcher:j.collectionFetcher,storeId:x,collectionsDispatch:A,setSaveDisabled:K,pagingControls:{curPage:H,setCurPage:V},hideCollectionCheckbox:O}),"products"===B&&z&&e.jsx(h.CollectionIdContext.Provider,Object.assign({value:z},{children:e.jsx(d.ProductsScreen,{hideInCollectionSearch:j.hideInCollectionSearch,customCollectionRestriction:j.customCollectionRestriction,productFetcher:j.productFetcher,setScreen:L,storeId:x,data:w[z],collectionsDispatch:A,selectedCollectionsDispatch:ce,selectedData:oe,setSaveDisabled:K,searchInCollectionFetcher:j.searchInCollectionFetcher,hideProductCheckbox:P,outOfStockAction:k,hideVariantCheckbox:I,selectProductsFromCustomCollection:q})})),"view"===B&&e.jsx(C.SelectedScreen,{selectedCollections:oe||{},selectedCollectionsDispatch:ce,setScreen:L,collections:w}),"rearrange"===B&&e.jsx(u.RearrangeScreen,{selectedCollections:oe||{},selectedCollectionsDispatch:ce,setScreen:L,outOfStockAction:k,rearrangeViewType:"grid"===_?"list":"grid"}),"searchProducts"===B&&e.jsx(p.SearchScreen,{customCollectionRestriction:j.customCollectionRestriction,selectedCollections:oe||{},searchedCollections:ee||{},selectedCollectionsDispatch:ce,setScreen:L,collections:w,onBackPress:()=>{J(""),te({})}})]})]})}))};

package/dist/cjs/components/product-picker-v2/rearrangeScreen.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import { SelectedItems } from '.';
 import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
 interface RearrangeScreenInterface {
     selectedCollections: SelectedItems;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
     setScreen: React.Dispatch<React.SetStateAction<string>>;
     rearrangeViewType: 'grid' | 'list';
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
 }
 /**
  * Screen will be opened on two conditions -

package/dist/cjs/components/product-picker-v2/rearrangeScreen.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),s=require("react"),r=require("react-beautiful-dnd"),n=require("../icon-button/IconButton.js"),c=require("../TypographyStyle.js"),i=require("./emptyState.js"),o=require("./helpers/ProductHelper.js"),l=require("./style.js"),a=require("./variantComponents.js");exports.RearrangeScreen=d=>{const{selectedCollections:u,selectedCollectionsDispatch:p,setScreen:j,rearrangeViewType:g}=d;console.log("vj: inside rearrangeScreen",u);const[S,x]=s.useState(o.parseSelectedVariantsToArray(u));console.log("vj: selected variants",S),console.log("vj: selected Collections",u);return e.jsxs(r.DragDropContext,Object.assign({onDragEnd:e=>{if(!e.destination)return;const t=S,[s]=t.splice(e.source.index,1);t.splice(e.destination.index,0,s),t.forEach(((e,t)=>{e.displayOrder=t})),console.log("vj: drag ended",t),x(t)}},{children:[e.jsxs(l.SelectedScreenHeader,{children:[e.jsx(n.IconButton,{Icon:t.default,onClick:()=>{j("collections")}}),e.jsx(c.BodyCaption,{children:"All Products"})]}),Object.keys(u).length>0?"list"===g?e.jsx(a.VariantsList,{selectedVariants:S,setSelectedVariants:x,selectedCollectionsDispatch:p}):e.jsx(a.VariantsGrid,{selectedVariants:S,setSelectedVariants:x,selectedCollectionsDispatch:p}):e.jsx(i.EmptyState,{title:"No Products Selected",subtitle:"Select products will appear here"})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/arrow_left.svg.js"),r=require("react"),s=require("react-beautiful-dnd"),i=require("../icon-button/IconButton.js"),c=require("../TypographyStyle.js"),n=require("./emptyState.js"),a=require("./helpers/ProductHelper.js"),o=require("./style.js"),l=require("./variantComponents.js");exports.RearrangeScreen=d=>{const{selectedCollections:u,selectedCollectionsDispatch:p,setScreen:j,rearrangeViewType:S,outOfStockAction:x}=d,[y,h]=r.useState(a.parseSelectedVariantsToArray(u));r.useEffect((()=>{h(a.parseSelectedVariantsToArray(u))}),[u]);return e.jsxs(s.DragDropContext,Object.assign({onDragEnd:e=>{if(!e.destination)return;const t=y,[r]=t.splice(e.source.index,1);t.splice(e.destination.index,0,r),t.forEach(((e,t)=>{e.displayOrder=t})),h(t)}},{children:[e.jsxs(o.SelectedScreenHeader,{children:[e.jsx(i.IconButton,{Icon:t.default,onClick:()=>{j("collections")}}),e.jsx(c.BodyCaption,{children:"All Products"})]}),Object.keys(u).length>0?"list"===S?e.jsx(l.VariantsList,{selectedVariants:y,setSelectedVariants:h,selectedCollectionsDispatch:p,outOfStockAction:x}):e.jsx(l.VariantsGrid,{selectedVariants:y,setSelectedVariants:h,selectedCollectionsDispatch:p}):e.jsx(n.EmptyState,{title:"No Products Selected",subtitle:"Select products will appear here"})]}))};

package/dist/cjs/components/product-picker-v2/style.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const o=r.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e);const o=l.default.div`
 	display: flex;
 	background-color: white;
 	max-height: 600px;
 	min-height: 600px;
 	flex-direction: column;
-`,l=r.default.div`
+`,r=l.default.div`
 	overflow-y: scroll;
 	overflow-x: hidden;
-`,n=r.default.div`
+`,n=l.default.div`
 	height: 64px;
 	background-color: ${e=>e.isDisabled?"#F0F0F0":"white"};
 	border-bottom: 1px solid #e0e0e0;
@@ -17,17 +17,17 @@
 	column-gap: 16px;
 	justify-content: space-between;
 	align-items: center;
-`,d=r.default.div`
+`,d=l.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	column-gap: 18px;
-`,a=r.default.div`
+`,a=l.default.div`
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-`,p=r.default.div`
+`,p=l.default.div`
 	display: flex;
 	flex-direction: row;
 	max-height: 32px;
@@ -37,14 +37,14 @@
 	align-items: center;
 	padding: 8px 16px;
 	margin-top: 16px;
-`,x=r.default.div`
+`,x=l.default.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 16px;
 	padding: 12px 16px;
 	border-bottom: 1px solid #e0e0e0;
 	align-items: center;
-`,c=r.default.div`
+`,c=l.default.div`
 	height: 64px;
 	background-color: white;
 	border-bottom: 1px solid #e0e0e0;
@@ -55,7 +55,7 @@
 	justify-content: flex-start;
 	align-items: center;
 	padding-left: ${e=>e.isVariant?"42px":"16px"};
-`,s=r.default.div`
+`,s=l.default.div`
 	display: flex;
 	flex-direction: row;
 	max-height: 32px;
@@ -64,10 +64,10 @@
 	justify-content: flex-start;
 	align-items: center;
 	padding: 8px 16px;
-`,f=r.default.div`
+`,f=l.default.div`
 	display: flex;
 	flex-direction: column;
-`,u=r.default.div`
+`,u=l.default.div`
 	height: 72px;
 	background: white;
 	padding: 12px 16px;
@@ -77,14 +77,21 @@
 	align-items: center;
 	justify-content: center;
 	margin: 5px;
-`,g=r.default.div`
+
+	.tooltip-title-tag {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: 2px;
+	}
+`,g=l.default.div`
 	height: 72px;
 	width: 72px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin: 16px;
-`;r.default.div`
+`;l.default.div`
 	display: flex;
 	width: 32px;
 	height: 32px;
@@ -93,4 +100,4 @@
 	align-items: center;
 	border: 1px solid ${t.COLORS.stroke.primary};
 	border-radius: 4px;
-`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=d,exports.CollectionCardStyle=n,exports.CollectionNameHolder=f,exports.ContainerStyle=o,exports.ProductCardStyle=c,exports.ProductScreenCollectionCardStyle=x,exports.ProductScreenHeader=p,exports.ScrollContainerStyle=l,exports.SelectedScreenHeader=s,exports.VariantCardGridStyle=g,exports.VariantCardListStyle=u;
+`,exports.CollectionCardDetailStyle=a,exports.CollectionCardInfoStyle=d,exports.CollectionCardStyle=n,exports.CollectionNameHolder=f,exports.ContainerStyle=o,exports.ProductCardStyle=c,exports.ProductScreenCollectionCardStyle=x,exports.ProductScreenHeader=p,exports.ScrollContainerStyle=r,exports.SelectedScreenHeader=s,exports.VariantCardGridStyle=g,exports.VariantCardListStyle=u;

package/dist/cjs/components/product-picker-v2/variant.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),r=require("../../assets/icons/drag_handle.svg.js"),i=require("../../constants/Theme.js"),a=require("../icon-button/IconButton.js"),s=require("../shimmer-image/ShimmerImage.js"),l=require("../TypographyStyle.js"),n=require("./helpers/ProductHelper.js"),o=require("./style.js"),d=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js");exports.VariantCardGridView=t=>{const{data:r}=t;return e.jsx(o.VariantCardGridStyle,{children:e.jsx(c.Tooltip,Object.assign({body:r.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e.jsx(s.ShimmerImage,{width:72,height:72,imageUrl:r.image,alt:"Item",borderRadius:4})}))})},exports.VariantCardListView=c=>{const{data:h,selectedCollectionsDispatch:u,outOfStockAction:j}=c,g=n.ProductHelper.getProductLabels(h,j);return e.jsxs(o.VariantCardListStyle,{children:[e.jsx(r.default,{width:24,height:24,color:i.COLORS.content.placeholder}),e.jsx("div",{children:e.jsx(s.ShimmerImage,{width:40,height:40,imageUrl:h.image,alt:"Item",borderRadius:4},h.variantId)}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:2}},{children:[e.jsx(l.TitleRegular,{children:`${h.productName} ${h.name}`}),g?e.jsx("div",Object.assign({style:{width:90,display:"flex"}},{children:e.jsx(d.Tag,{tagText:g,type:"warning",theme:"light"})})):e.jsx(e.Fragment,{})]})),e.jsx(a.IconButton,{Icon:()=>e.jsx(t.default,{width:24,height:24,color:i.COLORS.content.placeholder}),onClick:()=>{u&&u({type:"variantUnselected",data:{productId:h.productId,variantId:h.variantId,collectionId:h.collectionId}}),c.onDelete&&c.onDelete()}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),r=require("../../assets/icons/drag_handle.svg.js"),i=require("../../constants/Theme.js"),a=require("../icon-button/IconButton.js"),s=require("../shimmer-image/ShimmerImage.js"),o=require("../TypographyStyle.js"),l=require("./collectionScreen.js"),n=require("./helpers/ProductHelper.js"),d=require("./style.js"),c=require("../tooltips/Tooltip.js"),u=require("../tag/Tag.js");exports.VariantCardGridView=t=>{const{data:r}=t;return e.jsx(d.VariantCardGridStyle,{children:e.jsx(c.Tooltip,Object.assign({body:r.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e.jsx(s.ShimmerImage,{width:72,height:72,imageUrl:r.image,alt:"Item",borderRadius:4})}))})},exports.VariantCardListView=h=>{const{data:j,selectedCollectionsDispatch:m,outOfStockAction:g}=h,p=n.ProductHelper.getProductLabels(j,g);return e.jsxs(d.VariantCardListStyle,{children:[e.jsx(r.default,{width:24,height:24,color:i.COLORS.content.placeholder}),e.jsx("div",{children:e.jsx(s.ShimmerImage,{width:40,height:40,imageUrl:j.image,alt:"Item",borderRadius:4},j.variantId)}),e.jsxs("div",Object.assign({className:"tooltip-title-tag"},{children:[e.jsx(c.Tooltip,Object.assign({body:`${j.productName} ${j.name}`,placement:"bottom"},{children:e.jsx(o.TitleRegular,{children:l.truncate(`${j.productName} ${j.name}`,34,!0)})})),p?e.jsx("div",Object.assign({style:{width:90,display:"flex"}},{children:e.jsx(u.Tag,{tagText:p,type:"warning",theme:"light"})})):e.jsx(e.Fragment,{})]})),e.jsx(a.IconButton,{Icon:()=>e.jsx(t.default,{width:24,height:24,color:i.COLORS.content.placeholder}),onClick:()=>{m&&m({type:"variantUnselected",data:{productId:j.productId,variantId:j.variantId,collectionId:j.collectionId}}),h.onDelete&&h.onDelete()}})]})};

package/dist/cjs/components/product-picker-v2/variantComponents.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
 import { ProductVariantForRearrange } from './variant';
 /**
  * Props for list of variants - applicable both in list and grid view
@@ -8,11 +9,12 @@ export type VariantsComponentProps = {
     selectedVariants: ProductVariantForRearrange[];
     setSelectedVariants: React.Dispatch<React.SetStateAction<ProductVariantForRearrange[]>>;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
 };
 /**
  * Returns a react component of variants list, which are eligible to drag and drop.
  */
-export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, outOfStockAction, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Returns a react component of variants grid, which are eligible to drag and drop.
  */

package/dist/cjs/components/product-picker-v2/variantComponents.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-beautiful-dnd"),a=require("../../constants/Theme.js"),s=require("./variant.js");exports.VariantsGrid=a=>{let{selectedVariants:d}=a;return e.jsx(r.Droppable,Object.assign({droppableId:"droppable-horizontal"},{children:a=>e.jsxs("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",width:"500px"})},{children:[e.jsx(r.Droppable,Object.assign({droppableId:"droppable-vertical",direction:"horizontal"},{children:a=>e.jsxs("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"})},{children:[d.map(((a,d)=>e.jsx(r.Draggable,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:d},{children:(r,d)=>e.jsxs("div",Object.assign({ref:r.innerRef},r.draggableProps,r.dragHandleProps,{children:[e.jsx(s.VariantCardGridView,{data:a}),r.placeholder]}))}),`${a.productId}-${a.variantId}`))),a.placeholder]}))})),a.placeholder]}))}))},exports.VariantsList=d=>{let{selectedVariants:i,setSelectedVariants:t,selectedCollectionsDispatch:l}=d;return e.jsx(r.Droppable,Object.assign({droppableId:"droppable-list"},{children:d=>e.jsxs("div",Object.assign({},d.droppableProps,{ref:d.innerRef,style:Object.assign({backgroundColor:a.COLORS.surface.subdued,padding:"0.05px",height:i.length<8?"550px":"100%"},d.droppableProps.style)},{children:[i.map(((a,d)=>e.jsx(r.Draggable,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:d},{children:(r,n)=>e.jsx("div",Object.assign({ref:r.innerRef},r.draggableProps,r.dragHandleProps,{children:e.jsx(s.VariantCardListView,{data:a,selectedCollectionsDispatch:l,onDelete:()=>{const e=i.slice();e[d].displayOrder=null,e.splice(d,1),t(e)}},`${a.productId}-${a.variantId}`)}))}),`${a.productId}-${a.variantId}`))),d.placeholder]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-beautiful-dnd"),a=require("../../constants/Theme.js"),s=require("./variant.js");exports.VariantsGrid=a=>{let{selectedVariants:d}=a;return e.jsx(r.Droppable,Object.assign({droppableId:"droppable-horizontal"},{children:a=>e.jsxs("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",width:"500px"})},{children:[e.jsx(r.Droppable,Object.assign({droppableId:"droppable-vertical",direction:"horizontal"},{children:a=>e.jsxs("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"})},{children:[d.map(((a,d)=>e.jsx(r.Draggable,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:d},{children:(r,d)=>e.jsxs("div",Object.assign({ref:r.innerRef},r.draggableProps,r.dragHandleProps,{children:[e.jsx(s.VariantCardGridView,{data:a}),r.placeholder]}))}),`${a.productId}-${a.variantId}`))),a.placeholder]}))})),a.placeholder]}))}))},exports.VariantsList=d=>{let{selectedVariants:t,setSelectedVariants:i,selectedCollectionsDispatch:l,outOfStockAction:n}=d;return e.jsx(r.Droppable,Object.assign({droppableId:"droppable-list"},{children:d=>e.jsxs("div",Object.assign({},d.droppableProps,{ref:d.innerRef,style:Object.assign({backgroundColor:a.COLORS.surface.subdued,padding:"0.05px",height:t.length<8?"550px":"100%"},d.droppableProps.style)},{children:[t.map(((a,d)=>e.jsx(r.Draggable,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:d},{children:(r,p)=>e.jsx("div",Object.assign({ref:r.innerRef},r.draggableProps,r.dragHandleProps,{children:e.jsx(s.VariantCardListView,{data:a,selectedCollectionsDispatch:l,onDelete:()=>{const e=t.slice();e[d].displayOrder=null,e.splice(d,1),i(e)},outOfStockAction:n},`${a.productId}-${a.variantId}`)}))}),`${a.productId}-${a.variantId}`))),d.placeholder]}))}))};

package/dist/esm/components/product-picker-v2/helpers/ProductHelper.js

@@ -1 +1 @@
-import{OUT_OF_STOCK_ACTION as n}from"../type.js";const t={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock"};class i{static getProductLabels(i){let l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.NORMAL,u="NORMAL";if(i.variants)return t[u];const d=i;return l===n.HIDE&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),l===n.BLUR&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="OUT_OF_STOCK"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),l===n.NORMAL&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NORMAL"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),t[u]}}const l=n=>{let t=[];console.log("vj: inside parser",n),Object.keys(n).forEach((i=>{var l;return Object.keys((null===(l=null==n?void 0:n[i])||void 0===l?void 0:l.products)||[]).forEach((l=>{var u,d;const o=null!==(u=n[i].products)&&void 0!==u?u:[],a=null!==(d=o[l].variants)&&void 0!==d?d:[];return Object.keys(a).map((n=>{const t=a[n];t.variantId=n,t.productId=l,t.collectionId=i,t.productName=o[l].name})),t=[...t,...Object.values(a)],t}))}));const i=t.sort(((n,t)=>null==n.displayOrder&&null==t.displayOrder?0:null==n.displayOrder?1:null==t.displayOrder?-1:n.displayOrder-t.displayOrder));return i.forEach(((n,t)=>{n.displayOrder=t})),i};export{i as ProductHelper,l as parseSelectedVariantsToArray};
+import{OUT_OF_STOCK_ACTION as n}from"../type.js";const t={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock"};class i{static getProductLabels(i){let l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.NORMAL,u="NORMAL";if(i.variants)return t[u];const d=i;return l===n.HIDE&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),l===n.BLUR&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="OUT_OF_STOCK"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),l===n.NORMAL&&(!d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NOT_SYNCED"),d.skipSync&&0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)&&(u="NOT_SYNCED"),d.skipSync||0!==(null==d?void 0:d.quantity)&&-2!==(null==d?void 0:d.quantity)||(u="NORMAL"),d.skipSync||0===(null==d?void 0:d.quantity)||-2===(null==d?void 0:d.quantity)||(u="NORMAL")),t[u]}}const l=n=>{let t=[];Object.keys(n).forEach((i=>{var l;return Object.keys((null===(l=null==n?void 0:n[i])||void 0===l?void 0:l.products)||[]).forEach((l=>{var u,d;const o=null!==(u=n[i].products)&&void 0!==u?u:[],a=null!==(d=o[l].variants)&&void 0!==d?d:[];return Object.keys(a).map((n=>{const t=a[n];t.variantId=n,t.productId=l,t.collectionId=i,t.productName=o[l].name})),t=[...t,...Object.values(a)],t}))}));const i=t.sort(((n,t)=>null==n.displayOrder&&null==t.displayOrder?0:null==n.displayOrder?1:null==t.displayOrder?-1:n.displayOrder-t.displayOrder));return i.forEach(((n,t)=>{n.displayOrder=t})),i};export{i as ProductHelper,l as parseSelectedVariantsToArray};

package/dist/esm/components/product-picker-v2/modal.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useEffect as i}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as l}from"../button/Button.js";import{Input as d}from"../input/Input.js";import{StyledModal as a}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as u}from"../tag/Tag.js";import{CollectionsScreen as p}from"./collectionScreen.js";import{ProductsScreen as m}from"./productScreen.js";import{RearrangeScreen as g}from"./rearrangeScreen.js";import{collectionsReducer as C,selectedColectionsReducer as b,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as y}from"./searchScreen.js";import{SelectedScreen as f}from"./selectedScreen.js";import{ContainerStyle as j,ScrollContainerStyle as S}from"./style.js";import{OUT_OF_STOCK_ACTION as x}from"./type.js";const k=k=>{const{storeId:P,selectedItems:I,onClose:T,visible:D,zIndex:F,limit:O,hideCollectionCheckbox:E,hideProductCheckbox:w,outOfStockAction:R=x.BLUR,hideVariantCheckbox:A,selectProductsFromCustomCollection:B,hideSelectionCount:L,title:z,width:G,startupScreen:H="collections",rearrangeAfterSelectionEnabled:V}=k,[$,K]=r(C,{}),[M,U]=s(H),[Y,q]=s("grid"),[J,N]=s(""),[Q,W]=s(0),[X,Z]=s(!1),[_,ee]=s(0),[te,oe]=s(""),[ce,re]=s(!1),[se,ie]=s(!1),[ne,le]=s(),[de,ae]=r(b,Object.keys(I).length>0?I:{});i((()=>{Z(!0),ie(!0),k.collectionFetcher(Q,P).then((e=>{K({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Z(!1),W((e=>e+1)),ie(!1)})).catch()}),[]),i((()=>{let e=0;Object.keys(de||[]).forEach((t=>{var o;Object.keys((null===(o=de[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=de[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),ee(e)})),i((()=>{var e;J&&!(null===(e=null==$?void 0:$[J])||void 0===e?void 0:e.products)&&(Z(!0),k.productFetcher(J,P).then((e=>{Object.keys(e).length&&K({type:"productsFetched",data:{collectionId:J,products:e}}),Z(!1)})).catch())}),[J]),i((()=>{const e=setTimeout((()=>{"rearrange"!==H&&(te.length?(re(!0),k.searchFetcher(P,te).then((e=>{le(Object.assign({},e)),U("searchProducts"),Z(!1),re(!1)}))):U("collections"))}),800);return()=>clearTimeout(e)}),[te]);const he=()=>{ae({type:"reset",data:{}})};return e(a,Object.assign({zIndex:F,open:D,onClose:()=>{T(),he()},headingTitle:z||("collections"===M||"products"===M?"Select Products":"view"===M?"Selected Products":"searchProducts"===M?"Searched Products":"rearrange"===M?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:G||"480px"},headerRightCustomElement:"rearrange"===M?(console.log("ignore:",q),e(t,{})):e(t,{}),primaryButton:{buttonText:X?"Loading...":"rearrange"===M?"Done":"Add",disabled:X||_<1||O&&_>O||!1,onClick:()=>{console.log("vj: selectedCollections on add",de),k.onAdd(de,_),he()}},footerLeftCustomElement:L?e(t,{}):O&&_>O?e(u,{tagText:`You can only select ${O} products`,type:"negative"}):e(l,_>0?{onClick:()=>{U(V?"rearrange":"view")},buttonText:`${_} products selected`,buttonType:["rearrange","view"].includes(M)?"tertiaryGray":"tertiary"}:{disabled:!0,buttonText:`${_} products selected`,buttonType:"tertiaryGray"})},{children:o(j,{children:[k.postHeader&&e("div",Object.assign({style:{padding:"0 24px"}},{children:k.postHeader})),!k.hideGlobalSearch&&e(t,{children:("collections"===M||"searchProducts"===M)&&e("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:e(d,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ce?e(h,{size:"small",color:n.content.primary}):e(c,{})},id:"listInput",height:"24px",type:"text",value:te,onChangeText:e=>{e.length&&e.trim().length?oe(e):oe("")}})}))}),o(S,{children:["collections"===M&&e(p,{customCollectionRestriction:k.customCollectionRestriction,dataLoading:se,collections:$,selectedCollectionsDispatch:ae,setCollectionId:N,setScreen:U,selectedCollections:de,collectionFetcher:k.collectionFetcher,storeId:P,collectionsDispatch:K,setSaveDisabled:Z,pagingControls:{curPage:Q,setCurPage:W},hideCollectionCheckbox:E}),"products"===M&&J&&e(v.Provider,Object.assign({value:J},{children:e(m,{hideInCollectionSearch:k.hideInCollectionSearch,customCollectionRestriction:k.customCollectionRestriction,productFetcher:k.productFetcher,setScreen:U,storeId:P,data:$[J],collectionsDispatch:K,selectedCollectionsDispatch:ae,selectedData:de,setSaveDisabled:Z,searchInCollectionFetcher:k.searchInCollectionFetcher,hideProductCheckbox:w,outOfStockAction:R,hideVariantCheckbox:A,selectProductsFromCustomCollection:B})})),"view"===M&&e(f,{selectedCollections:de||{},selectedCollectionsDispatch:ae,setScreen:U,collections:$}),"rearrange"===M&&e(g,{selectedCollections:de||{},selectedCollectionsDispatch:ae,setScreen:U,rearrangeViewType:"grid"===Y?"list":"grid"}),"searchProducts"===M&&e(y,{customCollectionRestriction:k.customCollectionRestriction,selectedCollections:de||{},searchedCollections:ne||{},selectedCollectionsDispatch:ae,setScreen:U,collections:$,onBackPress:()=>{oe(""),le({})}})]})]})}))};export{k as ProductPickerModal};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useEffect as i}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as l}from"../button/Button.js";import{Input as d}from"../input/Input.js";import{StyledModal as a}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as u}from"../tag/Tag.js";import{CollectionsScreen as p}from"./collectionScreen.js";import{ProductsScreen as m}from"./productScreen.js";import{RearrangeScreen as g}from"./rearrangeScreen.js";import{collectionsReducer as C,selectedColectionsReducer as b,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as f}from"./searchScreen.js";import{SelectedScreen as y}from"./selectedScreen.js";import{ContainerStyle as S,ScrollContainerStyle as j}from"./style.js";import{OUT_OF_STOCK_ACTION as x}from"./type.js";const k=k=>{const{storeId:P,selectedItems:I,onClose:O,visible:T,zIndex:D,limit:F,hideCollectionCheckbox:E,hideProductCheckbox:w,outOfStockAction:R=x.BLUR,hideVariantCheckbox:A,selectProductsFromCustomCollection:B,hideSelectionCount:L,title:z,width:G,startupScreen:H="collections",rearrangeAfterSelectionEnabled:V}=k,[$,K]=r(C,{}),[M,U]=s(H),[Y,q]=s("grid"),[J,N]=s(""),[Q,W]=s(0),[X,Z]=s(!1),[_,ee]=s(0),[te,oe]=s(""),[ce,re]=s(!1),[se,ie]=s(!1),[ne,le]=s(),[de,ae]=r(b,Object.keys(I).length>0?I:{});i((()=>{Z(!0),ie(!0),k.collectionFetcher(Q,P).then((e=>{K({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Z(!1),W((e=>e+1)),ie(!1)})).catch()}),[]),i((()=>{let e=0;Object.keys(de||[]).forEach((t=>{var o;Object.keys((null===(o=de[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=de[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),ee(e)})),i((()=>{var e;J&&!(null===(e=null==$?void 0:$[J])||void 0===e?void 0:e.products)&&(Z(!0),k.productFetcher(J,P).then((e=>{Object.keys(e).length&&K({type:"productsFetched",data:{collectionId:J,products:e}}),Z(!1)})).catch())}),[J]),i((()=>{const e=setTimeout((()=>{"rearrange"!==H&&(te.length?(re(!0),k.searchFetcher(P,te).then((e=>{le(Object.assign({},e)),U("searchProducts"),Z(!1),re(!1)}))):U("collections"))}),800);return()=>clearTimeout(e)}),[te]);const he=()=>{ae({type:"reset",data:{}})};return e(a,Object.assign({zIndex:D,open:T,onClose:()=>{O(),he()},headingTitle:z||("collections"===M||"products"===M?"Select Products":"view"===M?"Selected Products":"searchProducts"===M?"Searched Products":"rearrange"===M?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:G||"480px"},headerRightCustomElement:"rearrange"===M?(console.log("ignore:",q),e(t,{})):e(t,{}),primaryButton:{buttonText:X?"Loading...":"rearrange"===M?"Done":"Add",disabled:X||_<1||F&&_>F||!1,onClick:()=>{k.onAdd(de,_),he()}},footerLeftCustomElement:L?e(t,{}):F&&_>F?e(u,{tagText:`You can only select ${F} products`,type:"negative"}):e(l,_>0?{onClick:()=>{U(V?"rearrange":"view")},buttonText:`${_} products selected`,buttonType:["rearrange","view"].includes(M)?"tertiaryGray":"tertiary"}:{disabled:!0,buttonText:`${_} products selected`,buttonType:"tertiaryGray"})},{children:o(S,{children:[k.postHeader&&e("div",Object.assign({style:{padding:"0 24px"}},{children:k.postHeader})),!k.hideGlobalSearch&&e(t,{children:("collections"===M||"searchProducts"===M)&&e("div",Object.assign({style:{padding:"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:e(d,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ce?e(h,{size:"small",color:n.content.primary}):e(c,{})},id:"listInput",height:"24px",type:"text",value:te,onChangeText:e=>{e.length&&e.trim().length?oe(e):oe("")}})}))}),o(j,{children:["collections"===M&&e(p,{customCollectionRestriction:k.customCollectionRestriction,dataLoading:se,collections:$,selectedCollectionsDispatch:ae,setCollectionId:N,setScreen:U,selectedCollections:de,collectionFetcher:k.collectionFetcher,storeId:P,collectionsDispatch:K,setSaveDisabled:Z,pagingControls:{curPage:Q,setCurPage:W},hideCollectionCheckbox:E}),"products"===M&&J&&e(v.Provider,Object.assign({value:J},{children:e(m,{hideInCollectionSearch:k.hideInCollectionSearch,customCollectionRestriction:k.customCollectionRestriction,productFetcher:k.productFetcher,setScreen:U,storeId:P,data:$[J],collectionsDispatch:K,selectedCollectionsDispatch:ae,selectedData:de,setSaveDisabled:Z,searchInCollectionFetcher:k.searchInCollectionFetcher,hideProductCheckbox:w,outOfStockAction:R,hideVariantCheckbox:A,selectProductsFromCustomCollection:B})})),"view"===M&&e(y,{selectedCollections:de||{},selectedCollectionsDispatch:ae,setScreen:U,collections:$}),"rearrange"===M&&e(g,{selectedCollections:de||{},selectedCollectionsDispatch:ae,setScreen:U,outOfStockAction:R,rearrangeViewType:"grid"===Y?"list":"grid"}),"searchProducts"===M&&e(f,{customCollectionRestriction:k.customCollectionRestriction,selectedCollections:de||{},searchedCollections:ne||{},selectedCollectionsDispatch:ae,setScreen:U,collections:$,onBackPress:()=>{oe(""),le({})}})]})]})}))};export{k as ProductPickerModal};

package/dist/esm/components/product-picker-v2/rearrangeScreen.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import { SelectedItems } from '.';
 import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
 interface RearrangeScreenInterface {
     selectedCollections: SelectedItems;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
     setScreen: React.Dispatch<React.SetStateAction<string>>;
     rearrangeViewType: 'grid' | 'list';
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
 }
 /**
  * Screen will be opened on two conditions -

package/dist/esm/components/product-picker-v2/rearrangeScreen.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r}from"react";import{DragDropContext as s}from"react-beautiful-dnd";import{IconButton as n}from"../icon-button/IconButton.js";import{BodyCaption as c}from"../TypographyStyle.js";import{EmptyState as l}from"./emptyState.js";import{parseSelectedVariantsToArray as i}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as a}from"./style.js";import{VariantsList as d,VariantsGrid as p}from"./variantComponents.js";const m=m=>{const{selectedCollections:f,selectedCollectionsDispatch:j,setScreen:u,rearrangeViewType:g}=m;console.log("vj: inside rearrangeScreen",f);const[h,y]=r(i(f));console.log("vj: selected variants",h),console.log("vj: selected Collections",f);return e(s,Object.assign({onDragEnd:e=>{if(!e.destination)return;const t=h,[o]=t.splice(e.source.index,1);t.splice(e.destination.index,0,o),t.forEach(((e,t)=>{e.displayOrder=t})),console.log("vj: drag ended",t),y(t)}},{children:[e(a,{children:[t(n,{Icon:o,onClick:()=>{u("collections")}}),t(c,{children:"All Products"})]}),Object.keys(f).length>0?t("list"===g?d:p,{selectedVariants:h,setSelectedVariants:y,selectedCollectionsDispatch:j}):t(l,{title:"No Products Selected",subtitle:"Select products will appear here"})]}))};export{m as RearrangeScreen};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r,useEffect as s}from"react";import{DragDropContext as i}from"react-beautiful-dnd";import{IconButton as c}from"../icon-button/IconButton.js";import{BodyCaption as n}from"../TypographyStyle.js";import{EmptyState as l}from"./emptyState.js";import{parseSelectedVariantsToArray as a}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as p}from"./style.js";import{VariantsList as d,VariantsGrid as m}from"./variantComponents.js";const f=f=>{const{selectedCollections:u,selectedCollectionsDispatch:h,setScreen:j,rearrangeViewType:S,outOfStockAction:y}=f,[g,C]=r(a(u));s((()=>{C(a(u))}),[u]);return e(i,Object.assign({onDragEnd:e=>{if(!e.destination)return;const t=g,[o]=t.splice(e.source.index,1);t.splice(e.destination.index,0,o),t.forEach(((e,t)=>{e.displayOrder=t})),C(t)}},{children:[e(p,{children:[t(c,{Icon:o,onClick:()=>{j("collections")}}),t(n,{children:"All Products"})]}),Object.keys(u).length>0?"list"===S?t(d,{selectedVariants:g,setSelectedVariants:C,selectedCollectionsDispatch:h,outOfStockAction:y}):t(m,{selectedVariants:g,setSelectedVariants:C,selectedCollectionsDispatch:h}):t(l,{title:"No Products Selected",subtitle:"Select products will appear here"})]}))};export{f as RearrangeScreen};

package/dist/esm/components/product-picker-v2/style.js

@@ -27,7 +27,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-`,r=e.div`
+`,l=e.div`
 	display: flex;
 	flex-direction: row;
 	max-height: 32px;
@@ -44,7 +44,7 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	padding: 12px 16px;
 	border-bottom: 1px solid #e0e0e0;
 	align-items: center;
-`,l=e.div`
+`,r=e.div`
 	height: 64px;
 	background-color: white;
 	border-bottom: 1px solid #e0e0e0;
@@ -77,6 +77,13 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	align-items: center;
 	justify-content: center;
 	margin: 5px;
+
+	.tooltip-title-tag {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: 2px;
+	}
 `,g=e.div`
 	height: 72px;
 	width: 72px;
@@ -93,4 +100,4 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	align-items: center;
 	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
-`;export{p as CollectionCardDetailStyle,d as CollectionCardInfoStyle,o as CollectionCardStyle,c as CollectionNameHolder,t as ContainerStyle,l as ProductCardStyle,x as ProductScreenCollectionCardStyle,r as ProductScreenHeader,n as ScrollContainerStyle,a as SelectedScreenHeader,g as VariantCardGridStyle,s as VariantCardListStyle};
+`;export{p as CollectionCardDetailStyle,d as CollectionCardInfoStyle,o as CollectionCardStyle,c as CollectionNameHolder,t as ContainerStyle,r as ProductCardStyle,x as ProductScreenCollectionCardStyle,l as ProductScreenHeader,n as ScrollContainerStyle,a as SelectedScreenHeader,g as VariantCardGridStyle,s as VariantCardListStyle};

package/dist/esm/components/product-picker-v2/variant.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/delete.svg.js";import r from"../../assets/icons/drag_handle.svg.js";import{COLORS as a}from"../../constants/Theme.js";import{IconButton as l}from"../icon-button/IconButton.js";import{ShimmerImage as n}from"../shimmer-image/ShimmerImage.js";import{TitleRegular as s}from"../TypographyStyle.js";import{ProductHelper as c}from"./helpers/ProductHelper.js";import{VariantCardListStyle as d,VariantCardGridStyle as m}from"./style.js";import{Tag as h}from"../tag/Tag.js";import{Tooltip as p}from"../tooltips/Tooltip.js";const g=m=>{const{data:p,selectedCollectionsDispatch:g,outOfStockAction:f}=m,j=c.getProductLabels(p,f);return t(d,{children:[e(r,{width:24,height:24,color:a.content.placeholder}),e("div",{children:e(n,{width:40,height:40,imageUrl:p.image,alt:"Item",borderRadius:4},p.variantId)}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:2}},{children:[e(s,{children:`${p.productName} ${p.name}`}),j?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(h,{tagText:j,type:"warning",theme:"light"})})):e(o,{})]})),e(l,{Icon:()=>e(i,{width:24,height:24,color:a.content.placeholder}),onClick:()=>{g&&g({type:"variantUnselected",data:{productId:p.productId,variantId:p.variantId,collectionId:p.collectionId}}),m.onDelete&&m.onDelete()}})]})},f=t=>{const{data:o}=t;return e(m,{children:e(p,Object.assign({body:o.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e(n,{width:72,height:72,imageUrl:o.image,alt:"Item",borderRadius:4})}))})};export{f as VariantCardGridView,g as VariantCardListView};
+import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/delete.svg.js";import r from"../../assets/icons/drag_handle.svg.js";import{COLORS as a}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as s}from"../shimmer-image/ShimmerImage.js";import{TitleRegular as c}from"../TypographyStyle.js";import{truncate as l}from"./collectionScreen.js";import{ProductHelper as m}from"./helpers/ProductHelper.js";import{VariantCardListStyle as d,VariantCardGridStyle as h}from"./style.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{Tag as g}from"../tag/Tag.js";const j=h=>{const{data:j,selectedCollectionsDispatch:f,outOfStockAction:u}=h,b=m.getProductLabels(j,u);return t(d,{children:[e(r,{width:24,height:24,color:a.content.placeholder}),e("div",{children:e(s,{width:40,height:40,imageUrl:j.image,alt:"Item",borderRadius:4},j.variantId)}),t("div",Object.assign({className:"tooltip-title-tag"},{children:[e(p,Object.assign({body:`${j.productName} ${j.name}`,placement:"bottom"},{children:e(c,{children:l(`${j.productName} ${j.name}`,34,!0)})})),b?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(g,{tagText:b,type:"warning",theme:"light"})})):e(o,{})]})),e(n,{Icon:()=>e(i,{width:24,height:24,color:a.content.placeholder}),onClick:()=>{f&&f({type:"variantUnselected",data:{productId:j.productId,variantId:j.variantId,collectionId:j.collectionId}}),h.onDelete&&h.onDelete()}})]})},f=t=>{const{data:o}=t;return e(h,{children:e(p,Object.assign({body:o.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e(s,{width:72,height:72,imageUrl:o.image,alt:"Item",borderRadius:4})}))})};export{f as VariantCardGridView,j as VariantCardListView};

package/dist/esm/components/product-picker-v2/variantComponents.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
 import { ProductVariantForRearrange } from './variant';
 /**
  * Props for list of variants - applicable both in list and grid view
@@ -8,11 +9,12 @@ export type VariantsComponentProps = {
     selectedVariants: ProductVariantForRearrange[];
     setSelectedVariants: React.Dispatch<React.SetStateAction<ProductVariantForRearrange[]>>;
     selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
 };
 /**
  * Returns a react component of variants list, which are eligible to drag and drop.
  */
-export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, outOfStockAction, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Returns a react component of variants grid, which are eligible to drag and drop.
  */

package/dist/esm/components/product-picker-v2/variantComponents.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Droppable as a,Draggable as d}from"react-beautiful-dnd";import{COLORS as t}from"../../constants/Theme.js";import{VariantCardListView as s,VariantCardGridView as i}from"./variant.js";const l=i=>{let{selectedVariants:l,setSelectedVariants:n,selectedCollectionsDispatch:p}=i;return e(a,Object.assign({droppableId:"droppable-list"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign({backgroundColor:t.surface.subdued,padding:"0.05px",height:l.length<8?"550px":"100%"},a.droppableProps.style)},{children:[l.map(((r,a)=>e(d,Object.assign({draggableId:`${r.productId}-${r.variantId}`,index:a},{children:(d,t)=>e("div",Object.assign({ref:d.innerRef},d.draggableProps,d.dragHandleProps,{children:e(s,{data:r,selectedCollectionsDispatch:p,onDelete:()=>{const e=l.slice();e[a].displayOrder=null,e.splice(a,1),n(e)}},`${r.productId}-${r.variantId}`)}))}),`${r.productId}-${r.variantId}`))),a.placeholder]}))}))},n=t=>{let{selectedVariants:s}=t;return e(a,Object.assign({droppableId:"droppable-horizontal"},{children:t=>r("div",Object.assign({},t.droppableProps,{ref:t.innerRef,style:Object.assign(Object.assign({},t.droppableProps.style),{display:"flex",width:"500px"})},{children:[e(a,Object.assign({droppableId:"droppable-vertical",direction:"horizontal"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"})},{children:[s.map(((a,t)=>e(d,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:t},{children:(d,t)=>r("div",Object.assign({ref:d.innerRef},d.draggableProps,d.dragHandleProps,{children:[e(i,{data:a}),d.placeholder]}))}),`${a.productId}-${a.variantId}`))),a.placeholder]}))})),t.placeholder]}))}))};export{n as VariantsGrid,l as VariantsList};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Droppable as a,Draggable as d}from"react-beautiful-dnd";import{COLORS as t}from"../../constants/Theme.js";import{VariantCardListView as i,VariantCardGridView as s}from"./variant.js";const l=s=>{let{selectedVariants:l,setSelectedVariants:n,selectedCollectionsDispatch:o,outOfStockAction:p}=s;return e(a,Object.assign({droppableId:"droppable-list"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign({backgroundColor:t.surface.subdued,padding:"0.05px",height:l.length<8?"550px":"100%"},a.droppableProps.style)},{children:[l.map(((r,a)=>e(d,Object.assign({draggableId:`${r.productId}-${r.variantId}`,index:a},{children:(d,t)=>e("div",Object.assign({ref:d.innerRef},d.draggableProps,d.dragHandleProps,{children:e(i,{data:r,selectedCollectionsDispatch:o,onDelete:()=>{const e=l.slice();e[a].displayOrder=null,e.splice(a,1),n(e)},outOfStockAction:p},`${r.productId}-${r.variantId}`)}))}),`${r.productId}-${r.variantId}`))),a.placeholder]}))}))},n=t=>{let{selectedVariants:i}=t;return e(a,Object.assign({droppableId:"droppable-horizontal"},{children:t=>r("div",Object.assign({},t.droppableProps,{ref:t.innerRef,style:Object.assign(Object.assign({},t.droppableProps.style),{display:"flex",width:"500px"})},{children:[e(a,Object.assign({droppableId:"droppable-vertical",direction:"horizontal"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"})},{children:[i.map(((a,t)=>e(d,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:t},{children:(d,t)=>r("div",Object.assign({ref:d.innerRef},d.draggableProps,d.dragHandleProps,{children:[e(s,{data:a}),d.placeholder]}))}),`${a.productId}-${a.variantId}`))),a.placeholder]}))})),t.placeholder]}))}))};export{n as VariantsGrid,l as VariantsList};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.382-beta.5",
+	"version": "0.0.382-beta.7",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",