@pingux/astro 2.88.0-alpha.1 → 2.88.0-alpha.3

package/lib/cjs/components/CheckboxField/CheckboxField.js

@@ -79,12 +79,12 @@ var CheckboxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, []);
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
+    variant: "forms.label.checkbox"
+  }, fieldLabelProps), (0, _react2.jsx)(_.Checkbox, (0, _extends2["default"])({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), (0, _react2.jsx)(_.Label, (0, _extends2["default"])({
-    variant: "forms.label.checkbox"
-  }, fieldLabelProps), label)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, fieldControlInputProps)), label)), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     sx: {
       pt: 7

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

@@ -76,8 +76,9 @@ label.checkbox = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   width: 'max-content',
   alignItems: 'center',
   cursor: 'pointer',
-  '& .is-disabled': {
-    opacity: '1'
+  '&.is-disabled': {
+    opacity: '1',
+    color: 'rgba(37, 55, 70, 0.5)'
   }
 });
 label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {

package/lib/cjs/components/Menu/Menu.js

@@ -76,9 +76,7 @@ var Menu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": _orientation["default"].VERTICAL
-  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps, hoverProps), {
-    role: "menu"
-  }), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (element) {
+  }, others, (0, _reactAria.mergeProps)(focusProps, menuProps, hoverProps)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (element) {
     if (element.type === 'section') {
       return (0, _react2.jsx)(_MenuSection["default"], {
         key: element.key,

package/lib/cjs/components/MenuItem/MenuItem.js

@@ -98,9 +98,7 @@ var MenuItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
     "data-id": dataId,
     "aria-disabled": isDisabled
-  }, (0, _reactAria.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others), {
-    role: menuItemProps.role
-  }), rendered);
+  }, (0, _reactAria.mergeProps)(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
 });
 MenuItem.displayName = 'MenuItem';
 MenuItem.defaultProps = {

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

@@ -105,8 +105,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
-    "aria-modal": true,
-    role: "dialog"
+    "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",

package/lib/cjs/components/ProgressBar/ProgressBar.js

@@ -10,13 +10,11 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.calculateBarWidth = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _progress = require("@react-aria/progress");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["role"];
 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; }
 // Calculate the width of the progress bar as a percentage
@@ -46,8 +44,6 @@ var ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useProgressBar = (0, _progress.useProgressBar)(props),
     progressBarProps = _useProgressBar.progressBarProps,
     labelProps = _useProgressBar.labelProps;
-  var role = labelProps.role,
-    restLabelProps = (0, _objectWithoutProperties2["default"])(labelProps, _excluded);
   var barWidth = calculateBarWidth(value, minValue, maxValue);
   var ariaLabel = props['aria-label'];
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, progressBarProps, {
@@ -62,7 +58,7 @@ var ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, label && (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     fontSize: "xs",
     fontWeight: "3"
-  }, restLabelProps), label), showValueLabel && (0, _react2.jsx)(_.Text, {
+  }, labelProps), label), showValueLabel && (0, _react2.jsx)(_.Text, {
     fontSize: "xs",
     fontWeight: "3"
   }, progressBarProps['aria-valuetext'])), (0, _react2.jsx)(_.Box, {

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

@@ -6,7 +6,6 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
@@ -41,9 +40,7 @@ var RangeCalendarGrid = function RangeCalendarGrid(props) {
     var _context;
     return (0, _concat["default"])(_context = "".concat(day, "-")).call(_context, index);
   };
-  return (0, _react2.jsx)(_index.Table, (0, _extends2["default"])({}, gridProps, {
-    role: "grid"
-  }), (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(weekDays).call(weekDays, function (day, index) {
+  return (0, _react2.jsx)(_index.Table, gridProps, (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(weekDays).call(weekDays, function (day, index) {
     return (0, _react2.jsx)(_index.TableCell, {
       isHeading: true,
       variant: "rangeCalendar.columnHeader",

package/lib/cjs/components/Separator/Separator.js

@@ -35,9 +35,7 @@ var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref,
     className: classNames,
     variant: "separator.base"
-  }, others, separatorProps, {
-    role: "separator"
-  }));
+  }, others, separatorProps));
 });
 Separator.defaultProps = {
   orientation: 'horizontal'

package/lib/cjs/components/Tab/Tab.js

@@ -72,7 +72,6 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: tabRef
   }, itemProps, {
     title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
-    role: "tab",
     "data-testid": "test-me"
   }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "tabLabel"

package/lib/cjs/components/Tabs/Tabs.js

@@ -54,8 +54,7 @@ var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     raTabPanelProps['aria-labelledby'] = parentTab === null || parentTab === void 0 ? void 0 : parentTab.id;
   }
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, tabPanelProps, raTabPanelProps, {
-    ref: tabPanelRef,
-    role: "tabpanel"
+    ref: tabPanelRef
   }), children);
 });
 var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -98,8 +97,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "tabs",
     isRow: orientation === _orientation["default"].HORIZONTAL
   }, tabListProps, raTabListProps, {
-    ref: tabListRef,
-    role: "tablist"
+    ref: tabListRef
   }), (0, _map["default"])(_context4 = (0, _filter["default"])(_context5 = (0, _from["default"])(state.collection)).call(_context5, function (item) {
     var _item$props;
     return !(item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.isListItem);

package/lib/cjs/components/TimeField/TimeSegment.js

@@ -27,7 +27,6 @@ var TimeSegment = function TimeSegment(props) {
   var ref = (0, _react.useRef)(null);
   var _useDateSegment = (0, _datepicker.useDateSegment)(segment, state, ref),
     segmentProps = _useDateSegment.segmentProps;
-  delete segmentProps.role;
   var focusManager = (0, _reactAria.useFocusManager)();
   var handleKeyEvents = (0, _react.useCallback)(function (e) {
     var getSegmentValue = function getSegmentValue(seg) {
@@ -56,8 +55,7 @@ var TimeSegment = function TimeSegment(props) {
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, segmentProps, {
     ref: ref,
     variant: "forms.timeField.segment",
-    onKeyUp: handleKeyEvents,
-    role: "spinbutton"
+    onKeyUp: handleKeyEvents
   }), text);
 };
 var _default = TimeSegment;

package/lib/cjs/hooks/useField/useField.d.ts

@@ -859,7 +859,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         borderRadius?: import("theme-ui").StylePropertyValue<import("csstype").Property.BorderRadius<string | number> | undefined>;
         zIndex?: import("theme-ui").StylePropertyValue<string | (string & {}) | (number & {}) | undefined>;
         sx?: import("theme-ui").ThemeUIStyleObject | undefined;
-        role?: AriaRole | undefined;
+        role?: React.AriaRole | undefined;
         className: string;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "false" | "true") | undefined;

package/lib/cjs/types/shared/dom.d.ts

@@ -1,5 +1,5 @@
-import React, { AriaAttributes, DOMAttributes as ReactDOMAttributes, FocusEvent } from 'react';
-export type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem' | (string & Record<string, unknown>);
+import React, { AriaAttributes, AriaRole as ReactAriaRole, DOMAttributes as ReactDOMAttributes, FocusEvent } from 'react';
+export type AriaRole = ReactAriaRole;
 export interface FocusableElement extends Element, HTMLOrSVGElement {
 }
 export type FocusEventHandler = (e: FocusEvent<Element>) => void;

package/lib/components/CheckboxField/CheckboxField.js

@@ -68,12 +68,12 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, []);
   return ___EmotionJSX(Box, _extends({}, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Box, {
     isRow: true
-  }, ___EmotionJSX(Checkbox, _extends({
+  }, ___EmotionJSX(Label, _extends({
+    variant: "forms.label.checkbox"
+  }, fieldLabelProps), ___EmotionJSX(Checkbox, _extends({
     ref: checkboxRef,
     "aria-describedby": helperText && helperTextId
-  }, fieldControlInputProps)), ___EmotionJSX(Label, _extends({
-    variant: "forms.label.checkbox"
-  }, fieldLabelProps), label)), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlInputProps)), label)), helperText && ___EmotionJSX(FieldHelperText, {
     status: status,
     sx: {
       pt: 7

package/lib/components/Label/Label.styles.js

@@ -71,8 +71,9 @@ label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
   width: 'max-content',
   alignItems: 'center',
   cursor: 'pointer',
-  '& .is-disabled': {
-    opacity: '1'
+  '&.is-disabled': {
+    opacity: '1',
+    color: 'rgba(37, 55, 70, 0.5)'
   }
 });
 label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {

package/lib/components/Menu/Menu.js

@@ -65,9 +65,7 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: menuRef,
     variant: "menu",
     "aria-orientation": ORIENTATION.VERTICAL
-  }, others, mergeProps(focusProps, menuProps, hoverProps), {
-    role: "menu"
-  }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (element) {
+  }, others, mergeProps(focusProps, menuProps, hoverProps)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (element) {
     if (element.type === 'section') {
       return ___EmotionJSX(MenuSection, {
         key: element.key,

package/lib/components/MenuItem/MenuItem.js

@@ -86,9 +86,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: isSeparator ? 'menuItem.separator' : 'menuItem.item',
     "data-id": dataId,
     "aria-disabled": isDisabled
-  }, mergeProps(pressProps, hoverProps, focusProps, menuItemProps, others), {
-    role: menuItemProps.role
-  }), rendered);
+  }, mergeProps(pressProps, hoverProps, focusProps, menuItemProps, others)), rendered);
 });
 MenuItem.displayName = 'MenuItem';
 MenuItem.defaultProps = {

package/lib/components/Modal/Modal.js

@@ -94,8 +94,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames
   }, propsContentProps, dialogProps, modalProps, {
     ref: modalRef,
-    "aria-modal": true,
-    role: "dialog"
+    "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",

package/lib/components/ProgressBar/ProgressBar.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["role"];
 import React, { forwardRef } from 'react';
 import { useProgressBar } from '@react-aria/progress';
 import { Box, Text } from '../..';
@@ -32,8 +30,6 @@ var ProgressBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useProgressBar = useProgressBar(props),
     progressBarProps = _useProgressBar.progressBarProps,
     labelProps = _useProgressBar.labelProps;
-  var role = labelProps.role,
-    restLabelProps = _objectWithoutProperties(labelProps, _excluded);
   var barWidth = calculateBarWidth(value, minValue, maxValue);
   var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({}, progressBarProps, {
@@ -48,7 +44,7 @@ var ProgressBar = /*#__PURE__*/forwardRef(function (props, ref) {
   }, label && ___EmotionJSX(Text, _extends({
     fontSize: "xs",
     fontWeight: "3"
-  }, restLabelProps), label), showValueLabel && ___EmotionJSX(Text, {
+  }, labelProps), label), showValueLabel && ___EmotionJSX(Text, {
     fontSize: "xs",
     fontWeight: "3"
   }, progressBarProps['aria-valuetext'])), ___EmotionJSX(Box, {

package/lib/components/RangeCalendar/RangeCalendarGrid.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -33,9 +32,7 @@ var RangeCalendarGrid = function RangeCalendarGrid(props) {
     var _context;
     return _concatInstanceProperty(_context = "".concat(day, "-")).call(_context, index);
   };
-  return ___EmotionJSX(Table, _extends({}, gridProps, {
-    role: "grid"
-  }), ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(weekDays).call(weekDays, function (day, index) {
+  return ___EmotionJSX(Table, gridProps, ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(weekDays).call(weekDays, function (day, index) {
     return ___EmotionJSX(TableCell, {
       isHeading: true,
       variant: "rangeCalendar.columnHeader",

package/lib/components/Separator/Separator.js

@@ -22,9 +22,7 @@ var Separator = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     className: classNames,
     variant: "separator.base"
-  }, others, separatorProps, {
-    role: "separator"
-  }));
+  }, others, separatorProps));
 });
 Separator.defaultProps = {
   orientation: 'horizontal'

package/lib/components/Tab/Tab.js

@@ -59,7 +59,6 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: tabRef
   }, itemProps, {
     title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
-    role: "tab",
     "data-testid": "test-me"
   }), ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, ___EmotionJSX(Text, _extends({
     variant: "tabLabel"

package/lib/components/Tabs/Tabs.js

@@ -40,8 +40,7 @@ var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     raTabPanelProps['aria-labelledby'] = parentTab === null || parentTab === void 0 ? void 0 : parentTab.id;
   }
   return ___EmotionJSX(Box, _extends({}, tabPanelProps, raTabPanelProps, {
-    ref: tabPanelRef,
-    role: "tabpanel"
+    ref: tabPanelRef
   }), children);
 });
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -84,8 +83,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "tabs",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, tabListProps, raTabListProps, {
-    ref: tabListRef,
-    role: "tablist"
+    ref: tabListRef
   }), _mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = _Array$from(state.collection)).call(_context5, function (item) {
     var _item$props;
     return !(item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.isListItem);

package/lib/components/TimeField/TimeSegment.js

@@ -14,7 +14,6 @@ var TimeSegment = function TimeSegment(props) {
   var ref = useRef(null);
   var _useDateSegment = useDateSegment(segment, state, ref),
     segmentProps = _useDateSegment.segmentProps;
-  delete segmentProps.role;
   var focusManager = useFocusManager();
   var handleKeyEvents = useCallback(function (e) {
     var getSegmentValue = function getSegmentValue(seg) {
@@ -43,8 +42,7 @@ var TimeSegment = function TimeSegment(props) {
   return ___EmotionJSX(Box, _extends({}, segmentProps, {
     ref: ref,
     variant: "forms.timeField.segment",
-    onKeyUp: handleKeyEvents,
-    role: "spinbutton"
+    onKeyUp: handleKeyEvents
   }), text);
 };
 export default TimeSegment;

package/package.json

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