@semcore/tab-panel 4.42.4 → 4.43.0-prerelease.0

package/lib/esm/style/tab-panel.shadow.css

@@ -9,7 +9,7 @@ STabPanel {
     bottom: -1px;
     flex: 1;
     border-top: 1px solid transparent;
-    border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
+    border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 }
 
@@ -19,7 +19,7 @@ STabPanelItem {
   display: inline-flex;
   min-width: 0;
   height: 32px;
-  color: var(--intergalactic-text-secondary, #6c6e79);
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
   border: 1px solid transparent;
   border-bottom: none;
   border-radius: var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px) 0 0;
@@ -35,32 +35,23 @@ STabPanelItem {
   box-shadow: none;
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
-  outline: 0;
   text-align: center;
   vertical-align: middle;
   font-family: inherit;
   cursor: pointer;
 
-  & SText {
-    font-size: var(--intergalactic-fs-200, 14px);
-    line-height: var(--intergalactic-lh-200, 142%);
-    font-weight: var(--intergalactic-medium, 500);
-  }
-
   &::-moz-focus-inner {
     border: none;
     padding: 0;
   }
 
   &:active,
-  &:hover,
-  &:focus {
-    outline: 0;
+  &:hover {
     text-decoration: none;
   }
 
   &:hover {
-    color: var(--intergalactic-text-primary, #191b23);
+    color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   }
 
   &::after {
@@ -69,7 +60,7 @@ STabPanelItem {
     left: -1px;
     bottom: 0px;
     width: calc(100% + 2px);
-    border-bottom: 1px solid var(--intergalactic-border-primary, #c4c7cf);
+    border-bottom: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   }
 }
 
@@ -80,21 +71,17 @@ STabPanelItem[disabled] {
 
   & SText,
   & SAddon {
-    opacity: var(--intergalactic-disabled-opacity, 0.3);
+    opacity: var(--intergalactic-disabled-opacity, 0.4);
   }
 }
 
-STabPanelItem[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-}
-
 STabPanelItem[selected] {
-  color: var(--intergalactic-text-link, #006dca);
-  border-color: var(--intergalactic-border-primary, #c4c7cf);
+  color: var(--intergalactic-text-link, oklch(0.53 0.214 263.4));
+  border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   flex-shrink: 0;
 
   &:hover {
-    color: var(--intergalactic-text-link-hover-active, #044792);
+    color: var(--intergalactic-text-link-hover-active, oklch(0.51 0.206 263.4));
   }
 
   &::after {
@@ -103,11 +90,7 @@ STabPanelItem[selected] {
 }
 
 SText {
-  display: inline-block;
   margin: auto var(--intergalactic-spacing-2x, 8px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 SAddon {
@@ -127,4 +110,4 @@ SAddon:not(:only-child):last-child {
 SAddon:only-child {
   margin-right: var(--intergalactic-spacing-2x, 8px);
   margin-left: var(--intergalactic-spacing-2x, 8px);
-}
+}

package/lib/types/TabPanel.d.ts

@@ -0,0 +1,6 @@
+import type { Intergalactic } from '@semcore/core';
+import React from 'react';
+import type { NSTabPanel } from './TabPanel.type';
+declare const TabPanel: NSTabPanel.Component;
+export declare const wrapTabPanel: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<NSTabPanel.WrapperComponent>> & PropsExtending) => React.ReactNode) => NSTabPanel.WrapperComponent<PropsExtending>;
+export default TabPanel;

package/lib/types/TabPanel.type.d.ts

@@ -0,0 +1,71 @@
+import type { Box, BoxProps } from '@semcore/base-components';
+import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { NSText } from '@semcore/typography';
+declare namespace NSTabPanel {
+    type Value = string | number | boolean;
+    type Props<V extends NSTabPanel.Value = NSTabPanel.Value> = BoxProps & {
+        /** Is invoked when changing the selection */
+        onChange?: ((value: V, e?: React.SyntheticEvent<HTMLButtonElement>) => void) | React.Dispatch<React.SetStateAction<V>>;
+        /** Value of the selected tab */
+        value?: V;
+        /** Default value of the selected tab
+         * @default null
+         * */
+        defaultValue?: V;
+        /**
+         * Behavior of tabs.
+         * In `auto`, changes the tab immediately when press arrow.
+         * In `manual`, needs to press `space` or `enter` for select a choice.
+         * @default 'auto'
+         */
+        behavior?: 'auto' | 'manual';
+    };
+    type Ctx = {
+        getItemProps: PropGetterFn;
+    };
+    type Handlers = {
+        value: null;
+    };
+    namespace Item {
+        type Props = BoxProps & {
+            /** Makes a tab selected. This property is determined automatically depending on the value. */
+            selected?: boolean;
+            /** Disabled state */
+            disabled?: boolean;
+            /** Tab value */
+            value?: NSTabPanel.Value;
+            /** Left addon tag  */
+            addonLeft?: React.ElementType;
+            /** Right addon tag  */
+            addonRight?: React.ElementType;
+        };
+        namespace Text {
+            type Props = NSText.Props;
+            type Component = NSText.Component;
+        }
+        namespace Addon {
+            type Component = typeof Box;
+        }
+        type Component = Intergalactic.Component<'div', Props, {}, [handlers: NSTabPanel.Handlers]> & {
+            Text: Text.Component;
+            Addon: Addon.Component;
+        };
+    }
+    type WrapperComponent<PropsExtending = {}> = (<V extends NSTabPanel.Value, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', Props<V>, Ctx, [
+        handlers: Handlers
+    ]> & PropsExtending) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', Props>;
+    type Component = WrapperComponent & {
+        Item: Item.Component;
+    };
+}
+/** @deprecated It will be removed in v18. */
+export type TabPanelValue = NSTabPanel.Value;
+/** @deprecated It will be removed in v18. */
+export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = NSTabPanel.Props<T>;
+/** @deprecated It will be removed in v18. */
+export type TabPanelItemProps = NSTabPanel.Item.Props;
+/** @deprecated It will be removed in v18. */
+export type TabPanelContext = NSTabPanel.Ctx;
+/** @deprecated It will be removed in v18. */
+export type TabPanelHandlers = NSTabPanel.Handlers;
+export type { NSTabPanel };

package/lib/types/index.d.ts

@@ -1,92 +1,2 @@
-import React from 'react';
-import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import { Box, BoxProps } from '@semcore/flex-box';
-import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabPanelValue = string | number | boolean;
-
-/** @deprecated */
-export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>
-  extends TabPanelProps<T>,
-    UnknownProperties {}
-export type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {
-  /** Is invoked when changing the selection */
-  onChange?:
-    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)
-    | React.Dispatch<React.SetStateAction<T>>;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-  /**
-   * Behavior of tabs.
-   * In `auto`, changes the tab immediately when press arrow.
-   * In `manual`, needs to press `space` or `enter` for select a choice.
-   * @default 'auto'
-   */
-  behavior?: 'auto' | 'manual';
-};
-
-/** @deprecated */
-export interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}
-export type TabPanelItemProps = BoxProps &
-  KeyboardFocusProps & {
-    /** Makes a tab selected. This property is determined automatically depending on the value. */
-    selected?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Tab value */
-    value?: TabPanelValue;
-    /** Left addon tag  */
-    addonLeft?: React.ElementType;
-    /** Right addon tag  */
-    addonRight?: React.ElementType;
-  };
-
-/** @deprecated */
-export interface ITabPanelContext extends TabPanelContext, UnknownProperties {}
-export type TabPanelContext = {
-  getItemProps: PropGetterFn;
-};
-
-/** @deprecated */
-export interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}
-export type TabPanelHandlers = {
-  value: (value: TabPanelValue) => void;
-};
-
-type IntergalacticTabPanelComponent<PropsExtending = {}> = (<
-  Value extends TabPanelValue,
-  Tag extends Intergalactic.Tag = 'div',
->(
-  props: Intergalactic.InternalTypings.ComponentProps<
-    Tag,
-    'div',
-    TabPanelProps<Value>,
-    TabPanelContext,
-    [handlers: TabPanelHandlers]
-  > &
-    PropsExtending,
-) => Intergalactic.InternalTypings.ComponentRenderingResults) &
-  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;
-
-declare const TabPanel: IntergalacticTabPanelComponent & {
-  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-declare const wrapTabPanel: <PropsExtending extends {}>(
-  wrapper: (
-    props: Intergalactic.InternalTypings.UntypeRefAndTag<
-      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>
-    > &
-      PropsExtending,
-  ) => React.ReactNode,
-) => IntergalacticTabPanelComponent<PropsExtending>;
-export { wrapTabPanel };
-
-export default TabPanel;
+export { default, wrapTabPanel } from './TabPanel';
+export * from './TabPanel.type';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "4.42.4",
+  "version": "4.43.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,11 +14,11 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.48.5",
-    "@semcore/flex-box": "5.41.4"
+    "@semcore/utils": "4.49.0-prerelease.0",
+    "@semcore/flex-box": "5.42.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.40.0-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },

package/lib/cjs/index.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends TabPanelProps<T>,\n    UnknownProperties {}\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n  /**\n   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Makes a tab selected. This property is determined automatically depending on the value. */\n    selected?: boolean;\n    /** Disabled state */\n    disabled?: boolean;\n    /** Tab value */\n    value?: TabPanelValue;\n    /** Left addon tag  */\n    addonLeft?: React.ElementType;\n    /** Right addon tag  */\n    addonRight?: React.ElementType;\n  };\n\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n    PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n      PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":""}

package/lib/es6/index.d.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.js.map

package/lib/es6/index.d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\n/** @deprecated */\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue>\n  extends TabPanelProps<T>,\n    UnknownProperties {}\nexport type TabPanelProps<T extends TabPanelValue = TabPanelValue> = BoxProps & {\n  /** Is invoked when changing the selection */\n  onChange?:\n    | ((value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Value of the selected tab */\n  value?: T;\n  /** Default value of the selected tab\n   * @default null\n   * */\n  defaultValue?: T;\n  /**\n   * Behavior of tabs.\n   * In `auto`, changes the tab immediately when press arrow.\n   * In `manual`, needs to press `space` or `enter` for select a choice.\n   * @default 'auto'\n   */\n  behavior?: 'auto' | 'manual';\n};\n\n/** @deprecated */\nexport interface ITabPanelItemProps extends TabPanelItemProps, UnknownProperties {}\nexport type TabPanelItemProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Makes a tab selected. This property is determined automatically depending on the value. */\n    selected?: boolean;\n    /** Disabled state */\n    disabled?: boolean;\n    /** Tab value */\n    value?: TabPanelValue;\n    /** Left addon tag  */\n    addonLeft?: React.ElementType;\n    /** Right addon tag  */\n    addonRight?: React.ElementType;\n  };\n\n/** @deprecated */\nexport interface ITabPanelContext extends TabPanelContext, UnknownProperties {}\nexport type TabPanelContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITabPanelHandlers extends TabPanelHandlers, UnknownProperties {}\nexport type TabPanelHandlers = {\n  value: (value: TabPanelValue) => void;\n};\n\ntype IntergalacticTabPanelComponent<PropsExtending = {}> = (<\n  Value extends TabPanelValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    'div',\n    TabPanelProps<Value>,\n    TabPanelContext,\n    [handlers: TabPanelHandlers]\n  > &\n    PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n  Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\ndeclare const wrapTabPanel: <PropsExtending extends {}>(\n  wrapper: (\n    props: Intergalactic.InternalTypings.UntypeRefAndTag<\n      Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticTabPanelComponent>\n    > &\n      PropsExtending,\n  ) => React.ReactNode,\n) => IntergalacticTabPanelComponent<PropsExtending>;\nexport { wrapTabPanel };\n\nexport default TabPanel;\n"],"mappings":""}