@teambit/compositions 1.0.893 → 1.0.895

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

@@ -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 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":"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","ignoreList":[]}
+{"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","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","useNameParam","className","rest","openDrawerList","onToggleDrawer","useState","hasLiveControls","ready","defs","values","onChange","setTimestamp","useLiveControls","handleDrawerToggle","id","isDrawerOpen","includes","list","filter","drawer","concat","shouldAddNameParam","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","handleSelect","useCallback","selected","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","createElement","classNames","styles","container","DrawerUI","isOpen","onToggle","name","tab","map","href","key","linkWrapper","panelLink","onClick","displayName","right","MenuWidgetIcon","codeLink","icon","tooltipContent","Tooltip","content","placement","iconLink","target","rel","Icon","of","LiveControls","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, 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 { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';\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  const [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);\n  const { hasLiveControls, ready, defs, values, onChange, setTimestamp } = useLiveControls();\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  // composition navigation action\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n      if (selected === active) return;\n      setTimestamp(0);\n    },\n    [onSelect, active, setTimestamp]\n  );\n  const onCompositionCodeClicked = useCallback(\n    (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      setTimestamp(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, navigate, setTimestamp, versionFromQueryParams]\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      {hasLiveControls ? (\n        <DrawerUI\n          name=\"LIVE CONTROLS\"\n          className={classNames(styles.tab, className)}\n          isOpen={openDrawerList.includes('LIVE_CONTROLS')}\n          onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}\n        >\n          {ready ? (\n            <LiveControls defs={defs} values={values} onChange={onChange} />\n          ) : (\n            <div className={styles.noLiveControls}>No live controls available for this composition</div>\n          )}\n        </DrawerUI>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -13,6 +13,7 @@
     border: none;
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
+
   > div:last-child {
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
@@ -179,3 +180,35 @@
     }
   }
 }
+
+.liveControlsSkeleton {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  opacity: 1;
+  transition:
+    opacity 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.liveControlsSkeleton--hidden {
+  opacity: 0;
+  transform: translateY(2px);
+}
+
+.liveControlsContent {
+  opacity: 1;
+  transition:
+    opacity 160ms ease-out,
+    transform 160ms ease-out;
+}
+
+.liveControlsContent--hidden {
+  opacity: 0;
+  transform: translateY(2px);
+}
+
+.loader {
+  color: var(--skeleton-color, #e0e0e0);
+}

package/dist/ui/compositions-panel/live-control-input.d.ts

@@ -6,5 +6,6 @@ type InputComponentProps = {
     meta?: any;
 };
 type InputComponent = React.FC<InputComponentProps>;
+export declare function SelectInput({ value, onChange, meta }: InputComponentProps): import("react/jsx-runtime").JSX.Element;
 export declare function getInputComponent(type: string): InputComponent;
 export {};

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SelectInput = SelectInput;
 exports.getInputComponent = getInputComponent;
 function _react() {
   const data = _interopRequireDefault(require("react"));
@@ -92,7 +93,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable no-console */
 function ShortTextInput({
   value,
-  onChange
+  onChange,
+  id
 }) {
   const [inputValue, setInputValue] = _react().default.useState(value || '');
   _react().default.useEffect(() => {
@@ -103,14 +105,19 @@ function ShortTextInput({
     onChange(newValue || '');
     setInputValue(newValue || '');
   };
-  return /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlInputModule().default.wrapper
+  }, /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
+    className: _liveControlInputModule().default.inputText,
+    id: id,
     value: inputValue,
     onChange: handleChange
-  });
+  }));
 }
 function LongTextInput({
   value,
-  onChange
+  onChange,
+  id
 }) {
   const [inputValue, setInputValue] = _react().default.useState(value || '');
   _react().default.useEffect(() => {
@@ -121,19 +128,22 @@ function LongTextInput({
     onChange(newValue || '');
     setInputValue(newValue || '');
   };
-  return /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlInputModule().default.wrapper
+  }, /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
+    id: id,
     value: inputValue,
     onChange: handleChange
-  });
+  }));
 }
 function SelectInput({
   value,
   onChange,
   meta
 }) {
+  const triggerRef = _react().default.useRef(null);
   const [selectedValue, setSelectedValue] = _react().default.useState(value || '');
   const [open, setOpen] = _react().default.useState(false);
-  const triggerRef = _react().default.useRef(null);
   _react().default.useEffect(() => {
     setSelectedValue(value || '');
   }, [value]);
@@ -157,16 +167,19 @@ function SelectInput({
     setSelectedValue(v);
     setOpen(false);
   };
-  return /*#__PURE__*/_react().default.createElement("p", {
+  return /*#__PURE__*/_react().default.createElement("div", {
     ref: triggerRef,
     className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlInputModule().default.fullWidthControl
   }, /*#__PURE__*/_react().default.createElement(_designInputs3().Dropdown, {
+    className: _liveControlInputModule().default.dropdownField,
     placeholderContent: placeholderContent,
     open: open,
     onChange: (_, isOpen) => setOpen(isOpen),
     position: position,
     dropClass: _overlayModule().default.suppressNativeMenu
-  }), open && style && /*#__PURE__*/_react().default.createElement(_useOverlay().BitPortal, null, /*#__PURE__*/_react().default.createElement("div", {
+  })), open && style && /*#__PURE__*/_react().default.createElement(_useOverlay().BitPortal, null, /*#__PURE__*/_react().default.createElement("div", {
     className: _overlayModule().default.overlay,
     style: style,
     onMouseDown: e => e.stopPropagation()
@@ -179,7 +192,8 @@ function SelectInput({
 }
 function NumberInput({
   value,
-  onChange
+  onChange,
+  id
 }) {
   const [inputValue, setInputValue] = _react().default.useState(value || 0);
   _react().default.useEffect(() => {
@@ -196,11 +210,14 @@ function NumberInput({
       console.error('Invalid number input', newValue);
     }
   };
-  return /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlInputModule().default.wrapper
+  }, /*#__PURE__*/_react().default.createElement(_designInputs().InputText, {
+    id: id,
     type: "number",
     value: inputValue,
     onChange: handleChange
-  });
+  }));
 }
 function ColorPickerPortal(props) {
   const [open, setOpen] = _react().default.useState(false);
@@ -244,7 +261,7 @@ function ColorInput({
     onChange(v);
     setInputValue(v);
   };
-  return /*#__PURE__*/_react().default.createElement("p", {
+  return /*#__PURE__*/_react().default.createElement("div", {
     className: _liveControlInputModule().default.wrapper
   }, /*#__PURE__*/_react().default.createElement(ColorPickerPortal, {
     value: inputValue,
@@ -266,7 +283,7 @@ function DateInput({
     }
     setInputValue(newValue);
   };
-  return /*#__PURE__*/_react().default.createElement("p", {
+  return /*#__PURE__*/_react().default.createElement("div", {
     className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
   }, /*#__PURE__*/_react().default.createElement(_designInputs4().DatePicker, {
     date: inputValue,
@@ -281,20 +298,113 @@ function ToggleInput({
   _react().default.useEffect(() => {
     setIsChecked(!!value);
   }, [value]);
-  const handleChange = () => {
-    setIsChecked(!isChecked);
-    onChange(!isChecked);
+  const handleChange = event => {
+    const nextChecked = event?.target?.checked ?? !isChecked;
+    setIsChecked(nextChecked);
+    onChange(nextChecked);
   };
-  return /*#__PURE__*/_react().default.createElement("p", {
-    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper, _liveControlInputModule().default.toggleWrapper)
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlInputModule().default.toggleControl
   }, /*#__PURE__*/_react().default.createElement(_designInputs5().Toggle, {
-    defaultChecked: isChecked,
+    checked: isChecked,
+    onInputChanged: handleChange
+  })));
+}
+function RangeInput({
+  value,
+  onChange,
+  meta,
+  id
+}) {
+  const [inputValue, setInputValue] = _react().default.useState(typeof value === 'number' ? value : 0);
+  _react().default.useEffect(() => {
+    setInputValue(typeof value === 'number' ? value : 0);
+  }, [value]);
+  const handleChange = e => {
+    const newValue = Number(e.target.value);
+    if (!isNaN(newValue)) {
+      onChange(newValue);
+      setInputValue(newValue);
+    }
+  };
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper, _liveControlInputModule().default.rangeWrapper)
+  }, /*#__PURE__*/_react().default.createElement("input", {
+    id: id,
+    className: _liveControlInputModule().default.rangeInput,
+    type: "range",
+    value: inputValue,
+    min: meta?.min,
+    max: meta?.max,
+    step: meta?.step,
     onChange: handleChange
-  }));
+  }), /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlInputModule().default.rangeValue
+  }, inputValue));
+}
+function MultiSelectInput({
+  value,
+  onChange,
+  meta,
+  id
+}) {
+  const [selectedValues, setSelectedValues] = _react().default.useState(Array.isArray(value) ? value : []);
+  _react().default.useEffect(() => {
+    setSelectedValues(Array.isArray(value) ? value : []);
+  }, [value]);
+  const options = _react().default.useMemo(() => {
+    if (!meta?.options) return [];
+    return meta.options.map(option => typeof option === 'string' ? {
+      label: option,
+      value: option
+    } : option);
+  }, [meta]);
+  const handleChange = e => {
+    const values = Array.from(e.target.selectedOptions).map(opt => opt.value);
+    onChange(values);
+    setSelectedValues(values);
+  };
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+  }, /*#__PURE__*/_react().default.createElement("select", {
+    id: id,
+    className: _liveControlInputModule().default.multiSelect,
+    multiple: true,
+    value: selectedValues,
+    onChange: handleChange
+  }, options.map(option => /*#__PURE__*/_react().default.createElement("option", {
+    key: option.value,
+    value: option.value
+  }, option.label))));
+}
+function CustomInput({
+  value,
+  onChange,
+  meta,
+  id
+}) {
+  if (typeof meta?.render === 'function') {
+    return /*#__PURE__*/_react().default.createElement("div", {
+      className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
+    }, meta.render({
+      value,
+      onChange,
+      id,
+      options: meta.renderOptions
+    }));
+  }
+  return /*#__PURE__*/_react().default.createElement(ShortTextInput, {
+    id: id,
+    value: value,
+    onChange: onChange
+  });
 }
 function JsonInput({
   value,
-  onChange
+  onChange,
+  id
 }) {
   const [inputValue, setInputValue] = _react().default.useState(JSON.stringify(value, null, 2));
   _react().default.useEffect(() => {
@@ -312,7 +422,10 @@ function JsonInput({
     }
     setInputValue(newValue);
   };
-  return /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlInputModule().default.wrapper
+  }, /*#__PURE__*/_react().default.createElement(_designInputs2().TextArea, {
+    id: id,
     value: inputValue,
     onChange: handleChange
   }), message && /*#__PURE__*/_react().default.createElement("div", {
@@ -337,8 +450,14 @@ function getInputComponent(type) {
       return DateInput;
     case 'boolean':
       return ToggleInput;
+    case 'range':
+      return RangeInput;
+    case 'multiselect':
+      return MultiSelectInput;
     case 'json':
       return JsonInput;
+    case 'custom':
+      return CustomInput;
     default:
       // eslint-disable-next-line no-console
       console.warn(`Unknown input type: ${type}`);

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_designInputs","_designInputs2","_designInputs3","_designInputsSelectors","_designUiInput","_designInputs4","_designInputs5","_useOverlay","_liveControlInputModule","_overlayModule","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","ShortTextInput","value","onChange","inputValue","setInputValue","React","useState","useEffect","handleChange","newValue","target","createElement","InputText","LongTextInput","TextArea","SelectInput","meta","selectedValue","setSelectedValue","open","setOpen","triggerRef","useRef","options","useMemo","map","o","label","placeholderContent","find","position","style","useOverlay","paddingTop","paddingBottom","commitSelection","v","ref","className","classNames","styles","wrapper","Dropdown","_","isOpen","dropClass","overlayStyles","suppressNativeMenu","BitPortal","overlay","onMouseDown","stopPropagation","option","MenuItem","portalMenuItem","key","active","onClick","NumberInput","isNaN","Number","console","error","type","ColorPickerPortal","props","padding","ColorPicker","ColorsBox","onColorSelect","color","colorsList","showNoColor","selected","ColorInput","allowCustomColor","DateInput","Date","toISOString","split","DatePicker","date","ToggleInput","isChecked","setIsChecked","Toggle","defaultChecked","JsonInput","JSON","stringify","message","setMessage","parsedValue","parse","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, ColorsBox } from '@teambit/design.ui.input.color-picker';\nimport { DatePicker } from '@teambit/design.inputs.date-picker';\nimport { Toggle } from '@teambit/design.inputs.toggle-switch';\nimport { useOverlay, BitPortal } from './use-overlay';\n\nimport styles from './live-control-input.module.scss';\nimport overlayStyles from './overlay.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  const [open, setOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLParagraphElement>(null);\n\n  React.useEffect(() => {\n    setSelectedValue(value || '');\n  }, [value]);\n\n  const options = React.useMemo(() => {\n    if (!meta?.options) return [];\n    return meta.options.map((o: any) => (typeof o === 'string' ? { label: o, value: o } : o));\n  }, [meta]);\n\n  const placeholderContent = options.find((o) => o.value === selectedValue)?.label;\n\n  const { position, style } = useOverlay(triggerRef, open, 0, {\n    paddingTop: 8,\n    paddingBottom: 8,\n  });\n\n  const commitSelection = (v: string) => {\n    onChange(v);\n    setSelectedValue(v);\n    setOpen(false);\n  };\n\n  return (\n    <p ref={triggerRef} className={classNames(styles.wrapper)}>\n      <Dropdown\n        placeholderContent={placeholderContent}\n        open={open}\n        onChange={(_, isOpen) => setOpen(isOpen)}\n        position={position}\n        dropClass={overlayStyles.suppressNativeMenu}\n      />\n\n      {open && style && (\n        <BitPortal>\n          <div className={overlayStyles.overlay} style={style} onMouseDown={(e) => e.stopPropagation()}>\n            {options.map((option) => (\n              <MenuItem\n                className={styles.portalMenuItem}\n                key={option.value}\n                active={option.value === selectedValue}\n                onClick={() => commitSelection(option.value)}\n              >\n                {option.label}\n              </MenuItem>\n            ))}\n          </div>\n        </BitPortal>\n      )}\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 ColorPickerPortal(props: any) {\n  const [open, setOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n\n  const { position, style } = useOverlay(triggerRef, open, 4, {\n    padding: 16,\n  });\n\n  return (\n    <div ref={triggerRef}>\n      <ColorPicker\n        {...props}\n        open={open}\n        onChange={(_, isOpen) => setOpen(isOpen)}\n        position={position}\n        dropClass={overlayStyles.suppressNativeMenu}\n      />\n\n      {open && style && (\n        <BitPortal>\n          <div className={overlayStyles.overlay} style={style} onMouseDown={(e) => e.stopPropagation()}>\n            <ColorsBox\n              onColorSelect={(color: string) => {\n                props.onColorSelect?.(color);\n                setOpen(false);\n              }}\n              colorsList={props.colorsList}\n              showNoColor={props.showNoColor}\n              selected={props.value ?? ''}\n            />\n          </div>\n        </BitPortal>\n      )}\n    </div>\n  );\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 = (v: string) => {\n    onChange(v);\n    setInputValue(v);\n  };\n\n  return (\n    <p className={styles.wrapper}>\n      <ColorPickerPortal 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":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_designInputs","_designInputs2","_designInputs3","_designInputsSelectors","_designUiInput","_designInputs4","_designInputs5","_useOverlay","_liveControlInputModule","_overlayModule","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","ShortTextInput","value","onChange","id","inputValue","setInputValue","React","useState","useEffect","handleChange","newValue","target","createElement","className","styles","wrapper","InputText","inputText","LongTextInput","TextArea","SelectInput","meta","triggerRef","useRef","selectedValue","setSelectedValue","open","setOpen","options","useMemo","map","o","label","placeholderContent","find","position","style","useOverlay","paddingTop","paddingBottom","commitSelection","v","ref","classNames","fullWidthControl","Dropdown","dropdownField","_","isOpen","dropClass","overlayStyles","suppressNativeMenu","BitPortal","overlay","onMouseDown","stopPropagation","option","MenuItem","portalMenuItem","key","active","onClick","NumberInput","isNaN","Number","console","error","type","ColorPickerPortal","props","padding","ColorPicker","ColorsBox","onColorSelect","color","colorsList","showNoColor","selected","ColorInput","allowCustomColor","DateInput","Date","toISOString","split","DatePicker","date","ToggleInput","isChecked","setIsChecked","event","nextChecked","checked","toggleWrapper","toggleControl","Toggle","onInputChanged","RangeInput","rangeWrapper","rangeInput","min","max","step","rangeValue","MultiSelectInput","selectedValues","setSelectedValues","Array","isArray","values","from","selectedOptions","opt","multiSelect","multiple","CustomInput","render","renderOptions","JsonInput","JSON","stringify","message","setMessage","parsedValue","parse","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, ColorsBox } from '@teambit/design.ui.input.color-picker';\nimport { DatePicker } from '@teambit/design.inputs.date-picker';\nimport { Toggle } from '@teambit/design.inputs.toggle-switch';\nimport type { SelectOption } from '@teambit/compositions.ui.composition-live-controls';\n\nimport { useOverlay, BitPortal } from './use-overlay';\n\nimport styles from './live-control-input.module.scss';\nimport overlayStyles from './overlay.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, id }: 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 (\n    <div className={styles.wrapper}>\n      <InputText className={styles.inputText} id={id} value={inputValue} onChange={handleChange} />\n    </div>\n  );\n}\n\nfunction LongTextInput({ value, onChange, id }: 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 (\n    <div className={styles.wrapper}>\n      <TextArea id={id} value={inputValue} onChange={handleChange} />\n    </div>\n  );\n}\n\nexport function SelectInput({ value, onChange, meta }: InputComponentProps) {\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n\n  const [selectedValue, setSelectedValue] = React.useState(value || '');\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    setSelectedValue(value || '');\n  }, [value]);\n\n  const options = React.useMemo(() => {\n    if (!meta?.options) return [];\n    return meta.options.map((o: any) => (typeof o === 'string' ? { label: o, value: o } : o));\n  }, [meta]);\n\n  const placeholderContent = options.find((o) => o.value === selectedValue)?.label;\n\n  const { position, style } = useOverlay(triggerRef, open, 0, {\n    paddingTop: 8,\n    paddingBottom: 8,\n  });\n\n  const commitSelection = (v: string) => {\n    onChange(v);\n    setSelectedValue(v);\n    setOpen(false);\n  };\n\n  return (\n    <div ref={triggerRef} className={classNames(styles.wrapper)}>\n      <div className={styles.fullWidthControl}>\n        <Dropdown\n          className={styles.dropdownField}\n          placeholderContent={placeholderContent}\n          open={open}\n          onChange={(_, isOpen) => setOpen(isOpen)}\n          position={position}\n          dropClass={overlayStyles.suppressNativeMenu}\n        />\n      </div>\n\n      {open && style && (\n        <BitPortal>\n          <div className={overlayStyles.overlay} style={style} onMouseDown={(e) => e.stopPropagation()}>\n            {options.map((option) => (\n              <MenuItem\n                className={styles.portalMenuItem}\n                key={option.value}\n                active={option.value === selectedValue}\n                onClick={() => commitSelection(option.value)}\n              >\n                {option.label}\n              </MenuItem>\n            ))}\n          </div>\n        </BitPortal>\n      )}\n    </div>\n  );\n}\n\nfunction NumberInput({ value, onChange, id }: 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 (\n    <div className={styles.wrapper}>\n      <InputText id={id} type=\"number\" value={inputValue} onChange={handleChange} />\n    </div>\n  );\n}\n\nfunction ColorPickerPortal(props: any) {\n  const [open, setOpen] = React.useState(false);\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n\n  const { position, style } = useOverlay(triggerRef, open, 4, {\n    padding: 16,\n  });\n\n  return (\n    <div ref={triggerRef}>\n      <ColorPicker\n        {...props}\n        open={open}\n        onChange={(_, isOpen) => setOpen(isOpen)}\n        position={position}\n        dropClass={overlayStyles.suppressNativeMenu}\n      />\n\n      {open && style && (\n        <BitPortal>\n          <div className={overlayStyles.overlay} style={style} onMouseDown={(e) => e.stopPropagation()}>\n            <ColorsBox\n              onColorSelect={(color: string) => {\n                props.onColorSelect?.(color);\n                setOpen(false);\n              }}\n              colorsList={props.colorsList}\n              showNoColor={props.showNoColor}\n              selected={props.value ?? ''}\n            />\n          </div>\n        </BitPortal>\n      )}\n    </div>\n  );\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 = (v: string) => {\n    onChange(v);\n    setInputValue(v);\n  };\n\n  return (\n    <div className={styles.wrapper}>\n      <ColorPickerPortal value={inputValue} onColorSelect={handleChange} allowCustomColor />\n    </div>\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    <div className={classNames(styles.wrapper)}>\n      <DatePicker date={inputValue} onChange={handleChange} />\n    </div>\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 = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const nextChecked = event?.target?.checked ?? !isChecked;\n    setIsChecked(nextChecked);\n    onChange(nextChecked);\n  };\n\n  return (\n    <div className={classNames(styles.wrapper, styles.toggleWrapper)}>\n      <div className={styles.toggleControl}>\n        <Toggle checked={isChecked} onInputChanged={handleChange} />\n      </div>\n    </div>\n  );\n}\n\nfunction RangeInput({ value, onChange, meta, id }: InputComponentProps) {\n  const [inputValue, setInputValue] = React.useState<number>(typeof value === 'number' ? value : 0);\n\n  React.useEffect(() => {\n    setInputValue(typeof value === 'number' ? value : 0);\n  }, [value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n    if (!isNaN(newValue)) {\n      onChange(newValue);\n      setInputValue(newValue);\n    }\n  };\n\n  return (\n    <div className={classNames(styles.wrapper, styles.rangeWrapper)}>\n      <input\n        id={id}\n        className={styles.rangeInput}\n        type=\"range\"\n        value={inputValue}\n        min={meta?.min}\n        max={meta?.max}\n        step={meta?.step}\n        onChange={handleChange}\n      />\n      <div className={styles.rangeValue}>{inputValue}</div>\n    </div>\n  );\n}\n\nfunction MultiSelectInput({ value, onChange, meta, id }: InputComponentProps) {\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(Array.isArray(value) ? value : []);\n\n  React.useEffect(() => {\n    setSelectedValues(Array.isArray(value) ? value : []);\n  }, [value]);\n\n  const options = React.useMemo<{ label: string; value: string }[]>(() => {\n    if (!meta?.options) return [];\n    return meta.options.map((option: SelectOption) =>\n      typeof option === 'string' ? { label: option, value: option } : option\n    );\n  }, [meta]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {\n    const values = Array.from(e.target.selectedOptions).map((opt) => opt.value);\n    onChange(values);\n    setSelectedValues(values);\n  };\n\n  return (\n    <div className={classNames(styles.wrapper)}>\n      <select id={id} className={styles.multiSelect} multiple value={selectedValues} onChange={handleChange}>\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </div>\n  );\n}\n\nfunction CustomInput({ value, onChange, meta, id }: InputComponentProps) {\n  if (typeof meta?.render === 'function') {\n    return (\n      <div className={classNames(styles.wrapper)}>\n        {meta.render({ value, onChange, id, options: meta.renderOptions })}\n      </div>\n    );\n  }\n  return <ShortTextInput id={id} value={value} onChange={onChange} />;\n}\n\nfunction JsonInput({ value, onChange, id }: 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 className={styles.wrapper}>\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 'range':\n      return RangeInput;\n    case 'multiselect':\n      return MultiSelectInput;\n    case 'json':\n      return JsonInput;\n    case 'custom':\n      return CustomInput;\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-input.module.scss

@@ -1,7 +1,96 @@
 @import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
 
 .wrapper {
-  padding: 4px 0;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.wrapper > * {
+  width: 100%;
+  min-width: 0;
+}
+
+.fullWidthControl {
+  width: 100%;
+}
+
+.dropdownField {
+  display: block;
+  width: 100%;
+}
+
+.dropdownField :global([class*='dropdownPlaceholder']) {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.wrapper :global(textarea) {
+  min-height: 78px;
+  resize: vertical;
+}
+
+.toggleWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-height: 36px;
+}
+
+.toggleControl {
+  width: 42px;
+  max-width: 42px;
+  min-width: 42px;
+}
+
+.toggleControl > * {
+  width: 100%;
+}
+
+.rangeWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 4px;
+}
+
+.rangeInput {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--primary-color, #6a57fd);
+}
+
+.rangeValue {
+  font-size: var(--bit-p-xs, 13px);
+  line-height: 1.2;
+  color: var(--on-background-color, #222222);
+  opacity: 0.85;
+}
+
+.multiSelect {
+  width: 100%;
+  min-height: 112px;
+  padding: 6px 8px;
+  border: 1px solid var(--border-medium-color, rgba(0, 0, 0, 0.16));
+  border-radius: 8px;
+  background: var(--surface-neutral-color, #ffffff);
+  color: var(--on-background-color, #222222);
+  font: inherit;
+  line-height: 1.35;
+  box-sizing: border-box;
+  scrollbar-gutter: stable;
+}
+
+.multiSelect:focus {
+  outline: none;
+  border-color: var(--primary-color, #6a57fd);
+  box-shadow: 0 0 0 2px rgba(106, 87, 253, 0.18);
+}
+
+.multiSelect option {
+  padding: 4px 6px;
 }
 
 .portalMenu {
@@ -19,3 +108,7 @@
   cursor: pointer;
   font-family: 'CircularPro', 'Gill Sans', 'Gill Sans MT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
+
+.inputText {
+  padding-top: 0px !important;
+}

package/dist/ui/compositions-panel/live-control-panel.d.ts

@@ -1,6 +1,8 @@
+import React from 'react';
 import { type Control } from '@teambit/compositions.ui.composition-live-controls';
-export declare function LiveControls({ defs, values, onChange, }: {
+export declare function LiveControls({ defs, values, onChange, renderLabel, }: {
     defs: Array<Control>;
     values: Record<string, any>;
     onChange: (key: string, value: any) => void;
+    renderLabel?: (field: Control) => React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;