@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.
- package/README.md +26 -22
- package/dist/cjs/Actions/index.d.ts +1 -2
- package/dist/cjs/Actions/index.js +10 -17
- package/dist/cjs/Fields/AutoComplete/AutoComplete.js +11 -11
- package/dist/cjs/Fields/DatePicker/DatePicker/DatePicker.js +68 -75
- package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePicker.js +69 -77
- package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +2 -3
- package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.js +14 -7
- package/dist/cjs/Fields/DatePicker/components/Display.d.ts +0 -1
- package/dist/cjs/Fields/DatePicker/components/Display.js +1 -3
- package/dist/cjs/Fields/DatePicker/components/FooterActions.d.ts +2 -2
- package/dist/cjs/Fields/DatePicker/components/FooterActions.js +5 -2
- package/dist/cjs/Fields/DatePicker/components/Popover.d.ts +13 -0
- package/dist/cjs/Fields/DatePicker/components/Popover.js +51 -0
- package/dist/cjs/Fields/DatePicker/components/index.d.ts +1 -1
- package/dist/cjs/Fields/DatePicker/components/index.js +4 -4
- package/dist/cjs/Fields/DatePicker/types.d.ts +3 -2
- package/dist/cjs/Fields/DatePicker/utils.js +2 -1
- package/dist/cjs/Helpers/ClickAwayContainer/ClickAwayContainer.d.ts +3 -0
- package/dist/cjs/Helpers/ClickAwayContainer/ClickAwayContainer.js +3 -0
- package/dist/cjs/Helpers/Separator/Separator.js +1 -4
- package/dist/cjs/Icons/index.d.ts +1 -1
- package/dist/cjs/Icons/index.js +6 -0
- package/dist/cjs/Layout/Tables/DataTable/DataTable.js +3 -15
- package/dist/cjs/Layout/Tables/DataTable/types.d.ts +0 -2
- package/dist/cjs/Overlay/Modal/Modal.d.ts +1 -1
- package/dist/cjs/Overlay/Modal/Modal.js +10 -5
- package/dist/cjs/Overlay/Popover/Popover.js +14 -5
- package/dist/cjs/Overlay/Popover/types.d.ts +32 -8
- package/dist/esm/Actions/index.d.ts +1 -2
- package/dist/esm/Actions/index.js +3 -2
- package/dist/esm/Fields/AutoComplete/AutoComplete.js +11 -11
- package/dist/esm/Fields/DatePicker/DatePicker/DatePicker.js +70 -77
- package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.js +71 -79
- package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.d.ts +2 -3
- package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePickerDisplay.js +14 -7
- package/dist/esm/Fields/DatePicker/components/Display.d.ts +0 -1
- package/dist/esm/Fields/DatePicker/components/Display.js +1 -3
- package/dist/esm/Fields/DatePicker/components/FooterActions.d.ts +2 -2
- package/dist/esm/Fields/DatePicker/components/FooterActions.js +5 -2
- package/dist/esm/Fields/DatePicker/components/Popover.d.ts +13 -0
- package/dist/esm/Fields/DatePicker/components/Popover.js +41 -0
- package/dist/esm/Fields/DatePicker/components/index.d.ts +1 -1
- package/dist/esm/Fields/DatePicker/components/index.js +1 -1
- package/dist/esm/Fields/DatePicker/types.d.ts +3 -2
- package/dist/esm/Fields/DatePicker/utils.js +2 -1
- package/dist/esm/Helpers/ClickAwayContainer/ClickAwayContainer.d.ts +3 -0
- package/dist/esm/Helpers/ClickAwayContainer/ClickAwayContainer.js +3 -0
- package/dist/esm/Helpers/Separator/Separator.js +1 -4
- package/dist/esm/Icons/index.d.ts +1 -1
- package/dist/esm/Icons/index.js +1 -1
- package/dist/esm/Layout/Tables/DataTable/DataTable.js +3 -15
- package/dist/esm/Layout/Tables/DataTable/types.d.ts +0 -2
- package/dist/esm/Overlay/Modal/Modal.d.ts +1 -1
- package/dist/esm/Overlay/Modal/Modal.js +10 -5
- package/dist/esm/Overlay/Popover/Popover.js +14 -5
- package/dist/esm/Overlay/Popover/types.d.ts +32 -8
- package/dist/satellite.min.css +1 -1
- package/package.json +16 -15
- package/dist/cjs/Fields/DatePicker/components/Modal.d.ts +0 -15
- package/dist/cjs/Fields/DatePicker/components/Modal.js +0 -66
- package/dist/esm/Fields/DatePicker/components/Modal.d.ts +0 -15
- 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
|
+
};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Locale as DateFnsLocale } from "date-fns";
|
2
|
-
import type {
|
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?:
|
20
|
+
modalPlacement?: DatePickerPopoverProps["placement"];
|
20
21
|
locale?: DatePickerLocale;
|
21
22
|
} & ({
|
22
23
|
editableYear?: false;
|
@@ -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";
|
package/dist/esm/Icons/index.js
CHANGED
@@ -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.
|
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.
|
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) {
|
@@ -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 '
|
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:
|
103
|
-
|
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-
|
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
|
-
|
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
|
67
|
-
* If
|
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 {};
|