@reykjavik/hanna-react 0.10.80 → 0.10.81

package/CHANGELOG.md

@@ -4,6 +4,15 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.81
+
+_2023-02-16_
+
+- feat: Add component `Tooltip`
+- fix(ts): Make `MainMenu` onClick handlers return `void`, not `undefined`
+- fix: Suppress accidental dev-mode warnings for
+  `CheckboxButton`/`RadioButtonGroup`s
+
 ## 0.10.80
 
 _2023-02-08_

package/MainMenu.d.ts

@@ -22,7 +22,7 @@ export type MainMenuItem = {
      * "Hamburger menu" (a.k.a. "Mobile menu")
      * … unless the `onClick` function explicitly returns `false`.
      */
-    onClick?: (index: number, item: MainMenuItem) => undefined | boolean;
+    onClick?: (index: number, item: MainMenuItem) => void | boolean;
     controlsId?: string;
 };
 export type MainMenuSeparator = '---';
@@ -50,7 +50,7 @@ export type MainMenuProps = {
      * "Hamburger menu" (a.k.a. "Mobile menu")
      * … unless the `onItemClick` function explicitly returns `false`.
      */
-    onItemClick?: (index: number, item: MainMenuItem) => undefined | boolean;
+    onItemClick?: (index: number, item: MainMenuItem) => void | boolean;
     activePanelId?: string;
     texts?: MainMenuI18n;
     lang?: string;

package/Tooltip.d.ts

@@ -0,0 +1,7 @@
+export type TooltipProps = {
+    label: string;
+    text: string | JSX.Element;
+    iconOnly?: boolean;
+};
+declare const ToolTip: (props: TooltipProps) => JSX.Element;
+export default ToolTip;

package/Tooltip.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_2 = require("@floating-ui/react");
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const getSide = (placement) => placement.split('-')[0];
+const ToolTip = (props) => {
+    const { text, label, iconOnly } = props;
+    const arrowRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, hooks_1.useLaggedState)(false, 300);
+    const { x, y, reference, floating, middlewareData, placement } = (0, react_2.useFloating)({
+        placement: 'top',
+        middleware: [(0, react_2.offset)(10), (0, react_2.flip)(), (0, react_2.shift)(), (0, react_2.arrow)({ element: arrowRef })],
+        whileElementsMounted: react_2.autoUpdate,
+    });
+    const { arrow } = middlewareData;
+    const arrowX = arrow === null || arrow === void 0 ? void 0 : arrow.x;
+    const arrowY = arrow === null || arrow === void 0 ? void 0 : arrow.y;
+    (0, hooks_1.useCallbackOnEsc)(() => {
+        setIsOpen(false);
+    });
+    return (react_1.default.createElement("details", { className: `Tooltip Tooltip--${getSide(placement)}`, open: isOpen, onMouseEnter: () => setIsOpen(true, 100), onFocus: () => {
+            if (isOpen) {
+                setIsOpen(true, 0);
+            }
+        }, onBlur: () => setIsOpen(false), onClick: (e) => {
+            e.preventDefault();
+            setIsOpen(!isOpen, 0);
+        }, onMouseDown: () => {
+            if (isOpen) {
+                setTimeout(() => {
+                    setIsOpen(true, 0);
+                }, 100);
+            }
+        }, onMouseLeave: (e) => {
+            if (e.currentTarget.$contextClicked_firefox_fix) {
+                return;
+            }
+            setIsOpen(false);
+        }, onContextMenu: (e) => {
+            const elm = e.currentTarget;
+            clearTimeout(elm.$contextClicked_firefox_fix);
+            elm.$contextClicked_firefox_fix = setTimeout(() => {
+                delete elm.$contextClicked_firefox_fix;
+            }, 300);
+        }, style: x == null
+            ? undefined
+            : {
+                '--tooltip-content-pos-y': `${y}px`,
+                '--tooltip-content-pos-x': `${x}px`,
+                '--tooltip-arrow-pos-x': `${arrowX}px`,
+                '--tooltip-arrow-pos-y': `${arrowY}px`,
+            } },
+        react_1.default.createElement("summary", { className: (0, getBemClass_1.default)('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
+        react_1.default.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: floating },
+            x !== null && (react_1.default.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),
+            text)));
+};
+exports.default = ToolTip;

package/_abstract/_TogglerInput.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerInput = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const TogglerInput = (props) => {
@@ -12,17 +12,16 @@ const TogglerInput = (props) => {
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
         // TODO: add mo-better i18n thinking
         title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
-    const InnerWrap = innerWrap ? 'span' : react_1.Fragment;
+    const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
+        ' ',
+        reqStar,
+        " ",
+        label,
+        ' '));
     return (react_1.default.createElement(Wrapper, { className: (0, getBemClass_1.default)(bem, modifier, className) },
         react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, inputProps)),
         ' ',
-        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },
-            react_1.default.createElement(InnerWrap, { className: bem + '__label__wrap' },
-                ' ',
-                reqStar,
-                " ",
-                label,
-                ' ')),
+        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid }, innerWrap ? (react_1.default.createElement("span", { className: bem + '__label__wrap' }, labelContent)) : (labelContent)),
         errorMessage && (react_1.default.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
 };
 exports.TogglerInput = TogglerInput;

package/index.d.ts

@@ -86,6 +86,7 @@
 /// <reference path="./TextBlock.d.tsx" />
 /// <reference path="./TextButton.d.tsx" />
 /// <reference path="./TextInput.d.tsx" />
+/// <reference path="./Tooltip.d.tsx" />
 /// <reference path="./utils.d.ts" />
 /// <reference path="./VerticalTabsTOC.d.tsx" />
 /// <reference path="./VSpacer.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.80",
+	"version": "0.10.81",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -13,10 +13,11 @@
 	"homepage": "https://github.com/rvk-utd/hanna/blob/main/modules/hanna-react/README.md",
 	"license": "MIT",
 	"dependencies": {
+		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.10.2",
 		"@hugsmidjan/react": "^0.4.23",
 		"@reykjavik/hanna-css": "^0.3.13",
-		"@reykjavik/hanna-utils": "^0.2.1",
+		"@reykjavik/hanna-utils": "^0.2.3",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",