@plasmicpkgs/plasmic-tabs 0.0.31 → 0.0.33

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

@@ -73,6 +73,7 @@ var TabsContainerMeta = {
   name: 'hostless-tabs-container',
   displayName: 'Tabs Container',
   importName: 'TabsContainer',
+  styleSections: false,
   importPath: modulePath,
   providesData: true,
   description: 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',
@@ -88,7 +89,7 @@ var TabsContainerMeta = {
     },
     previewKey: {
       type: 'string',
-      description: 'SShow this key while editing in Plasmic Studio'
+      description: 'Show this key while editing in Plasmic Studio'
     },
     previewAll: {
       type: 'boolean',
@@ -327,7 +328,7 @@ function TabContent(_ref8) {
   }, children);
   switch (mountMode) {
     case 'mountOneAtATime':
-      return React__default.createElement(React__default.Fragment, null, show ? children : null);
+      return React__default.createElement(React__default.Fragment, null, show ? divContent : null);
     case 'mountAllEagerly':
       return divContent;
     case 'mountLazily':

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  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","_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","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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"}
+{"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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"}

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.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)};
+"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)};
 //# 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  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","_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","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":"qfAiBA,IAAMA,EAAO,aAIb,SAASC,EAAsBC,GAC7B,MAAO,CACLC,KAAM,oBACNC,KAAM,SACNC,MAAO,CACLC,SAAU,CACRH,KAAM,OACNI,MAAOL,KAYf,IAAMM,EAAeC,iBAAc,GAInC,SAASC,EAAWC,OAElBC,EAAUD,EAAVC,WAAUC,EAAAF,EACVG,UAAAA,WAASD,EAAG,kBAAiBA,EAM7BE,EAA4BC,WARlBL,EAAVM,YAQOC,EAAMH,KAAEI,EAASJ,KACxBK,EAAwBJ,gBACtBK,GADKC,EAAIF,KAAEG,EAAOH,KAIpB,MAAO,CACLF,OAFeM,6BAEIZ,GAAuBM,EAC1CI,KAAAA,EACAH,UAAAA,EACAI,QAAAA,EACAT,UAAAA,GAIJ,IAAAW,EAA6CC,EAAShB,GAA/CiB,EAAYF,KAAEG,EAAoBH,KAEzC,SAASI,IACP,IAAMC,EAASF,IACf,MAAO,cAAeE,EAASA,OAAST,EAE1C,IAAMU,EAAa,4BAENC,EAAsD,CACjEC,KAAM,0BACNC,YAAa,iBACbC,WAAY,gBACZC,WAAYL,EACZM,cAAc,EACdC,YACE,+GACFC,cAAe,CACbC,MAAO,UACPC,QAAS,OAEXpC,MAAO,CACLY,WAAY,CACVd,KAAM,SACNmC,YAAa,oCACbI,aAAc,QAEhB9B,WAAY,CACVT,KAAM,SACNmC,YAAa,kDAEfK,WAAY,CACVxC,KAAM,UACNmC,YAAa,2DAEfxB,UAAW,CACT8B,UAAU,EACVN,YAAa,mCACbnC,KAAM,SACN0C,QAAS,CACP,CACE3C,MAAO,uCACPK,MAAO,mBAET,CACEL,MAAO,qCACPK,MAAO,mBAET,CACEL,MAAO,yCACPK,MAAO,gBAGXuC,iBAAkB,mBAEpBxC,SAAU,CACRH,KAAM,OACNuC,aAAc,CACZvC,KAAM,OACNG,SAAU,CACR,CACEH,KAAM,OACNG,SAAU,CACR,CACEH,KAAM,YACN8B,KAAM,sBACN5B,MAAO,CACLa,OAAQ,OACRZ,SAAUL,EAAsB,WAGpC,CACEE,KAAM,YACN8B,KAAM,sBACN5B,MAAO,CACLa,OAAQ,OACRZ,SAAUL,EAAsB,WAGpC,CACEE,KAAM,YACN8B,KAAM,4BAIZ,CACE9B,KAAM,OACNG,SAAU,CACR,CACEH,KAAM,YACN8B,KAAM,uBACN5B,MAAO,CACLa,OAAQ,OACRZ,SAAU,CACR,CACEH,KAAM,OACNG,SAAU,CAAC,8BAKnB,CACEH,KAAM,YACN8B,KAAM,uBACN5B,MAAO,CACLa,OAAQ,OACRZ,SAAU,CACR,CACEH,KAAM,OACNG,SAAU,CAAC,8CAajByC,EAAaC,OAC3B1C,EAAQ0C,EAAR1C,SACAW,EAAU+B,EAAV/B,WACAL,EAAUoC,EAAVpC,WAAUqC,EAAAD,EACVL,WAAAA,WAAUM,GAAQA,EAEZC,IAAa1B,4BACnB,OACE2B,gBAACxB,GAAaV,WAAYA,EAAYL,WAAYA,GAChDuC,gBAAC3C,EAAa4C,UAAS7C,MAAO2C,GAAYP,GACxCQ,gBAACE,GAAOzC,WAAYA,GAAcK,GAAaX,KAavD,SAAS+C,EAAMC,OACbhD,EAAQgD,EAARhD,SAMAiD,EAdF,SAAmBC,GACjB,IAAKA,EACH,MAAM,IAAIC,MAAM,kBAElB,OAAOD,EAUYE,CAAO7B,KAC1B,OACEsB,gBAACQ,gBAAa1B,KAAM,gBAAiB2B,KAFzBL,EAANrC,QAGHZ,OASMuD,EAAqD,CAChE5B,KAAM,yBACNC,YAAa,gBACbC,WAAY,eACZC,WAAYL,EACZ1B,MAAO,GACPkC,cAAe,CACbuB,WAAY,UACZC,OAAQ,iBAIIC,EAAYC,SAAGC,EAASD,EAATC,UACrB5C,UAAR6C,EAAiBtC,KAAgBsC,EAAI,CAAE7C,UAAMD,IAArCC,KACR,OAAOA,EACL6B,uBACEe,UAAWA,EACXE,MAAKC,KACAC,KAAKC,MAAMD,KAAKE,UAAUlD,KAC7BmD,SAAKpD,EACLqD,OAAQ,EACRC,SAAU,WACVC,WAAY,mBAGd,SASOC,EAA+C,CAC1D5C,KAAM,sBACN6C,cAAc,EACd5C,YAAa,aACbC,WAAY,YACZC,WAAYL,EACZ1B,MAAO,CACLa,OAAQ,CACNf,KAAM,SACNmC,YAAa,+CAEfhC,SAAU,CACRH,KAAM,OACNuC,aAAczC,EAAsB,cAGxCsC,cAAe,CACbC,MAAO,iBAIKuC,EAASC,OAAGd,EAASc,EAATd,UAAW5D,EAAQ0E,EAAR1E,SAAUY,EAAM8D,EAAN9D,OACzC+D,EAAcpD,IACdqD,EAAMC,SAAuB,MACnCC,QAKIH,EAAAA,EAAe,CACjB/D,YAAQG,EACRF,UAAWnB,EACXsB,UAAMD,EACNE,QAASvB,GARDqF,EAASD,EAAjBlE,OACAC,EAASiE,EAATjE,UAEAI,EAAO6D,EAAP7D,QAeF,OARA+D,aAAU,WACJpE,IAAWmE,GACb9D,EAAQ,CACNiB,MAAO0C,EAAIK,QAASC,YACpBC,KAAMP,EAAIK,QAASG,eAGtB,CAACR,EAAIK,QAAShE,EAAS+C,KAAKE,UAfzBY,EAAJ9D,MAe8CJ,EAAQmE,IAEtDlC,uBAAKe,UAAWA,EAAWgB,IAAKA,GAC7BS,eAAaxC,EAAMyC,SAASC,QAAQvF,GAAU,GAAoB,CACjEwF,SAAU5E,GAAUmE,GAAaA,IAAcnE,EAC/C6E,QAAS,WACP5E,EAAUD,WAaP8E,EAAiD,CAC5D/D,KAAM,uBACN6C,cAAc,EACd5C,YAAa,cACbC,WAAY,aACZC,WAAYL,EACZ1B,MAAO,CACLa,OAAQ,CACNf,KAAM,SACNmC,YAAa,+CAEfhC,SAAU,CACRH,KAAM,OACNuC,aAAc,CACZvC,KAAM,OACNG,SAAU,CACRH,KAAM,OACNI,MAAO,yCAOD0F,EAAUC,OACxB5F,EAAQ4F,EAAR5F,SACA4D,EAASgC,EAAThC,UACAhD,EAAMgF,EAANhF,OAEM+D,EAAcpD,IACdc,EAAawD,aAAW3F,GAC9B4F,QAAyCnB,EAAAA,EAAe,CACtD/D,YAAQG,EACRP,UAAW,mBAFcA,EAASsF,EAATtF,UAIrBuF,OAAuBhF,IAAhB4D,GAJYmB,EAAjBlF,SAIgDA,GAAUyB,EAClE2D,EAAsCtF,YAAS,GAAxCuF,EAAWD,KAAEE,EAAcF,KAClChB,aAAU,WACJe,GACFG,GAAe,KAEhB,CAACH,IACJ,IAAMI,EACJtD,uBAAKe,UAAWA,EAAWE,MAAOiC,EAAO,GAAK,CAAEK,QAAS,SACtDpG,GAGL,OAAQQ,GACN,IAAK,kBACH,OAAOqC,gCAAGkD,EAAO/F,EAAW,MAC9B,IAAK,kBACH,OAAOmG,EACT,IAAK,cACH,OAAOtD,gCAAGoD,GAAeE,GAE7B,MAAM,IAAIhD,+BAA+B3C,gOC9Wf6F,GAG1B,IAAMC,EAAqB,SACzBC,EACAC,GAEIH,EACFA,EAAOI,kBAAkBF,EAAWC,GAEpCC,EAAkBF,EAAWC,IAIjCF,EAAmB7D,EAAef,GAClC4E,EAAmB5C,EAAcH,GACjC+C,EAAmB7B,EAAWF,GAC9B+B,EAAmBX,EAAYD"}
+{"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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"}

package/dist/plasmic-tabs.esm.js

@@ -66,6 +66,7 @@ var TabsContainerMeta = {
   name: 'hostless-tabs-container',
   displayName: 'Tabs Container',
   importName: 'TabsContainer',
+  styleSections: false,
   importPath: modulePath,
   providesData: true,
   description: 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',
@@ -81,7 +82,7 @@ var TabsContainerMeta = {
     },
     previewKey: {
       type: 'string',
-      description: 'SShow this key while editing in Plasmic Studio'
+      description: 'Show this key while editing in Plasmic Studio'
     },
     previewAll: {
       type: 'boolean',
@@ -320,7 +321,7 @@ function TabContent(_ref8) {
   }, children);
   switch (mountMode) {
     case 'mountOneAtATime':
-      return React.createElement(React.Fragment, null, show ? children : null);
+      return React.createElement(React.Fragment, null, show ? divContent : null);
     case 'mountAllEagerly':
       return divContent;
     case 'mountLazily':

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  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","_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","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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"}
+{"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

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.31",
+  "version": "0.0.33",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -60,8 +60,8 @@
     "tslib": "^2.3.1"
   },
   "dependencies": {
-    "@plasmicapp/host": "1.0.191",
+    "@plasmicapp/host": "1.0.192",
     "constate": "^3.3.2"
   },
-  "gitHead": "df264a9098a27ee0323639e37204ec0dc58ba9f2"
+  "gitHead": "0597c84c0fa0df12523bfdbc1ba21ce81d34d63c"
 }