@frontify/fondue 12.0.0-beta.373 → 12.0.0-beta.375
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/ComponentEnum.es.js +1 -1
- package/dist/components/ComponentEnum.es.js.map +1 -1
- package/dist/components/SegmentedControls/SegmentedControls.es.js +78 -77
- package/dist/components/SegmentedControls/SegmentedControls.es.js.map +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/utilities/validation.es.js +12 -12
- package/dist/utilities/validation.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var d = /* @__PURE__ */ ((e) => (e["Fondue - Accordion"] = "Accordion", e["Fondue - AccordionHeader"] = "AccordionHeader", e["Fondue - AccordionHeaderIcon"] = "AccordionHeaderIcon", e["Fondue - AddBlockButton"] = "AddBlockButton", e["Fondue - AssetInput"] = "AssetInput", e["Fondue - AssetThumbnail"] = "AssetThumbnail", e["Fondue - Badge"] = "Badge", e["Fondue - BadgeStatusIcon"] = "BadgeStatusIcon", e["Fondue - Box"] = "Box", e["Fondue - BreadcrumbItem"] = "BreadcrumbItem", e["Fondue - Breadcrumbs"] = "Breadcrumbs", e["Fondue - CurrentBreadcrumbItem"] = "CurrentBreadcrumbItem", e["Fondue - FormattedBreadcrumbs"] = "FormattedBreadcrumbs", e["Fondue - Button"] = "Button", e["Fondue - ButtonGroup"] = "ButtonGroup", e["Fondue - Card"] = "Card", e["Fondue - Checkbox"] = "Checkbox", e["Fondue - Checklist"] = "Checklist", e["Fondue - CollapsibleWrap"] = "CollapsibleWrap", e["Fondue - ColorInputTitle"] = "ColorInputTitle", e["Fondue - ColorPickerFlyout"] = "ColorPickerFlyout", e["Fondue - ColorPickerTrigger"] = "ColorPickerTrigger", e["Fondue - BrandColorPicker"] = "BrandColorPicker", e["Fondue - ColorInput"] = "ColorInput", e["Fondue - ColorPicker"] = "ColorPicker", e["Fondue - ColorPreview"] = "ColorPreview", e["Fondue - CustomColorPicker"] = "CustomColorPicker", e["Fondue - Container"] = "Container", e["Fondue - DatePicker"] = "DatePicker", e["Fondue - DatePickerTrigger"] = "DatePickerTrigger", e["Fondue - Dialog"] = "Dialog", e["Fondue - DialogBody"] = "DialogBody", e["Fondue - DialogFooter"] = "DialogFooter", e["Fondue - DialogHeader"] = "DialogHeader", e["Fondue - Divider"] = "Divider", e["Fondue - DropZone"] = "DropZone", e["Fondue - Dropdown"] = "Dropdown", e["Fondue - EditableText"] = "EditableText", e["Fondue - FieldsetHeader"] = "FieldsetHeader", e["Fondue - Flex"] = "Flex", e["Fondue - Flyout"] = "Flyout", e["Fondue - FlyoutFooter"] = "FlyoutFooter", e["Fondue - Overlay"] = "Overlay", e["Fondue - Form"] = "Form", e["Fondue - FormControl"] = "FormControl", e["Fondue - FormField"] = "FormField", e["Fondue - FrontifyPattern"] = "FrontifyPattern", e["Fondue - Grid"] = "Grid", e["Fondue - InlineDialog"] = "InlineDialog", e["Fondue - InputLabel"] = "InputLabel", e["Fondue - LegacyCollectionItem"] = "LegacyCollectionItem", e["Fondue - LegacyOrderableList"] = "LegacyOrderableList", e["Fondue - LegacyTextarea"] = "LegacyTextarea", e["Fondue - BrightHeader"] = "BrightHeader", e["Fondue - LegacyTooltip"] = "LegacyTooltip", e["Fondue - LinkChooser"] = "LinkChooser", e["Fondue - NavigationMenu"] = "NavigationMenu", e["Fondue - Popover"] = "Popover", e["Fondue - SearchInput"] = "SearchInput", e["Fondue - SearchResultOption"] = "SearchResultOption", e["Fondue - SearchResultSection"] = "SearchResultSection", e["Fondue - SearchResultsList"] = "SearchResultsList", e["Fondue - LoadingBar"] = "LoadingBar", e["Fondue - LoadingCircle"] = "LoadingCircle", e["Fondue - Menu"] = "Menu", e["Fondue - MenuItem"] = "MenuItem", e["Fondue - MenuItemContent"] = "MenuItemContent", e["Fondue - Modal"] = "Modal", e["Fondue - ModalBody"] = "ModalBody", e["Fondue - ModalFooter"] = "ModalFooter", e["Fondue - ModalHeader"] = "ModalHeader", e["Fondue - ModalVisual"] = "ModalVisual", e["Fondue - MultiInput"] = "MultiInput", e["Fondue - MultiSelect"] = "MultiSelect", e["Fondue - NumberInput"] = "NumberInput", e["Fondue - OrderableList"] = "OrderableList", e["Fondue - OverflowMenu"] = "OverflowMenu", e["Fondue - Popper"] = "Popper", e["Fondue - Portal"] = "Portal", e["Fondue - RadioButton"] = "RadioButton", e["Fondue - RadioList"] = "RadioList", e["Fondue - RadioPill"] = "RadioPill", e["Fondue - RichTextEditor"] = "RichTextEditor", e["Fondue - ScrollWrapper"] = "ScrollWrapper", e["Fondue - SegmentedControls"] = "SegmentedControls", e["Fondue - Slider"] = "Slider", e["Fondue - Stack"] = "Stack", e["Fondue - Switch"] = "Switch", e["Fondue - Table"] = "Table", e["Fondue - TableCell"] = "TableCell", e["Fondue - TableColumnHeader"] = "TableColumnHeader", e["Fondue - TableHeaderRow"] = "TableHeaderRow", e["Fondue - TableRow"] = "TableRow", e["Fondue - TabItem"] = "TabItem", e["Fondue - Tabs"] = "Tabs", e["Fondue - Tag"] = "Tag", e["Fondue - TextInput"] = "TextInput", e["Fondue - Toast"] = "Toast", e["Fondue - types"] = "types", e["Fondue - Tooltip"] = "Tooltip", e["Fondue - TooltipIcon"] = "TooltipIcon", e["Fondue - Tree"] = "Tree", e["Fondue - Trigger"] = "Trigger", e))(d || {});
|
|
1
|
+
var d = /* @__PURE__ */ ((e) => (e["Fondue - Accordion"] = "Accordion", e["Fondue - AccordionHeader"] = "AccordionHeader", e["Fondue - AccordionHeaderIcon"] = "AccordionHeaderIcon", e["Fondue - AddBlockButton"] = "AddBlockButton", e["Fondue - AssetInput"] = "AssetInput", e["Fondue - AssetThumbnail"] = "AssetThumbnail", e["Fondue - Badge"] = "Badge", e["Fondue - BadgeStatusIcon"] = "BadgeStatusIcon", e["Fondue - Box"] = "Box", e["Fondue - BreadcrumbItem"] = "BreadcrumbItem", e["Fondue - Breadcrumbs"] = "Breadcrumbs", e["Fondue - CurrentBreadcrumbItem"] = "CurrentBreadcrumbItem", e["Fondue - FormattedBreadcrumbs"] = "FormattedBreadcrumbs", e["Fondue - Button"] = "Button", e["Fondue - ButtonGroup"] = "ButtonGroup", e["Fondue - Card"] = "Card", e["Fondue - Checkbox"] = "Checkbox", e["Fondue - Checklist"] = "Checklist", e["Fondue - CollapsibleWrap"] = "CollapsibleWrap", e["Fondue - ColorInputTitle"] = "ColorInputTitle", e["Fondue - ColorPickerFlyout"] = "ColorPickerFlyout", e["Fondue - ColorPickerTrigger"] = "ColorPickerTrigger", e["Fondue - BrandColorPicker"] = "BrandColorPicker", e["Fondue - ColorInput"] = "ColorInput", e["Fondue - ColorPicker"] = "ColorPicker", e["Fondue - ColorPreview"] = "ColorPreview", e["Fondue - CustomColorPicker"] = "CustomColorPicker", e["Fondue - Container"] = "Container", e["Fondue - DatePicker"] = "DatePicker", e["Fondue - DatePickerTrigger"] = "DatePickerTrigger", e["Fondue - Dialog"] = "Dialog", e["Fondue - DialogBody"] = "DialogBody", e["Fondue - DialogFooter"] = "DialogFooter", e["Fondue - DialogHeader"] = "DialogHeader", e["Fondue - Divider"] = "Divider", e["Fondue - DropZone"] = "DropZone", e["Fondue - Dropdown"] = "Dropdown", e["Fondue - EditableText"] = "EditableText", e["Fondue - FieldsetHeader"] = "FieldsetHeader", e["Fondue - Flex"] = "Flex", e["Fondue - Flyout"] = "Flyout", e["Fondue - FlyoutFooter"] = "FlyoutFooter", e["Fondue - Overlay"] = "Overlay", e["Fondue - Form"] = "Form", e["Fondue - FormControl"] = "FormControl", e["Fondue - FormField"] = "FormField", e["Fondue - FrontifyPattern"] = "FrontifyPattern", e["Fondue - Grid"] = "Grid", e["Fondue - InlineDialog"] = "InlineDialog", e["Fondue - InputLabel"] = "InputLabel", e["Fondue - LegacyCollectionItem"] = "LegacyCollectionItem", e["Fondue - LegacyOrderableList"] = "LegacyOrderableList", e["Fondue - LegacyTextarea"] = "LegacyTextarea", e["Fondue - BrightHeader"] = "BrightHeader", e["Fondue - LegacyTooltip"] = "LegacyTooltip", e["Fondue - LinkChooser"] = "LinkChooser", e["Fondue - NavigationMenu"] = "NavigationMenu", e["Fondue - Popover"] = "Popover", e["Fondue - SearchInput"] = "SearchInput", e["Fondue - SearchResultOption"] = "SearchResultOption", e["Fondue - SearchResultSection"] = "SearchResultSection", e["Fondue - SearchResultsList"] = "SearchResultsList", e["Fondue - LoadingBar"] = "LoadingBar", e["Fondue - LoadingCircle"] = "LoadingCircle", e["Fondue - Menu"] = "Menu", e["Fondue - MenuItem"] = "MenuItem", e["Fondue - MenuItemContent"] = "MenuItemContent", e["Fondue - Modal"] = "Modal", e["Fondue - ModalBody"] = "ModalBody", e["Fondue - ModalFooter"] = "ModalFooter", e["Fondue - ModalHeader"] = "ModalHeader", e["Fondue - ModalVisual"] = "ModalVisual", e["Fondue - MultiInput"] = "MultiInput", e["Fondue - MultiSelect"] = "MultiSelect", e["Fondue - NumberInput"] = "NumberInput", e["Fondue - OrderableList"] = "OrderableList", e["Fondue - OverflowMenu"] = "OverflowMenu", e["Fondue - PasswordInput"] = "PasswordInput", e["Fondue - Popper"] = "Popper", e["Fondue - Portal"] = "Portal", e["Fondue - RadioButton"] = "RadioButton", e["Fondue - RadioList"] = "RadioList", e["Fondue - RadioPill"] = "RadioPill", e["Fondue - RichTextEditor"] = "RichTextEditor", e["Fondue - ScrollWrapper"] = "ScrollWrapper", e["Fondue - SegmentedControls"] = "SegmentedControls", e["Fondue - Slider"] = "Slider", e["Fondue - Stack"] = "Stack", e["Fondue - Switch"] = "Switch", e["Fondue - Table"] = "Table", e["Fondue - TableCell"] = "TableCell", e["Fondue - TableColumnHeader"] = "TableColumnHeader", e["Fondue - TableHeaderRow"] = "TableHeaderRow", e["Fondue - TableRow"] = "TableRow", e["Fondue - TabItem"] = "TabItem", e["Fondue - Tabs"] = "Tabs", e["Fondue - Tag"] = "Tag", e["Fondue - TextInput"] = "TextInput", e["Fondue - Toast"] = "Toast", e["Fondue - types"] = "types", e["Fondue - Tooltip"] = "Tooltip", e["Fondue - TooltipIcon"] = "TooltipIcon", e["Fondue - Tree"] = "Tree", e["Fondue - Trigger"] = "Trigger", e))(d || {});
|
|
2
2
|
export {
|
|
3
3
|
d as ComponentEnum
|
|
4
4
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentEnum.es.js","sources":["../../src/components/ComponentEnum.ts"],"sourcesContent":["\n export enum ComponentEnum {\n \"Fondue - Accordion\" = \"Accordion\",\n\"Fondue - AccordionHeader\" = \"AccordionHeader\",\n\"Fondue - AccordionHeaderIcon\" = \"AccordionHeaderIcon\",\n\"Fondue - AddBlockButton\" = \"AddBlockButton\",\n\"Fondue - AssetInput\" = \"AssetInput\",\n\"Fondue - AssetThumbnail\" = \"AssetThumbnail\",\n\"Fondue - Badge\" = \"Badge\",\n\"Fondue - BadgeStatusIcon\" = \"BadgeStatusIcon\",\n\"Fondue - Box\" = \"Box\",\n\"Fondue - BreadcrumbItem\" = \"BreadcrumbItem\",\n\"Fondue - Breadcrumbs\" = \"Breadcrumbs\",\n\"Fondue - CurrentBreadcrumbItem\" = \"CurrentBreadcrumbItem\",\n\"Fondue - FormattedBreadcrumbs\" = \"FormattedBreadcrumbs\",\n\"Fondue - Button\" = \"Button\",\n\"Fondue - ButtonGroup\" = \"ButtonGroup\",\n\"Fondue - Card\" = \"Card\",\n\"Fondue - Checkbox\" = \"Checkbox\",\n\"Fondue - Checklist\" = \"Checklist\",\n\"Fondue - CollapsibleWrap\" = \"CollapsibleWrap\",\n\"Fondue - ColorInputTitle\" = \"ColorInputTitle\",\n\"Fondue - ColorPickerFlyout\" = \"ColorPickerFlyout\",\n\"Fondue - ColorPickerTrigger\" = \"ColorPickerTrigger\",\n\"Fondue - BrandColorPicker\" = \"BrandColorPicker\",\n\"Fondue - ColorInput\" = \"ColorInput\",\n\"Fondue - ColorPicker\" = \"ColorPicker\",\n\"Fondue - ColorPreview\" = \"ColorPreview\",\n\"Fondue - CustomColorPicker\" = \"CustomColorPicker\",\n\"Fondue - Container\" = \"Container\",\n\"Fondue - DatePicker\" = \"DatePicker\",\n\"Fondue - DatePickerTrigger\" = \"DatePickerTrigger\",\n\"Fondue - Dialog\" = \"Dialog\",\n\"Fondue - DialogBody\" = \"DialogBody\",\n\"Fondue - DialogFooter\" = \"DialogFooter\",\n\"Fondue - DialogHeader\" = \"DialogHeader\",\n\"Fondue - Divider\" = \"Divider\",\n\"Fondue - DropZone\" = \"DropZone\",\n\"Fondue - Dropdown\" = \"Dropdown\",\n\"Fondue - EditableText\" = \"EditableText\",\n\"Fondue - FieldsetHeader\" = \"FieldsetHeader\",\n\"Fondue - Flex\" = \"Flex\",\n\"Fondue - Flyout\" = \"Flyout\",\n\"Fondue - FlyoutFooter\" = \"FlyoutFooter\",\n\"Fondue - Overlay\" = \"Overlay\",\n\"Fondue - Form\" = \"Form\",\n\"Fondue - FormControl\" = \"FormControl\",\n\"Fondue - FormField\" = \"FormField\",\n\"Fondue - FrontifyPattern\" = \"FrontifyPattern\",\n\"Fondue - Grid\" = \"Grid\",\n\"Fondue - InlineDialog\" = \"InlineDialog\",\n\"Fondue - InputLabel\" = \"InputLabel\",\n\"Fondue - LegacyCollectionItem\" = \"LegacyCollectionItem\",\n\"Fondue - LegacyOrderableList\" = \"LegacyOrderableList\",\n\"Fondue - LegacyTextarea\" = \"LegacyTextarea\",\n\"Fondue - BrightHeader\" = \"BrightHeader\",\n\"Fondue - LegacyTooltip\" = \"LegacyTooltip\",\n\"Fondue - LinkChooser\" = \"LinkChooser\",\n\"Fondue - NavigationMenu\" = \"NavigationMenu\",\n\"Fondue - Popover\" = \"Popover\",\n\"Fondue - SearchInput\" = \"SearchInput\",\n\"Fondue - SearchResultOption\" = \"SearchResultOption\",\n\"Fondue - SearchResultSection\" = \"SearchResultSection\",\n\"Fondue - SearchResultsList\" = \"SearchResultsList\",\n\"Fondue - LoadingBar\" = \"LoadingBar\",\n\"Fondue - LoadingCircle\" = \"LoadingCircle\",\n\"Fondue - Menu\" = \"Menu\",\n\"Fondue - MenuItem\" = \"MenuItem\",\n\"Fondue - MenuItemContent\" = \"MenuItemContent\",\n\"Fondue - Modal\" = \"Modal\",\n\"Fondue - ModalBody\" = \"ModalBody\",\n\"Fondue - ModalFooter\" = \"ModalFooter\",\n\"Fondue - ModalHeader\" = \"ModalHeader\",\n\"Fondue - ModalVisual\" = \"ModalVisual\",\n\"Fondue - MultiInput\" = \"MultiInput\",\n\"Fondue - MultiSelect\" = \"MultiSelect\",\n\"Fondue - NumberInput\" = \"NumberInput\",\n\"Fondue - OrderableList\" = \"OrderableList\",\n\"Fondue - OverflowMenu\" = \"OverflowMenu\",\n\"Fondue - Popper\" = \"Popper\",\n\"Fondue - Portal\" = \"Portal\",\n\"Fondue - RadioButton\" = \"RadioButton\",\n\"Fondue - RadioList\" = \"RadioList\",\n\"Fondue - RadioPill\" = \"RadioPill\",\n\"Fondue - RichTextEditor\" = \"RichTextEditor\",\n\"Fondue - ScrollWrapper\" = \"ScrollWrapper\",\n\"Fondue - SegmentedControls\" = \"SegmentedControls\",\n\"Fondue - Slider\" = \"Slider\",\n\"Fondue - Stack\" = \"Stack\",\n\"Fondue - Switch\" = \"Switch\",\n\"Fondue - Table\" = \"Table\",\n\"Fondue - TableCell\" = \"TableCell\",\n\"Fondue - TableColumnHeader\" = \"TableColumnHeader\",\n\"Fondue - TableHeaderRow\" = \"TableHeaderRow\",\n\"Fondue - TableRow\" = \"TableRow\",\n\"Fondue - TabItem\" = \"TabItem\",\n\"Fondue - Tabs\" = \"Tabs\",\n\"Fondue - Tag\" = \"Tag\",\n\"Fondue - TextInput\" = \"TextInput\",\n\"Fondue - Toast\" = \"Toast\",\n\"Fondue - types\" = \"types\",\n\"Fondue - Tooltip\" = \"Tooltip\",\n\"Fondue - TooltipIcon\" = \"TooltipIcon\",\n\"Fondue - Tree\" = \"Tree\",\n\"Fondue - Trigger\" = \"Trigger\"\n };\n "],"names":["ComponentEnum"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ComponentEnum.es.js","sources":["../../src/components/ComponentEnum.ts"],"sourcesContent":["\n export enum ComponentEnum {\n \"Fondue - Accordion\" = \"Accordion\",\n\"Fondue - AccordionHeader\" = \"AccordionHeader\",\n\"Fondue - AccordionHeaderIcon\" = \"AccordionHeaderIcon\",\n\"Fondue - AddBlockButton\" = \"AddBlockButton\",\n\"Fondue - AssetInput\" = \"AssetInput\",\n\"Fondue - AssetThumbnail\" = \"AssetThumbnail\",\n\"Fondue - Badge\" = \"Badge\",\n\"Fondue - BadgeStatusIcon\" = \"BadgeStatusIcon\",\n\"Fondue - Box\" = \"Box\",\n\"Fondue - BreadcrumbItem\" = \"BreadcrumbItem\",\n\"Fondue - Breadcrumbs\" = \"Breadcrumbs\",\n\"Fondue - CurrentBreadcrumbItem\" = \"CurrentBreadcrumbItem\",\n\"Fondue - FormattedBreadcrumbs\" = \"FormattedBreadcrumbs\",\n\"Fondue - Button\" = \"Button\",\n\"Fondue - ButtonGroup\" = \"ButtonGroup\",\n\"Fondue - Card\" = \"Card\",\n\"Fondue - Checkbox\" = \"Checkbox\",\n\"Fondue - Checklist\" = \"Checklist\",\n\"Fondue - CollapsibleWrap\" = \"CollapsibleWrap\",\n\"Fondue - ColorInputTitle\" = \"ColorInputTitle\",\n\"Fondue - ColorPickerFlyout\" = \"ColorPickerFlyout\",\n\"Fondue - ColorPickerTrigger\" = \"ColorPickerTrigger\",\n\"Fondue - BrandColorPicker\" = \"BrandColorPicker\",\n\"Fondue - ColorInput\" = \"ColorInput\",\n\"Fondue - ColorPicker\" = \"ColorPicker\",\n\"Fondue - ColorPreview\" = \"ColorPreview\",\n\"Fondue - CustomColorPicker\" = \"CustomColorPicker\",\n\"Fondue - Container\" = \"Container\",\n\"Fondue - DatePicker\" = \"DatePicker\",\n\"Fondue - DatePickerTrigger\" = \"DatePickerTrigger\",\n\"Fondue - Dialog\" = \"Dialog\",\n\"Fondue - DialogBody\" = \"DialogBody\",\n\"Fondue - DialogFooter\" = \"DialogFooter\",\n\"Fondue - DialogHeader\" = \"DialogHeader\",\n\"Fondue - Divider\" = \"Divider\",\n\"Fondue - DropZone\" = \"DropZone\",\n\"Fondue - Dropdown\" = \"Dropdown\",\n\"Fondue - EditableText\" = \"EditableText\",\n\"Fondue - FieldsetHeader\" = \"FieldsetHeader\",\n\"Fondue - Flex\" = \"Flex\",\n\"Fondue - Flyout\" = \"Flyout\",\n\"Fondue - FlyoutFooter\" = \"FlyoutFooter\",\n\"Fondue - Overlay\" = \"Overlay\",\n\"Fondue - Form\" = \"Form\",\n\"Fondue - FormControl\" = \"FormControl\",\n\"Fondue - FormField\" = \"FormField\",\n\"Fondue - FrontifyPattern\" = \"FrontifyPattern\",\n\"Fondue - Grid\" = \"Grid\",\n\"Fondue - InlineDialog\" = \"InlineDialog\",\n\"Fondue - InputLabel\" = \"InputLabel\",\n\"Fondue - LegacyCollectionItem\" = \"LegacyCollectionItem\",\n\"Fondue - LegacyOrderableList\" = \"LegacyOrderableList\",\n\"Fondue - LegacyTextarea\" = \"LegacyTextarea\",\n\"Fondue - BrightHeader\" = \"BrightHeader\",\n\"Fondue - LegacyTooltip\" = \"LegacyTooltip\",\n\"Fondue - LinkChooser\" = \"LinkChooser\",\n\"Fondue - NavigationMenu\" = \"NavigationMenu\",\n\"Fondue - Popover\" = \"Popover\",\n\"Fondue - SearchInput\" = \"SearchInput\",\n\"Fondue - SearchResultOption\" = \"SearchResultOption\",\n\"Fondue - SearchResultSection\" = \"SearchResultSection\",\n\"Fondue - SearchResultsList\" = \"SearchResultsList\",\n\"Fondue - LoadingBar\" = \"LoadingBar\",\n\"Fondue - LoadingCircle\" = \"LoadingCircle\",\n\"Fondue - Menu\" = \"Menu\",\n\"Fondue - MenuItem\" = \"MenuItem\",\n\"Fondue - MenuItemContent\" = \"MenuItemContent\",\n\"Fondue - Modal\" = \"Modal\",\n\"Fondue - ModalBody\" = \"ModalBody\",\n\"Fondue - ModalFooter\" = \"ModalFooter\",\n\"Fondue - ModalHeader\" = \"ModalHeader\",\n\"Fondue - ModalVisual\" = \"ModalVisual\",\n\"Fondue - MultiInput\" = \"MultiInput\",\n\"Fondue - MultiSelect\" = \"MultiSelect\",\n\"Fondue - NumberInput\" = \"NumberInput\",\n\"Fondue - OrderableList\" = \"OrderableList\",\n\"Fondue - OverflowMenu\" = \"OverflowMenu\",\n\"Fondue - PasswordInput\" = \"PasswordInput\",\n\"Fondue - Popper\" = \"Popper\",\n\"Fondue - Portal\" = \"Portal\",\n\"Fondue - RadioButton\" = \"RadioButton\",\n\"Fondue - RadioList\" = \"RadioList\",\n\"Fondue - RadioPill\" = \"RadioPill\",\n\"Fondue - RichTextEditor\" = \"RichTextEditor\",\n\"Fondue - ScrollWrapper\" = \"ScrollWrapper\",\n\"Fondue - SegmentedControls\" = \"SegmentedControls\",\n\"Fondue - Slider\" = \"Slider\",\n\"Fondue - Stack\" = \"Stack\",\n\"Fondue - Switch\" = \"Switch\",\n\"Fondue - Table\" = \"Table\",\n\"Fondue - TableCell\" = \"TableCell\",\n\"Fondue - TableColumnHeader\" = \"TableColumnHeader\",\n\"Fondue - TableHeaderRow\" = \"TableHeaderRow\",\n\"Fondue - TableRow\" = \"TableRow\",\n\"Fondue - TabItem\" = \"TabItem\",\n\"Fondue - Tabs\" = \"Tabs\",\n\"Fondue - Tag\" = \"Tag\",\n\"Fondue - TextInput\" = \"TextInput\",\n\"Fondue - Toast\" = \"Toast\",\n\"Fondue - types\" = \"types\",\n\"Fondue - Tooltip\" = \"Tooltip\",\n\"Fondue - TooltipIcon\" = \"TooltipIcon\",\n\"Fondue - Tree\" = \"Tree\",\n\"Fondue - Trigger\" = \"Trigger\"\n };\n "],"names":["ComponentEnum"],"mappings":"AACoB,IAAAA,sBAAAA,OACRA,EAAA,oBAAuB,IAAA,aACnCA,EAAA,0BAA6B,IAAA,mBAC7BA,EAAA,8BAAiC,IAAA,uBACjCA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,qBAAwB,IAAA,cACxBA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,gBAAmB,IAAA,SACnBA,EAAA,0BAA6B,IAAA,mBAC7BA,EAAA,cAAiB,IAAA,OACjBA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,gCAAmC,IAAA,yBACnCA,EAAA,+BAAkC,IAAA,wBAClCA,EAAA,iBAAoB,IAAA,UACpBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,eAAkB,IAAA,QAClBA,EAAA,mBAAsB,IAAA,YACtBA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,0BAA6B,IAAA,mBAC7BA,EAAA,0BAA6B,IAAA,mBAC7BA,EAAA,4BAA+B,IAAA,qBAC/BA,EAAA,6BAAgC,IAAA,sBAChCA,EAAA,2BAA8B,IAAA,oBAC9BA,EAAA,qBAAwB,IAAA,cACxBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,4BAA+B,IAAA,qBAC/BA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,qBAAwB,IAAA,cACxBA,EAAA,4BAA+B,IAAA,qBAC/BA,EAAA,iBAAoB,IAAA,UACpBA,EAAA,qBAAwB,IAAA,cACxBA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,kBAAqB,IAAA,WACrBA,EAAA,mBAAsB,IAAA,YACtBA,EAAA,mBAAsB,IAAA,YACtBA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,eAAkB,IAAA,QAClBA,EAAA,iBAAoB,IAAA,UACpBA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,kBAAqB,IAAA,WACrBA,EAAA,eAAkB,IAAA,QAClBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,0BAA6B,IAAA,mBAC7BA,EAAA,eAAkB,IAAA,QAClBA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,qBAAwB,IAAA,cACxBA,EAAA,+BAAkC,IAAA,wBAClCA,EAAA,8BAAiC,IAAA,uBACjCA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,wBAA2B,IAAA,iBAC3BA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,kBAAqB,IAAA,WACrBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,6BAAgC,IAAA,sBAChCA,EAAA,8BAAiC,IAAA,uBACjCA,EAAA,4BAA+B,IAAA,qBAC/BA,EAAA,qBAAwB,IAAA,cACxBA,EAAA,wBAA2B,IAAA,iBAC3BA,EAAA,eAAkB,IAAA,QAClBA,EAAA,mBAAsB,IAAA,YACtBA,EAAA,0BAA6B,IAAA,mBAC7BA,EAAA,gBAAmB,IAAA,SACnBA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,qBAAwB,IAAA,cACxBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,wBAA2B,IAAA,iBAC3BA,EAAA,uBAA0B,IAAA,gBAC1BA,EAAA,wBAA2B,IAAA,iBAC3BA,EAAA,iBAAoB,IAAA,UACpBA,EAAA,iBAAoB,IAAA,UACpBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,wBAA2B,IAAA,iBAC3BA,EAAA,4BAA+B,IAAA,qBAC/BA,EAAA,iBAAoB,IAAA,UACpBA,EAAA,gBAAmB,IAAA,SACnBA,EAAA,iBAAoB,IAAA,UACpBA,EAAA,gBAAmB,IAAA,SACnBA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,4BAA+B,IAAA,qBAC/BA,EAAA,yBAA4B,IAAA,kBAC5BA,EAAA,mBAAsB,IAAA,YACtBA,EAAA,kBAAqB,IAAA,WACrBA,EAAA,eAAkB,IAAA,QAClBA,EAAA,cAAiB,IAAA,OACjBA,EAAA,oBAAuB,IAAA,aACvBA,EAAA,gBAAmB,IAAA,SACnBA,EAAA,gBAAmB,IAAA,SACnBA,EAAA,kBAAqB,IAAA,WACrBA,EAAA,sBAAyB,IAAA,eACzBA,EAAA,eAAkB,IAAA,QAClBA,EAAA,kBAAqB,IAAA,WAxGDA,IAAAA,KAAA,CAAA,CAAA;"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { useMemoizedId as
|
|
3
|
-
import { useFocusRing as
|
|
4
|
-
import { setInteractionModality as
|
|
5
|
-
import { useRadio as
|
|
6
|
-
import { VisuallyHidden as
|
|
7
|
-
import { useRadioGroupState as
|
|
8
|
-
import { FOCUS_STYLE as
|
|
9
|
-
import { merge as
|
|
10
|
-
import { motion as
|
|
11
|
-
import { forwardRef as
|
|
12
|
-
const h = (m) => m.icon !== void 0,
|
|
13
|
-
const { id: p, item: e, disabled:
|
|
1
|
+
import { jsx as r, jsxs as R } from "react/jsx-runtime";
|
|
2
|
+
import { useMemoizedId as F } from "../../hooks/useMemoizedId.es.js";
|
|
3
|
+
import { useFocusRing as M } from "@react-aria/focus";
|
|
4
|
+
import { setInteractionModality as P } from "@react-aria/interactions";
|
|
5
|
+
import { useRadio as $, useRadioGroup as z } from "@react-aria/radio";
|
|
6
|
+
import { VisuallyHidden as A } from "@react-aria/visually-hidden";
|
|
7
|
+
import { useRadioGroupState as B } from "@react-stately/radio";
|
|
8
|
+
import { FOCUS_STYLE as T } from "../../utilities/focusStyle.es.js";
|
|
9
|
+
import { merge as S } from "../../utilities/merge.es.js";
|
|
10
|
+
import { motion as X } from "framer-motion";
|
|
11
|
+
import { forwardRef as H, useRef as k, useState as O, useMemo as U, useCallback as I, useEffect as Y } from "react";
|
|
12
|
+
const h = (m) => m.icon !== void 0, D = H((m, u) => {
|
|
13
|
+
const { id: p, item: e, disabled: d, radioGroupState: n, size: o } = m, s = k(null), c = e.id === n.selectedValue, { inputProps: x } = $(
|
|
14
14
|
{
|
|
15
15
|
value: e.id,
|
|
16
16
|
"aria-label": h(e) ? e.ariaLabel : e.value.toString(),
|
|
17
|
-
isDisabled:
|
|
17
|
+
isDisabled: d,
|
|
18
18
|
id: c ? p : void 0
|
|
19
19
|
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
), { isFocusVisible: w, focusProps:
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
},
|
|
20
|
+
n,
|
|
21
|
+
s
|
|
22
|
+
), { isFocusVisible: w, focusProps: y } = M(), i = () => {
|
|
23
|
+
var b;
|
|
24
|
+
d || (n.setSelectedValue(e.id), (b = s.current) == null || b.focus(), P("pointer"));
|
|
25
|
+
}, C = () => {
|
|
26
26
|
switch (!0) {
|
|
27
27
|
case h(e):
|
|
28
28
|
return "fondue-segmented-controls-item-icon";
|
|
@@ -35,35 +35,35 @@ const h = (m) => m.icon !== void 0, k = T((m, f) => {
|
|
|
35
35
|
return /* @__PURE__ */ r(
|
|
36
36
|
"div",
|
|
37
37
|
{
|
|
38
|
-
ref:
|
|
39
|
-
className:
|
|
38
|
+
ref: u,
|
|
39
|
+
className: S([
|
|
40
40
|
"tw-relative",
|
|
41
41
|
"after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden",
|
|
42
|
-
w &&
|
|
42
|
+
w && T
|
|
43
43
|
]),
|
|
44
|
-
children: /* @__PURE__ */
|
|
44
|
+
children: /* @__PURE__ */ R(
|
|
45
45
|
"div",
|
|
46
46
|
{
|
|
47
47
|
role: "none",
|
|
48
|
-
onClick:
|
|
49
|
-
"data-test-id":
|
|
50
|
-
className:
|
|
48
|
+
onClick: i,
|
|
49
|
+
"data-test-id": C(),
|
|
50
|
+
className: S([
|
|
51
51
|
"tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center",
|
|
52
|
-
|
|
53
|
-
c && !
|
|
54
|
-
|
|
52
|
+
o === "small" ? "tw-px-2" : "tw-px-4",
|
|
53
|
+
c && !d ? "tw-text-text" : "tw-text-text-weak",
|
|
54
|
+
d ? "tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed" : "hover:tw-text-text hover:tw-cursor-pointer"
|
|
55
55
|
]),
|
|
56
56
|
children: [
|
|
57
|
-
/* @__PURE__ */ r(
|
|
57
|
+
/* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(
|
|
58
58
|
"input",
|
|
59
59
|
{
|
|
60
60
|
...x,
|
|
61
|
-
...
|
|
61
|
+
...y,
|
|
62
62
|
"data-test-id": "fondue-segmented-controls-input",
|
|
63
|
-
ref:
|
|
63
|
+
ref: s
|
|
64
64
|
}
|
|
65
65
|
) }),
|
|
66
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ R("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex", children: [
|
|
67
67
|
h(e) && /* @__PURE__ */ r("span", { className: "tw-leading-3", "aria-label": e.ariaLabel, children: e.icon }),
|
|
68
68
|
e.value && /* @__PURE__ */ r("span", { className: h(e) ? "tw-ml-2" : "", children: e.value.toString() })
|
|
69
69
|
] })
|
|
@@ -74,76 +74,77 @@ const h = (m) => m.icon !== void 0, k = T((m, f) => {
|
|
|
74
74
|
e.id
|
|
75
75
|
);
|
|
76
76
|
});
|
|
77
|
-
|
|
78
|
-
const
|
|
77
|
+
D.displayName = "SegmentedControlsItem";
|
|
78
|
+
const _ = ({
|
|
79
79
|
id: m,
|
|
80
|
-
items:
|
|
80
|
+
items: u,
|
|
81
81
|
activeItemId: p,
|
|
82
82
|
onChange: e,
|
|
83
|
-
ariaLabel:
|
|
84
|
-
disabled:
|
|
85
|
-
hugWidth:
|
|
86
|
-
size:
|
|
83
|
+
ariaLabel: d = "SegmentedControls",
|
|
84
|
+
disabled: n = !1,
|
|
85
|
+
hugWidth: o = !1,
|
|
86
|
+
size: s
|
|
87
87
|
}) => {
|
|
88
|
-
const c =
|
|
89
|
-
|
|
88
|
+
const c = F(m), x = { onChange: e, value: p, label: d, isDisabled: n }, w = B(x), { radioGroupProps: y } = z(x, w), i = k([]), [C, b] = O(null), G = U(() => u.map((t, a) => /* @__PURE__ */ r(
|
|
89
|
+
D,
|
|
90
90
|
{
|
|
91
91
|
id: c,
|
|
92
|
-
item:
|
|
93
|
-
disabled:
|
|
92
|
+
item: t,
|
|
93
|
+
disabled: n,
|
|
94
94
|
radioGroupState: w,
|
|
95
|
-
ref: (
|
|
96
|
-
size:
|
|
95
|
+
ref: (f) => i.current[a] = f,
|
|
96
|
+
size: s
|
|
97
97
|
},
|
|
98
|
-
`fondue-segmented-controls-${c}-item-${
|
|
99
|
-
)), [
|
|
100
|
-
var
|
|
101
|
-
let
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
98
|
+
`fondue-segmented-controls-${c}-item-${t.id}`
|
|
99
|
+
)), [u, c, n, w, s]), l = u.findIndex((t) => t.id === w.selectedValue), V = o ? "" : "tw-w-full", j = o ? "tw-flex" : "tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly", g = s === "small", N = l === i.current.length - 1, L = I(() => {
|
|
100
|
+
var a;
|
|
101
|
+
let t = o ? -1 : 0;
|
|
102
|
+
t -= g && N ? 1 : 0;
|
|
103
|
+
for (let f = 0; f < l; f++)
|
|
104
|
+
t += ((a = i.current[f]) == null ? void 0 : a.clientWidth) ?? 0;
|
|
105
|
+
return t -= N || o ? 0 : 1, `${t}px`;
|
|
106
|
+
}, [l, g, N, o]), E = I(() => {
|
|
107
|
+
var a;
|
|
108
|
+
const t = g || o ? -1 : 0;
|
|
109
|
+
return `${(((a = i.current[l]) == null ? void 0 : a.clientWidth) ?? 0) + t}px`;
|
|
110
|
+
}, [l, g, o]), v = I(() => {
|
|
111
|
+
const t = i.current ? { x: L(), width: E() } : { x: "0px", width: "0px" };
|
|
112
|
+
b(t);
|
|
113
|
+
}, [E, L]);
|
|
114
|
+
return Y(() => (l >= 0 && v(), window.addEventListener("resize", v), () => {
|
|
115
|
+
window.removeEventListener("resize", v);
|
|
116
|
+
}), [l, v]), /* @__PURE__ */ r("div", { className: "tw-flex", children: /* @__PURE__ */ R(
|
|
116
117
|
"fieldset",
|
|
117
118
|
{
|
|
118
|
-
...
|
|
119
|
+
...y,
|
|
119
120
|
"data-test-id": "fondue-segmented-controls",
|
|
120
|
-
className:
|
|
121
|
+
className: S([
|
|
121
122
|
"tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none",
|
|
122
|
-
|
|
123
|
-
|
|
123
|
+
V,
|
|
124
|
+
j
|
|
124
125
|
]),
|
|
125
126
|
children: [
|
|
126
127
|
/* @__PURE__ */ r(
|
|
127
|
-
|
|
128
|
+
X.div,
|
|
128
129
|
{
|
|
129
130
|
"aria-hidden": "true",
|
|
130
|
-
animate:
|
|
131
|
+
animate: C ?? { x: "0px", width: "0px" },
|
|
131
132
|
initial: !1,
|
|
132
133
|
transition: { type: "tween", duration: 0.3 },
|
|
133
134
|
hidden: !p,
|
|
134
|
-
className:
|
|
135
|
-
"tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none",
|
|
136
|
-
|
|
135
|
+
className: S([
|
|
136
|
+
"tw-absolute tw--inset-y-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none",
|
|
137
|
+
n ? "tw-border-line-x-strong hover:tw-cursor-not-allowed" : "tw-border-line-xx-strong tw-bg-base"
|
|
137
138
|
])
|
|
138
139
|
}
|
|
139
140
|
),
|
|
140
|
-
|
|
141
|
+
G
|
|
141
142
|
]
|
|
142
143
|
}
|
|
143
144
|
) });
|
|
144
145
|
};
|
|
145
|
-
|
|
146
|
+
_.displayName = "FondueSegmentedControls";
|
|
146
147
|
export {
|
|
147
|
-
|
|
148
|
+
_ as SegmentedControls
|
|
148
149
|
};
|
|
149
150
|
//# sourceMappingURL=SegmentedControls.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport { ReactElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nexport type IconItem = {\n id: string;\n icon: ReactElement<IconProps>;\n value?: string;\n ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n id: string;\n value: string | number;\n};\n\nexport type SegmentSize = 'small' | 'medium';\n\nexport type SegmentedControlsProps = {\n id?: string;\n items: (TextOrNumberItem | IconItem)[];\n activeItemId?: string;\n onChange: (id: string) => void;\n ariaLabel?: string;\n disabled?: boolean;\n hugWidth?: boolean;\n size?: SegmentSize;\n};\n\nconst isIconItem = (item: TextOrNumberItem | IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n id: string;\n item: TextOrNumberItem | IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n size?: SegmentSize;\n}\n\nconst SegmentedControlsItem = forwardRef<HTMLDivElement, SegmentedControlsItemProps>((props, ref) => {\n const { id, item, disabled, radioGroupState, size } = props;\n const inputRef = useRef<HTMLInputElement | null>(null);\n const isActive = item.id === radioGroupState.selectedValue;\n const { inputProps } = useRadio(\n {\n value: item.id,\n 'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n isDisabled: disabled,\n id: isActive ? id : undefined,\n },\n radioGroupState,\n inputRef,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleMockLabelClick = () => {\n if (!disabled) {\n radioGroupState.setSelectedValue(item.id);\n inputRef.current?.focus();\n setInteractionModality('pointer');\n }\n };\n\n const getSegmentedControlsItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'fondue-segmented-controls-item-icon';\n case typeof item.value === 'string':\n return 'fondue-segmented-controls-item-text';\n default:\n return 'fondue-segmented-controls-item-number';\n }\n };\n\n return (\n <div\n key={item.id}\n ref={ref}\n className={merge([\n 'tw-relative',\n \"after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden\",\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n <div\n // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n // https://github.com/adobe/react-spectrum/issues/2380\n role=\"none\"\n onClick={handleMockLabelClick}\n data-test-id={getSegmentedControlsItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n size === 'small' ? 'tw-px-2' : 'tw-px-4',\n isActive && !disabled ? 'tw-text-text' : 'tw-text-text-weak',\n disabled\n ? 'tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed'\n : 'hover:tw-text-text hover:tw-cursor-pointer',\n ])}\n >\n <VisuallyHidden>\n <input\n {...inputProps}\n {...focusProps}\n data-test-id=\"fondue-segmented-controls-input\"\n ref={inputRef}\n />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && (\n <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n {item.icon}\n </span>\n )}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </div>\n );\n});\n\nSegmentedControlsItem.displayName = 'SegmentedControlsItem';\n\nexport const SegmentedControls = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'SegmentedControls',\n disabled = false,\n hugWidth = false,\n size,\n}: SegmentedControlsProps): ReactElement => {\n const id = useMemoizedId(propId);\n const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n const radioGroupState = useRadioGroupState(groupProps);\n const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n const [activeBorderDimensions, setActiveBorderDimensions] = useState<{ x: string; width: string } | null>(null);\n const itemElements = useMemo(() => {\n return items.map((item, index) => (\n <SegmentedControlsItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n ref={(el) => (itemsRef.current[index] = el)}\n key={`fondue-segmented-controls-${id}-item-${item.id}`}\n size={size}\n />\n ));\n }, [items, id, disabled, radioGroupState, size]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n const width = hugWidth ? '' : 'tw-w-full';\n const alignment = hugWidth ? 'tw-flex' : 'tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly';\n\n const getSliderX = useCallback(() => {\n const isSmallOrHugWidth = size === 'small' || hugWidth;\n let translateX = isSmallOrHugWidth ? -1 : 0;\n for (let i = 0; i < selectedIndex; i++) {\n translateX += itemsRef.current[i]?.clientWidth ?? 0;\n }\n\n return `${translateX}px`;\n }, [hugWidth, selectedIndex, size]);\n\n const getSliderWidth = useCallback(() => {\n const isLastElement = selectedIndex === itemsRef.current.length - 1;\n const width = isLastElement ? 1 : -1;\n\n return `${(itemsRef.current[selectedIndex]?.clientWidth ?? 0) + width}px`;\n }, [selectedIndex]);\n\n const setSliderDimensions = useCallback(() => {\n const dimensions = itemsRef.current ? { x: getSliderX(), width: getSliderWidth() } : { x: '0px', width: '0px' };\n setActiveBorderDimensions(dimensions);\n }, [getSliderWidth, getSliderX]);\n\n useEffect(() => {\n if (selectedIndex >= 0) {\n setSliderDimensions();\n }\n window.addEventListener('resize', setSliderDimensions);\n\n return () => {\n window.removeEventListener('resize', setSliderDimensions);\n };\n }, [selectedIndex, setSliderDimensions]);\n\n return (\n <div className=\"tw-flex\">\n <fieldset\n {...radioGroupProps}\n data-test-id=\"fondue-segmented-controls\"\n className={merge([\n 'tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none',\n width,\n alignment,\n ])}\n >\n <motion.div\n aria-hidden=\"true\"\n // div border is not included in width so it must be subtracted from translation.\n animate={activeBorderDimensions ?? { x: '0px', width: '0px' }}\n initial={false}\n transition={{ type: 'tween', duration: 0.3 }}\n hidden={!activeItemId}\n className={merge([\n 'tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n disabled\n ? 'tw-border-line-x-strong hover:tw-cursor-not-allowed'\n : 'tw-border-line-xx-strong tw-bg-base',\n ])}\n />\n {itemElements}\n </fieldset>\n </div>\n );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","forwardRef","props","ref","id","disabled","radioGroupState","size","inputRef","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","jsx","merge","FOCUS_STYLE","jsxs","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","hugWidth","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemsRef","activeBorderDimensions","setActiveBorderDimensions","useState","itemElements","useMemo","index","el","selectedIndex","width","alignment","getSliderX","useCallback","translateX","i","getSliderWidth","setSliderDimensions","dimensions","useEffect","motion"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport { ReactElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nexport type IconItem = {\n id: string;\n icon: ReactElement<IconProps>;\n value?: string;\n ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n id: string;\n value: string | number;\n};\n\nexport type SegmentSize = 'small' | 'medium';\n\nexport type SegmentedControlsProps = {\n id?: string;\n items: (TextOrNumberItem | IconItem)[];\n activeItemId?: string;\n onChange: (id: string) => void;\n ariaLabel?: string;\n disabled?: boolean;\n hugWidth?: boolean;\n size?: SegmentSize;\n};\n\nconst isIconItem = (item: TextOrNumberItem | IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n id: string;\n item: TextOrNumberItem | IconItem;\n disabled: boolean;\n radioGroupState: RadioGroupState;\n size?: SegmentSize;\n}\n\nconst SegmentedControlsItem = forwardRef<HTMLDivElement, SegmentedControlsItemProps>((props, ref) => {\n const { id, item, disabled, radioGroupState, size } = props;\n const inputRef = useRef<HTMLInputElement | null>(null);\n const isActive = item.id === radioGroupState.selectedValue;\n const { inputProps } = useRadio(\n {\n value: item.id,\n 'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n isDisabled: disabled,\n id: isActive ? id : undefined,\n },\n radioGroupState,\n inputRef,\n );\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleMockLabelClick = () => {\n if (!disabled) {\n radioGroupState.setSelectedValue(item.id);\n inputRef.current?.focus();\n setInteractionModality('pointer');\n }\n };\n\n const getSegmentedControlsItemTestId = () => {\n switch (true) {\n case isIconItem(item):\n return 'fondue-segmented-controls-item-icon';\n case typeof item.value === 'string':\n return 'fondue-segmented-controls-item-text';\n default:\n return 'fondue-segmented-controls-item-number';\n }\n };\n\n return (\n <div\n key={item.id}\n ref={ref}\n className={merge([\n 'tw-relative',\n \"after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden\",\n isFocusVisible && FOCUS_STYLE,\n ])}\n >\n <div\n // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n // https://github.com/adobe/react-spectrum/issues/2380\n role=\"none\"\n onClick={handleMockLabelClick}\n data-test-id={getSegmentedControlsItemTestId()}\n className={merge([\n 'tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n size === 'small' ? 'tw-px-2' : 'tw-px-4',\n isActive && !disabled ? 'tw-text-text' : 'tw-text-text-weak',\n disabled\n ? 'tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed'\n : 'hover:tw-text-text hover:tw-cursor-pointer',\n ])}\n >\n <VisuallyHidden>\n <input\n {...inputProps}\n {...focusProps}\n data-test-id=\"fondue-segmented-controls-input\"\n ref={inputRef}\n />\n </VisuallyHidden>\n <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n {isIconItem(item) && (\n <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n {item.icon}\n </span>\n )}\n {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n </span>\n </div>\n </div>\n );\n});\n\nSegmentedControlsItem.displayName = 'SegmentedControlsItem';\n\nexport const SegmentedControls = ({\n id: propId,\n items,\n activeItemId,\n onChange,\n ariaLabel = 'SegmentedControls',\n disabled = false,\n hugWidth = false,\n size,\n}: SegmentedControlsProps): ReactElement => {\n const id = useMemoizedId(propId);\n const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n const radioGroupState = useRadioGroupState(groupProps);\n const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n const [activeBorderDimensions, setActiveBorderDimensions] = useState<{ x: string; width: string } | null>(null);\n const itemElements = useMemo(() => {\n return items.map((item, index) => (\n <SegmentedControlsItem\n id={id}\n item={item}\n disabled={disabled}\n radioGroupState={radioGroupState}\n ref={(el) => (itemsRef.current[index] = el)}\n key={`fondue-segmented-controls-${id}-item-${item.id}`}\n size={size}\n />\n ));\n }, [items, id, disabled, radioGroupState, size]);\n const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n const width = hugWidth ? '' : 'tw-w-full';\n const alignment = hugWidth ? 'tw-flex' : 'tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly';\n const isSmall = size === 'small';\n const isLastElement = selectedIndex === itemsRef.current.length - 1;\n\n const getSliderX = useCallback(() => {\n let translateX = hugWidth ? -1 : 0;\n translateX -= isSmall && isLastElement ? 1 : 0;\n for (let i = 0; i < selectedIndex; i++) {\n translateX += itemsRef.current[i]?.clientWidth ?? 0;\n }\n\n translateX -= isLastElement || hugWidth ? 0 : 1;\n return `${translateX}px`;\n }, [selectedIndex, isSmall, isLastElement, hugWidth]);\n\n const getSliderWidth = useCallback(() => {\n const width = isSmall || hugWidth ? -1 : 0;\n\n return `${(itemsRef.current[selectedIndex]?.clientWidth ?? 0) + width}px`;\n }, [selectedIndex, isSmall, hugWidth]);\n\n const setSliderDimensions = useCallback(() => {\n const dimensions = itemsRef.current ? { x: getSliderX(), width: getSliderWidth() } : { x: '0px', width: '0px' };\n setActiveBorderDimensions(dimensions);\n }, [getSliderWidth, getSliderX]);\n\n useEffect(() => {\n if (selectedIndex >= 0) {\n setSliderDimensions();\n }\n window.addEventListener('resize', setSliderDimensions);\n\n return () => {\n window.removeEventListener('resize', setSliderDimensions);\n };\n }, [selectedIndex, setSliderDimensions]);\n\n return (\n <div className=\"tw-flex\">\n <fieldset\n {...radioGroupProps}\n data-test-id=\"fondue-segmented-controls\"\n className={merge([\n 'tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none',\n width,\n alignment,\n ])}\n >\n <motion.div\n aria-hidden=\"true\"\n // div border is not included in width so it must be subtracted from translation.\n animate={activeBorderDimensions ?? { x: '0px', width: '0px' }}\n initial={false}\n transition={{ type: 'tween', duration: 0.3 }}\n hidden={!activeItemId}\n className={merge([\n 'tw-absolute tw--inset-y-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n disabled\n ? 'tw-border-line-x-strong hover:tw-cursor-not-allowed'\n : 'tw-border-line-xx-strong tw-bg-base',\n ])}\n />\n {itemElements}\n </fieldset>\n </div>\n );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","forwardRef","props","ref","id","disabled","radioGroupState","size","inputRef","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","jsx","merge","FOCUS_STYLE","jsxs","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","hugWidth","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemsRef","activeBorderDimensions","setActiveBorderDimensions","useState","itemElements","useMemo","index","el","selectedIndex","width","alignment","isSmall","isLastElement","getSliderX","useCallback","translateX","i","getSliderWidth","setSliderDimensions","dimensions","useEffect","motion"],"mappings":"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"}
|