npm - @chayns-components/core - Versions diffs - 5.0.0-beta.998 → 5.0.0 - Mend

@chayns-components/core 5.0.0-beta.998 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (961) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.js","names":["React","useCallback","useEffect","useMemo","useState","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","TagInput","_ref","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","theme","handleKeyDown","event","key","prevValue","prevTags","newTag","id","text","newSelectedId","length","prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","items","forEach","_ref2","push","createElement","backgroundColor","icons","onClick","onKeyDown","onChange"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\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 StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n /*\n Function to be executed when a tag is added.\n /\n onAdd?: (tag: Tag) => void;\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 The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\n// ToDo: Add reference with \"save\" function to return unsaved tags\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n const [internalTags, setInternalTags] = useState<Tag[]>();\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const theme = useTheme();\n\n useEffect(() => {\n if (tags) {\n setInternalTags(tags);\n }\n }, [tags]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n setInternalTags((prevTags) => {\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n onAdd(newTag);\n }\n\n return prevTags ? [...prevTags, newTag] : [newTag];\n });\n\n return '';\n });\n }\n\n if (event.key === 'Backspace' && currentValue === '') {\n if (!selectedId) {\n if (!internalTags) {\n return;\n }\n\n const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n setSelectedId(newSelectedId);\n\n return;\n }\n\n setInternalTags((prevState) => {\n if (!prevState) {\n return prevState;\n }\n\n const removedId = prevState[prevState.length - 1]?.id;\n\n if (!removedId) {\n return prevState;\n }\n\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n if (typeof onRemove === 'function') {\n onRemove(removedId);\n }\n\n setSelectedId(undefined);\n\n return updatedTags;\n });\n }\n },\n [currentValue, internalTags, onAdd, onRemove, selectedId],\n );\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n };\n\n const handleIconClick = useCallback(\n (id: string) => {\n setInternalTags((prevState) => {\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n return updatedTags;\n });\n },\n [onRemove],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!internalTags) {\n return items;\n }\n\n internalTags.forEach(({ text, id }) => {\n items.push(\n <Badge\n key={`tag-input-${id}`}\n backgroundColor={\n id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n });\n\n return items;\n }, [handleIconClick, internalTags, selectedId, theme]);\n\n return useMemo(\n () => (\n <StyledTagInput>\n {content}\n <StyledTagInputTagInput\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n value={currentValue}\n />\n </StyledTagInput>\n ),\n [content, currentValue, handleKeyDown, placeholder, tags],\n );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldPreventEnter","tags","ref","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","theme","handleResetValue","shouldChangeColor","blur","current","getUnsavedTagText","undefined","resetValue","handleKeyDown","event","key","prevValue","length","newTag","id","text","onAddResult","Promise","then","shouldAddTag","newSelectedId","removedId","handleChange","target","value","handleIconClick","content","items","slice","forEach","rightElement","push","createElement","backgroundColor","icons","onClick","preventDefault","stopPropagation","shouldShowInput","$shouldChangeColor","onKeyDown"],"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 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';\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 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 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 useImperativeHandle(\n ref,\n () => ({\n blur: () => inputRef.current?.blur(),\n getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n resetValue: handleResetValue,\n }),\n [currentValue],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter' && !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 if (event.key === 'Backspace' && currentValue === '') {\n if (!selectedId) {\n if (!tags) {\n return;\n }\n\n const newSelectedId = tags[tags.length - 1]?.id;\n\n setSelectedId(newSelectedId);\n\n return;\n }\n\n if (!tags) {\n return;\n }\n\n const removedId = tags[tags.length - 1]?.id;\n\n if (!removedId) {\n return;\n }\n\n if (typeof onRemove === 'function') {\n onRemove(removedId);\n }\n\n setSelectedId(undefined);\n }\n },\n [\n currentValue,\n onAdd,\n onRemove,\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 if (typeof onRemove === 'function') {\n onRemove(id);\n }\n },\n [onRemove],\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 items.push(\n <Badge\n key={`tag-input-${id}`}\n backgroundColor={\n id === selectedId\n ? ((theme['206'] as string) ?? undefined)\n : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n {rightElement}\n <Icon\n icons={['ts-wrong']}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleIconClick(id);\n }}\n />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n },\n );\n\n return items;\n }, [tags, shouldAllowMultiple, selectedId, theme, handleIconClick]);\n\n const shouldShowInput = useMemo(\n () => shouldAllowMultiple \|\| (tags?.length ?? 0) < 1,\n [tags?.length, shouldAllowMultiple],\n );\n\n return useMemo(\n () => (\n <StyledTagInput $shouldChangeColor={shouldChangeColor}>\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 tags,\n ],\n );\n },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

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

@@ -6,12 +6,10 @@ export const StyledTagInput = styled.div`
     padding: 5px;
     align-items: center;
     gap: 6px;
-    background-color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['100'];
-}};
+    background-color: ${({
+  theme,
+  $shouldChangeColor
+}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
     border: 1px solid rgba(160, 160, 160, 0.3);
 `;
 export const StyledTagInputTagWrapper = styled.div`
@@ -32,11 +30,15 @@ export const StyledTagInputTagInput = styled.input`
     height: 24px;
     flex-grow: 1;
     background-color: transparent;
-    color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.text;
-}};
+    color: ${({
+  theme
+}) => theme.text};
+`;
+export const StyledTagInputIconWrapper = styled.div`
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    margin-left: 5px;
 `;
 //# sourceMappingURL=TagInput.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.styles.js","names":["styled","StyledTagInput","div","~~_ref~~","~~theme~~","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","~~_ref2~~","~~text~~"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTagInputProps = WithTheme<~~unknown~~>;\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 }: StyledTagInputProps) => theme['100']};\n border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\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"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,~~wBAAwBC~~,~~IAAA~~;~~EAAA~~,~~IAAC~~;~~IAAEC~~;~~EAA2B~~,CAAC,~~GAAAD~~,~~IAAA;EAAA~~,~~OAAKC~~,KAAK,CAAC,KAAK,CAAC;~~AAAA~~;~~AACxE;~~AACA,CAAC;AAED,OAAO,~~MAAMC~~,wBAAwB,~~GAAGL~~,MAAM,CAACE,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMI~~,4BAA4B,~~GAAGN~~,MAAM,~~CAACO~~,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,~~GAAGR~~,MAAM,~~CAACS~~,KAAkC;AAC/E;AACA;AACA;AACA;AACA,~~aAAaC~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAEN;EAAmC~~,CAAC,~~GAAAM~~,~~KAAA~~;~~EAAA~~,~~OAAKN~~,~~KAAK~~,~~CAACO~~,~~IAAI~~;~~AAAA~~;~~AACnE~~,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.styles.js","names":["styled","StyledTagInput","div","theme","$shouldChangeColor","colorMode","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTagInputProps = WithTheme<{ $shouldChangeColor: boolean }>;\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\nexport const StyledTagInputTagWrapper = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\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,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,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,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGN,MAAM,CAACE,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,4BAA4B,GAAGP,MAAM,CAACQ,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGT,MAAM,CAACU,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEP;AAAmC,CAAC,KAAKA,KAAK,CAACQ,IAAI;AACnE,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGZ,MAAM,CAACE,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.js CHANGED Viewed

@@ -3,26 +3,27 @@ import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHan
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { StyledInputRightElement } from '../input/Input.styles';
 import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
-const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    isDisabled,
-    isInvalid,
-    placeholder,
-    value,
-    onChange,
-    onFocus,
-    onKeyDown,
-    rightElement,
-    onBlur,
-    maxHeight = '120px',
-    minHeight = '41px'
-  } = _ref;
+import { useCursorRepaint } from '../../hooks/resize';
+const TextArea = /*#__PURE__*/forwardRef(({
+  isDisabled,
+  isInvalid,
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onKeyDown,
+  rightElement,
+  onBlur,
+  maxHeight = '120px',
+  minHeight = '41px'
+}, ref) => {
   const [isOverflowing, setIsOverflowing] = useState(false);
   const areaProvider = useContext(AreaContext);
   const textareaRef = useRef(null);
   const {
     browser
   } = getDevice();
+  useCursorRepaint(textareaRef);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;

package/lib/esm/components/text-area/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","names":["getDevice","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","ref","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n /*\n Disables the text area so that it cannot be changed.\n /\n isDisabled?: boolean;\n /\n If true, the text area is marked as invalid\n /\n isInvalid?: boolean;\n /\n The maximum height of the text area.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n The minimum height of the text area.\n /\n minHeight?: CSSProperties['minHeight'];\n /\n Function that is executed when the text area loses focus.\n /\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /\n Function that is executed when the text of the text area changes.\n /\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /\n Placeholder for the text area field.\n /\n placeholder?: string \| ReactElement;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Value if the text area should be controlled.\n /\n value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n },\n ref,\n ) => {\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const { browser } = getDevice();\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /\n This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n $browser={browser?.name as BrowserName}\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n {!value && (\n <StyledTextAreaLabelWrapper>\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && rightElement}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n browser?.name,\n isDisabled,\n isInvalid,\n isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n rightElement,\n shouldChangeColor,\n shouldShowBorder,\n value,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"TextArea.js","names":["getDevice","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","TextArea","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","minHeight","ref","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldShowBorder","props","style","backgroundColor","undefined","shouldChangeColor","adjustTextareaHeight","current","height","scrollHeight","parseInt","toString","length","createElement","$isDisabled","$isInvalid","$shouldChangeColor","$browser","name","disabled","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n StyledTextArea,\n StyledTextAreaContent,\n StyledTextAreaContentWrapper,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport type TextAreaProps = {\n /*\n Disables the text area so that it cannot be changed.\n /\n isDisabled?: boolean;\n /\n If true, the text area is marked as invalid\n /\n isInvalid?: boolean;\n /\n The maximum height of the text area.\n /\n maxHeight?: CSSProperties['maxHeight'];\n /\n The minimum height of the text area.\n /\n minHeight?: CSSProperties['minHeight'];\n /\n Function that is executed when the text area loses focus.\n /\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /\n Function that is executed when the text of the text area changes.\n /\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /\n Function that is executed when the input field is focused\n /\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n /\n Function that is executed when a letter is pressed\n /\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n /\n Placeholder for the text area field.\n /\n placeholder?: string \| ReactElement;\n /\n An element that should be displayed on the right side of the Input.\n /\n rightElement?: ReactElement;\n /\n Value if the text area should be controlled.\n /\n value?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n isDisabled,\n isInvalid,\n placeholder,\n value,\n onChange,\n onFocus,\n onKeyDown,\n rightElement,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n },\n ref,\n ) => {\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const { browser } = getDevice();\n\n useCursorRepaint(textareaRef);\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(\n textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n );\n }\n }, [maxHeight]);\n\n useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n /\n This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (typeof value === 'string' && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea $isDisabled={isDisabled}>\n <StyledTextAreaContentWrapper\n $isInvalid={isInvalid}\n $shouldChangeColor={shouldChangeColor}\n >\n <StyledTextAreaContent>\n <StyledTextAreaInput\n $browser={browser?.name as BrowserName}\n disabled={isDisabled}\n $isInvalid={isInvalid}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n {!value && (\n <StyledTextAreaLabelWrapper>\n <StyledTextAreaLabel $isInvalid={isInvalid}>\n {placeholder}\n </StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextAreaContent>\n {rightElement && shouldShowBorder && rightElement}\n </StyledTextAreaContentWrapper>\n {rightElement && !shouldShowBorder && (\n <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n )}\n </StyledTextArea>\n ),\n [\n browser?.name,\n isDisabled,\n isInvalid,\n isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n rightElement,\n shouldChangeColor,\n shouldShowBorder,\n value,\n ],\n );\n },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.styles.js CHANGED Viewed

@@ -3,78 +3,56 @@ export const StyledTextArea = styled.div`
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
-    opacity: ${_ref => {
-  let {
-    $isDisabled
-  } = _ref;
-  return $isDisabled ? 0.5 : 1;
-}};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
     position: relative;
 `;
 export const StyledTextAreaContentWrapper = styled.div`
-    background-color: ${_ref2 => {
-  let {
-    theme,
-    $shouldChangeColor
-  } = _ref2;
-  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
-}};
+    background-color: ${({
+  theme,
+  $shouldChangeColor
+}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
     border-radius: 3px;
     border: 1px solid
-        ${_ref3 => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref3;
-  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
-}};
+        ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
     width: 100%;
     display: flex;
 `;
 export const StyledTextAreaContent = styled.div`
+    position: relative;
     display: flex;
     width: 100%;
 `;
 export const StyledTextAreaInput = styled.textarea`
-    color: ${_ref4 => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref4;
-  return $isInvalid ? theme.wrong : theme.text;
-}};
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : theme.text};
     background: none;
     border: none;
     resize: none;
-    overflow-y: ${_ref5 => {
-  let {
-    $isOverflowing
-  } = _ref5;
-  return $isOverflowing ? 'scroll' : 'hidden';
-}};
-    max-height: ${_ref6 => {
-  let {
-    $maxHeight
-  } = _ref6;
-  return typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight;
-}};
-    min-height: ${_ref7 => {
-  let {
-    $minHeight
-  } = _ref7;
-  return typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight;
-}};
+    overflow-y: ${({
+  $isOverflowing
+}) => $isOverflowing ? 'scroll' : 'hidden'};
+    max-height: ${({
+  $maxHeight
+}) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+    min-height: ${({
+  $minHeight
+}) => typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};
     width: 100%;
     padding: 8px 10px;
     cursor: text;
     // Styles for custom scrollbar
-    ${_ref8 => {
-  let {
-    $browser,
-    theme
-  } = _ref8;
-  return $browser === 'firefox' ? css`
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;
               ` : css`
@@ -97,8 +75,7 @@ export const StyledTextAreaInput = styled.textarea`
                       background-clip: padding-box;
                       border: solid 3px transparent;
                   }
-              `;
-}}
+              `}
 `;
 export const StyledTextAreaLabelWrapper = styled.label`
     left: 10px;
@@ -115,13 +92,10 @@ export const StyledTextAreaLabelWrapper = styled.label`
     cursor: text;
 `;
 export const StyledTextAreaLabel = styled.label`
-    color: ${_ref9 => {
-  let {
-    theme,
-    $isInvalid
-  } = _ref9;
-  return $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`;
-}};
+    color: ${({
+  theme,
+  $isInvalid
+}) => $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};
     line-height: 1.3;
     width: 100%;
     white-space: nowrap;

package/lib/esm/components/text-area/TextArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","~~_ref","~~$isDisabled","StyledTextAreaContentWrapper","~~_ref2","~~theme","$shouldChangeColor","colorMode","~~_ref3","~~$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","~~_ref4","~~text","~~_ref5","~~$isOverflowing","~~_ref6","~~$maxHeight","~~_ref7","~~$minHeight","~~_ref8","~~$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"~~,"_ref9"~~],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $browser: BrowserName;\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,~~eAAeC~~,~~IAAA~~;~~EAAA,IAAC~~;~~IAAEC;EAAY~~,CAAC,~~GAAAD~~,~~IAAA;EAAA,OAAMC,~~WAAW,GAAG,GAAG,GAAG,~~CAAC~~;~~AAAA,CAAC;~~AAC3D;AACA,CAAC;AAOD,OAAO,MAAMC,4BAA4B,~~GAAGN~~,MAAM,CAACG,GAAsC;AACzF,~~wBAAwBI~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAEC,~~KAAK;~~IAAEC~~;~~EAAsD~~,CAAC,~~GAAAF~~,~~KAAA;EAAA,OACjFC,~~KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;~~AAAA;~~AACzF;AACA;AACA,~~UAAUG~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAEH,~~KAAK;~~IAAEI~~;~~EAA8C~~,CAAC,~~GAAAD~~,~~KAAA;EAAA,OACvDC,~~UAAU,~~GAAGJ~~,KAAK,~~CAACK~~,KAAK,GAAG,0BAA0B;~~AAAA;~~AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,~~GAAGd~~,MAAM,CAACG,GAAG;AAC/C;AACA;AACA,CAAC;AAUD,OAAO,~~MAAMY~~,mBAAmB,~~GAAGf~~,MAAM,~~CAACgB~~,QAAkC;AAC5E,~~aAAaC~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAET,~~KAAK;~~IAAEI~~;~~EAAqC~~,CAAC,~~GAAAK~~,~~KAAA;EAAA,OACrDL,~~UAAU,~~GAAGJ~~,KAAK,~~CAACK~~,KAAK,~~GAAGL~~,KAAK,~~CAACU~~,IAAI;~~AAAA;~~AAC7C;AACA;AACA;AACA,~~kBAAkBC~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAEC;EAAe~~,CAAC,~~GAAAD~~,~~KAAA;EAAA,OAAMC,~~cAAc,GAAG,QAAQ,GAAG,~~QAAQ~~;~~AAAA,CAAC;~~AAChF,~~kBAAkBC~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAEC;EAAqC~~,CAAC,~~GAAAD~~,~~KAAA;EAAA~~,~~OACnD,OAAOC,~~UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;~~AAAA;~~AACvE,~~kBAAkBC~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAEC;EAAqC~~,CAAC,~~GAAAD~~,~~KAAA;EAAA~~,~~OACnD,OAAOC,~~UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;~~AAAA;~~AACvE;AACA;AACA;AACA;AACA;AACA,~~MAAMC~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAEC,~~QAAQ;~~IAAElB~~;~~EAAgC~~,CAAC,~~GAAAiB~~,~~KAAA;EAAA,OAC5CC,~~QAAQ,KAAK,SAAS,~~GAChBzB~~,GAAG;AACjB,~~0CAA0CO~~,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,~~GACDP~~,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;~~AAAA;~~AACf,CAAC;AAED,OAAO,~~MAAMmB~~,0BAA0B,~~GAAG3B~~,MAAM,~~CAAC4B~~,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,~~GAAG7B~~,MAAM,~~CAAC4B~~,KAA+B;AACzE,~~aAAaE~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAEtB,~~KAAK;~~IAAEI~~;~~EAAqC~~,CAAC,~~GAAAkB~~,~~KAAA;EAAA,OACrDlB,~~UAAU,~~GAAGJ~~,KAAK,~~CAACK~~,KAAK,GAAG,~~QAAQL~~,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;~~AAAA;~~AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n position: relative;\n`;\n\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n $isInvalid: TextAreaProps['isInvalid'];\n $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaContentWrapperProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n border-radius: 3px;\n border: 1px solid\n ${({ theme, $isInvalid }: StyledTextAreaContentWrapperProps) =>\n $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n width: 100%;\n display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n position: relative;\n display: flex;\n width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $browser: BrowserName;\n $isInvalid: TextAreaProps['isInvalid'];\n $isOverflowing: boolean;\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n $isInvalid ? theme.wrong : theme.text};\n background: none;\n border: none;\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n width: 100%;\n padding: 8px 10px;\n cursor: text;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n cursor: text;\n text-overflow: ellipsis;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAOD,OAAO,MAAMC,4BAA4B,GAAGL,MAAM,CAACG,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC;AAAsD,CAAC,KACjFD,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEG;AAA8C,CAAC,KACvDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,0BAA0B;AACjE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGX,MAAM,CAACG,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMS,mBAAmB,GAAGZ,MAAM,CAACa,QAAkC;AAC5E,aAAa,CAAC;EAAEP,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACQ,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEZ;AAAgC,CAAC,KAC5CY,QAAQ,KAAK,SAAS,GAChBjB,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMa,0BAA0B,GAAGnB,MAAM,CAACoB,KAAK;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGrB,MAAM,CAACoB,KAA+B;AACzE,aAAa,CAAC;EAAEd,KAAK;EAAEG;AAAqC,CAAC,KACrDA,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,QAAQJ,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/tooltip/Tooltip.js CHANGED Viewed

@@ -3,17 +3,19 @@ import { isTextOnlyElement } from '../../utils/tooltip';
 import Popup from '../popup/Popup';
 import TooltipItem from './tooltip-item/TooltipItem';
 import { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';
-const Tooltip = _ref => {
-  let {
-    item,
-    children,
-    container,
-    isDisabled,
-    shouldHideOnChildrenLeave,
-    yOffset,
-    itemWidth,
-    shouldUseChildrenWidth = true
-  } = _ref;
+const Tooltip = ({
+  alignment,
+  item,
+  children,
+  container,
+  isDisabled,
+  shouldHideOnChildrenLeave,
+  maxItemWidth,
+  yOffset,
+  itemWidth,
+  shouldUseFullWidth = false,
+  shouldUseChildrenWidth = !shouldUseFullWidth
+}) => {
   const tooltipRef = useRef(null);
   const content = useMemo(() => {
     if (/*#__PURE__*/isValidElement(item)) {
@@ -21,27 +23,35 @@ const Tooltip = _ref => {
     }
     return /*#__PURE__*/React.createElement(TooltipItem, {
       width: itemWidth,
+      maxWidth: maxItemWidth,
       text: item.text,
       headline: item.headline,
       imageUrl: item.imageUrl,
       button: item.button
     });
-  }, [item, itemWidth]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledTooltip, null, isDisabled ? /*#__PURE__*/React.createElement(StyledTooltipChildren, {
+  }, [item, itemWidth, maxItemWidth]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledTooltip, {
+    className: "beta-chayns-tooltip"
+  }, isDisabled ? /*#__PURE__*/React.createElement(StyledTooltipChildren, {
     $isOnlyText: isTextOnlyElement(children),
-    $shouldUseChildrenWidth: shouldUseChildrenWidth
+    $shouldUseChildrenWidth: shouldUseChildrenWidth,
+    $shouldUseFullWidth: shouldUseFullWidth
   }, children) : /*#__PURE__*/React.createElement(Popup, {
+    alignment: alignment,
     shouldShowOnHover: true,
     shouldHideOnChildrenLeave: shouldHideOnChildrenLeave,
     content: content,
     ref: tooltipRef,
     container: container,
     yOffset: yOffset,
-    shouldUseChildrenWidth: shouldUseChildrenWidth
+    shouldUseChildrenWidth: shouldUseChildrenWidth,
+    shouldUseFullWidth: shouldUseFullWidth,
+    shouldScrollWithContent: true
   }, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
     $isOnlyText: isTextOnlyElement(children),
-    $shouldUseChildrenWidth: shouldUseChildrenWidth
-  }, children))), [isDisabled, children, shouldUseChildrenWidth, shouldHideOnChildrenLeave, content, container, yOffset]);
+    $shouldUseChildrenWidth: shouldUseChildrenWidth,
+    $shouldUseFullWidth: shouldUseFullWidth
+  }, children))), [isDisabled, children, shouldUseChildrenWidth, shouldUseFullWidth, alignment, shouldHideOnChildrenLeave, content, container, yOffset]);
 };
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

package/lib/esm/components/tooltip/Tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","~~_ref~~","item","children","container","isDisabled","shouldHideOnChildrenLeave","yOffset","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /*\n The elements that the tooltip should surround.\n /\n children: ReactNode;\n /\n The element where the content of the `Tooltip` should be rendered via React Portal.\n /\n container?: Element;\n /\n The content that should be displayed.\n /\n item: ITooltipItem \| ReactNode;\n /\n The width of an item.\n /\n itemWidth?: CSSProperties['width'];\n /\n whether the tooltip should be shown.\n /\n isDisabled?: boolean;\n /\n Whether the tooltip should be hidden after the children is not hovered.\n /\n shouldHideOnChildrenLeave?: boolean;\n /\n Whether the width of the children should be used.\n /\n shouldUseChildrenWidth?: boolean;\n /\n The Y offset of the tooltip to the children.\n */\n yOffset?: number;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n item,\n children,\n container,\n isDisabled,\n shouldHideOnChildrenLeave,\n yOffset,\n itemWidth,\n shouldUseChildrenWidth = ~~true~~,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip>\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n shouldShowOnHover\n shouldHideOnChildrenLeave={shouldHideOnChildrenLeave}\n content={content}\n ref={tooltipRef}\n container={container}\n yOffset={yOffset}\n shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [\n isDisabled,\n children,\n shouldUseChildrenWidth,\n shouldHideOnChildrenLeave,\n content,\n container,\n yOffset,\n ],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;~~AAqCvE~~,MAAMC,OAAyB,~~GAAGC~~,~~IAAA,IAS5B~~;~~EAAA,IAT6B;IAC~~/BC,IAAI;~~IACJC~~,QAAQ;~~IACRC~~,SAAS;~~IACTC~~,UAAU;~~IACVC~~,yBAAyB;~~IACzBC~~,OAAO;~~IACPC~~,SAAS;~~IACTC~~,sBAAsB,GAAG;~~EAC7B~~,CAAC,~~GAAAR,IAAA~~;~~EACG~~,~~MAAMS~~,UAAU,~~GAAGhB~~,MAAM,CAAW,IAAI,CAAC;EAEzC,~~MAAMiB~~,OAAO,~~GAAGlB~~,OAAO,CAAC,MAAM;IAC1B,iBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,~~CAAAqB~~,aAAA,~~CAACf~~,WAAW;~~MACRgB~~,KAAK,~~EAAEL~~,SAAU;~~MACjBM~~,IAAI,~~EAAGZ~~,IAAI,~~CAAkBY~~,IAAK;MAClCC,QAAQ,~~EAAGb~~,IAAI,~~CAAkBa~~,QAAS;MAC1CC,QAAQ,~~EAAGd~~,IAAI,~~CAAkBc~~,QAAS;MAC1CC,MAAM,~~EAAGf~~,IAAI,~~CAAkBe~~;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,~~CAACf~~,IAAI,~~EAAEM~~,SAAS,CAAC,CAAC;~~EAErB~~,~~OAAOf~~,OAAO,CACV,mBACIF,KAAA,~~CAAAqB~~,aAAA,~~CAACd~~,aAAa,~~QACTO~~,UAAU,gBACPd,KAAA,~~CAAAqB~~,aAAA,~~CAACb~~,qBAAqB;~~IAClBmB~~,WAAW,~~EAAEvB~~,iBAAiB,CAACQ,QAAQ,CAAE;~~IACzCgB~~,uBAAuB,~~EAAEV~~;~~EAAuB~~,~~GAE/CN~~,QACkB,CAAC,gBAExBZ,KAAA,~~CAAAqB~~,aAAA,~~CAAChB~~,KAAK;~~IACFwB~~,iBAAiB;~~IACjBd~~,yBAAyB,EAAEA,yBAA0B;~~IACrDK~~,OAAO,EAAEA,OAAQ;~~IACjBU~~,GAAG,~~EAAEX~~,UAAW;~~IAChBN~~,SAAS,EAAEA,SAAU;~~IACrBG~~,OAAO,EAAEA,OAAQ;~~IACjBE~~,sBAAsB,EAAEA;~~EAAuB,gBAE~~/~~ClB~~,KAAA,~~CAAAqB~~,aAAA,~~CAACb~~,qBAAqB;~~IAClBmB~~,WAAW,~~EAAEvB~~,iBAAiB,CAACQ,QAAQ,CAAE;~~IACzCgB~~,uBAAuB,~~EAAEV~~;~~EAAuB~~,~~GAE/CN~~,QACkB,CACpB,CAEA,CAClB,EACD,CACIE,UAAU,EACVF,QAAQ,~~EACRM~~,sBAAsB,~~EACtBH~~,yBAAyB,~~EACzBK~~,OAAO,~~EACPP~~,SAAS,~~EACTG~~,OAAO,CAEf,CAAC;AACL,CAAC;~~AAEDP~~,OAAO,~~CAACsB~~,WAAW,GAAG,SAAS;AAE/B,~~eAAetB~~,OAAO","ignoreList":[]}
1	+ {"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","alignment","item","children","container","isDisabled","shouldHideOnChildrenLeave","maxItemWidth","yOffset","itemWidth","shouldUseFullWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","maxWidth","text","headline","imageUrl","button","className","$isOnlyText","$shouldUseChildrenWidth","$shouldUseFullWidth","shouldShowOnHover","ref","shouldScrollWithContent","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupAlignment, PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n /*\n The alignment of the tooltip. By default, the tooltip will calculate the best alignment.\n /\n alignment?: PopupAlignment;\n /\n The elements that the tooltip should surround.\n /\n children: ReactNode;\n /\n The element where the content of the `Tooltip` should be rendered via React Portal.\n /\n container?: Element;\n /\n The content that should be displayed.\n /\n item: ITooltipItem \| ReactNode;\n /\n The width of an item.\n /\n itemWidth?: CSSProperties['width'];\n /\n whether the tooltip should be shown.\n /\n isDisabled?: boolean;\n /\n The max width of the Tooltip.\n /\n maxItemWidth?: number;\n /\n Whether the tooltip should be hidden after the children is not hovered.\n /\n shouldHideOnChildrenLeave?: boolean;\n /\n Whether the width of the children should be used.\n /\n shouldUseChildrenWidth?: boolean;\n /\n Whether the tooltip children should use the full width.\n /\n shouldUseFullWidth?: boolean;\n /\n The Y offset of the tooltip to the children.\n */\n yOffset?: number;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n alignment,\n item,\n children,\n container,\n isDisabled,\n shouldHideOnChildrenLeave,\n maxItemWidth,\n yOffset,\n itemWidth,\n shouldUseFullWidth = false,\n shouldUseChildrenWidth = !shouldUseFullWidth,\n}) => {\n const tooltipRef = useRef<PopupRef>(null);\n\n const content = useMemo(() => {\n if (isValidElement(item)) {\n return item;\n }\n\n return (\n <TooltipItem\n width={itemWidth}\n maxWidth={maxItemWidth}\n text={(item as ITooltipItem).text}\n headline={(item as ITooltipItem).headline}\n imageUrl={(item as ITooltipItem).imageUrl}\n button={(item as ITooltipItem).button}\n />\n );\n }, [item, itemWidth, maxItemWidth]);\n\n return useMemo(\n () => (\n <StyledTooltip className=\"beta-chayns-tooltip\">\n {isDisabled ? (\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledTooltipChildren>\n ) : (\n <Popup\n alignment={alignment}\n shouldShowOnHover\n shouldHideOnChildrenLeave={shouldHideOnChildrenLeave}\n content={content}\n ref={tooltipRef}\n container={container}\n yOffset={yOffset}\n shouldUseChildrenWidth={shouldUseChildrenWidth}\n shouldUseFullWidth={shouldUseFullWidth}\n shouldScrollWithContent\n >\n <StyledTooltipChildren\n $isOnlyText={isTextOnlyElement(children)}\n $shouldUseChildrenWidth={shouldUseChildrenWidth}\n $shouldUseFullWidth={shouldUseFullWidth}\n >\n {children}\n </StyledTooltipChildren>\n </Popup>\n )}\n </StyledTooltip>\n ),\n [\n isDisabled,\n children,\n shouldUseChildrenWidth,\n shouldUseFullWidth,\n alignment,\n shouldHideOnChildrenLeave,\n content,\n container,\n yOffset,\n ],\n );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AAiDvE,MAAMC,OAAyB,GAAGA,CAAC;EAC/BC,SAAS;EACTC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,yBAAyB;EACzBC,YAAY;EACZC,OAAO;EACPC,SAAS;EACTC,kBAAkB,GAAG,KAAK;EAC1BC,sBAAsB,GAAG,CAACD;AAC9B,CAAC,KAAK;EACF,MAAME,UAAU,GAAGlB,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMmB,OAAO,GAAGpB,OAAO,CAAC,MAAM;IAC1B,iBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAuB,aAAA,CAACjB,WAAW;MACRkB,KAAK,EAAEN,SAAU;MACjBO,QAAQ,EAAET,YAAa;MACvBU,IAAI,EAAGf,IAAI,CAAkBe,IAAK;MAClCC,QAAQ,EAAGhB,IAAI,CAAkBgB,QAAS;MAC1CC,QAAQ,EAAGjB,IAAI,CAAkBiB,QAAS;MAC1CC,MAAM,EAAGlB,IAAI,CAAkBkB;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAAClB,IAAI,EAAEO,SAAS,EAAEF,YAAY,CAAC,CAAC;EAEnC,OAAOd,OAAO,CACV,mBACIF,KAAA,CAAAuB,aAAA,CAAChB,aAAa;IAACuB,SAAS,EAAC;EAAqB,GACzChB,UAAU,gBACPd,KAAA,CAAAuB,aAAA,CAACf,qBAAqB;IAClBuB,WAAW,EAAE3B,iBAAiB,CAACQ,QAAQ,CAAE;IACzCoB,uBAAuB,EAAEZ,sBAAuB;IAChDa,mBAAmB,EAAEd;EAAmB,GAEvCP,QACkB,CAAC,gBAExBZ,KAAA,CAAAuB,aAAA,CAAClB,KAAK;IACFK,SAAS,EAAEA,SAAU;IACrBwB,iBAAiB;IACjBnB,yBAAyB,EAAEA,yBAA0B;IACrDO,OAAO,EAAEA,OAAQ;IACjBa,GAAG,EAAEd,UAAW;IAChBR,SAAS,EAAEA,SAAU;IACrBI,OAAO,EAAEA,OAAQ;IACjBG,sBAAsB,EAAEA,sBAAuB;IAC/CD,kBAAkB,EAAEA,kBAAmB;IACvCiB,uBAAuB;EAAA,gBAEvBpC,KAAA,CAAAuB,aAAA,CAACf,qBAAqB;IAClBuB,WAAW,EAAE3B,iBAAiB,CAACQ,QAAQ,CAAE;IACzCoB,uBAAuB,EAAEZ,sBAAuB;IAChDa,mBAAmB,EAAEd;EAAmB,GAEvCP,QACkB,CACpB,CAEA,CAClB,EACD,CACIE,UAAU,EACVF,QAAQ,EACRQ,sBAAsB,EACtBD,kBAAkB,EAClBT,SAAS,EACTK,yBAAyB,EACzBO,OAAO,EACPT,SAAS,EACTI,OAAO,CAEf,CAAC;AACL,CAAC;AAEDR,OAAO,CAAC4B,WAAW,GAAG,SAAS;AAE/B,eAAe5B,OAAO","ignoreList":[]}

package/lib/esm/components/tooltip/Tooltip.styles.js CHANGED Viewed

@@ -1,21 +1,29 @@
 import styled, { css } from 'styled-components';
 export const StyledTooltip = styled.div``;
 export const StyledTooltipChildren = styled.div`
-    ${_ref => {
-  let {
-    $isOnlyText,
-    theme,
-    $shouldUseChildrenWidth
-  } = _ref;
-  return $isOnlyText && css`
-            ${$shouldUseChildrenWidth && css`
-                width: fit-content;
-            `}
+    display: flex;
+    ${({
+  $shouldUseChildrenWidth
+}) => $shouldUseChildrenWidth && css`
+            width: fit-content;
+        `}
+    ${({
+  $shouldUseFullWidth
+}) => $shouldUseFullWidth && css`
+            width: 100%;
+        `};
+    ${({
+  $isOnlyText,
+  theme
+}) => $isOnlyText && css`
+            line-height: normal;
             border-bottom-width: 1px;
             border-bottom-style: dotted;
             border-bottom-color: ${theme.text};
-        `;
-}}
+        `}
 `;
 //# sourceMappingURL=Tooltip.styles.js.map

package/lib/esm/components/tooltip/Tooltip.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.styles.js","names":["styled","css","StyledTooltip","div","StyledTooltipChildren","~~_ref~~","$~~isOnlyText~~","~~theme~~","~~$shouldUseChildrenWidth~~","text"],"sources":["../../../../src/components/tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTooltip = styled.div``;\n\ntype StyledTooltipChildrenProps = WithTheme<{\n $isOnlyText: boolean;\n $shouldUseChildrenWidth: boolean;\n}>;\nexport const StyledTooltipChildren = styled.div<StyledTooltipChildrenProps>`\n ${({ $~~isOnlyText,~~ ~~theme,~~ $shouldUseChildrenWidth }: ~~StyledTooltipChildrenProps~~) =>\n $~~isOnlyText~~ &&\n css`\n ${$~~shouldUseChildrenWidth~~ &&\n css`\n ~~width~~: ~~fit-content~~;\n `}\n\n border-bottom-width: 1px;\n border-bottom-style: dotted;\n border-bottom-color: ${theme.text};\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,aAAa,GAAGF,MAAM,CAACG,GAAG,EAAE;~~AAMzC~~,OAAO,MAAMC,qBAAqB,GAAGJ,MAAM,CAACG,GAA+B;AAC3E,~~MAAME~~,~~IAAA~~;~~EAAA~~,~~IAAC~~;~~IAAEC~~,~~WAAW~~;~~IAAEC~~,~~KAAK~~;~~IAAEC~~;~~EAAoD~~,CAAC,~~GAAAH~~,~~IAAA~~;~~EAAA~~,~~OAC1EC~~,~~WAAW~~,~~IACXL~~,~~GAAG~~;~~AACX~~,~~cAAcO~~,~~uBAAuB~~,~~IACzBP~~,GAAG;~~AACf~~;AACA~~,aAAa~~;~~AACb;~~AACA;AACA;AACA,~~mCAAmCM~~,KAAK,~~CAACE~~,IAAI;AAC7C,SAAS;~~AAAA;~~AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Tooltip.styles.js","names":["styled","css","StyledTooltip","div","StyledTooltipChildren","$shouldUseChildrenWidth","$shouldUseFullWidth","$isOnlyText","theme","text"],"sources":["../../../../src/components/tooltip/Tooltip.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTooltip = styled.div``;\n\ntype StyledTooltipChildrenProps = WithTheme<{\n $isOnlyText: boolean;\n $shouldUseChildrenWidth: boolean;\n $shouldUseFullWidth: boolean;\n}>;\nexport const StyledTooltipChildren = styled.div<StyledTooltipChildrenProps>`\n display: flex;\n\n ${({ $shouldUseChildrenWidth }) =>\n $shouldUseChildrenWidth &&\n css`\n width: fit-content;\n `}\n\n ${({ $shouldUseFullWidth }) =>\n $shouldUseFullWidth &&\n css`\n width: 100%;\n `};\n\n ${({ $isOnlyText, theme }: StyledTooltipChildrenProps) =>\n $isOnlyText &&\n css`\n line-height: normal;\n\n border-bottom-width: 1px;\n border-bottom-style: dotted;\n border-bottom-color: ${theme.text};\n `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,aAAa,GAAGF,MAAM,CAACG,GAAG,EAAE;AAOzC,OAAO,MAAMC,qBAAqB,GAAGJ,MAAM,CAACG,GAA+B;AAC3E;AACA;AACA,MAAM,CAAC;EAAEE;AAAwB,CAAC,KAC1BA,uBAAuB,IACvBJ,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAoB,CAAC,KACtBA,mBAAmB,IACnBL,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC;AAAkC,CAAC,KACjDD,WAAW,IACXN,GAAG;AACX;AACA;AACA;AACA;AACA,mCAAmCO,KAAK,CAACC,IAAI;AAC7C,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/tooltip/tooltip-item/TooltipItem.js CHANGED Viewed

@@ -1,22 +1,21 @@
 import React, { useMemo } from 'react';
 import Button from '../../button/Button';
 import { StyledTooltipItem, StyledTooltipItemButtonWrapper, StyledTooltipItemHeadline, StyledTooltipItemImage, StyledTooltipItemText } from './TooltipItem.styles';
-const TooltipItem = _ref => {
-  let {
-    headline,
-    text,
-    button,
-    imageUrl,
-    width
-  } = _ref;
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledTooltipItem, {
-    $width: width
-  }, headline && /*#__PURE__*/React.createElement(StyledTooltipItemHeadline, null, headline), imageUrl && /*#__PURE__*/React.createElement(StyledTooltipItemImage, {
-    src: imageUrl
-  }), /*#__PURE__*/React.createElement(StyledTooltipItemText, null, text), button && /*#__PURE__*/React.createElement(StyledTooltipItemButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: button.onClick
-  }, button.text))), [button, headline, imageUrl, text, width]);
-};
+const TooltipItem = ({
+  headline,
+  text,
+  button,
+  imageUrl,
+  width,
+  maxWidth
+}) => useMemo(() => /*#__PURE__*/React.createElement(StyledTooltipItem, {
+  $width: width,
+  $maxWidth: maxWidth
+}, headline && /*#__PURE__*/React.createElement(StyledTooltipItemHeadline, null, headline), imageUrl && /*#__PURE__*/React.createElement(StyledTooltipItemImage, {
+  src: imageUrl
+}), /*#__PURE__*/React.createElement(StyledTooltipItemText, null, text), button && /*#__PURE__*/React.createElement(StyledTooltipItemButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  onClick: button.onClick
+}, button.text))), [button, headline, imageUrl, text, width, maxWidth]);
 TooltipItem.displayName = 'TooltipItem';
 export default TooltipItem;
 //# sourceMappingURL=TooltipItem.js.map

package/lib/esm/components/tooltip/tooltip-item/TooltipItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipItem.js","names":["React","useMemo","Button","StyledTooltipItem","StyledTooltipItemButtonWrapper","StyledTooltipItemHeadline","StyledTooltipItemImage","StyledTooltipItemText","TooltipItem","~~_ref","~~headline","text","button","imageUrl","width","createElement","$width","src","onClick","displayName"],"sources":["../../../../../src/components/tooltip/tooltip-item/TooltipItem.tsx"],"sourcesContent":["import React, { FC, useMemo, type CSSProperties } from 'react';\nimport Button from '../../button/Button';\nimport {\n StyledTooltipItem,\n StyledTooltipItemButtonWrapper,\n StyledTooltipItemHeadline,\n StyledTooltipItemImage,\n StyledTooltipItemText,\n} from './TooltipItem.styles';\n\nexport type TooltipProps = {\n headline?: string;\n text: string;\n imageUrl?: string;\n button?: { text: string; onClick: () => void };\n width?: CSSProperties['width'];\n};\n\nconst TooltipItem: FC<TooltipProps> = ({ headline, text, button, imageUrl, width }) =>\n useMemo(\n () => (\n <StyledTooltipItem $width={width}>\n {headline && <StyledTooltipItemHeadline>{headline}</StyledTooltipItemHeadline>}\n {imageUrl && <StyledTooltipItemImage src={imageUrl} />}\n <StyledTooltipItemText>{text}</StyledTooltipItemText>\n {button && (\n <StyledTooltipItemButtonWrapper>\n <Button onClick={button.onClick}>{button.text}</Button>\n </StyledTooltipItemButtonWrapper>\n )}\n </StyledTooltipItem>\n ),\n [button, headline, imageUrl, text, width],\n );\n\nTooltipItem.displayName = 'TooltipItem';\n\nexport default TooltipItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAA4B,OAAO;AAC9D,OAAOC,MAAM,MAAM,qBAAqB;AACxC,SACIC,iBAAiB,EACjBC,8BAA8B,EAC9BC,yBAAyB,EACzBC,sBAAsB,EACtBC,qBAAqB,QAClB,sBAAsB;~~AAU7B~~,MAAMC,WAA6B,~~GAAGC~~,~~IAAA~~;~~EAAA~~,~~IAAC;IAAEC,~~QAAQ;~~IAAEC~~,IAAI;~~IAAEC~~,MAAM;~~IAAEC~~,QAAQ;~~IAAEC~~;~~EAAM~~,CAAC,~~GAAAL~~,~~IAAA;EAAA,OAC9ER,~~OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACZ,iBAAiB;~~IAACa~~,MAAM,~~EAAEF~~;~~EAAM~~,~~GAC5BJ~~,QAAQ,~~iBAAIV~~,KAAA,CAAAe,aAAA,CAACV,yBAAyB,~~QAAEK~~,QAAoC,CAAC,EAC7EG,QAAQ,~~iBAAIb~~,KAAA,CAAAe,aAAA,CAACT,sBAAsB;~~IAACW~~,GAAG,~~EAAEJ~~;~~EAAS~~,CAAE,CAAC,~~eACtDb~~,KAAA,CAAAe,aAAA,CAACR,qBAAqB,~~QAAEI~~,IAA4B,CAAC,EACpDC,MAAM,~~iBACHZ~~,KAAA,CAAAe,aAAA,CAACX,8BAA8B,qBAC3BJ,KAAA,CAAAe,aAAA,CAACb,MAAM;~~IAACgB~~,OAAO,~~EAAEN~~,MAAM,~~CAACM~~;~~EAAQ~~,~~GAAEN~~,MAAM,CAACD,IAAa,CAC1B,CAErB,CACtB,EACD,CAACC,MAAM,EAAEF,QAAQ,EAAEG,QAAQ,EAAEF,IAAI,EAAEG,KAAK,~~CAC5C~~,CAAC;~~AAAA;~~AAELN,WAAW,~~CAACW~~,WAAW,GAAG,aAAa;AAEvC,~~eAAeX~~,WAAW","ignoreList":[]}
1	+ {"version":3,"file":"TooltipItem.js","names":["React","useMemo","Button","StyledTooltipItem","StyledTooltipItemButtonWrapper","StyledTooltipItemHeadline","StyledTooltipItemImage","StyledTooltipItemText","TooltipItem","headline","text","button","imageUrl","width","maxWidth","createElement","$width","$maxWidth","src","onClick","displayName"],"sources":["../../../../../src/components/tooltip/tooltip-item/TooltipItem.tsx"],"sourcesContent":["import React, { FC, useMemo, type CSSProperties } from 'react';\nimport Button from '../../button/Button';\nimport {\n StyledTooltipItem,\n StyledTooltipItemButtonWrapper,\n StyledTooltipItemHeadline,\n StyledTooltipItemImage,\n StyledTooltipItemText,\n} from './TooltipItem.styles';\n\nexport type TooltipProps = {\n headline?: string;\n text: string;\n imageUrl?: string;\n button?: { text: string; onClick: () => void };\n width?: CSSProperties['width'];\n maxWidth?: number;\n};\n\nconst TooltipItem: FC<TooltipProps> = ({ headline, text, button, imageUrl, width, maxWidth }) =>\n useMemo(\n () => (\n <StyledTooltipItem $width={width} $maxWidth={maxWidth}>\n {headline && <StyledTooltipItemHeadline>{headline}</StyledTooltipItemHeadline>}\n {imageUrl && <StyledTooltipItemImage src={imageUrl} />}\n <StyledTooltipItemText>{text}</StyledTooltipItemText>\n {button && (\n <StyledTooltipItemButtonWrapper>\n <Button onClick={button.onClick}>{button.text}</Button>\n </StyledTooltipItemButtonWrapper>\n )}\n </StyledTooltipItem>\n ),\n [button, headline, imageUrl, text, width, maxWidth],\n );\n\nTooltipItem.displayName = 'TooltipItem';\n\nexport default TooltipItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAA4B,OAAO;AAC9D,OAAOC,MAAM,MAAM,qBAAqB;AACxC,SACIC,iBAAiB,EACjBC,8BAA8B,EAC9BC,yBAAyB,EACzBC,sBAAsB,EACtBC,qBAAqB,QAClB,sBAAsB;AAW7B,MAAMC,WAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,MAAM;EAAEC,QAAQ;EAAEC,KAAK;EAAEC;AAAS,CAAC,KACxFb,OAAO,CACH,mBACID,KAAA,CAAAe,aAAA,CAACZ,iBAAiB;EAACa,MAAM,EAAEH,KAAM;EAACI,SAAS,EAAEH;AAAS,GACjDL,QAAQ,iBAAIT,KAAA,CAAAe,aAAA,CAACV,yBAAyB,QAAEI,QAAoC,CAAC,EAC7EG,QAAQ,iBAAIZ,KAAA,CAAAe,aAAA,CAACT,sBAAsB;EAACY,GAAG,EAAEN;AAAS,CAAE,CAAC,eACtDZ,KAAA,CAAAe,aAAA,CAACR,qBAAqB,QAAEG,IAA4B,CAAC,EACpDC,MAAM,iBACHX,KAAA,CAAAe,aAAA,CAACX,8BAA8B,qBAC3BJ,KAAA,CAAAe,aAAA,CAACb,MAAM;EAACiB,OAAO,EAAER,MAAM,CAACQ;AAAQ,GAAER,MAAM,CAACD,IAAa,CAC1B,CAErB,CACtB,EACD,CAACC,MAAM,EAAEF,QAAQ,EAAEG,QAAQ,EAAEF,IAAI,EAAEG,KAAK,EAAEC,QAAQ,CACtD,CAAC;AAELN,WAAW,CAACY,WAAW,GAAG,aAAa;AAEvC,eAAeZ,WAAW","ignoreList":[]}