@pingux/astro 1.3.2-alpha.1 → 1.3.2-alpha.2

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/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/package.json

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