@chayns-components/core 5.5.21 → 5.5.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js +2 -2
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/cjs/components/copyable-content/copyableContentClipboard.test.js +7 -0
- package/lib/cjs/components/copyable-content/copyableContentClipboard.test.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js +1 -1
- package/lib/cjs/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/cjs/types/radioButton.js.map +1 -1
- package/lib/cjs/utils/radioButton.js +1 -1
- package/lib/cjs/utils/radioButton.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.styles.js +2 -2
- package/lib/esm/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/esm/components/copyable-content/copyableContentClipboard.test.js +7 -0
- package/lib/esm/components/copyable-content/copyableContentClipboard.test.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js +1 -1
- package/lib/esm/components/radio-button/radio-button-group/RadioButtonGroup.js.map +1 -1
- package/lib/esm/types/radioButton.js.map +1 -1
- package/lib/esm/utils/radioButton.js +1 -1
- package/lib/esm/utils/radioButton.js.map +1 -1
- package/lib/types/components/copyable-content/CopyableContent.d.ts +9 -0
- package/lib/types/components/radio-button/RadioButton.d.ts +1 -1
- package/lib/types/components/radio-button/radio-button-group/RadioButtonGroup.d.ts +6 -6
- package/lib/types/types/radioButton.d.ts +1 -1
- package/lib/types/utils/radioButton.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionState","_SharingContextMenu","_Icon","_CopyableContent","_CopyableContent2","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyableContent","appearance","CopyableContentAppearance","Default","content","children","copyFailedMessage","rootRef","useRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyableContent","$appearance","className","ref","StyledCopyableContentActions","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","StyledCopyableContentBody","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n content: string;\n children?: ReactNode;\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n <StyledCopyableContentBody>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionState","_SharingContextMenu","_Icon","_CopyableContent","_CopyableContent2","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyableContent","appearance","CopyableContentAppearance","Default","content","children","copyFailedMessage","rootRef","useRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyableContent","$appearance","className","ref","StyledCopyableContentActions","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","StyledCopyableContentBody","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n <StyledCopyableContentBody>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,7 +12,7 @@ const getBackgroundColor = ({
|
|
|
12
12
|
theme
|
|
13
13
|
}) => {
|
|
14
14
|
if ($appearance === _CopyableContent.CopyableContentAppearance.Chat) {
|
|
15
|
-
return 'rgba(0, 0, 0, 0.
|
|
15
|
+
return 'rgba(0, 0, 0, 0.12)';
|
|
16
16
|
}
|
|
17
17
|
const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';
|
|
18
18
|
const opacity = theme.cardBackgroundOpacity ?? 1;
|
|
@@ -22,7 +22,7 @@ const StyledCopyableContent = exports.StyledCopyableContent = _styledComponents.
|
|
|
22
22
|
--copyable-content-action-size: 32px;
|
|
23
23
|
--copyable-content-action-inset: 8px;
|
|
24
24
|
|
|
25
|
-
margin:
|
|
25
|
+
margin: 8px 0;
|
|
26
26
|
min-width: 0;
|
|
27
27
|
max-width: 100%;
|
|
28
28
|
overflow-x: clip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_CopyableContent","e","__esModule","default","getBackgroundColor","$appearance","theme","CopyableContentAppearance","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","exports","styled","section","cardBorderRadius","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.
|
|
1
|
+
{"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_CopyableContent","e","__esModule","default","getBackgroundColor","$appearance","theme","CopyableContentAppearance","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","exports","styled","section","cardBorderRadius","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';\n const opacity = theme.cardBackgroundOpacity ?? 1;\n\n return `rgba(${secondaryColor}, ${opacity})`;\n};\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 8px 0;\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: ${({ theme }) => theme.cardBorderRadius}px;\n background-color: ${getBackgroundColor};\n color: ${({ theme }) => theme.text};\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${({ $isSticky, theme }) => ($isSticky ? theme['202'] : 'transparent')};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${({ $isSticky, theme }) => ($isSticky ? theme['100'] : 'transparent')};\n color: ${({ theme }) => theme.text};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.16)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n background-color: rgba(${({ theme }) => theme['text-rgb']}, 0.1);\n box-shadow: inset 0 0 0 1px rgba(${({ theme }) => theme['text-rgb']}, 0.06);\n }\n\n &:active {\n transform: scale(0.9);\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentBody = styled.div<WithTheme<unknown>>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: 0 12px 12px;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${({ theme }) => theme.headline};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${({ theme }) => theme['202']};\n }\n\n a {\n color: ${({ theme }) => theme.primary};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,6 +13,7 @@ const readBlob = blob => new Promise((resolve, reject) => {
|
|
|
13
13
|
(0, _vitest.describe)('copyableContentToClipboard', () => {
|
|
14
14
|
(0, _vitest.afterEach)(() => {
|
|
15
15
|
_vitest.vi.restoreAllMocks();
|
|
16
|
+
_vitest.vi.unstubAllGlobals();
|
|
16
17
|
});
|
|
17
18
|
(0, _vitest.it)('writes readable plain text first and safe HTML second', async () => {
|
|
18
19
|
const write = _vitest.vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();
|
|
@@ -38,5 +39,11 @@ const readBlob = blob => new Promise((resolve, reject) => {
|
|
|
38
39
|
await (0, _copyableContentClipboard.copyableContentToClipboard)(source);
|
|
39
40
|
(0, _vitest.expect)(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
40
41
|
});
|
|
42
|
+
(0, _vitest.it)('uses writeText when ClipboardItem is unavailable', async () => {
|
|
43
|
+
_vitest.vi.stubGlobal('ClipboardItem', undefined);
|
|
44
|
+
const writeText = _vitest.vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();
|
|
45
|
+
await (0, _copyableContentClipboard.copyableContentToClipboard)(source);
|
|
46
|
+
(0, _vitest.expect)(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
47
|
+
});
|
|
41
48
|
});
|
|
42
49
|
//# sourceMappingURL=copyableContentClipboard.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyableContentClipboard.test.js","names":["_format","require","_vitest","_copyableContentClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","describe","afterEach","vi","restoreAllMocks","it","write","spyOn","navigator","clipboard","mockResolvedValue","copyableContentToClipboard","item","mock","calls","expect","Object","keys","items","toEqual","getType","resolves","toBe","formatStringToHtml","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\n\nconst readBlob = (blob: Blob) =>\n new Promise<string>((resolve, reject) => {\n const reader = new FileReader();\n reader.onerror = () => reject(reader.error);\n reader.onload = () => resolve(reader.result as string);\n reader.readAsText(blob);\n });\n\ndescribe('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":";;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,yBAAA,GAAAF,OAAA;AAEA,MAAMG,MAAM,GAAG,0CAA0C;AAEzD,MAAMC,QAAQ,GAAIC,IAAU,IACxB,IAAIC,OAAO,CAAS,CAACC,OAAO,EAAEC,MAAM,KAAK;EACrC,MAAMC,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAC/BD,MAAM,CAACE,OAAO,GAAG,MAAMH,MAAM,CAACC,MAAM,CAACG,KAAK,CAAC;EAC3CH,MAAM,CAACI,MAAM,GAAG,MAAMN,OAAO,CAACE,MAAM,CAACK,MAAgB,CAAC;EACtDL,MAAM,CAACM,UAAU,CAACV,IAAI,CAAC;AAC3B,CAAC,CAAC;AAEN,IAAAW,gBAAQ,EAAC,4BAA4B,EAAE,MAAM;EACzC,IAAAC,iBAAS,EAAC,MAAM;IACZC,UAAE,CAACC,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"copyableContentClipboard.test.js","names":["_format","require","_vitest","_copyableContentClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","describe","afterEach","vi","restoreAllMocks","unstubAllGlobals","it","write","spyOn","navigator","clipboard","mockResolvedValue","copyableContentToClipboard","item","mock","calls","expect","Object","keys","items","toEqual","getType","resolves","toBe","formatStringToHtml","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith","stubGlobal","undefined"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\n\nconst readBlob = (blob: Blob) =>\n new Promise<string>((resolve, reject) => {\n const reader = new FileReader();\n reader.onerror = () => reject(reader.error);\n reader.onload = () => resolve(reader.result as string);\n reader.readAsText(blob);\n });\n\ndescribe('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n vi.unstubAllGlobals();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n\n it('uses writeText when ClipboardItem is unavailable', async () => {\n vi.stubGlobal('ClipboardItem', undefined);\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["_react","require","_react2","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_calculate","_useKeyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","shouldShowCentered","isDisabled","shouldEnableKeyboardHighlighting","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","shouldEnableKeyboardHighlightingFromGroup","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","radioButtonTop","setRadioButtonTop","undefined","radioButtonBoxRef","useRef","radioButtonRootRef","isInGroup","isMarked","uncheckable","effectiveShouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useEffect","current","_radioButtonBoxRef$cu","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","handleClick","useCallback","prev","handleMouseEnter","handleMouseLeave","handleKeyDown","event","key","preventDefault","radioButtonRightElementMargin","useMemo","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","StyledRadioButton","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","ref","$shouldShowKeyboardHighlighting","StyledRadioButtonCheckBox","onClick","onMouseEnter","onMouseLeave","onKeyDown","disabled","type","checked","onChange","StyledRadioButtonPseudoCheckBox","$isChecked","style","top","transform","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledLabelWrapper","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n useRef,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledLabelWrapper,\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: ReactNode;\n /**\n * An element that should be displayed on the right side of the label.\n */\n rightElement?: ReactNode;\n /**\n * Whether the rightElement should only be displayed when the RadioButton is checked\n */\n shouldShowRightElementOnlyOnChecked?: boolean;\n /**\n * Whether the RadioButton should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n shouldShowRightElementOnlyOnChecked = false,\n label,\n id,\n rightElement,\n shouldShowCentered = true,\n isDisabled = false,\n shouldEnableKeyboardHighlighting,\n}) => {\n const {\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonRightElements,\n updateHasRightElement,\n radioButtonsCanBeUnchecked,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingFromGroup,\n } = useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [radioButtonTop, setRadioButtonTop] = useState<number | undefined>(undefined);\n\n const radioButtonBoxRef = useRef<HTMLDivElement>(null);\n const radioButtonRootRef = useRef<HTMLDivElement>(null);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n const effectiveShouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n effectiveShouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n useEffect(() => {\n if (radioButtonRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: radioButtonRootRef.current,\n });\n\n const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setRadioButtonTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleClick();\n }\n },\n [handleClick],\n );\n\n const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n if (!radioButtonRightElements) {\n return 'NONE';\n }\n\n const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n if (index < 0) {\n return 'NONE';\n }\n\n const prevButton = radioButtonRightElements[index - 1];\n const currentButton = radioButtonRightElements[index];\n const nextButton = radioButtonRightElements[index + 1];\n\n if (!currentButton?.hasRightElement) {\n return 'NONE';\n }\n\n switch (true) {\n case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n return 'TOP';\n case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n return 'BOTTOM';\n case currentButton?.hasRightElement &&\n !nextButton?.hasRightElement &&\n !prevButton?.hasRightElement:\n return 'NONE';\n default:\n return 'BOTH';\n }\n }, [id, radioButtonRightElements]);\n\n const shouldShowRightElement = useMemo(() => {\n if (rightElement) {\n if (shouldShowRightElementOnlyOnChecked) {\n return isMarked;\n }\n\n return true;\n }\n\n return false;\n }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n useEffect(() => {\n if (typeof updateHasRightElement === 'function') {\n window.setTimeout(() => {\n updateHasRightElement(id, shouldShowRightElement);\n }, 10);\n }\n }, [id, shouldShowRightElement, updateHasRightElement]);\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n $radioButtonRightElementMargin={radioButtonRightElementMargin}\n >\n <StyledRadioButtonWrapper\n ref={radioButtonRootRef}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledRadioButtonCheckBox\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onKeyDown={handleKeyDown}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n <StyledRadioButtonPseudoCheckBox\n $isDisabled={isDisabled}\n $isChecked={isMarked}\n ref={radioButtonBoxRef}\n onClick={handleClick}\n style={{\n top: shouldShowCentered ? '50%' : radioButtonTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledRadioButtonCheckBoxMark\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledLabelWrapper>\n {label && (\n <StyledRadioButtonLabel\n $isDisabled={isDisabled}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {label}\n </StyledRadioButtonLabel>\n )}\n {shouldShowRightElement && rightElement}\n </StyledLabelWrapper>\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [\n children,\n handleClick,\n handleKeyDown,\n handleMouseEnter,\n isDisabled,\n isHovered,\n isMarked,\n label,\n radioButtonRightElementMargin,\n radioButtonTop,\n rightElement,\n shouldShowCentered,\n shouldShowKeyboardHighlighting,\n shouldShowRightElement,\n ],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["_react","require","_react2","_interopRequireWildcard","_RadioButtonGroup","_RadioButton","_calculate","_useKeyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","shouldShowCentered","isDisabled","shouldEnableKeyboardHighlighting","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","shouldEnableKeyboardHighlightingFromGroup","useContext","RadioButtonGroupContext","internalIsChecked","setInternalIsChecked","useState","isHovered","setIsHovered","radioButtonTop","setRadioButtonTop","undefined","radioButtonBoxRef","useRef","radioButtonRootRef","isInGroup","isMarked","uncheckable","effectiveShouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useEffect","current","_radioButtonBoxRef$cu","singleLineHeight","getHeightOfSingleTextLine","container","boxHeight","getBoundingClientRect","height","handleClick","useCallback","prev","handleMouseEnter","handleMouseLeave","handleKeyDown","event","key","preventDefault","radioButtonRightElementMargin","useMemo","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","StyledRadioButton","$isDisabled","$radioButtonRightElementMargin","StyledRadioButtonWrapper","ref","$shouldShowKeyboardHighlighting","StyledRadioButtonCheckBox","onClick","onMouseEnter","onMouseLeave","onKeyDown","disabled","type","checked","onChange","StyledRadioButtonPseudoCheckBox","$isChecked","style","top","transform","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledLabelWrapper","StyledRadioButtonLabel","AnimatePresence","initial","StyledMotionRadioButtonChildren","animate","opacity","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n useRef,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledLabelWrapper,\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string | number;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: ReactNode;\n /**\n * An element that should be displayed on the right side of the label.\n */\n rightElement?: ReactNode;\n /**\n * Whether the rightElement should only be displayed when the RadioButton is checked\n */\n shouldShowRightElementOnlyOnChecked?: boolean;\n /**\n * Whether the RadioButton should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n shouldShowRightElementOnlyOnChecked = false,\n label,\n id,\n rightElement,\n shouldShowCentered = true,\n isDisabled = false,\n shouldEnableKeyboardHighlighting,\n}) => {\n const {\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonRightElements,\n updateHasRightElement,\n radioButtonsCanBeUnchecked,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingFromGroup,\n } = useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [radioButtonTop, setRadioButtonTop] = useState<number | undefined>(undefined);\n\n const radioButtonBoxRef = useRef<HTMLDivElement>(null);\n const radioButtonRootRef = useRef<HTMLDivElement>(null);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n const effectiveShouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n effectiveShouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n useEffect(() => {\n if (radioButtonRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: radioButtonRootRef.current,\n });\n\n const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setRadioButtonTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleClick();\n }\n },\n [handleClick],\n );\n\n const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n if (!radioButtonRightElements) {\n return 'NONE';\n }\n\n const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n if (index < 0) {\n return 'NONE';\n }\n\n const prevButton = radioButtonRightElements[index - 1];\n const currentButton = radioButtonRightElements[index];\n const nextButton = radioButtonRightElements[index + 1];\n\n if (!currentButton?.hasRightElement) {\n return 'NONE';\n }\n\n switch (true) {\n case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n return 'TOP';\n case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n return 'BOTTOM';\n case currentButton?.hasRightElement &&\n !nextButton?.hasRightElement &&\n !prevButton?.hasRightElement:\n return 'NONE';\n default:\n return 'BOTH';\n }\n }, [id, radioButtonRightElements]);\n\n const shouldShowRightElement = useMemo(() => {\n if (rightElement) {\n if (shouldShowRightElementOnlyOnChecked) {\n return isMarked;\n }\n\n return true;\n }\n\n return false;\n }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n useEffect(() => {\n if (typeof updateHasRightElement === 'function') {\n window.setTimeout(() => {\n updateHasRightElement(id, shouldShowRightElement);\n }, 10);\n }\n }, [id, shouldShowRightElement, updateHasRightElement]);\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n $radioButtonRightElementMargin={radioButtonRightElementMargin}\n >\n <StyledRadioButtonWrapper\n ref={radioButtonRootRef}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledRadioButtonCheckBox\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onKeyDown={handleKeyDown}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n <StyledRadioButtonPseudoCheckBox\n $isDisabled={isDisabled}\n $isChecked={isMarked}\n ref={radioButtonBoxRef}\n onClick={handleClick}\n style={{\n top: shouldShowCentered ? '50%' : radioButtonTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledRadioButtonCheckBoxMark\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledLabelWrapper>\n {label && (\n <StyledRadioButtonLabel\n $isDisabled={isDisabled}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {label}\n </StyledRadioButtonLabel>\n )}\n {shouldShowRightElement && rightElement}\n </StyledLabelWrapper>\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [\n children,\n handleClick,\n handleKeyDown,\n handleMouseEnter,\n isDisabled,\n isHovered,\n isMarked,\n label,\n radioButtonRightElementMargin,\n radioButtonTop,\n rightElement,\n shouldShowCentered,\n shouldShowKeyboardHighlighting,\n shouldShowRightElement,\n ],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -25,7 +25,7 @@ const RadioButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
25
25
|
}, ref) => {
|
|
26
26
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = (0, _react.useState)(undefined);
|
|
27
27
|
const [radioButtonRightElements, setRadioButtonRightElements] = (0, _react.useState)([]);
|
|
28
|
-
const isControlled =
|
|
28
|
+
const isControlled = selectedId !== undefined;
|
|
29
29
|
(0, _react.useEffect)(() => {
|
|
30
30
|
setSelectedRadioButtonId(selectedId);
|
|
31
31
|
}, [selectedId]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_radioButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","shouldEnableKeyboardHighlighting","displayName","RadioButtonGroup","forwardRef","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","useState","setRadioButtonRightElements","isControlled","useEffect","useCallback","id","hasRightElement","prevState","map","prev","ids","getRadioButtonOrder","rightElements","useImperativeHandle","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ntype IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonRightElements: IRadioButtonRightElements;\n updateHasRightElement?: IUpdateHasRightElement;\n radioButtonsCanBeUnchecked?: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n radioButtonRightElements: [],\n updateHasRightElement: undefined,\n shouldEnableKeyboardHighlighting: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport interface RadioButtonGroupRef {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n}\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * Enables keyboard-only focus highlighting for all RadioButtons in this group.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n (\n {\n children,\n canUncheckRadioButtons,\n selectedId,\n onSelect,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n const [radioButtonRightElements, setRadioButtonRightElements] =\n useState<IRadioButtonRightElements>([]);\n\n const isControlled =
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","names":["_react","_interopRequireWildcard","require","_radioButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RadioButtonGroupContext","exports","React","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","shouldEnableKeyboardHighlighting","displayName","RadioButtonGroup","forwardRef","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","useState","setRadioButtonRightElements","isControlled","useEffect","useCallback","id","hasRightElement","prevState","map","prev","ids","getRadioButtonOrder","rightElements","useImperativeHandle","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string | number | undefined) => void;\n\ntype IUpdateHasRightElement = (id: string | number, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string | number; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | number | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonRightElements: IRadioButtonRightElements;\n updateHasRightElement?: IUpdateHasRightElement;\n radioButtonsCanBeUnchecked?: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n radioButtonRightElements: [],\n updateHasRightElement: undefined,\n shouldEnableKeyboardHighlighting: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport interface RadioButtonGroupRef {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n}\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * Enables keyboard-only focus highlighting for all RadioButtons in this group.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string | number) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string | number;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n (\n {\n children,\n canUncheckRadioButtons,\n selectedId,\n onSelect,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n const [radioButtonRightElements, setRadioButtonRightElements] =\n useState<IRadioButtonRightElements>([]);\n\n const isControlled = selectedId !== undefined;\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n if (!isControlled) {\n setSelectedRadioButtonId(id);\n }\n },\n [isControlled, onSelect],\n );\n\n const updateHasRightElement = useCallback<IUpdateHasRightElement>((id, hasRightElement) => {\n setRadioButtonRightElements((prevState) =>\n prevState.map((prev) => (id === prev.id ? { id, hasRightElement } : prev)),\n );\n }, []);\n\n useEffect(() => {\n const ids = getRadioButtonOrder(children);\n\n const rightElements = ids.map((id) => ({ id, hasRightElement: false }));\n\n setRadioButtonRightElements(rightElements);\n }, [children]);\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n updateHasRightElement,\n radioButtonRightElements,\n shouldEnableKeyboardHighlighting,\n }),\n [\n canUncheckRadioButtons,\n radioButtonRightElements,\n selectedRadioButtonId,\n shouldEnableKeyboardHighlighting,\n updateHasRightElement,\n updateSelectedRadioButtonId,\n ],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AASA,IAAAC,YAAA,GAAAD,OAAA;AAAiE,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiB1D,MAAMkB,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,gBAAGE,cAAK,CAACC,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE,KAAK;EACjCC,wBAAwB,EAAE,EAAE;EAC5BC,qBAAqB,EAAEJ,SAAS;EAChCK,gCAAgC,EAAEL;AACtC,CAAC,CAAC;AAEFL,uBAAuB,CAACW,WAAW,GAAG,yBAAyB;AA8B/D,MAAMC,gBAAgB,gBAAG,IAAAC,iBAAU,EAC/B,CACI;EACIC,QAAQ;EACRC,sBAAsB;EACtBC,UAAU;EACVC,QAAQ;EACRP;AACJ,CAAC,EACDQ,GAAG,KACF;EACD,MAAM,CAACd,qBAAqB,EAAEe,wBAAwB,CAAC,GACnD,IAAAC,eAAQ,EAAoDf,SAAS,CAAC;EAC1E,MAAM,CAACG,wBAAwB,EAAEa,2BAA2B,CAAC,GACzD,IAAAD,eAAQ,EAA4B,EAAE,CAAC;EAE3C,MAAME,YAAY,GAAGN,UAAU,KAAKX,SAAS;EAE7C,IAAAkB,gBAAS,EAAC,MAAM;IACZJ,wBAAwB,CAACH,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMV,2BAA2B,GAAG,IAAAkB,kBAAW,EAC1CC,EAAE,IAAK;IACJ,IAAI,OAAOR,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACQ,EAAE,CAAC;IAChB;IAEA,IAAI,CAACH,YAAY,EAAE;MACfH,wBAAwB,CAACM,EAAE,CAAC;IAChC;EACJ,CAAC,EACD,CAACH,YAAY,EAAEL,QAAQ,CAC3B,CAAC;EAED,MAAMR,qBAAqB,GAAG,IAAAe,kBAAW,EAAyB,CAACC,EAAE,EAAEC,eAAe,KAAK;IACvFL,2BAA2B,CAAEM,SAAS,IAClCA,SAAS,CAACC,GAAG,CAAEC,IAAI,IAAMJ,EAAE,KAAKI,IAAI,CAACJ,EAAE,GAAG;MAAEA,EAAE;MAAEC;IAAgB,CAAC,GAAGG,IAAK,CAC7E,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAN,gBAAS,EAAC,MAAM;IACZ,MAAMO,GAAG,GAAG,IAAAC,gCAAmB,EAACjB,QAAQ,CAAC;IAEzC,MAAMkB,aAAa,GAAGF,GAAG,CAACF,GAAG,CAAEH,EAAE,KAAM;MAAEA,EAAE;MAAEC,eAAe,EAAE;IAAM,CAAC,CAAC,CAAC;IAEvEL,2BAA2B,CAACW,aAAa,CAAC;EAC9C,CAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC;EAEd,IAAAmB,0BAAmB,EACff,GAAG,EACH,OAAO;IACHZ;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAED,MAAM4B,aAAa,GAAG,IAAAC,cAAO,EACzB,OAAO;IACH/B,qBAAqB;IACrBE,2BAA2B;IAC3BC,0BAA0B,EAAEQ,sBAAsB;IAClDN,qBAAqB;IACrBD,wBAAwB;IACxBE;EACJ,CAAC,CAAC,EACF,CACIK,sBAAsB,EACtBP,wBAAwB,EACxBJ,qBAAqB,EACrBM,gCAAgC,EAChCD,qBAAqB,EACrBH,2BAA2B,CAEnC,CAAC;EAED,oBACI7B,MAAA,CAAAc,OAAA,CAAA6C,aAAA,CAACpC,uBAAuB,CAACqC,QAAQ;IAACC,KAAK,EAAEJ;EAAc,GAClDpB,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDF,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAAC,IAAA4B,QAAA,GAAAtC,OAAA,CAAAV,OAAA,GAEnCqB,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string;\n isChecked: boolean;\n}\n\nexport type RadioButtonRightElementMargin = 'NONE' | 'TOP' | 'BOTTOM' | 'BOTH';\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string | number;\n isChecked: boolean;\n}\n\nexport type RadioButtonRightElementMargin = 'NONE' | 'TOP' | 'BOTTOM' | 'BOTH';\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioButton.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","getRadioButtonOrder","children","radioButtonIds","Children","forEach","child","React","isValidElement","id","props","push","exports"],"sources":["../../../src/utils/radioButton.ts"],"sourcesContent":["import React, { Children, ReactNode } from 'react';\n\nexport const getRadioButtonOrder = (children: ReactNode): string[] => {\n const radioButtonIds: string[] = [];\n\n Children.forEach(children, (child) => {\n if (React.isValidElement<{ id?: string }>(child)) {\n const { id } = child.props;\n\n if (typeof id === 'string') {\n radioButtonIds.push(id);\n }\n }\n });\n\n return radioButtonIds;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE5C,MAAMkB,mBAAmB,GAAIC,QAAmB,
|
|
1
|
+
{"version":3,"file":"radioButton.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","getRadioButtonOrder","children","radioButtonIds","Children","forEach","child","React","isValidElement","id","props","push","exports"],"sources":["../../../src/utils/radioButton.ts"],"sourcesContent":["import React, { Children, ReactNode } from 'react';\n\nexport const getRadioButtonOrder = (children: ReactNode): (string | number)[] => {\n const radioButtonIds: (string | number)[] = [];\n\n Children.forEach(children, (child) => {\n if (React.isValidElement<{ id?: string | number }>(child)) {\n const { id } = child.props;\n\n if (typeof id === 'string' || typeof id === 'number') {\n radioButtonIds.push(id);\n }\n }\n });\n\n return radioButtonIds;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE5C,MAAMkB,mBAAmB,GAAIC,QAAmB,IAA0B;EAC7E,MAAMC,cAAmC,GAAG,EAAE;EAE9CC,eAAQ,CAACC,OAAO,CAACH,QAAQ,EAAGI,KAAK,IAAK;IAClC,iBAAIC,cAAK,CAACC,cAAc,CAA2BF,KAAK,CAAC,EAAE;MACvD,MAAM;QAAEG;MAAG,CAAC,GAAGH,KAAK,CAACI,KAAK;MAE1B,IAAI,OAAOD,EAAE,KAAK,QAAQ,IAAI,OAAOA,EAAE,KAAK,QAAQ,EAAE;QAClDN,cAAc,CAACQ,IAAI,CAACF,EAAE,CAAC;MAC3B;IACJ;EACJ,CAAC,CAAC;EAEF,OAAON,cAAc;AACzB,CAAC;AAACS,OAAA,CAAAX,mBAAA,GAAAA,mBAAA","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","SharingContextMenu","Icon","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","className","ref","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n content: string;\n children?: ReactNode;\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n <StyledCopyableContentBody>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,+BAA+B;AACpF,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,YAAY;AAChE,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC/F,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,oBAAoB,QAAQ,kCAAkC;AACvE,OAAOC,kBAAkB,MAAM,4CAA4C;AAC3E,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,qBAAqB,EACrBC,gCAAgC,EAChCC,4BAA4B,EAC5BC,yBAAyB,EACzBC,2BAA2B,QACxB,0BAA0B;AACjC,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE,MAAMC,sBAAsB,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","SharingContextMenu","Icon","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","className","ref","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n <StyledCopyableContentBody>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ const getBackgroundColor = ({
|
|
|
5
5
|
theme
|
|
6
6
|
}) => {
|
|
7
7
|
if ($appearance === CopyableContentAppearance.Chat) {
|
|
8
|
-
return 'rgba(0, 0, 0, 0.
|
|
8
|
+
return 'rgba(0, 0, 0, 0.12)';
|
|
9
9
|
}
|
|
10
10
|
const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';
|
|
11
11
|
const opacity = theme.cardBackgroundOpacity ?? 1;
|
|
@@ -15,7 +15,7 @@ export const StyledCopyableContent = styled.section`
|
|
|
15
15
|
--copyable-content-action-size: 32px;
|
|
16
16
|
--copyable-content-action-inset: 8px;
|
|
17
17
|
|
|
18
|
-
margin:
|
|
18
|
+
margin: 8px 0;
|
|
19
19
|
min-width: 0;
|
|
20
20
|
max-width: 100%;
|
|
21
21
|
overflow-x: clip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","getBackgroundColor","$appearance","theme","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","section","cardBorderRadius","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.
|
|
1
|
+
{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","getBackgroundColor","$appearance","theme","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","section","cardBorderRadius","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';\n const opacity = theme.cardBackgroundOpacity ?? 1;\n\n return `rgba(${secondaryColor}, ${opacity})`;\n};\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 8px 0;\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: ${({ theme }) => theme.cardBorderRadius}px;\n background-color: ${getBackgroundColor};\n color: ${({ theme }) => theme.text};\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${({ $isSticky, theme }) => ($isSticky ? theme['202'] : 'transparent')};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${({ $isSticky, theme }) => ($isSticky ? theme['100'] : 'transparent')};\n color: ${({ theme }) => theme.text};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.16)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n background-color: rgba(${({ theme }) => theme['text-rgb']}, 0.1);\n box-shadow: inset 0 0 0 1px rgba(${({ theme }) => theme['text-rgb']}, 0.06);\n }\n\n &:active {\n transform: scale(0.9);\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentBody = styled.div<WithTheme<unknown>>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: 0 12px 12px;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${({ theme }) => theme.headline};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${({ theme }) => theme['202']};\n }\n\n a {\n color: ${({ theme }) => theme.primary};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,yBAAyB,QAAQ,yBAAyB;AAMnE,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAAkC,CAAC,KAAK;EAC/E,IAAID,WAAW,KAAKF,yBAAyB,CAACI,IAAI,EAAE;IAChD,OAAO,qBAAqB;EAChC;EAEA,MAAMC,cAAc,GAAGF,KAAK,CAAC,mBAAmB,CAAC,IAAI,eAAe;EACpE,MAAMG,OAAO,GAAGH,KAAK,CAACI,qBAAqB,IAAI,CAAC;EAEhD,OAAO,QAAQF,cAAc,KAAKC,OAAO,GAAG;AAChD,CAAC;AAED,OAAO,MAAME,qBAAqB,GAAGT,MAAM,CAACU,OAAmC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEN;AAAM,CAAC,KAAKA,KAAK,CAACO,gBAAgB;AAC1D,wBAAwBT,kBAAkB;AAC1C,aAAa,CAAC;EAAEE;AAAM,CAAC,KAAKA,KAAK,CAACQ,IAAI;AACtC,CAAC;AAMD,OAAO,MAAMC,4BAA4B,GAAGb,MAAM,CAACc,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACc,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,2BAA2B,GAAGhB,MAAM,CAACiB,MAAwC;AAC1F;AACA,wBAAwB,CAAC;EAAEC,SAAS;EAAEd;AAAM,CAAC,KAAMc,SAAS,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEc,SAAS;EAAEd;AAAM,CAAC,KAAMc,SAAS,GAAGd,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACQ,IAAI;AACtC,kBAAkB,CAAC;EAAEM;AAAU,CAAC,KAAMA,SAAS,GAAG,+BAA+B,GAAG,MAAO;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEd;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjE,2CAA2C,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACe,qBAAqB;AACvE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGpB,MAAM,CAACc,GAAuB;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEV;AAAM,CAAC,KAAKA,KAAK,CAACiB,QAAQ;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEjB;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5D;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACkB,OAAO;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ const readBlob = blob => new Promise((resolve, reject) => {
|
|
|
11
11
|
describe('copyableContentToClipboard', () => {
|
|
12
12
|
afterEach(() => {
|
|
13
13
|
vi.restoreAllMocks();
|
|
14
|
+
vi.unstubAllGlobals();
|
|
14
15
|
});
|
|
15
16
|
it('writes readable plain text first and safe HTML second', async () => {
|
|
16
17
|
const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();
|
|
@@ -36,5 +37,11 @@ describe('copyableContentToClipboard', () => {
|
|
|
36
37
|
await copyableContentToClipboard(source);
|
|
37
38
|
expect(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
38
39
|
});
|
|
40
|
+
it('uses writeText when ClipboardItem is unavailable', async () => {
|
|
41
|
+
vi.stubGlobal('ClipboardItem', undefined);
|
|
42
|
+
const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();
|
|
43
|
+
await copyableContentToClipboard(source);
|
|
44
|
+
expect(writeText).toHaveBeenCalledWith('Heading\n\nLink');
|
|
45
|
+
});
|
|
39
46
|
});
|
|
40
47
|
//# sourceMappingURL=copyableContentClipboard.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyableContentClipboard.test.js","names":["formatStringToHtml","afterEach","describe","expect","it","vi","copyableContentToClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","restoreAllMocks","write","spyOn","navigator","clipboard","mockResolvedValue","item","mock","calls","Object","keys","items","toEqual","getType","resolves","toBe","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\n\nconst readBlob = (blob: Blob) =>\n new Promise<string>((resolve, reject) => {\n const reader = new FileReader();\n reader.onerror = () => reject(reader.error);\n reader.onload = () => resolve(reader.result as string);\n reader.readAsText(blob);\n });\n\ndescribe('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,SAAS,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,EAAE,EAAEC,EAAE,QAAQ,QAAQ;AAC5D,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE,MAAMC,MAAM,GAAG,0CAA0C;AAEzD,MAAMC,QAAQ,GAAIC,IAAU,IACxB,IAAIC,OAAO,CAAS,CAACC,OAAO,EAAEC,MAAM,KAAK;EACrC,MAAMC,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAC/BD,MAAM,CAACE,OAAO,GAAG,MAAMH,MAAM,CAACC,MAAM,CAACG,KAAK,CAAC;EAC3CH,MAAM,CAACI,MAAM,GAAG,MAAMN,OAAO,CAACE,MAAM,CAACK,MAAgB,CAAC;EACtDL,MAAM,CAACM,UAAU,CAACV,IAAI,CAAC;AAC3B,CAAC,CAAC;AAENP,QAAQ,CAAC,4BAA4B,EAAE,MAAM;EACzCD,SAAS,CAAC,MAAM;IACZI,EAAE,CAACe,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"copyableContentClipboard.test.js","names":["formatStringToHtml","afterEach","describe","expect","it","vi","copyableContentToClipboard","source","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","restoreAllMocks","unstubAllGlobals","write","spyOn","navigator","clipboard","mockResolvedValue","item","mock","calls","Object","keys","items","toEqual","getType","resolves","toBe","html","mockRejectedValueOnce","Error","mockResolvedValueOnce","writeText","toHaveBeenCalledTimes","not","toHaveBeenCalled","mockRejectedValue","toHaveBeenCalledWith","stubGlobal","undefined"],"sources":["../../../../src/components/copyable-content/copyableContentClipboard.test.ts"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { afterEach, describe, expect, it, vi } from 'vitest';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst source = '# Heading\\n\\n[Link](https://example.com)';\n\nconst readBlob = (blob: Blob) =>\n new Promise<string>((resolve, reject) => {\n const reader = new FileReader();\n reader.onerror = () => reject(reader.error);\n reader.onload = () => resolve(reader.result as string);\n reader.readAsText(blob);\n });\n\ndescribe('copyableContentToClipboard', () => {\n afterEach(() => {\n vi.restoreAllMocks();\n vi.unstubAllGlobals();\n });\n\n it('writes readable plain text first and safe HTML second', async () => {\n const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n const item = write.mock.calls[0][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain', 'text/html']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n await expect(readBlob(await item.getType('text/html'))).resolves.toBe(\n formatStringToHtml(source).html,\n );\n });\n\n it('uses a plain ClipboardItem after a rejected rich write', async () => {\n const write = vi\n .spyOn(navigator.clipboard, 'write')\n .mockRejectedValueOnce(new Error('denied'))\n .mockResolvedValueOnce();\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(write).toHaveBeenCalledTimes(2);\n expect(writeText).not.toHaveBeenCalled();\n const item = write.mock.calls[1][0][0] as unknown as ClipboardItem & {\n items: Record<string, Blob>;\n };\n expect(Object.keys(item.items)).toEqual(['text/plain']);\n await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('Heading\\n\\nLink');\n });\n\n it('uses writeText after all ClipboardItem writes fail', async () => {\n vi.spyOn(navigator.clipboard, 'write').mockRejectedValue(new Error('denied'));\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n\n it('uses writeText when ClipboardItem is unavailable', async () => {\n vi.stubGlobal('ClipboardItem', undefined);\n const writeText = vi.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();\n\n await copyableContentToClipboard(source);\n\n expect(writeText).toHaveBeenCalledWith('Heading\\n\\nLink');\n });\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useState","useRef","RadioButtonGroupContext","StyledLabelWrapper","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","getHeightOfSingleTextLine","useKeyboardFocusHighlighting","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","shouldShowCentered","isDisabled","shouldEnableKeyboardHighlighting","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","shouldEnableKeyboardHighlightingFromGroup","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","radioButtonTop","setRadioButtonTop","undefined","radioButtonBoxRef","radioButtonRootRef","isInGroup","isMarked","uncheckable","effectiveShouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","handleClick","prev","handleMouseEnter","handleMouseLeave","handleKeyDown","event","key","preventDefault","radioButtonRightElementMargin","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","$isDisabled","$radioButtonRightElementMargin","ref","$shouldShowKeyboardHighlighting","onClick","onMouseEnter","onMouseLeave","onKeyDown","disabled","type","checked","onChange","$isChecked","style","top","transform","$isHovered","$isSelected","initial","animate","opacity","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n useRef,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledLabelWrapper,\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: ReactNode;\n /**\n * An element that should be displayed on the right side of the label.\n */\n rightElement?: ReactNode;\n /**\n * Whether the rightElement should only be displayed when the RadioButton is checked\n */\n shouldShowRightElementOnlyOnChecked?: boolean;\n /**\n * Whether the RadioButton should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n shouldShowRightElementOnlyOnChecked = false,\n label,\n id,\n rightElement,\n shouldShowCentered = true,\n isDisabled = false,\n shouldEnableKeyboardHighlighting,\n}) => {\n const {\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonRightElements,\n updateHasRightElement,\n radioButtonsCanBeUnchecked,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingFromGroup,\n } = useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [radioButtonTop, setRadioButtonTop] = useState<number | undefined>(undefined);\n\n const radioButtonBoxRef = useRef<HTMLDivElement>(null);\n const radioButtonRootRef = useRef<HTMLDivElement>(null);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n const effectiveShouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n effectiveShouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n useEffect(() => {\n if (radioButtonRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: radioButtonRootRef.current,\n });\n\n const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setRadioButtonTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleClick();\n }\n },\n [handleClick],\n );\n\n const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n if (!radioButtonRightElements) {\n return 'NONE';\n }\n\n const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n if (index < 0) {\n return 'NONE';\n }\n\n const prevButton = radioButtonRightElements[index - 1];\n const currentButton = radioButtonRightElements[index];\n const nextButton = radioButtonRightElements[index + 1];\n\n if (!currentButton?.hasRightElement) {\n return 'NONE';\n }\n\n switch (true) {\n case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n return 'TOP';\n case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n return 'BOTTOM';\n case currentButton?.hasRightElement &&\n !nextButton?.hasRightElement &&\n !prevButton?.hasRightElement:\n return 'NONE';\n default:\n return 'BOTH';\n }\n }, [id, radioButtonRightElements]);\n\n const shouldShowRightElement = useMemo(() => {\n if (rightElement) {\n if (shouldShowRightElementOnlyOnChecked) {\n return isMarked;\n }\n\n return true;\n }\n\n return false;\n }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n useEffect(() => {\n if (typeof updateHasRightElement === 'function') {\n window.setTimeout(() => {\n updateHasRightElement(id, shouldShowRightElement);\n }, 10);\n }\n }, [id, shouldShowRightElement, updateHasRightElement]);\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n $radioButtonRightElementMargin={radioButtonRightElementMargin}\n >\n <StyledRadioButtonWrapper\n ref={radioButtonRootRef}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledRadioButtonCheckBox\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onKeyDown={handleKeyDown}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n <StyledRadioButtonPseudoCheckBox\n $isDisabled={isDisabled}\n $isChecked={isMarked}\n ref={radioButtonBoxRef}\n onClick={handleClick}\n style={{\n top: shouldShowCentered ? '50%' : radioButtonTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledRadioButtonCheckBoxMark\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledLabelWrapper>\n {label && (\n <StyledRadioButtonLabel\n $isDisabled={isDisabled}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {label}\n </StyledRadioButtonLabel>\n )}\n {shouldShowRightElement && rightElement}\n </StyledLabelWrapper>\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [\n children,\n handleClick,\n handleKeyDown,\n handleMouseEnter,\n isDisabled,\n isHovered,\n isMarked,\n label,\n radioButtonRightElementMargin,\n radioButtonTop,\n rightElement,\n shouldShowCentered,\n shouldShowKeyboardHighlighting,\n shouldShowRightElement,\n ],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAERC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EAERC,MAAM,QACH,OAAO;AAEd,SAASC,uBAAuB,QAAQ,uCAAuC;AAC/E,SACIC,kBAAkB,EAClBC,+BAA+B,EAC/BC,iBAAiB,EACjBC,yBAAyB,EACzBC,6BAA6B,EAC7BC,sBAAsB,EACtBC,+BAA+B,EAC/BC,wBAAwB,QACrB,sBAAsB;AAC7B,SAASC,yBAAyB,QAAQ,uBAAuB;AACjE,SAASC,4BAA4B,QAAQ,0CAA0C;AAqCvF,MAAMC,WAAiC,GAAGA,CAAC;EACvCC,QAAQ;EACRC,mCAAmC,GAAG,KAAK;EAC3CC,KAAK;EACLC,EAAE;EACFC,YAAY;EACZC,kBAAkB,GAAG,IAAI;EACzBC,UAAU,GAAG,KAAK;EAClBC;AACJ,CAAC,KAAK;EACF,MAAM;IACFC,qBAAqB;IACrBC,2BAA2B;IAC3BC,wBAAwB;IACxBC,qBAAqB;IACrBC,0BAA0B;IAC1BL,gCAAgC,EAAEM;EACtC,CAAC,GAAG9B,UAAU,CAACK,uBAAuB,CAAC;EAEvC,MAAM,CAAC0B,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAM,CAAC8B,SAAS,EAAEC,YAAY,CAAC,GAAG/B,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAM,CAACgC,cAAc,EAAEC,iBAAiB,CAAC,GAAGjC,QAAQ,CAAqBkC,SAAS,CAAC;EAEnF,MAAMC,iBAAiB,GAAGlC,MAAM,CAAiB,IAAI,CAAC;EACtD,MAAMmC,kBAAkB,GAAGnC,MAAM,CAAiB,IAAI,CAAC;EAEvD,MAAMoC,SAAS,GAAG,OAAOd,2BAA2B,KAAK,UAAU;EAEnE,MAAMe,QAAQ,GAAGD,SAAS,GAAGf,qBAAqB,KAAKL,EAAE,GAAGW,iBAAiB;EAE7E,MAAMW,WAAW,GAAGb,0BAA0B;EAE9C,MAAMc,yCAAyC,GAC3Cb,yCAAyC,IAAIN,gCAAgC;EAEjF,MAAMoB,8BAA8B,GAAG7B,4BAA4B,CAC/D4B,yCAAyC,IAAI,CAACpB,UAClD,CAAC;EAEDtB,SAAS,CAAC,MAAM;IACZ,IAAIsC,kBAAkB,CAACM,OAAO,IAAI,CAACvB,kBAAkB,EAAE;MACnD,MAAMwB,gBAAgB,GAAGhC,yBAAyB,CAAC;QAC/CiC,SAAS,EAAER,kBAAkB,CAACM;MAClC,CAAC,CAAC;MAEF,MAAMG,SAAS,GAAGV,iBAAiB,CAACO,OAAO,EAAEI,qBAAqB,CAAC,CAAC,CAACC,MAAM,IAAI,CAAC;MAEhFd,iBAAiB,CAAC,CAACU,gBAAgB,GAAGE,SAAS,IAAI,CAAC,CAAC;IACzD;EACJ,CAAC,EAAE,CAAC1B,kBAAkB,CAAC,CAAC;EAExB,MAAM6B,WAAW,GAAGpD,WAAW,CAAC,MAAM;IAClC,IAAIwB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAImB,WAAW,EAAE;MACb,IAAIhB,2BAA2B,EAAE;QAC7BA,2BAA2B,CAACN,EAAE,KAAKK,qBAAqB,GAAGY,SAAS,GAAGjB,EAAE,CAAC;MAC9E;MACAY,oBAAoB,CAAEoB,IAAI,IAAK,CAACA,IAAI,CAAC;MACrC;IACJ;IACA,IAAI,OAAO1B,2BAA2B,KAAK,UAAU,EAAE;MACnDA,2BAA2B,CAACN,EAAE,CAAC;IACnC;IACAY,oBAAoB,CAAC,IAAI,CAAC;EAC9B,CAAC,EAAE,CAACZ,EAAE,EAAEG,UAAU,EAAEmB,WAAW,EAAEjB,qBAAqB,EAAEC,2BAA2B,CAAC,CAAC;EAErF,MAAM2B,gBAAgB,GAAGtD,WAAW,CAAC,MAAM;IACvC,IAAI,CAACwB,UAAU,EAAE;MACbW,YAAY,CAAC,IAAI,CAAC;IACtB;EACJ,CAAC,EAAE,CAACX,UAAU,CAAC,CAAC;EAEhB,MAAM+B,gBAAgB,GAAGA,CAAA,KAAM;IAC3BpB,YAAY,CAAC,KAAK,CAAC;EACvB,CAAC;EAED,MAAMqB,aAAa,GAAGxD,WAAW,CAC5ByD,KAA4C,IAAK;IAC9C,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5CD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBP,WAAW,CAAC,CAAC;IACjB;EACJ,CAAC,EACD,CAACA,WAAW,CAChB,CAAC;EAED,MAAMQ,6BAA4D,GAAGzD,OAAO,CAAC,MAAM;IAC/E,IAAI,CAACyB,wBAAwB,EAAE;MAC3B,OAAO,MAAM;IACjB;IAEA,MAAMiC,KAAK,GAAGjC,wBAAwB,CAACkC,SAAS,CAAEC,OAAO,IAAKA,OAAO,CAAC1C,EAAE,KAAKA,EAAE,CAAC;IAEhF,IAAIwC,KAAK,GAAG,CAAC,EAAE;MACX,OAAO,MAAM;IACjB;IAEA,MAAMG,UAAU,GAAGpC,wBAAwB,CAACiC,KAAK,GAAG,CAAC,CAAC;IACtD,MAAMI,aAAa,GAAGrC,wBAAwB,CAACiC,KAAK,CAAC;IACrD,MAAMK,UAAU,GAAGtC,wBAAwB,CAACiC,KAAK,GAAG,CAAC,CAAC;IAEtD,IAAI,CAACI,aAAa,EAAEE,eAAe,EAAE;MACjC,OAAO,MAAM;IACjB;IAEA,QAAQ,IAAI;MACR,KAAKH,UAAU,EAAEG,eAAe,IAAI,CAACD,UAAU,EAAEC,eAAe;QAC5D,OAAO,KAAK;MAChB,KAAK,CAACH,UAAU,EAAEG,eAAe,IAAID,UAAU,EAAEC,eAAe;QAC5D,OAAO,QAAQ;MACnB,KAAKF,aAAa,EAAEE,eAAe,IAC/B,CAACD,UAAU,EAAEC,eAAe,IAC5B,CAACH,UAAU,EAAEG,eAAe;QAC5B,OAAO,MAAM;MACjB;QACI,OAAO,MAAM;IACrB;EACJ,CAAC,EAAE,CAAC9C,EAAE,EAAEO,wBAAwB,CAAC,CAAC;EAElC,MAAMwC,sBAAsB,GAAGjE,OAAO,CAAC,MAAM;IACzC,IAAImB,YAAY,EAAE;MACd,IAAIH,mCAAmC,EAAE;QACrC,OAAOuB,QAAQ;MACnB;MAEA,OAAO,IAAI;IACf;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,QAAQ,EAAEpB,YAAY,EAAEH,mCAAmC,CAAC,CAAC;EAEjEjB,SAAS,CAAC,MAAM;IACZ,IAAI,OAAO2B,qBAAqB,KAAK,UAAU,EAAE;MAC7CwC,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBzC,qBAAqB,CAACR,EAAE,EAAE+C,sBAAsB,CAAC;MACrD,CAAC,EAAE,EAAE,CAAC;IACV;EACJ,CAAC,EAAE,CAAC/C,EAAE,EAAE+C,sBAAsB,EAAEvC,qBAAqB,CAAC,CAAC;EAEvD,OAAO1B,OAAO,CACV,mBACIJ,KAAA,CAAAwE,aAAA,CAAC9D,iBAAiB;IACd+D,WAAW,EAAEhD,UAAW;IACxBiD,8BAA8B,EAAEb;EAA8B,gBAE9D7D,KAAA,CAAAwE,aAAA,CAACzD,wBAAwB;IACrB4D,GAAG,EAAElC,kBAAmB;IACxBmC,+BAA+B,EAAE9B;EAA+B,gBAEhE9C,KAAA,CAAAwE,aAAA,CAAC7D,yBAAyB;IACtBkE,OAAO,EAAExB,WAAY;IACrByB,YAAY,EAAEvB,gBAAiB;IAC/BwB,YAAY,EAAEvB,gBAAiB;IAC/BwB,SAAS,EAAEvB,aAAc;IACzBwB,QAAQ,EAAExD,UAAW;IACrBgD,WAAW,EAAEhD,UAAW;IACxBmD,+BAA+B,EAAE9B,8BAA+B;IAChEoC,IAAI,EAAC,OAAO;IACZC,OAAO,EAAExC,QAAS;IAClByC,QAAQ,EAAEA,CAAA,KAAM,CAAC;EAAE,CACtB,CAAC,eACFpF,KAAA,CAAAwE,aAAA,CAAC1D,+BAA+B;IAC5B2D,WAAW,EAAEhD,UAAW;IACxB4D,UAAU,EAAE1C,QAAS;IACrBgC,GAAG,EAAEnC,iBAAkB;IACvBqC,OAAO,EAAExB,WAAY;IACrBiC,KAAK,EAAE;MACHC,GAAG,EAAE/D,kBAAkB,GAAG,KAAK,GAAGa,cAAc;MAChDmD,SAAS,EAAEhE,kBAAkB,GAAG,kBAAkB,GAAGe;IACzD;EAAE,gBAEFvC,KAAA,CAAAwE,aAAA,CAAC5D,6BAA6B;IAC1BkE,YAAY,EAAEvB,gBAAiB;IAC/BwB,YAAY,EAAEvB,gBAAiB;IAC/BiC,UAAU,EAAEtD,SAAU;IACtBuD,WAAW,EAAE/C,QAAS;IACtB8B,WAAW,EAAEhD;EAAW,CAC3B,CAC4B,CAAC,eAClCzB,KAAA,CAAAwE,aAAA,CAAChE,kBAAkB,QACda,KAAK,iBACFrB,KAAA,CAAAwE,aAAA,CAAC3D,sBAAsB;IACnB4D,WAAW,EAAEhD,UAAW;IACxBoD,OAAO,EAAExB,WAAY;IACrByB,YAAY,EAAEvB,gBAAiB;IAC/BwB,YAAY,EAAEvB;EAAiB,GAE9BnC,KACmB,CAC3B,EACAgD,sBAAsB,IAAI9C,YACX,CACE,CAAC,EAC1BJ,QAAQ,iBACLnB,KAAA,CAAAwE,aAAA,CAACzE,eAAe;IAAC4F,OAAO,EAAE;EAAM,gBAC5B3F,KAAA,CAAAwE,aAAA,CAAC/D,+BAA+B;IAC5BmF,OAAO,EACHjD,QAAQ,GACF;MAAEkD,OAAO,EAAE,CAAC;MAAEzC,MAAM,EAAE;IAAO,CAAC,GAC9B;MAAEyC,OAAO,EAAE,CAAC;MAAEzC,MAAM,EAAE;IAAE,CACjC;IACD0C,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7B5E,QAC4B,CACpB,CAEN,CACtB,EACD,CACIA,QAAQ,EACRkC,WAAW,EACXI,aAAa,EACbF,gBAAgB,EAChB9B,UAAU,EACVU,SAAS,EACTQ,QAAQ,EACRtB,KAAK,EACLwC,6BAA6B,EAC7BxB,cAAc,EACdd,YAAY,EACZC,kBAAkB,EAClBsB,8BAA8B,EAC9BuB,sBAAsB,CAE9B,CAAC;AACL,CAAC;AAEDnD,WAAW,CAAC8E,WAAW,GAAG,aAAa;AAEvC,eAAe9E,WAAW","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useState","useRef","RadioButtonGroupContext","StyledLabelWrapper","StyledMotionRadioButtonChildren","StyledRadioButton","StyledRadioButtonCheckBox","StyledRadioButtonCheckBoxMark","StyledRadioButtonLabel","StyledRadioButtonPseudoCheckBox","StyledRadioButtonWrapper","getHeightOfSingleTextLine","useKeyboardFocusHighlighting","RadioButton","children","shouldShowRightElementOnlyOnChecked","label","id","rightElement","shouldShowCentered","isDisabled","shouldEnableKeyboardHighlighting","selectedRadioButtonId","updateSelectedRadioButtonId","radioButtonRightElements","updateHasRightElement","radioButtonsCanBeUnchecked","shouldEnableKeyboardHighlightingFromGroup","internalIsChecked","setInternalIsChecked","isHovered","setIsHovered","radioButtonTop","setRadioButtonTop","undefined","radioButtonBoxRef","radioButtonRootRef","isInGroup","isMarked","uncheckable","effectiveShouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","handleClick","prev","handleMouseEnter","handleMouseLeave","handleKeyDown","event","key","preventDefault","radioButtonRightElementMargin","index","findIndex","element","prevButton","currentButton","nextButton","hasRightElement","shouldShowRightElement","window","setTimeout","createElement","$isDisabled","$radioButtonRightElementMargin","ref","$shouldShowKeyboardHighlighting","onClick","onMouseEnter","onMouseLeave","onKeyDown","disabled","type","checked","onChange","$isChecked","style","top","transform","$isHovered","$isSelected","initial","animate","opacity","transition","duration","displayName"],"sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n FC,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n useRef,\n} from 'react';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport { RadioButtonGroupContext } from './radio-button-group/RadioButtonGroup';\nimport {\n StyledLabelWrapper,\n StyledMotionRadioButtonChildren,\n StyledRadioButton,\n StyledRadioButtonCheckBox,\n StyledRadioButtonCheckBoxMark,\n StyledRadioButtonLabel,\n StyledRadioButtonPseudoCheckBox,\n StyledRadioButtonWrapper,\n} from './RadioButton.styles';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type RadioButtonProps = {\n /**\n * The children that should be displayed after the RadioButton is checked.\n */\n children?: ReactNode;\n /**\n * whether the RadioButton should be shown.\n */\n isDisabled?: boolean;\n /**\n * The id of the radio button.\n */\n id: string | number;\n /**\n * The label that should be displayed next to the radio button.\n */\n label?: ReactNode;\n /**\n * An element that should be displayed on the right side of the label.\n */\n rightElement?: ReactNode;\n /**\n * Whether the rightElement should only be displayed when the RadioButton is checked\n */\n shouldShowRightElementOnlyOnChecked?: boolean;\n /**\n * Whether the RadioButton should be displayed centered to the label or at the top\n */\n shouldShowCentered?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst RadioButton: FC<RadioButtonProps> = ({\n children,\n shouldShowRightElementOnlyOnChecked = false,\n label,\n id,\n rightElement,\n shouldShowCentered = true,\n isDisabled = false,\n shouldEnableKeyboardHighlighting,\n}) => {\n const {\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonRightElements,\n updateHasRightElement,\n radioButtonsCanBeUnchecked,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingFromGroup,\n } = useContext(RadioButtonGroupContext);\n\n const [internalIsChecked, setInternalIsChecked] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [radioButtonTop, setRadioButtonTop] = useState<number | undefined>(undefined);\n\n const radioButtonBoxRef = useRef<HTMLDivElement>(null);\n const radioButtonRootRef = useRef<HTMLDivElement>(null);\n\n const isInGroup = typeof updateSelectedRadioButtonId === 'function';\n\n const isMarked = isInGroup ? selectedRadioButtonId === id : internalIsChecked;\n\n const uncheckable = radioButtonsCanBeUnchecked;\n\n const effectiveShouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlightingFromGroup ?? shouldEnableKeyboardHighlighting;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n effectiveShouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n useEffect(() => {\n if (radioButtonRootRef.current && !shouldShowCentered) {\n const singleLineHeight = getHeightOfSingleTextLine({\n container: radioButtonRootRef.current,\n });\n\n const boxHeight = radioButtonBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n setRadioButtonTop((singleLineHeight - boxHeight) / 2);\n }\n }, [shouldShowCentered]);\n\n const handleClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (uncheckable) {\n if (updateSelectedRadioButtonId) {\n updateSelectedRadioButtonId(id === selectedRadioButtonId ? undefined : id);\n }\n setInternalIsChecked((prev) => !prev);\n return;\n }\n if (typeof updateSelectedRadioButtonId === 'function') {\n updateSelectedRadioButtonId(id);\n }\n setInternalIsChecked(true);\n }, [id, isDisabled, uncheckable, selectedRadioButtonId, updateSelectedRadioButtonId]);\n\n const handleMouseEnter = useCallback(() => {\n if (!isDisabled) {\n setIsHovered(true);\n }\n }, [isDisabled]);\n\n const handleMouseLeave = () => {\n setIsHovered(false);\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n handleClick();\n }\n },\n [handleClick],\n );\n\n const radioButtonRightElementMargin: RadioButtonRightElementMargin = useMemo(() => {\n if (!radioButtonRightElements) {\n return 'NONE';\n }\n\n const index = radioButtonRightElements.findIndex((element) => element.id === id);\n\n if (index < 0) {\n return 'NONE';\n }\n\n const prevButton = radioButtonRightElements[index - 1];\n const currentButton = radioButtonRightElements[index];\n const nextButton = radioButtonRightElements[index + 1];\n\n if (!currentButton?.hasRightElement) {\n return 'NONE';\n }\n\n switch (true) {\n case prevButton?.hasRightElement && !nextButton?.hasRightElement:\n return 'TOP';\n case !prevButton?.hasRightElement && nextButton?.hasRightElement:\n return 'BOTTOM';\n case currentButton?.hasRightElement &&\n !nextButton?.hasRightElement &&\n !prevButton?.hasRightElement:\n return 'NONE';\n default:\n return 'BOTH';\n }\n }, [id, radioButtonRightElements]);\n\n const shouldShowRightElement = useMemo(() => {\n if (rightElement) {\n if (shouldShowRightElementOnlyOnChecked) {\n return isMarked;\n }\n\n return true;\n }\n\n return false;\n }, [isMarked, rightElement, shouldShowRightElementOnlyOnChecked]);\n\n useEffect(() => {\n if (typeof updateHasRightElement === 'function') {\n window.setTimeout(() => {\n updateHasRightElement(id, shouldShowRightElement);\n }, 10);\n }\n }, [id, shouldShowRightElement, updateHasRightElement]);\n\n return useMemo(\n () => (\n <StyledRadioButton\n $isDisabled={isDisabled}\n $radioButtonRightElementMargin={radioButtonRightElementMargin}\n >\n <StyledRadioButtonWrapper\n ref={radioButtonRootRef}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledRadioButtonCheckBox\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onKeyDown={handleKeyDown}\n disabled={isDisabled}\n $isDisabled={isDisabled}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n type=\"radio\"\n checked={isMarked}\n onChange={() => {}}\n />\n <StyledRadioButtonPseudoCheckBox\n $isDisabled={isDisabled}\n $isChecked={isMarked}\n ref={radioButtonBoxRef}\n onClick={handleClick}\n style={{\n top: shouldShowCentered ? '50%' : radioButtonTop,\n transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n }}\n >\n <StyledRadioButtonCheckBoxMark\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n $isHovered={isHovered}\n $isSelected={isMarked}\n $isDisabled={isDisabled}\n />\n </StyledRadioButtonPseudoCheckBox>\n <StyledLabelWrapper>\n {label && (\n <StyledRadioButtonLabel\n $isDisabled={isDisabled}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {label}\n </StyledRadioButtonLabel>\n )}\n {shouldShowRightElement && rightElement}\n </StyledLabelWrapper>\n </StyledRadioButtonWrapper>\n {children && (\n <AnimatePresence initial={false}>\n <StyledMotionRadioButtonChildren\n animate={\n isMarked\n ? { opacity: 1, height: 'auto' }\n : { opacity: 0, height: 0 }\n }\n transition={{ duration: 0.2 }}\n >\n {children}\n </StyledMotionRadioButtonChildren>\n </AnimatePresence>\n )}\n </StyledRadioButton>\n ),\n [\n children,\n handleClick,\n handleKeyDown,\n handleMouseEnter,\n isDisabled,\n isHovered,\n isMarked,\n label,\n radioButtonRightElementMargin,\n radioButtonTop,\n rightElement,\n shouldShowCentered,\n shouldShowKeyboardHighlighting,\n shouldShowRightElement,\n ],\n );\n};\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,7 +18,7 @@ const RadioButtonGroup = /*#__PURE__*/forwardRef(({
|
|
|
18
18
|
}, ref) => {
|
|
19
19
|
const [selectedRadioButtonId, setSelectedRadioButtonId] = useState(undefined);
|
|
20
20
|
const [radioButtonRightElements, setRadioButtonRightElements] = useState([]);
|
|
21
|
-
const isControlled =
|
|
21
|
+
const isControlled = selectedId !== undefined;
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
setSelectedRadioButtonId(selectedId);
|
|
24
24
|
}, [selectedId]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","getRadioButtonOrder","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","shouldEnableKeyboardHighlighting","displayName","RadioButtonGroup","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","setRadioButtonRightElements","isControlled","id","hasRightElement","prevState","map","prev","ids","rightElements","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string | undefined) => void;\n\ntype IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonRightElements: IRadioButtonRightElements;\n updateHasRightElement?: IUpdateHasRightElement;\n radioButtonsCanBeUnchecked?: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n radioButtonRightElements: [],\n updateHasRightElement: undefined,\n shouldEnableKeyboardHighlighting: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport interface RadioButtonGroupRef {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n}\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * Enables keyboard-only focus highlighting for all RadioButtons in this group.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n (\n {\n children,\n canUncheckRadioButtons,\n selectedId,\n onSelect,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n const [radioButtonRightElements, setRadioButtonRightElements] =\n useState<IRadioButtonRightElements>([]);\n\n const isControlled =
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useState","getRadioButtonOrder","RadioButtonGroupContext","createContext","selectedRadioButtonId","undefined","updateSelectedRadioButtonId","radioButtonsCanBeUnchecked","radioButtonRightElements","updateHasRightElement","shouldEnableKeyboardHighlighting","displayName","RadioButtonGroup","children","canUncheckRadioButtons","selectedId","onSelect","ref","setSelectedRadioButtonId","setRadioButtonRightElements","isControlled","id","hasRightElement","prevState","map","prev","ids","rightElements","providerValue","createElement","Provider","value"],"sources":["../../../../../src/components/radio-button/radio-button-group/RadioButtonGroup.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n} from 'react';\nimport { getRadioButtonOrder } from '../../../utils/radioButton';\n\ntype IUpdateSelectedRadioButtonId = (id: string | number | undefined) => void;\n\ntype IUpdateHasRightElement = (id: string | number, hasRightElement: boolean) => void;\n\ntype IRadioButtonRightElements = { id: string | number; hasRightElement: boolean }[];\n\ninterface IRadioButtonGroupContext {\n selectedRadioButtonId: string | number | undefined;\n updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;\n radioButtonRightElements: IRadioButtonRightElements;\n updateHasRightElement?: IUpdateHasRightElement;\n radioButtonsCanBeUnchecked?: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n}\n\nexport const RadioButtonGroupContext = React.createContext<IRadioButtonGroupContext>({\n selectedRadioButtonId: undefined,\n updateSelectedRadioButtonId: undefined,\n radioButtonsCanBeUnchecked: false,\n radioButtonRightElements: [],\n updateHasRightElement: undefined,\n shouldEnableKeyboardHighlighting: undefined,\n});\n\nRadioButtonGroupContext.displayName = 'RadioButtonGroupContext';\n\nexport interface RadioButtonGroupRef {\n updateSelectedRadioButtonId: IUpdateSelectedRadioButtonId;\n}\n\nexport type RadioButtonGroupProps = {\n /**\n * Whether the RadioButtons can be unchecked.\n */\n canUncheckRadioButtons?: boolean;\n /**\n * Enables keyboard-only focus highlighting for all RadioButtons in this group.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n /**\n * The RadioButtons that should be grouped. Radio buttons with the same group are\n * automatically unchecked when an `RadioButton` of the group is checked.\n */\n children: ReactNode;\n /**\n * Function to be executed when an id is selected.\n */\n onSelect?: (id?: string | number) => void;\n /**\n * The id of the current selected RadioButton.\n */\n selectedId?: string | number;\n};\n\nconst RadioButtonGroup = forwardRef<RadioButtonGroupRef, RadioButtonGroupProps>(\n (\n {\n children,\n canUncheckRadioButtons,\n selectedId,\n onSelect,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [selectedRadioButtonId, setSelectedRadioButtonId] =\n useState<IRadioButtonGroupContext['selectedRadioButtonId']>(undefined);\n const [radioButtonRightElements, setRadioButtonRightElements] =\n useState<IRadioButtonRightElements>([]);\n\n const isControlled = selectedId !== undefined;\n\n useEffect(() => {\n setSelectedRadioButtonId(selectedId);\n }, [selectedId]);\n\n const updateSelectedRadioButtonId = useCallback<IUpdateSelectedRadioButtonId>(\n (id) => {\n if (typeof onSelect === 'function') {\n onSelect(id);\n }\n\n if (!isControlled) {\n setSelectedRadioButtonId(id);\n }\n },\n [isControlled, onSelect],\n );\n\n const updateHasRightElement = useCallback<IUpdateHasRightElement>((id, hasRightElement) => {\n setRadioButtonRightElements((prevState) =>\n prevState.map((prev) => (id === prev.id ? { id, hasRightElement } : prev)),\n );\n }, []);\n\n useEffect(() => {\n const ids = getRadioButtonOrder(children);\n\n const rightElements = ids.map((id) => ({ id, hasRightElement: false }));\n\n setRadioButtonRightElements(rightElements);\n }, [children]);\n\n useImperativeHandle(\n ref,\n () => ({\n updateSelectedRadioButtonId,\n }),\n [updateSelectedRadioButtonId],\n );\n\n const providerValue = useMemo<IRadioButtonGroupContext>(\n () => ({\n selectedRadioButtonId,\n updateSelectedRadioButtonId,\n radioButtonsCanBeUnchecked: canUncheckRadioButtons,\n updateHasRightElement,\n radioButtonRightElements,\n shouldEnableKeyboardHighlighting,\n }),\n [\n canUncheckRadioButtons,\n radioButtonRightElements,\n selectedRadioButtonId,\n shouldEnableKeyboardHighlighting,\n updateHasRightElement,\n updateSelectedRadioButtonId,\n ],\n );\n\n return (\n <RadioButtonGroupContext.Provider value={providerValue}>\n {children}\n </RadioButtonGroupContext.Provider>\n );\n },\n);\n\nRadioButtonGroup.displayName = 'RadioButtonGroup';\n\nexport default RadioButtonGroup;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EAEVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,QAAQ,QACL,OAAO;AACd,SAASC,mBAAmB,QAAQ,4BAA4B;AAiBhE,OAAO,MAAMC,uBAAuB,gBAAGR,KAAK,CAACS,aAAa,CAA2B;EACjFC,qBAAqB,EAAEC,SAAS;EAChCC,2BAA2B,EAAED,SAAS;EACtCE,0BAA0B,EAAE,KAAK;EACjCC,wBAAwB,EAAE,EAAE;EAC5BC,qBAAqB,EAAEJ,SAAS;EAChCK,gCAAgC,EAAEL;AACtC,CAAC,CAAC;AAEFH,uBAAuB,CAACS,WAAW,GAAG,yBAAyB;AA8B/D,MAAMC,gBAAgB,gBAAGjB,UAAU,CAC/B,CACI;EACIkB,QAAQ;EACRC,sBAAsB;EACtBC,UAAU;EACVC,QAAQ;EACRN;AACJ,CAAC,EACDO,GAAG,KACF;EACD,MAAM,CAACb,qBAAqB,EAAEc,wBAAwB,CAAC,GACnDlB,QAAQ,CAAoDK,SAAS,CAAC;EAC1E,MAAM,CAACG,wBAAwB,EAAEW,2BAA2B,CAAC,GACzDnB,QAAQ,CAA4B,EAAE,CAAC;EAE3C,MAAMoB,YAAY,GAAGL,UAAU,KAAKV,SAAS;EAE7CR,SAAS,CAAC,MAAM;IACZqB,wBAAwB,CAACH,UAAU,CAAC;EACxC,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,MAAMT,2BAA2B,GAAGV,WAAW,CAC1CyB,EAAE,IAAK;IACJ,IAAI,OAAOL,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACK,EAAE,CAAC;IAChB;IAEA,IAAI,CAACD,YAAY,EAAE;MACfF,wBAAwB,CAACG,EAAE,CAAC;IAChC;EACJ,CAAC,EACD,CAACD,YAAY,EAAEJ,QAAQ,CAC3B,CAAC;EAED,MAAMP,qBAAqB,GAAGb,WAAW,CAAyB,CAACyB,EAAE,EAAEC,eAAe,KAAK;IACvFH,2BAA2B,CAAEI,SAAS,IAClCA,SAAS,CAACC,GAAG,CAAEC,IAAI,IAAMJ,EAAE,KAAKI,IAAI,CAACJ,EAAE,GAAG;MAAEA,EAAE;MAAEC;IAAgB,CAAC,GAAGG,IAAK,CAC7E,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN5B,SAAS,CAAC,MAAM;IACZ,MAAM6B,GAAG,GAAGzB,mBAAmB,CAACY,QAAQ,CAAC;IAEzC,MAAMc,aAAa,GAAGD,GAAG,CAACF,GAAG,CAAEH,EAAE,KAAM;MAAEA,EAAE;MAAEC,eAAe,EAAE;IAAM,CAAC,CAAC,CAAC;IAEvEH,2BAA2B,CAACQ,aAAa,CAAC;EAC9C,CAAC,EAAE,CAACd,QAAQ,CAAC,CAAC;EAEdf,mBAAmB,CACfmB,GAAG,EACH,OAAO;IACHX;EACJ,CAAC,CAAC,EACF,CAACA,2BAA2B,CAChC,CAAC;EAED,MAAMsB,aAAa,GAAG7B,OAAO,CACzB,OAAO;IACHK,qBAAqB;IACrBE,2BAA2B;IAC3BC,0BAA0B,EAAEO,sBAAsB;IAClDL,qBAAqB;IACrBD,wBAAwB;IACxBE;EACJ,CAAC,CAAC,EACF,CACII,sBAAsB,EACtBN,wBAAwB,EACxBJ,qBAAqB,EACrBM,gCAAgC,EAChCD,qBAAqB,EACrBH,2BAA2B,CAEnC,CAAC;EAED,oBACIZ,KAAA,CAAAmC,aAAA,CAAC3B,uBAAuB,CAAC4B,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAClDf,QAC6B,CAAC;AAE3C,CACJ,CAAC;AAEDD,gBAAgB,CAACD,WAAW,GAAG,kBAAkB;AAEjD,eAAeC,gBAAgB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string;\n isChecked: boolean;\n}\n\nexport type RadioButtonRightElementMargin = 'NONE' | 'TOP' | 'BOTTOM' | 'BOTH';\n"],"mappings":"","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"radioButton.js","names":[],"sources":["../../../src/types/radioButton.ts"],"sourcesContent":["export interface RadioButtonItem {\n id: string | number;\n isChecked: boolean;\n}\n\nexport type RadioButtonRightElementMargin = 'NONE' | 'TOP' | 'BOTTOM' | 'BOTH';\n"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioButton.js","names":["React","Children","getRadioButtonOrder","children","radioButtonIds","forEach","child","isValidElement","id","props","push"],"sources":["../../../src/utils/radioButton.ts"],"sourcesContent":["import React, { Children, ReactNode } from 'react';\n\nexport const getRadioButtonOrder = (children: ReactNode): string[] => {\n const radioButtonIds: string[] = [];\n\n Children.forEach(children, (child) => {\n if (React.isValidElement<{ id?: string }>(child)) {\n const { id } = child.props;\n\n if (typeof id === 'string') {\n radioButtonIds.push(id);\n }\n }\n });\n\n return radioButtonIds;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAmB,OAAO;AAElD,OAAO,MAAMC,mBAAmB,GAAIC,QAAmB,
|
|
1
|
+
{"version":3,"file":"radioButton.js","names":["React","Children","getRadioButtonOrder","children","radioButtonIds","forEach","child","isValidElement","id","props","push"],"sources":["../../../src/utils/radioButton.ts"],"sourcesContent":["import React, { Children, ReactNode } from 'react';\n\nexport const getRadioButtonOrder = (children: ReactNode): (string | number)[] => {\n const radioButtonIds: (string | number)[] = [];\n\n Children.forEach(children, (child) => {\n if (React.isValidElement<{ id?: string | number }>(child)) {\n const { id } = child.props;\n\n if (typeof id === 'string' || typeof id === 'number') {\n radioButtonIds.push(id);\n }\n }\n });\n\n return radioButtonIds;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAmB,OAAO;AAElD,OAAO,MAAMC,mBAAmB,GAAIC,QAAmB,IAA0B;EAC7E,MAAMC,cAAmC,GAAG,EAAE;EAE9CH,QAAQ,CAACI,OAAO,CAACF,QAAQ,EAAGG,KAAK,IAAK;IAClC,iBAAIN,KAAK,CAACO,cAAc,CAA2BD,KAAK,CAAC,EAAE;MACvD,MAAM;QAAEE;MAAG,CAAC,GAAGF,KAAK,CAACG,KAAK;MAE1B,IAAI,OAAOD,EAAE,KAAK,QAAQ,IAAI,OAAOA,EAAE,KAAK,QAAQ,EAAE;QAClDJ,cAAc,CAACM,IAAI,CAACF,EAAE,CAAC;MAC3B;IACJ;EACJ,CAAC,CAAC;EAEF,OAAOJ,cAAc;AACzB,CAAC","ignoreList":[]}
|
|
@@ -5,8 +5,17 @@ export type CopyableContentProps = {
|
|
|
5
5
|
* Controls the visual surface of the content block.
|
|
6
6
|
*/
|
|
7
7
|
appearance?: CopyableContentAppearance;
|
|
8
|
+
/**
|
|
9
|
+
* Markdown source used for rendering and clipboard data.
|
|
10
|
+
*/
|
|
8
11
|
content: string;
|
|
12
|
+
/**
|
|
13
|
+
* Replaces only the visible rendered content and never the copied source.
|
|
14
|
+
*/
|
|
9
15
|
children?: ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Replaces the localized error message shown when copying fails.
|
|
18
|
+
*/
|
|
10
19
|
copyFailedMessage?: string;
|
|
11
20
|
};
|
|
12
21
|
declare const CopyableContent: FC<CopyableContentProps>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
type IUpdateSelectedRadioButtonId = (id: string | undefined) => void;
|
|
3
|
-
type IUpdateHasRightElement = (id: string, hasRightElement: boolean) => void;
|
|
2
|
+
type IUpdateSelectedRadioButtonId = (id: string | number | undefined) => void;
|
|
3
|
+
type IUpdateHasRightElement = (id: string | number, hasRightElement: boolean) => void;
|
|
4
4
|
type IRadioButtonRightElements = {
|
|
5
|
-
id: string;
|
|
5
|
+
id: string | number;
|
|
6
6
|
hasRightElement: boolean;
|
|
7
7
|
}[];
|
|
8
8
|
interface IRadioButtonGroupContext {
|
|
9
|
-
selectedRadioButtonId: string | undefined;
|
|
9
|
+
selectedRadioButtonId: string | number | undefined;
|
|
10
10
|
updateSelectedRadioButtonId?: IUpdateSelectedRadioButtonId;
|
|
11
11
|
radioButtonRightElements: IRadioButtonRightElements;
|
|
12
12
|
updateHasRightElement?: IUpdateHasRightElement;
|
|
@@ -34,11 +34,11 @@ export type RadioButtonGroupProps = {
|
|
|
34
34
|
/**
|
|
35
35
|
* Function to be executed when an id is selected.
|
|
36
36
|
*/
|
|
37
|
-
onSelect?: (id?: string) => void;
|
|
37
|
+
onSelect?: (id?: string | number) => void;
|
|
38
38
|
/**
|
|
39
39
|
* The id of the current selected RadioButton.
|
|
40
40
|
*/
|
|
41
|
-
selectedId?: string;
|
|
41
|
+
selectedId?: string | number;
|
|
42
42
|
};
|
|
43
43
|
declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<RadioButtonGroupRef>>;
|
|
44
44
|
export default RadioButtonGroup;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
export declare const getRadioButtonOrder: (children: ReactNode) => string[];
|
|
2
|
+
export declare const getRadioButtonOrder: (children: ReactNode) => (string | number)[];
|