Skip to content

Commit

Permalink
fix: tests and fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
lossir authored and mshatikhin committed Nov 22, 2024
1 parent 58e64fe commit 107211c
Show file tree
Hide file tree
Showing 23 changed files with 577 additions and 114 deletions.
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,5 @@
},
"resolutions": {
"selenium-webdriver": "4.0.0-beta.4"
},
"packageManager": "[email protected]"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
import { injectGlobal, prefix } from '../../../lib/theming/Emotion';
import type { Emotion } from '@emotion/css/create-instance';

import { memoizeStyle, prefix } from '../../../lib/theming/Emotion';

export const globalClasses = prefix('colorable')({
input: 'input',
});

injectGlobal`
input.${globalClasses.input} {
display: inline-block;
background-color: transparent;
background-size: 100%;
background-repeat: repeat;
background-clip: text;
-webkit-text-fill-color: transparent;
}
`;
export const getStyles = (emotion: Emotion) =>
memoizeStyle({
input() {
return emotion.css`
&.${globalClasses.input} {
display: inline-block;
background-color: transparent;
background-size: 100%;
background-repeat: repeat;
background-clip: text;
-webkit-text-fill-color: transparent;
}
`;
},
});
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { InputElement, InputElementProps } from '../../Input';
import { forwardRefAndName } from '../../../lib/forwardRefAndName';
import { EmotionContext } from '../../../lib/theming/Emotion';

import { globalClasses } from './ColorableInputElement.styles';
import { getStyles, globalClasses } from './ColorableInputElement.styles';

export type ColorableInputElementProps = InputElementProps & {
showOnFocus?: boolean;
Expand All @@ -28,6 +28,7 @@ export const ColorableInputElement = forwardRefAndName(
const inputStyle = React.useRef<CSSStyleDeclaration>();
const theme = useContext(ThemeContext);
const emotion = useContext(EmotionContext);
const styles = getStyles(emotion);
const debouncedPaintText = useCallback(debounce(paintText), []);
const [active, setActive] = useState(true);

Expand Down Expand Up @@ -63,7 +64,12 @@ export const ColorableInputElement = forwardRefAndName(
onFocus: handleFocus,
onBlur: handleBlur,
inputRef,
className: emotion.cx(props.className, active && globalClasses.input),
className: emotion.cx(props.className, active && styles.input()),
style: {
...inputProps.style,
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
},
})}
{active && <span style={{ visibility: 'hidden', position: 'absolute', whiteSpace: 'pre' }} ref={spanRef} />}
</>
Expand Down
27 changes: 24 additions & 3 deletions packages/react-ui/components/PasswordInput/PasswordInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export interface PasswordInputProps extends Pick<AriaAttributes, 'aria-label'>,

export interface PasswordInputState {
visible: boolean;
focused: boolean;
capsLockEnabled?: boolean | null;
}

Expand Down Expand Up @@ -63,6 +64,7 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw

public state: PasswordInputState = {
visible: false,
focused: false,
capsLockEnabled: false,
};

Expand Down Expand Up @@ -170,15 +172,27 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
};

private handleToggleVisibility = () => {
this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocus);
this.setState((prevState) => ({ visible: !prevState.visible }), this.handleFocusOnInput);
};

private handleFocus = () => {
private handleFocusOnInput = () => {
if (this.input) {
this.input.focus();
}
};

private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
if (this.state.focused) {
return;
}

this.setState({ focused: true });

if (this.props.onFocus) {
this.props.onFocus(event);
}
};

private handleBlur = () => {
if (this.input) {
this.input.blur();
Expand Down Expand Up @@ -229,6 +243,12 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw

private hideSymbols = () => {
this.setState({ visible: false });

if (!this.state.focused) {
return;
}

this.setState({ focused: false });
};

private renderMain = (props: CommonWrapperRestProps<PasswordInputProps>) => {
Expand All @@ -238,10 +258,11 @@ export class PasswordInput extends React.PureComponent<PasswordInputProps, Passw
onKeyDown: this.handleKeydown,
onKeyPress: this.handleKeyPress,
rightIcon: this.renderEye(),
onFocus: this.handleFocus,
};

return (
<RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols}>
<RenderLayer onFocusOutside={this.hideSymbols} onClickOutside={this.hideSymbols} active={this.state.focused}>
<div data-tid={PasswordInputDataTids.root} className={this.styles.root()}>
<Input ref={this.refInput} type={this.state.visible ? 'text' : 'password'} {...inputProps} />
</div>
Expand Down
8 changes: 8 additions & 0 deletions packages/react-ui/components/SidePage/SidePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,10 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
public componentDidMount() {
globalObject.addEventListener?.('keydown', this.handleKeyDown);
this.stackSubscription = ModalStack.add(this, this.handleStackChange);

if (this.layout) {
this.layout.addEventListener('scroll', LayoutEvents.emit);
}
}

public componentWillUnmount() {
Expand All @@ -148,6 +152,10 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
this.stackSubscription.remove();
}
ModalStack.remove(this);

if (this.layout) {
this.layout.removeEventListener('scroll', LayoutEvents.emit);
}
}

/**
Expand Down
6 changes: 5 additions & 1 deletion packages/react-ui/components/TokenInput/TokenInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ import { createPropsGetter } from '../../lib/createPropsGetter';
import { getUid } from '../../lib/uidUtils';
import { TokenView } from '../Token/TokenView';
import { ThemeContext } from '../../lib/theming/ThemeContext';
import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot';

import { TokenInputLocale, TokenInputLocaleHelper } from './locale';
import { getStyles } from './TokenInput.styles';
Expand Down Expand Up @@ -725,7 +726,10 @@ export class TokenInput<T = string> extends React.PureComponent<TokenInputProps<
private isBlurToMenu = (event: FocusEvent<HTMLElement>) => {
if (this.menuRef && globalObject.document) {
const menu = getRootNode(this.tokensInputMenu?.getMenuRef());
const relatedTarget = event.relatedTarget || globalObject.document.activeElement;

const isShadowRootElement = isShadowRoot(this.emotion.sheet.container.getRootNode());
const relatedTarget =
(isShadowRootElement ? event.target : event.relatedTarget) ?? globalObject.document.activeElement;

if (menu && menu.contains(relatedTarget)) {
return true;
Expand Down
14 changes: 6 additions & 8 deletions packages/react-ui/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ import { Popup, PopupPositionsType, PopupProps, ShortPopupPositionsType } from '
import { RenderLayer, RenderLayerProps } from '../../internal/RenderLayer';
import { Nullable } from '../../typings/utility-types';
import { MouseEventType } from '../../typings/event-types';
import { containsTargetOrRenderContainer } from '../../lib/listenFocusOutside';
import { clickOutsideContent } from '../../lib/listenFocusOutside';
import { Theme } from '../../lib/theming/Theme';
import { isTestEnv } from '../../lib/currentEnvironment';
import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';
import { rootNode, TSetRootNode } from '../../lib/rootNode';
import { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
import { createPropsGetter } from '../../lib/createPropsGetter';
import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';
import { isInstanceOf } from '../../lib/isInstanceOf';
import { EmotionConsumer } from '../../lib/theming/Emotion';
import { ThemeContext } from '../../lib/theming/ThemeContext';
import {
getFullReactUIFlagsContext,
ReactUIFeatureFlags,
ReactUIFeatureFlagsContext,
} from '../../lib/featureFlagsContext';
import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot';

import { getStyles } from './Tooltip.styles';

Expand Down Expand Up @@ -548,12 +548,10 @@ export class Tooltip extends React.PureComponent<TooltipProps, TooltipState> imp
}
};

private isClickOutsideContent(event: Event) {
if (this.contentElement && isInstanceOf(event.target, globalObject.Element)) {
return !containsTargetOrRenderContainer(event.target)(this.contentElement);
}

return true;
private isClickOutsideContent(event: Event): boolean {
const node = this.contentElement;
const isShadowRootElement = isShadowRoot(this.emotion.sheet.container.getRootNode());
return clickOutsideContent(event, node, isShadowRootElement);
}

private handleFocus = () => {
Expand Down
Loading

0 comments on commit 107211c

Please sign in to comment.