@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,183 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["state"],
+    _excluded2 = ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
+
+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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTabList, useTabPanel } from '@react-aria/tabs';
+import { useTabListState } from '@react-stately/tabs';
+import Box from '../Box';
+import { CollectionTab } from '../Tab';
+import ORIENTATION from '../../utils/devUtils/constants/orientation';
+import { usePropWarning } from '../../hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var TabsContext = /*#__PURE__*/React.createContext({});
+/**
+ * Tabs are used to divide content, navigate to other views, and indicate work progress.
+ */
+
+var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var state = _ref.state,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var tabPanelRef = useRef();
+  var children = props.children,
+      tabPanelProps = props.tabPanelProps;
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return tabPanelRef.current;
+  });
+
+  var _useTabPanel = useTabPanel(props, state, tabPanelRef),
+      raTabPanelProps = _useTabPanel.tabPanelProps;
+
+  return ___EmotionJSX(Box, _extends({}, tabPanelProps, raTabPanelProps, {
+    ref: tabPanelRef
+  }), children);
+});
+var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
+
+  var children = props.children,
+      isDisabled = props.isDisabled,
+      items = props.items,
+      onSelectionChange = props.onSelectionChange,
+      orientation = props.orientation,
+      mode = props.mode,
+      tabListProps = props.tabListProps,
+      tabPanelProps = props.tabPanelProps,
+      others = _objectWithoutProperties(props, _excluded2);
+
+  var tabListRef = useRef();
+  usePropWarning(props, 'disabled', 'isDisabled');
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return tabListRef.current;
+  });
+  var allItems = [];
+
+  if (mode === 'list') {
+    _forEachInstanceProperty(items).call(items, function (item) {
+      var _context;
+
+      allItems = _concatInstanceProperty(_context = []).call(_context, allItems, [item]);
+
+      if (item.list) {
+        var _context2, _context3;
+
+        var list = _mapInstanceProperty(_context2 = item.list).call(_context2, function (el) {
+          return _objectSpread(_objectSpread({}, el), {}, {
+            isListItem: true
+          });
+        });
+
+        allItems = _concatInstanceProperty(_context3 = []).call(_context3, allItems, list);
+      }
+    });
+  }
+
+  var state = useTabListState(_objectSpread(_objectSpread({}, props), {}, {
+    onSelectionChange: onSelectionChange,
+    items: mode === 'list' ? allItems : items
+  }));
+
+  var _useTabList = useTabList(props, state, tabListRef),
+      raTabListProps = _useTabList.tabListProps;
+
+  return ___EmotionJSX(TabsContext.Provider, {
+    value: state
+  }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
+    variant: "tabs",
+    gap: "25px",
+    isRow: orientation === ORIENTATION.HORIZONTAL
+  }, tabListProps, raTabListProps, {
+    ref: tabListRef
+  }), _mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = _Array$from(state.collection)).call(_context5, function (item) {
+    var _item$value;
+
+    return !(item !== null && item !== void 0 && (_item$value = item.value) !== null && _item$value !== void 0 && _item$value.isListItem);
+  })).call(_context4, function (item) {
+    var _item$props;
+
+    return ___EmotionJSX(CollectionTab, {
+      key: item.key,
+      item: item,
+      isDisabled: isDisabled,
+      orientation: orientation,
+      mode: mode,
+      slots: item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.slots
+    });
+  })), ___EmotionJSX(TabPanel, {
+    key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
+    state: state,
+    tabPanelProps: tabPanelProps
+  }, ((_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.props.children) || ((_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.props.content))));
+});
+Tabs.propTypes = {
+  /** The default tab key to be selected. (uncontrolled) */
+  defaultSelectedKey: PropTypes.string,
+
+  /** Array of keys to disable within the tab list. */
+  disabledKeys: PropTypes.arrayOf(PropTypes.string),
+
+  /** The tab key that is currently selected. (controlled) */
+  selectedKey: PropTypes.string,
+
+  /** Determines the arrangement of the tablist. */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
+  /** Determines the behavior model for the tabs. */
+  mode: PropTypes.oneOf(['default', 'tooltip', 'list']),
+
+  /**
+   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+  */
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+
+  /** Whether the entire tablist is disabled. */
+  isDisabled: PropTypes.bool,
+
+  /** Handler that is called when the selected tab has changed. */
+  onSelectionChange: PropTypes.func,
+
+  /** A props object that is subsequently spread into the rendered tablist. */
+  tabListProps: PropTypes.shape({}),
+
+  /** Props object that is spread directly into all of the tab panel wrapper elements. */
+  tabPanelProps: PropTypes.shape({}),
+
+  /** Whether tabs are activated automatically on focus or manually¸ */
+  keyboardActivation: PropTypes.oneOf(['automatic', 'manual'])
+};
+Tabs.defaultProps = {
+  isDisabled: false,
+  orientation: 'horizontal',
+  mode: 'default',
+  keyboardActivation: 'manual'
+};
+TabPanel.propTypes = {
+  state: PropTypes.shape({}),
+  tabPanelProps: PropTypes.shape({})
+};
+Tabs.displayName = 'Tabs';
+export default Tabs;

package/lib/components/Tabs/Tabs.stories.js

@@ -0,0 +1,255 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import Earth from 'mdi-react/GlobeModelIcon';
+import LockIcon from 'mdi-react/LockIcon';
+import Tabs from './Tabs';
+import Tab from '../Tab';
+import Icon from '../Icon';
+import Text from '../Text';
+import { Chip } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Tabs',
+  component: Tabs,
+  argTypes: {
+    isDisabled: {},
+    orientation: {},
+    mode: {},
+    defaultSelectedKey: {},
+    selectedKey: {
+      control: {
+        type: 'none'
+      }
+    },
+    tabListProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    tabPanelProps: {
+      control: {
+        type: 'none'
+      }
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+var tabs = [{
+  name: 'Tab 1',
+  children: 'Tab 1 body'
+}, {
+  name: 'Tab 2',
+  children: 'Tab 2 body'
+}, {
+  name: 'Tab 3',
+  children: 'Tab 3 body'
+}];
+export var Uncontrolled = function Uncontrolled(args) {
+  return ___EmotionJSX(Tabs, _extends({
+    items: tabs
+  }, args), ___EmotionJSX(Tab, {
+    key: "tab1",
+    title: "Tab 1"
+  }, ___EmotionJSX(Text, null, "This is content for Tab 1")), ___EmotionJSX(Tab, {
+    key: "tab2",
+    title: "Tab 2"
+  }, ___EmotionJSX(Text, null, "This is content for Tab 2")));
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(tabs[0].name),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentTab = _useState2[0],
+      setCurrentTab = _useState2[1];
+
+  return ___EmotionJSX(Tabs, {
+    selectedKey: currentTab,
+    onSelectionChange: setCurrentTab,
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name,
+      textValue: item.name
+    }, item.children);
+  });
+};
+export var WithIcon = function WithIcon() {
+  return ___EmotionJSX(Tabs, {
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name,
+      icon: ___EmotionJSX(Icon, {
+        icon: Earth,
+        size: 20,
+        color: "active",
+        mb: 10
+      })
+    }, item.children);
+  });
+};
+export var WithTooltips = function WithTooltips() {
+  return ___EmotionJSX(Tabs, {
+    mode: "tooltip",
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name,
+      textValue: item.name
+    }, item.children);
+  });
+};
+export var Centered = function Centered() {
+  return ___EmotionJSX(Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    },
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name
+    }, item.children);
+  });
+};
+export var DisabledSingleTab = function DisabledSingleTab() {
+  return ___EmotionJSX(Tabs, {
+    items: tabs,
+    disabledKeys: ['Tab 2']
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name
+    }, item.children);
+  });
+};
+export var DisabledAllTabs = function DisabledAllTabs() {
+  return ___EmotionJSX(Tabs, {
+    isDisabled: true,
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name
+    }, item.children);
+  });
+};
+export var CustomTabLine = function CustomTabLine() {
+  return ___EmotionJSX(Tabs, {
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name,
+      tabLineProps: {
+        bg: 'red'
+      }
+    }, item.children);
+  });
+};
+export var TabPanelProps = function TabPanelProps() {
+  return ___EmotionJSX(Tabs, {
+    tabPanelProps: {
+      color: 'green',
+      fontWeight: 500
+    },
+    items: tabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name
+    }, item.children);
+  });
+};
+export var ContentSlots = function ContentSlots() {
+  var beforeTabNode = ___EmotionJSX(Icon, {
+    icon: LockIcon,
+    sx: {
+      marginTop: 10,
+      marginRight: 5
+    }
+  });
+
+  var nodeSx = {
+    alignItems: 'center',
+    backgroundColor: 'neutral.95',
+    borderRadius: '50%',
+    color: 'neutral.30',
+    fontSize: 'sm',
+    height: 20,
+    justifyContent: 'center',
+    marginLeft: 6,
+    marginTop: 10,
+    minWidth: 20
+  };
+
+  var afterTabNode = ___EmotionJSX(Chip, {
+    sx: nodeSx
+  }, "14");
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Tabs, {
+    items: tabs,
+    mb: 50
+  }, ___EmotionJSX(Tab, {
+    key: "tab1",
+    title: "Tab 1",
+    slots: {
+      beforeTab: beforeTabNode
+    }
+  }, ___EmotionJSX(Text, null, "This is content for Tab 1")), ___EmotionJSX(Tab, {
+    key: "tab2",
+    title: "Tab 2"
+  }, ___EmotionJSX(Text, null, "This is content for Tab 2"))), ___EmotionJSX(Tabs, {
+    items: tabs
+  }, ___EmotionJSX(Tab, {
+    key: "tab1",
+    title: "Tab 1"
+  }, ___EmotionJSX(Text, null, "Compose Filter")), ___EmotionJSX(Tab, {
+    key: "tab2",
+    title: "Tab 2",
+    slots: {
+      afterTab: afterTabNode
+    }
+  }, ___EmotionJSX(Text, null, "Users Matched"))));
+};
+export var WithList = function WithList() {
+  var _context;
+
+  var allTabs = _concatInstanceProperty(_context = []).call(_context, tabs, [{
+    name: 'Tab 4',
+    list: [{
+      key: 'tab1list',
+      name: 'Tab 1 list',
+      children: 'Tab 1 from list'
+    }, {
+      key: 'tab2list',
+      name: 'Tab 2 list',
+      children: 'Tab 2 from list'
+    }]
+  }]);
+
+  return ___EmotionJSX(Tabs, {
+    items: allTabs,
+    mode: "list"
+  }, function (item) {
+    return ___EmotionJSX(Tab, _extends({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  });
+};