@algolia/satellite 1.8.0 → 1.10.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.
Files changed (63) hide show
  1. package/README.md +26 -22
  2. package/dist/cjs/Actions/index.d.ts +1 -2
  3. package/dist/cjs/Actions/index.js +10 -17
  4. package/dist/cjs/Fields/AutoComplete/AutoComplete.js +11 -11
  5. package/dist/cjs/Fields/DatePicker/DatePicker/DatePicker.js +68 -75
  6. package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePicker.js +69 -77
  7. package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +2 -3
  8. package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.js +14 -7
  9. package/dist/cjs/Fields/DatePicker/components/Display.d.ts +0 -1
  10. package/dist/cjs/Fields/DatePicker/components/Display.js +1 -3
  11. package/dist/cjs/Fields/DatePicker/components/FooterActions.d.ts +2 -2
  12. package/dist/cjs/Fields/DatePicker/components/FooterActions.js +5 -2
  13. package/dist/cjs/Fields/DatePicker/components/Popover.d.ts +13 -0
  14. package/dist/cjs/Fields/DatePicker/components/Popover.js +51 -0
  15. package/dist/cjs/Fields/DatePicker/components/index.d.ts +1 -1
  16. package/dist/cjs/Fields/DatePicker/components/index.js +4 -4
  17. package/dist/cjs/Fields/DatePicker/types.d.ts +3 -2
  18. package/dist/cjs/Fields/DatePicker/utils.js +2 -1
  19. package/dist/cjs/Helpers/ClickAwayContainer/ClickAwayContainer.d.ts +3 -0
  20. package/dist/cjs/Helpers/ClickAwayContainer/ClickAwayContainer.js +3 -0
  21. package/dist/cjs/Helpers/Separator/Separator.js +1 -4
  22. package/dist/cjs/Icons/index.d.ts +1 -1
  23. package/dist/cjs/Icons/index.js +6 -0
  24. package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -15
  25. package/dist/cjs/Layout/Tables/DataTable/types.d.ts +0 -2
  26. package/dist/cjs/Overlay/Modal/Modal.d.ts +1 -1
  27. package/dist/cjs/Overlay/Modal/Modal.js +10 -5
  28. package/dist/cjs/Overlay/Popover/Popover.js +14 -5
  29. package/dist/cjs/Overlay/Popover/types.d.ts +32 -8
  30. package/dist/esm/Actions/index.d.ts +1 -2
  31. package/dist/esm/Actions/index.js +3 -2
  32. package/dist/esm/Fields/AutoComplete/AutoComplete.js +11 -11
  33. package/dist/esm/Fields/DatePicker/DatePicker/DatePicker.js +70 -77
  34. package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.js +71 -79
  35. package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +2 -3
  36. package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.js +14 -7
  37. package/dist/esm/Fields/DatePicker/components/Display.d.ts +0 -1
  38. package/dist/esm/Fields/DatePicker/components/Display.js +1 -3
  39. package/dist/esm/Fields/DatePicker/components/FooterActions.d.ts +2 -2
  40. package/dist/esm/Fields/DatePicker/components/FooterActions.js +5 -2
  41. package/dist/esm/Fields/DatePicker/components/Popover.d.ts +13 -0
  42. package/dist/esm/Fields/DatePicker/components/Popover.js +41 -0
  43. package/dist/esm/Fields/DatePicker/components/index.d.ts +1 -1
  44. package/dist/esm/Fields/DatePicker/components/index.js +1 -1
  45. package/dist/esm/Fields/DatePicker/types.d.ts +3 -2
  46. package/dist/esm/Fields/DatePicker/utils.js +2 -1
  47. package/dist/esm/Helpers/ClickAwayContainer/ClickAwayContainer.d.ts +3 -0
  48. package/dist/esm/Helpers/ClickAwayContainer/ClickAwayContainer.js +3 -0
  49. package/dist/esm/Helpers/Separator/Separator.js +1 -4
  50. package/dist/esm/Icons/index.d.ts +1 -1
  51. package/dist/esm/Icons/index.js +1 -1
  52. package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -15
  53. package/dist/esm/Layout/Tables/DataTable/types.d.ts +0 -2
  54. package/dist/esm/Overlay/Modal/Modal.d.ts +1 -1
  55. package/dist/esm/Overlay/Modal/Modal.js +10 -5
  56. package/dist/esm/Overlay/Popover/Popover.js +14 -5
  57. package/dist/esm/Overlay/Popover/types.d.ts +32 -8
  58. package/dist/satellite.min.css +1 -1
  59. package/package.json +16 -15
  60. package/dist/cjs/Fields/DatePicker/components/Modal.d.ts +0 -15
  61. package/dist/cjs/Fields/DatePicker/components/Modal.js +0 -66
  62. package/dist/esm/Fields/DatePicker/components/Modal.d.ts +0 -15
  63. package/dist/esm/Fields/DatePicker/components/Modal.js +0 -59
@@ -0,0 +1,41 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ var _templateObject;
4
+ import * as Popover from "@radix-ui/react-popover";
5
+ import cx from "clsx";
6
+ import { useCreatePortal } from "../../../Satellite";
7
+ import stl from "../../../styles/helpers/satellitePrefixer";
8
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
+ export var DatePickerPopover = function DatePickerPopover(_ref) {
10
+ var isOpen = _ref.isOpen,
11
+ onOpenChange = _ref.onOpenChange,
12
+ trigger = _ref.trigger,
13
+ children = _ref.children,
14
+ _ref$placement = _ref.placement,
15
+ placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
16
+ onOpenAutoFocus = _ref.onOpenAutoFocus,
17
+ title = _ref.title,
18
+ className = _ref.className;
19
+ var createPortal = useCreatePortal();
20
+ var _ref2 = placement.split("-"),
21
+ _ref3 = _slicedToArray(_ref2, 2),
22
+ side = _ref3[0],
23
+ align = _ref3[1];
24
+ return /*#__PURE__*/_jsxs(Popover.Root, {
25
+ open: isOpen,
26
+ onOpenChange: onOpenChange,
27
+ children: [/*#__PURE__*/_jsx(Popover.Trigger, {
28
+ asChild: true,
29
+ children: trigger
30
+ }), createPortal( /*#__PURE__*/_jsx(Popover.Content, {
31
+ side: side,
32
+ sideOffset: 16,
33
+ align: align,
34
+ collisionPadding: 16,
35
+ className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex bg-white shadow-z400 z-popover relative overflow-auto max-w-[var(--radix-popover-content-available-width)] max-h-[var(--radix-popover-content-available-height)]"]))), className),
36
+ onOpenAutoFocus: onOpenAutoFocus,
37
+ "aria-label": title,
38
+ children: children
39
+ }))]
40
+ });
41
+ };
@@ -3,5 +3,5 @@ export { DatePickerCalendar } from "./Calendar";
3
3
  export * from "./Display";
4
4
  export * from "./Footer";
5
5
  export * from "./FooterActions";
6
- export * from "./Modal";
6
+ export * from "./Popover";
7
7
  export * from "./SidePanel";
@@ -2,5 +2,5 @@ export { DatePickerCalendar } from "./Calendar";
2
2
  export * from "./Display";
3
3
  export * from "./Footer";
4
4
  export * from "./FooterActions";
5
- export * from "./Modal";
5
+ export * from "./Popover";
6
6
  export * from "./SidePanel";
@@ -1,5 +1,5 @@
1
1
  import type { Locale as DateFnsLocale } from "date-fns";
2
- import type { DatePickerModalProps } from "./components/Modal";
2
+ import type { DatePickerPopoverProps } from "./components";
3
3
  export declare type DatePickerLocale = {
4
4
  /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
5
5
  formatter?: DateFnsLocale;
@@ -14,9 +14,10 @@ export declare type DatePickerLocale = {
14
14
  apply?: string;
15
15
  nextMonth?: string;
16
16
  previousMonth?: string;
17
+ title?: string;
17
18
  };
18
19
  export declare type SharedDatePickerProps = {
19
- modalPlacement?: DatePickerModalProps["placement"];
20
+ modalPlacement?: DatePickerPopoverProps["placement"];
20
21
  locale?: DatePickerLocale;
21
22
  } & ({
22
23
  editableYear?: false;
@@ -8,5 +8,6 @@ export var DEFAULT_DATE_PICKER_LOCALE = {
8
8
  cancel: "Cancel",
9
9
  openButton: "Enter a date...",
10
10
  previousMonth: "Previous month",
11
- nextMonth: "Next month"
11
+ nextMonth: "Next month",
12
+ title: "Date Picker"
12
13
  };
@@ -22,6 +22,9 @@ export interface ClickAwayContainerProps {
22
22
  * Most libraries handling "click outside" functionality assume that the dom tree matches the React tree,
23
23
  * but it's not the case when using portals.
24
24
  * This component allows click-away functionality even when portals are involved.
25
+ *
26
+ * @deprecated This component is deprecated and will be removed in a future version.
27
+ * Please use the Popover component, which provides built-in click-away behavior and is more accessible.
25
28
  */
26
29
  export declare const ClickAwayContainer: VFC<ClickAwayContainerProps>;
27
30
  export {};
@@ -16,6 +16,9 @@ var AWAY_EVENTS = ["mousedown", "touchstart", "focusin"];
16
16
  * Most libraries handling "click outside" functionality assume that the dom tree matches the React tree,
17
17
  * but it's not the case when using portals.
18
18
  * This component allows click-away functionality even when portals are involved.
19
+ *
20
+ * @deprecated This component is deprecated and will be removed in a future version.
21
+ * Please use the Popover component, which provides built-in click-away behavior and is more accessible.
19
22
  */
20
23
  export var ClickAwayContainer = function ClickAwayContainer(_ref) {
21
24
  var element = _ref.element,
@@ -18,14 +18,11 @@ export var Separator = function Separator(_ref) {
18
18
  _ref$orientation = _ref.orientation,
19
19
  orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation;
20
20
  var interactiveProps = interactive ? {
21
- decorative: false,
22
21
  tabIndex: 0,
23
22
  "aria-valuemax": 100,
24
23
  "aria-valuemin": 0,
25
24
  "aria-valuenow": 50
26
- } : {
27
- decorative: true
28
- };
25
+ } : {};
29
26
  return /*#__PURE__*/_jsx(RadixSeparator.Root, _objectSpread({
30
27
  className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["separator"]))), className, interactive && stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["interactive"])))),
31
28
  orientation: orientation
@@ -17,4 +17,4 @@ export { QueryBreakdownIcon } from "./QueryBreakdownIcon";
17
17
  export { BulbIcon } from "./BulbIcon";
18
18
  export { TestingIcon } from "./TestingIcon";
19
19
  export { RocketIcon } from "./RocketIcon";
20
- export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, Landmark, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
20
+ export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, Landmark, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MergeIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
@@ -18,4 +18,4 @@ export { QueryBreakdownIcon } from "./QueryBreakdownIcon";
18
18
  export { BulbIcon } from "./BulbIcon";
19
19
  export { TestingIcon } from "./TestingIcon";
20
20
  export { RocketIcon } from "./RocketIcon";
21
- export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, Landmark, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
21
+ export { ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownCircleIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftCircleIcon, ArrowLeftIcon, ArrowRightCircleIcon, ArrowRightIcon, ArrowUpCircleIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BanIcon, BarChart2Icon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BookOpenIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChevronUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideCircleIcon, DivideIcon, DivideSquareIcon, DollarSignIcon, DownloadCloudIcon, DownloadIcon, DribbbleIcon, DropletIcon, Edit2Icon, Edit3Icon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileSearchIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FlaskConicalIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GithubIcon, GitlabIcon, GitMergeIcon, GitPullRequestIcon, GlobeIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, ImageOffIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, Landmark, LayersIcon, LayoutGridIcon, LayoutIcon, LifeBuoyIcon, Link2Icon, LinkedinIcon, LinkIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, Maximize2Icon, MaximizeIcon, MehIcon, MenuIcon, MergeIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, Minimize2Icon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, Navigation2Icon, NavigationIcon, OctagonIcon, PackageIcon, PaperclipIcon, PauseCircleIcon, PauseIcon, PenToolIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SearchXIcon, SendIcon, ServerCogIcon, ServerCrashIcon, ServerIcon, SettingsIcon, Share2Icon, ShareIcon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TableIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, Trash2Icon, TrashIcon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, UserXIcon, VideoIcon, VideoOffIcon, VoicemailIcon, Volume1Icon, Volume2Icon, VolumeIcon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, WrenchIcon, XCircleIcon, XIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
@@ -1,13 +1,12 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
1
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
3
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
6
6
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
7
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  import compact from "lodash/compact";
9
9
  import get from "lodash/get";
10
- import { useEffect, useState } from "react";
11
10
  import { Checkbox, RadioButton } from "../../../Fields";
12
11
  import { useLocale } from "../../../Satellite";
13
12
  import stl from "../../../styles/helpers/satellitePrefixer";
@@ -76,14 +75,6 @@ export var DataTable = function DataTable(_ref) {
76
75
  console.warn("You can only have one selected item at a time in single `selectMode`.");
77
76
  }
78
77
  }
79
- var _useState = useState(),
80
- _useState2 = _slicedToArray(_useState, 2),
81
- hoveredRowId = _useState2[0],
82
- setHoveredRowId = _useState2[1];
83
- useEffect(function () {
84
- // Reset hovered row when data changes to avoid inconsistent state
85
- setHoveredRowId(undefined);
86
- }, [data]);
87
78
  var computedColumns = compact([selectMode === "single" && {
88
79
  id: "_internal_singleSelect",
89
80
  accessor: "_internal_singleSelect",
@@ -100,7 +91,7 @@ export var DataTable = function DataTable(_ref) {
100
91
  children: /*#__PURE__*/_jsx(RadioButton, {
101
92
  defaultChecked: row.selected,
102
93
  disabled: !row.selectable,
103
- className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
94
+ className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", ""])), !row.selected && "select-none")
104
95
  })
105
96
  });
106
97
  },
@@ -139,7 +130,7 @@ export var DataTable = function DataTable(_ref) {
139
130
  children: /*#__PURE__*/_jsx(Checkbox, {
140
131
  checked: row.selected,
141
132
  disabled: !row.selectable,
142
- className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
133
+ className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), !row.selected && "select-none")
143
134
  })
144
135
  });
145
136
  },
@@ -158,14 +149,12 @@ export var DataTable = function DataTable(_ref) {
158
149
  var rows = data.map(function (item, index) {
159
150
  var _ref4;
160
151
  var id = typeof getItemIdInternal === "string" ? String(get(item, getItemIdInternal, DEFAULT_GET_ITEM_ID(item, index))) : getItemIdInternal(item, index);
161
- var hovered = hoveredRowId === id;
162
152
  var sanitizedSelection = (_ref4 = selectMode === "single" ? selection === null || selection === void 0 ? void 0 : selection.slice(0, 1) : selectMode === "none" ? [] : selection) !== null && _ref4 !== void 0 ? _ref4 : [];
163
153
  var selected = sanitizedSelection.includes(id);
164
154
  var selectable = selectMode !== "none" && (!canSelectItem || canSelectItem(item, index));
165
155
  return {
166
156
  item: item,
167
157
  id: id,
168
- hovered: hovered,
169
158
  selected: selected,
170
159
  selectable: selectable
171
160
  };
@@ -187,7 +176,6 @@ export var DataTable = function DataTable(_ref) {
187
176
  return false;
188
177
  };
189
178
  var onRowHoverChange = function onRowHoverChange(row) {
190
- setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
191
179
  onRowHoveredChanged === null || onRowHoveredChanged === void 0 || onRowHoveredChanged(row);
192
180
  };
193
181
  var onToggleSort = function onToggleSort(columnId, direction) {
@@ -9,8 +9,6 @@ export interface Row<Item> {
9
9
  item: Item;
10
10
  /** The row id */
11
11
  id: string;
12
- /** Is the row hovered? */
13
- hovered: boolean;
14
12
  /** Is the row selected? */
15
13
  selected: boolean;
16
14
  /** Can the row be selected? */
@@ -44,7 +44,7 @@ export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProp
44
44
  * The element that should receive focus once the `Modal` is opened.
45
45
  * If unspecified, the first focusable element will be focused.
46
46
  * If an element is passed, it will be focused.
47
- * If 'skip' is passed, the close button will be focused if present, with a fallback on the dialog element itself.
47
+ * If 'skipContent' is passed, the close button will be focused if present, with a fallback on the dialog element itself.
48
48
  */
49
49
  autoFocusOnOpenElement?: HTMLElement | null | "skipContent";
50
50
  children: ReactNode;
@@ -4,6 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  import * as Dialog from "@radix-ui/react-dialog";
7
+ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
7
8
  import cx from "clsx";
8
9
  import { Fragment, useRef } from "react";
9
10
  import { IconButton } from "../../Actions";
@@ -73,6 +74,7 @@ export var Modal = function Modal(_ref) {
73
74
  children: /*#__PURE__*/_jsx(Dialog.Content, {
74
75
  ref: dialogContentRef,
75
76
  className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex m-auto"])))),
77
+ "aria-describedby": undefined,
76
78
  onOpenAutoFocus: function onOpenAutoFocus(e) {
77
79
  var _closeButtonRef$curre;
78
80
  if (!autoFocusOnOpenElement) return;
@@ -88,8 +90,6 @@ export var Modal = function Modal(_ref) {
88
90
  autoFocusOnCloseElement.focus();
89
91
  }
90
92
  },
91
- "aria-label": !title ? locale.modalTitle : undefined,
92
- "aria-describedby": undefined,
93
93
  children: /*#__PURE__*/_jsx("div", {
94
94
  className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["modal-container"]))),
95
95
  children: /*#__PURE__*/_jsxs(Card, {
@@ -99,9 +99,14 @@ export var Modal = function Modal(_ref) {
99
99
  fullBleed: true,
100
100
  children: [/*#__PURE__*/_jsx("header", {
101
101
  className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["min-h-14 flex items-center justify-between space-x-2"]))), title ? stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-b border-grey-100 pl-8 pr-16"]))) : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["justify-end px-8"]))), !title && hideCloseIcon && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["hidden"])))),
102
- children: !!title && /*#__PURE__*/_jsx(Dialog.Title, {
103
- className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
104
- children: title
102
+ children: /*#__PURE__*/_jsx(Dialog.Title, {
103
+ asChild: true,
104
+ children: title ? /*#__PURE__*/_jsx("div", {
105
+ className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
106
+ children: title
107
+ }) : /*#__PURE__*/_jsx(VisuallyHidden, {
108
+ children: locale.modalTitle
109
+ })
105
110
  })
106
111
  }), /*#__PURE__*/_jsx("div", {
107
112
  className: cx(!fullBleed && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-10"])))),
@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
4
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
5
- var _excluded = ["children", "title", "subtitle", "content", "footer", "open", "onDismiss", "side", "sideOffset", "align", "alignOffset", "noArrow", "avoidCollisions", "autoFocusOnOpenElement", "locale"];
5
+ var _excluded = ["children", "title", "subtitle", "content", "footer", "open", "onDismiss", "side", "sideOffset", "align", "alignOffset", "noArrow", "noCloseButton", "avoidCollisions", "autoFocusOnOpenElement", "locale"];
6
6
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
7
7
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
8
8
  import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -43,6 +43,8 @@ export var Popover = function Popover(_ref) {
43
43
  alignOffset = _ref$alignOffset === void 0 ? 0 : _ref$alignOffset,
44
44
  _ref$noArrow = _ref.noArrow,
45
45
  noArrow = _ref$noArrow === void 0 ? false : _ref$noArrow,
46
+ _ref$noCloseButton = _ref.noCloseButton,
47
+ noCloseButton = _ref$noCloseButton === void 0 ? false : _ref$noCloseButton,
46
48
  _ref$avoidCollisions = _ref.avoidCollisions,
47
49
  avoidCollisions = _ref$avoidCollisions === void 0 ? true : _ref$avoidCollisions,
48
50
  autoFocusOnOpenElement = _ref.autoFocusOnOpenElement,
@@ -55,6 +57,7 @@ export var Popover = function Popover(_ref) {
55
57
  }, []);
56
58
  var isControlled = typeof open !== "undefined";
57
59
  var triggerRef = useRef(null);
60
+ var closeButtonRef = useRef(null);
58
61
  var createPortal = useCreatePortal();
59
62
  if (children.type === Fragment) {
60
63
  throw new Error("Popover component doesn't accept a Fragment as a child.");
@@ -71,16 +74,21 @@ export var Popover = function Popover(_ref) {
71
74
  asChild: true,
72
75
  children: children
73
76
  }), createPortal( /*#__PURE__*/_jsxs(PopoverPrimitive.Content, _objectSpread(_objectSpread({}, props), {}, {
74
- "aria-labelledby": titleId,
77
+ "aria-labelledby": title ? titleId : undefined,
75
78
  className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["text-grey-900 bg-white z-popover shadow-z200 min-w-48 max-w-128 rounded typo-display-body animate-slide"]))), props.className),
76
79
  side: side,
77
80
  sideOffset: 8 + sideOffset,
78
81
  align: align,
79
82
  alignOffset: alignOffset,
80
83
  avoidCollisions: avoidCollisions,
84
+ collisionPadding: 16,
81
85
  onOpenAutoFocus: function onOpenAutoFocus(e) {
82
86
  if (autoFocusOnOpenElement === false) {
83
87
  e.preventDefault();
88
+ } else if (autoFocusOnOpenElement === "skipContent") {
89
+ var _closeButtonRef$curre;
90
+ e.preventDefault();
91
+ (_closeButtonRef$curre = closeButtonRef.current) === null || _closeButtonRef$curre === void 0 || _closeButtonRef$curre.focus();
84
92
  } else if (autoFocusOnOpenElement instanceof HTMLElement) {
85
93
  e.preventDefault();
86
94
  autoFocusOnOpenElement.focus();
@@ -99,8 +107,8 @@ export var Popover = function Popover(_ref) {
99
107
  }
100
108
  },
101
109
  children: [/*#__PURE__*/_jsxs("div", {
102
- className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["relative p-4 flex flex-col gap-2 overflow-auto min-h-20 max-h-[calc(var(--radix-popover-content-available-height)-theme(spacing.4))]"]))),
103
- children: [/*#__PURE__*/_jsx("div", {
110
+ className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["relative p-4 flex flex-col gap-2 overflow-auto min-h-20 max-w-[var(--radix-popover-content-available-width)] max-h-[var(--radix-popover-content-available-height)]"]))),
111
+ children: [!!title && /*#__PURE__*/_jsx("div", {
104
112
  id: titleId,
105
113
  className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-semibold pr-8"]))),
106
114
  children: title
@@ -113,7 +121,8 @@ export var Popover = function Popover(_ref) {
113
121
  }), !!footer && /*#__PURE__*/_jsx("div", {
114
122
  className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["mt-2"]))),
115
123
  children: footer
116
- }), /*#__PURE__*/_jsx(PopoverPrimitive.Close, {
124
+ }), !noCloseButton && /*#__PURE__*/_jsx(PopoverPrimitive.Close, {
125
+ ref: closeButtonRef,
117
126
  className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["absolute top-2 right-2"]))),
118
127
  asChild: true,
119
128
  children: /*#__PURE__*/_jsx(IconButton, {
@@ -3,16 +3,12 @@ import type { HTMLAttributes, ReactElement, ReactNode } from "react";
3
3
  export declare type PopoverLocale = {
4
4
  dismissText?: string;
5
5
  };
6
- export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "content"> {
6
+ interface PopoverPropsBase extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "content" | "aria-label"> {
7
7
  /**
8
8
  * Defines the trigger element of the `Popover`.
9
9
  * It should be a button element.
10
10
  */
11
11
  children: ReactElement;
12
- /**
13
- * Defines the title of the `Popover`.
14
- */
15
- title: ReactNode;
16
12
  /**
17
13
  * Defines the subtitle of the `Popover`.
18
14
  */
@@ -57,18 +53,46 @@ export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
57
53
  * Defines whether the `Popover` arrow should be hidden.
58
54
  */
59
55
  noArrow?: boolean;
56
+ /**
57
+ * Defines whether the `Popover` close button should be hidden.
58
+ */
59
+ noCloseButton?: boolean;
60
60
  /**
61
61
  * Defines whether the `Popover` should avoid collisions with the viewport.
62
62
  */
63
63
  avoidCollisions?: boolean;
64
64
  /**
65
65
  * The element that should receive focus once the `Popover` is opened.
66
- * If `undefined` or `null` is passed, the first focusable element will be focused.
67
- * If `false`, no element will be focused.
66
+ * If unspecified, the first focusable element will be focused.
67
+ * If an element is passed, it will be focused.
68
+ * If `false`, no element will be focused automatically for you. You should manage focus yourself.
69
+ * If 'skipContent' is passed, the close button will be focused.
68
70
  */
69
- autoFocusOnOpenElement?: HTMLElement | null | false;
71
+ autoFocusOnOpenElement?: HTMLElement | null | false | "skipContent";
70
72
  /**
71
73
  * Defines the locale of the `Popover`.
72
74
  */
73
75
  locale?: PopoverLocale;
74
76
  }
77
+ declare type PopoverPropsWithTitle = {
78
+ /**
79
+ * Defines the title of the `Popover`.
80
+ */
81
+ title: ReactNode;
82
+ /**
83
+ * Defines the aria-label of the `Popover`.
84
+ */
85
+ "aria-label"?: string;
86
+ } & PopoverPropsBase;
87
+ declare type PopoverPropsWithAriaLabel = {
88
+ /**
89
+ * Defines the title of the `Popover`.
90
+ */
91
+ title?: undefined;
92
+ /**
93
+ * Defines the aria-label of the `Popover`.
94
+ */
95
+ "aria-label": string;
96
+ } & PopoverPropsBase;
97
+ export declare type PopoverProps = PopoverPropsWithTitle | PopoverPropsWithAriaLabel;
98
+ export {};