@apia/components 3.0.18 → 3.0.21

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

@@ -5082,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,
@@ -7894,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