@pingux/astro 2.144.1 → 2.145.0-alpha.1

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -44,6 +44,9 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     helperText = props.helperText;
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var helperTextId = (0, _uuid.v4)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var _useSelectField = (0, _hooks.useSelectField)(_objectSpread(_objectSpread({
@@ -69,7 +72,7 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     "aria-describedby": helperText && helperTextId
   }), (0, _react2.jsx)(_.Text, {
     variant: "label",
-    color: "active"
+    color: isOnyx ? 'font.link' : 'active'
   }, placeholder), (0, _react2.jsx)(_.Box, {
     isRow: true
   }, isLoadingInitial && (0, _react2.jsx)(_.Loader, {

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

@@ -1,13 +1,17 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WithInputField = exports.LargeContent = exports.Default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
@@ -16,6 +20,8 @@ var _figmaLinks = require("../../utils/designUtils/figmaLinks");
 var _modalSizes = require("../../utils/devUtils/constants/modalSizes");
 var _Modal = _interopRequireDefault(require("./Modal.mdx"));
 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; }
 var _default = {
   title: 'Components/Modal',
   component: _index.Modal,
@@ -167,6 +173,20 @@ var LargeContent = function LargeContent(args) {
 exports.LargeContent = LargeContent;
 var WithInputField = function WithInputField() {
   var state = (0, _hooks.useModalState)();
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var items = [{
+    id: 'apple',
+    name: 'Apple'
+  }, {
+    id: 'banana',
+    name: 'Banana'
+  }, {
+    id: 'blueberry',
+    name: 'Blueberry'
+  }];
   return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
     onPress: state.open,
     "aria-label": "Open modal"
@@ -193,7 +213,27 @@ var WithInputField = function WithInputField() {
     label: "Option 3",
     value: "option3",
     "data-testid": "option3"
-  })), (0, _react2.jsx)(_index.Box, {
+  })), (0, _react2.jsx)(_index.SearchField, {
+    mode: "autocomplete",
+    defaultItems: items,
+    value: value,
+    onChange: function onChange(val) {
+      setValue(val);
+    },
+    "aria-label": "Search Groups",
+    placeholder: "Search",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    },
+    onClear: function onClear() {
+      setValue('');
+    }
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.id,
+      textValue: item.name
+    }, item.name);
+  }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
     variant: "modal.buttonsContainer"
   }, (0, _react2.jsx)(_index.Button, {

package/lib/cjs/components/SearchField/SearchAutoComplete.js

@@ -157,12 +157,16 @@ var SearchAutoComplete = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     state: comboBoxState,
     isNonModal: true,
     width: popoverWidth
-  }, (0, _react2.jsx)(_.ScrollBox, null, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.ScrollBox, {
+    maxHeight: 200
+  }, (0, _react2.jsx)(_reactAria.FocusScope, {
+    restoreFocus: true
+  }, (0, _react2.jsx)(_ListBox["default"], (0, _extends2["default"])({
     ref: listBoxRef,
     state: comboBoxState,
     isFocusedOnHover: shouldFocusOnHover,
     isSelectedOnPressUp: shouldSelectOnPressUp,
     shouldShowSelectedOption: false
-  }, otherListBoxProps)))));
+  }, otherListBoxProps))))));
 });
 exports.SearchAutoComplete = SearchAutoComplete;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -79,6 +79,7 @@ export declare const colors: {
     font: {
         base: string;
         light: string;
+        link: string;
     };
     badge: {
         background: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -27,7 +27,8 @@ var overrides = {
 exports.overrides = overrides;
 var font = {
   base: _colorTokens.nextGenColors['gray-100'],
-  light: _colorTokens.nextGenColors['gray-400']
+  light: _colorTokens.nextGenColors['gray-400'],
+  link: _colorTokens.nextGenColors['blue-400']
 };
 var hoverDark = _chromaJs["default"].mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -17,7 +17,7 @@ import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Button, Icon, Loader, Text } from '../..';
-import { usePropWarning, useSelectField } from '../../hooks';
+import { useGetTheme, usePropWarning, useSelectField } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
@@ -33,6 +33,9 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     helperText = props.helperText;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
     ariaProps = _getAriaAttributeProp.ariaProps;
+  var _useGetTheme = useGetTheme(),
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   var _useSelectField = useSelectField(_objectSpread(_objectSpread({
@@ -58,7 +61,7 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-describedby": helperText && helperTextId
   }), ___EmotionJSX(Text, {
     variant: "label",
-    color: "active"
+    color: isOnyx ? 'font.link' : 'active'
   }, placeholder), ___EmotionJSX(Box, {
     isRow: true
   }, isLoadingInitial && ___EmotionJSX(Loader, {

package/lib/components/Modal/Modal.stories.js

@@ -1,9 +1,10 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useModalState } from '../../hooks';
-import { Box, Button, Item, Modal, OverlayProvider, RadioField, RadioGroupField, SelectField, Text } from '../../index';
+import { Box, Button, Item, Modal, OverlayProvider, RadioField, RadioGroupField, SearchField, SelectField, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import ModalReadme from './Modal.mdx';
@@ -156,6 +157,20 @@ export var LargeContent = function LargeContent(args) {
 };
 export var WithInputField = function WithInputField() {
   var state = useModalState();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var items = [{
+    id: 'apple',
+    name: 'Apple'
+  }, {
+    id: 'banana',
+    name: 'Banana'
+  }, {
+    id: 'blueberry',
+    name: 'Blueberry'
+  }];
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
     onPress: state.open,
     "aria-label": "Open modal"
@@ -182,7 +197,27 @@ export var WithInputField = function WithInputField() {
     label: "Option 3",
     value: "option3",
     "data-testid": "option3"
-  })), ___EmotionJSX(Box, {
+  })), ___EmotionJSX(SearchField, {
+    mode: "autocomplete",
+    defaultItems: items,
+    value: value,
+    onChange: function onChange(val) {
+      setValue(val);
+    },
+    "aria-label": "Search Groups",
+    placeholder: "Search",
+    onSubmit: function onSubmit(text) {
+      return alert(text);
+    },
+    onClear: function onClear() {
+      setValue('');
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.id,
+      textValue: item.name
+    }, item.name);
+  }), ___EmotionJSX(Box, {
     isRow: true,
     variant: "modal.buttonsContainer"
   }, ___EmotionJSX(Button, {

package/lib/components/SearchField/SearchAutoComplete.js

@@ -14,7 +14,7 @@ var _excluded = ["shouldFocusOnHover", "shouldSelectOnPressUp"];
 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, { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { useComboBox, useFilter, useSearchField } from 'react-aria';
+import { FocusScope, useComboBox, useFilter, useSearchField } from 'react-aria';
 import { useComboBoxState, useSearchFieldState } from 'react-stately';
 import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import { mergeProps, useResizeObserver } from '@react-aria/utils';
@@ -146,11 +146,15 @@ export var SearchAutoComplete = /*#__PURE__*/forwardRef(function (props, ref) {
     state: comboBoxState,
     isNonModal: true,
     width: popoverWidth
-  }, ___EmotionJSX(ScrollBox, null, ___EmotionJSX(ListBox, _extends({
+  }, ___EmotionJSX(ScrollBox, {
+    maxHeight: 200
+  }, ___EmotionJSX(FocusScope, {
+    restoreFocus: true
+  }, ___EmotionJSX(ListBox, _extends({
     ref: listBoxRef,
     state: comboBoxState,
     isFocusedOnHover: shouldFocusOnHover,
     isSelectedOnPressUp: shouldSelectOnPressUp,
     shouldShowSelectedOption: false
-  }, otherListBoxProps)))));
+  }, otherListBoxProps))))));
 });

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -19,7 +19,8 @@ export var overrides = {
 };
 var font = {
   base: nextGenColors['gray-100'],
-  light: nextGenColors['gray-400']
+  light: nextGenColors['gray-400'],
+  link: nextGenColors['blue-400']
 };
 var hoverDark = chroma.mix('#23282e', 'white', 0.04, 'rgb').hex();
 var border = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.144.1",
+  "version": "2.145.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -205,7 +205,8 @@
     "jest-canvas-mock": "^2.3.0",
     "jest-emotion": "^11.0.0",
     "jest-pnp-resolver": "^1.2.2",
-    "msw": "^2.10.5",
+    "msw": "^2.11.3",
+    "msw-storybook-addon": "^2.0.5",
     "mutationobserver-shim": "^0.3.7",
     "react": "18",
     "react-dom": "18",