@poirazis/supercomponents-shared 1.0.0 → 1.0.1

package/src/lib/SuperTableCells/CellOptions.svelte

@@ -23,7 +23,6 @@
   let timer;
   let picker;
   let search;
-  let value_dom;
 
   const colors = derivedMemo(options, ($options) => {
     let obj = {};
@@ -161,6 +160,8 @@
       _enter() {},
       focus(e) {
         if (!cellOptions.readonly && !cellOptions.disabled) {
+          // Open the popup if the focus in came from a TAB
+          editorState.open();
           return "Editing";
         }
       },
@@ -170,7 +171,6 @@
         originalValue = JSON.stringify(
           Array.isArray(value) ? value : value ? [value] : []
         );
-        if (controlType != "inputSelect") editorState.open();
         dispatch("enteredit");
       },
       _exit() {
@@ -205,7 +205,6 @@
   let editorState = fsm("Closed", {
     "*": {
       close() {
-        value_dom?.focus();
         return "Closed";
       },
       toggleOption(idx) {
@@ -258,11 +257,9 @@
         } else {
           filteredOptions = $options;
           search = false;
-          value_dom.focus();
         }
       },
       toggle() {
-        value_dom?.focus();
         return "Closed";
       },
       handleInputKeyboard(e) {
@@ -386,6 +383,7 @@
 <div
   bind:this={anchor}
   class="superCell"
+  tabindex={cellOptions?.disabled ? "-1" : "0"}
   class:isDirty={isDirty && cellOptions.showDirty}
   class:inEdit
   class:disabled
@@ -397,6 +395,9 @@
   class:inline={role == "inlineInput"}
   class:tableCell={role == "tableCell"}
   class:formInput={role == "formInput"}
+  on:focusin={cellState.focus}
+  on:focusout={cellState.focusout}
+  on:keydown={editorState.handleKeyboard}
 >
   {#if icon}
     <i class={icon + " icon"} />
@@ -450,12 +451,7 @@
       class="value"
       class:with-icon={icon}
       class:placeholder={isEmpty}
-      tabindex={cellOptions?.disabled ? "-1" : "0"}
-      bind:this={value_dom}
-      on:focusin={cellState.focus}
-      on:focusout={cellState.focusout}
-      on:keydown={editorState.handleKeyboard}
-      on:mousedown={inEdit ? editorState.toggle : () => {}}
+      on:mousedown={inEdit ? editorState.toggle : null}
     >
       {#if isEmpty}
         <span>{placeholder}</span>
@@ -504,6 +500,7 @@
     useAnchorWidth
     maxHeight={400}
     open={$editorState == "Open"}
+    on:close={editorState.close}
   >
     <div
       bind:this={picker}

package/src/lib/SuperTableCells/CellOptionsAdvanced.svelte

@@ -4,6 +4,7 @@
   import SuperPopover from "../SuperPopover/SuperPopover.svelte";
   import SuperList from "../SuperList/SuperList.svelte";
   import CellSkeleton from "./CellSkeleton.svelte";
+  import "./CellCommon.css";
   const dispatch = createEventDispatcher();
   const { API, QueryUtils, fetchData, memo, derivedMemo } = getContext("sdk");
 
@@ -612,6 +613,7 @@
     gap: 0.25rem;
     align-items: center;
     cursor: pointer;
+    padding: 0 0.5rem;
     &.focused {
       background-color: var(--spectrum-global-color-gray-200) !important;
       color: var(--spectrum-global-color-gray-800);

package/src/lib/SuperFieldLabel/SuperFieldLabel.svelte

@@ -1,91 +0,0 @@
-<script>
-  export let labelPos;
-  export let labelWidth;
-  export let label;
-  export let helpText;
-  export let error;
-  export let fieldState;
-
-  let showHelp;
-  $: width = labelPos == "left" ? (labelWidth ? labelWidth : "5rem") : "auto";
-  $: error = fieldState?.error;
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-{#if labelPos}
-  <div
-    class="superlabel"
-    class:notForm={!fieldState}
-    class:left={labelPos == "left"}
-    class:error
-    style:--label-width={width}
-  >
-    <div
-      class="label"
-      on:mouseenter={() => (showHelp = true)}
-      on:mouseleave={() => (showHelp = false)}
-    >
-      {#if showHelp && helpText}
-        {helpText}
-      {:else}
-        {label}
-      {/if}
-    </div>
-    {#if error}
-      <div class="error-message">
-        {error}
-      </div>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .superlabel {
-    flex: 0 0 auto;
-    width: var(--label-width);
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1.65rem;
-    color: var(--spectrum-global-color-gray-700);
-    padding-left: 2px;
-    gap: 1rem;
-    transition: 130ms;
-
-    &.notForm {
-      font-size: 14px;
-      padding-left: unset;
-      padding-bottom: 4px;
-    }
-
-    &.left {
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-      line-height: 1rem;
-      gap: 0px;
-
-      & > .label {
-        width: var(--label-width);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-
-    & > .label {
-      min-width: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    & > .error-message {
-      color: var(--spectrum-global-color-red-400);
-      font-size: 11px;
-    }
-  }
-</style>

package/src/lib/SuperFieldsCommon.css

@@ -1,54 +0,0 @@
-.superField {
-  width: 100%;
-  display: flex;
-  align-self: flex-start;
-  justify-content: stretch;
-  flex-direction: column;
-
-  &.left-label {
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-  }
-  &.multirow {
-    align-items: stretch;
-
-    & > .superlabel {
-      align-self: start;
-
-      &.left {
-        padding-top: 0.5rem;
-      }
-    }
-  }
-
-  &:focus-within {
-    & > .superlabel {
-      color: var(--spectrum-global-golor-gray-700);
-      font-weight: 500;
-    }
-  }
-}
-
-.inline-cells {
-  flex: auto;
-  display: flex;
-  justify-content: stretch;
-  height: 2rem;
-  overflow: hidden;
-
-  &.multirow {
-    height: unset;
-  }
-}
-
-.inline-buttons {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-  padding-left: 0.5rem;
-
-  &.vertical {
-    flex-direction: column;
-  }
-}