@pingux/astro 2.2.0 → 2.3.0-alpha.1

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

@@ -26,6 +26,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
+    helpHintProps = props.helpHintProps,
     slots = props.slots,
     status = props.status;
   var _useField = useField(props),
@@ -57,7 +58,8 @@ var TextField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: labelRef,
     sx: isLabelHigher && {
       gridRow: '1/5'
-    }
+    },
+    helpHintProps: helpHintProps
   })), ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldControlWrapper"
   }, fieldControlWrapperProps), slots === null || slots === void 0 ? void 0 : slots.beforeInput, ___EmotionJSX(Input, _extends({
@@ -89,7 +91,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. */
@@ -104,6 +106,8 @@ TextField.propTypes = _objectSpread(_objectSpread(_objectSpread({
   hintText: PropTypes.string,
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
+  /** Props object that is spread directly into the helphint element. */
+  helpHintProps: PropTypes.shape({}),
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
   /** Whether the input can be selected, but not changed by the user. */

package/lib/components/TextField/TextField.stories.js

@@ -187,6 +187,17 @@ export var WithHelpHint = function WithHelpHint() {
     label: "Example Label"
   });
 };
+export var WithHelpHintCustomWidth = function WithHelpHintCustomWidth() {
+  return ___EmotionJSX(TextField, {
+    id: "with-help-hint-id",
+    name: "custom-name",
+    hintText: "Example Hint",
+    label: "Example Label",
+    helpHintProps: {
+      width: '300px'
+    }
+  });
+};
 export var WithoutStatusIndicator = function WithoutStatusIndicator() {
   return ___EmotionJSX(TextField, {
     label: "Example Label",

package/lib/components/TooltipTrigger/Tooltip.js

@@ -4,7 +4,6 @@ var _excluded = ["children"];
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { useTooltip } from 'react-aria';
 import { TooltipContext } from '../../context/TooltipContext/index';
-import Box from '../Box';
 import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -20,11 +19,10 @@ var Tooltip = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return tooltipRef.current;
   });
-  return ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX(Text, _extends({
     ref: tooltipRef,
-    variant: "tooltip.container"
-  }, tooltipProps, others), ___EmotionJSX(Text, {
-    variant: "variants.tooltip.content"
-  }, children));
+    variant: "variants.tooltip.container",
+    p: "sm"
+  }, tooltipProps, others), children);
 });
 export default Tooltip;

package/lib/components/TooltipTrigger/Tooltip.styles.js

@@ -12,7 +12,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { baseBadge } from '../Badge/Badge.styles';
 import { text } from '../Button/Buttons.styles';
 var container = {
-  p: 'sm'
+  maxWidth: '11.3em',
+  maxHeight: '15em',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: '10',
+  WebkitBoxOrient: 'vertical',
+  display: '-webkit-box !important',
+  wordBreak: 'break-word',
+  '.is-right > * > &, .is-left > * > &': {
+    maxWidth: '24em',
+    maxHeight: '6.5em',
+    WebkitLineClamp: '4'
+  }
 };
 var badge = _objectSpread(_objectSpread({}, baseBadge), {}, {
   cursor: 'default',
@@ -40,25 +52,9 @@ var inline = _objectSpread(_objectSpread({}, text), {}, {
     textDecoration: 'inherit'
   }
 });
-var content = {
-  maxWidth: '10em',
-  maxHeight: '15em',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  WebkitLineClamp: '10',
-  WebkitBoxOrient: 'vertical',
-  display: '-webkit-box !important',
-  wordBreak: 'break-word',
-  '.is-right > * > &, .is-left > * > &': {
-    maxWidth: '24em',
-    maxHeight: '6.5em',
-    WebkitLineClamp: '4'
-  }
-};
 export default {
   container: container,
   badge: badge,
   button: button,
-  inline: inline,
-  content: content
+  inline: inline
 };

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.1",
   "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",