@flipdish/ui-library 0.31.8 → 0.32.1
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/molecules/Carousel/hooks/useCarouselScroll.cjs +81 -0
- package/dist/components/molecules/Carousel/hooks/useCarouselScroll.cjs.map +1 -0
- package/dist/components/molecules/Carousel/hooks/useCarouselScroll.d.ts +46 -0
- package/dist/components/molecules/Carousel/hooks/useCarouselScroll.d.ts.map +1 -0
- package/dist/components/molecules/Carousel/hooks/useCarouselScroll.js +79 -0
- package/dist/components/molecules/Carousel/hooks/useCarouselScroll.js.map +1 -0
- package/dist/components/molecules/Carousel/index.cjs +8 -55
- package/dist/components/molecules/Carousel/index.cjs.map +1 -1
- package/dist/components/molecules/Carousel/index.d.ts +3 -7
- package/dist/components/molecules/Carousel/index.d.ts.map +1 -1
- package/dist/components/molecules/Carousel/index.js +9 -56
- package/dist/components/molecules/Carousel/index.js.map +1 -1
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.cjs +17 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.cjs.map +1 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.d.ts +8 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.d.ts.map +1 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.js +15 -0
- package/dist/components/molecules/CodeSnippet/codeSnippet.utils.js.map +1 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.cjs +29 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.cjs.map +1 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.d.ts +29 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.d.ts.map +1 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.js +27 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.js.map +1 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.cjs +23 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.cjs.map +1 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.d.ts +21 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.d.ts.map +1 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.js +21 -0
- package/dist/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.js.map +1 -0
- package/dist/components/molecules/CodeSnippet/index.cjs +7 -22
- package/dist/components/molecules/CodeSnippet/index.cjs.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.d.ts.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.js +8 -23
- package/dist/components/molecules/CodeSnippet/index.js.map +1 -1
- package/dist/components/molecules/Dropdown/index.cjs +3 -2
- package/dist/components/molecules/Dropdown/index.cjs.map +1 -1
- package/dist/components/molecules/Dropdown/index.d.ts +9 -4
- package/dist/components/molecules/Dropdown/index.d.ts.map +1 -1
- package/dist/components/molecules/Dropdown/index.js +4 -3
- package/dist/components/molecules/Dropdown/index.js.map +1 -1
- package/dist/components/molecules/Tabs/index.cjs +1 -1
- package/dist/components/molecules/Tabs/index.cjs.map +1 -1
- package/dist/components/molecules/Tabs/index.js +1 -1
- package/dist/components/molecules/Tabs/index.js.map +1 -1
- package/dist/components/organisms/Charts/components/Metrics.cjs +1 -1
- package/dist/components/organisms/Charts/components/Metrics.cjs.map +1 -1
- package/dist/components/organisms/Charts/components/Metrics.js +1 -1
- package/dist/components/organisms/Charts/components/Metrics.js.map +1 -1
- package/dist/components/organisms/DatePicker/calendarCell.utils.cjs +53 -0
- package/dist/components/organisms/DatePicker/calendarCell.utils.cjs.map +1 -0
- package/dist/components/organisms/DatePicker/calendarCell.utils.d.ts +70 -0
- package/dist/components/organisms/DatePicker/calendarCell.utils.d.ts.map +1 -0
- package/dist/components/organisms/DatePicker/calendarCell.utils.js +49 -0
- package/dist/components/organisms/DatePicker/calendarCell.utils.js.map +1 -0
- package/dist/components/organisms/DatePicker/components/Cell.cjs +24 -30
- package/dist/components/organisms/DatePicker/components/Cell.cjs.map +1 -1
- package/dist/components/organisms/DatePicker/components/Cell.d.ts.map +1 -1
- package/dist/components/organisms/DatePicker/components/Cell.js +25 -31
- package/dist/components/organisms/DatePicker/components/Cell.js.map +1 -1
- package/dist/components/organisms/FileUpload/fileUpload.utils.cjs +69 -0
- package/dist/components/organisms/FileUpload/fileUpload.utils.cjs.map +1 -0
- package/dist/components/organisms/FileUpload/fileUpload.utils.d.ts +46 -0
- package/dist/components/organisms/FileUpload/fileUpload.utils.d.ts.map +1 -0
- package/dist/components/organisms/FileUpload/fileUpload.utils.js +65 -0
- package/dist/components/organisms/FileUpload/fileUpload.utils.js.map +1 -0
- package/dist/components/organisms/FileUpload/index.cjs +15 -66
- package/dist/components/organisms/FileUpload/index.cjs.map +1 -1
- package/dist/components/organisms/FileUpload/index.d.ts.map +1 -1
- package/dist/components/organisms/FileUpload/index.js +13 -64
- package/dist/components/organisms/FileUpload/index.js.map +1 -1
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.cjs +8 -18
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.cjs.map +1 -1
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.d.ts +8 -22
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.d.ts.map +1 -1
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.js +10 -20
- package/dist/components/organisms/FilterBar/components/FilterDropdownMenu.js.map +1 -1
- package/dist/components/organisms/FilterBar/index.cjs +2 -18
- package/dist/components/organisms/FilterBar/index.cjs.map +1 -1
- package/dist/components/organisms/FilterBar/index.d.ts +4 -25
- package/dist/components/organisms/FilterBar/index.d.ts.map +1 -1
- package/dist/components/organisms/FilterBar/index.js +3 -19
- package/dist/components/organisms/FilterBar/index.js.map +1 -1
- package/dist/components/organisms/PageHeader/index.cjs +1 -1
- package/dist/components/organisms/PageHeader/index.cjs.map +1 -1
- package/dist/components/organisms/PageHeader/index.d.ts +2 -2
- package/dist/components/organisms/PageHeader/index.js +1 -1
- package/dist/components/organisms/PageHeader/index.js.map +1 -1
- package/dist/components/organisms/Table/index.cjs +1 -1
- package/dist/components/organisms/Table/index.cjs.map +1 -1
- package/dist/components/organisms/Table/index.js +1 -1
- package/dist/components/organisms/Table/index.js.map +1 -1
- package/dist/components/organisms/TreeView/index.cjs +11 -26
- package/dist/components/organisms/TreeView/index.cjs.map +1 -1
- package/dist/components/organisms/TreeView/index.d.ts.map +1 -1
- package/dist/components/organisms/TreeView/index.js +12 -27
- package/dist/components/organisms/TreeView/index.js.map +1 -1
- package/dist/components/organisms/TreeView/treeView.utils.cjs +40 -0
- package/dist/components/organisms/TreeView/treeView.utils.cjs.map +1 -1
- package/dist/components/organisms/TreeView/treeView.utils.d.ts +37 -0
- package/dist/components/organisms/TreeView/treeView.utils.d.ts.map +1 -1
- package/dist/components/organisms/TreeView/treeView.utils.js +39 -1
- package/dist/components/organisms/TreeView/treeView.utils.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { type ReactNode, type RefObject } from 'react';
|
|
2
|
+
interface UseCodeSnippetCollapseOptions {
|
|
3
|
+
/** Pixel cap before the show-more overlay appears. Omitted means the block is not measured. */
|
|
4
|
+
maxHeight?: number;
|
|
5
|
+
/** Highlighted nodes. A new value can change the measured height. */
|
|
6
|
+
nodes: ReactNode;
|
|
7
|
+
/** Pre-highlighted children. A new value can change the measured height. */
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
interface UseCodeSnippetCollapseResult {
|
|
11
|
+
/** Ref for the element whose `scrollHeight` is compared with `maxHeight`. */
|
|
12
|
+
contentRef: RefObject<HTMLDivElement | null>;
|
|
13
|
+
/** True once the content is taller than `maxHeight` minus a 10px inset. */
|
|
14
|
+
exceedsMaxHeight: boolean;
|
|
15
|
+
/** True after the reader expands a block that overflows. */
|
|
16
|
+
expanded: boolean;
|
|
17
|
+
/** Flips `expanded`. */
|
|
18
|
+
toggleExpanded: () => void;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Measures the code block against `maxHeight` and tracks whether the reader has expanded it.
|
|
22
|
+
* The comparison subtracts 10px, so a block that only barely overflows does not show the toggle.
|
|
23
|
+
*
|
|
24
|
+
* @param options The height cap and the content whose scroll height is measured.
|
|
25
|
+
* @returns The content ref, whether it overflows, whether it is expanded, and a toggle.
|
|
26
|
+
*/
|
|
27
|
+
export declare const useCodeSnippetCollapse: ({ maxHeight, nodes, children }: UseCodeSnippetCollapseOptions) => UseCodeSnippetCollapseResult;
|
|
28
|
+
export {};
|
|
29
|
+
//# sourceMappingURL=useCodeSnippetCollapse.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCodeSnippetCollapse.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAEpF,UAAU,6BAA6B;IACrC,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,4BAA4B;IACpC,6EAA6E;IAC7E,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,2EAA2E;IAC3E,gBAAgB,EAAE,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,QAAQ,EAAE,OAAO,CAAC;IAClB,wBAAwB;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,gCAAgC,6BAA6B,KAAG,4BAgBtG,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useRef, useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Measures the code block against `maxHeight` and tracks whether the reader has expanded it.
|
|
5
|
+
* The comparison subtracts 10px, so a block that only barely overflows does not show the toggle.
|
|
6
|
+
*
|
|
7
|
+
* @param options The height cap and the content whose scroll height is measured.
|
|
8
|
+
* @returns The content ref, whether it overflows, whether it is expanded, and a toggle.
|
|
9
|
+
*/
|
|
10
|
+
const useCodeSnippetCollapse = ({ maxHeight, nodes, children }) => {
|
|
11
|
+
const contentRef = useRef(null);
|
|
12
|
+
const [expanded, setExpanded] = useState(false);
|
|
13
|
+
const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);
|
|
14
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: nodes and children change the measured scrollHeight without being read
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
if (!maxHeight || !contentRef.current)
|
|
17
|
+
return;
|
|
18
|
+
setExceedsMaxHeight(contentRef.current.scrollHeight > maxHeight - 10);
|
|
19
|
+
}, [maxHeight, nodes, children]);
|
|
20
|
+
const toggleExpanded = () => {
|
|
21
|
+
setExpanded(!expanded);
|
|
22
|
+
};
|
|
23
|
+
return { contentRef, exceedsMaxHeight, expanded, toggleExpanded };
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export { useCodeSnippetCollapse };
|
|
27
|
+
//# sourceMappingURL=useCodeSnippetCollapse.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCodeSnippetCollapse.js","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetCollapse.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAwBA;;;;;;AAMG;AACI,MAAM,sBAAsB,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAiC,KAAkC;AACpI,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC/C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;IAG/D,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE;QACvC,mBAAmB,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,GAAG,SAAS,GAAG,EAAE,CAAC;IACvE,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAEhC,MAAM,cAAc,GAAG,MAAK;AAC1B,QAAA,WAAW,CAAC,CAAC,QAAQ,CAAC;AACxB,IAAA,CAAC;IAED,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,cAAc,EAAE;AACnE;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Replaces the fallback nodes with syntax-highlighted nodes once `code` has been highlighted.
|
|
7
|
+
* The first paint keeps the fallback so the snippet is not blank while highlighting runs.
|
|
8
|
+
*
|
|
9
|
+
* @param options The snippet source, its language, the nodes shown before highlighting finishes, and the highlighter.
|
|
10
|
+
* @returns The nodes to render inside the code block.
|
|
11
|
+
*/
|
|
12
|
+
const useCodeSnippetHighlight = ({ code, language, fallback, highlightCode, }) => {
|
|
13
|
+
const [nodes, setNodes] = React.useState(fallback);
|
|
14
|
+
React.useLayoutEffect(() => {
|
|
15
|
+
if (!code)
|
|
16
|
+
return;
|
|
17
|
+
void highlightCode(code, language).then(setNodes);
|
|
18
|
+
}, [code, language, highlightCode]);
|
|
19
|
+
return nodes;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
exports.useCodeSnippetHighlight = useCodeSnippetHighlight;
|
|
23
|
+
//# sourceMappingURL=useCodeSnippetHighlight.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCodeSnippetHighlight.cjs","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"sourcesContent":[null],"names":["useState","useLayoutEffect"],"mappings":";;;;AAeA;;;;;;AAMG;AACI,MAAM,uBAAuB,GAAG,CAA0B,EAC/D,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,aAAa,GAC4B,KAAe;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAC,QAAQ,CAAC;IAE5CC,qBAAe,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,KAAK,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACnD,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,OAAO,KAAK;AACd;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
interface UseCodeSnippetHighlightOptions<Language extends string> {
|
|
3
|
+
/** Raw source highlighted on the client. When omitted, `fallback` stays as the snippet content. */
|
|
4
|
+
code?: string;
|
|
5
|
+
/** Language id forwarded to `highlightCode`. */
|
|
6
|
+
language: Language;
|
|
7
|
+
/** Nodes shown on the first paint and whenever `code` is omitted. */
|
|
8
|
+
fallback?: ReactNode;
|
|
9
|
+
/** Turns `code` into nodes. The snippet passes its `highlight` helper. */
|
|
10
|
+
highlightCode: (code: string, language: Language) => Promise<ReactNode>;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
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.
|
|
15
|
+
*
|
|
16
|
+
* @param options The snippet source, its language, the nodes shown before highlighting finishes, and the highlighter.
|
|
17
|
+
* @returns The nodes to render inside the code block.
|
|
18
|
+
*/
|
|
19
|
+
export declare const useCodeSnippetHighlight: <Language extends string>({ code, language, fallback, highlightCode, }: UseCodeSnippetHighlightOptions<Language>) => ReactNode;
|
|
20
|
+
export {};
|
|
21
|
+
//# sourceMappingURL=useCodeSnippetHighlight.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCodeSnippetHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAC;AAElE,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;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,QAAQ,SAAS,MAAM,EAAE,8CAK9D,8BAA8B,CAAC,QAAQ,CAAC,KAAG,SAS7C,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useState, useLayoutEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* 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
|
+
*
|
|
7
|
+
* @param options The snippet source, its language, the nodes shown before highlighting finishes, and the highlighter.
|
|
8
|
+
* @returns The nodes to render inside the code block.
|
|
9
|
+
*/
|
|
10
|
+
const useCodeSnippetHighlight = ({ code, language, fallback, highlightCode, }) => {
|
|
11
|
+
const [nodes, setNodes] = useState(fallback);
|
|
12
|
+
useLayoutEffect(() => {
|
|
13
|
+
if (!code)
|
|
14
|
+
return;
|
|
15
|
+
void highlightCode(code, language).then(setNodes);
|
|
16
|
+
}, [code, language, highlightCode]);
|
|
17
|
+
return nodes;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export { useCodeSnippetHighlight };
|
|
21
|
+
//# sourceMappingURL=useCodeSnippetHighlight.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCodeSnippetHighlight.js","sources":["../../../../../src/components/molecules/CodeSnippet/hooks/useCodeSnippetHighlight.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAeA;;;;;;AAMG;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;IAE5C,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,KAAK,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACnD,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEnC,IAAA,OAAO,KAAK;AACd;;"}
|
|
@@ -11,6 +11,9 @@ var hastUtilToJsxRuntime = require('hast-util-to-jsx-runtime');
|
|
|
11
11
|
var React = require('react');
|
|
12
12
|
var reactAriaComponents = require('react-aria-components');
|
|
13
13
|
var web = require('shiki/bundle/web');
|
|
14
|
+
var codeSnippet_utils = require('./codeSnippet.utils.cjs');
|
|
15
|
+
var useCodeSnippetCollapse = require('./hooks/useCodeSnippetCollapse.cjs');
|
|
16
|
+
var useCodeSnippetHighlight = require('./hooks/useCodeSnippetHighlight.cjs');
|
|
14
17
|
|
|
15
18
|
const highlight = async (code, lang) => {
|
|
16
19
|
const out = await web.codeToHast(code, {
|
|
@@ -56,31 +59,17 @@ const gradientStyles = {
|
|
|
56
59
|
'--gradient-dark': 'rgba(12, 14, 18, 0) 0%, rgba(12, 14, 18, 0.02) 4.7%, rgba(12, 14, 18, 0.04) 8.9%, rgba(12, 14, 18, 0.07) 12.8%, rgba(12, 14, 18, 0.10) 16.56%, rgba(12, 14, 18, 0.14) 20.37%, rgba(12, 14, 18, 0.18) 24.4%, rgba(12, 14, 18, 0.23) 28.83%, rgba(12, 14, 18, 0.29) 33.84%, rgba(12, 14, 18, 0.35) 39.6%, rgba(12, 14, 18, 0.43) 46.3%, rgba(12, 14, 18, 0.52) 54.1%, rgba(12, 14, 18, 0.62) 63.2%, rgba(12, 14, 18, 0.73) 73.76%, rgba(12, 14, 18, 0.86) 85.97%, rgb(12, 14, 18) 100%',
|
|
57
60
|
};
|
|
58
61
|
const CodeSnippetComponent = ({ children, code, language, showLineNumbers = true, maxHeight, onExpand, className, modern = true, 'data-testid': dataTestId, ...otherProps }) => {
|
|
59
|
-
const
|
|
62
|
+
const nodes = useCodeSnippetHighlight.useCodeSnippetHighlight({ code, language, fallback: children, highlightCode: highlight });
|
|
60
63
|
const { copy, copied } = useClipboard.useClipboard();
|
|
61
|
-
const contentRef =
|
|
62
|
-
const [expanded, setExpanded] = React.useState(false);
|
|
63
|
-
const [exceedsMaxHeight, setExceedsMaxHeight] = React.useState(false);
|
|
64
|
+
const { contentRef, expanded, exceedsMaxHeight, toggleExpanded } = useCodeSnippetCollapse.useCodeSnippetCollapse({ maxHeight, nodes, children });
|
|
64
65
|
const isInsideTabs = React.useContext(TabsRefContext) !== null;
|
|
65
66
|
const codeSnippetTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'code-snippet', rootName: 'code-snippet' });
|
|
66
|
-
React.useLayoutEffect(() => {
|
|
67
|
-
if (!code)
|
|
68
|
-
return;
|
|
69
|
-
void highlight(code, language).then(setNodes);
|
|
70
|
-
}, [code, language]);
|
|
71
|
-
// Measure whether content exceeds maxHeight
|
|
72
|
-
// biome-ignore lint/correctness/useExhaustiveDependencies: We need to include maxHeight, nodes, and children in the dependency array to re-measure the content height
|
|
73
|
-
React.useEffect(() => {
|
|
74
|
-
if (!maxHeight || !contentRef.current)
|
|
75
|
-
return;
|
|
76
|
-
setExceedsMaxHeight(contentRef.current.scrollHeight > maxHeight - 10);
|
|
77
|
-
}, [maxHeight, nodes, children]);
|
|
78
67
|
const codeText = code ?? '';
|
|
79
68
|
const isCollapsible = maxHeight != null && exceedsMaxHeight;
|
|
80
69
|
const isModern = isInsideTabs || modern;
|
|
81
70
|
const codeBlock = (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: codeSnippetTestId, children: jsxRuntime.jsxs("div", { ...otherProps, "data-testid": codeSnippetTestId, className: cx.cx('group/code-snippet relative max-w-full overflow-clip rounded-xl bg-primary ring-1', isModern ? 'shadow-lg ring-secondary_alt' : 'ring-secondary', className), children: [jsxRuntime.jsx("div", { ref: contentRef, className: cx.cx('[&>.shiki]:overflow-x-auto [&>code]:w-full', 'font-mono text-sm leading-[22px] whitespace-pre', showLineNumbers ? 'line-numbers' : 'p-4', !expanded && isCollapsible && 'overflow-y-hidden', isCollapsible && 'pb-12'), style: {
|
|
82
71
|
maxHeight: expanded || !maxHeight ? 'none' : maxHeight,
|
|
83
|
-
}, children: nodes ?? code ?? jsxRuntime.jsx("p", { children: "Loading..." }) }), isCollapsible && (jsxRuntime.jsx("div", { style: gradientStyles, className: cx.cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsxRuntime.jsx(Button.Button, { color: "secondary", size: "sm", onClick:
|
|
72
|
+
}, children: nodes ?? code ?? jsxRuntime.jsx("p", { children: "Loading..." }) }), isCollapsible && (jsxRuntime.jsx("div", { style: gradientStyles, className: cx.cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsxRuntime.jsx(Button.Button, { color: "secondary", size: "sm", onClick: toggleExpanded, children: expanded ? 'Show less' : 'Show more' }) })), (codeText || onExpand) && (jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition duration-100 ease-linear group-hover/code-snippet:opacity-100 has-[:focus-visible]:opacity-100", children: [onExpand && (jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", icon: uiIcons.Expand06, tooltip: "Expand", onClick: onExpand, "data-testid": testIdUtils.joinTestId(codeSnippetTestId, 'expand') })), codeText && (jsxRuntime.jsx(UtilityButton.ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? uiIcons.Check : uiIcons.Copy01, tooltip: "Copy", onClick: () => copy(codeText), "data-testid": testIdUtils.joinTestId(codeSnippetTestId, 'copy') }))] }))] }) }));
|
|
84
73
|
// Inside tabs: tabs component already provides the outer wrapper
|
|
85
74
|
if (isInsideTabs)
|
|
86
75
|
return codeBlock;
|
|
@@ -100,11 +89,7 @@ const CodeSnippetTabList = ({ children, className, ...otherProps }) => {
|
|
|
100
89
|
const { copy, copied } = useClipboard.useClipboard();
|
|
101
90
|
const tabsRef = React.useContext(TabsRefContext);
|
|
102
91
|
const handleCopy = () => {
|
|
103
|
-
const
|
|
104
|
-
if (!root)
|
|
105
|
-
return;
|
|
106
|
-
const activePanel = root.querySelector('[role="tabpanel"]:not([hidden])');
|
|
107
|
-
const text = activePanel?.textContent?.trim() ?? '';
|
|
92
|
+
const text = codeSnippet_utils.getActiveTabPanelText(tabsRef?.current ?? null);
|
|
108
93
|
if (text)
|
|
109
94
|
copy(text);
|
|
110
95
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["codeToHast","toJsxRuntime","Fragment","jsx","jsxs","createContext","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"sourcesContent":[null],"names":["codeToHast","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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/CodeSnippet/index.tsx"],"names":[],"mappings":"AASA,OAAO,
|
|
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,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAM5E,KAAK,kBAAkB,GAAG,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AACvH,KAAK,SAAS,GAAG,kBAAkB,CAAC,kBAAkB,GAAG,eAAe,CAAC,CAAC;AAE1E,eAAO,MAAM,SAAS,GAAU,MAAM,MAAM,EAAE,MAAM,SAAS,yBA+B5D,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"}
|
|
@@ -6,9 +6,12 @@ import { useClipboard } from '@flipdish/ui-library/hooks/useClipboard';
|
|
|
6
6
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
7
7
|
import { useResolvedTestId, TestIdProvider, joinTestId, useTestIdPrefix, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
8
8
|
import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
|
|
9
|
-
import { createContext,
|
|
9
|
+
import { createContext, useContext, Fragment, useRef } from 'react';
|
|
10
10
|
import { Tabs, TabList, Tab, TabPanel } from 'react-aria-components';
|
|
11
11
|
import { codeToHast } from 'shiki/bundle/web';
|
|
12
|
+
import { getActiveTabPanelText } from './codeSnippet.utils.js';
|
|
13
|
+
import { useCodeSnippetCollapse } from './hooks/useCodeSnippetCollapse.js';
|
|
14
|
+
import { useCodeSnippetHighlight } from './hooks/useCodeSnippetHighlight.js';
|
|
12
15
|
|
|
13
16
|
const highlight = async (code, lang) => {
|
|
14
17
|
const out = await codeToHast(code, {
|
|
@@ -54,31 +57,17 @@ const gradientStyles = {
|
|
|
54
57
|
'--gradient-dark': 'rgba(12, 14, 18, 0) 0%, rgba(12, 14, 18, 0.02) 4.7%, rgba(12, 14, 18, 0.04) 8.9%, rgba(12, 14, 18, 0.07) 12.8%, rgba(12, 14, 18, 0.10) 16.56%, rgba(12, 14, 18, 0.14) 20.37%, rgba(12, 14, 18, 0.18) 24.4%, rgba(12, 14, 18, 0.23) 28.83%, rgba(12, 14, 18, 0.29) 33.84%, rgba(12, 14, 18, 0.35) 39.6%, rgba(12, 14, 18, 0.43) 46.3%, rgba(12, 14, 18, 0.52) 54.1%, rgba(12, 14, 18, 0.62) 63.2%, rgba(12, 14, 18, 0.73) 73.76%, rgba(12, 14, 18, 0.86) 85.97%, rgb(12, 14, 18) 100%',
|
|
55
58
|
};
|
|
56
59
|
const CodeSnippetComponent = ({ children, code, language, showLineNumbers = true, maxHeight, onExpand, className, modern = true, 'data-testid': dataTestId, ...otherProps }) => {
|
|
57
|
-
const
|
|
60
|
+
const nodes = useCodeSnippetHighlight({ code, language, fallback: children, highlightCode: highlight });
|
|
58
61
|
const { copy, copied } = useClipboard();
|
|
59
|
-
const contentRef =
|
|
60
|
-
const [expanded, setExpanded] = useState(false);
|
|
61
|
-
const [exceedsMaxHeight, setExceedsMaxHeight] = useState(false);
|
|
62
|
+
const { contentRef, expanded, exceedsMaxHeight, toggleExpanded } = useCodeSnippetCollapse({ maxHeight, nodes, children });
|
|
62
63
|
const isInsideTabs = useContext(TabsRefContext) !== null;
|
|
63
64
|
const codeSnippetTestId = useResolvedTestId({ testId: dataTestId, segment: 'code-snippet', rootName: 'code-snippet' });
|
|
64
|
-
useLayoutEffect(() => {
|
|
65
|
-
if (!code)
|
|
66
|
-
return;
|
|
67
|
-
void highlight(code, language).then(setNodes);
|
|
68
|
-
}, [code, language]);
|
|
69
|
-
// Measure whether content exceeds maxHeight
|
|
70
|
-
// biome-ignore lint/correctness/useExhaustiveDependencies: We need to include maxHeight, nodes, and children in the dependency array to re-measure the content height
|
|
71
|
-
useEffect(() => {
|
|
72
|
-
if (!maxHeight || !contentRef.current)
|
|
73
|
-
return;
|
|
74
|
-
setExceedsMaxHeight(contentRef.current.scrollHeight > maxHeight - 10);
|
|
75
|
-
}, [maxHeight, nodes, children]);
|
|
76
65
|
const codeText = code ?? '';
|
|
77
66
|
const isCollapsible = maxHeight != null && exceedsMaxHeight;
|
|
78
67
|
const isModern = isInsideTabs || modern;
|
|
79
68
|
const codeBlock = (jsx(TestIdProvider, { value: codeSnippetTestId, children: jsxs("div", { ...otherProps, "data-testid": codeSnippetTestId, className: cx('group/code-snippet relative max-w-full overflow-clip rounded-xl bg-primary ring-1', isModern ? 'shadow-lg ring-secondary_alt' : 'ring-secondary', className), children: [jsx("div", { ref: contentRef, className: cx('[&>.shiki]:overflow-x-auto [&>code]:w-full', 'font-mono text-sm leading-[22px] whitespace-pre', showLineNumbers ? 'line-numbers' : 'p-4', !expanded && isCollapsible && 'overflow-y-hidden', isCollapsible && 'pb-12'), style: {
|
|
80
69
|
maxHeight: expanded || !maxHeight ? 'none' : maxHeight,
|
|
81
|
-
}, children: nodes ?? code ?? jsx("p", { children: "Loading..." }) }), isCollapsible && (jsx("div", { style: gradientStyles, className: cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsx(Button, { color: "secondary", size: "sm", onClick:
|
|
70
|
+
}, children: nodes ?? code ?? jsx("p", { children: "Loading..." }) }), isCollapsible && (jsx("div", { style: gradientStyles, className: cx('inset-x-0 bottom-0 flex items-end justify-center bg-linear-(--gradient-light) pb-6 dark:bg-linear-(--gradient-dark)', expanded ? 'sticky h-17' : 'absolute h-47'), children: jsx(Button, { color: "secondary", size: "sm", onClick: toggleExpanded, children: expanded ? 'Show less' : 'Show more' }) })), (codeText || onExpand) && (jsxs("div", { className: "absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 transition duration-100 ease-linear group-hover/code-snippet:opacity-100 has-[:focus-visible]:opacity-100", children: [onExpand && (jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: Expand06, tooltip: "Expand", onClick: onExpand, "data-testid": joinTestId(codeSnippetTestId, 'expand') })), codeText && (jsx(ButtonUtility, { size: "xs", color: "tertiary", icon: copied ? Check : Copy01, tooltip: "Copy", onClick: () => copy(codeText), "data-testid": joinTestId(codeSnippetTestId, 'copy') }))] }))] }) }));
|
|
82
71
|
// Inside tabs: tabs component already provides the outer wrapper
|
|
83
72
|
if (isInsideTabs)
|
|
84
73
|
return codeBlock;
|
|
@@ -98,11 +87,7 @@ const CodeSnippetTabList = ({ children, className, ...otherProps }) => {
|
|
|
98
87
|
const { copy, copied } = useClipboard();
|
|
99
88
|
const tabsRef = useContext(TabsRefContext);
|
|
100
89
|
const handleCopy = () => {
|
|
101
|
-
const
|
|
102
|
-
if (!root)
|
|
103
|
-
return;
|
|
104
|
-
const activePanel = root.querySelector('[role="tabpanel"]:not([hidden])');
|
|
105
|
-
const text = activePanel?.textContent?.trim() ?? '';
|
|
90
|
+
const text = getActiveTabPanelText(tabsRef?.current ?? null);
|
|
106
91
|
if (text)
|
|
107
92
|
copy(text);
|
|
108
93
|
};
|
|
@@ -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":";;;;;;;;;;;;;;;AAsBO,MAAM,SAAS,GAAG,OAAO,IAAY,EAAE,IAAe,KAAI;AAC/D,IAAA,MAAM,GAAG,GAAG,MAAM,UAAU,CAAC,IAAI,EAAE;AACjC,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,YAAY,EAAE,OAAO;AACrB,QAAA,MAAM,EAAE;AACN,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,IAAI,EAAE,aAAa;AACpB,SAAA;AACD,QAAA,iBAAiB,EAAE;AACjB,YAAA,cAAc,EAAE;AACd,gBAAA,SAAS,EAAE,2BAA2B;AACtC,gBAAA,SAAS,EAAE,+BAA+B;AAC1C,gBAAA,SAAS,EAAE,+BAA+B;AAC1C,gBAAA,SAAS,EAAE,gCAAgC;AAC3C,gBAAA,SAAS,EAAE,sBAAsB;AAClC,aAAA;AACD,YAAA,aAAa,EAAE;AACb,gBAAA,SAAS,EAAE,2BAA2B;AACtC,gBAAA,SAAS,EAAE,+BAA+B;AAC1C,gBAAA,SAAS,EAAE,+BAA+B;AAC1C,gBAAA,SAAS,EAAE,gCAAgC;AAC3C,gBAAA,SAAS,EAAE,sBAAsB;AAClC,aAAA;AACF,SAAA;AACF,KAAA,CAAC;IAEF,OAAO,YAAY,CAAC,GAAG,EAAE;QACvB,QAAQ;QACR,GAAG;QACH,IAAI;AACL,KAAA,CAAC;AACJ;AAEA;;;AAGG;AACH,MAAM,cAAc,GAAG,aAAa,CAA0C,IAAI,CAAC;AAEnF;;AAEG;AACH,MAAM,cAAc,GAAG;AACrB,IAAA,kBAAkB,EAChB,2fAA2f;AAC7f,IAAA,iBAAiB,EACf,sdAAsd;CACxc;AAmDlB,MAAM,oBAAoB,GAAG,CAAC,EAC5B,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,IAAI,EACb,aAAa,EAAE,UAAU,EACzB,GAAG,UAAU,EACI,KAAI;AACrB,IAAA,MAAM,KAAK,GAAG,uBAAuB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC;IACvG,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE;IACvC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,sBAAsB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;IACzH,MAAM,YAAY,GAAG,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI;AACxD,IAAA,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;AAEtH,IAAA,MAAM,QAAQ,GAAG,IAAI,IAAI,EAAE;AAC3B,IAAA,MAAM,aAAa,GAAG,SAAS,IAAI,IAAI,IAAI,gBAAgB;AAC3D,IAAA,MAAM,QAAQ,GAAG,YAAY,IAAI,MAAM;AAEvC,IAAA,MAAM,SAAS,IACbA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,iBAAiB,EAAA,QAAA,EACtCC,IAAA,CAAA,KAAA,EAAA,EAAA,GACM,UAAU,EAAA,aAAA,EACD,iBAAiB,EAC9B,SAAS,EAAE,EAAE,CACX,mFAAmF,EACnF,QAAQ,GAAG,8BAA8B,GAAG,gBAAgB,EAC5D,SAAS,CACV,EAAA,QAAA,EAAA,CAGDD,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,4CAA4C,EAC5C,iDAAiD,EACjD,eAAe,GAAG,cAAc,GAAG,KAAK,EACxC,CAAC,QAAQ,IAAI,aAAa,IAAI,mBAAmB,EACjD,aAAa,IAAI,OAAO,CACzB,EACD,KAAK,EAAE;AACL,wBAAA,SAAS,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,SAAS;AACvD,qBAAA,EAAA,QAAA,EAEA,KAAK,IAAI,IAAI,IAAIA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,YAAA,EAAA,CAAiB,GAC/B,EAGL,aAAa,KACZA,aACE,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,EAAE,CACX,qHAAqH,EACrH,QAAQ,GAAG,aAAa,GAAG,eAAe,CAC3C,EAAA,QAAA,EAEDA,GAAA,CAAC,MAAM,EAAA,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,cAAc,YACxD,QAAQ,GAAG,WAAW,GAAG,WAAW,GAC9B,EAAA,CACL,CACP,EAGA,CAAC,QAAQ,IAAI,QAAQ,MACpBC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yKAAyK,aACrL,QAAQ,KACPD,GAAA,CAAC,aAAa,IACZ,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,QAAQ,iBACJ,UAAU,CAAC,iBAAiB,EAAE,QAAQ,CAAC,EAAA,CACpD,CACH,EACA,QAAQ,KACPA,GAAA,CAAC,aAAa,IACZ,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,EAC7B,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,EAAA,aAAA,EAChB,UAAU,CAAC,iBAAiB,EAAE,MAAM,CAAC,GAClD,CACH,CAAA,EAAA,CACG,CACP,CAAA,EAAA,CACG,EAAA,CACS,CAClB;;AAGD,IAAA,IAAI,YAAY;AAAE,QAAA,OAAO,SAAS;;IAGlC,IAAI,QAAQ,EAAE;AACZ,QAAA,OAAOA,aAAK,SAAS,EAAC,sEAAsE,EAAA,QAAA,EAAE,SAAS,GAAO;IAChH;;AAGA,IAAA,OAAO,SAAS;AAClB,CAAC;AAED,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,UAAU,EAA0C,KAAI;AACpI,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5C,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC;AAEvG,IAAA,QACEA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EAC5BA,GAAA,CAAC,cAAc,EAAA,EAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAACE,IAAQ,EAAA,EACP,GAAG,EAAE,OAAO,EACZ,kBAAkB,EAAC,QAAQ,EAAA,GACvB,UAAU,EAAA,aAAA,EACD,UAAU,EACvB,SAAS,EAAE,CAAC,MAAM,KAChB,EAAE,CACA,2GAA2G,EAC3G,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAChE,EAAA,QAAA,EAGF,QAAQ,EAAA,CACA,EAAA,CACI,EAAA,CACF;AAErB,CAAC;AAED,MAAM,kBAAkB,GAAG,CAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAmB,KAAI;IACvG,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE;AACvC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC;IAE1C,MAAM,UAAU,GAAG,MAAK;QACtB,MAAM,IAAI,GAAG,qBAAqB,CAAC,OAAO,EAAE,OAAO,IAAI,IAAI,CAAC;AAC5D,QAAA,IAAI,IAAI;YAAE,IAAI,CAAC,IAAI,CAAC;AACtB,IAAA,CAAC;AAED,IAAA,QACED,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2BAA2B,aACxCD,GAAA,CAACG,OAAW,EAAA,EAAA,GACN,UAAU,EACd,SAAS,EAAE,CAAC,MAAM,KAChB,EAAE,CAAC,uDAAuD,EAAE,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,EAAA,QAAA,EAG7H,QAAQ,EAAA,CACG,EAEdH,aAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EACnDA,IAAC,aAAa,EAAA,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,EAAE,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,UAAU,GAAI,EAAA,CAC3G,CAAA,EAAA,CACF;AAEV,CAAC;AAOD,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAuB,KAAI;AACrF,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAChC,IAAA,MAAM,MAAM,GAAG,UAAU,CAAC,EAAE,KAAK,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,QAAQ,KAAK,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,GAAG,MAAM;AACnJ,IAAA,MAAM,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,CAAA,IAAA,EAAO,MAAM,CAAA,CAAE,CAAC,GAAG,SAAS;IAE1E,QACEA,GAAA,CAACI,GAAO,EAAA,EAAA,GACF,UAAU,EAAA,aAAA,EACD,SAAS,EACtB,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,2NAA2N,EAC3N,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,SAAS,KAAK,cAAc,EACvD,KAAK,CAAC,cAAc,IAAI,WAAW,EACnC,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAC/D,EAAA,QAAA,EAGF,QAAQ,EAAA,CACD;AAEd,CAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAiB,KAAI;AACpF,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAChC,MAAM,MAAM,GAAG,UAAU,CAAC,EAAE,KAAK,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO;AAC3F,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,CAAA,MAAA,EAAS,MAAM,CAAA,CAAE,CAAC,GAAG,SAAS;AAE9E,IAAA,QACEJ,GAAA,CAACK,QAAY,EAAA,EAAA,GACP,UAAU,iBACD,WAAW,EACxB,SAAS,EAAE,CAAC,KAAK,KAAK,EAAE,CAAC,WAAW,EAAE,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,YAEpG,QAAQ,EAAA,CACI;AAEnB,CAAC;AAED;;;;;AAKG;AACI,MAAM,WAAW,GAAG;AAO3B,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,OAAO,GAAG,kBAAkB;AACxC,WAAW,CAAC,GAAG,GAAG,cAAc;AAChC,WAAW,CAAC,QAAQ,GAAG,mBAAmB;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var uiIcons = require('@flipdish/ui-icons');
|
|
5
5
|
var Avatar = require('@flipdish/ui-library/components/atoms/Avatar');
|
|
6
|
+
var Button = require('@flipdish/ui-library/components/atoms/Button');
|
|
6
7
|
var Checkbox = require('@flipdish/ui-library/components/atoms/Checkbox');
|
|
7
8
|
var RadioButton = require('@flipdish/ui-library/components/atoms/RadioButton');
|
|
8
9
|
var Toggle = require('@flipdish/ui-library/components/atoms/Toggle');
|
|
@@ -54,9 +55,9 @@ const DropdownPopover = (props) => {
|
|
|
54
55
|
const DropdownSeparator = (props) => {
|
|
55
56
|
return jsxRuntime.jsx(reactAriaComponents.Separator, { ...props, className: cx.cx('my-1 h-px w-full bg-border-secondary', props.className) });
|
|
56
57
|
};
|
|
57
|
-
const DropdownDotsButton = ({ 'data-testid': dataTestId, ...props }) => {
|
|
58
|
+
const DropdownDotsButton = ({ color = 'secondary', size = 'sm', 'data-testid': dataTestId, ...props }) => {
|
|
58
59
|
const dotsButtonTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'dots-button', rootName: 'dropdown-dots-button' });
|
|
59
|
-
return
|
|
60
|
+
return jsxRuntime.jsx(Button.Button, { "aria-label": "Open menu", ...props, color: color, size: size, iconLeading: uiIcons.DotsVertical, "data-testid": dotsButtonTestId });
|
|
60
61
|
};
|
|
61
62
|
const DropdownRoot = ({ children, 'data-testid': dataTestId, ...props }) => {
|
|
62
63
|
const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'dropdown', rootName: 'dropdown' });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Dropdown/index.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","slugifyTestId","joinTestId","useCallback","_jsx","Check","cx","CheckboxBase","RadioButtonBase","ToggleBase","AriaMenuItem","_jsxs","Avatar","ChevronRight","AriaMenu","AriaPopover","AriaSeparator","useResolvedTestId","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Dropdown/index.tsx"],"sourcesContent":[null],"names":["useTestIdPrefix","slugifyTestId","joinTestId","useCallback","_jsx","Check","cx","CheckboxBase","RadioButtonBase","ToggleBase","AriaMenuItem","_jsxs","Avatar","ChevronRight","AriaMenu","AriaPopover","AriaSeparator","useResolvedTestId","Button","DotsVertical","TestIdProvider","AriaMenuTrigger","AriaMenuSection","AriaHeader"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import
|
|
1
|
+
import { type ButtonProps } from '@flipdish/ui-library/components/atoms/Button';
|
|
2
|
+
import { type FC, type SVGProps } from 'react';
|
|
3
|
+
import type { MenuItemProps as AriaMenuItemProps, MenuProps as AriaMenuProps, MenuTriggerProps as AriaMenuTriggerProps, PopoverProps as AriaPopoverProps, SeparatorProps as AriaSeparatorProps } from 'react-aria-components';
|
|
3
4
|
interface DropdownItemProps extends AriaMenuItemProps {
|
|
4
5
|
/** The label of the item to be displayed. */
|
|
5
6
|
label?: string;
|
|
@@ -22,7 +23,11 @@ export interface DropdownMenuProps<T extends object> extends AriaMenuProps<T> {
|
|
|
22
23
|
}
|
|
23
24
|
interface DropdownPopoverProps extends AriaPopoverProps {
|
|
24
25
|
}
|
|
25
|
-
interface DropdownDotsButtonProps extends
|
|
26
|
+
export interface DropdownDotsButtonProps extends Omit<ButtonProps, 'children' | 'iconLeading' | 'iconTrailing' | 'size' | 'color'> {
|
|
27
|
+
/** `secondary` is the bordered button for page headers and toolbars; `tertiary` is the bare dots for table rows and cards. */
|
|
28
|
+
color?: 'secondary' | 'tertiary';
|
|
29
|
+
/** `sm` is the 36px trigger the designs use beside other header actions. */
|
|
30
|
+
size?: 'sm' | 'md';
|
|
26
31
|
/**
|
|
27
32
|
* Overrides the derived `data-testid` for the dots button (defaults to
|
|
28
33
|
* `fd-dropdown-dots-button`, or `<root>--dots-button` when nested inside `Dropdown.Root`).
|
|
@@ -53,7 +58,7 @@ export declare const Dropdown: {
|
|
|
53
58
|
SectionHeader: (props: import("react-aria-components").HeaderProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
|
|
54
59
|
Item: ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator, "data-testid": dataTestId, ...props }: DropdownItemProps) => import("react").JSX.Element;
|
|
55
60
|
Separator: (props: AriaSeparatorProps) => import("react").JSX.Element;
|
|
56
|
-
DotsButton: ({ "data-testid": dataTestId, ...props }: DropdownDotsButtonProps) => import("react").JSX.Element;
|
|
61
|
+
DotsButton: ({ color, size, "data-testid": dataTestId, ...props }: DropdownDotsButtonProps) => import("react").JSX.Element;
|
|
57
62
|
};
|
|
58
63
|
export {};
|
|
59
64
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAMxF,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAe,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,SAAS,IAAI,aAAa,EAC1B,gBAAgB,IAAI,oBAAoB,EACxC,YAAY,IAAI,gBAAgB,EAChC,cAAc,IAAI,kBAAkB,EAErC,MAAM,uBAAuB,CAAC;AAW/B,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACnC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC5E,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0GD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;IAC3E,0HAA0H;IAC1H,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAiBD,UAAU,oBAAqB,SAAQ,gBAAgB;CAAG;AA2B1D,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,aAAa,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;IAChI,8HAA8H;IAC9H,KAAK,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACjC,4EAA4E;IAC5E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAQD,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB;IAC7D;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAYD;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ;8DAnBoD,iBAAiB;qBAnD1D,oBAAoB;WAjB9B,CAAC,SAAS,MAAM,2CAA2C,iBAAiB,CAAC,CAAC,CAAC;;;iIAnGlG,iBAAiB;uBAyIc,kBAAkB;uEAgBmD,uBAAuB;CA0C7H,CAAC"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { DotsVertical, Check, ChevronRight } from '@flipdish/ui-icons';
|
|
3
3
|
import { Avatar } from '@flipdish/ui-library/components/atoms/Avatar';
|
|
4
|
+
import { Button } from '@flipdish/ui-library/components/atoms/Button';
|
|
4
5
|
import { CheckboxBase } from '@flipdish/ui-library/components/atoms/Checkbox';
|
|
5
6
|
import { RadioButtonBase } from '@flipdish/ui-library/components/atoms/RadioButton';
|
|
6
7
|
import { ToggleBase } from '@flipdish/ui-library/components/atoms/Toggle';
|
|
7
8
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
8
9
|
import { useResolvedTestId, useTestIdPrefix, slugifyTestId, joinTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
9
10
|
import { useCallback } from 'react';
|
|
10
|
-
import { Header, MenuSection,
|
|
11
|
+
import { Header, MenuSection, Separator, MenuItem, Menu, Popover, MenuTrigger } from 'react-aria-components';
|
|
11
12
|
|
|
12
13
|
const DropdownItem = ({ label, children, addon, icon: Icon, avatarUrl, unstyled, selectionIndicator = 'checkmark', 'data-testid': dataTestId, ...props }) => {
|
|
13
14
|
const prefix = useTestIdPrefix();
|
|
@@ -52,9 +53,9 @@ const DropdownPopover = (props) => {
|
|
|
52
53
|
const DropdownSeparator = (props) => {
|
|
53
54
|
return jsx(Separator, { ...props, className: cx('my-1 h-px w-full bg-border-secondary', props.className) });
|
|
54
55
|
};
|
|
55
|
-
const DropdownDotsButton = ({ 'data-testid': dataTestId, ...props }) => {
|
|
56
|
+
const DropdownDotsButton = ({ color = 'secondary', size = 'sm', 'data-testid': dataTestId, ...props }) => {
|
|
56
57
|
const dotsButtonTestId = useResolvedTestId({ testId: dataTestId, segment: 'dots-button', rootName: 'dropdown-dots-button' });
|
|
57
|
-
return
|
|
58
|
+
return jsx(Button, { "aria-label": "Open menu", ...props, color: color, size: size, iconLeading: DotsVertical, "data-testid": dotsButtonTestId });
|
|
58
59
|
};
|
|
59
60
|
const DropdownRoot = ({ children, 'data-testid': dataTestId, ...props }) => {
|
|
60
61
|
const rootTestId = useResolvedTestId({ testId: dataTestId, segment: 'dropdown', rootName: 'dropdown' });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Dropdown/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaMenuItem","_jsxs","AriaMenu","AriaPopover","AriaSeparator","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Dropdown/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaMenuItem","_jsxs","AriaMenu","AriaPopover","AriaSeparator","AriaMenuTrigger","AriaMenuSection","AriaHeader"],"mappings":"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"}
|
|
@@ -86,7 +86,7 @@ const Tab = ({ label, children, badge, icon: Icon, className, 'data-testid': dat
|
|
|
86
86
|
? testIdUtils.slugifyTestId(children)
|
|
87
87
|
: 'item';
|
|
88
88
|
const tabTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, `tab-${idPart}`) : undefined);
|
|
89
|
-
return (jsxRuntime.jsx(reactAriaComponents.Tab, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx.cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.isValidElement(Icon) && Icon, componentGuard_utils.isReactComponent(Icon) && jsxRuntime.jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxRuntime.jsxs("span", { className: cx.cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, badge && (jsxRuntime.jsx(Badge.Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx.cx('
|
|
89
|
+
return (jsxRuntime.jsx(reactAriaComponents.Tab, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx.cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.isValidElement(Icon) && Icon, componentGuard_utils.isReactComponent(Icon) && jsxRuntime.jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxRuntime.jsxs("span", { className: cx.cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, badge && (jsxRuntime.jsx(Badge.Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx.cx('flex transition-inherit-all', size === 'sm' && '-my-px'), children: badge }))] })] })) }));
|
|
90
90
|
};
|
|
91
91
|
/**
|
|
92
92
|
* Organises related content into labelled panels, showing one at a time.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["cx","createContext","useSlottedContext","TabsContext","useTestIdPrefix","joinTestId","_jsx","AriaTabList","slugifyTestId","AriaTabPanel","useContext","AriaTab","_jsxs","_Fragment","isValidElement","isReactComponent","Badge","useResolvedTestId","TestIdProvider","AriaTabs"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["cx","createContext","useSlottedContext","TabsContext","useTestIdPrefix","joinTestId","_jsx","AriaTabList","slugifyTestId","AriaTabPanel","useContext","AriaTab","_jsxs","_Fragment","isValidElement","isReactComponent","Badge","useResolvedTestId","TestIdProvider","AriaTabs"],"mappings":"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"}
|
|
@@ -84,7 +84,7 @@ const Tab = ({ label, children, badge, icon: Icon, className, 'data-testid': dat
|
|
|
84
84
|
? slugifyTestId(children)
|
|
85
85
|
: 'item';
|
|
86
86
|
const tabTestId = dataTestId ?? (prefix ? joinTestId(prefix, `tab-${idPart}`) : undefined);
|
|
87
|
-
return (jsx(Tab$1, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxs(Fragment, { children: [isValidElement(Icon) && Icon, isReactComponent(Icon) && jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxs("span", { className: cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, badge && (jsx(Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx('
|
|
87
|
+
return (jsx(Tab$1, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxs(Fragment, { children: [isValidElement(Icon) && Icon, isReactComponent(Icon) && jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxs("span", { className: cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, badge && (jsx(Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx('flex transition-inherit-all', size === 'sm' && '-my-px'), children: badge }))] })] })) }));
|
|
88
88
|
};
|
|
89
89
|
/**
|
|
90
90
|
* Organises related content into labelled panels, showing one at a time.
|