@primer/react
Version:
An implementation of GitHub's Primer Design System using React
650 lines (649 loc) • 26 kB
JavaScript
import { useProvidedRefOrCreate } from "../hooks/useProvidedRefOrCreate.js";
import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
import { isAlphabetKey } from "../hooks/useMnemonics.js";
import { useId as useId$1 } from "../hooks/useId.js";
import useSafeTimeout from "../hooks/useSafeTimeout.js";
import { IconButton } from "../Button/IconButton.js";
import { LinkButton } from "../Button/LinkButton.js";
import { ButtonComponent } from "../Button/Button.js";
import { useResponsiveValue } from "../hooks/useResponsiveValue.js";
import Heading from "../Heading/Heading.js";
import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
import { AnchoredOverlay } from "../AnchoredOverlay/AnchoredOverlay.js";
import { Banner } from "../Banner/index.js";
import { useFormControlContext } from "../FormControl/_FormControlContext.js";
import { FilteredActionListLoadingTypes } from "../FilteredActionList/constants.js";
import { FilteredActionList } from "../FilteredActionList/index.js";
import SelectPanel_module_css_default from "./SelectPanel.module.css.js";
import { SelectPanelMessage } from "./SelectPanelMessage.js";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { announce, announceFromElement } from "@primer/live-region-element";
import { SearchIcon, TriangleDownIcon, XIcon } from "@primer/octicons-react";
import { debounce } from "@github/mini-throttle";
//#region src/SelectPanel/SelectPanel.tsx
const SHORT_DELAY_MS = 500;
const LONG_DELAY_MS = 1e3;
const EMPTY_MESSAGE = {
title: "No items available",
description: ""
};
const DefaultEmptyMessage = /*#__PURE__*/ jsx(SelectPanelMessage, {
variant: "empty",
title: EMPTY_MESSAGE.title,
children: EMPTY_MESSAGE.description
}, "empty-message");
async function announceText(text, delayMs = SHORT_DELAY_MS) {
const liveRegion = document.querySelector("live-region");
liveRegion === null || liveRegion === void 0 || liveRegion.clear();
await announce(text, {
delayMs,
from: liveRegion ? liveRegion : void 0
});
}
async function announceLoading() {
await announceText("Loading.");
}
function isMultiSelectVariant(selected) {
return Array.isArray(selected);
}
const focusZoneSettings = { disabled: true };
const closeButtonProps = { "aria-label": "Cancel and close" };
const areItemsEqual = (itemA, itemB) => {
if (typeof itemA.id !== "undefined") return itemA.id === itemB.id;
else return itemA === itemB;
};
const doesItemsIncludeItem = (items, item) => {
return items.some((i) => areItemsEqual(i, item));
};
const defaultRenderAnchor = (props) => {
const { children, ...rest } = props;
return /*#__PURE__*/ jsx(ButtonComponent, {
trailingAction: TriangleDownIcon,
...rest,
children
});
};
defaultRenderAnchor.displayName = "defaultRenderAnchor";
function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorRef: externalAnchorRef, placeholder, placeholderText = "Filter items", inputLabel = placeholderText, selected, title = isMultiSelectVariant(selected) ? "Select items" : "Select an item", subtitle, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, footer, textInputProps, overlayProps, loading, initialLoadingType = "spinner", className, height, width, id, message, notice, onCancel, variant = "anchored", secondaryAction, showSelectedOptionsFirst = true, disableFullscreenOnNarrow, align, showSelectAll = false, focusPrependedElements, virtualized, displayInViewport, cssAnchorPositioningSettings, ...listProps }) {
var _listProps$groupMetad;
const titleId = useId$1();
const subtitleId = useId$1();
const [dataLoadedOnce, setDataLoadedOnce] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, void 0, "");
const { safeSetTimeout, safeClearTimeout } = useSafeTimeout();
const loadingDelayTimeoutId = useRef(null);
const loadingManagedInternally = loading === void 0;
const loadingManagedExternally = !loadingManagedInternally;
const [inputRef, setInputRef] = React.useState(null);
const [listContainerElement, setListContainerElement] = useState(null);
const [needsNoItemsAnnouncement, setNeedsNoItemsAnnouncement] = useState(false);
const isNarrowScreenSize = useResponsiveValue({
narrow: true,
regular: false,
wide: false
}, false);
const [selectedOnSort, setSelectedOnSort] = useState([]);
const initialHeightRef = useRef(0);
const initialScaleRef = useRef(1);
const noticeRef = useRef(null);
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
const [availablePanelHeight, setAvailablePanelHeight] = useState(void 0);
const KEYBOARD_VISIBILITY_THRESHOLD = 10;
const featureFlagFullScreenOnNarrow = useFeatureFlag("primer_react_select_panel_fullscreen_on_narrow");
const usingFullScreenOnNarrow = disableFullscreenOnNarrow ? false : featureFlagFullScreenOnNarrow;
const shouldOrderSelectedFirst = useFeatureFlag("primer_react_select_panel_order_selected_at_top") && showSelectedOptionsFirst;
const { isReferenced, labelId } = useFormControlContext();
const selectedValueId = id ? `${id}-selected-value` : void 0;
const isSingleSelectModal = variant === "modal" && !isMultiSelectVariant(selected);
const [intermediateSelected, setIntermediateSelected] = useState(isSingleSelectModal ? selected : void 0);
useEffect(() => {
setIntermediateSelected(isSingleSelectModal ? selected : void 0);
}, [
isSingleSelectModal,
open,
selected
]);
const onListContainerRefChanged = useCallback((node) => {
setListContainerElement(node);
if (!node && needsNoItemsAnnouncement) setNeedsNoItemsAnnouncement(false);
}, [needsNoItemsAnnouncement]);
const onInputRefChanged = useCallback((ref) => {
setInputRef(ref);
}, [setInputRef]);
const resetSort = useCallback(() => {
if (isMultiSelectVariant(selected)) setSelectedOnSort(selected);
else if (selected) setSelectedOnSort([selected]);
else setSelectedOnSort([]);
}, [selected]);
const onFilterChange = useCallback((value, e) => {
if (loadingManagedInternally) {
if (loadingDelayTimeoutId.current) safeClearTimeout(loadingDelayTimeoutId.current);
if (dataLoadedOnce) loadingDelayTimeoutId.current = safeSetTimeout(() => {
setIsLoading(true);
announceLoading();
}, LONG_DELAY_MS);
else {
if (items.length === 0) setIsLoading(true);
loadingDelayTimeoutId.current = safeSetTimeout(() => {
announceLoading();
}, LONG_DELAY_MS);
}
}
externalOnFilterChange(value, e);
setInternalFilterValue(value);
if (!value) resetSort();
}, [
loadingManagedInternally,
externalOnFilterChange,
setInternalFilterValue,
dataLoadedOnce,
safeSetTimeout,
safeClearTimeout,
items.length,
resetSort
]);
const itemsInViewSet = useMemo(() => {
const set = /* @__PURE__ */ new Set();
for (const item of items) if (item.id !== void 0) set.add(item.id);
else set.add(item);
return set;
}, [items]);
const handleSelectAllChange = useCallback((checked) => {
if (!isMultiSelectVariant(selected)) return;
const multiSelectOnChange = onSelectedChange;
const selectedItemsNotInFilteredView = selected.filter((selectedItem) => {
if (selectedItem.id !== void 0) return !itemsInViewSet.has(selectedItem.id);
return !itemsInViewSet.has(selectedItem);
});
if (checked) multiSelectOnChange([...selectedItemsNotInFilteredView, ...items]);
else multiSelectOnChange(selectedItemsNotInFilteredView);
}, [
items,
itemsInViewSet,
onSelectedChange,
selected
]);
useEffect(() => {
if (open && (variant === "modal" || isNarrowScreenSize && usingFullScreenOnNarrow)) {
const bodyOverflowStyle = document.body.style.overflow || "";
if (bodyOverflowStyle === "hidden") return;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = bodyOverflowStyle;
};
}
}, [
isNarrowScreenSize,
open,
usingFullScreenOnNarrow,
variant
]);
useEffect(() => {
if (open) {
if (items.length === 0 && !(isLoading || loading)) setNeedsNoItemsAnnouncement(true);
}
if (loadingManagedExternally) {
if (items.length > 0) setDataLoadedOnce(true);
return;
}
if (isLoading || items.length > 0) {
setIsLoading(false);
setDataLoadedOnce(true);
}
if (loadingDelayTimeoutId.current) safeClearTimeout(loadingDelayTimeoutId.current);
}, [items]);
useEffect(() => {
if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
const ref = inputRef.current;
if (open) ref.focus();
}
}, [inputRef, open]);
useEffect(() => {
if (loadingManagedExternally) {
if (isLoading) loadingDelayTimeoutId.current = safeSetTimeout(() => {
announceLoading();
}, LONG_DELAY_MS);
else if (loadingDelayTimeoutId.current) safeClearTimeout(loadingDelayTimeoutId.current);
}
}, [
isLoading,
loadingManagedExternally,
safeSetTimeout,
safeClearTimeout
]);
useEffect(() => {
if (loadingManagedExternally) return;
if (dataLoadedOnce) return;
if (open) {
if (items.length === 0) onFilterChange(filterValue, null);
}
}, [
open,
dataLoadedOnce,
onFilterChange,
filterValue,
items,
loadingManagedExternally,
listContainerElement
]);
useEffect(() => {
if (!window.visualViewport || !open || !isNarrowScreenSize) return;
initialHeightRef.current = window.visualViewport.height;
initialScaleRef.current = window.visualViewport.scale;
const handleViewportChange = debounce(() => {
if (window.visualViewport) {
if (!(window.visualViewport.scale !== initialScaleRef.current)) {
const currentHeight = window.visualViewport.height;
const keyboardVisible = initialHeightRef.current - currentHeight > KEYBOARD_VISIBILITY_THRESHOLD;
setIsKeyboardVisible(keyboardVisible);
setAvailablePanelHeight(keyboardVisible ? currentHeight : void 0);
}
}
}, 100);
if (window.visualViewport) {
window.visualViewport.addEventListener("resize", handleViewportChange);
window.visualViewport.addEventListener("scroll", handleViewportChange);
}
return () => {
if (window.visualViewport) {
window.visualViewport.removeEventListener("resize", handleViewportChange);
window.visualViewport.removeEventListener("scroll", handleViewportChange);
}
handleViewportChange.cancel();
};
}, [open, isNarrowScreenSize]);
useEffect(() => {
const announceNotice = async () => {
if (!noticeRef.current) return;
const liveRegion = document.querySelector("live-region");
liveRegion === null || liveRegion === void 0 || liveRegion.clear();
await announceFromElement(noticeRef.current, { from: liveRegion ? liveRegion : void 0 });
};
if (open && notice) announceNotice();
}, [notice, open]);
const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
const onOpen = useCallback((gesture) => onOpenChange(true, gesture), [onOpenChange]);
const onCancelRequested = useCallback(() => {
onOpenChange(false, "cancel");
}, [onOpenChange]);
const onClose = useCallback((gesture) => {
if (variant === "modal" && gesture === "click-outside") onCancel === null || onCancel === void 0 || onCancel();
if (gesture === "close") {
onCancel === null || onCancel === void 0 || onCancel();
onCancelRequested();
} else onOpenChange(false, gesture);
}, [
onOpenChange,
variant,
onCancel,
onCancelRequested
]);
const renderMenuAnchor = useMemo(() => {
if (renderAnchor === null) return null;
const selectedItems = Array.isArray(selected) ? selected : [...selected ? [selected] : []];
const selectedValueText = selectedItems.length ? selectedItems.map((item) => item.text).join(", ") : placeholder;
const shouldAutoWireLabel = isReferenced === false && Boolean(labelId) && Boolean(selectedValueId);
return (props) => {
return renderAnchor({
...props,
...shouldAutoWireLabel ? { "aria-labelledby": [labelId, selectedValueId].filter(Boolean).join(" ") } : {},
children: shouldAutoWireLabel ? /*#__PURE__*/ jsx("span", {
id: selectedValueId,
children: selectedValueText
}) : selectedValueText
});
};
}, [
placeholder,
renderAnchor,
selected,
isReferenced,
labelId,
selectedValueId
]);
const selectedItemsSet = useMemo(() => {
const set = /* @__PURE__ */ new Set();
if (isMultiSelectVariant(selected)) for (const item of selected) if (item.id !== void 0) set.add(item.id);
else set.add(item);
return set;
}, [selected]);
const isItemCurrentlySelected = useCallback((item) => {
if (isMultiSelectVariant(selected)) {
if (item.id !== void 0) return selectedItemsSet.has(item.id);
return selectedItemsSet.has(item);
}
if (isSingleSelectModal) return (intermediateSelected === null || intermediateSelected === void 0 ? void 0 : intermediateSelected.id) !== void 0 ? intermediateSelected.id === item.id : intermediateSelected === item;
return (selected === null || selected === void 0 ? void 0 : selected.id) !== void 0 ? selected.id === item.id : selected === item;
}, [
selected,
selectedItemsSet,
intermediateSelected,
isSingleSelectModal
]);
const itemsToRender = useMemo(() => {
const selectedOnSortSet = /* @__PURE__ */ new Set();
for (const item of selectedOnSort) if (item.id !== void 0) selectedOnSortSet.add(item.id);
else selectedOnSortSet.add(item);
const isSelectedForSort = (item) => {
if (item.id !== void 0) return selectedOnSortSet.has(item.id);
return selectedOnSortSet.has(item);
};
return items.map((item) => {
return {
...item,
role: "option",
id: item.id,
selected: "selected" in item && item.selected === void 0 ? void 0 : isItemCurrentlySelected(item),
onAction: (itemFromAction, event) => {
var _item$onAction;
(_item$onAction = item.onAction) === null || _item$onAction === void 0 || _item$onAction.call(item, itemFromAction, event);
if (event.defaultPrevented) return;
if (isMultiSelectVariant(selected)) {
const otherSelectedItems = selected.filter((selectedItem) => !areItemsEqual(selectedItem, item));
onSelectedChange(doesItemsIncludeItem(selected, item) ? otherSelectedItems : [...otherSelectedItems, item]);
return;
}
if (isSingleSelectModal) {
if ((intermediateSelected === null || intermediateSelected === void 0 ? void 0 : intermediateSelected.id) === item.id) setIntermediateSelected(void 0);
else setIntermediateSelected(item);
return;
}
onSelectedChange(item === selected ? void 0 : item);
onClose("selection");
}
};
}).sort((itemA, itemB) => {
if (shouldOrderSelectedFirst) {
const itemASelected = isSelectedForSort(itemA);
const itemBSelected = isSelectedForSort(itemB);
if (itemASelected && !itemBSelected) return -1;
else if (!itemASelected && itemBSelected) return 1;
}
return 0;
});
}, [
onClose,
onSelectedChange,
items,
selected,
isItemCurrentlySelected,
isSingleSelectModal,
intermediateSelected,
shouldOrderSelectedFirst,
selectedOnSort
]);
const prevItemsRef = useRef(items);
useEffect(() => {
if (prevItemsRef.current !== items) {
if (prevItemsRef.current.length === 0 && items.length > 0) resetSort();
prevItemsRef.current = items;
}
}, [items, resetSort]);
const prevOpenRef = useRef(open);
useEffect(() => {
if (prevOpenRef.current !== open) {
resetSort();
prevOpenRef.current = open;
}
}, [open, resetSort]);
const focusTrapSettings = useMemo(() => ({ initialFocusRef: inputRef || void 0 }), [inputRef]);
const extendedTextInputProps = useMemo(() => {
return {
className: SelectPanel_module_css_default.TextInput,
contrast: true,
leadingVisual: SearchIcon,
"aria-label": inputLabel,
...textInputProps
};
}, [inputLabel, textInputProps]);
const loadingType = () => {
if (dataLoadedOnce) return FilteredActionListLoadingTypes.input;
else if (initialLoadingType === "spinner") return FilteredActionListLoadingTypes.bodySpinner;
else return FilteredActionListLoadingTypes.bodySkeleton;
};
function getMessage() {
if (items.length === 0 && !message) return DefaultEmptyMessage;
else if (message) return /*#__PURE__*/ jsx(SelectPanelMessage, {
title: message.title,
variant: message.variant,
icon: message.icon,
action: message.action,
children: message.body
});
}
const showPermanentCancelSaveButtons = variant === "modal";
const showResponsiveCancelSaveButtons = variant !== "modal" && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel !== void 0;
const showResponsiveSaveAndCloseButton = variant !== "modal" && usingFullScreenOnNarrow && isMultiSelectVariant(selected) && onCancel === void 0;
const renderFooter = secondaryAction !== void 0 || showPermanentCancelSaveButtons || showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons;
const displayFooter = secondaryAction !== void 0 || showPermanentCancelSaveButtons ? "always" : showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? "only-small" : void 0;
const stretchSecondaryAction = showResponsiveSaveAndCloseButton || showResponsiveCancelSaveButtons ? "only-big" : showPermanentCancelSaveButtons ? "never" : "always";
const stretchSaveButton = showResponsiveSaveAndCloseButton && secondaryAction === void 0 ? "only-small" : "never";
const showXCloseIcon = (onCancel !== void 0 || !isMultiSelectVariant(selected)) && usingFullScreenOnNarrow;
const currentResponsiveVariant = useResponsiveValue(usingFullScreenOnNarrow ? {
regular: "anchored",
narrow: "fullscreen"
} : void 0, "anchored");
const preventBubbling = useCallback((event) => {
var _overlayProps$onKeyDo;
overlayProps === null || overlayProps === void 0 || (_overlayProps$onKeyDo = overlayProps.onKeyDown) == null || _overlayProps$onKeyDo.call(overlayProps, event);
const activeElement = document.activeElement;
if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") return;
if (event.ctrlKey || event.altKey || event.metaKey) return;
if (event.key !== "/" && !isAlphabetKey(event.nativeEvent)) return;
event.stopPropagation();
}, [overlayProps]);
return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(AnchoredOverlay, {
renderAnchor: renderMenuAnchor,
anchorRef,
align,
open,
onOpen,
onClose,
overlayProps: useMemo(() => ({
role: "dialog",
"aria-labelledby": titleId,
"aria-describedby": subtitle ? subtitleId : void 0,
...overlayProps,
...variant === "modal" ? {
top: "50vh",
left: "50vw",
anchorSide: void 0
} : {},
style: {
transform: variant === "modal" ? "translate(-50%, -50%)" : void 0,
...isKeyboardVisible ? { maxHeight: availablePanelHeight !== void 0 ? `${availablePanelHeight}px` : "auto" } : {}
},
onKeyDown: preventBubbling
}), [
titleId,
subtitle,
subtitleId,
overlayProps,
variant,
isKeyboardVisible,
availablePanelHeight,
preventBubbling
]),
focusTrapSettings,
focusZoneSettings,
height,
width,
anchorId: id,
variant: usingFullScreenOnNarrow ? {
regular: "anchored",
narrow: "fullscreen"
} : void 0,
pinPosition: !height,
className: SelectPanel_module_css_default.Overlay,
displayCloseButton: showXCloseIcon,
closeButtonProps,
displayInViewport,
cssAnchorPositioningSettings: {
...cssAnchorPositioningSettings,
disable: variant === "modal" || (cssAnchorPositioningSettings === null || cssAnchorPositioningSettings === void 0 ? void 0 : cssAnchorPositioningSettings.disable)
},
children: /*#__PURE__*/ jsxs("div", {
className: SelectPanel_module_css_default.Wrapper,
"data-variant": variant,
"data-component": "SelectPanel",
children: [
/*#__PURE__*/ jsxs("div", {
className: SelectPanel_module_css_default.Header,
"data-variant": currentResponsiveVariant,
"data-component": "SelectPanel.Header",
children: [/*#__PURE__*/ jsxs("div", { children: [/*#__PURE__*/ jsx(Heading, {
as: "h1",
id: titleId,
className: SelectPanel_module_css_default.Title,
"data-component": "SelectPanel.Title",
children: title
}), subtitle ? /*#__PURE__*/ jsx("div", {
id: subtitleId,
className: SelectPanel_module_css_default.Subtitle,
"data-component": "SelectPanel.Subtitle",
children: subtitle
}) : null] }), variant === "modal" && !isNarrowScreenSize ? /*#__PURE__*/ jsx(IconButton, {
type: "button",
variant: "invisible",
icon: XIcon,
"aria-label": "Cancel and close",
className: SelectPanel_module_css_default.ResponsiveCloseButton,
"data-component": "SelectPanel.CloseButton",
onClick: () => {
onCancel === null || onCancel === void 0 || onCancel();
onCancelRequested();
}
}) : null]
}),
notice && /*#__PURE__*/ jsx("div", {
ref: noticeRef,
"data-component": "SelectPanel.Notice",
children: /*#__PURE__*/ jsx(Banner, {
variant: notice.variant === "error" ? "critical" : notice.variant,
description: notice.text,
title: "Notice",
hideTitle: true,
className: SelectPanel_module_css_default.Notice,
layout: "compact"
})
}),
/*#__PURE__*/ jsx(FilteredActionList, {
filterValue,
onFilterChange,
onListContainerRefChanged,
onInputRefChanged,
placeholderText,
...listProps,
variant: (_listProps$groupMetad = listProps.groupMetadata) !== null && _listProps$groupMetad !== void 0 && _listProps$groupMetad.length ? "horizontal-inset" : "inset",
role: "listbox",
"aria-labelledby": listProps["aria-label"] ? void 0 : titleId,
"aria-multiselectable": isMultiSelectVariant(selected) ? "true" : "false",
selectionVariant: isSingleSelectModal ? "radio" : isMultiSelectVariant(selected) ? "multiple" : "single",
items: itemsToRender,
textInputProps: extendedTextInputProps,
loading: loading || isLoading && !message,
loadingType: loadingType(),
onSelectAllChange: showSelectAll ? handleSelectAllChange : void 0,
message: getMessage(),
messageText: {
title: (message === null || message === void 0 ? void 0 : message.title) || EMPTY_MESSAGE.title,
description: typeof (message === null || message === void 0 ? void 0 : message.body) === "string" ? message.body : EMPTY_MESSAGE.description || EMPTY_MESSAGE.description
},
fullScreenOnNarrow: usingFullScreenOnNarrow,
className: clsx(className, SelectPanel_module_css_default.FilteredActionList),
focusPrependedElements,
virtualized
}),
footer ? /*#__PURE__*/ jsx("div", {
className: SelectPanel_module_css_default.Footer,
"data-component": "SelectPanel.Footer",
children: footer
}) : renderFooter ? /*#__PURE__*/ jsxs("div", {
"data-display-footer": displayFooter,
"data-stretch-secondary-action": stretchSecondaryAction,
"data-stretch-save-button": stretchSaveButton,
className: clsx(SelectPanel_module_css_default.Footer, SelectPanel_module_css_default.ResponsiveFooter),
"data-component": "SelectPanel.Footer",
children: [
/*#__PURE__*/ jsx("div", {
"data-stretch-secondary-action": stretchSecondaryAction,
className: SelectPanel_module_css_default.SecondaryAction,
"data-component": "SelectPanel.SecondaryAction",
children: secondaryAction
}),
showPermanentCancelSaveButtons || showResponsiveCancelSaveButtons ? /*#__PURE__*/ jsxs("div", {
"data-stretch-save-button": stretchSaveButton,
className: clsx(SelectPanel_module_css_default.CancelSaveButtons, { [SelectPanel_module_css_default.ResponsiveSaveButton]: showResponsiveCancelSaveButtons }),
children: [/*#__PURE__*/ jsx(ButtonComponent, {
size: "medium",
"data-component": "SelectPanel.CancelButton",
onClick: () => {
onCancel === null || onCancel === void 0 || onCancel();
onCancelRequested();
},
children: "Cancel"
}), /*#__PURE__*/ jsx(ButtonComponent, {
block: onCancel === void 0,
variant: "primary",
size: "medium",
"data-component": "SelectPanel.SaveButton",
onClick: () => {
if (isSingleSelectModal) onSelectedChange(intermediateSelected);
onClose(variant === "modal" ? "selection" : "click-outside");
},
children: "Save"
})]
}) : null,
showResponsiveSaveAndCloseButton ? /*#__PURE__*/ jsx("div", {
className: SelectPanel_module_css_default.ResponsiveSaveButton,
"data-stretch-save-button": stretchSaveButton,
children: /*#__PURE__*/ jsx(ButtonComponent, {
block: true,
variant: "primary",
size: "medium",
"data-component": "SelectPanel.SaveAndCloseButton",
onClick: () => {
onClose("click-outside");
},
children: "Save and close"
})
}) : null
]
}) : null
]
})
}), variant === "modal" && open ? /*#__PURE__*/ jsx("div", {
className: SelectPanel_module_css_default.Backdrop,
"data-component": "SelectPanel.Backdrop"
}) : null] });
}
const SecondaryButton = (props) => {
return /*#__PURE__*/ jsx(ButtonComponent, {
block: true,
"data-component": "SelectPanel.SecondaryActionButton",
...props,
children: props.children
});
};
SecondaryButton.displayName = "SecondaryButton";
const SecondaryLink = (props) => {
return /*#__PURE__*/ jsx(LinkButton, {
...props,
variant: "invisible",
block: true,
"data-component": "SelectPanel.SecondaryActionLink",
children: props.children
});
};
SecondaryLink.displayName = "SecondaryLink";
const SelectPanel = Object.assign(Panel, {
__SLOT__: Symbol("SelectPanel"),
SecondaryActionButton: SecondaryButton,
SecondaryActionLink: SecondaryLink,
Message: SelectPanelMessage
});
//#endregion
export { SelectPanel };