@pingux/astro 2.99.0 → 2.100.0-alpha.1

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -16,6 +16,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ELEMENT_TYPE = void 0;
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _deleteProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/reflect/delete-property"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -49,6 +50,7 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useBreadcrumbItem = (0, _reactAria.useBreadcrumbItem)(_objectSpread({}, props), itemRef),
     itemProps = _useBreadcrumbItem.itemProps;
   var BreadcrumbItemElementType = (0, _react.useMemo)(function () {
+    if (isCurrent) return _index.Text;
     switch (elementType) {
       case ELEMENT_TYPE.BUTTON:
         return _index.Button;
@@ -63,7 +65,7 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       default:
         return elementType;
     }
-  }, [elementType]);
+  }, [elementType, isCurrent]);
   var onPressHandler = (0, _react.useCallback)(function () {
     if (onAction) {
       onAction(actionKey);
@@ -77,13 +79,17 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
     if (isCurrent) {
       elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " is-current") : 'is-current';
+      (0, _deleteProperty["default"])(elementTypeProps, 'onPress');
+      (0, _deleteProperty["default"])(elementTypeProps, 'href');
     }
     return (0, _object.omit)(elementTypeProps, 'onClick', 'onKeyDown', 'onKeyUp');
-  }, [elementType, itemProps, others, onPressHandler]);
-  var elementVariantProps = elementType !== ELEMENT_TYPE.FRAGMENT && _objectSpread({
+  }, [elementType, itemProps, others, onPressHandler, isCurrent, elementsWithOnPressProp]);
+  var elementVariantProps = elementType !== ELEMENT_TYPE.FRAGMENT && _objectSpread(_objectSpread({
     variant: elementType === ELEMENT_TYPE.LINK ? 'variants.breadcrumb.link' : '',
     ref: itemRef
-  }, elementProps);
+  }, elementProps), {}, {
+    role: isCurrent ? 'text' : 'link'
+  });
   return (0, _react2.jsx)(_index.Box, {
     as: "li",
     className: isCurrent ? 'is-current' : '',

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

@@ -105,4 +105,11 @@ test('will render correctly with single child item', function () {
   }, testItemsArr[0])));
   expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
   expect(_testWrapper.screen.getByText(testItemsArr[0])).toBeInTheDocument();
+});
+test('will render the last item as a span when isCurrent is true', function () {
+  getComponent();
+  var lastItem = _testWrapper.screen.getByText(testItemsArr[testItemsArr.length - 1]);
+  expect(lastItem).toBeInstanceOf(HTMLSpanElement);
+  expect(lastItem).toHaveAttribute('aria-current', 'page');
+  expect(lastItem).toHaveAttribute('role', 'text');
 });

package/lib/cjs/components/Checkbox/Checkbox.styles.js

@@ -5,6 +5,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports.checkbox = void 0;
+var _colors = require("../../styles/colors");
 // Styles for default checkbox and variants go here.
 
 // Default checkbox
@@ -14,10 +15,7 @@ var checkbox = {
     bg: 'transparent'
   },
   'input ~ &.is-focused': {
-    boxShadow: 'none',
-    outline: '1px solid',
-    outlineColor: 'focus',
-    outlineOffset: '0px'
+    boxShadow: "inset 0px 0px 0px 1px ".concat(_colors.focus)
   },
   'input ~ &.is-disabled': {
     color: 'neutral.80'

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

@@ -4,9 +4,7 @@ export declare const checkbox: {
     color: string;
     mr: string;
     'input ~ &.is-focused': {
-        outline: string;
-        outlineColor: string;
-        outlineOffset: string;
+        boxShadow: string;
     };
 };
 export declare const select: {
@@ -122,9 +120,7 @@ declare const _default: {
         color: string;
         mr: string;
         'input ~ &.is-focused': {
-            outline: string;
-            outlineColor: string;
-            outlineOffset: string;
+            boxShadow: string;
         };
     };
     comboBox: {

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

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.select = exports.search = exports.radio = exports.numberField = exports["default"] = exports.comboBox = exports.checkbox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _colors = _interopRequireDefault(require("./colors/colors"));
 var _input = require("./variants/input");
 var _label = require("./variants/label");
 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; }
@@ -24,9 +25,7 @@ var checkbox = {
   color: 'text.secondary',
   mr: '8px',
   'input ~ &.is-focused': {
-    outline: '1px solid',
-    outlineColor: '#1a73e8',
-    outlineOffset: '-3px'
+    boxShadow: "inset 0px 0px 0px 1px ".concat(_colors["default"].focus)
   }
 };
 exports.checkbox = checkbox;

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

@@ -904,9 +904,7 @@ declare const _default: {
             color: string;
             mr: string;
             'input ~ &.is-focused': {
-                outline: string;
-                outlineColor: string;
-                outlineOffset: string;
+                boxShadow: string;
             };
         };
         comboBox: {

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -10,6 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "elementType", "onAction", "actionKey", "isCurrent"];
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Reflect$deleteProperty from "@babel/runtime-corejs3/core-js-stable/reflect/delete-property";
 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, Fragment, useCallback, useMemo } from 'react';
@@ -37,6 +38,7 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useBreadcrumbItem = useBreadcrumbItem(_objectSpread({}, props), itemRef),
     itemProps = _useBreadcrumbItem.itemProps;
   var BreadcrumbItemElementType = useMemo(function () {
+    if (isCurrent) return Text;
     switch (elementType) {
       case ELEMENT_TYPE.BUTTON:
         return Button;
@@ -51,7 +53,7 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
       default:
         return elementType;
     }
-  }, [elementType]);
+  }, [elementType, isCurrent]);
   var onPressHandler = useCallback(function () {
     if (onAction) {
       onAction(actionKey);
@@ -65,13 +67,17 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     if (isCurrent) {
       elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " is-current") : 'is-current';
+      _Reflect$deleteProperty(elementTypeProps, 'onPress');
+      _Reflect$deleteProperty(elementTypeProps, 'href');
     }
     return omit(elementTypeProps, 'onClick', 'onKeyDown', 'onKeyUp');
-  }, [elementType, itemProps, others, onPressHandler]);
-  var elementVariantProps = elementType !== ELEMENT_TYPE.FRAGMENT && _objectSpread({
+  }, [elementType, itemProps, others, onPressHandler, isCurrent, elementsWithOnPressProp]);
+  var elementVariantProps = elementType !== ELEMENT_TYPE.FRAGMENT && _objectSpread(_objectSpread({
     variant: elementType === ELEMENT_TYPE.LINK ? 'variants.breadcrumb.link' : '',
     ref: itemRef
-  }, elementProps);
+  }, elementProps), {}, {
+    role: isCurrent ? 'text' : 'link'
+  });
   return ___EmotionJSX(Box, {
     as: "li",
     className: isCurrent ? 'is-current' : '',

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -102,4 +102,11 @@ test('will render correctly with single child item', function () {
   }, testItemsArr[0])));
   expect(screen.getByTestId(testId)).toBeInTheDocument();
   expect(screen.getByText(testItemsArr[0])).toBeInTheDocument();
+});
+test('will render the last item as a span when isCurrent is true', function () {
+  getComponent();
+  var lastItem = screen.getByText(testItemsArr[testItemsArr.length - 1]);
+  expect(lastItem).toBeInstanceOf(HTMLSpanElement);
+  expect(lastItem).toHaveAttribute('aria-current', 'page');
+  expect(lastItem).toHaveAttribute('role', 'text');
 });

package/lib/components/Checkbox/Checkbox.styles.js

@@ -1,3 +1,5 @@
+import { focus } from '../../styles/colors';
+
 // Styles for default checkbox and variants go here.
 
 // Default checkbox
@@ -7,10 +9,7 @@ export var checkbox = {
     bg: 'transparent'
   },
   'input ~ &.is-focused': {
-    boxShadow: 'none',
-    outline: '1px solid',
-    outlineColor: 'focus',
-    outlineOffset: '0px'
+    boxShadow: "inset 0px 0px 0px 1px ".concat(focus)
   },
   'input ~ &.is-disabled': {
     color: 'neutral.80'

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 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 colors from './colors/colors';
 import { fieldControlWrapper, input } from './variants/input';
 import { label } from './variants/label';
 export var checkbox = {
@@ -17,9 +18,7 @@ export var checkbox = {
   color: 'text.secondary',
   mr: '8px',
   'input ~ &.is-focused': {
-    outline: '1px solid',
-    outlineColor: '#1a73e8',
-    outlineOffset: '-3px'
+    boxShadow: "inset 0px 0px 0px 1px ".concat(colors.focus)
   }
 };
 export var select = {

package/package.json

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