@chayns-components/core 5.3.12-alpha.0 → 5.4.5-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. package/lib/cjs/components/accordion/Accordion.js +1 -1
  2. package/lib/cjs/components/accordion/Accordion.js.map +1 -1
  3. package/lib/cjs/components/accordion/Accordion.styles.js +1 -1
  4. package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
  5. package/lib/cjs/components/button/Button.styles.js +1 -8
  6. package/lib/cjs/components/button/Button.styles.js.map +1 -1
  7. package/lib/cjs/components/combobox/ComboBox.js +14 -5
  8. package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
  9. package/lib/cjs/components/context-menu/ContextMenu.js +50 -40
  10. package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
  11. package/lib/cjs/components/context-menu/ContextMenu.utils.js +27 -1
  12. package/lib/cjs/components/context-menu/ContextMenu.utils.js.map +1 -1
  13. package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js +3 -8
  14. package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
  15. package/lib/cjs/components/file-list/file-item/FileItem.js +29 -27
  16. package/lib/cjs/components/file-list/file-item/FileItem.js.map +1 -1
  17. package/lib/cjs/components/file-list/file-item/FileItem.styles.js +6 -0
  18. package/lib/cjs/components/file-list/file-item/FileItem.styles.js.map +1 -1
  19. package/lib/cjs/components/highlight-slider/HighlightSlider.js +6 -3
  20. package/lib/cjs/components/highlight-slider/HighlightSlider.js.map +1 -1
  21. package/lib/cjs/components/input/Input.js +2 -2
  22. package/lib/cjs/components/input/Input.js.map +1 -1
  23. package/lib/cjs/components/input/Input.styles.js +6 -1
  24. package/lib/cjs/components/input/Input.styles.js.map +1 -1
  25. package/lib/cjs/components/list/List.utils.js +108 -14
  26. package/lib/cjs/components/list/List.utils.js.map +1 -1
  27. package/lib/cjs/components/list/list-item/ListItem.js +27 -25
  28. package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
  29. package/lib/cjs/components/list/list-item/ListItem.styles.js +3 -5
  30. package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
  31. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js +4 -35
  32. package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  33. package/lib/cjs/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js +1 -31
  34. package/lib/cjs/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map +1 -1
  35. package/lib/cjs/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js +1 -29
  36. package/lib/cjs/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js.map +1 -1
  37. package/lib/cjs/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js +1 -29
  38. package/lib/cjs/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
  39. package/lib/cjs/components/mention-finder/MentionFinder.js +12 -3
  40. package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
  41. package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js +6 -0
  42. package/lib/cjs/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
  43. package/lib/cjs/components/search-box/SearchBox.js +15 -3
  44. package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
  45. package/lib/cjs/components/search-input/SearchInput.js +16 -2
  46. package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
  47. package/lib/cjs/components/search-input/SearchInput.styles.js +1 -0
  48. package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
  49. package/lib/cjs/components/setup-wizard/SetupWizard.js +6 -3
  50. package/lib/cjs/components/setup-wizard/SetupWizard.js.map +1 -1
  51. package/lib/cjs/components/sharing-bar/SharingBar.js +1 -1
  52. package/lib/cjs/components/sharing-bar/SharingBar.js.map +1 -1
  53. package/lib/cjs/components/sharing-bar/SharingBar.styles.js +3 -2
  54. package/lib/cjs/components/sharing-bar/SharingBar.styles.js.map +1 -1
  55. package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js +2 -0
  56. package/lib/cjs/components/skeleton/base-skeleton/BaseSkeleton.styles.js.map +1 -1
  57. package/lib/cjs/components/slider-button/SliderButton.styles.js +1 -5
  58. package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
  59. package/lib/cjs/components/tag-input/TagInput.js +1 -0
  60. package/lib/cjs/components/tag-input/TagInput.js.map +1 -1
  61. package/lib/cjs/components/tag-input/TagInput.styles.js +0 -2
  62. package/lib/cjs/components/tag-input/TagInput.styles.js.map +1 -1
  63. package/lib/cjs/components/truncation/Truncation.styles.js +0 -1
  64. package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
  65. package/lib/cjs/index.js +6 -0
  66. package/lib/cjs/index.js.map +1 -1
  67. package/lib/cjs/utils/keyboardFocusHighlighting.styles.js +2 -3
  68. package/lib/cjs/utils/keyboardFocusHighlighting.styles.js.map +1 -1
  69. package/lib/esm/components/accordion/Accordion.js +1 -1
  70. package/lib/esm/components/accordion/Accordion.js.map +1 -1
  71. package/lib/esm/components/accordion/Accordion.styles.js +1 -1
  72. package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
  73. package/lib/esm/components/button/Button.styles.js +1 -8
  74. package/lib/esm/components/button/Button.styles.js.map +1 -1
  75. package/lib/esm/components/combobox/ComboBox.js +9 -1
  76. package/lib/esm/components/combobox/ComboBox.js.map +1 -1
  77. package/lib/esm/components/context-menu/ContextMenu.js +48 -39
  78. package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
  79. package/lib/esm/components/context-menu/ContextMenu.utils.js +24 -0
  80. package/lib/esm/components/context-menu/ContextMenu.utils.js.map +1 -1
  81. package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js +3 -8
  82. package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
  83. package/lib/esm/components/file-list/file-item/FileItem.js +29 -27
  84. package/lib/esm/components/file-list/file-item/FileItem.js.map +1 -1
  85. package/lib/esm/components/file-list/file-item/FileItem.styles.js +7 -1
  86. package/lib/esm/components/file-list/file-item/FileItem.styles.js.map +1 -1
  87. package/lib/esm/components/highlight-slider/HighlightSlider.js +6 -3
  88. package/lib/esm/components/highlight-slider/HighlightSlider.js.map +1 -1
  89. package/lib/esm/components/input/Input.js +2 -2
  90. package/lib/esm/components/input/Input.js.map +1 -1
  91. package/lib/esm/components/input/Input.styles.js +6 -1
  92. package/lib/esm/components/input/Input.styles.js.map +1 -1
  93. package/lib/esm/components/list/List.utils.js +104 -13
  94. package/lib/esm/components/list/List.utils.js.map +1 -1
  95. package/lib/esm/components/list/list-item/ListItem.js +28 -26
  96. package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
  97. package/lib/esm/components/list/list-item/ListItem.styles.js +3 -5
  98. package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
  99. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js +4 -35
  100. package/lib/esm/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
  101. package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js +2 -32
  102. package/lib/esm/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.js.map +1 -1
  103. package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js +2 -30
  104. package/lib/esm/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.js.map +1 -1
  105. package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js +1 -29
  106. package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map +1 -1
  107. package/lib/esm/components/mention-finder/MentionFinder.js +9 -1
  108. package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
  109. package/lib/esm/components/multi-action-button/MultiActionButton.styles.js +6 -0
  110. package/lib/esm/components/multi-action-button/MultiActionButton.styles.js.map +1 -1
  111. package/lib/esm/components/search-box/SearchBox.js +12 -1
  112. package/lib/esm/components/search-box/SearchBox.js.map +1 -1
  113. package/lib/esm/components/search-input/SearchInput.js +15 -2
  114. package/lib/esm/components/search-input/SearchInput.js.map +1 -1
  115. package/lib/esm/components/search-input/SearchInput.styles.js +1 -0
  116. package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
  117. package/lib/esm/components/setup-wizard/SetupWizard.js +6 -3
  118. package/lib/esm/components/setup-wizard/SetupWizard.js.map +1 -1
  119. package/lib/esm/components/sharing-bar/SharingBar.js +1 -1
  120. package/lib/esm/components/sharing-bar/SharingBar.js.map +1 -1
  121. package/lib/esm/components/sharing-bar/SharingBar.styles.js +3 -2
  122. package/lib/esm/components/sharing-bar/SharingBar.styles.js.map +1 -1
  123. package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.styles.js +2 -0
  124. package/lib/esm/components/skeleton/base-skeleton/BaseSkeleton.styles.js.map +1 -1
  125. package/lib/esm/components/slider-button/SliderButton.styles.js +1 -5
  126. package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
  127. package/lib/esm/components/tag-input/TagInput.js +1 -0
  128. package/lib/esm/components/tag-input/TagInput.js.map +1 -1
  129. package/lib/esm/components/tag-input/TagInput.styles.js +0 -2
  130. package/lib/esm/components/tag-input/TagInput.styles.js.map +1 -1
  131. package/lib/esm/components/truncation/Truncation.styles.js +0 -1
  132. package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
  133. package/lib/esm/index.js +1 -1
  134. package/lib/esm/index.js.map +1 -1
  135. package/lib/esm/utils/keyboardFocusHighlighting.styles.js +2 -3
  136. package/lib/esm/utils/keyboardFocusHighlighting.styles.js.map +1 -1
  137. package/lib/types/components/context-menu/ContextMenu.utils.d.ts +10 -0
  138. package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.d.ts +1 -1
  139. package/lib/types/components/list/List.utils.d.ts +23 -7
  140. package/lib/types/components/list/list-item/ListItem.d.ts +4 -0
  141. package/lib/types/components/list/list-item/list-item-head/ListItemHead.d.ts +0 -1
  142. package/lib/types/components/list/list-item/list-item-head/list-item-right-element/ListItemRightElement.d.ts +0 -1
  143. package/lib/types/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.d.ts +0 -1
  144. package/lib/types/components/list/list-item/list-item-head/list-item-title/ListItemTitle.d.ts +0 -1
  145. package/lib/types/index.d.ts +1 -1
  146. package/package.json +3 -3
@@ -1,11 +1,10 @@
1
- import React, { useEffect, useMemo, useRef } from 'react';
1
+ import React, { useMemo, useRef } from 'react';
2
2
  import { StyledListItemHeadSubtitleText, StyledListItemSubtitle, StyledListItemBottomRightElement } from './ListItemSubtitle.styles';
3
3
  import { getElementClickEvent } from '../../../../../utils/accordion';
4
4
  const ListItemSubtitle = ({
5
5
  rightElements,
6
6
  subtitle,
7
- isOpen,
8
- shouldAllowRightElementFocus = true
7
+ isOpen
9
8
  }) => {
10
9
  const bottomElementRef = useRef(null);
11
10
  const handlePreventClick = event => {
@@ -24,33 +23,6 @@ const ListItemSubtitle = ({
24
23
  }
25
24
  return false;
26
25
  }, [bottomElement]);
27
- useEffect(() => {
28
- const bottomElementWrapper = bottomElementRef.current;
29
- if (!bottomElementWrapper) {
30
- return;
31
- }
32
- const focusableElements = Array.from(bottomElementWrapper.querySelectorAll('a[href], button, input, select, textarea, [tabindex], [contenteditable="true"]'));
33
- focusableElements.forEach(element => {
34
- const currentElement = element;
35
- const datasetKey = 'listItemRightElementOriginalTabIndex';
36
- if (shouldAllowRightElementFocus) {
37
- const originalTabIndex = currentElement.dataset[datasetKey];
38
- if (typeof originalTabIndex === 'string') {
39
- if (originalTabIndex === '') {
40
- currentElement.removeAttribute('tabindex');
41
- } else {
42
- currentElement.setAttribute('tabindex', originalTabIndex);
43
- }
44
- delete currentElement.dataset[datasetKey];
45
- }
46
- } else {
47
- if (typeof currentElement.dataset[datasetKey] !== 'string') {
48
- currentElement.dataset[datasetKey] = currentElement.getAttribute('tabindex') ?? '';
49
- }
50
- currentElement.setAttribute('tabindex', '-1');
51
- }
52
- });
53
- }, [bottomElement, shouldAllowRightElementFocus]);
54
26
  return /*#__PURE__*/React.createElement(StyledListItemSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
55
27
  $isOpen: isOpen
56
28
  }, subtitle), bottomElement && /*#__PURE__*/React.createElement(StyledListItemBottomRightElement, {
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemSubtitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadSubtitleText","StyledListItemSubtitle","StyledListItemBottomRightElement","getElementClickEvent","ListItemSubtitle","rightElements","subtitle","isOpen","shouldAllowRightElementFocus","bottomElementRef","handlePreventClick","event","stopPropagation","preventDefault","bottomElement","bottom","undefined","shouldPreventRightElementClick","bottomElementWrapper","current","focusableElements","Array","from","querySelectorAll","forEach","element","currentElement","datasetKey","originalTabIndex","dataset","removeAttribute","setAttribute","getAttribute","createElement","$isOpen","ref","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n StyledListItemHeadSubtitleText,\n StyledListItemSubtitle,\n StyledListItemBottomRightElement,\n} from './ListItemSubtitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemSubtitleProps = {\n rightElements?: IListItemRightElements;\n subtitle?: ReactNode;\n isOpen: boolean;\n shouldAllowRightElementFocus?: boolean;\n};\n\nconst ListItemSubtitle: FC<ListItemSubtitleProps> = ({\n rightElements,\n subtitle,\n isOpen,\n shouldAllowRightElementFocus = true,\n}) => {\n const bottomElementRef = useRef<HTMLDivElement>(null);\n\n const handlePreventClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n const bottomElement = useMemo(() => {\n if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n return (rightElements as unknown as IListItemRightElement).bottom;\n }\n\n return undefined;\n }, [rightElements]);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (bottomElement) {\n return getElementClickEvent(bottomElement);\n }\n\n return false;\n }, [bottomElement]);\n\n useEffect(() => {\n const bottomElementWrapper = bottomElementRef.current;\n\n if (!bottomElementWrapper) {\n return;\n }\n\n const focusableElements = Array.from(\n bottomElementWrapper.querySelectorAll<HTMLElement>(\n 'a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]',\n ),\n );\n\n focusableElements.forEach((element) => {\n const currentElement = element;\n const datasetKey = 'listItemRightElementOriginalTabIndex';\n\n if (shouldAllowRightElementFocus) {\n const originalTabIndex = currentElement.dataset[datasetKey];\n\n if (typeof originalTabIndex === 'string') {\n if (originalTabIndex === '') {\n currentElement.removeAttribute('tabindex');\n } else {\n currentElement.setAttribute('tabindex', originalTabIndex);\n }\n\n delete currentElement.dataset[datasetKey];\n }\n } else {\n if (typeof currentElement.dataset[datasetKey] !== 'string') {\n currentElement.dataset[datasetKey] =\n currentElement.getAttribute('tabindex') ?? '';\n }\n\n currentElement.setAttribute('tabindex', '-1');\n }\n });\n }, [bottomElement, shouldAllowRightElementFocus]);\n\n return (\n <StyledListItemSubtitle>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {bottomElement && (\n <StyledListItemBottomRightElement\n data-right-element=\"true\"\n ref={bottomElementRef}\n onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n >\n {bottomElement}\n </StyledListItemBottomRightElement>\n )}\n </StyledListItemSubtitle>\n );\n};\n\nListItemSubtitle.displayName = 'ListItemSubtitle';\n\nexport default ListItemSubtitle;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItemSubtitle.js","names":["React","useMemo","useRef","StyledListItemHeadSubtitleText","StyledListItemSubtitle","StyledListItemBottomRightElement","getElementClickEvent","ListItemSubtitle","rightElements","subtitle","isOpen","bottomElementRef","handlePreventClick","event","stopPropagation","preventDefault","bottomElement","bottom","undefined","shouldPreventRightElementClick","createElement","$isOpen","ref","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-subtitle/ListItemSubtitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n StyledListItemHeadSubtitleText,\n StyledListItemSubtitle,\n StyledListItemBottomRightElement,\n} from './ListItemSubtitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemSubtitleProps = {\n rightElements?: IListItemRightElements;\n subtitle?: ReactNode;\n isOpen: boolean;\n};\n\nconst ListItemSubtitle: FC<ListItemSubtitleProps> = ({ rightElements, subtitle, isOpen }) => {\n const bottomElementRef = useRef<HTMLDivElement>(null);\n\n const handlePreventClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n const bottomElement = useMemo(() => {\n if (typeof rightElements === 'object' && rightElements && 'bottom' in rightElements) {\n return (rightElements as unknown as IListItemRightElement).bottom;\n }\n\n return undefined;\n }, [rightElements]);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (bottomElement) {\n return getElementClickEvent(bottomElement);\n }\n\n return false;\n }, [bottomElement]);\n\n return (\n <StyledListItemSubtitle>\n <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n {subtitle}\n </StyledListItemHeadSubtitleText>\n {bottomElement && (\n <StyledListItemBottomRightElement\n data-right-element=\"true\"\n ref={bottomElementRef}\n onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n >\n {bottomElement}\n </StyledListItemBottomRightElement>\n )}\n </StyledListItemSubtitle>\n );\n};\n\nListItemSubtitle.displayName = 'ListItemSubtitle';\n\nexport default ListItemSubtitle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAE7D,SACIC,8BAA8B,EAC9BC,sBAAsB,EACtBC,gCAAgC,QAC7B,2BAA2B;AAClC,SAASC,oBAAoB,QAAQ,gCAAgC;AAQrE,MAAMC,gBAA2C,GAAGA,CAAC;EAAEC,aAAa;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KAAK;EACzF,MAAMC,gBAAgB,GAAGT,MAAM,CAAiB,IAAI,CAAC;EAErD,MAAMU,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,aAAa,GAAGf,OAAO,CAAC,MAAM;IAChC,IAAI,OAAOO,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,QAAQ,IAAIA,aAAa,EAAE;MACjF,OAAQA,aAAa,CAAsCS,MAAM;IACrE;IAEA,OAAOC,SAAS;EACpB,CAAC,EAAE,CAACV,aAAa,CAAC,CAAC;EAEnB,MAAMW,8BAA8B,GAAGlB,OAAO,CAAC,MAAM;IACjD,IAAIe,aAAa,EAAE;MACf,OAAOV,oBAAoB,CAACU,aAAa,CAAC;IAC9C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,oBACIhB,KAAA,CAAAoB,aAAA,CAAChB,sBAAsB,qBACnBJ,KAAA,CAAAoB,aAAA,CAACjB,8BAA8B;IAACkB,OAAO,EAAEX;EAAO,GAC3CD,QAC2B,CAAC,EAChCO,aAAa,iBACVhB,KAAA,CAAAoB,aAAA,CAACf,gCAAgC;IAC7B,sBAAmB,MAAM;IACzBiB,GAAG,EAAEX,gBAAiB;IACtBY,OAAO,EAAEJ,8BAA8B,GAAGP,kBAAkB,GAAGM;EAAU,GAExEF,aAC6B,CAElB,CAAC;AAEjC,CAAC;AAEDT,gBAAgB,CAACiB,WAAW,GAAG,kBAAkB;AAEjD,eAAejB,gBAAgB","ignoreList":[]}
@@ -8,8 +8,7 @@ const ListItemTitle = ({
8
8
  shouldShowMultilineTitle,
9
9
  isOpen,
10
10
  onResize,
11
- onTitleWidthChange,
12
- shouldAllowRightElementFocus = true
11
+ onTitleWidthChange
13
12
  }) => {
14
13
  const titleWrapperRef = useRef(null);
15
14
  const wrapperRef = useRef(null);
@@ -53,33 +52,6 @@ const ListItemTitle = ({
53
52
  }
54
53
  return false;
55
54
  }, [topElement]);
56
- useEffect(() => {
57
- const topElementWrapper = topElementWrapperRef.current;
58
- if (!topElementWrapper) {
59
- return;
60
- }
61
- const focusableElements = Array.from(topElementWrapper.querySelectorAll('a[href], button, input, select, textarea, [tabindex], [contenteditable="true"]'));
62
- focusableElements.forEach(element => {
63
- const currentElement = element;
64
- const datasetKey = 'listItemRightElementOriginalTabIndex';
65
- if (shouldAllowRightElementFocus) {
66
- const originalTabIndex = currentElement.dataset[datasetKey];
67
- if (typeof originalTabIndex === 'string') {
68
- if (originalTabIndex === '') {
69
- currentElement.removeAttribute('tabindex');
70
- } else {
71
- currentElement.setAttribute('tabindex', originalTabIndex);
72
- }
73
- delete currentElement.dataset[datasetKey];
74
- }
75
- } else {
76
- if (typeof currentElement.dataset[datasetKey] !== 'string') {
77
- currentElement.dataset[datasetKey] = currentElement.getAttribute('tabindex') ?? '';
78
- }
79
- currentElement.setAttribute('tabindex', '-1');
80
- }
81
- });
82
- }, [shouldAllowRightElementFocus, topElement]);
83
55
  return /*#__PURE__*/React.createElement(StyledListItemTitle, {
84
56
  ref: wrapperRef
85
57
  }, /*#__PURE__*/React.createElement(StyledListItemTitleLeftWrapper, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","shouldAllowRightElementFocus","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","topElementWrapper","focusableElements","Array","from","querySelectorAll","forEach","currentElement","datasetKey","originalTabIndex","dataset","removeAttribute","setAttribute","getAttribute","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemTitle,\n StyledListItemTitleLeftWrapper,\n StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n rightElements?: IListItemRightElements;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldShowMultilineTitle: boolean;\n isOpen: boolean;\n onResize?: (entries: ResizeObserverEntry[]) => void;\n onTitleWidthChange: (width: number) => void;\n shouldAllowRightElementFocus?: boolean;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n rightElements,\n titleElement,\n title,\n shouldShowMultilineTitle,\n isOpen,\n onResize,\n onTitleWidthChange,\n shouldAllowRightElementFocus = true,\n}) => {\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const elementWrapperRef = useRef<HTMLDivElement>(null);\n const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const element = titleWrapperRef?.current;\n if (!element || typeof onResize !== 'function') return undefined;\n\n const resizeObserver = new ResizeObserver(onResize);\n resizeObserver.observe(element);\n\n return () => resizeObserver.disconnect();\n }, [onResize]);\n\n useEffect(() => {\n if (wrapperRef.current && elementWrapperRef.current) {\n const fullWidth = wrapperRef.current.clientWidth;\n const rightElementWidth = elementWrapperRef.current.clientWidth;\n const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n let width = fullWidth;\n\n if (rightElementWidth > 0) {\n width -= rightElementWidth + 8;\n }\n\n if (topElementWidth) {\n width -= topElementWidth + 12;\n }\n\n onTitleWidthChange(width);\n }\n }, [onTitleWidthChange]);\n\n const handlePreventClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n const topElement = useMemo(() => {\n if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n return (rightElements as unknown as IListItemRightElement).top;\n }\n\n return undefined;\n }, [rightElements]);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (topElement) {\n return getElementClickEvent(topElement);\n }\n\n return false;\n }, [topElement]);\n\n useEffect(() => {\n const topElementWrapper = topElementWrapperRef.current;\n\n if (!topElementWrapper) {\n return;\n }\n\n const focusableElements = Array.from(\n topElementWrapper.querySelectorAll<HTMLElement>(\n 'a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]',\n ),\n );\n\n focusableElements.forEach((element) => {\n const currentElement = element;\n const datasetKey = 'listItemRightElementOriginalTabIndex';\n\n if (shouldAllowRightElementFocus) {\n const originalTabIndex = currentElement.dataset[datasetKey];\n\n if (typeof originalTabIndex === 'string') {\n if (originalTabIndex === '') {\n currentElement.removeAttribute('tabindex');\n } else {\n currentElement.setAttribute('tabindex', originalTabIndex);\n }\n\n delete currentElement.dataset[datasetKey];\n }\n } else {\n if (typeof currentElement.dataset[datasetKey] !== 'string') {\n currentElement.dataset[datasetKey] =\n currentElement.getAttribute('tabindex') ?? '';\n }\n\n currentElement.setAttribute('tabindex', '-1');\n }\n });\n }, [shouldAllowRightElementFocus, topElement]);\n\n return (\n <StyledListItemTitle ref={wrapperRef}>\n <StyledListItemTitleLeftWrapper>\n <StyledListItemHeadTitleText\n $isEllipsis={!isOpen}\n ref={titleWrapperRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemTitleLeftWrapper>\n {topElement && (\n <StyledListItemTopRightElement\n data-right-element=\"true\"\n ref={topElementWrapperRef}\n onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n >\n {topElement}\n </StyledListItemTopRightElement>\n )}\n </StyledListItemTitle>\n );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n StyledListItemHeadTitleElement,\n StyledListItemHeadTitleText,\n StyledListItemTitle,\n StyledListItemTitleLeftWrapper,\n StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n rightElements?: IListItemRightElements;\n title: ReactNode;\n titleElement?: ReactNode;\n shouldShowMultilineTitle: boolean;\n isOpen: boolean;\n onResize?: (entries: ResizeObserverEntry[]) => void;\n onTitleWidthChange: (width: number) => void;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n rightElements,\n titleElement,\n title,\n shouldShowMultilineTitle,\n isOpen,\n onResize,\n onTitleWidthChange,\n}) => {\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const elementWrapperRef = useRef<HTMLDivElement>(null);\n const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const element = titleWrapperRef?.current;\n if (!element || typeof onResize !== 'function') return undefined;\n\n const resizeObserver = new ResizeObserver(onResize);\n resizeObserver.observe(element);\n\n return () => resizeObserver.disconnect();\n }, [onResize]);\n\n useEffect(() => {\n if (wrapperRef.current && elementWrapperRef.current) {\n const fullWidth = wrapperRef.current.clientWidth;\n const rightElementWidth = elementWrapperRef.current.clientWidth;\n const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n let width = fullWidth;\n\n if (rightElementWidth > 0) {\n width -= rightElementWidth + 8;\n }\n\n if (topElementWidth) {\n width -= topElementWidth + 12;\n }\n\n onTitleWidthChange(width);\n }\n }, [onTitleWidthChange]);\n\n const handlePreventClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n const topElement = useMemo(() => {\n if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n return (rightElements as unknown as IListItemRightElement).top;\n }\n\n return undefined;\n }, [rightElements]);\n\n const shouldPreventRightElementClick = useMemo(() => {\n if (topElement) {\n return getElementClickEvent(topElement);\n }\n\n return false;\n }, [topElement]);\n\n return (\n <StyledListItemTitle ref={wrapperRef}>\n <StyledListItemTitleLeftWrapper>\n <StyledListItemHeadTitleText\n $isEllipsis={!isOpen}\n ref={titleWrapperRef}\n $shouldShowMultilineTitle={shouldShowMultilineTitle}\n >\n {title}\n </StyledListItemHeadTitleText>\n <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n {titleElement}\n </StyledListItemHeadTitleElement>\n </StyledListItemTitleLeftWrapper>\n {topElement && (\n <StyledListItemTopRightElement\n data-right-element=\"true\"\n ref={topElementWrapperRef}\n onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n >\n {topElement}\n </StyledListItemTopRightElement>\n )}\n </StyledListItemTitle>\n );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"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","ignoreList":[]}
@@ -58,6 +58,13 @@ const MentionFinder = ({
58
58
  name
59
59
  }) => id.toLowerCase().includes(searchString) || info?.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString)) : members, [members, searchString]);
60
60
  const shouldRenderPopup = shouldShowPopup && !!fullMatch && filteredMembers.length > 0;
61
+ const handleContainerBlur = useCallback(event => {
62
+ const nextFocusedElement = event.relatedTarget;
63
+ const currentContainer = event.currentTarget;
64
+ if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !popupRef.current?.contains(nextFocusedElement)) {
65
+ setShouldShowPopup(false);
66
+ }
67
+ }, []);
61
68
  const handleKeyDown = useCallback(event => {
62
69
  const targetElement = event.target;
63
70
  if (isTextInputElement(targetElement)) {
@@ -340,7 +347,8 @@ const MentionFinder = ({
340
347
  onClick: handleOverlayClick
341
348
  })), overlayContainer) : null;
342
349
  return /*#__PURE__*/React.createElement(React.Fragment, null, overlayPortal, /*#__PURE__*/React.createElement(StyledMentionFinder, {
343
- className: "beta-chayns-mention-finder"
350
+ className: "beta-chayns-mention-finder",
351
+ onBlur: handleContainerBlur
344
352
  }, /*#__PURE__*/React.createElement(AnimatePresence, {
345
353
  initial: false
346
354
  }, shouldRenderPopup && /*#__PURE__*/React.createElement(StyledMotionMentionFinderPopup, {
@@ -1 +1 @@
1
- {"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","MentionFinderPopupAlignment","MentionFinderItem","StyledMentionFinder","StyledMentionFinderDragHandle","StyledMentionFinderDragHandleInner","StyledMentionFinderItemList","StyledMentionFinderOverlay","StyledMotionMentionFinderPopup","DRAG_CLOSE_THRESHOLD_IN_PX","isTextInputElement","element","tagName","toLowerCase","type","isContentEditable","findTouchByIdentifier","touchList","identifier","i","length","touch","item","MentionFinder","inputValue","members","onSelect","popupAlignment","enableDragHandle","dragCloseThresholdInPx","overlayContainerSelector","activeMember","setActiveMember","focusedIndex","setFocusedIndex","shouldShowPopup","setShouldShowPopup","popupRef","listRef","inputElementRef","dragStartYRef","hasTriggeredDragCloseRef","activePointerIdRef","activeTouchIdRef","isDraggingHandle","setIsDraggingHandle","dragOffset","setDragOffset","dragProgress","setDragProgress","overlayContainer","setOverlayContainer","fullMatch","searchString","regExpMatchArray","match","filteredMembers","filter","id","info","name","includes","replace","shouldRenderPopup","handleKeyDown","event","targetElement","target","current","key","preventDefault","children","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","window","requestAnimationFrame","handleMemberClick","handleMemberHover","isActiveMemberShown","some","items","map","createElement","isActive","onClick","onHover","activeElement","document","addEventListener","removeEventListener","closePopupViaDrag","handleOverlayClick","updateDragByClientY","clientY","closingDirectionMultiplier","Bottom","rawDelta","normalizedDelta","positiveDelta","Math","max","limitedDelta","min","handleDragPointerDown","pointerType","button","pointerId","currentTarget","setPointerCapture","handleDragPointerMove","hasClosed","releasePointerCapture","resetDragState","shouldClose","handleDragPointerUp","handleDragPointerCancel","handleDragTouchStart","touches","handleDragTouchMove","changedTouches","handleDragTouchEnd","handleDragTouchCancel","dragHandle","$alignment","$dragOffset","$dragProgress","$isDragging","onPointerDown","onPointerMove","onPointerUp","onPointerCancel","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","container","closest","body","overlayPortal","initial","animate","opacity","exit","Fragment","className","ref","height","y","$popupAlignment","transition","duration","Top","displayName"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n PointerEvent,\n TouchList,\n TouchEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport {\n StyledMentionFinder,\n StyledMentionFinderDragHandle,\n StyledMentionFinderDragHandleInner,\n StyledMentionFinderItemList,\n StyledMentionFinderOverlay,\n StyledMotionMentionFinderPopup,\n} from './MentionFinder.styles';\n\nexport type MentionMember = {\n id: string;\n info?: string;\n imageUrl: string;\n name: string;\n shouldShowRoundImage?: boolean;\n};\n\nexport type MentionFinderProps = {\n /**\n * The text from the input field\n */\n inputValue: string;\n /**\n * Members that can be selected\n */\n members: MentionMember[];\n /**\n * Function to be executed when a member is selected\n */\n onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n /**\n * Alignment of the popup\n */\n popupAlignment: MentionFinderPopupAlignment;\n /**\n * Enables the optional drag handle inside the popup\n */\n enableDragHandle?: boolean;\n /**\n * Threshold in pixels to drag to close the popup\n */\n dragCloseThresholdInPx?: number;\n /**\n * Selector for the container to render the overlay into (defaults to closest dialog, thread, page provider or tapp)\n */\n overlayContainerSelector?: string;\n};\n\nconst DRAG_CLOSE_THRESHOLD_IN_PX = 60;\n\nconst isTextInputElement = (\n element: HTMLElement | null,\n): element is HTMLInputElement | HTMLTextAreaElement => {\n if (!element) {\n return false;\n }\n\n const tagName = element.tagName.toLowerCase();\n\n return (\n (tagName === 'input' && (element as HTMLInputElement).type !== 'button') ||\n tagName === 'textarea' ||\n element.isContentEditable\n );\n};\n\nconst findTouchByIdentifier = (touchList: TouchList, identifier: number | null) => {\n if (identifier === null) {\n return null;\n }\n\n for (let i = 0; i < touchList.length; i += 1) {\n const touch = touchList.item(i);\n if (touch && touch.identifier === identifier) {\n return touch;\n }\n }\n\n return null;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n inputValue,\n members,\n onSelect,\n popupAlignment,\n enableDragHandle = false,\n dragCloseThresholdInPx = DRAG_CLOSE_THRESHOLD_IN_PX,\n overlayContainerSelector,\n}) => {\n const [activeMember, setActiveMember] = useState(members[0]);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const [shouldShowPopup, setShouldShowPopup] = useState(true);\n\n const popupRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const inputElementRef = useRef<HTMLElement | null>(null);\n const dragStartYRef = useRef<number | null>(null);\n const hasTriggeredDragCloseRef = useRef(false);\n const activePointerIdRef = useRef<number | null>(null);\n const activeTouchIdRef = useRef<number | null>(null);\n\n const [isDraggingHandle, setIsDraggingHandle] = useState(false);\n const [dragOffset, setDragOffset] = useState(0);\n const [dragProgress, setDragProgress] = useState(0);\n const [overlayContainer, setOverlayContainer] = useState<Element | null>(null);\n\n const [fullMatch, searchString] = useMemo(() => {\n // eslint-disable-next-line no-irregular-whitespace\n const regExpMatchArray = inputValue.match(/@(?!\\s)([^\\s​]*)/);\n\n return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n }, [inputValue]);\n\n const filteredMembers = useMemo(\n () =>\n searchString !== ''\n ? members.filter(\n ({ id, info, name }) =>\n id.toLowerCase().includes(searchString) ||\n info?.replace('chayns', '').toLowerCase().includes(searchString) ||\n name.toLowerCase().includes(searchString),\n )\n : members,\n [members, searchString],\n );\n\n const shouldRenderPopup = shouldShowPopup && !!fullMatch && filteredMembers.length > 0;\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const targetElement = event.target as HTMLElement | null;\n\n if (isTextInputElement(targetElement)) {\n inputElementRef.current = targetElement;\n }\n\n if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && shouldRenderPopup) {\n event.preventDefault();\n\n const children = listRef.current?.children;\n\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (event.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const member = filteredMembers[newIndex];\n\n setActiveMember(member);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (event.key === 'Enter' && shouldRenderPopup) {\n event.preventDefault();\n event.stopPropagation();\n\n if (fullMatch && activeMember) {\n onSelect({ fullMatch, member: activeMember });\n }\n } else if (event.key === 'Escape' && shouldRenderPopup) {\n event.preventDefault();\n event.stopPropagation();\n setShouldShowPopup(false);\n\n window.requestAnimationFrame(() => {\n inputElementRef.current?.focus();\n });\n }\n },\n [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect, shouldRenderPopup],\n );\n\n const handleMemberClick = useCallback(\n (member: MentionMember) => {\n if (fullMatch) {\n onSelect({ fullMatch, member });\n }\n },\n [fullMatch, onSelect],\n );\n\n const handleMemberHover = useCallback((member: MentionMember) => {\n setActiveMember(member);\n }, []);\n\n useEffect(() => {\n if (filteredMembers.length > 0) {\n const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n if (!isActiveMemberShown) {\n setActiveMember(filteredMembers[0]);\n }\n }\n }, [activeMember?.id, filteredMembers]);\n\n const items = useMemo(\n () =>\n filteredMembers.map((member) => (\n <MentionFinderItem\n isActive={member.id === activeMember?.id}\n key={member.id}\n member={member}\n onClick={handleMemberClick}\n onHover={handleMemberHover}\n />\n )),\n [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n );\n\n useEffect(() => {\n setDragOffset(0);\n setDragProgress(0);\n hasTriggeredDragCloseRef.current = false;\n setShouldShowPopup(true);\n }, [inputValue]);\n\n useEffect(() => {\n if (!shouldRenderPopup) {\n return;\n }\n\n const activeElement = document.activeElement as HTMLElement | null;\n\n if (isTextInputElement(activeElement)) {\n inputElementRef.current = activeElement;\n }\n }, [shouldRenderPopup]);\n\n useEffect(() => {\n if (shouldShowPopup) {\n window.addEventListener('keydown', handleKeyDown, true);\n }\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown, true);\n };\n }, [handleKeyDown, shouldShowPopup]);\n\n const closePopupViaDrag = useCallback(() => {\n if (hasTriggeredDragCloseRef.current) {\n return;\n }\n hasTriggeredDragCloseRef.current = true;\n setDragOffset(0);\n setDragProgress(0);\n setShouldShowPopup(false);\n }, []);\n\n const handleOverlayClick = useCallback(() => {\n closePopupViaDrag();\n }, [closePopupViaDrag]);\n\n const updateDragByClientY = useCallback(\n (clientY: number) => {\n if (dragStartYRef.current === null) {\n return false;\n }\n\n const closingDirectionMultiplier =\n popupAlignment === MentionFinderPopupAlignment.Bottom ? -1 : 1;\n const rawDelta = clientY - dragStartYRef.current;\n const normalizedDelta = rawDelta * closingDirectionMultiplier;\n const positiveDelta = Math.max(0, normalizedDelta);\n const limitedDelta = Math.min(positiveDelta, dragCloseThresholdInPx);\n\n setDragOffset(limitedDelta * closingDirectionMultiplier);\n setDragProgress(Math.min(positiveDelta / dragCloseThresholdInPx, 1));\n\n if (positiveDelta >= dragCloseThresholdInPx) {\n dragStartYRef.current = null;\n setIsDraggingHandle(false);\n closePopupViaDrag();\n return true;\n }\n\n return false;\n },\n [closePopupViaDrag, dragCloseThresholdInPx, popupAlignment],\n );\n\n const handleDragPointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch') {\n return;\n }\n if (event.pointerType === 'mouse' && event.button !== 0) {\n return;\n }\n if (dragStartYRef.current !== null) {\n return;\n }\n activePointerIdRef.current = event.pointerId;\n dragStartYRef.current = event.clientY;\n hasTriggeredDragCloseRef.current = false;\n setDragOffset(0);\n setDragProgress(0);\n setIsDraggingHandle(true);\n event.currentTarget.setPointerCapture(event.pointerId);\n event.stopPropagation();\n }, []);\n\n const handleDragPointerMove = useCallback(\n (event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n return;\n }\n if (dragStartYRef.current === null) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const hasClosed = updateDragByClientY(event.clientY);\n\n if (hasClosed) {\n event.currentTarget.releasePointerCapture(event.pointerId);\n activePointerIdRef.current = null;\n }\n },\n [updateDragByClientY],\n );\n\n const resetDragState = useCallback(\n (shouldClose = false) => {\n dragStartYRef.current = null;\n setIsDraggingHandle(false);\n if (shouldClose) {\n closePopupViaDrag();\n } else {\n setDragOffset(0);\n setDragProgress(0);\n }\n },\n [closePopupViaDrag],\n );\n\n const handleDragPointerUp = useCallback(\n (event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n return;\n }\n event.stopPropagation();\n const shouldClose = dragProgress >= 1;\n resetDragState(shouldClose);\n event.currentTarget.releasePointerCapture(event.pointerId);\n activePointerIdRef.current = null;\n },\n [dragProgress, resetDragState],\n );\n\n const handleDragPointerCancel = useCallback(\n (event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n return;\n }\n event.stopPropagation();\n resetDragState();\n event.currentTarget.releasePointerCapture(event.pointerId);\n activePointerIdRef.current = null;\n },\n [resetDragState],\n );\n\n const handleDragTouchStart = useCallback((event: TouchEvent<HTMLDivElement>) => {\n if (event.touches.length === 0 || dragStartYRef.current !== null) {\n return;\n }\n\n const touch = event.touches[0];\n\n if (!touch) return;\n\n activeTouchIdRef.current = touch.identifier;\n dragStartYRef.current = touch.clientY;\n hasTriggeredDragCloseRef.current = false;\n setDragOffset(0);\n setDragProgress(0);\n setIsDraggingHandle(true);\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n const handleDragTouchMove = useCallback(\n (event: TouchEvent<HTMLDivElement>) => {\n if (dragStartYRef.current === null || activeTouchIdRef.current === null) {\n return;\n }\n const touch =\n findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current) ??\n findTouchByIdentifier(event.touches, activeTouchIdRef.current);\n\n if (!touch) return;\n\n event.preventDefault();\n event.stopPropagation();\n const hasClosed = updateDragByClientY(touch.clientY);\n if (hasClosed) {\n activeTouchIdRef.current = null;\n }\n },\n [updateDragByClientY],\n );\n\n const handleDragTouchEnd = useCallback(\n (event: TouchEvent<HTMLDivElement>) => {\n if (activeTouchIdRef.current === null) return;\n\n const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);\n\n if (!touch) return;\n\n event.preventDefault();\n event.stopPropagation();\n activeTouchIdRef.current = null;\n const shouldClose = dragProgress >= 1;\n resetDragState(shouldClose);\n },\n [dragProgress, resetDragState],\n );\n\n const handleDragTouchCancel = useCallback(\n (event: TouchEvent<HTMLDivElement>) => {\n if (activeTouchIdRef.current === null) return;\n\n const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);\n\n if (!touch) return;\n\n event.preventDefault();\n event.stopPropagation();\n activeTouchIdRef.current = null;\n resetDragState();\n },\n [resetDragState],\n );\n\n const dragHandle = useMemo(() => {\n if (!enableDragHandle) {\n return null;\n }\n\n return (\n <StyledMentionFinderDragHandle $alignment={popupAlignment}>\n <StyledMentionFinderDragHandleInner\n $alignment={popupAlignment}\n $dragOffset={dragOffset}\n $dragProgress={dragProgress}\n $isDragging={isDraggingHandle}\n onPointerDown={handleDragPointerDown}\n onPointerMove={handleDragPointerMove}\n onPointerUp={handleDragPointerUp}\n onPointerCancel={handleDragPointerCancel}\n onTouchStart={handleDragTouchStart}\n onTouchMove={handleDragTouchMove}\n onTouchEnd={handleDragTouchEnd}\n onTouchCancel={handleDragTouchCancel}\n />\n </StyledMentionFinderDragHandle>\n );\n }, [\n enableDragHandle,\n popupAlignment,\n dragOffset,\n dragProgress,\n isDraggingHandle,\n handleDragPointerDown,\n handleDragPointerMove,\n handleDragPointerUp,\n handleDragPointerCancel,\n handleDragTouchStart,\n handleDragTouchMove,\n handleDragTouchEnd,\n handleDragTouchCancel,\n ]);\n\n useEffect(() => {\n if (!enableDragHandle || !shouldRenderPopup) {\n setOverlayContainer(null);\n return;\n }\n\n const container = popupRef.current?.closest(\n overlayContainerSelector ?? '.dialog-inner, .chayns-threads, .page-provider, .tapp',\n );\n\n if (container) {\n setOverlayContainer(container);\n return;\n }\n\n if (typeof document !== 'undefined') {\n setOverlayContainer(document.body);\n }\n }, [enableDragHandle, overlayContainerSelector, shouldRenderPopup]);\n\n const overlayPortal =\n overlayContainer && enableDragHandle\n ? createPortal(\n <AnimatePresence initial={false}>\n {shouldRenderPopup && (\n <StyledMentionFinderOverlay\n key=\"mention-finder-overlay\"\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n onClick={handleOverlayClick}\n />\n )}\n </AnimatePresence>,\n overlayContainer,\n )\n : null;\n\n return (\n <>\n {overlayPortal}\n <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n <AnimatePresence initial={false}>\n {shouldRenderPopup && (\n <StyledMotionMentionFinderPopup\n ref={popupRef}\n animate={{\n height: 'auto',\n opacity: 1,\n y: dragOffset,\n }}\n className=\"prevent-lose-focus\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $popupAlignment={popupAlignment}\n $isDragging={enableDragHandle}\n transition={{ duration: 0.15 }}\n tabIndex={0}\n >\n {enableDragHandle &&\n popupAlignment === MentionFinderPopupAlignment.Top &&\n dragHandle}\n <StyledMentionFinderItemList ref={listRef}>\n {items}\n </StyledMentionFinderItemList>\n {enableDragHandle &&\n popupAlignment === MentionFinderPopupAlignment.Bottom &&\n dragHandle}\n </StyledMotionMentionFinderPopup>\n )}\n </AnimatePresence>\n </StyledMentionFinder>\n </>\n );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"MentionFinder.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","MentionFinderPopupAlignment","MentionFinderItem","StyledMentionFinder","StyledMentionFinderDragHandle","StyledMentionFinderDragHandleInner","StyledMentionFinderItemList","StyledMentionFinderOverlay","StyledMotionMentionFinderPopup","DRAG_CLOSE_THRESHOLD_IN_PX","isTextInputElement","element","tagName","toLowerCase","type","isContentEditable","findTouchByIdentifier","touchList","identifier","i","length","touch","item","MentionFinder","inputValue","members","onSelect","popupAlignment","enableDragHandle","dragCloseThresholdInPx","overlayContainerSelector","activeMember","setActiveMember","focusedIndex","setFocusedIndex","shouldShowPopup","setShouldShowPopup","popupRef","listRef","inputElementRef","dragStartYRef","hasTriggeredDragCloseRef","activePointerIdRef","activeTouchIdRef","isDraggingHandle","setIsDraggingHandle","dragOffset","setDragOffset","dragProgress","setDragProgress","overlayContainer","setOverlayContainer","fullMatch","searchString","regExpMatchArray","match","filteredMembers","filter","id","info","name","includes","replace","shouldRenderPopup","handleContainerBlur","event","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","current","handleKeyDown","targetElement","target","key","preventDefault","children","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","window","requestAnimationFrame","handleMemberClick","handleMemberHover","isActiveMemberShown","some","items","map","createElement","isActive","onClick","onHover","activeElement","document","addEventListener","removeEventListener","closePopupViaDrag","handleOverlayClick","updateDragByClientY","clientY","closingDirectionMultiplier","Bottom","rawDelta","normalizedDelta","positiveDelta","Math","max","limitedDelta","min","handleDragPointerDown","pointerType","button","pointerId","setPointerCapture","handleDragPointerMove","hasClosed","releasePointerCapture","resetDragState","shouldClose","handleDragPointerUp","handleDragPointerCancel","handleDragTouchStart","touches","handleDragTouchMove","changedTouches","handleDragTouchEnd","handleDragTouchCancel","dragHandle","$alignment","$dragOffset","$dragProgress","$isDragging","onPointerDown","onPointerMove","onPointerUp","onPointerCancel","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","container","closest","body","overlayPortal","initial","animate","opacity","exit","Fragment","className","onBlur","ref","height","y","$popupAlignment","transition","duration","Top","displayName"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n PointerEvent,\n TouchList,\n TouchEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport {\n StyledMentionFinder,\n StyledMentionFinderDragHandle,\n StyledMentionFinderDragHandleInner,\n StyledMentionFinderItemList,\n StyledMentionFinderOverlay,\n StyledMotionMentionFinderPopup,\n} from './MentionFinder.styles';\n\nexport type MentionMember = {\n id: string;\n info?: string;\n imageUrl: string;\n name: string;\n shouldShowRoundImage?: boolean;\n};\n\nexport type MentionFinderProps = {\n /**\n * The text from the input field\n */\n inputValue: string;\n /**\n * Members that can be selected\n */\n members: MentionMember[];\n /**\n * Function to be executed when a member is selected\n */\n onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n /**\n * Alignment of the popup\n */\n popupAlignment: MentionFinderPopupAlignment;\n /**\n * Enables the optional drag handle inside the popup\n */\n enableDragHandle?: boolean;\n /**\n * Threshold in pixels to drag to close the popup\n */\n dragCloseThresholdInPx?: number;\n /**\n * Selector for the container to render the overlay into (defaults to closest dialog, thread, page provider or tapp)\n */\n overlayContainerSelector?: string;\n};\n\nconst DRAG_CLOSE_THRESHOLD_IN_PX = 60;\n\nconst isTextInputElement = (\n element: HTMLElement | null,\n): element is HTMLInputElement | HTMLTextAreaElement => {\n if (!element) {\n return false;\n }\n\n const tagName = element.tagName.toLowerCase();\n\n return (\n (tagName === 'input' && (element as HTMLInputElement).type !== 'button') ||\n tagName === 'textarea' ||\n element.isContentEditable\n );\n};\n\nconst findTouchByIdentifier = (touchList: TouchList, identifier: number | null) => {\n if (identifier === null) {\n return null;\n }\n\n for (let i = 0; i < touchList.length; i += 1) {\n const touch = touchList.item(i);\n if (touch && touch.identifier === identifier) {\n return touch;\n }\n }\n\n return null;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n inputValue,\n members,\n onSelect,\n popupAlignment,\n enableDragHandle = false,\n dragCloseThresholdInPx = DRAG_CLOSE_THRESHOLD_IN_PX,\n overlayContainerSelector,\n}) => {\n const [activeMember, setActiveMember] = useState(members[0]);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const [shouldShowPopup, setShouldShowPopup] = useState(true);\n\n const popupRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n const inputElementRef = useRef<HTMLElement | null>(null);\n const dragStartYRef = useRef<number | null>(null);\n const hasTriggeredDragCloseRef = useRef(false);\n const activePointerIdRef = useRef<number | null>(null);\n const activeTouchIdRef = useRef<number | null>(null);\n\n const [isDraggingHandle, setIsDraggingHandle] = useState(false);\n const [dragOffset, setDragOffset] = useState(0);\n const [dragProgress, setDragProgress] = useState(0);\n const [overlayContainer, setOverlayContainer] = useState<Element | null>(null);\n\n const [fullMatch, searchString] = useMemo(() => {\n // eslint-disable-next-line no-irregular-whitespace\n const regExpMatchArray = inputValue.match(/@(?!\\s)([^\\s​]*)/);\n\n return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n }, [inputValue]);\n\n const filteredMembers = useMemo(\n () =>\n searchString !== ''\n ? members.filter(\n ({ id, info, name }) =>\n id.toLowerCase().includes(searchString) ||\n info?.replace('chayns', '').toLowerCase().includes(searchString) ||\n name.toLowerCase().includes(searchString),\n )\n : members,\n [members, searchString],\n );\n\n const shouldRenderPopup = shouldShowPopup && !!fullMatch && filteredMembers.length > 0;\n\n const handleContainerBlur = useCallback((event: React.FocusEvent<HTMLDivElement>) => {\n const nextFocusedElement = event.relatedTarget as Node | null;\n const currentContainer = event.currentTarget as HTMLElement;\n\n if (\n !nextFocusedElement ||\n (!currentContainer.contains(nextFocusedElement) &&\n !popupRef.current?.contains(nextFocusedElement))\n ) {\n setShouldShowPopup(false);\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n const targetElement = event.target as HTMLElement | null;\n\n if (isTextInputElement(targetElement)) {\n inputElementRef.current = targetElement;\n }\n\n if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && shouldRenderPopup) {\n event.preventDefault();\n\n const children = listRef.current?.children;\n\n if (children && children.length > 0) {\n const newIndex =\n focusedIndex !== null\n ? (focusedIndex +\n (event.key === 'ArrowUp' ? -1 : 1) +\n children.length) %\n children.length\n : 0;\n\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n setFocusedIndex(newIndex);\n\n const member = filteredMembers[newIndex];\n\n setActiveMember(member);\n\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n newElement.focus();\n }\n } else if (event.key === 'Enter' && shouldRenderPopup) {\n event.preventDefault();\n event.stopPropagation();\n\n if (fullMatch && activeMember) {\n onSelect({ fullMatch, member: activeMember });\n }\n } else if (event.key === 'Escape' && shouldRenderPopup) {\n event.preventDefault();\n event.stopPropagation();\n setShouldShowPopup(false);\n\n window.requestAnimationFrame(() => {\n inputElementRef.current?.focus();\n });\n }\n },\n [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect, shouldRenderPopup],\n );\n\n const handleMemberClick = useCallback(\n (member: MentionMember) => {\n if (fullMatch) {\n onSelect({ fullMatch, member });\n }\n },\n [fullMatch, onSelect],\n );\n\n const handleMemberHover = useCallback((member: MentionMember) => {\n setActiveMember(member);\n }, []);\n\n useEffect(() => {\n if (filteredMembers.length > 0) {\n const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n if (!isActiveMemberShown) {\n setActiveMember(filteredMembers[0]);\n }\n }\n }, [activeMember?.id, filteredMembers]);\n\n const items = useMemo(\n () =>\n filteredMembers.map((member) => (\n <MentionFinderItem\n isActive={member.id === activeMember?.id}\n key={member.id}\n member={member}\n onClick={handleMemberClick}\n onHover={handleMemberHover}\n />\n )),\n [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n );\n\n useEffect(() => {\n setDragOffset(0);\n setDragProgress(0);\n hasTriggeredDragCloseRef.current = false;\n setShouldShowPopup(true);\n }, [inputValue]);\n\n useEffect(() => {\n if (!shouldRenderPopup) {\n return;\n }\n\n const activeElement = document.activeElement as HTMLElement | null;\n\n if (isTextInputElement(activeElement)) {\n inputElementRef.current = activeElement;\n }\n }, [shouldRenderPopup]);\n\n useEffect(() => {\n if (shouldShowPopup) {\n window.addEventListener('keydown', handleKeyDown, true);\n }\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown, true);\n };\n }, [handleKeyDown, shouldShowPopup]);\n\n const closePopupViaDrag = useCallback(() => {\n if (hasTriggeredDragCloseRef.current) {\n return;\n }\n hasTriggeredDragCloseRef.current = true;\n setDragOffset(0);\n setDragProgress(0);\n setShouldShowPopup(false);\n }, []);\n\n const handleOverlayClick = useCallback(() => {\n closePopupViaDrag();\n }, [closePopupViaDrag]);\n\n const updateDragByClientY = useCallback(\n (clientY: number) => {\n if (dragStartYRef.current === null) {\n return false;\n }\n\n const closingDirectionMultiplier =\n popupAlignment === MentionFinderPopupAlignment.Bottom ? -1 : 1;\n const rawDelta = clientY - dragStartYRef.current;\n const normalizedDelta = rawDelta * closingDirectionMultiplier;\n const positiveDelta = Math.max(0, normalizedDelta);\n const limitedDelta = Math.min(positiveDelta, dragCloseThresholdInPx);\n\n setDragOffset(limitedDelta * closingDirectionMultiplier);\n setDragProgress(Math.min(positiveDelta / dragCloseThresholdInPx, 1));\n\n if (positiveDelta >= dragCloseThresholdInPx) {\n dragStartYRef.current = null;\n setIsDraggingHandle(false);\n closePopupViaDrag();\n return true;\n }\n\n return false;\n },\n [closePopupViaDrag, dragCloseThresholdInPx, popupAlignment],\n );\n\n const handleDragPointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch') {\n return;\n }\n if (event.pointerType === 'mouse' && event.button !== 0) {\n return;\n }\n if (dragStartYRef.current !== null) {\n return;\n }\n activePointerIdRef.current = event.pointerId;\n dragStartYRef.current = event.clientY;\n hasTriggeredDragCloseRef.current = false;\n setDragOffset(0);\n setDragProgress(0);\n setIsDraggingHandle(true);\n event.currentTarget.setPointerCapture(event.pointerId);\n event.stopPropagation();\n }, []);\n\n const handleDragPointerMove = useCallback(\n (event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n return;\n }\n if (dragStartYRef.current === null) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const hasClosed = updateDragByClientY(event.clientY);\n\n if (hasClosed) {\n event.currentTarget.releasePointerCapture(event.pointerId);\n activePointerIdRef.current = null;\n }\n },\n [updateDragByClientY],\n );\n\n const resetDragState = useCallback(\n (shouldClose = false) => {\n dragStartYRef.current = null;\n setIsDraggingHandle(false);\n if (shouldClose) {\n closePopupViaDrag();\n } else {\n setDragOffset(0);\n setDragProgress(0);\n }\n },\n [closePopupViaDrag],\n );\n\n const handleDragPointerUp = useCallback(\n (event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n return;\n }\n event.stopPropagation();\n const shouldClose = dragProgress >= 1;\n resetDragState(shouldClose);\n event.currentTarget.releasePointerCapture(event.pointerId);\n activePointerIdRef.current = null;\n },\n [dragProgress, resetDragState],\n );\n\n const handleDragPointerCancel = useCallback(\n (event: PointerEvent<HTMLDivElement>) => {\n if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n return;\n }\n event.stopPropagation();\n resetDragState();\n event.currentTarget.releasePointerCapture(event.pointerId);\n activePointerIdRef.current = null;\n },\n [resetDragState],\n );\n\n const handleDragTouchStart = useCallback((event: TouchEvent<HTMLDivElement>) => {\n if (event.touches.length === 0 || dragStartYRef.current !== null) {\n return;\n }\n\n const touch = event.touches[0];\n\n if (!touch) return;\n\n activeTouchIdRef.current = touch.identifier;\n dragStartYRef.current = touch.clientY;\n hasTriggeredDragCloseRef.current = false;\n setDragOffset(0);\n setDragProgress(0);\n setIsDraggingHandle(true);\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n const handleDragTouchMove = useCallback(\n (event: TouchEvent<HTMLDivElement>) => {\n if (dragStartYRef.current === null || activeTouchIdRef.current === null) {\n return;\n }\n const touch =\n findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current) ??\n findTouchByIdentifier(event.touches, activeTouchIdRef.current);\n\n if (!touch) return;\n\n event.preventDefault();\n event.stopPropagation();\n const hasClosed = updateDragByClientY(touch.clientY);\n if (hasClosed) {\n activeTouchIdRef.current = null;\n }\n },\n [updateDragByClientY],\n );\n\n const handleDragTouchEnd = useCallback(\n (event: TouchEvent<HTMLDivElement>) => {\n if (activeTouchIdRef.current === null) return;\n\n const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);\n\n if (!touch) return;\n\n event.preventDefault();\n event.stopPropagation();\n activeTouchIdRef.current = null;\n const shouldClose = dragProgress >= 1;\n resetDragState(shouldClose);\n },\n [dragProgress, resetDragState],\n );\n\n const handleDragTouchCancel = useCallback(\n (event: TouchEvent<HTMLDivElement>) => {\n if (activeTouchIdRef.current === null) return;\n\n const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);\n\n if (!touch) return;\n\n event.preventDefault();\n event.stopPropagation();\n activeTouchIdRef.current = null;\n resetDragState();\n },\n [resetDragState],\n );\n\n const dragHandle = useMemo(() => {\n if (!enableDragHandle) {\n return null;\n }\n\n return (\n <StyledMentionFinderDragHandle $alignment={popupAlignment}>\n <StyledMentionFinderDragHandleInner\n $alignment={popupAlignment}\n $dragOffset={dragOffset}\n $dragProgress={dragProgress}\n $isDragging={isDraggingHandle}\n onPointerDown={handleDragPointerDown}\n onPointerMove={handleDragPointerMove}\n onPointerUp={handleDragPointerUp}\n onPointerCancel={handleDragPointerCancel}\n onTouchStart={handleDragTouchStart}\n onTouchMove={handleDragTouchMove}\n onTouchEnd={handleDragTouchEnd}\n onTouchCancel={handleDragTouchCancel}\n />\n </StyledMentionFinderDragHandle>\n );\n }, [\n enableDragHandle,\n popupAlignment,\n dragOffset,\n dragProgress,\n isDraggingHandle,\n handleDragPointerDown,\n handleDragPointerMove,\n handleDragPointerUp,\n handleDragPointerCancel,\n handleDragTouchStart,\n handleDragTouchMove,\n handleDragTouchEnd,\n handleDragTouchCancel,\n ]);\n\n useEffect(() => {\n if (!enableDragHandle || !shouldRenderPopup) {\n setOverlayContainer(null);\n return;\n }\n\n const container = popupRef.current?.closest(\n overlayContainerSelector ?? '.dialog-inner, .chayns-threads, .page-provider, .tapp',\n );\n\n if (container) {\n setOverlayContainer(container);\n return;\n }\n\n if (typeof document !== 'undefined') {\n setOverlayContainer(document.body);\n }\n }, [enableDragHandle, overlayContainerSelector, shouldRenderPopup]);\n\n const overlayPortal =\n overlayContainer && enableDragHandle\n ? createPortal(\n <AnimatePresence initial={false}>\n {shouldRenderPopup && (\n <StyledMentionFinderOverlay\n key=\"mention-finder-overlay\"\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n onClick={handleOverlayClick}\n />\n )}\n </AnimatePresence>,\n overlayContainer,\n )\n : null;\n\n return (\n <>\n {overlayPortal}\n <StyledMentionFinder\n className=\"beta-chayns-mention-finder\"\n onBlur={handleContainerBlur}\n >\n <AnimatePresence initial={false}>\n {shouldRenderPopup && (\n <StyledMotionMentionFinderPopup\n ref={popupRef}\n animate={{\n height: 'auto',\n opacity: 1,\n y: dragOffset,\n }}\n className=\"prevent-lose-focus\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $popupAlignment={popupAlignment}\n $isDragging={enableDragHandle}\n transition={{ duration: 0.15 }}\n tabIndex={0}\n >\n {enableDragHandle &&\n popupAlignment === MentionFinderPopupAlignment.Top &&\n dragHandle}\n <StyledMentionFinderItemList ref={listRef}>\n {items}\n </StyledMentionFinderItemList>\n {enableDragHandle &&\n popupAlignment === MentionFinderPopupAlignment.Bottom &&\n dragHandle}\n </StyledMotionMentionFinderPopup>\n )}\n </AnimatePresence>\n </StyledMentionFinder>\n </>\n );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}
@@ -9,6 +9,12 @@ export const StyledMultiActionButton = styled(motion.div)`
9
9
  position: relative;
10
10
  transition: width 0.2s ease;
11
11
  width: fit-content;
12
+
13
+ /* Keep normal clipping, but let focus-ring paint outside while focused. */
14
+ &:focus-within {
15
+ overflow: visible;
16
+ z-index: 1;
17
+ }
12
18
  `;
13
19
  export const StyledSeparator = styled.span`
14
20
  align-self: stretch;
@@ -1 +1 @@
1
- {"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div","StyledSeparator","span","$gapColor","theme","$isHidden"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n align-items: stretch;\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease;\n width: fit-content;\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n $gapColor?: string;\n $isHidden?: boolean;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n align-self: stretch;\n background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n flex: 0 0 ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n overflow: hidden;\n transition:\n flex-basis 0.2s ease,\n opacity 0.2s ease,\n width 0.2s ease;\n width: ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,IAAIC,KAAK,GAAG,oBAAoB,CAAC,IAAI,MAAM;AAChG,gBAAgB,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACtD,eAAe,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"MultiActionButton.styles.js","names":["motion","styled","StyledMultiActionButton","div","StyledSeparator","span","$gapColor","theme","$isHidden"],"sources":["../../../../src/components/multi-action-button/MultiActionButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMultiActionButton = styled(motion.div)`\n align-items: stretch;\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease;\n width: fit-content;\n\n /* Keep normal clipping, but let focus-ring paint outside while focused. */\n &:focus-within {\n overflow: visible;\n z-index: 1;\n }\n`;\n\ntype StyledSeparatorProps = WithTheme<{\n $gapColor?: string;\n $isHidden?: boolean;\n}>;\n\nexport const StyledSeparator = styled.span<StyledSeparatorProps>`\n align-self: stretch;\n background: ${({ $gapColor, theme }) => $gapColor || theme?.['cw-body-background'] || '#fff'};\n flex: 0 0 ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};\n overflow: hidden;\n transition:\n flex-basis 0.2s ease,\n opacity 0.2s ease,\n width 0.2s ease;\n width: ${({ $isHidden }) => ($isHidden ? 0 : 1)}px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,eAAe,GAAGH,MAAM,CAACI,IAA0B;AAChE;AACA,kBAAkB,CAAC;EAAEC,SAAS;EAAEC;AAAM,CAAC,KAAKD,SAAS,IAAIC,KAAK,GAAG,oBAAoB,CAAC,IAAI,MAAM;AAChG,gBAAgB,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACtD,eAAe,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACrD;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD,CAAC","ignoreList":[]}
@@ -372,6 +372,16 @@ const SearchBox = /*#__PURE__*/forwardRef(({
372
372
  tagInputRef.current?.blur();
373
373
  return hasFocusRef.current && isTouch;
374
374
  }, [isTouch]);
375
+ const handleContainerBlur = useCallback(event => {
376
+ const nextFocusedElement = event.relatedTarget;
377
+ const currentContainer = event.currentTarget;
378
+
379
+ // Check if focus is moving outside the SearchBox container
380
+ // Also check the dropdown content (contentRef) since it's rendered in a portal
381
+ if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !contentRef.current?.contains(nextFocusedElement)) {
382
+ handleClose();
383
+ }
384
+ }, [handleClose]);
375
385
 
376
386
  /**
377
387
  * This function handles the item selection
@@ -536,7 +546,8 @@ const SearchBox = /*#__PURE__*/forwardRef(({
536
546
  const shouldShowDropdown = shouldShowBody && (matchingListsItems.length !== 0 || !!hintText) && (value.trim() !== '' || shouldShowContentOnEmptyInput);
537
547
  return useMemo(() => /*#__PURE__*/React.createElement(StyledSearchBox, {
538
548
  ref: boxRef,
539
- key: `search-box-${uuid}`
549
+ key: `search-box-${uuid}`,
550
+ onBlur: handleContainerBlur
540
551
  }, /*#__PURE__*/React.createElement("div", {
541
552
  id: `search_box_input${uuid}`
542
553
  }, tagInputSettings ? /*#__PURE__*/React.createElement(TagInput, {