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

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, HTMLAnchorElement | HTMLButtonElement>;
+declare const Button: Comp<ButtonProps, HTMLButtonElement | HTMLAnchorElement>;
 
 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, HTMLAnchorElement | HTMLButtonElement>;
+declare const Link: Comp<LinkProps, HTMLButtonElement | HTMLAnchorElement>;
 
 /**
  * Defines the props of the component.
@@ -3798,16 +3798,25 @@ declare enum TabListLayout {
 /**
  * Defines the props of the component.
  */
-interface TabListProps extends GenericProps$1, HasTheme$1 {
+interface TabListProps$1 extends HasClassName, HasTheme {
     /** ARIA label (purpose of the set of tabs). */
     ['aria-label']: string;
     /** Tab list. */
-    children: ReactNode;
+    children: JSXElement;
     /** Layout of the tabs in the list. */
     layout?: TabListLayout;
     /** Position of the tabs in the list (requires 'clustered' layout). */
-    position?: Alignment$1;
+    position?: Alignment;
+    /** ref to the wrapper element */
+    ref?: CommonRef;
 }
+
+/**
+ * Defines the props of the component.
+ */
+interface TabListProps extends GenericProps$1, ReactToJSX<TabListProps$1> {
+}
+
 /**
  * TabList component.
  *
@@ -3849,6 +3858,10 @@ interface TabProps$1 extends HasClassName {
     changeToTab?: () => void;
     /** Tab index for roving tabindex management. */
     tabIndex?: number;
+    /** Name of the prop used to set tab index (framework-dependent). */
+    tabIndexProp?: string;
+    /** Name of the prop used to attach the keypress event (framework-dependent). */
+    keyPressProp?: string;
     /** ID applied to the tab button element (for aria-labelledby on the panel). */
     tabId?: string;
     /** ID of the associated tab panel (for aria-controls). */
@@ -3860,7 +3873,7 @@ interface TabProps$1 extends HasClassName {
     /** Forward ref to the underlying button element. */
     ref?: CommonRef;
 }
-type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
+type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
 
 /**
  * Defines the props of the component.
@@ -3895,13 +3908,30 @@ declare const Tab: Comp<TabProps, HTMLButtonElement>;
 /**
  * Defines the props of the component.
  */
-interface TabPanelProps extends GenericProps$1 {
-    /** Native id property */
-    id?: string;
+interface TabPanelProps$1 extends HasClassName {
     /** Whether the tab is active or not. */
     isActive?: boolean;
+    /** Whether the tab is lazy loaded or not */
+    isLazy?: boolean;
     /** Children */
-    children?: React.ReactNode;
+    children?: JSXElement;
+    /** ID applied to the tab button element (for aria-labelledby on the panel). */
+    tabId?: string;
+    /** ID of the associated tab panel (for aria-controls). */
+    id?: string;
+    /** Name of the prop used to set tab index (framework-dependent). */
+    tabIndexProp?: string;
+    /** Forward ref to the underlying button element. */
+    ref?: CommonRef;
+}
+type TabPanelPropsToOverride = 'tabId' | 'isLazy' | 'tabIndexProp';
+
+/**
+ * Defines the props of the component.
+ */
+interface TabPanelProps extends GenericProps$1, ReactToJSX<TabPanelProps$1, TabPanelPropsToOverride> {
+    /** Native id property */
+    id?: string;
 }
 /**
  * TabPanel component.

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, WINDOW, DIALOG_TRANSITION_DURATION, IS_BROWSER as IS_BROWSER$1, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, WINDOW, DIALOG_TRANSITION_DURATION, IS_BROWSER as IS_BROWSER$1, Orientation as Orientation$1, Alignment as Alignment$1, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -842,6 +842,8 @@ const TOOLTIP_LONG_PRESS_DELAY = {
 /**
  * Alignments.
  */
+const Alignment = {
+  left: 'left'};
 const Theme = {
   light: 'light',
   dark: 'dark'
@@ -8013,7 +8015,7 @@ const {
  */
 const DEFAULT_PROPS$O = {
   captionPosition: ImageBlockCaptionPosition.below,
-  align: Alignment.left
+  align: Alignment$1.left
 };
 
 /**
@@ -9871,7 +9873,7 @@ const Mosaic = forwardRef((props, ref) => {
           className: element$q('thumbnail'),
           children: [/*#__PURE__*/jsx(Thumbnail, {
             ...thumbnailProps,
-            align: align || Alignment.left,
+            align: align || Alignment$1.left,
             image: image,
             theme: theme,
             aspectRatio: AspectRatio$1.free,
@@ -10686,7 +10688,6 @@ const reducer = (state, action) => {
         if (state.activeTabIndex === action.payload) {
           return state;
         }
-        // Change active tab index.
         return {
           ...state,
           activeTabIndex: action.payload
@@ -10698,7 +10699,6 @@ const reducer = (state, action) => {
           type,
           id
         } = action.payload;
-        // Append tab/tabPanel id in state.
         return {
           ...state,
           ids: {
@@ -10715,7 +10715,6 @@ const reducer = (state, action) => {
         } = action.payload;
         const index = state.ids[type].indexOf(id);
         if (index === -1) return state;
-        // Remove tab & tab panel at index.
         const tabIds = [...state.ids.tab];
         tabIds.splice(index, 1);
         const tabPanelIds = [...state.ids.tabPanel];
@@ -10732,7 +10731,9 @@ const reducer = (state, action) => {
       return state;
   }
 };
+
 const TabProviderContext = /*#__PURE__*/createContext(null);
+
 /* eslint-disable react-hooks/rules-of-hooks */
 const useTabProviderContext = (type, originalId) => {
   const context = useContext(TabProviderContext);
@@ -13903,7 +13904,7 @@ const Switch$1 = props => {
  * Component default props.
  */
 const DEFAULT_PROPS$h = {
-  position: Alignment.left
+  position: Alignment$1.left
 };
 
 /**
@@ -14462,7 +14463,7 @@ const TABS_CLASSNAME = `lumx-tabs`;
 const {
   block: block$a,
   element: element$6
-} = classNames.bem(TABS_CLASSNAME);
+} = bem(TABS_CLASSNAME);
 let TabListLayout = /*#__PURE__*/function (TabListLayout) {
   TabListLayout["clustered"] = "clustered";
   TabListLayout["fixed"] = "fixed";
@@ -14495,26 +14496,21 @@ const DEFAULT_PROPS$b = {
  * @param  ref   Component ref.
  * @return React element.
  */
-const TabList = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const TabList$1 = props => {
   const {
     'aria-label': ariaLabel,
     children,
     className,
     layout = DEFAULT_PROPS$b.layout,
     position = DEFAULT_PROPS$b.position,
-    theme = defaultTheme,
+    theme,
+    ref,
     ...forwardedProps
   } = props;
-  const tabListRef = React__default.useRef(null);
-  useRovingTabIndexContainer({
-    containerRef: tabListRef,
-    itemSelector: '[role="tab"]'
-  });
   return /*#__PURE__*/jsx("div", {
-    ref: mergeRefs(ref, tabListRef),
+    ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$a({
+    className: classnames(className, block$a({
       [`layout-${layout}`]: Boolean(layout),
       [`position-${position}`]: Boolean(position),
       [`theme-${theme}`]: Boolean(theme)
@@ -14526,6 +14522,33 @@ const TabList = forwardRef((props, ref) => {
       children: children
     })
   });
+};
+
+/**
+ * TabList component.
+ *
+ * Implements WAI-ARIA `tablist` 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 TabList = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const tabListRef = React__default.useRef(null);
+  useRovingTabIndexContainer({
+    containerRef: tabListRef,
+    itemSelector: '[role="tab"]'
+  });
+  return TabList$1({
+    theme,
+    ref: mergeRefs(ref, tabListRef),
+    ...forwardedProps
+  });
 });
 TabList.displayName = COMPONENT_NAME$7;
 TabList.className = TABS_CLASSNAME;
@@ -14564,12 +14587,15 @@ const Tab$1 = props => {
     icon,
     iconProps = {},
     isAnyDisabled,
+    isDisabled,
     id,
     isActive,
     label,
     handleFocus,
     handleKeyPress,
     tabIndex = -1,
+    tabIndexProp = 'tabIndex',
+    keyPressProp = 'onKeyPress',
     changeToTab,
     tabPanelId,
     shouldActivateOnFocus,
@@ -14608,10 +14634,10 @@ const Tab$1 = props => {
       'is-disabled': isAnyDisabled
     })),
     onClick: changeToCurrentTab,
-    onKeyPress: onKeyPress,
+    [keyPressProp]: onKeyPress,
     onFocus: onFocus,
     role: "tab",
-    tabIndex: isActive ? 0 : tabIndex,
+    [tabIndexProp]: isActive ? 0 : tabIndex,
     "aria-disabled": isAnyDisabled,
     "aria-selected": isActive,
     "aria-controls": tabPanelId,
@@ -14682,7 +14708,7 @@ const COMPONENT_NAME$5 = 'TabPanel';
 const CLASSNAME$6 = `lumx-tab-panel`;
 const {
   block: block$8
-} = classNames.bem(CLASSNAME$6);
+} = bem(CLASSNAME$6);
 
 /**
  * Component default props.
@@ -14698,27 +14724,60 @@ const DEFAULT_PROPS$9 = {};
  * @param  ref   Component ref.
  * @return React element.
  */
-const TabPanel = forwardRef((props, ref) => {
+const TabPanel$1 = props => {
   const {
     children,
-    id,
     className,
-    isActive: propIsActive,
+    isActive,
+    id,
+    tabId,
+    isLazy,
+    tabIndexProp = 'tabIndex',
+    ref,
     ...forwardedProps
   } = props;
-  const state = useTabProviderContext('tabPanel', id);
-  const isActive = propIsActive || state?.isActive;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    id: state?.tabPanelId,
-    className: classNames.join(className, block$8({
+    id: id,
+    className: classnames(className, block$8({
       'is-active': isActive
     })),
     role: "tabpanel",
-    tabIndex: isActive ? 0 : -1,
-    "aria-labelledby": state?.tabId,
-    children: (!state?.isLazy || isActive) && children
+    [tabIndexProp]: isActive ? 0 : -1,
+    "aria-labelledby": tabId,
+    children: (!isLazy || isActive) && children
+  });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * TabPanel component.
+ *
+ * Implements WAI-ARIA `tabpanel` 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 TabPanel = forwardRef((props, ref) => {
+  const {
+    id,
+    isActive: propIsActive,
+    ...forwardedProps
+  } = props;
+  const state = useTabProviderContext('tabPanel', id);
+  const isActive = propIsActive || state?.isActive;
+  return TabPanel$1({
+    ref,
+    isActive,
+    id: state?.tabPanelId,
+    isLazy: state?.isLazy,
+    tabId: state?.tabId,
+    ...forwardedProps
   });
 });
 TabPanel.displayName = COMPONENT_NAME$5;