@integry/sdk 4.5.2 → 4.5.4

package/src/components/CheckboxGroup/index.ts

@@ -0,0 +1,190 @@
+import { html } from 'htm/preact';
+import { useContext, useEffect, useRef, useState } from 'preact/hooks';
+
+import AppContext from '@/contexts/AppContext';
+import { Checkbox } from './Checkbox';
+import { Label } from '../Label';
+
+import styles from './styles.module.scss';
+import { ErrorMessage } from '../ErrorMessage';
+import { ThreeDotLoader } from '../ThreeDotLoader';
+
+interface CheckboxItem {
+  id: string;
+  value: string;
+}
+
+export interface CheckboxGroupProps {
+  fieldId: string;
+  title: string;
+  description: string;
+  isDynamic: boolean;
+  dataSrcEndpoint?: string;
+  ariaLabel: string;
+  value: string;
+  initialOptions?: CheckboxItem[];
+  selectedItems?: string[];
+  endpointData: string;
+  isRequired?: boolean;
+  showStepValidation?: boolean;
+  onChange?: (data: string) => void;
+  isReadOnly?: boolean;
+  isChanged?: boolean;
+}
+
+/**
+ * RadioGroup component
+ *
+ */
+export const CheckboxGroup = (props: CheckboxGroupProps) => {
+  const {
+    fieldId,
+    title,
+    description,
+    value,
+    ariaLabel,
+    selectedItems = [],
+    isDynamic,
+    endpointData,
+    initialOptions = [],
+    dataSrcEndpoint,
+    isRequired = false,
+    showStepValidation = false,
+    onChange = () => null,
+    isReadOnly = false,
+    isChanged = false,
+  } = props;
+
+  const indicesRef = useRef(selectedItems);
+
+  const [loading, setLoading] = useState(isDynamic);
+  const [selectedItemIds, setSelectedItemIds] = useState<string[]>(
+    selectedItems,
+  );
+
+  const [error, setError] = useState<string | null>(null);
+
+  const [parsedOptions, setParsedOptions] = useState<CheckboxItem[]>(
+    Array.isArray(initialOptions) ? initialOptions : [],
+  );
+
+  const context = useContext(AppContext);
+
+  useEffect(() => {
+    if (value) {
+      if (value === '0' && parsedOptions.length === 1) return;
+      if (value === '1' && parsedOptions.length === 1) {
+        setSelectedItemIds([parsedOptions[0].id]);
+      } else {
+        setSelectedItemIds(value.split(',').map((el) => el.trim()));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (indicesRef.current !== selectedItemIds) {
+      if (parsedOptions.length < 2) {
+        onChange(selectedItemIds.length === 1 ? '1' : '0');
+      } else {
+        onChange(selectedItemIds.join(','));
+      }
+    }
+  }, [selectedItemIds, parsedOptions]);
+
+  useEffect(() => {
+    if (isDynamic) {
+      if (dataSrcEndpoint) {
+        // eslint-disable-next-line no-use-before-define
+        fetchDynamicData();
+      } else {
+        setParsedOptions(initialOptions);
+        setLoading(false);
+      }
+    } else {
+      setParsedOptions(initialOptions);
+    }
+  }, []);
+
+  const handleChange = (itemId: string) => {
+    if (selectedItemIds.indexOf(itemId) > -1) {
+      setSelectedItemIds((prev) => prev.filter((el) => el !== itemId));
+    } else {
+      setSelectedItemIds([...selectedItemIds, itemId]);
+    }
+  };
+
+  const fetchDynamicData = (): void => {
+    if (dataSrcEndpoint) {
+      setLoading(true);
+      let data;
+      try {
+        data = JSON.parse(endpointData);
+      } catch (parseErr) {
+        data = '';
+      }
+      // call dynamic endpoint
+      context?.apiHandler
+        .callDynamicDataEndpoint<CheckboxItem[]>(new URL(dataSrcEndpoint), data)
+        .then((res) => {
+          if (res) setParsedOptions(res);
+          else setError(`Error loading options`);
+        })
+        .catch((err) => {
+          console.error(err);
+          setError('Error loading options');
+        })
+        .finally(() => setLoading(false));
+    }
+  };
+
+  const handleRefreshClick = (): void => {
+    fetchDynamicData();
+    setSelectedItemIds([]);
+  };
+
+  return html`
+    <div class="${styles.checkboxGroup}">
+      <fieldset>
+        <${Label} isRequired=${isRequired}
+        labelTag=${isReadOnly && isChanged ? 'Changed' : ''}
+        allowRefresh=${isDynamic && dataSrcEndpoint}
+        handleRefreshClick=${handleRefreshClick} //>
+        <div
+          class=${styles.checkboxGroupWrap}
+          role="group"
+          aria-labelledby=${ariaLabel}
+        >
+          ${loading
+            ? html`<div style="margin: 20px 0;">
+                <${ThreeDotLoader} color="#999" />
+              </div>`
+            : html`
+                ${error
+                  ? html`<div style="margin: 20px 0;">
+                      <${ErrorMessage}>${error}<//>
+                    </div>`
+                  : html`
+                      ${parsedOptions?.map(
+                        (el) => html`
+                          <${Checkbox}
+                            fieldId=${fieldId}
+                            id=${el.id}
+                            value=${el.value}
+                            isChecked=${selectedItemIds.indexOf(el.id) > -1}
+                            handleChange=${handleChange}
+                            isReadOnly=${isReadOnly}
+                            title=${title}
+                          ><//>
+                        `,
+                      )}
+                    `}
+              `}
+        </div>
+      </fieldset>
+      ${showStepValidation &&
+      selectedItemIds.length < 1 &&
+      isRequired &&
+      html` <${ErrorMessage}>Please select an option</${ErrorMessage}>`}
+    </div>
+  `;
+};

package/src/components/CheckboxGroup/styles.module.scss

@@ -0,0 +1,63 @@
+.checkboxGroup {
+  fieldset {
+    border: none;
+    padding: 0;
+  }
+  .checkboxGroupWrap {
+    margin-top: 14px;
+    width: fit-content;
+  }
+}
+
+.checkboxWrap {
+  margin-bottom: 14px;
+  width: fit-content;
+  .readonlyHint {
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    position: absolute;
+  }
+}
+
+.checkbox {
+  position: relative;
+  display: flex;
+  margon-bottom: 2px;
+  align-items: center;
+  margin-top: 12px;
+  .button {
+    display: block;
+    height: 20px;
+    width: 20px;
+    background-color: transparent;
+    svg {
+    }
+  }
+  input[type='checkbox'] {
+    opacity: 0;
+    margin: 0;
+    display: none;
+  }
+  label {
+    display: flex;
+    flex: 1;
+    cursor: pointer;
+    font-size: 14px;
+    color: #333333;
+  }
+  .text {
+    display: flex;
+    color: #333;
+    font-size: 14px;
+    padding-left: 10px;
+    font-weight: 400;
+    line-height: 26px;
+    margin-top: -2px;
+  }
+  .description {
+    font-size: 12px;
+    color: #222;
+    margin-left: 12px;
+  }
+}

package/src/components/CollapsedMenu/index.ts

@@ -0,0 +1,101 @@
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+import { html } from 'htm/preact';
+import { useCallback, useRef, useState } from 'preact/hooks';
+
+import styles from './styles.module.scss';
+
+interface Option {
+  id: string;
+  label: string;
+}
+
+interface CollapsedMenuProps {
+  options: Option[];
+  onOptionSelect(option: Option): void;
+  Icon?: preact.VNode;
+  className?: string;
+  verticalIcon?: boolean;
+}
+
+const CollapsedMenu = (props: CollapsedMenuProps) => {
+  const {
+    options = [],
+    onOptionSelect = () => null,
+    Icon = null,
+    className,
+    verticalIcon = false,
+  } = props;
+
+  const popupRef = useRef<HTMLDivElement>();
+
+  const [open, setOpen] = useState(false);
+
+  const onClickAway = useCallback(() => setOpen(false), []);
+
+  useOnClickOutside(popupRef, onClickAway);
+
+  const onClick = (option: Option) => {
+    setOpen(false);
+    onOptionSelect(option);
+  };
+
+  return html`
+    <div
+      ref=${popupRef}
+      class=${`${styles.collapsedMenu} ${className ? styles[className] : ''}`}
+    >
+      <div
+        class=${styles.trigger}
+        onclick=${(e: MouseEvent) => {
+          e.stopPropagation();
+          setOpen((prev) => !prev);
+        }}
+      >
+        ${Icon
+          ? html`<${Icon} />`
+          : html`<svg
+              style="${verticalIcon ? 'rotate: 90deg;' : ''}"
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M4.5 11C5.32843 11 6 10.3284 6 9.5C6 8.67157 5.32843 8 4.5 8C3.67157 8 3 8.67157 3 9.5C3 10.3284 3.67157 11 4.5 11Z"
+                fill="#999999"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M9.5 11C10.3284 11 11 10.3284 11 9.5C11 8.67157 10.3284 8 9.5 8C8.67157 8 8 8.67157 8 9.5C8 10.3284 8.67157 11 9.5 11Z"
+                fill="#999999"
+              />
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M14.5 11C15.3284 11 16 10.3284 16 9.5C16 8.67157 15.3284 8 14.5 8C13.6716 8 13 8.67157 13 9.5C13 10.3284 13.6716 11 14.5 11Z"
+                fill="#999999"
+              />
+            </svg>`}
+      </div>
+      <div class="${styles.popup} ${open ? styles.open : ''}">
+        <div class=${styles.optionWrap}>
+          ${options.map(
+            (el) =>
+              html`<div class=${styles.option} onclick=${(event: any) => {
+                event.stopPropagation();
+                onClick(el)
+              }}>
+                ${el.label}
+              </div>`,
+          )}
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+export { CollapsedMenu, CollapsedMenuProps };

package/src/components/CollapsedMenu/styles.module.scss

@@ -0,0 +1,46 @@
+.collapsedMenu {
+  position: relative;
+  .trigger {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+    width: max-content;
+  }
+  .popup {
+    display: none;
+    position: absolute;
+    width: 150px;
+    top: 20px;
+    left: auto;
+    margin-right: 20px;
+    right: 0;
+    z-index: 99;
+    color: #6d6f7b;
+    &.open {
+      display: block;
+    }
+    .optionWrap {
+      background: #fff;
+      padding: 4px 0;
+      border: 1px solid #f3f3f3;
+      box-shadow: 0px 2px 7px rgba(162, 162, 162, 0.25);
+      border-radius: 4px;
+      .option {
+        padding: 12px 14px;
+        font-size: 12px;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &:hover {
+          background: #eeeeee;
+        }
+      }
+    }
+  }
+}
+.instanceMenu {
+  .popup {
+    right: -10px;
+    width: 109px;
+  }
+}

package/src/components/ConfigureFieldWrapper/index.ts

@@ -0,0 +1,85 @@
+import { html } from 'htm/preact';
+import { StoreType } from '@/types/store';
+import { actionFunctions } from '@/store/actionFunctions';
+import { useContext } from 'preact/hooks';
+import AppContext from '@/contexts/AppContext';
+import { TemplateField } from '@/interfaces';
+
+import { connect } from 'unistore/preact';
+import styles from './styles.module.scss';
+
+interface ConfigureFieldWrapperPropsType extends StoreType {
+  children: Element;
+  field: TemplateField;
+  genericData: StoreType['genericData'];
+  editFieldData: StoreType['editFieldData'];
+  stepId: string | number;
+  templateId: string | number;
+}
+// interface for GearIcon
+
+const GearIcon = () => html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.2333 10.6576C13.2668 10.5914 13.2957 10.5252 13.3269 10.4628C13.3581 10.4004 13.3794 10.354 13.403 10.2992L13.4182 10.2619V10.2406C13.4434 10.1782 13.4647 10.1157 13.4883 10.0457C13.5119 9.9757 13.537 9.91938 13.5606 9.85088V9.80826L16 9.36379V6.73109L13.598 6.23257L13.5843 6.19376V6.17854C13.5607 6.10851 13.5356 6.04002 13.5105 5.97228C13.4853 5.90378 13.4716 5.85735 13.448 5.80103L13.4328 5.76373V5.74242C13.4077 5.68001 13.378 5.62141 13.3506 5.56128C13.3232 5.50115 13.2958 5.43646 13.2646 5.36644L13.2532 5.34513V5.33143L14.6247 3.30995L12.76 1.44526L10.7103 2.79165L10.673 2.77415H10.6593C10.5931 2.74066 10.5268 2.71174 10.4644 2.68053C10.402 2.64932 10.3556 2.62802 10.3008 2.60442L10.2635 2.5892H10.2422C10.1798 2.56408 10.1174 2.54277 10.0473 2.51918C9.97733 2.49558 9.92253 2.47047 9.8525 2.44916H9.80988L9.36387 0H6.73115L6.23263 2.402L6.19381 2.4157H6.17859C6.10857 2.4393 6.04007 2.46441 5.97233 2.48953C5.90383 2.51465 5.8574 2.52835 5.80108 2.55194L5.76378 2.56716H5.74247C5.68006 2.59228 5.62146 2.62196 5.56133 2.64936C5.5012 2.67676 5.43651 2.70416 5.36649 2.73537L5.34137 2.74907H5.32767L3.31007 1.37528L1.44537 3.23997L2.79177 5.2897L2.77427 5.32699V5.34069C2.74078 5.40691 2.71186 5.47312 2.68065 5.53553C2.64945 5.59794 2.62814 5.64437 2.60302 5.70145L2.5878 5.73875V5.76006C2.56268 5.82247 2.54137 5.88488 2.51777 5.9549C2.49418 6.02492 2.46906 6.08124 2.44547 6.14974V6.19236L0 6.63608V9.26877L2.40202 9.76577L2.41572 9.80459V9.81981C2.43931 9.88983 2.46443 9.95833 2.48955 10.0261C2.51467 10.0946 2.52836 10.141 2.55196 10.1973L2.56718 10.2346V10.2559C2.5923 10.3183 2.62198 10.3769 2.64938 10.4394C2.67678 10.5018 2.70418 10.5642 2.7331 10.6342L2.74832 10.6616V10.6753L1.37529 12.6899L3.23999 14.5546L5.28973 13.2082L5.32703 13.2258H5.34073C5.40694 13.2592 5.47316 13.2882 5.53557 13.3194C5.59798 13.3506 5.64441 13.3719 5.70149 13.397L5.73879 13.4122H5.7601C5.82251 13.4373 5.88492 13.4586 5.95494 13.4822C6.02496 13.5058 6.08128 13.531 6.14978 13.5545H6.1924L6.63612 16H9.26884L9.76584 13.598L9.80466 13.5843H9.81988C9.8899 13.5607 9.9584 13.5356 10.0261 13.5105C10.0946 13.4854 10.1411 13.4717 10.1974 13.4481L10.2347 13.4328H10.256C10.3184 13.4077 10.377 13.378 10.4371 13.3506C10.4973 13.3232 10.562 13.2958 10.632 13.2646L10.6533 13.2532H10.667L12.69 14.6247L14.5547 12.76L13.2083 10.7103L13.2258 10.673L13.2333 10.6576ZM8.00002 11.4408C7.08745 11.4408 6.21218 11.0785 5.56682 10.4331C4.92146 9.7877 4.55911 8.91244 4.55911 7.99994C4.55911 7.08744 4.92141 6.21211 5.56682 5.56676C6.21224 4.9214 7.08751 4.55906 8.00002 4.55906C8.91252 4.55906 9.78785 4.92135 10.4332 5.56676C11.0786 6.21217 11.4409 7.08744 11.4409 7.99994C11.4409 8.91244 11.0786 9.78776 10.4332 10.4331C9.78779 11.0785 8.91252 11.4408 8.00002 11.4408Z"
+      fill="#4250F0"
+    />
+  </svg>
+`;
+
+const ConfigureFieldWrapper = (props: ConfigureFieldWrapperPropsType) => {
+  const context = useContext(AppContext);
+  const {
+    children,
+    field,
+    genericData,
+    editFieldData,
+    userConfig,
+    stepId,
+    templateId,
+  } = props;
+  const editField = () => {
+    props.setEditFieldData({ fieldId: field.id });
+  };
+  const editFieldId = editFieldData?.fieldId || 0;
+  const editingCurrentField = editFieldId === field.id;
+  const blurryOverlayClass =
+    !!editFieldId && editFieldId !== field.id ? `${styles.blur}` : '';
+  const disableConfigureButtonClass =
+    !!editFieldId && !editingCurrentField ? `${styles.disabled}` : '';
+
+  return userConfig?.viewAsIU
+    ? html`
+        <div class=${styles.configureFieldWrapper}>
+          <div class=${`${styles.fieldOverlay}  ${blurryOverlayClass}`} />
+          ${userConfig.viewAsIU &&
+          html`${editingCurrentField
+            ? html`<div class=${styles.configuring}>Configuring...</div>`
+            : html`<div
+                class=${`${styles.configureButtonWrapper} ${disableConfigureButtonClass}`}
+                onClick=${editField}
+              >
+                <${GearIcon}//>
+                <div>Configure</div>
+              </div>`} `}
+          ${children}
+        </div>
+      `
+    : html`${children}`;
+};
+
+export default connect<
+  ConfigureFieldWrapperPropsType,
+  ConfigureFieldWrapperPropsType,
+  StoreType,
+  unknown
+>(
+  ['genericData', 'editFieldData', 'userConfig'],
+  actionFunctions,
+)(ConfigureFieldWrapper);

package/src/components/ConfigureFieldWrapper/styles.module.scss

@@ -0,0 +1,57 @@
+.configureFieldWrapper {
+  position: relative;
+  .configuring {
+    position: absolute;
+    right: 0;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: right;
+    color: #333333;
+  }
+  .configureButtonWrapper {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    gap: 4px;
+    cursor: pointer;
+    z-index: 1;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 20px;
+    color: #4250f0;
+    align-items: center;
+    .gearIcon {
+      width: 12px;
+      height: 12px;
+    }
+    &.disabled {
+      cursor: default;
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  .fieldOverlay {
+    // center align text
+    background: #ffffff;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.blur {
+      // #E6E6E6 rgba(230, 230, 230, 1)
+      background: #ffffff;
+      opacity: 0.5;
+    }
+    &.hidden {
+      background: rgba(230, 230, 230, 1);
+      opacity: 0.9;
+    }
+  }
+}

package/src/components/EditableText/index.ts

@@ -0,0 +1,121 @@
+import { html } from 'htm/preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { OverflowTooltip } from '@/components/OverflowTooltip';
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+import useHover from '@/hooks/useHover';
+
+import styles from './styles.module.scss';
+
+interface EditableTextProps {
+  value: string;
+  customStyles?: {
+    wrapperClassName?: string;
+    inputClassName?: string;
+  };
+  handleChange?: (value: string) => void;
+  handleBlur?: () => void;
+}
+
+/**
+ * EditableText component
+ *
+ */
+const EditableText = (props: EditableTextProps) => {
+  const { value, customStyles, handleChange = () => null } = props;
+
+  const [isEditing, setIsEditing] = useState(false);
+  const inputRef = useRef<HTMLButtonElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const isHovered = useHover(containerRef, isEditing);
+
+  const determineChangedValue = () => {
+    const latestVal = inputRef.current?.value.trim() || '';
+    if (latestVal === '') {
+      // revert to original value
+      handleChange(value);
+    } else if (latestVal !== value) {
+      // let the update go through if value changed
+      handleChange(latestVal);
+    }
+  };
+
+  useOnClickOutside(containerRef, () => {
+    if (isEditing) {
+      setIsEditing(false);
+      determineChangedValue();
+    }
+  });
+
+  // If released key is our target key then set to false
+  const upHandler = ({ key }: { key: string }): void => {
+    if (key === 'Enter') {
+      // we need to set editable to false
+      setIsEditing(false);
+      determineChangedValue();
+    } else if (key === 'Escape') {
+      setIsEditing(false);
+      // revert to original value
+      // determineChangedValue();
+    }
+  };
+
+  useEffect(() => {
+    if (inputRef && inputRef.current && isEditing === true) {
+      inputRef.current.value = value;
+      inputRef.current.focus();
+      if (inputRef && inputRef.current) {
+        inputRef.current?.addEventListener('keyup', upHandler);
+      }
+    }
+    // Remove event listeners on cleanup
+    return () => {
+      if (inputRef && inputRef.current) {
+        inputRef.current.removeEventListener('keyup', upHandler);
+      }
+    };
+  }, [isEditing, inputRef]);
+
+  const handleEditClick = (e: MouseEvent) => {
+    if (e.currentTarget instanceof HTMLButtonElement) {
+      setIsEditing((prev) => !prev);
+    }
+  };
+
+  return html`
+    <div
+      ref=${containerRef}
+      class="${styles.editableTextWrapper} ${customStyles?.wrapperClassName}"
+      style="${isHovered ? 'grid-template-columns: minmax(20px, 1fr) 30px;' : ''}"
+    >
+      ${isEditing
+        ? html`<input
+            class="${styles.input} ${customStyles?.inputClassName}"
+            ref=${inputRef}
+          />`
+        : html` <${OverflowTooltip} text=${value} /> `}
+      ${!isEditing &&
+      isHovered &&
+      html`
+        <button class=${styles.editButton} onclick=${handleEditClick}>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M1.22758 11.3122C1.1985 11.327 1.15461 11.327 1.11071 11.327L1.1107 11.327C1.00864 11.327 0.891777 11.2831 0.803982 11.1953C0.687111 11.0784 0.643213 10.9034 0.687111 10.7574L1.57761 7.70745C1.63634 7.54667 1.72356 7.38648 1.84043 7.26961L8.11669 0.979047C8.51063 0.585109 9.16739 0.585109 9.56133 0.979047L11.006 2.42368C11.1958 2.61294 11.2978 2.86152 11.2978 3.13858C11.2978 3.41564 11.1958 3.67846 11.006 3.86831L4.71539 10.1589C4.59852 10.2906 4.43833 10.3778 4.27756 10.4217L1.22758 11.3122ZM8.72894 4.92028L7.0796 3.27095L2.74516 7.6054L4.39449 9.25473L8.72894 4.92028ZM8.75798 1.59257C8.78706 1.56349 8.83096 1.54867 8.86003 1.54867C8.90393 1.54867 8.933 1.56349 8.96208 1.59257L10.4067 3.0372C10.4358 3.0811 10.4506 3.12499 10.4506 3.13925C10.4506 3.15407 10.4506 3.21222 10.4067 3.2413L9.35659 4.29256L7.70725 2.64322L8.75798 1.59257ZM3.60653 9.69257L2.29302 8.37905L1.75316 10.2325L3.60653 9.69257Z"
+              fill="#4250f0"
+            />
+          </svg>
+        </button>
+      `}
+    </div>
+  `;
+};
+
+export { EditableText, EditableTextProps };

package/src/components/EditableText/styles.module.scss

@@ -0,0 +1,38 @@
+.editableTextWrapper {
+  display: flex;
+  width: 100%;
+  .input,
+  .value {
+    display: block;
+    display: flex;
+    align-items: center;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+  }
+  .input {
+    flex: 1;
+    overflow: visible;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    &:focus {
+      outline-offset: 0;
+    }
+  }
+  .input,
+  .editButton {
+    border: 0;
+    outline: 0;
+    background: none;
+    box-shadow: none;
+    text-shadow: none;
+  }
+  .editButton {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    margin-left: 4px;
+  }
+}