@pingux/astro 2.154.1 → 2.155.0-alpha.1

package/lib/components/SearchNav/SearchNav.js

@@ -0,0 +1,203 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["defaultSelectedKey", "items", "labelProps", "moreButtonText", "onSelectionChange", "onOpenChange", "popoverButtonProps", "popoverMenuProps", "popoverProps", "rowProps", "selectedKey", "setSelectedKey", "tabProps"];
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import { useLocalOrForwardRef } from '../../hooks';
+import useProgressiveState from '../../hooks/useProgressiveState';
+import { Box, Text } from '../../index';
+import MoreItemsPopover from './MoreItemsPopover';
+import SearchNavTab from './SearchNavTab';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TAB_MARGIN_WIDTH = 10; // Example constant value
+var MORE_BUTTON_WIDTH = 60;
+
+/**
+ * 1. Measures the width of all items based on their refs.
+ */
+export 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.
+ */
+
+export 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;
+};
+var SearchNav = /*#__PURE__*/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 = _objectWithoutProperties(props, _excluded);
+  var _useProgressiveState = useProgressiveState(selectedKeyProp, defaultSelectedKey),
+    _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+    selectedKey = _useProgressiveState2[0],
+    setSelectedKey = _useProgressiveState2[1];
+  var _useState = useState(_Array$from(items)),
+    _useState2 = _slicedToArray(_useState, 2),
+    orderedItems = _useState2[0],
+    setOrderedItems = _useState2[1];
+  var buttonRef = useRef(null);
+  var measurementRefs = useRef({});
+  var tabListRef = useLocalOrForwardRef(ref);
+  var _useState3 = useState(items.length),
+    _useState4 = _slicedToArray(_useState3, 2),
+    numVisibleItems = _useState4[0],
+    setNumVisibleItems = _useState4[1];
+  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);
+  };
+  useResizeObserver({
+    ref: tabListRef,
+    onResize: calculateVisibleItems
+  });
+  var visibleItems = useMemo(function () {
+    return _sliceInstanceProperty(orderedItems).call(orderedItems, 0, numVisibleItems);
+  }, [orderedItems, numVisibleItems]);
+  var hiddenItems = useMemo(function () {
+    return _sliceInstanceProperty(orderedItems).call(orderedItems, numVisibleItems);
+  }, [orderedItems, numVisibleItems]);
+  useEffect(function () {
+    if (onSelectionChange) {
+      onSelectionChange(selectedKey);
+    }
+  }, [selectedKey]);
+  useLayoutEffect(function () {
+    calculateVisibleItems();
+  }, [items]);
+  var reorderTabs = function reorderTabs() {
+    var selectedIndex = _findIndexInstanceProperty(orderedItems).call(orderedItems, function (item) {
+      return item.key === selectedKey;
+    });
+    var isSelectedHidden = selectedIndex >= numVisibleItems;
+    if (isSelectedHidden && selectedIndex !== -1 && numVisibleItems > 0) {
+      var _context;
+      var newOrderedItems = _concatInstanceProperty(_context = []).call(_context, orderedItems);
+      var selectedItem = newOrderedItems[selectedIndex];
+      var displacedItem = newOrderedItems[numVisibleItems - 1];
+      newOrderedItems[numVisibleItems - 1] = selectedItem;
+      newOrderedItems[selectedIndex] = displacedItem;
+      setOrderedItems(newOrderedItems);
+    }
+  };
+  useEffect(function () {
+    reorderTabs();
+  }, [selectedKey, numVisibleItems]);
+  var handleSelection = function handleSelection(key) {
+    setSelectedKey(key);
+    if (setSelectedKeyProp) {
+      setSelectedKeyProp(key);
+    }
+  };
+  return ___EmotionJSX(Box, {
+    maxWidth: "100%",
+    role: "navigation"
+  }, ___EmotionJSX(Box, _extends({
+    role: "list",
+    isRow: true,
+    ref: tabListRef,
+    alignItems: "center",
+    variant: "searchNav.list"
+  }, others, rowProps), _mapInstanceProperty(visibleItems).call(visibleItems, function (item) {
+    return ___EmotionJSX(SearchNavTab, {
+      key: item.key,
+      item: item,
+      selectedKey: selectedKey,
+      setSelectedKey: handleSelection,
+      tabProps: tabProps,
+      labelProps: labelProps
+    });
+  }), hiddenItems.length > 0 && ___EmotionJSX(MoreItemsPopover, {
+    onOpenChange: onOpenChange,
+    items: hiddenItems,
+    setSelectedKey: handleSelection,
+    buttonRef: buttonRef,
+    tabProps: tabProps,
+    popoverProps: popoverProps,
+    popoverButtonProps: popoverButtonProps,
+    popoverMenuProps: popoverMenuProps,
+    moreButtonText: moreButtonText
+  })), ___EmotionJSX(Box
+  // Off-screen positioning to allow measurement without affecting layout
+  , {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      left: '-9999px',
+      overflow: 'hidden'
+    }
+  }, _mapInstanceProperty(items).call(items, function (item) {
+    return ___EmotionJSX(Box, {
+      sx: {
+        maxWidth: 'fit-content'
+      },
+      key: "".concat(item.key, "-box")
+    }, ___EmotionJSX(Text, {
+      key: "hidden-".concat(item.key),
+      ref: function ref(el) {
+        measurementRefs.current[item.key] = el;
+      }
+    }, item.text));
+  })));
+});
+export default SearchNav;

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

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import React, { useState } from 'react';
+import { Box, Text } from '../../index';
+import SearchNav from './SearchNav';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/SearchNav'
+};
+var items = [{
+  text: 'Overview',
+  key: 'Overview',
+  children: ___EmotionJSX(Text, null, "Overview")
+}, {
+  text: 'Configuration',
+  key: 'Configuration',
+  children: ___EmotionJSX(Text, null, "Configuration")
+}, {
+  text: 'Resources',
+  key: 'Resources',
+  children: ___EmotionJSX(Text, null, "Resources")
+}, {
+  text: 'Policies',
+  key: 'Policies',
+  children: ___EmotionJSX(Text, null, "Policies")
+}, {
+  text: 'Attribute Mappings',
+  key: 'Attribute Mappings',
+  children: ___EmotionJSX(Text, null, "Attribute body")
+}, {
+  text: 'Access',
+  key: 'Access',
+  children: ___EmotionJSX(Text, null, "Access")
+}, {
+  text: 'Integration',
+  key: 'Integration',
+  children: ___EmotionJSX(Text, null, "Integration")
+}];
+export var Default = function Default() {
+  var _items$find;
+  var _useState = useState('Policies'),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  var setSelectedKeyCallback = function setSelectedKeyCallback(e) {
+    setSelectedKey(e);
+  };
+  return ___EmotionJSX(Box, {
+    maxWidth: "600px"
+  }, ___EmotionJSX(SearchNav, {
+    items: items,
+    selectedKey: selectedKey,
+    setSelectedKey: function setSelectedKey(e) {
+      return setSelectedKeyCallback(e);
+    }
+  }), ___EmotionJSX(Box, {
+    p: "sm"
+  }, (_items$find = _findInstanceProperty(items).call(items, function (item) {
+    return item.key === selectedKey;
+  })) === null || _items$find === void 0 ? void 0 : _items$find.children));
+};

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

@@ -0,0 +1,43 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
+import { defaultFocus } from '../Button/Buttons.styles';
+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({}, defaultFocus), {}, {
+      borderRadius: '4px'
+    })
+  },
+  '&.is-disabled': {
+    cursor: 'default'
+  },
+  '&.is-selected': {
+    borderBottomWidth: '2px',
+    borderBottomColor: 'active'
+  }
+};
+var list = {
+  borderBottom: '1px solid',
+  borderBottomColor: 'border.hairline'
+};
+export default {
+  tab: tab,
+  list: list
+};