@pingux/astro 2.40.0-alpha.1 → 2.40.0

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

@@ -15,12 +15,16 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 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 _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
+var _interactions = require("@react-aria/interactions");
 var _storybookAddonDesigns = require("storybook-addon-designs");
+var _hooks = require("../hooks");
 var _index = require("../index");
 var _figmaLinks = require("../utils/designUtils/figmaLinks");
 var _react2 = require("@emotion/react");
@@ -50,6 +54,14 @@ var inputProps = {
   ariaLabel: 'Example aria label'
 };
 var sx = {
+  containerFocused: {
+    padding: 0,
+    position: 'relative',
+    borderColor: 'accent.60',
+    borderStyle: 'solid',
+    borderRadius: '3px 2px 2px 3px',
+    borderWidth: '1px'
+  },
   editablePreview: {
     whiteSpace: 'pre-line',
     width: '100%',
@@ -63,37 +75,61 @@ var sx = {
     fontSize: 'md',
     fontWeight: 1,
     lineHeight: '18px',
+    '&:hover': {
+      cursor: 'pointer',
+      bg: 'accent.95'
+    },
     '&:focus': {
       outline: 'none',
-      boxShadow: 'focus',
+      borderRadius: '2px',
       borderColor: 'active',
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      paddingLeft: '3px',
+      paddingBottom: '4px'
+    },
+    '&.is-pressed': {
       borderWidth: '1px',
-      borderStyle: 'solid'
+      paddingLeft: '4px',
+      paddingBottom: 'xs'
     }
   },
   editableInputWrapper: {
-    marginRight: '30px',
-    flexGrow: 1
+    marginRight: '36px',
+    flexGrow: 1,
+    '&.is-focused textarea': {
+      outline: 'none'
+    },
+    '& label': {
+      margin: 0
+    },
+    '& textarea': {
+      minHeight: '45px',
+      height: '45px',
+      padding: '13px 35px 15px 18px',
+      lineHeight: '100%',
+      resize: 'vertical'
+    }
   },
   editableInpuTextArea: {
     maxHeight: '150px'
   },
   editableControlWrapper: {
     position: 'absolute',
-    right: '0',
-    top: '27.5%',
+    right: '5px',
+    top: 'calc(50% - 13px)',
     alignItems: 'center',
     justifyContent: 'space-between'
   },
   editableControlIconButton: {
-    marginRight: 'md',
+    marginRight: '20px',
     width: '20px',
     height: '20px'
   }
 };
 var Default = function Default() {
   return (0, _react2.jsx)(Editable, {
-    value: "Some value..."
+    value: "Inline Editable text"
   }, (0, _react2.jsx)(EditablePreview, null), (0, _react2.jsx)(EditableInput, {
     inputProps: inputProps
   }), (0, _react2.jsx)(EditableControl, {
@@ -118,6 +154,7 @@ var Editable = function Editable(props) {
     isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
+    isFocused: false,
     prevValue: '',
     value: value || ''
   };
@@ -126,7 +163,8 @@ var Editable = function Editable(props) {
     editableContext = _useState2[0],
     setEditableContext = _useState2[1];
   return (0, _react2.jsx)(_index.Box, {
-    sx: {
+    sx: editableContext.isEditing && editableContext.isFocused ? sx.containerFocused : {
+      padding: '1px',
       position: 'relative'
     }
   }, (0, _react2.jsx)(EditableAreaProvider, {
@@ -148,6 +186,12 @@ var EditablePreview = function EditablePreview() {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     hasFocus = _useState4[0],
     setFocus = _useState4[1];
+  var editablePreview = (0, _react.useRef)(null);
+  var _usePress = (0, _interactions.usePress)({
+      ref: editablePreview
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -155,6 +199,10 @@ var EditablePreview = function EditablePreview() {
       background: editableContext.isEditing ? 'white' : 'accent.95'
     }
   };
+  var _useStatusClasses = (0, _hooks.useStatusClasses)('', {
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
   (0, _react.useEffect)(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -172,7 +220,8 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-  return (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, pressProps, {
+    ref: editablePreview,
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
     "aria-hidden": editableContext.isEditing,
@@ -187,8 +236,9 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
+    className: classNames,
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
-  }, editableContext.value);
+  }), editableContext.value);
 };
 
 /**
@@ -212,6 +262,14 @@ var EditableInput = function EditableInput(props) {
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     editingValue = _useState8[0],
     setEditingValue = _useState8[1];
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  (0, _react.useEffect)(function () {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      isFocused: isFocusVisible
+    }));
+  }, [isFocusVisible]);
   (0, _react.useEffect)(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -245,12 +303,18 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
+  var _useStatusClasses2 = (0, _hooks.useStatusClasses)('', {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses2.classNames;
   return (0, _react2.jsx)(_index.Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
+    className: classNames,
     sx: sx.editableInputWrapper
-  }, (0, _react2.jsx)(_index.TextAreaField, {
-    rows: 1,
+  }, (0, _react2.jsx)(_index.TextAreaField, (0, _extends2["default"])({
+    rows: 1
+  }, focusProps, {
     ref: editableInput,
     role: "textbox",
     contenteditable: "true",
@@ -259,9 +323,8 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: sx.editableInpuTextArea,
-    isUnresizable: true
-  }));
+    sx: sx.editableInpuTextArea
+  })));
 };
 
 /**

package/lib/recipes/InlineEditing.stories.js

@@ -6,14 +6,18 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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) { _defineProperty(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; }
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { useFocusRing } from 'react-aria';
 import CheckIcon from '@pingux/mdi-react/CheckIcon';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
+import { usePress } from '@react-aria/interactions';
 import { withDesign } from 'storybook-addon-designs';
+import { useStatusClasses } from '../hooks';
 import { Box, Icon, IconButton, TextAreaField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -38,6 +42,14 @@ var inputProps = {
   ariaLabel: 'Example aria label'
 };
 var sx = {
+  containerFocused: {
+    padding: 0,
+    position: 'relative',
+    borderColor: 'accent.60',
+    borderStyle: 'solid',
+    borderRadius: '3px 2px 2px 3px',
+    borderWidth: '1px'
+  },
   editablePreview: {
     whiteSpace: 'pre-line',
     width: '100%',
@@ -51,37 +63,61 @@ var sx = {
     fontSize: 'md',
     fontWeight: 1,
     lineHeight: '18px',
+    '&:hover': {
+      cursor: 'pointer',
+      bg: 'accent.95'
+    },
     '&:focus': {
       outline: 'none',
-      boxShadow: 'focus',
+      borderRadius: '2px',
       borderColor: 'active',
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      paddingLeft: '3px',
+      paddingBottom: '4px'
+    },
+    '&.is-pressed': {
       borderWidth: '1px',
-      borderStyle: 'solid'
+      paddingLeft: '4px',
+      paddingBottom: 'xs'
     }
   },
   editableInputWrapper: {
-    marginRight: '30px',
-    flexGrow: 1
+    marginRight: '36px',
+    flexGrow: 1,
+    '&.is-focused textarea': {
+      outline: 'none'
+    },
+    '& label': {
+      margin: 0
+    },
+    '& textarea': {
+      minHeight: '45px',
+      height: '45px',
+      padding: '13px 35px 15px 18px',
+      lineHeight: '100%',
+      resize: 'vertical'
+    }
   },
   editableInpuTextArea: {
     maxHeight: '150px'
   },
   editableControlWrapper: {
     position: 'absolute',
-    right: '0',
-    top: '27.5%',
+    right: '5px',
+    top: 'calc(50% - 13px)',
     alignItems: 'center',
     justifyContent: 'space-between'
   },
   editableControlIconButton: {
-    marginRight: 'md',
+    marginRight: '20px',
     width: '20px',
     height: '20px'
   }
 };
 export var Default = function Default() {
   return ___EmotionJSX(Editable, {
-    value: "Some value..."
+    value: "Inline Editable text"
   }, ___EmotionJSX(EditablePreview, null), ___EmotionJSX(EditableInput, {
     inputProps: inputProps
   }), ___EmotionJSX(EditableControl, {
@@ -105,6 +141,7 @@ var Editable = function Editable(props) {
     isEditing = props.isEditing;
   var editableContextValue = {
     isEditing: isEditing || false,
+    isFocused: false,
     prevValue: '',
     value: value || ''
   };
@@ -113,7 +150,8 @@ var Editable = function Editable(props) {
     editableContext = _useState2[0],
     setEditableContext = _useState2[1];
   return ___EmotionJSX(Box, {
-    sx: {
+    sx: editableContext.isEditing && editableContext.isFocused ? sx.containerFocused : {
+      padding: '1px',
       position: 'relative'
     }
   }, ___EmotionJSX(EditableAreaProvider, {
@@ -135,6 +173,12 @@ var EditablePreview = function EditablePreview() {
     _useState4 = _slicedToArray(_useState3, 2),
     hasFocus = _useState4[0],
     setFocus = _useState4[1];
+  var editablePreview = useRef(null);
+  var _usePress = usePress({
+      ref: editablePreview
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var editablePreviewDynamicSx = {
     backgroundColor: hasFocus ? 'accent.95' : 'white',
     borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
@@ -142,6 +186,10 @@ var EditablePreview = function EditablePreview() {
       background: editableContext.isEditing ? 'white' : 'accent.95'
     }
   };
+  var _useStatusClasses = useStatusClasses('', {
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
   useEffect(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -159,7 +207,8 @@ var EditablePreview = function EditablePreview() {
       }));
     }
   };
-  return ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, _extends({}, pressProps, {
+    ref: editablePreview,
     tabIndex: editableContext.isEditing ? '-1' : '0',
     display: editableContext.isEditing ? 'none' : 'flex',
     "aria-hidden": editableContext.isEditing,
@@ -174,8 +223,9 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
+    className: classNames,
     sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
-  }, editableContext.value);
+  }), editableContext.value);
 };
 
 /**
@@ -199,6 +249,14 @@ var EditableInput = function EditableInput(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     editingValue = _useState8[0],
     setEditingValue = _useState8[1];
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  useEffect(function () {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      isFocused: isFocusVisible
+    }));
+  }, [isFocusVisible]);
   useEffect(function () {
     setEditingValue(editableContext.value);
   }, [editableContext.value]);
@@ -232,12 +290,18 @@ var EditableInput = function EditableInput(props) {
       }));
     }
   };
+  var _useStatusClasses2 = useStatusClasses('', {
+      isFocused: isFocusVisible
+    }),
+    classNames = _useStatusClasses2.classNames;
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
+    className: classNames,
     sx: sx.editableInputWrapper
-  }, ___EmotionJSX(TextAreaField, {
-    rows: 1,
+  }, ___EmotionJSX(TextAreaField, _extends({
+    rows: 1
+  }, focusProps, {
     ref: editableInput,
     role: "textbox",
     contenteditable: "true",
@@ -246,9 +310,8 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: sx.editableInpuTextArea,
-    isUnresizable: true
-  }));
+    sx: sx.editableInpuTextArea
+  })));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.40.0-alpha.1",
+  "version": "2.40.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",