@pingux/astro 1.38.0-alpha.8 → 1.38.0-alpha.9

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -147,7 +147,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [isLoading, showLoading, inputValue]); // END - minimum delay time for loading indicator = 500ms
 
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  var button = (0, _react2.jsx)(_.Box, {
+  var button = !isReadOnly && (0, _react2.jsx)(_.Box, {
     isRow: true,
     variant: "boxes.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -76,7 +76,7 @@ var _ScrollBox = _interopRequireDefault(require("../ScrollBox"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
+var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "isReadOnly", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
     _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 
 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); }
@@ -108,6 +108,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
       inputValue = props.inputValue,
+      isReadOnly = props.isReadOnly,
       menuTrigger = props.menuTrigger,
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
@@ -183,7 +184,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = (0, _combobox2.useComboBoxState)(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    defaultItems: defaultItems,
+    defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
@@ -254,7 +255,16 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     minWidth: menuWidth
   });
 
-  var listbox = (0, _react2.jsx)(_focus.FocusScope, {
+  var listBox = !isReadOnly && (0, _react2.jsx)(_PopoverContainer["default"], {
+    hasNoArrow: true,
+    isDismissable: true,
+    isNonModal: true,
+    isOpen: state.isOpen,
+    onClose: state.close,
+    placement: placement,
+    ref: popoverRef,
+    style: style
+  }, (0, _react2.jsx)(_focus.FocusScope, {
     restoreFocus: true
   }, (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: state.close
@@ -270,7 +280,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSelectedOnPressUp: shouldSelectOnPressUp
   }, otherListBoxProps))), (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: state.close
-  }));
+  })));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBox["default"], (0, _extends2["default"])({}, props, {
     isOpen: state.isOpen,
     inputProps: inputProps,
@@ -281,16 +291,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     triggerRef: buttonRef,
     controlProps: controlProps,
     "aria-invalid": status === 'error' && true
-  })), (0, _react2.jsx)(_PopoverContainer["default"], {
-    hasNoArrow: true,
-    isDismissable: true,
-    isNonModal: true,
-    isOpen: state.isOpen,
-    onClose: state.close,
-    placement: placement,
-    ref: popoverRef,
-    style: style
-  }, listbox));
+  })), listBox);
 });
 ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */

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

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSections = exports.WithCustomInputValue = exports.WithCustomHeight = exports.Required = exports.ReadOnly = exports.HelperText = exports.FocusMenuTrigger = exports.DisabledKeys = exports.Disabled = exports.Default = exports.CustomDefaultFilter = exports.ControlledWithCustomValue = exports.ControlledWithAddOption = exports.ControlledSelection = exports.ControlledMenu = exports.ControlledInput = exports.ControlledFiltering = exports.AsyncLoading = exports.AllowCustomValue = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
@@ -567,6 +567,20 @@ var HelperText = function HelperText() {
 
 exports.HelperText = HelperText;
 
+var ReadOnly = function ReadOnly() {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
+    label: "Example label",
+    defaultItems: items,
+    isReadOnly: true
+  }, actions), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
+
+exports.ReadOnly = ReadOnly;
+
 var Required = function Required() {
   return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_ComboBoxField["default"], (0, _extends2["default"])({
     label: "Example label",

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

@@ -1215,4 +1215,40 @@ test('popover closes on input blur', function () {
 
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});
+describe('when isReadOnly is true', function () {
+  var testProp = {
+    isReadOnly: true
+  };
+  var TEST_DEFAULT_INPUT_VALUE = 'test default input value';
+  test('it does not have the show suggestions button', function () {
+    getComponent(testProp);
+    expect(_testWrapper.screen.queryByRole('button', {
+      name: "".concat(defaultProps.label, " Show suggestions")
+    })).not.toBeInTheDocument();
+  });
+  test('it has attribute readonly', function () {
+    getComponent(testProp);
+    expect(_testWrapper.screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveAttribute('readonly');
+  });
+  test('the default selected value is selected', function () {
+    testProp.defaultInputValue = TEST_DEFAULT_INPUT_VALUE;
+    getComponent(testProp);
+    expect(_testWrapper.screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
+  });
+  test('the dropdown does not open when clicked', function () {
+    getComponent(testProp);
+
+    _userEvent["default"].click(_testWrapper.screen.getByRole('combobox', {
+      name: defaultProps.label
+    }));
+
+    expect(_testWrapper.screen.queryByRole('listbox', {
+      name: 'Test Label Suggestions'
+    })).not.toBeInTheDocument();
+  });
 });

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

@@ -99,7 +99,7 @@ var Default = function Default(_ref) {
   var variant = _ref.variant,
       args = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
-    id: "custom-id",
+    id: "default-id",
     name: "custom-name",
     label: "Example Label"
   }, variant && {
@@ -113,7 +113,7 @@ exports.Default = Default;
 
 var SmallVariant = function SmallVariant() {
   return (0, _react2.jsx)(_["default"], {
-    id: "custom-id",
+    id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
@@ -268,7 +268,7 @@ exports.Warning = Warning;
 
 var WithHelpHint = function WithHelpHint() {
   return (0, _react2.jsx)(_["default"], {
-    id: "custom-id",
+    id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"

package/lib/components/ComboBox/ComboBoxInput.js

@@ -104,7 +104,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
 
   usePropWarning(props, 'disabled', 'isDisabled');
 
-  var button = ___EmotionJSX(Box, {
+  var button = !isReadOnly && ___EmotionJSX(Box, {
     isRow: true,
     variant: "boxes.inputInContainerSlot"
   }, // Render loader after delay if filtering or loading

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
+var _excluded = ["hasAutoFocus", "hasAddOption", "hasCustomValue", "hasNoEmptySelection", "selectedKey", "onSelectionChange", "defaultItems", "items", "loadingState", "onLoadMore", "inputValue", "isReadOnly", "menuTrigger", "isNotFlippable", "direction", "scrollBoxProps", "controlProps", "defaultFilter", "status", "helperText"],
     _excluded2 = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -59,6 +59,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       loadingState = props.loadingState,
       onLoadMore = props.onLoadMore,
       inputValue = props.inputValue,
+      isReadOnly = props.isReadOnly,
       menuTrigger = props.menuTrigger,
       isNotFlippable = props.isNotFlippable,
       direction = props.direction,
@@ -135,7 +136,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
       contains = _useFilter.contains;
 
   var state = useComboBoxState(_objectSpread(_objectSpread({}, comboBoxOptions), {}, {
-    defaultItems: defaultItems,
+    defaultItems: isReadOnly ? [] : defaultItems,
     items: items,
     onSelectionChange: hasAddOption || hasCustomValue ? onSelectionChangeHandler : onSelectionChange,
     defaultFilter: typeof defaultFilter !== 'undefined' ? defaultFilter : contains
@@ -206,7 +207,16 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     minWidth: menuWidth
   });
 
-  var listbox = ___EmotionJSX(FocusScope, {
+  var listBox = !isReadOnly && ___EmotionJSX(PopoverContainer, {
+    hasNoArrow: true,
+    isDismissable: true,
+    isNonModal: true,
+    isOpen: state.isOpen,
+    onClose: state.close,
+    placement: placement,
+    ref: popoverRef,
+    style: style
+  }, ___EmotionJSX(FocusScope, {
     restoreFocus: true
   }, ___EmotionJSX(DismissButton, {
     onDismiss: state.close
@@ -222,7 +232,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelectedOnPressUp: shouldSelectOnPressUp
   }, otherListBoxProps))), ___EmotionJSX(DismissButton, {
     onDismiss: state.close
-  }));
+  })));
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxInput, _extends({}, props, {
     isOpen: state.isOpen,
@@ -234,16 +244,7 @@ var ComboBoxField = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerRef: buttonRef,
     controlProps: controlProps,
     "aria-invalid": status === 'error' && true
-  })), ___EmotionJSX(PopoverContainer, {
-    hasNoArrow: true,
-    isDismissable: true,
-    isNonModal: true,
-    isOpen: state.isOpen,
-    onClose: state.close,
-    placement: placement,
-    ref: popoverRef,
-    style: style
-  }, listbox));
+  })), listBox);
 });
 ComboBoxField.propTypes = _objectSpread({
   /* Whether or not adding new options to the list is enabled. */

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -478,6 +478,17 @@ export var HelperText = function HelperText() {
     }, item.name);
   }));
 };
+export var ReadOnly = function ReadOnly() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
+    label: "Example label",
+    defaultItems: items,
+    isReadOnly: true
+  }, actions), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
 export var Required = function Required() {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
     label: "Example label",

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -1008,4 +1008,38 @@ test('popover closes on input blur', function () {
   userEvent.click(document.body);
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});
+describe('when isReadOnly is true', function () {
+  var testProp = {
+    isReadOnly: true
+  };
+  var TEST_DEFAULT_INPUT_VALUE = 'test default input value';
+  test('it does not have the show suggestions button', function () {
+    getComponent(testProp);
+    expect(screen.queryByRole('button', {
+      name: "".concat(defaultProps.label, " Show suggestions")
+    })).not.toBeInTheDocument();
+  });
+  test('it has attribute readonly', function () {
+    getComponent(testProp);
+    expect(screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveAttribute('readonly');
+  });
+  test('the default selected value is selected', function () {
+    testProp.defaultInputValue = TEST_DEFAULT_INPUT_VALUE;
+    getComponent(testProp);
+    expect(screen.getByRole('combobox', {
+      name: defaultProps.label
+    })).toHaveValue(TEST_DEFAULT_INPUT_VALUE);
+  });
+  test('the dropdown does not open when clicked', function () {
+    getComponent(testProp);
+    userEvent.click(screen.getByRole('combobox', {
+      name: defaultProps.label
+    }));
+    expect(screen.queryByRole('listbox', {
+      name: 'Test Label Suggestions'
+    })).not.toBeInTheDocument();
+  });
 });

package/lib/components/TextField/TextField.stories.js

@@ -57,7 +57,7 @@ export var Default = function Default(_ref) {
       args = _objectWithoutProperties(_ref, _excluded);
 
   return ___EmotionJSX(TextField, _extends({
-    id: "custom-id",
+    id: "default-id",
     name: "custom-name",
     label: "Example Label"
   }, variant && {
@@ -68,7 +68,7 @@ export var Default = function Default(_ref) {
 };
 export var SmallVariant = function SmallVariant() {
   return ___EmotionJSX(TextField, {
-    id: "custom-id",
+    id: "small-variant-id",
     name: "custom-name",
     label: "Example Label",
     controlProps: {
@@ -187,7 +187,7 @@ export var Warning = function Warning() {
 };
 export var WithHelpHint = function WithHelpHint() {
   return ___EmotionJSX(TextField, {
-    id: "custom-id",
+    id: "with-help-hint-id",
     name: "custom-name",
     hintText: "Example Hint",
     label: "Example Label"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.38.0-alpha.8",
+  "version": "1.38.0-alpha.9",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",