@teambit/compositions 1.0.668 → 1.0.670

package/dist/{preview-1753833698619.js → preview-1753890306000.js}

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

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

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

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

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

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

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

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

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

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

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

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

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.668",
+  "version": "1.0.670",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.668"
+    "version": "1.0.670"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -27,10 +27,9 @@
     "@teambit/design.ui.input.option-button": "1.0.0",
     "@teambit/design.ui.separator": "0.0.354",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.17",
-    "@teambit/design.ui.tooltip": "0.0.378",
+    "@teambit/docs.ui.queries.get-docs": "0.0.510",
     "@teambit/documenter.theme.theme-context": "4.0.3",
     "@teambit/documenter.ui.heading": "4.1.1",
-    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.228",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.199",
     "@teambit/documenter.ui.property-table": "4.1.11",
     "@teambit/mdx.ui.mdx-layout": "1.0.11",
@@ -41,29 +40,30 @@
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.518",
-    "@teambit/design.inputs.date-picker": "0.0.2",
+    "@teambit/design.inputs.date-picker": "0.0.3",
     "@teambit/design.inputs.dropdown": "1.3.1",
     "@teambit/design.inputs.input-text": "1.1.3",
     "@teambit/design.inputs.selectors.menu-item": "1.1.0",
     "@teambit/design.inputs.text-area": "0.0.19",
     "@teambit/design.inputs.toggle-switch": "0.0.7",
     "@teambit/design.ui.input.color-picker": "0.0.56",
-    "@teambit/component": "1.0.668",
-    "@teambit/graphql": "1.0.668",
-    "@teambit/cli": "0.0.1245",
-    "@teambit/component.sources": "0.0.110",
-    "@teambit/dev-files": "1.0.668",
-    "@teambit/envs": "1.0.668",
-    "@teambit/legacy.consumer-component": "0.0.59",
-    "@teambit/preview": "1.0.668",
-    "@teambit/schema": "1.0.668",
-    "@teambit/scope": "1.0.668",
-    "@teambit/workspace": "1.0.668",
-    "@teambit/docs.ui.queries.get-docs": "0.0.510",
-    "@teambit/panels": "0.0.1247",
-    "@teambit/preview.ui.component-preview": "1.0.26",
-    "@teambit/component-compare": "1.0.668",
-    "@teambit/ui": "1.0.668"
+    "@teambit/component": "1.0.670",
+    "@teambit/graphql": "1.0.670",
+    "@teambit/cli": "0.0.1247",
+    "@teambit/component.sources": "0.0.111",
+    "@teambit/dev-files": "1.0.670",
+    "@teambit/envs": "1.0.670",
+    "@teambit/legacy.consumer-component": "0.0.60",
+    "@teambit/preview": "1.0.670",
+    "@teambit/schema": "1.0.670",
+    "@teambit/scope": "1.0.670",
+    "@teambit/workspace": "1.0.670",
+    "@teambit/design.ui.tooltip": "0.0.379",
+    "@teambit/panels": "0.0.1249",
+    "@teambit/preview.ui.component-preview": "1.0.27",
+    "@teambit/ui-foundation.ui.buttons.collapser": "0.0.229",
+    "@teambit/component-compare": "1.0.670",
+    "@teambit/ui": "1.0.670"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

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

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

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

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import React from 'react';
 import classNames from 'classnames';
 
@@ -9,6 +11,8 @@ import { ColorPicker } 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 styles from './live-control-input.module.scss';
 
 type InputComponentProps = {
@@ -20,110 +24,174 @@ type InputComponentProps = {
 
 type InputComponent = React.FC<InputComponentProps>;
 
-function ShortTextInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function ShortTextInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
-  return <InputText id={id} value={inputValue} onChange={handleChange} />;
+
+  return <InputText value={inputValue} onChange={handleChange} />;
 }
 
-function LongTextInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function LongTextInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
-  return <TextArea id={id} value={inputValue} onChange={handleChange} />;
+
+  return <TextArea value={inputValue} onChange={handleChange} />;
 }
 
-function SelectInput({ id, value, onChange, meta }: InputComponentProps) {
-  const [selectedValue, setSelectedValue] = React.useState(value);
+function SelectInput({ value, onChange, meta }: InputComponentProps) {
+  const [selectedValue, setSelectedValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setSelectedValue(value || '');
+  }, [value]);
+
   const handleChange = (newValue: any) => {
-    onChange(newValue);
-    setSelectedValue(newValue);
+    onChange(newValue || '');
+    setSelectedValue(newValue || '');
   };
-  const placeholderContent = meta.options.find((o: any) => o.value === selectedValue)?.label;
+
+  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;
+    });
+  }, [meta]);
+
+  const placeholderContent = options.find((o) => o.value === selectedValue)?.label;
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <Dropdown id={id} placeholderContent={placeholderContent}>
-        {meta.options.map((option: any) => (
-          <MenuItem
-            active={option.value === selectedValue}
-            key={option.value}
-            onClick={() => handleChange(option.value)}
-          >
-            {option.label}
-          </MenuItem>
-        ))}
+      <Dropdown placeholderContent={placeholderContent}>
+        {options.map((option) => {
+          return (
+            <MenuItem
+              active={option.value === selectedValue}
+              key={option.value}
+              onClick={() => handleChange(option.value)}
+            >
+              {option.label}
+            </MenuItem>
+          );
+        })}
       </Dropdown>
     </p>
   );
 }
 
-function NumberInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function NumberInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || 0);
+
+  React.useEffect(() => {
+    setInputValue(value || 0);
+  }, [value]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     if (!isNaN(Number(newValue))) {
-      onChange(Number(newValue));
-      setInputValue(Number(newValue));
+      onChange(Number(newValue) || 0);
+      setInputValue(Number(newValue) || 0);
     } else {
       // TODO: render error message
       // eslint-disable-next-line no-console
       console.error('Invalid number input', newValue);
     }
   };
-  return <InputText id={id} type="number" value={inputValue} onChange={handleChange} />;
+
+  return <InputText type="number" value={inputValue} onChange={handleChange} />;
 }
 
-function ColorInput({ id, value, onChange }: InputComponentProps) {
-  const [inputValue, setInputValue] = React.useState(value);
+function ColorInput({ value, onChange }: InputComponentProps) {
+  const [inputValue, setInputValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
   const handleChange = (newValue: string) => {
-    onChange(newValue);
-    setInputValue(newValue);
+    onChange(newValue || '');
+    setInputValue(newValue || '');
   };
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <ColorPicker id={id} value={inputValue} onColorSelect={handleChange} allowCustomColor />
+      <ColorPicker value={inputValue} onColorSelect={handleChange} allowCustomColor />
     </p>
   );
 }
 
-function DateInput({ id, value, onChange }: InputComponentProps) {
+function DateInput({ value, onChange }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState<Date | null>(new Date(value));
+
+  React.useEffect(() => {
+    setInputValue(new Date(value));
+  }, [value]);
+
   const handleChange = (newValue: Date | null) => {
     if (newValue) {
       onChange(newValue.toISOString().split('T')[0]);
     }
     setInputValue(newValue);
   };
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <DatePicker id={id} date={inputValue} onChange={handleChange} />
+      <DatePicker date={inputValue} onChange={handleChange} />
     </p>
   );
 }
 
-function ToggleInput({ id, value, onChange }: InputComponentProps) {
-  const [isChecked, setIsChecked] = React.useState(value);
+function ToggleInput({ value, onChange }: InputComponentProps) {
+  const [isChecked, setIsChecked] = React.useState(!!value);
+
+  React.useEffect(() => {
+    setIsChecked(!!value);
+  }, [value]);
+
   const handleChange = () => {
     setIsChecked(!isChecked);
     onChange(!isChecked);
   };
+
   return (
     <p className={classNames(styles.wrapper)}>
-      <Toggle id={id} defaultChecked={isChecked} onChange={handleChange} />
+      <Toggle defaultChecked={isChecked} onChange={handleChange} />
     </p>
   );
 }
 
-function JsonInput({ id, value, onChange }: InputComponentProps) {
+function JsonInput({ value, onChange }: InputComponentProps) {
   const [inputValue, setInputValue] = React.useState(JSON.stringify(value, null, 2));
+
+  React.useEffect(() => {
+    setInputValue(JSON.stringify(value, null, 2));
+  }, [value]);
+
   const [message, setMessage] = React.useState('');
+
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
     try {
@@ -135,9 +203,10 @@ function JsonInput({ id, value, onChange }: InputComponentProps) {
     }
     setInputValue(newValue);
   };
+
   return (
     <div>
-      <TextArea id={id} value={inputValue} onChange={handleChange} />
+      <TextArea value={inputValue} onChange={handleChange} />
       {message && <div style={{ color: 'red' }}>{message}</div>}
     </div>
   );

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

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

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

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