@pingux/astro 2.69.0 → 2.70.0-alpha.1

package/lib/cjs/components/RangeCalendar/RangeCalendarGrid.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RangeCalendarGridProps } from '../../types/calendar';
+declare const RangeCalendarGrid: (props: RangeCalendarGridProps) => React.JSX.Element;
+export default RangeCalendarGrid;

package/lib/cjs/components/RangeCalendar/RangeCalendarGrid.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/keys"));
+var _react = _interopRequireDefault(require("react"));
+var _date = require("@internationalized/date");
+var _calendar = require("@react-aria/calendar");
+var _i18n = require("@react-aria/i18n");
+var _index = require("../../index");
+var _RangeCalendarCell = _interopRequireDefault(require("./RangeCalendarCell"));
+var _react2 = require("@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 = (0, _i18n.useLocale)(),
+    locale = _useLocale.locale;
+  var startDate = visibleRange.start.add(offset);
+  var endDate = (0, _date.endOfMonth)(startDate);
+  var _useCalendarGrid = (0, _calendar.useCalendarGrid)({
+      startDate: startDate,
+      endDate: endDate
+    }, state),
+    gridProps = _useCalendarGrid.gridProps,
+    headerProps = _useCalendarGrid.headerProps,
+    weekDays = _useCalendarGrid.weekDays;
+  var weeksInMonth = (0, _date.getWeeksInMonth)(startDate, locale);
+  var getKey = function getKey(day, index) {
+    var _context;
+    return (0, _concat["default"])(_context = "".concat(day, "-")).call(_context, index);
+  };
+  return (0, _react2.jsx)(_index.Table, (0, _extends2["default"])({}, gridProps, {
+    role: "grid"
+  }), (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(weekDays).call(weekDays, function (day, index) {
+    return (0, _react2.jsx)(_index.TableCell, {
+      isHeading: true,
+      variant: "rangeCalendar.columnHeader",
+      key: getKey(day, index),
+      role: "columnheader"
+    }, day);
+  }))), (0, _react2.jsx)(_index.TableBody, {
+    variant: "rangeCalendar.calendarBody"
+  }, (0, _map["default"])(_context2 = (0, _from["default"])((0, _keys["default"])(_context3 = Array(weeksInMonth)).call(_context3))).call(_context2, function (weekIndex) {
+    var _context4;
+    return (0, _react2.jsx)(_index.TableRow, {
+      key: weekIndex
+    }, (0, _map["default"])(_context4 = getDatesInWeek(weekIndex, startDate)).call(_context4, function (date) {
+      return (date === null || date === void 0 ? void 0 : date.day) && (0, _react2.jsx)(_RangeCalendarCell["default"], {
+        key: date.toString(),
+        state: state,
+        date: date,
+        currentMonth: startDate
+      });
+    }));
+  })));
+};
+var _default = RangeCalendarGrid;
+exports["default"] = _default;

package/lib/cjs/components/RangeCalendar/RangeCalendarHeader.d.ts

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

package/lib/cjs/components/RangeCalendar/RangeCalendarHeader.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ChevronLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronLeftIcon"));
+var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
+var _i18n = require("@react-aria/i18n");
+var _visuallyHidden = require("@react-aria/visually-hidden");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var RangeCalendarHeader = function RangeCalendarHeader(props) {
+  var state = props.state,
+    calendarProps = props.calendarProps,
+    prevButtonProps = props.prevButtonProps,
+    nextButtonProps = props.nextButtonProps;
+  var monthDateFormatter = (0, _i18n.useDateFormatter)({
+    month: 'long',
+    year: 'numeric',
+    timeZone: state.timeZone
+  });
+
+  // to remove warning for unknown event handler property `onFocusChange`.
+  delete prevButtonProps.onFocusChange;
+  delete nextButtonProps.onFocusChange;
+  return (0, _react2.jsx)(_index.Box, {
+    variant: "rangeCalendar.calendarHeaderContainer",
+    isRow: true
+  }, (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
+    "aria-live": "assertive"
+  }, (0, _react2.jsx)(_index.Text, null, calendarProps['aria-label'])), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    variant: "rangeCalendar.calendarHeader"
+  }, (0, _react2.jsx)(_index.Box, {
+    style: {
+      position: 'absolute',
+      left: '10px'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, prevButtonProps, {
+    "aria-label": "Previous month navigation"
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronLeftIcon["default"],
+    size: 25,
+    title: {
+      name: 'Chevron Left Icon'
+    }
+  }))), (0, _react2.jsx)(_index.Text, {
+    "aria-hidden": true,
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": 3,
+    fontWeight: 3
+  }, monthDateFormatter.format(state.visibleRange.start.toDate(state.timeZone)))), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    variant: "rangeCalendar.calendarHeader"
+  }, (0, _react2.jsx)(_index.Text, {
+    "aria-hidden": true,
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": 3,
+    fontWeight: 3
+  }, monthDateFormatter.format(state.visibleRange.start.add({
+    months: 1
+  }).toDate(state.timeZone))), (0, _react2.jsx)(_index.Box, {
+    style: {
+      position: 'absolute',
+      right: '10px'
+    }
+  }, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+    "aria-label": "Next month navigation"
+  }), (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronRightIcon["default"],
+    size: 25,
+    title: {
+      name: 'Chevron Right Icon'
+    }
+  })))));
+};
+var _default = RangeCalendarHeader;
+exports["default"] = _default;

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

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

package/lib/cjs/components/RangeCalendar/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _context;
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _RangeCalendar["default"];
+  }
+});
+var _RangeCalendar = _interopRequireWildcard(require("./RangeCalendar"));
+_forEachInstanceProperty(_context = _Object$keys(_RangeCalendar)).call(_context, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RangeCalendar[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _RangeCalendar[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/cjs/components/Tabs/Tabs.js

@@ -40,6 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var TabsContext = /*#__PURE__*/_react["default"].createContext({});
 exports.TabsContext = TabsContext;
 var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _state$selectedItem;
   var state = _ref.state,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var children = props.children,
@@ -47,13 +48,18 @@ var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var tabPanelRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _ref2 = (0, _reactAria.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 (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, tabPanelProps, raTabPanelProps, {
     ref: tabPanelRef,
     role: "tabpanel"
   }), children);
 });
 var Tabs = /*#__PURE__*/(0, _react.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,
@@ -85,8 +91,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     items: mode === 'list' ? allItems : items
   }));
   var _useTabList = (0, _reactAria.useTabList)(props, state, tabListRef),
-    raTabListProps = _useTabList.tabListProps; //= useTabList(props, state, tabListRef);
-
+    raTabListProps = _useTabList.tabListProps;
   return (0, _react2.jsx)(TabsContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
@@ -110,10 +115,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
     });
   })), (0, _react2.jsx)(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/cjs/components/Tabs/Tabs.stories.js

@@ -235,12 +235,14 @@ 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 (0, _react2.jsx)(_index.Tabs, {

package/lib/cjs/index.d.ts

@@ -55,6 +55,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';
@@ -62,6 +64,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';
@@ -127,6 +130,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';
@@ -176,8 +181,6 @@ export { default as TooltipTrigger } from './components/TooltipTrigger';
 export * from './components/TooltipTrigger';
 export { default as TreeView } from './components/TreeView';
 export * from './components/TreeView';
-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';