npm - @chayns-components/core - Versions diffs - 5.5.2 → 5.5.4 - Mend

@chayns-components/core 5.5.2 → 5.5.4

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

package/lib/cjs/components/tag-input/TagInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","_AreaContextProvider","_resize","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TagInput","forwardRef","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","tags","ref","currentValue","setCurrentValue","useState","selectedId","setSelectedId","areaProvider","useContext","AreaContext","inputRef","useRef","useCursorRepaint","theme","useTheme","handleResetValue","shouldChangeColor","useMemo","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","shouldShowTagHighlighting","useImperativeHandle","blur","_inputRef$current","current","getUnsavedTagText","undefined","resetValue","handleRemoveTag","useCallback","id","currentTags","_currentTags","_currentTags2","removedTagIndex","findIndex","tag","handleKeyDown","event","visibleTags","slice","selectedTagIndex","selectedTag","isSpaceKey","key","isEnterKey","isDeleteKey","length","_visibleTags2","preventDefault","_visibleTags","_visibleTags3","_visibleTags$","_visibleTags4","_visibleTags5","prevValue","newTag","uuidv4","text","onAddResult","Promise","then","shouldAddTag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","isSelected","push","createElement","StyledTagInputTagFocusWrapper","$isSelected","$shouldShowKeyboardHighlighting","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","stopPropagation","shouldShowInput","StyledTagInput","$shouldChangeColor","$shouldShowTagHighlighting","StyledTagInputIconWrapper","StyledTagInputTagInput","onKeyDown","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n useImperativeHandle,\n useContext,\n ChangeEventHandler,\n ReactNode,\n FocusEventHandler,\n useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagFocusWrapper,\n StyledTagInputIconWrapper,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TagInputProps = {\n /*\n An element that should be displayed on the left side of the input.\n /\n leftElement?: ReactNode;\n /\n Function to be executed when a tag is added.\n /\n onAdd?: (tag: Tag) => Promise<boolean> \| boolean \| void;\n /\n Function to be executed when the input is blurred.\n /\n onBlur?: FocusEventHandler;\n /\n Function to be executed when the value of the input is changed.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function to be executed when the input is focused.\n /\n onFocus?: FocusEventHandler;\n /\n Enables keyboard-only focus highlighting.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Function to be executed when a tag is removed.\n /\n onRemove?: (id: string) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n Whether multiple tags should be allowed.\n /\n shouldAllowMultiple?: boolean;\n /\n Whether the enter key should be prevented.\n /\n shouldPreventEnter?: boolean;\n /\n The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\nexport interface TagInputRef {\n blur: () => void;\n getUnsavedTagText: Tag['text'] \| undefined;\n resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n (\n {\n leftElement,\n onAdd,\n onBlur,\n onChange,\n onFocus,\n onRemove,\n placeholder,\n shouldAllowMultiple = true,\n shouldEnableKeyboardHighlighting,\n shouldPreventEnter,\n tags,\n },\n ref,\n ) => {\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const areaProvider = useContext(AreaContext);\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n useCursorRepaint(inputRef);\n\n const theme = useTheme() as Theme;\n\n const handleResetValue = () => {\n setCurrentValue('');\n };\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const shouldShowTagHighlighting =\n shouldShowKeyboardHighlighting && typeof selectedId === 'string';\n\n useImperativeHandle(\n ref,\n () => ({\n blur: () => inputRef.current?.blur(),\n getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n resetValue: handleResetValue,\n }),\n [currentValue],\n );\n\n const handleRemoveTag = useCallback(\n (id: string, currentTags: Tag[]) => {\n const removedTagIndex = currentTags.findIndex((tag) => tag.id === id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n if (removedTagIndex < 0) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(\n currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id,\n );\n },\n [onRemove],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n const visibleTags = shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1);\n const selectedTagIndex = visibleTags.findIndex((tag) => tag.id === selectedId);\n const selectedTag =\n selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;\n const isSpaceKey = event.key === ' ';\n const isEnterKey = event.key === 'Enter';\n const isDeleteKey = event.key === 'Delete';\n\n if (currentValue === '' && visibleTags.length > 0) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n\n if (!selectedId) {\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n if (selectedTagIndex <= 0) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(visibleTags[selectedTagIndex - 1]?.id);\n return;\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n\n if (!selectedId \|\| selectedTagIndex < 0) {\n return;\n }\n\n if (selectedTagIndex >= visibleTags.length - 1) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(visibleTags[selectedTagIndex + 1]?.id);\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n setSelectedId(visibleTags[0]?.id);\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n if (isEnterKey \|\| isSpaceKey \|\| event.key === 'Backspace' \|\| isDeleteKey) {\n event.preventDefault();\n\n if (!selectedTag) {\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n handleRemoveTag(selectedTag.id, visibleTags);\n return;\n }\n }\n\n if (isEnterKey && !shouldPreventEnter) {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n const onAddResult = onAdd(newTag);\n\n if (typeof onAddResult === 'boolean' && !onAddResult) {\n return prevValue;\n }\n\n if (onAddResult instanceof Promise) {\n void onAddResult.then((shouldAddTag) => {\n if (!shouldAddTag) {\n return prevValue;\n }\n\n return '';\n });\n }\n }\n\n return '';\n });\n }\n },\n [\n currentValue,\n onAdd,\n handleRemoveTag,\n selectedId,\n shouldAllowMultiple,\n shouldPreventEnter,\n tags,\n ],\n );\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n },\n [onChange],\n );\n\n const handleIconClick = useCallback(\n (id: string) => {\n handleRemoveTag(id, shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1));\n },\n [handleRemoveTag, shouldAllowMultiple, tags],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!tags) {\n return items;\n }\n\n (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n ({ text, id, rightElement }) => {\n const isSelected = id === selectedId;\n\n items.push(\n <StyledTagInputTagFocusWrapper\n $isSelected={isSelected}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n key={`tag-input-${id}`}\n >\n <Badge\n backgroundColor={\n isSelected ? ((theme['206'] as string) ?? undefined) : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>\n {text}\n </StyledTagInputTagWrapperText>\n {rightElement}\n <Icon\n icons={['ts-wrong']}\n shouldEnableKeyboardHighlighting={false}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleIconClick(id);\n }}\n />\n </StyledTagInputTagWrapper>\n </Badge>\n </StyledTagInputTagFocusWrapper>,\n );\n },\n );\n\n return items;\n }, [\n tags,\n shouldAllowMultiple,\n selectedId,\n shouldShowKeyboardHighlighting,\n theme,\n handleIconClick,\n ]);\n\n const shouldShowInput = useMemo(\n () => shouldAllowMultiple \|\| (tags?.length ?? 0) < 1,\n [tags?.length, shouldAllowMultiple],\n );\n\n return useMemo(\n () => (\n <StyledTagInput\n $shouldChangeColor={shouldChangeColor}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $shouldShowTagHighlighting={shouldShowTagHighlighting}\n >\n {leftElement && (\n <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n )}\n {content}\n {shouldShowInput && (\n <StyledTagInputTagInput\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n ref={inputRef}\n value={currentValue}\n />\n )}\n </StyledTagInput>\n ),\n [\n content,\n currentValue,\n handleChange,\n handleKeyDown,\n leftElement,\n onBlur,\n onFocus,\n placeholder,\n shouldChangeColor,\n shouldShowInput,\n shouldShowKeyboardHighlighting,\n shouldShowTagHighlighting,\n tags,\n ],\n );\n },\n);\n\nexport default TagInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAeA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AAQA,IAAAO,oBAAA,GAAAP,OAAA;AAEA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,6BAAA,GAAAT,OAAA;AAAwF,SAAAI,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAuDxF,MAAMgB,QAAQ,gBAAG,IAAAC,iBAAU,EACvB,CACI;EACIC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC,mBAAmB,GAAG,IAAI;EAC1BC,gCAAgC;EAChCC,kBAAkB;EAClBC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EACpD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAF,eAAQ,EAAY,CAAC;EAEzD,MAAMG,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAA0B,IAAI,CAAC;EAEtD,IAAAC,wBAAgB,EAACF,QAAQ,CAAC;EAE1B,MAAMG,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAU;EAEjC,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC3BZ,eAAe,CAAC,EAAE,CAAC;EACvB,CAAC;EAED,MAAMa,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMV,YAAY,CAACS,iBAAiB,IAAI,KAAK,EAC7C,CAACT,YAAY,CAACS,iBAAiB,CACnC,CAAC;EAED,MAAME,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DrB,gCACJ,CAAC;EAED,MAAMsB,yBAAyB,GAC3BF,8BAA8B,IAAI,OAAOb,UAAU,KAAK,QAAQ;EAEpE,IAAAgB,0BAAmB,EACfpB,GAAG,EACH,OAAO;IACHqB,IAAI,EAAEA,CAAA;MAAA,IAAAC,iBAAA;MAAA,QAAAA,iBAAA,GAAMb,QAAQ,CAACc,OAAO,cAAAD,iBAAA,uBAAhBA,iBAAA,CAAkBD,IAAI,CAAC,CAAC;IAAA;IACpCG,iBAAiB,EAAEvB,YAAY,KAAK,EAAE,GAAGA,YAAY,GAAGwB,SAAS;IACjEC,UAAU,EAAEZ;EAChB,CAAC,CAAC,EACF,CAACb,YAAY,CACjB,CAAC;EAED,MAAM0B,eAAe,GAAG,IAAAC,kBAAW,EAC/B,CAACC,EAAU,EAAEC,WAAkB,KAAK;IAAA,IAAAC,YAAA,EAAAC,aAAA;IAChC,MAAMC,eAAe,GAAGH,WAAW,CAACI,SAAS,CAAEC,GAAG,IAAKA,GAAG,CAACN,EAAE,KAAKA,EAAE,CAAC;IAErE,IAAI,OAAOnC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmC,EAAE,CAAC;IAChB;IAEA,IAAII,eAAe,GAAG,CAAC,EAAE;MACrB5B,aAAa,CAACoB,SAAS,CAAC;MACxB;IACJ;IAEApB,aAAa,CACT,EAAA0B,YAAA,GAAAD,WAAW,CAACG,eAAe,GAAG,CAAC,CAAC,cAAAF,YAAA,uBAAhCA,YAAA,CAAkCF,EAAE,OAAAG,aAAA,GAAIF,WAAW,CAACG,eAAe,GAAG,CAAC,CAAC,cAAAD,aAAA,uBAAhCA,aAAA,CAAkCH,EAAE,CAChF,CAAC;EACL,CAAC,EACD,CAACnC,QAAQ,CACb,CAAC;EAED,MAAM0C,aAAa,GAAG,IAAAR,kBAAW,EAC5BS,KAAsC,IAAK;IACxC,MAAMC,WAAW,GAAG1C,mBAAmB,GAAIG,IAAI,IAAI,EAAE,GAAI,CAACA,IAAI,IAAI,EAAE,EAAEwC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IACjF,MAAMC,gBAAgB,GAAGF,WAAW,CAACJ,SAAS,CAAEC,GAAG,IAAKA,GAAG,CAACN,EAAE,KAAKzB,UAAU,CAAC;IAC9E,MAAMqC,WAAW,GACbD,gBAAgB,IAAI,CAAC,GAAGF,WAAW,CAACE,gBAAgB,CAAC,GAAGf,SAAS;IACrE,MAAMiB,UAAU,GAAGL,KAAK,CAACM,GAAG,KAAK,GAAG;IACpC,MAAMC,UAAU,GAAGP,KAAK,CAACM,GAAG,KAAK,OAAO;IACxC,MAAME,WAAW,GAAGR,KAAK,CAACM,GAAG,KAAK,QAAQ;IAE1C,IAAI1C,YAAY,KAAK,EAAE,IAAIqC,WAAW,CAACQ,MAAM,GAAG,CAAC,EAAE;MAC/C,IAAIT,KAAK,CAACM,GAAG,KAAK,WAAW,EAAE;QAAA,IAAAI,aAAA;QAC3BV,KAAK,CAACW,cAAc,CAAC,CAAC;QAEtB,IAAI,CAAC5C,UAAU,EAAE;UAAA,IAAA6C,YAAA;UACb5C,aAAa,EAAA4C,YAAA,GAACX,WAAW,CAACA,WAAW,CAACQ,MAAM,GAAG,CAAC,CAAC,cAAAG,YAAA,uBAAnCA,YAAA,CAAqCpB,EAAE,CAAC;UACtD;QACJ;QAEA,IAAIW,gBAAgB,IAAI,CAAC,EAAE;UACvBnC,aAAa,CAACoB,SAAS,CAAC;UACxB;QACJ;QAEApB,aAAa,EAAA0C,aAAA,GAACT,WAAW,CAACE,gBAAgB,GAAG,CAAC,CAAC,cAAAO,aAAA,uBAAjCA,aAAA,CAAmClB,EAAE,CAAC;QACpD;MACJ;MAEA,IAAIQ,KAAK,CAACM,GAAG,KAAK,YAAY,EAAE;QAAA,IAAAO,aAAA;QAC5Bb,KAAK,CAACW,cAAc,CAAC,CAAC;QAEtB,IAAI,CAAC5C,UAAU,IAAIoC,gBAAgB,GAAG,CAAC,EAAE;UACrC;QACJ;QAEA,IAAIA,gBAAgB,IAAIF,WAAW,CAACQ,MAAM,GAAG,CAAC,EAAE;UAC5CzC,aAAa,CAACoB,SAAS,CAAC;UACxB;QACJ;QAEApB,aAAa,EAAA6C,aAAA,GAACZ,WAAW,CAACE,gBAAgB,GAAG,CAAC,CAAC,cAAAU,aAAA,uBAAjCA,aAAA,CAAmCrB,EAAE,CAAC;QACpD;MACJ;MAEA,IAAIQ,KAAK,CAACM,GAAG,KAAK,MAAM,EAAE;QAAA,IAAAQ,aAAA;QACtBd,KAAK,CAACW,cAAc,CAAC,CAAC;QACtB3C,aAAa,EAAA8C,aAAA,GAACb,WAAW,CAAC,CAAC,CAAC,cAAAa,aAAA,uBAAdA,aAAA,CAAgBtB,EAAE,CAAC;QACjC;MACJ;MAEA,IAAIQ,KAAK,CAACM,GAAG,KAAK,KAAK,EAAE;QAAA,IAAAS,aAAA;QACrBf,KAAK,CAACW,cAAc,CAAC,CAAC;QACtB3C,aAAa,EAAA+C,aAAA,GAACd,WAAW,CAACA,WAAW,CAACQ,MAAM,GAAG,CAAC,CAAC,cAAAM,aAAA,uBAAnCA,aAAA,CAAqCvB,EAAE,CAAC;QACtD;MACJ;MAEA,IAAIe,UAAU,IAAIF,UAAU,IAAIL,KAAK,CAACM,GAAG,KAAK,WAAW,IAAIE,WAAW,EAAE;QACtER,KAAK,CAACW,cAAc,CAAC,CAAC;QAEtB,IAAI,CAACP,WAAW,EAAE;UAAA,IAAAY,aAAA;UACdhD,aAAa,EAAAgD,aAAA,GAACf,WAAW,CAACA,WAAW,CAACQ,MAAM,GAAG,CAAC,CAAC,cAAAO,aAAA,uBAAnCA,aAAA,CAAqCxB,EAAE,CAAC;UACtD;QACJ;QAEAF,eAAe,CAACc,WAAW,CAACZ,EAAE,EAAES,WAAW,CAAC;QAC5C;MACJ;IACJ;IAEA,IAAIM,UAAU,IAAI,CAAC9C,kBAAkB,EAAE;MACnCI,eAAe,CAAEoD,SAAS,IAAK;QAC3B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAO,EAAE;QACb;QAEA,IAAI,CAAC1D,mBAAmB,IAAI,CAAC,CAAAG,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE+C,MAAM,KAAI,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE;QAE9D,MAAMS,MAAM,GAAG;UAAE1B,EAAE,EAAE,IAAA2B,QAAM,EAAC,CAAC;UAAEC,IAAI,EAAEH;QAAU,CAAC;QAEhD,IAAI,OAAOhE,KAAK,KAAK,UAAU,EAAE;UAC7B,MAAMoE,WAAW,GAAGpE,KAAK,CAACiE,MAAM,CAAC;UAEjC,IAAI,OAAOG,WAAW,KAAK,SAAS,IAAI,CAACA,WAAW,EAAE;YAClD,OAAOJ,SAAS;UACpB;UAEA,IAAII,WAAW,YAAYC,OAAO,EAAE;YAChC,KAAKD,WAAW,CAACE,IAAI,CAAEC,YAAY,IAAK;cACpC,IAAI,CAACA,YAAY,EAAE;gBACf,OAAOP,SAAS;cACpB;cAEA,OAAO,EAAE;YACb,CAAC,CAAC;UACN;QACJ;QAEA,OAAO,EAAE;MACb,CAAC,CAAC;IACN;EACJ,CAAC,EACD,CACIrD,YAAY,EACZX,KAAK,EACLqC,eAAe,EACfvB,UAAU,EACVR,mBAAmB,EACnBE,kBAAkB,EAClBC,IAAI,CAEZ,CAAC;EAED,MAAM+D,YAAY,GAAG,IAAAlC,kBAAW,EAC3BS,KAAoC,IAAK;IACtCnC,eAAe,CAACmC,KAAK,CAAC0B,MAAM,CAACC,KAAK,CAAC;IAEnC,IAAI,OAAOxE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC6C,KAAK,CAAC;IACnB;IAEA,IAAIA,KAAK,CAAC0B,MAAM,CAACC,KAAK,KAAK,EAAE,EAAE;MAC3B3D,aAAa,CAACoB,SAAS,CAAC;IAC5B;EACJ,CAAC,EACD,CAACjC,QAAQ,CACb,CAAC;EAED,MAAMyE,eAAe,GAAG,IAAArC,kBAAW,EAC9BC,EAAU,IAAK;IACZF,eAAe,CAACE,EAAE,EAAEjC,mBAAmB,GAAIG,IAAI,IAAI,EAAE,GAAI,CAACA,IAAI,IAAI,EAAE,EAAEwC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EACtF,CAAC,EACD,CAACZ,eAAe,EAAE/B,mBAAmB,EAAEG,IAAI,CAC/C,CAAC;EAED,MAAMmE,OAAO,GAAG,IAAAlD,cAAO,EAAC,MAAM;IAC1B,MAAMmD,KAAqB,GAAG,EAAE;IAEhC,IAAI,CAACpE,IAAI,EAAE;MACP,OAAOoE,KAAK;IAChB;IAEA,CAACvE,mBAAmB,GAAGG,IAAI,GAAGA,IAAI,CAACwC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE6B,OAAO,CACnD,CAAC;MAAEX,IAAI;MAAE5B,EAAE;MAAEwC;IAAa,CAAC,KAAK;MAC5B,MAAMC,UAAU,GAAGzC,EAAE,KAAKzB,UAAU;MAEpC+D,KAAK,CAACI,IAAI,cACNnH,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC5G,SAAA,CAAA6G,6BAA6B;QAC1BC,WAAW,EAAEJ,UAAW;QACxBK,+BAA+B,EAAE1D,8BAA+B;QAChE0B,GAAG,EAAE,aAAad,EAAE;MAAG,gBAEvBzE,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC/G,MAAA,CAAAS,OAAK;QACF0G,eAAe,EACXN,UAAU,GAAK1D,KAAK,CAAC,KAAK,CAAC,IAAea,SAAS,GAAIA;MAC1D,gBAEDrE,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC5G,SAAA,CAAAiH,wBAAwB,qBACrBzH,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC5G,SAAA,CAAAkH,4BAA4B,QACxBrB,IACyB,CAAC,EAC9BY,YAAY,eACbjH,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC7G,KAAA,CAAAO,OAAI;QACD6G,KAAK,EAAE,CAAC,UAAU,CAAE;QACpBlF,gCAAgC,EAAE,KAAM;QACxCmF,OAAO,EAAG3C,KAAK,IAAK;UAChBA,KAAK,CAACW,cAAc,CAAC,CAAC;UACtBX,KAAK,CAAC4C,eAAe,CAAC,CAAC;UAEvBhB,eAAe,CAACpC,EAAE,CAAC;QACvB;MAAE,CACL,CACqB,CACvB,CACoB,CACnC,CAAC;IACL,CACJ,CAAC;IAED,OAAOsC,KAAK;EAChB,CAAC,EAAE,CACCpE,IAAI,EACJH,mBAAmB,EACnBQ,UAAU,EACVa,8BAA8B,EAC9BL,KAAK,EACLqD,eAAe,CAClB,CAAC;EAEF,MAAMiB,eAAe,GAAG,IAAAlE,cAAO,EAC3B,MAAMpB,mBAAmB,IAAI,CAAC,CAAAG,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE+C,MAAM,KAAI,CAAC,IAAI,CAAC,EACpD,CAAC/C,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE+C,MAAM,EAAElD,mBAAmB,CACtC,CAAC;EAED,OAAO,IAAAoB,cAAO,EACV,mBACI5D,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC5G,SAAA,CAAAuH,cAAc;IACXC,kBAAkB,EAAErE,iBAAkB;IACtC4D,+BAA+B,EAAE1D,8BAA+B;IAChEoE,0BAA0B,EAAElE;EAA0B,GAErD9B,WAAW,iBACRjC,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC5G,SAAA,CAAA0H,yBAAyB,QAAEjG,WAAuC,CACtE,EACA6E,OAAO,EACPgB,eAAe,iBACZ9H,MAAA,CAAAc,OAAA,CAAAsG,aAAA,CAAC5G,SAAA,CAAA2H,sBAAsB;IACnBhG,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEsE,YAAa;IACvBrE,OAAO,EAAEA,OAAQ;IACjB+F,SAAS,EAAEpD,aAAc;IACzBzC,WAAW,EAAEI,IAAI,IAAIA,IAAI,CAAC+C,MAAM,GAAG,CAAC,GAAGrB,SAAS,GAAG9B,WAAY;IAC/DK,GAAG,EAAES,QAAS;IACduD,KAAK,EAAE/D;EAAa,CACvB,CAEO,CACnB,EACD,CACIiE,OAAO,EACPjE,YAAY,EACZ6D,YAAY,EACZ1B,aAAa,EACb/C,WAAW,EACXE,MAAM,EACNE,OAAO,EACPE,WAAW,EACXoB,iBAAiB,EACjBmE,eAAe,EACfjE,8BAA8B,EAC9BE,yBAAyB,EACzBpB,IAAI,CAEZ,CAAC;AACL,CACJ,CAAC;AAAC,IAAA0F,QAAA,GAAAC,OAAA,CAAAxH,OAAA,GAEaiB,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Badge2","_Input","_Icon","_TagInput","_AreaContextProvider","_resize","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TagInput","forwardRef","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","size","InputSize","Medium","tags","ref","currentValue","setCurrentValue","useState","selectedId","setSelectedId","areaProvider","useContext","AreaContext","inputRef","useRef","useCursorRepaint","theme","useTheme","handleResetValue","shouldChangeColor","useMemo","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","shouldShowTagHighlighting","useImperativeHandle","blur","_inputRef$current","current","getUnsavedTagText","undefined","resetValue","handleRemoveTag","useCallback","id","currentTags","_currentTags","_currentTags2","removedTagIndex","findIndex","tag","handleKeyDown","event","visibleTags","slice","selectedTagIndex","selectedTag","isSpaceKey","key","isEnterKey","isDeleteKey","length","_visibleTags2","preventDefault","_visibleTags","_visibleTags3","_visibleTags$","_visibleTags4","_visibleTags5","prevValue","newTag","uuidv4","text","onAddResult","Promise","then","shouldAddTag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","isSelected","push","createElement","StyledTagInputTagFocusWrapper","$isSelected","$shouldShowKeyboardHighlighting","backgroundColor","Small","BadgeSize","SMALL","DEFAULT","StyledTagInputTagWrapper","$size","StyledTagInputTagWrapperText","icons","onClick","stopPropagation","shouldShowInput","StyledTagInput","$shouldChangeColor","$shouldShowTagHighlighting","StyledTagInputIconWrapper","StyledTagInputTagInput","onKeyDown","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n useImperativeHandle,\n useContext,\n ChangeEventHandler,\n ReactNode,\n FocusEventHandler,\n useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport { BadgeSize } from '../badge/Badge.types';\nimport { InputSize } from '../input/Input';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagFocusWrapper,\n StyledTagInputIconWrapper,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TagInputProps = {\n /*\n An element that should be displayed on the left side of the input.\n /\n leftElement?: ReactNode;\n /\n Function to be executed when a tag is added.\n /\n onAdd?: (tag: Tag) => Promise<boolean> \| boolean \| void;\n /\n Function to be executed when the input is blurred.\n /\n onBlur?: FocusEventHandler;\n /\n Function to be executed when the value of the input is changed.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Function to be executed when the input is focused.\n /\n onFocus?: FocusEventHandler;\n /\n Enables keyboard-only focus highlighting.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Function to be executed when a tag is removed.\n /\n onRemove?: (id: string) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n Whether multiple tags should be allowed.\n /\n shouldAllowMultiple?: boolean;\n /\n Whether the enter key should be prevented.\n /\n shouldPreventEnter?: boolean;\n /\n The tags that should be displayed.\n /\n tags?: Tag[];\n /\n The size of the input field.\n */\n size?: InputSize;\n};\n\nexport interface TagInputRef {\n blur: () => void;\n getUnsavedTagText: Tag['text'] \| undefined;\n resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n (\n {\n leftElement,\n onAdd,\n onBlur,\n onChange,\n onFocus,\n onRemove,\n placeholder,\n shouldAllowMultiple = true,\n shouldEnableKeyboardHighlighting,\n shouldPreventEnter,\n size = InputSize.Medium,\n tags,\n },\n ref,\n ) => {\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const areaProvider = useContext(AreaContext);\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n useCursorRepaint(inputRef);\n\n const theme = useTheme() as Theme;\n\n const handleResetValue = () => {\n setCurrentValue('');\n };\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const shouldShowTagHighlighting =\n shouldShowKeyboardHighlighting && typeof selectedId === 'string';\n\n useImperativeHandle(\n ref,\n () => ({\n blur: () => inputRef.current?.blur(),\n getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n resetValue: handleResetValue,\n }),\n [currentValue],\n );\n\n const handleRemoveTag = useCallback(\n (id: string, currentTags: Tag[]) => {\n const removedTagIndex = currentTags.findIndex((tag) => tag.id === id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n if (removedTagIndex < 0) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(\n currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id,\n );\n },\n [onRemove],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLInputElement>) => {\n const visibleTags = shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1);\n const selectedTagIndex = visibleTags.findIndex((tag) => tag.id === selectedId);\n const selectedTag =\n selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;\n const isSpaceKey = event.key === ' ';\n const isEnterKey = event.key === 'Enter';\n const isDeleteKey = event.key === 'Delete';\n\n if (currentValue === '' && visibleTags.length > 0) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n\n if (!selectedId) {\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n if (selectedTagIndex <= 0) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(visibleTags[selectedTagIndex - 1]?.id);\n return;\n }\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n\n if (!selectedId \|\| selectedTagIndex < 0) {\n return;\n }\n\n if (selectedTagIndex >= visibleTags.length - 1) {\n setSelectedId(undefined);\n return;\n }\n\n setSelectedId(visibleTags[selectedTagIndex + 1]?.id);\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n setSelectedId(visibleTags[0]?.id);\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n if (isEnterKey \|\| isSpaceKey \|\| event.key === 'Backspace' \|\| isDeleteKey) {\n event.preventDefault();\n\n if (!selectedTag) {\n setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n return;\n }\n\n handleRemoveTag(selectedTag.id, visibleTags);\n return;\n }\n }\n\n if (isEnterKey && !shouldPreventEnter) {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n const onAddResult = onAdd(newTag);\n\n if (typeof onAddResult === 'boolean' && !onAddResult) {\n return prevValue;\n }\n\n if (onAddResult instanceof Promise) {\n void onAddResult.then((shouldAddTag) => {\n if (!shouldAddTag) {\n return prevValue;\n }\n\n return '';\n });\n }\n }\n\n return '';\n });\n }\n },\n [\n currentValue,\n onAdd,\n handleRemoveTag,\n selectedId,\n shouldAllowMultiple,\n shouldPreventEnter,\n tags,\n ],\n );\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n },\n [onChange],\n );\n\n const handleIconClick = useCallback(\n (id: string) => {\n handleRemoveTag(id, shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1));\n },\n [handleRemoveTag, shouldAllowMultiple, tags],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!tags) {\n return items;\n }\n\n (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n ({ text, id, rightElement }) => {\n const isSelected = id === selectedId;\n\n items.push(\n <StyledTagInputTagFocusWrapper\n $isSelected={isSelected}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n key={`tag-input-${id}`}\n >\n <Badge\n backgroundColor={\n isSelected ? ((theme['206'] as string) ?? undefined) : undefined\n }\n size={\n size === InputSize.Small ? BadgeSize.SMALL : BadgeSize.DEFAULT\n }\n >\n <StyledTagInputTagWrapper $size={size}>\n <StyledTagInputTagWrapperText $size={size}>\n {text}\n </StyledTagInputTagWrapperText>\n {rightElement}\n <Icon\n icons={['ts-wrong']}\n size={size === InputSize.Small ? 14 : 16}\n shouldEnableKeyboardHighlighting={false}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleIconClick(id);\n }}\n />\n </StyledTagInputTagWrapper>\n </Badge>\n </StyledTagInputTagFocusWrapper>,\n );\n },\n );\n\n return items;\n }, [\n tags,\n shouldAllowMultiple,\n selectedId,\n shouldShowKeyboardHighlighting,\n theme,\n handleIconClick,\n size,\n ]);\n\n const shouldShowInput = useMemo(\n () => shouldAllowMultiple \|\| (tags?.length ?? 0) < 1,\n [tags?.length, shouldAllowMultiple],\n );\n\n return useMemo(\n () => (\n <StyledTagInput\n $shouldChangeColor={shouldChangeColor}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $shouldShowTagHighlighting={shouldShowTagHighlighting}\n $size={size}\n >\n {leftElement && (\n <StyledTagInputIconWrapper $size={size}>\n {leftElement}\n </StyledTagInputIconWrapper>\n )}\n {content}\n {shouldShowInput && (\n <StyledTagInputTagInput\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n onKeyDown={handleKeyDown}\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n ref={inputRef}\n $size={size}\n value={currentValue}\n />\n )}\n </StyledTagInput>\n ),\n [\n content,\n currentValue,\n handleChange,\n handleKeyDown,\n leftElement,\n onBlur,\n onFocus,\n placeholder,\n shouldChangeColor,\n shouldShowInput,\n shouldShowKeyboardHighlighting,\n shouldShowTagHighlighting,\n size,\n tags,\n ],\n );\n },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tag-input/TagInput.styles.js CHANGED Viewed

@@ -10,10 +10,16 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const StyledTagInput = exports.StyledTagInput = _styledComponents.default.div`
     display: flex;
     flex-wrap: wrap;
-    min-height: 42px;
-    padding: 5px;
+    min-height: ${({
+  $size
+}) => $size === 'medium' ? '42px' : '32px'};
+    padding: ${({
+  $size
+}) => $size === 'medium' ? '5px' : '4px'};
     align-items: center;
-    gap: 6px;
+    gap: ${({
+  $size
+}) => $size === 'medium' ? '6px' : '4px'};
     background-color: ${({
   theme,
   $shouldChangeColor
@@ -33,7 +39,9 @@ const StyledTagInput = exports.StyledTagInput = _styledComponents.default.div`
 const StyledTagInputTagWrapper = exports.StyledTagInputTagWrapper = _styledComponents.default.div`
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: ${({
+  $size
+}) => $size === 'medium' ? '4px' : '2px'};
 `;
 const StyledTagInputTagFocusWrapper = exports.StyledTagInputTagFocusWrapper = _styledComponents.default.div`
     display: inline-flex;
@@ -56,22 +64,31 @@ const StyledTagInputTagWrapperText = exports.StyledTagInputTagWrapperText = _sty
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: 15px;
+    font-size: ${({
+  $size
+}) => $size === 'medium' ? '15px' : '13px'};
 `;
 const StyledTagInputTagInput = exports.StyledTagInputTagInput = _styledComponents.default.input`
     border: none;
-    height: 24px;
+    height: ${({
+  $size
+}) => $size === 'medium' ? '24px' : '20px'};
     flex-grow: 1;
     background-color: transparent;
     color: ${({
   theme
 }) => theme.text};
+    font-size: ${({
+  $size
+}) => $size === 'medium' ? '15px' : '13px'};
 `;
 const StyledTagInputIconWrapper = exports.StyledTagInputIconWrapper = _styledComponents.default.div`
     align-items: baseline;
     display: flex;
     flex: 0 0 auto;
     justify-content: center;
-    margin-left: 5px;
+    margin-left: ${({
+  $size
+}) => $size === 'medium' ? '5px' : '4px'};
 `;
 //# sourceMappingURL=TagInput.styles.js.map

package/lib/cjs/components/tag-input/TagInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTagInput","exports","styled","div","theme","$shouldChangeColor","colorMode","$shouldShowKeyboardHighlighting","$shouldShowTagHighlighting","css","keyboardFocusHighlightingRingCss","StyledTagInputTagWrapper","StyledTagInputTagFocusWrapper","$isSelected","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledTagInputProps = WithTheme<{\n $shouldChangeColor: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n $shouldShowTagHighlighting: boolean;\n}>;\n\ntype StyledTagInputTagFocusWrapperProps = {\n $isSelected: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n display: flex;\n flex-wrap: wrap;\n min-height: 42px;\n padding: 5px;\n align-items: center;\n gap: 6px;\n background-color: ${({ theme, $shouldChangeColor }: StyledTagInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n\n ${({ $shouldShowKeyboardHighlighting, $shouldShowTagHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n !$shouldShowTagHighlighting &&\n css`\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n`;\n\nexport const StyledTagInputTagFocusWrapper = styled.div<StyledTagInputTagFocusWrapperProps>`\n display: inline-flex;\n\n ${({ $isSelected, $shouldShowKeyboardHighlighting }) =>\n $isSelected &&\n $shouldShowKeyboardHighlighting &&\n css`\n ${StyledTagInput}:focus-within & > .beta-chayns-badge {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n border-radius: 999px;\n outline-offset: 0;\n }\n `}\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n margin: 0;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<~~unknown~~>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n border: none;\n height: 24px;\n flex-grow: 1;\n background-color: transparent;\n color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n\nexport const StyledTagInputIconWrapper = styled.div`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,0BAAA,GAAAD,OAAA;AAAgG,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;~~AAazF~~,MAAMkB,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;~~AACA~~;~~AACA~~;~~AACA~~;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KACnED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,MAAM,CAAC;EAAEG,+BAA+B;EAAEC;AAA2B,CAAC,KAC9DD,+BAA+B,IAC/B,CAACC,0BAA0B,IAC3B,IAAAC,qBAAG;AACX;AACA;AACA,kBAAkBC,2DAAgC;AAClD;AACA,SAAS;AACT,CAAC;~~AAEM~~,MAAMC,wBAAwB,~~GAAAV~~,OAAA,~~CAAAU~~,wBAAA,~~GAAGT~~,yBAAM,CAACC,~~GAAG~~;~~AAClD~~;AACA;AACA;~~AACA~~,CAAC;AAEM,MAAMS,6BAA6B,~~GAAAX~~,OAAA,~~CAAAW~~,6BAAA,~~GAAGV~~,yBAAM,CAACC,GAAuC;AAC3F;AACA;AACA,MAAM,CAAC;~~EAAEU~~,WAAW;EAAEN;AAAgC,CAAC,KAC/CM,WAAW,IACXN,+BAA+B,IAC/B,IAAAE,qBAAG;AACX,~~cAAcT~~,cAAc;AAC5B;AACA,~~kBAAkBU~~,2DAAgC;AAClD;AACA;AACA;AACA,SAAS;AACT,CAAC;~~AAEM~~,MAAMI,4BAA4B,~~GAAAb~~,OAAA,~~CAAAa~~,4BAAA,~~GAAGZ~~,yBAAM,~~CAACa~~,~~CAAC~~;~~AACpD~~;AACA;AACA;AACA;AACA;AACA;~~AACA~~,CAAC;~~AAIM~~,~~MAAMC~~,sBAAsB,~~GAAAf~~,OAAA,~~CAAAe~~,sBAAA,~~GAAGd~~,yBAAM,~~CAACe~~,KAAkC;AAC/E;AACA;~~AACA~~;AACA;AACA,aAAa,CAAC;~~EAAEb~~;AAAmC,CAAC,KAAKA,KAAK,CAACc,IAAI;AACnE,CAAC;~~AAEM~~,~~MAAMC~~,yBAAyB,~~GAAAlB~~,OAAA,~~CAAAkB~~,yBAAA,~~GAAGjB~~,yBAAM,CAACC,~~GAAG~~;~~AACnD~~;AACA;AACA;AACA;AACA;~~AACA~~,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTagInput","exports","styled","div","$size","theme","$shouldChangeColor","colorMode","$shouldShowKeyboardHighlighting","$shouldShowTagHighlighting","css","keyboardFocusHighlightingRingCss","StyledTagInputTagWrapper","StyledTagInputTagFocusWrapper","$isSelected","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { InputSize } from '../input/Input';\n\ntype StyledTagInputProps = WithTheme<{\n $shouldChangeColor: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n $shouldShowTagHighlighting: boolean;\n $size: InputSize;\n}>;\n\ntype StyledTagInputTagFocusWrapperProps = {\n $isSelected: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n display: flex;\n flex-wrap: wrap;\n min-height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n padding: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n align-items: center;\n gap: ${({ $size }) => ($size === 'medium' ? '6px' : '4px')};\n background-color: ${({ theme, $shouldChangeColor }: StyledTagInputProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n\n ${({ $shouldShowKeyboardHighlighting, $shouldShowTagHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n !$shouldShowTagHighlighting &&\n css`\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n\ntype StyledTagInputTagWrapperProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapper = styled.div<StyledTagInputTagWrapperProps>`\n display: flex;\n align-items: center;\n gap: ${({ $size }) => ($size === 'medium' ? '4px' : '2px')};\n`;\n\nexport const StyledTagInputTagFocusWrapper = styled.div<StyledTagInputTagFocusWrapperProps>`\n display: inline-flex;\n\n ${({ $isSelected, $shouldShowKeyboardHighlighting }) =>\n $isSelected &&\n $shouldShowKeyboardHighlighting &&\n css`\n ${StyledTagInput}:focus-within & > .beta-chayns-badge {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n border-radius: 999px;\n outline-offset: 0;\n }\n `}\n`;\n\ntype StyledTagInputTagWrapperTextProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapperText = styled.p<StyledTagInputTagWrapperTextProps>`\n margin: 0;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<{\n $size: InputSize;\n}>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n border: none;\n height: ${({ $size }) => ($size === 'medium' ? '24px' : '20px')};\n flex-grow: 1;\n background-color: transparent;\n color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputIconWrapperProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputIconWrapper = styled.div<StyledTagInputIconWrapperProps>`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/badge/Badge.styles.js CHANGED Viewed

@@ -29,9 +29,9 @@ export const StyledBadge = styled.div`
                     border-radius: ${$borderRadius};
                     color: ${$fontColor ?? theme.text};
                     display: inline-block;
-                    font-size: 0.8rem;
+                    font-size: ${$size?.font ?? '80%'};
                     min-width: ${$minWidth};
-                    padding: 2px 6px;
+                    padding: ${$size?.padding ?? '2px 6px'};
                     line-height: 20px;
                     text-align: center;
                     cursor: ${$cursor};

package/lib/esm/components/badge/Badge.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.styles.js","names":["styled","css","BadgeDesign","StyledBadge","div","$backgroundColor","theme","$fontColor","$design","$cursor","$borderRadius","$size","$minWidth","BORDER","primary","font","padding","DEFAULT","text"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { BadgeDesign } from './Badge.types';\n\ntype StyledBadgeProps = WithTheme<{\n $cursor: CSSProperties['cursor'];\n $backgroundColor?: CSSProperties['backgroundColor'];\n $borderRadius: CSSProperties['borderRadius'];\n $fontColor?: CSSProperties['color'];\n $minWidth: CSSProperties['minWidth'];\n $size?: { font: CSSProperties['fontSize']; padding: CSSProperties['padding'] };\n $design: BadgeDesign;\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n ${({\n $backgroundColor,\n theme,\n $fontColor,\n $design,\n $cursor,\n $borderRadius,\n $size,\n $minWidth,\n }: StyledBadgeProps) => {\n switch ($design) {\n case BadgeDesign.BORDER:\n return css`\n border-radius: 50px;\n border: 1px solid ${theme.primary};\n color: ${theme.primary};\n font-size: ${$size?.font};\n padding: ${$size?.padding};\n user-select: none;\n width: fit-content;\n `;\n case BadgeDesign.DEFAULT:\n default:\n return css`\n background-color: ${$backgroundColor ?? theme['secondary-202']};\n border-radius: ${$borderRadius};\n color: ${$fontColor ?? theme.text};\n display: inline-block;\n font-size: ~~0.8rem~~;\n min-width: ${$minWidth};\n padding: 2px 6px;\n line-height: 20px;\n text-align: center;\n cursor: ${$cursor};\n `;\n }\n }}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,WAAW,QAAQ,eAAe;AAY3C,OAAO,MAAMC,WAAW,GAAGH,MAAM,CAACI,GAAqB;AACvD,MAAM,CAAC;EACCC,gBAAgB;EAChBC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,aAAa;EACbC,KAAK;EACLC;AACc,CAAC,KAAK;EACpB,QAAQJ,OAAO;IACX,KAAKN,WAAW,CAACW,MAAM;MACnB,OAAOZ,GAAG;AAC1B;AACA,wCAAwCK,KAAK,CAACQ,OAAO;AACrD,6BAA6BR,KAAK,CAACQ,OAAO;AAC1C,iCAAiCH,KAAK,EAAEI,IAAI;AAC5C,+BAA+BJ,KAAK,EAAEK,OAAO;AAC7C;AACA;AACA,iBAAiB;IACL,KAAKd,WAAW,CAACe,OAAO;IACxB;MACI,OAAOhB,GAAG;AAC1B,wCAAwCI,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAC;AAClF,qCAAqCI,aAAa;AAClD,6BAA6BH,UAAU,IAAID,KAAK,CAACY,IAAI;AACrD;AACA;~~AACA~~,~~iCAAiCN~~,SAAS;AAC1C;~~AACA~~;AACA;AACA,~~8BAA8BH~~,OAAO;AACrC,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Badge.styles.js","names":["styled","css","BadgeDesign","StyledBadge","div","$backgroundColor","theme","$fontColor","$design","$cursor","$borderRadius","$size","$minWidth","BORDER","primary","font","padding","DEFAULT","text"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { BadgeDesign } from './Badge.types';\n\ntype StyledBadgeProps = WithTheme<{\n $cursor: CSSProperties['cursor'];\n $backgroundColor?: CSSProperties['backgroundColor'];\n $borderRadius: CSSProperties['borderRadius'];\n $fontColor?: CSSProperties['color'];\n $minWidth: CSSProperties['minWidth'];\n $size?: { font: CSSProperties['fontSize']; padding: CSSProperties['padding'] };\n $design: BadgeDesign;\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n ${({\n $backgroundColor,\n theme,\n $fontColor,\n $design,\n $cursor,\n $borderRadius,\n $size,\n $minWidth,\n }: StyledBadgeProps) => {\n switch ($design) {\n case BadgeDesign.BORDER:\n return css`\n border-radius: 50px;\n border: 1px solid ${theme.primary};\n color: ${theme.primary};\n font-size: ${$size?.font};\n padding: ${$size?.padding};\n user-select: none;\n width: fit-content;\n `;\n case BadgeDesign.DEFAULT:\n default:\n return css`\n background-color: ${$backgroundColor ?? theme['secondary-202']};\n border-radius: ${$borderRadius};\n color: ${$fontColor ?? theme.text};\n display: inline-block;\n font-size: ${$size?.font ?? '80%'};\n min-width: ${$minWidth};\n padding: ${$size?.padding ?? '2px 6px'};\n line-height: 20px;\n text-align: center;\n cursor: ${$cursor};\n `;\n }\n }}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,WAAW,QAAQ,eAAe;AAY3C,OAAO,MAAMC,WAAW,GAAGH,MAAM,CAACI,GAAqB;AACvD,MAAM,CAAC;EACCC,gBAAgB;EAChBC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,OAAO;EACPC,aAAa;EACbC,KAAK;EACLC;AACc,CAAC,KAAK;EACpB,QAAQJ,OAAO;IACX,KAAKN,WAAW,CAACW,MAAM;MACnB,OAAOZ,GAAG;AAC1B;AACA,wCAAwCK,KAAK,CAACQ,OAAO;AACrD,6BAA6BR,KAAK,CAACQ,OAAO;AAC1C,iCAAiCH,KAAK,EAAEI,IAAI;AAC5C,+BAA+BJ,KAAK,EAAEK,OAAO;AAC7C;AACA;AACA,iBAAiB;IACL,KAAKd,WAAW,CAACe,OAAO;IACxB;MACI,OAAOhB,GAAG;AAC1B,wCAAwCI,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAC;AAClF,qCAAqCI,aAAa;AAClD,6BAA6BH,UAAU,IAAID,KAAK,CAACY,IAAI;AACrD;AACA,iCAAiCP,KAAK,EAAEI,IAAI,IAAI,KAAK;AACrD,iCAAiCH,SAAS;AAC1C,+BAA+BD,KAAK,EAAEK,OAAO,IAAI,SAAS;AAC1D;AACA;AACA,8BAA8BP,OAAO;AACrC,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.js CHANGED Viewed

@@ -38,7 +38,8 @@ const Checkbox = ({
   }, [shouldShowCentered]);
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   return /*#__PURE__*/React.createElement(StyledCheckbox, {
-    ref: checkboxRootRef
+    ref: checkboxRootRef,
+    className: "beta-chayns-checkbox"
   }, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
     $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     checked: isChecked,

package/lib/esm/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useKeyboardFocusHighlighting","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","createElement","ref","$shouldShowKeyboardHighlighting","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","~~className","~~$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n KeyboardEvent,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n StyledCheckbox,\n StyledCheckboxBox,\n StyledCheckboxBoxWrapper,\n StyledCheckboxInput,\n StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n /*\n Background color for the checked state.\n /\n checkedBackgroundColor?: CSSProperties['backgroundColor'];\n /\n Background color for the unchecked state.\n /\n uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n /\n Border color for the checkbox or switch indicator.\n /\n borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n /\n Text for checkbox or switch\n /\n children?: ReactElement \| string;\n /\n Indicates whether the checkbox or switch is selected\n /\n isChecked?: boolean;\n /\n Disables the checkbox or switch so it cannot be toggled\n /\n isDisabled?: boolean;\n /\n Classname for the label\n /\n labelClassName?: string;\n /\n Function to be executed if the checked value changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Whether the label should change the state of the checkbox\n /\n shouldChangeOnLabelClick?: boolean;\n /\n Changes the design to use switch instead of checkbox\n /\n shouldShowAsSwitch?: boolean;\n /\n Border radius for the checkbox or switch indicator.\n /\n borderRadius?: CSSProperties['borderRadius'];\n colors?: CheckboxColors;\n /\n Whether the Checkbox should be displayed centered to the label or at the top\n /\n shouldShowCentered?: boolean;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n borderRadius,\n colors,\n shouldShowCentered = false,\n shouldChangeOnLabelClick = true,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n const [checkboxTop, setCheckboxTop] = useState<number \| undefined>(undefined);\n\n const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n useEffect(() => {\n if (checkboxRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: checkboxRootRef.current,\n });\n\n const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setCheckboxTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n return (\n <StyledCheckbox ref={checkboxRootRef}>\n <StyledCheckboxInput\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n\n <StyledCheckboxBoxWrapper\n $shouldShowAsSwitch={shouldShowAsSwitch}\n style={{\n top: shouldShowCentered ? '50%' : checkboxTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledCheckboxBox\n htmlFor={uuid}\n ref={checkboxBoxRef}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $checkedBackgroundColor={colors?.checkedBackgroundColor}\n $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n $borderRadius={borderRadius}\n $borderColor={colors?.borderColor}\n />\n </StyledCheckboxBoxWrapper>\n <StyledCheckboxLabel\n className={labelClassName}\n $isDisabled={isDisabled}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"AAAA,OAAOA,KAAK,IAORC,WAAW,EACXC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SACIC,cAAc,EACdC,iBAAiB,EACjBC,wBAAwB,EACxBC,mBAAmB,EACnBC,mBAAmB,QAChB,mBAAmB;AA8D1B,MAAMC,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,cAAc;EACdC,QAAQ;EACRC,kBAAkB;EAClBC,YAAY;EACZC,MAAM;EACNC,kBAAkB,GAAG,KAAK;EAC1BC,wBAAwB,GAAG,IAAI;EAC/BC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGtB,QAAQ,CAACW,SAAS,IAAI,KAAK,CAAC;EAC5D,MAAM,CAACY,WAAW,EAAEC,cAAc,CAAC,GAAGxB,QAAQ,CAAqByB,SAAS,CAAC;EAE7E,MAAMC,cAAc,GAAG3B,MAAM,CAAmB,IAAI,CAAC;EACrD,MAAM4B,eAAe,GAAG5B,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAM6B,YAAY,GAAG/B,WAAW,CAC3BgC,KAAoC,IAAK;IACtCP,WAAW,CAACO,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACe,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACf,QAAQ,CACb,CAAC;EAED,MAAMkB,IAAI,GAAG9B,OAAO,CAAC,CAAC;EAEtBJ,SAAS,CAAC,MAAM;IACZ,IAAI6B,eAAe,CAACM,OAAO,IAAI,CAACf,kBAAkB,EAAE;MAChD,MAAMgB,gBAAgB,GAAG/B,yBAAyB,CAAC;QAC/CgC,SAAS,EAAER,eAAe,CAACM;MAC/B,CAAC,CAAC;MAEF,MAAMG,SAAS,GAAGV,cAAc,CAACO,OAAO,EAAEI,qBAAqB,CAAC,CAAC,CAACC,MAAM,IAAI,CAAC;MAE7Ed,cAAc,CAAC,CAACU,gBAAgB,GAAGE,SAAS,IAAI,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAAClB,kBAAkB,CAAC,CAAC;EAExB,MAAMqB,8BAA8B,GAAGtC,4BAA4B,CAC/DmB,gCAAgC,IAAI,CAACR,UACzC,CAAC;EAED,oBACIhB,KAAA,CAAA4C,aAAA,CAACpC,cAAc;IAACqC,GAAG,EAAEd;~~EAAgB~~,~~gBACjC/B~~,KAAA,CAAA4C,aAAA,CAACjC,mBAAmB;~~IAChBmC~~,+BAA+B,~~EAAEH~~,8BAA+B;IAChER,OAAO,EAAEpB,SAAU;~~IACnBgC~~,QAAQ,~~EAAE/B~~,UAAW;~~IACrBgC~~,EAAE,~~EAAEZ~~,IAAK;IACTlB,QAAQ,EAAEc,YAAa;~~IACvBiB~~,IAAI,EAAC;EAAU,CAClB,CAAC,~~eAEFjD~~,KAAA,CAAA4C,aAAA,CAAClC,wBAAwB;~~IACrBwC~~,mBAAmB,~~EAAE/B~~,kBAAmB;~~IACxCgC~~,KAAK,EAAE;MACHC,GAAG,~~EAAE9B~~,kBAAkB,GAAG,KAAK,GAAGK,WAAW;~~MAC7C0B~~,SAAS,~~EAAE/B~~,kBAAkB,GAAG,kBAAkB,GAAGO;IACzD;EAAE,gBAEF7B,KAAA,CAAA4C,aAAA,CAACnC,iBAAiB;~~IACd6C~~,OAAO,~~EAAElB~~,IAAK;IACdS,GAAG,EAAEf,cAAe;~~IACpByB~~,UAAU,~~EAAExC~~,SAAS,IAAIU,QAAS;~~IAClC+B~~,WAAW,~~EAAExC~~,UAAW;~~IACxBkC~~,mBAAmB,~~EAAE/B~~,kBAAmB;~~IACxCsC~~,uBAAuB,~~EAAEpC~~,MAAM,~~EAAEqC~~,sBAAuB;IACxDC,yBAAyB,~~EAAEtC~~,MAAM,~~EAAEuC~~,wBAAyB;IAC5DC,aAAa,~~EAAEzC~~,YAAa;~~IAC5B0C~~,YAAY,~~EAAEzC~~,MAAM,~~EAAE0C~~;EAAY,CACrC,CACqB,CAAC,~~eAC3B/D~~,KAAA,CAAA4C,aAAA,CAAChC,mBAAmB;~~IAChBoD~~,SAAS,~~EAAE/C~~,cAAe;~~IAC1BuC~~,WAAW,~~EAAExC~~,UAAW;IACxBiD,yBAAyB,EAAE1C,wBAAyB;~~IACpD2B~~,mBAAmB,~~EAAE/B~~,kBAAmB;~~IACxCmC~~,OAAO,~~EAAE/B~~,wBAAwB,GAAGa,IAAI,GAAGP;EAAU,GAEpDf,QACgB,CACT,CAAC;AAEzB,CAAC;AAEDD,QAAQ,CAACqD,WAAW,GAAG,UAAU;AAEjC,eAAerD,QAAQ","ignoreList":[]}
1	+ {"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useKeyboardFocusHighlighting","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","createElement","ref","className","$shouldShowKeyboardHighlighting","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n CSSProperties,\n FC,\n KeyboardEvent,\n ReactElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n StyledCheckbox,\n StyledCheckboxBox,\n StyledCheckboxBoxWrapper,\n StyledCheckboxInput,\n StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n /*\n Background color for the checked state.\n /\n checkedBackgroundColor?: CSSProperties['backgroundColor'];\n /\n Background color for the unchecked state.\n /\n uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n /\n Border color for the checkbox or switch indicator.\n /\n borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n /\n Text for checkbox or switch\n /\n children?: ReactElement \| string;\n /\n Indicates whether the checkbox or switch is selected\n /\n isChecked?: boolean;\n /\n Disables the checkbox or switch so it cannot be toggled\n /\n isDisabled?: boolean;\n /\n Classname for the label\n /\n labelClassName?: string;\n /\n Function to be executed if the checked value changes\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Whether the label should change the state of the checkbox\n /\n shouldChangeOnLabelClick?: boolean;\n /\n Changes the design to use switch instead of checkbox\n /\n shouldShowAsSwitch?: boolean;\n /\n Border radius for the checkbox or switch indicator.\n /\n borderRadius?: CSSProperties['borderRadius'];\n colors?: CheckboxColors;\n /\n Whether the Checkbox should be displayed centered to the label or at the top\n /\n shouldShowCentered?: boolean;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n children,\n isChecked,\n isDisabled,\n labelClassName,\n onChange,\n shouldShowAsSwitch,\n borderRadius,\n colors,\n shouldShowCentered = false,\n shouldChangeOnLabelClick = true,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [isActive, setIsActive] = useState(isChecked ?? false);\n const [checkboxTop, setCheckboxTop] = useState<number \| undefined>(undefined);\n\n const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n const handleChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setIsActive(event.target.checked);\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange],\n );\n\n const uuid = useUuid();\n\n useEffect(() => {\n if (checkboxRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: checkboxRootRef.current,\n });\n\n const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setCheckboxTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n return (\n <StyledCheckbox ref={checkboxRootRef} className=\"beta-chayns-checkbox\">\n <StyledCheckboxInput\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n checked={isChecked}\n disabled={isDisabled}\n id={uuid}\n onChange={handleChange}\n type=\"checkbox\"\n />\n\n <StyledCheckboxBoxWrapper\n $shouldShowAsSwitch={shouldShowAsSwitch}\n style={{\n top: shouldShowCentered ? '50%' : checkboxTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledCheckboxBox\n htmlFor={uuid}\n ref={checkboxBoxRef}\n $isChecked={isChecked ?? isActive}\n $isDisabled={isDisabled}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n $checkedBackgroundColor={colors?.checkedBackgroundColor}\n $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n $borderRadius={borderRadius}\n $borderColor={colors?.borderColor}\n />\n </StyledCheckboxBoxWrapper>\n <StyledCheckboxLabel\n className={labelClassName}\n $isDisabled={isDisabled}\n $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n $shouldShowAsSwitch={shouldShowAsSwitch}\n htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n >\n {children}\n </StyledCheckboxLabel>\n </StyledCheckbox>\n );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-box/SearchBox.js CHANGED Viewed

@@ -633,6 +633,7 @@ const SearchBox = /*#__PURE__*/forwardRef(({
     onRemove: tagInputSettings.onRemove,
     placeholder: placeholder,
     ref: tagInputRef,
+    size: tagInputSettings.size,
     shouldAllowMultiple: tagInputSettings.shouldAllowMultiple,
     shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     shouldPreventEnter: true,