@semcore/tab-panel 3.0.7 → 3.0.9

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.9] - 2022-09-30
+
+### Added
+
+- Added styles for panel consisting only of an icon.
+
+## [3.0.8] - 2022-09-07
+
+### Fixed
+
+- Enforced inner text font line height to prevent possible bottom cut.
+
 ## [3.0.7] - 2022-08-30
 
 ### Changed

package/lib/cjs/TabPanel.js

@@ -52,18 +52,18 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1fwpm_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1fwpm_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1fwpm_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1fwpm_gg_:active,.___STabPanelItem_1fwpm_gg_:focus,.___STabPanelItem_1fwpm_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1fwpm_gg_:hover{color:#191b23}.___STabPanelItem_1fwpm_gg_.__disabled_1fwpm_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1fwpm_gg_.__keyboardFocused_1fwpm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1fwpm_gg_.__selected_1fwpm_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1fwpm_gg_.__selected_1fwpm_gg_:hover{color:#006dca}.___SText_1fwpm_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1fwpm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1fwpm_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1fwpm_gg_:not(:only-child):last-child{margin-right:8px}"
+".___STabPanel_2imgl_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_2imgl_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_2imgl_gg_ .___SText_2imgl_gg_{font-size:14px;line-height:1.42}.___STabPanelItem_2imgl_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_2imgl_gg_:active,.___STabPanelItem_2imgl_gg_:focus,.___STabPanelItem_2imgl_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_2imgl_gg_:hover{color:#191b23}.___STabPanelItem_2imgl_gg_.__disabled_2imgl_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_2imgl_gg_.__keyboardFocused_2imgl_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_2imgl_gg_.__selected_2imgl_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_2imgl_gg_.__selected_2imgl_gg_:hover{color:#006dca}.___SText_2imgl_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_2imgl_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_2imgl_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_2imgl_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_2imgl_gg_:only-child{margin-right:8px;margin-left:8px}"
 /*__inner_css_end__*/
-, "1fwpm_gg_")
+, "2imgl_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1fwpm_gg_",
-  "__STabPanelItem": "___STabPanelItem_1fwpm_gg_",
-  "_disabled": "__disabled_1fwpm_gg_",
-  "_keyboardFocused": "__keyboardFocused_1fwpm_gg_",
-  "_selected": "__selected_1fwpm_gg_",
-  "__SText": "___SText_1fwpm_gg_",
-  "__SAddon": "___SAddon_1fwpm_gg_"
+  "__STabPanel": "___STabPanel_2imgl_gg_",
+  "__STabPanelItem": "___STabPanelItem_2imgl_gg_",
+  "__SText": "___SText_2imgl_gg_",
+  "_disabled": "__disabled_2imgl_gg_",
+  "_keyboardFocused": "__keyboardFocused_2imgl_gg_",
+  "_selected": "__selected_2imgl_gg_",
+  "__SAddon": "___SAddon_2imgl_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {

package/lib/cjs/index.d.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\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\nexport interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {\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\nexport interface ITabPanelContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface ITabPanelHandlers {\n  value: (value: TabPanelValue) => void;\n}\n\ndeclare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(\n  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\nexport default TabPanel;\n"],"mappings":""}

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

@@ -13,7 +13,6 @@ STabPanelItem {
   display: inline-flex;
   min-width: 0;
   height: 32px;
-  font-size: var(--fs-200);
   color: var(--gray-500);
   border: 1px solid transparent;
   border-radius: 6px 6px 0 0;
@@ -35,6 +34,11 @@ STabPanelItem {
   font-family: inherit;
   cursor: pointer;
 
+  & SText {
+    font-size: var(--fs-200);
+    line-height: var(--lh-200);
+  }
+
   &::-moz-focus-inner {
     border: none;
     padding: 0;
@@ -94,3 +98,8 @@ SAddon:not(:only-child):first-child {
 SAddon:not(:only-child):last-child {
   margin-right: 8px;
 }
+
+SAddon:only-child {
+  margin-right: 8px;
+  margin-left: 8px;
+}

package/lib/es6/TabPanel.js

@@ -31,18 +31,18 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STabPanel_1fwpm_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_1fwpm_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;font-size:14px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1fwpm_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_1fwpm_gg_:active,.___STabPanelItem_1fwpm_gg_:focus,.___STabPanelItem_1fwpm_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_1fwpm_gg_:hover{color:#191b23}.___STabPanelItem_1fwpm_gg_.__disabled_1fwpm_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_1fwpm_gg_.__keyboardFocused_1fwpm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_1fwpm_gg_.__selected_1fwpm_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_1fwpm_gg_.__selected_1fwpm_gg_:hover{color:#006dca}.___SText_1fwpm_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1fwpm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1fwpm_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_1fwpm_gg_:not(:only-child):last-child{margin-right:8px}"
+".___STabPanel_2imgl_gg_{display:flex;width:100%;max-width:100%;border-bottom:1px solid #c4c7cf}.___STabPanelItem_2imgl_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:#6c6e79;border:1px solid transparent;border-radius:6px 6px 0 0;background:transparent;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_2imgl_gg_ .___SText_2imgl_gg_{font-size:14px;line-height:1.42}.___STabPanelItem_2imgl_gg_::-moz-focus-inner{border:none;padding:0}.___STabPanelItem_2imgl_gg_:active,.___STabPanelItem_2imgl_gg_:focus,.___STabPanelItem_2imgl_gg_:hover{outline:0;text-decoration:none}.___STabPanelItem_2imgl_gg_:hover{color:#191b23}.___STabPanelItem_2imgl_gg_.__disabled_2imgl_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STabPanelItem_2imgl_gg_.__keyboardFocused_2imgl_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STabPanelItem_2imgl_gg_.__selected_2imgl_gg_{color:#006dca;border-color:#c4c7cf;border-bottom-color:#ffffff;flex-shrink:0}.___STabPanelItem_2imgl_gg_.__selected_2imgl_gg_:hover{color:#006dca}.___SText_2imgl_gg_{display:inline-block;margin:auto 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_2imgl_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_2imgl_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_2imgl_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_2imgl_gg_:only-child{margin-right:8px;margin-left:8px}"
 /*__inner_css_end__*/
-, "1fwpm_gg_")
+, "2imgl_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STabPanel": "___STabPanel_1fwpm_gg_",
-  "__STabPanelItem": "___STabPanelItem_1fwpm_gg_",
-  "_disabled": "__disabled_1fwpm_gg_",
-  "_keyboardFocused": "__keyboardFocused_1fwpm_gg_",
-  "_selected": "__selected_1fwpm_gg_",
-  "__SText": "___SText_1fwpm_gg_",
-  "__SAddon": "___SAddon_1fwpm_gg_"
+  "__STabPanel": "___STabPanel_2imgl_gg_",
+  "__STabPanelItem": "___STabPanelItem_2imgl_gg_",
+  "__SText": "___SText_2imgl_gg_",
+  "_disabled": "__disabled_2imgl_gg_",
+  "_keyboardFocused": "__keyboardFocused_2imgl_gg_",
+  "_selected": "__selected_2imgl_gg_",
+  "__SAddon": "___SAddon_2imgl_gg_"
 });
 var optionsA11yEnhance = {
   onNeighborChange: function onNeighborChange(neighborElement) {

package/lib/es6/index.d.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TabPanelValue = string | number | boolean;\n\nexport interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {\n  /** Is invoked when changing the selection */\n  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;\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\nexport interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {\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\nexport interface ITabPanelContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface ITabPanelHandlers {\n  value: (value: TabPanelValue) => void;\n}\n\ndeclare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(\n  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {\n    Text: typeof Box;\n    Addon: typeof Box;\n  };\n};\n\nexport default TabPanel;\n"],"mappings":""}

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

@@ -13,7 +13,6 @@ STabPanelItem {
   display: inline-flex;
   min-width: 0;
   height: 32px;
-  font-size: var(--fs-200);
   color: var(--gray-500);
   border: 1px solid transparent;
   border-radius: 6px 6px 0 0;
@@ -35,6 +34,11 @@ STabPanelItem {
   font-family: inherit;
   cursor: pointer;
 
+  & SText {
+    font-size: var(--fs-200);
+    line-height: var(--lh-200);
+  }
+
   &::-moz-focus-inner {
     border: none;
     padding: 0;
@@ -94,3 +98,8 @@ SAddon:not(:only-child):first-child {
 SAddon:not(:only-child):last-child {
   margin-right: 8px;
 }
+
+SAddon:only-child {
+  margin-right: 8px;
+  margin-left: 8px;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/tab-panel",
   "description": "Semrush TabPanel Component",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,7 +9,7 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build --source=js",
+    "build": "pnpm semcore-builder --source=js",
     "test": "jest"
   },
   "dependencies": {
@@ -29,6 +29,8 @@
     "directory": "semcore/tab-panel"
   },
   "devDependencies": {
-    "@semcore/jest-preset-ui": "1.0.0"
+    "@types/react": "16.8 - 17",
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@semcore/icon": "^2.16"
   }
 }

package/lib/cjs/index.d.ts

@@ -1,49 +0,0 @@
-import React from 'react';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabPanelValue = string | number | boolean;
-
-export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {
-  /** Is invoked when changing the selection */
-  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-}
-
-export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
-  /** 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;
-}
-
-export interface ITabPanelContext {
-  getItemProps: PropGetterFn;
-}
-
-export interface ITabPanelHandlers {
-  value: (value: TabPanelValue) => void;
-}
-
-declare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(
-  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,
-) => ReturnEl) & {
-  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-export default TabPanel;

package/lib/es6/index.d.ts

@@ -1,49 +0,0 @@
-import React from 'react';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-export type TabPanelValue = string | number | boolean;
-
-export interface ITabPanelProps<T extends TabPanelValue = TabPanelValue> extends IBoxProps {
-  /** Is invoked when changing the selection */
-  onChange?: (value: T, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** Value of the selected tab */
-  value?: T;
-  /** Default value of the selected tab
-   * @default null
-   * */
-  defaultValue?: T;
-}
-
-export interface ITabPanelItemProps extends IBoxProps, IKeyboardFocusProps {
-  /** 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;
-}
-
-export interface ITabPanelContext {
-  getItemProps: PropGetterFn;
-}
-
-export interface ITabPanelHandlers {
-  value: (value: TabPanelValue) => void;
-}
-
-declare const TabPanel: (<T, V extends TabPanelValue = TabPanelValue>(
-  props: CProps<ITabPanelProps<V> & T, ITabPanelContext, ITabPanelHandlers>,
-) => ReturnEl) & {
-  Item: (<T>(props: CProps<ITabPanelItemProps & T, {}, ITabPanelHandlers>) => ReturnEl) & {
-    Text: typeof Box;
-    Addon: typeof Box;
-  };
-};
-
-export default TabPanel;