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

package/dist/esm/components/input/Input.styled.js

@@ -1,11 +1,11 @@
-import i, { css as o } from "styled-components";
-import { BodyCaption as r, BodySecondary as h, BodyPrimary as n } from "../TypographyStyle.js";
+import i, { css as n } from "styled-components";
+import { BodyCaption as r, BodySecondary as d, BodyPrimary as a } from "../TypographyStyle.js";
 import { COLORS as e } from "../../constants/Theme.js";
-const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e.stroke.brand : s ? e.stroke.negative.vibrant : e.stroke.primary, x = (t) => t.hideBorder ? 0 : t.version === "2.0" ? 0.5 : 1, p = i.div`
+const s = ({ isActive: t, isInvalid: h, hightlightInputColor: o }) => t ? o || e.stroke.brand : h ? e.stroke.negative.vibrant : e.stroke.primary, x = (t) => t.hideBorder ? 0 : t.version === "2.0" ? 0.5 : 1, p = i.div`
 	border-radius: ${(t) => t.version === "2.0" ? 8 : 4}px;
 	background: ${(t) => ["disabled", "read-only", "disabled-invalid"].includes(t.state) ? e.background.base : "#fff"};
 	border: ${(t) => x(t)}px solid
-		${(t) => d({
+		${(t) => s({
   isActive: t.isActive,
   isInvalid: t.isInvalid,
   hightlightInputColor: t.hightlightInputColor
@@ -20,9 +20,22 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 	gap: 8px;
 	overflow: hidden;
 
-	${(t) => t.state === "read-only" ? "opacity: 0.7" : ""};
+	${(t) => t.state === "read-only" && !t.solidDisabled ? "opacity: 0.7" : ""};
 	${(t) => t.state === "read-only" ? "pointer-events: none" : ""};
-`, v = i.div`
+	${(t) => t.solidDisabled && ["disabled", "read-only", "disabled-invalid"].includes(t.state) ? n`
+					input,
+					textarea {
+						color: ${e.content.secondary};
+						-webkit-text-fill-color: ${e.content.secondary};
+						opacity: 1;
+						&::placeholder {
+							color: ${e.content.secondary};
+							-webkit-text-fill-color: ${e.content.secondary};
+							opacity: 1;
+						}
+					}
+			  ` : ""};
+`, u = i.div`
 	min-height: ${(t) => t.iconSize};
 	min-width: ${(t) => t.iconSize};
 	display: flex;
@@ -30,7 +43,7 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 	justify-content: center;
 	overflow: hidden;
 	${(t) => t.isLeft ? `margin-left:${t.variant && ["small", "x-small"].includes(t.variant) ? "0px" : "8px"}` : `margin-right: ${t.variant && ["small", "x-small"].includes(t.variant) ? "0px" : "8px"}`};
-`, a = o`
+`, l = n`
 	flex-grow: 1;
 	overflow: hidden;
 	height: 100%;
@@ -67,8 +80,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		min-height: 100px;
 		resize: none;
 	}
-`, u = i(n)`
-	${a};
+`, v = i(a)`
+	${l};
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
 
 	${(t) => t.autoGrow && t.minHeight && `
@@ -78,8 +91,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		max-height: ${t.maxHeight || "100px"};
 	}
 	`}
-`, f = i(h)`
-	${a};
+`, $ = i(d)`
+	${l};
 	input {
 		min-height: 20px;
 		&::-webkit-outer-spin-button,
@@ -89,8 +102,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		}
 	}
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
-`, $ = i(r)`
-	${a};
+`, f = i(r)`
+	${l};
 	input {
 		min-height: 16px;
 		&::-webkit-outer-spin-button,
@@ -118,10 +131,10 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		color: ${e.content.negative};
 		padding-left: 4px;
 	}
-`, w = i(h)`
+`, y = i(d)`
 	color: ${e.content.secondary} !important;
 	margin-top: ${(t) => t.position === "BOTTOM" ? "8px" : "0px"};
-`, y = i(r)`
+`, w = i(r)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${(t) => t.invalid ? e.content.negative : e.content.secondary} !important;
@@ -138,8 +151,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 `, k = i.div`
 	${(t) => t.width ? `width: ${t.width}` : ""};
 	${(t) => t.height && t.type == "multiline" ? `height: ${t.height}` : ""};
-	${(t) => t.state === "disabled" || t.state === "disabled-invalid" ? o`
-					opacity: 0.5;
+	${(t) => t.state === "disabled" || t.state === "disabled-invalid" ? n`
+					opacity: ${t.solidDisabled ? 1 : 0.5};
 					pointer-events: none;
 			  ` : ""};
 	display: flex;
@@ -156,26 +169,26 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		align-items: center;
 		justify-content: space-between;
 	}
-`, I = i(n)`
+`, I = i(a)`
 	overflow: unset;
 	margin-left: ${(t) => t.variant && ["small", "x-small"].includes(t.variant) ? "" : "16px"};
 	font-size: ${(t) => t.variant === "x-small" ? "12px" : t.variant === "small" ? "14px" : "16px"};
 	line-height: ${(t) => t.variant === "x-small" ? "16px" : t.variant === "small" ? "20px" : "24px"};
-`, C = i(n)`
+`, C = i(a)`
 	overflow: unset;
 	margin-right: ${(t) => t.variant && ["small", "x-small"].includes(t.variant) ? "" : "16px"};
 	font-size: ${(t) => t.variant === "x-small" ? "12px" : t.variant === "small" ? "14px" : "16px"};
 	line-height: ${(t) => t.variant === "x-small" ? "16px" : t.variant === "small" ? "20px" : "24px"};
 `;
 export {
-  v as IconHolder,
-  u as InputContainer,
-  f as InputContainerSmall,
-  $ as InputContainerXSmall,
-  y as InputFooter,
+  u as IconHolder,
+  v as InputContainer,
+  $ as InputContainerSmall,
+  f as InputContainerXSmall,
+  w as InputFooter,
   b as InputHeader,
   p as InputWrapper,
-  w as MaxCharStyle,
+  y as MaxCharStyle,
   I as PrefixHolder,
   k as RootContainer,
   C as SuffixHolder

package/dist/esm/components/input/Input.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0' | '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}
+{"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' | '2.0' | '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t  };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height || '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t&::placeholder {\n\t\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t  `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t  }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight || '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; */\n\t/* left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' || props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t  `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

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

@@ -142,6 +142,7 @@ const Ce = (c, n, l) => {
               isDisabled: d,
               isChecked: f,
               isPartiallyChecked: b,
+              ariaLabel: l.name,
               onValueChange: function(h, g, s) {
                 s?.stopPropagation(), o(h ? {
                   type: "selected",

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

@@ -1 +1 @@
-{"version":3,"file":"collectionScreen.js","sources":["../../../../src/components/product-picker-v2/collectionScreen.tsx"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { CheckBox } from '../checkBox';\nimport { IconButton } from '../icon-button';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyPrimary, TitleRegular } from '../TypographyStyle';\nimport { EmptyState } from './emptyState';\nimport { ProductPickerShimmer } from './ProductPickerShimmer';\nimport type {\n\tCollectionsActions,\n\tSelectedCollectionsActions,\n} from './reducers';\nimport {\n\tCollectionCardDetailStyle,\n\tCollectionCardInfoStyle,\n\tCollectionCardStyle,\n\tCollectionNameHolder,\n} from './style';\nimport type {\n\tCollection,\n\tCollectionFetcherReturn,\n\tSelectedItems,\n} from './type';\nimport { isCollectionPartiallyChecked } from './utility';\n\nexport const truncate = (str: string, n: number, useWordBoundary: boolean) => {\n\tif (!str) return '';\n\tif (str.length <= n) {\n\t\treturn str;\n\t}\n\tconst subString = str.slice(0, n - 1); // the original check\n\treturn (\n\t\t(useWordBoundary\n\t\t\t? subString.slice(0, subString.lastIndexOf(' '))\n\t\t\t: subString) + '...'\n\t);\n};\n\ninterface CollectionsScreenInterface {\n\tcustomCollectionRestriction?: boolean;\n\tdataLoading: boolean;\n\tcollections: { [key: string]: Collection };\n\tselectedCollections: SelectedItems;\n\tcollectionFetcher: (\n\t\toffset: number,\n\t\tstoreId: string,\n\t\tappType: ApplicationType,\n\t) => CollectionFetcherReturn;\n\tstoreId: string;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tsetCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetScreen: React.Dispatch<React.SetStateAction<string>>;\n\tcollectionsDispatch: React.Dispatch<CollectionsActions>;\n\tsetSaveDisabled: React.Dispatch<boolean>;\n\tpagingControls: {\n\t\tcurPage: number;\n\t\tsetCurPage: React.Dispatch<React.SetStateAction<number>>;\n\t};\n\thideCollectionCheckbox?: boolean;\n\trenderWithoutModal?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tscrollContainerRef: React.RefObject<HTMLDivElement>;\n\tappType: ApplicationType;\n\tlimit?: number;\n\texactLimit?: number;\n}\n\nexport const CollectionsScreen = (props: CollectionsScreenInterface) => {\n\tconst {\n\t\tcustomCollectionRestriction,\n\t\tdataLoading,\n\t\tcollections,\n\t\tselectedCollectionsDispatch,\n\t\tsetCollectionId,\n\t\tsetSelectedCollectionId,\n\t\tselectedCollections,\n\t\tsetScreen,\n\t\tcollectionFetcher,\n\t\tcollectionsDispatch,\n\t\tpagingControls,\n\t\tstoreId,\n\t\tsetSaveDisabled,\n\t\thideCollectionCheckbox,\n\t\trenderWithoutModal,\n\t\tpickerType,\n\t\tscrollContainerRef,\n\t\tappType,\n\t\tlimit,\n\t\texactLimit,\n\t} = props;\n\n\tconst nextPageRef = useRef(pagingControls.curPage);\n\tconst isCustomSelected = customCollectionRestriction\n\t\t? selectedCollections?.['isCustom']\n\t\t: false || false;\n\n\tconst [isLoading, setIsLoading] = useState(false);\n\tconst hasAllCollectionsLoaded = useRef(false);\n\tconst isFetchingRef = useRef(false);\n\n\t/**\n\t * Pagination logic. When scroll bar is end of the container, gets the next 10 collections from api and fetches fb status for those 10 collections.\n\t * After that, Increments next page ref which acts as offset.\n\t */\n\tconst handleScroll = () => {\n\t\tif (!scrollContainerRef || !scrollContainerRef?.current) {\n\t\t\treturn;\n\t\t}\n\t\tconst { scrollTop, clientHeight, scrollHeight } =\n\t\t\tscrollContainerRef.current;\n\n\t\tif (\n\t\t\tscrollTop + clientHeight >= scrollHeight - 20 &&\n\t\t\t!hasAllCollectionsLoaded.current &&\n\t\t\t!isFetchingRef.current\n\t\t) {\n\t\t\tsetSaveDisabled(true);\n\t\t\tsetIsLoading(true);\n\n\t\t\tisFetchingRef.current = true;\n\n\t\t\tsetSaveDisabled(true);\n\t\t\tsetIsLoading(true);\n\t\t\tcollectionFetcher(nextPageRef.current, storeId, appType)\n\t\t\t\t.then((collectionsParsed) => {\n\t\t\t\t\tcollectionsDispatch({\n\t\t\t\t\t\ttype: 'paged',\n\t\t\t\t\t\tdata: collectionsParsed?.collections || {},\n\t\t\t\t\t});\n\t\t\t\t\tpagingControls.setCurPage(nextPageRef.current + 1);\n\t\t\t\t\tsetIsLoading(false);\n\t\t\t\t\tsetSaveDisabled(false);\n\n\t\t\t\t\tisFetchingRef.current = false;\n\n\t\t\t\t\t// We decide that all collections are loaded if the API response has 0 collections. This stops the scroll effect.\n\t\t\t\t\tif (!Object.keys(collectionsParsed?.collections).length) {\n\t\t\t\t\t\thasAllCollectionsLoaded.current = true;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch();\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tscrollContainerRef?.current?.addEventListener('scroll', handleScroll);\n\t\treturn () => {\n\t\t\tscrollContainerRef?.current?.removeEventListener('scroll', handleScroll);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tnextPageRef.current = pagingControls.curPage;\n\t}, [pagingControls.curPage]);\n\n\t// Calculate current count of selected collections for limit enforcement\n\tconst selectedCollectionCount = Object.keys(selectedCollections || {}).filter(\n\t\t(k) => k !== 'isCustom',\n\t).length;\n\n\treturn (\n\t\t<div>\n\t\t\t{Object.keys(collections ?? {})?.length ? (\n\t\t\t\tObject.keys(collections).map((key: string) => {\n\t\t\t\t\tconst isChecked = selectedCollections?.[key]\n\t\t\t\t\t\t? pickerType === 'PRODUCT'\n\t\t\t\t\t\t\t? !!Object.keys(selectedCollections?.[key]?.products ?? {}).length\n\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t: false;\n\n\t\t\t\t\t// For COLLECTION picker, check if limit is reached\n\t\t\t\t\tconst isLimitReached =\n\t\t\t\t\t\tpickerType === 'COLLECTION' &&\n\t\t\t\t\t\t!isChecked &&\n\t\t\t\t\t\t((!!exactLimit && selectedCollectionCount >= exactLimit) ||\n\t\t\t\t\t\t\t(!!limit && selectedCollectionCount >= limit));\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollectionCard\n\t\t\t\t\t\t\tcustomCollectionRestriction={customCollectionRestriction}\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tdata={collections[key]}\n\t\t\t\t\t\t\tisDisabled={\n\t\t\t\t\t\t\t\t(isCustomSelected && !selectedCollections?.[key]) ||\n\t\t\t\t\t\t\t\tisLimitReached\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\t\tisPartiallyChecked={isCollectionPartiallyChecked(\n\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\tcollections?.[key],\n\t\t\t\t\t\t\t\tselectedCollections,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\t\t\t\tsetCollectionId={setCollectionId}\n\t\t\t\t\t\t\tsetSelectedCollectionId={setSelectedCollectionId}\n\t\t\t\t\t\t\tsetScreen={setScreen}\n\t\t\t\t\t\t\tid={key}\n\t\t\t\t\t\t\thideCollectionCheckbox={hideCollectionCheckbox || key === '-1'}\n\t\t\t\t\t\t\tselectedCollections={selectedCollections}\n\t\t\t\t\t\t\trenderWithoutModal={renderWithoutModal}\n\t\t\t\t\t\t\tpickerType={pickerType}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t) : dataLoading ? (\n\t\t\t\t<ProductPickerShimmer />\n\t\t\t) : (\n\t\t\t\t<EmptyState\n\t\t\t\t\ttitle=\"No collections to show\"\n\t\t\t\t\tsubtitle=\"We couldn’t find any collection.\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{isLoading && <ProductPickerShimmer />}\n\t\t</div>\n\t);\n};\n\nexport interface CollectionCardInterface {\n\tcustomCollectionRestriction?: boolean;\n\tdata?: Collection;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tsetCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetScreen: React.Dispatch<React.SetStateAction<string>>;\n\tid: string;\n\tisChecked: boolean;\n\tisDisabled: boolean;\n\tisPartiallyChecked: boolean;\n\thideCollectionCheckbox?: boolean;\n\trenderWithoutModal?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tselectedCollections: SelectedItems;\n\tusedInSearch?: boolean;\n}\n\nexport const CollectionCard = (props: CollectionCardInterface) => {\n\tconst {\n\t\tcustomCollectionRestriction,\n\t\tdata,\n\t\tselectedCollectionsDispatch,\n\t\tsetCollectionId,\n\t\tsetSelectedCollectionId,\n\t\tisPartiallyChecked,\n\t\tsetScreen,\n\t\tid,\n\t\tisChecked,\n\t\tisDisabled,\n\t\thideCollectionCheckbox,\n\t\tpickerType,\n\t\tusedInSearch,\n\t} = props;\n\n\tconst onClickChevron = (event) => {\n\t\tif (isDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tif (pickerType === 'COLLECTION') {\n\t\t\tevent.stopPropagation();\n\t\t\tselectedCollectionsDispatch({\n\t\t\t\ttype: 'reset',\n\t\t\t\tdata: {},\n\t\t\t});\n\n\t\t\tselectedCollectionsDispatch({\n\t\t\t\ttype: 'selected',\n\t\t\t\tdata: {\n\t\t\t\t\tid,\n\t\t\t\t\tval: data,\n\t\t\t\t\tisRestricted: customCollectionRestriction,\n\t\t\t\t},\n\t\t\t});\n\t\t\tsetCollectionId(id);\n\t\t\tsetSelectedCollectionId(id);\n\t\t\treturn;\n\t\t}\n\t\tsetCollectionId(id);\n\t\tsetSelectedCollectionId(id);\n\t\tsetScreen('products');\n\t};\n\n\tif (!data) {\n\t\treturn <></>;\n\t}\n\n\treturn (\n\t\t<CollectionCardStyle\n\t\t\tisDisabled={isDisabled}\n\t\t\tonClick={onClickChevron}\n\t\t\tisActive={isChecked}\n\t\t\tusedInSearch={usedInSearch ?? false}\n\t\t>\n\t\t\t<CollectionCardInfoStyle>\n\t\t\t\t{!hideCollectionCheckbox && (\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tisPartiallyChecked={isPartiallyChecked}\n\t\t\t\t\t\tonValueChange={function (\n\t\t\t\t\t\t\tchecked: boolean,\n\t\t\t\t\t\t\t_value?: string,\n\t\t\t\t\t\t\tevent?: React.MouseEvent,\n\t\t\t\t\t\t): void {\n\t\t\t\t\t\t\tevent?.stopPropagation();\n\t\t\t\t\t\t\tchecked\n\t\t\t\t\t\t\t\t? selectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\t\ttype: 'selected',\n\t\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tval: data,\n\t\t\t\t\t\t\t\t\t\t\tisRestricted: customCollectionRestriction,\n\t\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\t: selectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\t\ttype: 'unselected',\n\t\t\t\t\t\t\t\t\t\tdata: { id },\n\t\t\t\t\t\t\t\t  });\n\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tsetSelectedCollectionId('');\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetSelectedCollectionId(id);\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\t<CollectionCardDetailStyle>\n\t\t\t\t\t<Tooltip\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\tvariant=\"light\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CollectionNameHolder>\n\t\t\t\t\t\t\t{!usedInSearch ? (\n\t\t\t\t\t\t\t\t<TitleRegular numberOfLines={1}>{data.name}</TitleRegular>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodyPrimary numberOfLines={1}>{data.name}</BodyPrimary>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{data.isSmartCollection ? (\n\t\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t\t<Tag tagText={'Smart Collection'} type=\"warning\" />\n\t\t\t\t\t\t\t\t</div>\n\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</CollectionNameHolder>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</CollectionCardDetailStyle>\n\t\t\t</CollectionCardInfoStyle>\n\t\t\t{pickerType !== 'COLLECTION' && (\n\t\t\t\t<IconButton\n\t\t\t\t\theight={12}\n\t\t\t\t\twidth={12}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tIcon={ChevronRight}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</CollectionCardStyle>\n\t);\n};\n"],"names":["truncate","str","useWordBoundary","subString","CollectionsScreen","props","customCollectionRestriction","dataLoading","collections","selectedCollectionsDispatch","setCollectionId","setSelectedCollectionId","selectedCollections","setScreen","collectionFetcher","collectionsDispatch","pagingControls","storeId","setSaveDisabled","hideCollectionCheckbox","renderWithoutModal","pickerType","scrollContainerRef","appType","limit","exactLimit","nextPageRef","useRef","isCustomSelected","isLoading","setIsLoading","useState","hasAllCollectionsLoaded","isFetchingRef","handleScroll","scrollTop","clientHeight","scrollHeight","collectionsParsed","useEffect","selectedCollectionCount","k","key","isChecked","isLimitReached","jsx","CollectionCard","isCollectionPartiallyChecked","ProductPickerShimmer","EmptyState","data","isPartiallyChecked","id","isDisabled","usedInSearch","onClickChevron","event","jsxs","CollectionCardStyle","CollectionCardInfoStyle","CheckBox","checked","_value","CollectionCardDetailStyle","Tooltip","CollectionNameHolder","BodyPrimary","TitleRegular","Tag","Fragment","IconButton","ChevronRight"],"mappings":"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"}
+{"version":3,"file":"collectionScreen.js","sources":["../../../../src/components/product-picker-v2/collectionScreen.tsx"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { CheckBox } from '../checkBox';\nimport { IconButton } from '../icon-button';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyPrimary, TitleRegular } from '../TypographyStyle';\nimport { EmptyState } from './emptyState';\nimport { ProductPickerShimmer } from './ProductPickerShimmer';\nimport type {\n\tCollectionsActions,\n\tSelectedCollectionsActions,\n} from './reducers';\nimport {\n\tCollectionCardDetailStyle,\n\tCollectionCardInfoStyle,\n\tCollectionCardStyle,\n\tCollectionNameHolder,\n} from './style';\nimport type {\n\tCollection,\n\tCollectionFetcherReturn,\n\tSelectedItems,\n} from './type';\nimport { isCollectionPartiallyChecked } from './utility';\n\nexport const truncate = (str: string, n: number, useWordBoundary: boolean) => {\n\tif (!str) return '';\n\tif (str.length <= n) {\n\t\treturn str;\n\t}\n\tconst subString = str.slice(0, n - 1); // the original check\n\treturn (\n\t\t(useWordBoundary\n\t\t\t? subString.slice(0, subString.lastIndexOf(' '))\n\t\t\t: subString) + '...'\n\t);\n};\n\ninterface CollectionsScreenInterface {\n\tcustomCollectionRestriction?: boolean;\n\tdataLoading: boolean;\n\tcollections: { [key: string]: Collection };\n\tselectedCollections: SelectedItems;\n\tcollectionFetcher: (\n\t\toffset: number,\n\t\tstoreId: string,\n\t\tappType: ApplicationType,\n\t) => CollectionFetcherReturn;\n\tstoreId: string;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tsetCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetScreen: React.Dispatch<React.SetStateAction<string>>;\n\tcollectionsDispatch: React.Dispatch<CollectionsActions>;\n\tsetSaveDisabled: React.Dispatch<boolean>;\n\tpagingControls: {\n\t\tcurPage: number;\n\t\tsetCurPage: React.Dispatch<React.SetStateAction<number>>;\n\t};\n\thideCollectionCheckbox?: boolean;\n\trenderWithoutModal?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tscrollContainerRef: React.RefObject<HTMLDivElement>;\n\tappType: ApplicationType;\n\tlimit?: number;\n\texactLimit?: number;\n}\n\nexport const CollectionsScreen = (props: CollectionsScreenInterface) => {\n\tconst {\n\t\tcustomCollectionRestriction,\n\t\tdataLoading,\n\t\tcollections,\n\t\tselectedCollectionsDispatch,\n\t\tsetCollectionId,\n\t\tsetSelectedCollectionId,\n\t\tselectedCollections,\n\t\tsetScreen,\n\t\tcollectionFetcher,\n\t\tcollectionsDispatch,\n\t\tpagingControls,\n\t\tstoreId,\n\t\tsetSaveDisabled,\n\t\thideCollectionCheckbox,\n\t\trenderWithoutModal,\n\t\tpickerType,\n\t\tscrollContainerRef,\n\t\tappType,\n\t\tlimit,\n\t\texactLimit,\n\t} = props;\n\n\tconst nextPageRef = useRef(pagingControls.curPage);\n\tconst isCustomSelected = customCollectionRestriction\n\t\t? selectedCollections?.['isCustom']\n\t\t: false || false;\n\n\tconst [isLoading, setIsLoading] = useState(false);\n\tconst hasAllCollectionsLoaded = useRef(false);\n\tconst isFetchingRef = useRef(false);\n\n\t/**\n\t * Pagination logic. When scroll bar is end of the container, gets the next 10 collections from api and fetches fb status for those 10 collections.\n\t * After that, Increments next page ref which acts as offset.\n\t */\n\tconst handleScroll = () => {\n\t\tif (!scrollContainerRef || !scrollContainerRef?.current) {\n\t\t\treturn;\n\t\t}\n\t\tconst { scrollTop, clientHeight, scrollHeight } =\n\t\t\tscrollContainerRef.current;\n\n\t\tif (\n\t\t\tscrollTop + clientHeight >= scrollHeight - 20 &&\n\t\t\t!hasAllCollectionsLoaded.current &&\n\t\t\t!isFetchingRef.current\n\t\t) {\n\t\t\tsetSaveDisabled(true);\n\t\t\tsetIsLoading(true);\n\n\t\t\tisFetchingRef.current = true;\n\n\t\t\tsetSaveDisabled(true);\n\t\t\tsetIsLoading(true);\n\t\t\tcollectionFetcher(nextPageRef.current, storeId, appType)\n\t\t\t\t.then((collectionsParsed) => {\n\t\t\t\t\tcollectionsDispatch({\n\t\t\t\t\t\ttype: 'paged',\n\t\t\t\t\t\tdata: collectionsParsed?.collections || {},\n\t\t\t\t\t});\n\t\t\t\t\tpagingControls.setCurPage(nextPageRef.current + 1);\n\t\t\t\t\tsetIsLoading(false);\n\t\t\t\t\tsetSaveDisabled(false);\n\n\t\t\t\t\tisFetchingRef.current = false;\n\n\t\t\t\t\t// We decide that all collections are loaded if the API response has 0 collections. This stops the scroll effect.\n\t\t\t\t\tif (!Object.keys(collectionsParsed?.collections).length) {\n\t\t\t\t\t\thasAllCollectionsLoaded.current = true;\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch();\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tscrollContainerRef?.current?.addEventListener('scroll', handleScroll);\n\t\treturn () => {\n\t\t\tscrollContainerRef?.current?.removeEventListener('scroll', handleScroll);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tnextPageRef.current = pagingControls.curPage;\n\t}, [pagingControls.curPage]);\n\n\t// Calculate current count of selected collections for limit enforcement\n\tconst selectedCollectionCount = Object.keys(selectedCollections || {}).filter(\n\t\t(k) => k !== 'isCustom',\n\t).length;\n\n\treturn (\n\t\t<div>\n\t\t\t{Object.keys(collections ?? {})?.length ? (\n\t\t\t\tObject.keys(collections).map((key: string) => {\n\t\t\t\t\tconst isChecked = selectedCollections?.[key]\n\t\t\t\t\t\t? pickerType === 'PRODUCT'\n\t\t\t\t\t\t\t? !!Object.keys(selectedCollections?.[key]?.products ?? {}).length\n\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t: false;\n\n\t\t\t\t\t// For COLLECTION picker, check if limit is reached\n\t\t\t\t\tconst isLimitReached =\n\t\t\t\t\t\tpickerType === 'COLLECTION' &&\n\t\t\t\t\t\t!isChecked &&\n\t\t\t\t\t\t((!!exactLimit && selectedCollectionCount >= exactLimit) ||\n\t\t\t\t\t\t\t(!!limit && selectedCollectionCount >= limit));\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollectionCard\n\t\t\t\t\t\t\tcustomCollectionRestriction={customCollectionRestriction}\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tdata={collections[key]}\n\t\t\t\t\t\t\tisDisabled={\n\t\t\t\t\t\t\t\t(isCustomSelected && !selectedCollections?.[key]) ||\n\t\t\t\t\t\t\t\tisLimitReached\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\t\tisPartiallyChecked={isCollectionPartiallyChecked(\n\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\tcollections?.[key],\n\t\t\t\t\t\t\t\tselectedCollections,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\t\t\t\tsetCollectionId={setCollectionId}\n\t\t\t\t\t\t\tsetSelectedCollectionId={setSelectedCollectionId}\n\t\t\t\t\t\t\tsetScreen={setScreen}\n\t\t\t\t\t\t\tid={key}\n\t\t\t\t\t\t\thideCollectionCheckbox={hideCollectionCheckbox || key === '-1'}\n\t\t\t\t\t\t\tselectedCollections={selectedCollections}\n\t\t\t\t\t\t\trenderWithoutModal={renderWithoutModal}\n\t\t\t\t\t\t\tpickerType={pickerType}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})\n\t\t\t) : dataLoading ? (\n\t\t\t\t<ProductPickerShimmer />\n\t\t\t) : (\n\t\t\t\t<EmptyState\n\t\t\t\t\ttitle=\"No collections to show\"\n\t\t\t\t\tsubtitle=\"We couldn’t find any collection.\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{isLoading && <ProductPickerShimmer />}\n\t\t</div>\n\t);\n};\n\nexport interface CollectionCardInterface {\n\tcustomCollectionRestriction?: boolean;\n\tdata?: Collection;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tsetCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;\n\tsetScreen: React.Dispatch<React.SetStateAction<string>>;\n\tid: string;\n\tisChecked: boolean;\n\tisDisabled: boolean;\n\tisPartiallyChecked: boolean;\n\thideCollectionCheckbox?: boolean;\n\trenderWithoutModal?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tselectedCollections: SelectedItems;\n\tusedInSearch?: boolean;\n}\n\nexport const CollectionCard = (props: CollectionCardInterface) => {\n\tconst {\n\t\tcustomCollectionRestriction,\n\t\tdata,\n\t\tselectedCollectionsDispatch,\n\t\tsetCollectionId,\n\t\tsetSelectedCollectionId,\n\t\tisPartiallyChecked,\n\t\tsetScreen,\n\t\tid,\n\t\tisChecked,\n\t\tisDisabled,\n\t\thideCollectionCheckbox,\n\t\tpickerType,\n\t\tusedInSearch,\n\t} = props;\n\n\tconst onClickChevron = (event) => {\n\t\tif (isDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tif (pickerType === 'COLLECTION') {\n\t\t\tevent.stopPropagation();\n\t\t\tselectedCollectionsDispatch({\n\t\t\t\ttype: 'reset',\n\t\t\t\tdata: {},\n\t\t\t});\n\n\t\t\tselectedCollectionsDispatch({\n\t\t\t\ttype: 'selected',\n\t\t\t\tdata: {\n\t\t\t\t\tid,\n\t\t\t\t\tval: data,\n\t\t\t\t\tisRestricted: customCollectionRestriction,\n\t\t\t\t},\n\t\t\t});\n\t\t\tsetCollectionId(id);\n\t\t\tsetSelectedCollectionId(id);\n\t\t\treturn;\n\t\t}\n\t\tsetCollectionId(id);\n\t\tsetSelectedCollectionId(id);\n\t\tsetScreen('products');\n\t};\n\n\tif (!data) {\n\t\treturn <></>;\n\t}\n\n\treturn (\n\t\t<CollectionCardStyle\n\t\t\tisDisabled={isDisabled}\n\t\t\tonClick={onClickChevron}\n\t\t\tisActive={isChecked}\n\t\t\tusedInSearch={usedInSearch ?? false}\n\t\t>\n\t\t\t<CollectionCardInfoStyle>\n\t\t\t\t{!hideCollectionCheckbox && (\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tisPartiallyChecked={isPartiallyChecked}\n\t\t\t\t\t\tariaLabel={data.name}\n\t\t\t\t\t\tonValueChange={function (\n\t\t\t\t\t\t\tchecked: boolean,\n\t\t\t\t\t\t\t_value?: string,\n\t\t\t\t\t\t\tevent?: React.MouseEvent,\n\t\t\t\t\t\t): void {\n\t\t\t\t\t\t\tevent?.stopPropagation();\n\t\t\t\t\t\t\tchecked\n\t\t\t\t\t\t\t\t? selectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\t\ttype: 'selected',\n\t\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\t\t\t\tval: data,\n\t\t\t\t\t\t\t\t\t\t\tisRestricted: customCollectionRestriction,\n\t\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\t: selectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\t\ttype: 'unselected',\n\t\t\t\t\t\t\t\t\t\tdata: { id },\n\t\t\t\t\t\t\t\t  });\n\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tsetSelectedCollectionId('');\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetSelectedCollectionId(id);\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\t<CollectionCardDetailStyle>\n\t\t\t\t\t<Tooltip\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\tvariant=\"light\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<CollectionNameHolder>\n\t\t\t\t\t\t\t{!usedInSearch ? (\n\t\t\t\t\t\t\t\t<TitleRegular numberOfLines={1}>{data.name}</TitleRegular>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodyPrimary numberOfLines={1}>{data.name}</BodyPrimary>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{data.isSmartCollection ? (\n\t\t\t\t\t\t\t\t<div style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t\t<Tag tagText={'Smart Collection'} type=\"warning\" />\n\t\t\t\t\t\t\t\t</div>\n\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</CollectionNameHolder>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</CollectionCardDetailStyle>\n\t\t\t</CollectionCardInfoStyle>\n\t\t\t{pickerType !== 'COLLECTION' && (\n\t\t\t\t<IconButton\n\t\t\t\t\theight={12}\n\t\t\t\t\twidth={12}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tIcon={ChevronRight}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</CollectionCardStyle>\n\t);\n};\n"],"names":["truncate","str","useWordBoundary","subString","CollectionsScreen","props","customCollectionRestriction","dataLoading","collections","selectedCollectionsDispatch","setCollectionId","setSelectedCollectionId","selectedCollections","setScreen","collectionFetcher","collectionsDispatch","pagingControls","storeId","setSaveDisabled","hideCollectionCheckbox","renderWithoutModal","pickerType","scrollContainerRef","appType","limit","exactLimit","nextPageRef","useRef","isCustomSelected","isLoading","setIsLoading","useState","hasAllCollectionsLoaded","isFetchingRef","handleScroll","scrollTop","clientHeight","scrollHeight","collectionsParsed","useEffect","selectedCollectionCount","k","key","isChecked","isLimitReached","jsx","CollectionCard","isCollectionPartiallyChecked","ProductPickerShimmer","EmptyState","data","isPartiallyChecked","id","isDisabled","usedInSearch","onClickChevron","event","jsxs","CollectionCardStyle","CollectionCardInfoStyle","CheckBox","checked","_value","CollectionCardDetailStyle","Tooltip","CollectionNameHolder","BodyPrimary","TitleRegular","Tag","Fragment","IconButton","ChevronRight"],"mappings":"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"}

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

@@ -3,19 +3,19 @@ import { COLORS as D } from "../../constants/Theme.js";
 import B from "../../assets/icons/info.svg.js";
 import { TitleSmall as $, BodyCaption as R } from "../TypographyStyle.js";
 import { CurrencySymbols as O } from "./constants.js";
-import { ProductHelper as K } from "./helpers/ProductHelper.js";
-import { ProductPickerTag as L } from "./ProductPickerTag.js";
+import { ProductHelper as L } from "./helpers/ProductHelper.js";
+import { ProductPickerTag as K } from "./ProductPickerTag.js";
 import { ProductCardStyle as E, ProductInfo as G, ProductSubTitle as H, SKUIDBadge as _, EllipsedBodyTiny as q } from "./style.js";
 import { shouldShowVariant as V, getSkuId as z } from "./utility.js";
 import { CheckBox as J } from "../checkBox/CheckBox.js";
 import { ShimmerImage as M } from "../shimmer-image/ShimmerImage.js";
 import { Tooltip as A } from "../tooltips/Tooltip.js";
 import { IconButton as N } from "../icon-button/IconButton.js";
-const lt = (v) => {
+const le = (v) => {
   const {
     collectionId: c,
-    productId: e,
-    data: t,
+    productId: t,
+    data: e,
     selectedData: o,
     selectedCollectionsDispatch: a,
     viewOnly: n,
@@ -24,18 +24,18 @@ const lt = (v) => {
     hideProductCheckbox: l,
     outOfStockAction: y,
     hideVariantCheckbox: p,
-    hideProductVariants: h,
+    hideProductVariants: m,
     pickerType: P,
     onProductDetailClick: s,
     showProductDetailInfoIcon: C
-  } = v, g = () => !!o?.[c]?.products?.[e], S = (i) => o?.[c]?.products?.[e] ? !!o?.[c]?.products?.[e]?.variants?.[i] : !1, b = !h && V(t) ? "" : `${t.currency ? O[t.currency] ?? "" : ""}${Object.values(t.variants ?? {})?.[0]?.price ?? Object.values(t.variants ?? {})?.[0]?.actualPrice ?? ""}`;
+  } = v, g = () => !!o?.[c]?.products?.[t], S = (i) => o?.[c]?.products?.[t] ? !!o?.[c]?.products?.[t]?.variants?.[i] : !1, b = !m && V(e) ? "" : `${e.currency ? O[e.currency] ?? "" : ""}${Object.values(e.variants ?? {})?.[0]?.price ?? Object.values(e.variants ?? {})?.[0]?.actualPrice ?? ""}`;
   return /* @__PURE__ */ u("div", { children: [
     /* @__PURE__ */ r(
       U,
       {
         isVariant: !1,
-        data: t,
-        productId: e,
+        data: e,
+        productId: t,
         collectionId: c,
         isSelected: g(),
         isPartiallyChecked: f,
@@ -44,28 +44,28 @@ const lt = (v) => {
         viewOnly: n,
         hideProductCheckbox: l,
         hideVariantCheckbox: p,
-        hideProductVariants: h,
+        hideProductVariants: m,
         pickerType: P,
         outOfStockAction: y,
         onProductDetailClick: s,
         showProductDetailInfoIcon: C,
         currencyAndPrice: b
       },
-      e
+      t
     ),
-    h ? null : V(t) && Object.keys(t.variants || []).map((i) => {
-      const m = `${t.currency ? O[t.currency] ?? "" : ""}${t.variants?.[i]?.price ?? t.variants?.[i]?.actualPrice ?? ""}`;
+    m ? null : V(e) && Object.keys(e.variants || []).map((i) => {
+      const h = `${e.currency ? O[e.currency] ?? "" : ""}${e.variants?.[i]?.price ?? e.variants?.[i]?.actualPrice ?? ""}`;
       return /* @__PURE__ */ r(
         U,
         {
           isVariant: !0,
           hideVariantCheckbox: p,
           data: {
-            ...t.variants[i],
-            currency: t.currency
+            ...e.variants[i],
+            currency: e.currency
           },
           variantId: i,
-          productId: e,
+          productId: t,
           viewOnly: n,
           upliftAdditions: d,
           collectionId: c,
@@ -74,7 +74,7 @@ const lt = (v) => {
           outOfStockAction: y,
           onProductDetailClick: s,
           showProductDetailInfoIcon: C,
-          currencyAndPrice: m
+          currencyAndPrice: h
         },
         i
       );
@@ -83,8 +83,8 @@ const lt = (v) => {
 }, U = (v) => {
   const {
     isVariant: c,
-    data: e,
-    productId: t,
+    data: t,
+    productId: e,
     collectionId: o,
     variantId: a,
     isSelected: n,
@@ -93,7 +93,7 @@ const lt = (v) => {
     upliftAdditions: l,
     isPartiallyChecked: y,
     hideProductCheckbox: p,
-    outOfStockAction: h,
+    outOfStockAction: m,
     hideVariantCheckbox: P,
     hideProductVariants: s,
     pickerType: C = "PRODUCT",
@@ -102,44 +102,44 @@ const lt = (v) => {
     currencyAndPrice: b
   } = v, {
     isVariantForProductPickerTag: i,
-    dataForProductPickerTag: m,
+    dataForProductPickerTag: h,
     tagText: I,
     tagType: w
-  } = K.getDataForProductPickerTag(
-    e,
+  } = L.getDataForProductPickerTag(
+    t,
     c,
-    h
-  ), x = z(e, c);
+    m
+  ), x = z(t, c);
   return /* @__PURE__ */ u(
     E,
     {
       isVariant: c,
       onClick: (k) => {
         if (k.stopPropagation(), C === "PRODUCT" && (p || P)) {
-          const T = Object.keys(e.variants);
+          const T = Object.keys(t.variants);
           s ? n ? d({
             type: "productUnselected",
             data: {
-              productId: t,
+              productId: e,
               collectionId: o
             }
           }) : l("productSelected", {
-            productId: t,
+            productId: e,
             variantId: a,
             collectionId: o,
-            product: e
+            product: t
           }) : n ? d({
             type: "variantUnselected",
             data: {
-              productId: t,
+              productId: e,
               variantId: a,
               collectionId: o
             }
           }) : l("variantSelected", {
-            productId: t,
+            productId: e,
             variantId: a || T[0],
             collectionId: o,
-            variant: e
+            variant: t
           });
         }
       },
@@ -150,30 +150,31 @@ const lt = (v) => {
           {
             isChecked: n,
             isPartiallyChecked: y || !1,
+            ariaLabel: t.name,
             onValueChange: function(k, T, j) {
               j?.stopPropagation(), c ? k ? l(
                 s ? "productSelected" : "variantSelected",
                 {
-                  productId: t,
+                  productId: e,
                   variantId: a,
                   collectionId: o,
-                  variant: e
+                  variant: t
                 }
               ) : d({
                 type: s ? "productUnselected" : "variantUnselected",
                 data: {
-                  productId: t,
+                  productId: e,
                   variantId: a,
                   collectionId: o
                 }
               }) : k ? l("productSelected", {
-                productId: t,
+                productId: e,
                 collectionId: o,
-                product: e
+                product: t
               }) : d({
                 type: "productUnselected",
                 data: {
-                  productId: t,
+                  productId: e,
                   collectionId: o
                 }
               });
@@ -185,7 +186,7 @@ const lt = (v) => {
           {
             width: 40,
             height: 40,
-            imageUrl: e.image,
+            imageUrl: t.image,
             alt: "Item",
             borderRadius: 4
           }
@@ -213,7 +214,7 @@ const lt = (v) => {
                       A,
                       {
                         variant: "light",
-                        body: e.name,
+                        body: t.name,
                         placement: "bottom",
                         delay: 400,
                         children: /* @__PURE__ */ r(
@@ -223,17 +224,17 @@ const lt = (v) => {
                               flex: 1
                             },
                             numberOfLines: 1,
-                            children: e.name
+                            children: t.name
                           }
                         )
                       }
                     ),
                     /* @__PURE__ */ u(G, { children: [
                       /* @__PURE__ */ r(
-                        L,
+                        K,
                         {
                           isVariant: i,
-                          data: m,
+                          data: h,
                           tagText: I,
                           tagType: w
                         }
@@ -242,7 +243,7 @@ const lt = (v) => {
                         N,
                         {
                           onClick: () => {
-                            g?.(e);
+                            g?.(t);
                           },
                           Icon: () => /* @__PURE__ */ r(
                             B,
@@ -259,7 +260,7 @@ const lt = (v) => {
                 }
               ),
               /* @__PURE__ */ u(H, { children: [
-                !m?.fbStatus && i || I ? null : /* @__PURE__ */ r(R, { color: D.content.secondary, children: b }),
+                !h?.fbStatus && i || I ? null : /* @__PURE__ */ r(R, { color: D.content.secondary, children: b }),
                 x && /* @__PURE__ */ r(A, { body: x, placement: "top", children: /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(q, { children: `SKU ID: ${x}` }) }) })
               ] })
             ]
@@ -271,6 +272,6 @@ const lt = (v) => {
 };
 export {
   U as ProductCard,
-  lt as ProductGroup
+  le as ProductGroup
 };
 //# sourceMappingURL=product.js.map