@reykjavik/hanna-react 0.10.92 → 0.10.93

package/esm/_abstract/_FocusTrap.d.ts

@@ -0,0 +1,14 @@
+export type FocusTrapProps = {
+    /** The HTML tag to use for the trap element. (Default `<span />`) */
+    Tag?: `span` | `li`;
+    /** Set to `true` for focus traps positioned at the top of a container. */
+    atTop?: boolean;
+    /**
+     * How deep the trap is placed in the DOM tree beneath its container element.
+     *
+     * Default: `1`
+     */
+    depth?: number;
+};
+/** A focus trap element that can be used to keep keyboard focus within a container block. */
+export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/esm/_abstract/_FocusTrap.js

@@ -0,0 +1,19 @@
+import React from 'react';
+/** A focus trap element that can be used to keep keyboard focus within a container block. */
+export const FocusTrap = (props) => {
+    const Tag = props.Tag || 'span';
+    return (React.createElement(Tag, { tabIndex: 0, onFocus: (e) => {
+            var _a;
+            let container = e.currentTarget;
+            let depth = Math.max(props.depth || 0, 1);
+            while (depth-- && container) {
+                container = container.parentElement;
+            }
+            if (!container) {
+                return;
+            }
+            const focusables = container.querySelectorAll('a,input, select, textarea,button, [tabindex]');
+            const targetIdx = props.atTop ? focusables.length - 1 : 0;
+            (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
+        } }));
+};

package/esm/_abstract/_TogglerGroup.d.ts

@@ -1,24 +1,28 @@
 import { FormFieldInputProps } from '../FormField.js';
 import { HTMLProps } from '../utils.js';
 import { TogglerInputProps } from './_TogglerInput.js';
-export type TogglerGroupOption = {
+export type TogglerGroupOption<T = 'default'> = {
     value: string;
-    label?: string | JSX.Element;
+    label?: T extends 'default' ? string | JSX.Element : T;
     disabled?: boolean;
     id?: string;
 };
-export type TogglerGroupOptions = Array<TogglerGroupOption>;
+export type TogglerGroupOptions<T = 'default'> = Array<TogglerGroupOption<T>>;
 type RestrictedInputProps = Omit<HTMLProps<'input'>, 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'className' | 'id' | 'name' | 'children'>;
-export type TogglerGroupProps = {
-    options: TogglerGroupOptions;
+export type TogglerGroupProps<T = 'default'> = {
+    options: Array<string> | TogglerGroupOptions<T>;
     className?: string;
-    name: string;
+    name?: string;
     disabled?: boolean | ReadonlyArray<number>;
     inputProps?: RestrictedInputProps;
     onSelected?: (payload: {
+        /** The value of being selected/updated */
         value: string;
+        /** The new checked state of the selected value */
         checked: boolean;
-        option: TogglerGroupOption;
+        /** The option object being selected */
+        option: TogglerGroupOption<T>;
+        /** The updated value array */
         selectedValues: Array<string>;
     }) => void;
 } & Omit<FormFieldInputProps, 'disabled'>;

package/esm/_abstract/_TogglerGroup.js

@@ -1,11 +1,19 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useDomid } from '@hugsmidjan/react/hooks';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { useMixedControlState } from '../utils.js';
 export const TogglerGroup = (props) => {
     const { 
     // id,
-    className, bem, name, disabled, Toggler, onSelected, options, isRadio, inputProps = {}, } = props;
+    className, bem, disabled, readOnly, Toggler, onSelected, isRadio, inputProps = {}, } = props;
     const [values, setValues] = useMixedControlState(props, 'value', []);
+    const name = useDomid(props.name);
+    const options = useMemo(() => {
+        const _options = props.options;
+        return typeof _options[0] === 'string'
+            ? _options.map((option) => ({ value: option }))
+            : _options;
+    }, [props.options]);
     return (React.createElement("ul", { className: getBemClass(bem, null, className), role: "group", "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props.required }, options.map((option, i) => {
         const isDisabled = option.disabled != null
             ? option.disabled
@@ -23,6 +31,6 @@ export const TogglerGroup = (props) => {
                 }
                 setValues(selectedValues);
                 onSelected && onSelected({ value, checked, option, selectedValues });
-            }, disabled: isDisabled, "aria-invalid": props['aria-invalid'], checked: isChecked })));
+            }, disabled: isDisabled, readOnly: readOnly, "aria-invalid": props['aria-invalid'], checked: isChecked })));
     })));
 };

package/esm/_abstract/_TogglerGroupField.d.ts

@@ -3,9 +3,9 @@ import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { FormFieldGroupWrappingProps } from '../FormField.js';
 import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup.js';
 import { TogglerInputProps } from './_TogglerInput.js';
-export type TogglerGroupFieldProps = {
+export type TogglerGroupFieldProps<T = 'default'> = {
     className?: string;
-} & FormFieldGroupWrappingProps & TogglerGroupProps;
+} & Omit<FormFieldGroupWrappingProps, 'disabled'> & TogglerGroupProps<T>;
 type _TogglerGroupFieldProps = {
     Toggler: (props: TogglerInputProps) => ReactElement;
     isRadio?: true;
@@ -13,7 +13,7 @@ type _TogglerGroupFieldProps = {
     defaultValue?: string | ReadonlyArray<string>;
     bem: string;
 } & BemPropsModifier;
-export type TogglerGroupFieldOption = TogglerGroupOption;
-export type TogglerGroupFieldOptions = TogglerGroupOptions;
+export type TogglerGroupFieldOption<T = 'default'> = TogglerGroupOption<T>;
+export type TogglerGroupFieldOptions<T = 'default'> = TogglerGroupOptions<T>;
 export declare const TogglerGroupField: (props: TogglerGroupFieldProps & _TogglerGroupFieldProps) => JSX.Element;
 export {};

package/esm/_abstract/_TogglerGroupField.js

@@ -11,7 +11,7 @@ export const TogglerGroupField = (props) => {
         : typeof defaultValue === 'string'
             ? [defaultValue]
             : defaultValue, [defaultValue]);
-    return (React.createElement(FormField, { className: getBemClass(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
-            return (React.createElement(TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
+    return (React.createElement(FormField, { className: getBemClass(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: !!disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
+            return (React.createElement(TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
         } }));
 };

package/esm/_abstract/_TogglerInput.d.ts

@@ -2,7 +2,6 @@ import { BemPropsModifier } from '@hugsmidjan/react/types';
 export type TogglerInputProps = {
     label: string | JSX.Element;
     children?: never;
-    Wrapper?: 'div' | 'li';
     invalid?: boolean;
     /** Hidden label prefix text to indicate that the field is required.
      *
@@ -13,6 +12,9 @@ export type TogglerInputProps = {
      * */
     reqText?: string | false;
     errorMessage?: string | JSX.Element;
+    Wrapper?: 'div' | 'li';
+    wrapperProps?: JSX.IntrinsicElements['div'];
+    inputProps?: JSX.IntrinsicElements['input'];
 } & BemPropsModifier & Omit<JSX.IntrinsicElements['input'], 'type'>;
 type _TogglerInputProps = {
     bem: string;

package/esm/_abstract/_TogglerInput.js

@@ -3,21 +3,24 @@ import React from 'react';
 import { useDomid } from '@hugsmidjan/react/hooks';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 export const TogglerInput = (props) => {
-    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap } = props, inputProps = __rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap"]);
+    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = __rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
     const domid = useDomid(id);
     const errorId = errorMessage && 'error' + domid;
     const reqStar = required && reqText !== false && (React.createElement("abbr", { className: bem + '__label__reqstar', 
         // TODO: add mo-better i18n thinking
         title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
+    const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (React.createElement(React.Fragment, null,
         ' ',
         reqStar,
         " ",
         label,
         ' '));
-    return (React.createElement(Wrapper, { className: getBemClass(bem, modifier, className) },
-        React.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, inputProps)),
+    return (React.createElement(Wrapper, Object.assign({}, wrapperProps, { className: getBemClass(bem, modifier, className) }),
+        React.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
         ' ',
-        React.createElement("label", { className: bem + '__label', htmlFor: domid }, innerWrap ? (React.createElement("span", { className: bem + '__label__wrap' }, labelContent)) : (labelContent)),
+        React.createElement("label", { className: bem + '__label', htmlFor: domid },
+            innerWrap ? (React.createElement("span", { className: bem + '__label__wrap' }, labelContent)) : (labelContent),
+            readOnly && (React.createElement("input", { type: "hidden", name: restInputProps.name, value: restInputProps.value }))),
         errorMessage && (React.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
 };

package/esm/index.d.ts

@@ -38,6 +38,7 @@
 /// <reference path="./NewsHero.d.tsx" />
 /// <reference path="./NameCards.d.tsx" />
 /// <reference path="./NameCard.d.tsx" />
+/// <reference path="./Multiselect.d.tsx" />
 /// <reference path="./Modal.d.tsx" />
 /// <reference path="./MiniMetrics.d.tsx" />
 /// <reference path="./MainMenu.d.tsx" />

package/esm/utils/useFormatMonitor.d.ts

@@ -5,6 +5,8 @@
  * Exmple use:
  *
  * ```ts
+ * import { useFormatMonitor } from '@reykjavik/hanna-react/utils';
+ *
  * useFormatMonitor((media) => {
  *   if (media.is === 'phone') {
  *     // do something clever because the window
@@ -21,8 +23,8 @@
  *
  * ```ts
  *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
- *  media.is //: Format
- *  media.was //?: Format
+ *  media.is // : Format
+ *  media.was // ?: Format
  *  // Category/mode boolean flags
  *  // (Hamburger refers to the "mobile menu" mode)
  *  media.isTopmenu

package/esm/utils/useFormatMonitor.js

@@ -8,6 +8,8 @@ import { makeFormatMonitorHook } from 'formatchange/react';
  * Exmple use:
  *
  * ```ts
+ * import { useFormatMonitor } from '@reykjavik/hanna-react/utils';
+ *
  * useFormatMonitor((media) => {
  *   if (media.is === 'phone') {
  *     // do something clever because the window
@@ -24,8 +26,8 @@ import { makeFormatMonitorHook } from 'formatchange/react';
  *
  * ```ts
  *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
- *  media.is //: Format
- *  media.was //?: Format
+ *  media.is // : Format
+ *  media.was // ?: Format
  *  // Category/mode boolean flags
  *  // (Hamburger refers to the "mobile menu" mode)
  *  media.isTopmenu

package/index.d.ts

@@ -38,6 +38,7 @@
 /// <reference path="./NewsHero.d.tsx" />
 /// <reference path="./NameCards.d.tsx" />
 /// <reference path="./NameCard.d.tsx" />
+/// <reference path="./Multiselect.d.tsx" />
 /// <reference path="./Modal.d.tsx" />
 /// <reference path="./MiniMetrics.d.tsx" />
 /// <reference path="./MainMenu.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.92",
+	"version": "0.10.93",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -16,8 +16,8 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.20.0",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.2",
-		"@reykjavik/hanna-utils": "^0.2.6",
+		"@reykjavik/hanna-css": "^0.4.3",
+		"@reykjavik/hanna-utils": "^0.2.7",
 		"@types/react": "^17.0.24",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
@@ -205,6 +205,10 @@
 			"import": "./esm/NameCard.js",
 			"require": "./NameCard.js"
 		},
+		"./Multiselect": {
+			"import": "./esm/Multiselect.js",
+			"require": "./Multiselect.js"
+		},
 		"./Modal": {
 			"import": "./esm/Modal.js",
 			"require": "./Modal.js"

package/utils/useFormatMonitor.d.ts

@@ -5,6 +5,8 @@
  * Exmple use:
  *
  * ```ts
+ * import { useFormatMonitor } from '@reykjavik/hanna-react/utils';
+ *
  * useFormatMonitor((media) => {
  *   if (media.is === 'phone') {
  *     // do something clever because the window
@@ -21,8 +23,8 @@
  *
  * ```ts
  *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
- *  media.is //: Format
- *  media.was //?: Format
+ *  media.is // : Format
+ *  media.was // ?: Format
  *  // Category/mode boolean flags
  *  // (Hamburger refers to the "mobile menu" mode)
  *  media.isTopmenu

package/utils/useFormatMonitor.js

@@ -11,6 +11,8 @@ const react_1 = require("formatchange/react");
  * Exmple use:
  *
  * ```ts
+ * import { useFormatMonitor } from '@reykjavik/hanna-react/utils';
+ *
  * useFormatMonitor((media) => {
  *   if (media.is === 'phone') {
  *     // do something clever because the window
@@ -27,8 +29,8 @@ const react_1 = require("formatchange/react");
  *
  * ```ts
  *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
- *  media.is //: Format
- *  media.was //?: Format
+ *  media.is // : Format
+ *  media.was // ?: Format
  *  // Category/mode boolean flags
  *  // (Hamburger refers to the "mobile menu" mode)
  *  media.isTopmenu