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

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/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/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.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",