WIP

Arize-ai · May 17, 2024 · d2ca83a · d2ca83a
1 parent 6912793
commit d2ca83a
Show file tree

Hide file tree

Showing 4 changed files with 1,796 additions and 2,485 deletions.
diff --git a/src/combobox/ComboBox.tsx b/src/combobox/ComboBox.tsx
@@ -29,8 +29,7 @@ import { TextFieldBase } from '../textfield';
 import { ProgressCircle } from '../progress';
 import { Popover } from '../popover';
 import { useProviderProps } from '../provider';
-import { AriaButtonProps } from '../types';
-import { ACComboBoxProps } from '../types';
+import { AriaButtonProps, ACComboBoxProps } from '../types';
 import { ArrowIosDownwardOutline, Icon } from '../icon';
 
 function ComboBox<T extends object>(
@@ -72,7 +71,7 @@ const ComboBoxBase = React.forwardRef(function ComboBoxBase<T extends object>(
  let listBoxRef = useRef(null);
  let inputRef = useRef<HTMLInputElement>(null);
  // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.
- let inputGroupRef = useRef<HTMLDivElement>();
+ let inputGroupRef = useRef<HTMLDivElement>(null);
  let domRef = useFocusableRef(ref, inputRef);
 
  let { contains } = useFilter({ sensitivity: 'base' });
@@ -239,10 +238,10 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(
  aria-label={'loading'}
  size="S"
  isIndeterminate
- className={classNames(
- 'spectrum-Textfield-circleLoader',
- 'ac-input-group-input-circle-loader'
- )}
+ // className={classNames(
+ //  'spectrum-Textfield-circleLoader',
+ //  'ac-input-group-input-circle-loader'
+ // )}
  />
  );
 
@@ -308,7 +307,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(
  <TextFieldBase
  inputProps={inputProps}
  inputRef={inputRef}
- UNSAFE_className={classNames('ac-input-group-field')}
+ className={classNames('ac-input-group-field')}
  inputClassName={classNames('ac-input-group-input')}
  validationIconClassName={classNames(
  'ac-input-group-input-validationIcon'
@@ -322,7 +321,7 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(
  showLoading &&
  (isOpen || menuTrigger === 'manual' || loadingState === 'loading')
  }
- loadingIndicator={loadingState != null && loadingCircle}
+ // loadingIndicator={loadingState != null && loadingCircle}
  disableFocusRing
  />
  <PressResponder preventFocusOnPress isPressed={isOpen}>

diff --git a/src/progress/ProgressCircle.tsx b/src/progress/ProgressCircle.tsx
@@ -1,9 +1,13 @@
 import { clamp } from '@react-aria/utils';
-import { AriaLabelingProps, DOMRef } from '@react-types/shared';
 import React, { CSSProperties } from 'react';
 import { useProgressBar } from '@react-aria/progress';
 import { classNames, useDOMRef } from '../utils';
-import { DOMProps, ProgressBaseProps } from '../types';
+import {
+ DOMProps,
+ ProgressBaseProps,
+ AriaLabelingProps,
+ DOMRef,
+} from '../types';
 import { progressCircleCSS } from './styles';
 
 interface AriaProgressCircleProps extends DOMProps, AriaLabelingProps {}

diff --git a/src/textfield/TextFieldBase.tsx b/src/textfield/TextFieldBase.tsx
@@ -1,5 +1,5 @@
 import { css, keyframes } from '@emotion/react';
-import { FocusRing } from '@react-aria/focus';
+import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import { PressEvents } from '@react-types/shared';
 import React, {
@@ -110,6 +110,7 @@ interface TextFieldBaseProps
  className?: string;
  /** Whether the input should be displayed with a quiet style. */
  isQuiet?: boolean;
+ disableFocusRing?: boolean;
 }
 
 const textFieldBaseCSS = (styleProps: StyleProps) => css`
@@ -302,6 +303,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
  className,
  height,
  width,
+ disableFocusRing,
  } = props;
  const { hoverProps, isHovered } = useHover({ isDisabled });
  const [isFocused, setIsFocused] = React.useState(false);
@@ -334,6 +336,11 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
  />
  );
 
+ let { focusProps, isFocusVisible } = useFocusRing({
+ isTextInput: true,
+ autoFocus,
+ });
+
  let textField = (
  <div
  className={classNames('ac-textfield', {
@@ -344,7 +351,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
  'ac-textfield--loadable': loadingIndicator,
  'ac-textfield--multiline': multiLine,
  'is-hovered': isHovered,
- 'is-focused': isFocused,
+ 'is-focused': !disableFocusRing && isFocusVisible,
  'is-disabled': isDisabled,
  'is-readonly': isReadOnly,
  })}
@@ -356,24 +363,13 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
  {addonBefore != null ? (
  <AddonBefore key="addon-before">{addonBefore}</AddonBefore>
  ) : null}
- <FocusRing
- focusRingClass={'focus-ring'}
- isTextInput
- autoFocus={autoFocus}
- >
- <ElementType
- key="element"
- {...mergeProps(inputProps, hoverProps, {
- onFocus: () => {
- setIsFocused(true);
- },
- onBlur: () => setIsFocused(false),
- })}
- ref={inputRef as any}
- rows={multiLine ? 1 : undefined}
- className={classNames('ac-textfield__input', inputClassName)}
- />
- </FocusRing>
+ <ElementType
+ key="element"
+ {...mergeProps(inputProps, hoverProps, focusProps)}
+ ref={inputRef as any}
+ rows={multiLine ? 1 : undefined}
+ className={classNames('ac-textfield__input', inputClassName)}
+ />
  {validationState && validationState === 'invalid' && !isLoading
  ? validation
  : null}