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

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

@@ -0,0 +1,448 @@
+"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.WithNoneOption = exports.WithCustomHeight = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+
+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 _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _overlays = require("@react-aria/overlays");
+
+var _data = require("@react-stately/data");
+
+var _index = require("../../index");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _constants = require("../Label/constants");
+
+var _react2 = require("@emotion/react");
+
+var _context, _context2;
+
+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 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: 'Aardvark'
+  }, {
+    name: 'Kangaroo'
+  }, {
+    name: 'Snake'
+  }]
+}, {
+  name: 'People',
+  children: [{
+    name: 'Michael'
+  }, {
+    name: 'Dwight'
+  }, {
+    name: 'Creed'
+  }]
+}];
+var _default = {
+  title: 'Form/SelectField',
+  component: _index.SelectField,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Example Label'
+    },
+    placeholder: {},
+    defaultText: {},
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    hintText: {
+      control: {
+        type: 'text'
+      }
+    },
+    labelMode: {
+      control: {
+        type: 'select',
+        options: (0, _values["default"])(_constants.modes)
+      },
+      defaultValue: (0, _values["default"])(_constants.modes)[0]
+    },
+    status: {
+      control: {
+        type: 'select',
+        options: _statuses["default"]
+      },
+      defaultValue: _statuses["default"].DEFAULT
+    },
+    defaultSelectedKey: {},
+    disabledKeys: {},
+    name: {},
+    align: {},
+    direction: {},
+    hasNoEmptySelection: {},
+    isDefaultOpen: {},
+    isDisabled: {},
+    isOpen: {},
+    isRequired: {},
+    controlProps: {},
+    selectedKey: {
+      control: {
+        type: 'none'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
+    width: "100%"
+  }), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+
+exports.Default = Default;
+
+var WithSections = function WithSections(args) {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+    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 WithCustomHeight = function WithCustomHeight(args) {
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
+    label: "Example label",
+    items: animals,
+    scrollBoxProps: {
+      maxHeight: '75px'
+    }
+  }, args), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.WithCustomHeight = WithCustomHeight;
+
+var FloatLabel = function FloatLabel() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    label: "What's your favorite color?",
+    labelMode: "float"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.FloatLabel = FloatLabel;
+
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)('yellow'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedKey = _useState2[0],
+      setSelectedKey = _useState2[1];
+
+  var handleSelectionChange = function handleSelectionChange(key) {
+    return setSelectedKey(key);
+  };
+
+  return (0, _react2.jsx)(_index.SelectField, {
+    selectedKey: selectedKey,
+    onSelectionChange: handleSelectionChange,
+    label: "What's your favorite color?"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.Controlled = Controlled;
+
+var WithNoneOption = function WithNoneOption() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    label: "What's your favorite color?"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "none"
+  }, "None"), (0, _react2.jsx)(_index.Item, {
+    isSeparator: true,
+    textValue: "-"
+  }, (0, _react2.jsx)(_index.Separator, null)), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.WithNoneOption = WithNoneOption;
+
+var DisabledField = function DisabledField() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    label: "What's your favorite color?",
+    isDisabled: true
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.DisabledField = DisabledField;
+
+var DisabledOptions = function DisabledOptions() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    label: "What's your favorite color?",
+    disabledKeys: ['blue']
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.DisabledOptions = DisabledOptions;
+
+var NoOptionsAvailable = function NoOptionsAvailable() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    label: "Select an option...",
+    placeholder: "No options available"
+  });
+};
+
+exports.NoOptionsAvailable = NoOptionsAvailable;
+
+var HelperText = function HelperText() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    status: "error",
+    helperText: "Here is some helpful text...",
+    label: "What's your favorite color?"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.HelperText = HelperText;
+var options = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(200)).call(_context2)).call(_context, function (_, i) {
+  return {
+    key: "option-".concat(i),
+    name: "Option ".concat(i)
+  };
+});
+
+var DynamicItems = function DynamicItems() {
+  // options = new Array(200).fill().map((_, i) => ({ key: `option-${i}`, name: `Option ${i}` }));
+  var _useState3 = (0, _react.useState)(options),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
+      items = _useState4[0];
+
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
+    label: "Select an option...",
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key
+    }, item.name);
+  }));
+};
+
+exports.DynamicItems = DynamicItems;
+DynamicItems.parameters = {
+  docs: {
+    storyDescription: 'If using a long list or one that is dynamically updated, use the `items` prop and a function to render the children. See [the React Stately docs](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections) for more information about this.'
+  }
+};
+
+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, res, json;
+        return _regenerator["default"].wrap(function _callee$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                signal = _ref.signal, cursor = _ref.cursor;
+                _context3.next = 3;
+                return fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {
+                  signal: signal
+                });
+
+              case 3:
+                res = _context3.sent;
+                _context3.next = 6;
+                return res.json();
+
+              case 6:
+                json = _context3.sent;
+                _context3.next = 9;
+                return new _promise["default"](function (resolve) {
+                  return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+                });
+
+              case 9:
+                return _context3.abrupt("return", {
+                  items: json.results,
+                  cursor: json.next
+                });
+
+              case 10:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    }
+  });
+  return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
+    label: "Pick a Pokemon",
+    items: list.items,
+    isLoading: list.isLoading,
+    onLoadMore: list.loadMore
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.AsyncLoading = AsyncLoading;
+
+var WithoutStatusIndicator = function WithoutStatusIndicator() {
+  return (0, _react2.jsx)(_index.SelectField, {
+    label: "What's your favorite color?",
+    hasNoStatusIndicator: true
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "none"
+  }, "None"), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow"));
+};
+
+exports.WithoutStatusIndicator = WithoutStatusIndicator;

package/lib/cjs/components/SelectField/SelectField.test.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var items = [{
+  name: 'a'
+}, {
+  name: 'b'
+}, {
+  name: 'c'
+}];
+var testId = 'test-dropdown';
+var controlTestId = "".concat(testId, "-input");
+var testValue = 'test';
+var defaultProps = {
+  label: 'testLabel',
+  'data-testid': testId,
+  controlProps: {
+    'data-testid': controlTestId
+  },
+  value: testValue,
+  items: items
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  }));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('default select field', function () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  var inputs = _testWrapper.screen.getAllByLabelText(defaultProps.label);
+
+  var hiddenInput = inputs[0];
+  var visibleInput = inputs[1];
+
+  var labels = _testWrapper.screen.getAllByText(defaultProps.label);
+
+  var visibleLabel = labels[0];
+  var hiddenLabel = labels[1];
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(hiddenInput).toBeInstanceOf(HTMLSelectElement);
+  expect(visibleInput).toBeInstanceOf(HTMLButtonElement);
+  expect(hiddenLabel).toBeInstanceOf(HTMLLabelElement);
+  expect(visibleLabel).toBeInstanceOf(HTMLLabelElement);
+  expect(container).toBeInTheDocument();
+  expect(hiddenInput).toBeInTheDocument();
+  expect(visibleInput).toBeInTheDocument();
+  expect(hiddenLabel).toBeInTheDocument();
+  expect(visibleLabel).toBeInTheDocument(); // jest-dom .toBeVisible does not take into account aria-hidden
+
+  /* eslint-disable testing-library/no-node-access */
+
+  expect(hiddenInput.closest('[aria-hidden="true"]')).not.toBeNull();
+  expect(visibleInput.closest('[aria-hidden="true"]')).toBeNull();
+  expect(hiddenLabel.closest('[aria-hidden="true"]')).not.toBeNull();
+  expect(visibleLabel.closest('[aria-hidden="true"]')).toBeNull();
+  /* eslint-enable testing-library/no-node-access */
+});

package/lib/cjs/components/SelectField/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SelectField["default"];
+  }
+});
+
+var _SelectField = _interopRequireDefault(require("./SelectField"));