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

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

@@ -1,523 +0,0 @@
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
-import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState, useMemo } from 'react';
-import { action } from '@storybook/addon-actions';
-import { useFilter } from '@react-aria/i18n';
-import { useAsyncList } from '@react-stately/data';
-import { Item, OverlayProvider, Section } from '../../index';
-import ComboBoxField from './ComboBoxField';
-import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-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: action('onOpenChange'),
-  onInputChange: action('onInputChange'),
-  onSelectionChange: action('onSelectionChange'),
-  onBlur: action('onBlur'),
-  onFocus: action('onFocus'),
-  onLoadMore: action('onLoadMore')
-};
-export default {
-  title: 'Form/ComboBoxField',
-  component: ComboBoxField,
-  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
-      }
-    },
-    selectedKey: {
-      control: {
-        type: 'none'
-      }
-    },
-    inputValue: {
-      control: {
-        type: 'none'
-      }
-    },
-    items: {
-      control: {
-        type: 'none'
-      }
-    },
-    isOpen: {
-      control: {
-        type: 'none'
-      }
-    }
-  }
-};
-export var Default = function Default(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, actions, args), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-export var WithSections = function WithSections(args) {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    items: withSection
-  }, args), function (section) {
-    return ___EmotionJSX(Section, {
-      key: section.name,
-      items: section.children,
-      title: section.name
-    }, function (item) {
-      return ___EmotionJSX(Item, {
-        key: item.name
-      }, item.name);
-    });
-  }));
-};
-export var AsyncLoading = function AsyncLoading() {
-  // This example uses `useAsyncList` from "@react-stately/data"
-  var list = useAsyncList({
-    load: function load(_ref) {
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var signal, cursor, filterText, res, json;
-        return _regeneratorRuntime.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(function (resolve) {
-                  return _setTimeout(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 ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, actions, {
-    label: "Example label",
-    items: list.items,
-    inputValue: list.filterText,
-    onInputChange: list.setFilterText,
-    loadingState: list.loadingState,
-    onLoadMore: list.loadMore
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var ControlledInput = function ControlledInput() {
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputValue = _useState2[0],
-      setInputValue = _useState2[1];
-
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    inputValue: inputValue,
-    onInputChange: setInputValue
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var ControlledMenu = function ControlledMenu() {
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_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 ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    isOpen: isOpen,
-    onOpenChange: setIsOpen
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var ControlledSelection = function ControlledSelection() {
-  var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      selectedKey = _useState6[0],
-      setSelectedKey = _useState6[1];
-
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    selectedKey: selectedKey,
-    onSelectionChange: setSelectedKey
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var ControlledFiltering = function ControlledFiltering() {
-  // import { useFilter } from '@react-aria/i18n'
-  var _useFilter = useFilter({
-    sensitivity: 'base'
-  }),
-      startsWith = _startsWithInstanceProperty(_useFilter);
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      filterValue = _useState8[0],
-      setFilterValue = _useState8[1];
-
-  var filteredItems = useMemo(function () {
-    return _filterInstanceProperty(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
-    });
-  }, [startsWith, filterValue]);
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label"
-  }, actions, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var ControlledWithCustomValue = function ControlledWithCustomValue() {
-  var _useState9 = useState(''),
-      _useState10 = _slicedToArray(_useState9, 2),
-      inputValue = _useState10[0],
-      setInputValue = _useState10[1];
-
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items
-  }, actions, {
-    inputValue: inputValue,
-    selectedKey: inputValue,
-    onInputChange: setInputValue,
-    onSelectionChange: setInputValue,
-    hasCustomValue: true
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var WithCustomInputValue = function WithCustomInputValue() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, {
-    label: "Example label",
-    defaultItems: items,
-    hasCustomValue: true
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.id,
-      textValue: item.id
-    }, item.name);
-  }));
-};
-export var AllowCustomValue = function AllowCustomValue() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items,
-    hasCustomValue: true
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var DisabledKeys = function DisabledKeys() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items,
-    disabledKeys: ['Aardvark']
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var FocusMenuTrigger = function FocusMenuTrigger() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items,
-    menuTrigger: "focus"
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items,
-    isDisabled: true
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var HelperText = function HelperText() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items,
-    helperText: "focus",
-    status: "error"
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var Required = function Required() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items,
-    isRequired: true
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: items,
-    hasNoStatusIndicator: true
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var WithCustomHeight = function WithCustomHeight() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: animals,
-    scrollBoxProps: {
-      maxHeight: '75px'
-    }
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var CustomDefaultFilter = function CustomDefaultFilter() {
-  var _useFilter2 = useFilter({
-    sensitivity: 'base'
-  }),
-      startsWith = _startsWithInstanceProperty(_useFilter2);
-
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: animals,
-    defaultFilter: startsWith
-  }, actions), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};
-export var ControlledWithAddOption = function ControlledWithAddOption() {
-  var _useState11 = useState(items),
-      _useState12 = _slicedToArray(_useState11, 2),
-      options = _useState12[0],
-      setOptions = _useState12[1];
-
-  var _useState13 = useState(''),
-      _useState14 = _slicedToArray(_useState13, 2),
-      inputValue = _useState14[0],
-      setInputValue = _useState14[1];
-
-  var _useState15 = useState(''),
-      _useState16 = _slicedToArray(_useState15, 2),
-      selectedKey = _useState16[0],
-      setSelectedKey = _useState16[1];
-
-  var onSelectionChange = function onSelectionChange(key) {
-    // Add new option to options array
-    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
-      var name = _ref2.name;
-      return name === key;
-    })) {
-      var _context2;
-
-      setOptions(_concatInstanceProperty(_context2 = []).call(_context2, options, [{
-        key: key,
-        name: key
-      }]));
-    }
-
-    setInputValue(key);
-    setSelectedKey(key);
-  };
-
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
-    label: "Example label",
-    defaultItems: options
-  }, actions, {
-    inputValue: inputValue,
-    selectedKey: selectedKey,
-    onInputChange: setInputValue,
-    onSelectionChange: onSelectionChange,
-    hasAddOption: true
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.name
-    }, item.name);
-  }));
-};