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

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

@@ -1,90 +1,73 @@
-"use strict";
-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);
-};
-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".');
-    }
-    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: () => { },
-    alwaysShowMask: true,
-    showIcon: false,
-    className: '',
-    inputProps: {},
-};
-TimePicker.propTypes = {
-    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,
-    }),
-};
-exports.default = TimePicker;
+"use strict";
+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 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 noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+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 = MINUTES_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 = !(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".');
+    }
+    return hasExternalValue && isValid;
+};
+const TimePicker = (props) => {
+    const { value, onChange = noop_1.default, alwaysShowMask = true, showIcon = false, className = '', inputProps = {} } = props, remainingProps = tslib_1.__rest(props, ["value", "onChange", "alwaysShowMask", "showIcon", "className", "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);
+        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);
+        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, otherInputProps = tslib_1.__rest(inputProps, ["className"]);
+    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({}, otherInputProps, { 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' }) }))] })))] })));
+};
+exports.default = TimePicker;

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

@@ -1,21 +1,36 @@
-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;
+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/lib/es/components/tooltip/SimpleTooltip.js

@@ -1,18 +1,18 @@
-"use strict";
-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.TRIGGER_CLICK = Trigger_1.TRIGGER.CLICK;
-SimpleTooltip.TRIGGER_HOVER = Trigger_1.TRIGGER.HOVER;
-SimpleTooltip.TRIGGER_FOCUS = Trigger_1.TRIGGER.FOCUS;
-exports.default = SimpleTooltip;
+"use strict";
+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 } = props, remainingProps = tslib_1.__rest(props, ["children", "placement", "trigger", "content", "delay", "popperConfig", "targetRef"]);
+    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({}, remainingProps, { ref: targetRef }, { children: content })), delay: delay, popperConfig: popperConfig }, { children: children })));
+};
+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

@@ -1,32 +1,69 @@
-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;
+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;
+    /**
+     * Additional classes to be set on the inner element.
+     */
+    innerClassName?: string;
+};
+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,37 +1,37 @@
-"use strict";
-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',
-};
-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,
-};
-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;
+"use strict";
+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',
+};
+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,
+};
+const Tooltip = (0, react_1.forwardRef)((props, ref) => {
+    const _a = (0, omit_1.default)(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', innerClassName = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = tslib_1.__rest(_a, ["allowOnTouch", "arrowProps", "children", "className", "innerClassName", "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}`, innerClassName && innerClassName);
+    /* 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

@@ -1,13 +1,33 @@
-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;
+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/lib/es/components/video/ResponsiveVideo.js

@@ -1,14 +1,16 @@
-"use strict";
-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';
-exports.default = ResponsiveVideo;
+"use strict";
+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 FOUR_BY_THREE = '4by3';
+const SIXTEEN_BY_NINE = '16by9';
+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 = FOUR_BY_THREE;
+ResponsiveVideo.ASPECT_RATIO_16_BY_9 = SIXTEEN_BY_NINE;
+exports.default = ResponsiveVideo;

package/lib/es/framer-motion.js

@@ -1,4 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("framer-motion"), exports);
+"use strict";
+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

@@ -1 +1,8 @@
-export default function useAfterMount(callback: any, deps: any): void;
+/**
+ * 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/lib/es/hooks/useAfterMount.js

@@ -1,13 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-function useAfterMount(callback, deps) {
-    const componentJustMountedRef = (0, react_1.useRef)(true);
-    (0, react_1.useEffect)(() => {
-        if (!componentJustMountedRef.current) {
-            return callback();
-        }
-        componentJustMountedRef.current = false;
-    }, deps);
-}
-exports.default = useAfterMount;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("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 = (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

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

package/lib/es/hooks/useClickOutside.js

@@ -1,22 +1,22 @@
-"use strict";
-/* eslint-disable prefer-arrow/prefer-arrow-functions */
-// eslint-disable-next-line max-len
-// Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-function useClickOutside(callback, eventTypes = ['mousedown', 'touchstart']) {
-    const targetRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const listener = event => {
-            if (targetRef.current && !targetRef.current.contains(event.target)) {
-                callback(event);
-            }
-        };
-        eventTypes.forEach(eventType => document.addEventListener(eventType, listener));
-        return () => {
-            eventTypes.forEach(eventType => document.removeEventListener(eventType, listener));
-        };
-    }, [targetRef, callback]);
-    return targetRef;
-}
-exports.default = useClickOutside;
+"use strict";
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+// eslint-disable-next-line max-len
+// Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useClickOutside(callback, eventTypes = ['mousedown', 'touchstart']) {
+    const targetRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const listener = event => {
+            if (targetRef.current && !targetRef.current.contains(event.target)) {
+                callback(event);
+            }
+        };
+        eventTypes.forEach(eventType => document.addEventListener(eventType, listener));
+        return () => {
+            eventTypes.forEach(eventType => document.removeEventListener(eventType, listener));
+        };
+    }, [targetRef, callback]);
+    return targetRef;
+}
+exports.default = useClickOutside;