@plasmicpkgs/plasmic-tabs 0.0.76 → 0.0.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/plasmic-tabs.cjs.development.js.map +1 -1
  3. package/dist/plasmic-tabs.cjs.production.min.js.map +1 -1
  4. package/dist/plasmic-tabs.esm.js.map +1 -1
  5. package/dist/tabs.d.ts +5 -5
  6. package/package.json +3 -3
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import registerComponent from "@plasmicapp/host/registerComponent";
1
+ import registerComponent from '@plasmicapp/host/registerComponent';
2
2
  export declare function registerAll(loader?: {
3
3
  registerComponent: typeof registerComponent;
4
4
  }): void;
5
- export * from "./tabs";
5
+ export * from './tabs';
package/dist/plasmic-tabs.cjs.development.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"plasmic-tabs.cjs.development.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","initialKey","previewKey","_ref$mountMode","mountMode","_useState","useState","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","React","Provider","Helper","ensure","x","Error","_ref3","_ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_ref5","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"plasmic-tabs.cjs.development.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import { DataProvider, usePlasmicCanvasContext } from '@plasmicapp/host';\nimport { CodeComponentMeta } from '@plasmicapp/host/registerComponent';\nimport constate from 'constate';\nimport React, {\n ReactElement,\n ReactNode,\n cloneElement,\n createContext,\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: CodeComponentMeta<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: CodeComponentMeta<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: CodeComponentMeta<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: CodeComponentMeta<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 CodeComponentMeta,\n} from '@plasmicapp/host/registerComponent';\n\nimport {\n TabButton,\n TabButtonMeta,\n TabContent,\n TabContentMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabsContainer,\n TabsContainerMeta,\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: CodeComponentMeta<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\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.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"plasmic-tabs.cjs.production.min.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","previewKey","_ref$mountMode","mountMode","_useState","useState","initialKey","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","inEditor","React","Provider","Helper","_ref3","_ensure","x","Error","ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"plasmic-tabs.cjs.production.min.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import { DataProvider, usePlasmicCanvasContext } from '@plasmicapp/host';\nimport { CodeComponentMeta } from '@plasmicapp/host/registerComponent';\nimport constate from 'constate';\nimport React, {\n ReactElement,\n ReactNode,\n cloneElement,\n createContext,\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: CodeComponentMeta<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: CodeComponentMeta<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: CodeComponentMeta<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: CodeComponentMeta<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 CodeComponentMeta,\n} from '@plasmicapp/host/registerComponent';\n\nimport {\n TabButton,\n TabButtonMeta,\n TabContent,\n TabContentMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabsContainer,\n TabsContainerMeta,\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: CodeComponentMeta<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\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.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"plasmic-tabs.esm.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import {\n ComponentMeta,\n DataProvider,\n usePlasmicCanvasContext,\n} from '@plasmicapp/host';\nimport constate from 'constate';\nimport React, {\n cloneElement,\n createContext,\n ReactElement,\n ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nconst noop = () => {\n // noop\n};\n\nfunction defaultButtonChildren(label: string) {\n return {\n type: 'default-component',\n kind: 'button',\n props: {\n children: {\n type: 'text',\n value: label,\n },\n },\n } as const;\n}\nexport interface TabsProviderProps {\n children?: ReactNode;\n initialKey?: string;\n previewKey?: string;\n previewAll?: boolean;\n}\n\nconst DebugContext = createContext(false);\n\nexport type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';\n\nfunction useTabsData({\n initialKey,\n previewKey,\n mountMode = 'mountOneAtATime',\n}: {\n initialKey?: string;\n previewKey?: string;\n mountMode?: MountMode;\n}) {\n const [tabKey, setTabKey] = useState<string | undefined>(initialKey);\n const [bbox, setBbox] = useState<{ left: number; width: number } | undefined>(\n undefined\n );\n const inEditor = usePlasmicCanvasContext();\n return {\n tabKey: inEditor ? previewKey || tabKey : tabKey,\n bbox,\n setTabKey,\n setBbox,\n mountMode,\n };\n}\n\nconst [TabsProvider, useTabsContextUnsafe] = constate(useTabsData);\n\nfunction useTabsContext() {\n const result = useTabsContextUnsafe();\n return 'setTabKey' in result ? result : undefined;\n}\nconst modulePath = '@plasmicpkgs/plasmic-tabs';\n\nexport const TabsContainerMeta: ComponentMeta<TabsProviderProps> = {\n name: 'hostless-tabs-container',\n displayName: 'Tabs Container',\n importName: 'TabsContainer',\n styleSections: false,\n importPath: modulePath,\n providesData: true,\n description:\n 'Create bespoke/advanced tab-like UIs. [See example project](https://docs.plasmic.app/learn/tabs-components/)',\n defaultStyles: {\n width: 'stretch',\n padding: '8px',\n },\n props: {\n initialKey: {\n type: 'string',\n description: 'Key of the initially selected tab',\n defaultValue: 'tab1',\n },\n previewKey: {\n type: 'string',\n description: 'Show this key while editing in Plasmic Studio',\n },\n previewAll: {\n type: 'boolean',\n description: 'Reveal all tab contents while editing in Plasmic Studio',\n },\n mountMode: {\n advanced: true,\n description: 'How to render/mount tab content.',\n type: 'choice',\n options: [\n {\n label: 'Mount one at a time, unmount on hide',\n value: 'mountOneAtATime',\n },\n {\n label: 'Mount all up-front, do not unmount',\n value: 'mountAllEagerly',\n },\n {\n label: 'Mount on-demand/lazily, do not unmount',\n value: 'mountLazily',\n },\n ],\n defaultValueHint: 'mountOneAtATime',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: [\n {\n type: 'hbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab1',\n children: defaultButtonChildren('Tab 1'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-button',\n props: {\n tabKey: 'tab2',\n children: defaultButtonChildren('Tab 2'),\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-underline',\n },\n ],\n },\n {\n type: 'vbox',\n children: [\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab1',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 1'],\n },\n ],\n },\n },\n {\n type: 'component',\n name: 'hostless-tab-content',\n props: {\n tabKey: 'tab2',\n children: [\n {\n type: 'vbox',\n children: ['Some content for tab 2'],\n },\n ],\n },\n },\n ],\n },\n ],\n },\n },\n },\n};\n\nexport function TabsContainer({\n children,\n initialKey,\n previewKey,\n previewAll = false,\n}: TabsProviderProps) {\n const inEditor = !!usePlasmicCanvasContext();\n return (\n <TabsProvider initialKey={initialKey} previewKey={previewKey}>\n <DebugContext.Provider value={inEditor && previewAll}>\n <Helper previewKey={previewKey || initialKey}>{children}</Helper>\n </DebugContext.Provider>\n </TabsProvider>\n );\n}\n\nfunction ensure<T>(x: T | undefined | null) {\n if (!x) {\n throw new Error('unexpected nil');\n }\n return x;\n}\n\nfunction Helper({\n children,\n previewKey,\n}: {\n previewKey?: string;\n children?: ReactNode;\n}) {\n const { tabKey } = ensure(useTabsContext());\n return (\n <DataProvider name={'currentTabKey'} data={tabKey}>\n {children}\n </DataProvider>\n );\n}\n\nexport interface TabUnderlineProps {\n className?: string;\n}\n\nexport const TabUnderlineMeta: ComponentMeta<TabUnderlineProps> = {\n name: 'hostless-tab-underline',\n displayName: 'Tab Underline',\n importName: 'TabUnderline',\n importPath: modulePath,\n props: {},\n defaultStyles: {\n background: '#7777ff',\n height: '2px',\n },\n};\n\nexport function TabUnderline({ className }: TabUnderlineProps) {\n const { bbox } = useTabsContext() ?? { bbox: undefined };\n return bbox ? (\n <div\n className={className}\n style={{\n ...JSON.parse(JSON.stringify(bbox)),\n top: undefined,\n bottom: 0,\n position: 'absolute',\n transition: '.4s ease all',\n }}\n ></div>\n ) : null;\n}\n\nexport interface TabButtonProps {\n className?: string;\n children?: ReactNode;\n tabKey?: string;\n}\n\nexport const TabButtonMeta: ComponentMeta<TabButtonProps> = {\n name: 'hostless-tab-button',\n isAttachment: true,\n displayName: 'Tab Button',\n importName: 'TabButton',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: defaultButtonChildren('Some tab'),\n },\n },\n defaultStyles: {\n width: 'hug',\n },\n};\n\nexport function TabButton({ className, children, tabKey }: TabButtonProps) {\n const tabsContext = useTabsContext();\n const ref = useRef<HTMLDivElement>(null);\n const {\n tabKey: activeKey,\n setTabKey,\n bbox,\n setBbox,\n } = tabsContext ?? {\n tabKey: undefined,\n setTabKey: noop,\n bbox: undefined,\n setBbox: noop,\n };\n useEffect(() => {\n if (tabKey === activeKey) {\n setBbox({\n width: ref.current!.offsetWidth,\n left: ref.current!.offsetLeft,\n });\n }\n }, [ref.current, setBbox, JSON.stringify(bbox), tabKey, activeKey]);\n return (\n <div className={className} ref={ref}>\n {cloneElement(React.Children.toArray(children)[0] as ReactElement, {\n isActive: tabKey && activeKey && activeKey === tabKey,\n onClick: () => {\n setTabKey(tabKey);\n },\n })}\n </div>\n );\n}\n\nexport interface TabContentProps {\n children?: ReactNode;\n tabKey?: string;\n className?: string;\n}\n\nexport const TabContentMeta: ComponentMeta<TabContentProps> = {\n name: 'hostless-tab-content',\n isAttachment: true,\n displayName: 'Tab Content',\n importName: 'TabContent',\n importPath: modulePath,\n props: {\n tabKey: {\n type: 'string',\n description: 'The answer value selecting this choice sets',\n },\n children: {\n type: 'slot',\n defaultValue: {\n type: 'vbox',\n children: {\n type: 'text',\n value: 'This is some tab content',\n },\n },\n },\n },\n};\n\nexport function TabContent({\n children,\n className,\n tabKey,\n}: TabContentProps): ReactElement {\n const tabsContext = useTabsContext();\n const previewAll = useContext(DebugContext);\n const { tabKey: activeKey, mountMode } = tabsContext ?? {\n tabKey: undefined,\n mountMode: 'mountOneAtATime',\n };\n const show = tabsContext === undefined || activeKey === tabKey || previewAll;\n const [everMounted, setEverMounted] = useState(false);\n useEffect(() => {\n if (show) {\n setEverMounted(true);\n }\n }, [show]);\n const divContent = (\n <div className={className} style={show ? {} : { display: 'none' }}>\n {children}\n </div>\n );\n switch (mountMode) {\n case 'mountOneAtATime':\n return <>{show ? divContent : null}</>;\n case 'mountAllEagerly':\n return divContent;\n case 'mountLazily':\n return <>{everMounted && divContent}</>;\n }\n throw new Error(`Unexpected mount mode ${mountMode}`);\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\n\nimport {\n TabsContainer,\n TabsContainerMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabButton,\n TabButtonMeta,\n TabContent, TabContentMeta\n} from \"./tabs\";\n\nexport function registerAll(loader?: {\n registerComponent: typeof registerComponent;\n}) {\n const _registerComponent = <T extends React.ComponentType<any>>(\n Component: T,\n defaultMeta: ComponentMeta<React.ComponentProps<T>>\n ) => {\n if (loader) {\n loader.registerComponent(Component, defaultMeta);\n } else {\n registerComponent(Component, defaultMeta);\n }\n };\n \n _registerComponent(TabsContainer, TabsContainerMeta);\n _registerComponent(TabUnderline, TabUnderlineMeta);\n _registerComponent(TabButton, TabButtonMeta);\n _registerComponent(TabContent, TabContentMeta);\n\n}\n\nexport * from \"./tabs\";\n"],"names":["noop","defaultButtonChildren","label","type","kind","props","children","value","DebugContext","createContext","useTabsData","_ref","initialKey","previewKey","_ref$mountMode","mountMode","_useState","useState","tabKey","setTabKey","_useState2","undefined","bbox","setBbox","inEditor","usePlasmicCanvasContext","_constate","constate","TabsProvider","useTabsContextUnsafe","useTabsContext","result","modulePath","TabsContainerMeta","name","displayName","importName","styleSections","importPath","providesData","description","defaultStyles","width","padding","defaultValue","previewAll","advanced","options","defaultValueHint","TabsContainer","_ref2","_ref2$previewAll","React","Provider","Helper","ensure","x","Error","_ref3","_ensure","DataProvider","data","TabUnderlineMeta","background","height","TabUnderline","_ref4","className","_ref5","_useTabsContext","style","_extends","JSON","parse","stringify","top","bottom","position","transition","TabButtonMeta","isAttachment","TabButton","_ref6","tabsContext","ref","useRef","_ref7","activeKey","useEffect","current","offsetWidth","left","offsetLeft","cloneElement","Children","toArray","isActive","onClick","TabContentMeta","TabContent","_ref8","useContext","_ref9","show","_useState3","everMounted","setEverMounted","divContent","display","registerAll","loader","_registerComponent","Component","defaultMeta","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"plasmic-tabs.esm.js","sources":["../src/tabs.tsx","../src/index.tsx"],"sourcesContent":["import { DataProvider, usePlasmicCanvasContext } from '@plasmicapp/host';\nimport { CodeComponentMeta } from '@plasmicapp/host/registerComponent';\nimport constate from 'constate';\nimport React, {\n ReactElement,\n ReactNode,\n cloneElement,\n createContext,\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: CodeComponentMeta<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: CodeComponentMeta<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: CodeComponentMeta<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: CodeComponentMeta<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 CodeComponentMeta,\n} from '@plasmicapp/host/registerComponent';\n\nimport {\n TabButton,\n TabButtonMeta,\n TabContent,\n TabContentMeta,\n TabUnderline,\n TabUnderlineMeta,\n TabsContainer,\n TabsContainerMeta,\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: CodeComponentMeta<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\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/tabs.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ComponentMeta } from '@plasmicapp/host';
1
+ import { CodeComponentMeta } from '@plasmicapp/host/registerComponent';
2
2
  import React, { ReactElement, ReactNode } from 'react';
3
3
  export interface TabsProviderProps {
4
4
  children?: ReactNode;
@@ -7,24 +7,24 @@ export interface TabsProviderProps {
7
7
  previewAll?: boolean;
8
8
  }
9
9
  export declare type MountMode = 'mountOneAtATime' | 'mountAllEagerly' | 'mountLazily';
10
- export declare const TabsContainerMeta: ComponentMeta<TabsProviderProps>;
10
+ export declare const TabsContainerMeta: CodeComponentMeta<TabsProviderProps>;
11
11
  export declare function TabsContainer({ children, initialKey, previewKey, previewAll, }: TabsProviderProps): React.JSX.Element;
12
12
  export interface TabUnderlineProps {
13
13
  className?: string;
14
14
  }
15
- export declare const TabUnderlineMeta: ComponentMeta<TabUnderlineProps>;
15
+ export declare const TabUnderlineMeta: CodeComponentMeta<TabUnderlineProps>;
16
16
  export declare function TabUnderline({ className }: TabUnderlineProps): React.JSX.Element | null;
17
17
  export interface TabButtonProps {
18
18
  className?: string;
19
19
  children?: ReactNode;
20
20
  tabKey?: string;
21
21
  }
22
- export declare const TabButtonMeta: ComponentMeta<TabButtonProps>;
22
+ export declare const TabButtonMeta: CodeComponentMeta<TabButtonProps>;
23
23
  export declare function TabButton({ className, children, tabKey }: TabButtonProps): React.JSX.Element;
24
24
  export interface TabContentProps {
25
25
  children?: ReactNode;
26
26
  tabKey?: string;
27
27
  className?: string;
28
28
  }
29
- export declare const TabContentMeta: ComponentMeta<TabContentProps>;
29
+ export declare const TabContentMeta: CodeComponentMeta<TabContentProps>;
30
30
  export declare function TabContent({ children, className, tabKey, }: TabContentProps): ReactElement;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.0.76",
2
+ "version": "0.0.78",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -58,8 +58,8 @@
58
58
  "tslib": "^2.3.1"
59
59
  },
60
60
  "dependencies": {
61
- "@plasmicapp/host": "1.0.234",
61
+ "@plasmicapp/host": "1.0.235",
62
62
  "constate": "^3.3.2"
63
63
  },
64
- "gitHead": "30e1d9c40c46f513d507349568dc16bc5f3e9572"
64
+ "gitHead": "380a91b2e7eac342c9b2ddafdacd84b4a812b795"
65
65
  }