@flipdish/ui-library 0.41.2 → 0.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Dot/Dot.styles.cjs +1 -0
- package/dist/components/atoms/Dot/Dot.styles.cjs.map +1 -1
- package/dist/components/atoms/Dot/Dot.styles.d.ts +4 -0
- package/dist/components/atoms/Dot/Dot.styles.d.ts.map +1 -1
- package/dist/components/atoms/Dot/Dot.styles.js +1 -0
- package/dist/components/atoms/Dot/Dot.styles.js.map +1 -1
- package/dist/components/atoms/LoadingIndicator/index.cjs +5 -0
- package/dist/components/atoms/LoadingIndicator/index.cjs.map +1 -1
- package/dist/components/atoms/LoadingIndicator/index.d.ts +1 -1
- package/dist/components/atoms/LoadingIndicator/index.d.ts.map +1 -1
- package/dist/components/atoms/LoadingIndicator/index.js +5 -0
- package/dist/components/atoms/LoadingIndicator/index.js.map +1 -1
- package/dist/components/atoms/SearchInput/index.cjs +28 -2
- package/dist/components/atoms/SearchInput/index.cjs.map +1 -1
- package/dist/components/atoms/SearchInput/index.d.ts +8 -1
- package/dist/components/atoms/SearchInput/index.d.ts.map +1 -1
- package/dist/components/atoms/SearchInput/index.js +28 -2
- package/dist/components/atoms/SearchInput/index.js.map +1 -1
- package/dist/components/atoms/SocialButton/index.cjs +11 -7
- package/dist/components/atoms/SocialButton/index.cjs.map +1 -1
- package/dist/components/atoms/SocialButton/index.d.ts.map +1 -1
- package/dist/components/atoms/SocialButton/index.js +11 -7
- package/dist/components/atoms/SocialButton/index.js.map +1 -1
- package/dist/components/atoms/Tooltip/index.cjs +8 -1
- package/dist/components/atoms/Tooltip/index.cjs.map +1 -1
- package/dist/components/atoms/Tooltip/index.d.ts.map +1 -1
- package/dist/components/atoms/Tooltip/index.js +8 -1
- package/dist/components/atoms/Tooltip/index.js.map +1 -1
- package/dist/components/atoms/UtilityButton/index.cjs.map +1 -1
- package/dist/components/atoms/UtilityButton/index.d.ts +2 -0
- package/dist/components/atoms/UtilityButton/index.d.ts.map +1 -1
- package/dist/components/atoms/UtilityButton/index.js.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/BreadcrumbItem.cjs +16 -4
- package/dist/components/molecules/Breadcrumbs/components/BreadcrumbItem.cjs.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/BreadcrumbItem.d.ts.map +1 -1
- package/dist/components/molecules/Breadcrumbs/components/BreadcrumbItem.js +17 -5
- package/dist/components/molecules/Breadcrumbs/components/BreadcrumbItem.js.map +1 -1
- package/dist/components/molecules/ButtonGroup/index.cjs +8 -1
- package/dist/components/molecules/ButtonGroup/index.cjs.map +1 -1
- package/dist/components/molecules/ButtonGroup/index.d.ts.map +1 -1
- package/dist/components/molecules/ButtonGroup/index.js +9 -2
- package/dist/components/molecules/ButtonGroup/index.js.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.cjs +8 -1
- package/dist/components/molecules/CodeSnippet/index.cjs.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.d.ts.map +1 -1
- package/dist/components/molecules/CodeSnippet/index.js +8 -1
- package/dist/components/molecules/CodeSnippet/index.js.map +1 -1
- package/dist/components/molecules/Dropdown/index.cjs +10 -7
- package/dist/components/molecules/Dropdown/index.cjs.map +1 -1
- package/dist/components/molecules/Dropdown/index.d.ts.map +1 -1
- package/dist/components/molecules/Dropdown/index.js +11 -8
- package/dist/components/molecules/Dropdown/index.js.map +1 -1
- package/dist/components/molecules/EmptyState/index.cjs +3 -2
- package/dist/components/molecules/EmptyState/index.cjs.map +1 -1
- package/dist/components/molecules/EmptyState/index.d.ts.map +1 -1
- package/dist/components/molecules/EmptyState/index.js +3 -2
- package/dist/components/molecules/EmptyState/index.js.map +1 -1
- package/dist/components/molecules/Select/components/Combobox.cjs +8 -1
- package/dist/components/molecules/Select/components/Combobox.cjs.map +1 -1
- package/dist/components/molecules/Select/components/Combobox.js +8 -1
- package/dist/components/molecules/Select/components/Combobox.js.map +1 -1
- package/dist/components/molecules/Select/components/SelectItem.cjs +10 -1
- package/dist/components/molecules/Select/components/SelectItem.cjs.map +1 -1
- package/dist/components/molecules/Select/components/SelectItem.d.ts.map +1 -1
- package/dist/components/molecules/Select/components/SelectItem.js +10 -1
- package/dist/components/molecules/Select/components/SelectItem.js.map +1 -1
- package/dist/components/molecules/Select/index.cjs +11 -1
- package/dist/components/molecules/Select/index.cjs.map +1 -1
- package/dist/components/molecules/Select/index.d.ts.map +1 -1
- package/dist/components/molecules/Select/index.js +11 -1
- package/dist/components/molecules/Select/index.js.map +1 -1
- package/dist/components/molecules/Select/multiSelect.utils.cjs +5 -1
- package/dist/components/molecules/Select/multiSelect.utils.cjs.map +1 -1
- package/dist/components/molecules/Select/multiSelect.utils.d.ts.map +1 -1
- package/dist/components/molecules/Select/multiSelect.utils.js +5 -1
- package/dist/components/molecules/Select/multiSelect.utils.js.map +1 -1
- package/dist/components/molecules/Tabs/index.cjs +14 -9
- package/dist/components/molecules/Tabs/index.cjs.map +1 -1
- package/dist/components/molecules/Tabs/index.d.ts +5 -3
- package/dist/components/molecules/Tabs/index.d.ts.map +1 -1
- package/dist/components/molecules/Tabs/index.js +15 -10
- package/dist/components/molecules/Tabs/index.js.map +1 -1
- package/dist/components/molecules/Tags/Tags.styles.cjs +66 -0
- package/dist/components/molecules/Tags/Tags.styles.cjs.map +1 -0
- package/dist/components/molecules/Tags/Tags.styles.d.ts +141 -0
- package/dist/components/molecules/Tags/Tags.styles.d.ts.map +1 -0
- package/dist/components/molecules/Tags/Tags.styles.js +64 -0
- package/dist/components/molecules/Tags/Tags.styles.js.map +1 -0
- package/dist/components/molecules/Tags/components/TagCheckbox.cjs +2 -1
- package/dist/components/molecules/Tags/components/TagCheckbox.cjs.map +1 -1
- package/dist/components/molecules/Tags/components/TagCheckbox.d.ts +2 -1
- package/dist/components/molecules/Tags/components/TagCheckbox.d.ts.map +1 -1
- package/dist/components/molecules/Tags/components/TagCheckbox.js +2 -1
- package/dist/components/molecules/Tags/components/TagCheckbox.js.map +1 -1
- package/dist/components/molecules/Tags/components/TagCloseX.cjs +2 -6
- package/dist/components/molecules/Tags/components/TagCloseX.cjs.map +1 -1
- package/dist/components/molecules/Tags/components/TagCloseX.d.ts +2 -1
- package/dist/components/molecules/Tags/components/TagCloseX.d.ts.map +1 -1
- package/dist/components/molecules/Tags/components/TagCloseX.js +2 -6
- package/dist/components/molecules/Tags/components/TagCloseX.js.map +1 -1
- package/dist/components/molecules/Tags/index.cjs +18 -48
- package/dist/components/molecules/Tags/index.cjs.map +1 -1
- package/dist/components/molecules/Tags/index.d.ts +12 -3
- package/dist/components/molecules/Tags/index.d.ts.map +1 -1
- package/dist/components/molecules/Tags/index.js +18 -48
- package/dist/components/molecules/Tags/index.js.map +1 -1
- package/dist/components/molecules/VerificationCodeInput/index.cjs +1 -1
- package/dist/components/molecules/VerificationCodeInput/index.cjs.map +1 -1
- package/dist/components/molecules/VerificationCodeInput/index.js +1 -1
- package/dist/components/molecules/VerificationCodeInput/index.js.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.cjs +4 -1
- package/dist/components/organisms/ApplicationHeader/index.cjs.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.d.ts.map +1 -1
- package/dist/components/organisms/ApplicationHeader/index.js +4 -1
- package/dist/components/organisms/ApplicationHeader/index.js.map +1 -1
- package/dist/components/organisms/Calendar/calendar.utils.cjs +14 -0
- package/dist/components/organisms/Calendar/calendar.utils.cjs.map +1 -1
- package/dist/components/organisms/Calendar/calendar.utils.d.ts +7 -0
- package/dist/components/organisms/Calendar/calendar.utils.d.ts.map +1 -1
- package/dist/components/organisms/Calendar/calendar.utils.js +14 -1
- package/dist/components/organisms/Calendar/calendar.utils.js.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarDayView.cjs +1 -1
- package/dist/components/organisms/Calendar/components/CalendarDayView.cjs.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarDayView.d.ts.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarDayView.js +2 -2
- package/dist/components/organisms/Calendar/components/CalendarDayView.js.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarMonthView.cjs +12 -5
- package/dist/components/organisms/Calendar/components/CalendarMonthView.cjs.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarMonthView.d.ts.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarMonthView.js +13 -6
- package/dist/components/organisms/Calendar/components/CalendarMonthView.js.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarWeekView.cjs +1 -1
- package/dist/components/organisms/Calendar/components/CalendarWeekView.cjs.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarWeekView.d.ts.map +1 -1
- package/dist/components/organisms/Calendar/components/CalendarWeekView.js +2 -2
- package/dist/components/organisms/Calendar/components/CalendarWeekView.js.map +1 -1
- package/dist/components/organisms/Charts/components/ChartsBase.cjs +28 -13
- package/dist/components/organisms/Charts/components/ChartsBase.cjs.map +1 -1
- package/dist/components/organisms/Charts/components/ChartsBase.d.ts.map +1 -1
- package/dist/components/organisms/Charts/components/ChartsBase.js +28 -13
- package/dist/components/organisms/Charts/components/ChartsBase.js.map +1 -1
- package/dist/components/organisms/Charts/components/Metrics.cjs +1 -1
- package/dist/components/organisms/Charts/components/Metrics.cjs.map +1 -1
- package/dist/components/organisms/Charts/components/Metrics.d.ts.map +1 -1
- package/dist/components/organisms/Charts/components/Metrics.js +1 -1
- package/dist/components/organisms/Charts/components/Metrics.js.map +1 -1
- package/dist/components/organisms/ColorPicker/index.cjs +8 -5
- package/dist/components/organisms/ColorPicker/index.cjs.map +1 -1
- package/dist/components/organisms/ColorPicker/index.d.ts.map +1 -1
- package/dist/components/organisms/ColorPicker/index.js +8 -5
- package/dist/components/organisms/ColorPicker/index.js.map +1 -1
- package/dist/components/organisms/Messaging/index.cjs +23 -5
- package/dist/components/organisms/Messaging/index.cjs.map +1 -1
- package/dist/components/organisms/Messaging/index.d.ts.map +1 -1
- package/dist/components/organisms/Messaging/index.js +24 -6
- package/dist/components/organisms/Messaging/index.js.map +1 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs +7 -2
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.cjs.map +1 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts +3 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.d.ts.map +1 -1
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js +8 -3
- package/dist/components/organisms/SidePanel/hooks/usePanelFocus.js.map +1 -1
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.cjs +121 -0
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.d.ts +30 -0
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.js +119 -0
- package/dist/components/organisms/SlideoutMenu/components/SlideoutShell.js.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.cjs +39 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.d.ts +23 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.js +37 -0
- package/dist/components/organisms/SlideoutMenu/hooks/useSlideoutState.js.map +1 -0
- package/dist/components/organisms/SlideoutMenu/index.cjs +34 -37
- package/dist/components/organisms/SlideoutMenu/index.cjs.map +1 -1
- package/dist/components/organisms/SlideoutMenu/index.d.ts +52 -41
- package/dist/components/organisms/SlideoutMenu/index.d.ts.map +1 -1
- package/dist/components/organisms/SlideoutMenu/index.js +35 -38
- package/dist/components/organisms/SlideoutMenu/index.js.map +1 -1
- package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.cjs +13 -0
- package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.d.ts +14 -0
- package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.js +11 -0
- package/dist/components/organisms/SlideoutMenu/providers/OverlayBounds.context.js.map +1 -0
- package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.cjs +9 -0
- package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.d.ts +13 -0
- package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.js +7 -0
- package/dist/components/organisms/SlideoutMenu/providers/SlideoutMenu.context.js.map +1 -0
- package/dist/components/organisms/SlideoutMenu/utilities/slideoutMenu.utils.cjs +52 -0
- package/dist/components/organisms/SlideoutMenu/utilities/slideoutMenu.utils.cjs.map +1 -0
- package/dist/components/organisms/SlideoutMenu/utilities/slideoutMenu.utils.d.ts +26 -0
- package/dist/components/organisms/SlideoutMenu/utilities/slideoutMenu.utils.d.ts.map +1 -0
- package/dist/components/organisms/SlideoutMenu/utilities/slideoutMenu.utils.js +47 -0
- package/dist/components/organisms/SlideoutMenu/utilities/slideoutMenu.utils.js.map +1 -0
- package/dist/components/organisms/Table/index.cjs +35 -5
- package/dist/components/organisms/Table/index.cjs.map +1 -1
- package/dist/components/organisms/Table/index.d.ts +8 -2
- package/dist/components/organisms/Table/index.d.ts.map +1 -1
- package/dist/components/organisms/Table/index.js +36 -6
- package/dist/components/organisms/Table/index.js.map +1 -1
- package/dist/components/organisms/Table/table.utils.cjs +37 -0
- package/dist/components/organisms/Table/table.utils.cjs.map +1 -0
- package/dist/components/organisms/Table/table.utils.d.ts +22 -0
- package/dist/components/organisms/Table/table.utils.d.ts.map +1 -0
- package/dist/components/organisms/Table/table.utils.js +33 -0
- package/dist/components/organisms/Table/table.utils.js.map +1 -0
- package/dist/components/organisms/TreeView/index.cjs +14 -7
- package/dist/components/organisms/TreeView/index.cjs.map +1 -1
- package/dist/components/organisms/TreeView/index.d.ts.map +1 -1
- package/dist/components/organisms/TreeView/index.js +14 -7
- package/dist/components/organisms/TreeView/index.js.map +1 -1
- package/dist/components/organisms/TreeView/treeView.utils.cjs +4 -1
- package/dist/components/organisms/TreeView/treeView.utils.cjs.map +1 -1
- package/dist/components/organisms/TreeView/treeView.utils.d.ts.map +1 -1
- package/dist/components/organisms/TreeView/treeView.utils.js +4 -1
- package/dist/components/organisms/TreeView/treeView.utils.js.map +1 -1
- package/dist/components/templates/AppShell/hooks/usePageAreaBounds.cjs +43 -0
- package/dist/components/templates/AppShell/hooks/usePageAreaBounds.cjs.map +1 -0
- package/dist/components/templates/AppShell/hooks/usePageAreaBounds.d.ts +12 -0
- package/dist/components/templates/AppShell/hooks/usePageAreaBounds.d.ts.map +1 -0
- package/dist/components/templates/AppShell/hooks/usePageAreaBounds.js +41 -0
- package/dist/components/templates/AppShell/hooks/usePageAreaBounds.js.map +1 -0
- package/dist/components/templates/AppShell/index.cjs +10 -6
- package/dist/components/templates/AppShell/index.cjs.map +1 -1
- package/dist/components/templates/AppShell/index.d.ts +1 -1
- package/dist/components/templates/AppShell/index.d.ts.map +1 -1
- package/dist/components/templates/AppShell/index.js +11 -7
- package/dist/components/templates/AppShell/index.js.map +1 -1
- package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.cjs +56 -0
- package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.cjs.map +1 -0
- package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.d.ts +26 -0
- package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.d.ts.map +1 -0
- package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.js +54 -0
- package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.js.map +1 -0
- package/dist/hooks/useDebouncedCallback/index.cjs +45 -0
- package/dist/hooks/useDebouncedCallback/index.cjs.map +1 -0
- package/dist/hooks/useDebouncedCallback/index.d.ts +18 -0
- package/dist/hooks/useDebouncedCallback/index.d.ts.map +1 -0
- package/dist/hooks/useDebouncedCallback/index.js +43 -0
- package/dist/hooks/useDebouncedCallback/index.js.map +1 -0
- package/dist/native/components/atoms/Checkbox/index.d.ts.map +1 -1
- package/dist/native/components/atoms/Checkbox/index.js +1 -1
- package/dist/native/components/atoms/Checkbox/index.js.map +1 -1
- package/dist/native/components/atoms/Dot/Dot.styles.d.ts +4 -0
- package/dist/native/components/atoms/Dot/Dot.styles.d.ts.map +1 -1
- package/dist/native/components/atoms/Dot/Dot.styles.js +1 -0
- package/dist/native/components/atoms/Dot/Dot.styles.js.map +1 -1
- package/dist/native/components/molecules/Tags/Tags.styles.d.ts +141 -0
- package/dist/native/components/molecules/Tags/Tags.styles.d.ts.map +1 -0
- package/dist/native/components/molecules/Tags/Tags.styles.js +92 -0
- package/dist/native/components/molecules/Tags/Tags.styles.js.map +1 -0
- package/dist/native/components/molecules/Tags/index.d.ts +95 -8
- package/dist/native/components/molecules/Tags/index.d.ts.map +1 -0
- package/dist/native/components/molecules/Tags/index.js +105 -0
- package/dist/native/components/molecules/Tags/index.js.map +1 -0
- package/dist/native/hooks/useDebouncedCallback/index.d.ts +18 -0
- package/dist/native/hooks/useDebouncedCallback/index.d.ts.map +1 -0
- package/dist/native/hooks/useDebouncedCallback/index.js +43 -0
- package/dist/native/hooks/useDebouncedCallback/index.js.map +1 -0
- package/dist/native/utilities/searchParamsUtils/index.d.ts +12 -0
- package/dist/utilities/searchParamsUtils/index.cjs +71 -0
- package/dist/utilities/searchParamsUtils/index.cjs.map +1 -0
- package/dist/utilities/searchParamsUtils/index.d.ts +61 -0
- package/dist/utilities/searchParamsUtils/index.d.ts.map +1 -0
- package/dist/utilities/searchParamsUtils/index.js +64 -0
- package/dist/utilities/searchParamsUtils/index.js.map +1 -0
- package/package.json +4 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { Badge } from '@flipdish/ui-library/components/atoms/Badge';
|
|
3
|
+
import { Skeleton } from '@flipdish/ui-library/components/atoms/Skeleton';
|
|
3
4
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
|
-
import { useTestIdPrefix,
|
|
5
|
+
import { useTestIdPrefix, joinTestId, slugifyTestId, useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
5
6
|
import { createContext, useContext, isValidElement } from 'react';
|
|
6
7
|
import { Tab as Tab$1, useSlottedContext, TabsContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1 } from 'react-aria-components';
|
|
7
8
|
import { isReactComponent } from '../../../utilities/__internal__/componentGuardUtils/componentGuard.utils.js';
|
|
@@ -72,19 +73,23 @@ const TabPanel = ({ 'data-testid': dataTestId, ...props }) => {
|
|
|
72
73
|
return (jsx(TabPanel$1, { ...props, "data-testid": panelTestId, className: (state) => cx('outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2', typeof props.className === 'function' ? props.className(state) : props.className) }));
|
|
73
74
|
};
|
|
74
75
|
/** A single selectable tab with an optional icon and badge, styled by its `TabList`; exposed as `Tabs.Item`. */
|
|
75
|
-
const Tab = ({ label, children, badge, icon: Icon, className, 'data-testid': dataTestId, ...otherProps }) => {
|
|
76
|
+
const Tab = ({ label, children, badge, isBadgeLoading, icon: Icon, className, 'data-testid': dataTestId, ...otherProps }) => {
|
|
76
77
|
const { size = 'sm', type = 'button-brand', fullWidth } = useContext(TabListContext);
|
|
77
78
|
const showPillColorBadge = type === 'underline' || type === 'line' || type === 'button-brand';
|
|
78
79
|
const prefix = useTestIdPrefix();
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
const resolveIdPart = () => {
|
|
81
|
+
if (otherProps.id !== undefined)
|
|
82
|
+
return slugifyTestId(String(otherProps.id));
|
|
83
|
+
if (typeof label === 'string')
|
|
84
|
+
return slugifyTestId(label);
|
|
85
|
+
if (typeof children === 'string')
|
|
86
|
+
return slugifyTestId(children);
|
|
87
|
+
return 'item';
|
|
88
|
+
};
|
|
89
|
+
const idPart = resolveIdPart();
|
|
86
90
|
const tabTestId = dataTestId ?? (prefix ? joinTestId(prefix, `tab-${idPart}`) : undefined);
|
|
87
|
-
return (jsx(Tab$1, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxs(Fragment, { children: [isValidElement(Icon) && Icon, isReactComponent(Icon) && jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxs("span", { className: cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label,
|
|
91
|
+
return (jsx(Tab$1, { ...otherProps, "data-testid": tabTestId, className: (prop) => cx('z-10 flex h-max cursor-pointer items-center justify-center gap-2 rounded-md whitespace-nowrap text-quaternary transition duration-100 ease-linear', 'group-orientation-vertical:justify-start', fullWidth && 'w-full flex-1', tabSizes[size].base, tabSizes[size][type], getTabStyles(prop)[type], typeof className === 'function' ? className(prop) : className), children: (state) => (jsxs(Fragment, { children: [isValidElement(Icon) && Icon, isReactComponent(Icon) && jsx(Icon, { "data-icon": true, className: "transition-inherit-all" }), jsxs("span", { className: cx('flex items-center gap-1.5', type !== 'line' && 'px-0.5'), children: [typeof children === 'function' ? children(state) : children || label, isBadgeLoading ? (jsx(Skeleton, { "aria-hidden": "true", width: 28, height: 22, radius: showPillColorBadge ? 'full' : 'md', className: cx(size === 'sm' && '-my-px'), "data-testid": tabTestId ? joinTestId(tabTestId, 'badge-loading') : undefined })) : (badge !== undefined &&
|
|
92
|
+
badge !== '' && (jsx(Badge, { size: "sm", type: showPillColorBadge ? 'pill-color' : 'modern', color: showPillColorBadge && (state.isHovered || state.isSelected) ? 'brand' : 'gray', className: cx('flex transition-inherit-all', size === 'sm' && '-my-px'), children: badge })))] })] })) }));
|
|
88
93
|
};
|
|
89
94
|
/**
|
|
90
95
|
* Organises related content into labelled panels, showing one at a time.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTabList","AriaTabPanel","AriaTab","_jsxs","_Fragment","AriaTabs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tabs/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTabList","AriaTabPanel","AriaTab","_jsxs","_Fragment","AriaTabs"],"mappings":"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"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Shared `Tags` style config, read by both `index.tsx` and `index.native.tsx`.
|
|
5
|
+
*
|
|
6
|
+
* Complete literal class names only — Tailwind scans source for whole candidates.
|
|
7
|
+
* `native` holds pixel sizes and light-mode hex colours that React Native needs as
|
|
8
|
+
* plain `style` / icon props (no `currentColor`, and `Text` ignores `className` under
|
|
9
|
+
* the current `react-native-css` preview).
|
|
10
|
+
*/
|
|
11
|
+
const styles = {
|
|
12
|
+
sizes: {
|
|
13
|
+
sm: {
|
|
14
|
+
root: {
|
|
15
|
+
base: 'px-2 py-0.75 text-xs font-medium',
|
|
16
|
+
withCheckbox: 'pl-1.25',
|
|
17
|
+
withAvatar: 'pl-1',
|
|
18
|
+
withDot: 'pl-1.5',
|
|
19
|
+
withCount: 'pr-1',
|
|
20
|
+
withClose: 'pr-1',
|
|
21
|
+
},
|
|
22
|
+
content: 'gap-1',
|
|
23
|
+
count: 'px-1 text-xs font-medium',
|
|
24
|
+
},
|
|
25
|
+
md: {
|
|
26
|
+
root: {
|
|
27
|
+
base: 'px-2.25 py-0.5 text-sm font-medium',
|
|
28
|
+
withCheckbox: 'pl-1',
|
|
29
|
+
withAvatar: 'pl-1.25',
|
|
30
|
+
withDot: 'pl-1.75',
|
|
31
|
+
withCount: 'pr-0.75',
|
|
32
|
+
withClose: 'pr-1',
|
|
33
|
+
},
|
|
34
|
+
content: 'gap-1.25',
|
|
35
|
+
count: 'px-1.25 text-xs font-medium',
|
|
36
|
+
},
|
|
37
|
+
lg: {
|
|
38
|
+
root: {
|
|
39
|
+
base: 'px-2.5 py-1 text-sm font-medium',
|
|
40
|
+
withCheckbox: 'pl-1.25',
|
|
41
|
+
withAvatar: 'pl-1.75',
|
|
42
|
+
withDot: 'pl-2.25',
|
|
43
|
+
withCount: 'pr-1',
|
|
44
|
+
withClose: 'pr-1',
|
|
45
|
+
},
|
|
46
|
+
content: 'gap-1.5',
|
|
47
|
+
count: 'px-1.5 text-sm font-medium',
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
/** Shared chrome for every tag root (size-specific padding lives under `sizes`). */
|
|
51
|
+
root: 'flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2',
|
|
52
|
+
close: {
|
|
53
|
+
sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
|
|
54
|
+
md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
|
|
55
|
+
lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
|
|
56
|
+
},
|
|
57
|
+
checkbox: {
|
|
58
|
+
sm: { root: 'size-3.5', icon: 'size-2.5' },
|
|
59
|
+
md: { root: 'size-4', icon: 'size-3' },
|
|
60
|
+
lg: { root: 'size-4.5', icon: 'size-3.5' },
|
|
61
|
+
},
|
|
62
|
+
avatar: 'relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary',
|
|
63
|
+
count: 'flex items-center justify-center rounded-[3px] bg-tertiary text-center'};
|
|
64
|
+
|
|
65
|
+
exports.styles = styles;
|
|
66
|
+
//# sourceMappingURL=Tags.styles.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tags.styles.cjs","sources":["../../../../src/components/molecules/Tags/Tags.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;;;;;;;AAOG;AACI,MAAM,MAAM,GAAG;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,kCAAkC;AACxC,gBAAA,YAAY,EAAE,SAAS;AACvB,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,OAAO,EAAE,QAAQ;AACjB,gBAAA,SAAS,EAAE,MAAM;AACjB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,KAAK,EAAE,0BAA0B;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,oCAAoC;AAC1C,gBAAA,YAAY,EAAE,MAAM;AACpB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,KAAK,EAAE,6BAA6B;AACrC,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,iCAAiC;AACvC,gBAAA,YAAY,EAAE,SAAS;AACvB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,SAAS,EAAE,MAAM;AACjB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,4BAA4B;AACpC,SAAA;AACF,KAAA;;AAED,IAAA,IAAI,EAAE,4NAA4N;IAGlO,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,EAAE;QACtD,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE;QACrD,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE;AAClD,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;QAC1C,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;QACtC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;AAC3C,KAAA;AACD,IAAA,MAAM,EAAE,2GAA2G;AACnH,IAAA,KAAK,EAAE;;"}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared `Tags` style config, read by both `index.tsx` and `index.native.tsx`.
|
|
3
|
+
*
|
|
4
|
+
* Complete literal class names only — Tailwind scans source for whole candidates.
|
|
5
|
+
* `native` holds pixel sizes and light-mode hex colours that React Native needs as
|
|
6
|
+
* plain `style` / icon props (no `currentColor`, and `Text` ignores `className` under
|
|
7
|
+
* the current `react-native-css` preview).
|
|
8
|
+
*/
|
|
9
|
+
export declare const styles: {
|
|
10
|
+
sizes: {
|
|
11
|
+
sm: {
|
|
12
|
+
root: {
|
|
13
|
+
base: string;
|
|
14
|
+
withCheckbox: string;
|
|
15
|
+
withAvatar: string;
|
|
16
|
+
withDot: string;
|
|
17
|
+
withCount: string;
|
|
18
|
+
withClose: string;
|
|
19
|
+
};
|
|
20
|
+
content: string;
|
|
21
|
+
count: string;
|
|
22
|
+
};
|
|
23
|
+
md: {
|
|
24
|
+
root: {
|
|
25
|
+
base: string;
|
|
26
|
+
withCheckbox: string;
|
|
27
|
+
withAvatar: string;
|
|
28
|
+
withDot: string;
|
|
29
|
+
withCount: string;
|
|
30
|
+
withClose: string;
|
|
31
|
+
};
|
|
32
|
+
content: string;
|
|
33
|
+
count: string;
|
|
34
|
+
};
|
|
35
|
+
lg: {
|
|
36
|
+
root: {
|
|
37
|
+
base: string;
|
|
38
|
+
withCheckbox: string;
|
|
39
|
+
withAvatar: string;
|
|
40
|
+
withDot: string;
|
|
41
|
+
withCount: string;
|
|
42
|
+
withClose: string;
|
|
43
|
+
};
|
|
44
|
+
content: string;
|
|
45
|
+
count: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
/** Shared chrome for every tag root (size-specific padding lives under `sizes`). */
|
|
49
|
+
root: string;
|
|
50
|
+
/** Native root drops web-only focus/transition utilities and uses a border instead of an inset ring. */
|
|
51
|
+
rootNative: string;
|
|
52
|
+
close: {
|
|
53
|
+
sm: {
|
|
54
|
+
root: string;
|
|
55
|
+
icon: string;
|
|
56
|
+
};
|
|
57
|
+
md: {
|
|
58
|
+
root: string;
|
|
59
|
+
icon: string;
|
|
60
|
+
};
|
|
61
|
+
lg: {
|
|
62
|
+
root: string;
|
|
63
|
+
icon: string;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
checkbox: {
|
|
67
|
+
sm: {
|
|
68
|
+
root: string;
|
|
69
|
+
icon: string;
|
|
70
|
+
};
|
|
71
|
+
md: {
|
|
72
|
+
root: string;
|
|
73
|
+
icon: string;
|
|
74
|
+
};
|
|
75
|
+
lg: {
|
|
76
|
+
root: string;
|
|
77
|
+
icon: string;
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
avatar: string;
|
|
81
|
+
count: string;
|
|
82
|
+
native: {
|
|
83
|
+
/** `text-secondary` → neutral-700 (light). */
|
|
84
|
+
labelColor: string;
|
|
85
|
+
/** `text-fg-quaternary` → neutral-400 (light) — close icon idle. */
|
|
86
|
+
closeIconColor: string;
|
|
87
|
+
/** `text-fg-quaternary_hover` → neutral-500 (light). */
|
|
88
|
+
closeIconColorPressed: string;
|
|
89
|
+
/** `text-fg-white` — checkbox glyph. */
|
|
90
|
+
checkColor: string;
|
|
91
|
+
labelText: {
|
|
92
|
+
sm: {
|
|
93
|
+
fontSize: number;
|
|
94
|
+
lineHeight: number;
|
|
95
|
+
};
|
|
96
|
+
md: {
|
|
97
|
+
fontSize: number;
|
|
98
|
+
lineHeight: number;
|
|
99
|
+
};
|
|
100
|
+
lg: {
|
|
101
|
+
fontSize: number;
|
|
102
|
+
lineHeight: number;
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
countText: {
|
|
106
|
+
sm: {
|
|
107
|
+
fontSize: number;
|
|
108
|
+
lineHeight: number;
|
|
109
|
+
};
|
|
110
|
+
md: {
|
|
111
|
+
fontSize: number;
|
|
112
|
+
lineHeight: number;
|
|
113
|
+
};
|
|
114
|
+
lg: {
|
|
115
|
+
fontSize: number;
|
|
116
|
+
lineHeight: number;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
/** Tailwind `size-N` → `N * 4` px for RN icon components. */
|
|
120
|
+
closeIconSize: {
|
|
121
|
+
readonly sm: 10;
|
|
122
|
+
readonly md: 12;
|
|
123
|
+
readonly lg: 14;
|
|
124
|
+
};
|
|
125
|
+
closeIconStroke: {
|
|
126
|
+
readonly sm: 3.6;
|
|
127
|
+
readonly md: 2.86;
|
|
128
|
+
readonly lg: 3;
|
|
129
|
+
};
|
|
130
|
+
checkIconSize: {
|
|
131
|
+
readonly sm: 10;
|
|
132
|
+
readonly md: 12;
|
|
133
|
+
readonly lg: 14;
|
|
134
|
+
};
|
|
135
|
+
/** Avatar is always `size-4` / icon `size-3` on web. */
|
|
136
|
+
avatarSize: number;
|
|
137
|
+
avatarIconSize: number;
|
|
138
|
+
};
|
|
139
|
+
};
|
|
140
|
+
export type TagSize = keyof typeof styles.sizes;
|
|
141
|
+
//# sourceMappingURL=Tags.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tags.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tags/Tags.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuCjB,oFAAoF;;IAEpF,wGAAwG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAetG,8CAA8C;;QAE9C,oEAAoE;;QAEpE,wDAAwD;;QAExD,wCAAwC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAYxC,6DAA6D;;;;;;;;;;;;;;;;QAI7D,wDAAwD;;;;CAI3D,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared `Tags` style config, read by both `index.tsx` and `index.native.tsx`.
|
|
3
|
+
*
|
|
4
|
+
* Complete literal class names only — Tailwind scans source for whole candidates.
|
|
5
|
+
* `native` holds pixel sizes and light-mode hex colours that React Native needs as
|
|
6
|
+
* plain `style` / icon props (no `currentColor`, and `Text` ignores `className` under
|
|
7
|
+
* the current `react-native-css` preview).
|
|
8
|
+
*/
|
|
9
|
+
const styles = {
|
|
10
|
+
sizes: {
|
|
11
|
+
sm: {
|
|
12
|
+
root: {
|
|
13
|
+
base: 'px-2 py-0.75 text-xs font-medium',
|
|
14
|
+
withCheckbox: 'pl-1.25',
|
|
15
|
+
withAvatar: 'pl-1',
|
|
16
|
+
withDot: 'pl-1.5',
|
|
17
|
+
withCount: 'pr-1',
|
|
18
|
+
withClose: 'pr-1',
|
|
19
|
+
},
|
|
20
|
+
content: 'gap-1',
|
|
21
|
+
count: 'px-1 text-xs font-medium',
|
|
22
|
+
},
|
|
23
|
+
md: {
|
|
24
|
+
root: {
|
|
25
|
+
base: 'px-2.25 py-0.5 text-sm font-medium',
|
|
26
|
+
withCheckbox: 'pl-1',
|
|
27
|
+
withAvatar: 'pl-1.25',
|
|
28
|
+
withDot: 'pl-1.75',
|
|
29
|
+
withCount: 'pr-0.75',
|
|
30
|
+
withClose: 'pr-1',
|
|
31
|
+
},
|
|
32
|
+
content: 'gap-1.25',
|
|
33
|
+
count: 'px-1.25 text-xs font-medium',
|
|
34
|
+
},
|
|
35
|
+
lg: {
|
|
36
|
+
root: {
|
|
37
|
+
base: 'px-2.5 py-1 text-sm font-medium',
|
|
38
|
+
withCheckbox: 'pl-1.25',
|
|
39
|
+
withAvatar: 'pl-1.75',
|
|
40
|
+
withDot: 'pl-2.25',
|
|
41
|
+
withCount: 'pr-1',
|
|
42
|
+
withClose: 'pr-1',
|
|
43
|
+
},
|
|
44
|
+
content: 'gap-1.5',
|
|
45
|
+
count: 'px-1.5 text-sm font-medium',
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
/** Shared chrome for every tag root (size-specific padding lives under `sizes`). */
|
|
49
|
+
root: 'flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2',
|
|
50
|
+
close: {
|
|
51
|
+
sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
|
|
52
|
+
md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
|
|
53
|
+
lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
|
|
54
|
+
},
|
|
55
|
+
checkbox: {
|
|
56
|
+
sm: { root: 'size-3.5', icon: 'size-2.5' },
|
|
57
|
+
md: { root: 'size-4', icon: 'size-3' },
|
|
58
|
+
lg: { root: 'size-4.5', icon: 'size-3.5' },
|
|
59
|
+
},
|
|
60
|
+
avatar: 'relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary',
|
|
61
|
+
count: 'flex items-center justify-center rounded-[3px] bg-tertiary text-center'};
|
|
62
|
+
|
|
63
|
+
export { styles };
|
|
64
|
+
//# sourceMappingURL=Tags.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tags.styles.js","sources":["../../../../src/components/molecules/Tags/Tags.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;AAOG;AACI,MAAM,MAAM,GAAG;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,kCAAkC;AACxC,gBAAA,YAAY,EAAE,SAAS;AACvB,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,OAAO,EAAE,QAAQ;AACjB,gBAAA,SAAS,EAAE,MAAM;AACjB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,KAAK,EAAE,0BAA0B;AAClC,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,oCAAoC;AAC1C,gBAAA,YAAY,EAAE,MAAM;AACpB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,KAAK,EAAE,6BAA6B;AACrC,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE;AACJ,gBAAA,IAAI,EAAE,iCAAiC;AACvC,gBAAA,YAAY,EAAE,SAAS;AACvB,gBAAA,UAAU,EAAE,SAAS;AACrB,gBAAA,OAAO,EAAE,SAAS;AAClB,gBAAA,SAAS,EAAE,MAAM;AACjB,gBAAA,SAAS,EAAE,MAAM;AAClB,aAAA;AACD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,4BAA4B;AACpC,SAAA;AACF,KAAA;;AAED,IAAA,IAAI,EAAE,4NAA4N;IAGlO,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,yBAAyB,EAAE;QACtD,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,wBAAwB,EAAE;QACrD,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE;AAClD,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;QAC1C,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;QACtC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;AAC3C,KAAA;AACD,IAAA,MAAM,EAAE,2GAA2G;AACnH,IAAA,KAAK,EAAE;;"}
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
5
|
+
var Tags_styles = require('../Tags.styles.cjs');
|
|
5
6
|
|
|
6
7
|
const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = 'sm' }) => {
|
|
7
|
-
return (jsxRuntime.jsx("div", { className: cx.cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset',
|
|
8
|
+
return (jsxRuntime.jsx("div", { className: cx.cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', Tags_styles.styles.checkbox[size].root, isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && 'outline-2 outline-offset-2 outline-focus-ring', className), children: jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx.cx('pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all', Tags_styles.styles.checkbox[size].icon, isSelected && 'opacity-100'), children: jsxRuntime.jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
|
|
8
9
|
};
|
|
9
10
|
TagCheckbox.displayName = 'TagCheckbox';
|
|
10
11
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCheckbox.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx","cx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagCheckbox.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx","cx","styles"],"mappings":";;;;;;AAaO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,wBACE,SAAS,EAAEC,KAAE,CACX,mHAAmH,EACnHC,kBAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDF,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAEC,KAAE,CACX,6EAA6E,EAC7EC,kBAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDF,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagCheckbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW;6DAAmE,gBAAgB;;CA2B1G,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
3
|
+
import { styles } from '../Tags.styles.js';
|
|
3
4
|
|
|
4
5
|
const TagCheckbox = ({ className, isFocused, isSelected, isDisabled, size = 'sm' }) => {
|
|
5
|
-
return (jsx("div", { className: cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset',
|
|
6
|
+
return (jsx("div", { className: cx('flex cursor-pointer appearance-none items-center justify-center rounded bg-primary ring-1 ring-primary ring-inset', styles.checkbox[size].root, isSelected && 'bg-brand-solid ring-brand-solid', isDisabled && 'cursor-not-allowed opacity-50', isDisabled && !isSelected && 'bg-tertiary', isFocused && 'outline-2 outline-offset-2 outline-focus-ring', className), children: jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx('pointer-events-none absolute text-fg-white opacity-0 transition-inherit-all', styles.checkbox[size].icon, isSelected && 'opacity-100'), children: jsx("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
|
|
6
7
|
};
|
|
7
8
|
TagCheckbox.displayName = 'TagCheckbox';
|
|
8
9
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCheckbox.js","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagCheckbox.js","sources":["../../../../../src/components/molecules/Tags/components/TagCheckbox.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAaO,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAoB,KAAI;IAC7G,QACEA,aACE,SAAS,EAAE,EAAE,CACX,mHAAmH,EACnH,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,iCAAiC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,UAAU,IAAI,CAAC,UAAU,IAAI,aAAa,EAC1C,SAAS,IAAI,+CAA+C,EAC5D,SAAS,CACV,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EACc,MAAM,EAClB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,EAAE,CACX,6EAA6E,EAC7E,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAC1B,UAAU,IAAI,aAAa,CAC5B,EAAA,QAAA,EAEDA,GAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,wCAAwC,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAA,CAAG,EAAA,CAClI,EAAA,CACF;AAEV;AACA,WAAW,CAAC,WAAW,GAAG,aAAa;;"}
|
|
@@ -4,14 +4,10 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var uiIcons = require('@flipdish/ui-icons');
|
|
5
5
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
6
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var Tags_styles = require('../Tags.styles.cjs');
|
|
7
8
|
|
|
8
|
-
const styles = {
|
|
9
|
-
sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
|
|
10
|
-
md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
|
|
11
|
-
lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
|
|
12
|
-
};
|
|
13
9
|
const TagCloseX = ({ size = 'md', className, ...otherProps }) => {
|
|
14
|
-
return (jsxRuntime.jsx(reactAriaComponents.Button, { slot: "remove", "aria-label": "Remove this tag", className: cx.cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles[size].root, className), ...otherProps, children: jsxRuntime.jsx(uiIcons.XClose, { className: cx.cx('transition-inherit-all', styles[size].icon) }) }));
|
|
10
|
+
return (jsxRuntime.jsx(reactAriaComponents.Button, { slot: "remove", "aria-label": "Remove this tag", className: cx.cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', Tags_styles.styles.close[size].root, className), ...otherProps, children: jsxRuntime.jsx(uiIcons.XClose, { className: cx.cx('transition-inherit-all', Tags_styles.styles.close[size].icon) }) }));
|
|
15
11
|
};
|
|
16
12
|
|
|
17
13
|
exports.TagCloseX = TagCloseX;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCloseX.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","cx","XClose"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagCloseX.cjs","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton","cx","styles","XClose"],"mappings":";;;;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,eAACC,0BAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,iBAAiB,EAC5B,SAAS,EAAEC,KAAE,CACX,wRAAwR,EACxRC,kBAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EACvB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdH,cAAA,CAACI,cAAM,IAAC,SAAS,EAAEF,KAAE,CAAC,wBAAwB,EAAEC,kBAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CACjE;AAEjB;;"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { RefAttributes } from 'react';
|
|
2
2
|
import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
|
|
3
|
+
import { type TagSize } from '../Tags.styles';
|
|
3
4
|
interface TagCloseXProps extends AriaButtonProps, RefAttributes<HTMLButtonElement> {
|
|
4
|
-
size?:
|
|
5
|
+
size?: TagSize;
|
|
5
6
|
className?: string;
|
|
6
7
|
}
|
|
7
8
|
export declare const TagCloseX: ({ size, className, ...otherProps }: TagCloseXProps) => import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCloseX.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"TagCloseX.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClG,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEtD,UAAU,cAAe,SAAQ,eAAe,EAAE,aAAa,CAAC,iBAAiB,CAAC;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAA2C,cAAc,gCAelF,CAAC"}
|
|
@@ -2,14 +2,10 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { XClose } from '@flipdish/ui-icons';
|
|
3
3
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
4
4
|
import { Button } from 'react-aria-components';
|
|
5
|
+
import { styles } from '../Tags.styles.js';
|
|
5
6
|
|
|
6
|
-
const styles = {
|
|
7
|
-
sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
|
|
8
|
-
md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
|
|
9
|
-
lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
|
|
10
|
-
};
|
|
11
7
|
const TagCloseX = ({ size = 'md', className, ...otherProps }) => {
|
|
12
|
-
return (jsx(Button, { slot: "remove", "aria-label": "Remove this tag", className: cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles[size].root, className), ...otherProps, children: jsx(XClose, { className: cx('transition-inherit-all', styles[size].icon) }) }));
|
|
8
|
+
return (jsx(Button, { slot: "remove", "aria-label": "Remove this tag", className: cx('flex cursor-pointer rounded-[3px] text-fg-quaternary outline-transparent transition duration-100 ease-linear hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:cursor-not-allowed', styles.close[size].root, className), ...otherProps, children: jsx(XClose, { className: cx('transition-inherit-all', styles.close[size].icon) }) }));
|
|
13
9
|
};
|
|
14
10
|
|
|
15
11
|
export { TagCloseX };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCloseX.js","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagCloseX.js","sources":["../../../../../src/components/molecules/Tags/components/TagCloseX.tsx"],"sourcesContent":[null],"names":["_jsx","AriaButton"],"mappings":";;;;;;AAaO,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB,KAAI;IACrF,QACEA,IAACC,MAAU,EAAA,EACT,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,iBAAiB,EAC5B,SAAS,EAAE,EAAE,CACX,wRAAwR,EACxR,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EACvB,SAAS,CACV,EAAA,GACG,UAAU,EAAA,QAAA,EAEdD,GAAA,CAAC,MAAM,IAAC,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAA,CAAI,EAAA,CACjE;AAEjB;;"}
|
|
@@ -9,11 +9,12 @@ var React = require('react');
|
|
|
9
9
|
var reactAriaComponents = require('react-aria-components');
|
|
10
10
|
var TagCheckbox = require('./components/TagCheckbox.cjs');
|
|
11
11
|
var TagCloseX = require('./components/TagCloseX.cjs');
|
|
12
|
+
var Tags_styles = require('./Tags.styles.cjs');
|
|
12
13
|
|
|
13
14
|
/** Small round avatar shown at the start of a `Tag`, falling back to a user icon when the image is missing or fails. */
|
|
14
15
|
const TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
|
|
15
16
|
const [isFailed, setIsFailed] = React.useState(false);
|
|
16
|
-
return (jsxRuntime.jsx("div", { className: cx.cx(
|
|
17
|
+
return (jsxRuntime.jsx("div", { className: cx.cx(Tags_styles.styles.avatar, contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsxRuntime.jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsxRuntime.jsx(uiIcons.User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
|
|
17
18
|
};
|
|
18
19
|
const TagGroupContext = React.createContext({
|
|
19
20
|
selectionMode: 'none',
|
|
@@ -31,65 +32,34 @@ const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, 'data-
|
|
|
31
32
|
};
|
|
32
33
|
/** Container for the `Tag` items inside a `TagGroup`; a plain alias of react-aria-components' `TagList`. */
|
|
33
34
|
const TagList = reactAriaComponents.TagList;
|
|
34
|
-
const styles = {
|
|
35
|
-
sm: {
|
|
36
|
-
root: {
|
|
37
|
-
base: 'px-2 py-0.75 text-xs font-medium',
|
|
38
|
-
withCheckbox: 'pl-1.25',
|
|
39
|
-
withAvatar: 'pl-1',
|
|
40
|
-
withDot: 'pl-1.5',
|
|
41
|
-
withCount: 'pr-1',
|
|
42
|
-
withClose: 'pr-1',
|
|
43
|
-
},
|
|
44
|
-
content: 'gap-1',
|
|
45
|
-
count: 'px-1 text-xs font-medium',
|
|
46
|
-
},
|
|
47
|
-
md: {
|
|
48
|
-
root: {
|
|
49
|
-
base: 'px-2.25 py-0.5 text-sm font-medium',
|
|
50
|
-
withCheckbox: 'pl-1',
|
|
51
|
-
withAvatar: 'pl-1.25',
|
|
52
|
-
withDot: 'pl-1.75',
|
|
53
|
-
withCount: 'pr-0.75',
|
|
54
|
-
withClose: 'pr-1',
|
|
55
|
-
},
|
|
56
|
-
content: 'gap-1.25',
|
|
57
|
-
count: 'px-1.25 text-xs font-medium',
|
|
58
|
-
},
|
|
59
|
-
lg: {
|
|
60
|
-
root: {
|
|
61
|
-
base: 'px-2.5 py-1 text-sm font-medium',
|
|
62
|
-
withCheckbox: 'pl-1.25',
|
|
63
|
-
withAvatar: 'pl-1.75',
|
|
64
|
-
withDot: 'pl-2.25',
|
|
65
|
-
withCount: 'pr-1',
|
|
66
|
-
withClose: 'pr-1',
|
|
67
|
-
},
|
|
68
|
-
content: 'gap-1.5',
|
|
69
|
-
count: 'px-1.5 text-sm font-medium',
|
|
70
|
-
},
|
|
71
|
-
};
|
|
72
35
|
/** A single tag inside a `TagList`, with an optional avatar or dot, count, selection checkbox and remove button. */
|
|
73
|
-
const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
|
|
36
|
+
const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotColor = 'fg-success-secondary', dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
|
|
74
37
|
const context = React.useContext(TagGroupContext);
|
|
75
38
|
const prefix = testIdUtils.useTestIdPrefix();
|
|
76
39
|
const idPart = id !== undefined ? testIdUtils.slugifyTestId(String(id)) : 'tag';
|
|
77
40
|
const tagTestId = dataTestId ?? (prefix ? testIdUtils.joinTestId(prefix, `tag-${idPart}`) : undefined);
|
|
78
41
|
const closeTestId = tagTestId ? `${tagTestId}-close` : undefined;
|
|
79
|
-
const
|
|
80
|
-
|
|
42
|
+
const renderLeadingContent = () => {
|
|
43
|
+
if (avatarSrc)
|
|
44
|
+
return jsxRuntime.jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder });
|
|
45
|
+
if (dot)
|
|
46
|
+
return jsxRuntime.jsx(Dot.Dot, { color: dotColor, className: dotClassName, size: "sm" });
|
|
47
|
+
return null;
|
|
48
|
+
};
|
|
49
|
+
const leadingContent = renderLeadingContent();
|
|
50
|
+
return (jsxRuntime.jsx(reactAriaComponents.Tag, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx.cx(Tags_styles.styles.root, Tags_styles.styles.sizes[context.size].root.base,
|
|
81
51
|
// With avatar
|
|
82
|
-
avatarSrc && styles[context.size].root.withAvatar,
|
|
52
|
+
avatarSrc && Tags_styles.styles.sizes[context.size].root.withAvatar,
|
|
83
53
|
// With X button
|
|
84
|
-
(onClose || state.allowsRemoving) && styles[context.size].root.withClose,
|
|
54
|
+
(onClose || state.allowsRemoving) && Tags_styles.styles.sizes[context.size].root.withClose,
|
|
85
55
|
// With dot
|
|
86
|
-
dot && styles[context.size].root.withDot,
|
|
56
|
+
dot && Tags_styles.styles.sizes[context.size].root.withDot,
|
|
87
57
|
// With count
|
|
88
|
-
typeof count === 'number' && styles[context.size].root.withCount,
|
|
58
|
+
typeof count === 'number' && Tags_styles.styles.sizes[context.size].root.withCount,
|
|
89
59
|
// With checkbox
|
|
90
|
-
context.selectionMode !== 'none' && styles[context.size].root.withCheckbox,
|
|
60
|
+
context.selectionMode !== 'none' && Tags_styles.styles.sizes[context.size].root.withCheckbox,
|
|
91
61
|
// Disabled
|
|
92
|
-
isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsxRuntime.jsx(TagCheckbox.TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' &&
|
|
62
|
+
isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: cx.cx('flex items-center gap-1', Tags_styles.styles.sizes[context.size].content), children: [context.selectionMode !== 'none' && jsxRuntime.jsx(TagCheckbox.TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && jsxRuntime.jsx("span", { className: cx.cx(Tags_styles.styles.count, Tags_styles.styles.sizes[context.size].count), children: count })] }), (onClose || allowsRemoving) && (jsxRuntime.jsx(TagCloseX.TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
|
|
93
63
|
};
|
|
94
64
|
|
|
95
65
|
exports.Tag = Tag;
|