oziko-ui-kit 0.0.34 → 0.0.36

package/dist/components/atoms/inputs/normal/chip/ChipInput.d.ts

@@ -3,7 +3,9 @@ import { TypeFlexElement } from "../../../flex-element/FlexElement";
 export type TypeChipInput = {
     label?: string[];
     placeholder?: string;
-    onChange?: (value: string[]) => void;
+    onChange: (value: string[]) => void;
+    value: string[];
+    allowDuplicateValues?: boolean;
 } & TypeFlexElement;
 declare const _default: React.NamedExoticComponent<TypeChipInput>;
 export default _default;

package/dist/components/atoms/relation-input/RelationInput.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { TypeFlexElement } from "../flex-element/FlexElement";
+import { TypeFluidContainer } from "../fluid-container/FluidContainer";
+import { TypeLabeledValue } from "../../../index.export";
+export type TypeRelationInput<T = TypeLabeledValue> = {
+    label: string;
+    description?: string;
+    value?: T | T[];
+    onChange?: (value: T[]) => void;
+    selectProps?: TypeFluidContainer;
+    inputContainerClassName?: string;
+    getOptions: () => Promise<TypeLabeledValue[]>;
+    loadMoreOptions: () => Promise<TypeLabeledValue[]>;
+    searchOptions: (value: string) => Promise<TypeLabeledValue[]>;
+    totalOptionsLength: number;
+    multiple?: boolean;
+} & TypeFlexElement;
+declare const _default: React.MemoExoticComponent<(<T extends TypeLabeledValue>({ label, description, value, onChange, selectProps, inputContainerClassName, getOptions, loadMoreOptions, searchOptions, totalOptionsLength, multiple, ...props }: TypeRelationInput<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;

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

@@ -0,0 +1,34 @@
+import { Ref } from "react";
+import { TypeFluidContainer } from "../../fluid-container/FluidContainer";
+import { TypeLabeledValue } from "../../select-option/SelectOption";
+export type TypeRelationSelectRef = {
+    toggleDropdown: (toggleValue?: boolean) => void;
+    clear: () => void;
+};
+export type TypeRelationSelect = {
+    options: TypeLabeledValue[];
+    placeholder?: string;
+    placement?: "bottom" | "top";
+    multiple?: boolean;
+    maxCount?: number;
+    disabled?: boolean;
+    popupClassName?: string;
+    optionProps?: TypeFluidContainer;
+    selectRef?: Ref<TypeRelationSelectRef>;
+    disableClick?: boolean;
+    onChange?: (value: TypeLabeledValue | TypeLabeledValue[]) => void;
+    loadMoreOptions: () => void;
+    searchOptions: (value: string) => void;
+    totalOptionsLength: number;
+    selectedOption: TypeLabeledValue | TypeLabeledValue[] | null;
+    setSelectedOption: React.Dispatch<React.SetStateAction<TypeLabeledValue | TypeLabeledValue[] | null>>;
+};
+declare const _default: import("react").NamedExoticComponent<TypeRelationSelect & {
+    prefix?: import("../../../../index.export").TypeFlexElement;
+    root?: import("../../../../index.export").TypeFlexElement;
+    suffix?: import("../../../../index.export").TypeFlexElement;
+    mode?: "hug" | "fill" | "middle";
+} & {
+    ref?: import("react").RefObject<HTMLDivElement | null>;
+} & import("../../../../index.export").TypeFlexContainer & import("../../../../index.export").TypeFlexDimension & Omit<import("react").HTMLAttributes<HTMLDivElement>, "prefix" | "onChange">>;
+export default _default;

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

@@ -1,6 +1,7 @@
 import { TypeCoordinates } from "../components/atoms/map/Map";
 import { ReactNode } from "react";
 import { utils } from "../utils";
+import { TypeLabeledValue } from "../index.export";
 export type TypeProperties = {
     [key: string]: {
         type: keyof typeof types;
@@ -15,6 +16,7 @@ export type TypeProperties = {
         locationType?: string;
         className?: string;
         properties?: TypeProperties;
+        requires?: string;
     };
 };
 export type TypeValueType = string | number | boolean | string[] | number[] | boolean[] | TypeRepresenterValue | TypeRepresenterValue[];
@@ -44,6 +46,9 @@ export type TypeInputProps<T> = {
     className?: string;
     onChange?: ({ key, value }: TypeChangeEvent<T>) => void;
 };
+export type TypeInputRepresenterError = {
+    [key: string]: string | null;
+};
 type TypeObjectInputProps<T> = {
     key?: string;
     properties?: TypeProperties;
@@ -59,6 +64,12 @@ type TypeArrayInputProps<T> = {
     maxItems?: number;
     items?: TypeArrayItems;
 } & TypeInputProps<T[]>;
+type TypeRelationInputProps<T> = {
+    getOptions: () => Promise<TypeLabeledValue[]>;
+    loadMoreOptions: () => Promise<TypeLabeledValue[]>;
+    searchOptions: (value: string) => Promise<TypeLabeledValue[]>;
+    totalOptionsLength: number;
+} & TypeInputProps<T>;
 export type TypeInputTypeMap = {
     string: (props: TypeSelectInputProps<string>) => ReactNode;
     number: (props: TypeSelectInputProps<number>) => ReactNode;
@@ -72,13 +83,17 @@ export type TypeInputTypeMap = {
     richtext: (props: TypeInputProps<string>) => ReactNode;
     object: (props: TypeObjectInputProps<TypeRepresenterValue>) => ReactNode;
     array: (props: TypeArrayInputProps<TypeValueType>) => ReactNode;
-    chip: (props: TypeInputProps<string>) => ReactNode;
+    chip: (props: TypeInputProps<string[]>) => ReactNode;
+    relation: (props: TypeRelationInputProps<TypeLabeledValue[] | TypeLabeledValue>) => ReactNode;
 };
 declare const types: TypeInputTypeMap;
 type TypeUseInputRepresenter = {
     properties: TypeProperties;
     value?: TypeValueType | TypeRepresenterValue;
+    error?: TypeInputRepresenterError;
     onChange?: (value: any) => void;
+    containerClassName?: string;
+    errorClassName?: string;
 };
-declare const useInputRepresenter: ({ properties, value, onChange }: TypeUseInputRepresenter) => import("react/jsx-runtime").JSX.Element[];
+declare const useInputRepresenter: ({ properties, value, error, onChange, containerClassName, errorClassName, }: TypeUseInputRepresenter) => (import("react/jsx-runtime").JSX.Element | null)[];
 export default useInputRepresenter;

package/dist/index.css

@@ -2967,6 +2967,77 @@ button.font-increment {
 .ChipInput-module_chipInputContainer__qkZtV input {
   padding: 0;
 }
+.RelationInput-module_icon__folVL {
+  color: var(--oziko-color-font-primary) !important;
+}
+
+.RelationInput-module_text__h8Gq5 {
+  color: var(--oziko-color-input-placeholder) !important;
+}
+
+.RelationInput-module_select__H7bRO {
+  background: none !important;
+  padding: var(--oziko-padding-md) 0 !important;
+  height: 100% !important;
+}
+
+.RelationInput-module_baseInput__9cDeK {
+  padding: 0 var(--oziko-padding-lg) !important;
+}
+.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);
+  cursor: pointer;
+}
+.RelationSelect-module_container__nwkcp.RelationSelect-module_disabled__37hiQ {
+  cursor: default;
+  opacity: var(--oziko-disabled-opacity);
+}
+.RelationSelect-module_container__nwkcp .RelationSelect-module_displayer__-ispL {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: unset;
+  -webkit-line-clamp: 1;
+  width: 100%;
+  max-height: 100px;
+  overflow-y: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--oziko-gap-sm);
+}
+
+.RelationSelect-module_selectDropdown__HAwgv {
+  position: fixed;
+  border-radius: var(--oziko-border-radius-md);
+  z-index: 1000;
+  height: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: var(--oziko-box-shadow);
+  background: var(--oziko-color-menu-background);
+}
+
+.RelationSelect-module_searchInputWrapper__2XT5T {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--oziko-gap-sm);
+}
+
+.RelationSelect-module_searchIcon__Wpvzz {
+  color: var(--oziko-color-font-primary);
+}
+
+.RelationSelect-module_searchInput__Aihgm {
+  border: 0;
+}
+
+.RelationSelect-module_deleteIcon__l6plf {
+  color: var(--oziko-color-danger);
+}
 .ColorMinimized-module_colorMinimized__CnRpu {
   background-color: var(--oziko-color-input-background);
   border-radius: var(--oziko-border-radius-md);

package/dist/index.export.d.ts

@@ -69,6 +69,7 @@ export { default as Drawer } from "./components/atoms/drawer/Drawer";
 export { default as Backdrop } from "./components/atoms/backdrop/Backdrop";
 export { default as Portal } from "./components/atoms/portal/Portal";
 export { default as Tab } from "./components/atoms/tab/Tab";
+export { default as RelationInput } from "./components/atoms/relation-input/RelationInput";
 export { default as useInputRepresenter } from "./custom-hooks/useInputRepresenter";
 export { default as useKeyDown } from "./custom-hooks/useKeyDown";
 export { useOnClickOutside } from "./custom-hooks/useOnClickOutside";
@@ -147,6 +148,7 @@ export { type TypePopover } from "./components/atoms/popover/Popover";
 export { type TypePortalProps } from "./components/atoms/portal/Portal";
 export { type TypeSelectOption } from "./components/atoms/select-option/SelectOption";
 export { type TypeTab } from "./components/atoms/tab/Tab";
+export { type TypeRelationInput } from "./components/atoms/relation-input/RelationInput";
 export { type TypeAccordionGroup } from "./components/molecules/accordion/Accordion";
 export { type TypeNavigatorItem } from "./components/molecules/navigator-item/NavigatorItem";
 export { type TypeSSOButton } from "./components/molecules/sso-button/SSOButton";