@pingux/astro 2.133.0 → 2.134.0-alpha.1

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

@@ -1316,6 +1316,8 @@ declare const _default: {
                 width: string;
                 height: string;
                 border: string;
+                position: string;
+                right: string;
                 '& > svg': {
                     minWidth: string;
                     width: string;
@@ -1327,8 +1329,6 @@ declare const _default: {
                 '&.is-pressed': {
                     bg: string;
                 };
-                position: string;
-                right: number;
                 cursor: string;
                 transition: string;
                 outline: string;
@@ -1383,6 +1383,42 @@ declare const _default: {
                     bg: string;
                 };
             };
+            clearSelectionButton: {
+                top: string;
+                right: string;
+                bg: string;
+                '.is-float-label &': {
+                    top: string;
+                };
+                width: string;
+                height: string;
+                border: string;
+                position: string;
+                '& > svg': {
+                    minWidth: string;
+                    width: string;
+                    height: string;
+                };
+                '&.is-hovered': {
+                    bg: string;
+                };
+                '&.is-pressed': {
+                    bg: string;
+                };
+                cursor: string;
+                transition: string;
+                outline: string;
+                borderRadius: string;
+                borderColor: string;
+                path: {
+                    fill: string;
+                };
+                '&.is-focused': {
+                    outline: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                };
+            };
         };
         modalCloseButton: {
             position: string;
@@ -1515,6 +1551,17 @@ declare const _default: {
             currentValue: {
                 color: string;
             };
+            arrow: {
+                width: string;
+                height: string;
+                alignItems: string;
+                justifyContent: string;
+                '& > svg': {
+                    minWidth: string;
+                    width: string;
+                    height: string;
+                };
+            };
         };
         radio: {
             base: {
@@ -2594,7 +2641,6 @@ declare const _default: {
             };
         };
         tableWrapper: {
-            overflowY: string;
             p: string;
             borderColor: string;
             boxShadow: string;
@@ -2895,6 +2941,7 @@ declare const _default: {
                 py: string;
                 pl: string;
                 pr: string;
+                justifyContent: string;
                 '&.is-focused': {
                     color: string;
                     bg: string;
@@ -2902,7 +2949,7 @@ declare const _default: {
                 '&.is-selected': {
                     color: string;
                     bg: string;
-                    pl: number;
+                    pl: string;
                     '&.is-focused': {
                         color: string;
                     };
@@ -3841,9 +3888,9 @@ declare const _default: {
                 borderBottomColor: string;
                 backgroundColor: string;
                 '&:not(.has-caption)': {
+                    borderTopLeftRadius: string;
+                    borderTopRightRadius: string;
                     '& > tr:first-child': {
-                        borderTopLeftRadius: string;
-                        borderTopRightRadius: string;
                         '& > th:first-of-type': {
                             borderTopLeftRadius: string;
                         };
@@ -3870,6 +3917,8 @@ declare const _default: {
                 borderTopColor: string;
                 borderBottom: string;
                 backgroundColor: string;
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
                 '& > tr:last-child': {
                     borderBottom: string;
                     borderBottomLeftRadius: string;
@@ -3966,6 +4015,9 @@ declare const _default: {
                         stroke: string;
                     };
                 };
+                '&.is-focused': {
+                    boxShadow: string;
+                };
             };
         };
     };

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

@@ -1064,6 +1064,8 @@ declare const buttons: {
             width: string;
             height: string;
             border: string;
+            position: string;
+            right: string;
             '& > svg': {
                 minWidth: string;
                 width: string;
@@ -1075,8 +1077,6 @@ declare const buttons: {
             '&.is-pressed': {
                 bg: string;
             };
-            position: string;
-            right: number;
             cursor: string;
             transition: string;
             outline: string;
@@ -1131,6 +1131,42 @@ declare const buttons: {
                 bg: string;
             };
         };
+        clearSelectionButton: {
+            top: string;
+            right: string;
+            bg: string;
+            '.is-float-label &': {
+                top: string;
+            };
+            width: string;
+            height: string;
+            border: string;
+            position: string;
+            '& > svg': {
+                minWidth: string;
+                width: string;
+                height: string;
+            };
+            '&.is-hovered': {
+                bg: string;
+            };
+            '&.is-pressed': {
+                bg: string;
+            };
+            cursor: string;
+            transition: string;
+            outline: string;
+            borderRadius: string;
+            borderColor: string;
+            path: {
+                fill: string;
+            };
+            '&.is-focused': {
+                outline: string;
+                outlineColor: string;
+                outlineOffset: string;
+            };
+        };
     };
     modalCloseButton: {
         position: string;

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

@@ -17,6 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _codeView = require("../codeView/codeView");
 var _colors = _interopRequireDefault(require("../colors/colors"));
+var _tShirtSizes = _interopRequireDefault(require("../customProperties/tShirtSizes"));
 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) { (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 primaryBlue = _colors["default"].primary,
@@ -384,6 +385,24 @@ var onyxIconButton = _objectSpread(_objectSpread(_objectSpread({}, baseIconButto
   alignItems: 'center',
   justifyContent: 'center'
 });
+var searchClearButton = _objectSpread(_objectSpread({}, baseIconButton), {}, {
+  width: '20px',
+  height: '20px',
+  border: 'none',
+  position: 'absolute',
+  right: '20px',
+  '& > svg': {
+    minWidth: _tShirtSizes["default"].xs,
+    width: _tShirtSizes["default"].xs,
+    height: _tShirtSizes["default"].xs
+  },
+  '&.is-hovered': {
+    bg: 'background.hover'
+  },
+  '&.is-pressed': {
+    bg: 'background.hover'
+  }
+});
 var iconButtons = {
   base: _objectSpread({}, baseIconButton),
   nextGen: _objectSpread({}, onyxIconButton),
@@ -474,24 +493,7 @@ var iconButtons = {
       backgroundColor: 'gray-300'
     }
   },
-  searchClearButton: _objectSpread(_objectSpread({}, baseIconButton), {}, {
-    width: '20px',
-    height: '20px',
-    border: 'none',
-    '& > svg': {
-      minWidth: '18px',
-      width: '18px',
-      height: '18px'
-    },
-    '&.is-hovered': {
-      bg: 'background.hover'
-    },
-    '&.is-pressed': {
-      bg: 'background.hover'
-    },
-    position: 'absolute',
-    right: 20
-  }),
+  searchClearButton: searchClearButton,
   filter: _objectSpread(_objectSpread({}, baseIconButton), {}, {
     bg: 'transparent',
     border: '2px solid',
@@ -519,7 +521,15 @@ var iconButtons = {
     '&.is-hovered': {
       bg: 'gray-900'
     }
-  }
+  },
+  clearSelectionButton: _objectSpread(_objectSpread({}, searchClearButton), {}, {
+    top: '15px',
+    right: '1rem',
+    bg: 'transparent',
+    '.is-float-label &': {
+      top: '12px'
+    }
+  })
 };
 var buttons = {
   neutral: neutral,

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

@@ -111,7 +111,6 @@ declare const _default: {
         };
     };
     tableWrapper: {
-        overflowY: string;
         p: string;
         borderColor: string;
         boxShadow: string;

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

@@ -82,9 +82,7 @@ var suggestionRow = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
 var suggestionColumn = _objectSpread(_objectSpread({}, baseSuggestion), {}, {
   display: 'flex'
 });
-var tableWrapper = _objectSpread(_objectSpread({}, container), {}, {
-  overflowY: 'hidden'
-});
+var tableWrapper = _objectSpread({}, container);
 var _default = {
   interactive: interactive,
   dark: dark,

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

@@ -30,9 +30,9 @@ export declare const tableBase: {
         borderBottomColor: string;
         backgroundColor: string;
         '&:not(.has-caption)': {
+            borderTopLeftRadius: string;
+            borderTopRightRadius: string;
             '& > tr:first-child': {
-                borderTopLeftRadius: string;
-                borderTopRightRadius: string;
                 '& > th:first-of-type': {
                     borderTopLeftRadius: string;
                 };
@@ -59,6 +59,8 @@ export declare const tableBase: {
         borderTopColor: string;
         borderBottom: string;
         backgroundColor: string;
+        borderBottomLeftRadius: string;
+        borderBottomRightRadius: string;
         '& > tr:last-child': {
             borderBottom: string;
             borderBottomLeftRadius: string;

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

@@ -48,9 +48,9 @@ var thead = {
   borderBottomColor: 'border.base',
   backgroundColor: 'background.base',
   '&:not(.has-caption)': {
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
     '& > tr:first-child': {
-      borderTopLeftRadius: borderRadius,
-      borderTopRightRadius: borderRadius,
       '& > th:first-of-type': {
         borderTopLeftRadius: borderRadius
       },
@@ -73,6 +73,8 @@ var tbody = {
   borderTopColor: 'border.base',
   borderBottom: 'unset',
   backgroundColor: 'background.base',
+  borderBottomLeftRadius: borderRadius,
+  borderBottomRightRadius: borderRadius,
   '& > tr:last-child': {
     borderBottom: 'unset',
     borderBottomLeftRadius: borderRadius,

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

@@ -494,6 +494,7 @@ declare const _default: {
             py: string;
             pl: string;
             pr: string;
+            justifyContent: string;
             '&.is-focused': {
                 color: string;
                 bg: string;
@@ -501,7 +502,7 @@ declare const _default: {
             '&.is-selected': {
                 color: string;
                 bg: string;
-                pl: number;
+                pl: string;
                 '&.is-focused': {
                     color: string;
                 };
@@ -1440,9 +1441,9 @@ declare const _default: {
             borderBottomColor: string;
             backgroundColor: string;
             '&:not(.has-caption)': {
+                borderTopLeftRadius: string;
+                borderTopRightRadius: string;
                 '& > tr:first-child': {
-                    borderTopLeftRadius: string;
-                    borderTopRightRadius: string;
                     '& > th:first-of-type': {
                         borderTopLeftRadius: string;
                     };
@@ -1469,6 +1470,8 @@ declare const _default: {
             borderTopColor: string;
             borderBottom: string;
             backgroundColor: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
             '& > tr:last-child': {
                 borderBottom: string;
                 borderBottomLeftRadius: string;
@@ -1565,6 +1568,9 @@ declare const _default: {
                     stroke: string;
                 };
             };
+            '&.is-focused': {
+                boxShadow: string;
+            };
         };
     };
 };

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

@@ -19,6 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _Attachment = _interopRequireDefault(require("../../../../components/AIComponents/Attachment/Attachment.styles"));
 var _Skeleton = _interopRequireDefault(require("../../../../components/Skeleton/Skeleton.styles"));
 var _codeView = _interopRequireDefault(require("../codeView/codeView"));
+var _colors = _interopRequireDefault(require("../colors/colors"));
 var _avatar = require("./avatar");
 var _button = _interopRequireWildcard(require("./button"));
 var _callout = _interopRequireDefault(require("./callout"));
@@ -212,7 +213,8 @@ var listBox = {
   option: {
     py: '.75rem',
     pl: '.75rem',
-    pr: '1rem',
+    pr: 'md',
+    justifyContent: 'space-between',
     '&.is-focused': {
       color: 'text.primary',
       bg: 'gray-100'
@@ -220,7 +222,7 @@ var listBox = {
     '&.is-selected': {
       color: 'text.primary',
       bg: 'lightblue',
-      pl: 0,
+      pl: '.75rem',
       '&.is-focused': {
         color: 'text.primary'
       }
@@ -469,6 +471,9 @@ var _default = {
           fill: 'gray-500',
           stroke: 'gray-500'
         }
+      },
+      '&.is-focused': {
+        boxShadow: "inset 0px 0px 0px 1px ".concat(_colors["default"].focus)
       }
     }
   }

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

@@ -12,6 +12,8 @@ export interface SelectFieldProps<T> extends Omit<StyleProps, 'direction'>, UseS
     };
     'data-testid'?: string;
     hintText?: string;
+    hasClearButton?: boolean;
+    onClear?: () => void;
 }
 export interface SelectFieldBaseProps extends UseSelectFieldReturnProps<object>, SharedFieldProps {
     slots?: {
@@ -25,4 +27,7 @@ export interface SelectFieldBaseProps extends UseSelectFieldReturnProps<object>,
     selectProps?: Record<string, unknown>;
     isDisabled?: boolean;
     helpHintProps?: HelpHintProps;
+    hasClearButton?: boolean;
+    clearButtonProps?: Record<string, unknown>;
+    onClear?: () => void;
 }

package/lib/components/Box/Box.styles.js

@@ -1,9 +1,11 @@
+import { focus } from '../../styles/colors';
 var base = {
   display: 'flex'
 };
 var indeterminateCheckboxIcon = {
   width: '24px',
   height: '24px',
+  borderRadius: '4px',
   '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
     fill: 'active',
     stroke: 'active'
@@ -13,6 +15,9 @@ var indeterminateCheckboxIcon = {
       fill: 'neutral.80',
       stroke: 'neutral.80'
     }
+  },
+  '&.is-focused': {
+    boxShadow: "inset 0px 0px 0px 1px ".concat(focus)
   }
 };
 export default {

package/lib/components/IconButton/IconButton.styles.js

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import tShirtSizes from '../../styles/themes/astro/customProperties/tShirtSizes';
 import { badgeDeleteButton, deleteButton, invertedBadgeDeleteButton } from '../Badge/Badge.styles';
 import { defaultActive, defaultFocus, defaultHover } from '../Button/Buttons.styles';
 import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
@@ -138,6 +139,17 @@ var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
   position: 'absolute',
   right: 10
 });
+var clearSelectionButton = _objectSpread(_objectSpread({}, base), {}, {
+  width: tShirtSizes.md,
+  height: tShirtSizes.md,
+  position: 'absolute',
+  right: '15px',
+  top: '7px',
+  bg: 'white',
+  '.is-float-label &': {
+    top: '9px'
+  }
+});
 var filter = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   border: '1px solid',
@@ -187,5 +199,6 @@ export default {
   applicationPortal: applicationPortal,
   applicationPortalPinned: applicationPortalPinned,
   searchClearButton: searchClearButton,
-  filter: filter
+  filter: filter,
+  clearSelectionButton: clearSelectionButton
 };

package/lib/components/ListBox/Option.js

@@ -14,10 +14,11 @@ var _excluded = ["item", "hasVirtualFocus", "isCondensed"],
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef } from 'react';
+import CheckIcon from '@pingux/mdi-react/CheckIcon';
 import CircleSmallIcon from '@pingux/mdi-react/CircleSmallIcon';
 import { useOption } from '@react-aria/listbox';
 import { useMultivaluesContext } from '../../context/MultivaluesContext';
-import { useStatusClasses } from '../../hooks';
+import { useGetTheme, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import { ListBoxContext } from './ListBoxContext';
@@ -88,6 +89,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
       state.selectionManager.setFocusedKey(item.key);
     }
   };
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useStatusClasses = useStatusClasses(null, {
       isDisabled: isDisabled || isSeparator,
       isFocused: focused,
@@ -128,11 +131,17 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && ___EmotionJSX(Icon, {
+  }) : isSelected && !isOnyx && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon,
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered);
+  }), rendered, isSelected && isOnyx && ___EmotionJSX(Icon, {
+    icon: CheckIcon,
+    title: {
+      name: 'Check Icon'
+    },
+    color: "green-500"
+  }));
 });
 export default Option;

package/lib/components/SelectField/SelectField.stories.js

@@ -457,4 +457,23 @@ export var WithHelpHint = function WithHelpHint(args) {
   }, "Blue"), ___EmotionJSX(Item, {
     key: "yellow"
   }, "Yellow")));
+};
+export var WithClearButton = function WithClearButton(args) {
+  var _useState5 = useState('red'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedKey = _useState6[0],
+    setSelectedKey = _useState6[1];
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({}, args, {
+    width: "100%",
+    label: "What's your favorite color?",
+    hasClearButton: true,
+    selectedKey: selectedKey,
+    onSelectionChange: setSelectedKey
+  }), ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
 };

package/lib/components/SelectField/SelectField.test.js

@@ -191,4 +191,15 @@ test('should show hintText text if prop is passed', function () {
   fireEvent.mouseMove(helpHintButton);
   fireEvent.mouseEnter(helpHintButton);
   expect(screen.getByText(hintText)).toBeInTheDocument();
+});
+test('should have clear button if hasClearButton prop is true', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    }
+  });
+  var clearButton = screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
 });

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -9,22 +9,17 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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 = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps"];
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps", "hasClearButton", "clearButtonProps", "onClear"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useMemo } from 'react';
+import CloseIcon from '@pingux/mdi-react/CloseIcon';
 import { v4 as uuid } from 'uuid';
+import { Box, Button, FieldHelperText, Icon, IconButton, Label, Loader, Text } from '../..';
 import useGetTheme from '../../hooks/useGetTheme';
 import { modes } from '../../utils/devUtils/constants/labelModes';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
-import Box from '../Box';
-import Button from '../Button';
-import FieldHelperText from '../FieldHelperText';
-import Icon from '../Icon';
-import Label from '../Label';
-import Loader from '../Loader';
-import Text from '../Text';
 import { HiddenSelect } from './HiddenSelect';
 
 /**
@@ -58,6 +53,9 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     triggerRef = props.triggerRef,
     valueProps = props.valueProps,
     selectProps = props.selectProps,
+    hasClearButton = props.hasClearButton,
+    clearButtonProps = props.clearButtonProps,
+    onClear = props.onClear,
     others = _objectWithoutProperties(props, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
@@ -68,7 +66,40 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = useMemo(function () {
     return uuid();
   }, []);
-  var defaultTrigger = ___EmotionJSX(Box, _extends({}, fieldControlWrapperProps, {
+  var handleOnClear = function handleOnClear() {
+    if (onClear) {
+      onClear();
+    }
+    state.setSelectedKey(null);
+  };
+  var buttonRendered = !(hasClearButton && state.selectedKey) && ___EmotionJSX(Box, {
+    as: "span",
+    "aria-hidden": "true",
+    variant: "forms.select.arrow"
+  }, ___EmotionJSX(Icon, {
+    icon: state.isOpen ? MenuUp : MenuDown,
+    title: {
+      name: 'Menu down'
+    },
+    size: "md"
+  }));
+  var clearButton = hasClearButton && state.selectedKey && ___EmotionJSX(IconButton, _extends({
+    tabIndex: 0,
+    as: "span",
+    role: "button",
+    "aria-label": "Clear selection",
+    variant: "clearSelectionButton",
+    onPress: handleOnClear,
+    color: "text.secondary"
+  }, clearButtonProps), ___EmotionJSX(Icon, {
+    icon: CloseIcon,
+    title: {
+      name: 'Clear selection Icon'
+    }
+  }));
+  var defaultTrigger = ___EmotionJSX(Box, _extends({
+    isRow: true
+  }, fieldControlWrapperProps, {
     variant: "forms.input.fieldControlWrapper"
   }), ___EmotionJSX(Button, _extends({
     className: fieldControlInputProps.className,
@@ -83,17 +114,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "placeholder"
   }, labelMode === modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && ___EmotionJSX(Loader, {
     variant: "loader.withinInput"
-  }), ___EmotionJSX(Box, {
-    as: "span",
-    "aria-hidden": "true",
-    variant: "forms.select.arrow"
-  }, ___EmotionJSX(Icon, {
-    icon: state.isOpen ? MenuUp : MenuDown,
-    title: {
-      name: 'Menu down'
-    },
-    size: "md"
-  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
+  }), buttonRendered), clearButton, slots === null || slots === void 0 ? void 0 : slots.inContainer);
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     variant: "forms.input.fieldContainer"