react-autoql 4.9.0 → 5.0.1

package/dist/autoql.esm.css

@@ -80,14 +80,6 @@ span.react-autoql-icon {
 .chat-voice-record-icon {
   vertical-align: top; }
 
-.react-autoql-tooltip {
-  font-family: inherit;
-  letter-spacing: 0.04em;
-  text-align: left;
-  padding: 7px 15px;
-  opacity: 1 !important;
-  z-index: 99999 !important; }
-
 @-webkit-keyframes slide {
   0% {
     transform: translateX(-100%); }
@@ -817,23 +809,35 @@ g.legendOrdinal .legendTitle tspan {
     opacity: 0;
     transition: none; }
   .react-autoql-chart-container .bar,
+  .react-autoql-chart-container .column,
+  .react-autoql-chart-container .circle,
+  .react-autoql-chart-container .line,
+  .react-autoql-chart-container .slice,
+  .react-autoql-chart-container .stacked-area,
   .react-autoql-chart-container .stacked-bar,
   .react-autoql-chart-container .stacked-column,
-  .react-autoql-chart-container .circle,
-  .react-autoql-chart-container .stacked-area {
+  .react-autoql-chart-container .swatch {
     transition: fill-opacity 0.3s ease;
-    fill-opacity: 0.7 !important;
+    fill-opacity: 1 !important;
     outline: none !important; }
     .react-autoql-chart-container .bar:hover, .react-autoql-chart-container .bar.active,
+    .react-autoql-chart-container .column:hover,
+    .react-autoql-chart-container .column.active,
+    .react-autoql-chart-container .circle:hover,
+    .react-autoql-chart-container .circle.active,
+    .react-autoql-chart-container .line:hover,
+    .react-autoql-chart-container .line.active,
+    .react-autoql-chart-container .slice:hover,
+    .react-autoql-chart-container .slice.active,
+    .react-autoql-chart-container .stacked-area:hover,
+    .react-autoql-chart-container .stacked-area.active,
     .react-autoql-chart-container .stacked-bar:hover,
     .react-autoql-chart-container .stacked-bar.active,
     .react-autoql-chart-container .stacked-column:hover,
     .react-autoql-chart-container .stacked-column.active,
-    .react-autoql-chart-container .circle:hover,
-    .react-autoql-chart-container .circle.active,
-    .react-autoql-chart-container .stacked-area:hover,
-    .react-autoql-chart-container .stacked-area.active {
-      fill-opacity: 1 !important; }
+    .react-autoql-chart-container .swatch:hover,
+    .react-autoql-chart-container .swatch.active {
+      fill-opacity: 0.7 !important; }
   .react-autoql-chart-container .line-dot,
   .react-autoql-chart-container .vertex-dot {
     transition: opacity 0.3s ease;
@@ -3264,16 +3268,19 @@ ul {
   border-radius: 4px;
   box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
   opacity: 1;
-  min-width: 500px;
-  max-width: 70vw;
-  min-height: 350px;
-  max-height: 90vh;
+  min-width: 450px;
+  max-width: 95vw;
+  min-height: 0px;
+  max-height: 95vh;
+  height: 350px;
   background: var(--react-autoql-background-color-primary);
-  color: var(--react-autoql-text-color-primary);
-  overflow-y: auto !important; }
+  color: var(--react-autoql-text-color-primary); }
   .filter-lock-menu .filter-lock-toast-container {
     top: 0;
-    position: absolute; }
+    position: absolute;
+    max-width: calc(100% - 36px);
+    padding: 10px;
+    font-size: 14px; }
     .filter-lock-menu .filter-lock-toast-container .Toastify__toast {
       min-height: 48px; }
     .filter-lock-menu .filter-lock-toast-container .Toastify__toast-body {
@@ -3294,84 +3301,139 @@ ul {
       border-color: var(--react-autoql-danger-color); }
 
 .filter-lock-menu-content {
-  padding: 15px 20px;
+  padding: 15px 0 0px 20px;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  height: 100%; }
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box; }
   .filter-lock-menu-content.closed {
     opacity: 0; }
   .filter-lock-menu-content h3 {
-    margin-top: 3px;
-    margin-bottom: 15px;
+    margin-top: 0px;
+    margin-bottom: 0px;
     color: var(--react-autoql-text-color-primary); }
   .filter-lock-menu-content h4 {
     margin-top: 3px;
     margin-bottom: 5px;
-    color: var(--react-autoql-text-color-primary);
-    display: inline-flex; }
-  .filter-lock-menu-content .react-autoql-condition-list-loading-container,
-  .filter-lock-menu-content .react-autoql-empty-condition-list,
+    color: var(--react-autoql-text-color-primary); }
+  .filter-lock-menu-content .react-autoql-filter-lock-list-loading-container,
+  .filter-lock-menu-content .react-autoql-empty-filter-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.8;
+    padding-right: 20px;
+    padding-bottom: 45px; }
+  .filter-lock-menu-content .react-autoql-filter-lock-list-loading-container,
+  .filter-lock-menu-content .react-autoql-empty-filter-list,
   .filter-lock-menu-content .react-autoql-filter-list-container {
-    flex: 1 1 245px; }
+    flex: 1; }
   .filter-lock-menu-content .filter-lock-menu-header {
     flex: 0;
     width: 100%;
     display: flex;
+    align-items: center;
     align-items: flex-start;
-    justify-content: space-between; }
+    justify-content: space-between;
+    padding-bottom: 15px;
+    box-sizing: border-box;
+    padding-right: 15px; }
     .filter-lock-menu-content .filter-lock-menu-header .filter-locking-close-btn {
       border: none;
       margin: 0;
       padding: 0;
       font-size: 20px; }
+    .filter-lock-menu-content .filter-lock-menu-header .filter-locking-saving-indicator {
+      display: inline-block;
+      font-weight: 400;
+      font-size: 14px;
+      padding-right: 20px;
+      color: var(--react-autoql-accent-color); }
   .filter-lock-menu-content .filter-lock-menu-footer {
     width: 100%;
     display: flex;
     justify-content: flex-end; }
-  .filter-lock-menu-content .react-autoql-empty-condition-list {
-    opacity: 0.8;
-    width: 100%;
-    text-align: center;
-    padding-top: 70px; }
   .filter-lock-menu-content .react-autoql-filter-list-container {
-    margin: 10px 0; }
-    .filter-lock-menu-content .react-autoql-filter-list-container .flex {
+    margin-top: 15px;
+    margin-right: 0;
+    overflow: hidden; }
+    .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title {
       width: 100%;
       display: flex;
+      flex-wrap: nowrap;
       flex-direction: row;
+      align-items: flex-start;
       justify-content: space-between;
-      flex-wrap: nowrap;
       margin-bottom: 4px; }
-      .filter-lock-menu-content .react-autoql-filter-list-container .flex .persist-toggle-column,
-      .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-condition-table-list-item {
-        margin-right: 25px;
-        max-width: 350px; }
-      .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon {
-        cursor: pointer; }
-        .filter-lock-menu-content .react-autoql-filter-list-container .flex .react-autoql-remove-filter-icon:hover {
-          color: var(--react-autoql-danger-color); }
-    .filter-lock-menu-content .react-autoql-filter-list-container .filter-lock-category-title {
-      padding-right: 10px;
-      padding-top: 1px;
-      max-width: 195px;
-      overflow: hidden; }
-    .filter-lock-menu-content .react-autoql-filter-list-container .persist-toggle-column .react-autoql-icon {
-      margin-left: 3px; }
-    .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-highlight-row {
-      background-color: var(--react-autoql-accent-color);
-      color: var(--react-autoql-accent-text-color);
-      -webkit-animation-name: highlightIn, highlightOut;
-              animation-name: highlightIn, highlightOut;
-      -webkit-animation-duration: 300ms, 300ms;
-              animation-duration: 300ms, 300ms;
-      -webkit-animation-delay: 0ms, 1000ms;
-              animation-delay: 0ms, 1000ms;
-      -webkit-animation-timing-function: ease-in, ease-out;
-              animation-timing-function: ease-in, ease-out;
-      -webkit-animation-iteration-count: 1, 1;
-              animation-iteration-count: 1, 1; }
-  .filter-lock-menu-content .react-autoql-condition-locking-input {
+      .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .filter-lock-category-title {
+        padding-right: 10px;
+        padding-top: 1px;
+        max-width: 195px;
+        overflow: hidden;
+        text-overflow: ellipsis; }
+      .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .filter-name-column {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex: 1; }
+      .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .persist-toggle-column {
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 0 0 auto;
+        margin-right: 40px; }
+        .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-title .persist-toggle-column .react-autoql-icon {
+          margin-left: 3px; }
+    .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container {
+      margin-bottom: 10px;
+      margin-right: 0px; }
+      .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: nowrap;
+        padding-right: 10px;
+        margin-bottom: 1px;
+        margin-top: 1px;
+        padding-top: 1px;
+        padding-bottom: 1px;
+        padding-left: 5px;
+        margin-right: 10px; }
+        .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item .react-autoql-filter-list-item-filter {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding-right: 5px; }
+        .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item .react-autoql-filter-list-item-actions {
+          white-space: nowrap;
+          display: flex;
+          justify-content: center;
+          align-items: center; }
+        .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item .persist-toggle {
+          margin: 0 25px; }
+        .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item .react-autoql-remove-filter-icon {
+          cursor: pointer; }
+          .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item .react-autoql-remove-filter-icon:hover {
+            color: var(--react-autoql-danger-color); }
+        .filter-lock-menu-content .react-autoql-filter-list-container .react-autoql-filter-list-item-container .react-autoql-filter-list-item.react-autoql-highlight-row {
+          background-color: var(--react-autoql-accent-color);
+          color: var(--react-autoql-accent-text-color);
+          -webkit-animation-name: highlightIn, highlightOut;
+                  animation-name: highlightIn, highlightOut;
+          -webkit-animation-duration: 300ms, 300ms;
+                  animation-duration: 300ms, 300ms;
+          -webkit-animation-delay: 0ms, 1000ms;
+                  animation-delay: 0ms, 1000ms;
+          -webkit-animation-timing-function: ease-in, ease-out;
+                  animation-timing-function: ease-in, ease-out;
+          -webkit-animation-iteration-count: 1, 1;
+                  animation-iteration-count: 1, 1; }
+  .filter-lock-menu-content .react-autoql-filter-locking-input {
     padding: 5px;
     padding-left: 20px;
     height: 32px;
@@ -3386,14 +3448,16 @@ ul {
     border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
     background: var(--react-autoql-background-color-primary);
     color: var(--react-autoql-text-color-primary); }
-    .filter-lock-menu-content .react-autoql-condition-locking-input:hover {
+    .filter-lock-menu-content .react-autoql-filter-locking-input:hover {
       box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
-    .filter-lock-menu-content .react-autoql-condition-locking-input::-moz-placeholder {
+    .filter-lock-menu-content .react-autoql-filter-locking-input::-moz-placeholder {
       color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
       opacity: 0.5; }
-    .filter-lock-menu-content .react-autoql-condition-locking-input::placeholder {
+    .filter-lock-menu-content .react-autoql-filter-locking-input::placeholder {
       color: rgba(var(--react-autoql-text-color-placeholder), 2) !important;
       opacity: 0.5; }
+  .filter-lock-menu-content .react-autosuggest__container {
+    margin-right: 20px; }
   .filter-lock-menu-content .react-autosuggest__container--open {
     position: relative; }
     .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open {
@@ -3410,20 +3474,22 @@ ul {
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
       text-align: left;
       border-radius: 4px;
-      height: auto;
       width: 100%;
-      max-height: 200px;
-      overflow-y: scroll !important; }
-      .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open ul.filter-lock-suggestion-item {
+      height: auto;
+      max-height: calc(90vh - 180px);
+      box-sizing: border-box;
+      overflow: hidden; }
+      .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .filter-lock-suggestion-item {
         cursor: pointer;
         width: 100%;
-        columns: 2;
-        -webkit-columns: 2;
-        list-style: none;
-        -moz-columns: 2;
         letter-spacing: 0.05em;
         line-height: 22.5px;
-        padding: 0px 20px 3px 20px; }
+        padding: 0px 20px 3px 20px;
+        box-sizing: border-box;
+        line-height: inherit;
+        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis; }
       .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestion {
         color: var(--react-autoql-text-color-primary); }
       .filter-lock-menu-content .react-autosuggest__container--open .react-autosuggest__suggestions-container--open .react-autosuggest__suggestions-list {
@@ -3456,18 +3522,22 @@ ul {
 @-webkit-keyframes highlightIn {
   100% {
     background-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color); }
+    color: var(--react-autoql-accent-text-color);
+    opacity: 0.8; }
   0% {
     background-color: var(--react-autoql-background-color-primary);
-    color: var(--react-autoql-text-color-primary); } }
+    color: var(--react-autoql-text-color-primary);
+    opacity: 1; } }
 
 @keyframes highlightIn {
   100% {
     background-color: var(--react-autoql-accent-color);
-    color: var(--react-autoql-accent-text-color); }
+    color: var(--react-autoql-accent-text-color);
+    opacity: 0.8; }
   0% {
     background-color: var(--react-autoql-background-color-primary);
-    color: var(--react-autoql-text-color-primary); } }
+    color: var(--react-autoql-text-color-primary);
+    opacity: 1; } }
 
 .react-autoql-drawer {
   font-family: var(--react-autoql-font-family), sans-serif;
@@ -3670,7 +3740,7 @@ ul {
     cursor: ns-resize; }
 
 /* Tooltips */
-.react-autoql-drawer-tooltip {
+.react-autoql-tooltip {
   font-family: var(--react-autoql-font-family), sans-serif;
   letter-spacing: 0.04em;
   line-height: 1.5em;
@@ -3679,7 +3749,9 @@ ul {
   text-align: left;
   opacity: 1 !important;
   z-index: 99999 !important;
-  /* necessary to show up on top of rc drawer */ }
+  /* necessary to show up on top of rc drawer */
+  max-width: 300px;
+  word-break: break-word; }
 
 .interpretation-tooltip {
   font-family: var(--react-autoql-font-family), sans-serif;