@kaizen/components 1.51.0 → 1.52.0

package/dist/esm/__overlays__/Tooltip/v3/OverlayArrow.mjs

@@ -0,0 +1,24 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { OverlayArrow as OverlayArrow$1 } from 'react-aria-components';
+import { mergeClassNames } from '../../../utils/mergeClassNames.mjs';
+import styles from './OverlayArrow.module.scss.mjs';
+import { useReversedColors } from '../../../__utilities__/ReversedColors/v3/ReversedColors.mjs';
+
+/**
+ * An OverlayArrow renders a custom arrow element relative to an overlay element
+ * such as a popover or tooltip such that it aligns with a trigger element.
+ */
+var OverlayArrow = function (props) {
+  var reverseColors = useReversedColors();
+  return /*#__PURE__*/React.createElement(OverlayArrow$1, __assign({}, props, {
+    className: mergeClassNames(styles.overlayArrow, reverseColors && styles.reversed, props.className)
+  }), /*#__PURE__*/React.createElement("svg", {
+    width: 8,
+    height: 8,
+    viewBox: "0 0 8 8"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0 L4 4 L8 0"
+  })));
+};
+export { OverlayArrow };

package/dist/esm/__overlays__/Tooltip/v3/OverlayArrow.module.scss.mjs

@@ -0,0 +1,5 @@
+var styles = {
+  "overlayArrow": "OverlayArrow-module_overlayArrow__hoDyK",
+  "reversed": "OverlayArrow-module_reversed__-WGcR"
+};
+export { styles as default };

package/dist/esm/__overlays__/Tooltip/v3/Tooltip.mjs

@@ -0,0 +1,46 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, useContext, useState, useLayoutEffect } from 'react';
+import { VisuallyHidden } from 'react-aria';
+import { useContextProps, TooltipContext, TooltipTriggerStateContext, Tooltip as Tooltip$1 } from 'react-aria-components';
+export { TooltipContext } from 'react-aria-components';
+import { mergeClassNames } from '../../../utils/mergeClassNames.mjs';
+import { OverlayArrow } from './OverlayArrow.mjs';
+import styles from './Tooltip.module.scss.mjs';
+import { useReversedColors } from '../../../__utilities__/ReversedColors/v3/ReversedColors.mjs';
+
+/**
+ * A tooltip displays a description of an element on hover or focus.
+ */
+var Tooltip = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+    className = _a.className,
+    props = __rest(_a, ["children", "className"]);
+  var triggerRef = useContextProps(__assign({
+    children: children,
+    className: className
+  }, props), ref, TooltipContext)[0].triggerRef;
+  var contextState = useContext(TooltipTriggerStateContext);
+  var reverseColors = useReversedColors();
+  var _b = useState(false),
+    shouldInlineHiddenContent = _b[0],
+    setShouldInlineHiddenContent = _b[1];
+  useLayoutEffect(function () {
+    var _a;
+    setShouldInlineHiddenContent(!!((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("data-inline-hidden-content")));
+  }, [triggerRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip$1, __assign({
+    ref: ref,
+    offset: 8
+  }, props, {
+    className: mergeClassNames(styles.tooltip, className, reverseColors && styles.reversed)
+  }), function (renderProps) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverlayArrow, null), typeof children === "function" ? children(renderProps) : children);
+  }), shouldInlineHiddenContent ? ( /*#__PURE__*/React.createElement(VisuallyHidden, null, typeof children === "function" ? children({
+    placement: "center",
+    isEntering: false,
+    isExiting: false,
+    state: contextState,
+    defaultChildren: undefined
+  }) : children)) : null);
+});
+export { Tooltip };

package/dist/esm/__overlays__/Tooltip/v3/Tooltip.module.scss.mjs

@@ -0,0 +1,6 @@
+var styles = {
+  "tooltip": "Tooltip-module_tooltip__efL1m",
+  "reversed": "Tooltip-module_reversed__NnCbZ",
+  "slide": "Tooltip-module_slide__lFdGA"
+};
+export { styles as default };

package/dist/esm/__overlays__/Tooltip/v3/TooltipTrigger.mjs

@@ -0,0 +1,16 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
+
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+var TooltipTrigger = function (props) {
+  return /*#__PURE__*/React.createElement(TooltipTrigger$1, __assign({
+    delay: 300,
+    closeDelay: 300
+  }, props));
+};
+export { TooltipTrigger };

package/dist/esm/__utilities__/ReversedColors/v3/ReversedColors.mjs

@@ -0,0 +1,14 @@
+import React from 'react';
+var ReversedColorsContext = /*#__PURE__*/React.createContext(false);
+var useReversedColors = function () {
+  return React.useContext(ReversedColorsContext);
+};
+var ReversedColors = function (_a) {
+  var children = _a.children,
+    _b = _a.isReversed,
+    isReversed = _b === void 0 ? true : _b;
+  return /*#__PURE__*/React.createElement(ReversedColorsContext.Provider, {
+    value: isReversed
+  }, children);
+};
+export { ReversedColors, useReversedColors };

package/dist/esm/index.mjs

@@ -413,8 +413,8 @@ export { NavigationTab } from './TitleBlockZen/subcomponents/NavigationTabs.mjs'
 export { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID, TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from './TitleBlockZen/constants.mjs';
 export { ToggleSwitch } from './ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs';
 export { ToggleSwitchField } from './ToggleSwitch/ToggleSwitchField/ToggleSwitchField.mjs';
-export { Tooltip } from './Tooltip/Tooltip.mjs';
 export { subtractOnePixel, useMediaQueries } from './utils/useMediaQueries.mjs';
 export { VisuallyHidden } from './VisuallyHidden/VisuallyHidden.mjs';
 export { Well } from './Well/Well.mjs';
 export { Workflow } from './Workflow/Workflow.mjs';
+export { Tooltip } from './__overlays__/Tooltip/v1/index.mjs';

package/dist/esm/overlaysV1.mjs

@@ -0,0 +1 @@
+export { Tooltip } from './__overlays__/Tooltip/v1/index.mjs';

package/dist/esm/overlaysV2.mjs

@@ -0,0 +1 @@
+export { Tooltip } from './__overlays__/Tooltip/v1/Tooltip.mjs';

package/dist/esm/overlaysV3.mjs

@@ -0,0 +1,4 @@
+export { Tooltip } from './__overlays__/Tooltip/v3/Tooltip.mjs';
+export { TooltipTrigger } from './__overlays__/Tooltip/v3/TooltipTrigger.mjs';
+export { Focusable } from './__overlays__/Focusable/v3/Focusable.mjs';
+export { TooltipContext } from 'react-aria-components';

package/dist/esm/reactAriaComponentsV3.mjs

@@ -0,0 +1 @@
+export * from 'react-aria-components';

package/dist/esm/reactAriaV3.mjs

@@ -0,0 +1 @@
+export * from 'react-aria';

package/dist/esm/utilitiesV3.mjs

@@ -0,0 +1 @@
+export { ReversedColors, useReversedColors } from './__utilities__/ReversedColors/v3/ReversedColors.mjs';

package/dist/esm/utils/mergeClassNames.mjs

@@ -0,0 +1,25 @@
+import classnames from 'classnames';
+
+/**
+ * Helper to merge classnames together with support for functions that receive state (render props).
+ * This is useful when working with react-aria-components which have a feature where you can pass a function that receives state and returns a classname.
+ * https://react-spectrum.adobe.com/react-aria/styling.html#render-props
+ */
+var mergeClassNames = function () {
+  var classNames = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    classNames[_i] = arguments[_i];
+  }
+  var containsFunction = classNames.some(function (className) {
+    return typeof className === "function";
+  });
+  // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
+  if (!containsFunction) return classnames.apply(void 0, classNames);
+  // "as any" is used because TS is not smart enough to know that containsFunction means that ClassNameType doesn't extend Function
+  return function (state) {
+    return classnames.apply(void 0, classNames.map(function (className) {
+      return typeof className === "function" ? className(state) : className;
+    }));
+  };
+};
+export { mergeClassNames };