@pingux/astro 1.42.2 → 2.0.0-alpha.4

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

@@ -1,61 +1,37 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.IconSlotsInChip = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _ = require("../../");
-
-var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
-
+var _ = require("../..");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 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; }
-
 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Form/MultivaluesField',
   component: _.MultivaluesField,
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     direction: {
       defaultValue: 'bottom'
     },
@@ -102,7 +78,7 @@ var _default = {
         type: 'text'
       }
     }
-  }, _ariaAttributes.ariaAttributeBaseArgTypes),
+  }, _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   parameters: {
     docs: {
       source: {
@@ -124,7 +100,6 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
 var VariableIcon = function VariableIcon(props) {
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     width: "16",
@@ -151,7 +126,6 @@ var VariableIcon = function VariableIcon(props) {
     fill: "white"
   }))));
 };
-
 var HTMLIcon = function HTMLIcon(props) {
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     width: "16",
@@ -213,7 +187,6 @@ var HTMLIcon = function HTMLIcon(props) {
     transform: "translate(3 3)"
   }))));
 };
-
 var items = [{
   id: 1,
   name: 'Aardvark',
@@ -248,11 +221,11 @@ var itemsWithSlots = [{
   name: 'Aardvark',
   key: 'Aardvark',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -265,11 +238,11 @@ var itemsWithSlots = [{
   name: 'Kangaroo',
   key: 'Kangaroo',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -282,11 +255,11 @@ var itemsWithSlots = [{
   name: 'Snake',
   key: 'Snake',
   chipProps: {
-    variant: 'variants.boxes.itemChipWithSlot',
+    variant: 'itemBadgeWithSlot',
     bg: 'white'
   },
   buttonProps: {
-    variant: 'buttons.chipWithSlotDeleteButton'
+    variant: 'chipWithSlotDeleteButton'
   },
   slots: {
     leftIcon: (0, _react2.jsx)(_.Icon, {
@@ -295,7 +268,6 @@ var itemsWithSlots = [{
     })
   }
 }];
-
 var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
   return {
     marginRight: direction === 'right' && isOpen ? mr : 0,
@@ -303,20 +275,17 @@ var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
     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];
-
+    _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
+  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"])({
@@ -330,22 +299,18 @@ var Default = function Default(args) {
     }, item.name);
   }));
 };
-
 exports.Default = Default;
-
 var Uncontrolled = function Uncontrolled(args) {
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
-
+    _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
+  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"])({
@@ -360,27 +325,22 @@ var Uncontrolled = function Uncontrolled(args) {
     }, item.name);
   }));
 };
-
 exports.Uncontrolled = Uncontrolled;
-
 var Controlled = function Controlled(args) {
   var _useState5 = (0, _react.useState)(['Aardvark', 'Snake']),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      selectedKeys = _useState6[0],
-      setSelectedKeys = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectedKeys = _useState6[0],
+    setSelectedKeys = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isOpen = _useState8[0],
-      setIsOpen = _useState8[1];
-
+    _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
+  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"])({
@@ -397,22 +357,18 @@ var Controlled = function Controlled(args) {
     }, item.name);
   }));
 };
-
 exports.Controlled = Controlled;
-
 var Error = function Error(args) {
   var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      isOpen = _useState10[0],
-      setIsOpen = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    isOpen = _useState10[0],
+    setIsOpen = _useState10[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
+  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, {
@@ -427,22 +383,18 @@ var Error = function Error(args) {
     }, item.name);
   }));
 };
-
 exports.Error = Error;
-
 var ReadOnlyField = function ReadOnlyField(args) {
   var _useState11 = (0, _react.useState)(false),
-      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      isOpen = _useState12[0],
-      setIsOpen = _useState12[1];
-
+    _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
+  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"])({
@@ -457,22 +409,18 @@ var ReadOnlyField = function ReadOnlyField(args) {
     }, item.name);
   }));
 };
-
 exports.ReadOnlyField = ReadOnlyField;
-
 var ReadOnlyValues = function ReadOnlyValues(args) {
   var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      isOpen = _useState14[0],
-      setIsOpen = _useState14[1];
-
+    _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)(_.OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  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"])({
@@ -487,22 +435,18 @@ var ReadOnlyValues = function ReadOnlyValues(args) {
     }, item.name);
   }));
 };
-
 exports.ReadOnlyValues = ReadOnlyValues;
-
 var DisabledKeys = function DisabledKeys(args) {
   var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      isOpen = _useState16[0],
-      setIsOpen = _useState16[1];
-
+    _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
+  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"])({
@@ -517,22 +461,18 @@ var DisabledKeys = function DisabledKeys(args) {
     }, item.name);
   }));
 };
-
 exports.DisabledKeys = DisabledKeys;
-
 var CustomValues = function CustomValues(args) {
   var _useState17 = (0, _react.useState)(false),
-      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-      isOpen = _useState18[0],
-      setIsOpen = _useState18[1];
-
+    _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
+  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"])({
@@ -547,27 +487,23 @@ var CustomValues = function CustomValues(args) {
     }, item.name);
   }));
 };
-
 exports.CustomValues = CustomValues;
 CustomValues.argTypes = {
   mode: {
     defaultValue: 'non-restrictive'
   }
 };
-
 var IconSlotsInChip = function IconSlotsInChip(args) {
   var _useState19 = (0, _react.useState)(false),
-      _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-      isOpen = _useState20[0],
-      setIsOpen = _useState20[1];
-
+    _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
+  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"])({
@@ -581,21 +517,16 @@ var IconSlotsInChip = function IconSlotsInChip(args) {
     }, item.name);
   }));
 };
-
 exports.IconSlotsInChip = IconSlotsInChip;
-
 var CustomSize = function CustomSize(args) {
   var _useState21 = (0, _react.useState)(false),
-      _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-      isOpen = _useState22[0],
-      setIsOpen = _useState22[1];
-
+    _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
+    isOpen = _useState22[0],
+    setIsOpen = _useState22[1];
   var direction = args.direction;
-
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
-
   return (0, _react2.jsx)(_.Box, {
     sx: {
       width: '100%',
@@ -604,7 +535,8 @@ var CustomSize = function CustomSize(args) {
     }
   }, (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
+  }, (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"])({
@@ -618,5 +550,4 @@ var CustomSize = function CustomSize(args) {
     }, item.name);
   }))));
 };
-
 exports.CustomSize = CustomSize;