@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/components/timepicker/TimePicker.js

@@ -1,133 +1,88 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onChange", "value", "className", "alwaysShowMask", "showIcon", "inputProps"];
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import InputMask from 'react-input-mask';
-import classNames from 'classnames';
-import isNil from 'lodash/fp/isNil';
-import isEmpty from 'lodash/fp/isEmpty';
-import moment from 'moment';
-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);
-};
-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 = !isNil(value);
-  var isValid = isEmpty(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 = _objectWithoutProperties(props, _excluded);
-  var initialTime = isControlledAndValid(value) ? value : getInitialTime();
-  var _useState = useState(initialTime),
-    _useState2 = _slicedToArray(_useState, 2),
-    timeValue = _useState2[0],
-    setTimeValue = _useState2[1];
-
-  // Update internal time value from outside when used as a controlled component
-  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);
-    }
-  };
-  var isValid = isTimeValid(timeValue);
-  var handleIncrease = function handleIncrease() {
-    var time = moment("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 = moment("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.createElement("div", _extends({}, remainingProps, {
-    className: classNames('TimePicker', 'input-group', className)
-  }), showIcon && /*#__PURE__*/React.createElement("span", {
-    className: "input-group-addon"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "rioglyph rioglyph-time-alt"
-  })), /*#__PURE__*/React.createElement(InputMask, _extends({}, inputProps, {
-    className: classNames('TimePickerInput', 'form-control', inputClassName),
-    mask: mask,
-    maskPlaceholder: '-',
-    value: timeValue,
-    onChange: handleChangeTime,
-    alwaysShowMask: alwaysShowMask
-  })), isValid && /*#__PURE__*/React.createElement("div", {
-    className: 'TimePickerIncreaseButton input-group-addon'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'text-color-gray hover-text-color-dark',
-    onClick: handleDecrease
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'rioglyph rioglyph-chevron-left scale-90'
-  })), /*#__PURE__*/React.createElement("div", {
-    className: 'text-color-gray hover-text-color-dark margin-left-5',
-    onClick: handleIncrease
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'rioglyph rioglyph-chevron-right scale-90'
-  }))));
-};
-TimePicker.defaultProps = {
-  onChange: function onChange() {},
-  alwaysShowMask: true,
-  showIcon: false,
-  className: '',
-  inputProps: {}
-};
-TimePicker.propTypes = {
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  alwaysShowMask: PropTypes.bool,
-  showIcon: PropTypes.bool,
-  className: PropTypes.string,
-  inputProps: PropTypes.shape({
-    className: PropTypes.string
-  })
-};
-export default TimePicker;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import InputMask from 'react-input-mask';
+import classNames from 'classnames';
+import isNil from 'lodash/fp/isNil';
+import isEmpty from 'lodash/fp/isEmpty';
+import moment from '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);
+};
+const isTimeValid = value => fullRegexp.test(value);
+const isControlledAndValid = value => {
+    const hasExternalValue = !isNil(value);
+    const isValid = isEmpty(value) || isTimeValid(value);
+    if (hasExternalValue && !isValid) {
+        throw Error('Wrong time format. Please pass in value with the following format: "hh:mm".');
+    }
+    return hasExternalValue && isValid;
+};
+const TimePicker = props => {
+    const { onChange, value, className, alwaysShowMask, showIcon, inputProps } = props, remainingProps = __rest(props, ["onChange", "value", "className", "alwaysShowMask", "showIcon", "inputProps"]);
+    const initialTime = isControlledAndValid(value) ? value : getInitialTime();
+    const [timeValue, setTimeValue] = useState(initialTime);
+    // Update internal time value from outside when used as a controlled component
+    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 = moment(`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 = moment(`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 (_jsxs("div", Object.assign({}, remainingProps, { className: classNames('TimePicker', 'input-group', className) }, { children: [showIcon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-time-alt' }) }))), _jsx(InputMask, Object.assign({}, inputProps, { className: classNames('TimePickerInput', 'form-control', inputClassName), mask: mask, maskPlaceholder: '-', value: timeValue, onChange: handleChangeTime, alwaysShowMask: alwaysShowMask })), isValid && (_jsxs("div", Object.assign({ className: 'TimePickerIncreaseButton input-group-addon' }, { children: [_jsx("div", Object.assign({ className: 'text-color-gray hover-text-color-dark', onClick: handleDecrease }, { children: _jsx("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) })), _jsx("div", Object.assign({ className: 'text-color-gray hover-text-color-dark margin-left-5', onClick: handleIncrease }, { children: _jsx("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) }))] })))] })));
+};
+TimePicker.defaultProps = {
+    onChange: () => { },
+    alwaysShowMask: true,
+    showIcon: false,
+    className: '',
+    inputProps: {},
+};
+TimePicker.propTypes = {
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+    alwaysShowMask: PropTypes.bool,
+    showIcon: PropTypes.bool,
+    className: PropTypes.string,
+    inputProps: PropTypes.shape({
+        className: PropTypes.string,
+    }),
+};
+export default TimePicker;

package/components/tooltip/SimpleTooltip.d.ts

@@ -0,0 +1,36 @@
+import React, { type MutableRefObject, type PropsWithChildren } from 'react';
+import { type TooltipProps } from './Tooltip';
+import type { delayProp } from '../../types';
+import { type Trigger } from '../../values/Trigger';
+export type SimpleTooltipProps = TooltipProps & {
+    /**
+     * The tooltip content.
+     */
+    content: string | React.ReactNode;
+    /**
+     * Specify which action or actions trigger Overlay visibility.
+     * Possible values are: `hover`, `click`, `focus`
+     * @default 'hover'
+     */
+    trigger?: Trigger;
+    /**
+     * The react ref object assigned to the target of the tooltip.
+     */
+    targetRef?: MutableRefObject<HTMLDivElement>;
+    /**
+     * A millisecond delay amount to show and hide the Overlay once triggered.
+     * If passed an Object, you can control the show and hide timeouts individually.
+     */
+    delay?: number | delayProp;
+    /**
+     * A Popper.js config object passed to the the underlying popper instance.
+     */
+    popperConfig?: object;
+};
+declare const SimpleTooltip: {
+    (props: PropsWithChildren<SimpleTooltipProps>): import("react/jsx-runtime").JSX.Element;
+    TRIGGER_CLICK: "click";
+    TRIGGER_HOVER: "hover";
+    TRIGGER_FOCUS: "focus";
+};
+export default SimpleTooltip;

package/components/tooltip/SimpleTooltip.js

@@ -1,39 +1,16 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "children", "placement", "trigger", "content", "delay", "popperConfig"];
-import React from 'react';
-import PropTypes from 'prop-types';
-import Tooltip, { TooltipPlacementType } from './Tooltip';
-import OverlayTrigger, { triggerType } from '../overlay/OverlayTrigger';
-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 = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(OverlayTrigger, {
-    placement: placement,
-    trigger: trigger,
-    overlay: /*#__PURE__*/React.createElement(Tooltip, remainingProps, content),
-    delay: delay,
-    popperConfig: popperConfig
-  }, children);
-};
-SimpleTooltip.defaultProps = {
-  placement: Tooltip.AUTO
-};
-SimpleTooltip.propTypes = {
-  placement: TooltipPlacementType,
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  trigger: triggerType,
-  targetRef: PropTypes.func,
-  popperConfig: PropTypes.object,
-  delay: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    show: PropTypes.number,
-    hide: PropTypes.number
-  })]),
-  children: PropTypes.node.isRequired
-};
-export default SimpleTooltip;
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import Tooltip from './Tooltip';
+import OverlayTrigger from '../overlay/OverlayTrigger';
+import { PLACEMENT } from '../../values/Placement';
+import { TRIGGER } from '../../values/Trigger';
+const SimpleTooltip = (props) => {
+    const { children, placement = PLACEMENT.AUTO, trigger, content, delay, popperConfig, targetRef } = props, remainingProps = __rest(props, ["children", "placement", "trigger", "content", "delay", "popperConfig", "targetRef"]);
+    return (_jsx(OverlayTrigger, Object.assign({ placement: placement, trigger: trigger, overlay: _jsx(Tooltip, Object.assign({}, remainingProps, { ref: targetRef }, { children: content })), delay: delay, popperConfig: popperConfig }, { children: children })));
+};
+SimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;
+SimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;
+SimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;
+export default SimpleTooltip;

package/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,65 @@
+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 = {
+    /**
+     * An HTML id attribute, necessary for accessibility.
+     */
+    id?: string;
+    /**
+     * Sets the direction the Tooltip is positioned towards. This is generally provided by the
+     * OverlayTrigger component positioning the tooltip.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * Defines the position of the text content.
+     * Possible values are: `"center"` | `"left"` | `"right"`
+     * @default 'center'
+     */
+    textAlignment?: TextAlignment;
+    /**
+     * Defines the look of the tooltip.
+     * Possible values are: `default` and `onboarding`
+     * @default 'default'
+     */
+    tooltipStyle?: TooltipStyle;
+    /**
+     * Defines the width of 'the tooltip.
+     * Possible values are: 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500
+     */
+    width?: TooltipWidth;
+    /**
+     * Render Tooltips on mobile devices.
+     * @default false
+     */
+    allowOnTouch?: boolean;
+    /**
+     * Additional props assigned to the arrow element.
+     */
+    arrowProps?: {};
+    /**
+     * Additional style properties assigned to the wrapper element.
+     */
+    style?: CSSProperties;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+};
+export type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> & typeof STYLE_MAP & typeof PLACEMENT & typeof TEXT_ALIGNMENT_MAP;
+declare const Tooltip: TooltipType;
+export default Tooltip;

package/components/tooltip/Tooltip.js

@@ -1,85 +1,35 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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) { _defineProperty(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; }
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import omit from 'lodash/fp/omit';
-import { isDesktop } from '../../utils/deviceUtils';
-import OverlayTrigger from '../overlay/OverlayTrigger';
-var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _omit = omit(['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 = _objectWithoutProperties(_omit, _excluded);
-  if (!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.createElement("span", {
-      className: "display-none"
-    });
-  }
-  var wrapperClasses = classNames('tooltip', tooltipStyle && "tooltip-".concat(tooltipStyle), placement, className);
-  var outerStyle = _objectSpread({}, style);
-  var innerClasses = classNames('tooltip-inner', textAlignment && "text-".concat(textAlignment), width && "width-".concat(width));
-  return /*#__PURE__*/React.createElement("div", _extends({}, 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.createElement("div", _extends({
-    className: "tooltip-arrow"
-  }, arrowProps)), /*#__PURE__*/React.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
-};
-Tooltip.AUTO_START = OverlayTrigger.AUTO_START;
-Tooltip.AUTO = OverlayTrigger.AUTO;
-Tooltip.AUTO_END = OverlayTrigger.AUTO_END;
-Tooltip.TOP_START = OverlayTrigger.TOP_START;
-Tooltip.TOP = OverlayTrigger.TOP;
-Tooltip.TOP_END = OverlayTrigger.TOP_END;
-Tooltip.BOTTOM_START = OverlayTrigger.BOTTOM_START;
-Tooltip.BOTTOM = OverlayTrigger.BOTTOM;
-Tooltip.BOTTOM_END = OverlayTrigger.BOTTOM_END;
-Tooltip.RIGHT_START = OverlayTrigger.RIGHT_START;
-Tooltip.RIGHT = OverlayTrigger.RIGHT;
-Tooltip.RIGHT_END = OverlayTrigger.RIGHT_END;
-Tooltip.LEFT_START = OverlayTrigger.LEFT_START;
-Tooltip.LEFT = OverlayTrigger.LEFT;
-Tooltip.LEFT_END = OverlayTrigger.LEFT_END;
-export var TooltipPlacementType = PropTypes.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]);
-Tooltip.propTypes = {
-  placement: TooltipPlacementType,
-  className: PropTypes.string,
-  allowOnTouch: PropTypes.bool,
-  tooltipStyle: PropTypes.oneOf([Tooltip.STYLE_DEFAULT, Tooltip.STYLE_ONBOARDING]),
-  textAlignment: PropTypes.oneOf(['left', 'center', 'right']),
-  width: PropTypes.oneOf(['auto', 100, 150, 200, 250, 300, 350, 400, 450, 500])
-};
-export default Tooltip;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import omit from 'lodash/fp/omit';
+import { isDesktop } from '../../utils/deviceUtils';
+import { PLACEMENT } from '../../values/Placement';
+import { TEXT_ALIGNMENT } from '../../values/TextAlignment';
+const STYLE_MAP = {
+    STYLE_DEFAULT: 'default',
+    STYLE_ONBOARDING: 'onboarding',
+};
+const TEXT_ALIGNMENT_MAP = {
+    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,
+    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,
+    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,
+};
+const Tooltip = forwardRef((props, ref) => {
+    const _a = omit(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = __rest(_a, ["allowOnTouch", "arrowProps", "children", "className", "placement", "style", "textAlignment", "tooltipStyle", "width"]);
+    if (!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 _jsx("span", { className: 'display-none' });
+    }
+    const wrapperClasses = classNames('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, className);
+    const innerClasses = classNames('tooltip-inner', textAlignment && `text-${textAlignment}`, width && `width-${width}`);
+    /* eslint-disable react/no-unknown-property */
+    return (_jsxs("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: Object.assign({}, style), "data-offset": 20 }, { children: [_jsx("div", Object.assign({ className: 'tooltip-arrow' }, arrowProps)), _jsx("div", Object.assign({ className: innerClasses }, { children: children }))] })));
+});
+// statics
+Object.assign(Tooltip, STYLE_MAP);
+Object.assign(Tooltip, PLACEMENT); // is keyed as-is
+Object.assign(Tooltip, TEXT_ALIGNMENT_MAP);
+export default Tooltip;

package/components/video/ResponsiveVideo.d.ts

@@ -0,0 +1,33 @@
+declare const FOUR_BY_THREE = "4by3";
+declare const SIXTEEN_BY_NINE = "16by9";
+export type AspectRatio = typeof FOUR_BY_THREE | typeof SIXTEEN_BY_NINE;
+export type ResponsiveVideoProps = {
+    /**
+     * The link to the source of the video file.
+     */
+    src: string;
+    /**
+     * Defined the aspect ratio of the video.
+     * @default `16by9`
+     *
+     * Possible values are:
+     * `ResponsiveVideo.ASPECT_RATIO_4_BY_3`, `ResponsiveVideo.ASPECT_RATIO_16_BY_9` or
+     * `4by3`, `16by9`.
+     */
+    aspectRatio: '4by3' | '16by9';
+    /**
+     * Allows the fullscreen feature of the underlying embedded iframe.
+     * @default true
+     */
+    allowFullScreen?: boolean;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const ResponsiveVideo: {
+    (props: ResponsiveVideoProps): import("react/jsx-runtime").JSX.Element;
+    ASPECT_RATIO_4_BY_3: "4by3";
+    ASPECT_RATIO_16_BY_9: "16by9";
+};
+export default ResponsiveVideo;

package/components/video/ResponsiveVideo.js

@@ -1,28 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-var ResponsiveVideo = function ResponsiveVideo(props) {
-  var src = props.src,
-    className = props.className,
-    allowFullScreen = props.allowFullScreen,
-    aspectRatio = props.aspectRatio;
-  var wrapperClassName = classNames('video-responsive', "video-responsive-".concat(aspectRatio), className && className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: wrapperClassName
-  }, /*#__PURE__*/React.createElement("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.string.isRequired,
-  aspectRatio: PropTypes.oneOf([ResponsiveVideo.ASPECT_RATIO_4_BY_3, ResponsiveVideo.ASPECT_RATIO_16_BY_9]),
-  allowFullScreen: PropTypes.bool
-};
-export default ResponsiveVideo;
+import { jsx as _jsx } from "react/jsx-runtime";
+import 'react';
+import classNames from 'classnames';
+const FOUR_BY_THREE = '4by3';
+const SIXTEEN_BY_NINE = '16by9';
+const ResponsiveVideo = (props) => {
+    const { src, className = '', allowFullScreen = true, aspectRatio = '16by9' } = props;
+    const wrapperClassName = classNames('video-responsive', `video-responsive-${aspectRatio}`, className && className);
+    return (_jsx("div", Object.assign({ className: wrapperClassName }, { children: _jsx("iframe", { src: src, allowFullScreen: allowFullScreen }) })));
+};
+ResponsiveVideo.ASPECT_RATIO_4_BY_3 = FOUR_BY_THREE;
+ResponsiveVideo.ASPECT_RATIO_16_BY_9 = SIXTEEN_BY_NINE;
+export default ResponsiveVideo;

package/framer-motion.js

@@ -1 +1 @@
-export * from 'framer-motion';
+export * from 'framer-motion';

package/hooks/useAfterMount.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Calls the given callback once after the component has finished mounting and starts executing effects.
+ *
+ * @param callback The effect callback function to be used after the component has been mounted.
+ * @param deps The deps of the callback (the same as if you were using useCallback or useEffect).
+ */
+declare const useAfterMount: (callback: VoidFunction, deps: unknown[]) => void;
+export default useAfterMount;

package/hooks/useAfterMount.js

@@ -1,10 +1,17 @@
-import { useEffect, useRef } from 'react';
-export default function useAfterMount(callback, deps) {
-  var componentJustMountedRef = useRef(true);
-  useEffect(function () {
-    if (!componentJustMountedRef.current) {
-      return callback();
-    }
-    componentJustMountedRef.current = false;
-  }, deps);
-}
+import { useEffect, useRef } from 'react';
+/**
+ * Calls the given callback once after the component has finished mounting and starts executing effects.
+ *
+ * @param callback The effect callback function to be used after the component has been mounted.
+ * @param deps The deps of the callback (the same as if you were using useCallback or useEffect).
+ */
+const useAfterMount = (callback, deps) => {
+    const componentJustMountedRef = useRef(true);
+    useEffect(() => {
+        if (!componentJustMountedRef.current) {
+            return callback();
+        }
+        componentJustMountedRef.current = false;
+    }, deps);
+};
+export default useAfterMount;

package/hooks/useClickOutside.d.ts

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