@reykjavik/hanna-react 0.10.170 → 0.10.171

package/CHANGELOG.md

@@ -4,6 +4,17 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.171
+
+_2026-04-02_
+
+- feat: Add component `StatusTag`
+- feat: Add component `Timeline`
+- `utils`:
+  - feat: Deprecate `domid` in favor of `dumbId` from `@reykjavik/hanna-utils`
+  - fix: Update className selector for `MobileMenuToggler` button in
+    `useHannaUIState()`
+
 ## 0.10.170
 
 _2026-03-10_

package/Datepicker.d.ts

@@ -12,7 +12,7 @@ export type DatepickerProps = {
      * the `<input/>` element is still `type="text"` and it's `.value` is
      * the human-readable (parsed) date `string`.
      *
-     * Use this incombination with the `isoMode` prop to submit ISO-8601
+     * Use this in combination with the `isoMode` prop to submit ISO-8601
      * formatted input values
      */
     defaultValue?: Date;

package/MobileMenuToggler/_useMobileMenuToggling.js

@@ -10,7 +10,7 @@ const htmlClass = (className, add) => {
 const noop = () => undefined;
 const HamburgerMedias = { phone: 1, phablet: 1, tablet: 1 };
 const useMobileMenuToggling = (opts) => {
-    const { doInitialize, togglerElm = '.MainMenuToggler' } = typeof opts === 'boolean'
+    const { doInitialize, togglerElm = '.MainMenuToggler, .MobileMenuToggler' } = typeof opts === 'boolean'
         ? ({ doInitialize: opts })
         : !opts
             ? ({ doInitialize: true })

package/StatusTag.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
+declare const colors: {
+    readonly none: undefined;
+    readonly blue: "color--blue";
+    readonly green: "color--green";
+    readonly yellow: "color--yellow";
+    readonly red: "color--red";
+};
+export type StatusTagColor = keyof typeof colors;
+export type StatusTagProps = {
+    /** Label takes preference over `children` */
+    label?: ReactNode;
+    /** Default: 'none' (grey) */
+    color?: StatusTagColor;
+    /** Hides/removes the colored indicator light ball/bulp. */
+    light?: 'off';
+    /** Make the status tag larger. Defaults to false. */
+    large?: boolean;
+    children?: ReactNode;
+} & WrapperElmProps<'span', 'children'>;
+export declare const StatusTag: (props: StatusTagProps) => JSX.Element;
+export {};

package/StatusTag.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusTag = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const colors = {
+    none: undefined,
+    blue: 'color--blue',
+    green: 'color--green',
+    yellow: 'color--yellow',
+    red: 'color--red',
+};
+const StatusTag = (props) => {
+    const { children, label, color, light, large, wrapperProps } = props;
+    return (react_1.default.createElement("span", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('StatusTag', [colors[color || 'none'], large && 'large', light === 'off' && 'light--off'], (wrapperProps || {}).className) }),
+        react_1.default.createElement("span", { className: "StatusTag__label" }, label || children)));
+};
+exports.StatusTag = StatusTag;

package/Timeline.d.ts

@@ -0,0 +1,47 @@
+import { TagPillColor } from '@reykjavik/hanna-react/TagPill';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
+export type TimeLineItem = {
+    /** The main timeline item value */
+    title: string;
+    /** Flexible categorization field. Could for example contain a person/user's name  */
+    category?: string;
+    /** More details about the  */
+    description?: string;
+    /**
+     * The date/time of the timeline event.
+     *
+     * `Date` and `number` (timestamp) values are auto formatted according to the
+     * currently active `HannaLang`. If you need a non-default format pass it as a
+     * preformatted string.
+     */
+    date?: Date | number | string;
+    /** Displays a status tag next to the timeline item. */
+    status?: {
+        label: string;
+        color?: TagPillColor;
+    };
+    /**
+     * If no item is marked current, then the first item in the array is impilicitly the current one.
+     *
+     * If multiple items are marked current, then the first one is the current one.
+     */
+    current?: boolean;
+} | 'loading';
+export type TimelineProps = {
+    /** Optional title to show above the timeline. */
+    title?: string;
+    /** The items to display in the timeline. */
+    items: Array<TimeLineItem>;
+    /**
+     * If true, Item `Dates` will be formatted year, month day only, without the
+     * time of day (hours and minutes) visible.
+     *
+     * Default: `false`
+     */
+    hideTime?: boolean;
+    /** If true, the timeline will be sorted with the oldest item first. By default, the newest item is first. */
+    oldestFirst?: boolean;
+    /** Defaults to the current global `DEFAULT_LANG` */
+    lang?: HannaLang;
+};
+export declare const Timeline: (props: TimelineProps) => JSX.Element;

package/Timeline.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Skeleton_1 = require("@reykjavik/hanna-react/Skeleton");
+const TagPill_1 = require("@reykjavik/hanna-react/TagPill");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const dateFormatters = {};
+const dateTimeFormatters = {};
+const getDateFormatter = (lang, hideTime) => hideTime
+    ? dateFormatters[lang] ||
+        (dateFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }))
+    : dateTimeFormatters[lang] ||
+        (dateTimeFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        }));
+const Timeline = (props) => {
+    const { title, items, oldestFirst, lang = i18n_1.DEFAULT_LANG, hideTime } = props;
+    const dateFmt = getDateFormatter(lang, hideTime);
+    const currentIdx = Math.max(items.findIndex((item) => item !== 'loading' && !!item.current), 0);
+    return (react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)('Timeline', [oldestFirst && 'oldestFirst']) },
+        title && react_1.default.createElement("h3", { className: "Timeline__title" }, title),
+        react_1.default.createElement("ul", { className: "Timeline__items" }, items.map((item, i) => {
+            if (item === 'loading') {
+                return (react_1.default.createElement("li", { key: i, className: "Timeline__item Timeline__item--loading" },
+                    react_1.default.createElement(Skeleton_1.Skeleton, { height: 1, wrapperProps: { className: 'Skeleton__circle' } }),
+                    react_1.default.createElement(Skeleton_1.Skeleton, { items: 1, height: 3, text: true })));
+            }
+            const { title, category: author, description, date, status } = item;
+            return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('Timeline__item', [
+                    i < currentIdx && 'future',
+                    i > currentIdx && 'past',
+                ]), "aria-current": currentIdx === i ? 'step' : undefined },
+                react_1.default.createElement("strong", { className: "Timeline__item__title" }, title),
+                status && react_1.default.createElement(TagPill_1.TagPill, { color: status.color }, status.label),
+                author && react_1.default.createElement("div", { className: "Timeline__item__category" }, author),
+                description && (react_1.default.createElement("div", { className: "Timeline__item__description" }, description)),
+                date && (react_1.default.createElement("div", { className: "Timeline__item__date" }, typeof date === 'string' ? date : dateFmt.format(date)))));
+        }))));
+};
+exports.Timeline = Timeline;

package/esm/Datepicker.d.ts

@@ -12,7 +12,7 @@ export type DatepickerProps = {
      * the `<input/>` element is still `type="text"` and it's `.value` is
      * the human-readable (parsed) date `string`.
      *
-     * Use this incombination with the `isoMode` prop to submit ISO-8601
+     * Use this in combination with the `isoMode` prop to submit ISO-8601
      * formatted input values
      */
     defaultValue?: Date;

package/esm/MobileMenuToggler/_useMobileMenuToggling.js

@@ -7,7 +7,7 @@ const htmlClass = (className, add) => {
 const noop = () => undefined;
 const HamburgerMedias = { phone: 1, phablet: 1, tablet: 1 };
 export const useMobileMenuToggling = (opts) => {
-    const { doInitialize, togglerElm = '.MainMenuToggler' } = typeof opts === 'boolean'
+    const { doInitialize, togglerElm = '.MainMenuToggler, .MobileMenuToggler' } = typeof opts === 'boolean'
         ? ({ doInitialize: opts })
         : !opts
             ? ({ doInitialize: true })

package/esm/StatusTag.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
+declare const colors: {
+    readonly none: undefined;
+    readonly blue: "color--blue";
+    readonly green: "color--green";
+    readonly yellow: "color--yellow";
+    readonly red: "color--red";
+};
+export type StatusTagColor = keyof typeof colors;
+export type StatusTagProps = {
+    /** Label takes preference over `children` */
+    label?: ReactNode;
+    /** Default: 'none' (grey) */
+    color?: StatusTagColor;
+    /** Hides/removes the colored indicator light ball/bulp. */
+    light?: 'off';
+    /** Make the status tag larger. Defaults to false. */
+    large?: boolean;
+    children?: ReactNode;
+} & WrapperElmProps<'span', 'children'>;
+export declare const StatusTag: (props: StatusTagProps) => JSX.Element;
+export {};

package/esm/StatusTag.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { modifiedClass } from '@reykjavik/hanna-utils';
+const colors = {
+    none: undefined,
+    blue: 'color--blue',
+    green: 'color--green',
+    yellow: 'color--yellow',
+    red: 'color--red',
+};
+export const StatusTag = (props) => {
+    const { children, label, color, light, large, wrapperProps } = props;
+    return (React.createElement("span", Object.assign({}, wrapperProps, { className: modifiedClass('StatusTag', [colors[color || 'none'], large && 'large', light === 'off' && 'light--off'], (wrapperProps || {}).className) }),
+        React.createElement("span", { className: "StatusTag__label" }, label || children)));
+};

package/esm/Timeline.d.ts

@@ -0,0 +1,47 @@
+import { TagPillColor } from '@reykjavik/hanna-react/TagPill';
+import { HannaLang } from '@reykjavik/hanna-utils/i18n';
+export type TimeLineItem = {
+    /** The main timeline item value */
+    title: string;
+    /** Flexible categorization field. Could for example contain a person/user's name  */
+    category?: string;
+    /** More details about the  */
+    description?: string;
+    /**
+     * The date/time of the timeline event.
+     *
+     * `Date` and `number` (timestamp) values are auto formatted according to the
+     * currently active `HannaLang`. If you need a non-default format pass it as a
+     * preformatted string.
+     */
+    date?: Date | number | string;
+    /** Displays a status tag next to the timeline item. */
+    status?: {
+        label: string;
+        color?: TagPillColor;
+    };
+    /**
+     * If no item is marked current, then the first item in the array is impilicitly the current one.
+     *
+     * If multiple items are marked current, then the first one is the current one.
+     */
+    current?: boolean;
+} | 'loading';
+export type TimelineProps = {
+    /** Optional title to show above the timeline. */
+    title?: string;
+    /** The items to display in the timeline. */
+    items: Array<TimeLineItem>;
+    /**
+     * If true, Item `Dates` will be formatted year, month day only, without the
+     * time of day (hours and minutes) visible.
+     *
+     * Default: `false`
+     */
+    hideTime?: boolean;
+    /** If true, the timeline will be sorted with the oldest item first. By default, the newest item is first. */
+    oldestFirst?: boolean;
+    /** Defaults to the current global `DEFAULT_LANG` */
+    lang?: HannaLang;
+};
+export declare const Timeline: (props: TimelineProps) => JSX.Element;

package/esm/Timeline.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Skeleton } from '@reykjavik/hanna-react/Skeleton';
+import { TagPill } from '@reykjavik/hanna-react/TagPill';
+import { modifiedClass } from '@reykjavik/hanna-utils';
+import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
+const dateFormatters = {};
+const dateTimeFormatters = {};
+const getDateFormatter = (lang, hideTime) => hideTime
+    ? dateFormatters[lang] ||
+        (dateFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }))
+    : dateTimeFormatters[lang] ||
+        (dateTimeFormatters[lang] = new Intl.DateTimeFormat(lang, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        }));
+export const Timeline = (props) => {
+    const { title, items, oldestFirst, lang = DEFAULT_LANG, hideTime } = props;
+    const dateFmt = getDateFormatter(lang, hideTime);
+    const currentIdx = Math.max(items.findIndex((item) => item !== 'loading' && !!item.current), 0);
+    return (React.createElement("div", { className: modifiedClass('Timeline', [oldestFirst && 'oldestFirst']) },
+        title && React.createElement("h3", { className: "Timeline__title" }, title),
+        React.createElement("ul", { className: "Timeline__items" }, items.map((item, i) => {
+            if (item === 'loading') {
+                return (React.createElement("li", { key: i, className: "Timeline__item Timeline__item--loading" },
+                    React.createElement(Skeleton, { height: 1, wrapperProps: { className: 'Skeleton__circle' } }),
+                    React.createElement(Skeleton, { items: 1, height: 3, text: true })));
+            }
+            const { title, category: author, description, date, status } = item;
+            return (React.createElement("li", { key: i, className: modifiedClass('Timeline__item', [
+                    i < currentIdx && 'future',
+                    i > currentIdx && 'past',
+                ]), "aria-current": currentIdx === i ? 'step' : undefined },
+                React.createElement("strong", { className: "Timeline__item__title" }, title),
+                status && React.createElement(TagPill, { color: status.color }, status.label),
+                author && React.createElement("div", { className: "Timeline__item__category" }, author),
+                description && (React.createElement("div", { className: "Timeline__item__description" }, description)),
+                date && (React.createElement("div", { className: "Timeline__item__date" }, typeof date === 'string' ? date : dateFmt.format(date)))));
+        }))));
+};

package/esm/index.d.ts

@@ -8,12 +8,14 @@
 /// <reference path="./VerticalTabsTOC.d.tsx" />
 /// <reference path="./VSpacer.d.tsx" />
 /// <reference path="./Tooltip.d.tsx" />
+/// <reference path="./Timeline.d.tsx" />
 /// <reference path="./TextInput.d.tsx" />
 /// <reference path="./TextButton.d.tsx" />
 /// <reference path="./TextBlock.d.tsx" />
 /// <reference path="./TagPill.d.tsx" />
 /// <reference path="./Tabs.d.tsx" />
 /// <reference path="./SubHeading.d.tsx" />
+/// <reference path="./StatusTag.d.tsx" />
 /// <reference path="./Skeleton.d.tsx" />
 /// <reference path="./SiteSearchInput.d.tsx" />
 /// <reference path="./SiteSearchCurtain.d.tsx" />

package/esm/utils/useDomid.d.ts

@@ -1,7 +1,3 @@
-/**
- * Returns a short locally-unique ID string.
- */
-export declare const domid: () => string;
 /**
  * Returns a stable, unique ID string.
  *
@@ -14,3 +10,5 @@ export declare const domid: () => string;
  * mode and there's nothing we can do about it, except to ignore them.)
  */
 export declare const useDomid: (staticId?: string) => string;
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+export declare const domid: () => string;

package/esm/utils/useDomid.js

@@ -1,12 +1,7 @@
 import React from 'react';
+import { dumbId } from '@reykjavik/hanna-utils';
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
 const useId = React.useId;
-const domid_prefix = `_${ /*@__PURE__*/`${Date.now()}-`.slice(6)}`;
-let domid_incr = 0;
-/**
- * Returns a short locally-unique ID string.
- */
-export const domid = () => domid_prefix + domid_incr++;
 /**
  * Returns a stable, unique ID string.
  *
@@ -26,7 +21,9 @@ export const useDomid = useId
     : (staticId) => {
         const idRef = React.useRef();
         if (!idRef.current) {
-            idRef.current = staticId || domid();
+            idRef.current = staticId || dumbId();
         }
         return idRef.current;
     };
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+export const domid = dumbId;

package/index.d.ts

@@ -8,12 +8,14 @@
 /// <reference path="./VerticalTabsTOC.d.tsx" />
 /// <reference path="./VSpacer.d.tsx" />
 /// <reference path="./Tooltip.d.tsx" />
+/// <reference path="./Timeline.d.tsx" />
 /// <reference path="./TextInput.d.tsx" />
 /// <reference path="./TextButton.d.tsx" />
 /// <reference path="./TextBlock.d.tsx" />
 /// <reference path="./TagPill.d.tsx" />
 /// <reference path="./Tabs.d.tsx" />
 /// <reference path="./SubHeading.d.tsx" />
+/// <reference path="./StatusTag.d.tsx" />
 /// <reference path="./Skeleton.d.tsx" />
 /// <reference path="./SiteSearchInput.d.tsx" />
 /// <reference path="./SiteSearchCurtain.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.170",
+	"version": "0.10.171",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,8 +17,8 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.26",
-		"@reykjavik/hanna-utils": "^0.2.21",
+		"@reykjavik/hanna-css": "^0.4.27",
+		"@reykjavik/hanna-utils": "^0.2.22",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",
@@ -85,6 +85,10 @@
 			"import": "./esm/Tooltip.js",
 			"require": "./Tooltip.js"
 		},
+		"./Timeline": {
+			"import": "./esm/Timeline.js",
+			"require": "./Timeline.js"
+		},
 		"./TextInput": {
 			"import": "./esm/TextInput.js",
 			"require": "./TextInput.js"
@@ -109,6 +113,10 @@
 			"import": "./esm/SubHeading.js",
 			"require": "./SubHeading.js"
 		},
+		"./StatusTag": {
+			"import": "./esm/StatusTag.js",
+			"require": "./StatusTag.js"
+		},
 		"./Skeleton": {
 			"import": "./esm/Skeleton.js",
 			"require": "./Skeleton.js"

package/utils/useDomid.d.ts

@@ -1,7 +1,3 @@
-/**
- * Returns a short locally-unique ID string.
- */
-export declare const domid: () => string;
 /**
  * Returns a stable, unique ID string.
  *
@@ -14,3 +10,5 @@ export declare const domid: () => string;
  * mode and there's nothing we can do about it, except to ignore them.)
  */
 export declare const useDomid: (staticId?: string) => string;
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+export declare const domid: () => string;

package/utils/useDomid.js

@@ -1,17 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDomid = exports.domid = void 0;
+exports.domid = exports.useDomid = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
 const useId = react_1.default.useId;
-const domid_prefix = `_${ /*@__PURE__*/`${Date.now()}-`.slice(6)}`;
-let domid_incr = 0;
-/**
- * Returns a short locally-unique ID string.
- */
-const domid = () => domid_prefix + domid_incr++;
-exports.domid = domid;
 /**
  * Returns a stable, unique ID string.
  *
@@ -31,7 +25,9 @@ exports.useDomid = useId
     : (staticId) => {
         const idRef = react_1.default.useRef();
         if (!idRef.current) {
-            idRef.current = staticId || (0, exports.domid)();
+            idRef.current = staticId || (0, hanna_utils_1.dumbId)();
         }
         return idRef.current;
     };
+/** @deprecated Use `import { dumbId } from '@reykjavik/hanna-utils'` instead  (Will be removed in v0.3) */
+exports.domid = hanna_utils_1.dumbId;