npm - @chayns-components/core - Versions diffs - 5.3.10 → 5.3.12-alpha.0 - Mend

@chayns-components/core 5.3.10 → 5.3.12-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 (451) hide show

package/lib/esm/components/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","type","shouldShowClearIcon","position","id","tabIndex","e","preventDefault","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether the SearchInput should be positioned absolute.\n /\n shouldUseAbsolutePositioning?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n /\n value?: string;\n /\n The width of the parent.\n */\n width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n (\n {\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n shouldUseAbsolutePositioning = false,\n size = InputSize.Medium,\n value,\n width: widthValue,\n },\n ref,\n ) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n\n const parentWidth = useElementSize(pseudoRef);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n const width = useMemo(\n () => widthValue ?? parentWidth?.width,\n [parentWidth?.width, widthValue],\n );\n\n return (\n <>\n <StyledSearchInput\n className=\"beta-chayns-search-input\"\n $size={size}\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n onClick={() => {\n if (shouldUseAbsolutePositioning) {\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n {shouldUseAbsolutePositioning ? (\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <Input\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n ) : (\n <>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n if (isSearchInputActive) {\n handleBackIconClick();\n } else {\n handleSearchIconClick();\n }\n }\n }}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive\n ? ['fa fa-arrow-left']\n : ['fa fa-search']\n }\n onClick={\n isSearchInputActive\n ? handleBackIconClick\n : handleSearchIconClick\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n key=\"input\"\n leftElement={\n <Icon\n color={theme.text}\n icons={['far fa-search']}\n />\n }\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </>\n )}\n </StyledSearchInput>\n <StyledSearchInputPseudoElement ref={pseudoRef} />\n </>\n );\n },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputIconTrigger","StyledSearchInputPseudoElement","useTheme","useElementSize","useKeyboardFocusHighlighting","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","shouldEnableKeyboardHighlighting","width","widthValue","ref","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","shouldShowKeyboardHighlighting","handleBackIconClick","handleSearchIconClick","handleIconTriggerClick","handleIconTriggerKeyDown","event","key","preventDefault","current","focus","blur","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","initial","$shouldShowKeyboardHighlighting","animate","opacity","exit","transition","duration","type","shouldShowClearIcon","id","tabIndex","onClick","position","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n StyledSearchInputIconTrigger,\n StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n Whether the SearchInput should be positioned absolute.\n /\n shouldUseAbsolutePositioning?: boolean;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n /\n value?: string;\n /\n Enables keyboard-only focus highlighting.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n The width of the parent.\n */\n width?: number;\n};\n\nconst SearchInput = forwardRef<InputRef, SearchInputProps>(\n (\n {\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n shouldUseAbsolutePositioning = false,\n size = InputSize.Medium,\n value,\n shouldEnableKeyboardHighlighting,\n width: widthValue,\n },\n ref,\n ) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n const pseudoRef = useRef<HTMLDivElement>(null);\n\n const parentWidth = useElementSize(pseudoRef);\n\n const theme = useTheme() as Theme;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n const handleIconTriggerClick = useCallback(() => {\n if (isSearchInputActive) {\n handleBackIconClick();\n return;\n }\n\n handleSearchIconClick();\n }, [handleBackIconClick, handleSearchIconClick, isSearchInputActive]);\n\n const handleIconTriggerKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n handleIconTriggerClick();\n }\n },\n [handleIconTriggerClick],\n );\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => inputRef.current?.focus(),\n blur: () => inputRef.current?.blur(),\n }),\n [],\n );\n\n const width = useMemo(\n () => widthValue ?? parentWidth?.width,\n [parentWidth?.width, widthValue],\n );\n\n return (\n <>\n <StyledSearchInput\n className=\"beta-chayns-search-input\"\n $size={size}\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n >\n {shouldUseAbsolutePositioning ? (\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n animate={{ opacity: 1, width }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <Input\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledSearchInputIconTrigger\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onClick={handleIconTriggerClick}\n onKeyDown={handleIconTriggerKeyDown}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </StyledSearchInputIconTrigger>\n </AnimatePresence>\n ) : (\n <>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledSearchInputIconTrigger\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n tabIndex={0}\n onClick={handleIconTriggerClick}\n onKeyDown={handleIconTriggerKeyDown}\n $shouldShowKeyboardHighlighting={\n shouldShowKeyboardHighlighting\n }\n >\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n $shouldShowKeyboardHighlighting={\n shouldShowKeyboardHighlighting\n }\n >\n <Icon\n key=\"icon\"\n color={iconColor}\n tabIndex={-1}\n icons={\n isSearchInputActive\n ? ['fa fa-arrow-left']\n : ['fa fa-search']\n }\n />\n </StyledMotionSearchInputIconWrapperContent>\n </StyledSearchInputIconTrigger>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n $shouldShowKeyboardHighlighting={\n shouldShowKeyboardHighlighting\n }\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n key=\"input\"\n leftElement={\n <Icon\n color={theme.text}\n icons={['far fa-search']}\n />\n }\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </>\n )}\n </StyledSearchInput>\n <StyledSearchInputPseudoElement ref={pseudoRef} />\n </>\n );\n },\n);\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSearchInput = styled.div`
     display: flex;
     align-items: center;
@@ -43,12 +44,34 @@ export const StyledMotionSearchInputContentWrapper = styled(motion.div)`
             right: 0;
         `}
-    overflow: hidden;
+    overflow: ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};
 `;
 export const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`
     display: flex;
     cursor: pointer;
 `;
+export const StyledSearchInputIconTrigger = styled.div`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    cursor: pointer;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+                box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);
+                outline-offset: 2px;
+            }
+        `}
+`;
 export const StyledMotionSearchInputIconWrapper = styled.div`
     width: 18px;
 `;

package/lib/esm/components/search-input/SearchInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","css","StyledSearchInput","div","$size","$shouldUseAbsolutePositioning","theme","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapperContent","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n $size: InputSize;\n $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n display: flex;\n align-items: center;\n\n height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n $shouldUseAbsolutePositioning\n ? css`\n justify-content: center;\n aspect-ratio: 1;\n border-radius: 3px;\n position: relative;\n cursor: pointer;\n\n @media (pointer: fine) {\n &:hover {\n background-color: ${theme[201]};\n }\n }\n `\n : css`\n gap: 8px;\n justify-content: flex-end;\n width: 100%;\n `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n position: absolute;\n right: 0;\n left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n $shouldUseAbsolutePositioning: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n ${({ $shouldUseAbsolutePositioning }) =>\n $shouldUseAbsolutePositioning &&\n css`\n position: absolute;\n top: 0;\n right: 0;\n `}\n\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)`\n display: flex;\n cursor: pointer;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n width: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAS~~/C,OAAO,MAAMC,iBAAiB,~~GAAGF~~,MAAM,~~CAACG~~,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,~~GACvBJ~~,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~8CAA8CK~~,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,~~GACDL~~,GAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,~~MAAMM~~,8BAA8B,~~GAAGP~~,MAAM,~~CAACG~~,GAAG;AACxD;AACA;AACA;AACA,CAAC;~~AAMD~~,OAAO,MAAMK,qCAAqC,~~GAAGR~~,MAAM,CACvDD,MAAM,~~CAACI~~,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,~~IAC7BJ~~,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;~~AACA~~,CAAC;~~AAED~~,OAAO,~~MAAMQ~~,yCAAyC,~~GAAGT~~,MAAM,~~CAACD~~,MAAM,CAACI,~~GAAG~~,CAAC;~~AAC3E~~;AACA;AACA,CAAC;AAED,OAAO,~~MAAMO~~,kCAAkC,~~GAAGV~~,MAAM,~~CAACG~~,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledSearchInput","div","$size","$shouldUseAbsolutePositioning","theme","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","$shouldShowKeyboardHighlighting","StyledMotionSearchInputIconWrapperContent","StyledSearchInputIconTrigger","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledSearchInputProps = WithTheme<{\n $size: InputSize;\n $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n display: flex;\n align-items: center;\n\n height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n $shouldUseAbsolutePositioning\n ? css`\n justify-content: center;\n aspect-ratio: 1;\n border-radius: 3px;\n position: relative;\n cursor: pointer;\n\n @media (pointer: fine) {\n &:hover {\n background-color: ${theme[201]};\n }\n }\n `\n : css`\n gap: 8px;\n justify-content: flex-end;\n width: 100%;\n `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n position: absolute;\n right: 0;\n left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n $shouldUseAbsolutePositioning: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n ${({ $shouldUseAbsolutePositioning }) =>\n $shouldUseAbsolutePositioning &&\n css`\n position: absolute;\n top: 0;\n right: 0;\n `}\n\n overflow: ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting ? 'visible' : 'hidden'};\n`;\n\ntype StyledMotionSearchInputIconWrapperContentProps = {\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(\n motion.div,\n)<StyledMotionSearchInputIconWrapperContentProps>`\n display: flex;\n cursor: pointer;\n`;\n\ntype StyledSearchInputIconTriggerProps = {\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledSearchInputIconTrigger = styled.div<StyledSearchInputIconTriggerProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 6px;\n cursor: pointer;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n transition: none;\n ${keyboardFocusHighlightingRingCss}\n box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.35);\n outline-offset: 2px;\n }\n `}\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n width: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,GACvBL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CM,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACDN,GAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAED,OAAO,MAAMO,8BAA8B,GAAGR,MAAM,CAACI,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMK,qCAAqC,GAAGT,MAAM,CACvDD,MAAM,CAACK,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7BL,GAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA,gBAAgB,CAAC;EAAES;AAAgC,CAAC,KAC5CA,+BAA+B,GAAG,SAAS,GAAG,QAAQ;AAC9D,CAAC;AAMD,OAAO,MAAMC,yCAAyC,GAAGX,MAAM,CAC3DD,MAAM,CAACK,GACX,CAAiD;AACjD;AACA;AACA,CAAC;AAMD,OAAO,MAAMQ,4BAA4B,GAAGZ,MAAM,CAACI,GAAsC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEM;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BT,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,kCAAkC,GAAGb,MAAM,CAACI,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/select-button/SelectButton.js CHANGED Viewed

@@ -14,7 +14,8 @@ const SelectButton = ({
   additionalText = ', ##count## weitere',
   shouldShowSearch,
   selectAllText,
-  title
+  title,
+  shouldEnableKeyboardHighlighting
 }) => {
   const itemList = useMemo(() => {
     const items = [];
@@ -76,7 +77,8 @@ const SelectButton = ({
     onClick: handleClick,
     isDisabled: isDisabled,
     isSecondary: true,
-    shouldShowTextAsRobotoMedium: false
+    shouldShowTextAsRobotoMedium: false,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }, internalButtonText));
 };
 SelectButton.displayName = 'SelectButton';

package/lib/esm/components/select-button/SelectButton.js.map CHANGED Viewed

	@@ -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","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":"AAAA,SAASA,YAAY,EAAEC,UAAU,QAAuC,YAAY;AACpF,OAAOC,KAAK,IAAIC,OAAO,QAAiB,OAAO;AAE/C,OAAOC,MAAM,MAAM,kBAAkB;AACrC,SAASC,kBAAkB,QAAQ,uBAAuB;~~AAqD1D~~,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,UAAU;EACVC,UAAU;EACVC,IAAI;EACJC,QAAQ;EACRC,eAAe;EACfC,sBAAsB;EACtBC,iCAAiC;EACjCC,iBAAiB,GAAG,CAAC;EACrBC,cAAc,GAAG,qBAAqB;EACtCC,gBAAgB;EAChBC,aAAa;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,QAAQ,~~GAAGhB~~,OAAO,CAAC,MAAM;IAC3B,~~MAAMiB~~,KAAiC,GAAG,EAAE;~~IAE5CX~~,IAAI,~~CAACY~~,OAAO,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAG,CAAC,KAAK;MAC3B,MAAMC,UAAU,~~GAAGb~~,eAAe,GAAGA,eAAe,~~CAACc~~,QAAQ,CAACF,EAAE,CAAC,GAAG,KAAK;MAEzEH,KAAK,CAACM,IAAI,CAAC;QACPC,IAAI,EAAEL,IAAI;QACVC,EAAE;QACFC;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAOJ,KAAK;EAChB,CAAC,EAAE,~~CAACX~~,IAAI,EAAEE,eAAe,CAAC,CAAC;EAE3B,~~MAAMiB~~,kBAAkB,~~GAAGzB~~,OAAO,CAAC,MAAM;IACrC,IAAIU,iCAAiC,IAAI,CAACF,eAAe,IAAIA,eAAe,~~CAACkB~~,MAAM,KAAK,CAAC,EAAE;MACvF,~~OAAOtB~~,UAAU;IACrB;IAEA,~~IAAIuB~~,UAAU,GAAG,CAAC;IAClB,IAAIC,OAAO,GAAG,EAAE;IAEhB,MAAMC,eAAe,~~GAAGrB~~,eAAe,~~CAACkB~~,MAAM,~~GAAGf~~,iBAAiB;IAElEL,IAAI,~~CAACY~~,OAAO,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAG,CAAC,KAAK;MAC3B,IAAIO,UAAU,~~GAAGhB~~,iBAAiB,IAAIH,eAAe,~~EAAEc~~,QAAQ,CAACF,EAAE,CAAC,EAAE;QACjEO,UAAU,EAAE;QACZC,OAAO,IAAIA,OAAO,CAACF,MAAM,KAAK,CAAC,GAAG,GAAGP,IAAI,EAAE,GAAG,KAAKA,IAAI,EAAE;MAC7D;IACJ,CAAC,CAAC;IAEF,IAAIU,eAAe,IAAI,CAAC,EAAE;MACtBD,OAAO,~~IAAIhB~~,cAAc,~~CAACkB~~,OAAO,CAAC,WAAW,EAAEC,MAAM,CAACF,eAAe,CAAC,CAAC;IAC3E;IAEA,OAAOD,OAAO;EAClB,CAAC,EAAE,~~CACChB~~,cAAc,EACdR,UAAU,EACVE,IAAI,EACJK,iBAAiB,EACjBH,eAAe,EACfE,iCAAiC,CACpC,CAAC;EAEF,~~MAAMsB~~,WAAW,GAAGA,CAAA,KAAM;IACtB,~~KAAKnC~~,YAAY,CAAC;~~MACdsB~~,IAAI,~~EAAEJ~~,KAAK,GAAG,OAAOA,KAAK,OAAO,~~GAAGkB~~,SAAS;MAC7CC,IAAI,~~EAAEpC~~,UAAU,~~CAACqC~~,MAAM;~~MACvB7B~~,IAAI,~~EAAEU~~,QAAQ;MACdoB,WAAW,~~EAAE3B~~,sBAAsB;~~MACnC4B~~,SAAS,~~EAAExB~~,gBAAgB;~~MAC3ByB~~,iBAAiB,~~EAAExB~~;IACvB,CAAC,CAAC,~~CACGyB~~,IAAI,CAAC,CAAC,CACNC,IAAI,CAAEC,MAAM,IAAK;MACd;MACA;MACA;MACA,IAAIA,MAAM,IAAIA,MAAM,CAACC,UAAU,KAAK,CAAC,IAAI,~~OAAOnC~~,QAAQ,KAAK,UAAU,EAAE;QACrE;QACA;QACA;QACAA,QAAQ,~~CAACkC~~,MAAM,CAACA,MAAM,CAAC;MAC3B;IACJ,CAAC,CAAC;EACV,CAAC;EAED,~~oBACI1C~~,KAAA,~~CAAA4C~~,aAAA,~~CAACzC~~,kBAAkB,qBACfH,KAAA,~~CAAA4C~~,aAAA,~~CAAC1C~~,MAAM;~~IACH2C~~,OAAO,EAAEZ,WAAY;~~IACrB3B~~,UAAU,EAAEA,UAAW;~~IACvBwC~~,WAAW;IACXC,4BAA4B,EAAE;~~EAAM~~,~~GAEnCrB~~,kBACG,CACQ,CAAC;AAE7B,CAAC;~~AAEDtB~~,YAAY,~~CAAC4C~~,WAAW,GAAG,cAAc;AAEzC,~~eAAe5C~~,YAAY","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","shouldEnableKeyboardHighlighting","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 Enables keyboard-only focus highlighting.\n /\n shouldEnableKeyboardHighlighting?: 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 shouldEnableKeyboardHighlighting,\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 shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n >\n {internalButtonText}\n </Button>\n </StyledSelectButton>\n );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/setup-wizard/SetupWizard.js CHANGED Viewed

@@ -5,12 +5,14 @@ export const SetupWizardContext = /*#__PURE__*/React.createContext({
   selectedId: undefined,
   updateSelectedId: undefined,
   activeId: undefined,
-  updateActiveId: undefined
+  updateActiveId: undefined,
+  shouldEnableKeyboardHighlighting: false
 });
 SetupWizardContext.displayName = 'SetupWizardContext';
 const SetupWizard = /*#__PURE__*/forwardRef(({
   children,
-  isWrapped
+  isWrapped,
+  shouldEnableKeyboardHighlighting = false
 }, ref) => {
   const [selectedId, setSelectedId] = useState(0);
   const [activeId, setActiveId] = useState(0);
@@ -59,8 +61,9 @@ const SetupWizard = /*#__PURE__*/forwardRef(({
     selectedId,
     updateSelectedId,
     activeId,
-    updateActiveId
-  }), [activeId, selectedId, updateActiveId, updateSelectedId]);
+    updateActiveId,
+    shouldEnableKeyboardHighlighting
+  }), [activeId, selectedId, shouldEnableKeyboardHighlighting, updateActiveId, updateSelectedId]);
   return useMemo(() => /*#__PURE__*/React.createElement(SetupWizardContext.Provider, {
     value: providerValue
   }, /*#__PURE__*/React.createElement(StyledSetupWizard, null, /*#__PURE__*/React.createElement(AccordionGroup, {

package/lib/esm/components/setup-wizard/SetupWizard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SetupWizard.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","AccordionGroup","StyledSetupWizard","SetupWizardContext","createContext","selectedId","undefined","updateSelectedId","activeId","updateActiveId","displayName","SetupWizard","children","isWrapped","ref","setSelectedId","setActiveId","allIds","setAllIds","Children","map","child","prevState","props","id","handleNext","stepId","index","findIndex","numberAtIndex","handleReset","next","reset","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/setup-wizard/SetupWizard.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport AccordionGroup from '../accordion/accordion-group/AccordionGroup';\nimport type { SetupWizardItemProps } from './setup-wizard-item/SetupWizardItem';\nimport { StyledSetupWizard } from './SetupWizard.styles';\n\ntype UpdateSelectedId = (id: number) => void;\ntype UpdateActiveId = (id: number) => void;\n\ninterface SetupWizardContextProps {\n selectedId: number \| undefined;\n updateSelectedId?: UpdateSelectedId;\n activeId: number \| undefined;\n updateActiveId?: UpdateActiveId;\n}\n\nexport const SetupWizardContext = React.createContext<SetupWizardContextProps>({\n selectedId: undefined,\n updateSelectedId: undefined,\n activeId: undefined,\n updateActiveId: undefined,\n});\n\nSetupWizardContext.displayName = 'SetupWizardContext';\n\nexport interface SetupWizardRef {\n next: (stepId?: number) => void;\n reset: () => void;\n}\n\nexport type SetupWizardProps = {\n /*\n The steps of the setup. Use the SetupWizardItem component.\n /\n children: ReactElement<SetupWizardItemProps> \| ReactElement<SetupWizardItemProps>[];\n /\n This value must be set if the SetupWizard is inside an Accordion.\n */\n isWrapped?: boolean;\n};\n\nconst SetupWizard = forwardRef<SetupWizardRef, SetupWizardProps>(({ children, isWrapped }, ref) => {\n const [selectedId, setSelectedId] = useState<SetupWizardContextProps['selectedId']>(0);\n const [activeId, setActiveId] = useState<SetupWizardContextProps['activeId']>(0);\n const [allIds, setAllIds] = useState<number[]>([]);\n\n useEffect(() => {\n React.Children.map(children, (child: ReactElement<SetupWizardItemProps>) => {\n setAllIds((prevState) => [...prevState, child.props.id]);\n });\n }, [children]);\n\n const updateSelectedId = useCallback<UpdateSelectedId>(\n (id) => {\n setSelectedId(id);\n },\n [setSelectedId],\n );\n\n const updateActiveId = useCallback<UpdateSelectedId>(\n (id) => {\n setActiveId(id);\n },\n [setActiveId],\n );\n\n const handleNext = useCallback(\n (stepId: number \| undefined) => {\n if (typeof stepId === 'number') {\n updateSelectedId(stepId);\n\n if (typeof activeId === 'number' && stepId > activeId) {\n updateActiveId(stepId);\n }\n } else {\n const index = allIds.findIndex((id) => id === selectedId);\n\n if (index < 0) {\n return;\n }\n\n const numberAtIndex = allIds[index + 1];\n\n if (!numberAtIndex) {\n return;\n }\n\n updateSelectedId(numberAtIndex);\n\n if (typeof activeId === 'number' && numberAtIndex > activeId) {\n updateActiveId(numberAtIndex);\n }\n }\n },\n [activeId, allIds, selectedId, updateActiveId, updateSelectedId],\n );\n\n const handleReset = useCallback(() => {\n updateSelectedId(0);\n updateActiveId(0);\n }, [updateActiveId, updateSelectedId]);\n\n useImperativeHandle(\n ref,\n () => ({\n next: handleNext,\n reset: handleReset,\n }),\n [handleNext, handleReset],\n );\n\n const providerValue = useMemo<SetupWizardContextProps>(\n () => ({\n selectedId,\n updateSelectedId,\n activeId,\n updateActiveId,\n }),\n [activeId, selectedId, updateActiveId, updateSelectedId],\n );\n\n return useMemo(\n () => (\n <SetupWizardContext.Provider value={providerValue}>\n <StyledSetupWizard>\n <AccordionGroup isWrapped={isWrapped}>{children}</AccordionGroup>\n </StyledSetupWizard>\n </SetupWizardContext.Provider>\n ),\n [children, isWrapped, providerValue],\n );\n});\n\nSetupWizard.displayName = 'SetupWizard';\n\nexport default SetupWizard;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EAEVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,OAAOC,cAAc,MAAM,6CAA6C;AAExE,SAASC,iBAAiB,QAAQ,sBAAsB;~~AAYxD~~,OAAO,MAAMC,kBAAkB,gBAAGT,KAAK,CAACU,aAAa,CAA0B;EAC3EC,UAAU,EAAEC,SAAS;EACrBC,gBAAgB,EAAED,SAAS;EAC3BE,QAAQ,EAAEF,SAAS;EACnBG,cAAc,EAAEH;~~AACpB~~,CAAC,CAAC;~~AAEFH~~,kBAAkB,~~CAACO~~,WAAW,GAAG,oBAAoB;~~AAkBrD~~,MAAMC,WAAW,~~gBAAGhB~~,UAAU,~~CAAmC~~,CAAC;~~EAAEiB~~,QAAQ;EAAEC;~~AAAU~~,CAAC,~~EAAEC~~,GAAG,KAAK;~~EAC/F~~,MAAM,~~CAACT~~,UAAU,~~EAAEU~~,aAAa,CAAC,~~GAAGf~~,QAAQ,CAAwC,CAAC,CAAC;EACtF,MAAM,CAACQ,QAAQ,~~EAAEQ~~,WAAW,CAAC,~~GAAGhB~~,QAAQ,CAAsC,CAAC,CAAC;EAChF,MAAM,~~CAACiB~~,MAAM,EAAEC,SAAS,CAAC,~~GAAGlB~~,QAAQ,CAAW,EAAE,CAAC;EAElDH,SAAS,CAAC,MAAM;IACZH,KAAK,~~CAACyB~~,QAAQ,CAACC,GAAG,CAACR,QAAQ,EAAGS,KAAyC,IAAK;MACxEH,SAAS,CAAEI,SAAS,IAAK,CAAC,GAAGA,SAAS,EAAED,KAAK,CAACE,KAAK,CAACC,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;EACN,CAAC,EAAE,CAACZ,QAAQ,CAAC,CAAC;EAEd,~~MAAML~~,gBAAgB,GAAGX,WAAW,CAC/~~B4B~~,EAAE,IAAK;IACJT,aAAa,CAACS,EAAE,CAAC;EACrB,CAAC,EACD,CAACT,aAAa,CAClB,CAAC;EAED,~~MAAMN~~,cAAc,GAAGb,WAAW,~~CAC7B4B~~,EAAE,IAAK;IACJR,WAAW,CAACQ,EAAE,CAAC;EACnB,CAAC,EACD,CAACR,WAAW,CAChB,CAAC;EAED,MAAMS,UAAU,~~GAAG7B~~,WAAW,~~CACzB8B~~,MAA0B,IAAK;IAC5B,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;~~MAC5BnB~~,gBAAgB,~~CAACmB~~,MAAM,CAAC;MAExB,IAAI,~~OAAOlB~~,QAAQ,KAAK,QAAQ,~~IAAIkB~~,MAAM,~~GAAGlB~~,QAAQ,EAAE;QACnDC,cAAc,~~CAACiB~~,MAAM,CAAC;MAC1B;IACJ,CAAC,MAAM;MACH,MAAMC,KAAK,GAAGV,MAAM,CAACW,SAAS,CAAEJ,EAAE,IAAKA,EAAE,~~KAAKnB~~,UAAU,CAAC;MAEzD,~~IAAIsB~~,KAAK,GAAG,CAAC,EAAE;QACX;MACJ;MAEA,MAAME,aAAa,GAAGZ,MAAM,CAACU,KAAK,GAAG,CAAC,CAAC;MAEvC,IAAI,CAACE,aAAa,EAAE;QAChB;MACJ;~~MAEAtB~~,gBAAgB,~~CAACsB~~,aAAa,CAAC;MAE/B,IAAI,~~OAAOrB~~,QAAQ,KAAK,QAAQ,~~IAAIqB~~,aAAa,~~GAAGrB~~,QAAQ,EAAE;QAC1DC,cAAc,~~CAACoB~~,aAAa,CAAC;MACjC;IACJ;EACJ,CAAC,EACD,~~CAACrB~~,QAAQ,~~EAAES~~,MAAM,~~EAAEZ~~,UAAU,EAAEI,cAAc,EAAEF,gBAAgB,CACnE,CAAC;EAED,~~MAAMuB~~,WAAW,~~GAAGlC~~,WAAW,CAAC,MAAM;IAClCW,gBAAgB,CAAC,CAAC,CAAC;IACnBE,cAAc,CAAC,CAAC,CAAC;EACrB,CAAC,EAAE,CAACA,cAAc,EAAEF,gBAAgB,CAAC,CAAC;EAEtCT,mBAAmB,~~CACfgB~~,GAAG,EACH,OAAO;IACHiB,IAAI,EAAEN,UAAU;IAChBO,KAAK,EAAEF;EACX,CAAC,CAAC,EACF,CAACL,UAAU,EAAEK,WAAW,CAC5B,CAAC;EAED,MAAMG,aAAa,~~GAAGlC~~,OAAO,CACzB,OAAO;IACHM,UAAU;IACVE,gBAAgB;IAChBC,QAAQ;IACRC;EACJ,CAAC,CAAC,EACF,~~CAACD~~,QAAQ,~~EAAEH~~,UAAU,~~EAAEI~~,cAAc,~~EAAEF~~,gBAAgB,~~CAC3D~~,CAAC;EAED,OAAOR,OAAO,CACV,mBACIL,KAAA,~~CAAAwC~~,aAAA,~~CAAC/B~~,kBAAkB,~~CAACgC~~,QAAQ;IAACC,KAAK,EAAEH;EAAc,~~gBAC9CvC~~,KAAA,~~CAAAwC~~,aAAA,~~CAAChC~~,iBAAiB,qBACdR,KAAA,~~CAAAwC~~,aAAA,~~CAACjC~~,cAAc;~~IAACY~~,SAAS,EAAEA;EAAU,GAAED,QAAyB,CACjD,CACM,CAChC,EACD,CAACA,QAAQ,EAAEC,SAAS,EAAEoB,aAAa,CACvC,CAAC;AACL,~~CAAC~~,CAAC;~~AAEFtB~~,WAAW,CAACD,WAAW,GAAG,aAAa;AAEvC,eAAeC,WAAW","ignoreList":[]}
1	+ {"version":3,"file":"SetupWizard.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","AccordionGroup","StyledSetupWizard","SetupWizardContext","createContext","selectedId","undefined","updateSelectedId","activeId","updateActiveId","shouldEnableKeyboardHighlighting","displayName","SetupWizard","children","isWrapped","ref","setSelectedId","setActiveId","allIds","setAllIds","Children","map","child","prevState","props","id","handleNext","stepId","index","findIndex","numberAtIndex","handleReset","next","reset","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/setup-wizard/SetupWizard.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactElement,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport AccordionGroup from '../accordion/accordion-group/AccordionGroup';\nimport type { SetupWizardItemProps } from './setup-wizard-item/SetupWizardItem';\nimport { StyledSetupWizard } from './SetupWizard.styles';\n\ntype UpdateSelectedId = (id: number) => void;\ntype UpdateActiveId = (id: number) => void;\n\ninterface SetupWizardContextProps {\n selectedId: number \| undefined;\n updateSelectedId?: UpdateSelectedId;\n activeId: number \| undefined;\n updateActiveId?: UpdateActiveId;\n shouldEnableKeyboardHighlighting: boolean;\n}\n\nexport const SetupWizardContext = React.createContext<SetupWizardContextProps>({\n selectedId: undefined,\n updateSelectedId: undefined,\n activeId: undefined,\n updateActiveId: undefined,\n shouldEnableKeyboardHighlighting: false,\n});\n\nSetupWizardContext.displayName = 'SetupWizardContext';\n\nexport interface SetupWizardRef {\n next: (stepId?: number) => void;\n reset: () => void;\n}\n\nexport type SetupWizardProps = {\n /*\n The steps of the setup. Use the SetupWizardItem component.\n /\n children: ReactElement<SetupWizardItemProps> \| ReactElement<SetupWizardItemProps>[];\n /\n This value must be set if the SetupWizard is inside an Accordion.\n /\n isWrapped?: boolean;\n /\n Enables keyboard-only focus highlighting for setup wizard items.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst SetupWizard = forwardRef<SetupWizardRef, SetupWizardProps>(\n ({ children, isWrapped, shouldEnableKeyboardHighlighting = false }, ref) => {\n const [selectedId, setSelectedId] = useState<SetupWizardContextProps['selectedId']>(0);\n const [activeId, setActiveId] = useState<SetupWizardContextProps['activeId']>(0);\n const [allIds, setAllIds] = useState<number[]>([]);\n\n useEffect(() => {\n React.Children.map(children, (child: ReactElement<SetupWizardItemProps>) => {\n setAllIds((prevState) => [...prevState, child.props.id]);\n });\n }, [children]);\n\n const updateSelectedId = useCallback<UpdateSelectedId>(\n (id) => {\n setSelectedId(id);\n },\n [setSelectedId],\n );\n\n const updateActiveId = useCallback<UpdateSelectedId>(\n (id) => {\n setActiveId(id);\n },\n [setActiveId],\n );\n\n const handleNext = useCallback(\n (stepId: number \| undefined) => {\n if (typeof stepId === 'number') {\n updateSelectedId(stepId);\n\n if (typeof activeId === 'number' && stepId > activeId) {\n updateActiveId(stepId);\n }\n } else {\n const index = allIds.findIndex((id) => id === selectedId);\n\n if (index < 0) {\n return;\n }\n\n const numberAtIndex = allIds[index + 1];\n\n if (!numberAtIndex) {\n return;\n }\n\n updateSelectedId(numberAtIndex);\n\n if (typeof activeId === 'number' && numberAtIndex > activeId) {\n updateActiveId(numberAtIndex);\n }\n }\n },\n [activeId, allIds, selectedId, updateActiveId, updateSelectedId],\n );\n\n const handleReset = useCallback(() => {\n updateSelectedId(0);\n updateActiveId(0);\n }, [updateActiveId, updateSelectedId]);\n\n useImperativeHandle(\n ref,\n () => ({\n next: handleNext,\n reset: handleReset,\n }),\n [handleNext, handleReset],\n );\n\n const providerValue = useMemo<SetupWizardContextProps>(\n () => ({\n selectedId,\n updateSelectedId,\n activeId,\n updateActiveId,\n shouldEnableKeyboardHighlighting,\n }),\n [\n activeId,\n selectedId,\n shouldEnableKeyboardHighlighting,\n updateActiveId,\n updateSelectedId,\n ],\n );\n\n return useMemo(\n () => (\n <SetupWizardContext.Provider value={providerValue}>\n <StyledSetupWizard>\n <AccordionGroup isWrapped={isWrapped}>{children}</AccordionGroup>\n </StyledSetupWizard>\n </SetupWizardContext.Provider>\n ),\n [children, isWrapped, providerValue],\n );\n },\n);\n\nSetupWizard.displayName = 'SetupWizard';\n\nexport default SetupWizard;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js CHANGED Viewed

@@ -14,7 +14,8 @@ const SetupWizardItem = ({
   const {
     selectedId,
     updateSelectedId,
-    activeId
+    activeId,
+    shouldEnableKeyboardHighlighting
   } = useContext(SetupWizardContext);
   const [shouldOpen, setShouldOpen] = useState(false);
   const initialRender = useRef(0);
@@ -51,8 +52,9 @@ const SetupWizardItem = ({
     title: `${step}. ${title}`,
     isOpened: shouldOpen,
     isDisabled: shouldBeDisabled,
-    rightElement: rightElement
-  }, /*#__PURE__*/React.createElement(AccordionContent, null, children)), [handleAccordionOpen, step, title, shouldOpen, shouldBeDisabled, rightElement, children]);
+    rightElement: rightElement,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+  }, /*#__PURE__*/React.createElement(AccordionContent, null, children)), [children, handleAccordionOpen, rightElement, shouldBeDisabled, shouldEnableKeyboardHighlighting, shouldOpen, step, title]);
 };
 SetupWizardItem.displayName = 'SetupWizardItem';
 export default SetupWizardItem;

package/lib/esm/components/setup-wizard/setup-wizard-item/SetupWizardItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SetupWizardItem.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","Accordion","AccordionContent","Badge","Icon","SetupWizardContext","StyledSetupWizardItemBadge","SetupWizardItem","children","step","title","id","selectedId","updateSelectedId","activeId","shouldOpen","setShouldOpen","initialRender","current","timeout","setTimeout","clearTimeout","shouldBeDisabled","rightElement","createElement","icons","handleAccordionOpen","onOpen","isOpened","isDisabled","displayName"],"sources":["../../../../../src/components/setup-wizard/setup-wizard-item/SetupWizardItem.tsx"],"sourcesContent":["import React, {\n FC,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Accordion from '../../accordion/Accordion';\nimport AccordionContent from '../../accordion/accordion-content/AccordionContent';\nimport Badge from '../../badge/Badge';\nimport Icon from '../../icon/Icon';\nimport { SetupWizardContext } from '../SetupWizard';\nimport { StyledSetupWizardItemBadge } from './SetupWizardItem.styles';\n\nexport type SetupWizardItemProps = {\n /*\n The content that should be displayed inside the item.\n /\n children: ReactNode;\n /\n The id of the item.\n /\n id: number;\n /\n The step of the item.\n /\n step: number;\n /\n The title of the item.\n */\n title: string;\n};\n\nconst SetupWizardItem: FC<SetupWizardItemProps> = ({ children, step, title, id }) => {\n const { selectedId, updateSelectedId, activeId } = useContext(SetupWizardContext);\n\n const [shouldOpen, setShouldOpen] = useState<boolean>(false);\n\n const initialRender = useRef(0);\n\n useEffect(() => {\n initialRender.current++;\n }, []);\n\n useEffect(() => {\n const timeout = setTimeout(() => {\n setShouldOpen(id === selectedId);\n }, 5);\n\n return () => clearTimeout(timeout);\n }, [id, selectedId]);\n\n const shouldBeDisabled = useMemo(() => {\n if (typeof activeId === 'number' && activeId === id) {\n return false;\n }\n\n return typeof activeId === 'number' && activeId < id;\n }, [activeId, id]);\n\n const rightElement = useMemo(() => {\n if (activeId && id < activeId) {\n return (\n <Badge>\n <StyledSetupWizardItemBadge>\n <Icon icons={['ts-check']} />\n </StyledSetupWizardItemBadge>\n </Badge>\n );\n }\n\n return null;\n }, [activeId, id]);\n\n const handleAccordionOpen = useCallback(() => {\n if (typeof updateSelectedId === 'function') {\n updateSelectedId(id);\n }\n }, [id, updateSelectedId]);\n\n return useMemo(\n () => (\n <Accordion\n onOpen={handleAccordionOpen}\n title={`${step}. ${title}`}\n isOpened={shouldOpen}\n isDisabled={shouldBeDisabled}\n rightElement={rightElement}\n >\n <AccordionContent>{children}</AccordionContent>\n </Accordion>\n ),\n [handleAccordionOpen, step, title~~, shouldOpen, shouldBeDisabled, rightElement, children~~],\n );\n};\n\nSetupWizardItem.displayName = 'SetupWizardItem';\n\nexport default SetupWizardItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAGRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,gBAAgB,MAAM,oDAAoD;AACjF,OAAOC,KAAK,MAAM,mBAAmB;AACrC,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SAASC,kBAAkB,QAAQ,gBAAgB;AACnD,SAASC,0BAA0B,QAAQ,0BAA0B;AAqBrE,MAAMC,eAAyC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAAG,CAAC,KAAK;EACjF,MAAM;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC;~~EAAS~~,CAAC,~~GAAGlB~~,UAAU,CAACS,kBAAkB,CAAC;~~EAEjF~~,MAAM,~~CAACU~~,UAAU,EAAEC,aAAa,CAAC,~~GAAGhB~~,QAAQ,CAAU,KAAK,CAAC;EAE5D,~~MAAMiB~~,aAAa,~~GAAGlB~~,MAAM,CAAC,CAAC,CAAC;EAE/BF,SAAS,CAAC,MAAM;~~IACZoB~~,aAAa,CAACC,OAAO,EAAE;EAC3B,CAAC,EAAE,EAAE,CAAC;~~EAENrB~~,SAAS,CAAC,MAAM;IACZ,~~MAAMsB~~,OAAO,GAAGC,UAAU,CAAC,MAAM;MAC7BJ,aAAa,~~CAACL~~,EAAE,KAAKC,UAAU,CAAC;IACpC,CAAC,EAAE,CAAC,CAAC;IAEL,OAAO,~~MAAMS~~,YAAY,CAACF,OAAO,CAAC;EACtC,CAAC,EAAE,~~CAACR~~,EAAE,EAAEC,UAAU,CAAC,CAAC;EAEpB,~~MAAMU~~,gBAAgB,~~GAAGxB~~,OAAO,CAAC,MAAM;IACnC,IAAI,OAAOgB,QAAQ,KAAK,QAAQ,IAAIA,QAAQ,KAAKH,EAAE,EAAE;MACjD,OAAO,KAAK;IAChB;IAEA,OAAO,OAAOG,QAAQ,KAAK,QAAQ,IAAIA,QAAQ,GAAGH,EAAE;EACxD,CAAC,EAAE,CAACG,QAAQ,EAAEH,EAAE,CAAC,CAAC;EAElB,~~MAAMY~~,YAAY,~~GAAGzB~~,OAAO,CAAC,MAAM;IAC/B,IAAIgB,QAAQ,IAAIH,EAAE,GAAGG,QAAQ,EAAE;MAC3B,oBACIpB,KAAA,~~CAAA8B~~,aAAA,~~CAACrB~~,KAAK,qBACFT,KAAA,~~CAAA8B~~,aAAA,~~CAAClB~~,0BAA0B,qBACvBZ,KAAA,~~CAAA8B~~,aAAA,~~CAACpB~~,IAAI;~~QAACqB~~,KAAK,EAAE,CAAC,UAAU;MAAE,CAAE,CACJ,CACzB,CAAC;IAEhB;IAEA,OAAO,IAAI;EACf,CAAC,EAAE,~~CAACX~~,QAAQ,EAAEH,EAAE,CAAC,CAAC;EAElB,~~MAAMe~~,mBAAmB,~~GAAG/B~~,WAAW,CAAC,MAAM;IAC1C,IAAI,OAAOkB,gBAAgB,KAAK,UAAU,EAAE;MACxCA,gBAAgB,CAACF,EAAE,CAAC;IACxB;EACJ,CAAC,EAAE,CAACA,EAAE,EAAEE,gBAAgB,CAAC,CAAC;EAE1B,OAAOf,OAAO,CACV,mBACIJ,KAAA,~~CAAA8B~~,aAAA,~~CAACvB~~,SAAS;~~IACN0B~~,MAAM,EAAED,mBAAoB;~~IAC5BhB~~,KAAK,EAAE,GAAGD,IAAI,KAAKC,KAAK,EAAG;~~IAC3BkB~~,QAAQ,EAAEb,UAAW;IACrBc,UAAU,EAAEP,gBAAiB;IAC7BC,YAAY,EAAEA;~~EAAa~~,~~gBAE3B7B~~,KAAA,~~CAAA8B~~,aAAA,~~CAACtB~~,gBAAgB,QAAEM,QAA2B,CACvC,CACd,EACD,~~CAACkB~~,mBAAmB,~~EAAEjB~~,~~IAAI~~,~~EAAEC~~,~~KAAK~~,~~EAAEK~~,~~UAAU~~,~~EAAEO~~,~~gBAAgB~~,~~EAAEC~~,~~YAAY~~,~~EAAEf~~,~~QAAQ~~,~~CAC3F~~,CAAC;AACL,CAAC;~~AAEDD~~,eAAe,~~CAACuB~~,WAAW,GAAG,iBAAiB;AAE/C,~~eAAevB~~,eAAe","ignoreList":[]}
1	+ {"version":3,"file":"SetupWizardItem.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","Accordion","AccordionContent","Badge","Icon","SetupWizardContext","StyledSetupWizardItemBadge","SetupWizardItem","children","step","title","id","selectedId","updateSelectedId","activeId","shouldEnableKeyboardHighlighting","shouldOpen","setShouldOpen","initialRender","current","timeout","setTimeout","clearTimeout","shouldBeDisabled","rightElement","createElement","icons","handleAccordionOpen","onOpen","isOpened","isDisabled","displayName"],"sources":["../../../../../src/components/setup-wizard/setup-wizard-item/SetupWizardItem.tsx"],"sourcesContent":["import React, {\n FC,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Accordion from '../../accordion/Accordion';\nimport AccordionContent from '../../accordion/accordion-content/AccordionContent';\nimport Badge from '../../badge/Badge';\nimport Icon from '../../icon/Icon';\nimport { SetupWizardContext } from '../SetupWizard';\nimport { StyledSetupWizardItemBadge } from './SetupWizardItem.styles';\n\nexport type SetupWizardItemProps = {\n /*\n The content that should be displayed inside the item.\n /\n children: ReactNode;\n /\n The id of the item.\n /\n id: number;\n /\n The step of the item.\n /\n step: number;\n /\n The title of the item.\n */\n title: string;\n};\n\nconst SetupWizardItem: FC<SetupWizardItemProps> = ({ children, step, title, id }) => {\n const { selectedId, updateSelectedId, activeId, shouldEnableKeyboardHighlighting } =\n useContext(SetupWizardContext);\n\n const [shouldOpen, setShouldOpen] = useState<boolean>(false);\n\n const initialRender = useRef(0);\n\n useEffect(() => {\n initialRender.current++;\n }, []);\n\n useEffect(() => {\n const timeout = setTimeout(() => {\n setShouldOpen(id === selectedId);\n }, 5);\n\n return () => clearTimeout(timeout);\n }, [id, selectedId]);\n\n const shouldBeDisabled = useMemo(() => {\n if (typeof activeId === 'number' && activeId === id) {\n return false;\n }\n\n return typeof activeId === 'number' && activeId < id;\n }, [activeId, id]);\n\n const rightElement = useMemo(() => {\n if (activeId && id < activeId) {\n return (\n <Badge>\n <StyledSetupWizardItemBadge>\n <Icon icons={['ts-check']} />\n </StyledSetupWizardItemBadge>\n </Badge>\n );\n }\n\n return null;\n }, [activeId, id]);\n\n const handleAccordionOpen = useCallback(() => {\n if (typeof updateSelectedId === 'function') {\n updateSelectedId(id);\n }\n }, [id, updateSelectedId]);\n\n return useMemo(\n () => (\n <Accordion\n onOpen={handleAccordionOpen}\n title={`${step}. ${title}`}\n isOpened={shouldOpen}\n isDisabled={shouldBeDisabled}\n rightElement={rightElement}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n >\n <AccordionContent>{children}</AccordionContent>\n </Accordion>\n ),\n [\n children,\n handleAccordionOpen,\n rightElement,\n shouldBeDisabled,\n shouldEnableKeyboardHighlighting,\n shouldOpen,\n step,\n title,\n ],\n );\n};\n\nSetupWizardItem.displayName = 'SetupWizardItem';\n\nexport default SetupWizardItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/sharing-bar/SharingBar.js CHANGED Viewed

@@ -1,4 +1,6 @@
 import React, { useCallback, useRef } from 'react';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
 import Icon from '../icon/Icon';
 import { StyledSharingBar, StyledSharingBarIconWrapper, StyledSharingBarText } from './SharingBar.styles';
 import SharingContextMenu from '../sharing-context-menu/SharingContextMenu';
@@ -6,23 +8,46 @@ const SharingBar = ({
   label,
   link,
   popupAlignment,
-  container
+  container,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const contextMenuRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlightingEffective);
+  const showContextMenu = useCallback(() => {
+    contextMenuRef.current?.show();
+  }, []);
   const handleSharingBarClick = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
-    contextMenuRef.current?.show();
-  }, []);
+    showContextMenu();
+  }, [showContextMenu]);
+  const handleKeyDown = useCallback(event => {
+    if (event.currentTarget !== event.target) {
+      return;
+    }
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    showContextMenu();
+  }, [showContextMenu]);
   return /*#__PURE__*/React.createElement(StyledSharingBar, {
-    onClick: handleSharingBarClick
+    onClick: handleSharingBarClick,
+    onKeyDown: shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined,
+    tabIndex: shouldEnableKeyboardHighlightingEffective ? 0 : undefined,
+    role: shouldEnableKeyboardHighlightingEffective ? 'button' : undefined,
+    "data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting ? 'true' : undefined
   }, /*#__PURE__*/React.createElement(StyledSharingBarIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa-solid fa-share-nodes']
   })), /*#__PURE__*/React.createElement(SharingContextMenu, {
     link: link,
     ref: contextMenuRef,
     alignment: popupAlignment,
-    container: container
+    container: container,
+    shouldDisableClick: true
   }, null), /*#__PURE__*/React.createElement(StyledSharingBarText, null, label));
 };
 SharingBar.displayName = 'SharingBar';

package/lib/esm/components/sharing-bar/SharingBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SharingBar.js","names":["React","useCallback","useRef","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingContextMenu","SharingBar","label","link","popupAlignment","container","contextMenuRef","handleSharingBarClick","event","preventDefault","stopPropagation","~~current~~","~~show~~","createElement","onClick","icons","ref","alignment","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import React, { FC, MouseEventHandler, useCallback, useRef } from 'react';\nimport Icon from '../icon/Icon';\nimport {\n StyledSharingBar,\n StyledSharingBarIconWrapper,\n StyledSharingBarText,\n} from './SharingBar.styles';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\n\nexport type SharingBarProps = {\n /*\n The element where the content of the `SharingBar` should be rendered via React Portal.\n /\n container?: Element;\n /\n The label that should be displayed.\n /\n label: string;\n /\n The link that should be shared.\n /\n link: string;\n /\n The alignment of the sharing options.\n */\n popupAlignment: ContextMenuAlignment;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({ label, link, popupAlignment, container }) => {\n const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n\n const handleSharingBarClick = useCallback<MouseEventHandler<HTMLDivElement>>((event) => {\n event.preventDefault();\n event.stopPropagation();\n\n ~~contextMenuRef~~.~~current?.show~~();\n }, []);\n\n return (\n <StyledSharingBar onClick={handleSharingBarClick}>\n <StyledSharingBarIconWrapper>\n <Icon icons={['fa-solid fa-share-nodes']} />\n </StyledSharingBarIconWrapper>\n <SharingContextMenu\n link={link}\n ref={contextMenuRef}\n alignment={popupAlignment}\n container={container}\n >\n {null}\n </SharingContextMenu>\n <StyledSharingBarText>{label}</StyledSharingBarText>\n </StyledSharingBar>\n );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"AAAA,OAAOA,KAAK,~~IAA2BC~~,WAAW,EAAEC,MAAM,QAAQ,OAAO;~~AACzE~~,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,gBAAgB,EAChBC,2BAA2B,EAC3BC,oBAAoB,QACjB,qBAAqB;AAE5B,OAAOC,kBAAkB,MAAM,4CAA4C;~~AAqB3E~~,MAAMC,UAA+B,GAAGA,CAAC;~~EAAEC~~,KAAK;~~EAAEC~~,IAAI;~~EAAEC~~,cAAc;~~EAAEC~~;~~AAAU~~,CAAC,KAAK;~~EACpF~~,MAAMC,cAAc,~~GAAGX~~,MAAM,CAA6C,IAAI,CAAC;~~EAE~~/E,~~MAAMY~~,qBAAqB,~~GAAGb~~,WAAW,~~CAAqCc~~,KAAK,IAAK;~~IACpFA~~,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;~~IAEvBJ~~,~~cAAc~~,CAACK,OAAO,~~EAAEC~~,~~IAAI~~,CAAC,CAAC;~~EAClC~~,CAAC,~~EAAE~~,~~EAAE~~,CAAC;~~EAEN~~,~~oBACInB~~,KAAA,~~CAAAoB~~,aAAA,~~CAAChB~~,gBAAgB;~~IAACiB~~,OAAO,~~EAAEP~~;~~EAAsB~~,~~gBAC7Cd~~,KAAA,~~CAAAoB~~,aAAA,~~CAACf~~,2BAA2B,~~qBACxBL~~,KAAA,~~CAAAoB~~,aAAA,~~CAACjB~~,IAAI;~~IAACmB~~,KAAK,EAAE,CAAC,yBAAyB;EAAE,CAAE,CAClB,CAAC,~~eAC9BtB~~,KAAA,~~CAAAoB~~,aAAA,~~CAACb~~,kBAAkB;IACfG,IAAI,EAAEA,IAAK;~~IACXa~~,GAAG,~~EAAEV~~,cAAe;~~IACpBW~~,SAAS,~~EAAEb~~,cAAe;IAC1BC,SAAS,EAAEA;~~EAAU~~,~~GAEpB~~,IACe,CAAC,~~eACrBZ~~,KAAA,~~CAAAoB~~,aAAA,~~CAACd~~,oBAAoB,QAAEG,KAA4B,CACrC,CAAC;AAE3B,CAAC;AAEDD,UAAU,~~CAACiB~~,WAAW,GAAG,YAAY;AAErC,~~eAAejB~~,UAAU","ignoreList":[]}
1	+ {"version":3,"file":"SharingBar.js","names":["React","useCallback","useRef","useKeyboardFocusHighlighting","useColorScheme","Icon","StyledSharingBar","StyledSharingBarIconWrapper","StyledSharingBarText","SharingContextMenu","SharingBar","label","link","popupAlignment","container","shouldEnableKeyboardHighlighting","colorScheme","shouldEnableKeyboardHighlightingEffective","contextMenuRef","shouldShowKeyboardHighlighting","showContextMenu","current","show","handleSharingBarClick","event","preventDefault","stopPropagation","handleKeyDown","currentTarget","target","key","createElement","onClick","onKeyDown","undefined","tabIndex","role","icons","ref","alignment","shouldDisableClick","displayName"],"sources":["../../../../src/components/sharing-bar/SharingBar.tsx"],"sourcesContent":["import React, { FC, KeyboardEventHandler, MouseEventHandler, useCallback, useRef } from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n StyledSharingBar,\n StyledSharingBarIconWrapper,\n StyledSharingBarText,\n} from './SharingBar.styles';\nimport type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\n\nexport type SharingBarProps = {\n /*\n The element where the content of the `SharingBar` should be rendered via React Portal.\n /\n container?: Element;\n /\n The label that should be displayed.\n /\n label: string;\n /\n The link that should be shared.\n /\n link: string;\n /\n The alignment of the sharing options.\n /\n popupAlignment: ContextMenuAlignment;\n /\n Enables keyboard-only focus highlighting and keyboard interaction.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst SharingBar: FC<SharingBarProps> = ({\n label,\n link,\n popupAlignment,\n container,\n shouldEnableKeyboardHighlighting,\n}) => {\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const contextMenuRef = useRef<{ hide: VoidFunction; show: VoidFunction }>(null);\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective,\n );\n\n const showContextMenu = useCallback(() => {\n contextMenuRef.current?.show();\n }, []);\n\n const handleSharingBarClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n showContextMenu();\n },\n [showContextMenu],\n );\n\n const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.currentTarget !== event.target) {\n return;\n }\n\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n showContextMenu();\n },\n [showContextMenu],\n );\n\n return (\n <StyledSharingBar\n onClick={handleSharingBarClick}\n onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n tabIndex={shouldEnableKeyboardHighlightingEffective ? 0 : undefined}\n role={shouldEnableKeyboardHighlightingEffective ? 'button' : undefined}\n data-should-show-keyboard-highlighting={\n shouldShowKeyboardHighlighting ? 'true' : undefined\n }\n >\n <StyledSharingBarIconWrapper>\n <Icon icons={['fa-solid fa-share-nodes']} />\n </StyledSharingBarIconWrapper>\n <SharingContextMenu\n link={link}\n ref={contextMenuRef}\n alignment={popupAlignment}\n container={container}\n shouldDisableClick\n >\n {null}\n </SharingContextMenu>\n <StyledSharingBarText>{label}</StyledSharingBarText>\n </StyledSharingBar>\n );\n};\n\nSharingBar.displayName = 'SharingBar';\n\nexport default SharingBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAiDC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAC/F,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,SAASC,cAAc,QAAQ,8CAA8C;AAC7E,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,gBAAgB,EAChBC,2BAA2B,EAC3BC,oBAAoB,QACjB,qBAAqB;AAE5B,OAAOC,kBAAkB,MAAM,4CAA4C;AAyB3E,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,KAAK;EACLC,IAAI;EACJC,cAAc;EACdC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAGZ,cAAc,CAAC,CAAC;EACpC,MAAMa,yCAAyC,GAC3CF,gCAAgC,IAAIC,WAAW,EAAED,gCAAgC,IAAI,KAAK;EAE9F,MAAMG,cAAc,GAAGhB,MAAM,CAA6C,IAAI,CAAC;EAC/E,MAAMiB,8BAA8B,GAAGhB,4BAA4B,CAC/Dc,yCACJ,CAAC;EAED,MAAMG,eAAe,GAAGnB,WAAW,CAAC,MAAM;IACtCiB,cAAc,CAACG,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,qBAAqB,GAAGtB,WAAW,CACpCuB,KAAK,IAAK;IACPA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvBN,eAAe,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,eAAe,CACpB,CAAC;EAED,MAAMO,aAAa,GAAG1B,WAAW,CAC5BuB,KAAK,IAAK;IACP,IAAIA,KAAK,CAACI,aAAa,KAAKJ,KAAK,CAACK,MAAM,EAAE;MACtC;IACJ;IAEA,IAAIL,KAAK,CAACM,GAAG,KAAK,OAAO,IAAIN,KAAK,CAACM,GAAG,KAAK,GAAG,EAAE;MAC5C;IACJ;IAEAN,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IACvBN,eAAe,CAAC,CAAC;EACrB,CAAC,EACD,CAACA,eAAe,CACpB,CAAC;EAED,oBACIpB,KAAA,CAAA+B,aAAA,CAACzB,gBAAgB;IACb0B,OAAO,EAAET,qBAAsB;IAC/BU,SAAS,EAAEhB,yCAAyC,GAAGU,aAAa,GAAGO,SAAU;IACjFC,QAAQ,EAAElB,yCAAyC,GAAG,CAAC,GAAGiB,SAAU;IACpEE,IAAI,EAAEnB,yCAAyC,GAAG,QAAQ,GAAGiB,SAAU;IACvE,0CACIf,8BAA8B,GAAG,MAAM,GAAGe;EAC7C,gBAEDlC,KAAA,CAAA+B,aAAA,CAACxB,2BAA2B,qBACxBP,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IAACgC,KAAK,EAAE,CAAC,yBAAyB;EAAE,CAAE,CAClB,CAAC,eAC9BrC,KAAA,CAAA+B,aAAA,CAACtB,kBAAkB;IACfG,IAAI,EAAEA,IAAK;IACX0B,GAAG,EAAEpB,cAAe;IACpBqB,SAAS,EAAE1B,cAAe;IAC1BC,SAAS,EAAEA,SAAU;IACrB0B,kBAAkB;EAAA,GAEjB,IACe,CAAC,eACrBxC,KAAA,CAAA+B,aAAA,CAACvB,oBAAoB,QAAEG,KAA4B,CACrC,CAAC;AAE3B,CAAC;AAEDD,UAAU,CAAC+B,WAAW,GAAG,YAAY;AAErC,eAAe/B,UAAU","ignoreList":[]}

package/lib/esm/components/sharing-bar/SharingBar.styles.js CHANGED Viewed

@@ -1,9 +1,14 @@
 import styled from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSharingBar = styled.div`
     cursor: pointer;
     display: flex;
     align-items: center;
     width: fit-content;
+    &[data-should-show-keyboard-highlighting='true']:focus-visible {
+        ${keyboardFocusHighlightingRingCss}
+    }
 `;
 export const StyledSharingBarIconWrapper = styled.div``;
 export const StyledSharingBarText = styled.p`

package/lib/esm/components/sharing-bar/SharingBar.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SharingBar.styles.js","names":["styled","StyledSharingBar","div","StyledSharingBarIconWrapper","StyledSharingBarText","p","theme","text"],"sources":["../../../../src/components/sharing-bar/SharingBar.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSharingBar = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n width: fit-content;\n`;\n\nexport const StyledSharingBarIconWrapper = styled.div``;\n\ntype StyledSharingBarTextProps = WithTheme<unknown>;\n\nexport const StyledSharingBarText = styled.p<StyledSharingBarTextProps>`\n color: ${({ theme }: StyledSharingBarTextProps) => theme.text};\n margin: 0 0 0 5px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;~~AAGtC~~,OAAO,MAAMC,gBAAgB,~~GAAGD~~,MAAM,~~CAACE~~,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAMC~~,2BAA2B,~~GAAGH~~,MAAM,~~CAACE~~,GAAG,EAAE;AAIvD,OAAO,MAAME,oBAAoB,~~GAAGJ~~,MAAM,~~CAACK~~,CAA4B;AACvE,aAAa,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjE;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SharingBar.styles.js","names":["styled","keyboardFocusHighlightingRingCss","StyledSharingBar","div","StyledSharingBarIconWrapper","StyledSharingBarText","p","theme","text"],"sources":["../../../../src/components/sharing-bar/SharingBar.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledSharingBar = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n width: fit-content;\n\n &[data-should-show-keyboard-highlighting='true']:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n`;\n\nexport const StyledSharingBarIconWrapper = styled.div``;\n\ntype StyledSharingBarTextProps = WithTheme<unknown>;\n\nexport const StyledSharingBarText = styled.p<StyledSharingBarTextProps>`\n color: ${({ theme }: StyledSharingBarTextProps) => theme.text};\n margin: 0 0 0 5px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,UAAUF,gCAAgC;AAC1C;AACA,CAAC;AAED,OAAO,MAAMG,2BAA2B,GAAGJ,MAAM,CAACG,GAAG,EAAE;AAIvD,OAAO,MAAME,oBAAoB,GAAGL,MAAM,CAACM,CAA4B;AACvE,aAAa,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjE;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/sharing-button/SharingButton.js CHANGED Viewed

@@ -7,7 +7,8 @@ const SharingButton = ({
   alignment,
   container,
   children,
-  isDisabled
+  isDisabled,
+  shouldEnableKeyboardHighlighting
 }) => {
   const contextMenuRef = React.useRef(null);
   const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);
@@ -30,7 +31,8 @@ const SharingButton = ({
     onHide: handleOnHide
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: handleButtonClick,
-    isDisabled: isButtonDisabled || isDisabled
+    isDisabled: isButtonDisabled || isDisabled,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   }, children)));
 };
 export default SharingButton;

package/lib/esm/components/sharing-button/SharingButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SharingButton.js","names":["React","SharingContextMenu","StyledSharingButtonContainer","Button","SharingButton","link","alignment","container","children","isDisabled","contextMenuRef","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","current","show","handleOnShow","handleOnHide","createElement","ref","shouldDisableClick","onShow","onHide","onClick"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n Pick<SharingContextMenuProps, 'link' \| 'alignment' \| 'container'> &\n Pick<ButtonProps, 'isDisabled'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n link,\n alignment,\n container,\n children,\n isDisabled,\n}) => {\n const contextMenuRef = React.useRef<ContextMenuRef>(null);\n const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n const handleButtonClick = () => {\n contextMenuRef.current?.show();\n };\n\n const handleOnShow = () => {\n setIsButtonDisabled(true);\n };\n\n const handleOnHide = () => {\n setIsButtonDisabled(false);\n };\n\n return (\n <StyledSharingButtonContainer>\n <SharingContextMenu\n link={link}\n alignment={alignment}\n container={container}\n ref={contextMenuRef}\n shouldDisableClick\n onShow={handleOnShow}\n onHide={handleOnHide}\n >\n <Button onClick={handleButtonClick} isDisabled={isButtonDisabled \|\| isDisabled}>\n {children}\n </Button>\n </SharingContextMenu>\n </StyledSharingButtonContainer>\n );\n};\n\nexport default SharingButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAgD,OAAO;AAEnE,OAAOC,kBAAkB,MAElB,4CAA4C;AACnD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAOC,MAAM,MAAM,kBAAkB;AAQrC,MAAMC,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,~~GAAGV~~,KAAK,~~CAACW~~,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,~~GAAGb~~,KAAK,~~CAACc~~,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BL,cAAc,CAACM,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBL,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,~~oBACIb~~,KAAA,~~CAAAoB~~,aAAA,~~CAAClB~~,4BAA4B,qBACzBF,KAAA,~~CAAAoB~~,aAAA,~~CAACnB~~,kBAAkB;IACfI,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;~~IACrBc~~,GAAG,EAAEX,cAAe;IACpBY,kBAAkB;IAClBC,MAAM,EAAEL,YAAa;IACrBM,MAAM,EAAEL;EAAa,~~gBAErBnB~~,KAAA,~~CAAAoB~~,aAAA,~~CAACjB~~,MAAM;~~IAACsB~~,OAAO,EAAEV,iBAAkB;~~IAACN~~,UAAU,~~EAAEG~~,gBAAgB,~~IAAIH~~;~~EAAW~~,~~GAC1ED~~,QACG,CACQ,CACM,CAAC;AAEvC,CAAC;AAED,eAAeJ,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"SharingButton.js","names":["React","SharingContextMenu","StyledSharingButtonContainer","Button","SharingButton","link","alignment","container","children","isDisabled","shouldEnableKeyboardHighlighting","contextMenuRef","useRef","isButtonDisabled","setIsButtonDisabled","useState","handleButtonClick","current","show","handleOnShow","handleOnHide","createElement","ref","shouldDisableClick","onShow","onHide","onClick"],"sources":["../../../../src/components/sharing-button/SharingButton.tsx"],"sourcesContent":["import React, { FunctionComponent, PropsWithChildren } from 'react';\nimport { ContextMenuRef } from '../context-menu/ContextMenu.types';\nimport SharingContextMenu, {\n SharingContextMenuProps,\n} from '../sharing-context-menu/SharingContextMenu';\nimport { StyledSharingButtonContainer } from './SharingButton.styles';\nimport Button from '../button/Button';\nimport { ButtonProps } from '../button/Button.types';\n\nexport type SharingButtonProps = PropsWithChildren<\n Pick<SharingContextMenuProps, 'link' \| 'alignment' \| 'container'> &\n Pick<ButtonProps, 'isDisabled' \| 'shouldEnableKeyboardHighlighting'>\n>;\n\nconst SharingButton: FunctionComponent<SharingButtonProps> = ({\n link,\n alignment,\n container,\n children,\n isDisabled,\n shouldEnableKeyboardHighlighting,\n}) => {\n const contextMenuRef = React.useRef<ContextMenuRef>(null);\n const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);\n\n const handleButtonClick = () => {\n contextMenuRef.current?.show();\n };\n\n const handleOnShow = () => {\n setIsButtonDisabled(true);\n };\n\n const handleOnHide = () => {\n setIsButtonDisabled(false);\n };\n\n return (\n <StyledSharingButtonContainer>\n <SharingContextMenu\n link={link}\n alignment={alignment}\n container={container}\n ref={contextMenuRef}\n shouldDisableClick\n onShow={handleOnShow}\n onHide={handleOnHide}\n >\n <Button\n onClick={handleButtonClick}\n isDisabled={isButtonDisabled \|\| isDisabled}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n >\n {children}\n </Button>\n </SharingContextMenu>\n </StyledSharingButtonContainer>\n );\n};\n\nexport default SharingButton;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAgD,OAAO;AAEnE,OAAOC,kBAAkB,MAElB,4CAA4C;AACnD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,OAAOC,MAAM,MAAM,kBAAkB;AAQrC,MAAMC,aAAoD,GAAGA,CAAC;EAC1DC,IAAI;EACJC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,UAAU;EACVC;AACJ,CAAC,KAAK;EACF,MAAMC,cAAc,GAAGX,KAAK,CAACY,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BL,cAAc,CAACM,OAAO,EAAEC,IAAI,CAAC,CAAC;EAClC,CAAC;EAED,MAAMC,YAAY,GAAGA,CAAA,KAAM;IACvBL,mBAAmB,CAAC,IAAI,CAAC;EAC7B,CAAC;EAED,MAAMM,YAAY,GAAGA,CAAA,KAAM;IACvBN,mBAAmB,CAAC,KAAK,CAAC;EAC9B,CAAC;EAED,oBACId,KAAA,CAAAqB,aAAA,CAACnB,4BAA4B,qBACzBF,KAAA,CAAAqB,aAAA,CAACpB,kBAAkB;IACfI,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,SAAS,EAAEA,SAAU;IACrBe,GAAG,EAAEX,cAAe;IACpBY,kBAAkB;IAClBC,MAAM,EAAEL,YAAa;IACrBM,MAAM,EAAEL;EAAa,gBAErBpB,KAAA,CAAAqB,aAAA,CAAClB,MAAM;IACHuB,OAAO,EAAEV,iBAAkB;IAC3BP,UAAU,EAAEI,gBAAgB,IAAIJ,UAAW;IAC3CC,gCAAgC,EAAEA;EAAiC,GAElEF,QACG,CACQ,CACM,CAAC;AAEvC,CAAC;AAED,eAAeJ,aAAa","ignoreList":[]}

package/lib/esm/components/sharing-context-menu/SharingContextMenu.js CHANGED Viewed

@@ -8,6 +8,7 @@ import ContextMenu from '../context-menu/ContextMenu';
 const SharingContextMenu = /*#__PURE__*/forwardRef(({
   link,
   children,
+  shouldEnableKeyboardHighlighting,
   ...contextMenuProps
 }, ref) => {
   const isTouch = useIsTouch();
@@ -90,7 +91,8 @@ const SharingContextMenu = /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line react/jsx-props-no-spreading
     React.createElement(ContextMenu, _extends({
       items: contextMenuItems,
-      ref: ref
+      ref: ref,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
     }, contextMenuProps), children)
   );
 });

package/lib/esm/components/sharing-context-menu/SharingContextMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SharingContextMenu.js","names":["getSite","React","forwardRef","useCallback","SHAREPROVIDER","useIsTouch","copyToClipboard","shareWithApp","shareWithUrl","ContextMenu","SharingContextMenu","link","children","contextMenuProps","ref","isTouch","handleImageDownload","url","replace","encodeURIComponent","color","handleShare","key","trim","contextMenuItems","icons","onClick","text","createElement","_extends","items","displayName"],"sources":["../../../../src/components/sharing-context-menu/SharingContextMenu.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { forwardRef, useCallback } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport { useIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport { ContextMenuProps, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport type SharingContextMenuProps = {\n /*\n The link that should be shared.\n */\n link: string;\n} & Omit<ContextMenuProps, 'items'>;\n\nconst SharingContextMenu = forwardRef<ContextMenuRef, SharingContextMenuProps>(\n ({ link, children, ...contextMenuProps }, ref) => {\n const isTouch = useIsTouch();\n\n const handleImageDownload = useCallback(() => {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[5].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', 'Teilen')\n .replace('{color}', getSite().color.replace('#', '')),\n );\n }, [link]);\n\n const handleShare = useCallback(\n (key: string) => {\n switch (key) {\n case 'whatsapp':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[0].url.replace(\n '{url}',\n encodeURIComponent(`${link}`.trim()),\n ),\n );\n break;\n case 'facebook':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)),\n );\n break;\n case 'twitter':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[4].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', ''),\n );\n break;\n case 'mail':\n if (isTouch) {\n shareWithApp(`${link}`.trim());\n } else {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[2].url.replace(\n '{url}',\n encodeURIComponent(`${link}`.trim()),\n ),\n );\n }\n break;\n case 'copy':\n copyToClipboard(link);\n break;\n default:\n break;\n }\n },\n [link, isTouch],\n );\n\n const contextMenuItems = [\n {\n icons: ['fa fa-copy'],\n key: 'copy',\n onClick: () => handleShare('copy'),\n text: 'Zwischenablage',\n },\n {\n icons: ['fa-solid fa-brands fa-whatsapp'],\n key: 'whatsapp',\n onClick: () => handleShare('whatsapp'),\n text: 'Whatsapp',\n },\n {\n icons: ['fa-solid fa-brands fa-facebook-f'],\n key: 'facebook',\n onClick: () => handleShare('facebook'),\n text: 'Facebook',\n },\n {\n icons: ['fa-solid fa-brands fa-x-twitter'],\n key: 'twitter',\n onClick: () => handleShare('twitter'),\n text: 'X',\n },\n {\n icons: ['fa fa-envelope'],\n key: 'mail',\n onClick: () => handleShare('mail'),\n text: 'Mail',\n },\n {\n icons: ['fa fa-qrcode'],\n key: 'callingCode',\n onClick: handleImageDownload,\n text: 'Calling Code herunterladen',\n },\n ];\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <ContextMenu items={contextMenuItems} ref={ref} {...contextMenuProps}>\n {children}\n </ContextMenu>\n );\n },\n);\n\nSharingContextMenu.displayName = 'SharingContextMenu';\n\nexport default SharingContextMenu;\n"],"mappings":";AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,WAAW,QAAQ,OAAO;AACtD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,eAAe,EAAEC,YAAY,EAAEC,YAAY,QAAQ,wBAAwB;AACpF,OAAOC,WAAW,MAAM,6BAA6B;~~AAUrD~~,MAAMC,kBAAkB,gBAAGR,UAAU,CACjC,CAAC;EAAES,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAiB,CAAC,EAAEC,GAAG,KAAK;~~EAC9C~~,MAAMC,OAAO,~~GAAGV~~,UAAU,CAAC,CAAC;EAE5B,~~MAAMW~~,mBAAmB,~~GAAGb~~,WAAW,CAAC,MAAM;IAC1CK,YAAY;IACR;IACA;IACAJ,aAAa,CAAC,CAAC,CAAC,~~CAACa~~,GAAG,CACfC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,~~CAACR~~,IAAI,CAAC,CAAC,~~CAC1CO~~,OAAO,CAAC,YAAY,EAAE,QAAQ,CAAC,CAC/BA,OAAO,CAAC,SAAS,~~EAAElB~~,OAAO,CAAC,CAAC,~~CAACoB~~,KAAK,CAACF,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5D,CAAC;EACL,CAAC,EAAE,~~CAACP~~,IAAI,CAAC,CAAC;EAEV,~~MAAMU~~,WAAW,~~GAAGlB~~,WAAW,~~CAC1BmB~~,GAAW,IAAK;IACb,QAAQA,GAAG;MACP,KAAK,UAAU;~~QACXd~~,YAAY;QACR;QACA;QACAJ,aAAa,CAAC,CAAC,CAAC,~~CAACa~~,GAAG,CAACC,OAAO,CACxB,OAAO,EACPC,kBAAkB,CAAC,~~GAAGR~~,IAAI,EAAE,~~CAACY~~,IAAI,CAAC,CAAC,CACvC,CACJ,CAAC;QACD;MACJ,KAAK,UAAU;~~QACXf~~,YAAY;QACR;QACA;QACAJ,aAAa,CAAC,CAAC,CAAC,~~CAACa~~,GAAG,CAACC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,~~CAACR~~,IAAI,CAAC,CAClE,CAAC;QACD;MACJ,KAAK,SAAS;QACVH,YAAY;QACR;QACA;QACAJ,aAAa,CAAC,CAAC,CAAC,~~CAACa~~,GAAG,CACfC,OAAO,CAAC,OAAO,EAAEC,kBAAkB,~~CAACR~~,IAAI,CAAC,CAAC,~~CAC1CO~~,OAAO,CAAC,YAAY,EAAE,EAAE,CACjC,CAAC;QACD;MACJ,KAAK,MAAM;QACP,IAAIH,OAAO,EAAE;~~UACTR~~,YAAY,CAAC,GAAGI,IAAI,EAAE,~~CAACY~~,IAAI,CAAC,CAAC,CAAC;QAClC,CAAC,MAAM;~~UACHf~~,YAAY;UACR;UACA;UACAJ,aAAa,CAAC,CAAC,CAAC,~~CAACa~~,GAAG,CAACC,OAAO,CACxB,OAAO,EACPC,kBAAkB,CAAC,~~GAAGR~~,IAAI,EAAE,~~CAACY~~,IAAI,CAAC,CAAC,CACvC,CACJ,CAAC;QACL;QACA;MACJ,KAAK,MAAM;~~QACPjB~~,eAAe,CAACK,IAAI,CAAC;QACrB;MACJ;QACI;IACR;EACJ,CAAC,EACD,CAACA,IAAI,~~EAAEI~~,OAAO,CAClB,CAAC;EAED,MAAMS,gBAAgB,GAAG,CACrB;IACIC,KAAK,EAAE,CAAC,YAAY,CAAC;IACrBH,GAAG,EAAE,MAAM;IACXI,OAAO,EAAEA,CAAA,KAAML,WAAW,CAAC,MAAM,CAAC;IAClCM,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,gCAAgC,CAAC;IACzCH,GAAG,EAAE,UAAU;IACfI,OAAO,EAAEA,CAAA,KAAML,WAAW,CAAC,UAAU,CAAC;IACtCM,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,kCAAkC,CAAC;IAC3CH,GAAG,EAAE,UAAU;IACfI,OAAO,EAAEA,CAAA,KAAML,WAAW,CAAC,UAAU,CAAC;IACtCM,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,iCAAiC,CAAC;IAC1CH,GAAG,EAAE,SAAS;IACdI,OAAO,EAAEA,CAAA,KAAML,WAAW,CAAC,SAAS,CAAC;IACrCM,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,gBAAgB,CAAC;IACzBH,GAAG,EAAE,MAAM;IACXI,OAAO,EAAEA,CAAA,KAAML,WAAW,CAAC,MAAM,CAAC;IAClCM,IAAI,EAAE;EACV,CAAC,EACD;IACIF,KAAK,EAAE,CAAC,cAAc,CAAC;IACvBH,GAAG,EAAE,aAAa;IAClBI,OAAO,EAAEV,mBAAmB;IAC5BW,IAAI,EAAE;EACV,CAAC,CACJ;EAED;IAAA;IACI;~~IACA1B~~,KAAA,~~CAAA2B~~,aAAA,~~CAACnB~~,WAAW,~~EAAAoB~~,QAAA;~~MAACC~~,KAAK,EAAEN,gBAAiB;~~MAACV~~,GAAG,EAAEA;~~IAAI~~,~~GAAKD~~,~~gBAAgB~~,GAC/DD,QACQ;EAAC;AAEtB,CACJ,CAAC;AAEDF,kBAAkB,~~CAACqB~~,WAAW,GAAG,oBAAoB;AAErD,~~eAAerB~~,kBAAkB","ignoreList":[]}
1	+ {"version":3,"file":"SharingContextMenu.js","names":["getSite","React","forwardRef","useCallback","SHAREPROVIDER","useIsTouch","copyToClipboard","shareWithApp","shareWithUrl","ContextMenu","SharingContextMenu","link","children","shouldEnableKeyboardHighlighting","contextMenuProps","ref","isTouch","handleImageDownload","url","replace","encodeURIComponent","color","handleShare","key","trim","contextMenuItems","icons","onClick","text","createElement","_extends","items","displayName"],"sources":["../../../../src/components/sharing-context-menu/SharingContextMenu.tsx"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport React, { forwardRef, useCallback } from 'react';\nimport { SHAREPROVIDER } from '../../constants/sharingBar';\nimport { useIsTouch } from '../../utils/environment';\nimport { copyToClipboard, shareWithApp, shareWithUrl } from '../../utils/sharingBar';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport { ContextMenuProps, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport type SharingContextMenuProps = {\n /*\n The link that should be shared.\n /\n link: string;\n /\n Enables keyboard-only focus highlighting for the context menu trigger.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n} & Omit<ContextMenuProps, 'items' \| 'shouldEnableKeyboardHighlighting'>;\n\nconst SharingContextMenu = forwardRef<ContextMenuRef, SharingContextMenuProps>(\n ({ link, children, shouldEnableKeyboardHighlighting, ...contextMenuProps }, ref) => {\n const isTouch = useIsTouch();\n\n const handleImageDownload = useCallback(() => {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[5].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', 'Teilen')\n .replace('{color}', getSite().color.replace('#', '')),\n );\n }, [link]);\n\n const handleShare = useCallback(\n (key: string) => {\n switch (key) {\n case 'whatsapp':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[0].url.replace(\n '{url}',\n encodeURIComponent(`${link}`.trim()),\n ),\n );\n break;\n case 'facebook':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[3].url.replace('{url}', encodeURIComponent(link)),\n );\n break;\n case 'twitter':\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[4].url\n .replace('{url}', encodeURIComponent(link))\n .replace('{linkText}', ''),\n );\n break;\n case 'mail':\n if (isTouch) {\n shareWithApp(`${link}`.trim());\n } else {\n shareWithUrl(\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n SHAREPROVIDER[2].url.replace(\n '{url}',\n encodeURIComponent(`${link}`.trim()),\n ),\n );\n }\n break;\n case 'copy':\n copyToClipboard(link);\n break;\n default:\n break;\n }\n },\n [link, isTouch],\n );\n\n const contextMenuItems = [\n {\n icons: ['fa fa-copy'],\n key: 'copy',\n onClick: () => handleShare('copy'),\n text: 'Zwischenablage',\n },\n {\n icons: ['fa-solid fa-brands fa-whatsapp'],\n key: 'whatsapp',\n onClick: () => handleShare('whatsapp'),\n text: 'Whatsapp',\n },\n {\n icons: ['fa-solid fa-brands fa-facebook-f'],\n key: 'facebook',\n onClick: () => handleShare('facebook'),\n text: 'Facebook',\n },\n {\n icons: ['fa-solid fa-brands fa-x-twitter'],\n key: 'twitter',\n onClick: () => handleShare('twitter'),\n text: 'X',\n },\n {\n icons: ['fa fa-envelope'],\n key: 'mail',\n onClick: () => handleShare('mail'),\n text: 'Mail',\n },\n {\n icons: ['fa fa-qrcode'],\n key: 'callingCode',\n onClick: handleImageDownload,\n text: 'Calling Code herunterladen',\n },\n ];\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <ContextMenu\n items={contextMenuItems}\n ref={ref}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n {...contextMenuProps}\n >\n {children}\n </ContextMenu>\n );\n },\n);\n\nSharingContextMenu.displayName = 'SharingContextMenu';\n\nexport default SharingContextMenu;\n"],"mappings":"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","ignoreList":[]}