@ozen-ui/kit 0.68.0 → 0.70.0

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseOptions/useAutocompleteBaseOptions.js

@@ -0,0 +1,22 @@
+import { isMultipleInternalValue } from '../../utils';
+export var useAutocompleteBaseOptions = function (_a) {
+    var optionsProp = _a.options, prepare = _a.prepare, searchControl = _a.searchControl, valueControl = _a.valueControl, multiple = _a.multiple;
+    var options = optionsProp.map(prepare);
+    var filteredOptions = searchControl.isActive
+        ? searchControl.search(options)
+        : options;
+    var isSelected = function (option) {
+        var _a, _b, _c;
+        if (isMultipleInternalValue(valueControl.value, multiple)) {
+            return ((_b = (_a = valueControl.value) === null || _a === void 0 ? void 0 : _a.some(function (selectedOption) { return selectedOption.id === option.id; })) !== null && _b !== void 0 ? _b : false);
+        }
+        return ((_c = valueControl.value) === null || _c === void 0 ? void 0 : _c.id) === option.id;
+    };
+    var hasOptions = (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0;
+    return {
+        options: options,
+        filteredOptions: filteredOptions,
+        isSelected: isSelected,
+        hasOptions: hasOptions,
+    };
+};

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseSearch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useAutocompleteBaseSearch';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseSearch/index.js

@@ -0,0 +1,2 @@
+export * from './useAutocompleteBaseSearch';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseSearch/types.d.ts

@@ -0,0 +1,8 @@
+import type { AutocompleteBaseInternalOption } from '../../entities';
+export type AutocompleteBaseSearchControlFunction<Option> = (options: AutocompleteBaseInternalOption<Option>[]) => AutocompleteBaseInternalOption<Option>[];
+export type AutocompleteBaseSearchControl<Option> = {
+    isActive: boolean;
+    activate: (searchValue: string) => void;
+    deactivate: () => void;
+    search: AutocompleteBaseSearchControlFunction<Option>;
+};

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseSearch/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseSearch/useAutocompleteBaseSearch.d.ts

@@ -0,0 +1,3 @@
+import type { AutocompleteBaseSearchFunction } from '../../entities';
+import type { AutocompleteBaseSearchControl } from './types';
+export declare const useAutocompleteBaseSearch: <Option>(searchFunction: AutocompleteBaseSearchFunction<Option> | undefined) => AutocompleteBaseSearchControl<Option>;

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseSearch/useAutocompleteBaseSearch.js

@@ -0,0 +1,26 @@
+import { __read } from "tslib";
+import { useState } from 'react';
+export var useAutocompleteBaseSearch = function (searchFunction) {
+    var _a = __read(useState(''), 2), searchValue = _a[0], setSearchValue = _a[1];
+    var search = function (options) {
+        if (searchFunction) {
+            return searchFunction(options, searchValue);
+        }
+        return options.filter(function (option) {
+            return option.label.toLowerCase().includes(searchValue.toLowerCase());
+        });
+    };
+    var activate = function (searchValue) {
+        setSearchValue(searchValue);
+    };
+    var deactivate = function () {
+        setSearchValue('');
+    };
+    var isActive = !!searchValue;
+    return {
+        isActive: isActive,
+        activate: activate,
+        deactivate: deactivate,
+        search: search,
+    };
+};

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useAutocompleteBaseValue';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/index.js

@@ -0,0 +1,2 @@
+export * from './useAutocompleteBaseValue';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/types.d.ts

@@ -0,0 +1,12 @@
+import type { SyntheticEvent } from 'react';
+import type { AutocompleteBaseInternalValue, AutocompleteBaseInternalOption, AutocompleteBaseOnChangeSource } from '../../entities';
+export type AutocompleteBaseValueControlSetValueParams = {
+    source: AutocompleteBaseOnChangeSource;
+};
+export type AutocompleteBaseValueControlSetValue<Option> = (event: SyntheticEvent | KeyboardEvent | null, option: AutocompleteBaseInternalOption<Option> | null, params: AutocompleteBaseValueControlSetValueParams) => void;
+export type AutocompleteBaseValueControl<Option, Multiple extends boolean> = {
+    value: AutocompleteBaseInternalValue<Option, Multiple> | undefined;
+    setValue: AutocompleteBaseValueControlSetValue<Option>;
+    hasValue: boolean;
+    selectedOptionsLength: number;
+};

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/useAutocompleteBaseValue.d.ts

@@ -0,0 +1,15 @@
+import type { AutocompleteBaseValue, AutocompleteBasePrepareOption, AutocompleteBaseOnChange } from '../../entities';
+import type { AutocompleteBaseProps } from '../../types';
+import type { AutocompleteBaseInputControl } from '../useAutocompleteBaseInput';
+import type { AutocompleteBaseSearchControl } from '../useAutocompleteBaseSearch';
+import type { AutocompleteBaseValueControl } from './types';
+export declare const useAutocompleteBaseValue: <Option, Multiple extends boolean>({ value: valueProp, defaultValue, onChange: onChangeProp, inProps, prepareOption, searchControl, multiple, inputControl, }: {
+    value: AutocompleteBaseValue<Option, Multiple> | undefined;
+    defaultValue: AutocompleteBaseValue<Option, Multiple> | undefined;
+    onChange: AutocompleteBaseOnChange<Option, Multiple>;
+    inProps: AutocompleteBaseProps<Option, Multiple>;
+    multiple: Multiple;
+    prepareOption: AutocompleteBasePrepareOption<Option>;
+    searchControl: AutocompleteBaseSearchControl<Option>;
+    inputControl: AutocompleteBaseInputControl;
+}) => AutocompleteBaseValueControl<Option, Multiple>;

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/useAutocompleteBaseValue.js

@@ -0,0 +1,84 @@
+import { __assign, __read, __spreadArray } from "tslib";
+import { useControlled } from '../../../../hooks/useControlled';
+import { isArray } from '../../../../utils/array';
+import { isNotNil } from '../../../../utils/isNotNil';
+import { isMultipleInternalValue, isMultipleProps, isSingleProps, } from '../../utils';
+export var useAutocompleteBaseValue = function (_a) {
+    var _b;
+    var valueProp = _a.value, defaultValue = _a.defaultValue, onChangeProp = _a.onChange, inProps = _a.inProps, prepareOption = _a.prepareOption, searchControl = _a.searchControl, multiple = _a.multiple, inputControl = _a.inputControl;
+    var prepareValue = function (value) {
+        if (!value) {
+            return null;
+        }
+        if (isArray(value)) {
+            return value.map(function (value) {
+                return prepareOption(value);
+            });
+        }
+        return prepareOption(value);
+    };
+    var _c = __read(useControlled({
+        value: valueProp === undefined ? undefined : prepareValue(valueProp),
+        defaultValue: defaultValue === undefined ? undefined : prepareValue(defaultValue),
+        name: 'AutocompleteBase',
+        state: 'value',
+    }), 2), valueState = _c[0], setValueState = _c[1];
+    var onChange = function (event, option, params) {
+        setValueState(prepareValue(option));
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event, option, params);
+    };
+    var setValue = function (event, option, paramsProp) {
+        var _a, _b, _c, _d;
+        var source = paramsProp.source;
+        var inputValue = '';
+        var params = __assign(__assign({}, inProps), { onChange: onChange });
+        if (isMultipleProps(params) &&
+            isMultipleInternalValue(valueState, multiple)) {
+            if (option === null) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(event, null, { source: source });
+            }
+            else {
+                var value_1 = valueState !== null && valueState !== void 0 ? valueState : [];
+                var optionId_1 = option.id;
+                var optionIsSelected_1 = value_1.find(function (item) { return item.id === optionId_1; });
+                var result = (function () {
+                    if (optionIsSelected_1) {
+                        var options_1 = [];
+                        value_1.forEach(function (option) {
+                            if (option.id !== optionId_1) {
+                                options_1.push(option.raw);
+                            }
+                        });
+                        return options_1;
+                    }
+                    if (option) {
+                        return __spreadArray(__spreadArray([], __read(value_1.map(function (option) { return option.raw; })), false), [option.raw], false);
+                    }
+                    return value_1.map(function (option) { return option.raw; });
+                })();
+                (_a = params.onChange) === null || _a === void 0 ? void 0 : _a.call(params, event, result, { source: source });
+            }
+            searchControl.deactivate();
+        }
+        else if (isSingleProps(params)) {
+            inputValue = (_b = option === null || option === void 0 ? void 0 : option.label) !== null && _b !== void 0 ? _b : '';
+            (_c = params.onChange) === null || _c === void 0 ? void 0 : _c.call(params, event, (_d = option === null || option === void 0 ? void 0 : option.raw) !== null && _d !== void 0 ? _d : null, { source: source });
+            if (option) {
+                searchControl.deactivate();
+            }
+        }
+        inputControl.setValue(null, inputValue);
+    };
+    var hasValue = isMultipleInternalValue(valueState, multiple)
+        ? !!valueState && valueState.length > 0
+        : isNotNil(valueState);
+    var selectedOptionsLength = isMultipleInternalValue(valueState, multiple)
+        ? (_b = valueState === null || valueState === void 0 ? void 0 : valueState.length) !== null && _b !== void 0 ? _b : 0
+        : 0;
+    return {
+        value: valueState,
+        setValue: setValue,
+        hasValue: hasValue,
+        selectedOptionsLength: selectedOptionsLength,
+    };
+};

package/__inner__/esm/components/AutocompleteBase/index.d.ts

@@ -0,0 +1,6 @@
+export * from './entities';
+export * from './modules';
+export * from './utils';
+export * from './AutocompleteBaseContext';
+export * from './AutocompleteBase';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/index.js

@@ -0,0 +1,6 @@
+export * from './entities';
+export * from './modules';
+export * from './utils';
+export * from './AutocompleteBaseContext';
+export * from './AutocompleteBase';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.css

@@ -0,0 +1,67 @@
+.AutocompleteBaseDropdown {
+  --scroll-bar-size: 12px;
+}
+  .AutocompleteBaseDropdown::-webkit-scrollbar {
+    inline-size: var(--scroll-bar-size);
+  }
+  .AutocompleteBaseDropdown::-webkit-scrollbar-thumb {
+    background-color: var(--color-background-secondary);
+    border-radius: calc(var(--scroll-bar-size) / 2);
+    border: calc(var(--scroll-bar-size) / 4) solid transparent;
+    background-clip: padding-box;
+    border-image: initial;
+    min-block-size: 24px;
+  }
+  .AutocompleteBaseDropdown::-webkit-scrollbar-thumb:hover,
+    .AutocompleteBaseDropdown::-webkit-scrollbar-thumb:active {
+      border: calc(var(--scroll-bar-size) / 4) solid transparent;
+      background-clip: padding-box;
+    }
+  .AutocompleteBaseDropdown::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+  .AutocompleteBaseDropdown::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+  .AutocompleteBaseDropdown::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  .AutocompleteBaseDropdown {
+  overflow: hidden auto;
+  max-block-size: 40vh;
+}
+.AutocompleteBaseDropdown-animation-enter {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteBaseDropdown-animation-enter-active {
+    opacity: 1;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteBaseDropdown-animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.AutocompleteBaseDropdown-animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.AutocompleteBaseDropdown-animation-exit-active {
+    opacity: 0;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }
+.AutocompleteBaseDropdown-animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
+    pointer-events: none;
+  }

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteBaseDropdownBaseProps } from './types';
+export declare const AutocompleteBaseDropdown: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<AutocompleteBaseDropdownBaseProps, import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Paper").PaperBaseProps, "div">>;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.js

@@ -0,0 +1,34 @@
+import { __assign, __rest } from "tslib";
+import React, { useEffect } from 'react';
+import { useCreateResizeObserver } from '../../../../hooks/useCreateResizeObserver';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { cn } from '../../../../utils/classname';
+import { getPaperSizeToFormElement } from '../../../../utils/getPaperSizeToFormElement';
+import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import { Paper } from '../../../Paper';
+import { Popover } from '../../../Popover';
+import { useAutocompleteBaseContext } from '../../AutocompleteBaseContext';
+var cnAutocompleteBaseDropdown = cn('AutocompleteBaseDropdown');
+export var AutocompleteBaseDropdown = polymorphicComponentWithRef(function (_a, ref) {
+    var children = _a.children, _b = _a.strategy, strategy = _b === void 0 ? 'absolute' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 4] : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.as, as = _e === void 0 ? Paper : _e, className = _a.className, onExited = _a.onExited, popoverProps = __rest(_a, ["children", "strategy", "offset", "placement", "as", "className", "onExited"]);
+    var _f = useAutocompleteBaseContext(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef, inputRef = _f.inputRef;
+    var radius = getPaperSizeToFormElement(size);
+    var updateStored = useStoredValue(null);
+    var resizeObserver = useCreateResizeObserver(function () {
+        var _a;
+        (_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
+    });
+    useEffect(function () {
+        var input = inputRef.current;
+        if (input) {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(inputRef.current);
+        }
+    }, [inputRef]);
+    return (React.createElement(Popover, __assign({ offset: offset, strategy: strategy, placement: placement, setUpdate: function (update) {
+            updateStored.current = update;
+        }, as: as, transitionProps: { classNames: 'AutocompleteBaseDropdown-animation' }, className: cnAutocompleteBaseDropdown('', [className]), equalAnchorWidth: true, disableReturnFocus: true, disableEnforceFocus: true, onExited: function () {
+            onExited === null || onExited === void 0 ? void 0 : onExited();
+            searchControl.deactivate();
+        } }, popoverProps, { open: dropdownControl.isOpen, radius: radius, onClose: dropdownControl.close, anchorRef: anchorRef, ref: useMultiRef([ref, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.ref]) }), children));
+});

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/constants.d.ts

@@ -0,0 +1 @@
+export declare const AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Paper").PaperBaseProps, "div">;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/constants.js

@@ -0,0 +1,2 @@
+import { Paper } from '../../../Paper';
+export var AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG = Paper;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteBaseDropdown';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/index.js

@@ -0,0 +1,2 @@
+export * from './AutocompleteBaseDropdown';
+export * from './types';

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/types.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { PopoverBaseProps } from '../../../Popover';
+import type { AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG } from './constants';
+export type AutocompleteBaseDropdownBaseProps = Omit<PopoverBaseProps, 'setUpdate' | 'anchorRef' | 'open' | 'onClose'> & {
+    disableCloseOnSelect?: boolean;
+    disableShowEmptyOptionsList?: boolean;
+};
+export type AutocompleteBaseDropdownRef = ComponentRef<typeof AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG>;
+export type AutocompleteBaseDropdownProps<As extends ElementType = typeof AUTOCOMPLETE_BASE_DROPDOWN_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.css

@@ -0,0 +1,128 @@
+.AutocompleteBaseInput {
+  --autocomplete-base-input-gutter-x: 0 var(--textfield-gutter-x);
+}
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_2xs {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-xs);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_xs {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-xs);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_s {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-s);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_m {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-m);
+    }
+
+  .AutocompleteBaseInput_hasChevron.AutocompleteBaseInput_size_l {
+      --autocomplete-base-input-gutter-x: 0 var(--control-padding-2xs) 0
+      var(--control-padding-l);
+    }
+
+  .AutocompleteBaseInput-HelperInput {
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    position: absolute;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  .AutocompleteBaseInput .Input-Body {
+    padding: var(--autocomplete-base-input-gutter-x);
+    align-items: flex-start;
+  }
+
+  .AutocompleteBaseInput .FieldIcon {
+    block-size: var(--textfield-input-height);
+  }
+
+  .AutocompleteBaseInput-ClearTag {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    block-size: inherit;
+  }
+
+  .AutocompleteBaseInput-Tag_hidden {
+      inset-block-start: 0;
+      block-size: 0;
+      visibility: hidden;
+      position: absolute;
+    }
+
+  .AutocompleteBaseInput-Tag_disabled {
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+  .AutocompleteBaseInput-RenderRight {
+    display: flex;
+    gap: var(--spacing-2xs);
+    align-items: center;
+  }
+
+  .AutocompleteBaseInput-ClearButton {
+    visibility: hidden;
+    transition: visibility var(--transition-default);
+  }
+
+  .AutocompleteBaseInput-ClearButton_visibility {
+      visibility: visible;
+    }
+
+
+.AutocompleteBaseInput-Input_responsive {
+    flex-wrap: nowrap;
+    gap: unset;
+  }
+
+
+/* ToDo. Tag */
+
+
+.AutocompleteBaseInput-Input_responsive .AutocompleteBaseInput-Tag {
+      margin-inline-end: var(--spacing-3xs);
+    }
+
+
+.AutocompleteBaseInput-Input_multiple {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    inline-size: 100%;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--textfield-input-padding);
+    min-block-size: var(--textfield-input-height);
+    gap: var(--spacing-3xs);
+  }
+
+
+.AutocompleteBaseInput-Input_multiple input {
+      padding: 0;
+      border: none;
+      outline: none;
+      font: inherit;
+      background: none;
+      box-sizing: border-box;
+      color: var(--textfield-color);
+    }
+
+
+.AutocompleteBaseInput-Input_multiple.AutocompleteBaseInput-Input_hasLabel input::placeholder {
+      opacity: 0;
+    }
+
+
+.AutocompleteBaseInput-Input_multiple * + input::placeholder, .AutocompleteBaseInput-Input_multiple input:focus::placeholder, .AutocompleteBaseInput-Input_multiple.AutocompleteBaseInput-Input_hasLabel * + input::placeholder, .AutocompleteBaseInput-Input_multiple.AutocompleteBaseInput-Input_hasLabel input:focus::placeholder {
+        opacity: 1;
+      }

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteInputComponent } from './types';
+export declare const AutocompleteBaseInput: AutocompleteInputComponent;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/AutocompleteBaseInput.js

@@ -0,0 +1,44 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { Input } from '../../../Input';
+import { useAutocompleteBaseContext } from '../../AutocompleteBaseContext';
+import { cnAutocompleteBaseInput } from './classNames';
+import { AutocompleteBaseRenderRight, AutocompleteBaseInputMultiple, } from './components';
+import { AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON, AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON, AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION, } from './constants';
+var AutocompleteBaseInputRender = function (inProps, ref) {
+    var _a;
+    var props = useThemeProps({
+        props: inProps,
+        name: 'AutocompleteBaseInput',
+    });
+    var label = props.label, openText = props.openText, clearText = props.clearText, closeText = props.closeText, className = props.className, bodyProps = props.bodyProps, inputProps = props.inputProps, renderSuffix = props.renderSuffix, _b = props.suffixPosition, suffixPosition = _b === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SUFFIX_POSITION : _b, renderBefore = props.renderBefore, placeholder = props.placeholder, limitTags = props.limitTags, _c = props.showClearButton, showClearButton = _c === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CLEAR_BUTTON : _c, _d = props.showChevron, showChevron = _d === void 0 ? AUTOCOMPLETE_BASE_INPUT_DEFAULT_SHOW_CHEVRON : _d, renderTag = props.renderTag, renderMoreTag = props.renderMoreTag, labelProps = props.labelProps, other = __rest(props, ["label", "openText", "clearText", "closeText", "className", "bodyProps", "inputProps", "renderSuffix", "suffixPosition", "renderBefore", "placeholder", "limitTags", "showClearButton", "showChevron", "renderTag", "renderMoreTag", "labelProps"]);
+    var _e = useAutocompleteBaseContext(), valueControl = _e.valueControl, inputControl = _e.inputControl, inputEventsControl = _e.inputEventsControl, inputRef = _e.inputRef, anchorRef = _e.anchorRef, size = _e.size, multiple = _e.multiple, disabled = _e.disabled, dropdownControl = _e.dropdownControl, error = _e.error;
+    var open = dropdownControl.isOpen;
+    var inputMultiRef = useMultiRef([inputRef, ref]);
+    var renderComponent = function (_a, ref) {
+        var className = _a.className, other = __rest(_a, ["className"]);
+        if (multiple) {
+            return (React.createElement(AutocompleteBaseInputMultiple, __assign({ label: label, renderTag: renderTag, limitTags: limitTags, renderMoreTag: renderMoreTag }, other, { ref: ref })));
+        }
+        return (React.createElement("input", __assign({}, other, { ref: ref, className: cnAutocompleteBaseInput('Input', [className]) })));
+    };
+    return (React.createElement(Input, __assign({}, other, { size: size, disabled: disabled, label: label, value: (_a = inputControl.value) !== null && _a !== void 0 ? _a : '', onChange: inputEventsControl.onChange, placeholder: placeholder, renderLeft: renderBefore, renderRight: React.createElement(AutocompleteBaseRenderRight, { openText: openText, clearText: clearText, closeText: closeText, renderSuffix: renderSuffix, suffixPosition: suffixPosition, showChevron: showChevron, showClearButton: showClearButton }), labelProps: __assign({ shrink: !!valueControl.selectedOptionsLength }, labelProps), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: useMultiRef([
+                anchorRef,
+                bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref,
+            ]) }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onClick: function (event) {
+                var _a;
+                inputEventsControl.onClick(event);
+                (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+            }, onBlur: function (event) {
+                var _a;
+                inputEventsControl.onBlur(event);
+                (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+            }, onKeyDown: function (event) {
+                var _a;
+                inputEventsControl.onKeyDown(event);
+                (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+            }, renderComponent: renderComponent }), className: cnAutocompleteBaseInput({ size: size, multiple: multiple, hasChevron: showChevron }, [className]), error: error, ref: inputMultiRef })));
+};
+export var AutocompleteBaseInput = forwardRef(AutocompleteBaseInputRender);

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/classNames.d.ts

@@ -0,0 +1 @@
+export declare const cnAutocompleteBaseInput: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/classNames.js

@@ -0,0 +1,2 @@
+import { cn } from '../../../../utils/classname';
+export var cnAutocompleteBaseInput = cn('AutocompleteBaseInput');

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseInputMultiple/AutocompleteBaseInputMultiple.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteBaseInputMultipleComponent } from './types';
+export declare const AutocompleteBaseInputMultiple: AutocompleteBaseInputMultipleComponent;