npm - @bikdotai/bik-component-library - Versions diffs - 0.0.817-beta.4 → 0.0.817-beta.6 - Mend

@bikdotai/bik-component-library 0.0.817-beta.4 → 0.0.817-beta.6

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

package/dist/cjs/components/floating-action-button/FloatingActionButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-dev-runtime"),w=require("react"),k=require("react-bootstrap"),y=require("../../constants/Theme.js"),v=require("../TypographyStyle.js"),p=require("../../assets/icons/question-mark.svg.js"),o=require("./FloatingActionButton.styles.js"),E=require("../tooltips/Tooltip.js"),N=d=>{const{width:i,height:l,color:a,onClick:r,icon:t,tooltipPlacement:s,tooltipText:c,tootipWidth:u,isRound:e}=d;return c?n.jsxDEV(E.Tooltip,{tooltipContent:n.jsxDEV(o.TooltipStyled,{tooltipWidth:u,children:n.jsxDEV(v.BodyCaption,{color:y.COLORS.content.primaryInverse,children:d.tooltipText},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:48,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:47,columnNumber:5},void 0),placement:s,body:"",children:n.jsxDEV(o.FloatingActionButtonContainer,{width:i,height:l,color:a,onClick:r,isRound:e,children:t||n.jsxDEV(p.default,{width:22,height:22},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:63,columnNumber:20},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:56,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:45,columnNumber:3},void 0):n.jsxDEV(n.Fragment,{children:n.jsxDEV(o.FloatingActionButtonContainer,{width:i,height:l,color:a,onClick:r,isRound:e,children:t||n.jsxDEV(p.default,{width:22,height:22},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:75,columnNumber:20},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:68,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:67,columnNumber:3},void 0)},j=d=>{const{icon:i,onClick:l,children:a,tooltipText:r,isRound:t=!0,width:s=48,height:c=48,color:u=y.COLORS.background.inverse,position:e=o.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:D=20,buttonPaddingVertical:x=20,zIndex:h=1,tooltipPlacement:m="right",dropPosition:b=o.DROP_POSITION.DOWN,menuAligment:F=o.MENU_ALIGNMENT.END,tootipWidth:f}=d,[g,A]=w.useState(!1);return n.jsxDEV(n.Fragment,{children:n.jsxDEV(o.FloatingActionButtonOuterContainer,{width:s,height:c,color:u,position:e,buttonPaddingHorizontal:D,buttonPaddingVertical:x,zIndex:h,children:n.jsxDEV(o.StyledDropdown,{onToggle:(B,T)=>{A(B)},drop:b,align:F,children:a?n.jsxDEV(n.Fragment,{children:[n.jsxDEV(o.DropdownToggleContainer,{drop:b,children:n.jsxDEV(N,{width:s,height:c,color:u,tooltipPlacement:m,onClick:l,tooltipText:r,icon:i,position:e,isRound:t,isDropdownOpen:g,tootipWidth:f},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:139,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:138,columnNumber:8},void 0),n.jsxDEV(k.Dropdown.Menu,{children:a},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:153,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:137,columnNumber:7},void 0):n.jsxDEV(N,{width:s,height:c,color:u,tooltipPlacement:m,onClick:l,tooltipText:r,icon:i,position:e,isRound:t,isDropdownOpen:g,tootipWidth:f},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:156,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:129,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:120,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:119,columnNumber:3},void 0)};exports.FloatingActionButton=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-dev-runtime"),B=require("react"),P=require("react-bootstrap"),N=require("../../constants/Theme.js"),D=require("../TypographyStyle.js"),h=require("../../assets/icons/question-mark.svg.js"),o=require("./FloatingActionButton.styles.js"),v=require("../tooltips/Tooltip.js"),g=m=>{const{width:i,height:r,color:c,onClick:l,icon:t,tooltipPlacement:a,tooltipText:s,tootipWidth:u,isRound:e}=m;return s?n.jsxDEV(v.Tooltip,{tooltipContent:n.jsxDEV(o.TooltipStyled,{tooltipWidth:u,children:n.jsxDEV(D.BodyCaption,{color:N.COLORS.content.primaryInverse,children:m.tooltipText},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:48,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:47,columnNumber:5},void 0),placement:a,body:"",children:n.jsxDEV(o.FloatingActionButtonContainer,{width:i,height:r,color:c,onClick:l,isRound:e,children:t||n.jsxDEV(h.default,{width:22,height:22},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:63,columnNumber:20},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:56,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:45,columnNumber:3},void 0):n.jsxDEV(n.Fragment,{children:n.jsxDEV(o.FloatingActionButtonContainer,{width:i,height:r,color:c,onClick:l,isRound:e,children:t||n.jsxDEV(h.default,{width:22,height:22},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:75,columnNumber:20},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:68,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:67,columnNumber:3},void 0)},E=m=>{const{icon:i,onClick:r,children:c,tooltipText:l,isRound:t=!0,width:a=48,height:s=48,color:u=N.COLORS.background.inverse,position:e=o.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:k=20,zIndex:j=1,tooltipPlacement:d="right",dropPosition:b=o.DROP_POSITION.DOWN,menuAligment:F=o.MENU_ALIGNMENT.END,tootipWidth:p}=m,[f,y]=B.useState(!1);return n.jsxDEV(n.Fragment,{children:n.jsxDEV(o.FloatingActionButtonOuterContainer,{width:a,height:s,color:u,position:e,buttonPaddingHorizontal:x,buttonPaddingVertical:k,zIndex:j,children:n.jsxDEV(o.StyledDropdown,{onToggle:(A,T)=>{y(A)},drop:b,align:F,children:c?n.jsxDEV(n.Fragment,{children:[n.jsxDEV(o.DropdownToggleContainer,{drop:b,children:n.jsxDEV(g,{width:a,height:s,color:u,tooltipPlacement:d,onClick:r,tooltipText:l,icon:i,position:e,isRound:t,isDropdownOpen:f,tootipWidth:p},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:139,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:138,columnNumber:8},void 0),n.jsxDEV(P.Dropdown.Menu,{children:c},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:153,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:137,columnNumber:7},void 0):n.jsxDEV(g,{width:a,height:s,color:u,tooltipPlacement:d,onClick:r,tooltipText:l,icon:i,position:e,isRound:t,isDropdownOpen:f,tootipWidth:p},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:156,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:129,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:120,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-action-button/FloatingActionButton.tsx",lineNumber:119,columnNumber:3},void 0)};exports.FloatingActionButton=E;
 //# sourceMappingURL=FloatingActionButton.js.map

package/dist/cjs/components/floating-action-button/FloatingActionButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingActionButton.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { COLORS } from '@src/constants/Theme';\nimport { Placement, Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport DefaultIcon from './../../assets/icons/question-mark.svg';\nimport {\n\tDROP_POSITION,\n\tDropdownToggleContainer,\n\tFAB_POSITION,\n\tFloatingActionButtonContainer,\n\tFloatingActionButtonOuterContainer,\n\tMENU_ALIGNMENT,\n\tStyledDropdown,\n\tTooltipStyled,\n} from './FloatingActionButton.styles';\n\nconst FloatingActionToggleButtonJSX: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth: number;\n\theight: number;\n\ticon?: JSX.Element;\n\tcolor: string;\n\tposition?: FAB_POSITION;\n\ttooltipText?: string;\n\ttootipWidth?: number;\n\ttooltipPlacement: Placement;\n\tisRound: boolean;\n\tisDropdownOpen: boolean;\n}> = (props) => {\n\tconst {\n\t\twidth,\n\t\theight,\n\t\tcolor,\n\t\tonClick,\n\t\ticon,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\ttootipWidth,\n\t\tisRound,\n\t} = props;\n\treturn tooltipText ? (\n\t\t<Tooltip\n\t\t\ttooltipContent={\n\t\t\t\t<TooltipStyled tooltipWidth={tootipWidth}>\n\t\t\t\t\t<BodyCaption color={COLORS.content.primaryInverse}>\n\t\t\t\t\t\t{props.tooltipText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</TooltipStyled>\n\t\t\t}\n\t\t\tplacement={tooltipPlacement}\n\t\t\tbody={''}\n\t\t>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</Tooltip>\n\t) : (\n\t\t<>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</>\n\t);\n};\nexport const FloatingActionButton: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth?: number;\n\theight?: number;\n\ticon?: JSX.Element;\n\tcolor?: string;\n\tposition?: FAB_POSITION;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipText?: string;\n\ttooltipPlacement?: Placement;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\ttootipWidth?: number;\n}> = (props) => {\n\tconst {\n\t\ticon,\n\t\tonClick,\n\t\tchildren,\n\t\ttooltipText,\n\t\tisRound = true,\n\t\twidth = 48,\n\t\theight = 48,\n\t\tcolor = COLORS.background.inverse,\n\t\tposition = FAB_POSITION.TOP_LEFT,\n\t\tbuttonPaddingHorizontal = 20,\n\t\tbuttonPaddingVertical = 20,\n\t\tzIndex = 1,\n\t\ttooltipPlacement = 'right',\n\t\tdropPosition = DROP_POSITION.DOWN,\n\t\tmenuAligment = MENU_ALIGNMENT.END,\n\t\ttootipWidth,\n\t} = props;\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<FloatingActionButtonOuterContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tposition={position}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\tzIndex={zIndex}\n\t\t\t>\n\t\t\t\t<StyledDropdown\n\t\t\t\t\tonToggle={(nextShow: boolean, meta: any) => {\n\t\t\t\t\t\tsetIsDropdownOpen(nextShow);\n\t\t\t\t\t}}\n\t\t\t\t\tdrop={dropPosition}\n\t\t\t\t\talign={menuAligment}\n\t\t\t\t>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownToggleContainer drop={dropPosition}>\n\t\t\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownToggleContainer>\n\t\t\t\t\t\t\t<Dropdown.Menu>{children}</Dropdown.Menu>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</StyledDropdown>\n\t\t\t</FloatingActionButtonOuterContainer>\n\t\t</>\n\t);\n};\n"],"names":["FloatingActionToggleButtonJSX","props","width","height","color","onClick","icon","tooltipPlacement","tooltipText","tootipWidth","isRound","jsxDEV","Tooltip","TooltipStyled","BodyCaption","COLORS","this","FloatingActionButtonContainer","DefaultIcon","Fragment","FloatingActionButton","children","position","FAB_POSITION","buttonPaddingHorizontal","buttonPaddingVertical","zIndex","dropPosition","DROP_POSITION","menuAligment","MENU_ALIGNMENT","isDropdownOpen","setIsDropdownOpen","useState","FloatingActionButtonOuterContainer","StyledDropdown","nextShow","meta","DropdownToggleContainer","Dropdown"],"mappings":"yXAkBMA,EAaAC,GAAU,CACf,KAAM,CACL,MAAAC,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,KAAAC,EACA,iBAAAC,EACA,YAAAC,EACA,YAAAC,EACA,QAAAC,CAAA,EACGT,EACJ,OAAOO,EACNG,EAAAA,OAACC,EAAAA,QAAA,CACA,eACCD,EAAAA,OAACE,EAAAA,cAAA,CAAc,aAAcJ,EAC5B,SAAAE,EAAAA,OAACG,cAAA,CAAY,MAAOC,SAAO,QAAQ,eACjC,SAAAd,EAAM,WAAA,EADR,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAe,MAEA,CAAA,EAHD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAIA,EAED,UAAWT,EACX,KAAM,GAEN,SAAAI,EAAAA,OAACM,EAAAA,8BAAA,CACA,MAAAf,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,QAAAK,EAEC,YAAcC,EAAAA,OAACO,EAAAA,SAAY,MAAO,GAAI,OAAQ,IAAhC,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,EAAA,EAAAF,MAAoC,CAAA,EAPpD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAQA,EAnBD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,EAsBAL,SAAAQ,EAAAA,SAAA,CACC,SAAAR,EAAAA,OAACM,EAAAA,8BAAA,CACA,MAAAf,EACA,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,QAAAK,EAEC,YAAcC,EAAAA,OAACO,EAAAA,SAAY,MAAO,GAAI,OAAQ,IAAhC,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,EAAA,EAAAF,MAAoC,CAAA,EAPpD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAQA,EATD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAUA,CAEF,EACaI,EAiBPnB,GAAU,CACf,KAAM,CACL,KAAAK,EACA,QAAAD,EACA,SAAAgB,EACA,YAAAb,EACA,QAAAE,EAAU,GACV,MAAAR,EAAQ,GACR,OAAAC,EAAS,GACT,MAAAC,EAAQW,EAAAA,OAAO,WAAW,QAC1B,SAAAO,EAAWC,EAAAA,aAAa,SACxB,wBAAAC,EAA0B,GAC1B,sBAAAC,EAAwB,GACxB,OAAAC,EAAS,EACT,iBAAAnB,EAAmB,QACnB,aAAAoB,EAAeC,EAAAA,cAAc,KAC7B,aAAAC,EAAeC,EAAAA,eAAe,IAC9B,YAAArB,CAAA,EACGR,EACE,CAAC8B,EAAgBC,CAAiB,EAAIC,EAAAA,SAAS,EAAK,EAE1D,OACCtB,SAAAQ,EAAAA,SAAA,CACC,SAAAR,EAAAA,OAACuB,EAAAA,mCAAA,CACA,MAAAhC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAkB,EACA,wBAAAE,EACA,sBAAAC,EACA,OAAAC,EAEA,SAAAf,EAAAA,OAACwB,EAAAA,eAAA,CACA,SAAU,CAACC,EAAmBC,IAAc,CAC3CL,EAAkBI,CAAQ,CAC3B,EACA,KAAMT,EACN,MAAOE,EAEN,WACAlB,EAAAA,OAAAQ,EAAAA,SAAA,CACC,SAAA,CAAAR,EAAAA,OAAC2B,EAAAA,wBAAA,CAAwB,KAAMX,EAC9B,SAAAhB,EAAAA,OAACX,EAAA,CACA,MAAAE,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAG,EACA,QAAAF,EACA,YAAAG,EACA,KAAAF,EACA,SAAAgB,EACA,QAAAZ,EACA,eAAAqB,EACA,YAAAtB,CAAA,EAXD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAO,MAAA,CAYA,EAbD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAcA,EACAL,EAAAA,OAAC4B,EAAAA,SAAS,KAAT,CAAe,SAAAlB,CAAA,EAAhB,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAL,MAAyB,CAAA,CAAA,EAhB1B,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAiBA,EAEAL,EAAAA,OAACX,EAAA,CACA,MAAAE,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAG,EACA,QAAAF,EACA,YAAAG,EACA,KAAAF,EACA,SAAAgB,EACA,QAAAZ,EACA,eAAAqB,EACA,YAAAtB,CAAA,EAXD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAO,MAAA,CAYA,EAvCF,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CAyCA,EAlDD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CAmDA,EApDD,OAAA,GAAA,CAAA,SAAA,~~qHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAqDA,CAEF"}
1	+ {"version":3,"file":"FloatingActionButton.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { COLORS } from '@src/constants/Theme';\nimport { Placement, Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport DefaultIcon from './../../assets/icons/question-mark.svg';\nimport {\n\tDROP_POSITION,\n\tDropdownToggleContainer,\n\tFAB_POSITION,\n\tFloatingActionButtonContainer,\n\tFloatingActionButtonOuterContainer,\n\tMENU_ALIGNMENT,\n\tStyledDropdown,\n\tTooltipStyled,\n} from './FloatingActionButton.styles';\n\nconst FloatingActionToggleButtonJSX: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth: number;\n\theight: number;\n\ticon?: JSX.Element;\n\tcolor: string;\n\tposition?: FAB_POSITION;\n\ttooltipText?: string;\n\ttootipWidth?: number;\n\ttooltipPlacement: Placement;\n\tisRound: boolean;\n\tisDropdownOpen: boolean;\n}> = (props) => {\n\tconst {\n\t\twidth,\n\t\theight,\n\t\tcolor,\n\t\tonClick,\n\t\ticon,\n\t\ttooltipPlacement,\n\t\ttooltipText,\n\t\ttootipWidth,\n\t\tisRound,\n\t} = props;\n\treturn tooltipText ? (\n\t\t<Tooltip\n\t\t\ttooltipContent={\n\t\t\t\t<TooltipStyled tooltipWidth={tootipWidth}>\n\t\t\t\t\t<BodyCaption color={COLORS.content.primaryInverse}>\n\t\t\t\t\t\t{props.tooltipText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</TooltipStyled>\n\t\t\t}\n\t\t\tplacement={tooltipPlacement}\n\t\t\tbody={''}\n\t\t>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</Tooltip>\n\t) : (\n\t\t<>\n\t\t\t<FloatingActionButtonContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tonClick={onClick}\n\t\t\t\tisRound={isRound}\n\t\t\t>\n\t\t\t\t{icon ? icon : <DefaultIcon width={22} height={22} />}\n\t\t\t</FloatingActionButtonContainer>\n\t\t</>\n\t);\n};\nexport const FloatingActionButton: React.FC<{\n\tonClick?: () => void;\n\tchildren?: React.ReactNode;\n\twidth?: number;\n\theight?: number;\n\ticon?: JSX.Element;\n\tcolor?: string;\n\tposition?: FAB_POSITION;\n\tbuttonPaddingHorizontal?: number;\n\tbuttonPaddingVertical?: number;\n\ttooltipText?: string;\n\ttooltipPlacement?: Placement;\n\tzIndex?: number;\n\tisRound?: boolean;\n\tdropPosition?: DROP_POSITION;\n\tmenuAligment?: MENU_ALIGNMENT;\n\ttootipWidth?: number;\n}> = (props) => {\n\tconst {\n\t\ticon,\n\t\tonClick,\n\t\tchildren,\n\t\ttooltipText,\n\t\tisRound = true,\n\t\twidth = 48,\n\t\theight = 48,\n\t\tcolor = COLORS.background.inverse,\n\t\tposition = FAB_POSITION.TOP_LEFT,\n\t\tbuttonPaddingHorizontal = 20,\n\t\tbuttonPaddingVertical = 20,\n\t\tzIndex = 1,\n\t\ttooltipPlacement = 'right',\n\t\tdropPosition = DROP_POSITION.DOWN,\n\t\tmenuAligment = MENU_ALIGNMENT.END,\n\t\ttootipWidth,\n\t} = props;\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n\treturn (\n\t\t<>\n\t\t\t<FloatingActionButtonOuterContainer\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tcolor={color}\n\t\t\t\tposition={position}\n\t\t\t\tbuttonPaddingHorizontal={buttonPaddingHorizontal}\n\t\t\t\tbuttonPaddingVertical={buttonPaddingVertical}\n\t\t\t\tzIndex={zIndex}\n\t\t\t>\n\t\t\t\t<StyledDropdown\n\t\t\t\t\tonToggle={(nextShow: boolean, meta: any) => {\n\t\t\t\t\t\tsetIsDropdownOpen(nextShow);\n\t\t\t\t\t}}\n\t\t\t\t\tdrop={dropPosition}\n\t\t\t\t\talign={menuAligment}\n\t\t\t\t>\n\t\t\t\t\t{children ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownToggleContainer drop={dropPosition}>\n\t\t\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropdownToggleContainer>\n\t\t\t\t\t\t\t<Dropdown.Menu>{children}</Dropdown.Menu>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<FloatingActionToggleButtonJSX\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\theight={height}\n\t\t\t\t\t\t\tcolor={color}\n\t\t\t\t\t\t\ttooltipPlacement={tooltipPlacement}\n\t\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t\t\ttooltipText={tooltipText}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\t\tisRound={isRound}\n\t\t\t\t\t\t\tisDropdownOpen={isDropdownOpen}\n\t\t\t\t\t\t\ttootipWidth={tootipWidth}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</StyledDropdown>\n\t\t\t</FloatingActionButtonOuterContainer>\n\t\t</>\n\t);\n};\n"],"names":["FloatingActionToggleButtonJSX","props","width","height","color","onClick","icon","tooltipPlacement","tooltipText","tootipWidth","isRound","jsxDEV","Tooltip","TooltipStyled","BodyCaption","COLORS","this","FloatingActionButtonContainer","DefaultIcon","Fragment","FloatingActionButton","children","position","FAB_POSITION","buttonPaddingHorizontal","buttonPaddingVertical","zIndex","dropPosition","DROP_POSITION","menuAligment","MENU_ALIGNMENT","isDropdownOpen","setIsDropdownOpen","useState","FloatingActionButtonOuterContainer","StyledDropdown","nextShow","meta","DropdownToggleContainer","Dropdown"],"mappings":"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"}

package/dist/cjs/components/floating-input-dropdown/FloatingInputDropdown.js CHANGED Viewed

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),r=require("react"),S=require("react-popper"),j=require("styled-components"),k=require("../dropdown/Common.styled.js"),U=require("../floater/floater.js"),p=require("../dropShadow/DropShadow.js"),V=require("../input/Input.js"),C=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),R=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},q=R(j),O=q.default(k.OpenDropdownContainer)`
-	opacity: ${({visible:o})=>o?1:0};
-	visibility: ${({visible:o})=>o?"visible":"hidden"};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-dev-runtime"),r=require("react"),I=require("react-popper"),F=require("styled-components"),S=require("../dropdown/Common.styled.js"),U=require("../floater/floater.js"),d=require("../dropShadow/DropShadow.js"),V=require("../input/Input.js"),C=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),R=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},q=R(F),O=q.default(S.OpenDropdownContainer)`
+	opacity: ${({visible:t})=>t?1:0};
+	visibility: ${({visible:t})=>t?"visible":"hidden"};
 	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-`,z=({inputProps:o,dropdownProps:e,floaterProps:m,children:u,isVisible:f,onDropdownOptionClick:b,onChangeText:D})=>{const s=r.useRef(null),d=r.useRef(null),[l,a]=r.useState(!1),[y,w]=r.useState(null),[v,g]=r.useState(null),[N,c]=r.useState(!1),{styles:x,attributes:E,update:i,forceUpdate:I}=S.usePopper(v,y,{placement:e.placement,strategy:e.strategy,modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"preventOverflow",options:{padding:{top:0,bottom:10,left:0,right:0}}},{name:"flip",options:{fallbackPlacements:["bottom","top"]}}]});r.useEffect(()=>{if(l)c(!0),i&&i();else{const n=setTimeout(()=>c(!1),200);return()=>clearTimeout(n)}},[l,i]),r.useEffect(()=>{if(s.current){const n=new ResizeObserver(()=>{i&&i()});return n.observe(s.current),()=>{n.disconnect()}}},[s.current,i]);const h=n=>{e.version==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),a(!1),e?.onClose?.()};return t.jsxDEV(t.Fragment,{children:[f&&t.jsxDEV(U.Floater,{...m,refElement:d,children:[t.jsxDEV("div",{style:{position:"relative"},ref:g,children:t.jsxDEV(p.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:t.jsxDEV(V.Input,{...o,onClick:()=>{e.onDropdownOpen?.(),l?a(!1):e.disabled||a(!0),I?.()},ref:s,onChangeText:(n,F)=>{D?.(n,F),i&&i()}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:139,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:134,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:130,columnNumber:6},void 0),t.jsxDEV(O,{ref:w,style:{...x.popper,zIndex:3},...E.popper,visible:l||N,children:t.jsxDEV(p.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:t.jsxDEV(C.OpenedDropdown,{...e,onSelect:n=>{e.version==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),a(!1))},onClose:h,version:e.version,headerRef:s,onDropdownItemClick:n=>{b?.(n)}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:169,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:164,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:158,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:129,columnNumber:5},void 0),t.jsxDEV("div",{ref:d,children:u&&t.jsxDEV("div",{children:u},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:194,columnNumber:37},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:194,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:127,columnNumber:3},void 0)};exports.FloatingInputDropdown=z;
+`,z=({inputProps:t,dropdownProps:e,floaterProps:m,children:u,isVisible:f,onDropdownOptionClick:b,onChangeText:D})=>{const s=r.useRef(null),c=r.useRef(null),[l,a]=r.useState(!1),[h,v]=r.useState(null),[g,N]=r.useState(null),[y,p]=r.useState(!1),{styles:w,attributes:j,update:i,forceUpdate:k}=I.usePopper(g,h,{placement:e.placement,strategy:e.strategy,modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"preventOverflow",options:{padding:{top:0,bottom:10,left:0,right:0}}},{name:"flip",options:{fallbackPlacements:["bottom","top"]}}]});r.useEffect(()=>{if(l)p(!0),i&&i();else{const n=setTimeout(()=>p(!1),200);return()=>clearTimeout(n)}},[l,i]),r.useEffect(()=>{if(s.current){const n=new ResizeObserver(()=>{i&&i()});return n.observe(s.current),()=>{n.disconnect()}}},[s.current,i]);const x=n=>{e.version==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),a(!1),e?.onClose?.()};return o.jsxDEV(o.Fragment,{children:[f&&o.jsxDEV(U.Floater,{...m,refElement:c,children:[o.jsxDEV("div",{style:{position:"relative"},ref:N,children:o.jsxDEV(d.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:o.jsxDEV(V.Input,{...t,onClick:()=>{e.onDropdownOpen?.(),l?a(!1):e.disabled||a(!0),k?.()},ref:s,onChangeText:(n,E)=>{D?.(n,E),i&&i()}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:139,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:134,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:130,columnNumber:6},void 0),o.jsxDEV(O,{ref:v,style:{...w.popper,zIndex:3},...j.popper,visible:l||y,children:o.jsxDEV(d.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:o.jsxDEV(C.OpenedDropdown,{...e,onSelect:n=>{e.version==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),a(!1))},onClose:x,version:e.version,headerRef:s,onDropdownItemClick:n=>{b?.(n)}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:169,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:164,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:158,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:129,columnNumber:5},void 0),o.jsxDEV("div",{ref:c,children:u&&o.jsxDEV("div",{children:u},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:194,columnNumber:37},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:194,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/floating-input-dropdown/FloatingInputDropdown.tsx",lineNumber:127,columnNumber:3},void 0)};exports.FloatingInputDropdown=z;
 //# sourceMappingURL=FloatingInputDropdown.js.map

package/dist/cjs/components/floating-input-dropdown/FloatingInputDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingInputDropdown.js","sources":["../../../../src/components/floating-input-dropdown/FloatingInputDropdown.tsx"],"sourcesContent":["import React, { LegacyRef, Ref, useEffect, useRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport styled from 'styled-components';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement } from '@src/components/tooltips';\nimport { OpenDropdownContainer } from '../dropdown/Common.styled';\nimport { OpenedDropdown } from '../dropdown/OpenedDropdown';\nimport { DropdownOption, OpenDropdownProps } from '../dropdown/type';\nimport { Floater } from '../floater';\nimport { FloaterProps } from '../floater/floater';\nimport { Input } from '../input';\nimport { InputProps } from '../input/Input.model';\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};\n\ntype FloatingInputDropdownProps = {\n\tinputProps: InputProps;\n\tdropdownProps: DropdownProps;\n\tfloaterProps: FloaterProps;\n\tchildren?: React.ReactNode;\n\tisVisible?: boolean;\n\tonDropdownOptionClick?: (option: DropdownOption) => void;\n\tonChangeText?: (text: string, event?: Event) => void;\n};\n\nconst AnimatedDropdownContainer = styled(OpenDropdownContainer)<{\n\tvisible: boolean;\n}>`\n\topacity: ${({ visible }) => (visible ? 1 : 0)};\n\tvisibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};\n\ttransition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n`;\n\nexport const FloatingInputDropdown: React.FC<FloatingInputDropdownProps> = ({\n\tinputProps,\n\tdropdownProps,\n\tfloaterProps,\n\tchildren,\n\tisVisible,\n\tonDropdownOptionClick,\n\tonChangeText,\n}) => {\n\tconst headerRef = useRef(null);\n\tconst childRef = useRef(null);\n\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\tconst [popperElement, setPopperElement] = useState<HTMLDivElement \| null>(\n\t\tnull,\n\t);\n\tconst [referenceElement, setReferenceElement] =\n\t\tuseState<HTMLDivElement \| null>(null);\n\tconst [animateDropdown, setAnimateDropdown] = useState(false);\n\n\tconst { styles, attributes, update, forceUpdate } = usePopper(\n\t\treferenceElement,\n\t\tpopperElement,\n\t\t{\n\t\t\tplacement: dropdownProps.placement,\n\t\t\tstrategy: dropdownProps.strategy,\n\t\t\tmodifiers: [\n\t\t\t\t{\n\t\t\t\t\tname: 'offset',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\toffset: [0, 0],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'preventOverflow',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tpadding: { top: 0, bottom: 10, left: 0, right: 0 },\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'flip',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tfallbackPlacements: ['bottom', 'top'],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t);\n\n\tuseEffect(() => {\n\t\tif (openDropdown) {\n\t\t\tsetAnimateDropdown(true);\n\t\t\tif (update) update();\n\t\t} else {\n\t\t\tconst timer = setTimeout(() => setAnimateDropdown(false), 200);\n\t\t\treturn () => clearTimeout(timer);\n\t\t}\n\t}, [openDropdown, update]);\n\n\tuseEffect(() => {\n\t\tif (headerRef.current) {\n\t\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (update) update();\n\t\t\t});\n\t\t\tresizeObserver.observe(headerRef.current);\n\n\t\t\treturn () => {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t};\n\t\t}\n\t}, [headerRef.current, update]);\n\n\tconst onCloseHandle = (data) => {\n\t\tif (\n\t\t\tdropdownProps.version === '2.0' &&\n\t\t\tdropdownProps.isMultiSelect &&\n\t\t\tdata\n\t\t) {\n\t\t\tdropdownProps.onSelect?.([...data]);\n\t\t}\n\t\tsetDropdownVisibility(false);\n\t\tdropdownProps?.onClose?.();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{isVisible && (\n\t\t\t\t<Floater {...floaterProps} refElement={childRef}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tdropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\t\tif (!dropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tforceUpdate?.();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\t\tonChangeText={(text, event) => {\n\t\t\t\t\t\t\t\t\tonChangeText?.(text, event);\n\t\t\t\t\t\t\t\t\tif (update) update();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</div>\n\t\t\t\t\t<AnimatedDropdownContainer\n\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\tstyle={{ ...styles['popper'], zIndex: 3 }}\n\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\tvisible={openDropdown \|\| animateDropdown}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t{...dropdownProps}\n\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tdropdownProps.version === '2.0' &&\n\t\t\t\t\t\t\t\t\t\tdropdownProps.isMultiSelect\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tdropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\tversion={dropdownProps.version}\n\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\tonDropdownItemClick={(option) => {\n\t\t\t\t\t\t\t\t\tonDropdownOptionClick?.(option);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</AnimatedDropdownContainer>\n\t\t\t\t</Floater>\n\t\t\t)}\n\n\t\t\t<div ref={childRef}>{children && <div>{children}</div>}</div>\n\t\t</>\n\t);\n};\n"],"names":["AnimatedDropdownContainer","styled","OpenDropdownContainer","visible","FloatingInputDropdown","inputProps","dropdownProps","floaterProps","children","isVisible","onDropdownOptionClick","onChangeText","headerRef","useRef","childRef","openDropdown","setDropdownVisibility","useState","popperElement","setPopperElement","referenceElement","setReferenceElement","animateDropdown","setAnimateDropdown","styles","attributes","update","forceUpdate","usePopper","useEffect","timer","resizeObserver","onCloseHandle","data","jsxDEV","Fragment","Floater","DropShadow","Input","text","event","this","OpenedDropdown","options","option"],"mappings":"+dAkCMA,EAA4BC,EAAAA,QAAOC,uBAAqB;AAAA,YAGlD,CAAC,CAAE,QAAAC,CAAA,IAAeA,EAAU,EAAI,CAAE;AAAA,eAC/B,CAAC,CAAE,QAAAA,CAAA,IAAeA,EAAU,UAAY,QAAS;AAAA;AAAA,EAInDC,EAA8D,CAAC,CAC3E,WAAAC,EACA,cAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAC,EACA,sBAAAC,EACA,aAAAC,CACD,IAAM,CACL,MAAMC,EAAYC,EAAAA,OAAO,IAAI,EACvBC,EAAWD,EAAAA,OAAO,IAAI,EACtB,CAACE,EAAcC,CAAqB,EAAIC,EAAAA,SAAS,EAAK,EACtD,CAACC,EAAeC,CAAgB,EAAIF,EAAAA,SACzC,IAAA,EAEK,CAACG,EAAkBC,CAAmB,EAC3CJ,EAAAA,SAAgC,IAAI,EAC/B,CAACK,EAAiBC,CAAkB,EAAIN,EAAAA,SAAS,EAAK,EAEtD,CAAE,OAAAO,EAAQ,WAAAC,EAAY,OAAAC,EAAQ,YAAAC,GAAgBC,EAAAA,UACnDR,EACAF,EACA,CACC,UAAWZ,EAAc,UACzB,SAAUA,EAAc,SACxB,UAAW,CACV,CACC,KAAM,SACN,QAAS,CACR,OAAQ,CAAC,EAAG,CAAC,CAAA,CACd,EAED,CACC,KAAM,kBACN,QAAS,CACR,QAAS,CAAE,IAAK,EAAG,OAAQ,GAAI,KAAM,EAAG,MAAO,CAAA,CAAE,CAClD,EAED,CACC,KAAM,OACN,QAAS,CACR,mBAAoB,CAAC,SAAU,KAAK,CAAA,CACrC,CACD,CACD,CACD,EAGDuB,EAAAA,UAAU,IAAM,CACf,GAAId,EACHQ,EAAmB,EAAI,EACnBG,GAAQA,EAAA,MACN,CACN,MAAMI,EAAQ,WAAW,IAAMP,EAAmB,EAAK,EAAG,GAAG,EAC7D,MAAO,IAAM,aAAaO,CAAK,CAChC,CACD,EAAG,CAACf,EAAcW,CAAM,CAAC,EAEzBG,EAAAA,UAAU,IAAM,CACf,GAAIjB,EAAU,QAAS,CACtB,MAAMmB,EAAiB,IAAI,eAAe,IAAM,CAC3CL,GAAQA,EAAA,CACb,CAAC,EACD,OAAAK,EAAe,QAAQnB,EAAU,OAAO,EAEjC,IAAM,CACZmB,EAAe,WAAA,CAChB,CACD,CACD,EAAG,CAACnB,EAAU,QAASc,CAAM,CAAC,EAE9B,MAAMM,EAAiBC,GAAS,CAE9B3B,EAAc,UAAY,OAC1BA,EAAc,eACd2B,GAEA3B,EAAc,WAAW,CAAC,GAAG2B,CAAI,CAAC,EAEnCjB,EAAsB,EAAK,EAC3BV,GAAe,UAAA,CAChB,EAEA,OACC4B,EAAAA,OAAAC,WAAA,CACE,SAAA,CAAA1B,GACAyB,EAAAA,OAACE,UAAA,CAAS,GAAG7B,EAAc,WAAYO,EACtC,SAAA,CAAAoB,EAAAA,OAAC,MAAA,CACA,MAAO,CAAE,SAAU,UAAA,EACnB,IAAKb,EAEL,SAAAa,EAAAA,OAACG,EAAAA,WAAA,CACA,MAAO,KACP,SAAU,OACV,MAAO,CAAE,aAAc,CAAA,EAEvB,SAAAH,EAAAA,OAACI,EAAAA,MAAA,CACC,GAAGjC,EACJ,QAAS,IAAM,CACdC,EAAc,iBAAA,EACTS,EAGJC,EAAsB,EAAK,EAFtBV,EAAc,UAAUU,EAAsB,EAAI,EAIxDW,IAAA,CACD,EACA,IAAKf,EACL,aAAc,CAAC2B,EAAMC,IAAU,CAC9B7B,IAAe4B,EAAMC,CAAK,EACtBd,GAAQA,EAAA,CACb,CAAA,EAfD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAe,MAAA,CAgBA,EArBD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CAsBA,EA1BD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,EA4BAP,EAAAA,OAAClC,EAAA,CACA,IAAKmB,EACL,MAAO,CAAE,GAAGK,EAAO,OAAW,OAAQ,CAAA,EACrC,GAAGC,EAAW,OACf,QAASV,GAAgBO,EAEzB,SAAAY,EAAAA,OAACG,EAAAA,WAAA,CACA,MAAO,KACP,SAAU,OACV,MAAO,CAAE,aAAc,CAAA,EAEvB,SAAAH,EAAAA,OAACQ,EAAAA,eAAA,CACC,GAAGpC,EACJ,SAAWqC,GAAY,CAErBrC,EAAc,UAAY,OAC1BA,EAAc,gBAIdA,EAAc,WAAWqC,CAAO,EAChC3B,EAAsB,EAAK,EAE7B,EACA,QAASgB,EACT,QAAS1B,EAAc,QACvB,UAAAM,EACA,oBAAsBgC,GAAW,CAChClC,IAAwBkC,CAAM,CAC/B,CAAA,EAlBD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAH,MAAA,CAmBA,EAxBD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CAyBA,EA/BD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CAgCA,CAAA,EA7DD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MA8DA,WAGA,MAAA,CAAI,IAAK3B,EAAW,SAAAN,GAAY0B,EAAAA,OAAC,OAAK,SAAA1B,GAAN,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,EAAA,EAAAiC,MAAe,CAAA,EAAhD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAuD,CAAA,CAAA,EAnExD,OAAA,GAAA,CAAA,SAAA,~~uHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAoEA,CAEF"}
1	+ {"version":3,"file":"FloatingInputDropdown.js","sources":["../../../../src/components/floating-input-dropdown/FloatingInputDropdown.tsx"],"sourcesContent":["import React, { LegacyRef, Ref, useEffect, useRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport styled from 'styled-components';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement } from '@src/components/tooltips';\nimport { OpenDropdownContainer } from '../dropdown/Common.styled';\nimport { OpenedDropdown } from '../dropdown/OpenedDropdown';\nimport { DropdownOption, OpenDropdownProps } from '../dropdown/type';\nimport { Floater } from '../floater';\nimport { FloaterProps } from '../floater/floater';\nimport { Input } from '../input';\nimport { InputProps } from '../input/Input.model';\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};\n\ntype FloatingInputDropdownProps = {\n\tinputProps: InputProps;\n\tdropdownProps: DropdownProps;\n\tfloaterProps: FloaterProps;\n\tchildren?: React.ReactNode;\n\tisVisible?: boolean;\n\tonDropdownOptionClick?: (option: DropdownOption) => void;\n\tonChangeText?: (text: string, event?: Event) => void;\n};\n\nconst AnimatedDropdownContainer = styled(OpenDropdownContainer)<{\n\tvisible: boolean;\n}>`\n\topacity: ${({ visible }) => (visible ? 1 : 0)};\n\tvisibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};\n\ttransition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n`;\n\nexport const FloatingInputDropdown: React.FC<FloatingInputDropdownProps> = ({\n\tinputProps,\n\tdropdownProps,\n\tfloaterProps,\n\tchildren,\n\tisVisible,\n\tonDropdownOptionClick,\n\tonChangeText,\n}) => {\n\tconst headerRef = useRef(null);\n\tconst childRef = useRef(null);\n\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\tconst [popperElement, setPopperElement] = useState<HTMLDivElement \| null>(\n\t\tnull,\n\t);\n\tconst [referenceElement, setReferenceElement] =\n\t\tuseState<HTMLDivElement \| null>(null);\n\tconst [animateDropdown, setAnimateDropdown] = useState(false);\n\n\tconst { styles, attributes, update, forceUpdate } = usePopper(\n\t\treferenceElement,\n\t\tpopperElement,\n\t\t{\n\t\t\tplacement: dropdownProps.placement,\n\t\t\tstrategy: dropdownProps.strategy,\n\t\t\tmodifiers: [\n\t\t\t\t{\n\t\t\t\t\tname: 'offset',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\toffset: [0, 0],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'preventOverflow',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tpadding: { top: 0, bottom: 10, left: 0, right: 0 },\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: 'flip',\n\t\t\t\t\toptions: {\n\t\t\t\t\t\tfallbackPlacements: ['bottom', 'top'],\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t);\n\n\tuseEffect(() => {\n\t\tif (openDropdown) {\n\t\t\tsetAnimateDropdown(true);\n\t\t\tif (update) update();\n\t\t} else {\n\t\t\tconst timer = setTimeout(() => setAnimateDropdown(false), 200);\n\t\t\treturn () => clearTimeout(timer);\n\t\t}\n\t}, [openDropdown, update]);\n\n\tuseEffect(() => {\n\t\tif (headerRef.current) {\n\t\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\t\tif (update) update();\n\t\t\t});\n\t\t\tresizeObserver.observe(headerRef.current);\n\n\t\t\treturn () => {\n\t\t\t\tresizeObserver.disconnect();\n\t\t\t};\n\t\t}\n\t}, [headerRef.current, update]);\n\n\tconst onCloseHandle = (data) => {\n\t\tif (\n\t\t\tdropdownProps.version === '2.0' &&\n\t\t\tdropdownProps.isMultiSelect &&\n\t\t\tdata\n\t\t) {\n\t\t\tdropdownProps.onSelect?.([...data]);\n\t\t}\n\t\tsetDropdownVisibility(false);\n\t\tdropdownProps?.onClose?.();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{isVisible && (\n\t\t\t\t<Floater {...floaterProps} refElement={childRef}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tdropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\t\tif (!dropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tforceUpdate?.();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\t\tonChangeText={(text, event) => {\n\t\t\t\t\t\t\t\t\tonChangeText?.(text, event);\n\t\t\t\t\t\t\t\t\tif (update) update();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</div>\n\t\t\t\t\t<AnimatedDropdownContainer\n\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\tstyle={{ ...styles['popper'], zIndex: 3 }}\n\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\tvisible={openDropdown \|\| animateDropdown}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t{...dropdownProps}\n\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tdropdownProps.version === '2.0' &&\n\t\t\t\t\t\t\t\t\t\tdropdownProps.isMultiSelect\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tdropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\tversion={dropdownProps.version}\n\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\tonDropdownItemClick={(option) => {\n\t\t\t\t\t\t\t\t\tonDropdownOptionClick?.(option);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t</AnimatedDropdownContainer>\n\t\t\t\t</Floater>\n\t\t\t)}\n\n\t\t\t<div ref={childRef}>{children && <div>{children}</div>}</div>\n\t\t</>\n\t);\n};\n"],"names":["AnimatedDropdownContainer","styled","OpenDropdownContainer","visible","FloatingInputDropdown","inputProps","dropdownProps","floaterProps","children","isVisible","onDropdownOptionClick","onChangeText","headerRef","useRef","childRef","openDropdown","setDropdownVisibility","useState","popperElement","setPopperElement","referenceElement","setReferenceElement","animateDropdown","setAnimateDropdown","styles","attributes","update","forceUpdate","usePopper","useEffect","timer","resizeObserver","onCloseHandle","data","jsxDEV","Fragment","Floater","DropShadow","Input","text","event","this","OpenedDropdown","options","option"],"mappings":"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"}

package/dist/cjs/components/half-doughnut-chart/HalfDoughnutChart.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-dev-runtime"),f=require("chart.js"),s=require("react"),k=require("react-chartjs-2"),d=require("../TypographyStyle.js"),b=require("../../constants/Theme.js"),r=require("./HalfDoughnutChart.styled.js");f.Chart.register(f.ArcElement,f.Tooltip);const j="80%",E=({segments:t})=>{const p=s.useRef(null),[h,g]=s.useState(480),i=s.useRef(t);i.current=t;const m=s.useRef(0);s.useEffect(()=>{const e=p.current;if(!e)return;const o=new ResizeObserver(l=>{const c=l[0]?.contentRect.width;c&&g(c)});return o.observe(e),g(e.offsetWidth),()=>o.disconnect()},[]);const u=t.reduce((e,o)=>e+(Number(o.value)||0),0);m.current=u;const a=t.length>0?t.reduce((e,o)=>(Number(o.value)||0)>=(Number(e.value)||0)?o:e,t[0]):void 0,x=u>0&&a?Math.round((Number(a.value)||0)*100/u):0,C=u>0?t.map(e=>Number(e.value)||0):t.map(()=>1),D=t.map(e=>e===a?e.color:e.color+"8F"),v={datasets:[{data:C,backgroundColor:D,borderColor:b.COLORS.surface.standard,borderWidth:3,hoverBackgroundColor:D,hoverOffset:0}]},w=s.useRef({rotation:-90,circumference:180,cutout:j,maintainAspectRatio:!1,animation:{duration:600},plugins:{legend:{display:!1},tooltip:{enabled:!0,backgroundColor:"#212121",titleColor:"#ffffff",bodyColor:"rgba(255,255,255,0.7)",cornerRadius:8,padding:12,caretSize:6,displayColors:!0,boxWidth:12,boxHeight:12,boxPadding:6,callbacks:{title:e=>{const o=e[0]?.dataIndex??-1;if(o<0)return"";const l=i.current[o],c=Number(l.value)||0;return(m.current>0?Math.round(c*100/m.current):0)+"% "+l.label},label:e=>i.current[e.dataIndex]?.tooltipLabel??"",labelColor:e=>{const o=i.current[e.dataIndex];return{borderColor:o?.color??"#fff",backgroundColor:o?.color??"#fff",borderRadius:3}}}}}}).current,N=u===0,y=a?.emojiIcon??null;return n.jsxDEV(r.Wrapper,{children:[!N&&n.jsxDEV(r.Legend,{children:t.map(({label:e,color:o},l)=>n.jsxDEV(r.LegendItem,{children:[n.jsxDEV(r.LegendDot,{color:o},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:149,columnNumber:8},void 0),n.jsxDEV(d.BodySmall,{color:b.COLORS.content.secondary,children:e},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:150,columnNumber:8},void 0)]},`${e}-${l}`,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:148,columnNumber:7},void 0))},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:146,columnNumber:5},void 0),n.jsxDEV(r.ChartWrapper,{ref:p,children:[n.jsxDEV(r.CanvasClip,{style:{height:h/2,overflow:"hidden"},children:n.jsxDEV(k.Doughnut,{data:v,options:w,width:h,height:h},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:158,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:157,columnNumber:5},void 0),N?n.jsxDEV(r.ElementWrapper,{children:n.jsxDEV(r.PercentageLabel,{children:n.jsxDEV(d.TitleLarge,{color:"#212121",children:"--"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:169,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:168,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:167,columnNumber:6},void 0):y&&n.jsxDEV(r.ElementWrapper,{children:[n.jsxDEV(y,{width:36,height:36},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:175,columnNumber:8},void 0),n.jsxDEV(r.PercentageLabel,{children:n.jsxDEV(d.TitleLarge,{color:"#212121",children:[x,"% ",n.jsxDEV("span",{children:a?.label},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:178,columnNumber:25},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:177,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:176,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:174,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:156,columnNumber:4},void 0),a?.description&&n.jsxDEV(r.DescriptionText,{children:n.jsxDEV(d.BodyCaption,{color:b.COLORS.content.secondary,children:a?.description},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:188,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:187,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:144,columnNumber:3},void 0)};exports.HalfDoughnutChart=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-dev-runtime"),f=require("chart.js"),c=require("react"),y=require("react-chartjs-2"),h=require("../TypographyStyle.js"),b=require("../../constants/Theme.js"),t=require("./HalfDoughnutChart.styled.js");f.Chart.register(f.ArcElement,f.Tooltip);const P="80%",E=({segments:o})=>{const p=c.useRef(null),[d,g]=c.useState(480),s=c.useRef(o);s.current=o;const m=c.useRef(0);c.useEffect(()=>{const e=p.current;if(!e)return;const n=new ResizeObserver(u=>{const i=u[0]?.contentRect.width;i&&g(i)});return n.observe(e),g(e.offsetWidth),()=>n.disconnect()},[]);const l=o.reduce((e,n)=>e+(Number(n.value)||0),0);m.current=l;const a=o.length>0?o.reduce((e,n)=>(Number(n.value)||0)>=(Number(e.value)||0)?n:e,o[0]):void 0,k=l>0&&a?Math.round((Number(a.value)||0)*100/l):0,C=l>0?o.map(e=>Number(e.value)||0):o.map(()=>1),N=o.map(e=>e===a?e.color:e.color+"8F"),j={datasets:[{data:C,backgroundColor:N,borderColor:b.COLORS.surface.standard,borderWidth:3,hoverBackgroundColor:N,hoverOffset:0}]},v=c.useRef({rotation:-90,circumference:180,cutout:P,maintainAspectRatio:!1,animation:{duration:600},plugins:{legend:{display:!1},tooltip:{enabled:!0,backgroundColor:"#212121",titleColor:"#ffffff",bodyColor:"rgba(255,255,255,0.7)",cornerRadius:8,padding:12,caretSize:6,displayColors:!0,boxWidth:12,boxHeight:12,boxPadding:6,callbacks:{title:e=>{const n=e[0]?.dataIndex??-1;if(n<0)return"";const u=s.current[n],i=Number(u.value)||0;return(m.current>0?Math.round(i*100/m.current):0)+"% "+u.label},label:e=>s.current[e.dataIndex]?.tooltipLabel??"",labelColor:e=>{const n=s.current[e.dataIndex];return{borderColor:n?.color??"#fff",backgroundColor:n?.color??"#fff",borderRadius:3}}}}}}).current,x=l===0,D=a?.emojiIcon??null;return r.jsxDEV(t.Wrapper,{children:[!x&&r.jsxDEV(t.Legend,{children:o.map(({label:e,color:n},u)=>r.jsxDEV(t.LegendItem,{children:[r.jsxDEV(t.LegendDot,{color:n},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:149,columnNumber:8},void 0),r.jsxDEV(h.BodySmall,{color:b.COLORS.content.secondary,children:e},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:150,columnNumber:8},void 0)]},`${e}-${u}`,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:148,columnNumber:7},void 0))},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:146,columnNumber:5},void 0),r.jsxDEV(t.ChartWrapper,{ref:p,children:[r.jsxDEV(t.CanvasClip,{style:{height:d/2,overflow:"hidden"},children:r.jsxDEV(y.Doughnut,{data:j,options:v,width:d,height:d},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:158,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:157,columnNumber:5},void 0),x?r.jsxDEV(t.ElementWrapper,{children:r.jsxDEV(t.PercentageLabel,{children:r.jsxDEV(h.TitleLarge,{color:"#212121",children:"--"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:169,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:168,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:167,columnNumber:6},void 0):D&&r.jsxDEV(t.ElementWrapper,{children:[r.jsxDEV(D,{width:36,height:36},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:175,columnNumber:8},void 0),r.jsxDEV(t.PercentageLabel,{children:r.jsxDEV(h.TitleLarge,{color:"#212121",children:[k,"% ",r.jsxDEV("span",{children:a?.label},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:178,columnNumber:25},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:177,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:176,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:174,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:156,columnNumber:4},void 0),a?.description&&r.jsxDEV(t.DescriptionText,{children:r.jsxDEV(h.BodyCaption,{color:b.COLORS.content.secondary,children:a?.description},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:188,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:187,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/half-doughnut-chart/HalfDoughnutChart.tsx",lineNumber:144,columnNumber:3},void 0)};exports.HalfDoughnutChart=E;
 //# sourceMappingURL=HalfDoughnutChart.js.map

package/dist/cjs/components/half-doughnut-chart/HalfDoughnutChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HalfDoughnutChart.js","sources":["../../../../src/components/half-doughnut-chart/HalfDoughnutChart.tsx"],"sourcesContent":["import { ArcElement, Chart as ChartJS, Tooltip } from 'chart.js';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Doughnut } from 'react-chartjs-2';\nimport {\n\tBodyCaption,\n\tBodySmall,\n\tTitleLarge,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tCanvasClip,\n\tChartWrapper,\n\tDescriptionText,\n\tElementWrapper,\n\tLegend,\n\tLegendDot,\n\tLegendItem,\n\tPercentageLabel,\n\tWrapper,\n} from './HalfDoughnutChart.styled';\nimport { HalfDoughnutChartProps, HalfDoughnutSegment } from './model';\n\nChartJS.register(ArcElement, Tooltip);\n\nconst doughnutThicknessInverse = `80%`; // cutout size as a percentage of the doughnut radius\n\nexport const HalfDoughnutChart: React.FC<HalfDoughnutChartProps> = ({\n\tsegments,\n}) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [canvasSize, setCanvasSize] = useState(480);\n\n\t// Keep refs so tooltip callbacks always see latest data without\n\t// recreating chartOptions (which would remount the chart).\n\tconst segmentsRef = useRef<HalfDoughnutSegment[]>(segments);\n\tsegmentsRef.current = segments;\n\tconst totalRef = useRef(0);\n\n\tuseEffect(() => {\n\t\tconst el = wrapperRef.current;\n\t\tif (!el) return;\n\t\tconst observer = new ResizeObserver((entries) => {\n\t\t\tconst w = entries[0]?.contentRect.width;\n\t\t\tif (w) setCanvasSize(w);\n\t\t});\n\t\tobserver.observe(el);\n\t\tsetCanvasSize(el.offsetWidth);\n\t\treturn () => observer.disconnect();\n\t}, []);\n\n\tconst total = segments.reduce((sum, s) => sum + (Number(s.value) \|\| 0), 0);\n\ttotalRef.current = total;\n\n\tconst dominantSegment =\n\t\tsegments.length > 0\n\t\t\t? segments.reduce(\n\t\t\t\t\t(best, s) =>\n\t\t\t\t\t\t(Number(s.value) \|\| 0) >= (Number(best.value) \|\| 0) ? s : best,\n\t\t\t\t\tsegments[0],\n\t\t\t )\n\t\t\t: undefined;\n\n\tconst dominantPct =\n\t\ttotal > 0 && dominantSegment\n\t\t\t? Math.round(((Number(dominantSegment.value) \|\| 0) * 100) / total)\n\t\t\t: 0;\n\n\tconst dataValues =\n\t\ttotal > 0\n\t\t\t? segments.map((s) => Number(s.value) \|\| 0)\n\t\t\t: segments.map(() => 1);\n\n\tconst bgColors = segments.map((s) =>\n\t\ts === dominantSegment ? s.color : s.color + '8F',\n\t);\n\n\tconst chartData = {\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: dataValues,\n\t\t\t\tbackgroundColor: bgColors,\n\t\t\t\tborderColor: COLORS.surface.standard,\n\t\t\t\tborderWidth: 3,\n\t\t\t\thoverBackgroundColor: bgColors,\n\t\t\t\thoverOffset: 0,\n\t\t\t},\n\t\t],\n\t};\n\n\t// Stable options object — callbacks read from refs so no recreation needed\n\tconst chartOptions = useRef({\n\t\trotation: -90,\n\t\tcircumference: 180,\n\t\tcutout: doughnutThicknessInverse, // change this for the thickness of the doughnut\n\t\tmaintainAspectRatio: false,\n\t\tanimation: { duration: 600 },\n\t\tplugins: {\n\t\t\tlegend: { display: false },\n\t\t\ttooltip: {\n\t\t\t\tenabled: true,\n\t\t\t\tbackgroundColor: '#212121',\n\t\t\t\ttitleColor: '#ffffff',\n\t\t\t\tbodyColor: 'rgba(255,255,255,0.7)',\n\t\t\t\tcornerRadius: 8,\n\t\t\t\tpadding: 12,\n\t\t\t\tcaretSize: 6,\n\t\t\t\tdisplayColors: true,\n\t\t\t\tboxWidth: 12,\n\t\t\t\tboxHeight: 12,\n\t\t\t\tboxPadding: 6,\n\t\t\t\tcallbacks: {\n\t\t\t\t\ttitle: (items: { dataIndex: number }[]) => {\n\t\t\t\t\t\tconst idx = items[0]?.dataIndex ?? -1;\n\t\t\t\t\t\tif (idx < 0) return '';\n\t\t\t\t\t\tconst seg = segmentsRef.current[idx];\n\t\t\t\t\t\tconst val = Number(seg.value) \|\| 0;\n\t\t\t\t\t\tconst pct =\n\t\t\t\t\t\t\ttotalRef.current > 0\n\t\t\t\t\t\t\t\t? Math.round((val * 100) / totalRef.current)\n\t\t\t\t\t\t\t\t: 0;\n\t\t\t\t\t\treturn pct + '% ' + seg.label;\n\t\t\t\t\t},\n\t\t\t\t\tlabel: (item: { dataIndex: number }) => {\n\t\t\t\t\t\tconst seg = segmentsRef.current[item.dataIndex];\n\t\t\t\t\t\treturn seg?.tooltipLabel ?? '';\n\t\t\t\t\t},\n\t\t\t\t\tlabelColor: (item: { dataIndex: number }) => {\n\t\t\t\t\t\tconst seg = segmentsRef.current[item.dataIndex];\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tborderColor: seg?.color ?? '#fff',\n\t\t\t\t\t\t\tbackgroundColor: seg?.color ?? '#fff',\n\t\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\t};\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t}).current;\n\n\tconst isZeroState = total === 0;\n\tconst DominantIcon = dominantSegment?.emojiIcon ?? null;\n\n\treturn (\n\t\t<Wrapper>\n\t\t\t{!isZeroState && (\n\t\t\t\t<Legend>\n\t\t\t\t\t{segments.map(({ label, color }, index) => (\n\t\t\t\t\t\t<LegendItem key={`${label}-${index}`}>\n\t\t\t\t\t\t\t<LegendDot color={color} />\n\t\t\t\t\t\t\t<BodySmall color={COLORS.content.secondary}>{label}</BodySmall>\n\t\t\t\t\t\t</LegendItem>\n\t\t\t\t\t))}\n\t\t\t\t</Legend>\n\t\t\t)}\n\n\t\t\t<ChartWrapper ref={wrapperRef}>\n\t\t\t\t<CanvasClip style={{ height: canvasSize / 2, overflow: 'hidden' }}>\n\t\t\t\t\t<Doughnut\n\t\t\t\t\t\tdata={chartData}\n\t\t\t\t\t\toptions={chartOptions}\n\t\t\t\t\t\twidth={canvasSize}\n\t\t\t\t\t\theight={canvasSize}\n\t\t\t\t\t/>\n\t\t\t\t</CanvasClip>\n\n\t\t\t\t{isZeroState ? (\n\t\t\t\t\t<ElementWrapper>\n\t\t\t\t\t\t<PercentageLabel>\n\t\t\t\t\t\t\t<TitleLarge color=\"#212121\">--</TitleLarge>\n\t\t\t\t\t\t</PercentageLabel>\n\t\t\t\t\t</ElementWrapper>\n\t\t\t\t) : (\n\t\t\t\t\tDominantIcon && (\n\t\t\t\t\t\t<ElementWrapper>\n\t\t\t\t\t\t\t<DominantIcon width={36} height={36} />\n\t\t\t\t\t\t\t<PercentageLabel>\n\t\t\t\t\t\t\t\t<TitleLarge color=\"#212121\">\n\t\t\t\t\t\t\t\t\t{dominantPct}% <span>{dominantSegment?.label}</span>\n\t\t\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t\t\t</PercentageLabel>\n\t\t\t\t\t\t</ElementWrapper>\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</ChartWrapper>\n\n\t\t\t{dominantSegment?.description && (\n\t\t\t\t<DescriptionText>\n\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t{dominantSegment?.description}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</DescriptionText>\n\t\t\t)}\n\t\t</Wrapper>\n\t);\n};\n"],"names":["ChartJS","ArcElement","Tooltip","doughnutThicknessInverse","HalfDoughnutChart","segments","wrapperRef","useRef","canvasSize","setCanvasSize","useState","segmentsRef","totalRef","useEffect","el","observer","entries","w","total","sum","s","dominantSegment","best","dominantPct","dataValues","bgColors","chartData","COLORS","chartOptions","items","idx","seg","val","item","isZeroState","DominantIcon","Wrapper","jsxDEV","Legend","label","color","index","LegendItem","LegendDot","this","BodySmall","ChartWrapper","CanvasClip","Doughnut","ElementWrapper","PercentageLabel","TitleLarge","DescriptionText","BodyCaption"],"mappings":"mTAsBAA,EAAAA,MAAQ,SAASC,EAAAA,WAAYC,SAAO,EAEpC,MAAMC,EAA2B,MAEpBC,EAAsD,CAAC,CACnE,SAAAC,CACD,IAAM,CACL,MAAMC,EAAaC,EAAAA,OAAuB,IAAI,EACxC,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,GAAG,EAI1CC,EAAcJ,EAAAA,OAA8BF,CAAQ,EAC1DM,EAAY,QAAUN,EACtB,MAAMO,EAAWL,EAAAA,OAAO,CAAC,EAEzBM,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAKR,EAAW,QACtB,GAAI,CAACQ,EAAI,OACT,MAAMC,EAAW,IAAI,eAAgBC,GAAY,CAChD,MAAMC,EAAID,EAAQ,CAAC,GAAG,YAAY,MAC9BC,KAAiBA,CAAC,CACvB,CAAC,EACD,OAAAF,EAAS,QAAQD,CAAE,EACnBL,EAAcK,EAAG,WAAW,EACrB,IAAMC,EAAS,WAAA,CACvB,EAAG,CAAA,CAAE,EAEL,MAAMG,EAAQb,EAAS,OAAO,CAACc,EAAKC,IAAMD,GAAO,OAAOC,EAAE,KAAK,GAAK,GAAI,CAAC,EACzER,EAAS,QAAUM,EAEnB,MAAMG,EACLhB,EAAS,OAAS,EACfA,EAAS,OACT,CAACiB,EAAMF,KACL,OAAOA,EAAE,KAAK,GAAK,KAAO,OAAOE,EAAK,KAAK,GAAK,GAAKF,EAAIE,EAC3DjB,EAAS,CAAC,CAAA,EAEV,OAEEkB,EACLL,EAAQ,GAAKG,EACV,KAAK,OAAQ,OAAOA,EAAgB,KAAK,GAAK,GAAK,IAAOH,CAAK,EAC/D,EAEEM,EACLN,EAAQ,EACLb,EAAS,IAAKe,GAAM,OAAOA,EAAE,KAAK,GAAK,CAAC,EACxCf,EAAS,IAAI,IAAM,CAAC,EAElBoB,EAAWpB,EAAS,IAAKe,GAC9BA,IAAMC,EAAkBD,EAAE,MAAQA,EAAE,MAAQ,IAAA,EAGvCM,EAAY,CACjB,SAAU,CACT,CACC,KAAMF,EACN,gBAAiBC,EACjB,YAAaE,EAAAA,OAAO,QAAQ,SAC5B,YAAa,EACb,qBAAsBF,EACtB,YAAa,CAAA,CACd,CACD,EAIKG,EAAerB,EAAAA,OAAO,CAC3B,SAAU,IACV,cAAe,IACf,OAAQJ,EACR,oBAAqB,GACrB,UAAW,CAAE,SAAU,GAAA,EACvB,QAAS,CACR,OAAQ,CAAE,QAAS,EAAA,EACnB,QAAS,CACR,QAAS,GACT,gBAAiB,UACjB,WAAY,UACZ,UAAW,wBACX,aAAc,EACd,QAAS,GACT,UAAW,EACX,cAAe,GACf,SAAU,GACV,UAAW,GACX,WAAY,EACZ,UAAW,CACV,MAAQ0B,GAAmC,CAC1C,MAAMC,EAAMD,EAAM,CAAC,GAAG,WAAa,GACnC,GAAIC,EAAM,EAAG,MAAO,GACpB,MAAMC,EAAMpB,EAAY,QAAQmB,CAAG,EAC7BE,EAAM,OAAOD,EAAI,KAAK,GAAK,EAKjC,OAHCnB,EAAS,QAAU,EAChB,KAAK,MAAOoB,EAAM,IAAOpB,EAAS,OAAO,EACzC,GACS,KAAOmB,EAAI,KACzB,EACA,MAAQE,GACKtB,EAAY,QAAQsB,EAAK,SAAS,GAClC,cAAgB,GAE7B,WAAaA,GAAgC,CAC5C,MAAMF,EAAMpB,EAAY,QAAQsB,EAAK,SAAS,EAC9C,MAAO,CACN,YAAaF,GAAK,OAAS,OAC3B,gBAAiBA,GAAK,OAAS,OAC/B,aAAc,CAAA,CAEhB,CAAA,CACD,CACD,CACD,CACA,EAAE,QAEGG,EAAchB,IAAU,EACxBiB,EAAed,GAAiB,WAAa,KAEnD,gBACEe,UAAA,CACC,SAAA,CAAA,CAACF,GACDG,EAAAA,OAACC,EAAAA,OAAA,CACC,SAAAjC,EAAS,IAAI,CAAC,CAAE,MAAAkC,EAAO,MAAAC,CAAA,EAASC,IAChCJ,EAAAA,OAACK,EAAAA,WAAA,CACA,SAAA,CAAAL,EAAAA,OAACM,EAAAA,WAAU,MAAAH,CAAA,EAAX,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAI,MAAyB,WACxBC,EAAAA,UAAA,CAAU,MAAOlB,SAAO,QAAQ,UAAY,SAAAY,GAA7C,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAK,MAAmD,CAAA,CAAA,EAFnC,GAAGL,CAAK,IAAIE,CAAK,GAAlC,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAG,MAGA,CACA,GANF,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAOA,EAGDP,EAAAA,OAACS,EAAAA,aAAA,CAAa,IAAKxC,EAClB,SAAA,CAAA+B,EAAAA,OAACU,EAAAA,WAAA,CAAW,MAAO,CAAE,OAAQvC,EAAa,EAAG,SAAU,UACtD,SAAA6B,EAAAA,OAACW,EAAAA,SAAA,CACA,KAAMtB,EACN,QAASE,EACT,MAAOpB,EACP,OAAQA,CAAA,EAJT,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAoC,MAAA,CAKA,EAND,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAOA,EAECV,WACCe,iBAAA,CACA,SAAAZ,EAAAA,OAACa,EAAAA,iBACA,SAAAb,EAAAA,OAACc,EAAAA,WAAA,CAAW,MAAM,UAAU,SAAA,IAAA,EAA5B,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAP,MAA8B,CAAA,EAD/B,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,EAHD,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAIA,EAEAT,GACCE,EAAAA,OAACY,EAAAA,eAAA,CACA,SAAA,CAAAZ,SAACF,EAAA,CAAa,MAAO,GAAI,OAAQ,EAAA,EAAjC,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAS,MAAqC,EACrCP,SAACa,EAAAA,gBAAA,CACA,SAAAb,EAAAA,OAACc,EAAAA,WAAA,CAAW,MAAM,UAChB,SAAA,CAAA5B,EAAY,KAAEc,EAAAA,OAAC,OAAA,CAAM,SAAAhB,GAAiB,KAAA,EAAxB,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,EAAA,EAAAuB,MAA8B,CAAA,CAAA,EAD9C,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAEA,CAAA,EAHD,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAIA,CAAA,CAAA,EAND,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAOA,CAAA,CAAA,EAzBH,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MA4BA,EAECvB,GAAiB,aACjBgB,SAACe,EAAAA,gBAAA,CACA,SAAAf,EAAAA,OAACgB,EAAAA,YAAA,CAAY,MAAO1B,EAAAA,OAAO,QAAQ,UACjC,SAAAN,GAAiB,WAAA,EADnB,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAuB,MAEA,CAAA,EAHD,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAIA,CAAA,CAAA,EA/CF,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,IAAA,aAAA,CAAA,EAAAA,MAiDA,CAEF"}
1	+ {"version":3,"file":"HalfDoughnutChart.js","sources":["../../../../src/components/half-doughnut-chart/HalfDoughnutChart.tsx"],"sourcesContent":["import { ArcElement, Chart as ChartJS, Tooltip } from 'chart.js';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Doughnut } from 'react-chartjs-2';\nimport {\n\tBodyCaption,\n\tBodySmall,\n\tTitleLarge,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tCanvasClip,\n\tChartWrapper,\n\tDescriptionText,\n\tElementWrapper,\n\tLegend,\n\tLegendDot,\n\tLegendItem,\n\tPercentageLabel,\n\tWrapper,\n} from './HalfDoughnutChart.styled';\nimport { HalfDoughnutChartProps, HalfDoughnutSegment } from './model';\n\nChartJS.register(ArcElement, Tooltip);\n\nconst doughnutThicknessInverse = `80%`; // cutout size as a percentage of the doughnut radius\n\nexport const HalfDoughnutChart: React.FC<HalfDoughnutChartProps> = ({\n\tsegments,\n}) => {\n\tconst wrapperRef = useRef<HTMLDivElement>(null);\n\tconst [canvasSize, setCanvasSize] = useState(480);\n\n\t// Keep refs so tooltip callbacks always see latest data without\n\t// recreating chartOptions (which would remount the chart).\n\tconst segmentsRef = useRef<HalfDoughnutSegment[]>(segments);\n\tsegmentsRef.current = segments;\n\tconst totalRef = useRef(0);\n\n\tuseEffect(() => {\n\t\tconst el = wrapperRef.current;\n\t\tif (!el) return;\n\t\tconst observer = new ResizeObserver((entries) => {\n\t\t\tconst w = entries[0]?.contentRect.width;\n\t\t\tif (w) setCanvasSize(w);\n\t\t});\n\t\tobserver.observe(el);\n\t\tsetCanvasSize(el.offsetWidth);\n\t\treturn () => observer.disconnect();\n\t}, []);\n\n\tconst total = segments.reduce((sum, s) => sum + (Number(s.value) \|\| 0), 0);\n\ttotalRef.current = total;\n\n\tconst dominantSegment =\n\t\tsegments.length > 0\n\t\t\t? segments.reduce(\n\t\t\t\t\t(best, s) =>\n\t\t\t\t\t\t(Number(s.value) \|\| 0) >= (Number(best.value) \|\| 0) ? s : best,\n\t\t\t\t\tsegments[0],\n\t\t\t )\n\t\t\t: undefined;\n\n\tconst dominantPct =\n\t\ttotal > 0 && dominantSegment\n\t\t\t? Math.round(((Number(dominantSegment.value) \|\| 0) * 100) / total)\n\t\t\t: 0;\n\n\tconst dataValues =\n\t\ttotal > 0\n\t\t\t? segments.map((s) => Number(s.value) \|\| 0)\n\t\t\t: segments.map(() => 1);\n\n\tconst bgColors = segments.map((s) =>\n\t\ts === dominantSegment ? s.color : s.color + '8F',\n\t);\n\n\tconst chartData = {\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: dataValues,\n\t\t\t\tbackgroundColor: bgColors,\n\t\t\t\tborderColor: COLORS.surface.standard,\n\t\t\t\tborderWidth: 3,\n\t\t\t\thoverBackgroundColor: bgColors,\n\t\t\t\thoverOffset: 0,\n\t\t\t},\n\t\t],\n\t};\n\n\t// Stable options object — callbacks read from refs so no recreation needed\n\tconst chartOptions = useRef({\n\t\trotation: -90,\n\t\tcircumference: 180,\n\t\tcutout: doughnutThicknessInverse, // change this for the thickness of the doughnut\n\t\tmaintainAspectRatio: false,\n\t\tanimation: { duration: 600 },\n\t\tplugins: {\n\t\t\tlegend: { display: false },\n\t\t\ttooltip: {\n\t\t\t\tenabled: true,\n\t\t\t\tbackgroundColor: '#212121',\n\t\t\t\ttitleColor: '#ffffff',\n\t\t\t\tbodyColor: 'rgba(255,255,255,0.7)',\n\t\t\t\tcornerRadius: 8,\n\t\t\t\tpadding: 12,\n\t\t\t\tcaretSize: 6,\n\t\t\t\tdisplayColors: true,\n\t\t\t\tboxWidth: 12,\n\t\t\t\tboxHeight: 12,\n\t\t\t\tboxPadding: 6,\n\t\t\t\tcallbacks: {\n\t\t\t\t\ttitle: (items: { dataIndex: number }[]) => {\n\t\t\t\t\t\tconst idx = items[0]?.dataIndex ?? -1;\n\t\t\t\t\t\tif (idx < 0) return '';\n\t\t\t\t\t\tconst seg = segmentsRef.current[idx];\n\t\t\t\t\t\tconst val = Number(seg.value) \|\| 0;\n\t\t\t\t\t\tconst pct =\n\t\t\t\t\t\t\ttotalRef.current > 0\n\t\t\t\t\t\t\t\t? Math.round((val * 100) / totalRef.current)\n\t\t\t\t\t\t\t\t: 0;\n\t\t\t\t\t\treturn pct + '% ' + seg.label;\n\t\t\t\t\t},\n\t\t\t\t\tlabel: (item: { dataIndex: number }) => {\n\t\t\t\t\t\tconst seg = segmentsRef.current[item.dataIndex];\n\t\t\t\t\t\treturn seg?.tooltipLabel ?? '';\n\t\t\t\t\t},\n\t\t\t\t\tlabelColor: (item: { dataIndex: number }) => {\n\t\t\t\t\t\tconst seg = segmentsRef.current[item.dataIndex];\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tborderColor: seg?.color ?? '#fff',\n\t\t\t\t\t\t\tbackgroundColor: seg?.color ?? '#fff',\n\t\t\t\t\t\t\tborderRadius: 3,\n\t\t\t\t\t\t};\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t}).current;\n\n\tconst isZeroState = total === 0;\n\tconst DominantIcon = dominantSegment?.emojiIcon ?? null;\n\n\treturn (\n\t\t<Wrapper>\n\t\t\t{!isZeroState && (\n\t\t\t\t<Legend>\n\t\t\t\t\t{segments.map(({ label, color }, index) => (\n\t\t\t\t\t\t<LegendItem key={`${label}-${index}`}>\n\t\t\t\t\t\t\t<LegendDot color={color} />\n\t\t\t\t\t\t\t<BodySmall color={COLORS.content.secondary}>{label}</BodySmall>\n\t\t\t\t\t\t</LegendItem>\n\t\t\t\t\t))}\n\t\t\t\t</Legend>\n\t\t\t)}\n\n\t\t\t<ChartWrapper ref={wrapperRef}>\n\t\t\t\t<CanvasClip style={{ height: canvasSize / 2, overflow: 'hidden' }}>\n\t\t\t\t\t<Doughnut\n\t\t\t\t\t\tdata={chartData}\n\t\t\t\t\t\toptions={chartOptions}\n\t\t\t\t\t\twidth={canvasSize}\n\t\t\t\t\t\theight={canvasSize}\n\t\t\t\t\t/>\n\t\t\t\t</CanvasClip>\n\n\t\t\t\t{isZeroState ? (\n\t\t\t\t\t<ElementWrapper>\n\t\t\t\t\t\t<PercentageLabel>\n\t\t\t\t\t\t\t<TitleLarge color=\"#212121\">--</TitleLarge>\n\t\t\t\t\t\t</PercentageLabel>\n\t\t\t\t\t</ElementWrapper>\n\t\t\t\t) : (\n\t\t\t\t\tDominantIcon && (\n\t\t\t\t\t\t<ElementWrapper>\n\t\t\t\t\t\t\t<DominantIcon width={36} height={36} />\n\t\t\t\t\t\t\t<PercentageLabel>\n\t\t\t\t\t\t\t\t<TitleLarge color=\"#212121\">\n\t\t\t\t\t\t\t\t\t{dominantPct}% <span>{dominantSegment?.label}</span>\n\t\t\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t\t\t</PercentageLabel>\n\t\t\t\t\t\t</ElementWrapper>\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</ChartWrapper>\n\n\t\t\t{dominantSegment?.description && (\n\t\t\t\t<DescriptionText>\n\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t{dominantSegment?.description}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</DescriptionText>\n\t\t\t)}\n\t\t</Wrapper>\n\t);\n};\n"],"names":["ChartJS","ArcElement","Tooltip","doughnutThicknessInverse","HalfDoughnutChart","segments","wrapperRef","useRef","canvasSize","setCanvasSize","useState","segmentsRef","totalRef","useEffect","el","observer","entries","w","total","sum","s","dominantSegment","best","dominantPct","dataValues","bgColors","chartData","COLORS","chartOptions","items","idx","seg","val","item","isZeroState","DominantIcon","Wrapper","jsxDEV","Legend","label","color","index","LegendItem","LegendDot","this","BodySmall","ChartWrapper","CanvasClip","Doughnut","ElementWrapper","PercentageLabel","TitleLarge","DescriptionText","BodyCaption"],"mappings":"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"}

package/dist/cjs/components/icon-button/IconButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),l=require("react"),D=require("./IconButton.styled.js"),x=require("./theme.js"),B=require("../tooltips/Tooltip.js"),j=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},k=j(l),u=l.forwardRef(({id:o,iconButtonType:t="default",Icon:i,height:a=20,width:d=20,bordered:m,disabled:n,isSelected:r,style:b,svgStyle:f,iconColor:p,disabledTooltip:c,...y},N)=>{const I=x.getIconColor(t,n,r),s=e.jsxDEV(D.IconButton,{id:o,ref:N,style:b,iconButtonType:t,bordered:m,disabled:n,isSelected:r,...y,children:k.default.createElement(i,{height:a,width:d,color:p||I,style:{display:"block",...f??{}}})},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/icon-button/IconButton.tsx",lineNumber:33,columnNumber:4},void 0);return n&&c?e.jsxDEV(B.Tooltip,{body:c,children:e.jsxDEV("span",{style:{display:"inline-block",cursor:"not-allowed"},children:s},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/icon-button/IconButton.tsx",lineNumber:54,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/icon-button/IconButton.tsx",lineNumber:53,columnNumber:4},void 0):s});u.displayName="IconButton";exports.IconButton=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),s=require("react"),j=require("./IconButton.styled.js"),I=require("./theme.js"),k=require("../tooltips/Tooltip.js"),x=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},B=x(s),l=s.forwardRef(({id:o,iconButtonType:n="default",Icon:i,height:a=20,width:m=20,bordered:d,disabled:e,isSelected:c,style:b,svgStyle:f,iconColor:p,disabledTooltip:r,...y},h)=>{const N=I.getIconColor(n,e,c),u=t.jsxDEV(j.IconButton,{id:o,ref:h,style:b,iconButtonType:n,bordered:d,disabled:e,isSelected:c,...y,children:B.default.createElement(i,{height:a,width:m,color:p||N,style:{display:"block",...f??{}}})},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/icon-button/IconButton.tsx",lineNumber:33,columnNumber:4},void 0);return e&&r?t.jsxDEV(k.Tooltip,{body:r,children:t.jsxDEV("span",{style:{display:"inline-block",cursor:"not-allowed"},children:u},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/icon-button/IconButton.tsx",lineNumber:54,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/icon-button/IconButton.tsx",lineNumber:53,columnNumber:4},void 0):u});l.displayName="IconButton";exports.IconButton=l;
 //# sourceMappingURL=IconButton.js.map

package/dist/cjs/components/icon-button/IconButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.js","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { Tooltip } from '../tooltips';\nimport * as Sc from './IconButton.styled';\nimport { IconButtonProps } from './model';\nimport { getIconColor } from './theme';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\ticonButtonType = 'default',\n\t\t\tIcon,\n\t\t\theight = 20,\n\t\t\twidth = 20,\n\t\t\tbordered,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t\tstyle,\n\t\t\tsvgStyle,\n\t\t\ticonColor,\n\t\t\tdisabledTooltip,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconColorComputed = getIconColor(\n\t\t\ticonButtonType,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t);\n\t\tconst button = (\n\t\t\t<Sc.IconButton\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\ticonButtonType={iconButtonType}\n\t\t\t\tbordered={bordered}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{React.createElement(Icon, {\n\t\t\t\t\theight: height,\n\t\t\t\t\twidth: width,\n\t\t\t\t\tcolor: iconColor \|\| iconColorComputed,\n\t\t\t\t\tstyle: { display: 'block', ...(svgStyle ?? {}) },\n\t\t\t\t})}\n\t\t\t</Sc.IconButton>\n\t\t);\n\n\t\treturn disabled && disabledTooltip ? (\n\t\t\t<Tooltip body={disabledTooltip}>\n\t\t\t\t<span style={{ display: 'inline-block', cursor: 'not-allowed' }}>\n\t\t\t\t\t{button}\n\t\t\t\t</span>\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tbutton\n\t\t);\n\t},\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["IconButton","forwardRef","id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip","rest","ref","iconColorComputed","getIconColor","button","jsxDEV","Sc.IconButton","React","this","Tooltip"],"mappings":"2SAOaA,EAAaC,EAAAA,WACzB,CACC,CACC,GAAAC,EACA,eAAAC,EAAiB,UACjB,KAAAC,EACA,OAAAC,EAAS,GACT,MAAAC,EAAQ,GACR,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,aACzBd,EACAK,EACAC,CAAA,EAEKS,EACLC,EAAAA,OAACC,EAAAA,WAAA,CACA,GAAAlB,EACA,IAAAa,EACA,MAAAL,EACA,eAAAP,EACA,SAAAI,EACA,SAAAC,EACA,WAAAC,EACC,GAAGK,EAEH,SAAAO,EAAAA,QAAM,cAAcjB,EAAM,CAC1B,OAAAC,EACA,MAAAC,EACA,MAAOM,GAAaI,EACpB,MAAO,CAAE,QAAS,QAAS,GAAIL,GAAY,CAAA,CAAC,CAAG,CAC/C,CAAA,EAfF,OAAA,GAAA,CAAA,SAAA,~~gGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAW,MAAA,EAmBD,OAAOd,GAAYK,EAClBM,EAAAA,OAACI,EAAAA,QAAA,CAAQ,KAAMV,EACd,SAAAM,EAAAA,OAAC,OAAA,CAAK,MAAO,CAAE,QAAS,eAAgB,OAAQ,eAC9C,SAAAD,CAAA,EADF,OAAA,GAAA,CAAA,SAAA,~~gGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAI,MAEA,CAAA,EAHD,OAAA,GAAA,CAAA,SAAA,~~gGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAIA,EAEAJ,CAEF,CACD,EAEAlB,EAAW,YAAc"}
1	+ {"version":3,"file":"IconButton.js","sources":["../../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React from 'react';\nimport { forwardRef } from 'react';\nimport { Tooltip } from '../tooltips';\nimport * as Sc from './IconButton.styled';\nimport { IconButtonProps } from './model';\nimport { getIconColor } from './theme';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\ticonButtonType = 'default',\n\t\t\tIcon,\n\t\t\theight = 20,\n\t\t\twidth = 20,\n\t\t\tbordered,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t\tstyle,\n\t\t\tsvgStyle,\n\t\t\ticonColor,\n\t\t\tdisabledTooltip,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst iconColorComputed = getIconColor(\n\t\t\ticonButtonType,\n\t\t\tdisabled,\n\t\t\tisSelected,\n\t\t);\n\t\tconst button = (\n\t\t\t<Sc.IconButton\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={style}\n\t\t\t\ticonButtonType={iconButtonType}\n\t\t\t\tbordered={bordered}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisSelected={isSelected}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{React.createElement(Icon, {\n\t\t\t\t\theight: height,\n\t\t\t\t\twidth: width,\n\t\t\t\t\tcolor: iconColor \|\| iconColorComputed,\n\t\t\t\t\tstyle: { display: 'block', ...(svgStyle ?? {}) },\n\t\t\t\t})}\n\t\t\t</Sc.IconButton>\n\t\t);\n\n\t\treturn disabled && disabledTooltip ? (\n\t\t\t<Tooltip body={disabledTooltip}>\n\t\t\t\t<span style={{ display: 'inline-block', cursor: 'not-allowed' }}>\n\t\t\t\t\t{button}\n\t\t\t\t</span>\n\t\t\t</Tooltip>\n\t\t) : (\n\t\t\tbutton\n\t\t);\n\t},\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["IconButton","forwardRef","id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip","rest","ref","iconColorComputed","getIconColor","button","jsxDEV","Sc.IconButton","React","this","Tooltip"],"mappings":"2SAOaA,EAAaC,EAAAA,WACzB,CACC,CACC,GAAAC,EACA,eAAAC,EAAiB,UACjB,KAAAC,EACA,OAAAC,EAAS,GACT,MAAAC,EAAQ,GACR,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,aACzBd,EACAK,EACAC,CAAA,EAEKS,EACLC,EAAAA,OAACC,EAAAA,WAAA,CACA,GAAAlB,EACA,IAAAa,EACA,MAAAL,EACA,eAAAP,EACA,SAAAI,EACA,SAAAC,EACA,WAAAC,EACC,GAAGK,EAEH,SAAAO,EAAAA,QAAM,cAAcjB,EAAM,CAC1B,OAAAC,EACA,MAAAC,EACA,MAAOM,GAAaI,EACpB,MAAO,CAAE,QAAS,QAAS,GAAIL,GAAY,CAAA,CAAC,CAAG,CAC/C,CAAA,EAfF,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAW,MAAA,EAmBD,OAAOd,GAAYK,EAClBM,EAAAA,OAACI,EAAAA,QAAA,CAAQ,KAAMV,EACd,SAAAM,EAAAA,OAAC,OAAA,CAAK,MAAO,CAAE,QAAS,eAAgB,OAAQ,eAC9C,SAAAD,CAAA,EADF,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAEA,CAAA,EAHD,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAIA,EAEAJ,CAEF,CACD,EAEAlB,EAAW,YAAc"}

package/dist/cjs/components/image-cropper/BikImageCropper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-dev-runtime"),s=require("react"),x=require("react-image-crop"),D=require("../modals/styledModal.js"),v=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},I=v(x),u=t=>{const[c,h]=s.useState(!1),[l,p]=s.useState(void 0),[d,f]=s.useState({width:0,height:0}),[b,m]=s.useState(!1),C=async n=>{if(m(!0),t.src&&n?.width&&n?.height){const e=new Image;e.src=t.src;const a=e.naturalWidth/d.width,r=e.naturalHeight/d.height,o=await w(e,n,a,r);await t?.onCropComplete?.(o,c)}else await t?.onCropComplete?.(t.src,c);m(!1)},w=async(n,e,a,r)=>{const o=document.createElement("canvas");o.width=e.width,o.height=e.height;const g=o.getContext("2d");if(!g)throw new Error("Failed to get 2D context of canvas.");g.drawImage(n,e.x*a,e.y*r,e.width*a,e.height*r,0,0,e.width,e.height);try{return o.toDataURL("image/png")}catch{throw new Error("Failed to create blob for cropped image.")}};return i.jsxDEV(D.StyledModal,{open:!0,onClose:t.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:b,onClick:()=>{C(l)}},children:i.jsxDEV("div",{style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:i.jsxDEV("div",{children:i.jsxDEV(I.default,{crop:l,onChange:n=>{p(n)},circularCrop:!1,onDragStart:()=>{h(!0)},aspect:t.aspectRatio,children:i.jsxDEV("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:t.src,alt:"image cropper",onLoad:n=>{const e=n.target,a=e.width;f({width:a,height:e.height})}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:107,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:96,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:95,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:86,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:73,columnNumber:3},void 0)};exports.BikImageCropper=u;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-dev-runtime"),s=require("react"),y=require("react-image-crop"),k=require("../modals/styledModal.js"),j=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},v=j(y),g=t=>{const[c,u]=s.useState(!1),[m,p]=s.useState(void 0),[l,f]=s.useState({width:0,height:0}),[b,d]=s.useState(!1),C=async n=>{if(d(!0),t.src&&n?.width&&n?.height){const e=new Image;e.src=t.src;const a=e.naturalWidth/l.width,o=e.naturalHeight/l.height,i=await w(e,n,a,o);await t?.onCropComplete?.(i,c)}else await t?.onCropComplete?.(t.src,c);d(!1)},w=async(n,e,a,o)=>{const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const h=i.getContext("2d");if(!h)throw new Error("Failed to get 2D context of canvas.");h.drawImage(n,e.x*a,e.y*o,e.width*a,e.height*o,0,0,e.width,e.height);try{return i.toDataURL("image/png")}catch{throw new Error("Failed to create blob for cropped image.")}};return r.jsxDEV(k.StyledModal,{open:!0,onClose:t.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:b,onClick:()=>{C(m)}},children:r.jsxDEV("div",{style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:r.jsxDEV("div",{children:r.jsxDEV(v.default,{crop:m,onChange:n=>{p(n)},circularCrop:!1,onDragStart:()=>{u(!0)},aspect:t.aspectRatio,children:r.jsxDEV("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:t.src,alt:"image cropper",onLoad:n=>{const e=n.target,a=e.width;f({width:a,height:e.height})}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:107,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:96,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:95,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:86,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImageCropper.tsx",lineNumber:73,columnNumber:3},void 0)};exports.BikImageCropper=g;exports.default=g;
 //# sourceMappingURL=BikImageCropper.js.map

package/dist/cjs/components/image-cropper/BikImageCropper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsxDEV","StyledModal","ReactCrop","c","e","imgElement","imgWidth","this"],"mappings":"2SAMaA,EAAmBC,GAAgC,CAC/D,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAA2B,MAAS,EACtD,CAACG,EAAiBC,CAAkB,EAAIJ,EAAAA,SAG3C,CAAE,MAAO,EAAG,OAAQ,EAAG,EACpB,CAACK,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAE1CO,EAAqB,MAAOC,GAAqB,CAEtD,GADAF,EAAa,EAAI,EACbT,EAAM,KAAOW,GAAY,OAASA,GAAY,OAAQ,CACzD,MAAMC,EAAQ,IAAI,MAClBA,EAAM,IAAMZ,EAAM,IAElB,MAAMa,EAASD,EAAM,aAAeN,EAAgB,MAC9CQ,EAASF,EAAM,cAAgBN,EAAgB,OAC/CS,EAAmB,MAAMC,EAC9BJ,EACAD,EACAE,EACAC,CAAA,EAED,MAAMd,GAAO,iBAAiBe,EAAkBd,CAAS,CAC1D,MACC,MAAMD,GAAO,iBAAiBA,EAAM,IAAKC,CAAS,EAEnDQ,EAAa,EAAK,CACnB,EAEMO,EAAkB,MACvBJ,EACAR,EACAS,EACAC,IACqB,CACrB,MAAMG,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,MAAQb,EAAK,MACpBa,EAAO,OAASb,EAAK,OACrB,MAAMc,EAAMD,EAAO,WAAW,IAAI,EAElC,GAAI,CAACC,EACJ,MAAM,IAAI,MAAM,qCAAqC,EAGtDA,EAAI,UACHN,EACAR,EAAK,EAAIS,EACTT,EAAK,EAAIU,EACTV,EAAK,MAAQS,EACbT,EAAK,OAASU,EACd,EACA,EACAV,EAAK,MACLA,EAAK,MAAA,EAGN,GAAI,CAEH,OADqBa,EAAO,UAAU,WAAW,CAElD,MAAgB,CACf,MAAM,IAAI,MAAM,0CAA0C,CAC3D,CACD,EAEA,OACCE,EAAAA,OAACC,EAAAA,YAAA,CACA,KAAM,GACN,QAASpB,EAAM,SACf,uBAAwB,CAAE,MAAO,IAAK,UAAW,GAAA,EACjD,aAAc,aACd,cAAe,CACd,WAAY,OACZ,UAAAQ,EACA,QAAS,IAAM,CACdE,EAAmBN,CAAK,CACzB,CAAA,EAGD,SAAAe,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,MAAO,OACP,OAAQ,OACR,QAAS,OACT,eAAgB,SAChB,WAAY,QAAA,EAGb,kBAAC,MAAA,CACA,SAAAA,EAAAA,OAACE,EAAAA,QAAA,CACA,KAAAjB,EACA,SAAWkB,GAAM,CAChBjB,EAAQiB,CAAC,CACV,EACA,aAAc,GACd,YAAa,IAAM,CAClBpB,EAAa,EAAI,CAClB,EACA,OAAQF,EAAM,YAEd,SAAAmB,EAAAA,OAAC,MAAA,CACA,MAAO,CAAE,SAAU,IAAK,UAAW,IAAK,UAAW,SAAA,EACnD,IAAKnB,EAAM,IACX,IAAK,gBACL,OAASuB,GAAM,CACd,MAAMC,EAAaD,EAAE,OACfE,EAAWD,EAAW,MAC5BjB,EAAmB,CAClB,MAAOkB,EACP,OAAQD,EAAW,MAAA,CACnB,CACF,CAAA,EAXD,OAAA,GAAA,CAAA,SAAA,~~uGAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAE,MAAA,CAYA,EAvBD,OAAA,GAAA,CAAA,SAAA,~~uGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAwBA,EAzBD,OAAA,GAAA,CAAA,SAAA,~~uGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MA0BA,CAAA,EAnCD,OAAA,GAAA,CAAA,SAAA,~~uGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAoCA,EAjDD,OAAA,GAAA,CAAA,SAAA,~~uGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAoDF"}
1	+ {"version":3,"file":"BikImageCropper.js","sources":["../../../../src/components/image-cropper/BikImageCropper.tsx"],"sourcesContent":["import { useState } from 'react';\nimport ReactCrop, { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\nimport { StyledModal } from '@src/components/modals';\nimport { BikImageCropperProps } from './BikImageCropper.model';\n\nexport const BikImageCropper = (props: BikImageCropperProps) => {\n\tconst [didChange, setDidChange] = useState(false);\n\tconst [crop, setCrop] = useState<Crop \| undefined>(undefined);\n\tconst [imageDimensions, setImageDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t}>({ width: 0, height: 0 });\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tconst handleCropComplete = async (cropResult: Crop) => {\n\t\tsetIsLoading(true);\n\t\tif (props.src && cropResult?.width && cropResult?.height) {\n\t\t\tconst image = new Image();\n\t\t\timage.src = props.src;\n\n\t\t\tconst scaleX = image.naturalWidth / imageDimensions.width;\n\t\t\tconst scaleY = image.naturalHeight / imageDimensions.height;\n\t\t\tconst croppedImageData = await getCroppedImage(\n\t\t\t\timage,\n\t\t\t\tcropResult,\n\t\t\t\tscaleX,\n\t\t\t\tscaleY,\n\t\t\t);\n\t\t\tawait props?.onCropComplete?.(croppedImageData, didChange);\n\t\t} else {\n\t\t\tawait props?.onCropComplete?.(props.src, didChange);\n\t\t}\n\t\tsetIsLoading(false);\n\t};\n\n\tconst getCroppedImage = async (\n\t\timage: HTMLImageElement,\n\t\tcrop: Crop,\n\t\tscaleX: number,\n\t\tscaleY: number,\n\t): Promise<string> => {\n\t\tconst canvas = document.createElement('canvas');\n\t\tcanvas.width = crop.width;\n\t\tcanvas.height = crop.height;\n\t\tconst ctx = canvas.getContext('2d');\n\n\t\tif (!ctx) {\n\t\t\tthrow new Error('Failed to get 2D context of canvas.');\n\t\t}\n\n\t\tctx.drawImage(\n\t\t\timage,\n\t\t\tcrop.x * scaleX,\n\t\t\tcrop.y * scaleY,\n\t\t\tcrop.width * scaleX,\n\t\t\tcrop.height * scaleY,\n\t\t\t0,\n\t\t\t0,\n\t\t\tcrop.width,\n\t\t\tcrop.height,\n\t\t);\n\n\t\ttry {\n\t\t\tconst base64String = canvas.toDataURL('image/png');\n\t\t\treturn base64String;\n\t\t} catch (error) {\n\t\t\tthrow new Error('Failed to create blob for cropped image.');\n\t\t}\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={true}\n\t\t\tonClose={props.onCancel}\n\t\t\tcentralContainerStyles={{ width: 700, maxHeight: 700 }}\n\t\t\theadingTitle={'Crop Image'}\n\t\t\tprimaryButton={{\n\t\t\t\tbuttonText: 'Save',\n\t\t\t\tisLoading: isLoading,\n\t\t\t\tonClick: () => {\n\t\t\t\t\thandleCropComplete(crop!);\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<ReactCrop\n\t\t\t\t\t\tcrop={crop}\n\t\t\t\t\t\tonChange={(c) => {\n\t\t\t\t\t\t\tsetCrop(c);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tcircularCrop={false}\n\t\t\t\t\t\tonDragStart={() => {\n\t\t\t\t\t\t\tsetDidChange(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\taspect={props.aspectRatio}\n\t\t\t\t\t>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tstyle={{ maxWidth: 700, maxHeight: 550, objectFit: 'contain' }}\n\t\t\t\t\t\t\tsrc={props.src}\n\t\t\t\t\t\t\talt={'image cropper'}\n\t\t\t\t\t\t\tonLoad={(e) => {\n\t\t\t\t\t\t\t\tconst imgElement = e.target as HTMLImageElement;\n\t\t\t\t\t\t\t\tconst imgWidth = imgElement.width;\n\t\t\t\t\t\t\t\tsetImageDimensions({\n\t\t\t\t\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\t\t\t\t\theight: imgElement.height,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ReactCrop>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</StyledModal>\n\t);\n};\n\nexport default BikImageCropper;\n"],"names":["BikImageCropper","props","didChange","setDidChange","useState","crop","setCrop","imageDimensions","setImageDimensions","isLoading","setIsLoading","handleCropComplete","cropResult","image","scaleX","scaleY","croppedImageData","getCroppedImage","canvas","ctx","jsxDEV","StyledModal","ReactCrop","c","e","imgElement","imgWidth","this"],"mappings":"2SAMaA,EAAmBC,GAAgC,CAC/D,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAK,EAC1C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAA2B,MAAS,EACtD,CAACG,EAAiBC,CAAkB,EAAIJ,EAAAA,SAG3C,CAAE,MAAO,EAAG,OAAQ,EAAG,EACpB,CAACK,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAE1CO,EAAqB,MAAOC,GAAqB,CAEtD,GADAF,EAAa,EAAI,EACbT,EAAM,KAAOW,GAAY,OAASA,GAAY,OAAQ,CACzD,MAAMC,EAAQ,IAAI,MAClBA,EAAM,IAAMZ,EAAM,IAElB,MAAMa,EAASD,EAAM,aAAeN,EAAgB,MAC9CQ,EAASF,EAAM,cAAgBN,EAAgB,OAC/CS,EAAmB,MAAMC,EAC9BJ,EACAD,EACAE,EACAC,CAAA,EAED,MAAMd,GAAO,iBAAiBe,EAAkBd,CAAS,CAC1D,MACC,MAAMD,GAAO,iBAAiBA,EAAM,IAAKC,CAAS,EAEnDQ,EAAa,EAAK,CACnB,EAEMO,EAAkB,MACvBJ,EACAR,EACAS,EACAC,IACqB,CACrB,MAAMG,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,MAAQb,EAAK,MACpBa,EAAO,OAASb,EAAK,OACrB,MAAMc,EAAMD,EAAO,WAAW,IAAI,EAElC,GAAI,CAACC,EACJ,MAAM,IAAI,MAAM,qCAAqC,EAGtDA,EAAI,UACHN,EACAR,EAAK,EAAIS,EACTT,EAAK,EAAIU,EACTV,EAAK,MAAQS,EACbT,EAAK,OAASU,EACd,EACA,EACAV,EAAK,MACLA,EAAK,MAAA,EAGN,GAAI,CAEH,OADqBa,EAAO,UAAU,WAAW,CAElD,MAAgB,CACf,MAAM,IAAI,MAAM,0CAA0C,CAC3D,CACD,EAEA,OACCE,EAAAA,OAACC,EAAAA,YAAA,CACA,KAAM,GACN,QAASpB,EAAM,SACf,uBAAwB,CAAE,MAAO,IAAK,UAAW,GAAA,EACjD,aAAc,aACd,cAAe,CACd,WAAY,OACZ,UAAAQ,EACA,QAAS,IAAM,CACdE,EAAmBN,CAAK,CACzB,CAAA,EAGD,SAAAe,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,MAAO,OACP,OAAQ,OACR,QAAS,OACT,eAAgB,SAChB,WAAY,QAAA,EAGb,kBAAC,MAAA,CACA,SAAAA,EAAAA,OAACE,EAAAA,QAAA,CACA,KAAAjB,EACA,SAAWkB,GAAM,CAChBjB,EAAQiB,CAAC,CACV,EACA,aAAc,GACd,YAAa,IAAM,CAClBpB,EAAa,EAAI,CAClB,EACA,OAAQF,EAAM,YAEd,SAAAmB,EAAAA,OAAC,MAAA,CACA,MAAO,CAAE,SAAU,IAAK,UAAW,IAAK,UAAW,SAAA,EACnD,IAAKnB,EAAM,IACX,IAAK,gBACL,OAASuB,GAAM,CACd,MAAMC,EAAaD,EAAE,OACfE,EAAWD,EAAW,MAC5BjB,EAAmB,CAClB,MAAOkB,EACP,OAAQD,EAAW,MAAA,CACnB,CACF,CAAA,EAXD,OAAA,GAAA,CAAA,SAAA,wGAAA,WAAA,IAAA,aAAA,CAAA,EAAAE,MAAA,CAYA,EAvBD,OAAA,GAAA,CAAA,SAAA,wGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAwBA,EAzBD,OAAA,GAAA,CAAA,SAAA,wGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MA0BA,CAAA,EAnCD,OAAA,GAAA,CAAA,SAAA,wGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAoCA,EAjDD,OAAA,GAAA,CAAA,SAAA,wGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAoDF"}

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-dev-runtime"),l=require("react"),C=require("../BikImageCropper.js"),k=require("../../states-modal/StateModalComponent.js"),I=require("../../states/StateComponent.js"),N=require("../../image-compress/ImageCompress.js"),S=({cropOptions:y,fileTitle:c,compressionOptions:h,currentImage:B,options:r,onFinish:u,onCancel:m,fileUploadOptions:s,loadingStateOptions:P})=>{const d=l.useRef(null),[p,a]=l.useState(),[x,g]=l.useState(B),[D,t]=l.useState(!1);l.useEffect(()=>{r.upload?(a("upload"),setTimeout(()=>{w()},500)):r.crop?a("crop"):r.compress?a("compress"):r.uploadToFirestorage?a("cloud-upload"):t(!0)},[r.upload,r.crop,r.compress,r.uploadToFirestorage]);const f=l.useCallback((e,o)=>{if(!r.uploadToFirestorage){u(e,o),t(!0);return}a("cloud-upload"),s&&s.uploadFile(o,s.path).then(n=>{u(e,o,n),t(!0)}).catch(n=>{console.log("starting err process with ")})},[]),b=e=>{e||m();const o=N.ImageService.base64ToImage(e);r.compress?(a("compress"),N.ImageService.compressImage(o,h).then(n=>{if(!n){t(!0),m();return}f(n.base64,n.compressedFile)})):f(e,o)},v=e=>{r.crop?a("crop"):b(e)},w=()=>{d.current.click()},E=e=>{const o=e.target.files[0],n=new FileReader;n.onload=()=>{g({src:n.result}),v(n.result)},o&&n.readAsDataURL(o)};return D?i.jsxDEV(i.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:156,columnNumber:10},void 0):p==="cloud-upload"?!s||s.success?i.jsxDEV(i.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:161,columnNumber:11},void 0):s.error?i.jsxDEV("div",{children:i.jsxDEV(k.StateModalComponent,{states:I.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{t(!0),m()}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:166,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:165,columnNumber:5},void 0):i.jsxDEV("div",{children:i.jsxDEV(k.StateModalComponent,{headerImage:P?.headerImage,states:I.StateInterface.LOADING,heading:`Uploading your ${c||"photo"}`,subline:`Please wait while we upload your ${c||"photo"}`,isButtonEnabled:!1,width:300},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:182,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:181,columnNumber:4},void 0):i.jsxDEV(i.Fragment,{children:[r.upload&&i.jsxDEV("input",{ref:d,type:"file",accept:"image/*",style:{display:"none"},onChange:E},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:197,columnNumber:5},void 0),p==="crop"&&i.jsxDEV(C.BikImageCropper,{src:x.src,onCropComplete:e=>{g({src:e}),b(e)},aspectRatio:y.aspectRatio,onCancel:m},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:206,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:195,columnNumber:3},void 0)};exports.BikImagePipeline=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-dev-runtime"),t=require("react"),S=require("../BikImageCropper.js"),k=require("../../states-modal/StateModalComponent.js"),h=require("../../states/StateComponent.js"),I=require("../../image-compress/ImageCompress.js"),D=({cropOptions:P,fileTitle:m,compressionOptions:N,currentImage:B,options:r,onFinish:u,onCancel:l,fileUploadOptions:s,loadingStateOptions:x})=>{const p=t.useRef(null),[d,o]=t.useState(),[j,g]=t.useState(B),[v,c]=t.useState(!1);t.useEffect(()=>{r.upload?(o("upload"),setTimeout(()=>{E()},500)):r.crop?o("crop"):r.compress?o("compress"):r.uploadToFirestorage?o("cloud-upload"):c(!0)},[r.upload,r.crop,r.compress,r.uploadToFirestorage]);const f=t.useCallback((e,a)=>{if(!r.uploadToFirestorage){u(e,a),c(!0);return}o("cloud-upload"),s&&s.uploadFile(a,s.path).then(n=>{u(e,a,n),c(!0)}).catch(n=>{console.log("starting err process with ")})},[]),b=e=>{e||l();const a=I.ImageService.base64ToImage(e);r.compress?(o("compress"),I.ImageService.compressImage(a,N).then(n=>{if(!n){c(!0),l();return}f(n.base64,n.compressedFile)})):f(e,a)},y=e=>{r.crop?o("crop"):b(e)},E=()=>{p.current.click()},C=e=>{const a=e.target.files[0],n=new FileReader;n.onload=()=>{g({src:n.result}),y(n.result)},a&&n.readAsDataURL(a)};return v?i.jsxDEV(i.Fragment,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:156,columnNumber:10},void 0):d==="cloud-upload"?!s||s.success?i.jsxDEV(i.Fragment,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:161,columnNumber:11},void 0):s.error?i.jsxDEV("div",{children:i.jsxDEV(k.StateModalComponent,{states:h.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{c(!0),l()}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:166,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:165,columnNumber:5},void 0):i.jsxDEV("div",{children:i.jsxDEV(k.StateModalComponent,{headerImage:x?.headerImage,states:h.StateInterface.LOADING,heading:`Uploading your ${m||"photo"}`,subline:`Please wait while we upload your ${m||"photo"}`,isButtonEnabled:!1,width:300},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:182,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:181,columnNumber:4},void 0):i.jsxDEV(i.Fragment,{children:[r.upload&&i.jsxDEV("input",{ref:p,type:"file",accept:"image/*",style:{display:"none"},onChange:C},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:197,columnNumber:5},void 0),d==="crop"&&i.jsxDEV(S.BikImageCropper,{src:j.src,onCropComplete:e=>{g({src:e}),b(e)},aspectRatio:P.aspectRatio,onCancel:l},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:206,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx",lineNumber:195,columnNumber:3},void 0)};exports.BikImagePipeline=D;
 //# sourceMappingURL=BikImagePipeline.js.map

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BikImagePipeline.js","sources":["../../../../../src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n\tCompressImageOptions,\n\tImageService,\n} from '@src/components/image-compress';\nimport { StateInterface } from '@src/components/states';\nimport { StateModalComponent } from '@src/components/states-modal';\nimport BikImageCropper from '../BikImageCropper';\nimport { BikImageCropperProps } from '../BikImageCropper.model';\n\n/*\n Todos\n * \t- Add option to pass https url in the src / edit an image\n /\n\nexport interface BikImagePipelineProps {\n\tfileTitle?: string;\n\tcropOptions?: Partial<BikImageCropperProps>;\n\tcompressionOptions?: CompressImageOptions;\n\tcurrentImage: {\n\t\tsrc?: string;\n\t};\n\toptions: {\n\t\tupload: boolean;\n\t\tcrop?: boolean;\n\t\tcompress?: boolean;\n\t\tuploadToFirestorage?: boolean;\n\t};\n\tonCancel: () => void;\n\tonFinish: (base64String: string, file?: File, url?: string) => void;\n\tfileUploadOptions?: {\n\t\tpath: string;\n\t\tuploadProgress: number;\n\t\tuploadFile: (file: File, path: string) => Promise<string>;\n\t\terror?: string;\n\t\tsuccess?: boolean;\n\t};\n\tloadingStateOptions?: {\n\t\theaderImage?: string;\n\t};\n}\n\ntype PIPELINE_STEPS = 'upload' \| 'crop' \| 'compress' \| 'cloud-upload';\n\nexport const BikImagePipeline = ({\n\tcropOptions,\n\tfileTitle,\n\tcompressionOptions,\n\tcurrentImage,\n\toptions,\n\tonFinish,\n\tonCancel,\n\tfileUploadOptions,\n\tloadingStateOptions,\n}: BikImagePipelineProps) => {\n\tconst fileInputRef = useRef<HTMLInputElement>(null);\n\tconst [currentStep, setCurrentStep] = useState<PIPELINE_STEPS>();\n\tconst [currentLocalImage, setCurrentLocalImage] = useState(currentImage);\n\tconst [finished, setFinished] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (options.upload) {\n\t\t\tsetCurrentStep('upload');\n\t\t\tsetTimeout(() => {\n\t\t\t\thandleDivClick();\n\t\t\t}, 500);\n\t\t} else if (options.crop) {\n\t\t\tsetCurrentStep('crop');\n\t\t} else if (options.compress) {\n\t\t\tsetCurrentStep('compress');\n\t\t} else if (options.uploadToFirestorage) {\n\t\t\tsetCurrentStep('cloud-upload');\n\t\t} else {\n\t\t\tsetFinished(true);\n\t\t}\n\t}, [\n\t\toptions.upload,\n\t\toptions.crop,\n\t\toptions.compress,\n\t\toptions.uploadToFirestorage,\n\t]);\n\n\tconst moveToUploadToFirestoreElseNext = useCallback(\n\t\t(base64: string, file: File) => {\n\t\t\tif (!options.uploadToFirestorage) {\n\t\t\t\tonFinish(base64, file);\n\t\t\t\tsetFinished(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetCurrentStep('cloud-upload');\n\t\t\tif (!fileUploadOptions) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tfileUploadOptions\n\t\t\t\t.uploadFile(file, fileUploadOptions.path)\n\t\t\t\t.then((url) => {\n\t\t\t\t\tonFinish(base64, file, url);\n\t\t\t\t\tsetFinished(true);\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.log('starting err process with ');\n\t\t\t\t});\n\t\t},\n\t\t[],\n\t);\n\n\tconst moveToCompressElseNext = (croppedImage: string) => {\n\t\tif (!croppedImage) {\n\t\t\tonCancel();\n\t\t}\n\t\tconst file = ImageService.base64ToImage(croppedImage);\n\t\tif (options.compress) {\n\t\t\tsetCurrentStep('compress');\n\t\t\tImageService.compressImage(file, compressionOptions).then((output) => {\n\t\t\t\tif (!output) {\n\t\t\t\t\tsetFinished(true);\n\t\t\t\t\tonCancel();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tmoveToUploadToFirestoreElseNext(output.base64, output.compressedFile);\n\t\t\t});\n\t\t} else {\n\t\t\tmoveToUploadToFirestoreElseNext(croppedImage, file);\n\t\t}\n\t};\n\n\tconst moveToCropElseNext = (croppedImage: string) => {\n\t\tif (options.crop) {\n\t\t\tsetCurrentStep('crop');\n\t\t} else {\n\t\t\tmoveToCompressElseNext(croppedImage);\n\t\t}\n\t};\n\n\tconst handleDivClick = () => {\n\t\tfileInputRef.current!.click();\n\t};\n\n\tconst handleImageChange = (event) => {\n\t\tconst file = event.target.files[0];\n\t\tconst reader = new FileReader();\n\n\t\treader.onload = () => {\n\t\t\tsetCurrentLocalImage({\n\t\t\t\tsrc: reader.result as string,\n\t\t\t});\n\t\t\tmoveToCropElseNext(reader.result as string);\n\t\t};\n\n\t\tif (file) {\n\t\t\treader.readAsDataURL(file);\n\t\t}\n\t};\n\n\tif (finished) {\n\t\treturn <></>;\n\t}\n\n\tif (currentStep === 'cloud-upload') {\n\t\tif (!fileUploadOptions \|\| fileUploadOptions.success) {\n\t\t\treturn <></>;\n\t\t}\n\t\tif (fileUploadOptions.error) {\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t<StateModalComponent\n\t\t\t\t\t\tstates={StateInterface.ERROR}\n\t\t\t\t\t\theading={'Error while uploading'}\n\t\t\t\t\t\tsubline={'Please check your image and try again'}\n\t\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\tsetFinished(true);\n\t\t\t\t\t\t\tonCancel();\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<StateModalComponent\n\t\t\t\t\theaderImage={loadingStateOptions?.headerImage}\n\t\t\t\t\tstates={StateInterface.LOADING}\n\t\t\t\t\theading={`Uploading your ${fileTitle \|\| 'photo'}`}\n\t\t\t\t\tsubline={`Please wait while we upload your ${fileTitle \|\| 'photo'}`}\n\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\twidth={300}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{options.upload && (\n\t\t\t\t<input\n\t\t\t\t\tref={fileInputRef}\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\taccept=\"image/\"\n\t\t\t\t\tstyle={{ display: 'none' }}\n\t\t\t\t\tonChange={handleImageChange}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{currentStep === 'crop' && (\n\t\t\t\t<BikImageCropper\n\t\t\t\t\tsrc={currentLocalImage.src!}\n\t\t\t\t\tonCropComplete={(croppedImage) => {\n\t\t\t\t\t\tsetCurrentLocalImage({\n\t\t\t\t\t\t\tsrc: croppedImage,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tmoveToCompressElseNext(croppedImage);\n\t\t\t\t\t}}\n\t\t\t\t\taspectRatio={cropOptions!.aspectRatio!}\n\t\t\t\t\tonCancel={onCancel}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["BikImagePipeline","cropOptions","fileTitle","compressionOptions","currentImage","options","onFinish","onCancel","fileUploadOptions","loadingStateOptions","fileInputRef","useRef","currentStep","setCurrentStep","useState","currentLocalImage","setCurrentLocalImage","finished","setFinished","useEffect","handleDivClick","moveToUploadToFirestoreElseNext","useCallback","base64","file","url","error","moveToCompressElseNext","croppedImage","ImageService","output","moveToCropElseNext","handleImageChange","event","reader","jsxDEV","Fragment","this","StateModalComponent","StateInterface","BikImageCropper"],"mappings":"qUA4CaA,EAAmB,CAAC,CAChC,YAAAC,EACA,UAAAC,EACA,mBAAAC,EACA,aAAAC,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,oBAAAC,CACD,IAA6B,CAC5B,MAAMC,EAAeC,EAAAA,OAAyB,IAAI,EAC5C,CAACC,EAAaC,CAAc,EAAIC,WAAA,EAChC,CAACC,EAAmBC,CAAoB,EAAIF,EAAAA,SAASV,CAAY,EACjE,CAACa,EAAUC,CAAW,EAAIJ,EAAAA,SAAS,EAAK,EAE9CK,EAAAA,UAAU,IAAM,CACXd,EAAQ,QACXQ,EAAe,QAAQ,EACvB,WAAW,IAAM,CAChBO,EAAA,CACD,EAAG,GAAG,GACIf,EAAQ,KAClBQ,EAAe,MAAM,EACXR,EAAQ,SAClBQ,EAAe,UAAU,EACfR,EAAQ,oBAClBQ,EAAe,cAAc,EAE7BK,EAAY,EAAI,CAElB,EAAG,CACFb,EAAQ,OACRA,EAAQ,KACRA,EAAQ,SACRA,EAAQ,mBAAA,CACR,EAED,MAAMgB,EAAkCC,EAAAA,YACvC,CAACC,EAAgBC,IAAe,CAC/B,GAAI,CAACnB,EAAQ,oBAAqB,CACjCC,EAASiB,EAAQC,CAAI,EACrBN,EAAY,EAAI,EAChB,MACD,CACAL,EAAe,cAAc,EACxBL,GAGLA,EACE,WAAWgB,EAAMhB,EAAkB,IAAI,EACvC,KAAMiB,GAAQ,CACdnB,EAASiB,EAAQC,EAAMC,CAAG,EAC1BP,EAAY,EAAI,CACjB,CAAC,EACA,MAAOQ,GAAU,CACjB,QAAQ,IAAI,4BAA4B,CACzC,CAAC,CACH,EACA,CAAA,CAAC,EAGIC,EAA0BC,GAAyB,CACnDA,GACJrB,EAAA,EAED,MAAMiB,EAAOK,EAAAA,aAAa,cAAcD,CAAY,EAChDvB,EAAQ,UACXQ,EAAe,UAAU,EACzBgB,EAAAA,aAAa,cAAcL,EAAMrB,CAAkB,EAAE,KAAM2B,GAAW,CACrE,GAAI,CAACA,EAAQ,CACZZ,EAAY,EAAI,EAChBX,EAAA,EACA,MACD,CACAc,EAAgCS,EAAO,OAAQA,EAAO,cAAc,CACrE,CAAC,GAEDT,EAAgCO,EAAcJ,CAAI,CAEpD,EAEMO,EAAsBH,GAAyB,CAChDvB,EAAQ,KACXQ,EAAe,MAAM,EAErBc,EAAuBC,CAAY,CAErC,EAEMR,EAAiB,IAAM,CAC5BV,EAAa,QAAS,MAAA,CACvB,EAEMsB,EAAqBC,GAAU,CACpC,MAAMT,EAAOS,EAAM,OAAO,MAAM,CAAC,EAC3BC,EAAS,IAAI,WAEnBA,EAAO,OAAS,IAAM,CACrBlB,EAAqB,CACpB,IAAKkB,EAAO,MAAA,CACZ,EACDH,EAAmBG,EAAO,MAAgB,CAC3C,EAEIV,GACHU,EAAO,cAAcV,CAAI,CAE3B,EAEA,OAAIP,EACIkB,EAAAA,OAAAC,EAAAA,SAAA,GAAA,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,EAAA,EAAAC,MAAE,EAGNzB,IAAgB,eACf,CAACJ,GAAqBA,EAAkB,QACpC2B,EAAAA,OAAAC,EAAAA,SAAA,GAAA,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,EAAA,EAAAC,MAAE,EAEN7B,EAAkB,eAEnB,MAAA,CACA,SAAA2B,EAAAA,OAACG,EAAAA,oBAAA,CACA,OAAQC,EAAAA,eAAe,MACvB,QAAS,wBACT,QAAS,wCACT,gBAAiB,GACjB,MAAO,IACP,QAAS,IAAM,CACdrB,EAAY,EAAI,EAChBX,EAAA,CACD,CAAA,EATD,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAA8B,MAAA,CAUA,EAXD,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAYA,WAIA,MAAA,CACA,SAAAF,EAAAA,OAACG,EAAAA,oBAAA,CACA,YAAa7B,GAAqB,YAClC,OAAQ8B,EAAAA,eAAe,QACvB,QAAS,kBAAkBrC,GAAa,OAAO,GAC/C,QAAS,oCAAoCA,GAAa,OAAO,GACjE,gBAAiB,GACjB,MAAO,GAAA,EANR,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAmC,MAAA,CAOA,EARD,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MASA,EAKDF,EAAAA,OAAAC,WAAA,CACE,SAAA,CAAA/B,EAAQ,QACR8B,EAAAA,OAAC,QAAA,CACA,IAAKzB,EACL,KAAK,OACL,OAAO,UACP,MAAO,CAAE,QAAS,MAAA,EAClB,SAAUsB,CAAA,EALX,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAK,MAAA,EAQAzB,IAAgB,QAChBuB,EAAAA,OAACK,EAAAA,gBAAA,CACA,IAAKzB,EAAkB,IACvB,eAAiBa,GAAiB,CACjCZ,EAAqB,CACpB,IAAKY,CAAA,CACL,EACDD,EAAuBC,CAAY,CACpC,EACA,YAAa3B,EAAa,YAC1B,SAAAM,CAAA,EATD,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAA8B,MAAA,CAUA,CAAA,EArBF,OAAA,GAAA,CAAA,SAAA,~~yHAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAuBA,CAEF"}
1	+ {"version":3,"file":"BikImagePipeline.js","sources":["../../../../../src/components/image-cropper/BikImagePipeline/BikImagePipeline.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n\tCompressImageOptions,\n\tImageService,\n} from '@src/components/image-compress';\nimport { StateInterface } from '@src/components/states';\nimport { StateModalComponent } from '@src/components/states-modal';\nimport BikImageCropper from '../BikImageCropper';\nimport { BikImageCropperProps } from '../BikImageCropper.model';\n\n/*\n Todos\n * \t- Add option to pass https url in the src / edit an image\n /\n\nexport interface BikImagePipelineProps {\n\tfileTitle?: string;\n\tcropOptions?: Partial<BikImageCropperProps>;\n\tcompressionOptions?: CompressImageOptions;\n\tcurrentImage: {\n\t\tsrc?: string;\n\t};\n\toptions: {\n\t\tupload: boolean;\n\t\tcrop?: boolean;\n\t\tcompress?: boolean;\n\t\tuploadToFirestorage?: boolean;\n\t};\n\tonCancel: () => void;\n\tonFinish: (base64String: string, file?: File, url?: string) => void;\n\tfileUploadOptions?: {\n\t\tpath: string;\n\t\tuploadProgress: number;\n\t\tuploadFile: (file: File, path: string) => Promise<string>;\n\t\terror?: string;\n\t\tsuccess?: boolean;\n\t};\n\tloadingStateOptions?: {\n\t\theaderImage?: string;\n\t};\n}\n\ntype PIPELINE_STEPS = 'upload' \| 'crop' \| 'compress' \| 'cloud-upload';\n\nexport const BikImagePipeline = ({\n\tcropOptions,\n\tfileTitle,\n\tcompressionOptions,\n\tcurrentImage,\n\toptions,\n\tonFinish,\n\tonCancel,\n\tfileUploadOptions,\n\tloadingStateOptions,\n}: BikImagePipelineProps) => {\n\tconst fileInputRef = useRef<HTMLInputElement>(null);\n\tconst [currentStep, setCurrentStep] = useState<PIPELINE_STEPS>();\n\tconst [currentLocalImage, setCurrentLocalImage] = useState(currentImage);\n\tconst [finished, setFinished] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (options.upload) {\n\t\t\tsetCurrentStep('upload');\n\t\t\tsetTimeout(() => {\n\t\t\t\thandleDivClick();\n\t\t\t}, 500);\n\t\t} else if (options.crop) {\n\t\t\tsetCurrentStep('crop');\n\t\t} else if (options.compress) {\n\t\t\tsetCurrentStep('compress');\n\t\t} else if (options.uploadToFirestorage) {\n\t\t\tsetCurrentStep('cloud-upload');\n\t\t} else {\n\t\t\tsetFinished(true);\n\t\t}\n\t}, [\n\t\toptions.upload,\n\t\toptions.crop,\n\t\toptions.compress,\n\t\toptions.uploadToFirestorage,\n\t]);\n\n\tconst moveToUploadToFirestoreElseNext = useCallback(\n\t\t(base64: string, file: File) => {\n\t\t\tif (!options.uploadToFirestorage) {\n\t\t\t\tonFinish(base64, file);\n\t\t\t\tsetFinished(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetCurrentStep('cloud-upload');\n\t\t\tif (!fileUploadOptions) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tfileUploadOptions\n\t\t\t\t.uploadFile(file, fileUploadOptions.path)\n\t\t\t\t.then((url) => {\n\t\t\t\t\tonFinish(base64, file, url);\n\t\t\t\t\tsetFinished(true);\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tconsole.log('starting err process with ');\n\t\t\t\t});\n\t\t},\n\t\t[],\n\t);\n\n\tconst moveToCompressElseNext = (croppedImage: string) => {\n\t\tif (!croppedImage) {\n\t\t\tonCancel();\n\t\t}\n\t\tconst file = ImageService.base64ToImage(croppedImage);\n\t\tif (options.compress) {\n\t\t\tsetCurrentStep('compress');\n\t\t\tImageService.compressImage(file, compressionOptions).then((output) => {\n\t\t\t\tif (!output) {\n\t\t\t\t\tsetFinished(true);\n\t\t\t\t\tonCancel();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tmoveToUploadToFirestoreElseNext(output.base64, output.compressedFile);\n\t\t\t});\n\t\t} else {\n\t\t\tmoveToUploadToFirestoreElseNext(croppedImage, file);\n\t\t}\n\t};\n\n\tconst moveToCropElseNext = (croppedImage: string) => {\n\t\tif (options.crop) {\n\t\t\tsetCurrentStep('crop');\n\t\t} else {\n\t\t\tmoveToCompressElseNext(croppedImage);\n\t\t}\n\t};\n\n\tconst handleDivClick = () => {\n\t\tfileInputRef.current!.click();\n\t};\n\n\tconst handleImageChange = (event) => {\n\t\tconst file = event.target.files[0];\n\t\tconst reader = new FileReader();\n\n\t\treader.onload = () => {\n\t\t\tsetCurrentLocalImage({\n\t\t\t\tsrc: reader.result as string,\n\t\t\t});\n\t\t\tmoveToCropElseNext(reader.result as string);\n\t\t};\n\n\t\tif (file) {\n\t\t\treader.readAsDataURL(file);\n\t\t}\n\t};\n\n\tif (finished) {\n\t\treturn <></>;\n\t}\n\n\tif (currentStep === 'cloud-upload') {\n\t\tif (!fileUploadOptions \|\| fileUploadOptions.success) {\n\t\t\treturn <></>;\n\t\t}\n\t\tif (fileUploadOptions.error) {\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t<StateModalComponent\n\t\t\t\t\t\tstates={StateInterface.ERROR}\n\t\t\t\t\t\theading={'Error while uploading'}\n\t\t\t\t\t\tsubline={'Please check your image and try again'}\n\t\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\tsetFinished(true);\n\t\t\t\t\t\t\tonCancel();\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<StateModalComponent\n\t\t\t\t\theaderImage={loadingStateOptions?.headerImage}\n\t\t\t\t\tstates={StateInterface.LOADING}\n\t\t\t\t\theading={`Uploading your ${fileTitle \|\| 'photo'}`}\n\t\t\t\t\tsubline={`Please wait while we upload your ${fileTitle \|\| 'photo'}`}\n\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\twidth={300}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{options.upload && (\n\t\t\t\t<input\n\t\t\t\t\tref={fileInputRef}\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\taccept=\"image/\"\n\t\t\t\t\tstyle={{ display: 'none' }}\n\t\t\t\t\tonChange={handleImageChange}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{currentStep === 'crop' && (\n\t\t\t\t<BikImageCropper\n\t\t\t\t\tsrc={currentLocalImage.src!}\n\t\t\t\t\tonCropComplete={(croppedImage) => {\n\t\t\t\t\t\tsetCurrentLocalImage({\n\t\t\t\t\t\t\tsrc: croppedImage,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tmoveToCompressElseNext(croppedImage);\n\t\t\t\t\t}}\n\t\t\t\t\taspectRatio={cropOptions!.aspectRatio!}\n\t\t\t\t\tonCancel={onCancel}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["BikImagePipeline","cropOptions","fileTitle","compressionOptions","currentImage","options","onFinish","onCancel","fileUploadOptions","loadingStateOptions","fileInputRef","useRef","currentStep","setCurrentStep","useState","currentLocalImage","setCurrentLocalImage","finished","setFinished","useEffect","handleDivClick","moveToUploadToFirestoreElseNext","useCallback","base64","file","url","error","moveToCompressElseNext","croppedImage","ImageService","output","moveToCropElseNext","handleImageChange","event","reader","jsxDEV","Fragment","this","StateModalComponent","StateInterface","BikImageCropper"],"mappings":"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"}

package/dist/cjs/components/input/ChipInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-dev-runtime"),p=require("react"),o=require("../../constants/Theme.js"),N=require("../TypographyStyle.js"),r=require("./ChipInput.styled.js"),T=({onChipsChange:u,placeholder:y,chips:t,label:f,labelColor:h,hintText:b,hintTextColor:D,error:i,inputHeight:v,createChipKeys:O,chipsContainerCustomStyle:x,nativeID:g})=>{const[a,d]=p.useState(""),[l,C]=p.useState(!1),S=p.useRef(null),m=O||[",",188,"Enter",13],k=e=>{if(m.includes(e.key)||m.includes(e.keyCode)||m.includes(e.which)){e.preventDefault();const n=a.trim();n&&!t.includes(n)&&(u([...t,n]),d(""))}else e.key==="Backspace"&&a===""&&t.length>0&&u(t.slice(0,-1))},R=e=>{u(t.filter((c,n)=>n!==e))},I=()=>{C(!0)},V=()=>{C(!1);const e=a.trim();e&&!t.includes(e)&&(u([...t,e]),d(""))},j=()=>{S.current?.focus()},w=r.getContainerStyle(!!i,v,x,l),E=l?{}:r.getContainerHoverStyle(),L=r.getChipStyle(),U=r.getChipRemoveStyle(),M=r.getInputStyle(v);return s.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:8},id:g,children:[f&&s.jsxDEV(N.BodySecondary,{style:{color:l?o.COLORS.content.brand:i?o.COLORS.content.negative:h||o.COLORS.content.primary},children:f},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:114,columnNumber:5},void 0),s.jsxDEV("div",{style:w,onClick:j,onMouseEnter:e=>{l||Object.assign(e.currentTarget.style,E)},onMouseLeave:e=>{l||(e.currentTarget.style.border=`1px solid ${i?o.COLORS.stroke.negative.vibrant:o.COLORS.stroke.primary}`)},children:[t.map((e,c)=>s.jsxDEV("div",{style:L,children:[s.jsxDEV("span",{children:e},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:144,columnNumber:7},void 0),s.jsxDEV("button",{style:U,onClick:n=>{n.stopPropagation(),R(c)},onMouseEnter:n=>{n.currentTarget.style.color=o.COLORS.content.secondary},onMouseLeave:n=>{n.currentTarget.style.color=o.COLORS.content.secondary},"aria-label":`Remove ${e}`,children:"×"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:145,columnNumber:7},void 0)]},c,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:143,columnNumber:6},void 0)),s.jsxDEV("input",{ref:S,type:"text",value:a,onChange:e=>d(e.target.value),onKeyDown:k,onFocus:I,onBlur:V,placeholder:t.length===0&&y&&!l?y:void 0,style:M},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:163,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:126,columnNumber:4},void 0),(!!b||!!i)&&s.jsxDEV(N.BodyCaption,{style:{color:i?o.COLORS.content.negative:D||o.COLORS.content.secondary},children:i||b},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:180,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:109,columnNumber:3},void 0)};exports.default=T;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-dev-runtime"),m=require("react"),o=require("../../constants/Theme.js"),k=require("../TypographyStyle.js"),u=require("./ChipInput.styled.js"),T=({onChipsChange:c,placeholder:y,chips:t,label:f,labelColor:S,hintText:b,hintTextColor:N,error:s,inputHeight:h,createChipKeys:O,chipsContainerCustomStyle:j,nativeID:x})=>{const[l,p]=m.useState(""),[i,v]=m.useState(!1),C=m.useRef(null),d=O||[",",188,"Enter",13],g=e=>{if(d.includes(e.key)||d.includes(e.keyCode)||d.includes(e.which)){e.preventDefault();const n=l.trim();n&&!t.includes(n)&&(c([...t,n]),p(""))}else e.key==="Backspace"&&l===""&&t.length>0&&c(t.slice(0,-1))},R=e=>{c(t.filter((a,n)=>n!==e))},D=()=>{v(!0)},I=()=>{v(!1);const e=l.trim();e&&!t.includes(e)&&(c([...t,e]),p(""))},V=()=>{C.current?.focus()},E=u.getContainerStyle(!!s,h,j,i),L=i?{}:u.getContainerHoverStyle(),P=u.getChipStyle(),U=u.getChipRemoveStyle(),M=u.getInputStyle(h);return r.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:8},id:x,children:[f&&r.jsxDEV(k.BodySecondary,{style:{color:i?o.COLORS.content.brand:s?o.COLORS.content.negative:S||o.COLORS.content.primary},children:f},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:114,columnNumber:5},void 0),r.jsxDEV("div",{style:E,onClick:V,onMouseEnter:e=>{i||Object.assign(e.currentTarget.style,L)},onMouseLeave:e=>{i||(e.currentTarget.style.border=`1px solid ${s?o.COLORS.stroke.negative.vibrant:o.COLORS.stroke.primary}`)},children:[t.map((e,a)=>r.jsxDEV("div",{style:P,children:[r.jsxDEV("span",{children:e},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:144,columnNumber:7},void 0),r.jsxDEV("button",{style:U,onClick:n=>{n.stopPropagation(),R(a)},onMouseEnter:n=>{n.currentTarget.style.color=o.COLORS.content.secondary},onMouseLeave:n=>{n.currentTarget.style.color=o.COLORS.content.secondary},"aria-label":`Remove ${e}`,children:"×"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:145,columnNumber:7},void 0)]},a,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:143,columnNumber:6},void 0)),r.jsxDEV("input",{ref:C,type:"text",value:l,onChange:e=>p(e.target.value),onKeyDown:g,onFocus:D,onBlur:I,placeholder:t.length===0&&y&&!i?y:void 0,style:M},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:163,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:126,columnNumber:4},void 0),(!!b||!!s)&&r.jsxDEV(k.BodyCaption,{style:{color:s?o.COLORS.content.negative:N||o.COLORS.content.secondary},children:s||b},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:180,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/input/ChipInput.tsx",lineNumber:109,columnNumber:3},void 0)};exports.default=T;
 //# sourceMappingURL=ChipInput.js.map

package/dist/cjs/components/input/ChipInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string \| number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string \| number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys \|\| defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) \|\|\n\t\t\tchipKeys.includes(e.keyCode) \|\|\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor \|\| COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\n\t\t\t\t\t\t}`;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(e.target.value)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText \|\| !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor \|\| COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxDEV","BodySecondary","COLORS","this","chip","e","BodyCaption"],"mappings":"oRAiCMA,EAAsC,CAAC,CAC5C,cAAAC,EACA,YAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,MAAAC,EACA,YAAAC,EACA,eAAAC,EACA,0BAAAC,EACA,SAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,EAAE,EACzC,CAACC,EAASC,CAAU,EAAIF,EAAAA,SAAS,EAAK,EACtCG,EAAWC,EAAAA,OAAyB,IAAI,EAIxCC,EAAWV,GADG,CAAC,IAAK,IAAK,QAAS,EAAE,EAGpCW,EAAiB,GAAuC,CAM7D,GAJCD,EAAS,SAAS,EAAE,GAAG,GACvBA,EAAS,SAAS,EAAE,OAAO,GAC3BA,EAAS,SAAS,EAAE,KAAK,EAEJ,CACrB,EAAE,eAAA,EACF,MAAME,EAAeT,EAAW,KAAA,EAC5BS,GAAgB,CAACnB,EAAM,SAASmB,CAAY,IAC/CrB,EAAc,CAAC,GAAGE,EAAOmB,CAAY,CAAC,EACtCR,EAAc,EAAE,EAElB,MAAW,EAAE,MAAQ,aAAeD,IAAe,IAAMV,EAAM,OAAS,GAEvEF,EAAcE,EAAM,MAAM,EAAG,EAAE,CAAC,CAElC,EAEMoB,EAAoBC,GAA0B,CACnDvB,EAAcE,EAAM,OAAO,CAACsB,EAAGC,IAAUA,IAAUF,CAAa,CAAC,CAClE,EAEMG,EAAc,IAAM,CACzBV,EAAW,EAAI,CAChB,EAEMW,EAAa,IAAM,CACxBX,EAAW,EAAK,EAEhB,MAAMK,EAAeT,EAAW,KAAA,EAC5BS,GAAgB,CAACnB,EAAM,SAASmB,CAAY,IAC/CrB,EAAc,CAAC,GAAGE,EAAOmB,CAAY,CAAC,EACtCR,EAAc,EAAE,EAElB,EAEMe,EAAuB,IAAM,CAClCX,EAAS,SAAS,MAAA,CACnB,EAEMY,EAAiBC,EAAAA,kBACtB,CAAC,CAACvB,EACFC,EACAE,EACAK,CAAA,EAEKgB,EAAsBhB,EAAU,CAAA,EAAKiB,yBAAA,EACrCC,EAAYC,EAAAA,aAAA,EACZC,EAAkBC,EAAAA,mBAAA,EAClBC,EAAaC,EAAAA,cAAc9B,CAAW,EAE5C,OACC+B,EAAAA,OAAC,MAAA,CACA,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,CAAA,EACxD,GAAI5B,EAEH,SAAA,CAAAR,GACAoC,EAAAA,OAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOzB,EACJ0B,SAAO,QAAQ,MACflC,EACAkC,EAAAA,OAAO,QAAQ,SACfrC,GAAcqC,EAAAA,OAAO,QAAQ,OAAA,EAGhC,SAAAtC,CAAA,EATF,OAAA,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAuC,MAAA,EAYDH,EAAAA,OAAC,MAAA,CACA,MAAOV,EACP,QAASD,EACT,aAAe,GAAM,CACfb,GACJ,OAAO,OAAO,EAAE,cAAc,MAAOgB,CAAmB,CAE1D,EACA,aAAe,GAAM,CACfhB,IACJ,EAAE,cAAc,MAAM,OAAS,aAC9BR,EAAQkC,EAAAA,OAAO,OAAO,SAAS,QAAUA,EAAAA,OAAO,OAAO,OACxD,GAEF,EAEC,SAAA,CAAAvC,EAAM,IAAI,CAACyC,EAAMlB,IACjBc,SAAC,MAAA,CAAgB,MAAON,EACvB,SAAA,CAAAM,EAAAA,OAAC,QAAM,SAAAI,CAAA,EAAP,OAAA,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAD,MAAY,EACZH,EAAAA,OAAC,SAAA,CACA,MAAOJ,EACP,QAAUS,GAAM,CACfA,EAAE,gBAAA,EACFtB,EAAiBG,CAAK,CACvB,EACA,aAAemB,GAAM,CACpBA,EAAE,cAAc,MAAM,MAAQH,EAAAA,OAAO,QAAQ,SAC9C,EACA,aAAeG,GAAM,CACpBA,EAAE,cAAc,MAAM,MAAQH,EAAAA,OAAO,QAAQ,SAC9C,EACA,aAAY,UAAUE,CAAI,GAC1B,SAAA,GAAA,EAbD,OAAA,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAD,MAAA,CAeA,CAAA,EAjBSjB,EAAV,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAiB,MAkBA,CACA,EACDH,EAAAA,OAAC,QAAA,CACA,IAAKtB,EACL,KAAK,OACL,MAAOL,EACP,SAAW,GAAMC,EAAc,EAAE,OAAO,KAAK,EAC7C,UAAWO,EACX,QAASM,EACT,OAAQC,EACR,YACCzB,EAAM,SAAW,GAAOD,GAAe,CAACc,EACrCd,EACA,OAEJ,MAAOoC,CAAA,EAbR,OAAA,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAK,MAAA,CAcA,CAAA,EAnDD,OAAA,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,GAqDE,CAAC,CAACrC,GAAY,CAAC,CAACE,IACjBgC,EAAAA,OAACM,EAAAA,YAAA,CACA,MAAO,CACN,MAAOtC,EACJkC,SAAO,QAAQ,SACfnC,GAAiBmC,EAAAA,OAAO,QAAQ,SAAA,EAGnC,YAAgBpC,CAAA,EAPlB,OAAA,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAqC,MAAA,CAQA,CAAA,EA/EF,OAAA,GAAA,CAAA,SAAA,~~yFAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CAmFF"}
1	+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/input/ChipInput.tsx"],"sourcesContent":["import React, { KeyboardEvent, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tgetChipRemoveStyle,\n\tgetChipStyle,\n\tgetContainerHoverStyle,\n\tgetContainerStyle,\n\tgetInputStyle,\n} from './ChipInput.styled';\n\nexport const extractSingleValueIfAny = (nativeID: string) =>\n\t(document?.querySelector(`#${nativeID} input`) as HTMLInputElement)?.value;\n\nexport const getInputNode = (nativeID: string) =>\n\tdocument?.querySelector(`#${nativeID} input`) as HTMLInputElement;\n\nexport interface ChipInputProps {\n\tonChipsChange: (chips: (string \| number)[]) => void;\n\tplaceholder: string;\n\tlabel?: string;\n\tlabelColor?: string;\n\thintText?: string;\n\thintTextColor?: string;\n\tchipTheme?: () => void;\n\tchips: string[];\n\terror?: string;\n\tinputHeight?: number;\n\tcreateChipKeys?: (string \| number)[];\n\tchipsContainerCustomStyle?: React.CSSProperties;\n\tnativeID?: string;\n}\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tonChipsChange,\n\tplaceholder,\n\tchips,\n\tlabel,\n\tlabelColor,\n\thintText,\n\thintTextColor,\n\terror,\n\tinputHeight,\n\tcreateChipKeys,\n\tchipsContainerCustomStyle,\n\tnativeID,\n}) => {\n\tconst [inputValue, setInputValue] = useState('');\n\tconst [focused, setFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\n\t// Default chip creation keys: comma (188), enter (13)\n\tconst defaultKeys = [',', 188, 'Enter', 13];\n\tconst chipKeys = createChipKeys \|\| defaultKeys;\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n\t\tconst shouldCreateChip =\n\t\t\tchipKeys.includes(e.key) \|\|\n\t\t\tchipKeys.includes(e.keyCode) \|\|\n\t\t\tchipKeys.includes(e.which);\n\n\t\tif (shouldCreateChip) {\n\t\t\te.preventDefault();\n\t\t\tconst trimmedValue = inputValue.trim();\n\t\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\t\tsetInputValue('');\n\t\t\t}\n\t\t} else if (e.key === 'Backspace' && inputValue === '' && chips.length > 0) {\n\t\t\t// Remove last chip on backspace when input is empty\n\t\t\tonChipsChange(chips.slice(0, -1));\n\t\t}\n\t};\n\n\tconst handleRemoveChip = (indexToRemove: number) => {\n\t\tonChipsChange(chips.filter((_, index) => index !== indexToRemove));\n\t};\n\n\tconst handleFocus = () => {\n\t\tsetFocused(true);\n\t};\n\n\tconst handleBlur = () => {\n\t\tsetFocused(false);\n\t\t// Optionally create chip on blur if there's a value\n\t\tconst trimmedValue = inputValue.trim();\n\t\tif (trimmedValue && !chips.includes(trimmedValue)) {\n\t\t\tonChipsChange([...chips, trimmedValue]);\n\t\t\tsetInputValue('');\n\t\t}\n\t};\n\n\tconst handleContainerClick = () => {\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst containerStyle = getContainerStyle(\n\t\t!!error,\n\t\tinputHeight,\n\t\tchipsContainerCustomStyle,\n\t\tfocused,\n\t);\n\tconst containerHoverStyle = focused ? {} : getContainerHoverStyle();\n\tconst chipStyle = getChipStyle();\n\tconst chipRemoveStyle = getChipRemoveStyle();\n\tconst inputStyle = getInputStyle(inputHeight);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ display: 'flex', flexDirection: 'column', gap: 8 }}\n\t\t\tid={nativeID}\n\t\t>\n\t\t\t{label && (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: focused\n\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: labelColor \|\| COLORS.content.primary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</BodySecondary>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={containerStyle}\n\t\t\t\tonClick={handleContainerClick}\n\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\tObject.assign(e.currentTarget.style, containerHoverStyle);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\tif (!focused) {\n\t\t\t\t\t\te.currentTarget.style.border = `1px solid ${\n\t\t\t\t\t\t\terror ? COLORS.stroke.negative.vibrant : COLORS.stroke.primary\n\t\t\t\t\t\t}`;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{chips.map((chip, index) => (\n\t\t\t\t\t<div key={index} style={chipStyle}>\n\t\t\t\t\t\t<span>{chip}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tstyle={chipRemoveStyle}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\thandleRemoveChip(index);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\te.currentTarget.style.color = COLORS.content.secondary;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={`Remove ${chip}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t×\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t\t<input\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\tonChange={(e) => setInputValue(e.target.value)}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\tplaceholder={\n\t\t\t\t\t\tchips.length === 0 && !!placeholder && !focused\n\t\t\t\t\t\t\t? placeholder\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={inputStyle}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{(!!hintText \|\| !!error) && (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: error\n\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t: hintTextColor \|\| COLORS.content.secondary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{error ? error : hintText}\n\t\t\t\t</BodyCaption>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["ChipInput","onChipsChange","placeholder","chips","label","labelColor","hintText","hintTextColor","error","inputHeight","createChipKeys","chipsContainerCustomStyle","nativeID","inputValue","setInputValue","useState","focused","setFocused","inputRef","useRef","chipKeys","handleKeyDown","trimmedValue","handleRemoveChip","indexToRemove","_","index","handleFocus","handleBlur","handleContainerClick","containerStyle","getContainerStyle","containerHoverStyle","getContainerHoverStyle","chipStyle","getChipStyle","chipRemoveStyle","getChipRemoveStyle","inputStyle","getInputStyle","jsxDEV","BodySecondary","COLORS","this","chip","e","BodyCaption"],"mappings":"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"}