@lumx/react 4.9.0-next.5 → 4.9.0-next.6

package/index.d.ts

@@ -787,7 +787,7 @@ interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Button: Comp<ButtonProps, HTMLAnchorElement | HTMLButtonElement>;
 
 interface IconButtonProps$1 extends BaseButtonProps {
     /**
@@ -2413,7 +2413,7 @@ interface LinkProps extends GenericProps$1, ReactToJSX<LinkProps$1> {
  * @param  ref   Component ref.
  * @return React element.
  */
-declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
+declare const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement>;
 
 /**
  * Defines the props of the component.
@@ -3822,7 +3822,50 @@ declare const TabList: Comp<TabListProps, HTMLDivElement>;
 /**
  * Defines the props of the component.
  */
-interface TabProps extends GenericProps$1 {
+interface TabProps$1 extends HasClassName {
+    /** Children are not supported. */
+    children?: never;
+    /** Icon (SVG path). */
+    icon?: IconProps$1['icon'];
+    /** Icon component properties. */
+    iconProps?: Omit<IconProps$1, 'icon'>;
+    /** Native id property. */
+    id?: string;
+    /** Whether the tab is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label content. */
+    label: string | JSXElement;
+    /** Whether any tab in the list is disabled (used to block interaction). */
+    isAnyDisabled?: boolean;
+    /** Whether the tab should become active when it receives focus (automatic activation pattern). */
+    shouldActivateOnFocus?: boolean;
+    /** Focus event handler injected by TabList. */
+    handleFocus?: (event: any) => void;
+    /** Keypress event handler injected by TabList. */
+    handleKeyPress?: (event: any) => void;
+    /** Callback to activate this tab, injected by TabList. */
+    changeToTab?: () => void;
+    /** Tab index for roving tabindex management. */
+    tabIndex?: number;
+    /** ID applied to the tab button element (for aria-labelledby on the panel). */
+    tabId?: string;
+    /** ID of the associated tab panel (for aria-controls). */
+    tabPanelId?: string;
+    /** Icon component injected by the framework wrapper. */
+    Icon: any;
+    /** Text component injected by the framework wrapper. */
+    Text: any;
+    /** Forward ref to the underlying button element. */
+    ref?: CommonRef;
+}
+type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
+
+/**
+ * Defines the props of the component.
+ */
+interface TabProps extends GenericProps$1, ReactToJSX<TabProps$1, TabPropsToOverride> {
     /** Children are not supported. */
     children?: never;
     /** Icon (SVG path). */

package/index.js

@@ -14536,18 +14536,18 @@ TabList.defaultProps = DEFAULT_PROPS$b;
  */
 const COMPONENT_NAME$6 = 'Tab';
 
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$a = {};
+
 /**
  * Component default class name and class prefix.
  */
 const CLASSNAME$7 = `${TABS_CLASSNAME}__link`;
 const {
   block: block$9
-} = classNames.bem(CLASSNAME$7);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$a = {};
+} = bem(CLASSNAME$7);
 
 /**
  * Tab component.
@@ -14558,64 +14558,66 @@ const DEFAULT_PROPS$a = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const Tab = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    otherProps
-  } = useDisableStateProps(props);
+const Tab$1 = props => {
   const {
     className,
     icon,
     iconProps = {},
+    isAnyDisabled,
     id,
-    isActive: propIsActive,
+    isActive,
     label,
-    onFocus,
-    onKeyPress,
+    handleFocus,
+    handleKeyPress,
     tabIndex = -1,
+    changeToTab,
+    tabPanelId,
+    shouldActivateOnFocus,
+    tabId,
+    Icon,
+    Text,
+    ref,
     ...forwardedProps
-  } = otherProps;
-  const state = useTabProviderContext('tab', id);
-  const isActive = propIsActive || state?.isActive;
-  const changeToCurrentTab = useCallback(() => {
+  } = props;
+  const changeToCurrentTab = () => {
     if (isAnyDisabled) {
       return;
     }
-    state?.changeToTab();
-  }, [isAnyDisabled, state]);
-  const handleFocus = useCallback(event => {
-    onFocus?.(event);
-    if (state?.shouldActivateOnFocus) {
+    changeToTab?.();
+  };
+  const onFocus = event => {
+    handleFocus?.(event);
+    if (shouldActivateOnFocus) {
       changeToCurrentTab();
     }
-  }, [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus]);
-  const handleKeyPress = useCallback(event => {
-    onKeyPress?.(event);
+  };
+  const onKeyPress = event => {
+    handleKeyPress?.(event);
     if (event.key !== 'Enter' || isAnyDisabled) {
       return;
     }
     changeToCurrentTab();
-  }, [changeToCurrentTab, isAnyDisabled, onKeyPress]);
+  };
   return /*#__PURE__*/jsxs("button", {
     ref: ref,
     ...forwardedProps,
     type: "button",
-    id: state?.tabId,
-    className: classNames.join(className, block$9({
+    id: tabId,
+    className: classnames(className, block$9({
       'is-active': isActive,
       'is-disabled': isAnyDisabled
     })),
     onClick: changeToCurrentTab,
-    onKeyPress: handleKeyPress,
-    onFocus: handleFocus,
+    onKeyPress: onKeyPress,
+    onFocus: onFocus,
     role: "tab",
     tabIndex: isActive ? 0 : tabIndex,
     "aria-disabled": isAnyDisabled,
     "aria-selected": isActive,
-    "aria-controls": state?.tabPanelId,
+    "aria-controls": tabPanelId,
     children: [icon && /*#__PURE__*/jsx(Icon, {
       icon: icon,
-      size: Size$1.xs,
+      size: Size.xs,
       ...iconProps
     }), label && /*#__PURE__*/jsx(Text, {
       as: "span",
@@ -14623,6 +14625,47 @@ const Tab = forwardRef((props, ref) => {
       children: label
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Tab component.
+ *
+ * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Tab = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    isActive: propIsActive,
+    id,
+    onFocus,
+    onKeyPress,
+    ...forwardedProps
+  } = otherProps;
+  const state = useTabProviderContext('tab', id);
+  const isActive = propIsActive || state?.isActive;
+  return Tab$1({
+    id,
+    ...state,
+    Icon,
+    Text,
+    ref,
+    isActive,
+    isAnyDisabled,
+    handleFocus: onFocus,
+    handleKeyPress: onKeyPress,
+    ...forwardedProps
+  });
 });
 Tab.displayName = COMPONENT_NAME$6;
 Tab.className = CLASSNAME$7;