@primer/react 38.0.0-rc.389f01088 → 38.0.0-rc.5

package/dist/experimental/SelectPanel2/SelectPanel.js

@@ -0,0 +1,965 @@
+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 Spinner 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(Spinner, {
+      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 };