@plasmicpkgs/plasmic-tabs 0.0.52 → 0.0.53

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.
@@ -11,18 +11,13 @@ var React = require('react');
11
11
  var React__default = _interopDefault(React);
12
12
 
13
13
  function _extends() {
14
- _extends = Object.assign ? Object.assign.bind() : function (target) {
15
- for (var i = 1; i < arguments.length; i++) {
16
- var source = arguments[i];
17
- for (var key in source) {
18
- if (Object.prototype.hasOwnProperty.call(source, key)) {
19
- target[key] = source[key];
20
- }
21
- }
14
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
15
+ for (var e = 1; e < arguments.length; e++) {
16
+ var t = arguments[e];
17
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
22
18
  }
23
- return target;
24
- };
25
- return _extends.apply(this, arguments);
19
+ return n;
20
+ }, _extends.apply(null, arguments);
26
21
  }
27
22
 
28
23
  var noop = function noop() {
@@ -1 +1 @@
1
- {"version":3,"file":"plasmic-tabs.cjs.development.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","initialKey","previewKey","_ref$mountMode","mountMode","_useState","useState","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","React","Provider","Helper","ensure","x","Error","_ref3","_ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_ref5","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"plasmic-tabs.cjs.development.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","initialKey","previewKey","_ref$mountMode","mountMode","_useState","useState","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","React","Provider","Helper","ensure","x","Error","_ref3","_ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_ref5","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@plasmicapp/host/registerComponent")),n=require("@plasmicapp/host"),a=e(require("constate")),o=require("react"),r=e(o);function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}var s=function(){};function l(e){return{type:"default-component",kind:"button",props:{children:{type:"text",value:e}}}}var c=o.createContext(!1);function u(e){var t=e.previewKey,a=e.mountMode,r=void 0===a?"mountOneAtATime":a,i=o.useState(e.initialKey),s=i[0],l=i[1],c=o.useState(void 0),u=c[0],p=c[1];return{tabKey:n.usePlasmicCanvasContext()&&t||s,bbox:u,setTabKey:l,setBbox:p,mountMode:r}}var p=a(u),d=p[0],b=p[1];function m(){var e=b();return"setTabKey"in e?e:void 0}var y="@plasmicpkgs/plasmic-tabs",h={name:"hostless-tabs-container",displayName:"Tabs Container",importName:"TabsContainer",styleSections:!1,importPath:y,providesData:!0,description:"Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)",defaultStyles:{width:"stretch",padding:"8px"},props:{initialKey:{type:"string",description:"Key of the initially selected tab",defaultValue:"tab1"},previewKey:{type:"string",description:"Show this key while editing in Plasmic Studio"},previewAll:{type:"boolean",description:"Reveal all tab contents while editing in Plasmic Studio"},mountMode:{advanced:!0,description:"How to render/mount tab content.",type:"choice",options:[{label:"Mount one at a time, unmount on hide",value:"mountOneAtATime"},{label:"Mount all up-front, do not unmount",value:"mountAllEagerly"},{label:"Mount on-demand/lazily, do not unmount",value:"mountLazily"}],defaultValueHint:"mountOneAtATime"},children:{type:"slot",defaultValue:{type:"vbox",children:[{type:"hbox",children:[{type:"component",name:"hostless-tab-button",props:{tabKey:"tab1",children:l("Tab 1")}},{type:"component",name:"hostless-tab-button",props:{tabKey:"tab2",children:l("Tab 2")}},{type:"component",name:"hostless-tab-underline"}]},{type:"vbox",children:[{type:"component",name:"hostless-tab-content",props:{tabKey:"tab1",children:[{type:"vbox",children:["Some content for tab 1"]}]}},{type:"component",name:"hostless-tab-content",props:{tabKey:"tab2",children:[{type:"vbox",children:["Some content for tab 2"]}]}}]}]}}}};function v(e){var t=e.children,a=e.initialKey,o=e.previewKey,i=e.previewAll,s=void 0!==i&&i,l=!!n.usePlasmicCanvasContext();return r.createElement(d,{initialKey:a,previewKey:o},r.createElement(c.Provider,{value:l&&s},r.createElement(f,{previewKey:o||a},t)))}function f(e){var t=e.children,a=function(e){if(!e)throw new Error("unexpected nil");return e}(m());return r.createElement(n.DataProvider,{name:"currentTabKey",data:a.tabKey},t)}var x={name:"hostless-tab-underline",displayName:"Tab Underline",importName:"TabUnderline",importPath:y,props:{},defaultStyles:{background:"#7777ff",height:"2px"}};function T(e){var t,n=e.className,a=(null!=(t=m())?t:{bbox:void 0}).bbox;return a?r.createElement("div",{className:n,style:i({},JSON.parse(JSON.stringify(a)),{top:void 0,bottom:0,position:"absolute",transition:".4s ease all"})}):null}var K={name:"hostless-tab-button",isAttachment:!0,displayName:"Tab Button",importName:"TabButton",importPath:y,props:{tabKey:{type:"string",description:"The answer value selecting this choice sets"},children:{type:"slot",defaultValue:l("Some tab")}},defaultStyles:{width:"hug"}};function g(e){var t=e.className,n=e.children,a=e.tabKey,i=m(),l=o.useRef(null),c=null!=i?i:{tabKey:void 0,setTabKey:s,bbox:void 0,setBbox:s},u=c.tabKey,p=c.setTabKey,d=c.setBbox;return o.useEffect((function(){a===u&&d({width:l.current.offsetWidth,left:l.current.offsetLeft})}),[l.current,d,JSON.stringify(c.bbox),a,u]),r.createElement("div",{className:t,ref:l},o.cloneElement(r.Children.toArray(n)[0],{isActive:a&&u&&u===a,onClick:function(){p(a)}}))}var w={name:"hostless-tab-content",isAttachment:!0,displayName:"Tab Content",importName:"TabContent",importPath:y,props:{tabKey:{type:"string",description:"The answer value selecting this choice sets"},children:{type:"slot",defaultValue:{type:"vbox",children:{type:"text",value:"This is some tab content"}}}}};function A(e){var t=e.children,n=e.className,a=e.tabKey,i=m(),s=o.useContext(c),l=null!=i?i:{tabKey:void 0,mountMode:"mountOneAtATime"},u=l.mountMode,p=void 0===i||l.tabKey===a||s,d=o.useState(!1),b=d[0],y=d[1];o.useEffect((function(){p&&y(!0)}),[p]);var h=r.createElement("div",{className:n,style:p?{}:{display:"none"}},t);switch(u){case"mountOneAtATime":return r.createElement(r.Fragment,null,p?h:null);case"mountAllEagerly":return h;case"mountLazily":return r.createElement(r.Fragment,null,b&&h)}throw new Error("Unexpected mount mode "+u)}exports.TabButton=g,exports.TabButtonMeta=K,exports.TabContent=A,exports.TabContentMeta=w,exports.TabUnderline=T,exports.TabUnderlineMeta=x,exports.TabsContainer=v,exports.TabsContainerMeta=h,exports.registerAll=function(e){var n=function(n,a){e?e.registerComponent(n,a):t(n,a)};n(v,h),n(T,x),n(g,K),n(A,w)};
1
+ "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("@plasmicapp/host/registerComponent")),n=require("@plasmicapp/host"),a=e(require("constate")),o=require("react"),r=e(o);function i(){return(i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(null,arguments)}var s=function(){};function l(e){return{type:"default-component",kind:"button",props:{children:{type:"text",value:e}}}}var u=o.createContext(!1);function c(e){var t=e.previewKey,a=e.mountMode,r=void 0===a?"mountOneAtATime":a,i=o.useState(e.initialKey),s=i[0],l=i[1],u=o.useState(void 0),c=u[0],p=u[1];return{tabKey:n.usePlasmicCanvasContext()&&t||s,bbox:c,setTabKey:l,setBbox:p,mountMode:r}}var p=a(c),d=p[0],b=p[1];function m(){var e=b();return"setTabKey"in e?e:void 0}var y="@plasmicpkgs/plasmic-tabs",h={name:"hostless-tabs-container",displayName:"Tabs Container",importName:"TabsContainer",styleSections:!1,importPath:y,providesData:!0,description:"Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)",defaultStyles:{width:"stretch",padding:"8px"},props:{initialKey:{type:"string",description:"Key of the initially selected tab",defaultValue:"tab1"},previewKey:{type:"string",description:"Show this key while editing in Plasmic Studio"},previewAll:{type:"boolean",description:"Reveal all tab contents while editing in Plasmic Studio"},mountMode:{advanced:!0,description:"How to render/mount tab content.",type:"choice",options:[{label:"Mount one at a time, unmount on hide",value:"mountOneAtATime"},{label:"Mount all up-front, do not unmount",value:"mountAllEagerly"},{label:"Mount on-demand/lazily, do not unmount",value:"mountLazily"}],defaultValueHint:"mountOneAtATime"},children:{type:"slot",defaultValue:{type:"vbox",children:[{type:"hbox",children:[{type:"component",name:"hostless-tab-button",props:{tabKey:"tab1",children:l("Tab 1")}},{type:"component",name:"hostless-tab-button",props:{tabKey:"tab2",children:l("Tab 2")}},{type:"component",name:"hostless-tab-underline"}]},{type:"vbox",children:[{type:"component",name:"hostless-tab-content",props:{tabKey:"tab1",children:[{type:"vbox",children:["Some content for tab 1"]}]}},{type:"component",name:"hostless-tab-content",props:{tabKey:"tab2",children:[{type:"vbox",children:["Some content for tab 2"]}]}}]}]}}}};function v(e){var t=e.children,a=e.initialKey,o=e.previewKey,i=e.previewAll,s=void 0!==i&&i,l=!!n.usePlasmicCanvasContext();return r.createElement(d,{initialKey:a,previewKey:o},r.createElement(u.Provider,{value:l&&s},r.createElement(f,{previewKey:o||a},t)))}function f(e){var t=e.children,a=function(e){if(!e)throw new Error("unexpected nil");return e}(m());return r.createElement(n.DataProvider,{name:"currentTabKey",data:a.tabKey},t)}var x={name:"hostless-tab-underline",displayName:"Tab Underline",importName:"TabUnderline",importPath:y,props:{},defaultStyles:{background:"#7777ff",height:"2px"}};function T(e){var t,n=e.className,a=(null!=(t=m())?t:{bbox:void 0}).bbox;return a?r.createElement("div",{className:n,style:i({},JSON.parse(JSON.stringify(a)),{top:void 0,bottom:0,position:"absolute",transition:".4s ease all"})}):null}var K={name:"hostless-tab-button",isAttachment:!0,displayName:"Tab Button",importName:"TabButton",importPath:y,props:{tabKey:{type:"string",description:"The answer value selecting this choice sets"},children:{type:"slot",defaultValue:l("Some tab")}},defaultStyles:{width:"hug"}};function g(e){var t=e.className,n=e.children,a=e.tabKey,i=m(),l=o.useRef(null),u=null!=i?i:{tabKey:void 0,setTabKey:s,bbox:void 0,setBbox:s},c=u.tabKey,p=u.setTabKey,d=u.setBbox;return o.useEffect((function(){a===c&&d({width:l.current.offsetWidth,left:l.current.offsetLeft})}),[l.current,d,JSON.stringify(u.bbox),a,c]),r.createElement("div",{className:t,ref:l},o.cloneElement(r.Children.toArray(n)[0],{isActive:a&&c&&c===a,onClick:function(){p(a)}}))}var w={name:"hostless-tab-content",isAttachment:!0,displayName:"Tab Content",importName:"TabContent",importPath:y,props:{tabKey:{type:"string",description:"The answer value selecting this choice sets"},children:{type:"slot",defaultValue:{type:"vbox",children:{type:"text",value:"This is some tab content"}}}}};function A(e){var t=e.children,n=e.className,a=e.tabKey,i=m(),s=o.useContext(u),l=null!=i?i:{tabKey:void 0,mountMode:"mountOneAtATime"},c=l.mountMode,p=void 0===i||l.tabKey===a||s,d=o.useState(!1),b=d[0],y=d[1];o.useEffect((function(){p&&y(!0)}),[p]);var h=r.createElement("div",{className:n,style:p?{}:{display:"none"}},t);switch(c){case"mountOneAtATime":return r.createElement(r.Fragment,null,p?h:null);case"mountAllEagerly":return h;case"mountLazily":return r.createElement(r.Fragment,null,b&&h)}throw new Error("Unexpected mount mode "+c)}exports.TabButton=g,exports.TabButtonMeta=K,exports.TabContent=A,exports.TabContentMeta=w,exports.TabUnderline=T,exports.TabUnderlineMeta=x,exports.TabsContainer=v,exports.TabsContainerMeta=h,exports.registerAll=function(e){var n=function(n,a){e?e.registerComponent(n,a):t(n,a)};n(v,h),n(T,x),n(g,K),n(A,w)};
2
2
  //# sourceMappingURL=plasmic-tabs.cjs.production.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"plasmic-tabs.cjs.production.min.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","previewKey","_ref$mountMode","mountMode","_useState","useState","initialKey","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","inEditor","React","Provider","Helper","_ref3","_ensure","x","Error","ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"plasmic-tabs.cjs.production.min.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","previewKey","_ref$mountMode","mountMode","_useState","useState","initialKey","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","inEditor","React","Provider","Helper","_ref3","_ensure","x","Error","ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
@@ -4,18 +4,13 @@ import constate from 'constate';
4
4
  import React, { useRef, useEffect, cloneElement, useContext, useState, createContext } from 'react';
5
5
 
6
6
  function _extends() {
7
- _extends = Object.assign ? Object.assign.bind() : function (target) {
8
- for (var i = 1; i < arguments.length; i++) {
9
- var source = arguments[i];
10
- for (var key in source) {
11
- if (Object.prototype.hasOwnProperty.call(source, key)) {
12
- target[key] = source[key];
13
- }
14
- }
7
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
8
+ for (var e = 1; e < arguments.length; e++) {
9
+ var t = arguments[e];
10
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
15
11
  }
16
- return target;
17
- };
18
- return _extends.apply(this, arguments);
12
+ return n;
13
+ }, _extends.apply(null, arguments);
19
14
  }
20
15
 
21
16
  var noop = function noop() {
@@ -1 +1 @@
1
- {"version":3,"file":"plasmic-tabs.esm.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","initialKey","previewKey","_ref$mountMode","mountMode","_useState","useState","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","React","Provider","Helper","ensure","x","Error","_ref3","_ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_ref5","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"plasmic-tabs.esm.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","initialKey","previewKey","_ref$mountMode","mountMode","_useState","useState","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","React","Provider","Helper","ensure","x","Error","_ref3","_ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_ref5","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.0.52",
2
+ "version": "0.0.53",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -60,8 +60,8 @@
60
60
  "tslib": "^2.3.1"
61
61
  },
62
62
  "dependencies": {
63
- "@plasmicapp/host": "1.0.211",
63
+ "@plasmicapp/host": "1.0.212",
64
64
  "constate": "^3.3.2"
65
65
  },
66
- "gitHead": "93119895a0d403158e497a0abdccdcb24d670fb7"
66
+ "gitHead": "e14716fd42ea79a35e4844d660f6d12aa97a9768"
67
67
  }