npm - @bikdotai/bik-component-library - Versions diffs - 0.0.821-beta.9 → 0.0.821 - Mend

@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

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

package/dist/cjs/components/input/Input.styled.js.map CHANGED Viewed

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

package/dist/cjs/components/input-with-vars/InputWithVariables.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),G=require("../../assets/icons/PlusIcon.js"),a=require("react"),J=require("styled-components"),Q=require("uuid"),U=require("../../constants/Theme.js"),X=require("../add-variableV2/AddVariableBox.styled.js"),Y=require("../TypographyStyle.js"),y=require("../variable-picker-v3/model.js"),Z=require("./customPortal.js"),ee=require("../input/Input.js"),R=require("../variable-picker-v3/VariablePicker.js"),te=require("../floater/floater.js"),ae=s=>s&&typeof s=="object"&&"default"in s?s:{default:s},re=ae(J),se=({type:s,allowMix:b,onChange:g,prevVariable:k,variablesList:v,onBlur:q,onlyVariables:E,placeHolder:D,showAddButton:I=!0,showHelp:A,errorMessage:h,maxCharLimit:F,noMaxCharCheck:P,labelText:w,labelElement:B,isRequired:O=!1,hintText:x,onEnterPress:_,pickerType:M=y.PickerType.FLOATER,portalElement:N,showVarHeader:$,varHeaderText:z,onPickerToggle:n})=>{const j=a.useRef(),S=a.useRef(!0),r=a.useRef(null),[L,o]=a.useState(!1),[W]=a.useState(Q.v4()),[l,m]=a.useState(),[i,u]=a.useState(k),[V,c]=a.useState(!1),[H,T]=a.useState(!1),[C,f]=a.useState(0);function K(e,p,d){return e.slice(0,d)+p+e.slice(d)}return a.useEffect(()=>{if(!(!l||!l.actualValue))if(b){if(u(e=>({actualValue:K(e.actualValue,l.actualValue,C),variableType:"string"})),r.current){f(r.current.selectionStart);const e=C+l.actualValue.length+2;r.current.setSelectionRange(e,e),f(e)}}else u(e=>({actualValue:l.actualValue,variableType:l.variableType,needsFetching:l.needsFetching}))},[l]),a.useEffect(()=>{S.current?S.current=!1:g(i)},[i]),t.jsxs(t.Fragment,{children:[t.jsxs(le,{isVar:/^{{.*}}$/.test(i.actualValue),onKeyDown:e=>{e.key==="Enter"&&_?.(i.actualValue)},children:[t.jsx(ee.Input,{isRequired:O,hintText:x,type:s??"text",id:W,ref:r,skipFocus:!0,isActive:L,value:i.actualValue,validate:e=>[!0,""],errorMessage:h,noMaxCharCheck:P,maxCharLimit:F,labelText:w,labelElement:B,placeholder:D||"Add a value",onClick:e=>{r.current&&f(r.current.selectionStart)},onChangeText:(e,p)=>{if(r.current&&f(r.current.selectionStart),E){const d=p?.keyCode||p?.charCode;(d===8||d===46)&&u({actualValue:"",variableType:"string"});return}u(b?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{o(!0),T(!0)},onBlur:e=>{q?.(e,i),e.relatedTarget?.id==="addVar"||e.relatedTarget?.id==="variable-picker-v3"||e.relatedTarget?.className?.includes("accordion")||e.relatedTarget?.id==="back-btn-v3"?(r.current&&r.current.focus(),o(!0)):e.relatedTarget?.id==="search-bar-v3-picker"?o(!0):(o(!1),c(!1),n?.(!1),T(!1))}}),t.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[i.actualValue&&A&&t.jsx("div",{style:{marginTop:4},children:t.jsx(Y.BodyCaption,{children:`This value is of type ${i.variableType}`})}),I&&H&&t.jsx("div",{style:{marginTop:h||x?"-24px":"0px"},children:t.jsx(X.AddVariableStyled,{ref:j,id:"addVar",onClick:()=>{c(!V),n?.(!V)},children:t.jsxs("div",{className:"add",children:[t.jsx(G.default,{color:"white"}),t.jsx("div",{className:"variable",children:"Add variable"})]})})})]})]}),V&&t.jsx(t.Fragment,{children:M===y.PickerType.EMBEDDED?t.jsx(Z.CustomPortal,{zIndex:101,element:N??document.body,children:t.jsx(R.VariablePicker,{width:"344px",showHeader:$,headerText:z,onClose:()=>{c(!1),n?.(!1)},type:y.PickerType.EMBEDDED,data:v,onSelect:e=>{m(e),c(!1),n?.(!1)}})}):t.jsx("div",{style:{zIndex:101,position:"relative"},children:t.jsx(te.Floater,{refElement:j,children:t.jsx("div",{style:{height:500},children:t.jsx(R.VariablePicker,{onClose:()=>{c(!1),n?.(!1)},type:y.PickerType.FLOATER,data:v,onSelect:e=>{m(e),c(!1),n?.(!1)}})})})})})]})},le=re.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),Q=require("../../assets/icons/PlusIcon.js"),a=require("react"),U=require("styled-components"),X=require("uuid"),Y=require("../../constants/Theme.js"),Z=require("../add-variableV2/AddVariableBox.styled.js"),ee=require("../TypographyStyle.js"),y=require("../variable-picker-v3/model.js"),te=require("./customPortal.js"),ae=require("../input/Input.js"),k=require("../variable-picker-v3/VariablePicker.js"),re=require("../floater/floater.js"),le=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},se=le(U),ie=({type:l,allowMix:b,onChange:q,prevVariable:E,variablesList:v,onBlur:D,onlyVariables:I,placeHolder:A,showAddButton:F=!0,showHelp:P,errorMessage:x,maxCharLimit:O,noMaxCharCheck:_,labelText:w,labelElement:B,isRequired:M=!1,hintText:h,onEnterPress:N,pickerType:$=y.PickerType.FLOATER,portalElement:z,showVarHeader:L,varHeaderText:W,onPickerToggle:n,showRecommendedBar:j,showSearch:S})=>{const T=a.useRef(),m=a.useRef(!0),r=a.useRef(null),[H,o]=a.useState(!1),[K]=a.useState(X.v4()),[s,C]=a.useState(),[i,u]=a.useState(E),[V,c]=a.useState(!1),[G,R]=a.useState(!1),[g,f]=a.useState(0);function J(e,p,d){return e.slice(0,d)+p+e.slice(d)}return a.useEffect(()=>{if(!(!s||!s.actualValue))if(b){if(u(e=>({actualValue:J(e.actualValue,s.actualValue,g),variableType:"string"})),r.current){f(r.current.selectionStart);const e=g+s.actualValue.length+2;r.current.setSelectionRange(e,e),f(e)}}else u(e=>({actualValue:s.actualValue,variableType:s.variableType,needsFetching:s.needsFetching}))},[s]),a.useEffect(()=>{m.current?m.current=!1:q(i)},[i]),t.jsxs(t.Fragment,{children:[t.jsxs(ne,{isVar:/^{{.*}}$/.test(i.actualValue),onKeyDown:e=>{e.key==="Enter"&&N?.(i.actualValue)},children:[t.jsx(ae.Input,{isRequired:M,hintText:h,type:l??"text",id:K,ref:r,skipFocus:!0,isActive:H,value:i.actualValue,validate:e=>[!0,""],errorMessage:x,noMaxCharCheck:_,maxCharLimit:O,labelText:w,labelElement:B,placeholder:A||"Add a value",onClick:e=>{r.current&&f(r.current.selectionStart)},onChangeText:(e,p)=>{if(r.current&&f(r.current.selectionStart),I){const d=p?.keyCode||p?.charCode;(d===8||d===46)&&u({actualValue:"",variableType:"string"});return}u(b?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{o(!0),R(!0)},onBlur:e=>{D?.(e,i),e.relatedTarget?.id==="addVar"||e.relatedTarget?.id==="variable-picker-v3"||e.relatedTarget?.className?.includes("accordion")||e.relatedTarget?.id==="back-btn-v3"?(r.current&&r.current.focus(),o(!0)):e.relatedTarget?.id==="search-bar-v3-picker"?o(!0):(o(!1),c(!1),n?.(!1),R(!1))}}),t.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[i.actualValue&&P&&t.jsx("div",{style:{marginTop:4},children:t.jsx(ee.BodyCaption,{children:`This value is of type ${i.variableType}`})}),F&&G&&t.jsx("div",{style:{marginTop:x||h?"-24px":"0px"},children:t.jsx(Z.AddVariableStyled,{ref:T,id:"addVar",onClick:()=>{c(!V),n?.(!V)},children:t.jsxs("div",{className:"add",children:[t.jsx(Q.default,{color:"white"}),t.jsx("div",{className:"variable",children:"Add variable"})]})})})]})]}),V&&t.jsx(t.Fragment,{children:$===y.PickerType.EMBEDDED?t.jsx(te.CustomPortal,{zIndex:101,element:z??document.body,children:t.jsx(k.VariablePicker,{width:"344px",showRecommendedBar:j,showSearch:S,showHeader:L,headerText:W,onClose:()=>{c(!1),n?.(!1)},type:y.PickerType.EMBEDDED,data:v,onSelect:e=>{C(e),c(!1),n?.(!1)}})}):t.jsx("div",{style:{zIndex:101,position:"relative"},children:t.jsx(re.Floater,{refElement:T,children:t.jsx("div",{style:{height:500},children:t.jsx(k.VariablePicker,{showRecommendedBar:j,showSearch:S,onClose:()=>{c(!1),n?.(!1)},type:y.PickerType.FLOATER,data:v,onSelect:e=>{C(e),c(!1),n?.(!1)}})})})})})]})},ne=se.default.div`
 	position: relative;
 	margin-bottom: 12px;
 	input {
-		color: ${s=>s.isVar?U.COLORS.stroke.brand:"black"};
+		color: ${l=>l.isVar?Y.COLORS.stroke.brand:"black"};
 	}
-`;exports.InputWithVariables=se;
+`;exports.InputWithVariables=ie;
 //# sourceMappingURL=InputWithVariables.js.map

package/dist/cjs/components/input-with-vars/InputWithVariables.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputWithVariables.js","sources":["../../../../src/components/input-with-vars/InputWithVariables.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 } from 'uuid';\nimport { COLORS } from '@src/constants/Theme';\nimport { AddVariableStyled } from '../add-variableV2/AddVariableBox.styled';\nimport { Variable } from '../add-variableV2/AddVariableV2';\nimport { SelectedVariable } from '../add-variableV2/types';\nimport { Floater } from '../floater';\nimport { Input } from '../input';\nimport { InputTypeI } from '../input/Input.model';\nimport { BodyCaption } from '../TypographyStyle';\nimport { VariablePicker } from '../variable-picker-v3';\nimport { PickerType } from '../variable-picker-v3/model';\nimport { CustomPortal } from './customPortal';\n\nexport interface InputWithVariablesProps {\n\ttype?: InputTypeI;\n\tvariablesList: any;\n\tonChange: (val: SelectedVariable) => void;\n\tonBlur?: (e: Event, val?: SelectedVariable \| Variable) => void;\n\tallowMix: boolean;\n\tprevVariable: SelectedVariable;\n\tshowHelp?: boolean;\n\tonlyVariables?: boolean;\n\tplaceHolder?: string;\n\tshowAddButton?: boolean;\n\terrorMessage?: string;\n\tnoMaxCharCheck?: boolean;\n\tmaxCharLimit?: number;\n\tlabelText?: string;\n\tlabelElement?: React.ReactNode;\n\tisRequired?: boolean;\n\thintText?: string;\n\tonEnterPress?: (input: string) => void;\n\tpickerType?: PickerType;\n\tportalElement?: HTMLElement;\n\tshowVarHeader?: boolean;\n\tvarHeaderText?: string;\n\tonPickerToggle?: (isOpen: boolean) => void;\n}\n\nexport const InputWithVariables: React.FC<InputWithVariablesProps> = ({\n\ttype,\n\tallowMix,\n\tonChange,\n\tprevVariable,\n\tvariablesList,\n\tonBlur,\n\tonlyVariables,\n\tplaceHolder,\n\tshowAddButton = true,\n\tshowHelp,\n\terrorMessage,\n\tmaxCharLimit,\n\tnoMaxCharCheck,\n\tlabelText,\n\tlabelElement,\n\tisRequired = false,\n\thintText,\n\tonEnterPress,\n\tpickerType = PickerType.FLOATER,\n\tportalElement,\n\tshowVarHeader,\n\tvarHeaderText,\n\tonPickerToggle,\n}: InputWithVariablesProps) => {\n\tconst superRef = useRef<any>();\n\tconst initialRender = useRef(true);\n\tconst inputRef = useRef(null);\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst [id] = useState<string>(v4());\n\tconst [selectedVariable, setSelectedVariable] = useState<SelectedVariable>();\n\tconst [displayValue, setDisplayValue] =\n\t\tuseState<SelectedVariable>(prevVariable);\n\tconst [varModalVisible, setVarModalVisible] = useState<boolean>(false);\n\tconst [addVarRefVisible, setAddVarRefVisible] = useState<boolean>(false);\n\tconst [curCursorPosition, setCurCursorPosition] = useState<number>(0);\n\n\tfunction insertString(originalString, stringToInsert, position) {\n\t\tconst modifiedString =\n\t\t\toriginalString.slice(0, position) +\n\t\t\tstringToInsert +\n\t\t\toriginalString.slice(position);\n\t\treturn modifiedString;\n\t}\n\n\tuseEffect(() => {\n\t\tif (!selectedVariable \|\| !selectedVariable.actualValue) {\n\t\t\treturn;\n\t\t}\n\t\tif (allowMix) {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: insertString(\n\t\t\t\t\tprev.actualValue,\n\t\t\t\t\tselectedVariable.actualValue,\n\t\t\t\t\tcurCursorPosition,\n\t\t\t\t),\n\t\t\t\tvariableType: 'string',\n\t\t\t}));\n\t\t\tif (inputRef.current) {\n\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\tconst newPos =\n\t\t\t\t\tcurCursorPosition + selectedVariable.actualValue.length + 2;\n\t\t\t\t(inputRef.current as any).setSelectionRange(newPos, newPos);\n\t\t\t\tsetCurCursorPosition(newPos);\n\t\t\t}\n\t\t} else {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: selectedVariable.actualValue,\n\t\t\t\tvariableType: selectedVariable.variableType,\n\t\t\t\tneedsFetching: selectedVariable.needsFetching,\n\t\t\t}));\n\t\t}\n\t}, [selectedVariable]);\n\n\tuseEffect(() => {\n\t\t// don't call onChange on initial render\n\t\tif (initialRender.current) {\n\t\t\tinitialRender.current = false;\n\t\t} else {\n\t\t\tonChange(displayValue);\n\t\t}\n\t}, [displayValue]);\n\n\treturn (\n\t\t<>\n\t\t\t<StyledInput\n\t\t\t\tisVar={/^{{.}}$/.test(displayValue.actualValue)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\tonEnterPress?.(displayValue.actualValue);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\thintText={hintText}\n\t\t\t\t\ttype={type ?? 'text'}\n\t\t\t\t\tid={id}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tskipFocus={true}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tvalue={displayValue.actualValue}\n\t\t\t\t\tvalidate={(_) => [true, '']}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tnoMaxCharCheck={noMaxCharCheck}\n\t\t\t\t\tmaxCharLimit={maxCharLimit}\n\t\t\t\t\tlabelText={labelText}\n\t\t\t\t\tlabelElement={labelElement}\n\t\t\t\t\tplaceholder={placeHolder \|\| 'Add a value'}\n\t\t\t\t\tonClick={(event?: Event \| undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonChangeText={(input: string, event?: Event \| undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (onlyVariables) {\n\t\t\t\t\t\t\tconst key = (event as any)?.keyCode \|\| (event as any)?.charCode;\n\n\t\t\t\t\t\t\tif (key === 8 \|\| key === 46) {\n\t\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\t\tactualValue: '',\n\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!allowMix) {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input.replace(/{{.}}/, ''),\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input,\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonReferenceInit={() => {\n\t\t\t\t\t\t/* Bypass eslint */\n\t\t\t\t\t}}\n\t\t\t\t\tonFocus={(e: any) => {\n\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\tsetAddVarRefVisible(true);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\tonBlur?.(e, displayValue);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\te.relatedTarget?.id === 'addVar' \|\|\n\t\t\t\t\t\t\te.relatedTarget?.id === 'variable-picker-v3' \|\|\n\t\t\t\t\t\t\te.relatedTarget?.className?.includes('accordion') \|\|\n\t\t\t\t\t\t\te.relatedTarget?.id === 'back-btn-v3'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\t\t(inputRef.current as any).focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else if (e.relatedTarget?.id === 'search-bar-v3-picker') {\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetIsActive(false);\n\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\tsetAddVarRefVisible(false);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{displayValue.actualValue && showHelp && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 4,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyCaption>{`This value is of type ${displayValue.variableType}`}</BodyCaption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showAddButton && addVarRefVisible && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ marginTop: errorMessage \|\| hintText ? '-24px' : '0px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\t\tref={superRef}\n\t\t\t\t\t\t\t\tid={`addVar`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(!varModalVisible);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(!varModalVisible);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t\t<PlusIcon color=\"white\" />\n\t\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</StyledInput>\n\t\t\t{varModalVisible && (\n\t\t\t\t<>\n\t\t\t\t\t{pickerType === PickerType.EMBEDDED ? (\n\t\t\t\t\t\t<CustomPortal zIndex={101} element={portalElement ?? document.body}>\n\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\twidth={'344px'}\n\t\t\t\t\t\t\t\tshowHeader={showVarHeader}\n\t\t\t\t\t\t\t\theaderText={varHeaderText}\n\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CustomPortal>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div style={{ zIndex: 101, position: 'relative' }}>\n\t\t\t\t\t\t\t<Floater refElement={superRef}>\n\t\t\t\t\t\t\t\t<div style={{ height: 500 }}>\n\t\t\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Floater>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst StyledInput = styled.div<{ isVar: boolean }>`\n\tposition: relative;\n\tmargin-bottom: 12px;\n\tinput {\n\t\tcolor: ${(props) => (props.isVar ? COLORS.stroke.brand : 'black')};\n\t}\n`;\n"],"names":["InputWithVariables","type","allowMix","onChange","prevVariable","variablesList","onBlur","onlyVariables","placeHolder","showAddButton","showHelp","errorMessage","maxCharLimit","noMaxCharCheck","labelText","labelElement","isRequired","hintText","onEnterPress","pickerType","PickerType","portalElement","showVarHeader","varHeaderText","onPickerToggle","superRef","useRef","initialRender","inputRef","isActive","setIsActive","useState","id","v4","selectedVariable","setSelectedVariable","displayValue","setDisplayValue","varModalVisible","setVarModalVisible","addVarRefVisible","setAddVarRefVisible","curCursorPosition","setCurCursorPosition","insertString","originalString","stringToInsert","position","useEffect","prev","newPos","jsxs","Fragment","StyledInput","jsx","Input","_","event","input","key","BodyCaption","AddVariableStyled","PlusIcon","CustomPortal","VariablePicker","variable","Floater","styled","props","COLORS"],"mappings":"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"}
1	+ {"version":3,"file":"InputWithVariables.js","sources":["../../../../src/components/input-with-vars/InputWithVariables.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 } from 'uuid';\nimport { COLORS } from '@src/constants/Theme';\nimport { AddVariableStyled } from '../add-variableV2/AddVariableBox.styled';\nimport { Variable } from '../add-variableV2/AddVariableV2';\nimport { SelectedVariable } from '../add-variableV2/types';\nimport { Floater } from '../floater';\nimport { Input } from '../input';\nimport { InputTypeI } from '../input/Input.model';\nimport { BodyCaption } from '../TypographyStyle';\nimport { VariablePicker } from '../variable-picker-v3';\nimport { PickerType } from '../variable-picker-v3/model';\nimport { CustomPortal } from './customPortal';\n\nexport interface InputWithVariablesProps {\n\ttype?: InputTypeI;\n\tvariablesList: any;\n\tonChange: (val: SelectedVariable) => void;\n\tonBlur?: (e: Event, val?: SelectedVariable \| Variable) => void;\n\tallowMix: boolean;\n\tprevVariable: SelectedVariable;\n\tshowHelp?: boolean;\n\tonlyVariables?: boolean;\n\tplaceHolder?: string;\n\tshowAddButton?: boolean;\n\terrorMessage?: string;\n\tnoMaxCharCheck?: boolean;\n\tmaxCharLimit?: number;\n\tlabelText?: string;\n\tlabelElement?: React.ReactNode;\n\tisRequired?: boolean;\n\thintText?: string;\n\tonEnterPress?: (input: string) => void;\n\tpickerType?: PickerType;\n\tportalElement?: HTMLElement;\n\tshowVarHeader?: boolean;\n\tvarHeaderText?: string;\n\tonPickerToggle?: (isOpen: boolean) => void;\n\tshowRecommendedBar?: boolean;\n\tshowSearch?: boolean;\n}\n\nexport const InputWithVariables: React.FC<InputWithVariablesProps> = ({\n\ttype,\n\tallowMix,\n\tonChange,\n\tprevVariable,\n\tvariablesList,\n\tonBlur,\n\tonlyVariables,\n\tplaceHolder,\n\tshowAddButton = true,\n\tshowHelp,\n\terrorMessage,\n\tmaxCharLimit,\n\tnoMaxCharCheck,\n\tlabelText,\n\tlabelElement,\n\tisRequired = false,\n\thintText,\n\tonEnterPress,\n\tpickerType = PickerType.FLOATER,\n\tportalElement,\n\tshowVarHeader,\n\tvarHeaderText,\n\tonPickerToggle,\n\tshowRecommendedBar,\n\tshowSearch,\n}: InputWithVariablesProps) => {\n\tconst superRef = useRef<any>();\n\tconst initialRender = useRef(true);\n\tconst inputRef = useRef(null);\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst [id] = useState<string>(v4());\n\tconst [selectedVariable, setSelectedVariable] = useState<SelectedVariable>();\n\tconst [displayValue, setDisplayValue] =\n\t\tuseState<SelectedVariable>(prevVariable);\n\tconst [varModalVisible, setVarModalVisible] = useState<boolean>(false);\n\tconst [addVarRefVisible, setAddVarRefVisible] = useState<boolean>(false);\n\tconst [curCursorPosition, setCurCursorPosition] = useState<number>(0);\n\n\tfunction insertString(originalString, stringToInsert, position) {\n\t\tconst modifiedString =\n\t\t\toriginalString.slice(0, position) +\n\t\t\tstringToInsert +\n\t\t\toriginalString.slice(position);\n\t\treturn modifiedString;\n\t}\n\n\tuseEffect(() => {\n\t\tif (!selectedVariable \|\| !selectedVariable.actualValue) {\n\t\t\treturn;\n\t\t}\n\t\tif (allowMix) {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: insertString(\n\t\t\t\t\tprev.actualValue,\n\t\t\t\t\tselectedVariable.actualValue,\n\t\t\t\t\tcurCursorPosition,\n\t\t\t\t),\n\t\t\t\tvariableType: 'string',\n\t\t\t}));\n\t\t\tif (inputRef.current) {\n\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\tconst newPos =\n\t\t\t\t\tcurCursorPosition + selectedVariable.actualValue.length + 2;\n\t\t\t\t(inputRef.current as any).setSelectionRange(newPos, newPos);\n\t\t\t\tsetCurCursorPosition(newPos);\n\t\t\t}\n\t\t} else {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: selectedVariable.actualValue,\n\t\t\t\tvariableType: selectedVariable.variableType,\n\t\t\t\tneedsFetching: selectedVariable.needsFetching,\n\t\t\t}));\n\t\t}\n\t}, [selectedVariable]);\n\n\tuseEffect(() => {\n\t\t// don't call onChange on initial render\n\t\tif (initialRender.current) {\n\t\t\tinitialRender.current = false;\n\t\t} else {\n\t\t\tonChange(displayValue);\n\t\t}\n\t}, [displayValue]);\n\n\treturn (\n\t\t<>\n\t\t\t<StyledInput\n\t\t\t\tisVar={/^{{.}}$/.test(displayValue.actualValue)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\tonEnterPress?.(displayValue.actualValue);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\thintText={hintText}\n\t\t\t\t\ttype={type ?? 'text'}\n\t\t\t\t\tid={id}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tskipFocus={true}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tvalue={displayValue.actualValue}\n\t\t\t\t\tvalidate={(_) => [true, '']}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tnoMaxCharCheck={noMaxCharCheck}\n\t\t\t\t\tmaxCharLimit={maxCharLimit}\n\t\t\t\t\tlabelText={labelText}\n\t\t\t\t\tlabelElement={labelElement}\n\t\t\t\t\tplaceholder={placeHolder \|\| 'Add a value'}\n\t\t\t\t\tonClick={(event?: Event \| undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonChangeText={(input: string, event?: Event \| undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (onlyVariables) {\n\t\t\t\t\t\t\tconst key = (event as any)?.keyCode \|\| (event as any)?.charCode;\n\n\t\t\t\t\t\t\tif (key === 8 \|\| key === 46) {\n\t\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\t\tactualValue: '',\n\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!allowMix) {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input.replace(/{{.}}/, ''),\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input,\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonReferenceInit={() => {\n\t\t\t\t\t\t/* Bypass eslint */\n\t\t\t\t\t}}\n\t\t\t\t\tonFocus={(e: any) => {\n\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\tsetAddVarRefVisible(true);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\tonBlur?.(e, displayValue);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\te.relatedTarget?.id === 'addVar' \|\|\n\t\t\t\t\t\t\te.relatedTarget?.id === 'variable-picker-v3' \|\|\n\t\t\t\t\t\t\te.relatedTarget?.className?.includes('accordion') \|\|\n\t\t\t\t\t\t\te.relatedTarget?.id === 'back-btn-v3'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\t\t(inputRef.current as any).focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else if (e.relatedTarget?.id === 'search-bar-v3-picker') {\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetIsActive(false);\n\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\tsetAddVarRefVisible(false);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{displayValue.actualValue && showHelp && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 4,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyCaption>{`This value is of type ${displayValue.variableType}`}</BodyCaption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showAddButton && addVarRefVisible && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ marginTop: errorMessage \|\| hintText ? '-24px' : '0px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\t\tref={superRef}\n\t\t\t\t\t\t\t\tid={`addVar`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(!varModalVisible);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(!varModalVisible);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t\t<PlusIcon color=\"white\" />\n\t\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</StyledInput>\n\t\t\t{varModalVisible && (\n\t\t\t\t<>\n\t\t\t\t\t{pickerType === PickerType.EMBEDDED ? (\n\t\t\t\t\t\t<CustomPortal zIndex={101} element={portalElement ?? document.body}>\n\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\twidth={'344px'}\n\t\t\t\t\t\t\t\tshowRecommendedBar={showRecommendedBar}\n\t\t\t\t\t\t\t\tshowSearch={showSearch}\n\t\t\t\t\t\t\t\tshowHeader={showVarHeader}\n\t\t\t\t\t\t\t\theaderText={varHeaderText}\n\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CustomPortal>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div style={{ zIndex: 101, position: 'relative' }}>\n\t\t\t\t\t\t\t<Floater refElement={superRef}>\n\t\t\t\t\t\t\t\t<div style={{ height: 500 }}>\n\t\t\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\t\t\tshowRecommendedBar={showRecommendedBar}\n\t\t\t\t\t\t\t\t\t\tshowSearch={showSearch}\n\t\t\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Floater>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst StyledInput = styled.div<{ isVar: boolean }>`\n\tposition: relative;\n\tmargin-bottom: 12px;\n\tinput {\n\t\tcolor: ${(props) => (props.isVar ? COLORS.stroke.brand : 'black')};\n\t}\n`;\n"],"names":["InputWithVariables","type","allowMix","onChange","prevVariable","variablesList","onBlur","onlyVariables","placeHolder","showAddButton","showHelp","errorMessage","maxCharLimit","noMaxCharCheck","labelText","labelElement","isRequired","hintText","onEnterPress","pickerType","PickerType","portalElement","showVarHeader","varHeaderText","onPickerToggle","showRecommendedBar","showSearch","superRef","useRef","initialRender","inputRef","isActive","setIsActive","useState","id","v4","selectedVariable","setSelectedVariable","displayValue","setDisplayValue","varModalVisible","setVarModalVisible","addVarRefVisible","setAddVarRefVisible","curCursorPosition","setCurCursorPosition","insertString","originalString","stringToInsert","position","useEffect","prev","newPos","jsxs","Fragment","StyledInput","jsx","Input","_","event","input","key","BodyCaption","AddVariableStyled","PlusIcon","CustomPortal","VariablePicker","variable","Floater","styled","props","COLORS"],"mappings":"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"}

package/dist/cjs/components/list-item/ListItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),g=require("./themes.js"),a=require("../TypographyStyle.js"),x=require("../../constants/Theme.js"),q=require("./ListItem.styled.js"),h=m.forwardRef(({id:p,onSelect:l,variant:r="default",trailingIcon:s,leadingIcon:d,subText:c,listItem:i,borderBottom:f,customComponent:n,customListItemLabel:o,version:t,brandSelectedRow:y,...j},u)=>e.jsx(q.ListItem,{ref:u,id:p,variant:r,onClick:()=>l&&l(i),borderBottom:f,version:t,brandSelectedRow:y,...j,children:n?e.jsx(e.Fragment,{children:n}):e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[!!d&&d,e.jsxs("div",{style:{display:"flex",rowGap:"4px",flexDirection:"column",overflow:"hidden"},children:[o?e.jsx(e.Fragment,{children:o}):e.jsx(e.Fragment,{children:!!i&&e.jsx(a.BodySecondary,{style:{fontSize:`${t==="2.0"||t==="3.0"?12:14}px`,color:g.getColor(r,t,y),textOverflow:"ellipsis",display:"block"},children:i.label})}),!!c&&e.jsx(a.BodyCaption,{style:{color:r==="inactive"?x.COLORS.content.inactive:x.COLORS.text.secondary},children:c})]}),!!s&&e.jsx("div",{style:{display:"flex",marginLeft:"auto"},children:s})]})}));h.displayName="ListItem";exports.ListItem=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),m=require("./themes.js"),y=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),g=require("./ListItem.styled.js"),x=u.forwardRef(({id:h,onSelect:i,variant:t="default",trailingIcon:l,leadingIcon:s,subText:d,listItem:r,borderBottom:p,customComponent:n,customListItemLabel:o,version:c,...f},j)=>e.jsx(g.ListItem,{ref:j,id:h,variant:t,onClick:()=>i&&i(r),borderBottom:p,version:c,...f,children:n?e.jsx(e.Fragment,{children:n}):e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[!!s&&s,e.jsxs("div",{style:{display:"flex",rowGap:"4px",flexDirection:"column",overflow:"hidden"},children:[o?e.jsx(e.Fragment,{children:o}):e.jsx(e.Fragment,{children:!!r&&e.jsx(y.BodySecondary,{style:{fontSize:`${c==="2.0"?12:14}px`,color:m.getColor(t),textOverflow:"ellipsis",display:"block"},children:r.label})}),!!d&&e.jsx(y.BodyCaption,{style:{color:t==="inactive"?a.COLORS.content.inactive:a.COLORS.text.secondary},children:d})]}),!!l&&e.jsx("div",{style:{display:"flex",marginLeft:"auto"},children:l})]})}));x.displayName="ListItem";exports.ListItem=x;
 //# sourceMappingURL=ListItem.js.map

package/dist/cjs/components/list-item/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\~~tbrandSelectedRow,\n\~~t~~\t\t~~...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\~~tbrandSelectedRow={brandSelectedRow}\n\~~t~~\t\t\t~~{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${~~\n\t\t\t\t\t\t\t\t\t\t\t\t\tversion~~ === '2.0' ~~\|\| version === '3.0'~~ ? 12 : 14~~\n\t\t\t\t\t\t\t\t\t\t\t\t~~}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant~~, version, brandSelectedRow~~),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tvariant === 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.text.secondary,\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\t\t{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","~~brandSelectedRow","~~rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":"4QAOaA,EAAWC,EAAAA,WACvB,CACC,CACC,GAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,UACV,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,QAAAC,EACA,~~iBAAAC,EACA,~~GAAGC,CAAA,EAEJC,IAGCC,EAAAA,IAACC,EAAAA,SAAA,CACA,IAAAF,EACA,~~GAAAb~~,EACA,QAAAE,EACA,QAAS,IAAMD,GAAYA,EAASK,CAAQ,EAC5C,aAAAC,EACA,QAAAG,~~EACA,iBAAAC,~~EACC,GAAGC,EAEH,~~SAAAJ~~,~~EACAM~~,MAAAE,EAAAA,SAAA,CAAG,~~SAAAR~~,CAAA,CAAgB,~~EAEnBS~~,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,IAAK,EACL,MAAO,MAAA,EAGP,SAAA,CAAA,CAAC,~~CAACb~~,GAAeA,~~EAClBa~~,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,OAAQ,MACR,cAAe,SACf,SAAU,QAAA,EAGV,SAAA,~~CAAAR~~,oBACG,SAAAA,CAAA,CAAoB,~~EAEvBK~~,EAAAA,IAAAE,EAAAA,SAAA,CACE,SAAA,CAAC,~~CAACV~~,~~GACFQ~~,EAAAA,IAACI,EAAAA,cAAA,CACA,MAAO,CACN,SAAU,~~GACTR~~,IAAY,~~OAASA,IAAY,~~MAAQ,GAAK,~~EAC/C~~,~~KACA~~,~~MAAOS~~,EAAAA,~~SAASjB~~,~~EAASQ~~,~~EAASC~~,~~CAAgB,EAClD,~~aAAc,WACd,QAAS,OAAA,EAGT,~~SAAAL~~,EAAS,KAAA,CAAA,EAGb,EAGA,CAAC,CAACD,~~GACFS~~,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CACN,~~MACClB~~,IAAY,~~WACTmB~~,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,KAAK,SAAA,EAGhB,~~SAAAhB~~,CAAA,CAAA,CACF,CAAA,CAAA,EAGD,CAAC,CAACF,~~GACFW~~,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QACzC,~~SAAAX~~,CAAA,CACF,CAAA,CAAA,CAAA,CAEF,CAAA,CAKL,EAEAL,EAAS,YAAc"}
1	+ {"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${version === '2.0' ? 12 : 14}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tvariant === 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.text.secondary,\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\t\t{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":"4QAOaA,EAAWC,EAAAA,WACvB,CACC,CACC,GAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,UACV,aAAAC,EACA,YAAAC,EACA,QAAAC,EACA,SAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,oBAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EAEJC,IAGCC,EAAAA,IAACC,EAAAA,SAAA,CACA,IAAAF,EACA,GAAAZ,EACA,QAAAE,EACA,QAAS,IAAMD,GAAYA,EAASK,CAAQ,EAC5C,aAAAC,EACA,QAAAG,EACC,GAAGC,EAEH,SAAAH,EACAK,MAAAE,EAAAA,SAAA,CAAG,SAAAP,CAAA,CAAgB,EAEnBQ,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,IAAK,EACL,MAAO,MAAA,EAGP,SAAA,CAAA,CAAC,CAACZ,GAAeA,EAClBY,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,OAAQ,MACR,cAAe,SACf,SAAU,QAAA,EAGV,SAAA,CAAAP,oBACG,SAAAA,CAAA,CAAoB,EAEvBI,EAAAA,IAAAE,EAAAA,SAAA,CACE,SAAA,CAAC,CAACT,GACFO,EAAAA,IAACI,EAAAA,cAAA,CACA,MAAO,CACN,SAAU,GAAGP,IAAY,MAAQ,GAAK,EAAE,KACxC,MAAOQ,EAAAA,SAAShB,CAAO,EACvB,aAAc,WACd,QAAS,OAAA,EAGT,SAAAI,EAAS,KAAA,CAAA,EAGb,EAGA,CAAC,CAACD,GACFQ,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CACN,MACCjB,IAAY,WACTkB,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,KAAK,SAAA,EAGhB,SAAAf,CAAA,CAAA,CACF,CAAA,CAAA,EAGD,CAAC,CAACF,GACFU,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QACzC,SAAAV,CAAA,CACF,CAAA,CAAA,CAAA,CAEF,CAAA,CAKL,EAEAL,EAAS,YAAc"}

package/dist/cjs/components/list-item/ListItem.styled.js CHANGED Viewed

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),o=require("../../constants/Theme.js"),r=require("./themes.js"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(t),d=n.default.div`
-	border-bottom: ${e=>e.borderBottom||`${e.version==="2.0"||e.version==="3.0"?0:1}px solid ${o.COLORS.stroke.primary}`};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),o=require("../../constants/Theme.js"),r=require("./themes.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},s=i(e),n=s.default.div`
+	border-bottom: ${t=>t.borderBottom||`${t.version==="2.0"?0:1}px solid ${o.COLORS.stroke.primary}`};
 	display: flex;
 	align-items: center;
 	justify-content: start;
 	column-gap: 12px;
-	padding: ${e=>e.version==="2.0"?"8px 12px":"12px 16px"};
-	${e=>r.getTheme(e.variant,e.version,e.brandSelectedRow)};
-	border-radius: ${e=>e.brandSelectedRow?0:e.version==="2.0"?8:0}px;
-`;exports.ListItem=d;
+	padding: ${t=>t.version==="2.0"?"8px 12px":"12px 16px"};
+	${t=>r.getTheme(t.variant,t.version)};
+	border-radius: ${t=>t.version==="2.0"?8:0}px;
+`;exports.ListItem=n;
 //# sourceMappingURL=ListItem.styled.js.map

package/dist/cjs/components/list-item/ListItem.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' \| '2.0' ~~\| '3.0'~~;\n~~\tbrandSelectedRow?: boolean;\n~~}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom \|\|\n\t\t`${props.version === '2.0' ~~\|\| props.version === '3.0'~~ ? 0 : 1}px solid ${~~\n\t\t\tCOLORS~~.stroke.primary~~\n\t\t~~}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version~~, props.brandSelectedRow~~)};\n\tborder-radius: ${(props) ~~=>\n\t\tprops.brandSelectedRow~~ ~~? 0 :~~ props.version === '2.0' ? 8 : 0}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":"mPAKaA,EAAWC,EAAAA,QAAO;AAAA,~~kBAMZC~~,GACjBA,EAAM,cACN,GAAGA,EAAM,UAAY,~~OAASA,EAAM,UAAY,~~MAAQ,EAAI,CAAC,~~YAC5DC~~,EAAAA,OAAO,OAAO,~~OACf~~,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,~~YAKSD~~,GAAWA,EAAM,UAAY,MAAQ,WAAa,WAAY;AAAA,GACvEA,GAAUE,~~EAAAA~~,~~SAASF,~~EAAM,QAASA,EAAM,~~QAASA~~,~~EAAM,gBAAgB,~~CAAC;AAAA,~~kBACzDA~~,~~GACjBA~~,EAAM,~~iBAAmB,EAAIA,EAAM,~~UAAY,MAAQ,EAAI,~~CAAC~~;AAAA"}
1	+ {"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' \| '2.0';\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom \|\|\n\t\t`${props.version === '2.0' ? 0 : 1}px solid ${COLORS.stroke.primary}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version)};\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 0)}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":"mPAKaA,EAAWC,EAAAA,QAAO;AAAA,kBAKZC,GACjBA,EAAM,cACN,GAAGA,EAAM,UAAY,MAAQ,EAAI,CAAC,YAAYC,EAAAA,OAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1DD,GAAWA,EAAM,UAAY,MAAQ,WAAa,WAAY;AAAA,GACvEA,GAAUE,WAASF,EAAM,QAASA,EAAM,OAAO,CAAC;AAAA,kBACjCA,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA"}

package/dist/cjs/components/list-item/themes.js CHANGED Viewed

@@ -1,42 +1,30 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../constants/Theme.js");function a(t,o,c){switch(t){case"default":case"readonly":return`${r.COLORS.text.primary}`;case"selected":return o==="3.0"||c?`${r.COLORS.text.primary}`:`${r.COLORS.content.positive}`;case"inactive":return`${r.COLORS.content.inactive}`;case"error":return`${r.COLORS.content.negative}`;case"placeholder":return`${r.COLORS.content.placeholder}`;default:return`${r.COLORS.text.primary}`}}function n(t,o,c){if(c&&t==="selected")return e.css`
-			color: ${r.COLORS.text.primary};
-			background: ${r.COLORS.background.brandLight};
-			&:hover {
-				background: ${r.COLORS.background.brandLight};
-			}
-		`;switch(t){case"default":return e.css`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),e=require("../../constants/Theme.js");function c(t){switch(t){case"default":case"readonly":return`${e.COLORS.text.primary}`;case"selected":return`${e.COLORS.content.positive}`;case"inactive":return`${e.COLORS.content.inactive}`;case"error":return`${e.COLORS.content.negative}`;case"placeholder":return`${e.COLORS.content.placeholder}`;default:return`${e.COLORS.text.primary}`}}function a(t,o){switch(t){case"default":return r.css`
 				cursor: pointer;
-				color: ${r.COLORS.text.primary};
-				background-color: ${r.COLORS.surface.standard};
+				color: ${e.COLORS.text.primary};
+				background-color: ${e.COLORS.surface.standard};
 				&:hover {
-					background-color: ${r.COLORS.surface.hovered};
+					background-color: ${e.COLORS.surface.hovered};
 				}
-			`;case"selected":return o==="3.0"?e.css`
-					color: ${r.COLORS.text.primary};
-					background: ${r.COLORS.background.brandLight};
-					&:hover {
-						background: ${r.COLORS.background.brandLight};
-					}
-				`:e.css`
-				color: ${r.COLORS.content.positive};
-				background: ${r.COLORS.background.positive.light};
+			`;case"selected":return r.css`
+				color: ${e.COLORS.content.positive};
+				background: ${e.COLORS.background.positive.light};
 				box-shadow: ${o==="2.0"?"0":"0 2px 8px rgba(0, 0, 0, 0.12)"};
-			`;case"inactive":return e.css`
-				color: ${r.COLORS.content.inactive};
-				background-color: ${r.COLORS.surface.standard};
+			`;case"inactive":return r.css`
+				color: ${e.COLORS.content.inactive};
+				background-color: ${e.COLORS.surface.standard};
 				cursor: not-allowed;
-			`;case"readonly":return e.css`
-				color: ${r.COLORS.text.primary};
-			`;case"separator":return e.css`
-				color: ${r.COLORS.content.inactive};
-				background-color: ${r.COLORS.background.base};
+			`;case"readonly":return r.css`
+				color: ${e.COLORS.text.primary};
+			`;case"separator":return r.css`
+				color: ${e.COLORS.content.inactive};
+				background-color: ${e.COLORS.background.base};
 				cursor: none;
 				padding: 8px 16px;
-			`;default:return e.css`
-				color: ${r.COLORS.text.primary};
-				background-color: ${r.COLORS.surface.standard};
+			`;default:return r.css`
+				color: ${e.COLORS.text.primary};
+				background-color: ${e.COLORS.surface.standard};
 				&:hover {
-					background-color: ${r.COLORS.surface.hovered};
+					background-color: ${e.COLORS.surface.hovered};
 				}
-			`}}exports.getColor=a;exports.getTheme=n;
+			`}}exports.getColor=c;exports.getTheme=a;
 //# sourceMappingURL=themes.js.map

package/dist/cjs/components/list-item/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(~~\n\tvariant~~: Variant~~,\n\tversion?: '1.0' \| '2.0' \| '3.0',\n\tbrandSelectedRow?: boolean,\n~~) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\~~tif (version === '3.0' \|\| brandSelectedRow)\n\t\t\t\~~treturn `${COLORS.~~text.primary}`;\n\t\t\treturn `${COLORS.~~content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(~~\n\tvariant~~: Variant~~,\n\tversion~~?: '1.0' \| '2.0' ~~\| '3.0',\n\tbrandSelectedRow?: boolean,\n~~) {\n\tif (brandSelectedRow && variant === 'selected') {\n\t\treturn css`\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t&:hover {\n\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t}\n\t\t`;\n\t}\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\~~tif (version === '3.0') {\n\t\t\t\~~treturn css`\n\t\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t`;\n\t\t\t}\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","~~version~~","~~brandSelectedRow~~","~~COLORS~~","~~getTheme","~~css"],"mappings":"2JAIO,SAASA,~~EACfC~~,~~EACAC~~,~~EACAC~~,~~EACC~~,~~CACD,OAAQF,~~EAAA,CACP,IAAK,UACL,IAAK,WACJ,MAAO,~~GAAGG~~,EAAAA,OAAO,KAAK,OAAO,GAC9B,IAAK,WACJ,~~OAAIF~~,~~IAAY,OAASC,EACjB,GAAGC,EAAAA,OAAO,KAAK,OAAO,GACvB,~~GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,WACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,QACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,cACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,WAAW,GACrC,QACC,MAAO,GAAGA,EAAAA,OAAO,KAAK,OAAO,EAAA,CAEhC,CAEO,SAASC,~~EACfJ~~,~~EACAC~~,~~EACAC~~,~~EACC~~,~~CACD,GAAIA,GAAoBF,IAAY,WACnC,OAAOK,EAAAA;AAAAA,YACGF,EAAAA,OAAO,KAAK,OAAO;AAAA,iBACdA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,kBAE3BA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,IAI7C,~~OAAQH,EAAA,CACP,IAAK,UACJ,~~OAAOK~~,EAAAA;AAAAA;AAAAA,~~aAEGF~~,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,KAG7C,IAAK,WACJ,~~OAAIF~~,~~IAAY,MACRI,~~EAAAA;AAAAA,~~cACGF~~,EAAAA,OAAO,~~KAAK,OAAO;AAAA,mBACdA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,oBAE3BA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA,MAItCE,EAAAA;AAAAA,aACGF,EAAAA,OAAO,~~QAAQ,QAAQ;AAAA,kBAClBA,SAAO,WAAW,SAAS,KAAK;AAAA,~~kBAChCF~~,IAAY,MACvB,IACA,+BAA+B;AAAA,KAEpC,IAAK,WACJ,~~OAAOI~~,EAAAA;AAAAA,~~aACGF~~,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,KAG7C,IAAK,WACJ,~~OAAOE~~,EAAAA;AAAAA,~~aACGF~~,EAAAA,OAAO,KAAK,OAAO;AAAA,KAE9B,IAAK,YACJ,~~OAAOE~~,EAAAA;AAAAA,~~aACGF~~,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,KAI5C,QACC,~~OAAOE~~,EAAAA;AAAAA,~~aACGF~~,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAAA,CAI/C"}
1	+ {"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(variant: Variant) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\treturn `${COLORS.content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(variant: Variant, version?: '1.0' \| '2.0') {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","COLORS","getTheme","version","css"],"mappings":"2JAIO,SAASA,EAASC,EAAkB,CAC1C,OAAQA,EAAA,CACP,IAAK,UACL,IAAK,WACJ,MAAO,GAAGC,EAAAA,OAAO,KAAK,OAAO,GAC9B,IAAK,WACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,WACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,QACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,QAAQ,GAClC,IAAK,cACJ,MAAO,GAAGA,EAAAA,OAAO,QAAQ,WAAW,GACrC,QACC,MAAO,GAAGA,EAAAA,OAAO,KAAK,OAAO,EAAA,CAEhC,CAEO,SAASC,EAASF,EAAkBG,EAAyB,CACnE,OAAQH,EAAA,CACP,IAAK,UACJ,OAAOI,EAAAA;AAAAA;AAAAA,aAEGH,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,KAG7C,IAAK,WACJ,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,QAAQ,QAAQ;AAAA,kBAClBA,SAAO,WAAW,SAAS,KAAK;AAAA,kBAChCE,IAAY,MACvB,IACA,+BAA+B;AAAA,KAEpC,IAAK,WACJ,OAAOC,EAAAA;AAAAA,aACGH,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,KAG7C,IAAK,WACJ,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,KAAK,OAAO;AAAA,KAE9B,IAAK,YACJ,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA,KAI5C,QACC,OAAOG,EAAAA;AAAAA,aACGH,EAAAA,OAAO,KAAK,OAAO;AAAA,wBACRA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAAA,CAI/C"}

package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../constants/Theme.js"),x=require("../TypographyStyle.js"),M=require("./MenuItem.js"),m=require("./MultiLevelDropdown.styled.js"),h=({width:n,onDropdownItemClick:o,option:t,parents:u,allowParentSelection:s,maxLevels:i,hideGroupLabel:l,currentLevel:p,renderNestedMenu:c,version:r})=>e.jsxs(m.GroupedMenuListContainer,{version:r,children:[!l&&e.jsx(x.BodyTiny,{style:{padding:"4px 8px 4px 12px",cursor:"default"},color:y.COLORS.content.placeholder,children:t.label}),t.options.map((d,a)=>e.jsx(M.MenuItem,{width:n,onDropdownItemClick:o,option:d,parents:u,allowParentSelection:s,maxLevels:i,currentLevel:p,renderNestedMenu:c,version:r},a))]});exports.GroupedMenuList=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../constants/Theme.js"),y=require("../TypographyStyle.js"),x=require("./MenuItem.js"),M=require("./MultiLevelDropdown.styled.js"),m=({width:t,onDropdownItemClick:n,option:r,parents:o,allowParentSelection:u,maxLevels:s,hideGroupLabel:i,currentLevel:l,renderNestedMenu:p})=>e.jsxs(M.GroupedMenuListContainer,{children:[!i&&e.jsx(y.BodyTiny,{style:{padding:"4px 8px 4px 12px",cursor:"default"},color:a.COLORS.content.placeholder,children:r.label}),r.options.map((c,d)=>e.jsx(x.MenuItem,{width:t,onDropdownItemClick:n,option:c,parents:o,allowParentSelection:u,maxLevels:s,currentLevel:l,renderNestedMenu:p},d))]});exports.GroupedMenuList=m;
 //# sourceMappingURL=GroupedMenuList.js.map

package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n~~\tversion?: '1.0' \| '2.0' \| '3.0';\n~~}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n~~\tversion,\n~~}) => {\n\treturn (\n\t\t<GroupedMenuListContainer ~~version={version}~~>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t~~\tversion={version}\n\t\t\t\t~~/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","~~version","jsxs","~~GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":"qQAWaA,~~EAcR~~,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,~~EACA,QAAAC,~~CACD,~~IAEEC~~,~~OAACC~~,~~EAAAA~~,~~0BAAyB,QAAAF,EACxB,~~SAAA,CAAA,CAACH,~~GACDM~~,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,QAAS,mBACT,OAAQ,SAAA,EAET,MAAOC,EAAAA,OAAO,QAAQ,YAErB,~~SAAAZ~~,EAAO,KAAA,CAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,~~EAAQa~~,IAC5BH,EAAAA,IAACI,EAAAA,SAAA,CAEA,~~MAAAhB~~,EACA,oBAAAC,EACA,OAAQC,EACR,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAE,EACA,iBAAAC,~~EACA,QAAAC,~~CAAA,~~EATKM~~,CAAA,~~CAWN~~,CAAA,EACF"}
1	+ {"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\treturn (\n\t\t<GroupedMenuListContainer>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":"qQAWaA,EAaR,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,CACD,WAEGC,2BAAA,CACC,SAAA,CAAA,CAACH,GACDI,EAAAA,IAACC,EAAAA,SAAA,CACA,MAAO,CACN,QAAS,mBACT,OAAQ,SAAA,EAET,MAAOC,EAAAA,OAAO,QAAQ,YAErB,SAAAV,EAAO,KAAA,CAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,EAAQW,IAC5BH,EAAAA,IAACI,EAAAA,SAAA,CAEA,MAAAd,EACA,oBAAAC,EACA,OAAQC,EACR,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAE,EACA,iBAAAC,CAAA,EARKK,CAAA,CAUN,CAAA,EACF"}

package/dist/cjs/components/multi-level-dropdown/MenuItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),T=require("../../assets/icons/chevronRight2.svg.js"),x=require("react"),n=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),v=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=v(x),q=({width:r,onDropdownItemClick:f,option:e,parents:O,allowParentSelection:y,maxLevels:S,currentLevel:h,renderNestedMenu:R,version:l})=>{const[C,b]=o.default.useState(!1),[c,g]=o.default.useState(!1),[m,j]=o.default.useState({top:0,left:0}),L=x.useRef({top:0,left:0}),d=!!e.children&&e.children.length>0,u=d&&(S===void 0||h<S),p=()=>{!f||(e.disabled??!1)||(!d||y)&&f(e,O)},I=a=>{const i=a.currentTarget.getBoundingClientRect();j({top:i.top,left:i.right}),L.current={top:i.top,left:i.right}};return t.jsxs(s.MenuItemWrapper,{version:l,onMouseEnter:a=>{u&&(b(!0),I(a))},onMouseLeave:()=>{b(!1)},onClick:a=>{a.stopPropagation(),p()},id:"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?n.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:t.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:C,isHovered:c,isDisabled:e.disabled??!1,version:l,children:[t.jsxs(s.ContentContainer,{children:[e.leadingIcon&&t.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),t.jsxs("div",{children:[t.jsx(M.BodyCaption,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary},children:e.label}),e.subText&&t.jsx(M.BodyTiny,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),d?t.jsx(s.TrailingIconContainer,{children:t.jsx(T.default,{width:16,height:16,color:!u||(e.disabled??!1)?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary})}):e.trailingIcon?t.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):t.jsx(t.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&u&&C&&t.jsx(s.SubMenuContainer,{width:r,className:"submenu",onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),children:t.jsx(s.StyledSubMenuWrapper,{width:r,top:m.top,left:m.left,children:t.jsx(s.SubMenuListContainer,{version:l,children:R(e.children,[...O,e],h+1)})})})]})};exports.MenuItem=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),L=require("../../assets/icons/chevronRight2.svg.js"),m=require("react"),n=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),p=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},u=p(m),T=({width:r,onDropdownItemClick:o,option:e,parents:f,allowParentSelection:j,maxLevels:h,currentLevel:b,renderNestedMenu:x})=>{const[S,C]=u.default.useState(!1),[a,O]=u.default.useState(!1),[g,y]=u.default.useState({top:0,left:0}),R=m.useRef({top:0,left:0}),i=!!e.children&&e.children.length>0,d=i&&(h===void 0||b<h),v=()=>{!o||(e.disabled??!1)||(!i||j)&&o(e,f)},I=l=>{const c=l.currentTarget.getBoundingClientRect();y({top:c.top,left:c.right}),R.current={top:c.top,left:c.right}};return t.jsxs(s.MenuItemWrapper,{onMouseEnter:l=>{d&&(C(!0),I(l))},onMouseLeave:()=>{C(!1)},onClick:l=>{l.stopPropagation(),v()},id:"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?n.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:t.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:S,isHovered:a,isDisabled:e.disabled??!1,children:[t.jsxs(s.ContentContainer,{children:[e.leadingIcon&&t.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),t.jsxs("div",{children:[t.jsx(M.BodyCaption,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.primary},children:e.label}),e.subText&&t.jsx(M.BodyTiny,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),i?t.jsx(s.TrailingIconContainer,{children:t.jsx(L.default,{width:16,height:16,color:!d||(e.disabled??!1)?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.primary})}):e.trailingIcon?t.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):t.jsx(t.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&d&&S&&t.jsx(s.SubMenuContainer,{width:r,className:"submenu",onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),children:t.jsx(s.StyledSubMenuWrapper,{width:r,top:g.top,left:g.left,children:t.jsx(s.SubMenuListContainer,{children:x(e.children,[...f,e],b+1)})})})]})};exports.MenuItem=T;
 //# sourceMappingURL=MenuItem.js.map

package/dist/cjs/components/multi-level-dropdown/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n~~\tversion?: '1.0' \| '2.0' \| '3.0';\n~~}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n~~\tversion,\n~~}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined \|\| currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick \|\| (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren \|\| allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\~~tversion={version}\n\t\t\~~tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t~~\tversion={version}\n\t\t\t\t~~>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? ~~version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t?~~ COLORS.~~text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.~~content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? ~~version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t\t?~~ COLORS.~~text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.~~content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\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\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu \|\| (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? ~~version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t?~~ COLORS.~~text.primary\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.~~content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer ~~version={version}~~>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","~~version","~~isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"iXAoBaA,~~EAaR~~,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAC,EACA,iBAAAC,~~EACA,QAAAC,~~CACD,IAAM,CACL,KAAM,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,QAAM,SAAS,EAAK,EACxD,CAACC,EAAkBC,CAAmB,EAAIF,EAAAA,QAAM,SAAS,EAAK,EAC9D,CAACG,EAAiBC,CAAkB,EAAIJ,EAAAA,QAAM,SAAS,CAC5D,IAAK,EACL,KAAM,CAAA,CACN,EACKK,EAAcC,EAAAA,OAAY,CAAE,IAAK,EAAG,KAAM,EAAG,EAC7CC,EAAc,CAAC,~~CAAChB~~,EAAO,UAAYA,EAAO,SAAS,OAAS,~~EAC5DiB~~,EACLD,~~IAAgBb~~,IAAc,QAAaC,EAAeD,~~GAErDe~~,EAA4B,IAAM,CACnC,~~CAACnB~~,IAAwBC,EAAO,UAAY,MAI5C,~~CAACgB~~,~~GAAed~~,IACnBH,EAAoBC,EAAQC,CAAO,CAErC,~~EAEMkB~~,EAA4BC,GAA4B,CAC7D,MAAMC,EAAQD,EAAM,cAA8B,sBAAA,EAClDP,EAAmB,CAClB,IAAKQ,EAAK,IACV,KAAMA,EAAK,KAAA,CACX,EACDP,EAAY,QAAU,CACrB,IAAKO,EAAK,IACV,KAAMA,EAAK,KAAA,CAEb,EAEA,OACCC,EAAAA,KAACC,EAAAA,gBAAA,CACA,~~QAAAjB~~,~~EACA,aAAec,~~GAAU,CACpBH,IACHT,EAAiB,EAAI,EACrBW,EAAyBC,CAAK,EAEhC,EACA,aAAc,IAAM,CACnBZ,EAAiB,EAAK,CACvB,EACA,QAAUgB,GAAM,CACfA,EAAE,gBAAA,EACFN,EAAA,CACD,EACA,GAAG,kBACH,MAAO,CACN,~~OAAQlB~~,EAAO,UAAY,GAAQ,cAAgB,UACnD,gBACCA,EAAO,UAAY,~~GAAQyB~~,EAAAA,OAAO,QAAQ,SAAW,aAAA,EAGtD,SAAA,~~CAAAzB~~,EAAO,gBACPA,EAAO,~~gBAEPsB~~,EAAAA,KAACI,EAAAA,kBAAA,CACA,~~WAAY1B~~,EAAO,SACnB,~~cAAAO~~,EACA,UAAWG,EACX,~~WAAYV~~,EAAO,UAAY,~~GAC~~/B,~~QAAAM,EAEA,~~SAAA,~~CAAAgB~~,OAACK,EAAAA,iBAAA,CACC,SAAA,~~CAAA3B~~,EAAO,~~aACP4B~~,MAACC,EAAAA,qBAAA,CAAsB,~~SAAA7B~~,EAAO,YAAY,SAE1C,MAAA,CACA,SAAA,~~CAAA4B~~,EAAAA,IAACE,EAAAA,YAAA,CACA,MAAO,CACN,~~MACC9B~~,EAAO,UAAY,~~GAChByB~~,EAAAA,OAAO,QAAQ,~~SACfzB~~,EAAO,~~UAAYU~~,~~EACnBJ~~,~~IAAY,MACXmB,SAAO,KAAK,QACZA,~~EAAAA,OAAO,QAAQ,~~SAChBA~~,EAAAA,OAAO,QAAQ,OAAA,EAGnB,~~SAAAzB~~,EAAO,KAAA,CAAA,EAERA,EAAO,~~SACP4B~~,EAAAA,IAACG,EAAAA,SAAA,CACA,MAAO,CACN,~~MACC/B~~,EAAO,UAAY,~~GAChByB~~,EAAAA,OAAO,QAAQ,~~SACfzB~~,EAAO,~~UAAYU~~,~~EACnBJ~~,~~IAAY,MACXmB,~~EAAAA,OAAO,~~KAAK~~,~~QACZA~~,EAAAA,OAAO,QAAQ,~~SAChBA,SAAO,QAAQ,~~UACnB,UAAW,KAAA,EAGX,~~SAAAzB~~,EAAO,OAAA,CAAA,CACT,CAAA,CAEF,CAAA,EACD,~~EACCgB~~,QACCgB,wBAAA,CACA,SAAAJ,EAAAA,IAACK,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MACC,CAAChB,~~IAAmBjB~~,EAAO,UAAY,~~IACpCyB~~,~~SAAO~~,QAAQ,~~SACfzB~~,EAAO,~~UAAYU~~,~~EACnBJ~~,~~IAAY,MACXmB,~~EAAAA,OAAO,~~KAAK,QACZA,EAAAA,OAAO,~~QAAQ,~~SAChBA~~,EAAAA,OAAO,QAAQ,OAAA,CAAA,CAEpB,CACD,~~EACGzB~~,EAAO,~~mBACTgC~~,EAAAA,sBAAA,CAAuB,~~SAAAhC~~,EAAO,YAAA,CAAa,~~EAE5C4B~~,EAAAA,IAAAM,EAAAA,SAAA,CAAA,CAAE,CAAA,CAAA,CAAA,EAKJ,~~EAAElC~~,EAAO,UAAY,KACrBA,EAAO,UACPA,EAAO,SAAS,OAAS,~~GACzBiB~~,GACAV,GACCqB,EAAAA,IAACO,EAAAA,iBAAA,CACA,~~MAAArC~~,EACA,UAAU,UACV,aAAc,~~IAAMa~~,EAAoB,EAAI,EAC5C,aAAc,IAAMA,EAAoB,EAAK,EAE7C,SAAAiB,EAAAA,IAACQ,EAAAA,qBAAA,CACA,~~MAAAtC~~,EACA,~~IAAKc~~,EAAgB,IACrB,KAAMA,EAAgB,KAEtB,~~SAAAgB~~,~~EAAAA~~,~~IAACS~~,~~EAAAA,sBAAqB,QAAA~~/B,~~EACpB,SAAAD,~~EACAL,EAAO,SACP,CAAC,GAAGC,EAASD,CAAM,EACnBI,EAAe,CAAA,CAChB,CACD,CAAA,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAIL"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined \|\| currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick \|\| (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren \|\| allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\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\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu \|\| (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}

package/dist/cjs/components/multi-level-dropdown/MenuList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),L=require("./GroupedMenuList.js"),x=require("./MenuItem.js"),b=require("./MultiLevelDropdown.styled.js"),y=({width:t,onDropdownItemClick:r,options:f,parents:j,allowParentSelection:n,maxLevels:M,hideGroupLabel:c,currentLevel:d,version:i})=>{const q=(e,u,g)=>s.jsx(y,{width:t,onDropdownItemClick:r,options:e,parents:u,allowParentSelection:n,maxLevels:M,hideGroupLabel:c,currentLevel:g,version:i});return s.jsx(b.StyledMenuList,{children:f.map((e,u)=>{if("value"in e)return s.jsx(x.MenuItem,{width:t,onDropdownItemClick:r,option:e,parents:j,allowParentSelection:n,maxLevels:M,currentLevel:d,renderNestedMenu:q,version:i},u);if("options"in e&&e.options.length>0)return s.jsx(L.GroupedMenuList,{width:t,onDropdownItemClick:r,option:e,parents:j,allowParentSelection:n,maxLevels:M,hideGroupLabel:c,currentLevel:d,renderNestedMenu:q,version:i},u)})})};exports.MenuList=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),g=require("./GroupedMenuList.js"),L=require("./MenuItem.js"),x=require("./MultiLevelDropdown.styled.js"),q=({width:r,onDropdownItemClick:t,options:y,parents:M,allowParentSelection:n,maxLevels:i,hideGroupLabel:j,currentLevel:c})=>{const d=(e,s,f)=>u.jsx(q,{width:r,onDropdownItemClick:t,options:e,parents:s,allowParentSelection:n,maxLevels:i,hideGroupLabel:j,currentLevel:f});return u.jsx(x.StyledMenuList,{children:y.map((e,s)=>{if("value"in e)return u.jsx(L.MenuItem,{width:r,onDropdownItemClick:t,option:e,parents:M,allowParentSelection:n,maxLevels:i,currentLevel:c,renderNestedMenu:d},s);if("options"in e&&e.options.length>0)return u.jsx(g.GroupedMenuList,{width:r,onDropdownItemClick:t,option:e,parents:M,allowParentSelection:n,maxLevels:i,hideGroupLabel:j,currentLevel:c,renderNestedMenu:d},s)})})};exports.MenuList=q;
 //# sourceMappingURL=MenuList.js.map

package/dist/cjs/components/multi-level-dropdown/MenuList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuList.js","sources":["../../../../src/components/multi-level-dropdown/MenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { GroupedMenuList } from './GroupedMenuList';\nimport { MenuItem } from './MenuItem';\nimport { StyledMenuList } from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, RenderNestedMenu } from './type';\n\nexport const MenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toptions: MultiLevelDropdownOption[];\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n~~\tversion?: '1.0' \| '2.0' \| '3.0';\n~~}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toptions,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n~~\tversion,\n~~}) => {\n\tconst renderNestedMenu: RenderNestedMenu = (\n\t\tnestedOptions,\n\t\tnestedParents,\n\t\tnestedCurrentLevel,\n\t) => (\n\t\t<MenuList\n\t\t\twidth={width}\n\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\toptions={nestedOptions}\n\t\t\tparents={nestedParents}\n\t\t\tallowParentSelection={allowParentSelection}\n\t\t\tmaxLevels={maxLevels}\n\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\tcurrentLevel={nestedCurrentLevel}\n\t\t~~\tversion={version}\n\t\t~~/>\n\t);\n\n\treturn (\n\t\t<StyledMenuList>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t~~\tversion={version}\n\t\t\t\t\t\t~~/>\n\t\t\t\t\t);\n\t\t\t\t} else if ('options' in option && option.options.length > 0) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GroupedMenuList\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t~~\tversion={version}\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</StyledMenuList>\n\t);\n};\n"],"names":["MenuList","width","onDropdownItemClick","options","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","~~version","~~renderNestedMenu","nestedOptions","nestedParents","nestedCurrentLevel","jsx","StyledMenuList","option","index","MenuItem","GroupedMenuList"],"mappings":"8NAMaA,~~EAaR~~,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,~~EACA,QAAAC,~~CACD,IAAM,CACL,MAAMC,EAAqC,CAC1CC,EACAC,EACAC,IAEAC,EAAAA,~~IAACd~~,EAAA,CACA,MAAAC,EACA,oBAAAC,EACA,~~QAASS~~,EACT,QAASC,EACT,~~qBAAAP~~,EACA,UAAAC,EACA,eAAAC,EACA,~~aAAcM~~,~~EACd,QAAAJ,~~CAAA,CAAA,~~EAIF~~,~~aACEM~~,EAAAA,eAAA,CACC,~~SAAAZ~~,EAAQ,IAAI,~~CAACa~~,EAAQC,IAAU,CAC/B,GAAI,UAAWD,EACd,OACCF,EAAAA,IAACI,EAAAA,SAAA,CAEA,~~MAAAjB~~,EACA,oBAAAC,EACA,~~OAAAc~~,EACA,~~QAAAZ~~,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAE,EACA,~~iBAAAE~~,~~EACA,QAAAD,~~CAAA,~~EATKQ~~,CAAA,~~KAYG~~,YAAaD,GAAUA,EAAO,QAAQ,OAAS,EACzD,OACCF,EAAAA,IAACK,EAAAA,gBAAA,CAEA,~~MAAAlB~~,EACA,oBAAAC,EACA,~~OAAAc~~,EACA,~~QAAAZ~~,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,~~iBAAAE~~,~~EACA,QAAAD,~~CAAA,~~EAVKQ~~,CAAA,~~CAcT~~,CAAC,CAAA,CACF,CAEF"}
1	+ {"version":3,"file":"MenuList.js","sources":["../../../../src/components/multi-level-dropdown/MenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { GroupedMenuList } from './GroupedMenuList';\nimport { MenuItem } from './MenuItem';\nimport { StyledMenuList } from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, RenderNestedMenu } from './type';\n\nexport const MenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toptions: MultiLevelDropdownOption[];\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toptions,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n}) => {\n\tconst renderNestedMenu: RenderNestedMenu = (\n\t\tnestedOptions,\n\t\tnestedParents,\n\t\tnestedCurrentLevel,\n\t) => (\n\t\t<MenuList\n\t\t\twidth={width}\n\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\toptions={nestedOptions}\n\t\t\tparents={nestedParents}\n\t\t\tallowParentSelection={allowParentSelection}\n\t\t\tmaxLevels={maxLevels}\n\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\tcurrentLevel={nestedCurrentLevel}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<StyledMenuList>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} else if ('options' in option && option.options.length > 0) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GroupedMenuList\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\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</StyledMenuList>\n\t);\n};\n"],"names":["MenuList","width","onDropdownItemClick","options","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","nestedOptions","nestedParents","nestedCurrentLevel","jsx","StyledMenuList","option","index","MenuItem","GroupedMenuList"],"mappings":"8NAMaA,EAYR,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,QAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,CACD,IAAM,CACL,MAAMC,EAAqC,CAC1CC,EACAC,EACAC,IAEAC,EAAAA,IAACb,EAAA,CACA,MAAAC,EACA,oBAAAC,EACA,QAASQ,EACT,QAASC,EACT,qBAAAN,EACA,UAAAC,EACA,eAAAC,EACA,aAAcK,CAAA,CAAA,EAIhB,aACEE,EAAAA,eAAA,CACC,SAAAX,EAAQ,IAAI,CAACY,EAAQC,IAAU,CAC/B,GAAI,UAAWD,EACd,OACCF,EAAAA,IAACI,EAAAA,SAAA,CAEA,MAAAhB,EACA,oBAAAC,EACA,OAAAa,EACA,QAAAX,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAE,EACA,iBAAAC,CAAA,EARKO,CAAA,KAWG,YAAaD,GAAUA,EAAO,QAAQ,OAAS,EACzD,OACCF,EAAAA,IAACK,EAAAA,gBAAA,CAEA,MAAAjB,EACA,oBAAAC,EACA,OAAAa,EACA,QAAAX,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,iBAAAC,CAAA,EATKO,CAAA,CAaT,CAAC,CAAA,CACF,CAEF"}

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),v=require("../zeroState/ZeroState.js"),L=require("../../constants/Theme.js"),E=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),_=require("./MenuList.js"),p=require("./MultiLevelDropdown.styled.js"),N=require("../floater/floater.js"),T=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},z=T(u),A=({options:t,width:l,isSearchable:m,onDropdownItemClick:b,refElement:q,topOffset:R,leftOffset:w,isDropdownOpen:a,onDropdownOutsideClick:c,allowParentSelection:C,maxLevels:M,hideGroupLabel:O,version:s="1.0"})=>{const d=z.default.useRef(null),[f,S]=u.useState(t),j=h=>{const o=Array.isArray(t)?[...t]:[],g=[];for(;o.length>0;){const e=o.shift();e&&e.label.toLowerCase().includes(h.toLowerCase())&&g.push(e),e&&"children"in e&&e.children?o.push(...e.children):e&&"options"in e&&e.options&&o.push(...e.options)}const x=e=>e.map(r=>{if(g.includes(r))return r;if("children"in r&&r.children){const i=x(r.children);if(i.length>0)return{...r,children:i}}if("options"in r&&r.options){const i=x(r.options);if(i.length>0)return{...r,options:i}}return null}).filter(r=>r!==null);S(x(t))},y=h=>{d.current&&!d.current.contains(h.target)?c&&c(!0):c&&c(!1)};return u.useEffect(()=>{a&&j("")},[a]),u.useEffect(()=>(document.addEventListener("mousedown",y),()=>{document.removeEventListener("mousedown",y)}),[]),u.useEffect(()=>{S(t)},[t]),n.jsx(N.Floater,{refElement:q,topOffset:R,leftOffset:w,children:a&&n.jsx("div",{ref:d,style:{backgroundColor:L.COLORS.surface.standard,zIndex:99999,borderRadius:s==="3.0"?"4px":"8px",overflow:"hidden",boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)",whiteSpace:"normal"},children:n.jsxs(p.DropdownContainer,{width:l,version:s,children:[m&&n.jsx("div",{style:{padding:s==="3.0"?"0px":"4px",width:l??"200px"},children:n.jsx(E.SearchBox,{onSearch:j,version:s==="3.0"?"3.0":"2.0"})}),n.jsx(p.OptionsContainer,{width:l,version:s,children:(f??[]).length>0&&n.jsx(_.MenuList,{width:l??"200px",onDropdownItemClick:b,options:f,parents:[],allowParentSelection:C,maxLevels:M,hideGroupLabel:O,currentLevel:1,version:s})}),(f??[]).length===0&&n.jsx(p.NoResultsContainer,{style:{width:l??"200px"},version:s,children:s==="3.0"?n.jsx("span",{style:{fontSize:"12px",color:L.COLORS.content.placeholder,lineHeight:"16px"},children:"No results found!"}):n.jsx(v.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]})})})};exports.MultiLevelDropdown=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),w=require("../zeroState/ZeroState.js"),M=require("../../constants/Theme.js"),E=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),O=require("./MenuList.js"),x=require("./MultiLevelDropdown.styled.js"),_=require("../floater/floater.js"),T=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},A=T(i),B=({options:t,width:s,isSearchable:v,onDropdownItemClick:L,refElement:S,topOffset:g,leftOffset:q,isDropdownOpen:o,onDropdownOutsideClick:u,allowParentSelection:b,maxLevels:R,hideGroupLabel:C})=>{const a=A.default.useRef(null),[d,p]=i.useState(t),j=f=>{const c=Array.isArray(t)?[...t]:[],m=[];for(;c.length>0;){const e=c.shift();e&&e.label.toLowerCase().includes(f.toLowerCase())&&m.push(e),e&&"children"in e&&e.children?c.push(...e.children):e&&"options"in e&&e.options&&c.push(...e.options)}const h=e=>e.map(r=>{if(m.includes(r))return r;if("children"in r&&r.children){const l=h(r.children);if(l.length>0)return{...r,children:l}}if("options"in r&&r.options){const l=h(r.options);if(l.length>0)return{...r,options:l}}return null}).filter(r=>r!==null);p(h(t))},y=f=>{a.current&&!a.current.contains(f.target)?u&&u(!0):u&&u(!1)};return i.useEffect(()=>{o&&j("")},[o]),i.useEffect(()=>(document.addEventListener("mousedown",y),()=>{document.removeEventListener("mousedown",y)}),[]),i.useEffect(()=>{p(t)},[t]),n.jsx(_.Floater,{refElement:S,topOffset:g,leftOffset:q,children:o&&n.jsx("div",{ref:a,style:{backgroundColor:M.COLORS.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"},children:n.jsxs(x.DropdownContainer,{width:s,children:[v&&n.jsx("div",{style:{padding:"4px",width:s??"200px"},children:n.jsx(E.SearchBox,{onSearch:j,version:"2.0"})}),n.jsx(x.OptionsContainer,{width:s,children:(d??[]).length>0&&n.jsx(O.MenuList,{width:s??"200px",onDropdownItemClick:L,options:d,parents:[],allowParentSelection:b,maxLevels:R,hideGroupLabel:C,currentLevel:1})}),(d??[]).length===0&&n.jsx(x.NoResultsContainer,{style:{width:s??"200px"},children:n.jsx(w.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]})})})};exports.MultiLevelDropdown=B;
 //# sourceMappingURL=MultiLevelDropdown.js.map

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n~~\tversion = '1.0',\n~~}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: ~~version ===~~ '~~3.0' ? '4px' : '~~8px',\n\t\t\t\t\t\~~toverflow: 'hidden',\n\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n\t\t\t\t\t\~~twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width} ~~version={version}~~>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div~~\n\t\t\t\t\t\t\t\tstyle~~={{~~\n\t\t\t\t\t\t\t\t\tpadding:~~ ~~version === '3.0' ? '0px'~~ : '4px'~~,\n\t\t\t\t\t\t\t\t\twidth~~: width ?? '200px'~~,\n\t\t\t\t\t\t\t\t~~}}~~\n\t\t\t\t\t\t\t~~>\n\t\t\t\t\t\t\t\t<SearchBox~~\n\t\t\t\t\t\t\t\t\tonSearch~~={search}~~\n\t\t\t\t\t\t\t\t\tversion~~={~~version ===~~ '~~3.0' ? '3.0' : '~~2.0'}~~\n\t\t\t\t\t\t\t\t~~/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width} ~~version={version}~~>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t~~\tversion={version}\n\t\t\t\t\t\t\t\t~~/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer~~\n\t\t\t\t\t\t\t\tstyle~~={{ width: width ?? '200px' }}~~\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t~~>\n\t\t\t\t\t\t\t\t~~{version === '3.0' ? (\n\t\t\t\t\t\t\t\t\t~~<span\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tNo results found!\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\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~~</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","~~version","~~dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"wcAaaA,EAAwD,CAAC,CACrE,QAAAC,EACA,MAAAC,EACA,aAAAC,EACA,oBAAAC,EACA,WAAAC,EACA,UAAAC,EACA,WAAAC,EACA,eAAAC,EACA,uBAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,eAAAC,~~EACA~~,~~QAAAC,EAAU,KACX,~~IAAM,CACL,MAAMC,EAAcC,EAAAA,QAAM,OAAuB,IAAI,EAC/C,CAACC,EAAiBC,CAAkB,EACzCC,EAAAA,~~SAAqCjB~~,CAAO,~~EAEvCkB~~,EAAUC,GAAyB,CACxC,MAAMC,EAAQ,MAAM,~~QAAQpB~~,CAAO,EAAI,CAAC,GAAGA,CAAO,EAAI,CAAA,~~EAChDqB~~,EAAqC,CAAA,EAE3C,KAAOD,EAAM,OAAS,GAAG,CACxB,MAAME,EAAUF,EAAM,MAAA,EAErBE,GACAA,EAAQ,MAAM,YAAA,EAAc,SAASH,EAAa,YAAA,CAAa,GAE/DE,EAAO,KAAKC,CAAO,EAEhBA,GAAW,aAAcA,GAAWA,EAAQ,SAC/CF,EAAM,KAAK,GAAGE,EAAQ,QAAQ,EACpBA,GAAW,YAAaA,GAAWA,EAAQ,SACrDF,EAAM,KAAK,GAAGE,EAAQ,OAAO,CAE/B,CAEA,MAAMC,~~EAAiBvB~~,GACfA,EACL,~~IAAKwB~~,GAAqC,CAC1C,GAAIH,EAAO,SAASG,CAAM,EACzB,OAAOA,EAER,GAAI,aAAcA,GAAUA,EAAO,SAAU,CAC5C,MAAMC,EAAmBF,EACxBC,EAAO,QAAA,EAER,GAAIC,EAAiB,OAAS,EAC7B,MAAO,CAAE,GAAGD,EAAQ,SAAUC,CAAA,CAEhC,CACA,GAAI,YAAaD,GAAUA,EAAO,QAAS,CAC1C,MAAMT,EAAkBQ,EACvBC,EAAO,OAAA,EAER,GAAIT,EAAgB,OAAS,EAC5B,MAAO,CAAE,GAAGS,EAAQ,QAAST,CAAAA,CAE/B,CACA,OAAO,IACR,CAAC,EACA,OAAQS,GAAWA,IAAW,IAAI,EAGrCR,EAAmBO,~~EAAcvB~~,CAAO,CAA+B,CACxE,~~EAEM0B~~,EAAsBC,GAAsB,CAEhDd,EAAY,SACZ,CAACA,EAAY,QAAQ,SAASc,EAAM,MAAc,~~EAE9CnB~~,GACHA,EAAuB,EAAI,EAGxBA,GACHA,EAAuB,EAAK,CAG/B,~~EAEAoB~~,OAAAA,EAAAA,UAAU,IAAM,~~CACXrB~~,~~GACHW~~,EAAO,EAAE,CAEX,EAAG,~~CAACX~~,CAAc,CAAC,~~EAEnBqB~~,EAAAA,UAAU,KACT,SAAS,iBAAiB,YAAaF,CAAkB,EAClD,IAAM,CACZ,SAAS,oBAAoB,YAAaA,CAAkB,CAC7D,GACE,CAAA,CAAE,EAELE,EAAAA,UAAU,IAAM,CACfZ,~~EAAmBhB~~,CAAO,CAC3B,EAAG,CAACA,CAAO,CAAC,~~EAGX6B~~,EAAAA,IAACC,EAAAA,QAAA,CACA,~~WAAA1B~~,EACA,UAAAC,EACA,WAAAC,EAEC,SAAAC,~~GACAsB~~,EAAAA,IAAC,MAAA,CACA,IAAKhB,EACL,MAAO,CACN,gBAAiBkB,EAAAA,OAAO,QAAQ,SAChC,OAAQ,MACR,~~aAAcnB~~,~~IAAY~~,~~MAAQ,MAAQ,MAC1C,SAAU,SACV,UAAW,kCACX,~~WAAY,QAAA,EAGb,~~SAAAoB~~,EAAAA,KAACC,EAAAA,~~kBAAA~~,~~CAAkB,MAAAhC,EAAc,QAAAW,EAC~~/B,SAAA,~~CAAAV~~,~~GACA2B~~,~~EAAAA,IAAC,~~MAAA,~~CACA~~,MAAO,~~CACN~~,~~QAASjB~~,~~IAAY~~,~~MAAQ~~,~~MAAQ,MACrC,MAAOX,~~GAAS,OAAA,~~EAGjB~~,~~SAAA4B~~,EAAAA,~~IAACK,EAAAA,~~UAAA,~~CACA~~,SAAUhB,~~EACV~~,~~QAASN~~,~~IAAY~~,~~MAAQ~~,~~MAAQ~~,~~KAAA,CAAA,CACtC,CAAA,EAGFiB,~~EAAAA,~~IAACM~~,~~EAAAA~~,~~kBAAiB~~,~~MAAAlC~~,~~EAAc,QAAAW,EAC7B,~~aAAmB,CAAA,GAAI,OAAS,~~GACjCiB~~,EAAAA,IAACO,EAAAA,SAAA,CACA,~~MAAOnC~~,GAAS,QAChB,oBAAAE,EACA,~~QAASY~~,EACT,QAAS,CAAA,EACT,~~qBAAAN~~,EACA,UAAAC,EACA,eAAAC,EACA,aAAc,~~EACd,QAAAC,~~CAAA,CAAA,~~EAGH~~,GAEEG,GAAmB,CAAA,GAAI,SAAW,GACnCc,EAAAA,IAACQ,EAAAA,mBAAA,~~CACA~~,MAAO,CAAE,~~MAAOpC~~,GAAS,OAAA,~~EACzB~~,~~QAAAW~~,~~EAEC,aAAY,MACZiB,~~EAAAA,~~IAAC,OAAA,CACA,MAAO,CACN,SAAU,OACV,MAAOE,EAAAA,OAAO,QAAQ,YACtB,WAAY,MAAA,EAEb,SAAA,mBAAA,CAAA,EAIDF,EAAAA,~~IAACS,EAAAA,UAAA,CACA,MAAM,oBACN,SAAU,2DAAA,CAAA,CACX,CAAA,~~CAEF,~~CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAIJ"}
1	+ {"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div style={{ padding: '4px', width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<SearchBox onSearch={search} version={'2.0'} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer style={{ width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"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"}