@homecode/ui 5.1.9 → 5.1.11

package/dist/esm/index.js

@@ -1,2 +1,109 @@
-export{AssistiveText}from"./src/components/AssistiveText/AssistiveText.js";export{Autocomplete}from"./src/components/Autocomplete/Autocomplete.js";export{Button}from"./src/components/Button/Button.js";export{ButtonGroup}from"./src/components/ButtonGroup/ButtonGroup.js";export{Calendar}from"./src/components/Calendar/Calendar.js";export{Checkbox}from"./src/components/Checkbox/Checkbox.js";export{Chip}from"./src/components/Chip/Chip.js";export{Card,CardAction,CardContent,CardDescription,CardFooter,CardHeader,CardTitle,LinkCard}from"./src/components/Card/Card.js";export{Container}from"./src/components/Container/Container.js";export{DatePicker}from"./src/components/DatePicker/DatePicker.js";export{DatePickerInput}from"./src/components/DatePickerInput/DatePickerInput.js";export{DateTime,formatDate}from"./src/components/DateTime/DateTime.js";export{Dialogue}from"./src/components/Dialogue/Dialogue.js";export{Draggable}from"./src/components/Draggable/Draggable.js";export{DropZone}from"./src/components/DropZone/DropZone.js";export{Expand}from"./src/components/Expand/Expand.js";export{Flex}from"./src/components/Flex/Flex.js";export{Form}from"./src/components/Form/Form.js";export{Gallery}from"./src/components/Gallery/Gallery.js";export{Heading}from"./src/components/Heading/Heading.js";export{Icon}from"./src/components/Icon/Icon.js";export{Input}from"./src/components/Input/Input.js";export{InputFile}from"./src/components/InputFile/InputFile.js";export{Label}from"./src/components/Label/Label.js";export{LangSelector}from"./src/components/LangSelector/LangSelector.js";export{Lazy}from"./src/components/Lazy/Lazy.js";export{LightBox}from"./src/components/LightBox/LightBox.js";export{Menu}from"./src/components/Menu/Menu.js";export{Notifications,NotificationsStore}from"./src/components/Notifications/Notifications.js";export{Paranja}from"./src/components/Paranja/Paranja.js";export{ANIMATION_DURATION,Popup}from"./src/components/Popup/Popup.js";export{Portal}from"./src/components/Portal/Portal.js";export{PopupMenu}from"./src/components/PopupMenu/PopupMenu.js";export{Progress}from"./src/components/Progress/Progress.js";export{ProgressCircular}from"./src/components/ProgressCircular/ProgressCircular.js";export{RadioButton}from"./src/components/RadioButton/RadioButton.js";export{RadioGroup}from"./src/components/RadioGroup/RadioGroup.js";export{Router,RouterContext,RouterStore}from"./src/components/Router/Router.js";export{RequiredStar}from"./src/components/RequiredStar/RequiredStar.js";export{Select,SelectHelpers}from"./src/components/Select/Select.js";export{Select2}from"./src/components/Select/Select2.js";export{Scroll}from"./src/components/Scroll/Scroll.js";export{Shimmer}from"./src/components/Shimmer/Shimmer.js";export{Spinner}from"./src/components/Spinner/Spinner.js";export{Table}from"./src/components/Table/Table.js";export{Tabs}from"./src/components/Tabs/Tabs.js";export{Tooltip}from"./src/components/Tooltip/Tooltip.js";export{H1,H2,H3,H4,H5,H6}from"./src/components/Text/Text.js";export{Theme}from"./src/components/Theme/Theme.js";export{ThemeProvider,useTheme}from"./src/components/Theme/ThemeProvider.js";export{VH}from"./src/components/VH/VH.js";export{default as Virtualized}from"./src/components/Virtualized/Virtualized.js";export{default as VirtualizedList}from"./src/components/Virtualized/List/List.js";export{default as VirtualizedListScroll}from"./src/components/Virtualized/List/ListScroll.js";import*as Virtualized_types from"./src/components/Virtualized/Virtualized.types.js";export{Toggle}from"./src/components/Toggle/Toggle.js";import*as i18n from"./src/services/i18n.js";import*as env from"./src/tools/env.js";export{config}from"./src/tools/config.js";import*as array from"./src/tools/array.js";import*as date from"./src/tools/date.js";import*as string from"./src/tools/string.js";import*as number from"./src/tools/number.js";import*as object from"./src/tools/object.js";import*as file from"./src/tools/file.js";import*as uid from"./src/tools/uid.js";import*as dom from"./src/tools/dom.js";export{default as rangeMap}from"./src/tools/rangeMap.js";import*as scroll from"./src/tools/scroll.js";export{default as throttle}from"./src/tools/throttle.js";export{default as debounce}from"./src/tools/debounce.js";export{default as LS}from"./src/tools/localStorage.js";import*as resizeObserver from"./src/tools/resizeObserver.js";import*as queryParams from"./src/tools/queryParams.js";export{useThrottle,useThrottleCallback}from"./src/hooks/useThrottle.js";export{useDebounce,useDebounceCallback}from"./src/hooks/useDebounce.js";import"react";export{useIsMounted}from"./src/hooks/useIsMounted.js";export{useListKeyboardControl}from"./src/hooks/useListKeyboardControl.js";export{useResizeObserver}from"./src/hooks/useResizeObserver.js";export{useToggleState}from"./src/hooks/useToggleState.js";export{default as DialogueStyles}from"./src/components/Dialogue/Dialogue.styl.js";import*as Form_types from"./src/components/Form/Form.types.js";export{SubmitButtons}from"./src/components/Form/SubmitButtons/SubmitButtons.js";import*as InputFile_types from"./src/components/InputFile/InputFile.types.js";export{Route}from"./src/components/Router/Route.js";export{Redirect}from"./src/components/Router/Redirect.js";export{Link}from"./src/components/Router/Link/Link.js";import*as Theme_helpers from"./src/components/Theme/Theme.helpers.js";import*as Theme_defaults from"./src/components/Theme/Theme.defaults.js";export{Virtualized_types as VirtualizedTypes,i18n,env,array,date,string,number,object,file,uid,dom,scroll,resizeObserver,queryParams,Form_types as FormTypes,InputFile_types as InputFileTypes,Theme_helpers as ThemeHelpers,Theme_defaults as ThemeDefaults};
-//# sourceMappingURL=index.js.map
+export { AssistiveText } from './src/components/AssistiveText/AssistiveText.js';
+export { Autocomplete } from './src/components/Autocomplete/Autocomplete.js';
+export { Button } from './src/components/Button/Button.js';
+export { ButtonGroup } from './src/components/ButtonGroup/ButtonGroup.js';
+export { Calendar } from './src/components/Calendar/Calendar.js';
+export { Checkbox } from './src/components/Checkbox/Checkbox.js';
+export { Chip } from './src/components/Chip/Chip.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, LinkCard } from './src/components/Card/Card.js';
+export { Container } from './src/components/Container/Container.js';
+export { DatePicker } from './src/components/DatePicker/DatePicker.js';
+export { DatePickerInput } from './src/components/DatePickerInput/DatePickerInput.js';
+export { DateTime, formatDate } from './src/components/DateTime/DateTime.js';
+export { Dialogue } from './src/components/Dialogue/Dialogue.js';
+export { Draggable } from './src/components/Draggable/Draggable.js';
+export { DropZone } from './src/components/DropZone/DropZone.js';
+export { Expand } from './src/components/Expand/Expand.js';
+export { Flex } from './src/components/Flex/Flex.js';
+export { Form } from './src/components/Form/Form.js';
+export { Gallery } from './src/components/Gallery/Gallery.js';
+export { Heading } from './src/components/Heading/Heading.js';
+export { Icon } from './src/components/Icon/Icon.js';
+export { Input } from './src/components/Input/Input.js';
+export { InputFile } from './src/components/InputFile/InputFile.js';
+export { Label } from './src/components/Label/Label.js';
+export { LangSelector } from './src/components/LangSelector/LangSelector.js';
+export { Lazy } from './src/components/Lazy/Lazy.js';
+export { LightBox } from './src/components/LightBox/LightBox.js';
+export { Menu } from './src/components/Menu/Menu.js';
+export { Notifications, NotificationsStore } from './src/components/Notifications/Notifications.js';
+export { Paranja } from './src/components/Paranja/Paranja.js';
+export { ANIMATION_DURATION, Popup } from './src/components/Popup/Popup.js';
+export { Portal } from './src/components/Portal/Portal.js';
+export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
+export { Progress } from './src/components/Progress/Progress.js';
+export { ProgressCircular } from './src/components/ProgressCircular/ProgressCircular.js';
+export { RadioButton } from './src/components/RadioButton/RadioButton.js';
+export { RadioGroup } from './src/components/RadioGroup/RadioGroup.js';
+export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
+export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
+export { Select, SelectHelpers } from './src/components/Select/Select.js';
+export { Select2 } from './src/components/Select/Select2.js';
+export { Scroll } from './src/components/Scroll/Scroll.js';
+export { Shimmer } from './src/components/Shimmer/Shimmer.js';
+export { Spinner } from './src/components/Spinner/Spinner.js';
+export { Table } from './src/components/Table/Table.js';
+export { Tabs } from './src/components/Tabs/Tabs.js';
+export { TextShimmer } from './src/components/TextShimmer/TextShimmer.js';
+export { Tooltip } from './src/components/Tooltip/Tooltip.js';
+export { H1, H2, H3, H4, H5, H6 } from './src/components/Text/Text.js';
+export { Theme } from './src/components/Theme/Theme.js';
+export { ThemeProvider, useTheme } from './src/components/Theme/ThemeProvider.js';
+export { VH } from './src/components/VH/VH.js';
+export { default as Virtualized } from './src/components/Virtualized/Virtualized.js';
+export { default as VirtualizedList } from './src/components/Virtualized/List/List.js';
+export { default as VirtualizedListScroll } from './src/components/Virtualized/List/ListScroll.js';
+import * as Virtualized_types from './src/components/Virtualized/Virtualized.types.js';
+export { Virtualized_types as VirtualizedTypes };
+export { Toggle } from './src/components/Toggle/Toggle.js';
+import * as i18n from './src/services/i18n.js';
+export { i18n };
+import * as env from './src/tools/env.js';
+export { env };
+export { config } from './src/tools/config.js';
+import * as array from './src/tools/array.js';
+export { array };
+import * as date from './src/tools/date.js';
+export { date };
+import * as string from './src/tools/string.js';
+export { string };
+import * as number from './src/tools/number.js';
+export { number };
+import * as object from './src/tools/object.js';
+export { object };
+import * as file from './src/tools/file.js';
+export { file };
+import * as uid from './src/tools/uid.js';
+export { uid };
+import * as dom from './src/tools/dom.js';
+export { dom };
+export { default as rangeMap } from './src/tools/rangeMap.js';
+import * as scroll from './src/tools/scroll.js';
+export { scroll };
+export { default as throttle } from './src/tools/throttle.js';
+export { default as debounce } from './src/tools/debounce.js';
+export { default as LS } from './src/tools/localStorage.js';
+import * as resizeObserver from './src/tools/resizeObserver.js';
+export { resizeObserver };
+import * as queryParams from './src/tools/queryParams.js';
+export { queryParams };
+export { useThrottle, useThrottleCallback } from './src/hooks/useThrottle.js';
+export { useDebounce, useDebounceCallback } from './src/hooks/useDebounce.js';
+import 'react';
+export { useIsMounted } from './src/hooks/useIsMounted.js';
+export { useListKeyboardControl } from './src/hooks/useListKeyboardControl.js';
+export { useResizeObserver } from './src/hooks/useResizeObserver.js';
+export { useToggleState } from './src/hooks/useToggleState.js';
+export { default as DialogueStyles } from './src/components/Dialogue/Dialogue.styl.js';
+import * as Form_types from './src/components/Form/Form.types.js';
+export { Form_types as FormTypes };
+export { SubmitButtons } from './src/components/Form/SubmitButtons/SubmitButtons.js';
+import * as InputFile_types from './src/components/InputFile/InputFile.types.js';
+export { InputFile_types as InputFileTypes };
+export { Route } from './src/components/Router/Route.js';
+export { Redirect } from './src/components/Router/Redirect.js';
+export { Link } from './src/components/Router/Link/Link.js';
+import * as Theme_helpers from './src/components/Theme/Theme.helpers.js';
+export { Theme_helpers as ThemeHelpers };
+import * as Theme_defaults from './src/components/Theme/Theme.defaults.js';
+export { Theme_defaults as ThemeDefaults };

package/dist/esm/node_modules/style-inject/dist/style-inject.es.js

@@ -1,2 +1,28 @@
-function styleInject(e,t){var d,n,t=(t=void 0===t?{}:t).insertAt;e&&"undefined"!=typeof document&&(d=document.head||document.getElementsByTagName("head")[0],(n=document.createElement("style")).type="text/css","top"===t&&d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e)))}export{styleInject as default};
-//# sourceMappingURL=style-inject.es.js.map
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+export { styleInject as default };

package/dist/esm/src/components/AssistiveText/AssistiveText.js

@@ -1,2 +1,10 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import S from"./AssistiveText.styl.js";function AssistiveText(s){const{className:t,size:e="m",variant:i="default",children:r,...a}=s;return jsx("div",{className:cn(S.root,S["size-"+e],S["variant-"+i],t),...a,children:r})}export{AssistiveText};
-//# sourceMappingURL=AssistiveText.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './AssistiveText.styl.js';
+
+function AssistiveText(props) {
+    const { className, size = 'm', variant = 'default', children, ...rest } = props;
+    return (jsx("div", { className: cn(S.root, S[`size-${size}`], S[`variant-${variant}`], className), ...rest, children: children }));
+}
+
+export { AssistiveText };

package/dist/esm/src/components/AssistiveText/AssistiveText.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".AssistiveText_root__OI3ju{font-size:80%;line-height:1.5em;margin-bottom:.2em}.AssistiveText_size-xs__JqX1X{padding:0 8px}.AssistiveText_size-s__gsuS-{padding:0 12px}.AssistiveText_size-m__PDlkc{padding:0 16px}.AssistiveText_size-l__D-9pQ{padding:0 20px}.AssistiveText_size-xl__RbXF0{padding:0 24px}.AssistiveText_variant-danger__N8sGS{color:var(--danger-color)}",S={root:"AssistiveText_root__OI3ju","size-xs":"AssistiveText_size-xs__JqX1X","size-s":"AssistiveText_size-s__gsuS-","size-m":"AssistiveText_size-m__PDlkc","size-l":"AssistiveText_size-l__D-9pQ","size-xl":"AssistiveText_size-xl__RbXF0","variant-danger":"AssistiveText_variant-danger__N8sGS"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=AssistiveText.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".AssistiveText_root__OI3ju{font-size:80%;line-height:1.5em;margin-bottom:.2em}.AssistiveText_size-xs__JqX1X{padding:0 8px}.AssistiveText_size-s__gsuS-{padding:0 12px}.AssistiveText_size-m__PDlkc{padding:0 16px}.AssistiveText_size-l__D-9pQ{padding:0 20px}.AssistiveText_size-xl__RbXF0{padding:0 24px}.AssistiveText_variant-danger__N8sGS{color:var(--danger-color)}";
+var S = {"root":"AssistiveText_root__OI3ju","size-xs":"AssistiveText_size-xs__JqX1X","size-s":"AssistiveText_size-s__gsuS-","size-m":"AssistiveText_size-m__PDlkc","size-l":"AssistiveText_size-l__D-9pQ","size-xl":"AssistiveText_size-xl__RbXF0","variant-danger":"AssistiveText_variant-danger__N8sGS"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -1,2 +1,429 @@
-import{jsx,jsxs}from"react/jsx-runtime";import cn from"classnames";import"../AssistiveText/AssistiveText.styl.js";import{useState,useRef,useCallback,useMemo,useEffect}from"react";import S from"./Autocomplete.styl.js";import{Shimmer}from"../Shimmer/Shimmer.js";import debounce from"../../tools/debounce.js";import{useIsMounted}from"../../hooks/useIsMounted.js";import{useListKeyboardControl}from"../../hooks/useListKeyboardControl.js";import"../Spinner/Spinner.styl.js";import"../Button/Button.styl.js";import"../ButtonGroup/ButtonGroup.styl.js";import"../Calendar/Calendar.styl.js";import{Input}from"../Input/Input.js";import"../../tools/dom.js";import"../Icon/Icon.styl.js";import"timen";import"../Label/Label.styl.js";import{Popup}from"../Popup/Popup.js";import"../RequiredStar/RequiredStar.styl.js";import"../Select/Select.styl.js";import"../Scroll/Scroll.js";import"compareq";import"justorm/react";import"lodash.omit";import"lodash.pick";import"nanoid";import"../Checkbox/Checkbox.styl.js";import"../Chip/Chip.styl.js";import"../Tooltip/Tooltip.styl.js";import"../Card/Card.js";import"../Container/Container.js";import"../DatePicker/DatePicker.styl.js";import"moment";import"../DatePickerInput/DatePickerInput.styl.js";import"../Dialogue/Dialogue.js";import"../../tools/queryParams.js";import"../Draggable/Draggable.styl.js";import"../DropZone/DropZone.styl.js";import"../Expand/Expand.styl.js";import"../Flex/Flex.styl.js";import"../Form/Form.styl.js";import"../Form/Validator.js";import"../Form/SubmitButtons/SubmitButtons.styl.js";import"../Gallery/Gallery.styl.js";import"../Heading/Heading.js";import"../InputFile/InputFile.styl.js";import"../InputFile/Item/Item.styl.js";import"../../services/i18n.js";import"../Portal/Portal.js";import"../Paranja/Paranja.styl.js";import"../LightBox/LightBox.styl.js";import{Menu}from"../Menu/Menu.js";import"../Notifications/store.js";import"../Notifications/Notifications.styl.js";import"../PopupMenu/PopupMenu.styl.js";import"../Progress/Progress.styl.js";import"../ProgressCircular/ProgressCircular.styl.js";import"../RadioGroup/RadioGroupContext.js";import"../RadioButton/RadioButton.styl.js";import"../RadioGroup/RadioGroup.styl.js";import"../Router/Router.js";import"../Table/Table.styl.js";import"../Tabs/Tabs.styl.js";import"../Text/Text.js";import"../Theme/Theme.defaults.js";import"../Theme/ThemeProvider.js";import"../Virtualized/Virtualized.styl.js";import"../Virtualized/List/List.styl.js";import ListScroll from"../Virtualized/List/ListScroll.js";import"../Toggle/Toggle.styl.js";const SIZE_TO_ITEM_HEIGHT={xs:24,s:30,m:40,l:50,xl:58},getTotalCount=(e,t=0,o=0,s=20)=>void 0!==e?e:o+(t===s?1:0);function Autocomplete(s){const{className:z,value:e,onChange:G,size:t="m",getOptions:q,onSelect:H,items:n,itemHeight:r=SIZE_TO_ITEM_HEIGHT[t],pageSize:a=20,debounceDelay:O=300,round:o=!1,blur:_=!1,selectable:l=!1,defaultSelected:i,scrollToSelected:u=!1,inputProps:m={},popupProps:p={},menuProps:V={},scrollProps:c={},loadingPlaceholder:Z,isOpen:d}=s,K=useIsMounted(),[w,j]=useState([]),[J,y]=useState(()=>n??[]),[f,g]=useState(""),[Q,h]=useState(0),[b,v]=useState(0),[U,C]=useState(void 0),[I,W]=useState(!1),[P,x]=useState(!1),[T,X]=useState(d),[k,N]=useState(null),[Y,E]=useState(null),M=useRef(!1),$=useRef(e),[ee,te]=useState(e),R=e=>{$.current=e,te(e)},oe=useRef(""),F=useRef(void 0),L=useRef(!1),se=useRef(null);var re=l&&!T&&null!=Y?Y:ee;const B=f?w:J.length?J:n??[];var le=B.length;const D=0<b&&le<b;var le=cn(S.root,z,p.className),ie=void 0!==d?d:p?.isOpen;const ne=t=>{l?(N(t.id),E(t.label),H?.(t)):(R(t.label),g(t.label),j([]),h(0),v(0),A(t.label,0),H?.(t),void 0===d&&requestAnimationFrame(()=>{var e=se.current;e&&(e.focus(),e.setSelectionRange(t.label.length,t.label.length))}))};var ae=void 0!==d?d:T;const{focusedIndex:ue,setFocusedIndex:me}=useListKeyboardControl({isActive:ae,itemsCount:B.length,onSelect:e=>ne(B[e])}),A=useCallback(async(t,o)=>{var e=t+":"+o;oe.current=e,(0===o?W:x)(!0);try{var s=await q(t,o);const i=s.items;var r,l=s.total;K.current&&oe.current===e&&(r=getTotalCount(l,i.length,o+i.length,a),t?0===o?(F.current=void 0,j(i),C(0)):j(e=>[...e,...i]):0===o?(F.current=void 0,y(i),C(0)):y(e=>[...e,...i]),h(o+i.length),v(r),0===o)&&requestAnimationFrame(()=>{C(void 0)})}catch(e){0===o&&(t?j([]):y(n??[]),h(0),v(0))}finally{W(!1),x(!1)}},[q,K,a,n]),pe=useMemo(()=>debounce(A,O),[A,O]),ce=useCallback(({scrollTop:e})=>{F.current=e},[]),de=useCallback(()=>{if(D&&!I&&!P){const e=f,t=Q;0<t?(x(!0),requestAnimationFrame(()=>{A(e,t)})):A(e,t)}},[f,D,I,P,Q,A]),je=(useEffect(()=>{"string"==typeof e&&(R(e),l&&e&&E(e),e?M.current&&(F.current=void 0,g(e),h(0),C(0),pe(e,0)):(F.current=void 0,g(""),j([]),y(n??[]),h(0),v(0),C(0)))},[e,l]),useEffect(()=>{l&&!e&&(N(null),E(null),L.current=!1)},[l,e]),useEffect(()=>{var e;l&&i&&!L.current&&B.length&&(e=B.find(e=>e.id===i))&&(L.current=!0,N(e.id),E(e.label))},[l,i,B]),useEffect(()=>{!f&&n?.length&&y(n)},[f,n]),useEffect(()=>{(d??T)&&!f&&n?.length&&0===b&&A("",0)},[d,T,f,n?.length,b,A]),useCallback(e=>{const t=B[e.key];var o;return t?(o={option:t,key:e.key,className:cn(S.option,e.className),style:e.style,focused:ue===e.key,isSelected:l&&t.id===k,onClick:()=>ne(t),onMouseEnter:()=>me(e.key)},s.renderItem?s.renderItem(o):jsx(Menu.Item,{...e,focused:o.focused,selected:o.isSelected,className:o.className,onClick:o.onClick,onMouseEnter:o.onMouseEnter,style:{...e.style,height:r},children:t.render?t.render(t):t.label})):null},[B,ue,k,l,ne,me,s.renderItem,r])),ye=Z??jsxs("div",{className:S.loadingPlaceholder,children:[P&&jsx(Shimmer,{size:t,round:o}),"Loading..."]});ae=useMemo(()=>{if(!B.length)return!l&&I?ye:null;var e,t=0<b?b:B.length;let o;return(d??T)&&u&&l&&k&&(e=B.findIndex(e=>e.id===k),o=0<=e?Math.max(0,e*r-r):void 0),jsx(ListScroll,{...l&&{id:k??"none"},..."number"==typeof o&&{initialScrollTop:o},className:cn(S.options,V.className),scrollProps:{y:!0,...c,className:cn(S.scroll,c?.className)},itemHeight:r,itemsCount:B.length,totalCount:t,overlapCount:10,pageSize:a,scrollTop:U,onScroll:ce,onScrollEnd:de,renderItem:je,contentAfter:D&&ye})},[B,ue,b,D,I,P,r,a,ce,de,je,t,o,V.className,c,U,l,k,d,T,u,ye]);return jsx(Popup,{className:le,focusControl:!0,round:o,size:t,blur:_,direction:"bottom",...p,isOpen:ie,trigger:jsx(Input,{ref:se,size:t,round:o,...m,value:re,onChange:(e,t)=>{t=(t||e?.target.value)??"";return R(t),G(e,t),t?(F.current=void 0,g(t),h(0),C(0),pe(t,0)):(F.current=void 0,g(""),j([]),y(n??[]),h(0),v(0),C(0)),!0},onFocus:e=>{var t;M.current=!0,X(!0),u&&l&&k||null!=(t=F.current)&&0<t&&(C(t),requestAnimationFrame(()=>C(void 0))),m?.onFocus?.(e)},onBlur:e=>{M.current=!1,X(!1),m?.onBlur?.(e)},className:cn(m.className,l&&!T&&S.inputSelectableDisplay)}),content:ae,contentProps:{...p?.contentProps,className:cn(S.popupContent,p?.contentProps?.className)}})}export{Autocomplete};
-//# sourceMappingURL=Autocomplete.js.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import '../AssistiveText/AssistiveText.styl.js';
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import S from './Autocomplete.styl.js';
+import { Shimmer } from '../Shimmer/Shimmer.js';
+import debounce from '../../tools/debounce.js';
+import { useIsMounted } from '../../hooks/useIsMounted.js';
+import { useListKeyboardControl } from '../../hooks/useListKeyboardControl.js';
+import '../Spinner/Spinner.styl.js';
+import '../Button/Button.styl.js';
+import '../ButtonGroup/ButtonGroup.styl.js';
+import '../Calendar/Calendar.styl.js';
+import { Input } from '../Input/Input.js';
+import '../../tools/dom.js';
+import '../Icon/Icon.styl.js';
+import 'timen';
+import '../Label/Label.styl.js';
+import { Popup } from '../Popup/Popup.js';
+import '../RequiredStar/RequiredStar.styl.js';
+import '../Select/Select.styl.js';
+import '../Scroll/Scroll.js';
+import 'compareq';
+import 'justorm/react';
+import 'lodash.omit';
+import 'lodash.pick';
+import 'nanoid';
+import '../Checkbox/Checkbox.styl.js';
+import '../Chip/Chip.styl.js';
+import '../Tooltip/Tooltip.styl.js';
+import '../Card/Card.js';
+import '../Container/Container.js';
+import '../DatePicker/DatePicker.styl.js';
+import 'moment';
+import '../DatePickerInput/DatePickerInput.styl.js';
+import '../Dialogue/Dialogue.js';
+import '../../tools/queryParams.js';
+import '../Draggable/Draggable.styl.js';
+import '../DropZone/DropZone.styl.js';
+import '../Expand/Expand.styl.js';
+import '../Flex/Flex.styl.js';
+import '../Form/Form.styl.js';
+import '../Form/Validator.js';
+import '../Form/SubmitButtons/SubmitButtons.styl.js';
+import '../Gallery/Gallery.styl.js';
+import '../Heading/Heading.js';
+import '../InputFile/InputFile.styl.js';
+import '../InputFile/Item/Item.styl.js';
+import '../../services/i18n.js';
+import '../Portal/Portal.js';
+import '../Paranja/Paranja.styl.js';
+import '../LightBox/LightBox.styl.js';
+import { Menu } from '../Menu/Menu.js';
+import '../Notifications/store.js';
+import '../Notifications/Notifications.styl.js';
+import '../PopupMenu/PopupMenu.styl.js';
+import '../Progress/Progress.styl.js';
+import '../ProgressCircular/ProgressCircular.styl.js';
+import '../RadioGroup/RadioGroupContext.js';
+import '../RadioButton/RadioButton.styl.js';
+import '../RadioGroup/RadioGroup.styl.js';
+import '../Router/Router.js';
+import '../Table/Table.styl.js';
+import '../Tabs/Tabs.styl.js';
+import '../TextShimmer/TextShimmer.js';
+import '../Text/Text.js';
+import '../Theme/Theme.defaults.js';
+import '../Theme/ThemeProvider.js';
+import '../Virtualized/Virtualized.styl.js';
+import '../Virtualized/List/List.styl.js';
+import ListScroll from '../Virtualized/List/ListScroll.js';
+import '../Toggle/Toggle.styl.js';
+
+const SIZE_TO_ITEM_HEIGHT = {
+    xs: 24,
+    s: 30,
+    m: 40,
+    l: 50,
+    xl: 58,
+};
+const getTotalCount = (total, newItemsCount = 0, offset = 0, pageSize = 20) => {
+    if (total !== undefined)
+        return total;
+    return offset + (newItemsCount === pageSize ? 1 : 0);
+};
+function Autocomplete(props) {
+    const { className, value, onChange, size = 'm', getOptions, onSelect, items, itemHeight = SIZE_TO_ITEM_HEIGHT[size], pageSize = 20, debounceDelay = 300, round = false, blur = false, selectable = false, defaultSelected, scrollToSelected = false, inputProps = {}, popupProps = {}, menuProps = {}, scrollProps = {}, loadingPlaceholder, isOpen, } = props;
+    const isMounted = useIsMounted();
+    const [filteredItems, setFilteredItems] = useState([]);
+    const [itemsWithoutFilter, setItemsWithoutFilter] = useState(() => items ?? []);
+    const [currentFilter, setCurrentFilter] = useState('');
+    const [currentOffset, setCurrentOffset] = useState(0);
+    const [totalCount, setTotalCount] = useState(0);
+    const [scrollTop, setScrollTop] = useState(undefined);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [isFocused, setIsFocused] = useState(isOpen);
+    const [selectedId, setSelectedId] = useState(null);
+    const [selectedLabel, setSelectedLabel] = useState(null);
+    const isFocusedRef = useRef(false);
+    const searchValRef = useRef(value);
+    const [searchValue, _setSearchValue] = useState(value);
+    const setSearchValue = (val) => {
+        searchValRef.current = val;
+        _setSearchValue(val);
+    };
+    const currentRequest = useRef('');
+    const savedScrollTopRef = useRef(undefined);
+    const defaultSelectedAppliedRef = useRef(false);
+    // @ts-ignore
+    const inputRef = useRef(null);
+    const inputDisplayValue = selectable && !isFocused && selectedLabel != null
+        ? selectedLabel
+        : searchValue;
+    const displayItems = currentFilter
+        ? filteredItems
+        : itemsWithoutFilter.length
+            ? itemsWithoutFilter
+            : (items ?? []);
+    const displayCount = displayItems.length;
+    const hasMore = totalCount > 0 && displayCount < totalCount;
+    const classes = cn(S.root, className, popupProps.className);
+    const mergedPopupIsOpen = isOpen !== undefined ? isOpen : popupProps?.isOpen;
+    const handleFocus = (e) => {
+        isFocusedRef.current = true;
+        setIsFocused(true);
+        if (!scrollToSelected || !selectable || !selectedId) {
+            const saved = savedScrollTopRef.current;
+            if (saved != null && saved > 0) {
+                setScrollTop(saved);
+                requestAnimationFrame(() => setScrollTop(undefined));
+            }
+        }
+        inputProps?.onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        isFocusedRef.current = false;
+        setIsFocused(false);
+        inputProps?.onBlur?.(e);
+    };
+    const handleInputChange = (e, value) => {
+        const val = (value || e?.target.value) ?? '';
+        setSearchValue(val);
+        onChange(e, val);
+        if (!val) {
+            savedScrollTopRef.current = undefined;
+            setCurrentFilter('');
+            setFilteredItems([]);
+            setItemsWithoutFilter(items ?? []);
+            setCurrentOffset(0);
+            setTotalCount(0);
+            setScrollTop(0); // Reset scroll when filter is cleared
+        }
+        else {
+            savedScrollTopRef.current = undefined;
+            setCurrentFilter(val);
+            setCurrentOffset(0);
+            setScrollTop(0); // Reset scroll when filter changes
+            fetchOptions(val, 0);
+        }
+        return true;
+    };
+    const handleSelect = (option) => {
+        if (selectable) {
+            setSelectedId(option.id);
+            setSelectedLabel(option.label);
+            onSelect?.(option);
+            return;
+        }
+        setSearchValue(option.label);
+        setCurrentFilter(option.label);
+        setFilteredItems([]);
+        setCurrentOffset(0);
+        setTotalCount(0);
+        fetchOptionsCore(option.label, 0);
+        onSelect?.(option);
+        // Uncontrolled only: refocusing fires input onFocus; with controlled isOpen that often reopens
+        // the popup right after onSelect closed it (see ControllablePopup pattern).
+        if (isOpen === undefined) {
+            requestAnimationFrame(() => {
+                const input = inputRef.current;
+                if (!input)
+                    return;
+                input.focus();
+                input.setSelectionRange(option.label.length, option.label.length);
+            });
+        }
+    };
+    const isPopupOpenForInput = isOpen !== undefined ? isOpen : isFocused;
+    const { focusedIndex, setFocusedIndex } = useListKeyboardControl({
+        isActive: isPopupOpenForInput,
+        itemsCount: displayItems.length,
+        onSelect: index => handleSelect(displayItems[index]),
+    });
+    const fetchOptionsCore = useCallback(async (filter, offset) => {
+        const requestKey = `${filter}:${offset}`;
+        currentRequest.current = requestKey;
+        if (offset === 0) {
+            setIsLoading(true);
+        }
+        else {
+            setIsLoadingMore(true);
+        }
+        try {
+            const result = await getOptions(filter, offset);
+            const newOptions = result.items;
+            const total = result.total;
+            if (!isMounted.current)
+                return;
+            if (currentRequest.current !== requestKey)
+                return;
+            const newTotal = getTotalCount(total, newOptions.length, offset + newOptions.length, pageSize);
+            if (filter) {
+                if (offset === 0) {
+                    savedScrollTopRef.current = undefined;
+                    setFilteredItems(newOptions);
+                    setScrollTop(0); // Reset scroll when new filter results load
+                }
+                else {
+                    setFilteredItems(prev => [...prev, ...newOptions]);
+                }
+                setCurrentOffset(offset + newOptions.length);
+                setTotalCount(newTotal);
+            }
+            else {
+                if (offset === 0) {
+                    savedScrollTopRef.current = undefined;
+                    setItemsWithoutFilter(newOptions);
+                    setScrollTop(0); // Reset scroll when loading initial items
+                }
+                else {
+                    setItemsWithoutFilter(prev => [...prev, ...newOptions]);
+                }
+                setCurrentOffset(offset + newOptions.length);
+                setTotalCount(newTotal);
+            }
+            // Clear scrollTop after reset to allow normal scrolling
+            if (offset === 0) {
+                requestAnimationFrame(() => {
+                    setScrollTop(undefined);
+                });
+            }
+        }
+        catch (error) {
+            if (offset === 0) {
+                if (filter) {
+                    setFilteredItems([]);
+                }
+                else {
+                    setItemsWithoutFilter(items ?? []);
+                }
+                setCurrentOffset(0);
+                setTotalCount(0);
+            }
+        }
+        finally {
+            setIsLoading(false);
+            setIsLoadingMore(false);
+        }
+    }, [getOptions, isMounted, pageSize, items]);
+    const fetchOptions = useMemo(() => debounce(fetchOptionsCore, debounceDelay), [fetchOptionsCore, debounceDelay]);
+    const handleScroll = useCallback(({ scrollTop: top }) => {
+        savedScrollTopRef.current = top;
+    }, []);
+    const handleScrollEnd = useCallback(() => {
+        if (!hasMore || isLoading || isLoadingMore)
+            return;
+        const filter = currentFilter;
+        const offset = currentOffset;
+        if (offset > 0) {
+            setIsLoadingMore(true);
+            requestAnimationFrame(() => {
+                fetchOptionsCore(filter, offset);
+            });
+        }
+        else {
+            fetchOptionsCore(filter, offset);
+        }
+    }, [
+        currentFilter,
+        hasMore,
+        isLoading,
+        isLoadingMore,
+        currentOffset,
+        fetchOptionsCore,
+    ]);
+    useEffect(() => {
+        if (typeof value !== 'string')
+            return;
+        setSearchValue(value);
+        if (selectable && value) {
+            setSelectedLabel(value);
+        }
+        if (!value) {
+            savedScrollTopRef.current = undefined;
+            setCurrentFilter('');
+            setFilteredItems([]);
+            setItemsWithoutFilter(items ?? []);
+            setCurrentOffset(0);
+            setTotalCount(0);
+            setScrollTop(0); // Reset scroll when value is cleared
+        }
+        else if (isFocusedRef.current) {
+            savedScrollTopRef.current = undefined;
+            setCurrentFilter(value);
+            setCurrentOffset(0);
+            setScrollTop(0); // Reset scroll when filter changes
+            fetchOptions(value, 0);
+        }
+    }, [value, selectable]);
+    useEffect(() => {
+        if (selectable && !value) {
+            setSelectedId(null);
+            setSelectedLabel(null);
+            defaultSelectedAppliedRef.current = false;
+        }
+    }, [selectable, value]);
+    useEffect(() => {
+        if (selectable &&
+            defaultSelected &&
+            !defaultSelectedAppliedRef.current &&
+            displayItems.length) {
+            const item = displayItems.find(o => o.id === defaultSelected);
+            if (item) {
+                defaultSelectedAppliedRef.current = true;
+                setSelectedId(item.id);
+                setSelectedLabel(item.label);
+            }
+        }
+    }, [selectable, defaultSelected, displayItems]);
+    useEffect(() => {
+        if (!currentFilter && items?.length) {
+            setItemsWithoutFilter(items);
+        }
+    }, [currentFilter, items]);
+    useEffect(() => {
+        const open = isOpen ?? isFocused;
+        if (open && !currentFilter && items?.length && totalCount === 0) {
+            fetchOptionsCore('', 0);
+        }
+    }, [
+        isOpen,
+        isFocused,
+        currentFilter,
+        items?.length,
+        totalCount,
+        fetchOptionsCore,
+    ]);
+    const renderItem = useCallback((itemProps) => {
+        const option = displayItems[itemProps.key];
+        if (!option)
+            return null;
+        const itemPropsForRender = {
+            option,
+            key: itemProps.key,
+            className: cn(S.option, itemProps.className),
+            style: itemProps.style,
+            focused: focusedIndex === itemProps.key,
+            isSelected: selectable && option.id === selectedId,
+            onClick: () => handleSelect(option),
+            onMouseEnter: () => setFocusedIndex(itemProps.key),
+        };
+        if (props.renderItem) {
+            return props.renderItem(itemPropsForRender);
+        }
+        return (jsx(Menu.Item, { ...itemProps, focused: itemPropsForRender.focused, selected: itemPropsForRender.isSelected, className: itemPropsForRender.className, onClick: itemPropsForRender.onClick, onMouseEnter: itemPropsForRender.onMouseEnter, style: { ...itemProps.style, height: itemHeight }, children: option.render ? option.render(option) : option.label }));
+    }, [
+        displayItems,
+        focusedIndex,
+        selectedId,
+        selectable,
+        handleSelect,
+        setFocusedIndex,
+        props.renderItem,
+        itemHeight,
+    ]);
+    const LoadingPlaceholder = loadingPlaceholder ?? (jsxs("div", { className: S.loadingPlaceholder, children: [isLoadingMore && jsx(Shimmer, { size: size, round: round }), "Loading..."] }));
+    const optionsList = useMemo(() => {
+        if (!displayItems.length) {
+            return !selectable && isLoading ? LoadingPlaceholder : null;
+        }
+        const computedTotalCount = totalCount > 0 ? totalCount : displayItems.length;
+        const open = isOpen ?? isFocused;
+        let initialScrollTop;
+        if (open && scrollToSelected && selectable && selectedId) {
+            const idx = displayItems.findIndex(o => o.id === selectedId);
+            initialScrollTop =
+                idx >= 0 ? Math.max(0, idx * itemHeight - itemHeight) : undefined;
+        }
+        return (jsx(ListScroll, { ...(selectable && { id: selectedId ?? 'none' }), ...(typeof initialScrollTop === 'number' && {
+                initialScrollTop,
+            }), className: cn(S.options, menuProps.className), scrollProps: {
+                y: true,
+                ...scrollProps,
+                className: cn(S.scroll, scrollProps?.className),
+            }, itemHeight: itemHeight, itemsCount: displayItems.length, totalCount: computedTotalCount, overlapCount: 10, pageSize: pageSize, scrollTop: scrollTop, onScroll: handleScroll, onScrollEnd: handleScrollEnd, renderItem: renderItem, contentAfter: hasMore && LoadingPlaceholder }));
+    }, [
+        displayItems,
+        focusedIndex,
+        totalCount,
+        hasMore,
+        isLoading,
+        isLoadingMore,
+        itemHeight,
+        pageSize,
+        handleScroll,
+        handleScrollEnd,
+        renderItem,
+        size,
+        round,
+        menuProps.className,
+        scrollProps,
+        scrollTop,
+        selectable,
+        selectedId,
+        isOpen,
+        isFocused,
+        scrollToSelected,
+        LoadingPlaceholder,
+    ]);
+    return (jsx(Popup, { className: classes, focusControl: true, round: round, size: size, blur: blur, direction: "bottom", ...popupProps, isOpen: mergedPopupIsOpen, trigger: jsx(Input, { ref: inputRef, 
+            // @ts-ignore
+            size: size, round: round, ...inputProps, value: inputDisplayValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, className: cn(inputProps.className, selectable && !isFocused && S.inputSelectableDisplay) }), content: optionsList, contentProps: {
+            ...popupProps?.contentProps,
+            className: cn(S.popupContent, popupProps?.contentProps?.className),
+        } }));
+}
+
+export { Autocomplete };

package/dist/esm/src/components/Autocomplete/Autocomplete.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Autocomplete_root__86RQs{position:relative}.Autocomplete_inputSelectableDisplay__rgFwu{overflow:hidden;text-overflow:ellipsis}.Autocomplete_popupContent__Aet6P{margin-top:8px;width:100%}.Autocomplete_scroll__bFG6f{height:200px}.Autocomplete_options__NtttU{max-height:200px;overflow-y:auto}.Autocomplete_option__uBuih{cursor:pointer;padding:8px 12px;position:absolute}.Autocomplete_option__uBuih>span{align-items:center;display:flex}.Autocomplete_loadingPlaceholder__Dn0dT{padding:8px 12px;text-align:center}.Autocomplete_shimmer__s6rri{height:100%;left:0;position:absolute;top:0;width:100%}",S={root:"Autocomplete_root__86RQs",inputSelectableDisplay:"Autocomplete_inputSelectableDisplay__rgFwu",popupContent:"Autocomplete_popupContent__Aet6P",scroll:"Autocomplete_scroll__bFG6f",options:"Autocomplete_options__NtttU",option:"Autocomplete_option__uBuih",loadingPlaceholder:"Autocomplete_loadingPlaceholder__Dn0dT",shimmer:"Autocomplete_shimmer__s6rri"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Autocomplete.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Autocomplete_root__86RQs{position:relative}.Autocomplete_inputSelectableDisplay__rgFwu{overflow:hidden;text-overflow:ellipsis}.Autocomplete_popupContent__Aet6P{margin-top:8px;width:100%}.Autocomplete_scroll__bFG6f{height:200px}.Autocomplete_options__NtttU{max-height:200px;overflow-y:auto}.Autocomplete_option__uBuih{cursor:pointer;padding:8px 12px;position:absolute}.Autocomplete_option__uBuih>span{align-items:center;display:flex}.Autocomplete_loadingPlaceholder__Dn0dT{padding:8px 12px;text-align:center}.Autocomplete_shimmer__s6rri{height:100%;left:0;position:absolute;top:0;width:100%}";
+var S = {"root":"Autocomplete_root__86RQs","inputSelectableDisplay":"Autocomplete_inputSelectableDisplay__rgFwu","popupContent":"Autocomplete_popupContent__Aet6P","scroll":"Autocomplete_scroll__bFG6f","options":"Autocomplete_options__NtttU","option":"Autocomplete_option__uBuih","loadingPlaceholder":"Autocomplete_loadingPlaceholder__Dn0dT","shimmer":"Autocomplete_shimmer__s6rri"};
+styleInject(css_248z);
+
+export { S as default };