@chayns-components/core 5.5.36 → 5.5.37
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.
- package/lib/cjs/components/copyable-content/CopyableContent.js +12 -11
- package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/cjs/components/copyable-content/CopyableContent.test.js +4 -11
- package/lib/cjs/components/copyable-content/CopyableContent.test.js.map +1 -1
- package/lib/cjs/components/file-list/FileList.js +4 -3
- package/lib/cjs/components/file-list/FileList.js.map +1 -1
- package/lib/cjs/components/file-list/file-item/FileItem.js +6 -7
- package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/cjs/components/filter/filter-content/FilterContent.js +8 -7
- package/lib/cjs/components/filter/filter-content/FilterContent.js.map +1 -1
- package/lib/cjs/components/filter-buttons/FilterButtons.js +5 -3
- package/lib/cjs/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/cjs/components/filter-buttons/all-button/AllButton.js +5 -4
- package/lib/cjs/components/filter-buttons/all-button/AllButton.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.js +8 -7
- package/lib/cjs/components/truncation/Truncation.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.test.js +4 -5
- package/lib/cjs/components/truncation/Truncation.test.js.map +1 -1
- package/lib/cjs/constants/textStrings.js +29 -29
- package/lib/cjs/constants/textStrings.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.js +12 -11
- package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.test.js +4 -11
- package/lib/esm/components/copyable-content/CopyableContent.test.js.map +1 -1
- package/lib/esm/components/file-list/FileList.js +4 -3
- package/lib/esm/components/file-list/FileList.js.map +1 -1
- package/lib/esm/components/file-list/file-item/FileItem.js +6 -7
- package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
- package/lib/esm/components/filter/filter-content/FilterContent.js +8 -7
- package/lib/esm/components/filter/filter-content/FilterContent.js.map +1 -1
- package/lib/esm/components/filter-buttons/FilterButtons.js +5 -3
- package/lib/esm/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/esm/components/filter-buttons/all-button/AllButton.js +5 -4
- package/lib/esm/components/filter-buttons/all-button/AllButton.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.js +8 -7
- package/lib/esm/components/truncation/Truncation.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.test.js +4 -5
- package/lib/esm/components/truncation/Truncation.test.js.map +1 -1
- package/lib/esm/constants/textStrings.js +29 -29
- package/lib/esm/constants/textStrings.js.map +1 -1
- package/lib/types/constants/textStrings.d.ts +29 -29
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","useRef","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemKeyboardWrapper","StyledFileItemIcon","ttsToITextString","useTextstringValue","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","canDownload","canRemove","actionIconRef","shouldShowKeyboardHighlighting","isEnabled","shape","handleRemove","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","downloadText","textstring","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","handleClick","handleKeyDown","fileIcon","ref","onKeyDown","role","tabIndex","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useMemo, useRef } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport {\n StyledFileItem,\n StyledFileItemActions,\n StyledFileItemKeyboardWrapper,\n StyledFileItemRemoveButton,\n StyledFileItemIcon,\n} from './FileItem.styles';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\n\nexport type FileItemProps = IFileItem & {\n onRemove?: (name: string) => void;\n shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n mimeType,\n onRemove,\n size,\n name,\n id,\n source,\n shouldAllowDownload,\n}) => {\n const canDownload = shouldAllowDownload && !!source;\n const canRemove = typeof onRemove === 'function';\n const actionIconRef = useRef<HTMLDivElement>(null);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);\n useFocusRingPortal(actionIconRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: 'circle',\n });\n\n const handleRemove = useCallback(() => {\n if (canRemove) {\n onRemove(id);\n }\n }, [id, onRemove]);\n\n const handleItemKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.key === 'Delete') {\n event.preventDefault();\n handleRemove();\n }\n },\n [handleRemove],\n );\n\n const handleRemoveKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n (event) => {\n if (canRemove && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n event.stopPropagation();\n handleRemove();\n }\n },\n [handleRemove],\n );\n\n const humanFileSize = useMemo(() => {\n if (typeof size === 'number') {\n return getHumanSize(size);\n }\n\n return undefined;\n }, [size]);\n\n const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n const handleDownload = useCallback(() => {\n if (!source) return;\n\n if (source instanceof File) {\n const url = URL.createObjectURL(source);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n } else {\n // Try fetching as blob to force download. If CORS blocks it,\n // fall back to opening the URL directly.\n fetch(source)\n .then((res) => {\n if (!res.ok) throw new Error('fetch failed');\n return res.blob();\n })\n .then((blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n })\n .catch(() => {\n // CORS or network error: fall back to direct link\n const a = document.createElement('a');\n a.href = source;\n a.download = name;\n a.rel = 'noopener noreferrer';\n a.target = '_blank';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n });\n }\n }, [name, source]);\n\n const downloadText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.fileItem.download),\n });\n const removeText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.fileItem.remove),\n });\n\n const rightElement = useMemo(() => {\n if (!canDownload && !canRemove) return undefined;\n // Both actions available → show as ContextMenu\n if (canDownload && canRemove) {\n const items: ContextMenuItem[] = [\n {\n icons: ['fa fa-download'],\n key: 'download',\n onClick: handleDownload,\n text: downloadText,\n },\n {\n icons: ['fa fa-trash'],\n key: 'remove',\n onClick: () => onRemove(id),\n text: removeText,\n },\n ];\n\n return <ContextMenu items={items} />;\n }\n\n const handleClick = () => {\n if (canRemove) {\n onRemove(id);\n return;\n }\n\n handleDownload();\n };\n\n const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;\n\n const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';\n\n return (\n <StyledFileItemIcon\n ref={actionIconRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n <Icon icons={[fileIcon]} />\n </StyledFileItemIcon>\n );\n }, [\n canDownload,\n canRemove,\n downloadText,\n handleDownload,\n handleRemoveKeyDown,\n id,\n onRemove,\n removeText,\n ]);\n\n return useMemo(\n () => (\n <StyledFileItem>\n <StyledFileItemKeyboardWrapper onKeyDown={handleItemKeyDown} tabIndex={-1}>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={rightElement}\n shouldEnableKeyboardHighlighting={shouldShowKeyboardHighlighting}\n />\n </StyledFileItemKeyboardWrapper>\n </StyledFileItem>\n ),\n [\n handleItemKeyDown,\n humanFileSize,\n icon,\n name,\n rightElement,\n shouldShowKeyboardHighlighting,\n ],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FileItem.js","names":["React","useCallback","useMemo","useRef","getHumanSize","getIconByMimeType","Icon","ContextMenu","ListItem","StyledFileItem","StyledFileItemKeyboardWrapper","StyledFileItemIcon","useTranslation","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","canDownload","canRemove","actionIconRef","shouldShowKeyboardHighlighting","isEnabled","shape","handleRemove","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","undefined","icon","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","t","downloadText","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","handleClick","handleKeyDown","fileIcon","ref","onKeyDown","role","tabIndex","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName"],"sources":["../../../../../src/components/file-list/file-item/FileItem.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, useCallback, useMemo, useRef } from 'react';\nimport { getHumanSize, getIconByMimeType } from '../../../utils/file';\nimport Icon from '../../icon/Icon';\nimport ContextMenu from '../../context-menu/ContextMenu';\nimport type { ContextMenuItem } from '../../context-menu/ContextMenu.types';\nimport ListItem from '../../list/list-item/ListItem';\nimport type { IFileItem } from '../FileList';\nimport {\n StyledFileItem,\n StyledFileItemActions,\n StyledFileItemKeyboardWrapper,\n StyledFileItemRemoveButton,\n StyledFileItemIcon,\n} from './FileItem.styles';\nimport { useTranslation } from '@chayns/textstrings';\nimport textStrings from '../../../constants/textStrings';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\n\nexport type FileItemProps = IFileItem & {\n onRemove?: (name: string) => void;\n shouldAllowDownload?: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n mimeType,\n onRemove,\n size,\n name,\n id,\n source,\n shouldAllowDownload,\n}) => {\n const canDownload = shouldAllowDownload && !!source;\n const canRemove = typeof onRemove === 'function';\n const actionIconRef = useRef<HTMLDivElement>(null);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);\n useFocusRingPortal(actionIconRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: 'circle',\n });\n\n const handleRemove = useCallback(() => {\n if (canRemove) {\n onRemove(id);\n }\n }, [id, onRemove]);\n\n const handleItemKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.key === 'Delete') {\n event.preventDefault();\n handleRemove();\n }\n },\n [handleRemove],\n );\n\n const handleRemoveKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n (event) => {\n if (canRemove && (event.key === 'Enter' || event.key === ' ')) {\n event.preventDefault();\n event.stopPropagation();\n handleRemove();\n }\n },\n [handleRemove],\n );\n\n const humanFileSize = useMemo(() => {\n if (typeof size === 'number') {\n return getHumanSize(size);\n }\n\n return undefined;\n }, [size]);\n\n const icon = useMemo(() => getIconByMimeType(mimeType), [mimeType]);\n\n const handleDownload = useCallback(() => {\n if (!source) return;\n\n if (source instanceof File) {\n const url = URL.createObjectURL(source);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n } else {\n // Try fetching as blob to force download. If CORS blocks it,\n // fall back to opening the URL directly.\n fetch(source)\n .then((res) => {\n if (!res.ok) throw new Error('fetch failed');\n return res.blob();\n })\n .then((blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = name;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n })\n .catch(() => {\n // CORS or network error: fall back to direct link\n const a = document.createElement('a');\n a.href = source;\n a.download = name;\n a.rel = 'noopener noreferrer';\n a.target = '_blank';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n });\n }\n }, [name, source]);\n\n const { t } = useTranslation();\n const downloadText = t(textStrings.components.fileItem.download);\n const removeText = t(textStrings.components.fileItem.remove);\n\n const rightElement = useMemo(() => {\n if (!canDownload && !canRemove) return undefined;\n // Both actions available → show as ContextMenu\n if (canDownload && canRemove) {\n const items: ContextMenuItem[] = [\n {\n icons: ['fa fa-download'],\n key: 'download',\n onClick: handleDownload,\n text: downloadText,\n },\n {\n icons: ['fa fa-trash'],\n key: 'remove',\n onClick: () => onRemove(id),\n text: removeText,\n },\n ];\n\n return <ContextMenu items={items} />;\n }\n\n const handleClick = () => {\n if (canRemove) {\n onRemove(id);\n return;\n }\n\n handleDownload();\n };\n\n const handleKeyDown = canRemove ? handleRemoveKeyDown : undefined;\n\n const fileIcon = canRemove ? 'ts-wrong' : 'fa fa-download';\n\n return (\n <StyledFileItemIcon\n ref={actionIconRef}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n <Icon icons={[fileIcon]} />\n </StyledFileItemIcon>\n );\n }, [\n canDownload,\n canRemove,\n downloadText,\n handleDownload,\n handleRemoveKeyDown,\n id,\n onRemove,\n removeText,\n ]);\n\n return useMemo(\n () => (\n <StyledFileItem>\n <StyledFileItemKeyboardWrapper onKeyDown={handleItemKeyDown} tabIndex={-1}>\n <ListItem\n title={name}\n subtitle={humanFileSize}\n icons={[icon]}\n rightElements={rightElement}\n shouldEnableKeyboardHighlighting={shouldShowKeyboardHighlighting}\n />\n </StyledFileItemKeyboardWrapper>\n </StyledFileItem>\n ),\n [\n handleItemKeyDown,\n humanFileSize,\n icon,\n name,\n rightElement,\n shouldShowKeyboardHighlighting,\n ],\n );\n};\n\nFileItem.displayName = 'FileList';\n\nexport default FileItem;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,7 +7,7 @@ import Icon from '../../icon/Icon';
|
|
|
7
7
|
import FilterButtons from '../../filter-buttons/FilterButtons';
|
|
8
8
|
import ComboBox from '../../combobox/ComboBox';
|
|
9
9
|
import Checkbox from '../../checkbox/Checkbox';
|
|
10
|
-
import {
|
|
10
|
+
import { TextStringProviderSSR, Translation } from '@chayns/textstrings';
|
|
11
11
|
import textStrings from '../../../constants/textStrings';
|
|
12
12
|
import { getSortComboBoxLists } from './FilterContent.utils';
|
|
13
13
|
const FilterContent = ({
|
|
@@ -41,13 +41,14 @@ const FilterContent = ({
|
|
|
41
41
|
searchRef.current?.focus();
|
|
42
42
|
}
|
|
43
43
|
}, [shouldAutoFocus]);
|
|
44
|
-
return useMemo(() => /*#__PURE__*/React.createElement(
|
|
45
|
-
|
|
44
|
+
return useMemo(() => /*#__PURE__*/React.createElement(TextStringProviderSSR, {
|
|
45
|
+
libraries: "chayns-components-v5-core",
|
|
46
|
+
id: "filter-content"
|
|
46
47
|
}, /*#__PURE__*/React.createElement(StyledFilterContent, null, searchConfig && /*#__PURE__*/React.createElement(Input, {
|
|
47
48
|
ref: searchRef,
|
|
48
49
|
onChange: ev => searchConfig.onSearchChange(ev.target.value),
|
|
49
|
-
placeholder: /*#__PURE__*/React.createElement(
|
|
50
|
-
|
|
50
|
+
placeholder: /*#__PURE__*/React.createElement(Translation, {
|
|
51
|
+
textString: ts.input.placeholder
|
|
51
52
|
}),
|
|
52
53
|
value: searchConfig.searchValue,
|
|
53
54
|
shouldShowClearIcon: searchConfig.searchValue.length > 0,
|
|
@@ -56,8 +57,8 @@ const FilterContent = ({
|
|
|
56
57
|
})
|
|
57
58
|
}), filterButtonConfig && /*#__PURE__*/React.createElement(FilterButtons, _extends({}, filterButtonConfig, {
|
|
58
59
|
shouldEnableKeyboardHighlighting: filterButtonConfig.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
|
|
59
|
-
})), sortConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, /*#__PURE__*/React.createElement(
|
|
60
|
-
|
|
60
|
+
})), sortConfig && /*#__PURE__*/React.createElement(StyledFilterContentLabeledRow, null, /*#__PURE__*/React.createElement(StyledFilterContentLabel, null, /*#__PURE__*/React.createElement(Translation, {
|
|
61
|
+
textString: ts.sort
|
|
61
62
|
})), /*#__PURE__*/React.createElement(StyledFilterContentControlWrapper, null, /*#__PURE__*/React.createElement(ComboBox, {
|
|
62
63
|
lists: getSortComboBoxLists(sortConfig),
|
|
63
64
|
placeholder: "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","Textstring","TextstringProvider","ttsToITextString","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","shouldEnableKeyboardHighlighting","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraryName","ref","onChange","ev","onSearchChange","target","placeholder","textstring","input","searchValue","shouldShowClearIcon","length","leftElement","icons","_extends","sort","lists","selectedItem","onSelect","label","displayName"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n StyledFilterContentControlWrapper,\n StyledFilterContentLabel,\n StyledFilterContentLabeledRow,\n StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n shouldAutoFocus,\n shouldEnableKeyboardHighlighting,\n}) => {\n const searchRef = useRef<InputRef>(null);\n\n const ts = textStrings.components.filter.filterContent;\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem | undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder={\n <Textstring textstring={ttsToITextString(ts.input.placeholder)} />\n }\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {filterButtonConfig && (\n <FilterButtons\n {...filterButtonConfig}\n shouldEnableKeyboardHighlighting={\n filterButtonConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n )}\n {sortConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n <Textstring textstring={ttsToITextString(ts.sort)} />\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n <ComboBox\n lists={getSortComboBoxLists(sortConfig)}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {comboboxConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n {comboboxConfig.label}\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <ComboBox\n {...comboboxConfig}\n shouldEnableKeyboardHighlighting={\n comboboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox\n {...checkboxConfig}\n shouldEnableKeyboardHighlighting={\n checkboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n )}\n </StyledFilterContent>\n </TextstringProvider>\n ),\n [\n checkboxConfig,\n comboboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n shouldEnableKeyboardHighlighting,\n sortConfig,\n ts.input.placeholder,\n ts.sort,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FilterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","StyledFilterContentControlWrapper","StyledFilterContentLabel","StyledFilterContentLabeledRow","StyledFilterContent","Input","Icon","FilterButtons","ComboBox","Checkbox","TextStringProviderSSR","Translation","textStrings","getSortComboBoxLists","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","shouldEnableKeyboardHighlighting","searchRef","ts","components","filter","filterContent","handleSelectSortItem","item","text","value","onSortChange","id","current","focus","createElement","libraries","ref","onChange","ev","onSearchChange","target","placeholder","textString","input","searchValue","shouldShowClearIcon","length","leftElement","icons","_extends","sort","lists","selectedItem","onSelect","label","displayName"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';\nimport {\n StyledFilterContentControlWrapper,\n StyledFilterContentLabel,\n StyledFilterContentLabeledRow,\n StyledFilterContent,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { TextStringProviderSSR, Translation } from '@chayns/textstrings';\nimport textStrings from '../../../constants/textStrings';\nimport type { IComboBoxItem } from '../../combobox/ComboBox.types';\nimport type { FilterContentProps } from './FilterContent.types';\nimport { getSortComboBoxLists } from './FilterContent.utils';\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n shouldAutoFocus,\n shouldEnableKeyboardHighlighting,\n}) => {\n const searchRef = useRef<InputRef>(null);\n\n const ts = textStrings.components.filter.filterContent;\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem | undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"filter-content\">\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder={<Translation textString={ts.input.placeholder} />}\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {filterButtonConfig && (\n <FilterButtons\n {...filterButtonConfig}\n shouldEnableKeyboardHighlighting={\n filterButtonConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n )}\n {sortConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n <Translation textString={ts.sort} />\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n <ComboBox\n lists={getSortComboBoxLists(sortConfig)}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {comboboxConfig && (\n <StyledFilterContentLabeledRow>\n <StyledFilterContentLabel>\n {comboboxConfig.label}\n </StyledFilterContentLabel>\n <StyledFilterContentControlWrapper>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <ComboBox\n {...comboboxConfig}\n shouldEnableKeyboardHighlighting={\n comboboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledFilterContentControlWrapper>\n </StyledFilterContentLabeledRow>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox\n {...checkboxConfig}\n shouldEnableKeyboardHighlighting={\n checkboxConfig.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n )}\n </StyledFilterContent>\n </TextStringProviderSSR>\n ),\n [\n checkboxConfig,\n comboboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n shouldEnableKeyboardHighlighting,\n sortConfig,\n ts.input.placeholder,\n ts.sort,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@ import { FilterButtonItemShape, FilterButtonSize } from '../../types/filterButto
|
|
|
3
3
|
import FilterButton from './filter-button/FilterButton';
|
|
4
4
|
import { StyledFilterButton } from './FilterButtons.styles';
|
|
5
5
|
import { AllButton } from './all-button/AllButton';
|
|
6
|
-
import {
|
|
6
|
+
import { TextStringProviderSSR } from '@chayns/textstrings';
|
|
7
7
|
const FilterButtons = ({
|
|
8
8
|
allCount,
|
|
9
9
|
selectedItemIds,
|
|
@@ -99,8 +99,10 @@ const FilterButtons = ({
|
|
|
99
99
|
if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {
|
|
100
100
|
allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);
|
|
101
101
|
}
|
|
102
|
-
const array = [/*#__PURE__*/React.createElement(
|
|
103
|
-
|
|
102
|
+
const array = [/*#__PURE__*/React.createElement(TextStringProviderSSR, {
|
|
103
|
+
key: "all",
|
|
104
|
+
libraries: "chayns-components-v5-core",
|
|
105
|
+
id: "filter-buttons-all"
|
|
104
106
|
}, /*#__PURE__*/React.createElement(AllButton, {
|
|
105
107
|
count: allButtonCount,
|
|
106
108
|
isSelected: selectedIds.includes('all') || Array.isArray(selectedIds) && selectedIds.length === 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","AllButton","TextstringProvider","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","shouldEnableKeyboardHighlighting","selectedIds","setSelectedIds","focusedId","setFocusedId","buttonRefs","keyboardNavigationItems","id","isDisabled","map","Boolean","handleSelect","newIds","includes","filter","filteredId","length","selectedId","currentFocusedItem","find","nextFocusable","handleArrowNavigate","currentId","direction","startIndex","findIndex","attempts","nextIndex","nextItem","current","focus","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","libraryName","isSelected","Array","isArray","onArrowNavigate","onFocus","tabIndex","buttonRef","element","all","forEach","icons","text","color","push","key","shape","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\nimport { AllButton } from './all-button/AllButton';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport type FilterButtonsProps = {\n /**\n * The number that should be displayed as count in the \"all\" button.\n */\n allCount?: number;\n /**\n * The items that should be displayed.\n */\n items: IFilterButtonItem[];\n /**\n * A function that should be executed when an item is selected.\n */\n onSelect?: (keys: string[]) => void;\n /**\n * The keys of items that should be selected.\n */\n selectedItemIds?: string[];\n /**\n * If true, the count of all items will be shown in the \"all\" button.\n */\n shouldCalcCountForAll?: boolean;\n /**\n * The size auf the filter buttons. Use the FilterButtonSize enum.\n */\n size?: FilterButtonSize;\n /**\n * Enables keyboard-only focus highlighting for filter buttons.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n const [focusedId, setFocusedId] = useState<string>('all');\n const buttonRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n const keyboardNavigationItems = useMemo(\n () => [\n { id: 'all', isDisabled: false },\n ...items.map(({ id, isDisabled }) => ({ id, isDisabled: Boolean(isDisabled) })),\n ],\n [items],\n );\n\n /**\n * This function set the selectedItemKey\n */\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /**\n * Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n useEffect(() => {\n const currentFocusedItem = keyboardNavigationItems.find(({ id }) => id === focusedId);\n\n if (currentFocusedItem && !currentFocusedItem.isDisabled) {\n return;\n }\n\n const nextFocusable = keyboardNavigationItems.find(({ isDisabled }) => !isDisabled);\n\n if (nextFocusable) {\n setFocusedId(nextFocusable.id);\n }\n }, [focusedId, keyboardNavigationItems]);\n\n const handleArrowNavigate = useCallback(\n (currentId: string, direction: -1 | 1) => {\n if (!shouldEnableKeyboardHighlighting || keyboardNavigationItems.length < 2) {\n return;\n }\n\n const startIndex = keyboardNavigationItems.findIndex(({ id }) => id === currentId);\n\n if (startIndex < 0) {\n return;\n }\n\n let attempts = 0;\n let nextIndex = startIndex;\n\n while (attempts < keyboardNavigationItems.length) {\n nextIndex =\n (nextIndex + direction + keyboardNavigationItems.length) %\n keyboardNavigationItems.length;\n\n const nextItem = keyboardNavigationItems[nextIndex];\n\n if (nextItem && !nextItem.isDisabled) {\n setFocusedId(nextItem.id);\n buttonRefs.current[nextItem.id]?.focus();\n return;\n }\n\n attempts += 1;\n }\n },\n [keyboardNavigationItems, shouldEnableKeyboardHighlighting],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n }\n\n const array: ReactElement[] = [\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <AllButton\n count={allButtonCount}\n isSelected={\n selectedIds.includes('all') ||\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n size={size}\n onSelect={handleSelect}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n onArrowNavigate={handleArrowNavigate}\n onFocus={setFocusedId}\n tabIndex={0}\n buttonRef={(element) => {\n buttonRefs.current.all = element;\n }}\n />\n </TextstringProvider>,\n ];\n\n items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n isDisabled={isDisabled}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n onArrowNavigate={handleArrowNavigate}\n onFocus={setFocusedId}\n tabIndex={isDisabled ? -1 : 0}\n buttonRef={(element) => {\n buttonRefs.current[id] = element;\n }}\n />,\n );\n });\n\n return array;\n }, [\n allCount,\n handleSelect,\n items,\n selectedIds,\n shouldCalcCountForAll,\n shouldEnableKeyboardHighlighting,\n handleArrowNavigate,\n size,\n ]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FilterButtons.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","FilterButtonItemShape","FilterButtonSize","FilterButton","StyledFilterButton","AllButton","TextStringProviderSSR","FilterButtons","allCount","selectedItemIds","onSelect","items","shouldCalcCountForAll","size","Normal","shouldEnableKeyboardHighlighting","selectedIds","setSelectedIds","focusedId","setFocusedId","buttonRefs","keyboardNavigationItems","id","isDisabled","map","Boolean","handleSelect","newIds","includes","filter","filteredId","length","selectedId","currentFocusedItem","find","nextFocusable","handleArrowNavigate","currentId","direction","startIndex","findIndex","attempts","nextIndex","nextItem","current","focus","reactItems","allButtonCount","reduce","acc","item","count","array","createElement","key","libraries","isSelected","Array","isArray","onArrowNavigate","onFocus","tabIndex","buttonRef","element","all","forEach","icons","text","color","push","shape","Round","displayName"],"sources":["../../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\nimport { AllButton } from './all-button/AllButton';\nimport { TextStringProviderSSR } from '@chayns/textstrings';\n\nexport type FilterButtonsProps = {\n /**\n * The number that should be displayed as count in the \"all\" button.\n */\n allCount?: number;\n /**\n * The items that should be displayed.\n */\n items: IFilterButtonItem[];\n /**\n * A function that should be executed when an item is selected.\n */\n onSelect?: (keys: string[]) => void;\n /**\n * The keys of items that should be selected.\n */\n selectedItemIds?: string[];\n /**\n * If true, the count of all items will be shown in the \"all\" button.\n */\n shouldCalcCountForAll?: boolean;\n /**\n * The size auf the filter buttons. Use the FilterButtonSize enum.\n */\n size?: FilterButtonSize;\n /**\n * Enables keyboard-only focus highlighting for filter buttons.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n allCount,\n selectedItemIds,\n onSelect,\n items,\n shouldCalcCountForAll = false,\n size = FilterButtonSize.Normal,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n const [focusedId, setFocusedId] = useState<string>('all');\n const buttonRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n const keyboardNavigationItems = useMemo(\n () => [\n { id: 'all', isDisabled: false },\n ...items.map(({ id, isDisabled }) => ({ id, isDisabled: Boolean(isDisabled) })),\n ],\n [items],\n );\n\n /**\n * This function set the selectedItemKey\n */\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /**\n * Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n useEffect(() => {\n const currentFocusedItem = keyboardNavigationItems.find(({ id }) => id === focusedId);\n\n if (currentFocusedItem && !currentFocusedItem.isDisabled) {\n return;\n }\n\n const nextFocusable = keyboardNavigationItems.find(({ isDisabled }) => !isDisabled);\n\n if (nextFocusable) {\n setFocusedId(nextFocusable.id);\n }\n }, [focusedId, keyboardNavigationItems]);\n\n const handleArrowNavigate = useCallback(\n (currentId: string, direction: -1 | 1) => {\n if (!shouldEnableKeyboardHighlighting || keyboardNavigationItems.length < 2) {\n return;\n }\n\n const startIndex = keyboardNavigationItems.findIndex(({ id }) => id === currentId);\n\n if (startIndex < 0) {\n return;\n }\n\n let attempts = 0;\n let nextIndex = startIndex;\n\n while (attempts < keyboardNavigationItems.length) {\n nextIndex =\n (nextIndex + direction + keyboardNavigationItems.length) %\n keyboardNavigationItems.length;\n\n const nextItem = keyboardNavigationItems[nextIndex];\n\n if (nextItem && !nextItem.isDisabled) {\n setFocusedId(nextItem.id);\n buttonRefs.current[nextItem.id]?.focus();\n return;\n }\n\n attempts += 1;\n }\n },\n [keyboardNavigationItems, shouldEnableKeyboardHighlighting],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n let allButtonCount = allCount;\n\n if (typeof allButtonCount !== 'number' && shouldCalcCountForAll) {\n allButtonCount = items.reduce((acc, item) => acc + (item.count || 0), 0);\n }\n\n const array: ReactElement[] = [\n <TextStringProviderSSR\n key=\"all\"\n libraries=\"chayns-components-v5-core\"\n id=\"filter-buttons-all\"\n >\n <AllButton\n count={allButtonCount}\n isSelected={\n selectedIds.includes('all') ||\n (Array.isArray(selectedIds) && selectedIds.length === 0)\n }\n size={size}\n onSelect={handleSelect}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n onArrowNavigate={handleArrowNavigate}\n onFocus={setFocusedId}\n tabIndex={0}\n buttonRef={(element) => {\n buttonRefs.current.all = element;\n }}\n />\n </TextStringProviderSSR>,\n ];\n\n items.forEach(({ icons, text, color, count, id, isDisabled }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n count={count}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n isDisabled={isDisabled}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n onArrowNavigate={handleArrowNavigate}\n onFocus={setFocusedId}\n tabIndex={isDisabled ? -1 : 0}\n buttonRef={(element) => {\n buttonRefs.current[id] = element;\n }}\n />,\n );\n });\n\n return array;\n }, [\n allCount,\n handleSelect,\n items,\n selectedIds,\n shouldCalcCountForAll,\n shouldEnableKeyboardHighlighting,\n handleArrowNavigate,\n size,\n ]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,12 +2,13 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import FilterButton from '../filter-button/FilterButton';
|
|
4
4
|
import { FilterButtonItemShape } from '../../../types/filterButtons';
|
|
5
|
-
import {
|
|
5
|
+
import { useTranslation } from '@chayns/textstrings';
|
|
6
6
|
import textStrings from '../../../constants/textStrings';
|
|
7
7
|
export const AllButton = props => {
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
});
|
|
8
|
+
const {
|
|
9
|
+
t
|
|
10
|
+
} = useTranslation();
|
|
11
|
+
const allText = t(textStrings.components.filterButtons.all);
|
|
11
12
|
return /*#__PURE__*/React.createElement(FilterButton, _extends({
|
|
12
13
|
shape: FilterButtonItemShape.Rectangular,
|
|
13
14
|
text: allText,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AllButton.js","names":["React","FilterButton","FilterButtonItemShape","
|
|
1
|
+
{"version":3,"file":"AllButton.js","names":["React","FilterButton","FilterButtonItemShape","useTranslation","textStrings","AllButton","props","t","allText","components","filterButtons","all","createElement","_extends","shape","Rectangular","text","id","key"],"sources":["../../../../../src/components/filter-buttons/all-button/AllButton.tsx"],"sourcesContent":["import React from 'react';\nimport FilterButton, { FilterButtonProps } from '../filter-button/FilterButton';\nimport { FilterButtonItemShape } from '../../../types/filterButtons';\nimport { useTranslation } from '@chayns/textstrings';\nimport textStrings from '../../../constants/textStrings';\n\nexport const AllButton = (props: Omit<FilterButtonProps, 'shape' | 'id' | 'text'>) => {\n const { t } = useTranslation();\n const allText = t(textStrings.components.filterButtons.all);\n return (\n <FilterButton\n shape={FilterButtonItemShape.Rectangular}\n text={allText}\n id=\"all\"\n key=\"all\"\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...props}\n />\n );\n};\n"],"mappings":";AAAC,OAAOA,KAAK,MAAM,OAAO;AAC1B,OAAOC,YAAY,MAA6B,+BAA+B;AAC/E,SAASC,qBAAqB,QAAQ,8BAA8B;AACpE,SAASC,cAAc,QAAQ,qBAAqB;AACpD,OAAOC,WAAW,MAAM,gCAAgC;AAExD,OAAO,MAAMC,SAAS,GAAIC,KAAuD,IAAK;EAClF,MAAM;IAAEC;EAAE,CAAC,GAAGJ,cAAc,CAAC,CAAC;EAC9B,MAAMK,OAAO,GAAGD,CAAC,CAACH,WAAW,CAACK,UAAU,CAACC,aAAa,CAACC,GAAG,CAAC;EAC3D,oBACIX,KAAA,CAAAY,aAAA,CAACX,YAAY,EAAAY,QAAA;IACTC,KAAK,EAAEZ,qBAAqB,CAACa,WAAY;IACzCC,IAAI,EAAER,OAAQ;IACdS,EAAE,EAAC,KAAK;IACRC,GAAG,EAAC;IACJ;EAAA,GACIZ,KAAK,CACZ,CAAC;AAEV,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TextStringProviderSSR, Translation } from '@chayns/textstrings';
|
|
2
2
|
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
3
3
|
import textStrings from '../../constants/textStrings';
|
|
4
4
|
import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
|
|
@@ -79,11 +79,11 @@ const Truncation = ({
|
|
|
79
79
|
event.currentTarget.click();
|
|
80
80
|
}
|
|
81
81
|
}, []);
|
|
82
|
-
const internalMoreLabel = moreLabel ?? /*#__PURE__*/React.createElement(
|
|
83
|
-
|
|
82
|
+
const internalMoreLabel = moreLabel ?? /*#__PURE__*/React.createElement(Translation, {
|
|
83
|
+
textString: textStrings.components.truncation.more
|
|
84
84
|
});
|
|
85
|
-
const internalLessLabel = lessLabel ?? /*#__PURE__*/React.createElement(
|
|
86
|
-
|
|
85
|
+
const internalLessLabel = lessLabel ?? /*#__PURE__*/React.createElement(Translation, {
|
|
86
|
+
textString: textStrings.components.truncation.less
|
|
87
87
|
});
|
|
88
88
|
const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);
|
|
89
89
|
const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;
|
|
@@ -102,8 +102,9 @@ const Truncation = ({
|
|
|
102
102
|
ref: contentRef
|
|
103
103
|
}, children)), hasOverflow && /*#__PURE__*/React.createElement(StyledTruncationClampWrapper, {
|
|
104
104
|
$position: clampPosition
|
|
105
|
-
}, /*#__PURE__*/React.createElement(
|
|
106
|
-
|
|
105
|
+
}, /*#__PURE__*/React.createElement(TextStringProviderSSR, {
|
|
106
|
+
libraries: "chayns-components-v5-core",
|
|
107
|
+
id: "truncation"
|
|
107
108
|
}, /*#__PURE__*/React.createElement(StyledTruncationClampFocusWrapper, null, /*#__PURE__*/React.createElement(StyledTruncationClamp, {
|
|
108
109
|
ref: clampRef,
|
|
109
110
|
onClick: handleClampClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Truncation.js","names":["Textstring","TextstringProvider","ttsToITextString","React","useCallback","useEffect","useLayoutEffect","useRef","useState","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","ClampPosition","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationContent","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","contentRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","Boolean","contentHeight","setContentHeight","hasOverflow","isEnabled","current","frame","updateContentHeight","entries","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","textstring","components","truncation","more","internalLessLabel","less","collapsedContentHeight","min","targetHeight","className","animate","initial","transition","type","duration","ref","$position","libraryName","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /**\n * The elements that should be expanding or collapsing.\n */\n children: ReactElement;\n /**\n * The position of the clamp.\n */\n clampPosition?: ClampPosition;\n /**\n * The height of the children element in its collapsed state.\n */\n collapsedHeight?: number;\n /**\n * If set to true, the content is exposed.\n */\n isOpen?: boolean;\n /**\n * A text that should be displayed if the content is expanded.\n */\n lessLabel?: string;\n /**\n * A text that should be displayed if the content is collapsed.\n */\n moreLabel?: string;\n /**\n * Function to be executed when the component is expanding or collapsing.\n */\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const clampRef = useRef<HTMLAnchorElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n const hasOverflow = contentHeight > collapsedHeight;\n\n useFocusRingPortal(clampRef, {\n isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number | undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n setContentHeight(\n Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Textstring textstring={ttsToITextString(textStrings.components.truncation.more)} />\n );\n const internalLessLabel = lessLabel ?? (\n <Textstring textstring={ttsToITextString(textStrings.components.truncation.less)} />\n );\n const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);\n const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClampFocusWrapper>\n <StyledTruncationClamp\n ref={clampRef}\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Truncation.js","names":["TextStringProviderSSR","Translation","React","useCallback","useEffect","useLayoutEffect","useRef","useState","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","ClampPosition","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationContent","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","contentRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","Boolean","contentHeight","setContentHeight","hasOverflow","isEnabled","current","frame","updateContentHeight","entries","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","textString","components","truncation","more","internalLessLabel","less","collapsedContentHeight","min","targetHeight","className","animate","initial","transition","type","duration","ref","$position","libraries","id","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { TextStringProviderSSR, Translation } from '@chayns/textstrings';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /**\n * The elements that should be expanding or collapsing.\n */\n children: ReactElement;\n /**\n * The position of the clamp.\n */\n clampPosition?: ClampPosition;\n /**\n * The height of the children element in its collapsed state.\n */\n collapsedHeight?: number;\n /**\n * If set to true, the content is exposed.\n */\n isOpen?: boolean;\n /**\n * A text that should be displayed if the content is expanded.\n */\n lessLabel?: string;\n /**\n * A text that should be displayed if the content is collapsed.\n */\n moreLabel?: string;\n /**\n * Function to be executed when the component is expanding or collapsing.\n */\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const clampRef = useRef<HTMLAnchorElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n const hasOverflow = contentHeight > collapsedHeight;\n\n useFocusRingPortal(clampRef, {\n isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number | undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n setContentHeight(\n Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Translation textString={textStrings.components.truncation.more} />\n );\n const internalLessLabel = lessLabel ?? (\n <Translation textString={textStrings.components.truncation.less} />\n );\n const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);\n const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"truncation\">\n <StyledTruncationClampFocusWrapper>\n <StyledTruncationClamp\n ref={clampRef}\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextStringProviderSSR>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,12 +2,11 @@ import { render, screen, waitFor } from '@testing-library/react';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
4
4
|
import Truncation from './Truncation';
|
|
5
|
-
vi.mock('@chayns
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
vi.mock('@chayns/textstrings', () => ({
|
|
6
|
+
Translation: () => 'Mehr anzeigen',
|
|
7
|
+
TextStringProvider: ({
|
|
8
8
|
children
|
|
9
|
-
}) => children
|
|
10
|
-
ttsToITextString: vi.fn()
|
|
9
|
+
}) => children
|
|
11
10
|
}));
|
|
12
11
|
const resizeObserverCallbacks = [];
|
|
13
12
|
class ResizeObserverMock {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Truncation.test.js","names":["render","screen","waitFor","React","afterEach","describe","expect","it","vi","Truncation","mock","
|
|
1
|
+
{"version":3,"file":"Truncation.test.js","names":["render","screen","waitFor","React","afterEach","describe","expect","it","vi","Truncation","mock","Translation","TextStringProvider","children","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","length","createElement","collapsedHeight","getByRole","name","toBeInTheDocument","queryByRole","not"],"sources":["../../../../src/components/truncation/Truncation.test.tsx"],"sourcesContent":["import { render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport Truncation from './Truncation';\n\nvi.mock('@chayns/textstrings', () => ({\n Translation: () => 'Mehr anzeigen',\n TextStringProvider: ({ children }: { children: React.ReactNode }) => children,\n}));\n\ntype ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;\n\nconst resizeObserverCallbacks: ResizeObserverCallback[] = [];\n\nclass ResizeObserverMock {\n constructor(callback: ResizeObserverCallback) {\n resizeObserverCallbacks.push(callback);\n }\n\n disconnect() {}\n\n observe() {}\n\n unobserve() {}\n}\n\nvi.stubGlobal('ResizeObserver', ResizeObserverMock);\n\nconst triggerResize = (height: number) => {\n resizeObserverCallbacks.forEach((callback) => {\n callback([\n {\n contentRect: { height } as DOMRectReadOnly,\n } as ResizeObserverEntry,\n ]);\n });\n};\n\nafterEach(() => {\n resizeObserverCallbacks.length = 0;\n});\n\ndescribe('Truncation', () => {\n it('shows the more action when content exceeds the collapsed height', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Long content</div>\n </Truncation>,\n );\n\n triggerResize(240);\n\n await waitFor(() => {\n expect(screen.getByRole('button', { name: 'Mehr anzeigen' })).toBeInTheDocument();\n });\n });\n\n it('keeps short content expanded without a more action', async () => {\n render(\n <Truncation collapsedHeight={100}>\n <div>Short content</div>\n </Truncation>,\n );\n\n triggerResize(64);\n\n await waitFor(() => {\n expect(screen.queryByRole('button', { name: 'Mehr anzeigen' })).not.toBeInTheDocument();\n });\n });\n});\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,MAAM,EAAEC,OAAO,QAAQ,wBAAwB;AAChE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAC5D,OAAOC,UAAU,MAAM,cAAc;AAErCD,EAAE,CAACE,IAAI,CAAC,qBAAqB,EAAE,OAAO;EAClCC,WAAW,EAAEA,CAAA,KAAM,eAAe;EAClCC,kBAAkB,EAAEA,CAAC;IAAEC;EAAwC,CAAC,KAAKA;AACzE,CAAC,CAAC,CAAC;AAIH,MAAMC,uBAAiD,GAAG,EAAE;AAE5D,MAAMC,kBAAkB,CAAC;EACrBC,WAAWA,CAACC,QAAgC,EAAE;IAC1CH,uBAAuB,CAACI,IAAI,CAACD,QAAQ,CAAC;EAC1C;EAEAE,UAAUA,CAAA,EAAG,CAAC;EAEdC,OAAOA,CAAA,EAAG,CAAC;EAEXC,SAASA,CAAA,EAAG,CAAC;AACjB;AAEAb,EAAE,CAACc,UAAU,CAAC,gBAAgB,EAAEP,kBAAkB,CAAC;AAEnD,MAAMQ,aAAa,GAAIC,MAAc,IAAK;EACtCV,uBAAuB,CAACW,OAAO,CAAER,QAAQ,IAAK;IAC1CA,QAAQ,CAAC,CACL;MACIS,WAAW,EAAE;QAAEF;MAAO;IAC1B,CAAC,CACJ,CAAC;EACN,CAAC,CAAC;AACN,CAAC;AAEDpB,SAAS,CAAC,MAAM;EACZU,uBAAuB,CAACa,MAAM,GAAG,CAAC;AACtC,CAAC,CAAC;AAEFtB,QAAQ,CAAC,YAAY,EAAE,MAAM;EACzBE,EAAE,CAAC,iEAAiE,EAAE,YAAY;IAC9EP,MAAM,cACFG,KAAA,CAAAyB,aAAA,CAACnB,UAAU;MAACoB,eAAe,EAAE;IAAI,gBAC7B1B,KAAA,CAAAyB,aAAA,cAAK,cAAiB,CACd,CAChB,CAAC;IAEDL,aAAa,CAAC,GAAG,CAAC;IAElB,MAAMrB,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,CAAC6B,SAAS,CAAC,QAAQ,EAAE;QAAEC,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC;IACrF,CAAC,CAAC;EACN,CAAC,CAAC;EAEFzB,EAAE,CAAC,oDAAoD,EAAE,YAAY;IACjEP,MAAM,cACFG,KAAA,CAAAyB,aAAA,CAACnB,UAAU;MAACoB,eAAe,EAAE;IAAI,gBAC7B1B,KAAA,CAAAyB,aAAA,cAAK,eAAkB,CACf,CAChB,CAAC;IAEDL,aAAa,CAAC,EAAE,CAAC;IAEjB,MAAMrB,OAAO,CAAC,MAAM;MAChBI,MAAM,CAACL,MAAM,CAACgC,WAAW,CAAC,QAAQ,EAAE;QAAEF,IAAI,EAAE;MAAgB,CAAC,CAAC,CAAC,CAACG,GAAG,CAACF,iBAAiB,CAAC,CAAC;IAC3F,CAAC,CAAC;EACN,CAAC,CAAC;AACN,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,58 +1,58 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
components: {
|
|
3
|
+
copyableContent: {
|
|
4
|
+
copy: {
|
|
5
|
+
stringName: 'txt_chayns_components_v5_core_components_copyableContent_copy',
|
|
6
|
+
fallback: 'Kopieren'
|
|
7
|
+
},
|
|
8
|
+
copyFailed: {
|
|
9
|
+
stringName: 'txt_chayns_components_v5_core_components_copyableContent_copyFailed',
|
|
10
|
+
fallback: 'Kopieren fehlgeschlagen'
|
|
11
|
+
},
|
|
12
|
+
share: {
|
|
13
|
+
stringName: 'txt_chayns_components_v5_core_components_copyableContent_share',
|
|
14
|
+
fallback: 'Teilen'
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
fileItem: {
|
|
18
|
+
download: {
|
|
19
|
+
stringName: 'txt_chayns_components_v5_core_components_fileItem_download',
|
|
20
|
+
fallback: 'Download'
|
|
21
|
+
},
|
|
22
|
+
remove: {
|
|
23
|
+
stringName: 'txt_chayns_components_v5_core_components_fileItem_remove',
|
|
24
|
+
fallback: 'Entfernen'
|
|
25
|
+
}
|
|
26
|
+
},
|
|
3
27
|
filter: {
|
|
4
28
|
filterContent: {
|
|
5
29
|
input: {
|
|
6
30
|
placeholder: {
|
|
7
|
-
stringName: '
|
|
31
|
+
stringName: 'txt_chayns_components_v5_core_components_filter_filterContent_input_placeholder',
|
|
8
32
|
fallback: 'Suche'
|
|
9
33
|
}
|
|
10
34
|
},
|
|
11
35
|
sort: {
|
|
12
|
-
stringName: '
|
|
36
|
+
stringName: 'txt_chayns_components_v5_core_components_filter_filterContent_sort',
|
|
13
37
|
fallback: 'Sortierung'
|
|
14
38
|
}
|
|
15
39
|
}
|
|
16
40
|
},
|
|
17
41
|
filterButtons: {
|
|
18
42
|
all: {
|
|
19
|
-
stringName: '
|
|
43
|
+
stringName: 'txt_chayns_components_v5_core_components_filterButtons_all',
|
|
20
44
|
fallback: 'Alle'
|
|
21
45
|
}
|
|
22
46
|
},
|
|
23
47
|
truncation: {
|
|
24
48
|
less: {
|
|
25
|
-
stringName: '
|
|
49
|
+
stringName: 'txt_chayns_components_v5_core_components_truncation_less',
|
|
26
50
|
fallback: 'Weniger'
|
|
27
51
|
},
|
|
28
52
|
more: {
|
|
29
|
-
stringName: '
|
|
53
|
+
stringName: 'txt_chayns_components_v5_core_components_truncation_more',
|
|
30
54
|
fallback: 'Mehr'
|
|
31
55
|
}
|
|
32
|
-
},
|
|
33
|
-
fileItem: {
|
|
34
|
-
download: {
|
|
35
|
-
stringName: 'txt_chayns_components_core_components_fileItem_download',
|
|
36
|
-
fallback: 'Download'
|
|
37
|
-
},
|
|
38
|
-
remove: {
|
|
39
|
-
stringName: 'txt_chayns_components_core_components_fileItem_remove',
|
|
40
|
-
fallback: 'Entfernen'
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
copyableContent: {
|
|
44
|
-
copy: {
|
|
45
|
-
stringName: 'txt_chayns_components_core_components_copyableContent_copy',
|
|
46
|
-
fallback: 'Kopieren'
|
|
47
|
-
},
|
|
48
|
-
share: {
|
|
49
|
-
stringName: 'txt_chayns_components_core_components_copyableContent_share',
|
|
50
|
-
fallback: 'Teilen'
|
|
51
|
-
},
|
|
52
|
-
copyFailed: {
|
|
53
|
-
stringName: 'txt_chayns_components_core_components_copyableContent_copyFailed',
|
|
54
|
-
fallback: 'Kopieren fehlgeschlagen'
|
|
55
|
-
}
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textStrings.js","names":["components","
|
|
1
|
+
{"version":3,"file":"textStrings.js","names":["components","copyableContent","copy","stringName","fallback","copyFailed","share","fileItem","download","remove","filter","filterContent","input","placeholder","sort","filterButtons","all","truncation","less","more"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n components: {\n copyableContent: {\n copy: {\n stringName: 'txt_chayns_components_v5_core_components_copyableContent_copy',\n fallback: 'Kopieren',\n },\n copyFailed: {\n stringName: 'txt_chayns_components_v5_core_components_copyableContent_copyFailed',\n fallback: 'Kopieren fehlgeschlagen',\n },\n share: {\n stringName: 'txt_chayns_components_v5_core_components_copyableContent_share',\n fallback: 'Teilen',\n },\n },\n fileItem: {\n download: {\n stringName: 'txt_chayns_components_v5_core_components_fileItem_download',\n fallback: 'Download',\n },\n remove: {\n stringName: 'txt_chayns_components_v5_core_components_fileItem_remove',\n fallback: 'Entfernen',\n },\n },\n filter: {\n filterContent: {\n input: {\n placeholder: {\n stringName:\n 'txt_chayns_components_v5_core_components_filter_filterContent_input_placeholder',\n fallback: 'Suche',\n },\n },\n sort: {\n stringName:\n 'txt_chayns_components_v5_core_components_filter_filterContent_sort',\n fallback: 'Sortierung',\n },\n },\n },\n filterButtons: {\n all: {\n stringName: 'txt_chayns_components_v5_core_components_filterButtons_all',\n fallback: 'Alle',\n },\n },\n truncation: {\n less: {\n stringName: 'txt_chayns_components_v5_core_components_truncation_less',\n fallback: 'Weniger',\n },\n more: {\n stringName: 'txt_chayns_components_v5_core_components_truncation_more',\n fallback: 'Mehr',\n },\n },\n },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,eAAe,EAAE;MACbC,IAAI,EAAE;QACFC,UAAU,EAAE,+DAA+D;QAC3EC,QAAQ,EAAE;MACd,CAAC;MACDC,UAAU,EAAE;QACRF,UAAU,EAAE,qEAAqE;QACjFC,QAAQ,EAAE;MACd,CAAC;MACDE,KAAK,EAAE;QACHH,UAAU,EAAE,gEAAgE;QAC5EC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDG,QAAQ,EAAE;MACNC,QAAQ,EAAE;QACNL,UAAU,EAAE,4DAA4D;QACxEC,QAAQ,EAAE;MACd,CAAC;MACDK,MAAM,EAAE;QACJN,UAAU,EAAE,0DAA0D;QACtEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDM,MAAM,EAAE;MACJC,aAAa,EAAE;QACXC,KAAK,EAAE;UACHC,WAAW,EAAE;YACTV,UAAU,EACN,iFAAiF;YACrFC,QAAQ,EAAE;UACd;QACJ,CAAC;QACDU,IAAI,EAAE;UACFX,UAAU,EACN,oEAAoE;UACxEC,QAAQ,EAAE;QACd;MACJ;IACJ,CAAC;IACDW,aAAa,EAAE;MACXC,GAAG,EAAE;QACDb,UAAU,EAAE,4DAA4D;QACxEC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDa,UAAU,EAAE;MACRC,IAAI,EAAE;QACFf,UAAU,EAAE,0DAA0D;QACtEC,QAAQ,EAAE;MACd,CAAC;MACDe,IAAI,EAAE;QACFhB,UAAU,EAAE,0DAA0D;QACtEC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}
|