@pingux/astro 2.84.0-alpha.3 → 2.84.0-alpha.5

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

@@ -200,7 +200,9 @@ var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndet
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.SwitchField, {
     isSelected: isReadOnly,
     label: "Is Read Only",
-    onChange: setIsReadOnly,
+    onChange: function onChange() {
+      return setIsReadOnly(!isReadOnly);
+    },
     value: "my-switch"
   }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Box, {
     isRow: true,

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

@@ -27,13 +27,16 @@ listBox.option = _objectSpread(_objectSpread({}, _Text.text.base), {}, {
   outline: 'none',
   wordBreak: 'break-word',
   cursor: 'pointer',
-  '&.is-selected': _objectSpread(_objectSpread({}, _Text.text.inputValue), {}, {
-    pl: 0
-  }),
   '&.is-focused': {
     color: 'white',
     bg: 'active'
   },
+  '&.is-selected': _objectSpread(_objectSpread({}, _Text.text.inputValue), {}, {
+    pl: 0,
+    '&.is-focused': {
+      color: 'white'
+    }
+  }),
   '&.is-condensed': {
     '&.is-selected': {
       pl: 'md',

package/lib/cjs/components/SwitchField/SwitchField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SwitchFieldProps } from '../../types';
+declare const SwitchField: React.ForwardRefExoticComponent<SwitchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default SwitchField;

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

@@ -27,47 +27,25 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _statusProp = require("../../utils/docUtils/statusProp");
-var _switchFieldAttributes = require("./switchFieldAttributes");
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _react2 = require("@emotion/react");
-var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
-/* eslint-disable no-unused-vars */
+var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps"];
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys2(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 displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _inputProps$checked;
   var label = props.label,
     helperText = props.helperText,
     isDefaultSelected = props.isDefaultSelected,
-    isSelected = props.isSelected,
-    onChange = props.onChange,
-    value = props.value,
-    name = props.name,
-    id = props.id,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isReadOnly = props.isReadOnly,
-    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$hasAutoFocus = props.hasAutoFocus,
-    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onFocusChange = props.onFocusChange,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
+    isDisabled = props.isDisabled,
     status = props.status,
     controlProps = props.controlProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var switchRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return switchRef.current;
-  });
+  var switchRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var state = (0, _reactStately.useToggleState)(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
@@ -79,11 +57,11 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useSwitch = (0, _reactAria.useSwitch)(_objectSpread(_objectSpread({
       children: label
     }, whitelistedProps), {}, {
-      'aria-label': 'switch-field'
+      'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
-    isSelected: inputProps.checked
+    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
   };
   var _useField = (0, _hooks.useField)(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -103,12 +81,14 @@ var SwitchField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, fieldLabelProps), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Switch, (0, _extends2["default"])({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+  }, unhandledAriaProps, (0, _omit["default"])(others, 'data-pendo-id', 'aria-label')))), label), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = _switchFieldAttributes.switchFieldPropTypes;
-SwitchField.defaultProps = _objectSpread({}, _statusProp.statusDefaultProp);
+SwitchField.defaultProps = {
+  status: _statuses["default"].DEFAULT,
+  isDisabled: false
+};
 SwitchField.displayName = displayName;
 var _default = SwitchField;
 exports["default"] = _default;

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

@@ -0,0 +1,11 @@
+import { StoryFn } from '@storybook/react';
+import { SwitchFieldProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<SwitchFieldProps>;
+export declare const Controlled: StoryFn<SwitchFieldProps>;
+export declare const DefaultSelected: StoryFn<SwitchFieldProps>;
+export declare const Disabled: StoryFn<SwitchFieldProps>;
+export declare const NoVisibleLabel: StoryFn<SwitchFieldProps>;
+export declare const Required: StoryFn<SwitchFieldProps>;
+export declare const WithTooltip: StoryFn<SwitchFieldProps>;

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

@@ -60,7 +60,9 @@ var Controlled = function Controlled() {
   return (0, _react2.jsx)(_index.SwitchField, {
     isSelected: isSelected,
     label: "Controlled",
-    onChange: setIsSelected,
+    onChange: function onChange() {
+      return setIsSelected(!isSelected);
+    },
     value: "my-switch"
   });
 };
@@ -97,7 +99,7 @@ var Required = function Required() {
 };
 exports.Required = Required;
 var WithTooltip = function WithTooltip() {
-  var tooltipTrigger = (0, _react.useRef)();
+  var tooltipTrigger = (0, _react.useRef)(null);
   return (0, _react2.jsx)(_index.TooltipTrigger, {
     crossOffset: 15,
     offset: 20,

package/lib/cjs/components/SwitchField/SwitchField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/components/SwitchField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SwitchField';

package/lib/cjs/components/SwitchField/switchFieldAttributes.d.ts

@@ -0,0 +1,94 @@
+export declare const switchFieldArgTypes: {
+    className: {
+        type: {
+            summary: string;
+        };
+        description: string;
+    };
+    hasAutoFocus: any;
+    helperText: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    hintText: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    id: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    isDefaultSelected: any;
+    isDisabled: any;
+    isReadOnly: any;
+    isRequired: any;
+    isSelected: {
+        control: {
+            type: string;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    label: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    name: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    onBlur: any;
+    onChange: any;
+    onFocus: any;
+    onFocusChange: any;
+    onKeyDown: any;
+    onKeyUp: any;
+    value: {
+        control: {
+            type: any;
+        };
+        type: {
+            summary: any;
+        };
+        description: string;
+    };
+    status: {
+        control: {
+            type: string;
+            options: any;
+        };
+        description: string;
+    };
+};
+export declare const switchFieldArgs: {
+    label: string;
+    value: string;
+    status: any;
+};

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

@@ -12,16 +12,11 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.switchFieldPropTypes = exports.switchFieldArgs = exports.switchFieldArgTypes = void 0;
+exports.switchFieldArgs = exports.switchFieldArgTypes = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _docArgTypes = require("../../utils/docUtils/docArgTypes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _context;
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(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; }
@@ -168,27 +163,4 @@ var switchFieldArgs = {
   value: 'my-switch',
   status: _statuses["default"].DEFAULT
 };
-exports.switchFieldArgs = switchFieldArgs;
-var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
-  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
-  hasAutoFocus: _propTypes["default"].bool,
-  helperText: _propTypes["default"].node,
-  hintText: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  isDefaultSelected: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  isRequired: _propTypes["default"].bool,
-  isSelected: _propTypes["default"].bool,
-  label: _propTypes["default"].node,
-  name: _propTypes["default"].string,
-  onBlur: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onFocusChange: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  onKeyUp: _propTypes["default"].func,
-  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
-  value: _propTypes["default"].string
-}, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes), _statusProp.statusPropTypes);
-exports.switchFieldPropTypes = switchFieldPropTypes;
+exports.switchFieldArgs = switchFieldArgs;

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

@@ -1543,6 +1543,9 @@ declare const _default: {
                     color: string;
                     bg: string;
                     pl: number;
+                    '&.is-focused': {
+                        color: string;
+                    };
                 };
             };
         };

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

@@ -419,6 +419,9 @@ declare const _default: {
                 color: string;
                 bg: string;
                 pl: number;
+                '&.is-focused': {
+                    color: string;
+                };
             };
         };
     };

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

@@ -213,7 +213,10 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'lightblue',
-      pl: 0
+      pl: 0,
+      '&.is-focused': {
+        color: 'text.primary'
+      }
     }
   }
 };

package/lib/cjs/types/index.d.ts

@@ -44,6 +44,7 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './separator';
 export * from './shared';
+export * from './switchField';
 export * from './tab';
 export * from './table';
 export * from './tabs';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -513,8 +513,19 @@ _forEachInstanceProperty(_context46 = _Object$keys(_shared)).call(_context46, fu
     }
   });
 });
+var _switchField = require("./switchField");
+_forEachInstanceProperty(_context47 = _Object$keys(_switchField)).call(_context47, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _switchField[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _switchField[key];
+    }
+  });
+});
 var _tab = require("./tab");
-_forEachInstanceProperty(_context47 = _Object$keys(_tab)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_tab)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_tab)).call(_context47, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context48 = _Object$keys(_table)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_table)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_table)).call(_context48, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context49 = _Object$keys(_tabs)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_tabs)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_tabs)).call(_context49, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context50 = _Object$keys(_text)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_text)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_text)).call(_context50, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context51 = _Object$keys(_textField)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_textField)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_textField)).call(_context51,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context52 = _Object$keys(_timefield)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_timefield)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_timefield)).call(_context52,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context53 = _Object$keys(_tooltipTrigger)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_tooltipTrigger)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/switchField.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { ControlProps } from '../hooks/useField/useField';
+import { Status } from './item';
+import { LabelProps } from './label';
+import { DOMAttributes } from './shared';
+export interface SwitchFieldProps extends DOMAttributes {
+    className?: string;
+    label?: React.ReactNode;
+    helperText?: string;
+    isDefaultSelected?: boolean;
+    isDisabled?: boolean;
+    status?: Status;
+    controlProps?: ControlProps;
+    isSelected?: boolean;
+    onChange?: () => void;
+    value?: string;
+    isRequired?: boolean;
+    hintText?: string;
+    labelProps?: LabelProps;
+    hasAutoFocus?: boolean;
+    id?: string;
+    isReadOnly?: boolean;
+    name?: string;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onFocusChange?: () => void;
+    onKeyDown?: () => void;
+    onKeyUp?: () => void;
+}

package/lib/cjs/types/switchField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -183,7 +183,9 @@ export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleab
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SwitchField, {
     isSelected: isReadOnly,
     label: "Is Read Only",
-    onChange: setIsReadOnly,
+    onChange: function onChange() {
+      return setIsReadOnly(!isReadOnly);
+    },
     value: "my-switch"
   }), ___EmotionJSX("br", null), ___EmotionJSX(Box, {
     isRow: true,

package/lib/components/ListBox/ListBox.styles.js

@@ -20,13 +20,16 @@ listBox.option = _objectSpread(_objectSpread({}, text.base), {}, {
   outline: 'none',
   wordBreak: 'break-word',
   cursor: 'pointer',
-  '&.is-selected': _objectSpread(_objectSpread({}, text.inputValue), {}, {
-    pl: 0
-  }),
   '&.is-focused': {
     color: 'white',
     bg: 'active'
   },
+  '&.is-selected': _objectSpread(_objectSpread({}, text.inputValue), {}, {
+    pl: 0,
+    '&.is-focused': {
+      color: 'white'
+    }
+  }),
   '&.is-condensed': {
     '&.is-selected': {
       pl: 'md',

package/lib/components/SwitchField/SwitchField.js

@@ -8,54 +8,32 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["label", "helperText", "isDefaultSelected", "isSelected", "onChange", "value", "name", "id", "isDisabled", "isReadOnly", "isRequired", "hasAutoFocus", "onFocus", "onBlur", "onFocusChange", "onKeyDown", "onKeyUp", "status", "controlProps"];
+var _excluded = ["label", "helperText", "isDefaultSelected", "isDisabled", "status", "controlProps"];
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 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; }
-/* eslint-disable no-unused-vars */
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useSwitch } from 'react-aria';
 import { useToggleState } from 'react-stately';
 import { usePress } from '@react-aria/interactions';
 import omit from 'lodash/omit';
 import { Box, FieldHelperText, Label, Switch } from '../..';
-import { useField, usePropWarning } from '../../hooks';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
-import { statusDefaultProp } from '../../utils/docUtils/statusProp';
-import { switchFieldPropTypes } from './switchFieldAttributes';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'SwitchField';
 var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _inputProps$checked;
   var label = props.label,
     helperText = props.helperText,
     isDefaultSelected = props.isDefaultSelected,
-    isSelected = props.isSelected,
-    onChange = props.onChange,
-    value = props.value,
-    name = props.name,
-    id = props.id,
-    _props$isDisabled = props.isDisabled,
-    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-    _props$isReadOnly = props.isReadOnly,
-    isReadOnly = _props$isReadOnly === void 0 ? false : _props$isReadOnly,
-    _props$isRequired = props.isRequired,
-    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
-    _props$hasAutoFocus = props.hasAutoFocus,
-    hasAutoFocus = _props$hasAutoFocus === void 0 ? false : _props$hasAutoFocus,
-    onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onFocusChange = props.onFocusChange,
-    onKeyDown = props.onKeyDown,
-    onKeyUp = props.onKeyUp,
+    isDisabled = props.isDisabled,
     status = props.status,
     controlProps = props.controlProps,
     others = _objectWithoutProperties(props, _excluded);
-  var switchRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return switchRef.current;
-  });
+  var switchRef = useLocalOrForwardRef(ref);
   var state = useToggleState(_objectSpread({
     defaultSelected: isDefaultSelected
   }, props));
@@ -67,11 +45,11 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useSwitch = useSwitch(_objectSpread(_objectSpread({
       children: label
     }, whitelistedProps), {}, {
-      'aria-label': 'switch-field'
+      'aria-label': others['aria-label'] || 'switch-field'
     }), state, switchRef),
     inputProps = _useSwitch.inputProps;
   var statusClasses = {
-    isSelected: inputProps.checked
+    isSelected: (_inputProps$checked = inputProps.checked) !== null && _inputProps$checked !== void 0 ? _inputProps$checked : false
   };
   var _useField = useField(_objectSpread(_objectSpread(_objectSpread({
       statusClasses: statusClasses
@@ -91,11 +69,13 @@ var SwitchField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, fieldLabelProps), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Switch, _extends({
     ref: switchRef,
     inputProps: fieldControlInputProps
-  }, unhandledAriaProps, omit(others, 'data-pendo-id')))), label), helperText && ___EmotionJSX(FieldHelperText, {
+  }, unhandledAriaProps, omit(others, 'data-pendo-id', 'aria-label')))), label), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText));
 });
-SwitchField.propTypes = switchFieldPropTypes;
-SwitchField.defaultProps = _objectSpread({}, statusDefaultProp);
+SwitchField.defaultProps = {
+  status: statuses.DEFAULT,
+  isDisabled: false
+};
 SwitchField.displayName = displayName;
 export default SwitchField;

package/lib/components/SwitchField/SwitchField.stories.js

@@ -47,7 +47,9 @@ export var Controlled = function Controlled() {
   return ___EmotionJSX(SwitchField, {
     isSelected: isSelected,
     label: "Controlled",
-    onChange: setIsSelected,
+    onChange: function onChange() {
+      return setIsSelected(!isSelected);
+    },
     value: "my-switch"
   });
 };
@@ -79,7 +81,7 @@ export var Required = function Required() {
   });
 };
 export var WithTooltip = function WithTooltip() {
-  var tooltipTrigger = useRef();
+  var tooltipTrigger = useRef(null);
   return ___EmotionJSX(TooltipTrigger, {
     crossOffset: 15,
     offset: 20,

package/lib/components/SwitchField/switchFieldAttributes.js

@@ -11,13 +11,8 @@ var _context;
 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 _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 _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import PropTypes from 'prop-types';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
 import { booleanArg, docArgTypes, funcArg } from '../../utils/docUtils/docArgTypes';
-import { inputFieldAttributesBasePropTypes } from '../../utils/docUtils/fieldAttributes';
-import { statusPropTypes } from '../../utils/docUtils/statusProp';
 var descriptions = {
   className: 'A list of class names to apply to the input element.',
   hasAutoFocus: 'Whether the element should receive focus on render.',
@@ -159,26 +154,4 @@ export var switchFieldArgs = {
   label: 'Example Label',
   value: 'my-switch',
   status: statuses.DEFAULT
-};
-export var switchFieldPropTypes = _objectSpread(_objectSpread(_objectSpread({
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  hasAutoFocus: PropTypes.bool,
-  helperText: PropTypes.node,
-  hintText: PropTypes.string,
-  id: PropTypes.string,
-  isDefaultSelected: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  label: PropTypes.node,
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onFocusChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  status: PropTypes.oneOf(_Object$values(statuses)),
-  value: PropTypes.string
-}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes), statusPropTypes);
+};

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

@@ -204,7 +204,10 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'lightblue',
-      pl: 0
+      pl: 0,
+      '&.is-focused': {
+        color: 'text.primary'
+      }
     }
   }
 };

package/lib/types/index.js

@@ -44,6 +44,7 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './separator';
 export * from './shared';
+export * from './switchField';
 export * from './tab';
 export * from './table';
 export * from './tabs';

package/lib/types/switchField.js

@@ -0,0 +1 @@
+export {};

package/package.json

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