@chayns-components/core 5.5.63 → 5.5.64

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 (11) hide show
  1. package/AGENTS.md +24 -0
  2. package/lib/cjs/components/file-list/FileList.js +3 -1
  3. package/lib/cjs/components/file-list/FileList.js.map +1 -1
  4. package/lib/cjs/components/file-list/file-item/FileItem.js +27 -19
  5. package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
  6. package/lib/esm/components/file-list/FileList.js +3 -1
  7. package/lib/esm/components/file-list/FileList.js.map +1 -1
  8. package/lib/esm/components/file-list/file-item/FileItem.js +27 -19
  9. package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
  10. package/lib/types/components/file-list/FileList.d.ts +6 -0
  11. package/package.json +2 -2
package/AGENTS.md CHANGED
@@ -2037,6 +2037,30 @@ import { FileList } from '@chayns-components/core';
2037
2037
  />
2038
2038
  ```
2039
2039
 
2040
+ #### Custom Context Menu Items
2041
+
2042
+ ```tsx
2043
+ <FileList
2044
+ files={[
2045
+ {
2046
+ id: '1',
2047
+ name: 'Document.txt',
2048
+ size: 1024,
2049
+ mimeType: 'text/plain',
2050
+ contextMenuItems: [
2051
+ {
2052
+ key: 'custom-download',
2053
+ text: 'Download via project',
2054
+ icons: ['fa fa-download'],
2055
+ onClick: () => action('custom-download')('1'),
2056
+ },
2057
+ ],
2058
+ },
2059
+ ]}
2060
+ shouldAllowDownload={false}
2061
+ />
2062
+ ```
2063
+
2040
2064
  ### Props
2041
2065
 
2042
2066
  | name | type | required | description |
package/lib/cjs/components/file-list/FileList.js CHANGED
@@ -21,7 +21,8 @@ const FileList = ({
21
21
  size,
22
22
  name,
23
23
  id,
24
- source
24
+ source,
25
+ contextMenuItems
25
26
  }) => /*#__PURE__*/_react.default.createElement(_FileItem.default, {
26
27
  key: id,
27
28
  id: id,
@@ -29,6 +30,7 @@ const FileList = ({
29
30
  size: size,
30
31
  mimeType: mimeType,
31
32
  source: source,
33
+ contextMenuItems: contextMenuItems,
32
34
  onRemove: onRemove,
33
35
  shouldAllowDownload: shouldAllowDownload
34
36
  })), [files, onRemove, shouldAllowDownload]);
package/lib/cjs/components/file-list/FileList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileList.js","names":["_react","_interopRequireWildcard","require","_textstrings","_List","_interopRequireDefault","_FileList","_FileItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileList","files","onRemove","shouldAllowDownload","content","useMemo","map","mimeType","size","name","id","source","createElement","key","TextStringProviderSSR","libraries","StyledFileList","displayName","_default","exports"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { TextStringProviderSSR } from '@chayns/textstrings';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n source?: string | File;\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove, shouldAllowDownload }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id, source }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n source={source}\n onRemove={onRemove}\n shouldAllowDownload={shouldAllowDownload}\n />\n )),\n [files, onRemove, shouldAllowDownload],\n );\n\n return useMemo(\n () => (\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"file-list\">\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n </TextStringProviderSSR>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,SAAA,GAAAF,sBAAA,CAAAH,OAAA;AAA4C,SAAAG,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAO,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAyB5C,MAAMgB,QAA2B,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EAC9E,MAAMC,OAAO,GAAG,IAAAC,cAAO,EACnB,MACIJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAEC;EAAO,CAAC,kBAC5CtC,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAAChC,SAAA,CAAAG,OAAQ;IACL8B,GAAG,EAAEH,EAAG;IACRA,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAEA,MAAO;IACfT,QAAQ,EAAEA,QAAS;IACnBC,mBAAmB,EAAEA;EAAoB,CAC5C,CACJ,CAAC,EACN,CAACF,KAAK,EAAEC,QAAQ,EAAEC,mBAAmB,CACzC,CAAC;EAED,OAAO,IAAAE,cAAO,EACV,mBACIhC,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACpC,YAAA,CAAAsC,qBAAqB;IAACC,SAAS,EAAC,2BAA2B;IAACL,EAAE,EAAC;EAAW,gBACvErC,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACjC,SAAA,CAAAqC,cAAc,qBACX3C,MAAA,CAAAU,OAAA,CAAA6B,aAAA,CAACnC,KAAA,CAAAM,OAAI,QAAEqB,OAAc,CACT,CACG,CAC1B,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDJ,QAAQ,CAACiB,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApC,OAAA,GAEnBiB,QAAQ","ignoreList":[]}
1
+ {"version":3,"file":"FileList.js","names":["_react","_interopRequireWildcard","require","_textstrings","_List","_interopRequireDefault","_FileList","_FileItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileList","files","onRemove","shouldAllowDownload","content","useMemo","map","mimeType","size","name","id","source","contextMenuItems","createElement","key","TextStringProviderSSR","libraries","StyledFileList","displayName","_default","exports"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { TextStringProviderSSR } from '@chayns/textstrings';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\nimport type { ContextMenuItem } from '../context-menu/ContextMenu.types';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n source?: string | File;\n /**\n * Additional context menu actions, appended after the built-in download and remove actions.\n * Use keys other than `download` and `remove` when those built-in actions are enabled.\n */\n contextMenuItems?: ContextMenuItem[];\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove, shouldAllowDownload }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id, source, contextMenuItems }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n source={source}\n contextMenuItems={contextMenuItems}\n onRemove={onRemove}\n shouldAllowDownload={shouldAllowDownload}\n />\n )),\n [files, onRemove, shouldAllowDownload],\n );\n\n return useMemo(\n () => (\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"file-list\">\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n </TextStringProviderSSR>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":"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","ignoreList":[]}
package/lib/cjs/components/file-list/file-item/FileItem.js CHANGED
@@ -23,12 +23,14 @@ const FileItem = ({
23
23
  name,
24
24
  id,
25
25
  source,
26
- shouldAllowDownload
26
+ shouldAllowDownload,
27
+ contextMenuItems
27
28
  }) => {
28
29
  const canDownload = shouldAllowDownload && !!source;
29
30
  const canRemove = typeof onRemove === 'function';
31
+ const hasCustomActions = !!(contextMenuItems !== null && contextMenuItems !== void 0 && contextMenuItems.length);
30
32
  const actionIconRef = (0, _react.useRef)(null);
31
- const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(canRemove || !!canDownload);
33
+ const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(canRemove || !!canDownload || hasCustomActions);
32
34
  (0, _useFocusRingPortal.useFocusRingPortal)(actionIconRef, {
33
35
  isEnabled: shouldShowKeyboardHighlighting,
34
36
  shape: 'circle'
@@ -37,7 +39,7 @@ const FileItem = ({
37
39
  if (canRemove) {
38
40
  onRemove(id);
39
41
  }
40
- }, [id, onRemove]);
42
+ }, [canRemove, id, onRemove]);
41
43
  const handleItemKeyDown = (0, _react.useCallback)(event => {
42
44
  if (event.key === 'Delete') {
43
45
  event.preventDefault();
@@ -50,7 +52,7 @@ const FileItem = ({
50
52
  event.stopPropagation();
51
53
  handleRemove();
52
54
  }
53
- }, [handleRemove]);
55
+ }, [canRemove, handleRemove]);
54
56
  const humanFileSize = (0, _react.useMemo)(() => {
55
57
  if (typeof size === 'number') {
56
58
  return (0, _file.getHumanSize)(size);
@@ -103,20 +105,26 @@ const FileItem = ({
103
105
  const downloadText = t(_textStrings.default.components.fileItem.download);
104
106
  const removeText = t(_textStrings.default.components.fileItem.remove);
105
107
  const rightElement = (0, _react.useMemo)(() => {
106
- if (!canDownload && !canRemove) return undefined;
107
- // Both actions available → show as ContextMenu
108
- if (canDownload && canRemove) {
109
- const items = [{
110
- icons: ['fa fa-download'],
111
- key: 'download',
112
- onClick: handleDownload,
113
- text: downloadText
114
- }, {
115
- icons: ['fa fa-trash'],
116
- key: 'remove',
117
- onClick: () => onRemove(id),
118
- text: removeText
119
- }];
108
+ if (!canDownload && !canRemove && !hasCustomActions) return undefined;
109
+ if (hasCustomActions || canDownload && canRemove) {
110
+ const items = [];
111
+ if (canDownload) {
112
+ items.push({
113
+ icons: ['fa fa-download'],
114
+ key: 'download',
115
+ onClick: handleDownload,
116
+ text: downloadText
117
+ });
118
+ }
119
+ if (canRemove) {
120
+ items.push({
121
+ icons: ['fa fa-trash'],
122
+ key: 'remove',
123
+ onClick: handleRemove,
124
+ text: removeText
125
+ });
126
+ }
127
+ items.push(...(contextMenuItems ?? []));
120
128
  return /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
121
129
  items: items
122
130
  });
@@ -139,7 +147,7 @@ const FileItem = ({
139
147
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
140
148
  icons: [fileIcon]
141
149
  }));
142
- }, [canDownload, canRemove, downloadText, handleDownload, handleRemoveKeyDown, id, onRemove, removeText]);
150
+ }, [canDownload, canRemove, contextMenuItems, downloadText, handleDownload, handleRemove, handleRemoveKeyDown, hasCustomActions, id, onRemove, removeText]);
143
151
  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItem, null, /*#__PURE__*/_react.default.createElement(_FileItem.StyledFileItemKeyboardWrapper, {
144
152
  onKeyDown: handleItemKeyDown,
145
153
  tabIndex: -1
package/lib/cjs/components/file-list/file-item/FileItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ContextMenu","_ListItem","_FileItem","_textstrings","_textStrings","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","canDownload","canRemove","actionIconRef","useRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleRemove","useCallback","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","useMemo","getHumanSize","undefined","icon","getIconByMimeType","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","useTranslation","downloadText","textStrings","components","fileItem","removeText","remove","rightElement","items","icons","onClick","text","handleClick","handleKeyDown","fileIcon","StyledFileItemIcon","ref","onKeyDown","role","tabIndex","StyledFileItem","StyledFileItemKeyboardWrapper","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName","_default","exports"],"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":[]}
1
+ {"version":3,"file":"FileItem.js","names":["_react","_interopRequireWildcard","require","_file","_Icon","_interopRequireDefault","_ContextMenu","_ListItem","_FileItem","_textstrings","_textStrings","_useFocusRingPortal","_useKeyboardFocusHighlighting","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FileItem","mimeType","onRemove","size","name","id","source","shouldAllowDownload","contextMenuItems","canDownload","canRemove","hasCustomActions","length","actionIconRef","useRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","handleRemove","useCallback","handleItemKeyDown","event","key","preventDefault","handleRemoveKeyDown","stopPropagation","humanFileSize","useMemo","getHumanSize","undefined","icon","getIconByMimeType","handleDownload","File","url","URL","createObjectURL","a","document","createElement","href","download","body","appendChild","click","removeChild","revokeObjectURL","fetch","then","res","ok","Error","blob","catch","rel","target","useTranslation","downloadText","textStrings","components","fileItem","removeText","remove","rightElement","items","push","icons","onClick","text","handleClick","handleKeyDown","fileIcon","StyledFileItemIcon","ref","onKeyDown","role","tabIndex","StyledFileItem","StyledFileItemKeyboardWrapper","title","subtitle","rightElements","shouldEnableKeyboardHighlighting","displayName","_default","exports"],"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 StyledFileItemKeyboardWrapper,\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 contextMenuItems,\n}) => {\n const canDownload = shouldAllowDownload && !!source;\n const canRemove = typeof onRemove === 'function';\n const hasCustomActions = !!contextMenuItems?.length;\n const actionIconRef = useRef<HTMLDivElement>(null);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n canRemove || !!canDownload || hasCustomActions,\n );\n useFocusRingPortal(actionIconRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: 'circle',\n });\n\n const handleRemove = useCallback(() => {\n if (canRemove) {\n onRemove(id);\n }\n }, [canRemove, 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 [canRemove, 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 && !hasCustomActions) return undefined;\n\n if (hasCustomActions || (canDownload && canRemove)) {\n const items: ContextMenuItem[] = [];\n\n if (canDownload) {\n items.push({\n icons: ['fa fa-download'],\n key: 'download',\n onClick: handleDownload,\n text: downloadText,\n });\n }\n\n if (canRemove) {\n items.push({\n icons: ['fa fa-trash'],\n key: 'remove',\n onClick: handleRemove,\n text: removeText,\n });\n }\n\n items.push(...(contextMenuItems ?? []));\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 contextMenuItems,\n downloadText,\n handleDownload,\n handleRemove,\n handleRemoveKeyDown,\n hasCustomActions,\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":[]}
package/lib/esm/components/file-list/FileList.js CHANGED
@@ -13,7 +13,8 @@ const FileList = ({
13
13
  size,
14
14
  name,
15
15
  id,
16
- source
16
+ source,
17
+ contextMenuItems
17
18
  }) => /*#__PURE__*/React.createElement(FileItem, {
18
19
  key: id,
19
20
  id: id,
@@ -21,6 +22,7 @@ const FileList = ({
21
22
  size: size,
22
23
  mimeType: mimeType,
23
24
  source: source,
25
+ contextMenuItems: contextMenuItems,
24
26
  onRemove: onRemove,
25
27
  shouldAllowDownload: shouldAllowDownload
26
28
  })), [files, onRemove, shouldAllowDownload]);
package/lib/esm/components/file-list/FileList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FileList.js","names":["React","useMemo","TextStringProviderSSR","List","StyledFileList","FileItem","FileList","files","onRemove","shouldAllowDownload","content","map","mimeType","size","name","id","source","createElement","key","libraries","displayName"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { TextStringProviderSSR } from '@chayns/textstrings';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n source?: string | File;\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove, shouldAllowDownload }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id, source }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n source={source}\n onRemove={onRemove}\n shouldAllowDownload={shouldAllowDownload}\n />\n )),\n [files, onRemove, shouldAllowDownload],\n );\n\n return useMemo(\n () => (\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"file-list\">\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n </TextStringProviderSSR>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,qBAAqB,QAAQ,qBAAqB;AAC3D,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,QAAQ,MAAM,sBAAsB;AAyB3C,MAAMC,QAA2B,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EAC9E,MAAMC,OAAO,GAAGT,OAAO,CACnB,MACIM,KAAK,EAAEI,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAEC;EAAO,CAAC,kBAC5ChB,KAAA,CAAAiB,aAAA,CAACZ,QAAQ;IACLa,GAAG,EAAEH,EAAG;IACRA,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAEA,MAAO;IACfR,QAAQ,EAAEA,QAAS;IACnBC,mBAAmB,EAAEA;EAAoB,CAC5C,CACJ,CAAC,EACN,CAACF,KAAK,EAAEC,QAAQ,EAAEC,mBAAmB,CACzC,CAAC;EAED,OAAOR,OAAO,CACV,mBACID,KAAA,CAAAiB,aAAA,CAACf,qBAAqB;IAACiB,SAAS,EAAC,2BAA2B;IAACJ,EAAE,EAAC;EAAW,gBACvEf,KAAA,CAAAiB,aAAA,CAACb,cAAc,qBACXJ,KAAA,CAAAiB,aAAA,CAACd,IAAI,QAAEO,OAAc,CACT,CACG,CAC1B,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDJ,QAAQ,CAACc,WAAW,GAAG,UAAU;AAEjC,eAAed,QAAQ","ignoreList":[]}
1
+ {"version":3,"file":"FileList.js","names":["React","useMemo","TextStringProviderSSR","List","StyledFileList","FileItem","FileList","files","onRemove","shouldAllowDownload","content","map","mimeType","size","name","id","source","contextMenuItems","createElement","key","libraries","displayName"],"sources":["../../../../src/components/file-list/FileList.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { TextStringProviderSSR } from '@chayns/textstrings';\nimport List from '../list/List';\nimport { StyledFileList } from './FileList.styles';\nimport FileItem from './file-item/FileItem';\nimport type { ContextMenuItem } from '../context-menu/ContextMenu.types';\n\nexport interface IFileItem {\n id: string;\n name: string;\n size?: number;\n mimeType: string;\n source?: string | File;\n /**\n * Additional context menu actions, appended after the built-in download and remove actions.\n * Use keys other than `download` and `remove` when those built-in actions are enabled.\n */\n contextMenuItems?: ContextMenuItem[];\n}\n\nexport type FileListProps = {\n /**\n * Already uploaded files to display.\n */\n files?: IFileItem[];\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (id: IFileItem['id']) => void;\n /**\n * Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nconst FileList: FC<FileListProps> = ({ files, onRemove, shouldAllowDownload }) => {\n const content = useMemo(\n () =>\n files?.map(({ mimeType, size, name, id, source, contextMenuItems }) => (\n <FileItem\n key={id}\n id={id}\n name={name}\n size={size}\n mimeType={mimeType}\n source={source}\n contextMenuItems={contextMenuItems}\n onRemove={onRemove}\n shouldAllowDownload={shouldAllowDownload}\n />\n )),\n [files, onRemove, shouldAllowDownload],\n );\n\n return useMemo(\n () => (\n <TextStringProviderSSR libraries=\"chayns-components-v5-core\" id=\"file-list\">\n <StyledFileList>\n <List>{content}</List>\n </StyledFileList>\n </TextStringProviderSSR>\n ),\n [content],\n );\n};\n\nFileList.displayName = 'FileList';\n\nexport default FileList;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,qBAAqB,QAAQ,qBAAqB;AAC3D,OAAOC,IAAI,MAAM,cAAc;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,QAAQ,MAAM,sBAAsB;AA+B3C,MAAMC,QAA2B,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EAC9E,MAAMC,OAAO,GAAGT,OAAO,CACnB,MACIM,KAAK,EAAEI,GAAG,CAAC,CAAC;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAEC,MAAM;IAAEC;EAAiB,CAAC,kBAC9DjB,KAAA,CAAAkB,aAAA,CAACb,QAAQ;IACLc,GAAG,EAAEJ,EAAG;IACRA,EAAE,EAAEA,EAAG;IACPD,IAAI,EAAEA,IAAK;IACXD,IAAI,EAAEA,IAAK;IACXD,QAAQ,EAAEA,QAAS;IACnBI,MAAM,EAAEA,MAAO;IACfC,gBAAgB,EAAEA,gBAAiB;IACnCT,QAAQ,EAAEA,QAAS;IACnBC,mBAAmB,EAAEA;EAAoB,CAC5C,CACJ,CAAC,EACN,CAACF,KAAK,EAAEC,QAAQ,EAAEC,mBAAmB,CACzC,CAAC;EAED,OAAOR,OAAO,CACV,mBACID,KAAA,CAAAkB,aAAA,CAAChB,qBAAqB;IAACkB,SAAS,EAAC,2BAA2B;IAACL,EAAE,EAAC;EAAW,gBACvEf,KAAA,CAAAkB,aAAA,CAACd,cAAc,qBACXJ,KAAA,CAAAkB,aAAA,CAACf,IAAI,QAAEO,OAAc,CACT,CACG,CAC1B,EACD,CAACA,OAAO,CACZ,CAAC;AACL,CAAC;AAEDJ,QAAQ,CAACe,WAAW,GAAG,UAAU;AAEjC,eAAef,QAAQ","ignoreList":[]}
package/lib/esm/components/file-list/file-item/FileItem.js CHANGED
@@ -15,12 +15,14 @@ const FileItem = ({
15
15
  name,
16
16
  id,
17
17
  source,
18
- shouldAllowDownload
18
+ shouldAllowDownload,
19
+ contextMenuItems
19
20
  }) => {
20
21
  const canDownload = shouldAllowDownload && !!source;
21
22
  const canRemove = typeof onRemove === 'function';
23
+ const hasCustomActions = !!contextMenuItems?.length;
22
24
  const actionIconRef = useRef(null);
23
- const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload);
25
+ const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(canRemove || !!canDownload || hasCustomActions);
24
26
  useFocusRingPortal(actionIconRef, {
25
27
  isEnabled: shouldShowKeyboardHighlighting,
26
28
  shape: 'circle'
@@ -29,7 +31,7 @@ const FileItem = ({
29
31
  if (canRemove) {
30
32
  onRemove(id);
31
33
  }
32
- }, [id, onRemove]);
34
+ }, [canRemove, id, onRemove]);
33
35
  const handleItemKeyDown = useCallback(event => {
34
36
  if (event.key === 'Delete') {
35
37
  event.preventDefault();
@@ -42,7 +44,7 @@ const FileItem = ({
42
44
  event.stopPropagation();
43
45
  handleRemove();
44
46
  }
45
- }, [handleRemove]);
47
+ }, [canRemove, handleRemove]);
46
48
  const humanFileSize = useMemo(() => {
47
49
  if (typeof size === 'number') {
48
50
  return getHumanSize(size);
@@ -95,20 +97,26 @@ const FileItem = ({
95
97
  const downloadText = t(textStrings.components.fileItem.download);
96
98
  const removeText = t(textStrings.components.fileItem.remove);
97
99
  const rightElement = useMemo(() => {
98
- if (!canDownload && !canRemove) return undefined;
99
- // Both actions available → show as ContextMenu
100
- if (canDownload && canRemove) {
101
- const items = [{
102
- icons: ['fa fa-download'],
103
- key: 'download',
104
- onClick: handleDownload,
105
- text: downloadText
106
- }, {
107
- icons: ['fa fa-trash'],
108
- key: 'remove',
109
- onClick: () => onRemove(id),
110
- text: removeText
111
- }];
100
+ if (!canDownload && !canRemove && !hasCustomActions) return undefined;
101
+ if (hasCustomActions || canDownload && canRemove) {
102
+ const items = [];
103
+ if (canDownload) {
104
+ items.push({
105
+ icons: ['fa fa-download'],
106
+ key: 'download',
107
+ onClick: handleDownload,
108
+ text: downloadText
109
+ });
110
+ }
111
+ if (canRemove) {
112
+ items.push({
113
+ icons: ['fa fa-trash'],
114
+ key: 'remove',
115
+ onClick: handleRemove,
116
+ text: removeText
117
+ });
118
+ }
119
+ items.push(...(contextMenuItems ?? []));
112
120
  return /*#__PURE__*/React.createElement(ContextMenu, {
113
121
  items: items
114
122
  });
@@ -131,7 +139,7 @@ const FileItem = ({
131
139
  }, /*#__PURE__*/React.createElement(Icon, {
132
140
  icons: [fileIcon]
133
141
  }));
134
- }, [canDownload, canRemove, downloadText, handleDownload, handleRemoveKeyDown, id, onRemove, removeText]);
142
+ }, [canDownload, canRemove, contextMenuItems, downloadText, handleDownload, handleRemove, handleRemoveKeyDown, hasCustomActions, id, onRemove, removeText]);
135
143
  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(StyledFileItemKeyboardWrapper, {
136
144
  onKeyDown: handleItemKeyDown,
137
145
  tabIndex: -1
package/lib/esm/components/file-list/file-item/FileItem.js.map CHANGED
@@ -1 +1 @@
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":[]}
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","contextMenuItems","canDownload","canRemove","hasCustomActions","length","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","push","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 StyledFileItemKeyboardWrapper,\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 contextMenuItems,\n}) => {\n const canDownload = shouldAllowDownload && !!source;\n const canRemove = typeof onRemove === 'function';\n const hasCustomActions = !!contextMenuItems?.length;\n const actionIconRef = useRef<HTMLDivElement>(null);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n canRemove || !!canDownload || hasCustomActions,\n );\n useFocusRingPortal(actionIconRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: 'circle',\n });\n\n const handleRemove = useCallback(() => {\n if (canRemove) {\n onRemove(id);\n }\n }, [canRemove, 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 [canRemove, 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 && !hasCustomActions) return undefined;\n\n if (hasCustomActions || (canDownload && canRemove)) {\n const items: ContextMenuItem[] = [];\n\n if (canDownload) {\n items.push({\n icons: ['fa fa-download'],\n key: 'download',\n onClick: handleDownload,\n text: downloadText,\n });\n }\n\n if (canRemove) {\n items.push({\n icons: ['fa fa-trash'],\n key: 'remove',\n onClick: handleRemove,\n text: removeText,\n });\n }\n\n items.push(...(contextMenuItems ?? []));\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 contextMenuItems,\n downloadText,\n handleDownload,\n handleRemove,\n handleRemoveKeyDown,\n hasCustomActions,\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":[]}
package/lib/types/components/file-list/FileList.d.ts CHANGED
@@ -1,10 +1,16 @@
1
1
  import { FC } from 'react';
2
+ import type { ContextMenuItem } from '../context-menu/ContextMenu.types';
2
3
  export interface IFileItem {
3
4
  id: string;
4
5
  name: string;
5
6
  size?: number;
6
7
  mimeType: string;
7
8
  source?: string | File;
9
+ /**
10
+ * Additional context menu actions, appended after the built-in download and remove actions.
11
+ * Use keys other than `download` and `remove` when those built-in actions are enabled.
12
+ */
13
+ contextMenuItems?: ContextMenuItem[];
8
14
  }
9
15
  export type FileListProps = {
10
16
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.5.63",
3
+ "version": "5.5.64",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -93,5 +93,5 @@
93
93
  "publishConfig": {
94
94
  "access": "public"
95
95
  },
96
- "gitHead": "8f47cc5013a666ba1e67c9d7e0a0cdd5e40cefee"
96
+ "gitHead": "dc5770e8b729b767a988f81ac5174408d31e425d"
97
97
  }