@reykjavik/hanna-react 0.10.55 → 0.10.56

package/esm/VSpacer.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const sizes = {
+    none: 'none',
+    small: 'small',
+    default: '',
+    medium: '',
+    large: 'large',
+    xlarge: 'xlarge',
+};
+const hasChildren = (children) => (children && !(Array.isArray(children) && !children.length)) || undefined;
+const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : undefined;
+const VSpacer = (props) => {
+    const { size, top, bottom, children } = props;
+    const isWrapper = hasChildren(children);
+    let topVal = normalizeProp(isWrapper && top);
+    let bottomVal = normalizeProp(isWrapper && bottom);
+    let sizeVal = !(topVal && bottomVal) && normalizeProp(size, 'none');
+    // collapse effectively-duplicate class modifiers
+    if (!sizeVal && topVal === bottomVal && topVal !== 'none') {
+        sizeVal = topVal;
+        topVal = bottomVal = undefined;
+    }
+    else if (sizeVal) {
+        if (sizeVal === topVal) {
+            sizeVal = topVal;
+            topVal = undefined;
+        }
+        if (sizeVal === bottomVal) {
+            sizeVal = bottomVal;
+            bottomVal = undefined;
+        }
+    }
+    const className = getBemClass('VSpacer', [
+        sizeVal,
+        topVal && 'top--' + topVal,
+        bottomVal && 'bottom--' + bottomVal,
+    ]);
+    return isWrapper ? (<div className={className}>{children}</div>) : (<hr className={className}/>);
+};
+export default VSpacer;

package/esm/VerticalTabsTOC.d.ts

@@ -0,0 +1,14 @@
+import { TabItemProps, TabsProps } from './Tabs';
+export declare type VerticalTabsTOCItem = TabItemProps & {
+    items?: Array<VerticalTabsTOCSubItem>;
+};
+export declare type VerticalTabsTOCSubItem = TabItemProps & {
+    type?: never;
+    href: string;
+};
+export declare type VerticalTabsTOCProps = {
+    items: Array<VerticalTabsTOCItem>;
+    onItemSelect: (itemId: string) => void;
+} & Pick<TabsProps, 'aria-label' | 'ssr' | 'activateOnFocus' | 'id' | 'startSeen'>;
+declare const VerticalTabsTOC: (props: VerticalTabsTOCProps) => JSX.Element;
+export default VerticalTabsTOC;

package/esm/VerticalTabsTOC.jsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { setFrag } from '@hugsmidjan/qj/frag';
+import { useDomid } from '@hugsmidjan/react/hooks';
+import Tabs from './Tabs';
+const getId = (url) => (url && decodeURIComponent(url.split('#')[1] || '')) || '';
+const getItemId = (item) => getId(item && item.href);
+const mapToItemsById = (items, domid) => {
+    const updatedItems = items.map((item) => {
+        return Object.assign(Object.assign({}, item), { 'aria-controls': item['aria-controls'] || domid });
+    });
+    const itemsById = {};
+    updatedItems.forEach((topItem, activeIdx) => {
+        const subItems = topItem.items;
+        if (!subItems) {
+            const itemId = getItemId(topItem);
+            itemsById[itemId] = { activeIdx };
+            return;
+        }
+        subItems.forEach((subItem, idx) => {
+            itemsById[getItemId(subItem)] = {
+                activeIdx,
+                subTabs: {
+                    activeIdx: idx,
+                    'aria-label': topItem.longLabel || topItem.label,
+                    id: topItem['aria-controls'],
+                    tabs: subItems,
+                    onSetActive: (_, item) => {
+                        const newId = getItemId(item);
+                        setFrag(newId);
+                    },
+                },
+            };
+            if (idx === 0) {
+                topItem.href = topItem.href || '#' + getItemId(subItem);
+            }
+        });
+    });
+    return { itemsById, updatedItems };
+};
+const VerticalTabsTOC = (props) => {
+    const { onItemSelect, items } = props;
+    const _domid = useDomid();
+    const domid = props.id || _domid;
+    const { itemsById, updatedItems } = useMemo(() => mapToItemsById(items, domid), [items, domid]);
+    const [state, setState] = useState(() => {
+        const initialId = typeof location !== 'undefined' ? getId(location.hash) : '';
+        return itemsById[initialId] || itemsById[getItemId(updatedItems[0])] || {};
+    });
+    useEffect(() => {
+        const handleHash = () => {
+            const newId = getId(location.href);
+            const newState = itemsById[newId];
+            if (newState) {
+                setState(newState);
+                onItemSelect(newId);
+            }
+        };
+        window.addEventListener('hashchange', handleHash);
+        return () => window.removeEventListener('hashchange', handleHash);
+    }, [itemsById, onItemSelect]);
+    return (<Tabs id={domid} vertical aria-label={props['aria-label']} onSetActive={(_, item) => {
+            var _a;
+            const itemId = getItemId(item);
+            const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);
+            setFrag(newId);
+        }} tabs={updatedItems} role="tablist" activeIdx={state.activeIdx} subTabs={state.subTabs}/>);
+};
+export default VerticalTabsTOC;

package/esm/WizardLayout.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+import { HannaColorTheme } from '@reykjavik/hanna-css';
+declare type WizardLayoutProps = {
+    wizardStepper?: ReactNode;
+    wizardFooter?: ReactNode;
+    colorTheme?: HannaColorTheme;
+    siteName?: string;
+    logoLink?: string;
+    globalAlerts?: ReactNode;
+    ssr?: SSRSupport;
+    children?: ReactNode;
+};
+declare const WizardLayout: (props: WizardLayoutProps) => JSX.Element;
+export default WizardLayout;

package/esm/WizardLayout.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
+import Image from './_abstract/Image';
+import { Link } from './_abstract/Link';
+import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar';
+const WizardLayout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { 
+    // ssr,
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
+    const isBrowser = useIsBrowserSide( /* ssr */);
+    return (<div className="WizardLayout" data-sprinkled={isBrowser} data-color-theme={colorTheme}>
+      {globalAlerts && (<div className="WizardLayout__alerts" role="alert">
+          {globalAlerts}
+        </div>)}
+      <div className="WizardLayout__content">
+        <div className="WizardLayout__header" role="banner">
+          <Link className="WizardLayout__header__logo" href={logoLink}>
+            {' '}
+            <Image inline={true} src={getAssetUrl('reykjavik-logo.svg')}/> {siteName}{' '}
+          </Link>{' '}
+        </div>
+        <div className="WizardLayout__wrap">
+          {wizardStepper && (<div className="WizardLayout__stepper" role="navigation">
+              {wizardStepper}
+            </div>)}
+          <div className="WizardLayout__main" role="main">
+            {children}
+          </div>
+          <div className="WizardLayout__deco WizardLayout__deco--geometry"/>
+        </div>
+        <div className="WizardLayout__footer" role="complementary">
+          {wizardFooter}
+        </div>
+      </div>
+    </div>);
+};
+export default WizardLayout;

package/esm/WizardLayoutClose.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from './_abstract/Button';
+declare const WizardLayoutClose: (props: ButtonProps) => JSX.Element;
+export default WizardLayoutClose;

package/esm/WizardLayoutClose.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import Button from './_abstract/Button';
+const WizardLayoutClose = (props) => (<Button bem="WizardLayoutClose" {...props}/>);
+export default WizardLayoutClose;

package/esm/WizardStepper.d.ts

@@ -0,0 +1,36 @@
+export declare type WizardStepperStep = {
+    label: string;
+    /**
+     * Should the step be clickable?
+     *
+     * * `true` = The items becomes clickable as allowed by the `activeStep`,
+     *    `disableBacktrack` and `allowForwardSkip` props.
+     * * `false | undefined` =  Never clickable, regardless of `activeStep`.
+     * * `"always"` = Always clickable regardless of `activeStep` or other props.
+     */
+    clickable?: boolean | 'always';
+    /**
+     * Flags the item as having a non-default done state
+     *
+     * * `undefined` = automatically set "done" on items before `activeStep`
+     * * `true` = Always flag as "done", regardless of `activeStep`
+     * * `false` = Never flag as "done", regardless of `activeStep`
+     */
+    done?: boolean;
+    /**
+     * Flags the step as not part of the numbering scheme
+     */
+    neutral?: boolean;
+};
+export declare type WizardStepperProps = {
+    steps: ReadonlyArray<WizardStepperStep>;
+    /** Zero-based index of the active (current) step */
+    activeStep?: number;
+    /** By default, clickable "done" steps remain clickable */
+    disableBacktrack?: boolean;
+    /** By default, clickable steps after the active step are not immediately clickable */
+    allowForwardSkip?: boolean;
+    onClick: (clickedIndex: number) => void;
+};
+declare const WizardStepper: (props: WizardStepperProps) => JSX.Element;
+export default WizardStepper;

package/esm/WizardStepper.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const WizardStepper = (props) => {
+    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
+    return (<div className={getBemClass('WizardStepper', activeStep === -1 && 'preview')}>
+      {steps.map((step, i) => {
+            const { label, clickable, done, neutral } = step;
+            const stepClass = getBemClass('WizardStepper__step', [
+                (done || (done == null && i < activeStep)) && 'done',
+                neutral && 'neutral',
+            ]);
+            const isClickable = clickable === 'always' ||
+                (clickable &&
+                    (activeStep === i ||
+                        (i > activeStep && allowForwardSkip) ||
+                        (i < activeStep && !disableBacktrack)));
+            const ariaCurrent = activeStep === i ? 'step' : undefined;
+            return (<React.Fragment key={i}>
+            {isClickable ? (<button type="button" className={stepClass} onClick={() => onClick(i)} aria-current={ariaCurrent}>
+                {label}
+              </button>) : (<span className={stepClass} aria-current={ariaCurrent}>
+                {' '}
+                {label}{' '}
+              </span>)}{' '}
+          </React.Fragment>);
+        })}
+    </div>);
+};
+export default WizardStepper;

package/esm/_abstract/Button.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { BemProps, BemPropsModifier } from '@hugsmidjan/react/types';
+declare type ButtonElmProps = {
+    href?: never;
+} & BemPropsModifier & Omit<JSX.IntrinsicElements['button'], 'className' | 'style'>;
+declare type AnchorElmProps = {
+    href: string;
+    type?: never;
+    name?: never;
+    value?: never;
+} & BemPropsModifier & Omit<JSX.IntrinsicElements['a'], 'className' | 'style'>;
+export declare type ButtonProps = {
+    /** Label takes preference over `children` */
+    label?: string | JSX.Element;
+} & (ButtonElmProps | AnchorElmProps);
+declare const sizes: {
+    readonly normal: "";
+    readonly small: "small";
+    readonly wide: "wide";
+};
+declare type ButtonSize = keyof typeof sizes;
+declare const variants: {
+    readonly normal: "";
+    readonly destructive: "destructive";
+};
+declare type ButtonVariant = keyof typeof variants;
+declare type NavigationFlag = 'none' | 'go-back' | 'go-forward';
+declare type ButtonIcon = 'edit';
+export declare type ButtonVariantProps = {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    icon?: ButtonIcon | NavigationFlag;
+    /** @deprecated (Will be removed in v0.11) */
+    small?: boolean;
+};
+declare type _ButtonProps = ButtonProps & ButtonVariantProps & BemProps & {
+    children?: ReactNode;
+};
+declare const Button: (props: _ButtonProps) => JSX.Element;
+export default Button;

package/esm/_abstract/Button.jsx

@@ -0,0 +1,51 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Link } from './Link';
+// ---------------------------------------------------------------------------
+const sizes = {
+    normal: '',
+    small: 'small',
+    wide: 'wide',
+};
+// ---------------------------------------------------------------------------
+const variants = {
+    normal: '',
+    destructive: 'destructive',
+};
+const navigationFlags = {
+    none: '',
+    'go-back': 'go--back',
+    'go-forward': 'go--forward',
+};
+const icons = {
+    // TODO: insert icons
+    edit: 'edit',
+};
+const Button = (props) => {
+    const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    const className = bem &&
+        getBemClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
+    const iconProp = icons[icon] && { 'data-icon': icons[icon] };
+    if (buttonProps.href != null) {
+        return (<Link className={className} {...buttonProps} style={undefined} {...iconProp}>
+        {label}
+      </Link>);
+    }
+    else {
+        return (<button className={className} type="button" {...buttonProps} style={undefined} {...iconProp}>
+        {label}
+      </button>);
+    }
+};
+export default Button;

package/esm/_abstract/CardList.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+import { ImageProps } from './Image';
+declare type BaseCardProps = {
+    title: string;
+    href: string;
+    imgPlaceholder?: boolean;
+};
+export declare type ImageCardProps = BaseCardProps & {
+    meta?: string;
+    image?: ImageProps;
+};
+export declare type TextCardProps = BaseCardProps & {
+    summary?: string;
+};
+export declare type CardListProps<T> = {
+    cards: Array<T>;
+    title?: string | undefined;
+    summaryElement?: ReactElement;
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p';
+    imgPlaceholder?: boolean | string;
+};
+export declare type ImageCardListProps = CardListProps<ImageCardProps>;
+export declare type TextCardListProps = CardListProps<TextCardProps>;
+declare type _CardListProps = CardListProps<BaseCardProps> & {
+    bemPrefix: string;
+    children?: ReactNode;
+};
+export declare const CardList: (props: _CardListProps) => JSX.Element;
+export {};

package/esm/_abstract/CardList.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Button from './Button';
+import Image from './Image';
+const Card = (props) => {
+    const { bem, href, title, imgPlaceholder } = props;
+    const cardClass = `${bem}__card`;
+    const image = 'image' in props && props.image;
+    const meta = 'meta' in props && props.meta;
+    const summary = 'summary' in props && props.summary;
+    return (<>
+      <Button bem={cardClass} href={href}>
+        {' '}
+        <Image className={`${bem}__image`} {...image} placeholder={imgPlaceholder}/>
+        <span className={`${cardClass}__title`}>{title}</span>{' '}
+        {meta && <span className={`${cardClass}__meta`}>{meta}</span>}{' '}
+        {summary && <span className={`${cardClass}__summary`}>{summary}</span>}{' '}
+      </Button>{' '}
+    </>);
+};
+export const CardList = (props) => {
+    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
+    const TitleTag = titleTag;
+    const fallbackImage = (imgPlaceholder !== true && imgPlaceholder) || undefined;
+    const fallbackImageStyle = fallbackImage
+        ? { '--ImageCards--fallback': `url("${fallbackImage}")` }
+        : undefined;
+    return (<>
+      {summaryElement ? (<div className={bemPrefix + '__summary'}>
+          {title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>}
+          {summaryElement}
+        </div>) : (title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>)}
+      <ul className={bemPrefix + '__list'} style={fallbackImageStyle}>
+        {cards.map((card, i) => (<li key={i} className={bemPrefix + '__item'}>
+            <Card {...card} bem={bemPrefix} imgPlaceholder={!!imgPlaceholder}/>
+          </li>))}
+      </ul>
+      {children}
+    </>);
+};

package/esm/_abstract/Image.d.ts

@@ -0,0 +1,32 @@
+export declare type Source = {
+    srcset: string;
+    media: string;
+};
+export declare type ImageProps = {
+    altText?: string;
+} & ({
+    sources?: Array<Source>;
+    /** The default image source to (lazy) load */
+    src?: string;
+    /** Eagerly-loaded placeholder/thunbnail to use until a `sources` item has been picked.  */
+    preloadSrc?: string;
+    inline?: false;
+} | {
+    /** Should the image be fetched and inlined as <svg/> */
+    inline: true;
+    src: string;
+    sources?: undefined;
+    preloadSrc?: undefined;
+});
+declare type _ImageProps = {
+    /** container className */
+    className?: string;
+    /** Controls if the container is rendered when image is missing/undefined.
+     * (With a `--missing` className modifier added.)
+     *
+     * Accepts a function that defines a default content for the container.
+     */
+    placeholder?: boolean | (() => JSX.Element);
+};
+declare const Image: (props: ImageProps & _ImageProps) => JSX.Element | null;
+export default Image;

package/esm/_abstract/Image.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useGetSVGtext } from '../utils/useGetSVGtext';
+// eslint-disable-next-line complexity
+const Image = (props) => {
+    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, } = props;
+    const _src = (sources.length && preloadSrc) || src;
+    const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
+    const imgLoading = preloadSrc ? 'eager' : 'lazy';
+    const inlineSvg = useGetSVGtext(inline ? imageSrc : undefined);
+    if (!imageSrc) {
+        return placeholder ? (<span className={className && getBemClass(className, 'missing')}>
+        {placeholder !== true && placeholder()}
+      </span>) : null;
+    }
+    if (inline && inlineSvg) {
+        const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
+        return <span className={className} dangerouslySetInnerHTML={{ __html }}/>;
+    }
+    return (<picture className={className}>
+      {' '}
+      {sources.map((source, i) => (<>
+          <source key={i} srcSet={source.srcset} media={source.media}/>{' '}
+        </>))}{' '}
+      <img src={imageSrc} alt={altText} loading={imgLoading}/>
+      {'  '}
+    </picture>);
+};
+export default Image;

package/esm/_abstract/Link.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Props object ready to be ..spread onto an anchor element
+ * */
+export declare type LinkProps = JSX.IntrinsicElements['a'] & {
+    href: string;
+};
+export declare type LinkRenderer = (props: LinkProps) => JSX.Element;
+export declare let Link: LinkRenderer;
+/**
+ * Allows you to set a callback function to wrapp <a href=""/> links with
+ * a custom routing component.
+ *
+ * Example use:
+ *
+ * ```js
+ *   import { Link } from 'remix'; // or whatever :-)
+ *
+ *   setLinkRenderer((linkProps) =>
+ *     <Link to={linkProps.href}><a {...linkProps} /></Link>);
+ * ```
+ *
+ * The Default linkrenderer defined as:
+ * ```js
+ * 	(linkProps) => React.createElement('a', linkProps);
+ * ```
+ */
+export declare const setLinkRenderer: (linkRenderer: LinkRenderer | undefined) => void;

package/esm/_abstract/Link.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+const DefaultLinkRenderer = (props) => React.createElement('a', props);
+export let Link = DefaultLinkRenderer;
+/**
+ * Allows you to set a callback function to wrapp <a href=""/> links with
+ * a custom routing component.
+ *
+ * Example use:
+ *
+ * ```js
+ *   import { Link } from 'remix'; // or whatever :-)
+ *
+ *   setLinkRenderer((linkProps) =>
+ *     <Link to={linkProps.href}><a {...linkProps} /></Link>);
+ * ```
+ *
+ * The Default linkrenderer defined as:
+ * ```js
+ * 	(linkProps) => React.createElement('a', linkProps);
+ * ```
+ */
+export const setLinkRenderer = (linkRenderer) => {
+    Link = linkRenderer || DefaultLinkRenderer;
+};

package/esm/_abstract/TogglerGroup.d.ts

@@ -0,0 +1,31 @@
+import { FormFieldInputProps } from '../FormField';
+import { TogglerInputProps } from './TogglerInput';
+export declare type TogglerGroupOption = {
+    value: string;
+    label?: string | JSX.Element;
+    disabled?: boolean;
+    id?: string;
+};
+export declare type TogglerGroupOptions = Array<TogglerGroupOption>;
+declare type RestrictedInputProps = Omit<JSX.IntrinsicElements['input'], 'type' | 'value' | 'checked' | 'defaultChecked' | 'className' | 'id' | 'name' | 'children'>;
+export declare type TogglerGroupProps = {
+    options: TogglerGroupOptions;
+    className?: string;
+    name: string;
+    children?: undefined;
+    disabled?: boolean | ReadonlyArray<number>;
+    inputProps?: RestrictedInputProps;
+    onSelected?: (payload: {
+        value: string;
+        checked: boolean;
+        option: TogglerGroupOption;
+        selectedValues: Array<string>;
+    }) => void;
+} & Omit<FormFieldInputProps, 'disabled'>;
+declare type _TogglerGroupProps = {
+    bem: string;
+    Toggler: (props: TogglerInputProps) => JSX.Element;
+    value?: ReadonlyArray<string>;
+};
+declare const TogglerGroup: (props: TogglerGroupProps & _TogglerGroupProps) => JSX.Element;
+export default TogglerGroup;

package/esm/_abstract/TogglerGroup.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const TogglerGroup = (props) => {
+    const { 
+    // id,
+    className, bem, name, disabled, Toggler, onSelected, options, inputProps = {}, } = props;
+    const values = props.value || [];
+    return (<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
+                : disabled && typeof disabled !== 'boolean'
+                    ? disabled.includes(i)
+                    : disabled;
+            const isChecked = values.includes(option.value);
+            return (<Toggler key={i} {...inputProps} className={bem + '__item'} name={name} Wrapper="li" {...option} label={option.label || option.value} onChange={onSelected
+                    ? (e) => {
+                        const { value } = option;
+                        const checked = e.currentTarget.checked;
+                        inputProps.onChange && inputProps.onChange(e);
+                        const selectedValues = values.filter((val) => val !== value);
+                        if (checked) {
+                            selectedValues.push(value);
+                        }
+                        onSelected({ value, checked, option, selectedValues });
+                    }
+                    : inputProps.onChange} disabled={isDisabled} aria-invalid={props['aria-invalid']} checked={isChecked}/>);
+        })}
+    </ul>);
+};
+export default TogglerGroup;

package/esm/_abstract/TogglerGroupField.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { FormFieldGroupWrappingProps } from '../FormField';
+import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './TogglerGroup';
+import { TogglerInputProps } from './TogglerInput';
+export declare type TogglerGroupFieldProps = {
+    className?: string;
+} & FormFieldGroupWrappingProps & TogglerGroupProps;
+declare type _TogglerGroupFieldProps = {
+    Toggler: (props: TogglerInputProps) => ReactElement;
+    value?: string | ReadonlyArray<string>;
+    bem: string;
+} & BemPropsModifier;
+export declare type TogglerGroupFieldOption = TogglerGroupOption;
+export declare type TogglerGroupFieldOptions = TogglerGroupOptions;
+declare const TogglerGroupField: (props: TogglerGroupFieldProps & _TogglerGroupFieldProps) => JSX.Element;
+export default TogglerGroupField;

package/esm/_abstract/TogglerGroupField.jsx

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import FormField from '../FormField';
+import TogglerGroup from './TogglerGroup';
+const TogglerGroupField = (props) => {
+    const { bem, Toggler, className, modifier, label, LabelTag, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, value } = props, togglerGroupProps = __rest(props, ["bem", "Toggler", "className", "modifier", "label", "LabelTag", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "value"]);
+    return (<FormField className={getBemClass(bem, modifier, className)} group 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 (<TogglerGroup bem={className.options} {...inputProps} {...togglerGroupProps} value={Array.isArray(value) ? value : value != null ? [value] : undefined} Toggler={Toggler}/>);
+        }}/>);
+};
+export default TogglerGroupField;