@ntbjs/react-components 2.0.13 → 3.0.0-rc.1

package/types/components/inputs/ActionButton/ActionButton.styled.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Props of the one styled component in this file. Value types from
+ * `ActionButton.tsx`'s propTypes; all optional per §J.5 — and here that is not
+ * theoretical, `ActionButton.tsx` spreads `{...props}` onto this root, which is the
+ * measured TS2769 case.
+ *
+ * `disabled` is deliberately ABSENT: it is a real `ButtonHTMLAttributes` member, the
+ * component passes it, and the template only uses the `&:disabled` CSS pseudo-class
+ * rather than reading the prop. Nothing to declare. §J.9, first row.
+ */
+export interface ActionButtonStyleProps {
+    /**
+     * `actionWidthHeight` — `PropTypes.array`, `[width, height]` in px, defaulted to
+     * `[40, 40]` BY THE COMPONENT (which is not a default here, so still optional).
+     * `number[]` rather than `[number, number]`: the propTypes accept any array and the
+     * template only ever indexes `[0]` and `[1]`.
+     *
+     * NOTE FOR THE `strictNullChecks` FLIP: these seven reads are UNGUARDED
+     * (`props.$actionWidthHeight[0]`, not `props.$actionWidthHeight?.[0]`), unlike every
+     * other transient prop in the converted files. They compile today because
+     * `strictNullChecks` is off; when it is turned on at the end of the migration this
+     * is the site that needs either `?.` plus a fallback or a required prop, and either
+     * is a behaviour question rather than a typing one — so it is recorded, not changed
+     * here. (`$backgroundColors` below is already read with `?.`.)
+     */
+    $actionWidthHeight?: number[];
+    /** `backgroundColors` — `PropTypes.arrayOf(PropTypes.string)`, `[dark, light]`. */
+    $backgroundColors?: string[];
+    /** `active` — `PropTypes.bool`. Locks the hover state. */
+    $active?: boolean;
+    /** `useShadow` — `PropTypes.bool`. Component defaults it to `false`. */
+    $useShadow?: boolean;
+}
+export declare const ActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, ActionButtonStyleProps>, never>> & string;

package/types/components/inputs/ActionButton/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ActionButton';

package/types/components/inputs/Button/Button.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import * as S from './Button.styled';
+type ButtonOwnProps = {
+    /**
+     * On-click effect for the main button
+     */
+    onClickEffect?: (...args: any[]) => any;
+    /**
+     * Whether the button is a "single action button". For single action buttons,
+     * the entire button opens the dropdown menu, not just the arrow.
+     */
+    singleAction?: boolean;
+    /**
+     * Whether the button must have an active dropdown menu.
+     */
+    activeDropdown?: boolean;
+    /**
+     * An array containing nodes of the `ContextMenuItem` component
+     */
+    dropdownItems?: React.ReactNode;
+    /**
+     * Whether the button should be styled as a secondary button
+     */
+    secondary?: boolean;
+    /**
+     * Whether the button should be styled with borders
+     */
+    outlined?: boolean;
+    /**
+     * Whether the button should customize the border width
+     */
+    border?: number;
+    /**
+     * Whether the button should be of 100% width
+     */
+    block?: boolean;
+    /**
+     * Optional icon to be displayed on the left side of the button
+     */
+    icon?: React.ReactElement<any>;
+    /**
+     * Which size variation should be used
+     */
+    size?: 'x-small' | 'small' | 'normal' | 'large';
+    /**
+     * Whether the button should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should be initiated in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Optional custom classnames for the HTML element
+     */
+    className?: string;
+    /**
+     * Main content of the button
+     */
+    children: any;
+    /**
+     * Gap between arrow and text in single action button
+     */
+    singleActionGap?: number;
+    /**
+     * Custom  min-width
+     */
+    width?: number;
+};
+/**
+ * Buttons communicate actions that users can take.
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Button } from '@ntbjs/react-components/inputs'
+ * // or
+ * import Button from '@ntbjs/react-components/inputs/Button'
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<Omit<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, S.ButtonStyleProps>, never>, "ref">, keyof ButtonOwnProps> & ButtonOwnProps & React.RefAttributes<any>>;
+export default Button;

package/types/components/inputs/Button/Button.styled.d.ts

@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react';
+/**
+ * `size` — `PropTypes.oneOf(['x-small', 'small', 'normal', 'large'])`, component default
+ * `'normal'`. Closed on purpose (§J.6): `Button` and `ButtonContent` compare against
+ * three of the four members, so a mistyped size is TS2367 rather than a dead branch.
+ *
+ * IT HAS NO `$`, AND THAT IS A DEFECT. `size` is not a member of
+ * `ButtonHTMLAttributes` (it is an `<input>`/`<select>` attribute), which is why the
+ * five reads of it were TS2339, and `shouldForwardProp` forwards every non-`$` prop —
+ * so `size="normal"` is on every rendered `<button>` and every `ButtonContent`
+ * `<div>` today, and both are in the recorded render baseline. Fix = rename `$size` at
+ * both ends; removes a DOM attribute → C10 with its re-record. §E.4 third case.
+ */
+type ButtonSize = 'x-small' | 'small' | 'normal' | 'large';
+/**
+ * `dropdownItems` — `PropTypes.node`, an array of `ContextMenuItem`s.
+ *
+ * `ReactNode` and not `boolean`: the templates only ever test it for truthiness, but
+ * what is passed is the node itself, and recording what the code does is the rule
+ * (§J.6). It is transient, so it never reaches the DOM.
+ */
+type DropdownItems = ReactNode;
+/**
+ * `Button`'s props — nine of them, which is why they are a named interface here rather
+ * than inline. All optional per §J.5, and here that is load-bearing twice over:
+ * `Button.tsx` spreads `{...props}` onto this root, and it renders `S.Button` at three
+ * sites that pass different subsets (only the two dropdown sites pass
+ * `$singleactiongap`).
+ *
+ * `disabled` is deliberately ABSENT: on a `styled.button` it is a genuine
+ * `ButtonHTMLAttributes` member, so the read at `props.disabled &&` already typechecks
+ * and the attribute belongs on the element (§J.9, first row).
+ */
+export interface ButtonStyleProps {
+    /** `border` — `PropTypes.number`, default `2`. Interpolated as `${…}px`, so a string
+     *  here would already render `border: 2pxpx solid`. */
+    $border?: number;
+    /** `secondary` — `PropTypes.bool`. */
+    $secondary?: boolean;
+    /** `outlined` — `PropTypes.bool`. */
+    $outlined?: boolean;
+    /** `dropdownItems` — see `DropdownItems`. */
+    $dropdownItems?: DropdownItems;
+    /** `block` — `PropTypes.bool`, default `false`. Full-width. */
+    $block?: boolean;
+    /** `size` — see `ButtonSize`. Leaks to the DOM; see there. */
+    size?: ButtonSize;
+    /** `singleAction` — `PropTypes.bool`, default `false`. */
+    $singleaction?: boolean;
+    /** `singleActionGap` — `PropTypes.number`, default `34`. Interpolated as `${…}px`.
+     *  Passed only at the two dropdown `S.Button` sites, which is one of the reasons
+     *  every member here is optional. */
+    $singleactiongap?: number;
+    /** `width` — `PropTypes.number`, the custom `min-width`, interpolated as `${…}px`. */
+    $width?: number;
+}
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, ButtonStyleProps>, never>> & string;
+export declare const ButtonContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    /** `size` — see `ButtonSize`. Leaks onto this `<div>` too; see there. */
+    size?: ButtonSize;
+    /** `loadingState` — the component's own state, so `boolean`. */
+    $loading?: boolean;
+    /** `singleAction` — passed only at the single-action site. */
+    $singleaction?: boolean;
+}>, never>> & string;
+export declare const LoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    $loading?: boolean;
+}>, never>> & string;
+export declare const LoadingIndicatorSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, import("react").SVGProps<SVGSVGElement>>, never>, never>> & string;
+export declare const LoadingIndicatorSvgCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, import("react").SVGProps<SVGCircleElement>>, never>, never>> & string;
+export declare const ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, {
+    $block?: boolean;
+}>, never>> & string;
+/** The dropdown-state props the three container `<div>`s share. */
+interface DropdownContainerStyleProps {
+    /** `activeDropdown` — `PropTypes.bool`, default `false`. */
+    $activeDropdown?: boolean;
+    /** `dropdownItems` — see `DropdownItems`. */
+    $dropdownItems?: DropdownItems;
+}
+export declare const MainButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, DropdownContainerStyleProps & {
+    /** `block` — full-width. */
+    $block?: boolean;
+    /** `outlined` — suppresses the wrapper background. */
+    $outlined?: boolean;
+    /** `secondary` — picks the grey background over the emerald one. */
+    $secondary?: boolean;
+}>, never>> & string;
+export declare const MainButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, DropdownContainerStyleProps & {
+    /** `block` — full-width. */
+    $block?: boolean;
+    /** DEAD READ, see above. Nothing passes it; `$outlined` is what arrives. */
+    outlined?: boolean;
+}>, never>> & string;
+export declare const MainButtonContainerSingle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, DropdownContainerStyleProps & {
+    /** DEAD READ, see above: the single-action layout never applies. */
+    $singleaction?: boolean;
+}>, never>> & string;
+export declare const DropdownButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    $singleaction?: boolean;
+}>, never>> & string;
+export {};

package/types/components/inputs/Button/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Button';

package/types/components/inputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+type Props = {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox should be checked or unchecked by default
+     */
+    defaultChecked?: boolean;
+    /**
+     * The checkbox' label
+     */
+    label?: string | React.ReactElement<any>;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the checkbox is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * The checkbox' name
+     */
+    name?: string;
+    /**
+     * The checkbox' value
+     *
+     * `string | number`, not the `PropTypes.string` this replaces. `MultiLevelCheckbox`
+     * renders `<Checkbox value={node.value} …>` and a node's value is
+     * `MultiLevelCheckboxNodeValue = string | number`, so a numeric value reaches this
+     * prop through a public API today and `oneOf`-style validation never noticed because
+     * the two components' propTypes were never compared. The value is forwarded
+     * unchanged onto `<input type="checkbox">`, whose own React type is
+     * `string | number | readonly string[]`, so this widening records reality and emits
+     * identical markup.
+     */
+    value?: string | number;
+    /**
+     * Description of the checkbox
+     */
+    description?: string;
+    /**
+     * Whether there's an error. Error message can be passed as a `string` to be displayed below the checkbox.
+     */
+    error?: boolean | string;
+    /**
+     * Whether the checkbox is indeterminate. This will display a dash in the checkbox instead of the default checkmark.
+     */
+    indeterminate?: boolean;
+    /**
+     * Mutes the color of the visual checkbox – Does not mute the label or other parts of the Checkbox
+     */
+    muted?: boolean;
+    /**
+     * On-change effect
+     */
+    onChange?: (...args: any[]) => any;
+    /**
+     * On-blur effect
+     */
+    onBlur?: (...args: any[]) => any;
+    /**
+     * Optional class name for the HTML element
+     */
+    className?: string;
+    /**
+     * Optional in-line styling for the HTML element
+     */
+    style?: any;
+    /**
+     * Visual variant. `green` (default) uses emerald fill. `black` uses themed black/white square (24px, rounded), inverted check.
+     */
+    variant?: 'green' | 'black';
+};
+/**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
+ * If you have a single option, avoid using a checkbox and use an on/off switch (`Switch` component) instead.
+ *
+ *
+ * ### Import
+ *
+ * ``` js
+ * import { Checkbox } from '@ntbjs/react-components/inputs'
+ * // or
+ * import Checkbox from '@ntbjs/react-components/inputs/Checkbox'
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export default Checkbox;

package/types/components/inputs/Checkbox/Checkbox.styled.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `variant` — `PropTypes.oneOf(['green', 'black'])`, carried as `$variant` by both
+ * `Checkbox` and `CheckboxLabel`. Closed on purpose (§J.6): both templates compare
+ * `=== 'black'`, and with a closed union a mistyped variant name is TS2367 rather
+ * than a branch that silently never fires.
+ */
+type CheckboxVariant = 'green' | 'black';
+export declare const Checkbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
+    $variant?: CheckboxVariant;
+}>, never>> & string;
+export declare const CheckIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const IndeterminateCheckIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+interface CheckboxLabelStyleProps {
+    /** `muted` — `PropTypes.bool`. Fades the `&::before` box only. Leaks to the DOM. */
+    muted?: boolean;
+    /** `readOnly` — `PropTypes.bool`. Leaks to the DOM. */
+    readOnly?: boolean;
+    /** `disabled` — `PropTypes.bool`. Leaks to the DOM. */
+    disabled?: boolean;
+    /** `variant` — see `CheckboxVariant`. Properly transient. */
+    $variant?: CheckboxVariant;
+}
+export declare const CheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>, CheckboxLabelStyleProps>, never>> & string;
+export declare const CheckboxVisualLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, {
+    /**
+     * `error` — the component derives `hasError` (`isBoolean(error) ? error :
+     * !isEmpty(error)`) and passes that, so `boolean` and not the
+     * `bool | string` that `error`'s own propTypes allow.
+     */
+    $error?: boolean;
+}>, never>> & string;
+export {};

package/types/components/inputs/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Checkbox';

package/types/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.d.ts

@@ -0,0 +1,242 @@
+import React from 'react';
+import * as S from './CompactAutocompleteSelect.styled';
+export type CompactAutocompleteSelectOwnProps = {
+    /**
+     * The label of the input field – leave `undefined` to hide the label
+     */
+    label?: string;
+    /**
+     * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. "Search categories..."
+     */
+    placeholder?: string;
+    /**
+     * `Array` of `objects` that populate the select menu. This is only needed
+     * when asynchronous option fetching with the `loadOptions` prop is not used.
+     *
+     * **Note:**
+     * <br />This will be overridden by the `loadOptions` prop if both props are set.
+     */
+    availableOptions?: any[];
+    /**
+     * `Array` of `objects` containing the selected options.
+     */
+    selectedOption?: any;
+    /**
+     * Function with a `Promise` returning filtered options.
+     *
+     * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)
+     * for details.
+     *
+     * **Note:**
+     * <br />This will override the `availableOptions` prop if both props are set.
+     */
+    loadOptions?: (...args: any[]) => any;
+    /**
+     * Function for custom "Loading..." message while waiting for the first page
+     * from `loadOptions` to resolve. Defaults to "Loading..." if no function is provided.
+     */
+    loadingMessageFunc?: (...args: any[]) => any;
+    /**
+     * Callback function for formatting the message displayed in the dropdown when there
+     * are no matching options, and the user has permission to create new options.
+     * The callback function will be given the current input value as an argument.
+     */
+    createNewOptionMessageFunc?: (...args: any[]) => any;
+    /**
+     * If the list of options is empty, or if the current input value doesn't match
+     * any of the available options and the user doesn't have permission to add options,
+     * this function will be called and passed the current input value as an argument.
+     */
+    noOptionsMessageFunc?: (...args: any[]) => any;
+    /**
+     * Whether the value is read only
+     */
+    readOnly?: boolean;
+    /**
+     * Displays a grey background to show that value is editable
+     */
+    edit?: boolean;
+    /**
+     * Whether the component is hidden or visible.
+     */
+    hidden?: boolean;
+    /**
+     * There is an error present – 'error be prioritized over warnings if both are set to 'true'.
+     */
+    error?: boolean | string;
+    /**
+     * There is a warning present.
+     */
+    warning?: boolean | string;
+    /**
+     * Callback function for sending updates to the backend whenever the selected values are updated.
+     * See [Update handling](#update-handling) for details.
+     */
+    onUpdateCallback?: (...args: any[]) => any;
+    /**
+     * Whether the user have permission to create new options
+     */
+    creatable?: boolean;
+    /**
+     * Whether the multi-select should be disabled.
+     * The user will not be able to trigger the on-click effect of the selected options.
+     */
+    disabled?: boolean;
+    /**
+     * Define the type based on error, warning, loading and success.
+     */
+    type?: '' | 'error' | 'warning' | 'instructions-warning' | 'loading' | 'success';
+    /**
+     * Description ToolTip text.
+     */
+    descriptionToolTip?: string;
+    /**
+     * Icon element – E.g: `icon={<Spinner />}`
+     */
+    loadingIcon?: React.ReactElement<any>;
+    /**
+     * Icon element – E.g: `icon={<Check />}`
+     */
+    successIcon?: React.ReactElement<any>;
+};
+export type CompactAutocompleteSelectProps = Omit<React.ComponentPropsWithoutRef<typeof S.AsyncCreatableAutocompleteSelect>, keyof CompactAutocompleteSelectOwnProps> & CompactAutocompleteSelectOwnProps;
+/**
+ * Select input control with autocomplete, async and creatable support.
+ *
+ * This control allows users to search through a predefined set of options, asynchronously load additional options,
+ * and even create new options on-the-fly. It combines the benefits of autocomplete functionality,
+ * asynchronous data fetching, and creatable option support.
+ *
+ * The component uses [react-select](https://react-select.com/) for the main select functionality,
+ * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.
+ *
+ * <br /> ### Import
+ *
+ * ``` js
+ * import { CompactAutocompleteSelect } from '@ntbjs/react-components/inputs'
+ * // or
+ * import CompactAutocompleteSelect from '@ntbjs/react-components/inputs/CompactAutocompleteSelect'
+ * ```
+ *
+ *  <br /> ## Option `object` format
+ * Options are represented by an `Array` of `objects` with the following format:
+ *
+ * ``` js
+ * {
+ *   value: "Example",
+ *   label: "Example"
+ * }
+ * ```
+ * The `label` is what will visible to the end-user. Whether `value` and `label`
+ * should be different will depend on your use-case, but they are not required to.
+ *
+ *  <br /> ## Update handling
+ * Changes from the end-user to the selected/available options can be handled with a callback function
+ * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.
+ *
+ * The callback function will be passed two arguments:
+ * * `action: string`
+ * * `updatedOption: object`
+ *
+ * <br />#### `action`
+ * A `string` indicating what kind of update was made.
+ *
+ * The possible values of `action` are:
+ * * `create-option`: an option that didn't exist in the original list of available options were added
+ * * `select-option`: an option was selected
+ * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu
+ * * `remove-value`: an option was de-selected by clicking the X on the option label/box
+ * * `pop-value`: an option was de-selected with backspace
+ * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)
+ *
+ * <br />#### `updatedOption`
+ * Option `object`of the updated option:
+ *
+ * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was
+ * not part of the original list of available options, i.e. created by the user in the current "session".
+ * This is the case regardless of whether the list is provided through `availableOptions` or
+ * asynchronously through `loadOptions`.
+ *
+ *
+ * <br />## Asynchronous fetching/filtering with pagination
+ * The list of available options can be fetched and filtered asynchronously with a `Promise`
+ * passed through the `loadOptions` prop.
+ *
+ * It will be passed two arguments:
+ *
+ * * `inputValue: string`: current input value/search
+ * * `prevOptions: Array`: previously loaded options for the current search
+ *
+ * The function is triggered and the first page is fetched when the dropdown menu opens.
+ * Whenever the user scrolls down to the bottom of the list, `loadOptions` will
+ * be triggered again to fetch the next page.
+ *
+ * The `Promise` should return an `object` with the following keys:
+ *
+ * ``` js
+ * {
+ *   options: Array,
+ *   hasMore: boolean
+ * }
+ * ```
+ *
+ * `options` should contain the current page of options. It will be concatenated to the previous
+ * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.
+ *
+ * **Example:**
+ *
+ * ``` js
+ *
+ * const availableOptions = [
+ *   { value: "Example 1", label: "Example 1" },
+ *   ...
+ *   { value: "Example N", label: "Example N" }
+ * ];
+ *
+ * const filterOptions = inputValue => {
+ *   return availableOptions.filter(option => {
+ *     return option.label.toLowerCase().includes(inputValue.toLowerCase());
+ *   });
+ * };
+ *
+ * const loadOptionsFunc = (inputValue, prevOptions) => {
+ *   const currentLength = prevOptions.length;
+ *   const pageLength = 10;
+ *
+ *   let filteredOptions;
+ *
+ *   if (inputValue) {
+ *     filteredOptions = filterOptions(inputValue);
+ *   } else {
+ *     filteredOptions = availableOptions;
+ *   }
+ *
+ *   const hasMore = filteredOptions.length > currentLength + pageLength;
+ *   const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);
+ *
+ *   return {
+ *     options: slicedOptions,
+ *     hasMore
+ *    };
+ * };
+ *
+ * const loadOptions = (inputValue, prevOptions) => {
+ *   return new Promise(resolve => {
+ *     resolve(loadOptionsFunc(inputValue, prevOptions));
+ *   });
+ * };
+ * ```
+ *
+ * While waiting for the `Promise` to resolve, the component will be in a loading state.
+ * The loading state is showcased in the "Primary With Fetching Timeout" Story.
+ *
+ * <br />#### Without asynchronous fetching/filtering
+ * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined
+ * and pass the `Array` of all available options to the `availableOptions` prop instead.
+ * The component will use the built-in filtering on `label` from `react-select`, and the options
+ * will not be paginated.
+ *
+ * <br />
+ */
+declare const CompactAutocompleteSelect: React.ForwardRefExoticComponent<CompactAutocompleteSelectProps & React.RefAttributes<any>>;
+export default CompactAutocompleteSelect;