@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/ToggleInput/ToggleInput.js

@@ -1,34 +1,81 @@
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import c from "styled-components";
-import { useControllableState as T } from "../hooks/useControllableState.js";
-import { useId as I } from "../hooks/useId.js";
-import { Flex as d } from "../Flex/Flex.js";
-import { inputFocusStyle as $ } from "../themes/utils.js";
-import { TextButton as F } from "../TextButton/TextButton.js";
-import { Field as B } from "../Field/Field.js";
-import { FieldLabel as W } from "../Field/FieldLabel.js";
-import { FieldHint as v } from "../Field/FieldHint.js";
-import { FieldError as R } from "../Field/FieldError.js";
-import { useField as S } from "../Field/FieldContext.js";
-import { Typography as y } from "../Typography/Typography.js";
-const j = ({ offLabel: n, onLabel: h, disabled: e, checked: a, onChange: s, size: l = "M", ...m }) => {
-  const [t = !1, p] = T({
-    prop: a
-  }), { error: u, id: o, name: g, required: f } = S(), i = t !== null && !t, w = `${o}-hint`, b = `${o}-error`;
-  return x(q, { position: "relative", hasRadius: !0, padding: 1, background: e ? "neutral150" : "neutral100", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: e ? "not-allowed" : "pointer", hasError: !!u, children: [r(C, { hasRadius: !0, flex: "1 1 50%", paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: e && i ? "neutral200" : i ? "neutral0" : "transparent", borderColor: e && i ? "neutral300" : i ? "neutral200" : e ? "neutral150" : "neutral100", size: l, children: r(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : i ? "danger700" : "neutral600", children: n }) }), r(C, { hasRadius: !0, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: e && t ? "neutral200" : t ? "neutral0" : "transparent", borderColor: e && t ? "neutral300" : t ? "neutral200" : e ? "neutral150" : "neutral100", size: l, children: r(y, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: e ? "neutral700" : t ? "primary600" : "neutral600", children: h }) }), r(z, { ...m, onChange: (k) => {
-    p(k.currentTarget.checked), s?.(k);
-  }, type: "checkbox", id: o, name: g, "aria-required": f, disabled: e, "aria-disabled": e, "aria-describedby": o ? `${w} ${b}` : void 0, checked: !!t })] });
-}, q = c(d)`
-  ${$()}
-`, C = c(d)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const useControllableState = require('../hooks/useControllableState.js');
+const useId = require('../hooks/useId.js');
+const FieldContext = require('../Field/FieldContext.js');
+const Typography = require('../Typography/Typography.js');
+const Flex = require('../Flex/Flex.js');
+const utils = require('../themes/utils.js');
+const Field = require('../Field/Field.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+const TextButton = require('../TextButton/TextButton.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+/**
+ * TODO: This should probably follow the switch button pattern
+ * as seen – https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-button/
+ */
+const ToggleInputInput = React__namespace.forwardRef(({ offLabel, onLabel, disabled, checked: checkedProp, onChange, size = 'M', ...props }, forwardedRef) => {
+    const [checked = false, setChecked] = useControllableState.useControllableState({
+        prop: checkedProp,
+    });
+    const { error, id, name, required } = FieldContext.useField();
+    const isFalseyChecked = checked !== null && !checked;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    return (jsxRuntime.jsxs(ToggleWrapper, { position: "relative", hasRadius: true, padding: 1, background: disabled ? 'neutral150' : 'neutral100', borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: disabled ? 'not-allowed' : 'pointer', hasError: Boolean(error), children: [jsxRuntime.jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && isFalseyChecked ? 'neutral200' : isFalseyChecked ? 'neutral0' : 'transparent', borderColor: disabled && isFalseyChecked
+                    ? 'neutral300'
+                    : isFalseyChecked
+                        ? 'neutral200'
+                        : disabled
+                            ? 'neutral150'
+                            : 'neutral100', size: size, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : isFalseyChecked ? 'danger700' : 'neutral600', children: offLabel }) }), jsxRuntime.jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && checked ? 'neutral200' : checked ? 'neutral0' : 'transparent', borderColor: disabled && checked ? 'neutral300' : checked ? 'neutral200' : disabled ? 'neutral150' : 'neutral100', size: size, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : checked ? 'primary600' : 'neutral600', children: onLabel }) }), jsxRuntime.jsx(Input, { ...props, ref: forwardedRef, onChange: (e) => {
+                    setChecked(e.currentTarget.checked);
+                    onChange?.(e);
+                }, type: "checkbox", id: id, name: name, "aria-required": required, disabled: disabled, "aria-disabled": disabled, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, checked: Boolean(checked) })] }));
+});
+const ToggleWrapper = styled__default.default(Flex.Flex) `
+  ${utils.inputFocusStyle()}
+`;
+const ToggleOption = styled__default.default(Flex.Flex) `
   /**
     We declare the defined value because we want the height of the input when 
     the values are in a row to be 40px. But defining a height on the label
     would break the input when it wraps.
   */
-  padding-top: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
-  padding-bottom: ${({ size: n }) => `${n === "S" ? "2px" : "6px"}`};
-`, z = c.input`
+  padding-top: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+  padding-bottom: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+`;
+const Input = styled__default.default.input `
   height: 100%;
   left: 0;
   opacity: 0;
@@ -36,13 +83,14 @@ const j = ({ offLabel: n, onLabel: h, disabled: e, checked: a, onChange: s, size
   top: 0;
   z-index: 0;
   width: 100%;
-`, V = ({ disabled: n = !1, error: h, hint: e, label: a, name: s, labelAction: l, required: m = !1, id: t, onClear: p, clearLabel: u, checked: o, ...g }) => {
-  const f = I(t);
-  return r(B, { name: s, hint: e, error: h, id: f, required: m, maxWidth: "320px", children: x(d, { direction: "column", alignItems: "stretch", gap: 1, children: [x(d, { children: [a ? r(W, { action: l, children: a }) : null, u && p && o !== null && !n && r(E, { onClick: p, children: u })] }), r(j, { checked: o, disabled: n, ...g }), r(v, {}), r(R, {})] }) });
-}, E = c(F)`
+`;
+const ToggleInput = React__namespace.forwardRef(({ disabled = false, error, hint, label, name, labelAction, required = false, id, onClear, clearLabel, checked, ...props }, forwardedRef) => {
+    const generatedId = useId.useId(id);
+    return (jsxRuntime.jsx(Field.Field, { name: name, hint: hint, error: error, id: generatedId, required: required, maxWidth: "320px", children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsxs(Flex.Flex, { children: [label ? jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }) : null, clearLabel && onClear && checked !== null && !disabled && (jsxRuntime.jsx(ClearButton, { onClick: onClear, children: clearLabel }))] }), jsxRuntime.jsx(ToggleInputInput, { ref: forwardedRef, checked: checked, disabled: disabled, ...props }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+const ClearButton = styled__default.default(TextButton.TextButton) `
   align-self: flex-end;
   margin-left: auto;
 `;
-export {
-  V as ToggleInput
-};
+
+exports.ToggleInput = ToggleInput;

package/dist/ToggleInput/ToggleInput.mjs

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import styled from 'styled-components';
+import { useControllableState } from '../hooks/useControllableState.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { useField } from '../Field/FieldContext.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { inputFocusStyle } from '../themes/utils.mjs';
+import { Field } from '../Field/Field.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+import { TextButton } from '../TextButton/TextButton.mjs';
+
+/**
+ * TODO: This should probably follow the switch button pattern
+ * as seen – https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-button/
+ */
+const ToggleInputInput = React.forwardRef(({ offLabel, onLabel, disabled, checked: checkedProp, onChange, size = 'M', ...props }, forwardedRef) => {
+    const [checked = false, setChecked] = useControllableState({
+        prop: checkedProp,
+    });
+    const { error, id, name, required } = useField();
+    const isFalseyChecked = checked !== null && !checked;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    return (jsxs(ToggleWrapper, { position: "relative", hasRadius: true, padding: 1, background: disabled ? 'neutral150' : 'neutral100', borderStyle: "solid", borderWidth: "1px", borderColor: "neutral200", wrap: "wrap", cursor: disabled ? 'not-allowed' : 'pointer', hasError: Boolean(error), children: [jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && isFalseyChecked ? 'neutral200' : isFalseyChecked ? 'neutral0' : 'transparent', borderColor: disabled && isFalseyChecked
+                    ? 'neutral300'
+                    : isFalseyChecked
+                        ? 'neutral200'
+                        : disabled
+                            ? 'neutral150'
+                            : 'neutral100', size: size, children: jsx(Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : isFalseyChecked ? 'danger700' : 'neutral600', children: offLabel }) }), jsx(ToggleOption, { hasRadius: true, flex: "1 1 50%", paddingLeft: 3, paddingRight: 3, justifyContent: "center", background: disabled && checked ? 'neutral200' : checked ? 'neutral0' : 'transparent', borderColor: disabled && checked ? 'neutral300' : checked ? 'neutral200' : disabled ? 'neutral150' : 'neutral100', size: size, children: jsx(Typography, { variant: "pi", fontWeight: "bold", textTransform: "uppercase", textColor: disabled ? 'neutral700' : checked ? 'primary600' : 'neutral600', children: onLabel }) }), jsx(Input, { ...props, ref: forwardedRef, onChange: (e) => {
+                    setChecked(e.currentTarget.checked);
+                    onChange?.(e);
+                }, type: "checkbox", id: id, name: name, "aria-required": required, disabled: disabled, "aria-disabled": disabled, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, checked: Boolean(checked) })] }));
+});
+const ToggleWrapper = styled(Flex) `
+  ${inputFocusStyle()}
+`;
+const ToggleOption = styled(Flex) `
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+  padding-bottom: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+`;
+const Input = styled.input `
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+  width: 100%;
+`;
+const ToggleInput = React.forwardRef(({ disabled = false, error, hint, label, name, labelAction, required = false, id, onClear, clearLabel, checked, ...props }, forwardedRef) => {
+    const generatedId = useId(id);
+    return (jsx(Field, { name: name, hint: hint, error: error, id: generatedId, required: required, maxWidth: "320px", children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxs(Flex, { children: [label ? jsx(FieldLabel, { action: labelAction, children: label }) : null, clearLabel && onClear && checked !== null && !disabled && (jsx(ClearButton, { onClick: onClear, children: clearLabel }))] }), jsx(ToggleInputInput, { ref: forwardedRef, checked: checked, disabled: disabled, ...props }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+const ClearButton = styled(TextButton) `
+  align-self: flex-end;
+  margin-left: auto;
+`;
+
+export { ToggleInput };

package/dist/ToggleInput/index.js

@@ -1,4 +1,9 @@
-import { ToggleInput as g } from "./ToggleInput.js";
-export {
-  g as ToggleInput
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const ToggleInput = require('./ToggleInput.js');
+
+
+
+exports.ToggleInput = ToggleInput.ToggleInput;

package/dist/ToggleInput/index.mjs

@@ -0,0 +1 @@
+export { ToggleInput } from './ToggleInput.mjs';

package/dist/Tooltip/Tooltip.js

@@ -1,26 +1,58 @@
-import { jsxs as l, Fragment as x, jsx as o } from "react/jsx-runtime";
-import * as y from "react";
-import g from "styled-components";
-import { useTooltipHandlers as T } from "./hooks/useTooltipHandlers.js";
-import { useTooltipLayout as v } from "./hooks/useTooltipLayout.js";
-import { useId as d } from "../hooks/useId.js";
-import { Portal as I } from "../Portal/Portal.js";
-import { Box as R } from "../Box/Box.js";
-import { VisuallyHidden as H } from "../VisuallyHidden/VisuallyHidden.js";
-import { Typography as W } from "../Typography/Typography.js";
-const j = g(R)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const useTooltipHandlers = require('./hooks/useTooltipHandlers.js');
+const useTooltipLayout = require('./hooks/useTooltipLayout.js');
+const useId = require('../hooks/useId.js');
+const Portal = require('../Portal/Portal.js');
+const Box = require('../Box/Box.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const TooltipWrapper = styled__default.default(Box.Box) `
   /* z-index exist because of its position inside Modals */
   z-index: 4;
-  display: ${({ visible: e }) => e ? "revert" : "none"};
-`, S = ({ children: e, label: n, description: r, delay: s = 500, position: p = "top", id: a, ...m }) => {
-  const t = d(a), c = d(), { visible: i, ...f } = T(s), { tooltipWrapperRef: u, toggleSourceRef: b } = v(i, p), h = y.cloneElement(e, {
-    tabIndex: 0,
-    "aria-labelledby": n ? t : void 0,
-    "aria-describedby": r ? t : void 0,
-    ...f
-  });
-  return l(x, { children: [o(I, { children: l(j, { id: t, background: "neutral900", hasRadius: !0, padding: 2, role: "tooltip", ref: u, visible: i, position: "absolute", ...m, children: [i && o(H, { id: c, children: r }), o(W, { as: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: n || r })] }) }), o("span", { ref: b, children: h })] });
-};
-export {
-  S as Tooltip
+  display: ${({ visible }) => (visible ? 'revert' : 'none')};
+`;
+const Tooltip = ({ children, label, description, delay = 500, position = 'top', id, ...props }) => {
+    const tooltipId = useId.useId(id);
+    const descriptionId = useId.useId();
+    const { visible, ...tooltipHandlers } = useTooltipHandlers.useTooltipHandlers(delay);
+    const { tooltipWrapperRef, toggleSourceRef } = useTooltipLayout.useTooltipLayout(visible, position);
+    const childrenClone = React__namespace.cloneElement(children, {
+        tabIndex: 0,
+        'aria-labelledby': label ? tooltipId : undefined,
+        'aria-describedby': description ? tooltipId : undefined,
+        ...tooltipHandlers,
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsxs(TooltipWrapper, { id: tooltipId, background: "neutral900", hasRadius: true, padding: 2, role: "tooltip", ref: tooltipWrapperRef, visible: visible, position: "absolute", ...props, children: [visible && jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { id: descriptionId, children: description }), jsxRuntime.jsx(Typography.Typography, { as: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: label || description })] }) }), jsxRuntime.jsx("span", { ref: toggleSourceRef, children: childrenClone })] }));
 };
+
+exports.Tooltip = Tooltip;

package/dist/Tooltip/Tooltip.mjs

@@ -0,0 +1,31 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import styled from 'styled-components';
+import { useTooltipHandlers } from './hooks/useTooltipHandlers.mjs';
+import { useTooltipLayout } from './hooks/useTooltipLayout.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { Portal } from '../Portal/Portal.mjs';
+import { Box } from '../Box/Box.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const TooltipWrapper = styled(Box) `
+  /* z-index exist because of its position inside Modals */
+  z-index: 4;
+  display: ${({ visible }) => (visible ? 'revert' : 'none')};
+`;
+const Tooltip = ({ children, label, description, delay = 500, position = 'top', id, ...props }) => {
+    const tooltipId = useId(id);
+    const descriptionId = useId();
+    const { visible, ...tooltipHandlers } = useTooltipHandlers(delay);
+    const { tooltipWrapperRef, toggleSourceRef } = useTooltipLayout(visible, position);
+    const childrenClone = React.cloneElement(children, {
+        tabIndex: 0,
+        'aria-labelledby': label ? tooltipId : undefined,
+        'aria-describedby': description ? tooltipId : undefined,
+        ...tooltipHandlers,
+    });
+    return (jsxs(Fragment, { children: [jsx(Portal, { children: jsxs(TooltipWrapper, { id: tooltipId, background: "neutral900", hasRadius: true, padding: 2, role: "tooltip", ref: tooltipWrapperRef, visible: visible, position: "absolute", ...props, children: [visible && jsx(VisuallyHidden, { id: descriptionId, children: description }), jsx(Typography, { as: "p", variant: "pi", fontWeight: "bold", textColor: "neutral0", children: label || description })] }) }), jsx("span", { ref: toggleSourceRef, children: childrenClone })] }));
+};
+
+export { Tooltip };

package/dist/Tooltip/hooks/useTooltipHandlers.js

@@ -1,22 +1,39 @@
-import { useState as s, useRef as u, useEffect as c } from "react";
-const p = (n) => {
-  const [r, e] = s(!1), o = u(null), t = () => {
-    typeof o.current == "number" && (clearTimeout(o.current), o.current = null);
-  };
-  return c(() => () => {
-    t();
-  }, []), { visible: r, onFocus: () => {
-    e(!0);
-  }, onBlur: () => {
-    e(!1);
-  }, onMouseEnter: () => {
-    o.current = setTimeout(() => {
-      e(!0);
-    }, n);
-  }, onMouseLeave: () => {
-    t(), e(!1);
-  } };
-};
-export {
-  p as useTooltipHandlers
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const useTooltipHandlers = (delay) => {
+    const [visible, setVisible] = React.useState(false);
+    const timerRef = React.useRef(null);
+    const clearTimer = () => {
+        if (typeof timerRef.current === 'number') {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    };
+    React.useEffect(() => {
+        return () => {
+            clearTimer();
+        };
+    }, []);
+    const onFocus = () => {
+        setVisible(true);
+    };
+    const onBlur = () => {
+        setVisible(false);
+    };
+    const onMouseEnter = () => {
+        timerRef.current = setTimeout(() => {
+            setVisible(true);
+        }, delay);
+    };
+    const onMouseLeave = () => {
+        clearTimer();
+        setVisible(false);
+    };
+    return { visible, onFocus, onBlur, onMouseEnter, onMouseLeave };
 };
+
+exports.useTooltipHandlers = useTooltipHandlers;

package/dist/Tooltip/hooks/useTooltipHandlers.mjs

@@ -0,0 +1,35 @@
+import { useState, useRef, useEffect } from 'react';
+
+const useTooltipHandlers = (delay) => {
+    const [visible, setVisible] = useState(false);
+    const timerRef = useRef(null);
+    const clearTimer = () => {
+        if (typeof timerRef.current === 'number') {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    };
+    useEffect(() => {
+        return () => {
+            clearTimer();
+        };
+    }, []);
+    const onFocus = () => {
+        setVisible(true);
+    };
+    const onBlur = () => {
+        setVisible(false);
+    };
+    const onMouseEnter = () => {
+        timerRef.current = setTimeout(() => {
+            setVisible(true);
+        }, delay);
+    };
+    const onMouseLeave = () => {
+        clearTimer();
+        setVisible(false);
+    };
+    return { visible, onFocus, onBlur, onMouseEnter, onMouseLeave };
+};
+
+export { useTooltipHandlers };

package/dist/Tooltip/hooks/useTooltipLayout.js

@@ -1,17 +1,25 @@
-import { useRef as u, useLayoutEffect as c } from "react";
-import { positionTooltip as f } from "../utils/positionTooltip.js";
-const g = (o, e) => {
-  const r = u(null), l = u(null);
-  return c(() => {
-    if (o) {
-      const t = r.current, p = l.current;
-      if (t && p) {
-        const n = f(t, p, e);
-        t.style.left = `${n.left}px`, t.style.top = `${n.top}px`;
-      }
-    }
-  }, [e, o]), { tooltipWrapperRef: r, toggleSourceRef: l };
-};
-export {
-  g as useTooltipLayout
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const positionTooltip = require('../utils/positionTooltip.js');
+
+const useTooltipLayout = (visible, position) => {
+    const tooltipWrapperRef = React.useRef(null);
+    const toggleSourceRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        if (visible) {
+            const tooltip = tooltipWrapperRef.current;
+            const toggleSource = toggleSourceRef.current;
+            if (tooltip && toggleSource) {
+                const tooltipPosition = positionTooltip.positionTooltip(tooltip, toggleSource, position);
+                tooltip.style.left = `${tooltipPosition.left}px`;
+                tooltip.style.top = `${tooltipPosition.top}px`;
+            }
+        }
+    }, [position, visible]);
+    return { tooltipWrapperRef, toggleSourceRef };
 };
+
+exports.useTooltipLayout = useTooltipLayout;

package/dist/Tooltip/hooks/useTooltipLayout.mjs

@@ -0,0 +1,21 @@
+import { useRef, useLayoutEffect } from 'react';
+import { positionTooltip } from '../utils/positionTooltip.mjs';
+
+const useTooltipLayout = (visible, position) => {
+    const tooltipWrapperRef = useRef(null);
+    const toggleSourceRef = useRef(null);
+    useLayoutEffect(() => {
+        if (visible) {
+            const tooltip = tooltipWrapperRef.current;
+            const toggleSource = toggleSourceRef.current;
+            if (tooltip && toggleSource) {
+                const tooltipPosition = positionTooltip(tooltip, toggleSource, position);
+                tooltip.style.left = `${tooltipPosition.left}px`;
+                tooltip.style.top = `${tooltipPosition.top}px`;
+            }
+        }
+    }, [position, visible]);
+    return { tooltipWrapperRef, toggleSourceRef };
+};
+
+export { useTooltipLayout };

package/dist/Tooltip/index.js

@@ -1,4 +1,9 @@
-import { Tooltip as r } from "./Tooltip.js";
-export {
-  r as Tooltip
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Tooltip = require('./Tooltip.js');
+
+
+
+exports.Tooltip = Tooltip.Tooltip;

package/dist/Tooltip/index.mjs

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

package/dist/Tooltip/utils/positionTooltip.js

@@ -1,27 +1,74 @@
-const s = (h, i) => {
-  const f = (h.width - i.width) / 2, n = i.left - f, t = i.top + i.height + 8 + window.pageYOffset;
-  return {
-    left: n,
-    top: t
-  };
-}, w = (h, i) => {
-  const f = (h.height - i.height) / 2, n = i.left + i.width + 8, t = i.top - f + window.pageYOffset;
-  return { left: n, top: t };
-}, d = (h, i) => {
-  const f = (h.height - i.height) / 2, n = i.left - h.width - 8, t = i.top - f + window.pageYOffset;
-  return { left: n, top: t };
-}, p = (h, i) => {
-  const f = (h.width - i.width) / 2;
-  let n = i.left - f, t = i.top - h.height - 8 + window.pageYOffset;
-  const E = window.innerWidth - i.right;
-  return i.left + h.width - E > window.innerWidth ? (n = i.left - h.width - 8, t = i.top + window.scrollY - i.height / 2) : n < 0 ? (n = i.width + i.left + 8, t = i.top + window.scrollY - h.height / 2 + 8) : t < 0 && n > 0 && (t = i.top + i.height + 8), {
-    left: n,
-    top: t
-  };
-}, e = (h, i, f) => {
-  const n = h.getBoundingClientRect(), t = i.getBoundingClientRect();
-  return f === "bottom" ? s(n, t) : f === "right" ? w(n, t) : f === "left" ? d(n, t) : p(n, t);
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const SPACE_BETWEEN = 8;
+const positionBottom = (tooltipRect, toggleSourceRect) => {
+    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
+    const left = toggleSourceRect.left - widthDifference;
+    const top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN + window.pageYOffset;
+    return {
+        left,
+        top,
+    };
 };
-export {
-  e as positionTooltip
+const positionRight = (tooltipRect, toggleSourceRect) => {
+    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
+    const left = toggleSourceRect.left + toggleSourceRect.width + SPACE_BETWEEN;
+    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
+    return { left, top };
 };
+const positionLeft = (tooltipRect, toggleSourceRect) => {
+    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
+    const left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
+    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
+    return { left, top };
+};
+const positionTop = (tooltipRect, toggleSourceRect) => {
+    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
+    let left = toggleSourceRect.left - widthDifference;
+    let top = toggleSourceRect.top - tooltipRect.height - SPACE_BETWEEN + window.pageYOffset;
+    // CONDITIONS TO HANDLE TOOLTIP OVERFLOW OUT OF VIEWPORT
+    // calculate the space between rightside viewport to rightside source element
+    // knowing this space will help calculate if tooltip will overflow right side
+    const rightSpaceDifference = window.innerWidth - toggleSourceRect.right;
+    // calculate rightside pos of tooltip to compare later to window.innerWidth
+    const overflowRight = toggleSourceRect.left + tooltipRect.width - rightSpaceDifference;
+    if (overflowRight > window.innerWidth) {
+        // if tooltip overflow right side of viewport
+        // place tooltip left side from source element
+        left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
+        top = toggleSourceRect.top + window.scrollY - toggleSourceRect.height / 2;
+    }
+    else if (left < 0) {
+        // if overflow left
+        // place tooltip right side from source element
+        left = toggleSourceRect.width + toggleSourceRect.left + SPACE_BETWEEN;
+        top = toggleSourceRect.top + window.scrollY - tooltipRect.height / 2 + SPACE_BETWEEN;
+    }
+    else if (top < 0 && left > 0) {
+        // if overflow top but not left
+        // place tooltip below source element
+        top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN;
+    }
+    return {
+        left,
+        top,
+    };
+};
+const positionTooltip = (tooltipNode, toggleSourceNode, position) => {
+    const tooltipRect = tooltipNode.getBoundingClientRect();
+    const toggleSourceRect = toggleSourceNode.getBoundingClientRect();
+    if (position === 'bottom') {
+        return positionBottom(tooltipRect, toggleSourceRect);
+    }
+    if (position === 'right') {
+        return positionRight(tooltipRect, toggleSourceRect);
+    }
+    if (position === 'left') {
+        return positionLeft(tooltipRect, toggleSourceRect);
+    }
+    return positionTop(tooltipRect, toggleSourceRect);
+};
+
+exports.positionTooltip = positionTooltip;