@rio-cloud/rio-uikit 0.16.4-beta.1 → 0.16.4-beta.2

package/lib/es/components/timepicker/TimePicker.js

@@ -1,144 +1,90 @@
 "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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _moment = _interopRequireDefault(require("moment"));
-var _excluded = ["onChange", "value", "className", "alwaysShowMask", "showIcon", "inputProps"];
-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; }
-var MINUTES_OFFSET = 15;
-var mask = [/[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/];
-var fullRegexp = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/;
-var getPadded = function getPadded(value) {
-  return value >= 10 ? value : "0".concat(value);
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const react_input_mask_1 = tslib_1.__importDefault(require("react-input-mask"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const moment_1 = tslib_1.__importDefault(require("moment"));
+const MINUTES_OFFSET = 15;
+const mask = [/[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/];
+const fullRegexp = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/;
+const getPadded = value => (value >= 10 ? value : `0${value}`);
+const formatTimeString = (hours, minutes) => `${getPadded(hours)}:${getPadded(minutes)}`;
+const roundedUp = (time, offset) => Math.floor(time.minutes() / offset) * offset;
+const getInitialTime = () => {
+    const date = new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    return formatTimeString(hours, minutes);
 };
-var formatTimeString = function formatTimeString(hours, minutes) {
-  return "".concat(getPadded(hours), ":").concat(getPadded(minutes));
-};
-var roundedUp = function roundedUp(time, offset) {
-  return Math.floor(time.minutes() / offset) * offset;
-};
-var getInitialTime = function getInitialTime() {
-  var date = new Date();
-  var hours = date.getHours();
-  var minutes = date.getMinutes();
-  return formatTimeString(hours, minutes);
-};
-var isTimeValid = function isTimeValid(value) {
-  return fullRegexp.test(value);
-};
-var isControlledAndValid = function isControlledAndValid(value) {
-  var hasExternalValue = !(0, _isNil["default"])(value);
-  var isValid = (0, _isEmpty["default"])(value) || isTimeValid(value);
-  if (hasExternalValue && !isValid) {
-    throw Error('Wrong time format. Please pass in value with the following format: "hh:mm".');
-  }
-  return hasExternalValue && isValid;
-};
-var TimePicker = function TimePicker(props) {
-  var onChange = props.onChange,
-    value = props.value,
-    className = props.className,
-    alwaysShowMask = props.alwaysShowMask,
-    showIcon = props.showIcon,
-    inputProps = props.inputProps,
-    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var initialTime = isControlledAndValid(value) ? value : getInitialTime();
-  var _useState = (0, _react.useState)(initialTime),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    timeValue = _useState2[0],
-    setTimeValue = _useState2[1];
-
-  // Update internal time value from outside when used as a controlled component
-  (0, _react.useEffect)(function () {
-    if (isControlledAndValid(value)) {
-      setTimeValue(value);
-      onChange(value);
-    }
-  }, [value]);
-  var handleChangeTime = function handleChangeTime(event) {
-    var currentValue = event.target.value;
-    setTimeValue(currentValue);
-    if (fullRegexp.test(currentValue)) {
-      onChange(currentValue);
+const isTimeValid = value => fullRegexp.test(value);
+const isControlledAndValid = value => {
+    const hasExternalValue = !(0, isNil_1.default)(value);
+    const isValid = (0, isEmpty_1.default)(value) || isTimeValid(value);
+    if (hasExternalValue && !isValid) {
+        throw Error('Wrong time format. Please pass in value with the following format: "hh:mm".');
     }
-  };
-  var isValid = isTimeValid(timeValue);
-  var handleIncrease = function handleIncrease() {
-    var time = (0, _moment["default"])("2020-01-01 ".concat(timeValue));
-    var rounded = roundedUp(time, MINUTES_OFFSET);
-    time.minute(rounded).second(0);
-    time.add(MINUTES_OFFSET, 'minutes');
-    var updatedTimeValue = formatTimeString(time.hours(), time.minutes());
-    setTimeValue(updatedTimeValue);
-    onChange(updatedTimeValue);
-  };
-  var handleDecrease = function handleDecrease() {
-    var time = (0, _moment["default"])("2020-01-01 ".concat(timeValue));
-    var rounded = roundedUp(time, MINUTES_OFFSET);
-    time.minute(rounded).second(0);
-    time.subtract(MINUTES_OFFSET, 'minutes');
-    var updatedTimeValue = formatTimeString(time.hours(), time.minutes());
-    setTimeValue(updatedTimeValue);
-    onChange(updatedTimeValue);
-  };
-  var inputClassName = inputProps.className;
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    className: (0, _classnames["default"])('TimePicker', 'input-group', className)
-  }), showIcon && /*#__PURE__*/_react["default"].createElement("span", {
-    className: "input-group-addon"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-time-alt"
-  })), /*#__PURE__*/_react["default"].createElement(_reactInputMask["default"], (0, _extends2["default"])({}, inputProps, {
-    className: (0, _classnames["default"])('TimePickerInput', 'form-control', inputClassName),
-    mask: mask,
-    maskPlaceholder: '-',
-    value: timeValue,
-    onChange: handleChangeTime,
-    alwaysShowMask: alwaysShowMask
-  })), isValid && /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'TimePickerIncreaseButton input-group-addon'
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'text-color-gray hover-text-color-dark',
-    onClick: handleDecrease
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'rioglyph rioglyph-chevron-left scale-90'
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'text-color-gray hover-text-color-dark margin-left-5',
-    onClick: handleIncrease
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: 'rioglyph rioglyph-chevron-right scale-90'
-  }))));
+    return hasExternalValue && isValid;
+};
+const TimePicker = props => {
+    const { onChange, value, className, alwaysShowMask, showIcon, inputProps } = props, remainingProps = tslib_1.__rest(props, ["onChange", "value", "className", "alwaysShowMask", "showIcon", "inputProps"]);
+    const initialTime = isControlledAndValid(value) ? value : getInitialTime();
+    const [timeValue, setTimeValue] = (0, react_1.useState)(initialTime);
+    // Update internal time value from outside when used as a controlled component
+    (0, react_1.useEffect)(() => {
+        if (isControlledAndValid(value)) {
+            setTimeValue(value);
+            onChange(value);
+        }
+    }, [value]);
+    const handleChangeTime = event => {
+        const currentValue = event.target.value;
+        setTimeValue(currentValue);
+        if (fullRegexp.test(currentValue)) {
+            onChange(currentValue);
+        }
+    };
+    const isValid = isTimeValid(timeValue);
+    const handleIncrease = () => {
+        const time = (0, moment_1.default)(`2020-01-01 ${timeValue}`);
+        const rounded = roundedUp(time, MINUTES_OFFSET);
+        time.minute(rounded).second(0);
+        time.add(MINUTES_OFFSET, 'minutes');
+        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());
+        setTimeValue(updatedTimeValue);
+        onChange(updatedTimeValue);
+    };
+    const handleDecrease = () => {
+        const time = (0, moment_1.default)(`2020-01-01 ${timeValue}`);
+        const rounded = roundedUp(time, MINUTES_OFFSET);
+        time.minute(rounded).second(0);
+        time.subtract(MINUTES_OFFSET, 'minutes');
+        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());
+        setTimeValue(updatedTimeValue);
+        onChange(updatedTimeValue);
+    };
+    const { className: inputClassName } = inputProps;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: (0, classnames_1.default)('TimePicker', 'input-group', className) }, { children: [showIcon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-time-alt' }) }))), (0, jsx_runtime_1.jsx)(react_input_mask_1.default, Object.assign({}, inputProps, { className: (0, classnames_1.default)('TimePickerInput', 'form-control', inputClassName), mask: mask, maskPlaceholder: '-', value: timeValue, onChange: handleChangeTime, alwaysShowMask: alwaysShowMask })), isValid && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'TimePickerIncreaseButton input-group-addon' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-gray hover-text-color-dark', onClick: handleDecrease }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-color-gray hover-text-color-dark margin-left-5', onClick: handleIncrease }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) }))] })))] })));
 };
 TimePicker.defaultProps = {
-  onChange: function onChange() {},
-  alwaysShowMask: true,
-  showIcon: false,
-  className: '',
-  inputProps: {}
+    onChange: () => { },
+    alwaysShowMask: true,
+    showIcon: false,
+    className: '',
+    inputProps: {},
 };
 TimePicker.propTypes = {
-  onChange: _propTypes["default"].func,
-  value: _propTypes["default"].string,
-  alwaysShowMask: _propTypes["default"].bool,
-  showIcon: _propTypes["default"].bool,
-  className: _propTypes["default"].string,
-  inputProps: _propTypes["default"].shape({
-    className: _propTypes["default"].string
-  })
+    onChange: prop_types_1.default.func,
+    value: prop_types_1.default.string,
+    alwaysShowMask: prop_types_1.default.bool,
+    showIcon: prop_types_1.default.bool,
+    className: prop_types_1.default.string,
+    inputProps: prop_types_1.default.shape({
+        className: prop_types_1.default.string,
+    }),
 };
-var _default = TimePicker;
-exports["default"] = _default;
+exports.default = TimePicker;

package/lib/es/components/tooltip/SimpleTooltip.d.ts

@@ -0,0 +1,21 @@
+import { type MutableRefObject, type PropsWithChildren, type ReactNode } from 'react';
+import { TooltipWidth } from './Tooltip';
+import type { delayProp } from '../../types';
+import { type Placement } from '../../values/Placement';
+import { type Trigger } from '../../values/Trigger';
+export type SimpleTooltipProps = {
+    placement: Placement;
+    content: string | ReactNode;
+    trigger?: Trigger;
+    targetRef?: MutableRefObject<HTMLDivElement>;
+    delay?: number | delayProp;
+    popperConfig?: object;
+    tooltipWidth: TooltipWidth;
+};
+declare const SimpleTooltip: {
+    (props: PropsWithChildren<SimpleTooltipProps>): JSX.Element;
+    TRIGGER_CLICK: "click";
+    TRIGGER_HOVER: "hover";
+    TRIGGER_FOCUS: "focus";
+};
+export default SimpleTooltip;

package/lib/es/components/tooltip/SimpleTooltip.js

@@ -1,50 +1,18 @@
 "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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
-var _OverlayTrigger = _interopRequireWildcard(require("../overlay/OverlayTrigger"));
-var _excluded = ["id", "children", "placement", "trigger", "content", "delay", "popperConfig"];
-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; }
-var SimpleTooltip = function SimpleTooltip(props) {
-  var id = props.id,
-    children = props.children,
-    placement = props.placement,
-    trigger = props.trigger,
-    content = props.content,
-    delay = props.delay,
-    popperConfig = props.popperConfig,
-    remainingProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_OverlayTrigger["default"], {
-    placement: placement,
-    trigger: trigger,
-    overlay: /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], remainingProps, content),
-    delay: delay,
-    popperConfig: popperConfig
-  }, children);
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const Tooltip_1 = tslib_1.__importDefault(require("./Tooltip"));
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../overlay/OverlayTrigger"));
+const Placement_1 = require("../../values/Placement");
+const Trigger_1 = require("../../values/Trigger");
+const SimpleTooltip = (props) => {
+    const { children, placement = Placement_1.PLACEMENT.AUTO, trigger, content, delay, popperConfig, targetRef, tooltipWidth, } = props;
+    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: placement, trigger: trigger, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ width: tooltipWidth, ref: targetRef }, { children: content })), delay: delay, popperConfig: popperConfig }, { children: children })));
 };
-SimpleTooltip.defaultProps = {
-  placement: _Tooltip["default"].AUTO
-};
-SimpleTooltip.propTypes = {
-  placement: _Tooltip.TooltipPlacementType,
-  content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
-  trigger: _OverlayTrigger.triggerType,
-  targetRef: _propTypes["default"].func,
-  popperConfig: _propTypes["default"].object,
-  delay: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].shape({
-    show: _propTypes["default"].number,
-    hide: _propTypes["default"].number
-  })]),
-  children: _propTypes["default"].node.isRequired
-};
-var _default = SimpleTooltip;
-exports["default"] = _default;
+SimpleTooltip.TRIGGER_CLICK = Trigger_1.TRIGGER.CLICK;
+SimpleTooltip.TRIGGER_HOVER = Trigger_1.TRIGGER.HOVER;
+SimpleTooltip.TRIGGER_FOCUS = Trigger_1.TRIGGER.FOCUS;
+exports.default = SimpleTooltip;

package/lib/es/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type PropsWithChildren } from 'react';
+import { PLACEMENT, type Placement } from '../../values/Placement';
+import { type TextAlignment } from '../../values/TextAlignment';
+import type { ObjectValues } from '../../utils/ObjectValues';
+import type { RefComponent } from '../../utils/RefComponent';
+declare const STYLE_MAP: {
+    readonly STYLE_DEFAULT: "default";
+    readonly STYLE_ONBOARDING: "onboarding";
+};
+export type TooltipStyle = ObjectValues<typeof STYLE_MAP>;
+declare const TEXT_ALIGNMENT_MAP: {
+    readonly TEXT_ALIGNMENT_LEFT: "left";
+    readonly TEXT_ALIGNMENT_CENTER: "center";
+    readonly TEXT_ALIGNMENT_RIGHT: "right";
+};
+export type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;
+export type TooltipProps = {
+    id?: string;
+    placement?: Placement;
+    offsetTop?: string | number;
+    offsetLeft?: string | number;
+    textAlignment?: TextAlignment;
+    tooltipStyle?: TooltipStyle;
+    className?: string;
+    width?: TooltipWidth;
+    allowOnTouch?: boolean;
+    arrowProps?: {};
+    style?: CSSProperties;
+};
+export type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> & typeof STYLE_MAP & typeof PLACEMENT & typeof TEXT_ALIGNMENT_MAP;
+declare const Tooltip: TooltipType;
+export default Tooltip;

package/lib/es/components/tooltip/Tooltip.js

@@ -1,94 +1,37 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.TooltipPlacementType = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _omit2 = _interopRequireDefault(require("lodash/fp/omit"));
-var _deviceUtils = require("../../utils/deviceUtils");
-var _OverlayTrigger = _interopRequireDefault(require("../overlay/OverlayTrigger"));
-var _excluded = ["allowOnTouch", "arrowProps", "children", "className", "placement", "style", "textAlignment", "tooltipStyle", "width"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var Tooltip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  var _omit = (0, _omit2["default"])(['popper', 'positionLeft', 'positionTop'], props),
-    allowOnTouch = _omit.allowOnTouch,
-    arrowProps = _omit.arrowProps,
-    children = _omit.children,
-    className = _omit.className,
-    placement = _omit.placement,
-    style = _omit.style,
-    textAlignment = _omit.textAlignment,
-    tooltipStyle = _omit.tooltipStyle,
-    width = _omit.width,
-    remainingProps = (0, _objectWithoutProperties2["default"])(_omit, _excluded);
-  if (!(0, _deviceUtils.isDesktop)() && !allowOnTouch) {
-    // Workaround: we have to return a DOM node as otherwise the
-    // react-transition library would throw an error on mobile
-    // when triggering a browser reflow and accessing the node directly.
-    return /*#__PURE__*/_react["default"].createElement("span", {
-      className: "display-none"
-    });
-  }
-  var wrapperClasses = (0, _classnames["default"])('tooltip', tooltipStyle && "tooltip-".concat(tooltipStyle), placement, className);
-  var outerStyle = _objectSpread({}, style);
-  var innerClasses = (0, _classnames["default"])('tooltip-inner', textAlignment && "text-".concat(textAlignment), width && "width-".concat(width));
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, remainingProps, {
-    role: "tooltip"
-    // x-placement is used by the css to define how to position the arrow.
-    ,
-    "x-placement": placement,
-    ref: ref,
-    className: wrapperClasses,
-    style: outerStyle,
-    "data-offset": 20
-  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: "tooltip-arrow"
-  }, arrowProps)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: innerClasses
-  }, children));
-});
-Tooltip.STYLE_DEFAULT = 'default';
-Tooltip.STYLE_ONBOARDING = 'onboarding';
-Tooltip.defaultProps = {
-  placement: Tooltip.BOTTOM,
-  className: '',
-  textAlignment: 'center',
-  tooltipStyle: Tooltip.STYLE_DEFAULT,
-  width: 'auto',
-  allowOnTouch: false
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const omit_1 = tslib_1.__importDefault(require("lodash/fp/omit"));
+const deviceUtils_1 = require("../../utils/deviceUtils");
+const Placement_1 = require("../../values/Placement");
+const TextAlignment_1 = require("../../values/TextAlignment");
+const STYLE_MAP = {
+    STYLE_DEFAULT: 'default',
+    STYLE_ONBOARDING: 'onboarding',
 };
-Tooltip.AUTO_START = _OverlayTrigger["default"].AUTO_START;
-Tooltip.AUTO = _OverlayTrigger["default"].AUTO;
-Tooltip.AUTO_END = _OverlayTrigger["default"].AUTO_END;
-Tooltip.TOP_START = _OverlayTrigger["default"].TOP_START;
-Tooltip.TOP = _OverlayTrigger["default"].TOP;
-Tooltip.TOP_END = _OverlayTrigger["default"].TOP_END;
-Tooltip.BOTTOM_START = _OverlayTrigger["default"].BOTTOM_START;
-Tooltip.BOTTOM = _OverlayTrigger["default"].BOTTOM;
-Tooltip.BOTTOM_END = _OverlayTrigger["default"].BOTTOM_END;
-Tooltip.RIGHT_START = _OverlayTrigger["default"].RIGHT_START;
-Tooltip.RIGHT = _OverlayTrigger["default"].RIGHT;
-Tooltip.RIGHT_END = _OverlayTrigger["default"].RIGHT_END;
-Tooltip.LEFT_START = _OverlayTrigger["default"].LEFT_START;
-Tooltip.LEFT = _OverlayTrigger["default"].LEFT;
-Tooltip.LEFT_END = _OverlayTrigger["default"].LEFT_END;
-var TooltipPlacementType = _propTypes["default"].oneOf([Tooltip.AUTO_START, Tooltip.AUTO, Tooltip.AUTO_END, Tooltip.TOP_START, Tooltip.TOP, Tooltip.TOP_END, Tooltip.BOTTOM_START, Tooltip.BOTTOM, Tooltip.BOTTOM_END, Tooltip.RIGHT_START, Tooltip.RIGHT, Tooltip.RIGHT_END, Tooltip.LEFT_START, Tooltip.LEFT, Tooltip.LEFT_END]);
-exports.TooltipPlacementType = TooltipPlacementType;
-Tooltip.propTypes = {
-  placement: TooltipPlacementType,
-  className: _propTypes["default"].string,
-  allowOnTouch: _propTypes["default"].bool,
-  tooltipStyle: _propTypes["default"].oneOf([Tooltip.STYLE_DEFAULT, Tooltip.STYLE_ONBOARDING]),
-  textAlignment: _propTypes["default"].oneOf(['left', 'center', 'right']),
-  width: _propTypes["default"].oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500])
+const TEXT_ALIGNMENT_MAP = {
+    TEXT_ALIGNMENT_LEFT: TextAlignment_1.TEXT_ALIGNMENT.LEFT,
+    TEXT_ALIGNMENT_CENTER: TextAlignment_1.TEXT_ALIGNMENT.CENTER,
+    TEXT_ALIGNMENT_RIGHT: TextAlignment_1.TEXT_ALIGNMENT.RIGHT,
 };
-var _default = Tooltip;
-exports["default"] = _default;
+const Tooltip = (0, react_1.forwardRef)((props, ref) => {
+    const _a = (0, omit_1.default)(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = tslib_1.__rest(_a, ["allowOnTouch", "arrowProps", "children", "className", "placement", "style", "textAlignment", "tooltipStyle", "width"]);
+    if (!(0, deviceUtils_1.isDesktop)() && !allowOnTouch) {
+        // Workaround: we have to return a DOM node as otherwise the
+        // react-transition library would throw an error on mobile
+        // when triggering a browser reflow and accessing the node directly.
+        return (0, jsx_runtime_1.jsx)("span", { className: 'display-none' });
+    }
+    const wrapperClasses = (0, classnames_1.default)('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, className);
+    const innerClasses = (0, classnames_1.default)('tooltip-inner', textAlignment && `text-${textAlignment}`, width && `width-${width}`);
+    /* eslint-disable react/no-unknown-property */
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: Object.assign({}, style), "data-offset": 20 }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-arrow' }, arrowProps)), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: innerClasses }, { children: children }))] })));
+});
+// statics
+Object.assign(Tooltip, STYLE_MAP);
+Object.assign(Tooltip, Placement_1.PLACEMENT); // is keyed as-is
+Object.assign(Tooltip, TEXT_ALIGNMENT_MAP);
+exports.default = Tooltip;

package/lib/es/components/video/ResponsiveVideo.d.ts

@@ -0,0 +1,13 @@
+export type AspectRatio = '4by3' | '16by9';
+export type ResponsiveVideoProps = {
+    src: string;
+    aspectRatio: AspectRatio;
+    allowFullScreen?: boolean;
+    className?: string;
+};
+declare const ResponsiveVideo: {
+    (props: ResponsiveVideoProps): JSX.Element;
+    ASPECT_RATIO_4_BY_3: string;
+    ASPECT_RATIO_16_BY_9: string;
+};
+export default ResponsiveVideo;

package/lib/es/components/video/ResponsiveVideo.js

@@ -1,36 +1,14 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var ResponsiveVideo = function ResponsiveVideo(props) {
-  var src = props.src,
-    className = props.className,
-    allowFullScreen = props.allowFullScreen,
-    aspectRatio = props.aspectRatio;
-  var wrapperClassName = (0, _classnames["default"])('video-responsive', "video-responsive-".concat(aspectRatio), className && className);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: wrapperClassName
-  }, /*#__PURE__*/_react["default"].createElement("iframe", {
-    src: src,
-    allowFullScreen: allowFullScreen
-  }));
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const ResponsiveVideo = (props) => {
+    const { src, className = '', allowFullScreen = true, aspectRatio = '16by9' } = props;
+    const wrapperClassName = (0, classnames_1.default)('video-responsive', `video-responsive-${aspectRatio}`, className && className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClassName }, { children: (0, jsx_runtime_1.jsx)("iframe", { src: src, allowFullScreen: allowFullScreen }) })));
 };
 ResponsiveVideo.ASPECT_RATIO_4_BY_3 = '4by3';
 ResponsiveVideo.ASPECT_RATIO_16_BY_9 = '16by9';
-ResponsiveVideo.defaultProps = {
-  aspectRatio: ResponsiveVideo.ASPECT_RATIO_16_BY_9,
-  allowFullScreen: true
-};
-ResponsiveVideo.propTypes = {
-  src: _propTypes["default"].string.isRequired,
-  aspectRatio: _propTypes["default"].oneOf([ResponsiveVideo.ASPECT_RATIO_4_BY_3, ResponsiveVideo.ASPECT_RATIO_16_BY_9]),
-  allowFullScreen: _propTypes["default"].bool
-};
-var _default = ResponsiveVideo;
-exports["default"] = _default;
+exports.default = ResponsiveVideo;

package/lib/es/framer-motion.js

@@ -1,16 +1,4 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _framerMotion = require("framer-motion");
-Object.keys(_framerMotion).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _framerMotion[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _framerMotion[key];
-    }
-  });
-});
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("framer-motion"), exports);

package/lib/es/hooks/useAfterMount.d.ts

@@ -0,0 +1 @@
+export default function useAfterMount(callback: any, deps: any): void;

package/lib/es/hooks/useAfterMount.js

@@ -1,16 +1,13 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = useAfterMount;
-var _react = require("react");
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
 function useAfterMount(callback, deps) {
-  var componentJustMountedRef = (0, _react.useRef)(true);
-  (0, _react.useEffect)(function () {
-    if (!componentJustMountedRef.current) {
-      return callback();
-    }
-    componentJustMountedRef.current = false;
-  }, deps);
-}
+    const componentJustMountedRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (!componentJustMountedRef.current) {
+            return callback();
+        }
+        componentJustMountedRef.current = false;
+    }, deps);
+}
+exports.default = useAfterMount;

package/lib/es/hooks/useClickOutside.d.ts

@@ -0,0 +1 @@
+export default function useClickOutside(callback: any, eventTypes?: string[]): import("react").MutableRefObject<null>;