@pingux/astro 2.78.0-alpha.2 → 2.78.0-alpha.3

package/lib/cjs/components/Icon/Icon.js

@@ -34,7 +34,7 @@ var Icon = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     sizeProps = _useTShirtSize.sizeProps;
   var title = props.title || ((0, _typeof2["default"])(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
-  } : null);
+  } : '');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: IconComponent,
     ref: ref,

package/lib/cjs/components/Stepper/Stepper.js

@@ -29,7 +29,7 @@ var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/p
 var _Line = _interopRequireDefault(require("./Line"));
 var _Stepper = require("./Stepper.constants");
 var _react2 = require("@emotion/react");
-var _excluded = ["activeStep", "onStepChange", "tabListProps"];
+var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps"];
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -41,6 +41,7 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var activeStep = props.activeStep,
     onStepChange = props.onStepChange,
     tabListProps = props.tabListProps,
+    tooltipProps = props.tooltipProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _list.useSingleSelectListState)(props);
   var getStatus = function getStatus(i) {
@@ -88,7 +89,8 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       title: step,
       "aria-label": textValue,
       content: item.rendered,
-      separator: !isFirst && line
+      separator: !isFirst && line,
+      tooltipTriggerProps: tooltipProps
     });
     isFirst = isFirst && !container;
     return container;
@@ -124,7 +126,8 @@ Stepper.propTypes = {
   */
   onStepChange: _propTypes["default"].func,
   /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: _propTypes["default"].shape({})
+  tabListProps: _propTypes["default"].shape({}),
+  tooltipProps: _propTypes["default"].shape({})
 };
 Stepper.defaultProps = {
   activeStep: 1

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Panel = exports.DisabledToolTips = exports.Default = exports.ControlledStepper = void 0;
+exports["default"] = exports.WithCustomTooltip = exports.Panel = exports.DisabledToolTips = exports.Default = exports.ControlledStepper = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -180,6 +180,46 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.stepper["default"]
   }
 };
+var WithCustomTooltip = function WithCustomTooltip(args) {
+  return (0, _react2.jsx)(_index.Stepper, (0, _extends2["default"])({}, args, {
+    items: steps,
+    tooltipProps: {
+      direction: 'left',
+      offset: 15
+    }
+  }), (0, _react2.jsx)(_reactStately.Item, {
+    key: "step1",
+    textValue: "Duis Aute"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_reactStately.Item, {
+    key: "step2",
+    textValue: "Lorem Ipsum"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_reactStately.Item, {
+    key: "step3",
+    textValue: "Excepteur Sint"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.contentContainer
+  }, (0, _react2.jsx)(_index.Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
+    fontSize: "md"
+  }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
+};
+exports.WithCustomTooltip = WithCustomTooltip;
 var ControlledStepper = function ControlledStepper() {
   var _useState = (0, _react.useState)(2),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),

package/lib/cjs/components/Tab/Tab.js

@@ -34,8 +34,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabsDisabled = props.isDisabled,
     orientation = props.orientation,
     mode = props.mode,
-    slots = props.slots,
-    tooltipTriggerProps = props.tooltipTriggerProps;
+    slots = props.slots;
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
@@ -69,11 +68,10 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab"
-    // title={itemProps?.titleAttr || undefined}
   }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), {
-    // {...otherItemProps}
     ref: tabRef
   }, itemProps, {
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
     role: "tab"
   }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "tabLabel"
@@ -88,7 +86,7 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), itemProps));
   }
   if (mode === 'tooltip') {
-    return (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
     }), (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)("span", null, tab)), (0, _react2.jsx)(_.Tooltip, null, (itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue) || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.title))));
   }

package/lib/cjs/hooks/useField/useField.d.ts

@@ -142,6 +142,10 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         isSelected?: boolean | undefined;
         isUnavailable?: boolean | undefined;
         hidden?: boolean | undefined;
+        title?: string | {
+            id?: string | undefined;
+            name: string;
+        } | undefined;
         variant?: string | undefined;
         as?: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.ComponentClass<any, any> | React.FunctionComponent<any> | null | undefined;
         style?: string | React.CSSProperties | undefined;

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

@@ -1,5 +1,9 @@
 import { StylePropertyValue } from 'theme-ui';
 import { DOMAttributes, StyleProps } from './shared';
+type BoxIconTitleProps = {
+    id?: string;
+    name: string;
+};
 export interface BoxProps extends StyleProps, DOMAttributes {
     id?: string;
     /** The background color of the box. */
@@ -14,4 +18,6 @@ export interface BoxProps extends StyleProps, DOMAttributes {
     isSelected?: boolean;
     isUnavailable?: boolean;
     hidden?: boolean;
+    title?: string | BoxIconTitleProps;
 }
+export {};

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

@@ -2,6 +2,7 @@ import { ElementType, ReactNode } from 'react';
 import { ThemeUICSSProperties } from 'theme-ui';
 import { TestingAttributes } from './shared/test';
 import { DOMAttributes, OrientationProps, StyleProps } from './shared';
+import { TooltipTriggerProps } from './tooltipTrigger';
 export interface TabProps extends StyleProps, DOMAttributes, OrientationProps, TestingAttributes {
     isDisabled?: boolean;
     item: {
@@ -17,6 +18,7 @@ export interface TabProps extends StyleProps, DOMAttributes, OrientationProps, T
             title: string;
             separator: Element | boolean;
             list: object[];
+            tooltipTriggerProps?: TooltipTriggerProps;
         };
         rendered?: string | ReactNode;
     };

package/lib/components/Icon/Icon.js

@@ -23,7 +23,7 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
     sizeProps = _useTShirtSize.sizeProps;
   var title = props.title || (_typeof(IconComponent) === 'object' && 'type' in IconComponent ? {
     name: IconComponent.type.name
-  } : null);
+  } : '');
   return ___EmotionJSX(Box, _extends({
     as: IconComponent,
     ref: ref,

package/lib/components/Stepper/Stepper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["activeStep", "onStepChange", "tabListProps"];
+var _excluded = ["activeStep", "onStepChange", "tabListProps", "tooltipProps"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -30,6 +30,7 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
   var activeStep = props.activeStep,
     onStepChange = props.onStepChange,
     tabListProps = props.tabListProps,
+    tooltipProps = props.tooltipProps,
     others = _objectWithoutProperties(props, _excluded);
   var state = useSingleSelectListState(props);
   var getStatus = function getStatus(i) {
@@ -77,7 +78,8 @@ var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
       title: step,
       "aria-label": textValue,
       content: item.rendered,
-      separator: !isFirst && line
+      separator: !isFirst && line,
+      tooltipTriggerProps: tooltipProps
     });
     isFirst = isFirst && !container;
     return container;
@@ -113,7 +115,8 @@ Stepper.propTypes = {
   */
   onStepChange: PropTypes.func,
   /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: PropTypes.shape({})
+  tabListProps: PropTypes.shape({}),
+  tooltipProps: PropTypes.shape({})
 };
 Stepper.defaultProps = {
   activeStep: 1

package/lib/components/Stepper/Stepper.stories.js

@@ -164,6 +164,45 @@ Default.parameters = {
     url: FIGMA_LINKS.stepper["default"]
   }
 };
+export var WithCustomTooltip = function WithCustomTooltip(args) {
+  return ___EmotionJSX(Stepper, _extends({}, args, {
+    items: steps,
+    tooltipProps: {
+      direction: 'left',
+      offset: 15
+    }
+  }), ___EmotionJSX(Item, {
+    key: "step1",
+    textValue: "Duis Aute"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
+  }, ___EmotionJSX(Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Duis Aute"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
+    key: "step2",
+    textValue: "Lorem Ipsum"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
+  }, ___EmotionJSX(Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Lorem Ipsum"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
+    key: "step3",
+    textValue: "Excepteur Sint"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
+  }, ___EmotionJSX(Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Excepteur Sint"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
+};
 export var ControlledStepper = function ControlledStepper() {
   var _useState = useState(2),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/components/Tab/Tab.js

@@ -21,8 +21,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
     tabsDisabled = props.isDisabled,
     orientation = props.orientation,
     mode = props.mode,
-    slots = props.slots,
-    tooltipTriggerProps = props.tooltipTriggerProps;
+    slots = props.slots;
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
@@ -56,11 +55,10 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "tab"
-    // title={itemProps?.titleAttr || undefined}
   }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), {
-    // {...otherItemProps}
     ref: tabRef
   }, itemProps, {
+    title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue,
     role: "tab"
   }), ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, ___EmotionJSX(Text, _extends({
     variant: "tabLabel"
@@ -75,7 +73,7 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
     }, mergeProps(focusProps, hoverProps, tabProps), itemProps));
   }
   if (mode === 'tooltip') {
-    return ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, ___EmotionJSX(TooltipTrigger, _extends({}, tooltipTriggerProps, {
+    return ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, ___EmotionJSX(TooltipTrigger, _extends({}, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
     }), ___EmotionJSX(Pressable, null, ___EmotionJSX("span", null, tab)), ___EmotionJSX(Tooltip, null, (itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue) || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.title))));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.78.0-alpha.2",
+  "version": "2.78.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",