@pingux/astro 2.91.0-alpha.0 → 2.91.0

package/lib/cjs/components/ListBox/Option.js

@@ -91,7 +91,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isDisabled = _useOption.isDisabled,
     isSelected = _useOption.isSelected,
     isFocused = _useOption.isFocused,
-    isFocusVisible = _useOption.isFocusVisible;
+    isFocusVisible = _useOption.isFocusVisible,
+    isPressed = _useOption.isPressed;
   var focused = isFocused || (state === null || state === void 0 || (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
   var setFocusOnHover = function setFocusOnHover() {
     if (!focused && !isCondensed) {
@@ -103,7 +104,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isFocused: focused,
       isSelected: isSelected,
       isCondensed: isCondensed,
-      isFocusVisible: isFocusVisible
+      isFocusVisible: isFocusVisible,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
   var updateActiveDescendant = (0, _MultivaluesContext.useMultivaluesContext)();

package/lib/cjs/components/ListView/ListViewItem.js

@@ -75,7 +75,8 @@ var ListViewItem = function ListViewItem(props) {
       isVirtualized: true
     }, state, rowRef),
     raRowProps = _useGridListItem.rowProps,
-    gridCellProps = _useGridListItem.gridCellProps;
+    gridCellProps = _useGridListItem.gridCellProps,
+    isPressed = _useGridListItem.isPressed;
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = (0, _reactAria.mergeProps)(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
     onPointerLeave: onPointerLeaveFunction
@@ -85,7 +86,8 @@ var ListViewItem = function ListViewItem(props) {
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
-      hasInsetSeparator: hasInsetSeparator
+      hasInsetSeparator: hasInsetSeparator,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
 

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -31,19 +31,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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) { (0, _defineProperty2["default"])(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; }
 var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var component = (0, _react.useMemo)(function () {
-    switch (props.mode) {
-      case 'condensed':
-        return (0, _react2.jsx)(_CondensedMultivaluesField["default"], (0, _extends2["default"])({
-          ref: ref
-        }, props));
-      default:
-        return (0, _react2.jsx)(_DefaultMultivaluesField["default"], (0, _extends2["default"])({
-          ref: ref
-        }, props));
-    }
-  }, [props.mode]);
-  return component;
+  var Component = props.mode === 'condensed' ? _CondensedMultivaluesField["default"] : _DefaultMultivaluesField["default"];
+  return (0, _react2.jsx)(Component, (0, _extends2["default"])({
+    ref: ref
+  }, props));
 });
 MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */

package/lib/cjs/styles/themes/next-gen/convertedComponentList.js

@@ -5,7 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nextGenComponents = exports["default"] = void 0;
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'CodeView'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'ComboBoxField', 'CodeView'];
 var nextGenComponents = ['NavigationHeader'];
 exports.nextGenComponents = nextGenComponents;
 var _default = nextGenConvertedComponents;

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1750,6 +1750,10 @@ declare const _default: {
                         color: string;
                     };
                 };
+                '&.is-pressed': {
+                    color: string;
+                    bg: string;
+                };
             };
         };
         separator: {
@@ -1851,6 +1855,9 @@ declare const _default: {
                     boxShadow: string;
                     bg: string;
                 };
+                '&.is-pressed': {
+                    bg: string;
+                };
             };
             styledContainer: {
                 py: string;
@@ -2054,6 +2061,11 @@ declare const _default: {
             p: string;
             border: string;
             borderColor: string;
+            item: {
+                '&.is-pressed': {
+                    bg: string;
+                };
+            };
         };
     };
     images: {

package/lib/cjs/styles/themes/next-gen/variants/input.js

@@ -120,7 +120,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   pl: 12,
   borderRadius: '4px',
   alignItems: 'center',
-  height: '50px',
+  minHeight: '50px',
   '> input': {
     border: 'none',
     flex: 1,

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -453,6 +453,10 @@ declare const _default: {
                     color: string;
                 };
             };
+            '&.is-pressed': {
+                color: string;
+                bg: string;
+            };
         };
     };
     separator: {
@@ -554,6 +558,9 @@ declare const _default: {
                 boxShadow: string;
                 bg: string;
             };
+            '&.is-pressed': {
+                bg: string;
+            };
         };
         styledContainer: {
             py: string;
@@ -757,6 +764,11 @@ declare const _default: {
         p: string;
         border: string;
         borderColor: string;
+        item: {
+            '&.is-pressed': {
+                bg: string;
+            };
+        };
     };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -255,6 +255,10 @@ var listBox = {
       '&.is-focused': {
         color: 'text.primary'
       }
+    },
+    '&.is-pressed': {
+      color: 'text.primary',
+      bg: 'lightblue'
     }
   }
 };
@@ -368,6 +372,9 @@ var listViewItem = {
     '&.is-focused': {
       boxShadow: '0 0 0 3px inset #1a73e8',
       bg: 'gray-100'
+    },
+    '&.is-pressed': {
+      bg: 'gray-200'
     }
   },
   styledContainer: {
@@ -413,7 +420,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200'
+      backgroundColor: 'light'
     },
     '&.is-focused': _objectSpread({}, navBarFocus)
   },
@@ -424,7 +431,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200',
+      backgroundColor: 'light',
       color: 'text.primary'
     },
     '&.is-selected': {
@@ -558,7 +565,12 @@ var tabs = {
 var menu = {
   p: 'sm',
   border: '1px solid',
-  borderColor: 'gray-300'
+  borderColor: 'gray-300',
+  item: {
+    '&.is-pressed': {
+      bg: 'blue-100'
+    }
+  }
 };
 var _default = {
   navBar: navBar,

package/lib/components/ListBox/Option.js

@@ -80,7 +80,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     isDisabled = _useOption.isDisabled,
     isSelected = _useOption.isSelected,
     isFocused = _useOption.isFocused,
-    isFocusVisible = _useOption.isFocusVisible;
+    isFocusVisible = _useOption.isFocusVisible,
+    isPressed = _useOption.isPressed;
   var focused = isFocused || (state === null || state === void 0 || (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey) === item.key;
   var setFocusOnHover = function setFocusOnHover() {
     if (!focused && !isCondensed) {
@@ -92,7 +93,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       isFocused: focused,
       isSelected: isSelected,
       isCondensed: isCondensed,
-      isFocusVisible: isFocusVisible
+      isFocusVisible: isFocusVisible,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
   var updateActiveDescendant = useMultivaluesContext();

package/lib/components/ListView/ListViewItem.js

@@ -63,7 +63,8 @@ var ListViewItem = function ListViewItem(props) {
       isVirtualized: true
     }, state, rowRef),
     raRowProps = _useGridListItem.rowProps,
-    gridCellProps = _useGridListItem.gridCellProps;
+    gridCellProps = _useGridListItem.gridCellProps,
+    isPressed = _useGridListItem.isPressed;
   var isSelected = state.selectionManager.isSelected(item.key);
   var mergedProps = mergeProps(raRowProps, hoverProps, isFocusable ? _objectSpread(_objectSpread({}, focusProps), focusWithinProps) : {}, {
     onPointerLeave: onPointerLeaveFunction
@@ -73,7 +74,8 @@ var ListViewItem = function ListViewItem(props) {
       isSelected: isSelected,
       isFocused: isDisabled ? false : isFocusVisible || isFocusVisibleWithin,
       hasSeparator: hasSeparator,
-      hasInsetSeparator: hasInsetSeparator
+      hasInsetSeparator: hasInsetSeparator,
+      isPressed: isPressed
     }),
     classNames = _useStatusClasses.classNames;
 

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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, useMemo } from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
@@ -20,19 +20,10 @@ import CondensedMultivaluesField from './CondensedMultivaluesField';
 import DefaultMultivaluesField from './DefaultMultivaluesField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var component = useMemo(function () {
-    switch (props.mode) {
-      case 'condensed':
-        return ___EmotionJSX(CondensedMultivaluesField, _extends({
-          ref: ref
-        }, props));
-      default:
-        return ___EmotionJSX(DefaultMultivaluesField, _extends({
-          ref: ref
-        }, props));
-    }
-  }, [props.mode]);
-  return component;
+  var Component = props.mode === 'condensed' ? CondensedMultivaluesField : DefaultMultivaluesField;
+  return ___EmotionJSX(Component, _extends({
+    ref: ref
+  }, props));
 });
 MultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   /** The initial selected keys in the collection (uncontrolled). */

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,3 +1,3 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'CodeView'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'NavigationHeader', 'Avatar', 'MultivaluesField', 'Text', 'Link', 'Card', 'ComboBoxField', 'CodeView'];
 export var nextGenComponents = ['NavigationHeader'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/variants/input.js

@@ -111,7 +111,7 @@ input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper),
   pl: 12,
   borderRadius: '4px',
   alignItems: 'center',
-  height: '50px',
+  minHeight: '50px',
   '> input': {
     border: 'none',
     flex: 1,

package/lib/styles/themes/next-gen/variants/variants.js

@@ -246,6 +246,10 @@ var listBox = {
       '&.is-focused': {
         color: 'text.primary'
       }
+    },
+    '&.is-pressed': {
+      color: 'text.primary',
+      bg: 'lightblue'
     }
   }
 };
@@ -359,6 +363,9 @@ var listViewItem = {
     '&.is-focused': {
       boxShadow: '0 0 0 3px inset #1a73e8',
       bg: 'gray-100'
+    },
+    '&.is-pressed': {
+      bg: 'gray-200'
     }
   },
   styledContainer: {
@@ -404,7 +411,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200'
+      backgroundColor: 'light'
     },
     '&.is-focused': _objectSpread({}, navBarFocus)
   },
@@ -415,7 +422,7 @@ var navBar = {
       backgroundColor: 'light'
     },
     '&.is-pressed': {
-      backgroundColor: 'gray-200',
+      backgroundColor: 'light',
       color: 'text.primary'
     },
     '&.is-selected': {
@@ -549,7 +556,12 @@ var tabs = {
 var menu = {
   p: 'sm',
   border: '1px solid',
-  borderColor: 'gray-300'
+  borderColor: 'gray-300',
+  item: {
+    '&.is-pressed': {
+      bg: 'blue-100'
+    }
+  }
 };
 export default {
   navBar: navBar,

package/package.json

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