@pega/cosmos-react-core 7.0.0-build.3.4 → 7.0.0-build.30.1

package/lib/components/RadioCheck/RadioCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type {\n  FC,\n  Ref,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\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?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Pass a heading and content to show additional information on the field. */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** info like error, success, warning messages */\n  info?: FormControlProps['info'];\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          size,\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n    margin: 0;\n\n    /* Sets rect size for JAWS focus outline */\n    width: ${size};\n    height: ${size};\n\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${base.spacing} / 4);\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: flex;\n        align-items: center;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n        margin: 0;\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${spacing} / 4);\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n  props: PropsWithoutRef<RadioCheckProps>,\n  ref: RadioCheckProps['ref']\n) {\n  const uid = useUID();\n  const t = useI18n();\n\n  const {\n    type,\n    id = uid,\n    label,\n    required = false,\n    disabled = false,\n    indeterminate = false,\n    readOnly = false,\n    variant = 'simple',\n    onClick,\n    onKeyDown,\n    status,\n    info,\n    additionalInfo,\n    ...restProps\n  } = props;\n\n  const isRadio = type === 'radio';\n  const card = variant === 'card';\n  const newRef = useConsolidatedRef(ref);\n\n  useEffect(() => {\n    if (!isRadio && newRef.current) {\n      newRef.current.indeterminate = !!indeterminate;\n    }\n  }, [newRef, indeterminate, isRadio]);\n\n  return (\n    <FormField\n      as={card ? StyledRadioCheckCard : StyledRadioCheck}\n      label={\n        <>\n          <StyledPseudoRadioCheck\n            status={status}\n            isRadio={isRadio}\n            as={StyledFormControl}\n            required={required}\n            disabled={disabled}\n            readOnly={readOnly}\n            onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n              e.preventDefault();\n            }}\n          />\n          <>\n            {label}\n            {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n          </>\n        </>\n      }\n      labelAs={card ? 'div' : undefined}\n      id={id}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={status}\n      info={info}\n      isRadioCheck\n      inline\n      labelAfter\n      additionalInfo={additionalInfo}\n    >\n      <StyledRadioCheckInput\n        {...restProps}\n        id={id}\n        type={type}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        onClick={(e: MouseEvent<HTMLInputElement>) => {\n          if (readOnly) e.preventDefault();\n\n          onClick?.(e);\n        }}\n        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n          if (type === 'checkbox' && readOnly && e.key === ' ') {\n            e.preventDefault();\n          }\n          if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n            e.preventDefault();\n          }\n\n          onKeyDown?.(e);\n        }}\n        ref={newRef}\n      />\n    </FormField>\n  );\n});\n\nexport default RadioCheck;\n"]}
+{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport type { NoChildrenProp, WithAttributes, RefElement } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport type RadioCheckProps = WithAttributes<\n  'input',\n  NoChildrenProp & {\n    /** Pass a string or a fragment with an Icon and string. */\n    label?: FormControlProps['label'];\n    /** Set visual state based on a validation state. */\n    status?: FormControlProps['status'];\n    /** Sets the type of input. */\n    type: 'radio' | 'checkbox';\n    /**\n     * Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n     * @default false\n     */\n    indeterminate?: boolean;\n    /**\n     * Controls the styling of the RadioCheck.\n     * @default 'simple'\n     */\n    variant?: 'simple' | 'card';\n    /** Pass a heading and content to show additional information on the field. */\n    additionalInfo?: FormControlProps['additionalInfo'];\n    /** info like error, success, warning messages */\n    info?: FormControlProps['info'];\n  }\n>;\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    disabled,\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          size,\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n    margin: 0;\n\n    /* Sets rect size for JAWS focus outline */\n    width: ${size};\n    height: ${size};\n\n    ${!disabled &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${base.spacing} / 4);\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: flex;\n        align-items: center;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n        margin: 0;\n      }\n\n      > ${StyledFormFieldInfo} {\n        margin: 0;\n        padding-inline-start: calc(${spacing} / 4);\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nexport default forwardRef<RefElement<RadioCheckProps>, PropsWithoutRef<RadioCheckProps>>(\n  function RadioCheck(props, ref) {\n    const uid = useUID();\n    const t = useI18n();\n\n    const {\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      indeterminate = false,\n      readOnly = false,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      status,\n      info,\n      additionalInfo,\n      ...restProps\n    } = props;\n\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) {\n        newRef.current.indeterminate = !!indeterminate;\n      }\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n              onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n                e.preventDefault();\n              }}\n            />\n            <>\n              {label}\n              {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n            </>\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        info={info}\n        isRadioCheck\n        inline\n        labelAfter\n        additionalInfo={additionalInfo}\n      >\n        <StyledRadioCheckInput\n          {...restProps}\n          id={id}\n          type={type}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') {\n              e.preventDefault();\n            }\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n              e.preventDefault();\n            }\n\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n"]}

package/lib/components/SearchInput/SearchInput.d.ts

@@ -5,7 +5,24 @@ import type { MenuItemProps } from '../Menu';
 import type { LinkProps } from '../Link';
 export type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;
 export type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;
-export interface SearchInputProps extends NoChildrenProp {
+export type SearchFilter = {
+    /** A list of user selectable scopes to filter search with. */
+    filters: string[];
+    /** The default filter for uncontrolled use. */
+    defaultFilter?: string;
+    currentFilter?: never;
+} | {
+    /** A list of user selectable scopes to filter search with. */
+    filters: string[];
+    defaultFilter?: never;
+    /** The current filter for controlled use. */
+    currentFilter?: string;
+} | {
+    filters?: never;
+    defaultFilter?: never;
+    currentFilter?: never;
+};
+export type SearchInputProps = NoChildrenProp & {
     /**
      * Placeholder text. The default value is a locale translation of 'Search…'
      * @default 'Search…'
@@ -23,10 +40,6 @@ export interface SearchInputProps extends NoChildrenProp {
      * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.
      */
     onSearchSubmit?: (value: string) => void;
-    /** A list of user selectable scopes to filter search with. */
-    filters?: string[];
-    /** The selected scope filter on initial render. */
-    defaultFilter?: string;
     /** Called when user changes scope filter. */
     onFilterChange?: (value: string) => void;
     /** A list of matching results presented in the input's dropdown menu. */
@@ -44,7 +57,7 @@ export interface SearchInputProps extends NoChildrenProp {
      * @default true
      */
     resultsPopover?: boolean;
-}
+} & SearchFilter;
 declare const SearchInput: FunctionComponent<SearchInputProps & ForwardProps>;
 export default SearchInput;
 //# sourceMappingURL=SearchInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAcvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkBzC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwSnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAcvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkBzC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,MAAM,YAAY,GACpB;IACE,8DAA8D;IAC9D,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACE,8DAA8D;IAC9D,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEN,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG;IAC9C;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,YAAY,CAAC;AAEjB,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA6SnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SearchInput/SearchInput.js

@@ -15,7 +15,7 @@ import { StyledCancelButton, StyledResultsPopover, StyledSearchButton, StyledSea
 registerIcon(searchIcon);
 const SearchInput = forwardRef(function SearchInput(props, ref) {
     const t = useI18n();
-    const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading: loadingProp, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, resultsPopover = true, ...restProps } = props;
+    const { value = '', defaultFilter, currentFilter, filters, onFilterChange, searchResults, recentSearches, loading: loadingProp, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, resultsPopover = true, ...restProps } = props;
     const instructionTextId = useUID();
     const { announcePolite } = useLiveLog();
     const bodyRef = useRef(document.body);
@@ -116,6 +116,10 @@ const SearchInput = forwardRef(function SearchInput(props, ref) {
             setSearchMenuOpen(true);
         }
     }, [focus]);
+    useEffect(() => {
+        if (currentFilter)
+            setSelectedFilter(currentFilter);
+    }, [currentFilter]);
     return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, children: [hasFilters ? (_jsx(StyledMenuButton, { text: selectedFilter, variant: 'text', icon: 'search', "aria-label": selectedFilter === 'All'
                             ? t('select_search_filter')
                             : t('selected_search_filter', [selectedFilter]), menu: {

package/lib/components/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';\nimport type {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ChangeEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  MutableRefObject\n} from 'react';\n\nimport type { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport type { FormControlProps } from '../FormControl';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useI18n,\n  useOuterEvent,\n  useLiveLog,\n  useUID,\n  useFocusWithin\n} from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport Link from '../Link';\nimport type { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher, getFocusables } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport {\n  StyledCancelButton,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchInput,\n  StyledSearchMenu,\n  StyledSearchResultsContainer,\n  StyledSearchTextInput,\n  StyledMenuButton\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport interface SearchInputProps extends NoChildrenProp {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default 'Search…'\n   */\n  placeholder?: FormControlProps['placeholder'];\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?: FormControlProps['value'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** A list of user selectable scopes to filter search with. */\n  filters?: string[];\n  /** The selected scope filter on initial render. */\n  defaultFilter?: string;\n  /** Called when user changes scope filter. */\n  onFilterChange?: (value: string) => void;\n  /** A list of matching results presented in the input's dropdown menu. */\n  searchResults?: SearchResult[];\n  /** A list of recent searches presented in the input's dropdown menu. */\n  recentSearches?: RecentSearch[];\n  /** Places the menu into an indeterminate loading state. */\n  loading?: boolean;\n  /** Prop passed to the advanced search page link. */\n  advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n  /**\n   * Boolean for determining for whether the search results will render in a popover.\n   * @default true\n   */\n  resultsPopover?: boolean;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  function SearchInput(props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) {\n    const t = useI18n();\n\n    const {\n      value = '',\n      defaultFilter,\n      filters,\n      onFilterChange,\n      searchResults,\n      recentSearches,\n      loading: loadingProp,\n      advancedSearchLink,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      resultsPopover = true,\n      ...restProps\n    } = props;\n    const instructionTextId = useUID();\n    const { announcePolite } = useLiveLog();\n    const bodyRef = useRef<Element>(document.body);\n    const inputRef = useConsolidatedRef(ref);\n    const filtersRef = useRef<HTMLDivElement>(null);\n    const searchResultsRef = useRef<HTMLDivElement>(null);\n\n    const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n    const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n      undefined\n    );\n    const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? t('all'));\n    const [downPressed, setDownPressed] = useState(false);\n\n    const completeFilters = [t('all'), ...(filters ?? [])];\n    const hasFilters = completeFilters.length > 1;\n    const hasSearchResults = !!(searchResults && searchResults.length);\n    const hasRecentSearches = !!(recentSearches && recentSearches.length);\n    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loadingProp);\n    const useRecents = hasRecentSearches && !value;\n    const loading = useRecents ? false : !!loadingProp;\n    const searchMenuVisible =\n      (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);\n\n    const handleEscape = useCallback(\n      (e: KeyboardEvent) => {\n        if (searchMenuOpen) {\n          e.preventDefault();\n          e.stopPropagation();\n          setSearchMenuOpen(false);\n          setDownPressed(false);\n        }\n      },\n      [searchMenuOpen]\n    );\n\n    useEscape(handleEscape, inputRef, [handleEscape]);\n\n    const onKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case 'Enter':\n            if (!downPressed) {\n              onSearchSubmit?.(value);\n            }\n            break;\n          case 'ArrowDown':\n            setDownPressed(true);\n            setSearchMenuOpen(true);\n            break;\n          case 'Tab': {\n            const forward = !e.shiftKey;\n\n            if (forward) {\n              const popoverFocusables = getFocusables(searchResultsRef);\n\n              if (popoverFocusables.length) {\n                e.preventDefault();\n                popoverFocusables[0].focus();\n              }\n            }\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onSearchSubmit, downPressed, value]\n    );\n\n    useOuterEvent('click', [searchResultsRef, inputRef, filtersRef], () => {\n      setSearchMenuOpen(false);\n    });\n\n    useEffect(() => {\n      setDownPressed(false);\n    }, [value]);\n\n    useEffect(() => {\n      let items: MenuItemProps[] | undefined = [];\n      if (hasSearchResults && value) {\n        items = searchResults;\n      } else if (useRecents) {\n        items = recentSearches;\n      } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n        items = undefined;\n      }\n      setSearchResultItems(items);\n    }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n    // Announce results\n    useEffect(() => {\n      if (!searchMenuVisible || loading) return;\n\n      const timeout = setTimeout(() => {\n        announcePolite({\n          message: t(\n            useRecents ? 'recent_results_count' : 'results_count',\n            [searchResultItems?.length ?? 0],\n            {\n              count: searchResultItems?.length ?? 0\n            }\n          ),\n          type: 'status'\n        });\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [loading, searchMenuVisible, searchResultItems]);\n\n    const searchMenu = (\n      <Menu\n        as={StyledSearchMenu}\n        header={\n          recentSearches && !value ? (\n            <Text variant='secondary'>{t('recent_searches')}</Text>\n          ) : undefined\n        }\n        mode='action'\n        items={searchResultItems ?? []}\n        loading={loading}\n        footer={\n          advancedSearchLink ? (\n            <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n          ) : undefined\n        }\n        accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n        focusControlEl={inputRef.current || undefined}\n        pauseDescendantEvaluation={!downPressed}\n        aria-label={searchInputAriaLabel || t('search')}\n      />\n    );\n\n    const focus = useFocusWithin([inputRef, searchResultsRef], focused => {\n      if (!focused) {\n        setDownPressed(false);\n        setSearchMenuOpen(false);\n      }\n    });\n\n    useEffect(() => {\n      if (focus) {\n        setSearchMenuOpen(true);\n      }\n    }, [focus]);\n\n    return (\n      <>\n        <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n          {hasFilters ? (\n            <StyledMenuButton\n              text={selectedFilter}\n              variant='text'\n              icon='search'\n              aria-label={\n                selectedFilter === 'All'\n                  ? t('select_search_filter')\n                  : t('selected_search_filter', [selectedFilter])\n              }\n              menu={{\n                mode: 'single-select',\n                items: completeFilters.map(filter => ({\n                  primary: filter,\n                  id: filter,\n                  selected: selectedFilter === filter,\n                  onClick: () => {\n                    setSelectedFilter(filter);\n                    onFilterChange?.(filter);\n                    inputRef.current?.focus();\n                  }\n                }))\n              }}\n            />\n          ) : (\n            <Flex\n              as={StyledSearchButton}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                e.preventDefault();\n                inputRef.current?.focus();\n              }}\n              forwardedAs='div'\n              container={{\n                alignItems: 'center'\n              }}\n            >\n              <Icon name='search' />\n            </Flex>\n          )}\n\n          <StyledSearchTextInput\n            ref={inputRef}\n            type='search'\n            aria-label={searchInputAriaLabel}\n            placeholder={placeholder}\n            {...restProps}\n            aria-describedby={searchMenuVisible ? instructionTextId : undefined}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onSearchChange?.(e.target.value);\n              if (e.target.value) setSearchMenuOpen(true);\n            }}\n            onKeyDown={onKeyDown}\n            decoupled={hasFilters}\n            autoComplete='off'\n          />\n\n          {value && (\n            <StyledCancelButton\n              icon\n              onClick={() => {\n                onSearchChange?.('');\n                inputRef.current?.focus();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledCancelButton>\n          )}\n        </Flex>\n\n        {showSearchMenu && resultsPopover && (\n          <Popover\n            as={StyledResultsPopover}\n            target={inputRef.current}\n            show={searchMenuOpen}\n            placement='bottom-start'\n            modifiers={[sameWidth]}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!inputRef.current) return;\n\n              if (e.key === 'Tab') {\n                const popoverFocusables = getFocusables(searchResultsRef);\n                const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n                const forward = !e.shiftKey;\n                const isLast = currentIndex === popoverFocusables.length - 1;\n\n                if (forward && isLast) {\n                  e.preventDefault();\n                  const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n                  const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n                  allFocusable[nextIndex]?.focus();\n                  setDownPressed(false);\n                  setSearchMenuOpen(false);\n                } else if (!forward && currentIndex === 0) {\n                  e.preventDefault();\n                  inputRef.current.focus();\n                }\n              }\n              if (e.key === 'Escape') {\n                handleEscape(e);\n                inputRef.current.focus();\n              }\n            }}\n            ref={searchResultsRef}\n          >\n            {searchMenu}\n          </Popover>\n        )}\n\n        {!resultsPopover && showSearchMenu && (\n          <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n        )}\n\n        {searchMenuVisible && (\n          <VisuallyHiddenText id={instructionTextId}>\n            {`${t('search_instructions')} `}\n          </VisuallyHiddenText>\n        )}\n      </>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useRef } from 'react';\nimport type {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ChangeEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  MutableRefObject\n} from 'react';\n\nimport type { ForwardProps, NoChildrenProp, OmitStrict } from '../../types';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport type { FormControlProps } from '../FormControl';\nimport {\n  useConsolidatedRef,\n  useEscape,\n  useI18n,\n  useOuterEvent,\n  useLiveLog,\n  useUID,\n  useFocusWithin\n} from '../../hooks';\nimport Flex from '../Flex';\nimport Popover from '../Popover';\nimport { sameWidth } from '../Popover/modifiers';\nimport Menu from '../Menu';\nimport type { MenuItemProps } from '../Menu';\nimport Link from '../Link';\nimport type { LinkProps } from '../Link';\nimport Text from '../Text';\nimport { createStringMatcher, getFocusables } from '../../utils';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport {\n  StyledCancelButton,\n  StyledResultsPopover,\n  StyledSearchButton,\n  StyledSearchInput,\n  StyledSearchMenu,\n  StyledSearchResultsContainer,\n  StyledSearchTextInput,\n  StyledMenuButton\n} from './SearchInput.styles';\n\nregisterIcon(searchIcon);\n\nexport type SearchResult = Pick<MenuItemProps, 'id' | 'primary' | 'secondary' | 'href' | 'onClick'>;\n\nexport type RecentSearch = Pick<MenuItemProps, 'id' | 'primary' | 'href' | 'onClick'>;\n\nexport type SearchFilter =\n  | {\n      /** A list of user selectable scopes to filter search with. */\n      filters: string[];\n      /** The default filter for uncontrolled use. */\n      defaultFilter?: string;\n      currentFilter?: never;\n    }\n  | {\n      /** A list of user selectable scopes to filter search with. */\n      filters: string[];\n      defaultFilter?: never;\n      /** The current filter for controlled use. */\n      currentFilter?: string;\n    }\n  | {\n      filters?: never;\n      defaultFilter?: never;\n      currentFilter?: never;\n    };\n\nexport type SearchInputProps = NoChildrenProp & {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default 'Search…'\n   */\n  placeholder?: FormControlProps['placeholder'];\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?: FormControlProps['value'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** Called when user changes scope filter. */\n  onFilterChange?: (value: string) => void;\n  /** A list of matching results presented in the input's dropdown menu. */\n  searchResults?: SearchResult[];\n  /** A list of recent searches presented in the input's dropdown menu. */\n  recentSearches?: RecentSearch[];\n  /** Places the menu into an indeterminate loading state. */\n  loading?: boolean;\n  /** Prop passed to the advanced search page link. */\n  advancedSearchLink?: OmitStrict<LinkProps, 'children'>;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n  /**\n   * Boolean for determining for whether the search results will render in a popover.\n   * @default true\n   */\n  resultsPopover?: boolean;\n} & SearchFilter;\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  function SearchInput(props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) {\n    const t = useI18n();\n\n    const {\n      value = '',\n      defaultFilter,\n      currentFilter,\n      filters,\n      onFilterChange,\n      searchResults,\n      recentSearches,\n      loading: loadingProp,\n      advancedSearchLink,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      resultsPopover = true,\n      ...restProps\n    } = props;\n    const instructionTextId = useUID();\n    const { announcePolite } = useLiveLog();\n    const bodyRef = useRef<Element>(document.body);\n    const inputRef = useConsolidatedRef(ref);\n    const filtersRef = useRef<HTMLDivElement>(null);\n    const searchResultsRef = useRef<HTMLDivElement>(null);\n\n    const [searchMenuOpen, setSearchMenuOpen] = useState(false);\n    const [searchResultItems, setSearchResultItems] = useState<MenuItemProps[] | undefined>(\n      undefined\n    );\n    const [selectedFilter, setSelectedFilter] = useState(defaultFilter ?? t('all'));\n    const [downPressed, setDownPressed] = useState(false);\n\n    const completeFilters = [t('all'), ...(filters ?? [])];\n    const hasFilters = completeFilters.length > 1;\n    const hasSearchResults = !!(searchResults && searchResults.length);\n    const hasRecentSearches = !!(recentSearches && recentSearches.length);\n    const showSearchMenu = (value || recentSearches?.length) && (searchResultItems || loadingProp);\n    const useRecents = hasRecentSearches && !value;\n    const loading = useRecents ? false : !!loadingProp;\n    const searchMenuVisible =\n      (resultsPopover && showSearchMenu && searchMenuOpen) || (!resultsPopover && showSearchMenu);\n\n    const handleEscape = useCallback(\n      (e: KeyboardEvent) => {\n        if (searchMenuOpen) {\n          e.preventDefault();\n          e.stopPropagation();\n          setSearchMenuOpen(false);\n          setDownPressed(false);\n        }\n      },\n      [searchMenuOpen]\n    );\n\n    useEscape(handleEscape, inputRef, [handleEscape]);\n\n    const onKeyDown = useCallback(\n      (e: ReactKeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case 'Enter':\n            if (!downPressed) {\n              onSearchSubmit?.(value);\n            }\n            break;\n          case 'ArrowDown':\n            setDownPressed(true);\n            setSearchMenuOpen(true);\n            break;\n          case 'Tab': {\n            const forward = !e.shiftKey;\n\n            if (forward) {\n              const popoverFocusables = getFocusables(searchResultsRef);\n\n              if (popoverFocusables.length) {\n                e.preventDefault();\n                popoverFocusables[0].focus();\n              }\n            }\n            break;\n          }\n          default:\n            break;\n        }\n      },\n      [onSearchSubmit, downPressed, value]\n    );\n\n    useOuterEvent('click', [searchResultsRef, inputRef, filtersRef], () => {\n      setSearchMenuOpen(false);\n    });\n\n    useEffect(() => {\n      setDownPressed(false);\n    }, [value]);\n\n    useEffect(() => {\n      let items: MenuItemProps[] | undefined = [];\n      if (hasSearchResults && value) {\n        items = searchResults;\n      } else if (useRecents) {\n        items = recentSearches;\n      } else if (!searchResults && (!recentSearches || recentSearches.length === 0)) {\n        items = undefined;\n      }\n      setSearchResultItems(items);\n    }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);\n\n    // Announce results\n    useEffect(() => {\n      if (!searchMenuVisible || loading) return;\n\n      const timeout = setTimeout(() => {\n        announcePolite({\n          message: t(\n            useRecents ? 'recent_results_count' : 'results_count',\n            [searchResultItems?.length ?? 0],\n            {\n              count: searchResultItems?.length ?? 0\n            }\n          ),\n          type: 'status'\n        });\n      }, 1000);\n\n      return () => {\n        clearTimeout(timeout);\n      };\n    }, [loading, searchMenuVisible, searchResultItems]);\n\n    const searchMenu = (\n      <Menu\n        as={StyledSearchMenu}\n        header={\n          recentSearches && !value ? (\n            <Text variant='secondary'>{t('recent_searches')}</Text>\n          ) : undefined\n        }\n        mode='action'\n        items={searchResultItems ?? []}\n        loading={loading}\n        footer={\n          advancedSearchLink ? (\n            <Link {...advancedSearchLink}>{t('advanced_search')}</Link>\n          ) : undefined\n        }\n        accent={hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined}\n        focusControlEl={inputRef.current || undefined}\n        pauseDescendantEvaluation={!downPressed}\n        aria-label={searchInputAriaLabel || t('search')}\n      />\n    );\n\n    const focus = useFocusWithin([inputRef, searchResultsRef], focused => {\n      if (!focused) {\n        setDownPressed(false);\n        setSearchMenuOpen(false);\n      }\n    });\n\n    useEffect(() => {\n      if (focus) {\n        setSearchMenuOpen(true);\n      }\n    }, [focus]);\n\n    useEffect(() => {\n      if (currentFilter) setSelectedFilter(currentFilter);\n    }, [currentFilter]);\n\n    return (\n      <>\n        <Flex container as={StyledSearchInput} hasFilters={hasFilters}>\n          {hasFilters ? (\n            <StyledMenuButton\n              text={selectedFilter}\n              variant='text'\n              icon='search'\n              aria-label={\n                selectedFilter === 'All'\n                  ? t('select_search_filter')\n                  : t('selected_search_filter', [selectedFilter])\n              }\n              menu={{\n                mode: 'single-select',\n                items: completeFilters.map(filter => ({\n                  primary: filter,\n                  id: filter,\n                  selected: selectedFilter === filter,\n                  onClick: () => {\n                    setSelectedFilter(filter);\n                    onFilterChange?.(filter);\n                    inputRef.current?.focus();\n                  }\n                }))\n              }}\n            />\n          ) : (\n            <Flex\n              as={StyledSearchButton}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                e.preventDefault();\n                inputRef.current?.focus();\n              }}\n              forwardedAs='div'\n              container={{\n                alignItems: 'center'\n              }}\n            >\n              <Icon name='search' />\n            </Flex>\n          )}\n\n          <StyledSearchTextInput\n            ref={inputRef}\n            type='search'\n            aria-label={searchInputAriaLabel}\n            placeholder={placeholder}\n            {...restProps}\n            aria-describedby={searchMenuVisible ? instructionTextId : undefined}\n            value={value}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => {\n              onSearchChange?.(e.target.value);\n              if (e.target.value) setSearchMenuOpen(true);\n            }}\n            onKeyDown={onKeyDown}\n            decoupled={hasFilters}\n            autoComplete='off'\n          />\n\n          {value && (\n            <StyledCancelButton\n              icon\n              onClick={() => {\n                onSearchChange?.('');\n                inputRef.current?.focus();\n              }}\n              variant='simple'\n              compact\n              label={t('clear')}\n            >\n              <Icon name='times' />\n            </StyledCancelButton>\n          )}\n        </Flex>\n\n        {showSearchMenu && resultsPopover && (\n          <Popover\n            as={StyledResultsPopover}\n            target={inputRef.current}\n            show={searchMenuOpen}\n            placement='bottom-start'\n            modifiers={[sameWidth]}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!inputRef.current) return;\n\n              if (e.key === 'Tab') {\n                const popoverFocusables = getFocusables(searchResultsRef);\n                const currentIndex = popoverFocusables.indexOf(e.target as HTMLElement);\n                const forward = !e.shiftKey;\n                const isLast = currentIndex === popoverFocusables.length - 1;\n\n                if (forward && isLast) {\n                  e.preventDefault();\n                  const allFocusable = getFocusables(bodyRef as MutableRefObject<HTMLElement>);\n                  const nextIndex = allFocusable.indexOf(inputRef.current) + 1;\n\n                  allFocusable[nextIndex]?.focus();\n                  setDownPressed(false);\n                  setSearchMenuOpen(false);\n                } else if (!forward && currentIndex === 0) {\n                  e.preventDefault();\n                  inputRef.current.focus();\n                }\n              }\n              if (e.key === 'Escape') {\n                handleEscape(e);\n                inputRef.current.focus();\n              }\n            }}\n            ref={searchResultsRef}\n          >\n            {searchMenu}\n          </Popover>\n        )}\n\n        {!resultsPopover && showSearchMenu && (\n          <StyledSearchResultsContainer>{searchMenu}</StyledSearchResultsContainer>\n        )}\n\n        {searchMenuVisible && (\n          <VisuallyHiddenText id={instructionTextId}>\n            {`${t('search_instructions')} `}\n          </VisuallyHiddenText>\n        )}\n      </>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}

package/lib/components/SearchInput/SearchInput.styles.d.ts

@@ -1,10 +1,10 @@
 export declare const StyledSearchButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMenuButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../..").ForwardProps & import("../MenuButton").MenuButtonProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly []>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCancelButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input").InputProps & import("../..").ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Input").InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
+    getTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 }, import("styled-components").DefaultTheme, {
     decoupled: boolean;
 }, never>;

package/lib/components/SearchInput/SearchInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB,oNAU7B,CAAC;AAIH,eAAO,MAAM,gBAAgB;;uDA0B5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,qMAiB7B,CAAC;AAIH,eAAO,MAAM,qBAAqB;;;eAA8B,OAAO;SA+CrE,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;SAoChE,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,yGAExC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,eAAO,MAAM,oBAAoB,yGAAe,CAAC"}
+{"version":3,"file":"SearchInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB,oNAU7B,CAAC;AAIH,eAAO,MAAM,gBAAgB;;uDAwB3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,qMAiB7B,CAAC;AAIH,eAAO,MAAM,qBAAqB;;;eAA8B,OAAO;SA+CrE,CAAC;AAIH,eAAO,MAAM,iBAAiB;gBAA4B,OAAO;SAoChE,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC;AAEF,eAAO,MAAM,4BAA4B,yGAExC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;AAEjD,eAAO,MAAM,oBAAoB,yGAAe,CAAC"}

package/lib/components/SearchInput/SearchInput.styles.js

@@ -21,22 +21,22 @@ StyledSearchButton.defaultProps = defaultThemeProp;
 export const StyledMenuButton = styled(MenuButton)(({ theme: { base, components: { 'search-input': searchInput, 'form-control': formControl, input } } }) => {
     const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));
     return css `
-      border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
-      border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
-      padding-inline-start: ${base.spacing};
-      border: ${input['border-width']} solid ${input['border-color']};
-      color: ${iconColor};
-      position: relative;
-      z-index: 2;
-      &:hover {
-        text-decoration: none;
-      }
+    border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
+    border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
+    padding-inline-start: ${base.spacing};
+    border: ${input['border-width']} solid ${input['border-color']};
+    color: ${iconColor};
+    position: relative;
+    z-index: 2;
+    &:hover {
+      text-decoration: none;
+    }
 
-      &:focus:enabled {
-        border-color: ${formControl[':focus']['border-color']};
-        box-shadow: ${formControl[':focus']['box-shadow']};
-      }
-    `;
+    &:focus:enabled {
+      border-color: ${formControl[':focus']['border-color']};
+      box-shadow: ${formControl[':focus']['box-shadow']};
+    }
+  `;
 });
 StyledMenuButton.defaultProps = defaultThemeProp;
 export const StyledCancelButton = styled(Button)(({ theme }) => {

package/lib/components/SearchInput/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button from '../Button';\nimport BareButton from '../Button/BareButton';\nimport Input from '../Input';\n\nexport const StyledSearchButton = styled(BareButton)(({ theme: { base } }) => {\n  const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n  return css`\n    padding-inline-start: ${base.spacing};\n    color: ${iconColor};\n\n    @media (pointer: coarse) {\n      padding-inline-start: calc(3 * ${base.spacing});\n    }\n  `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledMenuButton = styled(MenuButton)(\n  ({\n    theme: {\n      base,\n      components: { 'search-input': searchInput, 'form-control': formControl, input }\n    }\n  }) => {\n    const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n    return css`\n      border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n      padding-inline-start: ${base.spacing};\n      border: ${input['border-width']} solid ${input['border-color']};\n      color: ${iconColor};\n      position: relative;\n      z-index: 2;\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus:enabled {\n        border-color: ${formControl[':focus']['border-color']};\n        box-shadow: ${formControl[':focus']['box-shadow']};\n      }\n    `;\n  }\n);\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nexport const StyledCancelButton = styled(Button)(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-inline-end: calc(\n      (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n    );\n    inset-block-start: calc(\n      (${theme.components.input.height} - ${theme.base['hit-area'].compact}) / 2\n    );\n    z-index: 3;\n\n    @media (pointer: coarse) {\n      inset-block-start: calc(\n        (${theme.base['hit-area']['finger-min']} - ${theme.base['hit-area'].compact}) / 2\n      );\n    }\n  `;\n});\n\nStyledCancelButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)<{ decoupled: boolean }>(props => {\n  const { theme, decoupled } = props;\n  const comp = theme.components['search-input'];\n  return css`\n    flex: 1;\n    background: transparent;\n    padding-inline-end: calc(${theme.base['hit-area'].finger});\n    border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    ${decoupled\n      ? css`\n          border-inline-start: none;\n        `\n      : css`\n          border: none;\n        `}\n    height: 100%;\n    min-height: 100%;\n    position: relative;\n    z-index: 1;\n\n    &[value=''] {\n      padding-inline-end: 0;\n    }\n\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n\n    ::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &:focus:not([disabled]) {\n      z-index: 2;\n      ${!decoupled &&\n      css`\n        border: none;\n        box-shadow: none;\n      `}\n    }\n  `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean }>(\n  ({\n    theme: {\n      base,\n      components: { input, 'form-control': formControl, 'search-input': searchInput }\n    },\n    hasFilters\n  }) => {\n    return css`\n      background: ${formControl['background-color']};\n      min-height: ${input.height};\n      position: relative;\n      height: ${input.height};\n      border-radius: calc(${searchInput['border-radius']} * ${base['border-radius']});\n      ${hasFilters\n        ? css`\n            border: none;\n          `\n        : css`\n            border: ${input['border-width']} solid ${input['border-color']};\n          `}\n\n      ${!hasFilters &&\n      css`\n        :focus-within {\n          border-color: ${base.palette.light};\n          box-shadow: ${formControl[':focus']['box-shadow']};\n        }\n      `}\n\n      @media (pointer: coarse) {\n        min-height: ${base['hit-area']['finger-min']};\n        min-width: ${base['hit-area']['finger-min']};\n      }\n    `;\n  }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n  header {\n    border-bottom: none;\n  }\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n  padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}
+{"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button from '../Button';\nimport BareButton from '../Button/BareButton';\nimport Input from '../Input';\n\nexport const StyledSearchButton = styled(BareButton)(({ theme: { base } }) => {\n  const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n  return css`\n    padding-inline-start: ${base.spacing};\n    color: ${iconColor};\n\n    @media (pointer: coarse) {\n      padding-inline-start: calc(3 * ${base.spacing});\n    }\n  `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledMenuButton = styled(MenuButton)(({\n  theme: {\n    base,\n    components: { 'search-input': searchInput, 'form-control': formControl, input }\n  }\n}) => {\n  const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n  return css`\n    border-start-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n    border-end-start-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n    padding-inline-start: ${base.spacing};\n    border: ${input['border-width']} solid ${input['border-color']};\n    color: ${iconColor};\n    position: relative;\n    z-index: 2;\n    &:hover {\n      text-decoration: none;\n    }\n\n    &:focus:enabled {\n      border-color: ${formControl[':focus']['border-color']};\n      box-shadow: ${formControl[':focus']['box-shadow']};\n    }\n  `;\n});\n\nStyledMenuButton.defaultProps = defaultThemeProp;\n\nexport const StyledCancelButton = styled(Button)(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-inline-end: calc(\n      (${theme.base['hit-area'].finger} - ${theme.base['hit-area'].compact}) / 2\n    );\n    inset-block-start: calc(\n      (${theme.components.input.height} - ${theme.base['hit-area'].compact}) / 2\n    );\n    z-index: 3;\n\n    @media (pointer: coarse) {\n      inset-block-start: calc(\n        (${theme.base['hit-area']['finger-min']} - ${theme.base['hit-area'].compact}) / 2\n      );\n    }\n  `;\n});\n\nStyledCancelButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)<{ decoupled: boolean }>(props => {\n  const { theme, decoupled } = props;\n  const comp = theme.components['search-input'];\n  return css`\n    flex: 1;\n    background: transparent;\n    padding-inline-end: calc(${theme.base['hit-area'].finger});\n    border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    ${decoupled\n      ? css`\n          border-inline-start: none;\n        `\n      : css`\n          border: none;\n        `}\n    height: 100%;\n    min-height: 100%;\n    position: relative;\n    z-index: 1;\n\n    &[value=''] {\n      padding-inline-end: 0;\n    }\n\n    &::-ms-clear {\n      display: none;\n    }\n\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n\n    ::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &:focus:not([disabled]) {\n      z-index: 2;\n      ${!decoupled &&\n      css`\n        border: none;\n        box-shadow: none;\n      `}\n    }\n  `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean }>(\n  ({\n    theme: {\n      base,\n      components: { input, 'form-control': formControl, 'search-input': searchInput }\n    },\n    hasFilters\n  }) => {\n    return css`\n      background: ${formControl['background-color']};\n      min-height: ${input.height};\n      position: relative;\n      height: ${input.height};\n      border-radius: calc(${searchInput['border-radius']} * ${base['border-radius']});\n      ${hasFilters\n        ? css`\n            border: none;\n          `\n        : css`\n            border: ${input['border-width']} solid ${input['border-color']};\n          `}\n\n      ${!hasFilters &&\n      css`\n        :focus-within {\n          border-color: ${base.palette.light};\n          box-shadow: ${formControl[':focus']['box-shadow']};\n        }\n      `}\n\n      @media (pointer: coarse) {\n        min-height: ${base['hit-area']['finger-min']};\n        min-width: ${base['hit-area']['finger-min']};\n      }\n    `;\n  }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n  header {\n    border-bottom: none;\n  }\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n  padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}

package/lib/components/Select/Select.d.ts

@@ -46,7 +46,7 @@ export declare const StyledSelect: import("styled-components").StyledComponent<"
     readOnly: boolean;
 }, never>;
 declare const _default: FunctionComponent<SelectProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=Select.d.ts.map

package/lib/components/Select/Select.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getSelectTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getSelectTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Select.test-ids.d.ts.map

package/lib/components/Select/Select.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,wKAA6D,CAAC"}
+{"version":3,"file":"Select.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,+KAA6D,CAAC"}

package/lib/components/Slider/Slider.d.ts

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type SliderProps from './Slider.types';
 declare const _default: FunctionComponent<SliderProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 };
 export default _default;
 //# sourceMappingURL=Slider.d.ts.map

package/lib/components/Slider/Slider.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getSliderTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getSliderTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
 //# sourceMappingURL=Slider.test-ids.d.ts.map

package/lib/components/Slider/Slider.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,wKAA6D,CAAC"}
+{"version":3,"file":"Slider.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,+KAA6D,CAAC"}

package/lib/components/SummaryItem/SummaryItem.d.ts

@@ -6,6 +6,11 @@ export interface SummaryItemProps extends NoChildrenProp, TestIdProp {
     primary: NonNullable<ReactNode>;
     /** Region for displaying supporting metadata. */
     secondary?: ReactNode;
+    /**
+     * Determines layout structure.
+     * @default 'stacked'
+     */
+    layout?: 'stacked' | 'inline';
     /** Region for an Avatar, Icon, or other supporting visual. */
     visual?: ReactNode;
     /** Region for adding Actions, Buttons, or Links. */
@@ -33,7 +38,7 @@ export declare const StyledSecondary: import("styled-components").StyledComponen
 export declare const StyledSummaryItemActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const _default: FunctionComponent<SummaryItemProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
+    getTestIds: (testIdProp?: string | null | undefined) => import("../../types").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
 };
 export default _default;
 //# sourceMappingURL=SummaryItem.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,WAAW,EAAE,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO5E,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,UAAU;IAClE,0CAA0C;IAC1C,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAkBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;;;;AAuF9C,wBAA+D"}
+{"version":3,"file":"SummaryItem.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,WAAW,EAAE,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO5E,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,UAAU;IAClE,0CAA0C;IAC1C,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,yGAOxB,CAAC;AAIF,eAAO,MAAM,aAAa;;uBAEL,gBAAgB,CAAC,kBAAkB,CAAC;SAkBvD,CAAC;AAIH,eAAO,MAAM,eAAe;uBACP,gBAAgB,CAAC,kBAAkB,CAAC;SAYvD,CAAC;AAEH,eAAO,MAAM,wBAAwB,yGAEpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,yGAAe,CAAC;;;;AAiG9C,wBAA+D"}

package/lib/components/SummaryItem/SummaryItem.js

@@ -54,17 +54,25 @@ export const StyledSummaryItem = styled.div ``;
 const getColumns = ({ visual, actions }) => {
     return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;
 };
-const getAreas = ({ secondary, visual, actions }) => {
-    return `"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}"${secondary ? `\n"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}"` : ''}`;
+const getAreas = ({ secondary, layout, visual, actions }) => {
+    return `"${visual ? 'visual ' : ''}primary${secondary && layout === 'inline' ? ' secondary' : ''}${actions ? ' actions' : ''}"${secondary && layout === 'stacked'
+        ? `\n"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}"`
+        : ''}`;
 };
-const SummaryItem = forwardRef(function SummaryItem({ testId, visual, primary, secondary, actions, container, overflowStrategy = 'wrap', as, ...restProps }, ref) {
+const SummaryItem = forwardRef(function SummaryItem({ testId, visual, primary, secondary, layout = 'stacked', actions, container, overflowStrategy = 'wrap', as, ...restProps }, ref) {
     const testIds = useTestIds(testId, getSummaryItemTestIds);
     return (_jsxs(Grid, { "data-testid": testIds.root, ...restProps, ref: ref, container: {
             cols: getColumns({ visual, actions }),
             colGap: 2,
-            areas: getAreas({ secondary, visual, actions }),
+            areas: getAreas({ secondary, layout, visual, actions }),
             ...container
-        }, as: StyledSummaryItem, forwardedAs: as, children: [visual && (_jsx(Grid, { "data-testid": testIds.visual, as: StyledVisual, item: { area: 'visual', alignSelf: 'center' }, children: visual })), _jsx(StyledPrimary, { "data-testid": testIds.primary, item: { area: 'primary', alignSelf: secondary ? 'end' : 'center' }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy, children: primary }), secondary && (_jsx(StyledSecondary, { "data-testid": testIds.secondary, item: { area: 'secondary', alignSelf: 'start' }, overflowStrategy: overflowStrategy, children: secondary })), actions && (_jsx(Grid, { "data-testid": testIds.actions, as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' }, children: actions }))] }));
+        }, as: StyledSummaryItem, forwardedAs: as, children: [visual && (_jsx(Grid, { "data-testid": testIds.visual, as: StyledVisual, item: { area: 'visual', alignSelf: 'center' }, children: visual })), _jsx(StyledPrimary, { "data-testid": testIds.primary, item: {
+                    area: 'primary',
+                    alignSelf: secondary && layout === 'stacked' ? 'end' : 'center'
+                }, isString: typeof primary === 'string', overflowStrategy: overflowStrategy, children: primary }), secondary && (_jsx(StyledSecondary, { "data-testid": testIds.secondary, item: {
+                    area: 'secondary',
+                    alignSelf: layout === 'stacked' ? 'start' : 'center'
+                }, overflowStrategy: overflowStrategy, children: secondary })), actions && (_jsx(Grid, { "data-testid": testIds.actions, as: StyledSummaryItemActions, item: { area: 'actions', alignSelf: 'center' }, children: actions }))] }));
 });
 export default withTestIds(SummaryItem, getSummaryItemTestIds);
 //# sourceMappingURL=SummaryItem.js.map

package/lib/components/SummaryItem/SummaryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAwB/D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;MAChC,kBAAkB;;;;;;CAMvB,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAGtC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC3C,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;;SAIF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;;MAEH,QAAQ;QACV,GAAG,CAAA;qBACc,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;KACtD;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAExC,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,UAAU;QAC/B,CAAC,CAAC,GAAG,CAAA;;;SAGF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAgD,EAAE,EAAE;IACvF,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,iBAAiB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,SAAS,EACT,MAAM,EACN,OAAO,EACoD,EAAE,EAAE;IAC/D,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IACnE,SAAS,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,EACtF,EAAE,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,MAAM,EACN,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,gBAAgB,GAAG,MAAM,EACzB,EAAE,EACF,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAC;IAE1D,OAAO,CACL,MAAC,IAAI,mBACU,OAAO,CAAC,IAAI,KACrB,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,IAAI,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YACrC,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;YAC/C,GAAG,SAAS;SACb,EACD,EAAE,EAAE,iBAAiB,EACrB,WAAW,EAAE,EAAE,aAEd,MAAM,IAAI,CACT,KAAC,IAAI,mBACU,OAAO,CAAC,MAAM,EAC3B,EAAE,EAAE,YAAY,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,YAE5C,MAAM,GACF,CACR,EACD,KAAC,aAAa,mBACC,OAAO,CAAC,OAAO,EAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,EAClE,QAAQ,EAAE,OAAO,OAAO,KAAK,QAAQ,EACrC,gBAAgB,EAAE,gBAAgB,YAEjC,OAAO,GACM,EACf,SAAS,IAAI,CACZ,KAAC,eAAe,mBACD,OAAO,CAAC,SAAS,EAC9B,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,EAC/C,gBAAgB,EAAE,gBAAgB,YAEjC,SAAS,GACM,CACnB,EACA,OAAO,IAAI,CACV,KAAC,IAAI,mBACU,OAAO,CAAC,OAAO,EAC5B,EAAE,EAAE,wBAAwB,EAC5B,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAE7C,OAAO,GACH,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, ElementType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid from '../Grid';\nimport type { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { StyledProgressRing } from '../Progress';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getSummaryItemTestIds } from './SummaryItem.test-ids';\n\nexport interface SummaryItemProps extends NoChildrenProp, TestIdProp {\n  /** Region for the primary information. */\n  primary: NonNullable<ReactNode>;\n  /** Region for displaying supporting metadata. */\n  secondary?: ReactNode;\n  /** Region for an Avatar, Icon, or other supporting visual. */\n  visual?: ReactNode;\n  /** Region for adding Actions, Buttons, or Links. */\n  actions?: ReactNode;\n  /** Override the default Grid container props on SummaryItem. */\n  container?: GridContainerProps;\n  /**\n   * Determines how the text within primary and secondary fields should handle overflow.\n   * @default 'wrap'\n   */\n  overflowStrategy?: 'wrap' | 'ellipsis';\n  /** HTML tag to render the SummaryItem's element with. */\n  as?: ElementType;\n  /** Ref for the SummaryItem. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n  > ${StyledProgressRing}, img {\n    display: block;\n    object-fit: cover;\n    width: 2rem;\n    height: 2rem;\n  }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n  isString?: boolean;\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n\n    ${isString &&\n    css`\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    `}\n  `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n  `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' | 'actions'>) => {\n  return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n  secondary,\n  visual,\n  actions\n}: Pick<SummaryItemProps, 'secondary' | 'visual' | 'actions'>) => {\n  return `\"${visual ? 'visual ' : ''}primary${actions ? ' actions' : ''}\"${\n    secondary ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"` : ''\n  }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n  function SummaryItem(\n    {\n      testId,\n      visual,\n      primary,\n      secondary,\n      actions,\n      container,\n      overflowStrategy = 'wrap',\n      as,\n      ...restProps\n    }: PropsWithoutRef<SummaryItemProps>,\n    ref: SummaryItemProps['ref']\n  ) {\n    const testIds = useTestIds(testId, getSummaryItemTestIds);\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        ref={ref}\n        container={{\n          cols: getColumns({ visual, actions }),\n          colGap: 2,\n          areas: getAreas({ secondary, visual, actions }),\n          ...container\n        }}\n        as={StyledSummaryItem}\n        forwardedAs={as}\n      >\n        {visual && (\n          <Grid\n            data-testid={testIds.visual}\n            as={StyledVisual}\n            item={{ area: 'visual', alignSelf: 'center' }}\n          >\n            {visual}\n          </Grid>\n        )}\n        <StyledPrimary\n          data-testid={testIds.primary}\n          item={{ area: 'primary', alignSelf: secondary ? 'end' : 'center' }}\n          isString={typeof primary === 'string'}\n          overflowStrategy={overflowStrategy}\n        >\n          {primary}\n        </StyledPrimary>\n        {secondary && (\n          <StyledSecondary\n            data-testid={testIds.secondary}\n            item={{ area: 'secondary', alignSelf: 'start' }}\n            overflowStrategy={overflowStrategy}\n          >\n            {secondary}\n          </StyledSecondary>\n        )}\n        {actions && (\n          <Grid\n            data-testid={testIds.actions}\n            as={StyledSummaryItemActions}\n            item={{ area: 'actions', alignSelf: 'center' }}\n          >\n            {actions}\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default withTestIds(SummaryItem, getSummaryItemTestIds);\n"]}
+{"version":3,"file":"SummaryItem.js","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, ReactNode, Ref, PropsWithoutRef, ElementType } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Grid from '../Grid';\nimport type { GridContainerProps } from '../Grid';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { StyledProgressRing } from '../Progress';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getSummaryItemTestIds } from './SummaryItem.test-ids';\n\nexport interface SummaryItemProps extends NoChildrenProp, TestIdProp {\n  /** Region for the primary information. */\n  primary: NonNullable<ReactNode>;\n  /** Region for displaying supporting metadata. */\n  secondary?: ReactNode;\n  /**\n   * Determines layout structure.\n   * @default 'stacked'\n   */\n  layout?: 'stacked' | 'inline';\n  /** Region for an Avatar, Icon, or other supporting visual. */\n  visual?: ReactNode;\n  /** Region for adding Actions, Buttons, or Links. */\n  actions?: ReactNode;\n  /** Override the default Grid container props on SummaryItem. */\n  container?: GridContainerProps;\n  /**\n   * Determines how the text within primary and secondary fields should handle overflow.\n   * @default 'wrap'\n   */\n  overflowStrategy?: 'wrap' | 'ellipsis';\n  /** HTML tag to render the SummaryItem's element with. */\n  as?: ElementType;\n  /** Ref for the SummaryItem. */\n  ref?: Ref<HTMLElement>;\n}\n\nexport const StyledVisual = styled.div`\n  > ${StyledProgressRing}, img {\n    display: block;\n    object-fit: cover;\n    width: 2rem;\n    height: 2rem;\n  }\n`;\n\nStyledVisual.defaultProps = defaultThemeProp;\n\nexport const StyledPrimary = styled(Grid)<{\n  isString?: boolean;\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ theme, isString, overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n\n    ${isString &&\n    css`\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    `}\n  `;\n});\n\nStyledPrimary.defaultProps = defaultThemeProp;\n\nexport const StyledSecondary = styled(Grid)<{\n  overflowStrategy?: SummaryItemProps['overflowStrategy'];\n}>(({ overflowStrategy }) => {\n  return css`\n    ${overflowStrategy === 'ellipsis'\n      ? css`\n          overflow: hidden;\n          text-overflow: ellipsis;\n        `\n      : css`\n          word-break: break-word;\n        `}\n  `;\n});\n\nexport const StyledSummaryItemActions = styled.div`\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryItem = styled.div``;\n\nconst getColumns = ({ visual, actions }: Pick<SummaryItemProps, 'visual' | 'actions'>) => {\n  return `${visual ? 'auto ' : ''}minmax(0, 1fr)${actions ? ' auto' : ''}`;\n};\n\nconst getAreas = ({\n  secondary,\n  layout,\n  visual,\n  actions\n}: Pick<SummaryItemProps, 'secondary' | 'layout' | 'visual' | 'actions'>) => {\n  return `\"${visual ? 'visual ' : ''}primary${secondary && layout === 'inline' ? ' secondary' : ''}${actions ? ' actions' : ''}\"${\n    secondary && layout === 'stacked'\n      ? `\\n\"${visual ? 'visual ' : ''}secondary${actions ? ' actions' : ''}\"`\n      : ''\n  }`;\n};\n\nconst SummaryItem: FunctionComponent<SummaryItemProps & ForwardProps> = forwardRef(\n  function SummaryItem(\n    {\n      testId,\n      visual,\n      primary,\n      secondary,\n      layout = 'stacked',\n      actions,\n      container,\n      overflowStrategy = 'wrap',\n      as,\n      ...restProps\n    }: PropsWithoutRef<SummaryItemProps>,\n    ref: SummaryItemProps['ref']\n  ) {\n    const testIds = useTestIds(testId, getSummaryItemTestIds);\n\n    return (\n      <Grid\n        data-testid={testIds.root}\n        {...restProps}\n        ref={ref}\n        container={{\n          cols: getColumns({ visual, actions }),\n          colGap: 2,\n          areas: getAreas({ secondary, layout, visual, actions }),\n          ...container\n        }}\n        as={StyledSummaryItem}\n        forwardedAs={as}\n      >\n        {visual && (\n          <Grid\n            data-testid={testIds.visual}\n            as={StyledVisual}\n            item={{ area: 'visual', alignSelf: 'center' }}\n          >\n            {visual}\n          </Grid>\n        )}\n        <StyledPrimary\n          data-testid={testIds.primary}\n          item={{\n            area: 'primary',\n            alignSelf: secondary && layout === 'stacked' ? 'end' : 'center'\n          }}\n          isString={typeof primary === 'string'}\n          overflowStrategy={overflowStrategy}\n        >\n          {primary}\n        </StyledPrimary>\n        {secondary && (\n          <StyledSecondary\n            data-testid={testIds.secondary}\n            item={{\n              area: 'secondary',\n              alignSelf: layout === 'stacked' ? 'start' : 'center'\n            }}\n            overflowStrategy={overflowStrategy}\n          >\n            {secondary}\n          </StyledSecondary>\n        )}\n        {actions && (\n          <Grid\n            data-testid={testIds.actions}\n            as={StyledSummaryItemActions}\n            item={{ area: 'actions', alignSelf: 'center' }}\n          >\n            {actions}\n          </Grid>\n        )}\n      </Grid>\n    );\n  }\n);\n\nexport default withTestIds(SummaryItem, getSummaryItemTestIds);\n"]}

package/lib/components/SummaryItem/SummaryItem.test-ids.d.ts

@@ -1,2 +1,2 @@
-export declare const getSummaryItemTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
+export declare const getSummaryItemTestIds: (testIdProp?: string | null | undefined) => import("../..").TestIdsRecord<readonly ["primary", "secondary", "visual", "actions"]>;
 //# sourceMappingURL=SummaryItem.test-ids.d.ts.map

package/lib/components/SummaryItem/SummaryItem.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,4HAKvB,CAAC"}
+{"version":3,"file":"SummaryItem.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryItem/SummaryItem.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,mIAKvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIhG,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC7C,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,EACrC,YAAY;IACd,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,uLAOnC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,WAS1C,CAAC;AAIF,eAAO,MAAM,gBAAgB,oBAAqB,KAAK,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC,gBA2BzF,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAgEnD,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,GAAG,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIhG,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,uGAAuG;IACvG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wHAAwH;IACxH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,qKAAqK;IACrK,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,4KAA4K;IAC5K,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,WAAW,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAClC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC7C,IAAI,CAAC,YAAY,EAAE,iBAAiB,CAAC,EACrC,YAAY;IACd,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,oIAAoI;IACpI,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,uLAMnC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,WAQ1C,CAAC;AAIF,eAAO,MAAM,gBAAgB,oBAAqB,KAAK,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC,gBA2BzF,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CAgEnD,CAAC;AAEH,eAAe,WAAW,CAAC"}