@pingux/astro 1.3.2-alpha.0 → 1.4.0-alpha.0

package/lib/cjs/components/FieldHelperText/FieldHelperText.js

@@ -48,7 +48,6 @@ var FieldHelperText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
 
   return (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     ref: ref,
-    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -125,7 +125,8 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     state: state,
     triggerRef: triggerRef,
     label: label,
-    name: name
+    name: name,
+    isDisabled: true
   }), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: status
   }, helperText));

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

@@ -28,6 +28,8 @@ var _hooks = require("../../hooks");
 
 var _SelectFieldBase = _interopRequireDefault(require("./SelectFieldBase"));
 
+var _constants = require("../Label/constants");
+
 var _react2 = require("@emotion/react");
 
 var items = [{
@@ -163,6 +165,20 @@ test('select field with helper text', function () {
   expect(fieldHelperText).toBeInTheDocument();
   expect(fieldHelperText).toHaveClass("is-".concat(_statuses["default"].ERROR));
 });
+test('label floats after user\'s interacting', function () {
+  getComponent({
+    labelMode: _constants.modes.FLOAT,
+    value: ''
+  });
+
+  var textAreaContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(textAreaContainer).not.toHaveClass('is-float-label-active');
+
+  _userEvent["default"].tab();
+
+  expect(textAreaContainer).toHaveClass('is-float-label-active');
+});
 test('clicking on the visible button opens the popuplist', function () {
   getComponent();
 

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -56,6 +56,8 @@ var _PopoverContainer = _interopRequireDefault(require("../../components/Popover
 
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox"));
 
+var _constants = require("../../components/Label/constants");
+
 var _react2 = require("@emotion/react");
 
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -140,6 +142,7 @@ var useSelectField = function useSelectField(props, ref) {
       menuProps = _useSelect.menuProps;
 
   var _useField = (0, _.useField)(_objectSpread(_objectSpread({}, props), {}, {
+    placeholder: props.labelMode === _constants.modes.FLOAT ? '' : placeholder,
     labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
     containerProps: _objectSpread({
       isFloatLabelActive: state.selectedItem

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

@@ -0,0 +1,347 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports.Default = exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _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 _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var _default = {
+  title: 'Recipes/EditableInput'
+};
+exports["default"] = _default;
+var EditableAreaContext = /*#__PURE__*/(0, _react.createContext)();
+var EditableAreaProvider = EditableAreaContext.Provider;
+var controlProps = {
+  confirmBtn: {
+    ariaLabel: 'Confirm',
+    variant: 'invertedSquare'
+  },
+  cancelBtn: {
+    ariaLabel: 'Cancel',
+    variant: 'square'
+  }
+};
+var inputProps = {
+  label: 'Example label',
+  ariaLabel: 'Example aria label'
+};
+
+var Default = function Default() {
+  return (0, _react2.jsx)(Editable, {
+    value: "Some value..."
+  }, (0, _react2.jsx)(EditablePreview, null), (0, _react2.jsx)(EditableInput, {
+    inputProps: inputProps
+  }), (0, _react2.jsx)(EditableControl, {
+    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;
+  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];
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      position: 'relative'
+    }
+  }, (0, _react2.jsx)(EditableAreaProvider, {
+    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];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      hasFocus = _useState4[0],
+      setFocus = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    if (hasFocus && editableContext.isEditing) {
+      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), {}, {
+        isEditing: true
+      }));
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    tabIndex: 0,
+    hidden: editableContext.isEditing,
+    "aria-hidden": editableContext.isEditing,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    "aria-readonly": "false",
+    "aria-label": "Inline editable text field",
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
+    },
+    placeholder: "Click or press enter to edit text",
+    sx: {
+      whiteSpace: 'pre-line',
+      backgroundColor: hasFocus ? 'accent.95' : 'white',
+      width: '100%',
+      overflowWrap: 'break-word',
+      minHeight: '45px',
+      paddingLeft: 'xs',
+      justifyContent: 'flex-end',
+      paddingBottom: 'xs',
+      borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+      borderBottomColor: 'active',
+      color: 'neutral.10',
+      fontSize: 'md',
+      fontWeight: 1,
+      lineHeight: '18px',
+      '&:hover': {
+        background: editableContext.isEditing ? 'white' : 'accent.95'
+      },
+      '&:focus': {
+        outline: 'none',
+        boxShadow: 'focus',
+        borderColor: 'active',
+        borderWidth: '1px',
+        borderStyle: 'solid'
+      }
+    }
+  }, 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];
+
+  var _useState5 = (0, _react.useState)(editableContext.value || ''),
+      _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];
+
+  (0, _react.useEffect)(function () {
+    setEditingValue(editableContext.value);
+  }, [editableContext.value]);
+  (0, _react.useEffect)(function () {
+    if (editableContext.isEditing) {
+      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), {}, {
+        prevValue: prevValue,
+        value: prevValue,
+        isEditing: false
+      }));
+    } else if (e.key === 'Enter') {
+      if (e.shiftKey) {
+        return;
+      }
+
+      setPrevValue(editableContext.value);
+      setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+        prevValue: editableContext.value,
+        value: editableContext.value,
+        isEditing: false
+      }));
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    hidden: !editableContext.isEditing,
+    "aria-hidden": !editableContext.isEditing,
+    sx: {
+      marginRight: '30px',
+      flexGrow: 1
+    }
+  }, (0, _react2.jsx)(_index.TextAreaField, {
+    rows: 1,
+    ref: editableInput,
+    role: "textbox",
+    contenteditable: "true",
+    "aria-multiline": "true",
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    value: editingValue,
+    "aria-label": ariaLabel,
+    sx: {
+      maxHeight: '150px'
+    },
+    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;
+
+  var _useContext5 = (0, _react.useContext)(EditableAreaContext),
+      _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];
+
+  var handleCancel = function handleCancel() {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      prevValue: prevValue,
+      value: prevValue,
+      isEditing: false
+    }));
+  };
+
+  var handleSubmit = function handleSubmit() {
+    setPrevValue(editableContext.value);
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      prevValue: editableContext.value,
+      value: editableContext.value,
+      isEditing: false
+    }));
+
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    hidden: !editableContext.isEditing,
+    "aria-hidden": !editableContext.isEditing,
+    isRow: true,
+    sx: {
+      position: 'absolute',
+      right: '0',
+      top: '27.5%',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, {
+    onPress: handleSubmit,
+    "aria-label": confirmBtn.ariaLabel,
+    variant: confirmBtn.variant,
+    mr: "15px",
+    sx: {
+      width: '20px',
+      height: '20px'
+    }
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CheckIcon["default"]
+  })), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": cancelBtn.ariaLabel,
+    onPress: handleCancel,
+    variant: cancelBtn.variant
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CloseIcon["default"]
+  })));
+};

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

@@ -4,49 +4,29 @@ var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopReq
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
-var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
-_Object$defineProperty2(exports, "__esModule", {
+_Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports.Default = exports["default"] = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
-
-var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
-
-var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
-
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
-var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
-
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-
 var _repeat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/repeat"));
 
-var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _EyeIcon = _interopRequireDefault(require("mdi-react/EyeIcon"));
+var _EyeOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOutlineIcon"));
 
-var _EyeOffIcon = _interopRequireDefault(require("mdi-react/EyeOffIcon"));
+var _EyeOffOutlineIcon = _interopRequireDefault(require("mdi-react/EyeOffOutlineIcon"));
 
 var _index = require("../index");
 
-var _react2 = require("@emotion/react");
-
-function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _hooks = require("../hooks");
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Recipes/MaskedValues',
@@ -61,7 +41,7 @@ var _default = {
       control: {
         type: 'text'
       },
-      defaultValue: 'very-secret-information.?1234512345'
+      defaultValue: 'A secret piece of text'
     }
   }
 };
@@ -78,19 +58,21 @@ var Default = function Default(_ref) {
       isMasked = _useState2[0],
       setIsMasked = _useState2[1];
 
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
+    isMasked: isMasked
+  }),
+      classNames = _useStatusClasses.classNames;
+
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "label"
   }, dataTitle), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
   }, (0, _react2.jsx)(_index.Text, {
-    sx: _objectSpread({
-      width: 255,
-      wordBreak: 'break-all'
-    }, isMasked && {
-      letterSpacing: 2
-    })
-  }, isMasked ? (0, _repeat["default"])(_context = '•').call(_context, secretData === null || secretData === void 0 ? void 0 : secretData.length) : secretData), (0, _react2.jsx)(_index.IconButton, {
+    variant: "maskedValue",
+    className: classNames
+  }, isMasked ? (0, _repeat["default"])(_context = '•').call(_context, 99) : secretData), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": isMasked ? 'Show content' : 'Hide content',
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
@@ -100,7 +82,7 @@ var Default = function Default(_ref) {
       alignSelf: 'auto'
     }
   }, (0, _react2.jsx)(_index.Icon, {
-    icon: isMasked ? _EyeOffIcon["default"] : _EyeIcon["default"]
+    icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
   }))));
 };
 

package/lib/cjs/styles/variants/text.js

@@ -63,7 +63,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
 
 var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
-  pb: 'sm',
   '&.is-default': {
     color: 'text.secondary'
   },
@@ -162,6 +161,15 @@ var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontWeight: 1
 });
 
+var maskedValue = {
+  width: 252,
+  wordBreak: 'break-all',
+  '&.is-masked': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    fontWeight: 700
+  }
+};
 var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -239,6 +247,7 @@ var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }),
+  maskedValue: maskedValue,
   expandableRow: expandableRow,
   navBarHeaderText: navBarHeaderText,
   navBarSubtitle: navBarSubtitle,

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -25,7 +25,6 @@ var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(Text, _extends({
     ref: ref,
-    pt: "sm",
     variant: "fieldHelperText",
     role: "status"
   }, others, {

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -90,7 +90,8 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     state: state,
     triggerRef: triggerRef,
     label: label,
-    name: name
+    name: name,
+    isDisabled: true
   }), trigger || defaultTrigger, overlay, helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));

package/lib/components/SelectFieldBase/SelectFieldBase.test.js

@@ -10,6 +10,7 @@ import statuses from '../../utils/devUtils/constants/statuses';
 import { Item } from '../../index';
 import { useSelectField } from '../../hooks';
 import SelectFieldBase from './SelectFieldBase';
+import { modes } from '../Label/constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
   name: 'a'
@@ -135,6 +136,16 @@ test('select field with helper text', function () {
   expect(fieldHelperText).toBeInTheDocument();
   expect(fieldHelperText).toHaveClass("is-".concat(statuses.ERROR));
 });
+test('label floats after user\'s interacting', function () {
+  getComponent({
+    labelMode: modes.FLOAT,
+    value: ''
+  });
+  var textAreaContainer = screen.getByTestId(testId);
+  expect(textAreaContainer).not.toHaveClass('is-float-label-active');
+  userEvent.tab();
+  expect(textAreaContainer).toHaveClass('is-float-label-active');
+});
 test('clicking on the visible button opens the popuplist', function () {
   getComponent();
   var button = screen.getByRole('button');

package/lib/hooks/useSelectField/useSelectField.js

@@ -25,6 +25,7 @@ import { useColumnStyles, useDeprecationWarning, useField } from '..';
 import ListBox from '../../components/ListBox';
 import PopoverContainer from '../../components/PopoverContainer';
 import ScrollBox from '../../components/ScrollBox';
+import { modes } from '../../components/Label/constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var useSelectField = function useSelectField(props, ref) {
@@ -105,6 +106,7 @@ var useSelectField = function useSelectField(props, ref) {
       menuProps = _useSelect.menuProps;
 
   var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+    placeholder: props.labelMode === modes.FLOAT ? '' : placeholder,
     labelProps: _objectSpread(_objectSpread({}, props.labelProps), labelProps),
     containerProps: _objectSpread({
       isFloatLabelActive: state.selectedItem

package/lib/recipes/EditableInput.stories.js

@@ -0,0 +1,314 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
+import CloseIcon from 'mdi-react/CloseIcon';
+import CheckIcon from 'mdi-react/CheckIcon';
+import { TextAreaField, IconButton, Icon, Box } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/EditableInput'
+};
+var EditableAreaContext = /*#__PURE__*/createContext();
+var EditableAreaProvider = EditableAreaContext.Provider;
+var controlProps = {
+  confirmBtn: {
+    ariaLabel: 'Confirm',
+    variant: 'invertedSquare'
+  },
+  cancelBtn: {
+    ariaLabel: 'Cancel',
+    variant: 'square'
+  }
+};
+var inputProps = {
+  label: 'Example label',
+  ariaLabel: 'Example aria label'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Editable, {
+    value: "Some value..."
+  }, ___EmotionJSX(EditablePreview, null), ___EmotionJSX(EditableInput, {
+    inputProps: inputProps
+  }), ___EmotionJSX(EditableControl, {
+    controlProps: controlProps
+  }));
+};
+/**
+ * Editable
+ * Wrapper component that provides context value for all editable components
+ */
+
+var Editable = function Editable(props) {
+  var value = props.value,
+      isEditing = props.isEditing;
+  var editableContextValue = {
+    isEditing: isEditing || false,
+    prevValue: '',
+    value: value || ''
+  };
+
+  var _useState = useState(editableContextValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      editableContext = _useState2[0],
+      setEditableContext = _useState2[1];
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      position: 'relative'
+    }
+  }, ___EmotionJSX(EditableAreaProvider, {
+    value: [editableContext, setEditableContext]
+  }, props.children));
+};
+/**
+ * Editable preview
+ * Read-only view of the component
+ */
+
+
+var EditablePreview = function EditablePreview() {
+  var _useContext = useContext(EditableAreaContext),
+      _useContext2 = _slicedToArray(_useContext, 2),
+      editableContext = _useContext2[0],
+      setEditableContext = _useContext2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasFocus = _useState4[0],
+      setFocus = _useState4[1];
+
+  useEffect(function () {
+    if (hasFocus && editableContext.isEditing) {
+      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), {}, {
+        isEditing: true
+      }));
+    }
+  };
+
+  return ___EmotionJSX(Box, {
+    tabIndex: 0,
+    hidden: editableContext.isEditing,
+    "aria-hidden": editableContext.isEditing,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    "aria-readonly": "false",
+    "aria-label": "Inline editable text field",
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
+    },
+    placeholder: "Click or press enter to edit text",
+    sx: {
+      whiteSpace: 'pre-line',
+      backgroundColor: hasFocus ? 'accent.95' : 'white',
+      width: '100%',
+      overflowWrap: 'break-word',
+      minHeight: '45px',
+      paddingLeft: 'xs',
+      justifyContent: 'flex-end',
+      paddingBottom: 'xs',
+      borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+      borderBottomColor: 'active',
+      color: 'neutral.10',
+      fontSize: 'md',
+      fontWeight: 1,
+      lineHeight: '18px',
+      '&:hover': {
+        background: editableContext.isEditing ? 'white' : 'accent.95'
+      },
+      '&:focus': {
+        outline: 'none',
+        boxShadow: 'focus',
+        borderColor: 'active',
+        borderWidth: '1px',
+        borderStyle: 'solid'
+      }
+    }
+  }, 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 = useRef(null);
+
+  var _useContext3 = useContext(EditableAreaContext),
+      _useContext4 = _slicedToArray(_useContext3, 2),
+      editableContext = _useContext4[0],
+      setEditableContext = _useContext4[1];
+
+  var _useState5 = useState(editableContext.value || ''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      prevValue = _useState6[0],
+      setPrevValue = _useState6[1];
+
+  var _useState7 = useState(editableContext.value || ''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      editingValue = _useState8[0],
+      setEditingValue = _useState8[1];
+
+  useEffect(function () {
+    setEditingValue(editableContext.value);
+  }, [editableContext.value]);
+  useEffect(function () {
+    if (editableContext.isEditing) {
+      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), {}, {
+        prevValue: prevValue,
+        value: prevValue,
+        isEditing: false
+      }));
+    } else if (e.key === 'Enter') {
+      if (e.shiftKey) {
+        return;
+      }
+
+      setPrevValue(editableContext.value);
+      setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+        prevValue: editableContext.value,
+        value: editableContext.value,
+        isEditing: false
+      }));
+    }
+  };
+
+  return ___EmotionJSX(Box, {
+    hidden: !editableContext.isEditing,
+    "aria-hidden": !editableContext.isEditing,
+    sx: {
+      marginRight: '30px',
+      flexGrow: 1
+    }
+  }, ___EmotionJSX(TextAreaField, {
+    rows: 1,
+    ref: editableInput,
+    role: "textbox",
+    contenteditable: "true",
+    "aria-multiline": "true",
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    value: editingValue,
+    "aria-label": ariaLabel,
+    sx: {
+      maxHeight: '150px'
+    },
+    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;
+
+  var _useContext5 = useContext(EditableAreaContext),
+      _useContext6 = _slicedToArray(_useContext5, 2),
+      editableContext = _useContext6[0],
+      setEditableContext = _useContext6[1];
+
+  var _useState9 = useState(editableContext.value || ''),
+      _useState10 = _slicedToArray(_useState9, 2),
+      prevValue = _useState10[0],
+      setPrevValue = _useState10[1];
+
+  var handleCancel = function handleCancel() {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      prevValue: prevValue,
+      value: prevValue,
+      isEditing: false
+    }));
+  };
+
+  var handleSubmit = function handleSubmit() {
+    setPrevValue(editableContext.value);
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      prevValue: editableContext.value,
+      value: editableContext.value,
+      isEditing: false
+    }));
+
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  return ___EmotionJSX(Box, {
+    hidden: !editableContext.isEditing,
+    "aria-hidden": !editableContext.isEditing,
+    isRow: true,
+    sx: {
+      position: 'absolute',
+      right: '0',
+      top: '27.5%',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
+  }, ___EmotionJSX(IconButton, {
+    onPress: handleSubmit,
+    "aria-label": confirmBtn.ariaLabel,
+    variant: confirmBtn.variant,
+    mr: "15px",
+    sx: {
+      width: '20px',
+      height: '20px'
+    }
+  }, ___EmotionJSX(Icon, {
+    icon: CheckIcon
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": cancelBtn.ariaLabel,
+    onPress: handleCancel,
+    variant: cancelBtn.variant
+  }, ___EmotionJSX(Icon, {
+    icon: CloseIcon
+  })));
+};

package/lib/recipes/MaskedValue.stories.js

@@ -1,23 +1,10 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _repeatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/repeat";
-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); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import React, { useState } from 'react';
-import EyeIcon from 'mdi-react/EyeIcon';
-import EyeOffIcon from 'mdi-react/EyeOffIcon';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
+import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
 import { Box, Icon, IconButton, Text } from '../index';
+import { useStatusClasses } from '../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/MaskedValues',
@@ -32,7 +19,7 @@ export default {
       control: {
         type: 'text'
       },
-      defaultValue: 'very-secret-information.?1234512345'
+      defaultValue: 'A secret piece of text'
     }
   }
 };
@@ -47,19 +34,21 @@ export var Default = function Default(_ref) {
       isMasked = _useState2[0],
       setIsMasked = _useState2[1];
 
+  var _useStatusClasses = useStatusClasses(null, {
+    isMasked: isMasked
+  }),
+      classNames = _useStatusClasses.classNames;
+
   return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "label"
   }, dataTitle), ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
   }, ___EmotionJSX(Text, {
-    sx: _objectSpread({
-      width: 255,
-      wordBreak: 'break-all'
-    }, isMasked && {
-      letterSpacing: 2
-    })
-  }, isMasked ? _repeatInstanceProperty(_context = '•').call(_context, secretData === null || secretData === void 0 ? void 0 : secretData.length) : secretData), ___EmotionJSX(IconButton, {
+    variant: "maskedValue",
+    className: classNames
+  }, isMasked ? _repeatInstanceProperty(_context = '•').call(_context, 99) : secretData), ___EmotionJSX(IconButton, {
+    "aria-label": isMasked ? 'Show content' : 'Hide content',
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },

package/lib/styles/variants/text.js

@@ -43,7 +43,6 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
 
 var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
-  pb: 'sm',
   '&.is-default': {
     color: 'text.secondary'
   },
@@ -142,6 +141,15 @@ var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontWeight: 1
 });
 
+var maskedValue = {
+  width: 252,
+  wordBreak: 'break-all',
+  '&.is-masked': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    fontWeight: 700
+  }
+};
 export var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -219,6 +227,7 @@ export var text = {
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   }),
+  maskedValue: maskedValue,
   expandableRow: expandableRow,
   navBarHeaderText: navBarHeaderText,
   navBarSubtitle: navBarSubtitle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.3.2-alpha.0",
+  "version": "1.4.0-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",