npm - @bikdotai/bik-component-library - Versions diffs - 0.0.840-tools-beta.4 → 0.0.840 - Mend

@bikdotai/bik-component-library 0.0.840-tools-beta.4 → 0.0.840

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 (88) hide show

package/dist/esm/components/radioButton/RadioButton.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { jsxs as c, jsx as t, Fragment as x } from "react/jsx-runtime";
-import { useState as n, useEffect as h, useMemo as r } from "react";
+import { jsxs as c, jsx as t, Fragment as u } from "react/jsx-runtime";
+import { useState as n, useEffect as x, useMemo as r } from "react";
 import { RadioButtonContainer as S, RadioButtonIcon as y } from "./RadioButton.styled.js";
-import { BodyCaption as m, TitleSmall as C, BodySecondary as k, BodyPrimary as D } from "../TypographyStyle.js";
+import { BodyCaption as m, TitleSmall as k, BodySecondary as C, BodyPrimary as D } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
 const g = (e) => {
   const l = r(
@@ -33,6 +33,7 @@ const g = (e) => {
         e.isActive && /* @__PURE__ */ t(
           "circle",
           {
+            "data-test": "radio-checked-indicator",
             cx: e.isSmall ? "8" : "10",
             cy: e.isSmall ? "8" : "10",
             r: e.isSmall ? 3 : 5,
@@ -49,11 +50,11 @@ const g = (e) => {
       a(o), e.onValueChange?.(o, e.value);
     }
   };
-  h(() => {
+  x(() => {
     a(e.isActive);
   }, [e.isActive]);
-  const u = () => e.label ? e.boldOnChecked && l || e.alwaysBold ? /* @__PURE__ */ t(
-    C,
+  const h = () => e.label ? e.boldOnChecked && l || e.alwaysBold ? /* @__PURE__ */ t(
+    k,
     {
       color: e.isDisabled ? i.text.disabled : i.text.primary,
       children: e.label
@@ -65,7 +66,7 @@ const g = (e) => {
       children: e.label
     }
   ) : e.labelSize === "MEDIUM" ? /* @__PURE__ */ t(
-    k,
+    C,
     {
       color: e.isDisabled ? i.text.disabled : i.text.primary,
       children: e.label
@@ -76,7 +77,7 @@ const g = (e) => {
       color: e.isDisabled ? i.text.disabled : i.text.primary,
       children: e.label
     }
-  ) : /* @__PURE__ */ t(x, {});
+  ) : /* @__PURE__ */ t(u, {});
   return /* @__PURE__ */ c(
     S,
     {
@@ -117,7 +118,7 @@ const g = (e) => {
               gap: e.gapBetweenBodyAndCaption || "0px"
             },
             children: [
-              u(),
+              h(),
               e.caption && /* @__PURE__ */ t(
                 m,
                 {

package/dist/esm/components/radioButton/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\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\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\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<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.labelSize === 'MEDIUM') {\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<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\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\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\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\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tdata-test=\"radio-checked-indicator\"\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\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<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.labelSize === 'MEDIUM') {\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<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\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\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}

package/dist/esm/components/radioList/RadioList.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
 import { useState as m, useEffect as u } from "react";
 import { RadioListStyled as f } from "./RadioList.styled.js";
 import { TitleRegular as h, BodySecondary as O } from "../TypographyStyle.js";
-import { COLORS as C } from "../../constants/Theme.js";
-import { RadioButton as v } from "../radioButton/RadioButton.js";
+import { COLORS as v } from "../../constants/Theme.js";
+import { RadioButton as C } from "../radioButton/RadioButton.js";
 const T = (t) => {
   const [n, s] = m(
     t.listItems
@@ -12,26 +12,35 @@ const T = (t) => {
     s(t.listItems);
   }, [t.listItems]);
   const d = (e, r) => {
-    let o;
-    const c = [...n];
-    c.forEach((i) => {
-      i.value === r ? (o = i, i.isActive = e) : i.isActive = !e;
-    }), s(c), t.onChange(o);
+    let a;
+    const o = [...n];
+    o.forEach((i) => {
+      i.value === r ? (a = i, i.isActive = e) : i.isActive = !e;
+    }), s(o), t.onChange(a);
   };
-  return /* @__PURE__ */ a(f, { children: [
-    (t.title || t.subTitle) && /* @__PURE__ */ a("div", { className: "title__container", children: [
+  return /* @__PURE__ */ c(f, { children: [
+    (t.title || t.subTitle) && /* @__PURE__ */ c("div", { className: "title__container", children: [
       t.title && /* @__PURE__ */ l(h, { children: t.title }),
-      t.subTitle && /* @__PURE__ */ l(O, { color: C.text.secondary, children: t.subTitle })
+      t.subTitle && /* @__PURE__ */ l(O, { color: v.text.secondary, children: t.subTitle })
     ] }),
-    /* @__PURE__ */ l("div", { style: t.listContainerStyles ?? {}, className: "list__container", children: n.map((e) => /* @__PURE__ */ l(
-      v,
+    /* @__PURE__ */ l(
+      "div",
       {
-        ...e,
-        onValueChange: d,
-        boldOnChecked: t.boldOnChecked
-      },
-      e.value
-    )) })
+        "data-test": "radio-list-container",
+        style: t.listContainerStyles ?? {},
+        className: "list__container",
+        children: n.map((e) => /* @__PURE__ */ l(
+          C,
+          {
+            "data-test": e.value,
+            ...e,
+            onValueChange: d,
+            boldOnChecked: t.boldOnChecked
+          },
+          e.value
+        ))
+      }
+    )
   ] });
 };
 export {

package/dist/esm/components/radioList/RadioList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioList.js","sources":["../../../../src/components/radioList/RadioList.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { RadioButton, RadioButtonProps } from '@src/components/radioButton';\nimport { RadioListStyled } from '@src/components/radioList/RadioList.styled';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ntype RadioListItem = Omit<RadioButtonProps, 'onValueChange'> & {\n\tvalue: string;\n};\n\nexport type RadioListProps = {\n\ttitle?: string;\n\tsubTitle?: string;\n\tlistItems: RadioListItem[];\n\tonChange: (option: RadioListItem) => void;\n\tlistContainerStyles?: React.CSSProperties;\n\tboldOnChecked?: boolean;\n};\n\nexport const RadioList: React.FC<RadioListProps> = (props) => {\n\tconst [listOptions, setListOptions] = useState<RadioListItem[]>(\n\t\tprops.listItems,\n\t);\n\n\tuseEffect(() => {\n\t\tsetListOptions(props.listItems);\n\t}, [props.listItems]);\n\n\tconst onOptionClicked = (checked: boolean, value: string \| undefined) => {\n\t\tlet selectedOption;\n\t\tconst temptListOptions = [...listOptions];\n\t\ttemptListOptions.forEach((option) => {\n\t\t\tif (option.value === value) {\n\t\t\t\tselectedOption = option;\n\t\t\t\toption['isActive'] = checked;\n\t\t\t} else {\n\t\t\t\toption['isActive'] = !checked;\n\t\t\t}\n\t\t});\n\t\tsetListOptions(temptListOptions);\n\t\tprops.onChange(selectedOption);\n\t};\n\n\treturn (\n\t\t<RadioListStyled>\n\t\t\t{(props.title \|\| props.subTitle) && (\n\t\t\t\t<div className=\"title__container\">\n\t\t\t\t\t{props.title && <TitleRegular>{props.title}</TitleRegular>}\n\t\t\t\t\t{props.subTitle && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.text.secondary}>\n\t\t\t\t\t\t\t{props.subTitle}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div ~~style~~={props.listContainerStyles ?? {}} ~~className~~=\"list__container\">\n\t\t\t\t{listOptions.map((listItem) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tkey={listItem.value}\n\t\t\t\t\t\t\t{...listItem}\n\t\t\t\t\t\t\tonValueChange={onOptionClicked}\n\t\t\t\t\t\t\tboldOnChecked={props.boldOnChecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</RadioListStyled>\n\t);\n};\n"],"names":["RadioList","props","listOptions","setListOptions","useState","useEffect","onOptionClicked","checked","value","selectedOption","temptListOptions","option","RadioListStyled","jsxs","jsx","TitleRegular","BodySecondary","COLORS","listItem","RadioButton"],"mappings":";;;;;;AAmBO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACrCH,EAAM;AAAA,EAAA;AAGP,EAAAI,EAAU,MAAM;AACf,IAAAF,EAAeF,EAAM,SAAS;AAAA,EAC/B,GAAG,CAACA,EAAM,SAAS,CAAC;AAEpB,QAAMK,IAAkB,CAACC,GAAkBC,MAA8B;AACxE,QAAIC;AACJ,UAAMC,IAAmB,CAAC,GAAGR,CAAW;AACxC,IAAAQ,EAAiB,QAAQ,CAACC,MAAW;AACpC,MAAIA,EAAO,UAAUH,KACpBC,IAAiBE,GACjBA,EAAO,WAAcJ,KAErBI,EAAO,WAAc,CAACJ;AAAA,IAExB,CAAC,GACDJ,EAAeO,CAAgB,GAC/BT,EAAM,SAASQ,CAAc;AAAA,EAC9B;AAEA,2BACEG,GAAA,EACE,UAAA;AAAA,KAAAX,EAAM,SAASA,EAAM,aACtB,gBAAAY,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAAZ,EAAM,SAAS,gBAAAa,EAACC,GAAA,EAAc,UAAAd,EAAM,OAAM;AAAA,MAC1CA,EAAM,YACN,gBAAAa,EAACE,GAAA,EAAc,OAAOC,EAAO,KAAK,WAChC,UAAAhB,EAAM,SAAA,CACR;AAAA,IAAA,GAEF;AAAA,IAED,gBAAAa,~~EAAC~~,~~OAAA~~,~~EAAI~~,OAAOb,EAAM,uBAAuB,CAAA,~~GAAI~~,WAAU,~~mBACrD~~,UAAAC,EAAY,IAAI,CAACgB,MAEhB,gBAAAJ;AAAA,~~MAACK~~;AAAA,~~MAAA~~;AAAA,~~QAEC~~,~~GAAGD~~;AAAA,~~QACJ~~,eAAeZ;AAAA,~~QACf~~,eAAeL,EAAM;AAAA,~~MAAA~~;AAAA,~~MAHhBiB~~,EAAS;AAAA,~~IAAA~~,~~CAMhB~~,~~EAAA~~,~~CACF~~;AAAA,~~EAAA~~,GACD;AAEF;"}
1	+ {"version":3,"file":"RadioList.js","sources":["../../../../src/components/radioList/RadioList.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { RadioButton, RadioButtonProps } from '@src/components/radioButton';\nimport { RadioListStyled } from '@src/components/radioList/RadioList.styled';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ntype RadioListItem = Omit<RadioButtonProps, 'onValueChange'> & {\n\tvalue: string;\n};\n\nexport type RadioListProps = {\n\ttitle?: string;\n\tsubTitle?: string;\n\tlistItems: RadioListItem[];\n\tonChange: (option: RadioListItem) => void;\n\tlistContainerStyles?: React.CSSProperties;\n\tboldOnChecked?: boolean;\n};\n\nexport const RadioList: React.FC<RadioListProps> = (props) => {\n\tconst [listOptions, setListOptions] = useState<RadioListItem[]>(\n\t\tprops.listItems,\n\t);\n\n\tuseEffect(() => {\n\t\tsetListOptions(props.listItems);\n\t}, [props.listItems]);\n\n\tconst onOptionClicked = (checked: boolean, value: string \| undefined) => {\n\t\tlet selectedOption;\n\t\tconst temptListOptions = [...listOptions];\n\t\ttemptListOptions.forEach((option) => {\n\t\t\tif (option.value === value) {\n\t\t\t\tselectedOption = option;\n\t\t\t\toption['isActive'] = checked;\n\t\t\t} else {\n\t\t\t\toption['isActive'] = !checked;\n\t\t\t}\n\t\t});\n\t\tsetListOptions(temptListOptions);\n\t\tprops.onChange(selectedOption);\n\t};\n\n\treturn (\n\t\t<RadioListStyled>\n\t\t\t{(props.title \|\| props.subTitle) && (\n\t\t\t\t<div className=\"title__container\">\n\t\t\t\t\t{props.title && <TitleRegular>{props.title}</TitleRegular>}\n\t\t\t\t\t{props.subTitle && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.text.secondary}>\n\t\t\t\t\t\t\t{props.subTitle}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tdata-test=\"radio-list-container\"\n\t\t\t\tstyle={props.listContainerStyles ?? {}}\n\t\t\t\tclassName=\"list__container\"\n\t\t\t>\n\t\t\t\t{listOptions.map((listItem) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tkey={listItem.value}\n\t\t\t\t\t\t\tdata-test={listItem.value}\n\t\t\t\t\t\t\t{...listItem}\n\t\t\t\t\t\t\tonValueChange={onOptionClicked}\n\t\t\t\t\t\t\tboldOnChecked={props.boldOnChecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</RadioListStyled>\n\t);\n};\n"],"names":["RadioList","props","listOptions","setListOptions","useState","useEffect","onOptionClicked","checked","value","selectedOption","temptListOptions","option","RadioListStyled","jsxs","jsx","TitleRegular","BodySecondary","COLORS","listItem","RadioButton"],"mappings":";;;;;;AAmBO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,CAACC,GAAaC,CAAc,IAAIC;AAAA,IACrCH,EAAM;AAAA,EAAA;AAGP,EAAAI,EAAU,MAAM;AACf,IAAAF,EAAeF,EAAM,SAAS;AAAA,EAC/B,GAAG,CAACA,EAAM,SAAS,CAAC;AAEpB,QAAMK,IAAkB,CAACC,GAAkBC,MAA8B;AACxE,QAAIC;AACJ,UAAMC,IAAmB,CAAC,GAAGR,CAAW;AACxC,IAAAQ,EAAiB,QAAQ,CAACC,MAAW;AACpC,MAAIA,EAAO,UAAUH,KACpBC,IAAiBE,GACjBA,EAAO,WAAcJ,KAErBI,EAAO,WAAc,CAACJ;AAAA,IAExB,CAAC,GACDJ,EAAeO,CAAgB,GAC/BT,EAAM,SAASQ,CAAc;AAAA,EAC9B;AAEA,2BACEG,GAAA,EACE,UAAA;AAAA,KAAAX,EAAM,SAASA,EAAM,aACtB,gBAAAY,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAAZ,EAAM,SAAS,gBAAAa,EAACC,GAAA,EAAc,UAAAd,EAAM,OAAM;AAAA,MAC1CA,EAAM,YACN,gBAAAa,EAACE,GAAA,EAAc,OAAOC,EAAO,KAAK,WAChC,UAAAhB,EAAM,SAAA,CACR;AAAA,IAAA,GAEF;AAAA,IAED,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,aAAU;AAAA,QACV,OAAOb,EAAM,uBAAuB,CAAA;AAAA,QACpC,WAAU;AAAA,QAET,UAAAC,EAAY,IAAI,CAACgB,MAEhB,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YAEA,aAAWD,EAAS;AAAA,YACnB,GAAGA;AAAA,YACJ,eAAeZ;AAAA,YACf,eAAeL,EAAM;AAAA,UAAA;AAAA,UAJhBiB,EAAS;AAAA,QAAA,CAOhB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACD;AAEF;"}

package/dist/esm/components/searchBar/searchBar.js CHANGED Viewed

@@ -1,27 +1,27 @@
 import { jsx as B } from "react/jsx-runtime";
 import { SearchIcon as E } from "../../assets/icons/searchIcon.js";
-import { useState as c, useEffect as d } from "react";
+import { useState as o, useEffect as d } from "react";
 import w from "../../assets/icons/cross.svg.js";
 import { Input as x } from "../input/Input.js";
 const O = (e) => {
   const {
-    isEnabled: o,
+    isEnabled: c,
     onEnter: h,
     placeholder: C,
     width: v,
     variant: b,
     validate: S,
     isActive: i
-  } = e, [f, t] = c("search"), [m, s] = c("default"), [k, n] = c(
-    i ? "active" : o ? "none" : "disabled"
-  ), [l, r] = c(
+  } = e, [f, t] = o("search"), [m, s] = o("default"), [k, n] = o(
+    i ? "active" : c ? "none" : "disabled"
+  ), [l, r] = o(
     e.initialValue || e.searchValue || ""
   );
   d(() => {
     r(e.searchValue ?? ""), e.searchValue?.trim()?.length ? t("cross") : t("search");
   }, [e.searchValue]), d(() => {
-    n(i ? "active" : o ? "none" : "disabled");
-  }, [o, i]), d(() => {
+    n(i ? "active" : c ? "none" : "disabled");
+  }, [c, i]), d(() => {
     e.reset && g();
   }, [e?.reset]);
   const I = (a, u) => {
@@ -31,7 +31,7 @@ const O = (e) => {
     }
     a.trim().length ? t("cross") : t("search");
   }, V = (a) => {
-    o && h(a);
+    c && h(a);
   }, g = () => {
     t("search"), s("default"), r(""), e.onChange(""), n("none"), h("");
   };
@@ -42,7 +42,7 @@ const O = (e) => {
       id: "search-bar",
       validate: S,
       onFocus: () => {
-        l.length && t("cross"), m === "default" && o && (s("clicked"), n("active"));
+        l.length && t("cross"), m === "default" && c && (s("clicked"), n("active"));
       },
       width: v,
       state: k,
@@ -53,7 +53,8 @@ const O = (e) => {
         icon: w,
         callback: () => {
           g(), e.onClickCross && e.onClickCross();
-        }
+        },
+        "data-test": "search-clear-icon"
       } : void 0,
       onChangeText: I,
       placeholder: C,

package/dist/esm/components/searchBar/searchBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchBar.js","sources":["../../../../src/components/searchBar/searchBar.tsx"],"sourcesContent":["import { SearchIcon } from '@src/assets/icons/searchIcon';\nimport { useEffect, useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { ButtonProps } from '../button/model';\nimport { Input } from '../input/Input';\nimport { InputVariant } from '../input/Input.model';\n\nexport interface SearchBarProps {\n\twidth: string;\n\tisEnabled: boolean;\n\tonChange: (searchText: string) => void;\n\tonEnter: (searchText: string) => void;\n\tplaceholder: string;\n\tvariant: InputVariant;\n\tvalidate?: (input?: string \| number) => [boolean, string];\n\tinitialValue?: string;\n\treset?: boolean;\n\tonClickCross?: () => void;\n\tisActive?: boolean;\n\tsuffixButton?: ButtonProps;\n\tsearchValue?: string;\n\t'data-test'?: string;\n}\n\ntype ActiveStates = 'none' \| 'disabled' \| 'active';\ntype Mode = 'default' \| 'clicked';\n\nexport const SearchBar = (props: SearchBarProps) => {\n\tconst {\n\t\tisEnabled,\n\t\tonEnter,\n\t\tplaceholder,\n\t\twidth,\n\t\tvariant,\n\t\tvalidate,\n\t\tisActive,\n\t} = props;\n\tconst [icon, setIcon] = useState<string>('search');\n\tconst [mode, setMode] = useState<Mode>('default');\n\tconst [inputState, setInputState] = useState<ActiveStates>(\n\t\tisActive ? 'active' : isEnabled ? 'none' : 'disabled',\n\t);\n\tconst [value, setValue] = useState<string>(\n\t\tprops.initialValue \|\| props.searchValue \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tsetValue(props.searchValue ?? '');\n\t\tif (props.searchValue?.trim()?.length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t}, [props.searchValue]);\n\n\tuseEffect(() => {\n\t\tisActive\n\t\t\t? setInputState('active')\n\t\t\t: isEnabled\n\t\t\t? setInputState('none')\n\t\t\t: setInputState('disabled');\n\t}, [isEnabled, isActive]);\n\n\tuseEffect(() => {\n\t\tprops.reset && resetSearch();\n\t}, [props?.reset]);\n\n\tconst handleOnChange = (searchText: string, event: any) => {\n\t\tprops.onChange(searchText);\n\t\tsetValue(searchText);\n\n\t\tif (\n\t\t\tevent?.type === 'keydown' &&\n\t\t\t(event.which === 13 \|\| event.keyCode === 13)\n\t\t) {\n\t\t\thandleEnter(searchText);\n\t\t\treturn;\n\t\t}\n\n\t\tif (searchText.trim().length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t};\n\n\tconst handleEnter = (searchText: string) => {\n\t\tisEnabled && onEnter(searchText);\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetIcon('search');\n\t\tsetMode('default');\n\t\tsetValue('');\n\t\tprops.onChange('');\n\t\tsetInputState('none');\n\t\tonEnter('');\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tdata-test={props['data-test']}\n\t\t\tid=\"search-bar\"\n\t\t\tvalidate={validate}\n\t\t\tonFocus={() => {\n\t\t\t\tif (value.length) setIcon('cross');\n\t\t\t\tif (mode === 'default') {\n\t\t\t\t\tif (isEnabled) {\n\t\t\t\t\t\tsetMode('clicked');\n\t\t\t\t\t\tsetInputState('active');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\twidth={width}\n\t\t\tstate={inputState}\n\t\t\tleftIcon={\n\t\t\t\ticon === 'search' && mode === 'default'\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: SearchIcon,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trightIcon={\n\t\t\t\ticon === 'cross' && !props.suffixButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: CrossIcon,\n\t\t\t\t\t\t\tcallback: () => {\n\t\t\t\t\t\t\t\tresetSearch();\n\t\t\t\t\t\t\t\tprops.onClickCross && props.onClickCross();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonChangeText={handleOnChange}\n\t\t\tplaceholder={placeholder}\n\t\t\tvariant={variant}\n\t\t\tvalue={value}\n\t\t\tonBlur={() => {\n\t\t\t\tif (!value.length) {\n\t\t\t\t\tsetMode('default');\n\t\t\t\t}\n\t\t\t\tsetInputState('none');\n\t\t\t}}\n\t\t\tbutton={{ text: '', buttonProps: props.suffixButton }}\n\t\t/>\n\t);\n};\n"],"names":["SearchBar","props","isEnabled","onEnter","placeholder","width","variant","validate","isActive","icon","setIcon","useState","mode","setMode","inputState","setInputState","value","setValue","useEffect","resetSearch","handleOnChange","searchText","event","handleEnter","jsx","Input","SearchIcon","CrossIcon"],"mappings":";;;;;AA2BO,MAAMA,IAAY,CAACC,MAA0B;AACnD,QAAM;AAAA,IACL,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACGP,GACE,CAACQ,GAAMC,CAAO,IAAIC,EAAiB,QAAQ,GAC3C,CAACC,GAAMC,CAAO,IAAIF,EAAe,SAAS,GAC1C,CAACG,GAAYC,CAAa,IAAIJ;AAAA,IACnCH,IAAW,WAAWN,IAAY,SAAS;AAAA,EAAA,GAEtC,CAACc,GAAOC,CAAQ,IAAIN;AAAA,IACzBV,EAAM,gBAAgBA,EAAM,eAAe;AAAA,EAAA;AAG5C,EAAAiB,EAAU,MAAM;AACf,IAAAD,EAAShB,EAAM,eAAe,EAAE,GAC5BA,EAAM,aAAa,KAAA,GAAQ,SAC9BS,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAAG,CAACT,EAAM,WAAW,CAAC,GAEtBiB,EAAU,MAAM;AACf,IACGH,EADHP,IACiB,WACdN,IACc,SACA,UAHQ;AAAA,EAI1B,GAAG,CAACA,GAAWM,CAAQ,CAAC,GAExBU,EAAU,MAAM;AACf,IAAAjB,EAAM,SAASkB,EAAA;AAAA,EAChB,GAAG,CAAClB,GAAO,KAAK,CAAC;AAEjB,QAAMmB,IAAiB,CAACC,GAAoBC,MAAe;AAI1D,QAHArB,EAAM,SAASoB,CAAU,GACzBJ,EAASI,CAAU,GAGlBC,GAAO,SAAS,cACfA,EAAM,UAAU,MAAMA,EAAM,YAAY,KACxC;AACD,MAAAC,EAAYF,CAAU;AACtB;AAAA,IACD;AAEA,IAAIA,EAAW,KAAA,EAAO,SACrBX,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAEMa,IAAc,CAACF,MAAuB;AAC3C,IAAAnB,KAAaC,EAAQkB,CAAU;AAAA,EAChC,GAEMF,IAAc,MAAM;AACzB,IAAAT,EAAQ,QAAQ,GAChBG,EAAQ,SAAS,GACjBI,EAAS,EAAE,GACXhB,EAAM,SAAS,EAAE,GACjBc,EAAc,MAAM,GACpBZ,EAAQ,EAAE;AAAA,EACX;AAEA,SACC,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,aAAWxB,EAAM,WAAW;AAAA,MAC5B,IAAG;AAAA,MACH,UAAAM;AAAA,MACA,SAAS,MAAM;AACd,QAAIS,EAAM,UAAQN,EAAQ,OAAO,GAC7BE,MAAS,aACRV,MACHW,EAAQ,SAAS,GACjBE,EAAc,QAAQ;AAAA,MAGzB;AAAA,MACA,OAAAV;AAAA,MACA,OAAOS;AAAA,MACP,UACCL,MAAS,YAAYG,MAAS,YAC3B;AAAA,QACA,MAAMc;AAAA,MAAA,IAEN;AAAA,MAEJ,WACCjB,MAAS,WAAW,CAACR,EAAM,eACxB;AAAA,QACA,MAAM0B;AAAAA,QACN,UAAU,MAAM;AACf,UAAAR,EAAA,GACAlB,EAAM,gBAAgBA,EAAM,aAAA;AAAA,QAC7B;AAAA,MAAA,~~IAEA~~;AAAA,MAEJ,cAAcmB;AAAA,MACd,aAAAhB;AAAA,MACA,SAAAE;AAAA,MACA,OAAAU;AAAA,MACA,QAAQ,MAAM;AACb,QAAKA,EAAM,UACVH,EAAQ,SAAS,GAElBE,EAAc,MAAM;AAAA,MACrB;AAAA,MACA,QAAQ,EAAE,MAAM,IAAI,aAAad,EAAM,aAAA;AAAA,IAAa;AAAA,EAAA;AAGvD;"}
1	+ {"version":3,"file":"searchBar.js","sources":["../../../../src/components/searchBar/searchBar.tsx"],"sourcesContent":["import { SearchIcon } from '@src/assets/icons/searchIcon';\nimport { useEffect, useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { ButtonProps } from '../button/model';\nimport { Input } from '../input/Input';\nimport { InputVariant } from '../input/Input.model';\n\nexport interface SearchBarProps {\n\twidth: string;\n\tisEnabled: boolean;\n\tonChange: (searchText: string) => void;\n\tonEnter: (searchText: string) => void;\n\tplaceholder: string;\n\tvariant: InputVariant;\n\tvalidate?: (input?: string \| number) => [boolean, string];\n\tinitialValue?: string;\n\treset?: boolean;\n\tonClickCross?: () => void;\n\tisActive?: boolean;\n\tsuffixButton?: ButtonProps;\n\tsearchValue?: string;\n\t'data-test'?: string;\n}\n\ntype ActiveStates = 'none' \| 'disabled' \| 'active';\ntype Mode = 'default' \| 'clicked';\n\nexport const SearchBar = (props: SearchBarProps) => {\n\tconst {\n\t\tisEnabled,\n\t\tonEnter,\n\t\tplaceholder,\n\t\twidth,\n\t\tvariant,\n\t\tvalidate,\n\t\tisActive,\n\t} = props;\n\tconst [icon, setIcon] = useState<string>('search');\n\tconst [mode, setMode] = useState<Mode>('default');\n\tconst [inputState, setInputState] = useState<ActiveStates>(\n\t\tisActive ? 'active' : isEnabled ? 'none' : 'disabled',\n\t);\n\tconst [value, setValue] = useState<string>(\n\t\tprops.initialValue \|\| props.searchValue \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tsetValue(props.searchValue ?? '');\n\t\tif (props.searchValue?.trim()?.length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t}, [props.searchValue]);\n\n\tuseEffect(() => {\n\t\tisActive\n\t\t\t? setInputState('active')\n\t\t\t: isEnabled\n\t\t\t? setInputState('none')\n\t\t\t: setInputState('disabled');\n\t}, [isEnabled, isActive]);\n\n\tuseEffect(() => {\n\t\tprops.reset && resetSearch();\n\t}, [props?.reset]);\n\n\tconst handleOnChange = (searchText: string, event: any) => {\n\t\tprops.onChange(searchText);\n\t\tsetValue(searchText);\n\n\t\tif (\n\t\t\tevent?.type === 'keydown' &&\n\t\t\t(event.which === 13 \|\| event.keyCode === 13)\n\t\t) {\n\t\t\thandleEnter(searchText);\n\t\t\treturn;\n\t\t}\n\n\t\tif (searchText.trim().length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t};\n\n\tconst handleEnter = (searchText: string) => {\n\t\tisEnabled && onEnter(searchText);\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetIcon('search');\n\t\tsetMode('default');\n\t\tsetValue('');\n\t\tprops.onChange('');\n\t\tsetInputState('none');\n\t\tonEnter('');\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tdata-test={props['data-test']}\n\t\t\tid=\"search-bar\"\n\t\t\tvalidate={validate}\n\t\t\tonFocus={() => {\n\t\t\t\tif (value.length) setIcon('cross');\n\t\t\t\tif (mode === 'default') {\n\t\t\t\t\tif (isEnabled) {\n\t\t\t\t\t\tsetMode('clicked');\n\t\t\t\t\t\tsetInputState('active');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\twidth={width}\n\t\t\tstate={inputState}\n\t\t\tleftIcon={\n\t\t\t\ticon === 'search' && mode === 'default'\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: SearchIcon,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trightIcon={\n\t\t\t\ticon === 'cross' && !props.suffixButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: CrossIcon,\n\t\t\t\t\t\t\tcallback: () => {\n\t\t\t\t\t\t\t\tresetSearch();\n\t\t\t\t\t\t\t\tprops.onClickCross && props.onClickCross();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t'data-test': 'search-clear-icon',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonChangeText={handleOnChange}\n\t\t\tplaceholder={placeholder}\n\t\t\tvariant={variant}\n\t\t\tvalue={value}\n\t\t\tonBlur={() => {\n\t\t\t\tif (!value.length) {\n\t\t\t\t\tsetMode('default');\n\t\t\t\t}\n\t\t\t\tsetInputState('none');\n\t\t\t}}\n\t\t\tbutton={{ text: '', buttonProps: props.suffixButton }}\n\t\t/>\n\t);\n};\n"],"names":["SearchBar","props","isEnabled","onEnter","placeholder","width","variant","validate","isActive","icon","setIcon","useState","mode","setMode","inputState","setInputState","value","setValue","useEffect","resetSearch","handleOnChange","searchText","event","handleEnter","jsx","Input","SearchIcon","CrossIcon"],"mappings":";;;;;AA2BO,MAAMA,IAAY,CAACC,MAA0B;AACnD,QAAM;AAAA,IACL,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,IACGP,GACE,CAACQ,GAAMC,CAAO,IAAIC,EAAiB,QAAQ,GAC3C,CAACC,GAAMC,CAAO,IAAIF,EAAe,SAAS,GAC1C,CAACG,GAAYC,CAAa,IAAIJ;AAAA,IACnCH,IAAW,WAAWN,IAAY,SAAS;AAAA,EAAA,GAEtC,CAACc,GAAOC,CAAQ,IAAIN;AAAA,IACzBV,EAAM,gBAAgBA,EAAM,eAAe;AAAA,EAAA;AAG5C,EAAAiB,EAAU,MAAM;AACf,IAAAD,EAAShB,EAAM,eAAe,EAAE,GAC5BA,EAAM,aAAa,KAAA,GAAQ,SAC9BS,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAAG,CAACT,EAAM,WAAW,CAAC,GAEtBiB,EAAU,MAAM;AACf,IACGH,EADHP,IACiB,WACdN,IACc,SACA,UAHQ;AAAA,EAI1B,GAAG,CAACA,GAAWM,CAAQ,CAAC,GAExBU,EAAU,MAAM;AACf,IAAAjB,EAAM,SAASkB,EAAA;AAAA,EAChB,GAAG,CAAClB,GAAO,KAAK,CAAC;AAEjB,QAAMmB,IAAiB,CAACC,GAAoBC,MAAe;AAI1D,QAHArB,EAAM,SAASoB,CAAU,GACzBJ,EAASI,CAAU,GAGlBC,GAAO,SAAS,cACfA,EAAM,UAAU,MAAMA,EAAM,YAAY,KACxC;AACD,MAAAC,EAAYF,CAAU;AACtB;AAAA,IACD;AAEA,IAAIA,EAAW,KAAA,EAAO,SACrBX,EAAQ,OAAO,IAEfA,EAAQ,QAAQ;AAAA,EAElB,GAEMa,IAAc,CAACF,MAAuB;AAC3C,IAAAnB,KAAaC,EAAQkB,CAAU;AAAA,EAChC,GAEMF,IAAc,MAAM;AACzB,IAAAT,EAAQ,QAAQ,GAChBG,EAAQ,SAAS,GACjBI,EAAS,EAAE,GACXhB,EAAM,SAAS,EAAE,GACjBc,EAAc,MAAM,GACpBZ,EAAQ,EAAE;AAAA,EACX;AAEA,SACC,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,aAAWxB,EAAM,WAAW;AAAA,MAC5B,IAAG;AAAA,MACH,UAAAM;AAAA,MACA,SAAS,MAAM;AACd,QAAIS,EAAM,UAAQN,EAAQ,OAAO,GAC7BE,MAAS,aACRV,MACHW,EAAQ,SAAS,GACjBE,EAAc,QAAQ;AAAA,MAGzB;AAAA,MACA,OAAAV;AAAA,MACA,OAAOS;AAAA,MACP,UACCL,MAAS,YAAYG,MAAS,YAC3B;AAAA,QACA,MAAMc;AAAA,MAAA,IAEN;AAAA,MAEJ,WACCjB,MAAS,WAAW,CAACR,EAAM,eACxB;AAAA,QACA,MAAM0B;AAAAA,QACN,UAAU,MAAM;AACf,UAAAR,EAAA,GACAlB,EAAM,gBAAgBA,EAAM,aAAA;AAAA,QAC7B;AAAA,QACA,aAAa;AAAA,MAAA,IAEb;AAAA,MAEJ,cAAcmB;AAAA,MACd,aAAAhB;AAAA,MACA,SAAAE;AAAA,MACA,OAAAU;AAAA,MACA,QAAQ,MAAM;AACb,QAAKA,EAAM,UACVH,EAAQ,SAAS,GAElBE,EAAc,MAAM;AAAA,MACrB;AAAA,MACA,QAAQ,EAAE,MAAM,IAAI,aAAad,EAAM,aAAA;AAAA,IAAa;AAAA,EAAA;AAGvD;"}

package/dist/esm/components/side-modal/SideModal.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { useEffect as a } from "react";
 import m from "react-dom";
 import u from "../../assets/icons/cross.svg.js";
 import { TitleMedium as h } from "../TypographyStyle.js";
-import { SideModalStyle as f, SideModalContainer as y, SideModalHeader as S, SideModalBody as C, SideModalFooter as s, FooterButtonWrapper as B } from "./SideModal.style.js";
+import { SideModalStyle as f, SideModalContainer as y, SideModalHeader as s, SideModalBody as S, SideModalFooter as C, FooterButtonWrapper as B } from "./SideModal.style.js";
 import { Button as i } from "../button/Button.js";
 const D = (e) => {
   const { closeOnEscapeKey: n, onClose: d } = e;
@@ -18,20 +18,28 @@ const D = (e) => {
   }, [n, d]), m.createPortal(
     /* @__PURE__ */ t(f, { zIndex: e.zIndex, children: /* @__PURE__ */ o(y, { width: e.width, children: [
       /* @__PURE__ */ o(
-        S,
+        s,
         {
           headerStyle: {
             ...e.headerStyle
           },
           children: [
             e?.headerCustomComponent || /* @__PURE__ */ t(h, { children: e.header }),
-            !e.hideCrossButton && /* @__PURE__ */ t(u, { width: 24, height: 24, onClick: e.onClose }),
+            !e.hideCrossButton && /* @__PURE__ */ t(
+              u,
+              {
+                width: 24,
+                height: 24,
+                onClick: e.onClose,
+                "data-test": "side-modal-close-button"
+              }
+            ),
             " "
           ]
         }
       ),
       /* @__PURE__ */ o(
-        C,
+        S,
         {
           hideFooter: e.hideFooter,
           bodyStyle: {
@@ -44,7 +52,7 @@ const D = (e) => {
         }
       ),
       e.hideFooter === !0 ? null : /* @__PURE__ */ o(
-        s,
+        C,
         {
           footerDirection: e.footerDirection,
           footerStyle: {

package/dist/esm/components/side-modal/SideModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' \| 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element \| DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent \|\| (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon ~~width~~={24} ~~height~~={24} ~~onClick~~={props.onClose} />\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps \|\| props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":";;;;;;;AAmCO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,EAAE,kBAAAC,GAAkB,SAAAC,EAAA,IAAYF;AAGtC,SAAAG,EAAU,MAAM;AAIf,QAAI,EADkBF,KAAoB,IACtB;AAEpB,UAAMG,IAAkB,CAACC,MAAyB;AACjD,MAAIA,EAAM,QAAQ,YAElBH,EAAA;AAAA,IACD;AAEA,oBAAS,iBAAiB,WAAWE,CAAe,GAE7C,MAAM;AACZ,eAAS,oBAAoB,WAAWA,CAAe;AAAA,IACxD;AAAA,EACD,GAAG,CAACH,GAAkBC,CAAO,CAAC,GAEvBI,EAAS;AAAA,IACf,gBAAAC,EAACC,KAAe,QAAQR,EAAM,QAC7B,UAAA,gBAAAS,EAACC,GAAA,EAAmB,OAAOV,EAAM,OAChC,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,aAAa;AAAA,YACZ,GAAGX,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,GAAO,yBACP,gBAAAO,EAACK,GAAA,EAAa,UAAAZ,EAAM,QAAO;AAAA,YAE3B,CAACA,EAAM,mBACP,gBAAAO,~~EAACM~~,~~GAAA~~,~~EAAU~~,OAAO,~~IAAI~~,QAAQ,~~IAAI~~,SAASb,EAAM,~~QAAA~~,~~CAAS~~;AAAA,~~YACxD~~;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAS;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,YAAYd,EAAM;AAAA,UAClB,WAAW;AAAA,YACV,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,EAAM;AAAA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjBA,EAAM,eAAe,KAAO,OAC5B,gBAAAS;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,iBAAiBf,EAAM;AAAA,UACvB,aAAa;AAAA,YACZ,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGR,UAAA;AAAA,aAAAA,EAAM,mBAAmBA,EAAM,wCAC/BgB,GAAA,EAAoB,iBAAiBhB,EAAM,iBAC1C,UAAA;AAAA,cAAAA,EAAM,mBAAmB,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,iBAAiB;AAAA,cAC5DA,EAAM,qBACN,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,mBAAmB;AAAA,cACnC;AAAA,YAAA,GACJ;AAAA,YAEAA,EAAM,wBAAwBA,EAAM,wBAAwB,gBAAAO,EAAAW,GAAA,EAAE;AAAA,YAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnE;AAAA,IAAA,EAAA,CACJ,EAAA,CACD;AAAA,IACAlB,EAAM,WAAW,SAAS;AAAA,EAAA;AAE5B;"}
1	+ {"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' \| 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element \| DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent \|\| (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tonClick={props.onClose}\n\t\t\t\t\t\t\tdata-test=\"side-modal-close-button\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps \|\| props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":";;;;;;;AAmCO,MAAMA,IAAsC,CAACC,MAAU;AAC7D,QAAM,EAAE,kBAAAC,GAAkB,SAAAC,EAAA,IAAYF;AAGtC,SAAAG,EAAU,MAAM;AAIf,QAAI,EADkBF,KAAoB,IACtB;AAEpB,UAAMG,IAAkB,CAACC,MAAyB;AACjD,MAAIA,EAAM,QAAQ,YAElBH,EAAA;AAAA,IACD;AAEA,oBAAS,iBAAiB,WAAWE,CAAe,GAE7C,MAAM;AACZ,eAAS,oBAAoB,WAAWA,CAAe;AAAA,IACxD;AAAA,EACD,GAAG,CAACH,GAAkBC,CAAO,CAAC,GAEvBI,EAAS;AAAA,IACf,gBAAAC,EAACC,KAAe,QAAQR,EAAM,QAC7B,UAAA,gBAAAS,EAACC,GAAA,EAAmB,OAAOV,EAAM,OAChC,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,aAAa;AAAA,YACZ,GAAGX,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,GAAO,yBACP,gBAAAO,EAACK,GAAA,EAAa,UAAAZ,EAAM,QAAO;AAAA,YAE3B,CAACA,EAAM,mBACP,gBAAAO;AAAA,cAACM;AAAAA,cAAA;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,SAASb,EAAM;AAAA,gBACf,aAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAET;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEJ,gBAAAS;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,YAAYd,EAAM;AAAA,UAClB,WAAW;AAAA,YACV,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGT,UAAA;AAAA,YAAAA,EAAM;AAAA,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjBA,EAAM,eAAe,KAAO,OAC5B,gBAAAS;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,iBAAiBf,EAAM;AAAA,UACvB,aAAa;AAAA,YACZ,GAAGA,EAAM;AAAA,UAAA;AAAA,UAGR,UAAA;AAAA,aAAAA,EAAM,mBAAmBA,EAAM,wCAC/BgB,GAAA,EAAoB,iBAAiBhB,EAAM,iBAC1C,UAAA;AAAA,cAAAA,EAAM,mBAAmB,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,iBAAiB;AAAA,cAC5DA,EAAM,qBACN,gBAAAO,EAACU,GAAA,EAAQ,GAAGjB,EAAM,mBAAmB;AAAA,cACnC;AAAA,YAAA,GACJ;AAAA,YAEAA,EAAM,wBAAwBA,EAAM,wBAAwB,gBAAAO,EAAAW,GAAA,EAAE;AAAA,YAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnE;AAAA,IAAA,EAAA,CACJ,EAAA,CACD;AAAA,IACAlB,EAAM,WAAW,SAAS;AAAA,EAAA;AAE5B;"}

package/dist/esm/components/star-rating/Star.d.ts CHANGED Viewed

@@ -10,4 +10,5 @@ export declare const Star: React.FC<{
     asHovered?: boolean;
     mode?: 'VIEW' | 'EDIT';
     version?: 'v1' | 'v2';
+    'data-testid'?: string;
 }>;

package/dist/esm/components/star-rating/Star.js CHANGED Viewed

@@ -1,30 +1,32 @@
-import { jsx as n } from "react/jsx-runtime";
-import p, { useState as v, useEffect as f } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import d, { useState as v, useEffect as E } from "react";
 import { COLORS as u } from "../../constants/Theme.js";
 import S from "../../assets/icons/starEmpty.svg.js";
 import M from "../../assets/icons/starFilled.svg.js";
 import V from "../../assets/icons/starFilledV2.svg.js";
-const I = (t) => t === "v1" ? M : V, L = ({
+const W = (t) => t === "v1" ? M : V, k = ({
   size: t,
-  filled: E,
-  emptyColor: g,
-  filledColor: a,
+  filled: g,
+  emptyColor: h,
+  filledColor: s,
   onClick: o,
-  asHovered: s,
-  onHover: h,
+  asHovered: i,
+  onHover: p,
   mode: e,
-  version: l = "v1"
+  version: f = "v1",
+  "data-testid": n
 }) => {
   const [c, r] = v(!1);
-  f(() => {
-    h?.(c);
-  }, [c]), f(() => {
-    s || r(!1);
-  }, [s]);
-  const i = p.useMemo(() => I(l), [l]);
-  return s ? /* @__PURE__ */ n(
-    i,
+  E(() => {
+    p?.(c);
+  }, [c]), E(() => {
+    i || r(!1);
+  }, [i]);
+  const l = d.useMemo(() => W(f), [f]);
+  return i ? /* @__PURE__ */ a(
+    l,
     {
+      "data-testid": n,
       onClick: () => {
         o?.("select");
       },
@@ -33,11 +35,12 @@ const I = (t) => t === "v1" ? M : V, L = ({
       style: { cursor: "pointer" },
       width: t,
       height: t,
-      color: a ?? u.background.warning.vibrant
+      color: s ?? u.background.warning.vibrant
     }
-  ) : c ? /* @__PURE__ */ n(
-    i,
+  ) : c ? /* @__PURE__ */ a(
+    l,
     {
+      "data-testid": n,
       onMouseLeave: () => r(!1),
       onMouseEnter: () => r(!0),
       style: { cursor: "pointer" },
@@ -46,11 +49,12 @@ const I = (t) => t === "v1" ? M : V, L = ({
       },
       width: t,
       height: t,
-      color: a ?? u.background.warning.vibrant
+      color: s ?? u.background.warning.vibrant
     }
-  ) : E ? /* @__PURE__ */ n(
-    i,
+  ) : g ? /* @__PURE__ */ a(
+    l,
     {
+      "data-testid": n,
       onMouseEnter: () => e !== "VIEW" && r(!0),
       onMouseLeave: () => e !== "VIEW" && r(!1),
       style: { cursor: e !== "VIEW" ? "pointer" : "default" },
@@ -59,11 +63,12 @@ const I = (t) => t === "v1" ? M : V, L = ({
       },
       width: t,
       height: t,
-      color: a ?? u.background.warning.vibrant
+      color: s ?? u.background.warning.vibrant
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ a(
     S,
     {
+      "data-testid": n,
       onMouseEnter: () => e !== "VIEW" && r(!0),
       onMouseLeave: () => e !== "VIEW" && r(!1),
       style: { cursor: e !== "VIEW" ? "pointer" : "default" },
@@ -72,11 +77,11 @@ const I = (t) => t === "v1" ? M : V, L = ({
       },
       width: t,
       height: t,
-      color: g ?? u.surface.standard
+      color: h ?? u.surface.standard
     }
   );
 };
 export {
-  L as Star
+  k as Star
 };
 //# sourceMappingURL=Star.js.map

package/dist/esm/components/star-rating/Star.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' \| 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' \| 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":";;;;;;AAMA,MAAMA,IAAU,CAACC,MACZA,MAAY,OACRC,IAEDC,GAGKC,~~IAWR~~,CAAC;AAAA,EACL,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAX,IAAU;~~AACX~~,MAAM;AACL,QAAM,~~CAACY~~,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,EAAAC,EAAU,MAAM;AACf,~~IAAAL~~,~~IAAUE~~,CAAO;AAAA,EAClB,GAAG,CAACA,CAAO,CAAC,GAEZG,EAAU,MAAM;AACf,~~IAAKN~~,~~KACJI~~,EAAW,EAAK;AAAA,EAElB,GAAG,~~CAACJ~~,CAAS,CAAC;AAEd,~~QAAMO~~,IAAaC,EAAM,QAAQ,~~MAAMlB~~,EAAQC,CAAO,GAAG,CAACA,CAAO,CAAC;AAElE,SAAIS,IAEF,~~gBAAAS~~;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,SAAS,MAAM;AACd,~~QAAAR~~,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,cAAc,~~MAAMK~~,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,~~OAAOT~~;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,~~KAAeY~~,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/CP,IAEF,gBAAAM;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,cAAc,~~MAAMH~~,EAAW,EAAK;AAAA,MACpC,cAAc,MAAMA,EAAW,EAAI;AAAA,MACnC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,SAAS,MAAM;AACd,~~QAAAL~~,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,~~KAAeY~~,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/Cd,IAEF,~~gBAAAa~~;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,cAAc,~~MAAML~~,MAAS,~~UAAUE~~,EAAW,EAAI;AAAA,MACtD,cAAc,~~MAAMF~~,MAAS,~~UAAUE~~,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,~~QAAQF~~,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,WAAW;AAAA,MACzC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,~~KAAeY~~,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAMlD,gBAAAD;AAAA,IAACE;AAAAA,IAAA;AAAA,MACA,cAAc,~~MAAMT~~,MAAS,~~UAAUE~~,EAAW,EAAI;AAAA,MACtD,cAAc,~~MAAMF~~,MAAS,~~UAAUE~~,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,~~QAAQF~~,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,QAAQ;AAAA,MACtC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOE,~~KAAca~~,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGvC;"}
1	+ {"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' \| 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' \| 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n\t'data-testid'?: string;\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n\t'data-testid': dataTestId,\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tdata-testid={dataTestId}\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","dataTestId","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":";;;;;;AAMA,MAAMA,IAAU,CAACC,MACZA,MAAY,OACRC,IAEDC,GAGKC,IAYR,CAAC;AAAA,EACL,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAX,IAAU;AAAA,EACV,eAAeY;AAChB,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK;AAE5C,EAAAC,EAAU,MAAM;AACf,IAAAN,IAAUG,CAAO;AAAA,EAClB,GAAG,CAACA,CAAO,CAAC,GAEZG,EAAU,MAAM;AACf,IAAKP,KACJK,EAAW,EAAK;AAAA,EAElB,GAAG,CAACL,CAAS,CAAC;AAEd,QAAMQ,IAAaC,EAAM,QAAQ,MAAMnB,EAAQC,CAAO,GAAG,CAACA,CAAO,CAAC;AAElE,SAAIS,IAEF,gBAAAU;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,eAAaL;AAAA,MACb,SAAS,MAAM;AACd,QAAAJ,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,OAAOV;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAea,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/CP,IAEF,gBAAAM;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,eAAaL;AAAA,MACb,cAAc,MAAME,EAAW,EAAK;AAAA,MACpC,cAAc,MAAMA,EAAW,EAAI;AAAA,MACnC,OAAO,EAAE,QAAQ,UAAA;AAAA,MACjB,SAAS,MAAM;AACd,QAAAN,IAAU,QAAQ;AAAA,MACnB;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAea,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAK/Cf,IAEF,gBAAAc;AAAA,IAACF;AAAA,IAAA;AAAA,MACA,eAAaL;AAAA,MACb,cAAc,MAAMD,MAAS,UAAUG,EAAW,EAAI;AAAA,MACtD,cAAc,MAAMH,MAAS,UAAUG,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,QAAQH,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,WAAW;AAAA,MACzC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOG,KAAea,EAAO,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA,IAMlD,gBAAAD;AAAA,IAACE;AAAAA,IAAA;AAAA,MACA,eAAaT;AAAA,MACb,cAAc,MAAMD,MAAS,UAAUG,EAAW,EAAI;AAAA,MACtD,cAAc,MAAMH,MAAS,UAAUG,EAAW,EAAK;AAAA,MACvD,OAAO,EAAE,QAAQH,MAAS,SAAS,YAAY,UAAA;AAAA,MAC/C,SAAS,MAAM;AACd,QAAAA,MAAS,UAAUH,IAAU,QAAQ;AAAA,MACtC;AAAA,MACA,OAAOJ;AAAA,MACP,QAAQA;AAAA,MACR,OAAOE,KAAcc,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGvC;"}

package/dist/esm/components/star-rating/StarRating.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { useState as n, useMemo as j, useEffect as f } from "react";
 import C from "styled-components";
 import { Star as M } from "./Star.js";
@@ -13,34 +13,35 @@ const k = C.div`
   filledColor: m,
   onChange: p,
   value: u,
-  maxValue: l,
-  starSize: v,
-  mode: d,
+  maxValue: a,
+  starSize: d,
+  mode: v,
   version: S = "v1"
 }) => {
-  const [t, o] = n(u ?? 0), [g, y] = n(!1), [s, i] = n(0), H = j(() => Array(l ?? 5).fill(null).map((r, h) => h + 1), [l]);
+  const [e, s] = n(u ?? 0), [g, y] = n(!1), [o, l] = n(0), H = j(() => Array(a ?? 5).fill(null).map((r, h) => h + 1), [a]);
   return f(() => {
-    g && p(t);
-  }, [t]), f(() => {
+    g && p(e);
+  }, [e]), f(() => {
     y(!0);
-  }, []), /* @__PURE__ */ a(k, { children: H.map((e) => /* @__PURE__ */ a(
+  }, []), /* @__PURE__ */ i(k, { children: H.map((t) => /* @__PURE__ */ i(
     M,
     {
-      asHovered: s ? e <= s : !1,
-      size: v ?? 24,
-      filled: s ? void 0 : e <= t,
+      asHovered: o ? t <= o : !1,
+      size: d ?? 24,
+      filled: o ? void 0 : t <= e,
       emptyColor: c,
       filledColor: m,
       onClick: (r) => {
-        r === "de-select" ? e < t ? o(e) : o(e - 1) : o(e);
+        r === "de-select" ? t < e ? s(t) : s(t - 1) : s(t);
       },
       onHover: (r) => {
-        i(r ? e : 0);
+        l(r ? t : 0);
       },
-      mode: d,
-      version: S
+      mode: v,
+      version: S,
+      "data-testid": `star-${t}`
     },
-    e
+    t
   )) });
 };
 export {

package/dist/esm/components/star-rating/StarRating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StarRating.js","sources":["../../../../src/components/star-rating/StarRating.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { Star } from './Star';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: start;\n\talign-items: center;\n`;\n\nexport const StarRating: React.FC<{\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonChange: (stars: number) => void;\n\tvalue?: number;\n\tmaxValue?: number;\n\tstarSize?: number;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\temptyColor,\n\tfilledColor,\n\tonChange,\n\tvalue,\n\tmaxValue,\n\tstarSize,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [stars, setStars] = useState(value ?? 0);\n\tconst [mounted, setMountedFlag] = useState(false);\n\tconst [hoveredStar, setHoveredStar] = useState(0);\n\n\tconst arr = useMemo(() => {\n\t\tconst limit = maxValue ?? 5;\n\t\treturn Array(limit)\n\t\t\t.fill(null)\n\t\t\t.map((_, idx) => idx + 1);\n\t}, [maxValue]);\n\n\tuseEffect(() => {\n\t\tif (mounted) {\n\t\t\tonChange(stars);\n\t\t}\n\t}, [stars]);\n\n\tuseEffect(() => {\n\t\tsetMountedFlag(true);\n\t}, []);\n\n\treturn (\n\t\t<Container>\n\t\t\t{arr.map((idx) => (\n\t\t\t\t<Star\n\t\t\t\t\tasHovered={hoveredStar ? idx <= hoveredStar : false}\n\t\t\t\t\tkey={idx}\n\t\t\t\t\tsize={starSize ?? 24}\n\t\t\t\t\tfilled={hoveredStar ? undefined : idx <= stars}\n\t\t\t\t\temptyColor={emptyColor}\n\t\t\t\t\tfilledColor={filledColor}\n\t\t\t\t\tonClick={(action) => {\n\t\t\t\t\t\tif (action === 'de-select') {\n\t\t\t\t\t\t\tif (idx < stars) {\n\t\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStars(idx - 1);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonHover={(hovered) => {\n\t\t\t\t\t\tif (hovered) setHoveredStar(idx);\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tsetHoveredStar(0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","StarRating","emptyColor","filledColor","onChange","value","maxValue","starSize","mode","version","stars","setStars","useState","mounted","setMountedFlag","hoveredStar","setHoveredStar","arr","useMemo","_","idx","useEffect","jsx","Star","action","hovered"],"mappings":";;;;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQZC,IASR,CAAC;AAAA,EACL,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AACX,MAAM;AACL,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASP,KAAS,CAAC,GACvC,CAACQ,GAASC,CAAc,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,IAAMC,EAAQ,MAEZ,MADOZ,KAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,GAAGC,MAAQA,IAAM,CAAC,GACvB,CAACd,CAAQ,CAAC;AAEb,SAAAe,EAAU,MAAM;AACf,IAAIR,KACHT,EAASM,CAAK;AAAA,EAEhB,GAAG,CAACA,CAAK,CAAC,GAEVW,EAAU,MAAM;AACf,IAAAP,EAAe,EAAI;AAAA,EACpB,GAAG,CAAA,CAAE,GAGJ,gBAAAQ,EAACvB,GAAA,EACC,UAAAkB,EAAI,IAAI,CAACG,MACT,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWR,IAAcK,KAAOL,IAAc;AAAA,MAE9C,MAAMR,KAAY;AAAA,MAClB,QAAQQ,IAAc,SAAYK,KAAOV;AAAA,MACzC,YAAAR;AAAA,MACA,aAAAC;AAAA,MACA,SAAS,CAACqB,MAAW;AACpB,QAAIA,MAAW,cACVJ,IAAMV,IACTC,EAASS,CAAG,IAEZT,EAASS,IAAM,CAAC,IAGjBT,EAASS,CAAG;AAAA,MAEd;AAAA,MACA,SAAS,CAACK,MAAY;AACrB,UAAIA,IAAwBL,IAEZ,CAFe;AAAA,MAIhC;AAAA,MACA,MAAAZ;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,~~IAvBKW~~;AAAA,EAAA,~~CAyBN~~,GACF;AAEF;"}
1	+ {"version":3,"file":"StarRating.js","sources":["../../../../src/components/star-rating/StarRating.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { Star } from './Star';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: start;\n\talign-items: center;\n`;\n\nexport const StarRating: React.FC<{\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonChange: (stars: number) => void;\n\tvalue?: number;\n\tmaxValue?: number;\n\tstarSize?: number;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\temptyColor,\n\tfilledColor,\n\tonChange,\n\tvalue,\n\tmaxValue,\n\tstarSize,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [stars, setStars] = useState(value ?? 0);\n\tconst [mounted, setMountedFlag] = useState(false);\n\tconst [hoveredStar, setHoveredStar] = useState(0);\n\n\tconst arr = useMemo(() => {\n\t\tconst limit = maxValue ?? 5;\n\t\treturn Array(limit)\n\t\t\t.fill(null)\n\t\t\t.map((_, idx) => idx + 1);\n\t}, [maxValue]);\n\n\tuseEffect(() => {\n\t\tif (mounted) {\n\t\t\tonChange(stars);\n\t\t}\n\t}, [stars]);\n\n\tuseEffect(() => {\n\t\tsetMountedFlag(true);\n\t}, []);\n\n\treturn (\n\t\t<Container>\n\t\t\t{arr.map((idx) => (\n\t\t\t\t<Star\n\t\t\t\t\tasHovered={hoveredStar ? idx <= hoveredStar : false}\n\t\t\t\t\tkey={idx}\n\t\t\t\t\tsize={starSize ?? 24}\n\t\t\t\t\tfilled={hoveredStar ? undefined : idx <= stars}\n\t\t\t\t\temptyColor={emptyColor}\n\t\t\t\t\tfilledColor={filledColor}\n\t\t\t\t\tonClick={(action) => {\n\t\t\t\t\t\tif (action === 'de-select') {\n\t\t\t\t\t\t\tif (idx < stars) {\n\t\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStars(idx - 1);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonHover={(hovered) => {\n\t\t\t\t\t\tif (hovered) setHoveredStar(idx);\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tsetHoveredStar(0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tversion={version}\n\t\t\t\t\tdata-testid={`star-${idx}`}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","StarRating","emptyColor","filledColor","onChange","value","maxValue","starSize","mode","version","stars","setStars","useState","mounted","setMountedFlag","hoveredStar","setHoveredStar","arr","useMemo","_","idx","useEffect","jsx","Star","action","hovered"],"mappings":";;;;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQZC,IASR,CAAC;AAAA,EACL,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AACX,MAAM;AACL,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASP,KAAS,CAAC,GACvC,CAACQ,GAASC,CAAc,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,IAAMC,EAAQ,MAEZ,MADOZ,KAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,GAAGC,MAAQA,IAAM,CAAC,GACvB,CAACd,CAAQ,CAAC;AAEb,SAAAe,EAAU,MAAM;AACf,IAAIR,KACHT,EAASM,CAAK;AAAA,EAEhB,GAAG,CAACA,CAAK,CAAC,GAEVW,EAAU,MAAM;AACf,IAAAP,EAAe,EAAI;AAAA,EACpB,GAAG,CAAA,CAAE,GAGJ,gBAAAQ,EAACvB,GAAA,EACC,UAAAkB,EAAI,IAAI,CAACG,MACT,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWR,IAAcK,KAAOL,IAAc;AAAA,MAE9C,MAAMR,KAAY;AAAA,MAClB,QAAQQ,IAAc,SAAYK,KAAOV;AAAA,MACzC,YAAAR;AAAA,MACA,aAAAC;AAAA,MACA,SAAS,CAACqB,MAAW;AACpB,QAAIA,MAAW,cACVJ,IAAMV,IACTC,EAASS,CAAG,IAEZT,EAASS,IAAM,CAAC,IAGjBT,EAASS,CAAG;AAAA,MAEd;AAAA,MACA,SAAS,CAACK,MAAY;AACrB,UAAIA,IAAwBL,IAEZ,CAFe;AAAA,MAIhC;AAAA,MACA,MAAAZ;AAAA,MACA,SAAAC;AAAA,MACA,eAAa,QAAQW,CAAG;AAAA,IAAA;AAAA,IAxBnBA;AAAA,EAAA,CA0BN,GACF;AAEF;"}