@pingux/astro 1.23.0-alpha.1 → 1.23.0-alpha.4

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -172,7 +172,7 @@ var ArrayField = function ArrayField(props) {
     }
   }, [isControlled]);
   var onFieldAdd = (0, _react.useCallback)(function () {
-    if (onAddRef.current) {
+    if (isControlled) {
       return onAddRef.current();
     }
 
@@ -181,7 +181,7 @@ var ArrayField = function ArrayField(props) {
 
       return (0, _concat["default"])(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
-  }, [createEmptyField]);
+  }, [createEmptyField, isControlled]);
 
   var _useLabel = (0, _label.useLabel)(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;

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

@@ -79,7 +79,11 @@ test('adds one text field and new empty field is added', function () {
 });
 test('onAdd callback is fired when adding field', function () {
   var onAdd = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
   getComponent({
+    value: value,
+    defaultValue: defaultValue,
     onAdd: onAdd,
     renderField: renderField
   });

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

@@ -102,7 +102,6 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: breadcrumbsRef,
     isRow: true,
     sx: {
-      overflow: 'auto',
       paddingInlineStart: 'unset'
     },
     as: "ol"

package/lib/cjs/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -54,7 +54,8 @@ var CollapsiblePanelItem = /*#__PURE__*/(0, _react.forwardRef)(function (props,
         fill: 'inherit'
       }
     },
-    onPress: onPress
+    onPress: onPress,
+    "aria-label": "icon"
   }, iconElement)));
 });
 CollapsiblePanelItem.propTypes = {

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

@@ -105,6 +105,12 @@ function useListLayout(state) {
  * ListViews are used to display a list of items. Users can select,
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
+ *
+ * NOTE: be careful with putting focusable elements inside ListView.
+ * It is using a grid (useList hook) with its own event listeners under the hood.
+ * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)
+ * If you decided to add a focusable element inside ListView,
+ * you should stop bubbling of a pointerDown event and put a focus on the element.
 */
 
 

package/lib/cjs/components/PopoverContainer/PopoverContainer.js

@@ -48,8 +48,9 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "placement", "arrowProps", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable"],
-    _excluded2 = ["children", "className", "placement", "arrowProps", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable"];
+var _excluded = ["children", "placement", "arrowProps", "arrowCrossOffset", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction"],
+    _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
+    _excluded3 = ["arrowCrossOffset", "sx", "direction"];
 
 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); }
 
@@ -66,12 +67,15 @@ var PopoverContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var children = props.children,
       placement = props.placement,
       arrowProps = props.arrowProps,
+      arrowCrossOffset = props.arrowCrossOffset,
       onClose = props.onClose,
       isNotClosedOnBlur = props.isNotClosedOnBlur,
       hasNoArrow = props.hasNoArrow,
       isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
       isNonModal = props.isNonModal,
       isDismissable = props.isDismissable,
+      width = props.width,
+      direction = props.direction,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_overlays.OverlayContainer, null, (0, _react2.jsx)(PopoverWrapper, (0, _extends2["default"])({
     ref: ref,
@@ -82,7 +86,10 @@ var PopoverContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     isKeyboardDismissDisabled: isKeyboardDismissDisabled,
     hasNoArrow: hasNoArrow,
     isNonModal: isNonModal,
-    isDismissable: isDismissable
+    isDismissable: isDismissable,
+    arrowCrossOffset: arrowCrossOffset,
+    width: width,
+    direction: direction
   }, others), children));
 });
 PopoverContainer.propTypes = {
@@ -93,19 +100,26 @@ PopoverContainer.propTypes = {
   hasNoArrow: _propTypes["default"].bool,
   isKeyboardDismissDisabled: _propTypes["default"].bool,
   isNonModal: _propTypes["default"].bool,
-  isDismissable: _propTypes["default"].bool
+  isDismissable: _propTypes["default"].bool,
+  width: _propTypes["default"].string,
+  arrowCrossOffset: _propTypes["default"].string,
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
 };
 var PopoverWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
       className = props.className,
       placement = props.placement,
       arrowProps = props.arrowProps,
+      arrowCrossOffset = props.arrowCrossOffset,
       isOpen = props.isOpen,
       hasNoArrow = props.hasNoArrow,
       isNotClosedOnBlur = props.isNotClosedOnBlur,
       isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
       isNonModal = props.isNonModal,
       isDismissable = props.isDismissable,
+      width = props.width,
+      direction = props.direction,
+      sx = props.sx,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   var popoverRef = (0, _react.useRef)();
   /* istanbul ignore next */
@@ -135,8 +149,14 @@ var PopoverWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     role: "presentation",
     "data-popover-placement": placement,
-    "data-testid": "popover-container"
-  }), children, hasNoArrow ? null : (0, _react2.jsx)(PopoverArrow, arrowProps)));
+    "data-testid": "popover-container",
+    sx: _objectSpread(_objectSpread({}, sx), {}, {
+      width: width
+    })
+  }), children, hasNoArrow ? null : (0, _react2.jsx)(PopoverArrow, (0, _extends2["default"])({}, arrowProps, {
+    arrowCrossOffset: arrowCrossOffset,
+    direction: direction
+  }))));
 });
 exports.PopoverWrapper = PopoverWrapper;
 PopoverWrapper.propTypes = {
@@ -147,21 +167,61 @@ PopoverWrapper.propTypes = {
   isNotClosedOnBlur: _propTypes["default"].bool,
   isKeyboardDismissDisabled: _propTypes["default"].bool,
   isNonModal: _propTypes["default"].bool,
-  isDismissable: _propTypes["default"].bool
+  isDismissable: _propTypes["default"].bool,
+  width: _propTypes["default"].string,
+  arrowCrossOffset: _propTypes["default"].string,
+  sx: _propTypes["default"].shape({}),
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
 };
 PopoverWrapper.defaultProps = {
   placement: 'bottom'
 };
 
 var PopoverArrow = function PopoverArrow(props) {
-  var others = (0, _extends2["default"])({}, props);
+  var arrowCrossOffset = props.arrowCrossOffset,
+      sx = props.sx,
+      direction = props.direction,
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+  /* istanbul ignore next */
+
+  var calculateOffset = function calculateOffset() {
+    switch (true) {
+      case direction === 'top':
+      case direction === 'bottom':
+        return {
+          '&:before': {
+            left: "calc(50% - ".concat(arrowCrossOffset, ") !important")
+          }
+        };
+
+      case direction === 'left':
+      case direction === 'right':
+        return {
+          '&:before': {
+            top: "calc(50% - ".concat(arrowCrossOffset, ") !important")
+          }
+        };
+
+      default:
+        return {};
+    }
+  };
+
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "popoverMenu.arrow",
     "data-popover-arrow": "arrow",
     "data-testid": "popover-arrow"
-  }, others));
+  }, others, {
+    sx: _objectSpread(_objectSpread({}, arrowCrossOffset && calculateOffset()), sx)
+  }));
 };
 
 exports.PopoverArrow = PopoverArrow;
+PopoverArrow.propTypes = {
+  width: _propTypes["default"].string,
+  arrowCrossOffset: _propTypes["default"].string,
+  sx: _propTypes["default"].shape({}),
+  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left'])
+};
 var _default = PopoverContainer;
 exports["default"] = _default;

package/lib/cjs/components/SwitchField/SwitchField.js

@@ -48,6 +48,8 @@ var _toggle = require("@react-stately/toggle");
 
 var _switch = require("@react-aria/switch");
 
+var _interactions = require("@react-aria/interactions");
+
 var _hooks = require("../../hooks");
 
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
@@ -113,6 +115,12 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _toggle.useToggleState)(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
+
+  var _usePress = (0, _interactions.usePress)({
+    isDisabled: isDisabled
+  }),
+      containerPressProps = _usePress.pressProps;
+
   var whitelistedProps = (0, _omit["default"])(props, (0, _keys["default"])(others));
 
   var _useSwitch = (0, _switch.useSwitch)(_objectSpread({
@@ -124,9 +132,9 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isSelected: inputProps.checked
   };
 
-  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread({
+  var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
     statusClasses: statusClasses
-  }, props), {}, {
+  }, containerPressProps), props), {}, {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -57,7 +57,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context, _useStatusClasses2;
 
-  var children = props.children,
+  var arrowCrossOffset = props.arrowCrossOffset,
+      children = props.children,
       crossOffset = props.crossOffset,
       isDisabled = props.isDisabled,
       align = props.align,
@@ -68,7 +69,8 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
       hasNoArrow = props.hasNoArrow,
-      targetRef = props.targetRef;
+      targetRef = props.targetRef,
+      width = props.width;
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
       _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
@@ -116,7 +118,10 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     placement: placement,
     arrowProps: arrowProps,
     className: classNames,
-    hasNoArrow: hasNoArrow
+    hasNoArrow: hasNoArrow,
+    arrowCrossOffset: arrowCrossOffset,
+    width: width,
+    direction: direction
   }, positionProps, tooltipProps), tooltip);
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_interactions.PressResponder, (0, _extends2["default"])({}, triggerProps, {
     ref: tooltipTriggerRef
@@ -166,12 +171,19 @@ TooltipTrigger.propTypes = {
   /** Tooltip offset relative to its trigger. */
   offset: _propTypes["default"].number,
 
+  /** Arrow offset relative to the left of the tooltip.
+   * Must be passed as a px or percentage. */
+  arrowCrossOffset: _propTypes["default"].string,
+
   /** The placement of the element with respect to its anchor element. */
   placement: _propTypes["default"].string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
   trigger: _propTypes["default"].string,
 
+  /** Width applied to the wrapper of the tooltip component. */
+  width: _propTypes["default"].string,
+
   /* The ref for the element which the overlay positions itself with respect to. */
   targetRef: _propTypes["default"].shape({})
 };

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.withDirectionProp = exports.withDelayProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.ChipWithTooltip = void 0;
+exports.withWidthProp = exports.withDirectionProp = exports.withDelayProp = exports.withArrowCrossOffsetProp = exports.withAlignProp = exports.isOpen = exports["default"] = exports.TextWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.Default = exports.ChipWithTooltip = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -60,6 +60,23 @@ var withDelayProp = function withDelayProp() {
 
 exports.withDelayProp = withDelayProp;
 
+var withWidthProp = function withWidthProp() {
+  return (0, _react2.jsx)(_index.TooltipTrigger, {
+    width: "200px"
+  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Custom width display"));
+};
+
+exports.withWidthProp = withWidthProp;
+
+var withArrowCrossOffsetProp = function withArrowCrossOffsetProp() {
+  return (0, _react2.jsx)(_index.TooltipTrigger, {
+    arrowCrossOffset: "30px",
+    isOpen: true
+  }, (0, _react2.jsx)(_index.Button, null, "Hover Over Me!"), (0, _react2.jsx)(_index.Tooltip, null, "Display with a delay"));
+};
+
+exports.withArrowCrossOffsetProp = withArrowCrossOffsetProp;
+
 var isOpen = function isOpen() {
   return (0, _react2.jsx)(_index.TooltipTrigger, {
     isOpen: true

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

@@ -106,4 +106,14 @@ test('trigger press events work when a tooltip is disabled', function () {
   _userEvent["default"].click(button);
 
   expect(onPress).toHaveBeenCalledTimes(1);
+});
+test('passing in width applies the correct width to the container', function () {
+  getComponent({
+    isOpen: true,
+    width: '100px'
+  });
+
+  var arrow = _testWrapper.screen.getByTestId('popover-container');
+
+  expect(arrow).toHaveStyle('width: 100px');
 });

package/lib/cjs/recipes/CollapsiblePanel.stories.js

@@ -150,6 +150,8 @@ var Default = function Default() {
       searchValue = _useState4[0],
       setSearchValue = _useState4[1];
 
+  var checkBoxRef = (0, _react.useRef)(null);
+
   var _useFilter = (0, _i18n.useFilter)({
     sensitivity: 'base'
   }),
@@ -325,7 +327,11 @@ var Default = function Default() {
       },
       isSelected: (0, _some["default"])(selectedItems).call(selectedItems, function (el) {
         return el.key === item.key;
-      })
+      }),
+      ref: checkBoxRef,
+      onClick: function onClick() {
+        return checkBoxRef.current.focus();
+      }
     }));
   })), (0, _react2.jsx)(_.CollapsiblePanel, {
     items: selectedItems,

package/lib/cjs/styles/forms/switch.js

@@ -54,11 +54,11 @@ var thumbContainer = {
   border: '1px solid',
   borderColor: 'neutral.80',
   borderRadius: 9999,
-  '.is-selected &': {
+  'label.is-selected &': {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
+  'label.is-focused &, &:focus': _objectSpread({}, _buttons.defaultFocus)
 };
 exports.thumbContainer = thumbContainer;
 var thumb = {
@@ -73,7 +73,7 @@ var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  '.is-selected &': {
+  'label.is-selected &': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/lib/components/ArrayField/ArrayField.js

@@ -118,7 +118,7 @@ var ArrayField = function ArrayField(props) {
     }
   }, [isControlled]);
   var onFieldAdd = useCallback(function () {
-    if (onAddRef.current) {
+    if (isControlled) {
       return onAddRef.current();
     }
 
@@ -127,7 +127,7 @@ var ArrayField = function ArrayField(props) {
 
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
-  }, [createEmptyField]);
+  }, [createEmptyField, isControlled]);
 
   var _useLabel = useLabel(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;

package/lib/components/ArrayField/ArrayField.test.js

@@ -66,7 +66,11 @@ test('adds one text field and new empty field is added', function () {
 });
 test('onAdd callback is fired when adding field', function () {
   var onAdd = jest.fn();
+  var value = defaultData;
+  var defaultValue = null;
   getComponent({
+    value: value,
+    defaultValue: defaultValue,
     onAdd: onAdd,
     renderField: renderField
   });

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -68,7 +68,6 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: breadcrumbsRef,
     isRow: true,
     sx: {
-      overflow: 'auto',
       paddingInlineStart: 'unset'
     },
     as: "ol"

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -30,7 +30,8 @@ var CollapsiblePanelItem = /*#__PURE__*/forwardRef(function (props, ref) {
         fill: 'inherit'
       }
     },
-    onPress: onPress
+    onPress: onPress,
+    "aria-label": "icon"
   }, iconElement)));
 });
 CollapsiblePanelItem.propTypes = {

package/lib/components/ListView/ListView.js

@@ -59,6 +59,12 @@ export function useListLayout(state) {
  * ListViews are used to display a list of items. Users can select,
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
+ *
+ * NOTE: be careful with putting focusable elements inside ListView.
+ * It is using a grid (useList hook) with its own event listeners under the hood.
+ * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)
+ * If you decided to add a focusable element inside ListView,
+ * you should stop bubbling of a pointerDown event and put a focus on the element.
 */
 
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {

package/lib/components/PopoverContainer/PopoverContainer.js

@@ -9,8 +9,9 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "placement", "arrowProps", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable"],
-    _excluded2 = ["children", "className", "placement", "arrowProps", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable"];
+var _excluded = ["children", "placement", "arrowProps", "arrowCrossOffset", "onClose", "isNotClosedOnBlur", "hasNoArrow", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction"],
+    _excluded2 = ["children", "className", "placement", "arrowProps", "arrowCrossOffset", "isOpen", "hasNoArrow", "isNotClosedOnBlur", "isKeyboardDismissDisabled", "isNonModal", "isDismissable", "width", "direction", "sx"],
+    _excluded3 = ["arrowCrossOffset", "sx", "direction"];
 
 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; }
 
@@ -31,12 +32,15 @@ var PopoverContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       placement = props.placement,
       arrowProps = props.arrowProps,
+      arrowCrossOffset = props.arrowCrossOffset,
       onClose = props.onClose,
       isNotClosedOnBlur = props.isNotClosedOnBlur,
       hasNoArrow = props.hasNoArrow,
       isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
       isNonModal = props.isNonModal,
       isDismissable = props.isDismissable,
+      width = props.width,
+      direction = props.direction,
       others = _objectWithoutProperties(props, _excluded);
 
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(PopoverWrapper, _extends({
@@ -48,7 +52,10 @@ var PopoverContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     isKeyboardDismissDisabled: isKeyboardDismissDisabled,
     hasNoArrow: hasNoArrow,
     isNonModal: isNonModal,
-    isDismissable: isDismissable
+    isDismissable: isDismissable,
+    arrowCrossOffset: arrowCrossOffset,
+    width: width,
+    direction: direction
   }, others), children));
 });
 PopoverContainer.propTypes = {
@@ -59,19 +66,26 @@ PopoverContainer.propTypes = {
   hasNoArrow: PropTypes.bool,
   isKeyboardDismissDisabled: PropTypes.bool,
   isNonModal: PropTypes.bool,
-  isDismissable: PropTypes.bool
+  isDismissable: PropTypes.bool,
+  width: PropTypes.string,
+  arrowCrossOffset: PropTypes.string,
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       className = props.className,
       placement = props.placement,
       arrowProps = props.arrowProps,
+      arrowCrossOffset = props.arrowCrossOffset,
       isOpen = props.isOpen,
       hasNoArrow = props.hasNoArrow,
       isNotClosedOnBlur = props.isNotClosedOnBlur,
       isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
       isNonModal = props.isNonModal,
       isDismissable = props.isDismissable,
+      width = props.width,
+      direction = props.direction,
+      sx = props.sx,
       others = _objectWithoutProperties(props, _excluded2);
 
   var popoverRef = useRef();
@@ -102,8 +116,14 @@ export var PopoverWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     role: "presentation",
     "data-popover-placement": placement,
-    "data-testid": "popover-container"
-  }), children, hasNoArrow ? null : ___EmotionJSX(PopoverArrow, arrowProps)));
+    "data-testid": "popover-container",
+    sx: _objectSpread(_objectSpread({}, sx), {}, {
+      width: width
+    })
+  }), children, hasNoArrow ? null : ___EmotionJSX(PopoverArrow, _extends({}, arrowProps, {
+    arrowCrossOffset: arrowCrossOffset,
+    direction: direction
+  }))));
 });
 PopoverWrapper.propTypes = {
   placement: PropTypes.string,
@@ -113,18 +133,58 @@ PopoverWrapper.propTypes = {
   isNotClosedOnBlur: PropTypes.bool,
   isKeyboardDismissDisabled: PropTypes.bool,
   isNonModal: PropTypes.bool,
-  isDismissable: PropTypes.bool
+  isDismissable: PropTypes.bool,
+  width: PropTypes.string,
+  arrowCrossOffset: PropTypes.string,
+  sx: PropTypes.shape({}),
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 PopoverWrapper.defaultProps = {
   placement: 'bottom'
 };
 export var PopoverArrow = function PopoverArrow(props) {
-  var others = _extends({}, props);
+  var arrowCrossOffset = props.arrowCrossOffset,
+      sx = props.sx,
+      direction = props.direction,
+      others = _objectWithoutProperties(props, _excluded3);
+  /* istanbul ignore next */
+
+
+  var calculateOffset = function calculateOffset() {
+    switch (true) {
+      case direction === 'top':
+      case direction === 'bottom':
+        return {
+          '&:before': {
+            left: "calc(50% - ".concat(arrowCrossOffset, ") !important")
+          }
+        };
+
+      case direction === 'left':
+      case direction === 'right':
+        return {
+          '&:before': {
+            top: "calc(50% - ".concat(arrowCrossOffset, ") !important")
+          }
+        };
+
+      default:
+        return {};
+    }
+  };
 
   return ___EmotionJSX(Box, _extends({
     variant: "popoverMenu.arrow",
     "data-popover-arrow": "arrow",
     "data-testid": "popover-arrow"
-  }, others));
+  }, others, {
+    sx: _objectSpread(_objectSpread({}, arrowCrossOffset && calculateOffset()), sx)
+  }));
+};
+PopoverArrow.propTypes = {
+  width: PropTypes.string,
+  arrowCrossOffset: PropTypes.string,
+  sx: PropTypes.shape({}),
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
 };
 export default PopoverContainer;

package/lib/components/SwitchField/SwitchField.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import { useToggleState } from '@react-stately/toggle';
 import { useSwitch } from '@react-aria/switch';
+import { usePress } from '@react-aria/interactions';
 import { useField, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Box from '../Box';
@@ -71,6 +72,12 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var state = useToggleState(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
+
+  var _usePress = usePress({
+    isDisabled: isDisabled
+  }),
+      containerPressProps = _usePress.pressProps;
+
   var whitelistedProps = omit(props, _Object$keys(others));
 
   var _useSwitch = useSwitch(_objectSpread({
@@ -82,9 +89,9 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
     isSelected: inputProps.checked
   };
 
-  var _useField = useField(_objectSpread(_objectSpread({
+  var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
     statusClasses: statusClasses
-  }, props), {}, {
+  }, containerPressProps), props), {}, {
     controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps)
   })),
       fieldContainerProps = _useField.fieldContainerProps,

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -22,7 +22,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context, _useStatusClasses2;
 
-  var children = props.children,
+  var arrowCrossOffset = props.arrowCrossOffset,
+      children = props.children,
       crossOffset = props.crossOffset,
       isDisabled = props.isDisabled,
       align = props.align,
@@ -33,7 +34,8 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
       hasNoArrow = props.hasNoArrow,
-      targetRef = props.targetRef;
+      targetRef = props.targetRef,
+      width = props.width;
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
@@ -81,7 +83,10 @@ var TooltipTrigger = /*#__PURE__*/forwardRef(function (props, ref) {
     placement: placement,
     arrowProps: arrowProps,
     className: classNames,
-    hasNoArrow: hasNoArrow
+    hasNoArrow: hasNoArrow,
+    arrowCrossOffset: arrowCrossOffset,
+    width: width,
+    direction: direction
   }, positionProps, tooltipProps), tooltip);
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(PressResponder, _extends({}, triggerProps, {
@@ -132,12 +137,19 @@ TooltipTrigger.propTypes = {
   /** Tooltip offset relative to its trigger. */
   offset: PropTypes.number,
 
+  /** Arrow offset relative to the left of the tooltip.
+   * Must be passed as a px or percentage. */
+  arrowCrossOffset: PropTypes.string,
+
   /** The placement of the element with respect to its anchor element. */
   placement: PropTypes.string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
   trigger: PropTypes.string,
 
+  /** Width applied to the wrapper of the tooltip component. */
+  width: PropTypes.string,
+
   /* The ref for the element which the overlay positions itself with respect to. */
   targetRef: PropTypes.shape({})
 };

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -27,6 +27,17 @@ export var withDelayProp = function withDelayProp() {
     delay: 700
   }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display with a delay"));
 };
+export var withWidthProp = function withWidthProp() {
+  return ___EmotionJSX(TooltipTrigger, {
+    width: "200px"
+  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Custom width display"));
+};
+export var withArrowCrossOffsetProp = function withArrowCrossOffsetProp() {
+  return ___EmotionJSX(TooltipTrigger, {
+    arrowCrossOffset: "30px",
+    isOpen: true
+  }, ___EmotionJSX(Button, null, "Hover Over Me!"), ___EmotionJSX(Tooltip, null, "Display with a delay"));
+};
 export var isOpen = function isOpen() {
   return ___EmotionJSX(TooltipTrigger, {
     isOpen: true

package/lib/components/TooltipTrigger/TooltipTrigger.test.js

@@ -71,4 +71,12 @@ test('trigger press events work when a tooltip is disabled', function () {
   expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
   userEvent.click(button);
   expect(onPress).toHaveBeenCalledTimes(1);
+});
+test('passing in width applies the correct width to the container', function () {
+  getComponent({
+    isOpen: true,
+    width: '100px'
+  });
+  var arrow = screen.getByTestId('popover-container');
+  expect(arrow).toHaveStyle('width: 100px');
 });

package/lib/recipes/CollapsiblePanel.stories.js

@@ -16,7 +16,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef } from 'react';
 import { useFilter } from '@react-aria/i18n';
 import AccountIcon from 'mdi-react/AccountIcon';
 import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
@@ -106,6 +106,8 @@ export var Default = function Default() {
       searchValue = _useState4[0],
       setSearchValue = _useState4[1];
 
+  var checkBoxRef = useRef(null);
+
   var _useFilter = useFilter({
     sensitivity: 'base'
   }),
@@ -281,7 +283,11 @@ export var Default = function Default() {
       },
       isSelected: _someInstanceProperty(selectedItems).call(selectedItems, function (el) {
         return el.key === item.key;
-      })
+      }),
+      ref: checkBoxRef,
+      onClick: function onClick() {
+        return checkBoxRef.current.focus();
+      }
     }));
   })), ___EmotionJSX(CollapsiblePanel, {
     items: selectedItems,

package/lib/styles/forms/switch.js

@@ -33,11 +33,11 @@ export var thumbContainer = {
   border: '1px solid',
   borderColor: 'neutral.80',
   borderRadius: 9999,
-  '.is-selected &': {
+  'label.is-selected &': {
     bg: 'active',
     borderColor: 'active'
   },
-  '.is-focused &, &:focus': _objectSpread({}, defaultFocus)
+  'label.is-focused &, &:focus': _objectSpread({}, defaultFocus)
 };
 export var thumb = {
   width: 20,
@@ -51,7 +51,7 @@ export var thumb = {
   transitionTimingFunction: 'ease-out',
   transitionDuration: '0.1s',
   transform: 'translateX(0)',
-  '.is-selected &': {
+  'label.is-selected &': {
     transform: 'translateX(20px)',
     borderColor: 'active'
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.23.0-alpha.1",
+  "version": "1.23.0-alpha.4",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",