@moda/om 21.7.2 → 21.9.0

package/src/components/Tabs/TabList.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
+import classNames from 'classnames';
 import { Tab } from './Tab';
+
 import './TabList.scss';
 
 export type TabListProps = {
   tabs: Tab[];
   onTabSelected(tabName: string): void;
   activePanel: string;
+  className?: string;
 };
 
-export const TabList: React.FC<TabListProps> = ({ tabs, onTabSelected, activePanel }) => {
-  return (
-    <div className='TabList'>
-      {tabs.map(tab => (
-        <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
-      ))}
-    </div>
-  );
-};
+export const TabList: React.FC<TabListProps> = ({
+  tabs,
+  onTabSelected,
+  activePanel,
+  className
+}) => (
+  <div className={classNames('TabList', className)}>
+    {tabs.map(tab => (
+      <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
+    ))}
+  </div>
+);

package/src/components/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ export type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
   onTabClicked?: (tabName: string) => void;
   defaultActiveTab?: string;
   activeTab?: string;
+  tabListClassName?: string;
 };
 
 export const Tabs: React.FC<TabsProps> = ({
@@ -18,6 +19,7 @@ export const Tabs: React.FC<TabsProps> = ({
   defaultActiveTab,
   activeTab,
   className,
+  tabListClassName,
   ...rest
 }) => {
   const [activePanel, setActivePanel] = useState(activeTab || defaultActiveTab || tabs[0].name);
@@ -33,7 +35,12 @@ export const Tabs: React.FC<TabsProps> = ({
 
   return (
     <div className={classNames('Tabs', className)} {...rest}>
-      <TabList tabs={tabs} onTabSelected={handleTabClick} activePanel={activePanel} />
+      <TabList
+        tabs={tabs}
+        onTabSelected={handleTabClick}
+        activePanel={activePanel}
+        className={tabListClassName}
+      />
       <TabPanels panels={tabs} activePanel={activePanel} />
     </div>
   );

package/src/components/index.ts

@@ -27,6 +27,7 @@ export * from './Modal';
 export * from './ModalOverlay';
 export * from './Overlay';
 export * from './Paginator';
+export * from './OtpInput';
 export * from './PasswordInput';
 export * from './Popover';
 export * from './PromoBanner';

package/src/global.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+declare global {
+  namespace JSX {
+    type Element = React.ReactElement<unknown, string | React.JSXElementConstructor<unknown>>;
+  }
+}
+
+export {};