New Tabs component implementation

[Mil4n0r]

Checklist
(Check off all the items before submitting)

• Build process is done without errors. All tests pass in the /lib directory.
• Self-reviewed the code before submitting.
• Meets accessibility standards.
• Added/updated documentation to /website as needed.
• Added/updated tests as needed.

Description
Current DxcTabs API is confusing, as it is expected to work in a similar way as DxcNavTabs, but it does not provide Compound Components, so we have no access to onClick/onHover events separately for each Tab.

For consistency purposes and easier implementation of the wrappers required in Halstack Studio and UXPin, it is convenient to redo it.

For now, we are maintaining the old API available to prevent adding breaking changes, however, those props will be marked as LEGACY/DEPRECATED to not encourage using them in the future (and eventually, removing them).

[Mil4n0r]

Good job @Jialecl. Changes look legit. The only thing to improve I can think of would be to improve the typings so that only legacy behavior or new behavior are allowed, not both at once. However, I am not sure if that is worth it taking into account that the legacy behavior will eventually be removed.

Let me know what you guys think @Jialecl @GomezIvann.

[GomezIvann]

Just a general thought. There are too many variables depending on each other (because of useMemo) inside Tabs.tsx which are only use once or twice. For example:

1. hasActiveChild, initialActiveTabLabel can be transformed into an initialization function inside the useState of activeTabLabel:

  const childrenArray: ReactElement<TabProps>[] = useMemo(
    () => Children.toArray(children) as ReactElement<TabProps>[],
    [children]
  );
  const hasLabelAndIcon = useMemo(
    () => childrenArray.some((child) => isValidElement(child) && child.props.icon && child.props.label),
    [childrenArray]
  );

  const [activeTabLabel, setActiveTabLabel] = useState(() => {
    const hasActiveChild = childrenArray.some(
      (child) => isValidElement(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
    );
    const initialActiveTab = hasActiveChild
      ? childrenArray.find(
          (child) => isValidElement(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
        )
      : childrenArray.find((child) => isValidElement(child) && !child.props.disabled);

    return isValidElement(initialActiveTab) ? initialActiveTab.props.label : "";
  });

2. You can directly pass a function to aria-disabled from ActiveIndicator in order to remove another const (isActiveIndicatorDisabled).

                  aria-disabled={childrenArray.some((child) =>
                    isValidElement(child) ? activeTabLabel === child.props.label && child.props.disabled : false
                  )}

Since you are already memorizing the value of childrenArray, all this changes make sense and don't trigger rerenders.