@webiny/admin-ui 6.0.0-alpha.0

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.d.ts

@@ -0,0 +1,122 @@
+import React from "react";
+import { InputPrimitiveProps } from "../../Input";
+import { MultiAutoCompleteOption } from "../domains";
+import { Icon } from "../../Icon";
+interface MultiAutoCompletePrimitiveProps {
+    /**
+     * Allows free input of values not present in the options.
+     */
+    allowFreeInput?: boolean;
+    /**
+     * Indicates if the reset action should be displayed.
+     */
+    displayResetAction?: boolean;
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Message to display when there are no options.
+     */
+    emptyMessage?: React.ReactNode;
+    /**
+     * Indicates if the input field is invalid.
+     * Refer to `InputPrimitiveProps["invalid"]` for possible values.
+     */
+    invalid?: InputPrimitiveProps["invalid"];
+    /**
+     * Message to display when there are no options loaded or selected.
+     * Use it to invite the user to interact with the autocomplete by typing a value.
+     */
+    initialMessage?: React.ReactNode;
+    /**
+     * Reference to the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Accessible label for the command menu. Not shown visibly.
+     */
+    label?: React.ReactNode;
+    /**
+     * Indicates if the autocomplete is loading options.
+     */
+    loading?: boolean;
+    /**
+     * Message to display while loading options.
+     */
+    loadingMessage?: React.ReactNode;
+    /**
+     * Callback triggered when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback triggered when a value has been searched by the user.
+     */
+    onValueSearch?: (value: string) => void;
+    /**
+     * Callback triggered when the values change.
+     */
+    onValuesChange: (values: string[]) => void;
+    /**
+     * Callback triggered to reset the values.
+     */
+    onValuesReset?: () => void;
+    /**
+     * List of options for the autocomplete.
+     */
+    options?: MultiAutoCompleteOption[];
+    /**
+     * Custom renderer for the options.
+     */
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Size of the input field.
+     * Refer to `InputPrimitiveProps["size"]` for possible values.
+     */
+    size?: InputPrimitiveProps["size"];
+    /**
+     * Custom renderer for the selected options.
+     */
+    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;
+    /**
+     * Icon to be displayed at the start of the input field.
+     */
+    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;
+    /**
+     * Ensures that each value is unique.
+     */
+    uniqueValues?: boolean;
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+    /**
+     * Optional selected items.
+     */
+    values?: string[];
+}
+declare const MultiAutoCompletePrimitive: ((props: MultiAutoCompletePrimitiveProps) => React.JSX.Element) & {
+    original: (props: MultiAutoCompletePrimitiveProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: MultiAutoCompletePrimitiveProps) => React.JSX.Element) & {
+        original: (props: MultiAutoCompletePrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: MultiAutoCompletePrimitiveProps) => React.JSX.Element) & {
+        original: (props: MultiAutoCompletePrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js

@@ -0,0 +1,87 @@
+import React from "react";
+import { Command } from "../../Command";
+import { PopoverPrimitive } from "../../Popover";
+import { makeDecoratable } from "../../utils";
+import { useMultiAutoComplete } from "./useMultiAutoComplete";
+import { MultiAutoCompleteInput, MultiAutoCompleteInputIcons, MultiAutoCompleteList } from "./components";
+const DecoratableMultiAutoCompletePrimitive = props => {
+  const {
+    vm,
+    setListOpenState,
+    setSelectedOption,
+    searchOption,
+    removeSelectedOption,
+    resetSelectedOptions,
+    createOption
+  } = useMultiAutoComplete(props);
+  const handleKeyDown = React.useCallback(event => {
+    if (props.disabled) {
+      return;
+    }
+    if (!vm.optionsListVm.open) {
+      setListOpenState(true);
+    }
+    if (event.key.toLowerCase() === "escape") {
+      setListOpenState(false);
+    }
+  }, [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]);
+  const handleSelectOption = React.useCallback(value => {
+    setSelectedOption(value);
+    setListOpenState(false);
+  }, [setSelectedOption, setListOpenState]);
+  const handleCreateOption = React.useCallback(value => {
+    createOption(value);
+    setListOpenState(false);
+  }, [createOption, setListOpenState]);
+  return /*#__PURE__*/React.createElement(PopoverPrimitive, {
+    open: vm.optionsListVm.open,
+    onOpenChange: () => setListOpenState(true)
+  }, /*#__PURE__*/React.createElement(Command, {
+    label: String(props.label),
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Trigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(MultiAutoCompleteInput, {
+    inputRef: props.inputRef,
+    value: vm.inputVm.value,
+    placeholder: vm.inputVm.placeholder,
+    changeValue: searchOption,
+    closeList: () => setListOpenState(false),
+    openList: () => setListOpenState(true),
+    variant: props.variant,
+    size: props.size,
+    invalid: props.invalid,
+    removeSelectedOption: removeSelectedOption,
+    selectedOptionRenderer: props.selectedOptionRenderer,
+    selectedOptions: vm.selectedOptionsVm.options,
+    disabled: props.disabled,
+    startIcon: props.startIcon,
+    endIcon: /*#__PURE__*/React.createElement(MultiAutoCompleteInputIcons, {
+      inputSize: props.size,
+      displayResetAction: !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction,
+      disabled: props.disabled,
+      loading: props.loading,
+      onResetValue: resetSelectedOptions,
+      onOpenChange: () => setListOpenState(!vm.optionsListVm.open)
+    })
+  }))), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
+    style: {
+      width: "var(--radix-popover-trigger-width)"
+    },
+    onOpenAutoFocus: e => e.preventDefault()
+  }, /*#__PURE__*/React.createElement(MultiAutoCompleteList, {
+    emptyMessage: vm.optionsListVm.emptyMessage,
+    empty: vm.optionsListVm.empty,
+    loading: props.loading,
+    loadingMessage: vm.optionsListVm.loadingMessage,
+    onOptionCreate: handleCreateOption,
+    onOptionSelect: handleSelectOption,
+    optionRenderer: props.optionRenderer,
+    options: vm.optionsListVm.options,
+    temporaryOption: vm.temporaryOptionVm.option
+  }))));
+};
+const MultiAutoCompletePrimitive = makeDecoratable("MultiAutoCompletePrimitive", DecoratableMultiAutoCompletePrimitive);
+export { MultiAutoCompletePrimitive };
+
+//# sourceMappingURL=MultiAutoCompletePrimitive.js.map

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Command","PopoverPrimitive","makeDecoratable","useMultiAutoComplete","MultiAutoCompleteInput","MultiAutoCompleteInputIcons","MultiAutoCompleteList","DecoratableMultiAutoCompletePrimitive","props","vm","setListOpenState","setSelectedOption","searchOption","removeSelectedOption","resetSelectedOptions","createOption","handleKeyDown","useCallback","event","disabled","optionsListVm","open","key","toLowerCase","handleSelectOption","value","handleCreateOption","createElement","onOpenChange","label","String","onKeyDown","Trigger","asChild","inputRef","inputVm","placeholder","changeValue","closeList","openList","variant","size","invalid","selectedOptionRenderer","selectedOptions","selectedOptionsVm","options","startIcon","endIcon","inputSize","displayResetAction","empty","loading","onResetValue","Content","style","width","onOpenAutoFocus","e","preventDefault","emptyMessage","loadingMessage","onOptionCreate","onOptionSelect","optionRenderer","temporaryOption","temporaryOptionVm","option","MultiAutoCompletePrimitive"],"sources":["MultiAutoCompletePrimitive.tsx"],"sourcesContent":["import React, { KeyboardEvent } from \"react\";\nimport { Command } from \"~/Command\";\nimport { PopoverPrimitive } from \"~/Popover\";\nimport { InputPrimitiveProps } from \"~/Input\";\nimport { makeDecoratable } from \"~/utils\";\nimport { useMultiAutoComplete } from \"./useMultiAutoComplete\";\nimport {\n    MultiAutoCompleteInput,\n    MultiAutoCompleteInputIcons,\n    MultiAutoCompleteList\n} from \"./components\";\nimport { MultiAutoCompleteOption } from \"../domains\";\nimport { Icon } from \"~/Icon\";\n\ninterface MultiAutoCompletePrimitiveProps {\n    /**\n     * Allows free input of values not present in the options.\n     */\n    allowFreeInput?: boolean;\n    /**\n     * Indicates if the reset action should be displayed.\n     */\n    displayResetAction?: boolean;\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Message to display when there are no options.\n     */\n    emptyMessage?: React.ReactNode;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Message to display when there are no options loaded or selected.\n     * Use it to invite the user to interact with the autocomplete by typing a value.\n     */\n    initialMessage?: React.ReactNode;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Accessible label for the command menu. Not shown visibly.\n     */\n    label?: React.ReactNode;\n    /**\n     * Indicates if the autocomplete is loading options.\n     */\n    loading?: boolean;\n    /**\n     * Message to display while loading options.\n     */\n    loadingMessage?: React.ReactNode;\n    /**\n     * Callback triggered when the open state changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * Callback triggered when a value has been searched by the user.\n     */\n    onValueSearch?: (value: string) => void;\n    /**\n     * Callback triggered when the values change.\n     */\n    onValuesChange: (values: string[]) => void;\n    /**\n     * Callback triggered to reset the values.\n     */\n    onValuesReset?: () => void;\n    /**\n     * List of options for the autocomplete.\n     */\n    options?: MultiAutoCompleteOption[];\n    /**\n     * Custom renderer for the options.\n     */\n    optionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Custom renderer for the selected options.\n     */\n    selectedOptionRenderer?: (item: any, index: number) => React.ReactNode;\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Ensures that each value is unique.\n     */\n    uniqueValues?: boolean;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected items.\n     */\n    values?: string[];\n}\n\nconst DecoratableMultiAutoCompletePrimitive = (props: MultiAutoCompletePrimitiveProps) => {\n    const {\n        vm,\n        setListOpenState,\n        setSelectedOption,\n        searchOption,\n        removeSelectedOption,\n        resetSelectedOptions,\n        createOption\n    } = useMultiAutoComplete(props);\n\n    const handleKeyDown = React.useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (props.disabled) {\n                return;\n            }\n\n            if (!vm.optionsListVm.open) {\n                setListOpenState(true);\n            }\n\n            if (event.key.toLowerCase() === \"escape\") {\n                setListOpenState(false);\n            }\n        },\n        [props.disabled, setListOpenState, setSelectedOption, vm.optionsListVm.open]\n    );\n\n    const handleSelectOption = React.useCallback(\n        (value: string) => {\n            setSelectedOption(value);\n            setListOpenState(false);\n        },\n        [setSelectedOption, setListOpenState]\n    );\n\n    const handleCreateOption = React.useCallback(\n        (value: string) => {\n            createOption(value);\n            setListOpenState(false);\n        },\n        [createOption, setListOpenState]\n    );\n\n    return (\n        <PopoverPrimitive open={vm.optionsListVm.open} onOpenChange={() => setListOpenState(true)}>\n            <Command label={String(props.label)} onKeyDown={handleKeyDown}>\n                <PopoverPrimitive.Trigger asChild>\n                    <span>\n                        <MultiAutoCompleteInput\n                            inputRef={props.inputRef}\n                            value={vm.inputVm.value}\n                            placeholder={vm.inputVm.placeholder}\n                            changeValue={searchOption}\n                            closeList={() => setListOpenState(false)}\n                            openList={() => setListOpenState(true)}\n                            variant={props.variant}\n                            size={props.size}\n                            invalid={props.invalid}\n                            removeSelectedOption={removeSelectedOption}\n                            selectedOptionRenderer={props.selectedOptionRenderer}\n                            selectedOptions={vm.selectedOptionsVm.options}\n                            disabled={props.disabled}\n                            startIcon={props.startIcon}\n                            endIcon={\n                                <MultiAutoCompleteInputIcons\n                                    inputSize={props.size}\n                                    displayResetAction={\n                                        !vm.selectedOptionsVm.empty && vm.inputVm.displayResetAction\n                                    }\n                                    disabled={props.disabled}\n                                    loading={props.loading}\n                                    onResetValue={resetSelectedOptions}\n                                    onOpenChange={() => setListOpenState(!vm.optionsListVm.open)}\n                                />\n                            }\n                        />\n                    </span>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content\n                    style={{ width: \"var(--radix-popover-trigger-width)\" }}\n                    onOpenAutoFocus={e => e.preventDefault()}\n                >\n                    <MultiAutoCompleteList\n                        emptyMessage={vm.optionsListVm.emptyMessage}\n                        empty={vm.optionsListVm.empty}\n                        loading={props.loading}\n                        loadingMessage={vm.optionsListVm.loadingMessage}\n                        onOptionCreate={handleCreateOption}\n                        onOptionSelect={handleSelectOption}\n                        optionRenderer={props.optionRenderer}\n                        options={vm.optionsListVm.options}\n                        temporaryOption={vm.temporaryOptionVm.option}\n                    />\n                </PopoverPrimitive.Content>\n            </Command>\n        </PopoverPrimitive>\n    );\n};\n\nconst MultiAutoCompletePrimitive = makeDecoratable(\n    \"MultiAutoCompletePrimitive\",\n    DecoratableMultiAutoCompletePrimitive\n);\n\nexport { MultiAutoCompletePrimitive, type MultiAutoCompletePrimitiveProps };\n"],"mappings":"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","ignoreList":[]}

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.d.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiAutoCompletePrimitive } from "./MultiAutoCompletePrimitive";
+declare const meta: Meta<typeof MultiAutoCompletePrimitive>;
+export default meta;
+type Story = StoryObj<typeof MultiAutoCompletePrimitive>;
+export declare const Default: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const ExtraLargeSize: Story;
+export declare const WithStartIcon: Story;
+export declare const WithLoading: Story;
+export declare const WithoutResetAction: Story;
+export declare const PrimaryVariant: Story;
+export declare const PrimaryVariantDisabled: Story;
+export declare const PrimaryVariantInvalid: Story;
+export declare const SecondaryVariant: Story;
+export declare const SecondaryVariantDisabled: Story;
+export declare const SecondaryVariantInvalid: Story;
+export declare const GhostVariant: Story;
+export declare const GhostVariantDisabled: Story;
+export declare const GhostVariantInvalid: Story;
+export declare const WithPredefinedValue: Story;
+export declare const WithCustomPlaceholder: Story;
+export declare const WithCustomEmptyMessage: Story;
+export declare const WithCustomInitialMessage: Story;
+export declare const WithAllowFreeInput: Story;
+export declare const WithUniqueValues: Story;
+export declare const WithFormattedOptions: Story;
+export declare const WithCustomOptionRenderer: Story;
+export declare const WithCustomSelectedOptionRenderer: Story;
+export declare const WithSeparators: Story;
+export declare const WithDisabledOptions: Story;
+export declare const WithExternalValueControl: Story;