foldkit 0.60.0 → 0.62.0

package/dist/ui/popover/index.js

@@ -18,6 +18,7 @@ export const Model = S.Struct({
     isOpen: S.Boolean,
     isAnimated: S.Boolean,
     isModal: S.Boolean,
+    contentFocus: S.Boolean,
     transition: TransitionModel,
     maybeLastButtonPointerType: S.OptionFromSelf(S.String),
 });
@@ -63,6 +64,7 @@ export const init = (config) => ({
     isOpen: false,
     isAnimated: config.isAnimated ?? false,
     isModal: config.isModal ?? false,
+    contentFocus: config.contentFocus ?? false,
     transition: transitionInit({ id: `${config.id}-panel` }),
     maybeLastButtonPointerType: Option.none(),
 });
@@ -118,12 +120,8 @@ export const update = (model, message) => {
         panelSelector(model.id),
     ]).pipe(Effect.as(CompletedSetupInert()))));
     const maybeRestoreInert = OptionExt.when(model.isModal, RestoreInert(Task.restoreInert(model.id).pipe(Effect.as(CompletedTeardownInert()))));
-    const focusPanel = FocusPanel(Task.focus(panelSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedFocusPanel())));
     const focusButton = FocusButton(Task.focus(buttonSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedFocusButton())));
-    const openCommands = [
-        focusPanel,
-        ...Array.getSomes([maybeLockScroll, maybeInertOthers]),
-    ];
+    const openCommands = Array.getSomes([maybeLockScroll, maybeInertOthers]);
     const closeWithFocusCommands = [
         focusButton,
         ...Array.getSomes([maybeUnlockScroll, maybeRestoreInert]),
@@ -200,7 +198,7 @@ export const close = (model) => update(model, Closed());
 /** Renders a headless popover with a trigger button and a floating panel. Uses the disclosure ARIA pattern (aria-expanded + aria-controls) with no role on the panel. */
 export const view = (config) => {
     const { div, AriaControls, AriaDisabled, AriaExpanded, Class, DataAttribute, Id, OnBlur, OnClick, OnDestroy, OnInsert, OnKeyDownPreventDefault, OnKeyUpPreventDefault, OnPointerDown, Style, Tabindex, Type, keyed, } = html();
-    const { model: { id, isOpen, transition: { transitionState }, maybeLastButtonPointerType, }, toParentMessage, onOpened, onClosed, anchor, buttonContent, buttonClassName, buttonAttributes = [], panelContent, panelClassName, panelAttributes = [], backdropClassName, backdropAttributes = [], isDisabled, className, attributes = [], } = config;
+    const { model: { id, isOpen, contentFocus, transition: { transitionState }, maybeLastButtonPointerType, }, toParentMessage, onOpened, onClosed, anchor, buttonContent, buttonClassName, buttonAttributes = [], panelContent, panelClassName, panelAttributes = [], backdropClassName, backdropAttributes = [], isDisabled, focusSelector, className, attributes = [], } = config;
     const dispatchOpened = () => onOpened ? onOpened() : toParentMessage(Opened());
     const dispatchClosed = () => onClosed ? onClosed() : toParentMessage(Closed());
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
@@ -220,7 +218,7 @@ export const view = (config) => {
         DataAttribute('leave', ''),
         DataAttribute('transition', ''),
     ]), M.orElse(() => []));
-    const handleButtonKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(isOpen ? dispatchClosed() : dispatchOpened())), M.orElse(() => Option.none()));
+    const handleButtonKeyDown = (key) => M.value(key).pipe(M.whenOr('Enter', ' ', 'ArrowDown', () => Option.some(isOpen ? dispatchClosed() : dispatchOpened())), M.when('Escape', () => OptionExt.when(isOpen, dispatchClosed())), M.orElse(() => Option.none()));
     const handleButtonPointerDown = (pointerType, button) => Option.some(toParentMessage(PressedPointerOnButton({
         pointerType,
         button,
@@ -266,6 +264,7 @@ export const view = (config) => {
         anchor,
         interceptTab: false,
         focusAfterPosition: true,
+        ...(focusSelector !== undefined && { focusSelector }),
     });
     const anchorAttributes = [
         Style({ position: 'absolute', margin: '0', visibility: 'hidden' }),
@@ -274,14 +273,14 @@ export const view = (config) => {
     ];
     const resolvedPanelAttributes = [
         Id(`${id}-panel`),
-        Tabindex(0),
+        ...(contentFocus ? [] : [Tabindex(0)]),
         ...anchorAttributes,
         ...transitionAttributes,
         ...(isLeaving
             ? []
             : [
                 OnKeyDownPreventDefault(handlePanelKeyDown),
-                OnBlur(toParentMessage(ClosedByTab())),
+                ...(contentFocus ? [] : [OnBlur(toParentMessage(ClosedByTab()))]),
             ]),
         ...(panelClassName ? [Class(panelClassName)] : []),
         ...panelAttributes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "description": "A frontend framework for TypeScript, built on Effect, using The Elm Architecture",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,6 +11,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./calendar": {
+      "types": "./dist/calendar/public.d.ts",
+      "import": "./dist/calendar/public.js"
+    },
     "./command": {
       "types": "./dist/command/public.d.ts",
       "import": "./dist/command/public.js"
@@ -79,6 +83,10 @@
       "types": "./dist/ui/button/public.d.ts",
       "import": "./dist/ui/button/public.js"
     },
+    "./ui/calendar": {
+      "types": "./dist/ui/calendar/public.d.ts",
+      "import": "./dist/ui/calendar/public.js"
+    },
     "./ui/checkbox": {
       "types": "./dist/ui/checkbox/public.d.ts",
       "import": "./dist/ui/checkbox/public.js"