npm - @bikdotai/bik-component-library - Versions diffs - 0.0.840 → 0.0.841-beta.0 - Mend

@bikdotai/bik-component-library 0.0.840 → 0.0.841-beta.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 (99) hide show

package/dist/esm/components/checkBox/CheckBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\t/** Accessible name when no visible label is rendered (e.g. product-picker rows). */\n\tariaLabel?: string;\n\tlabelTypography?:\n\t\t\| 'bodyCaption'\n\t\t\| 'bodySecondary'\n\t\t\| 'bodyPrimary'\n\t\t\| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked \|\| false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked \|\| false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst toggleCheck = (event?: React.SyntheticEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event as React.MouseEvent);\n\t\t}\n\t};\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\ttoggleCheck(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\n\t\tif (event.key === ' ' \|\| event.key === 'Enter') {\n\t\t\tevent.preventDefault();\n\t\t\ttoggleCheck(event);\n\t\t}\n\t};\n\n\tconst ariaChecked = isPartiallyChecked\n\t\t? 'mixed'\n\t\t: isChecked\n\t\t? 'true'\n\t\t: 'false';\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled \|\| false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked \|\| false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) \|\| props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\taria-disabled={isDisabled \|\| undefined}\n\t\t\taria-label={props.label ? undefined : props.ariaLabel}\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\tonClick={handleCheck}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t\tactiveColor={props.activeColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked \|\| false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","toggleCheck","event","newVal","handleCheck","handleKeyDown","ariaChecked","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
1	+ {"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\t/** Accessible name when no visible label is rendered (e.g. product-picker rows). */\n\tariaLabel?: string;\n\tlabelTypography?:\n\t\t\| 'bodyCaption'\n\t\t\| 'bodySecondary'\n\t\t\| 'bodyPrimary'\n\t\t\| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t };\n\n\treturn (\n\t\t<svg\n\t\t\tdata-testid=\"checkbox-mark\"\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\tdata-testid=\"checkmark-icon\"\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tdata-testid=\"partial-mark\"\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked \|\| false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked \|\| false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst toggleCheck = (event?: React.SyntheticEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event as React.MouseEvent);\n\t\t}\n\t};\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\ttoggleCheck(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\n\t\tif (event.key === ' ' \|\| event.key === 'Enter') {\n\t\t\tevent.preventDefault();\n\t\t\ttoggleCheck(event);\n\t\t}\n\t};\n\n\tconst ariaChecked = isPartiallyChecked\n\t\t? 'mixed'\n\t\t: isChecked\n\t\t? 'true'\n\t\t: 'false';\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled \|\| false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked \|\| false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) \|\| props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\taria-disabled={isDisabled \|\| undefined}\n\t\t\taria-label={props.label ? undefined : props.ariaLabel}\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\tonClick={handleCheck}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t\tactiveColor={props.activeColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked \|\| false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","toggleCheck","event","newVal","handleCheck","handleKeyDown","ariaChecked","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}

package/dist/esm/components/code-block/CodeBlock.js CHANGED Viewed

@@ -16,15 +16,15 @@ const U = ({
   hideHeader: b = !1,
   hideCopy: M = !1
 }) => {
-  const [j, l] = c(!1), [v, d] = c(!1), [p, m] = c(
+  const [j, l] = c(!1), [v, d] = c(!1), [m, p] = c(
     "success"
-  ), x = async () => {
+  ), w = async () => {
     try {
-      await navigator.clipboard.writeText(a), l(!0), m("success"), d(!0), setTimeout(() => l(!1), 2e3);
+      await navigator.clipboard.writeText(a), l(!0), p("success"), d(!0), setTimeout(() => l(!1), 2e3);
     } catch {
-      m("error"), d(!0);
+      p("error"), d(!0);
     }
-  }, [S, f] = c(a);
+  }, [x, f] = c(a);
   L(() => {
     let e = !0;
     return (async () => {
@@ -41,15 +41,15 @@ const U = ({
       e = !1;
     };
   }, [a, s]);
-  const C = S.split(`
-`), _ = (e) => ({
+  const C = x.split(`
+`), S = (e) => ({
     javascript: "#FEC02D",
     python: "#3776ab",
     java: "#ed8b00",
     css: "#1572b6",
     html: "#e34c26",
     json: "#000000"
-  })[e.toLowerCase()] || (t === "dark" ? "#6e7681" : "#656d76"), w = (e) => ({
+  })[e.toLowerCase()] || (t === "dark" ? "#6e7681" : "#656d76"), _ = (e) => ({
     javascript: "#000"
   })?.[e.toLowerCase()] || "#fff";
   return /* @__PURE__ */ i(k, { themeMode: t, maxWidth: T, children: [
@@ -59,16 +59,16 @@ const U = ({
         /* @__PURE__ */ o(
           D,
           {
-            bg: _(s),
-            color: w(s),
+            bg: S(s),
+            color: _(s),
             children: s
           }
         )
       ] }),
-      !M && /* @__PURE__ */ o(E, { themeMode: t, onClick: x, children: j ? /* @__PURE__ */ o(u, { children: "✓ Copied" }) : /* @__PURE__ */ o(u, { children: "Copy" }) })
+      !M && /* @__PURE__ */ o(E, { themeMode: t, onClick: w, children: j ? /* @__PURE__ */ o(u, { children: "✓ Copied" }) : /* @__PURE__ */ o(u, { children: "Copy" }) })
     ] }),
     /* @__PURE__ */ i(P, { maxHeight: y, children: [
-      !g && /* @__PURE__ */ o(R, { themeMode: t, children: C.map((e, r) => /* @__PURE__ */ o("div", { children: r + 1 }, r)) }),
+      !g && /* @__PURE__ */ o(R, { themeMode: t, children: C.map((e, r) => /* @__PURE__ */ o("div", { "data-testid": "line-number-row", children: r + 1 }, r)) }),
       /* @__PURE__ */ o(J, { themeMode: t, children: C.map((e, r) => /* @__PURE__ */ o(
         "div",
         {
@@ -83,9 +83,9 @@ const U = ({
     v && /* @__PURE__ */ o(
       B,
       {
-        text: p === "success" ? "Code copied to clipboard!" : "Failed to copy code",
+        text: m === "success" ? "Code copied to clipboard!" : "Failed to copy code",
         autoClose: 2e3,
-        type: p,
+        type: m,
         hideProgressBar: !0,
         onCloseToast: () => d(!1)
       }

package/dist/esm/components/code-block/CodeBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.js","sources":["../../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Toaster } from '@src/components/toaster/Toaster';\nimport {\n\tCode,\n\tCodeContainer,\n\tContainer,\n\tCopyButton,\n\tHeader,\n\tLanguageBadge,\n\tLineNumbers,\n\tTitle,\n\tTitleSection,\n} from './CodeBlock.styled';\nimport { highlightCode } from './CodeBlockHelper';\nimport { CodeBlockProps, CodeLanguage } from './types';\n\n// optional types extraction\n\nexport const CodeBlock = ({\n\tcode = '',\n\tlanguage = CodeLanguage.JAVASCRIPT,\n\ttitle = '',\n\thideLineNumbers = false,\n\tmaxHeight = '400px',\n\tmaxWidth,\n\ttheme = 'dark',\n\thideHeader = false,\n\thideCopy = false,\n}: CodeBlockProps) => {\n\tconst [copied, setCopied] = useState(false);\n\tconst [showToaster, setShowToaster] = useState(false);\n\tconst [toasterType, setToasterType] = useState<'success' \| 'error'>(\n\t\t'success',\n\t);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetToasterType('success');\n\t\t\tsetShowToaster(true);\n\t\t\tsetTimeout(() => setCopied(false), 2000);\n\t\t} catch (err) {\n\t\t\tsetToasterType('error');\n\t\t\tsetShowToaster(true);\n\t\t}\n\t};\n\n\t// Apply language-specific formatting\n\tconst [formattedCode, setFormattedCode] = useState(code);\n\n\tuseEffect(() => {\n\t\tlet isMounted = true;\n\t\tconst formatCode = async () => {\n\t\t\ttry {\n\t\t\t\tconst formatterModule = await import(\n\t\t\t\t\t/* webpackChunkName: \"languageSpecificFormatting-[request]\" */\n\t\t\t\t\t`./languageSpecificFormatting/${language}_file.ts`\n\t\t\t\t);\n\t\t\t\tif (formatterModule?.format && isMounted) {\n\t\t\t\t\tsetFormattedCode(formatterModule.format(code));\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// No formatter found — just use original\n\t\t\t}\n\t\t\tif (isMounted) setFormattedCode(code);\n\t\t};\n\n\t\tformatCode();\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [code, language]);\n\n\tconst lines = formattedCode.split('\\n');\n\n\tconst getLanguageBadgeColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<CodeLanguage, string> = {\n\t\t\tjavascript: '#FEC02D',\n\t\t\tpython: '#3776ab',\n\t\t\tjava: '#ed8b00',\n\t\t\tcss: '#1572b6',\n\t\t\thtml: '#e34c26',\n\t\t\tjson: '#000000',\n\t\t};\n\t\treturn (\n\t\t\tcolors[lang.toLowerCase()] \|\| (theme === 'dark' ? '#6e7681' : '#656d76')\n\t\t);\n\t};\n\n\tconst getBadgeTextColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<string, string> = {\n\t\t\tjavascript: '#000',\n\t\t};\n\t\treturn colors?.[lang.toLowerCase()] \|\| '#fff';\n\t};\n\n\treturn (\n\t\t<Container themeMode={theme} maxWidth={maxWidth}>\n\t\t\t{!hideHeader && (\n\t\t\t\t<Header themeMode={theme}>\n\t\t\t\t\t<TitleSection>\n\t\t\t\t\t\t{!!title && title && <Title themeMode={theme}>{title}</Title>}\n\t\t\t\t\t\t<LanguageBadge\n\t\t\t\t\t\t\tbg={getLanguageBadgeColor(language)}\n\t\t\t\t\t\t\tcolor={getBadgeTextColor(language)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{language}\n\t\t\t\t\t\t</LanguageBadge>\n\t\t\t\t\t</TitleSection>\n\t\t\t\t\t{!hideCopy && (\n\t\t\t\t\t\t<CopyButton themeMode={theme} onClick={handleCopy}>\n\t\t\t\t\t\t\t{copied ? <>✓ Copied</> : <>Copy</>}\n\t\t\t\t\t\t</CopyButton>\n\t\t\t\t\t)}\n\t\t\t\t</Header>\n\t\t\t)}\n\n\t\t\t<CodeContainer maxHeight={maxHeight}>\n\t\t\t\t{!hideLineNumbers && (\n\t\t\t\t\t<LineNumbers themeMode={theme}>\n\t\t\t\t\t\t{lines.map((_, index) => (\n\t\t\t\t\t\t\t<div key={index}>{index + 1}</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</LineNumbers>\n\t\t\t\t)}\n\t\t\t\t<Code themeMode={theme}>\n\t\t\t\t\t{lines.map((line, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tstyle={{ minHeight: line.trim() ? '20px' : '0px' }}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: highlightCode(line, language, theme) \|\| ' ',\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</Code>\n\t\t\t</CodeContainer>\n\t\t\t{showToaster && (\n\t\t\t\t<Toaster\n\t\t\t\t\ttext={\n\t\t\t\t\t\ttoasterType === 'success'\n\t\t\t\t\t\t\t? 'Code copied to clipboard!'\n\t\t\t\t\t\t\t: 'Failed to copy code'\n\t\t\t\t\t}\n\t\t\t\t\tautoClose={2000}\n\t\t\t\t\ttype={toasterType}\n\t\t\t\t\thideProgressBar\n\t\t\t\t\tonCloseToast={() => setShowToaster(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["CodeBlock","code","language","CodeLanguage","title","hideLineNumbers","maxHeight","maxWidth","theme","hideHeader","hideCopy","copied","setCopied","useState","showToaster","setShowToaster","toasterType","setToasterType","handleCopy","formattedCode","setFormattedCode","useEffect","isMounted","formatterModule","__variableDynamicImportRuntimeHelper","lines","getLanguageBadgeColor","lang","getBadgeTextColor","jsxs","Container","Header","TitleSection","Title","jsx","LanguageBadge","CopyButton","Fragment","CodeContainer","LineNumbers","_","index","Code","line","highlightCode","Toaster"],"mappings":"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~~YAAM~~,IAAI,~~CAACgC~~,GAAGC,~~wBACb~~,~~OAAA~~,~~EAAiB~~,~~UAAAA~~,~~IAAQ~~,EAAA,~~GAAhBA~~,~~CAAkB~~,~~CAC5B~~,GACF;AAAA,MAED,gBAAAP,EAACQ,KAAK,WAAWlC,GACf,YAAM,IAAI,CAACmC,GAAMF,MACjB,gBAAAP;AAAA,QAAC;AAAA,QAAA;AAAA,UAEA,OAAO,EAAE,WAAWS,EAAK,KAAA,IAAS,SAAS,MAAA;AAAA,UAC3C,yBAAyB;AAAA,YACxB,QAAQC,EAAcD,GAAMzC,GAAUM,CAAK,KAAK;AAAA,UAAA;AAAA,QACjD;AAAA,QAJKiC;AAAA,MAAA,CAMN,EAAA,CACF;AAAA,IAAA,GACD;AAAA,IACC3B,KACA,gBAAAoB;AAAA,MAACW;AAAA,MAAA;AAAA,QACA,MACC7B,MAAgB,YACb,8BACA;AAAA,QAEJ,WAAW;AAAA,QACX,MAAMA;AAAA,QACN,iBAAe;AAAA,QACf,cAAc,MAAMD,EAAe,EAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,GAEF;AAEF;"}
1	+ {"version":3,"file":"CodeBlock.js","sources":["../../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Toaster } from '@src/components/toaster/Toaster';\nimport {\n\tCode,\n\tCodeContainer,\n\tContainer,\n\tCopyButton,\n\tHeader,\n\tLanguageBadge,\n\tLineNumbers,\n\tTitle,\n\tTitleSection,\n} from './CodeBlock.styled';\nimport { highlightCode } from './CodeBlockHelper';\nimport { CodeBlockProps, CodeLanguage } from './types';\n\n// optional types extraction\n\nexport const CodeBlock = ({\n\tcode = '',\n\tlanguage = CodeLanguage.JAVASCRIPT,\n\ttitle = '',\n\thideLineNumbers = false,\n\tmaxHeight = '400px',\n\tmaxWidth,\n\ttheme = 'dark',\n\thideHeader = false,\n\thideCopy = false,\n}: CodeBlockProps) => {\n\tconst [copied, setCopied] = useState(false);\n\tconst [showToaster, setShowToaster] = useState(false);\n\tconst [toasterType, setToasterType] = useState<'success' \| 'error'>(\n\t\t'success',\n\t);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetToasterType('success');\n\t\t\tsetShowToaster(true);\n\t\t\tsetTimeout(() => setCopied(false), 2000);\n\t\t} catch (err) {\n\t\t\tsetToasterType('error');\n\t\t\tsetShowToaster(true);\n\t\t}\n\t};\n\n\t// Apply language-specific formatting\n\tconst [formattedCode, setFormattedCode] = useState(code);\n\n\tuseEffect(() => {\n\t\tlet isMounted = true;\n\t\tconst formatCode = async () => {\n\t\t\ttry {\n\t\t\t\tconst formatterModule = await import(\n\t\t\t\t\t/* webpackChunkName: \"languageSpecificFormatting-[request]\" */\n\t\t\t\t\t`./languageSpecificFormatting/${language}_file.ts`\n\t\t\t\t);\n\t\t\t\tif (formatterModule?.format && isMounted) {\n\t\t\t\t\tsetFormattedCode(formatterModule.format(code));\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// No formatter found — just use original\n\t\t\t}\n\t\t\tif (isMounted) setFormattedCode(code);\n\t\t};\n\n\t\tformatCode();\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [code, language]);\n\n\tconst lines = formattedCode.split('\\n');\n\n\tconst getLanguageBadgeColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<CodeLanguage, string> = {\n\t\t\tjavascript: '#FEC02D',\n\t\t\tpython: '#3776ab',\n\t\t\tjava: '#ed8b00',\n\t\t\tcss: '#1572b6',\n\t\t\thtml: '#e34c26',\n\t\t\tjson: '#000000',\n\t\t};\n\t\treturn (\n\t\t\tcolors[lang.toLowerCase()] \|\| (theme === 'dark' ? '#6e7681' : '#656d76')\n\t\t);\n\t};\n\n\tconst getBadgeTextColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<string, string> = {\n\t\t\tjavascript: '#000',\n\t\t};\n\t\treturn colors?.[lang.toLowerCase()] \|\| '#fff';\n\t};\n\n\treturn (\n\t\t<Container themeMode={theme} maxWidth={maxWidth}>\n\t\t\t{!hideHeader && (\n\t\t\t\t<Header themeMode={theme}>\n\t\t\t\t\t<TitleSection>\n\t\t\t\t\t\t{!!title && title && <Title themeMode={theme}>{title}</Title>}\n\t\t\t\t\t\t<LanguageBadge\n\t\t\t\t\t\t\tbg={getLanguageBadgeColor(language)}\n\t\t\t\t\t\t\tcolor={getBadgeTextColor(language)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{language}\n\t\t\t\t\t\t</LanguageBadge>\n\t\t\t\t\t</TitleSection>\n\t\t\t\t\t{!hideCopy && (\n\t\t\t\t\t\t<CopyButton themeMode={theme} onClick={handleCopy}>\n\t\t\t\t\t\t\t{copied ? <>✓ Copied</> : <>Copy</>}\n\t\t\t\t\t\t</CopyButton>\n\t\t\t\t\t)}\n\t\t\t\t</Header>\n\t\t\t)}\n\n\t\t\t<CodeContainer maxHeight={maxHeight}>\n\t\t\t\t{!hideLineNumbers && (\n\t\t\t\t\t<LineNumbers themeMode={theme}>\n\t\t\t\t\t\t{lines.map((_, index) => (\n\t\t\t\t\t\t\t<div key={index} data-testid=\"line-number-row\">\n\t\t\t\t\t\t\t\t{index + 1}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</LineNumbers>\n\t\t\t\t)}\n\t\t\t\t<Code themeMode={theme}>\n\t\t\t\t\t{lines.map((line, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tstyle={{ minHeight: line.trim() ? '20px' : '0px' }}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: highlightCode(line, language, theme) \|\| ' ',\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</Code>\n\t\t\t</CodeContainer>\n\t\t\t{showToaster && (\n\t\t\t\t<Toaster\n\t\t\t\t\ttext={\n\t\t\t\t\t\ttoasterType === 'success'\n\t\t\t\t\t\t\t? 'Code copied to clipboard!'\n\t\t\t\t\t\t\t: 'Failed to copy code'\n\t\t\t\t\t}\n\t\t\t\t\tautoClose={2000}\n\t\t\t\t\ttype={toasterType}\n\t\t\t\t\thideProgressBar\n\t\t\t\t\tonCloseToast={() => setShowToaster(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["CodeBlock","code","language","CodeLanguage","title","hideLineNumbers","maxHeight","maxWidth","theme","hideHeader","hideCopy","copied","setCopied","useState","showToaster","setShowToaster","toasterType","setToasterType","handleCopy","formattedCode","setFormattedCode","useEffect","isMounted","formatterModule","__variableDynamicImportRuntimeHelper","lines","getLanguageBadgeColor","lang","getBadgeTextColor","jsxs","Container","Header","TitleSection","Title","jsx","LanguageBadge","CopyButton","Fragment","CodeContainer","LineNumbers","_","index","Code","line","highlightCode","Toaster"],"mappings":"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"}

package/dist/esm/components/colourInput/ColourInput.js CHANGED Viewed

@@ -1,23 +1,24 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { ColorInputContainer as n, StyledColorInput as l } from "./ColourInput.styled.js";
 import { BodySecondary as a, BodyPrimary as i } from "../TypographyStyle.js";
-const C = (e) => /* @__PURE__ */ r("div", { className: "buttonColorCustom", children: [
-  e.headingText && /* @__PURE__ */ o(a, { children: e.headingText }),
-  /* @__PURE__ */ r(n, { children: [
-    /* @__PURE__ */ o(i, { children: e.labelText ?? "Colour" }),
-    /* @__PURE__ */ o(
+const m = (o) => /* @__PURE__ */ t("div", { className: "buttonColorCustom", children: [
+  o.headingText && /* @__PURE__ */ e(a, { children: o.headingText }),
+  /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(i, { children: o.labelText ?? "Colour" }),
+    /* @__PURE__ */ e(
       l,
       {
         type: "color",
-        onChange: (t) => {
-          e.onValueChange(t.target.value);
+        "data-testid": "colour-input",
+        onChange: (r) => {
+          o.onValueChange(r.target.value);
         },
-        value: e.value
+        value: o.value
       }
     )
   ] })
 ] });
 export {
-  C as ColourInput
+  m as ColourInput
 };
 //# sourceMappingURL=ColourInput.js.map

package/dist/esm/components/colourInput/ColourInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColourInput.js","sources":["../../../../src/components/colourInput/ColourInput.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tColorInputContainer,\n\tStyledColorInput,\n} from '@src/components/colourInput/ColourInput.styled';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\n\nexport interface ColourInputProps {\n\tvalue: string;\n\tlabelText: string;\n\theadingText?: string;\n\tonValueChange: (value: string) => void;\n}\n\nexport const ColourInput: React.FC<ColourInputProps> = (props) => {\n\treturn (\n\t\t<div className=\"buttonColorCustom\">\n\t\t\t{props.headingText && <BodySecondary>{props.headingText}</BodySecondary>}\n\t\t\t<ColorInputContainer>\n\t\t\t\t<BodyPrimary>{props.labelText ?? 'Colour'}</BodyPrimary>\n\t\t\t\t<StyledColorInput\n\t\t\t\t\ttype=\"color\"\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tprops.onValueChange(e.target.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvalue={props.value}\n\t\t\t\t/>\n\t\t\t</ColorInputContainer>\n\t\t</div>\n\t);\n};\n"],"names":["ColourInput","props","jsxs","jsx","BodySecondary","ColorInputContainer","BodyPrimary","StyledColorInput","e"],"mappings":";;;AAcO,MAAMA,IAA0C,CAACC,MAEtD,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,EAAAD,EAAM,eAAe,gBAAAE,EAACC,GAAA,EAAe,UAAAH,EAAM,aAAY;AAAA,oBACvDI,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAa,UAAAL,EAAM,aAAa,UAAS;AAAA,IAC1C,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,UAAU,CAACC,MAAM;AAChB,UAAAP,EAAM,cAAcO,EAAE,OAAO,KAAK;AAAA,QACnC;AAAA,QACA,OAAOP,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,EAAA,CACD;AAAA,GACD;"}
1	+ {"version":3,"file":"ColourInput.js","sources":["../../../../src/components/colourInput/ColourInput.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tColorInputContainer,\n\tStyledColorInput,\n} from '@src/components/colourInput/ColourInput.styled';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\n\nexport interface ColourInputProps {\n\tvalue: string;\n\tlabelText: string;\n\theadingText?: string;\n\tonValueChange: (value: string) => void;\n}\n\nexport const ColourInput: React.FC<ColourInputProps> = (props) => {\n\treturn (\n\t\t<div className=\"buttonColorCustom\">\n\t\t\t{props.headingText && <BodySecondary>{props.headingText}</BodySecondary>}\n\t\t\t<ColorInputContainer>\n\t\t\t\t<BodyPrimary>{props.labelText ?? 'Colour'}</BodyPrimary>\n\t\t\t\t<StyledColorInput\n\t\t\t\t\ttype=\"color\"\n\t\t\t\t\tdata-testid=\"colour-input\"\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tprops.onValueChange(e.target.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvalue={props.value}\n\t\t\t\t/>\n\t\t\t</ColorInputContainer>\n\t\t</div>\n\t);\n};\n"],"names":["ColourInput","props","jsxs","jsx","BodySecondary","ColorInputContainer","BodyPrimary","StyledColorInput","e"],"mappings":";;;AAcO,MAAMA,IAA0C,CAACC,MAEtD,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,EAAAD,EAAM,eAAe,gBAAAE,EAACC,GAAA,EAAe,UAAAH,EAAM,aAAY;AAAA,oBACvDI,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAa,UAAAL,EAAM,aAAa,UAAS;AAAA,IAC1C,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,UAAU,CAACC,MAAM;AAChB,UAAAP,EAAM,cAAcO,EAAE,OAAO,KAAK;AAAA,QACnC;AAAA,QACA,OAAOP,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACd,EAAA,CACD;AAAA,GACD;"}

package/dist/esm/components/dot-pulse/DotPulse.js CHANGED Viewed

@@ -1,21 +1,21 @@
-import { jsxs as e, jsx as a } from "react/jsx-runtime";
-import o from "styled-components";
-const c = ({
-  color: i = "linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)",
-  size: t = 4
-}) => /* @__PURE__ */ e(s, { children: [
-  /* @__PURE__ */ a(n, { $color: i, $size: t }),
-  /* @__PURE__ */ a(n, { $color: i, $size: t }),
-  /* @__PURE__ */ a(n, { $color: i, $size: t })
-] }), s = o.span`
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import e from "styled-components";
+const r = ({
+  color: t = "linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)",
+  size: i = 4
+}) => /* @__PURE__ */ s(n, { children: [
+  /* @__PURE__ */ a(o, { "data-testid": "dot-pulse-dot", $color: t, $size: i }),
+  /* @__PURE__ */ a(o, { "data-testid": "dot-pulse-dot", $color: t, $size: i }),
+  /* @__PURE__ */ a(o, { "data-testid": "dot-pulse-dot", $color: t, $size: i })
+] }), n = e.span`
 	display: inline-flex;
 	align-items: center;
-`, n = o.span`
+`, o = e.span`
 	display: block;
-	width: ${(i) => i.$size}px;
-	height: ${(i) => i.$size}px;
+	width: ${(t) => t.$size}px;
+	height: ${(t) => t.$size}px;
 	border-radius: 50%;
-	background: ${(i) => i.$color};
+	background: ${(t) => t.$color};
 	margin: 0 1.5px;
 	opacity: 0.6;
 	animation: dotPulse 1.2s infinite;
@@ -43,6 +43,6 @@ const c = ({
 	}
 `;
 export {
-  c as DotPulse
+  r as DotPulse
 };
 //# sourceMappingURL=DotPulse.js.map

package/dist/esm/components/dot-pulse/DotPulse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DotPulse.js","sources":["../../../../src/components/dot-pulse/DotPulse.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\nexport interface DotPulseProps {\n\tcolor?: string;\n\tsize?: number;\n}\n\nconst DotPulse: React.FC<DotPulseProps> = ({\n\tcolor = 'linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)',\n\tsize = 4,\n}) => {\n\treturn (\n\t\t<DotPulseContainer>\n\t\t\t<Dot $color={color} $size={size} />\n\t\t\t<Dot $color={color} $size={size} />\n\t\t\t<Dot $color={color} $size={size} />\n\t\t</DotPulseContainer>\n\t);\n};\n\nconst DotPulseContainer = styled.span`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n\ninterface DotProps {\n\t$color: string;\n\t$size: number;\n}\n\nconst Dot = styled.span<DotProps>`\n\tdisplay: block;\n\twidth: ${(props) => props.$size}px;\n\theight: ${(props) => props.$size}px;\n\tborder-radius: 50%;\n\tbackground: ${(props) => props.$color};\n\tmargin: 0 1.5px;\n\topacity: 0.6;\n\tanimation: dotPulse 1.2s infinite;\n\twill-change: opacity, transform;\n\n\t&:nth-child(2) {\n\t\tanimation-delay: 0.2s;\n\t}\n\n\t&:nth-child(3) {\n\t\tanimation-delay: 0.4s;\n\t}\n\n\t@keyframes dotPulse {\n\t\t0%,\n\t\t80%,\n\t\t100% {\n\t\t\topacity: 0.6;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t40% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1.4);\n\t\t}\n\t}\n`;\n\nexport { DotPulse };\n"],"names":["DotPulse","color","size","DotPulseContainer","jsx","Dot","styled","props"],"mappings":";;AAQA,MAAMA,IAAoC,CAAC;AAAA,EAC1C,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AACR,wBAEGC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAC,EAACC,~~GAAA~~,~~EAAI~~,QAAQJ,GAAO,OAAOC,GAAM;AAAA,~~EACjC~~,~~gBAAAE,EAACC,~~GAAA,EAAI,QAAQJ,GAAO,OAAOC,GAAM;AAAA,~~EACjC~~,~~gBAAAE,EAACC,~~GAAA,EAAI,QAAQJ,GAAO,OAAOC,EAAA,CAAM;AAAA,~~GAClC~~,GAIIC,IAAoBG,EAAO;AAAA;AAAA;AAAA,GAU3BD,IAAMC,EAAO;AAAA;AAAA,UAET,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,KAAK;AAAA;AAAA,eAElB,CAACA,MAAUA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"DotPulse.js","sources":["../../../../src/components/dot-pulse/DotPulse.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\nexport interface DotPulseProps {\n\tcolor?: string;\n\tsize?: number;\n}\n\nconst DotPulse: React.FC<DotPulseProps> = ({\n\tcolor = 'linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)',\n\tsize = 4,\n}) => {\n\treturn (\n\t\t<DotPulseContainer>\n\t\t\t<Dot data-testid=\"dot-pulse-dot\" $color={color} $size={size} />\n\t\t\t<Dot data-testid=\"dot-pulse-dot\" $color={color} $size={size} />\n\t\t\t<Dot data-testid=\"dot-pulse-dot\" $color={color} $size={size} />\n\t\t</DotPulseContainer>\n\t);\n};\n\nconst DotPulseContainer = styled.span`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n\ninterface DotProps {\n\t$color: string;\n\t$size: number;\n}\n\nconst Dot = styled.span<DotProps>`\n\tdisplay: block;\n\twidth: ${(props) => props.$size}px;\n\theight: ${(props) => props.$size}px;\n\tborder-radius: 50%;\n\tbackground: ${(props) => props.$color};\n\tmargin: 0 1.5px;\n\topacity: 0.6;\n\tanimation: dotPulse 1.2s infinite;\n\twill-change: opacity, transform;\n\n\t&:nth-child(2) {\n\t\tanimation-delay: 0.2s;\n\t}\n\n\t&:nth-child(3) {\n\t\tanimation-delay: 0.4s;\n\t}\n\n\t@keyframes dotPulse {\n\t\t0%,\n\t\t80%,\n\t\t100% {\n\t\t\topacity: 0.6;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t40% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1.4);\n\t\t}\n\t}\n`;\n\nexport { DotPulse };\n"],"names":["DotPulse","color","size","DotPulseContainer","jsx","Dot","styled","props"],"mappings":";;AAQA,MAAMA,IAAoC,CAAC;AAAA,EAC1C,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AACR,wBAEGC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAC,EAACC,KAAI,eAAY,iBAAgB,QAAQJ,GAAO,OAAOC,GAAM;AAAA,oBAC5DG,GAAA,EAAI,eAAY,iBAAgB,QAAQJ,GAAO,OAAOC,GAAM;AAAA,oBAC5DG,GAAA,EAAI,eAAY,iBAAgB,QAAQJ,GAAO,OAAOC,EAAA,CAAM;AAAA,GAC9D,GAIIC,IAAoBG,EAAO;AAAA;AAAA;AAAA,GAU3BD,IAAMC,EAAO;AAAA;AAAA,UAET,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,KAAK;AAAA;AAAA,eAElB,CAACA,MAAUA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/dropShadow/DropShadow.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { jsx as d } from "react/jsx-runtime";
-const n = {
+import { jsx as r } from "react/jsx-runtime";
+const t = {
   z1: {
     up: "0px -2px 8px rgba(0, 0, 0, 0.12)",
     down: "0px 2px 8px rgba(0, 0, 0, 0.12)"
@@ -8,11 +8,11 @@ const n = {
     up: "0px -4px 12px rgba(0, 0, 0, 0.12)",
     down: "0px 4px 12px rgba(0, 0, 0, 0.12)"
   }
-}, w = ({ level: p = "z1", position: x = "down", children: o, style: r }) => {
-  const a = n[p][x];
-  return /* @__PURE__ */ d("div", { style: { boxShadow: a, ...r ?? {} }, children: o });
+}, s = ({ level: p = "z1", position: o = "down", children: x, style: a }) => {
+  const d = t[p][o];
+  return /* @__PURE__ */ r("div", { "data-testid": "drop-shadow", style: { boxShadow: d, ...a ?? {} }, children: x });
 };
 export {
-  w as DropShadow
+  s as DropShadow
 };
 //# sourceMappingURL=DropShadow.js.map

package/dist/esm/components/dropShadow/DropShadow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropShadow.js","sources":["../../../../src/components/dropShadow/DropShadow.tsx"],"sourcesContent":["import React from 'react';\n\nconst BoxShadowMap = {\n\tz1: {\n\t\tup: '0px -2px 8px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 2px 8px rgba(0, 0, 0, 0.12)',\n\t},\n\tz2: {\n\t\tup: '0px -4px 12px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 4px 12px rgba(0, 0, 0, 0.12)',\n\t},\n};\n\nexport const DropShadow: React.FC<{\n\tlevel: 'z1' \| 'z2';\n\tposition: 'up' \| 'down';\n\tchildren: React.ReactNode;\n\tstyle?: React.CSSProperties;\n}> = ({ level = 'z1', position = 'down', children, style }) => {\n\tconst boxShadow = BoxShadowMap[level][position];\n\n\treturn <div style={{ boxShadow, ...(style ?? {}) }}>{children}</div~~>;\~~n};\n"],"names":["BoxShadowMap","DropShadow","level","position","children","style","boxShadow","jsx"],"mappings":";AAEA,MAAMA,IAAe;AAAA,EACpB,IAAI;AAAA,IACH,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAEP,IAAI;AAAA,IACH,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAER,GAEaC,IAKR,CAAC,EAAE,OAAAC,IAAQ,MAAM,UAAAC,IAAW,QAAQ,UAAAC,GAAU,OAAAC,QAAY;AAC9D,QAAMC,IAAYN,EAAaE,CAAK,EAAEC,CAAQ;AAE9C,~~SAAO~~,gBAAAI,EAAC,OAAA,EAAI,OAAO,EAAE,WAAAD,GAAW,GAAID,KAAS,~~CAAA~~,~~KAAQ~~,UAAAD,~~GAAS~~;~~AAC/D~~;"}
1	+ {"version":3,"file":"DropShadow.js","sources":["../../../../src/components/dropShadow/DropShadow.tsx"],"sourcesContent":["import React from 'react';\n\nconst BoxShadowMap = {\n\tz1: {\n\t\tup: '0px -2px 8px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 2px 8px rgba(0, 0, 0, 0.12)',\n\t},\n\tz2: {\n\t\tup: '0px -4px 12px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 4px 12px rgba(0, 0, 0, 0.12)',\n\t},\n};\n\nexport const DropShadow: React.FC<{\n\tlevel: 'z1' \| 'z2';\n\tposition: 'up' \| 'down';\n\tchildren: React.ReactNode;\n\tstyle?: React.CSSProperties;\n}> = ({ level = 'z1', position = 'down', children, style }) => {\n\tconst boxShadow = BoxShadowMap[level][position];\n\n\treturn (\n\t\t<div data-testid=\"drop-shadow\" style={{ boxShadow, ...(style ?? {}) }}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["BoxShadowMap","DropShadow","level","position","children","style","boxShadow","jsx"],"mappings":";AAEA,MAAMA,IAAe;AAAA,EACpB,IAAI;AAAA,IACH,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAEP,IAAI;AAAA,IACH,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAER,GAEaC,IAKR,CAAC,EAAE,OAAAC,IAAQ,MAAM,UAAAC,IAAW,QAAQ,UAAAC,GAAU,OAAAC,QAAY;AAC9D,QAAMC,IAAYN,EAAaE,CAAK,EAAEC,CAAQ;AAE9C,SACC,gBAAAI,EAAC,OAAA,EAAI,eAAY,eAAc,OAAO,EAAE,WAAAD,GAAW,GAAID,KAAS,GAAC,GAC/D,UAAAD,EAAA,CACF;AAEF;"}

package/dist/esm/components/dropdown/ChipInput.js CHANGED Viewed

@@ -24,15 +24,15 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
   return w(() => {
     if (!t) return;
     let n = 0;
-    const r = B(t);
-    let o = t.filter((l) => (n += l.label.length, n <= r));
-    o.length === 0 && t.length > 0 && (o = [t[0]]), x(o);
-    const O = t.filter((l) => !o.includes(l)).map((l) => l.label);
-    I(O), y(t.length - o.length);
+    const o = B(t);
+    let r = t.filter((l) => (n += l.label.length, n <= o));
+    r.length === 0 && t.length > 0 && (r = [t[0]]), x(r);
+    const O = t.filter((l) => !r.includes(l)).map((l) => l.label);
+    I(O), y(t.length - r.length);
   }, [t]), /* @__PURE__ */ m(S, { children: [
     /* @__PURE__ */ m(F, { style: { ...f }, error: !!a, children: [
       /* @__PURE__ */ m("div", { className: "chips-container", children: [
-        b?.map((n, r) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
+        b?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
           T,
           {
             tagText: L.truncateText(
@@ -42,6 +42,7 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
             TrailingIcon: () => /* @__PURE__ */ e(
               E,
               {
+                "data-testid": "chip-remove-icon",
                 width: 12,
                 height: 12,
                 style: { cursor: "pointer" },
@@ -52,7 +53,7 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
             ),
             children: n.selectedLabel || n.label
           }
-        ) }, r)),
+        ) }, o)),
         !!p && /* @__PURE__ */ e(
           "div",
           {
@@ -66,13 +67,13 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
               {
                 body: "",
                 placement: "bottom",
-                tooltipContent: v && c.length > 0 ? /* @__PURE__ */ e("div", { style: { padding: "4px" }, children: c.map((n, r) => /* @__PURE__ */ e(
+                tooltipContent: v && c.length > 0 ? /* @__PURE__ */ e("div", { style: { padding: "4px" }, children: c.map((n, o) => /* @__PURE__ */ e(
                   h,
                   {
                     style: { color: d.text.white },
                     children: n
                   },
-                  r
+                  o
                 )) }) : void 0,
                 children: /* @__PURE__ */ e(h, { color: d.content.placeholder, children: `+${p} more` })
               }

package/dist/esm/components/dropdown/ChipInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\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)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":";;;;;;;;;;;;AAwBA,MAAMA,IAAuB,CAACC,MACzBA,EAAM,WAAW,IAAU,MAC3BA,EAAM,WAAW,IAAU,KACxB,IAGFC,IAAsC,CAAC;AAAA,EAC5C,OAAAD;AAAA,EACA,cAAAE;AAAA,EACA,gBAAAC,IAAiB,CAAA;AAAA,EACjB,WAAAC,IAAY;AAAA,EACZ,kBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,cAAAC,IAAe;AAAA,EACf,uBAAAC,IAAwB;AACzB,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAA,GACxB,CAACC,GAAqBC,CAAsB,IAAIF,EAAS,CAAC,GAC1D,CAACG,GAAwBC,CAAyB,IAAIJ,EAE1D,CAAA,CAAE;AAEJ,SAAAK,EAAU,MAAM;AACf,QAAI,CAAChB,EAAO;AACZ,QAAIiB,IAAiB;AACrB,UAAMC,IAAWnB,EAAqBC,CAAK;AAC3C,QAAIS,IAAUT,EAAM,OAAO,CAACmB,OAC3BF,KAAkBE,EAAO,MAAM,QACxBF,KAAkBC,EACzB;AACD,IAAIT,EAAQ,WAAW,KAAKT,EAAM,SAAS,MAC1CS,IAAU,CAACT,EAAM,CAAC,CAAC,IAEpBU,EAAWD,CAAO;AAElB,UAAMW,IADiBpB,EAAM,OAAO,CAACmB,MAAW,CAACV,EAAQ,SAASU,CAAM,CAAC,EAC3C,IAAI,CAACA,MAAWA,EAAO,KAAK;AAC1D,IAAAJ,EAA0BK,CAAM,GAChCP,EAAuBb,EAAM,SAASS,EAAQ,MAAM;AAAA,EACrD,GAAG,CAACT,CAAK,CAAC,GAGT,gBAAAqB,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAiB,OAAO,EAAE,GAAGpB,KAAkB,OAAO,CAAC,CAACI,GACxD,UAAA;AAAA,MAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,QAAAZ,GAAS,IAAI,CAACe,GAAMC,MACpB,gBAAAC,EAAC,SAAgB,OAAO,EAAE,QAAQ,EAAA,GACjC,UAAA,gBAAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,SAASC,EAAY;AAAA,cACpBJ,EAAK,iBAAiBA,EAAK;AAAA,cAC3B;AAAA,YAAA;AAAA,YAED,cAAc,MACb,gBAAAE;AAAA,cAACG;AAAAA,cAAA;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,OAAO,EAAE,QAAQ,UAAA;AAAA,gBACjB,SAAS,MAAM;AACd,kBAAA3B,EAAasB,CAAI;AAAA,gBAClB;AAAA,cAAA;AAAA,YAAA;AAAA,YAID,UAAAA,EAAK,iBAAiBA,EAAK;AAAA,UAAA;AAAA,QAAA,EAC7B,~~GAlBSC~~,~~CAmBV~~,CACA;AAAA,QACA,CAAC,CAACb,KACF,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,eAAe;AAAA,YAAA;AAAA,YAGhB,UAAA,gBAAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACA,MAAM;AAAA,gBACN,WAAU;AAAA,gBACV,gBACCtB,KAAyBM,EAAuB,SAAS,sBACvD,OAAA,EAAI,OAAO,EAAE,SAAS,SACrB,UAAAA,EAAuB,IAAI,CAACiB,GAAON,MACnC,gBAAAC;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBACA,OAAO,EAAE,OAAOC,EAAO,KAAK,MAAA;AAAA,oBAG3B,UAAAF;AAAA,kBAAA;AAAA,kBAFIN;AAAA,gBAAA,CAIN,GACF,IACG;AAAA,gBAGL,UAAA,gBAAAC,EAACM,KAAY,OAAOC,EAAO,QAAQ,aACjC,UAAA,IAAIrB,CAAmB,QAAA,CACzB;AAAA,cAAA;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,QAIDZ,EAAM,WAAW,KACjB,gBAAA0B,EAAC,OAAA,EAAI,OAAO,EAAE,OAAOO,EAAO,QAAQ,YAAA,GAClC,UAAA3B,EAAA,CACF;AAAA,MAAA,GAEF;AAAA,wBAEC,OAAA,EACA,UAAA,gBAAAoB;AAAA,QAACQ;AAAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,WAAW7B,IAAmB,mBAAmB;AAAA,UAAA;AAAA,UAElD,OACCD,MAAc,YAAY,KAAKA,MAAc,UAAU,KAAK;AAAA,UAE7D,QACCA,MAAc,YAAY,KAAKA,MAAc,UAAU,KAAK;AAAA,UAE7D,OAAO6B,EAAO,QAAQ;AAAA,QAAA;AAAA,MAAA,EACvB,CACD;AAAA,IAAA,GACD;AAAA,IACC,CAAC,CAAC1B,KACF,gBAAAc,EAACc,GAAA,EAAY,SAAS,IACpB,UAAA;AAAA,MAAA,CAAC,CAAC5B,KAAgB,gBAAAmB,EAACU,KAAU,OAAO,IAAI,QAAQ,IAAI;AAAA,MACpD7B;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEF;AAEF;"}
1	+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"chip-remove-icon\"\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\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)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/DropdownPopover/index.js CHANGED Viewed

@@ -1,24 +1,24 @@
 import { jsx as a, Fragment as b, jsxs as v } from "react/jsx-runtime";
 import L, { useState as s, useRef as j, useImperativeHandle as A, useEffect as g } from "react";
 import { usePopper as _ } from "react-popper";
-import { COLORS as F } from "../../../constants/Theme.js";
-import { OverLapAbs as N, OpenDropdownContainer as T } from "../Common.styled.js";
-import { Tooltip as V } from "../../tooltips/Tooltip.js";
-import { DropShadow as Z } from "../../dropShadow/DropShadow.js";
-import { OpenedDropdown as q } from "../OpenedDropdown/components/OpennedDropdown.js";
-const w = L.forwardRef(
+import { COLORS as w } from "../../../constants/Theme.js";
+import { OverLapAbs as F, OpenDropdownContainer as N } from "../Common.styled.js";
+import { Tooltip as T } from "../../tooltips/Tooltip.js";
+import { DropShadow as V } from "../../dropShadow/DropShadow.js";
+import { OpenedDropdown as Z } from "../OpenedDropdown/components/OpennedDropdown.js";
+const q = L.forwardRef(
   ({
     children: d,
     onDropdownVisbilityChange: h,
     version: l = "1.0",
     tooltipContent: c,
     tooltipDirection: S,
-    showTooltipArrow: E,
-    isChildLoading: R,
-    forceOpen: f,
+    showTooltipArrow: y,
+    isChildLoading: E,
+    forceOpen: o,
     ...e
-  }, y) => {
-    const n = y, [t, i] = s(!1), [x, o] = s(!1), [C, O] = s(null), [z, H] = s(null), u = j(null), { styles: I, attributes: M } = _(C, z, {
+  }, R) => {
+    const n = R, [t, i] = s(!1), [x, f] = s(!1), [C, O] = s(null), [z, H] = s(null), u = j(null), { styles: I, attributes: M } = _(C, z, {
       placement: e.placement,
       strategy: e.strategy
     }), k = (r) => {
@@ -42,25 +42,26 @@ const w = L.forwardRef(
           style: {
             position: "relative",
             ...l === "3.0" && {
-              backgroundColor: t || x ? F.surface.hovered : "transparent",
+              backgroundColor: t || x ? w.surface.hovered : "transparent",
               transition: "background-color 0.3s ease",
               borderRadius: 4
             }
           },
           ref: O,
-          onMouseEnter: l === "3.0" ? () => o(!0) : void 0,
-          onMouseLeave: l === "3.0" ? () => o(!1) : void 0,
+          onMouseEnter: l === "3.0" ? () => f(!0) : void 0,
+          onMouseLeave: l === "3.0" ? () => f(!1) : void 0,
           children: [
             /* @__PURE__ */ a(
-              N,
+              F,
               {
                 ref: u,
+                "data-testid": "dropdown-overlay",
                 allowEvents: e.allowEvents,
                 disabled: e.disabled,
                 onClick: (r) => {
                   e.onDropdownOpen?.(), t ? (i(!1), r.preventDefault()) : e.disabled || i(!0);
                 },
-                isChildLoading: R,
+                isChildLoading: E,
                 children: e.allowEvents ? d : null
               }
             ),
@@ -68,8 +69,8 @@ const w = L.forwardRef(
           ]
         }
       ),
-      (t || f) && /* @__PURE__ */ a(
-        T,
+      (t || o) && /* @__PURE__ */ a(
+        N,
         {
           ref: H,
           style: {
@@ -79,7 +80,7 @@ const w = L.forwardRef(
           ...M.popper,
           "data-test": e["data-test"],
           children: /* @__PURE__ */ a(
-            Z,
+            V,
             {
               level: "z2",
               position: "down",
@@ -88,7 +89,7 @@ const w = L.forwardRef(
                 boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)"
               },
               children: /* @__PURE__ */ a(
-                q,
+                Z,
                 {
                   ...e,
                   onSelect: (r) => {
@@ -107,19 +108,19 @@ const w = L.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ a(b, { children: !t && !f && c !== void 0 ? /* @__PURE__ */ a(
-      V,
+    return /* @__PURE__ */ a(b, { children: !t && !o && c !== void 0 ? /* @__PURE__ */ a(
+      T,
       {
         body: c,
         placement: S,
-        hideArrow: !E,
+        hideArrow: !y,
         children: /* @__PURE__ */ a("div", { "data-test": e["data-test"], children: m() })
       }
     ) : m() });
   }
 );
-w.displayName = "DropdownPopover";
+q.displayName = "DropdownPopover";
 export {
-  w as DropdownPopover
+  q as DropdownPopover
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/dropdown/DropdownPopover/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/*\n\t If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t /\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [isHovering, setIsHovering] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t...(version === '3.0' && {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\topenDropdown \|\| isHovering\n\t\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t\t: 'transparent',\n\t\t\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting /\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(true) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(false) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown \|\| forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tborderRadius: version === '3.0' ? 4 : 8,\n\t\t\t\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","isHovering","setIsHovering","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","COLORS","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/*\n\t If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t /\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [isHovering, setIsHovering] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t...(version === '3.0' && {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\topenDropdown \|\| isHovering\n\t\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t\t: 'transparent',\n\t\t\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting /\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(true) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(false) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tdata-testid=\"dropdown-overlay\"\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown \|\| forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tborderRadius: version === '3.0' ? 4 : 8,\n\t\t\t\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","isHovering","setIsHovering","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","COLORS","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"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"}