@primer/components 0.0.0-202111023322 → 0.0.0-20211110135525

package/lib/SelectMenu/SelectMenuLoadingAnimation.js

@@ -7,36 +7,25 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
-
-var _octiconsReact = require("@primer/octicons-react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _constants = require("../constants");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+var _Spinner = _interopRequireDefault(require("../Spinner"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _sx = _interopRequireDefault(require("../sx"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const pulseKeyframes = (0, _styledComponents.keyframes)(["0%{opacity:0.3;}10%{opacity:1;}100%{opacity:0.3;}"]);
-
 const Animation = _styledComponents.default.div.withConfig({
   displayName: "SelectMenuLoadingAnimation__Animation",
-  componentId: "c5vnsj-0"
-})(["padding:", " ", ";text-align:center;background-color:", ";animation-name:", ";animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite;", ""], (0, _constants.get)('space.6'), (0, _constants.get)('space.4'), (0, _constants.get)('colors.white'), pulseKeyframes, _constants.COMMON);
+  componentId: "sc-17k54td-0"
+})(["padding:", " ", ";text-align:center;background-color:", ";", ""], (0, _constants.get)('space.6'), (0, _constants.get)('space.4'), (0, _constants.get)('colors.canvas.overlay'), _sx.default);
 
 const SelectMenuLoadingAnimation = props => {
-  return /*#__PURE__*/_react.default.createElement(Animation, props, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    size: 32,
-    icon: _octiconsReact.OctofaceIcon
-  }));
+  return /*#__PURE__*/_react.default.createElement(Animation, props, /*#__PURE__*/_react.default.createElement(_Spinner.default, null));
 };
 
 SelectMenuLoadingAnimation.displayName = "SelectMenuLoadingAnimation";
-SelectMenuLoadingAnimation.propTypes = { ..._constants.COMMON.propTypes
-};
 var _default = SelectMenuLoadingAnimation;
 exports.default = _default;

package/lib/SelectMenu/SelectMenuModal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { WidthProps } from 'styled-system';
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+declare type StyledModalProps = {
+    filter?: boolean;
+} & WidthProps;
+declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {
+    align?: "left" | "right" | undefined;
+} & SxProp, never>;
+declare type SelectMenuModalInternalProps = Pick<StyledModalProps, 'width'> & ComponentProps<typeof ModalWrapper>;
+declare const SelectMenuModal: React.ForwardRefExoticComponent<Pick<SelectMenuModalInternalProps, "width" | "theme" | "sx" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "align"> & React.RefAttributes<HTMLDivElement>>;
+export declare type SelectMenuModalProps = ComponentProps<typeof SelectMenuModal>;
+export default SelectMenuModal;

package/lib/SelectMenu/SelectMenuModal.js

@@ -7,44 +7,40 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _constants = require("../constants");
-
 var _styledSystem = require("styled-system");
 
-var _theme = _interopRequireDefault(require("../theme"));
+var _constants = require("../constants");
 
 var _sx = _interopRequireDefault(require("../sx"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const animateModal = (0, _styledComponents.keyframes)(["0%{opacity:0;transform:scale(0.9);}"]);
-const modalStyles = (0, _styledComponents.css)(["position:relative;z-index:99;display:flex;", ";max-height:", ";margin:auto 0;", ";overflow:hidden;pointer-events:auto;flex-direction:column;background-color:", ";border-radius:", ";box-shadow:0 1px 5px rgba(27,31,35,0.15);animation:", " 0.12s cubic-bezier(0,0.1,0.1,1) backwards;@media (min-width:", "){height:auto;max-height:350px;margin:", " 0 ", " 0;font-size:", ";border:", " solid ", ";border-radius:", ";box-shadow:0 1px 5px ", ";}"], props => props.filter ? 'height: 80%' : '', props => props.filter ? 'none' : '66%', props => props.filter ? 'margin-top: 0' : '', (0, _constants.get)('colors.white'), (0, _constants.get)('radii.2'), animateModal, (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.grayDark'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.blackfade15'));
-const modalWrapperStyles = (0, _styledComponents.css)(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:flex;padding:", ";pointer-events:none;flex-direction:column;&::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:'';background-color:", ";@media (min-width:", "){display:none;}}@media (min-width:", "){position:absolute;top:auto;right:", ";bottom:auto;left:auto;padding:0;}"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.blackfade50'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('breakpoints.0'), props => props.align === 'right' ? '0' : 'auto');
+const modalStyles = (0, _styledComponents.css)(["position:relative;z-index:99;display:flex;", ";max-height:", ";margin:auto 0;", ";overflow:hidden;pointer-events:auto;flex-direction:column;background-color:", ";border-radius:", ";box-shadow:", ";animation:", " 0.12s cubic-bezier(0,0.1,0.1,1) backwards;@media (min-width:", "){height:auto;max-height:350px;margin:", " 0 ", " 0;font-size:", ";border:", " solid ", ";border-radius:", ";box-shadow:", ";}"], props => props.filter ? 'height: 80%' : '', props => props.filter ? 'none' : '66%', props => props.filter ? 'margin-top: 0' : '', (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.shadow.small'), animateModal, (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.shadow.small'));
+const modalWrapperStyles = (0, _styledComponents.css)(["position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:flex;padding:", ";pointer-events:none;flex-direction:column;&::before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:'';background-color:", ";@media (min-width:", "){display:none;}}@media (min-width:", "){position:absolute;top:auto;right:", ";bottom:auto;left:auto;padding:0;}"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.primer.canvas.backdrop'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('breakpoints.0'), props => props.align === 'right' ? '0' : 'auto');
 
 const Modal = _styledComponents.default.div.withConfig({
   displayName: "SelectMenuModal__Modal",
-  componentId: "fv9zw3-0"
+  componentId: "sc-1m5qo55-0"
 })(["", " ", ""], modalStyles, _styledSystem.width);
 
 const ModalWrapper = _styledComponents.default.div.withConfig({
   displayName: "SelectMenuModal__ModalWrapper",
-  componentId: "fv9zw3-1"
-})(["", " ", " ", ";"], modalWrapperStyles, _constants.COMMON, _sx.default);
+  componentId: "sc-1m5qo55-1"
+})(["", " ", ";"], modalWrapperStyles, _sx.default);
 
-const SelectMenuModal = _react.default.forwardRef(({
+const SelectMenuModal = /*#__PURE__*/_react.default.forwardRef(({
   children,
   theme,
-  width,
+  width: widthProp,
   ...rest
 }, forwardedRef) => {
   return /*#__PURE__*/_react.default.createElement(ModalWrapper, _extends({
@@ -54,22 +50,14 @@ const SelectMenuModal = _react.default.forwardRef(({
     ref: forwardedRef
   }), /*#__PURE__*/_react.default.createElement(Modal, {
     theme: theme,
-    width: width
+    width: widthProp
   }, children));
 });
 
 SelectMenuModal.defaultProps = {
   align: 'left',
-  theme: _theme.default,
   width: '300px'
 };
-SelectMenuModal.propTypes = {
-  align: _propTypes.default.oneOf(['left', 'right']),
-  theme: _propTypes.default.object,
-  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 SelectMenuModal.displayName = 'SelectMenu.Modal';
 var _default = SelectMenuModal;
 exports.default = _default;

package/lib/SelectMenu/SelectMenuTab.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+declare const StyledTab: import("styled-components").StyledComponent<"button", any, SxProp, never>;
+export declare type SelectMenuTabProps = {
+    tabName?: string;
+    index?: number;
+} & ComponentProps<typeof StyledTab>;
+declare const SelectMenuTab: {
+    ({ tabName, index, className, onClick, ...rest }: SelectMenuTabProps): JSX.Element;
+    displayName: string;
+};
+export default SelectMenuTab;

package/lib/SelectMenu/SelectMenuTab.js

@@ -5,39 +5,35 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _SelectMenuContext = require("./SelectMenuContext");
-
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _SelectMenuContext = require("./SelectMenuContext");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const tabStyles = (0, _styledComponents.css)(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:", ";border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:#dbedff;}"], (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('colors.gray.5'), (0, _constants.get)('colors.gray.1'), (0, _constants.get)('colors.border.gray'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.white'), (0, _constants.get)('colors.gray.9'), (0, _constants.get)('colors.white'), (0, _constants.get)('colors.border.gray'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('colors.border.gray'));
+const tabStyles = (0, _styledComponents.css)(["flex:1;padding:", " ", ";font-size:", ";font-weight:500;color:", ";text-align:center;background-color:transparent;border:0;box-shadow:inset 0 -1px 0 ", ";@media (min-width:", "){flex:none;padding:", " ", ";border:", " solid transparent;border-bottom-width:0;border-top-left-radius:", ";border-top-right-radius:", ";}&[aria-selected='true']{z-index:1;color:", ";background-color:", ";box-shadow:0 0 0 1px ", ";@media (min-width:", "){border-color:", ";box-shadow:none;}}&:focus{background-color:", ";}"], (0, _constants.get)('space.2'), (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.1'), (0, _constants.get)('space.3'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.text-primary'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('breakpoints.0'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.neutral.subtle'));
 
 const StyledTab = _styledComponents.default.button.withConfig({
   displayName: "SelectMenuTab__StyledTab",
-  componentId: "oezw3-0"
-})(["", " ", " ", ";"], tabStyles, _constants.COMMON, _sx.default);
+  componentId: "sc-ga32sz-0"
+})(["", " ", ";"], tabStyles, _sx.default);
 
 const SelectMenuTab = ({
-  tabName,
+  tabName = '',
   index,
   className,
   onClick,
@@ -50,14 +46,18 @@ const SelectMenuTab = ({
     onClick && onClick(e);
 
     if (!e.defaultPrevented) {
-      menuContext.setSelectedTab(tabName);
+      var _menuContext$setSelec;
+
+      (_menuContext$setSelec = menuContext.setSelectedTab) === null || _menuContext$setSelec === void 0 ? void 0 : _menuContext$setSelec.call(menuContext, tabName);
     }
   }; // if no tab is selected when the component renders, show the first tab
 
 
   (0, _react.useEffect)(() => {
     if (!menuContext.selectedTab && index === 0) {
-      menuContext.setSelectedTab(tabName);
+      var _menuContext$setSelec2;
+
+      (_menuContext$setSelec2 = menuContext.setSelectedTab) === null || _menuContext$setSelec2 === void 0 ? void 0 : _menuContext$setSelec2.call(menuContext, tabName);
     }
   }, [index, menuContext, tabName]);
   const isSelected = menuContext.selectedTab === tabName;
@@ -70,16 +70,6 @@ const SelectMenuTab = ({
 };
 
 SelectMenuTab.displayName = "SelectMenuTab";
-SelectMenuTab.defaultProps = {
-  theme: _theme.default
-};
-SelectMenuTab.propTypes = {
-  index: _propTypes.default.number,
-  onClick: _propTypes.default.func,
-  tabName: _propTypes.default.string,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
 SelectMenuTab.displayName = 'SelectMenu.Tab';
 var _default = SelectMenuTab;
 exports.default = _default;

package/lib/SelectMenu/SelectMenuTabPanel.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+declare const TabPanelBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+export declare type SelectMenuTabPanelProps = {
+    tabName?: string;
+} & ComponentProps<typeof TabPanelBase>;
+declare const TabPanel: {
+    ({ tabName, className, children, ...rest }: SelectMenuTabPanelProps): JSX.Element;
+    displayName: string;
+};
+export default TabPanel;

package/lib/SelectMenu/SelectMenuTabPanel.js

@@ -7,55 +7,44 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _SelectMenuContext = require("./SelectMenuContext");
-
-var _SelectMenuList = _interopRequireDefault(require("./SelectMenuList"));
-
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _constants = require("../constants");
 
 var _sx = _interopRequireDefault(require("../sx"));
 
+var _SelectMenuContext = require("./SelectMenuContext");
+
+var _SelectMenuList = _interopRequireDefault(require("./SelectMenuList"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TabPanelBase = ({
+const TabPanelBase = _styledComponents.default.div.withConfig({
+  displayName: "SelectMenuTabPanel__TabPanelBase",
+  componentId: "sc-ck0ipe-0"
+})(["border-top:", " solid ", ";", ";"], (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.muted'), _sx.default);
+
+const TabPanel = ({
   tabName,
   className,
   children,
   ...rest
 }) => {
   const menuContext = (0, _react.useContext)(_SelectMenuContext.MenuContext);
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
+  return /*#__PURE__*/_react.default.createElement(TabPanelBase, _extends({
     role: "tabpanel",
     className: className,
     hidden: menuContext.selectedTab !== tabName
   }, rest), /*#__PURE__*/_react.default.createElement(_SelectMenuList.default, null, children));
 };
 
-TabPanelBase.displayName = "TabPanelBase";
-const TabPanel = (0, _styledComponents.default)(TabPanelBase).withConfig({
-  displayName: "SelectMenuTabPanel__TabPanel",
-  componentId: "hgx3vc-0"
-})(["border-top:", " solid ", ";", " ", ";"], (0, _constants.get)('borderWidths.1'), (0, _constants.get)('colors.border.gray'), _constants.COMMON, _sx.default);
-TabPanel.defaultProps = {
-  theme: _theme.default
-};
-TabPanel.propTypes = {
-  tabName: _propTypes.default.string,
-  ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
+TabPanel.displayName = "TabPanel";
 TabPanel.displayName = 'SelectMenu.TabPanel';
 var _default = TabPanel;
 exports.default = _default;

package/lib/SelectMenu/SelectMenuTabs.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+declare const SelectMenuTabsBase: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+export declare type SelectMenuTabsProps = ComponentProps<typeof SelectMenuTabsBase>;
+declare const SelectMenuTabs: {
+    ({ children, ...rest }: SelectMenuTabsProps): JSX.Element;
+    displayName: string;
+};
+export default SelectMenuTabs;

package/lib/SelectMenu/SelectMenuTabs.js

@@ -11,13 +11,11 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _constants = require("../constants");
 
-var _theme = _interopRequireDefault(require("../theme"));
-
 var _sx = _interopRequireDefault(require("../sx"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,26 +23,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const tabWrapperStyles = (0, _styledComponents.css)(["display:flex;flex-shrink:0;margin-bottom:-1px;-webkit-overflow-scrolling:touch;overflow-x:auto;overflow-y:hidden;&::-webkit-scrollbar{display:none;}@media (min-width:", "){padding:0 ", ";margin-top:", ";}"], (0, _constants.get)('breakpoints.0'), (0, _constants.get)('space.2'), (0, _constants.get)('space.3'));
 
-const Tabs = ({
+const SelectMenuTabsBase = _styledComponents.default.div.withConfig({
+  displayName: "SelectMenuTabs__SelectMenuTabsBase",
+  componentId: "sc-kgg21o-0"
+})(["", " ", ";"], tabWrapperStyles, _sx.default);
+
+const SelectMenuTabs = ({
   children,
   ...rest
 }) => {
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
+  return /*#__PURE__*/_react.default.createElement(SelectMenuTabsBase, _extends({
     role: "tablist"
   }, rest), children);
 };
 
-Tabs.displayName = "Tabs";
-const SelectMenuTabs = (0, _styledComponents.default)(Tabs).withConfig({
-  displayName: "SelectMenuTabs",
-  componentId: "sc-17uzpv2-0"
-})(["", " ", " ", ";"], tabWrapperStyles, _constants.COMMON, _sx.default);
-SelectMenuTabs.defaultProps = {
-  theme: _theme.default
-};
-SelectMenuTabs.propTypes = { ..._constants.COMMON.propTypes,
-  ..._sx.default.propTypes
-};
+SelectMenuTabs.displayName = "SelectMenuTabs";
 SelectMenuTabs.displayName = 'SelectMenu.Tabs';
 var _default = SelectMenuTabs;
 exports.default = _default;

package/lib/SelectMenu/hooks/useKeyboardNav.d.ts

@@ -0,0 +1,2 @@
+export default useKeyboardNav;
+declare function useKeyboardNav(details: any, open: any, setOpen: any): void;

package/lib/SelectMenu/hooks/useKeyboardNav.js

@@ -83,6 +83,8 @@ function useKeyboardNav(details, open, setOpen) {
           }
         }
         break;
+
+      default:
     }
   }, [details, open, setOpen]);
   (0, _react.useEffect)(() => {

package/lib/SelectMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectMenu';
+export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';

package/lib/SelectMenu/index.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SelectMenu.default;
+  }
+});
 
 var _SelectMenu = _interopRequireDefault(require("./SelectMenu"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _SelectMenu.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/SelectPanel/SelectPanel.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { FilteredActionListProps } from '../FilteredActionList';
+import { OverlayProps } from '../Overlay';
+import { ItemInput } from '../ActionList/List';
+import { AnchoredOverlayProps } from '../AnchoredOverlay';
+import { AnchoredOverlayWrapperAnchorProps } from '../AnchoredOverlay/AnchoredOverlay';
+interface SelectPanelSingleSelection {
+    selected: ItemInput | undefined;
+    onSelectedChange: (selected: ItemInput | undefined) => void;
+}
+interface SelectPanelMultiSelection {
+    selected: ItemInput[];
+    onSelectedChange: (selected: ItemInput[]) => void;
+}
+interface SelectPanelBaseProps {
+    onOpenChange: (open: boolean, gesture: 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection') => void;
+    placeholder?: string;
+    overlayProps?: Partial<OverlayProps>;
+}
+export declare type SelectPanelProps = SelectPanelBaseProps & Omit<FilteredActionListProps, 'selectionVariant'> & Pick<AnchoredOverlayProps, 'open'> & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection);
+export declare function SelectPanel({ open, onOpenChange, renderAnchor, anchorRef: externalAnchorRef, placeholder, selected, onSelectedChange, filterValue: externalFilterValue, onFilterChange: externalOnFilterChange, items, textInputProps, overlayProps, sx, ...listProps }: SelectPanelProps): JSX.Element;
+export declare namespace SelectPanel {
+    var displayName: string;
+}
+export {};

package/lib/SelectPanel/SelectPanel.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectPanel = SelectPanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FilteredActionList = require("../FilteredActionList");
+
+var _DropdownMenu = require("../DropdownMenu");
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+var _useProvidedStateOrCreate = require("../hooks/useProvidedStateOrCreate");
+
+var _hooks = require("../hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function isMultiSelectVariant(selected) {
+  return Array.isArray(selected);
+}
+
+const focusZoneSettings = {
+  // Let FilteredActionList handle focus zone
+  disabled: true
+};
+
+function SelectPanel({
+  open,
+  onOpenChange,
+  renderAnchor = props => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, props),
+  anchorRef: externalAnchorRef,
+  placeholder,
+  selected,
+  onSelectedChange,
+  filterValue: externalFilterValue,
+  onFilterChange: externalOnFilterChange,
+  items,
+  textInputProps,
+  overlayProps,
+  sx,
+  ...listProps
+}) {
+  const [filterValue, setInternalFilterValue] = (0, _useProvidedStateOrCreate.useProvidedStateOrCreate)(externalFilterValue, undefined, '');
+  const onFilterChange = (0, _react.useCallback)((value, e) => {
+    externalOnFilterChange(value, e);
+    setInternalFilterValue(value);
+  }, [externalOnFilterChange, setInternalFilterValue]);
+  const anchorRef = (0, _hooks.useProvidedRefOrCreate)(externalAnchorRef);
+  const onOpen = (0, _react.useCallback)(gesture => onOpenChange(true, gesture), [onOpenChange]);
+  const onClose = (0, _react.useCallback)(gesture => {
+    onOpenChange(false, gesture);
+  }, [onOpenChange]);
+  const renderMenuAnchor = (0, _react.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 = (0, _react.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) => {
+          var _item$onAction;
+
+          (_item$onAction = item.onAction) === null || _item$onAction === void 0 ? void 0 : _item$onAction.call(item, 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.default.useRef(null);
+
+  const focusTrapSettings = {
+    initialFocusRef: inputRef
+  };
+  const extendedTextInputProps = (0, _react.useMemo)(() => {
+    return {
+      sx: {
+        m: 2
+      },
+      contrast: true,
+      ...textInputProps
+    };
+  }, [textInputProps]);
+  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }, /*#__PURE__*/_react.default.createElement(_FilteredActionList.FilteredActionList, _extends({
+    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'
+    }
+  })));
+}
+
+SelectPanel.displayName = "SelectPanel";
+SelectPanel.displayName = 'SelectPanel';

package/lib/SelectPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectPanel } from './SelectPanel';
+export type { SelectPanelProps } from './SelectPanel';

package/lib/SelectPanel/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SelectPanel", {
+  enumerable: true,
+  get: function () {
+    return _SelectPanel.SelectPanel;
+  }
+});
+
+var _SelectPanel = require("./SelectPanel");