@plasmicpkgs/plasmic-tabs 0.0.9 → 0.0.11

package/dist/plasmic-tabs.cjs.development.js

@@ -43,6 +43,7 @@ function defaultButtonChildren(label) {
 var DebugContext = /*#__PURE__*/React.createContext(false);
 function useTabsData(_ref) {
   var initialKey = _ref.initialKey,
+    previewKey = _ref.previewKey,
     _ref$mountMode = _ref.mountMode,
     mountMode = _ref$mountMode === void 0 ? 'mountOneAtATime' : _ref$mountMode;
   var _useState = React.useState(initialKey),
@@ -51,8 +52,9 @@ function useTabsData(_ref) {
   var _useState2 = React.useState(undefined),
     bbox = _useState2[0],
     setBbox = _useState2[1];
+  var inEditor = host.usePlasmicCanvasContext();
   return {
-    tabKey: tabKey,
+    tabKey: inEditor ? previewKey || tabKey : tabKey,
     bbox: bbox,
     setTabKey: setTabKey,
     setBbox: setBbox,
@@ -73,6 +75,7 @@ var TabsContainerMeta = {
   importName: 'TabsContainer',
   importPath: modulePath,
   providesData: true,
+  description: 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',
   defaultStyles: {
     width: 'stretch',
     padding: '8px'
@@ -167,7 +170,8 @@ function TabsContainer(_ref2) {
     previewAll = _ref2$previewAll === void 0 ? false : _ref2$previewAll;
   var inEditor = !!host.usePlasmicCanvasContext();
   return React__default.createElement(TabsProvider, {
-    initialKey: initialKey
+    initialKey: initialKey,
+    previewKey: previewKey
   }, React__default.createElement(DebugContext.Provider, {
     value: inEditor && previewAll
   }, React__default.createElement(Helper, {
@@ -181,15 +185,12 @@ function ensure(x) {
   return x;
 }
 function Helper(_ref3) {
-  var children = _ref3.children,
-    previewKey = _ref3.previewKey;
-  var inEditor = host.usePlasmicCanvasContext();
+  var children = _ref3.children;
   var _ensure = ensure(useTabsContext()),
     tabKey = _ensure.tabKey;
-  var effectiveKey = inEditor ? previewKey || tabKey : tabKey;
   return React__default.createElement(host.DataProvider, {
     name: 'currentTabKey',
-    data: effectiveKey
+    data: tabKey
   }, children);
 }
 var TabUnderlineMeta = {

package/dist/plasmic-tabs.cjs.development.js.map

@@ -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  mountMode = 'mountOneAtATime',\n}: {\n  initialKey?: 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  return {\n    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  importPath: modulePath,\n  providesData: true,\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: 'SShow 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}>\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 inEditor = usePlasmicCanvasContext();\n  const { tabKey } = ensure(useTabsContext());\n  const effectiveKey = inEditor ? previewKey || tabKey : tabKey;\n  return (\n    <DataProvider name={'currentTabKey'} data={effectiveKey}>\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 ? children : 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","initialKey","mountMode","useState","tabKey","setTabKey","undefined","bbox","setBbox","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","importPath","providesData","defaultStyles","width","padding","description","defaultValue","previewKey","previewAll","advanced","options","defaultValueHint","TabsContainer","inEditor","usePlasmicCanvasContext","React","Provider","Helper","ensure","x","Error","effectiveKey","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","className","style","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","tabsContext","ref","useRef","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","useContext","show","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
+{"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  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: 'SShow 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 ? children : 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","initialKey","previewKey","mountMode","useState","tabKey","setTabKey","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","React","Provider","Helper","ensure","x","Error","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","className","style","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","tabsContext","ref","useRef","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","useContext","show","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}

package/dist/plasmic-tabs.cjs.production.min.js

@@ -1,2 +1,2 @@
-"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 u=o.createContext(!1);function c(e){var t=e.mountMode,n=void 0===t?"mountOneAtATime":t,a=o.useState(e.initialKey),r=a[0],i=a[1],s=o.useState(void 0);return{tabKey:r,bbox:s[0],setTabKey:i,setBbox:s[1],mountMode:n}}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",importPath:y,providesData:!0,defaultStyles:{width:"stretch",padding:"8px"},props:{initialKey:{type:"string",description:"Key of the initially selected tab",defaultValue:"tab1"},previewKey:{type:"string",description:"SShow 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},r.createElement(u.Provider,{value:l&&s},r.createElement(f,{previewKey:o||a},t)))}function f(e){var t=e.children,a=e.previewKey,o=n.usePlasmicCanvasContext(),i=function(e){if(!e)throw new Error("unexpected nil");return e}(m()).tabKey;return r.createElement(n.DataProvider,{name:"currentTabKey",data:o&&a||i},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?t: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)};
+"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 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",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:"SShow 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?t: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)};
 //# sourceMappingURL=plasmic-tabs.cjs.production.min.js.map

package/dist/plasmic-tabs.cjs.production.min.js.map

@@ -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  mountMode = 'mountOneAtATime',\n}: {\n  initialKey?: 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  return {\n    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  importPath: modulePath,\n  providesData: true,\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: 'SShow 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}>\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 inEditor = usePlasmicCanvasContext();\n  const { tabKey } = ensure(useTabsContext());\n  const effectiveKey = inEditor ? previewKey || tabKey : tabKey;\n  return (\n    <DataProvider name={'currentTabKey'} data={effectiveKey}>\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 ? children : 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$mountMode","mountMode","useState","initialKey","tabKey","setTabKey","undefined","bbox","setBbox","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","importPath","providesData","defaultStyles","width","padding","description","defaultValue","previewKey","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2$previewAll","inEditor","usePlasmicCanvasContext","React","Provider","Helper","x","Error","ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","className","style","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","tabsContext","ref","useRef","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","useContext","show","everMounted","setEverMounted","divContent","display","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
+{"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  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: 'SShow 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 ? children : 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","previewKey","_ref$mountMode","mountMode","useState","initialKey","tabKey","setTabKey","undefined","bbox","setBbox","usePlasmicCanvasContext","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2$previewAll","inEditor","React","Provider","Helper","x","Error","ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","className","style","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","tabsContext","ref","useRef","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","useContext","show","everMounted","setEverMounted","divContent","display","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}

package/dist/plasmic-tabs.esm.js

@@ -36,6 +36,7 @@ function defaultButtonChildren(label) {
 var DebugContext = /*#__PURE__*/createContext(false);
 function useTabsData(_ref) {
   var initialKey = _ref.initialKey,
+    previewKey = _ref.previewKey,
     _ref$mountMode = _ref.mountMode,
     mountMode = _ref$mountMode === void 0 ? 'mountOneAtATime' : _ref$mountMode;
   var _useState = useState(initialKey),
@@ -44,8 +45,9 @@ function useTabsData(_ref) {
   var _useState2 = useState(undefined),
     bbox = _useState2[0],
     setBbox = _useState2[1];
+  var inEditor = usePlasmicCanvasContext();
   return {
-    tabKey: tabKey,
+    tabKey: inEditor ? previewKey || tabKey : tabKey,
     bbox: bbox,
     setTabKey: setTabKey,
     setBbox: setBbox,
@@ -66,6 +68,7 @@ var TabsContainerMeta = {
   importName: 'TabsContainer',
   importPath: modulePath,
   providesData: true,
+  description: 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',
   defaultStyles: {
     width: 'stretch',
     padding: '8px'
@@ -160,7 +163,8 @@ function TabsContainer(_ref2) {
     previewAll = _ref2$previewAll === void 0 ? false : _ref2$previewAll;
   var inEditor = !!usePlasmicCanvasContext();
   return React.createElement(TabsProvider, {
-    initialKey: initialKey
+    initialKey: initialKey,
+    previewKey: previewKey
   }, React.createElement(DebugContext.Provider, {
     value: inEditor && previewAll
   }, React.createElement(Helper, {
@@ -174,15 +178,12 @@ function ensure(x) {
   return x;
 }
 function Helper(_ref3) {
-  var children = _ref3.children,
-    previewKey = _ref3.previewKey;
-  var inEditor = usePlasmicCanvasContext();
+  var children = _ref3.children;
   var _ensure = ensure(useTabsContext()),
     tabKey = _ensure.tabKey;
-  var effectiveKey = inEditor ? previewKey || tabKey : tabKey;
   return React.createElement(DataProvider, {
     name: 'currentTabKey',
-    data: effectiveKey
+    data: tabKey
   }, children);
 }
 var TabUnderlineMeta = {

package/dist/plasmic-tabs.esm.js.map

@@ -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  mountMode = 'mountOneAtATime',\n}: {\n  initialKey?: 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  return {\n    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  importPath: modulePath,\n  providesData: true,\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: 'SShow 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}>\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 inEditor = usePlasmicCanvasContext();\n  const { tabKey } = ensure(useTabsContext());\n  const effectiveKey = inEditor ? previewKey || tabKey : tabKey;\n  return (\n    <DataProvider name={'currentTabKey'} data={effectiveKey}>\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 ? children : 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","initialKey","mountMode","useState","tabKey","setTabKey","undefined","bbox","setBbox","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","importPath","providesData","defaultStyles","width","padding","description","defaultValue","previewKey","previewAll","advanced","options","defaultValueHint","TabsContainer","inEditor","usePlasmicCanvasContext","React","Provider","Helper","ensure","x","Error","effectiveKey","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","className","style","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","tabsContext","ref","useRef","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","useContext","show","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
+{"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  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: 'SShow 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 ? children : 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","initialKey","previewKey","mountMode","useState","tabKey","setTabKey","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","React","Provider","Helper","ensure","x","Error","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","className","style","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","tabsContext","ref","useRef","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","useContext","show","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.9",
+  "version": "0.0.11",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -62,5 +62,5 @@
   "dependencies": {
     "constate": "^3.3.2"
   },
-  "gitHead": "c38f181fa834dca41737aa37a6dc3ad28a0f655f"
+  "gitHead": "10ab82db81f1654102ff8ed100c5ee16c61465e0"
 }