@flipdish/ui-library 0.32.1 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Avatar/components/AvatarLabelGroup.cjs +6 -4
- package/dist/components/atoms/Avatar/components/AvatarLabelGroup.cjs.map +1 -1
- package/dist/components/atoms/Avatar/components/AvatarLabelGroup.d.ts +7 -1
- package/dist/components/atoms/Avatar/components/AvatarLabelGroup.d.ts.map +1 -1
- package/dist/components/atoms/Avatar/components/AvatarLabelGroup.js +6 -4
- package/dist/components/atoms/Avatar/components/AvatarLabelGroup.js.map +1 -1
- package/dist/components/atoms/Badge/badge.types.cjs.map +1 -1
- package/dist/components/atoms/Badge/badge.types.d.ts +2 -1
- package/dist/components/atoms/Badge/badge.types.d.ts.map +1 -1
- package/dist/components/atoms/Badge/badge.types.js.map +1 -1
- package/dist/components/atoms/Badge/index.cjs +2 -1
- package/dist/components/atoms/Badge/index.cjs.map +1 -1
- package/dist/components/atoms/Badge/index.d.ts.map +1 -1
- package/dist/components/atoms/Badge/index.js +2 -1
- package/dist/components/atoms/Badge/index.js.map +1 -1
- package/dist/components/atoms/Card/index.cjs +28 -0
- package/dist/components/atoms/Card/index.cjs.map +1 -0
- package/dist/components/atoms/Card/index.d.ts +20 -0
- package/dist/components/atoms/Card/index.d.ts.map +1 -0
- package/dist/components/atoms/Card/index.js +26 -0
- package/dist/components/atoms/Card/index.js.map +1 -0
- package/dist/components/atoms/CopyButton/index.cjs +27 -0
- package/dist/components/atoms/CopyButton/index.cjs.map +1 -0
- package/dist/components/atoms/CopyButton/index.d.ts +28 -0
- package/dist/components/atoms/CopyButton/index.d.ts.map +1 -0
- package/dist/components/atoms/CopyButton/index.js +25 -0
- package/dist/components/atoms/CopyButton/index.js.map +1 -0
- package/dist/components/atoms/Flag/flag.types.d.ts +6 -0
- package/dist/components/atoms/Flag/flag.types.d.ts.map +1 -0
- package/dist/components/atoms/Flag/flag.utils.cjs +45 -0
- package/dist/components/atoms/Flag/flag.utils.cjs.map +1 -0
- package/dist/components/atoms/Flag/flag.utils.d.ts +15 -0
- package/dist/components/atoms/Flag/flag.utils.d.ts.map +1 -0
- package/dist/components/atoms/Flag/flag.utils.js +42 -0
- package/dist/components/atoms/Flag/flag.utils.js.map +1 -0
- package/dist/components/atoms/Flag/index.cjs +47 -0
- package/dist/components/atoms/Flag/index.cjs.map +1 -0
- package/dist/components/atoms/Flag/index.d.ts +27 -0
- package/dist/components/atoms/Flag/index.d.ts.map +1 -0
- package/dist/components/atoms/Flag/index.js +45 -0
- package/dist/components/atoms/Flag/index.js.map +1 -0
- package/dist/components/atoms/SearchInput/index.cjs +32 -0
- package/dist/components/atoms/SearchInput/index.cjs.map +1 -0
- package/dist/components/atoms/SearchInput/index.d.ts +40 -0
- package/dist/components/atoms/SearchInput/index.d.ts.map +1 -0
- package/dist/components/atoms/SearchInput/index.js +30 -0
- package/dist/components/atoms/SearchInput/index.js.map +1 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.cjs +73 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.cjs.map +1 -1
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.d.ts +48 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.d.ts.map +1 -1
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.js +70 -1
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.js.map +1 -1
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.cjs +24 -2
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.cjs.map +1 -1
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.d.ts +2 -1
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.d.ts.map +1 -1
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.js +25 -3
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.js.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.cjs +7 -25
- package/dist/components/molecules/CodeSnippet/index.cjs.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.d.ts +8 -4
- package/dist/components/molecules/CodeSnippet/index.d.ts.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.js +8 -26
- package/dist/components/molecules/CodeSnippet/index.js.map +1 -1
- package/dist/components/molecules/DetailList/detailList.types.d.ts +15 -0
- package/dist/components/molecules/DetailList/detailList.types.d.ts.map +1 -0
- package/dist/components/molecules/DetailList/index.cjs +32 -0
- package/dist/components/molecules/DetailList/index.cjs.map +1 -0
- package/dist/components/molecules/DetailList/index.d.ts +26 -0
- package/dist/components/molecules/DetailList/index.d.ts.map +1 -0
- package/dist/components/molecules/DetailList/index.js +30 -0
- package/dist/components/molecules/DetailList/index.js.map +1 -0
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs +43 -0
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.cjs.map +1 -0
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.d.ts +24 -0
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.d.ts.map +1 -0
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js +41 -0
- package/dist/components/molecules/RadioGroup/components/RadioGroupAvatarCard.js.map +1 -0
- package/dist/components/molecules/RadioGroup/index.cjs +2 -0
- package/dist/components/molecules/RadioGroup/index.cjs.map +1 -1
- package/dist/components/molecules/RadioGroup/index.d.ts +2 -0
- package/dist/components/molecules/RadioGroup/index.d.ts.map +1 -1
- package/dist/components/molecules/RadioGroup/index.js +1 -0
- package/dist/components/molecules/RadioGroup/index.js.map +1 -1
- package/dist/components/molecules/RadioGroup/radioGroup.types.d.ts +17 -1
- package/dist/components/molecules/RadioGroup/radioGroup.types.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts +8 -2
- package/dist/components/organisms/ApplicationHeader/applicationHeader.types.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/components/AvatarButton.cjs +4 -1
- package/dist/components/organisms/ApplicationHeader/components/AvatarButton.cjs.map +1 -1
- package/dist/components/organisms/ApplicationHeader/components/AvatarButton.d.ts +2 -1
- package/dist/components/organisms/ApplicationHeader/components/AvatarButton.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/components/AvatarButton.js +4 -1
- package/dist/components/organisms/ApplicationHeader/components/AvatarButton.js.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.cjs +1 -1
- package/dist/components/organisms/ApplicationHeader/index.cjs.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.js +1 -1
- package/dist/components/organisms/ApplicationHeader/index.js.map +1 -1
- package/dist/components/organisms/Calendar/calendar.utils.cjs +35 -0
- package/dist/components/organisms/Calendar/calendar.utils.cjs.map +1 -1
- package/dist/components/organisms/Calendar/calendar.utils.d.ts +29 -0
- package/dist/components/organisms/Calendar/calendar.utils.d.ts.map +1 -1
- package/dist/components/organisms/Calendar/calendar.utils.js +36 -2
- package/dist/components/organisms/Calendar/calendar.utils.js.map +1 -1
- package/dist/components/organisms/Calendar/hooks/useCalendarClock.cjs +30 -0
- package/dist/components/organisms/Calendar/hooks/useCalendarClock.cjs.map +1 -0
- package/dist/components/organisms/Calendar/hooks/useCalendarClock.d.ts +12 -0
- package/dist/components/organisms/Calendar/hooks/useCalendarClock.d.ts.map +1 -0
- package/dist/components/organisms/Calendar/hooks/useCalendarClock.js +28 -0
- package/dist/components/organisms/Calendar/hooks/useCalendarClock.js.map +1 -0
- package/dist/components/organisms/Calendar/index.cjs +13 -42
- package/dist/components/organisms/Calendar/index.cjs.map +1 -1
- package/dist/components/organisms/Calendar/index.d.ts.map +1 -1
- package/dist/components/organisms/Calendar/index.js +15 -44
- package/dist/components/organisms/Calendar/index.js.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.cjs +2 -3
- package/dist/components/organisms/HeaderNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/HeaderNavigation/index.js +2 -3
- package/dist/components/organisms/HeaderNavigation/index.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs +3 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js +3 -1
- package/dist/components/organisms/SidePanel/components/SidePanelContent.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelFooter.cjs +3 -3
- package/dist/components/organisms/SidePanel/components/SidePanelFooter.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelFooter.d.ts +7 -2
- package/dist/components/organisms/SidePanel/components/SidePanelFooter.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelFooter.js +3 -3
- package/dist/components/organisms/SidePanel/components/SidePanelFooter.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs +7 -3
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts +6 -2
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js +7 -3
- package/dist/components/organisms/SidePanel/components/SidePanelHeader.js.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs +8 -3
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts +2 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js +8 -3
- package/dist/components/organisms/SidePanel/components/SidePanelRegion.js.map +1 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs +12 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts +3 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js +13 -2
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js.map +1 -1
- package/dist/components/organisms/SidePanel/index.cjs +2 -2
- package/dist/components/organisms/SidePanel/index.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/index.d.ts +3 -1
- package/dist/components/organisms/SidePanel/index.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/index.js +2 -2
- package/dist/components/organisms/SidePanel/index.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.cjs +9 -2
- package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.d.ts +12 -1
- package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.js +9 -2
- package/dist/components/organisms/SidebarNavigation/components/NavAccountCard.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/NavItem.cjs +10 -4
- package/dist/components/organisms/SidebarNavigation/components/NavItem.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/NavItem.d.ts +12 -1
- package/dist/components/organisms/SidebarNavigation/components/NavItem.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/components/NavItem.js +10 -4
- package/dist/components/organisms/SidebarNavigation/components/NavItem.js.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.cjs +36 -11
- package/dist/components/organisms/SidebarNavigation/index.cjs.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.d.ts.map +1 -1
- package/dist/components/organisms/SidebarNavigation/index.js +38 -13
- package/dist/components/organisms/SidebarNavigation/index.js.map +1 -1
- package/dist/native/components/atoms/Card/index.d.ts +12 -0
- package/dist/native/components/atoms/CopyButton/index.d.ts +12 -0
- package/dist/native/components/atoms/Flag/index.d.ts +12 -0
- package/dist/native/components/atoms/SearchInput/index.d.ts +12 -0
- package/dist/native/components/molecules/DetailList/index.d.ts +12 -0
- package/dist/utilities/renderUtils/index.cjs +21 -0
- package/dist/utilities/renderUtils/index.cjs.map +1 -1
- package/dist/utilities/renderUtils/index.d.ts +10 -0
- package/dist/utilities/renderUtils/index.d.ts.map +1 -1
- package/dist/utilities/renderUtils/index.js +21 -1
- package/dist/utilities/renderUtils/index.js.map +1 -1
- package/package.json +2 -1
- package/dist/components/organisms/SidebarNavigation/components/NavButton.cjs +0 -32
- package/dist/components/organisms/SidebarNavigation/components/NavButton.cjs.map +0 -1
- package/dist/components/organisms/SidebarNavigation/components/NavButton.d.ts +0 -36
- package/dist/components/organisms/SidebarNavigation/components/NavButton.d.ts.map +0 -1
- package/dist/components/organisms/SidebarNavigation/components/NavButton.js +0 -30
- package/dist/components/organisms/SidebarNavigation/components/NavButton.js.map +0 -1
|
@@ -11,7 +11,8 @@ interface UseCodeSnippetHighlightOptions<Language extends string> {
|
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
13
|
* Replaces the fallback nodes with syntax-highlighted nodes once `code` has been highlighted.
|
|
14
|
-
* The first paint keeps the fallback so the snippet is not blank while highlighting runs
|
|
14
|
+
* The first paint keeps the fallback so the snippet is not blank while highlighting runs, and a
|
|
15
|
+
* highlight that fails or is superseded by a newer `code` or `language` never replaces it.
|
|
15
16
|
*
|
|
16
17
|
* @param options The snippet source, its language, the nodes shown before highlighting finishes, and the highlighter.
|
|
17
18
|
* @returns The nodes to render inside the code block.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCodeSnippetHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCodeSnippetHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAC;AAE1E,UAAU,8BAA8B,CAAC,QAAQ,SAAS,MAAM;IAC9D,mGAAmG;IACnG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0EAA0E;IAC1E,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;CACzE;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,SAAS,MAAM,EAAE,8CAK9D,8BAA8B,CAAC,QAAQ,CAAC,KAAG,SA6B7C,CAAC"}
|
|
@@ -1,18 +1,40 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isProductionBuild } from '@flipdish/ui-library/utilities/renderUtils';
|
|
2
|
+
import { useState, useRef, useLayoutEffect } from 'react';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Replaces the fallback nodes with syntax-highlighted nodes once `code` has been highlighted.
|
|
5
|
-
* The first paint keeps the fallback so the snippet is not blank while highlighting runs
|
|
6
|
+
* The first paint keeps the fallback so the snippet is not blank while highlighting runs, and a
|
|
7
|
+
* highlight that fails or is superseded by a newer `code` or `language` never replaces it.
|
|
6
8
|
*
|
|
7
9
|
* @param options The snippet source, its language, the nodes shown before highlighting finishes, and the highlighter.
|
|
8
10
|
* @returns The nodes to render inside the code block.
|
|
9
11
|
*/
|
|
10
12
|
const useCodeSnippetHighlight = ({ code, language, fallback, highlightCode, }) => {
|
|
11
13
|
const [nodes, setNodes] = useState(fallback);
|
|
14
|
+
// Synced after commit, so a rejection never shows a fallback from a render React threw away.
|
|
15
|
+
const fallbackRef = useRef(fallback);
|
|
16
|
+
useLayoutEffect(() => {
|
|
17
|
+
fallbackRef.current = fallback;
|
|
18
|
+
}, [fallback]);
|
|
12
19
|
useLayoutEffect(() => {
|
|
13
20
|
if (!code)
|
|
14
21
|
return;
|
|
15
|
-
|
|
22
|
+
// Grammars load on first use, so an earlier highlight can finish after a later one; only the latest request may render.
|
|
23
|
+
let stale = false;
|
|
24
|
+
highlightCode(code, language).then((highlighted) => {
|
|
25
|
+
if (!stale)
|
|
26
|
+
setNodes(highlighted);
|
|
27
|
+
}, (error) => {
|
|
28
|
+
// A failed highlight, such as a theme chunk that did not load, shows the plain code rather than an older highlight.
|
|
29
|
+
if (stale)
|
|
30
|
+
return;
|
|
31
|
+
setNodes(fallbackRef.current);
|
|
32
|
+
if (!isProductionBuild())
|
|
33
|
+
console.warn('CodeSnippet: highlighting failed, showing plain code.', error);
|
|
34
|
+
});
|
|
35
|
+
return () => {
|
|
36
|
+
stale = true;
|
|
37
|
+
};
|
|
16
38
|
}, [code, language, highlightCode]);
|
|
17
39
|
return nodes;
|
|
18
40
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCodeSnippetHighlight.js","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useCodeSnippetHighlight.js","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAgBA;;;;;;;AAOG;AACI,MAAM,uBAAuB,GAAG,CAA0B,EAC/D,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,aAAa,GAC4B,KAAe;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC;;AAE5C,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;IACpC,eAAe,CAAC,MAAK;AACnB,QAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAChC,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,IAAI;YAAE;;QAEX,IAAI,KAAK,GAAG,KAAK;QACjB,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAChC,CAAC,WAAW,KAAI;AACd,YAAA,IAAI,CAAC,KAAK;gBAAE,QAAQ,CAAC,WAAW,CAAC;AACnC,QAAA,CAAC,EACD,CAAC,KAAc,KAAI;;AAEjB,YAAA,IAAI,KAAK;gBAAE;AACX,YAAA,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,iBAAiB,EAAE;AAAE,gBAAA,OAAO,CAAC,IAAI,CAAC,uDAAuD,EAAE,KAAK,CAAC;AACxG,QAAA,CAAC,CACF;AACD,QAAA,OAAO,MAAK;YACV,KAAK,GAAG,IAAI;AACd,QAAA,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,OAAO,KAAK;AACd;;"}
|
|
@@ -10,36 +10,18 @@ var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
|
10
10
|
var hastUtilToJsxRuntime = require('hast-util-to-jsx-runtime');
|
|
11
11
|
var React = require('react');
|
|
12
12
|
var reactAriaComponents = require('react-aria-components');
|
|
13
|
-
var web = require('shiki/bundle/web');
|
|
14
13
|
var codeSnippet_utils = require('./codeSnippet.utils.cjs');
|
|
15
14
|
var useCodeSnippetCollapse = require('./hooks/useCodeSnippetCollapse.cjs');
|
|
16
15
|
var useCodeSnippetHighlight = require('./hooks/useCodeSnippetHighlight.cjs');
|
|
17
16
|
|
|
17
|
+
/**
|
|
18
|
+
* Highlights source into React nodes with the snippet's themes, loading the grammar on first use.
|
|
19
|
+
* @param code The source to highlight.
|
|
20
|
+
* @param lang The language id; one Shiki does not know renders as plain text.
|
|
21
|
+
* @returns The highlighted `<pre>` tree, ready to render in place of the fallback.
|
|
22
|
+
*/
|
|
18
23
|
const highlight = async (code, lang) => {
|
|
19
|
-
const out = await
|
|
20
|
-
lang: lang,
|
|
21
|
-
defaultColor: 'light',
|
|
22
|
-
themes: {
|
|
23
|
-
light: 'github-light',
|
|
24
|
-
dark: 'github-dark',
|
|
25
|
-
},
|
|
26
|
-
colorReplacements: {
|
|
27
|
-
'github-light': {
|
|
28
|
-
'#24292e': 'var(--color-text-primary)',
|
|
29
|
-
'#005cc5': 'var(--color-utility-blue-600)',
|
|
30
|
-
'#d73a49': 'var(--color-utility-pink-600)',
|
|
31
|
-
'#6f42c1': 'var(--color-utility-brand-600)',
|
|
32
|
-
'#032f62': 'var(--color-primary)',
|
|
33
|
-
},
|
|
34
|
-
'github-dark': {
|
|
35
|
-
'#e1e4e8': 'var(--color-text-primary)',
|
|
36
|
-
'#79b8ff': 'var(--color-utility-blue-600)',
|
|
37
|
-
'#f97583': 'var(--color-utility-pink-600)',
|
|
38
|
-
'#b392f0': 'var(--color-utility-brand-600)',
|
|
39
|
-
'#9ecbff': 'var(--color-primary)',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
});
|
|
24
|
+
const out = await codeSnippet_utils.highlightToHast(code, lang);
|
|
43
25
|
return hastUtilToJsxRuntime.toJsxRuntime(out, {
|
|
44
26
|
Fragment: React.Fragment,
|
|
45
27
|
jsx: jsxRuntime.jsx,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["highlightToHast","toJsxRuntime","Fragment","jsx","jsxs","createContext","useCodeSnippetHighlight","useClipboard","useCodeSnippetCollapse","useContext","useResolvedTestId","_jsx","TestIdProvider","_jsxs","cx","Button","ButtonUtility","Expand06","joinTestId","Check","Copy01","useRef","AriaTabs","getActiveTabPanelText","AriaTabList","useTestIdPrefix","slugifyTestId","AriaTab","AriaTabPanel"],"mappings":"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"}
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
2
2
|
import type { TabListProps, TabPanelProps, TabProps, TabsProps } from 'react-aria-components';
|
|
3
|
-
import
|
|
4
|
-
type
|
|
5
|
-
|
|
3
|
+
import { type Languages } from './codeSnippet.utils';
|
|
4
|
+
export type { Languages } from './codeSnippet.utils';
|
|
5
|
+
/**
|
|
6
|
+
* Highlights source into React nodes with the snippet's themes, loading the grammar on first use.
|
|
7
|
+
* @param code The source to highlight.
|
|
8
|
+
* @param lang The language id; one Shiki does not know renders as plain text.
|
|
9
|
+
* @returns The highlighted `<pre>` tree, ready to render in place of the fallback.
|
|
10
|
+
*/
|
|
6
11
|
export declare const highlight: (code: string, lang: Languages) => Promise<JSX.Element>;
|
|
7
12
|
export interface CodeSnippetProps extends HTMLAttributes<HTMLDivElement> {
|
|
8
13
|
/**
|
|
@@ -68,5 +73,4 @@ export declare const CodeSnippet: typeof CodeSnippetComponent & {
|
|
|
68
73
|
Tab: typeof CodeSnippetTab;
|
|
69
74
|
TabPanel: typeof CodeSnippetTabPanel;
|
|
70
75
|
};
|
|
71
|
-
export {};
|
|
72
76
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAA+C,KAAK,cAAc,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAE7I,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9F,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAA+C,KAAK,cAAc,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAE7I,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAE9F,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI7F,YAAY,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAU,MAAM,MAAM,EAAE,MAAM,SAAS,yBAQ5D,CAAC;AAkBF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,oBAAoB,GAAI,iIAW3B,gBAAgB,gCA6FlB,CAAC;AAEF,QAAA,MAAM,eAAe,GAAI,mEAAmE,SAAS,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,gCAwBjI,CAAC;AAEF,QAAA,MAAM,kBAAkB,GAAI,CAAC,SAAS,MAAM,EAAE,wCAAwC,YAAY,CAAC,CAAC,CAAC,gCAyBpG,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,QAAQ;IACnD,0FAA0F;IAC1F,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,wCAAwC,mBAAmB,gCAqBlF,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,wCAAwC,aAAa,gCAcjF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAA2B,OAAO,oBAAoB,GAAG;IAC/E,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,OAAO,EAAE,OAAO,kBAAkB,CAAC;IACnC,GAAG,EAAE,OAAO,cAAc,CAAC;IAC3B,QAAQ,EAAE,OAAO,mBAAmB,CAAC;CACtC,CAAC"}
|
|
@@ -8,36 +8,18 @@ import { useResolvedTestId, TestIdProvider, joinTestId, useTestIdPrefix, slugify
|
|
|
8
8
|
import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
|
|
9
9
|
import { createContext, useContext, Fragment, useRef } from 'react';
|
|
10
10
|
import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components';
|
|
11
|
-
import {
|
|
12
|
-
import { getActiveTabPanelText } from './codeSnippet.utils.js';
|
|
11
|
+
import { highlightToHast, getActiveTabPanelText } from './codeSnippet.utils.js';
|
|
13
12
|
import { useCodeSnippetCollapse } from './hooks/useCodeSnippetCollapse.js';
|
|
14
13
|
import { useCodeSnippetHighlight } from './hooks/useCodeSnippetHighlight.js';
|
|
15
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Highlights source into React nodes with the snippet's themes, loading the grammar on first use.
|
|
17
|
+
* @param code The source to highlight.
|
|
18
|
+
* @param lang The language id; one Shiki does not know renders as plain text.
|
|
19
|
+
* @returns The highlighted `<pre>` tree, ready to render in place of the fallback.
|
|
20
|
+
*/
|
|
16
21
|
const highlight = async (code, lang) => {
|
|
17
|
-
const out = await
|
|
18
|
-
lang: lang,
|
|
19
|
-
defaultColor: 'light',
|
|
20
|
-
themes: {
|
|
21
|
-
light: 'github-light',
|
|
22
|
-
dark: 'github-dark',
|
|
23
|
-
},
|
|
24
|
-
colorReplacements: {
|
|
25
|
-
'github-light': {
|
|
26
|
-
'#24292e': 'var(--color-text-primary)',
|
|
27
|
-
'#005cc5': 'var(--color-utility-blue-600)',
|
|
28
|
-
'#d73a49': 'var(--color-utility-pink-600)',
|
|
29
|
-
'#6f42c1': 'var(--color-utility-brand-600)',
|
|
30
|
-
'#032f62': 'var(--color-primary)',
|
|
31
|
-
},
|
|
32
|
-
'github-dark': {
|
|
33
|
-
'#e1e4e8': 'var(--color-text-primary)',
|
|
34
|
-
'#79b8ff': 'var(--color-utility-blue-600)',
|
|
35
|
-
'#f97583': 'var(--color-utility-pink-600)',
|
|
36
|
-
'#b392f0': 'var(--color-utility-brand-600)',
|
|
37
|
-
'#9ecbff': 'var(--color-primary)',
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
});
|
|
22
|
+
const out = await highlightToHast(code, lang);
|
|
41
23
|
return toJsxRuntime(out, {
|
|
42
24
|
Fragment,
|
|
43
25
|
jsx,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { FC, ReactElement, ReactNode } from 'react';
|
|
2
|
+
/** One row of a `DetailList`: an icon, the label and the value it describes. */
|
|
3
|
+
export type DetailListItemType = {
|
|
4
|
+
/** Stable key and test-id segment; the slugified `label` is used when absent. */
|
|
5
|
+
id?: string;
|
|
6
|
+
/** Icon component, or a ready element such as a `Flag`, centred in the row's `FeaturedIcon`. */
|
|
7
|
+
icon: FC<{
|
|
8
|
+
className?: string;
|
|
9
|
+
}> | ReactElement;
|
|
10
|
+
/** What the value is, rendered as the term. */
|
|
11
|
+
label: string;
|
|
12
|
+
/** The value itself: text, or an element such as a `Badge`. */
|
|
13
|
+
value: ReactNode;
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=detailList.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"detailList.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DetailList/detailList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iFAAiF;IACjF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gGAAgG;IAChG,IAAI,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,YAAY,CAAC;IAChD,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var FeaturedIcon = require('@flipdish/ui-library/components/atoms/FeaturedIcon');
|
|
5
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
7
|
+
|
|
8
|
+
// Row padding equals the icon width plus the gap, so the term and value sit beside the centred icon.
|
|
9
|
+
const sizes = {
|
|
10
|
+
sm: { list: 'gap-4', row: 'pl-11', icon: 'sm', text: 'text-sm' },
|
|
11
|
+
md: { list: 'gap-5', row: 'pl-14', icon: 'md', text: 'text-md' },
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Read-only facts about one record, each row an icon, a label and its value, such as an
|
|
15
|
+
* organisation's type, contact email and country. Use it on summary panels and detail pages
|
|
16
|
+
* where the values are shown, not edited.
|
|
17
|
+
*
|
|
18
|
+
* @summary icon-led label and value rows for one record
|
|
19
|
+
*/
|
|
20
|
+
const DetailList = ({ items, size = 'sm', iconColor = 'brand', iconTheme = 'light', className, 'data-testid': dataTestId, }) => {
|
|
21
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'detail-list', rootName: 'detail-list' });
|
|
22
|
+
const styles = sizes[size];
|
|
23
|
+
const renderItem = (item) => {
|
|
24
|
+
const key = item.id ?? testIdUtils.slugifyTestId(item.label);
|
|
25
|
+
// The icon lives inside the term and is positioned against the group, so the group holds only `dt` and `dd` as the `dl` content model requires.
|
|
26
|
+
return (jsxRuntime.jsxs("div", { "data-testid": testIdUtils.joinTestId(rootTestId, `item-${key}`), className: cx.cx('relative flex flex-col gap-1', styles.row), children: [jsxRuntime.jsxs("dt", { className: cx.cx('truncate text-primary', styles.text), children: [jsxRuntime.jsx("span", { "aria-hidden": "true", className: "contents", children: jsxRuntime.jsx(FeaturedIcon.FeaturedIcon, { icon: item.icon, size: styles.icon, color: iconColor, theme: iconTheme, className: "absolute top-1/2 left-0 -translate-y-1/2" }) }), item.label] }), jsxRuntime.jsx("dd", { className: cx.cx('truncate font-semibold text-primary', styles.text), children: item.value })] }, key));
|
|
27
|
+
};
|
|
28
|
+
return (jsxRuntime.jsx("dl", { "data-testid": rootTestId, className: cx.cx('flex flex-col', styles.list, className), children: items.map(renderItem) }));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
exports.DetailList = DetailList;
|
|
32
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","slugifyTestId","_jsxs","joinTestId","cx","_jsx","FeaturedIcon"],"mappings":";;;;;;;AASA;AACA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;AAChE,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;CACxD;AAiBV;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAI;AACpB,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAC7G,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAE1B,IAAA,MAAM,UAAU,GAAG,CAAC,IAAwB,KAAI;AAC9C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAIC,yBAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;QAGhD,QACEC,wCAA4BC,sBAAU,CAAC,UAAU,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,EAAE,SAAS,EAAEC,KAAE,CAAC,8BAA8B,EAAE,MAAM,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAC1HF,wBAAI,SAAS,EAAEE,KAAE,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAErDC,wCAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC3CA,cAAA,CAACC,yBAAY,EAAA,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,0CAA0C,EAAA,CACpD,EAAA,CACG,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,CACR,EACLD,uBAAI,SAAS,EAAED,KAAE,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,GAAM,CAAA,EAAA,EAdhF,GAAG,CAeP;AAEV,IAAA,CAAC;IAED,QACEC,cAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EAAiB,UAAU,EAAE,SAAS,EAAED,KAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAA,CACnB;AAET;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { type FeaturedIconProps } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
|
|
2
|
+
import type { DetailListItemType } from './detailList.types';
|
|
3
|
+
export type { DetailListItemType } from './detailList.types';
|
|
4
|
+
export interface DetailListProps {
|
|
5
|
+
/** Rows to show, in order; each `id` (or slugified `label`) must be unique. */
|
|
6
|
+
items: DetailListItemType[];
|
|
7
|
+
/** Icon size and text scale of every row. */
|
|
8
|
+
size?: 'sm' | 'md';
|
|
9
|
+
/** Semantic colour of every row's `FeaturedIcon`. */
|
|
10
|
+
iconColor?: FeaturedIconProps['color'];
|
|
11
|
+
/** Container style of every row's `FeaturedIcon`. */
|
|
12
|
+
iconTheme?: FeaturedIconProps['theme'];
|
|
13
|
+
/** Extra classes merged onto the `<dl>`. */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Overrides the root `data-testid` (defaults to `fd-detail-list`). Rows derive `<root>--item-<id>` from it. */
|
|
16
|
+
'data-testid'?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Read-only facts about one record, each row an icon, a label and its value, such as an
|
|
20
|
+
* organisation's type, contact email and country. Use it on summary panels and detail pages
|
|
21
|
+
* where the values are shown, not edited.
|
|
22
|
+
*
|
|
23
|
+
* @summary icon-led label and value rows for one record
|
|
24
|
+
*/
|
|
25
|
+
export declare const DetailList: ({ items, size, iconColor, iconTheme, className, "data-testid": dataTestId, }: DetailListProps) => import("react").JSX.Element;
|
|
26
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAG1G,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAQ7D,MAAM,WAAW,eAAe;IAC9B,+EAA+E;IAC/E,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvC,qDAAqD;IACrD,SAAS,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACvC,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gHAAgH;IAChH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,8EAOxB,eAAe,gCAiCjB,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { FeaturedIcon } from '@flipdish/ui-library/components/atoms/FeaturedIcon';
|
|
3
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
|
+
import { useResolvedTestId, slugifyTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
|
+
|
|
6
|
+
// Row padding equals the icon width plus the gap, so the term and value sit beside the centred icon.
|
|
7
|
+
const sizes = {
|
|
8
|
+
sm: { list: 'gap-4', row: 'pl-11', icon: 'sm', text: 'text-sm' },
|
|
9
|
+
md: { list: 'gap-5', row: 'pl-14', icon: 'md', text: 'text-md' },
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Read-only facts about one record, each row an icon, a label and its value, such as an
|
|
13
|
+
* organisation's type, contact email and country. Use it on summary panels and detail pages
|
|
14
|
+
* where the values are shown, not edited.
|
|
15
|
+
*
|
|
16
|
+
* @summary icon-led label and value rows for one record
|
|
17
|
+
*/
|
|
18
|
+
const DetailList = ({ items, size = 'sm', iconColor = 'brand', iconTheme = 'light', className, 'data-testid': dataTestId, }) => {
|
|
19
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'detail-list', rootName: 'detail-list' });
|
|
20
|
+
const styles = sizes[size];
|
|
21
|
+
const renderItem = (item) => {
|
|
22
|
+
const key = item.id ?? slugifyTestId(item.label);
|
|
23
|
+
// The icon lives inside the term and is positioned against the group, so the group holds only `dt` and `dd` as the `dl` content model requires.
|
|
24
|
+
return (jsxs("div", { "data-testid": joinTestId(rootTestId, `item-${key}`), className: cx('relative flex flex-col gap-1', styles.row), children: [jsxs("dt", { className: cx('truncate text-primary', styles.text), children: [jsx("span", { "aria-hidden": "true", className: "contents", children: jsx(FeaturedIcon, { icon: item.icon, size: styles.icon, color: iconColor, theme: iconTheme, className: "absolute top-1/2 left-0 -translate-y-1/2" }) }), item.label] }), jsx("dd", { className: cx('truncate font-semibold text-primary', styles.text), children: item.value })] }, key));
|
|
25
|
+
};
|
|
26
|
+
return (jsx("dl", { "data-testid": rootTestId, className: cx('flex flex-col', styles.list, className), children: items.map(renderItem) }));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export { DetailList };
|
|
30
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/DetailList/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AASA;AACA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;AAChE,IAAA,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE;CACxD;AAiBV;;;;;;AAMG;AACI,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,OAAO,EACnB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,aAAa,EAAE,UAAU,GACT,KAAI;AACpB,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAC7G,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC;AAE1B,IAAA,MAAM,UAAU,GAAG,CAAC,IAAwB,KAAI;AAC9C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;;QAGhD,QACEA,6BAA4B,UAAU,CAAC,UAAU,EAAE,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,MAAM,CAAC,GAAG,CAAC,EAAA,QAAA,EAAA,CAC1HA,aAAI,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,CAErDC,6BAAkB,MAAM,EAAC,SAAS,EAAC,UAAU,YAC3CA,GAAA,CAAC,YAAY,EAAA,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAC,0CAA0C,EAAA,CACpD,EAAA,CACG,EACN,IAAI,CAAC,KAAK,CAAA,EAAA,CACR,EACLA,YAAI,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,GAAM,CAAA,EAAA,EAdhF,GAAG,CAeP;AAEV,IAAA,CAAC;IAED,QACEA,GAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EAAiB,UAAU,EAAE,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAChF,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,EAAA,CACnB;AAET;;"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
|
|
5
|
+
var Checkbox = require('@flipdish/ui-library/components/atoms/Checkbox');
|
|
6
|
+
var RadioButton = require('@flipdish/ui-library/components/atoms/RadioButton');
|
|
7
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
8
|
+
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
9
|
+
var React = require('react');
|
|
10
|
+
var reactAriaComponents = require('react-aria-components');
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Radio group where each option is a card with a square logo, title, ID-style subtitle and
|
|
14
|
+
* an optional footer for a link or action. Use to pick a brand, store or other entity by its
|
|
15
|
+
* logo; the footer sits outside the radio, so a link in it never nests inside the control.
|
|
16
|
+
*
|
|
17
|
+
* @summary pick one entity from logo-led cards
|
|
18
|
+
*/
|
|
19
|
+
const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', onOptionPress, className, 'data-testid': dataTestId, ...props }) => {
|
|
20
|
+
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
21
|
+
const Indicator = indicator === 'checkbox' ? Checkbox.CheckboxBase : RadioButton.RadioButtonBase;
|
|
22
|
+
// Ids, not test ids: two groups with the same values on one page must not describe each other's options.
|
|
23
|
+
const groupId = React.useId();
|
|
24
|
+
return (jsxRuntime.jsx(reactAriaComponents.RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx.cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: ({ state, isDisabled: isGroupDisabled }) => items.map((item) => {
|
|
25
|
+
const isSelected = state.selectedValue === item.value;
|
|
26
|
+
const isDisabled = isGroupDisabled || Boolean(item.disabled);
|
|
27
|
+
const optionTestId = testIdUtils.joinTestId(rootTestId, `option-${item.value}`);
|
|
28
|
+
// Slugged: a value with spaces would split `aria-describedby` into several ids.
|
|
29
|
+
const subtitleId = item.subtitle ? `${groupId}-${testIdUtils.slugifyTestId(item.value)}-subtitle` : undefined;
|
|
30
|
+
// The radio is the card's `<label>`; a press in the footer is the footer's own and not an option press. Capture phase,
|
|
31
|
+
// because react-aria stops the radio's click from bubbling. Space on the focused radio fires a native click, so keyboard is covered.
|
|
32
|
+
const handleClickCapture = (event) => {
|
|
33
|
+
if (!isDisabled && event.target instanceof Element && event.target.closest('label'))
|
|
34
|
+
onOptionPress?.(item.value);
|
|
35
|
+
};
|
|
36
|
+
return (
|
|
37
|
+
// The card, not the radio, carries the selected ring so the footer sits inside the same outline.
|
|
38
|
+
jsxRuntime.jsxs("div", { onClickCapture: handleClickCapture, className: cx.cx('flex flex-col rounded-xl bg-primary ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsxRuntime.jsx(reactAriaComponents.Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled, isFocusVisible }) => cx.cx('flex cursor-pointer items-center outline-focus-ring', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', item.footer ? 'rounded-t-xl' : 'rounded-xl', isDisabled && 'cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Avatar.Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsxRuntime.jsx("span", { className: cx.cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsxRuntime.jsx("span", { id: subtitleId, className: cx.cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsxRuntime.jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsxRuntime.jsx("div", { className: "flex justify-end border-t border-secondary px-4 py-3", children: item.footer })] }, item.value));
|
|
39
|
+
}) }));
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
exports.RadioGroupAvatarCard = RadioGroupAvatarCard;
|
|
43
|
+
//# sourceMappingURL=RadioGroupAvatarCard.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroupAvatarCard.cjs","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["useResolvedTestId","CheckboxBase","RadioButtonBase","useId","_jsx","AriaRadioGroup","cx","joinTestId","slugifyTestId","_jsxs","AriaRadio","_Fragment","Avatar"],"mappings":";;;;;;;;;;;AA0BA;;;;;;AAMG;AACI,MAAM,oBAAoB,GAAG,CAAC,EACnC,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,OAAO,EACnB,aAAa,EACb,SAAS,EACT,aAAa,EAAE,UAAU,EACzB,GAAG,KAAK,EACkB,KAAI;AAC9B,IAAA,MAAM,UAAU,GAAGA,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC;AAC7G,IAAA,MAAM,SAAS,GAAG,SAAS,KAAK,UAAU,GAAGC,qBAAY,GAAGC,2BAAe;;AAE3E,IAAA,MAAM,OAAO,GAAGC,WAAK,EAAE;IAEvB,QACEC,cAAA,CAACC,8BAAc,EAAA,EAAA,GACT,KAAK,iBACI,UAAU,EACvB,SAAS,EAAE,CAAC,KAAK,KAAKC,KAAE,CAAC,qBAAqB,EAAE,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,EAAA,QAAA,EAE9G,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,KACtC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;YACjB,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,KAAK;YACrD,MAAM,UAAU,GAAG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC5D,YAAA,MAAM,YAAY,GAAGC,sBAAU,CAAC,UAAU,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,KAAK,CAAA,CAAE,CAAC;;YAEnE,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAA,EAAG,OAAO,CAAA,CAAA,EAAIC,yBAAa,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS;;;AAIjG,YAAA,MAAM,kBAAkB,GAAG,CAAC,KAAiC,KAAI;AAC/D,gBAAA,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,MAAM,YAAY,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,oBAAA,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;AAClH,YAAA,CAAC;YAED;;AAEE,YAAAC,eAAA,CAAA,KAAA,EAAA,EAEE,cAAc,EAAE,kBAAkB,EAClC,SAAS,EAAEH,KAAE,CACX,gDAAgD,EAChD,UAAU,GAAG,mBAAmB,GAAG,uBAAuB,EAC1D,UAAU,IAAI,yCAAyC,CACxD,EAAA,QAAA,EAAA,CAGDF,cAAA,CAACM,yBAAS,EAAA,EACR,UAAU,EAAE,IAAI,CAAC,QAAQ,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,YAAA,EACL,IAAI,CAAC,KAAK,EAAA,kBAAA,EACJ,UAAU,EAAA,aAAA,EACf,YAAY,EACzB,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,KACxCJ,KAAE,CACA,qDAAqD,EACrD,IAAI,KAAK,IAAI,GAAG,WAAW,GAAG,iBAAiB,EAC/C,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,YAAY,EAC3C,UAAU,IAAI,oBAAoB,EAClC,cAAc,IAAI,4BAA4B,CAC/C,EAAA,QAAA,EAGF,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAC1CG,eAAA,CAAAE,mBAAA,EAAA,EAAA,QAAA,EAAA,CACEP,cAAA,CAACQ,aAAM,IACL,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,EACjC,OAAO,EAAE,KAAK,EACd,MAAM,EAAA,IAAA,EACN,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAC,EAAE,EACN,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAE,IAAI,CAAC,eAAe,EAAA,CACrC,EACFH,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,8BAA8B,EAAA,QAAA,EAAA,CAC3CL,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEE,KAAE,CAAC,qCAAqC,EAAE,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC,EAAA,QAAA,EAAG,IAAI,CAAC,KAAK,EAAA,CAAQ,EACrH,IAAI,CAAC,QAAQ,KACZF,cAAA,CAAA,MAAA,EAAA,EAAM,EAAE,EAAE,UAAU,EAAE,SAAS,EAAEE,KAAE,CAAC,wBAAwB,EAAE,IAAI,KAAK,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC,EAAA,QAAA,EACjG,IAAI,CAAC,QAAQ,EAAA,CACT,CACR,CAAA,EAAA,CACG,EACNF,cAAA,CAAC,SAAS,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAAA,EAAA,CACxG,CACJ,EAAA,CACS,EACX,IAAI,CAAC,MAAM,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sDAAsD,EAAA,QAAA,EAAE,IAAI,CAAC,MAAM,EAAA,CAAO,CAAA,EAAA,EAhDpG,IAAI,CAAC,KAAK,CAiDX;QAEV,CAAC,CAAC,EAAA,CAEW;AAErB;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { RadioGroupProps } from 'react-aria-components';
|
|
2
|
+
import type { AvatarCardItemType } from '../radioGroup.types';
|
|
3
|
+
interface RadioGroupAvatarCardProps extends RadioGroupProps {
|
|
4
|
+
/** Avatar, text and indicator size of every option. */
|
|
5
|
+
size?: 'sm' | 'md';
|
|
6
|
+
/** Entities to choose from; each `value` is the option value. */
|
|
7
|
+
items: AvatarCardItemType[];
|
|
8
|
+
/** The selection mark: a radio dot, or the check tile the other flavours use. */
|
|
9
|
+
indicator?: 'radio' | 'checkbox';
|
|
10
|
+
/** Called with the option's value on every press of it, selected or not; `onChange` stays silent for the one already selected. */
|
|
11
|
+
onOptionPress?: (value: string) => void;
|
|
12
|
+
/** Overrides the root `data-testid`. Options derive from it (e.g. `<root>--option-<value>`). */
|
|
13
|
+
'data-testid'?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Radio group where each option is a card with a square logo, title, ID-style subtitle and
|
|
17
|
+
* an optional footer for a link or action. Use to pick a brand, store or other entity by its
|
|
18
|
+
* logo; the footer sits outside the radio, so a link in it never nests inside the control.
|
|
19
|
+
*
|
|
20
|
+
* @summary pick one entity from logo-led cards
|
|
21
|
+
*/
|
|
22
|
+
export declare const RadioGroupAvatarCard: ({ items, size, indicator, onOptionPress, className, "data-testid": dataTestId, ...props }: RadioGroupAvatarCardProps) => import("react").JSX.Element;
|
|
23
|
+
export {};
|
|
24
|
+
//# sourceMappingURL=RadioGroupAvatarCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroupAvatarCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,UAAU,yBAA0B,SAAQ,eAAe;IACzD,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACjC,kIAAkI;IAClI,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gGAAgG;IAChG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,2FAQlC,yBAAyB,gCAoF3B,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
|
|
3
|
+
import { CheckboxBase } from '@flipdish/ui-library/components/atoms/Checkbox';
|
|
4
|
+
import { RadioButtonBase } from '@flipdish/ui-library/components/atoms/RadioButton';
|
|
5
|
+
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
6
|
+
import { useResolvedTestId, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
7
|
+
import { useId } from 'react';
|
|
8
|
+
import { RadioGroup, Radio } from 'react-aria-components';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Radio group where each option is a card with a square logo, title, ID-style subtitle and
|
|
12
|
+
* an optional footer for a link or action. Use to pick a brand, store or other entity by its
|
|
13
|
+
* logo; the footer sits outside the radio, so a link in it never nests inside the control.
|
|
14
|
+
*
|
|
15
|
+
* @summary pick one entity from logo-led cards
|
|
16
|
+
*/
|
|
17
|
+
const RadioGroupAvatarCard = ({ items, size = 'sm', indicator = 'radio', onOptionPress, className, 'data-testid': dataTestId, ...props }) => {
|
|
18
|
+
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'radio-group', rootName: 'radio-group' });
|
|
19
|
+
const Indicator = indicator === 'checkbox' ? CheckboxBase : RadioButtonBase;
|
|
20
|
+
// Ids, not test ids: two groups with the same values on one page must not describe each other's options.
|
|
21
|
+
const groupId = useId();
|
|
22
|
+
return (jsx(RadioGroup, { ...props, "data-testid": rootTestId, className: (state) => cx('flex flex-col gap-3', typeof className === 'function' ? className(state) : className), children: ({ state, isDisabled: isGroupDisabled }) => items.map((item) => {
|
|
23
|
+
const isSelected = state.selectedValue === item.value;
|
|
24
|
+
const isDisabled = isGroupDisabled || Boolean(item.disabled);
|
|
25
|
+
const optionTestId = joinTestId(rootTestId, `option-${item.value}`);
|
|
26
|
+
// Slugged: a value with spaces would split `aria-describedby` into several ids.
|
|
27
|
+
const subtitleId = item.subtitle ? `${groupId}-${slugifyTestId(item.value)}-subtitle` : undefined;
|
|
28
|
+
// The radio is the card's `<label>`; a press in the footer is the footer's own and not an option press. Capture phase,
|
|
29
|
+
// because react-aria stops the radio's click from bubbling. Space on the focused radio fires a native click, so keyboard is covered.
|
|
30
|
+
const handleClickCapture = (event) => {
|
|
31
|
+
if (!isDisabled && event.target instanceof Element && event.target.closest('label'))
|
|
32
|
+
onOptionPress?.(item.value);
|
|
33
|
+
};
|
|
34
|
+
return (
|
|
35
|
+
// The card, not the radio, carries the selected ring so the footer sits inside the same outline.
|
|
36
|
+
jsxs("div", { onClickCapture: handleClickCapture, className: cx('flex flex-col rounded-xl bg-primary ring-inset', isSelected ? 'ring-2 ring-brand' : 'ring-1 ring-secondary', isDisabled && 'bg-disabled_subtle ring-disabled_subtle'), children: [jsx(Radio, { isDisabled: item.disabled, value: item.value, "aria-label": item.title, "aria-describedby": subtitleId, "data-testid": optionTestId, className: ({ isDisabled, isFocusVisible }) => cx('flex cursor-pointer items-center outline-focus-ring', size === 'md' ? 'gap-4 p-5' : 'gap-3 px-4 py-5', item.footer ? 'rounded-t-xl' : 'rounded-xl', isDisabled && 'cursor-not-allowed', isFocusVisible && 'outline-2 outline-offset-2'), children: ({ isDisabled, isSelected, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(Avatar, { size: size === 'md' ? 'xl' : 'lg', rounded: false, border: true, src: item.src, alt: "", initials: item.initials, placeholderIcon: item.placeholderIcon }), jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [jsx("span", { className: cx('truncate font-semibold text-primary', size === 'md' ? 'text-lg' : 'text-md'), children: item.title }), item.subtitle && (jsx("span", { id: subtitleId, className: cx('truncate text-tertiary', size === 'md' ? 'text-md' : 'text-sm'), children: item.subtitle }))] }), jsx(Indicator, { size: size, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible })] })) }), item.footer && jsx("div", { className: "flex justify-end border-t border-secondary px-4 py-3", children: item.footer })] }, item.value));
|
|
37
|
+
}) }));
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export { RadioGroupAvatarCard };
|
|
41
|
+
//# sourceMappingURL=RadioGroupAvatarCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroupAvatarCard.js","sources":["../../../../../src/components/molecules/RadioGroup/components/RadioGroupAvatarCard.tsx"],"sourcesContent":[null],"names":["_jsx","AriaRadioGroup","_jsxs","AriaRadio","_Fragment"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var RadioGroupAvatar = require('./components/RadioGroupAvatar.cjs');
|
|
4
|
+
var RadioGroupAvatarCard = require('./components/RadioGroupAvatarCard.cjs');
|
|
4
5
|
var RadioGroupCheckbox = require('./components/RadioGroupCheckbox.cjs');
|
|
5
6
|
var RadioGroupIconCard = require('./components/RadioGroupIconCard.cjs');
|
|
6
7
|
var RadioGroupIconSimple = require('./components/RadioGroupIconSimple.cjs');
|
|
@@ -10,6 +11,7 @@ var RadioGroupRadioButton = require('./components/RadioGroupRadioButton.cjs');
|
|
|
10
11
|
|
|
11
12
|
|
|
12
13
|
exports.Avatar = RadioGroupAvatar.RadioGroupAvatar;
|
|
14
|
+
exports.AvatarCard = RadioGroupAvatarCard.RadioGroupAvatarCard;
|
|
13
15
|
exports.Checkbox = RadioGroupCheckbox.RadioGroupCheckbox;
|
|
14
16
|
exports.IconCard = RadioGroupIconCard.RadioGroupIconCard;
|
|
15
17
|
exports.IconSimple = RadioGroupIconSimple.RadioGroupIconSimple;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export { RadioGroupAvatar as Avatar } from './components/RadioGroupAvatar';
|
|
2
|
+
export { RadioGroupAvatarCard as AvatarCard } from './components/RadioGroupAvatarCard';
|
|
2
3
|
export { RadioGroupCheckbox as Checkbox } from './components/RadioGroupCheckbox';
|
|
3
4
|
export { RadioGroupIconCard as IconCard } from './components/RadioGroupIconCard';
|
|
4
5
|
export { RadioGroupIconSimple as IconSimple } from './components/RadioGroupIconSimple';
|
|
5
6
|
export { RadioGroupPaymentIcon as PaymentIcon } from './components/RadioGroupPaymentIcon';
|
|
6
7
|
export { RadioGroupRadioButton as RadioButton } from './components/RadioGroupRadioButton';
|
|
8
|
+
export type { AvatarCardItemType } from './radioGroup.types';
|
|
7
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC1F,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACjF,OAAO,EAAE,oBAAoB,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACvF,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC1F,OAAO,EAAE,qBAAqB,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC1F,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { RadioGroupAvatar as Avatar } from './components/RadioGroupAvatar.js';
|
|
2
|
+
export { RadioGroupAvatarCard as AvatarCard } from './components/RadioGroupAvatarCard.js';
|
|
2
3
|
export { RadioGroupCheckbox as Checkbox } from './components/RadioGroupCheckbox.js';
|
|
3
4
|
export { RadioGroupIconCard as IconCard } from './components/RadioGroupIconCard.js';
|
|
4
5
|
export { RadioGroupIconSimple as IconSimple } from './components/RadioGroupIconSimple.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|