@pingux/astro 2.69.0 → 2.70.0-alpha.1

package/lib/components/RangeCalendar/RangeCalendarCell.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["state", "date", "currentMonth", "className"];
+import React, { forwardRef } from 'react';
+import { isSameDay, isSameMonth } from '@internationalized/date';
+import { useCalendarCell } from '@react-aria/calendar';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import { Box, TableCell } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RangeCalendarCell = /*#__PURE__*/forwardRef(function (props, ref) {
+  var state = props.state,
+    date = props.date,
+    currentMonth = props.currentMonth,
+    className = props.className,
+    others = _objectWithoutProperties(props, _excluded);
+  var cellRef = useLocalOrForwardRef(ref);
+  var _useCalendarCell = useCalendarCell({
+      date: date
+    }, state, cellRef),
+    cellProps = _useCalendarCell.cellProps,
+    buttonProps = _useCalendarCell.buttonProps,
+    isSelected = _useCalendarCell.isSelected,
+    isOutsideVisibleRange = _useCalendarCell.isOutsideVisibleRange,
+    isUnavailable = _useCalendarCell.isUnavailable,
+    formattedDate = _useCalendarCell.formattedDate,
+    isDisabled = _useCalendarCell.isDisabled;
+  var highlightedRange = state.highlightedRange;
+  var isOutsideMonth = !isSameMonth(currentMonth, date);
+
+  // The start and end date of the selected range will have
+  // an emphasized appearance.
+  var isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;
+  var isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = usePress({
+      ref: cellRef
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useFocusRing = useFocusRing({
+      within: true
+    }),
+    focusWithinProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var mergedProps = mergeProps(cellProps, hoverProps, pressProps, focusWithinProps);
+  var _useStatusClasses = useStatusClasses(className, {
+      isSelected: isSelected,
+      isExtreme: isDisabled,
+      isUnavailable: isUnavailable,
+      isPressed: isPressed,
+      isFocused: isFocusVisible,
+      isHovered: isHovered,
+      isOutsideVisibleRange: isOutsideVisibleRange,
+      isCompletelyDisabled: state.isDisabled,
+      isRangeEnds: isSelectionStart || isSelectionEnd,
+      isStartAndEnd: isSelectionStart && isSelectionEnd,
+      isSelectionStart: isSelectionStart,
+      isSelectionEnd: isSelectionEnd
+    }),
+    classNames = _useStatusClasses.classNames;
+  return ___EmotionJSX(TableCell, _extends({}, mergedProps, {
+    variant: "rangeCalendar.calendarCell"
+  }), ___EmotionJSX(Box, {
+    style: {
+      display: isOutsideMonth ? 'none' : 'flex'
+    }
+  }, ___EmotionJSX(Box, _extends({
+    variant: "rangeCalendar.calendarButton",
+    ref: cellRef
+  }, mergeProps(buttonProps, others), {
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    isUnavailable: isUnavailable,
+    className: classNames
+  }), formattedDate)));
+});
+export default RangeCalendarCell;

package/lib/components/RangeCalendar/RangeCalendarGrid.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
+import React from 'react';
+import { endOfMonth, getWeeksInMonth } from '@internationalized/date';
+import { useCalendarGrid } from '@react-aria/calendar';
+import { useLocale } from '@react-aria/i18n';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '../../index';
+import RangeCalendarCell from './RangeCalendarCell';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RangeCalendarGrid = function RangeCalendarGrid(props) {
+  var _context2, _context3;
+  var state = props.state,
+    _props$offset = props.offset,
+    offset = _props$offset === void 0 ? {} : _props$offset;
+  var visibleRange = state.visibleRange,
+    getDatesInWeek = state.getDatesInWeek;
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var startDate = visibleRange.start.add(offset);
+  var endDate = endOfMonth(startDate);
+  var _useCalendarGrid = useCalendarGrid({
+      startDate: startDate,
+      endDate: endDate
+    }, state),
+    gridProps = _useCalendarGrid.gridProps,
+    headerProps = _useCalendarGrid.headerProps,
+    weekDays = _useCalendarGrid.weekDays;
+  var weeksInMonth = getWeeksInMonth(startDate, locale);
+  var getKey = function getKey(day, index) {
+    var _context;
+    return _concatInstanceProperty(_context = "".concat(day, "-")).call(_context, index);
+  };
+  return ___EmotionJSX(Table, _extends({}, gridProps, {
+    role: "grid"
+  }), ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(weekDays).call(weekDays, function (day, index) {
+    return ___EmotionJSX(TableCell, {
+      isHeading: true,
+      variant: "rangeCalendar.columnHeader",
+      key: getKey(day, index),
+      role: "columnheader"
+    }, day);
+  }))), ___EmotionJSX(TableBody, {
+    variant: "rangeCalendar.calendarBody"
+  }, _mapInstanceProperty(_context2 = _Array$from(_keysInstanceProperty(_context3 = Array(weeksInMonth)).call(_context3))).call(_context2, function (weekIndex) {
+    var _context4;
+    return ___EmotionJSX(TableRow, {
+      key: weekIndex
+    }, _mapInstanceProperty(_context4 = getDatesInWeek(weekIndex, startDate)).call(_context4, function (date) {
+      return (date === null || date === void 0 ? void 0 : date.day) && ___EmotionJSX(RangeCalendarCell, {
+        key: date.toString(),
+        state: state,
+        date: date,
+        currentMonth: startDate
+      });
+    }));
+  })));
+};
+export default RangeCalendarGrid;

package/lib/components/RangeCalendar/RangeCalendarHeader.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import ChevronLeftIcon from '@pingux/mdi-react/ChevronLeftIcon';
+import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
+import { useDateFormatter } from '@react-aria/i18n';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { Box, Icon, IconButton, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var RangeCalendarHeader = function RangeCalendarHeader(props) {
+  var state = props.state,
+    calendarProps = props.calendarProps,
+    prevButtonProps = props.prevButtonProps,
+    nextButtonProps = props.nextButtonProps;
+  var monthDateFormatter = useDateFormatter({
+    month: 'long',
+    year: 'numeric',
+    timeZone: state.timeZone
+  });
+
+  // to remove warning for unknown event handler property `onFocusChange`.
+  delete prevButtonProps.onFocusChange;
+  delete nextButtonProps.onFocusChange;
+  return ___EmotionJSX(Box, {
+    variant: "rangeCalendar.calendarHeaderContainer",
+    isRow: true
+  }, ___EmotionJSX(VisuallyHidden, {
+    "aria-live": "assertive"
+  }, ___EmotionJSX(Text, null, calendarProps['aria-label'])), ___EmotionJSX(Box, {
+    isRow: true,
+    variant: "rangeCalendar.calendarHeader"
+  }, ___EmotionJSX(Box, {
+    style: {
+      position: 'absolute',
+      left: '10px'
+    }
+  }, ___EmotionJSX(IconButton, _extends({}, prevButtonProps, {
+    "aria-label": "Previous month navigation"
+  }), ___EmotionJSX(Icon, {
+    icon: ChevronLeftIcon,
+    size: 25,
+    title: {
+      name: 'Chevron Left Icon'
+    }
+  }))), ___EmotionJSX(Text, {
+    "aria-hidden": true,
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": 3,
+    fontWeight: 3
+  }, monthDateFormatter.format(state.visibleRange.start.toDate(state.timeZone)))), ___EmotionJSX(Box, {
+    isRow: true,
+    variant: "rangeCalendar.calendarHeader"
+  }, ___EmotionJSX(Text, {
+    "aria-hidden": true,
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": 3,
+    fontWeight: 3
+  }, monthDateFormatter.format(state.visibleRange.start.add({
+    months: 1
+  }).toDate(state.timeZone))), ___EmotionJSX(Box, {
+    style: {
+      position: 'absolute',
+      right: '10px'
+    }
+  }, ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
+    "aria-label": "Next month navigation"
+  }), ___EmotionJSX(Icon, {
+    icon: ChevronRightIcon,
+    size: 25,
+    title: {
+      name: 'Chevron Right Icon'
+    }
+  })))));
+};
+export default RangeCalendarHeader;

package/lib/components/RangeCalendar/index.js

@@ -0,0 +1,2 @@
+export { default } from './RangeCalendar';
+export * from './RangeCalendar';

package/lib/components/Tabs/Tabs.js

@@ -26,6 +26,7 @@ import { CollectionTab } from '../Tab';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TabsContext = /*#__PURE__*/React.createContext({});
 var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _state$selectedItem;
   var state = _ref.state,
     props = _objectWithoutProperties(_ref, _excluded);
   var children = props.children,
@@ -33,13 +34,18 @@ var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var tabPanelRef = useLocalOrForwardRef(ref);
   var _ref2 = useTabPanel(props, state, tabPanelRef),
     raTabPanelProps = _ref2.tabPanelProps;
+  if (state !== null && state !== void 0 && (_state$selectedItem = state.selectedItem) !== null && _state$selectedItem !== void 0 && (_state$selectedItem = _state$selectedItem.props) !== null && _state$selectedItem !== void 0 && _state$selectedItem.isListItem) {
+    var _tabPanelRef$current, _state$selectedItem2;
+    var parentTab = (_tabPanelRef$current = tabPanelRef.current) === null || _tabPanelRef$current === void 0 || (_tabPanelRef$current = _tabPanelRef$current.previousElementSibling) === null || _tabPanelRef$current === void 0 ? void 0 : _tabPanelRef$current.querySelector("[name=\"".concat(state === null || state === void 0 || (_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 || (_state$selectedItem2 = _state$selectedItem2.props) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.parentName, "\"]"));
+    raTabPanelProps['aria-labelledby'] = parentTab === null || parentTab === void 0 ? void 0 : parentTab.id;
+  }
   return ___EmotionJSX(Box, _extends({}, tabPanelProps, raTabPanelProps, {
     ref: tabPanelRef,
     role: "tabpanel"
   }), children);
 });
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
+  var _context4, _context5, _state$selectedItem3, _state$selectedItem4, _state$selectedItem5;
   var isDisabled = props.isDisabled,
     items = props.items,
     onSelectionChange = props.onSelectionChange,
@@ -71,8 +77,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     items: mode === 'list' ? allItems : items
   }));
   var _useTabList = useTabList(props, state, tabListRef),
-    raTabListProps = _useTabList.tabListProps; //= useTabList(props, state, tabListRef);
-
+    raTabListProps = _useTabList.tabListProps;
   return ___EmotionJSX(TabsContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
@@ -96,10 +101,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
     });
   })), ___EmotionJSX(TabPanel, {
-    key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
+    key: (_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.key,
     state: state,
     tabPanelProps: tabPanelProps
-  }, ((_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.props.children) || ((_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.props.content))));
+  }, ((_state$selectedItem4 = state.selectedItem) === null || _state$selectedItem4 === void 0 ? void 0 : _state$selectedItem4.props.children) || ((_state$selectedItem5 = state.selectedItem) === null || _state$selectedItem5 === void 0 ? void 0 : _state$selectedItem5.props.content))));
 });
 Tabs.defaultProps = {
   isDisabled: false,

package/lib/components/Tabs/Tabs.stories.js

@@ -212,12 +212,14 @@ export var WithList = function WithList() {
       key: 'tab1list',
       name: 'Tab 1 list',
       children: 'Tab 1 from list',
-      role: 'menuitemradio'
+      role: 'menuitemradio',
+      parentName: 'Tab 4'
     }, {
       key: 'tab2list',
       name: 'Tab 2 list',
       children: 'Tab 2 from list',
-      role: 'menuitemradio'
+      role: 'menuitemradio',
+      parentName: 'Tab 4'
     }]
   }]);
   return ___EmotionJSX(Tabs, {

package/lib/index.js

@@ -59,6 +59,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 DataTable } from './components/DataTable';
+export * from './components/DataTable';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DateField } from './components/DatePicker/DateField';
 export { default as EditButton } from './components/EditButton';
@@ -66,6 +68,7 @@ export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadc
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
 export { default as FileInputField } from './components/FileInputField';
+export { default as Grid } from './components/Grid';
 export { default as HelpHint } from './components/HelpHint';
 export * from './components/HelpHint';
 export { default as Icon } from './components/Icon';
@@ -131,6 +134,8 @@ export { default as RadioField } from './components/RadioField';
 export * from './components/RadioField';
 export { default as RadioGroupField } from './components/RadioGroupField';
 export * from './components/RadioGroupField';
+export { default as RangeCalendar } from './components/RangeCalendar';
+export * from './components/RangeCalendar';
 export { default as RequirementsList } from './components/RequirementsList';
 export * from './components/RequirementsList';
 export { default as RockerButton } from './components/RockerButton';
@@ -183,8 +188,6 @@ export * from './components/TreeView';
 
 /* eslint-enable import/export */
 
-export { default as DataTable } from './components/DataTable';
-export * from './components/DataTable';
 export * from './types';
 export { OverlayProvider, useOverlayPosition, useOverlayTrigger } from 'react-aria';
 export { Item, Section, useOverlayTriggerState, useTreeData } from 'react-stately';

package/lib/styles/theme.js

@@ -14,7 +14,7 @@ import colors, { accent, focus, line, shadow } from './colors';
 import forms from './forms';
 import spacing from './spacing';
 import { fontSizes, fontWeights, textColors } from './text';
-import { badges, buttons, cards, images, links, text, variants } from './variants';
+import { badges, buttons, cards, grids, images, links, text, variants } from './variants';
 export default {
   name: 'Astro',
   space: spacing,
@@ -49,6 +49,7 @@ export default {
   forms: forms,
   text: text,
   images: images,
+  grids: grids,
   buttons: buttons,
   badges: badges,
   cards: cards,

package/lib/styles/variants/index.js

@@ -16,6 +16,7 @@ export var buttons = _objectSpread(_objectSpread({}, defaultButtons), {}, {
 });
 export { default as badges } from '../../components/Badge/Badge.styles';
 export { default as cards } from '../../components/Card/Card.styles';
+export { default as grids } from '../../components/Grid/Grid.styles';
 export { default as images } from '../../components/Image/Image.styles';
 export { default as links } from '../../components/Link/Link.styles';
 export * from '../../components/Text/Text.styles';

package/lib/styles/variants/variants.js

@@ -39,6 +39,7 @@ import overlayPanel from '../../components/OverlayPanel/OverlayPanel.styles';
 import panelHeader from '../../components/PanelHeader/PanelHeader.styles';
 import popoverMenu from '../../components/PopoverMenu/PopoverMenu.styles';
 import progressBar from '../../components/ProgressBar/ProgressBar.styles';
+import rangeCalendar from '../../components/RangeCalendar/RangeCalendar.styles';
 import rockerButton from '../../components/RockerButton/RockerButton.styles';
 import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
 import separator from '../../components/Separator/Separator.styles';
@@ -56,6 +57,7 @@ export default _objectSpread({
   breadcrumb: breadcrumb,
   buttonBar: buttonBar,
   calendar: calendar,
+  rangeCalendar: rangeCalendar,
   callout: callout,
   codeView: codeView,
   collapsiblePanel: collapsiblePanel,

package/lib/types/grid.js

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

package/lib/types/index.js

@@ -13,6 +13,7 @@ export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';
 export * from './fieldHelperText';
+export * from './grid';
 export * from './helpHint';
 export * from './icon';
 export * from './iconBadge';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.69.0",
+  "version": "2.70.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -41,17 +41,17 @@
     "@emotion/react": "^11.1.1",
     "@emotion/styled": "^11.1.1",
     "@faker-js/faker": "~7.5.0",
-    "@internationalized/date": "3.5.0",
+    "@internationalized/date": "^3.5.3",
     "@mdx-js/react": "^1.6.22",
     "@pingux/mdi-react": "^1.2.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/calendar": "^3.5.7",
     "@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/datepicker": "^3.10.0",
     "@react-aria/dialog": "^3.1.2",
     "@react-aria/dnd": "^3.5.0",
     "@react-aria/focus": "~3.8.0",
@@ -74,26 +74,29 @@
     "@react-aria/virtualizer": "~3.8.0",
     "@react-aria/visually-hidden": "~3.6.0",
     "@react-spectrum/utils": "~3.6.1",
-    "@react-stately/calendar": "3.0.1",
+    "@react-stately/calendar": "^3.5.0",
     "@react-stately/color": "~3.1.1",
-    "@react-stately/datepicker": "^3.0.1",
+    "@react-stately/datepicker": "^3.9.3",
     "@react-stately/dnd": "^3.2.6",
     "@react-stately/grid": "~3.3.1",
     "@react-stately/layout": "^3.13.4",
-    "@react-stately/list": "~3.4.1",
+    "@react-stately/list": "^3.10.4",
     "@react-stately/overlays": "^3.6.4",
     "@react-stately/select": "^3.6.4",
-    "@react-stately/selection": "^3.14.2",
+    "@react-stately/selection": "^3.15.0",
     "@react-stately/table": "^3.9.0",
     "@react-stately/tabs": "^3.6.3",
     "@react-stately/toggle": "^3.7.3",
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
     "@react-types/accordion": "^3.0.0-alpha.18",
+    "@react-types/button": "^3.9.3",
+    "@react-types/calendar": "^3.4.5",
     "@react-types/checkbox": "^3.8.0",
+    "@react-types/datepicker": "^3.7.3",
     "@react-types/grid": "^3.2.4",
     "@react-types/select": "^3.9.1",
-    "@react-types/shared": "^3.22.0",
+    "@react-types/shared": "^3.23.1",
     "@react-types/table": "^3.9.3",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",
@@ -123,7 +126,7 @@
     "react-calendar": "^3.4.0",
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",
-    "react-stately": "^3.20.0",
+    "react-stately": "^3.31.0",
     "recharts": "^2.7.0",
     "regenerator-runtime": "^0.13.7",
     "styled-system": "^5.1.5",