Files F102325607

NotchedOutline.js
No OneTemporary
Actions

Subscribers

None

File Metadata

Created: Wed, Feb 19, 13:16

NotchedOutline.js
View Options

	import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
	import _extends from "@babel/runtime/helpers/esm/extends";
	var _span;
	const _excluded = ["children", "classes", "className", "label", "notched"];
	import * as React from 'react';
	import PropTypes from 'prop-types';
	import styled from '../styles/styled';
	import { jsx as _jsx } from "react/jsx-runtime";
	const NotchedOutlineRoot = styled('fieldset')({
	textAlign: 'left',
	position: 'absolute',
	bottom: 0,
	right: 0,
	top: -5,
	left: 0,
	margin: 0,
	padding: '0 8px',
	pointerEvents: 'none',
	borderRadius: 'inherit',
	borderStyle: 'solid',
	borderWidth: 1,
	overflow: 'hidden',
	minWidth: '0%'
	});
	const NotchedOutlineLegend = styled('legend')(({
	ownerState,
	theme
	}) => _extends({
	float: 'unset',
	// Fix conflict with bootstrap
	width: 'auto',
	// Fix conflict with bootstrap
	overflow: 'hidden'
	}, !ownerState.withLabel && {
	padding: 0,
	lineHeight: '11px',
	// sync with `height` in `legend` styles
	transition: theme.transitions.create('width', {
	duration: 150,
	easing: theme.transitions.easing.easeOut
	})
	}, ownerState.withLabel && _extends({
	display: 'block',
	// Fix conflict with normalize.css and sanitize.css
	padding: 0,
	height: 11,
	// sync with `lineHeight` in `legend` styles
	fontSize: '0.75em',
	visibility: 'hidden',
	maxWidth: 0.01,
	transition: theme.transitions.create('max-width', {
	duration: 50,
	easing: theme.transitions.easing.easeOut
	}),
	whiteSpace: 'nowrap',
	'& > span': {
	paddingLeft: 5,
	paddingRight: 5,
	display: 'inline-block',
	opacity: 0,
	visibility: 'visible'
	}
	}, ownerState.notched && {
	maxWidth: '100%',
	transition: theme.transitions.create('max-width', {
	duration: 100,
	easing: theme.transitions.easing.easeOut,
	delay: 50
	})
	})));

	/**
	* @ignore - internal component.
	*/
	export default function NotchedOutline(props) {
	const {
	className,
	label,
	notched
	} = props,
	other = _objectWithoutPropertiesLoose(props, _excluded);
	const withLabel = label != null && label !== '';
	const ownerState = _extends({}, props, {
	notched,
	withLabel
	});
	return /#__PURE__/_jsx(NotchedOutlineRoot, _extends({
	"aria-hidden": true,
	className: className,
	ownerState: ownerState
	}, other, {
	children: /#__PURE__/_jsx(NotchedOutlineLegend, {
	ownerState: ownerState,
	children: withLabel ? /#__PURE__/_jsx("span", {
	children: label
	}) : // notranslate needed while Google Translate will not fix zero-width space issue
	_span \|\| (_span = /#__PURE__/_jsx("span", {
	className: "notranslate",
	children: "\u200B"
	}))
	})
	}));
	}
	process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
	/**
	* The content of the component.
	*/
	children: PropTypes.node,
	/**
	* Override or extend the styles applied to the component.
	* See [CSS API](#css) below for more details.
	*/
	classes: PropTypes.object,
	/**
	* @ignore
	*/
	className: PropTypes.string,
	/**
	* The label.
	*/
	label: PropTypes.node,
	/**
	* If `true`, the outline is notched to accommodate the label.
	*/
	notched: PropTypes.bool.isRequired,
	/**
	* @ignore
	*/
	style: PropTypes.object
	} : void 0;

Event Timeline