@pega/cosmos-react-core 4.0.0-dev.6.1 → 4.0.0-dev.8.0

package/lib/components/DateTime/Input/TimeRangeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, Ref, useCallback, useRef } from 'react';\n\nimport Flex from '../../Flex';\nimport { FormControlProps } from '../../FormControl';\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport DateTimeProps, {\n  DateRangeCallbackParameter,\n  DateTimeCallbackParameter,\n  DateTimeProperties\n} from '../DateTime.types';\nimport { ForwardProps } from '../../../types';\nimport { StyledRangeInputContainer } from '../../Input/Input.styles';\nimport { MinuteInterval } from '../Picker/TimePicker';\nimport FormField from '../../FormField';\n\nimport { ClockFormat, parseToDate } from './utils';\nimport TimeInput from './TimeInput';\nimport DateTimeInput from './DateTimeInput';\n\nexport interface TimeRangeInputProps extends DateTimeProperties {\n  /** Object of range boundaries. */\n  value?: { start?: DateTimeProps['value']; end?: DateTimeProps['value'] };\n  /** Callback fired when inputs value changes. */\n  onChange: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateRangeCallbackParameter) => void;\n  /** Pass a string or a fragment with an Icon and string for first part of TimeRangeInput. */\n  fromLabel?: FormControlProps['label'];\n  /** Pass a string or a fragment with an Icon and string for second part of TimeRangeInput. */\n  toLabel?: FormControlProps['label'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of DataRangeInput. */\n  toAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of DataRangeInput. */\n  fromAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Controls which input is displayed */\n  mode: 'time' | 'datetime';\n  /**\n   * Display the time with seconds.\n   * @default false\n   */\n  withSeconds?: boolean;\n  /**\n   * Defines interval for time picker options (in minutes).\n   * @default 30\n   */\n  pickerInterval?: MinuteInterval;\n  /**\n   * Defines clock format that overrides locale based format\n   */\n  clockFormat?: ClockFormat;\n}\n\nconst convertToCallbackParameter = (v?: number): DateTimeCallbackParameter => {\n  return {\n    valueAsISOString: v === undefined || Number.isNaN(v) ? '' : new Date(v).toISOString(),\n    valueAsTimestamp: v\n  };\n};\n\nconst TimeRangeInput: FunctionComponent<TimeRangeInputProps & ForwardProps> = forwardRef(\n  (\n    {\n      value = {},\n      onChange,\n      onFocus,\n      onBlur,\n      label,\n      fromLabel,\n      toLabel,\n      labelHidden,\n      required,\n      readOnly,\n      disabled,\n      min,\n      max,\n      withSeconds,\n      pickerInterval,\n      clockFormat,\n      mode,\n      status,\n      fromAdditionalInfo,\n      toAdditionalInfo,\n      autoFocus,\n      ...restProps\n    }: TimeRangeInputProps,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n\n    const startDateRef = useRef(value.start ? parseToDate(value.start).getTime() : undefined);\n    const endDateRef = useRef(value.end ? parseToDate(value.end).getTime() : undefined);\n\n    const onFocusChange = useCallback(\n      (focused: boolean) => {\n        (focused ? onFocus : onBlur)?.({\n          start: convertToCallbackParameter(startDateRef.current),\n          end: convertToCallbackParameter(endDateRef.current)\n        });\n      },\n      [onFocus, onBlur]\n    );\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const commonProps = {\n      required,\n      readOnly,\n      disabled,\n      min,\n      max,\n      status,\n      withSeconds,\n      pickerInterval,\n      clockFormat\n    };\n\n    return (\n      <FormField\n        as='fieldset'\n        {...restProps}\n        container={{ wrap: 'nowrap' }}\n        ref={containerRef}\n        labelAs='legend'\n        label={label}\n        labelHidden={labelHidden}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        status={status}\n      >\n        <Flex container as={StyledRangeInputContainer}>\n          {mode === 'time' ? (\n            <>\n              <TimeInput\n                {...commonProps}\n                value={value.start}\n                onBlur={changedValue => {\n                  startDateRef.current = !changedValue.state\n                    ? changedValue.valueAsTimestamp\n                    : undefined;\n                  onChange({\n                    start: changedValue,\n                    end: convertToCallbackParameter(endDateRef.current)\n                  });\n                }}\n                label={fromLabel}\n                aria-label={`${t('range_from_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={fromAdditionalInfo}\n                autoFocus={autoFocus}\n              />\n              <TimeInput\n                {...commonProps}\n                value={value.end}\n                onBlur={changedValue => {\n                  endDateRef.current = !changedValue.state\n                    ? changedValue.valueAsTimestamp\n                    : undefined;\n                  onChange({\n                    start: convertToCallbackParameter(startDateRef.current),\n                    end: changedValue\n                  });\n                }}\n                label={toLabel}\n                aria-label={`${t('range_to_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={toAdditionalInfo}\n              />\n            </>\n          ) : (\n            <>\n              <DateTimeInput\n                {...commonProps}\n                value={value.start}\n                onBlur={changedValue => {\n                  startDateRef.current = !changedValue.state\n                    ? changedValue.valueAsTimestamp\n                    : undefined;\n                  onChange({\n                    start: changedValue,\n                    end: convertToCallbackParameter(endDateRef.current)\n                  });\n                }}\n                label={fromLabel}\n                aria-label={`${t('range_from_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={fromAdditionalInfo}\n              />\n              <DateTimeInput\n                {...commonProps}\n                value={value.end}\n                onBlur={changedValue => {\n                  endDateRef.current = !changedValue.state\n                    ? changedValue.valueAsTimestamp\n                    : undefined;\n                  onChange({\n                    start: convertToCallbackParameter(startDateRef.current),\n                    end: changedValue\n                  });\n                }}\n                label={toLabel}\n                aria-label={`${t('range_to_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={toAdditionalInfo}\n              />\n            </>\n          )}\n        </Flex>\n      </FormField>\n    );\n  }\n);\nexport default TimeRangeInput;\n"]}
+{"version":3,"file":"TimeRangeInput.js","sourceRoot":"","sources":["../../../../src/components/DateTime/Input/TimeRangeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  useCallback,\n  useImperativeHandle,\n  useReducer,\n  useRef\n} from 'react';\n\nimport Flex from '../../Flex';\nimport { FormControlProps, HandleValue } from '../../FormControl';\nimport { useConsolidatedRef, useFocusWithin, useI18n } from '../../../hooks';\nimport DateTimeProps, {\n  DateRangeCallbackParameter,\n  DateTimeCallbackParameter,\n  DateTimeProperties\n} from '../DateTime.types';\nimport { ForwardProps } from '../../../types';\nimport { StyledRangeInputContainer } from '../../Input/Input.styles';\nimport { MinuteInterval } from '../Picker/TimePicker';\nimport FormField from '../../FormField';\n\nimport { ClockFormat, parseToDate } from './utils';\nimport TimeInput from './TimeInput';\nimport DateTimeInput from './DateTimeInput';\n\nexport interface TimeRangeInputProps extends DateTimeProperties {\n  /** Object of range boundaries. */\n  value?: { start?: DateTimeProps['value']; end?: DateTimeProps['value'] };\n  /** Callback fired when inputs value changes. */\n  onChange: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component gets focused. */\n  onFocus?: (value: DateRangeCallbackParameter) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: DateRangeCallbackParameter) => void;\n  /** Pass a string or a fragment with an Icon and string for first part of TimeRangeInput. */\n  fromLabel?: FormControlProps['label'];\n  /** Pass a string or a fragment with an Icon and string for second part of TimeRangeInput. */\n  toLabel?: FormControlProps['label'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of DataRangeInput. */\n  toAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of DataRangeInput. */\n  fromAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Controls which input is displayed */\n  mode: 'time' | 'datetime';\n  /**\n   * Display the time with seconds.\n   * @default false\n   */\n  withSeconds?: boolean;\n  /**\n   * Defines interval for time picker options (in minutes).\n   * @default 30\n   */\n  pickerInterval?: MinuteInterval;\n  /**\n   * Defines clock format that overrides locale based format\n   */\n  clockFormat?: ClockFormat;\n  /** Imperative handle */\n  handle?: Ref<HandleValue>;\n}\n\ntype DateRangeAction = { type: 'start' | 'end'; value?: number };\ntype State = { start?: number; end?: number };\n\nconst reducer = (prevState: State, { type, value }: DateRangeAction): State => {\n  switch (type) {\n    case 'start': {\n      return { ...prevState, start: value };\n    }\n    case 'end': {\n      return { ...prevState, end: value };\n    }\n    default:\n      return prevState;\n  }\n};\n\nconst convertToCallbackParameter = (v?: number): DateTimeCallbackParameter => {\n  return {\n    valueAsISOString: v === undefined || Number.isNaN(v) ? '' : new Date(v).toISOString(),\n    valueAsTimestamp: v\n  };\n};\n\nconst TimeRangeInput: FunctionComponent<TimeRangeInputProps & ForwardProps> = forwardRef(\n  (\n    {\n      value = {},\n      onChange,\n      onFocus,\n      onBlur,\n      label,\n      fromLabel,\n      toLabel,\n      labelHidden,\n      required,\n      readOnly,\n      disabled,\n      min,\n      max,\n      withSeconds,\n      pickerInterval,\n      clockFormat,\n      mode,\n      status,\n      fromAdditionalInfo,\n      toAdditionalInfo,\n      autoFocus,\n      handle,\n      ...restProps\n    }: TimeRangeInputProps,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n\n    const startTimeInputRef = useRef<HTMLFieldSetElement>(null);\n    const endTimeInputRef = useRef<HTMLFieldSetElement>(null);\n\n    const startTimeClearHandle = useRef<HandleValue>(null);\n    const endTimeClearHandle = useRef<HandleValue>(null);\n\n    const [state, dispatch] = useReducer(reducer, {\n      start: value.start ? parseToDate(value.start).getTime() : undefined,\n      end: value.end ? parseToDate(value.end).getTime() : undefined\n    });\n\n    const startTimeRef = useRef<DateTimeCallbackParameter>(convertToCallbackParameter(state.start));\n    const endTimeRef = useRef<DateTimeCallbackParameter>(convertToCallbackParameter(state.end));\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        clear: () => {\n          startTimeClearHandle.current?.clear();\n          endTimeClearHandle.current?.clear();\n          const emptyCallbackParameter = convertToCallbackParameter(undefined);\n          startTimeRef.current = emptyCallbackParameter;\n          endTimeRef.current = emptyCallbackParameter;\n          dispatch({ type: 'start', value: undefined });\n          dispatch({ type: 'end', value: undefined });\n          onChange({\n            start: emptyCallbackParameter,\n            end: emptyCallbackParameter\n          });\n        }\n      }),\n      [onChange]\n    );\n\n    const onFocusChange = useCallback(\n      (focused: boolean) => {\n        (focused ? onFocus : onBlur)?.({\n          start: startTimeRef.current,\n          end: endTimeRef.current\n        });\n      },\n      [onFocus, onBlur]\n    );\n\n    const containerRef = useConsolidatedRef(ref);\n    useFocusWithin([containerRef], onFocusChange);\n\n    const commonProps = {\n      required,\n      readOnly,\n      disabled,\n      min,\n      max,\n      status,\n      withSeconds,\n      pickerInterval,\n      clockFormat\n    };\n\n    return (\n      <FormField\n        as='fieldset'\n        {...restProps}\n        container={{ wrap: 'nowrap' }}\n        ref={containerRef}\n        labelAs='legend'\n        label={label}\n        labelHidden={labelHidden}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        status={status}\n      >\n        <Flex container as={StyledRangeInputContainer}>\n          {mode === 'time' ? (\n            <>\n              <TimeInput\n                {...commonProps}\n                value={state.start}\n                onBlur={changedValue => {\n                  dispatch({\n                    type: 'start',\n                    value: changedValue.state ? undefined : changedValue.valueAsTimestamp\n                  });\n\n                  startTimeRef.current = changedValue;\n                  onChange({\n                    start: changedValue,\n                    end: convertToCallbackParameter(state.end)\n                  });\n                }}\n                label={fromLabel}\n                aria-label={`${t('range_from_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={fromAdditionalInfo}\n                autoFocus={autoFocus}\n                ref={startTimeInputRef}\n                handle={startTimeClearHandle}\n              />\n              <TimeInput\n                {...commonProps}\n                value={state.end}\n                onBlur={changedValue => {\n                  dispatch({\n                    type: 'end',\n                    value: changedValue.state ? undefined : changedValue.valueAsTimestamp\n                  });\n\n                  endTimeRef.current = changedValue;\n                  onChange({\n                    start: convertToCallbackParameter(state.start),\n                    end: changedValue\n                  });\n                }}\n                label={toLabel}\n                aria-label={`${t('range_to_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={toAdditionalInfo}\n                ref={endTimeInputRef}\n                handle={endTimeClearHandle}\n              />\n            </>\n          ) : (\n            <>\n              <DateTimeInput\n                {...commonProps}\n                value={state.start}\n                onBlur={changedValue => {\n                  dispatch({\n                    type: 'start',\n                    value: changedValue.state ? undefined : changedValue.valueAsTimestamp\n                  });\n\n                  startTimeRef.current = changedValue;\n                  onChange({\n                    start: changedValue,\n                    end: convertToCallbackParameter(state.end)\n                  });\n                }}\n                label={fromLabel}\n                aria-label={`${t('range_from_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={fromAdditionalInfo}\n                ref={startTimeInputRef}\n                handle={startTimeClearHandle}\n              />\n              <DateTimeInput\n                {...commonProps}\n                value={state.end}\n                onBlur={changedValue => {\n                  dispatch({\n                    type: 'end',\n                    value: changedValue.state ? undefined : changedValue.valueAsTimestamp\n                  });\n\n                  endTimeRef.current = changedValue;\n                  onChange({\n                    start: convertToCallbackParameter(state.start),\n                    end: changedValue\n                  });\n                }}\n                label={toLabel}\n                aria-label={`${t('range_to_datetime') + (label ? ` - ${label}` : '')}`}\n                additionalInfo={toAdditionalInfo}\n                ref={endTimeInputRef}\n                handle={endTimeClearHandle}\n              />\n            </>\n          )}\n        </Flex>\n      </FormField>\n    );\n  }\n);\nexport default TimeRangeInput;\n"]}

package/lib/components/Dialog/FormDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAkB3F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD,eAAO,MAAM,gBAAgB,6KAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAiH1F,CAAC;AAEJ,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAiB3F,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGzC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGjD,eAAO,MAAM,gBAAgB,6KAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,UAAU,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CA6G1F,CAAC;AAEJ,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/FormDialog.js

@@ -16,7 +16,6 @@ const FormDialog = forwardRef(({ target, heading, headingHidden = false, childre
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
     const cancelButtonRef = useRef(null);
-    const progressHandle = useRef(null);
     const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;
     useEscape(() => {
         if (onDismiss) {
@@ -36,10 +35,7 @@ const FormDialog = forwardRef(({ target, heading, headingHidden = false, childre
     });
     useFocusTrap(dialogRef);
     useEffect(() => {
-        if (progress) {
-            progressHandle.current?.focus();
-        }
-        else {
+        if (!progress) {
             const focusables = getFocusables(dialogRef);
             if (focusables[0])
                 focusables[0].focus();
@@ -52,7 +48,7 @@ const FormDialog = forwardRef(({ target, heading, headingHidden = false, childre
             }
         };
     }, []);
-    return (_jsxs(StyledFormDialog, { ...restProps, target: target, labelledbyId: headingId, progress: progress, ref: dialogRef, children: [_jsx(CardHeader, { forwardedAs: 'div', children: headingHidden ? (_jsx(VisuallyHiddenText, { forwardedAs: 'h2', id: headingId, children: heading })) : (_jsx(Text, { id: headingId, variant: 'h2', children: heading })) }), _jsxs(CardContent, { children: [children && _jsx(StyledChildrenWrap, { children: children }), progress && (_jsx(Progress, { placement: children ? 'local' : 'block', message: typeof progress === 'string' ? progress : undefined, handle: progressHandle }))] }), _jsxs(CardFooter, { justify: 'between', forwardedAs: 'div', children: [_jsx(Button, { onClick: () => {
+    return (_jsxs(StyledFormDialog, { ...restProps, target: target, labelledbyId: headingId, progress: progress, ref: dialogRef, children: [_jsx(CardHeader, { forwardedAs: 'div', children: headingHidden ? (_jsx(VisuallyHiddenText, { forwardedAs: 'h2', id: headingId, children: heading })) : (_jsx(Text, { id: headingId, variant: 'h2', children: heading })) }), _jsxs(CardContent, { children: [children && _jsx(StyledChildrenWrap, { children: children }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: children ? 'local' : 'block', message: typeof progress === 'string' ? progress : undefined })] }), _jsxs(CardFooter, { justify: 'between', forwardedAs: 'div', children: [_jsx(Button, { onClick: () => {
                             onCancelHandler();
                         }, disabled: typeof onCancel !== 'function' ? onCancel.disabled : undefined, ref: cancelButtonRef, children: typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => {
                             (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();

package/lib/components/Dialog/FormDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Progress from '../Progress';\nimport { ProgressHandleValue } from '../Progress/Progress.types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { OmitStrict } from '../../types';\n\nimport { StyledChildrenWrap } from './Dialog.styles';\nimport { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog: FC<FormDialogProps & OmitStrict<HTMLAttributes<HTMLDivElement>, 'onSubmit'>> =\n  forwardRef(\n    (\n      {\n        target,\n        heading,\n        headingHidden = false,\n        children,\n        progress,\n        onDismiss,\n        onCancel,\n        onSubmit,\n        ...restProps\n      }: PropsWithoutRef<FormDialogProps>,\n      ref: FormDialogProps['ref']\n    ) => {\n      const t = useI18n();\n      const headingId = useUID();\n      const dialogRef = useConsolidatedRef(ref);\n      const cancelButtonRef = useRef<HTMLButtonElement>(null);\n      const progressHandle = useRef<ProgressHandleValue>(null);\n      const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n      useEscape(() => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useOuterEvent('mousedown', [target, dialogRef], () => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useFocusTrap(dialogRef);\n\n      useEffect(() => {\n        if (progress) {\n          progressHandle.current?.focus();\n        } else {\n          const focusables = getFocusables(dialogRef);\n          if (focusables[0]) focusables[0].focus();\n        }\n      }, [progress]);\n\n      useEffect(() => {\n        return () => {\n          if (document.contains(target)) {\n            target.focus();\n          }\n        };\n      }, []);\n\n      return (\n        <StyledFormDialog\n          {...restProps}\n          target={target}\n          labelledbyId={headingId}\n          progress={progress}\n          ref={dialogRef}\n        >\n          <CardHeader forwardedAs='div'>\n            {headingHidden ? (\n              <VisuallyHiddenText forwardedAs='h2' id={headingId}>\n                {heading}\n              </VisuallyHiddenText>\n            ) : (\n              <Text id={headingId} variant='h2'>\n                {heading}\n              </Text>\n            )}\n          </CardHeader>\n\n          <CardContent>\n            {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n            {progress && (\n              <Progress\n                placement={children ? 'local' : 'block'}\n                message={typeof progress === 'string' ? progress : undefined}\n                handle={progressHandle}\n              />\n            )}\n          </CardContent>\n\n          <CardFooter justify='between' forwardedAs='div'>\n            <Button\n              onClick={() => {\n                onCancelHandler();\n              }}\n              disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n              ref={cancelButtonRef}\n            >\n              {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n            </Button>\n\n            <Button\n              variant='primary'\n              onClick={() => {\n                (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n              }}\n              disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n            >\n              {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n            </Button>\n          </CardFooter>\n        </StyledFormDialog>\n      );\n    }\n  );\n\nexport default FormDialog;\n"]}
+{"version":3,"file":"FormDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/FormDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Progress from '../Progress';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { OmitStrict } from '../../types';\n\nimport { StyledChildrenWrap } from './Dialog.styles';\nimport { FormDialogProps } from './Dialog.types';\nimport Dialog from './Dialog';\n\nexport const StyledFormDialog = styled(Dialog)``;\n\nconst FormDialog: FC<FormDialogProps & OmitStrict<HTMLAttributes<HTMLDivElement>, 'onSubmit'>> =\n  forwardRef(\n    (\n      {\n        target,\n        heading,\n        headingHidden = false,\n        children,\n        progress,\n        onDismiss,\n        onCancel,\n        onSubmit,\n        ...restProps\n      }: PropsWithoutRef<FormDialogProps>,\n      ref: FormDialogProps['ref']\n    ) => {\n      const t = useI18n();\n      const headingId = useUID();\n      const dialogRef = useConsolidatedRef(ref);\n      const cancelButtonRef = useRef<HTMLButtonElement>(null);\n      const onCancelHandler = typeof onCancel === 'function' ? onCancel : onCancel.handler;\n\n      useEscape(() => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useOuterEvent('mousedown', [target, dialogRef], () => {\n        if (onDismiss) {\n          onDismiss();\n        } else {\n          onCancelHandler();\n        }\n      });\n\n      useFocusTrap(dialogRef);\n\n      useEffect(() => {\n        if (!progress) {\n          const focusables = getFocusables(dialogRef);\n          if (focusables[0]) focusables[0].focus();\n        }\n      }, [progress]);\n\n      useEffect(() => {\n        return () => {\n          if (document.contains(target)) {\n            target.focus();\n          }\n        };\n      }, []);\n\n      return (\n        <StyledFormDialog\n          {...restProps}\n          target={target}\n          labelledbyId={headingId}\n          progress={progress}\n          ref={dialogRef}\n        >\n          <CardHeader forwardedAs='div'>\n            {headingHidden ? (\n              <VisuallyHiddenText forwardedAs='h2' id={headingId}>\n                {heading}\n              </VisuallyHiddenText>\n            ) : (\n              <Text id={headingId} variant='h2'>\n                {heading}\n              </Text>\n            )}\n          </CardHeader>\n\n          <CardContent>\n            {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n            <Progress\n              visible={!!progress}\n              focusOnVisible\n              placement={children ? 'local' : 'block'}\n              message={typeof progress === 'string' ? progress : undefined}\n            />\n          </CardContent>\n\n          <CardFooter justify='between' forwardedAs='div'>\n            <Button\n              onClick={() => {\n                onCancelHandler();\n              }}\n              disabled={typeof onCancel !== 'function' ? onCancel.disabled : undefined}\n              ref={cancelButtonRef}\n            >\n              {typeof onCancel !== 'function' && onCancel.text ? onCancel.text : t('cancel')}\n            </Button>\n\n            <Button\n              variant='primary'\n              onClick={() => {\n                (typeof onSubmit !== 'function' ? onSubmit.handler : onSubmit)();\n              }}\n              disabled={typeof onSubmit !== 'function' ? onSubmit.disabled : undefined}\n            >\n              {typeof onSubmit !== 'function' && onSubmit.text ? onSubmit.text : t('submit')}\n            </Button>\n          </CardFooter>\n        </StyledFormDialog>\n      );\n    }\n  );\n\nexport default FormDialog;\n"]}

package/lib/components/Dialog/InfoDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAoB3F,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,gBAAgB,6KAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CA6FpE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InfoDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,EAAE,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAoB3F,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,gBAAgB,6KAAmB,CAAC;AAEjD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAyFpE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/Dialog/InfoDialog.js

@@ -16,7 +16,6 @@ const InfoDialog = forwardRef(({ target, heading, headingHidden = false, childre
     const headingId = useUID();
     const dialogRef = useConsolidatedRef(ref);
     const closeButtonRef = useRef(null);
-    const progressHandle = useRef(null);
     useEscape(() => {
         onDismiss?.();
     });
@@ -25,10 +24,7 @@ const InfoDialog = forwardRef(({ target, heading, headingHidden = false, childre
     });
     useFocusTrap(dialogRef);
     useEffect(() => {
-        if (progress) {
-            progressHandle.current?.focus();
-        }
-        else {
+        if (!progress) {
             closeButtonRef.current?.focus();
         }
     }, [progress]);
@@ -41,7 +37,7 @@ const InfoDialog = forwardRef(({ target, heading, headingHidden = false, childre
     }, []);
     return (_jsxs(StyledInfoDialog, { ...restProps, target: target, labelledbyId: headingId, progress: progress, ref: dialogRef, children: [_jsx(CardHeader, { forwardedAs: 'div', actions: _jsx(Button, { icon: true, variant: 'simple', onClick: () => {
                         onDismiss();
-                    }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }), children: headingHidden ? (_jsx(VisuallyHiddenText, { forwardedAs: 'h2', id: headingId, children: heading })) : (_jsx(Text, { id: headingId, variant: 'h2', children: heading })) }), _jsxs(CardContent, { children: [children && _jsx(StyledChildrenWrap, { children: children }), progress && (_jsx(Progress, { placement: children ? 'local' : 'block', message: typeof progress === 'string' ? progress : undefined, handle: progressHandle }))] })] }));
+                    }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }), children: headingHidden ? (_jsx(VisuallyHiddenText, { forwardedAs: 'h2', id: headingId, children: heading })) : (_jsx(Text, { id: headingId, variant: 'h2', children: heading })) }), _jsxs(CardContent, { children: [children && _jsx(StyledChildrenWrap, { children: children }), _jsx(Progress, { visible: !!progress, focusOnVisible: true, placement: children ? 'local' : 'block', message: typeof progress === 'string' ? progress : undefined })] })] }));
 });
 export default InfoDialog;
 //# sourceMappingURL=InfoDialog.js.map

package/lib/components/Dialog/InfoDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { CardContent, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Progress, { ProgressHandleValue } from '../Progress';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport Dialog from './Dialog';\nimport { StyledChildrenWrap } from './Dialog.styles';\nimport { InfoDialogProps } from './Dialog.types';\n\nexport const StyledInfoDialog = styled(Dialog)``;\n\nconst InfoDialog: FC<InfoDialogProps & HTMLAttributes<HTMLDivElement>> = forwardRef(\n  (\n    {\n      target,\n      heading,\n      headingHidden = false,\n      children,\n      progress,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<InfoDialogProps>,\n    ref: InfoDialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const progressHandle = useRef<ProgressHandleValue>(null);\n\n    useEscape(() => {\n      onDismiss?.();\n    });\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    useFocusTrap(dialogRef);\n\n    useEffect(() => {\n      if (progress) {\n        progressHandle.current?.focus();\n      } else {\n        closeButtonRef.current?.focus();\n      }\n    }, [progress]);\n\n    useEffect(() => {\n      return () => {\n        if (document.contains(target)) {\n          target.focus();\n        }\n      };\n    }, []);\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        target={target}\n        labelledbyId={headingId}\n        progress={progress}\n        ref={dialogRef}\n      >\n        <CardHeader\n          forwardedAs='div'\n          actions={\n            <Button\n              icon\n              variant='simple'\n              onClick={() => {\n                onDismiss();\n              }}\n              label={t('close')}\n              ref={closeButtonRef}\n            >\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText forwardedAs='h2' id={headingId}>\n              {heading}\n            </VisuallyHiddenText>\n          ) : (\n            <Text id={headingId} variant='h2'>\n              {heading}\n            </Text>\n          )}\n        </CardHeader>\n\n        <CardContent>\n          {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n          {progress && (\n            <Progress\n              placement={children ? 'local' : 'block'}\n              message={typeof progress === 'string' ? progress : undefined}\n              handle={progressHandle}\n            />\n          )}\n        </CardContent>\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}
+{"version":3,"file":"InfoDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/InfoDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, useRef, FC, useEffect, HTMLAttributes } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  useUID\n} from '../../hooks';\nimport Button from '../Button';\nimport Text from '../Text';\nimport { CardContent, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Progress from '../Progress';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport Dialog from './Dialog';\nimport { StyledChildrenWrap } from './Dialog.styles';\nimport { InfoDialogProps } from './Dialog.types';\n\nexport const StyledInfoDialog = styled(Dialog)``;\n\nconst InfoDialog: FC<InfoDialogProps & HTMLAttributes<HTMLDivElement>> = forwardRef(\n  (\n    {\n      target,\n      heading,\n      headingHidden = false,\n      children,\n      progress,\n      onDismiss,\n      ...restProps\n    }: PropsWithoutRef<InfoDialogProps>,\n    ref: InfoDialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const dialogRef = useConsolidatedRef(ref);\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    useEscape(() => {\n      onDismiss?.();\n    });\n\n    useOuterEvent('mousedown', [target, dialogRef], () => {\n      onDismiss?.();\n    });\n\n    useFocusTrap(dialogRef);\n\n    useEffect(() => {\n      if (!progress) {\n        closeButtonRef.current?.focus();\n      }\n    }, [progress]);\n\n    useEffect(() => {\n      return () => {\n        if (document.contains(target)) {\n          target.focus();\n        }\n      };\n    }, []);\n\n    return (\n      <StyledInfoDialog\n        {...restProps}\n        target={target}\n        labelledbyId={headingId}\n        progress={progress}\n        ref={dialogRef}\n      >\n        <CardHeader\n          forwardedAs='div'\n          actions={\n            <Button\n              icon\n              variant='simple'\n              onClick={() => {\n                onDismiss();\n              }}\n              label={t('close')}\n              ref={closeButtonRef}\n            >\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText forwardedAs='h2' id={headingId}>\n              {heading}\n            </VisuallyHiddenText>\n          ) : (\n            <Text id={headingId} variant='h2'>\n              {heading}\n            </Text>\n          )}\n        </CardHeader>\n\n        <CardContent>\n          {children && <StyledChildrenWrap>{children}</StyledChildrenWrap>}\n          <Progress\n            visible={!!progress}\n            focusOnVisible\n            placement={children ? 'local' : 'block'}\n            message={typeof progress === 'string' ? progress : undefined}\n          />\n        </CardContent>\n      </StyledInfoDialog>\n    );\n  }\n);\n\nexport default InfoDialog;\n"]}

package/lib/components/FormControl/FormControl.d.ts

@@ -42,6 +42,10 @@ export interface FormControlProps extends BaseProps {
     /** Callback fired when AI suggestion is accepted/rejected */
     onResolveSuggestion?: (accepted: boolean) => void;
 }
+export interface HandleValue {
+    /** Used to clear component inputs with imperative handle */
+    clear: () => void;
+}
 export declare const StyledFormControl: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../types").OmitStrict<FormControlProps, never> & Required<Pick<FormControlProps, never>> & {
     hasSuggestion?: boolean | undefined;
 }, never>;

package/lib/components/FormControl/FormControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,eAAO,MAAM,iBAAiB;;SA6G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAqB,MAAM,aAAa,CAAC;AAGzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACrD,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6GAA6G;IAC7G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE;QACf,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACxC,OAAO,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;KAC1C,CAAC;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAID,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB;;SA6G7B,CAAC;AAIF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAInE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AA+CjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;;6BAGJ,KAAK;oCACE,MAAM,CAAC,IAAI;;;;;;;;4BAQnB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /**  Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition-property: color, background-color, border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}
+{"version":3,"file":"FormControl.js","sourceRoot":"","sources":["../../../src/components/FormControl/FormControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAoDjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGzC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAC5B,OAAO,EACR,EACD,UAAU,EAAE,EACV,YAAY,EAAE,SAAS,EACvB,cAAc,EAAE,EACd,kBAAkB,EAAE,UAAU,EAC9B,kBAAkB,EAAE,UAAU,EAC9B,cAAc,EAAE,GAAG,EACnB,eAAe,EAAE,MAAM,EACvB,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC9C,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACpE,WAAW,EAAE,EACX,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACD,YAAY,EAAE,EACZ,cAAc,EAAE,mBAAmB,EACnC,kBAAkB,EAAE,uBAAuB,EAC5C,EACF,EACF,EACF,EACD,MAAM,EACN,aAAa,EACd,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC1F,MAAM,eAAe,GACnB,aAAa,IAAI,MAAM;QACrB,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC,CAAC,UAAU,CAAC;IAEjB,OAAO,GAAG,CAAA;eACC,UAAU;0BACC,eAAe;4BACb,UAAU,MAAM,MAAM;sBAC5B,WAAW;sBACX,WAAW;;;6BAGJ,KAAK;oCACE,MAAM,CAAC,IAAI;;;;;;;;4BAQnB,uBAAuB;wBAC3B,mBAAmB;;;;;wBAKnB,gBAAgB;sBAClB,MAAM;UAClB,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;SAC/B;;;;UAIC,CAAC,MAAM;QACT,GAAG,CAAA;0BACe,gBAAgB;SACjC;UACC,aAAa;QACf,GAAG,CAAA;8BACmB,UAAU;uCACD,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC;SACpD;;;QAGD,aAAa;QACf,GAAG,CAAA;;OAEF;;;4BAGqB,uBAAuB;wBAC3B,mBAAmB;;;;;yBAKlB,QAAQ,CAAC,CAAC;;KAE9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAAwB,EAAE,EAAE;IACrE,OAAO,KAAC,iBAAiB,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC;AACpD,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix, rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { AdditionalInfoProps } from '../AdditionalInfo';\n\nexport interface FormControlProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: string;\n  /** Set visual state based on a validation state. */\n  status?: 'success' | 'warning' | 'error' | 'pending';\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: ReactNode;\n  /** Visually hides the label region. */\n  labelHidden?: boolean;\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: ReactNode;\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: boolean;\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /**  Button when clicked will show additional information on a field */\n  additionalInfo?: {\n    heading: AdditionalInfoProps['heading'];\n    content: AdditionalInfoProps['children'];\n  };\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: string;\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: boolean;\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: string;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: (accepted: boolean) => void;\n}\n\ntype FormControlPropsWithDefaults = PropsWithDefaults<FormControlProps>;\n\nexport interface HandleValue {\n  /** Used to clear component inputs with imperative handle */\n  clear: () => void;\n}\n\nexport const StyledFormControl = styled.div<\n  FormControlPropsWithDefaults & { hasSuggestion?: boolean }\n>(\n  ({\n    theme: {\n      base: {\n        'border-radius': baseRadius,\n        'font-size': baseFontSize,\n        'font-scale': baseFontScale,\n        animation: { speed, timing },\n        palette\n      },\n      components: {\n        'form-field': formField,\n        'form-control': {\n          'foreground-color': foreground,\n          'background-color': background,\n          'border-color': brd,\n          'border-radius': radius,\n          'border-width': borderWidth,\n          ':hover': { 'border-color': hoverBorderColor },\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow },\n          ':disabled': {\n            'border-color': disabledBorderColor,\n            'background-color': disabledBackgroundColor\n          },\n          ':read-only': {\n            'border-color': readOnlyBorderColor,\n            'background-color': readOnlyBackgroundColor\n          }\n        }\n      }\n    },\n    status,\n    hasSuggestion\n  }) => {\n    const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n    const borderColor = status && formField[status] ? formField[status]['status-color'] : brd;\n    const backgroundColor =\n      hasSuggestion && status\n        ? mix(0.1, formField[status]['status-color'], palette['primary-background'])\n        : background;\n\n    return css`\n      color: ${foreground};\n      background-color: ${backgroundColor};\n      border-radius: calc(${baseRadius} * ${radius});\n      border-color: ${borderColor};\n      border-width: ${borderWidth};\n      border-style: solid;\n      transition-property: color, background-color, border-color;\n      transition-duration: ${speed};\n      transition-timing-function: ${timing.ease};\n      &,\n      & > select {\n        outline: none;\n      }\n\n      &:disabled,\n      &[disabled] {\n        background-color: ${disabledBackgroundColor};\n        border-color: ${disabledBorderColor};\n        cursor: not-allowed;\n      }\n\n      &:focus:not([disabled]) {\n        border-color: ${focusBorderColor};\n        box-shadow: ${shadow};\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:focus-within:not([disabled]) {\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n        `}\n      }\n\n      &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n        ${!status &&\n        css`\n          border-color: ${hoverBorderColor};\n        `}\n        ${hasSuggestion &&\n        css`\n          background-color: ${background};\n          box-shadow: 0 0 0 0.125rem ${rgba(borderColor, 0.2)};\n        `}\n      }\n\n      ${hasSuggestion &&\n      css`\n        border-end-end-radius: 0;\n      `}\n\n      &[readonly] {\n        background-color: ${readOnlyBackgroundColor};\n        border-color: ${readOnlyBorderColor};\n      }\n\n      @media (pointer: coarse) {\n        /* stylelint-disable-next-line unit-allowed-list */\n        font-size: max(${fontSize.s}, 16px);\n      }\n    `;\n  }\n);\n\nStyledFormControl.defaultProps = defaultThemeProp;\n\nconst FormControl: FunctionComponent<FormControlProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<FormControlProps>, ref: Ref<HTMLDivElement>) => {\n    return <StyledFormControl ref={ref} {...props} />;\n  }\n);\n\nexport default FormControl;\n"]}

package/lib/components/FormControl/index.d.ts

@@ -1,4 +1,5 @@
 export { default } from './FormControl';
 export { FormControlProps } from './FormControl';
 export { StyledFormControl } from './FormControl';
+export { HandleValue } from './FormControl';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/FormControl/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/FormControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './FormControl';\nexport { FormControlProps } from './FormControl';\nexport { StyledFormControl } from './FormControl';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { default } from './FormControl';\nexport { FormControlProps } from './FormControl';\nexport { StyledFormControl } from './FormControl';\nexport { HandleValue } from './FormControl';\n"]}

package/lib/components/ListToolbar/ListToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAKf,OAAO,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBnD,OAAO,EACL,gBAAgB,EAIjB,MAAM,qBAAqB,CAAC;AA2F7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAqRnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ListToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ListToolbar/ListToolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAQlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAU,YAAY,EAAE,MAAM,aAAa,CAAC;AA8BnD,OAAO,EACL,gBAAgB,EAIjB,MAAM,qBAAqB,CAAC;AAwB7B,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA2TnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ListToolbar/ListToolbar.js

@@ -1,9 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Actions from '../Actions';
-import Text from '../Text';
 import Button from '../Button';
-import { useBreakpoint, useConsolidatedRef, useI18n } from '../../hooks';
+import { useArrows, useBreakpoint, useConsolidatedRef, useEscape, useFocusTrap, useFocusWithin, useI18n } from '../../hooks';
 import Flex from '../Flex';
 import SearchInput from '../SearchInput';
 import Icon, { registerIcon } from '../Icon';
@@ -13,55 +12,63 @@ import * as rowIcon from '../Icon/icons/row.icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
 import * as moreIcon from '../Icon/icons/more.icon';
 import { hasProp } from '../../utils';
-import MenuButton from '../MenuButton';
-import { Count } from '../Badges';
+import FormDialog from '../Dialog/FormDialog';
 import PresetMenuPopover from './PresetMenuPopover';
-import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText } from './ListToolbar.styles';
-import QueryOptionPopover from './QueryOptionPopover';
+import { StyledViewSelector, StyledSearchForm, StyledListToolbar, StyledHeadingText, StyledCountMeta, StyledContainer } from './ListToolbar.styles';
 registerIcon(filterIcon, arrowUpDownIcon, rowIcon, plusIcon, moreIcon);
 const CountMeta = ({ count }) => {
     const t = useI18n();
-    return (_jsxs(Text, { variant: 'secondary', children: [count.total !== undefined &&
+    return (_jsxs(StyledCountMeta, { variant: 'secondary', children: [count.total !== undefined &&
+                count.selected === undefined &&
                 t('results_count', [count.totalHasMore ? `${count.total}+` : count.total], {
                     count: count.total
-                }), count.total !== undefined && count.selected !== undefined && ' ', count.selected !== undefined &&
-                `(${t('selected_count', [count.selected], { count: count.selected })})`] }));
+                }), count.total !== undefined &&
+                count.selected !== undefined &&
+                t('selected_count', [count.selected, count.totalHasMore ? `${count.total}+` : count.total], { count: count.selected })] }));
 };
-const QueryOptionButton = ({ id, queryOptionProps, iconOnly, onClick }) => {
-    const t = useI18n();
-    let i18nKey;
-    let icon;
-    if (id === 'filter') {
-        i18nKey = 'filter';
-        icon = 'filter';
-    }
-    else if (id === 'sort') {
-        i18nKey = 'sort';
-        icon = 'arrow-up-down';
-    }
-    else {
-        i18nKey = 'group';
-        icon = 'row';
-    }
-    const text = t(i18nKey);
-    const variant = iconOnly ? 'simple' : 'text';
-    if (hasProp(queryOptionProps, 'renderer')) {
-        return (_jsx("div", { children: _jsx(Button, { variant: variant, icon: iconOnly, label: iconOnly ? text : undefined, onClick: onClick, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: 'span', children: [_jsx(Icon, { name: icon }), !iconOnly && text, !iconOnly && queryOptionProps.count && _jsx(Count, { children: queryOptionProps.count })] }) }) }));
-    }
-    if (hasProp(queryOptionProps, 'items')) {
-        return (_jsx("div", { children: _jsx(MenuButton, { variant: variant, text: text, icon: icon, iconOnly: iconOnly, count: queryOptionProps.count, onClick: onClick, menu: {
-                    mode: queryOptionProps.mode,
-                    items: queryOptionProps.items.map(item => ({ ...item, primary: item.text })),
-                    onItemClick: queryOptionProps.onItemClick
-                } }) }));
-    }
-    return null;
-};
-const ListToolbar = forwardRef(({ heading, formControlProps, createNew, search, count, additionalActions, filter, sort, group, actions, actionsButtonRef, condensed }, ref) => {
+const ListToolbar = forwardRef(({ name, viewSelector, formControlProps, createNew, search, count, additionalActions, filter, sort, group, actions, actionsButtonRef }, ref) => {
     const t = useI18n();
     const isSmallOrAbove = useBreakpoint('sm');
-    const isMediumOrAbove = useBreakpoint('md');
     const consolidatedActionsButtonRef = useConsolidatedRef(actionsButtonRef);
+    const toolbarRef = useConsolidatedRef(ref);
+    const searchInputRef = useRef(null);
+    const searchWrapperRef = useRef(null);
+    const searchButtonRef = useRef(null);
+    const [isSearchOpen, setIsSearchOpen] = useState(!!search?.value);
+    const onSearchEscape = useCallback(() => {
+        if (!search?.value) {
+            setIsSearchOpen(false);
+        }
+        setTimeout(() => searchButtonRef.current?.focus());
+    }, [search?.value]);
+    useEffect(() => {
+        if (search?.value) {
+            setIsSearchOpen(true);
+        }
+    }, [search?.value]);
+    const hasFocus = useFocusWithin([searchWrapperRef]);
+    useArrows(hasFocus ? { current: null } : toolbarRef, {
+        dir: 'left-right',
+        selector: "button:enabled:first-child, :not(input) + button:enabled, div[role='button']"
+    });
+    useEffect(() => {
+        if (searchWrapperRef.current) {
+            const focusables = searchWrapperRef.current.querySelectorAll("button:enabled, input[type='search']:enabled");
+            if (!hasFocus) {
+                focusables.forEach(item => {
+                    item.tabIndex = -1;
+                });
+                if (isSearchOpen && !search?.value) {
+                    setIsSearchOpen(false);
+                }
+            }
+            else {
+                focusables.forEach(item => {
+                    item.tabIndex = 0;
+                });
+            }
+        }
+    }, [hasFocus]);
     const [currentQueryOptionId, setCurrentQueryOptionId] = useState(null);
     const queryOptionPopoverTarget = useRef();
     const [actionsQueryOptionPreset, setActionsQueryOptionPreset] = useState();
@@ -70,25 +77,30 @@ const ListToolbar = forwardRef(({ heading, formControlProps, createNew, search,
         if (!createNew?.onClick)
             return null;
         const text = createNew.label ?? t('create_new');
-        return (_jsx(Button, { variant: isSmallOrAbove ? 'secondary' : 'simple', icon: !isSmallOrAbove, label: isSmallOrAbove ? undefined : text, "aria-label": text, onClick: createNew.onClick, children: isSmallOrAbove ? text : _jsx(Icon, { name: 'plus' }) }));
+        return (_jsx(Button, { variant: 'simple', icon: true, label: text, "aria-label": text, onClick: createNew.onClick, children: _jsx(Icon, { name: 'plus' }) }));
     }, [t, createNew, isSmallOrAbove]);
-    const filterButton = filter && (_jsx(QueryOptionButton, { id: 'filter', queryOptionProps: filter, iconOnly: !isMediumOrAbove, onClick: e => {
-            setCurrentQueryOptionId('filter');
-            queryOptionPopoverTarget.current = e.currentTarget;
-        } }));
-    const sortButton = sort && (_jsx(QueryOptionButton, { id: 'sort', queryOptionProps: sort, iconOnly: !isMediumOrAbove, onClick: e => {
-            setCurrentQueryOptionId('sort');
-            queryOptionPopoverTarget.current = e.currentTarget;
-        } }));
-    const groupButton = group && (_jsx(QueryOptionButton, { id: 'group', queryOptionProps: group, iconOnly: !isMediumOrAbove, onClick: e => {
-            setCurrentQueryOptionId('group');
-            queryOptionPopoverTarget.current = e.currentTarget;
-        } }));
+    useFocusTrap(searchButtonRef);
+    useEscape(onSearchEscape, searchButtonRef);
+    const searchInputWrapper = useMemo(() => (_jsx("div", { role: 'dialog', ref: searchWrapperRef, children: _jsx(SearchInput, { ...search, ref: searchInputRef, tabIndex: '-1' }) })), [search]);
+    const searchLabel = t('search');
+    const searchButton = useMemo(() => {
+        return (_jsx(Button, { as: 'div', role: 'button', variant: 'simple', icon: true, label: searchLabel, "aria-label": searchLabel, onClick: () => {
+                setIsSearchOpen(true);
+                setTimeout(() => searchInputRef.current?.focus());
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    setIsSearchOpen(true);
+                    setTimeout(() => searchInputRef.current?.focus());
+                }
+            }, tabIndex: '-1', ref: searchButtonRef, children: isSearchOpen ? searchInputWrapper : _jsx(Icon, { name: 'search' }) }));
+    }, [searchLabel, setIsSearchOpen, isSearchOpen, searchInputWrapper]);
     let queryOptionPopover = null;
     if (currentQueryOptionId) {
         const queryOptionProps = { filter, sort, group }[currentQueryOptionId];
-        if (queryOptionProps && hasProp(queryOptionProps, 'renderer')) {
-            queryOptionPopover = (_jsx(QueryOptionPopover, { target: queryOptionPopoverTarget.current, heading: t(`${currentQueryOptionId}_by`), onCancel: () => {
+        if (queryOptionProps &&
+            hasProp(queryOptionProps, 'renderer') &&
+            queryOptionPopoverTarget.current) {
+            queryOptionPopover = (_jsx(FormDialog, { target: queryOptionPopoverTarget.current, heading: t(`${currentQueryOptionId}_by`), onCancel: () => {
                     if (queryOptionProps.onCancel() === false)
                         return;
                     setCurrentQueryOptionId(null);
@@ -143,23 +155,29 @@ const ListToolbar = forwardRef(({ heading, formControlProps, createNew, search,
         }
         return basicActions.length ? basicActions : undefined;
     }, [actions, filter, sort, group, getQueryOptionAction]);
-    return (_jsxs(Flex, { as: StyledListToolbar, container: { direction: 'column', gap: 2 }, item: { grow: 1 }, ref: ref, role: 'toolbar', children: [(heading ||
+    return (_jsxs(Flex, { as: StyledListToolbar, container: { direction: 'column', gap: 0.5 }, item: { grow: 1 }, ref: toolbarRef, role: 'toolbar', children: [(name ||
+                viewSelector ||
                 createNewButton ||
-                (condensed && (count || additionalActions || search || basicModeActions))) && (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 2, wrap: 'wrap' }, children: [heading &&
-                                (typeof heading === 'string' ? (_jsx(StyledHeadingText, { variant: 'h3', required: formControlProps?.required, children: heading })) : (_jsx(StyledViewSelector, { variant: 'text', text: heading.views.find(view => view.selected)?.text ?? heading.views[0].text, menu: {
+                count ||
+                additionalActions ||
+                search ||
+                basicModeActions) && (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(StyledContainer, { container: { alignItems: 'center', gap: 0.5, wrap: 'wrap' }, children: [viewSelector &&
+                                viewSelector.views.length > 0 &&
+                                (viewSelector.views.length === 1 ? (_jsx(StyledHeadingText, { variant: 'h3', required: formControlProps?.required, children: `${name}: ${viewSelector.views[0].text}` })) : (_jsx(StyledViewSelector, { variant: 'text', text: `${name}: ${viewSelector.views.find(view => view.selected)?.text ??
+                                        viewSelector.views[0].text}`, menu: {
                                         mode: 'single-select',
-                                        items: heading.views.map(view => ({
+                                        items: viewSelector.views.map(view => ({
                                             ...view,
-                                            primary: `${view.text}${view.id === heading.defaultId ? ` (${t('default')})` : ''}${view.id === heading.appDefaultId ? ` (${t('app_default')})` : ''}`
+                                            primary: `${view.text}${view.id === viewSelector.defaultId ? ` (${t('default')})` : ''}${view.id === viewSelector.appDefaultId ? ` (${t('app_default')})` : ''}`
                                         })),
-                                        onItemClick: heading.onViewSelect
-                                    }, required: formControlProps?.required }))), isSmallOrAbove && condensed && (_jsxs(_Fragment, { children: [count && _jsx(CountMeta, { count: count }), additionalActions] }))] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 2 }, children: [search && condensed && isSmallOrAbove && _jsx(SearchInput, { ...search }), createNewButton, condensed && basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
+                                        onItemClick: viewSelector.onViewSelect
+                                    }, required: formControlProps?.required }))), (!viewSelector || viewSelector.views.length === 0) && (_jsx(StyledHeadingText, { variant: 'h3', required: formControlProps?.required, children: name })), isSmallOrAbove && count && _jsx(CountMeta, { count: count })] }), _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, item: { shrink: 0 }, children: [isSmallOrAbove && additionalActions, search && isSmallOrAbove && searchButton, isSmallOrAbove && createNewButton, isSmallOrAbove && basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
                                         visual: icon ? _jsx(Icon, { name: icon }) : undefined,
                                         ...restProps
-                                    })), menuAt: 1, ref: consolidatedActionsButtonRef }) }))] })] })), (!condensed || !isSmallOrAbove) && (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 2 }, children: [_jsxs(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, item: { grow: 1 }, children: [search && _jsx(SearchInput, { ...search }), isSmallOrAbove && !condensed && (_jsxs(_Fragment, { children: [count && _jsx(CountMeta, { count: count }), additionalActions] }))] }), !condensed && (filterButton || sortButton || groupButton || actions) && (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, md: { container: { gap: 2 } }, children: [_jsxs(_Fragment, { children: [filterButton, sortButton, groupButton] }), actions && (_jsx(Actions, { items: actions.map(({ icon, ...restProps }) => ({
+                                    })), menuAt: 1, ref: consolidatedActionsButtonRef }) })), !isSmallOrAbove && count && _jsx(CountMeta, { count: count })] })] })), !isSmallOrAbove && (_jsx(_Fragment, { children: _jsxs(Flex, { container: { alignItems: 'start', justify: 'between', gap: 1 }, children: [additionalActions, _jsx(Flex, { as: StyledSearchForm, container: { alignItems: 'center', wrap: 'wrap', gap: 1 }, item: { grow: 1 }, children: search && searchInputWrapper }), createNewButton, basicModeActions && (_jsx("span", { children: _jsx(Actions, { items: basicModeActions.map(({ icon, ...restProps }) => ({
                                     visual: icon ? _jsx(Icon, { name: icon }) : undefined,
                                     ...restProps
-                                })), menuAt: 1, ref: consolidatedActionsButtonRef }))] }))] })), !isSmallOrAbove && (count || additionalActions) && (_jsxs(Flex, { container: { alignItems: 'center', wrap: 'wrap', gap: 2 }, children: [count && _jsx(CountMeta, { count: count }), additionalActions] })), queryOptionPopover, condensed && (_jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) }))] }));
+                                })), menuAt: 1, ref: consolidatedActionsButtonRef }) }))] }) })), queryOptionPopover, _jsx(PresetMenuPopover, { buttonRef: consolidatedActionsButtonRef, heading: actionsQueryOptionPreset?.heading, menu: actionsQueryOptionPreset?.menu, isOpen: optionPresetMenuOpen, onClose: () => setOptionPresetMenuOpen(false) })] }));
 });
 export default ListToolbar;
 //# sourceMappingURL=ListToolbar.js.map