@pingux/astro 2.221.6 → 2.234.0-alpha.0

package/lib/components/CheckboxFieldGroup/CheckboxFieldGroupItem.js

@@ -0,0 +1,101 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
+import { mergeProps, useCheckboxGroupItem } from 'react-aria';
+import { v4 as uuid } from 'uuid';
+import { Box, Checkbox, FieldHelperText, Label } from '../..';
+import { CheckboxFieldGroupContext } from '../../context/CheckboxFieldGroupContext';
+import { useField, useLocalOrForwardRef, usePropWarning } from '../../hooks';
+import { getPendoID } from '../../utils/devUtils/constants/pendoID';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'CheckboxFieldGroupItem';
+var CheckboxFieldGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context;
+  var checkBoxProps = props.checkBoxProps,
+    _props$controlProps = props.controlProps,
+    controlProps = _props$controlProps === void 0 ? {} : _props$controlProps,
+    hasAutoFocus = props.hasAutoFocus,
+    helperText = props.helperText,
+    isIndeterminate = props.isIndeterminate,
+    label = props.label,
+    _props$status = props.status,
+    status = _props$status === void 0 ? statuses.DEFAULT : _props$status;
+  var state = useContext(CheckboxFieldGroupContext);
+  if (!state) {
+    throw new Error("".concat(displayName, " must be rendered inside CheckboxFieldGroup"));
+  }
+  usePropWarning(props, 'disabled', 'isDisabled');
+  var checkboxRef = useLocalOrForwardRef(ref);
+  var helperTextId = useMemo(function () {
+    return uuid();
+  }, []);
+  var previousIndeterminate = useRef(isIndeterminate);
+  var checkboxGroupItemProps = _objectSpread(_objectSpread({}, props), {}, {
+    children: label,
+    autoFocus: hasAutoFocus || controlProps.hasAutoFocus,
+    isIndeterminate: isIndeterminate,
+    // The hook combines this item-level value with the group's disabled/read-only state.
+    isDisabled: props.isDisabled
+  }, controlProps);
+  var _useCheckboxGroupItem = useCheckboxGroupItem(checkboxGroupItemProps, state, checkboxRef),
+    checkboxLabelProps = _useCheckboxGroupItem.labelProps,
+    inputProps = _useCheckboxGroupItem.inputProps;
+  var itemIsDisabled = !!props.isDisabled || state.isDisabled;
+  var itemIsReadOnly = !!props.isReadOnly || state.isReadOnly;
+  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+      // React Aria combines item and group state in the hook result. Pass those
+      // effective values to useField as well so its status classes and visual
+      // control/label state match the native input attributes.
+      isDisabled: itemIsDisabled,
+      isReadOnly: itemIsReadOnly,
+      controlProps: _objectSpread(_objectSpread({}, controlProps), inputProps),
+      statusClasses: {
+        isDisabled: itemIsDisabled,
+        isReadOnly: itemIsReadOnly,
+        isIndeterminate: isIndeterminate,
+        isChecked: inputProps.checked
+      }
+    })),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  useEffect(function () {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = !!isIndeterminate;
+      // Retain focus when the visual state changes and the browser has moved focus to body.
+      if (!isIndeterminate && previousIndeterminate.current && document.activeElement === document.body) {
+        checkboxRef.current.focus();
+      }
+    }
+    previousIndeterminate.current = isIndeterminate;
+  }, [checkboxRef, isIndeterminate]);
+  return ___EmotionJSX(Box, _extends({
+    variant: "forms.checkboxFieldGroup.item"
+  }, getPendoID(displayName), fieldContainerProps), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Label, _extends({
+    variant: "forms.label.checkboxFieldGroupItem"
+  }, fieldLabelProps, checkboxLabelProps), ___EmotionJSX(Checkbox, _extends({
+    ref: checkboxRef
+  }, mergeProps(fieldControlInputProps, inputProps, checkBoxProps || {}), {
+    "aria-describedby": _filterInstanceProperty(_context = [inputProps['aria-describedby'], helperText ? helperTextId : undefined]).call(_context, Boolean).join(' ') || undefined,
+    "aria-checked": isIndeterminate ? 'mixed' : inputProps.checked,
+    isIndeterminate: isIndeterminate
+  })), label)), helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    id: helperTextId
+  }, helperText));
+});
+CheckboxFieldGroupItem.displayName = displayName;
+export default CheckboxFieldGroupItem;

package/lib/components/CheckboxFieldGroup/checkboxFieldGroupAttributes.js

@@ -0,0 +1,101 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/docUtils/fieldAttributes';
+import { statusArgTypes } from '../../utils/docUtils/statusProp';
+export var checkboxFieldGroupArgTypes = _objectSpread(_objectSpread(_objectSpread({
+  label: {
+    control: {
+      type: 'text'
+    },
+    description: 'The accessible label for the checkbox group.'
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    },
+    description: 'Descriptive text announced with the group and its items.'
+  },
+  errorMessage: {
+    control: {
+      type: 'text'
+    },
+    description: 'Validation feedback rendered when the group is invalid.'
+  },
+  hintText: {
+    control: {
+      type: 'text'
+    }
+  },
+  orientation: {
+    control: {
+      type: 'inline-radio'
+    },
+    options: ['vertical', 'horizontal']
+  },
+  defaultValue: {
+    control: {
+      type: 'object'
+    },
+    description: 'Initially selected item values for an uncontrolled group.'
+  },
+  value: {
+    control: false,
+    description: 'Selected item values for a controlled group.'
+  },
+  onChange: {
+    action: 'selection changed',
+    description: 'Receives the complete selected string array after a toggle.'
+  },
+  isDisabled: {},
+  isReadOnly: {},
+  isRequired: {},
+  isInvalid: {},
+  name: {
+    description: 'The native name copied to every checkbox input in the group.'
+  },
+  form: {
+    description: 'The native form ID copied to every checkbox input in the group.'
+  },
+  id: {},
+  children: {
+    control: false,
+    description: 'Use CheckboxFieldGroupItem children; raw Checkbox children do not consume group state.'
+  }
+}, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes);
+export var checkboxFieldGroupItemArgTypes = _objectSpread(_objectSpread({
+  value: {
+    description: 'Required string submitted when this item is selected.'
+  },
+  label: {
+    control: {
+      type: 'text'
+    }
+  },
+  helperText: {
+    control: {
+      type: 'text'
+    }
+  },
+  isDisabled: {},
+  isReadOnly: {},
+  isIndeterminate: {
+    description: 'Visual mixed state only; it does not add another selection model.'
+  },
+  hasAutoFocus: {},
+  controlProps: {
+    control: false
+  },
+  checkBoxProps: {
+    control: false
+  }
+}, statusArgTypes), ariaAttributeBaseArgTypes);

package/lib/components/CheckboxFieldGroup/index.js

@@ -0,0 +1,3 @@
+export { default as CheckboxFieldGroup } from './CheckboxFieldGroup';
+export { default } from './CheckboxFieldGroup';
+export { default as CheckboxFieldGroupItem } from './CheckboxFieldGroupItem';

package/lib/components/CodeView/CodeView.js

@@ -1,7 +1,7 @@
 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", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps", "variant"],
+var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps", "slots", "variant"],
   _excluded2 = ["key"],
   _excluded3 = ["key"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -40,6 +40,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     customPrism = props.Prism,
     stylesProp = props.stylesProp,
     iconButtonProps = props.iconButtonProps,
+    slots = props.slots,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'default' : _props$variant,
     others = _objectWithoutProperties(props, _excluded);
@@ -140,7 +141,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       mb: "0",
       mr: "sm",
       py: "sm"
-    }, typeof language === 'string' ? language.toUpperCase() : ''), ___EmotionJSX(CopyText, {
+    }, typeof language === 'string' ? language.toUpperCase() : ''), slots === null || slots === void 0 ? void 0 : slots.controlBar, !hasNoCopyButton && ___EmotionJSX(CopyText, {
       ref: ref,
       mode: "rightText",
       textToCopy: textToCopy || children,

package/lib/components/CodeView/CodeView.stories.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import React from 'react';
+import DotsHorizontalIcon from '@pingux/mdi-react/DotsHorizontalIcon';
 import Prism from 'prismjs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { CodeView } from '../../index';
+import { CodeView, Icon, IconButton } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import CodeViewReadme from './CodeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -22,6 +23,15 @@ export default {
     },
     Prism: {
       control: 'none'
+    },
+    slots: {
+      control: false,
+      description: 'Optional slots. `controlBar` renders custom controls between the language label and copy button in the Onyx header.',
+      table: {
+        type: {
+          summary: '{ controlBar?: React.ReactNode }'
+        }
+      }
     }
   },
   args: {
@@ -68,6 +78,39 @@ Default.parameters = {
     }
   }
 };
+export var WithSlots = function WithSlots() {
+  return ___EmotionJSX(CodeView, {
+    language: "json",
+    slots: {
+      controlBar: ___EmotionJSX(IconButton, {
+        "aria-label": "Open code actions",
+        title: "Open code actions",
+        sx: {
+          width: 'fit-content',
+          flexShrink: 0
+        }
+      }, ___EmotionJSX(Icon, {
+        icon: DotsHorizontalIcon,
+        title: {
+          name: 'Code actions'
+        }
+      }))
+    }
+  }, code);
+};
+WithSlots.parameters = {
+  docs: {
+    storyDescription: 'Adds an accessible custom control between the language label and the copy button in the Onyx header through slots.controlBar.'
+  },
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var WithLineNumbers = function WithLineNumbers(args) {
   return ___EmotionJSX(CodeView, _extends({}, args, {
     hasLineNumbers: true

package/lib/components/CodeView/CodeView.test.js

@@ -29,11 +29,15 @@ function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try {
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context10, _context11; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context10 = ownKeys(Object(t), !0)).call(_context10, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context11 = ownKeys(Object(t))).call(_context11, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { CodeView } from '../..';
+import { AstroProvider, CodeView, NextGenDarkTheme, NextGenTheme, OnyxTheme } from '../..';
+import { copyButton } from '../../styles/themes/next-gen/codeView/codeView';
 import { act, fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -47,6 +51,20 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), 'children' in props ? props.children : textValue));
 };
+var getOnyxComponent = function getOnyxComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(AstroProvider, {
+    theme: OnyxTheme
+  }, ___EmotionJSX(CodeView, _extends({}, defaultProps, props), 'children' in props ? props.children : textValue)));
+};
+var getOnyxStyledComponent = function getOnyxStyledComponent(theme, variant) {
+  return render(___EmotionJSX(AstroProvider, {
+    theme: theme
+  }, ___EmotionJSX(CodeView, _extends({}, defaultProps, {
+    language: "json",
+    variant: variant
+  }), "const value = 1;")));
+};
 beforeEach(function () {
   var mockClipboard = {
     writeText: jest.fn()
@@ -267,6 +285,72 @@ test('isOnyx prop renders CodeView component with next-gen theme', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass('language-json');
 });
+test.each(['default', 'light'])('renders the Onyx control-bar slot before the copy button for the %s variant', function (variant) {
+  getOnyxComponent({
+    children: 'const value = 1;',
+    language: 'json',
+    variant: variant,
+    slots: {
+      controlBar: ___EmotionJSX("button", {
+        type: "button"
+      }, "Control bar")
+    }
+  });
+  var languageLabel = screen.getByText('JSON', {
+    exact: true
+  });
+  var controlBar = screen.getByRole('button', {
+    name: 'Control bar'
+  });
+  var copyControl = screen.getByRole('button', {
+    name: 'copy to clipboard'
+  });
+  var documentOrder = _Array$from(document.querySelectorAll('*'));
+  expect(_indexOfInstanceProperty(documentOrder).call(documentOrder, languageLabel)).toBeLessThan(_indexOfInstanceProperty(documentOrder).call(documentOrder, controlBar));
+  expect(_indexOfInstanceProperty(documentOrder).call(documentOrder, controlBar)).toBeLessThan(_indexOfInstanceProperty(documentOrder).call(documentOrder, copyControl));
+});
+test.each(['default', 'light'])('does not render an Onyx control-bar slot when omitted for the %s variant', function (variant) {
+  getOnyxComponent({
+    children: 'const value = 1;',
+    language: 'json',
+    variant: variant
+  });
+  expect(screen.getByText('JSON', {
+    exact: true
+  })).toBeInTheDocument();
+  expect(screen.getByRole('button', {
+    name: 'copy to clipboard'
+  })).toBeInTheDocument();
+  expect(screen.queryByRole('button', {
+    name: 'Control bar'
+  })).not.toBeInTheDocument();
+});
+test.each(['default', 'light'])('honors hasNoCopyButton in the Onyx header for the %s variant', function (variant) {
+  getOnyxComponent({
+    children: 'const value = 1;',
+    language: 'json',
+    variant: variant,
+    hasNoCopyButton: true
+  });
+  expect(screen.getByText('JSON', {
+    exact: true
+  })).toBeInTheDocument();
+  expect(screen.queryByRole('button', {
+    name: 'copy to clipboard'
+  })).not.toBeInTheDocument();
+});
+test('uses the intended Onyx color tokens for CodeView copy-button variants', function () {
+  expect(_fillInstanceProperty(copyButton["default"].path)).toBe('white');
+  expect(_fillInstanceProperty(copyButton.light.path)).toBe('black');
+});
+test.each([['NEXT_GEN', NextGenTheme, 'default', '#ffffff'], ['NEXT_GEN', NextGenTheme, 'light', '#000'], ['NEXT_GEN_DARK', NextGenDarkTheme, 'default', '#ffffff'], ['NEXT_GEN_DARK', NextGenDarkTheme, 'light', '#000']])('renders the intended copy-icon path for %s %s CodeView', function (_themeName, theme, variant, fill) {
+  getOnyxStyledComponent(theme, variant);
+  expect(screen.getByRole('button', {
+    name: 'copy to clipboard'
+  })).toHaveStyleRule('fill', fill, {
+    target: 'path'
+  });
+});
 test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
   var textToCopy, button;
   return _regeneratorRuntime().wrap(function _callee9$(_context9) {

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -34,7 +34,7 @@ function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try {
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFilter } from '@react-aria/i18n';
 import { action } from 'storybook/actions';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
@@ -215,6 +215,23 @@ export var Default = function Default(args) {
     }, item.name);
   }));
 };
+export var DefaultOpen = function DefaultOpen() {
+  var inputRef = useRef();
+  useEffect(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, []);
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, actions, {
+    label: "Example label",
+    defaultItems: items,
+    menuTrigger: "focus",
+    ref: inputRef
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  }));
+};
 export var WithSections = function WithSections(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, args, {
     label: "Example label",

package/lib/components/CopyText/CopyButton.js

@@ -17,7 +17,7 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
     copyButtonSize = _useGetTheme.copyButtonSize,
     themeState = _useGetTheme.themeState;
   /* istanbul ignore next */
-  var themeVariant = !themeState.isOnyxDark ? 'copyButton' : "copyButton.".concat(variant);
+  var themeVariant = themeState.isOnyx ? "copyButton.".concat(variant) : 'copyButton';
   return ___EmotionJSX(IconButton, _extends({
     ref: ref,
     "aria-label": "copy to clipboard",
@@ -25,7 +25,6 @@ var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
   }, others), ___EmotionJSX(Icon, _extends({
     icon: ContentCopy,
     size: copyButtonSize,
-    color: "text.secondary",
     title: {
       name: 'Content Copy Icon'
     }

package/lib/components/DatePicker/DatePicker.test.js

@@ -114,7 +114,7 @@ test('renders DatePicker component', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*
         expect(screen.queryByTestId('popover-container')).toBeInTheDocument();
 
         // Ensure it is visibly hidden and not keyboard accessible
-        /* eslint-disable testing-library/no-node-access */
+
         expect(hiddenInput.closest("[style=\"".concat(hiddenStyling, "\"]"))).not.toBeNull();
         expect(hiddenInput).toHaveAttribute('tabindex', '-1');
       case 15:

package/lib/components/EmptyState/EmptyState.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["icon", "heading", "description", "children", "buttonLabel", "onButtonPress", "buttonProps", "headerProps", "iconProps"];
+import React, { forwardRef } from 'react';
+import ControlPointDuplicateIcon from '@pingux/mdi-react/ControlPointDuplicateIcon';
+import { Box, Button, Icon, Text } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var displayName = 'EmptyState';
+var EmptyState = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$icon = props.icon,
+    icon = _props$icon === void 0 ? ControlPointDuplicateIcon : _props$icon,
+    _props$heading = props.heading,
+    heading = _props$heading === void 0 ? 'No items exist' : _props$heading,
+    description = props.description,
+    children = props.children,
+    buttonLabel = props.buttonLabel,
+    onButtonPress = props.onButtonPress,
+    buttonProps = props.buttonProps,
+    headerProps = props.headerProps,
+    iconProps = props.iconProps,
+    others = _objectWithoutProperties(props, _excluded);
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    variant: "emptyState.container"
+  }, others), ___EmotionJSX(Icon, _extends({
+    icon: icon,
+    size: "icon-600",
+    title: {
+      name: 'Empty state icon'
+    },
+    sx: {
+      color: 'font-light',
+      opacity: '20%'
+    }
+  }, iconProps)), ___EmotionJSX(Text, _extends({
+    as: "h4",
+    variant: "h4"
+  }, headerProps), heading), description && ___EmotionJSX(Text, null, description), children || buttonLabel && onButtonPress && ___EmotionJSX(Button, _extends({
+    variant: "primaryWithIcon",
+    onPress: onButtonPress,
+    sx: {
+      mt: 'md'
+    }
+  }, buttonProps), ___EmotionJSX(Icon, {
+    icon: "add",
+    size: "sm",
+    title: {
+      name: 'Plus Icon'
+    },
+    mr: "sm"
+  }), buttonLabel));
+});
+EmptyState.displayName = displayName;
+export default EmptyState;

package/lib/components/EmptyState/EmptyState.mdx

@@ -0,0 +1,44 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as EmptyStateStories from './EmptyState.stories';
+
+<Meta of={EmptyStateStories} isTemplate />
+
+# EmptyState
+
+`EmptyState` communicates when a list, table, or other region has no content to
+show. It supports two usage modes, selected purely by which props are supplied:
+
+- **No results** (a search or filter returned nothing): icon + heading +
+  optional description, no call to action.
+- **Genuinely empty** (no items exist yet): icon + heading + optional
+  description + a call-to-action button, rendered only when both `buttonLabel`
+  and `onButtonPress` are supplied.
+
+Both modes are also the default empty state of `ListView` in the Onyx theme.
+The legacy Astro theme's `ListView` continues to render nothing when empty.
+
+### Required Components
+
+This component can be used independently and does not require additional components.
+
+### Overriding the built-ins
+
+- Pass `icon` (an MDI component or Material Symbol string) to replace the default icon.
+- Pass `children` to replace the built-in call-to-action button with any custom node.
+- `iconProps`, `headerProps`, and `buttonProps` are spread onto the underlying `Icon`,
+  heading `Text`, and `Button` after the defaults, so consumer props win. Note that a
+  consumer-supplied `sx` replaces (rather than merges with) the built-in `sx`.
+
+### Accessibility
+
+#### Keyboard Navigation
+
+| Keys | Functions |
+| ---- | --------- |
+| Tab | Moves focus to the call-to-action button, when rendered, following the page tab sequence. |
+
+#### Screen Readers
+
+- The icon is decorative by default and carries an accessible title ("Empty state icon").
+- The heading renders as an `h4` heading element.
+- The call-to-action button is a standard focusable button announced by its label.

package/lib/components/EmptyState/EmptyState.stories.js

@@ -0,0 +1,81 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _FIGMA_LINKS$emptySta;
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, EmptyState } from '../..';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
+import EmptyStateReadme from './EmptyState.mdx';
+import { emptyStateArgTypes } from './emptyStateAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EmptyStateReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: _objectSpread({}, emptyStateArgTypes)
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(EmptyState, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: (_FIGMA_LINKS$emptySta = FIGMA_LINKS.emptyState) === null || _FIGMA_LINKS$emptySta === void 0 ? void 0 : _FIGMA_LINKS$emptySta["default"]
+  }
+};
+export var WithDescription = function WithDescription(args) {
+  return ___EmotionJSX(EmptyState, _extends({
+    heading: "No users found",
+    description: "Try a different name, username, or email address."
+  }, args));
+};
+export var WithButton = function WithButton(args) {
+  return ___EmotionJSX(EmptyState, _extends({
+    heading: "No users yet",
+    description: "Add your first user to start managing identities in this environment.",
+    buttonLabel: "New User",
+    onButtonPress: function onButtonPress() {
+      return jest.fn()();
+    }
+  }, args));
+};
+export var Customization = function Customization() {
+  return ___EmotionJSX(Box, {
+    isRow: false,
+    gap: "xl"
+  }, ___EmotionJSX(EmptyState, {
+    heading: "No items exist"
+  }), ___EmotionJSX(EmptyState, {
+    heading: "No results found",
+    description: "Try a different query.",
+    iconProps: {
+      icon: 'person_add'
+    }
+  }), ___EmotionJSX(EmptyState, {
+    heading: "No users yet",
+    description: "Add your first user to start managing identities in this environment.",
+    buttonLabel: "New User",
+    onButtonPress: function onButtonPress() {
+      return jest.fn()();
+    },
+    iconProps: {
+      icon: 'search_off'
+    }
+  }));
+};