@itwin/itwinui-react
Version:
A react component library for iTwinUI
51 lines (50 loc) • 1.35 kB
JavaScript
import * as React from 'react';
import cx from 'classnames';
import { Box, ShadowRoot, useHydration } from '../../utils/index.js';
export const VisuallyHidden = React.forwardRef((props, ref) => {
let {
as: asProp = 'span',
className,
unhideOnFocus = true,
children: childrenProp,
...rest
} = props;
let isHydrated = 'hydrated' === useHydration();
let children = ['div', 'span', 'p'].includes(asProp)
? React.createElement(
React.Fragment,
null,
React.createElement(
ShadowRoot,
{
css: css,
},
React.createElement('slot', null),
),
isHydrated && childrenProp,
)
: childrenProp;
return React.createElement(
Box,
{
as: asProp,
className: cx('iui-visually-hidden', className),
'data-iui-unhide-on-focus': unhideOnFocus ? true : void 0,
ref: ref,
...rest,
},
children,
);
});
if ('development' === process.env.NODE_ENV)
VisuallyHidden.displayName = 'VisuallyHidden';
let css = `
:host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
clip-path: inset(50%) !important;
overflow: hidden !important;
position: absolute !important;
white-space: nowrap !important;
block-size: 1px !important;
inline-size: 1px !important;
}
`;