@itwin/itwinui-react
Version:
A react component library for iTwinUI
65 lines (64 loc) • 1.86 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', {
value: true,
});
Object.defineProperty(exports, 'VisuallyHidden', {
enumerable: true,
get: function () {
return VisuallyHidden;
},
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
require('classnames'),
);
const _index = require('../../utils/index.js');
const VisuallyHidden = _react.forwardRef((props, ref) => {
let {
as: asProp = 'span',
className,
unhideOnFocus = true,
children: childrenProp,
...rest
} = props;
let isHydrated = 'hydrated' === (0, _index.useHydration)();
let children = ['div', 'span', 'p'].includes(asProp)
? _react.createElement(
_react.Fragment,
null,
_react.createElement(
_index.ShadowRoot,
{
css: css,
},
_react.createElement('slot', null),
),
isHydrated && childrenProp,
)
: childrenProp;
return _react.createElement(
_index.Box,
{
as: asProp,
className: (0, _classnames.default)('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';
const 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;
}
`;