@storybook/design-system
Version:
Storybook design system
221 lines (183 loc) • 9.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _theming = require("@storybook/theming");
var _reactPopperTooltip = _interopRequireDefault(require("react-popper-tooltip"));
var _uuid = _interopRequireDefault(require("uuid"));
var _Tooltip = require("./Tooltip");
var _excluded = ["tabIndex", "tagName", "onClick", "onMouseEnter", "onMouseLeave"],
_excluded2 = ["children", "closeOnClick", "delayHide", "hasChrome", "modifiers", "onVisibilityChange", "placement", "portalContainer", "startOpen", "tagName", "tooltip", "tooltipZIndex", "trigger"];
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); if (enumerableOnly) { symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
// A target that doesn't speak popper
var ButtonContainer = (0, _theming.styled)("button", process.env.NODE_ENV === "production" ? {
target: "emjsjmc1"
} : {
target: "emjsjmc1",
label: "ButtonContainer"
})("background:transparent;border:0;cursor:", function (props) {
return props.trigger === 'hover' ? 'default' : 'pointer';
}, ";display:inline-block;font-size:inherit;font-weight:inherit;margin:0;padding:0;text-align:inherit;text-decoration:none;");
var StyledTooltip = ( /*#__PURE__*/0, _theming.styled)(_Tooltip.Tooltip, process.env.NODE_ENV === "production" ? {
target: "emjsjmc0"
} : {
target: "emjsjmc0",
label: "StyledTooltip"
})(function (props) {
return !props.hasTooltipContent && "display: none;";
}, ";");
var isDescendantOfAction = function isDescendantOfAction(element) {
var parentElement = element.parentElement;
if (parentElement.tagName === 'BODY') {
return false;
}
if (parentElement.tagName === 'A' || parentElement.tagName === 'BUTTON') {
return true;
}
return isDescendantOfAction(parentElement);
};
var AsComponent = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
var tabIndex = _ref.tabIndex,
tagName = _ref.tagName,
onClick = _ref.onClick,
onMouseEnter = _ref.onMouseEnter,
onMouseLeave = _ref.onMouseLeave,
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var Component = tagName || ButtonContainer;
var asProps = _objectSpread({
ref: ref,
onClick: onClick,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onFocus: onMouseEnter,
onBlur: onMouseLeave,
role: 'button'
}, props);
var onKeyDown = (0, _react.useMemo)(function () {
return function (event) {
if (!onClick) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onClick(event);
}
};
}, [onClick]); // for non button component, we need to simulate the same behavior as a button
if (tagName) {
asProps.tabIndex = tabIndex || 0;
asProps.onKeyDown = onKeyDown;
}
return /*#__PURE__*/_react["default"].createElement(Component, asProps);
});
AsComponent.displayName = 'AsComponent';
var WithTooltip = function WithTooltip(_ref2) {
var children = _ref2.children,
_ref2$closeOnClick = _ref2.closeOnClick,
closeOnClick = _ref2$closeOnClick === void 0 ? false : _ref2$closeOnClick,
_ref2$delayHide = _ref2.delayHide,
delayHide = _ref2$delayHide === void 0 ? 100 : _ref2$delayHide,
_ref2$hasChrome = _ref2.hasChrome,
hasChrome = _ref2$hasChrome === void 0 ? true : _ref2$hasChrome,
_ref2$modifiers = _ref2.modifiers,
modifiers = _ref2$modifiers === void 0 ? {} : _ref2$modifiers,
_ref2$onVisibilityCha = _ref2.onVisibilityChange,
onVisibilityChange = _ref2$onVisibilityCha === void 0 ? function () {} : _ref2$onVisibilityCha,
_ref2$placement = _ref2.placement,
placement = _ref2$placement === void 0 ? 'top' : _ref2$placement,
_ref2$portalContainer = _ref2.portalContainer,
portalContainer = _ref2$portalContainer === void 0 ? undefined : _ref2$portalContainer,
_ref2$startOpen = _ref2.startOpen,
startOpen = _ref2$startOpen === void 0 ? false : _ref2$startOpen,
_ref2$tagName = _ref2.tagName,
tagName = _ref2$tagName === void 0 ? undefined : _ref2$tagName,
_ref2$tooltip = _ref2.tooltip,
_tooltip = _ref2$tooltip === void 0 ? undefined : _ref2$tooltip,
_ref2$tooltipZIndex = _ref2.tooltipZIndex,
tooltipZIndex = _ref2$tooltipZIndex === void 0 ? undefined : _ref2$tooltipZIndex,
_ref2$trigger = _ref2.trigger,
trigger = _ref2$trigger === void 0 ? 'hover' : _ref2$trigger,
props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
var id = _react["default"].useMemo(function () {
return _uuid["default"].v4();
}, []);
var _useState = (0, _react.useState)(startOpen),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
isTooltipShown = _useState2[0],
setTooltipShown = _useState2[1];
var closeTooltip = (0, _react.useMemo)(function () {
return function () {
return setTooltipShown(false);
};
}, [setTooltipShown]);
var closeTooltipOnClick = (0, _react.useMemo)(function () {
return function (event) {
if (!closeOnClick || !isDescendantOfAction(event.target)) {
return;
}
closeTooltip();
};
}, [closeOnClick, closeTooltip]);
var handleVisibilityChange = function handleVisibilityChange(isVisible) {
onVisibilityChange(isVisible);
setTooltipShown(isVisible);
};
/* eslint-env browser */
var defaultPortalContainer = typeof window !== 'undefined' ? document.getElementById('storybook-root') || document.getElementById('root') || document.body : undefined;
return /*#__PURE__*/_react["default"].createElement(_reactPopperTooltip["default"], {
delayHide: delayHide,
placement: placement,
trigger: trigger,
tooltipShown: isTooltipShown,
onVisibilityChange: handleVisibilityChange,
modifiers: modifiers,
portalContainer: portalContainer || defaultPortalContainer,
tooltip: function tooltip(_ref3) {
var getTooltipProps = _ref3.getTooltipProps,
getArrowProps = _ref3.getArrowProps,
tooltipRef = _ref3.tooltipRef,
arrowRef = _ref3.arrowRef,
tooltipPlacement = _ref3.placement;
return /*#__PURE__*/_react["default"].createElement(StyledTooltip, (0, _extends2["default"])({
hidden: undefined,
hasChrome: hasChrome,
placement: tooltipPlacement,
tooltipRef: tooltipRef,
arrowRef: arrowRef,
arrowProps: getArrowProps(),
onClick: closeTooltipOnClick
}, getTooltipProps(), {
id: id,
role: "tooltip",
hasTooltipContent: !!_tooltip,
zIndex: tooltipZIndex
}), typeof _tooltip === 'function' ? _tooltip({
onHide: closeTooltip
}) : _tooltip);
}
}, function (_ref4) {
var getTriggerProps = _ref4.getTriggerProps,
triggerRef = _ref4.triggerRef;
return /*#__PURE__*/_react["default"].createElement(AsComponent, (0, _extends2["default"])({
tagName: tagName,
trigger: trigger,
ref: triggerRef
}, getTriggerProps(), props, {
"aria-controls": id,
"aria-describedby": isTooltipShown ? id : undefined
}), children);
});
};
var _default = WithTooltip;
exports["default"] = _default;