@pingux/astro 2.2.0 → 2.3.0-alpha.0

package/lib/components/DatePicker/DateSegment.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
+import { useFocusManager } from 'react-aria';
+import { useDateSegment } from '@react-aria/datepicker';
+import PropTypes from 'prop-types';
+import { Box } from '../../index';
+
+/**
+ * Each editable segment of date.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DateSegment = /*#__PURE__*/forwardRef(function (props, ref) {
+  var segment = props.segment,
+    state = props.state,
+    handlePaste = props.handlePaste;
+  var segmentRef = useRef();
+  // istanbul ignore next
+  useImperativeHandle(ref, function () {
+    return segmentRef.current;
+  });
+  var text = segment.text,
+    isPlaceholder = segment.isPlaceholder;
+  var _useDateSegment = useDateSegment(segment, state, segmentRef),
+    segmentProps = _useDateSegment.segmentProps;
+
+  /**
+   * Handler to autofocus segments when using deleting them
+   */
+  var focusManager = useFocusManager();
+  var handleKeyEvents = useCallback(function (e) {
+    if (e.key === 'Backspace' && isPlaceholder && (text === 'mm' || text === 'dd')) {
+      focusManager.focusPrevious();
+    }
+  }, [focusManager, segment, text, isPlaceholder]);
+  return ___EmotionJSX(Box, _extends({}, segmentProps, {
+    ref: segmentRef,
+    variant: "forms.datePicker.segment",
+    onKeyUp: handleKeyEvents,
+    onPaste: handlePaste
+  }), text === '/' ? '-' : text);
+});
+DateSegment.propTypes = {
+  /** slot for input that indicates each date segment */
+  segment: PropTypes.shape({
+    isPlaceholder: PropTypes.bool,
+    text: PropTypes.string,
+    placeholder: PropTypes.string,
+    value: PropTypes.number
+  }),
+  /** state returned by useDateField */
+  state: PropTypes.shape({}),
+  /**
+   * Handler that is called when a paste event is called.
+   * (e: PasteEvent) => void
+   */
+  handlePaste: PropTypes.func
+};
+export default DateSegment;

package/lib/components/DatePicker/index.js

@@ -0,0 +1 @@
+export { default } from './DatePicker';

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

@@ -13,6 +13,7 @@ import { badgeDeleteButton, deleteButton } from '../Badge/Badge.styles';
 import { defaultFocus } from '../Button/Buttons.styles';
 import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
 import { copyButton } from '../CopyText/CopyText.styles';
+import { containedIcon } from '../DatePicker/DatePicker.styles';
 import { hintButton } from '../HelpHint/HelpHint.styles';
 import { messageCloseButton } from '../Messages/Message.styles';
 import { modalCloseButton } from '../Modal/Modal.styles';
@@ -138,6 +139,9 @@ export default {
   },
   badgeDeleteButton: badgeDeleteButton,
   copyButton: copyButton,
+  datePicker: {
+    containedIcon: _objectSpread(_objectSpread({}, base), containedIcon)
+  },
   hintButton: _objectSpread(_objectSpread({}, base), hintButton),
   inverted: inverted,
   messageCloseButton: _objectSpread(_objectSpread({}, base), messageCloseButton),

package/lib/components/TextField/TextField.js

@@ -89,7 +89,7 @@ TextField.propTypes = _objectSpread(_objectSpread(_objectSpread({
    */
   onChange: PropTypes.func,
   /** The value for the input element (controlled). */
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
   autoComplete: PropTypes.string,
   /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */

package/lib/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -10,9 +10,9 @@ test('default useOverlayPanelState', function () {
       open: expect.any(Function),
       close: expect.any(Function),
       toggle: expect.any(Function),
-      isOpen: expect.any(Boolean),
       isTransitioning: expect.any(Boolean),
-      setOpen: expect.any(Function)
+      setOpen: expect.any(Function),
+      isOpen: expect.any(Boolean)
     },
     onClose: expect.any(Function),
     isTransitioning: expect.any(Boolean)

package/lib/index.js

@@ -26,6 +26,12 @@ export { default as Breadcrumbs } from './components/Breadcrumbs';
 export * from './components/Breadcrumbs';
 export { default as Button } from './components/Button';
 export * from './components/Button';
+export { default as Calendar } from './components/Calendar';
+export * from './components/Calendar';
+export { default as CalendarCell } from './components/Calendar/CalendarCell';
+export * from './components/Calendar/CalendarCell';
+export { default as CalendarGrid } from './components/Calendar/CalendarGrid';
+export * from './components/Calendar/CalendarGrid';
 export { default as Bulletin } from './components/Callout';
 export { default as Callout } from './components/Callout';
 export * from './components/Callout';
@@ -45,6 +51,8 @@ export * from './components/CollapsiblePanelItem';
 export { default as ColorField } from './components/ColorField';
 export { default as ComboBoxField } from './components/ComboBoxField';
 export { default as CopyText } from './components/CopyText';
+export { default as DatePicker } from './components/DatePicker';
+export { default as DateField } from './components/DatePicker/DateField';
 export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadcrumb';
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';

package/lib/styles/forms/index.js

@@ -12,6 +12,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import * as checkbox from '../../components/Checkbox/Checkbox.styles';
 import colorField from '../../components/ColorField/ColorField.styles';
 import comboBox from '../../components/ComboBox/ComboBox.styles';
+import datePicker from '../../components/DatePicker/DatePicker.styles';
 import fileInputField from '../../components/FileInputField/FileInputField.styles';
 import * as input from '../../components/Input/Input.styles';
 import * as label from '../../components/Label/Label.styles';
@@ -27,6 +28,7 @@ import textarea from '../../components/TextArea/TextArea.styles';
 export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
   colorField: colorField,
   comboBox: comboBox,
+  datePicker: datePicker,
   fileInputField: fileInputField
 }, input), label), {}, {
   numberField: numberField,

package/lib/styles/variants/variants.js

@@ -14,6 +14,8 @@ import accordion from '../../components/AccordionGroup/Accordion.styles';
 import box from '../../components/Box/Box.styles';
 import bracket from '../../components/Bracket/Bracket.styles';
 import breadcrumb from '../../components/Breadcrumbs/Breadcrumb.styles';
+import calendar from '../../components/Calendar/Calendar.styles';
+import callout from '../../components/Callout/Callout.styles';
 import codeView from '../../components/CodeView/CodeView.styles';
 import collapsiblePanel from '../../components/CollapsiblePanel/CollapsiblePanel.styles';
 import copyText from '../../components/CopyText/CopyText.styles';
@@ -41,13 +43,13 @@ import table from '../../components/Table/Table.styles';
 import * as tab from '../../components/Tabs/Tabs.style';
 import timeZone from '../../components/TimeZonePicker/TimeZone.styles';
 import tooltip from '../../components/TooltipTrigger/Tooltip.styles';
-import callout from './callout';
 export default _objectSpread({
   accordion: accordion,
   accordionGrid: accordionGrid,
   box: box,
   bracket: bracket,
   breadcrumb: breadcrumb,
+  calendar: calendar,
   callout: callout,
   codeView: codeView,
   collapsiblePanel: collapsiblePanel,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",
@@ -39,14 +39,17 @@
     "@emotion/react": "^11.1.1",
     "@emotion/styled": "^11.1.1",
     "@faker-js/faker": "~7.5.0",
+    "@internationalized/date": "3.0.1",
     "@mdx-js/react": "^1.6.22",
     "@pingux/mdi-react": "^1.0.0",
     "@react-aria/accordion": "~3.0.0-alpha.11",
     "@react-aria/breadcrumbs": "^3.1.4",
     "@react-aria/button": "^3.2.1",
+    "@react-aria/calendar": "^3.0.0",
     "@react-aria/checkbox": "^3.2.0",
     "@react-aria/color": "~3.0.0-beta.15",
     "@react-aria/combobox": "^3.0.0",
+    "@react-aria/datepicker": "^3.1.0",
     "@react-aria/dialog": "^3.1.2",
     "@react-aria/focus": "~3.8.0",
     "@react-aria/grid": "~3.4.1",
@@ -57,12 +60,15 @@
     "@react-aria/list": "3.0.0-nightly.3248",
     "@react-aria/listbox": "~3.3.1",
     "@react-aria/live-announcer": "~3.1.1",
+    "@react-aria/overlays": "^3.7.0",
     "@react-aria/selection": "~3.10.1",
     "@react-aria/utils": "~3.13.3",
     "@react-aria/virtualizer": "~3.5.0",
     "@react-aria/visually-hidden": "~3.6.0",
     "@react-spectrum/utils": "~3.6.1",
+    "@react-stately/calendar": "3.0.1",
     "@react-stately/color": "~3.1.1",
+    "@react-stately/datepicker": "^3.0.1",
     "@react-stately/grid": "~3.3.1",
     "@react-stately/layout": "~3.7.1",
     "@react-stately/list": "~3.4.1",