@primer/react
Version:
An implementation of GitHub's Primer Design System using React
966 lines (950 loc) • 27 kB
JavaScript
import { c } from 'react-compiler-runtime';
import React, { useState, useEffect } from 'react';
import { AlertIcon, XCircleFillIcon, SearchIcon, ArrowLeftIcon, FilterRemoveIcon, XIcon } from '@primer/octicons-react';
import { ActionListContainerContext } from '../../ActionList/ActionListContainerContext.js';
import { useSlots } from '../../hooks/useSlots.js';
import { BaseOverlay, heightMap } from '../../Overlay/Overlay.js';
import { InputLabel } from '../../internal/components/InputLabel.js';
import { invariant } from '../../utils/invariant.js';
import { useResponsiveValue } from '../../hooks/useResponsiveValue.js';
import { clsx } from 'clsx';
import classes from './SelectPanel.module.css.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
import { useId } from '../../hooks/useId.js';
import { useAnchoredPosition } from '../../hooks/useAnchoredPosition.js';
import Octicon from '../../Octicon/Octicon.js';
import TextInput from '../../TextInput/TextInput.js';
import { useFormControlForwardedProps } from '../../FormControl/_FormControlContext.js';
import { ButtonComponent } from '../../Button/Button.js';
import Link from '../../Link/Link.js';
import Checkbox from '../../Checkbox/Checkbox.js';
import { IconButton } from '../../Button/IconButton.js';
import Heading from '../../Heading/Heading.js';
import StyledSpinner from '../../Spinner/Spinner.js';
import { AriaStatus } from '../../live-region/AriaStatus.js';
const SelectPanelContext = /*#__PURE__*/React.createContext({
title: '',
description: undefined,
panelId: '',
onCancel: () => {},
onClearSelection: undefined,
searchQuery: '',
setSearchQuery: () => {},
selectionVariant: 'multiple',
moveFocusToList: () => {}
});
const responsiveButtonSizes = {
narrow: 'medium',
regular: 'small'
};
const Panel = ({
title,
description,
variant: propsVariant,
selectionVariant = 'multiple',
id,
defaultOpen = false,
open: propsOpen,
anchorRef: providedAnchorRef,
anchoredPositionSettings,
onCancel: propsOnCancel,
onClearSelection: propsOnClearSelection,
onSubmit: propsOnSubmit,
width = 'medium',
maxHeight = 'large',
className,
...props
}) => {
var _position$top, _position$left, _slots$header;
const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
const responsiveVariants = Object.assign({
regular: 'anchored',
narrow: 'full-screen'
},
// defaults
typeof propsVariant === 'string' ? {
regular: propsVariant
} : propsVariant);
const currentVariant = useResponsiveValue(responsiveVariants, 'anchored');
// sync open state with props
if (propsOpen !== undefined && internalOpen !== propsOpen) setInternalOpen(propsOpen);
// TODO: replace this hack with clone element?
// 🚨 Hack for good API!
// we strip out Anchor from children and wire it up to Dialog
// with additional props for accessibility
let Anchor;
const anchorRef = useProvidedRefOrCreate(providedAnchorRef);
const onAnchorClick = () => {
if (!internalOpen) setInternalOpen(true);else onInternalCancel();
};
const contents = React.Children.map(props.children, child => {
if (/*#__PURE__*/React.isValidElement(child) && child.type === SelectPanelButton) {
// eslint-disable-next-line react-compiler/react-compiler
Anchor = /*#__PURE__*/React.cloneElement(child, {
// @ts-ignore TODO
ref: anchorRef,
onClick: child.props.onClick || onAnchorClick,
'aria-haspopup': true,
'aria-expanded': internalOpen
});
return null;
}
return child;
});
const onInternalClose = React.useCallback(() => {
if (internalOpen === false) return; // nothing to do here
if (propsOpen === undefined) setInternalOpen(false);
}, [internalOpen, propsOpen]);
const onInternalCancel = React.useCallback(() => {
onInternalClose();
if (typeof propsOnCancel === 'function') propsOnCancel();
}, [onInternalClose, propsOnCancel]);
const onInternalSubmit = event => {
event === null || event === void 0 ? void 0 : event.preventDefault(); // there is no event with selectionVariant=instant
onInternalClose();
if (typeof propsOnSubmit === 'function') propsOnSubmit(event);
};
const onInternalClearSelection = () => {
if (typeof propsOnClearSelection === 'function') propsOnClearSelection();
};
const internalAfterSelect = event_0 => {
if (selectionVariant === 'instant') onInternalSubmit();
if (event_0.type === 'keypress') {
if (event_0.key === 'Enter') onInternalSubmit();
}
};
/* Search/Filter */
const [searchQuery, setSearchQuery] = React.useState('');
/* Panel plumbing */
const panelId = useId(id);
const [slots, childrenInBody] = useSlots(contents, {
header: SelectPanelHeader,
footer: SelectPanelFooter
});
// used in SelectPanel.SearchInput
const moveFocusToList = () => {
var _dialogRef$current;
const selector = 'ul[role=listbox] li:not([role=none])';
// being specific about roles because there can be another ul (tabs in header) and an ActionList.Group (li[role=none])
const firstListElement = (_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 ? void 0 : _dialogRef$current.querySelector(selector);
firstListElement === null || firstListElement === void 0 ? void 0 : firstListElement.focus();
};
/* Dialog */
const dialogRef = React.useRef(null);
// sync dialog open state (imperative) with internal component state
React.useEffect(() => {
var _dialogRef$current2, _dialogRef$current3;
if (internalOpen) (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.showModal();else if ((_dialogRef$current3 = dialogRef.current) !== null && _dialogRef$current3 !== void 0 && _dialogRef$current3.open) dialogRef.current.close();
}, [internalOpen]);
// dialog handles Esc automatically, so we have to sync internal state
// but it doesn't call onCancel, so have another effect for that!
React.useEffect(() => {
const dialogEl = dialogRef.current;
dialogEl === null || dialogEl === void 0 ? void 0 : dialogEl.addEventListener('close', onInternalClose);
return () => dialogEl === null || dialogEl === void 0 ? void 0 : dialogEl.removeEventListener('close', onInternalClose);
}, [onInternalClose]);
// Esc handler
React.useEffect(() => {
const dialogEl_0 = dialogRef.current;
const handler = event_1 => {
if (event_1.key === 'Escape') onInternalCancel();
};
dialogEl_0 === null || dialogEl_0 === void 0 ? void 0 : dialogEl_0.addEventListener('keydown', handler);
return () => dialogEl_0 === null || dialogEl_0 === void 0 ? void 0 : dialogEl_0.removeEventListener('keydown', handler);
}, [onInternalCancel]);
// Autofocus hack: React doesn't support autoFocus for dialog: https://github.com/facebook/react/issues/23301
// tl;dr: react takes over autofocus instead of letting the browser handle it,
// but not for dialogs, so we have to do it
React.useEffect(function initialFocus() {
if (internalOpen) {
const searchInput = document.querySelector('dialog[open] input');
if (searchInput) searchInput.focus();else moveFocusToList();
}
}, [internalOpen]);
/* Anchored */
const {
position
} = useAnchoredPosition({
anchorElementRef: anchorRef,
floatingElementRef: dialogRef,
side: 'outside-bottom',
align: 'start',
...anchoredPositionSettings
}, [internalOpen, anchorRef.current, dialogRef.current]);
/*
We want to cancel and close the panel when user clicks outside.
See decision log: https://github.com/github/primer/discussions/2614#discussioncomment-8544561
*/
const onClickOutside = onInternalCancel;
let maxHeightValue = heightMap[maxHeight];
if (currentVariant === 'bottom-sheet') {
maxHeightValue = 'calc(100vh - 64px)';
} else if (currentVariant === 'full-screen') {
maxHeightValue = '100vh';
}
return /*#__PURE__*/jsxs(Fragment, {
children: [Anchor, /*#__PURE__*/jsx(BaseOverlay, {
as: "dialog",
ref: dialogRef,
"aria-labelledby": `${panelId}--title`,
"aria-describedby": description ? `${panelId}--description` : undefined,
width: width,
height: "fit-content",
maxHeight: maxHeight,
"data-variant": currentVariant,
style: {
'--max-height': maxHeightValue,
'--position-top': `${(_position$top = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top !== void 0 ? _position$top : 0}px`,
'--position-left': `${(_position$left = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left !== void 0 ? _position$left : 0}px`,
visibility: internalOpen ? 'visible' : 'hidden',
display: 'flex'
},
className: clsx(classes.Overlay, className),
...props,
onClick: event_2 => {
if (event_2.target === event_2.currentTarget) onClickOutside();
},
children: internalOpen && /*#__PURE__*/jsx(Fragment, {
children: /*#__PURE__*/jsx(SelectPanelContext.Provider, {
value: {
panelId,
title,
description,
onCancel: onInternalCancel,
onClearSelection: propsOnClearSelection ? onInternalClearSelection : undefined,
searchQuery,
setSearchQuery,
selectionVariant,
moveFocusToList
},
children: /*#__PURE__*/jsxs("form", {
method: "dialog",
onSubmit: onInternalSubmit,
className: classes.Form,
children: [(_slots$header = slots.header) !== null && _slots$header !== void 0 ? _slots$header :
/*#__PURE__*/
/* render default header as fallback */
jsx(SelectPanelHeader, {}), /*#__PURE__*/jsx("div", {
className: classes.Container,
children: /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
value: {
container: 'SelectPanel',
listRole: 'listbox',
selectionAttribute: 'aria-selected',
selectionVariant: selectionVariant === 'instant' ? 'single' : selectionVariant,
afterSelect: internalAfterSelect,
listLabelledBy: `${panelId}--title`,
enableFocusZone: true // Arrow keys navigation for list items
},
children: childrenInBody
})
}), slots.footer]
})
})
})
})]
});
};
const SelectPanelButton = /*#__PURE__*/React.forwardRef((props, anchorRef) => {
const inputProps = useFormControlForwardedProps(props);
const [labelText, setLabelText] = useState('');
useEffect(() => {
const label = document.querySelector(`[for='${inputProps.id}']`);
if (label !== null && label !== void 0 && label.textContent) {
setLabelText(label.textContent);
}
}, [inputProps.id]);
if (labelText) {
return /*#__PURE__*/jsx(ButtonComponent, {
ref: anchorRef,
"aria-label": `${anchorRef.current.textContent}, ${labelText}`,
...inputProps
});
} else {
return /*#__PURE__*/jsx(ButtonComponent, {
ref: anchorRef,
...props
});
}
});
const SelectPanelHeader = t0 => {
const $ = c(42);
let children;
let className;
let onBack;
let props;
if ($[0] !== t0) {
({
children,
onBack,
className,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = onBack;
$[4] = props;
} else {
children = $[1];
className = $[2];
onBack = $[3];
props = $[4];
}
let t1;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t1 = {
searchInput: SelectPanelSearchInput
};
$[5] = t1;
} else {
t1 = $[5];
}
const [slots, childrenWithoutSlots] = useSlots(children, t1);
const {
title,
description,
panelId,
onCancel,
onClearSelection
} = React.useContext(SelectPanelContext);
let t2;
if ($[6] !== className) {
t2 = clsx(classes.Header, className);
$[6] = className;
$[7] = t2;
} else {
t2 = $[7];
}
const t3 = description ? true : undefined;
const t4 = slots.searchInput ? true : undefined;
let t5;
if ($[8] !== onBack) {
t5 = onBack ? /*#__PURE__*/jsx(IconButton, {
type: "button",
variant: "invisible",
icon: ArrowLeftIcon,
"aria-label": "Back",
onClick: () => onBack()
}) : null;
$[8] = onBack;
$[9] = t5;
} else {
t5 = $[9];
}
const t6 = description ? true : undefined;
const t7 = onBack ? true : undefined;
const t8 = `${panelId}--title`;
let t9;
if ($[10] !== t8 || $[11] !== title) {
t9 = /*#__PURE__*/jsx(Heading, {
as: "h1",
id: t8,
className: classes.Title,
children: title
});
$[10] = t8;
$[11] = title;
$[12] = t9;
} else {
t9 = $[12];
}
let t10;
if ($[13] !== description || $[14] !== panelId) {
t10 = description ? /*#__PURE__*/jsx("span", {
id: `${panelId}--description`,
className: classes.Description,
children: description
}) : null;
$[13] = description;
$[14] = panelId;
$[15] = t10;
} else {
t10 = $[15];
}
let t11;
if ($[16] !== t10 || $[17] !== t6 || $[18] !== t7 || $[19] !== t9) {
t11 = /*#__PURE__*/jsxs("div", {
className: classes.TitleWrapper,
"data-description": t6,
"data-on-back": t7,
children: [t9, t10]
});
$[16] = t10;
$[17] = t6;
$[18] = t7;
$[19] = t9;
$[20] = t11;
} else {
t11 = $[20];
}
let t12;
if ($[21] !== t11 || $[22] !== t5) {
t12 = /*#__PURE__*/jsxs("div", {
className: classes.FlexBox,
children: [t5, t11]
});
$[21] = t11;
$[22] = t5;
$[23] = t12;
} else {
t12 = $[23];
}
let t13;
if ($[24] !== onClearSelection) {
t13 = onClearSelection ? /*#__PURE__*/jsx(IconButton, {
type: "button",
variant: "invisible",
icon: FilterRemoveIcon,
"aria-label": "Clear selection",
onClick: onClearSelection
}) : null;
$[24] = onClearSelection;
$[25] = t13;
} else {
t13 = $[25];
}
let t14;
if ($[26] !== onCancel) {
t14 = /*#__PURE__*/jsx(IconButton, {
type: "button",
variant: "invisible",
icon: XIcon,
"aria-label": "Close",
onClick: () => onCancel()
});
$[26] = onCancel;
$[27] = t14;
} else {
t14 = $[27];
}
let t15;
if ($[28] !== t13 || $[29] !== t14) {
t15 = /*#__PURE__*/jsxs("div", {
children: [t13, t14]
});
$[28] = t13;
$[29] = t14;
$[30] = t15;
} else {
t15 = $[30];
}
let t16;
if ($[31] !== t12 || $[32] !== t15 || $[33] !== t3 || $[34] !== t4) {
t16 = /*#__PURE__*/jsxs("div", {
className: classes.HeaderContent,
"data-description": t3,
"data-search-input": t4,
children: [t12, t15]
});
$[31] = t12;
$[32] = t15;
$[33] = t3;
$[34] = t4;
$[35] = t16;
} else {
t16 = $[35];
}
let t17;
if ($[36] !== childrenWithoutSlots || $[37] !== props || $[38] !== slots.searchInput || $[39] !== t16 || $[40] !== t2) {
t17 = /*#__PURE__*/jsxs("div", {
className: t2,
...props,
children: [t16, slots.searchInput, childrenWithoutSlots]
});
$[36] = childrenWithoutSlots;
$[37] = props;
$[38] = slots.searchInput;
$[39] = t16;
$[40] = t2;
$[41] = t17;
} else {
t17 = $[41];
}
return t17;
};
const SelectPanelSearchInput = t0 => {
const $ = c(22);
let className;
let props;
let propsOnChange;
let propsOnKeyDown;
if ($[0] !== t0) {
({
onChange: propsOnChange,
onKeyDown: propsOnKeyDown,
className,
...props
} = t0);
$[0] = t0;
$[1] = className;
$[2] = props;
$[3] = propsOnChange;
$[4] = propsOnKeyDown;
} else {
className = $[1];
props = $[2];
propsOnChange = $[3];
propsOnKeyDown = $[4];
}
let t1;
if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
t1 = /*#__PURE__*/React.createRef();
$[5] = t1;
} else {
t1 = $[5];
}
const inputRef = t1;
const {
setSearchQuery,
moveFocusToList
} = React.useContext(SelectPanelContext);
let t2;
if ($[6] !== propsOnChange || $[7] !== setSearchQuery) {
t2 = event => {
if (typeof propsOnChange === "function") {
propsOnChange(event);
} else {
setSearchQuery(event.target.value);
}
};
$[6] = propsOnChange;
$[7] = setSearchQuery;
$[8] = t2;
} else {
t2 = $[8];
}
const internalOnChange = t2;
let t3;
if ($[9] !== moveFocusToList || $[10] !== propsOnKeyDown) {
t3 = event_0 => {
if (event_0.key === "ArrowDown") {
event_0.preventDefault();
moveFocusToList();
}
if (typeof propsOnKeyDown === "function") {
propsOnKeyDown(event_0);
}
};
$[9] = moveFocusToList;
$[10] = propsOnKeyDown;
$[11] = t3;
} else {
t3 = $[11];
}
const internalKeyDown = t3;
let t4;
if ($[12] !== propsOnChange) {
t4 = /*#__PURE__*/jsx(TextInput.Action, {
icon: XCircleFillIcon,
"aria-label": "Clear",
tooltipDirection: "w",
className: classes.ClearAction,
onClick: () => {
if (inputRef.current) {
inputRef.current.value = "";
}
if (typeof propsOnChange === "function") {
propsOnChange({
target: inputRef.current,
currentTarget: inputRef.current
});
}
}
});
$[12] = propsOnChange;
$[13] = t4;
} else {
t4 = $[13];
}
let t5;
if ($[14] !== className) {
t5 = clsx(classes.TextInput, className);
$[14] = className;
$[15] = t5;
} else {
t5 = $[15];
}
let t6;
if ($[16] !== internalKeyDown || $[17] !== internalOnChange || $[18] !== props || $[19] !== t4 || $[20] !== t5) {
t6 = /*#__PURE__*/jsx(TextInput, {
ref: inputRef,
block: true,
leadingVisual: SearchIcon,
placeholder: "Search",
trailingAction: t4,
className: t5,
onChange: internalOnChange,
onKeyDown: internalKeyDown,
...props
});
$[16] = internalKeyDown;
$[17] = internalOnChange;
$[18] = props;
$[19] = t4;
$[20] = t5;
$[21] = t6;
} else {
t6 = $[21];
}
return t6;
};
const FooterContext = /*#__PURE__*/React.createContext(false);
const SelectPanelFooter = t0 => {
const $ = c(13);
let props;
if ($[0] !== t0) {
({
...props
} = t0);
$[0] = t0;
$[1] = props;
} else {
props = $[1];
}
const {
onCancel,
selectionVariant
} = React.useContext(SelectPanelContext);
const hidePrimaryActions = selectionVariant === "instant";
const buttonSize = useResponsiveValue(responsiveButtonSizes, "small");
if (hidePrimaryActions && !props.children) {
return null;
}
const t1 = hidePrimaryActions || undefined;
const t2 = hidePrimaryActions || undefined;
let t3;
if ($[2] !== props.children || $[3] !== t2) {
t3 = /*#__PURE__*/jsx("div", {
className: classes.FooterContent,
"data-hide-primary-actions": t2,
children: props.children
});
$[2] = props.children;
$[3] = t2;
$[4] = t3;
} else {
t3 = $[4];
}
let t4;
if ($[5] !== buttonSize || $[6] !== hidePrimaryActions || $[7] !== onCancel) {
t4 = hidePrimaryActions ? null : /*#__PURE__*/jsxs("div", {
className: classes.FooterActions,
children: [/*#__PURE__*/jsx(ButtonComponent, {
type: "button",
size: buttonSize,
onClick: () => onCancel(),
children: "Cancel"
}), /*#__PURE__*/jsx(ButtonComponent, {
type: "submit",
size: buttonSize,
variant: "primary",
children: "Save"
})]
});
$[5] = buttonSize;
$[6] = hidePrimaryActions;
$[7] = onCancel;
$[8] = t4;
} else {
t4 = $[8];
}
let t5;
if ($[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
t5 = /*#__PURE__*/jsx(FooterContext.Provider, {
value: true,
children: /*#__PURE__*/jsxs("div", {
className: classes.Footer,
"data-hide-primary-actions": t1,
children: [t3, t4]
})
});
$[9] = t1;
$[10] = t3;
$[11] = t4;
$[12] = t5;
} else {
t5 = $[12];
}
return t5;
};
const SecondaryButton = props => {
const $ = c(3);
const size = useResponsiveValue(responsiveButtonSizes, "small");
let t0;
if ($[0] !== props || $[1] !== size) {
t0 = /*#__PURE__*/jsx(ButtonComponent, {
type: "button",
size: size,
block: true,
...props
});
$[0] = props;
$[1] = size;
$[2] = t0;
} else {
t0 = $[2];
}
return t0;
};
const SecondaryLink = t0 => {
const $ = c(9);
let className;
let props;
if ($[0] !== t0) {
({
className,
...props
} = t0);
$[0] = t0;
$[1] = className;
$[2] = props;
} else {
className = $[1];
props = $[2];
}
const size = useResponsiveValue(responsiveButtonSizes, "small");
let t1;
if ($[3] !== className) {
t1 = clsx(classes.SmallText, className);
$[3] = className;
$[4] = t1;
} else {
t1 = $[4];
}
let t2;
if ($[5] !== props || $[6] !== size || $[7] !== t1) {
t2 = /*#__PURE__*/jsx(ButtonComponent, {
as: Link,
size: size,
variant: "invisible",
block: true,
...props,
className: t1,
children: props.children
});
$[5] = props;
$[6] = size;
$[7] = t1;
$[8] = t2;
} else {
t2 = $[8];
}
return t2;
};
const SecondaryCheckbox = t0 => {
const $ = c(17);
let children;
let className;
let id;
let props;
if ($[0] !== t0) {
({
id,
children,
className,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = id;
$[4] = props;
} else {
children = $[1];
className = $[2];
id = $[3];
props = $[4];
}
const checkboxId = useId(id);
const {
selectionVariant
} = React.useContext(SelectPanelContext);
!(selectionVariant !== "instant") ? process.env.NODE_ENV !== "production" ? invariant(false, "Sorry! SelectPanel.SecondaryAction with variant=\"checkbox\" is not allowed inside selectionVariant=\"instant\"") : invariant(false) : void 0;
let t1;
if ($[5] !== className) {
t1 = clsx(classes.Checkbox, className);
$[5] = className;
$[6] = t1;
} else {
t1 = $[6];
}
let t2;
if ($[7] !== checkboxId || $[8] !== props || $[9] !== t1) {
t2 = /*#__PURE__*/jsx(Checkbox, {
id: checkboxId,
className: t1,
...props
});
$[7] = checkboxId;
$[8] = props;
$[9] = t1;
$[10] = t2;
} else {
t2 = $[10];
}
let t3;
if ($[11] !== checkboxId || $[12] !== children) {
t3 = /*#__PURE__*/jsx(InputLabel, {
htmlFor: checkboxId,
className: classes.SmallText,
children: children
});
$[11] = checkboxId;
$[12] = children;
$[13] = t3;
} else {
t3 = $[13];
}
let t4;
if ($[14] !== t2 || $[15] !== t3) {
t4 = /*#__PURE__*/jsxs("div", {
className: classes.SecondaryCheckbox,
children: [t2, t3]
});
$[14] = t2;
$[15] = t3;
$[16] = t4;
} else {
t4 = $[16];
}
return t4;
};
const SelectPanelSecondaryAction = t0 => {
const $ = c(9);
let props;
let variant;
if ($[0] !== t0) {
({
variant,
...props
} = t0);
$[0] = t0;
$[1] = props;
$[2] = variant;
} else {
props = $[1];
variant = $[2];
}
const insideFooter = React.useContext(FooterContext);
!insideFooter ? process.env.NODE_ENV !== "production" ? invariant(false, "SelectPanel.SecondaryAction is only allowed inside SelectPanel.Footer") : invariant(false) : void 0;
if (variant === "button") {
let t1;
if ($[3] !== props) {
t1 = /*#__PURE__*/jsx(SecondaryButton, {
...props
});
$[3] = props;
$[4] = t1;
} else {
t1 = $[4];
}
return t1;
} else {
if (variant === "link") {
let t1;
if ($[5] !== props) {
t1 = /*#__PURE__*/jsx(SecondaryLink, {
...props
});
$[5] = props;
$[6] = t1;
} else {
t1 = $[6];
}
return t1;
} else {
if (variant === "checkbox") {
let t1;
if ($[7] !== props) {
t1 = /*#__PURE__*/jsx(SecondaryCheckbox, {
...props
});
$[7] = props;
$[8] = t1;
} else {
t1 = $[8];
}
return t1;
}
}
}
};
const SelectPanelLoading = t0 => {
const $ = c(3);
const {
children: t1
} = t0;
const children = t1 === undefined ? "Fetching items..." : t1;
let t2;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t2 = /*#__PURE__*/jsx(StyledSpinner, {
size: "medium",
srText: null
});
$[0] = t2;
} else {
t2 = $[0];
}
let t3;
if ($[1] !== children) {
t3 = /*#__PURE__*/jsxs(AriaStatus, {
announceOnShow: true,
className: classes.SelectPanelLoading,
children: [t2, /*#__PURE__*/jsx("span", {
className: classes.LoadingText,
children: children
})]
});
$[1] = children;
$[2] = t3;
} else {
t3 = $[2];
}
return t3;
};
const SelectPanelMessage = ({
variant = 'warning',
size = variant === 'empty' ? 'full' : 'inline',
title,
children
}) => {
if (size === 'full') {
return /*#__PURE__*/jsxs("div", {
"aria-live": variant === 'empty' ? undefined : 'polite',
className: classes.MessageFull,
children: [variant !== 'empty' ? /*#__PURE__*/jsx(Octicon, {
icon: AlertIcon,
className: clsx(classes.Octicon, variant === 'error' ? classes.Error : undefined, variant === 'warning' ? classes.Warning : undefined)
}) : null, /*#__PURE__*/jsx("span", {
className: classes.MessageTitle,
children: title
}), /*#__PURE__*/jsx("span", {
className: classes.MessageContent,
children: children
})]
});
} else {
return /*#__PURE__*/jsxs("div", {
"aria-live": variant === 'empty' ? undefined : 'polite',
className: classes.MessageInline,
"data-variant": variant,
children: [/*#__PURE__*/jsx(AlertIcon, {
size: 16
}), /*#__PURE__*/jsx("div", {
children: children
})]
});
}
};
const SelectPanel = Object.assign(Panel, {
Button: SelectPanelButton,
Header: SelectPanelHeader,
SearchInput: SelectPanelSearchInput,
Footer: SelectPanelFooter,
Loading: SelectPanelLoading,
Message: SelectPanelMessage,
SecondaryAction: SelectPanelSecondaryAction
});
export { SelectPanel };