@mittwald/flow-react-components 1.2.0-next.1 → 1.2.0-next.11
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/MIGRATION.md +194 -10
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/default.mjs +2 -1
- package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs +34 -26
- package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/Bar/Bar.mjs +40 -0
- package/dist/js/packages/components/src/components/CartesianChart/components/Bar/Bar.mjs.map +1 -0
- package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs +3 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs +2 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/context.mjs +11 -0
- package/dist/js/packages/components/src/components/CartesianChart/context.mjs.map +1 -0
- package/dist/js/packages/components/src/components/CartesianChart/types.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Heading/Heading.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs +1 -1
- package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/model/item/ItemView.mjs +7 -0
- package/dist/js/packages/components/src/components/List/model/item/ItemView.mjs.map +1 -1
- package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs +2 -1
- package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tabs/Tabs.mjs +3 -1
- package/dist/js/packages/components/src/components/Tabs/Tabs.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs +3 -1
- package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs +6 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs +6 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs.map +1 -1
- package/dist/types/components/CartesianChart/CartesianChart.d.ts +12 -1
- package/dist/types/components/CartesianChart/CartesianChart.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/components/Bar/Bar.d.ts +19 -0
- package/dist/types/components/CartesianChart/components/Bar/Bar.d.ts.map +1 -0
- package/dist/types/components/CartesianChart/components/Bar/index.d.ts +3 -0
- package/dist/types/components/CartesianChart/components/Bar/index.d.ts.map +1 -0
- package/dist/types/components/CartesianChart/components/Bar/view.d.ts +8 -0
- package/dist/types/components/CartesianChart/components/Bar/view.d.ts.map +1 -0
- package/dist/types/components/CartesianChart/components/XAxis/XAxis.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/components/YAxis/YAxis.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/context.d.ts +8 -0
- package/dist/types/components/CartesianChart/context.d.ts.map +1 -0
- package/dist/types/components/CartesianChart/index.d.ts +1 -0
- package/dist/types/components/CartesianChart/index.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/stories/Default.stories.d.ts +4 -0
- package/dist/types/components/CartesianChart/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/CartesianChart/types.d.ts +6 -0
- package/dist/types/components/CartesianChart/types.d.ts.map +1 -1
- package/dist/types/components/DonutChart/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/List/components/Items/components/Item/Item.d.ts.map +1 -1
- package/dist/types/components/List/model/item/ItemView.d.ts +5 -0
- package/dist/types/components/List/model/item/ItemView.d.ts.map +1 -1
- package/dist/types/components/List/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/Modal/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/SegmentedControl/components/Segment/Segment.d.ts +2 -1
- package/dist/types/components/SegmentedControl/components/Segment/Segment.d.ts.map +1 -1
- package/dist/types/components/Select/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/Tabs/Tabs.browser.test.d.ts +2 -0
- package/dist/types/components/Tabs/Tabs.browser.test.d.ts.map +1 -0
- package/dist/types/components/Tabs/Tabs.d.ts +8 -0
- package/dist/types/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/components/Tabs/components/TabList/TabList.d.ts +2 -0
- package/dist/types/components/Tabs/components/TabList/TabList.d.ts.map +1 -1
- package/dist/types/components/Tabs/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts +6 -0
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts.map +1 -1
- package/dist/types/views/BarView.d.ts +5 -0
- package/dist/types/views/BarView.d.ts.map +1 -0
- package/package.json +9 -9
package/dist/js/default.mjs
CHANGED
|
@@ -195,6 +195,7 @@ import { isDateRangeValue } from "./packages/components/src/components/Calendar/
|
|
|
195
195
|
import { Div } from "./packages/components/src/components/Div/Div.mjs";
|
|
196
196
|
import { AreaDot } from "./packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs";
|
|
197
197
|
import { Area, TypedArea } from "./packages/components/src/components/CartesianChart/components/Area/Area.mjs";
|
|
198
|
+
import { Bar, TypedBar } from "./packages/components/src/components/CartesianChart/components/Bar/Bar.mjs";
|
|
198
199
|
import { TypedXAxis } from "./packages/components/src/components/CartesianChart/components/XAxis/types.mjs";
|
|
199
200
|
import { XAxis } from "./packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs";
|
|
200
201
|
import { TypedYAxis } from "./packages/components/src/components/CartesianChart/components/YAxis/types.mjs";
|
|
@@ -334,4 +335,4 @@ import { TextField } from "./packages/components/src/components/TextField/TextFi
|
|
|
334
335
|
import { TimeField } from "./packages/components/src/components/TimeField/TimeField.mjs";
|
|
335
336
|
import { Truncate } from "./packages/components/src/components/Truncate/Truncate.mjs";
|
|
336
337
|
import { TunnelEntry } from "./packages/components/src/components/TunnelEntry/TunnelEntry.mjs";
|
|
337
|
-
export { AbortActionError, AccentBox, Accordion, Action, ActionBatch, ActionGroup, Activity, Alert, AlertBadge, AlertIcon, AlertText, Align, Area, AreaDot, Autocomplete, Avatar, AvatarStack, Badge, BigNumber, Breadcrumb, BrowserOnly, Button, CartesianChart, CartesianGrid, ChartGrid, ChartLegend, ChartTooltip, Chat, Checkbox, CheckboxButton, CheckboxGroup, ClearPropsContext, CodeBlock, CodeEditor, Color, ColumnLayout, Combine, ComboBox, ComponentDefaultsContext, ComponentDefaultsProvider, ComponentPropsContextProvider, Content, ContextMenu, ContextMenuContent, ContextMenuSection, ContextMenuTrigger, ContextualHelp, ContextualHelpTrigger, CopyButton, CounterBadge, CountryOptions, DatePicker, DateRangePicker, DeprecationWarningContext, DeprecationWarningProvider, DialogTrigger, Div, DonutChart, EmptyView, EmptyViewContainer, FieldDescription, FieldError, FileCard, FileCardList, FileDropZone, FileField, Flex, GridList, GridListItem, Header, HeaderNavigation, Heading, Icon, IconAI, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSetProvider, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IllustratedMessage, Image, ImageCropper, Initials, InlineCode, IntlProvider, Kbd, Label, LabeledValue, LayoutCard, Legend, LegendItem, LightBox, LightBoxGallery, LightBoxGalleryItem, LightBoxTrigger, Line, Link, List, ListFilter, ListItem, ListItemView, ListItemViewContent, ListLoaderAsync, ListSorting, ListStaticData, ListSummary, LoadingSpinner, Markdown, MarkdownEditor, MenuItem, MenuTrigger, Message, MessageSeparator, MessageThread, Modal, ModalTrigger, Navigation, NavigationGroup, Notification, NotificationController, NotificationProvider, NumberField, Option, Overlay, OverlayContent, OverlayController, OverlayTrigger, PasswordCreationField, Popover, PopoverContent, PopoverTrigger, ProgressBar, PropsContextProvider, Radio, RadioButton, RadioGroup, RangeCalendar, Rating, RatingSegment, Render, RouterProvider, SearchField, Section, Segment, SegmentedControl, Select, Separator, SettingsProvider, Skeleton, SkeletonText, Slider, SortingFunctions, SuspenseTrigger, Switch, Tab, TabNavigation, TabTitle, Table, TableBody, TableCell, TableColumn, TableFooterRow, TableHeader, TableRow, Tabs, Text, TextArea, TextField, ThemedHtml, TimeField, Tooltip, TooltipTrigger, TranslationProvider, Truncate, TunnelEntry, TypedArea, TypedChartGrid, TypedChartLegend, TypedChartTooltip, TypedLine, TypedList, TypedListFilter, TypedListItem, TypedListLoaderAsync, TypedListSorting, TypedListStaticData, TypedXAxis, TypedYAxis, Wrap, XAxis, YAxis, abortAction, builtInComponentDefaults, dynamic, eventHandlerContext, flags, getRemoteEvent, getResolvedTheme, getTheme, iconCategories, isDateRangeValue, propsContext, setTheme, sortByDachFirst, themeHtmlAttribute, typedCartesianChart, typedList, useAriaAnnounceSuspense, useComponentDefaults, useControlledRemoteValueProps, useDesignTokens, useIsMounted, useLanguage, useList, useListMetadata, useLocalizedStringFormatter, useModalController, useNotificationController, useOnChange, useOverlayController, useProps, useTheme as useStoredTheme, useResolvedTheme as useTheme, useTranslationProvider, useWarnDeprecation };
|
|
338
|
+
export { AbortActionError, AccentBox, Accordion, Action, ActionBatch, ActionGroup, Activity, Alert, AlertBadge, AlertIcon, AlertText, Align, Area, AreaDot, Autocomplete, Avatar, AvatarStack, Badge, Bar, BigNumber, Breadcrumb, BrowserOnly, Button, CartesianChart, CartesianGrid, ChartGrid, ChartLegend, ChartTooltip, Chat, Checkbox, CheckboxButton, CheckboxGroup, ClearPropsContext, CodeBlock, CodeEditor, Color, ColumnLayout, Combine, ComboBox, ComponentDefaultsContext, ComponentDefaultsProvider, ComponentPropsContextProvider, Content, ContextMenu, ContextMenuContent, ContextMenuSection, ContextMenuTrigger, ContextualHelp, ContextualHelpTrigger, CopyButton, CounterBadge, CountryOptions, DatePicker, DateRangePicker, DeprecationWarningContext, DeprecationWarningProvider, DialogTrigger, Div, DonutChart, EmptyView, EmptyViewContainer, FieldDescription, FieldError, FileCard, FileCardList, FileDropZone, FileField, Flex, GridList, GridListItem, Header, HeaderNavigation, Heading, Icon, IconAI, IconAnalytics, IconApp, IconAscending, IconAttachment, IconAutoresponder, IconBackLink, IconBackup, IconBold, IconCamera, IconCertificate, IconChangelog, IconCheck, IconCheckboxChecked, IconCheckboxEmpty, IconCheckboxIndeterminate, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconClose, IconCode, IconContainer, IconContextMenu, IconContextMenuVertical, IconContract, IconContractPartner, IconContributor, IconCopy, IconCronjob, IconCustomer, IconDanger, IconDashboard, IconDatabase, IconDate, IconDelete, IconDeliveryBox, IconDescending, IconDesktop, IconDirectory, IconDnsSubZone, IconDnsZone, IconDomain, IconDownload, IconEdit, IconEmail, IconEmailArchive, IconExtension, IconExternalLink, IconFailed, IconFeedback, IconFile, IconFilter, IconForwardAddress, IconForwardLink, IconHide, IconHome, IconImage, IconInfo, IconInvite, IconInvoice, IconItalic, IconKnowledgeHint, IconLanguage, IconLeadFyndr, IconLink, IconLock, IconLockOpen, IconLogout, IconMainUser, IconMarketplace, IconMaximize, IconMember, IconMenu, IconMinimize, IconMinus, IconMittwald, IconMobile, IconMonitoring, IconMove, IconNewsletter, IconNotification, IconNumber, IconOrder, IconOrderedList, IconPassword, IconPath, IconPause, IconPayment, IconPending, IconPicture, IconPlus, IconProject, IconQuote, IconRadioOff, IconRadioOn, IconRedo, IconRefresh, IconRegistry, IconSave, IconSearch, IconSecurity, IconSend, IconServer, IconSetProvider, IconSettings, IconShare, IconShow, IconSorting, IconSsh, IconSshKey, IconSshSftp, IconStack, IconStar, IconStarFilled, IconStart, IconStrikeThrough, IconSubdomain, IconSucceeded, IconSuccess, IconSupport, IconTerminate, IconTicket, IconTime, IconUnavailable, IconUndo, IconUnorderedList, IconUpload, IconUser, IconVhost, IconView, IconVolume, IconWarning, IllustratedMessage, Image, ImageCropper, Initials, InlineCode, IntlProvider, Kbd, Label, LabeledValue, LayoutCard, Legend, LegendItem, LightBox, LightBoxGallery, LightBoxGalleryItem, LightBoxTrigger, Line, Link, List, ListFilter, ListItem, ListItemView, ListItemViewContent, ListLoaderAsync, ListSorting, ListStaticData, ListSummary, LoadingSpinner, Markdown, MarkdownEditor, MenuItem, MenuTrigger, Message, MessageSeparator, MessageThread, Modal, ModalTrigger, Navigation, NavigationGroup, Notification, NotificationController, NotificationProvider, NumberField, Option, Overlay, OverlayContent, OverlayController, OverlayTrigger, PasswordCreationField, Popover, PopoverContent, PopoverTrigger, ProgressBar, PropsContextProvider, Radio, RadioButton, RadioGroup, RangeCalendar, Rating, RatingSegment, Render, RouterProvider, SearchField, Section, Segment, SegmentedControl, Select, Separator, SettingsProvider, Skeleton, SkeletonText, Slider, SortingFunctions, SuspenseTrigger, Switch, Tab, TabNavigation, TabTitle, Table, TableBody, TableCell, TableColumn, TableFooterRow, TableHeader, TableRow, Tabs, Text, TextArea, TextField, ThemedHtml, TimeField, Tooltip, TooltipTrigger, TranslationProvider, Truncate, TunnelEntry, TypedArea, TypedBar, TypedChartGrid, TypedChartLegend, TypedChartTooltip, TypedLine, TypedList, TypedListFilter, TypedListItem, TypedListLoaderAsync, TypedListSorting, TypedListStaticData, TypedXAxis, TypedYAxis, Wrap, XAxis, YAxis, abortAction, builtInComponentDefaults, dynamic, eventHandlerContext, flags, getRemoteEvent, getResolvedTheme, getTheme, iconCategories, isDateRangeValue, propsContext, setTheme, sortByDachFirst, themeHtmlAttribute, typedCartesianChart, typedList, useAriaAnnounceSuspense, useComponentDefaults, useControlledRemoteValueProps, useDesignTokens, useIsMounted, useLanguage, useList, useListMetadata, useLocalizedStringFormatter, useModalController, useNotificationController, useOnChange, useOverlayController, useProps, useTheme as useStoredTheme, useResolvedTheme as useTheme, useTranslationProvider, useWarnDeprecation };
|
|
@@ -5,7 +5,9 @@ import { Wrap } from "../Wrap/Wrap.mjs";
|
|
|
5
5
|
import CartesianChart_module_default from "./CartesianChart.module.mjs";
|
|
6
6
|
import { useChartClipRect } from "./hooks/useChartClipRect.mjs";
|
|
7
7
|
import DivView from "../../views/DivView.mjs";
|
|
8
|
+
import { CartesianChartContextProvider } from "./context.mjs";
|
|
8
9
|
import { TypedArea } from "./components/Area/Area.mjs";
|
|
10
|
+
import { TypedBar } from "./components/Bar/Bar.mjs";
|
|
9
11
|
import { TypedXAxis } from "./components/XAxis/types.mjs";
|
|
10
12
|
import { TypedYAxis } from "./components/YAxis/types.mjs";
|
|
11
13
|
import { TypedChartGrid } from "./components/ChartGrid/ChartGrid.mjs";
|
|
@@ -19,7 +21,7 @@ import { ComposedChart, ResponsiveContainer } from "recharts";
|
|
|
19
21
|
//#region src/components/CartesianChart/CartesianChart.tsx
|
|
20
22
|
/** @flr-generate all */
|
|
21
23
|
var CartesianChart = (props) => {
|
|
22
|
-
const { children, data, className, height, flexGrow, emptyView, ...rest } = props;
|
|
24
|
+
const { children, data, className, height, flexGrow, emptyView, layout = "horizontal", ...rest } = props;
|
|
23
25
|
const warnDeprecation = useWarnDeprecation();
|
|
24
26
|
const { viewDimensions, ref: containerRef } = useChartClipRect();
|
|
25
27
|
const showEmptyView = !!((!data || data.length === 0) && emptyView);
|
|
@@ -30,32 +32,37 @@ var CartesianChart = (props) => {
|
|
|
30
32
|
if (!emptyView) return;
|
|
31
33
|
return null;
|
|
32
34
|
}, [emptyView]);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
width: 1,
|
|
43
|
-
height: 1
|
|
35
|
+
const contextValue = useMemo(() => ({ layout }), [layout]);
|
|
36
|
+
return /* @__PURE__ */ jsx(CartesianChartContextProvider, {
|
|
37
|
+
value: contextValue,
|
|
38
|
+
children: /* @__PURE__ */ jsx(Wrap, {
|
|
39
|
+
if: height,
|
|
40
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
41
|
+
style: {
|
|
42
|
+
height,
|
|
43
|
+
flex: flexGrow ? 1 : void 0
|
|
44
44
|
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
45
|
+
children: /* @__PURE__ */ jsx(ResponsiveContainer, {
|
|
46
|
+
initialDimension: {
|
|
47
|
+
width: 1,
|
|
48
|
+
height: 1
|
|
49
|
+
},
|
|
50
|
+
width: height ? void 0 : "100%",
|
|
51
|
+
aspect: height ? void 0 : 3,
|
|
52
|
+
ref: containerRef,
|
|
53
|
+
children: /* @__PURE__ */ jsxs(ComposedChart, {
|
|
54
|
+
data,
|
|
55
|
+
className: rootClassName,
|
|
56
|
+
layout,
|
|
57
|
+
...rest,
|
|
58
|
+
children: [children, showEmptyView && viewDimensions && /* @__PURE__ */ jsx("foreignObject", {
|
|
59
|
+
...viewDimensions,
|
|
60
|
+
children: /* @__PURE__ */ jsx(DivView, {
|
|
61
|
+
className: CartesianChart_module_default.emptyViewContainer,
|
|
62
|
+
children: emptyElement
|
|
63
|
+
})
|
|
64
|
+
})]
|
|
65
|
+
})
|
|
59
66
|
})
|
|
60
67
|
})
|
|
61
68
|
})
|
|
@@ -64,6 +71,7 @@ var CartesianChart = (props) => {
|
|
|
64
71
|
var typedCartesianChart = () => ({
|
|
65
72
|
Chart: CartesianChart,
|
|
66
73
|
Area: TypedArea(),
|
|
74
|
+
Bar: TypedBar(),
|
|
67
75
|
XAxis: TypedXAxis(),
|
|
68
76
|
YAxis: TypedYAxis(),
|
|
69
77
|
Grid: TypedChartGrid(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" | \"syncId\" | \"syncMethod\"\n >,\n PropsWithChildren {\n /** The data points rendered by the chart. */\n data?: TData[];\n\n /** The height of the chart. */\n height?: string;\n\n /** View that is provided when data is empty/undefined */\n emptyView?: ReactNode;\n\n /**\n * Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n */\n flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const {
|
|
1
|
+
{"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n type ComponentProps,\n type ComponentType,\n type FC,\n isValidElement,\n type PropsWithChildren,\n type ReactNode,\n useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n CartesianChartLayout,\n ChartDataValue,\n DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n extends\n Pick<\n ComponentProps<typeof ComposedChart>,\n \"className\" | \"syncId\" | \"syncMethod\"\n >,\n PropsWithChildren {\n /** The data points rendered by the chart. */\n data?: TData[];\n\n /** The height of the chart. */\n height?: string;\n\n /**\n * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n * on their own; only the `dataKey` moves to whichever axis is the categorical\n * one.\n *\n * @default \"horizontal\"\n */\n layout?: CartesianChartLayout;\n\n /** View that is provided when data is empty/undefined */\n emptyView?: ReactNode;\n\n /**\n * Allow the height controlling container to set flex-grow: 1. Can only be\n * used in combination with `height`\n */\n flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n const {\n children,\n data,\n className,\n height,\n flexGrow,\n emptyView,\n layout = \"horizontal\",\n ...rest\n } = props;\n const warnDeprecation = useWarnDeprecation();\n\n const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n const showEmptyView = !!((!data || data.length === 0) && emptyView);\n const rootClassName = clsx(\n styles.cartesianChart,\n showEmptyView && styles.emptyView,\n className,\n );\n const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n if (usesDeprecatedEmptyView) {\n warnDeprecation(\n \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n );\n }\n\n const emptyElement = useMemo(() => {\n if (isValidElement(emptyView)) {\n return emptyView;\n }\n\n if (!emptyView) {\n return;\n }\n\n return null;\n }, [emptyView]);\n\n const contextValue = useMemo(() => ({ layout }), [layout]);\n\n return (\n <CartesianChartContextProvider value={contextValue}>\n <Wrap if={height}>\n <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n <ResponsiveContainer\n initialDimension={{\n // fix warning on initial render\n width: 1,\n height: 1,\n }}\n width={height ? undefined : \"100%\"}\n aspect={height ? undefined : 3}\n ref={containerRef}\n >\n <ComposedChart\n data={data}\n className={rootClassName}\n layout={layout}\n {...rest}\n >\n {children}\n {showEmptyView && viewDimensions && (\n <foreignObject {...viewDimensions}>\n <DivView className={styles.emptyViewContainer}>\n {emptyElement}\n </DivView>\n </foreignObject>\n )}\n </ComposedChart>\n </ResponsiveContainer>\n </div>\n </Wrap>\n </CartesianChartContextProvider>\n );\n};\n\nexport const typedCartesianChart = <\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n TData extends ChartDataValue<any> = ChartDataValue<any>,\n XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n Area: TypedArea<TData>(),\n Bar: TypedBar<TData>(),\n XAxis: TypedXAxis<TData, XAxisDataKey>(),\n YAxis: TypedYAxis<TData>(),\n Grid: TypedChartGrid(),\n Legend: TypedChartLegend(),\n Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,eAAe,EAAE,OAAO,IAAI,CAAC,MAAM,CAAC;CAEzD,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
|
|
4
|
+
import { useCartesianChartContext } from "../../context.mjs";
|
|
5
|
+
import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
|
|
6
|
+
import { isDataKeyWithLabel } from "../../types.mjs";
|
|
7
|
+
import "react";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
import * as Recharts from "recharts";
|
|
10
|
+
//#region src/components/CartesianChart/components/Bar/Bar.tsx
|
|
11
|
+
/** @flr-generate all */
|
|
12
|
+
var Bar = (props) => {
|
|
13
|
+
const { color: colorFromProps = "sea-green", ...rest } = props;
|
|
14
|
+
const tokens = useDesignTokens();
|
|
15
|
+
const { layout } = useCartesianChartContext();
|
|
16
|
+
const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
|
|
17
|
+
const cornerRadius = parseInt(tokens.bar["corner-radius"].value);
|
|
18
|
+
const radius = props.stackId !== void 0 ? 0 : layout === "vertical" ? [
|
|
19
|
+
0,
|
|
20
|
+
cornerRadius,
|
|
21
|
+
cornerRadius,
|
|
22
|
+
0
|
|
23
|
+
] : [
|
|
24
|
+
cornerRadius,
|
|
25
|
+
cornerRadius,
|
|
26
|
+
0,
|
|
27
|
+
0
|
|
28
|
+
];
|
|
29
|
+
return /* @__PURE__ */ jsx(Recharts.Bar, {
|
|
30
|
+
name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,
|
|
31
|
+
...rest,
|
|
32
|
+
fill: color,
|
|
33
|
+
radius
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
var TypedBar = () => Bar;
|
|
37
|
+
//#endregion
|
|
38
|
+
export { Bar, Bar as default, TypedBar };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=Bar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Bar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Bar/Bar.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n type ChartDataValue,\n type DataKeyProp,\n type DataKeyWithLabel,\n isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype BarBaseProps = Pick<\n Recharts.BarProps,\n | \"className\"\n | \"stackId\"\n | \"key\"\n | \"xAxisId\"\n | \"yAxisId\"\n | \"unit\"\n | \"barSize\"\n | \"maxBarSize\"\n | \"minPointSize\"\n> & {\n /** The color of the bar. @default \"sea-green\" */\n color?: CategoricalWithCustomColor;\n};\n\nexport interface BarPropsByDataKeyProp<\n TData extends ChartDataValue = ChartDataValue,\n> extends BarBaseProps {\n dataKey: DataKeyProp<TData>;\n}\n\nexport interface BarPropsByDataKey<\n TData extends ChartDataValue = ChartDataValue,\n>\n extends BarBaseProps, DataKeyWithLabel<TData> {}\n\nexport type BarProps<TData extends ChartDataValue = ChartDataValue> =\n BarPropsByDataKey<TData> | BarPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Bar: FC<BarProps> = (props) => {\n const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n const tokens = useDesignTokens();\n const { layout } = useCartesianChartContext();\n\n const color = isCategoricalColor(colorFromProps)\n ? `var(--color--categorical--${colorFromProps})`\n : colorFromProps;\n\n const cornerRadius = parseInt(tokens.bar[\"corner-radius\"].value);\n const radius: Recharts.BarProps[\"radius\"] =\n props.stackId !== undefined\n ? 0\n : layout === \"vertical\"\n ? [0, cornerRadius, cornerRadius, 0]\n : [cornerRadius, cornerRadius, 0, 0];\n\n return (\n <Recharts.Bar\n name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n {...rest}\n fill={color}\n radius={radius}\n />\n );\n};\n\nexport const TypedBar = <TData extends ChartDataValue = ChartDataValue>() =>\n Bar as ComponentType<BarPropsByDataKeyProp<TData>>;\n\nexport default Bar;\n"],"mappings":";;;;;;;;;;;AA4CA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,MAAM,eAAe,SAAS,OAAO,IAAI,gBAAgB,CAAC,KAAK;CAC/D,MAAM,SACJ,MAAM,YAAY,KAAA,IACd,IACA,WAAW,aACT;EAAC;EAAG;EAAc;EAAc;CAAC,IACjC;EAAC;EAAc;EAAc;EAAG;CAAC;CAEzC,OACE,oBAAC,SAAS,KAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EAC7D,GAAI;EACJ,MAAM;EACE;CACT,CAAA;AAEL;AAEA,IAAa,iBACX"}
|
package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs
CHANGED
|
@@ -7,9 +7,11 @@ import * as Recharts from "recharts";
|
|
|
7
7
|
//#region src/components/CartesianChart/components/XAxis/XAxis.tsx
|
|
8
8
|
/** @flr-generate all */
|
|
9
9
|
var XAxis = (props) => {
|
|
10
|
+
const { type = "auto", ...rest } = props;
|
|
10
11
|
const tokens = useDesignTokens();
|
|
11
12
|
return /* @__PURE__ */ jsx(Recharts.XAxis, {
|
|
12
|
-
...
|
|
13
|
+
...rest,
|
|
14
|
+
type,
|
|
13
15
|
fontSize: tokens.axis["font-size"].value,
|
|
14
16
|
tick: { fill: tokens.axis["color"].value },
|
|
15
17
|
tickMargin: parseInt(tokens.axis.spacing.value),
|
package/dist/js/packages/components/src/components/CartesianChart/components/XAxis/XAxis.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"XAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/XAxis/XAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type XAxisProps<\n TData extends ChartDataValue = ChartDataValue,\n TDataKey extends DataKey<TData> = DataKey<TData>,\n TDataKeyValue = DataKeyValue<TData, TDataKey>,\n> = Pick<\n Recharts.XAxisProps,\n | \"className\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"allowDataOverflow\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n> & {\n dataKey?: TDataKey;\n tickFormatter?: (value: TDataKeyValue, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const XAxis: FC<XAxisProps> = (props) => {\n const tokens = useDesignTokens();\n\n return (\n <Recharts.XAxis\n {...
|
|
1
|
+
{"version":3,"file":"XAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/XAxis/XAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type XAxisProps<\n TData extends ChartDataValue = ChartDataValue,\n TDataKey extends DataKey<TData> = DataKey<TData>,\n TDataKeyValue = DataKeyValue<TData, TDataKey>,\n> = Pick<\n Recharts.XAxisProps,\n | \"className\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"allowDataOverflow\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n> & {\n dataKey?: TDataKey;\n tickFormatter?: (value: TDataKeyValue, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const XAxis: FC<XAxisProps> = (props) => {\n const { type = \"auto\", ...rest } = props;\n\n const tokens = useDesignTokens();\n\n return (\n <Recharts.XAxis\n {...rest}\n type={type}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport { TypedXAxis } from \"./types\";\n\nexport default XAxis;\n"],"mappings":";;;;;;;;AAgCA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,OAAO,QAAQ,GAAG,SAAS;CAEnC,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACE;EACN,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
|
package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs
CHANGED
|
@@ -7,12 +7,13 @@ import * as Recharts from "recharts";
|
|
|
7
7
|
//#region src/components/CartesianChart/components/YAxis/YAxis.tsx
|
|
8
8
|
/** @flr-generate all */
|
|
9
9
|
var YAxis = (props) => {
|
|
10
|
-
const { domain, ...rest } = props;
|
|
10
|
+
const { domain, type = "auto", ...rest } = props;
|
|
11
11
|
const tokens = useDesignTokens();
|
|
12
12
|
return /* @__PURE__ */ jsx(Recharts.YAxis, {
|
|
13
13
|
...rest,
|
|
14
14
|
allowDataOverflow: true,
|
|
15
15
|
domain,
|
|
16
|
+
type,
|
|
16
17
|
fontSize: tokens.axis["font-size"].value,
|
|
17
18
|
tick: { fill: tokens.axis["color"].value },
|
|
18
19
|
tickMargin: parseInt(tokens.axis.spacing.value),
|
package/dist/js/packages/components/src/components/CartesianChart/components/YAxis/YAxis.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n TData extends ChartDataValue = ChartDataValue,\n TDataKey extends DataKey<TData> = DataKey<TData>,\n TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n Recharts.YAxisProps,\n | \"className\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n> & {\n dataKey?: TDataKey;\n tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain, ...rest } = props;\n\n const tokens = useDesignTokens();\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;AA+BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,GAAG,SAAS;
|
|
1
|
+
{"version":3,"file":"YAxis.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/YAxis/YAxis.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type {\n ChartDataValue,\n DataKey,\n DataKeyValue,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport type YAxisProps<\n TData extends ChartDataValue = ChartDataValue,\n TDataKey extends DataKey<TData> = DataKey<TData>,\n TDataMatch = DataKeyValue<TData, TDataKey>,\n> = Pick<\n Recharts.YAxisProps,\n | \"className\"\n | \"orientation\"\n | \"allowDecimals\"\n | \"interval\"\n | \"minTickGap\"\n | \"scale\"\n | \"type\"\n | \"domain\"\n | \"hide\"\n | \"unit\"\n> & {\n dataKey?: TDataKey;\n tickFormatter?: (value: TDataMatch, index: number) => string;\n};\n\n/** @flr-generate all */\nexport const YAxis: FC<YAxisProps> = (props) => {\n const { domain, type = \"auto\", ...rest } = props;\n\n const tokens = useDesignTokens();\n\n return (\n <Recharts.YAxis\n {...rest}\n allowDataOverflow\n domain={domain}\n type={type}\n fontSize={tokens.axis[\"font-size\"].value}\n tick={{\n fill: tokens.axis[\"color\"].value,\n }}\n tickMargin={parseInt(tokens.axis.spacing.value)}\n tickSize={parseInt(tokens.axis[\"tick-size\"].value)}\n />\n );\n};\n\nexport { TypedYAxis } from \"./types\";\n\nexport default YAxis;\n"],"mappings":";;;;;;;;AA+BA,IAAa,SAAyB,UAAU;CAC9C,MAAM,EAAE,QAAQ,OAAO,QAAQ,GAAG,SAAS;CAE3C,MAAM,SAAS,gBAAgB;CAE/B,OACE,oBAAC,SAAS,OAAV;EACE,GAAI;EACJ,mBAAA;EACQ;EACF;EACN,UAAU,OAAO,KAAK,YAAY,CAAC;EACnC,MAAM,EACJ,MAAM,OAAO,KAAK,QAAQ,CAAC,MAC7B;EACA,YAAY,SAAS,OAAO,KAAK,QAAQ,KAAK;EAC9C,UAAU,SAAS,OAAO,KAAK,YAAY,CAAC,KAAK;CAClD,CAAA;AAEL"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
//#region src/components/CartesianChart/context.ts
|
|
5
|
+
var cartesianChartContext = createContext({ layout: "horizontal" });
|
|
6
|
+
var useCartesianChartContext = () => useContext(cartesianChartContext);
|
|
7
|
+
var CartesianChartContextProvider = cartesianChartContext.Provider;
|
|
8
|
+
//#endregion
|
|
9
|
+
export { CartesianChartContextProvider, useCartesianChartContext };
|
|
10
|
+
|
|
11
|
+
//# sourceMappingURL=context.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CartesianChartLayout } from \"@/components/CartesianChart/types\";\n\ninterface CartesianChartContext {\n layout: CartesianChartLayout;\n}\n\nconst cartesianChartContext = createContext<CartesianChartContext>({\n layout: \"horizontal\",\n});\n\nexport const useCartesianChartContext = (): CartesianChartContext =>\n useContext(cartesianChartContext);\n\nexport const CartesianChartContextProvider = cartesianChartContext.Provider;\n"],"mappings":";;;;AAOA,IAAM,wBAAwB,cAAqC,EACjE,QAAQ,aACV,CAAC;AAED,IAAa,iCACX,WAAW,qBAAqB;AAElC,IAAa,gCAAgC,sBAAsB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/types.ts"],"sourcesContent":["export type ChartDataValue<TValue = unknown> = Record<string, TValue>;\n\nexport interface DataKeyWithLabel<TData extends ChartDataValue> {\n dataKey: DataKeyFn<TData>;\n dataKeyLabel: DataKeyProp<TData>;\n}\n\nexport type DataKeyFn<\n TData extends ChartDataValue = ChartDataValue,\n TValue = unknown,\n> = (data: TData) => TValue;\n\nexport type DataKeyProp<TData extends ChartDataValue = ChartDataValue> =\n keyof TData;\n\nexport type DataKey<\n TData extends ChartDataValue = ChartDataValue,\n TValue = unknown,\n> = DataKeyProp<TData> | DataKeyFn<TData, TValue>;\n\nexport type DataKeyValue<\n TData extends ChartDataValue,\n TDataKey extends DataKey<TData>,\n> = TDataKey extends (data: TData) => infer R\n ? R\n : TDataKey extends keyof TData\n ? TData[TDataKey]\n : never;\n\nexport const isDataKeyWithLabel = <TData extends ChartDataValue>(\n obj: unknown,\n): obj is DataKeyWithLabel<TData> => {\n return (\n typeof obj === \"object\" &&\n obj !== null &&\n \"dataKeyLabel\" in obj &&\n typeof obj.dataKeyLabel === \"string\"\n );\n};\n"],"mappings":";;;AA6BA,IAAa,sBACX,QACmC;CACnC,OACE,OAAO,QAAQ,YACf,QAAQ,QACR,kBAAkB,OAClB,OAAO,IAAI,iBAAiB;AAEhC"}
|
|
1
|
+
{"version":3,"file":"types.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/types.ts"],"sourcesContent":["export type ChartDataValue<TValue = unknown> = Record<string, TValue>;\n\nexport interface DataKeyWithLabel<TData extends ChartDataValue> {\n dataKey: DataKeyFn<TData>;\n dataKeyLabel: DataKeyProp<TData>;\n}\n\nexport type DataKeyFn<\n TData extends ChartDataValue = ChartDataValue,\n TValue = unknown,\n> = (data: TData) => TValue;\n\nexport type DataKeyProp<TData extends ChartDataValue = ChartDataValue> =\n keyof TData;\n\nexport type DataKey<\n TData extends ChartDataValue = ChartDataValue,\n TValue = unknown,\n> = DataKeyProp<TData> | DataKeyFn<TData, TValue>;\n\nexport type DataKeyValue<\n TData extends ChartDataValue,\n TDataKey extends DataKey<TData>,\n> = TDataKey extends (data: TData) => infer R\n ? R\n : TDataKey extends keyof TData\n ? TData[TDataKey]\n : never;\n\nexport const isDataKeyWithLabel = <TData extends ChartDataValue>(\n obj: unknown,\n): obj is DataKeyWithLabel<TData> => {\n return (\n typeof obj === \"object\" &&\n obj !== null &&\n \"dataKeyLabel\" in obj &&\n typeof obj.dataKeyLabel === \"string\"\n );\n};\n\n/**\n * The orientation of the chart's axes and graphical items. `\"horizontal\"` puts\n * the category axis on the x-axis (bars grow upwards), `\"vertical\"` puts it on\n * the y-axis (bars grow to the side).\n */\nexport type CartesianChartLayout = \"horizontal\" | \"vertical\";\n"],"mappings":";;;AA6BA,IAAa,sBACX,QACmC;CACnC,OACE,OAAO,QAAQ,YACf,QAAQ,QACR,kBAAkB,OAClB,OAAO,IAAI,iBAAiB;AAEhC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n
|
|
1
|
+
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n vertical-align: bottom;\n display: inline-flex;\n margin-inline-start: var(--heading--icon-to-text-spacing);\n min-height: var(--heading-line-height);\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n flex-wrap: wrap;\n\n &:empty {\n display: none;\n }\n }\n\n &:where(h1),\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(h2),\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h3),\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h4),\n &:where(.h4),\n &:where(h5),\n &:where(.h5),\n &:where(h6),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs
CHANGED
|
@@ -36,7 +36,7 @@ var ItemImpl = (props) => {
|
|
|
36
36
|
})
|
|
37
37
|
});
|
|
38
38
|
};
|
|
39
|
-
var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile);
|
|
39
|
+
var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile && prev.list.onAction === next.list.onAction && prev.list.accordion === next.list.accordion && !!prev.list.itemView?.rendersSameAs(next.list.itemView));
|
|
40
40
|
Item.displayName = "Item";
|
|
41
41
|
var ItemContainer = (props) => {
|
|
42
42
|
const list = useList();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n id: Key;\n data: never;\n triggerRef?: Ref<HTMLDivElement>;\n list: ListModel<never>;\n isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n const { id, data, triggerRef, list, isTile } = props;\n\n const itemView = list.itemView;\n\n const { gridItemProps, children } = useGridItemProps(props, list);\n\n if (!itemView) {\n return null;\n }\n\n const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n const href = itemView.href ? itemView.href(data) : undefined;\n const hasAction = !!gridItemProps.onAction || !!href;\n\n const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n const gridItemPropsWithRef = triggerRef\n ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n : gridItemProps;\n\n return (\n <ItemsGridListItemView\n id={id}\n textValue={textValue}\n href={href}\n target={itemView.target}\n hasAction={hasAction}\n isTile={isTile}\n {...gridItemPropsWithRef}\n >\n <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n </ItemsGridListItemView>\n );\n};\n\nexport const Item = memo(\n ItemImpl,\n (prev, next) =>\n prev.id === next.id &&\n prev.data === next.data &&\n prev.triggerRef === next.triggerRef &&\n prev.isTile === next.isTile,\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n id?: Key;\n data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n const list = useList();\n return (\n <ItemsGridListItemView\n textValue=\"-\"\n className={styles.item}\n isTile={list.viewMode.isTiles}\n >\n {props.children}\n </ItemsGridListItemView>\n );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;
|
|
1
|
+
{"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n id: Key;\n data: never;\n triggerRef?: Ref<HTMLDivElement>;\n list: ListModel<never>;\n isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n const { id, data, triggerRef, list, isTile } = props;\n\n const itemView = list.itemView;\n\n const { gridItemProps, children } = useGridItemProps(props, list);\n\n if (!itemView) {\n return null;\n }\n\n const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n const href = itemView.href ? itemView.href(data) : undefined;\n const hasAction = !!gridItemProps.onAction || !!href;\n\n const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n const gridItemPropsWithRef = triggerRef\n ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n : gridItemProps;\n\n return (\n <ItemsGridListItemView\n id={id}\n textValue={textValue}\n href={href}\n target={itemView.target}\n hasAction={hasAction}\n isTile={isTile}\n {...gridItemPropsWithRef}\n >\n <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n </ItemsGridListItemView>\n );\n};\n\n// The list model is rebuilt on every render, so it cannot be compared by\n// identity — but everything an item renders from it can. Those closures come\n// from the consumer's own JSX and only change when the consumer re-renders,\n// so loading more still skips the re-render while parent state no longer\n// leaves an item frozen on the values it first saw.\nexport const Item = memo(\n ItemImpl,\n (prev, next) =>\n prev.id === next.id &&\n prev.data === next.data &&\n prev.triggerRef === next.triggerRef &&\n prev.isTile === next.isTile &&\n prev.list.onAction === next.list.onAction &&\n prev.list.accordion === next.list.accordion &&\n !!prev.list.itemView?.rendersSameAs(next.list.itemView),\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n id?: Key;\n data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n const list = useList();\n return (\n <ItemsGridListItemView\n textValue=\"-\"\n className={styles.item}\n isTile={list.viewMode.isTiles}\n >\n {props.children}\n </ItemsGridListItemView>\n );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;AAOA,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,UACrB,KAAK,KAAK,aAAa,KAAK,KAAK,YACjC,KAAK,KAAK,cAAc,KAAK,KAAK,aAClC,CAAC,CAAC,KAAK,KAAK,UAAU,cAAc,KAAK,KAAK,QAAQ,CAC1D;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAW,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}
|
|
@@ -27,6 +27,13 @@ var ItemView = class ItemView {
|
|
|
27
27
|
this.tileMaxWidth = tileMaxWidth;
|
|
28
28
|
}
|
|
29
29
|
static fallbackRenderItemFn = (item) => createElement("pre", void 0, JSON.stringify(item));
|
|
30
|
+
/**
|
|
31
|
+
* Whether `other` would render this item identically — i.e. all render
|
|
32
|
+
* functions taken from the consumer's `ListItem` element are still the same.
|
|
33
|
+
*/
|
|
34
|
+
rendersSameAs(other) {
|
|
35
|
+
return !!other && this.renderFn === other.renderFn && this.textValue === other.textValue && this.href === other.href && this.target === other.target && this.defaultExpanded === other.defaultExpanded;
|
|
36
|
+
}
|
|
30
37
|
render(data) {
|
|
31
38
|
return (this.renderFn ?? ItemView.fallbackRenderItemFn)(data, this.list);
|
|
32
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemView.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemView.ts"],"sourcesContent":["import type { HTMLAttributeAnchorTarget, ReactElement, ReactNode } from \"react\";\nimport { createElement } from \"react\";\nimport type { RenderItemFn } from \"@/components/List/model/item/types\";\nimport type List from \"@/components/List/model/List\";\n\nexport interface ItemViewShape<T> {\n textValue?: (data: T) => string;\n href?: (data: T) => string;\n target?: HTMLAttributeAnchorTarget;\n defaultExpanded?: (data: T) => boolean;\n renderFn?: RenderItemFn<T>;\n /** @deprecated Use loadingView instead */\n fallback?: ReactElement;\n loadingView?: ReactElement;\n showList?: boolean;\n showTiles?: boolean;\n tileMaxWidth?: number;\n}\n\nexport class ItemView<T> {\n public readonly list: List<T>;\n public readonly textValue?: (data: T) => string;\n public readonly href?: (data: T) => string;\n public readonly target?: HTMLAttributeAnchorTarget;\n public readonly defaultExpanded?: (data: T) => boolean;\n public readonly loadingView?: ReactElement;\n public readonly showTiles?: boolean;\n public readonly showList?: boolean;\n public readonly tileMaxWidth: number;\n private readonly renderFn?: RenderItemFn<T>;\n\n public constructor(list: List<T>, shape: ItemViewShape<T> = {}) {\n const {\n fallback,\n loadingView = fallback,\n textValue,\n href,\n target,\n defaultExpanded,\n renderFn,\n showTiles,\n showList = true,\n tileMaxWidth = 230,\n } = shape;\n this.list = list;\n this.textValue = textValue;\n this.renderFn = renderFn;\n this.href = href;\n this.target = target;\n this.defaultExpanded = defaultExpanded;\n this.loadingView = loadingView;\n this.showTiles = showTiles;\n this.showList = showList;\n this.tileMaxWidth = tileMaxWidth;\n }\n\n private static fallbackRenderItemFn: RenderItemFn<never> = (item) =>\n createElement(\"pre\", undefined, JSON.stringify(item));\n\n public render(data: T): ReactNode {\n const renderFn = (this.renderFn ??\n ItemView.fallbackRenderItemFn) as RenderItemFn<T>;\n return renderFn(data as never, this.list);\n }\n}\n"],"mappings":";;;;AAmBA,IAAa,WAAb,MAAa,SAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,MAAe,QAA0B,CAAC,GAAG;EAC9D,MAAM,EACJ,UACA,cAAc,UACd,WACA,MACA,QACA,iBACA,UACA,WACA,WAAW,MACX,eAAe,QACb;EACJ,KAAK,OAAO;EACZ,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,kBAAkB;EACvB,KAAK,cAAc;EACnB,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,eAAe;CACtB;CAEA,OAAe,wBAA6C,SAC1D,cAAc,OAAO,KAAA,GAAW,KAAK,UAAU,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"ItemView.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemView.ts"],"sourcesContent":["import type { HTMLAttributeAnchorTarget, ReactElement, ReactNode } from \"react\";\nimport { createElement } from \"react\";\nimport type { RenderItemFn } from \"@/components/List/model/item/types\";\nimport type List from \"@/components/List/model/List\";\n\nexport interface ItemViewShape<T> {\n textValue?: (data: T) => string;\n href?: (data: T) => string;\n target?: HTMLAttributeAnchorTarget;\n defaultExpanded?: (data: T) => boolean;\n renderFn?: RenderItemFn<T>;\n /** @deprecated Use loadingView instead */\n fallback?: ReactElement;\n loadingView?: ReactElement;\n showList?: boolean;\n showTiles?: boolean;\n tileMaxWidth?: number;\n}\n\nexport class ItemView<T> {\n public readonly list: List<T>;\n public readonly textValue?: (data: T) => string;\n public readonly href?: (data: T) => string;\n public readonly target?: HTMLAttributeAnchorTarget;\n public readonly defaultExpanded?: (data: T) => boolean;\n public readonly loadingView?: ReactElement;\n public readonly showTiles?: boolean;\n public readonly showList?: boolean;\n public readonly tileMaxWidth: number;\n private readonly renderFn?: RenderItemFn<T>;\n\n public constructor(list: List<T>, shape: ItemViewShape<T> = {}) {\n const {\n fallback,\n loadingView = fallback,\n textValue,\n href,\n target,\n defaultExpanded,\n renderFn,\n showTiles,\n showList = true,\n tileMaxWidth = 230,\n } = shape;\n this.list = list;\n this.textValue = textValue;\n this.renderFn = renderFn;\n this.href = href;\n this.target = target;\n this.defaultExpanded = defaultExpanded;\n this.loadingView = loadingView;\n this.showTiles = showTiles;\n this.showList = showList;\n this.tileMaxWidth = tileMaxWidth;\n }\n\n private static fallbackRenderItemFn: RenderItemFn<never> = (item) =>\n createElement(\"pre\", undefined, JSON.stringify(item));\n\n /**\n * Whether `other` would render this item identically — i.e. all render\n * functions taken from the consumer's `ListItem` element are still the same.\n */\n public rendersSameAs(other?: ItemView<T>): boolean {\n return (\n !!other &&\n this.renderFn === other.renderFn &&\n this.textValue === other.textValue &&\n this.href === other.href &&\n this.target === other.target &&\n this.defaultExpanded === other.defaultExpanded\n );\n }\n\n public render(data: T): ReactNode {\n const renderFn = (this.renderFn ??\n ItemView.fallbackRenderItemFn) as RenderItemFn<T>;\n return renderFn(data as never, this.list);\n }\n}\n"],"mappings":";;;;AAmBA,IAAa,WAAb,MAAa,SAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,MAAe,QAA0B,CAAC,GAAG;EAC9D,MAAM,EACJ,UACA,cAAc,UACd,WACA,MACA,QACA,iBACA,UACA,WACA,WAAW,MACX,eAAe,QACb;EACJ,KAAK,OAAO;EACZ,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,kBAAkB;EACvB,KAAK,cAAc;EACnB,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,eAAe;CACtB;CAEA,OAAe,wBAA6C,SAC1D,cAAc,OAAO,KAAA,GAAW,KAAK,UAAU,IAAI,CAAC;;;;;CAMtD,cAAqB,OAA8B;EACjD,OACE,CAAC,CAAC,SACF,KAAK,aAAa,MAAM,YACxB,KAAK,cAAc,MAAM,aACzB,KAAK,SAAS,MAAM,QACpB,KAAK,WAAW,MAAM,UACtB,KAAK,oBAAoB,MAAM;CAEnC;CAEA,OAAc,MAAoB;EAGhC,QAFkB,KAAK,YACrB,SAAS,qBAAA,CACK,MAAe,KAAK,IAAI;CAC1C;AACF"}
|
package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs
CHANGED
|
@@ -8,7 +8,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
import * as Aria from "react-aria-components";
|
|
9
9
|
//#region src/components/SegmentedControl/components/Segment/Segment.tsx
|
|
10
10
|
/**
|
|
11
|
-
* @deprecated Use `Tab` inside `Tabs`, or `
|
|
11
|
+
* @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —
|
|
12
|
+
* `RadioButton` takes exactly this component's props.
|
|
12
13
|
* @flr-generate all
|
|
13
14
|
*/
|
|
14
15
|
var Segment = flowComponent("Segment", (props) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `
|
|
1
|
+
{"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n extends\n PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —\n * `RadioButton` takes exactly this component's props.\n * @flr-generate all\n */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n // No deprecation warning here — a Segment only renders inside a\n // SegmentedControl, which already warns.\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(styles.segment, className);\n\n return (\n <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n {children}\n <IconCheck className={styles.checkmark} />\n </Aria.Radio>\n );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,UAAU,cAAc,YAAY,UAAU;CAGzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EAArD,UAAA,CACG,UACD,oBAAC,WAAD,EAAW,WAAW,uBAAO,UAAY,CAAA,CAC/B;;AAEhB,CAAC"}
|
|
@@ -13,7 +13,7 @@ import { useIsSSR } from "react-aria";
|
|
|
13
13
|
//#region src/components/Tabs/Tabs.tsx
|
|
14
14
|
/** @flr-generate all */
|
|
15
15
|
var Tabs = flowComponent("Tabs", (props) => {
|
|
16
|
-
const { children, className, defaultSelectedKey, selectedKey: selectedKeyProps, disabledKeys, ref, onSelectionChange, tabNotFoundView, ...rest } = props;
|
|
16
|
+
const { children, className, defaultSelectedKey, selectedKey: selectedKeyProps, disabledKeys, ref, onSelectionChange, tabNotFoundView, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...rest } = props;
|
|
17
17
|
const rootClassName = clsx(Tabs_module_default.tabs, className);
|
|
18
18
|
const [selectedKeyState, setSelectedKeyState] = useState(defaultSelectedKey);
|
|
19
19
|
const selectedKey = selectedKeyProps ?? selectedKeyState;
|
|
@@ -31,6 +31,8 @@ var Tabs = flowComponent("Tabs", (props) => {
|
|
|
31
31
|
ref,
|
|
32
32
|
children: [
|
|
33
33
|
/* @__PURE__ */ jsx(TabList, {
|
|
34
|
+
"aria-label": ariaLabel,
|
|
35
|
+
"aria-labelledby": ariaLabelledby,
|
|
34
36
|
selection: selectedKey,
|
|
35
37
|
onContextMenuSelectionChange: (key) => {
|
|
36
38
|
setSelectedKeyState(key);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n extends\n Omit<Aria.TabsProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n /**\n * The view rendered when the selected tab does not exist. Defaults to a\n * built-in IllustratedMessage.\n */\n tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n const {\n children,\n className,\n defaultSelectedKey,\n selectedKey: selectedKeyProps,\n disabledKeys,\n ref,\n onSelectionChange,\n tabNotFoundView,\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.tabs, className);\n const [selectedKeyState, setSelectedKeyState] = useState<\n Aria.Key | undefined\n >(defaultSelectedKey);\n\n const selectedKey = selectedKeyProps ?? selectedKeyState;\n\n const isSsr = useIsSSR();\n\n return (\n <>\n {children}\n <Aria.Tabs\n slot={null}\n className={rootClassName}\n {...rest}\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n ref={ref}\n >\n <TabList\n selection={selectedKey}\n onContextMenuSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n />\n <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n </Aria.Tabs>\n </>\n );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Tabs.mjs","names":[],"sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { TabList } from \"@/components/Tabs/components/TabList\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Tabs.module.scss\";\nimport { FallbackTab } from \"@/components/Tabs/components/FallbackTab\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface TabsProps\n extends\n Omit<Aria.TabsProps, \"children\">,\n PropsWithChildren,\n FlowComponentProps {\n /**\n * An accessible name for the tab list. `Tabs` has no `Label` slot, so this is\n * how the group is named when the surrounding heading does not already do\n * it.\n */\n \"aria-label\"?: string;\n /** The id of an element that names the tab list. */\n \"aria-labelledby\"?: string;\n /**\n * The view rendered when the selected tab does not exist. Defaults to a\n * built-in IllustratedMessage.\n */\n tabNotFoundView?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const Tabs = flowComponent(\"Tabs\", (props) => {\n const {\n children,\n className,\n defaultSelectedKey,\n selectedKey: selectedKeyProps,\n disabledKeys,\n ref,\n onSelectionChange,\n tabNotFoundView,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n ...rest\n } = props;\n\n const rootClassName = clsx(styles.tabs, className);\n const [selectedKeyState, setSelectedKeyState] = useState<\n Aria.Key | undefined\n >(defaultSelectedKey);\n\n const selectedKey = selectedKeyProps ?? selectedKeyState;\n\n const isSsr = useIsSSR();\n\n return (\n <>\n {children}\n <Aria.Tabs\n slot={null}\n className={rootClassName}\n {...rest}\n selectedKey={selectedKey}\n onSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n ref={ref}\n >\n <TabList\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n selection={selectedKey}\n onContextMenuSelectionChange={(key) => {\n setSelectedKeyState(key);\n if (onSelectionChange) {\n onSelectionChange(key);\n }\n }}\n disabledKeys={disabledKeys}\n />\n <UiComponentTunnelExit id=\"Panels\" component=\"Tabs\" />\n {!isSsr && <FallbackTab tabNotFoundView={tabNotFoundView} />}\n </Aria.Tabs>\n </>\n );\n});\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,oBACA,aAAa,kBACb,cACA,KACA,mBACA,iBACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACD;CAEJ,MAAM,gBAAgB,KAAK,oBAAO,MAAM,SAAS;CACjD,MAAM,CAAC,kBAAkB,uBAAuB,SAE9C,kBAAkB;CAEpB,MAAM,cAAc,oBAAoB;CAExC,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,UACD,qBAAC,KAAK,MAAN;EACE,MAAM;EACN,WAAW;EACX,GAAI;EACS;EACb,oBAAoB,QAAQ;GAC1B,oBAAoB,GAAG;GACvB,IAAI,mBACF,kBAAkB,GAAG;EAEzB;EACc;EACT;EAZP,UAAA;GAcE,oBAAC,SAAD;IACE,cAAY;IACZ,mBAAiB;IACjB,WAAW;IACX,+BAA+B,QAAQ;KACrC,oBAAoB,GAAG;KACvB,IAAI,mBACF,kBAAkB,GAAG;IAEzB;IACc;GACf,CAAA;GACD,oBAAC,uBAAD;IAAuB,IAAG;IAAS,WAAU;GAAQ,CAAA;GACpD,CAAC,SAAS,oBAAC,aAAD,EAA8B,gBAAkB,CAAA;EAClD;CACX,CAAA,CAAA,EAAA,CAAA;AAEN,CAAC"}
|
|
@@ -15,7 +15,7 @@ import * as Aria from "react-aria-components";
|
|
|
15
15
|
import { useMergeRefs } from "use-callback-ref";
|
|
16
16
|
//#region src/components/Tabs/components/TabList/TabList.tsx
|
|
17
17
|
var TabList = (props) => {
|
|
18
|
-
const { selection, disabledKeys, onContextMenuSelectionChange } = props;
|
|
18
|
+
const { selection, disabledKeys, onContextMenuSelectionChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
|
|
19
19
|
const titleCollapsedElementId = useId();
|
|
20
20
|
const overflowObserver = useObserveOverflow();
|
|
21
21
|
const isCollapsed = overflowObserver.isOverflowing;
|
|
@@ -26,6 +26,8 @@ var TabList = (props) => {
|
|
|
26
26
|
onContextMenuSelectionChange(key);
|
|
27
27
|
};
|
|
28
28
|
const regularTabTitles = /* @__PURE__ */ jsx(Aria.TabList, {
|
|
29
|
+
"aria-label": ariaLabel,
|
|
30
|
+
"aria-labelledby": ariaLabelledby,
|
|
29
31
|
className: TabList_module_default.titles,
|
|
30
32
|
ref: setTitlesRef,
|
|
31
33
|
children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabList.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n selection: Aria.Key | undefined;\n onContextMenuSelectionChange: (key: Aria.Key) => void;\n disabledKeys?: Iterable<Aria.Key>;\n}\n\nexport const TabList: FC<Props> = (props) => {\n const {
|
|
1
|
+
{"version":3,"file":"TabList.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n selection: Aria.Key | undefined;\n onContextMenuSelectionChange: (key: Aria.Key) => void;\n disabledKeys?: Iterable<Aria.Key>;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n const {\n selection,\n disabledKeys,\n onContextMenuSelectionChange,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n } = props;\n\n const titleCollapsedElementId = useId();\n const overflowObserver = useObserveOverflow();\n const isCollapsed = overflowObserver.isOverflowing;\n const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n const tabIndicator = useTabIndicator(isCollapsed);\n\n const setTitlesRef = useMergeRefs<HTMLDivElement>([\n overflowObserver.ref,\n tabIndicator.titlesRef,\n ]);\n\n const handleContextMenuSelectionChange = (key: Aria.Key) => {\n onContextMenuSelectionChange(key);\n };\n\n const regularTabTitles = (\n <Aria.TabList\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={styles.titles}\n ref={setTitlesRef}\n >\n <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n </Aria.TabList>\n );\n\n const contextMenuWhenCollapsed = isCollapsed && (\n <ContextMenuTriggerView>\n <Button\n variant=\"solid\"\n className={styles.contextMenuButton}\n color=\"light\"\n aria-labelledby={titleCollapsedElementId}\n >\n <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n <IconChevronDown />\n </Button>\n\n <ContextMenuView\n disabledKeys={disabledKeys}\n selectedKeys={selection ? [selection] : undefined}\n selectionMode=\"navigation\"\n onAction={(key) => handleContextMenuSelectionChange(key)}\n >\n <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n </ContextMenuView>\n </ContextMenuTriggerView>\n );\n\n return (\n <div className={rootClassName} ref={tabIndicator.rootRef}>\n {!isCollapsed && tabIndicator.indicatorStyle && (\n <div\n aria-hidden=\"true\"\n className={clsx(\n styles.activeIndicator,\n tabIndicator.isAnimated && styles.animated,\n )}\n style={tabIndicator.indicatorStyle}\n />\n )}\n {regularTabTitles}\n {contextMenuWhenCollapsed}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAK,uBAAO,SAAS,eAAe,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,WAAW,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAW,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAG1B,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,KAAK,aAAa;EAAjD,UAAA;GACG,CAAC,eAAe,aAAa,kBAC5B,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACT,uBAAO,iBACP,aAAa,cAAc,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}
|
|
@@ -1341,6 +1341,10 @@ var axis = {
|
|
|
1341
1341
|
"path": ["axis", "tick-size"]
|
|
1342
1342
|
}
|
|
1343
1343
|
};
|
|
1344
|
+
var bar = { "corner-radius": {
|
|
1345
|
+
"value": "4px",
|
|
1346
|
+
"path": ["bar", "corner-radius"]
|
|
1347
|
+
} };
|
|
1344
1348
|
var legend = {
|
|
1345
1349
|
"spacing-x": {
|
|
1346
1350
|
"value": "16px",
|
|
@@ -4295,6 +4299,7 @@ var all_dark_default = {
|
|
|
4295
4299
|
text,
|
|
4296
4300
|
area,
|
|
4297
4301
|
axis,
|
|
4302
|
+
bar,
|
|
4298
4303
|
"big-number": {
|
|
4299
4304
|
"spacing": {
|
|
4300
4305
|
"value": "0.25rem",
|
|
@@ -5784,6 +5789,6 @@ var all_dark_default = {
|
|
|
5784
5789
|
}
|
|
5785
5790
|
};
|
|
5786
5791
|
//#endregion
|
|
5787
|
-
export { accordion, alert, area, avatar, axis, badge, blur, breadcrumb, button, calendar, chat, choice, color, combine, danger, dark, decorative, all_dark_default as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, overlay, popover, primary, rating, scrollbar, section, separator, shadow, slider, success, table, tabs, text, tooltip, transition, unavailable, warning };
|
|
5792
|
+
export { accordion, alert, area, avatar, axis, badge, bar, blur, breadcrumb, button, calendar, chat, choice, color, combine, danger, dark, decorative, all_dark_default as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, overlay, popover, primary, rating, scrollbar, section, separator, shadow, slider, success, table, tabs, text, tooltip, transition, unavailable, warning };
|
|
5788
5793
|
|
|
5789
5794
|
//# sourceMappingURL=all-dark.mjs.map
|