@frontify/fondue-components 27.0.0 → 27.0.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components23.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n /**\n * \"auto\" visible when content is overflowing on the corresponding orientation.\n * \"always\" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.\n * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n * \"hover\" when the user is hovering over the scroll area.\n * @default 'hover'\n */\n type?: 'auto' | 'always' | 'scroll' | 'hover';\n /**\n * Determines if the scrollbar should take up space in the content area\n * @default 'auto'\n */\n scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';\n /**\n * Maximum height of the scroll area\n * @default '100%'\n */\n maxHeight?: string | number;\n /**\n * Minimum width of the scroll area\n * @default '100%'\n */\n maxWidth?: string | number;\n /**\n * Define the padding of the scroll area\n * @default \"compact\"\n */\n padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n /**\n * Determines if a inset shadow should be shown the edge of the component\n */\n showShadow?: boolean;\n 'data-test-id'?: string;\n children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n {\n type = 'hover',\n maxHeight = '100%',\n maxWidth = '100%',\n showShadow = false,\n scrollbarGutter = 'auto',\n padding,\n children,\n 'data-test-id': dataTestId = 'fondue-scroll-area',\n }: ScrollAreaProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n const { dir } = useFondueTheme();\n\n return (\n <RadixScrollArea.Root\n type={type}\n dir={dir}\n className={styles.root}\n style={{ maxWidth }}\n data-test-id={dataTestId}\n >\n <RadixScrollArea.Viewport\n ref={ref}\n className={styles.viewport}\n style={{ maxHeight }}\n data-scroll-padding={padding}\n data-show-shadow={showShadow}\n data-scrollbar-type={type}\n data-scrollbar-gutter={scrollbarGutter}\n data-test-id={`${dataTestId}-viewport`}\n >\n {children}\n </RadixScrollArea.Viewport>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"vertical\"\n data-test-id={`${dataTestId}-vertical-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"horizontal\"\n data-test-id={`${dataTestId}-horizontal-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n </RadixScrollArea.Root>\n );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","scrollbarGutter","padding","children","dataTestId","ref","dir","useFondueTheme","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;;AA8CA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MACe;AACf,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA;AAEhB,SACI,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACG,MAAAZ;AAAA,MACA,KAAAS;AAAA,MACA,WAAWI,EAAO;AAAA,MAClB,OAAO,EAAE,UAAAX,EAAA;AAAA,MACT,gBAAcK;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,KAAAJ;AAAA,YACA,WAAWK,EAAO;AAAA,YAClB,OAAO,EAAE,WAAAZ,EAAA;AAAA,YACT,uBAAqBI;AAAA,YACrB,oBAAkBF;AAAA,YAClB,uBAAqBH;AAAA,YACrB,yBAAuBI;AAAA,YACvB,gBAAc,GAAGG,CAAU;AAAA,YAE1B,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,gBAAAQ;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGN,CAAU,UAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpG,GAEaQ,IAAaC,EAA4CjB,CAAmB;AACzFgB,EAAW,cAAc;"}
|
|
1
|
+
{"version":3,"file":"fondue-components23.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n /**\n * \"auto\" visible when content is overflowing on the corresponding orientation.\n * \"always\" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.\n * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n * \"hover\" when the user is hovering over the scroll area.\n * @default 'hover'\n */\n type?: 'auto' | 'always' | 'scroll' | 'hover';\n /**\n * Determines if the scrollbar should take up space in the content area\n * @default 'auto'\n */\n scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';\n /**\n * Maximum height of the scroll area\n * @default '100%'\n */\n maxHeight?: string | number;\n /**\n * Minimum width of the scroll area\n * @default '100%'\n */\n maxWidth?: string | number;\n /**\n * Define the padding of the scroll area\n * @default \"compact\"\n */\n padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n /**\n * Determines if a inset shadow should be shown the edge of the component\n */\n showShadow?: boolean;\n 'data-test-id'?: string;\n children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n {\n type = 'hover',\n maxHeight = '100%',\n maxWidth = '100%',\n showShadow = false,\n scrollbarGutter = 'auto',\n padding,\n children,\n 'data-test-id': dataTestId = 'fondue-scroll-area',\n }: ScrollAreaProps,\n ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n const { dir } = useFondueTheme();\n\n return (\n <RadixScrollArea.Root\n type={type}\n dir={dir}\n className={styles.root}\n style={{ maxWidth }}\n data-component=\"scroll-area\"\n data-test-id={dataTestId}\n >\n <RadixScrollArea.Viewport\n ref={ref}\n className={styles.viewport}\n style={{ maxHeight }}\n data-scroll-padding={padding}\n data-show-shadow={showShadow}\n data-scrollbar-type={type}\n data-scrollbar-gutter={scrollbarGutter}\n data-test-id={`${dataTestId}-viewport`}\n >\n {children}\n </RadixScrollArea.Viewport>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"vertical\"\n data-test-id={`${dataTestId}-vertical-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Scrollbar\n className={styles.scrollbar}\n orientation=\"horizontal\"\n data-test-id={`${dataTestId}-horizontal-scrollbar`}\n >\n <RadixScrollArea.Thumb\n className={styles.thumb}\n data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n />\n </RadixScrollArea.Scrollbar>\n <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n </RadixScrollArea.Root>\n );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","scrollbarGutter","padding","children","dataTestId","ref","dir","useFondueTheme","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;;AA8CA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MACe;AACf,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA;AAEhB,SACI,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACG,MAAAZ;AAAA,MACA,KAAAS;AAAA,MACA,WAAWI,EAAO;AAAA,MAClB,OAAO,EAAE,UAAAX,EAAA;AAAA,MACT,kBAAe;AAAA,MACf,gBAAcK;AAAA,MAEd,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,KAAAJ;AAAA,YACA,WAAWK,EAAO;AAAA,YAClB,OAAO,EAAE,WAAAZ,EAAA;AAAA,YACT,uBAAqBI;AAAA,YACrB,oBAAkBF;AAAA,YAClB,uBAAqBH;AAAA,YACrB,yBAAuBI;AAAA,YACvB,gBAAc,GAAGG,CAAU;AAAA,YAE1B,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,gBAAAQ;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGN,CAAU,UAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpG,GAEaQ,IAAaC,EAA4CjB,CAAmB;AACzFgB,EAAW,cAAc;"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
const t = "
|
|
1
|
+
const t = "_root_ujssn_5", r = "_triggerListWrapper_ujssn_17", s = "_trigger_ujssn_17", n = "_activeIndicator_ujssn_65", e = "_triggerList_ujssn_17", i = "_content_ujssn_159", o = {
|
|
2
2
|
root: t,
|
|
3
3
|
triggerListWrapper: r,
|
|
4
4
|
trigger: s,
|
|
5
|
-
activeIndicator:
|
|
6
|
-
triggerList:
|
|
7
|
-
content:
|
|
5
|
+
activeIndicator: n,
|
|
6
|
+
triggerList: e,
|
|
7
|
+
content: i
|
|
8
8
|
};
|
|
9
9
|
export {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
n as activeIndicator,
|
|
11
|
+
i as content,
|
|
12
|
+
o as default,
|
|
13
13
|
t as root,
|
|
14
14
|
s as trigger,
|
|
15
|
-
|
|
15
|
+
e as triggerList,
|
|
16
16
|
r as triggerListWrapper
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=fondue-components85.js.map
|