@lumx/react 3.3.0 → 3.3.1-alpha.0

package/_internal/types.d.ts

@@ -238,6 +238,8 @@ declare type Typography = TypographyInterface | TypographyCustom;
 declare const AspectRatio: {
     /** Intrinsic content ratio. */
     readonly original: "original";
+    /** Ratio 3:1 */
+    readonly panoramic: "panoramic";
     /** Ratio 16:9 */
     readonly wide: "wide";
     /** Ratio 3:2 */

package/index.d.ts

@@ -2695,8 +2695,6 @@ interface TextFieldProps extends GenericProps, HasTheme {
     onBlur?(event: React.FocusEvent): void;
     /** On change callback. */
     onChange(value: string, name?: string, event?: SyntheticEvent): void;
-    /** On clear callback. */
-    onClear?(event?: SyntheticEvent): void;
     /** On focus callback. */
     onFocus?(event: React.FocusEvent): void;
 }

package/index.js

@@ -220,6 +220,8 @@ const Typography = _objectSpread2(_objectSpread2({}, TypographyInterface), {}, {
 const AspectRatio = {
   /** Intrinsic content ratio. */
   original: 'original',
+  /** Ratio 3:1 */
+  panoramic: 'panoramic',
   /** Ratio 16:9 */
   wide: 'wide',
   /** Ratio 3:2 */
@@ -2282,15 +2284,11 @@ function useFocusTrap(focusZoneElement, focusElement) {
     // SETUP:
     if (focusElement && focusZoneElement.contains(focusElement)) {
       // Focus the given element.
-      focusElement.focus({
-        preventScroll: true
-      });
+      focusElement.focus();
     } else {
       var _getFirstAndLastFocus;
       // Focus the first focusable element in the zone.
-      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus({
-        preventScroll: true
-      });
+      (_getFirstAndLastFocus = getFirstAndLastFocusable(focusZoneElement).first) === null || _getFirstAndLastFocus === void 0 ? void 0 : _getFirstAndLastFocus.focus();
     }
     FOCUS_TRAPS.register(focusTrap);
 
@@ -6202,19 +6200,18 @@ const _InnerPopover = /*#__PURE__*/forwardRef((props, ref) => {
      * unless specifically requested not to.
      */
     if (isFocusedWithin.current && focusAnchorOnClose) {
-      var _elementToFocus;
-      let elementToFocus = parentElement === null || parentElement === void 0 ? void 0 : parentElement.current;
-      if (!elementToFocus && anchorRef !== null && anchorRef !== void 0 && anchorRef.current) {
-        // Focus the first focusable element in anchor.
-        elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
+      if (parentElement !== null && parentElement !== void 0 && parentElement.current) {
+        parentElement === null || parentElement === void 0 ? void 0 : parentElement.current.focus();
       }
-      if (!elementToFocus) {
+      const firstFocusable = (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && getFirstAndLastFocusable(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current).first;
+      if (firstFocusable) {
+        // Focus the first focusable element in anchor.
+        firstFocusable.focus();
+      } else {
+        var _anchorRef$current;
         // Fallback on the anchor element.
-        elementToFocus = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+        anchorRef === null || anchorRef === void 0 ? void 0 : (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.focus();
       }
-      (_elementToFocus = elementToFocus) === null || _elementToFocus === void 0 ? void 0 : _elementToFocus.focus({
-        preventScroll: true
-      });
     }
     onClose();
   }, [anchorRef, focusAnchorOnClose, onClose, parentElement]);
@@ -9296,7 +9293,7 @@ const SelectVariant = {
   chip: 'chip'
 };
 
-const _excluded$Y = ["children", "className", "focusElement", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
+const _excluded$Y = ["children", "className", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
 
 /** The display name of the component. */
 const COMPONENT_NAME$W = 'Select';
@@ -9313,7 +9310,6 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   let {
       children,
       className,
-      focusElement,
       isMultiple,
       closeOnClick = !isMultiple,
       disabled,
@@ -9340,7 +9336,6 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
   const selectId = useMemo(() => id || `select-${uid()}`, [id]);
   const anchorRef = useRef(null);
   const selectRef = useRef(null);
-  const dropdownRef = useRef(null);
   const isFocus = useListenFocus(anchorRef);
   const handleKeyboardNav = useCallback(evt => {
     if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {
@@ -9355,9 +9350,6 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
     }
     anchorRef === null || anchorRef === void 0 ? void 0 : (_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.blur();
   };
-
-  // Handle focus trap.
-  useFocusTrap(isOpen && dropdownRef.current, focusElement === null || focusElement === void 0 ? void 0 : focusElement.current);
   return /*#__PURE__*/React.createElement("div", {
     ref: mergeRefs(ref, selectRef),
     className: classnames(className, handleBasicClasses({
@@ -9398,8 +9390,7 @@ const WithSelectContext = (SelectElement, _ref, ref) => {
     isOpen: !!isOpen,
     placement: Placement.BOTTOM_START,
     onClose: onClose,
-    onInfiniteScroll: onInfiniteScroll,
-    ref: dropdownRef
+    onInfiniteScroll: onInfiniteScroll
   }, children), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$T}__helper`,
     kind: Kind.error,
@@ -11718,8 +11709,8 @@ TabPanel.displayName = COMPONENT_NAME$1f;
 TabPanel.className = CLASSNAME$1c;
 TabPanel.defaultProps = DEFAULT_PROPS$Z;
 
-const _excluded$1k = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name", "hasError", "describedById"],
-  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
+const _excluded$1k = ["id", "isDisabled", "isRequired", "placeholder", "multiline", "value", "setFocus", "onChange", "onFocus", "onBlur", "inputRef", "rows", "recomputeNumberOfRows", "type", "name"],
+  _excluded2$3 = ["chips", "className", "clearButtonProps", "disabled", "error", "forceFocusStyle", "hasError", "helper", "icon", "id", "inputRef", "isDisabled", "isRequired", "isValid", "label", "maxLength", "minimumRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "textFieldRef", "theme", "type", "value", "afterElement"];
 
 /**
  * Defines the props of the component.
@@ -11799,9 +11790,7 @@ const renderInputNative = props => {
       rows,
       recomputeNumberOfRows,
       type,
-      name,
-      hasError,
-      describedById
+      name
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1k);
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -11837,8 +11826,6 @@ const renderInputNative = props => {
     onFocus: onTextFieldFocus,
     onBlur: onTextFieldBlur,
     onChange: handleChange,
-    'aria-invalid': hasError ? 'true' : undefined,
-    'aria-describedby': describedById,
     ref: mergeRefs(inputRef, ref)
   });
   if (multiline) {
@@ -11879,7 +11866,6 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       name,
       onBlur,
       onChange,
-      onClear,
       onFocus,
       placeholder,
       textFieldRef,
@@ -11890,16 +11876,6 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded2$3);
   const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
-  /**
-   * Generate unique ids for both the helper and error texts, in order to
-   * later on add them to the input native as aria-describedby. If both the error and the helper are present,
-   * we want to first use the most important one, which is the errorId. That way, screen readers will read first
-   * the error and then the helper
-   */
-  const helperId = helper ? `text-field-helper-${uid()}` : undefined;
-  const errorId = error ? `text-field-error-${uid()}` : undefined;
-  const describedByIds = [errorId, helperId].filter(Boolean);
-  const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   const [isFocus, setFocus] = useState(false);
   const {
     rows,
@@ -11914,14 +11890,11 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
    * and remove focus from the clear button.
    * @param evt On clear event.
    */
-  const handleClear = evt => {
+  const onClear = evt => {
     evt.nativeEvent.preventDefault();
     evt.nativeEvent.stopPropagation();
     evt.currentTarget.blur();
     onChange('');
-    if (onClear) {
-      onClear(evt);
-    }
   };
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -11979,9 +11952,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setFocus,
     type,
     value,
-    name,
-    hasError,
-    describedById
+    name
   }, forwardedProps))), !chips && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__input-wrapper`
   }, renderInputNative(_objectSpread2({
@@ -12000,9 +11971,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setFocus,
     type,
     value,
-    name,
-    hasError,
-    describedById
+    name
   }, forwardedProps))), (isValid || hasError) && /*#__PURE__*/React.createElement(Icon, {
     className: `${CLASSNAME$1d}__input-validity`,
     color: theme === Theme.dark ? 'light' : undefined,
@@ -12014,19 +11983,17 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     emphasis: Emphasis.low,
     size: Size.s,
     theme: theme,
-    onClick: handleClear,
+    onClick: onClear,
     type: "button"
   })), afterElement && /*#__PURE__*/React.createElement("div", {
     className: `${CLASSNAME$1d}__after-element`
   }, afterElement)), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$1d}__helper`,
     kind: Kind.error,
-    theme: theme,
-    id: errorId
+    theme: theme
   }, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
     className: `${CLASSNAME$1d}__helper`,
-    theme: theme,
-    id: helperId
+    theme: theme
   }, helper));
 });
 TextField.displayName = COMPONENT_NAME$1g;