@pingux/astro 1.27.0-alpha.21 → 1.27.0-alpha.23

package/lib/components/Tabs/Tabs.js

@@ -1,183 +0,0 @@
-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

@@ -1,255 +0,0 @@
-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);
-  });
-};