@pingux/astro 2.144.0-alpha.0 → 2.144.0-alpha.2

package/lib/cjs/components/Calendar/Calendar.js

@@ -42,7 +42,8 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     hasAutoFocus = props.hasAutoFocus,
     maxValue = props.maxValue,
     minValue = props.minValue,
-    value = props.value;
+    value = props.value,
+    calendarWrapperProps = props.calendarWrapperProps;
   var _useLocale = (0, _i18n.useLocale)(),
     locale = _useLocale.locale;
   var calenderRef = (0, _hooks.useLocalOrForwardRef)(ref);
@@ -115,7 +116,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     fontWeight: 3,
     flex: 1
   }, title);
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, calendarWrapperProps, {
     ref: calenderRef,
     variant: "calendar.calendarContainer",
     role: "group"

package/lib/cjs/components/CodeEditor/CodeEditor.js

@@ -31,7 +31,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var defaultValue = props.defaultValue,
+  var _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '\n' : _props$defaultValue,
     language = props.language,
     onChange = props.onChange,
     onValidate = props.onValidate,

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

@@ -22,6 +22,7 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Default: StoryFn<CodeEditorProps>;
 export declare const TypescriptEditor: StoryFn<CodeEditorProps>;
 export declare const JavascriptEditor: StoryFn<CodeEditorProps>;
 export declare const JsonEditor: StoryFn<CodeEditorProps>;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TypescriptEditor = exports.ReadOnly = exports.JsonEditor = exports.JavascriptEditor = void 0;
+exports["default"] = exports.TypescriptEditor = exports.ReadOnly = exports.JsonEditor = exports.JavascriptEditor = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -41,6 +41,13 @@ exports["default"] = _default;
 var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
 var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
 var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
+    height: "200px",
+    language: "Default"
+  }));
+};
+exports.Default = Default;
 var TypescriptEditor = function TypescriptEditor(args) {
   return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
     defaultValue: tsCode,

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

@@ -58,6 +58,11 @@ describe('CodeEditor', function () {
     expect(_testWrapper.screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
     expect(_testWrapper.screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
   });
+  it('renders with null/undefined', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, null));
+    expect(_testWrapper.screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Editor Language: undefined, Code:')).toBeInTheDocument();
+  });
   it('calls onChange when code changes', function () {
     var value = 'console.log("Hello, World!");';
     var mockOnChange = jest.fn();

package/lib/cjs/components/CodeView/CodeView.js

@@ -82,7 +82,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       console.warn("Prism language module for \"".concat(String(language), "\" not found."));
     }
   }, [language]);
-  var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
+  var content = code ? (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
     theme: codeViewTheme,
     code: code,
     language: language,
@@ -117,7 +117,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }));
       }));
     }));
-  });
+  }) : '';
 
   /* istanbul ignore next */
   if (isOnyx) {

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

@@ -39,7 +39,7 @@ var defaultProps = {
 var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), textValue));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), 'children' in props ? props.children : textValue));
 };
 beforeEach(function () {
   var mockClipboard = {
@@ -183,7 +183,7 @@ test('after button click, the tooltip renders with the text "Copied!"', /*#__PUR
   }, _callee4);
 })));
 test('renders CodeView component with default language', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children
   });
@@ -191,6 +191,17 @@ test('renders CodeView component with default language', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass('language-json');
 });
+test('renders CodeView component with null/undefined', function () {
+  var children = undefined;
+  getComponent({
+    children: children
+  });
+  _testWrapper.screen.getByRole('button', {
+    name: /copy to clipboard/i
+  });
+  var codeViewElement = _testWrapper.screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).not.toBeInTheDocument();
+});
 test('renders CodeView component with highlighted code', function () {
   var children = "\n    export const Default = args => (\n      <>\n        <Text sx={{ fontWeight: 2 }}>JSON</Text>\n        <CodeView {...args} />\n      </>\n    );\n  ";
   var language = 'jsx';
@@ -203,14 +214,15 @@ test('renders CodeView component with highlighted code', function () {
   expect(codeViewElement).toHaveClass("language-".concat(language));
 });
 test('isOnyx prop renders CodeView component with next-gen theme', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children,
     isOnyx: true,
     language: 'json'
   });
-  var codeViewElement = _testWrapper.screen.getByTestId(testId);
-  expect(codeViewElement).toHaveTextContent('JSON');
+  var codeViewElement = _testWrapper.screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).toBeInTheDocument();
+  expect(codeViewElement).toHaveClass('language-json');
 });
 test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
   var textToCopy, button;

package/lib/cjs/components/CopyText/CopyText.js

@@ -34,6 +34,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }, others), children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
 };
 var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props, _props2;
   var children = props.children,
     textToCopy = props.textToCopy,
     tooltipText = props.tooltipText,
@@ -42,7 +43,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     wrapperProps = props.wrapperProps,
     iconButtonProps = props.iconButtonProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
-  var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
+  var value = textToCopy || (mode === 'link' ? children === null || children === void 0 || (_props = children.props) === null || _props === void 0 ? void 0 : _props.href : (_props2 = children.props) === null || _props2 === void 0 ? void 0 : _props2.children);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isCopied = _useState2[0],
@@ -125,7 +126,8 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
       ref: ref,
       isRow: true,
-      variant: "copyText.copy"
+      variant: "copyText.copy",
+      justifyContent: content ? 'start' : 'end'
     }, wrapperProps, others), content, (0, _react2.jsx)(TooltipWrapper, (0, _extends2["default"])({
       isOpen: isTooltipOpen,
       tooltip: tooltip

package/lib/cjs/components/DatePicker/DateField.js

@@ -39,7 +39,7 @@ var _index = require("../../index");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _DateSegment = _interopRequireDefault(require("./DateSegment"));
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
+var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges", "fieldControlProps"],
   _excluded2 = ["defaultValue"];
 /**
  * DateFields allow users to enter and edit date using a keyboard.
@@ -71,6 +71,7 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     minValue = props.minValue,
     maxValue = props.maxValue,
     unavailableRanges = props.unavailableRanges,
+    fieldControlProps = props.fieldControlProps,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -234,7 +235,7 @@ var DateField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   })))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     isRow: true,
     variant: "forms.datePicker.inputField"
-  }, dateFieldProps, {
+  }, dateFieldProps, fieldControlProps, {
     ref: fieldRef,
     className: classNames
   }), (0, _react2.jsx)(_reactAria.FocusScope, null, (0, _map["default"])(_context3 = isLocalEnUS ? enUSSegments : segments).call(_context3, function (segment, index) {
@@ -320,7 +321,9 @@ DateField.propTypes = {
   /** The ranges of unavailable dates passed  */
   unavailableRanges: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string)),
   /** Props object that is spread directly into the input wrapper element. */
-  wrapperProps: _propTypes["default"].shape({})
+  wrapperProps: _propTypes["default"].shape({}),
+  /** Props object that spread into date segment wrapper element. */
+  fieldControlProps: _propTypes["default"].shape({})
 };
 DateField.defaultProps = {
   hasAutoFocus: false,

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -51,7 +51,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     minValue = props.minValue,
     status = props.status,
     value = props.value,
-    unavailableRanges = props.unavailableRanges;
+    unavailableRanges = props.unavailableRanges,
+    fieldControlProps = props.fieldControlProps,
+    calendarWrapperProps = props.calendarWrapperProps;
   var groupRef = (0, _react.useRef)();
   var popoverRef = (0, _react.useRef)();
 
@@ -107,12 +109,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     autoFocus: true,
     contain: true,
     restoreFocus: true
-  }, (0, _react2.jsx)(_index.Calendar, calendarProps)));
+  }, (0, _react2.jsx)(_index.Calendar, (0, _extends2["default"])({}, calendarProps, {
+    calendarWrapperProps: calendarWrapperProps
+  }))));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DateField["default"], (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('DatePicker'), props, {
     ref: ref,
     buttonProps: buttonProps,
     fieldProps: fieldProps,
     groupProps: (0, _object.omit)(groupProps, 'data-pendo-id'),
+    fieldControlProps: fieldControlProps,
     groupRef: groupRef,
     helperText: helperText,
     labelProps: labelProps,
@@ -177,7 +182,11 @@ DatePicker.propTypes = {
   /** Determines the textarea status indicator and helper text styling. */
   status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
   /** The ranges of unavailable dates passed  */
-  unavailableRanges: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string))
+  unavailableRanges: _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].string)),
+  /** Props object that spread into date segment wrapper element. */
+  fieldControlProps: _propTypes["default"].shape({}),
+  /** Props object that spread into calendar element. */
+  calendarWrapperProps: _propTypes["default"].shape({})
 };
 _DateField["default"].defaultProps = {
   isDisabled: false,

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

@@ -14,7 +14,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UnavailableDates = exports.Required = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.FormatHelperText = exports.Error = exports.Disabled = exports.DefaultValue = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.UnavailableDates = exports.Required = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.FormatHelperText = exports.Error = exports.Disabled = exports.DefaultValue = exports.DefaultOpen = exports.Default = exports.CustomWidth = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -276,4 +276,23 @@ Error.parameters = {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.datePicker.error
   }
-};
+};
+var CustomWidth = function CustomWidth(args) {
+  return (0, _react2.jsx)(_DatePicker["default"], (0, _extends2["default"])({}, args, {
+    fieldControlProps: {
+      sx: {
+        width: '500px'
+      }
+    },
+    calendarWrapperProps: {
+      sx: {
+        maxWidth: '500px',
+        width: '400px',
+        '&  tr': {
+          gap: '20px'
+        }
+      }
+    }
+  }));
+};
+exports.CustomWidth = CustomWidth;

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

@@ -63,6 +63,8 @@ export interface CalendarProps extends Omit<CalendarBaseProps, 'onChange'> {
     value?: DateValue | string;
     /** Handler that is called when the value changes. */
     onChange?: (value: MappedDateValue<DateValue>) => void;
+    /** Props object that spread into calendar element. */
+    calendarWrapperProps?: BoxProps;
 }
 export interface RangeCalendarProps extends Omit<CalendarBaseProps, 'onChange'> {
     /** Prop to provide a custom default date (uncontrolled) */

package/lib/components/Calendar/Calendar.js

@@ -31,7 +31,8 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     hasAutoFocus = props.hasAutoFocus,
     maxValue = props.maxValue,
     minValue = props.minValue,
-    value = props.value;
+    value = props.value,
+    calendarWrapperProps = props.calendarWrapperProps;
   var _useLocale = useLocale(),
     locale = _useLocale.locale;
   var calenderRef = useLocalOrForwardRef(ref);
@@ -104,7 +105,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     fontWeight: 3,
     flex: 1
   }, title);
-  return ___EmotionJSX(Box, _extends({}, calendarProps, {
+  return ___EmotionJSX(Box, _extends({}, calendarProps, calendarWrapperProps, {
     ref: calenderRef,
     variant: "calendar.calendarContainer",
     role: "group"

package/lib/components/CodeEditor/CodeEditor.js

@@ -20,7 +20,8 @@ import { Box, CopyText, Text } from '../../index';
 import languageMapping from '../../utils/devUtils/constants/languageMapping';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
-  var defaultValue = props.defaultValue,
+  var _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '\n' : _props$defaultValue,
     language = props.language,
     onChange = props.onChange,
     onValidate = props.onValidate,

package/lib/components/CodeEditor/CodeEditor.stories.js

@@ -32,6 +32,12 @@ export default {
 var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
 var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
 var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
+export var Default = function Default(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
+    height: "200px",
+    language: "Default"
+  }));
+};
 export var TypescriptEditor = function TypescriptEditor(args) {
   return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: tsCode,

package/lib/components/CodeEditor/CodeEditor.test.js

@@ -55,6 +55,11 @@ describe('CodeEditor', function () {
     expect(screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
     expect(screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
   });
+  it('renders with null/undefined', function () {
+    render(___EmotionJSX(CodeEditor, null));
+    expect(screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
+    expect(screen.getByText('Editor Language: undefined, Code:')).toBeInTheDocument();
+  });
   it('calls onChange when code changes', function () {
     var value = 'console.log("Hello, World!");';
     var mockOnChange = jest.fn();

package/lib/components/CodeView/CodeView.js

@@ -72,7 +72,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       console.warn("Prism language module for \"".concat(String(language), "\" not found."));
     }
   }, [language]);
-  var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
+  var content = code ? ___EmotionJSX(Highlight, _extends({}, defaultProps, {
     theme: codeViewTheme,
     code: code,
     language: language,
@@ -107,7 +107,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
         }));
       }));
     }));
-  });
+  }) : '';
 
   /* istanbul ignore next */
   if (isOnyx) {

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

@@ -35,7 +35,7 @@ var defaultProps = {
 var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), textValue));
+  return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), 'children' in props ? props.children : textValue));
 };
 beforeEach(function () {
   var mockClipboard = {
@@ -179,7 +179,7 @@ test('after button click, the tooltip renders with the text "Copied!"', /*#__PUR
   }, _callee4);
 })));
 test('renders CodeView component with default language', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children
   });
@@ -187,6 +187,17 @@ test('renders CodeView component with default language', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass('language-json');
 });
+test('renders CodeView component with null/undefined', function () {
+  var children = undefined;
+  getComponent({
+    children: children
+  });
+  screen.getByRole('button', {
+    name: /copy to clipboard/i
+  });
+  var codeViewElement = screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).not.toBeInTheDocument();
+});
 test('renders CodeView component with highlighted code', function () {
   var children = "\n    export const Default = args => (\n      <>\n        <Text sx={{ fontWeight: 2 }}>JSON</Text>\n        <CodeView {...args} />\n      </>\n    );\n  ";
   var language = 'jsx';
@@ -199,14 +210,15 @@ test('renders CodeView component with highlighted code', function () {
   expect(codeViewElement).toHaveClass("language-".concat(language));
 });
 test('isOnyx prop renders CodeView component with next-gen theme', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children,
     isOnyx: true,
     language: 'json'
   });
-  var codeViewElement = screen.getByTestId(testId);
-  expect(codeViewElement).toHaveTextContent('JSON');
+  var codeViewElement = screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).toBeInTheDocument();
+  expect(codeViewElement).toHaveClass('language-json');
 });
 test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
   var textToCopy, button;

package/lib/components/CopyText/CopyText.js

@@ -21,6 +21,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }, others), children, ___EmotionJSX(Tooltip, null, tooltip));
 };
 var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props, _props2;
   var children = props.children,
     textToCopy = props.textToCopy,
     tooltipText = props.tooltipText,
@@ -29,7 +30,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     wrapperProps = props.wrapperProps,
     iconButtonProps = props.iconButtonProps,
     others = _objectWithoutProperties(props, _excluded2);
-  var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
+  var value = textToCopy || (mode === 'link' ? children === null || children === void 0 || (_props = children.props) === null || _props === void 0 ? void 0 : _props.href : (_props2 = children.props) === null || _props2 === void 0 ? void 0 : _props2.children);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isCopied = _useState2[0],
@@ -112,7 +113,8 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
       isRow: true,
-      variant: "copyText.copy"
+      variant: "copyText.copy",
+      justifyContent: content ? 'start' : 'end'
     }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, _extends({
       isOpen: isTooltipOpen,
       tooltip: tooltip

package/lib/components/DatePicker/DateField.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges"],
+var _excluded = ["buttonProps", "className", "fieldProps", "groupProps", "groupRef", "hasFormatHelpText", "helperText", "isDisabled", "isOpen", "isReadOnly", "isRequired", "status", "datePickerState", "minValue", "maxValue", "unavailableRanges", "fieldControlProps"],
   _excluded2 = ["defaultValue"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -60,6 +60,7 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
     minValue = props.minValue,
     maxValue = props.maxValue,
     unavailableRanges = props.unavailableRanges,
+    fieldControlProps = props.fieldControlProps,
     other = _objectWithoutProperties(props, _excluded);
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
@@ -223,7 +224,7 @@ var DateField = /*#__PURE__*/forwardRef(function (props, ref) {
   })))), ___EmotionJSX(Box, _extends({
     isRow: true,
     variant: "forms.datePicker.inputField"
-  }, dateFieldProps, {
+  }, dateFieldProps, fieldControlProps, {
     ref: fieldRef,
     className: classNames
   }), ___EmotionJSX(FocusScope, null, _mapInstanceProperty(_context3 = isLocalEnUS ? enUSSegments : segments).call(_context3, function (segment, index) {
@@ -309,7 +310,9 @@ DateField.propTypes = {
   /** The ranges of unavailable dates passed  */
   unavailableRanges: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
   /** Props object that is spread directly into the input wrapper element. */
-  wrapperProps: PropTypes.shape({})
+  wrapperProps: PropTypes.shape({}),
+  /** Props object that spread into date segment wrapper element. */
+  fieldControlProps: PropTypes.shape({})
 };
 DateField.defaultProps = {
   hasAutoFocus: false,

package/lib/components/DatePicker/DatePicker.js

@@ -42,7 +42,9 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     minValue = props.minValue,
     status = props.status,
     value = props.value,
-    unavailableRanges = props.unavailableRanges;
+    unavailableRanges = props.unavailableRanges,
+    fieldControlProps = props.fieldControlProps,
+    calendarWrapperProps = props.calendarWrapperProps;
   var groupRef = useRef();
   var popoverRef = useRef();
 
@@ -98,12 +100,15 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     autoFocus: true,
     contain: true,
     restoreFocus: true
-  }, ___EmotionJSX(Calendar, calendarProps)));
+  }, ___EmotionJSX(Calendar, _extends({}, calendarProps, {
+    calendarWrapperProps: calendarWrapperProps
+  }))));
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DateField, _extends({}, getPendoID('DatePicker'), props, {
     ref: ref,
     buttonProps: buttonProps,
     fieldProps: fieldProps,
     groupProps: omit(groupProps, 'data-pendo-id'),
+    fieldControlProps: fieldControlProps,
     groupRef: groupRef,
     helperText: helperText,
     labelProps: labelProps,
@@ -168,7 +173,11 @@ DatePicker.propTypes = {
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
   /** The ranges of unavailable dates passed  */
-  unavailableRanges: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))
+  unavailableRanges: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  /** Props object that spread into date segment wrapper element. */
+  fieldControlProps: PropTypes.shape({}),
+  /** Props object that spread into calendar element. */
+  calendarWrapperProps: PropTypes.shape({})
 };
 DateField.defaultProps = {
   isDisabled: false,

package/lib/components/DatePicker/DatePicker.stories.js

@@ -252,4 +252,22 @@ Error.parameters = {
     type: 'figma',
     url: FIGMA_LINKS.datePicker.error
   }
+};
+export var CustomWidth = function CustomWidth(args) {
+  return ___EmotionJSX(DatePicker, _extends({}, args, {
+    fieldControlProps: {
+      sx: {
+        width: '500px'
+      }
+    },
+    calendarWrapperProps: {
+      sx: {
+        maxWidth: '500px',
+        width: '400px',
+        '&  tr': {
+          gap: '20px'
+        }
+      }
+    }
+  }));
 };

package/package.json

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