@primer/components 0.0.0-20211030175556 → 0.0.0-20211030175634

package/lib/SelectMenu/SelectMenuItem.jsx

@@ -1,142 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.listItemStyles = void 0;
-const octicons_react_1 = require("@primer/octicons-react");
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const StyledOcticon_1 = __importDefault(require("../StyledOcticon"));
-const sx_1 = __importDefault(require("../sx"));
-const SelectMenuContext_1 = require("./SelectMenuContext");
-exports.listItemStyles = styled_components_1.css `
-  display: flex;
-  align-items: center;
-  padding: ${constants_1.get('space.3')};
-  overflow: hidden;
-  text-align: left;
-  cursor: pointer;
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  border: 0;
-  border-bottom: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
-  color: ${constants_1.get('colors.fg.muted')};
-  text-decoration: none;
-  font-size: ${constants_1.get('fontSizes.0')};
-  font-family: inherit; // needed if user uses a "button" tag
-  width: 100%;
-
-  &:hover {
-    text-decoration: none;
-  }
-  &:focus {
-    outline: none;
-  }
-
-  &[hidden] {
-    display: none !important;
-  }
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    padding-top: ${constants_1.get('space.2')};
-    padding-bottom: ${constants_1.get('space.2')};
-  }
-
-  .SelectMenu-icon {
-    width: ${constants_1.get('space.3')};
-    margin-right: ${constants_1.get('space.2')};
-    flex-shrink: 0;
-  }
-
-  .SelectMenu-selected-icon {
-    visibility: hidden;
-    transition: transform 0.12s cubic-bezier(0.5, 0.1, 1, 0.5), visibility 0s 0.12s linear;
-    transform: scale(0);
-  }
-
-  // selected items
-  &[aria-checked='true'] {
-    font-weight: 500;
-    color: ${constants_1.get('colors.fg.default')};
-
-    .SelectMenu-selected-icon {
-      visibility: visible;
-      transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), visibility 0s linear;
-      transform: scale(1);
-    }
-  }
-
-  // can hover states
-  @media (hover: hover) {
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: ${constants_1.get('colors.neutral.subtle')};
-    }
-  }
-
-  // Can not hover states
-  //
-  // For touch input
-
-  @media (hover: none) {
-    // Android
-    &:focus,
-    &:active {
-      background-color: ${constants_1.get('colors.canvas.subtle')};
-    }
-
-    // iOS Safari
-    // :active would work if ontouchstart is added to the button
-    // Instead this tweaks the "native" highlight color
-    -webkit-tap-highlight-color: ${constants_1.get('colors.selectMenu.tapHighlight')};
-  }
-`;
-const StyledItem = styled_components_1.default.a.attrs(() => ({
-    role: 'menuitemcheckbox'
-})) `
-  ${exports.listItemStyles}
-  ${sx_1.default};
-`;
-const SelectMenuItem = react_1.forwardRef(({ children, selected, theme, onClick, ...rest }, forwardedRef) => {
-    const menuContext = react_1.useContext(SelectMenuContext_1.MenuContext);
-    const backupRef = react_1.useRef(null);
-    const itemRef = forwardedRef ?? backupRef;
-    // close the menu when an item is clicked
-    // this can be overriden if the user provides a `onClick` prop and prevents default in it
-    const handleClick = (e) => {
-        onClick && onClick(e);
-        if (!e.defaultPrevented) {
-            menuContext.setOpen?.(false);
-        }
-    };
-    return (<StyledItem ref={itemRef} {...rest} theme={theme} onClick={handleClick} aria-checked={selected}>
-        <StyledOcticon_1.default theme={theme} className="SelectMenu-icon SelectMenu-selected-icon" icon={octicons_react_1.CheckIcon}/>
-        {children}
-      </StyledItem>);
-});
-SelectMenuItem.defaultProps = {
-    selected: false
-};
-SelectMenuItem.displayName = 'SelectMenu.Item';
-exports.default = SelectMenuItem;

package/lib/SelectMenu/SelectMenuList.jsx

@@ -1,59 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const listStyles = styled_components_1.css `
-  position: relative;
-  padding: 0;
-  margin: 0;
-  flex: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
-
-  @media (hover: hover) {
-    .SelectMenuTab:focus {
-      background-color: ${constants_1.get('colors.selectMenu.tapFocusBg')};
-    }
-
-    .SelectMenuTab:not([aria-checked='true']):hover {
-      color: ${constants_1.get('colors.fg.default')};
-      background-color: ${constants_1.get('colors.canvas.subtle')};
-    }
-
-    .SelectMenuTab:not([aria-checked='true']):active {
-      color: ${constants_1.get('colors.fg.default')};
-      background-color: ${constants_1.get('colors.canvas.subtle')};
-    }
-  }
-`;
-const SelectMenuList = styled_components_1.default.div `
-  ${listStyles}
-  ${sx_1.default};
-`;
-SelectMenuList.displayName = 'SelectMenu.List';
-exports.default = SelectMenuList;

package/lib/SelectMenu/SelectMenuLoadingAnimation.jsx

@@ -1,22 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const Spinner_1 = __importDefault(require("../Spinner"));
-const sx_1 = __importDefault(require("../sx"));
-const Animation = styled_components_1.default.div `
-  padding: ${constants_1.get('space.6')} ${constants_1.get('space.4')};
-  text-align: center;
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  ${sx_1.default}
-`;
-const SelectMenuLoadingAnimation = (props) => {
-    return (<Animation {...props}>
-      <Spinner_1.default />
-    </Animation>);
-};
-exports.default = SelectMenuLoadingAnimation;

package/lib/SelectMenu/SelectMenuModal.jsx

@@ -1,118 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const styled_system_1 = require("styled-system");
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const animateModal = styled_components_1.keyframes `
-  0% {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-`;
-const modalStyles = styled_components_1.css `
-  position: relative;
-  z-index: 99; // Needs to be higher than .details-overlay's z-index: 80.
-  display: flex;
-  ${props => (props.filter ? 'height: 80%' : '')};
-  max-height: ${props => (props.filter ? 'none' : '66%')};
-  margin: auto 0;
-  ${props => (props.filter ? 'margin-top: 0' : '')};
-  overflow: hidden; // Enables border radius on scrollable child elements
-  pointer-events: auto;
-  flex-direction: column;
-  background-color: ${constants_1.get('colors.canvas.overlay')};
-  border-radius: ${constants_1.get('radii.2')};
-  box-shadow: ${constants_1.get('shadows.shadow.small')};
-  animation: ${animateModal} 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    height: auto;
-    max-height: 350px;
-    margin: ${constants_1.get('space.1')} 0 ${constants_1.get('space.3')} 0;
-    font-size: ${constants_1.get('fontSizes.0')};
-    border: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.default')};
-    border-radius: ${constants_1.get('radii.2')};
-    box-shadow: ${constants_1.get('shadows.shadow.small')};
-  }
-`;
-const modalWrapperStyles = styled_components_1.css `
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 99;
-  display: flex;
-  padding: ${constants_1.get('space.3')};
-  pointer-events: none;
-  flex-direction: column;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    content: '';
-    background-color: ${constants_1.get('colors.primer.canvas.backdrop')};
-
-    @media (min-width: ${constants_1.get('breakpoints.0')}) {
-      display: none;
-    }
-  }
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    position: absolute;
-    top: auto;
-    right: ${props => (props.align === 'right' ? '0' : 'auto')};
-    bottom: auto;
-    left: auto;
-    padding: 0;
-  }
-`;
-const Modal = styled_components_1.default.div `
-  ${modalStyles}
-  ${styled_system_1.width}
-`;
-const ModalWrapper = styled_components_1.default.div `
-  ${modalWrapperStyles}
-  ${sx_1.default};
-`;
-const SelectMenuModal = react_1.default.forwardRef(({ children, theme, width: widthProp, ...rest }, forwardedRef) => {
-    return (<ModalWrapper theme={theme} {...rest} role="menu" ref={forwardedRef}>
-        <Modal theme={theme} width={widthProp}>
-          {children}
-        </Modal>
-      </ModalWrapper>);
-});
-SelectMenuModal.defaultProps = {
-    align: 'left',
-    width: '300px'
-};
-SelectMenuModal.displayName = 'SelectMenu.Modal';
-exports.default = SelectMenuModal;

package/lib/SelectMenu/SelectMenuTab.jsx

@@ -1,92 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const SelectMenuContext_1 = require("./SelectMenuContext");
-const tabStyles = styled_components_1.css `
-  flex: 1;
-  padding: ${constants_1.get('space.2')} ${constants_1.get('space.3')};
-  font-size: ${constants_1.get('fontSizes.0')};
-  font-weight: 500;
-  color: ${constants_1.get('colors.fg.muted')};
-  text-align: center;
-  background-color: transparent;
-  border: 0;
-  box-shadow: inset 0 -1px 0 ${constants_1.get('colors.border.muted')};
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    flex: none;
-    padding: ${constants_1.get('space.1')} ${constants_1.get('space.3')};
-    border: ${constants_1.get('borderWidths.1')} solid transparent;
-    border-bottom-width: 0;
-    border-top-left-radius: ${constants_1.get('radii.2')};
-    border-top-right-radius: ${constants_1.get('radii.2')};
-  }
-
-  &[aria-selected='true'] {
-    z-index: 1; // Keeps box-shadow visible when hovering
-    color: ${constants_1.get('colors.text-primary')};
-    background-color: ${constants_1.get('colors.canvas.overlay')};
-    box-shadow: 0 0 0 1px ${constants_1.get('colors.border.muted')};
-
-    @media (min-width: ${constants_1.get('breakpoints.0')}) {
-      border-color: ${constants_1.get('colors.border.muted')};
-      box-shadow: none;
-    }
-  }
-
-  &:focus {
-    background-color: ${constants_1.get('colors.neutral.subtle')};
-  }
-`;
-const StyledTab = styled_components_1.default.button `
-  ${tabStyles}
-  ${sx_1.default};
-`;
-const SelectMenuTab = ({ tabName = '', index, className, onClick, ...rest }) => {
-    const menuContext = react_1.useContext(SelectMenuContext_1.MenuContext);
-    const handleClick = (e) => {
-        // if consumer has attached an onClick event, call it
-        onClick && onClick(e);
-        if (!e.defaultPrevented) {
-            menuContext.setSelectedTab?.(tabName);
-        }
-    };
-    // if no tab is selected when the component renders, show the first tab
-    react_1.useEffect(() => {
-        if (!menuContext.selectedTab && index === 0) {
-            menuContext.setSelectedTab?.(tabName);
-        }
-    }, [index, menuContext, tabName]);
-    const isSelected = menuContext.selectedTab === tabName;
-    return (<StyledTab role="tab" className={classnames_1.default('SelectMenuTab', className)} aria-selected={isSelected} onClick={handleClick} {...rest}>
-      {tabName}
-    </StyledTab>);
-};
-SelectMenuTab.displayName = 'SelectMenu.Tab';
-exports.default = SelectMenuTab;

package/lib/SelectMenu/SelectMenuTabPanel.jsx

@@ -1,42 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const SelectMenuContext_1 = require("./SelectMenuContext");
-const SelectMenuList_1 = __importDefault(require("./SelectMenuList"));
-const TabPanelBase = styled_components_1.default.div `
-  border-top: ${constants_1.get('borderWidths.1')} solid ${constants_1.get('colors.border.muted')};
-  ${sx_1.default};
-`;
-const TabPanel = ({ tabName, className, children, ...rest }) => {
-    const menuContext = react_1.useContext(SelectMenuContext_1.MenuContext);
-    return (<TabPanelBase role="tabpanel" className={className} hidden={menuContext.selectedTab !== tabName} {...rest}>
-      <SelectMenuList_1.default>{children}</SelectMenuList_1.default>
-    </TabPanelBase>);
-};
-TabPanel.displayName = 'SelectMenu.TabPanel';
-exports.default = TabPanel;

package/lib/SelectMenu/SelectMenuTabs.jsx

@@ -1,57 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const constants_1 = require("../constants");
-const sx_1 = __importDefault(require("../sx"));
-const tabWrapperStyles = styled_components_1.css `
-  display: flex;
-  flex-shrink: 0;
-  margin-bottom: -1px; // hide border of element below
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  // Hide scrollbar so it doesn't cover the text
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  @media (min-width: ${constants_1.get('breakpoints.0')}) {
-    padding: 0 ${constants_1.get('space.2')};
-    margin-top: ${constants_1.get('space.3')};
-  }
-`;
-const SelectMenuTabsBase = styled_components_1.default.div `
-  ${tabWrapperStyles}
-  ${sx_1.default};
-`;
-const SelectMenuTabs = ({ children, ...rest }) => {
-    return (<SelectMenuTabsBase role="tablist" {...rest}>
-      {children}
-    </SelectMenuTabsBase>);
-};
-SelectMenuTabs.displayName = 'SelectMenu.Tabs';
-exports.default = SelectMenuTabs;

package/lib/SelectPanel/SelectPanel.jsx

@@ -1,105 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectPanel = void 0;
-const react_1 = __importStar(require("react"));
-const FilteredActionList_1 = require("../FilteredActionList");
-const DropdownMenu_1 = require("../DropdownMenu");
-const AnchoredOverlay_1 = require("../AnchoredOverlay");
-const useProvidedStateOrCreate_1 = require("../hooks/useProvidedStateOrCreate");
-const hooks_1 = require("../hooks");
-function isMultiSelectVariant(selected) {
-    return Array.isArray(selected);
-}
-const focusZoneSettings = {
-    // Let FilteredActionList handle focus zone
-    disabled: true
-};
-function SelectPanel({ open, onOpenChange, renderAnchor = props => <DropdownMenu_1.DropdownButton {...props}/>, anchorRef: externalAnchorRef, placeholder, selected, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, textInputProps, overlayProps, sx, ...listProps }) {
-    const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate_1.useProvidedStateOrCreate(externalFilterValue, undefined, '');
-    const onFilterChange = react_1.useCallback((value, e) => {
-        externalOnFilterChange(value, e);
-        setInternalFilterValue(value);
-    }, [externalOnFilterChange, setInternalFilterValue]);
-    const anchorRef = hooks_1.useProvidedRefOrCreate(externalAnchorRef);
-    const onOpen = react_1.useCallback(gesture => onOpenChange(true, gesture), [onOpenChange]);
-    const onClose = react_1.useCallback((gesture) => {
-        onOpenChange(false, gesture);
-    }, [onOpenChange]);
-    const renderMenuAnchor = react_1.useMemo(() => {
-        if (renderAnchor === null) {
-            return null;
-        }
-        const selectedItems = Array.isArray(selected) ? selected : [...(selected ? [selected] : [])];
-        return (props) => {
-            return renderAnchor({
-                ...props,
-                children: selectedItems.length ? selectedItems.map(item => item.text).join(', ') : placeholder
-            });
-        };
-    }, [placeholder, renderAnchor, selected]);
-    const itemsToRender = react_1.useMemo(() => {
-        return items.map(item => {
-            const isItemSelected = isMultiSelectVariant(selected) ? selected.includes(item) : selected === item;
-            return {
-                ...item,
-                role: 'option',
-                selected: 'selected' in item && item.selected === undefined ? undefined : isItemSelected,
-                onAction: (itemFromAction, event) => {
-                    item.onAction?.(itemFromAction, event);
-                    if (event.defaultPrevented) {
-                        return;
-                    }
-                    if (isMultiSelectVariant(selected)) {
-                        const otherSelectedItems = selected.filter(selectedItem => selectedItem !== item);
-                        const newSelectedItems = selected.includes(item) ? otherSelectedItems : [...otherSelectedItems, item];
-                        const multiSelectOnChange = onSelectedChange;
-                        multiSelectOnChange(newSelectedItems);
-                        return;
-                    }
-                    // single select
-                    const singleSelectOnChange = onSelectedChange;
-                    singleSelectOnChange(item === selected ? undefined : item);
-                    onClose('selection');
-                }
-            };
-        });
-    }, [onClose, onSelectedChange, items, selected]);
-    const inputRef = react_1.default.useRef(null);
-    const focusTrapSettings = {
-        initialFocusRef: inputRef
-    };
-    const extendedTextInputProps = react_1.useMemo(() => {
-        return {
-            sx: { m: 2 },
-            contrast: true,
-            ...textInputProps
-        };
-    }, [textInputProps]);
-    return (<AnchoredOverlay_1.AnchoredOverlay renderAnchor={renderMenuAnchor} anchorRef={anchorRef} open={open} onOpen={onOpen} onClose={onClose} overlayProps={overlayProps} focusTrapSettings={focusTrapSettings} focusZoneSettings={focusZoneSettings}>
-      <FilteredActionList_1.FilteredActionList filterValue={filterValue} onFilterChange={onFilterChange} {...listProps} role="listbox" items={itemsToRender} selectionVariant={isMultiSelectVariant(selected) ? 'multiple' : 'single'} textInputProps={extendedTextInputProps} inputRef={inputRef} 
-    // inheriting height and maxHeight ensures that the FilteredActionList is never taller
-    // than the Overlay (which would break scrolling the items)
-    sx={{ ...sx, height: 'inherit', maxHeight: 'inherit' }}/>
-    </AnchoredOverlay_1.AnchoredOverlay>);
-}
-exports.SelectPanel = SelectPanel;
-SelectPanel.displayName = 'SelectPanel';