npm - @pega/cosmos-react-core - Versions diffs - 5.0.0-dev.9.2 → 6.0.0 - Mend

@pega/cosmos-react-core 5.0.0-dev.9.2 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (228) hide show

package/lib/components/FormField/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useRef } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport {\n useConsolidatedRef,\n useDirection,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' \| 'value' \| 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input \| TextArea \| Select \| etc.. /\n children: ReactElement \| ReactElement[];\n /\n An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n /\n id?: string;\n /\n Determines how the wrapping label should be rendered.\n * @default 'label'\n /\n labelAs?: LabelProps['as'];\n /\n Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n /\n labelFor?: LabelProps['htmlFor'];\n /\n Sets the id of the label.\n * @default undefined\n /\n labelId?: LabelProps['id'];\n /\n Visually hides the label region.\n * @default false\n /\n labelHidden?: boolean;\n /\n Visually places the label after the input.\n * @default false\n /\n labelAfter?: boolean;\n /\n Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n /\n isRadioCheck?: boolean;\n /\n Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n /\n as?: 'div' \| 'fieldset' \| ComponentType<any>;\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: boolean;\n /* Optionally utilized by Input or Select. /\n actions?: Action[];\n /* Enables Flex container prop pass through. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /* Character remaining count. Typically used on Textareas only /\n charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n ({ theme, status }) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${theme.components['form-field'][status]['status-color']};\n vertical-align: baseline;\n margin-inline-end: 0.5ch;\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n }\n }) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n max-width: max-content;\n margin-top: calc(0.25 ${spacing});\n font-size: ${infoFontSize};\n word-break: break-word;\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `;\n }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nconst StyledRequiredAsterisk = styled.span(({ theme }) => {\n const {\n base: {\n palette: { urgent }\n }\n } = theme;\n\n return css`\n vertical-align: top;\n color: ${urgent};\n `;\n});\n\nStyledRequiredAsterisk.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div`\n ${StyledRequiredAsterisk} {\n margin-inline-end: auto;\n }\n`;\n\nexport const StyledFormField = styled.div<\n FormFieldProps & { labelAsLegend: boolean; showAdditionalInfo: boolean }\n>(props => {\n const {\n labelAsLegend,\n showAdditionalInfo,\n disabled,\n required,\n theme: {\n base: { 'disabled-opacity': disabledOpacity, spacing }\n }\n } = props;\n const { ltr } = useDirection();\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n > ${StyledLabel}, > ${StyledLabelRow} {\n margin-bottom: calc(0.25 * ${spacing});\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${labelAsLegend &&\n (showAdditionalInfo \|\| required) &&\n css`\n display: block;\n\n > legend {\n float: ${ltr ? 'left' : 'right'};\n }\n\n > ${StyledRequiredAsterisk} {\n float: ${ltr ? 'left' : 'right'};\n\n ${!showAdditionalInfo &&\n css`\n + * {\n clear: both;\n }\n `}\n }\n\n > ${StyledAdditionalInfo} {\n float: ${ltr ? 'right' : 'left'};\n\n + * {\n clear: both;\n }\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n ({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': baseRadius,\n spacing\n },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n 'form-field': formField\n }\n }\n }) => {\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = formField.pending['status-color'];\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 * ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs = 'label',\n labelFor = id,\n labelId,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = false,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAsLegend: boolean = labelAs === 'legend';\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n const labelRef = useRef<HTMLLabelElement \| HTMLLegendElement>(null);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n const labelContent = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n ref={labelRef}\n >\n {label}\n </Label>\n\n {required && !labelHidden && (\n <StyledRequiredAsterisk aria-hidden> *</StyledRequiredAsterisk>\n )}\n\n {showAdditionalInfo && (\n <AdditionalInfo data-testid={testIds.additionalInfo} heading={additionalInfo.heading}>\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n const labelRow =\n !isRadioCheck && !labelAsLegend ? (\n <Flex\n as={StyledLabelRow}\n container={{ justify: 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch' }}\n >\n {labelContent}\n </Flex>\n ) : (\n labelContent\n );\n\n useEffect(() => {\n if (status === 'error' \|\| status === 'warning') {\n let message = `${t(status)} ${info}`;\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n announceAssertive({ message, type: status });\n }\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'] = labelAsLegend\n ? controlElement\n : cloneElement(controlElement as ReactElement, {\n 'aria-describedby': info && `${id}-info`\n });\n\n if (actions) {\n content = (\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n <Flex\n id={`${id}-info`}\n data-testid={testIds.info}\n status={status}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center' }}\n >\n {status && status !== 'pending' && (\n <>\n <StyledStatusIcon status={status} name={statusIconMap[status]} />\n <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {info}\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={t('reject_suggestion_button_a11y')}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={t('accept_suggestion_button_a11y')}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n ...container\n }}\n as={StyledFormField}\n labelAsLegend={labelAsLegend}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n ref={consolidatedRef}\n >\n {(labelAsLegend \|\| !labelAfter) && labelRow}\n {content}\n {!labelAsLegend && labelAfter && labelRow}\n {!readOnly && infoContent}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
1	+ {"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport {\n useConsolidatedRef,\n useDirection,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport { calculateFontSize, getHoverColors } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as flagWaveSolidIcon from '../Icon/icons/flag-wave-solid.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, flagWaveSolidIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' \| 'value' \| 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input \| TextArea \| Select \| etc.. /\n children: ReactElement \| ReactElement[];\n /\n An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n /\n id?: string;\n /\n Determines how the wrapping label should be rendered.\n * @default 'label'\n /\n labelAs?: LabelProps['as'];\n /\n Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n /\n labelFor?: LabelProps['htmlFor'];\n /\n Sets the id of the label.\n * @default undefined\n /\n labelId?: LabelProps['id'];\n /\n Visually hides the label region.\n * @default false\n /\n labelHidden?: boolean;\n /\n Visually places the label after the input.\n * @default false\n /\n labelAfter?: boolean;\n /\n Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n /\n isRadioCheck?: boolean;\n /\n Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n /\n as?: 'div' \| 'fieldset' \| ComponentType<any>;\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: boolean;\n /* Optionally utilized by Input or Select. /\n actions?: Action[];\n /* Enables Flex container prop pass through. /\n container?: ExcludeStrict<FlexProps['container'], true>;\n /* Character remaining count. Typically used on Textareas only /\n charLimitDisplay?: ReactNode;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(\n ({ theme, status }) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${theme.components['form-field'][status]['status-color']};\n vertical-align: baseline;\n margin-inline-end: 0.5ch;\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<Pick<FormControlProps, 'status'>>(\n ({\n status,\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n }\n }) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n\n return css`\n max-width: max-content;\n margin-top: calc(0.25 ${spacing});\n font-size: ${infoFontSize};\n word-break: break-word;\n ${status &&\n formField[status] &&\n css`\n color: ${formField[status]['status-color']};\n `}\n `;\n }\n);\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledRequiredAsterisk = styled.span(({ theme }) => {\n const {\n base: {\n palette: { urgent }\n }\n } = theme;\n\n return css`\n vertical-align: top;\n color: ${urgent};\n `;\n});\n\nStyledRequiredAsterisk.defaultProps = defaultThemeProp;\n\nconst StyledLabelRow = styled.div`\n ${StyledRequiredAsterisk} {\n margin-inline-end: auto;\n }\n`;\n\nexport const StyledFormField = styled.div<\n FormFieldProps & { labelAsLegend: boolean; showAdditionalInfo: boolean }\n>(props => {\n const {\n labelAsLegend,\n showAdditionalInfo,\n disabled,\n required,\n theme: {\n base: { 'disabled-opacity': disabledOpacity, spacing }\n }\n } = props;\n const { ltr } = useDirection();\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n > ${StyledLabel}, > ${StyledLabelRow} {\n margin-bottom: calc(0.25 * ${spacing});\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${labelAsLegend &&\n (showAdditionalInfo \|\| required) &&\n css`\n display: block;\n\n > legend {\n float: ${ltr ? 'left' : 'right'};\n }\n\n > ${StyledRequiredAsterisk} {\n float: ${ltr ? 'left' : 'right'};\n\n ${!showAdditionalInfo &&\n css`\n + * {\n clear: both;\n }\n `}\n }\n\n > ${StyledAdditionalInfo} {\n float: ${ltr ? 'right' : 'left'};\n\n + * {\n clear: both;\n }\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(\n ({\n theme: {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n 'border-radius': baseRadius,\n spacing\n },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth },\n 'form-field': formField\n }\n }\n }) => {\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = formField.pending['status-color'];\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 * ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n }\n);\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'flag-wave-solid', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs = 'label',\n labelFor = id,\n labelId,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = false,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAsLegend: boolean = labelAs === 'legend';\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n const labelRef = useRef<HTMLLabelElement \| HTMLLegendElement>(null);\n const [labelText, setLabelText] = useState<string \| null>(null);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n\n const labelContent = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n ref={labelRef}\n >\n {label}\n </Label>\n\n {required && !labelHidden && (\n <StyledRequiredAsterisk aria-hidden> *</StyledRequiredAsterisk>\n )}\n\n {showAdditionalInfo && labelText && (\n <AdditionalInfo\n data-testid={testIds.additionalInfo}\n heading={additionalInfo.heading}\n contextualLabel={labelText}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n const labelRow =\n !isRadioCheck && !labelAsLegend ? (\n <Flex\n as={StyledLabelRow}\n container={{ justify: 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch' }}\n >\n {labelContent}\n </Flex>\n ) : (\n labelContent\n );\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (status === 'error' \|\| status === 'warning') {\n let message = `${t(status)} ${info}`;\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n announceAssertive({ message, type: status });\n }\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'] = labelAsLegend\n ? controlElement\n : cloneElement(controlElement as ReactElement, {\n 'aria-describedby': info && `${id}-info`\n });\n\n if (actions) {\n content = (\n <Flex container={{ alignItems: 'center', gap: 0.5 }}>\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n <Flex\n id={`${id}-info`}\n data-testid={testIds.info}\n status={status}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center' }}\n >\n {status && status !== 'pending' && (\n <>\n <StyledStatusIcon status={status} name={statusIconMap[status]} />\n <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {info}\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={t('reject_suggestion_button_a11y')}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={t('accept_suggestion_button_a11y')}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n ...container\n }}\n as={StyledFormField}\n labelAsLegend={labelAsLegend}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={labelAsLegend && info ? `${id}-info` : undefined}\n ref={consolidatedRef}\n >\n {(labelAsLegend \|\| !labelAfter) && labelRow}\n {content}\n {!labelAsLegend && labelAfter && labelRow}\n {!readOnly && infoContent}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}

package/lib/components/HTML/HTML.js CHANGED Viewed

@@ -200,7 +200,7 @@ const HTML = forwardRef(function HTML({ testId, content, customTags, ...restProp
             ? DOMPurify.sanitize(content, {
                 FORBID_TAGS: ['style'],
                 CUSTOM_ELEMENT_HANDLING: {
-                    tagNameCheck: customTags ? tagName => customTags.includes(tagName) : null
+                    tagNameCheck: customTags ? tagName => customTags.includes(tagName) : undefined
                 }
             })
             : '';

package/lib/components/HTML/HTML.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport createDOMPurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { sameOrigin, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\n\nimport { getHTMLTestIds } from './HTML.test-ids';\n\nconst DOMPurify = createDOMPurify();\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp, TestIdProp {\n content: string;\n customTags?: string[];\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n border-collapse: collapse;\n\n td {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n min-width: 6.25rem;\n }\n\n tr:first-child {\n td:first-child {\n border-top-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-top-right-radius: 0.125rem;\n }\n }\n\n tr:last-child {\n td:first-child {\n border-bottom-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-bottom-right-radius: 0.125rem;\n }\n }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return `\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n height: auto;\n border-radius: 0.25rem;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n return css`\n width: 100%;\n overflow-x: auto;\n overflow-wrap: break-word;\n contain: paint;\n ${getHtmlStyles(theme)}\n\n ${StyledPopover} ul {\n ul {\n padding-inline-start: 0;\n }\n ol {\n padding-inline-start: 0;\n }\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nif (DOMPurify.isSupported) {\n const targetBlankSet = new WeakSet<HTMLAnchorElement>();\n\n DOMPurify.addHook('beforeSanitizeAttributes', node => {\n // Can be passed text nodes\n if (!(node instanceof HTMLElement \|\| node instanceof SVGElement)) return;\n\n node.removeAttribute('class');\n\n if (\n node.tagName === 'A' &&\n node.hasAttribute('href') &&\n node.getAttribute('target') === '_blank'\n ) {\n targetBlankSet.add(node as HTMLAnchorElement);\n }\n });\n\n DOMPurify.addHook('afterSanitizeAttributes', node => {\n if (node.tagName === 'A' && node.hasAttribute('href')) {\n const href = node.getAttribute('href')!;\n\n let fullURL: URL;\n try {\n fullURL = new URL(href, window.location.href);\n } catch (e) {\n return;\n }\n\n if (!sameOrigin(window.location, fullURL)) {\n node.setAttribute('target', '_blank');\n node.setAttribute('rel', 'noopener');\n } else if (targetBlankSet.has(node as HTMLAnchorElement)) {\n node.setAttribute('target', '_blank');\n targetBlankSet.delete(node as HTMLAnchorElement);\n }\n }\n });\n}\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(function HTML(\n { testId, content, customTags, ...restProps }: PropsWithoutRef<HTMLProps>,\n ref: HTMLProps['ref']\n) {\n const [mounted, setMounted] = useState(false);\n const sanitizedHtml = useMemo(() => {\n // Don't render content on the server at all.\n return mounted && DOMPurify.isSupported\n ? DOMPurify.sanitize(content, {\n FORBID_TAGS: ['style'],\n CUSTOM_ELEMENT_HANDLING: {\n tagNameCheck: customTags ? tagName => customTags.includes(tagName) : null\n }\n })\n : '';\n }, [content, customTags, mounted]);\n const testIds = useTestIds(testId, getHTMLTestIds);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n return (\n <StyledHTML\n data-testid={testIds.root}\n {...restProps}\n dangerouslySetInnerHTML={{ __html: sanitizedHtml }}\n ref={ref}\n />\n );\n});\n\nexport default withTestIds(HTML, getHTMLTestIds);\n"]}
1	+ {"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../src/components/HTML/HTML.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\nimport createDOMPurify from 'dompurify';\n\nimport { StyledPopover } from '../Popover';\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport type { FontSize } from '../../styles';\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport { sameOrigin, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\n\nimport { getHTMLTestIds } from './HTML.test-ids';\n\nconst DOMPurify = createDOMPurify();\n\nexport interface HTMLProps extends BaseProps, NoChildrenProp, TestIdProp {\n content: string;\n customTags?: string[];\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const listStyles = css`\n ul,\n ol {\n padding-inline-start: 2.5rem;\n }\n\n li {\n margin: 0.5rem 0;\n }\n\n ul li {\n ul {\n margin-inline-start: 1rem;\n list-style-type: circle;\n }\n\n ul ul {\n margin-inline-start: 2rem;\n list-style-type: square;\n }\n\n ul ul ul {\n margin-inline-start: 3rem;\n list-style-type: disc;\n }\n }\n\n ol li {\n ol {\n margin-inline-start: 1rem;\n list-style-type: lower-alpha;\n }\n\n ol ol {\n margin-inline-start: 2rem;\n list-style-type: lower-roman;\n }\n\n ol ol ol {\n margin-inline-start: 3rem;\n list-style-type: decimal;\n }\n }\n`;\n\nexport const getTableStyles = (theme: DefaultTheme) => css`\n border-collapse: collapse;\n\n td {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n min-width: 6.25rem;\n }\n\n tr:first-child {\n td:first-child {\n border-top-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-top-right-radius: 0.125rem;\n }\n }\n\n tr:last-child {\n td:first-child {\n border-bottom-left-radius: 0.125rem;\n }\n\n td:last-child {\n border-bottom-right-radius: 0.125rem;\n }\n }\n`;\n\nexport const getHtmlStyles = (theme: DefaultTheme) => {\n const {\n base: { 'font-size': baseFontSize, 'font-scale': baseFontScale, palette },\n components: { text }\n } = theme;\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n return `\n ${listStyles}\n table {\n ${getTableStyles(theme)}\n }\n img {\n max-width: 100%;\n height: auto;\n border-radius: 0.25rem;\n }\n a {\n color: ${palette.interactive};\n }\n pre {\n white-space: break-spaces;\n }\n p {\n min-height: ${fontSize[text.primary['font-size'] as FontSize]};\n }\n h1 {\n font-size: ${fontSize[text.h1['font-size'] as FontSize]};\n font-weight: ${text.h1['font-weight']};\n min-height: ${fontSize[text.h1['font-size'] as FontSize]};\n }\n h2 {\n font-size: ${fontSize[text.h2['font-size'] as FontSize]};\n font-weight: ${text.h2['font-weight']};\n min-height: ${fontSize[text.h2['font-size'] as FontSize]};\n }\n h3 {\n font-size: ${fontSize[text.h3['font-size'] as FontSize]};\n font-weight: ${text.h3['font-weight']};\n min-height: ${fontSize[text.h3['font-size'] as FontSize]};\n }\n h4 {\n font-size: ${fontSize[text.h4['font-size'] as FontSize]};\n font-weight: ${text.h4['font-weight']};\n min-height: ${fontSize[text.h4['font-size'] as FontSize]};\n }\n h5 {\n font-size: ${fontSize[text.h5['font-size'] as FontSize]};\n font-weight: ${text.h5['font-weight']};\n min-height: ${fontSize[text.h5['font-size'] as FontSize]};\n }\n h6 {\n font-size: ${fontSize[text.h6['font-size'] as FontSize]};\n font-weight: ${text.h6['font-weight']};\n min-height: ${fontSize[text.h6['font-size'] as FontSize]};\n }\n `;\n};\n\nexport const StyledHTML = styled.div(({ theme }) => {\n return css`\n width: 100%;\n overflow-x: auto;\n overflow-wrap: break-word;\n contain: paint;\n ${getHtmlStyles(theme)}\n\n ${StyledPopover} ul {\n ul {\n padding-inline-start: 0;\n }\n ol {\n padding-inline-start: 0;\n }\n }\n\n ${StyledPopover} li {\n margin: 0;\n }\n `;\n});\n\nStyledHTML.defaultProps = defaultThemeProp;\n\nif (DOMPurify.isSupported) {\n const targetBlankSet = new WeakSet<HTMLAnchorElement>();\n\n DOMPurify.addHook('beforeSanitizeAttributes', node => {\n // Can be passed text nodes\n if (!(node instanceof HTMLElement \|\| node instanceof SVGElement)) return;\n\n node.removeAttribute('class');\n\n if (\n node.tagName === 'A' &&\n node.hasAttribute('href') &&\n node.getAttribute('target') === '_blank'\n ) {\n targetBlankSet.add(node as HTMLAnchorElement);\n }\n });\n\n DOMPurify.addHook('afterSanitizeAttributes', node => {\n if (node.tagName === 'A' && node.hasAttribute('href')) {\n const href = node.getAttribute('href')!;\n\n let fullURL: URL;\n try {\n fullURL = new URL(href, window.location.href);\n } catch (e) {\n return;\n }\n\n if (!sameOrigin(window.location, fullURL)) {\n node.setAttribute('target', '_blank');\n node.setAttribute('rel', 'noopener');\n } else if (targetBlankSet.has(node as HTMLAnchorElement)) {\n node.setAttribute('target', '_blank');\n targetBlankSet.delete(node as HTMLAnchorElement);\n }\n }\n });\n}\n\nconst HTML: FunctionComponent<HTMLProps & ForwardProps> = forwardRef(function HTML(\n { testId, content, customTags, ...restProps }: PropsWithoutRef<HTMLProps>,\n ref: HTMLProps['ref']\n) {\n const [mounted, setMounted] = useState(false);\n const sanitizedHtml = useMemo(() => {\n // Don't render content on the server at all.\n return mounted && DOMPurify.isSupported\n ? DOMPurify.sanitize(content, {\n FORBID_TAGS: ['style'],\n CUSTOM_ELEMENT_HANDLING: {\n tagNameCheck: customTags ? tagName => customTags.includes(tagName) : undefined\n }\n })\n : '';\n }, [content, customTags, mounted]);\n const testIds = useTestIds(testId, getHTMLTestIds);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n return (\n <StyledHTML\n data-testid={testIds.root}\n {...restProps}\n dangerouslySetInnerHTML={{ __html: sanitizedHtml }}\n ref={ref}\n />\n );\n});\n\nexport default withTestIds(HTML, getHTMLTestIds);\n"]}

package/lib/components/Lightbox/Lightbox.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import type { ForwardProps } from '../../types';
 import type { LightboxProps } from './Lightbox.types';
 declare const _default: FunctionComponent<LightboxProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination"]>;
+    getTestIds: (testIdProp?: string | undefined) => import("../../types").TestIdsRecord<readonly ["content", "name", "metadata", "download", "close", "prev", "next", "pagination", "non-previewable-download", "link"]>;
 };
 export default _default;
 //# sourceMappingURL=Lightbox.d.ts.map

package/lib/components/Lightbox/Lightbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,~~EAAE~~,iBAAiB,~~EAAoD~~,MAAM,OAAO,CAAC;~~AAGjG~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;~~AA+BhD~~,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;;;~~AAsPtD~~,wBAAyD"}
1	+ {"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAsChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;;;AAmVtD,wBAAyD"}

package/lib/components/Lightbox/Lightbox.js CHANGED Viewed

@@ -1,17 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState, forwardRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, forwardRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { cap, withTestIds } from '../../utils';
 import Flex from '../Flex';
 import MetaList from '../MetaList';
 import Icon from '../Icon';
+import Image from '../Image';
 import Text from '../Text';
 import { useConfiguration, useConsolidatedRef, useDirection, useEvent, useFocusTrap, useI18n, useScrollToggle, useTestIds } from '../../hooks';
 import ErrorState from '../ErrorState';
 import Progress from '../Progress';
-import { StyledHeader, StyledCountTracker, StyledInfo, StyledActionButton, StyledPreviewRegion, StyledNavButton, StyledImageContainer, StyledImage, StyledLiveRegion, StyledLightbox } from './Lightbox.styles';
+import FileVisual from '../File/FileVisual';
+import Button from '../Button';
+import Link from '../Link/Link';
+import mimeTypes from '../File/mimeTypes.json';
+import { getKindFromMimeType } from '../File/utils';
+import { StyledHeader, StyledCountTracker, StyledInfo, StyledPreviewRegion, StyledNavButton, StyledMediaContainer, StyledLiveRegion, StyledLightbox, StyledContainer, StyledObject } from './Lightbox.styles';
 import { getLightboxTestIds } from './Lightbox.test-ids';
-const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0, cycle, onItemLoad, onItemError, onNavigate, onItemDownload, onAfterClose, ...restProps }, refArg) {
+const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0, cycle = false, onItemLoad, onItemError, onNavigate, onItemDownload, onAfterClose, ...restProps }, refArg) {
     const t = useI18n();
     const { start, end } = useDirection();
     const { portalTarget } = useConfiguration();
@@ -24,8 +30,7 @@ const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0,
     const prevButtonRef = useRef(null);
     const nextButtonRef = useRef(null);
     const [open, setOpen] = useState(true);
-    const imageRef = useConsolidatedRef(currentItem.ref);
-    const [error, setError] = useState(false);
+    const mediaRef = useConsolidatedRef(currentItem.ref);
     const [liveText, setLiveText] = useState('');
     const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';
     const testIds = useTestIds(testId, getLightboxTestIds);
@@ -36,20 +41,16 @@ const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0,
         if (direction === 1) {
             if (currentIndex < items.length - 1) {
                 setCurrentIndex(cur => cur + 1);
-                setError(false);
             }
             else if (cycle) {
                 setCurrentIndex(0);
-                setError(false);
             }
         }
         else if (currentIndex > 0) {
             setCurrentIndex(cur => cur - 1);
-            setError(false);
         }
         else if (cycle) {
             setCurrentIndex(items.length - 1);
-            setError(false);
         }
     };
     const keyDownHandler = (e) => {
@@ -76,6 +77,58 @@ const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0,
     useEffect(() => {
         lightboxRef.current?.focus();
     }, []);
+    const handleLoad = useCallback((e) => {
+        onItemLoad?.(currentItem.id, e);
+    }, [onItemLoad, currentItem.id]);
+    const handleError = useCallback((e) => {
+        onItemError?.(currentItem.id, e);
+    }, [onItemError, currentItem.id]);
+    // Object elements appear to need native event handlers bound as JSX does not work.
+    // TODO: Follow up on reason why.
+    useEffect(() => {
+        if (!mediaRef.current || currentItem.format !== 'pdf')
+            return;
+        const pdfObject = mediaRef.current;
+        pdfObject.addEventListener('load', handleLoad);
+        pdfObject.addEventListener('error', handleError);
+        return () => {
+            pdfObject.removeEventListener('load', handleLoad);
+            pdfObject.removeEventListener('error', handleError);
+        };
+    }, [currentItem]);
+    let media;
+    let validContent;
+    let attachmentType = 'generic';
+    if (currentItem.format === undefined || currentItem.error) {
+        validContent = false;
+    }
+    else {
+        const extractMimeType = mimeTypes[currentItem.format.toLowerCase()];
+        const getType = currentItem.format === 'url' ? 'link' : 'generic';
+        attachmentType = extractMimeType ? getKindFromMimeType(extractMimeType) : getType;
+        const previewableAttachmentTypes = ['pdf', 'image', 'link'];
+        validContent = previewableAttachmentTypes.includes(attachmentType)
+            ? currentItem.src
+            : attachmentType;
+    }
+    if (validContent) {
+        const nonPreviewableContent = (_jsxs(_Fragment, { children: [_jsx(Text, { children: t('non_previewable', [currentItem.format ? currentItem.format.toUpperCase() : '']) }), onItemDownload && (_jsx(Button, { "aria-label": t('download'), onClick: () => onItemDownload(currentItem.id), "data-testid": testIds.nonPreviewableDownload, children: t('download') }))] }));
+        const defaultContent = (_jsxs(Flex, { container: { direction: 'column', gap: 2, alignItems: 'center' }, as: StyledInfo, "data-testid": testIds.content, children: [_jsx(FileVisual, { type: attachmentType, size: 'l' }), attachmentType === 'link' && currentItem.src ? (_jsx(Link, { href: currentItem.src, "data-testid": testIds.link, children: currentItem.name })) : (nonPreviewableContent)] }));
+        switch (attachmentType) {
+            case 'image':
+                media = currentItem.src && (_jsx(Image, { "data-testid": testIds.content, src: currentItem.src, alt: currentItem.description, onLoad: handleLoad, onError: handleError, ref: mediaRef }));
+                break;
+            case 'pdf':
+                media = currentItem.src && (_jsx(_Fragment, { children: navigator.pdfViewerEnabled ? (_jsx(StyledObject, { "data-testid": testIds.content, data: currentItem.src, type: 'application/pdf', ref: mediaRef, children: currentItem.description })) : ({ defaultContent }) }));
+                break;
+            default: {
+                media = defaultContent;
+            }
+        }
+    }
+    else {
+        media = _jsx(Progress, { placement: 'block', delay: true });
+    }
     const content = (_jsxs(StyledLightbox, { "data-testid": testIds.root, ...restProps, tabIndex: -1, ref: lightboxRef, open: open, role: 'dialog', "aria-modal": 'true', container: { alignItems: 'start', justify: 'start', direction: 'column' }, alpha: 0.9, variant: 'dark', transitionSpeed: 'slow', onBeforeTransitionIn: disableScroll, onAfterTransitionOut: () => {
             enableScroll();
             onAfterClose?.();
@@ -94,20 +147,14 @@ const Lightbox = forwardRef(function Lightbox({ testId, items, defaultIndex = 0,
                             justify: 'center',
                             colGap: 2,
                             rowGap: 0.5
-                        }, children: [_jsx(Text, { "data-testid": testIds.name, variant: 'primary', as: 'h2', children: currentItem.name }), currentItem.metadata && (_jsx(MetaList, { "data-testid": testIds.metadata, items: currentItem.metadata }))] }), _jsxs(Flex, { container: true, children: [onItemDownload && (_jsx(StyledActionButton, { "data-testid": testIds.download, variant: 'simple', "aria-label": t('download'), icon: true, onClick: () => onItemDownload(currentItem.id), children: _jsx(Icon, { name: 'download' }) })), _jsx(StyledActionButton, { "data-testid": testIds.close, variant: 'simple', ref: closeButtonRef, "aria-label": t('close'), icon: true, onClick: close, children: _jsx(Icon, { name: 'times' }) })] })] }), _jsxs(Flex, { container: { justify: 'between' }, as: StyledPreviewRegion, item: { grow: 1, shrink: 0 }, children: [items.length > 1 && (_jsx(StyledNavButton, { "data-testid": testIds.prev, ref: prevButtonRef, variant: 'simple', "aria-label": t('pagination_prev'), hidden: !cycle && currentIndex === 0, icon: true, onClick: () => {
+                        }, children: [_jsx(Text, { "data-testid": testIds.name, variant: 'primary', as: 'h2', children: currentItem.name }), currentItem.metadata && (_jsx(MetaList, { "data-testid": testIds.metadata, items: currentItem.metadata }))] }), _jsxs(Flex, { container: true, as: StyledContainer, children: [attachmentType !== 'link' && onItemDownload && (_jsx(Button, { "data-testid": testIds.download, variant: 'simple', "aria-label": t('download'), icon: true, onClick: () => onItemDownload(currentItem.id), children: _jsx(Icon, { name: 'download' }) })), _jsx(Button, { "data-testid": testIds.close, variant: 'simple', ref: closeButtonRef, "aria-label": t('close'), icon: true, onClick: close, children: _jsx(Icon, { name: 'times' }) })] })] }), _jsxs(Flex, { container: { justify: 'between' }, as: StyledPreviewRegion, item: { grow: 1, shrink: 0 }, children: [items.length > 1 && (_jsx(StyledNavButton, { "data-testid": testIds.prev, ref: prevButtonRef, variant: 'simple', "aria-label": t('pagination_prev'), hidden: !cycle && currentIndex === 0, icon: true, onClick: () => {
                             navigate(-1);
-                        }, children: _jsx("span", { children: _jsx(Icon, { name: 'caret-left' }) }) })), _jsx(Flex, { item: { grow: 1 }, as: StyledImageContainer, children: _jsxs(Flex, { container: { alignItems: 'center' }, onMouseDown: (e) => {
+                        }, children: _jsx("span", { children: _jsx(Icon, { name: 'caret-left' }) }) })), _jsx(Flex, { item: { grow: 1 }, as: StyledMediaContainer, children: _jsx(Flex, { container: { alignItems: 'center', justify: 'center' }, onMouseDown: (e) => {
                                 if (e.button !== 0)
                                     return;
                                 if (e.target === e.currentTarget)
                                     close();
-                            }, children: [error && _jsx(ErrorState, { message: t('image_load_error') }), !error &&
-                                    (currentItem.src ? (_jsx(StyledImage, { "data-testid": testIds.content, ref: imageRef, src: currentItem.src, alt: currentItem.description, onLoad: (e) => {
-                                            onItemLoad?.(currentItem.id, e);
-                                        }, onError: (e) => {
-                                            onItemError?.(currentItem.id, e);
-                                            setError(true);
-                                        } })) : (_jsx(Progress, { placement: 'block', delay: true })))] }) }), items.length > 1 && (_jsx(StyledNavButton, { "data-testid": testIds.next, ref: nextButtonRef, variant: 'simple', "aria-label": t('pagination_next'), hidden: !cycle && currentIndex === items.length - 1, icon: true, onClick: () => {
+                            }, children: currentItem.error ? _jsx(ErrorState, { message: t('content_load_error') }) : media }) }), items.length > 1 && (_jsx(StyledNavButton, { "data-testid": testIds.next, ref: nextButtonRef, variant: 'simple', "aria-label": t('pagination_next'), hidden: !cycle && currentIndex === items.length - 1, icon: true, onClick: () => {
                             navigate(1);
                         }, children: _jsx("span", { children: _jsx(Icon, { name: 'caret-right' }) }) }))] }), _jsx(StyledLiveRegion, { "aria-live": 'polite', "aria-label": liveText })] }));
     return portalTarget ? createPortal(content, portalTarget) : content;

package/lib/components/Lightbox/Lightbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, MouseEvent, SyntheticEvent } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { ForwardProps } from '../../types';\nimport { cap, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport MetaList from '../MetaList';\nimport Icon from '../Icon';\nimport Text from '../Text';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useDirection,\n useEvent,\n useFocusTrap,\n useI18n,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport ErrorState from '../ErrorState';\nimport Progress from '../Progress';\n\nimport {\n StyledHeader,\n StyledCountTracker,\n StyledInfo,\n StyledActionButton,\n StyledPreviewRegion,\n StyledNavButton,\n StyledImageContainer,\n StyledImage,\n StyledLiveRegion,\n StyledLightbox\n} from './Lightbox.styles';\nimport type { LightboxProps } from './Lightbox.types';\nimport { getLightboxTestIds } from './Lightbox.test-ids';\n\nconst Lightbox: FunctionComponent<LightboxProps & ForwardProps> = forwardRef(function Lightbox(\n {\n testId,\n items,\n defaultIndex = 0,\n cycle,\n onItemLoad,\n onItemError,\n onNavigate,\n onItemDownload,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<LightboxProps>,\n refArg: Ref<HTMLDivElement>\n) {\n const t = useI18n();\n const { start, end } = useDirection();\n const { portalTarget } = useConfiguration();\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const currentItem = items[currentIndex];\n const { disableScroll, enableScroll } = useScrollToggle();\n const lightboxRef = useConsolidatedRef(refArg);\n const headerRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const prevButtonRef = useRef<HTMLButtonElement>(null);\n const nextButtonRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(true);\n const imageRef = useConsolidatedRef(currentItem.ref);\n const [error, setError] = useState(false);\n const [liveText, setLiveText] = useState('');\n const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';\n const testIds = useTestIds(testId, getLightboxTestIds);\n\n const close = () => {\n setOpen(false);\n };\n\n const navigate = (direction: 1 \| -1) => {\n if (direction === 1) {\n if (currentIndex < items.length - 1) {\n setCurrentIndex(cur => cur + 1);\n setError(false);\n } else if (cycle) {\n setCurrentIndex(0);\n setError(false);\n }\n } else if (currentIndex > 0) {\n setCurrentIndex(cur => cur - 1);\n setError(false);\n } else if (cycle) {\n setCurrentIndex(items.length - 1);\n setError(false);\n }\n };\n const keyDownHandler = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n close();\n } else if (e.key === `Arrow${cap(end)}`) {\n navigate(1);\n } else if (e.key === `Arrow${cap(start)}`) {\n navigate(-1);\n }\n };\n\n useEvent('keydown', keyDownHandler);\n useFocusTrap(lightboxRef);\n\n useEffect(() => {\n setLiveText(\n `${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''} ${\n currentItem.description\n }.`\n );\n }, [currentItem.name, countTrackerText, currentItem.description]);\n\n useEffect(() => {\n onNavigate?.(currentItem.id, currentIndex);\n }, [currentIndex]);\n\n useEffect(() => {\n lightboxRef.current?.focus();\n }, []);\n\n const content = (\n <StyledLightbox\n data-testid={testIds.root}\n {...restProps}\n tabIndex={-1}\n ref={lightboxRef}\n open={open}\n role='dialog'\n aria-modal='true'\n container={{ alignItems: 'start', justify: 'start', direction: 'column' }}\n alpha={0.9}\n variant='dark'\n transitionSpeed='slow'\n onBeforeTransitionIn={disableScroll}\n onAfterTransitionOut={() => {\n enableScroll();\n onAfterClose?.();\n }}\n >\n <Flex\n as={StyledHeader}\n ref={headerRef}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 2\n }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n <StyledCountTracker data-testid={testIds.pagination} aria-hidden='true'>\n {countTrackerText}\n </StyledCountTracker>\n\n <Flex\n as={StyledInfo}\n container={{\n wrap: 'wrap',\n alignItems: 'center',\n justify: 'center',\n colGap: 2,\n rowGap: 0.5\n }}\n >\n <Text data-testid={testIds.name} variant='primary' as='h2'>\n {currentItem.name}\n </Text>\n {currentItem.metadata && (\n <MetaList data-testid={testIds.metadata} items={currentItem.metadata} />\n )}\n </Flex>\n\n <Flex container>\n {onItemDownload && (\n <StyledActionButton\n data-testid={testIds.download}\n variant='simple'\n aria-label={t('download')}\n icon\n onClick={() => onItemDownload(currentItem.id)}\n >\n <Icon name='download' />\n </StyledActionButton>\n )}\n <StyledActionButton\n data-testid={testIds.close}\n variant='simple'\n ref={closeButtonRef}\n aria-label={t('close')}\n icon\n onClick={close}\n >\n <Icon name='times' />\n </StyledActionButton>\n </Flex>\n </Flex>\n\n <Flex\n container={{ justify: 'between' }}\n as={StyledPreviewRegion}\n item={{ grow: 1, shrink: 0 }}\n >\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.prev}\n ref={prevButtonRef}\n variant='simple'\n aria-label={t('pagination_prev')}\n hidden={!cycle && currentIndex === 0}\n icon\n onClick={() => {\n navigate(-1);\n }}\n >\n <span>\n <Icon name='caret-left' />\n </span>\n </StyledNavButton>\n )}\n\n <Flex item={{ grow: 1 }} as={StyledImageContainer}>\n <Flex\n container={{ alignItems: 'center' }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n {error && <ErrorState message={t('image_load_error')} />}\n\n {!error &&\n (currentItem.src ? (\n <StyledImage\n data-testid={testIds.content}\n ref={imageRef}\n src={currentItem.src}\n alt={currentItem.description}\n onLoad={(e: SyntheticEvent<HTMLImageElement>) => {\n onItemLoad?.(currentItem.id, e);\n }}\n onError={(e: SyntheticEvent<HTMLImageElement>) => {\n onItemError?.(currentItem.id, e);\n setError(true);\n }}\n />\n ) : (\n <Progress placement='block' delay />\n ))}\n </Flex>\n </Flex>\n\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.next}\n ref={nextButtonRef}\n variant='simple'\n aria-label={t('pagination_next')}\n hidden={!cycle && currentIndex === items.length - 1}\n icon\n onClick={() => {\n navigate(1);\n }}\n >\n <span>\n <Icon name='caret-right' />\n </span>\n </StyledNavButton>\n )}\n </Flex>\n <StyledLiveRegion aria-live='polite' aria-label={liveText} />\n </StyledLightbox>\n );\n\n return portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default withTestIds(Lightbox, getLightboxTestIds);\n"]}
1	+ {"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, forwardRef, useCallback } from 'react';\nimport type {\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n MouseEvent,\n SyntheticEvent,\n RefObject\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { ForwardProps } from '../../types';\nimport { cap, withTestIds } from '../../utils';\nimport Flex from '../Flex';\nimport MetaList from '../MetaList';\nimport Icon from '../Icon';\nimport Image from '../Image';\nimport Text from '../Text';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useDirection,\n useEvent,\n useFocusTrap,\n useI18n,\n useScrollToggle,\n useTestIds\n} from '../../hooks';\nimport ErrorState from '../ErrorState';\nimport Progress from '../Progress';\nimport FileVisual from '../File/FileVisual';\nimport Button from '../Button';\nimport Link from '../Link/Link';\nimport mimeTypes from '../File/mimeTypes.json';\nimport { getKindFromMimeType } from '../File/utils';\nimport type { AttachmentType } from '../File/utils';\n\nimport {\n StyledHeader,\n StyledCountTracker,\n StyledInfo,\n StyledPreviewRegion,\n StyledNavButton,\n StyledMediaContainer,\n StyledLiveRegion,\n StyledLightbox,\n StyledContainer,\n StyledObject\n} from './Lightbox.styles';\nimport type { LightboxProps } from './Lightbox.types';\nimport { getLightboxTestIds } from './Lightbox.test-ids';\n\nconst Lightbox: FunctionComponent<LightboxProps & ForwardProps> = forwardRef(function Lightbox(\n {\n testId,\n items,\n defaultIndex = 0,\n cycle = false,\n onItemLoad,\n onItemError,\n onNavigate,\n onItemDownload,\n onAfterClose,\n ...restProps\n }: PropsWithoutRef<LightboxProps>,\n refArg: Ref<HTMLDivElement>\n) {\n const t = useI18n();\n const { start, end } = useDirection();\n const { portalTarget } = useConfiguration();\n const [currentIndex, setCurrentIndex] = useState(defaultIndex);\n const currentItem = items[currentIndex];\n const { disableScroll, enableScroll } = useScrollToggle();\n const lightboxRef = useConsolidatedRef(refArg);\n const headerRef = useRef<HTMLDivElement>(null);\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n const prevButtonRef = useRef<HTMLButtonElement>(null);\n const nextButtonRef = useRef<HTMLButtonElement>(null);\n const [open, setOpen] = useState(true);\n const mediaRef = useConsolidatedRef(currentItem.ref);\n const [liveText, setLiveText] = useState('');\n const countTrackerText = items.length > 1 ? t('x_of_y', [currentIndex + 1, items.length]) : '';\n const testIds = useTestIds(testId, getLightboxTestIds);\n\n const close = () => {\n setOpen(false);\n };\n\n const navigate = (direction: 1 \| -1) => {\n if (direction === 1) {\n if (currentIndex < items.length - 1) {\n setCurrentIndex(cur => cur + 1);\n } else if (cycle) {\n setCurrentIndex(0);\n }\n } else if (currentIndex > 0) {\n setCurrentIndex(cur => cur - 1);\n } else if (cycle) {\n setCurrentIndex(items.length - 1);\n }\n };\n const keyDownHandler = (e: KeyboardEvent) => {\n if (e.repeat) return;\n\n if (e.key === 'Escape') {\n close();\n } else if (e.key === `Arrow${cap(end)}`) {\n navigate(1);\n } else if (e.key === `Arrow${cap(start)}`) {\n navigate(-1);\n }\n };\n\n useEvent('keydown', keyDownHandler);\n useFocusTrap(lightboxRef);\n\n useEffect(() => {\n setLiveText(\n `${currentItem.name}. ${countTrackerText ? `${countTrackerText}.` : ''} ${\n currentItem.description\n }.`\n );\n }, [currentItem.name, countTrackerText, currentItem.description]);\n\n useEffect(() => {\n onNavigate?.(currentItem.id, currentIndex);\n }, [currentIndex]);\n\n useEffect(() => {\n lightboxRef.current?.focus();\n }, []);\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<HTMLImageElement \| HTMLObjectElement> \| Event) => {\n onItemLoad?.(currentItem.id, e);\n },\n [onItemLoad, currentItem.id]\n );\n\n const handleError = useCallback(\n (e: SyntheticEvent<HTMLImageElement \| HTMLObjectElement> \| Event) => {\n onItemError?.(currentItem.id, e);\n },\n [onItemError, currentItem.id]\n );\n\n // Object elements appear to need native event handlers bound as JSX does not work.\n // TODO: Follow up on reason why.\n useEffect(() => {\n if (!mediaRef.current \|\| currentItem.format !== 'pdf') return;\n const pdfObject = mediaRef.current;\n pdfObject.addEventListener('load', handleLoad);\n pdfObject.addEventListener('error', handleError);\n\n return () => {\n pdfObject.removeEventListener('load', handleLoad);\n pdfObject.removeEventListener('error', handleError);\n };\n }, [currentItem]);\n\n let media;\n let validContent;\n let attachmentType: AttachmentType = 'generic';\n if (currentItem.format === undefined \|\| currentItem.error) {\n validContent = false;\n } else {\n const extractMimeType = (mimeTypes as Record<string, string>)[currentItem.format.toLowerCase()];\n const getType = currentItem.format === 'url' ? 'link' : 'generic';\n attachmentType = extractMimeType ? getKindFromMimeType(extractMimeType) : getType;\n const previewableAttachmentTypes = ['pdf', 'image', 'link'];\n validContent = previewableAttachmentTypes.includes(attachmentType)\n ? currentItem.src\n : attachmentType;\n }\n\n if (validContent) {\n const nonPreviewableContent = (\n <>\n <Text>\n {t('non_previewable', [currentItem.format ? currentItem.format.toUpperCase() : ''])}\n </Text>\n {onItemDownload && (\n <Button\n aria-label={t('download')}\n onClick={() => onItemDownload(currentItem.id)}\n data-testid={testIds.nonPreviewableDownload}\n >\n {t('download')}\n </Button>\n )}\n </>\n );\n\n const defaultContent = (\n <Flex\n container={{ direction: 'column', gap: 2, alignItems: 'center' }}\n as={StyledInfo}\n data-testid={testIds.content}\n >\n <FileVisual type={attachmentType} size='l' />\n {attachmentType === 'link' && currentItem.src ? (\n <Link href={currentItem.src} data-testid={testIds.link}>\n {currentItem.name}\n </Link>\n ) : (\n nonPreviewableContent\n )}\n </Flex>\n );\n\n switch (attachmentType) {\n case 'image':\n media = currentItem.src && (\n <Image\n data-testid={testIds.content}\n src={currentItem.src}\n alt={currentItem.description}\n onLoad={handleLoad}\n onError={handleError}\n ref={mediaRef as RefObject<HTMLImageElement>}\n />\n );\n break;\n case 'pdf':\n media = currentItem.src && (\n <>\n {navigator.pdfViewerEnabled ? (\n <StyledObject\n data-testid={testIds.content}\n data={currentItem.src}\n type='application/pdf'\n ref={mediaRef as RefObject<HTMLObjectElement>}\n >\n {currentItem.description}\n </StyledObject>\n ) : (\n { defaultContent }\n )}\n </>\n );\n break;\n default: {\n media = defaultContent;\n }\n }\n } else {\n media = <Progress placement='block' delay />;\n }\n\n const content = (\n <StyledLightbox\n data-testid={testIds.root}\n {...restProps}\n tabIndex={-1}\n ref={lightboxRef}\n open={open}\n role='dialog'\n aria-modal='true'\n container={{ alignItems: 'start', justify: 'start', direction: 'column' }}\n alpha={0.9}\n variant='dark'\n transitionSpeed='slow'\n onBeforeTransitionIn={disableScroll}\n onAfterTransitionOut={() => {\n enableScroll();\n onAfterClose?.();\n }}\n >\n <Flex\n as={StyledHeader}\n ref={headerRef}\n container={{\n justify: 'between',\n alignItems: 'center',\n gap: 2\n }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n <StyledCountTracker data-testid={testIds.pagination} aria-hidden='true'>\n {countTrackerText}\n </StyledCountTracker>\n\n <Flex\n as={StyledInfo}\n container={{\n wrap: 'wrap',\n alignItems: 'center',\n justify: 'center',\n colGap: 2,\n rowGap: 0.5\n }}\n >\n <Text data-testid={testIds.name} variant='primary' as='h2'>\n {currentItem.name}\n </Text>\n {currentItem.metadata && (\n <MetaList data-testid={testIds.metadata} items={currentItem.metadata} />\n )}\n </Flex>\n\n <Flex container as={StyledContainer}>\n {attachmentType !== 'link' && onItemDownload && (\n <Button\n data-testid={testIds.download}\n variant='simple'\n aria-label={t('download')}\n icon\n onClick={() => onItemDownload(currentItem.id)}\n >\n <Icon name='download' />\n </Button>\n )}\n <Button\n data-testid={testIds.close}\n variant='simple'\n ref={closeButtonRef}\n aria-label={t('close')}\n icon\n onClick={close}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n </Flex>\n\n <Flex\n container={{ justify: 'between' }}\n as={StyledPreviewRegion}\n item={{ grow: 1, shrink: 0 }}\n >\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.prev}\n ref={prevButtonRef}\n variant='simple'\n aria-label={t('pagination_prev')}\n hidden={!cycle && currentIndex === 0}\n icon\n onClick={() => {\n navigate(-1);\n }}\n >\n <span>\n <Icon name='caret-left' />\n </span>\n </StyledNavButton>\n )}\n\n <Flex item={{ grow: 1 }} as={StyledMediaContainer}>\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n onMouseDown={(e: MouseEvent<HTMLDivElement>) => {\n if (e.button !== 0) return;\n if (e.target === e.currentTarget) close();\n }}\n >\n {currentItem.error ? <ErrorState message={t('content_load_error')} /> : media}\n </Flex>\n </Flex>\n\n {items.length > 1 && (\n <StyledNavButton\n data-testid={testIds.next}\n ref={nextButtonRef}\n variant='simple'\n aria-label={t('pagination_next')}\n hidden={!cycle && currentIndex === items.length - 1}\n icon\n onClick={() => {\n navigate(1);\n }}\n >\n <span>\n <Icon name='caret-right' />\n </span>\n </StyledNavButton>\n )}\n </Flex>\n <StyledLiveRegion aria-live='polite' aria-label={liveText} />\n </StyledLightbox>\n );\n\n return portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default withTestIds(Lightbox, getLightboxTestIds);\n"]}

package/lib/components/Lightbox/Lightbox.styles.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ export declare const StyledHeader: import("styled-components").StyledComponent<"
 export declare const StyledCountTracker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledNavButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledActionButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMediaContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledObject: import("styled-components").StyledComponent<"object", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPreviewRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Image").ImageProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLiveRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledLightbox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Backdrop").BackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     getTestIds: (testIdProp?: string | undefined) => import("../..").TestIdsRecord<readonly []>;

package/lib/components/Lightbox/Lightbox.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"~~AAgBA~~,eAAO,MAAM,YAAY,4GAkBvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,~~yGAKrB~~,CAAC;AAIH,eAAO,MAAM,eAAe,oNAgE1B,CAAC;AAIH,eAAO,MAAM,~~kBAAkB~~,~~qMAS7B~~,CAAC;AAIH,eAAO,MAAM,oBAAoB,~~yGAkB~~/B,CAAC;~~AAIH~~,eAAO,MAAM,~~mBAAmB~~,~~yGAG/B~~,CAAC;~~AAEF~~,eAAO,MAAM,~~WAAW~~,~~mMAKvB~~,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAE5B,CAAC;AAEF,eAAO,MAAM,cAAc;;uDAQzB,CAAC"}
1	+ {"version":3,"file":"Lightbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,4GAkBvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAY7B,CAAC;AAIH,eAAO,MAAM,UAAU,yGAUrB,CAAC;AAIH,eAAO,MAAM,eAAe,oNAgE1B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAW1B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAyB/B,CAAC;AAEH,eAAO,MAAM,YAAY,4GAKxB,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGAG/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAE5B,CAAC;AAEF,eAAO,MAAM,cAAc;;uDAQzB,CAAC"}

package/lib/components/Lightbox/Lightbox.styles.js CHANGED Viewed

@@ -3,8 +3,6 @@ import { hideVisually, rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { calculateFontSize } from '../../styles';
-import Image from '../Image';
-import Button from '../Button';
 import BareButton from '../Button/BareButton';
 import { StyledIcon } from '../Icon';
 import { StyledMetaList } from '../MetaList/MetaList';
@@ -12,6 +10,7 @@ import { StyledErrorState } from '../ErrorState';
 import { StyledText } from '../Text';
 import { useDirection } from '../../hooks';
 import Backdrop from '../Backdrop';
+import { StyledLink } from '../Link/Link';
 export const StyledHeader = styled.header(({ theme }) => {
     const color = tryCatch(() => rgba(theme.base.palette.light, theme.base.transparency['transparent-2']));
     return css `
@@ -46,6 +45,11 @@ export const StyledInfo = styled.div(({ theme }) => {
     return css `
     color: ${theme.base.palette.light};
     font-weight: ${theme.base['font-weight']['semi-bold']};
+    ${StyledLink} {
+      color: inherit;
+      text-decoration: underline;
+    }
   `;
 });
 StyledInfo.defaultProps = defaultThemeProp;
@@ -114,18 +118,20 @@ export const StyledNavButton = styled(BareButton)(({ theme }) => {
   `;
 });
 StyledNavButton.defaultProps = defaultThemeProp;
-export const StyledActionButton = styled(Button)(({ theme }) => {
+export const StyledContainer = styled.div(({ theme }) => {
     return css `
-    padding: ${theme.base.spacing};
-    color: ${theme.base.palette.light};
+    button {
+      padding: ${theme.base.spacing};
+      color: ${theme.base.palette.light};
-    &:focus:enabled {
-      box-shadow: ${theme.base.shadow.focus};
+      &:focus:enabled {
+        box-shadow: ${theme.base.shadow.focus};
+      }
     }
   `;
 });
-StyledActionButton.defaultProps = defaultThemeProp;
-export const StyledImageContainer = styled.div(({ theme }) => {
+StyledContainer.defaultProps = defaultThemeProp;
+export const StyledMediaContainer = styled.div(({ theme }) => {
     return css `
     position: relative;
@@ -142,19 +148,26 @@ export const StyledImageContainer = styled.div(({ theme }) => {
         color: ${theme.base.palette.light};
       }
     }
+    img {
+      display: block;
+      max-width: 100%;
+      max-height: 100%;
+      margin: auto;
+    }
   `;
 });
-StyledImageContainer.defaultProps = defaultThemeProp;
+export const StyledObject = styled.object `
+  display: block;
+  margin: auto;
+  width: calc(100% - 5rem);
+  height: 100%;
+`;
+StyledMediaContainer.defaultProps = defaultThemeProp;
 export const StyledPreviewRegion = styled.div `
   position: relative;
   width: 100%;
 `;
-export const StyledImage = styled(Image) `
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  margin: auto;
-`;
 export const StyledLiveRegion = styled.div `
   ${hideVisually}
 `;

package/lib/components/Lightbox/Lightbox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,~~KAAK,MAAM,~~UAAU,~~CAAC;AAC7B,OAAO,~~MAAM,~~MAAM,WAAW,CAAC;AAC/B,OAAO,UAAU,MAAM,~~sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,QAAQ,MAAM,aAAa,CAAC;~~AAEnC~~,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,MAAM,KAAK,GAAuB,QAAQ,CAAC,GAAG,EAAE,CAC9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CACzE,CAAC;IAEF,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,OAAO;aACpB,KAAK;;MAEZ,cAAc;;;iBAGH,KAAK;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;iBACK,QAAQ,CAAC,EAAE;;0BAEF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;4BAGjC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;GAE7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;mBAClB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC~~;GACtD~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,EAAE,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;;iBAIK,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;aACvC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;mBAKhC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;;;0BAS7B,EAAE;;QAEpB,UAAU;iBACD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;;UAI/B,GAAG;QACL,GAAG,CAAA;;SAEF;;;;;;;;wCAQ+B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;sCAC7B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;0CAQvB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;wCAC7B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;0BAKzC,OAAO;;;;oBAIb,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,~~kBAAkB~~,GAAG,MAAM,CAAC,~~MAAM~~,CAAC,CAAC,~~CAAC,~~EAAE,KAAK,EAAE,EAAE,EAAE;~~IAC7D~~,OAAO,GAAG,CAAA~~;eACG~~,KAAK,CAAC,IAAI,CAAC,OAAO;~~aACpB~~,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;;;~~oBAGjB~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK~~;;GAExC~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,~~kBAAkB~~,CAAC,YAAY,GAAG,gBAAgB,CAAC;~~AAEnD~~,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;;;;;;kCAMsB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;MAI9C,gBAAgB;;YAEV,UAAU;iBACL,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK~~;;;GAGtC~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,~~oBAAoB~~,CAAC,YAAY,GAAG,~~gBAAgB,CAAC;AAErD,~~MAAM,CAAC,MAAM,~~mBAAmB~~,~~GAAG~~,~~MAAM~~,CAAC,GAAG,~~CAAA;;;CAG5C~~,CAAC;~~AAEF~~,MAAM,CAAC,MAAM,~~WAAW~~,GAAG,MAAM,CAAC,~~KAAK~~,~~CAAC,~~CAAA~~;;;;;CAKvC~~,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,YAAY;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG;;;;;GAKrC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport ~~Image from '../Image';\nimport Button from '../Button';\nimport~~ BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n const color: string \| undefined = tryCatch(() =>\n rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n );\n\n return css`\n position: relative;\n width: 100%;\n padding: ${theme.base.spacing};\n color: ${color};\n\n ${StyledMetaList} {\n justify-content: center;\n li {\n color: ${color};\n }\n }\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize.xs};\n text-align: center;\n min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n }\n `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n return css`\n color: ${theme.base.palette.light};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n const { rtl } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block: 0;\n min-width: ${theme.base['hit-area']['mouse-min']};\n color: ${theme.base.palette['foreground-color']};\n box-shadow: none;\n border-radius: 0;\n\n @media (pointer: coarse) {\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n &[hidden] {\n display: none;\n }\n\n & > span {\n display: inline-block;\n background-color: ${bg};\n\n ${StyledIcon} {\n color: ${theme.base.palette.light};\n width: 2rem;\n height: 3rem;\n\n ${rtl &&\n css`\n transform: rotateZ(180deg);\n `}\n }\n }\n\n &:nth-of-type(1) {\n inset-inline-start: 0;\n text-align: start;\n & > span {\n border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:nth-of-type(2) {\n inset-inline-end: 0;\n text-align: end;\n & > span {\n border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:hover > span {\n background-color: ${hoverBg};\n }\n\n &:focus > span {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const ~~StyledActionButton~~ = styled(~~Button)~~(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n color: ${theme.base.palette.light};\n\n &:focus:enabled {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\~~nStyledActionButton~~.defaultProps = defaultThemeProp;\n\nexport const ~~StyledImageContainer~~ = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n & > div {\n position: absolute;\n inset-block-start: 0;\n inset-block-end: calc(2 * ${theme.base.spacing});\n inset-inline: 0;\n }\n\n ${StyledErrorState} {\n margin: auto;\n & > ${StyledText} {\n color: ${theme.base.palette.light};\n }\n }\n `;\n});\n\~~nStyledImageContainer.defaultProps = defaultThemeProp;\n\~~nexport const ~~StyledPreviewRegion~~ = styled.~~div~~`\n ~~position~~: ~~relative~~;\n width: 100%;\n`;\n\nexport const ~~StyledImage~~ = styled~~(Image)~~`\n ~~display~~: ~~block~~;\n ~~max-~~width: 100%;\n ~~max-height: 100%;\n margin: auto;\n~~`;\n\nexport const StyledLiveRegion = styled.div`\n ${hideVisually}\n`;\n\nexport const StyledLightbox = styled(Backdrop)(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].max};\n\n &:focus {\n outline: none;\n }\n `;\n});\n\nStyledLightbox.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Lightbox.styles.js","sourceRoot":"","sources":["../../../src/components/Lightbox/Lightbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize } from '../../styles';\nimport BareButton from '../Button/BareButton';\nimport { StyledIcon } from '../Icon';\nimport { StyledMetaList } from '../MetaList/MetaList';\nimport { StyledErrorState } from '../ErrorState';\nimport { StyledText } from '../Text';\nimport { useDirection } from '../../hooks';\nimport Backdrop from '../Backdrop';\nimport { StyledLink } from '../Link/Link';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n const color: string \| undefined = tryCatch(() =>\n rgba(theme.base.palette.light, theme.base.transparency['transparent-2'])\n );\n\n return css`\n position: relative;\n width: 100%;\n padding: ${theme.base.spacing};\n color: ${color};\n\n ${StyledMetaList} {\n justify-content: center;\n li {\n color: ${color};\n }\n }\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCountTracker = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n font-size: ${fontSize.xs};\n text-align: center;\n min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n min-width: calc(2 * ${theme.base['hit-area']['finger-min']});\n }\n `;\n});\n\nStyledCountTracker.defaultProps = defaultThemeProp;\n\nexport const StyledInfo = styled.div(({ theme }) => {\n return css`\n color: ${theme.base.palette.light};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n\n ${StyledLink} {\n color: inherit;\n text-decoration: underline;\n }\n `;\n});\n\nStyledInfo.defaultProps = defaultThemeProp;\n\nexport const StyledNavButton = styled(BareButton)(({ theme }) => {\n const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));\n const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));\n const { rtl } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block: 0;\n min-width: ${theme.base['hit-area']['mouse-min']};\n color: ${theme.base.palette['foreground-color']};\n box-shadow: none;\n border-radius: 0;\n\n @media (pointer: coarse) {\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n &[hidden] {\n display: none;\n }\n\n & > span {\n display: inline-block;\n background-color: ${bg};\n\n ${StyledIcon} {\n color: ${theme.base.palette.light};\n width: 2rem;\n height: 3rem;\n\n ${rtl &&\n css`\n transform: rotateZ(180deg);\n `}\n }\n }\n\n &:nth-of-type(1) {\n inset-inline-start: 0;\n text-align: start;\n & > span {\n border-start-end-radius: calc(${theme.base['border-radius']} / 2);\n border-end-end-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:nth-of-type(2) {\n inset-inline-end: 0;\n text-align: end;\n & > span {\n border-start-start-radius: calc(${theme.base['border-radius']} / 2);\n border-end-start-radius: calc(${theme.base['border-radius']} / 2);\n }\n }\n\n &:hover > span {\n background-color: ${hoverBg};\n }\n\n &:focus > span {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledNavButton.defaultProps = defaultThemeProp;\n\nexport const StyledContainer = styled.div(({ theme }) => {\n return css`\n button {\n padding: ${theme.base.spacing};\n color: ${theme.base.palette.light};\n\n &:focus:enabled {\n box-shadow: ${theme.base.shadow.focus};\n }\n }\n `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMediaContainer = styled.div(({ theme }) => {\n return css`\n position: relative;\n\n & > div {\n position: absolute;\n inset-block-start: 0;\n inset-block-end: calc(2 * ${theme.base.spacing});\n inset-inline: 0;\n }\n\n ${StyledErrorState} {\n margin: auto;\n & > ${StyledText} {\n color: ${theme.base.palette.light};\n }\n }\n\n img {\n display: block;\n max-width: 100%;\n max-height: 100%;\n margin: auto;\n }\n `;\n});\n\nexport const StyledObject = styled.object`\n display: block;\n margin: auto;\n width: calc(100% - 5rem);\n height: 100%;\n`;\n\nStyledMediaContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewRegion = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const StyledLiveRegion = styled.div`\n ${hideVisually}\n`;\n\nexport const StyledLightbox = styled(Backdrop)(({ theme }) => {\n return css`\n z-index: ${theme.base['z-index'].max};\n\n &:focus {\n outline: none;\n }\n `;\n});\n\nStyledLightbox.defaultProps = defaultThemeProp;\n"]}