@evergis/uilib-gl 1.0.115 → 1.0.116

package/dist/organisms/TreeDropdown/styled.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Обёртка инпута-якоря: даёт полю собственный фон (сам `Input` прозрачен — `background: transparent`
+ * в `inputMixin`), а `inline-flex` + `align-self` не дают обёртке растягиваться во flex-контейнере,
+ * иначе Popover (`anchorOrigin="bottom-left"`) уводит меню к низу растянутого якоря.
+ */
+export declare const AnchorWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FieldIcons: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms/Grid").FlexProps, never>;
 export declare const CountBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const ResetIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps, never>;

package/dist/uilib-gl.esm.js

@@ -29760,6 +29760,33 @@ const TreeComponent = _ref => {
 
 const Tree = /*#__PURE__*/memo(TreeComponent);
 
+/**
+ * Обёртка инпута-якоря: даёт полю собственный фон (сам `Input` прозрачен — `background: transparent`
+ * в `inputMixin`), а `inline-flex` + `align-self` не дают обёртке растягиваться во flex-контейнере,
+ * иначе Popover (`anchorOrigin="bottom-left"`) уводит меню к низу растянутого якоря.
+ */
+
+const AnchorWrap = styled.div`
+  display: inline-flex;
+  align-self: flex-start;
+  width: max-content;
+  background-color: ${_ref => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref;
+  return palette.background;
+}};
+  border-radius: ${_ref2 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref2;
+  return borderRadius.medium;
+}};
+`;
 const FieldIcons = /*#__PURE__*/styled(Flex)`
   position: absolute;
   top: 50%;
@@ -29778,20 +29805,20 @@ const CountBadge = styled.span`
   height: 1rem;
   padding: 0;
   border-radius: 0.5rem;
-  background-color: ${_ref => {
+  background-color: ${_ref3 => {
   let {
     theme: {
       palette
     }
-  } = _ref;
+  } = _ref3;
   return palette.primary;
 }};
-  color: ${_ref2 => {
+  color: ${_ref4 => {
   let {
     theme: {
       palette
     }
-  } = _ref2;
+  } = _ref4;
   return palette.background;
 }};
   font-size: 0.625rem;
@@ -29802,12 +29829,12 @@ const ResetIcon = /*#__PURE__*/styled(Icon)`
   width: 0.875rem;
   height: 0.875rem;
   cursor: pointer;
-  color: ${_ref3 => {
+  color: ${_ref5 => {
   let {
     theme: {
       palette
     }
-  } = _ref3;
+  } = _ref5;
   return palette.textSecondary;
 }};
 
@@ -29816,12 +29843,12 @@ const ResetIcon = /*#__PURE__*/styled(Icon)`
   }
 
   &:hover {
-    color: ${_ref4 => {
+    color: ${_ref6 => {
   let {
     theme: {
       palette
     }
-  } = _ref4;
+  } = _ref6;
   return palette.textPrimary;
 }};
   }
@@ -29830,19 +29857,19 @@ const Chevron = /*#__PURE__*/styled(Icon)`
   width: 0.875rem;
   height: 0.875rem;
   cursor: pointer;
-  transform: ${_ref5 => {
+  transform: ${_ref7 => {
   let {
     isOpen
-  } = _ref5;
+  } = _ref7;
   return isOpen ? "rotate(180deg)" : "";
 }};
   transition: transform ${transition.press};
-  color: ${_ref6 => {
+  color: ${_ref8 => {
   let {
     theme: {
       palette
     }
-  } = _ref6;
+  } = _ref8;
   return palette.textSecondary;
 }};
 
@@ -29851,20 +29878,44 @@ const Chevron = /*#__PURE__*/styled(Icon)`
   }
 `;
 const Content = styled.div`
-  width: ${_ref7 => {
+  width: ${_ref9 => {
   let {
     width
-  } = _ref7;
+  } = _ref9;
   return width || "auto";
 }};
   padding: 0.5rem;
   box-sizing: border-box;
+  background-color: ${_ref10 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref10;
+  return palette.background;
+}};
+  border-radius: ${_ref11 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref11;
+  return borderRadius.medium;
+}};
+  box-shadow: ${_ref12 => {
+  let {
+    theme: {
+      shadows
+    }
+  } = _ref12;
+  return shadows.raised;
+}};
 `;
 const TreeScroll = styled.div`
-  max-height: ${_ref8 => {
+  max-height: ${_ref13 => {
   let {
     maxHeight
-  } = _ref8;
+  } = _ref13;
   return maxHeight || "15rem";
 }};
   overflow-y: auto;
@@ -29900,20 +29951,20 @@ const ItemBadge = styled.span`
   margin-left: 0.25rem;
   padding: 0;
   border-radius: 0.5rem;
-  background-color: ${_ref9 => {
+  background-color: ${_ref14 => {
   let {
     theme: {
       palette
     }
-  } = _ref9;
+  } = _ref14;
   return palette.element;
 }};
-  color: ${_ref10 => {
+  color: ${_ref15 => {
   let {
     theme: {
       palette
     }
-  } = _ref10;
+  } = _ref15;
   return palette.textSecondary;
 }};
   font-size: 0.625rem;
@@ -30149,7 +30200,7 @@ const TreeDropdownComponent = props => {
     targetOrigin: "top-left",
     animateX: false,
     zIndex: zIndex,
-    anchor: React.createElement("div", {
+    anchor: React.createElement(AnchorWrap, {
       onClick: toggleOpen
     }, React.createElement(Input$1, {
       readOnly: true,