@elliemae/ds-tabs 3.12.1 → 3.13.0-next.2

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.
@@ -37,12 +37,13 @@ var import_DSTabsCTX = require("../../DSTabsCTX");
37
37
  var import_DSTabsDatatestid = require("../../DSTabsDatatestid");
38
38
  const TabsContent = () => {
39
39
  const {
40
- props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
40
+ props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent }
41
41
  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
42
42
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...containerProps, ref: innerRef, "data-testid": import_DSTabsDatatestid.DSTabsDatatestid.TABS_CONTAINER, children: [
43
43
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { "aria-label": tabsListAriaLabel, role: "tablist", children: [
44
44
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),
45
- tabBarExtraContent
45
+ TabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabBarExtraContent, {}) : null,
46
+ tabBarExtraContent ? tabBarExtraContent : null
46
47
  ] }),
47
48
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabsPanels.TabsPanels, {})
48
49
  ] });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent },\n } = useContext(DSTabsContext);\n\n return (\n <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {tabBarExtraContent}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAdN,mBAAkC;AAClC,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,mBAAmB;AAAA,EAC3E,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC,SAAK,GAAG,gBAAgB,KAAK,UAAU,eAAa,yCAAiB,gBACpE;AAAA,iDAAC,uCAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,kDAAC,wBAAO;AAAA,MACP;AAAA,OACH;AAAA,IACA,4CAAC,gCAAW;AAAA,KACd;AAEJ;",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n return (\n <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAdN,mBAAkC;AAClC,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,SACE,6CAAC,SAAK,GAAG,gBAAgB,KAAK,UAAU,eAAa,yCAAiB,gBACpE;AAAA,iDAAC,uCAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,kDAAC,wBAAO;AAAA,MACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,MAC9C,qBAAqB,qBAAqB;AAAA,OAC7C;AAAA,IACA,4CAAC,gCAAW;AAAA,KACd;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -47,6 +47,7 @@ const tabsPropTypes = {
47
47
  onTabChange: import_ds_utilities.PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
48
48
  type: import_ds_utilities.PropTypes.oneOf(import_constants.TabTypesValuesAsArray).description("Tab type.").defaultValue(import_constants.TabTypesValuesAsArray[0]),
49
49
  tabBarExtraContent: import_ds_utilities.PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
50
+ TabBarExtraContent: import_ds_utilities.PropTypes.func.description("Extra content next to the Tab Bar as a react component instead of JSX").defaultValue(void 0),
50
51
  onlyRenderActiveTab: import_ds_utilities.PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
51
52
  withCarousel: import_ds_utilities.PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
52
53
  activeTab: import_ds_utilities.PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface PropsOptional {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n tabId: string | number;\n }\n\n export interface Props extends PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, PropsOptional {}\n}\n\nexport const tabPropTypes = {\n tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n};\n\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TabTypes.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAC1B,uBAAgD;AAGhD,MAAM,OAAO,MAAY;AAAC;AAoDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,8BAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,8BAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,8BAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,8BAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,8BAAU,MAAM,sCAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,uCAAsB,EAAE;AAAA,EAC3G,oBAAoB,8BAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,qBAAqB,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,8BAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,8BAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,8BAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,8BAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,8BAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,0BAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
4
+ "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface PropsOptional {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n tabId: string | number;\n }\n\n export interface Props extends PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, PropsOptional {}\n}\n\nexport const tabPropTypes = {\n tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n TabBarExtraContent: PropTypes.func\n .description('Extra content next to the Tab Bar as a react component instead of JSX')\n .defaultValue(undefined),\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n};\n\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TabTypes.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAC1B,uBAAgD;AAGhD,MAAM,OAAO,MAAY;AAAC;AAqDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,8BAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,8BAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,8BAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,8BAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,8BAAU,MAAM,sCAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,uCAAsB,EAAE;AAAA,EAC3G,oBAAoB,8BAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,oBAAoB,8BAAU,KAC3B,YAAY,uEAAuE,EACnF,aAAa,MAAS;AAAA,EACzB,qBAAqB,8BAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,8BAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,8BAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,8BAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,8BAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,8BAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,8BAAU,UAAU,CAAC,8BAAU,MAAM,8BAAU,MAAM,EAAE,SAAS,8BAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,0BAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
6
6
  "names": []
7
7
  }
@@ -8,12 +8,13 @@ import { DSTabsContext } from "../../DSTabsCTX";
8
8
  import { DSTabsDatatestid } from "../../DSTabsDatatestid";
9
9
  const TabsContent = () => {
10
10
  const {
11
- props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent }
11
+ props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent }
12
12
  } = useContext(DSTabsContext);
13
13
  return /* @__PURE__ */ jsxs("div", { ...containerProps, ref: innerRef, "data-testid": DSTabsDatatestid.TABS_CONTAINER, children: [
14
14
  /* @__PURE__ */ jsxs(StyledTabBarContainer, { "aria-label": tabsListAriaLabel, role: "tablist", children: [
15
15
  /* @__PURE__ */ jsx(TabBar, {}),
16
- tabBarExtraContent
16
+ TabBarExtraContent ? /* @__PURE__ */ jsx(TabBarExtraContent, {}) : null,
17
+ tabBarExtraContent ? tabBarExtraContent : null
17
18
  ] }),
18
19
  /* @__PURE__ */ jsx(TabsPanels, {})
19
20
  ] });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsContent/TabsContent.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent },\n } = useContext(DSTabsContext);\n\n return (\n <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {tabBarExtraContent}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACcjB,SACE,KADF;AAdN,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,mBAAmB;AAAA,EAC3E,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,SAAK,GAAG,gBAAgB,KAAK,UAAU,eAAa,iBAAiB,gBACpE;AAAA,yBAAC,yBAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,0BAAC,UAAO;AAAA,MACP;AAAA,OACH;AAAA,IACA,oBAAC,cAAW;AAAA,KACd;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n const {\n props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n } = useContext(DSTabsContext);\n\n return (\n <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n <TabBar />\n {TabBarExtraContent ? <TabBarExtraContent /> : null}\n {tabBarExtraContent ? tabBarExtraContent : null}\n </StyledTabBarContainer>\n <TabsPanels />\n </div>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACcjB,SACE,KADF;AAdN,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,SAAK,GAAG,gBAAgB,KAAK,UAAU,eAAa,iBAAiB,gBACpE;AAAA,yBAAC,yBAAsB,cAAY,mBAAmB,MAAK,WACzD;AAAA,0BAAC,UAAO;AAAA,MACP,qBAAqB,oBAAC,sBAAmB,IAAK;AAAA,MAC9C,qBAAqB,qBAAqB;AAAA,OAC7C;AAAA,IACA,oBAAC,cAAW;AAAA,KACd;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -16,6 +16,7 @@ const tabsPropTypes = {
16
16
  onTabChange: PropTypes.func.description("Handler when a user clicks on a different Tab.").defaultValue("() => {}"),
17
17
  type: PropTypes.oneOf(TabTypesValuesAsArray).description("Tab type.").defaultValue(TabTypesValuesAsArray[0]),
18
18
  tabBarExtraContent: PropTypes.element.description("Extra content next to the Tab Bar.").defaultValue(void 0),
19
+ TabBarExtraContent: PropTypes.func.description("Extra content next to the Tab Bar as a react component instead of JSX").defaultValue(void 0),
19
20
  onlyRenderActiveTab: PropTypes.bool.description("Only renders the active Tab in the DOM.").defaultValue(false),
20
21
  withCarousel: PropTypes.bool.description("Activate carousel behavior.").defaultValue(false),
21
22
  activeTab: PropTypes.string.description("Passing a value makes DSTabs a controlled component.").defaultValue("First DSTab children."),
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface PropsOptional {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n tabId: string | number;\n }\n\n export interface Props extends PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, PropsOptional {}\n}\n\nexport const tabPropTypes = {\n tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n};\n\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TabTypes.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,6BAA6B;AAGhD,MAAM,OAAO,MAAY;AAAC;AAoDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,UAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,UAAU,MAAM,qBAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,sBAAsB,EAAE;AAAA,EAC3G,oBAAoB,UAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,SAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { TabTypes, TabTypesValuesAsArray } from './utils/constants';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\nconst noop = (): void => {};\n\nexport declare namespace DSTabT {\n export interface PropsOptional {\n style?: Record<string, unknown>;\n title?: string;\n required?: boolean;\n disabled?: boolean;\n ref?: React.MutableRefObject<HTMLButtonElement>;\n onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;\n onKeyDown?: (e: React.KeyboardEvent) => null | void;\n }\n\n export interface PropsRequired {\n children: React.ReactNode;\n tabId: string | number;\n }\n\n export interface Props extends PropsOptional, PropsRequired {}\n}\n\nexport declare namespace DSTabsT {\n export interface DefaultProps {\n containerProps: Record<string, unknown>;\n animated: boolean;\n enableMouseEvents: boolean;\n allowTextSelection: boolean;\n onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;\n tabsListAriaLabel: string;\n type: DSTabsInternalsT.TabTypesT;\n children: React.ReactElement<DSTabT.Props>[];\n onlyRenderActiveTab: boolean;\n fixedTabsHeaders: boolean;\n withCarousel: boolean;\n isDSMobile: boolean;\n showSelectionIndicator: boolean;\n showSeparator: boolean;\n }\n\n export interface PropsOptional {\n firstSubtabRef?: React.MutableRefObject<HTMLElement>;\n lastTabRef?: React.MutableRefObject<HTMLElement>;\n TabBarExtraContent?: React.ComponentType;\n tabBarExtraContent?: React.ReactNode;\n activeTab?: string;\n innerRef?: React.MutableRefObject<HTMLDivElement>;\n }\n\n export interface Props extends Partial<DefaultProps>, PropsOptional {}\n\n export interface InternalProps extends DefaultProps, PropsOptional {}\n}\n\nexport const tabPropTypes = {\n tabId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Unique Tab id.').defaultValue(''),\n title: PropTypes.string.description('Tab title.').defaultValue(''),\n required: PropTypes.bool.description('Show a required mark next to the title.').defaultValue(false),\n disabled: PropTypes.bool.description('Disables Tab.').defaultValue(false),\n};\n\nexport const tabsPropTypes = {\n animated: PropTypes.bool.description('Whether the Tab transition should animate or not.').defaultValue(true),\n enableMouseEvents: PropTypes.bool.description('Enables Tab transition with mouse drag events.').defaultValue(false),\n allowTextSelection: PropTypes.bool\n .description('Allows text selection when mouse drag events are active.')\n .defaultValue(false),\n onTabChange: PropTypes.func.description('Handler when a user clicks on a different Tab.').defaultValue('() => {}'),\n type: PropTypes.oneOf(TabTypesValuesAsArray).description('Tab type.').defaultValue(TabTypesValuesAsArray[0]),\n tabBarExtraContent: PropTypes.element.description('Extra content next to the Tab Bar.').defaultValue(undefined),\n TabBarExtraContent: PropTypes.func\n .description('Extra content next to the Tab Bar as a react component instead of JSX')\n .defaultValue(undefined),\n onlyRenderActiveTab: PropTypes.bool.description('Only renders the active Tab in the DOM.').defaultValue(false),\n withCarousel: PropTypes.bool.description('Activate carousel behavior.').defaultValue(false),\n activeTab: PropTypes.string\n .description('Passing a value makes DSTabs a controlled component.')\n .defaultValue('First DSTab children.'),\n children: PropTypes.node.description('Use DSTab component as children.').isRequired,\n tabsListAriaLabel: PropTypes.string.description('Aria label for the list.').defaultValue('Tab list.'),\n containerProps: PropTypes.object.description('Additional properties for the container.').defaultValue({}),\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })])\n .description('Ref to the container.')\n .defaultValue(undefined),\n};\n\nexport const tabsDefaultProps: DSTabsT.DefaultProps = {\n containerProps: {},\n animated: true,\n enableMouseEvents: false,\n allowTextSelection: false,\n onTabChange: noop,\n tabsListAriaLabel: 'Tab list',\n type: TabTypes.NORMAL,\n onlyRenderActiveTab: false,\n withCarousel: false,\n isDSMobile: false,\n showSelectionIndicator: true,\n children: [],\n fixedTabsHeaders: false,\n showSeparator: true,\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,6BAA6B;AAGhD,MAAM,OAAO,MAAY;AAAC;AAqDnB,MAAM,eAAe;AAAA,EAC1B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,EAAE;AAAA,EAC9G,OAAO,UAAU,OAAO,YAAY,YAAY,EAAE,aAAa,EAAE;AAAA,EACjE,UAAU,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAClG,UAAU,UAAU,KAAK,YAAY,eAAe,EAAE,aAAa,KAAK;AAC1E;AAEO,MAAM,gBAAgB;AAAA,EAC3B,UAAU,UAAU,KAAK,YAAY,mDAAmD,EAAE,aAAa,IAAI;AAAA,EAC3G,mBAAmB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,KAAK;AAAA,EAClH,oBAAoB,UAAU,KAC3B,YAAY,0DAA0D,EACtE,aAAa,KAAK;AAAA,EACrB,aAAa,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,UAAU;AAAA,EACjH,MAAM,UAAU,MAAM,qBAAqB,EAAE,YAAY,WAAW,EAAE,aAAa,sBAAsB,EAAE;AAAA,EAC3G,oBAAoB,UAAU,QAAQ,YAAY,oCAAoC,EAAE,aAAa,MAAS;AAAA,EAC9G,oBAAoB,UAAU,KAC3B,YAAY,uEAAuE,EACnF,aAAa,MAAS;AAAA,EACzB,qBAAqB,UAAU,KAAK,YAAY,yCAAyC,EAAE,aAAa,KAAK;AAAA,EAC7G,cAAc,UAAU,KAAK,YAAY,6BAA6B,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,OAClB,YAAY,sDAAsD,EAClE,aAAa,uBAAuB;AAAA,EACvC,UAAU,UAAU,KAAK,YAAY,kCAAkC,EAAE;AAAA,EACzE,mBAAmB,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,WAAW;AAAA,EACpG,gBAAgB,UAAU,OAAO,YAAY,0CAA0C,EAAE,aAAa,CAAC,CAAC;AAAA,EACxG,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EACxF,YAAY,uBAAuB,EACnC,aAAa,MAAS;AAC3B;AAEO,MAAM,mBAAyC;AAAA,EACpD,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,MAAM,SAAS;AAAA,EACf,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,kBAAkB;AAAA,EAClB,eAAe;AACjB;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-tabs",
3
- "version": "3.12.1",
3
+ "version": "3.13.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Tabs",
6
6
  "files": [
@@ -133,11 +133,11 @@
133
133
  "dependencies": {
134
134
  "@react-hook/resize-observer": "~1.2.5",
135
135
  "react-swipeable-views": "~0.14.0",
136
- "@elliemae/ds-button": "3.12.1",
137
- "@elliemae/ds-icon": "3.12.1",
138
- "@elliemae/ds-icons": "3.12.1",
139
- "@elliemae/ds-system": "3.12.1",
140
- "@elliemae/ds-utilities": "3.12.1"
136
+ "@elliemae/ds-button": "3.13.0-next.2",
137
+ "@elliemae/ds-icons": "3.13.0-next.2",
138
+ "@elliemae/ds-icon": "3.13.0-next.2",
139
+ "@elliemae/ds-system": "3.13.0-next.2",
140
+ "@elliemae/ds-utilities": "3.13.0-next.2"
141
141
  },
142
142
  "devDependencies": {
143
143
  "@testing-library/jest-dom": "~5.16.4",