@primer/react 38.0.0-rc.2 → 38.0.0-rc.3

package/lib/experimental/SelectPanel2/SelectPanel.js

@@ -1,971 +0,0 @@
-'use strict';
-
-var reactCompilerRuntime = require('react-compiler-runtime');
-var React = require('react');
-var octiconsReact = require('@primer/octicons-react');
-var ActionListContainerContext = require('../../ActionList/ActionListContainerContext.js');
-var useSlots = require('../../hooks/useSlots.js');
-var Overlay = require('../../Overlay/Overlay.js');
-var InputLabel = require('../../internal/components/InputLabel.js');
-var invariant = require('../../utils/invariant.js');
-var useResponsiveValue = require('../../hooks/useResponsiveValue.js');
-var clsx = require('clsx');
-var SelectPanel_module = require('./SelectPanel.module.css.js');
-var jsxRuntime = require('react/jsx-runtime');
-var useProvidedRefOrCreate = require('../../hooks/useProvidedRefOrCreate.js');
-var useId = require('../../hooks/useId.js');
-var useAnchoredPosition = require('../../hooks/useAnchoredPosition.js');
-var Octicon = require('../../Octicon/Octicon.js');
-var TextInput = require('../../TextInput/TextInput.js');
-var _FormControlContext = require('../../FormControl/_FormControlContext.js');
-var Button = require('../../Button/Button.js');
-var Link = require('../../Link/Link.js');
-var Checkbox = require('../../Checkbox/Checkbox.js');
-var IconButton = require('../../Button/IconButton.js');
-var Heading = require('../../Heading/Heading.js');
-var Spinner = require('../../Spinner/Spinner.js');
-var AriaStatus = require('../../live-region/AriaStatus.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-const SelectPanelContext = /*#__PURE__*/React__default.default.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__default.default.useState(defaultOpen);
-  const responsiveVariants = Object.assign({
-    regular: 'anchored',
-    narrow: 'full-screen'
-  },
-  // defaults
-  typeof propsVariant === 'string' ? {
-    regular: propsVariant
-  } : propsVariant);
-  const currentVariant = useResponsiveValue.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.useProvidedRefOrCreate(providedAnchorRef);
-  const onAnchorClick = () => {
-    if (!internalOpen) setInternalOpen(true);else onInternalCancel();
-  };
-  const contents = React__default.default.Children.map(props.children, child => {
-    if (/*#__PURE__*/React__default.default.isValidElement(child) && child.type === SelectPanelButton) {
-      // eslint-disable-next-line react-compiler/react-compiler
-      Anchor = /*#__PURE__*/React__default.default.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__default.default.useCallback(() => {
-    if (internalOpen === false) return; // nothing to do here
-    if (propsOpen === undefined) setInternalOpen(false);
-  }, [internalOpen, propsOpen]);
-  const onInternalCancel = React__default.default.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__default.default.useState('');
-
-  /* Panel plumbing */
-  const panelId = useId.useId(id);
-  const [slots, childrenInBody] = useSlots.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__default.default.useRef(null);
-
-  // sync dialog open state (imperative) with internal component state
-  React__default.default.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__default.default.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__default.default.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__default.default.useEffect(function initialFocus() {
-    if (internalOpen) {
-      const searchInput = document.querySelector('dialog[open] input');
-      if (searchInput) searchInput.focus();else moveFocusToList();
-    }
-  }, [internalOpen]);
-
-  /* Anchored */
-  const {
-    position
-  } = useAnchoredPosition.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 = Overlay.heightMap[maxHeight];
-  if (currentVariant === 'bottom-sheet') {
-    maxHeightValue = 'calc(100vh - 64px)';
-  } else if (currentVariant === 'full-screen') {
-    maxHeightValue = '100vh';
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [Anchor, /*#__PURE__*/jsxRuntime.jsx(Overlay.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.clsx(SelectPanel_module.Overlay, className),
-      ...props,
-      onClick: event_2 => {
-        if (event_2.target === event_2.currentTarget) onClickOutside();
-      },
-      children: internalOpen && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: /*#__PURE__*/jsxRuntime.jsx(SelectPanelContext.Provider, {
-          value: {
-            panelId,
-            title,
-            description,
-            onCancel: onInternalCancel,
-            onClearSelection: propsOnClearSelection ? onInternalClearSelection : undefined,
-            searchQuery,
-            setSearchQuery,
-            selectionVariant,
-            moveFocusToList
-          },
-          children: /*#__PURE__*/jsxRuntime.jsxs("form", {
-            method: "dialog",
-            onSubmit: onInternalSubmit,
-            className: SelectPanel_module.Form,
-            children: [(_slots$header = slots.header) !== null && _slots$header !== void 0 ? _slots$header :
-            /*#__PURE__*/
-            /* render default header as fallback */
-            jsxRuntime.jsx(SelectPanelHeader, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: SelectPanel_module.Container,
-              children: /*#__PURE__*/jsxRuntime.jsx(ActionListContainerContext.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__default.default.forwardRef((props, anchorRef) => {
-  const inputProps = _FormControlContext.useFormControlForwardedProps(props);
-  const [labelText, setLabelText] = React.useState('');
-  React.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__*/jsxRuntime.jsx(Button.ButtonComponent, {
-      ref: anchorRef,
-      "aria-label": `${anchorRef.current.textContent}, ${labelText}`,
-      ...inputProps
-    });
-  } else {
-    return /*#__PURE__*/jsxRuntime.jsx(Button.ButtonComponent, {
-      ref: anchorRef,
-      ...props
-    });
-  }
-});
-const SelectPanelHeader = t0 => {
-  const $ = reactCompilerRuntime.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.useSlots(children, t1);
-  const {
-    title,
-    description,
-    panelId,
-    onCancel,
-    onClearSelection
-  } = React__default.default.useContext(SelectPanelContext);
-  let t2;
-  if ($[6] !== className) {
-    t2 = clsx.clsx(SelectPanel_module.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__*/jsxRuntime.jsx(IconButton.IconButton, {
-      type: "button",
-      variant: "invisible",
-      icon: octiconsReact.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__*/jsxRuntime.jsx(Heading, {
-      as: "h1",
-      id: t8,
-      className: SelectPanel_module.Title,
-      children: title
-    });
-    $[10] = t8;
-    $[11] = title;
-    $[12] = t9;
-  } else {
-    t9 = $[12];
-  }
-  let t10;
-  if ($[13] !== description || $[14] !== panelId) {
-    t10 = description ? /*#__PURE__*/jsxRuntime.jsx("span", {
-      id: `${panelId}--description`,
-      className: SelectPanel_module.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__*/jsxRuntime.jsxs("div", {
-      className: SelectPanel_module.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__*/jsxRuntime.jsxs("div", {
-      className: SelectPanel_module.FlexBox,
-      children: [t5, t11]
-    });
-    $[21] = t11;
-    $[22] = t5;
-    $[23] = t12;
-  } else {
-    t12 = $[23];
-  }
-  let t13;
-  if ($[24] !== onClearSelection) {
-    t13 = onClearSelection ? /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
-      type: "button",
-      variant: "invisible",
-      icon: octiconsReact.FilterRemoveIcon,
-      "aria-label": "Clear selection",
-      onClick: onClearSelection
-    }) : null;
-    $[24] = onClearSelection;
-    $[25] = t13;
-  } else {
-    t13 = $[25];
-  }
-  let t14;
-  if ($[26] !== onCancel) {
-    t14 = /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
-      type: "button",
-      variant: "invisible",
-      icon: octiconsReact.XIcon,
-      "aria-label": "Close",
-      onClick: () => onCancel()
-    });
-    $[26] = onCancel;
-    $[27] = t14;
-  } else {
-    t14 = $[27];
-  }
-  let t15;
-  if ($[28] !== t13 || $[29] !== t14) {
-    t15 = /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
-      className: SelectPanel_module.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__*/jsxRuntime.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 $ = reactCompilerRuntime.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__default.default.createRef();
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  const inputRef = t1;
-  const {
-    setSearchQuery,
-    moveFocusToList
-  } = React__default.default.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__*/jsxRuntime.jsx(TextInput.Action, {
-      icon: octiconsReact.XCircleFillIcon,
-      "aria-label": "Clear",
-      tooltipDirection: "w",
-      className: SelectPanel_module.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.clsx(SelectPanel_module.TextInput, className);
-    $[14] = className;
-    $[15] = t5;
-  } else {
-    t5 = $[15];
-  }
-  let t6;
-  if ($[16] !== internalKeyDown || $[17] !== internalOnChange || $[18] !== props || $[19] !== t4 || $[20] !== t5) {
-    t6 = /*#__PURE__*/jsxRuntime.jsx(TextInput, {
-      ref: inputRef,
-      block: true,
-      leadingVisual: octiconsReact.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__default.default.createContext(false);
-const SelectPanelFooter = t0 => {
-  const $ = reactCompilerRuntime.c(13);
-  let props;
-  if ($[0] !== t0) {
-    ({
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = props;
-  } else {
-    props = $[1];
-  }
-  const {
-    onCancel,
-    selectionVariant
-  } = React__default.default.useContext(SelectPanelContext);
-  const hidePrimaryActions = selectionVariant === "instant";
-  const buttonSize = useResponsiveValue.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__*/jsxRuntime.jsx("div", {
-      className: SelectPanel_module.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__*/jsxRuntime.jsxs("div", {
-      className: SelectPanel_module.FooterActions,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Button.ButtonComponent, {
-        type: "button",
-        size: buttonSize,
-        onClick: () => onCancel(),
-        children: "Cancel"
-      }), /*#__PURE__*/jsxRuntime.jsx(Button.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__*/jsxRuntime.jsx(FooterContext.Provider, {
-      value: true,
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: SelectPanel_module.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 $ = reactCompilerRuntime.c(3);
-  const size = useResponsiveValue.useResponsiveValue(responsiveButtonSizes, "small");
-  let t0;
-  if ($[0] !== props || $[1] !== size) {
-    t0 = /*#__PURE__*/jsxRuntime.jsx(Button.ButtonComponent, {
-      type: "button",
-      size: size,
-      block: true,
-      ...props
-    });
-    $[0] = props;
-    $[1] = size;
-    $[2] = t0;
-  } else {
-    t0 = $[2];
-  }
-  return t0;
-};
-const SecondaryLink = t0 => {
-  const $ = reactCompilerRuntime.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.useResponsiveValue(responsiveButtonSizes, "small");
-  let t1;
-  if ($[3] !== className) {
-    t1 = clsx.clsx(SelectPanel_module.SmallText, className);
-    $[3] = className;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  let t2;
-  if ($[5] !== props || $[6] !== size || $[7] !== t1) {
-    t2 = /*#__PURE__*/jsxRuntime.jsx(Button.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 $ = reactCompilerRuntime.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.useId(id);
-  const {
-    selectionVariant
-  } = React__default.default.useContext(SelectPanelContext);
-  !(selectionVariant !== "instant") ? process.env.NODE_ENV !== "production" ? invariant.invariant(false, "Sorry! SelectPanel.SecondaryAction with variant=\"checkbox\" is not allowed inside selectionVariant=\"instant\"") : invariant.invariant(false) : void 0;
-  let t1;
-  if ($[5] !== className) {
-    t1 = clsx.clsx(SelectPanel_module.Checkbox, className);
-    $[5] = className;
-    $[6] = t1;
-  } else {
-    t1 = $[6];
-  }
-  let t2;
-  if ($[7] !== checkboxId || $[8] !== props || $[9] !== t1) {
-    t2 = /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(InputLabel.InputLabel, {
-      htmlFor: checkboxId,
-      className: SelectPanel_module.SmallText,
-      children: children
-    });
-    $[11] = checkboxId;
-    $[12] = children;
-    $[13] = t3;
-  } else {
-    t3 = $[13];
-  }
-  let t4;
-  if ($[14] !== t2 || $[15] !== t3) {
-    t4 = /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: SelectPanel_module.SecondaryCheckbox,
-      children: [t2, t3]
-    });
-    $[14] = t2;
-    $[15] = t3;
-    $[16] = t4;
-  } else {
-    t4 = $[16];
-  }
-  return t4;
-};
-const SelectPanelSecondaryAction = t0 => {
-  const $ = reactCompilerRuntime.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__default.default.useContext(FooterContext);
-  !insideFooter ? process.env.NODE_ENV !== "production" ? invariant.invariant(false, "SelectPanel.SecondaryAction is only allowed inside SelectPanel.Footer") : invariant.invariant(false) : void 0;
-  if (variant === "button") {
-    let t1;
-    if ($[3] !== props) {
-      t1 = /*#__PURE__*/jsxRuntime.jsx(SecondaryButton, {
-        ...props
-      });
-      $[3] = props;
-      $[4] = t1;
-    } else {
-      t1 = $[4];
-    }
-    return t1;
-  } else {
-    if (variant === "link") {
-      let t1;
-      if ($[5] !== props) {
-        t1 = /*#__PURE__*/jsxRuntime.jsx(SecondaryLink, {
-          ...props
-        });
-        $[5] = props;
-        $[6] = t1;
-      } else {
-        t1 = $[6];
-      }
-      return t1;
-    } else {
-      if (variant === "checkbox") {
-        let t1;
-        if ($[7] !== props) {
-          t1 = /*#__PURE__*/jsxRuntime.jsx(SecondaryCheckbox, {
-            ...props
-          });
-          $[7] = props;
-          $[8] = t1;
-        } else {
-          t1 = $[8];
-        }
-        return t1;
-      }
-    }
-  }
-};
-const SelectPanelLoading = t0 => {
-  const $ = reactCompilerRuntime.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__*/jsxRuntime.jsx(Spinner, {
-      size: "medium",
-      srText: null
-    });
-    $[0] = t2;
-  } else {
-    t2 = $[0];
-  }
-  let t3;
-  if ($[1] !== children) {
-    t3 = /*#__PURE__*/jsxRuntime.jsxs(AriaStatus.AriaStatus, {
-      announceOnShow: true,
-      className: SelectPanel_module.SelectPanelLoading,
-      children: [t2, /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: SelectPanel_module.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__*/jsxRuntime.jsxs("div", {
-      "aria-live": variant === 'empty' ? undefined : 'polite',
-      className: SelectPanel_module.MessageFull,
-      children: [variant !== 'empty' ? /*#__PURE__*/jsxRuntime.jsx(Octicon, {
-        icon: octiconsReact.AlertIcon,
-        className: clsx.clsx(SelectPanel_module.Octicon, variant === 'error' ? SelectPanel_module.Error : undefined, variant === 'warning' ? SelectPanel_module.Warning : undefined)
-      }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: SelectPanel_module.MessageTitle,
-        children: title
-      }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: SelectPanel_module.MessageContent,
-        children: children
-      })]
-    });
-  } else {
-    return /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "aria-live": variant === 'empty' ? undefined : 'polite',
-      className: SelectPanel_module.MessageInline,
-      "data-variant": variant,
-      children: [/*#__PURE__*/jsxRuntime.jsx(octiconsReact.AlertIcon, {
-        size: 16
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        children: children
-      })]
-    });
-  }
-};
-const SelectPanel = Object.assign(Panel, {
-  Button: SelectPanelButton,
-  Header: SelectPanelHeader,
-  SearchInput: SelectPanelSearchInput,
-  Footer: SelectPanelFooter,
-  Loading: SelectPanelLoading,
-  Message: SelectPanelMessage,
-  SecondaryAction: SelectPanelSecondaryAction
-});
-
-exports.SelectPanel = SelectPanel;