@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/recipes/EditableInput.stories.js

@@ -1,55 +1,31 @@
 "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.Default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));
-
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _index = require("../index");
-
 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: 'Recipes/Editable Input'
 };
@@ -112,7 +88,6 @@ var sx = {
     height: '20px'
   }
 };
-
 var Default = function Default() {
   return (0, _react2.jsx)(Editable, {
     value: "Some value..."
@@ -122,28 +97,24 @@ var Default = function Default() {
     controlProps: controlProps
   }));
 };
+
 /**
  * Editable
  * Wrapper component that provides context value for all editable components
  */
-
-
 exports.Default = Default;
-
 var Editable = function Editable(props) {
   var value = props.value,
-      isEditing = props.isEditing;
+    isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
     prevValue: '',
     value: value || ''
   };
-
   var _useState = (0, _react.useState)(editableContextValue),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      editableContext = _useState2[0],
-      setEditableContext = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    editableContext = _useState2[0],
+    setEditableContext = _useState2[1];
   return (0, _react2.jsx)(_index.Box, {
     sx: {
       position: 'relative'
@@ -152,23 +123,21 @@ var Editable = function Editable(props) {
     value: [editableContext, setEditableContext]
   }, props.children));
 };
+
 /**
  * Editable preview
  * Read-only view of the component
  */
 
-
 var EditablePreview = function EditablePreview() {
   var _useContext = (0, _react.useContext)(EditableAreaContext),
-      _useContext2 = (0, _slicedToArray2["default"])(_useContext, 2),
-      editableContext = _useContext2[0],
-      setEditableContext = _useContext2[1];
-
+    _useContext2 = (0, _slicedToArray2["default"])(_useContext, 2),
+    editableContext = _useContext2[0],
+    setEditableContext = _useContext2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      hasFocus = _useState4[0],
-      setFocus = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    hasFocus = _useState4[0],
+    setFocus = _useState4[1];
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -181,13 +150,11 @@ var EditablePreview = function EditablePreview() {
       setFocus(false);
     }
   }, [hasFocus, editableContext.isEditing]);
-
   var handleClick = function handleClick() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       isEditing: true
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -195,7 +162,6 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-
   return (0, _react2.jsx)(_index.Box, {
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
@@ -214,32 +180,28 @@ var EditablePreview = function EditablePreview() {
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
+
 /**
  * Editable input
  * Swappable with TextField and TextAreaField component
  * Input view of the component
  */
 
-
 var EditableInput = function EditableInput(props) {
   var ariaLabel = props.inputProps.ariaLabel;
   var editableInput = (0, _react.useRef)(null);
-
   var _useContext3 = (0, _react.useContext)(EditableAreaContext),
-      _useContext4 = (0, _slicedToArray2["default"])(_useContext3, 2),
-      editableContext = _useContext4[0],
-      setEditableContext = _useContext4[1];
-
+    _useContext4 = (0, _slicedToArray2["default"])(_useContext3, 2),
+    editableContext = _useContext4[0],
+    setEditableContext = _useContext4[1];
   var _useState5 = (0, _react.useState)(editableContext.value || ''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      prevValue = _useState6[0],
-      setPrevValue = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    prevValue = _useState6[0],
+    setPrevValue = _useState6[1];
   var _useState7 = (0, _react.useState)(editableContext.value || ''),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      editingValue = _useState8[0],
-      setEditingValue = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    editingValue = _useState8[0],
+    setEditingValue = _useState8[1];
   (0, _react.useEffect)(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -248,14 +210,12 @@ var EditableInput = function EditableInput(props) {
       editableInput.current.focus();
     }
   }, [editableContext.isEditing]);
-
   var handleChange = function handleChange(e) {
     setEditingValue(e.target.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       value: e.target.value
     }));
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Escape') {
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -267,7 +227,6 @@ var EditableInput = function EditableInput(props) {
       if (e.shiftKey) {
         return;
       }
-
       setPrevValue(editableContext.value);
       setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
         prevValue: editableContext.value,
@@ -276,7 +235,6 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
-
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
@@ -295,28 +253,25 @@ var EditableInput = function EditableInput(props) {
     isUnresizable: true
   }));
 };
+
 /**
  * Editable controls
  * Use css to position buttons
  * Extend with more button controls as needed
  */
 
-
 var EditableControl = function EditableControl(props) {
   var confirmBtn = props.controlProps.confirmBtn,
-      cancelBtn = props.controlProps.cancelBtn,
-      onPress = props.onPress;
-
+    cancelBtn = props.controlProps.cancelBtn,
+    onPress = props.onPress;
   var _useContext5 = (0, _react.useContext)(EditableAreaContext),
-      _useContext6 = (0, _slicedToArray2["default"])(_useContext5, 2),
-      editableContext = _useContext6[0],
-      setEditableContext = _useContext6[1];
-
+    _useContext6 = (0, _slicedToArray2["default"])(_useContext5, 2),
+    editableContext = _useContext6[0],
+    setEditableContext = _useContext6[1];
   var _useState9 = (0, _react.useState)(editableContext.value || ''),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      prevValue = _useState10[0],
-      setPrevValue = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    prevValue = _useState10[0],
+    setPrevValue = _useState10[1];
   var handleCancel = function handleCancel() {
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
       prevValue: prevValue,
@@ -324,7 +279,6 @@ var EditableControl = function EditableControl(props) {
       isEditing: false
     }));
   };
-
   var handleSubmit = function handleSubmit() {
     setPrevValue(editableContext.value);
     setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
@@ -332,12 +286,10 @@ var EditableControl = function EditableControl(props) {
       value: editableContext.value,
       isEditing: false
     }));
-
     if (onPress) {
       onPress();
     }
   };
-
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,

package/lib/cjs/recipes/FlippableCaretMenuButton.stories.js

@@ -1,73 +1,40 @@
 "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.Default = void 0;
-
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
-
 var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
 var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _reactAria = require("react-aria");
+var _utils = require("@react-aria/utils");
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
-
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
-
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
-
-var _overlays = require("@react-aria/overlays");
-
-var _utils = require("@react-aria/utils");
-
-var _index = require("../index");
-
 var _PopoverContainer = _interopRequireDefault(require("../components/PopoverContainer"));
-
+var _index = require("../index");
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _default = {
   title: 'Recipes/Flippable Caret Menu Button'
 };
@@ -107,62 +74,50 @@ var sx = {
     fontSize: '13px'
   }
 };
-
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
-
   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 _useState3 = (0, _react.useState)([]),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      selectedButtons = _useState4[0],
-      setSelectedButton = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    selectedButtons = _useState4[0],
+    setSelectedButton = _useState4[1];
   var onChange = function onChange() {
     setIsOpen(!isOpen);
   };
-
   var toggleButton = function toggleButton(key) {
     var _context;
-
     var newState = selectedButtons;
-
     if ((0, _includes["default"])(selectedButtons).call(selectedButtons, key)) {
       var index = (0, _indexOf["default"])(newState).call(newState, key);
       (0, _splice["default"])(newState).call(newState, index, 1);
     } else {
       newState.push(key);
     }
-
     setSelectedButton((0, _concat["default"])(_context = []).call(_context, newState));
   };
-
-  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
-    targetRef: buttonRef,
-    overlayRef: popoverRef,
-    placement: 'bottom left',
-    isOpen: true
-  }),
-      overlayProps = _useOverlayPosition.overlayProps,
-      placement = _useOverlayPosition.placement,
-      updatePosition = _useOverlayPosition.updatePosition;
-
+  var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
+      targetRef: buttonRef,
+      overlayRef: popoverRef,
+      placement: 'bottom left',
+      isOpen: true
+    }),
+    overlayProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement,
+    updatePosition = _useOverlayPosition.updatePosition;
   (0, _utils.useLayoutEffect)(function () {
     requestAnimationFrame(function () {
       updatePosition();
     });
   }, [updatePosition]);
-
   var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
     width: '500px',
     minWidth: '500px',
     height: '200px'
   });
-
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
     ref: buttonRef,
     variant: "inline",
@@ -206,5 +161,4 @@ var Default = function Default() {
     }, item);
   })))));
 };
-
 exports.Default = Default;