@pingux/astro 2.155.0-alpha.0 → 2.155.0

package/lib/cjs/components/Button/Buttons.styles.js

@@ -295,6 +295,21 @@ var exampleText = _objectSpread(_objectSpread({}, base), {}, {
 var paginationMenu = _objectSpread(_objectSpread({}, link), {}, {
   fontWeight: 0
 });
+var tabLabelButton = _objectSpread(_objectSpread({}, _Text.searchNavTabLabel), {}, {
+  backgroundColor: 'transparent',
+  mb: '10px',
+  p: '0px',
+  borderImage: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  '&.is-hovered': {
+    color: 'active',
+    cursor: 'pointer'
+  },
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    borderRadius: '4px'
+  })
+});
 var _default = {
   colorBlock: colorBlock,
   colorBlockPrimary: colorBlockPrimary,
@@ -321,6 +336,7 @@ var _default = {
   quiet: quiet,
   success: success,
   withIcon: withIcon,
-  filter: filter
+  filter: filter,
+  searchNavTabLabel: tabLabelButton
 };
 exports["default"] = _default;

package/lib/cjs/components/SearchNav/MoreItemsPopover.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MoreItemsPopoverProps } from '../../types/searchNav';
+declare const MoreItemsPopover: (props: MoreItemsPopoverProps) => React.JSX.Element;
+export default MoreItemsPopover;

package/lib/cjs/components/SearchNav/MoreItemsPopover.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ChevronDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronDownIcon"));
+var _ChevronUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronUpIcon"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var MoreItemsPopover = function MoreItemsPopover(props) {
+  var buttonRef = props.buttonRef,
+    items = props.items,
+    moreButtonText = props.moreButtonText,
+    onOpenChange = props.onOpenChange,
+    popoverButtonProps = props.popoverButtonProps,
+    popoverMenuProps = props.popoverMenuProps,
+    popoverProps = props.popoverProps,
+    setSelectedKey = props.setSelectedKey,
+    tabProps = props.tabProps;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (onOpenChange) {
+      onOpenChange(isOpen);
+    }
+  }, [isOpen]);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    role: "listitem",
+    variant: "searchNav.tab",
+    isRow: true,
+    alignItems: "center",
+    ml: "sm"
+  }, tabProps), (0, _react2.jsx)(_index.PopoverMenu, (0, _extends2["default"])({}, popoverProps, {
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }), (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    tabIndex: 0,
+    variant: "searchNavTabLabel",
+    ref: buttonRef
+  }, popoverButtonProps), moreButtonText, (0, _react2.jsx)(_index.Icon, {
+    icon: isOpen ? _ChevronUpIcon["default"] : _ChevronDownIcon["default"],
+    ml: "2px",
+    mt: "2px",
+    size: 13,
+    title: {
+      name: 'Add Circle Icon'
+    }
+  })), (0, _react2.jsx)(_index.Menu, (0, _extends2["default"])({
+    onAction: function onAction(e) {
+      setSelectedKey(e);
+    }
+  }, popoverMenuProps), (0, _map["default"])(items).call(items, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key,
+      textValue: item.text
+    }, item.text);
+  }))));
+};
+var _default = MoreItemsPopover;
+exports["default"] = _default;

package/lib/cjs/components/SearchNav/SearchNav.chromatic.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/SearchNav/SearchNav.chromatic.stories.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var _default = {
+  title: 'Chromatic Only Search Nav Responsive'
+};
+exports["default"] = _default;
+var items = [{
+  text: 'Overview',
+  key: 'Overview',
+  children: (0, _react2.jsx)(_index.Text, null, "Overview")
+}, {
+  text: 'Configuration',
+  key: 'Configuration',
+  children: (0, _react2.jsx)(_index.Text, null, "Configuration")
+}, {
+  text: 'Resources',
+  key: 'Resources',
+  children: (0, _react2.jsx)(_index.Text, null, "Resources")
+}, {
+  text: 'Policies',
+  key: 'Policies',
+  children: (0, _react2.jsx)(_index.Text, null, "Policies")
+}, {
+  text: 'Attribute Mappings',
+  key: 'Attribute Mappings',
+  children: (0, _react2.jsx)(_index.Text, null, "Attribute body")
+}, {
+  text: 'Access',
+  key: 'Access',
+  children: (0, _react2.jsx)(_index.Text, null, "Access")
+}, {
+  text: 'Integration',
+  key: 'Integration',
+  children: (0, _react2.jsx)(_index.Text, null, "Integration")
+}];
+var Default = function Default() {
+  var _items$find, _items$find2, _items$find3;
+  var _useState = (0, _react.useState)('Access'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Box, {
+    maxWidth: "600px"
+  }, (0, _react2.jsx)(_index.SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    p: "sm"
+  }, (_items$find = (0, _find["default"])(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find === void 0 ? void 0 : _items$find.children)), (0, _react2.jsx)(_index.Box, {
+    maxWidth: "400px"
+  }, (0, _react2.jsx)(_index.SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    p: "sm"
+  }, (_items$find2 = (0, _find["default"])(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find2 === void 0 ? void 0 : _items$find2.children)), (0, _react2.jsx)(_index.Box, {
+    maxWidth: "200px"
+  }, (0, _react2.jsx)(_index.SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    p: "sm"
+  }, (_items$find3 = (0, _find["default"])(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find3 === void 0 ? void 0 : _items$find3.children)));
+};
+exports.Default = Default;

package/lib/cjs/components/SearchNav/SearchNav.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SearchNavProps } from '../../types/searchNav';
+/**
+ * 1. Measures the width of all items based on their refs.
+ */
+export declare const measureItemWidths: (items: any, measurementRefs: any) => {};
+/**
+ * 2. Calculates the number of visible items based on available container width
+ * and item widths.
+ */
+export declare const calculateVisibleCount: (containerWidth: any, moreButtonWidth: any, orderedItems: any, itemWidths: any) => number;
+declare const SearchNav: React.ForwardRefExoticComponent<SearchNavProps & React.RefAttributes<HTMLElement>>;
+export default SearchNav;

package/lib/cjs/components/SearchNav/SearchNav.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.measureItemWidths = exports["default"] = exports.calculateVisibleCount = void 0;
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@react-aria/utils");
+var _hooks = require("../../hooks");
+var _useProgressiveState3 = _interopRequireDefault(require("../../hooks/useProgressiveState"));
+var _index = require("../../index");
+var _MoreItemsPopover = _interopRequireDefault(require("./MoreItemsPopover"));
+var _SearchNavTab = _interopRequireDefault(require("./SearchNavTab"));
+var _react2 = require("@emotion/react");
+var _excluded = ["defaultSelectedKey", "items", "labelProps", "moreButtonText", "onSelectionChange", "onOpenChange", "popoverButtonProps", "popoverMenuProps", "popoverProps", "rowProps", "selectedKey", "setSelectedKey", "tabProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var TAB_MARGIN_WIDTH = 10; // Example constant value
+var MORE_BUTTON_WIDTH = 60;
+
+/**
+ * 1. Measures the width of all items based on their refs.
+ */
+var measureItemWidths = function measureItemWidths(items, measurementRefs) {
+  var widths = {};
+  for (var i = 0; i < items.length; i += 1) {
+    var item = items[i];
+    var itemRef = measurementRefs.current[item.key];
+    if (itemRef) {
+      widths[item.key] = itemRef.offsetWidth;
+    }
+  }
+  return widths;
+};
+
+/**
+ * 2. Calculates the number of visible items based on available container width
+ * and item widths.
+ */
+exports.measureItemWidths = measureItemWidths;
+var calculateVisibleCount = function calculateVisibleCount(containerWidth, moreButtonWidth, orderedItems, itemWidths) {
+  var totalItemsWidth = 0;
+  var visibleCount = 0;
+  for (var i = 0; i < orderedItems.length; i += 1) {
+    var item = orderedItems[i];
+    var itemWidth = itemWidths[item.key] + TAB_MARGIN_WIDTH;
+    if (itemWidth) {
+      var itemsRemaining = orderedItems.length - (visibleCount + 1);
+      // Only require space for 'more' button if there are items that will be hidden
+      var requiredSpaceForMoreButton = itemsRemaining > 0 ? moreButtonWidth : 0;
+      var widthNeeded = totalItemsWidth + itemWidth + requiredSpaceForMoreButton;
+      if (widthNeeded > containerWidth) {
+        break;
+      }
+      totalItemsWidth += itemWidth;
+      visibleCount += 1;
+    }
+  }
+  return visibleCount;
+};
+exports.calculateVisibleCount = calculateVisibleCount;
+var SearchNav = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var defaultSelectedKey = props.defaultSelectedKey,
+    items = props.items,
+    labelProps = props.labelProps,
+    _props$moreButtonText = props.moreButtonText,
+    moreButtonText = _props$moreButtonText === void 0 ? 'More' : _props$moreButtonText,
+    onSelectionChange = props.onSelectionChange,
+    onOpenChange = props.onOpenChange,
+    popoverButtonProps = props.popoverButtonProps,
+    popoverMenuProps = props.popoverMenuProps,
+    popoverProps = props.popoverProps,
+    rowProps = props.rowProps,
+    selectedKeyProp = props.selectedKey,
+    setSelectedKeyProp = props.setSelectedKey,
+    tabProps = props.tabProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useProgressiveState = (0, _useProgressiveState3["default"])(selectedKeyProp, defaultSelectedKey),
+    _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
+    selectedKey = _useProgressiveState2[0],
+    setSelectedKey = _useProgressiveState2[1];
+  var _useState = (0, _react.useState)((0, _from["default"])(items)),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    orderedItems = _useState2[0],
+    setOrderedItems = _useState2[1];
+  var buttonRef = (0, _react.useRef)(null);
+  var measurementRefs = (0, _react.useRef)({});
+  var tabListRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var _useState3 = (0, _react.useState)(items.length),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    numVisibleItems = _useState4[0],
+    setNumVisibleItems = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setOrderedItems(items);
+  }, [items]);
+  var calculateVisibleItems = function calculateVisibleItems() {
+    var _buttonRef$current;
+    if (!tabListRef.current) return;
+
+    // Step 1: Measure (updates itemWidths ref in parent scope if needed, or returns new object)
+    var currentItemWidths = measureItemWidths(items, measurementRefs);
+    var containerWidth = tabListRef.current.offsetWidth;
+    var moreButtonWidth = ((_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth) || MORE_BUTTON_WIDTH;
+
+    // Step 2: Calculate visible count (pure logic)
+    var visibleCount = calculateVisibleCount(containerWidth, moreButtonWidth, orderedItems, currentItemWidths);
+
+    // Step 3: Update state
+    setNumVisibleItems(visibleCount);
+  };
+  (0, _utils.useResizeObserver)({
+    ref: tabListRef,
+    onResize: calculateVisibleItems
+  });
+  var visibleItems = (0, _react.useMemo)(function () {
+    return (0, _slice["default"])(orderedItems).call(orderedItems, 0, numVisibleItems);
+  }, [orderedItems, numVisibleItems]);
+  var hiddenItems = (0, _react.useMemo)(function () {
+    return (0, _slice["default"])(orderedItems).call(orderedItems, numVisibleItems);
+  }, [orderedItems, numVisibleItems]);
+  (0, _react.useEffect)(function () {
+    if (onSelectionChange) {
+      onSelectionChange(selectedKey);
+    }
+  }, [selectedKey]);
+  (0, _utils.useLayoutEffect)(function () {
+    calculateVisibleItems();
+  }, [items]);
+  var reorderTabs = function reorderTabs() {
+    var selectedIndex = (0, _findIndex["default"])(orderedItems).call(orderedItems, function (item) {
+      return item.key === selectedKey;
+    });
+    var isSelectedHidden = selectedIndex >= numVisibleItems;
+    if (isSelectedHidden && selectedIndex !== -1 && numVisibleItems > 0) {
+      var _context;
+      var newOrderedItems = (0, _concat["default"])(_context = []).call(_context, orderedItems);
+      var selectedItem = newOrderedItems[selectedIndex];
+      var displacedItem = newOrderedItems[numVisibleItems - 1];
+      newOrderedItems[numVisibleItems - 1] = selectedItem;
+      newOrderedItems[selectedIndex] = displacedItem;
+      setOrderedItems(newOrderedItems);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    reorderTabs();
+  }, [selectedKey, numVisibleItems]);
+  var handleSelection = function handleSelection(key) {
+    setSelectedKey(key);
+    if (setSelectedKeyProp) {
+      setSelectedKeyProp(key);
+    }
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    maxWidth: "100%",
+    role: "navigation"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    role: "list",
+    isRow: true,
+    ref: tabListRef,
+    alignItems: "center",
+    variant: "searchNav.list"
+  }, others, rowProps), (0, _map["default"])(visibleItems).call(visibleItems, function (item) {
+    return (0, _react2.jsx)(_SearchNavTab["default"], {
+      key: item.key,
+      item: item,
+      selectedKey: selectedKey,
+      setSelectedKey: handleSelection,
+      tabProps: tabProps,
+      labelProps: labelProps
+    });
+  }), hiddenItems.length > 0 && (0, _react2.jsx)(_MoreItemsPopover["default"], {
+    onOpenChange: onOpenChange,
+    items: hiddenItems,
+    setSelectedKey: handleSelection,
+    buttonRef: buttonRef,
+    tabProps: tabProps,
+    popoverProps: popoverProps,
+    popoverButtonProps: popoverButtonProps,
+    popoverMenuProps: popoverMenuProps,
+    moreButtonText: moreButtonText
+  })), (0, _react2.jsx)(_index.Box
+  // Off-screen positioning to allow measurement without affecting layout
+  , {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      left: '-9999px',
+      overflow: 'hidden'
+    }
+  }, (0, _map["default"])(items).call(items, function (item) {
+    return (0, _react2.jsx)(_index.Box, {
+      sx: {
+        maxWidth: 'fit-content'
+      },
+      key: "".concat(item.key, "-box")
+    }, (0, _react2.jsx)(_index.Text, {
+      key: "hidden-".concat(item.key),
+      ref: function ref(el) {
+        measurementRefs.current[item.key] = el;
+      }
+    }, item.text));
+  })));
+});
+var _default = SearchNav;
+exports["default"] = _default;

package/lib/cjs/components/SearchNav/SearchNav.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/cjs/components/SearchNav/SearchNav.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../index");
+var _SearchNav = _interopRequireDefault(require("./SearchNav"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var _default = {
+  title: 'Components/SearchNav'
+};
+exports["default"] = _default;
+var items = [{
+  text: 'Overview',
+  key: 'Overview',
+  children: (0, _react2.jsx)(_index.Text, null, "Overview")
+}, {
+  text: 'Configuration',
+  key: 'Configuration',
+  children: (0, _react2.jsx)(_index.Text, null, "Configuration")
+}, {
+  text: 'Resources',
+  key: 'Resources',
+  children: (0, _react2.jsx)(_index.Text, null, "Resources")
+}, {
+  text: 'Policies',
+  key: 'Policies',
+  children: (0, _react2.jsx)(_index.Text, null, "Policies")
+}, {
+  text: 'Attribute Mappings',
+  key: 'Attribute Mappings',
+  children: (0, _react2.jsx)(_index.Text, null, "Attribute body")
+}, {
+  text: 'Access',
+  key: 'Access',
+  children: (0, _react2.jsx)(_index.Text, null, "Access")
+}, {
+  text: 'Integration',
+  key: 'Integration',
+  children: (0, _react2.jsx)(_index.Text, null, "Integration")
+}];
+var Default = function Default() {
+  var _items$find;
+  var _useState = (0, _react.useState)('Policies'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return (0, _react2.jsx)(_index.Box, {
+    maxWidth: "600px"
+  }, (0, _react2.jsx)(_SearchNav["default"], {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), (0, _react2.jsx)(_index.Box, {
+    p: "sm"
+  }, (_items$find = (0, _find["default"])(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find === void 0 ? void 0 : _items$find.children));
+};
+exports.Default = Default;

package/lib/cjs/components/SearchNav/SearchNav.styles.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    tab: {
+        pt: string;
+        cursor: string;
+        alignItems: string;
+        display: string;
+        borderBottom: string;
+        outline: string;
+        marginBottom: string;
+        position: string;
+        zIndex: string;
+        '&.is-focused': {
+            '& > span': {
+                borderRadius: string;
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
+        '&.is-disabled': {
+            cursor: string;
+        };
+        '&.is-selected': {
+            borderBottomWidth: string;
+            borderBottomColor: string;
+        };
+    };
+    list: {
+        borderBottom: string;
+        borderBottomColor: string;
+    };
+};
+export default _default;

package/lib/cjs/components/SearchNav/SearchNav.styles.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Buttons = require("../Button/Buttons.styles");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var tab = {
+  pt: 'md',
+  cursor: 'pointer',
+  alignItems: 'center',
+  display: 'inline-flex',
+  borderBottom: '2px solid transparent',
+  outline: 'none',
+  marginBottom: '-1px',
+  position: 'relative',
+  zIndex: '2',
+  '&.is-focused': {
+    '& > span': _objectSpread(_objectSpread({}, _Buttons.defaultFocus), {}, {
+      borderRadius: '4px'
+    })
+  },
+  '&.is-disabled': {
+    cursor: 'default'
+  },
+  '&.is-selected': {
+    borderBottomWidth: '2px',
+    borderBottomColor: 'active'
+  }
+};
+var list = {
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.hairline'
+};
+var _default = {
+  tab: tab,
+  list: list
+};
+exports["default"] = _default;

package/lib/cjs/components/SearchNav/SearchNav.test.d.ts

@@ -0,0 +1 @@
+export {};