@pingux/astro 2.64.0 → 2.65.0-alpha.0

package/lib/cjs/components/ArrayField/ArrayField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ArrayFieldProps } from '../../types';
+declare const ArrayField: React.ForwardRefExoticComponent<ArrayFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default ArrayField;

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -24,14 +24,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
-var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _react2 = require("@emotion/react");
 var _excluded = ["addButtonLabel", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
   _excluded2 = ["id", "onComponentRender", "fieldValue"];
@@ -91,7 +88,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (typeof event !== 'string') {
       tempValue = event.target.value;
     }
-    if (isControlled) {
+    if (isControlled && onChangeRef.current) {
       onChangeRef.current(mapArrayFieldWithNewValue(valueRef.current, tempValue, fieldId));
     } else {
       setFieldValues(function (oldValues) {
@@ -100,7 +97,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   }, [isControlled, mapArrayFieldWithNewValue]);
   var onFieldDelete = (0, _react.useCallback)(function (fieldId) {
-    if (isControlled) {
+    if (isControlled && onDeleteRef.current) {
       onDeleteRef.current(fieldId);
     } else {
       setFieldValues(function (oldValues) {
@@ -113,7 +110,7 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [isControlled]);
   var onFieldAdd = (0, _react.useCallback)(function () {
     if (isControlled) {
-      return onAddRef.current();
+      return onAddRef.current && onAddRef.current();
     }
     return setFieldValues(function (oldValues) {
       var _context;
@@ -128,7 +125,10 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (onComponentRender) {
       return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps);
     }
-    return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+    if (renderField) {
+      return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+    }
+    return null;
   }, [onFieldValueChange, onFieldDelete, renderField, isDisabled]);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
@@ -167,42 +167,9 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     color: "active"
   }, addButtonLabel)));
 });
-ArrayField.propTypes = _objectSpread(_objectSpread({
-  /** Label for add button */
-  addButtonLabel: _propTypes["default"].string,
-  /** The default value for the array input field (uncontrolled). */
-  defaultValue: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    id: _propTypes["default"].string,
-    value: _propTypes["default"].string
-  })),
-  /** The default value of the array input field (controlled). */
-  value: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    id: _propTypes["default"].string,
-    value: _propTypes["default"].string
-  })),
-  /** The rendered label for the field. */
-  label: _propTypes["default"].node,
-  /** Props object that is spread directly into the label element. */
-  labelProps: _propTypes["default"].shape({}),
-  /** Props object that is spread directly into the wrapper rendering the fields. */
-  fieldControlWrapperProps: _propTypes["default"].shape({}),
-  /** Text to display before add button. Useful for errors or other info. */
-  helperText: _propTypes["default"].node,
-  /** Callback for changing array field data  */
-  onChange: _propTypes["default"].func,
-  /** Callback for adding new empty field */
-  onAdd: _propTypes["default"].func,
-  /** Callback for deleting a field */
-  onDelete: _propTypes["default"].func,
-  /** Render prop to display an input field */
-  renderField: _propTypes["default"].func,
-  /** Determines the maximum number of items */
-  maxSize: _isValidPositiveInt["default"],
-  /** Text to display when the maximum number of items is reached */
-  maxSizeText: _propTypes["default"].node
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 ArrayField.defaultProps = {
-  addButtonLabel: '+ Add'
+  addButtonLabel: '+ Add',
+  status: _statuses["default"].DEFAULT
 };
 var _default = ArrayField;
 exports["default"] = _default;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { ArrayFieldProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Uncontrolled: StoryFn<ArrayFieldProps>;
+export declare const Controlled: StoryFn<ArrayFieldProps>;
+export declare const WithLimitedItemsNumber: StoryFn<ArrayFieldProps>;
+export declare const Customizations: ({ ...args }: {
+    [x: string]: any;
+}) => React.JSX.Element;

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

@@ -63,7 +63,7 @@ var _default = {
     },
     maxSize: {
       control: {
-        type: 'number'
+        type: 'text'
       }
     },
     maxSizeText: {
@@ -286,7 +286,9 @@ var Customizations = function Customizations(_ref5) {
       maxHeight: '150px'
     },
     defaultValue: defaultData,
-    width: "450px",
+    sx: {
+      width: '450px'
+    },
     labelProps: {
       hintText: 'Example Hint',
       isRequired: true,

package/lib/cjs/components/ArrayField/ArrayField.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -201,9 +201,7 @@ test('creates empty field when no data passed', function () {
   expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();
 });
 test('check if tooltip on delete button renders on hover', function () {
-  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayFieldDeleteButton["default"], {
-    renderField: renderField
-  }));
+  (0, _testWrapper.render)((0, _react2.jsx)(_ArrayFieldDeleteButton["default"], null));
   var button = _testWrapper.screen.getByRole('button');
   _testWrapper.fireEvent.mouseMove(button);
   _testWrapper.fireEvent.mouseEnter(button);

package/lib/cjs/components/ArrayField/ArrayFieldDeleteButton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ArrayFieldDeleteButtonProps } from '../../types';
+declare const ArrayFieldDeleteButton: FC<ArrayFieldDeleteButtonProps>;
+export default ArrayFieldDeleteButton;

package/lib/cjs/components/ArrayField/ArrayFieldDeleteButton.js

@@ -8,7 +8,6 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _react2 = require("@emotion/react");
@@ -18,7 +17,7 @@ var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
     onDelete = _ref.onDelete;
   return (0, _react2.jsx)(_IconButton["default"], {
     onPress: function onPress() {
-      return onDelete(id);
+      return onDelete && onDelete(id);
     },
     isDisabled: isDisabled,
     "aria-label": "delete-button",
@@ -39,10 +38,5 @@ var ArrayFieldDeleteButton = function ArrayFieldDeleteButton(_ref) {
     }
   }));
 };
-ArrayFieldDeleteButton.propTypes = {
-  id: _propTypes["default"].number,
-  isDisabled: _propTypes["default"].bool,
-  onDelete: _propTypes["default"].func
-};
 var _default = ArrayFieldDeleteButton;
 exports["default"] = _default;

package/lib/cjs/components/ArrayField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayField';
+export { default as ArrayFieldDeleteButton } from './ArrayFieldDeleteButton';

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

@@ -18,73 +18,73 @@ declare const _default: {
     };
     argTypes: {
         'aria-controls': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-describedby': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-details': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-errormessage': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-label': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-labelledby': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -130,7 +130,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       transform: 'rotate(180deg)'
     } : null,
     title: {
-      name: 'Menu Down Icon'
+      name: 'Menu Down'
     }
   }))));
   return (0, _react2.jsx)(_reactAria.FocusRing, {

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

@@ -38,49 +38,49 @@ declare const _default: {
             description: string;
         };
         'aria-label': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-labelledby': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-describedby': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-details': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
@@ -99,25 +99,25 @@ declare const _default: {
             description: string;
         };
         'aria-controls': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;
         };
         'aria-errormessage': {
-            type: {
-                summary: string;
-            };
             control: {
                 type: string;
             };
             table: {
+                type: {
+                    summary: string;
+                };
                 category: string;
             };
             description: string;

package/lib/cjs/components/ListView/listViewAttributes.d.ts

@@ -26,49 +26,49 @@ export declare const listViewArgTypes: {
         description: string;
     };
     'aria-label': {
-        type: {
-            summary: string;
-        };
         control: {
             type: string;
         };
         table: {
+            type: {
+                summary: string;
+            };
             category: string;
         };
         description: string;
     };
     'aria-labelledby': {
-        type: {
-            summary: string;
-        };
         control: {
             type: string;
         };
         table: {
+            type: {
+                summary: string;
+            };
             category: string;
         };
         description: string;
     };
     'aria-describedby': {
-        type: {
-            summary: string;
-        };
         control: {
             type: string;
         };
         table: {
+            type: {
+                summary: string;
+            };
             category: string;
         };
         description: string;
     };
     'aria-details': {
-        type: {
-            summary: string;
-        };
         control: {
             type: string;
         };
         table: {
+            type: {
+                summary: string;
+            };
             category: string;
         };
         description: string;
@@ -87,25 +87,25 @@ export declare const listViewArgTypes: {
         description: string;
     };
     'aria-controls': {
-        type: {
-            summary: string;
-        };
         control: {
             type: string;
         };
         table: {
+            type: {
+                summary: string;
+            };
             category: string;
         };
         description: string;
     };
     'aria-errormessage': {
-        type: {
-            summary: string;
-        };
         control: {
             type: string;
         };
         table: {
+            type: {
+                summary: string;
+            };
             category: string;
         };
         description: string;

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { ThemeUICSSObject } from 'theme-ui';
+import { LabelProps, Status, ValidPositiveInteger } from '.';
+type RenderFieldFunction = (id: string, fieldValue: string, onFieldValueChange: (e: React.ChangeEvent<HTMLInputElement> | string, fieldId: string) => void, onFieldDelete: (fieldId: string) => void, isDisabled: boolean, otherFieldProps?: Record<string, string>) => React.ReactNode;
+export interface FieldValue {
+    id: string;
+    value?: string;
+    onComponentRender?: RenderFieldFunction;
+    fieldValue?: string;
+}
+export interface ArrayFieldProps {
+    /** Label for add button */
+    addButtonLabel?: string;
+    /** The default value for the array input field (uncontrolled). */
+    defaultValue?: FieldValue[];
+    /** The default value of the array input field (controlled). */
+    value?: FieldValue[];
+    /** The rendered label for the field. */
+    label?: React.ReactNode;
+    /** Props object that is spread directly into the label element. */
+    labelProps?: LabelProps;
+    /** Text to display before add button. Useful for errors or other info. */
+    helperText?: React.ReactNode;
+    /** Callback for changing array field data  */
+    onChange?: (value: FieldValue[]) => void;
+    /** Callback for adding new empty field */
+    onAdd?: () => void;
+    /** Callback for deleting a field */
+    onDelete?: (fieldId: string) => void;
+    /** Render prop to display an input field */
+    renderField?: RenderFieldFunction;
+    /** Determines the maximum number of items */
+    maxSize?: ValidPositiveInteger;
+    /** Text to display when the maximum number of items is reached */
+    maxSizeText?: React.ReactNode;
+    sx?: ThemeUICSSObject;
+    status?: Status;
+    /** Props object that is spread directly into the wrapper rendering the fields. */
+    fieldControlWrapperProps?: Record<string, string>;
+}
+export interface ArrayFieldDeleteButtonProps {
+    id?: number;
+    isDisabled?: boolean;
+    onDelete?: (id?: number) => void;
+}
+export {};

package/lib/cjs/types/arrayField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,4 +1,5 @@
 import { Status } from './item';
 import { DOMAttributes, StyleProps } from './shared';
-export interface CalloutProps extends StyleProps, DOMAttributes, Status {
+export interface CalloutProps extends StyleProps, DOMAttributes {
+    status?: Status;
 }

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

@@ -2,7 +2,8 @@ import React from 'react';
 import { TestingAttributes } from './shared/test';
 import { Status } from './item';
 import { TextProps } from './text';
-export interface FieldHelperTextProps extends TestingAttributes, TextProps, Status {
+export interface FieldHelperTextProps extends TestingAttributes, TextProps {
     className?: string;
+    status?: Status;
     children?: React.ReactNode;
 }

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

@@ -1,3 +1,4 @@
+export * from './arrayField';
 export * from './badge';
 export * from './box';
 export * from './bracket';