oziko-ui-kit 0.0.78 → 0.0.80

package/dist/components/atoms/relation-input/relation-select/RelationSelect.d.ts

@@ -1,7 +1,6 @@
 import { Ref, RefObject } from "react";
 import { TypeFluidContainer } from "../../fluid-container/FluidContainer";
 import { TypeLabeledValue } from "../../select-option/SelectOption";
-import { TypeFlexElement } from "../../flex-element/FlexElement";
 export type TypeRelationSelectRef = {
     toggleDropdown: (toggleValue?: boolean) => void;
     clear: () => void;
@@ -27,9 +26,9 @@ export type TypeRelationSelect = {
     portalClassName?: string;
 };
 declare const _default: import("react").NamedExoticComponent<TypeRelationSelect & {
-    prefix?: TypeFlexElement;
-    root?: TypeFlexElement;
-    suffix?: TypeFlexElement;
+    prefix?: import("../../../../index.export").TypeFlexElement;
+    root?: import("../../../../index.export").TypeFlexElement;
+    suffix?: import("../../../../index.export").TypeFlexElement;
     mode?: "hug" | "fill" | "middle";
 } & {
     ref?: RefObject<HTMLDivElement | null>;

package/dist/custom-hooks/useInputRepresenter.d.ts

@@ -36,6 +36,7 @@ export type TypeProperties = {
         relationType?: RelationType;
         icon?: IconName;
         placeholder?: string;
+        popupClassName?: string;
     };
 };
 export type TypeValueType = string | number | boolean | string[] | number[] | boolean[] | TypeRepresenterValue | TypeRepresenterValue[];
@@ -97,6 +98,7 @@ type TypeRelationInputProps<T> = {
     searchOptions: (value: string) => Promise<TypeLabeledValue[]>;
     totalOptionsLength: number;
     relationType?: RelationType;
+    popupClassName?: string;
 } & TypeInputProps<T>;
 type TypeChipInputProps<T> = {
     valueType?: TypeChipInput["valueType"];

package/dist/index.css

@@ -3374,11 +3374,14 @@ button.font-increment {
 
 .RelationInput-module_baseInput__9cDeK {
   padding: 0 var(--oziko-padding-lg) !important;
+  justify-content: start;
 }
 .RelationSelect-module_container__nwkcp {
   background: var(--oziko-color-zebra);
   padding: var(--oziko-padding-md) var(--oziko-padding-lg);
   border-radius: var(--oziko-border-radius-md);
+  justify-content: space-between;
+  overflow: hidden;
   cursor: pointer;
 }
 .RelationSelect-module_container__nwkcp.RelationSelect-module_disabled__37hiQ {
@@ -3392,13 +3395,22 @@ button.font-increment {
   text-overflow: ellipsis;
   width: unset;
   -webkit-line-clamp: 1;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
   width: 100%;
   max-height: 100px;
-  overflow-y: auto;
+  overflow-x: auto;
   display: flex;
   flex-wrap: wrap;
   gap: var(--oziko-gap-sm);
 }
+.RelationSelect-module_container__nwkcp .RelationSelect-module_displayer__-ispL::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera*/
+}
+.RelationSelect-module_container__nwkcp .RelationSelect-module_displayerContainer__kCaoy {
+  min-width: 0;
+  overflow-x: hidden;
+}
 
 .RelationSelect-module_selectDropdown__HAwgv {
   position: fixed;
@@ -3409,6 +3421,10 @@ button.font-increment {
   overflow-y: auto;
   box-shadow: var(--oziko-box-shadow);
   background: var(--oziko-color-menu-background);
+  width: 100%;
+}
+.RelationSelect-module_selectDropdown__HAwgv > div {
+  width: 100%;
 }
 
 .RelationSelect-module_searchInputWrapper__2XT5T {
@@ -3433,6 +3449,10 @@ button.font-increment {
 .RelationSelect-module_infiniteScroll__UQClb {
   overflow: hidden !important;
 }
+
+.RelationSelect-module_deleteButton__9KhWk {
+  flex-shrink: 0;
+}
 .ColorMinimized-module_colorMinimized__CnRpu {
   background-color: var(--oziko-color-input-background);
   border-radius: var(--oziko-border-radius-md);