@enonic/ui-kit 0.5.2 → 0.7.0

package/dist/notifications/use-focus-hand-off.js

@@ -0,0 +1,43 @@
+import { useRef } from "react";
+//#region src/notifications/use-focus-hand-off.ts
+function activeElementAround(element) {
+	return element.getRootNode().activeElement;
+}
+function hasFocus(element) {
+	return element.contains(activeElementAround(element));
+}
+function useFocusHandOff() {
+	const stack = useRef(null);
+	const enteredFrom = useRef(null);
+	const focusInside = useRef(false);
+	const closedByKeyboard = useRef(false);
+	const onFocusCapture = ({ relatedTarget }) => {
+		const from = relatedTarget instanceof HTMLElement ? relatedTarget : null;
+		if (from == null ? !focusInside.current : !stack.current?.contains(from)) enteredFrom.current = from;
+		focusInside.current = true;
+	};
+	const onBlurCapture = ({ relatedTarget }) => {
+		if (relatedTarget instanceof Node && !stack.current?.contains(relatedTarget)) focusInside.current = false;
+	};
+	const onClickCapture = ({ detail }) => {
+		closedByKeyboard.current = detail === 0;
+	};
+	const handOff = (wrapper) => {
+		if (wrapper == null || !closedByKeyboard.current || !hasFocus(wrapper)) return;
+		const target = (wrapper.nextElementSibling ?? wrapper.previousElementSibling)?.querySelector("button") ?? enteredFrom.current;
+		if (target?.isConnected) target.focus();
+	};
+	return {
+		stackProps: {
+			ref: stack,
+			onFocusCapture,
+			onBlurCapture,
+			onClickCapture
+		},
+		handOff
+	};
+}
+//#endregion
+export { hasFocus, useFocusHandOff };
+
+//# sourceMappingURL=use-focus-hand-off.js.map

package/dist/notifications/use-focus-hand-off.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-hand-off.js","names":[],"sources":["../../src/notifications/use-focus-hand-off.ts"],"sourcesContent":["import { type FocusEventHandler, type MouseEventHandler, type Ref, useRef } from 'react';\n\n// Inside a shadow root `document.activeElement` is the host, so the focus is read from the root\n// the element is in.\nfunction activeElementAround(element: Element): Element | null {\n  return (element.getRootNode() as Document | ShadowRoot).activeElement;\n}\n\nexport function hasFocus(element: Element): boolean {\n  return element.contains(activeElementAround(element));\n}\n\nexport type FocusHandOff = {\n  /** Spread on the element that holds the toasts. */\n  stackProps: {\n    ref: Ref<HTMLDivElement>;\n    onFocusCapture: FocusEventHandler<HTMLDivElement>;\n    onBlurCapture: FocusEventHandler<HTMLDivElement>;\n    onClickCapture: MouseEventHandler<HTMLDivElement>;\n  };\n  /**\n   * Called before a toast's wrapper goes: a toast closed from the keyboard while it has the focus\n   * hands it to the toast next to it, or back to where the focus came from when the stack was\n   * entered.\n   */\n  handOff: (wrapper: HTMLElement | undefined) => void;\n};\n\nexport function useFocusHandOff(): FocusHandOff {\n  const stack = useRef<HTMLDivElement>(null);\n  const enteredFrom = useRef<HTMLElement | null>(null);\n  const focusInside = useRef(false);\n  // ! A pointer click focuses the button in most browsers, so the focus alone does not tell a\n  // ! keyboard close from a mouse one; `detail` is 0 for a key press and an assistive-tech click.\n  const closedByKeyboard = useRef(false);\n\n  // A window regaining focus reports no `relatedTarget` although the focus never left the stack.\n  const onFocusCapture: FocusEventHandler<HTMLDivElement> = ({ relatedTarget }) => {\n    const from = relatedTarget instanceof HTMLElement ? relatedTarget : null;\n    if (from == null ? !focusInside.current : !stack.current?.contains(from)) {\n      enteredFrom.current = from;\n    }\n    focusInside.current = true;\n  };\n\n  const onBlurCapture: FocusEventHandler<HTMLDivElement> = ({ relatedTarget }) => {\n    if (relatedTarget instanceof Node && !stack.current?.contains(relatedTarget)) {\n      focusInside.current = false;\n    }\n  };\n\n  const onClickCapture: MouseEventHandler<HTMLDivElement> = ({ detail }) => {\n    closedByKeyboard.current = detail === 0;\n  };\n\n  const handOff = (wrapper: HTMLElement | undefined): void => {\n    if (wrapper == null || !closedByKeyboard.current || !hasFocus(wrapper)) {\n      return;\n    }\n    const neighbour = wrapper.nextElementSibling ?? wrapper.previousElementSibling;\n    const target = neighbour?.querySelector('button') ?? enteredFrom.current;\n    if (target?.isConnected) {\n      target.focus();\n    }\n  };\n\n  return {\n    stackProps: { ref: stack, onFocusCapture, onBlurCapture, onClickCapture },\n    handOff,\n  };\n}\n"],"mappings":";;AAIA,SAAS,oBAAoB,SAAkC;CAC7D,OAAQ,QAAQ,YAAY,CAAC,CAA2B;AAC1D;AAEA,SAAgB,SAAS,SAA2B;CAClD,OAAO,QAAQ,SAAS,oBAAoB,OAAO,CAAC;AACtD;AAkBA,SAAgB,kBAAgC;CAC9C,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,cAAc,OAA2B,IAAI;CACnD,MAAM,cAAc,OAAO,KAAK;CAGhC,MAAM,mBAAmB,OAAO,KAAK;CAGrC,MAAM,kBAAqD,EAAE,oBAAoB;EAC/E,MAAM,OAAO,yBAAyB,cAAc,gBAAgB;EACpE,IAAI,QAAQ,OAAO,CAAC,YAAY,UAAU,CAAC,MAAM,SAAS,SAAS,IAAI,GACrE,YAAY,UAAU;EAExB,YAAY,UAAU;CACxB;CAEA,MAAM,iBAAoD,EAAE,oBAAoB;EAC9E,IAAI,yBAAyB,QAAQ,CAAC,MAAM,SAAS,SAAS,aAAa,GACzE,YAAY,UAAU;CAE1B;CAEA,MAAM,kBAAqD,EAAE,aAAa;EACxE,iBAAiB,UAAU,WAAW;CACxC;CAEA,MAAM,WAAW,YAA2C;EAC1D,IAAI,WAAW,QAAQ,CAAC,iBAAiB,WAAW,CAAC,SAAS,OAAO,GACnE;EAGF,MAAM,UADY,QAAQ,sBAAsB,QAAQ,uBAAA,EAC9B,cAAc,QAAQ,KAAK,YAAY;EACjE,IAAI,QAAQ,aACV,OAAO,MAAM;CAEjB;CAEA,OAAO;EACL,YAAY;GAAE,KAAK;GAAO;GAAgB;GAAe;EAAe;EACxE;CACF;AACF"}

package/dist/theme/theme-switcher.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+//#region src/theme/theme-switcher.d.ts
+type ThemeSwitcherProps = {
+  className?: string;
+  'data-component'?: string;
+};
+declare const THEME_SWITCHER_NAME = "ThemeSwitcher";
+declare function ThemeSwitcher({ className, 'data-component': componentName }: ThemeSwitcherProps): ReactElement;
+declare namespace ThemeSwitcher {
+  export { THEME_SWITCHER_NAME as displayName };
+}
+//#endregion
+export { ThemeSwitcher, ThemeSwitcherProps };
+//# sourceMappingURL=theme-switcher.d.ts.map

package/dist/theme/theme-switcher.js

@@ -0,0 +1,71 @@
+import { themeSwitcherPhrases } from "./theme-switcher.phrases.js";
+import { useSyncExternalStore } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Tooltip, cn, usePhrases } from "@enonic/ui";
+import { Moon, Sun, SunMoon } from "lucide-react";
+import { readTheme, subscribeTheme, writeTheme } from "@enonic/ui-utils";
+//#region src/theme/theme-switcher.tsx
+const THEME_SWITCHER_NAME = "ThemeSwitcher";
+const NEXT_THEME = {
+	light: "dark",
+	dark: "system",
+	system: "light"
+};
+const TITLE_KEYS = {
+	light: "enonic.uiKit.themeSwitcher.light",
+	dark: "enonic.uiKit.themeSwitcher.dark",
+	system: "enonic.uiKit.themeSwitcher.system"
+};
+const ACTION_KEYS = {
+	light: "enonic.uiKit.themeSwitcher.switchToDark",
+	dark: "enonic.uiKit.themeSwitcher.switchToSystem",
+	system: "enonic.uiKit.themeSwitcher.switchToLight"
+};
+const ICON_CLASS_NAME = "absolute transition-all duration-300";
+const SHOWN_CLASS_NAME = "scale-100 rotate-0 opacity-100";
+const HIDDEN_CLASS_NAME = "scale-0 -rotate-90 opacity-0";
+const iconClassName = (shown) => cn(ICON_CLASS_NAME, shown ? SHOWN_CLASS_NAME : HIDDEN_CLASS_NAME);
+/**
+* Cycles the theme the admin applications share — light, dark, system — and shows the one picked.
+* It reads and writes the stored theme itself, so every switcher and every page follows a click,
+* here or in another tab; what an application paints comes from `useResolvedTheme`.
+*/
+const ThemeSwitcher = ({ className, "data-component": componentName = THEME_SWITCHER_NAME }) => {
+	const theme = useSyncExternalStore(subscribeTheme, readTheme);
+	const t = usePhrases(themeSwitcherPhrases);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		value: t(TITLE_KEYS[theme]),
+		delay: 300,
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			"data-component": componentName,
+			size: "sm",
+			variant: "text",
+			"aria-label": t(ACTION_KEYS[theme]),
+			onClick: () => writeTheme(NEXT_THEME[theme]),
+			className: cn("relative size-9 rounded-sm p-0", className),
+			children: [
+				/* @__PURE__ */ jsx(Sun, {
+					className: iconClassName(theme === "light"),
+					size: 16,
+					strokeWidth: 1.5
+				}),
+				/* @__PURE__ */ jsx(Moon, {
+					className: iconClassName(theme === "dark"),
+					size: 16,
+					strokeWidth: 1.5
+				}),
+				/* @__PURE__ */ jsx(SunMoon, {
+					className: iconClassName(theme === "system"),
+					size: 18,
+					strokeWidth: 1.5
+				})
+			]
+		})
+	});
+};
+ThemeSwitcher.displayName = THEME_SWITCHER_NAME;
+//#endregion
+export { ThemeSwitcher };
+
+//# sourceMappingURL=theme-switcher.js.map

package/dist/theme/theme-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.js","names":[],"sources":["../../src/theme/theme-switcher.tsx"],"sourcesContent":["import { Button, cn, Tooltip, usePhrases } from '@enonic/ui';\nimport type { Theme } from '@enonic/ui-types';\nimport { readTheme, subscribeTheme, writeTheme } from '@enonic/ui-utils';\nimport { Moon, Sun, SunMoon } from 'lucide-react';\nimport { type ReactElement, useSyncExternalStore } from 'react';\n\nimport { type ThemeSwitcherPhraseKey, themeSwitcherPhrases } from './theme-switcher.phrases';\n\nexport type ThemeSwitcherProps = {\n  className?: string;\n  'data-component'?: string;\n};\n\nconst THEME_SWITCHER_NAME = 'ThemeSwitcher';\n\nconst NEXT_THEME: Record<Theme, Theme> = { light: 'dark', dark: 'system', system: 'light' };\n\nconst TITLE_KEYS: Record<Theme, ThemeSwitcherPhraseKey> = {\n  light: 'enonic.uiKit.themeSwitcher.light',\n  dark: 'enonic.uiKit.themeSwitcher.dark',\n  system: 'enonic.uiKit.themeSwitcher.system',\n};\n\nconst ACTION_KEYS: Record<Theme, ThemeSwitcherPhraseKey> = {\n  light: 'enonic.uiKit.themeSwitcher.switchToDark',\n  dark: 'enonic.uiKit.themeSwitcher.switchToSystem',\n  system: 'enonic.uiKit.themeSwitcher.switchToLight',\n};\n\nconst ICON_CLASS_NAME = 'absolute transition-all duration-300';\nconst SHOWN_CLASS_NAME = 'scale-100 rotate-0 opacity-100';\nconst HIDDEN_CLASS_NAME = 'scale-0 -rotate-90 opacity-0';\n\nconst iconClassName = (shown: boolean): string =>\n  cn(ICON_CLASS_NAME, shown ? SHOWN_CLASS_NAME : HIDDEN_CLASS_NAME);\n\n/**\n * Cycles the theme the admin applications share — light, dark, system — and shows the one picked.\n * It reads and writes the stored theme itself, so every switcher and every page follows a click,\n * here or in another tab; what an application paints comes from `useResolvedTheme`.\n */\nconst ThemeSwitcher = ({\n  className,\n  'data-component': componentName = THEME_SWITCHER_NAME,\n}: ThemeSwitcherProps): ReactElement => {\n  const theme = useSyncExternalStore(subscribeTheme, readTheme);\n  const t = usePhrases(themeSwitcherPhrases);\n\n  return (\n    <Tooltip value={t(TITLE_KEYS[theme])} delay={300} asChild>\n      <Button\n        data-component={componentName}\n        size=\"sm\"\n        variant=\"text\"\n        aria-label={t(ACTION_KEYS[theme])}\n        onClick={() => writeTheme(NEXT_THEME[theme])}\n        className={cn('relative size-9 rounded-sm p-0', className)}\n      >\n        <Sun className={iconClassName(theme === 'light')} size={16} strokeWidth={1.5} />\n        <Moon className={iconClassName(theme === 'dark')} size={16} strokeWidth={1.5} />\n        <SunMoon className={iconClassName(theme === 'system')} size={18} strokeWidth={1.5} />\n      </Button>\n    </Tooltip>\n  );\n};\n\nThemeSwitcher.displayName = THEME_SWITCHER_NAME;\n\nexport { ThemeSwitcher };\n"],"mappings":";;;;;;;AAaA,MAAM,sBAAsB;AAE5B,MAAM,aAAmC;CAAE,OAAO;CAAQ,MAAM;CAAU,QAAQ;AAAQ;AAE1F,MAAM,aAAoD;CACxD,OAAO;CACP,MAAM;CACN,QAAQ;AACV;AAEA,MAAM,cAAqD;CACzD,OAAO;CACP,MAAM;CACN,QAAQ;AACV;AAEA,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAE1B,MAAM,iBAAiB,UACrB,GAAG,iBAAiB,QAAQ,mBAAmB,iBAAiB;;;;;;AAOlE,MAAM,iBAAiB,EACrB,WACA,kBAAkB,gBAAgB,0BACI;CACtC,MAAM,QAAQ,qBAAqB,gBAAgB,SAAS;CAC5D,MAAM,IAAI,WAAW,oBAAoB;CAEzC,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,WAAW,MAAM;EAAG,OAAO;EAAK,SAAA;EAChD,UAAA,qBAAC,QAAD;GACE,kBAAgB;GAChB,MAAK;GACL,SAAQ;GACR,cAAY,EAAE,YAAY,MAAM;GAChC,eAAe,WAAW,WAAW,MAAM;GAC3C,WAAW,GAAG,kCAAkC,SAAS;GAN3D,UAAA;IAQE,oBAAC,KAAD;KAAK,WAAW,cAAc,UAAU,OAAO;KAAG,MAAM;KAAI,aAAa;IAAM,CAAA;IAC/E,oBAAC,MAAD;KAAM,WAAW,cAAc,UAAU,MAAM;KAAG,MAAM;KAAI,aAAa;IAAM,CAAA;IAC/E,oBAAC,SAAD;KAAS,WAAW,cAAc,UAAU,QAAQ;KAAG,MAAM;KAAI,aAAa;IAAM,CAAA;GAC9E;;CACD,CAAA;AAEb;AAEA,cAAc,cAAc"}

package/dist/theme/theme-switcher.phrases.d.ts

@@ -0,0 +1,17 @@
+//#region src/theme/theme-switcher.phrases.d.ts
+/**
+ * The switcher's own English, keyed `enonic.uiKit.themeSwitcher.<name>`: the tooltip names the
+ * theme picked, the accessible name what a click does. See `uiKitPhrases`.
+ */
+declare const themeSwitcherPhrases: {
+  readonly 'enonic.uiKit.themeSwitcher.light': 'Light theme';
+  readonly 'enonic.uiKit.themeSwitcher.dark': 'Dark theme';
+  readonly 'enonic.uiKit.themeSwitcher.system': 'System preference';
+  readonly 'enonic.uiKit.themeSwitcher.switchToDark': 'Switch to dark theme';
+  readonly 'enonic.uiKit.themeSwitcher.switchToSystem': 'Use system theme';
+  readonly 'enonic.uiKit.themeSwitcher.switchToLight': 'Switch to light theme';
+};
+type ThemeSwitcherPhraseKey = keyof typeof themeSwitcherPhrases;
+//#endregion
+export { ThemeSwitcherPhraseKey, themeSwitcherPhrases };
+//# sourceMappingURL=theme-switcher.phrases.d.ts.map

package/dist/theme/theme-switcher.phrases.js

@@ -0,0 +1,17 @@
+//#region src/theme/theme-switcher.phrases.ts
+/**
+* The switcher's own English, keyed `enonic.uiKit.themeSwitcher.<name>`: the tooltip names the
+* theme picked, the accessible name what a click does. See `uiKitPhrases`.
+*/
+const themeSwitcherPhrases = {
+	"enonic.uiKit.themeSwitcher.light": "Light theme",
+	"enonic.uiKit.themeSwitcher.dark": "Dark theme",
+	"enonic.uiKit.themeSwitcher.system": "System preference",
+	"enonic.uiKit.themeSwitcher.switchToDark": "Switch to dark theme",
+	"enonic.uiKit.themeSwitcher.switchToSystem": "Use system theme",
+	"enonic.uiKit.themeSwitcher.switchToLight": "Switch to light theme"
+};
+//#endregion
+export { themeSwitcherPhrases };
+
+//# sourceMappingURL=theme-switcher.phrases.js.map

package/dist/theme/theme-switcher.phrases.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.phrases.js","names":[],"sources":["../../src/theme/theme-switcher.phrases.ts"],"sourcesContent":["/**\n * The switcher's own English, keyed `enonic.uiKit.themeSwitcher.<name>`: the tooltip names the\n * theme picked, the accessible name what a click does. See `uiKitPhrases`.\n */\nexport const themeSwitcherPhrases = {\n  'enonic.uiKit.themeSwitcher.light': 'Light theme',\n  'enonic.uiKit.themeSwitcher.dark': 'Dark theme',\n  'enonic.uiKit.themeSwitcher.system': 'System preference',\n  'enonic.uiKit.themeSwitcher.switchToDark': 'Switch to dark theme',\n  'enonic.uiKit.themeSwitcher.switchToSystem': 'Use system theme',\n  'enonic.uiKit.themeSwitcher.switchToLight': 'Switch to light theme',\n} as const;\n\nexport type ThemeSwitcherPhraseKey = keyof typeof themeSwitcherPhrases;\n"],"mappings":";;;;;AAIA,MAAa,uBAAuB;CAClC,oCAAoC;CACpC,mCAAmC;CACnC,qCAAqC;CACrC,2CAA2C;CAC3C,6CAA6C;CAC7C,4CAA4C;AAC9C"}

package/dist/theme/use-resolved-theme.d.ts

@@ -0,0 +1,10 @@
+import { ResolvedTheme } from "@enonic/ui-types";
+//#region src/theme/use-resolved-theme.d.ts
+/**
+ * The theme to paint, re-rendering when the user switches — on this page or in another tab — or
+ * the OS does while the theme is `system`. Read from storage, so there is no store to keep.
+ */
+declare function useResolvedTheme(): ResolvedTheme;
+//#endregion
+export { useResolvedTheme };
+//# sourceMappingURL=use-resolved-theme.d.ts.map

package/dist/theme/use-resolved-theme.js

@@ -0,0 +1,14 @@
+import { useSyncExternalStore } from "react";
+import { readResolvedTheme, subscribeResolvedTheme } from "@enonic/ui-utils";
+//#region src/theme/use-resolved-theme.ts
+/**
+* The theme to paint, re-rendering when the user switches — on this page or in another tab — or
+* the OS does while the theme is `system`. Read from storage, so there is no store to keep.
+*/
+function useResolvedTheme() {
+	return useSyncExternalStore(subscribeResolvedTheme, readResolvedTheme);
+}
+//#endregion
+export { useResolvedTheme };
+
+//# sourceMappingURL=use-resolved-theme.js.map

package/dist/theme/use-resolved-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resolved-theme.js","names":[],"sources":["../../src/theme/use-resolved-theme.ts"],"sourcesContent":["import type { ResolvedTheme } from '@enonic/ui-types';\nimport { readResolvedTheme, subscribeResolvedTheme } from '@enonic/ui-utils';\nimport { useSyncExternalStore } from 'react';\n\n/**\n * The theme to paint, re-rendering when the user switches — on this page or in another tab — or\n * the OS does while the theme is `system`. Read from storage, so there is no store to keep.\n */\nexport function useResolvedTheme(): ResolvedTheme {\n  return useSyncExternalStore(subscribeResolvedTheme, readResolvedTheme);\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,mBAAkC;CAChD,OAAO,qBAAqB,wBAAwB,iBAAiB;AACvE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/ui-kit",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "description": "Composite React components with behaviour: the dialog shell and its confirmations, layouts, toolbars, browse screens",
   "keywords": [
     "components",
@@ -41,19 +41,20 @@
     "provenance": false
   },
   "dependencies": {
-    "@enonic/ui-utils": "^0.5.2",
-    "lucide-react": "^1.48.0"
+    "@enonic/ui-types": "^0.7.0",
+    "@enonic/ui-utils": "^0.7.0",
+    "lucide-react": "^1.64.0"
   },
   "devDependencies": {
-    "@enonic/ui": "^1.4.0",
-    "@radix-ui/react-slot": "^1.2.0",
+    "@enonic/ui": "^1.5.0",
+    "@radix-ui/react-slot": "^1.5.0",
     "@storybook/preact-vite": "~10.6.0",
-    "@testing-library/preact": "~3.2.4",
-    "@testing-library/user-event": "~14.6.7",
-    "@types/node": "^26.6.3",
+    "@testing-library/preact": "~3.2.6",
+    "@testing-library/user-event": "~14.6.8",
+    "@types/node": "^26.6.6",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
-    "happy-dom": "~20.14.5",
+    "happy-dom": "~21.0.4",
     "preact": "^10.29.8",
     "publint": "^0.3.24",
     "typescript": "^7.0.2",
@@ -61,7 +62,7 @@
     "vitest": "4.1.10"
   },
   "peerDependencies": {
-    "@enonic/ui": "^1.4.0",
+    "@enonic/ui": "^1.5.0",
     "preact": ">=10.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"