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

package/index.d.ts

@@ -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.
  *
@@ -3822,7 +3831,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). */
@@ -3852,13 +3904,28 @@ 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;
+    /** Forward ref to the underlying button element. */
+    ref?: CommonRef;
+}
+type TabPanelPropsToOverride = 'tabId';
+
+/**
+ * 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;
@@ -14536,18 +14559,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 +14581,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 +14648,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;
@@ -14639,7 +14705,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.
@@ -14655,27 +14721,59 @@ 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,
+    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
+    "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;