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

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

@@ -1,621 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
-
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
-var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
-
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
-
-var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _i18n = require("@react-aria/i18n");
-
-var _data = require("@react-stately/data");
-
-var _index = require("../../index");
-
-var _ComboBoxField = _interopRequireDefault(require("./ComboBoxField"));
-
-var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
-
-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 items = [{
-  name: 'Aardvark',
-  id: '1'
-}, {
-  name: 'Kangaroo',
-  id: '2'
-}, {
-  name: 'Snake',
-  id: '3'
-}];
-var animals = [{
-  name: 'Aardvark',
-  id: '1'
-}, {
-  name: 'Kangaroo',
-  id: '2'
-}, {
-  name: 'Snake',
-  id: '3'
-}, {
-  name: 'Snail',
-  id: '4'
-}, {
-  name: 'Slug',
-  id: '5'
-}, {
-  name: 'Crow',
-  id: '6'
-}, {
-  name: 'Dog',
-  id: '7'
-}, {
-  name: 'Crab',
-  id: '8'
-}, {
-  name: 'Fish',
-  id: '9'
-}, {
-  name: 'Turtle',
-  id: '10'
-}, {
-  name: 'Mouse',
-  id: '11'
-}, {
-  name: 'Banana',
-  id: '12'
-}, {
-  name: 'Shark',
-  id: '13'
-}, {
-  name: 'Gorilla',
-  id: '14'
-}, {
-  name: 'Goat',
-  id: '15'
-}];
-var withSection = [{
-  name: 'Animals',
-  children: [{
-    name: 'Raccoon'
-  }, {
-    name: 'Kangaroo'
-  }, {
-    name: 'Opossum'
-  }]
-}, {
-  name: 'People',
-  children: [{
-    name: 'Michael'
-  }, {
-    name: 'Dwight'
-  }, {
-    name: 'Creed'
-  }]
-}];
-var actions = {
-  onOpenChange: (0, _addonActions.action)('onOpenChange'),
-  onInputChange: (0, _addonActions.action)('onInputChange'),
-  onSelectionChange: (0, _addonActions.action)('onSelectionChange'),
-  onBlur: (0, _addonActions.action)('onBlur'),
-  onFocus: (0, _addonActions.action)('onFocus'),
-  onLoadMore: (0, _addonActions.action)('onLoadMore')
-};
-var _default = {
-  title: 'Form/ComboBoxField',
-  component: _ComboBoxField["default"],
-  argTypes: {
-    label: {
-      control: {
-        type: 'text'
-      },
-      defaultValue: 'Example label'
-    },
-    placeholder: {},
-    id: {},
-    defaultItems: {
-      defaultValue: items
-    },
-    defaultSelectedKey: {},
-    defaultInputValue: {},
-    disabledKeys: {
-      defaultValue: ['Snake']
-    },
-    direction: {},
-    menuTrigger: {},
-    isRequired: {},
-    hasCustomValue: {},
-    hasNoEmptySelection: {},
-    isNotFlippable: {},
-    hasAutoFocus: {},
-    hasNoStatusIndicator: {},
-    isReadOnly: {},
-    isDisabled: {},
-    loadingState: {
-      control: {
-        type: 'select',
-        options: _loadingStates["default"]
-      }
-    },
-    selectedKey: {
-      control: {
-        type: 'none'
-      }
-    },
-    inputValue: {
-      control: {
-        type: 'none'
-      }
-    },
-    items: {
-      control: {
-        type: 'none'
-      }
-    },
-    isOpen: {
-      control: {
-        type: 'none'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-
-var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, args), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.Default = Default;
-
-var WithSections = function WithSections(args) {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    items: withSection
-  }, args), function (section) {
-    return (0, _react2.jsx)(_index.Section, {
-      key: section.name,
-      items: section.children,
-      title: section.name
-    }, function (item) {
-      return (0, _react2.jsx)(_index.Item, {
-        key: item.name
-      }, item.name);
-    });
-  }));
-};
-
-exports.WithSections = WithSections;
-
-var AsyncLoading = function AsyncLoading() {
-  // This example uses `useAsyncList` from "@react-stately/data"
-  var list = (0, _data.useAsyncList)({
-    load: function load(_ref) {
-      return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var signal, cursor, filterText, res, json;
-        return _regenerator["default"].wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                signal = _ref.signal, cursor = _ref.cursor, filterText = _ref.filterText;
-
-                if (cursor) {
-                  // eslint-disable-next-line
-                  cursor = cursor.replace(/^http:\/\//i, 'https://');
-                } // If no cursor is available, then we're loading the first page,
-                // filtering the results returned via a query string that
-                // mirrors the ComboBox input text.
-                // Otherwise, the cursor is the next URL to load,
-                // as returned from the previous page.
-
-
-                _context.next = 4;
-                return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
-                  signal: signal
-                });
-
-              case 4:
-                res = _context.sent;
-                _context.next = 7;
-                return res.json();
-
-              case 7:
-                json = _context.sent;
-                _context.next = 10;
-                return new _promise["default"](function (resolve) {
-                  return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
-                });
-
-              case 10:
-                return _context.abrupt("return", {
-                  items: json.results,
-                  cursor: json.next
-                });
-
-              case 11:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }))();
-    }
-  });
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({}, actions, {
-    label: "Example label",
-    items: list.items,
-    inputValue: list.filterText,
-    onInputChange: list.setFilterText,
-    loadingState: list.loadingState,
-    onLoadMore: list.loadMore
-  }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.AsyncLoading = AsyncLoading;
-
-var ControlledInput = function ControlledInput() {
-  var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    inputValue: inputValue,
-    onInputChange: setInputValue
-  }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.ControlledInput = ControlledInput;
-
-var ControlledMenu = function ControlledMenu() {
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1]; // Use menuTrigger="manual" if you don't want open change events to fire on input / focus
-
-
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    isOpen: isOpen,
-    onOpenChange: setIsOpen
-  }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.ControlledMenu = ControlledMenu;
-
-var ControlledSelection = function ControlledSelection() {
-  var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      selectedKey = _useState6[0],
-      setSelectedKey = _useState6[1];
-
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    selectedKey: selectedKey,
-    onSelectionChange: setSelectedKey
-  }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.ControlledSelection = ControlledSelection;
-
-var ControlledFiltering = function ControlledFiltering() {
-  // import { useFilter } from '@react-aria/i18n'
-  var _useFilter = (0, _i18n.useFilter)({
-    sensitivity: 'base'
-  }),
-      startsWith = (0, _startsWith["default"])(_useFilter);
-
-  var _useState7 = (0, _react.useState)(''),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      filterValue = _useState8[0],
-      setFilterValue = _useState8[1];
-
-  var filteredItems = (0, _react.useMemo)(function () {
-    return (0, _filter["default"])(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
-    });
-  }, [startsWith, filterValue]);
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label"
-  }, actions, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
-  }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.ControlledFiltering = ControlledFiltering;
-
-var ControlledWithCustomValue = function ControlledWithCustomValue() {
-  var _useState9 = (0, _react.useState)(''),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      inputValue = _useState10[0],
-      setInputValue = _useState10[1];
-
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    inputValue: inputValue,
-    selectedKey: inputValue,
-    onInputChange: setInputValue,
-    onSelectionChange: setInputValue,
-    hasCustomValue: true
-  }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.ControlledWithCustomValue = ControlledWithCustomValue;
-
-var WithCustomInputValue = function WithCustomInputValue() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], {
-    label: "Example label",
-    defaultItems: items,
-    hasCustomValue: true
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.id,
-      textValue: item.id
-    }, item.name);
-  }));
-};
-
-exports.WithCustomInputValue = WithCustomInputValue;
-
-var AllowCustomValue = function AllowCustomValue() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items,
-    hasCustomValue: true
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.AllowCustomValue = AllowCustomValue;
-
-var DisabledKeys = function DisabledKeys() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items,
-    disabledKeys: ['Aardvark']
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.DisabledKeys = DisabledKeys;
-
-var FocusMenuTrigger = function FocusMenuTrigger() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items,
-    menuTrigger: "focus"
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.FocusMenuTrigger = FocusMenuTrigger;
-
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items,
-    isDisabled: true
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.Disabled = Disabled;
-
-var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items,
-    helperText: "focus",
-    status: "error"
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.HelperText = HelperText;
-
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items,
-    isRequired: true
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.Required = Required;
-
-var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: items,
-    hasNoStatusIndicator: true
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.WithoutStatusIndicator = WithoutStatusIndicator;
-
-var WithCustomHeight = function WithCustomHeight() {
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: animals,
-    scrollBoxProps: {
-      maxHeight: '75px'
-    }
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.WithCustomHeight = WithCustomHeight;
-
-var CustomDefaultFilter = function CustomDefaultFilter() {
-  var _useFilter2 = (0, _i18n.useFilter)({
-    sensitivity: 'base'
-  }),
-      startsWith = (0, _startsWith["default"])(_useFilter2);
-
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: animals,
-    defaultFilter: startsWith
-  }, actions), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.CustomDefaultFilter = CustomDefaultFilter;
-
-var ControlledWithAddOption = function ControlledWithAddOption() {
-  var _useState11 = (0, _react.useState)(items),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      options = _useState12[0],
-      setOptions = _useState12[1];
-
-  var _useState13 = (0, _react.useState)(''),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      inputValue = _useState14[0],
-      setInputValue = _useState14[1];
-
-  var _useState15 = (0, _react.useState)(''),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      selectedKey = _useState16[0],
-      setSelectedKey = _useState16[1];
-
-  var onSelectionChange = function onSelectionChange(key) {
-    // Add new option to options array
-    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
-      var name = _ref2.name;
-      return name === key;
-    })) {
-      var _context2;
-
-      setOptions((0, _concat["default"])(_context2 = []).call(_context2, options, [{
-        key: key,
-        name: key
-      }]));
-    }
-
-    setInputValue(key);
-    setSelectedKey(key);
-  };
-
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
-    label: "Example label",
-    defaultItems: options
-  }, actions, {
-    inputValue: inputValue,
-    selectedKey: selectedKey,
-    onInputChange: setInputValue,
-    onSelectionChange: onSelectionChange,
-    hasAddOption: true
-  }), function (item) {
-    return (0, _react2.jsx)(_index.Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-
-exports.ControlledWithAddOption = ControlledWithAddOption;