@bikdotai/bik-component-library 0.0.552 → 0.0.553-beta.1

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{MenuItem as n}from"./MenuItem.js";import{StyledGroupedLabel as o}from"./MenuList.styled.js";const s=s=>{let{options:r,isMultiSelect:l,showDescription:c,onSelect:p,version:a}=s;return e(t,{children:r.map(((s,m)=>{const g=m===r.length-1;if(s.options){const r=s;return i("div",Object.assign({style:{marginTop:"2.0"===a?2:0}},{children:[i(o,Object.assign({version:a},{children:[r.leadingIcon?e("span",Object.assign({style:{marginRight:8}},{children:r.leadingIcon})):e(t,{}),r.label]})),r.options.map(((t,i)=>e(n,{version:a,last:i===r.options.length-1,onSelect:p,showDescription:c,isMultiSelect:l,option:t},`${m}-${i}`)))]}),m)}return e(n,{version:a,last:g,onSelect:p,showDescription:c,isMultiSelect:l,option:s},m)}))})};export{s as MenuList};
+import{jsx as n,Fragment as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useCallback as o,useEffect as i}from"react";import{MenuItem as s}from"./MenuItem.js";import{StyledGroupedLabel as c}from"./MenuList.styled.js";const l=l=>{let{options:p,isMultiSelect:u,showDescription:a,onSelect:m,version:d,onInfiniteScroll:g,onDropdownItemClick:h}=l;const I=r(null),f=r(null),v=o((()=>{I.current&&I.current.disconnect(),I.current=new IntersectionObserver((n=>{n[0].isIntersecting&&(null==g||g())})),f.current&&I.current.observe(f.current)}),[g]);return i((()=>(v(),()=>{I.current&&I.current.disconnect()})),[v,p]),n(e,{children:p.map(((r,o)=>{const i=o===p.length-1;if(r.options){const l=r;return t("div",Object.assign({style:{marginTop:"2.0"===d?2:0}},{children:[t(c,Object.assign({version:d},{children:[l.leadingIcon?n("span",Object.assign({style:{marginRight:8}},{children:l.leadingIcon})):n(e,{}),l.label]})),l.options.map(((e,t)=>n(s,{version:d,last:t===l.options.length-1,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:e},`${o}-${t}`))),i?n("span",{ref:f}):null]}),o)}return t("div",{children:[n(s,{version:d,last:i,onSelect:m,showDescription:a,onDropdownItemClick:h,isMultiSelect:u,option:r},o),i?n("span",{ref:f}):null]},o)}))})};export{l as MenuList};

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { DropdownOption } from '../../../type';
-declare const MultiSelectDropdownBottomBar: React.FC<{
+import { ButtonOptions, DropdownOption } from '../../../type';
+interface MultiSelectDropdownBottomBarProps {
     onClear?: () => void;
     onApply: () => void;
     list: DropdownOption[];
     buttonText?: string;
-}>;
+    buttonOptions?: ButtonOptions;
+}
+declare const MultiSelectDropdownBottomBar: React.FC<MultiSelectDropdownBottomBarProps>;
 export default MultiSelectDropdownBottomBar;

package/dist/esm/components/dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as r}from"../../../../TypographyStyle.js";import{COLORS as l}from"../../../../../constants/Theme.js";import{BottomBarContainer as n}from"./MultiSelectDropdownBottomBar.styled.js";const s=s=>{let{onApply:i,onClear:c,list:p,buttonText:a}=s;const m=p.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(n,Object.assign({style:{justifyContent:"space-between"}},{children:[e(r,Object.assign({style:{flex:1,color:l.content.primary}},{children:m?`${m} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:"tertiaryGray",buttonText:"Clear",onClick:c}),e(o,{size:"small",buttonText:null!=a?a:"Apply",onClick:()=>{i()}})]}))]}))};export{s as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Button as o}from"../../../../button/Button.js";import{BodySecondary as n}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{BottomBarContainer as s}from"./MultiSelectDropdownBottomBar.styled.js";const l=l=>{const{onClear:i,onApply:p,list:a,buttonText:c,buttonOptions:y}=l,{primaryButtonText:u,primaryButtonType:m,secondaryButtonText:d,secondaryButtonType:f}=null!=y?y:{},b=a.reduce(((t,e)=>{if(e.options){return t+e.options.filter((t=>!0===t.selected)).length}return e.selected?t+1:t}),0);return t(s,Object.assign({style:{justifyContent:"space-between"}},{children:[e(n,Object.assign({style:{flex:1,color:r.content.primary}},{children:b?`${b} selected`:""})),t("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12}},{children:[e(o,{size:"small",buttonType:f||"primary",buttonText:d||"Clear",onClick:i}),e(o,{size:"small",buttonText:u||c||"Apply",buttonType:m||"primary",onClick:()=>{p()}})]}))]}))};export{l as default};

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const SearchZeroState: React.FC<{
     searchedString: string;
     height: number;
+    isLoading?: boolean;
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{ZeroState as t}from"../../../../zeroState/ZeroState.js";const r=r=>{let{searchedString:i,height:o}=r;return e("div",Object.assign({style:{height:o,display:"flex",alignItems:"center"}},{children:e(t,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=i?i:""}"`})}))};export{r as SearchZeroState};
+import{jsx as e}from"react/jsx-runtime";import{ZeroState as t}from"../../../../zeroState/ZeroState.js";const r=r=>{let{searchedString:i,height:o,isLoading:s}=r;return e("div",Object.assign({style:{height:o,display:"flex",alignItems:"center"}},{children:e(t,{isLoading:s,title:"No results found",subTitle:`Sorry we could not find any results for "${null!=i?i:""}"`})}))};export{r as SearchZeroState};

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -12,6 +12,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -24,6 +25,9 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     leadingIcon?: JSX.Element | undefined;
     customComponent?: JSX.Element | undefined;
     searchKey?: string | undefined;
+    selectedLabel?: string | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;
+export declare function getSelectedOptionsAsText(selectedOption: DropdownOption[]): string | undefined;
+export declare function getSelectedOptionsAsArray(selectedOption: DropdownOption[]): string[];

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js

@@ -1 +1 @@
-function s(s,n,t){return s.map((s=>{if(s.options){const i=s.options.map((s=>!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...i]})}return!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)}))}function n(s,n){s.forEach((s=>{s.options?s.options.forEach(n):n(s)}))}export{s as iterateOnOptions,n as iterateOnOptionsRaw};
+function n(n,t,s){return n.map((n=>{if(n.options){const e=n.options.map((n=>!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)));return Object.assign(Object.assign({},n),{options:[...e]})}return!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)}))}function t(n,t){n.forEach((n=>{n.options?n.options.forEach(t):t(n)}))}function s(n){if(n&&n.length)return n.map((n=>{var t;const s=n;return null!==(t=s.selectedLabel)&&void 0!==t?t:s.label})).join(", ")}export{s as getSelectedOptionsAsText,n as iterateOnOptions,t as iterateOnOptionsRaw};

package/dist/esm/components/dropdown/hooks/useDropdown.d.ts

@@ -19,6 +19,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -31,6 +32,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

package/dist/esm/components/dropdown/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Placement, PositioningStrategy } from '@popperjs/core';
+import { Type } from '../button/model';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -19,6 +20,11 @@ export interface OpenDropdownProps {
     headerRef?: any;
     hideSelectAll?: boolean;
     primaryButtonText?: string;
+    onInfiniteScroll?: () => void;
+    onMultiSelectClear?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
+    buttonOptions?: ButtonOptions;
+    isSearchLoading?: boolean;
 }
 export type GroupedOption = {
     label?: string;
@@ -37,7 +43,14 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
+    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
+export interface ButtonOptions {
+    primaryButtonText?: string;
+    primaryButtonType?: Type;
+    secondaryButtonText?: string;
+    secondaryButtonType?: Type;
+}
 export type { Placement };

package/dist/esm/components/icon-button/IconButton.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{IconButton as r}from"./IconButton.styled.js";import{getIconColor as s}from"./theme.js";const d=i(((i,d)=>{var{id:l,iconButtonType:n="default",Icon:c,height:a=20,width:m=20,bordered:y,disabled:h,isSelected:p,style:u,svgStyle:b}=i,f=e(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle"]);const g=s(n,h,p);return t(r,Object.assign({id:l,ref:d,style:u,iconButtonType:n,bordered:y,disabled:h,isSelected:p},f,{children:o.createElement(c,{height:a,width:m,color:g,style:Object.assign({display:"block"},null!=b?b:{})})}))}));d.displayName="IconButton";export{d as IconButton};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{IconButton as r}from"./IconButton.styled.js";import{getIconColor as s}from"./theme.js";const d=i(((i,d)=>{var{id:l,iconButtonType:n="default",Icon:c,height:a=20,width:m=20,bordered:y,disabled:h,isSelected:p,style:u,svgStyle:b,iconColor:f}=i,g=e(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor"]);const j=s(n,h,p);return t(r,Object.assign({id:l,ref:d,style:u,iconButtonType:n,bordered:y,disabled:h,isSelected:p},g,{children:o.createElement(c,{height:a,width:m,color:f||j,style:Object.assign({display:"block"},null!=b?b:{})})}))}));d.displayName="IconButton";export{d as IconButton};

package/dist/esm/components/icon-button/model.d.ts

@@ -39,4 +39,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Flag to check if icon button is selected/clicked
      */
     isSelected?: boolean;
+    iconColor?: string;
 }

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

@@ -82,6 +82,7 @@ export type ProductPickerInterface = {
     title?: string;
     postHeader?: React.ReactNode;
     width?: string;
+    left?: string;
     renderWithoutModal?: boolean;
     onClickSave?: number;
     pickerType?: 'COLLECTION' | 'PRODUCT';
@@ -91,6 +92,7 @@ export type ProductPickerInterface = {
     stickyFooter?: boolean;
     showProductDetails?: boolean;
     containerStyle?: React.CSSProperties;
+    crossButtonInsideHeader?: boolean;
 } & ({
     startupScreen: ScreenName.RearrangeProducts;
     rearrangeEnabled: true;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";import{Input as a}from"../input/Input.js";import{StyledModal as u}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as m}from"./collectionScreen.js";import{ProductInfoOverlay as C}from"./productInfoOverlay.js";import{ProductsScreen as g}from"./productScreen.js";import{RearrangeScreen as f}from"./rearrangeScreen.js";import{collectionsReducer as b,searchReducer as y,selectedColectionsReducer as S,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as k}from"./searchScreen.js";import{SelectedScreen as P}from"./selectedScreen.js";import{ContainerStyle as j,ScrollContainerStyle as x}from"./style.js";import{OUT_OF_STOCK_ACTION as I}from"./type.js";var F;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(F||(F={}));const O=O=>{const{storeId:T,selectedItems:D,onClose:R,visible:w,zIndex:E,exactLimit:A,limit:V,hideCollectionCheckbox:$,hideProductCheckbox:B,outOfStockAction:L=I.BLUR,hideVariantCheckbox:M,selectProductsFromCustomCollection:z,hideSelectionCount:W,title:G,width:H,renderWithoutModal:Y,onClickSave:K,pickerType:N,hideProductVariants:U=!1,startupScreen:q=F.Collections,rearrangeEnabled:J,selectSingleItem:Q=!1,showProductDetails:X,containerStyle:Z}=O,[_,ee]=r(b,{}),[te,oe]=s([F.Collections,F.RearrangeProducts].includes(q)?q:F.Collections),[ce,re]=s("grid"),[se,ie]=s(""),[le,ne]=s(""),[de,ae]=s(0),[ue,he]=s(!1),[pe,me]=s(0),[Ce,ge]=s(""),[fe,be]=s(!1),[ye,Se]=s(!1),[ve,ke]=r(y,{collections:{},products:{}}),[Pe,je]=r(S,Object.keys(D).length>0?D:{}),xe=i(null),[Ie,Fe]=s(!1),[Oe,Te]=s();l((()=>{he(!0),Se(!0),O.collectionFetcher(de,T).then((e=>{ee({type:"fetched",data:(null==e?void 0:e.collections)||{}}),he(!1),ae((e=>e+1)),Se(!1)})).catch()}),[]),l((()=>{let e=0;U?Object.keys(Pe||[]).forEach((t=>{var o;Object.keys((null===(o=Pe[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&Pe[-1]&&(null===(c=Pe[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(Pe||[]).forEach((t=>{var o;Object.keys((null===(o=Pe[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=Pe[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),me(e)}),[_,Pe,U]),l((()=>{le&&(he(!0),O.productFetcher(le,T).then((e=>{Object.keys(e).length&&ee({type:"productsFetched",data:{collectionId:le,products:e}}),he(!1)})).catch())}),[le]),l((()=>{const e=setTimeout((()=>{"rearrange"!==te&&(Ce.length||"collections"!==te)&&(Ce.length?(be(!0),O.searchFetcher(T,Ce).then((e=>{"collections"in e&&"products"in e?(ke({type:"set",data:e}),ee({type:"searched",data:e.collections})):(ke({type:"set",data:{collections:{},products:e}}),ee({type:"searched",data:e})),oe("searchProducts"),he(!1),be(!1)}))):oe("collections"))}),800);return()=>clearTimeout(e)}),[Ce]),l((()=>{K&&(O.onAdd(Pe,pe),De())}),[K]),l((()=>{Q&&Object.keys(Pe||{}).length&&pe&&(O.onAdd(Pe,pe),De())}),[Q,Pe,pe]);const De=()=>{je({type:"reset",data:{}})},Re=e(j,Object.assign({style:null!=Z?Z:{}},{children:[O.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:O.postHeader})),!O.hideGlobalSearch&&t(o,{children:("collections"===te||"searchProducts"===te)&&t("div",Object.assign({style:{padding:Y?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(a,{placeholder:"Search Collections or Products",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>fe?t(h,{size:"small",color:n.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:Ce,onChangeText:e=>{e.length&&e.trim().length?ge(e):ge("")}})}))}),e(x,Object.assign({ref:xe,screenName:te},{children:["collections"===te&&t(m,{customCollectionRestriction:O.customCollectionRestriction,dataLoading:ye,collections:_,selectedCollectionsDispatch:je,setCollectionId:ie,setSelectedCollectionId:ne,setScreen:oe,selectedCollections:Pe,collectionFetcher:O.collectionFetcher,storeId:T,collectionsDispatch:ee,setSaveDisabled:he,pagingControls:{curPage:de,setCurPage:ae},hideCollectionCheckbox:$,renderWithoutModal:Y,pickerType:N,scrollContainerRef:xe}),"products"===te&&se&&t(v.Provider,Object.assign({value:se},{children:t(g,{hideInCollectionSearch:O.hideInCollectionSearch,customCollectionRestriction:O.customCollectionRestriction,productFetcher:O.productFetcher,setScreen:oe,storeId:T,data:_[se],collectionsDispatch:ee,selectedCollectionsDispatch:je,selectedData:Pe,setSaveDisabled:he,searchInCollectionFetcher:O.searchInCollectionFetcher,hideProductCheckbox:B,outOfStockAction:L,hideVariantCheckbox:M,selectProductsFromCustomCollection:z,renderWithoutModal:Y,pickerType:N,hideProductVariants:U,fbStatusFetcher:O.fbStatusFetcher,onProductDetailClick:e=>{Fe(!0),Te(e)},showProductDetailInfoIcon:X,scrollContainerRef:xe})})),"view"===te&&t(P,{selectedCollections:Pe||{},selectedCollectionsDispatch:je,setScreen:oe,collections:_,hideProductVariants:U,outOfStockAction:L,storeId:T,fbStatusFetcher:O.fbStatusFetcher}),"rearrange"===te&&t(f,{selectedCollections:Pe||{},selectedCollectionsDispatch:je,setScreen:oe,outOfStockAction:L,rearrangeViewType:"grid"===ce?"list":"grid",scrollContainerRef:xe,storeId:T,fbStatusFetcher:O.fbStatusFetcher}),"searchProducts"===te&&t(k,{customCollectionRestriction:O.customCollectionRestriction,selectedCollections:Pe||{},searchedCollections:ve||{},searchedCollectionsDispatch:ke,selectedCollectionsDispatch:je,setScreen:oe,collections:_,onBackPress:()=>{ge(""),ke({type:"set",data:{collections:{},products:{}}})},pickerType:N,hideProductCheckbox:B,hideProductVariants:U,hideVariantCheckbox:M,storeId:T,fbStatusFetcher:O.fbStatusFetcher,setCollectionId:ie,setSelectedCollectionId:ne,renderWithoutModal:Y,hideCollectionCheckbox:$,outOfStockAction:L})]}))]}));return t(o,{children:Y?Re:e(u,Object.assign({zIndex:E,open:w,onClose:()=>{null==R||R(),De()},headingTitle:G||("collections"===te||"products"===te?"Select Products":"view"===te?"Selected Products":"searchProducts"===te?"Searched Results":"rearrange"===te?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:H||"600px"},headerRightCustomElement:t(o,{}),footerContainerStyle:O.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:n.surface.standard}:void 0,primaryButton:{buttonText:ue?"Loading...":te===F.RearrangeProducts?"Done":"Add",disabled:ue||pe<1||A&&pe<A||!A&&V&&pe>V||!1,onClick:()=>{O.onAdd(Pe,pe),De()}},wrapperStyle:O.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:W?t(o,{}):A&&pe>A?t(p,{tagText:`You can only select ${A} products`,type:"negative"}):V&&pe>V?t(p,{tagText:`You can only select ${V} products`,type:"negative"}):t(d,pe>0?{onClick:()=>{oe(J?F.RearrangeProducts:F.SelectedProducts)},buttonText:A?`${pe}/${A} products selected`:`${pe} products selected`,buttonType:["rearrange","view"].includes(te)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(te)}:{disabled:!0,buttonText:A?`${pe}/${A} products selected`:`${pe} products selected`,buttonType:"tertiaryGray"}),hideCrossButton:Ie},{children:[Re,Ie&&Oe?t(C,{productData:Oe,outOfStockAction:L,onClose:()=>{Fe(!1)}}):t(o,{})]}))})};export{O as ProductPickerModal,F as ScreenName};
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import d from"../../assets/icons/cross.svg.js";import{Button as a}from"../button/Button.js";import{Input as u}from"../input/Input.js";import{StyledModal as h}from"../modals/styledModal.js";import{Spinner as p}from"../spinner/Spinner.js";import{Tag as m}from"../tag/Tag.js";import{CollectionsScreen as C}from"./collectionScreen.js";import{ProductInfoOverlay as g}from"./productInfoOverlay.js";import{ProductsScreen as f}from"./productScreen.js";import{RearrangeScreen as y}from"./rearrangeScreen.js";import{collectionsReducer as b,searchReducer as S,selectedColectionsReducer as v,CollectionIdContext as k}from"./reducers.js";import{SearchScreen as j}from"./searchScreen.js";import{SelectedScreen as P}from"./selectedScreen.js";import{ContainerStyle as x,ScrollContainerStyle as I}from"./style.js";import{OUT_OF_STOCK_ACTION as F}from"./type.js";var O;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(O||(O={}));const T=T=>{const{storeId:D,selectedItems:R,onClose:w,visible:E,zIndex:A,exactLimit:V,limit:$,hideCollectionCheckbox:B,hideProductCheckbox:L,outOfStockAction:M=F.BLUR,hideVariantCheckbox:z,selectProductsFromCustomCollection:H,hideSelectionCount:W,title:G,width:Y,left:K,renderWithoutModal:N,onClickSave:U,pickerType:q,hideProductVariants:J=!1,startupScreen:Q=O.Collections,rearrangeEnabled:X,selectSingleItem:Z=!1,showProductDetails:_,containerStyle:ee,crossButtonInsideHeader:te=!1}=T,[oe,ce]=r(b,{}),[re,se]=s([O.Collections,O.RearrangeProducts].includes(Q)?Q:O.Collections),[ie,le]=s("grid"),[ne,de]=s(""),[ae,ue]=s(""),[he,pe]=s(0),[me,Ce]=s(!1),[ge,fe]=s(0),[ye,be]=s(""),[Se,ve]=s(!1),[ke,je]=s(!1),[Pe,xe]=r(S,{collections:{},products:{}}),[Ie,Fe]=r(v,Object.keys(R).length>0?R:{}),Oe=i(null),[Te,De]=s(!1),[Re,we]=s();l((()=>{Ce(!0),je(!0),T.collectionFetcher(he,D).then((e=>{ce({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Ce(!1),pe((e=>e+1)),je(!1)})).catch()}),[]),l((()=>{let e=0;J?Object.keys(Ie||[]).forEach((t=>{var o;Object.keys((null===(o=Ie[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&Ie[-1]&&(null===(c=Ie[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(Ie||[]).forEach((t=>{var o;Object.keys((null===(o=Ie[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=Ie[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),fe(e)}),[oe,Ie,J]),l((()=>{ae&&(Ce(!0),T.productFetcher(ae,D).then((e=>{Object.keys(e).length&&ce({type:"productsFetched",data:{collectionId:ae,products:e}}),Ce(!1)})).catch())}),[ae]),l((()=>{const e=setTimeout((()=>{"rearrange"!==re&&(ye.length||"collections"!==re)&&(ye.length?(ve(!0),T.searchFetcher(D,ye).then((e=>{"collections"in e&&"products"in e?(xe({type:"set",data:e}),ce({type:"searched",data:e.collections})):(xe({type:"set",data:{collections:{},products:e}}),ce({type:"searched",data:e})),se("searchProducts"),Ce(!1),ve(!1)}))):se("collections"))}),800);return()=>clearTimeout(e)}),[ye]),l((()=>{U&&(T.onAdd(Ie,ge),Ee())}),[U]),l((()=>{Z&&Object.keys(Ie||{}).length&&ge&&(T.onAdd(Ie,ge),Ee())}),[Z,Ie,ge]);const Ee=()=>{Fe({type:"reset",data:{}})},Ae=e(x,Object.assign({style:null!=ee?ee:{}},{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===re||"searchProducts"===re)&&t("div",Object.assign({style:{padding:N?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(u,{placeholder:"Search Collections or Products",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Se?t(p,{size:"small",color:n.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:ye,onChangeText:e=>{e.length&&e.trim().length?be(e):be("")}})}))}),e(I,Object.assign({ref:Oe,screenName:re},{children:["collections"===re&&t(C,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:ke,collections:oe,selectedCollectionsDispatch:Fe,setCollectionId:de,setSelectedCollectionId:ue,setScreen:se,selectedCollections:Ie,collectionFetcher:T.collectionFetcher,storeId:D,collectionsDispatch:ce,setSaveDisabled:Ce,pagingControls:{curPage:he,setCurPage:pe},hideCollectionCheckbox:B,renderWithoutModal:N,pickerType:q,scrollContainerRef:Oe}),"products"===re&&ne&&t(k.Provider,Object.assign({value:ne},{children:t(f,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:se,storeId:D,data:oe[ne],collectionsDispatch:ce,selectedCollectionsDispatch:Fe,selectedData:Ie,setSaveDisabled:Ce,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:L,outOfStockAction:M,hideVariantCheckbox:z,selectProductsFromCustomCollection:H,renderWithoutModal:N,pickerType:q,hideProductVariants:J,fbStatusFetcher:T.fbStatusFetcher,onProductDetailClick:e=>{De(!0),we(e)},showProductDetailInfoIcon:_,scrollContainerRef:Oe})})),"view"===re&&t(P,{selectedCollections:Ie||{},selectedCollectionsDispatch:Fe,setScreen:se,collections:oe,hideProductVariants:J,outOfStockAction:M,storeId:D,fbStatusFetcher:T.fbStatusFetcher}),"rearrange"===re&&t(y,{selectedCollections:Ie||{},selectedCollectionsDispatch:Fe,setScreen:se,outOfStockAction:M,rearrangeViewType:"grid"===ie?"list":"grid",scrollContainerRef:Oe,storeId:D,fbStatusFetcher:T.fbStatusFetcher}),"searchProducts"===re&&t(j,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:Ie||{},searchedCollections:Pe||{},searchedCollectionsDispatch:xe,selectedCollectionsDispatch:Fe,setScreen:se,collections:oe,onBackPress:()=>{be(""),xe({type:"set",data:{collections:{},products:{}}})},pickerType:q,hideProductCheckbox:L,hideProductVariants:J,hideVariantCheckbox:z,storeId:D,fbStatusFetcher:T.fbStatusFetcher,setCollectionId:de,setSelectedCollectionId:ue,renderWithoutModal:N,hideCollectionCheckbox:B,outOfStockAction:M})]}))]}));return t(o,{children:N?Ae:e(h,Object.assign({zIndex:A,open:E,onClose:()=>{null==w||w(),Ee()},headingTitle:G||("collections"===re||"products"===re?"Select Products":"view"===re?"Selected Products":"searchProducts"===re?"Searched Results":"rearrange"===re?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:Y||"600px",left:K||"auto"},headerRightCustomElement:te?t("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:w},{children:t(d,{width:20,height:20,color:n.content.secondary})})):t(o,{}),footerContainerStyle:T.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:n.surface.standard}:void 0,primaryButton:{buttonText:me?"Loading...":re===O.RearrangeProducts?"Done":"Add",disabled:me||ge<1||V&&ge<V||!V&&$&&ge>$||!1,onClick:()=>{T.onAdd(Ie,ge),Ee()}},wrapperStyle:T.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:W?t(o,{}):V&&ge>V?t(m,{tagText:`You can only select ${V} products`,type:"negative"}):$&&ge>$?t(m,{tagText:`You can only select ${$} products`,type:"negative"}):t(a,ge>0?{onClick:()=>{se(X?O.RearrangeProducts:O.SelectedProducts)},buttonText:V?`${ge}/${V} products selected`:`${ge} products selected`,buttonType:["rearrange","view"].includes(re)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(re)}:{disabled:!0,buttonText:V?`${ge}/${V} products selected`:`${ge} products selected`,buttonType:"tertiaryGray"}),hideCrossButton:Te||te},{children:[Ae,Te&&Re?t(g,{productData:Re,outOfStockAction:M,onClose:()=>{De(!1)}}):t(o,{})]}))})};export{T as ProductPickerModal,O as ScreenName};

package/dist/esm/components/side-modal/SideModal.style.js

@@ -1,8 +1,8 @@
-import e,{css as t}from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as o}from"../../constants/zindex.js";const r=e.div`
+import e,{css as t}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";import{ComponentZindex as i}from"../../constants/zindex.js";const r=e.div`
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: ${e=>e.zIndex||o.SIDE_MODAL};
+	z-index: ${e=>e.zIndex||i.SIDE_MODAL};
 	height: 100%;
 	width: 100%;
 	background-color: rgba(0, 0, 0, 0.4);
@@ -12,7 +12,7 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 `,n=e.div`
 	height: 100%;
 	width: ${e=>e.width||"566px"};
-	background: ${i.surface.standard};
+	background: ${o.surface.standard};
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -25,23 +25,25 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	background: ${i.surface.standard};
+	background: ${o.surface.standard};
 	padding: 0px 24px;
-	border-bottom: 1px solid ${i.stroke.primary};
+	border-bottom: 1px solid ${o.stroke.primary};
 	svg:hover {
 		cursor: pointer;
+		background: ${o.background.base};
+		border-radius: 4px;
 	}
-	${e=>{let{headerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{headerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
 `,s=e.div`
 	overflow-y: auto;
 	padding: 24px;
 	height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
-	${e=>{let{bodyStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{bodyStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,p=e.div`
+`,a=e.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -50,14 +52,14 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	flex-direction: ${e=>e.footerDirection||"row"};
 	justify-content: space-between;
 	align-items: center;
-	background: ${i.surface.standard};
-	border-top: 1px solid ${i.stroke.primary};
+	background: ${o.surface.standard};
+	border-top: 1px solid ${o.stroke.primary};
 	padding: 0px 24px;
-	${e=>{let{footerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{footerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,a=e.div`
+`,p=e.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;export{a as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,p as SideModalFooter,d as SideModalHeader,r as SideModalStyle};
+`;export{p as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,a as SideModalFooter,d as SideModalHeader,r as SideModalStyle};

package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts

@@ -213,7 +213,7 @@ export interface IMimeTypeResponse {
 export type WhatsAppPickerMeta = {
     uploadMediaFiles: (params: WhatsAppMediaUploadRequest, index?: number) => Promise<WhatsAppMediaUploadResponse>;
     uploadMediaLink?: (link: string) => Promise<MediaLinkUploadResponse>;
-    validateMimeType: (file: File | Blob) => Promise<IMimeTypeResponse>;
+    validateMimeType?: (file: File | Blob) => Promise<IMimeTypeResponse>;
     CTAoptions?: ButtonPlaceHolderOptions[];
     QRBoptions?: ButtonPlaceHolderOptions[];
 };

package/dist/esm/components/zeroState/ZeroState.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const ZeroState: React.FC<{
+    isLoading?: boolean;
     title: string;
     subTitle?: string;
     IconHolderStyle?: React.CSSProperties;

package/dist/esm/components/zeroState/ZeroState.js

@@ -1,12 +1,12 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{TitleRegular as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const s=n.div`
-	background: ${i.surface.standard};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{Spinner as r}from"../spinner/Spinner.js";import{TitleRegular as o,BodyCaption as i}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const c=n.div`
+	background: ${s.surface.standard};
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`,c=n.div`
-	background: ${i.background.base};
+`,a=n.div`
+	background: ${s.background.base};
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-component
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:p}=n;return e(s,Object.assign({style:null!=p?p:{}},{children:[t(c,Object.assign({style:null!=m?m:{}},{children:t(l,{color:i.content.placeholder,height:24,width:24})})),t(r,Object.assign({style:{marginTop:8,color:i.content.primary}},{children:null!=d?d:"No results found"})),!!a&&t(o,Object.assign({style:{marginTop:4,color:i.content.secondary,textAlign:"center",maxWidth:184}},{children:a}))]}))};export{a as ZeroState};
+`,d=n=>{let{subTitle:d,title:m,IconHolderStyle:p,style:g,isLoading:u}=n;return e(c,Object.assign({style:null!=g?g:{}},{children:[u?t(r,{size:"large",color:s.stroke.brand}):t(a,Object.assign({style:null!=p?p:{}},{children:t(l,{color:s.content.placeholder,height:24,width:24})})),t(o,Object.assign({style:{marginTop:8,color:s.content.primary}},{children:u?"Loading...":m||"No results found"})),!!d&&!u&&t(i,Object.assign({style:{marginTop:4,color:s.content.secondary,textAlign:"center",maxWidth:184}},{children:d}))]}))};export{d as ZeroState};

package/dist/esm/utils/StringUtils.d.ts

@@ -9,4 +9,5 @@ export default class StringUtils {
     static firstLetters: (string: string) => string;
     static capitaliseFirstLetterOfString(string: string): string;
     static toCapitilize(string?: string): string;
+    static truncateText: (text: string, maxLength: number) => string;
 }

package/dist/esm/utils/StringUtils.js

@@ -1 +1 @@
-class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}static capitaliseFirstLetterOfString(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}static toCapitilize(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.slice(1)}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}});export{e as default};
+class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}static capitaliseFirstLetterOfString(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}static toCapitilize(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.slice(1)}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}}),Object.defineProperty(e,"truncateText",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>(null==e?void 0:e.length)>t?e.slice(0,t)+"...":e});export{e as default};

package/package.json

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