foldkit 0.17.0 → 0.19.0

package/dist/ui/tabs/index.js

@@ -1,8 +1,10 @@
-import { Array, Match as M, Option, Predicate, Schema as S, String, pipe, } from 'effect';
+import { Array, Match as M, Option, Schema as S, String, pipe } from 'effect';
 import { html } from '../../html';
-import { ts } from '../../schema';
+import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
+import { keyToIndex } from '../keyboard';
+export { wrapIndex, findFirstEnabledIndex, keyToIndex } from '../keyboard';
 // MODEL
 /** Controls the tab list layout direction and which arrow keys navigate between tabs. */
 export const Orientation = S.Literal('Horizontal', 'Vertical');
@@ -18,11 +20,11 @@ export const Model = S.Struct({
 });
 // MESSAGE
 /** Sent when a tab is selected via click or keyboard. Updates both the active and focused indices. */
-export const TabSelected = ts('TabSelected', { index: S.Number });
+export const TabSelected = m('TabSelected', { index: S.Number });
 /** Sent when a tab receives keyboard focus in `Manual` mode without being activated. */
-export const TabFocused = ts('TabFocused', { index: S.Number });
+export const TabFocused = m('TabFocused', { index: S.Number });
 /** Placeholder message used when no action is needed, such as after a focus command completes. */
-export const NoOp = ts('NoOp');
+export const NoOp = m('NoOp');
 /** Union of all messages the tabs component can produce. */
 export const Message = S.Union(TabSelected, TabFocused, NoOp);
 /** Creates an initial tabs model from a config. Defaults to first tab, horizontal orientation, and automatic activation. */
@@ -46,33 +48,26 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
                 activeIndex: () => index,
                 focusedIndex: () => index,
             }),
-            [Task.focus(tabSelector, () => NoOp.make())],
+            [Task.focus(tabSelector, () => NoOp())],
         ];
     },
     TabFocused: ({ index }) => {
         const tabSelector = `#${tabId(model.id, index)}`;
         return [
             evo(model, { focusedIndex: () => index }),
-            [Task.focus(tabSelector, () => NoOp.make())],
+            [Task.focus(tabSelector, () => NoOp())],
         ];
     },
     NoOp: () => [model, []],
 }));
-// KEYBOARD
-export const wrapIndex = (index, length) => ((index % length) + length) % length;
-export const findFirstEnabledIndex = (tabCount, focusedIndex, isDisabled) => (startIndex, direction) => pipe(tabCount, Array.makeBy((step) => wrapIndex(startIndex + step * direction, tabCount)), Array.findFirst(Predicate.not(isDisabled)), Option.getOrElse(() => focusedIndex));
-export const keyToIndex = (nextKey, previousKey, tabCount, focusedIndex, isDisabled) => {
-    const find = findFirstEnabledIndex(tabCount, focusedIndex, isDisabled);
-    return (key) => M.value(key).pipe(M.when(nextKey, () => find(focusedIndex + 1, 1)), M.when(previousKey, () => find(focusedIndex - 1, -1)), M.whenOr('Home', 'PageUp', () => find(0, 1)), M.whenOr('End', 'PageDown', () => find(tabCount - 1, -1)), M.orElse(() => focusedIndex));
-};
 const tabPanelId = (id, index) => `${id}-panel-${index}`;
 const tabId = (id, index) => `${id}-tab-${index}`;
 /** Renders a headless tab group with accessible ARIA roles, roving tabindex, and keyboard navigation. */
 export const view = (config) => {
-    const { div, empty, AriaControls, AriaDisabled, AriaLabelledBy, AriaOrientation, AriaSelected, Class, DataAttribute, Disabled, Hidden, Id, OnClick, OnKeyDown, Role, Tabindex, Type, keyed, } = html();
+    const { div, empty, AriaControls, AriaDisabled, AriaLabelledBy, AriaOrientation, AriaSelected, Class, DataAttribute, Disabled, Hidden, Id, OnClick, OnKeyDownPreventDefault, Role, Tabindex, Type, keyed, } = html();
     const { model, model: { id, orientation, activationMode, focusedIndex }, toMessage, tabs, tabToConfig, isTabDisabled, persistPanels, tabListElement = 'div', tabElement = 'button', panelElement = 'div', className, tabListClassName, } = config;
     const isDisabled = (index) => !!isTabDisabled &&
-        pipe(tabs, Array.get(index), Option.exists((tab) => isTabDisabled(tab, index)));
+        pipe(tabs, Array.get(index), Option.exists(tab => isTabDisabled(tab, index)));
     const { nextKey, previousKey } = M.value(orientation).pipe(M.when('Horizontal', () => ({
         nextKey: 'ArrowRight',
         previousKey: 'ArrowLeft',
@@ -81,15 +76,9 @@ export const view = (config) => {
         previousKey: 'ArrowUp',
     })), M.exhaustive);
     const resolveKeyIndex = keyToIndex(nextKey, previousKey, tabs.length, focusedIndex, isDisabled);
-    const handleAutomaticKeyDown = (key) => 
-    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-    M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => toMessage(TabSelected.make({ index: resolveKeyIndex(key) }))), M.whenOr('Enter', ' ', () => toMessage(TabSelected.make({ index: focusedIndex }))), M.orElse(() => toMessage(NoOp.make())));
-    const handleManualKeyDown = (key) => 
-    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-    M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => toMessage(TabFocused.make({ index: resolveKeyIndex(key) }))), M.whenOr('Enter', ' ', () => toMessage(TabSelected.make({ index: focusedIndex }))), M.orElse(() => toMessage(NoOp.make())));
-    const handleKeyDown = (key) => 
-    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-    M.value(activationMode).pipe(M.when('Automatic', () => handleAutomaticKeyDown(key)), M.when('Manual', () => handleManualKeyDown(key)), M.exhaustive);
+    const handleAutomaticKeyDown = (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toMessage(TabSelected({ index: resolveKeyIndex(key) })))), M.whenOr('Enter', ' ', () => Option.some(toMessage(TabSelected({ index: focusedIndex })))), M.orElse(() => Option.none()));
+    const handleManualKeyDown = (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => Option.some(toMessage(TabFocused({ index: resolveKeyIndex(key) })))), M.whenOr('Enter', ' ', () => Option.some(toMessage(TabSelected({ index: focusedIndex })))), M.orElse(() => Option.none()));
+    const handleKeyDown = (key) => M.value(activationMode).pipe(M.when('Automatic', () => handleAutomaticKeyDown(key)), M.when('Manual', () => handleManualKeyDown(key)), M.exhaustive);
     const tabButtons = Array.map(tabs, (tab, index) => {
         const isActive = index === model.activeIndex;
         const isFocused = index === focusedIndex;
@@ -106,8 +95,8 @@ export const view = (config) => {
             ...(isActive ? [DataAttribute('selected', '')] : []),
             ...(isTabDisabledAtIndex
                 ? [Disabled(true), AriaDisabled(true), DataAttribute('disabled', '')]
-                : [OnClick(toMessage(TabSelected.make({ index })))]),
-            OnKeyDown(handleKeyDown),
+                : [OnClick(toMessage(TabSelected({ index })))]),
+            OnKeyDownPreventDefault(handleKeyDown),
         ], [tabConfig.buttonContent]);
     });
     const allPanels = Array.map(tabs, (tab, index) => {
@@ -125,7 +114,7 @@ export const view = (config) => {
     });
     const activePanelOnly = pipe(tabs, Array.get(model.activeIndex), Option.match({
         onNone: () => empty,
-        onSome: (tab) => {
+        onSome: tab => {
             const activeConfig = tabToConfig(tab, { isActive: true });
             return keyed(panelElement)(tabPanelId(id, model.activeIndex), [
                 Class(activeConfig.panelClassName),

package/dist/url/index.d.ts

@@ -11,11 +11,11 @@ export declare const Url: S.Struct<{
 export type Url = typeof Url.Type;
 /** Parses a URL string into a `Url`, returning `Option.None` if invalid. */
 export declare const fromString: (str: string) => Option.Option<{
+    readonly search: Option.Option<string>;
     readonly protocol: string;
     readonly host: string;
     readonly port: Option.Option<string>;
     readonly pathname: string;
-    readonly search: Option.Option<string>;
     readonly hash: Option.Option<string>;
 }>;
 /** Serializes a `Url` back to a string. */

package/dist/url/index.js

@@ -31,7 +31,7 @@ const LocationAndHrefFromString = S.transformOrFail(S.String, LocationAndHref, {
                 },
             };
         },
-        catch: (error) => new ParseResult.Type(ast, urlString, `Invalid URL: ${error}`),
+        catch: error => new ParseResult.Type(ast, urlString, `Invalid URL: ${error}`),
     }),
     encode: ({ href, location }) => {
         const portString = location.port ? `:${location.port}` : '';
@@ -52,14 +52,14 @@ const UrlFromLocationAndHref = S.transform(LocationAndHref, Url, {
             hash: OptionExt.fromString(hashPart || ''),
         };
     },
-    encode: (url) => {
+    encode: url => {
         const search = Option.match(url.search, {
             onNone: () => '',
-            onSome: (s) => `?${s}`,
+            onSome: s => `?${s}`,
         });
         const hash = Option.match(url.hash, {
             onNone: () => '',
-            onSome: (h) => `#${h}`,
+            onSome: h => `#${h}`,
         });
         const href = `${url.pathname}${search}${hash}`;
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Elm-inspired UI framework powered by Effect",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,6 +15,10 @@
       "types": "./dist/html/public.d.ts",
       "import": "./dist/html/public.js"
     },
+    "./message": {
+      "types": "./dist/message/public.d.ts",
+      "import": "./dist/message/public.js"
+    },
     "./navigation": {
       "types": "./dist/navigation/public.d.ts",
       "import": "./dist/navigation/public.js"
@@ -43,10 +47,18 @@
       "types": "./dist/ui/index.d.ts",
       "import": "./dist/ui/index.js"
     },
+    "./ui/dialog": {
+      "types": "./dist/ui/dialog/public.d.ts",
+      "import": "./dist/ui/dialog/public.js"
+    },
     "./ui/disclosure": {
       "types": "./dist/ui/disclosure/public.d.ts",
       "import": "./dist/ui/disclosure/public.js"
     },
+    "./ui/menu": {
+      "types": "./dist/ui/menu/public.d.ts",
+      "import": "./dist/ui/menu/public.js"
+    },
     "./ui/tabs": {
       "types": "./dist/ui/tabs/public.d.ts",
       "import": "./dist/ui/tabs/public.js"
@@ -98,6 +110,7 @@
     "clean": "rimraf dist *.tsbuildinfo",
     "build": "pnpm run clean && tsc -b",
     "watch": "tsc -b --watch",
+    "lint": "eslint src --ignore-pattern '**/*.test.ts'",
     "typecheck": "tsc -b --noEmit",
     "test": "vitest run",
     "docs": "typedoc"