@chayns-components/core 5.0.0-beta.1237 → 5.0.0-beta.1239

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.
@@ -23,6 +23,7 @@ const StyledMotionMentionFinderPopup = exports.StyledMotionMentionFinderPopup =
23
23
  overflow-y: scroll;
24
24
  position: absolute;
25
25
  width: 100%;
26
+ z-index: 5;
26
27
 
27
28
  ${({
28
29
  $popupAlignment
@@ -1 +1 @@
1
- {"version":3,"file":"MentionFinder.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_mentionFinder","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMentionFinder","exports","styled","div","StyledMotionMentionFinderPopup","motion","theme","$popupAlignment","MentionFinderPopupAlignment","Bottom","css","Top","undefined"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{ $popupAlignment: MentionFinderPopupAlignment }>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['000']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n left: 0;\n max-height: 275px;\n overflow-y: scroll;\n position: absolute;\n width: 100%;\n\n ${({ $popupAlignment }) => {\n switch ($popupAlignment) {\n case MentionFinderPopupAlignment.Bottom:\n return css`\n top: 0;\n `;\n case MentionFinderPopupAlignment.Top:\n return css`\n bottom: 0;\n `;\n default:\n return undefined;\n }\n }}\n\n // Styles for custom scrollbar\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n );\n border-radius: 20px;\n }\n\n // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n // only supported in Firefox:\n * {\n scrollbar-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n )\n transparent;\n scrollbar-width: thin;\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAA4E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGrE,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA,CAAC;AAIM,MAAMC,8BAA8B,GAAAH,OAAA,CAAAG,8BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAgC;AAC/F,wBAAwB,CAAC;EAAEG;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgB,CAAC,KAAK;EACvB,QAAQA,eAAe;IACnB,KAAKC,0CAA2B,CAACC,MAAM;MACnC,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,0CAA2B,CAACG,GAAG;MAChC,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOE,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEN;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"MentionFinder.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_mentionFinder","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMentionFinder","exports","styled","div","StyledMotionMentionFinderPopup","motion","theme","$popupAlignment","MentionFinderPopupAlignment","Bottom","css","Top","undefined"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{ $popupAlignment: MentionFinderPopupAlignment }>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['000']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n left: 0;\n max-height: 275px;\n overflow-y: scroll;\n position: absolute;\n width: 100%;\n z-index: 5;\n\n ${({ $popupAlignment }) => {\n switch ($popupAlignment) {\n case MentionFinderPopupAlignment.Bottom:\n return css`\n top: 0;\n `;\n case MentionFinderPopupAlignment.Top:\n return css`\n bottom: 0;\n `;\n default:\n return undefined;\n }\n }}\n\n // Styles for custom scrollbar\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n );\n border-radius: 20px;\n }\n\n // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n // only supported in Firefox:\n * {\n scrollbar-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n )\n transparent;\n scrollbar-width: thin;\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAA4E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGrE,MAAMkB,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC7C;AACA,CAAC;AAIM,MAAMC,8BAA8B,GAAAH,OAAA,CAAAG,8BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAgC;AAC/F,wBAAwB,CAAC;EAAEG;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgB,CAAC,KAAK;EACvB,QAAQA,eAAe;IACnB,KAAKC,0CAA2B,CAACC,MAAM;MACnC,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,0CAA2B,CAACG,GAAG;MAChC,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOE,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEN;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -76,7 +76,7 @@ const SelectButton = ({
76
76
  // Ignore because there is no type
77
77
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
78
78
  // @ts-ignore
79
- onSelect(result.result.map(Number));
79
+ onSelect(result.result);
80
80
  }
81
81
  });
82
82
  };
@@ -1 +1 @@
1
- {"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","createDialog","undefined","type","DialogType","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","map","Number","createElement","StyledSelectButton","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName","_default","exports"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /**\n * Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n */\n additionalText?: string;\n /**\n * The text that should be displayed inside the button.\n */\n buttonText: string;\n /**\n * Whether the button should be disabled.\n */\n isDisabled?: boolean;\n /**\n * A list of item that could be selected.\n */\n list: SelectButtonItem[];\n /**\n * The maximum number of items displayed in the button text.\n */\n maxDisplayedItems?: number;\n /**\n * Function to be executed after an item is selected.\n */\n onSelect?: (ids: number[]) => void;\n /**\n * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n */\n selectAllText?: string;\n /**\n * The id of an item that should be preselected.\n */\n selectedItemIds?: number[];\n /**\n * Whether more than one item should be selectable.\n */\n shouldAllowMultiSelect?: boolean;\n /**\n * Whether the button text should be displayed also if items are selected.\n */\n shouldShowButtonTextWithSelection?: boolean;\n /**\n * Whether the search should be displayed inside the dialog.\n */\n shouldShowSearch?: boolean;\n /**\n * The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect((result.result as string[]).map(Number));\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","createDialog","undefined","type","DialogType","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","createElement","StyledSelectButton","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName","_default","exports"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /**\n * Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n */\n additionalText?: string;\n /**\n * The text that should be displayed inside the button.\n */\n buttonText: string;\n /**\n * Whether the button should be disabled.\n */\n isDisabled?: boolean;\n /**\n * A list of item that could be selected.\n */\n list: SelectButtonItem[];\n /**\n * The maximum number of items displayed in the button text.\n */\n maxDisplayedItems?: number;\n /**\n * Function to be executed after an item is selected.\n */\n onSelect?: (ids: (number | string)[]) => void;\n /**\n * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n */\n selectAllText?: string;\n /**\n * The id of an item that should be preselected.\n */\n selectedItemIds?: (number | string)[];\n /**\n * Whether more than one item should be selectable.\n */\n shouldAllowMultiSelect?: boolean;\n /**\n * Whether the button text should be displayed also if items are selected.\n */\n shouldShowButtonTextWithSelection?: boolean;\n /**\n * Whether the search should be displayed inside the dialog.\n */\n shouldShowSearch?: boolean;\n /**\n * The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect(result.result);\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number;\n}\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number | string;\n}\n"],"mappings":"","ignoreList":[]}
@@ -16,6 +16,7 @@ export const StyledMotionMentionFinderPopup = styled(motion.div)`
16
16
  overflow-y: scroll;
17
17
  position: absolute;
18
18
  width: 100%;
19
+ z-index: 5;
19
20
 
20
21
  ${({
21
22
  $popupAlignment
@@ -1 +1 @@
1
- {"version":3,"file":"MentionFinder.styles.js","names":["motion","styled","css","MentionFinderPopupAlignment","StyledMentionFinder","div","StyledMotionMentionFinderPopup","theme","$popupAlignment","Bottom","Top","undefined"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{ $popupAlignment: MentionFinderPopupAlignment }>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['000']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n left: 0;\n max-height: 275px;\n overflow-y: scroll;\n position: absolute;\n width: 100%;\n\n ${({ $popupAlignment }) => {\n switch ($popupAlignment) {\n case MentionFinderPopupAlignment.Bottom:\n return css`\n top: 0;\n `;\n case MentionFinderPopupAlignment.Top:\n return css`\n bottom: 0;\n `;\n default:\n return undefined;\n }\n }}\n\n // Styles for custom scrollbar\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n );\n border-radius: 20px;\n }\n\n // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n // only supported in Firefox:\n * {\n scrollbar-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n )\n transparent;\n scrollbar-width: thin;\n }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+BAA+B;AAG3E,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAAG;AAC7C;AACA,CAAC;AAID,OAAO,MAAMC,8BAA8B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAgC;AAC/F,wBAAwB,CAAC;EAAEE;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgB,CAAC,KAAK;EACvB,QAAQA,eAAe;IACnB,KAAKL,2BAA2B,CAACM,MAAM;MACnC,OAAOP,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,2BAA2B,CAACO,GAAG;MAChC,OAAOR,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOS,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEJ;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"MentionFinder.styles.js","names":["motion","styled","css","MentionFinderPopupAlignment","StyledMentionFinder","div","StyledMotionMentionFinderPopup","theme","$popupAlignment","Bottom","Top","undefined"],"sources":["../../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMentionFinder = styled.div`\n position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<{ $popupAlignment: MentionFinderPopupAlignment }>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['000']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n left: 0;\n max-height: 275px;\n overflow-y: scroll;\n position: absolute;\n width: 100%;\n z-index: 5;\n\n ${({ $popupAlignment }) => {\n switch ($popupAlignment) {\n case MentionFinderPopupAlignment.Bottom:\n return css`\n top: 0;\n `;\n case MentionFinderPopupAlignment.Top:\n return css`\n bottom: 0;\n `;\n default:\n return undefined;\n }\n }}\n\n // Styles for custom scrollbar\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n );\n border-radius: 20px;\n }\n\n // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n // only supported in Firefox:\n * {\n scrollbar-color: rgba(\n ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n 0.15\n )\n transparent;\n scrollbar-width: thin;\n }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+BAA+B;AAG3E,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAAG;AAC7C;AACA,CAAC;AAID,OAAO,MAAMC,8BAA8B,GAAGL,MAAM,CAACD,MAAM,CAACK,GAAG,CAAgC;AAC/F,wBAAwB,CAAC;EAAEE;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgB,CAAC,KAAK;EACvB,QAAQA,eAAe;IACnB,KAAKL,2BAA2B,CAACM,MAAM;MACnC,OAAOP,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,2BAA2B,CAACO,GAAG;MAChC,OAAOR,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOS,SAAS;EACxB;AACJ,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEJ;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
@@ -68,7 +68,7 @@ const SelectButton = ({
68
68
  // Ignore because there is no type
69
69
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
70
70
  // @ts-ignore
71
- onSelect(result.result.map(Number));
71
+ onSelect(result.result);
72
72
  }
73
73
  });
74
74
  };
@@ -1 +1 @@
1
- {"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","undefined","type","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","map","Number","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /**\n * Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n */\n additionalText?: string;\n /**\n * The text that should be displayed inside the button.\n */\n buttonText: string;\n /**\n * Whether the button should be disabled.\n */\n isDisabled?: boolean;\n /**\n * A list of item that could be selected.\n */\n list: SelectButtonItem[];\n /**\n * The maximum number of items displayed in the button text.\n */\n maxDisplayedItems?: number;\n /**\n * Function to be executed after an item is selected.\n */\n onSelect?: (ids: number[]) => void;\n /**\n * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n */\n selectAllText?: string;\n /**\n * The id of an item that should be preselected.\n */\n selectedItemIds?: number[];\n /**\n * Whether more than one item should be selectable.\n */\n shouldAllowMultiSelect?: boolean;\n /**\n * Whether the button text should be displayed also if items are selected.\n */\n shouldShowButtonTextWithSelection?: boolean;\n /**\n * Whether the search should be displayed inside the dialog.\n */\n shouldShowSearch?: boolean;\n /**\n * The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect((result.result as string[]).map(Number));\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SelectButton.js","names":["createDialog","DialogType","React","useMemo","Button","StyledSelectButton","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","maxDisplayedItems","additionalText","shouldShowSearch","selectAllText","title","itemList","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","replace","String","handleClick","undefined","type","SELECT","multiselect","quickfind","selectAllCheckbox","open","then","result","buttonType","createElement","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n /**\n * Text used when there are more selected items than maxDisplayedItems. '##count##' will be displayed with the additional count.\n */\n additionalText?: string;\n /**\n * The text that should be displayed inside the button.\n */\n buttonText: string;\n /**\n * Whether the button should be disabled.\n */\n isDisabled?: boolean;\n /**\n * A list of item that could be selected.\n */\n list: SelectButtonItem[];\n /**\n * The maximum number of items displayed in the button text.\n */\n maxDisplayedItems?: number;\n /**\n * Function to be executed after an item is selected.\n */\n onSelect?: (ids: (number | string)[]) => void;\n /**\n * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.\n */\n selectAllText?: string;\n /**\n * The id of an item that should be preselected.\n */\n selectedItemIds?: (number | string)[];\n /**\n * Whether more than one item should be selectable.\n */\n shouldAllowMultiSelect?: boolean;\n /**\n * Whether the button text should be displayed also if items are selected.\n */\n shouldShowButtonTextWithSelection?: boolean;\n /**\n * Whether the search should be displayed inside the dialog.\n */\n shouldShowSearch?: boolean;\n /**\n * The title of the dialog.\n */\n title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n buttonText,\n isDisabled,\n list,\n onSelect,\n selectedItemIds,\n shouldAllowMultiSelect,\n shouldShowButtonTextWithSelection,\n maxDisplayedItems = 3,\n additionalText = ', ##count## weitere',\n shouldShowSearch,\n selectAllText,\n title,\n}) => {\n const itemList = useMemo(() => {\n const items: DialogSelectListItemType[] = [];\n\n list.forEach(({ text, id }) => {\n const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n items.push({\n name: text,\n id,\n isSelected,\n });\n });\n\n return items;\n }, [list, selectedItemIds]);\n\n const internalButtonText = useMemo(() => {\n if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n return buttonText;\n }\n\n let addedCount = 0;\n let newText = '';\n\n const additionalCount = selectedItemIds.length - maxDisplayedItems;\n\n list.forEach(({ text, id }) => {\n if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {\n addedCount++;\n newText += newText.length === 0 ? `${text}` : `, ${text}`;\n }\n });\n\n if (additionalCount >= 1) {\n newText += additionalText.replace('##count##', String(additionalCount));\n }\n\n return newText;\n }, [\n additionalText,\n buttonText,\n list,\n maxDisplayedItems,\n selectedItemIds,\n shouldShowButtonTextWithSelection,\n ]);\n\n const handleClick = () => {\n void createDialog({\n text: title ? `[h1]${title}[/h1]` : undefined,\n type: DialogType.SELECT,\n list: itemList,\n multiselect: shouldAllowMultiSelect,\n quickfind: shouldShowSearch,\n selectAllCheckbox: selectAllText,\n })\n .open()\n .then((result) => {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n // Ignore because there is no type\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n onSelect(result.result);\n }\n });\n };\n\n return (\n <StyledSelectButton>\n <Button\n onClick={handleClick}\n isDisabled={isDisabled}\n isSecondary\n shouldShowTextAsRobotoMedium={false}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number;\n}\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"selectButton.js","names":[],"sources":["../../../src/types/selectButton.ts"],"sourcesContent":["export interface SelectButtonItem {\n text: string;\n id: number | string;\n}\n"],"mappings":"","ignoreList":[]}
@@ -24,7 +24,7 @@ export type SelectButtonProps = {
24
24
  /**
25
25
  * Function to be executed after an item is selected.
26
26
  */
27
- onSelect?: (ids: number[]) => void;
27
+ onSelect?: (ids: (number | string)[]) => void;
28
28
  /**
29
29
  * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.
30
30
  */
@@ -32,7 +32,7 @@ export type SelectButtonProps = {
32
32
  /**
33
33
  * The id of an item that should be preselected.
34
34
  */
35
- selectedItemIds?: number[];
35
+ selectedItemIds?: (number | string)[];
36
36
  /**
37
37
  * Whether more than one item should be selectable.
38
38
  */
@@ -1,4 +1,4 @@
1
1
  export interface SelectButtonItem {
2
2
  text: string;
3
- id: number;
3
+ id: number | string;
4
4
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.1237",
3
+ "version": "5.0.0-beta.1239",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "8f14f402fbf3eda863fc95aa86be613c49d12e8c"
88
+ "gitHead": "2e573793e91fdcd98f5024fcb69c20a34d4dbd69"
89
89
  }