@semcore/tab-panel 17.0.0-prerelease.29 → 17.0.0-prerelease.31
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.
- package/CHANGELOG.md +1 -1
- package/lib/cjs/TabPanel.js +2 -6
- package/lib/cjs/TabPanel.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/es6/TabPanel.js +2 -6
- package/lib/es6/TabPanel.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/esm/TabPanel.mjs +3 -7
- package/lib/types/index.d.ts +2 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
package/lib/cjs/TabPanel.js
CHANGED
|
@@ -131,18 +131,14 @@ function Text(props) {
|
|
|
131
131
|
styles,
|
|
132
132
|
ellipsis = true,
|
|
133
133
|
buttonRefsList,
|
|
134
|
-
index
|
|
135
|
-
hintProps = {}
|
|
134
|
+
index
|
|
136
135
|
} = props;
|
|
137
136
|
return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SText, _ref7.cn("SText", {
|
|
138
137
|
...(0, _core.assignProps)({
|
|
139
138
|
"size": 200,
|
|
140
139
|
"ellipsis": ellipsis,
|
|
141
140
|
"medium": true,
|
|
142
|
-
"
|
|
143
|
-
triggerRef: buttonRefsList[index],
|
|
144
|
-
...hintProps
|
|
145
|
-
}
|
|
141
|
+
"hint:triggerRef": buttonRefsList[index]
|
|
146
142
|
}, _ref3)
|
|
147
143
|
}));
|
|
148
144
|
}
|
package/lib/cjs/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","Component","constructor","args","_defineProperty2","default","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","assignProps","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","ellipsis","
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_typography","_react","style","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","Component","constructor","args","_defineProperty2","default","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","Box","styles","createElement","cn","assignProps","defaultValue","a11yEnhance","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","React","useRef","TabPanel","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","UikitText","ellipsis","_ref4","_ref8","SAddon","createComponent","wrapTabPanel","wrapper","exports","_default"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\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\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n buttonRefsList = [];\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 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(_, index) {\n return {\n buttonRefsList: this.buttonRefsList,\n index,\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, buttonRefsList, index } = props;\n const buttonRef = React.useRef();\n\n buttonRefsList[index] = buttonRef;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\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, ellipsis = true, buttonRefsList, index } = props;\n return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\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":";;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAH,sBAAA,CAAAH,OAAA;AAA0B;AAAA,MAAAO,KAAA,8BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAI1B,MAAMC,kBAAkB,GAAG;EACzBC,gBAAgB,EAAEA,CAACC,eAAe,EAAEC,KAAK,KAAK;IAC5C,IAAID,eAAe,EAAE;MACnBA,eAAe,CAACE,KAAK,CAAC,CAAC;MACvB,IAAID,KAAK,CAACE,QAAQ,KAAK,MAAM,EAAE;QAC7BH,eAAe,CAACI,KAAK,CAAC,CAAC;MACzB;IACF;EACF,CAAC;EACDC,aAAa,EAAE,CAAC,MAAM,EAAE,KAAK;AAC/B,CAAC;AAED,MAAMC,YAAY,SAASC,eAAS,CAAC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,0BAUlB,EAAE;IAAA,IAAAD,gBAAA,CAAAC,OAAA,uBAQJC,KAAK,IAAMC,KAAK,IAAK;MAClC,IAAI,CAACC,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;IACnC,CAAC;IAAA,IAAAH,gBAAA,CAAAC,OAAA,yBAEgBC,KAAK,IAAMC,KAAK,IAAK;MACpC,IAAIA,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;QAC9CF,KAAK,CAACG,cAAc,CAAC,CAAC;QACtB,IAAI,CAACF,QAAQ,CAACF,KAAK,CAACA,KAAK,EAAEC,KAAK,CAAC;MACnC;IACF,CAAC;EAAA;EAfDI,iBAAiBA,CAAA,EAAG;IAClB,OAAO;MACLL,KAAK,EAAE;IACT,CAAC;EACH;EAaAM,YAAYA,CAACjB,KAAK,EAAEkB,KAAK,EAAE;IACzB,MAAM;MAAEP;IAAM,CAAC,GAAG,IAAI,CAACQ,OAAO;IAC9B,MAAMC,UAAU,GAAGT,KAAK,KAAKX,KAAK,CAACW,KAAK;IACxC,OAAO;MACL,UAAU,EAAES,UAAU;MACtB,SAAS,EAAE,IAAI,CAACC,WAAW,CAACrB,KAAK,CAACW,KAAK,CAAC;MACxC,WAAW,EAAE,IAAI,CAACW,aAAa,CAACtB,KAAK,CAACW,KAAK,CAAC;MAC5C,UAAU,EAAES,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC;MAC/B,eAAe,EAAEA,UAAU;MAC3B,gBAAgB,EAAE,IAAI,CAACG,cAAc;MACrCL;IACF,CAAC;EACH;EAEAM,gBAAgBA,CAACC,CAAC,EAAEP,KAAK,EAAE;IACzB,OAAO;MACLK,cAAc,EAAE,IAAI,CAACA,cAAc;MACnCL;IACF,CAAC;EACH;EAEAQ,MAAMA,CAAA,EAAG;IAAA,IAAAC,IAAA,QAAAR,OAAA;MAAAS,KAAA;IACP,MAAMC,SAAS,GAG2BC,mBAAG;IAF7C,MAAM;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACZ,OAAO;IAE/B,OAAAS,KAAA,GAAO,IAAAjC,aAAO,EAACoC,MAAM,CAAC,eAACtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACH,SAAS,EAAAD,KAAA,CAAAK,EAAA;MAAA,OAAA/C,KAAA,CAAAgD,WAAA;QAAA,QAAmB;MAAS,GAAAP,IAAA;IAAA,EAAE,CAAC;EAClE;AACF;AAAC,IAAAlB,gBAAA,CAAAC,OAAA,EAxDKL,YAAY,iBACK,UAAU;AAAA,IAAAI,gBAAA,CAAAC,OAAA,EAD3BL,YAAY,WAEDX,KAAK;AAAA,IAAAe,gBAAA,CAAAC,OAAA,EAFhBL,YAAY,kBAGM;EACpB8B,YAAY,EAAE,IAAI;EAClBjC,QAAQ,EAAE;AACZ,CAAC;AAAA,IAAAO,gBAAA,CAAAC,OAAA,EANGL,YAAY,aAQC,CAAC,IAAA+B,oBAAW,EAACvC,kBAAkB,CAAC,CAAC;AAkDpD,SAASwC,YAAYA,CAACrC,KAAK,EAAE;EAAA,IAAAsC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EAC3B,MAAMC,aAAa,GAOMX,mBAAG;EAN5B,MAAM;IAAEY,QAAQ;IAAEX,MAAM;IAAEY,SAAS;IAAEC,UAAU;IAAErB,cAAc;IAAEL;EAAM,CAAC,GAAGlB,KAAK;EAChF,MAAM6C,SAAS,GAAGC,cAAK,CAACC,MAAM,CAAC,CAAC;EAEhCxB,cAAc,CAACL,KAAK,CAAC,GAAG2B,SAAS;EAEjC,OAAAL,KAAA,GAAO,IAAA7C,aAAO,EAACoC,MAAM,CAAC,eACpBtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACS,aAAa,EAAAD,KAAA,CAAAP,EAAA;IAAA,OAAA/C,KAAA,CAAAgD,WAAA;MAAA,QAAmB,QAAQ;MAAA,OAAK,QAAQ;MAAA,YAAW,CAAC;MAAA,QAAO,KAAK;MAAA,OAAMW;IAAS,GAAAP,KAAA;EAAA,IAC1FK,SAAS,gBAAGlD,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACgB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAER;EAAU,CAAE,CAAC,GAAG,IAAI,EAC1D,IAAAS,0BAAiB,EAACV,QAAQ,EAAEM,QAAQ,CAACC,IAAI,CAACI,IAAI,EAAEL,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC,EACpEN,UAAU,gBAAGnD,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACgB,QAAQ,CAACC,IAAI,CAACC,KAAK;IAACC,GAAG,EAAEP;EAAW,CAAE,CAAC,GAAG,IAC5C,CAAC;AAEpB;AAEA,SAASS,IAAIA,CAACrD,KAAK,EAAE;EAAA,IAAAsD,KAAA,GAAAf,YAAA;IAAAgB,KAAA;EACnB,MAAMC,KAAK,GAE2BC,gBAAS;EAD/C,MAAM;IAAE1B,MAAM;IAAE2B,QAAQ,GAAG,IAAI;IAAEnC,cAAc;IAAEL;EAAM,CAAC,GAAGlB,KAAK;EAChE,OAAAuD,KAAA,GAAO,IAAA5D,aAAO,EAACoC,MAAM,CAAC,eAACtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAACwB,KAAK,EAAAD,KAAA,CAAAtB,EAAA;IAAA,OAAA/C,KAAA,CAAAgD,WAAA;MAAA,QAA0B,GAAG;MAAA,YAAYwB,QAAQ;MAAA;MAAA,mBAA0BnC,cAAc,CAACL,KAAK;IAAC,GAAAoC,KAAA;EAAA,EAAG,CAAC;AACnI;AAEA,SAASJ,KAAKA,CAAClD,KAAK,EAAE;EAAA,IAAA2D,KAAA,GAAApB,YAAA;IAAAqB,KAAA;EACpB,MAAMC,MAAM,GAE2B/B,mBAAG;EAD1C,MAAM;IAAEC;EAAO,CAAC,GAAG/B,KAAK;EACxB,OAAA4D,KAAA,GAAO,IAAAjE,aAAO,EAACoC,MAAM,CAAC,eAACtC,MAAA,CAAAiB,OAAA,CAAAsB,aAAA,CAAC6B,MAAM,EAAAD,KAAA,CAAA3B,EAAA;IAAA,OAAA/C,KAAA,CAAAgD,WAAA;MAAA,OAAkB;IAAM,GAAAyB,KAAA;EAAA,EAAE,CAAC;AAC3D;AAEA,MAAMX,QAAQ,GAAG,IAAAc,qBAAe,EAACzD,YAAY,EAAE;EAC7C4C,IAAI,EAAE,CAACZ,YAAY,EAAE;IAAEgB,IAAI;IAAEH;EAAM,CAAC;AACtC,CAAC,CAAC;AAEK,MAAMa,YAAY,GAAIC,OAAO,IAAKA,OAAO;AAACC,OAAA,CAAAF,YAAA,GAAAA,YAAA;AAAA,IAAAG,QAAA,GAAAD,OAAA,CAAAvD,OAAA,GAElCsC,QAAQ","ignoreList":[]}
|
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 type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\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\nexport type TabPanelItemProps = BoxProps & {\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 type TabPanelContext = {\n getItemProps: PropGetterFn;\n};\n\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) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n Text: typeof
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\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\nexport type TabPanelItemProps = BoxProps & {\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 type TabPanelContext = {\n getItemProps: PropGetterFn;\n};\n\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) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n Text: typeof Text;\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":"","ignoreList":[]}
|
package/lib/es6/TabPanel.js
CHANGED
|
@@ -129,18 +129,14 @@ function Text(props) {
|
|
|
129
129
|
styles,
|
|
130
130
|
ellipsis = true,
|
|
131
131
|
buttonRefsList,
|
|
132
|
-
index
|
|
133
|
-
hintProps = {}
|
|
132
|
+
index
|
|
134
133
|
} = props;
|
|
135
134
|
return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SText, _ref7.cn("SText", {
|
|
136
135
|
..._assignProps3({
|
|
137
136
|
"size": 200,
|
|
138
137
|
"ellipsis": ellipsis,
|
|
139
138
|
"medium": true,
|
|
140
|
-
"
|
|
141
|
-
triggerRef: buttonRefsList[index],
|
|
142
|
-
...hintProps
|
|
143
|
-
}
|
|
139
|
+
"hint:triggerRef": buttonRefsList[index]
|
|
144
140
|
}, _ref3)
|
|
145
141
|
}));
|
|
146
142
|
}
|
package/lib/es6/TabPanel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","constructor","args","_defineProperty","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","useRef","_assignProps2","TabPanel","Item","Addon","tag","_ref3","_ref7","SText","ellipsis","
|
|
1
|
+
{"version":3,"file":"TabPanel.js","names":["Box","createComponent","Component","sstyled","Root","addonTextChildren","a11yEnhance","Text","UikitText","React","style","_sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","TabPanelRoot","constructor","args","_defineProperty","value","event","handlers","key","preventDefault","uncontrolledProps","getItemProps","index","asProps","isSelected","handleClick","handleKeyDown","buttonRefsList","getItemTextProps","_","render","_ref","_ref5","STabPanel","styles","createElement","cn","_assignProps","defaultValue","TabPanelItem","_ref2","arguments[0]","_ref6","STabPanelItem","Children","addonLeft","addonRight","buttonRef","useRef","_assignProps2","TabPanel","Item","Addon","tag","_ref3","_ref7","SText","ellipsis","_assignProps3","_ref4","_ref8","SAddon","_assignProps4","wrapTabPanel","wrapper"],"sources":["../../src/TabPanel.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport { Text as UikitText } from '@semcore/typography';\nimport React from 'react';\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\n static enhance = [a11yEnhance(optionsA11yEnhance)];\n\n buttonRefsList = [];\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 'buttonRefsList': this.buttonRefsList,\n index,\n };\n }\n\n getItemTextProps(_, index) {\n return {\n buttonRefsList: this.buttonRefsList,\n index,\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, buttonRefsList, index } = props;\n const buttonRef = React.useRef();\n\n buttonRefsList[index] = buttonRef;\n\n return sstyled(styles)(\n <STabPanelItem render={Box} type='button' tag='button' tabIndex={0} role='tab' ref={buttonRef}>\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, ellipsis = true, buttonRefsList, index } = props;\n return sstyled(styles)(<SText render={UikitText} size={200} ellipsis={ellipsis} medium hint:triggerRef={buttonRefsList[index]} />);\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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","ignoreList":[]}
|
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 type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\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\nexport type TabPanelItemProps = BoxProps & {\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 type TabPanelContext = {\n getItemProps: PropGetterFn;\n};\n\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) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n Text: typeof
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { Box, BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\nimport type { Text } from '@semcore/typography';\nimport type React from 'react';\n\nexport type TabPanelValue = string | number | boolean;\n\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\nexport type TabPanelItemProps = BoxProps & {\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 type TabPanelContext = {\n getItemProps: PropGetterFn;\n};\n\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) &\nIntergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;\n\ndeclare const TabPanel: IntergalacticTabPanelComponent & {\n Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {\n Text: typeof Text;\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":"","ignoreList":[]}
|
package/lib/esm/TabPanel.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
import {
|
|
2
|
+
import { sstyled, createComponent, Component, assignProps } from "@semcore/core";
|
|
3
3
|
import { Box } from "@semcore/base-components";
|
|
4
4
|
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
5
5
|
import a11yEnhance from "@semcore/core/lib/utils/enhances/a11yEnhance";
|
|
@@ -128,18 +128,14 @@ function Text(props) {
|
|
|
128
128
|
styles,
|
|
129
129
|
ellipsis = true,
|
|
130
130
|
buttonRefsList,
|
|
131
|
-
index
|
|
132
|
-
hintProps = {}
|
|
131
|
+
index
|
|
133
132
|
} = props;
|
|
134
133
|
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref7.cn("SText", {
|
|
135
134
|
...assignProps({
|
|
136
135
|
"size": 200,
|
|
137
136
|
"ellipsis": ellipsis,
|
|
138
137
|
"medium": true,
|
|
139
|
-
"
|
|
140
|
-
triggerRef: buttonRefsList[index],
|
|
141
|
-
...hintProps
|
|
142
|
-
}
|
|
138
|
+
"hint:triggerRef": buttonRefsList[index]
|
|
143
139
|
}, _ref3)
|
|
144
140
|
}));
|
|
145
141
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Box, BoxProps } from '@semcore/base-components';
|
|
2
2
|
import type { PropGetterFn, Intergalactic } from '@semcore/core';
|
|
3
|
+
import type { Text } from '@semcore/typography';
|
|
3
4
|
import type React from 'react';
|
|
4
5
|
|
|
5
6
|
export type TabPanelValue = string | number | boolean;
|
|
@@ -62,7 +63,7 @@ Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', TabPanelProps>;
|
|
|
62
63
|
|
|
63
64
|
declare const TabPanel: IntergalacticTabPanelComponent & {
|
|
64
65
|
Item: Intergalactic.Component<'div', TabPanelItemProps, {}, [handlers: TabPanelHandlers]> & {
|
|
65
|
-
Text: typeof
|
|
66
|
+
Text: typeof Text;
|
|
66
67
|
Addon: typeof Box;
|
|
67
68
|
};
|
|
68
69
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tab-panel",
|
|
3
3
|
"description": "Semrush TabPanel Component",
|
|
4
|
-
"version": "17.0.0-prerelease.
|
|
4
|
+
"version": "17.0.0-prerelease.31",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/typography": "^17.0.0-prerelease.
|
|
17
|
+
"@semcore/typography": "^17.0.0-prerelease.31"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"@semcore/base-components": "^17.0.0 || ^17.0.0-0"
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
"directory": "semcore/tab-panel"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@semcore/
|
|
28
|
+
"@semcore/core": "17.0.0-prerelease.31",
|
|
29
|
+
"@semcore/base-components": "17.0.0-prerelease.31",
|
|
29
30
|
"@semcore/testing-utils": "1.0.0",
|
|
30
|
-
"@semcore/icon": "16.7.2-prerelease.
|
|
31
|
-
"@semcore/core": "17.0.0-prerelease.29"
|
|
31
|
+
"@semcore/icon": "16.7.2-prerelease.31"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|