npm - @bikdotai/bik-component-library - Versions diffs - 0.0.836 → 0.0.837-0 - Mend

@bikdotai/bik-component-library 0.0.836 → 0.0.837-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/esm/components/product-picker-v2/product.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"product.js","sources":["../../../../src/components/product-picker-v2/product.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { CheckBox } from '../checkBox';\nimport { IconButton } from '../icon-button';\nimport { ShimmerImage } from '../shimmer-image';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { CurrencySymbols } from './constants';\nimport { ProductHelper } from './helpers/ProductHelper';\nimport { ProductPickerTag } from './ProductPickerTag';\nimport type { SelectedCollectionsActions } from './reducers';\nimport {\n\tEllipsedBodyTiny,\n\tProductCardStyle,\n\tProductInfo,\n\tProductSubTitle,\n\tSKUIDBadge,\n} from './style';\nimport {\n\tOUT_OF_STOCK_ACTION,\n\ttype Product,\n\ttype ProductVariant,\n\ttype SelectedItems,\n} from './type';\nimport { getSkuId, shouldShowVariant } from './utility';\n\ninterface ProductGroupInterface {\n\tcollectionId: string;\n\tproductId: string;\n\tdata: Product;\n\tselectedData: SelectedItems;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisProductPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' \| 'PRODUCT';\n\tonProductDetailClick?: (productData: Product \| ProductVariant) => void;\n}\n\nexport const ProductGroup = (props: ProductGroupInterface) => {\n\tconst {\n\t\tcollectionId,\n\t\tproductId,\n\t\tdata,\n\t\tselectedData,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisProductPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType,\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t} = props;\n\n\tconst containsProduct = () => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\treturn product ? true : false;\n\t};\n\n\tconst containsVariant = (variantId: string) => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\tif (!product) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst variant =\n\t\t\tselectedData?.[collectionId]?.['products']?.[productId]?.['variants']?.[\n\t\t\t\tvariantId\n\t\t\t];\n\n\t\treturn variant ? true : false;\n\t};\n\n\tconst currencyAndPriceForProduct = !(\n\t\t!hideProductVariants && shouldShowVariant(data)\n\t)\n\t\t? `${data.currency ? CurrencySymbols[data.currency] ?? '' : ''}${\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.price ??\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.actualPrice ??\n\t\t\t\t''\n\t\t }`\n\t\t: '';\n\n\treturn (\n\t\t<div>\n\t\t\t<ProductCard\n\t\t\t\tisVariant={false}\n\t\t\t\tdata={data}\n\t\t\t\tproductId={productId}\n\t\t\t\tcollectionId={collectionId}\n\t\t\t\tisSelected={containsProduct()}\n\t\t\t\tisPartiallyChecked={isProductPartiallyChecked}\n\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\tkey={productId}\n\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\tviewOnly={viewOnly}\n\t\t\t\thideProductCheckbox={hideProductCheckbox}\n\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\thideProductVariants={hideProductVariants}\n\t\t\t\tpickerType={pickerType}\n\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\tcurrencyAndPrice={currencyAndPriceForProduct}\n\t\t\t/>\n\n\t\t\t{hideProductVariants\n\t\t\t\t? null\n\t\t\t\t: shouldShowVariant(data) &&\n\t\t\t\t Object.keys(data['variants'] \|\| []).map((variantId: any) => {\n\t\t\t\t\t\tconst currencyAndPriceForVariant = `${\n\t\t\t\t\t\t\tdata.currency ? CurrencySymbols[data.currency] ?? '' : ''\n\t\t\t\t\t\t}${\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.price ??\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.actualPrice ??\n\t\t\t\t\t\t\t''\n\t\t\t\t\t\t}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ProductCard\n\t\t\t\t\t\t\t\tisVariant={true}\n\t\t\t\t\t\t\t\tkey={variantId}\n\t\t\t\t\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\t\t\t\t\tdata={{\n\t\t\t\t\t\t\t\t\t...(data['variants'] as { [key: string]: ProductVariant })[\n\t\t\t\t\t\t\t\t\t\tvariantId\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tcurrency: data.currency,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tvariantId={variantId}\n\t\t\t\t\t\t\t\tproductId={productId}\n\t\t\t\t\t\t\t\tviewOnly={viewOnly}\n\t\t\t\t\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\t\t\t\t\tcollectionId={collectionId}\n\t\t\t\t\t\t\t\tisSelected={containsVariant(variantId)}\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\t\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\t\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\t\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\t\t\t\t\tcurrencyAndPrice={currencyAndPriceForVariant}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t })}\n\t\t</div>\n\t);\n};\n\ninterface ProductCardInterface {\n\tisVariant: boolean;\n\tdata: Product \| ProductVariant;\n\tproductId: string;\n\tcollectionId: string;\n\tvariantId?: string;\n\tisSelected: boolean;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' \| 'PRODUCT';\n\tonProductDetailClick?: (productData: Product \| ProductVariant) => void;\n\tcurrencyAndPrice?: string;\n}\n\nexport const ProductCard = (props: ProductCardInterface) => {\n\tconst {\n\t\tisVariant,\n\t\tdata,\n\t\tproductId,\n\t\tcollectionId,\n\t\tvariantId,\n\t\tisSelected,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType = 'PRODUCT',\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t\tcurrencyAndPrice,\n\t} = props;\n\tconst {\n\t\tisVariantForProductPickerTag,\n\t\tdataForProductPickerTag,\n\t\ttagText,\n\t\ttagType,\n\t} = ProductHelper.getDataForProductPickerTag(\n\t\tdata,\n\t\tisVariant,\n\t\toutOfStockAction,\n\t);\n\n\t//show skuid for every variant\n\t//show skuid for product if there is only one variant (as the product itself is the variant)\n\tconst skuId = getSkuId(data, isVariant);\n\n\tconst onProductCardClick = (event) => {\n\t\tevent.stopPropagation();\n\n\t\tif (\n\t\t\tpickerType === 'PRODUCT' &&\n\t\t\t(hideProductCheckbox \|\| hideVariantCheckbox)\n\t\t) {\n\t\t\tconst keys = Object.keys(data['variants']);\n\t\t\tif (hideProductVariants) {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('variantSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId \|\| keys[0],\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'variantUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<ProductCardStyle\n\t\t\tisVariant={isVariant}\n\t\t\tonClick={onProductCardClick}\n\t\t\tisActive={isSelected}\n\t\t>\n\t\t\t{(isVariant && !(viewOnly \|\| hideVariantCheckbox)) \|\|\n\t\t\t(!isVariant && !(viewOnly \|\| hideProductCheckbox)) ? (\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isSelected}\n\t\t\t\t\tisPartiallyChecked={isPartiallyChecked \|\| false}\n\t\t\t\t\tonValueChange={function (checked: boolean, _val, event): void {\n\t\t\t\t\t\tevent?.stopPropagation();\n\n\t\t\t\t\t\tif (!isVariant) {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: hideProductVariants\n\t\t\t\t\t\t\t\t\t\t? 'productUnselected'\n\t\t\t\t\t\t\t\t\t\t: 'variantUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions(\n\t\t\t\t\t\t\t\t\thideProductVariants ? 'productSelected' : 'variantSelected',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t<div>\n\t\t\t\t<ShimmerImage\n\t\t\t\t\twidth={40}\n\t\t\t\t\theight={40}\n\t\t\t\t\timageUrl={data.image}\n\t\t\t\t\talt=\"Item\"\n\t\t\t\t\tborderRadius={4}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: 1,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tvariant={'light'}\n\t\t\t\t\t\tbody={data.name}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t\tdelay={400}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tnumberOfLines={1}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{data.name}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<ProductInfo>\n\t\t\t\t\t\t<ProductPickerTag\n\t\t\t\t\t\t\tisVariant={isVariantForProductPickerTag}\n\t\t\t\t\t\t\tdata={dataForProductPickerTag}\n\t\t\t\t\t\t\ttagText={tagText}\n\t\t\t\t\t\t\ttagType={tagType}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{showProductDetailInfoIcon && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tonProductDetailClick?.(data);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ProductInfo>\n\t\t\t\t</div>\n\t\t\t\t<ProductSubTitle>\n\t\t\t\t\t{/* in the cases where we show tags, do not show the currency and price and sku id */}\n\t\t\t\t\t{(!(dataForProductPickerTag as ProductVariant)?.fbStatus &&\n\t\t\t\t\t\tisVariantForProductPickerTag) \|\|\n\t\t\t\t\ttagText ? null : (\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t{currencyAndPrice}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t)}\n\t\t\t\t\t{skuId && (\n\t\t\t\t\t\t<Tooltip body={skuId} placement=\"top\">\n\t\t\t\t\t\t\t<SKUIDBadge>\n\t\t\t\t\t\t\t\t<EllipsedBodyTiny>{`SKU ID: ${skuId}`}</EllipsedBodyTiny>\n\t\t\t\t\t\t\t</SKUIDBadge>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t)}\n\t\t\t\t</ProductSubTitle>\n\t\t\t</div>\n\t\t</ProductCardStyle>\n\t);\n};\n"],"names":["ProductGroup","props","collectionId","productId","data","selectedData","selectedCollectionsDispatch","viewOnly","upliftAdditions","isProductPartiallyChecked","hideProductCheckbox","outOfStockAction","hideVariantCheckbox","hideProductVariants","pickerType","onProductDetailClick","showProductDetailInfoIcon","containsProduct","containsVariant","variantId","currencyAndPriceForProduct","shouldShowVariant","CurrencySymbols","jsx","ProductCard","currencyAndPriceForVariant","isVariant","isSelected","isPartiallyChecked","currencyAndPrice","isVariantForProductPickerTag","dataForProductPickerTag","tagText","tagType","ProductHelper","skuId","getSkuId","jsxs","ProductCardStyle","event","keys","CheckBox","checked","_val","Fragment","ShimmerImage","Tooltip","TitleSmall","ProductInfo","ProductPickerTag","IconButton","InfoIcon","COLORS","ProductSubTitle","BodyCaption","SKUIDBadge","EllipsedBodyTiny"],"mappings":";;;;;;;;;;;;;AA4CO,MAAMA,KAAe,CAACC,MAAiC;AAC7D,QAAM;AAAA,IACL,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,6BAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,2BAAAC;AAAA,EAAA,IACGf,GAEEgB,IAAkB,MAEhB,EADSZ,IAAeH,CAAY,GAAI,WAAcC,CAAS,GAIjEe,IAAkB,CAACC,MACRd,IAAeH,CAAY,GAAI,WAAcC,CAAS,IAU/D,EAJNE,IAAeH,CAAY,GAAI,WAAcC,CAAS,GAAI,WACzDgB,CACD,IANO,IAWHC,IACL,CAACP,KAAuBQ,EAAkBjB,CAAI,IAO5C,KALA,GAAGA,EAAK,WAAWkB,EAAgBlB,EAAK,QAAQ,KAAK,KAAK,EAAE,GAC5D,OAAO,OAAOA,EAAK,YAAe,EAAE,IAAI,CAAC,GAAG,SAC5C,OAAO,OAAOA,EAAK,YAAe,CAAA,CAAE,IAAI,CAAC,GAAG,eAC5C,EACA;AAGH,2BACE,OAAA,EACA,UAAA;AAAA,IAAA,gBAAAmB;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,WAAW;AAAA,QACX,MAAApB;AAAA,QACA,WAAAD;AAAA,QACA,cAAAD;AAAA,QACA,YAAYe,EAAA;AAAA,QACZ,oBAAoBR;AAAA,QACpB,6BAAAH;AAAA,QAEA,iBAAAE;AAAA,QACA,UAAAD;AAAA,QACA,qBAAAG;AAAA,QACA,qBAAAE;AAAA,QACA,qBAAAC;AAAA,QACA,YAAAC;AAAA,QACA,kBAAAH;AAAA,QACA,sBAAAI;AAAA,QACA,2BAAAC;AAAA,QACA,kBAAkBI;AAAA,MAAA;AAAA,MAVbjB;AAAA,IAAA;AAAA,IAaLU,IACE,OACAQ,EAAkBjB,CAAI,KACtB,OAAO,KAAKA,EAAK,YAAe,CAAA,CAAE,EAAE,IAAI,CAACe,MAAmB;AAC5D,YAAMM,IAA6B,GAClCrB,EAAK,WAAWkB,EAAgBlB,EAAK,QAAQ,KAAK,KAAK,EACxD,GACCA,EAAK,WAAce,CAAS,GAAG,SAC/Bf,EAAK,WAAce,CAAS,GAAG,eAC/B,EACD;AACA,aACC,gBAAAI;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,WAAW;AAAA,UAEX,qBAAAZ;AAAA,UACA,MAAM;AAAA,YACL,GAAIR,EAAK,SACRe,CACD;AAAA,YACA,UAAUf,EAAK;AAAA,UAAA;AAAA,UAEhB,WAAAe;AAAA,UACA,WAAAhB;AAAA,UACA,UAAAI;AAAA,UACA,iBAAAC;AAAA,UACA,cAAAN;AAAA,UACA,YAAYgB,EAAgBC,CAAS;AAAA,UACrC,6BAAAb;AAAA,UACA,kBAAAK;AAAA,UACA,sBAAAI;AAAA,UACA,2BAAAC;AAAA,UACA,kBAAkBS;AAAA,QAAA;AAAA,QAlBbN;AAAA,MAAA;AAAA,IAqBP,CAAC;AAAA,EAAA,GACL;AAEF,GAuBaK,IAAc,CAACvB,MAAgC;AAC3D,QAAM;AAAA,IACL,WAAAyB;AAAA,IACA,MAAAtB;AAAA,IACA,WAAAD;AAAA,IACA,cAAAD;AAAA,IACA,WAAAiB;AAAA,IACA,YAAAQ;AAAA,IACA,6BAAArB;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAoB;AAAA,IACA,qBAAAlB;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,sBAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,kBAAAa;AAAA,EAAA,IACG5B,GACE;AAAA,IACL,8BAAA6B;AAAA,IACA,yBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACGC,EAAc;AAAA,IACjB9B;AAAA,IACAsB;AAAA,IACAf;AAAA,EAAA,GAKKwB,IAAQC,EAAShC,GAAMsB,CAAS;AAiDtC,SACC,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAAZ;AAAA,MACA,SAlDyB,CAACa,MAAU;AAGrC,YAFAA,EAAM,gBAAA,GAGLzB,MAAe,cACdJ,KAAuBE,IACvB;AACD,gBAAM4B,IAAO,OAAO,KAAKpC,EAAK,QAAW;AACzC,UAAIS,IACEc,IAQJrB,EAA4B;AAAA,YAC3B,MAAM;AAAA,YACN,MAAM;AAAA,cACL,WAAAH;AAAA,cACA,cAAAD;AAAA,YAAA;AAAA,UACD,CACA,IAbDM,EAAgB,mBAAmB;AAAA,YAClC,WAAAL;AAAA,YACA,WAAAgB;AAAA,YACA,cAAAjB;AAAA,YACA,SAASE;AAAA,UAAA,CACT,IAWGuB,IAQJrB,EAA4B;AAAA,YAC3B,MAAM;AAAA,YACN,MAAM;AAAA,cACL,WAAAH;AAAA,cACA,WAAAgB;AAAA,cACA,cAAAjB;AAAA,YAAA;AAAA,UACD,CACA,IAdDM,EAAgB,mBAAmB;AAAA,YAClC,WAAAL;AAAA,YACA,WAAWgB,KAAaqB,EAAK,CAAC;AAAA,YAC9B,cAAAtC;AAAA,YACA,SAASE;AAAA,UAAA,CACT;AAAA,QAYJ;AAAA,MACD;AAAA,MAME,UAAUuB;AAAA,MAER,UAAA;AAAA,QAAAD,KAAa,EAAEnB,KAAYK,MAC5B,CAACc,KAAa,EAAEnB,KAAYG,KAC5B,gBAAAa;AAAA,UAACkB;AAAA,UAAA;AAAA,YACA,WAAWd;AAAA,YACX,oBAAoBC,KAAsB;AAAA,YAC1C,eAAe,SAAUc,GAAkBC,GAAMJ,GAAa;AAC7D,cAAAA,GAAO,gBAAA,GAEFb,IAiBCgB,IAYJlC;AAAA,gBACCK,IAAsB,oBAAoB;AAAA,gBAC1C;AAAA,kBACC,WAAAV;AAAA,kBACA,WAAAgB;AAAA,kBACA,cAAAjB;AAAA,kBACA,SAASE;AAAA,gBAAA;AAAA,cACV,IAlBDE,EAA4B;AAAA,gBAC3B,MAAMO,IACH,sBACA;AAAA,gBACH,MAAM;AAAA,kBACL,WAAAV;AAAA,kBACA,WAAAgB;AAAA,kBACA,cAAAjB;AAAA,gBAAA;AAAA,cACD,CACA,IA1BGwC,IASJlC,EAAgB,mBAAmB;AAAA,gBAClC,WAAAL;AAAA,gBACA,cAAAD;AAAA,gBACA,SAASE;AAAA,cAAA,CACT,IAZDE,EAA4B;AAAA,gBAC3B,MAAM;AAAA,gBACN,MAAM;AAAA,kBACL,WAAAH;AAAA,kBACA,cAAAD;AAAA,gBAAA;AAAA,cACD,CACA;AAAA,YAgCJ;AAAA,UAAA;AAAA,QAAA,IAGD,gBAAAqB,EAAAqB,GAAA,EAAE;AAAA,0BAEF,OAAA,EACA,UAAA,gBAAArB;AAAA,UAACsB;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAUzC,EAAK;AAAA,YACf,KAAI;AAAA,YACJ,cAAc;AAAA,UAAA;AAAA,QAAA,GAEhB;AAAA,QACA,gBAAAiC;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,SAAS;AAAA,cACT,eAAe;AAAA,cACf,MAAM;AAAA,YAAA;AAAA,YAGP,UAAA;AAAA,cAAA,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,OAAO;AAAA,oBACN,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,KAAK;AAAA,kBAAA;AAAA,kBAGN,UAAA;AAAA,oBAAA,gBAAAd;AAAA,sBAACuB;AAAA,sBAAA;AAAA,wBACA,SAAS;AAAA,wBACT,MAAM1C,EAAK;AAAA,wBACX,WAAW;AAAA,wBACX,OAAO;AAAA,wBAEP,UAAA,gBAAAmB;AAAA,0BAACwB;AAAA,0BAAA;AAAA,4BACA,OAAO;AAAA,8BACN,MAAM;AAAA,4BAAA;AAAA,4BAEP,eAAe;AAAA,4BAEd,UAAA3C,EAAK;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACP;AAAA,oBAAA;AAAA,sCAGA4C,GAAA,EACA,UAAA;AAAA,sBAAA,gBAAAzB;AAAA,wBAAC0B;AAAA,wBAAA;AAAA,0BACA,WAAWnB;AAAA,0BACX,MAAMC;AAAA,0BACN,SAAAC;AAAA,0BACA,SAAAC;AAAA,wBAAA;AAAA,sBAAA;AAAA,sBAEAjB,KACA,gBAAAO;AAAA,wBAAC2B;AAAA,wBAAA;AAAA,0BACA,SAAS,MAAM;AACd,4BAAAnC,IAAuBX,CAAI;AAAA,0BAC5B;AAAA,0BACA,MAAM,MACL,gBAAAmB;AAAA,4BAAC4B;AAAAA,4BAAA;AAAA,8BACA,OAAO;AAAA,8BACP,QAAQ;AAAA,8BACR,OAAOC,EAAO,QAAQ;AAAA,4BAAA;AAAA,0BAAA;AAAA,wBACvB;AAAA,sBAAA;AAAA,oBAEF,EAAA,CAEF;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAEAC,GAAA,EAEE,UAAA;AAAA,gBAAA,CAAEtB,GAA4C,YAC/CD,KACDE,IAAU,OACT,gBAAAT,EAAC+B,GAAA,EAAY,OAAOF,EAAO,QAAQ,WACjC,UAAAvB,EAAA,CACF;AAAA,gBAEAM,KACA,gBAAAZ,EAACuB,GAAA,EAAQ,MAAMX,GAAO,WAAU,OAC/B,UAAA,gBAAAZ,EAACgC,GAAA,EACA,4BAACC,GAAA,EAAkB,UAAA,WAAWrB,CAAK,IAAG,GACvC,EAAA,CACD;AAAA,cAAA,EAAA,CAEF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EAAA;AAGH;"}
1	+ {"version":3,"file":"product.js","sources":["../../../../src/components/product-picker-v2/product.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { CheckBox } from '../checkBox';\nimport { IconButton } from '../icon-button';\nimport { ShimmerImage } from '../shimmer-image';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { CurrencySymbols } from './constants';\nimport { ProductHelper } from './helpers/ProductHelper';\nimport { ProductPickerTag } from './ProductPickerTag';\nimport type { SelectedCollectionsActions } from './reducers';\nimport {\n\tEllipsedBodyTiny,\n\tProductCardStyle,\n\tProductInfo,\n\tProductSubTitle,\n\tSKUIDBadge,\n} from './style';\nimport {\n\tOUT_OF_STOCK_ACTION,\n\ttype Product,\n\ttype ProductVariant,\n\ttype SelectedItems,\n} from './type';\nimport { getSkuId, shouldShowVariant } from './utility';\n\ninterface ProductGroupInterface {\n\tcollectionId: string;\n\tproductId: string;\n\tdata: Product;\n\tselectedData: SelectedItems;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisProductPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' \| 'PRODUCT';\n\tonProductDetailClick?: (productData: Product \| ProductVariant) => void;\n}\n\nexport const ProductGroup = (props: ProductGroupInterface) => {\n\tconst {\n\t\tcollectionId,\n\t\tproductId,\n\t\tdata,\n\t\tselectedData,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisProductPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType,\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t} = props;\n\n\tconst containsProduct = () => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\treturn product ? true : false;\n\t};\n\n\tconst containsVariant = (variantId: string) => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\tif (!product) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst variant =\n\t\t\tselectedData?.[collectionId]?.['products']?.[productId]?.['variants']?.[\n\t\t\t\tvariantId\n\t\t\t];\n\n\t\treturn variant ? true : false;\n\t};\n\n\tconst currencyAndPriceForProduct = !(\n\t\t!hideProductVariants && shouldShowVariant(data)\n\t)\n\t\t? `${data.currency ? CurrencySymbols[data.currency] ?? '' : ''}${\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.price ??\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.actualPrice ??\n\t\t\t\t''\n\t\t }`\n\t\t: '';\n\n\treturn (\n\t\t<div>\n\t\t\t<ProductCard\n\t\t\t\tisVariant={false}\n\t\t\t\tdata={data}\n\t\t\t\tproductId={productId}\n\t\t\t\tcollectionId={collectionId}\n\t\t\t\tisSelected={containsProduct()}\n\t\t\t\tisPartiallyChecked={isProductPartiallyChecked}\n\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\tkey={productId}\n\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\tviewOnly={viewOnly}\n\t\t\t\thideProductCheckbox={hideProductCheckbox}\n\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\thideProductVariants={hideProductVariants}\n\t\t\t\tpickerType={pickerType}\n\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\tcurrencyAndPrice={currencyAndPriceForProduct}\n\t\t\t/>\n\n\t\t\t{hideProductVariants\n\t\t\t\t? null\n\t\t\t\t: shouldShowVariant(data) &&\n\t\t\t\t Object.keys(data['variants'] \|\| []).map((variantId: any) => {\n\t\t\t\t\t\tconst currencyAndPriceForVariant = `${\n\t\t\t\t\t\t\tdata.currency ? CurrencySymbols[data.currency] ?? '' : ''\n\t\t\t\t\t\t}${\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.price ??\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.actualPrice ??\n\t\t\t\t\t\t\t''\n\t\t\t\t\t\t}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ProductCard\n\t\t\t\t\t\t\t\tisVariant={true}\n\t\t\t\t\t\t\t\tkey={variantId}\n\t\t\t\t\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\t\t\t\t\tdata={{\n\t\t\t\t\t\t\t\t\t...(data['variants'] as { [key: string]: ProductVariant })[\n\t\t\t\t\t\t\t\t\t\tvariantId\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tcurrency: data.currency,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tvariantId={variantId}\n\t\t\t\t\t\t\t\tproductId={productId}\n\t\t\t\t\t\t\t\tviewOnly={viewOnly}\n\t\t\t\t\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\t\t\t\t\tcollectionId={collectionId}\n\t\t\t\t\t\t\t\tisSelected={containsVariant(variantId)}\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\t\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\t\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\t\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\t\t\t\t\tcurrencyAndPrice={currencyAndPriceForVariant}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t })}\n\t\t</div>\n\t);\n};\n\ninterface ProductCardInterface {\n\tisVariant: boolean;\n\tdata: Product \| ProductVariant;\n\tproductId: string;\n\tcollectionId: string;\n\tvariantId?: string;\n\tisSelected: boolean;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' \| 'PRODUCT';\n\tonProductDetailClick?: (productData: Product \| ProductVariant) => void;\n\tcurrencyAndPrice?: string;\n}\n\nexport const ProductCard = (props: ProductCardInterface) => {\n\tconst {\n\t\tisVariant,\n\t\tdata,\n\t\tproductId,\n\t\tcollectionId,\n\t\tvariantId,\n\t\tisSelected,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType = 'PRODUCT',\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t\tcurrencyAndPrice,\n\t} = props;\n\tconst {\n\t\tisVariantForProductPickerTag,\n\t\tdataForProductPickerTag,\n\t\ttagText,\n\t\ttagType,\n\t} = ProductHelper.getDataForProductPickerTag(\n\t\tdata,\n\t\tisVariant,\n\t\toutOfStockAction,\n\t);\n\n\t//show skuid for every variant\n\t//show skuid for product if there is only one variant (as the product itself is the variant)\n\tconst skuId = getSkuId(data, isVariant);\n\n\tconst onProductCardClick = (event) => {\n\t\tevent.stopPropagation();\n\n\t\tif (\n\t\t\tpickerType === 'PRODUCT' &&\n\t\t\t(hideProductCheckbox \|\| hideVariantCheckbox)\n\t\t) {\n\t\t\tconst keys = Object.keys(data['variants']);\n\t\t\tif (hideProductVariants) {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('variantSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId \|\| keys[0],\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'variantUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<ProductCardStyle\n\t\t\tisVariant={isVariant}\n\t\t\tonClick={onProductCardClick}\n\t\t\tisActive={isSelected}\n\t\t>\n\t\t\t{(isVariant && !(viewOnly \|\| hideVariantCheckbox)) \|\|\n\t\t\t(!isVariant && !(viewOnly \|\| hideProductCheckbox)) ? (\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isSelected}\n\t\t\t\t\tisPartiallyChecked={isPartiallyChecked \|\| false}\n\t\t\t\t\tariaLabel={data.name}\n\t\t\t\t\tonValueChange={function (checked: boolean, _val, event): void {\n\t\t\t\t\t\tevent?.stopPropagation();\n\n\t\t\t\t\t\tif (!isVariant) {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: hideProductVariants\n\t\t\t\t\t\t\t\t\t\t? 'productUnselected'\n\t\t\t\t\t\t\t\t\t\t: 'variantUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions(\n\t\t\t\t\t\t\t\t\thideProductVariants ? 'productSelected' : 'variantSelected',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t<div>\n\t\t\t\t<ShimmerImage\n\t\t\t\t\twidth={40}\n\t\t\t\t\theight={40}\n\t\t\t\t\timageUrl={data.image}\n\t\t\t\t\talt=\"Item\"\n\t\t\t\t\tborderRadius={4}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: 1,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tvariant={'light'}\n\t\t\t\t\t\tbody={data.name}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t\tdelay={400}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tnumberOfLines={1}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{data.name}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<ProductInfo>\n\t\t\t\t\t\t<ProductPickerTag\n\t\t\t\t\t\t\tisVariant={isVariantForProductPickerTag}\n\t\t\t\t\t\t\tdata={dataForProductPickerTag}\n\t\t\t\t\t\t\ttagText={tagText}\n\t\t\t\t\t\t\ttagType={tagType}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{showProductDetailInfoIcon && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tonProductDetailClick?.(data);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ProductInfo>\n\t\t\t\t</div>\n\t\t\t\t<ProductSubTitle>\n\t\t\t\t\t{/* in the cases where we show tags, do not show the currency and price and sku id */}\n\t\t\t\t\t{(!(dataForProductPickerTag as ProductVariant)?.fbStatus &&\n\t\t\t\t\t\tisVariantForProductPickerTag) \|\|\n\t\t\t\t\ttagText ? null : (\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t{currencyAndPrice}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t)}\n\t\t\t\t\t{skuId && (\n\t\t\t\t\t\t<Tooltip body={skuId} placement=\"top\">\n\t\t\t\t\t\t\t<SKUIDBadge>\n\t\t\t\t\t\t\t\t<EllipsedBodyTiny>{`SKU ID: ${skuId}`}</EllipsedBodyTiny>\n\t\t\t\t\t\t\t</SKUIDBadge>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t)}\n\t\t\t\t</ProductSubTitle>\n\t\t\t</div>\n\t\t</ProductCardStyle>\n\t);\n};\n"],"names":["ProductGroup","props","collectionId","productId","data","selectedData","selectedCollectionsDispatch","viewOnly","upliftAdditions","isProductPartiallyChecked","hideProductCheckbox","outOfStockAction","hideVariantCheckbox","hideProductVariants","pickerType","onProductDetailClick","showProductDetailInfoIcon","containsProduct","containsVariant","variantId","currencyAndPriceForProduct","shouldShowVariant","CurrencySymbols","jsx","ProductCard","currencyAndPriceForVariant","isVariant","isSelected","isPartiallyChecked","currencyAndPrice","isVariantForProductPickerTag","dataForProductPickerTag","tagText","tagType","ProductHelper","skuId","getSkuId","jsxs","ProductCardStyle","event","keys","CheckBox","checked","_val","Fragment","ShimmerImage","Tooltip","TitleSmall","ProductInfo","ProductPickerTag","IconButton","InfoIcon","COLORS","ProductSubTitle","BodyCaption","SKUIDBadge","EllipsedBodyTiny"],"mappings":"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"}

package/dist/esm/components/tabs/Tabs.js CHANGED Viewed

@@ -1,135 +1,155 @@
-import { jsxs as h, jsx as o } from "react/jsx-runtime";
-import { useCallback as N, useState as q, useEffect as v } from "react";
-import { DEFAULT_THEME as S } from "../../constants/Theme.js";
-import { TabItem as P, TrailingNumberContainer as y, TabItemText as z, TabHeader as F, EmptyTab as L, RightComponent as j } from "./Tabs.styles.js";
-import { Tag as f } from "../tag/Tag.js";
-const H = (e) => {
+import { jsxs as S, jsx as n } from "react/jsx-runtime";
+import { useCallback as q, useState as v, useEffect as P } from "react";
+import { DEFAULT_THEME as N } from "../../constants/Theme.js";
+import { TabItem as z, TrailingNumberContainer as k, TabItemText as F, TabHeader as L, EmptyTab as j, RightComponent as H } from "./Tabs.styles.js";
+import { Tag as h } from "../tag/Tag.js";
+const R = (e) => {
   const {
     tabs: t,
     initialTab: d,
-    onTabSelected: l,
+    onTabSelected: c,
     TabItemStyledProps: m,
-    selectedTab: a,
+    selectedTab: o,
     extendedBorder: i,
-    rightComponent: b,
-    size: u = "default",
+    rightComponent: u,
+    size: b = "default",
     isSquared: T = !1,
-    containerStyles: g
-  } = e, [n, r] = q(d || t[0].key), { colorsV2: c } = S;
-  v(() => {
-    a && a !== n && r(a);
-  }, [a, n]);
-  const p = e.backgroundColor, E = e.selectedTextColor ?? c.background.brand, I = e.textColor ?? c.content.secondary;
-  return /* @__PURE__ */ h(
-    F,
+    containerStyles: g,
+    gap: r,
+    selectedNumberBackground: a
+  } = e, [l, C] = v(d || t[0].key), { colorsV2: x } = N;
+  P(() => {
+    o && o !== l && C(o);
+  }, [o, l]);
+  const I = e.backgroundColor, B = e.selectedTextColor ?? x.background.brand, p = e.textColor ?? x.content.secondary;
+  return /* @__PURE__ */ S(
+    L,
     {
       style: g ?? {},
-      bgColor: p,
+      bgColor: I,
+      tabGap: r,
       "data-test": e["data-test"],
       children: [
-        t.map((s, C) => /* @__PURE__ */ o(
-          k,
+        t.map((s, y) => /* @__PURE__ */ n(
+          E,
           {
             hasEqualSpacing: e.hasEqualSpacing,
-            selectedTextColor: E,
-            textColor: I,
+            uniformBorder: !!r,
+            selectedTextColor: B,
+            textColor: p,
             tab: s,
-            currentTab: n,
+            currentTab: l,
             TabItemStyledProps: m,
             IconComponent: s.icon,
-            size: u,
-            setCurrentTab: (x) => {
-              r(x), l && l(x);
+            size: b,
+            selectedNumberBackground: a,
+            setCurrentTab: (f) => {
+              C(f), c && c(f);
             },
             isSquared: T,
-            isFirstlement: C == 0,
-            isLastElement: C == t.length - 1,
+            isFirstlement: y == 0,
+            isLastElement: y == t.length - 1,
             iconPosition: s.iconPosition ?? "left"
           },
           s.key
         )),
-        i && /* @__PURE__ */ o(L, {}),
-        /* @__PURE__ */ o(j, { children: b })
+        i && /* @__PURE__ */ n(j, {}),
+        /* @__PURE__ */ n(H, { children: u })
       ]
     }
   );
-}, k = (e) => {
+}, E = (e) => {
   const {
     tab: t,
     currentTab: d,
-    setCurrentTab: l,
+    setCurrentTab: c,
     TabItemStyledProps: m,
-    IconComponent: a,
+    IconComponent: o,
     iconPosition: i = "left",
-    size: b = "default",
-    isSquared: u = !1,
+    size: u = "default",
+    isSquared: b = !1,
     isFirstlement: T,
     isLastElement: g
-  } = e, n = t.key === d, { colorsV2: r } = S, c = N(() => ({
+  } = e, r = t.key === d, { colorsV2: a } = N, l = q(() => ({
     ...m,
     borderRadius: e.isSquared ? T ? "4px 0px 0px 4px" : g ? "0px 4px 4px 0px" : "" : ""
   }), []);
-  return /* @__PURE__ */ h(
-    P,
+  return /* @__PURE__ */ S(
+    z,
     {
-      style: c(),
-      selected: n,
+      style: l(),
+      selected: r,
+      uniformBorder: e.uniformBorder,
       hasEqualSpacing: e.hasEqualSpacing,
-      onClick: () => l(e.tab.key),
+      onClick: () => c(e.tab.key),
       selectedTextColor: e.selectedTextColor,
-      isSquared: u,
+      isSquared: b,
       "data-test": e["data-test"],
       children: [
-        a && i === "left" && /* @__PURE__ */ o(
-          a,
+        o && i === "left" && /* @__PURE__ */ n(
+          o,
           {
-            selected: n ? r.background.brand : r.content.secondary
+            selected: r ? a.background.brand : a.content.secondary
           }
         ),
-        t.leadingNumber !== void 0 && t.leadingNumber !== null && /* @__PURE__ */ o(y, { selected: n, children: /* @__PURE__ */ o(
-          f,
+        t.leadingNumber !== void 0 && t.leadingNumber !== null && /* @__PURE__ */ n(
+          k,
           {
-            tagText: t?.leadingNumber ?? 0,
-            theme: "dark",
-            type: t.numberTagType,
-            variant: "circle",
-            color: r.content.primaryInverse
+            selected: r,
+            selectedBackground: e.selectedNumberBackground,
+            children: /* @__PURE__ */ n(
+              h,
+              {
+                tagText: t?.leadingNumber ?? 0,
+                theme: "dark",
+                type: t.numberTagType,
+                variant: "circle",
+                color: a.content.primaryInverse
+              }
+            )
           }
-        ) }),
-        /* @__PURE__ */ o(
-          z,
+        ),
+        /* @__PURE__ */ n(
+          F,
           {
-            style: b === "small" ? { fontSize: 14, fontStyle: "normal", fontWeight: 600 } : void 0,
+            style: u === "small" ? { fontSize: 14, fontStyle: "normal", fontWeight: 600 } : void 0,
             textColor: e.textColor,
             selectedTextColor: e.selectedTextColor,
-            selected: n,
+            selected: r,
             children: t.title
           }
         ),
-        t.trailingNumber !== void 0 && t.trailingNumber !== null && /* @__PURE__ */ o(y, { selected: n, children: /* @__PURE__ */ o(
-          f,
+        t.trailingNumber !== void 0 && t.trailingNumber !== null && /* @__PURE__ */ n(
+          k,
           {
-            tagText: t?.trailingNumber ?? 0,
-            theme: "dark",
-            type: t.numberTagType,
-            variant: "circle",
-            color: r.content.primaryInverse
+            selected: r,
+            selectedBackground: e.selectedNumberBackground,
+            children: /* @__PURE__ */ n(
+              h,
+              {
+                tagText: t?.trailingNumber ?? 0,
+                theme: "dark",
+                type: t.numberTagType,
+                variant: "circle",
+                color: a.content.primaryInverse
+              }
+            )
           }
-        ) }),
-        a && i === "right" && /* @__PURE__ */ o(
-          a,
+        ),
+        o && i === "right" && /* @__PURE__ */ n(
+          o,
           {
-            selected: n ? r.background.brand : r.content.secondary
+            selected: r ? a.background.brand : a.content.secondary
           }
         )
       ]
     }
   );
 };
-H.displayName = "Tabs";
-k.displayName = "TabItemComponent";
+R.displayName = "Tabs";
+E.displayName = "TabItemComponent";
 export {
-  k as TabItemComponent,
-  H as Tabs
+  E as TabItemComponent,
+  R as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/esm/components/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer ~~selected~~={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer ~~selected~~={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":";;;;;AAaO,MAAMA,IAAqC,CAACC,MAAU;AAC5D,QAAM;AAAA,IACL,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,EAAA,~~IACGV~~,GACE,~~CAACW~~,GAAYC,CAAa,IAAIC,~~EAASX~~,KAAcD,EAAK,CAAC,EAAE,GAAG,GAChE,EAAE,~~UAAAa~~,MAAaC;AAErB,EAAAC,EAAU,MAAM;AACf,~~IAAIX~~,KAAeA,~~MAAgBM~~,KAClCC,~~EAAcP~~,CAAW;AAAA,EAE3B,GAAG,CAACA,~~GAAaM~~,CAAU,CAAC;AAE5B,QAAMM,~~IAAkBjB~~,EAAM,~~iBACxBkB~~,~~IACLlB~~,EAAM,~~qBAAqBc~~,EAAS,WAAW,OAC1CK,~~IAAYnB~~,EAAM,~~aAAac~~,EAAS,QAAQ;AAEtD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,~~OAAOX~~,KAAmB,CAAA;AAAA,MAC1B,~~SAASO~~;AAAA,MACT,~~aAAWjB~~,EAAM,WAAW;AAAA,MAE3B,UAAA;AAAA,QAAAC,EAAK,IAAI,~~CAACqB~~,GAAKC,MACf,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,~~iBAAiBzB~~,EAAM;AAAA,YACvB,~~mBAAAkB~~;AAAA,YACA,WAAAC;AAAA,YAEA,KAAAG;AAAA,YACA,YAAAX;AAAA,YACA,~~oBAAAP~~;AAAA,YACA,~~eAAekB~~,EAAI;AAAA,YACnB,~~MAAAd~~;AAAA,YACA,eAAe,~~CAACkB~~,MAAW;AAC1B,cAAAd,EAAcc,CAAM,~~GAChBvB~~,KACHA,~~EAAcuB~~,CAAgB;AAAA,YAEhC;AAAA,YACA,~~WAAAjB~~;AAAA,YACA,~~eAAec~~,KAAS;AAAA,YACxB,eAAeA,~~KAAStB~~,EAAK,SAAS;AAAA,YACtC,~~cAAcqB~~,EAAI,gBAAgB;AAAA,UAAA;AAAA,~~UAf7BA~~,EAAI;AAAA,QAAA,~~CAiBV~~;AAAA,~~QACAhB~~,~~uBAAmBqB~~,GAAA,EAAS;AAAA,QAC7B,gBAAAH,EAACI,KAAgB,~~UAAArB~~,EAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnC,~~GAEakB~~,IAAoD,~~CAACzB~~,MAAU;AAC3E,QAAM;AAAA,IACL,~~KAAAsB~~;AAAA,IACA,YAAAX;AAAA,IACA,eAAAC;AAAA,IACA,~~oBAAAR~~;AAAA,IACA,~~eAAAyB~~;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,~~MAAAtB~~,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,~~eAAAsB~~;AAAA,IACA,eAAAC;AAAA,EAAA,~~IACGhC~~,~~GACEiC~~,IAAWX,EAAI,QAAQX,GACvB,EAAE,UAAAG,MAAaC,GAEfmB,IAAYC,EAAY,OACtB;AAAA,IACN,~~GAAG/B~~;AAAA,IACH,cAAcJ,EAAM,~~YACjB+B~~,IACC,oBACAC,IACA,oBACA,KACD;AAAA,EAAA,IAGF,CAAA,CAAE;AAEL,SACC,gBAAAZ;AAAA,IAACgB;AAAA,IAAA;AAAA,MACA,OAAOF,EAAA;AAAA,MACP,UAAAD;AAAA,MACA,~~iBAAiBjC~~,EAAM;AAAA,MACvB,SAAS,~~MAAMY~~,~~EAAcZ~~,EAAM,IAAI,GAAG;AAAA,MAC1C,mBAAmBA,EAAM;AAAA,MACzB,WAAAS;AAAA,MACA,aAAWT,EAAM,WAAW;AAAA,MAE3B,UAAA;AAAA,~~QAAA6B~~,KAAiBC,MAAiB,UAClC,gBAAAN;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,UACCI,IAAWnB,EAAS,WAAW,QAAQA,EAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAI1DQ,EAAI,kBAAkB,UAAaA,EAAI,kBAAkB,QACzD,gBAAAE,~~EAACa~~,~~KAAwB~~,UAAAJ,~~GACxB~~,UAAA,~~gBAAAT~~;AAAA,~~UAACc~~;AAAA,~~UAAA~~;AAAA,~~YACA~~,SAAShB,GAAK,iBAAiB;AAAA,~~YAC~~/B,OAAM;AAAA,~~YACN~~,MAAMA,EAAI;AAAA,~~YACV~~,SAAQ;AAAA,~~YACR~~,OAAOR,EAAS,QAAQ;AAAA,~~UAAA~~;AAAA,~~QAAA~~,~~GAE1B~~;AAAA,~~QAED~~,gBAAAU;AAAA,UAACe;AAAA,UAAA;AAAA,YACA,~~OACC/B~~,MAAS,UACN,EAAE,UAAU,IAAI,WAAW,UAAU,YAAY,IAAA,IACjD;AAAA,YAEJ,WAAWR,EAAM;AAAA,YACjB,mBAAmBA,EAAM;AAAA,YACzB,~~UAAAiC~~;AAAA,YAEC,UAAAX,EAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAELA,EAAI,mBAAmB,UAAaA,EAAI,mBAAmB,QAC3D,gBAAAE,~~EAACa~~,~~KAAwB~~,UAAAJ,~~GACxB~~,UAAA,~~gBAAAT~~;AAAA,~~UAACc~~;AAAA,~~UAAA~~;AAAA,~~YACA~~,SAAShB,GAAK,kBAAkB;AAAA,~~YAChC~~,OAAM;AAAA,~~YACN~~,MAAMA,EAAI;AAAA,~~YACV~~,SAAQ;AAAA,~~YACR~~,OAAOR,EAAS,QAAQ;AAAA,~~UAAA~~;AAAA,~~QAAA~~,~~GAE1B~~;AAAA,~~QAEAe~~,KAAiBC,MAAiB,WAClC,gBAAAN;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,UACCI,IAAWnB,EAAS,WAAW,QAAQA,EAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MAE1D;AAAA,IAAA;AAAA,EAAA;AAIJ;~~AAEAf~~,EAAK,cAAc;~~AAEnB0B~~,EAAiB,cAAc;"}
1	+ {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t\tselectedNumberBackground,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tuniformBorder={!!gap}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tselectedNumberBackground={selectedNumberBackground}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\tuniformBorder={props.uniformBorder}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","selectedNumberBackground","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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"}

package/dist/esm/components/tabs/Tabs.model.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export interface TabItemProps {
     selected: boolean;
     selectedTextColor: string;
     isSquared?: boolean;
+    uniformBorder?: boolean;
 }
 export interface TabItemTextProps {
     selected: boolean;
@@ -41,10 +42,14 @@ export interface TabViewHeaderProps {
     size?: 'small' | 'default';
     isSquared?: boolean;
     containerStyles?: React.CSSProperties;
+    gap?: number;
+    /** Overrides the background of the leading/trailing number badge on the selected tab. */
+    selectedNumberBackground?: string;
     'data-test'?: string;
 }
 export interface TabItemComponentProps {
     hasEqualSpacing?: boolean;
+    uniformBorder?: boolean;
     tab: TabInterface;
     currentTab: string;
     setCurrentTab: (tabKey: string) => void;
@@ -60,4 +65,6 @@ export interface TabItemComponentProps {
     isLastElement?: boolean;
     'data-test'?: string;
     iconPosition?: 'left' | 'right';
+    /** Overrides the background of the leading/trailing number badge on the selected tab. */
+    selectedNumberBackground?: string;
 }

package/dist/esm/components/tabs/Tabs.styles.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { TabItemProps, TabItemTextProps } from './Tabs.model';
 export declare const TabHeader: import('styled-components').StyledComponent<"div", any, {
     bgColor?: string | undefined;
+    tabGap?: number | undefined;
 }, never>;
 export declare const TabItem: import('styled-components').StyledComponent<"div", any, TabItemProps, never>;
 export declare const TrailingNumberContainer: import('styled-components').StyledComponent<"div", any, {
     selected: boolean;
+    selectedBackground?: string | undefined;
 }, never>;
 export declare const TabItemText: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;

package/dist/esm/components/tabs/Tabs.styles.js CHANGED Viewed

@@ -1,11 +1,25 @@
 import t from "styled-components";
 import { DEFAULT_THEME as o } from "../../constants/Theme.js";
 import { ButtonLarge as r } from "../TypographyStyle.js";
-const n = t.div`
+const c = t.div`
 	display: flex;
 	flex-direction: row;
 	background-color: ${(e) => e.bgColor};
-`, l = t.div`
+	${(e) => e.tabGap ? `
+		gap: ${e.tabGap}px;
+		position: relative;
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 1px;
+			background: ${o.colorsV2.background.inactive};
+			z-index: -1;
+		}
+	` : ""}
+`, a = t.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 8px;
@@ -14,8 +28,8 @@ const n = t.div`
 	align-items: center;
 	justify-content: center;
 	width: ${(e) => e.hasEqualSpacing ? "50%" : "auto"};
-	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : o.colorsV2.background.inactive};
-	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected ? "2px" : "1px"};
+	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : e.uniformBorder ? "transparent" : o.colorsV2.background.inactive};
+	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected || e.uniformBorder ? "2px" : "1px"};
 	border-bottom-style: ${(e) => e.isSquared ? "" : "solid"};
 	border: ${(e) => e.isSquared ? e.selected ? `1px solid ${e.selectedTextColor}` : `1px solid ${o.colorsV2.background.inactive}` : ""};
 	flex-direction: row;
@@ -25,7 +39,7 @@ const n = t.div`
 		background-color: rgba(0, 0, 0, 0.03);
 	}
 	background-color: ${(e) => e.isSquared && e.selected ? `${o.colorsV2.background.brandLight}` : ""};
-`, a = t.div`
+`, l = t.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -33,7 +47,7 @@ const n = t.div`
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${(e) => e.selected ? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
+	background: ${(e) => e.selected ? e.selectedBackground ?? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
 	color: ${o.colorsV2.content.primaryInverse};
 	border-radius: 10px;
 `, s = t(r)`
@@ -49,9 +63,9 @@ const n = t.div`
 export {
   x as EmptyTab,
   b as RightComponent,
-  n as TabHeader,
-  l as TabItem,
+  c as TabHeader,
+  a as TabItem,
   s as TabItemText,
-  a as TrailingNumberContainer
+  l as TrailingNumberContainer
 };
 //# sourceMappingURL=Tabs.styles.js.map

package/dist/esm/components/tabs/Tabs.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '2px' : '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","~~TabItem~~","~~DEFAULT_THEME~~","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,~~GAGhCC~~,~~IAAUF~~,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,~~oBACNE~~,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,~~CAACF~~,MACvBA,EAAM,~~YAAY~~,~~KAAKA~~,EAAM,~~WAAW~~,~~QAAQ~~,KAAK;AAAA,~~wBAC/B~~,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,~~aAAaE~~,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,~~CAACF~~,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,~~GAAGE~~,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,~~GAGMC~~,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~eAU~~/B,CAACC,MACdA,EAAM,~~WACHE~~,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,~~GAI1CE~~,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,~~4BAEHG~~,EAAc,SAAS,WAAW,QAAQ;AAAA,~~GAGzDK~~,IAAiBR,EAAO;AAAA;AAAA;AAAA,~~4BAGTG~~,EAAc,SAAS,WAAW,QAAQ;AAAA;"}
1	+ {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t\tz-index: -1;\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: props.uniformBorder\n\t\t\t? 'transparent'\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected \|\| props.uniformBorder\n\t\t\t? '2px'\n\t\t\t: '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n\tselectedBackground?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? props.selectedBackground ??\n\t\t\t DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","DEFAULT_THEME","TabItem","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,GAC1C,CAACA,MACFA,EAAM,SACH;AAAA,SACIA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASJC,EAAc,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,KAItD,EAAE;AAAA,GAGMC,IAAUH,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,oBACNA,EAAM,gBACN,gBACAC,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,CAACD,MACvBA,EAAM,YACH,KACAA,EAAM,YAAYA,EAAM,gBACxB,QACA,KAAK;AAAA,wBACc,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,aAAaC,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,CAACD,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,GAAGC,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,GAGME,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW/B,CAACC,MACdA,EAAM,WACHA,EAAM,sBACNC,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,GAI1CG,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,4BAEHE,EAAc,SAAS,WAAW,QAAQ;AAAA,GAGzDM,IAAiBR,EAAO;AAAA;AAAA;AAAA,4BAGTE,EAAc,SAAS,WAAW,QAAQ;AAAA;"}

package/dist/esm/editor/extensions/characterLimit/CharacterLimitExtension.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CharacterLimitExtension.js","sources":["../../../../../src/editor/extensions/characterLimit/CharacterLimitExtension.ts"],"sourcesContent":["import { Extension } from '@tiptap/core';\nimport { ~~Plugin,~~ ~~PluginKey~~ } from '@tiptap/pm/~~state~~';\nimport { ~~Decoration~~, ~~DecorationSet~~ } from '@tiptap/pm/~~view~~';\nimport ~~type~~ { ~~Node~~ as ~~PMNode~~ } from '@tiptap/pm/~~model~~';\n\nexport interface CharacterLimitOptions {\n\t/** Soft character limit. 0 / undefined disables the extension entirely. /\n\tlimit: number;\n}\n\n/\n Soft character limit with two behaviours (see CRM design):\n \n 1. Typing is BLOCKED once the content is at/over the limit — `handleTextInput`\n * rejects the insertion. This never fires for paste (paste flows through the\n * clipboard pipeline), so paste is free to push the content over the limit.\n * 2. Every character BEYOND the limit is decorated with `bik-editor-overflow`\n * (rendered grey) so pasted overflow is visible but clearly marked.\n \n Counting mirrors `extractContent` exactly — `doc.textBetween(0, size, '\\n\\n',\n * '\\n')` — so the grey boundary lines up with the `characterCount` the consumer\n * shows in its error message (paragraph break = 2 chars, soft break = 1 char).\n */\nexport const CharacterLimitExtension = Extension.create<CharacterLimitOptions>({\n\tname: 'characterLimitOverflow',\n\n\taddOptions() {\n\t\treturn { limit: 0 };\n\t},\n\n\taddProseMirrorPlugins() {\n\t\tconst limit = this.options.limit;\n\t\tif (!limit \|\| limit <= 0) return [];\n\n\t\t// Same metric as BikEditor.utils.extractContent → keeps the grey boundary\n\t\t// and the consumer's characterCount in sync.\n\t\tconst countChars = (doc: PMNode) =>\n\t\t\tdoc.textBetween(0, doc.content.size, '\\n\\n', '\\n').length;\n\n\t\treturn [\n\t\t\tnew Plugin({\n\t\t\t\tkey: new PluginKey('characterLimitOverflow'),\n\t\t\t\tprops: {\n\t\t\t\t\t// Block typed/composed input that would exceed the limit. Replacing\n\t\t\t\t\t// a selection is allowed as long as the result still fits.\n\t\t\t\t\thandleTextInput(view, from, to, text) {\n\t\t\t\t\t\tconst doc = view.state.doc;\n\t\t\t\t\t\tconst current = countChars(doc);\n\t\t\t\t\t\tconst removed = doc.textBetween(from, to, '\\n\\n', '\\n').length;\n\t\t\t\t\t\treturn current - removed + text.length > limit;\n\t\t\t\t\t},\n\t\t\t\t\tdecorations(state) {\n\t\t\t\t\t\tconst decorations: Decoration[] = [];\n\t\t\t\t\t\tlet count = 0;\n\t\t\t\t\t\tlet overflowing = false;\n\n\t\t\t\t\t\tstate.doc.descendants((node, pos, parent, index) => {\n\t\t\t\t\t\t\t// Account for the \"\\n\\n\" separator inserted between top-level\n\t\t\t\t\t\t\t// blocks so the boundary matches textBetween's counting.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!overflowing &&\n\t\t\t\t\t\t\t\tparent &&\n\t\t\t\t\t\t\t\tparent.type.name === 'doc' &&\n\t\t\t\t\t\t\t\tindex > 0\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcount += 2;\n\t\t\t\t\t\t\t\tif (count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (node.isText && node.text) {\n\t\t\t\t\t\t\t\tconst len = node.text.length;\n\t\t\t\t\t\t\t\tif (overflowing) {\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if (count + len > limit) {\n\t\t\t\t\t\t\t\t\tconst startOffset = Math.max(0, limit - count);\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos + startOffset, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\toverflowing = true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tcount += len;\n\t\t\t\t\t\t\t} else if (node.type.name === 'hardBreak') {\n\t\t\t\t\t\t\t\t// Soft line break → \"\\n\" (1 char) in textBetween.\n\t\t\t\t\t\t\t\tcount += 1;\n\t\t\t\t\t\t\t\tif (!overflowing && count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn DecorationSet.create(state.doc, decorations);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t\t];\n\t},\n});\n"],"names":["CharacterLimitExtension","Extension","limit","countChars","doc","Plugin","PluginKey","view","from","to","text","current","removed","state","decorations","count","overflowing","node","pos","parent","index","len","Decoration","startOffset","DecorationSet"],"mappings":";;;AAuBO,MAAMA,IAA0BC,EAAU,OAA8B;AAAA,EAC9E,MAAM;AAAA,EAEN,aAAa;AACZ,WAAO,EAAE,OAAO,EAAA;AAAA,EACjB;AAAA,EAEA,wBAAwB;AACvB,UAAMC,IAAQ,KAAK,QAAQ;AAC3B,QAAI,CAACA,KAASA,KAAS,UAAU,CAAA;AAIjC,UAAMC,IAAa,CAACC,MACnBA,EAAI,YAAY,GAAGA,EAAI,QAAQ,MAAM;AAAA;AAAA,GAAQ;AAAA,CAAI,EAAE;AAEpD,WAAO;AAAA,MACN,IAAIC,EAAO;AAAA,QACV,KAAK,IAAIC,EAAU,wBAAwB;AAAA,QAC3C,OAAO;AAAA;AAAA;AAAA,UAGN,gBAAgBC,GAAMC,GAAMC,GAAIC,GAAM;AACrC,kBAAMN,IAAMG,EAAK,MAAM,KACjBI,IAAUR,EAAWC,CAAG,GACxBQ,IAAUR,EAAI,YAAYI,GAAMC,GAAI;AAAA;AAAA,GAAQ;AAAA,CAAI,EAAE;AACxD,mBAAOE,IAAUC,IAAUF,EAAK,SAASR;AAAA,UAC1C;AAAA,UACA,YAAYW,GAAO;AAClB,kBAAMC,IAA4B,CAAA;AAClC,gBAAIC,IAAQ,GACRC,IAAc;AAElB,mBAAAH,EAAM,IAAI,YAAY,CAACI,GAAMC,GAAKC,GAAQC,MAAU;AAanD,kBATC,CAACJ,KACDG,KACAA,EAAO,KAAK,SAAS,SACrBC,IAAQ,MAERL,KAAS,GACLA,IAAQb,MAAOc,IAAc,MAG9BC,EAAK,UAAUA,EAAK,MAAM;AAC7B,sBAAMI,IAAMJ,EAAK,KAAK;AACtB,oBAAID;AACH,kBAAAF,EAAY;AAAA,oBACXQ,EAAW,OAAOJ,GAAKA,IAAMG,GAAK;AAAA,sBACjC,OAAO;AAAA,oBAAA,CACP;AAAA,kBAAA;AAAA,yBAEQN,IAAQM,IAAMnB,GAAO;AAC/B,wBAAMqB,IAAc,KAAK,IAAI,GAAGrB,IAAQa,CAAK;AAC7C,kBAAAD,EAAY;AAAA,oBACXQ,EAAW,OAAOJ,IAAMK,GAAaL,IAAMG,GAAK;AAAA,sBAC/C,OAAO;AAAA,oBAAA,CACP;AAAA,kBAAA,GAEFL,IAAc;AAAA,gBACf;AACA,gBAAAD,KAASM;AAAA,cACV,MAAA,CAAWJ,EAAK,KAAK,SAAS,gBAE7BF,KAAS,GACL,CAACC,KAAeD,IAAQb,MAAOc,IAAc;AAElD,qBAAO;AAAA,YACR,CAAC,GAEMQ,EAAc,OAAOX,EAAM,KAAKC,CAAW;AAAA,UACnD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;AAAA,EAEH;AACD,CAAC;"}
1	+ {"version":3,"file":"CharacterLimitExtension.js","sources":["../../../../../src/editor/extensions/characterLimit/CharacterLimitExtension.ts"],"sourcesContent":["import { Extension } from '@tiptap/core';\nimport type { Node as PMNode } from '@tiptap/pm/model';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet } from '@tiptap/pm/view';\n\nexport interface CharacterLimitOptions {\n\t/** Soft character limit. 0 / undefined disables the extension entirely. /\n\tlimit: number;\n}\n\n/\n Soft character limit with two behaviours (see CRM design):\n \n 1. Typing is BLOCKED once the content is at/over the limit — `handleTextInput`\n * rejects the insertion. This never fires for paste (paste flows through the\n * clipboard pipeline), so paste is free to push the content over the limit.\n * 2. Every character BEYOND the limit is decorated with `bik-editor-overflow`\n * (rendered grey) so pasted overflow is visible but clearly marked.\n \n Counting mirrors `extractContent` exactly — `doc.textBetween(0, size, '\\n\\n',\n * '\\n')` — so the grey boundary lines up with the `characterCount` the consumer\n * shows in its error message (paragraph break = 2 chars, soft break = 1 char).\n */\nexport const CharacterLimitExtension = Extension.create<CharacterLimitOptions>({\n\tname: 'characterLimitOverflow',\n\n\taddOptions() {\n\t\treturn { limit: 0 };\n\t},\n\n\taddProseMirrorPlugins() {\n\t\tconst limit = this.options.limit;\n\t\tif (!limit \|\| limit <= 0) return [];\n\n\t\t// Same metric as BikEditor.utils.extractContent → keeps the grey boundary\n\t\t// and the consumer's characterCount in sync.\n\t\tconst countChars = (doc: PMNode) =>\n\t\t\tdoc.textBetween(0, doc.content.size, '\\n\\n', '\\n').length;\n\n\t\treturn [\n\t\t\tnew Plugin({\n\t\t\t\tkey: new PluginKey('characterLimitOverflow'),\n\t\t\t\tprops: {\n\t\t\t\t\t// Block typed/composed input that would exceed the limit. Replacing\n\t\t\t\t\t// a selection is allowed as long as the result still fits.\n\t\t\t\t\thandleTextInput(view, from, to, text) {\n\t\t\t\t\t\tconst doc = view.state.doc;\n\t\t\t\t\t\tconst current = countChars(doc);\n\t\t\t\t\t\tconst removed = doc.textBetween(from, to, '\\n\\n', '\\n').length;\n\t\t\t\t\t\treturn current - removed + text.length > limit;\n\t\t\t\t\t},\n\t\t\t\t\tdecorations(state) {\n\t\t\t\t\t\tconst decorations: Decoration[] = [];\n\t\t\t\t\t\tlet count = 0;\n\t\t\t\t\t\tlet overflowing = false;\n\n\t\t\t\t\t\tstate.doc.descendants((node, pos, parent, index) => {\n\t\t\t\t\t\t\t// Account for the \"\\n\\n\" separator inserted between top-level\n\t\t\t\t\t\t\t// blocks so the boundary matches textBetween's counting.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!overflowing &&\n\t\t\t\t\t\t\t\tparent &&\n\t\t\t\t\t\t\t\tparent.type.name === 'doc' &&\n\t\t\t\t\t\t\t\tindex > 0\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcount += 2;\n\t\t\t\t\t\t\t\tif (count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (node.isText && node.text) {\n\t\t\t\t\t\t\t\tconst len = node.text.length;\n\t\t\t\t\t\t\t\tif (overflowing) {\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if (count + len > limit) {\n\t\t\t\t\t\t\t\t\tconst startOffset = Math.max(0, limit - count);\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos + startOffset, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\toverflowing = true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tcount += len;\n\t\t\t\t\t\t\t} else if (node.type.name === 'hardBreak') {\n\t\t\t\t\t\t\t\t// Soft line break → \"\\n\" (1 char) in textBetween.\n\t\t\t\t\t\t\t\tcount += 1;\n\t\t\t\t\t\t\t\tif (!overflowing && count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn DecorationSet.create(state.doc, decorations);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t\t];\n\t},\n});\n"],"names":["CharacterLimitExtension","Extension","limit","countChars","doc","Plugin","PluginKey","view","from","to","text","current","removed","state","decorations","count","overflowing","node","pos","parent","index","len","Decoration","startOffset","DecorationSet"],"mappings":";;;AAuBO,MAAMA,IAA0BC,EAAU,OAA8B;AAAA,EAC9E,MAAM;AAAA,EAEN,aAAa;AACZ,WAAO,EAAE,OAAO,EAAA;AAAA,EACjB;AAAA,EAEA,wBAAwB;AACvB,UAAMC,IAAQ,KAAK,QAAQ;AAC3B,QAAI,CAACA,KAASA,KAAS,UAAU,CAAA;AAIjC,UAAMC,IAAa,CAACC,MACnBA,EAAI,YAAY,GAAGA,EAAI,QAAQ,MAAM;AAAA;AAAA,GAAQ;AAAA,CAAI,EAAE;AAEpD,WAAO;AAAA,MACN,IAAIC,EAAO;AAAA,QACV,KAAK,IAAIC,EAAU,wBAAwB;AAAA,QAC3C,OAAO;AAAA;AAAA;AAAA,UAGN,gBAAgBC,GAAMC,GAAMC,GAAIC,GAAM;AACrC,kBAAMN,IAAMG,EAAK,MAAM,KACjBI,IAAUR,EAAWC,CAAG,GACxBQ,IAAUR,EAAI,YAAYI,GAAMC,GAAI;AAAA;AAAA,GAAQ;AAAA,CAAI,EAAE;AACxD,mBAAOE,IAAUC,IAAUF,EAAK,SAASR;AAAA,UAC1C;AAAA,UACA,YAAYW,GAAO;AAClB,kBAAMC,IAA4B,CAAA;AAClC,gBAAIC,IAAQ,GACRC,IAAc;AAElB,mBAAAH,EAAM,IAAI,YAAY,CAACI,GAAMC,GAAKC,GAAQC,MAAU;AAanD,kBATC,CAACJ,KACDG,KACAA,EAAO,KAAK,SAAS,SACrBC,IAAQ,MAERL,KAAS,GACLA,IAAQb,MAAOc,IAAc,MAG9BC,EAAK,UAAUA,EAAK,MAAM;AAC7B,sBAAMI,IAAMJ,EAAK,KAAK;AACtB,oBAAID;AACH,kBAAAF,EAAY;AAAA,oBACXQ,EAAW,OAAOJ,GAAKA,IAAMG,GAAK;AAAA,sBACjC,OAAO;AAAA,oBAAA,CACP;AAAA,kBAAA;AAAA,yBAEQN,IAAQM,IAAMnB,GAAO;AAC/B,wBAAMqB,IAAc,KAAK,IAAI,GAAGrB,IAAQa,CAAK;AAC7C,kBAAAD,EAAY;AAAA,oBACXQ,EAAW,OAAOJ,IAAMK,GAAaL,IAAMG,GAAK;AAAA,sBAC/C,OAAO;AAAA,oBAAA,CACP;AAAA,kBAAA,GAEFL,IAAc;AAAA,gBACf;AACA,gBAAAD,KAASM;AAAA,cACV,MAAA,CAAWJ,EAAK,KAAK,SAAS,gBAE7BF,KAAS,GACL,CAACC,KAAeD,IAAQb,MAAOc,IAAc;AAElD,qBAAO;AAAA,YACR,CAAC,GAEMQ,EAAc,OAAOX,EAAM,KAAKC,CAAW;AAAA,UACnD;AAAA,QAAA;AAAA,MACD,CACA;AAAA,IAAA;AAAA,EAEH;AACD,CAAC;"}