@reykjavik/hanna-react 0.10.124 → 0.10.126

package/AutosuggestSearch.js

@@ -8,6 +8,8 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const SearchInput_js_1 = tslib_1.__importDefault(require("./SearchInput.js"));
 const utils_js_1 = require("./utils.js");
+/** Change methods/types that should update the input value */
+const inputChangeMethods = new Set(['type', 'enter', 'click']);
 exports.defaultAutosuggestSearchTexts = {
     is: {
         label: 'Leit á vefnum',
@@ -76,7 +78,10 @@ const AutosuggestSearch = (props) => {
         }, inputProps: {
             ref: inputRef,
             value: inputValue,
-            onChange: (_, { newValue }) => {
+            onChange: (_, { newValue, method }) => {
+                if (!inputChangeMethods.has(method)) {
+                    return;
+                }
                 onInput(newValue);
                 setInputValue(newValue);
             },

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.126
+
+_2024-06-05_
+
+- `FocusTrap`:
+  - feat: Add className to wrapper element
+  - fix: Exclude `FocusTrap` elements from list of eligible focusables
+- fix: Mishandled focus-managment of `Modal` while open
+
+## 0.10.125
+
+_2024-04-10_
+
+- fix: Stop updating `AutosuggestSearch` input value on up/down arrow keys
+
 ## 0.10.124
 
 _2024-04-05_
@@ -86,7 +101,7 @@ _2023-12-08_
 
 - feat: Add component `MainMenu2`
 - feat: Make `Datepicker` more flexible when parsing manual input strings –
-  adds several, localized default formats.
+  adds several, localized default formats
 - feat: Add accessibility helper component `FocusTrap`
 - Decouple all mobile-menu toggling logic from the `Layout` component
   - feat: Deprecate `useFormatMonitor` media flags `*Hamburger`, `*Topmenu`
@@ -217,7 +232,7 @@ _2023-09-04_
 - feat: Add props `wrapperProps` to `CarouselStepper`
 - feat: Remove defeault/implicit seen-effect styling from all
   components(except `SeenEffect`, `BgBox` and `CenterColumn`) — flag
-  `startSeen` prop as deprecated.
+  `startSeen` prop as deprecated
 - fix: Export type `MultiselectOption`, deprecate `MultiSelectOption`
 
 ## 0.10.101
@@ -302,7 +317,7 @@ _2023-06-01_
 _2023-05-25_
 
 - feat(ts): Export utility type `HtmlProps` from `utils` module — for adding
-  HTML attributes (including `data-*`) to React components.
+  HTML attributes (including `data-*`) to React components
 - fix: Update dependencies to fix esm–cjs import resolution errors
 
 ## 0.10.87
@@ -368,9 +383,9 @@ _2023-02-08_
 
 - feat: Automatically close "Hamburger menu" when user clicks `MainMenu` links
 - feat: Support `MainMenuProps.onItemClick` `MainMenuItem.onClick` returning
-  `false` to prevent auto-closing of "Hamburger menu".
+  `false` to prevent auto-closing of "Hamburger menu"
 - feat: Add `useHannaUIState` hook to "utils" — exposing `isHamburgerMenuOpen`
-  and `closeHamburgerMenu()`.
+  and `closeHamburgerMenu()`
 - fix: Toggle `MainMenu` mega panels on repeated top-level link clicks
 - fix: Close the currently open `MainMenu` mega panels on intra-link click
 - fix: Close `ContactBubble` on intra-link/button click
@@ -435,7 +450,7 @@ _2022-11-23_
 
 - feat: Add prop `onFilesRejected` to `FileInputProps`
 - feat: Add prop `itemCount` for all Carousel-related components with
-  `children` — drop requirement for children to be an Array.
+  `children` — drop requirement for children to be an Array
 - feat(ts): Export `ArticleCardsItemProps`, deprecate `ArticleCardProps`
 - feat(ts): Only allow either `align="right"` or `fullWidth` on `BasicTable`
 - feat: Make `SiteSearchAutocompleteProps.renderSuggestion` optional
@@ -471,7 +486,7 @@ _2022-09-28_
 _2022-09-27_
 
 - feat: Add controlled props `open` and `onToggle` to `AccordionList` — it now
-  supports either [controlled or uncontrolled](./README-conventions.md) use.
+  supports either [controlled or uncontrolled](./README-conventions.md) use
 - fix: Squash `useMixedControlState` bugs/misbehavior and improve its typing
 
 ## 0.10.68
@@ -499,7 +514,7 @@ _2022-09-14_
 - fix(ts): Make `PullQuote` & `BlockQuote`'s `by` prop required for `byHref`
 - fix(ts): Remove accidentally exposed props on several `*Cards` components —
   these props were never supported and were either a no-op, or resulted in
-  unstyled garbage.
+  unstyled garbage
 
 ## 0.10.66
 
@@ -536,7 +551,7 @@ _2022-08-23_
 _2022-08-11_
 
 - feat: Add mouse-cursor scroll controls for `Carousel`-related components —
-  Remove mousewheel hijacking behavior.
+  Remove mousewheel hijacking behavior
 - fix: `startSeen` hiding components with `html.before-sprinkling` present
 
 ## 0.10.60
@@ -544,7 +559,7 @@ _2022-08-11_
 _2022-06-24_
 
 - fix: Add missing prop `checkOrigin` on `IframeBlock` (default: `false`)
-- fix: Support "uncontrolled" use of `CheckboxGroup`, `RadioGroup`, et al.
+- fix: Support "uncontrolled" use of `CheckboxGroup`, `RadioGroup`, et al
 - fix: Change build to only export CommonJS
 
 ## 0.10.59
@@ -573,7 +588,7 @@ _2022-06-07_
 
 - **IMPORTANT** feat: Rename package to `@reykjavik/hanna-react` — this means
   `@hugsmidjan_is/hanna-react` will not receive any more updates. The library
-  is otherwise the same, with the same compatibility.
+  is otherwise the same, with the same compatibility
 - feat: Add `@reykjavik/hanna-utils` as dependency
 - feat: Deprecate the `assets` exports (instead use
   `@reykjavik/hanna-utils/assets`)
@@ -700,7 +715,7 @@ _2022-03-22_
 
 - fix: Attempt to Better capture weird `Selectbox` edge cases — Where the
   browser (or React) snap value to something unexpected because of mismatching
-  value and/or options.
+  value and/or options
 
 ## 0.10.32 – 0.10.34
 
@@ -752,7 +767,7 @@ _2022-03-09_
 - feat: Deprecate the `event` argument for `Alert`'s `onClose` callback
 - feat: Add prop `align?: 'right'` to `ButtonBar`
 - fix: Make `FileInput` image previews (thumbnails) more resilient overall
-- fix: Plug memory-leaks caused by `FileInput` image thumbnails.
+- fix: Plug memory-leaks caused by `FileInput` image thumbnails
 - fix: Add support for "uncontrolled" use of `TextInput` and `Selectbox`
 - fix: Suppress React's dev warning about preact compatibility workarounds
 
@@ -788,7 +803,7 @@ _2022-02-28_
 - feat: `ButtonPrimary`, `ButtonSecondary`, `ButtonTertiary`:
   - feat: Add prop `variant` with "destructive" option
 - feat: Add prop `size` — deprecate prop `small`. Primary and Secondary
-  buttons now have a `wide` size variant.
+  buttons now have a `wide` size variant
 
 ## 0.10.22
 
@@ -870,7 +885,7 @@ _2021-10-22_
 - feat: Add component `RelatedLinks`
 - feat: Add component `ContentImage`
 - feat: Add component `ArticleMeta`
-- feat: Add component `FooterBadges` for logos/badges/etc.
+- feat: Add component `FooterBadges` for logos/badges/etc
 - feat: Add seen-effect props to `CenterColumn`
 - feat: Export type `ProcessOverviewItemProps`
 - feat: Export type `FooterInfoProps`, add prop `modifier` to
@@ -1088,7 +1103,7 @@ _2020-10-07_
 - target: **Hanna 0.7** markup patterns
 - `Tabs` changes:
   - **BREAKING** feat: Make `Tabs` a "controlled"-only component — with no
-    internal "activated" state.
+    internal "activated" state
   - **BREAKING** feat: Rename type `TabsProps` to `TablistProps`
   - **BREAKING** feat: Drop `defaultActiveIdx` prop from `TablistProps`
   - feat: Add props `activeIdx`, `role`, `activateOnFocus`, `aria-label`,

package/FocusTrap.d.ts

@@ -11,8 +11,9 @@ export type FocusTrapProps = {
     depth?: number;
 };
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/FocusTrap.js

@@ -4,13 +4,14 @@ exports.FocusTrap = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
-    return (react_1.default.createElement(Tag, { tabIndex: 0, onFocus: (e) => {
+    return (react_1.default.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
             var _a;
             let container = e.currentTarget;
             let depth = Math.max(props.depth || 1, 1);
@@ -20,7 +21,7 @@ const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a,input, select, textarea,button, [tabindex]');
+            const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
             const targetIdx = props.atTop ? focusables.length - 1 : 0;
             (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
         } }));

package/_abstract/_AbstractModal.d.ts

@@ -45,9 +45,10 @@ export type AbstractModalProps = {
      * defined then `stable` takes precedence.
      */
     fickle?: boolean;
-    /** Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
+    /**
+     * Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
      *
-     * However, the initial `onOpen` is skipped  `startOpen` is set to `true`.
+     * However, the initial `onOpen` is skipped when `startOpen` is set to `true`.
      */
     onOpen?: () => void;
     /**

package/_abstract/_AbstractModal.js

@@ -62,9 +62,9 @@ const AbstractModal = (props) => {
             addToModalStack(privateDomId);
             setTimeout(() => {
                 setOpen(true);
-                props.onOpen && props.onOpen();
-                (0, focusElm_1.focusElm)(modalElmRef.current);
-            }, 100);
+                (0, focusElm_1.focusElm)(modalElmRef.current, { delay: 50 });
+                props.onOpen && props.onOpen(); // allow onOpen to move focus to a new place....
+            }, 50);
         }
     };
     const closeModal = () => {
@@ -126,6 +126,6 @@ const AbstractModal = (props) => {
             react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
                 children,
                 isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
-            isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }))));
+            isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, null))));
 };
 exports.AbstractModal = AbstractModal;

package/esm/AutosuggestSearch.js

@@ -5,6 +5,8 @@ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import SearchInput from './SearchInput.js';
 import { useMixedControlState } from './utils.js';
+/** Change methods/types that should update the input value */
+const inputChangeMethods = new Set(['type', 'enter', 'click']);
 export const defaultAutosuggestSearchTexts = {
     is: {
         label: 'Leit á vefnum',
@@ -73,7 +75,10 @@ export const AutosuggestSearch = (props) => {
         }, inputProps: {
             ref: inputRef,
             value: inputValue,
-            onChange: (_, { newValue }) => {
+            onChange: (_, { newValue, method }) => {
+                if (!inputChangeMethods.has(method)) {
+                    return;
+                }
                 onInput(newValue);
                 setInputValue(newValue);
             },

package/esm/FocusTrap.d.ts

@@ -11,8 +11,9 @@ export type FocusTrapProps = {
     depth?: number;
 };
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/esm/FocusTrap.js

@@ -1,12 +1,13 @@
 import React from 'react';
 /**
- * A focus trap element that can be used to keep keyboard focus within a container block.
+ * A focus trap element that can be used to keep keyboard focus within a
+ * container block.
  *
- * Make sure you only trap focus when a modal or
+ * Make sure you only trap focus when a modal or dialog is open
  */
 export const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
-    return (React.createElement(Tag, { tabIndex: 0, onFocus: (e) => {
+    return (React.createElement(Tag, { className: "FocusTrap", tabIndex: 0, onFocus: (e) => {
             var _a;
             let container = e.currentTarget;
             let depth = Math.max(props.depth || 1, 1);
@@ -16,7 +17,7 @@ export const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a,input, select, textarea,button, [tabindex]');
+            const focusables = container.querySelectorAll('a, input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
             const targetIdx = props.atTop ? focusables.length - 1 : 0;
             (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
         } }));

package/esm/_abstract/_AbstractModal.d.ts

@@ -45,9 +45,10 @@ export type AbstractModalProps = {
      * defined then `stable` takes precedence.
      */
     fickle?: boolean;
-    /** Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
+    /**
+     * Convenience callback that runs as soon as the `open` flag flips to `true` – including on initial opening.
      *
-     * However, the initial `onOpen` is skipped  `startOpen` is set to `true`.
+     * However, the initial `onOpen` is skipped when `startOpen` is set to `true`.
      */
     onOpen?: () => void;
     /**

package/esm/_abstract/_AbstractModal.js

@@ -58,9 +58,9 @@ export const AbstractModal = (props) => {
             addToModalStack(privateDomId);
             setTimeout(() => {
                 setOpen(true);
-                props.onOpen && props.onOpen();
-                focusElm(modalElmRef.current);
-            }, 100);
+                focusElm(modalElmRef.current, { delay: 50 });
+                props.onOpen && props.onOpen(); // allow onOpen to move focus to a new place....
+            }, 50);
         }
     };
     const closeModal = () => {
@@ -122,5 +122,5 @@ export const AbstractModal = (props) => {
             React.createElement("div", { className: modifiedClass(bem, modifier), ref: modalElmRef },
                 children,
                 isBrowser && !props.noCloseButton && (React.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
-            isBrowser && React.createElement(FocusTrap, { atTop: true }))));
+            isBrowser && React.createElement(FocusTrap, null))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.124",
+	"version": "0.10.126",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",