@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelContainer.js

@@ -2,30 +2,29 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["selectedFilterCount", "className", "children", "closeAriaLabel", "isDefaultOpen", "isOpen", "onOpenChange", "openAriaLabel"];
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import { useOverlayTriggerState } from 'react-stately';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
-import { useOverlayTriggerState } from '@react-stately/overlays';
-import CollapsiblePanelBadge from './CollapsiblePanelBadge';
-import { Icon, IconButton, Box } from '../../index';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import PropTypes from 'prop-types';
 import { useStatusClasses } from '../../hooks';
+import { Box, Icon, IconButton } from '../../index';
+import CollapsiblePanelBadge from './CollapsiblePanelBadge';
+
 /**
  * The CollapsiblePanelContainer serves as a wrapper around a list and its associated trigger,
  * linking the list's open state with the trigger's press state and providing necessary context.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
-      className = props.className,
-      children = props.children,
-      closeAriaLabel = props.closeAriaLabel,
-      isDefaultOpen = props.isDefaultOpen,
-      isOpen = props.isOpen,
-      onOpenChange = props.onOpenChange,
-      openAriaLabel = props.openAriaLabel,
-      others = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    children = props.children,
+    closeAriaLabel = props.closeAriaLabel,
+    isDefaultOpen = props.isDefaultOpen,
+    isOpen = props.isOpen,
+    onOpenChange = props.onOpenChange,
+    openAriaLabel = props.openAriaLabel,
+    others = _objectWithoutProperties(props, _excluded);
   var triggerRef = React.useRef();
   var state = useOverlayTriggerState({
     defaultOpen: isDefaultOpen,
@@ -33,12 +32,10 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     onOpenChange: onOpenChange
   });
   var close = state.close;
-
   var _useStatusClasses = useStatusClasses(className, {
-    isOpen: state.isOpen
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isOpen: state.isOpen
+    }),
+    classNames = _useStatusClasses.classNames;
   var handleButtonPress = function handleButtonPress() {
     if (state.isOpen) {
       close(state, triggerRef, close);
@@ -46,18 +43,16 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
       state.open();
     }
   };
-
   var handleClose = function handleClose(e) {
     if (e.key === 'Escape') {
       close(state, triggerRef, close);
     }
   };
-
   return ___EmotionJSX(Box, _extends({
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "collapsiblePanel.collapsiblePanelContainer",
+    variant: "collapsiblePanel.container",
     isRow: true
   }, others), ___EmotionJSX(IconButton, {
     isRow: true,
@@ -65,7 +60,7 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": "collapsible-panel-button",
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "collapsiblePanelToggle",
+    variant: "toggle",
     pr: "sm"
   }, ___EmotionJSX(Icon, {
     color: "active",
@@ -81,16 +76,12 @@ var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
 CollapsiblePanelContainer.propTypes = {
   /** Amount of selected items indicator. */
   selectedFilterCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** Defines a string value that labels the trigger icon when menu is open. */
   closeAriaLabel: PropTypes.string,
-
   /** Sets the default open state of the overlay. */
   isDefaultOpen: PropTypes.bool,
-
   /** Whether the overlay is currently open. */
   isOpen: PropTypes.bool,
-
   /**
    * Method that is called when the open state of the menu changes.
    * Returns the new open state and the action that caused the opening of the menu.
@@ -98,7 +89,6 @@ CollapsiblePanelContainer.propTypes = {
    * `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
    */
   onOpenChange: PropTypes.func,
-
   /** Defines a string value that labels the trigger icon when menu is closed. */
   openAriaLabel: PropTypes.string
 };

package/lib/components/CollapsiblePanelContainer/CollapsiblePanelContainer.test.js

@@ -12,18 +12,17 @@ var collapsiblePanelId = 'collapsible-panel';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(CollapsiblePanelContainer, _extends({}, defaultProps, props), ___EmotionJSX("div", {
     "data-testid": collapsiblePanelId
   })));
 };
-
 afterEach(function () {
   jest.restoreAllMocks();
-}); // Need to be added to each test file to test accessibility using axe.
+});
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default CollapsiblePanelContainer', function () {
   getComponent();

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.js

@@ -4,23 +4,21 @@ import { Box, Icon, IconButton, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CollapsiblePanelItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
-      icon = props.icon,
-      isDefaultSelected = props.isDefaultSelected,
-      onPress = props.onPress;
-
+    icon = props.icon,
+    isDefaultSelected = props.isDefaultSelected,
+    onPress = props.onPress;
   var iconElement = icon && ___EmotionJSX(Icon, {
     "data-testid": "collapsible-panel-data-icon",
     icon: icon,
     color: isDefaultSelected ? 'neutral.10' : 'active',
     size: 13
   });
-
   return ___EmotionJSX(Box, {
     "data-testid": "collapsible-panel-item",
     isRow: true,
     ref: ref
   }, ___EmotionJSX(Text, {
-    variant: "collapsiblePanellItem"
+    variant: "variants.collapsiblePanel.itemText"
   }, text), iconElement && (isDefaultSelected ? iconElement : ___EmotionJSX(IconButton, {
     sx: {
       width: 20,
@@ -39,18 +37,15 @@ CollapsiblePanelItem.propTypes = {
      * Display text.
      */
   text: PropTypes.string,
-
   /**
      * List icon.
      */
   icon: PropTypes.shape({}),
-
   /**
    * Whether the element is default selected
    * and has to use Icon element instead of IconButton
    */
   isDefaultSelected: PropTypes.bool,
-
   /**
    * Handler that is called at the press on icon button
    */

package/lib/components/CollapsiblePanelItem/CollapsiblePanelItem.test.js

@@ -10,16 +10,15 @@ var iconId = 'collapsible-panel-data-icon';
 var defaultProps = {
   text: 'Item name'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(CollapsiblePanelItem, _extends({}, defaultProps, props)));
 };
-
 afterEach(function () {
   jest.restoreAllMocks();
-}); // Need to be added to each test file to test accessibility using axe.
+});
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default collapsiblePanel', function () {
   getComponent();

package/lib/components/ColorField/ColorField.js

@@ -10,25 +10,22 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 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 _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger, useVisuallyHidden } from 'react-aria';
+import { ChromePicker } from 'react-color';
+import { useOverlayTriggerState } from 'react-stately';
 import { useColorField } from '@react-aria/color';
 import { useColorFieldState } from '@react-stately/color';
-import { useOverlayTriggerState } from '@react-stately/overlays';
-import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
 import PropTypes from 'prop-types';
-import { ChromePicker } from 'react-color';
-import { Box, Button, Input, FieldHelperText, Label } from '../../';
+import { Box, Button, FieldHelperText, Input, Label } from '../..';
+import useField from '../../hooks/useField';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
 import PopoverContainer from '../PopoverContainer';
-import statuses from '../../utils/devUtils/constants/statuses';
-import useField from '../../hooks/useField';
+
 /**
  * The Color Field component allows the user to pick a color and displays the chosen color.
  *
@@ -37,28 +34,23 @@ import useField from '../../hooks/useField';
  *
  * Using [React Color](https://casesandberg.github.io/react-color/) as a color picker.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-
   var align = props.align,
-      buttonProps = props.buttonProps,
-      controlProps = props.controlProps,
-      direction = props.direction,
-      helperText = props.helperText,
-      label = props.label,
-      labelProps = props.labelProps,
-      imperativeOnChange = props.onChange,
-      status = props.status;
-
+    buttonProps = props.buttonProps,
+    controlProps = props.controlProps,
+    direction = props.direction,
+    helperText = props.helperText,
+    label = props.label,
+    labelProps = props.labelProps,
+    imperativeOnChange = props.onChange,
+    status = props.status;
   var _getAriaAttributeProp = getAriaAttributeProps(props),
-      ariaProps = _getAriaAttributeProp.ariaProps,
-      nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-
+    ariaProps = _getAriaAttributeProp.ariaProps,
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
   var colorRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return colorRef.current;
   });
@@ -66,39 +58,36 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   var overlayRef = React.useRef();
   var state = useColorFieldState(nonAriaProps);
   var popoverState = useOverlayTriggerState({});
-
   var _useOverlayTrigger = useOverlayTrigger({
-    type: 'dialog'
-  }, popoverState, triggerRef),
-      triggerProps = _useOverlayTrigger.triggerProps,
-      overlayProps = _useOverlayTrigger.overlayProps;
-
+      type: 'dialog'
+    }, popoverState, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
   var _useColorField = useColorField(nonAriaProps, state, colorRef),
-      raLabelProps = _useColorField.labelProps,
-      raInputProps = _useColorField.inputProps;
-
+    raLabelProps = _useColorField.labelProps,
+    raInputProps = _useColorField.inputProps;
   var _useVisuallyHidden = useVisuallyHidden(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var _useField = useField(_objectSpread(_objectSpread({}, nonAriaProps), {}, {
-    labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
-    controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
-  })),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlProps = _useField.fieldControlProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      labelProps: _objectSpread(_objectSpread({}, labelProps), raLabelProps),
+      controlProps: _objectSpread(_objectSpread({}, controlProps), raInputProps)
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var _useOverlayPosition = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: overlayRef,
-    placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
-    offset: 15,
-    isOpen: popoverState.isOpen,
-    onClose: popoverState.close,
-    shouldUpdatePosition: true
-  }),
-      positionProps = _useOverlayPosition.overlayProps;
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
+      offset: 15,
+      isOpen: popoverState.isOpen,
+      onClose: popoverState.close,
+      shouldUpdatePosition: true
+    }),
+    positionProps = _useOverlayPosition.overlayProps;
 
+  /* istanbul ignore next */
   var handleButtonPress = useCallback(function () {
     return popoverState.open();
   }, [triggerRef]);
@@ -109,7 +98,6 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [imperativeOnChange]);
   var getRgbaFromState = useCallback(function (_ref) {
     var _context2, _context3, _context4;
-
     var colorValue = _ref.colorValue;
     return _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "rgba(".concat(colorValue === null || colorValue === void 0 ? void 0 : colorValue.red, ", ")).call(_context4, colorValue === null || colorValue === void 0 ? void 0 : colorValue.green, ", ")).call(_context3, colorValue === null || colorValue === void 0 ? void 0 : colorValue.blue, ", ")).call(_context2, colorValue === null || colorValue === void 0 ? void 0 : colorValue.alpha, ")");
   }, []);
@@ -118,16 +106,15 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     bg: getRgbaFromState(state),
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "colorField"
-  }, triggerProps, ariaProps, buttonProps)), ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlProps, {
+    variant: "forms.colorField.container"
+  }, mergeProps(buttonProps, ariaProps, triggerProps))), ___EmotionJSX(Box, fieldControlWrapperProps, ___EmotionJSX(Input, _extends({}, visuallyHiddenProps, fieldControlInputProps, {
     ref: colorRef
-  })), helperText && ___EmotionJSX(FieldHelperText, {
+  }))), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), ___EmotionJSX(PopoverContainer, _extends({
     hasNoArrow: true,
     isDismissable: true,
     isNonModal: true,
-    isNotClosedOnBlur: true,
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
     ref: overlayRef
@@ -140,43 +127,27 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     onChange: handleColorChange
   }))));
 });
-ColorField.propTypes = _objectSpread({
+ColorField.propTypes = _objectSpread(_objectSpread({
   /** Alignment of the popover menu relative to the trigger. */
   align: PropTypes.oneOf(['start', 'end', 'middle']),
-
   /** Where the popover menu opens relative to its trigger. */
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-
   /** Text to display after the Color Field button. Useful for errors or other info. */
   helperText: PropTypes.node,
-
   /** The content to display as the label. */
   label: PropTypes.node,
-
   /** Pass a function to call every time the color is changed. [React Color onChange](https://casesandberg.github.io/react-color/#api-onChange)
    *
    * (color, event) => void;
    */
   onChange: PropTypes.func,
-
   /** Determines the helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Color controls what color is active on the color picker. */
   value: PropTypes.string,
-
   /** Props object that is spread into the Button element. */
-  buttonProps: PropTypes.shape({}),
-
-  /** Props object that is spread directly into the root (top-level) Box component. */
-  containerProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the input element. */
-  controlProps: PropTypes.shape({}),
-
-  /** Props object that is spread into the label element. */
-  labelProps: PropTypes.shape({})
-}, ariaAttributesBasePropTypes);
+  buttonProps: PropTypes.shape({})
+}, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 ColorField.defaultProps = {
   align: 'middle',
   direction: 'bottom'

package/lib/components/ColorField/ColorField.stories.js

@@ -10,15 +10,13 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-
 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 _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useCallback, useState } from 'react';
-import { ColorField, OverlayProvider } from '../../';
-import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { ColorField, OverlayProvider } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/ColorField',
@@ -30,7 +28,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     value: {
       control: {
         type: 'text'
@@ -66,44 +64,28 @@ export default {
       }
     },
     containerProps: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: {
-        sx: {
-          marginLeft: 50
-        }
-      }
-    },
-    controlProps: {
-      control: {
-        type: 'none'
-      }
-    },
-    labelProps: {
       control: {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   var _useState = useState('rgba(127, 0, 127, 1)'),
-      _useState2 = _slicedToArray(_useState, 2),
-      color = _useState2[0],
-      setColor = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    setColor = _useState2[1];
   var handleChange = useCallback(function (_ref) {
     var _context, _context2, _context3;
-
     var rgb = _ref.rgb;
     var r = rgb.r,
-        b = rgb.b,
-        g = rgb.g,
-        a = rgb.a;
+      b = rgb.b,
+      g = rgb.g,
+      a = rgb.a;
     setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
   }, []);
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ColorField, _extends({
       value: color

package/lib/{styles/forms/comboBox.js → components/ColorField/ColorField.styles.js}

@@ -7,21 +7,17 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 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 { input as inputBase } from './input';
+import { neutral } from '../../styles/colors';
+import { defaultFocus } from '../Button/Buttons.styles';
 var container = {
-  position: 'relative'
+  border: "1px solid ".concat(neutral['80']),
+  '&:focus-visible': {
+    outline: 'none'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
-
-var input = _objectSpread(_objectSpread({}, inputBase), {}, {
-  pr: 'xl'
-});
-
 export default {
-  container: container,
-  input: input
+  container: container
 };

package/lib/components/ColorField/ColorField.test.js

@@ -15,13 +15,12 @@ var defaultProps = {
   label: testLabel,
   helperText: 'test-helper-text'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ColorField, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('renders ColorField component', function () {
   getComponent();
@@ -47,19 +46,4 @@ test('will call onChange with arguments if provided', function () {
   userEvent.clear(hexInput);
   userEvent.type(hexInput, testColor2);
   expect(testOnChange).toHaveBeenCalled();
-});
-test('clicking within the popover does not close it', function () {
-  var testOnChange = jest.fn();
-  getComponent({
-    onChange: testOnChange,
-    value: testColor1
-  });
-  var button = screen.getByRole('button');
-  userEvent.click(button); // should be open now
-
-  var hexLabelElement = screen.queryByText(hexLabel);
-  expect(hexLabelElement).toBeInTheDocument(); // click the popover container, which has caused closing in regressions
-
-  userEvent.click(screen.queryByRole('presentation'));
-  expect(screen.queryByRole('presentation')).toBeInTheDocument();
 });

package/lib/{styles/variants/bidirectionalIconButton.js → components/ComboBox/ComboBox.styles.js}

@@ -7,28 +7,30 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 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 { defaultFocus } from './buttons';
-var bidirectionalIconButton = {
-  border: '1px solid',
-  outline: 'none',
-  height: '24px',
-  width: '24px',
-  color: 'active',
-  borderRadius: '12px',
-  borderColor: 'active',
-  '&.is-hovered': {
-    color: 'accent.40',
-    borderColor: 'accent.40'
-  },
-  '&.is-pressed': {
-    color: 'accent.20',
-    borderColor: 'accent.20'
-  },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+import { input as inputBase } from '../Input/Input.styles';
+var container = {
+  position: 'relative'
 };
-export default bidirectionalIconButton;
+var input = _objectSpread(_objectSpread({}, inputBase), {}, {
+  pr: 'xl'
+});
+var inputInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  right: 'sm',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var button = {
+  bg: 'transparent',
+  color: 'black',
+  padding: 0
+};
+export default {
+  container: container,
+  input: input,
+  inputInContainerSlot: inputInContainerSlot,
+  button: button
+};