@apia/components 3.0.17 → 3.0.20

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ReactNode, Ref, RefObject, ChangeEventHandler, MouseEvent as MouseEvent$1, KeyboardEvent, FC, FunctionComponent, ForwardedRef, ComponentType, ReactElement } from 'react';
+import React__default, { ReactNode, Ref, RefObject, ChangeEventHandler, DetailedHTMLProps, TextareaHTMLAttributes, MouseEvent as MouseEvent$1, KeyboardEvent, FC, FunctionComponent, ForwardedRef, ComponentType, ReactElement } from 'react';
 import * as _apia_util from '@apia/util';
 import { IOnFocusConfiguration, TFocusRetriever, TId as TId$1, EventEmitter, StatefulEmitter, TModify, TApiaFilter, TApiaFilterValue } from '@apia/util';
 import { BoxProps, TPalette, ThemeUIStyleObject, IconButtonProps, ButtonProps, ThemeUICSSObject, InputProps, SelectProps } from '@apia/theme';
@@ -1085,6 +1085,12 @@ declare const FieldLabel: React$1.ForwardRefExoticComponent<{
     requiredMarkPosition?: "after" | "before" | undefined;
 } & BoxProps & React$1.RefAttributes<HTMLDivElement>>;
 
+declare const AutogrowTextarea: ((props: DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    error?: boolean;
+}) => React$1.JSX.Element) & {
+    displayName: string;
+};
+
 interface IAccordionItemButton {
     ariaLabel: string;
     /**
@@ -1786,5 +1792,5 @@ declare const SortableList: ((props: {
     displayName: string;
 };
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, type AutocompleteCmpProps, AutocompleteController, type AutocompleteOption, type AutocompleteProps, BaseButton, CalendarModal, Captcha, Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultAccordionItemButton, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, type IAccordionItemButton, type IAccordionItemProps, type IAccordionProps, type IAlert, type IApiaFilter, type ICalendarModal, type IConfirm, type IDialogButtonBar, type IDialogHeader, type IField, type IFieldErrorMessage, type IIconInput, type IOverlay, type IRequiredMark, type IResponsiveComponent, type ISimpleButton, IconButton, IconInput, IconsList, LabelBox, LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, type TAccordionHandler, type TAccordionItemButton, type TApiaButtonType, type TApiaIconButton, type TCheckbox, type TDateProps, type TFieldLabel, type TGetTabsController, type TIcon, type TIconButton, type TIconRenderer, type TIconSize, type TIconsList, type TListbox, type TMenuItem, type TModal, type TModalSize, type TNumberInput, type TNumberInputChangeEvent, type TOnClickNode, type TOnConfirmSelection, type TOnSelectionChange, type TOpenModal, type TSubmenu, type TTab, type TTabLabelRenderer as TTabRenderer, type TToolbarIconButton as TToolDefinition, type TTooltip, type TUseModalConfiguration, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, type AutocompleteCmpProps, AutocompleteController, type AutocompleteOption, type AutocompleteProps, AutogrowTextarea, BaseButton, CalendarModal, Captcha, Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultAccordionItemButton, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, type IAccordionItemButton, type IAccordionItemProps, type IAccordionProps, type IAlert, type IApiaFilter, type ICalendarModal, type IConfirm, type IDialogButtonBar, type IDialogHeader, type IField, type IFieldErrorMessage, type IIconInput, type IOverlay, type IRequiredMark, type IResponsiveComponent, type ISimpleButton, IconButton, IconInput, IconsList, LabelBox, LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, type TAccordionHandler, type TAccordionItemButton, type TApiaButtonType, type TApiaIconButton, type TCheckbox, type TDateProps, type TFieldLabel, type TGetTabsController, type TIcon, type TIconButton, type TIconRenderer, type TIconSize, type TIconsList, type TListbox, type TMenuItem, type TModal, type TModalSize, type TNumberInput, type TNumberInputChangeEvent, type TOnClickNode, type TOnConfirmSelection, type TOnSelectionChange, type TOpenModal, type TSubmenu, type TTab, type TTabLabelRenderer as TTabRenderer, type TToolbarIconButton as TToolDefinition, type TTooltip, type TUseModalConfiguration, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1722,7 +1722,7 @@ const Item = observer(({ tab }) => {
     "aria-controls": `tabpanel-${tab.controller.id}-${tab.state.id}`,
     "aria-selected": tab.state.isOpen ?? false,
     id: `tab-${tab.controller.id}-${tab.id}`,
-    tabIndex: tab.state.isFocused ? 0 : -1,
+    tabIndex: tab.state.isOpen ? 0 : -1,
     role: "tab",
     variant: "inherit"
   };
@@ -1730,31 +1730,37 @@ const Item = observer(({ tab }) => {
 });
 var Item$1 = Item;
 
+function useShowScrollButtons() {
+  const [showScrollButtons, setShowScrollButtons] = useState(false);
+  const [ref, setRef] = useState(null);
+  const controller = useTabsContext();
+  useEffect(() => {
+    if (ref && controller) {
+      const observer = new MutationObserver(([{ addedNodes }]) => {
+        const fixedTabsElement = ref.querySelector(".tabsList__fixedTabs");
+        const hasFixedTabsScroll = (fixedTabsElement?.clientWidth ?? 0) < (fixedTabsElement?.scrollWidth ?? 0);
+        const nonFixedTabsElement = ref.querySelector(".tabs__list");
+        const hasFixedNonTabsScroll = (nonFixedTabsElement?.clientWidth ?? 0) < (nonFixedTabsElement?.scrollWidth ?? 0);
+        setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);
+        if (addedNodes) {
+          ref.querySelector(".tabs__list").scrollLeft = 9999999;
+        }
+      });
+      observer.observe(ref, { childList: true, subtree: true });
+      return () => {
+        observer.disconnect();
+      };
+    }
+    return () => {
+    };
+  }, [controller, ref]);
+  return [showScrollButtons, setRef];
+}
+
 const TabsList = observer(
   ({ arrowsBehavior = "focus" }) => {
     const controller = useTabsContext();
-    const [showScrollButtons, setShowScrollButtons] = React__default.useState(false);
-    const [ref, setRef] = React__default.useState(null);
-    React__default.useEffect(() => {
-      if (ref && controller) {
-        const observer2 = new MutationObserver(([{ addedNodes }]) => {
-          const fixedTabsElement = ref.querySelector(".tabsList__fixedTabs");
-          const hasFixedTabsScroll = (fixedTabsElement?.clientWidth ?? 0) < (fixedTabsElement?.scrollWidth ?? 0);
-          const nonFixedTabsElement = ref.querySelector(".tabs__list");
-          const hasFixedNonTabsScroll = (nonFixedTabsElement?.clientWidth ?? 0) < (nonFixedTabsElement?.scrollWidth ?? 0);
-          setShowScrollButtons(hasFixedTabsScroll || hasFixedNonTabsScroll);
-          if (addedNodes) {
-            ref.querySelector(".tabs__list").scrollLeft = 9999999;
-          }
-        });
-        observer2.observe(ref, { childList: true, subtree: true });
-        return () => {
-          observer2.disconnect();
-        };
-      }
-      return () => {
-      };
-    }, [controller, ref]);
+    const [showScrollButtons, setRef] = useShowScrollButtons();
     const onClickPrev = React__default.useCallback(() => {
       if (arrowsBehavior === "focus")
         controller?.focusPreviousTab();
@@ -1993,7 +1999,7 @@ class TabsController {
         }
       }
       this.state.openTabs.delete(tab);
-      this.getActiveTab().open();
+      this.getActiveTab()?.open();
       this.state.tabs.delete(tab.id);
       this.props?.onCloseTab?.(tab);
     }
@@ -2118,6 +2124,8 @@ class TabsController {
       } catch (e) {
       }
       tab.state.isOpen = true;
+      tab.state.isFocused = true;
+      document.querySelector(`.tabs__item__wrapper[data-id="${tab.id}"]`)?.focus();
       tab.state.onFocus?.(tab);
       if (this.state.openTabs.has(tab)) {
         this.state.openTabs.delete(tab);
@@ -4800,7 +4808,9 @@ const DateInput = React__default.forwardRef(
               `#DateInput${id} input`
             )?.focus();
           },
-          type: "button"
+          type: "button",
+          title: getLabel("btnAiDelete").text,
+          "aria-label": getLabel("btnAiDelete").text
         }
       ),
       [id, onDelete, setCalendarValue]
@@ -5072,6 +5082,52 @@ const FieldLabel = forwardRef(
 );
 FieldLabel.displayName = "FieldLabel";
 
+const AutogrowTextarea = observer(
+  (props) => {
+    const updateHeight = (el) => {
+      const update = () => {
+        const bounding = el.getBoundingClientRect();
+        if (bounding.width > 0) {
+          clearInterval(interval);
+          const copy = el.cloneNode(true);
+          copy.style.opacity = "0";
+          copy.style.position = "fixed";
+          copy.style.left = "-9999px";
+          copy.style.width = `${bounding.width}px`;
+          copy.style.height = "1px";
+          document.body.append(copy);
+          el.style.height = `${copy.scrollHeight}px`;
+          copy.remove();
+        }
+      };
+      const interval = setInterval(update, 100);
+      update();
+    };
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...props,
+        className: `${props.className ?? ""} autogrow_textarea ${props.error ? "invalid_field" : ""}`,
+        onKeyDown: (ev) => {
+          props?.onKeyDown?.(ev);
+          if (!ev.isDefaultPrevented() && ev.code === "Enter" && ev.ctrlKey) {
+            ev.target.closest("form")?.querySelector('button[type="submit"]')?.click();
+          }
+        },
+        ref: (el) => {
+          if (el instanceof HTMLTextAreaElement) {
+            updateHeight(el);
+          }
+        },
+        onChange: (ev) => {
+          props?.onChange?.(ev);
+          updateHeight(ev.target);
+        }
+      }
+    );
+  }
+);
+
 const Checkbox = (props) => {
   return /* @__PURE__ */ jsx(
     Box,
@@ -7884,5 +7940,5 @@ const SortableList = makeStyledComponent(
   UnstyledSortableList
 );
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LabelBox, LinearLoader$1 as LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner$1 as LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar$1 as ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, BaseButton, CalendarModal, Captcha, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, IconButton, IconInput, IconsList, LabelBox, LinearLoader$1 as LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner$1 as LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar$1 as ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
 //# sourceMappingURL=index.js.map