@teambit/compositions 1.0.871 → 1.0.873

package/dist/{preview-1769025010676.js → preview-1769133677839.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.871/dist/compositions.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.871/dist/compositions.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.873/dist/compositions.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.873/dist/compositions.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

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

@@ -67,6 +67,13 @@ function _designInputs5() {
   };
   return data;
 }
+function _useOverlay() {
+  const data = require("./use-overlay");
+  _useOverlay = function () {
+    return data;
+  };
+  return data;
+}
 function _liveControlInputModule() {
   const data = _interopRequireDefault(require("./live-control-input.module.scss"));
   _liveControlInputModule = function () {
@@ -74,9 +81,15 @@ function _liveControlInputModule() {
   };
   return data;
 }
+function _overlayModule() {
+  const data = _interopRequireDefault(require("./overlay.module.scss"));
+  _overlayModule = function () {
+    return data;
+  };
+  return data;
+}
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable no-console */
-
+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
@@ -119,37 +132,50 @@ function SelectInput({
   meta
 }) {
   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]);
-  const handleChange = newValue => {
-    onChange(newValue || '');
-    setSelectedValue(newValue || '');
-  };
   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;
-    });
+    if (!meta?.options) return [];
+    return meta.options.map(o => typeof o === 'string' ? {
+      label: o,
+      value: o
+    } : o);
   }, [meta]);
   const placeholderContent = options.find(o => o.value === selectedValue)?.label;
+  const {
+    position,
+    style
+  } = (0, _useOverlay().useOverlay)(triggerRef, open, 0, {
+    paddingTop: 8,
+    paddingBottom: 8
+  });
+  const commitSelection = v => {
+    onChange(v);
+    setSelectedValue(v);
+    setOpen(false);
+  };
   return /*#__PURE__*/_react().default.createElement("p", {
+    ref: triggerRef,
     className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
   }, /*#__PURE__*/_react().default.createElement(_designInputs3().Dropdown, {
-    placeholderContent: placeholderContent
-  }, options.map(option => {
-    return /*#__PURE__*/_react().default.createElement(_designInputsSelectors().MenuItem, {
-      active: option.value === selectedValue,
-      key: option.value,
-      onClick: () => handleChange(option.value)
-    }, option.label);
-  })));
+    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", {
+    className: _overlayModule().default.overlay,
+    style: style,
+    onMouseDown: e => e.stopPropagation()
+  }, options.map(option => /*#__PURE__*/_react().default.createElement(_designInputsSelectors().MenuItem, {
+    className: _liveControlInputModule().default.portalMenuItem,
+    key: option.value,
+    active: option.value === selectedValue,
+    onClick: () => commitSelection(option.value)
+  }, option.label)))));
 }
 function NumberInput({
   value,
@@ -176,6 +202,36 @@ function NumberInput({
     onChange: handleChange
   });
 }
+function ColorPickerPortal(props) {
+  const [open, setOpen] = _react().default.useState(false);
+  const triggerRef = _react().default.useRef(null);
+  const {
+    position,
+    style
+  } = (0, _useOverlay().useOverlay)(triggerRef, open, 4, {
+    padding: 16
+  });
+  return /*#__PURE__*/_react().default.createElement("div", {
+    ref: triggerRef
+  }, /*#__PURE__*/_react().default.createElement(_designUiInput().ColorPicker, _extends({}, props, {
+    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", {
+    className: _overlayModule().default.overlay,
+    style: style,
+    onMouseDown: e => e.stopPropagation()
+  }, /*#__PURE__*/_react().default.createElement(_designUiInput().ColorsBox, {
+    onColorSelect: color => {
+      props.onColorSelect?.(color);
+      setOpen(false);
+    },
+    colorsList: props.colorsList,
+    showNoColor: props.showNoColor,
+    selected: props.value ?? ''
+  }))));
+}
 function ColorInput({
   value,
   onChange
@@ -184,13 +240,13 @@ function ColorInput({
   _react().default.useEffect(() => {
     setInputValue(value || '');
   }, [value]);
-  const handleChange = newValue => {
-    onChange(newValue || '');
-    setInputValue(newValue || '');
+  const handleChange = v => {
+    onChange(v);
+    setInputValue(v);
   };
   return /*#__PURE__*/_react().default.createElement("p", {
-    className: (0, _classnames().default)(_liveControlInputModule().default.wrapper)
-  }, /*#__PURE__*/_react().default.createElement(_designUiInput().ColorPicker, {
+    className: _liveControlInputModule().default.wrapper
+  }, /*#__PURE__*/_react().default.createElement(ColorPickerPortal, {
     value: inputValue,
     onColorSelect: handleChange,
     allowCustomColor: true

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

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

@@ -1,3 +1,21 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
 .wrapper {
   padding: 4px 0;
 }
+
+.portalMenu {
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--surface-neutral-color, #fff);
+  border: 1px solid var(--border-medium-color, #ededed);
+  border-radius: 8px;
+  box-shadow: var(--bit-shadow-hover-low);
+  position: fixed;
+  z-index: $modal-z-index - 1;
+}
+
+.portalMenuItem {
+  cursor: pointer;
+  font-family: 'CircularPro', 'Gill Sans', 'Gill Sans MT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}

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

@@ -39,10 +39,7 @@ function LiveControls({
   onChange
 }) {
   return /*#__PURE__*/_react().default.createElement("ul", {
-    className: (0, _classnames().default)(_liveControlPanelModule().default.container),
-    style: {
-      paddingBottom: '20em' /* temp walkaround for cutting popups */
-    }
+    className: (0, _classnames().default)(_liveControlPanelModule().default.container)
   }, 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

@@ -1 +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":[]}
+{"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":[]}

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

@@ -3,6 +3,7 @@
   flex-direction: column;
   font-size: 12px;
   padding: 8px 0;
+  width: 100%;
 }
 
 .item {

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

@@ -0,0 +1,15 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.overlay {
+  position: fixed;
+  z-index: $modal-z-index - 1;
+  overflow-y: auto;
+  background: var(--surface-neutral-color, #fff);
+  border: 1px solid var(--border-medium-color, #ededed);
+  border-radius: 8px;
+  box-shadow: var(--bit-shadow-hover-low, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+}
+
+.suppressNativeMenu {
+  display: none !important;
+}

package/dist/ui/compositions-panel/use-overlay.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type OverlayPosition = 'top' | 'bottom';
+export type OverlayStyle = {
+    top?: number;
+    bottom?: number;
+    left: number;
+    maxWidth: number;
+    maxHeight: number;
+} & React.CSSProperties;
+export declare function useOverlay(anchorRef: React.RefObject<HTMLElement>, open: boolean, gap?: number, extraStyle?: React.CSSProperties): {
+    position: OverlayPosition;
+    style: OverlayStyle | null;
+};
+export declare function BitPortal({ children }: {
+    children: React.ReactNode;
+}): React.ReactPortal;

package/dist/ui/compositions-panel/use-overlay.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BitPortal = BitPortal;
+exports.useOverlay = useOverlay;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactDom() {
+  const data = _interopRequireDefault(require("react-dom"));
+  _reactDom = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const GAP = 4;
+function useOverlay(anchorRef, open, gap = GAP, extraStyle) {
+  const [position, setPosition] = _react().default.useState('bottom');
+  const [style, setStyle] = _react().default.useState(null);
+  _react().default.useLayoutEffect(() => {
+    if (!open || !anchorRef.current) return;
+    const rect = anchorRef.current.getBoundingClientRect();
+    const below = window.innerHeight - rect.bottom - gap;
+    const above = rect.top - gap;
+    const shouldFlip = below < 240 && above > below;
+    const pos = shouldFlip ? 'top' : 'bottom';
+    setPosition(pos);
+    setStyle(_objectSpread(_objectSpread({}, extraStyle), {}, {
+      left: rect.left,
+      maxWidth: rect.width,
+      maxHeight: 240,
+      top: pos === 'bottom' ? rect.bottom + gap : undefined,
+      bottom: pos === 'top' ? window.innerHeight - rect.top + gap : undefined
+    }));
+  }, [open]);
+  return {
+    position,
+    style
+  };
+}
+function BitPortal({
+  children
+}) {
+  return /*#__PURE__*/_reactDom().default.createPortal(children, document.body);
+}
+
+//# sourceMappingURL=use-overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_reactDom","e","__esModule","default","ownKeys","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_toPropertyKey","value","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","GAP","useOverlay","anchorRef","open","gap","extraStyle","position","setPosition","React","useState","style","setStyle","useLayoutEffect","current","rect","getBoundingClientRect","below","window","innerHeight","bottom","above","top","shouldFlip","pos","left","maxWidth","width","maxHeight","undefined","BitPortal","children","ReactDOM","createPortal","document","body"],"sources":["use-overlay.ts"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nexport type OverlayPosition = 'top' | 'bottom';\n\nexport type OverlayStyle = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  maxWidth: number;\n  maxHeight: number;\n} & React.CSSProperties;\n\nconst GAP = 4;\n\nexport function useOverlay(\n  anchorRef: React.RefObject<HTMLElement>,\n  open: boolean,\n  gap: number = GAP,\n  extraStyle?: React.CSSProperties\n) {\n  const [position, setPosition] = React.useState<OverlayPosition>('bottom');\n  const [style, setStyle] = React.useState<OverlayStyle | null>(null);\n\n  React.useLayoutEffect(() => {\n    if (!open || !anchorRef.current) return;\n\n    const rect = anchorRef.current.getBoundingClientRect();\n\n    const below = window.innerHeight - rect.bottom - gap;\n    const above = rect.top - gap;\n\n    const shouldFlip = below < 240 && above > below;\n\n    const pos: OverlayPosition = shouldFlip ? 'top' : 'bottom';\n\n    setPosition(pos);\n    setStyle({\n      ...extraStyle,\n      left: rect.left,\n      maxWidth: rect.width,\n      maxHeight: 240,\n      top: pos === 'bottom' ? rect.bottom + gap : undefined,\n      bottom: pos === 'top' ? window.innerHeight - rect.top + gap : undefined,\n    });\n  }, [open]);\n\n  return { position, style };\n}\n\nexport function BitPortal({ children }: { children: React.ReactNode }) {\n  return ReactDOM.createPortal(children, document.body);\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.871",
+  "version": "1.0.873",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.871"
+    "version": "1.0.873"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -54,16 +54,16 @@
     "@teambit/design.inputs.text-area": "0.0.20",
     "@teambit/design.inputs.toggle-switch": "0.0.8",
     "@teambit/design.ui.input.color-picker": "0.0.56",
-    "@teambit/component": "1.0.871",
-    "@teambit/graphql": "1.0.871",
-    "@teambit/dev-files": "1.0.871",
-    "@teambit/envs": "1.0.871",
-    "@teambit/preview": "1.0.871",
-    "@teambit/schema": "1.0.871",
-    "@teambit/scope": "1.0.871",
-    "@teambit/workspace": "1.0.871",
-    "@teambit/component-compare": "1.0.871",
-    "@teambit/ui": "1.0.871"
+    "@teambit/component": "1.0.873",
+    "@teambit/graphql": "1.0.873",
+    "@teambit/dev-files": "1.0.873",
+    "@teambit/envs": "1.0.873",
+    "@teambit/preview": "1.0.873",
+    "@teambit/schema": "1.0.873",
+    "@teambit/scope": "1.0.873",
+    "@teambit/workspace": "1.0.873",
+    "@teambit/component-compare": "1.0.873",
+    "@teambit/ui": "1.0.873"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -76,8 +76,10 @@
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.16.0",
     "@types/react": "^17.0.73",
+    "@types/react-dom": "^17.0.5",
     "@teambit/base-react.navigation.link": "2.0.33"
   },
   "license": "Apache-2.0",

package/ui/compositions-panel/live-control-input.module.scss

@@ -1,3 +1,21 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
 .wrapper {
   padding: 4px 0;
 }
+
+.portalMenu {
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--surface-neutral-color, #fff);
+  border: 1px solid var(--border-medium-color, #ededed);
+  border-radius: 8px;
+  box-shadow: var(--bit-shadow-hover-low);
+  position: fixed;
+  z-index: $modal-z-index - 1;
+}
+
+.portalMenuItem {
+  cursor: pointer;
+  font-family: 'CircularPro', 'Gill Sans', 'Gill Sans MT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}

package/ui/compositions-panel/live-control-input.tsx

@@ -7,13 +7,13 @@ import { InputText } from '@teambit/design.inputs.input-text';
 import { TextArea } from '@teambit/design.inputs.text-area';
 import { Dropdown } from '@teambit/design.inputs.dropdown';
 import { MenuItem } from '@teambit/design.inputs.selectors.menu-item';
-import { ColorPicker } from '@teambit/design.ui.input.color-picker';
+import { ColorPicker, ColorsBox } from '@teambit/design.ui.input.color-picker';
 import { DatePicker } from '@teambit/design.inputs.date-picker';
 import { Toggle } from '@teambit/design.inputs.toggle-switch';
-
-import { type SelectOption } from '@teambit/compositions.ui.composition-live-controls';
+import { useOverlay, BitPortal } from './use-overlay';
 
 import styles from './live-control-input.module.scss';
+import overlayStyles from './overlay.module.scss';
 
 type InputComponentProps = {
   id: string;
@@ -58,46 +58,57 @@ function LongTextInput({ value, onChange }: InputComponentProps) {
 
 function SelectInput({ value, onChange, meta }: InputComponentProps) {
   const [selectedValue, setSelectedValue] = React.useState(value || '');
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLParagraphElement>(null);
 
   React.useEffect(() => {
     setSelectedValue(value || '');
   }, [value]);
 
-  const handleChange = (newValue: any) => {
-    onChange(newValue || '');
-    setSelectedValue(newValue || '');
-  };
-
-  const options: {
-    label: string;
-    value: string;
-  }[] = React.useMemo(() => {
-    if (!meta || !meta.options) return [];
-    return meta.options.map((option: SelectOption) => {
-      if (typeof option === 'string') {
-        return { label: option, value: option };
-      }
-      return option;
-    });
+  const options = React.useMemo(() => {
+    if (!meta?.options) return [];
+    return meta.options.map((o: any) => (typeof o === 'string' ? { label: o, value: o } : o));
   }, [meta]);
 
   const placeholderContent = options.find((o) => o.value === selectedValue)?.label;
 
+  const { position, style } = useOverlay(triggerRef, open, 0, {
+    paddingTop: 8,
+    paddingBottom: 8,
+  });
+
+  const commitSelection = (v: string) => {
+    onChange(v);
+    setSelectedValue(v);
+    setOpen(false);
+  };
+
   return (
-    <p className={classNames(styles.wrapper)}>
-      <Dropdown placeholderContent={placeholderContent}>
-        {options.map((option) => {
-          return (
-            <MenuItem
-              active={option.value === selectedValue}
-              key={option.value}
-              onClick={() => handleChange(option.value)}
-            >
-              {option.label}
-            </MenuItem>
-          );
-        })}
-      </Dropdown>
+    <p ref={triggerRef} className={classNames(styles.wrapper)}>
+      <Dropdown
+        placeholderContent={placeholderContent}
+        open={open}
+        onChange={(_, isOpen) => setOpen(isOpen)}
+        position={position}
+        dropClass={overlayStyles.suppressNativeMenu}
+      />
+
+      {open && style && (
+        <BitPortal>
+          <div className={overlayStyles.overlay} style={style} onMouseDown={(e) => e.stopPropagation()}>
+            {options.map((option) => (
+              <MenuItem
+                className={styles.portalMenuItem}
+                key={option.value}
+                active={option.value === selectedValue}
+                onClick={() => commitSelection(option.value)}
+              >
+                {option.label}
+              </MenuItem>
+            ))}
+          </div>
+        </BitPortal>
+      )}
     </p>
   );
 }
@@ -124,6 +135,43 @@ function NumberInput({ value, onChange }: InputComponentProps) {
   return <InputText type="number" value={inputValue} onChange={handleChange} />;
 }
 
+function ColorPickerPortal(props: any) {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLDivElement>(null);
+
+  const { position, style } = useOverlay(triggerRef, open, 4, {
+    padding: 16,
+  });
+
+  return (
+    <div ref={triggerRef}>
+      <ColorPicker
+        {...props}
+        open={open}
+        onChange={(_, isOpen) => setOpen(isOpen)}
+        position={position}
+        dropClass={overlayStyles.suppressNativeMenu}
+      />
+
+      {open && style && (
+        <BitPortal>
+          <div className={overlayStyles.overlay} style={style} onMouseDown={(e) => e.stopPropagation()}>
+            <ColorsBox
+              onColorSelect={(color: string) => {
+                props.onColorSelect?.(color);
+                setOpen(false);
+              }}
+              colorsList={props.colorsList}
+              showNoColor={props.showNoColor}
+              selected={props.value ?? ''}
+            />
+          </div>
+        </BitPortal>
+      )}
+    </div>
+  );
+}
+
 function ColorInput({ value, onChange }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState(value || '');
 
@@ -131,14 +179,14 @@ function ColorInput({ value, onChange }: InputComponentProps) {
     setInputValue(value || '');
   }, [value]);
 
-  const handleChange = (newValue: string) => {
-    onChange(newValue || '');
-    setInputValue(newValue || '');
+  const handleChange = (v: string) => {
+    onChange(v);
+    setInputValue(v);
   };
 
   return (
-    <p className={classNames(styles.wrapper)}>
-      <ColorPicker value={inputValue} onColorSelect={handleChange} allowCustomColor />
+    <p className={styles.wrapper}>
+      <ColorPickerPortal value={inputValue} onColorSelect={handleChange} allowCustomColor />
     </p>
   );
 }

package/ui/compositions-panel/live-control-panel.module.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   font-size: 12px;
   padding: 8px 0;
+  width: 100%;
 }
 
 .item {

package/ui/compositions-panel/live-control-panel.tsx

@@ -15,10 +15,7 @@ export function LiveControls({
   onChange: (key: string, value: any) => void;
 }) {
   return (
-    <ul
-      className={classNames(styles.container)}
-      style={{ paddingBottom: '20em' /* temp walkaround for cutting popups */ }}
-    >
+    <ul className={classNames(styles.container)}>
       {defs.map((field) => {
         const key = field.id;
         const InputComponent = getInputComponent(field.input || 'text');

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

@@ -0,0 +1,15 @@
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.overlay {
+  position: fixed;
+  z-index: $modal-z-index - 1;
+  overflow-y: auto;
+  background: var(--surface-neutral-color, #fff);
+  border: 1px solid var(--border-medium-color, #ededed);
+  border-radius: 8px;
+  box-shadow: var(--bit-shadow-hover-low, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
+}
+
+.suppressNativeMenu {
+  display: none !important;
+}

package/ui/compositions-panel/use-overlay.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export type OverlayPosition = 'top' | 'bottom';
+
+export type OverlayStyle = {
+  top?: number;
+  bottom?: number;
+  left: number;
+  maxWidth: number;
+  maxHeight: number;
+} & React.CSSProperties;
+
+const GAP = 4;
+
+export function useOverlay(
+  anchorRef: React.RefObject<HTMLElement>,
+  open: boolean,
+  gap: number = GAP,
+  extraStyle?: React.CSSProperties
+) {
+  const [position, setPosition] = React.useState<OverlayPosition>('bottom');
+  const [style, setStyle] = React.useState<OverlayStyle | null>(null);
+
+  React.useLayoutEffect(() => {
+    if (!open || !anchorRef.current) return;
+
+    const rect = anchorRef.current.getBoundingClientRect();
+
+    const below = window.innerHeight - rect.bottom - gap;
+    const above = rect.top - gap;
+
+    const shouldFlip = below < 240 && above > below;
+
+    const pos: OverlayPosition = shouldFlip ? 'top' : 'bottom';
+
+    setPosition(pos);
+    setStyle({
+      ...extraStyle,
+      left: rect.left,
+      maxWidth: rect.width,
+      maxHeight: 240,
+      top: pos === 'bottom' ? rect.bottom + gap : undefined,
+      bottom: pos === 'top' ? window.innerHeight - rect.top + gap : undefined,
+    });
+  }, [open]);
+
+  return { position, style };
+}
+
+export function BitPortal({ children }: { children: React.ReactNode }) {
+  return ReactDOM.createPortal(children, document.body);
+}