npm - @teambit/compositions - Versions diffs - 1.0.667 → 1.0.669 - Mend

@teambit/compositions 1.0.667 → 1.0.669

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 (35) hide show

package/composition.section.tsx +1 -1
package/compositions.tsx +7 -6
package/compositions.ui.runtime.tsx +11 -7
package/dist/composition.section.d.ts +1 -1
package/dist/composition.section.js.map +1 -1
package/dist/compositions.d.ts +5 -6
package/dist/compositions.graphql.d.ts +2 -2
package/dist/compositions.graphql.js.map +1 -1
package/dist/compositions.js.map +1 -1
package/dist/compositions.main.runtime.d.ts +11 -10
package/dist/compositions.main.runtime.js.map +1 -1
package/dist/compositions.preview-definition.d.ts +5 -5
package/dist/compositions.preview-definition.js.map +1 -1
package/dist/compositions.preview.runtime.d.ts +3 -3
package/dist/compositions.preview.runtime.js.map +1 -1
package/dist/compositions.ui.runtime.d.ts +6 -7
package/dist/compositions.ui.runtime.js.map +1 -1
package/dist/{preview-1753809186996.js → preview-1753848836384.js} +2 -2
package/dist/ui/composition-preview.d.ts +2 -2
package/dist/ui/composition-preview.js.map +1 -1
package/dist/ui/compositions-panel/compositions-panel.d.ts +1 -1
package/dist/ui/compositions-panel/compositions-panel.js.map +1 -1
package/dist/ui/compositions-panel/compositions-panel.module.scss +2 -0
package/dist/ui/compositions-panel/live-control-input.js +62 -38
package/dist/ui/compositions-panel/live-control-input.js.map +1 -1
package/dist/ui/compositions-panel/live-control-panel.js +4 -1
package/dist/ui/compositions-panel/live-control-panel.js.map +1 -1
package/dist/ui/compositions-panel/live-control-panel.module.scss +1 -0
package/package.json +19 -19
package/ui/composition-preview.tsx +3 -2
package/ui/compositions-panel/compositions-panel.module.scss +2 -0
package/ui/compositions-panel/compositions-panel.tsx +1 -1
package/ui/compositions-panel/live-control-input.tsx +111 -42
package/ui/compositions-panel/live-control-panel.module.scss +1 -0
package/ui/compositions-panel/live-control-panel.tsx +4 -1

package/dist/ui/composition-preview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","data","_interopRequireWildcard","require","_previewUi","_workspaceUi","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","ComponentComposition","_ref","composition","component","queryParams","rest","isMinimal","useWorkspaceMode","includesEnvTemplate","preview","isScaling","shouldAddNameParam","useNameParam","compositionParams","useMemo","identifier","concat","createElement","ComponentPreview","style","width","height","previewName","propagateError"],"sources":["composition-preview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ~~ComponentPreview,~~ ComponentPreviewProps } from '@teambit/preview.ui.component-preview';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\n\nimport { Composition } from '../composition';\n\nexport type ComponentCompositionProps = {\n /*\n composition to use for component rendering.\n */\n composition?: Composition;\n} & ComponentPreviewProps;\n\nexport function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {\n const { isMinimal } = useWorkspaceMode();\n const includesEnvTemplate = component.preview?.includesEnvTemplate;\n const isScaling = component.preview?.isScaling;\n const shouldAddNameParam = component.preview?.useNameParam \|\| (isScaling && includesEnvTemplate === false);\n\n const compositionParams = useMemo(\n () =>\n (composition ? [shouldAddNameParam ? `name=${composition.identifier}` : composition.identifier] : []).concat(\n queryParams\n ),\n [composition?.identifier, queryParams]\n );\n\n return (\n <ComponentPreview\n {...rest}\n component={component}\n style={{ width: '100%', height: '100%' }}\n previewName=\"compositions\"\n queryParams={compositionParams}\n propagateError={isMinimal}\n />\n );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,uBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;~~AACA~~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","ignoreList":[]}
1	+ {"version":3,"names":["_react","data","_interopRequireWildcard","require","_previewUi","_workspaceUi","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","ComponentComposition","_ref","composition","component","queryParams","rest","isMinimal","useWorkspaceMode","includesEnvTemplate","preview","isScaling","shouldAddNameParam","useNameParam","compositionParams","useMemo","identifier","concat","createElement","ComponentPreview","style","width","height","previewName","propagateError"],"sources":["composition-preview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { ComponentPreviewProps } from '@teambit/preview.ui.component-preview';\nimport { ComponentPreview } from '@teambit/preview.ui.component-preview';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\n\nimport type { Composition } from '../composition';\n\nexport type ComponentCompositionProps = {\n /*\n composition to use for component rendering.\n */\n composition?: Composition;\n} & ComponentPreviewProps;\n\nexport function ComponentComposition({ composition, component, queryParams = [], ...rest }: ComponentCompositionProps) {\n const { isMinimal } = useWorkspaceMode();\n const includesEnvTemplate = component.preview?.includesEnvTemplate;\n const isScaling = component.preview?.isScaling;\n const shouldAddNameParam = component.preview?.useNameParam \|\| (isScaling && includesEnvTemplate === false);\n\n const compositionParams = useMemo(\n () =>\n (composition ? [shouldAddNameParam ? `name=${composition.identifier}` : composition.identifier] : []).concat(\n queryParams\n ),\n [composition?.identifier, queryParams]\n );\n\n return (\n <ComponentPreview\n {...rest}\n component={component}\n style={{ width: '100%', height: '100%' }}\n previewName=\"compositions\"\n queryParams={compositionParams}\n propagateError={isMinimal}\n />\n );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/compositions-panel/compositions-panel.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Composition } from '../../composition';
+import type { Composition } from '../../composition';
 export type CompositionsPanelProps = {
     /**
      * list of compositions

package/dist/ui/compositions-panel/compositions-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_reactRouterDom","_react","_interopRequireWildcard","_uiFoundationUiTree","_uiFoundationUi","_designUi","_baseReactNavigation","_compositionsUi","_compositionsPanelModule","_liveControlPanel","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","indexOf","propertyIsEnumerable","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","useNameParam","className","rest","hasLiveControls","setHasLiveControls","useState","openDrawerList","onToggleDrawer","handleDrawerToggle","id","isDrawerOpen","includes","list","drawer","concat","shouldAddNameParam","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","controlsTimestamp","setControlsTimestamp","controlsDefs","setControlsDefs","controlsValues","setControlsValues","mounter","setMounter","handleSelect","useCallback","selected","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","useEffect","window","addEventListener","type","onLiveControlsSetup","getReadyListener","controls","values","timestamp","iframeWindow","source","removeEventListener","onLiveControlsUpdate","key","broadcastUpdate","prev","createElement","classNames","styles","container","DrawerUI","isOpen","onToggle","name","tab","map","href","linkWrapper","panelLink","onClick","displayName","right","MenuWidgetIcon","codeLink","icon","tooltipContent","Tooltip","content","placement","iconLink","target","rel","Icon","of","LiveControls","defs","onChange","noLiveControls"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport { useSearchParams } from 'react-router-dom';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport {\n type LiveControlReadyEventData,\n getReadyListener,\n broadcastUpdate,\n} from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './compositions-panel.module.scss';\nimport { Composition } from '../../composition';\nimport { LiveControls } from './live-control-panel';\n\nexport type CompositionsPanelProps = {\n /*\n list of compositions\n /\n compositions: Composition[];\n /\n select composition to display\n /\n onSelectComposition: (composition: Composition) => void;\n /\n the currently active composition\n /\n active?: Composition;\n /\n the url to the base composition. doesntc contain the current composition params\n /\n url: string;\n /\n checks if a component is using the new preview api. if false, doesnt scale to support new preview\n /\n isScaling?: boolean;\n\n includesEnvTemplate?: boolean;\n\n useNameParam?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n url,\n compositions,\n isScaling,\n onSelectComposition: onSelect,\n active,\n includesEnvTemplate,\n useNameParam,\n className,\n ...rest\n}: CompositionsPanelProps) {\n // setup drawer state\n // TODO: only for alpha versions of live controls. remove when stable.\n const [hasLiveControls, setHasLiveControls] = useState(false);\n const [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);\n const handleDrawerToggle = (id: string) => {\n const isDrawerOpen = openDrawerList.includes(id);\n if (isDrawerOpen) {\n onToggleDrawer((list) => list.filter((drawer) => drawer !== id));\n return;\n }\n onToggleDrawer((list) => list.concat(id));\n };\n\n // setup from props\n const shouldAddNameParam = useNameParam \|\| (isScaling && includesEnvTemplate === false);\n\n // current composition state\n const location = useLocation();\n const [searchParams] = useSearchParams();\n const versionFromQueryParams = searchParams.get('version');\n const navigate = useNavigate();\n\n // live control state\n const [controlsTimestamp, setControlsTimestamp] = useState(0);\n const [controlsDefs, setControlsDefs] = useState<any>(null);\n const [controlsValues, setControlsValues] = useState<any>({});\n const [mounter, setMounter] = useState<Window>();\n\n // composition navigation action\n const handleSelect = useCallback(\n (selected: Composition) => {\n onSelect && onSelect(selected);\n if (selected === active) return;\n setControlsTimestamp(0);\n },\n [onSelect]\n );\n const onCompositionCodeClicked = useCallback(\n (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n setControlsTimestamp(0);\n const queryParams = new URLSearchParams();\n if (versionFromQueryParams) {\n queryParams.set('version', versionFromQueryParams);\n }\n const basePath = location?.pathname.split('/~compositions')[0];\n navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);\n },\n [location?.pathname, versionFromQueryParams]\n );\n\n // listen to the mounter for live control updates\n useEffect(() => {\n // TODO: remove when stable.\n window.addEventListener('message', (e: MessageEvent) => {\n if (e.data.type === 'composition-live-controls:activate') {\n setHasLiveControls(true);\n }\n });\n\n function onLiveControlsSetup(e: MessageEvent<LiveControlReadyEventData>) {\n getReadyListener(e, ({ controls, values, timestamp }) => {\n const iframeWindow = e.source;\n setMounter(iframeWindow as Window);\n setControlsDefs(controls);\n setControlsValues(values);\n setControlsTimestamp(timestamp);\n });\n }\n window.addEventListener('message', onLiveControlsSetup);\n return () => {\n window.removeEventListener('message', onLiveControlsSetup);\n };\n }, []);\n\n // sync live control updates back to the mounter\n const onLiveControlsUpdate = useCallback(\n (key: string, value: any) => {\n if (mounter) {\n broadcastUpdate(mounter, controlsTimestamp, {\n key,\n value,\n });\n }\n setControlsValues((prev: any) => ({ ...prev, [key]: value }));\n },\n [mounter, controlsValues, controlsTimestamp]\n );\n\n return (\n <div className={classNames(styles.container)}>\n <DrawerUI\n isOpen={openDrawerList.includes('COMPOSITIONS')}\n onToggle={() => handleDrawerToggle('COMPOSITIONS')}\n name=\"COMPOSITIONS\"\n className={classNames(styles.tab)}\n >\n <ul {...rest} className={classNames(className)}>\n {compositions.map((composition) => {\n const href = shouldAddNameParam\n ? `${url}&name=${composition.identifier}`\n : `${url}&${composition.identifier}`;\n return (\n <li\n key={composition.identifier}\n className={classNames(styles.linkWrapper, composition === active && styles.active)}\n >\n <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n <span className={styles.name}>{composition.displayName}</span>\n </a>\n <div className={styles.right}>\n <MenuWidgetIcon\n className={styles.codeLink}\n icon=\"Code\"\n tooltipContent=\"Code\"\n onClick={onCompositionCodeClicked(composition)}\n />\n <Tooltip content=\"Open in new tab\" placement=\"bottom\">\n <a className={styles.iconLink} target=\"_blank\" rel=\"noopener noreferrer\" href={href}>\n <Icon className={styles.icon} of=\"open-tab\" />\n </a>\n </Tooltip>\n </div>\n </li>\n );\n })}\n </ul>\n </DrawerUI>\n {\n / TODO: remove when stable */ hasLiveControls ? (\n <DrawerUI\n isOpen={openDrawerList.includes('LIVE_CONTROLS')}\n onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}\n className={classNames(styles.tab)}\n name=\"LIVE CONTROLS\"\n >\n {controlsTimestamp ? (\n <LiveControls defs={controlsDefs} values={controlsValues} onChange={onLiveControlsUpdate} />\n ) : (\n <div className={styles.noLiveControls}>No live controls available for this composition</div>\n )}\n </DrawerUI>\n ) : null\n }\n </div>\n );\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_reactRouterDom","_react","_interopRequireWildcard","_uiFoundationUiTree","_uiFoundationUi","_designUi","_baseReactNavigation","_compositionsUi","_compositionsPanelModule","_liveControlPanel","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_objectWithoutProperties","_objectWithoutPropertiesLoose","indexOf","propertyIsEnumerable","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","useNameParam","className","rest","hasLiveControls","setHasLiveControls","useState","openDrawerList","onToggleDrawer","handleDrawerToggle","id","isDrawerOpen","includes","list","drawer","concat","shouldAddNameParam","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","controlsTimestamp","setControlsTimestamp","controlsDefs","setControlsDefs","controlsValues","setControlsValues","mounter","setMounter","handleSelect","useCallback","selected","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","useEffect","window","addEventListener","type","onLiveControlsSetup","getReadyListener","controls","values","timestamp","iframeWindow","source","removeEventListener","onLiveControlsUpdate","key","broadcastUpdate","prev","createElement","classNames","styles","container","DrawerUI","isOpen","onToggle","name","tab","map","href","linkWrapper","panelLink","onClick","displayName","right","MenuWidgetIcon","codeLink","icon","tooltipContent","Tooltip","content","placement","iconLink","target","rel","Icon","of","LiveControls","defs","onChange","noLiveControls"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport { useSearchParams } from 'react-router-dom';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport {\n type LiveControlReadyEventData,\n getReadyListener,\n broadcastUpdate,\n} from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './compositions-panel.module.scss';\nimport type { Composition } from '../../composition';\nimport { LiveControls } from './live-control-panel';\n\nexport type CompositionsPanelProps = {\n /*\n list of compositions\n /\n compositions: Composition[];\n /\n select composition to display\n /\n onSelectComposition: (composition: Composition) => void;\n /\n the currently active composition\n /\n active?: Composition;\n /\n the url to the base composition. doesntc contain the current composition params\n /\n url: string;\n /\n checks if a component is using the new preview api. if false, doesnt scale to support new preview\n /\n isScaling?: boolean;\n\n includesEnvTemplate?: boolean;\n\n useNameParam?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n url,\n compositions,\n isScaling,\n onSelectComposition: onSelect,\n active,\n includesEnvTemplate,\n useNameParam,\n className,\n ...rest\n}: CompositionsPanelProps) {\n // setup drawer state\n // TODO: only for alpha versions of live controls. remove when stable.\n const [hasLiveControls, setHasLiveControls] = useState(false);\n const [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);\n const handleDrawerToggle = (id: string) => {\n const isDrawerOpen = openDrawerList.includes(id);\n if (isDrawerOpen) {\n onToggleDrawer((list) => list.filter((drawer) => drawer !== id));\n return;\n }\n onToggleDrawer((list) => list.concat(id));\n };\n\n // setup from props\n const shouldAddNameParam = useNameParam \|\| (isScaling && includesEnvTemplate === false);\n\n // current composition state\n const location = useLocation();\n const [searchParams] = useSearchParams();\n const versionFromQueryParams = searchParams.get('version');\n const navigate = useNavigate();\n\n // live control state\n const [controlsTimestamp, setControlsTimestamp] = useState(0);\n const [controlsDefs, setControlsDefs] = useState<any>(null);\n const [controlsValues, setControlsValues] = useState<any>({});\n const [mounter, setMounter] = useState<Window>();\n\n // composition navigation action\n const handleSelect = useCallback(\n (selected: Composition) => {\n onSelect && onSelect(selected);\n if (selected === active) return;\n setControlsTimestamp(0);\n },\n [onSelect]\n );\n const onCompositionCodeClicked = useCallback(\n (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n setControlsTimestamp(0);\n const queryParams = new URLSearchParams();\n if (versionFromQueryParams) {\n queryParams.set('version', versionFromQueryParams);\n }\n const basePath = location?.pathname.split('/~compositions')[0];\n navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);\n },\n [location?.pathname, versionFromQueryParams]\n );\n\n // listen to the mounter for live control updates\n useEffect(() => {\n // TODO: remove when stable.\n window.addEventListener('message', (e: MessageEvent) => {\n if (e.data.type === 'composition-live-controls:activate') {\n setHasLiveControls(true);\n }\n });\n\n function onLiveControlsSetup(e: MessageEvent<LiveControlReadyEventData>) {\n getReadyListener(e, ({ controls, values, timestamp }) => {\n const iframeWindow = e.source;\n setMounter(iframeWindow as Window);\n setControlsDefs(controls);\n setControlsValues(values);\n setControlsTimestamp(timestamp);\n });\n }\n window.addEventListener('message', onLiveControlsSetup);\n return () => {\n window.removeEventListener('message', onLiveControlsSetup);\n };\n }, []);\n\n // sync live control updates back to the mounter\n const onLiveControlsUpdate = useCallback(\n (key: string, value: any) => {\n if (mounter) {\n broadcastUpdate(mounter, controlsTimestamp, {\n key,\n value,\n });\n }\n setControlsValues((prev: any) => ({ ...prev, [key]: value }));\n },\n [mounter, controlsValues, controlsTimestamp]\n );\n\n return (\n <div className={classNames(styles.container)}>\n <DrawerUI\n isOpen={openDrawerList.includes('COMPOSITIONS')}\n onToggle={() => handleDrawerToggle('COMPOSITIONS')}\n name=\"COMPOSITIONS\"\n className={classNames(styles.tab)}\n >\n <ul {...rest} className={classNames(className)}>\n {compositions.map((composition) => {\n const href = shouldAddNameParam\n ? `${url}&name=${composition.identifier}`\n : `${url}&${composition.identifier}`;\n return (\n <li\n key={composition.identifier}\n className={classNames(styles.linkWrapper, composition === active && styles.active)}\n >\n <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n <span className={styles.name}>{composition.displayName}</span>\n </a>\n <div className={styles.right}>\n <MenuWidgetIcon\n className={styles.codeLink}\n icon=\"Code\"\n tooltipContent=\"Code\"\n onClick={onCompositionCodeClicked(composition)}\n />\n <Tooltip content=\"Open in new tab\" placement=\"bottom\">\n <a className={styles.iconLink} target=\"_blank\" rel=\"noopener noreferrer\" href={href}>\n <Icon className={styles.icon} of=\"open-tab\" />\n </a>\n </Tooltip>\n </div>\n </li>\n );\n })}\n </ul>\n </DrawerUI>\n {\n / TODO: remove when stable */ hasLiveControls ? (\n <DrawerUI\n isOpen={openDrawerList.includes('LIVE_CONTROLS')}\n onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}\n className={classNames(styles.tab)}\n name=\"LIVE CONTROLS\"\n >\n {controlsTimestamp ? (\n <LiveControls defs={controlsDefs} values={controlsValues} onChange={onLiveControlsUpdate} />\n ) : (\n <div className={styles.noLiveControls}>No live controls available for this composition</div>\n )}\n </DrawerUI>\n ) : null\n }\n </div>\n );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,oBAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,mBAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,YAAA;EAAA,MAAAF,IAAA,GAAAG,sBAAA,CAAAF,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,OAAA;EAAA,MAAAL,IAAA,GAAAM,uBAAA,CAAAL,OAAA;EAAAI,MAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAO,oBAAA;EAAA,MAAAP,IAAA,GAAAC,OAAA;EAAAM,mBAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAQ,gBAAA;EAAA,MAAAR,IAAA,GAAAC,OAAA;EAAAO,eAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAS,UAAA;EAAA,MAAAT,IAAA,GAAAC,OAAA;EAAAQ,SAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAU,qBAAA;EAAA,MAAAV,IAAA,GAAAC,OAAA;EAAAS,oBAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAW,gBAAA;EAAA,MAAAX,IAAA,GAAAC,OAAA;EAAAU,eAAA,YAAAA,CAAA;IAAA,OAAAX,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAMA,SAAAY,yBAAA;EAAA,MAAAZ,IAAA,GAAAG,sBAAA,CAAAF,OAAA;EAAAW,wBAAA,YAAAA,CAAA;IAAA,OAAAZ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAa,kBAAA;EAAA,MAAAb,IAAA,GAAAC,OAAA;EAAAY,iBAAA,YAAAA,CAAA;IAAA,OAAAb,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAoD,MAAAc,SAAA;AAAA,SAAAR,wBAAAS,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAS,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAb,uBAAAY,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAAA,SAAAmB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAjB,CAAA,aAAAJ,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAC,CAAA,GAAAqB,SAAA,CAAAtB,CAAA,YAAAG,CAAA,IAAAF,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAd,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAe,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAAA,SAAAG,QAAAzB,CAAA,EAAAG,CAAA,QAAAF,CAAA,GAAAe,MAAA,CAAAU,IAAA,CAAA1B,CAAA,OAAAgB,MAAA,CAAAW,qBAAA,QAAArB,CAAA,GAAAU,MAAA,CAAAW,qBAAA,CAAA3B,CAAA,GAAAG,CAAA,KAAAG,CAAA,GAAAA,CAAA,CAAAsB,MAAA,WAAAzB,CAAA,WAAAa,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,EAAA0B,UAAA,OAAA5B,CAAA,CAAA6B,IAAA,CAAAN,KAAA,CAAAvB,CAAA,EAAAK,CAAA,YAAAL,CAAA;AAAA,SAAA8B,cAAA/B,CAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAmB,SAAA,CAAAC,MAAA,EAAApB,CAAA,UAAAF,CAAA,WAAAqB,SAAA,CAAAnB,CAAA,IAAAmB,SAAA,CAAAnB,CAAA,QAAAA,CAAA,OAAAsB,OAAA,CAAAT,MAAA,CAAAf,CAAA,OAAA+B,OAAA,WAAA7B,CAAA,IAAA8B,eAAA,CAAAjC,CAAA,EAAAG,CAAA,EAAAF,CAAA,CAAAE,CAAA,SAAAa,MAAA,CAAAkB,yBAAA,GAAAlB,MAAA,CAAAmB,gBAAA,CAAAnC,CAAA,EAAAgB,MAAA,CAAAkB,yBAAA,CAAAjC,CAAA,KAAAwB,OAAA,CAAAT,MAAA,CAAAf,CAAA,GAAA+B,OAAA,WAAA7B,CAAA,IAAAa,MAAA,CAAAC,cAAA,CAAAjB,CAAA,EAAAG,CAAA,EAAAa,MAAA,CAAAE,wBAAA,CAAAjB,CAAA,EAAAE,CAAA,iBAAAH,CAAA;AAAA,SAAAiC,gBAAAjC,CAAA,EAAAG,CAAA,EAAAF,CAAA,YAAAE,CAAA,GAAAiC,cAAA,CAAAjC,CAAA,MAAAH,CAAA,GAAAgB,MAAA,CAAAC,cAAA,CAAAjB,CAAA,EAAAG,CAAA,IAAAkC,KAAA,EAAApC,CAAA,EAAA4B,UAAA,MAAAS,YAAA,MAAAC,QAAA,UAAAvC,CAAA,CAAAG,CAAA,IAAAF,CAAA,EAAAD,CAAA;AAAA,SAAAoC,eAAAnC,CAAA,QAAAM,CAAA,GAAAiC,YAAA,CAAAvC,CAAA,uCAAAM,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAiC,aAAAvC,CAAA,EAAAE,CAAA,2BAAAF,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAD,CAAA,GAAAC,CAAA,CAAAwC,MAAA,CAAAC,WAAA,kBAAA1C,CAAA,QAAAO,CAAA,GAAAP,CAAA,CAAAe,IAAA,CAAAd,CAAA,EAAAE,CAAA,uCAAAI,CAAA,SAAAA,CAAA,YAAAoC,SAAA,yEAAAxC,CAAA,GAAAyC,MAAA,GAAAC,MAAA,EAAA5C,CAAA;AAAA,SAAA6C,yBAAA9C,CAAA,EAAAC,CAAA,gBAAAD,CAAA,iBAAAM,CAAA,EAAAH,CAAA,EAAAI,CAAA,GAAAwC,6BAAA,CAAA/C,CAAA,EAAAC,CAAA,OAAAe,MAAA,CAAAW,qBAAA,QAAAvB,CAAA,GAAAY,MAAA,CAAAW,qBAAA,CAAA3B,CAAA,QAAAG,CAAA,MAAAA,CAAA,GAAAC,CAAA,CAAAmB,MAAA,EAAApB,CAAA,IAAAG,CAAA,GAAAF,CAAA,CAAAD,CAAA,UAAAF,CAAA,CAAA+C,OAAA,CAAA1C,CAAA,QAAA2C,oBAAA,CAAAlC,IAAA,CAAAf,CAAA,EAAAM,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAN,CAAA,CAAAM,CAAA,aAAAC,CAAA;AAAA,SAAAwC,8BAAA5C,CAAA,EAAAH,CAAA,gBAAAG,CAAA,iBAAAF,CAAA,gBAAAG,CAAA,IAAAD,CAAA,SAAAW,cAAA,CAAAC,IAAA,CAAAZ,CAAA,EAAAC,CAAA,gBAAAJ,CAAA,CAAAgD,OAAA,CAAA5C,CAAA,aAAAH,CAAA,CAAAG,CAAA,IAAAD,CAAA,CAAAC,CAAA,YAAAH,CAAA;AA6B7C,SAASiD,iBAAiBA,CAAAC,IAAA,EAUN;EAAA,IAVO;MAChCC,GAAG;MACHC,YAAY;MACZC,SAAS;MACTC,mBAAmB,EAAEC,QAAQ;MAC7BC,MAAM;MACNC,mBAAmB;MACnBC,YAAY;MACZC;IAEsB,CAAC,GAAAT,IAAA;IADpBU,IAAI,GAAAf,wBAAA,CAAAK,IAAA,EAAApD,SAAA;EAEP;EACA;EACA,MAAM,CAAC+D,eAAe,EAAEC,kBAAkB,CAAC,GAAG,IAAAC,iBAAQ,EAAC,KAAK,CAAC;EAC7D,MAAM,CAACC,cAAc,EAAEC,cAAc,CAAC,GAAG,IAAAF,iBAAQ,EAAC,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;EACpF,MAAMG,kBAAkB,GAAIC,EAAU,IAAK;IACzC,MAAMC,YAAY,GAAGJ,cAAc,CAACK,QAAQ,CAACF,EAAE,CAAC;IAChD,IAAIC,YAAY,EAAE;MAChBH,cAAc,CAAEK,IAAI,IAAKA,IAAI,CAAC3C,MAAM,CAAE4C,MAAM,IAAKA,MAAM,KAAKJ,EAAE,CAAC,CAAC;MAChE;IACF;IACAF,cAAc,CAAEK,IAAI,IAAKA,IAAI,CAACE,MAAM,CAACL,EAAE,CAAC,CAAC;EAC3C,CAAC;;EAED;EACA,MAAMM,kBAAkB,GAAGf,YAAY,IAAKL,SAAS,IAAII,mBAAmB,KAAK,KAAM;;EAEvF;EACA,MAAMiB,QAAQ,GAAG,IAAAC,kCAAW,EAAC,CAAC;EAC9B,MAAM,CAACC,YAAY,CAAC,GAAG,IAAAC,iCAAe,EAAC,CAAC;EACxC,MAAMC,sBAAsB,GAAGF,YAAY,CAACjE,GAAG,CAAC,SAAS,CAAC;EAC1D,MAAMoE,QAAQ,GAAG,IAAAC,kCAAW,EAAC,CAAC;;EAE9B;EACA,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAnB,iBAAQ,EAAC,CAAC,CAAC;EAC7D,MAAM,CAACoB,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAArB,iBAAQ,EAAM,IAAI,CAAC;EAC3D,MAAM,CAACsB,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAvB,iBAAQ,EAAM,CAAC,CAAC,CAAC;EAC7D,MAAM,CAACwB,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAzB,iBAAQ,EAAS,CAAC;;EAEhD;EACA,MAAM0B,YAAY,GAAG,IAAAC,oBAAW,EAC7BC,QAAqB,IAAK;IACzBpC,QAAQ,IAAIA,QAAQ,CAACoC,QAAQ,CAAC;IAC9B,IAAIA,QAAQ,KAAKnC,MAAM,EAAE;IACzB0B,oBAAoB,CAAC,CAAC,CAAC;EACzB,CAAC,EACD,CAAC3B,QAAQ,CACX,CAAC;EACD,MAAMqC,wBAAwB,GAAG,IAAAF,oBAAW,EACzCG,WAAwB,IAAM9F,CAAmC,IAAK;IACrEA,CAAC,CAAC+F,cAAc,CAAC,CAAC;IAClBZ,oBAAoB,CAAC,CAAC,CAAC;IACvB,MAAMa,WAAW,GAAG,IAAIC,eAAe,CAAC,CAAC;IACzC,IAAIlB,sBAAsB,EAAE;MAC1BiB,WAAW,CAACnF,GAAG,CAAC,SAAS,EAAEkE,sBAAsB,CAAC;IACpD;IACA,MAAMmB,QAAQ,GAAGvB,QAAQ,EAAEwB,QAAQ,CAACC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC9DpB,QAAQ,CAAC,GAAGkB,QAAQ,UAAUJ,WAAW,CAACO,QAAQ,IAAIL,WAAW,CAACM,QAAQ,CAAC,CAAC,WAAWR,WAAW,CAACS,UAAU,EAAE,CAAC;EAClH,CAAC,EACD,CAAC5B,QAAQ,EAAEwB,QAAQ,EAAEpB,sBAAsB,CAC7C,CAAC;;EAED;EACA,IAAAyB,kBAAS,EAAC,MAAM;IACd;IACAC,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAG1G,CAAe,IAAK;MACtD,IAAIA,CAAC,CAACf,IAAI,CAAC0H,IAAI,KAAK,oCAAoC,EAAE;QACxD5C,kBAAkB,CAAC,IAAI,CAAC;MAC1B;IACF,CAAC,CAAC;IAEF,SAAS6C,mBAAmBA,CAAC5G,CAA0C,EAAE;MACvE,IAAA6G,kCAAgB,EAAC7G,CAAC,EAAE,CAAC;QAAE8G,QAAQ;QAAEC,MAAM;QAAEC;MAAU,CAAC,KAAK;QACvD,MAAMC,YAAY,GAAGjH,CAAC,CAACkH,MAAM;QAC7BzB,UAAU,CAACwB,YAAsB,CAAC;QAClC5B,eAAe,CAACyB,QAAQ,CAAC;QACzBvB,iBAAiB,CAACwB,MAAM,CAAC;QACzB5B,oBAAoB,CAAC6B,SAAS,CAAC;MACjC,CAAC,CAAC;IACJ;IACAP,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEE,mBAAmB,CAAC;IACvD,OAAO,MAAM;MACXH,MAAM,CAACU,mBAAmB,CAAC,SAAS,EAAEP,mBAAmB,CAAC;IAC5D,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMQ,oBAAoB,GAAG,IAAAzB,oBAAW,EACtC,CAAC0B,GAAW,EAAEhF,KAAU,KAAK;IAC3B,IAAImD,OAAO,EAAE;MACX,IAAA8B,iCAAe,EAAC9B,OAAO,EAAEN,iBAAiB,EAAE;QAC1CmC,GAAG;QACHhF;MACF,CAAC,CAAC;IACJ;IACAkD,iBAAiB,CAAEgC,IAAS,IAAAxF,aAAA,CAAAA,aAAA,KAAWwF,IAAI;MAAE,CAACF,GAAG,GAAGhF;IAAK,EAAG,CAAC;EAC/D,CAAC,EACD,CAACmD,OAAO,EAAEF,cAAc,EAAEJ,iBAAiB,CAC7C,CAAC;EAED,oBACE5F,MAAA,GAAAoB,OAAA,CAAA8G,aAAA;IAAK5D,SAAS,EAAE,IAAA6D,qBAAU,EAACC,kCAAM,CAACC,SAAS;EAAE,gBAC3CrI,MAAA,GAAAoB,OAAA,CAAA8G,aAAA,CAAChI,mBAAA,GAAAoI,QAAQ;IACPC,MAAM,EAAE5D,cAAc,CAACK,QAAQ,CAAC,cAAc,CAAE;IAChDwD,QAAQ,EAAEA,CAAA,KAAM3D,kBAAkB,CAAC,cAAc,CAAE;IACnD4D,IAAI,EAAC,cAAc;IACnBnE,SAAS,EAAE,IAAA6D,qBAAU,EAACC,kCAAM,CAACM,GAAG;EAAE,gBAElC1I,MAAA,GAAAoB,OAAA,CAAA8G,aAAA,OAAArG,QAAA,KAAQ0C,IAAI;IAAED,SAAS,EAAE,IAAA6D,qBAAU,EAAC7D,SAAS;EAAE,IAC5CP,YAAY,CAAC4E,GAAG,CAAEnC,WAAW,IAAK;IACjC,MAAMoC,IAAI,GAAGxD,kBAAkB,GAC3B,GAAGtB,GAAG,SAAS0C,WAAW,CAACS,UAAU,EAAE,GACvC,GAAGnD,GAAG,IAAI0C,WAAW,CAACS,UAAU,EAAE;IACtC,oBACEjH,MAAA,GAAAoB,OAAA,CAAA8G,aAAA;MACEH,GAAG,EAAEvB,WAAW,CAACS,UAAW;MAC5B3C,SAAS,EAAE,IAAA6D,qBAAU,EAACC,kCAAM,CAACS,WAAW,EAAErC,WAAW,KAAKrC,MAAM,IAAIiE,kCAAM,CAACjE,MAAM;IAAE,gBAEnFnE,MAAA,GAAAoB,OAAA,CAAA8G,aAAA;MAAG5D,SAAS,EAAE8D,kCAAM,CAACU,SAAU;MAACC,OAAO,EAAEA,CAAA,KAAM3C,YAAY,CAACI,WAAW;IAAE,gBACvExG,MAAA,GAAAoB,OAAA,CAAA8G,aAAA;MAAM5D,SAAS,EAAE8D,kCAAM,CAACK;IAAK,GAAEjC,WAAW,CAACwC,WAAkB,CAC5D,CAAC,eACJhJ,MAAA,GAAAoB,OAAA,CAAA8G,aAAA;MAAK5D,SAAS,EAAE8D,kCAAM,CAACa;IAAM,gBAC3BjJ,MAAA,GAAAoB,OAAA,CAAA8G,aAAA,CAAC/H,eAAA,GAAA+I,cAAc;MACb5E,SAAS,EAAE8D,kCAAM,CAACe,QAAS;MAC3BC,IAAI,EAAC,MAAM;MACXC,cAAc,EAAC,MAAM;MACrBN,OAAO,EAAExC,wBAAwB,CAACC,WAAW;IAAE,CAChD,CAAC,eACFxG,MAAA,GAAAoB,OAAA,CAAA8G,aAAA,CAAC9H,SAAA,GAAAkJ,OAAO;MAACC,OAAO,EAAC,iBAAiB;MAACC,SAAS,EAAC;IAAQ,gBACnDxJ,MAAA,GAAAoB,OAAA,CAAA8G,aAAA;MAAG5D,SAAS,EAAE8D,kCAAM,CAACqB,QAAS;MAACC,MAAM,EAAC,QAAQ;MAACC,GAAG,EAAC,qBAAqB;MAACf,IAAI,EAAEA;IAAK,gBAClF5I,MAAA,GAAAoB,OAAA,CAAA8G,aAAA,CAACxI,mBAAA,GAAAkK,IAAI;MAACtF,SAAS,EAAE8D,kCAAM,CAACgB,IAAK;MAACS,EAAE,EAAC;IAAU,CAAE,CAC5C,CACI,CACN,CACH,CAAC;EAET,CAAC,CACC,CACI,CAAC,EAET,8BAA+BrF,eAAe,gBAC5CxE,MAAA,GAAAoB,OAAA,CAAA8G,aAAA,CAAChI,mBAAA,GAAAoI,QAAQ;IACPC,MAAM,EAAE5D,cAAc,CAACK,QAAQ,CAAC,eAAe,CAAE;IACjDwD,QAAQ,EAAEA,CAAA,KAAM3D,kBAAkB,CAAC,eAAe,CAAE;IACpDP,SAAS,EAAE,IAAA6D,qBAAU,EAACC,kCAAM,CAACM,GAAG,CAAE;IAClCD,IAAI,EAAC;EAAe,GAEnB7C,iBAAiB,gBAChB5F,MAAA,GAAAoB,OAAA,CAAA8G,aAAA,CAAC1H,iBAAA,GAAAsJ,YAAY;IAACC,IAAI,EAAEjE,YAAa;IAAC2B,MAAM,EAAEzB,cAAe;IAACgE,QAAQ,EAAElC;EAAqB,CAAE,CAAC,gBAE5F9H,MAAA,GAAAoB,OAAA,CAAA8G,aAAA;IAAK5D,SAAS,EAAE8D,kCAAM,CAAC6B;EAAe,GAAC,iDAAoD,CAErF,CAAC,GACT,IAEH,CAAC;AAEV","ignoreList":[]}

package/dist/ui/compositions-panel/compositions-panel.module.scss CHANGED Viewed

@@ -7,6 +7,8 @@
 }
 .tab {
+  color: var(--on-background-color);
   > div:first-child {
     border: none;
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);

package/dist/ui/compositions-panel/live-control-input.js CHANGED Viewed

@@ -75,74 +75,95 @@ function _liveControlInputModule() {
   return data;
 }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* eslint-disable no-console */
 function ShortTextInput({
-  id,
   value,
   onChange
 }) {
-  const [inputValue, setInputValue] = _react().default.useState(value);
+  const [inputValue, setInputValue] = _react().default.useState(value || '');
+  _react().default.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
   const handleChange = e => {
     const newValue = e.target.value;
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
   return /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
-    id: id,
     value: inputValue,
     onChange: handleChange
   });
 }
 function LongTextInput({
-  id,
   value,
   onChange
 }) {
-  const [inputValue, setInputValue] = _react().default.useState(value);
+  const [inputValue, setInputValue] = _react().default.useState(value || '');
+  _react().default.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
   const handleChange = e => {
     const newValue = e.target.value;
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
   return /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
-    id: id,
     value: inputValue,
     onChange: handleChange
   });
 }
 function SelectInput({
-  id,
   value,
   onChange,
   meta
 }) {
-  const [selectedValue, setSelectedValue] = _react().default.useState(value);
+  const [selectedValue, setSelectedValue] = _react().default.useState(value || '');
+  _react().default.useEffect(() => {
+    setSelectedValue(value || '');
+  }, [value]);
   const handleChange = newValue => {
-    onChange(newValue);
-    setSelectedValue(newValue);
+    onChange(newValue || '');
+    setSelectedValue(newValue || '');
   };
-  const placeholderContent = meta.options.find(o => o.value === selectedValue)?.label;
+  const options = _react().default.useMemo(() => {
+    if (!meta || !meta.options) return [];
+    return meta.options.map(option => {
+      if (typeof option === 'string') {
+        return {
+          label: option,
+          value: option
+        };
+      }
+      return option;
+    });
+  }, [meta]);
+  const placeholderContent = options.find(o => o.value === selectedValue)?.label;
   return /*#__PURE__*/_react().default.createElement("p", {
     className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
   }, /*#__PURE__*/_react().default.createElement(_designInputs3().Dropdown, {
-    id: id,
     placeholderContent: placeholderContent
-  }, meta.options.map(option => /*#__PURE__*/_react().default.createElement(_designInputsSelectors().MenuItem, {
-    active: option.value === selectedValue,
-    key: option.value,
-    onClick: () => handleChange(option.value)
-  }, option.label))));
+  }, options.map(option => {
+    return /*#__PURE__*/_react().default.createElement(_designInputsSelectors().MenuItem, {
+      active: option.value === selectedValue,
+      key: option.value,
+      onClick: () => handleChange(option.value)
+    }, option.label);
+  })));
 }
 function NumberInput({
-  id,
   value,
   onChange
 }) {
-  const [inputValue, setInputValue] = _react().default.useState(value);
+  const [inputValue, setInputValue] = _react().default.useState(value || 0);
+  _react().default.useEffect(() => {
+    setInputValue(value || 0);
+  }, [value]);
   const handleChange = e => {
     const newValue = e.target.value;
     if (!isNaN(Number(newValue))) {
-      onChange(Number(newValue));
-      setInputValue(Number(newValue));
+      onChange(Number(newValue) || 0);
+      setInputValue(Number(newValue) || 0);
     } else {
       // TODO: render error message
       // eslint-disable-next-line no-console
@@ -150,37 +171,39 @@ function NumberInput({
     }
   };
   return /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
-    id: id,
     type: "number",
     value: inputValue,
     onChange: handleChange
   });
 }
 function ColorInput({
-  id,
   value,
   onChange
 }) {
-  const [inputValue, setInputValue] = _react().default.useState(value);
+  const [inputValue, setInputValue] = _react().default.useState(value || '');
+  _react().default.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
   const handleChange = newValue => {
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
   return /*#__PURE__*/_react().default.createElement("p", {
     className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
   }, /*#__PURE__*/_react().default.createElement(_designUiInput().ColorPicker, {
-    id: id,
     value: inputValue,
     onColorSelect: handleChange,
     allowCustomColor: true
   }));
 }
 function DateInput({
-  id,
   value,
   onChange
 }) {
   const [inputValue, setInputValue] = _react().default.useState(new Date(value));
+  _react().default.useEffect(() => {
+    setInputValue(new Date(value));
+  }, [value]);
   const handleChange = newValue => {
     if (newValue) {
       onChange(newValue.toISOString().split('T')[0]);
@@ -190,17 +213,18 @@ function DateInput({
   return /*#__PURE__*/_react().default.createElement("p", {
     className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
   }, /*#__PURE__*/_react().default.createElement(_designInputs4().DatePicker, {
-    id: id,
     date: inputValue,
     onChange: handleChange
   }));
 }
 function ToggleInput({
-  id,
   value,
   onChange
 }) {
-  const [isChecked, setIsChecked] = _react().default.useState(value);
+  const [isChecked, setIsChecked] = _react().default.useState(!!value);
+  _react().default.useEffect(() => {
+    setIsChecked(!!value);
+  }, [value]);
   const handleChange = () => {
     setIsChecked(!isChecked);
     onChange(!isChecked);
@@ -208,17 +232,18 @@ function ToggleInput({
   return /*#__PURE__*/_react().default.createElement("p", {
     className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
   }, /*#__PURE__*/_react().default.createElement(_designInputs5().Toggle, {
-    id: id,
     defaultChecked: isChecked,
     onChange: handleChange
   }));
 }
 function JsonInput({
-  id,
   value,
   onChange
 }) {
   const [inputValue, setInputValue] = _react().default.useState(JSON.stringify(value, null, 2));
+  _react().default.useEffect(() => {
+    setInputValue(JSON.stringify(value, null, 2));
+  }, [value]);
   const [message, setMessage] = _react().default.useState('');
   const handleChange = e => {
     const newValue = e.target.value;
@@ -232,7 +257,6 @@ function JsonInput({
     setInputValue(newValue);
   };
   return /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
-    id: id,
     value: inputValue,
     onChange: handleChange
   }), message && /*#__PURE__*/_react().default.createElement("div", {

package/dist/ui/compositions-panel/live-control-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_designInputs","_designInputs2","_designInputs3","_designInputsSelectors","_designUiInput","_designInputs4","_designInputs5","_liveControlInputModule","e","__esModule","default","ShortTextInput","id","value","onChange","inputValue","setInputValue","React","useState","handleChange","newValue","target","createElement","InputText","LongTextInput","TextArea","SelectInput","meta","selectedValue","setSelectedValue","placeholderContent","options","find","o","label","className","classNames","styles","wrapper","Dropdown","map","option","MenuItem","active","key","onClick","NumberInput","isNaN","Number","console","error","type","ColorInput","ColorPicker","onColorSelect","allowCustomColor","DateInput","Date","toISOString","split","DatePicker","date","ToggleInput","isChecked","setIsChecked","Toggle","defaultChecked","JsonInput","JSON","stringify","message","setMessage","parsedValue","parse","style","color","getInputComponent","warn"],"sources":["live-control-input.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport { InputText } from '@teambit/design.inputs.input-text';\nimport { TextArea } from '@teambit/design.inputs.text-area';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { MenuItem } from '@teambit/design.inputs.selectors.menu-item';\nimport { ColorPicker } from '@teambit/design.ui.input.color-picker';\nimport { DatePicker } from '@teambit/design.inputs.date-picker';\nimport { Toggle } from '@teambit/design.inputs.toggle-switch';\n\nimport styles from './live-control-input.module.scss';\n\ntype InputComponentProps = {\n id: string;\n value: any;\n onChange: (value: any) => void;\n meta?: any;\n};\n\ntype InputComponent = React.FC<InputComponentProps>;\n\nfunction ShortTextInput({ id, value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value);\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n onChange(newValue);\n setInputValue(newValue);\n };\n return <InputText id={id} value={inputValue} onChange={handleChange} />;\n}\n\nfunction LongTextInput({ id, value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value);\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n onChange(newValue);\n setInputValue(newValue);\n };\n return <TextArea id={id} value={inputValue} onChange={handleChange} />;\n}\n\nfunction SelectInput({ id, value, onChange, meta }: InputComponentProps) {\n const [selectedValue, setSelectedValue] = React.useState(value);\n const handleChange = (newValue: any) => {\n onChange(newValue);\n setSelectedValue(newValue);\n };\n const placeholderContent = meta.options.find((o: any) => o.value === selectedValue)?.label;\n return (\n <p className={classNames(styles.wrapper)}>\n <Dropdown id={id} placeholderContent={placeholderContent}>\n {meta.options.map((option: any) => (\n <MenuItem\n active={option.value === selectedValue}\n key={option.value}\n onClick={() => handleChange(option.value)}\n >\n {option.label}\n </MenuItem>\n ))}\n </Dropdown>\n </p>\n );\n}\n\nfunction NumberInput({ id, value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value);\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!isNaN(Number(newValue))) {\n onChange(Number(newValue));\n setInputValue(Number(newValue));\n } else {\n // TODO: render error message\n // eslint-disable-next-line no-console\n console.error('Invalid number input', newValue);\n }\n };\n return <InputText id={id} type=\"number\" value={inputValue} onChange={handleChange} />;\n}\n\nfunction ColorInput({ id, value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value);\n const handleChange = (newValue: string) => {\n onChange(newValue);\n setInputValue(newValue);\n };\n return (\n <p className={classNames(styles.wrapper)}>\n <ColorPicker id={id} value={inputValue} onColorSelect={handleChange} allowCustomColor />\n </p>\n );\n}\n\nfunction DateInput({ id, value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState<Date \| null>(new Date(value));\n const handleChange = (newValue: Date \| null) => {\n if (newValue) {\n onChange(newValue.toISOString().split('T')[0]);\n }\n setInputValue(newValue);\n };\n return (\n <p className={classNames(styles.wrapper)}>\n <DatePicker id={id} date={inputValue} onChange={handleChange} />\n </p>\n );\n}\n\nfunction ToggleInput({ id, value, onChange }: InputComponentProps) {\n const [isChecked, setIsChecked] = React.useState(value);\n const handleChange = () => {\n setIsChecked(!isChecked);\n onChange(!isChecked);\n };\n return (\n <p className={classNames(styles.wrapper)}>\n <Toggle id={id} defaultChecked={isChecked} onChange={handleChange} />\n </p>\n );\n}\n\nfunction JsonInput({ id, value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(JSON.stringify(value, null, 2));\n const [message, setMessage] = React.useState('');\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n try {\n const parsedValue = JSON.parse(newValue);\n onChange(parsedValue);\n setMessage('');\n } catch {\n setMessage('Invalid JSON');\n }\n setInputValue(newValue);\n };\n return (\n <div>\n <TextArea id={id} value={inputValue} onChange={handleChange} />\n {message && <div style={{ color: 'red' }}>{message}</div>}\n </div>\n );\n}\n\nexport function getInputComponent(type: string): InputComponent {\n switch (type) {\n case 'text':\n return ShortTextInput;\n case 'longtext':\n return LongTextInput;\n case 'select':\n return SelectInput;\n case 'number':\n return NumberInput;\n case 'color':\n return ColorInput;\n case 'date':\n return DateInput;\n case 'boolean':\n return ToggleInput;\n case 'json':\n return JsonInput;\n default:\n // eslint-disable-next-line no-console\n console.warn(`Unknown input type: ${type}`);\n return ShortTextInput;\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_designInputs","_designInputs2","_designInputs3","_designInputsSelectors","_designUiInput","_designInputs4","_designInputs5","_liveControlInputModule","e","__esModule","default","ShortTextInput","value","onChange","inputValue","setInputValue","React","useState","useEffect","handleChange","newValue","target","createElement","InputText","LongTextInput","TextArea","SelectInput","meta","selectedValue","setSelectedValue","options","useMemo","map","option","label","placeholderContent","find","o","className","classNames","styles","wrapper","Dropdown","MenuItem","active","key","onClick","NumberInput","isNaN","Number","console","error","type","ColorInput","ColorPicker","onColorSelect","allowCustomColor","DateInput","Date","toISOString","split","DatePicker","date","ToggleInput","isChecked","setIsChecked","Toggle","defaultChecked","JsonInput","JSON","stringify","message","setMessage","parsedValue","parse","style","color","getInputComponent","warn"],"sources":["live-control-input.tsx"],"sourcesContent":["/* eslint-disable no-console */\n\nimport React from 'react';\nimport classNames from 'classnames';\n\nimport { InputText } from '@teambit/design.inputs.input-text';\nimport { TextArea } from '@teambit/design.inputs.text-area';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { MenuItem } from '@teambit/design.inputs.selectors.menu-item';\nimport { ColorPicker } from '@teambit/design.ui.input.color-picker';\nimport { DatePicker } from '@teambit/design.inputs.date-picker';\nimport { Toggle } from '@teambit/design.inputs.toggle-switch';\n\nimport { type SelectOption } from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './live-control-input.module.scss';\n\ntype InputComponentProps = {\n id: string;\n value: any;\n onChange: (value: any) => void;\n meta?: any;\n};\n\ntype InputComponent = React.FC<InputComponentProps>;\n\nfunction ShortTextInput({ value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value \|\| '');\n\n React.useEffect(() => {\n setInputValue(value \|\| '');\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n onChange(newValue \|\| '');\n setInputValue(newValue \|\| '');\n };\n\n return <InputText value={inputValue} onChange={handleChange} />;\n}\n\nfunction LongTextInput({ value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value \|\| '');\n\n React.useEffect(() => {\n setInputValue(value \|\| '');\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n onChange(newValue \|\| '');\n setInputValue(newValue \|\| '');\n };\n\n return <TextArea value={inputValue} onChange={handleChange} />;\n}\n\nfunction SelectInput({ value, onChange, meta }: InputComponentProps) {\n const [selectedValue, setSelectedValue] = React.useState(value \|\| '');\n\n React.useEffect(() => {\n setSelectedValue(value \|\| '');\n }, [value]);\n\n const handleChange = (newValue: any) => {\n onChange(newValue \|\| '');\n setSelectedValue(newValue \|\| '');\n };\n\n const options: {\n label: string;\n value: string;\n }[] = React.useMemo(() => {\n if (!meta \|\| !meta.options) return [];\n return meta.options.map((option: SelectOption) => {\n if (typeof option === 'string') {\n return { label: option, value: option };\n }\n return option;\n });\n }, [meta]);\n\n const placeholderContent = options.find((o) => o.value === selectedValue)?.label;\n\n return (\n <p className={classNames(styles.wrapper)}>\n <Dropdown placeholderContent={placeholderContent}>\n {options.map((option) => {\n return (\n <MenuItem\n active={option.value === selectedValue}\n key={option.value}\n onClick={() => handleChange(option.value)}\n >\n {option.label}\n </MenuItem>\n );\n })}\n </Dropdown>\n </p>\n );\n}\n\nfunction NumberInput({ value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value \|\| 0);\n\n React.useEffect(() => {\n setInputValue(value \|\| 0);\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!isNaN(Number(newValue))) {\n onChange(Number(newValue) \|\| 0);\n setInputValue(Number(newValue) \|\| 0);\n } else {\n // TODO: render error message\n // eslint-disable-next-line no-console\n console.error('Invalid number input', newValue);\n }\n };\n\n return <InputText type=\"number\" value={inputValue} onChange={handleChange} />;\n}\n\nfunction ColorInput({ value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(value \|\| '');\n\n React.useEffect(() => {\n setInputValue(value \|\| '');\n }, [value]);\n\n const handleChange = (newValue: string) => {\n onChange(newValue \|\| '');\n setInputValue(newValue \|\| '');\n };\n\n return (\n <p className={classNames(styles.wrapper)}>\n <ColorPicker value={inputValue} onColorSelect={handleChange} allowCustomColor />\n </p>\n );\n}\n\nfunction DateInput({ value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState<Date \| null>(new Date(value));\n\n React.useEffect(() => {\n setInputValue(new Date(value));\n }, [value]);\n\n const handleChange = (newValue: Date \| null) => {\n if (newValue) {\n onChange(newValue.toISOString().split('T')[0]);\n }\n setInputValue(newValue);\n };\n\n return (\n <p className={classNames(styles.wrapper)}>\n <DatePicker date={inputValue} onChange={handleChange} />\n </p>\n );\n}\n\nfunction ToggleInput({ value, onChange }: InputComponentProps) {\n const [isChecked, setIsChecked] = React.useState(!!value);\n\n React.useEffect(() => {\n setIsChecked(!!value);\n }, [value]);\n\n const handleChange = () => {\n setIsChecked(!isChecked);\n onChange(!isChecked);\n };\n\n return (\n <p className={classNames(styles.wrapper)}>\n <Toggle defaultChecked={isChecked} onChange={handleChange} />\n </p>\n );\n}\n\nfunction JsonInput({ value, onChange }: InputComponentProps) {\n const [inputValue, setInputValue] = React.useState(JSON.stringify(value, null, 2));\n\n React.useEffect(() => {\n setInputValue(JSON.stringify(value, null, 2));\n }, [value]);\n\n const [message, setMessage] = React.useState('');\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.target.value;\n try {\n const parsedValue = JSON.parse(newValue);\n onChange(parsedValue);\n setMessage('');\n } catch {\n setMessage('Invalid JSON');\n }\n setInputValue(newValue);\n };\n\n return (\n <div>\n <TextArea value={inputValue} onChange={handleChange} />\n {message && <div style={{ color: 'red' }}>{message}</div>}\n </div>\n );\n}\n\nexport function getInputComponent(type: string): InputComponent {\n switch (type) {\n case 'text':\n return ShortTextInput;\n case 'longtext':\n return LongTextInput;\n case 'select':\n return SelectInput;\n case 'number':\n return NumberInput;\n case 'color':\n return ColorInput;\n case 'date':\n return DateInput;\n case 'boolean':\n return ToggleInput;\n case 'json':\n return JsonInput;\n default:\n // eslint-disable-next-line no-console\n console.warn(`Unknown input type: ${type}`);\n return ShortTextInput;\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/compositions-panel/live-control-panel.js CHANGED Viewed

@@ -39,7 +39,10 @@ function LiveControls({
   onChange
 }) {
   return /*#__PURE__*/_react().default.createElement("ul", {
-    className: (0, _classnames().default)(_liveControlPanelModule().default.container)
+    className: (0, _classnames().default)(_liveControlPanelModule().default.container),
+    style: {
+      paddingBottom: '20em' /* temp walkaround for cutting popups */
+    }
   }, defs.map(field => {
     const key = field.id;
     const InputComponent = (0, _liveControlInput().getInputComponent)(field.input || 'text');

package/dist/ui/compositions-panel/live-control-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_liveControlPanelModule","_liveControlInput","e","__esModule","default","LiveControls","defs","values","onChange","createElement","className","classNames","styles","container","map","field","key","id","InputComponent","getInputComponent","input","item","label","htmlFor","value","v","meta"],"sources":["live-control-panel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { type Control } from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './live-control-panel.module.scss';\nimport { getInputComponent } from './live-control-input';\n\nexport function LiveControls({\n defs,\n values,\n onChange,\n}: {\n defs: Array<Control>;\n values: Record<string, any>;\n onChange: (key: string, value: any) => void;\n}) {\n return (\n <ul className={classNames(styles.container)}>\n {defs.map((field) => {\n const key = field.id;\n const InputComponent = getInputComponent(field.input \|\| 'text');\n return (\n <li key={key} className={classNames(styles.item)}>\n <div className={classNames(styles.label)}>\n <label htmlFor={`control-${key}`}>{field.label \|\| field.id}</label>\n </div>\n <div>\n <InputComponent\n id={`control-${key}`}\n value={values[key]}\n onChange={(v: any) => onChange(key, v)}\n meta={field}\n />\n </div>\n </li>\n );\n })}\n </ul>\n );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAI,wBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,uBAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,kBAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,iBAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyD,SAAAC,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElD,SAASG,YAAYA,CAAC;EAC3BC,IAAI;EACJC,MAAM;EACNC;AAKF,CAAC,EAAE;EACD,oBACEb,MAAA,GAAAS,OAAA,CAAAK,aAAA;~~IAAIC~~,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,SAAS;EAAE,~~GACzCP~~,IAAI,~~CAACQ~~,GAAG,CAAEC,KAAK,IAAK;IACnB,MAAMC,GAAG,GAAGD,KAAK,CAACE,EAAE;IACpB,MAAMC,cAAc,GAAG,IAAAC,qCAAiB,EAACJ,KAAK,CAACK,KAAK,IAAI,MAAM,CAAC;IAC/D,~~oBACEzB~~,MAAA,GAAAS,OAAA,CAAAK,aAAA;~~MAAIO~~,GAAG,EAAEA,GAAI;~~MAACN~~,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,~~CAACS~~,IAAI;IAAE,gBAC/~~C1B~~,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAKC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,~~CAACU~~,KAAK;IAAE,~~gBACvC3B~~,MAAA,GAAAS,OAAA,CAAAK,aAAA;~~MAAOc~~,OAAO,EAAE,WAAWP,GAAG;IAAG,GAAED,KAAK,CAACO,KAAK,IAAIP,KAAK,CAACE,EAAU,CAC/D,CAAC,~~eACNtB~~,MAAA,GAAAS,OAAA,CAAAK,aAAA,2BACEd,MAAA,GAAAS,OAAA,CAAAK,aAAA,~~CAACS~~,cAAc;MACbD,EAAE,EAAE,WAAWD,GAAG,EAAG;MACrBQ,KAAK,~~EAAEjB~~,MAAM,~~CAACS~~,GAAG,CAAE;~~MACnBR~~,QAAQ,~~EAAGiB~~,CAAM,~~IAAKjB~~,QAAQ,~~CAACQ~~,GAAG,EAAES,CAAC,CAAE;MACvCC,IAAI,EAAEX;IAAM,CACb,CACE,CACH,CAAC;EAET,CAAC,CACC,CAAC;AAET","ignoreList":[]}
1	+ {"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_liveControlPanelModule","_liveControlInput","e","__esModule","default","LiveControls","defs","values","onChange","createElement","className","classNames","styles","container","style","paddingBottom","map","field","key","id","InputComponent","getInputComponent","input","item","label","htmlFor","value","v","meta"],"sources":["live-control-panel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { type Control } from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './live-control-panel.module.scss';\nimport { getInputComponent } from './live-control-input';\n\nexport function LiveControls({\n defs,\n values,\n onChange,\n}: {\n defs: Array<Control>;\n values: Record<string, any>;\n onChange: (key: string, value: any) => void;\n}) {\n return (\n <ul\n className={classNames(styles.container)}\n style={{ paddingBottom: '20em' /* temp walkaround for cutting popups */ }}\n >\n {defs.map((field) => {\n const key = field.id;\n const InputComponent = getInputComponent(field.input \|\| 'text');\n return (\n <li key={key} className={classNames(styles.item)}>\n <div className={classNames(styles.label)}>\n <label htmlFor={`control-${key}`}>{field.label \|\| field.id}</label>\n </div>\n <div>\n <InputComponent\n id={`control-${key}`}\n value={values[key]}\n onChange={(v: any) => onChange(key, v)}\n meta={field}\n />\n </div>\n </li>\n );\n })}\n </ul>\n );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAI,wBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,uBAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,kBAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,iBAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyD,SAAAC,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElD,SAASG,YAAYA,CAAC;EAC3BC,IAAI;EACJC,MAAM;EACNC;AAKF,CAAC,EAAE;EACD,oBACEb,MAAA,GAAAS,OAAA,CAAAK,aAAA;IACEC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,SAAS,CAAE;IACxCC,KAAK,EAAE;MAAEC,aAAa,EAAE,MAAM,CAAC;IAAyC;EAAE,GAEzET,IAAI,CAACU,GAAG,CAAEC,KAAK,IAAK;IACnB,MAAMC,GAAG,GAAGD,KAAK,CAACE,EAAE;IACpB,MAAMC,cAAc,GAAG,IAAAC,qCAAiB,EAACJ,KAAK,CAACK,KAAK,IAAI,MAAM,CAAC;IAC/D,oBACE3B,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAIS,GAAG,EAAEA,GAAI;MAACR,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACW,IAAI;IAAE,gBAC/C5B,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAKC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACY,KAAK;IAAE,gBACvC7B,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAOgB,OAAO,EAAE,WAAWP,GAAG;IAAG,GAAED,KAAK,CAACO,KAAK,IAAIP,KAAK,CAACE,EAAU,CAC/D,CAAC,eACNxB,MAAA,GAAAS,OAAA,CAAAK,aAAA,2BACEd,MAAA,GAAAS,OAAA,CAAAK,aAAA,CAACW,cAAc;MACbD,EAAE,EAAE,WAAWD,GAAG,EAAG;MACrBQ,KAAK,EAAEnB,MAAM,CAACW,GAAG,CAAE;MACnBV,QAAQ,EAAGmB,CAAM,IAAKnB,QAAQ,CAACU,GAAG,EAAES,CAAC,CAAE;MACvCC,IAAI,EAAEX;IAAM,CACb,CACE,CACH,CAAC;EAET,CAAC,CACC,CAAC;AAET","ignoreList":[]}

package/dist/ui/compositions-panel/live-control-panel.module.scss CHANGED Viewed

@@ -11,4 +11,5 @@
 .label {
   font-weight: bold;
+  color: var(--on-background-color);
 }

package/package.json CHANGED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.667",
+  "version": "1.0.669",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.667"
+    "version": "1.0.669"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -16,8 +16,8 @@
     "classnames": "2.2.6",
     "@teambit/compositions.model.composition-id": "0.0.505",
     "@teambit/harmony": "0.4.7",
-    "@teambit/component.sources": "0.0.109",
-    "@teambit/legacy.consumer-component": "0.0.58",
+    "@teambit/component.sources": "0.0.110",
+    "@teambit/legacy.consumer-component": "0.0.59",
     "@teambit/toolbox.path.match-patterns": "0.0.19",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
@@ -30,10 +30,10 @@
     "@teambit/design.ui.separator": "0.0.354",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.17",
     "@teambit/design.ui.tooltip": "0.0.378",
-    "@teambit/docs.ui.queries.get-docs": "0.0.509",
+    "@teambit/docs.ui.queries.get-docs": "0.0.510",
     "@teambit/documenter.theme.theme-context": "4.0.3",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/preview.ui.component-preview": "1.0.25",
+    "@teambit/preview.ui.component-preview": "1.0.26",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.228",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.199",
     "@teambit/documenter.ui.property-table": "4.1.11",
@@ -45,25 +45,25 @@
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.518",
-    "@teambit/design.inputs.date-picker": "0.0.2",
+    "@teambit/design.inputs.date-picker": "0.0.3",
     "@teambit/design.inputs.dropdown": "1.3.1",
     "@teambit/design.inputs.input-text": "1.1.3",
     "@teambit/design.inputs.selectors.menu-item": "1.1.0",
     "@teambit/design.inputs.text-area": "0.0.19",
     "@teambit/design.inputs.toggle-switch": "0.0.7",
     "@teambit/design.ui.input.color-picker": "0.0.56",
-    "@teambit/component": "1.0.667",
-    "@teambit/graphql": "1.0.667",
-    "@teambit/cli": "0.0.1244",
-    "@teambit/dev-files": "1.0.667",
-    "@teambit/envs": "1.0.667",
-    "@teambit/preview": "1.0.667",
-    "@teambit/schema": "1.0.667",
-    "@teambit/scope": "1.0.667",
-    "@teambit/workspace": "1.0.667",
-    "@teambit/panels": "0.0.1246",
-    "@teambit/component-compare": "1.0.667",
-    "@teambit/ui": "1.0.667"
+    "@teambit/component": "1.0.669",
+    "@teambit/graphql": "1.0.669",
+    "@teambit/cli": "0.0.1246",
+    "@teambit/dev-files": "1.0.669",
+    "@teambit/envs": "1.0.669",
+    "@teambit/preview": "1.0.669",
+    "@teambit/schema": "1.0.669",
+    "@teambit/scope": "1.0.669",
+    "@teambit/workspace": "1.0.669",
+    "@teambit/panels": "0.0.1248",
+    "@teambit/component-compare": "1.0.669",
+    "@teambit/ui": "1.0.669"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/composition-preview.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
-import { ComponentPreview, ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
+import type { ComponentPreviewProps } from '@teambit/preview.ui.component-preview';
+import { ComponentPreview } from '@teambit/preview.ui.component-preview';
 import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
-import { Composition } from '../composition';
+import type { Composition } from '../composition';
 export type ComponentCompositionProps = {
   /**

package/ui/compositions-panel/compositions-panel.module.scss CHANGED Viewed

@@ -7,6 +7,8 @@
 }
 .tab {
+  color: var(--on-background-color);
   > div:first-child {
     border: none;
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);

package/ui/compositions-panel/compositions-panel.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ import {
 } from '@teambit/compositions.ui.composition-live-controls';
 import styles from './compositions-panel.module.scss';
-import { Composition } from '../../composition';
+import type { Composition } from '../../composition';
 import { LiveControls } from './live-control-panel';
 export type CompositionsPanelProps = {