@altertable/data-app 0.61.0 → 0.62.0

package/dist/react/index.css

@@ -334,7 +334,7 @@
   min-width: 0;
 }
 
-.altertable-request-hint[data-state="error"] > svg {
+.altertable-request-hint[data-state="error"] .altertable-request-hint-copy > svg {
   color: var(--at-danger, #b42318);
 }
 
@@ -444,6 +444,17 @@
   }
 }
 
+.altertable-request-hint-copy {
+  display: inline-flex;
+  align-items:  center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.altertable-request-hint-copy > svg {
+  flex: none;
+}
+
 /* src/react/ui/GradientScroll.css */
 .altertable-gradient-scroll {
   overflow: auto;
@@ -558,6 +569,7 @@
 .altertable-combobox-popover {
   z-index: 150;
   min-width: max(var(--trigger-width), 240px);
+  overflow: hidden;
   border: 1px solid var(--at-border, #e3e6e8);
   border-radius: var(--at-radius-surface, 12px);
   background: var(--at-surface, #fff);
@@ -574,7 +586,25 @@
 
 .altertable-combobox-dialog .altertable-search-input-wrap {
   box-sizing: border-box;
-  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--at-border, #e3e6e8);
+  border-radius: 0;
+  width: calc(100% + 16px);
+  margin: -8px -8px 8px;
+  padding: 6px 17px;
+}
+
+.altertable-combobox-dialog .altertable-search-input-wrap:focus-within {
+  outline: none;
+  border-bottom-color: var(--at-border, #e3e6e8);
+}
+
+.altertable-combobox-dialog .altertable-search-input-wrap > svg {
+  opacity: .65;
+}
+
+.altertable-combobox-dialog .altertable-search-input-wrap:focus-within > svg {
+  opacity: 1;
 }
 
 .altertable-combobox-status {
@@ -672,6 +702,16 @@
   height: 24px;
 }
 
+.altertable-combobox-dialog > .altertable-request-hint[data-state="error"] {
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  align-items:  center;
+  gap: 6px;
+  height: auto;
+  margin: 12px 10px 4px;
+}
+
 /* src/react/ui/Checkbox.css */
 .altertable-checkbox {
   position: relative;
@@ -1000,7 +1040,6 @@
 
 .altertable-date-range-compare {
   display: flex;
-  border-top: 1px solid var(--at-border, #e3e6e8);
   cursor: pointer;
   align-items:  flex-start;
   gap: 9px;
@@ -3046,16 +3085,16 @@ button {
 
 .altertable-data-boundary-notice {
   display: flex;
-  border: 1px solid var(--at-border, #e3e6e8);
   border-radius: var(--at-radius-control, 8px);
   color: var(--at-muted, #687078);
-  background: var(--at-subtle, #f6f7f7);
+  background: none;
+  border: 0;
   flex-wrap: wrap;
   align-items:  center;
   gap: 8px;
   min-height: 44px;
   margin: 0 0 14px;
-  padding: 8px 12px;
+  padding: 8px 0;
   font-size: 12px;
   line-height: 1.45;
 }
@@ -3128,8 +3167,11 @@ button {
 
 .altertable-status-panel[data-status="error"] {
   box-sizing: border-box;
+  box-shadow: none;
   display: grid;
   grid-template-columns: 18px minmax(0, 1fr);
+  background: none;
+  border: 0;
   align-items:  start;
   gap: 18px 14px;
   width: min(100%, 520px);
@@ -3517,6 +3559,48 @@ button {
   }
 }
 
+.altertable-button.altertable-widget-heading-trigger {
+  display: inline;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  background: none;
+  border: 0;
+  border-radius: 2px;
+  min-height: 0;
+  padding: 0;
+}
+
+.altertable-widget-heading-trigger > svg {
+  display: inline-block;
+  vertical-align: -2px;
+  opacity: 0;
+  margin-left: 4px;
+  transition: opacity .12s;
+}
+
+.altertable-widget-heading-trigger:hover > svg, .altertable-widget-heading-trigger[data-open="true"] > svg {
+  opacity: 1;
+}
+
+.altertable-widget-heading-trigger:focus-visible > svg {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .altertable-widget-heading-trigger > svg {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .altertable-widget-heading-trigger > svg {
+    transition: none;
+  }
+}
+
 /* src/react/ui/DataWidget.css */
 .altertable-data-widget {
   border: 1px solid var(--at-border, #e3e6e8);
@@ -4378,6 +4462,72 @@ button {
   font-size: 12px;
 }
 
+/* src/react/ui/DataAppSkeleton.css */
+.altertable-data-app-skeleton {
+  display: flex;
+  overflow: hidden;
+  padding: var(--at-layout-gap, 24px);
+  background: var(--at-background, #fff);
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.altertable-data-app-skeleton-content {
+  display: flex;
+  gap: var(--at-layout-gap, 24px);
+  max-width: var(--at-content-width, 960px);
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+
+.altertable-data-app-skeleton-body {
+  display: flex;
+  gap: var(--at-layout-gap, 24px);
+  flex-direction: column;
+  min-width: 0;
+}
+
+.altertable-data-app-skeleton-header, .altertable-data-app-skeleton-footer {
+  min-width: 0;
+}
+
+.altertable-data-app-skeleton-widget-title {
+  width: 144px;
+  max-width: 100%;
+  height: 16px;
+}
+
+.altertable-data-app-skeleton-chart {
+  display: flex;
+  align-items:  flex-end;
+  gap: var(--at-space-sm, 8px);
+  height: 180px;
+}
+
+.altertable-data-app-skeleton-chart > * {
+  flex: 1;
+  min-width: 0;
+}
+
+.altertable-data-app-skeleton-rows {
+  display: grid;
+  gap: 20px;
+}
+
+.altertable-data-app-skeleton-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  gap: var(--at-space-md, 16px);
+}
+
+.altertable-data-app-skeleton-row > * {
+  height: 16px;
+}
+
 /* src/react/ui/RefreshRegion.css */
 .altertable-refresh-content {
   transition: opacity .12s;