@pingux/astro 2.140.0 → 2.141.0-alpha.0

package/lib/cjs/components/Card/Card.js

@@ -40,7 +40,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onPressEnd = props.onPressEnd,
     onPressChange = props.onPressChange,
     onPressUp = props.onPressUp,
-    isInteractiveWithin = props.isInteractiveWithin,
+    _props$isInteractiveW = props.isInteractiveWithin,
+    isInteractiveWithin = _props$isInteractiveW === void 0 ? true : _props$isInteractiveW,
     isSelected = props.isSelected,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var cardRef = (0, _hooks.useLocalOrForwardRef)(ref);
@@ -77,8 +78,6 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
-
-  // TODO: [Astro 3.0.0] Update isInteractiveWithin[default] for this prop to true
   var mergedProps = (0, _utils.mergeProps)(others, focusWithinProps, !isInteractiveWithin ? _objectSpread(_objectSpread(_objectSpread({}, pressProps), hoverProps), focusProps) : {});
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     "aria-label": ariaLabel,

package/lib/cjs/components/Card/Card.stories.d.ts

@@ -33,4 +33,4 @@ export declare const InteractiveCard: {
     };
 };
 export declare const WithInteractiveContent: (args: any) => React.JSX.Element;
-export declare const ActiveCard: (args: any) => React.JSX.Element;
+export declare const RadioGroupCard: (args: any) => React.JSX.Element;

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

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithInteractiveContent = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = exports.ActiveCard = void 0;
+exports["default"] = exports.WithInteractiveContent = exports.RadioGroupCard = exports.InteractiveCard = exports.HeaderAndFooter = exports.Default = exports.CardWidth = exports.CardRow = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -56,8 +56,7 @@ Default.parameters = {
 var HeaderAndFooter = function HeaderAndFooter(args) {
   var textStyling = {
     fontSize: 'md',
-    fontWeight: 600,
-    color: 'text.secondary'
+    fontWeight: 600
   };
   return (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({}, args, {
     variant: "cards.flat",
@@ -163,7 +162,8 @@ var InteractiveCard = function InteractiveCard(args) {
     },
     tabIndex: "0",
     variant: "cards.interactive",
-    sx: sx
+    sx: sx,
+    isInteractiveWithin: false
   }), "Interactive Card");
 };
 exports.InteractiveCard = InteractiveCard;
@@ -183,7 +183,7 @@ var WithInteractiveContent = function WithInteractiveContent(args) {
   }));
 };
 exports.WithInteractiveContent = WithInteractiveContent;
-var ActiveCard = function ActiveCard(args) {
+var RadioGroupCard = function RadioGroupCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -202,7 +202,8 @@ var ActiveCard = function ActiveCard(args) {
     isSelected: isSelected,
     onPress: function onPress() {
       return setIsSelected(!isSelected);
-    }
+    },
+    isInteractiveWithin: false
   }), "Active Card");
 };
-exports.ActiveCard = ActiveCard;
+exports.RadioGroupCard = RadioGroupCard;

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

@@ -57,7 +57,8 @@ test('card allows hover, focus, and press events', function () {
   getComponent({
     children: children,
     onPress: onPress,
-    tabIndex: 0
+    tabIndex: 0,
+    isInteractiveWithin: false
   });
   var card = _react2.screen.getByTestId(testId);
   expect(card).not.toHaveClass('is-hovered');

package/lib/cjs/components/RangeCalendar/RangeCalendarHeader.js

@@ -7,6 +7,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _ChevronLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronLeftIcon"));
 var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
@@ -14,6 +15,7 @@ var _i18n = require("@react-aria/i18n");
 var _visuallyHidden = require("@react-aria/visually-hidden");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
+var _excluded = ["onFocusChange"];
 var RangeCalendarHeader = function RangeCalendarHeader(props) {
   var state = props.state,
     calendarProps = props.calendarProps,
@@ -27,7 +29,19 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
 
   // to remove warning for unknown event handler property `onFocusChange`.
   delete prevButtonProps.onFocusChange;
-  delete nextButtonProps.onFocusChange;
+  // Removes warning without Safari losing Spectrum’s focus management
+  var onFocusChange = nextButtonProps.onFocusChange,
+    otherNextButtonProps = (0, _objectWithoutProperties2["default"])(nextButtonProps, _excluded);
+
+  /* istanbul ignore next */
+  var nextButtonFocusProps = {
+    onFocus: function onFocus() {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
+    },
+    onBlur: function onBlur() {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
+    }
+  };
   return (0, _react2.jsx)(_index.Box, {
     variant: "rangeCalendar.calendarHeaderContainer",
     isRow: true
@@ -71,7 +85,7 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
       position: 'absolute',
       right: '10px'
     }
-  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, otherNextButtonProps, nextButtonFocusProps, {
     "aria-label": "Next month navigation"
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronRightIcon["default"],

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

@@ -3287,6 +3287,7 @@ declare const _default: {
         container: {
             p: string;
             borderColor: string;
+            lineHeight: number;
             boxShadow: string;
             border: string;
             borderRadius: string;
@@ -3337,6 +3338,7 @@ declare const _default: {
         tableWrapper: {
             p: string;
             borderColor: string;
+            lineHeight: number;
             boxShadow: string;
             border: string;
             borderRadius: string;

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

@@ -63,6 +63,7 @@ declare const _default: {
     container: {
         p: string;
         borderColor: string;
+        lineHeight: number;
         boxShadow: string;
         border: string;
         borderRadius: string;
@@ -113,6 +114,7 @@ declare const _default: {
     tableWrapper: {
         p: string;
         borderColor: string;
+        lineHeight: number;
         boxShadow: string;
         border: string;
         borderRadius: string;

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

@@ -37,7 +37,8 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   p: 'lg',
-  borderColor: 'border.base'
+  borderColor: 'border.base',
+  lineHeight: 1.6
 });
 var dark = _objectSpread(_objectSpread({}, _flatInstanceProperty(_Card)), {}, {
   border: 'none',

package/lib/components/Card/Card.js

@@ -29,7 +29,8 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
     onPressEnd = props.onPressEnd,
     onPressChange = props.onPressChange,
     onPressUp = props.onPressUp,
-    isInteractiveWithin = props.isInteractiveWithin,
+    _props$isInteractiveW = props.isInteractiveWithin,
+    isInteractiveWithin = _props$isInteractiveW === void 0 ? true : _props$isInteractiveW,
     isSelected = props.isSelected,
     others = _objectWithoutProperties(props, _excluded);
   var cardRef = useLocalOrForwardRef(ref);
@@ -66,8 +67,6 @@ var Card = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'];
-
-  // TODO: [Astro 3.0.0] Update isInteractiveWithin[default] for this prop to true
   var mergedProps = mergeProps(others, focusWithinProps, !isInteractiveWithin ? _objectSpread(_objectSpread(_objectSpread({}, pressProps), hoverProps), focusProps) : {});
   return ___EmotionJSX(Box, _extends({
     "aria-label": ariaLabel,

package/lib/components/Card/Card.stories.js

@@ -47,8 +47,7 @@ Default.parameters = {
 export var HeaderAndFooter = function HeaderAndFooter(args) {
   var textStyling = {
     fontSize: 'md',
-    fontWeight: 600,
-    color: 'text.secondary'
+    fontWeight: 600
   };
   return ___EmotionJSX(Card, _extends({}, args, {
     variant: "cards.flat",
@@ -151,7 +150,8 @@ export var InteractiveCard = function InteractiveCard(args) {
     },
     tabIndex: "0",
     variant: "cards.interactive",
-    sx: sx
+    sx: sx,
+    isInteractiveWithin: false
   }), "Interactive Card");
 };
 InteractiveCard.parameters = {
@@ -169,7 +169,7 @@ export var WithInteractiveContent = function WithInteractiveContent(args) {
     width: "300px"
   }));
 };
-export var ActiveCard = function ActiveCard(args) {
+export var RadioGroupCard = function RadioGroupCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -188,6 +188,7 @@ export var ActiveCard = function ActiveCard(args) {
     isSelected: isSelected,
     onPress: function onPress() {
       return setIsSelected(!isSelected);
-    }
+    },
+    isInteractiveWithin: false
   }), "Active Card");
 };

package/lib/components/Card/Card.test.js

@@ -54,7 +54,8 @@ test('card allows hover, focus, and press events', function () {
   getComponent({
     children: children,
     onPress: onPress,
-    tabIndex: 0
+    tabIndex: 0,
+    isInteractiveWithin: false
   });
   var card = screen.getByTestId(testId);
   expect(card).not.toHaveClass('is-hovered');

package/lib/components/RangeCalendar/RangeCalendarHeader.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["onFocusChange"];
 import React from 'react';
 import ChevronLeftIcon from '@pingux/mdi-react/ChevronLeftIcon';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
@@ -19,7 +21,19 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
 
   // to remove warning for unknown event handler property `onFocusChange`.
   delete prevButtonProps.onFocusChange;
-  delete nextButtonProps.onFocusChange;
+  // Removes warning without Safari losing Spectrum’s focus management
+  var onFocusChange = nextButtonProps.onFocusChange,
+    otherNextButtonProps = _objectWithoutProperties(nextButtonProps, _excluded);
+
+  /* istanbul ignore next */
+  var nextButtonFocusProps = {
+    onFocus: function onFocus() {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
+    },
+    onBlur: function onBlur() {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
+    }
+  };
   return ___EmotionJSX(Box, {
     variant: "rangeCalendar.calendarHeaderContainer",
     isRow: true
@@ -63,7 +77,7 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
       position: 'absolute',
       right: '10px'
     }
-  }, ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
+  }, ___EmotionJSX(IconButton, _extends({}, otherNextButtonProps, nextButtonFocusProps, {
     "aria-label": "Next month navigation"
   }), ___EmotionJSX(Icon, {
     icon: ChevronRightIcon,

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

@@ -29,7 +29,8 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, flat), {}, {
   p: 'lg',
-  borderColor: 'border.base'
+  borderColor: 'border.base',
+  lineHeight: 1.6
 });
 var dark = _objectSpread(_objectSpread({}, flat), {}, {
   border: 'none',

package/package.json

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