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

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

@@ -1,431 +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.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.ReadOnlyField = exports.Error = exports.Default = exports.Controlled = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ = require("../..");
-
-var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
-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 _default = {
-  title: 'Form/MultivaluesField',
-  component: _.MultivaluesField,
-  argTypes: {
-    direction: {
-      defaultValue: 'bottom'
-    },
-    hasAutoFocus: {},
-    hasNoStatusIndicator: {},
-    isDisabled: {},
-    isNotFlippable: {},
-    isReadOnly: {},
-    isRequired: {},
-    label: {
-      defaultValue: 'Field Label'
-    },
-    mode: {},
-    placeholder: {},
-    defaultSelectedKeys: {
-      control: {
-        type: 'none'
-      }
-    },
-    disabledKeys: {
-      control: {
-        type: 'none'
-      }
-    },
-    items: {
-      control: {
-        type: 'none'
-      }
-    },
-    selectedKeys: {
-      control: {
-        type: 'none'
-      }
-    },
-    status: {
-      control: {
-        type: 'select',
-        options: _statuses["default"]
-      },
-      defaultValue: _statuses["default"].DEFAULT
-    },
-    helperText: {
-      control: {
-        type: 'text'
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    },
-    a11y: {
-      config: {
-        /** The "color-contrast" test ends with an "incomplete" status
-         * since pseudo-element applies to the same container as selected values.
-         * A  workaround to disable "color-contrast" incomplete tests.
-         */
-        rules: [{
-          id: 'color-contrast',
-          enabled: false
-        }]
-      }
-    }
-  }
-};
-exports["default"] = _default;
-var items = [{
-  id: 1,
-  name: 'Aardvark',
-  key: 'Aardvark'
-}, {
-  id: 2,
-  name: 'Kangaroo',
-  key: 'Kangaroo'
-}, {
-  id: 3,
-  name: 'Snake',
-  key: 'Snake'
-}, {
-  id: 4,
-  name: 'Frog',
-  key: 'Frog'
-}, {
-  id: 5,
-  name: 'Seal',
-  key: 'Seal'
-}, {
-  id: 6,
-  name: 'Orangutan',
-  key: 'Orangutan'
-}, {
-  id: 7,
-  name: 'Shark',
-  key: 'Shark'
-}];
-
-var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
-  return {
-    marginRight: direction === 'right' && isOpen ? mr : 0,
-    marginLeft: direction === 'left' && isOpen ? ml : 0,
-    marginTop: direction === 'top' && isOpen ? mt : 0
-  };
-};
-
-var Default = function Default(args) {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    items: items
-  }, args, {
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.Default = Default;
-
-var WithCustomValues = function WithCustomValues(args) {
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    items: items,
-    mode: "non-restrictive"
-  }, args, {
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.WithCustomValues = WithCustomValues;
-WithCustomValues.argTypes = {
-  mode: {
-    defaultValue: 'non-restrictive'
-  }
-};
-
-var WithDisabledKeys = function WithDisabledKeys(args) {
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isOpen = _useState6[0],
-      setIsOpen = _useState6[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    disabledKeys: ['Aardvark'],
-    items: items
-  }, args, {
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.WithDisabledKeys = WithDisabledKeys;
-
-var Uncontrolled = function Uncontrolled(args) {
-  var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isOpen = _useState8[0],
-      setIsOpen = _useState8[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    defaultSelectedKeys: ['Aardvark', 'Snake'],
-    items: items
-  }, args, {
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.Uncontrolled = Uncontrolled;
-
-var Controlled = function Controlled(args) {
-  var _useState9 = (0, _react.useState)(['Aardvark', 'Snake']),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      selectedKeys = _useState10[0],
-      setSelectedKeys = _useState10[1];
-
-  var _useState11 = (0, _react.useState)(false),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      isOpen = _useState12[0],
-      setIsOpen = _useState12[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    label: "Field Label"
-  }, args, {
-    items: items,
-    onSelectionChange: setSelectedKeys,
-    selectedKeys: selectedKeys,
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.Controlled = Controlled;
-
-var WithCustomSize = function WithCustomSize(args) {
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      isOpen = _useState14[0],
-      setIsOpen = _useState14[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.Box, {
-    sx: {
-      width: '100%',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, (0, _react2.jsx)(_.Box, {
-    width: 300
-  }, (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    items: items
-  }, args, {
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }))));
-};
-
-exports.WithCustomSize = WithCustomSize;
-
-var WithReadOnlyValues = function WithReadOnlyValues(args) {
-  var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      isOpen = _useState16[0],
-      setIsOpen = _useState16[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    readOnlyKeys: ['Aardvark', 'Snake'],
-    items: items
-  }, args, {
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.WithReadOnlyValues = WithReadOnlyValues;
-
-var Error = function Error(args) {
-  var _useState17 = (0, _react.useState)(false),
-      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-      isOpen = _useState18[0],
-      setIsOpen = _useState18[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({}, args, {
-    items: items,
-    helperText: "Here is some helpful text...",
-    status: "error",
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.Error = Error;
-
-var ReadOnlyField = function ReadOnlyField(args) {
-  var _useState19 = (0, _react.useState)(false),
-      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-      isOpen = _useState20[0],
-      setIsOpen = _useState20[1];
-
-  var direction = args.direction;
-
-  var onOpenChange = function onOpenChange() {
-    setIsOpen(true);
-  };
-
-  return (0, _react2.jsx)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
-  , {
-    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
-  }, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
-    items: items
-  }, args, {
-    isReadOnly: true,
-    onOpenChange: onOpenChange
-  }), function (item) {
-    return (0, _react2.jsx)(_.Item, {
-      key: item.key,
-      "data-id": item.name
-    }, item.name);
-  }));
-};
-
-exports.ReadOnlyField = ReadOnlyField;