@semcore/tab-panel 4.42.1 → 16.0.0-prerelease.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/lib/cjs/TabPanel.js +12 -16
  3. package/lib/cjs/TabPanel.js.map +1 -1
  4. package/lib/cjs/index.d.js.map +1 -1
  5. package/lib/cjs/style/tab-panel.shadow.css +2 -9
  6. package/lib/es6/TabPanel.js +12 -14
  7. package/lib/es6/TabPanel.js.map +1 -1
  8. package/lib/es6/index.d.js.map +1 -1
  9. package/lib/es6/style/tab-panel.shadow.css +2 -9
  10. package/lib/esm/TabPanel.mjs +65 -68
  11. package/lib/types/index.d.ts +1 -1
  12. package/package.json +3 -6
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [16.0.0] - 2025-02-13
6
+
7
+ ### Changed
8
+
9
+ - `keyboardFocusEnhance` to css `:focus-visible` property.
10
+
5
11
  ## [4.42.1] - 2025-03-20
6
12
 
7
13
  ### Changed
package/lib/cjs/TabPanel.js CHANGED
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
@@ -13,22 +12,19 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
13
12
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
14
13
  var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
15
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
- var _index = require("@semcore/utils/lib/core/index");
17
- var _core = _interopRequireWildcard(require("@semcore/core"));
15
+ var _core = require("@semcore/core");
18
16
  var _react = _interopRequireDefault(require("react"));
19
17
  var _flexBox = require("@semcore/flex-box");
20
- var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
21
- var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
22
- var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
18
+ var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
19
+ var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
23
20
  /*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
24
- var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STabPanel_1slc9_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1slc9_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;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 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1slc9_gg_ .___SText_1slc9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1slc9_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1slc9_gg_:active,.___STabPanelItem_1slc9_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1slc9_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1slc9_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SAddon_1slc9_gg_,.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SText_1slc9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1slc9_gg_.__keyboardFocused_1slc9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_::after{border-bottom:none}.___SText_1slc9_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1slc9_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1slc9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1slc9_gg_") /*__reshadow_css_end__*/, {
25
- "__STabPanelItem": "___STabPanelItem_1slc9_gg_",
26
- "_keyboardFocused": "__keyboardFocused_1slc9_gg_",
27
- "__SText": "___SText_1slc9_gg_",
28
- "__SAddon": "___SAddon_1slc9_gg_",
29
- "__STabPanel": "___STabPanel_1slc9_gg_",
30
- "_disabled": "__disabled_1slc9_gg_",
31
- "_selected": "__selected_1slc9_gg_"
21
+ var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;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 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1uh8o_gg_") /*__reshadow_css_end__*/, {
22
+ "__SText": "___SText_1uh8o_gg_",
23
+ "__SAddon": "___SAddon_1uh8o_gg_",
24
+ "__STabPanel": "___STabPanel_1uh8o_gg_",
25
+ "__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
26
+ "_disabled": "__disabled_1uh8o_gg_",
27
+ "_selected": "__selected_1uh8o_gg_"
32
28
  });
33
29
  var optionsA11yEnhance = {
34
30
  onNeighborChange: function onNeighborChange(neighborElement, props) {
@@ -118,6 +114,7 @@ function TabPanelItem(props) {
118
114
  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STabPanelItem, _ref6.cn("STabPanelItem", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
119
115
  "type": 'button',
120
116
  "tag": 'button',
117
+ "tabIndex": 0,
121
118
  "role": 'tab'
122
119
  }, _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(TabPanel.Item.Addon, {
123
120
  tag: addonLeft
@@ -125,7 +122,6 @@ function TabPanelItem(props) {
125
122
  tag: addonRight
126
123
  }) : null);
127
124
  }
128
- TabPanelItem.enhance = [(0, _keyboardFocusEnhance["default"])()];
129
125
  function Text(props) {
130
126
  var _ref3 = arguments[0],
131
127
  _ref7;
@@ -144,7 +140,7 @@ function Addon(props) {
144
140
  "tag": 'span'
145
141
  }, _ref4))));
146
142
  }
147
- var TabPanel = (0, _core["default"])(TabPanelRoot, {
143
+ var TabPanel = (0, _core.createComponent)(TabPanelRoot, {
148
144
  Item: [TabPanelItem, {
149
145
  Text: Text,
150
146
  Addon: Addon
package/lib/cjs/TabPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_a11yEnhance","_keyboardFocusEnhance","style","_index","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","event","handlers","key","preventDefault","_createClass2","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","_objectSpread2","assignProps","Component","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Addon","tag","addonTextChildren","Text","enhance","keyboardFocusEnhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n behavior: 'manual',\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value) => (event) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n selected: isSelected,\n onClick: this.handleClick(props.value),\n onKeyDown: this.handleKeyDown(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n}\n\nfunction TabPanelItem(props) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' role='tab'>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nTabPanelItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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"}
1
+ {"version":3,"file":"TabPanel.js","names":["_core","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_a11yEnhance","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","event","handlers","key","preventDefault","_createClass2","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","_objectSpread2","assignProps","Component","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n behavior: 'manual',\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value) => (event) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n selected: isSelected,\n onClick: this.handleClick(props.value),\n onKeyDown: this.handleKeyDown(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n}\n\nfunction TabPanelItem(props) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab'>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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"}
package/lib/cjs/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"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":""}
1
+ {"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/core/lib/utils/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/cjs/style/tab-panel.shadow.css CHANGED
@@ -35,7 +35,6 @@ STabPanelItem {
35
35
  box-shadow: none;
36
36
  text-decoration: none;
37
37
  -webkit-tap-highlight-color: transparent;
38
- outline: 0;
39
38
  text-align: center;
40
39
  vertical-align: middle;
41
40
  font-family: inherit;
@@ -53,9 +52,7 @@ STabPanelItem {
53
52
  }
54
53
 
55
54
  &:active,
56
- &:hover,
57
- &:focus {
58
- outline: 0;
55
+ &:hover {
59
56
  text-decoration: none;
60
57
  }
61
58
 
@@ -84,10 +81,6 @@ STabPanelItem[disabled] {
84
81
  }
85
82
  }
86
83
 
87
- STabPanelItem[keyboardFocused] {
88
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
89
- }
90
-
91
84
  STabPanelItem[selected] {
92
85
  color: var(--intergalactic-text-link, #006dca);
93
86
  border-color: var(--intergalactic-border-primary, #c4c7cf);
@@ -127,4 +120,4 @@ SAddon:not(:only-child):last-child {
127
120
  SAddon:only-child {
128
121
  margin-right: var(--intergalactic-spacing-2x, 8px);
129
122
  margin-left: var(--intergalactic-spacing-2x, 8px);
130
- }
123
+ }
package/lib/es6/TabPanel.js CHANGED
@@ -5,26 +5,24 @@ import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized
5
5
  import _inherits from "@babel/runtime/helpers/inherits";
6
6
  import _createSuper from "@babel/runtime/helpers/createSuper";
7
7
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
- import { sstyled as _sstyled } from "@semcore/utils/lib/core/index";
8
+ import { sstyled as _sstyled } from "@semcore/core";
9
9
  import { assignProps as _assignProps4 } from "@semcore/core";
10
10
  import { assignProps as _assignProps3 } from "@semcore/core";
11
11
  import { assignProps as _assignProps2 } from "@semcore/core";
12
12
  import { assignProps as _assignProps } from "@semcore/core";
13
13
  import React from 'react';
14
- import createComponent, { Component, sstyled, Root } from '@semcore/core';
14
+ import { createComponent, Component, sstyled, Root } from '@semcore/core';
15
15
  import { Box } from '@semcore/flex-box';
16
- import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
17
- import a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';
18
- import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
16
+ import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';
17
+ import a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';
19
18
  /*__reshadow-styles__:"./style/tab-panel.shadow.css"*/
20
- var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabPanel_1slc9_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1slc9_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;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 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1slc9_gg_ .___SText_1slc9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1slc9_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1slc9_gg_:active,.___STabPanelItem_1slc9_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1slc9_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1slc9_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SAddon_1slc9_gg_,.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SText_1slc9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1slc9_gg_.__keyboardFocused_1slc9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_::after{border-bottom:none}.___SText_1slc9_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1slc9_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1slc9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1slc9_gg_") /*__reshadow_css_end__*/, {
21
- "__STabPanelItem": "___STabPanelItem_1slc9_gg_",
22
- "_keyboardFocused": "__keyboardFocused_1slc9_gg_",
23
- "__SText": "___SText_1slc9_gg_",
24
- "__SAddon": "___SAddon_1slc9_gg_",
25
- "__STabPanel": "___STabPanel_1slc9_gg_",
26
- "_disabled": "__disabled_1slc9_gg_",
27
- "_selected": "__selected_1slc9_gg_"
19
+ var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:\"\";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;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 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:\"\";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}" /*__inner_css_end__*/, "1uh8o_gg_") /*__reshadow_css_end__*/, {
20
+ "__SText": "___SText_1uh8o_gg_",
21
+ "__SAddon": "___SAddon_1uh8o_gg_",
22
+ "__STabPanel": "___STabPanel_1uh8o_gg_",
23
+ "__STabPanelItem": "___STabPanelItem_1uh8o_gg_",
24
+ "_disabled": "__disabled_1uh8o_gg_",
25
+ "_selected": "__selected_1uh8o_gg_"
28
26
  });
29
27
  var optionsA11yEnhance = {
30
28
  onNeighborChange: function onNeighborChange(neighborElement, props) {
@@ -114,6 +112,7 @@ function TabPanelItem(props) {
114
112
  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STabPanelItem, _ref6.cn("STabPanelItem", _objectSpread({}, _assignProps2({
115
113
  "type": 'button',
116
114
  "tag": 'button',
115
+ "tabIndex": 0,
117
116
  "role": 'tab'
118
117
  }, _ref2))), addonLeft ? /*#__PURE__*/React.createElement(TabPanel.Item.Addon, {
119
118
  tag: addonLeft
@@ -121,7 +120,6 @@ function TabPanelItem(props) {
121
120
  tag: addonRight
122
121
  }) : null);
123
122
  }
124
- TabPanelItem.enhance = [keyboardFocusEnhance()];
125
123
  function Text(props) {
126
124
  var _ref3 = arguments[0],
127
125
  _ref7;
package/lib/es6/TabPanel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","keyboardFocusEnhance","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","event","handlers","key","preventDefault","_createClass","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","_assignProps2","TabPanel","Item","Addon","tag","Text","enhance","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n behavior: 'manual',\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value) => (event) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n selected: isSelected,\n onClick: this.handleClick(props.value),\n onKeyDown: this.handleKeyDown(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n}\n\nfunction TabPanelItem(props) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' role='tab'>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nTabPanelItem.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":"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"}
1
+ {"version":3,"file":"TabPanel.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","a11yEnhance","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","_Component","_inherits","_super","_createSuper","_this","_classCallCheck","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty","_assertThisInitialized","value","event","handlers","key","preventDefault","_createClass","uncontrolledProps","getItemProps","index","asProps","isSelected","selected","onClick","handleClick","onKeyDown","handleKeyDown","tabIndex","render","_ref","_ref5","STabPanel","styles","createElement","cn","_objectSpread","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","_assignProps2","TabPanel","Item","Addon","tag","Text","_ref3","_ref7","SText","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import React from 'react';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\n\nimport style from './style/tab-panel.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: ['role', 'tab'],\n};\n\nclass TabPanelRoot extends Component {\n static displayName = 'TabPanel';\n static style = style;\n static defaultProps = {\n defaultValue: null,\n behavior: 'manual',\n };\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n handleClick = (value) => (event) => {\n this.handlers.value(value, event);\n };\n\n handleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value } = this.asProps;\n const isSelected = value === props.value;\n return {\n selected: isSelected,\n onClick: this.handleClick(props.value),\n onKeyDown: this.handleKeyDown(props.value),\n tabIndex: isSelected ? 0 : -1,\n 'aria-selected': isSelected,\n };\n }\n\n render() {\n const STabPanel = Root;\n const { styles } = this.asProps;\n\n return sstyled(styles)(<STabPanel render={Box} role='tablist' />);\n }\n}\n\nfunction TabPanelItem(props) {\n const STabPanelItem = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab'>\n {addonLeft ? <TabPanel.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, TabPanel.Item.Text, TabPanel.Item.Addon)}\n {addonRight ? <TabPanel.Item.Addon tag={addonRight} /> : null}\n </STabPanelItem>,\n );\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst TabPanel = createComponent(TabPanelRoot, {\n Item: [TabPanelItem, { Text, Addon }],\n});\n\nexport const wrapTabPanel = (wrapper) => wrapper;\n\nexport default TabPanel;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,SAAS,EAAEC,OAAO,EAAEC,IAAI,QAAQ,eAAe;AACzE,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,iBAAiB,MAAM,2CAA2C;AACzE,OAAOC,WAAW,MAAM,8CAA8C;AAAC;AAAA,IAAAC,KAAA,+BAAAC,QAAA,CAAAC,MAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAIvE,IAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAE,SAAAA,iBAACC,eAAe,EAAEC,KAAK,EAAK;IAC5C,IAAID,eAAe,EAAE;MACnBA,eAAe,CAACE,KAAK,EAAE;MACvB,IAAID,KAAK,CAACE,QAAQ,KAAK,MAAM,EAAE;QAC7BH,eAAe,CAACI,KAAK,EAAE;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC;AAAC,IAEIC,YAAY,0BAAAC,UAAA;EAAAC,SAAA,CAAAF,YAAA,EAAAC,UAAA;EAAA,IAAAE,MAAA,GAAAC,YAAA,CAAAJ,YAAA;EAAA,SAAAA,aAAA;IAAA,IAAAK,KAAA;IAAAC,eAAA,OAAAN,YAAA;IAAA,SAAAO,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAAM,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,kBAeF,UAACa,KAAK;MAAA,OAAK,UAACC,KAAK,EAAK;QAClCd,KAAA,CAAKe,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;MACnC,CAAC;IAAA;IAAAH,eAAA,CAAAC,sBAAA,CAAAZ,KAAA,oBAEe,UAACa,KAAK;MAAA,OAAK,UAACC,KAAK,EAAK;QACpC,IAAIA,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;UAC9CF,KAAK,CAACG,cAAc,EAAE;UACtBjB,KAAA,CAAKe,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;QACnC;MACF,CAAC;IAAA;IAAA,OAAAd,KAAA;EAAA;EAAAkB,YAAA,CAAAvB,YAAA;IAAAqB,GAAA;IAAAH,KAAA,EAfD,SAAAM,kBAAA,EAAoB;MAClB,OAAO;QACLN,KAAK,EAAE;MACT,CAAC;IACH;EAAC;IAAAG,GAAA;IAAAH,KAAA,EAaD,SAAAO,aAAa9B,KAAK,EAAE+B,KAAK,EAAE;MACzB,IAAQR,KAAK,GAAK,IAAI,CAACS,OAAO,CAAtBT,KAAK;MACb,IAAMU,UAAU,GAAGV,KAAK,KAAKvB,KAAK,CAACuB,KAAK;MACxC,OAAO;QACLW,QAAQ,EAAED,UAAU;QACpBE,OAAO,EAAE,IAAI,CAACC,WAAW,CAACpC,KAAK,CAACuB,KAAK,CAAC;QACtCc,SAAS,EAAE,IAAI,CAACC,aAAa,CAACtC,KAAK,CAACuB,KAAK,CAAC;QAC1CgB,QAAQ,EAAEN,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;QAC7B,eAAe,EAAEA;MACnB,CAAC;IACH;EAAC;IAAAP,GAAA;IAAAH,KAAA,EAED,SAAAiB,OAAA,EAAS;MAAA,IAAAC,IAAA,QAAAT,OAAA;QAAAU,KAAA;MACP,IAAMC,SAAS,GAG2BpD,GAAG;MAF7C,IAAQqD,MAAM,GAAK,IAAI,CAACZ,OAAO,CAAvBY,MAAM;MAEd,OAAAF,KAAA,GAAOrD,OAAO,CAACuD,MAAM,CAAC,eAAC1D,KAAA,CAAA2D,aAAA,CAACF,SAAS,EAAAD,KAAA,CAAAI,EAAA,cAAAC,aAAA,KAAAC,YAAA;QAAA,QAAmB;MAAS,GAAAP,IAAA,IAAG;IAClE;EAAC;EAAA,OAAApC,YAAA;AAAA,EA3CwBjB,SAAS;AAAAiC,eAAA,CAA9BhB,YAAY,iBACK,UAAU;AAAAgB,eAAA,CAD3BhB,YAAY,WAEDX,KAAK;AAAA2B,eAAA,CAFhBhB,YAAY,kBAGM;EACpB4C,YAAY,EAAE,IAAI;EAClB/C,QAAQ,EAAE;AACZ,CAAC;AAAAmB,eAAA,CANGhB,YAAY,aAOC,CAACZ,WAAW,CAACI,kBAAkB,CAAC,CAAC;AAuCpD,SAASqD,YAAYA,CAAClD,KAAK,EAAE;EAAA,IAAAmD,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC3B,IAAMC,aAAa,GAIM/D,GAAG;EAH5B,IAAQgE,QAAQ,GAAoCvD,KAAK,CAAjDuD,QAAQ;IAAEX,MAAM,GAA4B5C,KAAK,CAAvC4C,MAAM;IAAEY,SAAS,GAAiBxD,KAAK,CAA/BwD,SAAS;IAAEC,UAAU,GAAKzD,KAAK,CAApByD,UAAU;EAE/C,OAAAJ,KAAA,GAAOhE,OAAO,CAACuD,MAAM,CAAC,eACpB1D,KAAA,CAAA2D,aAAA,CAACS,aAAa,EAAAD,KAAA,CAAAP,EAAA,kBAAAC,aAAA,KAAAW,aAAA;IAAA,QAAmB,QAAQ;IAAA,OAAK,QAAQ;IAAA,YAAW,CAAC;IAAA,QAAO;EAAK,GAAAP,KAAA,KAC3EK,SAAS,gBAAGtE,KAAA,CAAA2D,aAAA,CAACc,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEN;EAAU,EAAG,GAAG,IAAI,EAC1DhE,iBAAiB,CAAC+D,QAAQ,EAAEI,QAAQ,CAACC,IAAI,CAACG,IAAI,EAAEJ,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC,EACpEJ,UAAU,gBAAGvE,KAAA,CAAA2D,aAAA,CAACc,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEL;EAAW,EAAG,GAAG,IAAI,CAC/C;AAEpB;AAEA,SAASM,IAAIA,CAAC/D,KAAK,EAAE;EAAA,IAAAgE,KAAA,GAAAZ,YAAA;IAAAa,KAAA;EACnB,IAAMC,KAAK,GAE2B3E,GAAG;EADzC,IAAQqD,MAAM,GAAK5C,KAAK,CAAhB4C,MAAM;EACd,OAAAqB,KAAA,GAAO5E,OAAO,CAACuD,MAAM,CAAC,eAAC1D,KAAA,CAAA2D,aAAA,CAACqB,KAAK,EAAAD,KAAA,CAAAnB,EAAA,UAAAC,aAAA,KAAAoB,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AAC1D;AAEA,SAASH,KAAKA,CAAC7D,KAAK,EAAE;EAAA,IAAAoE,KAAA,GAAAhB,YAAA;IAAAiB,KAAA;EACpB,IAAMC,MAAM,GAE2B/E,GAAG;EAD1C,IAAQqD,MAAM,GAAK5C,KAAK,CAAhB4C,MAAM;EACd,OAAAyB,KAAA,GAAOhF,OAAO,CAACuD,MAAM,CAAC,eAAC1D,KAAA,CAAA2D,aAAA,CAACyB,MAAM,EAAAD,KAAA,CAAAvB,EAAA,WAAAC,aAAA,KAAAwB,aAAA;IAAA,OAAkB;EAAM,GAAAH,KAAA,IAAG;AAC3D;AAEA,IAAMT,QAAQ,GAAGxE,eAAe,CAACkB,YAAY,EAAE;EAC7CuD,IAAI,EAAE,CAACV,YAAY,EAAE;IAAEa,IAAI,EAAJA,IAAI;IAAEF,KAAK,EAALA;EAAM,CAAC;AACtC,CAAC,CAAC;AAEF,OAAO,IAAMW,YAAY,GAAG,SAAfA,YAAYA,CAAIC,OAAO;EAAA,OAAKA,OAAO;AAAA;AAEhD,eAAed,QAAQ"}
package/lib/es6/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"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":""}
1
+ {"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/core/lib/utils/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/style/tab-panel.shadow.css CHANGED
@@ -35,7 +35,6 @@ STabPanelItem {
35
35
  box-shadow: none;
36
36
  text-decoration: none;
37
37
  -webkit-tap-highlight-color: transparent;
38
- outline: 0;
39
38
  text-align: center;
40
39
  vertical-align: middle;
41
40
  font-family: inherit;
@@ -53,9 +52,7 @@ STabPanelItem {
53
52
  }
54
53
 
55
54
  &:active,
56
- &:hover,
57
- &:focus {
58
- outline: 0;
55
+ &:hover {
59
56
  text-decoration: none;
60
57
  }
61
58
 
@@ -84,10 +81,6 @@ STabPanelItem[disabled] {
84
81
  }
85
82
  }
86
83
 
87
- STabPanelItem[keyboardFocused] {
88
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
89
- }
90
-
91
84
  STabPanelItem[selected] {
92
85
  color: var(--intergalactic-text-link, #006dca);
93
86
  border-color: var(--intergalactic-border-primary, #c4c7cf);
@@ -127,4 +120,4 @@ SAddon:not(:only-child):last-child {
127
120
  SAddon:only-child {
128
121
  margin-right: var(--intergalactic-spacing-2x, 8px);
129
122
  margin-left: var(--intergalactic-spacing-2x, 8px);
130
- }
123
+ }
package/lib/esm/TabPanel.mjs CHANGED
@@ -1,56 +1,53 @@
1
- import m from "@babel/runtime/helpers/esm/objectSpread2";
2
- import v from "@babel/runtime/helpers/esm/classCallCheck";
3
- import x from "@babel/runtime/helpers/esm/createClass";
4
- import f from "@babel/runtime/helpers/esm/assertThisInitialized";
5
- import y from "@babel/runtime/helpers/esm/inherits";
1
+ import h from "@babel/runtime/helpers/esm/objectSpread2";
2
+ import f from "@babel/runtime/helpers/esm/classCallCheck";
3
+ import v from "@babel/runtime/helpers/esm/createClass";
4
+ import p from "@babel/runtime/helpers/esm/assertThisInitialized";
5
+ import x from "@babel/runtime/helpers/esm/inherits";
6
6
  import S from "@babel/runtime/helpers/esm/createSuper";
7
- import s from "@babel/runtime/helpers/esm/defineProperty";
8
- import { sstyled as T } from "@semcore/utils/lib/core/index";
9
- import P, { sstyled as u, assignProps as b, Component as I } from "@semcore/core";
7
+ import d from "@babel/runtime/helpers/esm/defineProperty";
8
+ import { sstyled as g, createComponent as y, assignProps as m, Component as T } from "@semcore/core";
10
9
  import c from "react";
11
- import { Box as p } from "@semcore/flex-box";
12
- import k from "@semcore/utils/lib/addonTextChildren";
13
- import w from "@semcore/utils/lib/enhances/a11yEnhance";
14
- import A from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
15
- var C = (
10
+ import { Box as b } from "@semcore/flex-box";
11
+ import P from "@semcore/core/lib/utils/addonTextChildren";
12
+ import I from "@semcore/core/lib/utils/enhances/a11yEnhance";
13
+ var w = (
16
14
  /*__reshadow_css_start__*/
17
- (T.insert(
15
+ (g.insert(
18
16
  /*__inner_css_start__*/
19
- '.___STabPanel_1slc9_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1slc9_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;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 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1slc9_gg_ .___SText_1slc9_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1slc9_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1slc9_gg_:active,.___STabPanelItem_1slc9_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1slc9_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1slc9_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SAddon_1slc9_gg_,.___STabPanelItem_1slc9_gg_.__disabled_1slc9_gg_ .___SText_1slc9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1slc9_gg_.__keyboardFocused_1slc9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1slc9_gg_.__selected_1slc9_gg_::after{border-bottom:none}.___SText_1slc9_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1slc9_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1slc9_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1slc9_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
20
- "1slc9_gg_"
17
+ '.___STabPanel_1uh8o_gg_{display:flex;width:100%;max-width:100%}.___STabPanel_1uh8o_gg_::after{content:"";position:relative;bottom:-1px;flex:1;border-top:1px solid transparent;border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_{position:relative;bottom:-1px;display:inline-flex;min-width:0;height:32px;color:var(--intergalactic-text-secondary, #6c6e79);border:1px solid transparent;border-bottom:none;border-radius:var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0 0;background:0 0;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 0 1px;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer}.___STabPanelItem_1uh8o_gg_ .___SText_1uh8o_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);font-weight:var(--intergalactic-medium, 500)}.___STabPanelItem_1uh8o_gg_::-moz-focus-inner{border:0;padding:0}.___STabPanelItem_1uh8o_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STabPanelItem_1uh8o_gg_:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--intergalactic-text-primary, #191b23)}}.___STabPanelItem_1uh8o_gg_::after{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_{cursor:default;pointer-events:none}.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SAddon_1uh8o_gg_,.___STabPanelItem_1uh8o_gg_.__disabled_1uh8o_gg_ .___SText_1uh8o_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_{color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-border-primary, #c4c7cf);flex-shrink:0}@media (hover:hover){.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___STabPanelItem_1uh8o_gg_.__selected_1uh8o_gg_::after{border-bottom:none}.___SText_1uh8o_gg_{display:inline-block;margin:auto var(--intergalactic-spacing-2x, 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SAddon_1uh8o_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1uh8o_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SAddon_1uh8o_gg_:only-child{margin-right:var(--intergalactic-spacing-2x, 8px);margin-left:var(--intergalactic-spacing-2x, 8px)}',
18
+ "1uh8o_gg_"
21
19
  ), {
22
- __STabPanelItem: "___STabPanelItem_1slc9_gg_",
23
- _keyboardFocused: "__keyboardFocused_1slc9_gg_",
24
- __SText: "___SText_1slc9_gg_",
25
- __SAddon: "___SAddon_1slc9_gg_",
26
- __STabPanel: "___STabPanel_1slc9_gg_",
27
- _disabled: "__disabled_1slc9_gg_",
28
- _selected: "__selected_1slc9_gg_"
20
+ __SText: "___SText_1uh8o_gg_",
21
+ __SAddon: "___SAddon_1uh8o_gg_",
22
+ __STabPanel: "___STabPanel_1uh8o_gg_",
23
+ __STabPanelItem: "___STabPanelItem_1uh8o_gg_",
24
+ _disabled: "__disabled_1uh8o_gg_",
25
+ _selected: "__selected_1uh8o_gg_"
29
26
  })
30
- ), E = {
27
+ ), k = {
31
28
  onNeighborChange: function(a, e) {
32
29
  a && (a.focus(), e.behavior === "auto" && a.click());
33
30
  },
34
31
  childSelector: ["role", "tab"]
35
- }, d = /* @__PURE__ */ function(r) {
36
- y(e, r);
32
+ }, s = /* @__PURE__ */ function(r) {
33
+ x(e, r);
37
34
  var a = S(e);
38
35
  function e() {
39
36
  var t;
40
- v(this, e);
41
- for (var n = arguments.length, l = new Array(n), o = 0; o < n; o++)
42
- l[o] = arguments[o];
43
- return t = a.call.apply(a, [this].concat(l)), s(f(t), "handleClick", function(_) {
44
- return function(i) {
45
- t.handlers.value(_, i);
37
+ f(this, e);
38
+ for (var n = arguments.length, i = new Array(n), _ = 0; _ < n; _++)
39
+ i[_] = arguments[_];
40
+ return t = a.call.apply(a, [this].concat(i)), d(p(t), "handleClick", function(o) {
41
+ return function(l) {
42
+ t.handlers.value(o, l);
46
43
  };
47
- }), s(f(t), "handleKeyDown", function(_) {
48
- return function(i) {
49
- (i.key === "Enter" || i.key === " ") && (i.preventDefault(), t.handlers.value(_, i));
44
+ }), d(p(t), "handleKeyDown", function(o) {
45
+ return function(l) {
46
+ (l.key === "Enter" || l.key === " ") && (l.preventDefault(), t.handlers.value(o, l));
50
47
  };
51
48
  }), t;
52
49
  }
53
- return x(e, [{
50
+ return v(e, [{
54
51
  key: "uncontrolledProps",
55
52
  value: function() {
56
53
  return {
@@ -59,67 +56,67 @@ var C = (
59
56
  }
60
57
  }, {
61
58
  key: "getItemProps",
62
- value: function(n, l) {
63
- var o = this.asProps.value, _ = o === n.value;
59
+ value: function(n, i) {
60
+ var _ = this.asProps.value, o = _ === n.value;
64
61
  return {
65
- selected: _,
62
+ selected: o,
66
63
  onClick: this.handleClick(n.value),
67
64
  onKeyDown: this.handleKeyDown(n.value),
68
- tabIndex: _ ? 0 : -1,
69
- "aria-selected": _
65
+ tabIndex: o ? 0 : -1,
66
+ "aria-selected": o
70
67
  };
71
68
  }
72
69
  }, {
73
70
  key: "render",
74
71
  value: function() {
75
- var n = this.asProps, l, o = p, _ = this.asProps.styles;
76
- return l = u(_), /* @__PURE__ */ c.createElement(o, l.cn("STabPanel", m({}, b({
72
+ var n = this.asProps, i, _ = b, o = this.asProps.styles;
73
+ return i = g(o), /* @__PURE__ */ c.createElement(_, i.cn("STabPanel", h({}, m({
77
74
  role: "tablist"
78
75
  }, n))));
79
76
  }
80
77
  }]), e;
81
- }(I);
82
- s(d, "displayName", "TabPanel");
83
- s(d, "style", C);
84
- s(d, "defaultProps", {
78
+ }(T);
79
+ d(s, "displayName", "TabPanel");
80
+ d(s, "style", w);
81
+ d(s, "defaultProps", {
85
82
  defaultValue: null,
86
83
  behavior: "manual"
87
84
  });
88
- s(d, "enhance", [w(E)]);
89
- function h(r) {
90
- var a = arguments[0], e, t = p, n = r.Children, l = r.styles, o = r.addonLeft, _ = r.addonRight;
91
- return e = u(l), /* @__PURE__ */ c.createElement(t, e.cn("STabPanelItem", m({}, b({
85
+ d(s, "enhance", [I(k)]);
86
+ function A(r) {
87
+ var a = arguments[0], e, t = b, n = r.Children, i = r.styles, _ = r.addonLeft, o = r.addonRight;
88
+ return e = g(i), /* @__PURE__ */ c.createElement(t, e.cn("STabPanelItem", h({}, m({
92
89
  type: "button",
93
90
  tag: "button",
91
+ tabIndex: 0,
94
92
  role: "tab"
95
- }, a))), o ? /* @__PURE__ */ c.createElement(g.Item.Addon, {
96
- tag: o
97
- }) : null, k(n, g.Item.Text, g.Item.Addon), _ ? /* @__PURE__ */ c.createElement(g.Item.Addon, {
93
+ }, a))), _ ? /* @__PURE__ */ c.createElement(u.Item.Addon, {
98
94
  tag: _
95
+ }) : null, P(n, u.Item.Text, u.Item.Addon), o ? /* @__PURE__ */ c.createElement(u.Item.Addon, {
96
+ tag: o
99
97
  }) : null);
100
98
  }
101
- h.enhance = [A()];
102
- function z(r) {
103
- var a = arguments[0], e, t = p, n = r.styles;
104
- return e = u(n), /* @__PURE__ */ c.createElement(t, e.cn("SText", m({}, b({
99
+ function C(r) {
100
+ var a = arguments[0], e, t = b, n = r.styles;
101
+ return e = g(n), /* @__PURE__ */ c.createElement(t, e.cn("SText", h({}, m({
105
102
  tag: "span"
106
103
  }, a))));
107
104
  }
108
- function R(r) {
109
- var a = arguments[0], e, t = p, n = r.styles;
110
- return e = u(n), /* @__PURE__ */ c.createElement(t, e.cn("SAddon", m({}, b({
105
+ function E(r) {
106
+ var a = arguments[0], e, t = b, n = r.styles;
107
+ return e = g(n), /* @__PURE__ */ c.createElement(t, e.cn("SAddon", h({}, m({
111
108
  tag: "span"
112
109
  }, a))));
113
110
  }
114
- var g = P(d, {
115
- Item: [h, {
116
- Text: z,
117
- Addon: R
111
+ var u = y(s, {
112
+ Item: [A, {
113
+ Text: C,
114
+ Addon: E
118
115
  }]
119
- }), O = function(a) {
116
+ }), H = function(a) {
120
117
  return a;
121
118
  };
122
119
  export {
123
- g as default,
124
- O as wrapTabPanel
120
+ u as default,
121
+ H as wrapTabPanel
125
122
  };
package/lib/types/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
3
3
  import { Box, BoxProps } from '@semcore/flex-box';
4
- import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
4
+ import { KeyboardFocusProps } from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
5
5
 
6
6
  export type TabPanelValue = string | number | boolean;
7
7
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/tab-panel",
3
3
  "description": "Semrush TabPanel Component",
4
- "version": "4.42.1",
4
+ "version": "16.0.0-prerelease.4",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,13 +14,10 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/utils": "4.48.1",
18
- "@semcore/flex-box": "5.41.1"
17
+ "@semcore/flex-box": "16.0.0-prerelease.4"
19
18
  },
20
19
  "peerDependencies": {
21
- "@semcore/core": "^2.17.5",
22
- "react": "16.8 - 18",
23
- "react-dom": "16.8 - 18"
20
+ "@semcore/base-components": "^16.0.0-prerelease.4"
24
21
  },
25
22
  "repository": {
26
23
  "type": "git",